:root {
  --deep-midnight: #0a0e27;
  --midnight-core: #141b3d;
  --royal-cobalt: #2a3f8f;
  --pop-gold: #d4a946;
  --electric-cyan: #4ecdc4;
  --comic-white: #e8e6f0;
  --silver-white: #c8cad8;
  --signal-red: #e63946;
  --ink-black: #0d0d0d;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  background: var(--deep-midnight);
}

body {
  margin: 0;
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  font-weight: 400;
  color: var(--silver-white);
  background: var(--deep-midnight);
  overflow-x: hidden;
}

body.is-glitching .act.in-view .panel { animation: glitch-panel 300ms steps(2, end); }
body.is-glitching .glitch-flash { opacity: 1; animation: glitch-flash 300ms steps(2, end); }

.comic-nav {
  position: fixed;
  z-index: 50;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 10px;
}

.nav-thumb {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink-black);
  background-color: var(--pop-gold);
  background-image: radial-gradient(circle, #0a0e2740 2px, transparent 2px);
  background-size: 9px 9px;
  border: 4px solid var(--ink-black);
  box-shadow: 5px 5px 0 var(--ink-black);
  transform-origin: right center;
  transition: width 420ms cubic-bezier(.17,1.55,.42,1), height 420ms cubic-bezier(.17,1.55,.42,1), transform 250ms, background-color 250ms;
}

.nav-thumb:nth-child(even) { background-color: var(--electric-cyan); transform: rotate(2deg); }
.nav-thumb:nth-child(odd) { transform: rotate(-2deg); }
.nav-thumb.active { background-color: var(--signal-red); color: var(--comic-white); }
.nav-thumb:hover { width: 120px; height: 120px; transform: rotate(0deg) translateX(-4px); }
.nav-thumb span { font: 700 1rem/1 "JetBrains Mono", monospace; }
.nav-thumb b {
  position: absolute;
  bottom: 12px;
  left: 10px;
  opacity: 0;
  font-family: "Caveat", cursive;
  font-size: 1.7rem;
  color: var(--ink-black);
  transition: opacity 180ms;
}
.nav-thumb:hover b { opacity: 1; }

.act {
  min-height: 100vh;
  height: 100vh;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 70px) 96px clamp(24px, 5vw, 70px) clamp(24px, 5vw, 70px);
  isolation: isolate;
  background-color: var(--deep-midnight);
}

.act::before {
  content: "";
  position: absolute;
  inset: 18px 84px 18px 18px;
  border: 5px solid var(--ink-black);
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 0 8px #e8e6f008, 10px 10px 0 #0d0d0d90;
}

.dot-plane {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--deep-midnight);
  background-image: radial-gradient(circle, #d4a94620 2px, transparent 2.5px), radial-gradient(circle, #4ecdc418 1.5px, transparent 2px);
  background-size: 12px 12px, 28px 28px;
  background-position: 0 0, 8px 10px;
  animation: dot-drift 30s linear infinite;
}

