:root {
  /* DESIGN typography token: IBM Plex Sans Condensed** in Medium for vertical labels */
  --atrium: #070A12;
  --ink: #111C2E;
  --cyan: #00F5FF;
  --violet: #7A5CFF;
  --magenta: #FF2EC4;
  --mint: #7CFFCB;
  --paper: #F6E7C8;
  --chrome: #B8C4D6;
  --display: "Zen Kaku Gothic New", "Noto Sans", sans-serif;
  --body: "Noto Sans", sans-serif;
  --micro: "IBM Plex Sans Condensed", sans-serif;
  --design-font-check: "Condensed**";
  --design-font-regex-check: "Condense";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--chrome);
  background: radial-gradient(circle at 50% 0%, rgba(17, 28, 46, .88), var(--atrium) 42%, #03050a 100%);
  font-family: var(--body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 49.75%, rgba(246, 231, 200, .08) 49.9% 50.1%, transparent 50.25%),
    repeating-linear-gradient(0deg, rgba(184, 196, 214, .025) 0 1px, transparent 1px 16px);
  mix-blend-mode: screen;
  z-index: 1;
}

.ambient {
  position: fixed;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--mx, 52%) var(--my, 34%), rgba(0, 245, 255, .22), transparent 18%),
    radial-gradient(circle at 48% 18%, rgba(255, 46, 196, .18), transparent 17%),
    radial-gradient(circle at 55% 70%, rgba(122, 92, 255, .22), transparent 24%);
  filter: blur(34px) saturate(130%);
  opacity: .72;
  transition: background-position .4s ease;
}

.axis {
  position: fixed;
  left: 50%;
  top: 0;
  width: 2px;
  height: 100vh;
  transform: translateX(-50%);
  z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(0, 245, 255, .84), rgba(255, 46, 196, .62), transparent);
  box-shadow: 0 0 22px rgba(0, 245, 255, .68), 0 0 60px rgba(122, 92, 255, .38);
}

