:root {
  color-scheme: light;
  --ink: #15213b;
  --night: #101b37;
  --night-deep: #0b142b;
  --night-soft: #1a2b50;
  --cream: #f7f3eb;
  --paper: #fffdfa;
  --blue: #176fc4;
  --blue-light: #93cdf3;
  --warm: #ffb66c;
  --warm-light: #ffe0bc;
  --muted: #536078;
  --line: rgba(21, 33, 59, .14);
  --radius: 24px;
  --shadow: 0 28px 80px rgba(11, 20, 43, .12);
  --container: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 86px; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--cream);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: inherit; }

button { font: inherit; }

::selection { background: var(--warm); color: var(--night); }

:focus-visible { outline: 3px solid #f39545; outline-offset: 4px; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: .65rem 1rem;
  transform: translateY(-160%);
  border-radius: 8px;
  background: var(--warm);
  color: var(--night);
  font-weight: 800;
}

.skip-link:focus { transform: translateY(0); }

.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }

.announcement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 38px;
  padding: 6px 20px;
  background: var(--night-deep);
  color: #e9eef9;
  font-size: .76rem;
  font-weight: 680;
  letter-spacing: .025em;
  text-align: center;
}

.announcement-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warm);
  box-shadow: 0 0 0 4px rgba(255, 182, 108, .15);
}

.announcement a { color: var(--warm); text-decoration: none; }
.announcement a:hover { text-decoration: underline; text-underline-offset: 3px; }