.act-two .dot-plane { background-image: radial-gradient(circle, #e639462b 2px, transparent 2.5px); background-size: 10px 10px; animation-direction: reverse; }
.act-three .dot-plane { background-image: radial-gradient(circle, #d4a94633 2px, transparent 2.5px), radial-gradient(circle, #2a3f8f55 3px, transparent 3.5px); background-size: 13px 13px, 34px 34px; }
.act-four .dot-plane { background-image: radial-gradient(circle, #4ecdc42b 2px, transparent 2.5px); background-size: 11px 11px; animation-duration: 36s; }
.act-five .dot-plane { background-image: radial-gradient(circle, #e6394640 2px, transparent 2.5px), radial-gradient(circle, #e8e6f018 1px, transparent 1.5px); background-size: 9px 9px, 22px 22px; }
.act-six .dot-plane { background-image: radial-gradient(circle, #d4a94640 2px, transparent 2.5px), radial-gradient(circle, #4ecdc430 2px, transparent 2.5px); background-size: 12px 12px, 18px 18px; animation-direction: reverse; }

.comic-grid {
  position: relative;
  z-index: 4;
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  background: var(--ink-black);
  padding: 3px;
  transform: translateY(8px);
}

.panel {
  position: relative;
  min-height: 220px;
  padding: clamp(20px, 3vw, 40px);
  color: var(--silver-white);
  background-color: var(--midnight-core);
  background-image: radial-gradient(circle, #d4a94620 2px, transparent 2.5px);
  background-size: 14px 14px;
  border: 4px solid var(--ink-black);
  box-shadow: 8px 8px 0 var(--ink-black);
  transform: rotate(var(--panel-rotate, 0deg)) translateY(20px);
  opacity: 0;
  transition: border-color 250ms, box-shadow 250ms, transform 250ms, opacity 500ms;
}

.act.revealed .panel { opacity: 1; transform: rotate(var(--panel-rotate, 0deg)) translateY(0); }
.act.revealed .panel:nth-child(2) { transition-delay: 100ms; }
.act.revealed .panel:nth-child(3) { transition-delay: 200ms; }
.panel:hover { border-color: var(--royal-cobalt); box-shadow: 0 8px 24px #0a0e2780, 8px 8px 0 var(--ink-black); transform: rotate(var(--panel-rotate, 0deg)) translateY(-2px); }
.panel.pop { animation: panel-pop 180ms ease-out; }
.panel.pop ~ .bubble, .bubble.wobble { animation: bubble-wobble 260ms ease-out; }

.hero-panel { grid-column: 1 / span 4; min-height: 440px; background-color: var(--midnight-core); }
.side-panel { grid-column: 5 / span 2; align-self: end; min-height: 350px; background-color: var(--comic-white); color: var(--ink-black); }
.split-grid .red-panel { grid-column: 1 / span 3; background-color: var(--signal-red); color: var(--comic-white); }
.split-grid .cyan-panel { grid-column: 4 / span 3; background-color: var(--midnight-core); }
.split-grid .mini-panel { grid-column: 2 / span 3; background-color: var(--comic-white); color: var(--ink-black); transform: translate(16px, 20px) rotate(var(--panel-rotate)); }
.lock-grid .gold-panel { grid-column: 1 / span 4; background-color: var(--pop-gold); color: var(--ink-black); }
.lock-grid .dark-panel { grid-column: 4 / span 3; background-color: var(--midnight-core); transform: translate(12px, 20px) rotate(var(--panel-rotate)); }
.queue-grid .white-panel { grid-column: 1 / span 3; background-color: var(--comic-white); color: var(--ink-black); }
.queue-grid .cobalt-panel { grid-column: 4 / span 3; background-color: var(--royal-cobalt); color: var(--comic-white); }
.dead-grid .red-panel { grid-column: 1 / span 3; background-color: var(--signal-red); color: var(--comic-white); }
.dead-grid .dark-panel { grid-column: 3 / span 4; background-color: var(--midnight-core); transform: translate(16px, 20px) rotate(var(--panel-rotate)); }
.finale-grid .finale { grid-column: 1 / span 6; min-height: 460px; text-align: center; display: grid; align-content: center; }

.label {
  display: inline-block;
  margin-bottom: 18px;
  font: 700 .85rem/1 "JetBrains Mono", monospace;
  color: var(--electric-cyan);
  background: #0a0e2715;
  padding: 6px 9px;
  border: 3px solid var(--ink-black);
  letter-spacing: .08em;
}

h1, h2 {
  margin: 0 0 18px;
  font-family: "Permanent Marker", Impact, fantasy;
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--pop-gold);
  text-shadow: 3px 3px 0 #000000;
}

.red-panel h2, .gold-panel h2, .side-panel h2, .white-panel h2 { color: var(--comic-white); }
.gold-panel h2, .white-panel h2, .side-panel h2 { color: var(--signal-red); }
.finale h2 { color: var(--pop-gold); }
h3 { margin: 0 0 14px; font-family: "Caveat", cursive; font-size: clamp(1.8rem, 4vw, 3.2rem); color: var(--comic-white); text-shadow: 0 0 12px #3a5fcd40; }
.white-panel h3, .side-panel h3, .mini-panel h3 { color: var(--royal-cobalt); }
p, li { font-size: clamp(1rem, 1.5vw, 1.24rem); line-height: 1.6; letter-spacing: .01em; }
strong { color: var(--signal-red); }
ul { margin: 0; padding-left: 20px; }
code {
  font-family: "JetBrains Mono", monospace;
  font-size: .9rem;
  color: var(--electric-cyan);
  background: #0a0e2715;
  padding: 2px 6px;
  border-radius: 2px;
}
.code-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.burst {
  display: inline-grid;
  place-items: center;
  width: 145px;
  height: 115px;
  margin-bottom: 18px;
  background: var(--signal-red);
  color: var(--comic-white);
  font-family: "Permanent Marker", fantasy;
  font-size: 2.1rem;
  text-shadow: 3px 3px 0 var(--ink-black);
  clip-path: polygon(50% 0,61% 28%,91% 18%,74% 45%,100% 58%,70% 62%,80% 94%,52% 73%,26% 100%,31% 66%,0 60%,28% 44%,11% 15%,40% 28%);
}

.bubble {
  position: absolute;
  z-index: 7;
  max-width: 360px;
  padding: 18px 24px;
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  line-height: 1;
  color: var(--ink-black);
  background-color: var(--comic-white);
  background-image: radial-gradient(circle, #2a3f8f26 2px, transparent 2.5px);
  background-size: 12px 12px;
  border: 4px solid var(--ink-black);
  border-radius: 24px;
  box-shadow: 7px 7px 0 var(--ink-black);
  opacity: 0;
  transform: scale(0) rotate(-2deg);
  transition: opacity 120ms 420ms, transform 400ms cubic-bezier(.16,1.5,.43,1) 420ms;
}
.bubble::after {
  content: "";
  position: absolute;
  width: 38px;
  height: 38px;
  background: inherit;
  border-right: 4px solid var(--ink-black);
  border-bottom: 4px solid var(--ink-black);
  bottom: -18px;
  transform: rotate(45deg);
}
.bubble-right { right: 120px; bottom: 80px; }
.bubble-right::after { right: 45px; }
.bubble-left { left: 70px; bottom: 76px; }
.bubble-left::after { left: 45px; }
.thought { right: 120px; top: 90px; border-radius: 46px; }
.thought::after { width: 18px; height: 18px; border-radius: 50%; right: 55px; bottom: -24px; }
.act.revealed .bubble { opacity: 1; transform: scale(1) rotate(-2deg); }

.circuit {
  position: absolute;
  inset: 6% 8% 6% 3%;
  z-index: 2;
  width: 88%;
  height: 88%;
  fill: none;
  pointer-events: none;
  opacity: .88;
}
.circuit path {
  stroke: var(--pop-gold);
  stroke-width: 7;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: brightness(1.2) drop-shadow(3px 3px 0 #0d0d0d);
}
.act.revealed .circuit path { animation: trace-draw 2.6s ease-out forwards; }
.act.revealed .circuit path:nth-child(2) { animation-delay: 300ms; }

.thread-field { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: difference; }
.thread-field i {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 6px;
  height: 84%;
  background: var(--electric-cyan);
  border: 2px solid var(--ink-black);
  box-shadow: 4px 0 0 var(--signal-red), -4px 0 0 var(--pop-gold);
  clip-path: inset(0 0 0 0);
  animation: thread-glitch 2.8s steps(3, end) infinite;
}
.fork-field i:nth-child(1) { transform: translateX(-160px); }
.fork-field i:nth-child(2) { transform: translateX(-90px); background: var(--signal-red); animation-delay: -.4s; }
.fork-field i:nth-child(3) { transform: translateX(-20px); background: var(--pop-gold); animation-delay: -.8s; }
.fork-field i:nth-child(4) { transform: translateX(55px); animation-delay: -1.2s; }
.fork-field i:nth-child(5) { transform: translateX(130px); background: var(--royal-cobalt); animation-delay: -1.6s; }
.fork-field i:nth-child(6) { transform: translateX(205px); background: var(--comic-white); animation-delay: -2s; }
.race-field i { transform: rotate(68deg); left: 10%; width: 8px; height: 120%; }
.race-field i:nth-child(2n) { background: var(--signal-red); top: -18%; animation-delay: -.5s; }
.race-field i:nth-child(3n) { background: var(--pop-gold); top: 18%; animation-delay: -1s; }
.mutex-field i { left: 25%; height: 64%; top: 18%; }
.mutex-field i:nth-child(2) { left: 42%; background: var(--pop-gold); }
.mutex-field i:nth-child(3) { left: 59%; background: var(--signal-red); }
.mutex-field i:nth-child(4) { left: 76%; background: var(--electric-cyan); }
.deadlock-field i { left: 50%; top: 50%; height: 38%; transform-origin: top; }
.deadlock-field i:nth-child(1) { transform: rotate(0deg); }
.deadlock-field i:nth-child(2) { transform: rotate(72deg); background: var(--signal-red); }
.deadlock-field i:nth-child(3) { transform: rotate(144deg); background: var(--pop-gold); }
.deadlock-field i:nth-child(4) { transform: rotate(216deg); background: var(--royal-cobalt); }
.deadlock-field i:nth-child(5) { transform: rotate(288deg); background: var(--comic-white); }
.join-field i { top: 18%; height: 68%; }
.join-field i:nth-child(1) { left: 16%; transform: rotate(-26deg); }
.join-field i:nth-child(2) { left: 30%; transform: rotate(-16deg); background: var(--pop-gold); }
.join-field i:nth-child(3) { left: 44%; transform: rotate(-7deg); background: var(--signal-red); }
.join-field i:nth-child(4) { left: 58%; transform: rotate(7deg); background: var(--royal-cobalt); }
.join-field i:nth-child(5) { left: 72%; transform: rotate(16deg); background: var(--comic-white); }
.join-field i:nth-child(6) { left: 86%; transform: rotate(26deg); }

.process-cluster { position: absolute; z-index: 8; left: 7%; top: 14%; display: flex; gap: 14px; }
.process-cluster.left { left: 6%; top: auto; bottom: 11%; }
.process-cluster.finale-dots { left: 50%; top: auto; bottom: 16%; transform: translateX(-50%); }
.process-cluster span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--ink-black);
  box-shadow: 0 0 0 3px #e8e6f020, 0 0 18px currentColor;
  animation: pulse 2s ease-in-out infinite;
}
.run { color: #4ecdc4; background: #4ecdc4; }
.wait { color: #4ecdc4; background: #4ecdc4; animation-delay: -.35s; }
.block { color: #e63946; background: #e63946; animation-delay: -.7s; }
.done { color: #d4a946; background: #d4a946; animation-delay: -1s; }

.lock-emblem {
  position: absolute;
  z-index: 6;
  right: 12%;
  top: 12%;
  width: 142px;
  height: 142px;
  display: grid;
  place-items: center;
  color: var(--ink-black);
  background: var(--pop-gold);
  border: 5px solid var(--ink-black);
  border-radius: 50%;
  font: 400 2.1rem/1 "Permanent Marker", fantasy;
  box-shadow: 8px 8px 0 var(--ink-black);
  transform: rotate(8deg);
}
.lock-emblem::before { content: ""; position: absolute; top: -52px; width: 72px; height: 72px; border: 13px solid var(--ink-black); border-bottom: 0; border-radius: 48px 48px 0 0; }

.queue-rail {
  position: absolute;
  z-index: 3;
  left: 5%;
  right: 10%;
  top: 18%;
  display: flex;
  gap: 18px;
  border: 5px solid var(--ink-black);
  background: var(--comic-white);
  padding: 12px;
  box-shadow: 8px 8px 0 var(--ink-black);
  transform: rotate(-1.5deg);
}
.queue-rail span {
  flex: 1;
  text-align: center;
  font: 700 1rem/1 "JetBrains Mono", monospace;
  color: var(--ink-black);
  background: var(--electric-cyan);
  border: 3px solid var(--ink-black);
  padding: 12px 4px;
  animation: queue-hop 1.8s ease-in-out infinite;
}
.queue-rail span:nth-child(2) { animation-delay: .15s; background: var(--pop-gold); }
.queue-rail span:nth-child(3) { animation-delay: .3s; background: var(--signal-red); color: var(--comic-white); }
.queue-rail span:nth-child(4) { animation-delay: .45s; background: var(--royal-cobalt); color: var(--comic-white); }
.queue-rail span:nth-child(5) { animation-delay: .6s; }

.glitch-flash {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0;
  background: var(--comic-white);
  mix-blend-mode: difference;
}

@keyframes dot-drift { to { background-position: 260px -180px, -180px 220px; } }
@keyframes trace-draw { to { stroke-dashoffset: 0; } }
@keyframes pulse { 0%, 100% { transform: scale(.9); opacity: .62; } 50% { transform: scale(1.45); opacity: 1; } }
@keyframes queue-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes panel-pop { 50% { transform: rotate(var(--panel-rotate, 0deg)) scale(1.02); } }
@keyframes bubble-wobble { 0% { rotate: 0deg; } 35% { rotate: -2deg; } 70% { rotate: 2deg; } 100% { rotate: 0deg; } }
@keyframes thread-glitch {
  0%, 100% { clip-path: inset(0 0 0 0); translate: 0 0; }
  20% { clip-path: inset(12% 0 65% 0); translate: 5px 0; }
  40% { clip-path: inset(40% 0 22% 0); translate: -9px 0; }
  60% { clip-path: inset(72% 0 6% 0); translate: 12px 0; }
  80% { clip-path: inset(4% 0 84% 0); translate: -4px 0; }
}
@keyframes glitch-panel {
  0% { clip-path: inset(0 0 0 0); transform: translateX(0) rotate(var(--panel-rotate)); }
  20% { clip-path: inset(12% 0 62% 0); transform: translateX(12px) rotate(var(--panel-rotate)); mix-blend-mode: difference; }
  40% { clip-path: inset(42% 0 34% 0); transform: translateX(-15px) rotate(var(--panel-rotate)); }
  60% { clip-path: inset(66% 0 12% 0); transform: translateX(8px) rotate(var(--panel-rotate)); }
  80% { clip-path: inset(8% 0 78% 0); transform: translateX(-6px) rotate(var(--panel-rotate)); mix-blend-mode: difference; }
  100% { clip-path: inset(0 0 0 0); transform: translateX(0) rotate(var(--panel-rotate)); }
}
@keyframes glitch-flash {
  0% { clip-path: inset(0 0 82% 0); }
  25% { clip-path: inset(42% 0 38% 0); }
  50% { clip-path: inset(16% 0 62% 0); }
  75% { clip-path: inset(70% 0 8% 0); }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@media (max-width: 860px) {
  .act { padding: 24px 74px 24px 20px; }
  .act::before { inset: 10px 64px 10px 10px; }
  .comic-grid { display: block; background: transparent; padding: 0; }
  .panel { margin: 0 0 18px; min-height: auto; }
  .hero-panel { min-height: auto; }
  .side-panel, .split-grid .mini-panel, .lock-grid .dark-panel, .dead-grid .dark-panel { transform: rotate(var(--panel-rotate)); }
  .bubble { max-width: 260px; font-size: 1.45rem; }
  .bubble-right, .thought { right: 78px; }
  .bubble-left { left: 24px; }
  .queue-rail { top: 8%; right: 76px; }
  .queue-rail span { font-size: .72rem; }
  h1, h2 { font-size: clamp(2.4rem, 12vw, 4rem); }
}