:root{--primary:#171717;--on-primary:#fff;--ink:#171717;--body:#4d4d4d;--hairline:#ebebeb;--hairline-strong:#a1a1a1;--canvas:#fff;--canvas-soft:#fafafa;--canvas-soft-2:#f5f5f5;--link-deep:#0761d1;--error-deep:#c50000;--selection-bg:#171717;--selection-fg:#f2f2f2;--font-sans:Geist, Inter, system-ui, -apple-system, sans-serif;--font-mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;--text-display-xl:48px;--track-display-xl:-2.4px;--text-display-lg:32px;--track-display-lg:-1.28px;--text-display-md:24px;--track-display-md:-.96px;--text-display-sm:20px;--track-display-sm:-.6px;--text-body-md:16px;--text-body-sm:14px;--track-body-sm:-.28px;--text-caption:12px;--lh-display-sm:28px;--lh-body-md:24px;--lh-body-sm:20px;--lh-caption:16px;--rounded-xs:4px;--rounded-sm:6px;--rounded-lg:12px;--rounded-full:9999px;--space-xxs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-3xl:48px;--space-4xl:64px;--elevation-1:inset 0 0 0 1px #00000014;--elevation-2:0px 1px 1px #00000005, 0px 2px 2px #0000000a, inset 0 0 0 1px #00000014;--elevation-3:0px 2px 2px #0000000a, 0px 8px 8px -8px #0000000a, inset 0 0 0 1px #00000014;--elevation-5:0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f, inset 0 0 0 1px #00000014;--tap:44px;--motion-hover:.12s;--motion-control:.18s;--motion-progress:.32s;--motion-flip:.55s;--ease:cubic-bezier(.25, 0, .3, 1);--ease-out:cubic-bezier(0, 0, .3, 1)}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--canvas-soft);color:var(--ink);font-family:var(--font-sans);font-size:var(--text-body-md);line-height:var(--lh-body-md);-webkit-font-smoothing:antialiased;margin:0}::selection{background:var(--selection-bg);color:var(--selection-fg)}button,input{font:inherit;color:inherit}[hidden]{display:none!important}kbd{font-family:var(--font-mono);font-size:var(--text-caption);line-height:var(--lh-caption);padding:2px var(--space-xxs);border-radius:var(--rounded-xs);background:var(--canvas-soft-2);box-shadow:var(--elevation-1);color:var(--body)}.app{width:min(100% - var(--space-xl), 768px);padding:max(var(--space-md), env(safe-area-inset-top)) 0 calc(var(--space-lg) + env(safe-area-inset-bottom));gap:var(--space-md);flex-direction:column;min-height:100svh;margin-inline:auto;display:flex}.topbar{justify-content:space-between;align-items:center;gap:var(--space-md);display:flex}.brand{align-items:center;gap:var(--space-xs);font-family:var(--font-sans);font-size:var(--text-display-sm);line-height:var(--lh-display-sm);letter-spacing:var(--track-display-sm);margin:0;font-weight:600;display:flex}.brand-mark{width:1.05em;color:var(--primary);display:block}.brand-mark svg{width:100%;height:auto;display:block}@media (max-width:24rem){.brand-text{display:none}}.icon-button{align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);min-height:var(--tap);border:1px solid var(--hairline);border-radius:var(--rounded-full);background:var(--canvas);color:var(--body);font-size:var(--text-body-sm);line-height:var(--lh-body-sm);letter-spacing:var(--track-body-sm);cursor:pointer;transition:color var(--motion-hover) var(--ease), border-color var(--motion-hover) var(--ease);display:inline-flex}.icon-button svg{width:1.15em;height:1.15em}.icon-button:hover{color:var(--ink);border-color:var(--body)}.scoreboard{gap:var(--space-xs);flex-direction:column;display:flex}.progress{height:var(--space-xxs);border-radius:var(--rounded-full);background:var(--canvas-soft-2);overflow:hidden}.progress-fill{border-radius:inherit;background:var(--primary);width:0;height:100%;transition:width var(--motion-progress) var(--ease)}.stat-row{gap:var(--space-lg);margin:0;display:flex}.stat{align-items:baseline;gap:var(--space-xxs);display:flex}.stat dt{font-size:var(--text-caption);color:var(--body)}.stat dd{font-variant-numeric:tabular-nums;font-weight:500;font-size:var(--text-body-sm);line-height:var(--lh-body-sm);letter-spacing:var(--track-body-sm);margin:0}.stage{flex:auto;align-items:center;min-height:0;display:flex}.card{perspective:1600px;width:100%;height:clamp(15rem,48svh,27rem);container:card/size}.card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform var(--motion-flip) var(--ease-out);position:relative}.card[data-flipped=true] .card-inner{transform:rotateY(180deg)}.card.no-anim .card-inner{transition:none}.card-face{justify-content:center;align-items:center;gap:var(--space-md);padding:var(--space-lg);border:1px solid var(--hairline);border-radius:var(--rounded-lg);background:var(--canvas);box-shadow:var(--elevation-3);backface-visibility:hidden;flex-direction:column;display:flex;position:absolute;inset:0;overflow:hidden}.card-back{transform:rotateY(180deg)}.card-face>*{flex:none}.face-text{justify-content:center;align-items:center;gap:var(--space-xs);flex-direction:column;min-width:0;display:flex}.face-media{width:100%;min-height:var(--space-4xl);flex:auto;justify-content:center;align-items:center;min-width:0;display:flex}.staves{justify-content:center;align-items:flex-start;gap:var(--space-xs);flex-direction:column;width:100%;height:100%;display:flex}.staves .staff-wrap{min-height:0;width:var(--share);gap:var(--space-xxs);flex-direction:column;flex:0 auto;max-width:100%;max-height:100%;margin:0;display:flex}.staves .staff{flex:0 auto;width:100%;height:auto;min-height:0}.staves figcaption{font-size:var(--text-caption);line-height:var(--lh-caption);color:var(--body);flex:none}@container card (width>=30rem){.staves{align-items:center;gap:var(--space-lg);flex-direction:row}.staves .staff-wrap{flex-basis:0;flex-grow:var(--grow);width:auto}}.card-eyebrow{font-size:var(--text-caption);line-height:var(--lh-caption);color:var(--body);margin:0}.acc{margin-inline:.06em .02em}.acc-glyph{width:auto;display:inline-block}.acc-sharp{vertical-align:-.09em;height:.74em}.acc-flat{vertical-align:.05em;height:.82em}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.tonality{font-family:var(--font-sans);text-align:center;font-weight:600;line-height:1.1;font-size:clamp(var(--text-display-md), 12vw, var(--text-display-xl));letter-spacing:var(--track-display-xl);margin:0}.tonality--answer{font-size:clamp(var(--text-display-sm), 8vw, var(--text-display-lg));letter-spacing:var(--track-display-lg)}.tonality-sub{font-family:var(--font-sans);font-size:var(--text-display-sm);line-height:var(--lh-display-sm);letter-spacing:var(--track-display-sm);text-align:center;margin:0}.mode-chip{padding:var(--space-xxs) var(--space-md);border-radius:var(--rounded-full);background:var(--canvas-soft);box-shadow:var(--elevation-1);color:var(--body);font-size:var(--text-caption);line-height:var(--lh-caption)}.staff-wrap{justify-content:center;width:100%;max-width:26rem;height:100%;display:flex}.staff{width:100%;height:100%;color:var(--ink);display:block}.signature-label{font-size:var(--text-body-md);color:var(--body);text-align:center;margin:0}.scale-notes{justify-content:center;gap:var(--space-xxs);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.scale-notes li{min-width:var(--space-xl);padding:var(--space-xxs) var(--space-xs);border-radius:var(--rounded-full);background:var(--canvas-soft);box-shadow:var(--elevation-1);color:var(--body);font-size:var(--text-caption);line-height:var(--lh-caption);text-align:center}.scale-notes li:first-child{background:var(--primary);color:var(--on-primary);box-shadow:none;font-weight:500}.play{align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-lg);min-height:var(--tap);border:1px solid var(--hairline);border-radius:var(--rounded-full);background:var(--canvas);cursor:pointer;font-size:var(--text-body-sm);line-height:var(--lh-body-sm);letter-spacing:var(--track-body-sm);transition:border-color var(--motion-hover) var(--ease), color var(--motion-hover) var(--ease);display:inline-flex}.play:hover{border-color:var(--primary)}.play svg{width:1.1em;height:1.1em}.play[data-state=playing]{border-color:var(--primary)}.play[data-state=playing] .play-icon{animation:pulse 1s var(--ease) infinite}.play[data-state=loading]{color:var(--body)}@keyframes pulse{50%{opacity:.35}}@container card (height<=21rem){.scale-notes{display:none}}@container card (width<=30rem){.scale-notes{display:none}}@container card (width<=30rem) and (height<=20rem){.staves .staff-wrap--signature,.staves figcaption{display:none}}@container card (height<=17rem){.card-eyebrow{display:none}.card-face{gap:var(--space-xs)}}.controls{gap:var(--space-xs);flex-direction:column;display:flex}.btn{justify-content:center;align-items:center;gap:var(--space-xs);width:100%;min-height:var(--space-3xl);padding:0 var(--space-sm);border-radius:var(--rounded-sm);font-size:var(--text-body-md);line-height:var(--lh-body-md);cursor:pointer;transition:background var(--motion-hover) var(--ease), box-shadow var(--motion-hover) var(--ease);border:0;font-weight:500;display:inline-flex}.btn kbd{box-shadow:none;color:var(--body);background:0 0}.btn-primary{background:var(--primary);color:var(--on-primary)}.btn-primary:hover{background:var(--body)}.btn-again,.btn-good{background:var(--canvas);box-shadow:var(--elevation-1)}.btn-again{color:var(--error-deep)}.btn-good{color:var(--link-deep)}.btn-again:hover,.btn-good:hover{background:var(--canvas-soft-2);box-shadow:var(--elevation-2)}.grade-row{gap:var(--space-xs);grid-template-columns:1fr 1fr;display:grid}.shortcuts{text-align:center;font-size:var(--text-caption);color:var(--body);margin:0}.shortcuts .dot{margin:0 var(--space-xs)}@media (pointer:coarse),(max-width:30rem){.shortcuts,.btn kbd{display:none}}.summary{padding:var(--space-lg);border:1px solid var(--hairline);border-radius:var(--rounded-lg);background:var(--canvas);text-align:center}.summary h2{margin:0 0 var(--space-xxs);font-family:var(--font-sans)}.summary p{margin:0 0 var(--space-lg);color:var(--body)}.sheet{width:min(100% - var(--space-xl), 34rem);border:1px solid var(--hairline);border-radius:var(--rounded-lg);background:var(--canvas);max-height:min(90svh,46rem);color:var(--ink);box-shadow:var(--elevation-5);padding:0;overflow:hidden}.sheet::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#17171773}.sheet-inner{flex-direction:column;max-height:min(90svh,46rem);display:flex}.sheet-body{gap:var(--space-lg);padding:0 var(--space-lg) var(--space-lg);flex-direction:column;flex:1;display:flex;overflow-y:auto}.sheet-head{padding:var(--space-lg) var(--space-lg) var(--space-md);justify-content:space-between;align-items:center;display:flex}.sheet-head h2{font-family:var(--font-sans);font-size:var(--text-display-sm);margin:0}.sheet-head .icon-button{padding:var(--space-xs)}.field{border:0;margin:0;padding:0}.field legend{margin-bottom:var(--space-xs);font-size:var(--text-caption);line-height:var(--lh-caption);color:var(--body);padding:0}.field-note{margin:var(--space-xs) 0 0;font-size:var(--text-body-sm);line-height:var(--lh-body-sm);letter-spacing:var(--track-body-sm);color:var(--body)}.segmented{gap:var(--space-xxs);padding:var(--space-xxs);border-radius:var(--rounded-sm);background:var(--canvas-soft);grid-template-columns:1fr;display:grid}@media (min-width:30rem){.segmented{grid-template-columns:repeat(3,1fr)}}.segmented--compact{grid-template-columns:repeat(3,1fr)}.segmented label{min-height:var(--tap);padding:var(--space-xxs) var(--space-xs);border-radius:var(--rounded-xs);font-size:var(--text-body-sm);line-height:var(--lh-body-sm);letter-spacing:var(--track-body-sm);text-align:center;cursor:pointer;transition:background var(--motion-control) var(--ease), color var(--motion-control) var(--ease);justify-content:center;align-items:center;display:flex}.segmented input{opacity:0;pointer-events:none;position:absolute}.segmented label:has(input:checked){background:var(--canvas-soft-2);color:var(--ink);box-shadow:var(--elevation-1);font-weight:600}.segmented label:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px}.chips{gap:var(--space-xs);flex-wrap:wrap;display:flex}.chips label{align-items:center;gap:var(--space-xxs);min-height:var(--tap);padding:var(--space-xxs) var(--space-md);border:1px solid var(--hairline);border-radius:var(--rounded-full);font-size:var(--text-body-sm);line-height:var(--lh-body-sm);letter-spacing:var(--track-body-sm);cursor:pointer;transition:background var(--motion-control) var(--ease), border-color var(--motion-control) var(--ease), color var(--motion-control) var(--ease);display:inline-flex}.chips input{opacity:0;pointer-events:none;position:absolute}.chips label:has(input:checked){background:var(--primary);color:var(--on-primary);box-shadow:none;font-weight:500}.chips label:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px}.chips small{color:var(--body);font-weight:400}.chips label:has(input:checked) small{color:var(--hairline-strong)}.switch{align-items:center;gap:var(--space-xs);margin-top:var(--space-md);cursor:pointer;display:flex}.switch input{opacity:0;pointer-events:none;position:absolute}.switch-track{width:var(--space-3xl);height:var(--space-lg);border-radius:var(--rounded-full);background:var(--canvas-soft-2);border:1px solid var(--hairline);transition:background var(--motion-control) var(--ease), border-color var(--motion-control) var(--ease);flex:none;position:relative}.switch-thumb{top:50%;left:calc((var(--space-lg) - var(--space-lg)) / 2);width:var(--space-lg);height:var(--space-lg);background:var(--body);transition:transform var(--motion-control) var(--ease), background var(--motion-control) var(--ease);border-radius:50%;position:absolute;transform:translateY(-50%)}.switch:has(input:checked) .switch-track{background:var(--primary);box-shadow:none}.switch:has(input:checked) .switch-thumb{transform:translate(var(--space-lg), -50%);background:var(--primary)}.switch:has(input:focus-visible) .switch-track{outline:2px solid var(--primary);outline-offset:2px}.switch-label{font-size:var(--text-body-md)}.switch-label small{font-size:var(--text-caption);color:var(--body);display:block}.slider-label{margin-bottom:var(--space-xs);font-size:var(--text-body-md);display:block}input[type=range]{width:100%;accent-color:var(--primary);height:var(--tap);background:0 0}.sheet-foot{padding:var(--space-md) var(--space-lg) calc(var(--space-lg) + env(safe-area-inset-bottom));border-top:1px solid var(--hairline);background:var(--canvas)}:focus-visible{outline:2px solid var(--primary);outline-offset:2px}@media (max-height:34rem){.card-eyebrow,.shortcuts,.scale-notes{display:none}.card-face{gap:var(--space-xs);padding:var(--space-md)}.app{gap:var(--space-xs)}.tonality{font-size:clamp(var(--text-display-sm), 5vw, var(--text-display-md))}}@media (max-height:30rem){.stat-row{display:none}.app{padding-top:var(--space-xs);gap:var(--space-xs)}.card{height:clamp(11rem,58svh,27rem)}.brand{font-size:var(--text-body-md)}.icon-button,.btn{min-height:var(--space-xl)}}@media (max-height:34rem) and (min-width:34rem){.card-face{gap:var(--space-lg);flex-direction:row}.face-media{flex:auto;height:100%}.face-text{flex:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}