/* ===== コードの押さえ方（chords.html 専用。app.css の後に読む） ===== */
a.logo{text-decoration:none}
a.btn{text-decoration:none;display:inline-block}
.seg button.empty{opacity:.35}
.cs-list{padding:14px 18px;margin-bottom:16px}
.cs-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.cs-head h3{margin:0;font-size:12px;letter-spacing:1.5px;color:#8f98ad;font-weight:700}
.cs-head h3 em{font-style:normal;color:#fff;margin-left:8px;letter-spacing:0;font-size:13px}
.cs-alts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.cs-alts .lbl{font-size:12px;color:#8f98ad;margin-right:2px}
.btn.cs-alt.on{border-color:#ff8f9b;background:rgba(255,59,78,.22);box-shadow:0 0 12px rgba(255,59,78,.35)}
.cs-cards{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px}
.cs-card{--c:#fff;flex:none;width:188px;font-family:inherit;color:#fff;cursor:pointer;text-align:left;position:relative;
  background:#0f121c;border:1.5px solid color-mix(in srgb,var(--c) 35%,transparent);border-radius:14px;padding:10px;
  display:flex;flex-direction:column;gap:3px;transition:.2s}
.cs-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c) 70%,transparent)}
.cs-card.on{background:color-mix(in srgb,var(--c) 16%,#0f121c);border-color:var(--c);box-shadow:0 0 22px color-mix(in srgb,var(--c) 45%,transparent)}
.cs-card b{font-size:14px}
.cs-card span{font-size:11px;color:#9aa3b8}
.cs-card .lv{position:absolute;right:8px;top:8px;font-style:normal;font-size:10px;font-weight:800;padding:1px 7px;border-radius:8px;background:#1d2233;color:#cfd5e3}
.cs-card .lv.l1{background:rgba(57,233,145,.18);color:#7ff0b8}
.cs-card .lv.l2{background:rgba(58,184,255,.18);color:#9fdcff}
.cs-mini{width:100%;height:auto;display:block}
.cs-mini .st{stroke:#8a90a3;stroke-width:1}
.cs-mini .fr{stroke:#555b6e;stroke-width:1.2}
.cs-mini .nut{stroke:#fbf5e6;stroke-width:4}
.cs-mini .mx{fill:#8a90a3;font-size:11px;text-anchor:middle;dominant-baseline:central}
.cs-mini .fn{fill:#9aa3b8;font-size:10px;text-anchor:middle}
.cs-note{font-size:13px;color:#ffd36b;background:rgba(255,214,10,.08);border:1px solid rgba(255,214,10,.3);border-radius:12px;padding:8px 12px;margin-bottom:10px}
.cs-empty{color:#9aa3b8;font-size:14px;padding:18px 4px}
.cs-info{font-size:14px;line-height:1.9;color:#c9cfdd}
.cs-info b{color:#fff}
/* ボード上 */
.cs-barre{fill:#fff;fill-opacity:.1;stroke:#fff;stroke-opacity:.55;stroke-width:1.6}
.cs-ghost{cursor:pointer;opacity:.75;transition:opacity .25s}
.cs-ghost:hover{opacity:1}
.cs-gbox{fill-opacity:.02;stroke-opacity:.35;stroke-width:1.6;stroke-dasharray:6 6;transition:.25s}
.cs-ghost:hover .cs-gbox{stroke-opacity:.9;fill-opacity:.08}
.cs-mute{fill:rgba(255,255,255,.5);font-size:22px;font-weight:700}
.cs-dot{cursor:pointer}
.cs-dot:hover .ni{filter:brightness(1.3)}