:root {
  --black: #080a09;
  --black-soft: #0c0f0d;
  --panel: #111411;
  --panel-high: #171b17;
  --steel: #939a91;
  --text: #e8e9df;
  --muted: #949a92;
  --dim: #7e857d;
  --line: rgba(218, 223, 211, 0.18);
  --line-hard: rgba(218, 223, 211, 0.34);
  --hot: #c43b28;
  --hot-bright: #ff6744;
  --hot-dark: #a52f23;
  --phosphor: #a9c672;
  --amber: #d99752;
  --surface-ring: 0 0 0 1px rgba(255, 255, 255, 0.08);
  --surface-ring-hover: 0 0 0 1px rgba(255, 255, 255, 0.13);
  --max: 1600px;
  --pad: clamp(20px, 4vw, 68px);
  --space: clamp(96px, 11vw, 180px);
  --sans: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --mono: "PT Mono", "Courier New", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--black);
  scroll-behavior: smooth;
  scroll-padding-top: 78px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  position: relative;
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 60% 8%, rgba(57, 67, 59, 0.2), transparent 33%),
    var(--black);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 1000;
  opacity: 0.045;
  background-image:
    repeating-radial-gradient(circle at 17% 31%, transparent 0 1px, rgba(255, 255, 255, 0.16) 1px 2px),
    repeating-radial-gradient(circle at 72% 64%, transparent 0 2px, rgba(255, 255, 255, 0.12) 2px 3px);
  background-size: 7px 9px, 11px 13px;
  content: "";
  pointer-events: none;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

button,
a,
input[type="range"] {
  -webkit-tap-highlight-color: transparent;
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

p,
li,
figcaption {
  text-wrap: pretty;
}

.os-clock,
.canvas-coordinates,
.os-statusbar,
.scan-divider,
.release-head,
.release-seal,
.board-metrics,
.input-head {
  font-variant-numeric: tabular-nums;
}

::selection {
  background: var(--hot);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--hot-bright);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1200;
  padding: 12px 16px;
  transform: translateY(-160%);
  background: var(--text);
  color: var(--black);
  font-family: var(--mono);
  font-size: 11px;
  text-decoration: none;
  transition: transform 180ms ease-out;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 72px;
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--line);
  background: rgba(8, 10, 9, 0.86);
  backdrop-filter: blur(18px) saturate(0.8);
}

.site-header::after {
  position: absolute;
  right: var(--pad);
  bottom: -1px;
  width: 52px;
  height: 1px;
  background: var(--hot);
  content: "";
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  width: fit-content;
  min-height: 40px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.brand sup {
  position: relative;
  top: -0.4em;
  margin-left: 4px;
  color: var(--hot-bright);
  font-size: 7px;
}

.brand-symbol {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--steel);
  stroke-width: 0.8;
}

.brand-symbol .brand-core {
  fill: var(--hot);
  stroke: none;
}

.header-state {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.header-state i,
.os-online i,
.os-statusbar i,
.rail-bottom i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--phosphor);
  box-shadow: 0 0 10px rgba(169, 198, 114, 0.7);
}

.header-state b {
  color: var(--phosphor);
  font-weight: 400;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(18px, 2vw, 34px);
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: #b3b8b1;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 160ms ease-out, scale 160ms ease-out;
}

.site-nav a:hover {
  color: #fff;
}

.site-nav .header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 40px;
  padding: 0 13px 0 15px;
  border: 0;
  box-shadow: var(--surface-ring);
  color: var(--text);
  transition: background-color 160ms ease-out, box-shadow 160ms ease-out, color 160ms ease-out, scale 160ms ease-out;
}

.site-nav .header-cta:hover {
  background: var(--hot);
  box-shadow: 0 0 0 1px rgba(255, 103, 68, 0.72);
}

.header-cta span {
  color: var(--hot-bright);
  transform: translateX(1px);
}

.header-cta:hover span {
  color: #fff;
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 94px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: color 160ms ease-out, scale 160ms ease-out;
}

.menu-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.menu-icon {
  position: relative;
  width: 24px;
  height: 14px;
}

.menu-icon i {
  position: absolute;
  right: 0;
  width: 24px;
  height: 1px;
  background: currentColor;
  transition: top 180ms ease-out, transform 180ms ease-out;
}

.menu-icon i:first-child { top: 2px; }
.menu-icon i:last-child { top: 11px; }
.menu-toggle[aria-expanded="true"] .menu-icon i:first-child { top: 7px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon i:last-child { top: 7px; transform: rotate(-45deg); }

.menu-toggle:active,
.site-nav a:active,
.button:active,
.motion-toggle:active,
.work-tab:active,
.os-command button:active,
.contact-input button:active,
.to-top:active {
  scale: 0.96;
}

.hero {
  position: relative;
  height: 300svh;
}

.hero-pin {
  position: sticky;
  top: 72px;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 1fr auto;
  gap: 24px;
  height: calc(100svh - 72px);
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(88px, 10vw, 154px) var(--pad) 0;
  overflow: hidden;
}

.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: 0.24;
  background-image:
    linear-gradient(rgba(217, 223, 212, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 223, 212, 0.12) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000 0, transparent 87%);
}

.hero-pin::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--black) 0 18%, rgba(8, 10, 9, 0.91) 30%, rgba(8, 10, 9, 0.12) 67%, var(--black) 100%);
  content: "";
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 3;
  grid-column: 1 / span 7;
  align-self: center;
  padding-bottom: 90px;
}

.eyebrow,
.section-code {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.09em;
  line-height: 1.5;
  text-transform: uppercase;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.eyebrow::before {
  width: 36px;
  height: 1px;
  background: var(--hot);
  content: "";
}

.eyebrow span {
  color: var(--hot-bright);
}

.hero h1,
.thesis h2,
.lifecycle h2,
.workspace-heading h2,
.process h2,
.modes h2,
.concepts-heading h2,
.doctrine h2,
.pilot h2,
.contact h2 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.83;
  text-transform: uppercase;
}

.hero h1 {
  font-size: clamp(78px, 10.2vw, 158px);
}

.hero h1 em,
.thesis h2 span,
.lifecycle h2 span,
.workspace-heading h2 span,
.process h2 span,
.modes h2 span,
.concepts-heading h2 span,
.pilot h2 span {
  color: var(--hot-bright);
  font-style: normal;
}

.hero-lead {
  max-width: 560px;
  margin: 38px 0 0 2px;
  color: #bcc1ba;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.33;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 38px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 54px;
  padding: 0 17px 0 19px;
  border: 0;
  box-shadow: var(--surface-ring);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 180ms ease-out, box-shadow 180ms ease-out, color 180ms ease-out, scale 160ms ease-out;
}

.button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transform: translateX(1px);
}

.button-hot {
  background: var(--hot);
  box-shadow: inset 3px 0 0 var(--hot-bright), 0 0 0 1px rgba(255, 103, 68, 0.54);
  color: #fff;
}

.button-hot:hover {
  background: var(--hot-bright);
  box-shadow: inset 3px 0 0 rgba(8, 10, 9, 0.52), 0 0 0 1px rgba(255, 103, 68, 0.8);
  color: var(--black);
}

.button-quiet:hover {
  background: var(--text);
  box-shadow: var(--surface-ring-hover);
  color: var(--black);
}

.hero-machine {
  position: absolute;
  top: 5%;
  right: -9%;
  bottom: 120px;
  z-index: -2;
  width: 81%;
  margin: 0;
  perspective: 1400px;
  pointer-events: none;
}

.hero-machine::before {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: radial-gradient(circle at 67% 46%, transparent 0 31%, rgba(8, 10, 9, 0.45) 74%, var(--black) 100%);
  content: "";
  pointer-events: none;
}

.hero-machine::after {
  position: absolute;
  right: 12%;
  bottom: 9%;
  z-index: 7;
  width: 40%;
  height: 1px;
  transform: scaleX(var(--assembly-progress, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--hot-bright), rgba(255, 103, 68, 0));
  box-shadow: 0 0 12px rgba(255, 103, 68, 0.34);
  content: "";
  opacity: 0.72;
  pointer-events: none;
}

.hero-machine.is-assembled::after {
  background: linear-gradient(90deg, var(--phosphor), rgba(169, 198, 114, 0));
  box-shadow: 0 0 14px rgba(169, 198, 114, 0.42);
}

.motion-field {
  position: absolute;
  inset: 3% 2% 2% 7%;
  z-index: 0;
  width: 91%;
  height: 95%;
  opacity: var(--field-opacity, 0.62);
  mix-blend-mode: screen;
  transition: opacity 500ms ease-out;
}

.motion-orbits {
  position: absolute;
  top: 16%;
  right: 13%;
  z-index: 1;
  width: min(36vw, 520px);
  aspect-ratio: 1;
  transform: rotateX(67deg) rotateZ(-12deg);
  transform-style: preserve-3d;
  opacity: var(--orbit-opacity, 0.3);
}

.motion-orbits i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 103, 68, 0.5);
  border-radius: 50%;
}

.motion-orbits i:nth-child(2) {
  inset: 15%;
  border-color: rgba(169, 198, 114, 0.38);
}

