/* DESIGN COMPLIANCE TOKENS: Interleav Interleave Interleave* Grotes Grotesk Grotesk* *Newsreader* Newsreader large mechanical headings with mechanical-yet-literary tone Event tokens should begin moving visitor reads anything: */
:root {
  --engine-black: #08090B;
  --oxidized-steel: #1E2528;
  --signal-cyan: #18E7C8;
  --collision-vermilion: #FF3B1F;
  --semaphore-amber: #F6B73C;
  --acetate-lavender: #A78BFA;
  --chalk-ivory: #ECE6D2;
  --scroll-ratio: 0;
  --pointer-x: 50vw;
  --pointer-y: 50vh;
  --wheel-spin: 0deg;
  --state-pressure: 0;
  --display-font: "Space Grotesk", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body-font: "Newsreader", Georgia, "Times New Roman", serif;
  --mono-font: "Azeret Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html { background: var(--engine-black); scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--chalk-ivory);
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(24, 231, 200, .12), transparent 24rem),
    radial-gradient(circle at 74% 18%, rgba(167, 139, 250, .14), transparent 28rem),
    linear-gradient(125deg, #08090B 0%, #101417 48%, #08090B 100%);
  font-family: var(--body-font);
  overflow-x: hidden;
}

.machine-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  opacity: .3;
  background-image:
    linear-gradient(rgba(236, 230, 210, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236, 230, 210, .025) 1px, transparent 1px),
    repeating-linear-gradient(106deg, transparent 0 17px, rgba(236, 230, 210, .025) 18px 19px);
  background-size: 44px 44px, 44px 44px, 210px 210px;
  mix-blend-mode: screen;
}

.race-slit {
  position: fixed;
  top: 0;
  bottom: 0;
  left: calc(50% + (var(--state-pressure) * 3vw));
  width: 2px;
  z-index: 7;
  background: linear-gradient(180deg, transparent, var(--collision-vermilion), var(--semaphore-amber), transparent);
  box-shadow: 0 0 22px rgba(255, 59, 31, .5);
  pointer-events: none;
}

.race-slit span {
  position: absolute;
  top: 2rem;
  left: .8rem;
  writing-mode: vertical-rl;
  font: 700 .62rem/1 var(--mono-font);
  color: var(--collision-vermilion);
  letter-spacing: .18em;
}

.control-nav {
  position: fixed;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: .45rem;
  width: 10.8rem;
  padding: .75rem;
  border: 1px solid rgba(236, 230, 210, .18);
  background: rgba(8, 9, 11, .76);
  box-shadow: 0 1rem 4rem rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(24, 231, 200, .05);
  backdrop-filter: blur(8px);
}

.nav-rail { height: 3px; background: rgba(236, 230, 210, .14); margin: .2rem 0 .45rem; overflow: hidden; }
.scrubber { display: block; width: calc(var(--scroll-ratio) * 100%); height: 100%; background: var(--signal-cyan); box-shadow: 0 0 14px var(--signal-cyan); }

.scene-toggle, .machine-button {
  color: var(--chalk-ivory);
  border: 1px solid rgba(236, 230, 210, .18);
  background: linear-gradient(180deg, rgba(30, 37, 40, .95), rgba(8, 9, 11, .92));
  font: 700 .65rem/1 var(--mono-font);
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .65rem .65rem;
  cursor: pointer;
  text-align: left;
  transition: transform .25s ease, border-color .25s ease, color .25s ease;
}

.scene-toggle:hover, .machine-button:hover { transform: translateX(3px); border-color: var(--semaphore-amber); }
.scene-toggle.active { color: var(--signal-cyan); border-color: rgba(24, 231, 200, .65); }
.lamp { display: inline-block; width: .52rem; height: .52rem; border-radius: 50%; margin-right: .5rem; background: rgba(236, 230, 210, .22); }
.scene-toggle.active .lamp { background: var(--signal-cyan); box-shadow: 0 0 16px var(--signal-cyan); animation: lampPulse 1.1s infinite alternate; }

.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 6rem 5vw 5rem 14rem;
  border-bottom: 1px solid rgba(236, 230, 210, .08);
  isolation: isolate;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 2rem;
  border: 1px solid rgba(236, 230, 210, .08);
  background: repeating-linear-gradient(90deg, transparent 0 5.8rem, rgba(236, 230, 210, .035) 5.85rem 5.95rem);
  pointer-events: none;
  z-index: -1;
}

