:root {
  --bg: #050914;
  --bg-2: #0f1728;
  --panel: rgba(7, 12, 24, 0.58);
  --panel-strong: rgba(10, 17, 30, 0.76);
  --panel-soft: rgba(255, 255, 255, 0.05);
  --text: #eef5ff;
  --muted: #a3b1c5;
  --line: rgba(167, 191, 234, 0.17);
  --accent: #58e6d9;
  --accent-2: #ff7d93;
  --accent-3: #9b8cff;
  --ok: #8fe7bc;
  --warn: #ff9d7a;
  --ink: #08101a;
  --shadow: 0 30px 120px rgba(0, 0, 0, 0.42);
  --radius: 20px;
  --font: "IBM Plex Sans", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --pointer-x: 62vw;
  --pointer-y: 18vh;
  --pointer-offset-x: 0px;
  --pointer-offset-y: 0px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  color-scheme: dark;
  background:
    radial-gradient(circle at 14% 10%, rgba(88, 230, 217, 0.1), transparent 22%),
    radial-gradient(circle at 84% 12%, rgba(255, 125, 147, 0.08), transparent 20%),
    linear-gradient(180deg, #111725 0%, #090d17 52%, #05070d 100%);
  color: var(--text);
  font-family: var(--font);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.ambient {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.ambient::before,
.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ambient::before {
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 120px 120px;
  opacity: 0.1;
  transform: perspective(1000px) rotateX(72deg) translateY(14%);
  transform-origin: center;
  mask-image: radial-gradient(circle at 50% 42%, black 24%, transparent 82%);
  animation: driftGrid 28s linear infinite;
}

.ambient::after {
  inset: -18%;
  background:
    conic-gradient(from 110deg at 50% 50%, transparent 0deg, rgba(88,230,217,0.2) 78deg, transparent 148deg, rgba(255,125,147,0.16) 220deg, transparent 320deg),
    radial-gradient(circle at 50% 50%, rgba(155,140,255,0.18), transparent 46%);
  filter: blur(88px);
  opacity: 0.24;
  animation: rotateHalo 44s linear infinite;
}

.sceneBackdrop,
.sceneSignals,
.sceneMatrix,
.sceneWash {
  position: absolute;
  inset: -6%;
}

.sceneBackdrop {
  background-image: url('./assets/research-atmosphere.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.9;
  transform: translate3d(calc(var(--pointer-offset-x) * -0.01), calc(var(--pointer-offset-y) * -0.012), 0) scale(1.08);
  transform-origin: center;
  animation: breatheScene 28s ease-in-out infinite;
}

.sceneSignals {
  background-image: url('./assets/research-signal-flow.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.82;
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--pointer-offset-x) * -0.018), calc(var(--pointer-offset-y) * -0.014), 0) scale(1.05);
  transform-origin: center;
  mask-image: radial-gradient(circle at 50% 56%, black 26%, rgba(0, 0, 0, 0.76) 54%, transparent 88%);
  animation: driftSceneSignals 34s ease-in-out infinite;
}

.sceneMatrix {
  background-image: url('./assets/research-benchmark-grid.svg');
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 82% auto;
  opacity: 0.54;
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--pointer-offset-x) * 0.012), calc(var(--pointer-offset-y) * -0.01), 0) scale(1.03);
  transform-origin: center;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.16) 18%, black 44%, black 100%);
  animation: driftSceneMatrix 42s ease-in-out infinite;
}