.motion-orbits i:nth-child(3) {
  inset: 34%;
  border-style: dashed;
  border-color: rgba(232, 233, 223, 0.35);
}

.assembly-video {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  mix-blend-mode: screen;
  filter: contrast(1.08) saturate(0.9);
  pointer-events: none;
  will-change: opacity;
  transition: opacity 380ms ease-out;
}

.hero-machine.has-assembly-video .assembly-video {
  opacity: 0.96;
}

.hero-machine.has-assembly-video .machine-assembly {
  opacity: 0;
}

.machine-assembly {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform: perspective(1300px)
    translate3d(var(--assembly-x, 0px), var(--assembly-y, 0px), 0)
    rotateX(var(--assembly-rx, -1deg))
    rotateY(var(--assembly-ry, 0deg))
    scale3d(var(--assembly-scale-x, 1), var(--assembly-scale-y, 1), 1);
  transform-origin: 62% 48%;
  transform-style: preserve-3d;
  opacity: 1;
  will-change: transform;
  transition: opacity 380ms ease-out;
}

.hero-machine .machine-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: contrast(1.08) saturate(0.86);
  will-change: transform, opacity;
}

.machine-image-base {
  z-index: 1;
  opacity: var(--base-opacity, 0.88);
  outline: 1px solid rgba(255, 255, 255, 0.1);
  outline-offset: -1px;
  transform: translate3d(0, 0, -10px);
}

.motion-layer {
  z-index: 2;
  opacity: var(--layer-opacity, 0.18);
  mix-blend-mode: screen;
  filter: contrast(1.2) saturate(1.06) brightness(1.08) !important;
}

.slice-housing {
  clip-path: polygon(47% 0, 100% 0, 100% 45%, 58% 45%, 44% 25%);
  transform: translate3d(var(--housing-x, 0px), var(--housing-y, 0px), var(--housing-z, 25px));
}

.slice-board {
  clip-path: polygon(37% 20%, 92% 16%, 94% 67%, 34% 70%);
  transform: translate3d(var(--board-x, 0px), var(--board-y, 0px), var(--board-z, 55px));
}

.slice-base {
  clip-path: polygon(35% 42%, 96% 35%, 96% 92%, 39% 95%);
  transform: translate3d(var(--base-x, 0px), var(--base-y, 0px), var(--base-z, -20px));
}

.slice-connectors {
  clip-path: polygon(31% 55%, 64% 52%, 64% 100%, 26% 100%);
  transform: translate3d(var(--connector-x, 0px), var(--connector-y, 0px), var(--connector-z, 75px));
}

.motion-toggle {
  position: absolute;
  right: calc(var(--pad) + 6px);
  bottom: 137px;
  z-index: 6;
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 10px 0 12px;
  border: 0;
  box-shadow: var(--surface-ring);
  background: rgba(8, 10, 9, 0.78);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.06em;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: box-shadow 180ms ease-out, color 180ms ease-out, background-color 180ms ease-out, scale 160ms ease-out;
}

.motion-toggle:hover {
  box-shadow: var(--surface-ring-hover), inset 2px 0 0 var(--hot-bright);
  color: var(--text);
}

.motion-toggle i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--phosphor);
  box-shadow: 0 0 9px rgba(169, 198, 114, 0.7);
}

.motion-toggle b {
  color: var(--phosphor);
  font-weight: 400;
}

.motion-toggle[aria-pressed="true"] i {
  background: var(--dim);
  box-shadow: none;
}

.motion-toggle[aria-pressed="true"] b {
  color: var(--dim);
}

.hero.motion-paused .motion-field,
.hero.motion-paused .motion-orbits {
  opacity: 0;
}

.hero-machine figcaption {
  position: absolute;
  top: 8%;
  right: 12%;
  z-index: 9;
  display: grid;
  justify-items: end;
  gap: 5px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.08em;
}

.hero-machine figcaption span:first-child {
  color: var(--hot-bright);
}

.hero-machine figcaption .assembly-status {
  min-width: 88px;
  margin-top: 5px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 103, 68, 0.42);
  color: var(--hot-bright);
  font-variant-numeric: tabular-nums;
}

.hero-machine figcaption .assembly-status.is-locked {
  border-top-color: rgba(169, 198, 114, 0.52);
  color: var(--phosphor);
}

.machine-target {
  position: absolute;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b7bcb5;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.08em;
}

.machine-target i {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1px solid var(--hot-bright);
  border-radius: 50%;
}

.machine-target i::before,
.machine-target i::after {
  position: absolute;
  background: var(--hot-bright);
  content: "";
}

.machine-target i::before { top: 8px; left: -5px; width: 26px; height: 1px; }
.machine-target i::after { top: -5px; left: 8px; width: 1px; height: 26px; }
.target-a { top: 22%; right: 22%; }
.target-b { top: 47%; right: 40%; }
.target-c { right: 47%; bottom: 19%; }

.hero-sidecode {
  position: absolute;
  top: 16%;
  right: 22px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
}

.hero-sidecode i {
  width: 1px;
  height: 86px;
  background: linear-gradient(to bottom, var(--hot), transparent);
}

.hero-readout {
  z-index: 4;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr) 0.65fr;
  align-self: end;
  border-top: 1px solid var(--line-hard);
  background: rgba(8, 10, 9, 0.72);
  backdrop-filter: blur(10px);
}

.hero-readout > div {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-content: center;
  min-height: 104px;
  padding: 18px 22px;
  border-right: 1px solid var(--line);
}

.hero-readout > div::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 30px;
  height: 1px;
  background: var(--hot);
  content: "";
}

.hero-readout span {
  grid-row: 1 / span 2;
  color: var(--hot-bright);
  font-family: var(--mono);
  font-size: 8px;
}

.hero-readout strong,
.hero-readout small {
  display: block;
}

.hero-readout strong {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
}

.hero-readout small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.hero-readout .readout-signal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-right: 0;
}

.readout-signal i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--phosphor);
  box-shadow: 0 0 16px rgba(169, 198, 114, 0.7);
}

.readout-signal span {
  grid-row: auto;
  color: var(--phosphor);
}

.signal-strip {
  max-width: var(--max);
  margin: 0 auto;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--hot);
  color: #fff;
}

.signal-strip > div {
  display: flex;
  align-items: center;
  width: max-content;
  min-height: 34px;
  animation: ticker 28s linear infinite;
}

.signal-strip span {
  padding: 0 22px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.09em;
}

.signal-strip i {
  width: 4px;
  height: 4px;
  transform: rotate(45deg);
  background: rgba(255, 255, 255, 0.7);
}

@keyframes ticker {
  to { transform: translateX(-50%); }
}

.thesis,
.lifecycle,
.workspace,
.process,
.modes,
.concepts,
.doctrine,
.pilot,
.contact,
.site-footer {
  max-width: var(--max);
  margin: 0 auto;
}

.thesis {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  padding: var(--space) var(--pad);
  background:
    linear-gradient(90deg, transparent 0 49.94%, var(--line) 50%, transparent 50.06%),
    var(--black-soft);
}

.thesis .section-code {
  grid-column: 1 / span 2;
}

.thesis h2 {
  grid-column: 3 / -1;
  font-size: clamp(62px, 8.6vw, 130px);
}

.thesis h2 span {
  color: var(--dim);
}

.thesis-lead {
  grid-column: 3 / span 6;
  margin: 44px 0 0;
  color: #c2c6bf;
  font-size: clamp(24px, 2.7vw, 40px);
  line-height: 1.12;
}

.thesis-register {
  grid-column: 9 / -1;
  margin-top: 44px;
  border-top: 1px solid var(--line-hard);
}

.thesis-register > div {
  display: grid;
  grid-template-columns: 38px 1fr;
  min-height: 72px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.thesis-register span {
  color: var(--hot-bright);
  font-family: var(--mono);
  font-size: 9px;
}

.thesis-register p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.lifecycle {
  padding: var(--space) var(--pad);
  border-top: 1px solid var(--line);
  background:
    linear-gradient(rgba(218, 223, 211, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(218, 223, 211, 0.045) 1px, transparent 1px),
    #0a0c0a;
  background-size: 40px 40px;
}

.lifecycle-heading {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 24px;
  align-items: end;
}

.lifecycle-heading .section-code {
  margin-bottom: 40px;
}

.lifecycle h2 {
  font-size: clamp(62px, 7.6vw, 118px);
}

.lifecycle-heading > p {
  max-width: 470px;
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 17px;
}

.lifecycle-rail {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  margin: 72px 0 0;
  padding: 0;
  border-top: 1px solid var(--line-hard);
  border-bottom: 1px solid var(--line-hard);
  border-left: 1px solid var(--line-hard);
  list-style: none;
}

.lifecycle-rail li {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 186px;
  padding: 18px 15px 20px;
  border-right: 1px solid var(--line-hard);
  background: rgba(8, 10, 9, 0.64);
}

.lifecycle-rail li::before,
.lifecycle-rail li::after {
  position: absolute;
  bottom: -1px;
  height: 2px;
  content: "";
}

.lifecycle-rail li::before {
  right: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.025);
}

.lifecycle-rail li::after {
  left: 0;
  width: 32%;
  background: var(--hot);
}

.lifecycle-rail li:nth-child(5)::after,
.lifecycle-rail li:nth-child(6)::after,
.lifecycle-rail li:nth-child(7)::after {
  background: var(--amber);
}

.lifecycle-rail li:nth-child(8)::after {
  background: var(--phosphor);
}

.lifecycle-rail span {
  color: var(--hot-bright);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.07em;
}

.lifecycle-rail strong {
  margin-top: auto;
  font-size: clamp(18px, 1.55vw, 25px);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

.lifecycle-rail small {
  min-height: 44px;
  margin-top: 12px;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.3;
}

.change-trace {
  margin-top: 30px;
  border: 1px solid var(--line-hard);
  background: rgba(9, 11, 9, 0.94);
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.28);
}

.change-trace > header {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) minmax(260px, 0.7fr);
  align-items: center;
  min-height: 76px;
  border-bottom: 1px solid var(--line-hard);
}

