:root {
  /* Design typography terms: IBM Plex Mono** for timestamps IBM Plex Sans** for readable technical narration. Space Grotesk** for futuristic clarity with enough warmth to keep the humor alive. */
  --charcoal: #151716;
  --olive: #5E6653;
  --amber: #C58B43;
  --green: #8FAE89;
  --teal: #3E7370;
  --bone: #D8CEB8;
  --ember: #F06A3A;
  --display: "Archivo Black", sans-serif;
  --heading: "Space Grotesk", sans-serif;
  --body: "IBM Plex Sans", sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--charcoal);
  color: var(--bone);
  font-family: var(--body);
  overflow-x: hidden;
}

#simCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: radial-gradient(circle at 72% 20%, rgba(62,115,112,.22), transparent 32%), var(--charcoal);
}

.film-grain {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .16;
  background-image: repeating-radial-gradient(circle at 18% 27%, rgba(216,206,184,.18) 0 1px, transparent 1px 4px), repeating-linear-gradient(97deg, transparent 0 9px, rgba(197,139,67,.06) 10px 11px);
  mix-blend-mode: screen;
}

.sprocket {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 34px;
  z-index: 4;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(216,206,184,.45) 0 18px, transparent 18px 42px);
  opacity: .18;
}

.sprocket-left { left: 12px; }
.sprocket-right { right: 12px; }

