.brand img {
  transform: none;
}

.machine-stage.iso {
  --anatomy-paper: #10100f;
  --anatomy-face: #2b2b28;
  --anatomy-top: #3a3a35;
  --anatomy-shade-0: #1b1b19;
  --anatomy-shade-1: #222220;
  --anatomy-shade-2: #2b2b28;
  --anatomy-shade-3: #343430;
  --anatomy-lit-top: #304523;
  --anatomy-lit-shade: #203219;
  --anatomy-faint: #454540;
  --anatomy-lo: #7c7c73;
  --anatomy-mid: #b8b8ae;
  --anatomy-hi: #edede5;
  --anatomy-lit: var(--acid);
  --anatomy-dot: #eeeee8;
  --anatomy-halo: #000;
}

.mini-machine.iso {
  --anatomy-paper: var(--panel);
  --anatomy-face: #252522;
  --anatomy-top: #33332f;
  --anatomy-shade-0: #171716;
  --anatomy-shade-1: #1d1d1b;
  --anatomy-shade-2: #252522;
  --anatomy-shade-3: #2d2d29;
  --anatomy-faint: #41413c;
  --anatomy-lo: #74746c;
  --anatomy-mid: #aaa9a0;
  --anatomy-hi: #ecece4;
  --anatomy-lit: var(--acid);
}

.machine-stage svg {
  margin-bottom: -55px;
  transform: translateY(-55px);
}

.machine-stage[data-focus] [data-organ]:not(.is-active) {
  opacity: 0.9;
}

.machine-stage > svg > * {
  transition: opacity 420ms ease, filter 420ms ease;
}

.machine-stage.is-exploded > svg > :not([data-organ]):not(.task-track):not(.task-orb) {
  opacity: .2;
}

.machine-stage.is-exploded [data-organ] {
  filter: drop-shadow(0 10px 12px rgb(0 0 0 / .7));
}

.machine-card.is-separated {
  border-color: color-mix(in srgb, var(--acid) 42%, var(--line));
}

.machine-card.is-inspecting {
  animation: inspection-focus 1.35s var(--ease) both;
}

@keyframes inspection-focus {
  0%, 100% { box-shadow: inset 0 0 0 0 transparent; }
  35% { box-shadow: inset 0 0 0 1px var(--acid), 0 0 28px rgb(141 255 69 / .1); }
}

.figure-head em {
  display: inline-flex;
  margin-left: 10px;
  padding: 3px 6px 2px;
  border: 1px solid color-mix(in srgb, var(--acid) 44%, var(--line));
  color: var(--acid);
  font: 600 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
  vertical-align: 1px;
}

@media (max-width: 820px) {
  .machine-stage svg {
    margin-bottom: -28px;
    transform: translateY(-28px);
  }
}

.logo-head {
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
  isolation: isolate;
}

.logo-head > img,
.logo-piece img {
  position: absolute;
  z-index: 2;
  top: -110px;
  left: 50%;
  display: block;
  width: 860px;
  height: 860px;
  max-width: none;
  transform: translateX(-41.7%);
  user-select: none;
  pointer-events: none;
}

.logo-base {
  transition: opacity 650ms var(--ease), filter 650ms var(--ease), transform 650ms var(--ease);
}

.machine-stage .logo-core,
.machine-stage .logo-details {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: visible;
  transform: none;
}

.machine-stage .logo-details {
  z-index: 4;
  pointer-events: none;
}

.core-rings,
.core-gears,
.detail-lines {
  fill: none;
  stroke: #75756e;
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.32;
}

.core-gears {
  stroke: var(--acid);
  opacity: 0.24;
}

.detail-lines {
  stroke: #d8d8d0;
  opacity: 0.3;
}

.logo-hotspots circle {
  fill: var(--acid);
  filter: drop-shadow(0 0 7px var(--acid));
  opacity: 0.7;
}

.logo-piece {
  position: absolute;
  z-index: 3;
  inset: 0;
  opacity: 0.001;
  cursor: pointer;
  transform: translate(var(--piece-x, 0), var(--piece-y, 0));
  transition: opacity 280ms ease, filter 280ms ease;
  will-change: transform;
}