.sceneWash {
  background:
    radial-gradient(circle at 28% 28%, rgba(88, 230, 217, 0.14), transparent 26%),
    radial-gradient(circle at 78% 30%, rgba(255, 125, 147, 0.1), transparent 24%),
    radial-gradient(circle at 58% 58%, rgba(155, 140, 255, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(4, 7, 14, 0.08), rgba(4, 7, 14, 0.24) 42%, rgba(4, 7, 14, 0.52) 100%);
}

.lightCone,
.aurora,
.colorField,
.ambientGlow {
  position: absolute;
  mix-blend-mode: screen;
}

.lightCone {
  width: 44rem;
  height: 78rem;
  filter: blur(34px);
  opacity: 0.08;
  clip-path: polygon(50% 0%, 8% 100%, 92% 100%);
  transform-origin: center top;
  animation: sweepCone 24s ease-in-out infinite;
}

.lightConeA {
  top: -10rem;
  left: -4rem;
  background: linear-gradient(180deg, rgba(88, 230, 217, 0.36), rgba(88, 230, 217, 0.06) 42%, transparent 82%);
  transform: translate3d(calc(var(--pointer-offset-x) * -0.018), calc(var(--pointer-offset-y) * -0.018), 0) rotate(-18deg);
}

.lightConeB {
  top: -14rem;
  right: -2rem;
  background: linear-gradient(180deg, rgba(255, 125, 147, 0.28), rgba(155, 140, 255, 0.1) 40%, transparent 80%);
  transform: translate3d(calc(var(--pointer-offset-x) * 0.014), calc(var(--pointer-offset-y) * -0.022), 0) rotate(14deg);
  animation-delay: -11s;
}

.aurora {
  width: 86rem;
  height: 18rem;
  border-radius: 999px;
  filter: blur(26px);
  opacity: 0.1;
  animation: driftAurora 26s ease-in-out infinite;
}

.auroraA {
  top: 8rem;
  left: -12rem;
  background:
    linear-gradient(90deg, transparent 0%, rgba(88, 230, 217, 0.2) 16%, rgba(120, 114, 255, 0.22) 48%, rgba(255, 125, 147, 0.18) 74%, transparent 100%);
  transform: translate3d(calc(var(--pointer-offset-x) * -0.012), calc(var(--pointer-offset-y) * -0.014), 0) rotate(-8deg);
}

.auroraB {
  bottom: 4rem;
  right: -18rem;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 125, 147, 0.16) 18%, rgba(88, 230, 217, 0.18) 48%, rgba(155, 140, 255, 0.18) 74%, transparent 100%);
  transform: translate3d(calc(var(--pointer-offset-x) * 0.01), calc(var(--pointer-offset-y) * 0.016), 0) rotate(10deg);
  animation-delay: -13s;
}

.colorField {
  border-radius: 46% 54% 53% 47% / 44% 43% 57% 56%;
  filter: blur(28px);
  opacity: 0.08;
  animation: morphField 22s ease-in-out infinite;
}

.colorFieldA {
  width: 32rem;
  height: 26rem;
  top: 12rem;
  left: 18%;
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 125, 147, 0.22), transparent 34%),
    radial-gradient(circle at 64% 48%, rgba(88, 230, 217, 0.22), transparent 42%),
    radial-gradient(circle at 50% 60%, rgba(155, 140, 255, 0.2), transparent 56%);
  transform: translate3d(calc(var(--pointer-offset-x) * -0.01), calc(var(--pointer-offset-y) * -0.015), 0);
}

.colorFieldB {
  width: 34rem;
  height: 28rem;
  right: 10%;
  bottom: 10rem;
  background:
    radial-gradient(circle at 36% 42%, rgba(88, 230, 217, 0.24), transparent 36%),
    radial-gradient(circle at 62% 54%, rgba(70, 126, 255, 0.18), transparent 40%),
    radial-gradient(circle at 58% 34%, rgba(255, 125, 147, 0.18), transparent 54%);
  transform: translate3d(calc(var(--pointer-offset-x) * 0.012), calc(var(--pointer-offset-y) * 0.014), 0);
  animation-delay: -9s;
}

.ambientGlow {
  width: 40rem;
  height: 40rem;
  left: calc(var(--pointer-x) - 20rem);
  top: calc(var(--pointer-y) - 20rem);
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(88, 230, 217, 0.26) 0%, rgba(70, 126, 255, 0.14) 22%, rgba(155, 140, 255, 0.18) 38%, rgba(255, 125, 147, 0.12) 56%, transparent 74%);
  filter: blur(64px);
  opacity: 0.32;
  transition: left 220ms ease, top 220ms ease, opacity 220ms ease;
  animation: pulseGlow 16s ease-in-out infinite;
}

#presenceField {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.18;
}

.cloud,
.orb,
.mesh {
  position: absolute;
  border-radius: 999px;
  filter: blur(20px);
  opacity: 0.12;
  mix-blend-mode: screen;
}