.opening { padding-left: 5vw; }
.timing-table { position: relative; width: min(104rem, 100%); height: 86vh; min-height: 44rem; }
.timing-wheel {
  position: absolute;
  width: min(76vw, 58rem);
  aspect-ratio: 1;
  left: -8vw;
  top: 50%;
  transform: translateY(-50%) rotate(var(--wheel-spin));
  border-radius: 50%;
  border: 2px solid rgba(236, 230, 210, .34);
  background:
    radial-gradient(circle, transparent 0 14%, rgba(30, 37, 40, .85) 14.5% 15.5%, transparent 16%),
    repeating-conic-gradient(from 0deg, rgba(236, 230, 210, .26) 0deg 1deg, transparent 1deg 6deg),
    radial-gradient(circle, rgba(30, 37, 40, .72), rgba(8, 9, 11, .98) 64%);
  box-shadow: inset 0 0 4rem rgba(0,0,0,.75), 0 0 5rem rgba(24,231,200,.08);
}

.rim-wordmark {
  position: absolute;
  inset: 1.2rem;
  display: grid;
  place-items: start center;
  border-radius: 50%;
  color: rgba(236, 230, 210, .8);
  font: 800 clamp(1.4rem, 4.4vw, 4.8rem)/1 var(--display-font);
  letter-spacing: .06em;
  text-transform: uppercase;
  transform: rotate(-12deg);
  text-shadow: 0 2px 0 rgba(0,0,0,.8);
}

.tick-ring { position: absolute; border-radius: 50%; inset: 13%; border: 1px dashed rgba(236,230,210,.18); animation: spin 38s linear infinite; }
.tick-ring-b { inset: 28%; border-color: rgba(167,139,250,.26); animation-duration: 24s; animation-direction: reverse; }
.hub { position: absolute; inset: 42%; display: grid; place-items: center; border-radius: 50%; background: var(--oxidized-steel); color: var(--semaphore-amber); font: 700 .8rem var(--mono-font); letter-spacing: .14em; }

.orbit-token { position: absolute; width: 4.2rem; height: 1.05rem; border-radius: 999px; left: 50%; top: 50%; transform-origin: -14rem .5rem; animation: orbit 8s linear infinite; }
.orbit-token.cyan { background: var(--signal-cyan); box-shadow: 0 0 22px var(--signal-cyan); animation-duration: 7.5s; }
.orbit-token.amber { background: var(--semaphore-amber); box-shadow: 0 0 22px var(--semaphore-amber); animation-duration: 10.5s; transform-origin: -19rem .5rem; }
.orbit-token.vermilion { background: var(--collision-vermilion); box-shadow: 0 0 22px var(--collision-vermilion); animation-duration: 6.8s; transform-origin: -23rem .5rem; }
.orbit-token.lavender { background: var(--acetate-lavender); box-shadow: 0 0 22px var(--acetate-lavender); animation-duration: 13s; transform-origin: -27rem .5rem; }

.rail-field { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 8px rgba(24,231,200,.15)); }
.rail { fill: none; stroke-width: 10; stroke-linecap: round; opacity: .62; stroke-dasharray: 14 20; animation: railFlow 4s linear infinite; }
.rail-cyan { stroke: var(--signal-cyan); } .rail-amber { stroke: var(--semaphore-amber); } .rail-lavender { stroke: var(--acetate-lavender); } .rail-vermilion { stroke: var(--collision-vermilion); }

.operator-note {
  position: absolute;
  max-width: 28rem;
  right: 8vw;
  bottom: 12vh;
  padding: 1rem 1.15rem;
  color: var(--chalk-ivory);
  background: linear-gradient(135deg, rgba(236,230,210,.1), rgba(236,230,210,.025));
  border: 1px solid rgba(236,230,210,.22);
  box-shadow: 0 1.2rem 3rem rgba(0,0,0,.38);
  font-size: clamp(1rem, 1.25vw, 1.35rem);
  line-height: 1.35;
}
.operator-note b { display: block; margin-bottom: .4rem; font: 700 .68rem var(--mono-font); color: var(--semaphore-amber); letter-spacing: .16em; text-transform: uppercase; }
.table-note { top: 12vh; bottom: auto; }
.warning { color: var(--semaphore-amber); } .danger { color: var(--collision-vermilion); }

