/* Explainer kit for Technical Writing articles: typed terminal, code walkthrough,
   request flow, compare, two-way switch, three views, bar placement, token lab,
   video facade, watch links, board images, static code. Built on design system v3:
   the short aliases below point at v3 tokens so every component follows the
   site's light, dark and system themes. Content stays readable without JavaScript;
   /js/explainers.js adds the motion and controls. */

:root {
  --bg: var(--color-bg); --surface: var(--color-surface); --ink: var(--color-text);
  --ink-2: var(--color-text-muted); --muted: var(--color-text-faint);
  --line: var(--color-line); --line-strong: var(--color-line-strong);
  --accent: var(--color-accent); --accent-tint: var(--color-accent-soft);
  /* Terminals and code sit on the night palette in both themes. */
  --night: var(--palette-night-850); --night-2: var(--palette-night-800); --night-line: var(--palette-line-night);
  --bone: var(--palette-bone-100); --bone-2: var(--palette-bone-300); --bone-3: var(--palette-bone-400);
  --lav: var(--palette-lavender-300); --mint: var(--palette-mint-300); --gold: var(--palette-gold-300); --rose: var(--palette-rose-300);
  --ease: cubic-bezier(.4, 0, .2, 1);
  /* Semantic inks for "differs" and "passes" (gold and mint, 700 on light, 300 on dark). */
  --differs: var(--palette-gold-700); --pass-ink: var(--palette-mint-700);
}
[data-theme="dark"] { --night: var(--palette-night-950); --night-2: var(--palette-night-850); --differs: var(--palette-gold-300); --pass-ink: var(--palette-mint-300); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) { --night: var(--palette-night-950); --night-2: var(--palette-night-850); --differs: var(--palette-gold-300); --pass-ink: var(--palette-mint-300); }
}

/* Each explainer is a size container, so its layout follows the column it sits in. */
.fig { container-type: inline-size; }
/* ---------- shared figure chrome ---------- */
.fig { margin: 0; }
.fig figcaption { font-size: 14px; color: var(--muted); margin-top: 10px; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--night-line); font: 500 12px/1 var(--font-mono);
  color: var(--bone-3); letter-spacing: .02em; }
.bar a { color: var(--bone-2); text-decoration: none; border-bottom: 1px solid var(--night-line); }
.bar a:hover { color: var(--bone); }
.ghost { background: none; border: 1px solid var(--night-line); color: var(--bone-2); border-radius: 999px;
  padding: 5px 12px; font: 500 12px/1 var(--font-mono); cursor: pointer; transition: color .2s var(--ease), border-color .2s var(--ease); }
.ghost:hover { color: var(--bone); border-color: rgba(255,255,255,.3); }
.ghost:focus-visible, .step-list button:focus-visible, .ctl:focus-visible { outline: 2px solid var(--lav); outline-offset: 2px; }

/* ---------- 1. typed terminal ---------- */
.term { background: var(--night); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 0 var(--line), 0 24px 48px -32px rgba(0,0,0,.45); }
.term pre { margin: 0; padding: 18px 20px 22px; font: 400 14px/1.7 var(--font-mono); color: var(--bone); overflow-x: auto; min-height: 15.5em; }
.term .cmd::before { content: "$ "; color: var(--lav); }
.term .cmd { color: var(--bone); display: block; }
.term .cmd + .out, .term .out + .cmd { }
.term .out { display: block; color: var(--bone-3); }
.term .out.ok { color: var(--mint); }
.term .gap { display: block; height: .7em; }
.term.is-playing .out, .term.is-playing .gap, .term.is-playing .cmd:not(.shown) { visibility: hidden; }
.term .prompt::before { content: "$ "; color: var(--lav); }
.term pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.term .out.shown, .term .gap.shown { visibility: visible; animation: rise .22s var(--ease) both; }
.caret { display: inline-block; width: .55em; height: 1.15em; margin-left: 1px; vertical-align: -.2em; background: var(--lav); }
.caret.idle { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* ---------- 2. code walkthrough ---------- */
.walk { display: grid; gap: 20px; }
@container (min-width: 820px) { .walk { grid-template-columns: 300px 1fr; align-items: start; } }
.step-list { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 4px; }
.step-list li { counter-increment: s; }
.step-list button, .step-list .static { width: 100%; text-align: left; background: none; border: 0; border-left: 2px solid var(--line);
  padding: 10px 12px 10px 40px; position: relative; color: var(--ink-2); cursor: pointer; border-radius: 0 8px 8px 0;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); font-size: 15px; line-height: 1.5; }
