:root {
  --void: #090A12;
  --cyan: #5CF3FF;
  --apricot: #FFB15C;
  --blue: #25304A;
  --magenta: #D94C7A;
  --paper: #D7C7A2;
  --scroll: 0;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--apricot);
  background: var(--void);
  font-family: "Archivo", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,177,92,.06) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 45%, transparent 0 52%, rgba(9,10,18,.45) 82%, rgba(9,10,18,.9) 100%);
  mix-blend-mode: screen;
}

body::after {
  content: "";
  position: fixed;
  inset: 14px;
  z-index: 51;
  pointer-events: none;
  border: 2px solid rgba(215,199,162,.22);
  border-radius: 34px;
  box-shadow: inset 0 0 60px rgba(92,243,255,.12), inset 0 0 160px rgba(9,10,18,.85), 0 0 40px rgba(92,243,255,.08);
}

.crt-shell, .crt-vignette, .sync-flash { position: fixed; inset: 0; pointer-events: none; }
.crt-shell { z-index: 60; }
.crt-vignette { border-radius: 42px; transform: scaleX(.985) scaleY(1.01); box-shadow: inset 0 0 42px rgba(217,76,122,.12); }
.sync-flash { opacity: 0; background: linear-gradient(180deg, transparent 45%, rgba(217,76,122,.35) 49%, rgba(92,243,255,.22) 50%, transparent 56%); }
.sync-flash.flash { animation: syncJump .34s steps(2); }

.status-strip {
  position: fixed;
  left: 28px;
  right: 28px;
  bottom: 22px;
  z-index: 70;
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 8px 12px;
  color: var(--paper);
  background: rgba(37,48,74,.72);
  border: 1px solid rgba(92,243,255,.38);
  font: 600 12px/1 "Chivo Mono", monospace;
  letter-spacing: .06em;
}

.status-strip a { color: var(--cyan); text-decoration: none; }
.status-strip span { margin-left: auto; color: var(--apricot); }

.sim-section {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 20% 15%, rgba(92,243,255,.06), transparent 32%),
    radial-gradient(circle at 80% 70%, rgba(255,177,92,.06), transparent 38%),
    var(--void);
}

.sim-section::before {
  content: attr(data-scene);
  position: absolute;
  left: 42px;
  top: 32px;
  z-index: 5;
  color: rgba(215,199,162,.58);
  font: 600 12px/1 "Chivo Mono", monospace;
  letter-spacing: .18em;
}

.layer, [data-depth] { will-change: transform; }
.stars {
  position: absolute;
  inset: -15%;
  opacity: .82;
  background-image:
    radial-gradient(circle, rgba(92,243,255,.75) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(255,177,92,.55) 0 1px, transparent 1.5px);
  background-size: 92px 92px, 137px 137px;
  background-position: 0 calc(var(--scroll) * .05px), 30px calc(var(--scroll) * -.03px);
}
.stars.sparse { opacity: .48; background-size: 132px 132px, 210px 210px; }
.stars.slow { opacity: .35; }

.particle-face, .pause-particles {
  position: absolute;
  width: 360px;
  height: 260px;
  left: 8vw;
  top: 19vh;
  filter: drop-shadow(0 0 10px rgba(92,243,255,.65));
}
.particle-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px currentColor, 14px 0 18px rgba(255,177,92,.28);
}

.wire-object { position: absolute; right: 6vw; top: 13vh; width: min(44vw, 520px); opacity: .72; }
svg { width: 100%; height: 100%; overflow: visible; }
svg path, svg circle, svg ellipse { fill: none; stroke: var(--cyan); stroke-width: 2.2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(92,243,255,.55)); }
.wire-orbit svg { animation: lopsidedSpin 18s linear infinite; }

.lesson-panel {
  position: relative;
  z-index: 6;
  width: min(760px, calc(100vw - 56px));
  padding: clamp(24px, 4vw, 46px);
  background: linear-gradient(135deg, rgba(37,48,74,.72), rgba(9,10,18,.56));
  border: 1px solid rgba(92,243,255,.46);
  box-shadow: 12px 12px 0 rgba(255,177,92,.12), -8px -8px 0 rgba(92,243,255,.08), inset 0 0 32px rgba(9,10,18,.55);
  backdrop-filter: blur(2px);
  clip-path: polygon(0 0, 96% 0, 100% 8%, 100% 100%, 4% 100%, 0 92%);
}
.boot-panel { margin: 22vh 0 0 13vw; transform: perspective(900px) rotateX(2deg) rotateY(-4deg); }
.module-tag { display: block; color: var(--cyan); font: 600 12px/1.4 "Chivo Mono", monospace; letter-spacing: .16em; margin-bottom: 16px; }
h1, h2 { margin: 0; font-family: "Space Grotesk", sans-serif; font-weight: 700; text-transform: uppercase; }
h1 { font-size: clamp(58px, 12vw, 166px); line-height: .82; letter-spacing: -.08em; text-shadow: 3px 0 var(--cyan), -3px 0 var(--magenta), 0 0 28px rgba(255,177,92,.34); }
h2 { font-size: clamp(34px, 6vw, 76px); line-height: .92; letter-spacing: -.05em; color: var(--apricot); }
p { font-size: clamp(17px, 2vw, 24px); line-height: 1.45; max-width: 650px; }
.dot, mark, .error { color: var(--magenta); }
mark { background: rgba(217,76,122,.16); padding: 7px 10px; font: 600 13px "Chivo Mono", monospace; }
.boot-line, .diagnostics { font-family: "Chivo Mono", monospace; }
.cursor { color: var(--cyan); animation: blink 1s steps(1) infinite; }
.diagnostics { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--paper); }
.diagnostics span { border: 1px solid rgba(215,199,162,.28); padding: 7px 9px; background: rgba(9,10,18,.35); }

