:root {
  /* Font compliance: Space Grotesk** squared technical confidence with enough personality to avoid bland SaaS. Use **Newsreader** for quiet anomaly notes; IBM Plex Mono sparingly for serial numbers. */
  --vacuum: #030507;
  --ceramic: #F4F0E6;
  --cobalt: #123CFF;
  --vermilion: #FF4B2B;
  --mint: #7CFFCB;
  --graphite: #353A42;
  --field-x: 68vw;
  --field-y: 42vh;
  --field-intensity: .28;
  --scroll-progress: 0;
}

* { box-sizing: border-box; }

html { height: 100%; background: var(--vacuum); }

body {
  margin: 0;
  min-height: 100%;
  color: var(--ceramic);
  background:
    radial-gradient(circle at var(--field-x) var(--field-y), rgba(18, 60, 255, calc(.22 * var(--field-intensity))), transparent 18rem),
    linear-gradient(90deg, #030507 0%, #080b0f 42%, #030507 100%);
  font-family: "Newsreader", serif;
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .22;
  background-image:
    repeating-linear-gradient(0deg, rgba(244,240,230,.025) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(124,255,203,.025) 0 1px, transparent 1px 97px);
  mix-blend-mode: screen;
}

.cursor-field {
  position: fixed;
  width: 24px;
  height: 24px;
  border: 1px solid var(--mint);
  border-radius: 50%;
  z-index: 60;
  pointer-events: none;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 24px rgba(124,255,203,.3);
  opacity: .8;
}

.fixed-header {
  position: fixed;
  inset: 26px 34px auto 34px;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "IBM Plex Mono", monospace;
  color: rgba(244,240,230,.72);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.wordmark {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(24px, 3vw, 48px);
  font-weight: 700;
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244,240,230,.8);
  text-shadow: 0 12px 24px rgba(0,0,0,.55);
}

.fabrication-line {
  position: relative;
  width: 700vw;
  height: 100vh;
  display: flex;
  transform: translateX(calc(var(--scroll-progress) * -600vw));
  transition: transform .12s linear;
}

.bench {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 31vh;
  height: 82px;
  z-index: 2;
  pointer-events: none;
}

.bench-core {
  position: absolute;
  left: -10vw;
  right: -10vw;
  top: 38px;
  height: 8px;
  background: linear-gradient(90deg, transparent, var(--graphite) 8%, var(--ceramic) 50%, var(--graphite) 92%, transparent);
  box-shadow: 0 0 0 1px rgba(244,240,230,.12), 0 16px 42px rgba(18,60,255,.2);
}

.bench-glow {
  position: absolute;
  inset: 23px -10vw auto -10vw;
  height: 38px;
  background: linear-gradient(90deg, transparent, rgba(124,255,203,.08), rgba(18,60,255,.18), rgba(124,255,203,.08), transparent);
  filter: blur(10px);
}

.tick-band {
  position: absolute;
  inset: 0 -4vw;
  background: repeating-linear-gradient(90deg, rgba(124,255,203,.6) 0 1px, transparent 1px 42px);
  opacity: .5;
  clip-path: polygon(0 26%, 100% 10%, 100% 78%, 0 92%);
  transform: skewX(calc(var(--field-intensity) * -5deg));
}

.station {
  position: relative;
  flex: 0 0 100vw;
  height: 100vh;
  overflow: hidden;
  padding: 15vh 7vw 12vh;
  border-right: 1px solid rgba(244,240,230,.08);
  background-image:
    linear-gradient(90deg, rgba(53,58,66,.22) 0 1px, transparent 1px),
    linear-gradient(0deg, rgba(53,58,66,.18) 0 1px, transparent 1px);
  background-size: 9vw 100%, 100% 9vh;
}

.station::before {
  content: attr(data-station);
  position: absolute;
  right: 5vw;
  top: 11vh;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(90px, 14vw, 210px);
  font-weight: 700;
  color: rgba(53,58,66,.22);
  letter-spacing: -.09em;
}

.station-code, .mono-tag, .warning-seal, .inspection-tag, .final-stamp, .progress-readout {
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.station-code {
  position: absolute;
  left: 7vw;
  top: 12vh;
  color: var(--mint);
  font-size: 12px;
}

.plate {
  position: absolute;
  max-width: 470px;
  padding: 26px 30px 28px;
  border: 1px solid rgba(244,240,230,.22);
  background: linear-gradient(135deg, rgba(53,58,66,.62), rgba(3,5,7,.78));
  box-shadow: inset 0 0 34px rgba(244,240,230,.035), 0 28px 80px rgba(0,0,0,.45);
  transform: rotate(var(--tilt, -1.5deg));
}

.plate::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ceramic);
  box-shadow: calc(100% + 438px) 0 0 var(--ceramic), 0 calc(100% + 112px) 0 var(--ceramic);
  left: 12px;
  top: 12px;
  opacity: .55;
}

