:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f3efe6;--surface:#fffaf2;--surface-strong:#fff;--ink:#1f2933;--muted:#5f6c7b;--line:#d8cfc0;--accent:#c84c24;--accent-dark:#8f3215;--ok:#276749;--error:#9b2c2c;--shadow:0 16px 36px #3827131f}*{box-sizing:border-box}body{color:var(--ink);background:radial-gradient(circle at top left, #c84c242e, transparent 28%), linear-gradient(180deg, #f7f2e8 0%, var(--bg) 100%);margin:0;font-family:Georgia,Times New Roman,serif}button,input,select{font:inherit}.shell{min-height:100vh;padding:32px 20px}.shell--practice{padding-block:20px 32px}.panel{max-width:1120px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffaf2eb;border:1px solid #785f4829;border-radius:28px;margin:0 auto;padding:28px}.panel--wide{max-width:880px}.panel--credits{margin-top:18px}.eyebrow{color:var(--accent-dark);letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px;font-size:.85rem}h1,h2,p{margin-top:0}.lead{max-width:60ch;color:var(--muted)}.settings-grid,.practice-grid,.summary-grid{gap:20px;display:grid}.settings-grid{margin-top:28px}.practice-grid{grid-template-columns:1fr 1.2fr;align-items:start}.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin:28px 0}.field{gap:8px;display:grid}.field-group{border:0;margin:0;padding:0}.field-group legend{margin-bottom:2px;padding:0;font-weight:600}.field-note{color:var(--muted);max-width:60ch;margin:10px 0 0;font-size:.94rem}.credits{margin-top:0;padding:0;font-size:.9rem;line-height:1.5}.credits h2{margin-bottom:10px;font-size:1.1rem}.credits .field-note{max-width:70ch;font-size:.86rem}.credits-list{color:var(--muted);gap:8px;margin:12px 0;padding-left:20px;font-size:.86rem;display:grid}.credits a{color:var(--accent-dark)}.credits a:hover{color:var(--accent)}.field span{font-weight:600}.field--checkbox{grid-template-columns:auto 1fr;align-items:center}.field--checkbox span{font-weight:400}input[type=number],select{border:1px solid var(--line);background:var(--surface-strong);border-radius:14px;width:100%;padding:12px 14px}.radio-group{flex-wrap:wrap;gap:10px;display:flex}.radio-option{border:1px solid var(--line);background:var(--surface-strong);cursor:pointer;border-radius:14px;align-items:center;gap:10px;width:auto;padding:10px 12px;display:inline-flex}.radio-option input[type=radio]{accent-color:var(--accent);margin:0}.radio-option span{font-weight:400}.radio-group--clef{gap:14px}.radio-option--clef{justify-content:flex-start;min-width:170px;padding:12px 14px}.clef-preview{object-fit:contain;width:26px;height:52px}.clef-preview--bass{transform:translateY(5px)}.primary-button,.secondary-button,.choice-button{cursor:pointer;border:0;border-radius:14px;transition:transform .14s,background-color .14s,color .14s}.primary-button,.secondary-button{padding:14px 18px}.primary-button{background:var(--accent);color:#fff}.secondary-button{color:var(--ink);background:#eadfcd}.primary-button:hover,.secondary-button:hover,.choice-button:hover{transform:translateY(-1px)}.practice-header,.actions-row{justify-content:space-between;align-items:center;gap:12px;margin-top:18px;display:flex}.status-pill{background:#efe4d2;border-radius:999px;margin:0;padding:10px 14px;font-weight:600}.card,.summary-card{background:var(--surface-strong);border:1px solid #785f481f;border-radius:22px;padding:20px}.notation-card{place-items:center;gap:16px;display:grid}.notation-card__label{color:var(--accent-dark);font-weight:700}.staff{width:min(100%,420px);height:auto}.staff__line,.staff__ledger{stroke:#3d3d3d;stroke-width:2px}.staff__ledger{stroke-width:1.5px}.staff__stem{stroke:#1f2933;stroke-width:2px}.staff__notehead{fill:#1f2933}.staff__notehead--open{fill:#0000;stroke:#1f2933;stroke-width:2px}.staff__rest-stroke{fill:none;stroke:#3d3d3d;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round}.staff__flag,.staff__rest-block,.staff__rest-dot{fill:#3d3d3d}.staff__rest-image{overflow:visible}.staff__clef-label{fill:#3d3d3d;font-family:Georgia,Times New Roman,serif;font-size:28px}.staff__accidental{fill:#3d3d3d;font-family:Georgia,Times New Roman,serif;font-size:45px}.answer-summary{color:var(--muted);gap:6px;display:grid}.button-group{margin-top:18px}.button-group--disabled{opacity:.45}.group-label{margin-bottom:10px;font-weight:700}.button-row{flex-wrap:wrap;gap:10px;display:flex}.pitch-cluster-row{flex-wrap:wrap;gap:8px;display:flex}.pitch-cluster{background:#eadfcd80;border-radius:12px;gap:6px;padding:6px;display:inline-flex}.choice-button{color:var(--ink);background:#f3eadb;border:2px solid #0000;padding:10px 12px}.choice-button--natural{background:#eadfcd;border-color:#1f29333d;font-weight:700}.choice-button--active{color:#fff;background:#1f2933}.choice-button--correct{border-color:#1f9d55;box-shadow:0 0 0 3px #1f9d5547}.choice-button--active.choice-button--correct{border-color:#5be08c;box-shadow:0 0 0 3px #5be08c5c}.feedback{background:#f5efe4;border-radius:16px;margin-top:18px;padding:14px 16px}.feedback--ok{color:var(--ok);background:#2767491f}.feedback--error{color:var(--error);background:#9b2c2c1f}@media (width<=860px){.practice-grid,.summary-grid{grid-template-columns:1fr}.practice-header,.actions-row{flex-direction:column;align-items:stretch}.radio-option--clef{width:100%;min-width:0}}