/* Perceives but Doesn't Brake: project page.
   The look is taken from the paper's own renders: their night-blue background, the Okabe-Ito data colours
   (vermilion = frozen model, bluish green = with guidance, blue = control / decodable, yellow = obstacle),
   corner brackets like the renders' detection boxes, and Barlow, a typeface drawn from highway signs. */
:root {
  --bg: #0B0F19;
  --bg-2: #111725;
  --bg-3: #182033;
  --line: #28324B;
  --line-2: #1D2539;
  --ink: #EEF1F6;
  --ink-2: #C2C9D5;
  --muted: #8B94A6;
  --faint: #5C6579;
  --frozen: #D55E00;
  --guided: #009E73;
  --guided-hi: #19C495;
  --control: #0072B2;
  --control-hi: #3D9BE0;
  --hazard: #F0E442;
  --brake: #FF4D3D;
  --gray: #8F949B;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --sans: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --hazard-ink: #F0E442;
  --topbar-bg: rgba(11, 15, 25, .92);
  --road: #0D1220; --road-edge: #28324B; --road-dash: #3A4560;
  --car: #EEF1F6; --car-glass: #0B0F19; --brake-off: #4A2622; --obs-stroke: transparent;
  --cl-link: #4A5470; --eta-mark: #ECEEF4;
  --zone: rgba(255, 77, 61, .18);
  color-scheme: dark;
  --maxw: 1100px;
  --gutter: 96px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* daylight theme: same identity, light asphalt-gray paper */
[data-theme="light"] {
  color-scheme: light;
  --bg: #F2F3F5; --bg-2: #FFFFFF; --bg-3: #E8EBF0; --line: #CDD3DC; --line-2: #E3E6EB;
  --ink: #0E1320; --ink-2: #3A4252; --muted: #5F687A; --faint: #9AA2B1;
  --guided-hi: #007A59; --control-hi: #0072B2; --hazard-ink: #8C7800;
  --topbar-bg: rgba(242, 243, 245, .94);
  --road: #DCE0E7; --road-edge: #B7BEC9; --road-dash: #FFFFFF;
  --car: #0E1320; --car-glass: #DCE0E7; --brake-off: #C9B9B6; --obs-stroke: #8C7800;
  --cl-link: #BCC2CC; --eta-mark: #0E1320; --zone: rgba(213, 94, 0, .12);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink-2);
  font: 400 17.5px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; }
img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
p { margin: 0; }
b, strong { color: var(--ink); font-weight: 600; }
:focus-visible { outline: 2px solid var(--hazard-ink); outline-offset: 3px; }
::selection { background: var(--hazard); color: #0B0F19; }
.wrap { width: min(100% - var(--gutter), var(--maxw)); margin-inline: auto; }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.label, .fig-tag, .sec-tag, .kicker, .hud-k, .step-q, .card-k, .callout-k, .ledger-k, .code-title, .meter-label {
  font: 500 11.5px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}

/* ------------------------------------------------------------------ top bar */
.topbar {
  position: fixed; z-index: 40; top: 0; left: 0; right: 0; height: 60px;
  display: flex; align-items: center; gap: 32px; padding: 0 28px;
  border-bottom: 1px solid transparent; transition: background .3s, border-color .3s;
}
.topbar.solid { background: var(--topbar-bg); border-color: var(--line-2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.brand {
  display: inline-flex; align-items: center; gap: 11px; text-decoration: none; white-space: nowrap;
  font: 600 17px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.brand-mark { width: 10px; height: 10px; background: var(--hazard); box-shadow: 0 7px 0 -3px var(--guided); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topnav { display: flex; gap: 22px; margin-right: 14px; }
.topnav a {
  font: 500 15px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: var(--muted); padding: 6px 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.topnav a:hover { color: var(--ink); }
.topnav a.is-active { color: var(--ink); border-color: var(--hazard-ink); }
.theme-toggle {
  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 2px; background: transparent; color: var(--ink); transition: border-color .2s;
}
.theme-toggle:hover { border-color: var(--ink); }
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-moon, [data-theme="light"] .theme-toggle .i-sun { display: none; }
[data-theme="light"] .theme-toggle .i-moon { display: block; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px;
  border: 1.5px solid color-mix(in srgb, var(--ink) 32%, transparent); border-radius: 2px; background: color-mix(in srgb, var(--bg) 35%, transparent);
  font: 600 16px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
}
.btn svg { width: 13px; height: 13px; fill: currentColor; }
.btn:hover { border-color: var(--ink); }
.btn-sign { background: var(--hazard); border-color: var(--hazard); color: #0B0F19; }
.btn-sign:hover { background: #fff36b; border-color: #fff36b; }
.btn-ghost { border-color: transparent; background: none; }
.btn-ghost:hover { border-color: color-mix(in srgb, var(--ink) 32%, transparent); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 14px; }

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100svh, 980px); display: flex; flex-direction: column; justify-content: flex-end;
  padding: 120px 0 clamp(56px, 8vh, 96px);
}
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.85); }
.hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 90%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 48%, color-mix(in srgb, var(--bg) 20%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 65%, transparent) 0%, transparent 26% 58%, var(--bg) 100%);
}
.kicker { display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
.rec { width: 8px; height: 8px; border-radius: 50%; background: var(--brake); animation: rec 2s steps(1) infinite; }
@keyframes rec { 50% { opacity: .25; } }
.title {
  margin: 20px 0 0;
  font: 700 clamp(54px, 9.4vw, 138px)/.86 var(--display);
  letter-spacing: -.004em; text-transform: uppercase; color: var(--ink);
}
.title .t1, .title .t2 { display: block; }
.title .t2 { padding-left: clamp(0px, 9vw, 150px); }
.hero-sub { margin-top: 20px; font: 500 clamp(19px, 2vw, 25px)/1.25 var(--display); letter-spacing: .03em; color: var(--ink-2); }
.authors { margin-top: 22px; font: 500 clamp(17px, 1.6vw, 20px)/1.35 var(--display); letter-spacing: .03em; color: var(--ink); }
.affils { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; font: 400 12px/1.4 var(--mono); letter-spacing: .06em; color: var(--muted); }
:is(.authors, .affils) sup { font-size: .68em; line-height: 0; margin-left: 1px; }
.affils sup { margin: 0 3px 0 0; }
.hud {
  display: grid; grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr);
  max-width: 960px; margin-top: 34px; border-top: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
}
.hud-col { padding-top: 14px; }
.hud-k { display: flex; align-items: center; gap: 10px; color: var(--ink); margin-bottom: 8px; }
.hud-col p:not(.hud-k) { font-size: 15.5px; line-height: 1.45; color: var(--ink-2); margin-top: 5px; }
.led { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.led-on { background: var(--control-hi); box-shadow: 0 0 0 3px rgba(61, 155, 224, .22); }
.led-off { border: 1.5px solid var(--frozen); }
/* the binding gap: the perception wire stops short of the action wire */
.hud-link { position: relative; margin-top: 21px; height: 2px; }
.hud-link::before, .hud-link::after {
  content: ""; position: absolute; top: 0; height: 2px; width: 36%;
  background: repeating-linear-gradient(90deg, var(--hazard-ink) 0 6px, transparent 6px 11px);
  transform: scaleX(0); animation: wire 1.2s var(--ease) .6s forwards;
}
.hud-link::before { left: 0; transform-origin: left; }
.hud-link::after { right: 0; transform-origin: right; }
@keyframes wire { to { transform: scaleX(1); } }
.hud-link span {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%); white-space: nowrap;
  font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--hazard-ink);
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.motion-toggle {
  position: absolute; right: 24px; bottom: 20px; cursor: pointer;
  font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); background: color-mix(in srgb, var(--bg) 60%, transparent); border: 1px solid var(--line); padding: 8px 10px; border-radius: 2px;
}
.hero-credit { position: absolute; right: 156px; bottom: 21px; max-width: 400px; text-align: right; font: 400 11px/1.45 var(--mono); color: var(--faint); }

/* ------------------------------------------------------------------ sections */
.sec { position: relative; padding: clamp(84px, 10vw, 132px) 0; }
.sec::before {                                   /* a lane marking between sections */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 34px, transparent 34px 62px);
}
.sec-head { max-width: 880px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-tag { display: flex; align-items: center; gap: 12px; }
.sec-tag b {
  display: inline-grid; place-items: center; min-width: 36px; height: 26px; padding: 0 7px;
  background: var(--ink); color: var(--bg); border-radius: 2px;
  font: 700 16px/1 var(--display); letter-spacing: .04em;
}
h2 {
  margin: 20px 0 0; max-width: 24ch;
  font: 600 clamp(36px, 4.5vw, 60px)/1.02 var(--display); letter-spacing: -.003em; color: var(--ink);
}
.lead { margin-top: 22px; font-size: 19px; line-height: 1.6; max-width: 64ch; }
.lead em, .abstract em { font-style: italic; color: var(--ink); }
h3 { margin: 0; font: 600 21px/1.18 var(--display); letter-spacing: .005em; color: var(--ink); }

/* ------------------------------------------------------------------ overview */
.intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 80px); align-items: start; margin-bottom: clamp(56px, 7vw, 88px); }
.intro-text { font: 400 clamp(22px, 2.2vw, 28px)/1.42 var(--sans); color: var(--ink); letter-spacing: -.004em; }
.ledger { margin: 0; border-top: 1px solid var(--line); }
.ledger-k { padding: 12px 0 4px; }
.ledger div:not(.ledger-k) { padding: 14px 0; border-bottom: 1px solid var(--line-2); display: grid; gap: 6px; }
.ledger dt { font-size: 14.5px; line-height: 1.35; color: var(--ink-2); }
.ledger dt small { display: block; font: 400 11px/1.5 var(--mono); color: var(--faint); margin-top: 2px; }
.ledger dd { margin: 0; display: flex; align-items: center; gap: 10px; font: 600 30px/1 var(--display); color: var(--ink); }
.ledger .from { color: var(--muted); font-weight: 500; }
.ledger .from::before, .ledger .to::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 5px; }
.ledger .from::before { background: var(--frozen); }
.ledger .to::before { background: var(--guided); }
.ledger .from::after { content: "→"; margin-left: 10px; color: var(--faint); font-weight: 400; }
.fig-paper img { width: 100%; height: auto; background: #fff; padding: clamp(8px, 1.6vw, 20px); border-radius: 2px; }
.abstract-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 64px); align-items: start; margin-top: clamp(48px, 6vw, 72px); }
.fig-video { position: sticky; top: 84px; }
.abstract .label { margin-bottom: 14px; }
.abstract p:not(.label) { font-size: 16px; line-height: 1.72; color: var(--ink-2); }

