:root{color:#18201f;background:#f3efe6;font-family:Avenir Next,Optima,Candara,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(90deg,rgba(24,32,31,.045) 1px,transparent 1px),linear-gradient(0deg,rgba(24,32,31,.035) 1px,transparent 1px),#f3efe6;background-size:28px 28px}button,select{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;padding:24px}.topbar{position:relative;display:grid;align-items:start;min-height:42px;margin-bottom:14px}.topbar h1{display:inline-flex;align-items:center;gap:10px;justify-self:center;color:#1f3632;font-family:Georgia,Charter,serif;font-size:2.05rem;font-weight:700;line-height:1}.brand-title svg{color:#ba653f;transform:translateY(1px)}.mode-tabs{display:inline-flex;gap:6px;padding:6px;margin-bottom:18px;border:1px solid #c8c0b1;background:#fffcf4d9;border-radius:8px;box-shadow:0 14px 40px #302a1f14}.mode-tabs button,.play-button,.primary-action,.sing-button,.submit-button,.ghost-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border:1px solid transparent;border-radius:8px;color:#18201f}.mode-tabs button{padding:10px 16px;background:transparent}.mode-tabs button.active{color:#fffaf0;background:#1f3632}.screen,.practice-layout{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:18px}.control-rail,.workspace,.stats-hero,.metric-grid>div,.stats-columns>div,.chord-card,.result-strip{border:1px solid #c8c0b1;background:#fffcf4eb;border-radius:8px;box-shadow:0 18px 50px #31291c1a}.control-rail{display:flex;flex-direction:column;gap:18px;min-height:560px;padding:22px}.eyebrow{margin:0 0 8px;color:#6c5a42;font-size:.75rem;font-weight:700;letter-spacing:0;text-transform:uppercase}h1,h2,p{margin-top:0}h1{margin-bottom:0;font-family:Georgia,Charter,serif;font-size:clamp(1.75rem,3.4vw,3.5rem);line-height:.95;letter-spacing:0}h2{margin-bottom:8px;font-family:Georgia,Charter,serif;font-size:1.55rem;letter-spacing:0}label{display:grid;gap:8px;color:#5e5141;font-size:1.24rem;font-weight:700}select{width:100%;min-height:62px;padding:0 16px;border:1px solid #b9ae9b;border-radius:8px;color:#1d2523;background:#fffaf0;font-size:1.3rem;font-weight:700}.workspace{display:grid;gap:18px;min-width:0;padding:18px;background:#faf6ebb8}.practice-stage{display:grid;gap:18px;min-width:0}.chord-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px}.chord-title-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}.chord-title-row h2{margin-bottom:0}.chord-title-row p{margin-bottom:0;color:#625543;font-size:1.05rem;font-weight:700}.play-button,.primary-action,.sing-button{padding:0 18px;color:#fffaf0;background:#ba653f}.sing-button{width:100%;background:#5d6bc6}.submit-button{flex:1;padding:0 14px;color:#fffaf0;background:#2f7d6b}.ghost-button{padding:0 14px;border-color:#b9ae9b;background:#fffaf0}.primary-action{width:100%}.mic-panel{display:grid;gap:10px;padding:14px;border:1px solid #b9ae9b;border-radius:8px;background:#fffaf0}.mic-panel>div{display:flex;align-items:center;justify-content:space-between;color:#6c5a42;font-size:.82rem;font-weight:700}.mic-panel strong{color:#1f3632;line-height:1.35}.mic-panel.low{border-color:#5d6bc6;background:#eef0ff}.mic-panel.high{border-color:#ba653f;background:#fff1e7}.mic-panel.correct,.mic-panel.done{border-color:#2f7d6b;background:#e8f3ec}.mic-panel.error{border-color:#c84f3e;background:#f7e8df}.sing-results{display:grid;gap:8px;padding:0;margin:2px 0 0;list-style:none}.sing-results li{display:grid;grid-template-columns:minmax(0,1fr) 42px 78px;gap:8px;align-items:center;min-height:32px;padding:7px 8px;border-radius:6px;background:#fffaf0c7;color:#1f3632;font-size:.82rem}.sing-results span{min-width:0;overflow-wrap:anywhere}.sing-results b,.sing-results em{text-align:right}.sing-results em{color:#6c5a42;font-style:normal}.sing-results .correct b{color:#2f7d6b}.sing-results .low b{color:#5d6bc6}.sing-results .high b{color:#ba653f}.button-row{display:flex;gap:10px}.keyboard{position:relative;display:flex;align-items:stretch;width:100%;min-height:142px;padding:10px;overflow:hidden;border:1px solid #1f3632;border-radius:8px;background:#1f3632}.piano-key{position:relative;flex:1 1 0;min-width:0;height:122px;border-radius:0 0 5px 5px;transition:transform .16s ease,background .16s ease}.piano-key.white{z-index:1;border:1px solid #a99d89;background:#fffaf0}.piano-key.black{z-index:2;width:clamp(16px,2.6vw,26px);height:76px;flex:0 0 clamp(16px,2.6vw,26px);margin-right:calc(clamp(16px,2.6vw,26px)/-2);margin-left:calc(clamp(16px,2.6vw,26px)/-2);background:#151817}.piano-key.active{background:#e7bb61;transform:translateY(-4px)}.piano-key.root{background:#c84f3e}.piano-key.playing{background:#f5d77b;box-shadow:inset 0 10px 18px #18201f2e,0 0 0 3px #ba653f52;transform:translateY(8px)}.piano-key.black.playing{background:#ba653f;box-shadow:inset 0 8px 12px #18201f6b,0 0 0 3px #f5d77b5c}.piano-key.root.playing{background:#d95b47}.note-float{position:absolute;left:50%;bottom:16px;z-index:5;min-width:34px;max-width:46px;padding:4px 7px;border-radius:999px;color:#fffaf0;background:#1f3632;box-shadow:0 8px 18px #18201f38,0 0 0 3px #f5d77b59;font-size:.76rem;font-weight:800;line-height:1;text-align:center;transform:translate(-50%);pointer-events:none;white-space:nowrap}.note-float.compact{min-width:28px;max-width:42px;padding-right:5px;padding-left:5px;font-size:.62rem;letter-spacing:0}.piano-key.black .note-float{bottom:10px;max-width:34px;font-size:.64rem}.piano-key.black .note-float.compact{max-width:32px;font-size:.54rem}.notation-grid{display:grid;grid-template-columns:minmax(280px,440px) minmax(260px,1fr);gap:18px;align-items:stretch}.staff,.analysis{min-height:236px;border:1px solid #c8c0b1;border-radius:8px;background:#fffaf0}.staff{display:grid;place-items:center;overflow:hidden;color:#ba653f;font-weight:700;text-align:center}.staff>div{display:grid;place-items:center;max-width:100%}.staff svg{width:100%;max-width:520px;height:auto}.staff-line,.ledger-line,.barline{stroke:#18201f;stroke-width:1.6}.ledger-line{stroke-width:1.8}.clef{fill:#18201f;stroke:none;font-family:Apple Symbols,Noto Music,Bravura,Georgia,serif;font-size:192px;font-weight:400;dominant-baseline:alphabetic;transform:scaleX(.86);transform-box:fill-box;transform-origin:52px 110px}.accidental{fill:#18201f;font-family:Georgia,Charter,serif;font-size:30px;font-weight:700}.notehead{fill:#fffaf0;stroke:#18201f;stroke-width:3.4}.app-error{display:grid;place-items:center;min-height:100vh;padding:24px;color:#fffaf0;background:#1f3632;text-align:center}.analysis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;overflow:hidden}.analysis div{display:grid;align-content:center;gap:8px;min-width:0;padding:16px;background:#f3efe6b8}.analysis span,.metric-grid span,.history span,.bar-row span{color:#71634f;font-size:.78rem;font-weight:700}.analysis strong{min-width:0;overflow-wrap:anywhere;font-size:1.05rem}.result-strip{display:flex;align-items:center;gap:12px;min-height:64px;padding:16px 18px}.result-strip.correct{border-color:#2f7d6b;background:#e8f3ec}.result-strip.miss{border-color:#ba653f;background:#f7e8df}.listening-panel{display:grid;place-items:center;min-height:420px;border:1px dashed #a89a85;border-radius:8px;color:#ba653f;background:#fffaf0c2;font-family:Georgia,Charter,serif;font-size:12rem}.stats-screen{display:grid;gap:18px}.stats-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:28px}.stats-hero h1{color:#2f7d6b}.stats-hero p{margin-bottom:0}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.metric-grid>div{display:grid;gap:10px;padding:20px}.metric-grid strong{font-family:Georgia,Charter,serif;font-size:2rem}.stats-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}.stats-columns>div{padding:22px}.bars,.history{display:grid;gap:12px}.bar-row{display:grid;grid-template-columns:100px minmax(0,1fr) 44px;gap:12px;align-items:center}.bar-row div{height:12px;overflow:hidden;border-radius:99px;background:#e0d7c8}.bar-row i{display:block;height:100%;border-radius:inherit}.history div{display:grid;grid-template-columns:100px 1fr 44px;gap:12px;align-items:center;min-height:42px;border-bottom:1px solid #e1d7c7}.history em{font-style:normal;color:#ba653f;font-weight:700}.copyright-footer{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;max-width:1120px;margin:22px auto 0;padding:12px 16px 0;color:#7a6a55;font-size:.72rem;font-weight:700;line-height:1.6;text-align:center}.copyright-footer span+span:before{content:"·";margin-right:10px;color:#b9ae9b}button:disabled,select:disabled{cursor:not-allowed;opacity:.55}@media(max-width:860px){.app-shell{padding:14px}.mode-tabs{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.topbar{gap:8px}.topbar h1{justify-self:center}.copyright-footer{display:grid;gap:4px;padding-right:4px;padding-left:4px}.copyright-footer span+span:before{content:"";margin-right:0}.screen,.practice-layout,.notation-grid,.stats-columns,.metric-grid{grid-template-columns:1fr}.control-rail{min-height:auto}.chord-card,.stats-hero{align-items:stretch;flex-direction:column}.piano-key.black{width:clamp(13px,4.2vw,22px);flex-basis:clamp(13px,4.2vw,22px);margin-right:calc(clamp(13px,4.2vw,22px)/-2);margin-left:calc(clamp(13px,4.2vw,22px)/-2)}.analysis{grid-template-columns:1fr}.clef{font-size:clamp(116px,29vw,138px);transform:translate(12px,3px) scaleX(.86);transform-origin:52px 110px}.listening-panel{min-height:260px;font-size:8rem}}