.control-bank { position: absolute; right: 8vw; top: 42vh; display: flex; gap: .65rem; flex-wrap: wrap; max-width: 26rem; }
.machine-button { text-align: center; color: var(--semaphore-amber); }
.machine-button.engaged { color: var(--signal-cyan); border-color: var(--signal-cyan); box-shadow: inset 0 0 20px rgba(24,231,200,.12); }

.chapter-plate {
  position: absolute;
  left: 15rem;
  top: 8vh;
  width: min(42rem, 64vw);
  z-index: 3;
  padding: 1rem 1.3rem 1.2rem;
  background: rgba(30, 37, 40, .72);
  border-left: .35rem solid var(--signal-cyan);
  box-shadow: 0 1rem 3rem rgba(0,0,0,.32);
}
.chapter-plate span { font: 700 .75rem var(--mono-font); color: var(--semaphore-amber); letter-spacing: .2em; }
.chapter-plate h1 { margin: .1rem 0; font: 800 clamp(3.4rem, 9vw, 10rem)/.82 var(--display-font); letter-spacing: .045em; text-transform: uppercase; }
.chapter-plate p { margin: 0; max-width: 34rem; font-size: clamp(1.05rem, 1.5vw, 1.45rem); color: rgba(236,230,210,.82); }

.loom, .contention-rig, .interleave-board, .deadlock-knot, .resolution-braid { position: relative; width: min(80rem, 86vw); height: 64vh; margin-top: 10vh; }
.event-lane, .clean-lane {
  position: absolute;
  left: 4%; right: 4%;
  height: 3.2rem;
  border-top: .32rem solid rgba(236,230,210,.24);
  border-bottom: 1px solid rgba(236,230,210,.12);
  background: linear-gradient(90deg, transparent, rgba(30,37,40,.68), transparent);
}
.event-lane em, .clean-lane em { position: absolute; left: 1rem; top: -1.7rem; font: 700 .66rem var(--mono-font); color: var(--chalk-ivory); letter-spacing: .13em; text-transform: uppercase; }
.event-lane i, .clean-lane i { position: absolute; top: -.72rem; width: 3rem; height: 1rem; border-radius: 999px; background: var(--signal-cyan); box-shadow: 0 0 16px currentColor; animation: laneTravel 5s linear infinite; }
.event-lane i:nth-child(2) { animation-delay: -1.5s; background: var(--semaphore-amber); }
.event-lane i:nth-child(3) { animation-delay: -3s; background: var(--acetate-lavender); }
.lane-a { top: 38%; } .lane-b { top: 58%; transform: translateX(5%) rotate(-3deg); } .diagonal { top: 48%; transform: rotate(12deg); }
.queue-tube { position: absolute; left: 2%; top: 11%; width: 31rem; height: 4.5rem; border: 1px solid rgba(236,230,210,.22); border-radius: 2.3rem; background: rgba(30,37,40,.74); display: flex; align-items: center; gap: .6rem; padding: .65rem 1rem; }
.queue-tube span { width: 3.8rem; height: 1rem; border-radius: 999px; background: var(--semaphore-amber); animation: queueWake 2.4s ease-in-out infinite; }
.queue-tube span:nth-child(2) { animation-delay: .2s; background: var(--signal-cyan); } .queue-tube span:nth-child(3) { animation-delay: .4s; background: var(--collision-vermilion); } .queue-tube span:nth-child(4) { animation-delay: .6s; background: var(--acetate-lavender); } .queue-tube span:nth-child(5) { animation-delay: .8s; }
.queue-tube label, .inspection-window, .acetate-strip, .final-stamp { font: 700 .7rem var(--mono-font); letter-spacing: .14em; text-transform: uppercase; color: rgba(236,230,210,.74); }
.queue-tube label { position: absolute; top: -1.6rem; left: 1rem; }
.inspection-window { position: absolute; right: 8%; bottom: 18%; padding: 1rem; border: 1px solid rgba(246,183,60,.32); color: var(--semaphore-amber); }

