.cof{grid-template-columns:minmax(0,470px) minmax(0,1fr);display:grid;overflow:hidden}.cof-wheel{border-right:1px solid var(--border);background:var(--surface-2);flex-direction:column;align-items:center;gap:14px;padding:22px;display:flex}.cof-svg{touch-action:manipulation;-webkit-user-select:none;user-select:none;width:100%;max-width:440px;height:auto}.cof-seg{cursor:pointer;outline:none}.cof-seg path{stroke:var(--surface);stroke-width:2.5px;transition:fill .15s}.cof-seg.outer path{fill:var(--surface)}.cof-seg.inner path{fill:var(--surface-3)}.cof-seg:hover path{fill:color-mix(in srgb, var(--accent) 10%, var(--surface))}.cof-seg.in-key path{fill:color-mix(in srgb, var(--c) 17%, var(--surface))}.cof-seg.is-selected path{fill:var(--accent)}.cof-seg:focus-visible path{stroke:var(--ink);stroke-width:3.5px}.cof-seg text{font-family:var(--font-sans);fill:var(--ink);pointer-events:none}.cof-major{letter-spacing:-.02em;font-size:23px;font-weight:750}.cof-minor{font-size:17px;font-weight:650}.cof-alt{font-size:12.5px;font-weight:600;fill:var(--ink-2)!important}.cof-sig{font-size:13px;font-weight:650;fill:var(--muted)!important}.cof-seg.in-key text{fill:var(--ink)}.cof-seg.is-selected text,.cof-seg.is-selected .cof-sig,.cof-seg.is-selected .cof-alt{fill:var(--on-accent)!important}.cof-center{fill:var(--surface);stroke:var(--border)}.cof-center-key{font-family:var(--font-sans);letter-spacing:-.03em;fill:var(--ink);font-size:40px;font-weight:800}.cof-center-sub{font-family:var(--font-sans);fill:var(--muted);font-size:13px;font-weight:600}.cof-legend{color:var(--ink-2);flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:0;padding:0;font-size:.8rem;list-style:none;display:flex}.cof-legend li{align-items:center;gap:6px;display:flex}.cof-swatch{background:color-mix(in srgb, var(--c) 30%, var(--surface));border:1.5px solid var(--c);border-radius:4px;width:12px;height:12px}.cof-details{min-width:0;padding:22px 26px 26px}.cof-details h3{text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:22px 0 10px;font-size:.78rem;font-weight:700}.cof-title{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;display:flex}.cof-title h2{margin:0;font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}.cof-seg-count{color:var(--muted);margin-left:2px;font-weight:600}.cof-enh{color:var(--muted);margin:8px 0 0;font-size:.86rem}.cof-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 0;display:grid}.cof-facts>div{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;min-width:0;padding:10px 12px}.cof-facts dt{text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-size:.72rem;font-weight:700}.cof-facts dd{color:var(--ink);margin:4px 0 0;font-weight:650}.cof-sig-notes{color:var(--accent-ink);letter-spacing:.04em;font-weight:700;display:block}.cof-link{font:inherit;color:var(--accent-ink);cursor:pointer;text-underline-offset:3px;text-align:left;background:0 0;border:0;min-height:28px;padding:0;font-weight:650;text-decoration:underline}.cof-link:hover{color:var(--accent-hover)}.cof-scale{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none;display:grid}.cof-scale li{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;flex-direction:column;align-items:center;padding:8px 0 6px;display:flex}.cof-note{font-size:1.05rem;font-weight:750}.cof-degree{color:var(--muted);font-size:.72rem;font-weight:600}.cof-chords{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none;display:grid}.cof-chord{font:inherit;border:1px solid color-mix(in srgb, var(--c) 45%, var(--border));background:color-mix(in srgb, var(--c) 10%, var(--surface));width:100%;min-height:56px;color:var(--ink);cursor:pointer;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:2px;display:flex}.cof-chord:hover{background:color-mix(in srgb, var(--c) 20%, var(--surface))}.cof-roman{color:var(--c);font-family:Georgia,Times New Roman,serif;font-size:.74rem;font-weight:700}.cof-chord-name{font-size:.98rem;font-weight:750}.cof-hint{color:var(--ink-2);margin:12px 0 0;font-size:.9rem}.cof-prog-label{text-transform:none;letter-spacing:0;color:var(--ink);font-family:Georgia,Times New Roman,serif;font-size:.95rem}.cof-prog{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:4px;display:grid}.cof-prog figure{border:1px solid var(--border);background:var(--surface);border-radius:12px;flex-direction:column;align-items:center;gap:4px;min-width:0;margin:0;padding:10px 8px 6px;display:flex}.cof-prog figcaption{align-items:baseline;gap:6px;display:flex}.cof-prog figcaption span{color:var(--muted);font-family:Georgia,Times New Roman,serif;font-size:.78rem}.cof-prog .chord-diagram{max-width:120px}.cof-details>.btn{margin-top:16px}@media (width<=960px){.cof{grid-template-columns:minmax(0,1fr)}.cof-wheel{border-right:0;border-bottom:1px solid var(--border);padding:16px 12px}.cof-details{padding:18px 16px 20px}}@media (width<=560px){.cof-facts{grid-template-columns:minmax(0,1fr)}.cof-chords{grid-template-columns:repeat(4,minmax(0,1fr))}.cof-scale{gap:4px}.cof-prog{grid-template-columns:repeat(2,minmax(0,1fr))}}