.global-flare {
  position: fixed;
  left: -30vw;
  top: 26vh;
  width: 160vw;
  height: 4px;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: rotate(-13deg) translateX(-20vw);
  background: linear-gradient(90deg, transparent, rgba(240,106,58,.1), #F06A3A, rgba(216,206,184,.8), rgba(197,139,67,.28), transparent);
  filter: blur(.4px) drop-shadow(0 0 18px #F06A3A);
  transition: opacity .5s ease, transform .9s ease;
}

.global-flare.fire {
  opacity: .85;
  transform: rotate(-13deg) translateX(24vw);
}

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

.chapter {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 9vh 8vw;
  isolation: isolate;
  overflow: hidden;
}

.chapter::before {
  content: "";
  position: absolute;
  inset: -18vh -12vw;
  z-index: -1;
  clip-path: polygon(0 23%, 100% 0, 100% 72%, 0 95%);
  background: linear-gradient(113deg, rgba(94,102,83,.28), rgba(21,23,22,.15) 42%, rgba(62,115,112,.2));
  border-top: 1px solid rgba(216,206,184,.14);
  border-bottom: 1px solid rgba(216,206,184,.1);
}

.boot::before { transform: translateY(-5vh) rotate(-1deg); }
.wobble::before { clip-path: polygon(0 8%, 100% 28%, 100% 100%, 0 74%); background: linear-gradient(100deg, rgba(62,115,112,.26), rgba(21,23,22,.3), rgba(197,139,67,.14)); }
.overcorrect::before { clip-path: polygon(0 28%, 100% 5%, 100% 78%, 0 100%); background: linear-gradient(108deg, rgba(197,139,67,.2), rgba(21,23,22,.34), rgba(240,106,58,.1)); }
.loop::before { clip-path: polygon(0 0, 100% 22%, 100% 90%, 0 67%); background: linear-gradient(116deg, rgba(94,102,83,.32), rgba(62,115,112,.18)); }
.grace::before { clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 82%); background: linear-gradient(111deg, rgba(143,174,137,.15), rgba(21,23,22,.2), rgba(197,139,67,.2)); }

.run-index {
  position: fixed;
  right: 3.2vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.run-link {
  font-family: var(--mono);
  color: rgba(216,206,184,.52);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .16em;
  padding: 7px 4px;
  border-right: 1px solid rgba(216,206,184,.24);
  transition: color .25s ease, border-color .25s ease, transform .25s ease;
}

.run-link.active {
  color: var(--ember);
  border-color: var(--ember);
  transform: translateX(-7px);
}

.diagonal-plane {
  position: relative;
  width: min(980px, 82vw);
  padding: clamp(34px, 5vw, 76px);
  background: rgba(21,23,22,.78);
  border: 1px solid rgba(216,206,184,.22);
  box-shadow: 0 34px 90px rgba(0,0,0,.42), inset 0 0 42px rgba(143,174,137,.05);
  clip-path: polygon(7% 0, 100% 0, 92% 100%, 0 100%);
  transform: skewY(-4deg);
}

.diagonal-plane > * { transform: skewY(4deg); }

.scan-pane::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  background: conic-gradient(from var(--scan-angle, 0deg), transparent, transparent 28%, #F06A3A 31%, #D8CEB8 33%, transparent 38%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: scanSpin 5.4s linear infinite;
  pointer-events: none;
}

@property --scan-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes scanSpin { to { --scan-angle: 360deg; } }

.kicker, .edge-label, .chapter-mark, .stamp-row, .calibration-grid, .calibration-strip, .closing-code {
  font-family: var(--mono);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.kicker {
  color: var(--green);
  font-size: 12px;
  margin: 0 0 18px;
}

.hero-plane {
  margin-left: -18vw;
  width: min(1180px, 105vw);
  min-height: 58vh;
}

.hero-title {
  font-family: var(--display);
  line-height: .77;
  font-size: clamp(74px, 14vw, 210px);
  letter-spacing: -.085em;
  margin: 0 0 28px;
  color: var(--bone);
  text-shadow: 9px 0 0 rgba(197,139,67,.26), -5px 0 0 rgba(62,115,112,.35);
  clip-path: polygon(0 0, 100% 0, 92% 44%, 100% 49%, 100% 100%, 0 100%, 8% 56%, 0 50%);
}

.hero-title span { display: block; }

.hero-copy, .story-plane p, .wide-plane p, .finale-plane p {
  font-size: clamp(17px, 1.6vw, 23px);
  line-height: 1.55;
  max-width: 680px;
  color: rgba(216,206,184,.82);
}

h2 {
  font-family: var(--heading);
  font-size: clamp(42px, 6.8vw, 104px);
  line-height: .9;
  letter-spacing: -.055em;
  margin: 0 0 24px;
  color: var(--bone);
}

.control-button {
  margin-top: 22px;
  border: 1px solid var(--amber);
  color: var(--bone);
  background: linear-gradient(90deg, rgba(197,139,67,.14), rgba(240,106,58,.06));
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: 15px 22px;
  cursor: pointer;
  box-shadow: inset 0 0 18px rgba(197,139,67,.12);
  transition: transform .2s ease, border-color .2s ease, color .2s ease;
}

.control-button:hover { transform: translate(7px, -3px) skewX(-8deg); border-color: var(--ember); color: var(--ember); }

.edge-label {
  position: absolute;
  font-size: 11px;
  color: rgba(216,206,184,.48);
  border: 1px solid rgba(216,206,184,.16);
  padding: 8px 10px;
}
.top-left { top: 5vh; left: 7vw; }
.bottom-right { bottom: 7vh; right: 10vw; }

.calibration-strip {
  position: absolute;
  top: 16px;
  right: 46px;
  writing-mode: vertical-rl;
  font-size: 10px;
  color: rgba(197,139,67,.7);
}

.chapter-mark {
  position: absolute;
  top: 9vh;
  left: 9vw;
  color: var(--amber);
  font-size: 13px;
}

.story-plane { width: min(880px, 76vw); }
.left-cut { justify-self: start; margin-left: 4vw; }
.right-cut { justify-self: end; margin-right: 4vw; clip-path: polygon(0 0, 93% 0, 100% 100%, 9% 100%); }
.wide-plane { width: min(1120px, 86vw); text-align: center; }
.finale-plane { width: min(1040px, 84vw); }

.stamp-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
  font-size: 11px;
}
.stamp-row span, .calibration-grid span {
  color: rgba(216,206,184,.72);
  border: 1px solid rgba(143,174,137,.25);
  padding: 8px 10px;
  background: rgba(94,102,83,.16);
}

.reticle-field {
  position: absolute;
  right: 9vw;
  top: 16vh;
  width: 34vw;
  aspect-ratio: 1;
  opacity: .48;
  animation: driftSpin 18s linear infinite;
}
.reticle-field span, .loop-rings span {
  position: absolute;
  inset: var(--ring, 0);
  border: 1px dashed rgba(143,174,137,.45);
  border-radius: 50%;
}
.reticle-field span:nth-child(2) { --ring: 18%; border-color: rgba(197,139,67,.45); }
.reticle-field span:nth-child(3) { --ring: 38%; border-style: solid; border-color: rgba(216,206,184,.26); }
@keyframes driftSpin { to { transform: rotate(360deg); } }

.dummy-constellation {
  position: absolute;
  right: 14vw;
  bottom: 16vh;
  width: 230px;
  height: 330px;
  transform: rotate(-8deg);
  filter: drop-shadow(0 0 16px rgba(143,174,137,.22));
  animation: dummyWobble 3.8s ease-in-out infinite;
}
.dummy-constellation i { position: absolute; display: block; background: var(--green); opacity: .78; }
.head { width: 58px; height: 58px; border-radius: 50%; left: 88px; top: 0; box-shadow: 0 0 0 12px rgba(143,174,137,.08); }
.torso { width: 18px; height: 118px; left: 108px; top: 66px; transform: rotate(7deg); transform-origin: top; }
.arm, .leg { height: 12px; transform-origin: 0 50%; }
.arm-a { width: 122px; left: 112px; top: 94px; transform: rotate(27deg); }
.arm-b { width: 112px; left: 111px; top: 104px; transform: rotate(154deg); }
.leg-a { width: 132px; left: 116px; top: 180px; transform: rotate(72deg); }
.leg-b { width: 122px; left: 111px; top: 181px; transform: rotate(124deg); }
@keyframes dummyWobble { 0%,100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-18px); } }