/* ------------------------------------------------------------------ figures: detection-box frames */
.fig, .sampler {
  position: relative; margin: 0; min-width: 0;
  background: var(--bg-2); padding: 26px 26px 20px;
}
.fig::before, .sampler::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  --c: var(--faint); --l: 14px; --w: 1.5px;
  background:
    linear-gradient(var(--c) 0 0) 0 0 / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c) 0 0) 0 0 / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c) 0 0) 100% 0 / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c) 0 0) 100% 0 / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c) 0 0) 0 100% / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c) 0 0) 0 100% / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c) 0 0) 100% 100% / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c) 0 0) 100% 100% / var(--w) var(--l) no-repeat;
}
.fig:hover::before, .sampler:hover::before { --c: var(--ink-2); }
.fig-tag { margin-bottom: 14px; }
.fig-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fig-head h3 { max-width: 40ch; }
.fig-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.fig-bar .fig-tag { margin: 0 0 10px; }
.fig figcaption { margin-top: 16px; font-size: 14px; line-height: 1.58; color: var(--muted); max-width: 96ch; }
.screen { background: var(--bg); line-height: 0; }
.screen video { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--bg); }
.fig-clip .tabs { margin-bottom: 14px; }
.fig-clip .fig-bar .tabs { margin-bottom: 0; }
video::cue { font-family: var(--sans); font-size: 18px; background: rgba(11, 15, 25, .8); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.grid-wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
#fig-coupling, #fig-dumbbell { margin-top: 24px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.sw { width: 10px; height: 10px; border-radius: 1px; display: inline-block; }
.sw-frozen { background: var(--frozen); } .sw-guided { background: var(--guided); }
.sw-control { background: var(--control); } .sw-gray { background: var(--gray); }
.sw-dot { border-radius: 50%; }
.sw-tick { width: 3px; height: 12px; }
.sw-ring { border: 2px solid var(--frozen); }
.sw-zone { width: 14px; background: var(--zone); }
.chart { margin-top: 12px; position: relative; }
.chart svg { width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.chart .axis text, .chart .tick { font: 400 11px var(--mono); fill: var(--muted); }
.chart .grid { stroke: var(--line-2); stroke-width: 1; }
.chart .base { stroke: var(--faint); stroke-width: 1; }
.chart .val { font: 500 12.5px var(--sans); fill: var(--ink); }
.chart .val.on-bar { fill: #fff; }
.chart .cat { font: 400 13px var(--sans); fill: var(--ink-2); }
.chart .ptitle { font: 600 15px var(--display); letter-spacing: .02em; fill: var(--ink); }
.chart .whisk { stroke: var(--ink-2); stroke-width: 1.2; }
.chart .hit { fill: transparent; }
.chart .zone { fill: var(--zone); }
.chart .rho { font: 500 13px var(--sans); fill: var(--ink); }
.chart .dot { stroke: var(--bg-2); stroke-width: .8px; transition: transform 1.1s var(--ease), fill .6s; }
.chart .hollow { fill: var(--bg-2); }
.chart .ring { stroke: var(--bg-2); }
.chart .cl-link { stroke: var(--cl-link); }
.grow { transform-box: fill-box; transition: transform 1s var(--ease); }
.grow-x { transform-origin: left center; transform: scaleX(0); }
.grow-y { transform-origin: center bottom; transform: scaleY(0); }
.fade { opacity: 0; transition: opacity .5s ease; }
.drawn .grow { transform: none; }
.drawn .fade { opacity: 1; }
.fig-data { margin-top: 14px; border-top: 1px solid var(--line-2); padding-top: 10px; }
.fig-data summary { cursor: pointer; font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fig-data summary:hover { color: var(--ink); }
.fig-data table { margin-top: 10px; }
.csv { display: inline-block; margin-top: 10px; font: 500 12px var(--mono); color: var(--control-hi); }

/* tabs and two-state switches */
.tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
  padding: 9px 13px; font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  transition: color .2s, border-color .2s;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--hazard-ink); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: var(--bg); }
.seg button {
  position: relative; background: transparent; border: 0; cursor: pointer;
  padding: 8px 13px; font: 500 11.5px/1 var(--mono); letter-spacing: .05em; color: var(--muted);
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--bg-3); color: var(--ink); }
.seg button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--hazard-ink); }
.seg button[data-tone="frozen"][aria-pressed="true"]::after { background: var(--frozen); }
.seg button[data-tone="guided"][aria-pressed="true"]::after { background: var(--guided); }

