:root {
  /* Typography compliance tokens: Interface label* labels* labels:* labels:** tiny labels */
  --void-ink: #080713;
  --meditation-plum: #23113F;
  --neon-lotus-pink: #FF2FD6;
  --electric-yuzu: #DFFF3F;
  --ai-cyan: #18F7FF;
  --soft-moon-milk: #F7F0DC;
  --synthetic-lavender: #9B6DFF;
  --blob-gradient: radial-gradient(circle at 35% 30%, #FF2FD6 0%, #9B6DFF 32%, #23113F 68%, #080713 100%);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  background: var(--void-ink);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--soft-moon-milk);
  font-family: "Inter", sans-serif;
  background:
    radial-gradient(circle at 12% 8%, rgba(155, 109, 255, 0.22), transparent 24rem),
    radial-gradient(circle at 82% 28%, rgba(24, 247, 255, 0.08), transparent 28rem),
    linear-gradient(160deg, #080713 0%, #10091f 45%, #080713 100%);
  overflow-x: hidden;
}

button { font: inherit; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: 0.11;
  background-image:
    radial-gradient(circle, rgba(247, 240, 220, 0.45) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(24, 247, 255, 0.45) 0 1px, transparent 1.6px);
  background-size: 73px 79px, 131px 113px;
  mix-blend-mode: screen;
}

.constellation-nav {
  position: fixed;
  right: clamp(1rem, 3vw, 2.3rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: 1.15rem;
}

.constellation-nav::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1rem;
  bottom: -1rem;
  width: 1px;
  background: linear-gradient(#18F7FF00, #18F7FF66, #FF2FD666, #18F7FF00);
}

.nav-star {
  position: relative;
  width: 0.72rem;
  height: 0.72rem;
  border: 1px solid rgba(247, 240, 220, 0.45);
  border-radius: 50%;
  padding: 0;
  background: #23113F;
  cursor: pointer;
  transition: transform 450ms ease, box-shadow 450ms ease, background 450ms ease;
}

.nav-star::after {
  content: attr(data-label);
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  color: rgba(247, 240, 220, 0.42);
  opacity: 0;
  transition: opacity 350ms ease;
}

.nav-star.active {
  transform: scale(1.55);
  background: var(--neon-lotus-pink);
  box-shadow: 0 0 16px #FF2FD6, 0 0 36px #18F7FF88;
}

.nav-star.active::after, .nav-star:hover::after { opacity: 1; }

.initiation { position: relative; }

.test-room {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(1rem, 8vw) repeat(10, 1fr) minmax(1rem, 8vw);
  align-items: center;
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.test-room::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at var(--pulse-x, 50%) var(--pulse-y, 50%), rgba(255, 47, 214, 0.12), transparent 24rem),
    radial-gradient(circle at 70% 75%, rgba(155, 109, 255, 0.08), transparent 30rem);
}

.blob-room {
  position: absolute;
  z-index: -1;
  background: var(--blob-gradient);
  box-shadow:
    inset 0 0 42px rgba(247, 240, 220, 0.12),
    inset 0 -44px 82px rgba(8, 7, 19, 0.56),
    0 0 0 1px rgba(24, 247, 255, 0.22),
    0 0 80px rgba(155, 109, 255, 0.25);
  opacity: 0.82;
  animation: breathe 12s ease-in-out infinite alternate;
}

.blob-room::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: inherit;
  border: 1px solid rgba(247, 240, 220, 0.13);
  filter: blur(0.2px);
}

.blob-room::after {
  content: "";
  position: absolute;
  width: 36%;
  height: 16%;
  left: 22%;
  top: 15%;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(247, 240, 220, 0.24), transparent);
  transform: rotate(-16deg);
}

.blob-large {
  width: min(68vw, 850px);
  height: min(62vh, 620px);
  left: -9vw;
  top: 3vh;
  border-radius: 34% 66% 52% 48% / 42% 31% 69% 58%;
}

.blob-tall {
  width: min(45vw, 560px);
  height: 76vh;
  right: 6vw;
  bottom: -7vh;
  border-radius: 55% 45% 43% 57% / 28% 52% 48% 72%;
}

.blob-wide {
  width: min(76vw, 940px);
  height: 48vh;
  right: -16vw;
  top: 19vh;
  border-radius: 66% 34% 61% 39% / 46% 55% 45% 54%;
}

.blob-fold {
  width: min(52vw, 690px);
  height: 64vh;
  left: 4vw;
  bottom: 5vh;
  border-radius: 44% 56% 33% 67% / 61% 34% 66% 39%;
}

