:root {
  /* Fonts: IBM Plex Mono only for console logs; Space Grotesk for editor labels; Bungee for title chapters. */
  --navy: #071225;
  --cyan: #42D9FF;
  --lime: #B6FF4D;
  --coral: #FF6B8A;
  --violet: #8B5CFF;
  --yellow: #FFD166;
  --ink: #121A33;
  --mist: #D7F3FF;
  --title: "Bungee", Inter, system-ui, sans-serif;
  --space: "Space Grotesk", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--navy); }
body {
  margin: 0;
  color: var(--mist);
  font-family: var(--space);
  background:
    radial-gradient(circle at 16% 8%, rgba(66, 217, 255, .22), transparent 34rem),
    radial-gradient(circle at 88% 18%, rgba(139, 92, 255, .22), transparent 30rem),
    linear-gradient(180deg, #071225 0%, #10172e 44%, #071225 100%);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at calc(18% + var(--scroll-progress, 0) * 44%) 24%, rgba(182,255,77,.13), transparent 14rem),
    linear-gradient(90deg, rgba(66,217,255,.05), transparent 22%, rgba(255,107,138,.05));
  mix-blend-mode: screen;
}

button { font: inherit; color: inherit; }
.mono { font-family: var(--mono); letter-spacing: .04em; }
.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .18;
  background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(215, 243, 255, .08) 8px 9px);
  mix-blend-mode: screen;
}
.cursor-glow {
  position: fixed; width: 18rem; height: 18rem; margin: -9rem 0 0 -9rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(182,255,77,.16), rgba(66,217,255,.08) 34%, transparent 68%);
  pointer-events: none; z-index: 3; transform: translate3d(-40rem,-40rem,0); transition: opacity .2s ease;
}

.timeline-ribbon {
  position: fixed; left: 1.2rem; top: 50%; transform: translateY(-50%); width: 6.4rem; z-index: 30;
  display: grid; gap: .55rem; padding: .7rem; border: 1px solid rgba(215,243,255,.26); border-radius: 1.4rem;
  background: rgba(18,26,51,.62); box-shadow: 0 0 2rem rgba(66,217,255,.15), inset 0 0 1.6rem rgba(7,18,37,.8);
  backdrop-filter: blur(10px);
}
.timeline-title { font: 700 .58rem var(--mono); color: var(--yellow); text-align: center; }
.tick {
  position: relative; display: grid; grid-template-columns: 1.3rem 1fr; gap: .35rem; align-items: center;
  border: 1px solid rgba(215,243,255,.16); border-radius: .75rem; background: rgba(7,18,37,.78); padding: .42rem .35rem; cursor: pointer;
}
.tick span { font: 700 .58rem var(--mono); color: var(--cyan); }
.tick b { font-size: .66rem; font-weight: 800; }
.tick.is-active { color: var(--navy); background: linear-gradient(135deg, var(--lime), var(--cyan)); border-color: var(--mist); }
.tick.is-active span { color: var(--navy); }
.scrub-head { height: .32rem; width: calc(100% - 1.4rem); border-radius: 2rem; background: var(--coral); box-shadow: 0 0 1rem var(--coral); justify-self: center; }

.viewport-stage {
  position: relative; min-height: 100vh; overflow: hidden; padding: 8vw 8vw 6vw 10rem;
  display: grid; place-items: center; isolation: isolate;
  border-bottom: 1px solid rgba(215,243,255,.12);
}
.viewport-stage > *:not(.scene-grid) { transition: filter .25s ease, opacity .25s ease; }
.viewport-stage .engine-core { filter: saturate(calc(.82 + var(--room-progress, 0) * .48)); }
.scene-grid {
  position: absolute; inset: -20%; z-index: -2; opacity: .48;
  background-image:
    linear-gradient(rgba(215,243,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215,243,255,.08) 1px, transparent 1px),
    linear-gradient(120deg, rgba(66,217,255,.08), transparent 30%, rgba(255,209,102,.05));
  background-size: 4rem 4rem, 4rem 4rem, 100% 100%; transform: perspective(600px) rotateX(58deg) translateY(10%); transform-origin: 50% 80%;
}
.scene-grid.diagonal { transform: perspective(700px) rotateX(62deg) rotateZ(-9deg) translateY(8%); }
.final-grid { opacity: .28; background-size: 3rem 3rem, 3rem 3rem, 100% 100%; }