.cloud {
  background:
    radial-gradient(circle at 30% 50%, rgba(241, 248, 255, 0.14), transparent 42%),
    radial-gradient(circle at 64% 46%, rgba(88, 230, 217, 0.16), transparent 38%),
    radial-gradient(circle at 78% 58%, rgba(155, 140, 255, 0.13), transparent 34%);
  filter: blur(36px);
  opacity: 0.08;
  animation: driftCloud 42s ease-in-out infinite;
}

.cloudA {
  width: 34rem;
  height: 15rem;
  top: 3rem;
  left: 6%;
}

.cloudB {
  width: 30rem;
  height: 14rem;
  top: 24rem;
  right: 2%;
  animation-delay: -12s;
}

.cloudC {
  width: 40rem;
  height: 17rem;
  bottom: 2rem;
  left: 20%;
  animation-delay: -26s;
}

.orb {
  width: 26rem;
  height: 26rem;
  animation: floatOrb 16s ease-in-out infinite;
}

.orbA {
  top: -8rem;
  left: -6rem;
  background: radial-gradient(circle, rgba(88, 230, 217, 0.34), transparent 62%);
}

.orbB {
  top: 10rem;
  right: -8rem;
  background: radial-gradient(circle, rgba(255, 125, 147, 0.26), transparent 62%);
  animation-delay: -6s;
}

.orbC {
  bottom: -10rem;
  left: 34%;
  background: radial-gradient(circle, rgba(155, 140, 255, 0.28), transparent 60%);
  animation-delay: -11s;
}

.mesh {
  width: 36rem;
  height: 16rem;
  border-radius: 45% 55% 51% 49% / 42% 48% 52% 58%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
    radial-gradient(circle at 40% 50%, rgba(88, 230, 217, 0.13), transparent 58%);
  animation: floatMesh 22s linear infinite;
}

.meshA {
  top: 7rem;
  left: 12%;
}

.meshB {
  bottom: 5rem;
  right: 8%;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
    radial-gradient(circle at 56% 44%, rgba(255, 125, 147, 0.1), transparent 58%);
  animation-duration: 26s;
  animation-direction: reverse;
}

.signalLine {
  position: absolute;
  height: 1px;
  width: 52vw;
  --signal-rotate: -14deg;
  background: linear-gradient(90deg, transparent, rgba(88,230,217,0.72), rgba(70,126,255,0.4), rgba(255,125,147,0.5), transparent);
  opacity: 0.12;
  filter: blur(0.2px);
  animation: sweepSignal 20s linear infinite;
}

.grain {
  position: absolute;
  inset: -10%;
  opacity: 0.05;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.22) 0 0.7px, transparent 1px),
    radial-gradient(circle at 74% 30%, rgba(255,255,255,0.18) 0 0.8px, transparent 1.1px),
    radial-gradient(circle at 42% 74%, rgba(255,255,255,0.16) 0 0.6px, transparent 1px);
  background-size: 9px 9px, 12px 12px, 14px 14px;
  mix-blend-mode: soft-light;
  animation: grainShift 0.32s steps(2) infinite;
}

.signalA {
  top: 22%;
  left: -12%;
  --signal-rotate: -14deg;
}

.signalB {
  bottom: 20%;
  right: -16%;
  --signal-rotate: 12deg;
  animation-delay: -9s;
}

.shell {
  width: min(1340px, calc(100vw - 56px));
  margin: 28px auto 40px;
  position: relative;
  z-index: 1;
}

.panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.085), rgba(255,255,255,0.02)),
    radial-gradient(circle at 0% 0%, rgba(88, 230, 217, 0.07), transparent 36%),
    radial-gradient(circle at 100% 12%, rgba(155, 140, 255, 0.07), transparent 30%),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px) saturate(130%);
  position: relative;
  overflow: hidden;
}

.hero.panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.025)),
    linear-gradient(135deg, rgba(5, 12, 24, 0.42), rgba(8, 14, 28, 0.34)),
    rgba(7, 12, 24, 0.34);
  backdrop-filter: blur(18px) saturate(140%);
}

.hero {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
  padding: 34px 36px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 0%, rgba(88, 230, 217, 0.16), transparent 34%),
    radial-gradient(circle at 100% 30%, rgba(255, 125, 147, 0.14), transparent 26%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto -12% -26% 22%;
  height: 22rem;
  background: radial-gradient(circle, rgba(88, 230, 217, 0.14), rgba(155, 140, 255, 0.08) 36%, transparent 70%);
  filter: blur(46px);
  pointer-events: none;
}

