:root {
  /* DESIGN TOKENS: IBM Plex Mono coordinate ticks that fade in as if the page has just powered on. Avoid CTA-heavy layouts. Mono* Mono** weights. */
  --moon: #F4ECFF;
  --lavender: #CDB7F6;
  --sakura: #F7B7CC;
  --cyan: #7EF7FF;
  --green: #B8FFD9;
  --violet: #171226;
  --ink: #3B2D55;
  --error: #FF6F9A;
  --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --whisper: "Cormorant Garamond", Garamond, Georgia, serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --sans: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--violet);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--violet);
  font-family: var(--sans);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 22% 8%, rgba(126, 247, 255, .34), transparent 28rem),
    radial-gradient(circle at 80% 28%, rgba(247, 183, 204, .42), transparent 25rem),
    linear-gradient(180deg, var(--moon) 0%, var(--lavender) 38%, var(--ink) 72%, var(--violet) 100%);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .18;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(23, 18, 38, .18) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, transparent 0 48%, rgba(126, 247, 255, .08) 49% 50%, transparent 51% 100%);
  mix-blend-mode: multiply;
}

.scroll-story { position: relative; }

.chamber {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 6rem);
  isolation: isolate;
}

.chamber::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: linear-gradient(transparent 94%, rgba(126, 247, 255, .15) 95%), linear-gradient(90deg, transparent 96%, rgba(59, 45, 85, .10) 97%);
  background-size: 100% 5rem, 5rem 100%;
  opacity: .38;
}

.chamber-signal {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(205, 183, 246, .62), transparent 42%),
    linear-gradient(180deg, var(--moon) 0%, #F8F2FF 58%, #EADDFC 100%);
}

.chamber-scan {
  background:
    radial-gradient(circle at 50% 45%, rgba(126, 247, 255, .22), transparent 21rem),
    radial-gradient(circle at 82% 68%, rgba(184, 255, 217, .28), transparent 23rem),
    linear-gradient(180deg, #EADDFC 0%, var(--lavender) 100%);
}

.chamber-archive {
  color: var(--moon);
  background:
    radial-gradient(ellipse at 50% 60%, rgba(126, 247, 255, .36), transparent 24rem),
    radial-gradient(circle at 22% 20%, rgba(247, 183, 204, .25), transparent 20rem),
    linear-gradient(180deg, var(--lavender) 0%, var(--ink) 74%, var(--violet) 100%);
}

.chamber-eclipse {
  color: var(--moon);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 111, 154, .17), transparent 22rem),
    radial-gradient(circle at 50% 52%, rgba(126, 247, 255, .12), transparent 31rem),
    linear-gradient(180deg, var(--ink) 0%, var(--violet) 72%);
}

.fixed-hud {
  position: fixed;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  color: var(--ink);
  mix-blend-mode: multiply;
}

.edge-label,
.mono {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.edge-label {
  position: absolute;
  opacity: .52;
  animation: powerFade 2.6s ease both;
}

.top-left { top: 1.2rem; left: 1.3rem; }
.top-right { top: 1.2rem; right: 1.3rem; }
.bottom-left { bottom: 1.2rem; left: 1.3rem; }
.bottom-right { bottom: 1.2rem; right: 1.3rem; }

.calibration {
  position: absolute;
  top: 19vh;
  bottom: 19vh;
  width: 1px;
  background: linear-gradient(transparent, rgba(59, 45, 85, .35), transparent);
}

.calibration::before,
.calibration::after {
  content: "";
  position: absolute;
  left: -6px;
  width: 13px;
  height: 1px;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}

.calibration::before { top: 24%; }
.calibration::after { bottom: 18%; }
.rail-left { left: 4.5vw; }
.rail-right { right: 4.5vw; }

.portal {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(72vw, 56rem);
  aspect-ratio: 5 / 3;
  transform: translate(-50%, -50%) scale(var(--portal-scale, 1));
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 0 30px rgba(126, 247, 255, .22));
  opacity: var(--portal-opacity, .78);
  transition: filter .7s ease;
}

.portal::before,
.portal::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
}

.portal::before {
  border: 1px solid rgba(126, 247, 255, .58);
  box-shadow: inset 0 0 55px rgba(244, 236, 255, .65), 0 0 44px rgba(126, 247, 255, .28);
}

