:root {
  --abyssal: #0B0E17;
  --marble-twilight: #1C1F35;
  --neon-aegean: #0A7CFF;
  --violet-probability: #9B30FF;
  --bubble-amber: #FFB347;
  --chalk-marble: #E8E2D6;
  --fog-quartz: #8B8FA3;
  --emerald-chance: #00E5A0;
  --plasma-line: #FF2D7B;
}

/* Compliance vocabulary: extreme transparency (`opacity: 0.15` probability value (e.g. (Google IntersectionObserver` cells trigger **zoom-focus** zoom-focu entrance cells start `scale(0.85 */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--chalk-marble);
  background: var(--abyssal);
  font-family: "Karla", sans-serif;
  overflow-x: hidden;
}

#field-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 18% 15%, rgba(10, 124, 255, 0.22), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(155, 48, 255, 0.18), transparent 30%),
    linear-gradient(135deg, #0B0E17 0%, #1C1F35 40%, #0A7CFF 100%);
  opacity: 0.88;
  z-index: -2;
}

.topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1440px, calc(100vw - 28px));
  height: 56px;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  color: var(--chalk-marble);
  background: rgba(11, 14, 23, 0.48);
  border: 1px solid rgba(232, 226, 214, 0.09);
  border-top: 0;
  backdrop-filter: blur(18px);
  clip-path: polygon(0 0, 100% 0, 99% 100%, 1% 100%);
}

.brand {
  font-family: "Commissioner", sans-serif;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.83rem;
}

.brand span { color: var(--fog-quartz); margin-left: 0.7rem; }
.prob-nav { font-family: "Fira Code", monospace; color: var(--emerald-chance); text-shadow: 0 0 14px rgba(0,229,160,.8); }

.act { position: relative; min-height: 100vh; z-index: 1; }
.act-grid { padding-top: 70px; }

.hero-copy {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 2rem 0.6rem;
}

.eyebrow {
  margin: 0 0 0.2rem;
  font-family: "Fira Code", monospace;
  color: var(--fog-quartz);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
}

h1 {
  margin: 0;
  font-family: "Commissioner", sans-serif;
  font-size: clamp(2.8rem, 7vw, 6rem);
  line-height: 0.9;
  font-weight: 300;
  letter-spacing: 0.08em;
  font-variation-settings: 'FLAR' 50, 'VOLM' 70;
  max-width: 1000px;
  text-transform: lowercase;
}

.grid-wrap {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 2rem;
}

.grid-container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 28vh);
  gap: 6px;
  padding: 16px 0;
  isolation: isolate;
  transform: perspective(1100px) rotateX(0.5deg) rotateZ(-0.25deg);
  background:
    radial-gradient(circle at var(--conduit-x, 0%) var(--conduit-y, 50%), rgba(255,45,123,.95) 0 1.5%, transparent 10%),
    linear-gradient(90deg, rgba(10,124,255,.45), rgba(255,45,123,.95), rgba(155,48,255,.45));
  background-size: 240% 240%;
  animation: conduitFlow 8s linear infinite;
}

.grid-container::before,
.grid-container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='14' viewBox='0 0 96 14'%3E%3Cpath d='M0 2h22v10H8V6h8M30 2h22v10H38V6h8M60 2h22v10H68V6h8' fill='none' stroke='%23E8E2D6' stroke-opacity='.62' stroke-width='2'/%3E%3Ccircle cx='8' cy='6' r='2' fill='%23FF2D7B'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  mix-blend-mode: screen;
  animation: meanderGlow 8s linear infinite;
}

.grid-container::before { top: -8px; }
.grid-container::after { bottom: -8px; animation-direction: reverse; }

.prob-cell {
  position: relative;
  padding: clamp(1rem, 2vw, 1.6rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background-color: var(--marble-twilight);
  background-image:
    radial-gradient(ellipse at 10% 15%, rgba(255,255,255,0.06), transparent 18%),
    radial-gradient(ellipse at 80% 25%, rgba(139,143,163,0.08), transparent 22%),
    radial-gradient(ellipse at 30% 90%, rgba(255,255,255,0.035), transparent 20%),
    radial-gradient(ellipse at 95% 82%, rgba(10,124,255,0.11), transparent 24%),
    linear-gradient(135deg, rgba(232,226,214,.06), transparent 40%, rgba(11,14,23,.35));
  clip-path: var(--shard);
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
  opacity: 0;
  transform: scale(0.85);
}

.prob-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(155, 48, 255, 0.3), transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
}

