:root {
  /* Design typography tokens: Roboto Condensed** from Google Fonts */
  --void-plum: #130A24;
  --lunar-lavender: #D8C7FF;
  --glass-cyan: #78F7E6;
  --sprite-chartreuse: #C7FF6B;
  --rose-circuit: #FF6FAE;
  --deep-pond-blue: #172B5C;
  --milky-veil: #F7F0D8;
  --display: "Roboto Condensed", "Arial Narrow", sans-serif;
  --accent: "Oswald", "Arial Narrow", sans-serif;
  --body: "Alegreya Sans", "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--lunar-lavender);
  background: var(--void-plum);
  font-family: var(--body);
}

.pond {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(circle at 78% 16%, rgba(216, 199, 255, .13), transparent 21rem),
    radial-gradient(circle at 18% 75%, rgba(120, 247, 230, .11), transparent 24rem),
    radial-gradient(circle at 60% 52%, rgba(23, 43, 92, .46), transparent 32rem),
    linear-gradient(145deg, #130A24 0%, #172B5C 52%, #130A24 100%);
}

.pond::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(247, 240, 216, .8) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(120, 247, 230, .55) 0 1px, transparent 1.2px);
  background-size: 137px 137px, 223px 223px;
  background-position: 12px 34px, 97px 18px;
  opacity: .34;
  animation: starDrift 18s ease-in-out infinite alternate;
}

.aurora {
  position: fixed;
  width: 42vw;
  height: 42vw;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  opacity: .22;
}

