/* token-bucket: palette and scene layout. Loaded after video-kit/stage/base.css and anatomy/kit/iso.css.
 * Frame 1920×1080; vertical — #stage.v (1080×1920), captions in the frame — #stage.cc.
 * The figure is the persistent layer .l-machine (film.layers), the scenes on top — labels, counters, a chart. */
:root {
  /* paper and ink — like anatomy's light theme, the accent — anatomy blue */
  --bg: #F2F2EF; --paper: #FBFBFA; --mist: #E7E7E3; --line: #DADAD5; --haze: #ECECE8;
  --ink: #18181A; --ink2: #3A3A3E; --muted: #6E6E73; --cloud: #9A9A9F;
  --accent: #3E63DD; --accent-d: #2F4FB8; --accent-soft: #DFE6FB; --accent-on-dark: #9DB2F5;
  --ok: #30A46C; --no: #E5484D; --he: #C27C0E;
}
#bg { display: none; }

/* ================================================================ machine */
.l-machine .fig { position: absolute; left: 0; top: 0; will-change: transform; }
.l-machine .fig.iso { --anatomy-weight: 1.1px; background: none; }
#stage.v .l-machine .fig.iso { --anatomy-weight: 1px; }

/* ================================================================ participants */
.spk[data-voice="he"] .ava { background: var(--he); }
.spk[data-voice="he"].on .ava { color: var(--paper); }
#cc[data-voice="he"] span { box-shadow: inset 6px 0 0 var(--he); }

/* ================================================================ pin labels */
.pl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pl line { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.pin { position: absolute; left: 0; top: 0; }
.pin .dot { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 5px var(--accent); transform-origin: 11px 11px; }
.pin .lbl { position: absolute; left: 0; top: 0; will-change: transform; padding: 12px 20px; border-radius: 14px; background: var(--paper); box-shadow: 0 0 0 2px var(--accent), 0 10px 30px rgba(24, 24, 26, .1); font: 500 34px/1.15 Sans, sans-serif; color: var(--ink); white-space: nowrap; }
.pin .lbl b { font-weight: 700; color: var(--accent-d); }

/* ================================================================ question */
.ttl { position: absolute; left: 140px; top: 150px; width: 980px; }
.ttl .eyebrow { color: var(--accent-d); }
.ttl h1 { margin: 22px 0 0 -4px; font: 400 100px/1.02 Serif; letter-spacing: -.03em; }
.ttl h1 em { color: var(--no); }
.code-chip { display: inline-block; margin-top: 34px; padding: 14px 22px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 30px; letter-spacing: .02em; text-transform: none; box-shadow: inset 6px 0 0 var(--no); }

/* ================================================================ burst: counters */
.count { position: absolute; right: 140px; top: 150px; display: grid; grid-template-columns: auto auto; gap: 8px 44px; justify-items: start; }
.count > div { display: flex; flex-direction: column; gap: 6px; }
.count b { font: 600 120px/0.9 Sans, sans-serif; font-variant-numeric: tabular-nums; }
.count span { font: 400 22px/1 Mono, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.count .c-ok b { color: var(--ok); }
.count .c-no b { color: var(--no); }
.count .c-sum { grid-column: 1 / -1; margin-top: 18px; color: var(--ink2); }

/* ================================================================ on average: chart */
.chart { position: absolute; right: 110px; top: 150px; width: 660px; padding: 26px 30px 24px; border-radius: 24px; background: var(--paper); box-shadow: 0 0 0 1.5px var(--line), 0 20px 50px rgba(24, 24, 26, .08); }
.chart .ch-t { color: var(--ink2); }
.chart svg { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.chart .grid line { stroke: var(--line); stroke-width: 1.2; }
.chart .grid text, .chart .ax { font: 400 17px Mono, monospace; fill: var(--muted); }
.chart .bound { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 9 7; fill: none; }
.chart .lb-bound { font: 600 22px Sans, sans-serif; fill: var(--accent-d); }
.chart .sent { stroke: var(--cloud); stroke-width: 3; fill: none; stroke-linejoin: round; }
.chart .passed { stroke: var(--ok); stroke-width: 5; fill: none; stroke-linejoin: round; }
.chart .ch-k { display: flex; gap: 28px; margin-top: 12px; font: 500 21px Sans, sans-serif; color: var(--muted); }
.chart .ch-k span::before { content: ''; display: inline-block; width: 26px; height: 5px; margin-right: 10px; vertical-align: middle; border-radius: 3px; }
.chart .k-sent::before { background: var(--cloud); }
.chart .k-passed { color: var(--ink); }
.chart .k-passed::before { background: var(--ok); }
.chart .k-passed b { font-variant-numeric: tabular-nums; }
.formula { position: absolute; right: 110px; top: 690px; width: 660px; padding: 22px 30px; border-radius: 20px; background: var(--ink); color: #fff; font: 400 50px/1.1 Serif; text-align: center; }
.formula b { font-style: italic; font-weight: 400; color: var(--accent-on-dark); }

/* ================================================================ two knobs: the server's response */
.code { position: absolute; left: 140px; top: 760px; display: flex; flex-direction: column; gap: 4px; padding: 22px 28px; border-radius: 16px; background: var(--ink); color: #fff; font: 400 32px/1.35 Mono, monospace; box-shadow: inset 6px 0 0 var(--no); }
.code .l1 { color: var(--accent-on-dark); }

/* ================================================================ finale */
.fin { position: absolute; left: 140px; top: 170px; width: 900px; }
.fin h1 { margin: 0 0 30px -4px; font: 400 120px/1 Serif; letter-spacing: -.03em; }
.fin .ln { margin: 12px 0; font: 400 40px/1.25 Sans, sans-serif; color: var(--ink2); }
.fin .ln b { color: var(--accent-d); font-weight: 700; }
.fin .cta { margin-top: 40px; color: var(--accent-d); }

/* ================================================================ vertical frame 1080×1920 */
#stage.v .ttl { left: 80px; top: 1160px; width: 920px; }
#stage.v .ttl h1 { font-size: 92px; text-wrap: balance; }
#stage.v .code-chip { font-size: 28px; }
#stage.v .pin .lbl { font-size: 32px; }
#stage.v .count { left: 80px; right: auto; top: 1180px; gap: 8px 70px; }
#stage.v .chart { left: 160px; right: auto; top: 900px; width: 760px; }
#stage.v .formula { left: 160px; right: auto; top: 250px; width: 760px; font-size: 48px; }
#stage.v .code { left: 80px; top: 1220px; font-size: 30px; }
#stage.v .fin { left: 80px; top: 1060px; width: 920px; }
#stage.v .fin h1 { font-size: 104px; margin-bottom: 20px; }
#stage.v .fin .ln { font-size: 36px; }