/* ------------------------------------------------------------------ failure stats */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: clamp(48px, 6vw, 72px); }
.stat { padding: 2px 28px 0; border-left: 1px solid var(--line); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat-num { font: 600 clamp(58px, 6.4vw, 88px)/.92 var(--display); color: var(--ink); letter-spacing: -.01em; }
.stat-num small { margin-left: 8px; font: 500 15px/1 var(--mono); letter-spacing: .04em; color: var(--muted); }
.stat-label { margin-top: 16px; font-size: 16px; line-height: 1.5; max-width: 34ch; }
.stat-src { margin-top: 12px; font: 400 11px/1.5 var(--mono); color: var(--faint); }

/* ------------------------------------------------------------------ diagnosis diagram */
.diagram { margin: 0 0 clamp(56px, 7vw, 88px); }
.diagram-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.diagram-svg { width: 100%; min-width: 720px; height: auto; font-family: var(--sans); }
.diagram-svg text { font-size: 15px; fill: var(--ink); text-anchor: middle; }
.diagram-svg text.small { font: 11px var(--mono); fill: var(--muted); }
.diagram-svg text.math { font-family: Georgia, serif; font-style: italic; font-size: 16px; }
.node rect { fill: var(--bg-2); stroke: var(--muted); stroke-width: 1; transition: stroke .35s, stroke-width .35s; }
.n-exp rect { fill: var(--bg-3); stroke: var(--ink-2); stroke-width: 1.4; }
.n-energy rect { fill: none; stroke: var(--guided-hi); stroke-dasharray: 4 4; }
.n-energy text { fill: var(--guided-hi); }
.wire { fill: none; stroke: var(--ink-2); stroke-linecap: round; stroke-linejoin: round; transition: opacity .35s; }
.w-ego { stroke-width: 9.5; }
.w-vision { stroke-width: 2.2; }
.w-trace { stroke-width: 1.1; }
.w-out, .w-cam { stroke-width: 1.4; }
.w-energy { stroke: var(--guided-hi); stroke-width: 1.6; stroke-dasharray: 4 4; }
.flow { fill: none; stroke-linecap: round; pointer-events: none; animation: march linear infinite; transition: opacity .35s; }
.flow.w-ego { stroke: var(--bg); stroke-width: 3.2; stroke-dasharray: 2 16; animation-duration: .9s; }
.flow.w-vision { stroke: var(--hazard-ink); stroke-width: 4; stroke-dasharray: 1 26; animation-duration: 3.6s; }
.flow.w-trace { stroke: var(--hazard-ink); stroke-width: 3.2; stroke-dasharray: 1 30; animation-duration: 9s; }
@keyframes march { to { stroke-dashoffset: -36; } }
.tag rect { fill: var(--control); }
.tag text { fill: #fff !important; font: 500 12px var(--mono) !important; }
.wlabel { font: 500 12.5px var(--mono) !important; fill: var(--ink) !important; }
.wcap { font: 400 11px var(--mono) !important; fill: var(--muted) !important; }
.t-probe, .wlabel, .wcap, .n-energy, .w-energy { opacity: 0; transition: opacity .45s; }
.diagram[data-step] :is(.node, .wire, .flow) { opacity: .3; }
.diagram[data-step="0"] :is(.n-cam, .n-vis, .w-cam, .t-probe) { opacity: 1; }
.diagram[data-step="0"] .n-vis rect { stroke: var(--control-hi); stroke-width: 2.2; }
.diagram[data-step="1"] :is(.w-ego, .w-vision, .w-trace, .n-ego, .n-vis, .n-trace, .n-exp, .wlabel, .wcap) { opacity: 1; }
.diagram[data-step="2"] :is(.n-exp, .n-plan, .n-energy, .w-energy, .w-out) { opacity: 1; }
.diagram[data-step="2"] .n-exp rect { stroke: var(--guided-hi); stroke-width: 2.2; }
.diagram:not([data-step="2"]) :is(.node.n-energy, .wire.w-energy) { opacity: 0; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 22px; border-top: 1px solid var(--line); }
.step {
  position: relative; text-align: left; cursor: pointer; background: transparent; border: 0;
  padding: 20px 22px 18px 0; display: flex; flex-direction: column; gap: 7px; color: inherit;
}
.step + .step { padding-left: 22px; border-left: 1px solid var(--line-2); }
.step::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--hazard-ink); transform: scaleX(0); transform-origin: left; }
.step[aria-pressed="true"]::before { transform: scaleX(1); }
.step[aria-pressed="true"].timing::before { transform: scaleX(0); animation: steptime var(--dur, 6s) linear forwards; }
@keyframes steptime { to { transform: scaleX(1); } }
.step strong { font: 600 22px/1.2 var(--display); color: var(--muted); transition: color .3s; }
.step[aria-pressed="true"] strong { color: var(--ink); }
.step-a { font-size: 15px; line-height: 1.5; color: var(--muted); transition: color .3s; }
.step[aria-pressed="true"] .step-a { color: var(--ink-2); }
.step-a i { font-style: normal; font-weight: 600; color: var(--ink); }
.step-a i::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.step-a i.ok::before { background: var(--control-hi); }
.step-a i.no::before { border: 1.5px solid var(--frozen); }
.diagram-verdict { margin-top: 20px; font-size: 15.5px; color: var(--ink-2); max-width: 100ch; }