.change-trace > header > * {
  display: flex;
  align-items: center;
  align-self: stretch;
  margin: 0;
  padding: 14px 18px;
  border-right: 1px solid var(--line);
}

.change-trace > header > :last-child {
  border-right: 0;
}

.change-trace > header span {
  color: var(--hot-bright);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.07em;
}

.change-trace > header strong {
  font-size: clamp(21px, 2vw, 31px);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

.change-trace > header small {
  color: var(--muted);
  font-size: 13px;
}

.trace-body {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
}

.trace-source {
  position: relative;
  padding: 24px 20px 28px;
  border-right: 1px solid var(--line-hard);
  background:
    linear-gradient(135deg, rgba(196, 59, 40, 0.15), transparent 55%),
    var(--black-soft);
}

.trace-source::before {
  position: absolute;
  top: 24px;
  bottom: 28px;
  left: 0;
  width: 2px;
  background: var(--hot-bright);
  content: "";
}

.trace-source span,
.trace-source b {
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0.07em;
}

.trace-source span {
  color: var(--hot-bright);
}

.trace-source strong {
  display: block;
  margin-top: 26px;
  font-size: 25px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

.trace-source p {
  margin: 17px 0 28px;
  color: var(--muted);
  font-size: 13px;
}

.trace-source b {
  display: block;
  padding: 9px 10px;
  border-left: 2px solid var(--amber);
  background: rgba(217, 151, 82, 0.08);
  color: var(--amber);
}

.trace-chain {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.trace-chain li {
  position: relative;
  min-height: 236px;
  padding: 22px 13px;
  border-right: 1px solid var(--line);
}

.trace-chain li:last-child {
  border-right: 0;
}

.trace-chain li::before {
  position: absolute;
  right: 13px;
  bottom: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dim);
  content: "";
}

.trace-chain li::after {
  position: absolute;
  right: -6px;
  top: 50%;
  z-index: 2;
  width: 11px;
  height: 11px;
  border-top: 1px solid var(--line-hard);
  border-right: 1px solid var(--line-hard);
  transform: rotate(45deg);
  background: #0b0d0b;
  content: "";
}

.trace-chain li:last-child::after {
  display: none;
}

.trace-chain .trace-ok::before {
  background: var(--phosphor);
  box-shadow: 0 0 10px rgba(169, 198, 114, 0.5);
}

.trace-chain .trace-warn::before {
  background: var(--amber);
}

.trace-chain .trace-change::before {
  background: var(--hot-bright);
}

.trace-chain span {
  color: var(--dim);
  font-family: var(--mono);
  font-size: 8px;
}

.trace-chain strong {
  display: block;
  margin-top: 62px;
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
}

.trace-chain small {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.change-trace > footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.2fr;
  min-height: 52px;
  border-top: 1px solid var(--line-hard);
}

.change-trace > footer span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border-right: 1px solid var(--line);
  color: var(--dim);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.change-trace > footer span:last-child {
  border-right: 0;
}

.change-trace > footer b {
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
}

.change-trace > footer .trace-ready {
  color: var(--phosphor);
}

.trace-ready i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--phosphor);
  box-shadow: 0 0 11px rgba(169, 198, 114, 0.65);
}

.workspace {
  padding: var(--space) var(--pad);
  background: #0a0c0a;
}

.workspace-heading {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 24px;
  align-items: end;
  margin-bottom: 66px;
}

.workspace-heading .section-code,
.concepts-heading .section-code,
.pilot-copy .section-code {
  margin-bottom: 40px;
}

.workspace-heading h2,
.concepts-heading h2,
.pilot h2 {
  font-size: clamp(62px, 7.6vw, 118px);
}

.workspace-heading > p,
.concepts-heading > p,
.pilot-copy > p:last-child {
  max-width: 450px;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 17px;
}

.os-shell {
  position: relative;
  overflow: hidden;
  border: 0;
  background: #0b0d0b;
  box-shadow: var(--surface-ring), 0 35px 100px rgba(0, 0, 0, 0.42);
}

.os-shell::before,
.os-shell::after {
  position: absolute;
  z-index: 5;
  width: 18px;
  height: 18px;
  border-color: var(--hot);
  border-style: solid;
  content: "";
  pointer-events: none;
}

.os-shell::before { top: 8px; left: 8px; border-width: 1px 0 0 1px; }
.os-shell::after { right: 8px; bottom: 8px; border-width: 0 1px 1px 0; }

.os-topbar {
  display: grid;
  grid-template-columns: 210px 1fr auto 72px;
  min-height: 48px;
  border-bottom: 1px solid var(--line-hard);
  background: #151915;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.06em;
}

.os-topbar > div {
  display: flex;
  align-items: center;
  padding: 0 15px;
  border-right: 1px solid var(--line);
}

.os-wordmark {
  color: #fff;
}

.os-wordmark i {
  width: 8px;
  height: 18px;
  margin-right: 10px;
  transform: skew(-12deg);
  background: var(--hot);
}

.os-project {
  color: var(--muted);
}

.os-clock {
  gap: 12px;
  color: var(--dim);
}

.os-clock b {
  color: var(--text);
  font-weight: 400;
}

.os-online {
  justify-content: center;
  gap: 7px;
  color: var(--phosphor);
}

.os-body {
  display: grid;
  grid-template-columns: 88px 1fr;
  min-height: 680px;
}

.os-rail {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line-hard);
  background: #101310;
}

.rail-mark {
  position: relative;
  display: grid;
  place-items: center;
  height: 82px;
  border-bottom: 1px solid var(--line);
}

.rail-mark span {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-hard);
  border-radius: 50%;
}

.rail-mark i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hot);
}

.os-rail nav {
  display: grid;
}

.work-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  min-height: 108px;
  padding: 8px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  transition: background-color 180ms ease-out, color 180ms ease-out, scale 160ms ease-out;
}

.work-tab::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: transparent;
  content: "";
}

.work-tab span {
  font-family: var(--mono);
  font-size: 8px;
}

.work-tab b {
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.work-tab:hover {
  background: #181c18;
  color: var(--text);
}

.work-tab.active {
  background: #1a1e1a;
  color: var(--text);
}

.work-tab.active::before {
  background: var(--hot-bright);
}

.work-tab.active span {
  color: var(--hot-bright);
}

.rail-bottom {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 70px;
  margin-top: auto;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-family: var(--mono);
  font-size: 7px;
}

.work-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  min-width: 0;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}

.work-panel.is-changing {
  opacity: 0.55;
  transform: translateY(4px);
}

.work-canvas {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #030504;
}

.work-canvas::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(193, 208, 193, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(193, 208, 193, 0.18) 1px, transparent 1px);
  background-size: 36px 36px;
  content: "";
  pointer-events: none;
}

.work-canvas > img {
  width: 100%;
  height: 100%;
  min-height: 680px;
  object-fit: cover;
  object-position: center;
  outline: 1px solid rgba(255, 255, 255, 0.1);
  outline-offset: -1px;
  filter: brightness(0.72) contrast(1.13) saturate(0.82);
  transition: opacity 240ms ease-out, filter 240ms ease-out, transform 500ms ease-out;
}

.work-panel[data-mode="change"] .work-canvas > img {
  filter: brightness(0.62) contrast(1.2) saturate(1.12);
  transform: scale(1.025);
}

.work-panel[data-mode="release"] .work-canvas > img {
  filter: brightness(0.48) grayscale(0.7) contrast(1.18);
}

.canvas-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(3, 5, 4, 0.68), transparent 25%, transparent 68%, rgba(3, 5, 4, 0.9));
  pointer-events: none;
}

.canvas-ruler {
  position: absolute;
  z-index: 4;
  opacity: 0.4;
}

