:root {
  --bg: #0b1420;
  --bg-soft: #111d2a;
  --space-top: #132131;
  --space-bottom: #0d1824;
  --space-haze: rgba(103, 188, 213, 0.14);
  --space-haze-soft: rgba(102, 156, 205, 0.08);
  --text: rgba(244, 246, 252, 0.96);
  --muted: rgba(166, 178, 194, 0.58);
  --line: rgba(255, 255, 255, 0.08);
  --metal-1: #111216;
  --metal-2: #1e2025;
  --metal-3: #3a3d45;
  --metal-4: #696d78;
  --brand-silver: #b7bbc1;
  --brand-silver-bright: #f2f5f7;
  --brand-cyan: #59c2d9;
  --brand-cyan-bright: #9be7f2;
  --glow-1: #d9f2f7;
  --glow-2: #7cd5e8;
  --glow-3: #3fb8d4;
  --glow-strength: 0;
  --coin-light-phase: 0.5;
  --coin-tilt-x: -10deg;
  --coin-tilt-y: -12deg;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 50% 28%, var(--space-haze) 0%, transparent 26%),
    radial-gradient(circle at 50% 54%, var(--space-haze-soft) 0%, transparent 44%),
    linear-gradient(180deg, var(--space-top) 0%, var(--space-bottom) 100%);
  color: var(--text);
  font-family: "Manrope", sans-serif;
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(139, 213, 233, 0.08) 0%, transparent 18%),
    radial-gradient(circle at 50% 50%, transparent 0 24%, rgba(255, 255, 255, 0.028) 48%, transparent 74%);
  opacity: 0.9;
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 42%, rgba(2, 8, 16, 0.14) 84%, rgba(1, 4, 10, 0.42) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.016)),
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.01) 0 1px,
      transparent 1px 3px
    );
  mix-blend-mode: soft-light;
  opacity: 0.62;
  pointer-events: none;
}

.reactor-stage {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vh, 36px);
  padding: 28px;
}

.reactor-stage::before,
.reactor-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.reactor-stage::before {
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.6px),
    radial-gradient(circle at 56% 14%, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.6px),
    radial-gradient(circle at 71% 19%, rgba(166, 221, 235, 0.66) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 13% 28%, rgba(255, 255, 255, 0.52) 0 1px, transparent 1.5px),
    radial-gradient(circle at 34% 41%, rgba(255, 255, 255, 0.62) 0 1.4px, transparent 2px),
    radial-gradient(circle at 69% 47%, rgba(255, 255, 255, 0.62) 0 1px, transparent 1.8px),
    radial-gradient(circle at 23% 61%, rgba(255, 255, 255, 0.68) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 74% 66%, rgba(156, 222, 241, 0.52) 0 1px, transparent 1.7px),
    radial-gradient(circle at 18% 83%, rgba(255, 255, 255, 0.6) 0 1px, transparent 1.7px),
    radial-gradient(circle at 63% 88%, rgba(255, 255, 255, 0.68) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 47% 22%, rgba(255, 255, 255, 0.34) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 82% 33%, rgba(255, 255, 255, 0.28) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 11% 71%, rgba(170, 223, 240, 0.32) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 89% 79%, rgba(255, 255, 255, 0.28) 0 0.8px, transparent 1.5px);
  opacity: 0.68;
}

.reactor-stage::after {
  background:
    radial-gradient(circle at 50% 34%, rgba(114, 199, 223, 0.12), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(106, 176, 214, 0.08), transparent 38%),
    radial-gradient(circle at 50% 74%, rgba(9, 19, 29, 0.22), transparent 34%);
  mix-blend-mode: screen;
  opacity: 0.56;
}

.reactor-stage > * {
  position: relative;
  z-index: 1;
}

.reactor-heading {
  display: grid;
  justify-items: center;
  gap: 0;
  row-gap: 0;
  width: min(88vw, 600px);
  text-align: center;
}

.reactor-wordmark {
  position: relative;
  font-family: "Manrope", sans-serif;
  font-size: clamp(52px, 6vw, 88px);
  font-weight: 800;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  background: linear-gradient(160deg, #ffffff 0%, rgba(185, 235, 245, 0.92) 40%, rgba(89, 194, 217, 0.82) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 32px rgba(89, 194, 217, 0.18));
}

.reactor-wordmark::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: -4px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148, 229, 241, 0.3), transparent);
  opacity: 0.5;
}