/* ------------------------------------------------------------------ perceives | doesn't brake */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); row-gap: 18px; }
.split-k { display: flex; align-items: center; gap: 12px; font: 700 30px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.split-k-l { grid-column: 1; grid-row: 1; }
.split-k-r { grid-column: 3; grid-row: 1; }
.split-l { grid-column: 1; }
.split-r { grid-column: 3; }
#fig-availability, #fig-channels { grid-row: 2; }
.split-gap { grid-column: 2; grid-row: 1 / 3; position: relative; }
.split-gap::before {
  content: ""; position: absolute; left: 50%; top: 4px; bottom: 0; width: 2px; margin-left: -1px;
  background: repeating-linear-gradient(180deg, var(--hazard-ink) 0 10px, transparent 10px 20px);
  -webkit-mask: linear-gradient(180deg, #000 0 38%, transparent 38% 62%, #000 62%);
  mask: linear-gradient(180deg, #000 0 38%, transparent 38% 62%, #000 62%);
}
.split-gap span {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); white-space: nowrap;
  font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--hazard-ink);
}
.split-row { grid-column: 1 / -1; grid-row: 3; margin-top: 30px; font: 600 22px/1.2 var(--display); color: var(--ink); }
.fig-meter { grid-row: 4; padding: 20px 22px; }
.split-note { grid-column: 1 / -1; grid-row: 5; font-size: 14px; line-height: 1.58; color: var(--muted); max-width: 110ch; }
.meter-label { margin-bottom: 14px; }
.meter { position: relative; height: 12px; background: var(--bg-3); overflow: hidden; }
.meter span { position: absolute; inset: 0 auto 0 0; background: var(--ink-2); width: calc(var(--from) * 1%); transition: width 1.6s var(--ease) .3s; }
.meter-reach span { background: var(--frozen); }
.drawn .meter span { width: calc(var(--to) * 1%); }
.meter i { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--bg-2); }
.meter-val { margin-top: 12px; font: 600 26px/1 var(--display); color: var(--ink); }
.meter-val b { font-weight: 700; }
.meter-val .muted { font-weight: 500; }