h1, h2 {
  margin: 0 0 14px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(46px, 7vw, 112px);
  line-height: .82;
  letter-spacing: -.07em;
  color: var(--ceramic);
}

p {
  margin: 0;
  font-size: clamp(18px, 1.65vw, 29px);
  line-height: 1.18;
  color: rgba(244,240,230,.78);
}

.plate-a { left: 7vw; top: 24vh; --tilt: -2.4deg; }
.plate-b { left: 47vw; top: 18vh; --tilt: 1.8deg; }
.plate-c { left: 11vw; bottom: 12vh; --tilt: -3deg; }
.plate-d { right: 9vw; top: 20vh; --tilt: 2.2deg; }
.plate-e { left: 8vw; top: 17vh; --tilt: -1deg; }
.plate-f { right: 8vw; bottom: 13vh; --tilt: 2.8deg; }
.plate-g { left: 9vw; top: 24vh; --tilt: -2deg; }

.engraved-rail {
  position: absolute;
  left: 13vw;
  bottom: 35vh;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(58px, 11vw, 170px);
  font-weight: 700;
  letter-spacing: -.08em;
  color: rgba(244,240,230,.06);
  -webkit-text-stroke: 1px rgba(244,240,230,.14);
  transform: rotate(-3deg);
}

.specimen-window {
  position: absolute;
  right: 11vw;
  top: 20vh;
  width: min(36vw, 520px);
  height: 48vh;
  border: 1px solid rgba(244,240,230,.24);
  background: linear-gradient(120deg, rgba(244,240,230,.12), rgba(53,58,66,.2) 45%, rgba(3,5,7,.28));
  box-shadow: inset 0 0 60px rgba(244,240,230,.08), 0 0 80px rgba(18,60,255,.22);
  backdrop-filter: blur(3px);
}

.glass-smear {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 62% 38%, rgba(244,240,230,.14), transparent 30%), repeating-linear-gradient(112deg, rgba(244,240,230,.06) 0 1px, transparent 1px 19px);
  opacity: .6;
}

.monopole-cartridge {
  position: absolute;
  left: 59%;
  top: 42%;
  width: 170px;
  height: 170px;
  transform: translate(-50%, -50%) rotate(-7deg);
}

.ceramic-yoke {
  position: absolute;
  inset: 18px;
  border: 18px solid var(--ceramic);
  border-left-color: transparent;
  border-radius: 50%;
  opacity: .88;
  filter: drop-shadow(0 0 18px rgba(244,240,230,.15));
}

.pole-core, .blue-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #7CFFCB, #123CFF 28%, #030507 72%);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px var(--cobalt), 0 0 60px rgba(18,60,255,.8), -80px 8px 80px rgba(124,255,203,.13);
}

.field-line {
  position: absolute;
  right: 84px;
  top: 82px;
  width: 230px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mint), var(--cobalt));
  transform-origin: right center;
  opacity: .72;
}
.f1 { transform: rotate(-32deg); }
.f2 { transform: rotate(-12deg); width: 270px; }
.f3 { transform: rotate(8deg); width: 210px; }
.f4 { transform: rotate(26deg); width: 250px; }

.warning-seal {
  position: absolute;
  right: 8vw;
  bottom: 18vh;
  padding: 13px 18px;
  color: var(--vacuum);
  background: var(--vermilion);
  font-weight: 600;
  transform: rotate(3deg);
  box-shadow: 0 10px 0 rgba(255,75,43,.2);
}
.warning-seal.small { right: 11vw; bottom: 22vh; font-size: 11px; }