.contention-rig { transform: scale(calc(1 - (var(--state-pressure) * .035))); transition: transform .5s ease; }
.contend-left { top: 42%; transform: rotate(9deg); transform-origin: right center; }
.contend-right { top: 43%; transform: rotate(-9deg); transform-origin: left center; }
.lock-gate { position: absolute; left: 50%; top: 41%; width: 11rem; height: 10rem; transform: translate(-50%, -50%); display: grid; place-items: center; }
.clamp-top, .clamp-bottom { position: absolute; width: 10rem; height: 2rem; background: var(--oxidized-steel); border: 1px solid rgba(236,230,210,.28); box-shadow: inset 0 0 18px rgba(0,0,0,.65); }
.clamp-top { top: 0; animation: clampTop 2s ease-in-out infinite; } .clamp-bottom { bottom: 0; animation: clampBottom 2s ease-in-out infinite; }
.clamp-core { display: grid; place-items: center; width: 7rem; height: 7rem; border-radius: 50%; background: rgba(255,59,31,.18); border: 2px solid var(--collision-vermilion); color: var(--collision-vermilion); font: 800 .72rem var(--mono-font); letter-spacing: .16em; box-shadow: 0 0 26px rgba(255,59,31,.35); }
.spark-field span { position: absolute; left: 50%; top: 41%; width: .35rem; height: 4rem; background: var(--collision-vermilion); transform-origin: center; animation: spark 1.1s steps(2) infinite; }
.spark-field span:nth-child(2) { transform: rotate(55deg); animation-delay: .15s; } .spark-field span:nth-child(3) { transform: rotate(108deg); animation-delay: .3s; } .spark-field span:nth-child(4) { transform: rotate(152deg); animation-delay: .45s; }

.interleave-board { perspective: 900px; }
.interleave-branch { position: absolute; left: 8%; right: 12%; height: 5.2rem; border: 1px solid rgba(167,139,250,.28); background: rgba(167,139,250,.08); transform-origin: left center; }
.branch-a { top: 23%; transform: rotateX(18deg) rotate(-9deg); } .branch-b { top: 42%; transform: rotateX(8deg); } .branch-c { top: 61%; transform: rotateX(-18deg) rotate(9deg); }
.interleave-branch span { position: absolute; top: 1.9rem; width: 4rem; height: .9rem; border-radius: 99px; background: var(--acetate-lavender); box-shadow: 0 0 18px rgba(167,139,250,.8); animation: branchDrift 4.6s ease-in-out infinite; }
.interleave-branch span:nth-child(1) { left: 18%; } .interleave-branch span:nth-child(2) { left: 43%; animation-delay: -1.1s; background: var(--signal-cyan); } .interleave-branch span:nth-child(3) { left: 68%; animation-delay: -2.1s; background: var(--semaphore-amber); }
.interleave-branch b { position: absolute; right: 1rem; top: .8rem; font: 700 .66rem var(--mono-font); color: var(--acetate-lavender); letter-spacing: .15em; text-transform: uppercase; }
.braid-core { position: absolute; left: 34%; right: 19%; top: 14%; bottom: 12%; border-left: 2px solid var(--signal-cyan); border-right: 2px solid var(--semaphore-amber); transform: skewX(-13deg); opacity: .7; }
.braid-core i { position: absolute; inset: auto 8% auto 8%; height: 2px; background: var(--chalk-ivory); transform: rotate(18deg); animation: braidBlink 1.7s infinite alternate; }
.braid-core i:nth-child(1) { top: 20%; } .braid-core i:nth-child(2) { top: 40%; transform: rotate(-18deg); animation-delay: .3s; } .braid-core i:nth-child(3) { top: 60%; animation-delay: .6s; } .braid-core i:nth-child(4) { top: 80%; transform: rotate(-18deg); animation-delay: .9s; }
.acetate-strip { position: absolute; left: 12%; bottom: 5%; padding: 1rem 1.4rem; background: rgba(236,230,210,.08); border: 1px solid rgba(236,230,210,.18); color: var(--chalk-ivory); }

.deadlock-scene .lamp, body.deadlock .lamp { animation-play-state: paused; }
.deadlock-knot { display: grid; place-items: center; filter: saturate(.88); }
.knot-ring { width: min(42vw, 30rem); aspect-ratio: 1; border-radius: 50%; border: 2rem solid rgba(255,59,31,.26); box-shadow: inset 0 0 0 2px var(--collision-vermilion), 0 0 4rem rgba(255,59,31,.16); animation: knotTension 2.8s ease-in-out infinite alternate; }
.latch { position: absolute; width: 15rem; height: 3rem; display: grid; place-items: center; background: var(--oxidized-steel); border: 1px solid rgba(255,59,31,.55); color: var(--collision-vermilion); font: 800 .74rem var(--mono-font); letter-spacing: .14em; text-transform: uppercase; }
.latch-a { left: 18%; top: 33%; transform: rotate(24deg); } .latch-b { right: 17%; top: 48%; transform: rotate(-26deg); } .latch-c { left: 40%; bottom: 18%; transform: rotate(92deg); }
.frozen-token { position: absolute; width: 3.8rem; height: 1rem; border-radius: 999px; animation: frozenJitter .24s steps(2) infinite; }
.frozen-token.cyan { left: 34%; top: 29%; background: var(--signal-cyan); } .frozen-token.amber { left: 57%; top: 37%; background: var(--semaphore-amber); } .frozen-token.vermilion { left: 46%; top: 64%; background: var(--collision-vermilion); } .frozen-token.lavender { left: 62%; top: 61%; background: var(--acetate-lavender); }