/* ------------------------------------------------------------------ method */
.method { margin: 0 0 clamp(48px, 6vw, 72px); }
.equation { overflow-x: auto; padding: 4px 0 26px; font-size: 20px; color: var(--ink); }
.tex-block { white-space: nowrap; }
.equation .katex-display { margin: 0; text-align: left; }
.code-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.code { border: 1px solid var(--line); background: var(--bg-2); min-width: 0; border-radius: 2px; }
.code-title { padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
.code-guided .code-title { color: var(--guided-hi); }
.algo { list-style: none; margin: 0; padding: 12px 0 14px; counter-reset: ln; overflow-x: auto; font: 400 15px/1.5 var(--sans); color: var(--ink-2); }
.algo li { counter-increment: ln; position: relative; padding: 4px 16px 4px 46px; }
.algo li::before { content: counter(ln); position: absolute; left: 0; width: 28px; text-align: right; font: 400 11.5px/2.1 var(--mono); color: var(--faint); }
.algo li.in { padding-left: calc(46px + 1.5em); }
.algo b { font-weight: 600; color: var(--ink); }
.algo .hl { background: rgba(0, 158, 115, .14); box-shadow: inset 3px 0 0 var(--guided-hi); }
.bibtex { max-width: 880px; }
.bibtex-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 8px 7px 14px; border-bottom: 1px solid var(--line-2); }
.bibtex-bar .code-title { padding: 0; border: 0; }
.bibtex pre { margin: 0; padding: 16px; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 13.5px/1.7 var(--mono); color: var(--ink-2); }
.energy-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 28px 0 0; }
.energy-terms div { border-top: 1px solid var(--line); padding-top: 12px; }
.energy-terms dt { font: 600 19px/1.2 var(--display); color: var(--ink); letter-spacing: .02em; }
.energy-terms dd { margin: 6px 0 0; font-size: 15px; line-height: 1.55; }
.method-note { margin-top: 24px; font-size: 15.5px; line-height: 1.62; max-width: 80ch; }
.katex { font-size: 1.04em; color: var(--ink); }
.eq-guided { color: var(--guided-hi); }

