/* Content-only components: mini quiz, SVG staff, 88-key keyboard, circle of fifths. Served at /js/content/www/content.css. Colours come from the design tokens. */
.cq{counter-reset:ok}
.cq__q{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:12px 0;background:var(--surface-2)}
.cq__q legend{font-weight:800;font-family:var(--display);padding:0 4px}
.cq__opts{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.cq__opts input{position:absolute;opacity:0;width:1px;height:1px}
.cq__opts input[data-right]:checked{counter-increment:ok}
.cq__opts label{border:2px solid var(--line);background:var(--surface);border-radius:12px;padding:8px 14px;font-weight:700;cursor:pointer;box-shadow:0 3px 0 var(--line)}
.cq__opts input:focus-visible+label{outline:3px solid var(--focus);outline-offset:2px}
.cq__opts input[data-right]:checked+label{background:var(--right-soft);border-color:var(--right)}
.cq__opts input:not([data-right]):checked+label{background:var(--wrong-soft);border-color:var(--wrong)}
.cq__q:has(input:not([data-right]):checked) input[data-right]+label{border-color:var(--right);border-style:dashed}
.cq__ok,.cq__no{display:none;margin:10px 0 0;font-size:15px}
.cq__ok{color:var(--right)}.cq__no{color:var(--wrong)}
.cq__ok b,.cq__no b{color:var(--ink)}
.cq__q:has(input[data-right]:checked) .cq__ok{display:block}
.cq__q:has(input:not([data-right]):checked) .cq__no{display:block}
.cq__q:has(input:checked) .cq__opts label{pointer-events:none}
.cq__score{font-weight:800;font-family:var(--display)}
.cq__score span[aria-hidden]::before{content:counter(ok)}
.cta-alt{margin:-20px 0 32px}
.sources ol{padding-left:1.3em;font-size:15px}.sources li{margin:6px 0}
.staff{display:block;width:100%;max-width:680px;height:auto;margin:8px 0;color:var(--ink)}
.staff .ln{stroke:currentColor;stroke-width:1.4}
.staff .hd{fill:currentColor}
.staff text{fill:currentColor;font-family:var(--display);font-weight:800}
.staff .lbl{fill:var(--muted);font-size:13px}
.note-grid{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 18px}
.note-grid .play{padding:6px 14px 6px 6px}
.note-grid .play__icon{width:28px;height:28px}
.kb-wrap{overflow-x:auto;border:2px solid var(--key-black);border-radius:var(--radius);background:var(--key-black);margin:12px 0}
.kb{position:relative;display:flex;height:170px;width:calc(var(--w)*30px)}
.kb button{border:0;padding:0;cursor:pointer;font:inherit}
.kb .w{flex:0 0 30px;height:100%;background:var(--key-white);border-right:1px solid var(--key-white-soft);border-radius:0 0 6px 6px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;font-size:11px;font-weight:800;color:var(--key-white-ink)}
.kb .w.c{color:var(--key-black)}
.kb .b{position:absolute;top:0;width:20px;height:105px;background:var(--key-black);border:1px solid var(--key-edge);border-radius:0 0 4px 4px;margin-left:-10px;z-index:1}
.kb .w:active,.kb .w.is-playing{background:var(--brand-soft)}
.kb .b:active,.kb .b.is-playing{background:var(--brand)}
.cof{container-type:inline-size;position:relative;width:min(100%,460px);aspect-ratio:1;margin:12px auto 20px;border-radius:50%;background:var(--surface);border:2px solid var(--line)}
.cof button{--s:clamp(40px,12cqw,62px);position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);margin:calc(var(--s)/-2);padding:0;border-radius:50%;border:2px solid var(--line);background:var(--surface-2);font-family:var(--display);font-weight:800;font-size:16px;line-height:1.05;transform:rotate(calc(var(--i)*30deg)) translateY(calc(var(--r)*-1)) rotate(calc(var(--i)*-30deg));box-shadow:0 3px 0 var(--line)}
.cof button small{display:block;font-size:10px;font-weight:700;color:var(--muted)}
.cof .maj{--r:40cqw;background:var(--brand-soft);border-color:var(--brand)}
.cof .min{--r:23cqw;--s:clamp(30px,10cqw,50px);font-size:clamp(11px,3cqw,14px)}
.cof .is-playing{background:var(--accent);border-color:var(--accent-press)}
.cof__mid{position:absolute;inset:36%;display:grid;place-items:center;text-align:center;font-size:13px;color:var(--muted)}
.degree-row{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 18px}