:root{color-scheme:light;--ink:#253238;--paper:#f6f3ec;--accent:#17675e;--rule:#c8cec8;font-family:system-ui,sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0}main{max-width:850px;margin:auto;padding:24px 20px 40px}nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px}a{color:var(--accent);min-height:44px;display:inline-flex;align-items:center}h1{font-family:Georgia,serif;font-weight:normal;font-size:clamp(27px,5vw,37px);margin:12px 0}h2{font-size:22px;margin:8px 0}p{line-height:1.5;margin:10px 0}.lead{max-width:68ch}.card{background:#fff;border:1px solid var(--rule);border-radius:10px;padding:18px;margin-top:16px}.top{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}.eyebrow,.progress,.muted{font-size:14px;color:#4b5c60}.root{font-weight:600}.task{font-size:18px}.keyboard-wrap{margin:12px 0;min-width:0}ct-keyboard{--ct-keyboard-highlight-a:#17675e;--ct-keyboard-highlight-b:#9a5300;--ct-keyboard-font:system-ui,sans-serif}.actions,.transport,.compare-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}button{font:inherit;min-height:44px;padding:9px 15px;border:1px solid #7b8e88;border-radius:5px;color:var(--ink);background:#f7f9f6;cursor:pointer}button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}button:disabled{opacity:.48;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #b55c12;outline-offset:3px}.transport{margin-top:12px}.sound-status{font-size:14px;min-height:22px;margin-top:4px}.feedback{min-height:68px;margin:12px 0 0;padding:10px 12px;border-left:3px solid var(--rule);background:#f7f8f5}.feedback.good{border-color:var(--accent)}.feedback.bad{border-color:#aa6520}.feedback p{margin:0}.notation{min-height:128px;max-width:100%;overflow:hidden;display:flex;align-items:center}.notation svg{max-width:100%;height:auto}.selection{font-size:14px;min-height:23px}.comparison{border-top:1px solid var(--rule);margin-top:12px;padding-top:10px}.comparison[hidden]{display:none}.compare-text{font-size:15px;min-height:45px}details{margin-top:14px}summary{cursor:pointer;min-height:44px;display:flex;align-items:center}.hint-text{font-size:15px;margin-top:8px}.score{padding-top:10px;font-size:14px}.complete{padding:12px;background:#e9f1eb;border-radius:5px;margin-top:12px}.complete[hidden]{display:none}@media(max-width:480px){main{padding:14px 12px 28px}.card{padding:12px}.task{font-size:16px}button{padding:9px 12px}.notation{min-height:120px}.transport{gap:7px}}