.heroGlow,
.heroVisual {
  position: absolute;
  pointer-events: none;
}

.heroGlow {
  inset: 18% 24% -22% 8%;
  background:
    radial-gradient(circle at 36% 54%, rgba(80, 245, 227, 0.18), transparent 22%),
    radial-gradient(circle at 54% 48%, rgba(103, 217, 255, 0.16), transparent 24%),
    radial-gradient(circle at 72% 28%, rgba(255, 136, 163, 0.14), transparent 24%);
  filter: blur(42px);
  opacity: 0.7;
}

.heroVisual {
  z-index: 0;
  mix-blend-mode: screen;
  transform-origin: center;
}

.heroVisualFlow {
  top: -6%;
  right: -3%;
  width: 62%;
  height: 112%;
  background: url('./assets/research-signal-flow.svg') 44% center / cover no-repeat;
  opacity: 0.62;
  mask-image: radial-gradient(circle at 42% 58%, black 18%, rgba(0, 0, 0, 0.82) 44%, transparent 82%);
  animation: driftHeroFlow 24s ease-in-out infinite;
}

.heroVisualMatrix {
  right: 2%;
  bottom: -6%;
  width: 52%;
  height: 82%;
  background: url('./assets/research-benchmark-grid.svg') 58% center / contain no-repeat;
  opacity: 0.38;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.2) 14%, black 42%, black 100%);
  filter: blur(0.2px);
  animation: driftHeroMatrix 28s ease-in-out infinite;
}

.heroCopy,
.heroMeta {
  position: relative;
  z-index: 2;
}

.heroMeta {
  isolation: isolate;
}

.heroMeta::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 64% 32%, rgba(88, 230, 217, 0.08), transparent 26%),
    radial-gradient(circle at 82% 24%, rgba(255, 125, 147, 0.06), transparent 28%),
    radial-gradient(circle at 50% 46%, rgba(8, 12, 24, 0.14), rgba(8, 12, 24, 0.04) 56%, transparent 100%);
  filter: blur(18px);
  z-index: 0;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

h1 { margin: 0 0 10px; font-size: clamp(2rem, 5vw, 3.35rem); line-height: 1.05; }
.heroByline {
  margin: 0 0 12px;
  color: rgba(238, 245, 255, 0.78);
  font-size: 0.96rem;
  letter-spacing: 0.03em;
  font-weight: 600;
}
.lead { margin: 0; max-width: 78ch; color: var(--muted); line-height: 1.7; font-size: 1.04rem; }
.heroSummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.summaryChip {
  padding: 14px 15px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
}
.summaryLabel {
  display: block;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .76rem;
  margin-bottom: 6px;
}
.summaryChip strong {
  display: block;
  font-size: .93rem;
  line-height: 1.5;
}
.heroMeta { display: grid; gap: 14px; }
.metaCard {
  padding: 16px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(20, 30, 50, 0.48), rgba(14, 20, 36, 0.34)),
    radial-gradient(circle at 0% 0%, rgba(88, 230, 217, 0.05), transparent 34%);
  border: 1px solid rgba(196, 215, 246, 0.18);
  backdrop-filter: blur(16px) saturate(122%);
  box-shadow: 0 10px 28px rgba(4, 8, 18, 0.08);
  position: relative;
  z-index: 1;
}
.metaCard .label { display: block; font-size: 12px; color: rgba(203, 216, 239, 0.8); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.metaCard strong {
  display: block;
  line-height: 1.58;
  font-weight: 650;
  text-shadow: 0 1px 6px rgba(5, 7, 14, 0.08);
}
.pillRow { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.statusBadge {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(143, 231, 188, .12);
  color: var(--ok);
  font-size: .8rem;
  font-weight: 700;
}
.statusBadge.warn { background: rgba(255,157,122,.12); color: var(--warn); }
.statusBadge.soft { background: rgba(255,255,255,.05); color: var(--muted); }

.tabs {
  margin-top: 18px;
  padding: 10px;
  display: flex;
  gap: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)),
    rgba(7, 12, 24, 0.52);
}
.tab {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 600;
}
.tab.active { background: linear-gradient(135deg, rgba(88,230,217,.2), rgba(155,140,255,.18)); color: var(--text); }

