:root {
  --black: #080A12;
  --cream: #EDE6D0;
  --gray: #6E7488;
  --blue: #5C7CFF;
  --amber: #FFB84D;
  --plum: #24142F;
  --copper: #B46A42;
  --jade: #5DFFB3;
  --mono-display: "Share Tech Mono", monospace;
  --mono-body: "IBM Plex Mono", monospace;
  --space: "Space Grotesk", sans-serif;
}

/* DESIGN typography tokens: IBM Plex Mono** for body copy; Space Grotesk** for rare larger explanatory phrases where a softer professional voice is needed. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--cream);
  background:
    radial-gradient(circle at 50% 18%, rgba(93, 255, 179, 0.11), transparent 26rem),
    radial-gradient(circle at 50% 72%, rgba(92, 124, 255, 0.09), transparent 30rem),
    linear-gradient(145deg, var(--black), #0b0812 46%, var(--plum));
  font-family: var(--mono-body);
  overflow-x: hidden;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  z-index: 5;
  background-image:
    linear-gradient(rgba(237, 230, 208, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237, 230, 208, 0.026) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 184, 77, 0.12) 1px, transparent 1px);
  background-size: 42px 42px, 42px 42px, 9px 9px;
  mix-blend-mode: screen;
}

.axis {
  position: fixed;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100vh;
  z-index: 1;
  background: linear-gradient(transparent, rgba(93, 255, 179, 0.35), rgba(255, 184, 77, 0.24), transparent);
  transform: translateX(-50%);
}

.axis span {
  position: absolute;
  left: -5px;
  top: var(--axis-y, 50%);
  width: 11px;
  height: 11px;
  border: 1px solid var(--jade);
  border-radius: 50%;
  background: var(--black);
  box-shadow: 0 0 22px var(--jade);
  transition: top 0.55s ease, border-color 0.55s ease, box-shadow 0.55s ease;
}

.cursor-field {
  position: fixed;
  left: var(--x, 50vw);
  top: var(--y, 50vh);
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(93, 255, 179, 0.10), rgba(255, 184, 77, 0.04) 28%, transparent 68%);
  filter: blur(4px);
}

.experience { position: relative; z-index: 2; }

.chamber {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 6rem 7vw;
  isolation: isolate;
  overflow: hidden;
}

.chamber::before {
  content: "";
  position: absolute;
  inset: 7vh 8vw;
  border: 1px solid rgba(110, 116, 136, 0.18);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 44%, rgba(110, 116, 136, 0.08) 45%, transparent 46%);
  transform: rotate(var(--section-rotate, 0deg));
  transition: transform 0.8s ease;
  z-index: -1;
}

.coordinate {
  position: absolute;
  top: 2rem;
  left: calc(50% + 1.2rem);
  font-family: var(--mono-display);
  color: var(--gray);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.hero-core, .section-core {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  width: min(78vw, 34rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(93, 255, 179, 0.42);
  background:
    radial-gradient(circle, rgba(93, 255, 179, 0.12), rgba(8, 10, 18, 0.86) 42%, rgba(36, 20, 47, 0.72) 72%, transparent),
    repeating-radial-gradient(circle, transparent 0 31px, rgba(110, 116, 136, 0.12) 32px, transparent 33px);
  box-shadow: inset 0 0 60px rgba(93, 255, 179, 0.08), 0 0 80px rgba(93, 255, 179, 0.10);
  transition: transform 0.22s ease-out;
}

.hero-core h1 {
  margin: 0;
  font-family: var(--mono-display);
  font-size: clamp(3rem, 9vw, 7.2rem);
  font-weight: 400;
  letter-spacing: 0.045em;
  color: var(--cream);
  text-shadow: 0 0 18px rgba(93, 255, 179, 0.45), 0 0 46px rgba(92, 124, 255, 0.22);
}

.subtitle, .section-core small, .floor-label, footer {
  color: var(--gray);
  font-size: clamp(0.78rem, 1.6vw, 0.96rem);
  line-height: 1.8;
}

.subtitle { max-width: 25rem; margin: 0.5rem auto 0; }
.seal, .core-label, .state, .protocol span, .tile span {
  font-family: var(--mono-display);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--jade);
  font-size: 0.75rem;
}

.circuit-ring { position: absolute; inset: -10%; width: 120%; height: 120%; animation: recalibrate 22s linear infinite; }
.ring { fill: none; stroke-width: 1; }
.ring.base { stroke: rgba(93, 255, 179, 0.44); }
.ring.inner { stroke: rgba(255, 184, 77, 0.28); stroke-dasharray: 2 12; }
.ticks path { fill: none; stroke: rgba(110, 116, 136, 0.6); stroke-width: 1; }

.trace { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12 12; filter: drop-shadow(0 0 8px currentColor); }
.jade { color: var(--jade); stroke: var(--jade); }
.amber { color: var(--amber); stroke: var(--amber); }
.blue { color: var(--blue); stroke: var(--blue); }
.draw { animation: pulseTrace 5.8s linear infinite; }

.orbit {
  position: absolute;
  inset: 2rem;
  animation: orbit 18s linear infinite;
}
.orbit-b { animation-duration: 24s; animation-direction: reverse; }
.mini-icon {
  position: absolute;
  left: 50%;
  top: -0.8rem;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid rgba(255, 184, 77, 0.55);
  border-radius: 50%;
  color: var(--amber);
  background: var(--black);
  box-shadow: 0 0 22px rgba(255, 184, 77, 0.22);
}
.orbit-b .mini-icon { border-color: rgba(93, 255, 179, 0.58); color: var(--jade); }
.floor-label { position: absolute; bottom: 2rem; font-family: var(--mono-display); letter-spacing: 0.18em; }

.two-poles { grid-template-columns: 1fr minmax(16rem, 26rem) 1fr; gap: 4vw; }
.pole {
  max-width: 23rem;
  padding: 1.5rem;
  border: 1px solid rgba(110, 116, 136, 0.34);
  background: linear-gradient(135deg, rgba(36, 20, 47, 0.58), rgba(8, 10, 18, 0.84));
  clip-path: polygon(1rem 0, 100% 0, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 0 100%, 0 1rem);
  transition: transform 0.22s ease-out, border-color 0.3s ease;
}
.pole-left { justify-self: end; border-color: rgba(255, 184, 77, 0.36); }
.pole-right { justify-self: start; border-color: rgba(93, 255, 179, 0.36); }
.pole p { font-family: var(--space); font-size: clamp(1.3rem, 2.2vw, 2rem); line-height: 1.18; margin: 1.1rem 0; }
.pole i { color: var(--gray); font-style: normal; font-size: 0.82rem; }
.pole-traces, .gate-circuit { position: absolute; inset: 18vh 6vw; width: 88vw; height: 64vh; z-index: -1; pointer-events: none; }
.field-line { fill: none; stroke: rgba(110, 116, 136, 0.22); stroke-width: 1; stroke-dasharray: 3 11; }

.section-core {
  width: min(68vw, 22rem);
  padding: 3rem;
  aspect-ratio: 1;
}
.section-core strong {
  display: block;
  font-family: var(--space);
  font-size: clamp(1.45rem, 2.5vw, 2.5rem);
  font-weight: 500;
  line-height: 1.12;
  max-width: 18rem;
}

.listening-field::before { border-radius: 34% 66% 62% 38% / 46% 42% 58% 54%; }
.radial-icons { position: absolute; width: min(82vw, 42rem); aspect-ratio: 1; }
.component {
  --r: min(34vw, 16.5rem);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7.5rem;
  height: 5.4rem;
  display: grid;
  place-items: center;
  gap: 0.25rem;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)));
  border: 1px solid rgba(93, 255, 179, 0.26);
  background: rgba(8, 10, 18, 0.72);
  box-shadow: inset 0 0 0 1px rgba(237, 230, 208, 0.03), 0 0 30px rgba(93, 255, 179, 0.05);
  transition: transform 0.22s ease-out;
}
.component::before, .component::after { content: ""; position: absolute; width: 1.5rem; height: 1px; background: rgba(110, 116, 136, 0.5); top: 50%; }
.component::before { left: -1.5rem; }
.component::after { right: -1.5rem; }
.component span { color: var(--amber); font-size: 1.5rem; }
.component b { color: var(--gray); font-family: var(--mono-display); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; }

.gate-wrap { position: relative; width: min(74vw, 48rem); min-height: 34rem; display: grid; place-items: center; transition: transform 0.22s ease-out; }
.gate-beam {
  position: absolute;
  width: 5rem;
  height: 100%;
  border-left: 1px solid rgba(92, 124, 255, 0.62);
  border-right: 1px solid rgba(92, 124, 255, 0.62);
  background: linear-gradient(90deg, transparent, rgba(92, 124, 255, 0.22), transparent);
  box-shadow: 0 0 70px rgba(92, 124, 255, 0.26);
}
.protocol {
  position: absolute;
  width: min(19rem, 32vw);
  padding: 1.3rem;
  background: rgba(8, 10, 18, 0.78);
  border: 1px solid rgba(92, 124, 255, 0.32);
}
.left-protocol { left: 0; top: 10%; }
.center-protocol { left: 50%; top: 42%; transform: translateX(-50%); border-color: rgba(255, 184, 77, 0.34); }
.right-protocol { right: 0; bottom: 10%; }
.protocol p { margin: 0.75rem 0 0; line-height: 1.65; color: var(--cream); }

.afterglow-archive { padding-bottom: 8rem; }
.archive-orbit { position: absolute; width: min(82vw, 45rem); aspect-ratio: 1; animation: archiveDrift 34s linear infinite; }
.tile {
  position: absolute;
  width: 12rem;
  min-height: 7rem;
  padding: 1rem;
  background: linear-gradient(145deg, rgba(180, 106, 66, 0.16), rgba(8, 10, 18, 0.78));
  border: 1px solid rgba(180, 106, 66, 0.38);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.24);
  transition: transform 0.22s ease-out;
}
.tile:nth-child(1) { left: 6%; top: 15%; }
.tile:nth-child(2) { right: 1%; top: 27%; }
.tile:nth-child(3) { left: 12%; bottom: 7%; }
.tile:nth-child(4) { right: 14%; bottom: 5%; }
.tile span { color: var(--copper); }
.tile p { line-height: 1.5; margin: 0.8rem 0 0; }
.archive-core { border-color: rgba(180, 106, 66, 0.44); box-shadow: 0 0 80px rgba(180, 106, 66, 0.1); }
footer { position: absolute; bottom: 2rem; text-align: center; }

@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes recalibrate { to { transform: rotate(360deg); } }
@keyframes pulseTrace { to { stroke-dashoffset: -96; } }
@keyframes archiveDrift { to { transform: rotate(-360deg); } }

@media (max-width: 820px) {
  .chamber { padding: 5rem 1.2rem; }
  .coordinate { left: 1.2rem; }
  .two-poles { grid-template-columns: 1fr; gap: 1.4rem; }
  .pole, .pole-left, .pole-right { justify-self: center; }
  .pole-traces { opacity: 0.42; }
  .section-core { order: -1; width: min(84vw, 20rem); }
  .component { width: 6.2rem; --r: min(39vw, 13rem); }
  .protocol { position: relative; width: min(90vw, 22rem); margin: 0.7rem auto; left: auto; right: auto; top: auto; bottom: auto; transform: none; }
  .gate-wrap { display: block; padding-top: 4rem; }
  .tile { width: 9rem; font-size: 0.78rem; }
}