:root {
  --deep-void: #0a0818;
  --midnight-panel: #16122e;
  --electric-teal: #00e5c7;
  --phantom-violet: #6b21a8;
  --signal-white: #e8e6f0;
  --smoke-lavender: #9490b3;
  --hot-magenta: #e040a0;
  --grid-trace: rgba(0, 229, 199, 0.15);
  --grid-trace-bright: rgba(0, 229, 199, 0.30);
  --ease-cinema: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-reveal: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Compliance vocabulary: 10-12px reserved exclusively actual snippets (Google Interactive Cells:** IntersectionObserver` with `threshold: 0.15`. Interstellar" sense reality itself */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--signal-white);
  font-family: "Quicksand", Inter, sans-serif;
  background:
    radial-gradient(circle at 18% 8%, rgba(107, 33, 168, 0.32), transparent 34vw),
    radial-gradient(circle at 82% 18%, rgba(0, 229, 199, 0.12), transparent 28vw),
    linear-gradient(180deg, #0a0818 0%, #16122e 48%, #0a0818 100%);
  overflow-x: hidden;
}

#particle-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.cinema { position: relative; z-index: 1; padding: 2px; }

.scene { min-height: 100vh; }

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: 2px;
  background: var(--grid-trace);
  box-shadow: 0 0 44px rgba(0, 229, 199, 0.08);
  transition: background 400ms var(--ease-cinema), box-shadow 400ms var(--ease-cinema);
}

.bento-grid:has(.bento-cell:hover) {
  background: var(--grid-trace-bright);
  box-shadow: 0 0 70px rgba(0, 229, 199, 0.16);
}

.bento-cell {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  padding: clamp(1.4rem, 3vw, 3rem);
  min-height: 220px;
  background: rgba(22, 18, 46, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(232, 230, 240, 0.06);
  transform-origin: center;
  transition: transform 400ms var(--ease-cinema), border-color 400ms var(--ease-cinema), box-shadow 400ms var(--ease-cinema);
}

.bento-cell:hover {
  transform: scale(1.01);
  border-color: rgba(0, 229, 199, 0.24);
  box-shadow: inset 0 0 40px rgba(0, 229, 199, 0.05), 0 22px 80px rgba(0, 0, 0, 0.35);
}

.hero-cell {
  grid-column: 1 / -1;
  grid-row: span 2;
  min-height: calc(100vh - 4px);
  display: flex;
  align-items: end;
  background: rgba(10, 8, 24, 0.85);
  perspective: 1200px;
}

.feature-grid, .theorem-grid, .lazy-grid { padding: 2px; }
.tall-cell { grid-row: span 2; }
.wide-cell { grid-column: span 2; }
.code-cell { grid-column: span 2; grid-row: span 2; min-height: 520px; }
.visual-cell { grid-column: span 2; }

h1, h2, h3, .eyebrow, .cell-index {
  font-family: "Nunito", Inter, sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

h1 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 900;
  text-shadow: 0 0 32px rgba(0, 229, 199, 0.18);
}

h2 { margin: 0 0 1rem; font-size: clamp(1.5rem, 3.5vw, 2.8rem); font-weight: 900; }
h3 { margin: 0 0 0.8rem; font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 700; }
p { max-width: 62ch; margin: 0; color: var(--smoke-lavender); font-size: clamp(0.95rem, 1.2vw, 1.15rem); line-height: 1.7; letter-spacing: 0.01em; }
code, pre { font-family: "Fira Code", monospace; font-feature-settings: "liga" 1; }
code { color: var(--electric-teal); text-shadow: 0 0 12px rgba(0, 229, 199, 0.25); }

.hero-copy { position: relative; z-index: 4; max-width: 1060px; }
.eyebrow { margin: 0 0 1.2rem; color: var(--electric-teal); font-size: 0.92rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.28em; }
.tagline { margin-top: 1.4rem; max-width: 760px; color: var(--signal-white); opacity: 0.82; }
.cell-index { color: var(--electric-teal); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.22em; margin-bottom: 1.4rem; opacity: 0.78; }

.chapter {
  min-height: 120vh;
  display: grid;
  place-items: center;
  padding: 20vh 8vw;
}

.chapter h2 {
  max-width: 980px;
  text-align: center;
  font-size: clamp(2rem, 6.5vw, 6rem);
  color: var(--signal-white);
  text-shadow: 0 0 50px rgba(107, 33, 168, 0.42);
}

.reel-nav { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 10; display: grid; gap: 16px; }
.reel-dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(232, 230, 240, 0.28); background: rgba(10, 8, 24, 0.72); box-shadow: inset 0 0 8px rgba(0,0,0,0.9); cursor: pointer; transition: 350ms var(--ease-cinema); }
.reel-dot.active, .reel-dot:hover { background: var(--electric-teal); border-color: var(--electric-teal); box-shadow: 0 0 18px rgba(0, 229, 199, 0.75); }

.lambda-stage { position: absolute; inset: 0; transform-style: preserve-3d; animation: stageDrift 30s linear infinite; opacity: 0.9; }
.lambda-orbit { position: absolute; left: 50%; top: 45%; width: 52vw; height: 52vw; max-width: 740px; max-height: 740px; transform-style: preserve-3d; transform: translate(-50%, -50%); animation: orbitSpin 30s linear infinite; }
.orbit-two { animation-direction: reverse; transform: translate(-50%, -50%) rotateX(64deg) rotateZ(18deg); }
.orbit-three { width: 36vw; height: 36vw; animation-duration: 42s; transform: translate(-50%, -50%) rotateY(72deg) rotateZ(-28deg); }
.lambda-orbit span { position: absolute; font-family: "Nunito", sans-serif; font-size: clamp(8rem, 16vw, 18rem); font-weight: 900; color: rgba(232, 230, 240, 0.09); text-shadow: 0 0 26px rgba(0, 229, 199, 0.32), 0 0 80px rgba(107, 33, 168, 0.28); -webkit-text-stroke: 1px rgba(0, 229, 199, 0.24); }
.lambda-orbit span:nth-child(1) { left: 2%; top: 10%; transform: translateZ(120px) rotateY(28deg); }
.lambda-orbit span:nth-child(2) { right: 3%; top: 28%; transform: translateZ(-90px) rotateX(34deg); }
.lambda-orbit span:nth-child(3) { left: 37%; bottom: 0; transform: translateZ(180px) rotateZ(-14deg); }

.fog-layer, .light-leak { position: absolute; inset: -20%; background: linear-gradient(90deg, transparent, rgba(107, 33, 168, 0.08), transparent); animation: lightLeak 20s linear infinite; pointer-events: none; }
.fog-layer { background: radial-gradient(circle at center, rgba(0, 229, 199, 0.10), transparent 35%), linear-gradient(90deg, transparent, rgba(107, 33, 168, 0.08), transparent); filter: blur(22px); }

.type-smoke { position: absolute; z-index: 2; font-family: "Fira Code", monospace; font-size: 11px; color: rgba(148, 144, 179, 0.16); white-space: nowrap; animation: smokeRise 24s linear infinite; }
.smoke-a { top: 22%; left: 8%; }
.smoke-b { right: 8%; bottom: 25%; animation-delay: -9s; }
.smoke-c { right: 6%; top: 18%; }

.accent-cell { display: grid; place-items: center; min-height: 260px; }
.accent-cell span { font-family: "Fira Code", monospace; font-size: clamp(3rem, 8vw, 7rem); font-weight: 500; }
.accent-cell.teal { background: #00e5c7; color: #0a0818; }
.accent-cell.violet { background: #6b21a8; color: #e8e6f0; }
.accent-cell.magenta { background: #e040a0; color: #0a0818; }

.construct.prism { position: absolute; right: 12%; bottom: 10%; width: 160px; height: 160px; transform-style: preserve-3d; animation: prismTurn 18s linear infinite; }
.construct.prism i { position: absolute; inset: 18%; border: 1px solid rgba(0, 229, 199, 0.34); background: rgba(0, 229, 199, 0.04); box-shadow: 0 0 30px rgba(0, 229, 199, 0.16); }
.construct.prism i:nth-child(1) { transform: rotateY(0deg) translateZ(54px); }
.construct.prism i:nth-child(2) { transform: rotateY(60deg) translateZ(54px); }
.construct.prism i:nth-child(3) { transform: rotateX(60deg) translateZ(54px); }

.node-web { position: relative; height: 210px; margin-bottom: 1.5rem; }
.node-web::before, .node-web::after { content: ""; position: absolute; inset: 22% 10%; border-top: 1px solid rgba(0, 229, 199, 0.28); border-bottom: 1px solid rgba(224, 64, 160, 0.18); transform: rotate(16deg); }
.node-web::after { transform: rotate(-22deg); }
.node-web span { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: #00e5c7; box-shadow: 0 0 22px rgba(0, 229, 199, 0.85); animation: nodePulse 4s ease-in-out infinite; }
.node-web span:nth-child(1) { left: 8%; top: 24%; }
.node-web span:nth-child(2) { left: 32%; top: 62%; animation-delay: -1s; }
.node-web span:nth-child(3) { left: 50%; top: 16%; animation-delay: -2s; }
.node-web span:nth-child(4) { left: 74%; top: 42%; animation-delay: -3s; }
.node-web span:nth-child(5) { left: 88%; top: 74%; animation-delay: -1.7s; }
.node-web span:nth-child(6) { left: 18%; top: 82%; animation-delay: -2.4s; }

.code-cell { display: flex; align-items: center; }
.code-frame { position: absolute; inset: clamp(1rem, 3vw, 2.4rem); display: flex; align-items: center; padding-top: 2.2rem; font-family: "Fira Code", monospace; font-size: clamp(0.85rem, 1vw, 1rem); line-height: 1.8; color: #e8e6f0; text-shadow: 0 0 12px rgba(0, 229, 199, 0.25); white-space: pre-wrap; transition: transform 650ms var(--ease-reveal), opacity 650ms var(--ease-reveal), clip-path 650ms var(--ease-reveal); }
.code-frame.incoming { transform: translateX(30%); opacity: 0; clip-path: inset(0 0 0 100%); }
.code-frame.exiting { transform: translateX(-30%); opacity: 0.15; clip-path: inset(0 100% 0 0); }
.code-frame .kw { color: #e040a0; }
.code-frame .type { color: #00e5c7; }
.code-frame .str { color: #9490b3; }
.code-frame .id { color: #e8e6f0; }

.reveal { clip-path: inset(0 100% 0 0); opacity: 0.01; transition: clip-path 800ms var(--ease-reveal), opacity 800ms var(--ease-reveal); transition-delay: var(--reveal-delay, 0ms); }
.reveal-right { clip-path: inset(0 0 0 100%); }
.reveal-top { clip-path: inset(0 0 100% 0); }
.reveal-bottom { clip-path: inset(100% 0 0 0); }
.reveal.visible { clip-path: inset(0 0 0 0); opacity: 1; }
.chapter .reveal { transition-duration: 1200ms; }

@keyframes orbitSpin { to { transform: translate(-50%, -50%) rotateX(360deg) rotateY(240deg) rotateZ(360deg); } }
@keyframes stageDrift { 50% { transform: rotateX(5deg) rotateY(-9deg) scale(1.04); } }
@keyframes lightLeak { from { transform: translateX(-35%); } to { transform: translateX(35%); } }
@keyframes smokeRise { from { transform: translateY(60px); opacity: 0; } 30%, 70% { opacity: 1; } to { transform: translateY(-120px); opacity: 0; } }
@keyframes prismTurn { to { transform: rotateX(360deg) rotateY(360deg); } }
@keyframes nodePulse { 50% { transform: scale(1.8); background: #e040a0; } }

@media (max-width: 1439px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-cell, .code-cell, .wide-cell, .visual-cell { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .cinema { padding: 0 16px; }
  .bento-grid { display: block; background: transparent; box-shadow: none; }
  .bento-cell { margin: 0 0 16px; min-height: 260px; }
  .hero-cell { min-height: 100vh; }
  .reel-nav { right: 10px; gap: 10px; }
  .code-frame { font-size: 0.78rem; }
  .lambda-orbit { width: 92vw; height: 92vw; }
}