.portal::after {
  inset: 24%;
  background: radial-gradient(ellipse at center, rgba(247, 183, 204, .28), rgba(126, 247, 255, .11) 38%, transparent 66%);
  filter: blur(4px);
  animation: breathe 9s ease-in-out infinite;
}

.inner-sky {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 35%, rgba(184, 255, 217, .45), transparent 18%),
    radial-gradient(circle at 72% 60%, rgba(247, 183, 204, .50), transparent 24%),
    linear-gradient(120deg, rgba(244, 236, 255, .18), rgba(205, 183, 246, .34));
  mix-blend-mode: screen;
}

.hud-rings {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  animation: slowRotate 26s linear infinite;
}

.ring,
.arc,
.ticks {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.ring-soft { stroke: rgba(59, 45, 85, .28); stroke-width: 1; stroke-dasharray: 8 18; }
.ring-cyan { stroke: rgba(126, 247, 255, .78); stroke-width: 1.3; stroke-dasharray: 80 24 8 24; }
.arc-a { stroke: rgba(247, 183, 204, .82); stroke-width: 1.5; }
.arc-b { stroke: rgba(184, 255, 217, .75); stroke-width: 1.2; }
.ticks { stroke: rgba(23, 18, 38, .44); stroke-width: 1; }

.title-wrap {
  position: relative;
  z-index: 5;
  text-align: center;
  margin-top: -4vh;
}

h1,
h2 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
  letter-spacing: .045em;
}

h1 {
  font-size: clamp(4rem, 13vw, 12rem);
  line-height: .92;
  text-shadow: 0 0 32px rgba(244, 236, 255, .88), 0 0 45px rgba(126, 247, 255, .25);
}

h2 {
  font-size: clamp(2.2rem, 5.8vw, 6.4rem);
  line-height: 1.08;
  max-width: 11ch;
}

.transmission,
.margin-note,
.dream-fragment,
blockquote,
.final-copy p {
  font-family: var(--whisper);
  font-size: clamp(1.25rem, 2vw, 2rem);
  line-height: 1.35;
  font-weight: 400;
}

.transmission {
  max-width: 34rem;
  margin: 1.4rem auto 0;
  color: var(--ink);
}

.boot {
  color: var(--ink);
  opacity: 0;
  animation: powerFade 2.2s .4s ease both;
}

.margin-note {
  position: absolute;
  right: 8vw;
  top: 64vh;
  max-width: 17rem;
  color: rgba(59, 45, 85, .78);
  z-index: 4;
}

.coordinate-field {
  position: absolute;
  inset: 16vh 13vw auto;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(59, 45, 85, .55);
}

.coordinate-field span {
  border-top: 1px solid rgba(126, 247, 255, .45);
  padding-top: .55rem;
  opacity: 0;
  animation: powerFade 1.8s ease both;
}

.coordinate-field span:nth-child(2) { animation-delay: .35s; }
.coordinate-field span:nth-child(3) { animation-delay: .7s; }
.coordinate-field span:nth-child(4) { animation-delay: 1.05s; }

.lens-copy {
  position: absolute;
  z-index: 5;
}

.copy-west { left: 8vw; top: 18vh; }
.copy-east { right: 7vw; top: 20vh; text-align: right; }
.chapter { color: var(--cyan); text-shadow: 0 0 16px rgba(126, 247, 255, .65); }

.scanner-panel {
  position: absolute;
  right: 9vw;
  bottom: 18vh;
  width: min(24rem, 70vw);
  z-index: 5;
  display: grid;
  gap: .8rem;
  padding: 1.1rem;
  border: 1px solid rgba(126, 247, 255, .45);
  background: rgba(244, 236, 255, .22);
  backdrop-filter: blur(14px);
  box-shadow: 0 0 30px rgba(126, 247, 255, .14);
}

.scanner-panel span {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(59, 45, 85, .18);
  color: var(--ink);
}

.scanner-panel span::after { content: "••••"; color: var(--cyan); }
.error-word { color: var(--error) !important; animation: errorShake 5.5s infinite; }

.ripple-stack {
  position: absolute;
  width: min(55vw, 36rem);
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: 3;
}

.ripple-stack i {
  position: absolute;
  inset: calc(var(--i, 0) * 8%);
  border-radius: 50%;
  border: 1px solid rgba(126, 247, 255, .48);
  box-shadow: 0 0 22px rgba(126, 247, 255, .18);
  animation: ripple 7s ease-in-out infinite;
}