.trajectory {
  position: absolute;
  inset: auto 4vw 8vh 12vw;
  width: 72vw;
  height: 40vh;
  overflow: visible;
}
.trajectory path {
  fill: none;
  stroke: var(--amber);
  stroke-width: 2;
  stroke-dasharray: 6 16;
  opacity: .65;
  animation: skid 7s linear infinite;
}
.trajectory path:nth-child(2) { stroke: var(--teal); animation-duration: 9s; }
@keyframes skid { to { stroke-dashoffset: -220; } }

.split-slash {
  position: absolute;
  inset: 10vh 38vw 5vh auto;
  width: 18vw;
  transform: skewX(-17deg);
  background: repeating-linear-gradient(to bottom, rgba(240,106,58,.2) 0 2px, transparent 2px 13px);
  opacity: .6;
}

.instrument-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
  font-family: var(--mono);
  color: var(--amber);
  font-size: 12px;
  letter-spacing: .14em;
}
.instrument-bar em { height: 2px; background: linear-gradient(90deg, var(--amber), var(--ember), transparent); animation: pulseLine 1.4s ease-in-out infinite alternate; }
@keyframes pulseLine { from { opacity: .28; } to { opacity: 1; } }

.warning-triangle {
  position: absolute;
  left: 12vw;
  bottom: 18vh;
  width: 130px;
  height: 116px;
  display: grid;
  place-items: center;
  font: 700 62px var(--heading);
  color: var(--ember);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  border: 1px solid var(--ember);
  background: rgba(240,106,58,.07);
  animation: warningJolt 2.2s steps(2) infinite;
}
@keyframes warningJolt { 50% { transform: translate(9px, -5px) rotate(3deg); } }

.flare-incident {
  position: absolute;
  right: -12vw;
  top: 23vh;
  width: 70vw;
  height: 5px;
  transform: rotate(-18deg);
  background: linear-gradient(90deg, transparent, #F06A3A, #D8CEB8, transparent);
  filter: blur(.6px) drop-shadow(0 0 34px #F06A3A);
  opacity: .72;
}

.loop-rings {
  position: absolute;
  width: min(640px, 58vw);
  aspect-ratio: 1;
  left: 8vw;
  bottom: -12vh;
  animation: driftSpin 26s linear infinite reverse;
  opacity: .38;
}
.loop-rings span:nth-child(1) { --ring: 0; }
.loop-rings span:nth-child(2) { --ring: 14%; border-color: rgba(197,139,67,.46); }
.loop-rings span:nth-child(3) { --ring: 28%; border-color: rgba(62,115,112,.6); }
.loop-rings span:nth-child(4) { --ring: 43%; border-style: solid; border-color: rgba(216,206,184,.24); }

.calibration-grid {
  position: absolute;
  right: 8vw;
  bottom: 9vh;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px;
  font-size: 10px;
}

.final-sun {
  position: absolute;
  right: 16vw;
  top: 19vh;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,106,58,.95), rgba(197,139,67,.35) 24%, transparent 68%);
  filter: blur(2px) drop-shadow(0 0 70px #F06A3A);
  opacity: .82;
}

.closing-code {
  position: absolute;
  bottom: 6vh;
  left: 8vw;
  color: rgba(216,206,184,.5);
  font-size: 11px;
}

.chapter .diagonal-plane { opacity: .72; transition: opacity .6s ease, transform .6s ease; }
.chapter.active .diagonal-plane { opacity: 1; transform: skewY(-4deg) translateY(-8px); }

@media (max-width: 760px) {
  .chapter { padding: 8vh 6vw; place-items: start center; }
  .run-index { right: 1vw; }
  .hero-plane { margin-left: -10vw; }
  .diagonal-plane { width: 92vw; padding: 32px 28px; }
  .dummy-constellation, .warning-triangle, .calibration-grid { opacity: .34; transform: scale(.72); }
  .chapter-mark { left: 6vw; }
}