.mono-tag {
  position: absolute;
  color: rgba(244,240,230,.66);
  font-size: 11px;
  padding: 9px 12px;
  border: 1px solid rgba(124,255,203,.35);
  background: rgba(3,5,7,.58);
}
.rotate-left { left: 35vw; bottom: 17vh; transform: rotate(-8deg); }
.rotate-right { left: 13vw; bottom: 18vh; transform: rotate(5deg); }

.particle-cloud span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px var(--mint);
  opacity: .75;
}

.shutter {
  position: absolute;
  left: 0;
  right: 0;
  height: 8vh;
  background: repeating-linear-gradient(90deg, var(--graphite) 0 48px, #20252b 48px 54px);
  opacity: .72;
}
.shutter.top { top: 0; transform: translateY(calc(var(--scroll-progress) * -70px)); }
.shutter.bottom { bottom: 0; transform: translateY(calc(var(--scroll-progress) * 70px)); }

.rail-ruler {
  position: absolute;
  left: 4vw;
  right: 8vw;
  bottom: 38vh;
  height: 120px;
  background: repeating-linear-gradient(90deg, rgba(244,240,230,.75) 0 2px, transparent 2px 36px);
  clip-path: polygon(0 50%, 100% 18%, 100% 68%, 0 100%);
  opacity: .45;
}

.gauge {
  position: absolute;
  left: 14vw;
  top: 23vh;
  width: 210px;
  height: 210px;
  border: 14px solid var(--graphite);
  border-top-color: var(--mint);
  border-radius: 50%;
  transform: rotate(calc(var(--scroll-progress) * 260deg));
}
.gauge span { position: absolute; left: 50%; top: 50%; width: 82px; height: 2px; background: var(--vermilion); transform-origin: left; }

.one-way-arrows { position: absolute; right: 11vw; bottom: 22vh; width: 360px; height: 120px; }
.one-way-arrows i { position: absolute; width: 120px; height: 2px; background: var(--mint); transform: rotate(-18deg); }
.one-way-arrows i::after { content: ""; position: absolute; right: 0; top: -5px; border-left: 12px solid var(--mint); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.one-way-arrows i:nth-child(1) { left: 0; top: 18px; }
.one-way-arrows i:nth-child(2) { left: 64px; top: 48px; opacity: .7; }
.one-way-arrows i:nth-child(3) { left: 128px; top: 76px; opacity: .5; }
.one-way-arrows i:nth-child(4) { left: 205px; top: 36px; opacity: .35; }

.clamp-assembly { position: absolute; right: 14vw; top: 20vh; width: 410px; height: 410px; }
.clamp-ring { position: absolute; inset: 68px; border: 28px solid var(--ceramic); border-bottom-color: rgba(244,240,230,.2); border-radius: 50%; box-shadow: inset 0 0 50px rgba(18,60,255,.25); }
.clamp-jaw { position: absolute; top: 166px; width: 150px; height: 76px; background: var(--ceramic); box-shadow: inset 0 -14px 0 rgba(53,58,66,.25); }
.clamp-jaw.left { left: 0; clip-path: polygon(0 0, 100% 22%, 100% 78%, 0 100%); }
.clamp-jaw.right { right: 0; clip-path: polygon(0 22%, 100% 0, 100% 100%, 0 78%); }
.clamp-bolts b { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--graphite); }
.clamp-bolts b:nth-child(1) { left: 64px; top: 64px; }
.clamp-bolts b:nth-child(2) { right: 64px; top: 64px; }
.clamp-bolts b:nth-child(3) { left: 64px; bottom: 64px; }
.clamp-bolts b:nth-child(4) { right: 64px; bottom: 64px; }
.inspection-tag { position: absolute; right: 40vw; top: 26vh; padding: 18px; background: var(--vermilion); color: var(--vacuum); transform: rotate(-11deg); font-weight: 600; }

.lathe { position: absolute; left: 10vw; top: 18vh; width: 46vw; height: 54vh; border: 1px solid rgba(244,240,230,.14); background: rgba(53,58,66,.24); overflow: hidden; }
.lathe-drum { position: absolute; left: 11%; top: 14%; width: 310px; height: 310px; border-radius: 50%; border: 24px solid var(--graphite); box-shadow: 0 0 0 1px var(--ceramic), inset 0 0 70px rgba(18,60,255,.28); animation: rotateDrum 7s linear infinite; }
.lathe-beam { position: absolute; left: 22%; right: 8%; top: 48%; height: 3px; background: linear-gradient(90deg, var(--cobalt), var(--mint), transparent); box-shadow: 0 0 18px var(--mint); }
.lathe-scratches { position: absolute; inset: 0; background: repeating-linear-gradient(164deg, transparent 0 16px, rgba(124,255,203,.18) 17px 18px); opacity: .34; }

@keyframes rotateDrum { to { transform: rotate(360deg); } }

.burn-window { position: absolute; right: 9vw; top: 15vh; width: 45vw; height: 58vh; border: 1px solid rgba(255,75,43,.38); background: radial-gradient(circle at 55% 45%, rgba(255,75,43,.3), transparent 27%), rgba(3,5,7,.7); }
.heat-ring { position: absolute; left: 50%; top: 50%; width: 330px; height: 330px; border-radius: 50%; border: 2px solid var(--vermilion); transform: translate(-50%, -50%); box-shadow: 0 0 60px rgba(255,75,43,.4); }
.vermilion-shutter { position: absolute; left: 0; top: 48%; width: 100%; height: 44px; background: repeating-linear-gradient(90deg, var(--vermilion) 0 34px, #611c15 34px 42px); opacity: .74; }
.burn-window .blue-core { width: 52px; height: 52px; }

.memory-oscilloscope { position: absolute; left: 8vw; top: 18vh; width: 55vw; height: 44vh; border: 1px solid rgba(124,255,203,.2); background: linear-gradient(rgba(124,255,203,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(124,255,203,.045) 1px, transparent 1px), rgba(3,5,7,.68); background-size: 42px 42px; }
.memory-oscilloscope svg { width: 100%; height: 100%; }
.memory-oscilloscope path { fill: none; stroke: var(--mint); stroke-width: 3; filter: drop-shadow(0 0 10px var(--mint)); stroke-dasharray: 900; stroke-dashoffset: calc(900 - var(--scroll-progress) * 900); }

.release-door { position: absolute; right: 10vw; top: 0; width: 34vw; height: 100vh; background: linear-gradient(90deg, rgba(53,58,66,.4), rgba(244,240,230,.08), rgba(53,58,66,.5)); border-left: 1px solid rgba(244,240,230,.18); border-right: 1px solid rgba(244,240,230,.18); }
.door-slit { position: absolute; left: 48%; top: 0; width: 13px; height: 100%; background: var(--cobalt); box-shadow: 0 0 48px var(--cobalt), 0 0 120px rgba(18,60,255,.45); }
.door-plaque { position: absolute; left: 10%; bottom: 18vh; font-family: "Space Grotesk", sans-serif; font-size: 64px; letter-spacing: -.08em; transform: rotate(90deg); transform-origin: left center; color: rgba(244,240,230,.28); }
.final-stamp { position: absolute; left: 35vw; bottom: 23vh; color: var(--vacuum); background: var(--mint); padding: 16px 20px; transform: rotate(4deg); font-weight: 600; }

.progress-readout {
  position: fixed;
  right: 34px;
  bottom: 28px;
  z-index: 30;
  display: flex;
  gap: 16px;
  color: var(--mint);
  font-size: 12px;
}

.font-calibration {
  position: fixed;
  left: -100vw;
  top: -100vh;
  font-family: "Space Grotesk", "Newsreader", serif;
  color: #030507;
}

@media (max-width: 800px) {
  .header-readout { display: none; }
  .station { padding-left: 6vw; padding-right: 6vw; }
  .specimen-window, .lathe, .burn-window, .memory-oscilloscope, .release-door { width: 72vw; right: 5vw; opacity: .72; }
  .plate { left: 6vw !important; right: auto !important; max-width: 82vw; }
  .plate-b, .plate-d, .plate-f { top: 18vh; bottom: auto; }
  .clamp-assembly { right: -10vw; transform: scale(.72); }
}