.reactor-tagline {
  margin: clamp(14px, 2vh, 22px) 0 0;
  max-width: 40ch;
  color: rgba(210, 232, 242, 0.8);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.5;
}

.reactor-tease {
  margin: clamp(10px, 1.4vh, 16px) 0 0;
  max-width: 36ch;
  color: rgba(130, 190, 215, 0.5);
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1.6;
  text-transform: uppercase;
}

.reactor-frame {
  display: grid;
  place-items: center;
  width: min(88vw, 860px);
  aspect-ratio: 1;
  max-height: 60vh;
}

.reactor-coin {
  position: relative;
  width: min(58vw, 520px);
  aspect-ratio: 1;
}

.coin-renderer {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.coin-renderer canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.coin-shadow,
.coin-sidewall,
.coin-rim,
.coin-bevel,
.coin-face,
.coin-grid,
.coin-radials,
.energy,
.coin-core,
.tick-ring {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.coin-shadow {
  width: 86%;
  height: 86%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0) 72%);
  filter: blur(30px);
  transform: translate(-50%, -50%) translateZ(-60px);
}

.coin-sidewall {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(
      180deg,
      rgba(118, 124, 138, 0.88) 0%,
      rgba(30, 33, 40, 0.92) 18%,
      rgba(8, 8, 10, 0.98) 50%,
      rgba(86, 91, 102, 0.9) 84%,
      rgba(210, 214, 224, 0.66) 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 20px 50px rgba(0, 0, 0, 0.54),
    0 0 30px rgba(113, 213, 233, 0.03);
  overflow: hidden;
  transform: translate(-50%, -50%) translateZ(-16px) scaleY(0.96);
}

.coin-sidewall::before,
.coin-sidewall::after,
.coin-face::before,
.coin-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.coin-sidewall::before {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, calc(0.06 + var(--coin-light-phase) * 0.18)) 0%,
      rgba(255, 255, 255, 0.02) 18%,
      transparent 38%
    );
  mix-blend-mode: screen;
  opacity: 0.9;
}

.coin-sidewall::after {
  background:
    linear-gradient(
      180deg,
      transparent 42%,
      rgba(0, 0, 0, calc(0.16 + (1 - var(--coin-light-phase)) * 0.18)) 66%,
      rgba(0, 0, 0, calc(0.52 + (1 - var(--coin-light-phase)) * 0.26)) 100%
    ),
    radial-gradient(circle at 50% 88%, rgba(255, 255, 255, 0.1), transparent 30%);
  opacity: 0.96;
}

.coin-rim--outer {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04), transparent 63%),
    linear-gradient(180deg, #4e5663 0%, #0c1118 50%, #6d7986 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.08),
    inset 0 0 18px rgba(180, 234, 242, 0.08),
    0 18px 48px rgba(0, 0, 0, 0.52),
    0 0 22px rgba(74, 194, 221, 0.08),
    inset 0 -18px 28px rgba(0, 0, 0, 0.28);
  transform: translate(-50%, -50%) translateZ(10px);
}

.coin-bevel--outer {
  width: 96%;
  height: 96%;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.18), transparent 26%),
    linear-gradient(180deg, rgba(192, 198, 209, 0.38), rgba(14, 15, 20, 0) 34%, rgba(0, 0, 0, 0.24) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 -8px 14px rgba(0, 0, 0, 0.46);
  transform: translate(-50%, -50%) translateZ(8px);
}

