:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  --bg: #efede6; --card: #ffffff; --panel: #ebebeb; --ink: #161616; --muted: #6b6964; --soft: #9d9a92;
  --track: #c4c4c4; --tok: #6e6e6e; --tok-ink: #ffffff; --arrow: #5a5a5a; --zero: #8d99a8;
  --or-fill: #efd2a4; --or-stroke: #e8b263; --or-ink: #ee9428; --or-node: #f5992b; --or-ghost: #f3c077; --qchip-ink: #7a4306;
  --bl-fill: #b2caf1; --bl-fill2: #bdd4f7; --bl-stroke: #95b6ec; --bl-ink: #3a7cf0; --bl-node: #3a82f7;
  --pos: #2e9d62; --neg: #d8473f; --accent: #3a7cf0; --on-accent: #ffffff;
  --ctl: #ffffff; --ctl-b: #dcd9cf; --ctl-h: #f4f2ec;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151514; --card: #1e1e1d; --panel: #2a2a28; --ink: #ecebe7; --muted: #a8a59e; --soft: #77756f;
    --track: #3c3c3a; --tok: #8d8d8b; --tok-ink: #141414; --arrow: #9b9a95; --zero: #6d7a8a;
    --or-fill: #4b3920; --or-stroke: #b27d33; --or-ink: #f6aa4e; --or-node: #f39a2c; --or-ghost: #9c6c2c; --qchip-ink: #ffd9a6;
    --bl-fill: #1f3558; --bl-fill2: #243e66; --bl-stroke: #4870b3; --bl-ink: #8ab6ff; --bl-node: #4f90f9;
    --pos: #43bf7c; --neg: #f06b62; --accent: #8ab6ff; --on-accent: #0c1a33;
    --ctl: #262624; --ctl-b: #3a3936; --ctl-h: #2f2f2d;
  }
}

:root[data-theme="dark"] {
  --bg: #151514; --card: #1e1e1d; --panel: #2a2a28; --ink: #ecebe7; --muted: #a8a59e; --soft: #77756f;
  --track: #3c3c3a; --tok: #8d8d8b; --tok-ink: #141414; --arrow: #9b9a95; --zero: #6d7a8a;
  --or-fill: #4b3920; --or-stroke: #b27d33; --or-ink: #f6aa4e; --or-node: #f39a2c; --or-ghost: #9c6c2c; --qchip-ink: #ffd9a6;
  --bl-fill: #1f3558; --bl-fill2: #243e66; --bl-stroke: #4870b3; --bl-ink: #8ab6ff; --bl-node: #4f90f9;
  --pos: #43bf7c; --neg: #f06b62; --accent: #8ab6ff; --on-accent: #0c1a33;
  --ctl: #262624; --ctl-b: #3a3936; --ctl-h: #2f2f2d;
}

html { scroll-padding-top: env(safe-area-inset-top, 0px); }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; overflow: hidden; background: var(--card); color: var(--ink); font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0; }
.card { padding: clamp(10px, 2vw, 22px); background: var(--card); }
.fig-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#fig { display: block; width: 100%; min-width: 760px; height: auto; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

