@font-face{font-family:Bebas Neue;font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/BebasNeue-Regular-CoNGBGqG.woff2)format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/Inter-Latin-8kRkwJBP.woff2)format("woff2")}:root{--ok-ink:#111;--ok-white:#fff;--ok-soft-cloud:#f5f5f5;--ok-charcoal:#39393b;--ok-ash:#4b4b4d;--ok-mute:#707072;--ok-stone:#9e9ea0;--ok-hairline:#cacacb;--ok-hairline-soft:#e5e5e5;--ok-red:#d30005;--ok-red-deep:#780700;--ok-green:#007d48;--ok-green-bright:#1eaa52;--ok-blue:#1151ff;--ok-blue-deep:#0034e3;--ok-accent-pink:#ed1aa0;--ok-accent-pink-soft:#ffb0dd;--ok-accent-purple-soft:#beaffd;--ok-accent-purple-pale:#d6d1ff;--ok-accent-teal:#0a7281;--ok-accent-pink-deep:#4c012d;--color-primary:var(--ok-ink);--color-on-primary:var(--ok-white);--surface-canvas:var(--ok-white);--surface-soft:var(--ok-soft-cloud);--surface-inverse:var(--ok-ink);--text-primary:var(--ok-ink);--text-body:var(--ok-ink);--text-soft:var(--ok-charcoal);--text-secondary:var(--ok-mute);--text-tertiary:var(--ok-stone);--text-disabled:var(--ok-ash);--text-inverse:var(--ok-white);--text-inverse-secondary:var(--ok-stone);--border-hairline:var(--ok-hairline);--border-hairline-soft:var(--ok-hairline-soft);--border-strong:var(--ok-ink);--feedback-error:var(--ok-red);--feedback-error-pressed:var(--ok-red-deep);--feedback-success:var(--ok-green);--feedback-success-inverse:var(--ok-green-bright);--feedback-info:var(--ok-blue);--feedback-info-pressed:var(--ok-blue-deep);--font-display:"Bebas Neue","Anton","Oswald","Arial Narrow",sans-serif;--font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--weight-regular:400;--weight-medium:500;--type-display-size:96px;--type-display-lh:.9;--type-display-size-tablet:64px;--type-display-size-mobile:48px;--type-heading-xl-size:32px;--type-heading-xl-lh:1.2;--type-heading-lg-size:24px;--type-heading-lg-lh:1.2;--type-heading-md-size:16px;--type-heading-md-lh:1.75;--type-body-size:16px;--type-body-lh:1.5;--type-button-lg-size:24px;--type-button-lg-lh:1.2;--type-button-md-size:16px;--type-button-md-lh:1.5;--type-button-sm-size:14px;--type-button-sm-lh:1.5;--type-link-size:16px;--type-link-lh:1.75;--type-caption-md-size:14px;--type-caption-md-lh:1.5;--type-caption-sm-size:12px;--type-caption-sm-lh:1.5;--type-utility-size:9px;--type-utility-lh:1.75;--space-xxs:2px;--space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:18px;--space-xl:24px;--space-xxl:30px;--space-section:48px;--space-section-tablet:32px;--space-section-mobile:24px;--container-max:1440px;--gutter-desktop:48px;--gutter-ultrawide:80px;--sidebar-filter:220px;--nav-utility-h:36px;--nav-primary-h:56px;--control-h:48px;--control-h-sm:40px;--icon-button:40px;--swatch-dot:12px;--radius-none:0px;--radius-sm:18px;--radius-md:24px;--radius-lg:30px;--radius-full:9999px;--radius-card:var(--radius-none);--radius-button:var(--radius-lg);--radius-input:var(--radius-md);--elevation-0:none;--elevation-hairline:1px solid var(--ok-hairline);--elevation-inset:inset 0 -1px 0 var(--ok-hairline-soft);--focus-halo:0 0 0 12px var(--ok-soft-cloud);--ease-standard:cubic-bezier(.4,0,.2,1);--duration-fast:.12s;--duration-base:.2s;--press-scale:.5;--press-opacity:.5;--bg:var(--surface-canvas);--bg-2:var(--surface-canvas);--bg-3:var(--surface-soft);--fg:var(--text-primary);--fg-2:var(--text-soft);--fg-3:var(--text-secondary);--line:var(--border-hairline);--line-soft:var(--border-hairline-soft);--accent:var(--color-primary);--accent-fg:var(--color-on-primary);--good:var(--feedback-success);--warn:var(--text-soft);--bad:var(--feedback-error);--target:var(--feedback-info);--unsure:var(--text-secondary);--hand-r:var(--ok-blue);--hand-l:var(--ok-accent-purple-soft);--key-white:var(--ok-white);--key-black:var(--ok-ink);--key-bed:var(--ok-ink);--mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--surface-canvas:var(--ok-ink);--surface-soft:var(--ok-charcoal);--surface-inverse:var(--ok-white);--color-primary:var(--ok-white);--color-on-primary:var(--ok-ink);--text-primary:var(--ok-white);--text-body:var(--ok-white);--text-soft:var(--ok-hairline-soft);--text-secondary:var(--ok-stone);--text-tertiary:var(--ok-mute);--border-hairline:var(--ok-ash);--border-hairline-soft:var(--ok-ash);--feedback-success:var(--ok-green-bright);--focus-halo:0 0 0 12px var(--ok-charcoal);--elevation-inset:inset 0 -1px 0 var(--ok-charcoal);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--surface-canvas:var(--ok-ink);--surface-soft:var(--ok-charcoal);--surface-inverse:var(--ok-white);--color-primary:var(--ok-white);--color-on-primary:var(--ok-ink);--text-primary:var(--ok-white);--text-body:var(--ok-white);--text-soft:var(--ok-hairline-soft);--text-secondary:var(--ok-stone);--text-tertiary:var(--ok-mute);--border-hairline:var(--ok-ash);--border-hairline-soft:var(--ok-ash);--feedback-success:var(--ok-green-bright);--focus-halo:0 0 0 12px var(--ok-charcoal);--elevation-inset:inset 0 -1px 0 var(--ok-charcoal);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}html{-webkit-text-size-adjust:100%}body{background:var(--surface-canvas);color:var(--text-body);font-family:var(--font-sans);font-size:var(--type-body-size);line-height:var(--type-body-lh);font-weight:var(--weight-regular);letter-spacing:0;-webkit-font-smoothing:antialiased;margin:0}button,input,select,textarea{font:inherit;color:inherit}b,strong,th{font-weight:var(--weight-medium)}a{color:var(--text-primary);text-underline-offset:3px;font-weight:var(--weight-medium);text-decoration:underline}h1,h2,h3{font-weight:var(--weight-medium);margin:0 0 var(--space-md)}h1{font-size:var(--type-heading-xl-size);line-height:var(--type-heading-xl-lh)}h2{font-size:var(--type-heading-lg-size);line-height:var(--type-heading-lg-lh)}h3{font-size:var(--type-heading-md-size);line-height:var(--type-heading-md-lh)}.display{font-family:var(--font-display);font-size:var(--type-display-size);line-height:var(--type-display-lh);font-weight:var(--weight-medium);text-transform:uppercase;margin:0 0 var(--space-xl)}@media (max-width:1023px){.display{font-size:var(--type-display-size-tablet)}}@media (max-width:599px){.display{font-size:var(--type-display-size-mobile)}}:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}.icon{flex-shrink:0;display:block}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.app{grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);height:100%;display:grid}.nav{z-index:50;height:var(--nav-primary-h);background:var(--surface-canvas);box-shadow:var(--elevation-inset);align-items:stretch;gap:var(--space-xl);padding:0 var(--gutter-desktop);display:flex;position:sticky;top:0}.brand{font-size:20px;line-height:1;font-weight:var(--weight-medium);letter-spacing:-.01em;white-space:nowrap;align-items:center;display:flex}.nav-links{align-items:stretch;gap:var(--space-xl);scrollbar-width:none;flex:1;justify-content:center;min-width:0;display:flex;overflow-x:auto}.nav-links button{cursor:pointer;color:var(--text-primary);font-weight:var(--weight-medium);white-space:nowrap;background:0 0;border:0;align-items:center;padding:0;display:flex}.nav-links button[aria-current=page]{box-shadow:inset 0 -2px 0 var(--text-primary)}.nav-end{align-items:center;gap:var(--space-sm);display:flex}.app.immersive{grid-template-rows:minmax(0,1fr)}.app.immersive .nav{transition:transform var(--duration-base) var(--ease-standard);position:fixed;left:0;right:0;transform:translateY(-100%)}.app.immersive.nav-open .nav{transform:none}.app.immersive .nav:has(:focus-visible){transform:none}.main{min-width:0;min-height:0;position:relative;overflow:auto}.page{max-width:var(--container-max);padding:var(--space-section) var(--gutter-desktop);margin:0 auto}@media (min-width:1920px){.nav,.page{padding-left:var(--gutter-ultrawide);padding-right:var(--gutter-ultrawide)}}@media (max-width:1023px){.nav{padding:0 var(--space-xl)}.nav-links{justify-content:flex-start}.page{padding:var(--space-section-tablet) var(--space-xl)}}@media (max-width:599px){.nav{gap:var(--space-lg);padding:0 var(--space-lg)}.nav-end{display:none}.page{padding:var(--space-section-mobile) var(--space-lg)}}.btn,.icon-btn,.seg button{transition:transform var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard)}.btn:active:not(:disabled),.icon-btn:active:not(:disabled),.seg button:active{transform:scale(var(--press-scale));opacity:var(--press-opacity)}.btn{justify-content:center;align-items:center;gap:var(--space-sm);background:var(--surface-soft);color:var(--text-primary);padding:var(--space-sm) var(--space-xl);border-radius:var(--radius-button);cursor:pointer;font-weight:var(--weight-medium);font-size:var(--type-button-md-size);line-height:var(--type-button-md-lh);min-height:var(--control-h-sm);white-space:nowrap;border:0;display:inline-flex}.btn:disabled{background:var(--border-hairline-soft);color:var(--text-tertiary);cursor:not-allowed}.btn.primary{background:var(--color-primary);color:var(--color-on-primary)}.btn.primary:disabled{background:var(--border-hairline-soft);color:var(--text-tertiary)}.btn.big{min-height:var(--control-h);padding:var(--space-md) 32px}.btn.ghost{background:0 0}.btn.small{min-height:32px;padding:var(--space-xs) var(--space-md);font-size:var(--type-button-sm-size);line-height:var(--type-button-sm-lh)}.btn.active{background:var(--color-primary);color:var(--color-on-primary)}.icon-btn{width:var(--icon-button);height:var(--icon-button);border-radius:var(--radius-full);color:var(--text-primary);cursor:pointer;background:0 0;border:0;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.icon-btn.soft{background:var(--surface-soft)}.seg{gap:var(--space-sm);flex-wrap:wrap;display:inline-flex}.seg button{min-height:var(--control-h-sm);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-button);border:1px solid var(--border-hairline);background:var(--surface-canvas);color:var(--text-primary);font-weight:var(--weight-medium);white-space:nowrap;cursor:pointer;align-items:center;gap:6px;display:inline-flex}.seg button[aria-pressed=true]{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary)}.row{gap:var(--space-md);flex-wrap:wrap;align-items:center;display:flex}.col{gap:var(--space-md);flex-direction:column;display:flex}.grow{flex:1}.card{background:var(--surface-soft);border-radius:var(--radius-card);padding:var(--space-xl);border:0}.card h2,.card h3{margin-top:0}.card .btn:not(.primary):not(.ghost):not(.active):not(:disabled),.card .seg button:not([aria-pressed=true]),.card input[type=text],.card input[type=number],.card input[type=search],.card select,.card textarea,.card .icon-btn.soft{background:var(--surface-canvas)}.grid{gap:var(--space-sm);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}.muted{color:var(--text-secondary)}.small{font-size:var(--type-caption-md-size);line-height:var(--type-caption-md-lh)}.pill{align-items:center;gap:var(--space-xs);font-size:var(--type-caption-sm-size);line-height:var(--type-caption-sm-lh);font-weight:var(--weight-medium);padding:var(--space-xxs) var(--space-md);border-radius:var(--radius-button);border:1px solid var(--border-hairline);background:var(--surface-canvas);color:var(--text-primary);white-space:nowrap;display:inline-flex}.pill.good,.pill.warn,.pill.bad{font-size:var(--type-caption-md-size);background:0 0;border:0;padding:0}.pill.good{color:var(--good)}.pill.warn{color:var(--text-soft)}.pill.bad{color:var(--bad)}label.field{gap:var(--space-xs);font-weight:var(--weight-medium);font-size:var(--type-caption-md-size);flex-direction:column;display:flex}label.field>span.hint{font-weight:var(--weight-regular);color:var(--text-secondary);font-size:var(--type-caption-sm-size)}input[type=text],input[type=number],input[type=search],select,textarea{background:var(--surface-soft);border-radius:var(--radius-input);min-height:var(--control-h-sm);font-weight:var(--weight-regular);font-size:var(--type-body-size);transition:box-shadow var(--duration-base) var(--ease-standard);border:2px solid #0000;padding:6px 14px}textarea{border-radius:var(--radius-none)}input[type=text]:focus,input[type=number]:focus,input[type=search]:focus,select:focus,textarea:focus{border-color:var(--text-primary);background:var(--surface-canvas);box-shadow:var(--focus-halo);outline:0}input[type=range],.check input{accent-color:var(--color-primary)}.check{gap:var(--space-sm);cursor:pointer;align-items:center;display:flex}.check input{width:18px;height:18px}.notice{border-radius:var(--radius-none);padding:var(--space-md) var(--space-lg);background:var(--surface-soft);border-left:2px solid var(--text-primary)}.notice.info{border-left-color:var(--target)}.notice.warn{border-left-color:var(--text-primary)}.notice.bad{border-left-color:var(--bad)}.notice.good{border-left-color:var(--good)}.progress{background:var(--border-hairline-soft);height:4px;overflow:hidden}.progress>div{background:var(--color-primary);height:100%;transition:width var(--duration-base) var(--ease-standard)}.toasts{right:var(--space-lg);bottom:var(--space-lg);gap:var(--space-sm);z-index:100;flex-direction:column;max-width:min(420px,100vw - 36px);display:flex;position:fixed}.toast{background:var(--surface-inverse);color:var(--color-on-primary);padding:var(--space-md) var(--space-lg);gap:var(--space-md);align-items:center;display:flex}.toast button{color:inherit;cursor:pointer;background:0 0;border:0;padding:0}.keyboard{-webkit-user-select:none;user-select:none;touch-action:none;background:var(--key-bed);width:100%;position:relative}.keyboard .keys{height:100%;position:relative}.key{font-size:var(--type-caption-sm-size);font-weight:var(--weight-medium);transform-origin:top;transition:background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);justify-content:center;align-items:flex-end;padding-bottom:10px;display:flex;position:absolute;top:0}.key.white{background:var(--key-white);box-shadow:0 0 0 .5px var(--key-bed);color:var(--ok-mute);z-index:1;height:100%}.key.black{background:var(--key-black);box-shadow:0 0 0 1px var(--key-bed);color:var(--ok-stone);z-index:2;height:62%}.key .klabel{pointer-events:none;flex-direction:column;align-items:center;line-height:1.2;display:flex}.key .kbd{font-family:var(--mono);opacity:.7;font-size:9px}.key.up-R{background:var(--hand-r);color:var(--ok-white)}.key.up-L{background:var(--hand-l);color:var(--ok-ink)}.key.down,.key.hit,.key.wrong{transition-duration:var(--duration-fast);transform:scaleY(.98)}.key.white.down{background:var(--ok-stone);color:var(--ok-ink)}.key.black.down{background:var(--ok-mute);color:var(--ok-white)}.key.hit{background:var(--ok-green);color:var(--ok-white)}.key.wrong{background:var(--ok-red);color:var(--ok-white)}.key.play-R,.key.play-L{transition-duration:var(--duration-fast);transform:scaleY(.98)}.key.play-R{background:var(--hand-r);color:var(--ok-white)}.key.play-L{background:var(--hand-l);color:var(--ok-ink)}.key.middle-c:after{content:"";border-radius:var(--radius-full);background:var(--ok-stone);width:6px;height:6px;position:absolute;top:8px}.practice{grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);height:100%;min-height:0;display:grid}.toolbar{gap:var(--space-md);padding:var(--space-sm) var(--space-xl);box-shadow:var(--elevation-inset);background:var(--surface-canvas);scrollbar-width:none;flex-wrap:nowrap;align-items:center;display:flex;overflow-x:auto}.toolbar>*{flex:none}.toolbar>.grow{flex:1}.toolbar .btn.start{min-height:32px;padding:var(--space-xs) var(--space-lg) var(--space-xs) var(--space-md)}.toolbar .group{padding:var(--space-xxs);border-radius:var(--radius-button);background:var(--surface-soft);flex-wrap:nowrap;align-items:center;gap:0;display:inline-flex}.toolbar .group button{min-height:28px;padding:0 var(--space-md);border-radius:var(--radius-button);color:var(--text-primary);font-size:var(--type-button-sm-size);line-height:var(--type-button-sm-lh);background:0 0;border:0}.toolbar .group button[aria-pressed=true]{background:var(--color-primary);color:var(--color-on-primary)}.toolbar .group button:disabled{color:var(--text-tertiary);cursor:not-allowed}.toolbar .group button[aria-pressed=true]:disabled{background:var(--text-tertiary);color:var(--color-on-primary)}.toolbar .tempo{gap:var(--space-sm);padding-left:var(--space-md)}.toolbar .tempo label{align-items:center;gap:var(--space-sm);display:inline-flex}.toolbar .tempo input[type=range]{width:96px;margin:0}.toolbar .tempo-value{min-width:4ch;font-size:var(--type-button-sm-size);font-weight:var(--weight-medium);font-variant-numeric:tabular-nums;text-align:right}.toolbar .tempo .metronome{justify-content:center;align-items:center;width:28px;padding:0;display:inline-flex}.toolbar .tempo .source-switch{padding:var(--space-xxs);border-radius:var(--radius-button);background:var(--surface-soft);flex:none;align-items:center;display:inline-flex}.source-switch button{border-radius:var(--radius-full);width:28px;height:28px;color:var(--text-secondary);cursor:pointer;transition:transform var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard);background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.source-switch button[aria-checked=true]{background:var(--color-primary);color:var(--color-on-primary)}.source-switch button:active:not(:disabled){transform:scale(var(--press-scale));opacity:var(--press-opacity)}.source-switch button:disabled{cursor:not-allowed}.source-switch button:disabled:not([aria-checked=true]){color:var(--text-tertiary)}.pulse-dot{margin-right:var(--space-sm)}.toolbar .icon-btn{width:32px;height:32px}.toolbar .nav-handle{display:none}.app.immersive .toolbar .nav-handle{display:inline-flex}@media (hover:hover) and (pointer:fine){.app.immersive .toolbar .nav-handle{display:none}}@media (hover:none){.toolbar .shortcuts{display:none}}.stage{flex-direction:column;min-height:0;display:flex;position:relative;overflow:hidden}@media (max-width:1279px){.toolbar{padding:var(--space-sm) var(--space-lg);gap:var(--space-sm)}.toolbar .group button{padding:0 10px}.toolbar .tempo input[type=range]{width:72px}}@media (max-width:1100px){.toolbar{padding:var(--space-sm) var(--space-md);gap:6px}.toolbar .group button{padding:0 var(--space-sm)}.toolbar .tempo{padding-left:var(--space-sm)}.toolbar .tempo input[type=range]{width:60px}}@media (max-width:1000px){.toolbar{flex-wrap:wrap;row-gap:6px;overflow-x:visible}}.sheet-wrap{scrollbar-width:none;background:var(--ok-white);flex:50%;min-height:120px;position:relative;overflow:hidden auto}.sheet-wrap::-webkit-scrollbar{display:none}.sheet-wrap.dark-invert .osmd-host svg{filter:invert(.93)hue-rotate(180deg)}.sheet-wrap.dark-invert{background:var(--surface-canvas)}.falling-wrap{flex:50%;min-height:120px;position:relative}.falling-wrap canvas{width:100%;height:100%;position:absolute;inset:0}.bottom{border-top:1px solid var(--border-hairline);background:var(--surface-canvas);padding:var(--space-sm) var(--space-md) var(--space-md)}.meter{align-items:center;gap:var(--space-md);font-variant-numeric:tabular-nums;display:flex}.meter .bar{background:var(--border-hairline-soft);width:120px;height:4px;position:relative;overflow:hidden}.meter .bar>div{background:var(--good);height:100%}.meter .note{font-size:var(--type-heading-lg-size);line-height:var(--type-heading-lg-lh);font-weight:var(--weight-medium);min-width:3.2ch}.pulse-dot{width:var(--swatch-dot);height:var(--swatch-dot);border-radius:var(--radius-full);background:var(--border-hairline-soft);transition:background var(--duration-fast) var(--ease-standard)}.pulse-dot.on{background:var(--text-primary)}.pulse-dot.accent{background:var(--target)}.streak{align-items:center;gap:var(--space-xs);font-weight:var(--weight-medium);font-size:var(--type-heading-md-size);display:inline-flex}.feedback-line{font-size:var(--type-heading-md-size);font-weight:var(--weight-medium);white-space:nowrap;text-overflow:ellipsis;min-width:0;min-height:1.6em;overflow:hidden}.listen-options{display:inline-flex;position:relative}.listen-options .icon-btn{width:32px;height:32px;color:var(--text-secondary)}.listen-options .icon-btn[aria-expanded=true]{color:var(--text-primary)}.listen-menu{right:0;bottom:calc(100% + var(--space-lg));z-index:30;min-width:240px;padding:var(--space-sm);background:var(--surface-canvas);border:1px solid var(--border-hairline);flex-direction:column;display:flex;position:absolute}.listen-menu-title{padding:var(--space-xs) var(--space-md) var(--space-sm);font-size:var(--type-caption-sm-size);line-height:var(--type-caption-sm-lh);color:var(--text-secondary)}.listen-menu .switch{background:0 0;justify-content:space-between;width:100%}.switch{align-items:center;gap:var(--space-sm);min-height:32px;padding:var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);border-radius:var(--radius-button);background:var(--surface-soft);color:var(--text-primary);font-size:var(--type-button-sm-size);line-height:var(--type-button-sm-lh);font-weight:var(--weight-medium);white-space:nowrap;cursor:pointer;transition:transform var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard);border:0;display:inline-flex}.switch:disabled{color:var(--text-tertiary);cursor:not-allowed}.switch:disabled .switch-track{opacity:.5}.switch:active:not(:disabled){transform:scale(var(--press-scale));opacity:var(--press-opacity)}.switch-track{border-radius:var(--radius-full);background:var(--border-hairline);width:36px;height:22px;transition:background-color var(--duration-base) var(--ease-standard);flex:none;position:relative}.switch-knob{border-radius:var(--radius-full);background:var(--surface-canvas);width:16px;height:16px;transition:transform var(--duration-base) var(--ease-standard);position:absolute;top:3px;left:3px}.switch[aria-checked=true] .switch-track{background:var(--color-primary)}.switch[aria-checked=true] .switch-knob{transform:translate(14px)}.results{inset:var(--space-lg);z-index:20;background:var(--surface-canvas);max-width:760px;max-height:calc(100% - 36px);box-shadow:0 0 0 1px var(--border-hairline);margin:auto;position:absolute;overflow:auto}.stars{gap:var(--space-xxs);vertical-align:middle;display:inline-flex}.heatmap{flex-wrap:wrap;gap:1px;display:flex}.heatmap .cell{min-width:28px;height:28px;font-size:var(--type-caption-sm-size);font-weight:var(--weight-medium);padding:0 var(--space-xs);cursor:pointer;border:0;justify-content:center;align-items:center;display:flex}.table{border-collapse:collapse;width:100%}.table th,.table td{text-align:left;padding:var(--space-md) var(--space-sm);border-bottom:1px solid var(--border-hairline)}.table th{font-size:var(--type-caption-md-size);color:var(--text-secondary)}.verdict-icon{justify-content:center;width:1.2em;display:inline-flex}.dropzone{border:1px dashed var(--border-hairline);padding:var(--space-xl);text-align:center;color:var(--text-secondary)}.drag-overlay{background:var(--surface-soft);border:2px solid var(--text-primary);z-index:200;font-size:var(--type-heading-xl-size);font-weight:var(--weight-medium);pointer-events:none;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-back{background:color-mix(in srgb, var(--ok-ink) 40%, transparent);z-index:150;padding:var(--space-lg);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--surface-canvas);width:100%;max-width:720px;max-height:calc(100vh - 36px);padding:var(--space-xl);overflow:auto}.editor{gap:var(--space-xl);grid-template-columns:minmax(280px,1fr) minmax(320px,1.3fr);min-height:60vh;display:grid}.editor textarea{font-family:var(--mono);resize:vertical;width:100%;min-height:420px;font-size:15px;line-height:1.5}@media (max-width:900px){.editor{grid-template-columns:1fr}}.abc-paper{background:var(--ok-white);padding:var(--space-sm);color:var(--ok-ink);overflow-x:auto}.dev-panel{font-family:var(--mono);font-size:12px}.dev-panel canvas{background:var(--ok-ink);width:100%;display:block}.log{background:var(--surface-soft);max-height:260px;padding:var(--space-sm);white-space:pre;overflow:auto}.lesson-map{gap:var(--space-sm);flex-direction:column;display:flex}.lesson-node{align-items:center;gap:var(--space-lg);display:flex}.lesson-node .num{width:var(--control-h);height:var(--control-h);border-radius:var(--radius-full);font-weight:var(--weight-medium);background:var(--surface-canvas);flex:none;justify-content:center;align-items:center;display:flex}.lesson-node.done .num{background:var(--good);color:var(--ok-white)}.big-number{font-family:var(--font-display);font-size:64px;font-weight:var(--weight-medium);line-height:var(--type-display-lh)}.spark{width:100%;height:120px}kbd{font-family:var(--mono);border:1px solid var(--border-hairline);border-radius:var(--space-xs);background:var(--surface-canvas);padding:0 5px;font-size:.85em}.mini-staff{background:var(--ok-white);margin:0 auto;display:block}.abc-paper .abc-playing,.abc-paper .abc-playing path{fill:var(--ok-blue)}.skip-link{left:-9999px;top:var(--space-sm);z-index:300;background:var(--color-primary);color:var(--color-on-primary);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-button);position:absolute}.skip-link:focus{left:var(--space-sm)}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}@media (forced-colors:active){.key.down,.key.hit,.key.wrong,.key.up-R,.key.up-L,.key.play-R,.key.play-L{outline:3px solid highlight}.btn.primary,.nav-links button[aria-current=page]{border:2px solid buttontext}}@media (max-height:540px) and (orientation:landscape){.toolbar{padding:var(--space-xs) var(--space-sm);gap:6px}.btn.big{min-height:var(--control-h-sm);padding:6px var(--space-lg)}.bottom{padding:var(--space-xs) var(--space-sm) 6px}}