/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */
/* RUBE/ONE · cobalt / ivory editorial machinery */
:root {
  --color-paper: #f7f6f0;
  --color-paper-2: #eeede6;
  --color-paper-3: #e4e2d9;
  --color-rule: #d4d3cb;
  --color-rule-strong: #9fa3ae;
  --color-muted: #596273;
  --color-body: #303744;
  --color-ink: #171d2a;
  --color-graphite: #161d2b;
  --color-graphite-2: #263044;
  --color-light-ink: #f4f6f8;
  --color-dark-muted: #a8b0bf;
  --color-accent: #3e74ff;
  --color-accent-deep: #2452c6;
  --color-accent-hover: #183c9c;
  --color-accent-ink: #ffffff;
  --color-orange: #f6821f;
  --color-orange-soft: #ffe9cb;
  --color-success: #12523d;
  --color-warning: #9b6b00;
  --color-error: #b0291c;
  --color-overlay: rgb(15 21 33 / 0.76);
  --shadow-whisper: 0 1px 2px rgb(20 26 38 / 0.08);
  --font-display: "Space Grotesk", ui-sans-serif, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --space-2xs: .25rem;
  --space-xs: .5rem;
  --space-sm: .75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --z-sticky: 200;
  --z-modal: 400;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { scroll-behavior: smooth; }
body { position: relative; min-height: 100dvh; background: var(--color-paper); color: var(--color-body); font: 400 1rem/1.6 var(--font-body); }
.nav, main, footer { position: relative; z-index: 1; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { cursor: pointer; }
button:active, .primary-button:active { transform: translateY(1px); }
button:disabled, input:disabled, textarea:disabled { cursor: not-allowed; opacity: .55; }
a:active { color: var(--color-accent-deep); }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-grid {
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  background-image: linear-gradient(to right, rgb(62 116 255 / .08) 1px, transparent 1px), linear-gradient(to bottom, rgb(62 116 255 / .08) 1px, transparent 1px);
  background-size: 32px 32px;
  animation: grid-drift 28s linear infinite;
}
.site-grid::after { content: ""; position: absolute; top: 18%; left: 0; width: 100%; height: 1px; background: var(--color-accent); opacity: .15; animation: signal-sweep 16s linear infinite; }

.discharge { --impact-x: 50vw; --impact-y: 50vh; --impact-color: var(--color-accent); position: fixed; z-index: 300; inset: 0; overflow: hidden; pointer-events: none; }
.discharge-flash { position: absolute; inset: 0; background: var(--impact-color); opacity: 0; }
.discharge-sparks { position: absolute; left: var(--impact-x); top: var(--impact-y); width: 1px; height: 1px; }
.discharge-sparks i { --spark-angle: 0deg; position: absolute; left: 0; top: -1px; width: clamp(28px, 7vw, 90px); height: 3px; background: var(--impact-color); opacity: 0; transform-origin: left center; }
.discharge-sparks i:nth-child(2) { --spark-angle: 45deg; }
.discharge-sparks i:nth-child(3) { --spark-angle: 90deg; }
.discharge-sparks i:nth-child(4) { --spark-angle: 135deg; }
.discharge-sparks i:nth-child(5) { --spark-angle: 180deg; }
.discharge-sparks i:nth-child(6) { --spark-angle: 225deg; }
.discharge-sparks i:nth-child(7) { --spark-angle: 270deg; }
.discharge-sparks i:nth-child(8) { --spark-angle: 315deg; }
.discharge-stamp { position: absolute; left: 50%; top: 34%; display: grid; gap: .35rem; color: var(--color-ink); text-align: center; opacity: 0; transform: translate(-50%, -50%) scale(.86); }
.discharge-stamp span { font: 700 clamp(.65rem, 1.2vw, .9rem)/1 var(--font-mono); letter-spacing: .18em; }
.discharge-stamp strong { font: 700 clamp(3.6rem, 14vw, 11rem)/.82 var(--font-display); letter-spacing: -.08em; white-space: nowrap; }
body.is-discharging .discharge-flash { animation: discharge-flash 520ms ease-out both; }
body.is-discharging .discharge-sparks i { animation: discharge-spark 620ms var(--ease-out) both; }
body.is-discharging .discharge-sparks i:nth-child(even) { animation-delay: 35ms; }
body.is-discharging .discharge-stamp { animation: discharge-stamp 700ms var(--ease-out) both; }
body.is-discharging .site-grid { animation: grid-surge 700ms var(--ease-out) both; }

.dispatch-bay {
  --dispatch-origin-x: 50vw;
  --dispatch-origin-y: 50vh;
  position: fixed;
  z-index: 350;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  isolation: isolate;
  background: #101723;
  color: var(--color-light-ink);
}
.dispatch-bay::before,
.dispatch-bay::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.dispatch-bay::before {
  inset: 0;
  background-image: linear-gradient(to right, rgb(168 203 255 / .08) 1px, transparent 1px), linear-gradient(to bottom, rgb(168 203 255 / .08) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .38;
}
.dispatch-bay::after {
  left: var(--dispatch-origin-x);
  top: var(--dispatch-origin-y);
  width: 26rem;
  height: 26rem;
  border: 1px solid rgb(62 116 255 / .22);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
}
.dispatch-bay[aria-hidden="true"] { display: none; }
.dispatch-bay.is-dispatching {
  visibility: visible;
  opacity: 1;
}
body.is-dispatching { overflow: hidden; }
.dispatch-bay.is-dispatching::after { animation: dispatch-origin 2.2s var(--ease-out) both; }
.dispatch-shutter {
  position: absolute;
  z-index: 4;
  left: 0;
  width: 100%;
  height: 50%;
  border-block: 1px solid #3d4a61;
  background: #161d2b;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .04), inset 0 -18px 0 rgb(0 0 0 / .08);
}
.dispatch-shutter::after {
  content: "";
  position: absolute;
  inset: 12px 0;
  border-block: 1px solid rgb(168 176 191 / .16);
  background: repeating-linear-gradient(to bottom, transparent 0 12px, rgb(168 176 191 / .08) 12px 13px);
}
.dispatch-shutter-top { top: 0; transform-origin: top; }
.dispatch-shutter-bottom { bottom: 0; transform-origin: bottom; }
.dispatch-bay.is-dispatching .dispatch-shutter-top { animation: dispatch-shutter-top 720ms var(--ease-out) forwards; }
.dispatch-bay.is-dispatching .dispatch-shutter-bottom { animation: dispatch-shutter-bottom 720ms var(--ease-out) forwards; }
.dispatch-bay.is-aborting .dispatch-shutter-top { transform: translateY(0); transition: transform 180ms ease-in; }
.dispatch-bay.is-aborting .dispatch-shutter-bottom { transform: translateY(0); transition: transform 180ms ease-in; }
.dispatch-shaft {
  position: absolute;
  z-index: 1;
  top: 13%;
  bottom: 13%;
  left: 50%;
  width: min(2px, 100%);
  background: rgb(168 203 255 / .18);
  box-shadow: 0 0 24px rgb(62 116 255 / .38);
  opacity: 0;
  transform: translateX(-50%) scaleY(.2);
  transform-origin: center;
}
.dispatch-bay.is-dispatching .dispatch-shaft { animation: dispatch-shaft 520ms 560ms var(--ease-out) forwards; }
.dispatch-shaft-line {
  position: absolute;
  top: 42%;
  left: 50%;
  width: 7rem;
  height: 7rem;
  border: 1px solid rgb(168 203 255 / .28);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.dispatch-intake-slit {
  position: absolute;
  left: 50%;
  bottom: 9%;
  width: min(18rem, 58vw);
  height: 7px;
  border: 1px solid var(--color-orange);
  background: var(--color-orange);
  box-shadow: 0 0 18px rgb(246 130 31 / .65);
  opacity: 0;
  transform: translateX(-50%) scaleX(.12);
}
.dispatch-bay.is-dispatching .dispatch-intake-slit { animation: dispatch-intake 420ms 980ms var(--ease-out) forwards; }
.dispatch-plate {
  position: absolute;
  z-index: 3;
  top: 30%;
  left: 50%;
  display: grid;
  min-width: min(280px, calc(100% - 2rem));
  gap: .55rem;
  padding: 1rem 1.3rem;
  border: 1px solid #65738d;
  background: #1d2738;
  box-shadow: 0 10px 0 #0b1019, 0 0 0 5px rgb(11 16 25 / .45);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -45%) translateY(18px);
}
.dispatch-plate span,
.dispatch-return-label {
  color: #a8b0bf;
  font: 600 .62rem/1.2 var(--font-mono);
  letter-spacing: .14em;
}
.dispatch-plate strong {
  color: var(--color-light-ink);
  font: 700 clamp(2.1rem, 7vw, 5rem)/.95 var(--font-display);
  letter-spacing: -.06em;
}
.dispatch-bay.is-dispatching .dispatch-plate { animation: dispatch-plate 620ms 600ms var(--ease-out) forwards; }
.dispatch-gates {
  position: absolute;
  z-index: 2;
  top: 56%;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(720px, calc(100% - 2rem));
  border: 1px solid #58667d;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(18px);
}
.dispatch-gates span {
  min-width: 0;
  padding: .7rem .4rem;
  border-left: 1px solid #58667d;
  color: #a8cbff;
  text-align: center;
  font: 600 .63rem/1.2 var(--font-mono);
  letter-spacing: .06em;
  overflow-wrap: anywhere;
}
.dispatch-gates span:first-child { border-left: 0; }
.dispatch-bay.is-dispatching .dispatch-gates { animation: dispatch-gates 520ms 860ms var(--ease-out) forwards; }
.dispatch-return {
  position: absolute;
  z-index: 2;
  bottom: 16%;
  left: 50%;
  display: grid;
  gap: .7rem;
  width: min(720px, calc(100% - 2rem));
  justify-items: center;
  opacity: 0;
  transform: translateX(-50%) translateY(18px);
}
.dispatch-bay.is-dispatching .dispatch-return { animation: dispatch-return 520ms 1120ms var(--ease-out) forwards; }
.dispatch-uuid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  border: 1px solid #58667d;
  background: #0b1019;
}
.dispatch-uuid-block {
  min-width: 0;
  padding: .75rem .3rem;
  border-left: 1px solid #58667d;
  color: #f4f6f8;
  text-align: center;
  font: 600 clamp(.62rem, 2vw, .84rem)/1 var(--font-mono);
  letter-spacing: .06em;
  overflow-wrap: anywhere;
  opacity: .25;
}
.dispatch-uuid-block:first-child { border-left: 0; }
.dispatch-bay.is-uuid-revealed .dispatch-uuid-block { animation: uuid-stencil 460ms var(--ease-out) both; }
.dispatch-bay.is-uuid-revealed .dispatch-uuid-block:nth-child(2) { animation-delay: 150ms; }
.dispatch-bay.is-uuid-revealed .dispatch-uuid-block:nth-child(3) { animation-delay: 300ms; }
.dispatch-bay.is-uuid-revealed .dispatch-uuid-block:nth-child(4) { animation-delay: 450ms; }
.dispatch-bay.is-success .dispatch-intake-slit { background: var(--color-success); border-color: #8fe0ba; box-shadow: 0 0 18px rgb(143 224 186 / .5); }
.dispatch-bay.is-success .dispatch-return-label { color: #8fe0ba; }
.dispatch-bay.is-fading { opacity: 0; transition: opacity 480ms var(--ease-in-out); }
.dispatch-bay.is-aborting { opacity: 0; transition: opacity 220ms ease-in; }

.shell { width: min(1180px, calc(100% - 3rem)); margin-inline: auto; }
.wordmark { display: inline-flex; align-items: center; gap: .22rem; color: var(--color-ink); font: 700 1.05rem/1 var(--font-display); letter-spacing: -.04em; text-decoration: none; white-space: nowrap; }
.wordmark span { letter-spacing: .04em; }
.wordmark i { color: var(--color-accent); font-style: normal; }
.brand-mark { width: 28px; height: 28px; margin-right: .25rem; border: 1px solid var(--color-rule-strong); object-fit: cover; }

.nav { position: sticky; top: 0; z-index: var(--z-sticky); min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: 0 max(1.5rem, calc((100% - 1180px) / 2)); border-bottom: 1px solid var(--color-rule); background: var(--color-paper); }
.nav-links { display: flex; align-items: center; gap: var(--space-lg); }
.nav-links > a { color: var(--color-body); font-size: .875rem; text-decoration: none; white-space: nowrap; }
.nav-links > a:hover { color: var(--color-accent); }
.language-toggle, .command-button { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: .42rem .58rem; border: 1px solid var(--color-rule-strong); border-radius: var(--radius-md); color: var(--color-muted); background: var(--color-paper); }
.language-toggle:hover, .command-button:hover { border-color: var(--color-accent); color: var(--color-accent-deep); }
.language-toggle > span:nth-child(2), .language-toggle > span:last-child { color: var(--color-muted); }
.language-toggle[data-active="en"] > span:nth-child(2), .language-toggle[data-active="ja"] > span:last-child { color: var(--color-accent-deep); font-weight: 700; }
kbd { font: 600 .68rem/1 var(--font-mono); }

.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr); gap: clamp(3rem, 7vw, 7rem); align-items: start; padding-block: clamp(4rem, 8vw, 7rem) var(--space-3xl); }
.hero-copy { padding-top: clamp(1rem, 5vw, 4.5rem); }
.signal { display: flex; align-items: center; gap: var(--space-sm); margin: 0 0 var(--space-lg); color: var(--color-muted); font: 600 .7rem/1.4 var(--font-mono); letter-spacing: .09em; }
.signal > span:first-child { width: 8px; height: 8px; background: var(--color-accent); flex: 0 0 auto; }
h1, h2, h3 { min-width: 0; margin: 0; color: var(--color-ink); font-family: var(--font-display); font-style: normal; letter-spacing: -.045em; text-wrap: balance; overflow-wrap: anywhere; }
h1 { max-width: 12ch; font-size: clamp(3rem, 6.2vw, 5.25rem); line-height: 1.02; }
h2 { font-size: clamp(2rem, 3.5vw, 3.35rem); line-height: 1.08; }
.lede { max-width: 45ch; margin: var(--space-xl) 0 0; font-size: 1.12rem; }
.hero-facts { display: flex; gap: var(--space-xl); margin: var(--space-xl) 0 0; }
.hero-facts div { min-width: 76px; }
.hero-facts dt { color: var(--color-muted); font: 600 .63rem/1 var(--font-mono); letter-spacing: .08em; }
.hero-facts dd { margin: var(--space-xs) 0 0; color: var(--color-ink); font: 500 1.55rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.agent-interfaces { max-width: 560px; margin-top: var(--space-xl); border: 1px solid var(--color-ink); background: var(--color-paper-2); }
.agent-interfaces > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: .7rem .8rem; background: var(--color-graphite); color: var(--color-light-ink); font: 600 .6rem/1.2 var(--font-mono); letter-spacing: .09em; }
.interface-count { display: inline-flex; align-items: center; gap: .45rem; color: #a8cbff; text-align: right; }
.interface-count i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #63d7a2; box-shadow: 0 0 0 3px rgb(99 215 162 / .12); }
.interface-channel { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: .3rem .7rem; align-items: center; padding: .8rem; border-top: 1px solid var(--color-rule-strong); }
.agent-interfaces > header + .interface-channel { border-top: 0; }
.interface-channel-remote { background: #edf2ff; }
.interface-port { display: grid; grid-row: 1 / span 2; width: 30px; height: 30px; place-items: center; border: 1px solid var(--color-accent-deep); color: var(--color-accent-deep); background: var(--color-paper); font: 700 .7rem/1 var(--font-mono); }
.interface-channel-remote .interface-port { border-color: var(--color-orange); color: #934900; }
.interface-identity { min-width: 0; display: flex; align-items: baseline; gap: .55rem; }
.interface-identity strong { color: var(--color-ink); font: 700 .84rem/1.2 var(--font-display); }
.interface-identity code { min-width: 0; color: var(--color-muted); font: 400 .58rem/1.3 var(--font-mono); overflow-wrap: anywhere; }
.interface-state { color: var(--color-success); font: 600 .55rem/1.2 var(--font-mono); letter-spacing: .06em; text-align: right; text-transform: uppercase; }
.interface-channel p { grid-column: 2 / -1; margin: 0; color: var(--color-muted); font-size: .7rem; line-height: 1.45; }

.hero-side { min-width: 0; }
.hero-figure { position: relative; margin: 0 0 0 8%; }
.hero-figure-head { display: flex; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-xs); color: var(--color-muted); font: 600 .62rem/1.2 var(--font-mono); letter-spacing: .08em; }
.hero-image-frame { position: relative; aspect-ratio: 1.3 / 1; overflow: hidden; border: 1px solid var(--color-ink); background: var(--color-graphite); }
.hero-image-frame::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgb(255 255 255 / .48); pointer-events: none; }
.hero-image-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.9) contrast(1.04); }
.hero-figure figcaption { margin-top: var(--space-xs); color: var(--color-muted); font: 400 .72rem/1.4 var(--font-mono); }

.calculator { position: relative; z-index: 2; width: calc(100% - 1rem); margin: -4.4rem 1rem 0 auto; border: 1px solid var(--color-ink); background: var(--color-paper); box-shadow: var(--shadow-whisper); }
.panel-head { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-rule); color: var(--color-muted); font: 600 .64rem/1 var(--font-mono); letter-spacing: .07em; }
.live-mark { display: flex; align-items: center; gap: var(--space-xs); }
.live-mark i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); }
.equation { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.5fr) minmax(0, .82fr); gap: var(--space-md); align-items: end; padding: var(--space-xl) var(--space-lg) var(--space-lg); }
.equation label > span, .equation legend, .lookup > label { display: block; margin-bottom: var(--space-xs); color: var(--color-muted); font: 600 .62rem/1 var(--font-mono); letter-spacing: .08em; }
.equation input[type="number"] { width: 100%; height: 88px; border: 1px solid var(--color-rule-strong); border-radius: var(--radius-md); background: var(--color-paper-2); color: var(--color-ink); text-align: center; font: 500 2.45rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.equation input[type="number"]:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgb(62 116 255 / .14); outline: none; }
.equation fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.operators { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 2px solid var(--color-ink); border-radius: var(--radius-md); overflow: hidden; }
.operators label { position: relative; min-width: 0; }
.operators input { position: absolute; opacity: 0; pointer-events: none; }
.equation .operators span { display: grid; height: 88px; margin: 0; place-items: center; border-left: 1px solid var(--color-rule-strong); color: var(--color-ink); background: var(--color-paper-2); font: 600 clamp(2.2rem, 4vw, 3.2rem)/1 var(--font-mono); letter-spacing: 0; transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out); }
.operators label:first-child span { border-left: 0; }
.operators label:hover span { background: var(--color-orange-soft); }
.operators input:checked + span { background: var(--color-accent-deep); color: var(--color-accent-ink); }
.operators input:focus-visible + span { outline: 3px solid var(--color-accent); outline-offset: -4px; }
.machine-console { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-lg); margin: 0 var(--space-lg); padding: var(--space-md) 0; border-block: 1px solid var(--color-rule); }
.input-rail, .mechanical-readout { min-width: 0; display: grid; align-items: center; gap: var(--space-xs); }
.input-rail { grid-template-columns: auto minmax(0, 1fr) auto; }
.mechanical-readout { grid-template-columns: 34px minmax(0, 1fr); }
.rail-label { color: var(--color-muted); font: 600 .58rem/1.2 var(--font-mono); letter-spacing: .08em; }
.rail-track { position: relative; display: block; height: 4px; overflow: hidden; background: var(--color-paper-3); }
.rail-track::before { content: ""; position: absolute; inset: 1px 0; background: repeating-linear-gradient(to right, var(--color-rule-strong) 0 5px, transparent 5px 10px); }
.rail-track i { position: absolute; top: -4px; left: -16px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-orange); }
.machine-console.is-signaling .rail-track i { animation: rail-packet 650ms var(--ease-out) both; }
.input-rail strong { color: var(--color-accent-deep); font: 600 .58rem/1.2 var(--font-mono); white-space: nowrap; }
.indicator-wheel { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--color-rule-strong); border-radius: 50%; color: var(--color-accent-deep); font: 600 1.05rem/1 var(--font-mono); }
.indicator-wheel.is-stepping { animation: indicator-step 700ms var(--ease-out) both; }
.mechanical-readout strong { display: block; margin-top: 3px; color: var(--color-ink); font: 600 .9rem/1.2 var(--font-mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.machine-console.is-signaling .mechanical-readout strong { color: var(--color-orange); }
.primary-button { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 54px; padding: .9rem 1.1rem; border: 1px solid var(--color-accent-deep); border-radius: var(--radius-md); background: var(--color-accent-deep); color: var(--color-accent-ink); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out); }
.calculator > .primary-button { width: calc(100% - 3rem); margin: 0 var(--space-lg) var(--space-lg); }
.primary-button:hover { border-color: var(--color-accent-hover); background: var(--color-accent-hover); }
.primary-button:disabled { cursor: wait; opacity: .65; }
.capacity-strip {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) minmax(0, 1.5fr) auto;
  gap: var(--space-md);
  align-items: center;
  margin: 0 var(--space-lg);
  padding: var(--space-md);
  border-bottom: 1px solid #d99a4c;
  border-left: 4px solid var(--color-orange);
  background: var(--color-orange-soft);
  color: var(--color-ink);
}
.capacity-strip > div { display: grid; gap: .2rem; }
.capacity-kicker, .capacity-readout, .overload-kicker {
  color: #8f5100;
  font: 600 .6rem/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.capacity-strip strong { font: 700 .9rem/1.2 var(--font-display); }
.capacity-strip p { margin: 0; color: #68420d; font-size: .78rem; line-height: 1.35; }
.capacity-readout { white-space: nowrap; }
.authorization-locks {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 4px;
  margin: 0 var(--space-lg);
  padding: var(--space-sm) 0 0;
}
.lock-plate {
  min-width: 0;
  padding: .45rem .2rem;
  border: 1px solid var(--color-rule-strong);
  background: var(--color-paper-2);
  color: var(--color-muted);
  text-align: center;
  font: 600 .53rem/1.15 var(--font-mono);
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}
.lock-plate::before { content: "▣"; display: block; margin-bottom: .2rem; color: var(--color-accent); font-size: .7rem; }
.capacity-strip + .authorization-locks { border-top: 1px solid var(--color-rule); }
.submission-result { margin: 0 var(--space-lg) var(--space-lg); padding: var(--space-md); border-top: 1px solid var(--color-rule); color: var(--color-body); font-size: .875rem; overflow-wrap: anywhere; }
.submission-result strong { color: var(--color-ink); font-family: var(--font-mono); }
.submission-result button { margin-top: var(--space-sm); padding: 0; border: 0; border-bottom: 1px solid var(--color-accent-deep); background: transparent; color: var(--color-accent-deep); font-size: .8rem; }
.submission-result.is-error { border-top-color: var(--color-error); }
.submission-result.is-overload { border-top-color: var(--color-orange); }
.overload-panel { display: grid; gap: .35rem; padding: var(--space-md); border-left: 4px solid var(--color-orange); background: var(--color-orange-soft); }
.overload-title { color: var(--color-ink); font: 700 1.1rem/1.15 var(--font-display); }
.overload-copy { margin: 0; color: #68420d; font-size: .82rem; }
.submission-error { margin: 0; color: var(--color-error); }

.telemetry { border-block: 1px solid var(--color-rule); background: var(--color-paper-2); }
.telemetry-grid { display: grid; grid-template-columns: 1.2fr .8fr .9fr 1.1fr; }
.telemetry p { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; margin: 0; padding: var(--space-md); border-left: 1px solid var(--color-rule); color: var(--color-muted); font: 500 .62rem/1.4 var(--font-mono); letter-spacing: .06em; }
.telemetry p:first-child { border-left: 0; padding-left: 0; }
.telemetry strong { color: var(--color-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--color-success); }

.architecture-band { padding-block: var(--space-3xl) var(--space-2xl); background: var(--color-graphite); color: var(--color-light-ink); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: var(--space-2xl); align-items: end; }
.section-heading p { max-width: 50ch; margin: 0; }
.section-kicker { margin: 0 0 var(--space-sm); color: var(--color-accent-deep); font: 600 .65rem/1 var(--font-mono); letter-spacing: .09em; }
.dark-heading .section-kicker { color: #a8cbff; }
.dark-heading h2 { color: var(--color-light-ink); }
.dark-heading p:not(.section-kicker) { color: var(--color-dark-muted); }
.architecture-map {
  position: relative;
  min-width: 0;
  margin-top: var(--space-2xl);
  padding: var(--space-md);
  overflow: hidden;
  border: 1px solid var(--color-graphite-2);
  background: #101723;
}
.architecture-baton {
  display: grid;
  grid-template-columns: auto minmax(90px, .55fr) minmax(0, 1.45fr);
  gap: var(--space-md);
  align-items: center;
  min-width: 0;
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--color-orange);
  background: var(--color-graphite);
}
.baton-label, .node-index, .zone-label, .council-branch-label, .seat-indicator {
  color: var(--color-dark-muted);
  font: 600 .57rem/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.architecture-baton strong { min-width: 0; color: var(--color-light-ink); font: 600 1rem/1.2 var(--font-mono); overflow-wrap: anywhere; }
.architecture-baton > span:last-child { min-width: 0; color: #a8cbff; font: 600 .65rem/1.3 var(--font-mono); overflow-wrap: anywhere; }
.architecture-track {
  display: grid;
  grid-template-columns: minmax(90px, .75fr) 20px minmax(0, 5.6fr) 20px minmax(250px, 1.9fr);
  gap: 8px;
  align-items: stretch;
  min-width: 0;
  margin-top: var(--space-md);
}
.architecture-zone {
  display: flex;
  min-width: 0;
  padding: .65rem;
  border: 1px solid var(--color-graphite-2);
}
.architecture-zone.zone-public { display: grid; align-content: start; gap: .7rem; border-color: #8d6334; background: #2b241c; }
.architecture-zone.zone-edge { display: grid; grid-template-rows: auto 1fr; gap: .7rem; border-color: #3159a9; background: #17243a; }
.architecture-zone.zone-human { display: grid; grid-template-rows: auto 1fr; gap: .7rem; border-color: #74427d; background: #281e2b; }
.zone-label { display: block; margin: 0 0 .65rem; color: #a8cbff; overflow-wrap: anywhere; }
.zone-public .zone-label { color: #ffc781; }
.zone-human .zone-label { color: #e5b6e8; }
.zone-connector, .flow-connector, .endpoint-connector {
  position: relative;
  display: block;
  align-self: center;
  height: 1px;
  min-width: 0;
  background: #6e7d98;
}
.zone-connector::after, .flow-connector::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  color: #a8cbff;
  transform: translateY(-50%) rotate(45deg);
}
.zone-flow {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  min-width: 0;
  gap: 6px;
}
.zone-flow > .flow-connector { flex: 0 1 12px; }
.architecture-node {
  position: relative;
  display: grid;
  flex: 1 1 0;
  align-content: start;
  gap: .4rem;
  min-width: 0;
  padding: .55rem;
  border: 1px solid #7e8ca3;
  background: var(--color-paper);
  color: var(--color-ink);
  transition: border-color 150ms var(--ease-out), background-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out), transform 150ms var(--ease-out);
}
.architecture-node strong, .architecture-node > span:not(.node-index):not(.node-glyph):not(.seat-indicator) { min-width: 0; overflow-wrap: anywhere; }
.architecture-node strong { font: 600 .69rem/1.15 var(--font-display); }
.architecture-node > span:not(.node-index):not(.node-glyph):not(.seat-indicator) { color: #596273; font: 400 .58rem/1.25 var(--font-mono); }
.node-index { color: #596273; font-size: .52rem; }
.node-glyph { position: relative; display: block; width: 30px; height: 24px; margin-bottom: .15rem; border: 1px solid var(--color-accent); background: #e0ecff; }
.node-glyph::before, .node-glyph::after { content: ""; position: absolute; }
.glyph-browser::before { inset: 5px 4px 4px; border-top: 1px solid var(--color-accent); }
.glyph-browser::after { left: 5px; top: 3px; width: 3px; height: 3px; border-radius: 50%; background: var(--color-accent); box-shadow: 5px 0 var(--color-accent); }
.glyph-worker { border: 0; background: transparent; }
.glyph-worker::before { inset: 3px 7px; border: 1px solid var(--color-accent); transform: skewY(-28deg); }
.glyph-worker::after { left: 4px; top: 10px; width: 22px; height: 1px; background: var(--color-accent); transform: rotate(-28deg); box-shadow: 0 5px var(--color-accent); }
.glyph-storage::before { inset: 3px 5px; border: 1px solid var(--color-orange); border-radius: 50%; box-shadow: inset 0 -5px #ffe9cb; }
.glyph-storage::after { left: 9px; top: 11px; width: 12px; height: 1px; background: var(--color-orange); box-shadow: 0 4px var(--color-orange); }
.glyph-workflow { border-radius: 50%; background: transparent; }
.glyph-workflow::before { left: 14px; top: 5px; width: 1px; height: 10px; background: var(--color-accent); transform-origin: bottom; transform: rotate(25deg); }
.glyph-workflow::after { left: 14px; top: 11px; width: 7px; height: 1px; background: var(--color-accent); transform: rotate(25deg); transform-origin: left; }
.glyph-dynamic { border-style: dashed; background: #e0ecff; }
.glyph-dynamic::before { left: 7px; top: 8px; width: 15px; height: 7px; border-block: 1px solid var(--color-accent); }
.glyph-chair { border-color: var(--color-orange); background: var(--color-orange-soft); }
.glyph-chair::before { left: 7px; top: 5px; width: 15px; height: 10px; border: 1px solid var(--color-orange); border-radius: 50%; }
.glyph-chair::after { left: 3px; right: 3px; bottom: 3px; height: 1px; background: var(--color-orange); }
.glyph-discord { border-color: #b067bb; background: #f2d6f4; }
.glyph-discord::before { inset: 4px 5px; border: 1px solid #941fba; border-radius: 5px; }
.glyph-discord::after { left: 10px; top: 9px; width: 3px; height: 3px; border-radius: 50%; background: #941fba; box-shadow: 7px 0 #941fba; }
.glyph-human { border-color: #b067bb; border-radius: 50%; background: #f2d6f4; }
.glyph-human::before { left: 11px; top: 4px; width: 7px; height: 7px; border: 1px solid #941fba; border-radius: 50%; }
.glyph-human::after { left: 7px; bottom: 3px; width: 15px; height: 8px; border: 1px solid #941fba; border-radius: 8px 8px 3px 3px; }
.glyph-result { border-color: var(--color-accent); background: #e0ecff; }
.glyph-result::before { inset: 4px 7px; border: 1px solid var(--color-accent); border-radius: 50%; }
.glyph-result::after { left: 10px; top: 11px; width: 10px; height: 1px; background: var(--color-accent); transform: rotate(45deg); }
.glyph-failure { border-color: #e68c89; background: #3b2027; }
.glyph-failure::before, .glyph-failure::after { left: 14px; top: 3px; width: 1px; height: 17px; background: #ff9c94; transform: rotate(45deg); }
.glyph-failure::after { transform: rotate(-45deg); }
.architecture-node.is-current { border-color: var(--color-orange); background: #fff5e7; box-shadow: 0 0 0 2px rgb(246 130 31 / .34); transform: translateY(-2px); }
.architecture-node[data-node="chair"].is-current { border-color: var(--color-orange); }
.architecture-node[data-node="human"].is-current, .architecture-node[data-node="discord"].is-current { border-color: #941fba; box-shadow: 0 0 0 2px rgb(148 31 186 / .28); }
.architecture-node[data-node="failure"].is-current { border-color: #ff9c94; background: #3b2027; color: var(--color-light-ink); box-shadow: 0 0 0 2px rgb(255 94 85 / .36); }
.architecture-node[data-node="failure"].is-current > span:not(.node-index):not(.node-glyph):not(.seat-indicator) { color: #ffc4be; }
.council-unit {
  display: grid;
  flex: 1.8 1 170px;
  align-content: start;
  gap: .45rem;
  min-width: 0;
  padding: .5rem;
  border: 1px solid #5478b9;
  background: #1d2d48;
}
.council-unit.is-current { border-color: var(--color-orange); box-shadow: 0 0 0 2px rgb(246 130 31 / .34); transform: translateY(-2px); }
.council-unit > header { display: grid; gap: .2rem; min-width: 0; }
.council-unit > header strong { color: #f4f6f8; font: 600 .67rem/1.15 var(--font-display); overflow-wrap: anywhere; }
.council-unit > header span { color: #a8cbff; font: 400 .55rem/1.2 var(--font-mono); overflow-wrap: anywhere; }
.council-branch { display: grid; gap: .35rem; min-width: 0; }
.council-branch-label { color: #a8cbff; font-size: .5rem; }
.council-seats { display: grid; grid-template-columns: 1fr; gap: 4px; min-width: 0; margin: 0; }
.architecture-map .council-seat { display: grid; gap: .2rem; padding: .4rem; border-color: #6684b8; background: #f7f6f0; }
.architecture-map .council-seat strong { font-size: .58rem; }
.architecture-map .council-seat > span:not(.node-index):not(.seat-indicator) { font-size: .49rem; }
.architecture-map .council-seat-two { border-left: 3px solid var(--color-orange); }
.seat-indicator { display: flex; align-items: center; gap: .3rem; margin-top: .15rem; color: #9b5100; font-size: .46rem; }
.seat-indicator i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--color-orange); box-shadow: 0 0 0 2px rgb(246 130 31 / .2); }
.architecture-endpoints { display: flex; align-items: center; gap: 10px; min-width: 0; margin-top: 10px; }
.endpoint-connector { flex: 1 1 auto; background: #74414a; }
.node-failure { flex: 0 1 250px; border-color: #8f4c58; background: #2a1a21; color: var(--color-light-ink); }
.node-failure .node-index { color: #ffc4be; }
.node-failure > span:not(.node-index):not(.node-glyph):not(.seat-indicator) { color: #c99aa1; }
.node-failure strong { color: var(--color-light-ink); }
.diagram-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--color-graphite-2); color: var(--color-dark-muted); font: 400 .58rem/1.3 var(--font-mono); }
.legend-flow-mark, .legend-branch-mark, .legend-human-mark { display: inline-block; width: 22px; height: 2px; }
.legend-flow-mark { background: #a8cbff; }
.legend-branch-mark { background: var(--color-orange); }
.legend-human-mark { width: 9px; height: 9px; border: 1px solid #b067bb; background: #f2d6f4; }

.human-loop { padding-block: var(--space-3xl); border-bottom: 1px solid var(--color-rule); background: var(--color-paper); }
.human-grid { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.human-visual { position: relative; overflow: hidden; background: var(--color-paper-2) url("/assets/rube-human-control.webp") center / cover no-repeat; }
.human-visual img { display: block; width: 100%; height: auto; aspect-ratio: 1.28 / 1; object-fit: cover; border: 1px solid var(--color-ink); filter: saturate(.82) contrast(1.04); }
.image-stamp { position: absolute; right: 1rem; bottom: 1rem; padding: .35rem .5rem; border: 1px solid var(--color-ink); background: var(--color-paper); color: var(--color-ink); font: 600 .6rem/1 var(--font-mono); letter-spacing: .08em; }
.human-copy h2 { max-width: 13ch; }
.human-copy h2 a { color: var(--color-accent-deep); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.human-copy > p:not(.section-kicker):not(.human-status) { max-width: 50ch; margin: var(--space-xl) 0 0; }
.human-status { display: flex; align-items: center; gap: var(--space-sm); margin: var(--space-xl) 0 0; color: var(--color-muted); font: 500 .78rem/1.4 var(--font-mono); }
.status-pin { width: 9px; height: 9px; border: 2px solid var(--color-orange); border-radius: 50%; }
.human-wait-gate {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: var(--space-md);
  align-items: center;
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  border: 1px solid var(--color-rule-strong);
  background: var(--color-paper-2);
}
.human-wait-gate.is-waiting { border-left: 4px solid var(--color-orange); }
.human-wait-gate.is-applying { border-left: 4px solid var(--color-accent); background: #e8efff; }
.human-gate-mark { position: relative; display: block; width: 50px; height: 50px; border: 1px solid var(--color-rule-strong); background: var(--color-paper); }
.human-gate-mark i { position: absolute; left: 20px; top: 8px; width: 10px; height: 10px; border: 2px solid var(--color-orange); border-radius: 50%; background: var(--color-paper); }
.human-gate-mark i::after { content: ""; position: absolute; left: 3px; top: 8px; width: 2px; height: 17px; background: var(--color-orange); }
.human-gate-mark b { position: absolute; left: 13px; bottom: 8px; width: 24px; height: 15px; border: 2px solid var(--color-orange); border-top: 0; clip-path: polygon(0 0, 100% 0, 68% 50%, 100% 100%, 0 100%, 32% 50%); }
.human-wait-gate.is-applying .human-gate-mark i { border-color: var(--color-accent); }
.human-wait-gate.is-applying .human-gate-mark i::after, .human-wait-gate.is-applying .human-gate-mark b { background: var(--color-accent); border-color: var(--color-accent); }
.human-wait-gate, .final-verdict { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.human-wait-gate.is-handoff-exiting { opacity: 0; transform: translateY(-8px) scale(.98); }
.human-gate-kicker, .final-verdict-label { display: block; color: var(--color-muted); font: 600 .6rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.human-gate-title { display: block; margin-top: .4rem; color: var(--color-ink); font: 700 1.25rem/1.1 var(--font-display); overflow-wrap: anywhere; }
.human-gate-detail { margin: .45rem 0 0; color: var(--color-muted); font-size: .82rem; }
.final-verdict { display: grid; gap: .55rem; margin-top: var(--space-xl); padding: var(--space-lg); border: 2px solid var(--color-success); background: #e6f2ec; }
.final-verdict.is-handoff-entering { opacity: 0; transform: translateY(8px) scale(.98); }
.final-verdict-label { color: var(--color-success); }
.final-verdict-expression { color: var(--color-ink); font: 700 clamp(1.8rem, 5vw, 3.1rem)/1 var(--font-display); letter-spacing: -.05em; overflow-wrap: anywhere; }

.tracker { padding-block: var(--space-4xl) var(--space-3xl); }
.lookup { max-width: 820px; margin-top: var(--space-2xl); }
.lookup > div { display: flex; }
.lookup input { min-width: 0; flex: 1; padding: .9rem 1rem; border: 1px solid var(--color-rule-strong); border-right: 0; border-radius: var(--radius-md) 0 0 var(--radius-md); background: var(--color-paper); color: var(--color-ink); font: 400 .85rem/1 var(--font-mono); }
.lookup input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgb(62 116 255 / .14); outline: none; }
.lookup button { padding: .9rem 1.2rem; border: 1px solid var(--color-ink); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--color-ink); color: var(--color-light-ink); font-weight: 600; white-space: nowrap; }
.job-detail { margin-top: var(--space-xl); border-top: 1px solid var(--color-rule-strong); }
.job-summary { display: grid; grid-template-columns: .7fr 1.3fr; gap: var(--space-xl); padding-block: var(--space-xl); border-bottom: 1px solid var(--color-rule); }
.job-expression { color: var(--color-ink); font: 700 clamp(2.5rem, 6vw, 4.75rem)/1 var(--font-display); letter-spacing: -.05em; overflow-wrap: anywhere; }
.job-results { min-width: 0; }
.job-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.result-cell span { color: var(--color-muted); font: 600 .6rem/1 var(--font-mono); letter-spacing: .08em; }
.result-cell strong { display: block; margin-top: var(--space-sm); color: var(--color-ink); font: 500 1.3rem/1.2 var(--font-display); overflow-wrap: anywhere; }
.status-line { margin-top: var(--space-md); color: var(--color-muted); font: 400 .72rem/1.4 var(--font-mono); overflow-wrap: anywhere; }
.badge { display: inline-block; padding: .3rem .5rem; border: 1px solid var(--color-rule-strong); border-radius: var(--radius-sm); color: var(--color-body); font: 600 .62rem/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.badge[data-state="complete"] { border-color: var(--color-success); color: var(--color-success); }
.badge[data-state="errored"], .badge[data-state="expired"], .badge[data-state="enqueue_failed"], .badge[data-state="queue_failed"] { border-color: var(--color-error); color: var(--color-error); }
.badge[data-state="awaiting_human"] { border-color: var(--color-warning); color: var(--color-body); }

.council-chamber { padding-block: var(--space-xl); border-bottom: 1px solid var(--color-rule); }
.council-heading { display: grid; grid-template-columns: minmax(0, .9fr) minmax(240px, 1.1fr); gap: var(--space-xl); align-items: end; }
.council-title { color: var(--color-ink); font: 700 1.3rem/1.2 var(--font-display); }
.council-heading p { max-width: 42ch; margin: 0; color: var(--color-muted); font-size: .85rem; }
.council-seats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-lg); }
.council-seat-card { min-width: 0; min-height: 250px; padding: var(--space-md); border: 1px solid var(--color-rule); border-top: 3px solid var(--color-accent); background: var(--color-paper-2); }
.council-seat-card.is-dissenter { border-top-color: var(--color-orange); background: var(--color-orange-soft); }
.seat-number, .seat-tag, .chair-label, .chair-rationale-label { display: block; color: var(--color-muted); font: 600 .6rem/1.3 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.seat-name { display: block; margin-top: var(--space-md); color: var(--color-ink); font: 600 1.1rem/1.2 var(--font-display); overflow-wrap: anywhere; }
.seat-tag { margin-top: .35rem; color: var(--color-accent-deep); }
.is-dissenter .seat-tag { color: #9b5100; }
.council-definitions { display: grid; gap: .65rem; margin: var(--space-lg) 0 0; }
.council-definition { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--space-xs); border-top: 1px solid var(--color-rule); padding-top: .55rem; }
.council-definition dt { color: var(--color-muted); font: 600 .56rem/1.3 var(--font-mono); letter-spacing: .05em; }
.council-definition dd { min-width: 0; margin: 0; color: var(--color-body); font-size: .78rem; overflow-wrap: anywhere; }
.council-definition:nth-child(1) dd, .council-definition:nth-child(2) dd, .council-definition:nth-child(4) dd { font-family: var(--font-mono); font-size: .7rem; }
.chair-verdict { max-width: 700px; margin: var(--space-xl) auto 0; padding: var(--space-lg); border: 2px solid var(--color-orange); background: var(--color-ink); color: var(--color-light-ink); text-align: center; }
.chair-label, .chair-rationale-label { color: var(--color-orange); }
.chair-answer { display: block; margin: .6rem 0 .9rem; color: var(--color-light-ink); font: 700 clamp(2rem, 5vw, 3.25rem)/1 var(--font-display); overflow-wrap: anywhere; }
.chair-rationale { max-width: 58ch; margin: .35rem auto 0; color: var(--color-dark-muted); font-size: .85rem; }

.timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: 170px 1fr; gap: var(--space-lg); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); }
.timeline time { color: var(--color-muted); font: 400 .68rem/1.4 var(--font-mono); }
.timeline strong { color: var(--color-ink); }
.timeline p { margin: .2rem 0 0; color: var(--color-muted); font-size: .85rem; }
.timeline-empty { color: var(--color-muted); padding-block: var(--space-lg); }

.ledger { padding-block: var(--space-3xl); border-block: 1px solid var(--color-rule); background: var(--color-paper-2); }
.ledger-heading { display: flex; justify-content: space-between; align-items: end; }
.ledger-heading p:not(.section-kicker) { margin-top: var(--space-sm); color: var(--color-muted); }
.text-button { padding: 0 0 .15rem; border: 0; border-bottom: 1px solid var(--color-accent-deep); background: transparent; color: var(--color-accent-deep); white-space: nowrap; }
.text-button:hover { color: var(--color-accent-deep); border-color: var(--color-accent-deep); }
.table-wrap { margin-top: var(--space-xl); overflow-x: auto; }
table { width: 100%; min-width: 820px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { padding: var(--space-sm); border-bottom: 1px solid var(--color-rule-strong); color: var(--color-muted); text-align: left; font: 600 .62rem/1 var(--font-mono); letter-spacing: .08em; }
td { padding: var(--space-md) var(--space-sm); border-bottom: 1px solid var(--color-rule); color: var(--color-body); font-size: .87rem; }
td:first-child { color: var(--color-muted); font-family: var(--font-mono); font-size: .7rem; }
td a { text-decoration-color: var(--color-accent); text-underline-offset: 3px; }

.closing { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); gap: var(--space-2xl); padding-block: var(--space-4xl); }
.closing-kicker { grid-column: 1 / -1; margin: 0; color: var(--color-accent-deep); font: 600 .65rem/1 var(--font-mono); letter-spacing: .09em; }
.closing > h2 { grid-column: 1; }
.closing > p:not(.closing-kicker) { max-width: 45ch; margin: 0; align-self: end; }
.closing-button { grid-column: 2; margin-top: calc(var(--space-xl) * -1); }
footer { border-top: 1px solid var(--color-rule); }
footer .shell { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 96px; }
footer p { margin: 0; color: var(--color-muted); font: 400 .68rem/1.5 var(--font-mono); }

.command-dialog { width: min(560px, calc(100% - 2rem)); padding: 0; border: 1px solid var(--color-rule-strong); border-radius: var(--radius-lg); background: var(--color-paper); color: var(--color-body); box-shadow: none; }
.command-dialog::backdrop { background: var(--color-overlay); }
.command-panel { padding: var(--space-md); }
.command-input { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm); border-bottom: 1px solid var(--color-rule); color: var(--color-accent); font-family: var(--font-mono); }
.command-input input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--color-ink); }
.command-list { display: grid; gap: var(--space-xs); padding-top: var(--space-md); }
.command-list button { display: flex; justify-content: space-between; padding: var(--space-sm); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-body); text-align: left; }
.command-list button:hover, .command-list button:focus-visible { background: var(--color-paper-3); color: var(--color-ink); }
.dialog-close { display: block; margin: var(--space-md) 0 0 auto; padding: .4rem; border: 0; background: transparent; color: var(--color-muted); font: 600 .65rem/1 var(--font-mono); }

/* Review console styles remain shared with review.html. */
.review-nav-label { color: var(--color-muted); font: 600 .65rem/1 var(--font-mono); letter-spacing: .08em; }
.review-main { min-height: calc(100dvh - 160px); padding-block: var(--space-3xl); }
.review-header { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-xl); align-items: end; }
.review-header .signal { grid-column: 1 / -1; }
.review-header h1 { max-width: 13ch; font-size: clamp(2.7rem, 5vw, 4.6rem); }
.review-header > p:last-child { max-width: 45ch; margin: 0; }
.review-console { margin-top: var(--space-2xl); border-top: 1px solid var(--color-rule-strong); }
.loading-line { padding-block: var(--space-xl); color: var(--color-muted); font-family: var(--font-mono); }
.review-equation { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--space-2xl); padding-block: var(--space-2xl); }
.review-equation-display { color: var(--color-ink); font: 700 clamp(3.5rem, 9vw, 7rem)/1 var(--font-display); letter-spacing: -.06em; }
.machine-opinions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.opinion { padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-md); }
.opinion span { color: var(--color-muted); font: 600 .62rem/1 var(--font-mono); letter-spacing: .08em; }
.opinion strong { display: block; margin-top: var(--space-lg); color: var(--color-ink); font: 500 2rem/1 var(--font-display); overflow-wrap: anywhere; }
.review-council { padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); }
.review-council h2 { font-size: 1.5rem; }
.review-vote-meta, .review-vote-answer, .review-vote-note { margin: .7rem 0 0; overflow-wrap: anywhere; }
.review-vote-meta { color: var(--color-muted); font: 400 .68rem/1.4 var(--font-mono); }
.review-vote-answer { color: var(--color-ink); font: 600 1.2rem/1.2 var(--font-display); }
.review-vote-note { color: var(--color-muted); font-size: .8rem; }
.review-chair { margin-top: var(--space-md); padding: var(--space-md); border-left: 3px solid var(--color-orange); background: var(--color-paper-2); }
.review-chair strong { color: var(--color-ink); }
.review-chair p { margin: .35rem 0 0; color: var(--color-muted); }
.human-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); padding: var(--space-xl); background: var(--color-graphite); color: var(--color-light-ink); }
.human-form h2 { color: var(--color-light-ink); font-size: 1.6rem; }
.human-form .form-copy p { color: var(--color-dark-muted); }
.human-fields { display: grid; gap: var(--space-md); }
.human-fields label span { display: block; margin-bottom: var(--space-xs); color: var(--color-dark-muted); font: 600 .62rem/1 var(--font-mono); letter-spacing: .08em; }
.human-fields input, .human-fields textarea { width: 100%; padding: .85rem; border: 1px solid var(--color-graphite-2); border-radius: var(--radius-md); background: var(--color-graphite-2); color: var(--color-light-ink); }
.human-fields textarea { min-height: 92px; resize: vertical; }
.review-error { padding: var(--space-xl); border: 1px solid var(--color-error); color: var(--color-error); }
.review-success { padding: var(--space-2xl); color: var(--color-ink); text-align: left; }
.review-success h2 { margin-bottom: var(--space-md); }

@keyframes grid-drift { from { background-position: 0 0, 0 0; } to { background-position: 32px 32px, 32px 32px; } }
@keyframes signal-sweep { from { transform: translateY(-10vh); } to { transform: translateY(80vh); } }
@keyframes rail-packet { from { transform: translateX(0); } to { transform: translateX(calc(100% + 1rem)); } }
@keyframes indicator-step { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }
@keyframes flow-dash { to { stroke-dashoffset: -40; } }
@keyframes packet-flare { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes discharge-flash { 0% { opacity: 0; } 12% { opacity: .2; } 36% { opacity: .07; } 100% { opacity: 0; } }
@keyframes discharge-spark { 0% { opacity: 0; transform: rotate(var(--spark-angle)) translateX(0) scaleX(.15); } 18% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--spark-angle)) translateX(clamp(42px, 10vw, 120px)) scaleX(.62); } }
@keyframes discharge-stamp { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.82); } 18% { opacity: .94; transform: translate(-50%, -50%) scale(1.04); } 50% { opacity: .72; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -53%) scale(.98); } }
@keyframes grid-surge { 0%, 100% { opacity: .3; } 20% { opacity: .82; } 52% { opacity: .5; } }
@keyframes dispatch-origin { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 18% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); } }
@keyframes dispatch-shutter-top { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } }
@keyframes dispatch-shutter-bottom { 0% { transform: translateY(0); } 100% { transform: translateY(100%); } }
@keyframes dispatch-shaft { 0% { opacity: 0; transform: translateX(-50%) scaleY(.2); } 100% { opacity: 1; transform: translateX(-50%) scaleY(1); } }
@keyframes dispatch-plate { 0% { opacity: 0; transform: translate(-50%, -45%) translateY(18px); } 100% { opacity: 1; transform: translate(-50%, -45%) translateY(0); } }
@keyframes dispatch-gates { 0% { opacity: 0; transform: translate(-50%, -50%) translateY(18px); } 100% { opacity: 1; transform: translate(-50%, -50%) translateY(0); } }
@keyframes dispatch-intake { 0% { opacity: 0; transform: translateX(-50%) scaleX(.12); } 100% { opacity: 1; transform: translateX(-50%) scaleX(1); } }
@keyframes dispatch-return { 0% { opacity: 0; transform: translateX(-50%) translateY(18px); } 100% { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes uuid-stencil { 0% { opacity: .25; color: #58667d; } 55% { opacity: 1; color: #fff; } 100% { opacity: 1; color: #f4f6f8; } }

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { max-width: 720px; padding-top: 0; }
  .hero-side { width: min(760px, 100%); margin-left: auto; }
  .section-heading, .review-header, .review-equation { grid-template-columns: 1fr; }
  .human-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .closing { grid-template-columns: 1fr; }
  .closing-button { grid-column: 1; margin-top: 0; max-width: 420px; }
  .review-header .signal { grid-column: 1; }
  .architecture-track { grid-template-columns: minmax(76px, .6fr) 14px minmax(0, 5fr) 14px minmax(190px, 1.6fr); }
  .architecture-node { padding-inline: .4rem; }
  .architecture-node strong { font-size: .62rem; }
  .council-unit { flex-basis: 145px; }
}

@media (max-width: 720px) {
  .shell { width: min(100% - 2rem, 1180px); }
  .nav { min-height: 60px; padding-inline: 1rem; }
  .nav-links { gap: var(--space-xs); }
  .nav-links > a { display: none; }
  .hero { gap: var(--space-xl); padding-block: var(--space-2xl); }
  h1 { font-size: clamp(2.7rem, 14vw, 4rem); }
  .hero-facts { justify-content: space-between; gap: var(--space-sm); }
  .agent-interfaces { max-width: none; }
  .hero-figure { margin-left: 0; }
  .calculator { width: calc(100% - .5rem); margin: -2rem .5rem 0 0; }
  .equation { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr) minmax(0, .85fr); gap: var(--space-xs); padding: var(--space-lg) var(--space-sm) var(--space-md); }
  .equation input[type="number"], .operators span { height: 72px; }
  .equation input[type="number"] { font-size: 2rem; }
  .operators span { font-size: 1.55rem; }
  .machine-console { grid-template-columns: 1fr; gap: var(--space-sm); margin-inline: var(--space-sm); }
  .calculator > .primary-button { width: calc(100% - 1.5rem); margin-inline: var(--space-sm); }
  .submission-result { margin-inline: var(--space-sm); }
  .capacity-strip { grid-template-columns: 1fr; gap: var(--space-xs); margin-inline: var(--space-sm); }
  .capacity-readout { white-space: normal; }
  .authorization-locks { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline: var(--space-sm); }
  .telemetry-grid { grid-template-columns: 1fr; }
  .telemetry p, .telemetry p:first-child { padding: var(--space-sm) 0; border-left: 0; border-top: 1px solid var(--color-rule); }
  .telemetry p:first-child { border-top: 0; }
  .architecture-band, .ledger { padding-block: var(--space-2xl); }
  .architecture-map { margin-top: var(--space-xl); padding: var(--space-sm); }
  .architecture-baton { grid-template-columns: 1fr; gap: .35rem; }
  .architecture-track { display: flex; flex-direction: column; gap: 8px; }
  .architecture-zone { width: 100%; }
  .zone-connector { width: 1px; height: 20px; justify-self: center; align-self: center; }
  .zone-connector::after { right: auto; left: 50%; top: auto; bottom: -1px; transform: translateX(-50%) rotate(135deg); }
  .zone-flow { flex-direction: column; width: 100%; }
  .zone-flow > .flow-connector { width: 1px; height: 14px; flex: 0 0 14px; align-self: center; }
  .flow-connector::after { right: auto; left: 50%; top: auto; bottom: -1px; transform: translateX(-50%) rotate(135deg); }
  .architecture-node, .council-unit { flex: none; width: 100%; }
  .architecture-map .council-seats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .architecture-map .council-seat { min-width: 0; }
  .architecture-endpoints { align-items: stretch; flex-direction: column; }
  .endpoint-connector { width: 1px; height: 18px; flex: 0 0 18px; align-self: center; }
  .node-failure { width: 100%; }
  .diagram-legend { gap: .35rem .55rem; }
  .human-loop { padding-block: var(--space-2xl); }
  .human-grid { grid-template-columns: 1fr; }
  .human-copy h2 { max-width: 16ch; }
  .tracker, .closing { padding-block: var(--space-3xl); }
  .lookup > div { display: grid; gap: var(--space-xs); }
  .lookup input, .lookup button { border: 1px solid var(--color-rule-strong); border-radius: var(--radius-md); }
  .lookup button { border-color: var(--color-ink); }
  .job-summary { grid-template-columns: 1fr; }
  .council-heading { grid-template-columns: 1fr; gap: var(--space-sm); }
  .council-seats { grid-template-columns: 1fr; }
  .council-seat-card { min-height: 0; }
  .timeline li { grid-template-columns: 1fr; gap: var(--space-xs); }
  .ledger-heading { align-items: start; }
  footer .shell { align-items: flex-start; flex-direction: column; justify-content: center; }
  .review-main { padding-block: var(--space-2xl); }
  .machine-opinions, .human-form { grid-template-columns: 1fr; }
  .human-form { padding: var(--space-lg); }
}

@media (max-width: 375px) {
  .shell { width: calc(100% - 1rem); }
  .nav { padding-inline: .5rem; }
  .wordmark { font-size: .92rem; }
  .brand-mark { width: 24px; height: 24px; }
  .command-button { padding-inline: .45rem; }
  .language-toggle { padding-inline: .42rem; white-space: nowrap; }
  .panel-head { padding-inline: var(--space-sm); }
  .live-mark { display: none; }
  .hero-facts dt { font-size: .56rem; }
  .agent-interfaces > header { align-items: flex-start; }
  .interface-channel { grid-template-columns: 32px minmax(0, 1fr); }
  .interface-state { grid-column: 2; text-align: left; }
  .interface-channel p { grid-column: 2; }
  .equation { gap: 4px; padding-inline: .35rem; }
  .equation input[type="number"] { font-size: 1.7rem; }
  .operators span { font-size: 1.25rem; }
  .job-meta { grid-template-columns: 1fr; }
  .review-nav-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .site-grid, .site-grid::after, .flow-path, .flow-packet, .discharge, .discharge *, .dispatch-bay, .dispatch-bay * { animation: none !important; }
  .discharge, .dispatch-bay { display: none; }
}