@font-face{font-family:'Noto Music';src:url('/learn/NotoMusic-Regular.ttf') format('truetype');font-display:swap}
:root{color-scheme:light;--ink:#172442;--accent:#4055cb;--paper:#f5f7fc;--line:#dce3ef}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#fff;font:18px/1.8 -apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Segoe UI',sans-serif}header,main,footer{max-width:900px;margin:auto;padding:24px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;font-weight:750;text-decoration:none;color:var(--ink)}.brand img{border-radius:10px}a{color:var(--accent)}h1{font-size:clamp(30px,4.5vw,46px);line-height:1.3;letter-spacing:-.03em;margin:12px 0 24px}h2{font-size:25px;line-height:1.4;margin:0 0 14px}.eyebrow{font-size:12px;color:var(--accent);letter-spacing:.1em;font-weight:750}.crumbs,.small,footer{font-size:14px;color:#52617b}.intro{font-size:20px;color:#3a4b67}.example{margin:28px 0;padding:20px;background:var(--paper);border-radius:20px;text-align:center}.example svg{display:block;max-width:440px;margin:auto}figcaption{font-size:15px}section{margin-top:42px}section p{margin:0 0 18px}.practice,.next{border:1px solid var(--line);border-radius:20px;padding:28px;background:var(--paper)}#question-staff svg{width:100%;max-width:430px;display:block;margin:auto}#question-number{font-size:14px;color:#52617b}#answers{display:flex;gap:12px;flex-wrap:wrap}button,.store-links a{font:inherit;line-height:1.4;border:1px solid var(--accent);border-radius:12px;padding:12px 20px;background:#fff;color:var(--accent);cursor:pointer;text-decoration:none}button:hover,button[aria-pressed=true]{background:#e9eeff}button:disabled{cursor:default;opacity:.6}#next,.store-links a{background:var(--accent);color:white}#feedback{min-height:3.6em;margin-top:20px}.store-links{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}.related{display:grid;gap:12px;margin-top:36px}.related a{padding:16px;border:1px solid var(--line);border-radius:12px}.small{margin-top:16px}a:focus-visible,button:focus-visible{outline:3px solid #db8f16;outline-offset:4px}[hidden]{display:none!important}@media(max-width:500px){header,main,footer{padding:18px}.practice,.next{padding:20px}#answers{gap:8px}#answers button{padding:10px 15px}.intro{font-size:18px}}