.coin-rim--mid {
  width: 89%;
  height: 89%;
  background:
    radial-gradient(circle at 50% 42%, rgba(185, 239, 248, 0.08), transparent 48%),
    linear-gradient(180deg, rgba(72, 79, 91, 0.94), rgba(9, 12, 17, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 24px rgba(0, 0, 0, 0.68),
    inset 0 10px 18px rgba(181, 232, 241, 0.04);
  transform: translate(-50%, -50%) translateZ(6px);
}

.coin-bevel--inner {
  width: 82%;
  height: 82%;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(174, 179, 191, 0.16), rgba(18, 19, 25, 0) 38%, rgba(0, 0, 0, 0.18) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 -10px 18px rgba(0, 0, 0, 0.52);
  transform: translate(-50%, -50%) translateZ(4px);
}

.coin-rim--inner {
  width: 74%;
  height: 74%;
  background:
    radial-gradient(circle at 50% 45%, rgba(173, 236, 245, 0.06), transparent 36%),
    linear-gradient(180deg, rgba(39, 45, 54, 0.96), rgba(7, 11, 16, 1));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 0 20px rgba(0, 0, 0, 0.8);
  transform: translate(-50%, -50%) translateZ(2px);
}

.coin-face {
  width: 72%;
  height: 72%;
  background:
    radial-gradient(circle at 50% 16%, rgba(198, 241, 247, 0.18), transparent 30%),
    radial-gradient(circle at 50% 88%, rgba(111, 218, 237, 0.04), transparent 24%),
    linear-gradient(180deg, rgba(30, 37, 47, 0.98), rgba(8, 12, 17, 1));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 24px 28px rgba(255, 255, 255, 0.02),
    inset 0 -24px 32px rgba(0, 0, 0, 0.64),
    inset 0 0 34px rgba(0, 0, 0, 0.32),
    0 0 18px rgba(83, 198, 219, 0.07);
  overflow: hidden;
  transform: translate(-50%, -50%) translateZ(3px);
}

.coin-face::before {
  background:
    radial-gradient(
      ellipse at 50% 14%,
      rgba(255, 255, 255, calc(0.14 + var(--coin-light-phase) * 0.3)) 0%,
      rgba(255, 255, 255, calc(0.05 + var(--coin-light-phase) * 0.08)) 22%,
      transparent 52%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, calc(0.05 + var(--coin-light-phase) * 0.08)) 0%,
      transparent 34%
    );
  mix-blend-mode: screen;
  filter: blur(1px);
  opacity: 0.95;
}

.coin-face::after {
  background:
    radial-gradient(circle at 50% 76%, rgba(0, 0, 0, 0.44), transparent 42%),
    linear-gradient(
      180deg,
      transparent 48%,
      rgba(0, 0, 0, calc(0.1 + (1 - var(--coin-light-phase)) * 0.12)) 74%,
      rgba(0, 0, 0, calc(0.38 + (1 - var(--coin-light-phase)) * 0.22)) 100%
    );
  opacity: 0.9;
}

.coin-grid {
  width: 68%;
  height: 68%;
  background:
    radial-gradient(circle at 50% 50%, rgba(189, 239, 247, 0.04), transparent 60%),
    repeating-radial-gradient(circle, rgba(180, 226, 236, 0.13) 0 1px, transparent 1px 10px);
  opacity: 0.55;
  mask: radial-gradient(circle, black 0 64%, transparent 88%);
  transform: translate(-50%, -50%) translateZ(4px);
}

.coin-radials {
  width: 80%;
  height: 80%;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(210, 245, 250, 0.1) 0deg 1.2deg,
      transparent 1.2deg 8deg
    );
  opacity: 0.18;
  mask: radial-gradient(circle, transparent 0 72%, black 73% 89%, transparent 91%);
  transform: translate(-50%, -50%) translateZ(5px);
}

.energy--halo {
  width: 84%;
  height: 84%;
  background:
    conic-gradient(
      from -110deg,
      transparent 0deg 192deg,
      rgba(242, 245, 247, calc(0.24 + var(--glow-strength) * 0.2)) 206deg,
      rgba(124, 213, 232, calc(0.52 + var(--glow-strength) * 0.28)) 254deg,
      rgba(63, 184, 212, calc(0.72 + var(--glow-strength) * 0.18)) 302deg,
      transparent 338deg 360deg
    );
  filter: blur(12px);
  mix-blend-mode: screen;
  opacity: calc(0.38 + var(--glow-strength) * 0.62);
}

.energy--arc {
  width: 69%;
  height: 69%;
  border: 10px solid transparent;
  filter:
    drop-shadow(0 0 12px rgba(78, 197, 220, 0.34))
    drop-shadow(0 0 22px rgba(115, 219, 237, 0.16));
}