.storyStrip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.storyCard {
  padding: 18px;
}

.storyLabel {
  display: inline-flex;
  margin-bottom: 10px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .76rem;
}

.storyCard strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.storyCard p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.stepList {
  display: grid;
  gap: 12px;
  margin: 18px 0;
}

.stepCard {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
}

.stepCard strong {
  display: block;
  margin-bottom: 5px;
}

.stepCard p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.stepNumber {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(88,230,217,.24), rgba(155,140,255,.2));
  border: 1px solid rgba(255,255,255,0.08);
  font-weight: 800;
  color: var(--text);
}

.demoList {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.7;
}

.demoList li + li {
  margin-top: 10px;
}

.tabPanel { display: none; margin-top: 16px; }
.tabPanel.active { display: block; }

.gridSingle {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
}
.gridBenchmark {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
}
.evidenceGrid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
}
.overviewGrid { display: grid; gap: 16px; }
.notesGrid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.evidenceNotes { margin-top: 16px; }
.controls, .boardPanel, .insightPanel, .benchmarkPanel { padding: 20px; }
.evidenceGrid > .panel { padding: 20px; }
.singleMain { display: grid; gap: 16px; }
.savedPanel { grid-column: 1 / -1; }

.sectionEyebrow {
  display: inline-flex;
  margin-bottom: 8px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.76rem;
  font-weight: 700;
}

.sectionTitle {
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.28;
  margin-bottom: 14px;
  padding-bottom: 3px;
}
.sectionTitle.small { margin-top: 20px; font-size: .95rem; color: var(--muted); }
.subtitle { margin: 4px 0 0; color: var(--muted); line-height: 1.55; }
.leadCopy { margin: 0; color: var(--muted); font-size: 1.02rem; line-height: 1.72; }
.panelHint {
  margin: -2px 0 14px;
  padding: 11px 12px;
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  background: rgba(88, 230, 217, 0.08);
  color: var(--muted);
  line-height: 1.55;
}

.ruleList {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.ruleCard {
  padding: 14px 15px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.035);
}

.ruleCard strong {
  display: block;
  margin-bottom: 6px;
}

.ruleCard p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

label { display: block; margin-bottom: 14px; font-size: .93rem; color: var(--muted); }
label select, label input, label textarea {
  margin-top: 7px;
  width: 100%;
  background: rgba(255,255,255,0.045);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
}
label textarea { resize: vertical; min-height: 118px; }
.controlNote {
  margin: -4px 0 6px;
  color: var(--muted);
  line-height: 1.5;
  font-size: .84rem;
}
.seedPresets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 8px;
}
.seedPreset {
  border-radius: 999px;
  padding: 8px 12px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  background: rgba(255,255,255,0.035);
}
.seedPreset.active {
  border-color: rgba(88, 230, 217, 0.34);
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(88, 230, 217, 0.18), rgba(155, 140, 255, 0.14)),
    rgba(255,255,255,0.04);
  box-shadow: 0 0 0 1px rgba(88, 230, 217, 0.08), 0 10px 24px rgba(88, 230, 217, 0.08);
}
.seedPreset:hover {
  border-color: rgba(155, 140, 255, 0.26);
  color: var(--text);
}
label select:focus,
label input:focus,
label textarea:focus {
  outline: none;
  border-color: rgba(88, 230, 217, 0.52);
  box-shadow: 0 0 0 3px rgba(88, 230, 217, 0.12);
}
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
select option,
select optgroup {
  background: #101725;
  color: var(--text);
}
.buttonRow { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 8px; }
.buttonRow.compact { margin-top: 8px; }
button, .uploadBtn {
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border-radius: 14px;
  padding: 11px 14px;
  font-weight: 600;
}
button.primary { background: linear-gradient(135deg, rgba(88,230,217,.24), rgba(155,140,255,.2)); }
button.primary:hover { background: linear-gradient(135deg, rgba(88,230,217,.34), rgba(255,125,147,.2)); }
button:disabled { opacity: .45; cursor: not-allowed; }
.uploadBtn { position: relative; overflow: hidden; }
.uploadBtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.foldCard {
  margin-top: 14px;
  padding: 14px 15px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
}

