:root {
  --reactor-black: #071013;
  --event-mint: #00F0B5;
  --scheduler-violet: #7A5CFF;
  --interrupt-pink: #FF5DA2;
  --paper-cream: #F7F3E8;
  --latency-slate: #2B3648;
  --warning-amber: #FFC857;
  --progress: 0;
  --scene: 0;
  --display-font: "Space Grotesk", "Space", "Arial Narrow", system-ui, sans-serif;
  --body-font: "Newsreader", "Lora", Georgia, serif;
  --tech-font: "Recursive", "SFMono-Regular", Consolas, monospace;
}

/* Design compliance lexicon: Interaction favors path-draw SVG. Interrupt pink: **#FF5DA2** for conflicts. Space Grotesk appears as separated glyphs. Space Grotesk** for large titles and scene labels because its geometric forms feel engineered without becoming sterile. Secondary narrative/body: **Newsreader** for short explanatory fragments. */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--paper-cream);
  background:
    radial-gradient(circle at 18% 16%, rgba(0, 240, 181, .12), transparent 24vw),
    radial-gradient(circle at 78% 46%, rgba(122, 92, 255, .11), transparent 28vw),
    linear-gradient(180deg, #071013 0%, #081115 46%, #05090b 100%);
  font-family: var(--body-font);
  overflow-x: hidden;
}

.reactor-shell { position: relative; min-height: 500vh; isolation: isolate; }

.reactor-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(247, 243, 232, .04) 1px, transparent 1px),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(43, 54, 72, .18) 32px);
  background-size: 9.5vw 100%, 100% 64px;
  mask-image: radial-gradient(ellipse at center, black 8%, transparent 78%);
  z-index: 0;
}

main { position: relative; z-index: 2; }

.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(24px, 8vw) 1.15fr .85fr minmax(24px, 7vw);
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(247, 243, 232, .07);
}

.scene::after {
  content: attr(id);
  position: absolute;
  right: 4vw;
  top: 12vh;
  font-family: var(--tech-font);
  color: rgba(247, 243, 232, .08);
  font-size: clamp(4rem, 15vw, 14rem);
  letter-spacing: -.08em;
  text-transform: uppercase;
}

.trace-scrubber {
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: 10px;
  padding-left: 16px;
  font-family: var(--tech-font);
}

.trace-scrubber::before, .scrub-progress {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(247, 243, 232, .12);
}

.scrub-progress {
  height: calc(var(--progress) * 100%);
  background: linear-gradient(var(--event-mint), var(--scheduler-violet), var(--interrupt-pink));
  box-shadow: 0 0 16px rgba(0, 240, 181, .8);
}

.scrub-job {
  color: rgba(247, 243, 232, .46);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color .25s ease, transform .25s ease;
}

.scrub-job span { display: block; color: var(--latency-slate); font-size: 9px; margin-bottom: 2px; }
.scrub-job.active { color: var(--event-mint); transform: translateX(6px); }