.site-header {
  position: sticky;
  z-index: 80;
  top: 0;
  background: rgba(247, 243, 235, .95);
  border-bottom: 1px solid rgba(21, 33, 59, .08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.header-inner { display: flex; align-items: center; gap: 32px; min-height: 78px; }

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  line-height: 1.05;
}

.brand img { width: 42px; height: 42px; object-fit: contain; }
.brand span { display: grid; gap: 4px; }
.brand strong { font-size: 1.22rem; letter-spacing: -.015em; }
.brand small { color: var(--muted); font-size: .62rem; font-weight: 650; letter-spacing: .015em; }

.main-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 42px); margin-left: auto; }
.main-nav a { padding: 12px 0; color: #34425c; font-size: .87rem; font-weight: 680; text-decoration: none; white-space: nowrap; }
.main-nav a:hover { color: var(--blue); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 56px;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: 13px;
  cursor: pointer;
  font-size: .92rem;
  font-weight: 790;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.button:hover { transform: translateY(-3px); }
.button span[aria-hidden] { font-size: 1.25em; font-weight: 400; line-height: .7; }
.button-small { min-height: 43px; padding: 10px 16px; font-size: .81rem; }
.button-dark { background: var(--night); color: #fff; }
.button-dark:hover { background: #243a69; box-shadow: 0 10px 22px rgba(16, 27, 55, .18); }
.button-primary { background: var(--warm); color: var(--night-deep); box-shadow: 0 10px 28px rgba(255, 182, 108, .18); }
.button-primary:hover { background: #ffc688; box-shadow: 0 16px 34px rgba(255, 182, 108, .27); }
.button-white { background: var(--paper); color: var(--night); }
.button-white:hover { background: var(--warm-light); box-shadow: 0 16px 34px rgba(0, 0, 0, .13); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .91rem;
  font-weight: 760;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.text-link:hover { color: var(--warm); }
.text-link-blue { color: #1168b6; }
.text-link-blue:hover { color: #094f91; }

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 85% 18%, rgba(40, 116, 184, .28), transparent 31%),
    radial-gradient(circle at 4% 92%, rgba(66, 129, 186, .15), transparent 28%),
    var(--night);
  color: #fff;
}

.hero-grid {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .18;
  background-image: linear-gradient(rgba(173, 214, 255, .21) 1px, transparent 1px), linear-gradient(90deg, rgba(173, 214, 255, .21) 1px, transparent 1px);
  background-size: 86px 86px;
  mask-image: linear-gradient(to right, transparent, #000 38%, #000);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  align-items: center;
  gap: clamp(34px, 5vw, 84px);
  min-height: min(720px, calc(100svh - 116px));
  padding-block: 88px 74px;
}

.hero-copy { position: relative; z-index: 2; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 26px;
  color: var(--warm);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .17em;
  line-height: 1.35;
  text-transform: uppercase;
}

.eyebrow-line { width: 30px; height: 1px; background: currentColor; }
.eyebrow-blue { color: #126abd; }
.eyebrow-light { color: var(--blue-light); }
.eyebrow-vote { color: var(--warm-light); }

h1, h2, h3, p, figure { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; hyphens: auto; overflow-wrap: break-word; }

h1 {
  margin-bottom: 28px;
  font-size: clamp(3.7rem, 5.9vw, 6.65rem);
  font-weight: 850;
  letter-spacing: -.025em;
  line-height: 1.1;
}

h1 em, h2 em {
  font-family: "Iowan Old Style", "Baskerville", "Palatino Linotype", Georgia, serif;
  font-weight: 500;
  letter-spacing: -.015em;
}

.hero h1 em { color: var(--blue-light); }
.period { color: var(--warm); }

.hero-lead {
  max-width: 570px;
  margin-bottom: 29px;
  color: #d5dff0;
  font-size: clamp(1.01rem, 1.25vw, 1.16rem);
  line-height: 1.72;
}

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.hero-actions .text-link { color: #e7f0fb; }
.hero-actions .text-link:hover { color: var(--warm); }
.hero-note { margin: 22px 0 0; color: #9fadca; font-size: .77rem; }

.hero-media { position: relative; min-width: 0; padding: 27px 10px 20px 20px; }

.orbit {
  position: absolute;
  z-index: -1;
  width: 560px;
  aspect-ratio: 1;
  border: 1px solid rgba(147, 205, 243, .19);
  border-radius: 50%;
  pointer-events: none;
}

.orbit-one { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.orbit-two { top: 50%; left: 50%; width: 690px; transform: translate(-50%, -50%); opacity: .55; }

.hero-photo {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 1 / 1.08;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 200px 200px 22px 22px;
  background: #242e42;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .35);
}

.hero-photo::after {
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(5, 13, 29, .78));
  content: "";
  pointer-events: none;
}

.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero-photo figcaption { position: absolute; z-index: 1; right: 24px; bottom: 20px; left: 24px; color: #fff; font-size: .76rem; font-weight: 700; letter-spacing: .015em; }

.floating-card {
  position: absolute;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 20px 45px rgba(6, 15, 32, .2);
  line-height: 1.2;
}

.floating-card-top {
  top: 11%;
  right: -5%;
  padding: 15px 18px;
  border-radius: 14px;
  background: var(--cream);
  color: var(--night);
  font-size: .78rem;
  font-weight: 800;
  transform: rotate(5deg);
}

.sparkle { margin-right: 3px; color: var(--blue); font-size: 1.25rem; }

.floating-card-bottom {
  bottom: 11%;
  left: -8%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 15px;
  background: var(--blue);
  color: #fff;
  transform: rotate(-5deg);
}

.floating-card-bottom strong { font-size: 2.2rem; line-height: 1; letter-spacing: -.06em; }
.floating-card-bottom span { font-size: .72rem; font-weight: 700; }

.hero-bottom { display: flex; align-items: center; gap: 16px; padding-bottom: 24px; color: #9baeca; font-size: .64rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.hero-bottom span:last-child { margin-left: auto; }
.scroll-line { width: 50px; height: 1px; background: #9baeca; }

/* The question and its local data space are the new opening scene. */
.hero .hero-inner { grid-template-columns: minmax(0, 1.07fr) minmax(0, .93fr); gap: clamp(34px, 4vw, 70px); min-height: 760px; padding-block: 82px 70px; }
.hero h1 { max-width: 750px; font-size: clamp(3.25rem, 4.45vw, 5.45rem); line-height: 1.1; letter-spacing: -.025em; }
.hero h1 em { color: var(--blue-light); }
.hero .hero-lead { max-width: 620px; font-size: 1.03rem; }
.hero-lead strong { color: #fff; font-weight: 780; }
.hero .hero-field { position: relative; display: grid; place-items: center; isolation: isolate; width: 100%; min-height: 0; padding: 0; aspect-ratio: 1; }
.hero-field::before { position: absolute; z-index: -1; inset: 9%; border-radius: 50%; background: radial-gradient(circle, rgba(32, 132, 218, .21), rgba(22, 102, 184, .08) 50%, transparent 70%); filter: blur(20px); content: ""; }
#ephraim-field { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.hero-field-ring { position: absolute; z-index: 0; top: 50%; left: 50%; border: 1px solid rgba(135, 209, 250, .2); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); }
.hero-field-ring-one { width: 84%; aspect-ratio: 1; box-shadow: 0 0 65px rgba(46, 144, 220, .1), inset 0 0 45px rgba(46, 144, 220, .07); }
.hero-field-ring-two { width: 63%; aspect-ratio: 1; border-style: dashed; border-color: rgba(155, 217, 249, .12); }
.field-core { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: clamp(142px, 15vw, 186px); aspect-ratio: 1; border: 1px solid rgba(163, 224, 255, .55); border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(39, 95, 158, .94), rgba(11, 29, 64, .96) 72%); box-shadow: 0 0 0 12px rgba(49, 131, 200, .07), 0 0 55px rgba(55, 158, 232, .34), inset 0 0 40px rgba(50, 155, 224, .16); text-align: center; }
.field-core img { width: 39%; height: auto; margin: 0 0 8px; filter: drop-shadow(0 3px 12px rgba(103, 204, 255, .27)); }
.field-core span { color: #fff; font-size: .86rem; font-weight: 850; letter-spacing: .18em; line-height: 1.15; }
.field-core small { margin-top: 6px; color: #b1d6f0; font-size: .58rem; font-weight: 710; letter-spacing: .06em; }
.field-label, .field-coordinate { position: absolute; z-index: 3; color: #a3d9f5; font-size: .59rem; font-weight: 800; letter-spacing: .16em; line-height: 1.2; white-space: nowrap; }
.field-label { padding: 8px 10px; border: 1px solid rgba(136, 202, 243, .2); border-radius: 5px; background: rgba(11, 24, 51, .72); box-shadow: 0 8px 25px rgba(0, 0, 0, .1); }
.field-label-top { top: 13%; left: 3%; }
.field-label-bottom { right: 1%; bottom: 16%; color: var(--warm-light); }
.field-coordinate { bottom: 1%; left: 50%; color: #718dae; transform: translateX(-50%); }

.proof-strip { background: #e9eef0; border-bottom: 1px solid #d9e1e5; }
.proof-inner { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; min-height: 76px; }
.proof-inner p { display: flex; align-items: center; justify-content: center; gap: 13px; margin: 0; color: #334357; font-size: .79rem; font-weight: 740; text-align: center; }
.proof-inner p + p { border-left: 1px solid #cfd8df; }
.proof-inner p span { color: var(--blue); font-size: 1.3rem; font-weight: 600; }
.star-icon { display: block; width: 1em; height: 1em; }

.section { padding-block: clamp(88px, 10vw, 145px); }
.section-heading { max-width: 840px; margin-bottom: 55px; }
.section-heading h2, .showcase-intro h2, .people-copy h2, .vote-copy h2 {
  margin-bottom: 25px;
  font-size: clamp(2.65rem, 4.3vw, 4.95rem);
  font-weight: 830;
  letter-spacing: -.028em;
  line-height: 1.12;
}

.section-heading h2 em, .people-copy h2 em { color: #126abd; }
.section-heading > p:last-child { max-width: 650px; margin-bottom: 0; color: var(--muted); font-size: 1.08rem; line-height: 1.78; }

.why-section { background: var(--cream); }
.context-story { display: grid; grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr) 50px minmax(0, 1fr); align-items: stretch; }

.story-step {
  position: relative;
  min-height: 290px;
  padding: 26px 27px 25px;
  border: 1px solid #e5e3dc;
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 12px 42px rgba(16, 27, 55, .05);
}

.story-step-accent { border-color: #b7d9f0; background: #e4f2fb; }
.story-number { position: absolute; top: 25px; right: 25px; color: #a6acb9; font-size: .68rem; font-weight: 790; letter-spacing: .12em; }
.story-icon { display: grid; place-items: center; width: 57px; height: 57px; margin-bottom: 42px; border-radius: 15px; background: #e9eff9; color: var(--blue); font-size: 1.5rem; font-weight: 700; }
.story-step-accent .story-icon { background: var(--blue); color: #fff; }
.story-step h3 { margin-bottom: 8px; font-size: 1.18rem; font-weight: 790; letter-spacing: -.035em; }
.story-step p { margin-bottom: 0; color: var(--muted); font-size: .87rem; line-height: 1.55; }
.story-connector { display: grid; place-items: center; color: var(--blue); font-size: 1.6rem; }

.insight { display: flex; align-items: flex-start; gap: 20px; max-width: 950px; margin: 48px auto 0; padding: 26px 32px; border-left: 3px solid var(--blue); border-radius: 0 16px 16px 0; background: #e7edf1; }
.insight-mark { display: grid; flex: 0 0 auto; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: white; font-size: 1rem; font-weight: 800; }
.insight p { margin: 0; color: #344359; font-size: .97rem; line-height: 1.68; }
.insight strong { color: var(--ink); }

.audio-prologue { position: relative; padding-block: clamp(65px, 7vw, 100px); background: #e9f1f5; }
.audio-inner { display: grid; grid-template-columns: 74px minmax(0, 1fr) minmax(300px, .93fr); align-items: center; gap: clamp(24px, 3.5vw, 52px); padding: clamp(28px, 4.2vw, 55px); border: 1px solid #d4e2e9; border-radius: 24px; background: #f9fcfc; box-shadow: 0 25px 65px rgba(23, 58, 87, .08); }
.audio-symbol { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 74px; height: 74px; border-radius: 20px; background: var(--blue); color: #fff; box-shadow: 0 14px 27px rgba(23, 111, 196, .17); line-height: .7; }
.audio-symbol span:first-child { font-size: 2.1rem; transform: rotate(-25deg); }
.audio-symbol span:last-child { margin-top: 4px; margin-left: 13px; font-size: .72rem; font-weight: 800; letter-spacing: .14em; }
.audio-copy .eyebrow { margin-bottom: 13px; }
.audio-copy h2 { max-width: 520px; margin-bottom: 14px; font-size: clamp(1.95rem, 2.65vw, 2.8rem); font-weight: 810; letter-spacing: -.02em; line-height: 1.2; }
.audio-copy > p:last-child { max-width: 550px; margin-bottom: 0; color: var(--muted); font-size: .91rem; line-height: 1.68; }
.audio-player { min-width: 0; padding: clamp(22px, 2.6vw, 32px); border: 1px solid #34527d; border-radius: 19px; background: radial-gradient(circle at 100% 0, #243f70, var(--night) 70%); color: #fff; box-shadow: 0 19px 45px rgba(16, 27, 55, .2); }
.audio-player-label { display: block; margin-bottom: 18px; color: var(--warm-light); font-size: .66rem; font-weight: 830; letter-spacing: .12em; line-height: 1.4; }
.audio-player audio { display: block; width: 100%; min-height: 44px; color-scheme: light; }
.audio-more { margin-top: 21px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .18); }
.audio-more summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 44px; cursor: pointer; color: #e8f3ff; font-size: .83rem; font-weight: 760; list-style: none; }
.audio-more summary::-webkit-details-marker { display: none; }
.audio-more summary:focus-visible { outline: 3px solid var(--warm); outline-offset: 5px; border-radius: 4px; }
.audio-more summary::before { content: "+"; margin-right: -8px; color: var(--warm); font-size: 1.15rem; line-height: 1; }
.audio-more[open] summary::before { content: "−"; }
.audio-more summary span { margin-left: auto; color: #a5c7e8; white-space: nowrap; }
.audio-more audio { margin-top: 17px; }
.audio-more a { display: inline-block; margin-top: 12px; color: #c3e3ff; font-size: .78rem; text-underline-offset: 4px; }
.audio-disclosure { margin: 20px 0 0; color: #adbed8; font-size: .72rem; line-height: 1.55; }

.dilemma-section { background: var(--cream); }
.dilemma-heading { max-width: 850px; margin-bottom: 47px; }
.dilemma-heading h2 { margin-bottom: 23px; font-size: clamp(2.7rem, 4.5vw, 5rem); font-weight: 830; letter-spacing: -.068em; line-height: 1.08; }
.dilemma-heading h2 em { color: var(--blue); }
.dilemma-heading > p:last-child { max-width: 690px; margin: 0; color: var(--muted); font-size: 1.04rem; line-height: 1.74; }
.dilemma-lab { overflow: hidden; border: 1px solid #d4dfe5; border-radius: 21px; background: #fff; box-shadow: 0 24px 60px rgba(16, 27, 55, .08); }
.dilemma-lab-header { display: flex; justify-content: space-between; gap: 20px; padding: 15px 25px; background: #172844; color: #b5cce4; font-size: .66rem; font-weight: 800; letter-spacing: .1em; line-height: 1.4; }
.dilemma-lab-header span:last-child { color: var(--warm-light); white-space: nowrap; }
.prompt-stage { border-top: 1px solid #dfe6ea; background: #fff; }
.prompt-stage:first-of-type { border-top: 0; }
.prompt-stage[open] { background: #f7fafb; }
.prompt-stage summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 34px; align-items: center; gap: 17px; min-height: 95px; padding: 19px 26px; cursor: pointer; list-style: none; transition: background .2s ease; }
.prompt-stage summary::-webkit-details-marker { display: none; }
.prompt-stage summary:focus-visible { outline: 3px solid var(--blue); outline-offset: -5px; }
.prompt-stage summary:hover, .prompt-stage[open] summary { background: #eef5f9; }
.prompt-stage-number { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #b9d4e8; border-radius: 50%; color: #2471b9; font-size: .69rem; font-weight: 840; }
.prompt-stage-title { color: var(--ink); font-size: 1.32rem; font-weight: 790; letter-spacing: -.04em; line-height: 1.25; }
.prompt-stage-state { color: #68778b; font-size: .78rem; font-weight: 720; text-align: right; }
.prompt-stage-arrow { color: var(--blue); font-size: 1.6rem; font-weight: 300; line-height: 1; text-align: right; transition: transform .2s ease; }
.prompt-stage[open] .prompt-stage-arrow { transform: rotate(45deg); }
.prompt-stage-body { display: grid; grid-template-columns: minmax(0, 1.07fr) minmax(0, .93fr); align-items: start; gap: clamp(25px, 4vw, 60px); padding: 4px 38px 36px 87px; }
.prompt-stage-body blockquote { position: relative; margin: 0; padding: 22px 25px; border-left: 3px solid var(--blue); border-radius: 0 12px 12px 0; background: #e7f1f9; color: #193a61; font-size: 1.02rem; font-weight: 640; line-height: 1.65; }
.prompt-stage-body p { margin: 0; color: #526176; font-size: .9rem; line-height: 1.69; }
.prompt-stage:nth-of-type(2) .prompt-stage-body blockquote { border-left-color: #df9b54; background: #fff2e3; color: #624a35; }
.prompt-stage:nth-of-type(3) .prompt-stage-body blockquote { border-left-color: #94a3b4; background: #edf0f2; color: #4d5968; }

.perspective-note { display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: start; gap: 17px; max-width: 870px; margin: 28px auto 0; padding: 22px 29px; border-left: 3px solid #176fc4; border-radius: 0 14px 14px 0; background: #e8f1f7; }
.perspective-note > span { color: var(--blue); font-size: 2rem; font-weight: 650; line-height: 1; }
.perspective-note p { margin: 0; color: #46576d; font-size: .96rem; line-height: 1.68; }
.perspective-note strong { color: #1b3658; }

.answer-panel { position: relative; overflow: hidden; margin-top: 28px; padding: clamp(34px, 5.8vw, 74px); border: 1px solid #335477; border-radius: 24px; background: radial-gradient(circle at 90% 9%, rgba(48, 142, 213, .28), transparent 31%), linear-gradient(135deg, #102441, #0b1731 70%); color: #fff; box-shadow: 0 28px 65px rgba(16, 27, 55, .16); }
.answer-panel::after { position: absolute; top: -100px; right: -90px; width: 360px; height: 360px; border: 1px solid rgba(156, 218, 254, .15); border-radius: 50%; content: ""; pointer-events: none; }
.answer-head { position: relative; z-index: 1; max-width: 870px; }
.answer-kicker { display: block; margin-bottom: 21px; color: var(--warm); font-size: .7rem; font-weight: 850; letter-spacing: .16em; }
.answer-head h3 { margin-bottom: 25px; font-size: clamp(2.5rem, 4.1vw, 4.45rem); font-weight: 810; letter-spacing: -.025em; line-height: 1.14; }
.answer-head h3 em { color: var(--blue-light); }
.answer-head p { max-width: 760px; margin: 0; color: #d6e5f5; font-size: 1.02rem; line-height: 1.76; }
.answer-flow { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 12px; margin-top: 39px; }
.answer-flow > div { display: flex; align-items: center; gap: 15px; min-height: 90px; padding: 18px 19px; border: 1px solid rgba(166, 217, 251, .28); border-radius: 12px; background: rgba(126, 193, 240, .08); }
.answer-flow > div:last-of-type { border-color: rgba(255, 199, 130, .45); background: rgba(255, 182, 108, .12); }
.answer-flow > div span { color: var(--warm); font-size: .68rem; font-weight: 850; }
.answer-flow > div strong { font-size: .87rem; font-weight: 750; line-height: 1.32; }
.answer-flow-line { align-self: center; color: var(--warm); font-size: 1.25rem; }
.answer-footnote { position: relative; z-index: 1; max-width: 880px; margin: 29px 0 0; padding-top: 24px; border-top: 1px solid rgba(192, 220, 245, .19); color: #aebfd5; font-size: .8rem; line-height: 1.65; }

.showcase-section {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 100% 10%, rgba(29, 106, 179, .19), transparent 33%), var(--night-deep);
  color: #fff;
}

.showcase-section::before { position: absolute; top: 0; right: 8%; width: 450px; height: 450px; border: 1px solid rgba(156, 204, 242, .08); border-radius: 50%; content: ""; pointer-events: none; }
.showcase-intro { display: grid; grid-template-columns: 1fr minmax(0, 390px); align-items: end; gap: 60px; margin-bottom: 47px; }
.showcase-intro h2 { margin-bottom: 0; }
.showcase-intro h2 em { color: var(--blue-light); }
.showcase-intro > p { margin-bottom: 5px; color: #b9c9e4; font-size: .98rem; line-height: 1.77; }

.showcase-card { overflow: hidden; border: 1px solid rgba(255, 255, 255, .13); border-radius: 24px; background: #eef2f4; box-shadow: 0 30px 90px rgba(0, 0, 0, .2); color: var(--ink); }
.showcase-tabs { display: none; }
.js .showcase-tabs { display: flex; background: #162646; }
.showcase-tab { flex: 1 1 0; min-width: 0; padding: 18px 25px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #aebed8; cursor: pointer; font-size: .87rem; font-weight: 730; text-align: left; transition: background .2s ease, color .2s ease; }
.showcase-tab + .showcase-tab { border-left: 1px solid rgba(255, 255, 255, .08); }
.showcase-tab span { margin-right: 18px; color: #7890b7; font-size: .67rem; font-weight: 800; letter-spacing: .1em; }
.showcase-tab:hover, .showcase-tab.is-active { background: #20375f; color: #fff; }
.showcase-tab.is-active { border-bottom-color: var(--warm); }
.showcase-tab.is-active span { color: var(--warm); }
.showcase-tab:focus-visible { outline-offset: -5px; }

.showcase-panel { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); min-height: 470px; }
.showcase-panel + .showcase-panel { border-top: 2px solid var(--night-soft); }
.js .showcase-panel:not(.is-active) { display: none; }
.panel-copy { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(30px, 4vw, 58px); }
.panel-kicker { margin-bottom: 30px; color: #2471b9; font-size: .67rem; font-weight: 830; letter-spacing: .15em; text-transform: uppercase; }
.panel-copy h3 { max-width: 420px; margin-bottom: 22px; font-size: clamp(2rem, 2.7vw, 3.05rem); font-weight: 810; letter-spacing: -.02em; line-height: 1.18; }
.panel-copy p { max-width: 425px; margin-bottom: 30px; color: var(--muted); font-size: .96rem; line-height: 1.68; }
.panel-caption { margin-top: auto; color: #687993; font-size: .72rem; }
.panel-visual { display: grid; align-items: center; min-width: 0; overflow: hidden; background: #c8d6e3; }
.panel-visual-screen { padding: 42px 0 0 35px; background: radial-gradient(circle at 70% 5%, #dceaf5, #b5cbe0); }
.panel-visual-screen img { width: 100%; height: 100%; max-height: 500px; object-fit: cover; object-position: left top; border: 7px solid #fff; border-right: 0; border-bottom: 0; border-radius: 17px 0 0 0; box-shadow: -20px 20px 50px rgba(21, 33, 59, .17); }
.panel-visual-photo img { width: 100%; height: 100%; object-fit: cover; }

.people-section { padding-bottom: clamp(70px, 8vw, 110px); background: #f0ece3; }
.people-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .91fr); align-items: center; gap: clamp(50px, 8vw, 116px); }
.people-copy h2 { margin-bottom: 34px; }
.people-copy > p:not(.eyebrow) { max-width: 590px; margin-bottom: 20px; color: var(--muted); font-size: .99rem; line-height: 1.78; }
.people-copy .text-link { margin-top: 15px; }
.people-photo { overflow: hidden; width: 100%; margin: 0; border: 1px solid rgba(20, 37, 69, .12); border-radius: 21px; background: var(--night); box-shadow: 0 25px 55px rgba(16, 27, 55, .14); }
.people-photo img { display: block; width: 100%; height: auto; }
.people-photo figcaption { padding: 14px 19px; color: #d5e4f3; font-size: .74rem; font-weight: 720; letter-spacing: .025em; line-height: 1.4; }
.people-art { position: relative; padding: 13px; border: 1px solid rgba(20, 37, 69, .13); border-radius: 220px 220px 20px 20px; }
.people-art img { width: 100%; aspect-ratio: .84; object-fit: cover; object-position: 49% center; border-radius: 210px 210px 11px 11px; filter: grayscale(1) contrast(1.07); }
.people-art-label { position: absolute; right: -20px; bottom: 34px; padding: 15px 21px; border-radius: 12px; background: var(--warm); color: var(--night); font-size: .83rem; font-weight: 810; line-height: 1.12; transform: rotate(-6deg); box-shadow: 0 12px 30px rgba(16, 27, 55, .15); }
.people-art-label span { position: absolute; top: -19px; right: -8px; color: var(--blue); font-size: 2rem; }
.statement { display: flex; align-items: center; gap: 26px; margin-top: clamp(75px, 10vw, 140px); padding-top: 30px; border-top: 1px solid #d5d6d2; }
.statement-star { flex: 0 0 auto; color: var(--blue); font-size: 2.2rem; }
.statement p { max-width: 820px; margin: 0; font-size: clamp(1.55rem, 2.6vw, 2.55rem); font-weight: 760; letter-spacing: -.015em; line-height: 1.25; }

.assurance-section { background: #f9faf8; }
.assurance-header { max-width: 810px; margin-bottom: 48px; }
.assurance-header h2 { margin-bottom: 23px; font-size: clamp(2.65rem, 4.3vw, 4.95rem); font-weight: 830; letter-spacing: -.028em; line-height: 1.12; }
.assurance-header h2 em { color: #126abd; }
.assurance-header > p:last-child { max-width: 640px; margin-bottom: 0; color: var(--muted); font-size: 1.04rem; line-height: 1.75; }
.assurance-photos { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; margin-bottom: 31px; }
.assurance-photo { position: relative; overflow: hidden; height: clamp(360px, 38vw, 510px); margin: 0; border: 1px solid #d4dde2; border-radius: 18px; background: #c8d2d8; box-shadow: 0 20px 45px rgba(16, 27, 55, .1); }
.assurance-photo::after { position: absolute; inset: 42% 0 0; background: linear-gradient(transparent, rgba(7, 20, 42, .78)); content: ""; pointer-events: none; }
.assurance-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.assurance-photo-main img { object-position: 50% 42%; }
.assurance-photo-secondary img { object-position: 50% 80%; }
.assurance-photo figcaption { position: absolute; z-index: 1; right: 24px; bottom: 22px; left: 24px; max-width: 440px; color: #fff; font-size: .86rem; font-weight: 760; line-height: 1.35; text-shadow: 0 2px 12px rgba(0, 0, 0, .4); }
.assurance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.assurance-card { display: grid; grid-template-columns: 1fr auto; align-content: start; column-gap: 15px; min-height: 260px; padding: clamp(25px, 3vw, 37px); border: 1px solid #dce5e8; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(16, 27, 55, .035); }
.assurance-number { align-self: center; color: #286da5; font-size: .68rem; font-weight: 820; letter-spacing: .11em; line-height: 1.3; text-transform: uppercase; }
.assurance-status { align-self: start; padding: 5px 9px; border-radius: 100px; background: #e3f4ef; color: #236451; font-size: .63rem; font-weight: 780; line-height: 1.3; white-space: nowrap; }
.assurance-card-future { border-color: #bcd9ed; background: #edf6fc; }
.assurance-card-future .assurance-status { background: #d5eafa; color: #135e98; }
.assurance-card h3 { grid-column: 1 / -1; margin: 47px 0 13px; font-size: clamp(1.3rem, 1.7vw, 1.65rem); font-weight: 790; letter-spacing: -.015em; line-height: 1.25; }
.assurance-card p { grid-column: 1 / -1; max-width: 490px; margin: 0; color: var(--muted); font-size: .89rem; line-height: 1.68; }
.assurance-card .assurance-identity { margin-bottom: 12px; color: #294660; font-size: .87rem; font-weight: 720; }
.assurance-link { grid-column: 1 / -1; align-self: end; justify-self: start; margin-top: 23px; color: #1168b6; font-size: .82rem; font-weight: 780; line-height: 1.45; text-decoration: underline; text-underline-offset: 4px; }
.assurance-link:hover { color: #074d8e; }
.assurance-note { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: 34px; padding-top: 26px; border-top: 1px solid #d9e3e8; }
.assurance-note p { max-width: 570px; margin: 0; color: #68758a; font-size: .79rem; line-height: 1.55; }
.assurance-note a { flex: 0 0 auto; font-size: .84rem; }

.vote-section { position: relative; display: flow-root; overflow: clip; background: #1264b6; color: #fff; }
.vote-section::before { position: absolute; inset: 0; background: radial-gradient(circle at 0% 0%, rgba(178, 223, 255, .16), transparent 37%), linear-gradient(120deg, rgba(12, 48, 100, .18), transparent 58%); content: ""; pointer-events: none; }
/* Inline geometry avoids a colored emoji tile in platform font fallbacks. */
.vote-decoration { position: absolute; right: -42px; bottom: -120px; display: block; width: min(60vw, 720px); height: auto; color: #fff; opacity: .07; pointer-events: none; }
/* Suppress the old emoji if an upload updates CSS before index.php. */
div.vote-decoration { display: none; }
.vote-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: clamp(40px, 8vw, 110px); }
.vote-copy h2 { max-width: 750px; }
.vote-copy h2 em { color: var(--warm-light); }
.vote-copy > p:not(.eyebrow, .vote-status, .share-feedback) { max-width: 660px; color: #dbeaf9; font-size: 1.03rem; line-height: 1.77; }
.vote-copy > p strong { color: #fff; }
.vote-status { display: flex; align-items: center; gap: 9px; margin: 22px 0 25px; color: #f4faff; font-size: .87rem; font-weight: 730; }
.vote-status span { color: var(--warm); font-size: .7rem; }
.vote-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 23px; }
.share-button { min-height: 52px; padding: 7px 0; border: 0; background: transparent; color: #fff; cursor: pointer; font-size: .91rem; font-weight: 750; text-decoration: underline; text-underline-offset: 5px; }
.share-button:hover { color: var(--warm-light); }
.share-feedback { margin: 12px 0 0; color: #d9edff; font-size: .8rem; }
.share-feedback:empty { display: none; }


.support-section { padding-block: 62px; background: var(--warm-light); }
.support-inner { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; align-items: center; gap: 26px; }
.support-icon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 17px; background: #fff7ec; color: #d25b3d; font-size: 2rem; }
.support-inner .eyebrow { margin-bottom: 9px; }
.support-inner h2 { margin-bottom: 7px; font-size: clamp(1.7rem, 2.5vw, 2.65rem); font-weight: 810; letter-spacing: -.02em; line-height: 1.22; }
.support-inner p:last-child { max-width: 640px; margin-bottom: 0; color: #5d5660; font-size: .86rem; line-height: 1.55; }
.support-inner .button { white-space: nowrap; }
.support-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }

.site-footer { padding-block: 62px 24px; background: var(--night-deep); color: #fff; }
.footer-main { display: grid; grid-template-columns: 1fr minmax(0, 380px) auto; align-items: start; gap: 50px; padding-bottom: 62px; }
.footer-brand { display: flex; align-items: center; gap: 13px; }
.footer-brand img { width: 54px; height: 54px; }
.footer-brand div { display: grid; gap: 3px; }
.footer-brand strong { font-size: 1.55rem; letter-spacing: -.015em; line-height: 1.1; }
.footer-brand span { color: #a6bad8; font-size: .75rem; }
.footer-main > p { margin: 6px 0 0; color: #a9b9d2; font-size: .85rem; line-height: 1.7; }
.back-top { padding-top: 6px; color: #dbeaff; font-size: .82rem; font-weight: 730; text-decoration: none; white-space: nowrap; }
.back-top:hover { color: var(--warm); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .13); color: #8ca2c1; font-size: .74rem; }
.footer-bottom div { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-bottom a { color: #b6c7df; text-decoration: none; }
.footer-bottom a:hover { color: #fff; text-decoration: underline; }

.mobile-vote { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .js .reveal.is-visible { animation: arrive .7s cubic-bezier(.2, .7, .2, 1) both; }
  .assurance-card:nth-child(2).is-visible,
  .assurance-card:nth-child(4).is-visible { animation-delay: .09s; }
  .hero-photo img { transition: transform .7s ease; }
  .hero-photo:hover img { transform: scale(1.035); }
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
  .hero-inner { gap: 32px; }
  h1 { font-size: clamp(3.6rem, 6.4vw, 5.7rem); }
  .hero h1 { font-size: clamp(3.15rem, 4.8vw, 4.7rem); }
  .audio-inner { grid-template-columns: 74px minmax(0, 1fr); }
  .audio-player { grid-column: 2; }
  .floating-card-top { right: -2%; }
  .floating-card-bottom { left: -4%; }
  .people-grid { gap: 54px; }
  .support-inner { grid-template-columns: 60px minmax(0, 1fr); }
  .support-actions { grid-column: 2; }
  .support-inner .button { grid-column: 2; justify-self: start; }
}

@media (max-width: 850px) {
  .header-inner { min-height: 72px; }
  .main-nav { display: none; }
  .header-cta { margin-left: auto; }
  .hero-inner { grid-template-columns: 1fr; min-height: auto; padding-block: 80px 45px; }
  .hero .hero-inner { grid-template-columns: 1fr; min-height: 0; gap: 27px; padding-block: 75px 40px; }
  .hero h1 { max-width: 690px; font-size: clamp(3.25rem, 7.2vw, 4.7rem); }
  .hero .hero-field { width: min(100%, 570px); justify-self: center; }
  .hero-copy { max-width: 690px; }
  .hero-lead { max-width: 640px; }
  .hero-media { width: min(100%, 650px); justify-self: center; padding: 30px 38px 25px; }
  .hero-photo { aspect-ratio: 1.12; border-radius: 180px 180px 22px 22px; }
  .floating-card-top { right: 2%; }
  .floating-card-bottom { left: 2%; }
  .showcase-intro { grid-template-columns: 1fr; gap: 16px; }
  .showcase-intro > p { max-width: 620px; }
  .showcase-panel { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .people-grid { grid-template-columns: 1fr; gap: 48px; }
  .people-art { width: min(100%, 570px); justify-self: center; }
  .people-art img { aspect-ratio: 1.13; }
  .people-photo { width: min(100%, 690px); justify-self: center; }
  .prompt-stage-body { grid-template-columns: 1fr; gap: 18px; padding-right: 28px; }
  .answer-flow { gap: 8px; }
  .answer-flow > div { flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; min-height: 96px; }
  .assurance-note { align-items: flex-start; flex-direction: column; gap: 14px; }
  .vote-grid { grid-template-columns: 1fr; gap: 50px; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .back-top { grid-column: 1 / -1; }
}

@media (max-width: 650px) {
  .container { width: min(calc(100% - 34px), var(--container)); }
  .announcement { min-height: 36px; gap: 7px; padding-inline: 12px; font-size: .74rem; }
  .announcement a { display: none; }
  .header-inner { min-height: 66px; gap: 10px; }
  .brand img { width: 36px; height: 36px; }
  .brand strong { font-size: 1.13rem; }
  .brand small { display: none; }
  .header-cta { min-height: 38px; padding-inline: 12px; gap: 6px; font-size: .72rem; }
  .hero-inner { gap: 35px; padding-block: 67px 25px; }
  .hero .hero-inner { gap: 12px; padding-block: 58px 23px; }
  .eyebrow { margin-bottom: 20px; font-size: .64rem; }
  h1 { margin-bottom: 23px; font-size: clamp(3rem, 11.2vw, 4.6rem); letter-spacing: -.025em; }
  .hero h1 { margin-bottom: 20px; font-size: clamp(2.4rem, 9.4vw, 3.5rem); line-height: 1.1; letter-spacing: -.025em; }
  .hero-lead { margin-bottom: 24px; font-size: .98rem; line-height: 1.68; }
  .hero .hero-lead { font-size: .92rem; line-height: 1.67; }
  .hero-actions { align-items: flex-start; gap: 19px; }
  .hero-actions .button { width: 100%; }
  .hero-actions .text-link { margin-left: 2px; }
  .hero-note { margin-top: 22px; font-size: .8rem; }
  .hero-media { padding: 13px 17px 15px; }
  .hero .hero-field { width: min(100%, 475px); padding: 0; }
  .field-core { width: clamp(115px, 37vw, 154px); }
  .field-core img { width: 38%; margin-bottom: 6px; }
  .field-core span { font-size: .68rem; }
  .field-core small { font-size: .5rem; }
  .field-label, .field-coordinate { font-size: .48rem; letter-spacing: .1em; }
  .field-label { padding: 6px 7px; }
  .field-label-top { top: 10%; left: 0; }
  .field-label-bottom { right: 0; bottom: 14%; }
  .hero-photo { aspect-ratio: 1.05; border-radius: 150px 150px 18px 18px; }
  .hero-photo figcaption { right: 15px; bottom: 13px; left: 15px; font-size: .65rem; }
  .floating-card-top { top: 7%; right: 0; padding: 9px 11px; font-size: .61rem; }
  .sparkle { font-size: 1rem; }
  .floating-card-bottom { bottom: 12%; left: 0; gap: 7px; padding: 9px 12px; }
  .floating-card-bottom strong { font-size: 1.6rem; }
  .floating-card-bottom span { font-size: .56rem; }
  .hero-bottom { padding-bottom: 17px; font-size: .57rem; }
  .proof-inner { grid-template-columns: 1fr; padding-block: 12px; }
  .proof-inner p { justify-content: flex-start; min-height: 37px; text-align: left; }
  .proof-inner p + p { border-left: 0; }
  .proof-inner p span { width: 24px; font-size: 1.05rem; text-align: center; }
  .section { padding-block: 78px; }
  .audio-prologue { padding-block: 50px 60px; }
  .audio-inner { grid-template-columns: 1fr; gap: 19px; padding: 24px 21px; border-radius: 18px; }
  .audio-symbol { width: 55px; height: 55px; border-radius: 14px; }
  .audio-symbol span:first-child { font-size: 1.6rem; }
  .audio-symbol span:last-child { font-size: .57rem; }
  .audio-copy h2 { font-size: clamp(1.9rem, 8.1vw, 2.6rem); }
  .audio-copy > p:last-child { font-size: .88rem; }
  .audio-player { grid-column: auto; padding: 22px 20px; }
  .audio-more summary { font-size: .77rem; }
  .dilemma-heading { margin-bottom: 31px; }
  .dilemma-heading h2 { font-size: clamp(2.4rem, 9.1vw, 3.55rem); }
  .dilemma-heading > p:last-child { font-size: .94rem; }
  .dilemma-lab { border-radius: 16px; }
  .dilemma-lab-header { display: block; padding: 13px 18px; font-size: .58rem; }
  .dilemma-lab-header span { display: block; }
  .dilemma-lab-header span + span { margin-top: 4px; }
  .prompt-stage summary { grid-template-columns: 34px minmax(0, 1fr) 25px; grid-template-rows: auto auto; gap: 2px 11px; min-height: 86px; padding: 16px 17px; }
  .prompt-stage-number { grid-row: 1 / 3; width: 31px; height: 31px; font-size: .61rem; }
  .prompt-stage-title { font-size: 1.06rem; }
  .prompt-stage-state { grid-column: 2; grid-row: 2; font-size: .67rem; text-align: left; }
  .prompt-stage-arrow { grid-column: 3; grid-row: 1 / 3; font-size: 1.4rem; }
  .prompt-stage-body { gap: 15px; padding: 0 17px 22px 62px; }
  .prompt-stage-body blockquote { padding: 16px; font-size: .88rem; line-height: 1.6; }
  .prompt-stage-body p { font-size: .83rem; }
  .perspective-note { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; margin-top: 17px; padding: 19px 18px; }
  .perspective-note > span { font-size: 1.45rem; }
  .perspective-note p { font-size: .84rem; }
  .answer-panel { margin-top: 17px; padding: 29px 23px; border-radius: 18px; }
  .answer-kicker { margin-bottom: 14px; font-size: .59rem; }
  .answer-head h3 { margin-bottom: 20px; font-size: clamp(2.12rem, 8.5vw, 3.1rem); }
  .answer-head p { font-size: .91rem; }
  .answer-flow { grid-template-columns: 1fr; gap: 6px; margin-top: 27px; }
  .answer-flow > div { flex-direction: row; align-items: center; min-height: 69px; padding: 13px 16px; }
  .answer-flow-line { justify-self: center; line-height: 1; transform: rotate(90deg); }
  .answer-footnote { margin-top: 24px; padding-top: 20px; font-size: .75rem; }
  .section-heading { margin-bottom: 35px; }
  .section-heading h2, .showcase-intro h2, .people-copy h2, .vote-copy h2 { margin-bottom: 20px; font-size: clamp(2.45rem, 9.5vw, 3.6rem); }
  .section-heading > p:last-child { font-size: .97rem; line-height: 1.72; }
  .context-story { grid-template-columns: 1fr; gap: 0; }
  .story-step { min-height: 0; padding: 22px 23px 24px; }
  .story-icon { width: 47px; height: 47px; margin-bottom: 20px; font-size: 1.3rem; }
  .story-step h3 { font-size: 1.08rem; }
  .story-connector { height: 33px; font-size: 1.35rem; transform: rotate(90deg); }
  .insight { gap: 12px; margin-top: 38px; padding: 20px 17px; }
  .insight-mark { width: 27px; height: 27px; }
  .insight p { font-size: .87rem; }
  .showcase-intro { margin-bottom: 30px; }
  .showcase-intro > p { font-size: .94rem; }
  .showcase-card { border-radius: 18px; }
  .js .showcase-tabs { overflow-x: auto; }
  .showcase-tab { flex: 0 0 auto; min-width: 155px; padding: 13px 13px; font-size: .73rem; white-space: nowrap; }
  .showcase-tab span { margin-right: 6px; }
  .showcase-panel { display: flex; flex-direction: column; min-height: 0; }
  .panel-copy { padding: 28px 25px 25px; }
  .panel-kicker { margin-bottom: 13px; }
  .panel-copy h3 { margin-bottom: 15px; font-size: 1.9rem; }
  .panel-copy p { margin-bottom: 15px; font-size: .9rem; }
  .panel-visual { min-height: 250px; }
  .panel-visual-screen { padding: 24px 0 0 20px; }
  .panel-visual-screen img { min-height: 235px; }
  .people-copy > p:not(.eyebrow) { font-size: .94rem; }
  .people-photo { border-radius: 15px; }
  .people-photo figcaption { padding: 11px 14px; font-size: .67rem; }
  .people-art { width: calc(100% - 15px); }
  .people-art img { aspect-ratio: .98; }
  .people-art-label { right: -15px; bottom: 24px; padding: 11px 14px; font-size: .67rem; }
  .statement { gap: 17px; margin-top: 70px; }
  .statement-star { font-size: 1.5rem; }
  .statement p { font-size: 1.48rem; }
  .assurance-header { margin-bottom: 34px; }
  .assurance-header h2 { font-size: clamp(2.45rem, 9.5vw, 3.6rem); }
  .assurance-header > p:last-child { font-size: .95rem; }
  .assurance-photos { grid-template-columns: 1fr; gap: 12px; margin-bottom: 24px; }
  .assurance-photo { height: auto; border-radius: 14px; }
  .assurance-photo-main { aspect-ratio: 4 / 3; }
  .assurance-photo-secondary { aspect-ratio: 16 / 10; }
  .assurance-photo-main img { object-position: 50% 43%; }
  .assurance-photo-secondary img { object-position: 50% 75%; }
  .assurance-photo figcaption { right: 17px; bottom: 14px; left: 17px; font-size: .76rem; }
  .assurance-grid { grid-template-columns: 1fr; gap: 12px; }
  .assurance-card { min-height: 0; padding: 23px; }
  .assurance-card h3 { margin-top: 35px; font-size: 1.45rem; }
  .assurance-card p { font-size: .86rem; }
  .assurance-card .assurance-identity { font-size: .83rem; }
  .assurance-link { font-size: .78rem; }
  .assurance-note { margin-top: 27px; }
  .vote-grid { gap: 38px; }
  .vote-copy > p:not(.eyebrow, .vote-status, .share-feedback) { font-size: .95rem; }
  .vote-actions { align-items: flex-start; gap: 10px; }
  .vote-actions .button { width: 100%; }
  .share-button { min-height: 38px; }
  .support-section { padding-block: 48px; }
  .support-inner { display: block; }
  .support-icon { width: 53px; height: 53px; margin-bottom: 20px; font-size: 1.5rem; }
  .support-inner .button { width: 100%; margin-top: 23px; white-space: normal; }
  .support-actions { align-items: stretch; gap: 8px; }
  .site-footer { padding-top: 48px; }
  .footer-main { grid-template-columns: 1fr; gap: 18px; padding-bottom: 36px; }
  .back-top { grid-column: auto; }
  .footer-bottom { flex-direction: column; gap: 16px; }
  .footer-bottom div { gap: 15px; }
  body[data-voting-state="open"] { padding-bottom: calc(69px + env(safe-area-inset-bottom)); }
  .mobile-vote { position: fixed; z-index: 90; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: calc(69px + env(safe-area-inset-bottom)); padding: 11px 17px calc(11px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .2); background: var(--night-deep); color: #c8d7ed; box-shadow: 0 -10px 25px rgba(11, 20, 43, .2); }
  .mobile-vote > span { font-size: .78rem; font-weight: 700; line-height: 1.25; }
  .mobile-vote a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 43px; padding: 9px 13px; border-radius: 9px; background: var(--warm); color: var(--night-deep); font-size: .84rem; font-weight: 810; text-decoration: none; white-space: nowrap; }
}

@media (max-width: 380px) {
  .announcement { font-size: .69rem; }
  h1 { font-size: 11.5vw; }
  .hero h1 { font-size: 2.3rem; }
  .field-label { font-size: .43rem; }
  .prompt-stage-body { padding-left: 17px; }
  .mobile-vote > span { max-width: 100px; }
  .assurance-card { grid-template-columns: 1fr; }
  .assurance-status { justify-self: start; margin-top: 9px; }
  .assurance-card h3 { margin-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Ephraim / 2026: an immersive data lab, built entirely from local assets. */
:root {
  color-scheme: dark;
  --ink: #f4fbff;
  --night: #081421;
  --night-deep: #050c16;
  --night-soft: #102336;
  --cream: #0a1725;
  --paper: #102235;
  --blue: #75edf0;
  --blue-light: #a8f9f4;
  --warm: #caff8e;
  --warm-light: #e3ffc2;
  --muted: #adc4d1;
  --line: rgba(130, 216, 234, .2);
  --signal: #caff8e;
  --aqua: #75edf0;
  --violet: #b8a5ff;
  --danger: #ff9ba5;
  --amber: #ffd09b;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --container: 1240px;
}
body { background: #050c16; color: #c7dce8; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
h1, h2, h3 { color: #f4fbff; }
strong { color: #f4fbff; }
::selection { background: var(--aqua); color: #061321; }
:focus-visible { outline-color: var(--signal); }
.container { width: min(calc(100% - 64px), var(--container)); }
.announcement { border-bottom: 1px solid rgba(117, 237, 240, .2); background: #0b2530; color: #dcf8f5; font-family: var(--mono); font-size: .66rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.announcement-dot { background: var(--signal); box-shadow: 0 0 14px var(--signal); animation: ep-pulse 2.7s ease-in-out infinite; }
.announcement a { color: var(--signal); }
.site-header { border-bottom: 1px solid rgba(130, 216, 234, .16); background: rgba(5, 14, 25, .9); backdrop-filter: blur(20px) saturate(1.25); -webkit-backdrop-filter: blur(20px) saturate(1.25); }
.header-inner { min-height: 74px; }
.brand img { filter: drop-shadow(0 0 11px rgba(117, 237, 240, .31)); }
.brand strong { color: #f4fbff; }
.brand small { color: #91a9bb; font-family: var(--mono); font-size: .59rem; }
.main-nav a { color: #bdd0db; font-size: .79rem; }
.main-nav a:hover { color: var(--aqua); }
.button { border-radius: 4px; font-size: .85rem; }
.button-dark { border: 1px solid rgba(117, 237, 240, .5); background: rgba(117, 237, 240, .06); color: #c9f8f7; }
.button-dark:hover { border-color: var(--aqua); background: rgba(117, 237, 240, .16); box-shadow: 0 0 25px rgba(117, 237, 240, .13); }
.button-primary, .button-white { background: var(--signal); color: #07181e; box-shadow: 0 0 35px rgba(202, 255, 142, .16); }
.button-primary:hover, .button-white:hover { background: #e1ffbd; box-shadow: 0 0 40px rgba(202, 255, 142, .3); }
.text-link, .text-link-blue { color: var(--aqua); }
.text-link:hover, .text-link-blue:hover { color: var(--signal); }
.eyebrow, .eyebrow-blue, .eyebrow-light { color: var(--aqua); font-family: var(--mono); font-size: .68rem; letter-spacing: .13em; }
.eyebrow-vote { color: var(--signal); }

.hero { background: radial-gradient(ellipse at 79% 35%, rgba(33, 96, 151, .34), transparent 42%), radial-gradient(ellipse at 15% -12%, rgba(68, 78, 150, .16), transparent 43%), linear-gradient(120deg, #050d18, #071626 67%, #081420); }
.hero::before { position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 70%, rgba(5, 12, 22, .72)), repeating-linear-gradient(90deg, transparent 0 122px, rgba(149, 215, 239, .03) 123px 124px); content: ""; pointer-events: none; }
.hero::after { position: absolute; top: 0; right: -10%; z-index: -1; width: 65%; height: 1px; background: linear-gradient(90deg, transparent, rgba(117, 237, 240, .7), transparent); content: ""; box-shadow: 0 0 35px 3px rgba(117, 237, 240, .2); animation: ep-scan 12s linear infinite; pointer-events: none; }
.hero-grid { opacity: .48; background-image: linear-gradient(rgba(147, 219, 241, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(147, 219, 241, .07) 1px, transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(100deg, transparent 17%, #000 77%); }
.hero .hero-inner { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); align-items: center; gap: clamp(16px, 3vw, 55px); min-height: min(790px, calc(100svh - 110px)); padding-block: clamp(70px, 8vw, 110px) 60px; }
.hero h1 { max-width: 790px; margin-bottom: 27px; font-size: clamp(3.5rem, 5.6vw, 6.7rem); font-weight: 800; letter-spacing: -.026em; line-height: 1.11; }
.hero h1 em { color: var(--aqua); font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; background: linear-gradient(112deg, #e6fffd 4%, #75edf0 47%, #b8a5ff 94%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero .hero-lead { max-width: 615px; color: #c0d4e2; font-size: clamp(1rem, 1.15vw, 1.11rem); line-height: 1.75; }
.hero-lead strong { color: #f4fbff; }
.hero-note { color: #89a6b9; font-family: var(--mono); font-size: .67rem; }
.hero-bottom { color: #86a9bc; font-family: var(--mono); }
.scroll-line { background: var(--aqua); box-shadow: 0 0 12px var(--aqua); }
.hero-field::before { background: radial-gradient(circle, rgba(74, 239, 225, .27), rgba(40, 119, 188, .1) 52%, transparent 75%); animation: ep-breathe 5.2s ease-in-out infinite; }
.hero-field-ring-one { border-color: rgba(117, 237, 240, .28); box-shadow: 0 0 50px rgba(60, 213, 221, .12); }
.hero-field-ring-two { border-color: rgba(117, 237, 240, .23); animation: ep-orbit 70s linear infinite; }
.field-core { border-color: rgba(117, 237, 240, .78); background: radial-gradient(circle at 40% 30%, #2b647a, #0c263d 65%, #061726); box-shadow: 0 0 0 13px rgba(80, 230, 222, .055), 0 0 70px rgba(69, 224, 226, .4), inset 0 0 42px rgba(69, 224, 226, .12); }
.field-core small { color: #c0f5f2; }
.field-label { border-color: rgba(117, 237, 240, .36); border-radius: 0; background: rgba(5, 20, 34, .76); }
.field-label::before { display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: var(--signal); content: ""; box-shadow: 0 0 9px var(--signal); vertical-align: 2px; }
.field-label-bottom { color: var(--amber); }
.field-coordinate { color: #82a1b3; }
.proof-strip { border-block: 1px solid rgba(117, 237, 240, .21); background: #0a202b; }
.proof-inner p { color: #c9e5e5; font-family: var(--mono); font-size: .72rem; }
.proof-inner p + p { border-left-color: rgba(117, 237, 240, .17); }
.proof-inner p span { color: var(--aqua); }
.section h2 { color: #f4fbff; font-size: clamp(2.75rem, 4.6vw, 5.45rem); font-weight: 800; letter-spacing: -.028em; line-height: 1.13; }
.section h2 em, .answer-head h3 em { color: var(--aqua); font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; }
@keyframes ep-pulse { 50% { opacity: .48; box-shadow: 0 0 5px var(--signal); } }
@keyframes ep-status-pulse { 50% { opacity: .48; } }
@keyframes ep-scan { 0%, 100% { top: 0; opacity: 0; } 7%, 75% { opacity: .6; } 85% { top: 100%; opacity: 0; } }
@keyframes ep-breathe { 50% { opacity: .57; transform: scale(.93); } }
@keyframes ep-orbit { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

/* The student's decision becomes a live data path. */
.signal-section { position: relative; overflow: hidden; background: radial-gradient(circle at 105% 22%, rgba(69, 109, 172, .14), transparent 36%), linear-gradient(180deg, #081723, #07121f 78%); }
.signal-section::before { position: absolute; top: 11%; right: -10%; width: 52%; aspect-ratio: 1; border: 1px solid rgba(117, 237, 240, .07); border-radius: 50%; content: ""; box-shadow: 0 0 0 90px rgba(117, 237, 240, .012), 0 0 0 180px rgba(117, 237, 240, .008); pointer-events: none; }
.signal-intro { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 390px); align-items: end; gap: 42px; margin-bottom: 49px; }
.signal-intro h2 { max-width: 810px; margin-bottom: 0; }
.signal-intro > p { margin-bottom: 6px; color: #aabfcd; font-size: .96rem; line-height: 1.76; }
.signal-lab { --route-color: var(--danger); position: relative; overflow: hidden; border: 1px solid rgba(117, 237, 240, .38); background: #0b1b2b; box-shadow: 0 30px 85px rgba(0, 0, 0, .25), 0 0 65px rgba(117, 237, 240, .04); }
.signal-lab::before { position: absolute; top: 0; left: 0; width: 36%; height: 2px; background: linear-gradient(90deg, var(--aqua), transparent); content: ""; box-shadow: 0 0 20px var(--aqua); pointer-events: none; }
.signal-lab[data-route="local"] { --route-color: var(--signal); border-color: rgba(202, 255, 142, .46); }
.signal-lab[data-stage="generic"][data-route="external"] { --route-color: var(--amber); }
.signal-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 45px; padding: 10px 24px; border-bottom: 1px solid rgba(117, 237, 240, .2); background: rgba(117, 237, 240, .07); color: var(--aqua); font: 780 .62rem/1.4 var(--mono); letter-spacing: .07em; }
.signal-topbar-title { display: inline-flex; align-items: center; gap: 10px; }
.signal-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 9px var(--signal); animation: ep-pulse 2.7s ease-in-out infinite; }
.signal-topbar-note { color: #bdcbcf; text-align: right; }
.signal-controls { display: none; grid-template-columns: 1.42fr 1fr; gap: clamp(20px, 4vw, 55px); padding: 26px 30px 29px; border-bottom: 1px solid rgba(117, 237, 240, .17); background: rgba(12, 36, 52, .67); }
.signal-ready .signal-controls { display: grid; }
.signal-control-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.signal-control-group legend { margin: 0 0 13px; padding: 0; color: #dceaf0; font: 740 .72rem/1.35 var(--mono); }
.signal-control-group legend span { margin-right: 7px; color: var(--aqua); }
.signal-choice-row { display: flex; flex-wrap: wrap; gap: 7px; }
.signal-choice { min-height: 45px; padding: 9px 13px; border: 1px solid rgba(117, 237, 240, .25); border-radius: 2px; background: rgba(117, 237, 240, .035); color: #a9c3d0; cursor: pointer; font-size: .76rem; font-weight: 750; line-height: 1.3; text-align: left; transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.signal-choice:hover { border-color: var(--aqua); color: #f4fbff; }
.signal-choice.is-active, .signal-choice[aria-pressed="true"] { border-color: var(--aqua); background: rgba(117, 237, 240, .15); color: #f5ffff; box-shadow: inset 0 -2px var(--aqua), 0 0 20px rgba(117, 237, 240, .065); }
.signal-choice[data-signal-route="local"].is-active { border-color: var(--signal); background: rgba(202, 255, 142, .13); box-shadow: inset 0 -2px var(--signal), 0 0 20px rgba(202, 255, 142, .075); }
.signal-stage-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(155px, .53fr) minmax(0, 1fr); align-items: stretch; min-height: 365px; }
.signal-input, .signal-output { min-width: 0; margin: 0; padding: clamp(26px, 3vw, 39px); }
.signal-input { border-right: 1px solid rgba(117, 237, 240, .16); background: radial-gradient(circle at 0 100%, rgba(69, 156, 189, .075), transparent 58%); }
.signal-window-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 29px; color: var(--aqua); font: 760 .61rem/1.35 var(--mono); letter-spacing: .09em; }
.signal-window-head span:last-child { color: #77a0ad; letter-spacing: .22em; white-space: nowrap; }
.signal-prompt { position: relative; min-height: 116px; margin-bottom: 24px; padding-left: 20px; border-left: 2px solid var(--aqua); color: #f4fbff; font-size: clamp(1rem, 1.25vw, 1.19rem); font-weight: 660; line-height: 1.55; }
.signal-prompt::before { position: absolute; top: -3px; left: -4px; width: 6px; height: 6px; border-radius: 50%; background: var(--aqua); content: ""; box-shadow: 0 0 12px var(--aqua); }
.signal-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.signal-tags span { padding: 5px 7px; border: 1px solid rgba(255, 155, 165, .37); color: #ffb7bd; font: 740 .59rem/1.3 var(--mono); }
.signal-lab[data-stage="generic"] .signal-tags span { border-color: rgba(255, 208, 155, .4); color: var(--amber); }
.signal-input-caption { margin: 17px 0 0; color: #91acbd; font-size: .76rem; line-height: 1.58; }
.signal-route-visual { position: relative; display: grid; grid-template-rows: auto minmax(39px, 1fr) auto minmax(39px, 1fr) auto auto; justify-items: center; align-items: center; gap: 0; padding: 33px 8px 25px; border-right: 1px solid rgba(117, 237, 240, .16); background: repeating-linear-gradient(0deg, rgba(117, 237, 240, .025) 0 1px, transparent 1px 24px), rgba(5, 18, 30, .45); text-align: center; }
.signal-origin, .signal-destination { position: relative; z-index: 2; display: grid; place-content: center; width: 102px; min-height: 55px; padding: 8px; border: 1px solid rgba(117, 237, 240, .46); background: #102d3a; color: var(--aqua); font: 800 .69rem/1.1 var(--mono); letter-spacing: .07em; }
.signal-origin small, .signal-destination small { display: block; margin-top: 4px; color: #b9d0d7; font: 680 .57rem/1.1 var(--mono); letter-spacing: 0; }
.signal-destination { border-color: var(--route-color); background: rgba(255, 155, 165, .08); color: var(--route-color); }
.signal-lab[data-route="local"] .signal-destination { background: rgba(202, 255, 142, .1); }
.signal-wire { position: relative; display: block; width: 2px; height: 100%; min-height: 39px; background: linear-gradient(var(--aqua), var(--route-color)); box-shadow: 0 0 12px var(--aqua); }
.signal-wire-second { background: linear-gradient(var(--route-color), var(--route-color)); box-shadow: 0 0 10px var(--route-color); }
.signal-lab[data-route="external"]:not([data-stage="generic"]) .signal-wire-second { opacity: .14; filter: grayscale(1); }
.signal-packet { position: absolute; top: 0; left: -4px; width: 10px; height: 10px; border: 1px solid #f4fbff; border-radius: 50%; background: var(--route-color); box-shadow: 0 0 13px 3px var(--route-color); }
.signal-packet-late { animation-delay: 1.1s !important; }
.signal-lab[data-route="external"]:not([data-stage="generic"]) .signal-wire-second .signal-packet { display: none; }
.signal-gate { position: relative; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--route-color); border-radius: 50%; background: #16212a; color: var(--route-color); font: 800 1rem/1 var(--mono); box-shadow: 0 0 17px rgba(255, 155, 165, .17); }
.signal-lab[data-route="local"] .signal-gate { background: #1d352b; box-shadow: 0 0 19px rgba(202, 255, 142, .19); }
.signal-route-caption { max-width: 140px; margin-top: 12px; color: var(--route-color); font: 740 .6rem/1.35 var(--mono); }
.signal-output { display: flex; flex-direction: column; align-items: flex-start; background: radial-gradient(circle at 100% 100%, rgba(178, 103, 130, .07), transparent 54%); }
.signal-lab[data-route="local"] .signal-output { background: radial-gradient(circle at 100% 100%, rgba(202, 255, 142, .09), transparent 54%); }
.signal-output-kicker { margin-bottom: 22px; color: var(--route-color); font: 800 .64rem/1.35 var(--mono); letter-spacing: .13em; }
.signal-output h3 { max-width: 370px; margin-bottom: 20px; color: #f4fbff; font-size: clamp(1.65rem, 2.15vw, 2.55rem); font-weight: 800; letter-spacing: -.018em; line-height: 1.22; }
.signal-output > p { max-width: 400px; margin-bottom: 25px; color: #b5cbd5; font-size: .88rem; line-height: 1.68; }
.signal-readouts { display: grid; gap: 8px; width: 100%; margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(117, 237, 240, .2); }
.signal-readouts span { display: flex; justify-content: space-between; gap: 10px; color: #86a8b7; font: 700 .63rem/1.5 var(--mono); }
.signal-readouts strong { color: #f4fbff; font-weight: 770; text-align: right; }
.signal-readouts span:last-child strong { color: var(--route-color); }
.signal-insight { display: flex; gap: 16px; padding: 19px 30px; border-top: 1px solid rgba(117, 237, 240, .19); background: rgba(117, 237, 240, .047); }
.signal-insight-symbol { color: var(--aqua); font-size: 1.6rem; line-height: 1; }
.signal-insight p { max-width: 950px; margin: 0; color: #bfd2dc; font-size: .84rem; line-height: 1.65; }
.signal-caveat { max-width: 980px; margin: 18px 0 0; color: #92adbd; font-size: .75rem; line-height: 1.67; }
.signal-nojs { display: block; padding: 12px 24px; border-top: 1px solid rgba(117, 237, 240, .2); color: var(--amber); font-size: .79rem; }
@media (prefers-reduced-motion: no-preference) {
  .signal-ready .signal-packet { animation: ep-packet-stop 2.65s ease-in infinite; }
  .signal-ready[data-route="local"] .signal-packet,
  .signal-ready[data-route="external"][data-stage="generic"] .signal-packet { animation-name: ep-packet-pass; }
  .signal-ready[data-route="external"]:not([data-stage="generic"]) .signal-gate { animation: ep-gate 2.65s ease-in-out infinite; }
}
@keyframes ep-packet-stop { 0% { top: 0; opacity: 0; } 18% { opacity: 1; } 75% { top: 78%; opacity: 1; } 88%, 100% { top: 78%; opacity: 0; } }
@keyframes ep-packet-pass { 0% { top: 0; opacity: 0; } 18% { opacity: 1; } 82% { top: 85%; opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes ep-gate { 0%, 70%, 100% { box-shadow: 0 0 12px rgba(255, 155, 165, .12); } 78% { box-shadow: 0 0 0 9px rgba(255, 155, 165, .055), 0 0 29px rgba(255, 155, 165, .37); } }

/* A continuous visual system beyond the lab. */
.answer-panel { margin-top: 34px; border: 1px solid rgba(202, 255, 142, .47); border-radius: 0; background: radial-gradient(circle at 100% 0, rgba(104, 129, 181, .23), transparent 37%), radial-gradient(circle at 3% 95%, rgba(56, 195, 185, .12), transparent 38%), #0b2730; box-shadow: inset 0 0 60px rgba(202, 255, 142, .03), 0 30px 80px rgba(0, 0, 0, .18); }
.answer-panel::before { position: absolute; top: 0; left: 0; width: 34%; height: 2px; background: linear-gradient(90deg, var(--signal), transparent); content: ""; box-shadow: 0 0 24px var(--signal); }
.answer-panel::after { border-color: rgba(202, 255, 142, .12); }
.answer-kicker { color: var(--signal); font-family: var(--mono); }
.answer-head h3 { color: #f4fbff; }
.answer-head p { color: #c5dce5; }
.answer-flow > div { border-radius: 0; border-color: rgba(202, 255, 142, .3); background: rgba(202, 255, 142, .055); }
.answer-flow > div:last-of-type { border-color: rgba(202, 255, 142, .75); background: rgba(202, 255, 142, .12); }
.answer-flow > div span, .answer-flow-line { color: var(--signal); }
.answer-footnote { color: #a9c4cb; border-top-color: rgba(202, 255, 142, .19); }
.audio-prologue { overflow: hidden; background: #0b1b2a; }
.audio-prologue::before { position: absolute; top: -150px; left: -100px; width: 410px; height: 410px; border: 1px solid rgba(117, 237, 240, .1); border-radius: 50%; box-shadow: 0 0 0 85px rgba(117, 237, 240, .019), 0 0 0 170px rgba(117, 237, 240, .014); content: ""; pointer-events: none; }
.audio-inner { border: 0; border-top: 1px solid rgba(117, 237, 240, .29); border-bottom: 1px solid rgba(117, 237, 240, .29); border-radius: 0; background: transparent; box-shadow: none; }
.audio-symbol { border: 1px solid rgba(117, 237, 240, .7); border-radius: 0; background: rgba(117, 237, 240, .09); color: var(--aqua); box-shadow: inset 0 0 24px rgba(117, 237, 240, .08), 0 0 25px rgba(117, 237, 240, .1); }
.audio-copy h2 { color: #f4fbff; }
.audio-copy > p:last-child { color: #a9c2cf; }
.audio-player { border-color: rgba(117, 237, 240, .51); border-radius: 0; background: radial-gradient(circle at 96% 0, rgba(84, 161, 172, .2), transparent 54%), #0e2834; box-shadow: 0 19px 55px rgba(0, 0, 0, .21); }
.audio-player audio { color-scheme: dark; }
.audio-player-label, .audio-more summary::before, .audio-more summary span { color: var(--aqua); }
.audio-more { border-top-color: rgba(117, 237, 240, .25); }
.audio-more summary { color: #f4fbff; }
.audio-more a { color: var(--aqua); }
.audio-disclosure { color: #a8c3cf; }
.showcase-section { background: radial-gradient(circle at 100% 8%, rgba(97, 73, 165, .18), transparent 37%), #07111f; }
.showcase-section::before { border-color: rgba(184, 165, 255, .11); }
.showcase-intro > p { color: #a8bfd0; }
.showcase-intro h2 em { color: var(--violet); }
.showcase-card { border-color: rgba(184, 165, 255, .38); border-radius: 0; background: #0e2031; box-shadow: 0 30px 90px rgba(0, 0, 0, .26), 0 0 75px rgba(184, 165, 255, .065); }
.js .showcase-tabs { background: #102339; }
.showcase-tab { color: #9cb6c9; }
.showcase-tab + .showcase-tab { border-left-color: rgba(184, 165, 255, .15); }
.showcase-tab span { color: var(--violet); font-family: var(--mono); }
.showcase-tab:hover, .showcase-tab.is-active { background: rgba(184, 165, 255, .1); color: #f4fbff; }
.showcase-tab.is-active { border-bottom-color: var(--violet); }
.showcase-panel + .showcase-panel { border-top-color: rgba(184, 165, 255, .2); }
.panel-kicker { color: var(--violet); font-family: var(--mono); }
.panel-copy h3 { color: #f4fbff; }
.panel-copy p { color: #b4c8d6; }
.panel-caption { color: #91a9bb; font-family: var(--mono); }
.panel-visual-screen { background: radial-gradient(circle at 55% 12%, #315a78, #112a3e 72%); }
.people-section { background: radial-gradient(circle at 96% 30%, rgba(56, 151, 151, .11), transparent 35%), #0b1b29; }
.people-copy > p:not(.eyebrow) { color: #aec4ce; }
.people-photo { border-color: rgba(117, 237, 240, .34); border-radius: 0; background: #142c3c; box-shadow: 19px 19px 0 rgba(117, 237, 240, .05), 0 24px 60px rgba(0, 0, 0, .2); }
.people-photo img { filter: saturate(.88) contrast(1.05); }
.people-photo figcaption { border-top: 1px solid rgba(117, 237, 240, .2); color: #c4f5f1; font-family: var(--mono); }
.statement { border-top-color: rgba(117, 237, 240, .25); }
.statement-star { color: var(--signal); }
.statement p { color: #f4fbff; }
.assurance-section { background: linear-gradient(180deg, #081824, #091622); }
.assurance-header > p:last-child { color: #a9c1cd; }
.assurance-photo { border-color: rgba(117, 237, 240, .3); border-radius: 0; }
.assurance-grid { gap: 0; border-top: 1px solid rgba(117, 237, 240, .28); border-left: 1px solid rgba(117, 237, 240, .28); }
.assurance-card, .assurance-card-future { position: relative; min-height: 298px; border: 0; border-right: 1px solid rgba(117, 237, 240, .28); border-bottom: 1px solid rgba(117, 237, 240, .28); border-radius: 0; background: rgba(117, 237, 240, .025); box-shadow: none; }
.assurance-card::before { position: absolute; top: 0; left: 0; width: 0; height: 2px; background: var(--aqua); content: ""; box-shadow: 0 0 15px var(--aqua); transition: width .4s ease; }
.assurance-card:hover::before { width: 100%; }
.assurance-number { color: var(--aqua); font-family: var(--mono); }
.assurance-status, .assurance-card-future .assurance-status { border: 1px solid rgba(202, 255, 142, .4); border-radius: 0; background: transparent; color: var(--signal); font-family: var(--mono); }
.assurance-card-future .assurance-status { border-color: rgba(255, 208, 155, .49); color: var(--amber); }
.assurance-card h3 { color: #f4fbff; }
.assurance-card p { color: #acc2cd; }
.assurance-card .assurance-identity { color: #d5e8ed; }
.assurance-link { color: var(--aqua); }
.assurance-link:hover { color: var(--signal); }
.assurance-note { border-top-color: rgba(117, 237, 240, .25); }
.assurance-note p { color: #92aaba; }
.vote-section { border-block: 1px solid rgba(202, 255, 142, .33); background: radial-gradient(circle at 98% 48%, rgba(31, 135, 132, .35), transparent 36%), linear-gradient(115deg, #0b2634, #08242f 60%, #103640); }
.vote-section::before { background: repeating-linear-gradient(0deg, transparent 0 39px, rgba(202, 255, 142, .023) 40px 41px); }
.vote-decoration { color: var(--signal); }
.vote-copy h2 em { color: var(--signal); }
.vote-copy > p:not(.eyebrow, .vote-status, .share-feedback) { color: #d0e5e7; }
.vote-status { color: #f4fbff; font-family: var(--mono); font-size: .75rem; }
.vote-status span { color: var(--signal); animation: ep-status-pulse 2.7s ease-in-out infinite; }
.support-section { border-bottom: 1px solid rgba(117, 237, 240, .2); background: #102333; }
.support-icon { border: 1px solid rgba(255, 208, 155, .58); border-radius: 0; background: rgba(255, 208, 155, .06); color: var(--amber); }
.support-inner .eyebrow { color: var(--amber); }
.support-inner p:last-child { color: #afc4cd; }
.site-footer { background: #050d17; }
.footer-brand img { filter: drop-shadow(0 0 10px rgba(117, 237, 240, .27)); }
.footer-brand span, .footer-main > p, .footer-bottom { color: #93adbd; }
.back-top { color: var(--aqua); }
.footer-bottom { border-top-color: rgba(117, 237, 240, .19); font-family: var(--mono); }
.footer-bottom a { color: #b6d5df; }

/* Hero scene: personal context meets a visible boundary. */
.hero-scene { position: relative; isolation: isolate; width: 100%; max-width: 680px; margin: 0; aspect-ratio: 640 / 540; }
.hero-scene::before { position: absolute; z-index: -1; top: 15%; left: 21%; width: 58%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(59, 194, 219, .13), transparent 68%); filter: blur(27px); content: ""; }
.hero-scene::after { position: absolute; z-index: -1; top: 14%; right: 5%; width: 37%; height: 74%; border-radius: 50%; background: radial-gradient(circle, rgba(145, 130, 194, .095), transparent 68%); filter: blur(17px); content: ""; }
.hero-scene > svg, .hero-scene > canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hero-scene .scene-particles { z-index: 0; pointer-events: none; }
.scene-haze { z-index: 1; pointer-events: none; }
.scene-shadow { z-index: 2; pointer-events: none; filter: drop-shadow(-14px 2px 15px rgba(5, 8, 19, .25)); }
.scene-flow { z-index: 3; pointer-events: none; }
.scene-shield { z-index: 4; pointer-events: none; filter: drop-shadow(0 0 11px rgba(80, 202, 242, .2)); }
.scene-cards { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.scene-card { position: absolute; left: 5%; display: flex; flex-direction: column; width: 33%; min-width: 140px; padding: 11px 13px 12px; border: 1px solid rgba(148, 219, 246, .58); background: linear-gradient(130deg, rgba(20, 57, 77, .89), rgba(7, 25, 41, .92)); color: #e6faff; box-shadow: inset 0 0 25px rgba(94, 213, 238, .075), 0 12px 28px rgba(0, 0, 0, .28), 0 0 22px rgba(84, 212, 239, .07); backdrop-filter: blur(7px); }
.scene-card-self { top: 27%; transform: rotate(-4deg); animation: ep-card-one 6.5s ease-in-out infinite; }
.scene-card-feedback { top: 62%; left: 7%; transform: rotate(4deg); animation: ep-card-two 7.3s ease-in-out infinite; }
.scene-card-index { color: var(--aqua); font: 800 .52rem/1.3 var(--mono); letter-spacing: .045em; }
.scene-card-rule { display: block; width: 100%; height: 1px; margin: 7px 0 9px; background: linear-gradient(90deg, rgba(117, 237, 240, .67), transparent); }
.scene-card-main { color: #f1fdff; font-size: .71rem; font-weight: 780; line-height: 1.3; }
.scene-card-detail { margin-top: 4px; color: #b1d3df; font-size: .57rem; line-height: 1.35; }
.scene-core { position: absolute; z-index: 6; top: 51%; left: 50.3%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 22%; aspect-ratio: 1; border: 1px solid rgba(141, 235, 248, .76); border-radius: 50%; background: radial-gradient(circle at 37% 28%, rgba(36, 83, 113, .98), rgba(8, 28, 48, .97) 73%); box-shadow: 0 0 0 12px rgba(80, 202, 242, .055), 0 0 44px rgba(80, 202, 242, .36), inset 0 0 24px rgba(80, 202, 242, .13); transform: translate(-50%, -50%); text-align: center; }
.scene-core-halo { position: absolute; inset: -8px; border: 1px solid rgba(141, 235, 248, .23); border-radius: 50%; }
.scene-core img { width: 39%; height: auto; margin-bottom: 4px; filter: drop-shadow(0 0 7px rgba(117, 237, 240, .45)); }
.scene-core strong { color: #f4fbff; font: 850 .66rem/1.1 var(--mono); letter-spacing: .095em; }
.scene-core small { margin-top: 3px; color: #aee9ed; font: 700 .43rem/1.2 var(--mono); }
.scene-label { position: absolute; z-index: 7; padding: 7px 9px; border: 1px solid rgba(117, 237, 240, .27); background: rgba(6, 20, 34, .78); color: var(--aqua); font: 800 .56rem/1.2 var(--mono); letter-spacing: .085em; white-space: nowrap; backdrop-filter: blur(6px); }
.scene-label-local { bottom: 10%; left: 28%; }
.scene-label-dot { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal); vertical-align: 1px; }
.scene-label-external { top: 18%; right: 3%; border-color: rgba(184, 165, 255, .3); color: #c2b6ed; }
.scene-label-external small { display: block; margin-top: 3px; color: #9b9ec7; font: 660 .47rem/1.2 var(--mono); letter-spacing: 0; }
.scene-coordinate { position: absolute; z-index: 7; right: 9%; bottom: 3%; color: #8199b5; font: 720 .49rem/1.2 var(--mono); letter-spacing: .1em; }
@media (prefers-reduced-motion: no-preference) {
  .scene-flow-track-one, .scene-flow-track-two { animation: ep-dash 4s linear infinite; }
  .scene-flow-track-two { animation-delay: -1.9s; }
  .scene-flow-dot { animation: ep-dot 3.4s ease-in-out infinite; }
  .scene-flow-dot-two { animation-delay: -1.6s; }
  .scene-shadow-hand { transform-origin: 90% 61%; animation: ep-shadow-reach 8s ease-in-out infinite; }
  .scene-shield-aura { animation: ep-aura 4.5s ease-in-out infinite; }
  .scene-shield-highlight { animation: ep-highlight 5s ease-in-out infinite; }
  .scene-repel-track { animation: ep-dash 4.3s linear infinite reverse; }
  .scene-repel-spark { animation: ep-repel 5.2s ease-in-out infinite; }
}
@keyframes ep-card-one { 50% { transform: translate(9px, 3px) rotate(-2deg); } }
@keyframes ep-card-two { 50% { transform: translate(7px, -4px) rotate(2deg); } }
@keyframes ep-dash { to { stroke-dashoffset: -88; } }
@keyframes ep-dot { 50% { opacity: .4; filter: drop-shadow(0 0 9px #a8ecff); } }
@keyframes ep-shadow-reach { 0%, 24%, 100% { transform: translateX(0); } 47% { transform: translateX(-11px); } 66% { transform: translateX(-8px); } }
@keyframes ep-aura { 50% { opacity: .55; stroke-width: 23; } }
@keyframes ep-highlight { 50% { opacity: .5; stroke-width: 3; } }
@keyframes ep-repel { 50% { opacity: .52; filter: drop-shadow(0 0 10px #ffca86); } }

/* The actual pencil-work gives the data path a human meaning. */
.signal-work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(105px, .75fr); gap: 10px; margin: 0 0 20px; }
.signal-work[hidden] { display: none; }
.signal-work-steps { display: grid; gap: 4px; align-content: center; padding: 14px 13px; border: 1px solid rgba(117, 237, 240, .25); background: repeating-linear-gradient(0deg, transparent 0 24px, rgba(117, 237, 240, .055) 25px 26px), #10283a; }
.signal-work-steps > span { color: var(--aqua); font: 800 .52rem/1.25 var(--mono); letter-spacing: .045em; }
.signal-work-steps blockquote { margin: 0; color: #dafaff; font-size: .72rem; font-weight: 720; line-height: 1.36; }
.signal-work-steps code { display: block; color: #dafaff; font: 750 .77rem/1.4 var(--mono); white-space: nowrap; }
.signal-work-steps .signal-work-error { color: #ffd2ad; }
.signal-work-error span { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 3px; border: 1px solid var(--amber); border-radius: 50%; color: var(--amber); font: 800 .61rem/1 var(--mono); box-shadow: 0 0 10px rgba(255, 208, 155, .22); }
.signal-work-feedback { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 12px; border: 1px solid rgba(255, 208, 155, .32); background: rgba(255, 208, 155, .07); }
.signal-work-feedback span { color: var(--amber); font: 800 .52rem/1.25 var(--mono); letter-spacing: .045em; }
.signal-work-feedback strong { color: #f9ecdc; font-size: .7rem; line-height: 1.35; }

@media (max-width: 1100px) {
  .hero .hero-inner { min-height: 0; }
  .hero h1 { font-size: clamp(3.25rem, 5.6vw, 5.65rem); }
  .signal-stage-grid { grid-template-columns: minmax(0, 1fr) minmax(120px, .39fr) minmax(0, 1fr); }
  .signal-input, .signal-output { padding: 25px; }
  .signal-work { grid-template-columns: 1fr; }
  .signal-work-feedback { min-height: 60px; }
}
@media (max-width: 850px) {
  .hero .hero-inner { grid-template-columns: 1fr; gap: 12px; padding-block: 78px 38px; }
  .hero h1 { max-width: 740px; font-size: clamp(3.2rem, 7.3vw, 5.1rem); }
  .hero-scene { max-width: 650px; justify-self: center; }
  .signal-intro { grid-template-columns: 1fr; gap: 17px; }
  .signal-intro > p { max-width: 700px; }
  .signal-controls { grid-template-columns: 1fr; gap: 22px; }
  .signal-stage-grid { grid-template-columns: minmax(0, 1fr) minmax(110px, .32fr) minmax(0, 1fr); }
  .signal-prompt { font-size: .95rem; }
  .signal-output h3 { font-size: 1.6rem; }
  .signal-route-caption { font-size: .53rem; }
}
@media (max-width: 650px) {
  .container { width: min(calc(100% - 34px), var(--container)); }
  .announcement { font-size: .59rem; }
  .hero .hero-inner { gap: 4px; padding-block: 53px 23px; }
  .hero h1 { font-size: clamp(2.53rem, 10.5vw, 3.7rem); line-height: 1.12; }
  .section h2 { font-size: clamp(2.05rem, 8.8vw, 3.25rem); line-height: 1.16; }
  .hero .hero-lead { font-size: .95rem; }
  .hero-scene { width: min(100%, 500px); margin-top: 20px; }
  .scene-card { min-width: 0; width: 31%; padding: 6px 7px 7px; }
  .scene-card-index { font-size: .34rem; letter-spacing: -.01em; }
  .scene-card-rule { margin: 4px 0 5px; }
  .scene-card-main { font-size: .47rem; }
  .scene-card-detail { font-size: .38rem; }
  .scene-core { width: 24%; }
  .scene-core img { width: 37%; margin-bottom: 2px; }
  .scene-core strong { font-size: .45rem; }
  .scene-core small { font-size: .3rem; }
  .scene-label { padding: 4px 5px; font-size: .37rem; letter-spacing: .02em; }
  .scene-label-local { bottom: 9%; left: 29%; }
  .scene-label-external { top: 17%; right: 2%; }
  .scene-label-external small { font-size: .3rem; }
  .scene-coordinate { font-size: .34rem; }
  .proof-inner p { font-size: .66rem; }
  .signal-intro { margin-bottom: 30px; }
  .signal-intro > p { font-size: .91rem; }
  .signal-topbar { align-items: flex-start; flex-direction: column; gap: 4px; padding: 12px 16px; font-size: .55rem; }
  .signal-topbar-note { color: #a9bdc7; text-align: left; }
  .signal-controls { padding: 20px 16px 23px; }
  .signal-control-group legend { font-size: .68rem; }
  .signal-choice { min-height: 43px; padding: 8px 10px; font-size: .69rem; }
  .signal-stage-grid { display: grid; grid-template-columns: 1fr; }
  .signal-input, .signal-output { padding: 23px 19px; }
  .signal-input { border-right: 0; border-bottom: 1px solid rgba(117, 237, 240, .2); }
  .signal-window-head { margin-bottom: 19px; font-size: .57rem; }
  .signal-prompt { min-height: 0; margin-bottom: 20px; font-size: .96rem; }
  .signal-work { grid-template-columns: minmax(0, 1fr) minmax(105px, .78fr); }
  .signal-work-steps { padding: 10px 9px; }
  .signal-work-steps code { font-size: .68rem; }
  .signal-work-feedback { padding: 9px; }
  .signal-work-feedback span { font-size: .49rem; }
  .signal-work-feedback strong { font-size: .65rem; }
  .signal-tags span { font-size: .56rem; }
  .signal-route-visual { display: flex; flex-direction: row; justify-content: center; min-height: 119px; gap: 0; padding: 18px 14px 37px; border-right: 0; border-bottom: 1px solid rgba(117, 237, 240, .2); }
  .signal-origin, .signal-destination { flex: 0 0 auto; width: 70px; min-height: 47px; padding: 5px; font-size: .57rem; }
  .signal-origin small, .signal-destination small { font-size: .47rem; }
  .signal-wire { flex: 1 1 auto; width: auto; height: 2px; min-height: 2px; max-width: 70px; background: linear-gradient(90deg, var(--aqua), var(--route-color)); }
  .signal-wire-second { background: var(--route-color); }
  .signal-packet { top: -4px; left: 0; }
  .signal-gate { flex: 0 0 auto; width: 31px; height: 31px; font-size: .8rem; }
  .signal-route-caption { position: absolute; right: 12px; bottom: 11px; left: 12px; max-width: none; margin: 0; font-size: .56rem; }
  .signal-output h3 { font-size: 1.84rem; }
  .signal-output > p { font-size: .86rem; }
  .signal-insight { gap: 11px; padding: 17px 18px; }
  .signal-insight p { font-size: .78rem; }
  .signal-caveat { font-size: .72rem; }
  .signal-nojs { padding: 12px 18px; }
  .answer-panel { margin-top: 22px; }
  .audio-inner { border-radius: 0; }
  .audio-player { border-radius: 0; }
  .showcase-card { border-radius: 0; }
  .people-photo { border-radius: 0; }
  .assurance-photo { border-radius: 0; }
  .support-icon { border-radius: 0; }
  .mobile-vote { border-top-color: rgba(202, 255, 142, .4); background: #071b24; }
  .mobile-vote a { border-radius: 3px; background: var(--signal); color: #07181e; }
}
@media (max-width: 650px) and (prefers-reduced-motion: no-preference) {
  .signal-ready .signal-packet { animation-name: ep-packet-stop-horizontal; }
  .signal-ready[data-route="local"] .signal-packet,
  .signal-ready[data-route="external"][data-stage="generic"] .signal-packet { animation-name: ep-packet-pass-horizontal; }
}
@keyframes ep-packet-stop-horizontal { 0% { left: 0; opacity: 0; } 18% { opacity: 1; } 76% { left: 75%; opacity: 1; } 88%, 100% { left: 75%; opacity: 0; } }
@keyframes ep-packet-pass-horizontal { 0% { left: 0; opacity: 0; } 18% { opacity: 1; } 82% { left: 86%; opacity: 1; } 100% { left: 100%; opacity: 0; } }
@media (max-width: 385px) {
  .hero h1 { font-size: 2.4rem; }
  .scene-card-main { font-size: .43rem; }
  .signal-work { grid-template-columns: 1fr; }
  .signal-work-feedback { min-height: 55px; }
  .signal-choice { font-size: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .announcement-dot, .hero::after, .hero-field::before, .hero-field-ring-two, .vote-status span,
  .scene-card, .scene-flow-track, .scene-flow-dot, .scene-shadow-hand, .scene-shield-aura,
  .scene-shield-highlight, .scene-repel-track, .scene-repel-spark, .signal-packet,
  .signal-gate, .signal-live-dot { animation: none !important; }
  .scene-card-self { transform: rotate(-4deg); }
  .scene-card-feedback { transform: rotate(4deg); }
}

/* Small-screen composition keeps the evidence readable without scaling it away. */
@media (max-width: 650px) {
  .hero-scene { --scene-w: min(calc(100vw - 34px), 500px); width: var(--scene-w); height: calc(var(--scene-w) * .84375 + 126px); aspect-ratio: auto; margin-top: 17px; }
  .hero-scene > svg, .hero-scene > canvas { top: 0; bottom: auto; width: 100%; height: calc(var(--scene-w) * .84375); }
  .scene-core { top: calc(var(--scene-w) * .43); }
  .scene-core strong { font-size: .54rem; }
  .scene-core small { display: none; }
  .scene-label { padding: 5px 6px; font-size: .6rem; letter-spacing: .015em; }
  .scene-label-local { top: calc(var(--scene-w) * .72); bottom: auto; left: 30%; }
  .scene-label-external { top: calc(var(--scene-w) * .14); right: 1%; max-width: 37%; white-space: normal; }
  .scene-label-external small { font-size: .51rem; }
  .scene-coordinate { display: none; }
  .scene-cards { top: calc(var(--scene-w) * .84375 + 8px); bottom: 0; display: flex; gap: 8px; }
  .scene-card { position: relative; top: auto; left: auto; flex: 1 1 0; width: auto; min-width: 0; min-height: 104px; padding: 10px 10px 9px; animation: none; transform: none; }
  .scene-card-self, .scene-card-feedback { top: auto; left: auto; animation: none; transform: none; }
  .scene-card-index { font-size: .53rem; }
  .scene-card-rule { margin: 6px 0 7px; }
  .scene-card-main { font-size: .71rem; }
  .scene-card-detail { margin-top: 5px; font-size: .61rem; }
  .announcement { font-size: .65rem; }
  .signal-topbar { font-size: .65rem; }
  .signal-tags span { font-size: .65rem; }
  .signal-route-caption { font-size: .64rem; }
  .signal-origin, .signal-destination { font-size: .62rem; }
  .signal-origin small, .signal-destination small { font-size: .53rem; }
  .signal-readouts span { font-size: .67rem; }
  .signal-choice { font-size: .74rem; }
  .signal-choice:focus-visible, .share-button:focus-visible, .showcase-tab:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
}
@media (max-width: 385px) {
  .scene-label { font-size: .54rem; }
  .scene-card-main { font-size: .66rem; }
  .scene-card-detail { font-size: .58rem; }
  .signal-choice { font-size: .7rem; }
}

/* The opening is a full-screen scene, with the question placed over it. */
.hero { min-height: max(760px, calc(100svh - 112px)); }
.hero::before {
  z-index: 1;
  background:
    linear-gradient(90deg, #050d18 0%, rgba(5, 13, 24, .97) 24%, rgba(5, 13, 24, .81) 40%, rgba(5, 13, 24, .24) 65%, transparent 85%),
    linear-gradient(0deg, rgba(5, 13, 24, .46), transparent 23%);
}
.hero .hero-inner {
  display: flex;
  align-items: center;
  min-height: calc(max(760px, calc(100svh - 112px)) - 40px);
  padding-block: 52px 72px;
}
.hero-copy { width: min(44%, 565px); max-width: none; text-shadow: 0 3px 30px rgba(0, 0, 0, .48); }
.hero h1 { max-width: 565px; font-size: clamp(3.12rem, 4.15vw, 4.55rem); }
.hero .hero-lead { max-width: 520px; }
.hero .hero-scene {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  aspect-ratio: auto;
  pointer-events: none;
}
.hero .hero-scene > svg { transform: scale(1.34); }
.hero .hero-scene > canvas { transform: none; }
.hero .scene-core { width: clamp(138px, 13.4vw, 186px); }
.hero .scene-cards { inset: 0; }
.hero .scene-card {
  top: auto;
  bottom: 7%;
  left: 38%;
  width: clamp(180px, 18vw, 270px);
  min-width: 0;
  padding: 13px 15px 14px;
}
.hero .scene-card-feedback { left: 60%; }
.hero .scene-card-index { font-size: .6rem; }
.hero .scene-card-main { font-size: .83rem; }
.hero .scene-card-detail { font-size: .65rem; }
.hero .scene-label { font-size: .65rem; }
.hero .scene-label-local { right: auto; bottom: 24%; left: 49%; }
.hero .scene-label-external { top: 17%; right: 9%; }
.hero .scene-label-external small { font-size: .55rem; }
.hero .scene-coordinate { right: 4%; bottom: 3%; }
.hero-bottom { position: relative; z-index: 2; min-height: 40px; }

@media (max-width: 1100px) {
  .hero-copy { width: min(47%, 510px); }
  .hero h1 { font-size: clamp(2.85rem, 4.5vw, 3.9rem); }
  .hero .scene-card { left: 37%; width: clamp(175px, 19vw, 225px); }
  .hero .scene-card-feedback { left: 62%; }
}

@media (max-width: 850px) {
  .hero { min-height: max(1080px, calc(100svh - 110px)); }
  .hero::before {
    background:
      linear-gradient(180deg, #050d18 0%, rgba(5, 13, 24, .98) 18%, rgba(5, 13, 24, .66) 38%, transparent 64%),
      linear-gradient(0deg, rgba(5, 13, 24, .52), transparent 18%);
  }
  .hero .hero-inner { align-items: flex-start; min-height: 1040px; padding-block: 56px 65px; }
  .hero-copy { width: min(100%, 660px); }
  .hero h1 { max-width: 650px; font-size: clamp(3.2rem, 7vw, 4.4rem); }
  .hero .hero-scene > svg { top: 390px; bottom: auto; width: 100%; height: 650px; transform: none; }
  .hero .scene-core { top: 715px; width: clamp(130px, 21vw, 175px); }
  .hero .scene-cards { top: 895px; right: 7%; bottom: auto; left: 7%; display: flex; gap: 14px; height: 118px; }
  .hero .scene-card, .hero .scene-card-feedback { position: relative; top: auto; bottom: auto; left: auto; flex: 1 1 0; width: auto; max-width: 290px; min-height: 100px; }
  .hero .scene-label-local { top: 855px; bottom: auto; left: 48%; }
  .hero .scene-label-external { top: 495px; right: 7%; }
  .hero .scene-coordinate { bottom: 56px; }
}

@media (max-width: 650px) {
  .hero { min-height: max(900px, calc(550px + 84.375vw), calc(100svh - 102px)); }
  .hero::before {
    background:
      linear-gradient(180deg, #050d18 0%, rgba(5, 13, 24, .98) 22%, rgba(5, 13, 24, .77) 36%, transparent 54%),
      linear-gradient(0deg, rgba(5, 13, 24, .45), transparent 16%);
  }
  .hero .hero-inner { min-height: max(858px, calc(510px + 84.375vw), calc(100svh - 144px)); padding-block: 30px 56px; }
  .hero-copy { width: 100%; }
  .hero h1 { max-width: 540px; font-size: clamp(2.3rem, 9.5vw, 3.6rem); line-height: 1.12; }
  .hero .hero-lead { max-width: 540px; font-size: .91rem; line-height: 1.55; }
  .hero-note { display: none; }
  .hero .hero-scene > svg {
    top: 360px;
    bottom: auto;
    width: 100%;
    height: calc(100vw * .84375);
    transform: none;
  }
  .hero .scene-core { top: calc(360px + 100vw * .43); width: clamp(90px, 23vw, 120px); }
  .hero .scene-cards { top: calc(370px + 100vw * .84375); right: 17px; bottom: auto; left: 17px; gap: 8px; height: 124px; }
  .hero .scene-card, .hero .scene-card-feedback { flex: 1 1 0; min-height: 110px; max-width: none; padding: 10px 11px; animation: none; transform: none; }
  .hero .scene-card-index { font-size: .53rem; }
  .hero .scene-card-main { font-size: .72rem; }
  .hero .scene-card-detail { font-size: .61rem; }
  .hero .scene-label-local { top: calc(360px + 100vw * .72); bottom: auto; left: 30%; }
  .hero .scene-label-external { top: calc(360px + 100vw * .14); right: 2%; }
  .hero .scene-label { font-size: .56rem; }
  .hero .scene-label-external small { font-size: .5rem; }
  .hero .scene-coordinate { display: none; }
  .hero-bottom { padding-bottom: 16px; }
}

@media (max-width: 385px) {
  .hero .hero-scene > svg { top: 375px; }
  .hero .scene-core { top: calc(375px + 100vw * .43); }
  .hero .scene-cards { top: calc(385px + 100vw * .84375); }
  .hero .scene-label-local { top: calc(375px + 100vw * .72); }
  .hero .scene-label-external { top: calc(375px + 100vw * .14); }
}