.foldCard summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}

.foldCard summary::-webkit-details-marker {
  display: none;
}

.foldCard[open] summary {
  margin-bottom: 8px;
}

.miniCallout {
  margin-top: 14px;
  padding: 14px 15px;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.miniHeading { font-size: .82rem; letter-spacing: .08em; color: var(--accent); text-transform: uppercase; margin-bottom: 7px; }
.miniCallout p, .notesGrid p { margin: 0; color: var(--muted); line-height: 1.68; }
.notesGrid > .panel {
  overflow: visible;
  padding-bottom: 22px;
}
.notesGrid .sectionTitle {
  margin-bottom: 12px;
}

.boardHeader { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.scorePill {
  padding: 10px 14px; border-radius: 999px; background: linear-gradient(135deg, rgba(88,230,217,.16), rgba(155,140,255,.16)); border: 1px solid var(--line); font-weight: 700;
}
.verdictBanner {
  margin: 14px 0;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(88, 230, 217, 0.22);
  background:
    linear-gradient(135deg, rgba(88,230,217,0.14), rgba(155,140,255,0.1)),
    rgba(255,255,255,0.03);
  color: var(--text);
  line-height: 1.6;
  font-weight: 600;
}
.statusStrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.statusCard { background: rgba(255,255,255,0.045); border-radius: 14px; border: 1px solid var(--line); padding: 14px; }
.statusCard span { display:block; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing:.06em; margin-bottom: 6px; }
.statusCard strong { font-size: 1.3rem; }

.fireworks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.fireworkStack {
  padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,0.04);
}
.fireworkStack .title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.fireworkDots { display:flex; gap:8px; flex-wrap:wrap; }
.fireworkDot { width: 26px; height: 26px; border-radius: 999px; display:grid; place-items:center; font-size:.82rem; color:var(--ink); font-weight:700; opacity:.22; }
.fireworkDot.on { opacity: 1; box-shadow: 0 0 20px rgba(255,255,255,0.18); }

.players { display: grid; gap: 14px; }
.playerPanel { border: 1px solid var(--line); border-radius: 18px; padding: 16px; background: rgba(255,255,255,.035); }
.playerHead { display:flex; justify-content: space-between; align-items:center; gap: 12px; margin-bottom: 12px; }
.playerName { display:flex; align-items:center; gap: 10px; }
.turnBadge { padding: 6px 10px; border-radius: 999px; background: rgba(88,230,217,.14); color: var(--accent); font-size:.82rem; font-weight:700; }
.policyTag { padding: 6px 10px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--ink); }
.hand { display:grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 10px; }
.card {
  border-radius: 16px; border: 1px solid rgba(255,255,255,.18); padding: 12px 10px; min-height: 112px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;
}
.card::after { content:''; position:absolute; inset:auto -10px -26px auto; width:64px; height:64px; border-radius:999px; background: rgba(255,255,255,.14); }
.cardTop { display:flex; justify-content:space-between; gap: 6px; font-weight:700; }
.cardMeta { font-size:.78rem; color:#f6f8fb; opacity:.9; }
.knowledgeText { font-size: .78rem; padding: 6px 8px; border-radius: 999px; background: rgba(8,17,31,.22); display:inline-flex; width:max-content; }
.knowledgeText.dim { opacity:.75; }
.hintMark { position:absolute; top:10px; right:10px; width:10px; height:10px; border-radius:999px; background:#fff; opacity:.92; }

.decisionCard, .partnerModel, .metricsGrid, .logList, .tableWrap, .heatmapWrap { background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 16px; }
.decisionCard { padding: 14px; }
.decisionTop { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:8px; }
.decisionBadge { padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.08); font-size:.82rem; }
.decisionCard p { margin: 0; color: var(--muted); line-height: 1.6; }
.detailPanel { padding: 20px; }
.focusTabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 16px 0 14px;
}
.focusTab {
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  padding: 9px 12px;
  border-radius: 999px;
  font-size: .9rem;
}
.focusTab.active {
  background: linear-gradient(135deg, rgba(88,230,217,.18), rgba(155,140,255,.16));
  color: var(--text);
}
.focusPanel { display: none; }
.focusPanel.active { display: block; }
.benchmarkFocusPanel .tableWrap,
.benchmarkFocusPanel .heatmapWrap {
  margin-top: 0;
}
.responseCard {
  min-height: 240px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(88,230,217,.08), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  color: var(--text);
  line-height: 1.7;
  white-space: pre-wrap;
}