.blob-cup {
  width: min(60vw, 760px);
  height: 60vh;
  right: 0;
  top: 10vh;
  border-radius: 28% 72% 47% 53% / 57% 36% 64% 43%;
}

.blob-circle {
  width: min(70vw, 760px);
  height: min(70vw, 760px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50% 43% 50% 47% / 48% 54% 46% 52%;
}

.inner-moon {
  position: absolute;
  right: 18%;
  bottom: 18%;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #F7F0DC, #DFFF3F 45%, #FF2FD600 47%);
  opacity: 0.33;
}

.room-copy {
  position: relative;
  z-index: 4;
  max-width: 880px;
}

.room-language .room-copy { grid-column: 5 / 12; align-self: end; padding-bottom: 5vh; }
.room-silence .room-copy { grid-column: 2 / 8; padding-top: 8vh; }
.room-humor .room-copy { grid-column: 3 / 9; align-self: start; padding-top: 6vh; }
.room-memory .room-copy { grid-column: 6 / 12; }
.room-longing .room-copy { grid-column: 2 / 8; align-self: end; padding-bottom: 7vh; }
.room-verdict .room-copy { grid-column: 3 / 11; justify-self: center; text-align: left; }

.coordinate {
  margin: 0 0 1.1rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(0.68rem, 1.2vw, 0.84rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ai-cyan);
  text-shadow: 0 0 14px rgba(24, 247, 255, 0.7);
}

h1, h2 {
  margin: 0;
  font-family: "Libre Baskerville", serif;
  font-size: clamp(2.8rem, 8vw, 7.5rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.055em;
  color: var(--soft-moon-milk);
  text-wrap: balance;
  text-shadow: 0 0 34px rgba(247, 240, 220, 0.10);
}

.transcript-reveal {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: min(560px, 88vw);
  margin-top: 2rem;
  padding: 1.15rem 1.2rem;
  border: 1px solid rgba(24, 247, 255, 0.18);
  border-radius: 2rem 2rem 2rem 0.8rem;
  background: rgba(8, 7, 19, 0.46);
  box-shadow: 0 0 36px rgba(255, 47, 214, 0.06);
  opacity: 0;
  transform: translateY(1.2rem) scale(0.98);
  transition: opacity 900ms ease, transform 900ms ease, border-color 900ms ease;
}

.test-room.revealed .transcript-reveal, .transcript-reveal.always {
  opacity: 1;
  transform: translateY(0) scale(1);
  border-color: rgba(255, 47, 214, 0.42);
}

.transcript-reveal p {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.25rem, 2.2vw, 1.85rem);
  line-height: 1.15;
  color: rgba(247, 240, 220, 0.84);
}

.speaker {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.25rem;
  filter: drop-shadow(0 0 12px currentColor);
}

.speaker.human {
  border-radius: 50%;
  background: radial-gradient(circle at 72% 42%, transparent 0 35%, #F7F0DC 36% 68%, transparent 69%);
  color: #F7F0DC;
}

.speaker.machine {
  background: #18F7FF;
  color: #18F7FF;
  transform: rotate(45deg);
  clip-path: polygon(50% 0, 62% 35%, 100% 50%, 62% 65%, 50% 100%, 38% 65%, 0 50%, 38% 35%);
}

.speaker.unknown {
  border-radius: 50%;
  background: linear-gradient(90deg, #FF2FD6 0 45%, #9B6DFF 45% 100%);
  color: #FF2FD6;
}

.iso-relic {
  position: absolute;
  z-index: 5;
  width: clamp(150px, 18vw, 260px);
  overflow: visible;
  filter: drop-shadow(0 24px 30px rgba(8, 7, 19, 0.55)) drop-shadow(0 0 16px rgba(24, 247, 255, 0.14));
  transition: transform 1200ms ease, filter 1200ms ease;
}

.test-room.revealed .iso-relic { filter: drop-shadow(0 30px 38px rgba(8, 7, 19, 0.65)) drop-shadow(0 0 24px rgba(255, 47, 214, 0.32)); }
.chair-relic { left: 13vw; bottom: 14vh; }
.moon-relic { right: 20vw; top: 14vh; }
.bubble-relic { right: 12vw; bottom: 14vh; }
.stair-relic { left: 10vw; top: 13vh; }
.cup-relic { right: 14vw; bottom: 13vh; }
.door-relic { right: 10vw; top: 12vh; }

.iso-shadow { fill: rgba(8, 7, 19, 0.66); }
.iso-top, .step { fill: #9B6DFF; stroke: #DFFF3F; stroke-width: 1.5; }
.iso-left, .door-face { fill: #23113F; stroke: #18F7FF; stroke-width: 1.5; }
.iso-right, .door-side { fill: #5c38aa; stroke: #FF2FD6; stroke-width: 1.5; }
.iso-line, .steam, .shadow-one, .shadow-two { fill: none; stroke: #DFFF3F; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.moon-dot, .signal, .door-dot { fill: #DFFF3F; }
.star-shape { fill: #DFFF3F; stroke: #18F7FF; stroke-width: 2; }
.steam { stroke: #18F7FF; opacity: 0.75; }
.shadow-one, .shadow-two { stroke: #FF2FD6; opacity: 0.55; }

.star-orbit {
  position: absolute;
  z-index: 1;
  border: 1px solid rgba(24, 247, 255, 0.24);
  border-left-color: transparent;
  border-bottom-color: rgba(255, 47, 214, 0.2);
  border-radius: 50%;
  animation: orbitSpin 36s linear infinite;
}

.orbit-a { width: 54vw; height: 28vw; left: 16vw; top: 18vh; transform: rotate(-24deg); }
.orbit-b { width: 48vw; height: 31vw; right: 9vw; top: 18vh; transform: rotate(28deg); }
.orbit-c { width: 62vw; height: 22vw; left: 8vw; bottom: 20vh; transform: rotate(12deg); }
.orbit-d { width: 42vw; height: 34vw; left: 25vw; top: 15vh; transform: rotate(-40deg); }
.orbit-e { width: 56vw; height: 25vw; right: 8vw; bottom: 15vh; transform: rotate(32deg); }

.star-field span {
  position: absolute;
  z-index: 2;
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 50%;
  background: #F7F0DC;
  box-shadow: 0 0 12px #F7F0DC;
  animation: driftStar 7s ease-in-out infinite alternate;
}

.star-field span:nth-child(1) { left: 18%; top: 18%; }
.star-field span:nth-child(2) { left: 74%; top: 24%; animation-delay: -2s; background: #18F7FF; }
.star-field span:nth-child(3) { left: 64%; top: 74%; animation-delay: -4s; background: #FF2FD6; }
.star-field span:nth-child(4) { left: 25%; top: 82%; animation-delay: -1s; background: #DFFF3F; }
.question-map span:nth-child(5) { left: 52%; top: 26%; background: #18F7FF; }
.question-map span:nth-child(6) { left: 48%; top: 40%; background: #FF2FD6; }

.verdict-copy h2 { max-width: 820px; }

.verdict-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.verdict-choices button {
  border: 1px solid rgba(247, 240, 220, 0.25);
  border-radius: 999px;
  padding: 0.9rem 1.35rem;
  color: var(--soft-moon-milk);
  background: rgba(35, 17, 63, 0.48);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 400ms ease, box-shadow 400ms ease, color 400ms ease, transform 400ms ease;
}

.verdict-choices button:hover, .verdict-choices button.chosen {
  color: #080713;
  border-color: #DFFF3F;
  background: #DFFF3F;
  box-shadow: 0 0 26px rgba(223, 255, 63, 0.36);
  transform: translateY(-0.18rem);
}

@keyframes breathe {
  0% { border-radius: 34% 66% 52% 48% / 42% 31% 69% 58%; filter: hue-rotate(0deg); }
  50% { border-radius: 59% 41% 38% 62% / 55% 43% 57% 45%; }
  100% { border-radius: 46% 54% 64% 36% / 35% 62% 38% 65%; filter: hue-rotate(8deg); }
}

@keyframes orbitSpin {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

@keyframes driftStar {
  from { transform: translate3d(0, 0, 0) scale(0.75); opacity: 0.45; }
  to { transform: translate3d(0.8rem, -1.1rem, 0) scale(1.25); opacity: 1; }
}

@media (max-width: 820px) {
  .constellation-nav { right: 0.8rem; }
  .test-room { grid-template-columns: 1.25rem repeat(8, 1fr) 2.25rem; }
  .room-language .room-copy,
  .room-silence .room-copy,
  .room-humor .room-copy,
  .room-memory .room-copy,
  .room-longing .room-copy,
  .room-verdict .room-copy { grid-column: 2 / 9; padding: 0; align-self: center; }
  .iso-relic { width: 130px; opacity: 0.78; }
  .chair-relic, .moon-relic, .bubble-relic, .stair-relic, .cup-relic, .door-relic { left: auto; right: 10vw; top: auto; bottom: 7vh; }
  .blob-room { width: 86vw; height: 52vh; left: -18vw; right: auto; top: 10vh; bottom: auto; }
  .blob-circle { left: 50%; top: 50%; width: 92vw; height: 92vw; }
  h1, h2 { font-size: clamp(2.7rem, 14vw, 5.3rem); }
  .transcript-reveal { width: calc(100vw - 4rem); }
}