.ripple-stack i:nth-child(1) { --i: 0; }
.ripple-stack i:nth-child(2) { --i: 1; animation-delay: -1s; }
.ripple-stack i:nth-child(3) { --i: 2; animation-delay: -2s; }
.ripple-stack i:nth-child(4) { --i: 3; animation-delay: -3s; }

.dream-fragment {
  position: absolute;
  z-index: 5;
  max-width: 20rem;
  color: rgba(23, 18, 38, .76);
}

.fragment-north { top: 13vh; right: 17vw; }
.fragment-south { bottom: 10vh; left: 14vw; }

.archive-pool {
  position: absolute;
  left: 50%;
  top: 57%;
  transform: translate(-50%, -50%);
  width: min(70vw, 48rem);
  aspect-ratio: 2.2 / 1;
  border-radius: 50%;
  border: 1px solid rgba(244, 236, 255, .32);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(126, 247, 255, .26), transparent 58%),
    linear-gradient(180deg, rgba(244, 236, 255, .09), rgba(23, 18, 38, .24));
  box-shadow: inset 0 0 75px rgba(126, 247, 255, .22), 0 0 70px rgba(126, 247, 255, .18);
}

.pool-glow {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: repeating-linear-gradient(0deg, rgba(126, 247, 255, .18) 0 2px, transparent 2px 11px);
  filter: blur(.2px);
  animation: drift 9s ease-in-out infinite;
}

.calendar-ghost {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 8rem;
  height: 10rem;
  transform: translate(-50%, -50%) rotate(-8deg);
  border: 1px solid rgba(244, 236, 255, .38);
  border-radius: 1.2rem;
  background: rgba(244, 236, 255, .10);
  backdrop-filter: blur(9px);
  box-shadow: 0 0 28px rgba(247, 183, 204, .18);
}

.calendar-ghost span {
  display: block;
  height: 1px;
  margin: 1.7rem 1.2rem;
  background: rgba(184, 255, 217, .52);
}

blockquote {
  position: absolute;
  left: 8vw;
  bottom: 15vh;
  z-index: 5;
  max-width: 28rem;
  margin: 0;
  color: rgba(244, 236, 255, .82);
  font-style: italic;
}

.droplets b {
  position: absolute;
  z-index: 4;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 18px var(--green);
  animation: floatDrop 8s ease-in-out infinite;
}

.droplets b:nth-child(1) { left: 24vw; top: 32vh; }
.droplets b:nth-child(2) { left: 70vw; top: 42vh; animation-delay: -1s; background: var(--cyan); }
.droplets b:nth-child(3) { left: 61vw; top: 75vh; animation-delay: -2s; }
.droplets b:nth-child(4) { left: 38vw; top: 67vh; animation-delay: -3s; background: var(--sakura); }
.droplets b:nth-child(5) { left: 82vw; top: 24vh; animation-delay: -4s; }

.eclipse-body {
  position: absolute;
  width: min(64vw, 42rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 42%, rgba(59, 45, 85, .95), var(--violet) 58%),
    var(--violet);
  box-shadow: 0 0 0 1px rgba(126, 247, 255, .32), 0 0 70px rgba(126, 247, 255, .25), inset 0 0 80px rgba(255, 111, 154, .14);
}

.eclipse-body::before {
  content: "";
  position: absolute;
  inset: -5%;
  border-radius: 50%;
  border: 1px solid rgba(255, 111, 154, .45);
  clip-path: polygon(0 45%, 100% 40%, 100% 60%, 0 55%);
  animation: errorShake 6s infinite;
}

.final-copy {
  position: relative;
  z-index: 5;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 1rem;
}

.final-copy h2 { max-width: 13ch; }
.final-copy p:not(.chapter) { max-width: 35rem; color: rgba(244, 236, 255, .76); margin: 0; }

.warning-brackets span {
  position: absolute;
  z-index: 5;
  width: 3rem;
  height: 3rem;
  border-color: var(--error);
  opacity: .62;
  filter: drop-shadow(0 0 10px var(--error));
}

.warning-brackets span:nth-child(1) { left: 22vw; top: 25vh; border-left: 1px solid; border-top: 1px solid; }
.warning-brackets span:nth-child(2) { right: 22vw; top: 25vh; border-right: 1px solid; border-top: 1px solid; }
.warning-brackets span:nth-child(3) { left: 22vw; bottom: 25vh; border-left: 1px solid; border-bottom: 1px solid; }
.warning-brackets span:nth-child(4) { right: 22vw; bottom: 25vh; border-right: 1px solid; border-bottom: 1px solid; }

