.cot-page{--cot-node:#f3effa;--cot-ink:#2b2433;--cot-faint:#8a8296;--cot-major:#9b5de5;--cot-minor:#2f9e63;--cot-major-bg:#e3cdfb;--cot-minor-bg:#cfe7d6;--cot-dim-bg:#f6dcc3;--cot-root:#aa3bff;--cot-lit:#d4a017;--cot-in-chord:#ead9fb;--cot-shape-0:#9b5de5;--cot-shape-1:#2f9e63;--cot-shape-2:#e07a1f;--cot-shape-3:#2f7fd0;flex-direction:column;gap:18px;width:100%;max-width:1160px;margin:0 auto;padding:24px 24px 80px;display:flex}@media (prefers-color-scheme:dark){.cot-page{--cot-node:#2a2633;--cot-ink:#ece8f3;--cot-faint:#8e889b;--cot-major:#b98af0;--cot-minor:#5cc48a;--cot-major-bg:#4f3770;--cot-minor-bg:#2f4f3b;--cot-dim-bg:#5a4128;--cot-root:#b45cff;--cot-in-chord:#3d2d55}}.cot-section{border:1px solid var(--border);text-align:left;border-radius:14px;flex-direction:column;gap:12px;padding:16px 18px 18px;display:flex}.cot-section-head h2{margin:0 0 4px}.cot-section-head p,.cot-text{color:var(--text);max-width:900px;margin:0;font-size:14px}.cot-key-layout{grid-template-columns:minmax(0,1fr) minmax(300px,1fr);align-items:start;gap:20px;display:grid}@media (width<=860px){.cot-key-layout{grid-template-columns:minmax(0,1fr)}}.cot-key-circle,.cot-cycle,.cot-clock{-webkit-user-select:none;user-select:none;justify-self:center;width:100%;max-width:480px;height:auto}.cot-clock{max-width:380px}.cot-controls{color:var(--text-h);flex-wrap:wrap;align-items:center;gap:10px 18px;font-size:13px;display:flex}.cot-controls label{align-items:center;gap:6px;display:flex}.cot-page select{font:inherit;border:1px solid var(--border);background:var(--code-bg);color:var(--text-h);border-radius:6px;padding:4px 6px;font-size:13px}.cot-segmented{border:1px solid var(--border);border-radius:8px;flex-wrap:wrap;display:inline-flex;overflow:hidden}.cot-segmented button{font:inherit;color:var(--text);cursor:pointer;background:0 0;border:none;padding:5px 12px;font-size:13px}.cot-segmented button.active{background:var(--accent-bg);color:var(--text-h);font-weight:600}.cot-edge line{stroke:var(--border);stroke-width:3px}.cot-edge text{fill:var(--cot-faint);font-size:13px;font-weight:700}.cot-edge.active.major line{stroke:var(--cot-major);stroke-width:7px}.cot-edge.active.minor line{stroke:var(--cot-minor);stroke-width:7px}.cot-edge.active.major text{fill:var(--cot-major)}.cot-edge.active.minor text{fill:var(--cot-minor)}.cot-node,.cot-cycle-node,.cot-clock-node,.cot-clock-shape{cursor:pointer}.cot-node circle,.cot-cycle-node circle,.cot-clock-node circle{fill:var(--cot-node);stroke:var(--border);stroke-width:2px;transition:fill .1s}.cot-node.in-chord circle{fill:var(--cot-in-chord);stroke:var(--accent-border)}.cot-node.root circle,.cot-cycle-node.root circle{fill:var(--cot-root);stroke:var(--cot-root)}.cot-node.lit circle,.cot-cycle-node.lit circle,.cot-clock-node.lit circle{fill:var(--cot-lit);stroke:var(--cot-lit)}.cot-node text,.cot-cycle-node text,.cot-clock-node text{pointer-events:none;fill:var(--cot-ink)}.cot-node.root text,.cot-cycle-node.root text{fill:#fff}.cot-node.lit text,.cot-cycle-node.lit text,.cot-clock-node.lit text{fill:#2b2433}.cot-node-name{font-size:20px;font-weight:700}.cot-node-solfege{font-size:11px}.cot-node .cot-node-numeral,.cot-node.root .cot-node-numeral,.cot-node.lit .cot-node-numeral{font-family:Georgia,Times New Roman,serif;font-size:15px;font-style:italic;font-weight:700}.cot-node .cot-node-numeral.major{fill:var(--cot-major)}.cot-node .cot-node-numeral.minor{fill:var(--cot-minor)}.cot-node .cot-node-numeral.diminished{fill:#c0661a}.cot-center-name{fill:var(--text-h);font-size:26px;font-weight:700}.cot-center-detail{fill:var(--text);font-size:13px}.cot-empty{border:1px dashed var(--border);color:var(--text);border-radius:10px;margin:0;padding:14px 16px;font-size:14px}.cot-chord-panel{flex-direction:column;gap:12px;display:flex}.cot-chord-title{flex-wrap:wrap;align-items:center;gap:8px 14px;display:flex}.cot-chord-title h3{color:var(--text-h);margin:0;font-size:26px;font-weight:700}.cot-quality{color:var(--text-h);border-radius:6px;padding:2px 8px;font-size:13px}.cot-quality.major{background:var(--cot-major-bg)}.cot-quality.minor{background:var(--cot-minor-bg)}.cot-quality.diminished{background:var(--cot-dim-bg)}.cot-stack{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.cot-stack-item{align-items:center;gap:4px;display:flex}.cot-tone{border:1px solid var(--border);min-width:42px;color:var(--text-h);border-radius:8px;flex-direction:column;align-items:center;padding:3px 6px;line-height:1.2;display:flex}.cot-tone small{color:var(--text);font-size:10px}.cot-tone.lit{background:#d4a0174d}.cot-third{font-size:11px;font-weight:700}.cot-third.major{color:var(--cot-major)}.cot-third.minor{color:var(--cot-minor)}.cot-buttons{flex-wrap:wrap;gap:8px;display:flex}.cot-btn{font:inherit;cursor:pointer;border:1px solid var(--accent-border);background:var(--accent-bg);color:var(--text-h);border-radius:8px;padding:6px 12px;font-size:13px}.cot-btn.playing{border-color:var(--accent);background:var(--accent);color:#fff}.cot-btn.subtle{border-color:var(--border);background:var(--code-bg)}.cot-cycle-fifths{fill:none;stroke:var(--border);stroke-dasharray:4 5}.cot-cycle-edge{stroke:var(--border);stroke-width:2px}.cot-cycle-edge.active.major{stroke:var(--cot-major);stroke-width:6px}.cot-cycle-edge.active.minor{stroke:var(--cot-minor);stroke-width:6px}.cot-cycle-node.major circle{fill:var(--cot-major-bg)}.cot-cycle-node.minor circle{fill:var(--cot-minor-bg)}.cot-cycle-node.in-chord circle{stroke:var(--cot-root);stroke-width:3px}.cot-cycle-label{font-size:15px;font-weight:700}.cot-cycle-label.small{font-size:10px}.cot-shared{color:var(--text-h);flex-direction:column;gap:4px;margin:0;padding-left:18px;font-size:14px;display:flex}.cot-clock-shape{fill-opacity:.06;stroke-width:2px;stroke-opacity:.45}.cot-clock-shape.active{fill-opacity:.22;stroke-width:4px;stroke-opacity:1}.cot-clock-shape.g0{fill:var(--cot-shape-0);stroke:var(--cot-shape-0)}.cot-clock-shape.g1{fill:var(--cot-shape-1);stroke:var(--cot-shape-1)}.cot-clock-shape.g2{fill:var(--cot-shape-2);stroke:var(--cot-shape-2)}.cot-clock-shape.g3{fill:var(--cot-shape-3);stroke:var(--cot-shape-3)}.cot-clock-node.active.g0 circle{stroke:var(--cot-shape-0);stroke-width:3px}.cot-clock-node.active.g1 circle{stroke:var(--cot-shape-1);stroke-width:3px}.cot-clock-node.active.g2 circle{stroke:var(--cot-shape-2);stroke-width:3px}.cot-clock-node.active.g3 circle{stroke:var(--cot-shape-3);stroke-width:3px}.cot-clock-label{font-size:14px;font-weight:700}.cot-clock-label.small{font-size:10px}.cot-equal-list{color:var(--text-h);flex-direction:column;gap:4px;margin:0;padding:0;font-size:14px;list-style:none;display:flex}.cot-equal-list li{border-radius:6px;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:3px 6px;display:flex}.cot-equal-list li.active{background:var(--accent-bg)}.cot-equal-list li strong{min-width:8em}.cot-equal-list li span{color:var(--text);font-size:13px}.cot-equal-play{line-height:1;font:inherit;cursor:pointer;border:2px solid var(--border);background:var(--code-bg);width:28px;height:22px;color:var(--text-h);border-radius:6px;justify-content:center;align-items:center;padding:0;font-size:11px;display:inline-flex}.cot-equal-play.g0{border-color:var(--cot-shape-0)}.cot-equal-play.g1{border-color:var(--cot-shape-1)}.cot-equal-play.g2{border-color:var(--cot-shape-2)}.cot-equal-play.g3{border-color:var(--cot-shape-3)}.cot-cycle-node.root.root circle{fill:var(--cot-root);stroke:var(--cot-root)}.cot-cycle-node.lit.lit circle{fill:var(--cot-lit);stroke:var(--cot-lit)}