:root{--text:#37413b;--bg:#f2f5ef;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font:16px/1.5 system-ui,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{background:linear-gradient(90deg, #ffffffa6 1px, transparent 1px), linear-gradient(#ffffffa6 1px, transparent 1px), var(--bg);background-size:28px 28px;min-width:320px;margin:0}button,input,select{font:inherit}button:focus-visible,input:focus-visible,select:focus-visible{outline-offset:2px;outline:3px solid #476b3d59}#root{min-height:100svh}.app-shell{box-sizing:border-box;width:min(1120px,100%);min-height:100svh;margin:0 auto;padding:32px}.app-header{justify-content:space-between;align-items:flex-start;gap:24px;padding:20px 0 28px;display:flex}.eyebrow{color:#5f6f52;letter-spacing:0;text-transform:uppercase;margin:0 0 6px;font-size:13px;font-weight:700}.app-header h1,.result-panel h1{color:#1f2522;letter-spacing:0;margin:0;font-size:38px;line-height:1.12}.progress-pill{color:#1f2522;text-align:center;background:#fff;border:1px solid #d7ddd4;border-radius:8px;flex:none;min-width:92px;padding:10px 14px;font-weight:700}.quiz-layout{grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:24px;display:grid}.quiz-main,.settings-panel,.result-panel{background:#fff;border:1px solid #d7ddd4;border-radius:8px;box-shadow:0 10px 30px #1a211d12}.quiz-main{gap:18px;padding:26px;display:grid}.staff{background:#fbfcfa;border:1px solid #dde4dc;border-radius:8px;margin:0;overflow:hidden}.staff svg{width:100%;height:auto;display:block}.staff-line,.ledger-line{stroke:#1f2522;stroke-width:2px;stroke-linecap:round}.clef{fill:#1f2522;font-family:Georgia,Times New Roman,serif;font-size:84px}.note-head{fill:#1f2522}.note-stem{stroke:#1f2522;stroke-width:3px;stroke-linecap:round}.feedback{color:#37413b;min-height:28px;margin:0;font-weight:700}.feedback.correct{color:#1f7a45}.feedback.wrong{color:#b83b3b}.keyboard-wrap{padding:4px 2px 12px;overflow-x:auto}.keyboard{--white-key-width:60px;width:max(100%, calc(var(--white-key-count) * var(--white-key-width)));min-width:calc(var(--white-key-count) * var(--white-key-width));padding-top:4px;position:relative}.white-key-row{grid-template-columns:repeat(var(--white-key-count), minmax(0, 1fr));align-items:end;display:grid}.black-key-layer{pointer-events:none;height:0;position:absolute;inset:4px 0 auto}.piano-key{color:#1f2522;cursor:pointer;min-height:154px;font:inherit;border:1px solid #cdd5cb;justify-content:center;align-items:flex-end;padding:0 5px 12px;font-size:14px;font-weight:700;transition:transform .16s,border-color .16s,background .16s;display:flex;position:relative}.piano-key:hover:not(:disabled),.piano-key:focus-visible{border-color:#768b66;outline:none;transform:translateY(-2px)}.white-key{z-index:1;background:linear-gradient(#fff,#eef2ed);border-radius:0 0 8px 8px}.black-key{z-index:2;left:calc(((var(--previous-white-index) + 1) * (100% / var(--white-key-count))) - 20px);color:#f7faf6;pointer-events:auto;background:#151a17;border-color:#111612;border-radius:0 0 6px 6px;width:40px;min-height:104px;padding-bottom:10px;position:absolute;box-shadow:inset 0 -8px 12px #00000047,0 4px 8px #0003}.black-key:disabled{color:#aab4ad;cursor:not-allowed;background:#757d79}.correct-key,.correct-key:disabled{color:#145d34;opacity:1;background:#dff7e8;border-color:#1f9d55}.wrong-key,.wrong-key:disabled{color:#8e2424;opacity:1;background:#ffe4e4;border-color:#d35a5a}.settings-panel{text-align:left;gap:20px;padding:22px;display:grid}.field-group,.settings-grid,.field,.toggle-field{gap:8px;display:grid}.field-label,.field span,.toggle-field span{color:#4f5c55;font-size:14px;font-weight:700}.segmented-control{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.segmented-control button,.primary-button,.secondary-button,.field select,.field input{color:#1f2522;min-height:42px;font:inherit;background:#fff;border:1px solid #cbd5c8;border-radius:8px}.segmented-control button{cursor:pointer;padding:8px 10px}.segmented-control button.active{color:#263d20;background:#e7f2e2;border-color:#5f7f52;font-weight:700}.field select,.field input{box-sizing:border-box;width:100%;padding:8px 10px}.toggle-field{grid-template-columns:auto 1fr;align-items:center}.actions{flex-wrap:wrap;gap:12px;display:flex}.primary-button,.secondary-button{cursor:pointer;padding:10px 18px;font-weight:800}.primary-button{color:#fff;background:#476b3d;border-color:#476b3d}.secondary-button{background:#fff}.primary-button:disabled{cursor:not-allowed;opacity:.45}.result-shell{place-items:center;display:grid}.result-panel{width:min(720px,100%);padding:32px}.score-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:28px 0;display:grid}.score-grid div{background:#fbfcfa;border:1px solid #dde4dc;border-radius:8px;gap:6px;padding:18px;display:grid}.score-grid span{color:#5d6962;font-size:14px;font-weight:700}.score-grid strong{color:#1f2522;font-size:32px;line-height:1}@media (width<=880px){.app-shell{padding:20px}.app-header{flex-direction:column;align-items:stretch}.app-header h1,.result-panel h1{font-size:30px}.quiz-layout{grid-template-columns:1fr}.keyboard{--white-key-width:54px}.black-key{left:calc(((var(--previous-white-index) + 1) * (100% / var(--white-key-count))) - 18px);width:36px}.score-grid{grid-template-columns:1fr}}