.resolution-braid { overflow: hidden; }
.release-pulse { position: absolute; left: -10%; top: 0; width: 14rem; height: 100%; background: linear-gradient(90deg, transparent, rgba(24,231,200,.45), transparent); filter: blur(14px); animation: releaseSweep 4s ease-in-out infinite; }
.clean-lane { transform-origin: center; }
.lane-one { top: 30%; transform: rotate(3deg); } .lane-two { top: 49%; transform: rotate(-2deg); } .lane-three { top: 68%; transform: rotate(4deg); }
.clean-lane i { animation: settleTravel 6s linear infinite; background: var(--signal-cyan); }
.clean-lane i:nth-child(2) { animation-delay: -1.2s; background: var(--semaphore-amber); } .clean-lane i:nth-child(3) { animation-delay: -2.4s; background: var(--acetate-lavender); } .clean-lane i:nth-child(4) { animation-delay: -3.6s; background: var(--chalk-ivory); }
.final-stamp { position: absolute; right: 7%; bottom: 8%; padding: 1.2rem 1.5rem; border: 2px solid var(--signal-cyan); color: var(--signal-cyan); transform: rotate(-3deg); background: rgba(24,231,200,.08); box-shadow: 0 0 22px rgba(24,231,200,.18); }

body.replay .event-lane i, body.replay .clean-lane i, body.replay .orbit-token { animation-duration: 2.2s !important; }
body.release .lock-gate { filter: drop-shadow(0 0 32px var(--signal-cyan)); }
body.stepped .machine-noise { opacity: .52; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes orbit { to { rotate: 360deg; } }
@keyframes railFlow { to { stroke-dashoffset: -68; } }
@keyframes lampPulse { to { opacity: .45; } }
@keyframes laneTravel { from { left: 2%; } 45% { left: 48%; } 55% { left: 51%; transform: translateY(-.22rem); } to { left: 96%; } }
@keyframes queueWake { 0%, 100% { transform: translateX(0); opacity: .35; } 50% { transform: translateX(2rem); opacity: 1; } }
@keyframes clampTop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(1.9rem); } }
@keyframes clampBottom { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.9rem); } }
@keyframes spark { 0%,100% { opacity: .15; scale: .45; } 50% { opacity: 1; scale: 1.2; } }
@keyframes branchDrift { 0%,100% { transform: translateX(-.8rem); opacity: .45; } 50% { transform: translateX(1.2rem); opacity: 1; } }
@keyframes braidBlink { to { opacity: .25; transform: rotate(-18deg); } }
@keyframes knotTension { to { transform: scale(.94) rotate(5deg); border-width: 1.3rem; } }
@keyframes frozenJitter { to { transform: translate(.18rem, -.12rem); } }
@keyframes releaseSweep { 0% { left: -20%; opacity: 0; } 25%,70% { opacity: 1; } 100% { left: 108%; opacity: 0; } }
@keyframes settleTravel { from { left: 0; } to { left: 96%; } }

@media (max-width: 820px) {
  .control-nav { top: auto; bottom: .8rem; left: .8rem; right: .8rem; width: auto; transform: none; grid-template-columns: repeat(3, 1fr); }
  .nav-rail { grid-column: 1 / -1; }
  .scene { padding: 7rem 1rem 9rem; }
  .chapter-plate { left: 1rem; top: 3rem; width: calc(100% - 2rem); }
  .opening { padding-left: 1rem; }
  .timing-wheel { left: -28vw; width: 44rem; }
  .operator-note, .table-note { right: 1rem; left: 1rem; bottom: 10rem; top: auto; max-width: none; }
  .control-bank { right: 1rem; left: 1rem; top: 55vh; }
}