:root{color-scheme:dark;--bg: #0c0d10;--bg-elevated: #101115;--bg-elevated-2: #14161b;--bg-elevated-3: #191c22;--border: #262931;--border-subtle: #1a1c22;--text: #eef0f3;--text-dim: #9a9da5;--text-faint: #6c6f77;--accent: #5e79f0;--accent-hover: #6f88f3;--accent-contrast: #eef1ff;--accent-dim: #1e2340;--correct: #4cc38a;--wrong: #ef6672;--missed: #e0a53f;--extra: #a97ff2;--key-white: #eceef2;--key-black: #17181c;--focus-ring: var(--accent);--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2.5rem;--text-xs: .75rem;--text-sm: .85rem;--text-base: .95rem;--text-lg: 1.05rem;--text-xl: 1.5rem;--text-2xl: 2.2rem;--text-3xl: 3rem;--radius-sm: 6px;--radius: 10px;--radius-lg: 14px;--radius-full: 999px;--control-h: 2.25rem;--nav-h: 3.25rem;--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:var(--text-base);line-height:1.5}h1,h2,h3,h4{margin:0 0 .5em;font-weight:650;letter-spacing:-.01em}p{margin:0 0 .75em;color:var(--text-dim)}a{color:var(--accent)}button,input,select{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.app-shell{display:flex;flex-direction:column;min-height:100%}.app-nav{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--space-4);height:var(--nav-h);padding:0 var(--space-4);border-bottom:1px solid var(--border);background:var(--bg-elevated)}.app-nav__brand{justify-self:start;font-weight:700;font-size:var(--text-lg);color:var(--text);text-decoration:none;display:flex;align-items:center;gap:.45rem}.app-nav__brand-mark{color:var(--text-dim)}.app-nav__links{justify-self:center;display:flex;gap:var(--space-1)}.app-nav__link{padding:.4rem .8rem;border-radius:var(--radius-sm);color:var(--text-dim);text-decoration:none;font-size:var(--text-sm);font-weight:550}.app-nav__link:hover{background:var(--bg-elevated-2);color:var(--text)}.app-nav__link--active{color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}.app-nav__actions{justify-self:end;display:flex;align-items:center;gap:var(--space-1)}.app-main{flex:1;width:100%;min-width:0}.page{max-width:1040px;margin:0 auto;padding:var(--space-5) var(--space-4) var(--space-6)}.page-header{margin-bottom:var(--space-5)}.page-header__eyebrow{color:var(--text-faint);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.25rem}.overflow-menu{position:relative}.overflow-menu__panel{position:absolute;right:0;top:calc(100% + .4rem);min-width:220px;display:flex;flex-direction:column;gap:.15rem;padding:.35rem;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 12px 34px #0006;z-index:60}.overflow-menu__item{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;padding:.5rem .6rem;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-dim);font-size:var(--text-sm);text-align:left;text-decoration:none;cursor:pointer}.overflow-menu__item:hover{background:var(--bg-elevated-3);color:var(--text)}.overflow-menu__heading{padding:.45rem .6rem .25rem;color:var(--text);font-size:var(--text-sm);font-weight:650}.overflow-menu__sep{height:1px;margin:.2rem .3rem;background:var(--border-subtle)}.panel{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:var(--space-4)}.panel+.panel{margin-top:var(--space-4)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;height:var(--control-h);padding:0 .85rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-elevated-2);color:var(--text);cursor:pointer;font-size:var(--text-sm);font-weight:550;line-height:1;white-space:nowrap;transition:background-color .12s ease,border-color .12s ease,opacity .12s ease}.btn:hover:not(:disabled){background:var(--bg-elevated-3);border-color:var(--border)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn--primary{background:var(--accent);color:var(--accent-contrast);border-color:var(--accent)}.btn--primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.btn--quiet{background:transparent;border-color:transparent;color:var(--text-dim)}.btn--quiet:hover:not(:disabled){background:var(--bg-elevated-2);color:var(--text);border-color:transparent}.btn--danger{background:transparent;border-color:color-mix(in srgb,var(--wrong) 45%,var(--border));color:var(--wrong)}.btn--danger:hover:not(:disabled){background:color-mix(in srgb,var(--wrong) 12%,transparent);border-color:var(--wrong)}.btn--icon{width:var(--control-h);padding:0;font-size:1rem;background:transparent;border-color:transparent;color:var(--text-dim)}.btn--icon:hover:not(:disabled){background:var(--bg-elevated-2);color:var(--text)}.btn--sm{height:1.9rem;padding:0 .6rem;font-size:var(--text-xs)}.btn-row{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}.toggle{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;font-size:var(--text-sm);color:var(--text-dim);user-select:none}.toggle input{accent-color:var(--accent);width:1rem;height:1rem}.field{display:flex;flex-direction:column;gap:.3rem;font-size:var(--text-sm);color:var(--text-dim)}.field input[type=range]{accent-color:var(--accent)}.select{height:var(--control-h);padding:0 .6rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-elevated-2);color:var(--text)}.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .55rem;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;border:1px solid var(--border);color:var(--text-dim)}.badge--dot:before{content:"";width:.5rem;height:.5rem;border-radius:var(--radius-full);background:currentColor}.badge--ok{color:var(--correct);border-color:color-mix(in srgb,var(--correct) 40%,var(--border))}.badge--warn{color:var(--missed);border-color:color-mix(in srgb,var(--missed) 40%,var(--border))}.badge--error{color:var(--wrong);border-color:color-mix(in srgb,var(--wrong) 40%,var(--border))}.badge--neutral{color:var(--text-faint)}.empty-state{text-align:center;padding:var(--space-6) var(--space-4);color:var(--text-dim)}.error-banner{background:color-mix(in srgb,var(--wrong) 12%,var(--bg-elevated));border:1px solid color-mix(in srgb,var(--wrong) 45%,var(--border));color:var(--wrong);padding:.6rem .85rem;border-radius:var(--radius-sm);font-size:var(--text-sm);margin-bottom:var(--space-3)}.drop-zone{display:flex;flex-direction:column;align-items:center;gap:.3rem;width:100%;border:1.5px dashed var(--border);border-radius:var(--radius);padding:2rem 1rem;text-align:center;color:var(--text-dim);background:var(--bg-elevated);cursor:pointer;transition:border-color .12s ease,background-color .12s ease}.drop-zone:hover,.drop-zone--active{border-color:var(--accent);background:var(--accent-dim);color:var(--text)}.drop-zone input{display:none}.u-center{text-align:center;margin-top:var(--space-3)}.hero{text-align:center;padding:var(--space-6) 0 var(--space-5)}.hero__eyebrow{color:var(--text-faint);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em}.hero__title{font-size:var(--text-3xl);line-height:1.1;margin:.35rem 0 .5rem}.hero__sub{color:var(--text-dim);font-size:var(--text-lg);margin:0}.import-zone{padding:2.75rem 1.5rem;gap:.5rem}.drop-zone__icon{color:var(--accent);margin-bottom:.4rem}.import-zone strong{font-size:var(--text-lg);color:var(--text)}.secondary-block{margin-top:var(--space-6)}.secondary-block__label{font-size:var(--text-sm);font-weight:600;color:var(--text-dim);margin-bottom:var(--space-3)}.chip-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-3)}.chip{display:flex;align-items:center;gap:.55rem;padding:.7rem .85rem;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text);font-size:var(--text-sm);text-align:left;cursor:pointer}.chip:hover{border-color:var(--border);background:var(--bg-elevated-2)}.chip__icon{color:var(--text-faint);flex-shrink:0}.chip__grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chip__chevron{color:var(--text-faint)}.recent-list{display:flex;flex-direction:column;gap:var(--space-2)}.recent-row{display:flex;align-items:center;gap:.6rem;padding:.65rem .85rem;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text);font-size:var(--text-sm);text-align:left;cursor:pointer}.recent-row:hover{border-color:var(--border);background:var(--bg-elevated-2)}.recent-row__meta{margin-left:auto;color:var(--text-faint);font-size:var(--text-xs)}.song-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-3)}.song-card{display:block;text-align:left;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.85rem;cursor:pointer;color:var(--text)}.song-card:hover{border-color:var(--accent)}.song-card__name{font-weight:600;margin-bottom:.2rem}.song-card__meta{font-size:.8rem;color:var(--text-faint)}.practice-page{display:flex;flex-direction:column;gap:var(--space-3);max-width:1600px;margin:0 auto;padding:var(--space-3) var(--space-4) 0}.recognition-panel{border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--bg-elevated),var(--bg-elevated-2));padding:var(--space-5)}.recognition-panel--active{border-color:color-mix(in srgb,var(--accent) 60%,var(--border));box-shadow:0 0 0 1px var(--accent-dim)}.recognition-panel__topline,.section-heading,.library-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.recognition-panel h1{font-size:var(--text-2xl);margin:.15rem 0 0}.recognition-panel__status{margin:.2rem 0 0;color:var(--text-dim)}.recognition-panel__experimental{margin:var(--space-3) 0 0;padding:.5rem .7rem;border:1px solid color-mix(in srgb,var(--extra) 40%,var(--border));border-radius:var(--radius-sm);background:color-mix(in srgb,var(--extra) 9%,var(--bg-elevated));color:var(--text-dim);font-size:var(--text-xs);line-height:1.4}.section-heading__eyebrow{color:var(--text-faint);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em}.section-heading h2,.library-toolbar h2{margin:.15rem 0 0;font-size:var(--text-lg)}.section-heading__count{color:var(--text-faint);font-size:var(--text-xs)}.recognition-panel__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2)}.btn--listen{min-width:7rem;font-size:var(--text-lg)}.record-dot{display:inline-block;width:.55rem;height:.55rem;margin-right:.15rem;border-radius:var(--radius-full);background:currentColor}.recognition-panel--active .record-dot{animation:recognition-pulse 1.2s ease-in-out infinite}@keyframes recognition-pulse{50%{opacity:.35;transform:scale(.75)}}.recognition-meter-row{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-4);color:var(--text-faint);font-size:var(--text-xs)}.recognition-meter{flex:1;height:.45rem;overflow:hidden;border-radius:var(--radius-full);background:var(--bg-elevated-3)}.recognition-meter span{display:block;height:100%;border-radius:inherit;background:var(--correct);transition:width .08s linear}.recognition-time{min-width:2.5rem;text-align:right;font-variant-numeric:tabular-nums}.recognition-error{display:flex;flex-direction:column;gap:.15rem;margin-top:var(--space-4);padding:.65rem .8rem;border:1px solid color-mix(in srgb,var(--wrong) 45%,var(--border));border-radius:var(--radius-sm);background:color-mix(in srgb,var(--wrong) 10%,var(--bg-elevated));color:var(--wrong);font-size:var(--text-sm)}.recognition-error span{color:var(--text-dim)}.recognition-events{display:flex;align-items:center;gap:.4rem;min-height:2.4rem;margin-top:var(--space-4);padding:.35rem;overflow-x:auto;border-top:1px solid var(--border-subtle)}.recognition-events__empty{color:var(--text-faint);font-size:var(--text-sm)}.recognition-event{display:inline-flex;flex-direction:column;align-items:center;min-width:3.2rem;padding:.3rem .45rem;border-radius:var(--radius-sm);background:var(--accent-dim);color:var(--text)}.recognition-event small{color:var(--text-faint);font-size:.65rem}.practice-empty{display:flex;flex-direction:column;gap:var(--space-5)}.import-row{max-width:25rem}.import-zone--compact{padding:1.2rem 1rem}.song-library{margin-top:var(--space-5)}.song-library--compact{margin-top:0}.library-empty{margin-top:var(--space-3);padding:var(--space-4);border:1px dashed var(--border);border-radius:var(--radius-sm);color:var(--text-faint);font-size:var(--text-sm)}.song-list{display:flex;flex-direction:column;gap:.45rem;margin-top:var(--space-3)}.song-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:.7rem .85rem;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg-elevated)}.song-row--current{border-color:color-mix(in srgb,var(--accent) 50%,var(--border))}.song-row__main{display:flex;min-width:0;flex-direction:column;gap:.15rem}.song-row__main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-row__main span{color:var(--text-faint);font-size:var(--text-xs)}.song-row__actions{display:flex;flex-shrink:0;gap:.35rem}.btn--danger-quiet{color:var(--wrong)}.library-toolbar{margin-top:var(--space-5)}.practice-result{padding:var(--space-4);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border-subtle));border-radius:var(--radius);background:var(--bg-elevated)}.practice-result .score-row{margin:var(--space-4) 0}.practice-result__note{margin:var(--space-3) 0 0;font-size:var(--text-sm)}.practice-note-focus{display:flex;align-items:baseline;gap:var(--space-3);padding:.75rem .15rem;border-bottom:1px solid var(--border-subtle)}.practice-note-focus strong{color:var(--accent);font-size:var(--text-lg)}.practice-note-focus>span:last-child{color:var(--text-faint);font-size:var(--text-xs)}.practice-settings{border-bottom:1px solid var(--border-subtle);color:var(--text-dim);font-size:var(--text-sm)}.practice-settings summary{padding:.55rem .15rem;cursor:pointer}.practice-settings summary span{margin-left:.4rem;color:var(--text)}.practice-settings__body{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;padding:0 .15rem .65rem}.practice-settings__help{color:var(--text-faint);font-size:var(--text-xs)}.tempo-control{display:inline-flex;align-items:center;gap:.3rem;margin-left:auto}.advanced-settings{flex-basis:100%;border-top:1px solid var(--border-subtle);padding-top:.45rem}.advanced-settings summary{cursor:pointer;color:var(--text-faint)}.advanced-settings__body{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-3);padding-top:var(--space-3)}.advanced-settings__body .panel{padding:.6rem}.practice-header{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}.practice-header__title{font-size:var(--text-xl);font-weight:650;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22rem}.practice-header__center{margin:0 auto}.practice-header__transport{display:flex;align-items:center;gap:var(--space-2)}.mode-tabs{display:inline-flex;gap:.15rem;background:var(--bg-elevated-2);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:.2rem}.mode-tabs button{border:none;background:transparent;color:var(--text-dim);padding:0 .85rem;height:1.8rem;border-radius:calc(var(--radius-sm) - 2px);cursor:pointer;font-size:var(--text-sm);font-weight:600}.mode-tabs button:hover:not(:disabled):not([aria-pressed=true]){color:var(--text)}.mode-tabs button[aria-pressed=true]{background:var(--accent);color:var(--accent-contrast)}.mode-tabs button:disabled{opacity:.5;cursor:not-allowed}.transport{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.transport__group{display:inline-flex;align-items:center;gap:.15rem;padding:.2rem;background:var(--bg-elevated-2);border:1px solid var(--border-subtle);border-radius:var(--radius-sm)}.stepper{display:inline-flex;align-items:center;gap:.2rem;font-size:var(--text-xs);color:var(--text-dim);padding-left:.5rem}.stepper__value{min-width:2.6rem;text-align:center;font-variant-numeric:tabular-nums;color:var(--text)}.transport__time{font-variant-numeric:tabular-nums;color:var(--text-dim);font-size:var(--text-xs);white-space:nowrap}.practice-subrow{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;padding:.35rem .15rem;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);color:var(--text-dim);font-size:var(--text-sm)}.practice-subrow__seek{flex:1;min-width:140px;accent-color:var(--accent)}.practice-subrow__spacer{flex:1}.practice-subrow__attempt{margin-left:auto;display:inline-flex;gap:var(--space-2);align-items:center}.wait-banner{background:var(--accent-dim);border:1px solid color-mix(in srgb,var(--accent) 55%,var(--border));color:var(--text);padding:.5rem .75rem;border-radius:var(--radius-sm);font-size:var(--text-sm)}.count-in-banner{color:var(--accent);font-weight:600;font-size:var(--text-sm)}.practice-body{min-width:0;display:flex}.practice-body .piano-roll{flex:1;min-width:0}.status-strip{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg-elevated)}.status-strip__bar{display:flex;align-items:center;gap:var(--space-4);padding:.4rem .65rem;width:100%;background:transparent;border:none;color:var(--text-dim);font-size:var(--text-sm);cursor:pointer}.status-strip__group{display:inline-flex;align-items:center;gap:.4rem}.status-strip__group--push{margin-left:auto}.status-strip__dot{width:.5rem;height:.5rem;border-radius:var(--radius-full);background:var(--text-faint)}.status-strip__dot--ok{background:var(--correct)}.status-strip__dot--error{background:var(--wrong)}.status-strip__chevron{transition:transform .15s ease;color:var(--text-faint)}.status-strip__chevron--open{transform:rotate(180deg)}.status-strip__body{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-4);padding:var(--space-4);border-top:1px solid var(--border-subtle)}.status-strip__body .panel{border:none;padding:0;background:transparent}.fb-dots{display:inline-flex;gap:.2rem}.fb-dot{width:.5rem;height:.5rem;border-radius:var(--radius-full);background:var(--bg-elevated-3)}.fb-dot--correct{background:var(--correct)}.fb-dot--wrong-note{background:var(--wrong)}.fb-dot--missed{background:var(--missed)}.fb-dot--extra{background:var(--extra)}.keyboard-dock{position:sticky;bottom:0;background:var(--bg);padding-bottom:var(--space-3);padding-top:var(--space-2)}.keyboard-dock__meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:.35rem;font-size:var(--text-xs);color:var(--text-faint)}.keyboard-dock__hint{color:var(--text-faint)}.transport__row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.transport__seek{flex:1;min-width:160px;accent-color:var(--accent)}.piano-roll{position:relative;border:1px solid var(--border-subtle);border-radius:var(--radius);overflow:hidden;background:var(--bg-elevated);display:flex;flex-direction:column;align-self:flex-start;width:100%}.piano-roll__scroll{overflow-x:auto;overflow-y:hidden}.piano-roll__stage{display:flex;flex:1;min-height:0}.piano-roll__gutter{flex-shrink:0}.piano-roll canvas{display:block}.piano-roll__toolbar{display:flex;align-items:center;justify-content:flex-end;gap:.4rem;padding:.35rem .45rem;border-bottom:1px solid var(--border-subtle)}.piano-roll__legend{display:flex;gap:.75rem;margin-right:auto;font-size:var(--text-xs);color:var(--text-dim)}.piano-roll__tooltip{position:absolute;pointer-events:none;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.4rem .55rem;font-size:var(--text-xs);color:var(--text);white-space:nowrap;z-index:5;box-shadow:0 4px 14px #00000047}.piano-keyboard-wrap{position:relative}.piano-keyboard{position:relative;width:100%;overflow-x:auto;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg-elevated-2);scrollbar-width:thin}.piano-keyboard__scroll{position:absolute;top:0;bottom:0;width:2rem;display:flex;align-items:center;justify-content:center;border:none;color:var(--text);font-size:1.2rem;cursor:pointer;z-index:2;background:color-mix(in srgb,var(--bg) 72%,transparent)}.piano-keyboard__scroll:hover{background:color-mix(in srgb,var(--bg) 88%,transparent)}.piano-keyboard__scroll--prev{left:0;border-radius:var(--radius-sm) 0 0 var(--radius-sm)}.piano-keyboard__scroll--next{right:0;border-radius:0 var(--radius-sm) var(--radius-sm) 0}.piano-keyboard svg{display:block}.piano-key{cursor:pointer;transition:fill .05s ease}.piano-key--white{fill:var(--key-white);stroke:var(--bg);stroke-width:1}.piano-key--black{fill:var(--key-black);stroke:var(--bg);stroke-width:1}.piano-key--held{fill:var(--accent)}.piano-key--reference-active{fill:color-mix(in srgb,var(--correct) 55%,var(--key-white))}.piano-key__label{fill:var(--text-faint);font-size:9px;font-family:var(--font-sans);pointer-events:none;user-select:none}.live-feedback{display:flex;flex-direction:column;gap:.35rem;max-height:220px;overflow-y:auto}.live-feedback__item{display:flex;justify-content:space-between;gap:.5rem;padding:.35rem .5rem;border-radius:var(--radius-sm);background:var(--bg-elevated-2);font-size:.82rem}.result-dot{display:inline-block;width:.55rem;height:.55rem;border-radius:var(--radius-full);margin-right:.4rem}.result-dot--correct{background:var(--correct)}.result-dot--wrong-note{background:var(--wrong)}.result-dot--missed{background:var(--missed)}.result-dot--extra{background:var(--extra)}.results-page{max-width:1120px;margin:0 auto;padding:var(--space-5) var(--space-4) var(--space-6)}.results-head{display:flex;align-items:center;gap:var(--space-4);padding-bottom:var(--space-4);border-bottom:1px solid var(--border-subtle)}.results-head__icon{display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;border-radius:var(--radius);background:var(--bg-elevated-2);border:1px solid var(--border-subtle);color:var(--text-dim);flex-shrink:0}.results-head__title{font-size:var(--text-2xl);margin:0}.results-head__score{margin:.15rem 0 0;font-size:var(--text-lg);font-weight:600;color:var(--text-dim)}.results-head__score b{color:var(--accent);font-size:var(--text-xl);margin-left:.3rem}.score-row{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-3);margin:var(--space-5) 0}.score-cell{padding:.75rem .5rem .9rem;border-radius:var(--radius-sm);background:var(--bg-elevated);border:1px solid var(--border-subtle);text-align:center}.score-cell--overall{background:var(--accent-dim);border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}.score-cell__label{font-size:var(--text-xs);color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em}.score-cell__value{font-size:var(--text-xl);font-weight:700;font-variant-numeric:tabular-nums;margin-top:.15rem}.score-cell__bar{height:3px;margin:.55rem .25rem 0;border-radius:var(--radius-full);background:var(--bg-elevated-3);overflow:hidden}.score-cell__bar-fill{display:block;height:100%;border-radius:inherit;background:var(--accent)}.score-cell__bar-fill--good{background:var(--correct)}.score-cell__bar-fill--mid{background:var(--missed)}.score-cell__bar-fill--low{background:var(--wrong)}@media (max-width: 720px){.score-row{grid-template-columns:repeat(3,1fr)}}.legend{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);overflow:hidden}.legend__row{display:flex;align-items:center;gap:var(--space-3);padding:.6rem .85rem;font-size:var(--text-sm)}.legend__row+.legend__row{border-top:1px solid var(--border-subtle)}.legend__name{font-weight:600;color:var(--text);min-width:6.5rem}.legend__desc{color:var(--text-dim)}.legend__count{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--text-dim)}.results-page>h2{margin-top:var(--space-6)}.results-page>.piano-roll{margin-top:var(--space-3)}.results-page>.panel{margin-top:var(--space-4)}.results-actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-5)}.score-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}.score-tile{background:var(--bg-elevated-2);border-radius:var(--radius-sm);padding:.65rem .5rem;text-align:center}.score-tile__value{font-size:var(--text-xl);font-weight:700;font-variant-numeric:tabular-nums}.score-tile__label{font-size:.72rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em}.score-tile--overall{grid-column:1 / -1;background:var(--accent-dim)}.score-tile--overall .score-tile__value{font-size:var(--text-2xl);color:var(--text)}.count-row{display:flex;justify-content:space-between;gap:.5rem;font-size:var(--text-sm);color:var(--text-dim);margin-top:.75rem;flex-wrap:wrap}.result-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}.result-table th,.result-table td{text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--border-subtle)}.result-table th{color:var(--text-faint);font-weight:600;font-size:var(--text-xs);text-transform:uppercase}.result-table tbody tr:hover{background:var(--bg-elevated-2)}.debug-panel{position:fixed;bottom:.75rem;right:.75rem;width:340px;max-height:60vh;overflow-y:auto;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text);z-index:50;box-shadow:0 8px 30px #00000059}.debug-panel dt{color:var(--text-faint);margin-top:.4rem}.debug-panel dd{margin:0 0 .15rem;word-break:break-word}.capability-list{display:flex;flex-direction:column;gap:.5rem}.capability-row{display:flex;justify-content:space-between;padding:.5rem .65rem;background:var(--bg-elevated-2);border-radius:var(--radius-sm);font-size:var(--text-sm)}.level-meter{width:100%;height:.5rem;background:var(--bg-elevated-2);border-radius:var(--radius-full);overflow:hidden;margin:.5rem 0 1rem}.level-meter__fill{height:100%;background:var(--accent);transition:width .05s linear}.confidence-bar{position:relative;display:inline-flex;align-items:center;width:6rem;height:1rem;background:var(--bg-elevated-2);border-radius:var(--radius-full);overflow:hidden}.confidence-bar__fill{position:absolute;inset:0 auto 0 0;height:100%;background:var(--correct)}.confidence-bar__label{position:relative;margin:0 auto;font-size:var(--text-xs);color:var(--text);mix-blend-mode:difference}.lab-recognizer-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:1rem}.lab-recognizer{background:var(--bg-elevated-2);border-radius:var(--radius-sm);padding:.75rem}.lab-latency{font-size:var(--text-sm);color:var(--text-dim);margin:.4rem 0}@media (max-width: 900px){.app-nav{grid-template-columns:1fr auto;height:auto;padding:.5rem var(--space-3);gap:var(--space-2)}.practice-header__center{order:3;margin:0;width:100%}.practice-header__title{max-width:none}}@media (max-width: 640px){.recognition-panel{padding:var(--space-4)}.recognition-panel__topline,.song-row{align-items:flex-start;flex-direction:column}.recognition-panel__actions,.song-row__actions{justify-content:flex-start}.song-row__actions{width:100%}.song-row__actions .btn{flex:1}.tempo-control{margin-left:0}}