.deck-article { --s-hero: #c98500; }
:root[data-theme="light"] .deck-article { --s-hero: #eda100; }
.viz-host[data-viz] { width: 100%; min-width: 0; }
.viz-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.viz-title { margin-right: auto; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.viz-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.viz-legend span { display: inline-flex; align-items: center; gap: 6px; }
.viz-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.viz-legend i.lg-hero { border-radius: 50%; background: var(--s-hero); }
.viz-legend i.lg-rest { border-radius: 50%; background: color-mix(in srgb, var(--text) 45%, var(--bg)); }
.viz-legend i.lg-arc { width: 22px; height: 8px; border: 1.5px solid color-mix(in srgb, var(--text) 55%, transparent); border-bottom: 0; border-radius: 11px 11px 0 0; background: none; }
.viz-cap { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.gl-wrap { position: relative; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.gl-wrap.is-drag { cursor: grabbing; }
.gl-wrap canvas { display: block; width: 100%; }
.gl-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.gl-arc { fill: none; stroke: color-mix(in srgb, var(--text) 50%, transparent); stroke-width: 1.4; stroke-linecap: round; transition: opacity 0.15s ease, stroke 0.15s ease; }
.gl-don circle { fill: none; transition: opacity 0.15s ease; }
.gl-don .hole { fill: var(--bg); fill-opacity: 0.55; stroke: none; }
.gl-don .seg-0 { stroke: var(--s-hero); }
.gl-don .seg-1 { stroke: color-mix(in srgb, var(--text) 62%, var(--bg)); }
.gl-don .seg-2 { stroke: color-mix(in srgb, var(--text) 36%, var(--bg)); }
.gl-don .hit { fill: transparent; stroke: none; cursor: pointer; }
.gl-wrap.has-focus .gl-arc { opacity: 0.15; }
.gl-wrap.has-focus .gl-arc.is-on { opacity: 1; stroke: var(--text); stroke-width: 2; }
.gl-wrap.has-focus .gl-don { opacity: 0.35; }
.gl-wrap.has-focus .gl-don.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .gl-arc, .gl-don circle { transition: none; }
}