/* 図の追加(t3)用のスタイル */

/* 小節のコード表 */
.t3-grid{ max-width:560px; }
.t3-phrase{ font-size:12px; color:var(--sub); margin:12px 0 4px; }
.t3-phrase:first-child{ margin-top:0; }
.t3-bars{ display:grid; grid-template-columns:repeat(4, 1fr); border-right:2px solid var(--text); }
.t3-bar{ position:relative; border-left:2px solid var(--text); border-bottom:1px solid var(--line); padding:14px 6px 8px; text-align:center; background:var(--surface); }
.t3-bar i{ position:absolute; left:6px; top:3px; font-style:normal; font-size:10.5px; color:var(--faint); }
.t3-bar b{ display:block; font-size:18px; line-height:1.3; }
.t3-bar span{ display:block; font-size:12px; color:var(--sub); margin-top:1px; }
.t3-bar.t3-fn-S{ background:color-mix(in srgb, var(--fn-s) 11%, var(--surface)); }
.t3-bar.t3-fn-D{ background:color-mix(in srgb, var(--fn-d) 11%, var(--surface)); }
.t3-bar.t3-fn-T b{ color:var(--text); }
.t3-legend{ display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:10px; font-size:12px; color:var(--sub); }
.t3-legend span::before{ content:""; display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px; background:var(--surface-2); border:1px solid var(--line2); }
.t3-legend .t3-fn-S::before{ background:color-mix(in srgb, var(--fn-s) 30%, var(--surface)); }
.t3-legend .t3-fn-D::before{ background:color-mix(in srgb, var(--fn-d) 30%, var(--surface)); }

/* 波・エンベロープ・棒 */
.fig-svg .t3-wavepath{ fill:none; stroke:var(--sub); stroke-width:1.6; stroke-linejoin:round; }
.fig-svg .t3-wavepath.on{ stroke:var(--accent); stroke-width:1.8; }
.fig-svg .t3-node{ fill:var(--surface); stroke:var(--sub); stroke-width:1.2; }
.fig-svg .t3-envpath{ fill:var(--accent-bg); stroke:var(--accent); stroke-width:1.8; stroke-linejoin:round; }
.fig-svg .t3-key{ fill:var(--key-white); stroke:var(--key-edge); stroke-width:.6; }
.fig-svg .t3-key.blk{ fill:var(--key-black); stroke:none; }
.fig-svg .t3-grid-c{ stroke:var(--line); stroke-width:1; }
.fig-svg .t3-rbar{ fill:var(--surface-2); stroke:var(--line2); stroke-width:1; }
.fig-svg .t3-rcore{ fill:var(--accent-bg); stroke:var(--accent); stroke-width:1.2; }
.fig-svg .t3-tbar{ fill:var(--surface-2); stroke:var(--line2); stroke-width:1; }
.fig-svg .t3-tbar.on{ fill:var(--accent); stroke:var(--accent); }
.fig-svg .t3-eb{ stroke-width:1; }
.fig-svg .t3-eb-a{ fill:var(--accent); stroke:var(--accent); }
.fig-svg .t3-eb-b{ fill:var(--accent-bg); stroke:var(--accent); }
.fig-svg .t3-eb-c{ fill:var(--surface-2); stroke:var(--line2); }
.fig-svg .t3-eb-d{ fill:none; stroke:var(--line2); stroke-dasharray:3 3; }
.fig-svg .t3-lolli{ stroke:var(--line2); stroke-width:1.6; }
.fig-svg .t3-dot{ fill:var(--surface); stroke:var(--sub); stroke-width:1.6; }
.fig-svg .t3-dot.on{ fill:var(--accent); stroke:var(--accent); }

/* 指板(カポ) */
.fig-svg .t3-nut{ fill:var(--sub); }
.fig-svg .t3-fret{ stroke:var(--line2); stroke-width:1.2; }
.fig-svg .t3-string{ stroke:var(--sub); stroke-width:1.2; }
.fig-svg .t3-capobar{ fill:var(--accent); opacity:.92; }

/* 微分音を聴く(t3CentPlay) */
.t3-cp{ border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.t3-cp-row{ display:grid; grid-template-columns:minmax(120px, 1.1fr) 2fr auto; gap:6px 14px; align-items:center; padding:10px 14px; background:var(--surface); }
.t3-cp-row + .t3-cp-row{ border-top:1px solid var(--line); }
.t3-cp-name{ font-size:14px; font-weight:600; }
.t3-cp-name small{ display:block; font-size:11.5px; font-weight:400; color:var(--sub); margin-top:1px; }
.t3-cp-chips{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.t3-cp-chips em{ font-style:normal; font-size:11px; color:var(--faint); }
.t3-cp-chip{ min-width:42px; padding:3px 8px; border:1px solid var(--line2); border-radius:6px; background:var(--surface-2); font-size:13px; font-variant-numeric:tabular-nums; text-align:center; }
.t3-cp-chip.playing{ background:var(--accent); border-color:var(--accent); color:#fff; }
.t3-cp-btns{ display:flex; gap:6px; }
.t3-cp-btn{ height:30px; padding:0 12px; border-radius:15px; border:1px solid var(--line2); background:var(--surface); color:var(--text); font-size:12.5px; font-weight:600; }
.t3-cp-btn:hover{ border-color:var(--accent); color:var(--accent); }
@media (max-width:600px){ .t3-cp-row{ grid-template-columns:1fr; } }