h1, h2 { font-family: var(--title); text-transform: uppercase; letter-spacing: .025em; margin: 0; line-height: .9; }
h1 { font-size: clamp(4.5rem, 12vw, 13rem); color: var(--mist); text-shadow: .08em .08em 0 var(--violet), 0 0 2.4rem rgba(66,217,255,.35); }
h2 { font-size: clamp(3rem, 7.4vw, 8.8rem); max-width: 10ch; color: var(--mist); text-shadow: .06em .06em 0 rgba(255,107,138,.85); }
.chapter-text { max-width: 45rem; font-size: clamp(1.05rem, 1.8vw, 1.5rem); line-height: 1.55; color: rgba(215,243,255,.82); }
.room-heading { position: absolute; top: 8vw; left: 12rem; z-index: 4; }
.room-heading.right { left: auto; right: 8vw; text-align: right; }
.room-heading p, .boot-line { color: var(--lime); text-shadow: 0 0 .8rem rgba(182,255,77,.5); }

.camera-frame {
  position: absolute; width: min(58vw, 54rem); height: min(58vh, 34rem); border: 2px solid rgba(66,217,255,.5); border-radius: 1.2rem;
  box-shadow: inset 0 0 2rem rgba(66,217,255,.12), 0 0 3rem rgba(66,217,255,.12);
}
.corner { position: absolute; width: 2.2rem; height: 2.2rem; border-color: var(--yellow); }
.tl { left: -.35rem; top: -.35rem; border-top: 5px solid; border-left: 5px solid; }
.tr { right: -.35rem; top: -.35rem; border-top: 5px solid; border-right: 5px solid; }
.bl { left: -.35rem; bottom: -.35rem; border-bottom: 5px solid; border-left: 5px solid; }
.br { right: -.35rem; bottom: -.35rem; border-bottom: 5px solid; border-right: 5px solid; }
.frame-label { position: absolute; right: 1rem; bottom: .8rem; font-size: .75rem; color: var(--cyan); }
.boot-copy { position: relative; z-index: 5; justify-self: start; max-width: 78rem; }
.boot-line::after { content: "_"; animation: blink .85s steps(2) infinite; }

.engine-core {
  width: 7.4rem; height: 7.4rem; position: relative; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(45deg);
  background: linear-gradient(135deg, var(--coral), var(--violet) 46%, var(--cyan));
  border: 2px solid rgba(215,243,255,.75); box-shadow: 0 0 1.2rem var(--cyan), 0 0 4rem rgba(255,107,138,.45), inset 0 0 2rem rgba(255,255,255,.2);
  animation: coreFloat 3.2s ease-in-out infinite;
}
.engine-core::before, .engine-core::after {
  content: "";
  position: absolute;
  inset: -32%;
  border: 1px solid rgba(66,217,255,.42);
  transform: rotate(18deg);
  pointer-events: none;
}
.engine-core::after { inset: -54%; border-color: rgba(255,209,102,.28); transform: rotate(-22deg); }
.engine-core span, .engine-core i, .engine-core b { position: absolute; inset: 12%; border: 1px solid rgba(255,255,255,.45); }
.engine-core i { inset: -18%; border-color: rgba(182,255,77,.55); transform: rotate(45deg); }
.engine-core b { inset: 35%; background: var(--lime); box-shadow: 0 0 1.6rem var(--lime); border-radius: 50%; }
.core-boot { position: absolute; right: 22vw; bottom: 24vh; }
.console-floor { position: absolute; bottom: 8vh; left: 16vw; right: 8vw; display: flex; gap: 2rem; flex-wrap: wrap; }
.console-firefly { font: 700 .78rem var(--mono); color: var(--yellow); padding: .55rem .75rem; border: 1px solid rgba(255,209,102,.35); border-radius: 2rem; background: rgba(18,26,51,.6); animation: firefly 4s ease-in-out infinite; }
.console-firefly:nth-child(2) { animation-delay: .7s; color: var(--cyan); }
.console-firefly:nth-child(3) { animation-delay: 1.4s; color: var(--lime); }

