:root{--cof-primary:#6366f1;--cof-primary-light:#6366f11a;--cof-primary-hover:#4f46e5;--cof-accent:#14b8a6;--cof-accent-light:#14b8a61a;--cof-text:#1e293b;--cof-text-secondary:#475569;--cof-text-muted:#64748b;--cof-bg:#fff;--cof-bg-secondary:#f8fafc;--cof-border:#e2e8f0;--cof-border-hover:#cbd5e1;--cof-shadow:0 1px 3px #00000014;--cof-shadow-md:0 4px 12px #00000014;--cof-radius:var(--main-radius,8px);--cof-radius-lg:var(--main-radius-lg,12px);--cof-radius-full:9999px;--cof-major-bg:#eef2ff;--cof-major-text:#3730a3;--cof-major-active:#6366f1;--cof-minor-bg:#f0fdf4;--cof-minor-text:#166534;--cof-minor-active:#16a34a;--cof-inner-bg:#f8fafc;--cof-inner-text:#64748b;--cof-relative-highlight:#f59e0b}._cof-container{max-width:960px;margin:0 auto}._cof-layout{grid-template-columns:1fr 1fr;align-items:start;gap:2rem;display:grid}._cof-hidden{display:none!important}@media (max-width:768px){._cof-container{padding-left:1rem;padding-right:1rem}._cof-layout{grid-template-columns:1fr;gap:1.5rem}}._cof-wheel-section{justify-content:center;align-items:center;display:flex}._cof-wheel-wrap{aspect-ratio:1;width:100%;max-width:460px}._cof-svg{width:100%;height:100%}._cof-segment{cursor:pointer;transition:opacity .15s}._cof-segment:hover{opacity:.85}._cof-segment--active{opacity:1}._cof-segment-path{stroke:var(--cof-bg);stroke-width:1.5px}._cof-major-path{fill:var(--cof-major-bg)}._cof-major-path--active{fill:var(--cof-major-active)}._cof-major-label{fill:var(--cof-major-text);text-anchor:middle;dominant-baseline:central;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:14px;font-weight:600}._cof-major-label--active{fill:#fff}._cof-minor-path{fill:var(--cof-minor-bg)}._cof-minor-path--active{fill:var(--cof-minor-active)}._cof-minor-label{fill:var(--cof-minor-text);text-anchor:middle;dominant-baseline:central;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:11px;font-weight:500}._cof-minor-label--active{fill:#fff}._cof-inner-path{fill:var(--cof-inner-bg)}._cof-inner-path--active{fill:var(--cof-primary)}._cof-inner-label{fill:var(--cof-inner-text);text-anchor:middle;dominant-baseline:central;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:10px;font-weight:500}._cof-inner-label--active{fill:#fff}._cof-relative-path{fill:#f59e0b33}._cof-relative-label{fill:#b45309}._cof-progression-path{stroke:var(--cof-primary);stroke-width:2.5px;stroke-dasharray:6 3;fill:none;pointer-events:none}@media (max-width:768px){._cof-wheel-wrap{max-width:340px}._cof-major-label{font-size:12px}._cof-minor-label{font-size:10px}._cof-inner-label{font-size:9px}}._cof-info-section{flex-direction:column;gap:1rem;display:flex}._cof-key-header{background:var(--cof-bg);border-radius:var(--cof-radius-lg);box-shadow:var(--cof-shadow);border-style:solid;border-width:1px;border-color:var(--cof-border);justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 1.5rem;display:flex}._cof-key-name{color:var(--cof-text);font-size:1.5rem;font-weight:700}._cof-key-sig{color:var(--cof-text-muted);font-size:.875rem;font-weight:500}._cof-card{background:var(--cof-bg);border-radius:var(--cof-radius-lg);box-shadow:var(--cof-shadow);border-style:solid;border-width:1px;border-color:var(--cof-border);padding:1.25rem 1.5rem}._cof-card-title{color:var(--cof-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem;font-size:.75rem;font-weight:600}._cof-scale-notes{flex-wrap:wrap;gap:.375rem;display:flex}._cof-note{border-radius:var(--cof-radius);background:var(--cof-bg-secondary);min-width:2.5rem;height:2.5rem;color:var(--cof-text);border-style:solid;border-width:1px;border-color:var(--cof-border);cursor:pointer;justify-content:center;align-items:center;padding:0 .5rem;font-size:.9375rem;font-weight:600;transition:opacity .15s;display:inline-flex}._cof-note:hover{opacity:.8}._cof-note--root{background:var(--cof-primary);color:#fff;border-color:var(--cof-primary)}._cof-chord-type-toggle{background:var(--cof-bg-secondary);border-radius:var(--cof-radius);border-style:solid;border-width:1px;border-color:var(--cof-border);gap:.25rem;margin-bottom:.75rem;padding:.1875rem;display:flex}._cof-toggle-btn{color:var(--cof-text-muted);border-radius:calc(var(--cof-radius) - 2px);cursor:pointer;background:0 0;border:0 solid #0000;flex:1;padding:.375rem .75rem;font-size:.8125rem;font-weight:500;transition:color .2s,background .2s}._cof-toggle-btn:hover{color:var(--cof-text-secondary)}._cof-toggle-btn--active{background:var(--cof-bg);color:var(--cof-text);box-shadow:var(--cof-shadow)}._cof-chords-grid{grid-template-columns:repeat(7,1fr);gap:.375rem;display:grid}._cof-chord{border-radius:var(--cof-radius);cursor:pointer;border-style:solid;border-width:1px;border-color:var(--cof-border);background:var(--cof-bg-secondary);flex-direction:column;align-items:center;gap:.25rem;padding:.5rem .25rem;transition:background .15s;display:flex}._cof-chord:hover{background:var(--cof-primary-light);border-color:var(--cof-primary)}._cof-chord--playing{background:var(--cof-primary);border-color:var(--cof-primary)}._cof-chord--playing ._cof-chord-name,._cof-chord--playing ._cof-chord-numeral{color:#fff}._cof-chord-numeral{color:var(--cof-text-muted);font-size:.6875rem;font-weight:500}._cof-chord-name{color:var(--cof-text);white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:.8125rem;font-weight:600;overflow:hidden}._cof-progressions{flex-direction:column;gap:.5rem;display:flex}._cof-prog-row{border-radius:var(--cof-radius);cursor:pointer;border-style:solid;border-width:1px;border-color:var(--cof-border);background:var(--cof-bg-secondary);align-items:center;gap:.5rem;padding:.5rem .75rem;transition:background .15s;display:flex}._cof-prog-row:hover,._cof-prog-row--active{background:var(--cof-primary-light);border-color:var(--cof-primary)}._cof-prog-label{color:var(--cof-text);min-width:7rem;font-size:.8125rem;font-weight:600;font-family:var(--main-font-mono)}._cof-prog-chords{color:var(--cof-text-secondary);flex:1;font-size:.8125rem}._cof-prog-play{background:var(--cof-primary);color:#fff;border-radius:var(--cof-radius-full);cursor:pointer;border:0 solid #0000;flex-shrink:0;justify-content:center;align-items:center;width:1.75rem;height:1.75rem;transition:opacity .15s;display:inline-flex}._cof-prog-play:hover{opacity:.85}._cof-prog-play svg{width:12px;height:12px}._cof-prog-play--playing{background:var(--cof-accent)}@media (max-width:768px){._cof-key-header{padding:1rem 1.25rem}._cof-key-name{font-size:1.25rem}._cof-card{padding:1rem 1.25rem}._cof-chords-grid{grid-template-columns:repeat(4,1fr)}._cof-prog-label{min-width:auto;font-size:.75rem}._cof-prog-chords{font-size:.75rem}}