:root{--ink:#1f2430;--muted:#737682;--line:#e6e3db;--paper:#fbfaf7;--card:#fff;--accent:#e85d3f;--accent-dark:#cf492e;--sage:#3f7c67;--lavender:#ece9ff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--ink);background:radial-gradient(circle at 8% 16%, #e85d3f0f, transparent 25%), radial-gradient(circle at 94% 80%, #53799712, transparent 25%), var(--paper);-webkit-font-smoothing:antialiased;min-height:100vh;margin:0;font-family:Arial,Helvetica,sans-serif}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,a:focus-visible{outline-offset:3px;outline:3px solid #e85d3f59}.topbar{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fbfaf7db;border-bottom:1px solid #1f243014;justify-content:space-between;align-items:center;height:74px;padding:0 clamp(22px,5vw,72px);display:flex}.brand{color:var(--ink);letter-spacing:-.02em;align-items:center;gap:11px;font-size:19px;font-weight:750;text-decoration:none;display:inline-flex}.brand-mark{background:var(--ink);border-radius:8px;justify-content:center;align-items:center;gap:3px;width:28px;height:28px;display:flex;transform:rotate(-2deg)}.brand-mark i{background:#fff;border-radius:4px;width:2px;display:block}.brand-mark i:first-child{height:7px}.brand-mark i:nth-child(2){height:14px}.brand-mark i:nth-child(3){height:10px}.header-tag{color:var(--muted);letter-spacing:.01em;align-items:center;gap:7px;font-size:12px;display:flex}.header-tag svg{color:var(--accent)}.page-shell{width:min(760px,100% - 40px);margin:0 auto;padding:64px 0 30px}.intro{text-align:center;margin-bottom:38px}.eyebrow{color:var(--accent);letter-spacing:.18em;text-transform:uppercase;margin:0 0 15px;font-size:11px;font-weight:800}h1{letter-spacing:-.045em;margin:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(37px,6vw,56px);font-weight:500;line-height:1.04}h1 em{color:var(--sage);font-weight:400}.subhead{max-width:520px;color:var(--muted);margin:18px auto 0;font-size:15px;line-height:1.6}.practice-card{border:1px solid var(--line);background:var(--card);border-radius:22px;overflow:hidden;box-shadow:0 24px 70px #24201814,0 2px 8px #24201808}.card-top{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:20px;min-height:82px;padding:18px 25px;display:flex}.label{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px;font-size:10px;font-weight:750;display:block}.card-top h2{letter-spacing:-.01em;margin:0;font-size:16px}.select-wrap{align-items:center;display:flex;position:relative}.select-wrap select{appearance:none;border:1px solid var(--line);min-height:40px;color:var(--ink);background:#fff;border-radius:10px;padding:0 38px 0 14px;font-size:13px;font-weight:650}.select-wrap svg{pointer-events:none;color:var(--muted);position:absolute;right:12px}.text-button{color:var(--muted);text-underline-offset:3px;background:0 0;border:0;padding:9px 0;font-size:12px;text-decoration:underline}.idle-content,.active-content{padding:25px}.staff-panel{background:#fdfcf9;border:1px solid #e8e5de;border-radius:15px;position:relative;overflow:hidden}.staff{width:100%;height:auto;min-height:145px;display:block}.staff-line{stroke:#898b8f;stroke-width:1px}.bar-line{stroke:#595c64;stroke-width:1.5px}.clef{fill:#292d36;font-family:serif}.treble{font-size:66px}.bass-clef{fill:#292d36}.note-head{fill:#2b2f38;transition:all .2s}.note-stem{stroke:#2b2f38;stroke-width:2px}.ledger{stroke:#595c64;stroke-width:1.2px}.active-halo{fill:var(--lavender);stroke:#d7d0ff;stroke-width:1px}.note-current .note-head{fill:#5b4dbc}.note-current .note-stem{stroke:#5b4dbc}.note-answered{opacity:.45}.answer-good{fill:var(--sage);opacity:1}.answer-bad{fill:var(--accent);opacity:1}.answer-icon{fill:none;stroke:#fff;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;opacity:1}.preview .staff{filter:blur(1.3px);opacity:.35}.preview-shade{background:linear-gradient(90deg,#fdfcf959,#fdfcf9bf,#fdfcf959);place-items:center;display:grid;position:absolute;inset:0}.preview-shade span{border:1px solid var(--line);color:var(--muted);background:#ffffffe6;border-radius:30px;padding:9px 13px;font-size:11px;font-weight:650;box-shadow:0 5px 20px #1e1e1e0f}.start-row{justify-content:space-between;align-items:center;gap:18px;margin-top:23px;display:flex}.session-note{align-items:center;gap:11px;display:flex}.session-note .dot{background:#69a98d;border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 5px #edf6f2}.session-note strong,.session-note small{display:block}.session-note strong{margin-bottom:4px;font-size:12px}.session-note small{color:var(--muted);font-size:11px}.primary-button{color:#fff;background:var(--accent);border:0;border-radius:11px;justify-content:center;align-items:center;gap:10px;min-height:46px;padding:0 19px;font-size:13px;font-weight:750;transition:transform .15s,background .15s;display:inline-flex;box-shadow:0 7px 15px #e85d3f33}.primary-button:hover{background:var(--accent-dark);transform:translateY(-1px)}.progress-track{background:#f0eee9;height:3px;margin:-25px -25px 25px}.progress-track span{background:var(--accent);height:100%;transition:width .25s;display:block}.question-area{padding-top:23px}.prompt{justify-content:space-between;align-items:baseline;margin-bottom:14px;display:flex}.prompt p{margin:0;font-size:14px;font-weight:750}.prompt span{color:var(--muted);font-size:11px}.note-grid{grid-template-columns:repeat(7,1fr);gap:8px;display:grid}.note-grid button{border:1px solid var(--line);min-height:49px;color:var(--ink);background:#fff;border-radius:10px;font-family:Georgia,serif;font-size:18px;font-weight:600;transition:border .15s,background .15s,transform .15s}.note-grid button:hover{background:#f7f5ff;border-color:#bab2e7;transform:translateY(-1px)}.feedback{border-radius:12px;align-items:center;gap:12px;min-height:66px;padding:10px 10px 10px 13px;display:flex}.feedback.correct{background:#edf7f2}.feedback.incorrect{background:#fff2ef}.feedback-icon{color:#fff;border-radius:50%;flex:none;place-items:center;width:34px;height:34px;display:grid}.correct .feedback-icon{background:var(--sage)}.incorrect .feedback-icon{background:var(--accent)}.feedback div{flex:1}.feedback strong,.feedback small{display:block}.feedback strong{margin-bottom:4px;font-size:13px}.feedback small{color:var(--muted);font-size:11px}.feedback button{background:var(--ink);color:#fff;border:0;border-radius:9px;align-items:center;gap:7px;min-height:40px;padding:0 13px;font-size:12px;font-weight:700;display:inline-flex}.complete-content{text-align:center;padding:32px 25px 29px}.result-mark{color:#fff;background:var(--sage);border-radius:50%;place-items:center;width:49px;height:49px;margin:0 auto 12px;display:grid;box-shadow:0 0 0 8px #edf6f2}.result-kicker{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin:0 0 3px;font-size:11px;font-weight:750}.score{justify-content:center;align-items:baseline;display:flex}.score strong{letter-spacing:-.05em;font-family:Georgia,serif;font-size:64px;font-weight:500;line-height:1.05}.score span{color:var(--muted);font-size:19px}.result-copy{color:var(--muted);margin:4px 0 22px;font-size:13px}.result-grid{border:1px solid var(--line);border-radius:12px;grid-template-columns:repeat(3,1fr);width:min(440px,100%);margin:0 auto 24px;display:grid}.result-grid div{border-right:1px solid var(--line);padding:13px}.result-grid div:last-child{border:0}.result-grid span,.result-grid strong{display:block}.result-grid span{color:var(--muted);margin-bottom:5px;font-size:10px}.result-grid strong{font-size:14px}.complete-actions{justify-content:center;gap:10px;display:flex}.secondary-button{border:1px solid var(--line);min-height:46px;color:var(--ink);background:#fff;border-radius:11px;align-items:center;gap:8px;padding:0 17px;font-size:12px;font-weight:700;display:inline-flex}.footer-note{color:#96948e;justify-content:center;align-items:center;gap:7px;margin-top:22px;font-size:10px;display:flex}.footer-note span{background:#75a993;border-radius:50%;width:5px;height:5px}.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}@media (max-width:600px){.topbar{height:64px;padding:0 20px}.header-tag{display:none}.page-shell{width:min(100% - 24px,760px);padding-top:38px}.intro{margin-bottom:26px}h1{font-size:38px}.subhead{font-size:14px}.practice-card{border-radius:17px}.card-top{min-height:74px;padding:15px 16px}.card-top h2{font-size:14px}.idle-content,.active-content{padding:16px}.progress-track{margin:-16px -16px 16px}.staff{min-height:112px}.start-row{flex-direction:column;align-items:stretch}.primary-button{width:100%}.note-grid{grid-template-columns:repeat(7,1fr);gap:5px}.note-grid button{border-radius:8px;min-height:44px;font-size:16px}.prompt{margin-bottom:11px}.feedback{flex-wrap:wrap;align-items:center}.feedback button{justify-content:center;width:100%}.complete-content{padding:28px 16px 22px}.complete-actions{flex-direction:column}.secondary-button{justify-content:center}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}.skip-link{z-index:100;background:var(--ink);color:#fff;border-radius:8px;padding:10px 14px;font-size:13px;font-weight:700;text-decoration:none;position:fixed;top:10px;left:10px;transform:translateY(-150%)}.skip-link:focus{transform:translateY(0)}h1,h2{text-wrap:balance}button,select,a{touch-action:manipulation;-webkit-tap-highlight-color:#e85d3f29}.text-button:hover{color:var(--ink)}.secondary-button:hover,.select-wrap select:hover{background:#faf9f6;border-color:#b9b5ad}@media (pointer:fine){html{overscroll-behavior:none}}