/* ------------------------------------------------------------------ sampler */
.sampler { padding: clamp(18px, 2.4vw, 30px); color: var(--ink); }
.sampler-top { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.sampler-title { font: 700 28px/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.sampler-note { font: 400 12px/1.55 var(--mono); color: var(--muted); max-width: 64ch; }
.sampler-body { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 30px; margin-top: 20px; }
.sampler-plots svg { width: 100%; height: auto; font-family: var(--mono); overflow: visible; }
.sampler-plots .bev, .sampler-plots .speed { display: block; }
.sampler-plots .speed { margin-top: 8px; }
.sampler text { font-size: 11px; fill: var(--muted); }
.sampler .road { fill: var(--road); }
.sampler .lane { stroke: var(--road-edge); stroke-width: 1.5; stroke-dasharray: 14 12; }
.sampler .ego { fill: var(--car); }
.sampler .obstacle { fill: var(--hazard); stroke: var(--obs-stroke); transition: stroke .3s; }
.sampler .eta-mark { stroke: var(--eta-mark); }
.sampler .obstacle.hit { stroke: var(--frozen); stroke-width: 3; }
.sampler .dsafe { stroke: var(--guided-hi); stroke-width: 1.5; stroke-dasharray: 3 4; }
.sampler .gridline { stroke: var(--line-2); stroke-width: 1; }
.sampler .traj { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sampler .wp { stroke: var(--bg-2); stroke-width: 1.5; }
.flowtime { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-top: 16px; }
.play {
  min-width: 82px; height: 36px; padding: 0 14px; cursor: pointer; border-radius: 2px;
  font: 600 15px/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
  background: var(--hazard); color: #0B0F19; border: 0;
}
.play:hover { background: #fff36b; }
.flowtime-track { position: relative; padding-top: 30px; }
.flowtime-track .eta { position: absolute; left: 8px; right: 8px; top: 0; width: calc(100% - 16px); height: 28px; }
.flowtime-ends { display: flex; justify-content: space-between; margin-top: 4px; font: 400 10.5px/1 var(--mono); color: var(--muted); }
.readout { font: 500 13px/1 var(--mono); color: var(--ink); white-space: nowrap; }
.sampler-controls { display: flex; flex-direction: column; gap: 16px; }
.slider span { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }
.slider output { font: 500 13px var(--mono); color: var(--ink); }
.reseed {
  align-self: flex-start; padding: 8px 12px; cursor: pointer; border-radius: 2px;
  font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); background: transparent; border: 1px solid var(--line);
}
.reseed:hover { border-color: var(--muted); }
.readouts { margin: 4px 0 0; border-top: 1px solid var(--line); }
.readouts div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.readouts dt { color: var(--muted); }
.readouts dd { margin: 0; font: 500 13px var(--mono); color: var(--ink); text-align: right; }
.readouts .bad::before, .readouts .good::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; }
.readouts .bad::before { background: var(--frozen); }
.readouts .good::before { background: var(--guided); }
.sampler-cap { margin-top: 18px; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 104ch; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; background: transparent; cursor: pointer; margin: 6px 0 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: var(--line); }
input[type="range"]::-moz-range-track { height: 3px; background: var(--line); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5.5px; border-radius: 1px; background: var(--ink); border: 0; box-shadow: 0 0 0 3px var(--bg-2); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 1px; background: var(--ink); border: 0; box-shadow: 0 0 0 3px var(--bg-2); }

/* ------------------------------------------------------------------ results blocks */
.scatter-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.cl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; border-top: 1px solid var(--line); }
.cl-stats p { padding: 14px 18px 0 0; font-size: 13.5px; color: var(--muted); }
.cl-stats p + p { padding-left: 18px; border-left: 1px solid var(--line-2); }
.cl-stats b { display: block; margin-bottom: 4px; font: 600 26px/1.1 var(--display); color: var(--ink); }
.cl-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 24px; }
.table-card { padding: 22px 22px 18px; }
.side-notes { display: grid; gap: 24px; min-width: 0; }
.table-title { font: 600 20px/1.2 var(--display); color: var(--ink); margin-bottom: 12px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
th { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); white-space: nowrap; font: 500 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line-2); color: var(--ink-2); vertical-align: top; }
.num { text-align: right; white-space: nowrap; }
td[rowspan] { white-space: nowrap; color: var(--ink); }
tr.grp td { border-top: 1px solid var(--line); }
tr.ours td { background: rgba(0, 158, 115, .13); }
tr.ours td:first-child { padding-left: 8px; }
td small { color: var(--muted); font-size: 11.5px; }
.compact td, .compact th { padding-right: 8px; }
.table-note { margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.callout { margin-top: 32px; padding: 6px 0 6px 22px; border-left: 2px solid var(--hazard-ink); max-width: 88ch; }
.callout-k { color: var(--hazard-ink); margin-bottom: 8px; }
.callout p:not(.callout-k) { font-size: 16.5px; line-height: 1.62; }
.card { padding: 26px 28px 24px; }
.card-num { margin: 18px 0 14px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font: 700 48px/1 var(--display); color: var(--ink); }
.card-num span { font: 400 12px/1.2 var(--mono); color: var(--muted); margin-right: 14px; }
.card p:last-child { font-size: 16px; line-height: 1.6; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
.prose p + p { margin-top: 16px; }
.prose p { font-size: 17.5px; }
.limits { margin: 0; padding: 0; list-style: none; counter-reset: lim; border-top: 1px solid var(--line); }
.limits li { counter-increment: lim; position: relative; padding: 14px 0 14px 40px; border-bottom: 1px solid var(--line-2); font-size: 16px; line-height: 1.55; }
.limits li::before { content: counter(lim, decimal-leading-zero); position: absolute; left: 0; top: 16px; font: 500 12px var(--mono); color: var(--hazard-ink); }

/* ------------------------------------------------------------------ footer */
.footer { position: relative; padding: 40px 0 56px; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 34px, transparent 34px 62px); }
.footer-in { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.footer-title { font: 600 18px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.footer a { text-decoration: none; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.footer a:hover { color: var(--ink); }

/* ------------------------------------------------------------------ the road rail */
.rail { display: none; }
@media (min-width: 1320px) {
  .rail {
    display: block; position: fixed; z-index: 30; left: 0; top: 0; bottom: 0; width: 104px; pointer-events: none;
    opacity: 0; transition: opacity .5s;
  }
  .rail.on { opacity: 1; }
  .topnav { display: none; }
}
.rr-road { fill: var(--road); }
.rr-edge { stroke: var(--road-edge); }
.rr-dash { fill: var(--road-dash); }
.rr-obs { fill: var(--hazard); stroke: var(--obs-stroke); }
.rr-car { fill: var(--car); }
.rr-glass { fill: var(--car-glass); }
.rr-brake { fill: var(--brake-off); }
.rr-brake.on { fill: var(--brake); }
.rail-road { position: absolute; left: 22px; top: 84px; width: 46px; height: calc(100% - 196px); overflow: hidden; }
.rail-marks a {
  pointer-events: auto; position: absolute; left: 74px; top: 84px; display: flex; align-items: center; gap: 8px;
  text-decoration: none; will-change: transform;
}
.rail-marks b {
  display: inline-grid; place-items: center; width: 24px; height: 18px;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--muted);
  font: 500 10px/1 var(--mono); transition: background .3s, color .3s, border-color .3s;
}
.rail-marks span {
  opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; white-space: nowrap;
  background: var(--bg-3); border: 1px solid var(--line); padding: 3px 7px;
  font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.rail-marks a:hover span, .rail-marks a:focus-visible span { opacity: 1; transform: none; }
.rail-marks a.is-active b { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.rail-marks a.is-hidden { visibility: hidden; }
.rail-read { position: absolute; left: 16px; bottom: 40px; width: 96px; display: grid; gap: 4px; font: 500 10px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rail-read [data-rail="dist"] { color: var(--ink); font-size: 11px; }

/* tooltip */
.tip {
  position: fixed; z-index: 60; pointer-events: none; max-width: 260px;
  background: var(--ink); color: var(--bg); border-radius: 2px; padding: 7px 10px;
  font: 400 12px/1.4 var(--sans); box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .7);
}
.tip b { display: block; color: var(--bg); font-weight: 600; font-size: 13px; }

/* reveal: text fades in; figures wipe in from the top like a sensor sweep */
.js .reveal { opacity: 0; transition: opacity .9s var(--ease); }
.js .reveal.in { opacity: 1; }
.diagram { position: relative; }
.js :is(.fig, .sampler, .diagram).reveal { opacity: 1; }
.js :is(.fig, .sampler, .diagram).reveal::after {
  content: ""; position: absolute; inset: -2px; z-index: 5; pointer-events: none;
  background: var(--bg); transform-origin: bottom; transition: transform 1.1s var(--ease);
}
.js :is(.fig, .sampler, .diagram).reveal.in::after { transform: scaleY(0); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transition: none; }
  .js :is(.fig, .sampler, .diagram).reveal::after { display: none; }
  .grow, .fade, .meter span, .chart .dot { transition: none !important; }
  .flow, .rec { animation: none; }
  .flow { display: none; }
  .hud-link::before, .hud-link::after { animation: none; transform: none; }
  .step::before { display: none; }
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .intro, .abstract-row, .grid-2, .grid-wide-left, .cl-row, .two-col { grid-template-columns: 1fr; }
  .fig-video { position: relative; top: 0; }
  .sampler-body { grid-template-columns: 1fr; }
  .sampler-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
  .sampler-controls .readouts { grid-column: 1 / -1; }
  .split { grid-template-columns: 1fr; row-gap: 16px; }
  .split-gap { display: none; }
  .split-k-l, .split-k-r, .split-l, .split-r, #fig-availability, #fig-channels, .split-row, .fig-meter, .split-note { grid-column: 1; grid-row: auto; }
  .split-k-r { margin-top: 28px; }
  .split-k-l { order: 1; } #fig-availability { order: 2; } .split-k-r { order: 3; } #fig-channels { order: 4; }
  .split-row { order: 5; margin-top: 28px; } .fig-meter.split-l { order: 6; } .fig-meter.split-r { order: 7; } .split-note { order: 8; }
  .topnav { gap: 16px; }
}
@media (max-width: 760px) {
  :root { --gutter: 32px; }
  body { font-size: 16.5px; }
  .topbar { padding: 0 16px; gap: 12px; }
  .topnav { display: none; }
  .brand { font-size: 15px; }
  .hero { min-height: 92svh; padding-top: 96px; }
  .hero-credit { display: none; }
  .title .t2 { padding-left: 0; }
  .hud { grid-template-columns: 1fr; }
  .hud-link { margin: 18px 0 8px; width: 60%; }
  .lead { font-size: 17.5px; }
  .stats, .steps, .code-compare, .energy-terms, .scatter-pair, .cl-stats { grid-template-columns: 1fr; }
  .stat, .stat:first-child { padding: 18px 0; border-left: 0; border-top: 1px solid var(--line); }
  .step, .step + .step { padding: 18px 0; border-left: 0; }
  .cl-stats p + p { padding-left: 0; border-left: 0; }
  .sampler-controls { grid-template-columns: 1fr; }
  .flowtime { grid-template-columns: auto minmax(0, 1fr); }
  .flowtime .readout { grid-column: 1 / -1; }
  .flowtime-ends .mid { display: none; }
  .fig, .sampler { padding: 20px 16px 16px; }
  .two-col { gap: 36px; }
  .split-k { font-size: 26px; }
}