.responseCard.secondary {
  min-height: 180px;
}

.responseStack {
  display: grid;
  gap: 14px;
}

.responsePanel {
  display: grid;
  gap: 8px;
}

.responseLabel {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .76rem;
  font-weight: 700;
}
.partnerModel { padding: 12px; display:grid; gap: 10px; }
.partnerLine { display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); padding-bottom:8px; }
.partnerLine:last-child { border-bottom:0; padding-bottom:0; }
.partnerLine span { color: var(--muted); }
.partnerLine strong { text-align:right; }
.metricsGrid { padding: 12px; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.metricsGrid.benchmarkCards { grid-template-columns: repeat(4, minmax(0,1fr)); margin-bottom: 14px; }
.metricCard { padding: 10px; border-radius: 12px; background: rgba(255,255,255,.04); border:1px solid var(--line); }
.metricCard span { display:block; color: var(--muted); font-size: .78rem; margin-bottom: 4px; }
.metricCard strong { font-size: 1.1rem; }
.formulaList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.formulaCard {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
}

.formulaCard span {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  margin-bottom: 4px;
}

.formulaCard strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.formulaCard p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: .88rem;
}
.logList { padding: 10px; max-height: 430px; overflow:auto; display:grid; gap: 10px; }
.logEntry { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); }
.logEntry .top { display:flex; justify-content:space-between; gap:10px; margin-bottom: 6px; font-size:.87rem; }
.logEntry p { margin: 0; color: var(--muted); line-height: 1.45; font-size: .88rem; }

.tableWrap { overflow:auto; }
table { width:100%; border-collapse: collapse; min-width: 940px; }
thead th { position: sticky; top: 0; background: #10182a; z-index:1; }
th, td { border-bottom: 1px solid var(--line); padding: 12px 10px; text-align:left; font-size: .92rem; }
td.good { color: var(--ok); font-weight: 700; }
td.warn { color: var(--warn); font-weight: 700; }
.heatmapWrap { margin-top: 14px; padding: 14px; overflow:auto; }
.heatmap { display:grid; gap:8px; }
.heatmapRow { display:grid; grid-template-columns: 130px repeat(4, minmax(120px, 1fr)); gap:8px; align-items: stretch; }
.heatCell { padding: 12px; border-radius: 14px; border:1px solid var(--line); min-height: 88px; display:flex; flex-direction:column; justify-content:space-between; }
.heatLabel { font-size: .8rem; color: var(--muted); }
.heatValue { font-size: 1.15rem; font-weight: 700; }
.heatSub { font-size:.8rem; color: var(--muted); }
.savedRuns {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  max-height: 630px;
  overflow: auto;
}
.savedRunCard {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
}
.savedRunTop {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
  margin-bottom: 8px;
}
.savedRunLabel {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
}
.savedRunMeta {
  display: block;
  color: var(--muted);
  font-size: .82rem;
}
.savedRunStamp {
  color: var(--muted);
  font-size: .8rem;
  white-space: nowrap;
}
.savedRunCard p {
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.55;
  font-size: .92rem;
}
.savedRunFooter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.savedRunChip {
  display: inline-flex;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: .78rem;
}

@keyframes floatOrb {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(1.5rem, -1.25rem, 0) scale(1.06); }
}

@keyframes driftGrid {
  0% { transform: perspective(1000px) rotateX(72deg) translate3d(0, 14%, 0); }
  50% { transform: perspective(1000px) rotateX(72deg) translate3d(-2%, 12%, 0); }
  100% { transform: perspective(1000px) rotateX(72deg) translate3d(-4%, 14%, 0); }
}

@keyframes rotateHalo {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.04); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes breatheScene {
  0%, 100% { transform: translate3d(calc(var(--pointer-offset-x) * -0.01), calc(var(--pointer-offset-y) * -0.012), 0) scale(1.08); }
  50% { transform: translate3d(calc(var(--pointer-offset-x) * -0.014), calc(var(--pointer-offset-y) * -0.016), 0) scale(1.12); }
}

