.practice-page{max-width:800px;margin:0 auto;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;text-align:center}h1{font-size:1.6rem;margin-bottom:24px;color:#333}.difficulty-selector{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:20px}.difficulty-btn{padding:6px 14px;border:1px solid #ccc;border-radius:6px;background:#f8f8f8;cursor:pointer;font-size:.85rem;transition:all .15s}.difficulty-btn:hover{background:#e8e8e8}.difficulty-btn.active{background:#4a90d9;color:#fff;border-color:#4a90d9}.staff-container{background:#fafafa;border:1px solid #ddd;border-radius:8px;padding:10px;margin-bottom:16px;min-height:180px;display:flex;align-items:center;justify-content:center}.staff-container svg{display:block;margin:0 auto}.staff-container.flash-correct{background:#d4edda;transition:background .1s}.staff-container.flash-incorrect{background:#f8d7da;transition:background .1s}.stats-bar{display:flex;gap:16px;justify-content:center;font-size:.95rem;margin-bottom:12px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.stats-bar span{font-weight:600}.stats-correct{color:#27ae60}.stats-wrong{color:#e74c3c}.stats-pct{color:#2c3e50;background:#ecf0f1;padding:0 8px;border-radius:4px}.piano-row{position:relative;height:160px;width:364px}.white-key{position:absolute;top:0;width:52px;height:160px;border:1px solid #888;border-left:none;box-sizing:border-box;background:#fff;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;font-size:.75rem;color:#666;transition:background .08s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.white-key[data-note=C]{left:0;border-left:1px solid #888}.white-key[data-note=D]{left:52px}.white-key[data-note=E]{left:104px}.white-key[data-note=F]{left:156px;border-left:1px solid #888}.white-key[data-note=G]{left:208px}.white-key[data-note=A]{left:260px}.white-key[data-note=B]{left:312px;border-right:1px solid #888}.white-key.pressed,.white-key:active{background:#ddf0ff}.white-key.correct-hit{background:#b8f0c0}.white-key.incorrect-hit{background:#f5b8b8}.black-key{position:absolute;top:0;width:34px;height:100px;box-sizing:border-box;background:#222;border:1px solid #111;border-radius:0 0 4px 4px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;font-size:.65rem;color:#ccc;transition:background .08s;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:2}.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.pressed,.black-key:active{background:#555}.black-key.correct-hit{background:#2e7d32}.black-key.incorrect-hit{background:#b71c1c}.diff-info{font-size:.9rem;color:#555;margin-bottom:16px;padding:6px 14px;background:#f8f8f8;border-radius:6px;display:inline-block}.custom-ctl{margin:0 auto 16px;padding:8px 14px;background:#f8f8f8;border-radius:8px;text-align:left;font-size:.85rem;width:-moz-fit-content;width:fit-content}.ctl-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}.ctl-row:last-child{margin-bottom:0}.ctl-label{font-weight:600;color:#555;flex-shrink:0;min-width:64px}.ctl-row select{padding:2px 6px;border:1px solid #ccc;border-radius:4px;font-size:.85rem;background:#fff}.rl{font-weight:600;color:#333;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;min-width:32px;text-align:center}.rl,.toggle{flex-shrink:0}.toggle{position:relative;display:inline-block;width:32px;height:18px;cursor:pointer}.toggle input{opacity:0;width:0;height:0}.toggle span{inset:0;background:#ccc;border-radius:18px}.toggle span,.toggle span:before{position:absolute;transition:.25s}.toggle span:before{content:"";left:2px;top:2px;width:14px;height:14px;background:#fff;border-radius:50%}.toggle input:checked+span{background:#4a90d9}.toggle input:checked+span:before{transform:translateX(14px)}@media (max-width:640px){.piano-row{width:280px;height:120px}.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}}