.ruler-top {
  top: 0;
  right: 0;
  left: 0;
  height: 18px;
  background: repeating-linear-gradient(90deg, var(--steel) 0 1px, transparent 1px 18px);
  mask-image: linear-gradient(to bottom, #000, transparent);
}

.ruler-left {
  top: 0;
  bottom: 0;
  left: 0;
  width: 18px;
  background: repeating-linear-gradient(var(--steel) 0 1px, transparent 1px 18px);
  mask-image: linear-gradient(90deg, #000, transparent);
}

.canvas-title {
  position: absolute;
  top: 34px;
  left: 34px;
  z-index: 4;
  max-width: 440px;
}

.canvas-title span,
.canvas-scale,
.canvas-coordinates,
.canvas-target b {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.07em;
}

.canvas-title span {
  color: var(--hot-bright);
}

.canvas-title strong {
  display: block;
  margin-top: 9px;
  font-size: clamp(24px, 2.5vw, 38px);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

.canvas-target {
  position: absolute;
  top: 46%;
  left: 66%;
  z-index: 4;
  width: 150px;
  height: 100px;
  border: 1px solid var(--hot-bright);
  box-shadow: 0 0 30px rgba(226, 76, 50, 0.12);
  transition: top 260ms ease-out, left 260ms ease-out, width 260ms ease-out, height 260ms ease-out;
}

.canvas-target::before,
.canvas-target::after {
  position: absolute;
  background: var(--hot-bright);
  content: "";
}

.canvas-target::before { top: 50%; left: -40px; width: calc(100% + 80px); height: 1px; opacity: 0.7; }
.canvas-target::after { top: -40px; left: 50%; width: 1px; height: calc(100% + 80px); opacity: 0.7; }

.canvas-target > span,
.canvas-target > i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: #fff;
  border-style: solid;
}

.canvas-target > span { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.canvas-target > i { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }

.canvas-target b {
  position: absolute;
  right: -1px;
  bottom: -26px;
  width: max-content;
  padding: 5px 7px;
  background: var(--hot);
  color: #fff;
  font-weight: 400;
}

.work-panel[data-mode="change"] .canvas-target { top: 33%; left: 55%; width: 220px; height: 180px; }
.work-panel[data-mode="release"] .canvas-target { top: 24%; left: 20%; width: 60%; height: 55%; border-color: var(--phosphor); }
.work-panel[data-mode="release"] .canvas-target::before,
.work-panel[data-mode="release"] .canvas-target::after { background: var(--phosphor); }

.canvas-scale {
  position: absolute;
  bottom: 28px;
  left: 34px;
  z-index: 4;
  display: flex;
  align-items: center;
  color: var(--muted);
}

.canvas-scale i {
  width: 74px;
  height: 5px;
  margin: 0 7px;
  border-top: 1px solid var(--steel);
  background: repeating-linear-gradient(90deg, var(--steel) 0 1px, transparent 1px 10px);
}

.canvas-coordinates {
  position: absolute;
  right: 22px;
  bottom: 24px;
  z-index: 4;
  color: var(--muted);
  line-height: 1.7;
  text-align: right;
}

.work-inspector {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid var(--line-hard);
  background: #121512;
}

.inspector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.06em;
}

.inspector-head i {
  width: 8px;
  height: 8px;
  border: 1px solid var(--steel);
  border-radius: 50%;
}

.inspector-status {
  padding: 24px 20px;
  border-bottom: 1px solid var(--line);
}

.inspector-status > span {
  display: inline-flex;
  padding: 4px 6px;
  border: 1px solid rgba(255, 103, 68, 0.5);
  color: var(--hot-bright);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.06em;
}

.inspector-status strong {
  display: block;
  margin-top: 20px;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.05;
  text-transform: uppercase;
}

.inspector-status p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.inspector-data {
  margin: 0;
  padding: 0 20px;
}

.inspector-data > div {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}

.inspector-data dt {
  color: var(--dim);
}

.inspector-data dd {
  margin: 0;
  color: #c9cdc6;
  text-align: right;
}

.inspector-evidence {
  display: grid;
  margin-top: auto;
  padding: 16px 20px 20px;
}

.inspector-evidence > div {
  display: grid;
  grid-template-columns: 28px 1fr 8px;
  align-items: center;
  min-height: 38px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 7px;
}

.inspector-evidence span {
  color: var(--dim);
}

.inspector-evidence b {
  font-weight: 400;
}

.inspector-evidence i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.inspector-evidence i.ok { background: var(--phosphor); }
.inspector-evidence i.warn { background: var(--hot-bright); }

.os-command {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  min-height: 64px;
  border-top: 1px solid var(--line-hard);
  background: #171a17;
}

.os-command > span,
.os-command p,
.os-command button {
  display: flex;
  align-items: center;
}

.os-command > span {
  padding: 0 16px;
  border-right: 1px solid var(--line);
  color: var(--dim);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.05em;
}

.os-command p {
  margin: 0;
  padding: 0 18px;
  font-size: 13px;
}

.os-command button {
  justify-content: space-between;
  gap: 24px;
  min-width: 142px;
  margin: 8px;
  padding: 0 13px;
  border: 0;
  background: var(--hot);
  box-shadow: inset 3px 0 0 var(--hot-bright), 0 0 0 1px rgba(255, 103, 68, 0.54);
  color: #fff;
  font-family: var(--mono);
  font-size: 8px;
  cursor: pointer;
  transition: background-color 180ms ease-out, box-shadow 180ms ease-out, color 180ms ease-out, scale 160ms ease-out;
}

.os-command button:hover {
  background: var(--hot-bright);
  box-shadow: inset 3px 0 0 rgba(8, 10, 9, 0.52), 0 0 0 1px rgba(255, 103, 68, 0.8);
  color: var(--black);
}

.os-command svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.os-statusbar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: 32px;
  border-top: 1px solid var(--line-hard);
  color: var(--dim);
  font-family: var(--mono);
  font-size: 7px;
}

.os-statusbar span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-right: 1px solid var(--line);
}

.os-statusbar span:last-child {
  border-right: 0;
}

.process {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(48px, 8vw, 130px);
  padding: var(--space) var(--pad);
  border-top: 1px solid var(--line);
  background:
    linear-gradient(rgba(218, 223, 211, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(218, 223, 211, 0.05) 1px, transparent 1px),
    var(--black-soft);
  background-size: 40px 40px;
}

.process-sticky {
  position: sticky;
  top: 116px;
  align-self: start;
}

.process h2 {
  margin-top: 40px;
  font-size: clamp(60px, 6.5vw, 98px);
}

.process-dial {
  position: relative;
  width: 190px;
  height: 190px;
  margin-top: 70px;
  border: 1px solid var(--line-hard);
  border-radius: 50%;
}

.process-dial::before,
.process-dial::after {
  position: absolute;
  background: var(--line-hard);
  content: "";
}

.process-dial::before { top: 50%; left: -20px; width: 230px; height: 1px; }
.process-dial::after { top: -20px; left: 50%; width: 1px; height: 230px; }
.process-dial span { position: absolute; inset: 27px; border: 1px solid var(--hot); border-radius: 50%; }
.process-dial i { position: absolute; top: 91px; left: 91px; width: 8px; height: 8px; border-radius: 50%; background: var(--hot-bright); }
.process-dial b { position: absolute; right: 22px; bottom: 23px; color: var(--hot-bright); font-family: var(--mono); font-size: 12px; font-weight: 400; }

.process-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-hard);
  list-style: none;
}

.process-list li {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr 76px;
  gap: 18px;
  min-height: 220px;
  padding: 34px 0;
  border-bottom: 1px solid var(--line-hard);
}

.process-list li::before {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--hot);
  content: "";
  transition: width 450ms ease-out;
}

.process-list li:hover::before {
  width: 100%;
}

.process-list > li > span {
  padding-top: 3px;
  color: var(--hot-bright);
  font-family: var(--mono);
  font-size: 11px;
}

.process-list small {
  color: var(--dim);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.08em;
}

.process-list h3 {
  margin: 18px 0 10px;
  font-size: clamp(28px, 2.8vw, 42px);
  font-weight: 500;
  line-height: 0.95;
  text-transform: uppercase;
}