@keyframes driftHeroFlow {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.02); }
  50% { transform: translate3d(-2.5%, 1.2%, 0) scale(1.08); }
}

@keyframes driftHeroMatrix {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.46; }
  50% { transform: translate3d(2.5%, -1.5%, 0) scale(1.06); opacity: 0.62; }
}

@keyframes driftSceneSignals {
  0%, 100% { transform: translate3d(calc(var(--pointer-offset-x) * -0.018), calc(var(--pointer-offset-y) * -0.014), 0) scale(1.05); opacity: 0.76; }
  50% { transform: translate3d(calc(var(--pointer-offset-x) * -0.024), calc(var(--pointer-offset-y) * -0.018), 0) scale(1.09); opacity: 0.9; }
}

@keyframes driftSceneMatrix {
  0%, 100% { transform: translate3d(calc(var(--pointer-offset-x) * 0.012), calc(var(--pointer-offset-y) * -0.01), 0) scale(1.03); opacity: 0.46; }
  50% { transform: translate3d(calc(var(--pointer-offset-x) * 0.018), calc(var(--pointer-offset-y) * -0.016), 0) scale(1.07); opacity: 0.62; }
}

@keyframes pulseGlow {
  0%, 100% { transform: scale(1); opacity: 0.52; }
  50% { transform: scale(1.08); opacity: 0.72; }
}

@keyframes sweepCone {
  0%, 100% { opacity: 0.16; filter: blur(34px); }
  50% { opacity: 0.28; filter: blur(42px); }
}

@keyframes driftAurora {
  0%, 100% { opacity: 0.22; filter: blur(24px); }
  50% { opacity: 0.38; filter: blur(32px); }
}

@keyframes morphField {
  0%, 100% { opacity: 0.24; border-radius: 46% 54% 53% 47% / 44% 43% 57% 56%; }
  50% { opacity: 0.34; border-radius: 56% 44% 48% 52% / 38% 55% 45% 62%; }
}

@keyframes driftCloud {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(2rem, -1rem, 0) scale(1.05); }
}

@keyframes floatMesh {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-1rem, 1rem, 0) rotate(8deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

@keyframes sweepSignal {
  0% { transform: translate3d(0, 0, 0) rotate(var(--signal-rotate)); opacity: 0; }
  10% { opacity: 0.4; }
  50% { opacity: 0.55; }
  100% { transform: translate3d(12vw, -6vh, 0) rotate(var(--signal-rotate)); opacity: 0; }
}

@keyframes grainShift {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-1%, 1%, 0); }
  100% { transform: translate3d(1%, -1%, 0); }
}

@media (max-width: 1220px) {
  .gridSingle { grid-template-columns: 1fr; }
  .gridBenchmark { grid-template-columns: 1fr; }
  .evidenceGrid { grid-template-columns: 1fr; }
  .notesGrid { grid-template-columns: 1fr; }
  .storyStrip { grid-template-columns: 1fr; }
  .heroSummary { grid-template-columns: 1fr; }
  .heroVisualFlow {
    width: 84%;
    height: 82%;
    top: 0;
    right: -12%;
    opacity: 0.72;
  }
  .heroVisualMatrix {
    width: 68%;
    height: 48%;
    right: -3%;
    bottom: -2%;
    opacity: 0.44;
  }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .heroGlow { inset: -6% -20% -16% 12%; }
  .heroVisualFlow {
    width: 100%;
    height: 66%;
    top: -4%;
    right: -24%;
    opacity: 0.62;
  }
  .heroVisualMatrix {
    width: 82%;
    height: 40%;
    right: -10%;
    bottom: 8%;
    opacity: 0.34;
  }
  .statusStrip, .fireworks, .metricsGrid.benchmarkCards, .formulaList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .shell { width: min(100vw - 16px, 1600px); margin: 8px auto 24px; }
  .hero, .controls, .boardPanel, .insightPanel, .benchmarkPanel, .evidenceGrid > .panel { padding: 16px; }
  .heroVisualFlow,
  .heroVisualMatrix,
  .heroGlow { opacity: 0.28; }
  .statusStrip, .fireworks, .metricsGrid, .metricsGrid.benchmarkCards, .formulaList { grid-template-columns: 1fr; }
  .focusTabs { flex-direction: column; }
}