:root {
  /* Design tokens: Interaction Pattern* Pattern:** progressive disclosure appears character-by-character (typewriter effect frequency IntersectionObserver (threshold: (Google Fonts */
  --void: #0a0a0f;
  --depth: #141419;
  --surface: #1e1e26;
  --primary: #e8e6e3;
  --secondary: #b8b2a7;
  --tertiary: #6b6660;
  --magenta: #ff006e;
  --cyan: #00f5d4;
  --yellow: #f5e642;
  --error: #ff5e3a;
  --gradient: linear-gradient(135deg, #ff006e 0%, #00f5d4 50%, #f5e642 100%);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 500vh;
  overflow-x: hidden;
  font-family: "Source Code Pro", monospace;
  background: var(--void);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(circle at 20% 12%, #ff006e1c 0 18%, transparent 35%),
    radial-gradient(circle at 82% 70%, #00f5d419 0 15%, transparent 33%),
    linear-gradient(30deg, transparent 0 48%, #ffffff05 48.5% 49%, transparent 49.5% 100%),
    linear-gradient(150deg, transparent 0 48%, #ffffff05 48.5% 49%, transparent 49.5% 100%);
  background-size: 100% 100%, 100% 100%, 82px 48px, 82px 48px;
  mix-blend-mode: screen;
}

#noise-canvas,
.scanlines {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#noise-canvas { opacity: 0.045; z-index: 90; }

.scanlines {
  z-index: 91;
  background: repeating-linear-gradient(to bottom, #ffffff08 0 1px, transparent 1px 3px);
}

.chrome {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 0 64px;
  border-bottom: 1px solid #ffffff0b;
  background: #0a0a0fc7;
  backdrop-filter: blur(14px);
  font-family: "Space Grotesk", Inter, sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: clamp(0.7rem, 0.9vw, 0.85rem);
}

.domain { color: var(--cyan); text-shadow: 0 0 12px #00f5d4; }
.chrome-status { color: var(--tertiary); }

.progress-track {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: #ffffff08;
}

#progress-bar {
  height: 100%;
  width: 0%;
  background: var(--gradient);
  box-shadow: 0 0 18px #00f5d4;
}

.dot-nav {
  position: fixed;
  z-index: 101;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.dot {
  position: relative;
  width: 18px;
  height: 18px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.dot::before {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--surface);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  border: 1px solid var(--tertiary);
  transition: transform 250ms ease, background 250ms ease, filter 250ms ease;
}

.dot span {
  position: absolute;
  right: 25px;
  top: 2px;
  opacity: 0;
  color: var(--cyan);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 10px;
  letter-spacing: 0.15em;
  transition: opacity 250ms ease;
}

.dot.active::before,
.dot:hover::before {
  transform: scale(1.7) rotate(30deg);
  background: var(--magenta);
  filter: drop-shadow(0 0 10px #ff006e);
}

.dot.active span,
.dot:hover span { opacity: 1; }

.parallax-stage {
  position: relative;
  min-height: 500vh;
  isolation: isolate;
}

.layer {
  position: fixed;
  inset: -15vh -10vw;
  pointer-events: none;
  will-change: transform;
}

.layer-grid {
  z-index: -5;
  background-color: var(--void);
  background-image:
    linear-gradient(#ff006620 1px, transparent 1px),
    linear-gradient(90deg, #ff006620 1px, transparent 1px),
    linear-gradient(#00f5d410 1px, transparent 1px),
    linear-gradient(90deg, #00f5d410 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px, 18px 18px, 18px 18px;
  animation: gridGlitch 6s steps(1) infinite;
}

.layer-wire { z-index: -3; color: var(--cyan); }

.polyhedron {
  position: absolute;
  width: min(32vw, 420px);
  height: auto;
  opacity: 0.58;
  transform-origin: center;
  animation: rotate 48s linear infinite, pulse 4s ease-in-out infinite alternate;
  transition: animation-duration 600ms ease;
}

.poly-one { left: 6vw; top: 18vh; }
.poly-two { right: 8vw; top: 58vh; animation-duration: 58s, 5s; }
.poly-three { left: 62vw; top: 8vh; width: min(22vw, 290px); animation-duration: 38s, 3.2s; }
body.thinking .polyhedron { animation-duration: 18s, 2s; }

.layer-particles { z-index: 20; }
.layer-particles i {
  position: absolute;
  width: 13px;
  height: 13px;
  border: 1px solid var(--magenta);
  filter: drop-shadow(0 0 8px #ff006e);
  opacity: 0.65;
  animation: floatUp 9s ease-in-out infinite alternate;
}
.layer-particles i:nth-child(1) { left: 12%; top: 72%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.layer-particles i:nth-child(2) { left: 25%; top: 30%; border-radius: 50%; animation-delay: -1s; }
.layer-particles i:nth-child(3) { left: 84%; top: 22%; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); animation-delay: -2s; }
.layer-particles i:nth-child(4) { left: 70%; top: 80%; transform: rotate(45deg); animation-delay: -3s; }
.layer-particles i:nth-child(5) { left: 45%; top: 16%; clip-path: polygon(50% 0, 100% 100%, 0 100%); animation-delay: -4s; }
.layer-particles i:nth-child(6) { left: 5%; top: 45%; border-radius: 50%; animation-delay: -5s; }
.layer-particles i:nth-child(7) { left: 93%; top: 55%; animation-delay: -6s; }
.layer-particles i:nth-child(8) { left: 36%; top: 88%; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); animation-delay: -7s; }
.layer-particles i:nth-child(9) { left: 56%; top: 48%; border-radius: 50%; animation-delay: -8s; }
.layer-particles i:nth-child(10) { left: 78%; top: 10%; clip-path: polygon(50% 0, 100% 100%, 0 100%); animation-delay: -9s; }

.panel {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  padding: 96px 64px 64px;
}

.panel::before {
  content: "";
  position: absolute;
  inset: 12vh 5vw;
  border: 1px solid #ffffff08;
  background:
    linear-gradient(120deg, #14141999, transparent 60%),
    radial-gradient(circle at 85% 20%, #00f5d414, transparent 30%);
  clip-path: polygon(0 0, 96% 0, 100% 8%, 100% 100%, 4% 100%, 0 92%);
  z-index: -1;
}

.panel-content {
  width: min(1120px, calc(100vw - 128px));
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: 32px;
  align-items: center;
}

.panel-content.narrow { width: min(980px, calc(100vw - 128px)); }

.section-meta {
  grid-column: 1 / 5;
  margin-bottom: 22px;
  font-family: "Space Grotesk", Inter, sans-serif;
  color: var(--cyan);
  font-size: clamp(0.7rem, 0.9vw, 0.85rem);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.display {
  grid-column: 1 / 7;
  margin: 0;
  color: var(--primary);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(3.5rem, 10vw, 8rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h2.display { font-size: clamp(3.2rem, 8vw, 6.8rem); }

.display em {
  font-style: normal;
  color: var(--magenta);
  text-shadow: 0 0 22px #ff006e66;
}

.hero .display em,
.final .display em {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.type-copy {
  grid-column: 1 / 5;
  min-height: 8.5em;
  margin: 28px 0 0;
  color: var(--secondary);
  font-family: "Source Code Pro", monospace;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  line-height: 1.75;
}

.type-copy::after {
  content: "_";
  color: var(--yellow);
  opacity: 0;
}
.panel.typing .type-copy::after { opacity: 1; animation: cursor 700ms steps(1) infinite; }

.illustration {
  grid-column: 5 / 9;
  grid-row: 2 / span 3;
  min-height: 280px;
  border: 1px solid #ffffff12;
  background: linear-gradient(135deg, #1e1e2690, #14141950);
  clip-path: polygon(0 0, 92% 0, 100% 18%, 100% 100%, 8% 100%, 0 82%);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

.illustration::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(30deg, transparent 0 48%, #ffffff08 48.5% 49%, transparent 49.5% 100%),
    linear-gradient(150deg, transparent 0 48%, #ffffff08 48.5% 49%, transparent 49.5% 100%);
  background-size: 60px 35px;
}

.illustration svg { width: 90%; max-height: 90%; position: relative; z-index: 1; }
.neural .edges { stroke: var(--cyan); }
.neural .wrong { stroke: var(--magenta); }
.neural .nodes polygon { fill: var(--surface); stroke: var(--yellow); stroke-width: 1.2; filter: drop-shadow(0 0 7px #f5e642); animation: nodePulse 2s ease-in-out infinite alternate; }
.neural-edge {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.panel.visible .neural-edge { stroke-dashoffset: 0; }

.impossible, .fern, .loop, .final-sigil svg { fill: none; stroke: var(--cyan); stroke-width: 3; filter: drop-shadow(0 0 12px #00f5d455); }
.impossible .mag, .fern .chaos { stroke: var(--magenta); }
.fern .stem { stroke: var(--yellow); }
.fern .voronoi { stroke: var(--tertiary); }

.loop-box { align-content: center; gap: 10px; }
.terminal-lines {
  width: 84%;
  padding: 18px;
  background: #0a0a0fbb;
  border-left: 2px solid var(--error);
  color: var(--secondary);
  font-size: 0.85rem;
  line-height: 1.8;
  z-index: 1;
}
.terminal-lines span { display: block; }
.loop { width: 76% !important; }
.loop .yellow { stroke: var(--yellow); }
.sigil { stroke: url(#sigilGradient); stroke-width: 3.5; fill: #ff006e08; }
.sigil-inner { stroke: var(--cyan); stroke-width: 2; fill: none; }
.sigil-wire { stroke: var(--yellow); stroke-width: 1; opacity: 0.7; }

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.reveal.from-left { transform: translateX(-60px); }
.reveal.from-right { transform: translateX(60px); }
.panel.visible .reveal {
  opacity: 1;
  transform: translate(0, 0);
}
.panel.visible .reveal:nth-child(1) { transition-delay: 0ms; }
.panel.visible .reveal:nth-child(2) { transition-delay: 120ms; }
.panel.visible .reveal:nth-child(4) { transition-delay: 360ms; }

.glitch { animation: glitch 8s steps(1) infinite; }

@keyframes rotate { to { transform: rotateX(360deg) rotateY(360deg) rotateZ(80deg); } }
@keyframes pulse {
  from { stroke-opacity: 0.3; filter: drop-shadow(0 0 2px #00f5d4); }
  to { stroke-opacity: 0.8; filter: drop-shadow(0 0 12px #00f5d4); }
}
@keyframes glitch {
  0%, 95% { transform: none; text-shadow: none; }
  96% { transform: translateX(-3px); text-shadow: 3px 0 #ff006e, -3px 0 #00f5d4; }
  97% { transform: translateX(3px) skewX(2deg); text-shadow: -3px 0 #ff006e, 3px 0 #00f5d4; }
  98% { transform: translateX(-1px); text-shadow: 1px 0 #f5e642; }
  99% { transform: none; text-shadow: none; }
}
@keyframes gridGlitch {
  0%, 88%, 100% { filter: none; background-position: 0 0; }
  89% { filter: brightness(1.7); background-position: 3px -2px; }
  90% { filter: hue-rotate(35deg); background-position: -4px 1px; }
  91% { filter: none; background-position: 0 0; }
}
@keyframes floatUp { to { transform: translateY(-70px) rotate(120deg); opacity: 0.25; } }
@keyframes nodePulse { to { filter: drop-shadow(0 0 14px #f5e642); fill: #ff006e33; } }
@keyframes cursor { 50% { opacity: 0; } }

@media (max-width: 820px) {
  .chrome { padding: 0 20px; grid-template-columns: 1fr; }
  .chrome-status { display: none; }
  .dot-nav { right: 12px; }
  .panel { padding: 80px 24px 48px; }
  .panel-content, .panel-content.narrow { width: calc(100vw - 48px); display: block; }
  .display, h2.display { font-size: clamp(3rem, 16vw, 5.6rem); }
  .type-copy { min-height: 10em; }
  .illustration { margin-top: 24px; min-height: 240px; }
  .panel::before { inset: 9vh 18px; }
}