.process-list p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.process-list > li > b {
  align-self: start;
  justify-self: end;
  padding: 5px 7px;
  border: 1px solid var(--line);
  color: var(--dim);
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.modes {
  padding: var(--space) var(--pad);
  border-top: 1px solid var(--line-hard);
  border-bottom: 1px solid var(--line-hard);
  background:
    linear-gradient(rgba(218, 223, 211, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(218, 223, 211, 0.045) 1px, transparent 1px),
    #0a0d0b;
  background-size: 48px 48px;
}

.modes-head {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(48px, 8vw, 130px);
  align-items: end;
}

.modes h2 {
  margin-top: 40px;
  font-size: clamp(58px, 6.6vw, 100px);
}

.modes-standard {
  display: grid;
  grid-template-columns: 150px 1fr;
  min-height: 284px;
  border: 1px solid var(--line-hard);
  background: rgba(13, 16, 13, 0.92);
  box-shadow: 18px 18px 0 rgba(0, 0, 0, 0.18);
}

.standard-mark {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px 18px;
  overflow: hidden;
  border-right: 1px solid var(--line-hard);
  color: var(--hot-bright);
  font-family: var(--mono);
}

.standard-mark::after {
  position: absolute;
  right: -42px;
  bottom: -42px;
  width: 118px;
  height: 118px;
  border: 1px solid var(--hot);
  border-radius: 50%;
  content: "";
}

.standard-mark span { font-size: 24px; letter-spacing: 0.08em; }
.standard-mark b { color: var(--muted); font-size: 9px; font-weight: 400; letter-spacing: 0.12em; }
.standard-mark i { width: 36px; height: 1px; background: var(--hot); }

.modes-standard > div:last-child { padding: 24px clamp(24px, 3vw, 42px) 30px; }
.modes-standard small { color: var(--dim); font-family: var(--mono); font-size: 8px; letter-spacing: 0.08em; }
.modes-standard strong { display: block; margin-top: 32px; font-size: clamp(26px, 2.5vw, 38px); font-weight: 500; line-height: 0.98; text-transform: uppercase; }
.modes-standard p { max-width: 610px; margin: 25px 0 0; color: var(--muted); font-size: 14px; }

.modes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(70px, 8vw, 120px);
  border-top: 1px solid var(--line-hard);
  border-bottom: 1px solid var(--line-hard);
}

.mode-card {
  position: relative;
  min-width: 0;
  padding: 0 clamp(24px, 3.5vw, 58px) 48px;
  background: rgba(9, 11, 9, 0.82);
}

.mode-card + .mode-card { border-left: 1px solid var(--line-hard); }
.mode-card::before { position: absolute; top: -1px; left: 0; width: 28%; height: 2px; background: var(--hot); content: ""; }
.mode-new::before { background: var(--phosphor); }

.mode-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.mode-card header b { padding: 5px 8px; border: 1px solid var(--line-hard); color: var(--hot-bright); font-size: 8px; font-weight: 400; }
.mode-new header b { color: var(--phosphor); }
.mode-copy { min-height: 420px; padding: 54px 0 45px; }
.mode-copy > small { color: var(--dim); font-family: var(--mono); font-size: 8px; letter-spacing: 0.08em; }
.mode-copy h3 { margin: 42px 0 25px; font-size: clamp(46px, 5vw, 76px); font-weight: 500; letter-spacing: -0.05em; line-height: 0.86; text-transform: uppercase; }
.mode-copy p { max-width: 570px; margin: 0; color: var(--muted); font-size: 15px; }

.mode-steps {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-hard);
  list-style: none;
}

.mode-steps li {
  display: grid;
  grid-template-columns: 42px minmax(0, 0.9fr) minmax(150px, 1.1fr);
  gap: 14px;
  align-items: center;
  min-height: 76px;
  border-bottom: 1px solid var(--line);
}

.mode-steps span { color: var(--hot-bright); font-family: var(--mono); font-size: 9px; }
.mode-new .mode-steps span { color: var(--phosphor); }
.mode-steps strong { font-size: 14px; font-weight: 500; text-transform: uppercase; }
.mode-steps small { color: var(--dim); font-size: 12px; }

.modes-result {
  display: grid;
  grid-template-columns: 160px minmax(260px, 1.1fr) minmax(260px, 1fr) auto;
  gap: 28px;
  align-items: center;
  min-height: 112px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line-hard);
  background: var(--hot-dark);
  color: #fff;
}

.modes-result > span,
.modes-result > b { font-family: var(--mono); font-size: 8px; font-weight: 400; letter-spacing: 0.08em; }
.modes-result > strong { font-size: clamp(22px, 2vw, 30px); font-weight: 500; line-height: 1; text-transform: uppercase; }
.modes-result > p { margin: 0; color: rgba(255, 255, 255, 0.72); font-size: 13px; }
.modes-result > b { justify-self: end; padding: 7px 9px; border: 1px solid rgba(255, 255, 255, 0.45); }

.concepts {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 30px;
  padding: var(--space) var(--pad);
  background: #090b09;
}

.concepts-heading {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 24px;
  align-items: end;
  margin-bottom: 50px;
}

.concepts-heading > p {
  grid-column: 2;
}

.concept {
  min-width: 0;
}

.concept header {
  display: grid;
  grid-template-columns: 110px 1fr;
  padding: 18px 0;
  border-top: 1px solid var(--line-hard);
}

.concept header > span {
  color: var(--hot-bright);
  font-family: var(--mono);
  font-size: 8px;
}

.concept header h3 {
  margin: 0;
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 500;
  line-height: 0.95;
  text-transform: uppercase;
}

.concept header p {
  grid-column: 2;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.concept-scan {
  grid-column: 1 / span 8;
}

.concept-impact {
  grid-column: 9 / -1;
}

.concept-release {
  grid-column: 3 / span 8;
  margin-top: 70px;
}

.scan-compare {
  position: relative;
  aspect-ratio: 1.5;
  overflow: hidden;
  border: 0;
  background: #020302;
  box-shadow: var(--surface-ring);
  transition: box-shadow 180ms ease-out;
}

.scan-compare:hover {
  box-shadow: var(--surface-ring-hover);
}

.scan-compare:has(input:focus-visible) {
  box-shadow: 0 0 0 2px var(--hot-bright);
}

.scan-compare > img,
.scan-color img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  outline: 1px solid rgba(255, 255, 255, 0.1);
  outline-offset: -1px;
}

.scan-compare > img {
  filter: grayscale(1) brightness(0.48) contrast(1.35);
}

.scan-color {
  position: absolute;
  inset: 0;
  width: 100%;
  overflow: hidden;
  clip-path: inset(0 38% 0 0);
}

.scan-color img {
  width: 100%;
  filter: saturate(1.2) brightness(0.86) contrast(1.1);
}

.scan-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 62%;
  width: 1px;
  background: var(--hot-bright);
  pointer-events: none;
}

.scan-divider i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--hot-bright);
  border-radius: 50%;
  background: var(--black);
}

.scan-divider i::before,
.scan-divider i::after {
  position: absolute;
  top: 16px;
  width: 7px;
  height: 1px;
  background: var(--hot-bright);
  content: "";
}

.scan-divider i::before { left: 7px; }
.scan-divider i::after { right: 7px; }

.scan-divider span {
  position: absolute;
  top: 14px;
  left: 9px;
  padding: 4px 6px;
  background: var(--hot);
  color: #fff;
  font-family: var(--mono);
  font-size: 7px;
}

.scan-overlay {
  position: absolute;
  right: 14px;
  bottom: 12px;
  left: 14px;
  display: flex;
  justify-content: space-between;
  color: #c9cec7;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.08em;
  pointer-events: none;
}

.scan-overlay b {
  color: var(--phosphor);
  font-weight: 400;
}

.scan-compare input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.impact-map {
  position: relative;
  aspect-ratio: 0.88;
  border: 0;
  background:
    linear-gradient(rgba(218, 223, 211, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(218, 223, 211, 0.06) 1px, transparent 1px),
    #0d100d;
  background-size: 28px 28px;
  box-shadow: var(--surface-ring);
}

.impact-map svg {
  width: 100%;
  height: 100%;
}

.impact-lines path {
  fill: none;
  stroke: #5a625c;
  stroke-width: 1;
}

.impact-node circle {
  fill: #111511;
  stroke: #777f77;
  stroke-width: 1;
}

.impact-node text {
  fill: #c6cbc4;
  font-family: var(--mono);
  font-size: 12px;
  text-anchor: middle;
}

.impact-node.compact text {
  font-size: 10px;
}

.impact-node.center circle {
  fill: var(--hot-dark);
  stroke: var(--hot-bright);
}

.impact-node.center text {
  fill: #fff;
}

.impact-caption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  min-height: 42px;
  border: 1px solid var(--line-hard);
  background: rgba(8, 10, 9, 0.88);
  font-family: var(--mono);
  font-size: 7px;
}

.impact-caption > * {
  display: flex;
  align-items: center;
  padding: 0 9px;
  border-right: 1px solid var(--line);
  font-weight: 400;
  font-style: normal;
}

.impact-caption span { color: var(--hot-bright); }
.impact-caption i { border-right: 0; color: var(--phosphor); }

.release-sheet {
  border: 0;
  background: #111411;
  box-shadow: var(--surface-ring);
}

.release-head {
  display: grid;
  grid-template-columns: 1fr 0.45fr 0.7fr;
  min-height: 82px;
  border-bottom: 1px solid var(--line-hard);
}

.release-head > div {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 12px 18px;
  border-right: 1px solid var(--line);
}

.release-head > div:last-child { border-right: 0; }
.release-head span { color: var(--dim); font-family: var(--mono); font-size: 7px; }
.release-head strong { margin-top: 6px; font-family: var(--mono); font-size: 20px; font-weight: 400; }
.release-head strong.release-ok { color: var(--phosphor); font-size: 11px; }

.release-body {
  display: grid;
  grid-template-columns: 1fr 200px;
  min-height: 360px;
}

.release-body ol {
  margin: 0;
  padding: 16px 24px;
  list-style: none;
}

.release-body li {
  display: grid;
  grid-template-columns: 34px 1fr 8px;
  align-items: center;
  min-height: 72px;
  border-bottom: 1px solid var(--line);
}

