:root{--color-paper: oklch(98% .012 95);--color-paper-2: oklch(95% .019 95);--color-panel: oklch(99% .005 95);--color-ink: oklch(23% .025 250);--color-muted: oklch(43% .025 250);--color-line: oklch(87% .018 95);--color-pear: oklch(88% .16 100);--color-pear-edge: oklch(69% .14 100);--color-cyan: oklch(83% .065 230);--color-coral: oklch(75% .12 25);--color-mint: oklch(83% .095 155);--color-focus: oklch(43% .12 245);--font-display: "Plus Jakarta Sans", system-ui, sans-serif;--font-body: "Plus Jakarta Sans", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.25rem;--text-xl: 1.75rem;--text-display: clamp(2.5rem, 7vw, 4.5rem);--radius-card: 1.5rem;--radius-pill: 999px;--rule-thin: 1px;--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-in: cubic-bezier(.55, 0, 1, .45);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--dur-fast: .14s;--dur-med: .22s}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-width:320px;overflow-x:clip}body{background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-base);line-height:1.5}button{font:inherit}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}button:disabled{cursor:not-allowed}.app-shell{min-height:100dvh;display:flex;flex-direction:column}.topbar,.main-content,.footer{width:min(100%,1180px);margin-inline:auto;padding-inline:clamp(1rem,4vw,3rem)}.topbar{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);border-bottom:var(--rule-thin) solid var(--color-line)}.brand{display:inline-flex;align-items:center;gap:.65rem;color:var(--color-ink);text-decoration:none;font-weight:700;font-size:1.1rem;letter-spacing:-.03em;white-space:nowrap}.brand-mark{width:2.25rem;height:2.25rem;display:grid;place-items:center;border-radius:.75rem;background:var(--color-pear);font-size:1.4rem;line-height:1;transform:rotate(-8deg)}.topbar-caption{color:var(--color-muted);font-size:var(--text-sm)}.main-content{flex:1;padding-top:clamp(2rem,5vw,4rem);padding-bottom:var(--space-2xl)}.intro{display:flex;justify-content:space-between;align-items:end;gap:var(--space-lg);margin-bottom:var(--space-xl)}.intro-kicker,.section-label{margin:0 0 var(--space-sm);color:var(--color-muted);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.025em;text-transform:uppercase}h1,h2,h3,p{margin-top:0}h1{min-width:0;margin-bottom:var(--space-sm);font-family:var(--font-display);font-size:var(--text-display);font-weight:700;line-height:1.09;letter-spacing:-.055em;overflow-wrap:anywhere}h1 span{color:var(--color-focus)}.intro-copy{max-width:55ch;margin-bottom:0;color:var(--color-muted)}.practice-count{flex:none;display:flex;flex-direction:column;align-items:end;line-height:1}.practice-count strong{font-size:clamp(3rem,6vw,5rem);font-weight:700;letter-spacing:-.08em;font-variant-numeric:tabular-nums}.practice-count span{margin-top:var(--space-sm);color:var(--color-muted);font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;white-space:nowrap}.practice-card{overflow:clip;border:var(--rule-thin) solid var(--color-line);border-radius:var(--radius-card);background:var(--color-panel);box-shadow:0 20px 52px -34px var(--color-ink)}.practice-topline{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-lg) clamp(1rem,3vw,2rem)}.practice-topline h2{margin-bottom:0;font-size:var(--text-xl);line-height:1.2;letter-spacing:-.04em}.mode-switch{display:inline-flex;gap:.2rem;padding:.25rem;border:var(--rule-thin) solid var(--color-line);border-radius:var(--radius-pill);background:var(--color-paper-2)}.mode{min-height:40px;padding:.5rem .9rem;border:0;border-radius:var(--radius-pill);color:var(--color-muted);background:transparent;font-size:var(--text-sm);font-weight:600;cursor:pointer;white-space:nowrap;transition:background-color var(--dur-fast),color var(--dur-fast)}.mode.active{background:var(--color-panel);color:var(--color-ink);box-shadow:0 2px 8px var(--color-line)}.mode:active{transform:translateY(1px)}.range-controls{display:flex;align-items:center;gap:var(--space-sm);padding:0 clamp(1rem,3vw,2rem) var(--space-lg)}.range-label{margin-right:var(--space-sm);color:var(--color-muted);font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase}.range-select,.precision-controls select{min-height:44px;border:var(--rule-thin) solid var(--color-line);border-radius:.8rem;background:var(--color-panel);color:var(--color-ink);font:inherit;font-weight:700;cursor:pointer}.range-select{width:4.5rem;padding-inline:var(--space-sm)}.range-description{color:var(--color-muted);font-size:var(--text-sm)}.sound-stage{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(1rem,3vw,2rem);min-height:172px;padding:clamp(1.25rem,3vw,2rem);background:var(--color-paper-2);color:var(--color-ink)}.sound-emblem{width:clamp(4rem,8vw,6rem);height:clamp(4rem,8vw,6rem);display:flex;align-items:center;justify-content:center;gap:.28rem;flex:none;border-radius:1.25rem;background:var(--color-pear);transform:rotate(-6deg)}.sound-emblem span{width:.28rem;height:25%;border-radius:var(--radius-pill);background:var(--color-ink)}.sound-emblem span:nth-child(2),.sound-emblem span:nth-child(4){height:48%}.sound-emblem span:nth-child(3){height:68%}.sound-copy h3{margin-bottom:.25rem;font-size:clamp(1.35rem,3vw,2rem);line-height:1.2;letter-spacing:-.04em}.sound-copy p{margin-bottom:0;color:var(--color-muted);font-size:var(--text-sm)}.sound-actions{display:flex;justify-content:end;gap:var(--space-sm)}.btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:.75rem 1.2rem;border:var(--rule-thin) solid transparent;border-radius:var(--radius-pill);color:var(--color-ink);font-weight:700;font-size:var(--text-sm);white-space:nowrap;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background-color var(--dur-fast)}.btn-primary{background:var(--color-pear);box-shadow:0 4px 0 var(--color-pear-edge)}.btn-secondary{border-color:var(--color-line);background:var(--color-panel);box-shadow:0 3px 0 var(--color-line)}@media(hover:hover)and (pointer:fine){.btn:hover{transform:translateY(-2px)}.btn-primary:hover{box-shadow:0 6px 0 var(--color-pear-edge)}.btn-secondary:hover{box-shadow:0 5px 0 var(--color-line)}.mode:not(.active):hover{background:var(--color-cyan);color:var(--color-ink)}}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--color-pear-edge)}.btn:disabled{opacity:.55;box-shadow:none}.audio-error{margin:0;padding:var(--space-sm) var(--space-lg);background:var(--color-coral);color:var(--color-ink);font-size:var(--text-sm)}.answer-area{padding:clamp(1.25rem,3vw,2rem)}.answer-heading,.answer-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}.answer-heading{margin-bottom:var(--space-md)}.answer-heading p{margin-bottom:0;font-weight:700}.answer-heading span{color:var(--color-muted);font-size:var(--text-sm);white-space:nowrap}.label-toggle{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;cursor:pointer}.label-toggle input{width:1.1rem;height:1.1rem;margin:0;accent-color:var(--color-focus);cursor:pointer}.keyboard-scale{position:relative;height:24px;color:var(--color-muted);font-family:var(--font-mono);font-size:.7rem}.keyboard-scale span{position:absolute;top:0;white-space:nowrap}.piano{position:relative;height:clamp(174px,27vw,232px);-webkit-user-select:none;user-select:none}.white-keys{display:grid;height:100%}.piano-key{min-width:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:.1rem;border:var(--rule-thin) solid var(--color-line);font-weight:700;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast),box-shadow var(--dur-fast)}.white-key{padding:.75rem 0;border-radius:.3rem .3rem .5rem .5rem;background:var(--color-panel);color:var(--color-ink);box-shadow:0 5px 0 var(--color-line)}.black-key{position:absolute;top:0;z-index:1;height:58%;padding:.45rem 0;border:0;border-radius:0 0 .35rem .35rem;background:var(--color-ink);color:var(--color-panel);box-shadow:0 5px 0 var(--color-focus)}.piano[data-density=dense]{height:160px}.piano[data-density=dense] .key-name{display:none}.black-key.unavailable{opacity:.28}.key-name{font-size:clamp(.8rem,1.8vw,1.1rem);line-height:1.2}.key-shortcut{color:var(--color-muted);font-family:var(--font-mono);font-size:.7rem;font-weight:400}.black-key .key-shortcut{color:var(--color-paper-2)}.piano-key:disabled{cursor:default}.piano-key:disabled:not(.revealed):not(.selected-near):not(.selected-wrong){opacity:.8}.black-key.unavailable:disabled{opacity:.28}.piano-key.selected-correct,.piano-key.revealed{background:var(--color-mint);color:var(--color-ink);box-shadow:0 5px 0 var(--color-pear-edge)}.piano-key.selected-wrong{background:var(--color-coral);color:var(--color-ink);box-shadow:0 5px 0 var(--color-pear-edge)}.piano-key.selected-near{background:var(--color-cyan);color:var(--color-ink);box-shadow:0 5px 0 var(--color-focus)}.black-key.selected-correct .key-shortcut,.black-key.selected-near .key-shortcut,.black-key.selected-wrong .key-shortcut,.black-key.revealed .key-shortcut{color:var(--color-ink)}@media(hover:hover)and (pointer:fine){.white-key:not(:disabled):hover{background:var(--color-cyan);transform:translateY(-2px)}.black-key:not(:disabled):hover{background:var(--color-focus);transform:translateY(-2px)}}.piano-key:not(:disabled):active{transform:translateY(3px)}.precision-picker{display:grid;gap:var(--space-sm);margin-top:var(--space-lg);padding:var(--space-md);border-radius:.8rem;background:var(--color-paper-2)}.precision-picker label{color:var(--color-muted);font-size:var(--text-sm)}.precision-controls{display:flex;gap:var(--space-sm)}.precision-controls select{min-width:0;flex:1;padding-inline:var(--space-sm)}.precision-controls select:disabled{opacity:.55;cursor:not-allowed}.answer-footer{min-height:64px;margin-top:var(--space-lg);color:var(--color-muted);font-size:var(--text-sm)}.answer-footer [role=status]{overflow-wrap:anywhere}.next-button{margin-left:auto}.stats-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);margin-top:var(--space-xl);margin-bottom:var(--space-md)}.stats-heading h2{margin:0;font-size:var(--text-lg);letter-spacing:-.03em}.reset-button{min-height:44px;padding:.5rem .9rem;border:var(--rule-thin) solid var(--color-line);border-radius:var(--radius-pill);background:var(--color-panel);color:var(--color-ink);font-size:var(--text-sm);font-weight:700;white-space:nowrap;cursor:pointer}.reset-button:disabled{opacity:.55;cursor:not-allowed}.reset-button:active{transform:translateY(1px)}@media(hover:hover)and (pointer:fine){.reset-button:not(:disabled):hover{background:var(--color-paper-2)}}.stats-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-md)}.stat{min-width:0;padding:var(--space-lg);border-radius:1.25rem;background:var(--color-panel);border:var(--rule-thin) solid var(--color-line)}.stat:nth-child(2){background:var(--color-cyan);border-color:var(--color-cyan)}.stat:nth-child(3){background:var(--color-pear);border-color:var(--color-pear)}.stat strong{display:block;font-size:clamp(1.65rem,4vw,2.75rem);line-height:1;letter-spacing:-.065em;font-variant-numeric:tabular-nums}.stat strong span{color:var(--color-muted);font-size:.52em}.stat p{margin:var(--space-sm) 0 0;color:var(--color-muted);font-size:var(--text-sm)}.score-rule,.help-line{margin:var(--space-lg) 0 0;color:var(--color-muted);font-size:var(--text-sm);text-align:center}kbd{display:inline-block;min-width:1.3em;padding:0 .2em;border:var(--rule-thin) solid var(--color-line);border-radius:.3rem;background:var(--color-panel);color:var(--color-ink);font-family:var(--font-mono);font-size:.85em}.footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);min-height:70px;border-top:var(--rule-thin) solid var(--color-line);color:var(--color-muted);font-size:var(--text-sm)}.footer span:first-child{color:var(--color-ink);font-weight:700}@media(max-width:700px){.intro{align-items:start}.sound-stage{grid-template-columns:auto minmax(0,1fr)}.sound-actions{grid-column:1 / -1;justify-content:stretch}.sound-actions .btn{flex:1}.stats-row{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.piano[data-density=medium] .key-name{display:none}}@media(max-width:480px){.topbar{min-height:68px}.topbar-caption{display:none}.intro{display:block}.practice-count{display:none}.practice-topline{display:block}.practice-topline h2{margin-bottom:var(--space-md)}.mode-switch{width:100%}.mode{flex:1;padding-inline:.4rem}.sound-stage{gap:.75rem}.sound-emblem{width:3.4rem;height:3.4rem}.answer-heading span{font-size:.75rem}.key-shortcut{display:none}.stat{padding:var(--space-md)}.help-line{display:none}.footer span:last-child{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}