@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-cyrillic-ext-wght-normal-BOeWTOD4.woff2) format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-cyrillic-wght-normal-DqGufNeO.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-greek-ext-wght-normal-DlzME5K_.woff2) format("woff2-variations");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-greek-wght-normal-CkhJZR-_.woff2) format("woff2-variations");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-vietnamese-wght-normal-CBcvBZtf.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-ext-wght-normal-DO1Apj_S.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-wght-normal-Dx4kXJAl.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{font-family:Inter Variable,sans-serif;font-synthesis:none;font-weight:400;font-size:12px;color-scheme:dark;color:#e2e4e9;background:#000;--ease-out: cubic-bezier(.23, 1, .32, 1);--ease-in-out: cubic-bezier(.77, 0, .175, 1);--motion-press: .12s;--motion-fast: .16s;--motion-enter: .22s;--motion-reveal: .6s;--muted: #8d919d;--line: #ffffff0d;--track-label: 168px;--pad-width: min(1050px, calc(100vw - 64px) )}*{box-sizing:border-box}body{margin:0;min-width:360px;overflow:hidden}button,input,select{font:inherit;color:inherit}button{border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 10px;border-radius:8px;transition:background-color var(--motion-press) ease,color var(--motion-press) ease}@media(hover:hover)and (pointer:fine){button:hover{background:#ffffff0a;color:#fff}}button:disabled{opacity:.4;cursor:wait}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid #b39aff;outline-offset:3px}button svg{width:16px;height:16px;flex-shrink:0}button.active,button.chosen,button.playing{background:#ffffff12;color:#fff}input,select{min-width:0;border:1px solid #ffffff10;background:#ffffff05;padding:10px;border-radius:8px}select{cursor:pointer}option{background:#24262e}input[type=range]{padding:0;height:18px;accent-color:#b39aff;border:0;background:transparent;cursor:pointer}input[type=checkbox]{accent-color:#b39aff;width:16px;height:16px}input[type=number],output{font-variant-numeric:tabular-nums}label{display:flex;flex-direction:column;gap:10px;color:var(--muted);font-size:11px}label input,label select{color:#e2e4e9}b,strong{font-weight:500}p{margin:0}i{font-style:normal;color:#555966;margin:0 8px}kbd{font:inherit;font-size:10px;color:var(--muted)}[hidden]{display:none!important}.glass{background:linear-gradient(135deg,#303645d6,#252a35d2 36%,#171c28dc);border:1px solid #e4eaff26;box-shadow:0 12px 40px #0005,inset 0 1px #ffffff14,inset 0 -1px #b39aff0a;backdrop-filter:blur(16px) saturate(135%);-webkit-backdrop-filter:blur(16px) saturate(135%)}main{position:fixed;inset:0;background:#000}#stage{position:absolute;inset:0;touch-action:none}#stage canvas{display:block;width:100%;height:100%;opacity:0;visibility:hidden;transition:opacity var(--motion-reveal) var(--ease-out)}#stage[data-ready=true] canvas{opacity:1;visibility:visible}#model-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);pointer-events:none;font-size:11px;z-index:1;transition:opacity var(--motion-enter) ease,visibility var(--motion-enter)}#stage[data-ready=true] #model-loading{opacity:0;visibility:hidden}.loading-pulse{width:6px;height:6px;border-radius:50%;background:#bfc5d0;animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{50%{opacity:.3}}.menu-bar{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:5;height:56px;display:flex;align-items:center;gap:5px;padding:8px 10px;border-radius:17px;white-space:nowrap}.menu-bar button{height:36px;color:#a7aab5}.menu-bar button.active{color:#f2f2f7}@media(hover:hover)and (pointer:fine){.menu-bar button:hover{color:#f2f2f7}}.view-switch,.mode-switch{display:flex;gap:3px}.view-switch button{width:38px}.menu-item{font-size:11px}.separator{width:1px;height:19px;background:#ffffff10;flex-shrink:0;margin:0 5px}.icon-button{width:34px;height:34px;padding:0;flex-shrink:0;color:var(--muted)}.record-button{width:34px;padding:0}.record-button>span{width:11px;height:11px;border:1.5px solid #e0818d;border-radius:50%;background:#e0818d30}.record-button.recording{background:#ff71861a}.record-button.recording>span{background:#ff7186;border-color:#ff7186;box-shadow:0 0 13px #ff718685;animation:pulse 1.5s infinite}.tempo-control{flex-direction:row;align-items:center;gap:4px;font-size:8px;padding-left:5px}.tempo-control input{border:0;background:transparent;padding:5px 0;width:34px;font-size:12px;text-align:center;appearance:textfield}.tempo-control input::-webkit-inner-spin-button{appearance:none}#position{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;width:35px;text-align:center}.midi-button.connected{color:#6ee3aa}.mapping-mode .menu-bar [data-action=accessible-controls]{background:#b39aff24;color:#c8b6ff}.mapping-mode #stage canvas{cursor:crosshair!important}#pad-shelf{position:absolute;bottom:97px;left:50%;transform:translate(-50%);width:var(--pad-width);display:grid;grid-template-columns:repeat(8,1fr);z-index:2;opacity:0;visibility:hidden;transition:opacity var(--motion-fast) var(--ease-out),visibility var(--motion-fast) allow-discrete}.pad-key{min-width:0;gap:7px;padding:4px;color:#989daa;font-size:9px;border-radius:5px}.pad-key.struck{color:var(--lane);text-shadow:0 0 10px var(--lane)}.pad-key.struck kbd{color:var(--lane)}body[data-camera=drums] #pad-shelf,body.no-webgl #pad-shelf{opacity:1;visibility:visible}body.no-webgl .pad-key{height:70px;background:color-mix(in srgb,var(--lane) 14%,#20222a);border:1px solid color-mix(in srgb,var(--lane) 35%,transparent)}body.no-webgl .pad-key.struck{background:color-mix(in srgb,var(--lane) 50%,#20222a);box-shadow:0 0 25px color-mix(in srgb,var(--lane) 30%,transparent)}#drum-workspace{position:absolute;inset:24px max(32px,calc((100vw - 1200px)/2)) 220px;z-index:2;display:flex;flex-direction:column;gap:12px;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity var(--motion-enter) var(--ease-out),transform var(--motion-enter) var(--ease-out),display var(--motion-enter) allow-discrete}body[data-camera=drums] #drum-workspace{opacity:1;pointer-events:auto;transform:none}.workspace-tools{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}#loop-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50%;justify-content:flex-start}.mode-switch{padding:3px;border-radius:9px;background:#ffffff04}.mode-switch button{font-size:11px;padding:7px 14px;color:var(--muted)}.mode-switch .active{background:#ffffff0d;color:#e7e8ed}.panel{border:1px solid #dae4ff24;border-radius:18px;overflow:hidden;background:linear-gradient(150deg,#282f3bdd,#191e2bd8 38%,#171b26eb);box-shadow:inset 0 1px #ffffff10,0 14px 40px #0003;backdrop-filter:blur(12px) saturate(125%);-webkit-backdrop-filter:blur(12px) saturate(125%)}#editor-panel{overflow:auto}.editor-toolbar{background:linear-gradient(110deg,#ffffff08,#b39aff06,transparent);display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding:8px 12px;min-height:47px}.toolbar-group{display:flex;gap:3px;align-items:center}.toolbar-group button{font-size:10px;color:#a1a5b1}.toolbar-group .icon-button{width:28px;height:28px}#selection-count{font-size:10px;color:var(--muted)}.ruler{display:flex;height:30px;border-bottom:1px solid var(--line)}.ruler-label{width:var(--track-label);flex-shrink:0}.ruler-beats{display:flex;align-items:center;flex:1}.ruler-beats span{flex:1;padding-left:7px;font-size:9px;color:#595e6b}.ruler-beats .bar-number{color:#b1b5c2;font-weight:500}.tracks{position:relative}.track{height:42px;display:flex;border-bottom:1px solid #ffffff05}.track-label{width:var(--track-label);display:flex;align-items:center;gap:3px;padding:0 10px;flex-shrink:0}.lane-play{color:var(--lane);background:color-mix(in srgb,var(--lane) 10%,transparent);padding:0;font-size:9px;width:21px;height:23px;border-radius:5px;flex-shrink:0}.lane-name{font-size:10px;flex:1;min-width:0;white-space:nowrap;padding:6px 4px;justify-content:space-between;color:#adb1bc}.lane-name span{color:#626775}.lane-toggle{width:17px;height:22px;padding:0;font-size:8px;color:#606571}.lane-toggle.active{background:#ffffff16;color:#eee}.lane-grid{flex:1;position:relative;cursor:crosshair;touch-action:none;background-image:linear-gradient(to right,#ffffff0d 1px,transparent 1px),linear-gradient(to right,#ffffff04 1px,transparent 1px);background-size:calc(100% / var(--beats)) 100%,calc(100% / var(--steps)) 100%}.hit{position:absolute;bottom:6px;min-width:3px;border-radius:3px;padding:0;background:linear-gradient(165deg,#ffffff60,transparent 45%),var(--lane);border:1px solid #ffffff45;box-shadow:inset 0 -3px 5px #0002,0 2px 8px #0002;opacity:.75;cursor:grab;transition:none;touch-action:none}.scrubbing .ruler-beats{background:#b39aff20}.scrubbing .playhead-line{border-left-color:#eee6ff}@media(prefers-reduced-transparency:reduce){.glass,.panel{background:#20242f;backdrop-filter:none;-webkit-backdrop-filter:none}}@media(hover:hover)and (pointer:fine){.hit:hover{background:var(--lane);opacity:1}}.hit.selected{outline:1px solid var(--lane);outline-offset:3px;opacity:1}.muted .lane-grid{opacity:.25}.playhead{position:absolute;inset:0 0 0 var(--track-label);pointer-events:none;z-index:1;overflow:hidden}.playhead-line{width:100%;height:100%;border-left:1px solid #d8d0ff;will-change:transform}#velocity-editor{display:flex;align-items:center;gap:18px;padding:8px 15px;border-top:1px solid var(--line);font-size:10px}#velocity-editor label{flex-direction:row;align-items:center;gap:10px}#velocity-editor input{width:120px}#velocity-editor output{width:22px}#learn-panel{width:var(--pad-width);max-width:100%;align-self:center;flex:1;min-height:0;display:flex;flex-direction:column;padding:10px 0 12px}.lesson-tools{padding:0 12px;display:flex;align-items:center;gap:10px;flex-shrink:0}.lesson-tools>button:first-child{margin-right:auto;max-width:35%}.listen-button{min-height:38px;padding:10px 16px;border:1px solid #ffffff20;background:#ffffff0a;font-weight:500;white-space:nowrap}.listen-button[aria-pressed=true]{border-color:#b39aff65;background:#b39aff1a}#lesson-name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.speed-label{display:flex;flex-direction:row;align-items:center;gap:8px}.speed-label input{width:90px}.speed-label output{width:33px;font-size:10px}#lesson-bpm{font-size:10px;color:var(--muted);white-space:nowrap}#coach-canvas{background:radial-gradient(ellipse at 50% 100%,#9e86ef15,transparent 68%);width:100%;flex:1;min-height:0;display:block;margin:14px 0 10px}.coach-score{padding:0 12px;display:flex;justify-content:space-between;color:var(--muted);font-size:10px;height:18px;flex-shrink:0}.coach-score b{color:#c4b4f1}.quiet,.text-button{color:var(--muted);font-size:11px}.primary{background:#b39aff;color:#201a31;font-size:11px;font-weight:500;padding:10px 15px}@media(hover:hover)and (pointer:fine){.primary:hover{background:#c5b1ff;color:#201a31}}#inspector{position:fixed;z-index:6;right:30px;bottom:100px;width:260px;padding:18px;border-radius:14px;display:flex;flex-direction:column;gap:16px}.inspector-head{display:flex;align-items:center;justify-content:space-between;color:var(--muted)}.value-slider{flex-direction:row;align-items:center;gap:14px}.value-slider input{flex:1}.value-slider output{width:28px;color:#c4b4f1}.midi-mapping,.timing-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.midi-mapping input,.midi-mapping select{width:100%}dialog{color:#e2e4e9;margin:auto auto 96px;width:450px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 120px);overflow:auto;padding:20px;border-radius:16px}dialog.wide{width:620px}dialog::backdrop{background:#080a1040}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:16px;color:#adb1bf;font-size:12px}.dialog-head .icon-button{width:25px;height:25px}.dialog-description,.fine-print{font-size:10px;line-height:1.7;color:var(--muted);margin-bottom:15px}.dialog-actions{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:16px 0}.collection-actions{display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:12px}.collection-actions button{font-size:10px;padding:6px 3px}.danger{color:#f18b96}.library-list,.lesson-list{display:flex;flex-direction:column;gap:5px;max-height:50dvh;overflow:auto}.library-row,.lesson-list button{text-align:left;justify-content:flex-start;gap:12px;padding:12px}.library-row.current{background:#b39aff12}.library-row>span:nth-child(2),.lesson-list button>span:nth-child(2){display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}.library-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.library-row small,.lesson-list small{font-size:9px;color:var(--muted)}.loop-art{color:#a697cb}.lesson-index{color:#686d7a;font-size:10px}.lesson-tempo{display:flex;flex-direction:column;gap:5px;color:var(--muted)}.sound-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.sound-choices button{padding:13px 10px;border:1px solid var(--line);justify-content:space-between;font-size:11px}.sound-dot{width:5px;height:5px;border-radius:50%;background:var(--lane);flex-shrink:0}.full-label{margin:18px 0}.toggle-row{flex-direction:row;align-items:center;justify-content:space-between;margin:20px 0}.export-choices{display:flex;flex-direction:column;gap:8px}.export-choices>button{padding:15px;border:1px solid var(--line);justify-content:space-between;text-align:left}.export-choices>button>span{display:grid;grid-template-columns:22px 1fr;align-items:center;gap:6px 10px}.export-choices small{grid-column:2;font-size:9px;color:var(--muted)}.help-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:13px;margin:20px 0;font-size:10px;line-height:1.5}.help-grid>span{color:var(--muted)}.accessible-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}.accessible-controls label{padding:12px;border:1px solid var(--line);border-radius:10px}.accessible-controls button{align-self:flex-end;font-size:10px;color:var(--muted)}#toast{position:fixed;bottom:95px;left:50%;transform:translate(-50%,6px);z-index:20;background:#303440;color:#e1e3ed;border:1px solid #ffffff0d;border-radius:9px;padding:10px 16px;font-size:11px;max-width:calc(100vw - 32px);opacity:0;pointer-events:none;transition:opacity var(--motion-fast) var(--ease-out),transform var(--motion-enter) var(--ease-out)}#toast.visible{opacity:1;transform:translate(-50%)}@media(max-width:800px){:root{--track-label: 130px;--pad-width: calc(100vw - 32px) }.menu-bar{gap:2px;padding:7px;bottom:20px}.menu-item{width:32px;padding:0}.menu-item span{display:none}.menu-bar .separator{margin:0 2px}#drum-workspace{inset:16px 16px 195px}.track-label{padding:0 6px;gap:1px}.lane-name{font-size:9px;padding:4px 2px}.lane-name span{display:none}.lane-toggle{width:15px}.editor-toolbar{padding:7px}.toolbar-group{gap:0}.toolbar-group button{padding:7px;font-size:9px}#selection-count{display:none}.lesson-tools{gap:4px;flex-wrap:wrap}.speed-label input{width:60px}#lesson-bpm{display:none}.pad-key{flex-direction:column;gap:5px;font-size:8px}#pad-shelf{bottom:91px}}@media(max-width:500px){.menu-bar{width:calc(100vw - 20px);justify-content:center;gap:0}.menu-bar button,.view-switch button{width:29px}.menu-bar .separator{margin:0 2px}#position,.menu-bar [data-action=help]{display:none}.tempo-control{padding-left:0;gap:0}.tempo-control span{display:none}.tempo-control input{width:31px}.pad-key>span{display:none}#pad-shelf{bottom:100px}#velocity-editor{gap:4px;padding:8px}#velocity-editor input{width:65px}#velocity-editor button{font-size:9px;padding:4px}}.view-switch,.mode-switch{--tab-inset: 0px;position:relative;display:grid;grid-template-columns:repeat(2,1fr);isolation:isolate}.mode-switch{--tab-inset: 3px}.view-switch:before,.mode-switch:before{content:"";position:absolute;top:var(--tab-inset);bottom:var(--tab-inset);left:var(--tab-inset);width:calc((100% - var(--tab-inset) - var(--tab-inset) - 3px) / 2);border-radius:7px;background:#ffffff0d;transition:transform var(--motion-enter) var(--ease-in-out);z-index:-1}body[data-view=drums] .view-switch:before,.mode-switch:has([data-action=learn].active):before{transform:translate(calc(100% + 3px))}.view-switch button.active,.mode-switch button.active{background:transparent}dialog{opacity:0;transform:translateY(6px) scale(.97);transform-origin:center;transition:opacity var(--motion-fast) var(--ease-out),transform var(--motion-enter) var(--ease-out),display var(--motion-enter) allow-discrete,overlay var(--motion-enter) allow-discrete}dialog[open]{opacity:1;transform:translateY(0) scale(1)}dialog::backdrop{opacity:0;transition:opacity var(--motion-fast) ease,display var(--motion-enter) allow-discrete,overlay var(--motion-enter) allow-discrete}dialog[open]::backdrop{opacity:1}#inspector{opacity:1;transform:translateY(0) scale(1);transform-origin:bottom right;transition:opacity var(--motion-fast) var(--ease-out),transform var(--motion-enter) var(--ease-out),display var(--motion-enter) allow-discrete}#inspector[hidden]{opacity:0;transform:translateY(6px) scale(.97)}#editor-panel,#learn-panel{transition:opacity var(--motion-fast) var(--ease-out)}@starting-style{dialog[open]{opacity:0;transform:translateY(6px) scale(.97)}dialog[open]::backdrop{opacity:0}#inspector:not([hidden]){opacity:0;transform:translateY(6px) scale(.97)}#editor-panel:not([hidden]),#learn-panel:not([hidden]){opacity:0}}#record,#play,.pad-key,.lane-play,.hit{transition:none}@media(hover:hover)and (pointer:fine){.menu-item,.view-switch button,.mode-switch button,dialog button,#inspector button{transition:transform var(--motion-fast) var(--ease-out),background-color var(--motion-press) ease,color var(--motion-press) ease}.menu-item:active,.view-switch button:active,.mode-switch button:active,dialog button:active,#inspector button:active{transform:scale(.97);transition-duration:var(--motion-press)}}@media(prefers-reduced-motion:reduce){#stage canvas{transition-duration:var(--motion-fast)}*,*:before,*:after{animation:none!important}.view-switch:before,.mode-switch:before{transition:none}button{transition:background-color var(--motion-press) ease,color var(--motion-press) ease!important}button:active{transform:none!important}dialog,dialog[open],#inspector,#inspector[hidden],#drum-workspace{transform:none!important;transition:opacity var(--motion-fast) ease,display var(--motion-fast) allow-discrete,overlay var(--motion-fast) allow-discrete}#toast,#toast.visible{transform:translate(-50%);transition:opacity var(--motion-fast) ease}#record,#play,.pad-key,.lane-play,.hit{transition:none!important}}.ruler-beats{cursor:ew-resize;touch-action:none;-webkit-user-select:none;user-select:none}.ruler-beats:hover,.ruler-beats:focus-visible{background:#b39aff0d}.record-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:48px}.record-button kbd{font-size:10px;color:var(--muted)}#editor-play{color:#d7c8ff}.menu-bar .record-button{width:auto;padding:0 10px}#record-label{font-size:11px;font-weight:500}.bars-control{width:91px;height:36px;padding:0 7px;background:#ffffff06;border:1px solid #ffffff12;border-radius:9px;font-size:11px}.take-button{gap:6px;padding:0 9px;font-size:11px}@media(max-width:800px){.menu-bar{max-width:calc(100vw - 24px);overflow-x:auto}.menu-bar>*{flex-shrink:0}.menu-bar .record-button{padding:0 7px}}