.release-body li > span { color: var(--hot-bright); font-family: var(--mono); font-size: 8px; }
.release-body li b { display: block; font-size: 15px; font-weight: 500; text-transform: uppercase; }
.release-body li small { display: block; margin-top: 3px; color: var(--dim); font-size: 10px; }
.release-body li > i { width: 7px; height: 7px; border-radius: 50%; background: var(--phosphor); box-shadow: 0 0 10px rgba(169, 198, 114, 0.4); }

.release-seal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  align-self: center;
  justify-self: center;
  width: 146px;
  height: 146px;
  border: 1px solid var(--hot-bright);
  border-radius: 50%;
  color: var(--hot-bright);
  font-family: var(--mono);
}

.release-seal::before {
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(255, 103, 68, 0.5);
  border-radius: 50%;
  content: "";
}

.release-seal span { font-size: 7px; letter-spacing: 0.12em; }
.release-seal b { font-size: 48px; font-weight: 400; line-height: 1; }
.release-seal i { font-size: 8px; font-style: normal; }

.release-signatures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 46px;
  border-top: 1px solid var(--line-hard);
  color: var(--dim);
  font-family: var(--mono);
  font-size: 7px;
}

.release-signatures span {
  display: flex;
  align-items: center;
  padding: 0 18px;
  border-right: 1px solid var(--line);
}

.doctrine {
  padding: var(--space) var(--pad);
  background: var(--hot-dark);
  color: #fff;
}

.doctrine-head {
  display: grid;
  grid-template-columns: 3fr 9fr;
  gap: 24px;
  margin-bottom: 86px;
}

.doctrine .section-code {
  color: #fff;
}

.doctrine h2 {
  font-size: clamp(60px, 7vw, 106px);
}

.doctrine-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.46);
  border-bottom: 1px solid rgba(255, 255, 255, 0.46);
}

.doctrine-list article {
  min-height: 430px;
  padding: 24px clamp(20px, 2.5vw, 38px) 32px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.32);
}

.doctrine-list article:not(:first-child) { padding-left: clamp(20px, 2.5vw, 38px); }
.doctrine-list article:last-child { border-right: 0; }
.doctrine-list article > span { font-family: var(--mono); font-size: 9px; }
.doctrine-list h3 { margin: 100px 0 24px; font-size: clamp(34px, 3.7vw, 56px); font-weight: 500; letter-spacing: -0.04em; line-height: 0.9; text-transform: uppercase; }
.doctrine-list p { max-width: 340px; margin: 0; color: rgba(255, 255, 255, 0.78); font-size: 14px; }

.pilot {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(46px, 7vw, 110px);
  padding: var(--space) var(--pad);
  background:
    radial-gradient(circle at 20% 50%, rgba(226, 76, 50, 0.12), transparent 35%),
    #090b09;
}

.pilot-copy > p:last-child {
  margin-top: 36px;
}

.pilot-board {
  align-self: center;
  border: 0;
  background: #101310;
  box-shadow: var(--surface-ring), 0 26px 70px rgba(0, 0, 0, 0.22);
}

.board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line-hard);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.07em;
}

.board-head i {
  width: 30px;
  height: 1px;
  background: var(--hot);
}

.board-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.board-metrics > div {
  min-height: 250px;
  padding: 22px;
  border-right: 1px solid var(--line);
}

.board-metrics > div:last-child { border-right: 0; }
.board-metrics small { display: block; min-height: 30px; color: var(--dim); font-family: var(--mono); font-size: 7px; }
.board-metrics strong { display: block; margin-top: 38px; color: var(--hot-bright); font-family: var(--mono); font-size: clamp(46px, 5vw, 76px); font-weight: 400; letter-spacing: -0.08em; line-height: 1; }
.board-metrics sup { font-size: 0.34em; }
.board-metrics span { display: block; margin-top: 36px; color: var(--muted); font-size: 11px; }

.board-profile {
  display: grid;
  grid-template-columns: 130px 1fr;
  min-height: 90px;
  border-top: 1px solid var(--line-hard);
}

.board-profile span {
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-right: 1px solid var(--line);
  color: var(--hot-bright);
  font-family: var(--mono);
  font-size: 8px;
}

.board-profile p {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 16px 20px;
  color: #c2c7c0;
  font-size: 13px;
}

.contact {
  position: relative;
  display: grid;
  grid-template-columns: 6fr 1fr 5fr;
  gap: 24px;
  padding: var(--space) var(--pad);
  overflow: hidden;
  border-top: 1px solid var(--line);
  background:
    linear-gradient(rgba(218, 223, 211, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(218, 223, 211, 0.05) 1px, transparent 1px),
    #0d100d;
  background-size: 42px 42px;
}

.contact-reticle {
  position: absolute;
  top: 50%;
  left: 55%;
  width: 340px;
  height: 340px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--line);
  border-radius: 50%;
  opacity: 0.55;
}

.contact-reticle::before,
.contact-reticle::after {
  position: absolute;
  background: var(--line-hard);
  content: "";
}

.contact-reticle::before { top: 50%; left: -60px; width: 460px; height: 1px; }
.contact-reticle::after { top: -60px; left: 50%; width: 1px; height: 460px; }
.contact-reticle span { position: absolute; inset: 62px; border: 1px solid var(--hot); border-radius: 50%; }
.contact-reticle i { position: absolute; inset: 120px; border: 1px solid var(--line-hard); border-radius: 50%; }
.contact-reticle b { position: absolute; top: 166px; left: 166px; width: 8px; height: 8px; border-radius: 50%; background: var(--hot-bright); }

.contact-copy {
  position: relative;
  z-index: 2;
  grid-column: 1;
}

.contact h2 {
  margin-top: 44px;
  font-size: clamp(76px, 9.5vw, 146px);
}

.contact-copy > p:not(.section-code) {
  max-width: 480px;
  margin: 34px 0;
  color: var(--muted);
  font-size: 18px;
}

.contact-input {
  position: relative;
  z-index: 2;
  grid-column: 3;
  align-self: center;
  border: 0;
  background: rgba(13, 16, 13, 0.92);
  box-shadow: var(--surface-ring), 0 24px 70px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(12px);
}

.input-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line-hard);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.06em;
}

.input-head b {
  color: var(--hot-bright);
  font-weight: 400;
}

.contact-input ol {
  margin: 0;
  padding: 0 18px;
  list-style: none;
}

.contact-input li {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--line);
  color: #c1c6bf;
  font-size: 12px;
}

.contact-input li span {
  color: var(--hot-bright);
  font-family: var(--mono);
  font-size: 7px;
}

.contact-input button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: calc(100% - 36px);
  min-height: 46px;
  margin: 18px;
  border: 0;
  background: transparent;
  box-shadow: var(--surface-ring);
  color: var(--text);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-transform: uppercase;
  transition: background-color 180ms ease-out, box-shadow 180ms ease-out, color 180ms ease-out, scale 160ms ease-out;
}

.contact-input button:hover {
  background: var(--text);
  box-shadow: var(--surface-ring-hover);
  color: var(--black);
}

.copy-icon-stack {
  position: relative;
  width: 16px;
  height: 16px;
}

.contact-input button svg {
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: opacity 180ms cubic-bezier(0.2, 0, 0, 1), transform 180ms cubic-bezier(0.2, 0, 0, 1), filter 180ms cubic-bezier(0.2, 0, 0, 1);
}

.copy-icon-done {
  opacity: 0;
  filter: blur(4px);
  transform: scale(0.25);
}

#copy-checklist.is-copied .copy-icon-copy {
  opacity: 0;
  filter: blur(4px);
  transform: scale(0.25);
}

#copy-checklist.is-copied .copy-icon-done {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

#copy-status {
  min-height: 0;
  margin: -8px 18px 14px;
  color: var(--phosphor);
  font-family: var(--mono);
  font-size: 8px;
  text-align: center;
}

.site-footer {
  display: grid;
  grid-template-columns: 3fr 4fr 4fr 1fr;
  gap: 24px;
  align-items: start;
  min-height: 200px;
  padding: 48px var(--pad) 26px;
  border-top: 1px solid var(--line-hard);
  background: #050605;
}

.site-footer > p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.site-footer > div {
  display: flex;
  justify-content: space-between;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.06em;
}

.to-top {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  min-height: 40px;
  color: var(--hot-bright);
  font-family: var(--mono);
  font-size: 8px;
  text-decoration: none;
  transition: color 160ms ease-out, scale 160ms ease-out;
}

.to-top:hover {
  color: #fff;
}

.reveal-ready {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease-out, transform 700ms ease-out;
}

.reveal-ready.is-visible {
  opacity: 1;
  transform: translateY(0);
}

:is(
  .hero-copy,
  .hero-readout,
  .lifecycle-heading,
  .workspace-heading,
  .os-shell,
  .process-sticky,
  .concepts-heading,
  .doctrine-head,
  .pilot-copy,
  .contact-copy
).reveal-ready {
  opacity: 1;
  transform: none;
}

