:root{--fg:222 47% 11%;--muted:215 16% 42%;--border:214 32% 91%;--surface:210 40% 97%;--surface-hover:210 40% 94%;--primary:217 91% 50%;--primary-hover:221 83% 53%;--primary-fg:0 0% 100%;--correct:142 71% 35%;--incorrect:0 84% 60%;--correct-text:142 71% 28%;--incorrect-text:0 74% 45%;--correct-tint:141 84% 93%;--correct-lite:142 71% 66%;--incorrect-tint:6 100% 94%;--radius-sm:6px;--radius-md:10px;--shadow-1:0 1px 2px #0000000a, 0 2px 4px #0000000d;--shadow-2:0 1px 2px #0000000a, 0 2px 4px #0000000d, 0 6px 16px #00000012;--ease-out:cubic-bezier(.23, 1, .32, 1)}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}.practice-page{text-align:center;max-width:800px;color:hsl(var(--fg));margin:0 auto;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}h1{color:hsl(var(--fg));text-wrap:balance;letter-spacing:-.01em;margin-bottom:4px;font-size:1.6rem}.subtitle{color:hsl(var(--muted));text-wrap:balance;margin:0 0 20px;font-size:.95rem}.help-btn{border:1px solid hsl(var(--border));width:28px;height:28px;color:hsl(var(--muted));cursor:pointer;transition:background .15s var(--ease-out), color .15s var(--ease-out);background:0 0;border-radius:50%;place-items:center;font-size:14px;display:grid;position:relative}.help-btn:hover,.hint-btn:hover{background:hsl(var(--surface-hover));color:hsl(var(--fg))}.help-btn:active,.hint-btn:active{transform:scale(.95)}.help-btn:before,.hint-btn:before{content:"";position:absolute;inset:-8px}.hint-btn{border:1px solid hsl(var(--border));height:28px;color:hsl(var(--muted));cursor:pointer;transition:background .15s var(--ease-out), color .15s var(--ease-out);background:0 0;border-radius:999px;place-items:center;padding:0 12px;font-size:.85rem;font-weight:500;display:grid;position:relative}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:focus-visible{outline:2px solid hsl(var(--primary));outline-offset:2px}.difficulty-btn,.help-btn,.hint-btn,.modal-close{font-family:inherit}.difficulty-selector{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:20px;display:flex}.difficulty-btn,.mic-cal-btn{border:1px solid hsl(var(--border));border-radius:var(--radius-sm);cursor:pointer;min-height:44px;transition:background-color .15s var(--ease-out), color .15s var(--ease-out), border-color .15s var(--ease-out), box-shadow .15s var(--ease-out), transform .1s var(--ease-out);font-weight:500}.difficulty-btn{background:hsl(var(--surface));padding:6px 16px;font-size:.875rem}.difficulty-btn:hover{background:hsl(var(--surface-hover))}.difficulty-btn:active,.mic-cal-btn:active{transform:scale(.97)}.difficulty-btn.active,.mic-cal-btn.calibrated{background:hsl(var(--primary));color:hsl(var(--primary-fg));border-color:hsl(var(--primary));box-shadow:var(--shadow-2)}.difficulty-btn.active:hover,.mic-cal-btn.calibrated:hover{background:hsl(var(--primary-hover));border-color:hsl(var(--primary-hover))}.staff-wrap{margin-bottom:16px;position:relative}.staff-container{background:hsl(var(--surface));border:1px solid hsl(var(--border));border-radius:var(--radius-md);min-height:270px;box-shadow:var(--shadow-1);transition:background-color .15s var(--ease-out);justify-content:center;align-items:center;padding:15px;display:flex}.staff-container svg{display:block;transform:none;width:100%!important;height:auto!important}.staff-container.flash-correct{background:hsl(var(--correct-tint))}.staff-container.flash-incorrect{background:hsl(var(--incorrect-tint))}.flash-msg{white-space:nowrap;opacity:0;transition:opacity .15s var(--ease-out);pointer-events:none;border-radius:999px;padding:5px 16px;font-size:1rem;font-weight:600;position:absolute;top:100%;left:50%;transform:translate(-50%,-120%);box-shadow:0 1px 2px #0000001f,0 2px 6px #0000001f}.flash-msg.correct{background:hsl(var(--correct) / .92);color:hsl(var(--primary-fg))}.flash-msg.incorrect{background:hsl(var(--incorrect) / .92);color:hsl(var(--primary-fg))}.flash-msg.visible{opacity:1}@keyframes note-fade{0%{fill:#000;stroke:#000}to{fill:hsl(var(--correct));stroke:hsl(var(--correct))}}.staff-container svg g.vf-stavenote.note-fresh{animation:note-fade .18s var(--ease-out)}@keyframes note-wrong{0%{fill:#000;stroke:#000}25%{fill:hsl(var(--incorrect));stroke:hsl(var(--incorrect))}75%{fill:hsl(var(--incorrect));stroke:hsl(var(--incorrect))}to{fill:#000;stroke:#000}}.staff-container svg g.vf-stavenote.note-wrong{animation:note-wrong .5s var(--ease-out)}.stats-line{justify-content:center;align-items:center;gap:12px;margin-bottom:12px;display:flex}.stats-bar{font-variant-numeric:tabular-nums;justify-content:center;align-items:baseline;gap:6px;font-size:.95rem;display:flex}.stats-bar span{font-weight:600}.stats-sep{color:hsl(var(--muted));font-weight:400}.stats-correct{color:hsl(var(--correct-text))}.stats-wrong{color:hsl(var(--incorrect-text))}.piano-row{width:364px;height:160px;position:relative}.piano-row.extended{width:728px}.piano-octave{float:left;width:364px;height:160px;position:relative}.piano-wrap{-webkit-overflow-scrolling:touch;overflow-x:auto}.white-key{box-sizing:border-box;cursor:pointer;width:52px;height:160px;color:hsl(var(--muted));-webkit-user-select:none;user-select:none;background:linear-gradient(#fff 0%,#fdfdfd 45%,#f1f1f1 100%);border:none;border-radius:0 0 4px 4px;justify-content:center;align-items:flex-end;padding:0 0 10px;font-family:inherit;font-size:.8rem;line-height:1;transition:background-color 80ms,box-shadow 80ms;display:flex;position:absolute;top:0;box-shadow:inset 0 0 0 1px #0000000f,inset -1px 0 #00000024,inset 0 3px 4px -2px #fffffff2,inset 0 -5px 8px -2px #00000012,0 1px 2px #0000002e}.white-key[data-note=C]{left:0}.white-key[data-note=D]{left:52px}.white-key[data-note=E]{left:104px}.white-key[data-note=F]{left:156px}.white-key[data-note=G]{left:208px}.white-key[data-note=A]{left:260px}.white-key[data-note=B]{left:312px}.white-key:active,.white-key.pressed{background:linear-gradient(#ececec 0%,#e4e4e4 100%);box-shadow:inset 0 0 0 1px #00000014,inset -1px 0 #00000024,inset 0 2px 4px #00000024,inset 0 -2px 3px #0000000d,0 1px 1px #00000026}.white-key.hint-hit,.black-key.hint-hit,.piano-row.extended .piano-octave:nth-child(2) .white-key.hint-hit,.piano-row.extended .piano-octave:nth-child(2) .black-key.hint-hit{background:hsl(var(--correct-lite));animation:hint-pulse .8s var(--ease-out)}@keyframes hint-pulse{0%{filter:brightness()}35%{filter:brightness(1.2)}to{filter:brightness()}}.piano-row.extended .piano-octave:nth-child(2) .white-key{background:linear-gradient(#f6f6f6 0%,#e9e9e9 100%)}.piano-row.extended .piano-octave:nth-child(2) .black-key{background:linear-gradient(#555 0%,#2a2a2a 100%)}.black-key{box-sizing:border-box;cursor:pointer;color:#ccc;-webkit-user-select:none;user-select:none;z-index:2;background:linear-gradient(#7a7a7a 0%,#2e2e2e 16%,#151515 55%,#0c0c0c 100%);border:none;border-radius:0 0 3px 3px;justify-content:center;align-items:flex-end;width:34px;height:100px;padding:0 0 6px;font-family:inherit;font-size:.7rem;line-height:1;transition:background-color 80ms,box-shadow 80ms;display:flex;position:absolute;top:0;box-shadow:inset 0 1px #ffffff38,inset 0 -2px 3px #0000008c,0 3px 6px #00000059,0 1px 2px #0000004d}.black-key[data-note=C\#]{left:35px}.black-key[data-note=D\#]{left:87px}.black-key[data-note=F\#]{left:191px}.black-key[data-note=G\#]{left:243px}.black-key[data-note=A\#]{left:295px}.black-key:active,.black-key.pressed{background:linear-gradient(#3a3a3a 0%,#191919 60%,#111 100%);box-shadow:inset 0 2px 3px #00000080,inset 0 -1px 2px #0006,0 1px 2px #0000004d}.black-key.correct-hit{background:hsl(var(--correct))}.black-key.incorrect-hit{background:hsl(var(--incorrect))}.diff-info{color:hsl(var(--muted));background:hsl(var(--surface));border-radius:var(--radius-sm);box-shadow:var(--shadow-1);font-variant-numeric:tabular-nums;margin-bottom:16px;padding:8px 16px;font-size:.9rem;display:inline-block}.custom-ctl{background:hsl(var(--surface));border-radius:var(--radius-md);box-shadow:var(--shadow-1);text-align:left;width:fit-content;margin:0 auto 16px;padding:12px 16px;font-size:.875rem}.ctl-row{align-items:center;gap:8px;margin-bottom:6px;display:flex}.ctl-row:last-child{margin-bottom:0}.ctl-label{color:hsl(var(--muted));flex-shrink:0;min-width:64px;font-weight:600}.ctl-label+.toggle+.ctl-label{margin-left:auto}.rs{flex:1;min-width:200px;padding:0 0 2px}.rs-labels{font-variant-numeric:tabular-nums;height:13px;position:relative}.rs-thumb-label{color:hsl(var(--fg));font-size:.75rem;font-weight:600;line-height:1;position:absolute;transform:translate(-50%)}.rs-track{cursor:pointer;touch-action:none;height:18px;position:relative}.rs-track:before{content:"";background:hsl(var(--border));border-radius:2px;height:3px;position:absolute;top:8px;left:0;right:0}.rs-fill{background:hsl(var(--primary));border-radius:2px;height:3px;position:absolute;top:8px}.rs-tick{background:hsl(var(--border));pointer-events:none;border-radius:50%;width:5px;height:5px;position:absolute;top:7px;transform:translate(-50%)}.rs-tick.on{background:hsl(var(--primary))}.rs-thumb{border:2px solid hsl(var(--primary));box-sizing:border-box;cursor:grab;background:#fff;border-radius:50%;width:14px;height:14px;position:absolute;top:1px}.rs-thumb:active{cursor:grabbing}.rs-thumb:before{content:"";position:absolute;inset:-5px}.rs-ends{color:hsl(var(--muted));font-variant-numeric:tabular-nums;justify-content:space-between;font-size:.72rem;line-height:1;display:flex}.toggle{cursor:pointer;flex-shrink:0;width:32px;height:18px;display:inline-block;position:relative}.toggle:after{content:"";position:absolute;inset:-13px}.toggle input{opacity:0;width:0;height:0}.toggle span{background:hsl(var(--border));transition:background-color .25s var(--ease-out);border-radius:18px;position:absolute;inset:0}.toggle span:before{content:"";width:14px;height:14px;transition:transform .25s var(--ease-out);background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #0003}.toggle input:checked+span{background:hsl(var(--primary))}.toggle input:checked+span:before{transform:translate(14px)}.toggle input:disabled+span{opacity:.5;cursor:not-allowed}.toggle input:focus-visible+span{outline:2px solid hsl(var(--primary));outline-offset:2px}.option-bar{justify-content:center;align-items:center;gap:24px;margin-bottom:10px;display:flex}.opt-item{color:hsl(var(--muted));cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;font-size:.875rem;display:flex}.mic-meter{box-sizing:border-box;background:hsl(var(--surface));border:1px solid hsl(var(--border));border-radius:var(--radius-md);max-width:538px;box-shadow:var(--shadow-1);align-items:center;gap:8px;margin:0 auto 10px;padding:8px 12px;font-size:.875rem;display:flex}.mic-label{color:hsl(var(--muted));flex-shrink:0;font-weight:600}.mic-bar{background:hsl(var(--border));touch-action:none;border-radius:999px;flex:1;height:8px;position:relative}.mic-bar-clip{border-radius:999px;position:absolute;inset:0;overflow:hidden}.mic-bar-fill{background:hsl(var(--primary));border-radius:999px;width:100%;height:100%;transition:transform 60ms linear,background 60ms linear;transform:translate(-100%)}.mic-bar-fill.muted{background:hsl(var(--muted))}.mic-bar-threshold{background:hsl(var(--muted));cursor:ew-resize;border-radius:999px;width:5px;margin-left:-2.5px;position:absolute;top:-6px;bottom:-6px;box-shadow:0 0 0 1px #fff}.mic-bar-threshold:before{content:"";width:24px;height:24px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.mic-note{text-align:right;font-variant-numeric:tabular-nums;min-width:36px;color:hsl(var(--fg));flex-shrink:0;font-weight:600}.mic-note.idle{color:hsl(var(--muted));font-weight:500}.mic-note.error{color:hsl(var(--incorrect-text))}.mic-cal-btn{background:hsl(var(--surface-hover));font:inherit;font-variant-numeric:tabular-nums;flex-shrink:0;padding:0 10px;font-size:.8rem;font-weight:500}.mic-cal-btn:hover{background:hsl(var(--surface));border-color:hsl(var(--primary))}.site-footer{border-top:1px solid hsl(var(--border));color:hsl(var(--muted));flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:32px;padding-top:16px;font-size:.8rem;display:flex}.site-footer a{color:hsl(var(--muted));text-underline-offset:2px;transition:color .15s var(--ease-out);text-decoration:underline}.site-footer a:hover{color:hsl(var(--primary-hover))}.modal-overlay{background:hsl(var(--fg) / .45);z-index:1000;animation:modalFade .2s var(--ease-out);justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.modal{background:hsl(var(--surface));border-radius:var(--radius-md);width:100%;max-width:560px;max-height:min(80vh,720px);animation:modalPop .2s var(--ease-out);outline:none;flex-direction:column;display:flex;box-shadow:0 1px 2px #0000000f,0 8px 24px #0000002e,0 24px 64px #00000038}.modal-header{justify-content:space-between;align-items:center;gap:16px;padding:16px 20px 12px;display:flex}.modal-header h2{text-wrap:balance;margin:0;font-size:18px}.modal-close{border-radius:var(--radius-sm);width:44px;height:44px;color:hsl(var(--muted));cursor:pointer;transition:background .15s var(--ease-out), color .15s var(--ease-out);background:0 0;border:none;place-items:center;font-size:16px;display:grid}.modal-close:hover{background:hsl(var(--surface-hover));color:hsl(var(--fg))}.modal-close:active{transform:scale(.95)}.notes-body{color:hsl(var(--fg));text-align:left;flex:1;padding:4px 20px 16px;font-size:13.5px;line-height:1.5;overflow-y:auto}.notes-body h3{text-wrap:balance;margin:20px 0 8px;font-size:15px}.notes-body h4{color:hsl(var(--primary-hover));text-wrap:balance;margin:16px 0 8px;font-size:13px}.notes-body ul{margin:0 0 8px;padding-left:20px}.notes-body li{text-wrap:pretty;margin:4px 0}.notes-body p{text-wrap:pretty;margin:0 0 8px}.notes-body hr{border:none;border-top:1px solid hsl(var(--border));margin:16px 0}.modal-footer{border-top:1px solid hsl(var(--border));padding:12px 20px 16px}.modal-footer a{border-radius:var(--radius-sm);background:hsl(var(--primary));min-height:34px;color:hsl(var(--primary-fg));transition:background .15s var(--ease-out);justify-content:center;align-items:center;padding:0 14px;font-size:13px;font-weight:600;text-decoration:none;display:inline-flex;position:relative}.modal-footer a:before{content:"";position:absolute;inset:-5px}.modal-footer a:hover{background:hsl(var(--primary-hover))}.modal-footer a:active{transform:scale(.97)}@keyframes modalFade{0%{opacity:0}}@keyframes modalPop{0%{opacity:0;transform:scale(.95)}}.cal-body{text-align:left;flex:1;min-height:0;padding:4px 20px 16px;overflow-y:auto}.cal-hint{color:hsl(var(--muted));text-wrap:pretty;margin:0 0 16px;font-size:13.5px;line-height:1.5}.cal-readout{letter-spacing:-.01em;text-align:center;color:hsl(var(--fg));font-variant-numeric:tabular-nums;margin:0 0 4px;font-size:2rem;font-weight:700}.cal-readout.held{color:hsl(var(--muted))}.cal-status{text-align:center;color:hsl(var(--muted));font-variant-numeric:tabular-nums;margin:0 0 12px;font-size:13px}.cal-status.warn{color:hsl(var(--incorrect-text))}.cal-current{text-align:center;color:hsl(var(--muted));font-variant-numeric:tabular-nums;margin:0;font-size:12.5px}.cal-footer{justify-content:flex-end;gap:8px;display:flex}.btn-primary,.btn-secondary{border-radius:var(--radius-sm);cursor:pointer;min-height:34px;transition:background .15s var(--ease-out), color .15s var(--ease-out), transform .1s var(--ease-out);justify-content:center;align-items:center;padding:0 14px;font-family:inherit;font-size:13px;font-weight:600;display:inline-flex;position:relative}.btn-primary{background:hsl(var(--primary));color:hsl(var(--primary-fg));border:none}.btn-primary:hover{background:hsl(var(--primary-hover))}.btn-primary:disabled{opacity:.5;pointer-events:none}.btn-secondary{color:hsl(var(--muted));border:1px solid hsl(var(--border));background:0 0}.btn-secondary:hover{background:hsl(var(--surface-hover));color:hsl(var(--fg))}.btn-primary:active,.btn-secondary:active{transform:scale(.97)}.btn-primary:before,.btn-secondary:before{content:"";position:absolute;inset:-5px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media (max-width:640px){.piano-row{width:280px;height:120px}.piano-row.extended{width:560px}.piano-octave{width:280px;height:120px}.staff-container{min-height:200px;padding:10px}.white-key{width:40px;height:120px;font-size:.6rem}.white-key[data-note=C]{left:0}.white-key[data-note=D]{left:40px}.white-key[data-note=E]{left:80px}.white-key[data-note=F]{left:120px}.white-key[data-note=G]{left:160px}.white-key[data-note=A]{left:200px}.white-key[data-note=B]{left:240px}.black-key{width:26px;height:76px;font-size:.5rem}.black-key[data-note=C\#]{left:27px}.black-key[data-note=D\#]{left:67px}.black-key[data-note=F\#]{left:147px}.black-key[data-note=G\#]{left:187px}.black-key[data-note=A\#]{left:227px}.opt-item{white-space:nowrap}.mic-meter{gap:6px}.mic-note{min-width:48px}.mic-cal-btn{padding:0 8px}}@media (max-width:640px),(orientation:landscape) and (min-width:640px) and (max-height:600px),(orientation:landscape) and (min-width:640px) and (hover:none) and (pointer:coarse){.option-bar{grid-template-columns:repeat(2,1fr);gap:2px 12px;width:100%;max-width:320px;margin:0 auto 10px;display:grid}.opt-item{justify-content:space-between;min-height:40px}}@media (orientation:landscape) and (min-width:640px) and (max-height:600px),(orientation:landscape) and (min-width:640px) and (hover:none) and (pointer:coarse){.practice-page{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"title title""sub sub""diff diff""info info""staff right""footer footer";align-items:start;gap:10px 24px;max-width:1100px;padding:12px 20px;display:grid}h1{grid-area:title;margin-bottom:0}.subtitle{grid-area:sub;margin-bottom:0}.difficulty-selector{grid-area:diff;margin-bottom:0}.custom-ctl,.diff-info{grid-area:info;justify-self:center;margin-bottom:0}.staff-wrap{grid-area:staff;margin-bottom:0}.staff-container{padding:10px}.piano-wrap{width:100%}.landscape-right{flex-direction:column;grid-area:right;align-items:center;gap:10px;min-width:0;display:flex}.stats-line{margin-bottom:0}.mic-meter{width:100%;max-width:none;margin-bottom:0}.option-bar{margin-bottom:0}.opt-item{white-space:nowrap}.site-footer{grid-area:footer;margin-top:12px}}@media (orientation:landscape) and (min-width:641px) and (max-width:791px) and (max-height:600px){.piano-row{zoom:.77}}