@font-face{font-family:Archivo;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/archivo-latin.woff2) format("woff2")}:root{--panel: #e3e1db;--panel-hi: #eeece7;--panel-lo: #d3d0c8;--panel-deep: #c3bfb6;--ink: #1c1c1a;--ink-2: #6b6862;--ink-3: #9c988f;--signal: #e39400;--go: #00734a;--stop: #b53a2b;--edge-hi: rgba(255, 255, 255, .78);--edge-lo: rgba(28, 28, 26, .11);--edge-in: rgba(28, 28, 26, .15);--hair: rgba(28, 28, 26, .13);--r-sm: 2px;--r: 3px;--r-lg: 5px;--r-full: 999px;--sans: "Archivo", "Helvetica Neue", Helvetica, system-ui, sans-serif;--t-display: 4.75rem;--t-xl: 2.125rem;--t-lg: 1.3125rem;--t-md: 1rem;--t-sm: .8125rem;--t-label: .625rem;--t-micro: .5625rem;--s1: .25rem;--s2: .5rem;--s3: .75rem;--s4: 1rem;--s5: 1.5rem;--s6: 2rem;--s7: 3rem;--acc-face: #1c1c1a;--acc-text: #eeece7;--grille-base: var(--panel-lo);--grille-dot: var(--panel-deep);--grille-pitch: 6px}@media(prefers-color-scheme:dark){:root{--panel: #2a2a27;--panel-hi: #343430;--panel-lo: #201f1e;--panel-deep: #171716;--ink: #e8e6e1;--ink-2: #a09c94;--ink-3: #6e6a64;--signal: #f0ae1f;--go: #3ea87a;--stop: #d4614e;--edge-hi: rgba(255, 255, 255, .07);--edge-lo: rgba(0, 0, 0, .4);--edge-in: rgba(0, 0, 0, .5);--hair: rgba(232, 230, 225, .12);--grille-base: #343430;--grille-dot: #101010;--acc-face: #121211;--acc-text: #e8e6e1}}:root[data-theme=light]{--panel: #e3e1db;--panel-hi: #eeece7;--panel-lo: #d3d0c8;--panel-deep: #c3bfb6;--ink: #1c1c1a;--ink-2: #6b6862;--ink-3: #9c988f;--signal: #e39400;--go: #00734a;--stop: #b53a2b;--edge-hi: rgba(255, 255, 255, .78);--edge-lo: rgba(28, 28, 26, .11);--edge-in: rgba(28, 28, 26, .15);--hair: rgba(28, 28, 26, .13);--grille-base: #d3d0c8;--grille-dot: #c3bfb6;--acc-face: #1c1c1a;--acc-text: #eeece7}:root[data-theme=dark]{--panel: #2a2a27;--panel-hi: #343430;--panel-lo: #201f1e;--panel-deep: #171716;--ink: #e8e6e1;--ink-2: #a09c94;--ink-3: #6e6a64;--signal: #f0ae1f;--go: #3ea87a;--stop: #d4614e;--edge-hi: rgba(255, 255, 255, .07);--edge-lo: rgba(0, 0, 0, .4);--edge-in: rgba(0, 0, 0, .5);--hair: rgba(232, 230, 225, .12);--grille-base: #343430;--grille-dot: #101010;--acc-face: #121211;--acc-text: #e8e6e1}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--sans);color:var(--ink);background:var(--panel);-webkit-font-smoothing:antialiased;font-synthesis:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.label{font-size:var(--t-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);line-height:1}.label.micro{font-size:var(--t-micro);letter-spacing:.18em}.label.on{color:var(--ink)}.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}.raised{background:var(--panel-hi);border-radius:var(--r);box-shadow:inset 0 1px 0 var(--edge-hi),0 1px 0 var(--edge-lo)}.well{background:var(--panel-lo);border-radius:var(--r);box-shadow:inset 0 1px 2px var(--edge-in),inset 0 -1px 0 var(--edge-hi)}.grille{background-color:var(--grille-base);background-image:radial-gradient(circle at center,var(--grille-dot) 0 1.15px,transparent 1.45px);background-size:var(--grille-pitch) var(--grille-pitch);box-shadow:inset 0 1px 2px var(--edge-in)}.rule{height:1px;background:var(--hair);border:0}.lamp{width:7px;height:7px;border-radius:var(--r-full);background:var(--panel-deep);box-shadow:inset 0 1px 1px var(--edge-in);flex:none}.lamp.on{background:var(--signal);box-shadow:0 0 7px color-mix(in oklab,var(--signal) 55%,transparent)}.lamp.go{background:var(--go);box-shadow:0 0 7px color-mix(in oklab,var(--go) 50%,transparent)}.key{position:relative;min-height:2.75rem;display:grid;place-items:center;gap:1px;background:var(--panel-hi);border-radius:var(--r);color:var(--ink);box-shadow:inset 0 1px 0 var(--edge-hi),0 1px 0 var(--edge-lo);transition:background .12s,box-shadow .12s,color .12s}.key:hover:not(:disabled){background:color-mix(in oklab,var(--panel-hi) 95%,var(--ink))}.key:active:not(:disabled),.key.pressed{background:var(--panel-lo);box-shadow:inset 0 1px 2px var(--edge-in)}.key:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--signal),inset 0 1px 0 var(--edge-hi)}.key .glyph{font-size:var(--t-md);font-weight:600;letter-spacing:.01em;line-height:1}.key .sub{font-size:var(--t-micro);letter-spacing:.06em;color:var(--ink-2);text-transform:uppercase}.key.dormant,.key.dormant .sub{color:var(--ink-3)}.key:disabled{cursor:default}.key.correct{background:var(--go);color:#f2f1ee;box-shadow:inset 0 1px #ffffff2e}.key.correct .sub{color:#f2f1eeb8}.key.wrong{background:var(--panel-lo);color:var(--stop);box-shadow:inset 0 1px 2px var(--edge-in)}.key.wrong .sub{color:color-mix(in oklab,var(--stop) 60%,var(--ink-3))}.key.off{background:transparent;box-shadow:none;color:var(--ink-3)}.key.off:hover:not(:disabled){background:color-mix(in oklab,var(--panel-hi) 55%,transparent);color:var(--ink-2)}.key.round{border-radius:var(--r-full);aspect-ratio:1 / 1}.piano{position:relative;isolation:isolate}.piano .naturals{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.piano .nat{min-height:5rem;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.5rem;border-radius:0 0 var(--r) var(--r)}.piano .accidentals{position:absolute;inset:0 0 auto 0;height:3.1rem;pointer-events:none}.piano .acc{pointer-events:auto;position:absolute;top:0;width:9%;height:100%;min-height:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.35rem;background:var(--acc-face);color:var(--acc-text);border-radius:0 0 var(--r) var(--r);box-shadow:0 1px 0 var(--edge-lo);z-index:2}.piano .acc:hover:not(:disabled){background:color-mix(in oklab,var(--acc-face) 86%,var(--panel))}.piano .acc:active:not(:disabled),.piano .acc.pressed{background:color-mix(in oklab,var(--acc-face) 74%,var(--panel));box-shadow:none}.piano .acc.correct{background:var(--go)}.piano .acc.wrong{background:color-mix(in oklab,var(--stop) 72%,var(--acc-face));color:#ffffffa8}.piano .acc.dormant{background:color-mix(in oklab,var(--acc-face) 52%,var(--panel));color:color-mix(in oklab,var(--acc-text) 55%,transparent)}.piano .acc .glyph{font-size:var(--t-sm)}.scale{position:relative;height:4.25rem;padding-bottom:1.25rem}.scale .track{position:absolute;top:0;right:0;bottom:1.25rem;left:0;overflow:hidden}.scale .tick{position:absolute;bottom:0;width:1px;background:color-mix(in oklab,var(--ink-3) 48%,transparent);transform:translate(-50%)}.scale .tick.major{height:46%;background:var(--ink-3)}.scale .tick.minor{height:24%}.scale .tick-label{position:absolute;bottom:0;transform:translate(-50%);white-space:nowrap}.scale .needle{position:absolute;top:14%;bottom:1.25rem;width:2px;background:var(--signal);transform:translate(-50%);transition:left .55s cubic-bezier(.22,1,.36,1),background .3s;z-index:3}.scale .needle .head{position:absolute;top:0;left:50%;transform:translate(-50%);width:10px;height:4px;border-radius:1px;background:inherit}.scale .needle.go{background:var(--go)}.scale .needle.ghost{background:var(--ink-3)}.scale .span{position:absolute;top:26%;height:3px;background:color-mix(in oklab,var(--signal) 34%,transparent);transition:left .55s cubic-bezier(.22,1,.36,1),right .55s cubic-bezier(.22,1,.36,1);z-index:2}.scale .span.go{background:color-mix(in oklab,var(--go) 30%,transparent)}.readout{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);padding:var(--s3) var(--s4)}.readout .note{font-size:var(--t-display);font-weight:500;letter-spacing:-.045em;line-height:.86}.readout .note .oct{font-size:.34em;font-weight:600;letter-spacing:0;vertical-align:baseline;position:relative;top:-.15em;color:var(--ink-2);margin-left:.06em}.readout .rows{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:.3rem .55rem;padding-bottom:.35rem}.readout .rows .v{font-size:var(--t-sm);font-weight:600;text-align:right;line-height:1}.readout.blank .note{color:var(--ink-3)}.meter{position:relative;height:2.75rem;overflow:hidden}.meter .band{position:absolute;top:0;bottom:0;left:25%;right:25%;background:color-mix(in oklab,var(--go) 16%,transparent)}.meter .detent{position:absolute;top:18%;bottom:18%;left:50%;width:1px;background:var(--ink-3);transform:translate(-50%)}.meter .grad{position:absolute;top:0;width:1px;height:22%;background:color-mix(in oklab,var(--ink-3) 48%,transparent);transform:translate(-50%)}.meter .ptr{position:absolute;top:8%;bottom:8%;width:2px;background:var(--signal);transform:translate(-50%);transition:left .09s linear,background .2s;z-index:2}.meter.in .ptr{background:var(--go)}.rocker{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:2px;gap:2px}.rocker button{min-height:2.5rem;padding:0 var(--s2);border-radius:var(--r-sm);color:var(--ink-2);font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:background .14s,color .14s,box-shadow .14s}.rocker button:hover{color:var(--ink)}.rocker button[aria-selected=true]{background:var(--panel-hi);color:var(--ink);box-shadow:inset 0 1px 0 var(--edge-hi),0 1px 0 var(--edge-lo)}.rocker button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--signal)}.etabs{display:flex;gap:var(--s5)}.etabs button{position:relative;min-height:2.75rem;font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);transition:color .14s}.etabs button:hover{color:var(--ink-2)}.etabs button[aria-selected=true]{color:var(--ink)}.etabs button[aria-selected=true]:after{content:"";position:absolute;left:0;right:0;bottom:.55rem;height:2px;background:var(--ink)}.etabs button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--signal);border-radius:var(--r-sm)}.bars{display:grid;gap:var(--s2)}.bar{display:grid;grid-template-columns:2.75rem 1fr 2.5rem;align-items:center;gap:var(--s3)}.bar .who{font-size:var(--t-sm);font-weight:600}.bar .track{display:block;height:6px;border-radius:var(--r-sm);overflow:hidden}.bar .fill{display:block;height:100%;border-radius:var(--r-sm);background:var(--ink)}.bar .fill.mastered{background:var(--go)}.bar .pct{font-size:var(--t-sm);color:var(--ink-2);text-align:right}.sheet{background:var(--panel);border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:0 -1px 0 var(--hair),0 -18px 44px #00000024}.sheet .handle{width:2.25rem;height:4px;border-radius:var(--r-full);background:var(--panel-deep);margin:var(--s2) auto 0}.textkey{min-height:2.75rem;padding:0 var(--s3);font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);border-radius:var(--r);transition:color .14s,background .14s}.textkey:hover{color:var(--stop);background:color-mix(in oklab,var(--stop) 8%,transparent)}.tile{padding:var(--s3);text-align:left}.tile .v{font-size:var(--t-xl);font-weight:500;letter-spacing:-.02em;line-height:1}.tile .label{margin-top:.3rem}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}html,body{height:100%}body{overflow:hidden;user-select:none;-webkit-user-select:none}.app{height:100dvh;max-width:30rem;margin:0 auto;display:flex;flex-direction:column;overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}.topbar{display:flex;align-items:center;gap:.5rem;padding:1.15rem 1.25rem .85rem;flex:none}.wordmark{font-size:var(--t-label);font-weight:700;letter-spacing:.34em;text-transform:uppercase;line-height:1;margin-right:auto}.ref{font-variant-numeric:tabular-nums}.iconkey{min-width:2.75rem;height:2.75rem;padding:0 .4rem;display:grid;place-items:center;border-radius:var(--r);color:var(--ink-2);font-size:var(--t-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;transition:background .14s,color .14s}.iconkey:hover{background:var(--panel-hi);color:var(--ink)}.iconkey:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--signal)}.streak{display:flex;align-items:center;gap:.35rem;font-variant-numeric:tabular-nums}.nav{padding:0 1.25rem;flex:none}.stage{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 1.25rem}.sessionline{padding:.95rem 0 .8rem;flex:none}.verdict{padding-top:.65rem;display:flex;align-items:center;gap:.4rem;flex:none}.verdict.won{color:var(--go)}.hint{font-size:var(--t-sm);line-height:1.5;color:var(--ink-2);max-width:17rem;padding-top:1rem}.anchor{padding-top:.5rem;color:var(--ink-3)}.controls{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:1.5rem}.grille-key{width:12rem;height:12rem;border-radius:var(--r-full);transition:transform .12s}.grille-key:active{transform:scale(.97)}.grille-key:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--signal),inset 0 1px 2px var(--edge-in)}.grille-key.sm{width:10rem;height:10rem}.grille-stack{display:grid;gap:.6rem;justify-items:center}.grille-stack .label{display:flex;align-items:center;gap:.4rem}.fnkey{width:4.25rem;height:2.75rem;flex:none}.ctl-slot{width:4.25rem;flex:none}.board{flex:none;padding:0 1.25rem calc(env(safe-area-inset-bottom) + 1.5rem)}.keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}.scale.tight{height:3.25rem;padding-bottom:0}.scale.tight .track{top:0;right:0;bottom:0;left:0}.scale.tight .needle{bottom:0}.meter-legend{display:flex;justify-content:space-between;padding-top:.35rem}.hold{padding-top:.9rem}.scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:color-mix(in oklab,var(--ink) 30%,transparent);display:flex;align-items:flex-end;justify-content:center;z-index:10;animation:kt-fade .18s}@keyframes kt-fade{0%{opacity:0}to{opacity:1}}.sheet{width:100%;max-width:30rem;max-height:86dvh;display:flex;flex-direction:column;animation:kt-rise .26s cubic-bezier(.22,1,.36,1)}@keyframes kt-rise{0%{transform:translateY(1.5rem);opacity:0}to{transform:translateY(0);opacity:1}}.sheet>header{display:flex;align-items:center;gap:.5rem;padding:1rem 1.25rem .5rem;flex:none}.sheet>header h2{font-size:var(--t-md);font-weight:600;letter-spacing:.01em;margin-right:auto}.sheet-body{overflow-y:auto;overscroll-behavior:contain;padding:1.25rem 1.25rem calc(env(safe-area-inset-bottom) + 1.5rem);display:grid;gap:1.4rem}.field>.label{padding-bottom:.5rem}.bank{display:grid;gap:.3rem;padding:.3rem}.bank.cols-6{grid-template-columns:repeat(6,1fr)}.bank.cols-4{grid-template-columns:repeat(4,1fr)}.bank .key{min-height:2.75rem}.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem}.sub-note{font-size:var(--t-sm);line-height:1.5;color:var(--ink-2)}.danger{display:flex;justify-content:center}.readout .note{animation:kt-settle .32s cubic-bezier(.22,1,.36,1)}@keyframes kt-settle{0%{opacity:0}to{opacity:1}}