.prob-cell::after {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(232,226,214,.08);
  clip-path: inherit;
  pointer-events: none;
}

.prob-cell.in-view { opacity: 1; transform: scale(1); }
.grid-container.has-focus .prob-cell { transform: scale(0.97); opacity: 0.6; }
.grid-container.has-focus .prob-cell.is-focused { transform: scale(1.06); opacity: 1; z-index: 4; box-shadow: 0 0 0 1px var(--bubble-amber), 0 0 40px rgba(255,179,71,.25); }
.prob-cell.is-focused::before { opacity: 1; }

.prob-cell h2,
.prob-cell p,
.prob-cell b,
.leaf { position: relative; z-index: 2; }

.leaf { color: var(--fog-quartz); font-size: 1rem; opacity: .7; margin-bottom: auto; }

.prob-cell h2 {
  margin: 0 0 .65rem;
  font-family: "Commissioner", sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.prob-cell p { margin: 0 0 1rem; color: var(--chalk-marble); font-size: 1rem; line-height: 1.65; font-weight: 400; max-width: 28ch; }
.prob-cell b { font-family: "Fira Code", monospace; color: var(--emerald-chance); font-size: 0.8125rem; letter-spacing: 0.04em; font-weight: 400; }

.c1 { --shard: polygon(2% 0, 100% 0, 98% 100%, 0 100%); }
.c2 { --shard: polygon(0 4%, 97% 0, 100% 96%, 5% 100%); }
.c3 { --shard: polygon(3% 0, 100% 3%, 95% 100%, 0 97%); }
.c4 { --shard: polygon(0 0, 98% 4%, 100% 100%, 4% 96%); }
.c5 { --shard: polygon(5% 0, 100% 0, 96% 98%, 0 100%); }
.c6 { --shard: polygon(0 2%, 100% 0, 97% 100%, 2% 96%); }
.c7 { --shard: polygon(3% 3%, 97% 0, 100% 97%, 0 100%); }
.c8 { --shard: polygon(0 0, 95% 2%, 100% 94%, 4% 100%); }
.c9 { --shard: polygon(1% 0, 100% 5%, 96% 100%, 0 97%); }
.c10 { --shard: polygon(4% 0, 98% 0, 100% 100%, 0 94%); }
.c11 { --shard: polygon(0 5%, 100% 0, 94% 100%, 3% 100%); }
.c12 { --shard: polygon(2% 0, 100% 2%, 98% 98%, 0 100%); }

.column {
  position: absolute;
  top: 10%;
  width: 86px;
  height: 80%;
  fill: none;
  stroke-width: 2;
  opacity: .7;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 16px rgba(10,124,255,.45));
}
.column-left { left: -40px; stroke: url(#colGlowA); }
.column-right { right: -40px; stroke: url(#colGlowB); transform: scaleX(-1); }
.scatter { stroke-dasharray: 13 10; opacity: .75; }

.act-stream {
  background: #0B0E17;
  overflow: hidden;
  clip-path: inset(var(--stream-clip, 18%) 0 0 0);
  transition: clip-path .08s linear;
}

#bubble-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.stream-veil { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, #0B0E17 0%, rgba(11,14,23,.55) 32%, transparent 72%); pointer-events: none; }
.absolute-equation { position: absolute; inset: 0; display: grid; place-items: center; z-index: 0; font-family: "Commissioner", sans-serif; font-size: clamp(4rem, 15vw, 12rem); font-weight: 300; letter-spacing: .03em; opacity: .12; white-space: nowrap; }
.stream-caption { position: absolute; left: clamp(1.5rem, 6vw, 5rem); bottom: clamp(1.5rem, 6vw, 5rem); z-index: 3; max-width: 520px; }
.stream-caption p { margin: 0 0 .5rem; font-family: "Commissioner", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; }
.stream-caption span { color: var(--fog-quartz); font-size: 1rem; line-height: 1.65; }

@keyframes conduitFlow { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } }
@keyframes meanderGlow { from { background-position-x: 0; } to { background-position-x: 192px; } }

@media (max-width: 980px) {
  .grid-container { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(6, 24vh); }
  .column { opacity: .35; }
}

@media (max-width: 620px) {
  .topbar { width: calc(100vw - 16px); }
  .hero-copy, .grid-wrap { padding-left: 1rem; padding-right: 1rem; }
  .grid-container { grid-template-columns: 1fr; grid-template-rows: repeat(12, 32vh); }
  .column { display: none; }
  .prob-cell p { max-width: none; }
}