:is(
  .hero-copy,
  .hero-readout,
  .lifecycle-heading,
  .workspace-heading,
  .os-shell,
  .process-sticky,
  .concepts-heading,
  .doctrine-head,
  .pilot-copy,
  .contact-copy
).reveal-ready > * {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(14px);
  transition: opacity 520ms ease-out, filter 520ms ease-out, transform 520ms ease-out;
}

:is(
  .hero-copy,
  .hero-readout,
  .lifecycle-heading,
  .workspace-heading,
  .os-shell,
  .process-sticky,
  .concepts-heading,
  .doctrine-head,
  .pilot-copy,
  .contact-copy
).reveal-ready.is-visible > * {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

:is(
  .hero-copy,
  .hero-readout,
  .lifecycle-heading,
  .workspace-heading,
  .os-shell,
  .process-sticky,
  .concepts-heading,
  .doctrine-head,
  .pilot-copy,
  .contact-copy
).reveal-ready.is-visible > :nth-child(2) { transition-delay: 70ms; }

:is(
  .hero-copy,
  .hero-readout,
  .lifecycle-heading,
  .workspace-heading,
  .os-shell,
  .process-sticky,
  .concepts-heading,
  .doctrine-head,
  .pilot-copy,
  .contact-copy
).reveal-ready.is-visible > :nth-child(3) { transition-delay: 140ms; }

:is(
  .hero-copy,
  .hero-readout,
  .workspace-heading,
  .os-shell,
  .process-sticky,
  .concepts-heading,
  .doctrine-head,
  .pilot-copy,
  .contact-copy
).reveal-ready.is-visible > :nth-child(n + 4) { transition-delay: 210ms; }

@media (max-width: 1180px) {
  .hero { height: 290svh; }
  .hero-copy { grid-column: 1 / span 8; }
  .hero-machine { right: -18%; width: 92%; }
  .lifecycle-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lifecycle-rail li:nth-child(-n + 4) { border-bottom: 1px solid var(--line-hard); }
  .work-panel { grid-template-columns: minmax(0, 1fr) 280px; }
  .os-body { min-height: 640px; }
  .work-canvas > img { min-height: 640px; }
  .concept-scan { grid-column: 1 / span 7; }
  .concept-impact { grid-column: 8 / -1; }
  .concept-release { grid-column: 2 / span 10; }
}

@media (max-width: 960px) {
  .site-header { grid-template-columns: 1fr auto; min-height: 64px; }
  .header-state { display: none; }
  .menu-toggle {
    position: relative;
    z-index: 102;
    display: flex;
    flex: 0 0 94px;
    justify-self: end;
    opacity: 1;
    visibility: visible;
  }
  .site-nav {
    position: fixed;
    top: 64px;
    right: 0;
    left: 0;
    display: grid;
    align-content: start;
    gap: 0;
    height: calc(100svh - 64px);
    padding: 24px var(--pad);
    background: rgba(8, 10, 9, 0.98);
    clip-path: inset(0 0 0 100%);
    pointer-events: none;
    visibility: hidden;
    transition: clip-path 260ms ease-out, visibility 260ms;
  }

  .site-nav.is-open { clip-path: inset(0); pointer-events: auto; visibility: visible; }
  .site-nav a { display: flex; align-items: center; min-height: 74px; border-bottom: 1px solid var(--line); font-size: 18px; }
  .site-nav .header-cta { justify-content: space-between; min-height: 58px; margin-top: 26px; border-color: var(--hot); font-size: 11px; }

  .hero { height: 280svh; }
  .hero-pin { top: 64px; height: calc(100svh - 64px); padding-top: 90px; }
  .hero-copy { grid-column: 1 / span 10; align-self: start; padding-bottom: 0; }
  .hero-machine { top: 28%; right: -27%; bottom: 110px; width: 112%; opacity: 0.85; }
  .motion-field { inset: 0 3% 0 8%; }
  .motion-orbits { right: 18%; width: min(52vw, 480px); }
  .hero-pin::after { background: linear-gradient(180deg, var(--black) 0 28%, rgba(8,10,9,.36) 57%, var(--black) 89%); }
  .hero-readout { grid-template-columns: repeat(3, 1fr); }
  .hero-readout .readout-signal { display: none; }

  .thesis { grid-template-columns: repeat(8, 1fr); }
  .thesis .section-code { grid-column: 1 / span 2; }
  .thesis h2 { grid-column: 3 / -1; }
  .thesis-lead { grid-column: 3 / -1; }
  .thesis-register { grid-column: 3 / -1; }

  .lifecycle-heading { grid-template-columns: 1fr; }
  .lifecycle-heading > p { max-width: 660px; margin-top: 22px; }
  .change-trace > header { grid-template-columns: 210px 1fr; }
  .change-trace > header small { grid-column: 1 / -1; border-top: 1px solid var(--line); border-right: 0; }
  .trace-body { display: block; }
  .trace-source { border-right: 0; border-bottom: 1px solid var(--line-hard); }
  .trace-chain { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trace-chain li:nth-child(-n + 4) { border-bottom: 1px solid var(--line); }
  .trace-chain li:nth-child(4)::after { display: none; }
  .change-trace > footer { grid-template-columns: repeat(2, 1fr); }
  .change-trace > footer span:nth-child(2) { border-right: 0; }
  .change-trace > footer span:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }

  .workspace-heading,
  .concepts-heading { grid-template-columns: 1fr; }
  .workspace-heading > p,
  .concepts-heading > p { grid-column: 1; margin-top: 22px; }
  .os-topbar { grid-template-columns: 180px 1fr 64px; }
  .os-clock { display: none !important; }
  .os-body { grid-template-columns: 72px 1fr; }
  .work-panel { grid-template-columns: 1fr; }
  .work-canvas > img { min-height: 600px; }
  .work-inspector { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-hard); border-left: 0; }
  .inspector-head { grid-column: 1 / -1; }
  .inspector-status { border-right: 1px solid var(--line); }
  .inspector-data { padding-top: 10px; }
  .inspector-evidence { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); margin-top: 0; border-top: 1px solid var(--line); }
  .inspector-evidence > div { border-right: 1px solid var(--line); }
  .os-command { grid-template-columns: 1fr auto; }
  .os-command > span { display: none; }

  .process { grid-template-columns: 1fr; }
  .process-sticky { position: static; display: grid; grid-template-columns: 1fr auto; }
  .process-sticky .section-code { grid-column: 1 / -1; }
  .process-dial { align-self: end; width: 130px; height: 130px; margin-top: 40px; }
  .process-dial::before { left: -14px; width: 158px; }
  .process-dial::after { top: -14px; height: 158px; }
  .process-dial i { top: 61px; left: 61px; }

  .modes-head { grid-template-columns: 1fr; }
  .modes-head > div:first-child { max-width: 760px; }
  .modes-standard { margin-top: 18px; }
  .modes-grid { grid-template-columns: 1fr; }
  .mode-card + .mode-card { border-top: 1px solid var(--line-hard); border-left: 0; }
  .mode-copy { min-height: 0; }
  .modes-result { grid-template-columns: 150px 1fr; }
  .modes-result > p { grid-column: 2; }
  .modes-result > b { grid-column: 2; justify-self: start; }

  .concept-scan,
  .concept-impact,
  .concept-release { grid-column: 1 / -1; margin-top: 44px; }
  .impact-map { aspect-ratio: 1.3; }

  .doctrine-head { grid-template-columns: 1fr; }
  .doctrine-list { grid-template-columns: 1fr; }
  .doctrine-list article,
  .doctrine-list article:not(:first-child) { min-height: 0; padding: 28px 0 34px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.32); }
  .doctrine-list article:last-child { border-bottom: 0; }
  .doctrine-list h3 { margin: 60px 0 18px; }

  .pilot { grid-template-columns: 1fr; }
  .pilot-copy { max-width: 760px; }

  .contact { grid-template-columns: 1fr; }
  .contact-copy,
  .contact-input { grid-column: 1; }
  .contact-input { margin-top: 48px; }
  .contact-reticle { left: 72%; opacity: .3; }

  .site-footer { grid-template-columns: 1fr 1fr; }
  .site-footer > div { grid-column: 1 / -1; grid-row: 2; margin-top: 44px; }
}