.energy--arc-a {
  border-top-color: rgba(237, 244, 247, 0.92);
  transform: translate(-50%, -50%) rotate(-8deg);
}

.energy--arc-b {
  width: 67%;
  height: 67%;
  border-top-color: rgba(112, 217, 236, 0.88);
  transform: translate(-50%, -50%) rotate(6deg);
}

.energy--arc-c {
  width: 66%;
  height: 66%;
  border-left-color: rgba(82, 197, 220, 0.9);
  transform: translate(-50%, -50%) rotate(182deg);
}

.energy--arc-d {
  width: 62%;
  height: 62%;
  border-right-color: rgba(154, 232, 244, 0.9);
  transform: translate(-50%, -50%) rotate(4deg);
}

.coin-core {
  width: 58%;
  height: 58%;
  position: absolute;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.12), transparent 24%),
    radial-gradient(circle at 60% 62%, rgba(68, 193, 218, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(20, 25, 31, 0.98), rgba(5, 8, 12, 1));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 0 22px rgba(255, 255, 255, 0.02),
    0 12px 32px rgba(0, 0, 0, 0.48),
    0 0 22px rgba(72, 198, 220, 0.08);
  overflow: hidden;
  transform: translate(-50%, -50%) translateZ(10px);
}

.coin-core::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(93, 206, 227, 0.14), rgba(93, 206, 227, 0.05) 34%, transparent 68%);
  filter: blur(12px);
  opacity: calc(0.4 + var(--glow-strength) * 0.28);
  pointer-events: none;
}

.coin-core__sheen {
  position: absolute;
  inset: 8% 10% auto;
  height: 22%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent);
  filter: blur(8px);
}

.coin-logo {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 34%;
  height: 34%;
  transform: translate(-50%, -50%);
  z-index: 3;
  object-fit: contain;
  opacity: 0.96;
  filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.08))
    drop-shadow(0 0 16px rgba(89, 194, 217, 0.14))
    drop-shadow(0 0 28px rgba(135, 229, 241, 0.06));
}

.coin-logo::selection {
  background: transparent;
}

.tick-ring {
  width: 96%;
  height: 96%;
  mask: radial-gradient(circle, transparent 0 87%, black 87% 100%);
  opacity: 0.34;
  transform: translate(-50%, -50%) translateZ(12px);
}

.tick-ring--outer {
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(222, 241, 245, 0.24) 0deg 2deg,
      transparent 2deg 7deg
    );
}

.tick-ring--inner {
  width: 78%;
  height: 78%;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(109, 215, 235, 0.18) 0deg 2deg,
      transparent 2deg 11deg
    );
  opacity: 0.18;
}

.reactor-meta {
  width: min(86vw, 980px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 18px;
  align-self: start;
  font-size: 14px;
  color: var(--muted);
}

.reactor-meta__left,
.reactor-meta__center,
.reactor-meta__right {
  display: flex;
  gap: 10px;
  align-items: center;
}

.reactor-meta__left {
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.12em;
}

.reactor-meta__center {
  justify-content: center;
  font-size: 12px;
}

.reactor-meta__right {
  justify-content: flex-end;
}

.reactor-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10px;
}

.reactor-pill.is-active {
  color: rgba(155, 232, 244, 0.94);
  border-color: rgba(87, 196, 218, 0.34);
  box-shadow: inset 0 0 18px rgba(73, 193, 216, 0.12);
}

@media (max-width: 760px) {
  .reactor-stage {
    gap: 28px;
    padding: 34px 18px 18px;
  }

  .reactor-heading {
    gap: 12px;
  }

  .reactor-wordmark {
    font-size: clamp(32px, 8vw, 48px);
  }

  .reactor-tagline {
    font-size: clamp(16px, 4vw, 20px);
    max-width: 28ch;
  }

  .reactor-tease {
    max-width: 24ch;
    font-size: clamp(12px, 3vw, 14px);
    letter-spacing: 0.16em;
  }

  .reactor-coin {
    width: min(78vw, 420px);
  }

  .reactor-meta {
    width: 100%;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 12px;
  }

  .reactor-meta__left,
  .reactor-meta__center,
  .reactor-meta__right {
    justify-content: center;
    align-items: center;
  }

  .reactor-meta__left {
    align-items: center;
  }
}