.brain-piece { clip-path: polygon(20% 6%, 67% 6%, 67% 34%, 21% 34%); }
.eyes-piece { clip-path: polygon(17% 27%, 52% 27%, 52% 62%, 17% 62%); }
.immune-piece { clip-path: polygon(48% 14%, 79% 14%, 79% 68%, 48% 68%); }
.hands-piece { clip-path: polygon(18% 54%, 66% 54%, 66% 79%, 18% 79%); }
.heart-piece { clip-path: polygon(29% 70%, 70% 70%, 70% 100%, 29% 100%); }
.memory-piece { clip-path: polygon(11% 18%, 28% 18%, 28% 75%, 11% 75%); }

.machine-stage:not(.is-exploded) .logo-piece {
  opacity: 0.001;
}

.machine-stage:not(.is-exploded) .logo-piece.is-active {
  opacity: 0.08;
  filter: drop-shadow(0 0 12px rgb(141 255 69 / 0.45));
}

.machine-stage.is-exploded .logo-base {
  opacity: 0.13;
  filter: grayscale(1) brightness(0.55);
}

.machine-stage.is-exploded .logo-piece {
  opacity: 1;
}

.machine-stage.is-exploded .logo-core {
  filter: drop-shadow(0 0 16px rgb(141 255 69 / 0.14));
}

@media (max-width: 820px) {
  .logo-head {
    height: 460px;
  }

  .logo-head > img,
  .logo-piece img {
    top: -64px;
    width: 760px;
    height: 760px;
  }
}

@media (max-width: 520px) {
  .logo-head {
    height: 390px;
  }

  .logo-head > img,
  .logo-piece img {
    top: -34px;
    width: 620px;
    height: 620px;
  }
}

/* Long-form editorial layer */
.layout main {
  display: flex;
  flex-direction: column;
}

.engine-section { order: 1; }
.hero { order: 2; padding-top: 132px; }
#anatomy { order: 3; }
#reflexes { order: 4; }
#protocol { order: 5; }
#evidence { order: 6; }
#build-notes { order: 7; }
#observe { order: 8; }

.dev-note {
  margin: 34px 0 0;
  padding: 28px 0 25px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.note-lead {
  max-width: 650px;
  margin: 0 0 26px;
  color: var(--ink);
  font: 400 25px/1.28 Georgia, serif;
  letter-spacing: -.025em;
}

.note-columns,
.copy-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 52px;
}

.note-columns p,
.copy-columns p,
.engine-copy p,
.build-prose p {
  margin: 0 0 16px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.72;
}

.note-columns strong {
  color: var(--ink);
  font-weight: 570;
}

.note-signoff {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font: 500 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.engine-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr);
  gap: 42px;
  align-items: end;
}

.engine-section {
  position: relative;
  z-index: 3;
  padding-top: 0;
  background: var(--bg);
}

.visual-cue {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  margin-top: 44px;
  color: var(--faint);
  font: 500 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em;
}

.visual-cue i {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, var(--line), var(--acid), var(--line));
}

.engine-intro h2 {
  margin-bottom: 0;
}

.engine-copy {
  padding-top: 36px;
}

.engine-copy p {
  color: var(--muted);
  font-size: 12px;
}

.rocket-shell {
  width: min(1080px, calc(100vw - 36px));
  margin: 18px 0 0 50%;
  transform: translateX(-50%);
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.rocket-meta,
.rocket-shell figcaption {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 18px;
  align-items: center;
  min-height: 42px;
  padding: 0 15px;
  color: var(--muted);
  font: 500 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.rocket-meta {
  min-height: 34px;
  padding: 0;
  border-bottom: 0;
}

.rocket-meta span:last-child {
  color: var(--acid);
}

.rocket-shell iframe {
  display: block;
  width: 100%;
  height: 920px;
  border: 0;
  background: transparent;
}

.rocket-shell figcaption {
  grid-template-columns: 1fr auto;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
  text-transform: none;
  letter-spacing: 0;
}

.rocket-shell figcaption strong {
  color: var(--text);
  font-weight: 500;
}

.engine-stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

#anatomy .machine-card {
  margin-top: 46px;
}

#anatomy .organ-grid {
  margin-top: 54px;
}