.tick-ruler { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.tick-ruler span {
  position: absolute;
  left: var(--x);
  top: 50%;
  height: var(--h);
  width: 1px;
  transform: translateY(-50%);
  background: linear-gradient(transparent, rgba(247, 243, 232, .35), transparent);
  animation: tickBlink 3.4s calc(var(--x) * -1) infinite;
}

@keyframes tickBlink { 0%, 100% { opacity: .18; } 45% { opacity: .8; } }

.queue-envelopes {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  color: rgba(247, 243, 232, .24);
  font-family: var(--tech-font);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.queue {
  position: absolute;
  display: block;
  min-width: 132px;
  padding: 9px 12px;
  border: 1px solid rgba(43, 54, 72, .84);
  background: linear-gradient(90deg, rgba(43, 54, 72, .26), rgba(7, 16, 19, .02));
  box-shadow: inset 0 0 22px rgba(43, 54, 72, .36);
  opacity: calc(.2 + var(--progress) * .55);
  transform: translateX(calc(var(--progress) * -80px));
}

.q1 { left: 24%; top: 18%; }
.q2 { left: 64%; top: 29%; }
.q3 { left: 38%; bottom: 17%; }
.q4 { right: 7%; bottom: 32%; border-color: rgba(255, 200, 87, .26); color: rgba(255, 200, 87, .42); }

.time-loom {
  position: fixed;
  left: -8vw;
  top: 50%;
  width: 116vw;
  height: 58vh;
  transform: translateY(-50%) translateX(calc(var(--progress) * -8vw));
  z-index: 1;
  opacity: .82;
  pointer-events: none;
}

.loom-path, .race-path {
  fill: none;
  stroke-linecap: round;
  stroke-width: 3;
  stroke: url(#trailGradient);
  filter: url(#glow);
  stroke-dasharray: 1250;
  stroke-dashoffset: calc(1250 - (var(--progress) * 1250));
}
.path-b { stroke-width: 2; opacity: .65; }
.path-c { stroke: var(--scheduler-violet); opacity: .52; }
.path-d { stroke: rgba(247, 243, 232, .35); stroke-width: 1.5; }
.race-path { stroke: url(#raceGradient); opacity: calc(.15 + var(--progress) * .7); stroke-width: 2.4; }
.race-path.second { stroke-dasharray: 1000; }

.scene-copy { grid-column: 2 / 4; max-width: 1120px; }
.technical, .scene-label em {
  font-family: var(--tech-font);
  color: var(--event-mint);
  letter-spacing: .13em;
  text-transform: uppercase;
  font-style: normal;
  font-size: 12px;
}

.wordmark {
  margin: 0;
  font-family: var(--display-font);
  font-size: clamp(3rem, 11vw, 10.5rem);
  line-height: .82;
  letter-spacing: -.08em;
  font-weight: 800;
}

.wordmark span {
  display: inline-block;
  transform: translateY(calc((1 - var(--progress)) * 22px));
  color: var(--paper-cream);
  text-shadow: 0 0 22px rgba(0, 240, 181, .22);
  animation: glyphWait 2.2s infinite alternate;
  animation-delay: calc(var(--i, 0) * .05s);
}

@keyframes glyphWait { from { opacity: .68; } to { opacity: 1; } }

.lab-note {
  max-width: 560px;
  font-size: clamp(1.1rem, 2vw, 1.65rem);
  line-height: 1.25;
  color: rgba(247, 243, 232, .78);
}

.boot-stage { grid-column: 3; justify-self: center; display: grid; gap: 34px; place-items: center; }
.sim-control {
  border: 1px solid rgba(0, 240, 181, .55);
  background: rgba(0, 240, 181, .07);
  color: var(--event-mint);
  font-family: var(--tech-font);
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: 14px 18px;
  cursor: pointer;
  box-shadow: 0 0 26px rgba(0, 240, 181, .16), inset 0 0 18px rgba(0, 240, 181, .08);
}
.sim-control.ghost { grid-column: 3; justify-self: start; }

.clock-dial { width: 220px; aspect-ratio: 1; border: 1px solid rgba(247, 243, 232, .18); border-radius: 50%; position: relative; }
.clock-dial span { position: absolute; inset: 20%; border: 1px solid rgba(122, 92, 255, .32); border-radius: 50%; animation: rotate 12s linear infinite; }
.clock-dial span:nth-child(2) { inset: 34%; border-color: rgba(0, 240, 181, .38); animation-duration: 8s; }
.clock-dial span:nth-child(3) { inset: 48%; border-color: rgba(255, 200, 87, .42); animation-duration: 5s; }
.clock-dial span:nth-child(4) { inset: 0; border-top-color: var(--event-mint); border-left-color: transparent; animation-duration: 3s; }
@keyframes rotate { to { transform: rotate(360deg); } }

.glass-annotation {
  max-width: 210px;
  color: rgba(247, 243, 232, .45);
  font-family: var(--tech-font);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-left: 1px solid var(--event-mint);
  padding-left: 12px;
}

.scene-label { grid-column: 2; align-self: start; margin-top: 18vh; position: relative; z-index: 3; }
.scene-label span { display: block; font-family: var(--display-font); font-size: clamp(4rem, 12vw, 12rem); font-weight: 800; letter-spacing: -.08em; }

.lane-field { grid-column: 2 / 4; height: 48vh; position: relative; }
.lane { position: absolute; left: 8%; right: 2%; height: 2px; background: linear-gradient(90deg, transparent, var(--scheduler-violet), transparent); }
.lane-one { top: 22%; transform: skewY(-4deg); }
.lane-two { top: 48%; transform: skewY(3deg); }
.lane-three { top: 70%; transform: skewY(-2deg); }
.lane i { position: absolute; left: 25%; top: -18px; width: 76px; height: 36px; border: 1px solid rgba(247, 243, 232, .18); border-radius: 30px; background: rgba(43, 54, 72, .35); }
.lane i::after { content: ""; position: absolute; inset: 10px 14px; border-top: 1px solid rgba(247, 243, 232, .24); }
.bead, .race-bead {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--event-mint);
  box-shadow: 0 0 18px var(--event-mint), 0 0 42px rgba(0, 240, 181, .45);
  cursor: pointer;
}
.bead { top: -9px; left: calc(18% + var(--progress) * 48%); animation: pulse 1.8s infinite; }
.lane-two .bead { background: var(--scheduler-violet); box-shadow: 0 0 18px var(--scheduler-violet); animation-delay: .4s; }
.lane-three .bead { background: var(--paper-cream); box-shadow: 0 0 16px var(--paper-cream); animation-delay: .8s; }
@keyframes pulse { 50% { transform: scale(1.35); } }

.semaphore {
  position: absolute;
  font-family: var(--tech-font);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--paper-cream);
  padding: 10px 12px;
  border: 1px solid rgba(122, 92, 255, .42);
  background: rgba(7, 16, 19, .62);
  box-shadow: 0 0 20px rgba(122, 92, 255, .2);
  transform: rotate(-3deg);
}

.paddle-a { left: 43%; top: 32%; color: var(--scheduler-violet); }
.paddle-b { right: 10%; top: 64%; color: var(--event-mint); border-color: rgba(0, 240, 181, .38); }

.side { grid-column: 3; align-self: end; margin-bottom: 12vh; position: relative; z-index: 4; }

.mutex-ring {
  grid-column: 2 / 4;
  justify-self: center;
  width: min(42vw, 430px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--warning-amber);
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 0 0 46px rgba(255, 200, 87, .28), inset 0 0 50px rgba(255, 93, 162, .08);
  animation: lockTension .82s infinite alternate;
  cursor: pointer;
}
.lock-core { font-family: var(--tech-font); color: var(--warning-amber); text-transform: uppercase; }
.collision-stamp { position: absolute; right: -38px; top: 24%; font-family: var(--tech-font); color: var(--interrupt-pink); border: 1px solid var(--interrupt-pink); padding: 8px; transform: rotate(-7deg); }
.owner-tag { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); font-family: var(--tech-font); font-size: 10px; color: rgba(247, 243, 232, .48); letter-spacing: .12em; white-space: nowrap; }
@keyframes lockTension { to { transform: scale(1.018) rotate(1deg); border-color: var(--interrupt-pink); } }
.race-bead { top: 50%; z-index: 5; background: var(--interrupt-pink); box-shadow: 0 0 18px var(--interrupt-pink); }
.race-bead.left { left: calc(18% + var(--progress) * 22%); animation: jitter .18s infinite; }
.race-bead.right { right: calc(18% + var(--progress) * 18%); animation: jitter .21s infinite reverse; }
@keyframes jitter { 50% { transform: translate(4px, -2px); } }

.constellation { grid-column: 2 / 4; justify-self: center; width: min(70vw, 560px); aspect-ratio: 1; position: relative; }
.constellation svg { width: 100%; height: 100%; overflow: visible; }
.constellation path { fill: none; stroke: var(--warning-amber); stroke-width: 1.5; stroke-dasharray: 8 12; filter: drop-shadow(0 0 8px rgba(255, 200, 87, .6)); animation: orbitDash 12s linear infinite; }
@keyframes orbitDash { to { stroke-dashoffset: -200; } }
.node { position: absolute; width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 200, 87, .1); border: 1px solid var(--warning-amber); display: grid; place-items: center; font-family: var(--tech-font); box-shadow: 0 0 28px rgba(255, 200, 87, .34); }
.n1 { left: 45%; top: 2%; } .n2 { right: 2%; top: 45%; } .n3 { left: 45%; bottom: 2%; } .n4 { left: 2%; top: 45%; }
.knot-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-5deg); color: var(--warning-amber); font-family: var(--tech-font); font-size: 11px; text-transform: uppercase; letter-spacing: .16em; border: 1px solid rgba(255, 200, 87, .45); padding: 9px 11px; background: rgba(7, 16, 19, .78); }
.dead-note { position: absolute; left: 9vw; bottom: 10vh; }
.deadlock { background: radial-gradient(circle at center, rgba(255, 200, 87, .09), transparent 34vw); }

