/* circle of fifths */
#circle .cof-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 860px) { #circle .cof-layout { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); } }
#circle .cof-wheel { max-width: 460px; margin: 0 auto; width: 100%; }
#circle .cof-svg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
#circle .cof-seg { cursor: pointer; outline: none; }
#circle .cof-seg path { fill: var(--card); stroke: var(--line-strong); stroke-width: 1; }
#circle .cof-min path { fill: var(--strong); }
#circle .cof-seg:hover path { stroke: var(--ink); }
#circle .cof-seg:focus-visible path { stroke: var(--ink); stroke-width: 2.5; }
#circle .cof-seg.near path { fill: var(--line-strong); }
#circle .cof-seg.sel path { fill: var(--primary); }
#circle .cof-seg text { text-anchor: middle; dominant-baseline: central; pointer-events: none; fill: var(--ink); }
#circle .cof-seg.sel text { fill: var(--on-primary); }
#circle .cof-name { font: 600 19px var(--sans); }
#circle .cof-alt { font: 500 12px var(--sans); opacity: .75; }
#circle .cof-mname { font: 600 13px var(--sans); }
#circle .cof-malt { font: 500 10px var(--sans); opacity: .75; }
#circle .cof-sig { font: 500 10px var(--sans); opacity: .7; }
#circle .cof-role { font: 700 10px var(--sans); }
#circle .cof-hub { fill: var(--display); }
#circle .cof-hub-name { fill: var(--on-display); font: 600 26px var(--sans); text-anchor: middle; dominant-baseline: central; }
#circle .cof-hub-sig { fill: var(--display-soft); font: 500 10px var(--sans); text-anchor: middle; dominant-baseline: central; }
#circle .cof-title { margin: 0 0 6px; font-size: 26px; }
#circle .cof-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 16px; margin: 0; }
#circle .cof-facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
#circle .cof-facts dd { margin: 0; color: var(--ink); }
#circle .cof-scale { margin: 12px 0 8px; }
#circle .cof-note { display: inline-block; min-width: 2.2em; padding: 2px 8px; border-radius: 9999px; background: var(--strong); color: var(--ink); text-align: center; font-weight: 500; }
#circle .cof-chords { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
#circle .cof-chord { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); cursor: pointer; }
#circle .cof-chord:hover { background: var(--strong); }
#circle .cof-chord.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
#circle .cof-chord .cof-rn { font-size: 12px; color: inherit; opacity: .7; font-weight: 600; }
#circle .cof-chord b { font-size: 17px; }
#circle .cof-chord .cof-cn { font-size: 11px; opacity: .75; }
#circle .cof-name2 { font-size: 16px; }
#circle .cof-name-s { font-size: 17px; }