.step-list button::before, .step-list .static::before { content: counter(s); position: absolute; left: 12px; top: 10px;
  font: 500 12px/22px var(--font-mono); width: 20px; height: 22px; text-align: center; color: var(--muted); }
.step-list button b, .step-list .static b { display: block; color: var(--ink); font-weight: 600; }
.step-list .lines { display: block; margin-top: 4px; font: 500 11px var(--font-mono); color: var(--muted); letter-spacing: .02em; }
.step-list button:hover { background: var(--accent-tint); }
.step-list button[aria-current="step"] { border-left-color: var(--accent); background: var(--accent-tint); color: var(--ink); }
.step-list button[aria-current="step"]::before { color: var(--accent); }
.code { background: var(--night); border-radius: 14px; overflow: hidden; }
.code pre { position: relative; margin: 0; background: transparent; border: 0; border-radius: 0; max-height: 460px; overflow: auto; padding: 12px 0; font: 400 13px/1.7 var(--font-mono); color: var(--bone); scroll-behavior: smooth; }
.code .ln { display: block; padding: 0 20px 0 0; border-left: 2px solid transparent; transition: opacity .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease); white-space: pre; }
.code .ln::before { content: attr(data-n); display: inline-block; width: 3.2em; padding-right: 1.2em; text-align: right; color: #5c5955; user-select: none; }
.code.has-focus .ln { opacity: .32; }
.code.has-focus .ln.on { opacity: 1; background: rgba(192,179,255,.07); border-left-color: var(--lav); }
.tk-c { color: #9a958f; font-style: italic; } /* 5.8:1 on the night code ground */ .tk-s { color: var(--mint); } .tk-k { color: var(--lav); } .tk-n { color: var(--gold); }
.nav { display: flex; gap: 8px; margin-top: 12px; }
.ctl { background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 7px 14px; font-size: 14px; cursor: pointer; }
.ctl:hover { border-color: var(--line-strong); }
.ctl[disabled] { opacity: .4; cursor: default; }

/* ---------- 3. request flow ---------- */
.flow { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.flow svg { width: 100%; height: auto; display: block; }
.flow .node rect { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1; transition: stroke .3s var(--ease), fill .3s var(--ease); }
.flow .node text { fill: var(--ink); font: 600 13px var(--font-body); }
.flow .node text.sub { fill: var(--muted); font: 400 11px var(--font-mono); }
.flow .node.fn rect { stroke-dasharray: 4 3; }
.flow .edge { fill: none; stroke: var(--line-strong); stroke-width: 1.25; transition: stroke .3s var(--ease), opacity .3s var(--ease); }
.flow .badge circle { fill: var(--surface); stroke: var(--line-strong); }
.flow .badge text { fill: var(--muted); font: 500 10px var(--font-mono); text-anchor: middle; }
.flow.has-focus .edge { opacity: .25; }
.flow.has-focus .edge.on { opacity: 1; stroke: var(--accent); stroke-width: 1.75; }
.flow.has-focus .node.on rect { stroke: var(--accent); fill: var(--accent-tint); }
.flow.has-focus .badge { opacity: .35; } .flow.has-focus .badge.on { opacity: 1; }
.flow.has-focus .badge.on circle { stroke: var(--accent); } .flow.has-focus .badge.on text { fill: var(--accent); }
.flow .dot { fill: var(--accent); opacity: 0; }
.flow-steps { margin-top: 16px; }
.flow .svg-tall { display: none; }
@container (max-width: 560px) { .flow .svg-wide { display: none; } .flow .svg-tall { display: block; max-width: 360px; margin: 0 auto; } }

/* ---------- 4. token lab ---------- */
.lab { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.lab__bar { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); font: 500 12px/1.3 var(--font-mono); color: var(--muted); }
.lab__bar a { color: var(--ink-2); }
.lab__grid { display: grid; gap: 28px; padding: 22px 18px 24px; }
@container (min-width: 720px) { .lab__grid { grid-template-columns: 1.1fr 1fr; padding: 26px 28px 28px; gap: 36px; } }
.lab__label { font-size: 13px; color: var(--muted); margin: 18px 0 8px; }
.lab__left > .lab__label:first-of-type { margin-top: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); border-radius: 999px; padding: 7px 13px; font-size: 13.5px; cursor: pointer; transition: all .2s var(--ease); }
.chips button:hover { border-color: var(--line-strong); color: var(--ink); }
.chips button[aria-checked="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chips button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Touch targets: chips and pill controls reach 44px where a finger is the pointer. */
@media (pointer: coarse), (max-width: 640px) { .chips button, .ctl { min-height: 44px; } }
.token { margin: 0; padding: 14px 16px; background: var(--night); border-radius: 12px; font: 400 12.5px/1.6 var(--font-mono); color: var(--bone-3); word-break: break-all; max-height: 11.5em; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.token .seg { transition: opacity .3s var(--ease), background .3s var(--ease); border-radius: 3px; }
.seg--h { color: var(--lav); } .seg--p { color: var(--mint); } .seg--s { color: var(--gold); }
.token[data-focus] .seg { opacity: .28; }
.token[data-focus="h"] .seg--h, .token[data-focus="hp"] .seg--h, .token[data-focus="hp"] .seg--p, .token[data-focus="hps"] .seg, .token[data-focus="p"] .seg--p { opacity: 1; }
.token .seg.changed { background: rgba(232,169,184,.16); color: var(--rose); }
.legend { display: flex; gap: 14px; margin-top: 8px; font: 500 11px var(--font-mono); color: var(--muted); }
.legend .k::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.k--h::before { background: var(--lav); } .k--p::before { background: var(--mint); } .k--s::before { background: var(--gold); }
.json { margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; font: 400 12.5px/1.65 var(--font-mono); color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg); }
.json .hot { color: var(--ink); background: var(--accent-tint); border-radius: 3px; padding: 0 2px; }
.json .bad { color: #b0344f; background: rgba(232,169,184,.22); border-radius: 3px; padding: 0 2px; }
.keys { border: 1px dashed var(--line-strong); border-radius: 12px; padding: 12px 14px; }
.keys .lab__label { margin: 0 0 6px; }
.keys__row { margin: 0; font-size: 13px; color: var(--ink); }
.keys__note { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.mono { font-family: var(--font-mono); font-size: 12.5px; } .muted { color: var(--muted); }
.gates { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.gates li { display: grid; grid-template-columns: 28px 1fr 24px; gap: 10px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); transition: border-color .3s var(--ease), background .3s var(--ease), opacity .3s var(--ease); }
.gates b { display: block; font-size: 15px; color: var(--ink); font-weight: 600; }
.gates span { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.gate__n { font: 500 12px/22px var(--font-mono); color: var(--muted); text-align: center; width: 22px; height: 22px; border: 1px solid var(--line-strong); border-radius: 50%; }
.gate__msg { display: none; margin-top: 6px; font: 500 12px/1.4 var(--font-mono); color: #b0344f; }
.gate__state { width: 20px; height: 20px; border-radius: 50%; margin-top: 1px; position: relative; }
.gates li[data-state="checking"] { border-color: var(--accent); }
.gates li[data-state="checking"] .gate__state { border: 2px solid var(--accent-tint); border-top-color: var(--accent); animation: spin .7s linear infinite; }
.gates li[data-state="pass"] .gate__state { background: #1f6e52; }
.gates li[data-state="pass"] .gate__state::after { content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.gates li[data-state="fail"] { border-color: #c2433d; background: rgba(194,67,61,.06); }
.gates li[data-state="fail"] .gate__state { background: #c2433d; }
.gates li[data-state="fail"] .gate__state::before, .gates li[data-state="fail"] .gate__state::after { content: ""; position: absolute; left: 9px; top: 4px; width: 2px; height: 12px; background: #fff; transform: rotate(45deg); }
.gates li[data-state="fail"] .gate__state::after { transform: rotate(-45deg); }
.gates li[data-state="fail"] .gate__msg { display: block; }
.gates li[data-state="skip"] { opacity: .38; }
.gates li[data-state="skip"] span:not(.gate__n) { text-decoration: none; }
.verdict { margin-top: 14px; min-height: 64px; padding: 14px 16px; border-radius: 12px; background: var(--night); color: var(--bone); font-size: 15px; }
.verdict p { margin: 0; color: var(--bone); }
.verdict .log { display: block; margin-top: 6px; font: 400 12px/1.5 var(--font-mono); color: var(--bone-3); }
.verdict .ok { color: var(--mint); } .verdict .no { color: var(--rose); }
.lab__static { color: var(--bone-2) !important; font-size: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }
.gates div > span { display: block; line-height: 1.45; }
@media (max-width: 640px) { .json, .token { font-size: 11.5px; } .chips { gap: 8px; } }
[data-theme="dark"] .gate__msg, [data-theme="dark"] .json .bad { color: var(--rose); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) .gate__msg, :root:not([data-theme="light"]):not([data-theme="dark"]) .json .bad { color: var(--rose); } }

@media (prefers-reduced-motion: reduce) {
  .term .out.shown, .term .gap.shown { animation: none; }
  .code pre { scroll-behavior: auto; }
  * { transition-duration: 0s !important; }
}

/* compare */
.cmp__tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.cmp__tabs button { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 7px 14px; font-size: 14px; cursor: pointer; transition: all .2s var(--ease); }
.cmp__tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cmp__tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cmp__stage { display: grid; gap: 20px; }
.cmp__pane { margin: 0; }
.cmp__pane img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 20px 40px -30px rgba(0,0,0,.35); }
.cmp__pane figcaption { font-size: 14px; color: var(--muted); margin-top: 10px; }
.cmp.is-live .cmp__stage { grid-template-areas: "stack"; }
.cmp.is-live .cmp__pane { grid-area: stack; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; }
.cmp.is-live .cmp__pane.on { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }


/* annotated screenshot */
.ann__img { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.ann__img img { width: 100%; height: auto; display: block; }
.pin { position: absolute; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; background: var(--palette-lav-600, #5b4bc4); color: #fff; font: 600 13px/28px var(--font-mono); text-align: center; box-shadow: 0 0 0 4px rgba(91,75,196,.22); }
.pin--inline { position: static; transform: none; display: inline-block; width: 22px; height: 22px; line-height: 22px; font-size: 11px; margin-right: 8px; box-shadow: none; }
.ann__legend { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; font-size: 15px; color: var(--ink-2); }
.ann__legend b { color: var(--ink); font-weight: 600; }


/* production vs laptop */
.pvl { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.pvl__switch { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); margin-bottom: 20px; }
.pvl__switch button { border: 0; background: none; padding: 7px 16px; border-radius: 999px; font-size: 14px; color: var(--ink-2); cursor: pointer; transition: all .25s var(--ease); }
.pvl__switch button[aria-checked="true"] { background: var(--ink); color: var(--bg); }
.pvl__switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pvl__row { display: grid; grid-template-columns: 1fr 28px 1.15fr 28px 1.25fr 28px 1.1fr; align-items: center; }
.pvl__arrow { height: 1px; background: var(--line-strong); position: relative; }
.pvl__arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 4.5px solid transparent; border-left: 6px solid var(--line-strong); border-right: 0; }
.pvl__node { border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 12px 11px; background: var(--bg); min-height: 96px; display: flex; flex-direction: column; justify-content: center; gap: 4px; position: relative; transition: border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease); }
.pvl__node b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.pvl__node span { font: 400 12px/1.4 var(--font-mono); color: var(--muted); }
.pvl__node--fn { border-style: dashed; }
.pvl__stack { display: grid; gap: 10px; }
.pvl__stack .pvl__node { min-height: 0; }
.pvl [data-swap] { transition: opacity .22s var(--ease); }
.pvl.is-swapping [data-swap] { opacity: 0; }
.pvl__tag { position: absolute; top: -10px; left: 10px; font: 600 10px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--muted); }
.pvl__node.differs { border-color: var(--differs); box-shadow: 0 0 0 4px rgba(240,207,142,.28); }
.pvl__node.differs .pvl__tag { border-color: var(--differs); color: var(--differs); }
.pvl__node.same .pvl__tag { border-color: var(--pass-ink); color: var(--pass-ink); }
.pvl__notes { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.pvl__notes li { font-size: 14.5px; color: var(--ink-2); padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); line-height: 1.5; }
.pvl__notes li b { display: block; color: var(--ink); font-size: 13px; font-family: var(--font-mono); font-weight: 500; margin-bottom: 2px; }
.pvl__notes li.differs { border-color: var(--differs); }
.pvl__notes li.differs b { color: var(--differs); }
.pvl figcaption { margin-top: 14px; }
@container (max-width: 640px) {
  .pvl__row { grid-template-columns: 1fr; gap: 0; }
  .pvl__arrow { width: 1px; height: 22px; margin: 0 auto; }
  .pvl__arrow::after { right: -4px; top: auto; bottom: -1px; border: 4.5px solid transparent; border-top: 6px solid var(--line-strong); border-bottom: 0; }
  .pvl__node { min-height: 0; }
  .pvl__stack { grid-template-columns: 1fr 1fr; }
  .pvl__notes { grid-template-columns: 1fr; }
}


/* three views of one request */
.tv { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.tv__hops { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.tv__hops button { border: 0; background: none; padding: 14px 16px; text-align: left; cursor: pointer; color: var(--muted); font-size: 14px; border-bottom: 2px solid transparent; transition: all .25s var(--ease); }
.tv__hops button b { display: block; font: 500 11px var(--font-mono); letter-spacing: .04em; color: var(--muted); margin-bottom: 2px; }
.tv__hops button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); background: var(--accent-tint); }
.tv__hops button[aria-selected="true"] b { color: var(--accent); }
.tv__hops button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tv__body { display: grid; gap: 20px; padding: 20px; }
@container (min-width: 700px) { .tv__body { grid-template-columns: 1.35fr 1fr; padding: 24px 26px; } }
.tv__panel[hidden] { display: none; }
.tv__req { background: var(--night); color: var(--bone); border-radius: 12px; padding: 14px 16px; font: 400 12.5px/1.75 var(--font-mono); overflow-wrap: anywhere; }
.tv__req .l { display: block; color: var(--bone-3); }
.tv__req .l b { color: var(--bone-2); font-weight: 500; }
.tv__req .first { color: var(--bone); margin-bottom: 6px; }
.tv__req .gone { display: block; color: #7d7975; text-decoration: line-through; }
.tok { display: inline-block; padding: 0 8px; border-radius: 999px; background: rgba(240,207,142,.16); border: 1px solid rgba(240,207,142,.55); color: var(--gold); view-transition-name: token; }
.tv__say { font-size: 15px; color: var(--ink-2); margin: 0; }
.tv__say b { color: var(--ink); display: block; margin-bottom: 6px; font-size: 16px; }
.tv__say + .tv__say { margin-top: 10px; }
.tv__src { font: 400 12px/1.5 var(--font-mono); color: var(--muted); margin-top: 12px; }
.tv__static h4 { font: 600 13px var(--font-mono); margin: 18px 0 6px; color: var(--ink); }
::view-transition-group(token) { animation-duration: .55s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }


/* where the bar goes */
.bp { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.bp__grid { display: grid; gap: 20px; margin-top: 16px; }
@container (min-width: 900px) { .bp__grid { grid-template-columns: 1fr 1.15fr; } }
.bp__mode[hidden] { display: none; }
.bp__tree { background: var(--night); color: var(--bone-3); border-radius: 12px; padding: 14px 16px; margin: 0; font: 400 12.5px/1.8 var(--font-mono); white-space: pre; overflow-x: auto; }
.bp__tree .t-bar { color: var(--gold); }
.bp__tree .t-add { color: var(--rose); background: rgba(232,169,184,.12); border-radius: 3px; }
.bp__tree .t-note { color: #7d7975; font-style: italic; }
.bp.is-live .bp__tree .t-add { animation: stamp .5s var(--ease) both; }
.bp.is-live .bp__tree .t-add:nth-of-type(2) { animation-delay: .25s; } .bp.is-live .bp__tree .t-add:nth-of-type(3) { animation-delay: .5s; }
@keyframes stamp { from { background: rgba(232,169,184,.55); color: #fff; } to { background: rgba(232,169,184,.12); } }
.bp__shot { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.bp__shot img { width: 100%; height: auto; display: block; }
.bp__console { margin: 10px 0 0; background: var(--night); border-radius: 12px; padding: 10px 14px; font: 400 11.5px/1.7 var(--font-mono); color: var(--rose); overflow-wrap: anywhere; }
.bp__console span { display: block; }
.bp__ok { margin: 10px 0 0; font: 500 12.5px var(--font-mono); color: var(--pass-ink); }
.bp__label { font: 500 12px var(--font-mono); color: var(--muted); margin: 0 0 8px; }
.bp figcaption { margin-top: 14px; }


/* video */
.video__facade { display: block; position: relative; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.video__facade img { width: 100%; height: 100%; object-fit: cover; opacity: .94; transition: opacity .3s var(--ease); }
.video__facade:hover img { opacity: 1; }
.video__play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: rgba(255,255,255,.92); }
.video__play::after { content: ""; position: absolute; left: 27px; top: 21px; border: 13px solid transparent; border-left: 20px solid #1a1917; border-right: 0; }
.video__label { position: absolute; left: 14px; bottom: 14px; color: #fff; font: 500 13px var(--font-mono); background: rgba(26,25,23,.8); padding: 5px 10px; border-radius: 999px; }
.video iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; display: block; }

@media (prefers-reduced-motion: reduce) {
  .cmp.is-live .cmp__pane, .pvl [data-swap] { transition: none; }
  .bp.is-live .bp__tree .t-add { animation: none; }
  ::view-transition-group(token) { animation-duration: 0s; }
}


/* Grid children default to min-width: auto, so a long code line would widen the page on phones. */
.bp__grid > *, .lab__grid > *, .tv__body > *, .walk > *, .pvl__row > * { min-width: 0; }


/* v3: the video sits under the summary, watch links per part, the board images, static code */
.watch { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; font-size: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.watch__label { font: 500 11px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.watch a { color: var(--ink-2) !important; text-decoration: none; }
.watch a:hover { color: var(--accent) !important; }
.watch__t { font: 500 12.5px var(--font-mono); color: var(--accent); margin-right: 2px; }
.board img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.board figcaption { font-size: 14px; color: var(--muted); margin-top: 10px; }
.code--static { margin-top: 24px; margin-bottom: 24px; }
.code--static pre { max-height: none; }

@media (prefers-reduced-motion: reduce) {
  .cmp.is-live .cmp__pane, .pvl [data-swap] { transition: none; }
  .bp.is-live .bp__tree .t-add { animation: none; }
  ::view-transition-group(token) { animation-duration: 0s; }
}