.grid-horizon, .flat-horizon {
  position: absolute;
  inset: 44% -10% -20%;
  background:
    linear-gradient(rgba(92,243,255,.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92,243,255,.35) 1px, transparent 1px);
  background-size: 100% 44px, 72px 100%;
  transform: perspective(450px) rotateX(62deg);
  transform-origin: top;
  opacity: .43;
}
.primitive-cosmos { position: absolute; inset: 12vh 5vw auto 10vw; height: 58vh; opacity: .82; }
.cube-spin { transform-origin: 240px 180px; animation: mechanicalTurn 9s steps(16) infinite; }
.cone-wobble { animation: wobble 6s steps(10) infinite; }
.arrow-path, .pixel-arrow { stroke: var(--apricot); }
.acetate { margin: 28vh 0 0 9vw; background: rgba(37,48,74,.48); }

.maze-grid { position: absolute; inset: 8vh 7vw 8vh; opacity: .9; }
.maze-grid path { stroke: var(--cyan); stroke-width: 2; }
.gate, .manual-scrap, .duotone-screen {
  position: absolute;
  z-index: 6;
  color: var(--void);
  background: var(--paper);
  border: 2px solid var(--apricot);
  box-shadow: 10px 10px 0 rgba(92,243,255,.18);
  font-family: "Archivo", sans-serif;
}
.gate { padding: 16px 18px; width: 200px; clip-path: polygon(6% 0,100% 0,94% 100%,0 100%); }
.gate b, .gate span { display: block; }
.gate b { font-family: "Space Grotesk"; font-size: 28px; color: var(--magenta); }
.gate-one { left: 23vw; top: 36vh; }
.gate-two { right: 20vw; top: 52vh; }
.maze-caption { margin: 18vh 0 0 50vw; width: min(600px, 44vw); }

.memory-section { background-color: var(--void); }
.memory-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(215,199,162,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(215,199,162,.08) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .35;
}
.manual-scrap { padding: 20px; min-width: 230px; max-width: 320px; clip-path: polygon(0 6%, 94% 0, 100% 88%, 9% 100%); }
.manual-scrap span { display: block; color: var(--magenta); font: 600 12px "Chivo Mono"; margin-bottom: 12px; }
.manual-scrap b { font: 700 22px/1 "Space Grotesk"; }
.scrap-a { left: 9vw; top: 18vh; transform: rotate(-5deg); }
.scrap-b { right: 12vw; top: 20vh; transform: rotate(4deg); }
.scrap-c { left: 22vw; bottom: 14vh; transform: rotate(3deg); }
.duotone-screen { right: 20vw; bottom: 12vh; width: 260px; height: 190px; background: var(--blue); color: var(--cyan); display: grid; place-items: center; font: 700 28px "Chivo Mono"; text-align: center; }
.duotone-screen::before { content: ""; position: absolute; inset: 12px; border: 1px dashed var(--apricot); }
.memory-caption { margin: 35vh auto 0; }

.pause-section { display: grid; place-items: center; }
.flat-horizon { inset: 58% -10% -8%; transform: perspective(600px) rotateX(72deg); opacity: .25; }
.pause-message { text-align: center; background: rgba(9,10,18,.76); }
.pause-message small { display: block; margin-top: 28px; color: var(--cyan); font: 600 13px "Chivo Mono"; letter-spacing: .18em; }

.hover-lift { transition: transform .22s steps(4), box-shadow .22s steps(4), text-shadow .22s steps(4), filter .22s steps(4); }
.hover-lift:hover {
  transform: translateY(-10px) rotate(-1deg);
  box-shadow: 17px 17px 0 rgba(92,243,255,.26), -9px -9px 0 rgba(255,177,92,.16);
  text-shadow: 2px 0 rgba(92,243,255,.55), -2px 0 rgba(217,76,122,.45);
  filter: saturate(1.25);
}

@keyframes blink { 50% { opacity: 0; } }
@keyframes syncJump { 0%,100% { opacity: 0; transform: translateY(-10%); } 35%,70% { opacity: 1; transform: translateY(12%); } }
@keyframes lopsidedSpin { to { transform: rotate(360deg); } }
@keyframes mechanicalTurn { 50% { transform: rotate(16deg) translate(18px, -8px); } 100% { transform: rotate(0); } }
@keyframes wobble { 50% { transform: translate(-24px, 12px) skewX(-6deg); } }

@media (max-width: 760px) {
  .status-strip { left: 12px; right: 12px; gap: 7px; font-size: 10px; overflow: hidden; }
  .boot-panel, .acetate, .maze-caption, .memory-caption { margin: 20vh auto 0; width: calc(100vw - 38px); }
  .maze-caption { width: calc(100vw - 38px); }
  .gate-one { left: 8vw; top: 55vh; }
  .gate-two { right: 8vw; top: 68vh; }
  .manual-scrap, .duotone-screen { transform: scale(.78); }
  .scrap-b, .duotone-screen { right: 2vw; }
}