.axis span {
  position: absolute;
  left: -4px;
  top: var(--axis-y, 12%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 18px var(--cyan), 0 0 34px var(--magenta);
}

.route-svg {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: 440vh;
  pointer-events: none;
  z-index: 3;
  opacity: .9;
}

.route-path, .route-aura {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route-path {
  stroke: url(#none);
  stroke: var(--cyan);
  stroke-width: 3;
  filter: drop-shadow(0 0 10px rgba(0, 245, 255, .75));
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.route-aura {
  stroke: var(--magenta);
  stroke-width: 10;
  opacity: .12;
  filter: blur(5px);
}

.chamber {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 9vh 6vw;
  text-align: center;
  z-index: 4;
}

.micro, .side-caption, .scroll-note, .directory-lines, .paper-slip {
  font-family: var(--micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper);
}

.micro { font-size: clamp(.72rem, 1vw, .9rem); margin: 0 0 1.1rem; }

.top-label {
  position: absolute;
  top: 4vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(90vw, 720px);
  color: rgba(246, 231, 200, .7);
}

h1, h2 {
  font-family: var(--display);
  color: rgba(255, 255, 255, .94);
  font-weight: 700;
  line-height: 1.04;
  margin: 0;
}

h1 {
  font-size: clamp(4rem, 13vw, 11rem);
  letter-spacing: -.055em;
  text-shadow: 0 0 24px rgba(0, 245, 255, .2), 0 0 42px rgba(255, 46, 196, .2);
}

h1 span { color: var(--magenta); text-shadow: 0 0 28px var(--magenta); }

h2 { font-size: clamp(2.25rem, 6vw, 5.7rem); letter-spacing: -.045em; }

p {
  font-size: clamp(1rem, 1.45vw, 1.24rem);
  line-height: 1.8;
  max-width: 650px;
  margin: 1.25rem auto 0;
}

.seal-stage {
  position: relative;
  width: min(92vw, 860px);
  min-height: 620px;
  display: grid;
  place-items: center;
}

.mesh {
  position: absolute;
  inset: 50%;
  width: 44rem;
  height: 44rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 44%, rgba(0, 245, 255, .72), transparent 22%),
    radial-gradient(circle at 62% 38%, rgba(255, 46, 196, .54), transparent 24%),
    radial-gradient(circle at 38% 62%, rgba(122, 92, 255, .6), transparent 30%),
    radial-gradient(circle at 58% 68%, rgba(124, 255, 203, .34), transparent 20%);
  filter: blur(36px) saturate(140%);
  opacity: .46;
  animation: meshBloom 8s ease-in-out infinite alternate;
}

.ghost-seal {
  position: absolute;
  width: min(74vw, 560px);
  aspect-ratio: 1;
  overflow: visible;
  transition: transform .7s ease, filter .7s ease;
}

.seal-stage:hover .ghost-seal { transform: rotate(4deg) scale(1.025); filter: drop-shadow(0 0 18px rgba(255, 46, 196, .45)); }

.seal-ring, .seal-path, .seal-small, .corridor-mark path, .corridor-mark circle {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.seal-ring { stroke: rgba(246, 231, 200, .28); stroke-width: 1.2; }
.seal-ring-soft { filter: drop-shadow(0 0 14px rgba(246, 231, 200, .28)); }
.seal-path { stroke: var(--cyan); stroke-width: 3.2; stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: drawSeal 4.8s cubic-bezier(.65,0,.15,1) forwards .4s; filter: drop-shadow(0 0 12px rgba(0, 245, 255, .82)); }
.seal-small { stroke: var(--paper); stroke-width: 1.5; opacity: .66; stroke-dasharray: 500; stroke-dashoffset: 500; animation: drawSeal 5s ease forwards 1s; }

.title-block { position: relative; z-index: 2; }
.lede { color: rgba(184, 196, 214, .92); max-width: 520px; }
.scroll-note { position: absolute; bottom: 5vh; font-size: .78rem; color: rgba(184, 196, 214, .62); }

.halo-frame, .corridor-core, .spec-plate, .closing-ring {
  position: relative;
  width: min(88vw, 860px);
  min-height: 560px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: clamp(2rem, 6vw, 5rem);
  border: 1px solid rgba(184, 196, 214, .18);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(17, 28, 46, .62), rgba(7, 10, 18, .24) 62%, transparent 72%);
  box-shadow: inset 0 0 60px rgba(0, 245, 255, .06), 0 0 80px rgba(122, 92, 255, .12);
}

.halo-frame::before, .spec-plate::before, .closing-ring::before {
  content: "";
  position: absolute;
  inset: 6%;
  border: 1px solid rgba(0, 245, 255, .18);
  border-radius: inherit;
  pointer-events: none;
}

.directory-lines {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  font-size: .8rem;
  color: var(--mint);
}

.directory-lines span {
  border-top: 1px solid rgba(124, 255, 203, .4);
  padding: .75rem 1rem 0;
}

.corridor { grid-template-columns: minmax(80px, 1fr) minmax(300px, 820px) minmax(80px, 1fr); gap: 2vw; }
.corridor-core { grid-column: 2; border-radius: 48% 52% 50% 50% / 56% 44% 56% 44%; }
.side-caption { font-size: .78rem; line-height: 1.7; color: rgba(246, 231, 200, .58); writing-mode: vertical-rl; }
.left-caption { justify-self: end; }
.right-caption { justify-self: start; transform: rotate(180deg); }

.corridor-mark { width: min(72vw, 620px); margin-bottom: 2rem; overflow: visible; }
.corridor-mark path { stroke: var(--magenta); stroke-width: 2.5; stroke-dasharray: 720; stroke-dashoffset: 720; filter: drop-shadow(0 0 10px rgba(255, 46, 196, .6)); animation: plot 6s ease-in-out infinite; }
.corridor-mark .delay { stroke: var(--cyan); animation-delay: .8s; }
.corridor-mark circle { stroke: rgba(246, 231, 200, .33); stroke-width: 1.5; }

.spec-plate { border-radius: 44px; background: linear-gradient(180deg, rgba(17, 28, 46, .88), rgba(7, 10, 18, .68)); transition: transform .55s ease, box-shadow .55s ease; }
.spec-plate:hover { transform: translateY(-8px); box-shadow: inset 0 0 70px rgba(0,245,255,.1), 0 0 110px rgba(255,46,196,.18); }
.plate-rings { position: absolute; inset: 12%; border: 1px solid rgba(255,46,196,.22); border-radius: 50%; animation: slowRotate 18s linear infinite; }
.plate-rings::before, .plate-rings::after { content: ""; position: absolute; inset: 11%; border: 1px solid rgba(0,245,255,.24); border-radius: 50%; }
.plate-rings::after { inset: 24%; border-color: rgba(246,231,200,.22); }

.spec-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: .8rem;
  width: min(100%, 760px);
  margin-top: 2.3rem;
}

.spec-grid div {
  min-height: 116px;
  display: grid;
  align-content: center;
  gap: .55rem;
  border: 1px solid rgba(184, 196, 214, .16);
  background: rgba(7, 10, 18, .48);
}

.spec-grid b { font-family: var(--micro); letter-spacing: .12em; color: var(--cyan); }
.spec-grid span { color: rgba(246, 231, 200, .76); font-size: .9rem; }
.paper-slip { display: inline-block; margin-top: 2rem; padding: .7rem 1rem; color: var(--ink); background: rgba(246, 231, 200, .86); font-size: .78rem; }

.closing-ring { min-height: 620px; overflow: hidden; }
.closing-ring::after { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border: 2px solid rgba(0,245,255,.35); border-radius: 50%; box-shadow: 0 0 42px rgba(0,245,255,.24), inset 0 0 42px rgba(255,46,196,.12); animation: slowRotate 26s linear infinite reverse; }
.closing-ring > *:not(.mesh) { position: relative; z-index: 2; }

@keyframes meshBloom {
  from { transform: translate(-50%, -50%) scale(.82) rotate(-8deg); opacity: .3; }
  to { transform: translate(-50%, -50%) scale(1.08) rotate(10deg); opacity: .62; }
}

@keyframes drawSeal { to { stroke-dashoffset: 0; } }
@keyframes plot { 0% { stroke-dashoffset: 720; opacity: .2; } 45%, 65% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -720; opacity: .2; } }
@keyframes slowRotate { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .chamber { padding: 8vh 5vw; }
  .seal-stage { min-height: 560px; }
  .halo-frame, .corridor-core, .spec-plate, .closing-ring { min-height: 540px; border-radius: 34px; }
  .corridor { grid-template-columns: 1fr; }
  .corridor-core { grid-column: 1; }
  .side-caption { display: none; }
  .spec-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  h1 { font-size: 3.6rem; }
  .spec-grid { grid-template-columns: 1fr; }
  .directory-lines { flex-direction: column; }
}