.aurora-one { left: -12vw; bottom: 10vh; background: #78F7E6; }
.aurora-two { right: -10vw; top: -8vh; background: #FF6FAE; animation: breathe 8s ease-in-out infinite; }

.constellation {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .72;
}

.orbit, .comet-line {
  fill: none;
  stroke: var(--lunar-lavender);
  stroke-width: .7;
  stroke-dasharray: 9 18;
  opacity: .36;
  transition: filter .5s ease, opacity .5s ease, transform .7s ease;
}

.comet-line {
  stroke: var(--glass-cyan);
  stroke-width: 1.2;
  stroke-dasharray: 760;
  stroke-dashoffset: 760;
  opacity: .88;
}

body.line-awake .comet-line { animation: drawComet 3s ease forwards; }
body.rippling .orbit { filter: drop-shadow(0 0 8px #78F7E6); opacity: .68; transform: translateY(-2px); }

.map-node { fill: var(--milky-veil); filter: drop-shadow(0 0 7px #F7F0D8); }
.map-node.rose { fill: var(--rose-circuit); filter: drop-shadow(0 0 9px #FF6FAE); }
.map-node.solved { fill: var(--sprite-chartreuse); filter: drop-shadow(0 0 10px #C7FF6B); }

.star-map {
  position: fixed;
  z-index: 10;
  right: 28px;
  top: 50%;
  display: grid;
  gap: 18px;
  transform: translateY(-50%);
}

.star-dot {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid rgba(216, 199, 255, .5);
  border-radius: 50%;
  background: rgba(216, 199, 255, .22);
  box-shadow: 0 0 14px rgba(216, 199, 255, .24);
  cursor: pointer;
}

.star-dot.active { background: var(--sprite-chartreuse); border-color: var(--sprite-chartreuse); box-shadow: 0 0 18px #C7FF6B; }
.star-dot span {
  position: absolute;
  right: 19px;
  top: -5px;
  color: rgba(247, 240, 216, .72);
  font: 500 10px/1 var(--accent);
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .25s ease;
}
.star-dot:hover span, .star-dot.active span { opacity: 1; }

main { position: relative; z-index: 2; }

.chamber {
  position: relative;
  min-height: 100vh;
  padding: 9vh 9vw;
  isolation: isolate;
}

.glass-card, .proof-slate, .truth-window, .bloom-proof {
  position: relative;
  width: min(390px, 80vw);
  border: 1px solid rgba(120, 247, 230, .42);
  border-top-color: rgba(247, 240, 216, .38);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(216, 199, 255, .12), rgba(23, 43, 92, .18));
  box-shadow: inset 0 0 30px rgba(120, 247, 230, .07), 0 26px 70px rgba(0, 0, 0, .28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: transform .7s ease, border-color .5s ease, box-shadow .5s ease;
}

.glass-card:hover, .proof-slate:hover, .truth-window:hover, .bloom-proof:hover {
  transform: translateY(-6px);
  border-color: rgba(199, 255, 107, .75);
  box-shadow: inset 0 0 34px rgba(120, 247, 230, .12), 0 30px 85px rgba(120, 247, 230, .14);
}

.label {
  display: block;
  margin-bottom: 18px;
  color: var(--glass-cyan);
  font: 500 11px/1 var(--accent);
  letter-spacing: .26em;
  text-transform: uppercase;
}

h1, h2, strong, .wordmark span {
  margin: 0;
  color: var(--milky-veil);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: .88;
}

p { margin: 16px 0 0; color: rgba(216, 199, 255, .83); font-size: 18px; line-height: 1.35; }

.gate { min-height: 112vh; }
.lonely-star {
  position: absolute;
  top: 17vh;
  left: 69vw;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--milky-veil);
  box-shadow: 0 0 18px #F7F0D8, 0 0 34px #78F7E6;
  animation: blink 3.6s ease-in-out infinite;
}

.seed-card {
  position: absolute;
  left: 10vw;
  bottom: 17vh;
  width: 154px;
  padding: 22px;
  border-radius: 20px;
  animation: floatCard 6s ease-in-out infinite;
}
.seed-card strong { font-size: 72px; color: var(--lunar-lavender); }

.wordmark {
  position: absolute;
  right: 12vw;
  top: 42vh;
  max-width: 520px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.1s ease, transform 1.1s ease;
}
body.awake .wordmark { opacity: 1; transform: translateY(0); }
.wordmark span { display: block; font-size: clamp(64px, 11vw, 142px); }
.wordmark small { display: block; margin-top: 18px; color: var(--glass-cyan); font: 500 14px/1.4 var(--accent); letter-spacing: .22em; text-transform: uppercase; }

.premise .relic { margin: 32vh 0 0 8vw; padding: 34px; }
.premise-card h2, .proof-slate h2, .contradiction h2 { font-size: clamp(52px, 7vw, 96px); }
.dew-row { display: flex; gap: 13px; margin-top: 24px; }
.dew-row i { width: 11px; height: 11px; border-radius: 50%; background: var(--glass-cyan); box-shadow: 0 0 17px #78F7E6; }
.annotation { position: absolute; color: rgba(247, 240, 216, .6); font: 500 12px/1 var(--accent); letter-spacing: .24em; text-transform: uppercase; }
.upper-right { top: 19vh; right: 14vw; }

.rule .proof-slate {
  margin: 12vh 9vw 0 auto;
  padding: 38px;
  text-align: center;
}
.proof-slate b { display: block; margin: 18px 0; color: var(--sprite-chartreuse); font: 500 12px/1 var(--accent); letter-spacing: .3em; text-transform: uppercase; }
.paired-moons { position: absolute; left: 20vw; top: 21vh; color: var(--milky-veil); font: 700 86px/1 var(--display); text-shadow: -22px 0 28px #D8C7FF, 22px 0 28px #78F7E6; }
.quest-note { position: absolute; left: 14vw; bottom: 18vh; width: 260px; color: rgba(216, 199, 255, .64); }

.branch .truth-window { margin: 24vh auto 0 13vw; padding: 28px; width: 310px; }
.truth-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.truth-grid span { display: grid; place-items: center; height: 58px; border-radius: 13px; color: var(--milky-veil); font: 700 28px/1 var(--display); background: linear-gradient(135deg, rgba(120, 247, 230, .18), rgba(255, 111, 174, .15)); border: 1px solid rgba(216, 199, 255, .24); }
.moth-bracket { position: absolute; width: 118px; height: 220px; border: 1px solid rgba(216, 199, 255, .32); filter: drop-shadow(0 0 12px rgba(216, 199, 255, .2)); }
.moth-bracket.left { right: 22vw; top: 19vh; border-right: 0; border-radius: 80px 0 0 80px; }
.moth-bracket.right { right: 16vw; top: 36vh; border-left: 0; border-radius: 0 80px 80px 0; }

.mirror .contradiction { margin: 19vh 0 0 auto; padding: 34px; border-color: rgba(255, 111, 174, .46); }
.mirror-pool { position: absolute; left: 18vw; bottom: 17vh; width: 210px; height: 88px; display: grid; place-items: center; border-radius: 50%; color: var(--rose-circuit); font: 700 70px/1 var(--display); background: radial-gradient(ellipse, rgba(255, 111, 174, .2), rgba(23, 43, 92, .18) 58%, transparent 70%); box-shadow: 0 0 60px rgba(255, 111, 174, .17); }

.clearing .bloom-proof { margin: 20vh auto 0; padding: 40px; text-align: center; border-color: rgba(199, 255, 107, .54); }
.bloom-proof h1 { font-size: clamp(88px, 15vw, 180px); color: var(--sprite-chartreuse); text-shadow: 0 0 30px rgba(199, 255, 107, .52); }
.motes { position: absolute; inset: 0; pointer-events: none; }
.motes i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--sprite-chartreuse); box-shadow: 0 0 14px #C7FF6B; animation: mote 4s ease-in-out infinite; }
.motes i:nth-child(1) { left: 18%; top: 22%; animation-delay: .1s; }
.motes i:nth-child(2) { left: 76%; top: 30%; animation-delay: .6s; }
.motes i:nth-child(3) { left: 24%; top: 76%; animation-delay: 1s; }
.motes i:nth-child(4) { left: 62%; top: 82%; animation-delay: 1.4s; }
.motes i:nth-child(5) { left: 88%; top: 58%; animation-delay: 2s; }
.flower-venn { position: absolute; left: 9vw; bottom: 16vh; width: 160px; height: 110px; opacity: .72; }
.flower-venn span { position: absolute; width: 95px; height: 95px; border-radius: 50%; border: 1px solid rgba(247, 240, 216, .42); box-shadow: 0 0 18px rgba(247, 240, 216, .13); }
.flower-venn span:nth-child(2) { left: 54px; border-color: rgba(120, 247, 230, .46); }
.flower-venn span:nth-child(3) { left: 27px; top: 30px; border-color: rgba(255, 111, 174, .42); }

.revealed-note {
  position: fixed;
  z-index: 11;
  left: 28px;
  bottom: 26px;
  max-width: 290px;
  padding: 12px 14px;
  border-left: 1px solid var(--glass-cyan);
  color: rgba(247, 240, 216, .74);
  font: 500 12px/1.35 var(--accent);
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .72;
}

.ripple {
  position: fixed;
  z-index: 1;
  width: 20px;
  height: 20px;
  left: 0;
  top: 0;
  border: 1px solid rgba(120, 247, 230, .78);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.2);
  animation: rippleOut 1.9s ease-out forwards;
}

@keyframes rippleOut { to { opacity: 0; transform: translate(-50%, -50%) scale(16); border-color: rgba(216, 199, 255, 0); } }
@keyframes drawComet { to { stroke-dashoffset: 0; } }
@keyframes blink { 0%, 100% { opacity: .48; transform: scale(.84); } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes breathe { 0%, 100% { transform: scale(.9); opacity: .16; } 50% { transform: scale(1.08); opacity: .27; } }
@keyframes floatCard { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes starDrift { to { background-position: 18px 42px, 89px 25px; } }
@keyframes mote { 0%, 100% { transform: translateY(0) scale(.7); opacity: .35; } 50% { transform: translateY(-24px) scale(1.15); opacity: 1; } }

@media (max-width: 760px) {
  .chamber { padding: 8vh 7vw; }
  .star-map { right: 16px; }
  .wordmark { right: auto; left: 8vw; top: 34vh; }
  .premise .relic, .rule .proof-slate, .branch .truth-window, .mirror .contradiction, .clearing .bloom-proof { margin: 26vh 34px 0 0; }
  .paired-moons, .moth-bracket, .flower-venn, .annotation { display: none; }
  .quest-note, .mirror-pool { position: relative; left: auto; bottom: auto; margin-top: 52px; }
}