@media (max-width: 640px) {
  :root { --pad: 20px; --space: 92px; }
  html { scroll-padding-top: 66px; }

  .hero { display: block; height: 260svh; }
  .hero-pin { top: 64px; display: block; height: calc(100svh - 64px); padding: 0 20px; }
  .hero-copy { position: absolute; top: 54px; right: 20px; left: 20px; z-index: 4; }
  .eyebrow { align-items: flex-start; }
  .hero h1 { font-size: clamp(62px, 20vw, 88px); }
  .hero-lead { max-width: 430px; margin-top: 24px; font-size: 16px; }
  .hero-actions { align-items: stretch; flex-direction: column; margin-top: 24px; }
  .button { width: 100%; }
  .hero-machine { position: absolute; top: 34%; right: -24%; bottom: auto; width: 138%; height: 61%; margin: 0; }
  .hero-machine img { object-fit: cover; object-position: 62% center; }
  .assembly-video { object-fit: cover; object-position: 62% center; }
  .motion-field { inset: 0; width: 100%; height: 100%; opacity: 0.48; }
  .motion-orbits { top: 17%; right: -5%; width: 340px; }
  .motion-toggle { right: 20px; bottom: 82px; }
  .hero-machine figcaption { top: 30px; right: 20px; }
  .machine-target { display: none; }
  .hero-readout { position: absolute; right: 0; bottom: 0; left: 0; z-index: 5; grid-template-columns: repeat(3, 1fr); width: auto; margin: 0; }
  .hero-readout > div { min-height: 64px; padding: 10px 12px; border-right: 1px solid var(--line); border-bottom: 0; }
  .hero-readout strong { font-size: 12px; }
  .hero-readout small { display: none; }
  .hero-sidecode { display: none; }

  .thesis { display: block; background: var(--black-soft); }
  .thesis h2 { margin-top: 42px; font-size: clamp(50px, 16vw, 70px); line-height: .9; }
  .thesis-lead { margin-top: 38px; font-size: 25px; }
  .thesis-register { margin-top: 48px; }

  .lifecycle h2 { font-size: clamp(52px, 16vw, 70px); line-height: .88; }
  .lifecycle-heading > p { margin-top: 26px; }
  .lifecycle-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; }
  .lifecycle-rail li { min-height: 164px; }
  .lifecycle-rail li:nth-child(-n + 6) { border-bottom: 1px solid var(--line-hard); }
  .lifecycle-rail strong { font-size: 18px; }
  .change-trace { margin-right: -20px; margin-left: -20px; border-right: 0; border-left: 0; }
  .change-trace > header { grid-template-columns: 1fr; }
  .change-trace > header > * { border-right: 0; border-bottom: 1px solid var(--line); }
  .change-trace > header > :last-child { border-bottom: 0; }
  .change-trace > header strong { min-height: 72px; }
  .change-trace > header small { grid-column: auto; border-top: 0; }
  .trace-body { display: block; }
  .trace-source { border-right: 0; border-bottom: 1px solid var(--line-hard); }
  .trace-chain { grid-template-columns: 1fr; }
  .trace-chain li { min-height: 124px; border-right: 0; border-bottom: 1px solid var(--line); }
  .trace-chain li:last-child { border-bottom: 0; }
  .trace-chain li::after { display: none; }
  .trace-chain strong { margin-top: 28px; }
  .change-trace > footer { grid-template-columns: 1fr; }
  .change-trace > footer span { min-height: 42px; border-right: 0; border-bottom: 1px solid var(--line); }
  .change-trace > footer span:last-child { border-bottom: 0; }

  .workspace-heading h2,
  .concepts-heading h2,
  .pilot h2 { font-size: clamp(52px, 16vw, 70px); line-height: .88; }
  .os-shell { margin-right: -20px; margin-left: -20px; border-right: 0; border-left: 0; }
  .os-topbar { grid-template-columns: 1fr auto; }
  .os-project { display: none !important; }
  .os-body { display: block; }
  .os-rail { border-right: 0; border-bottom: 1px solid var(--line-hard); }
  .rail-mark,
  .rail-bottom { display: none; }
  .os-rail nav { grid-template-columns: repeat(3, 1fr); }
  .work-tab { min-height: 54px; border-right: 1px solid var(--line); border-bottom: 0; }
  .work-tab::before { top: auto; right: 0; bottom: 0; width: auto; height: 2px; }
  .work-tab b { writing-mode: horizontal-tb; }
  .work-panel { display: block; }
  .work-canvas > img { min-height: 520px; object-position: 46% center; }
  .canvas-title { top: 28px; left: 20px; right: 20px; }
  .canvas-title strong { font-size: 28px; }
  .canvas-target { top: 45%; left: 50%; width: 120px; height: 84px; }
  .work-panel[data-mode="change"] .canvas-target { top: 36%; left: 32%; width: 180px; height: 150px; }
  .work-panel[data-mode="release"] .canvas-target { top: 27%; left: 13%; width: 74%; height: 48%; }
  .canvas-scale { left: 20px; }
  .canvas-coordinates { display: none; }
  .work-inspector { display: block; }
  .inspector-status { border-right: 0; }
  .inspector-evidence { display: grid; grid-template-columns: 1fr; }
  .os-command { display: block; padding: 12px; }
  .os-command p { min-height: 48px; padding: 8px; }
  .os-command button { width: 100%; min-height: 44px; margin: 4px 0 0; }
  .os-statusbar { grid-template-columns: 1fr 1fr; }
  .os-statusbar span { min-height: 30px; border-bottom: 1px solid var(--line); }
  .os-statusbar span:nth-child(n+4) { display: none; }

  .process { display: block; }
  .process h2 { font-size: clamp(54px, 16vw, 72px); }
  .process-dial { display: none; }
  .process-list { margin-top: 60px; }
  .process-list li { grid-template-columns: 46px 1fr; min-height: 0; padding: 30px 0; }
  .process-list > li > b { display: none; }
  .process-list h3 { font-size: 30px; }

  .modes { padding-right: 20px; padding-left: 20px; }
  .modes h2 { font-size: clamp(52px, 15vw, 68px); }
  .modes-standard { grid-template-columns: 88px 1fr; margin-top: 46px; box-shadow: 10px 10px 0 rgba(0,0,0,.18); }
  .standard-mark { padding: 18px 12px; }
  .standard-mark span { font-size: 18px; }
  .modes-standard > div:last-child { padding: 20px 18px 24px; }
  .modes-standard strong { margin-top: 26px; font-size: 25px; }
  .modes-grid { margin-top: 70px; }
  .mode-card { margin-right: -20px; margin-left: -20px; padding: 0 20px 34px; }
  .mode-copy { padding: 42px 0 38px; }
  .mode-copy h3 { margin-top: 34px; font-size: clamp(46px, 14vw, 62px); }
  .mode-steps li { grid-template-columns: 34px 1fr; gap: 10px; padding: 16px 0; }
  .mode-steps small { grid-column: 2; }
  .modes-result { grid-template-columns: 1fr; margin-right: -20px; margin-left: -20px; padding: 26px 20px; }
  .modes-result > p,
  .modes-result > b { grid-column: 1; }

  .concepts { display: block; }
  .concepts-heading { display: block; }
  .concepts-heading > p { margin-top: 26px; }
  .concept { margin-top: 62px; }
  .concept header { grid-template-columns: 72px 1fr; }
  .scan-compare { aspect-ratio: .85; }
  .scan-compare > img,
  .scan-color img { object-position: 45% center; }
  .impact-map { aspect-ratio: .82; }
  .impact-map svg { transform: scale(1.08); }
  .release-head { grid-template-columns: 1fr .45fr; }
  .release-head > div:nth-child(3) { display: none; }
  .release-body { grid-template-columns: 1fr; }
  .release-body ol { padding: 10px 16px; }
  .release-seal { margin: 24px auto 34px; }
  .release-signatures { grid-template-columns: 1fr; }
  .release-signatures span { min-height: 38px; border-right: 0; border-bottom: 1px solid var(--line); }

  .doctrine-head { display: block; }
  .doctrine h2 { margin-top: 42px; font-size: clamp(50px, 15vw, 68px); }
  .doctrine-list { margin-top: 62px; }
  .doctrine-list h3 { margin-top: 50px; font-size: 41px; }

  .board-metrics { grid-template-columns: 1fr; }
  .board-metrics > div { min-height: 190px; border-right: 0; border-bottom: 1px solid var(--line); }
  .board-metrics strong { margin-top: 25px; font-size: 68px; }
  .board-metrics span { margin-top: 24px; }
  .board-profile { grid-template-columns: 1fr; }
  .board-profile span { min-height: 42px; border-right: 0; border-bottom: 1px solid var(--line); }

  .contact h2 { font-size: clamp(72px, 24vw, 102px); }
  .contact-copy > p:not(.section-code) { font-size: 16px; }
  .contact-input { margin-right: -20px; margin-left: -20px; border-right: 0; border-left: 0; }
  .contact-reticle { display: none; }

  .motion-toggle { min-height: 44px; }

  .site-footer { grid-template-columns: 1fr auto; }
  .site-footer > p { grid-column: 1 / -1; grid-row: 2; margin-top: 26px; }
  .site-footer > div { grid-row: 3; margin-top: 40px; }
  .site-footer > div span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal-ready {
    opacity: 1;
    transform: none;
  }

  .hero {
    height: auto;
  }

  .hero-pin {
    position: relative;
    top: auto;
    height: auto;
    min-height: min(930px, calc(100svh - 72px));
  }

  :is(
    .hero-copy,
    .hero-readout,
    .workspace-heading,
    .os-shell,
    .process-sticky,
    .concepts-heading,
    .doctrine-head,
    .pilot-copy,
    .contact-copy
  ).reveal-ready > * {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .motion-field,
  .motion-orbits,
  .assembly-video,
  .motion-layer,
  .assembly-status,
  .motion-toggle {
    display: none;
  }

  .hero-machine::after {
    display: none;
  }

  .machine-assembly {
    transform: none;
  }
}

@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  .hero-pin {
    min-height: calc(100svh - 64px);
  }
}