:root{--sage-900:#557473;--sage-800:#4a6b67;--coral-600:#b04736;--cream-50:#ebf5ee;--sightread-primary:#1c1c1e;--sightread-bg:#fff;--home-text:#2a3a2ee6;--home-text-secondary:#2a3a2ebf;--home-text-tertiary:#2a3a2ea6;--home-sr-text-secondary:#ebf5eeb3;--home-sr-text-tertiary:#ebf5ee99;--bg:#ebf5ee;--text:#272838;--text-soft:#27283899;--text-faint:#2728384d;--accent:#f6ae2d;--accent-hover:#e09a1a;--accent-soft:#f6ae2d2e;--hit-perfect:#4f9d6e;--hit-good:#86c7a4;--font-serif:"Source Serif 4", Charter, "Iowan Old Style", "Source Serif Pro", Georgia, serif;--font-sans:var(--font-serif);--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-soft:cubic-bezier(.4, 0, .2, 1);--ease-bounce:cubic-bezier(.34, 1.56, .64, 1);--dur-fast:.16s;--dur-base:.32s;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-full:9999px;--space-center:68px;--space-stack:24px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:var(--font-sans);background:var(--bg);color:var(--text);min-height:100dvh;padding:max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);font-variant-numeric:lining-nums;font-feature-settings:"lnum";flex-direction:column;justify-content:center;align-items:center;display:flex;overflow:hidden}body[data-active-screen=home]{background:var(--cream-50);color:#2a3a2e}body[data-active-screen=home][data-mode=sightread]{background:var(--sightread-primary);color:var(--cream-50)}body[data-active-screen=home][data-mode=sightread] .btn-play{border-color:var(--cream-50);color:var(--cream-50);background:0 0}body[data-active-screen=home][data-mode=sightread] .app-title,body[data-active-screen=home][data-mode=sightread] .stepper-level,body[data-active-screen=home][data-mode=sightread] .stepper-arrow{color:var(--cream-50)}body[data-active-screen=home][data-mode=sightread] .grade-link{color:var(--home-sr-text-tertiary)}body[data-active-screen=home][data-mode=sightread] .grade-link:hover{color:var(--cream-50)}body[data-active-screen=home][data-mode=sightread] .home-streak{color:var(--home-sr-text-tertiary)}body[data-active-screen=home][data-mode=sightread] .mode-switch{color:var(--home-sr-text-secondary)}body[data-active-screen=home][data-mode=sightread] .mode-switch:hover{color:var(--cream-50)}body[data-active-screen=home][data-mode=sightread] .home-subtitle{color:var(--home-sr-text-secondary)}body[data-mode=sightread][data-active-screen=listening],body[data-mode=sightread][data-active-screen=tapping],body[data-mode=sightread][data-active-screen=results]{background:var(--sightread-bg)}body[data-mode=sightread]{--accent:#272838;--accent-hover:#272838b3;--accent-soft:#2728381a}body[data-active-screen=results]{padding:0}.screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:24px;width:100%;max-width:480px;display:none;position:relative}#screen-results.active{padding:max(24px, env(safe-area-inset-top)) 14px max(24px, env(safe-area-inset-bottom));flex-direction:column;justify-content:safe center;align-items:center;gap:clamp(28px,5vh,48px);min-height:100dvh;max-height:100dvh;display:flex;overflow:hidden}#screen-tapping.active{grid-template-rows:1fr auto 1fr;place-items:center;gap:0;height:calc(100dvh - 40px);padding:0 24px;display:grid}.tap-header{padding-bottom:var(--space-center);transition:gap .32s var(--ease-out), padding-bottom .32s var(--ease-out);flex-direction:column;align-self:end;align-items:center;gap:12px;display:flex}.phase-label.is-swapping{visibility:hidden;opacity:0;transform:translateY(6px)}#tap-countdown:empty{display:none}.tap-bpm-line{font-family:var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum", "tnum";align-items:center;gap:8px;font-size:12px;font-weight:500;display:inline-flex}.tap-bpm-line[hidden]{display:none}.metronome-dot{background:var(--text);opacity:.3;width:8px;height:8px;animation:metronome-pulse var(--beat-ms,.6s) ease-in-out infinite;border-radius:50%;flex-shrink:0}.metronome-dot[hidden]{display:none}@media (hover:none) and (pointer:coarse){.metronome-dot{display:none}}@keyframes metronome-pulse{0%{opacity:.3;transform:scale(1)}10%{opacity:.85;transform:scale(1.4)}60%{opacity:.3;transform:scale(1)}to{opacity:.3;transform:scale(1)}}#screen-listening.active{grid-template-rows:1fr auto 1fr;place-items:center;gap:0;height:calc(100dvh - 40px);padding:0 24px;display:grid}.listen-header{padding-bottom:var(--space-center);flex-direction:column;align-self:end;align-items:center;gap:12px;display:flex}.listen-stage{place-items:center;display:grid}.listen-stage>*{grid-area:1/1}#screen-listening>.bpm-display{padding-top:var(--space-center);align-self:start}.screen.active{animation:fade-in-up var(--dur-base) var(--ease-out);display:flex}.exit-btn{top:max(20px, env(safe-area-inset-top));left:max(20px, env(safe-area-inset-left,0px));width:36px;height:36px;color:var(--text-soft);font-family:var(--font-sans);cursor:pointer;transition:color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);z-index:20;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:26px;line-height:1;display:flex;position:fixed}.exit-btn:hover{color:var(--text);background:#2728380f}.skip-btn{bottom:max(24px, env(safe-area-inset-bottom,24px));color:var(--text-soft);font-family:var(--font-sans);letter-spacing:.04em;cursor:pointer;opacity:.55;transition:opacity var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);z-index:20;background:0 0;border:none;border-radius:20px;padding:6px 12px;font-size:12px;position:fixed;left:50%;transform:translate(-50%)}.skip-btn:hover{opacity:1;background:#2728380f}.sound-toggle{top:max(20px, env(safe-area-inset-top));right:max(20px, env(safe-area-inset-right,0px));width:36px;height:36px;color:var(--text-soft);cursor:pointer;transition:color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);z-index:20;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;display:flex;position:fixed}.sound-toggle:hover{color:var(--text);background:#2728380f}.icon-sound-off,.sound-toggle.is-muted .icon-sound-on{display:none}.sound-toggle.is-muted .icon-sound-off{display:block}body[data-active-screen=home] .sound-toggle,body:not([data-active-screen=home]) .mode-switch{display:none}#screen-home.active{grid-template-rows:1fr auto 1fr;place-items:center;gap:0;height:calc(100dvh - 40px);padding:0 24px;display:grid;position:relative}.home-top{align-items:center;gap:var(--space-stack);flex-direction:column;align-self:end;padding-bottom:clamp(32px,6vh,56px);display:flex}.home-bottom{flex-direction:column;justify-content:space-between;align-self:stretch;align-items:center;padding-top:24px;padding-bottom:24px;display:flex}.app-title{font-family:var(--font-serif);color:#2a3a2e;letter-spacing:.04em;font-size:clamp(32px,8vw,44px);font-weight:700;line-height:1}.home-controls{flex-direction:column;align-items:center;gap:0;display:flex}.level-stepper{align-items:center;gap:10px;display:flex}.stepper-arrow{color:var(--home-text-secondary);cursor:pointer;transition:opacity var(--dur-fast) var(--ease-soft);background:0 0;border:none;justify-content:center;align-items:center;padding:6px;display:flex}.stepper-arrow svg{width:22px;height:22px}.stepper-arrow:hover{opacity:1}.stepper-arrow:disabled{opacity:.15;cursor:default;pointer-events:none}.stepper-level{font-family:var(--font-sans);color:var(--home-text);text-align:center;font-size:18px;font-weight:400;line-height:1.2}.home-streak{font-family:var(--font-sans);color:var(--home-text-tertiary);margin:8px 0 0;font-size:12px}.grade-link{font-family:var(--font-sans);color:var(--home-text-tertiary);cursor:pointer;text-underline-offset:3px;letter-spacing:.02em;white-space:nowrap;transition:color var(--dur-fast) var(--ease-soft);background:0 0;border:none;padding:4px 8px;font-size:11px;text-decoration:underline}.grade-link:hover{color:var(--home-text)}.btn-play{border-radius:var(--radius-full);border:3px solid var(--sage-900);cursor:pointer;width:128px;height:128px;color:var(--sage-900);box-shadow:none;touch-action:manipulation;background:0 0;justify-content:center;align-items:center;display:flex;position:relative}.btn-play:hover,.btn-play:active{transition:transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft)}.btn-play:hover{transform:scale(1.06)}.btn-play:active{transform:scale(.96)}@keyframes play-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.045)}}.btn-play{animation:3s ease-in-out infinite play-breathe}.btn-play:hover,.btn-play:active{animation:none}@media (prefers-reduced-motion:reduce){.btn-play{animation:none}}.grade-overlay{z-index:200;background:#00000073;position:fixed;top:0;bottom:0;left:0;right:0}.grade-panel{border-radius:var(--radius-lg) var(--radius-lg) 0 0;z-index:201;color:#3a4a3e;background:#f5f7f3;max-width:480px;margin:0 auto;padding:24px 28px 40px;position:fixed;bottom:0;left:0;right:0}.grade-panel-close{color:#6a7a6e;cursor:pointer;background:0 0;border:none;padding:4px 8px;font-size:20px;line-height:1;position:absolute;top:16px;right:20px}.grade-panel-title{font-family:var(--font-serif);color:#2a3a2e;margin:0 0 16px;font-size:20px;font-weight:700}.grade-panel-content{flex-direction:column;gap:12px;display:flex}.grade-panel-mode-badge{font-family:var(--font-sans);letter-spacing:.05em;text-transform:uppercase;color:#8a9a8e;border-bottom:1px solid #3a4a3e1f;margin:0 0 4px;padding-bottom:10px;font-size:11px;font-weight:500}.grade-row{border-bottom:1px solid #3a4a3e14;grid-template-columns:1fr;grid-template-areas:"difficulty""subtitle""description";row-gap:2px;padding:10px 0;display:grid}.grade-row:last-child{border-bottom:none}.grade-panel-disclaimer{font-family:var(--font-sans);color:#8a9a8e;margin:12px 0 0;font-size:11px;line-height:1.5}.grade-row-difficulty{font-family:var(--font-sans);color:#3a4a3e;grid-area:difficulty;font-size:14px;font-weight:600}.grade-row-subtitle{font-family:var(--font-sans);color:#8a9a8e;grid-area:subtitle;font-size:12px}.grade-row-description{font-family:var(--font-sans);color:#5a6a5e;grid-area:description;font-size:13px;line-height:1.4}.stats-toggle{color:var(--home-text-tertiary);cursor:pointer;transition:color var(--dur-fast) var(--ease-soft);z-index:10;background:0 0;border:none;justify-content:center;align-items:center;padding:4px 8px;display:flex;position:fixed;top:20px;right:20px}body:not([data-active-screen=home]) .stats-toggle{display:none}.stats-toggle:hover{color:var(--home-text)}body[data-mode=sightread] .stats-toggle{color:var(--home-sr-text-tertiary)}body[data-mode=sightread] .stats-toggle:hover{color:var(--cream-50)}.stats-panel{-webkit-overflow-scrolling:touch;max-height:85vh;overflow-y:auto}.stats-headline{font-family:var(--font-sans);color:#5a6a5e;text-align:center;margin:0 0 16px;font-size:14px;font-weight:500}.stats-tabs{border-bottom:1px solid #3a4a3e1f;margin:0 0 16px;display:flex}.stats-tab{font-family:var(--font-sans);color:#8a9a8e;cursor:pointer;transition:color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:8px 0;font-size:13px;font-weight:500}.stats-tab:hover{color:#5a6a5e}.stats-tab.is-active{color:#3a4a3e;border-bottom-color:#557473}.stats-mode-content{text-align:left;flex-direction:column;gap:16px;display:flex}.stats-section-title{font-family:var(--font-sans);color:#6a7a6e;text-align:left;margin:0 0 8px;font-size:12px;font-weight:600}.stats-level-row{align-items:center;gap:10px;margin-bottom:8px;display:flex}.stats-level-row:last-child{margin-bottom:0}.stats-level-label{font-family:var(--font-sans);color:#5a6a5e;flex-shrink:0;width:52px;font-size:12px;font-weight:500}.stats-level-track{background:#3a4a3e14;border-radius:4px;flex:1;height:8px;overflow:hidden}.stats-level-fill{height:100%;transition:width var(--dur-fast) var(--ease-soft);background:#6a8a6e;border-radius:4px;display:block}.stats-level-annotation{font-family:var(--font-sans);color:#5a6a5e;white-space:nowrap;text-align:right;flex-shrink:0;width:150px;font-size:12px}.stats-timing-text{font-family:var(--font-sans);color:#5a6a5e;text-align:left;margin:0;font-size:13px}.stats-empty{font-family:var(--font-sans);color:#8a9a8e;text-align:center;margin:0;padding:24px 0;font-size:13px}.stats-no-data{font-family:var(--font-sans);color:#aabcae;text-align:center;padding:8px 0;font-size:12px}.phase-label{font-family:var(--font-serif);color:var(--text);letter-spacing:-.01em;font-size:28px;font-weight:700;line-height:1.2}.phase-label:empty{display:none}.bpm-display{font-family:var(--font-sans);color:var(--text);letter-spacing:.04em;text-transform:uppercase;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum", "tnum";font-size:12px;font-weight:400}.countdown-display{font-family:var(--font-serif);color:var(--text);font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum", "tnum";min-height:72px;font-size:72px;font-weight:400;line-height:1}.level-indicator{font-family:var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--text-soft);background:#27283812;border:none;border-radius:6px;align-self:center;padding:5px 14px;font-size:12px;font-weight:600;line-height:1}.level-indicator[hidden]{display:none}.beat-dot{background:var(--accent);border-radius:50%;flex-shrink:0;width:96px;height:96px;transition:transform 90ms cubic-bezier(.4,0,1,1),border-radius 90ms cubic-bezier(.4,0,1,1);position:relative}.beat-dot:not(.squish-top):not(.squish-side):not(.squish-diag):not(.squish-down){transition:transform .3s var(--ease-bounce), border-radius .3s var(--ease-bounce)}.beat-dot.squish-top{border-radius:50%/35% 35% 65% 65%;transform:scaleY(.74)scaleX(1.16)}.beat-dot.squish-side{border-radius:35% 65% 65% 35%/50%;transform:scaleX(.74)scaleY(1.16)}.beat-dot.squish-diag{border-radius:50%/35% 35% 65% 65%;transform:rotate(30deg)scaleY(.76)scaleX(1.14)}.beat-dot.squish-down{border-radius:50%/28% 28% 72% 72%;transform:scaleY(.64)scaleX(1.26)}.tap-area-wrap{flex-direction:column;align-items:center;gap:14px;display:flex}.tap-area-wrap:has(>#tap-area[hidden]){display:none}.tap-area{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;flex-shrink:0;justify-content:center;align-items:center;width:320px;height:320px;display:flex;position:relative}.tap-area[hidden]{display:none}.tap-rings{--beat-ms:.6s;justify-content:center;align-items:center;width:300px;height:300px;display:flex;position:relative}.tap-rings-svg{pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0}.tap-ring{fill:none;stroke:var(--accent);stroke-width:7.8px;stroke-linecap:round;opacity:.18;transform-box:view-box;transform-origin:50%;transition:opacity .26s ease-out}@keyframes spin-cw{to{transform:rotate(360deg)}}@keyframes spin-ccw{to{transform:rotate(-360deg)}}.tap-ring-1{animation:spin-cw calc(var(--beat-ms) * 7) linear infinite}.tap-ring-2{animation:spin-ccw calc(var(--beat-ms) * 11) linear infinite}.tap-ring-3{animation:spin-cw calc(var(--beat-ms) * 18) linear infinite;stroke-dasharray:484 30 70 30 50 27}.tap-ring-2{stroke-dasharray:140 23 140 23 140 24}.tap-ring-1{stroke-dasharray:120 21 130 31}.tap-disc{background:var(--accent);opacity:.18;z-index:2;pointer-events:none;border:none;border-radius:50%;flex-shrink:0;width:36px;height:36px;transition:opacity .26s ease-out;position:relative}.key-cap-hero{flex-direction:column;align-items:center;gap:28px;display:none}.key-cap{background:var(--bg);border:1.5px solid var(--text-soft);border-radius:var(--radius-md);width:320px;height:68px;box-shadow:0 4px 0 var(--text-faint), 0 6px 16px #27283812;transition:transform .24s var(--ease-bounce), box-shadow .24s var(--ease-bounce);justify-content:center;align-items:center;display:flex;position:relative}.key-cap.key-down{transition:transform 70ms cubic-bezier(.4,0,1,1),box-shadow 70ms cubic-bezier(.4,0,1,1)}.key-cap-label{font-family:var(--font-sans);letter-spacing:.22em;color:var(--text-soft);transition:color var(--dur-fast) var(--ease-soft);pointer-events:none;z-index:1;font-size:15px;font-weight:500;position:relative}.key-cap.key-down{box-shadow:0 1px 0 var(--text-faint), 0 2px 6px #2728380d;transform:translateY(3px)}@keyframes key-breathe{0%,to{opacity:1}50%{opacity:.45}}.key-cap.breathing .key-cap-label{animation:2.6s ease-in-out infinite key-breathe}.key-cap-hero{display:none!important}.key-cap-hero[hidden]{display:none}.sightread-stage{will-change:opacity;width:100%;max-width:460px;transition:opacity .18s var(--ease-soft);flex-direction:column;place-self:stretch stretch;gap:12px;padding:12px 0 8px;display:flex}.sightread-stage.is-resetting{opacity:0;pointer-events:none;transition:none}.sightread-stage[hidden]{display:none}.sightread-notation{-webkit-overflow-scrolling:touch;flex:none;min-height:0;max-height:28vh;overflow:clip visible}#sightread-notation{flex:none;overflow-y:visible}#screen-tapping[data-sightread-phase=tapping] .sightread-notation .staff-count-label{opacity:0;pointer-events:none}.sightread-drum{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transform-origin:50% 0;will-change:transform, opacity;max-height:600px;transition:opacity .3s var(--ease-soft), transform .3s var(--ease-soft), max-height .3s var(--ease-soft);background:0 0;border:none;outline:none;flex-direction:column;align-items:center;gap:14px;margin:0 auto;padding:0;display:flex;position:relative}.sightread-drum:after{content:"";border-radius:50%;position:absolute;top:-20px;bottom:-20px;left:-20px;right:-20px}.sightread-drum.is-collapsing{opacity:0;pointer-events:none;max-height:0;margin-top:0;margin-bottom:0;transform:scaleY(0)}.sightread-drum.is-mic-collapsing{opacity:0;pointer-events:none;max-height:0;transition:transform .3s var(--ease-out), max-height .3s var(--ease-out);margin-top:0;margin-bottom:0;transform:scaleY(0)}.sightread-drum[hidden]{display:none}.sightread-drum-head{width:clamp(180px,50vw,240px);height:clamp(180px,50vw,240px);transition:transform .22s var(--ease-bounce), background .2s var(--ease-soft);background:radial-gradient(circle at 36% 32%,#fafaf8 0%,#f5f5f3 40%,#efefed 100%);border:5px solid #2c2c2e;border-radius:50%;position:relative;box-shadow:inset 0 6px 14px #ffffffb3,inset 0 -6px 18px #0000000f,0 10px #232325,0 14px 32px #00000024}.sightread-drum-target{box-sizing:content-box;pointer-events:none;opacity:.55;width:64px;height:64px;transition:opacity .13s ease-out, transform .13s ease-out, border-color .18s var(--ease-soft);border:1.5px dashed #ababab;border-radius:50%;margin:-32px 0 0 -32px;position:absolute;top:50%;left:50%;transform:scale(1)}.sightread-drum.is-beat .sightread-drum-target{opacity:.9;transform:scale(1.06)}@keyframes metronome-pulse-muted{0%{opacity:.6;background:var(--text);transform:scale(1)}10%{opacity:1;background:var(--accent-hover);transform:scale(1.75)}60%{opacity:.6;background:var(--text);transform:scale(1)}to{opacity:.6;background:var(--text);transform:scale(1)}}body.is-muted .metronome-dot{opacity:.6;width:10px;height:10px;animation-name:metronome-pulse-muted}body.is-muted .sightread-drum-target{transition:opacity .13s ease-out, transform .13s ease-out, border-color .18s var(--ease-soft);border-width:2px}body.is-muted .sightread-drum.is-beat .sightread-drum-target{opacity:.9;transform:scale(1.06)}.sightread-drum.is-pressed .sightread-drum-head{background:radial-gradient(circle,#fff 0%,#fafaf8 22%,#f5f5f3 52%,#efefed 80%,#e8e8e6 100%);transform:scale(1.05)}.sightread-drum.is-pressed .sightread-drum-target{opacity:.85;transform:scale(1.03)}.sightread-drum:focus-visible .sightread-drum-head{border-color:#2c2c2e;box-shadow:inset 0 4px 10px #fffc,0 10px #232325,0 14px 32px #00000024,0 0 0 4px #e8655a47}.sightread-drum-hint{font-family:var(--font-sans);letter-spacing:.06em;color:var(--text-faint);pointer-events:none;margin-top:18px;font-size:11px}.sightread-bpm{color:var(--text-soft);will-change:opacity;max-height:40px;transition:opacity .3s var(--ease-soft), max-height .3s var(--ease-soft);justify-content:center;align-self:center;align-items:center;margin-top:16px;display:flex;overflow:hidden}.sightread-bpm.is-collapsing{opacity:0;max-height:0}.sightread-bpm[hidden]{display:none}.sightread-bpm-dot{background:var(--text-soft);opacity:.35;border-radius:50%;flex-shrink:0;width:6px;height:6px;margin-right:6px}.sightread-bpm-dot[hidden]{display:none}.sightread-drum-hint kbd{font-family:var(--font-sans);color:var(--text-soft);background:#27283814;border-radius:3px;margin:0 1px;padding:1px 6px;font-size:10px;font-weight:600}@media (hover:none) and (pointer:coarse){.sightread-drum-hint{display:none}}.sightread-streak{will-change:opacity;align-self:center;max-height:60px;overflow:hidden}.sightread-streak.is-expanding{opacity:0;max-height:0}.sightread-listen{will-change:opacity;flex-direction:row;justify-content:center;align-self:center;align-items:center;gap:12px;max-height:80px;display:flex;overflow:hidden}.sightread-listen.is-expanding{opacity:0;max-height:0}.sightread-listen[hidden]{display:none}.sightread-actions{will-change:opacity;flex-flow:wrap;align-items:stretch;gap:12px;width:100%;max-width:300px;max-height:200px;margin:0 auto;display:flex;overflow:hidden}.sightread-actions.is-expanding{opacity:0;max-height:0}#screen-tapping[data-sightread-phase] .sightread-streak,#screen-tapping[data-sightread-phase] .sightread-listen{transition:opacity .3s var(--ease-soft), transform .3s var(--ease-soft)}#screen-tapping[data-sightread-phase] .sightread-actions{transition:opacity .3s var(--ease-soft) 60ms, transform .3s var(--ease-soft) 60ms}#screen-tapping[data-sightread-phase] .sightread-streak.is-expanding,#screen-tapping[data-sightread-phase] .sightread-listen.is-expanding,#screen-tapping[data-sightread-phase] .sightread-actions.is-expanding{opacity:0;max-height:200px;transform:translateY(6px)}.sightread-actions[hidden]{display:none}.sightread-actions .btn{white-space:nowrap;flex:1;padding:10px 20px}.sightread-actions .btn-secondary{border-color:var(--text-soft);color:var(--text-soft);background:0 0}.sightread-actions .btn-secondary:hover{border-color:var(--text);color:var(--text);background:0 0}.sightread-actions .btn-primary{color:#fff;background:#2c2c2e;border-color:#2c2c2e}.sightread-actions .btn-primary:hover{background:#3a3a3c;border-color:#3a3a3c}.phase-label.result-perfect,.phase-label.result-pass{color:var(--text)}.phase-label.result-fail{color:var(--coral-600)}#screen-tapping[data-sightread-phase] .sightread-stage{transition:gap .3s var(--ease-soft);gap:clamp(12px,2.5vh,32px);margin-inline-start:auto;margin-inline-end:auto;padding-top:0;padding-bottom:0}#screen-tapping[data-sightread-phase=results] .sightread-stage{gap:clamp(28px,5vh,48px);padding-top:0}#screen-tapping[data-sightread-phase=results] #sightread-tools-row{margin-bottom:calc(-1*clamp(28px,5vh,48px) + 12px)}#screen-tapping[data-sightread-phase=results] #sightread-notation{max-height:none}#screen-tapping[data-sightread-phase=results] .sightread-actions{margin-top:0}#screen-tapping.active[data-sightread-phase]{flex-direction:column;grid-template-rows:none;grid-template-columns:none;justify-content:center;align-items:center;gap:0;padding:clamp(36px,6vh,56px) 14px 16px;display:flex}#screen-tapping.active[data-sightread-phase=tapping][data-sightread-measures="1"]{padding-bottom:clamp(60px,14vh,120px)}#screen-tapping.active[data-sightread-phase]{transition:padding-bottom .32s var(--ease-out)}#screen-tapping[data-sightread-phase] .tap-header{transition:gap .3s var(--ease-soft), padding-bottom .3s var(--ease-soft);align-self:center;padding-bottom:clamp(20px,4vh,32px)}#screen-tapping[data-sightread-phase=results] .tap-header{gap:8px;padding-bottom:clamp(28px,5vh,48px)}#screen-tapping[data-sightread-phase] .phase-label{min-height:1.2em}#screen-tapping[data-sightread-phase=results] .phase-label{letter-spacing:-.02em;transition:opacity .3s var(--ease-soft), transform .3s var(--ease-soft);align-items:center;gap:12px;font-size:48px;line-height:1;display:inline-flex}#screen-tapping[data-sightread-phase=tapping] .results-timeline{gap:2px}#screen-tapping[data-sightread-phase=tapping] .sightread-notation .staff-system+.staff-system{margin-top:clamp(-30px,-4.5vh,-24px)}#screen-tapping[data-sightread-phase=tapping] #sightread-notation{transform:translateY(-8px)}#screen-tapping[data-sightread-phase] #sightread-notation{transition:transform .3s var(--ease-soft)}#screen-tapping[data-sightread-phase] .staff{height:88px}#screen-tapping[data-sightread-phase=results] .results-timeline{gap:12px}.mode-switch{font-family:var(--font-sans);color:var(--home-text-secondary);cursor:pointer;letter-spacing:.02em;transition:color var(--dur-fast) var(--ease-soft);white-space:nowrap;background:0 0;border:none;padding:4px 8px;font-size:12px;position:fixed;top:20px;left:20px}.mode-switch:hover{color:var(--home-text)}.home-subtitle{font-family:var(--font-sans);color:var(--home-text-secondary);text-align:center;letter-spacing:.01em;margin:0;font-size:14px}.btn{border-radius:var(--radius-full);font-family:var(--font-sans);cursor:pointer;letter-spacing:.01em;transition:background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);border:1.5px solid #0000;padding:12px 32px;font-size:15px;font-weight:500}.btn:active{transform:scale(.97)}.btn-primary{background:var(--accent);color:var(--text);border-color:var(--accent)}.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn-secondary{color:var(--text);border-color:var(--text-soft);background:0 0}.btn-secondary:hover{background:var(--accent-soft);border-color:var(--accent)}.calibrate-panel .btn-primary{color:#ebf5ee;background:#557473;border-color:#557473}.calibrate-panel .btn-primary:hover{background:#466362;border-color:#466362}#screen-results .btn-primary{color:#ebf5ee;background:#557473;border-color:#557473}#screen-results .btn-primary:hover{background:#466362;border-color:#466362}#screen-results .btn-secondary{border-color:var(--text-soft);color:var(--text-soft);background:0 0}#screen-results .btn-secondary:hover{border-color:var(--text);color:var(--text);background:0 0}.results-buttons{flex-flow:wrap;flex:none;align-items:stretch;gap:12px;width:100%;max-width:300px;margin:0 auto;display:flex}.results-buttons .btn{white-space:nowrap;flex:1;padding:10px 20px}#drill-results-buttons{flex-flow:wrap;align-items:stretch;gap:12px;width:100%;max-width:300px;margin:0 auto;display:flex}#drill-results-buttons .btn{white-space:nowrap;flex:1;padding:10px 20px}#drill-results-buttons[hidden]{display:none}.results-verdict{flex-direction:column;flex:none;align-items:center;gap:8px;display:flex}.result-headline{font-family:var(--font-serif);letter-spacing:-.02em;color:var(--text);align-items:center;gap:12px;font-size:48px;font-weight:700;line-height:1;display:inline-flex}.result-perfect,.result-pass{color:var(--text)}.result-fail{color:var(--coral-600)}.result-icon{font-size:32px;line-height:1}@keyframes icon-wobble{0%{transform:rotate(0)scale(1)}20%{transform:rotate(-12deg)scale(1.2)}45%{transform:rotate(10deg)scale(1.1)}65%{transform:rotate(-6deg)scale(1.05)}80%{transform:rotate(4deg)scale(1)}to{transform:rotate(0)scale(1)}}.is-entering .result-icon{animation:icon-wobble .65s var(--ease-out) both}@keyframes headline-enter{0%{opacity:0;transform:scale(.82)translateY(6px)}to{opacity:1;transform:scale(1)translateY(0)}}.is-entering{animation:headline-enter .42s var(--ease-bounce) both}#screen-tapping[data-sightread-phase=results] .phase-label.is-entering,#screen-tapping[data-sightread-phase=results] .phase-label .result-icon{animation:none}.streak-display{font-family:var(--font-sans);color:var(--text-soft);flex-direction:row;align-items:baseline;gap:6px;font-size:14px;display:inline-flex}.streak-display[hidden]{display:none}.streak-current{color:var(--text);transition:font-size var(--dur-base) var(--ease-out);font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum", "tnum";font-weight:700}.streak-current.milestone-1{font-size:18px}.streak-current.milestone-2{font-size:22px}.streak-current.milestone-3{font-size:26px}.streak-best{color:var(--text-soft);font-size:14px}.results-timeline-wrap{flex-direction:column;flex:0 auto;align-items:stretch;gap:12px;width:100%;max-width:460px;min-height:0;display:flex;position:relative}.results-timeline-wrap:before,.results-timeline-wrap:after{content:"";pointer-events:none;opacity:0;z-index:1;height:80px;transition:opacity .2s;position:absolute;left:0;right:0}.results-timeline-wrap:before{background:linear-gradient(to bottom, var(--bg) 0%, var(--bg) 30%, transparent 100%);top:0}.results-timeline-wrap:after{background:linear-gradient(to top, var(--bg) 0%, var(--bg) 30%, transparent 100%);bottom:0}.results-timeline-wrap.has-overflow-top:before,.results-timeline-wrap.has-overflow-bottom:after{opacity:1}.results-timeline-wrap.has-overflow-bottom{box-shadow:inset 0 -28px 24px -20px #2728381f}.results-timeline-wrap.has-overflow-top{box-shadow:inset 0 28px 24px -20px #2728381f}.results-timeline-wrap.has-overflow-top.has-overflow-bottom{box-shadow:inset 0 28px 24px -20px #2728381f,inset 0 -28px 24px -20px #2728381f}.timeline-more-hint{color:var(--text-soft);pointer-events:none;opacity:0;z-index:2;font-size:22px;line-height:1;transition:opacity .2s;animation:1.6s ease-in-out infinite timeline-more-bob;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.results-timeline-wrap.has-overflow-bottom .timeline-more-hint{opacity:1}@keyframes timeline-more-bob{0%,to{transform:translate(-50%)}50%{transform:translate(-50%,4px)}}.btn-results-play{color:var(--text-soft);font-family:var(--font-sans);cursor:pointer;background:0 0;border:none;justify-content:center;align-self:center;align-items:center;gap:6px;min-width:110px;padding:0 6px;font-size:12px;font-weight:500;display:inline-flex}.btn-results-play.is-playing{color:var(--text-soft)}.btn-results-play[disabled]{opacity:.4;cursor:default}.btn-results-play[hidden]{display:none}.btn-results-play .play-icon{opacity:.72;flex-shrink:0;width:18px;height:18px}.btn-results-play .play-icon-ear{background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M6%208.5C6%206.77609%206.68482%205.12279%207.90381%203.90381C9.12279%202.68482%2010.7761%202%2012.5%202C14.2239%202%2015.8772%202.68482%2017.0962%203.90381C18.3152%205.12279%2019%206.77609%2019%208.5C19%2014.5%2013%2014.5%2013%2018.5C13%2018.9596%2012.9095%2019.4148%2012.7336%2019.8394C12.5577%2020.264%2012.2999%2020.6499%2011.9749%2020.9749C11.6499%2021.2999%2011.264%2021.5577%2010.8394%2021.7336C10.4148%2021.9095%209.95963%2022%209.5%2022C9.04037%2022%208.58525%2021.9095%208.16061%2021.7336C7.73597%2021.5577%207.35013%2021.2999%207.02513%2020.9749C6.70012%2020.6499%206.44231%2020.264%206.26642%2019.8394C6.09053%2019.4148%206%2018.9596%206%2018.5'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M15%208.5C15%207.83696%2014.7366%207.20107%2014.2678%206.73223C13.7989%206.26339%2013.163%206%2012.5%206C11.837%206%2011.2011%206.26339%2010.7322%206.73223C10.2634%207.20107%2010%207.83696%2010%208.5V9.5C10.5304%209.5%2011.0391%209.71071%2011.4142%2010.0858C11.7893%2010.4609%2012%2010.9696%2012%2011.5C12%2012.0304%2011.7893%2012.5391%2011.4142%2012.9142C11.0391%2013.2893%2010.5304%2013.5%2010%2013.5'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M6%208.5C6%206.77609%206.68482%205.12279%207.90381%203.90381C9.12279%202.68482%2010.7761%202%2012.5%202C14.2239%202%2015.8772%202.68482%2017.0962%203.90381C18.3152%205.12279%2019%206.77609%2019%208.5C19%2014.5%2013%2014.5%2013%2018.5C13%2018.9596%2012.9095%2019.4148%2012.7336%2019.8394C12.5577%2020.264%2012.2999%2020.6499%2011.9749%2020.9749C11.6499%2021.2999%2011.264%2021.5577%2010.8394%2021.7336C10.4148%2021.9095%209.95963%2022%209.5%2022C9.04037%2022%208.58525%2021.9095%208.16061%2021.7336C7.73597%2021.5577%207.35013%2021.2999%207.02513%2020.9749C6.70012%2020.6499%206.44231%2020.264%206.26642%2019.8394C6.09053%2019.4148%206%2018.9596%206%2018.5'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M15%208.5C15%207.83696%2014.7366%207.20107%2014.2678%206.73223C13.7989%206.26339%2013.163%206%2012.5%206C11.837%206%2011.2011%206.26339%2010.7322%206.73223C10.2634%207.20107%2010%207.83696%2010%208.5V9.5C10.5304%209.5%2011.0391%209.71071%2011.4142%2010.0858C11.7893%2010.4609%2012%2010.9696%2012%2011.5C12%2012.0304%2011.7893%2012.5391%2011.4142%2012.9142C11.0391%2013.2893%2010.5304%2013.5%2010%2013.5'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e") 50%/contain no-repeat}.btn-results-play .play-icon-stop{background-color:currentColor;display:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='5' width='14' height='14' rx='2'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='5' width='14' height='14' rx='2'/%3E%3C/svg%3E") 50%/contain no-repeat}.btn-results-play:not(.is-playing) .play-icon-ear{display:block}.btn-results-play:not(.is-playing) .play-icon-stop,.btn-results-play.is-playing .play-icon-ear{display:none}.btn-results-play.is-playing .play-icon-stop{display:block}.results-tools-row{flex-direction:row;justify-content:center;align-items:center;gap:10px;width:100%;display:flex}.results-tools-row .btn-results-play{min-width:0;padding:0}.tools-row-dot{color:var(--text-faint);-webkit-user-select:none;user-select:none;font-size:12px;line-height:1}.btn-toggle-subdivisions{font-family:var(--font-sans);color:var(--text-soft);cursor:pointer;letter-spacing:.01em;-webkit-tap-highlight-color:transparent;background:0 0;border:none;outline:none;align-self:center;padding:0;font-size:12px;font-weight:500;text-decoration:none}.btn-toggle-subdivisions:hover,.btn-toggle-subdivisions:focus,.btn-toggle-subdivisions:active{color:var(--text-soft)}.btn-toggle-subdivisions:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}body[data-mode=sightread] .btn-toggle-subdivisions:focus-visible{outline-color:var(--text-soft)}.notation-symbol.is-playing{color:var(--accent-hover);transition:color 80ms ease-out,transform 80ms ease-out;transform:translate(-50%,-50%)scale(1.18)}.results-timeline{overscroll-behavior:contain;scrollbar-width:auto;scrollbar-color:var(--text-faint) transparent;flex-direction:column;flex:auto;align-items:center;gap:16px;width:100%;max-width:460px;min-height:0;padding:0 4px 4px;scroll-padding-top:8px;display:flex;position:relative;overflow:clip}.results-timeline.needs-scroll{overflow-y:auto}.results-timeline::-webkit-scrollbar{width:8px}.results-timeline::-webkit-scrollbar-track{background:0 0}.results-timeline::-webkit-scrollbar-thumb{background:var(--text-faint);border-radius:4px}.staff-system{flex-direction:column;display:flex}.staff{height:100px;margin:0;position:relative}.staff-timesig{color:var(--text);pointer-events:none;justify-content:flex-end;align-items:center;padding-right:8px;display:flex;position:absolute;top:55%;transform:translateY(-50%)}.staff-timesig svg{width:auto;height:44px}.staff-count-label{color:var(--text);font-size:10px;font-weight:600;font-family:var(--font-sans);-webkit-user-select:none;user-select:none;transition:opacity .28s var(--ease-soft);position:absolute;top:5%;transform:translate(-50%)}.staff-count-label-guide{opacity:.35}.staff-count-label-rest{opacity:.45}.notation-symbol{pointer-events:none;flex-direction:column;align-items:center;display:flex;position:absolute;top:55%;transform:translate(-50%,-50%)}.notation-symbol-svg{color:var(--text);display:block}.beam-symbol{color:var(--text);transition:color 80ms ease-out,transform 80ms ease-out;position:absolute;top:55%;transform:translateY(-50%)}.beam-symbol svg{width:auto;height:42px;display:block}.beam-symbol.is-playing{color:var(--accent-hover);transform:translateY(-50%)scale(1.18)}.notation-symbol-svg svg{width:auto;height:42px;display:block}.notation-symbol-whole svg{height:11px}.notehead{background:var(--text);border-radius:50%;flex-shrink:0;width:11px;height:8px;position:relative;transform:rotate(-20deg)}.notehead-open{border:1.5px solid var(--text);background:0 0}.note-stem{background:var(--text);width:1.5px;height:26px;position:absolute;bottom:4px;right:-1px}.note-flag{border-right:1.5px solid var(--text);border-bottom:1.5px solid var(--text);border-radius:0 0 7px;width:8px;height:11px;position:absolute;top:0;right:-1px}.note-flag-2{top:5px}.aug-dot{background:var(--text);border-radius:50%;width:3px;height:3px;position:absolute;top:50%;right:-8px;transform:translateY(-50%)rotate(20deg)}.rest-symbol{pointer-events:none;color:var(--text);align-items:center;gap:2px;display:flex;position:absolute;top:55%;transform:translate(-50%,-50%)}.rest-symbol svg{display:block}.rest-symbol .aug-dot{position:relative;top:auto;right:auto;transform:none}.rest-symbol.rest-svg{width:32px;height:32px;color:var(--text);justify-content:center;align-items:center;display:flex}.rest-symbol.rest-svg svg{width:100%;height:100%;display:block}.notehead{transition:background-color .1s var(--ease-out), border-color .1s var(--ease-out), opacity .15s var(--ease-out)}@keyframes notehead-tap-punch{0%{transform:scale(1)}35%{transform:scale(1.22)}to{transform:scale(1)}}.note-just-tapped{animation:notehead-tap-punch .2s var(--ease-out) both}@media (prefers-reduced-motion:reduce){.note-just-tapped{animation:none}.notehead{transition:none}}.staff-feedback-row{width:100%;height:36px;margin-top:-6px;position:relative}.staff-feedback{pointer-events:none;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:4px;display:flex;position:absolute;top:0;transform:translate(-50%)}.staff-feedback:before{content:"";width:14px;height:3px;transition:background-color .12s var(--ease-soft);background:0 0;border-radius:1.5px;flex-shrink:0;display:block}.staff-feedback.rating-perfect:before{background:var(--hit-perfect)}.staff-feedback.rating-good:before{background:var(--hit-good)}.staff-feedback.rating-miss:before{background:var(--coral-600)}.staff-feedback-label{font-family:var(--font-sans);font-variant-numeric:tabular-nums;white-space:nowrap;opacity:0;transition:opacity .16s var(--ease-soft);justify-content:center;align-items:center;height:13px;font-size:11px;font-weight:600;line-height:1;display:flex}.staff-feedback.has-label .staff-feedback-label{opacity:1}.staff-feedback.rating-perfect .staff-feedback-label,.staff-feedback.rating-miss .staff-feedback-label{font-size:13px;font-weight:700}.staff-feedback.rating-good .staff-feedback-label{transform-origin:100% 0;font-size:10px;font-weight:500;transform:translate(-50%)rotate(-45deg)}.staff-feedback.rating-perfect .staff-feedback-label{color:var(--hit-perfect)}.staff-feedback.rating-good .staff-feedback-label{color:var(--text-soft)}.staff-feedback.rating-miss .staff-feedback-label{color:var(--coral-600)}.notation-symbol.active .notehead{background:var(--accent);border-color:var(--accent)}.notation-symbol.active .note-stem{background:var(--accent)}.notation-symbol.active .note-flag{border-right-color:var(--accent);border-bottom-color:var(--accent)}@keyframes fade-in-up{0%{opacity:0}to{opacity:1}}.results-buttons .btn-primary,#drill-results-buttons .btn-primary,.sightread-actions .btn-primary{order:1}.results-buttons .btn-secondary,#drill-results-buttons .btn-secondary,.sightread-actions .btn-secondary{order:0}.results-buttons .recalibrate-link,#drill-results-buttons .recalibrate-link,.sightread-actions .recalibrate-link{text-align:center;flex-basis:100%;order:2;margin-top:0;padding:.5rem 0}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.rt-error-toast{z-index:9999;background:var(--coral-600,#b94040);color:#fff;text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;padding:1rem 1.5rem;font-size:.95rem;position:fixed;bottom:0;left:0;right:0}.rt-storage-warn{z-index:9998;background:var(--text-soft,#888);color:#fff;border-radius:var(--radius-md,8px);pointer-events:none;white-space:nowrap;padding:.6rem 1.2rem;font-size:.85rem;position:fixed;bottom:1rem;left:50%;transform:translate(-50%)}.rt-volume-hint{top:calc(max(20px, env(safe-area-inset-top)) + 44px);z-index:19;background:var(--bg,#ebf5ee);color:var(--text,#272838);font-family:var(--font-serif);border-radius:var(--radius-md,12px);border:1.5px solid var(--text-faint,#27283826);-webkit-user-select:none;user-select:none;animation:rt-volume-hint-in .35s var(--ease-out,cubic-bezier(.22, 1, .36, 1));align-items:center;gap:.6rem;padding:.65rem 1rem;font-size:.82rem;line-height:1.35;display:flex;position:fixed;left:1rem;right:1rem}.rt-volume-hint svg{color:var(--sage-900,#557473);flex-shrink:0}.rt-volume-hint-dismiss{color:var(--text-soft,#27283899);font-family:var(--font-serif);cursor:pointer;background:0 0;border:none;flex-shrink:0;margin-left:auto;padding:0;font-size:.78rem}@keyframes rt-volume-hint-in{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}body[data-mode=sightread] .rt-volume-hint{background:var(--sightread-bg,#fff);color:var(--sightread-primary,#1c1c1e);border-color:#1c1c1e26}body[data-mode=sightread] .rt-volume-hint svg{color:#1c1c1e8c}body[data-mode=sightread] .rt-volume-hint-dismiss{color:#1c1c1e73}#calibrate-overlay{z-index:1099}.calibrate-panel{z-index:1100;color:#3a4a3e;border-radius:var(--radius-lg,16px);background:#f5f7f3;flex-direction:column;gap:1rem;width:min(480px,100vw - 2rem);max-height:90dvh;padding:2rem 1.75rem 1.5rem;display:flex;position:fixed;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%)}.calibrate-panel .grade-panel-title{margin-bottom:0}.calibrate-panel[hidden]{display:none}.calibrate-instructions{color:#5a6e62;margin:0;font-size:.9rem;line-height:1.5}.calibrate-status{color:#5a6e62;text-align:center;margin:0;font-size:.9rem}.calibrate-panel[data-cal-state=countdown] .calibrate-status{text-align:center;color:#3a4a3e;letter-spacing:.02em;padding:1.5rem 0;font-size:3rem;font-weight:700;display:block}.calibrate-status-label{color:#4a7c59;margin:-.25rem 0 0;font-size:.85rem;font-weight:600}.recalibrate-link{color:var(--text-soft,#7a8a7e);cursor:pointer;text-underline-offset:2px;background:0 0;border:none;margin-top:.5rem;padding:.5rem .75rem;font-family:inherit;font-size:.8rem;text-decoration:underline}.recalibrate-link:hover{color:var(--text,#3a4a3e)}.calibrate-tap-btn{letter-spacing:.05em;background:var(--sage-900,#557473);color:#fff;border-radius:var(--radius-md,10px);cursor:pointer;touch-action:manipulation;border:none;width:100%;padding:1.25rem;font-size:1.4rem;font-weight:700;transition:transform 80ms,opacity 80ms}.calibrate-tap-btn:active,.calibrate-tap-btn.is-tapped{opacity:.85;transform:scale(.95)}.calibrate-result{text-align:center;margin:0;padding:1.5rem 0}.calibrate-result-text{color:#3a4a3e;margin:0;font-size:1.05rem;font-weight:500}.calibrate-result[hidden],.calibrate-panel[data-cal-state=result] .calibrate-status{display:none}.calibrate-actions{flex-wrap:wrap;gap:.75rem;display:flex}.calibrate-actions[hidden]{display:none}.calibrate-actions .btn{flex:1}.calibrate-panel[data-cal-state=tapping] .calibrate-status{display:none}.calibrate-panel[data-cal-state=tapping] .calibrate-tap-btn{margin-top:.5rem;margin-bottom:.5rem}.tap-area-hint-space{text-align:center;color:var(--text-faint);letter-spacing:.02em;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap;font-size:13px;display:block}.tap-area-hint-space kbd{font-family:var(--font-sans,ui-monospace, monospace);letter-spacing:.08em;border:1px solid var(--text-faint);color:var(--text-faint);background:0 0;border-radius:4px;padding:1px 5px;font-size:11px;font-weight:600}@media (hover:none) and (pointer:coarse){.tap-area-hint-space{display:none}}.mic-hint{color:var(--text-soft);cursor:pointer;letter-spacing:.01em;text-align:center;touch-action:manipulation;white-space:nowrap;background:0 0;border:none;justify-content:center;align-items:center;gap:5px;padding:6px 10px;font-family:inherit;font-size:13px;transition:color .18s;display:none}.mic-hint:hover{color:var(--text-soft)}.mic-hint-icon{width:14px;height:14px;color:inherit;flex-shrink:0}@media (hover:none) and (pointer:coarse){.mic-hint:not([hidden]){display:inline-flex}}@keyframes eq-idle{0%,to{transform:scaleY(.33)}50%{transform:scaleY(var(--eq-scale-peak))}}@keyframes mic-breathe{0%,to{opacity:1}50%{opacity:.82}}@keyframes eq-clap{0%{transform:scaleY(1)}12%{transform:scaleY(1.85)}50%{transform:scaleY(1.05)}to{transform:scaleY(1)}}.mic-indicator{width:200px;height:200px;color:var(--accent);isolation:isolate;background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, color-mix(in srgb, var(--accent) 3%, transparent) 60%);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}#mic-indicator-echo{background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, color-mix(in srgb, var(--accent) 5%, transparent) 60%)}.mic-indicator[hidden]{display:none}.eq-bars{align-items:center;gap:5px;height:100px;display:flex}.eq-bar{background:color-mix(in srgb, var(--accent) 60%, transparent);transform-origin:50%;will-change:transform;border-radius:2.5px;width:5px;height:54px;animation:2s ease-in-out infinite eq-idle;display:block}.eq-bar:first-child{--eq-scale-peak:.52;animation-delay:0s}.eq-bar:nth-child(2){--eq-scale-peak:.74;animation-delay:-.3s}.eq-bar:nth-child(3){--eq-scale-peak:.93;animation-delay:-.6s}.eq-bar:nth-child(4){--eq-scale-peak:1;animation-delay:-.9s}.eq-bar:nth-child(5){--eq-scale-peak:.89;animation-delay:-1.2s}.eq-bar:nth-child(6){--eq-scale-peak:.67;animation-delay:-1.5s}.eq-bar:nth-child(7){--eq-scale-peak:.48;animation-delay:-1.8s}.mic-indicator.is-clap .eq-bars{animation:.42s ease-out eq-clap}.mic-indicator-sightread{align-self:center;width:clamp(160px,44vw,200px);height:clamp(160px,44vw,200px);animation:2.8s ease-in-out infinite mic-breathe}.tap-area.mic-active .tap-rings{display:none}.tap-area-wrap:has(.tap-area.mic-active) .tap-area-hint-space{display:none}.sightread-stage.mic-active #sightread-drum{visibility:hidden;pointer-events:none}.sightread-stage.mic-active #sightread-drum .mic-indicator{visibility:visible;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}