.checksum {
  position: absolute;
  bottom: 10vh;
  color: var(--cyan);
  z-index: 5;
}

.fog {
  position: absolute;
  inset: -20%;
  z-index: -2;
  filter: blur(30px);
  opacity: .66;
  animation: fogDrift 18s ease-in-out infinite alternate;
}

.fog-one { background: radial-gradient(circle at 30% 50%, rgba(247, 183, 204, .62), transparent 28%), radial-gradient(circle at 68% 44%, rgba(126, 247, 255, .32), transparent 32%); }
.fog-two { background: radial-gradient(circle at 22% 70%, rgba(184, 255, 217, .35), transparent 26%), radial-gradient(circle at 78% 30%, rgba(247, 183, 204, .42), transparent 30%); }
.fog-three { background: radial-gradient(circle at 45% 52%, rgba(126, 247, 255, .28), transparent 33%), radial-gradient(circle at 74% 24%, rgba(205, 183, 246, .46), transparent 30%); }

.moth-trace {
  position: fixed;
  left: 0;
  top: 0;
  width: 1rem;
  height: 1rem;
  z-index: 30;
  pointer-events: none;
  border-radius: 55% 45% 55% 45%;
  background: radial-gradient(circle, var(--cyan), rgba(126, 247, 255, .12) 62%, transparent 70%);
  box-shadow: 0 0 18px var(--cyan), 0 0 38px rgba(247, 183, 204, .35);
  opacity: .62;
  transform: translate(-50%, -50%) rotate(18deg);
}

body.phase-eclipse .fixed-hud { color: var(--moon); mix-blend-mode: screen; }
body.phase-eclipse .portal { filter: invert(1) hue-rotate(180deg) drop-shadow(0 0 36px rgba(255, 111, 154, .32)); }
body.phase-archive .portal { filter: saturate(1.2) drop-shadow(0 0 42px rgba(184, 255, 217, .22)); }
body.phase-scan .portal { filter: contrast(1.08) drop-shadow(0 0 38px rgba(126, 247, 255, .32)); }

@keyframes powerFade { from { opacity: 0; transform: translateY(.35rem); } to { opacity: .62; transform: translateY(0); } }
@keyframes breathe { 0%, 100% { transform: scale(.94); opacity: .55; } 50% { transform: scale(1.08); opacity: .9; } }
@keyframes slowRotate { to { transform: rotate(360deg); } }
@keyframes fogDrift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 1%, 0) scale(1.05); } }
@keyframes ripple { 0%, 100% { transform: scale(.95); opacity: .35; } 50% { transform: scale(1.06); opacity: .8; } }
@keyframes drift { 0%, 100% { transform: translateY(-4%); } 50% { transform: translateY(5%); } }
@keyframes floatDrop { 0%, 100% { transform: translateY(0) scale(.75); opacity: .35; } 50% { transform: translateY(-2rem) scale(1); opacity: .9; } }
@keyframes errorShake { 0%, 86%, 100% { transform: translate(0, 0); text-shadow: none; } 88% { transform: translate(2px, -1px); text-shadow: -3px 0 var(--error); } 90% { transform: translate(-2px, 1px); text-shadow: 3px 0 var(--error); } 92% { transform: translate(1px, 0); text-shadow: 0 0 12px var(--error); } }

@media (max-width: 760px) {
  .portal { width: 105vw; }
  .coordinate-field { grid-template-columns: 1fr 1fr; inset: 12vh 7vw auto; }
  .copy-west,
  .copy-east { left: 7vw; right: 7vw; top: 14vh; text-align: left; }
  .scanner-panel { right: 7vw; bottom: 13vh; }
  .fragment-north { top: 44vh; right: 8vw; }
  .fragment-south { left: 8vw; bottom: 8vh; }
  .margin-note { right: 7vw; left: 18vw; top: 70vh; }
  blockquote { left: 7vw; right: 7vw; bottom: 10vh; }
  .archive-pool { width: 100vw; }
  .edge-label { font-size: .56rem; }
  .rail-left { left: 2vw; }
  .rail-right { right: 2vw; }
}