.resolve-board { grid-column: 2 / 4; display: grid; grid-template-columns: 300px 1fr; gap: 7vw; align-items: center; }
.token-wheel { width: 250px; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(0, 240, 181, .35); position: relative; animation: rotate 9s linear infinite; }
.token-wheel span { position: absolute; width: 28px; height: 28px; border-radius: 50%; background: var(--event-mint); box-shadow: 0 0 22px var(--event-mint); }
.token-wheel span:nth-child(1) { left: 50%; top: -14px; } .token-wheel span:nth-child(2) { right: 8px; bottom: 38px; background: var(--scheduler-violet); box-shadow: 0 0 22px var(--scheduler-violet); } .token-wheel span:nth-child(3) { left: 8px; bottom: 38px; background: var(--paper-cream); box-shadow: 0 0 22px var(--paper-cream); }
.clean-trace { display: grid; gap: 18px; }
.clean-trace i { display: block; height: 3px; background: linear-gradient(90deg, var(--paper-cream), var(--event-mint), transparent); box-shadow: 0 0 18px rgba(247, 243, 232, .38); transform-origin: left; animation: traceGrow 2.6s infinite alternate; }
.clean-trace i:nth-child(2) { width: 86%; animation-delay: .2s; } .clean-trace i:nth-child(3) { width: 73%; animation-delay: .4s; } .clean-trace i:nth-child(4) { width: 92%; animation-delay: .6s; } .clean-trace i:nth-child(5) { width: 64%; animation-delay: .8s; }
@keyframes traceGrow { from { transform: scaleX(.35); opacity: .35; } to { transform: scaleX(1); opacity: 1; } }

.event-layer { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.flying-event { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--event-mint); box-shadow: 0 0 16px var(--event-mint); transform: translate(-50%, -50%); }
.inspection-card {
  position: fixed;
  left: -999px;
  top: -999px;
  z-index: 30;
  padding: 10px 12px;
  border: 1px solid rgba(247, 243, 232, .22);
  background: rgba(7, 16, 19, .9);
  color: var(--paper-cream);
  font-family: var(--tech-font);
  font-size: 11px;
  box-shadow: 0 0 24px rgba(0, 240, 181, .14);
  pointer-events: none;
}

@media (max-width: 760px) {
  .trace-scrubber { left: 10px; }
  .scene { grid-template-columns: 42px 1fr 28px; padding: 10vh 0; }
  .scene-copy, .scene-label, .lane-field, .mutex-ring, .constellation, .resolve-board, .side, .sim-control.ghost { grid-column: 2; }
  .boot-stage { grid-column: 2; justify-self: start; }
  .resolve-board { grid-template-columns: 1fr; }
  .collision-stamp { right: 0; }
}