.cof-stage{gap:var(--space-2)}.cof-top{display:flex;align-items:center;justify-content:center;gap:10px}.cof-wheel{width:min(100%,440px);aspect-ratio:1}.cof-svg{width:100%;height:100%;overflow:visible;touch-action:manipulation}.cof-seg{cursor:pointer;outline:none}.cof-seg path{fill:var(--color-surface-2);stroke:var(--color-border);stroke-width:1;transition:fill .18s ease}.cof-seg--min path{fill:var(--color-surface-3)}.cof-seg:hover path{fill:var(--color-accent-dim)}.cof-seg:focus-visible path{stroke:var(--color-accent);stroke-width:2.5}.cof-seg.is-near path{fill:var(--color-accent-dim);stroke:var(--color-accent);stroke-opacity:.5}.cof-seg.is-sel path{fill:var(--color-accent);stroke:var(--color-accent)}.cof-t{text-anchor:middle;fill:var(--color-ink);font-family:var(--font-heading);font-weight:700;pointer-events:none}.cof-t--maj{font-size:21px}.cof-t--min{font-size:16px;fill:var(--color-ink-soft)}.cof-t--sig{font-family:var(--font-body);font-size:13px;fill:var(--color-gray)}.cof-seg.is-sel .cof-t,.cof-seg.is-sel .cof-t--sig{fill:var(--color-on-accent)}.cof-center{fill:var(--color-surface);stroke:var(--color-border)}.cof-c1{text-anchor:middle;font-family:var(--font-heading);font-weight:700;font-size:40px;fill:var(--color-ink)}.cof-c2{text-anchor:middle;font-family:var(--font-body);font-weight:700;font-size:14px;letter-spacing:.06em;fill:var(--color-gray)}.cof-chords{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;width:100%;max-width:560px;min-height:58px}.cof-chord{display:grid;justify-items:center;align-content:center;gap:2px;min-height:58px;padding:4px 2px;border-radius:var(--radius-media);border:1px solid var(--color-hairline);background:var(--color-surface-2);color:var(--color-ink);box-shadow:var(--shadow-sm);touch-action:manipulation;transition:border-color .15s ease,background .15s ease}.cof-chord:hover{border-color:var(--color-accent)}.cof-chord__rn{font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;color:var(--color-accent-ink)}.cof-chord__nm{font-family:var(--font-heading);font-weight:700;font-size:var(--fs-md);white-space:nowrap}.cof-chord.is-on{animation:cof-hit .5s var(--ease)}@keyframes cof-hit{0%{background:var(--color-accent);color:var(--color-on-accent);transform:scale(.96)}to{transform:none}}.cof-chord.is-on .cof-chord__rn{animation:cof-hit-rn .5s var(--ease)}@keyframes cof-hit-rn{0%{color:var(--color-on-accent)}}.cof-hint{margin:0;font-size:var(--fs-sm);color:var(--color-gray)}.cof-facts{margin:0;display:grid;gap:10px}.cof-facts div{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;align-items:baseline}.cof-facts dt{font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-gray)}.cof-facts dd{margin:0;font-weight:700;font-size:var(--fs-base)}.cof-scale{display:flex;flex-wrap:wrap;gap:6px}.cof-note{padding:3px 10px;border-radius:999px;background:var(--color-surface-2);border:1px solid var(--color-hairline);font-size:var(--fs-base)}.cof-note.is-tonic{background:var(--color-accent-dim);border-color:var(--color-accent);color:var(--color-accent-ink)}.cof-player{display:flex;align-items:flex-end;gap:var(--space-2)}.cof-tempo{flex:1}.cof-tempo .stepper{grid-template-columns:var(--tap-sm) minmax(0,1fr) var(--tap-sm)}.cof-tempo .stepper__value{height:var(--tap-sm)}.cof-prog-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;min-height:34px}.cof-prog-label{width:100%;font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;color:var(--color-gray)}.cof-prog-ch{padding:4px 10px;border-radius:var(--radius);background:var(--color-surface-2);border:1px solid var(--color-hairline);font-family:var(--font-heading);font-weight:700;font-size:var(--fs-base);transition:background .1s ease}.cof-prog-ch.is-on{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}.stage:fullscreen .cof-wheel,.stage.is-stage-mode .cof-wheel{width:min(92vw,66vh)}.stage:fullscreen .cof-chords,.stage.is-stage-mode .cof-chords{max-width:900px}.stage:fullscreen .cof-chord,.stage.is-stage-mode .cof-chord{min-height:76px}.stage:fullscreen .cof-chord__nm,.stage.is-stage-mode .cof-chord__nm{font-size:var(--fs-xl)}@media (max-width: 600px){.cof-stage{gap:12px}.cof-wheel{width:min(100%,52vh)}.cof-chords{gap:5px;min-height:52px}.cof-chord{min-height:52px;padding:4px 0}.cof-chord__nm{font-size:var(--fs-sm);letter-spacing:-.01em}.cof-facts div{grid-template-columns:72px minmax(0,1fr)}}