.deck-article, .viz-tip {
  --s-hero: #c98500;
  --s-rest: color-mix(in srgb, var(--text) 26%, var(--bg));
  --viz-grid: color-mix(in srgb, var(--text) 10%, transparent);
  --viz-surface: var(--bg);
}
:root[data-theme="light"] .deck-article, :root[data-theme="light"] .viz-tip {
  --s-hero: #eda100;
  --s-rest: color-mix(in srgb, var(--text) 22%, var(--bg));
}
.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-sub { margin: -8px 0 16px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.viz-seg { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); }
.viz-seg button {
  border: 0; background: none; cursor: pointer;
  padding: 6px 12px; border-radius: 999px;
  font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--muted);
}
.viz-seg button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.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-cap { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.viz-arrow { flex: 0 0 18px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.viz-arrow svg { display: block; }

.mp { display: flex; align-items: flex-start; }
.mp-grp { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.mp-grp.g1 { flex: 3 1 36px; }
.mp-grp.g2 { flex: 2 1 18px; }
.mp > .viz-arrow { align-self: flex-start; }
.mp-steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; }
.mp-steps > li { margin: 0; }
.mp-step {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  padding: 16px 8px; border: 1px solid var(--border); border-radius: 12px; text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.mp-step b { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.mp-step span { font-size: 12px; line-height: 1.4; color: var(--muted); }
.mp-brk { border-top: 2px solid color-mix(in srgb, var(--text) 40%, transparent); padding-top: 8px; text-align: center; font-size: 12.5px; color: var(--muted); }
.mp-grp.g2 .mp-brk { border-top-color: var(--s-hero); }
.mp-grp:hover .mp-step { background: color-mix(in srgb, var(--text) 6%, transparent); border-color: color-mix(in srgb, var(--text) 40%, var(--border)); }
.mp-grp:hover .mp-brk { color: var(--text); }
.mp:has(.mp-grp:hover) .mp-grp:not(:hover) .mp-step { opacity: 0.5; }
.viz-host.is-stack .mp { flex-direction: column; align-items: stretch; }
.viz-host.is-stack .mp > .viz-arrow { flex-basis: 22px; align-self: stretch; }
.viz-host.is-stack .mp-grp { flex: 0 0 auto; }
.viz-host.is-stack .mp-steps { flex-direction: column; }
.viz-host.is-stack .mp-step { padding: 10px 12px; }
.viz-host.is-stack .viz-arrow svg { transform: rotate(90deg); }
.viz-host.is-stack .mp-steps .viz-arrow { flex-basis: 16px; }

.rw { display: flex; gap: 10px; }
.rw-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; transition: opacity 0.15s ease; }
.rw-name, .rw-val { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: center; border-radius: 8px; padding: 7px 6px; overflow-wrap: anywhere; }
.rw-name { font-size: 13px; font-weight: 700; color: var(--text); background: color-mix(in srgb, var(--text) 12%, var(--bg)); border: 1px solid transparent; }
.rw-col.is-id .rw-name { background: transparent; border-color: var(--border); }
.rw-col.is-key .rw-name { background: color-mix(in srgb, var(--s-hero) 22%, var(--bg)); border-color: var(--s-hero); }
.rw-val { font-size: 14px; color: var(--text); border: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.rw:has(.rw-col:hover) .rw-col:not(:hover) { opacity: 0.5; }
.rw-note { margin: 14px 0 0; text-align: center; font-size: 12.5px; font-style: italic; color: var(--muted); }
.viz-host.is-stack .rw { flex-direction: column; gap: 6px; }
.viz-host.is-stack .rw-col { flex-direction: row; gap: 6px; }
.viz-host.is-stack .rw-name, .viz-host.is-stack .rw-val { flex: 1 1 0; }

.xs-rows { display: flex; flex-direction: column; }
.xs-row b { display: block; margin: 0 0 6px; font-size: 13px; color: var(--text); }
.xs-row b span { font-weight: 400; color: var(--muted); margin-left: 6px; }
.xs-strip { display: flex; gap: 2px; height: 30px; }
.xs-strip i { display: block; min-width: 2px; border-radius: 4px; background: var(--s-rest); transition: background 0.15s ease; }
.xs-strip i:hover { background: color-mix(in srgb, var(--text) 55%, var(--bg)); }
.xs-link { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding-left: 14px; font-size: 12.5px; color: var(--muted); }
.xs-link::before { content: ""; flex: 0 0 0; align-self: stretch; min-height: 34px; border-left: 2px solid var(--s-hero); }
.xs-link.is-off::before { border-left: 2px dashed color-mix(in srgb, var(--text) 35%, transparent); }
.xs-tag {
  padding: 1px 8px; border-radius: 999px; font-style: normal;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text); border: 1px solid var(--s-hero); background: color-mix(in srgb, var(--s-hero) 22%, var(--bg));
}
.xs-link.is-off .xs-tag { color: var(--muted); border: 1px dashed color-mix(in srgb, var(--text) 35%, transparent); background: transparent; }
.viz-legend i.lg-shot { width: 22px; background: var(--s-rest); }

@media (max-width: 520px) {
  .viz-seg button { padding: 6px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-step, .rw-col, .xs-strip i { transition: none; }
}