.inspector-panel {
  border: 1px solid rgba(215,243,255,.25); background: rgba(18,26,51,.82); border-radius: 1.2rem; box-shadow: 0 1rem 4rem rgba(0,0,0,.26), inset 0 0 1rem rgba(66,217,255,.06); backdrop-filter: blur(8px);
}
.panel-top { padding: .7rem 1rem; border-bottom: 1px solid rgba(215,243,255,.18); color: var(--yellow); font: 800 .78rem var(--mono); text-transform: uppercase; }
.hierarchy-panel { position: absolute; left: 13rem; bottom: 12vh; width: 17rem; padding-bottom: .7rem; z-index: 5; }
.hierarchy-branch { display: block; width: calc(100% - 1.4rem); margin: .45rem .7rem; text-align: left; padding: .55rem .7rem; border: 1px solid transparent; border-radius: .55rem; background: rgba(7,18,37,.55); cursor: pointer; }
.hierarchy-branch.indent { padding-left: 1.55rem; }
.hierarchy-branch.is-selected, .selectable.is-hot { border-color: var(--lime); color: var(--lime); box-shadow: 0 0 1rem rgba(182,255,77,.2); }
.viewport-object { position: relative; width: min(52vw, 40rem); height: 32rem; display: grid; place-items: center; }
.scene-core { transform: translateX(10vw); }
.object-label { position: absolute; top: 27%; right: 18%; padding: .45rem .7rem; border-radius: .5rem; border: 1px solid var(--cyan); background: rgba(7,18,37,.8); color: var(--cyan); cursor: pointer; }
.transform-gizmo { position: absolute; width: 18rem; height: 18rem; animation: gizmoSpin 9s linear infinite; }
.transform-gizmo:hover { animation-duration: 2.4s; filter: brightness(1.28); }
.transform-gizmo em { position: absolute; left: 50%; top: 50%; height: .35rem; width: 8rem; transform-origin: left center; border-radius: 1rem; }
.axis-x { background: var(--coral); box-shadow: 0 0 1rem var(--coral); }
.axis-y { background: var(--lime); transform: rotate(-90deg); box-shadow: 0 0 1rem var(--lime); }
.axis-z { background: var(--cyan); transform: rotate(-35deg); box-shadow: 0 0 1rem var(--cyan); }
.frustum-lines { position: absolute; right: 10vw; bottom: 15vh; width: 22rem; height: 14rem; border: 1px dashed rgba(255,209,102,.45); transform: skewX(-18deg); }
.frustum-lines span { position: absolute; width: 16rem; height: 1px; background: rgba(255,209,102,.38); transform-origin: left; }
.frustum-lines span:nth-child(1){ transform: rotate(25deg); }.frustum-lines span:nth-child(2){ bottom:0; transform: rotate(-25deg); }.frustum-lines span:nth-child(3){ right:0; transform: rotate(155deg); }.frustum-lines span:nth-child(4){ right:0; bottom:0; transform: rotate(-155deg); }
.tilemap-strip { position: absolute; right: 14vw; top: 18vh; display: flex; transform: rotate(-8deg); }
.tilemap-strip span { width: 4rem; height: 4rem; background: linear-gradient(135deg, rgba(66,217,255,.45), rgba(139,92,255,.35)); border: 1px solid rgba(215,243,255,.4); }

.physics-diorama, .shader-board, .animation-stage { position: relative; width: min(68vw, 58rem); height: 36rem; display: grid; place-items: center; }
.core-physics { z-index: 3; }
.collider-shell { position: absolute; display: grid; place-items: end center; padding-bottom: .7rem; font: 800 .75rem var(--mono); color: var(--lime); border: 3px solid var(--lime); border-radius: 50% 50% 42% 42%; background: rgba(182,255,77,.04); cursor: pointer; animation: colliderPulse 1.8s ease-in-out infinite; }
.shell-a { width: 18rem; height: 24rem; }.shell-b { width: 28rem; height: 15rem; border-color: var(--cyan); color: var(--cyan); animation-delay: .45s; }
.navmesh { position: absolute; inset: auto auto 1rem 8rem; width: 28rem; height: 11rem; transform: skewX(-18deg); }
.navmesh span { position: absolute; clip-path: polygon(10% 10%, 88% 0, 100% 65%, 42% 100%, 0 70%); background: rgba(139,92,255,.28); border: 1px solid rgba(215,243,255,.35); width: 10rem; height: 7rem; }
.navmesh span:nth-child(2){ left: 7rem; top: 3rem; background: rgba(255,209,102,.25); }.navmesh span:nth-child(3){ left: 16rem; top: 1rem; background: rgba(255,107,138,.22); }.navmesh span:nth-child(4){ left: 21rem; top: 5rem; background: rgba(66,217,255,.2); }
.impact-rings i { position: absolute; inset: 44% auto auto 50%; width: 7rem; height: 7rem; margin: -3.5rem; border: 2px solid var(--yellow); border-radius: 50%; animation: impact 1.6s ease-out infinite; }
.impact-rings i:nth-child(2){ animation-delay:.35s; }.impact-rings i:nth-child(3){ animation-delay:.7s; }
.physics-inspector { position: absolute; right: 8vw; bottom: 11vh; width: 18rem; }
.physics-inspector p { display: flex; justify-content: space-between; padding: .1rem 1rem; }.lime { color: var(--lime); }
.console-stack { position: absolute; left: 12rem; top: 22vh; display: grid; gap: .55rem; color: var(--yellow); font-size: .78rem; }