.engine-stages article {
  min-width: 0;
  padding: 20px 16px 22px;
}

.engine-stages article + article {
  border-left: 1px solid var(--line);
}

.engine-stages span,
.principle-grid span {
  color: var(--acid);
  font: 500 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}

.engine-stages h3,
.principle-grid h3 {
  margin: 12px 0 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 560;
}

.engine-stages p,
.principle-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.58;
}

.long-copy {
  margin-top: 52px;
  padding: 32px 0 0;
  border-top: 1px solid var(--line);
}

.long-copy .pull {
  max-width: 650px;
  margin: 0 0 30px;
  color: var(--ink);
  font: 400 27px/1.25 Georgia, serif;
  letter-spacing: -.025em;
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.principle-grid article {
  min-height: 190px;
  padding: 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.principle-grid h3 {
  margin-top: 28px;
  font-size: 15px;
}

.principle-grid p {
  max-width: 280px;
  font-size: 12.5px;
}

.failure-band {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 34px;
  margin-top: 14px;
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.failure-band > div {
  display: grid;
  align-content: space-between;
}

.failure-band > div span {
  color: var(--acid);
  font: 500 9px ui-monospace, monospace;
  letter-spacing: .1em;
}

.failure-band > div strong {
  max-width: 210px;
  font: 400 24px/1.1 Georgia, serif;
}

.failure-band ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.failure-band li {
  display: grid;
  grid-template-columns: 32px 1fr;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: 12px;
}

.failure-band li:last-child {
  border-bottom: 1px solid var(--line);
}

.failure-band li span {
  color: var(--faint);
  font: 10px ui-monospace, monospace;
}

.build-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  margin-top: 42px;
}

.build-prose p:first-child {
  color: var(--ink);
  font-size: 18px;
}

.build-prose strong {
  color: var(--acid);
  font-weight: 550;
}

.build-ledger {
  margin: 0;
  border-top: 1px solid var(--line);
}

.build-ledger div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.build-ledger dt {
  color: var(--text);
  font-size: 12px;
}

.build-ledger dd {
  margin: 0;
  color: var(--muted);
  font: 500 10px ui-monospace, monospace;
  text-transform: uppercase;
}

.build-ledger dd.ready {
  color: var(--acid);
}

@media (max-width: 820px) {
  .note-columns,
  .copy-columns,
  .engine-intro,
  .build-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .engine-copy {
    padding-top: 0;
  }

  .rocket-shell iframe {
    height: 840px;
  }

  .engine-stages {
    grid-template-columns: repeat(2, 1fr);
  }

  .engine-stages article:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .engine-stages article:nth-child(4) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 560px) {
  .note-lead,
  .long-copy .pull {
    font-size: 22px;
  }

  .note-signoff,
  .rocket-shell figcaption {
    display: grid;
  }

  .rocket-meta {
    grid-template-columns: 54px 1fr;
  }

  .rocket-meta span:last-child {
    display: none;
  }

  .rocket-shell iframe {
    height: 820px;
  }

  .engine-stages,
  .principle-grid,
  .failure-band {
    grid-template-columns: 1fr;
  }

  .engine-stages article + article {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .failure-band > div {
    min-height: 90px;
  }
}

/* Fig 01 follows the same editorial rhythm as Fig 02 */
.engine-section {
  width: 100%;
  margin-left: 0;
  transform: none;
  display: block;
}

.engine-section > .section-kicker {
  width: 100%;
}

.engine-intro {
  display: block;
  padding-top: 0;
}

.engine-intro h2 {
  max-width: 670px;
  margin: 38px 0 20px;
  font-size: 42px;
  line-height: 1.06;
  letter-spacing: -.04em;
}

.engine-copy {
  max-width: 620px;
  padding-top: 0;
}

.engine-copy p {
  margin-bottom: 12px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
}

.visual-cue {
  display: none;
}

.rocket-shell {
  width: 100%;
  margin: 46px 0 0;
  transform: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.rocket-meta {
  min-height: 42px;
  padding: 0;
  border-bottom: 1px solid var(--line);
}

.rocket-shell iframe {
  height: 650px;
}

.rocket-shell figcaption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  min-height: 48px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}

.rocket-shell figcaption strong {
  display: inline;
  margin-top: 0;
  color: var(--acid);
  font-weight: 500;
}

.engine-stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
}

.engine-stages article {
  display: block;
  padding: 20px 16px 22px;
}

.engine-stages article + article,
.engine-stages article:nth-child(3),
.engine-stages article:nth-child(4) {
  border-top: 0;
  border-left: 1px solid var(--line);
}

.engine-stages article span {
  display: block;
  padding-top: 0;
}

.engine-stages article h3 {
  margin: 12px 0 8px;
}

.engine-stages article p {
  font-size: 11.5px;
}

@media (max-width: 820px) {
  .engine-intro h2 {
    font-size: 36px;
  }

  .rocket-shell iframe {
    height: 650px;
  }

  .engine-stages {
    grid-template-columns: repeat(2, 1fr);
  }

  .engine-stages article:nth-child(3) {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .engine-stages article:nth-child(4) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 560px) {
  .engine-intro h2 {
    font-size: 31px;
  }

  .rocket-shell iframe {
    height: 590px;
  }

  .rocket-shell figcaption {
    display: grid;
  }

  .engine-stages {
    grid-template-columns: 1fr;
  }

  .engine-stages article + article,
  .engine-stages article:nth-child(3),
  .engine-stages article:nth-child(4) {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

/* Engine hero composition */
.engine-section {
  width: min(900px, calc(100vw - 300px));
  margin-left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 54px;
  align-items: start;
}

.engine-section > .section-kicker {
  grid-column: 1 / -1;
  width: 100%;
}

.engine-intro {
  grid-column: 1;
  grid-row: 2;
  display: block;
  padding-top: 52px;
}

.engine-intro h2 {
  margin: 0;
  font-size: 48px;
  line-height: .98;
  letter-spacing: -.052em;
}

.engine-copy {
  max-width: 285px;
  padding-top: 30px;
}

.engine-copy p {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.65;
}

.visual-cue {
  grid-column: 1;
  grid-row: 3;
  margin: 32px 0 0;
}

.visual-cue span:last-child {
  display: none;
}

.rocket-shell {
  grid-column: 2;
  grid-row: 2 / span 2;
  width: 100%;
  margin: 20px 0 0;
  transform: none;
}

.rocket-meta {
  grid-template-columns: 62px 1fr;
}

.rocket-meta span:last-child {
  display: none;
}

.rocket-shell iframe {
  height: 790px;
}

.rocket-shell figcaption {
  display: block;
  padding-top: 13px;
  color: var(--faint);
}

.rocket-shell figcaption strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
}

.engine-stages {
  grid-column: 1;
  grid-row: 4;
  grid-template-columns: 1fr;
  margin-top: 38px;
}

.engine-stages article {
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 4px 0;
  padding: 15px 0;
}

.engine-stages article + article,
.engine-stages article:nth-child(3),
.engine-stages article:nth-child(4) {
  border-left: 0;
  border-top: 1px solid var(--line);
}

.engine-stages article span {
  grid-row: 1 / 3;
  padding-top: 3px;
}

.engine-stages article h3 {
  margin: 0 0 4px;
}

.engine-stages article p {
  font-size: 10.5px;
}

@media (max-width: 1120px) {
  .engine-section {
    width: min(860px, calc(100vw - 220px));
    grid-template-columns: 290px minmax(0, 1fr);
    column-gap: 36px;
  }
}

@media (max-width: 820px) {
  .engine-section {
    width: 100%;
    margin-left: 0;
    transform: none;
    display: block;
  }

  .engine-intro {
    padding-top: 38px;
  }

  .engine-intro h2 {
    font-size: 40px;
  }

  .engine-copy {
    max-width: 620px;
  }

  .visual-cue {
    margin-top: 26px;
  }

  .rocket-shell {
    width: 100%;
    margin-top: 16px;
  }

  .rocket-shell iframe {
    height: 820px;
  }

  .engine-stages {
    grid-template-columns: repeat(2, 1fr);
  }

  .engine-stages article {
    display: block;
    padding: 18px 14px;
  }

  .engine-stages article + article {
    border-left: 1px solid var(--line);
    border-top: 0;
  }

  .engine-stages article:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .engine-stages article:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .engine-stages article h3 {
    margin-top: 10px;
  }
}

@media (max-width: 560px) {
  .engine-intro h2 {
    font-size: 34px;
  }

  .rocket-shell iframe {
    height: 760px;
  }

  .engine-stages {
    grid-template-columns: 1fr;
  }

  .engine-stages article + article,
  .engine-stages article:nth-child(3),
  .engine-stages article:nth-child(4) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* Final Fig 01 alignment — intentionally last in the cascade */
.engine-section{width:100%;margin-left:0;transform:none;display:block}
.engine-section>.section-kicker{width:100%}
.engine-intro{display:block;padding-top:0}
.engine-intro h2{max-width:670px;margin:38px 0 20px;font-size:42px;line-height:1.06;letter-spacing:-.04em}
.engine-copy{max-width:620px;padding-top:0}
.engine-copy p{margin-bottom:12px;color:var(--text);font-size:15px;line-height:1.65}
.visual-cue{display:none}
.rocket-shell{width:100%;margin:46px 0 0;transform:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rocket-meta{min-height:42px;padding:0;border-bottom:1px solid var(--line)}
.rocket-shell iframe{height:590px}
.rocket-shell figcaption{display:flex;justify-content:space-between;gap:20px;min-height:48px;padding:13px 0;border-top:1px solid var(--line)}
.rocket-shell figcaption strong{display:inline;margin-top:0;color:var(--acid);font-weight:500}
.engine-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:18px}
.engine-stages article{display:block;padding:20px 16px 22px}
.engine-stages article+article,.engine-stages article:nth-child(3),.engine-stages article:nth-child(4){border-top:0;border-left:1px solid var(--line)}
.engine-stages article span{display:block;padding-top:0}
.engine-stages article h3{margin:12px 0 8px}
.engine-stages article p{font-size:11.5px}

@media(max-width:820px){
  .engine-intro h2{font-size:36px}
  .rocket-shell iframe{height:570px}
  .engine-stages{grid-template-columns:repeat(2,1fr)}
  .engine-stages article:nth-child(3){border-top:1px solid var(--line);border-left:0}
  .engine-stages article:nth-child(4){border-top:1px solid var(--line)}
}

@media(max-width:560px){
  .engine-intro h2{font-size:31px}
  .rocket-shell iframe{height:470px}
  .rocket-shell figcaption{display:grid}
  .engine-stages{grid-template-columns:1fr}
  .engine-stages article+article,.engine-stages article:nth-child(3),.engine-stages article:nth-child(4){border-top:1px solid var(--line);border-left:0}
}

/* Rail identity and contract block */
.rail-links {
  display: grid;
  gap: 7px;
  margin-top: 46px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.rail-links a {
  display: flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  color: var(--muted);
  font-size: 11px;
  text-decoration: none;
  transition: color .2s ease;
}

.rail-links a:hover {
  color: var(--ink);
}

.rail-links svg {
  width: 15px;
  height: 15px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rail-links .brand-x {
  fill: currentColor;
  stroke: none;
}

.rail-links img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.rail-links .hf-mark {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: inherit;
  font-size: 15px;
  line-height: 1;
  filter: saturate(.9);
}

.ca-box {
  width: 160px;
  margin-top: 18px;
  padding: 11px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.ca-box > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.ca-box span,
.ca-box button {
  color: var(--faint);
  font: 500 8px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ca-box button {
  padding: 0;
  border: 0;
  background: transparent;
}

.ca-box button:not(:disabled) {
  color: var(--acid);
  cursor: pointer;
}

.ca-box code {
  display: block;
  margin-top: 9px;
  color: var(--ink);
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media(max-width:820px){
  .rail-links{display:grid;margin-top:22px}
  .ca-box{display:block;width:100%;max-width:320px}
}

/* Release polish */
.brand img {
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0a0a09;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .035);
}

.rail nav {
  gap: 2px;
}

.rail nav a {
  position: relative;
  width: 100%;
  padding: 6px 8px 6px 13px;
  border-radius: 6px;
}

.rail nav a::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--faint);
  content: "";
  transform: translateY(-50%);
  transition: background .2s, box-shadow .2s;
}

.rail nav a:hover {
  background: var(--panel);
}

.rail nav a.active::before {
  background: var(--acid);
  box-shadow: 0 0 10px rgb(141 255 69 / .55);
}

.rail-links {
  display: flex;
  gap: 8px;
  margin-top: 38px;
  padding-top: 14px;
}

.rail-links a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: #aaa9a3;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .025);
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}

.rail-links a:hover {
  border-color: #454540;
  background: var(--panel-2);
  color: var(--ink);
  transform: translateY(-1px);
}

.social-icon {
  display: block;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.ca-box {
  min-width: 0;
  margin-top: 10px;
  padding: 12px;
  border-color: #292925;
  background: linear-gradient(180deg, #0d0d0c, #090909);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .025);
}

.ca-box code {
  max-width: 100%;
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: .05em;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.facts {
  padding-left: 18px;
  border-left: 1px solid #161614;
}

/* Interactive system anatomy */
.anatomy-console {
  width: 218px;
  color: var(--muted);
}

.facts-head,
.facts-current > span,
.facts-foot > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--faint);
  font: 600 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.facts-head i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 12px rgb(141 255 69 / .55);
}

.facts-current {
  margin-top: 15px;
  padding: 17px 0 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.facts-current > span b {
  color: #76766f;
  font-weight: 600;
}

.facts-current > strong {
  display: block;
  margin-top: 17px;
  color: var(--ink);
  font: 500 21px/1.05 Arial, Helvetica, sans-serif;
  letter-spacing: -.035em;
}

.facts-current > em {
  display: block;
  margin-top: 6px;
  color: var(--acid);
  font: 600 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-style: normal;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.facts-current > p,
.facts-foot p {
  margin: 13px 0 0;
  color: #85857f;
  font-size: 10px;
  line-height: 1.55;
}

.facts-route {
  margin: 15px 0 16px;
  padding: 0;
  list-style: none;
}

.facts-route button {
  display: grid;
  grid-template-columns: 22px 11px 1fr;
  align-items: center;
  width: 100%;
  min-height: 43px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.facts-route button > span {
  color: #454540;
  font: 500 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  transition: color .2s;
}

.facts-route button > i {
  position: relative;
  width: 5px;
  height: 5px;
  border: 1px solid #4a4a45;
  border-radius: 50%;
  transition: border-color .2s, background .2s, box-shadow .2s;
}

.facts-route li:not(:last-child) button > i::after {
  position: absolute;
  top: 7px;
  left: 1px;
  width: 1px;
  height: 36px;
  background: #252522;
  content: "";
}

.facts-route button div {
  display: grid;
  gap: 4px;
  padding-left: 3px;
}

.facts-route button strong {
  color: #aaa9a3;
  font-size: 10px;
  font-weight: 600;
  transition: color .2s, transform .2s;
}

.facts-route button small {
  color: #52524d;
  font: 500 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: color .2s;
}

.facts-route button:hover strong,
.facts-route button.active strong {
  color: var(--ink);
  transform: translateX(2px);
}

.facts-route button.active > span,
.facts-route button.active small {
  color: var(--acid);
}

.facts-route button.active > i {
  border-color: var(--acid);
  background: var(--acid);
  box-shadow: 0 0 10px rgb(141 255 69 / .45);
}

.facts-foot {
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.facts-foot > strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font: 600 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.section h2,
.hero h1 {
  text-wrap: balance;
}

.section-kicker,
.figure-head,
.rocket-meta {
  letter-spacing: .13em;
}

.instrument,
.mission,
.failure-band {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .025);
}

.instrument {
  transition: border-color .25s, background .25s, transform .25s;
}

.instrument:hover {
  border-color: #393934;
  background: #0e0e0d;
  transform: translateY(-2px);
}

.principle-grid article {
  transition: background .25s;
}

.principle-grid article:hover {
  background: #0b0b0a;
}

@media(max-width:820px){
  .rail nav{gap:4px}
  .rail nav a{width:100%;padding:8px 8px 8px 14px}
  .rail-links{display:flex;margin-top:18px}
  .ca-box{width:100%;max-width:none}
}