:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:28px;--space-8:32px;--space-10:40px;--space-12:48px;--font-sans:"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", "Cascadia Code", ui-monospace, "SF Mono", "Menlo", Consolas, monospace;--text-xs:clamp(.6875rem, .66rem + .14vw, .75rem);--text-sm:clamp(.75rem, .71rem + .21vw, .875rem);--text-base:clamp(.875rem, .82rem + .28vw, 1rem);--text-md:clamp(.9375rem, .87rem + .34vw, 1.125rem);--text-lg:clamp(1.0625rem, .96rem + .51vw, 1.375rem);--text-xl:clamp(1.25rem, 1.11rem + .71vw, 1.75rem);--text-2xl:clamp(1.5rem, 1.29rem + 1.07vw, 2.25rem);--leading-tight:1.15;--leading-snug:1.3;--leading-normal:1.5;--leading-relaxed:1.65;--tracking-tight:-.022em;--tracking-normal:-.011em;--tracking-wide:.02em;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-full:999px;--bg:#111315;--surface:#1c2024;--surface-2:#242a30;--surface-3:#15181b;--text:#eef1f3;--muted:#a9b1ba;--line:#343c44;--right:#58c7f3;--left:#ff9f1c;--good:#70d47b;--bad:#ff6b6b;--roll-bg:#15181b;--roll-grid:#242a30;--roll-line:#343c44;--roll-bar:#4a5661;--roll-playhead:#70d47b;--roll-selection:#70d47b1f;--roll-selection-line:#70d47bb8;--focus-ring:0 0 0 3px color-mix(in srgb, var(--right) 32%, transparent);--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1)}body.neothesiaSkin{--bg:#06080c;--surface:#10161d;--surface-2:#17202a;--surface-3:#0b0f14;--text:#f4fbff;--muted:#8fa2b4;--line:#263544;--right:#36d8ff;--left:#ffb52e;--good:#54ff9f;--bad:#ff5f7a;--roll-bg:#05070b;--roll-grid:#3c5b7052;--roll-line:#506f8475;--roll-bar:#8dcfff9e;--roll-playhead:#54ff9f;--roll-selection:#54ff9f1f;--roll-selection-line:#54ff9fb8}*,:before,:after{box-sizing:border-box}[hidden]{display:none!important}body{min-height:100vh;background:var(--bg);min-height:100dvh;color:var(--text);font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);letter-spacing:var(--tracking-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;margin:0;overflow:hidden}body.neothesiaSkin{background:linear-gradient(#080b12 0%,#05070b 100%)}:focus-visible{box-shadow:var(--focus-ring);outline:none}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{border-radius:var(--radius-full);background:color-mix(in srgb, var(--muted) 28%, transparent)}::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--muted) 44%, transparent)}::selection{background:color-mix(in srgb, var(--right) 32%, transparent);color:var(--text)}button,input,select,textarea{font:inherit;letter-spacing:inherit}button,.fileButton span,select{border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:var(--radius-md);min-height:38px;padding:0 var(--space-3);cursor:pointer;transition:border-color .14s var(--ease-out), background-color .14s var(--ease-out), box-shadow .14s var(--ease-out)}button:hover:not(:disabled),.fileButton span:hover:not(:disabled){border-color:color-mix(in srgb, var(--text) 36%, var(--line))}button:active:not(:disabled){transform:scale(.985)}input[type=range]{accent-color:var(--good);cursor:pointer}input[type=checkbox]{accent-color:var(--good);cursor:pointer;width:16px;height:16px}.iconButton{place-items:center;inline-size:38px;padding:0;display:inline-grid}.sidebarToggleButton{margin-inline-start:var(--space-2)}#toggleSidebarButton{min-width:44px;min-height:32px;padding:0 var(--space-3);flex:none;justify-content:center;align-items:center;display:inline-flex}.sidebarToggleIcon{font-size:18px;line-height:1}.transportButton{color:var(--text)}.transportButton:not(:disabled):hover{border-color:color-mix(in srgb, var(--good) 58%, var(--line))}.toggleIconButton[aria-pressed=true]{border-color:color-mix(in srgb, var(--good) 72%, var(--line));background:color-mix(in srgb, var(--good) 22%, var(--surface-2));color:var(--good)}.transportIcon{block-size:16px;inline-size:16px;display:block;position:relative}.playIcon{border-block:8px solid #0000;border-inline-start:13px solid;block-size:0;inline-size:0;transform:translate(2px)}.pauseIcon:before,.pauseIcon:after{content:"";background:currentColor;border-radius:1px;inline-size:5px;position:absolute;top:1px;bottom:1px}.pauseIcon:before{left:2px}.pauseIcon:after{right:2px}.stopIcon{background:currentColor;border-radius:2px;block-size:13px;inline-size:13px}.loopIcon{border:2px solid;border-inline-start-color:#0000;border-radius:50%;block-size:16px;inline-size:16px;transform:rotate(-34deg)}.loopIcon:after{content:"";border-block:4px solid #0000;border-inline-start:6px solid;block-size:0;inline-size:0;position:absolute;top:-4px;right:-1px;transform:rotate(30deg)}button:disabled{color:#68717a;cursor:not-allowed;opacity:.6}.shell{height:100vh;height:100dvh;min-height:0;transition:grid-template-columns .2s var(--ease-in-out);grid-template-columns:minmax(0,1fr) 340px;display:grid;overflow:hidden}.shell.sidebarCollapsed{grid-template-columns:minmax(0,1fr) 0}.workspace{border-right:1px solid var(--line);min-width:0;min-height:0;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);flex-direction:column;display:flex}.appHeader{border-bottom:2px solid var(--line);background:var(--surface-3);padding-top:env(safe-area-inset-top,0px)}.appHeaderMain{align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);scrollbar-width:thin;flex-wrap:nowrap;min-height:42px;display:flex;overflow-x:auto}.appHeaderMain button,.appHeaderMain .fileButton span,.appHeaderMain .toggle,.appHeaderMain select{min-height:32px}.appHeaderMain .iconButton{block-size:32px;inline-size:32px;min-height:32px}.headerGroup{align-items:center;gap:var(--space-2);padding:0 var(--space-2);border-left:1px solid var(--line);flex:none;display:flex}.headerGroup:first-child{border-left:none;padding-left:0}.headerSong{gap:var(--space-1);flex:auto;min-width:0}.headerTitle{font-size:var(--text-sm);font-weight:700;line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);white-space:nowrap;text-overflow:ellipsis;margin:0;overflow:hidden}.headerSong #songMeta{font-size:var(--text-xs);color:var(--muted);white-space:nowrap;text-overflow:ellipsis;max-width:100%;line-height:var(--leading-snug);margin:0;overflow:hidden}.headerTransport{padding:0 var(--space-1);gap:2px}.transportLabel{font-size:var(--text-xs);white-space:nowrap;font-weight:500;line-height:var(--leading-tight);margin-left:3px}.headerTransport .toggle{min-height:32px;padding:0 var(--space-1);font-size:var(--text-xs);cursor:pointer;white-space:nowrap;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-2);color:var(--text);transition:border-color .14s var(--ease-out), background-color .14s var(--ease-out);align-items:center;gap:3px;display:inline-flex}.headerTransport .toggle:hover{border-color:color-mix(in srgb, var(--text) 36%, var(--line))}.headerTransport .toggle input[type=checkbox]{width:14px;height:14px}.headerTransport .toggle span{font-size:var(--text-xs);color:var(--text);font-weight:500}.headerTransport #loopSelect{block-size:32px;inline-size:32px;justify-content:center;align-items:center;min-height:32px;padding:0;display:inline-flex}.headerPractice{gap:var(--space-2)}.headerPractice label{font-size:var(--text-xs);color:var(--muted);white-space:nowrap;align-items:center;gap:0;display:inline-flex}.headerPractice select{min-height:32px;font-size:var(--text-xs);padding:0 var(--space-2)}.headerPractice input[type=range]{width:80px;height:4px}.headerPractice .tempoControl{align-items:center;gap:var(--space-1);display:inline-flex}.headerPractice #tempoValue{text-align:right;font-variant-numeric:tabular-nums;min-inline-size:3.5ch;font-weight:600;font-size:var(--text-xs);color:var(--text);display:inline-block}.headerPractice .modeHelp{font-size:var(--text-xs);color:color-mix(in srgb, var(--muted) 72%, transparent);white-space:nowrap;text-overflow:ellipsis;max-inline-size:16ch;overflow:hidden}.headerRight{border-left:1px solid var(--line);gap:var(--space-2);background:var(--surface-3);z-index:2;padding-right:var(--space-3);flex:none;margin-left:auto;position:sticky;right:0}.headerRight .fileButton{align-items:center;display:inline-flex}.headerRight .fileButton span,.headerRight #audioImportButton,.headerRight #toggleSidebarButton{justify-content:center;align-items:center;min-width:44px;min-height:32px;display:inline-flex}.topbar,.topbarLeft,.topActions,.toolbar,.toolbarGroup,.toolbarGroupLabel,.toolbarAuthGroup{display:none}#mockAudioJobButton{border-color:color-mix(in srgb, var(--left) 60%, var(--line))}.toggle{min-height:38px}h1,h2,h3,h4,p{margin:0}h1{font-size:var(--text-xl);font-weight:700;line-height:var(--leading-tight);letter-spacing:var(--tracking-tight)}h2{font-size:var(--text-sm);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--muted);margin-bottom:var(--space-3);font-weight:650}p,dt,li,label{color:var(--muted);line-height:var(--leading-relaxed)}.fileButton{flex:none;display:inline-flex;position:relative}.fileButton input{opacity:0;pointer-events:none;block-size:1px;inline-size:1px;position:absolute;top:0;left:0}.fileButton span{cursor:pointer;white-space:nowrap;text-overflow:ellipsis;align-items:center;font-weight:500;display:inline-flex;overflow:hidden}.stage{background:var(--roll-bg);min-height:0;padding-bottom:env(safe-area-inset-bottom,0px);flex-direction:column;flex:auto;display:flex;position:relative;overflow:hidden}.modeHelp{font-size:var(--text-xs);color:color-mix(in srgb, var(--muted) 72%, transparent);line-height:var(--leading-snug);white-space:nowrap;text-overflow:ellipsis;max-inline-size:20ch;overflow:hidden}body.neothesiaSkin .stage{box-shadow:inset 0 18px 60px #36d8ff0f}.timelineBar{align-items:center;gap:var(--space-3);min-height:44px;padding:var(--space-2) 14px;border-bottom:1px solid var(--line);background:color-mix(in srgb, var(--surface) 76%, var(--roll-bg));color:var(--muted);font-size:var(--text-sm);grid-template-columns:auto minmax(160px,1fr) auto;display:grid}.timelineTrack{min-height:28px;position:relative}.timelineTrack input{z-index:3;width:100%;accent-color:var(--good);pointer-events:none;opacity:0;position:relative}.timelinePlayhead{z-index:4;background:var(--good,#70d47b);pointer-events:none;border-radius:1px;width:2px;position:absolute;top:-1px;bottom:-1px}.timelineTrack:before{content:"";background:var(--line);border-radius:1px;height:2px;position:absolute;inset:13px 0 auto}.timelineChunks,.timelineBars,.timelineSelection{pointer-events:none;position:absolute;inset:0}.timelineChunkBand{border-radius:3px;position:absolute;top:6px;bottom:6px}.timelineChunkBand.even{background:color-mix(in srgb, var(--muted) 8%, transparent)}.timelineChunkBand.odd{background:color-mix(in srgb, var(--muted) 14%, transparent)}.timelineBarTick{background:color-mix(in srgb, var(--muted) 36%, transparent);width:1px;position:absolute;top:4px;bottom:4px}.timelineBarTick.chunk{background:color-mix(in srgb, var(--good) 52%, transparent);z-index:2;width:2px}.timelineBarTick.strong{background:color-mix(in srgb, var(--text) 48%, transparent)}.timelineSelection{z-index:1;border:1px solid color-mix(in srgb, var(--good) 72%, transparent);border-radius:var(--radius-sm);background:color-mix(in srgb, var(--good) 26%, transparent);opacity:0;transition:opacity .15s var(--ease-out);top:5px;bottom:5px}.timelineSelection.active{opacity:1}.timelineTrack:not(.disabled){cursor:pointer}.timelineBar span:last-child{color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:500}#rollCanvas{block-size:auto;inline-size:100%;touch-action:none;flex:auto;min-height:0;display:block}.keyboard{bottom:env(safe-area-inset-bottom,0px);z-index:2;border-top:1px solid var(--line);background:color-mix(in srgb, var(--roll-bg) 84%, black);height:80px;position:absolute;left:0;right:0}.key{border-right:1px solid color-mix(in srgb, var(--roll-bg) 70%, black);position:absolute;top:0}.key.white{background:linear-gradient(#f8fbff 0%,#cdd5dc 100%);height:80px}.key.black{z-index:2;border:1px solid color-mix(in srgb, var(--line) 70%, black);background:linear-gradient(#1f2a38 0%,#060a0f 100%);border-top:0;height:48px}.key.active{background:linear-gradient(180deg, var(--good) 0%, color-mix(in srgb, var(--good) 40%, #061008) 100%);box-shadow:0 -12px 32px color-mix(in srgb, var(--good) 44%, transparent)}.key.playable{cursor:pointer}.keyLabel{border-radius:var(--radius-sm);color:#25303a;font-size:10px;font-weight:700;line-height:var(--leading-tight);letter-spacing:0;pointer-events:none;-webkit-user-select:none;user-select:none;background:#080c101f;padding:1px 5px;position:absolute;bottom:8px;left:50%;translate:-50%}.key.active .keyLabel{color:#061008;background:#080c1038}.panel{height:100vh;min-height:0;height:100dvh;padding:var(--space-5);background:var(--surface);font-size:var(--text-sm);overflow:auto}.shell.sidebarCollapsed .panel{border:0;padding:0;display:none;overflow:hidden}.sidebarSubtitle{font-size:var(--text-xs);color:var(--muted);font-weight:500;line-height:var(--leading-snug);margin-bottom:var(--space-4);opacity:.65}.sidebarSection+.sidebarSection{margin-top:var(--space-5)}.sidebarSection[data-group=audio],.sidebarSection[data-group=practice],.sidebarSection[data-group=tools],.sidebarSection[data-group=review],.sidebarSection[data-group=meta],.sidebarSection[data-group=files],.sidebarSection[data-group=import]{margin-top:var(--space-7)}.sidebarControlList{gap:var(--space-2);flex-direction:column;display:flex}.sidebarControlList label{align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--muted);min-height:38px;display:flex}.sidebarControlList label>span:first-child{min-width:56px;font-size:var(--text-xs);font-weight:500}.sidebarControlList select{min-height:34px;font-size:var(--text-sm);flex:1}.sidebarControlList button{justify-content:flex-start;gap:var(--space-2);width:100%}.sidebarControlList .fileButton{width:100%}.sidebarControlList .fileButton span{justify-content:center;width:100%}.panel button,.panel select,.panel .fileButton span{min-height:34px}.sidebarButton{align-items:center;gap:var(--space-2)!important;inline-size:auto!important;padding:0 var(--space-3)!important;display:flex!important}.sidebarButton .transportIcon{flex-shrink:0}.sidebarControlList .toggle{align-items:center;gap:var(--space-2);cursor:pointer;min-height:38px;display:flex}.sidebarControlList .toggle span{min-width:auto;font-size:var(--text-sm);color:var(--muted)}.sidebarGroupLabel{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;padding:var(--space-5) 0 var(--space-2) 0;border-top:1px solid color-mix(in srgb, var(--line) 60%, transparent);opacity:.55;-webkit-user-select:none;user-select:none;pointer-events:none;font-size:9px;font-weight:700}.sidebarGroupLabel:first-child{padding-top:var(--space-1);border-top:none}.sidebarGroupLabelPrimary{color:var(--good);opacity:.72}.sidebarSectionPrimary{border-left:2px solid color-mix(in srgb, var(--good) 28%, transparent);padding-left:var(--space-3)}.sidebarCollapsible{background:0 0;border:none;padding:0}.sidebarCollapsible>summary{cursor:pointer;margin-bottom:var(--space-3);color:var(--muted);font-size:var(--text-sm);letter-spacing:var(--tracking-wide);text-transform:uppercase;-webkit-user-select:none;user-select:none;align-items:center;padding:0;font-weight:650;list-style:none;display:flex}.sidebarCollapsible>summary::-webkit-details-marker{display:none}.sidebarCollapsible>summary:before{content:"▸";margin-right:var(--space-1);transition:transform .16s var(--ease-out);color:var(--muted);font-size:10px;display:inline-block}.sidebarCollapsible[open]>summary:before{transform:rotate(90deg)}.sidebarCollapsible>summary h2{font-size:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;margin:0;display:inline}.sidebarCollapsible{border-left:2px solid color-mix(in srgb, var(--muted) 16%, transparent);padding-left:var(--space-3)}.stats{gap:var(--space-2);margin:0;display:grid}.stats div{justify-content:space-between;gap:var(--space-4);padding:var(--space-2) 0;border-bottom:1px solid var(--line);display:flex}.stats dt{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide)}.stats dd{color:var(--text);font-variant-numeric:tabular-nums;margin:0;font-weight:600}.stats dd.low{color:var(--bad)}.stats dd.medium{color:var(--left)}.stats dd.high{color:var(--good)}.stats dd.unknown{color:var(--muted)}.pipeline{padding-left:var(--space-5);margin:0}.pipeline li{font-size:var(--text-sm);padding:5px 0}.pipeline .done{color:var(--good)}.compactPipeline{margin-top:var(--space-2);font-size:var(--text-xs)}.editorStatus,.practiceSummary,.audioJobStatus,.tutorMessage,.inputStatus{color:var(--muted);font-size:var(--text-sm);line-height:var(--leading-snug);margin-top:var(--space-3)}.chordStrip{margin-top:var(--space-3);color:var(--text);font-size:var(--text-sm);line-height:var(--leading-normal)}.audioCommand{margin-top:var(--space-3);padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-3)}.audioCommand p{color:var(--muted);font-size:var(--text-sm);line-height:var(--leading-snug)}.audioCommand .toggle{align-items:center;gap:var(--space-2);margin-top:var(--space-2);display:inline-flex}.audioCommand pre{margin:var(--space-2) 0 0;padding:var(--space-2);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font-mono);font-size:var(--text-xs);white-space:pre-wrap;word-break:break-word;background:#0f1113;line-height:1.45;overflow-x:auto}.audioCommand button{width:100%;margin-top:var(--space-2)}.editorGrid{gap:var(--space-2);margin-top:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.editorGrid button{width:100%}#resetProgressButton,#focusChunkButton,#latencyButton,#nextLowConfidenceButton{width:100%;margin-top:var(--space-3)}#nextLowChordButton,#acceptNoteButton,#acceptChordButton,#acceptAllNotesButton,#acceptAllChordsButton,#muteChordButton{width:100%;margin-top:var(--space-2)}.chordEditGrid{gap:var(--space-2);margin-top:var(--space-2);grid-template-columns:minmax(0,1fr) minmax(0,1fr);display:grid}.chordEditGrid button{grid-column:1/-1}#exerciseList{margin-top:var(--space-4);border-top:1px solid var(--line);padding-top:var(--space-2)}#exerciseList h3{margin:0 0 var(--space-2) 0;font-size:var(--text-xs);color:var(--muted);text-transform:uppercase;letter-spacing:var(--tracking-wide);font-weight:650}.exerciseItem{align-items:flex-start;gap:var(--space-2);padding:var(--space-2) 0;border-bottom:1px solid var(--line);display:flex}.exerciseItem:last-child{border-bottom:none}.exerciseIcon{font-size:var(--text-md);padding-top:1px}.exerciseInfo{flex:1;min-width:0}.exerciseLabel{font-size:var(--text-sm);color:var(--text);font-weight:600}.exerciseDesc{font-size:var(--text-xs);color:var(--muted);margin-top:2px}.exerciseStartBtn{font-size:var(--text-xs);padding:2px var(--space-2);white-space:nowrap;min-height:28px}#audioPreviewPanel{margin-top:var(--space-3)}#audioPreviewPanel h3{margin:0 0 var(--space-2) 0;font-size:var(--text-sm);color:var(--muted);font-weight:600}.audioPreviewItem{align-items:center;gap:var(--space-2);margin-bottom:var(--space-1);font-size:var(--text-sm);display:flex}.audioPreviewItem span{min-width:80px;color:var(--muted)}#projectDialog,#audioImportDialog{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--text);padding:var(--space-5) var(--space-6)}#projectDialog{width:min(480px,100vw - 32px)}#authDialog{width:min(380px,100vw - 32px)}#audioImportDialog{outline:0;width:min(620px,100vw - 28px);margin:auto;overflow:hidden;box-shadow:0 32px 80px #0000008c}#projectDialog::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000b3}#confirmDialog::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000b3}#audioImportDialog::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000b3}#projectDialog h2,#audioImportDialog h2{font-size:var(--text-lg);text-transform:none;letter-spacing:var(--tracking-normal);color:var(--text);margin-top:0}.dialogHeader{justify-content:space-between;align-items:flex-start;gap:var(--space-4);display:flex}.dialogHeader p{margin-top:var(--space-1);color:var(--muted);font-size:var(--text-sm);line-height:var(--leading-snug)}#audioImportCloseButton{border-radius:var(--radius-md);flex:0 0 36px;width:36px;min-height:36px;padding:0;font-size:22px;line-height:1}.audioImportForm{gap:var(--space-4);display:grid}.audioImportOptions{gap:var(--space-1);padding:var(--space-1);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.audioImportOptions button{color:var(--muted);background:0 0;border-color:#0000;font-weight:500}.audioImportOptions button.active{border-color:var(--line);background:var(--surface-2);color:var(--text);box-shadow:0 1px 3px #0003}.audioImportField{gap:var(--space-2);min-width:0;display:grid}.audioImportField span{color:var(--muted);font-size:var(--text-sm);font-weight:600}.audioImportField input{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-3);width:100%;min-width:0;min-height:44px;color:var(--text);padding:0 var(--space-3);font-size:var(--text-sm);transition:border-color .14s var(--ease-out), box-shadow .14s var(--ease-out)}.audioImportField input:focus{border-color:color-mix(in srgb, var(--right) 70%, var(--line));box-shadow:0 0 0 3px color-mix(in srgb, var(--right) 24%, transparent);outline:none}.audioDropzone{place-items:center;gap:var(--space-1);min-height:150px;padding:var(--space-5);border:2px dashed color-mix(in srgb, var(--right) 56%, var(--line));border-radius:var(--radius-md);background:var(--surface-3);cursor:pointer;text-align:center;transition:border-color .14s var(--ease-out), background-color .14s var(--ease-out);display:grid}.audioDropzone:hover{border-color:var(--right);background:color-mix(in srgb, var(--surface-3) 96%, var(--surface-2))}.audioDropzone input{opacity:0;block-size:1px;inline-size:1px;position:absolute}.audioDropzone span{color:var(--text);font-weight:600;font-size:var(--text-sm)}.audioDropzone small,.audioDisclaimer{color:var(--muted);font-size:var(--text-xs)}.audioDisclaimer{padding:var(--space-2) var(--space-3);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-3);line-height:var(--leading-snug)}.audioImportMode{justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.audioImportMode>span{color:var(--muted);font-size:var(--text-sm);font-weight:600}.audioImportMode label.toggle{align-items:center;gap:var(--space-2);cursor:pointer;display:flex}.audioImportMode label small{color:var(--muted);font-size:var(--text-xs);margin-left:auto}.audioImportProgress{gap:var(--space-2);display:grid}.progressTrack{border-radius:var(--radius-full);background:#0f1113;height:8px;overflow:hidden}.progressTrack span{border-radius:inherit;background:var(--good);width:0%;height:100%;transition:width .2s var(--ease-out);display:block}.audioImportError,.audioImportSuccess{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-sm);line-height:var(--leading-snug);margin:0}.audioImportError{border:1px solid color-mix(in srgb, var(--bad) 45%, var(--line));background:color-mix(in srgb, var(--bad) 10%, var(--surface-3));color:var(--bad)}.audioImportSuccess{border:1px solid color-mix(in srgb, var(--good) 45%, var(--line));background:color-mix(in srgb, var(--good) 10%, var(--surface-3));color:var(--good)}.projectGrid{gap:var(--space-1);flex-direction:column;max-height:360px;display:flex;overflow-y:auto}.projectItem{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--line);border-radius:var(--radius-md);transition:border-color .12s var(--ease-out);display:flex}.projectItem:hover{border-color:color-mix(in srgb, var(--text) 28%, var(--line))}.projectTitle{font-weight:600;font-size:var(--text-sm);flex:1}.projectMeta{font-size:var(--text-xs);color:var(--muted)}.projectEmpty,.projectAuthRequired{padding:var(--space-5);text-align:center;color:var(--muted);font-size:var(--text-sm);line-height:var(--leading-relaxed)}.dialogActions{justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-1);display:flex}#audioImportGenerateButton{border-color:color-mix(in srgb, var(--good) 48%, var(--line))}#audioImportGenerateButton:not(:disabled){background:color-mix(in srgb, var(--good) 22%, var(--surface-2));color:var(--text);font-weight:600}#confirmDialog{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);width:min(400px,100vw - 32px);color:var(--text);padding:var(--space-5) var(--space-6)}#confirmDialog h2{margin:0 0 var(--space-3) 0;font-size:var(--text-md);color:var(--text);text-transform:none;letter-spacing:var(--tracking-normal);font-weight:650}#confirmDialogMessage{color:var(--muted);font-size:var(--text-sm);line-height:var(--leading-relaxed);margin:0}.dangerButton{font-weight:600;background:color-mix(in srgb, var(--bad) 28%, var(--surface-2))!important;border-color:color-mix(in srgb, var(--bad) 55%, var(--line))!important;color:var(--bad)!important}.dangerButton:hover:not(:disabled){background:color-mix(in srgb, var(--bad) 44%, var(--surface-2))!important;border-color:var(--bad)!important}.projectLoading{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-6);color:var(--muted);font-size:var(--text-sm);display:flex}.projectLoading:before{content:"";border:2px solid var(--line);border-top-color:var(--right);border-radius:50%;width:18px;height:18px;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.projectEmpty,.projectAuthRequired{align-items:center;gap:var(--space-3);padding:var(--space-6) var(--space-4);text-align:center;color:var(--muted);font-size:var(--text-sm);line-height:var(--leading-relaxed);flex-direction:column;display:flex}.projectEmpty:before{content:"📁";opacity:.5;font-size:32px}.projectAuthRequired:before{content:"🔒";opacity:.5;font-size:32px}.projectError{padding:var(--space-4);text-align:center;color:var(--bad);font-size:var(--text-sm);line-height:var(--leading-snug)}@media (max-width:960px){.shell{height:100vh;grid-template-columns:1fr;height:100dvh}.shell.sidebarCollapsed{grid-template-columns:1fr}.appHeaderMain{gap:var(--space-1);padding:var(--space-1) var(--space-2);flex-wrap:wrap}.headerGroup{padding:0 var(--space-1);border-left:none}.headerSong{flex:0 auto;min-width:0;max-width:30%}.headerSong #songMeta{max-width:100%}.headerRight{margin-left:auto}.workspace{border-right:0}.panel{border-top:1px solid var(--line);height:min(44vh,440px)}.shell.sidebarCollapsed .panel{border-top:0;height:0;display:none}.sessionSummaryBanner{border-radius:var(--radius-md);max-width:none;font-size:var(--text-xs);left:4px;right:4px;transform:none}.keyboard,.key.white{height:70px}.key.black{height:42px}.keyLabel{font-size:9px;bottom:6px}}@media (max-width:640px){.appHeaderMain{padding:var(--space-1) var(--space-2);flex-wrap:nowrap;gap:2px;overflow-x:auto}.headerTitle{font-size:10px}.headerSong{flex:0 auto;min-width:70px;max-width:25%}.headerSong #songMeta{display:none}.headerGroup{gap:2px;padding:0}.headerPractice{flex:0 auto;min-width:0;overflow:hidden}.headerRight{z-index:3;margin-left:auto}.headerRight .fileButton,.headerRight button{font-size:10px}.headerRight .fileButton span,.headerRight #audioImportButton,.headerRight #toggleSidebarButton{min-width:40px;min-height:28px;padding:0 6px}.headerPractice select{min-width:44px;max-width:80px;min-height:26px;padding:0 4px;font-size:9px}.headerPractice input[type=range]{width:90px}.headerPractice #tempoValue{font-size:9px}.headerPractice .modeHelp{display:none}.headerTransport{gap:1px}.headerTransport .toggle{gap:1px;min-height:26px;padding:0 2px}.headerTransport #loopSelect{block-size:28px;inline-size:28px;min-height:28px;padding:0}.headerTransport .transportLabel,.headerTransport .toggle span{font-size:9px}.headerTransport .toggle input[type=checkbox]{width:12px;height:12px}#projectDialog{width:min(420px,100vw - 24px);padding:var(--space-4)}#audioImportDialog{width:min(540px,100vw - 20px);padding:var(--space-4)}#confirmDialog{width:min(360px,100vw - 24px);padding:var(--space-4)}.panel{height:min(38vh,360px);padding:var(--space-4);font-size:11px}.sessionSummaryBanner{padding:var(--space-2) var(--space-3);font-size:11px;bottom:80px;left:4px;right:4px}.timelineBar{z-index:5;gap:var(--space-2);padding:var(--space-1) 10px;background:color-mix(in srgb, var(--surface) 94%, transparent);-webkit-backdrop-filter:blur(6px);pointer-events:auto;border-bottom:none;min-height:38px;font-size:11px;position:absolute;top:0;left:0;right:0;box-shadow:0 1px 4px #0000004d}.timelineTrack input{pointer-events:auto}.keyboard,.key.white{height:60px}.key.black{height:36px}.keyLabel{padding:0 3px;font-size:8px;bottom:5px}}@media (max-width:480px){.appHeaderMain{padding:2px var(--space-1);gap:2px;min-height:36px}.headerTitle{font-size:10px}.headerSong #songMeta{max-width:180px;font-size:9px}.headerRight .fileButton,.headerRight button{font-size:9px}.headerRight .fileButton span,.headerRight #audioImportButton,.headerRight #toggleSidebarButton{min-width:40px;min-height:28px;padding:0 6px}.headerPractice select{min-height:28px;padding:0 var(--space-1);max-width:68px;font-size:9px}#modeSelect{max-width:56px}#chunkSelect{min-width:60px;max-width:100px}.headerPractice input[type=range]{width:100px}.headerPractice #tempoValue{font-size:9px}.headerRight{gap:2px}.headerTransport .toggle{gap:1px;min-height:28px;padding:0 2px}.headerTransport #loopSelect{block-size:32px;inline-size:32px;min-height:32px;padding:0}.headerTransport .transportLabel,.headerTransport .toggle span{font-size:9px}.headerTransport .toggle input[type=checkbox]{width:12px;height:12px}.headerTransport .transportToggle{display:none}.sessionSummaryBanner{padding:var(--space-1) var(--space-2);font-size:10px;bottom:60px;left:2px;right:2px}.panel{height:min(32vh,300px);padding:var(--space-3);font-size:10px}.panel button,.panel select,.panel .fileButton span{min-height:34px}.panel h2{font-size:10px}.stats dt{font-size:9px}.stats dd{font-size:var(--text-xs)}.sidebarSection+.sidebarSection{margin-top:var(--space-3)}.sidebarGroupLabel{padding:var(--space-3) 0 var(--space-1) 0;font-size:7px}#projectDialog,#audioImportDialog,#confirmDialog{padding:var(--space-3)}.audioImportOptions{grid-template-columns:1fr}.audioImportField input{min-height:38px;font-size:11px}.audioDropzone{min-height:120px;padding:var(--space-4)}.timelineBar{gap:var(--space-1);padding:var(--space-1) 6px;grid-template-columns:auto 1fr auto;min-height:32px;font-size:10px}.timelineBar span:last-child{font-size:10px}.keyboard,.key.white{height:50px}.key.black{height:30px}.keyLabel{font-size:7px;bottom:3px}}@media (max-width:440px){.appHeaderMain{gap:1px;padding:2px}#tempoValue{display:none}.headerRight .fileButton,.headerRight button{font-size:8px}.headerRight .fileButton span,.headerRight #audioImportButton,.headerRight #toggleSidebarButton{min-width:36px;min-height:28px;padding:0 4px}.headerPractice select{min-width:44px;max-width:80px;padding:0 2px;font-size:8px}#chunkSelect{min-width:52px;max-width:88px}.headerTransport .toggle span,.headerTransport .transportLabel{font-size:8px}.headerPractice input[type=range]{width:88px}}@media (orientation:landscape) and (max-height:520px){.appHeaderMain{padding:1px var(--space-1);gap:1px;min-height:30px}.headerSong #songMeta{display:none}.headerTitle{font-size:9px}.headerRight .fileButton,.headerRight button{font-size:8px}.headerRight .fileButton span,.headerRight #audioImportButton,.headerRight #toggleSidebarButton{min-width:34px;min-height:24px;padding:0 4px}.headerPractice select{min-width:36px;max-width:80px;min-height:22px;padding:0 1px;font-size:8px}#modeSelect{max-width:40px}#chunkSelect{min-width:44px;max-width:80px}.headerPractice input[type=range]{width:90px}.headerPractice #tempoValue{min-inline-size:2.5ch;font-size:8px}.headerPractice .modeHelp,.headerTransport .transportToggle{display:none}.headerTransport .toggle,.headerTransport #loopSelect{min-height:24px}.headerTransport .toggleIconButton{block-size:24px;inline-size:24px;min-height:24px}.headerTransport .transportLabel,.headerTransport .toggle span{font-size:8px}.headerTransport .toggle input[type=checkbox]{width:11px;height:11px}.panel{height:min(30vh,220px);padding:var(--space-2);font-size:10px}.panel button,.panel select,.panel .fileButton span{min-height:28px}.timelineBar{min-height:28px;padding:2px 8px;font-size:10px}.sessionSummaryBanner{padding:var(--space-1) var(--space-2);font-size:10px;bottom:28px}.playIcon{border-block-width:6px;border-inline-start-width:10px}}.skipLink{z-index:1000;border-radius:var(--radius-md);background:var(--surface-2);color:var(--text);font-weight:600;font-size:var(--text-sm);border:2px solid var(--right);padding:10px 18px;text-decoration:none;transition:top;position:absolute;top:-100%;left:12px;box-shadow:0 4px 16px #0000007a}.skipLink:focus{top:12px}.srOnly{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}#rollCanvas:focus-visible{box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--right) 48%, transparent), 0 0 0 1px var(--right);border-radius:0;outline:none}.appHeader button:focus-visible,.appHeader .fileButton:focus-within{box-shadow:var(--focus-ring);border-color:color-mix(in srgb, var(--right) 55%, var(--line));outline:none}.appHeader label.toggle:focus-within{box-shadow:var(--focus-ring);border-radius:var(--radius-md);outline:none}dialog button:focus-visible,.dialogActions button:focus-visible{box-shadow:var(--focus-ring);outline:none}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}.shell{transition:none!important}.projectLoading:before{border-top-color:#0000;border-right-color:var(--right);opacity:.7;animation:none!important}.sidebarCollapsible>summary:before{transition:none!important}}.tl-chunk--mastered{border-left:3px solid color-mix(in srgb, var(--good) 72%, transparent);background:color-mix(in srgb, var(--good) 10%, transparent)!important}.tl-chunk--good{border-left:3px solid color-mix(in srgb, var(--good) 48%, transparent);background:color-mix(in srgb, var(--good) 6%, transparent)!important}.tl-chunk--needs-practice{border-left:3px solid color-mix(in srgb, var(--bad) 64%, transparent);background:color-mix(in srgb, var(--bad) 8%, transparent)!important}.sessionSummaryBanner{z-index:20;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);border:1px solid color-mix(in srgb, var(--good) 36%, transparent);border-radius:var(--radius-md);background:color-mix(in srgb, var(--surface) 94%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:var(--text-sm);color:var(--text);white-space:normal;opacity:0;max-width:calc(100% - 32px);transition:opacity .35s var(--ease-out);pointer-events:auto;font-weight:500;display:flex;position:absolute;bottom:80px;left:50%;transform:translate(-50%);box-shadow:0 4px 24px #0006}.sessionSummaryBanner--visible{opacity:1}.sessionSummaryBanner[hidden]{display:none}.sessionSummaryText{min-width:0;line-height:var(--leading-snug);flex:1}.sessionSummaryDismiss{border-radius:var(--radius-sm);width:28px;height:28px;color:var(--muted);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;font-size:16px;transition:color .15s,background .15s;display:flex}.sessionSummaryDismiss:hover{color:var(--text);background:color-mix(in srgb, var(--muted) 16%, transparent)}.sessionSummaryDismiss:focus-visible{box-shadow:var(--focus-ring)}@media (prefers-reduced-motion:reduce){.sessionSummaryBanner{transition:none!important}}