.shader-board { transform: translateY(3rem); }
.material-orb { position: absolute; width: 8rem; height: 8rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); cursor: pointer; font-weight: 900; box-shadow: 0 0 2rem currentColor; }
.orb-cyan { left: 3rem; top: 5rem; background: radial-gradient(circle at 30% 30%, white, var(--cyan) 34%, #0d5d88); color: var(--cyan); }
.orb-coral { right: 7rem; top: 4rem; background: radial-gradient(circle at 30% 30%, white, var(--coral) 34%, #812946); color: var(--coral); }
.orb-violet { left: 8rem; bottom: 3rem; background: radial-gradient(circle at 30% 30%, white, var(--violet) 34%, #37205f); color: var(--violet); }
.material-orb:hover { transform: scale(1.08); filter: brightness(1.22); }
.shader-noodle { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.shader-noodle path { fill: none; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 18 12; animation: noodle 3.5s linear infinite; }
.shader-noodle path:nth-child(1){ stroke: var(--cyan); }.shader-noodle path:nth-child(2){ stroke: var(--coral); animation-delay: -.9s; }.shader-noodle path:nth-child(3){ stroke: var(--lime); animation-delay: -1.8s; }
.core-shader { z-index: 3; animation-name: shaderCore; }
.shader-wipe { position: absolute; width: 13rem; height: 20rem; background: linear-gradient(90deg, transparent, rgba(255,209,102,.42), transparent); transform: skewX(-18deg); animation: wipe 2.8s ease-in-out infinite; }
.shader-note { position: absolute; right: 9vw; bottom: 10vh; width: 22rem; }.shader-note p { padding: 0 1rem 1rem; }

.core-animated { animation: hop 1.4s steps(4) infinite; z-index: 3; }
.onion { position: absolute; width: 7rem; height: 7rem; border: 2px dashed rgba(215,243,255,.35); transform: rotate(45deg); opacity: .48; }
.ghost-one { left: 20%; bottom: 24%; }.ghost-two { left: 43%; top: 18%; border-color: rgba(182,255,77,.5); }.ghost-three { right: 18%; bottom: 27%; border-color: rgba(255,107,138,.5); }
.spline-path { position: absolute; width: 60%; height: 38%; border-top: 4px dashed var(--yellow); border-radius: 50%; transform: translateY(4rem) rotate(-5deg); }
.sprite-strip { position: absolute; bottom: 1rem; left: 7%; right: 7%; display: grid; grid-template-columns: repeat(4,1fr); gap: .5rem; }
.sprite-strip span, .keyframe { padding: .8rem; text-align: center; background: rgba(18,26,51,.86); border: 1px solid rgba(215,243,255,.24); border-radius: .6rem; }
.timeline-console { position: absolute; left: 12rem; bottom: 12vh; right: 8vw; display: grid; grid-template-columns: repeat(6, 1fr); gap: .65rem; }
.keyframe.active { background: var(--yellow); color: var(--navy); box-shadow: 0 0 1.4rem rgba(255,209,102,.55); }

.playtest-room { background: radial-gradient(circle at 52% 45%, rgba(182,255,77,.2), transparent 24rem), radial-gradient(circle at 75% 20%, rgba(255,107,138,.18), transparent 24rem); }
.playtest-portal { position: relative; width: 30rem; height: 30rem; display: grid; place-items: center; }
.portal-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.2rem solid transparent; border-top-color: var(--cyan); border-right-color: var(--lime); border-bottom-color: var(--coral); border-left-color: var(--violet); filter: drop-shadow(0 0 2rem rgba(66,217,255,.55)); animation: portal 5s linear infinite; }
.final-core { width: 9rem; height: 9rem; animation: finalCreature 1.8s ease-in-out infinite; }
.play-glow { position: absolute; bottom: 3.5rem; right: 4rem; width: 5rem; height: 5rem; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--navy); font-size: 2rem; box-shadow: 0 0 2rem var(--lime); }
.audio-rings i { position: absolute; inset: 50% auto auto 50%; width: 12rem; height: 12rem; margin: -6rem; border: 2px solid rgba(215,243,255,.26); border-radius: 50%; animation: audioPulse 2.2s ease-out infinite; }
.audio-rings i:nth-child(2) { animation-delay: .4s; border-color: rgba(66,217,255,.34); }
.audio-rings i:nth-child(3) { animation-delay: .8s; border-color: rgba(255,107,138,.34); }
.final-title { position: absolute; left: 12rem; top: 14vh; max-width: 42rem; }.final-title p:last-child { font-size: 1.2rem; line-height: 1.55; }
.floating-labels button { position: absolute; padding: .65rem .9rem; border: 1px solid rgba(215,243,255,.32); border-radius: 2rem; background: rgba(18,26,51,.75); cursor: pointer; }
.floating-labels button:nth-child(1){ right:18vw; top:18vh; color:var(--coral); }.floating-labels button:nth-child(2){ left:20vw; bottom:22vh; color:var(--cyan); }.floating-labels button:nth-child(3){ right:12vw; bottom:24vh; color:var(--violet); }.floating-labels button:nth-child(4){ left:50vw; top:12vh; color:var(--lime); }

@keyframes blink { 50% { opacity: 0; } }
@keyframes coreFloat { 50% { transform: rotateX(58deg) rotateZ(45deg) translateY(-1.4rem) scale(1.04); } }
@keyframes firefly { 50% { transform: translateY(-1rem); filter: brightness(1.3); } }
@keyframes gizmoSpin { to { transform: rotate(360deg); } }
@keyframes colliderPulse { 50% { transform: scale(1.06); box-shadow: 0 0 2rem currentColor; } }
@keyframes impact { from { transform: scale(.2); opacity: .9; } to { transform: scale(2.8); opacity: 0; } }
@keyframes noodle { to { stroke-dashoffset: -120; } }
@keyframes wipe { 0%,100% { transform: translateX(-14rem) skewX(-18deg); opacity: .1; } 50% { transform: translateX(14rem) skewX(-18deg); opacity: .8; } }
@keyframes shaderCore { 50% { filter: hue-rotate(70deg) brightness(1.25); transform: rotateX(58deg) rotateZ(45deg) translateY(-1rem); } }
@keyframes hop { 0%,100% { transform: rotateX(58deg) rotateZ(45deg) translate(0, 2rem); } 50% { transform: rotateX(58deg) rotateZ(45deg) translate(6rem, -5rem); } }
@keyframes portal { to { transform: rotate(360deg); } }
@keyframes finalCreature { 50% { transform: rotateX(58deg) rotateZ(45deg) translateY(-2rem) scale(1.12); box-shadow: 0 0 3rem var(--lime), 0 0 6rem var(--cyan); } }
@keyframes audioPulse { from { transform: scale(.4); opacity: .8; } to { transform: scale(2); opacity: 0; } }

@media (max-width: 820px) {
  .timeline-ribbon { left: .5rem; width: 5.5rem; }
  .viewport-stage { padding-left: 6.5rem; padding-right: 1rem; }
  .room-heading, .room-heading.right, .final-title { left: 6.8rem; right: 1rem; text-align: left; top: 7vh; }
  h1 { font-size: clamp(3.2rem, 16vw, 6rem); }
  h2 { font-size: clamp(2.4rem, 12vw, 4.8rem); }
  .hierarchy-panel, .physics-inspector, .shader-note, .timeline-console { left: 6.8rem; right: 1rem; width: auto; }
  .console-stack { left: 6.8rem; top: auto; bottom: 8vh; }
  .physics-diorama, .shader-board, .animation-stage { width: 100%; transform: scale(.78); }
  .core-boot { right: 14vw; bottom: 18vh; }
}