#fig text { fill: var(--ink); }
#fig .math { font-family: "Cambria Math", "STIX Two Math", "Latin Modern Math", "Times New Roman", Times, serif; font-style: italic; }
#fig tspan.tokfill { fill: var(--tok); }
#fig text.or-ink { fill: var(--or-ink); }
#fig text.bl-ink { fill: var(--bl-ink); }
#fig text.muted { fill: var(--muted); }
#fig text.chiptext { fill: var(--tok-ink); }
#fig text.qtext { fill: var(--qchip-ink); font-weight: 600; }
#fig text.qtext.atext { fill: #fff; }
#fig text.gtext1 { fill: #fff; font-weight: 700; }
#fig text.gtext0 { fill: var(--muted); font-weight: 700; }
#fig .panel { fill: var(--panel); }
#fig .track { fill: var(--track); }
#fig .tok { fill: var(--tok); }
#fig .tint1 { fill: var(--or-node); }
#fig .tint0 { fill: var(--zero); }
#fig .tpos, #fig .apos { fill: var(--pos); }
#fig .tneg, #fig .aneg { fill: var(--neg); }
#fig .div { stroke: var(--ink); stroke-width: 2.2; stroke-dasharray: 4 3; }
#fig .arrow { fill: none; stroke: var(--arrow); stroke-width: 2; stroke-dasharray: 2 3.5; }
#fig .arrow.active { stroke: var(--accent); }
#fig .ahead { fill: var(--arrow); }
#fig .aheadA { fill: var(--accent); }
#fig .orbox { fill: var(--or-fill); stroke: var(--or-stroke); stroke-width: 2; stroke-dasharray: 3 3; }
#fig .blbox { fill: var(--bl-fill); stroke: var(--bl-stroke); stroke-width: 2; stroke-dasharray: 3 3; }
#fig .blbox2 { fill: var(--bl-fill2); stroke: var(--bl-stroke); stroke-width: 2; stroke-dasharray: 3 3; }
#fig .glow-or { fill: none; stroke: var(--or-node); stroke-width: 3; }
#fig .glow-bl { fill: none; stroke: var(--bl-node); stroke-width: 3; }
#fig .or-edge line { stroke: var(--or-node); stroke-width: 1.6; }
#fig .bl-edge line { stroke: var(--bl-node); stroke-width: 1.6; }
#fig .or-node { fill: var(--or-node); }
#fig .bl-node { fill: var(--bl-node); }
#fig .or-ring { fill: none; stroke: var(--or-node); stroke-width: 1.5; }
#fig .bl-ring { fill: none; stroke: var(--bl-node); stroke-width: 1.5; }
#fig .ghost { fill: var(--or-ghost); stroke: var(--or-stroke); stroke-width: 1; stroke-dasharray: 2 1.6; }
#fig .ghostc1 { fill: var(--or-node); stroke: var(--or-stroke); stroke-width: 1; stroke-dasharray: 2 1.6; }
#fig .ghostc0 { fill: var(--or-fill); stroke: var(--or-stroke); stroke-width: 1; stroke-dasharray: 2 1.6; }
#fig .gdiv { stroke: var(--ink); stroke-width: 1.8; stroke-dasharray: 3 2; }
#fig .ring1 { fill: none; stroke: var(--or-node); stroke-width: 2.5; }
#fig .slot { fill: none; stroke: var(--soft); stroke-width: 1; stroke-dasharray: 2 2; }
#fig .slot.hot { stroke: var(--or-node); stroke-width: 2; stroke-dasharray: none; }
#fig .qchip { fill: var(--or-fill); stroke: var(--or-stroke); stroke-width: 1; }
#fig .rephi { fill: var(--bl-fill); }
#fig .pk-or { fill: var(--or-node); }
#fig .pk-zero { fill: var(--zero); }
#fig .pk-bl { fill: var(--bl-node); }

.caption { display: flex; gap: 22px; align-items: flex-start; padding: 16px 10px 6px; min-height: 86px; }
.tag { width: 4.2em; flex: 0 0 auto; padding-top: 2px; color: var(--accent); font: 700 13px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .06em; }
.ph-title { margin: 0 0 4px; font-size: 15.5px; font-weight: 700; }
.ph-text { max-width: 78ch; margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 8px; padding: 14px 10px 4px; border-top: 1px solid var(--ctl-b); }
.transport, .speed { display: flex; gap: 6px; align-items: center; }
.btn { appearance: none; min-width: 36px; height: 36px; display: inline-flex; gap: 6px; align-items: center; justify-content: center; border: 1px solid var(--ctl-b); border-radius: 999px; padding: 0 12px; color: var(--ink); background: var(--ctl); font: inherit; font-size: 13px; cursor: pointer; }
.btn:hover { background: var(--ctl-h); }
.btn.primary { min-width: 44px; border-color: var(--accent); color: var(--on-accent); background: var(--accent); }
.btn svg { width: 14px; height: 14px; fill: currentColor; }
.btn:focus-visible, .chip:focus-visible, .scrub:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.phases { display: flex; flex: 1 1 440px; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; height: 30px; overflow: hidden; border: 1px solid var(--ctl-b); border-radius: 999px; padding: 0 12px; color: var(--muted); background: var(--ctl); font: inherit; font-size: 12.5px; cursor: pointer; }
.chip::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: var(--ctl-h); }
.chip.on { border-color: var(--accent); color: var(--ink); }
.chip.on::before { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.chip.done { color: var(--ink); }
.chip span { position: relative; }
.speed .btn { height: 30px; padding: 0 10px; font-size: 12px; }
.speed .btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.scrub { display: block; width: calc(100% - 20px); margin: 14px 10px 0; accent-color: var(--accent); }
.stats { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; padding: 12px 10px 4px; color: var(--muted); font-size: 13px; }
.stats b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.stats .succ { display: inline-flex; gap: 8px; align-items: center; }
.stats .note { font-style: italic; }
#spark .sb { fill: var(--ctl-b); }
#spark .sb.cur { fill: var(--soft); }
#spark .sb.new { fill: var(--accent); }

@media (max-width: 640px) {
  .caption { flex-direction: column; gap: 6px; }
  .ph-text, .ph-title { font-size: 14.5px; }
}