:root {
  --panel: rgba(4, 13, 24, .88);
  --panel2: rgba(6, 18, 34, .68);
  --cyan: #35e7ff;
  --green: #8aff29;
  --pink: #ff45bf;
  --white: #f8fbff;
  --deep: #071321;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: #06111a;
  color: var(--white);
  font-family: Arial, Helvetica, sans-serif;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }
svg { fill: currentColor; }

.landing {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-width: 1180px;
  min-height: 650px;
  overflow: hidden;
  isolation: isolate;
}
.city-bg {
  position: absolute;
  inset: 0;
  background: url('./assets/city-bg-clean.png') center center / 100% 100% no-repeat;
  filter: saturate(1.08) contrast(1.02) brightness(1.01);
  z-index: -5;
  transform: scale(1.035);
  transform-origin: center;
  will-change: transform;
}
.city-shade {
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    linear-gradient(180deg, rgba(2,8,18,.035), transparent 22%, rgba(1,7,16,.06) 78%, rgba(0,4,11,.13)),
    radial-gradient(circle at 50% 45%, transparent 0 54%, rgba(0,4,13,.08) 100%);
}

.brand-logo {
  position: absolute;
  left: 9.0vw;
  top: 5vh;
  width: 20.7vw;
  max-width: 350px;
  z-index: 5;
  filter: url("#neon-art-glow") drop-shadow(0 12px 20px rgba(0,0,0,.34));
}
.topbar {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}
.nav-pill {
  position: absolute;
  top: 1.8vh;
  left: 50%;
  transform: translateX(-50%);
  width: 28vw;
  min-width: 470px;
  max-width: 560px;
  height: 6.4vh;
  min-height: 58px;
  max-height: 70px;
  padding: 5px 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 8px;
  clip-path: polygon(5% 0, 95% 0, 100% 24%, 100% 76%, 95% 100%, 5% 100%, 0 76%, 0 24%);
  background:
    linear-gradient(180deg, rgba(4,15,29,.96), rgba(3,11,23,.88)) padding-box;
  border: 0;
  box-shadow:
    0 16px 34px rgba(0,0,0,.30),
    0 0 16px rgba(53,231,255,.10),
    0 0 12px rgba(255,69,191,.08);
  backdrop-filter: blur(10px);
  pointer-events: auto;
  isolation: isolate;
  overflow: hidden;
}
.nav-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  clip-path: inherit;
  background: linear-gradient(90deg,
    var(--cyan) 0%,
    rgba(53,231,255,.55) 28%,
    rgba(120,110,255,.42) 52%,
    rgba(255,69,191,.74) 78%,
    var(--pink) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}
.nav-pill::after {
  content: '';
  position: absolute;
  left: 9%;
  right: 9%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(53,231,255,.85), rgba(255,69,191,.75), transparent);
  box-shadow: 0 0 12px rgba(53,231,255,.28);
  pointer-events: none;
}
.nav-pill a {
  position: relative;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: rgba(247,251,255,.92);
  font-size: clamp(.72rem, .82vw, .92rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .055em;
  white-space: nowrap;
  text-shadow: 0 0 9px rgba(255,255,255,.07);
  transition: color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.nav-pill a:hover,
.nav-pill a:focus-visible {
  outline: none;
  color: #fff;
  background: rgba(31,120,149,.10);
  box-shadow: inset 0 0 0 1px rgba(70,225,255,.10);
}
.nav-pill a.active {
  color: var(--green);
  background: linear-gradient(180deg, rgba(130,255,41,.08), rgba(130,255,41,.025));
  text-shadow:
    0 0 8px rgba(138,255,41,.72),
    0 0 18px rgba(138,255,41,.26);
  box-shadow:
    inset 0 -2px 0 rgba(138,255,41,.80),
    inset 0 0 0 1px rgba(138,255,41,.10);
}
.hero-kitty,
.hero-breathe-canvas {
  position: absolute;
  left: var(--hero-left, 24.0vw);
  top: var(--hero-top, 16.5vh);
  height: var(--hero-height, 85.5vh);
  width: auto;
  max-width: none;
  min-width: 0;
  z-index: 3;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.34));
  user-select: none;
  pointer-events: none;
  transition: opacity .08s ease;
}
.hero-kitty-video {
  position: absolute;
  left: var(--hero-video-left, 21.5vw);
  top: var(--hero-video-top, 14.5vh);
  height: var(--hero-video-height, 82.5vh);
  width: auto;
  max-width: none;
  min-width: 0;
  z-index: 3;
  opacity: 0;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.34));
  pointer-events: none;
  user-select: none;
  transition: opacity .18s ease;
}
.hero-kitty::selection { background: transparent; }
.hero-breathe-canvas { opacity: 0; }
.landing.has-localized-breathe > .hero-kitty { opacity: 0; }
.landing.has-localized-breathe > .hero-breathe-canvas { opacity: 1; }
.landing.has-hero-video > .hero-kitty,
.landing.has-hero-video > .hero-breathe-canvas { opacity: 0; }
.landing.has-hero-video > .hero-kitty-video { opacity: 1; }

.stats-panel {
  position: absolute;
  left: 2.1vw;
  bottom: 7.1vh;
  width: 19.1vw;
  min-width: 305px;
  max-width: 360px;
  height: 17.2vh;
  min-height: 150px;
  max-height: 178px;
  border-radius: 20px;
  padding: 16px;
  clip-path: polygon(8% 0, 94% 0, 100% 14%, 100% 88%, 94% 100%, 7% 100%, 0 86%, 0 16%);
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 13px;
  z-index: 4;
}
.stats-panel::before,
.stats-panel::after {
  content: '';
  position: absolute;
  width: 48px;
  height: 30px;
}
.stats-panel::before { left: -1px; bottom: -1px; border-left: 4px solid var(--cyan); border-bottom: 4px solid var(--cyan); border-bottom-left-radius: 24px; }
.stats-panel::after { right: -1px; top: -1px; border-right: 4px solid var(--green); border-top: 4px solid var(--green); border-top-right-radius: 24px; }
.stats-avatar {
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.9);
  background: #071522;
  box-shadow: 0 0 0 4px rgba(66,255,210,.12);
}
.stats-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hero-panel {
  position: absolute;
  right: 2.0vw;
  top: 16.4vh;
  width: 33.4vw;
  min-width: 550px;
  max-width: 650px;
  height: 46.2vh;
  min-height: 424px;
  max-height: 470px;
  z-index: 5;
  padding: 18px 24px 22px;
  background: linear-gradient(180deg, rgba(2,10,21,.94), rgba(2,11,21,.78));
  clip-path: polygon(6% 0, 94% 0, 100% 9%, 100% 90%, 95% 100%, 5% 100%, 0 91%, 0 10%);
  filter: drop-shadow(0 22px 34px rgba(0,0,0,.34));
  backdrop-filter: blur(10px);
}
.hero-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  pointer-events: none;
  background: linear-gradient(135deg, var(--cyan) 0 18%, rgba(53,231,255,.12) 24% 65%, var(--pink) 82% 100%);
  clip-path: inherit;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.hero-panel::after {
  content: '';
  position: absolute;
  inset: 8px;
  pointer-events: none;
  clip-path: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.015), transparent 35%);
}
.scroll-hint {
  text-shadow: 0 0 8px rgba(255,255,255,.13), 0 0 18px rgba(53,231,255,.08);
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 3vh;
  transform: translateX(-50%);
  z-index: 5;
}
.arrows { display: grid; gap: 1px; }
.arrows i {
  width: 14px;
  height: 14px;
  border-right: 3px solid #39d9ff;
  border-bottom: 3px solid #39d9ff;
  opacity: .26;
  transform: rotate(45deg);
  filter: drop-shadow(0 0 3px rgba(53,231,255,.28));
  animation: scroll-arrow-pulse 1.45s ease-in-out infinite;
}
.arrows i:nth-child(2) { animation-delay: .34s; }

@keyframes scroll-arrow-pulse {
  0%, 24%, 100% {
    opacity: .24;
    border-color: rgba(57,217,255,.58);
    filter: drop-shadow(0 0 2px rgba(53,231,255,.2));
  }
  42%, 58% {
    opacity: 1;
    border-color: #8aff29;
    filter: drop-shadow(0 0 5px rgba(138,255,41,.9)) drop-shadow(0 0 11px rgba(138,255,41,.56));
  }
}

@media (max-width: 1179px), (max-height: 649px) {
  body { overflow: auto; }
  .landing {
    min-width: 0;
    min-height: 100vh;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px 12px 28px;
  }
  .city-bg, .city-shade { position: fixed; }
  .brand-logo, .topbar, .hero-kitty, .hero-kitty-video, .stats-panel, .hero-panel, .scroll-hint {
    position: relative;
    left: auto; right: auto; top: auto; bottom: auto;
    transform: none;
    width: min(94vw, 720px);
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0 auto;
  }
  .topbar { inset: auto; width: min(96vw, 820px); pointer-events: auto; }
  .nav-pill { position: relative; left: auto; top: auto; transform: none; width: 100%; min-width: 0; max-width: 620px; height: 64px; min-height: 64px; grid-template-columns: repeat(4, 1fr); padding: 5px 12px; }
  .brand-logo { width: min(72vw, 360px); }
  .hero-kitty { width: min(72vw, 560px); }
  .hero-kitty-video { width: min(72vw, 560px); height: auto; }
  .hero-breathe-canvas { display: none; }
  .landing.has-localized-breathe > .hero-kitty { opacity: 1; }
  .stats-panel { width: min(92vw, 420px); height: auto; }
  .hero-panel { width: min(94vw, 620px); height: 520px; }
  .scroll-hint { width: auto; }
}

/* ===== Right-side panel refresh ===== */
.hero-panel--new {
  right: 2.2vw;
  top: 17.2vh;
  width: 34.8vw;
  min-width: 560px;
  max-width: 670px;
  height: 55.5vh;
  min-height: 505px;
  max-height: 570px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  backdrop-filter: none;
  overflow: visible;
}
.hero-panel--new::before,
.hero-panel--new::after {
  display: none;
}
.panel-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  filter: none;
}
.panel-content-new {
  position: absolute;
  inset: 6.5% 7.5% 8.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  z-index: 1;
  background: transparent;
  box-shadow: none;
}
.panel-logo-new {
  width: 91%;
  max-width: 500px;
  max-height: 315px;
  object-fit: contain;
  filter: url("#neon-art-glow");
}
.panel-ticker-new {
  margin-top: -65px;
  color: var(--green);
  font-size: clamp(1.55rem, 2.1vw, 2.25rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
  text-shadow:
    0 0 7px rgba(138,255,41,.86),
    0 0 20px rgba(138,255,41,.42);
}
.panel-description-new {
  width: 88%;
  max-width: 515px;
  margin: 22px 0 0;
  color: rgba(247,251,255,.92);
  font-size: clamp(1rem, 1.08vw, 1.18rem);
  line-height: 1.52;
  text-align: center;
  text-shadow: 0 0 10px rgba(88,226,255,.10);
}

/* Contract address intentionally lives OUTSIDE the HUD panel.
   Refresh: make it visually match the social buttons. */
.contract-field-new {
  position: absolute;
  right: 4.3vw;
  top: 67.5vh;
  width: 30.5vw;
  min-width: 500px;
  max-width: 590px;
  min-height: 70px;
  padding: 0 18px;
  z-index: 6;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  border-radius: 999px;
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, rgba(4,14,28,.96), rgba(3,11,23,.90)) padding-box,
    linear-gradient(90deg, rgba(255,69,191,.98) 0%, rgba(72,214,255,.98) 48%, rgba(255,69,191,.92) 100%) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 12px 28px rgba(0,0,0,.30),
    0 0 18px rgba(49,226,255,.14),
    0 0 12px rgba(255,69,191,.10);
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.contract-field-new::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 28%),
    linear-gradient(180deg, rgba(6,18,35,.92), rgba(3,11,23,.82));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  pointer-events: none;
}
.contract-field-new span,
.contract-field-new strong {
  position: relative;
  z-index: 1;
}
.contract-field-new span {
  padding-left: 12px;
  color: rgba(126,239,255,.92);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(72,214,255,.22);
}
.contract-field-new strong {
  min-width: 0;
  padding: 8px 4px 8px 18px;
  border-left: 1px solid rgba(72,214,255,.32);
  color: var(--green);
  font-size: clamp(1.35rem, 1.75vw, 1.85rem);
  font-weight: 900;
  letter-spacing: .08em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  text-shadow:
    0 0 8px rgba(138,255,41,.72),
    0 0 20px rgba(138,255,41,.26);
}
@media (max-width: 1179px), (max-height: 649px) {
  .hero-panel--new {
    width: min(94vw, 660px);
    height: min(78vw, 560px);
    min-height: 480px;
  }
  .panel-logo-new { width: 86%; }
  .panel-ticker-new { margin-top: -30px; }
  .contract-field-new {
    position: relative;
    right: auto;
    top: auto;
    width: min(90vw, 590px);
    min-width: 0;
    margin: 0 auto;
  }
}

@media (max-width: 720px) {
  .panel-description-new {
    width: 92%;
    font-size: .98rem;
  }
  .panel-logo-new { width: 80%; }
  .contract-field-new {
    width: min(92vw, 560px);
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: center;
  }
  .contract-field-new strong {
    padding-left: 0;
    padding-top: 10px;
    border-left: 0;
    border-top: 1px solid rgba(72,214,255,.22);
    text-align: center;
  }
}

/* ===== Clickable CA + social buttons ===== */
.contract-field-new {
  appearance: none;
  -webkit-appearance: none;
  color: var(--white);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease;
}
.contract-field-new:hover,
.contract-field-new:focus-visible {
  outline: none;
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 14px 34px rgba(0,0,0,.32),
    0 0 20px rgba(49,226,255,.18),
    0 0 14px rgba(255,69,191,.14);
  filter: brightness(1.045);
}
.contract-field-new:active { transform: translateY(0) scale(.995); }
.contract-field-new::after {
  content: 'COPIED';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  padding: 7px 11px;
  border-radius: 999px;
  color: #07120b;
  background: linear-gradient(180deg, #a4ff57, #83ff2d);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .10em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  box-shadow: 0 0 14px rgba(138,255,41,.38);
  z-index: 2;
}
.contract-field-new.is-copied::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.contract-field-new.is-copied strong { color: #c5ff74; }
.contract-field-new.copy-failed::after {
  content: 'FAILED';
  color: #fff;
  background: var(--pink);
}

.social-buttons-row {
  position: absolute;
  right: 4.3vw;
  top: calc(67.5vh + 84px);
  width: 30.5vw;
  min-width: 500px;
  max-width: 590px;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 10px;
}
.social-image-button {
  min-width: 0;
  width: 100%;
  aspect-ratio: 2.65 / 1;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  transition: transform .16s ease, filter .16s ease;
  filter: drop-shadow(0 8px 15px rgba(0,0,0,.24));
}
.social-image-button img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
/* Keep the generated artwork's outer matte outside the visible button. */
.social-image-button--telegram img {
  clip-path: inset(17% 5% 16.3% 4.4% round 12% / 30%);
  transform: scale(1.01, 1.055);
  transform-origin: 50% 0;
}
.social-image-button--telegram {
  filter: drop-shadow(-2px 0 4px rgba(255, 36, 234, .35))
          drop-shadow(2px 0 4px rgba(96, 105, 255, .30))
          drop-shadow(0 8px 15px rgba(0, 0, 0, .24));
}
.social-image-button:hover,
.social-image-button:focus-visible {
  outline: none;
  transform: translateY(-3px) scale(1.035);
  filter: brightness(1.08) drop-shadow(0 12px 22px rgba(0,0,0,.32));
}
.social-image-button:active { transform: translateY(-1px) scale(.99); }

@media (max-width: 1179px), (max-height: 649px) {
  .social-buttons-row {
    position: relative;
    right: auto;
    top: auto;
    width: min(90vw, 590px);
    min-width: 0;
    max-width: 590px;
    margin: -4px auto 8px;
  }
}

@media (max-width: 720px) {
  .contract-field-new::after {
    top: 12px;
    right: 12px;
    transform: translateX(8px);
  }
  .contract-field-new.is-copied::after { transform: translateX(0); }
  .social-buttons-row { gap: 8px; }
  .social-image-button { border-radius: 12px; }
}

/* ===== Live token stats / left HUD refresh ===== */
.token-stats-panel {
  position: absolute;
  left: 2.5vw;
  bottom: 6.1vh;
  width: 22vw;
  min-width: 350px;
  max-width: 420px;
  height: auto;
  min-height: 228px;
  max-height: none;
  padding: 19px 20px 16px;
  display: block;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 0;
  clip-path: polygon(8% 0, 91% 0, 100% 13%, 100% 88%, 94% 100%, 7% 100%, 0 87%, 0 14%);
  background:
    linear-gradient(180deg, rgba(4,14,28,.95), rgba(3,11,23,.88)) padding-box,
    linear-gradient(135deg, var(--cyan) 0 14%, rgba(53,231,255,.16) 26% 70%, var(--pink) 88% 100%) border-box;
  box-shadow:
    0 18px 34px rgba(0,0,0,.34),
    0 0 18px rgba(53,231,255,.11),
    0 0 12px rgba(255,69,191,.08);
  backdrop-filter: blur(11px);
  z-index: 4;
}
.token-stats-panel::before {
  content: '';
  position: absolute;
  inset: 7px;
  clip-path: inherit;
  border: 1px solid rgba(70,196,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.018), transparent 36%);
  pointer-events: none;
}
.token-stats-panel::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 54px;
  height: 4px;
  background: linear-gradient(90deg, var(--green), var(--cyan));
  box-shadow: 0 0 10px rgba(138,255,41,.34);
  pointer-events: none;
}
.token-stats-panel .stats-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(71,216,255,.16);
}
.token-stats-panel .stats-avatar {
  width: 68px;
  height: 68px;
  border: 2px solid rgba(255,255,255,.88);
  box-shadow:
    0 0 0 3px rgba(53,231,255,.12),
    0 0 14px rgba(53,231,255,.14);
}
.stats-title { min-width: 0; }
.live-status[hidden], .stats-updated[hidden] { display: none !important; }
.stats-title h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(.88rem, .98vw, 1.08rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .015em;
  text-shadow: 0 0 9px rgba(255,255,255,.10);
}
.stats-title p {
  margin: 7px 0 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(126,239,255,.90);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.live-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255,255,255,.28);
  box-shadow: none;
}
.token-stats-panel.is-loading .live-dot {
  background: var(--cyan);
  box-shadow: 0 0 9px rgba(53,231,255,.65);
}
.token-stats-panel.is-live .live-dot {
  background: var(--green);
  box-shadow: 0 0 9px rgba(138,255,41,.70);
}
.token-stats-panel.is-error .live-dot {
  background: var(--pink);
  box-shadow: 0 0 9px rgba(255,69,191,.66);
}
.live-stats-grid {
  position: relative;
  z-index: 1;
  margin: 13px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.live-stat {
  min-width: 0;
  padding: 9px 10px 8px;
  border: 1px solid rgba(67,202,255,.14);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(9,28,47,.58), rgba(5,17,31,.40));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.012);
}
.live-stat dt {
  color: rgba(159,227,244,.78);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.live-stat dt small {
  margin-left: 3px;
  color: rgba(255,255,255,.46);
  font-size: .54rem;
}
.live-stat dd {
  margin: 4px 0 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  font-size: clamp(.92rem, 1.03vw, 1.12rem);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: .01em;
  white-space: nowrap;
  text-shadow: 0 0 9px rgba(255,255,255,.08);
}
.live-stat--buy dd {
  color: #9dff57;
  text-shadow: 0 0 10px rgba(138,255,41,.24);
}
.live-stat--sell dd {
  color: #ff7bd4;
  text-shadow: 0 0 10px rgba(255,69,191,.22);
}
.stats-updated {
  position: relative;
  z-index: 1;
  margin-top: 9px;
  color: rgba(187,216,228,.52);
  font-size: .58rem;
  line-height: 1.2;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: right;
}

@media (max-width: 1179px), (max-height: 649px) {
  .token-stats-panel {
    position: relative;
    left: auto;
    bottom: auto;
    width: min(92vw, 420px);
    min-width: 0;
    margin: 0 auto;
  }
}

/* ===== Live token stats panel skin ===== */
.token-stats-panel {
  left: 2.5vw;
  bottom: 6.1vh;
  width: 22vw;
  min-width: 360px;
  max-width: 430px;
  min-height: 238px;
  padding: 28px 28px 24px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  clip-path: none;
  background: url('./assets/panel-stats.png') center / 100% 100% no-repeat;
  box-shadow: none;
  backdrop-filter: none;
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.32));
}
.token-stats-panel::before,
.token-stats-panel::after { display: none; }
.token-stats-panel .stats-head {
  grid-template-columns: 66px minmax(0,1fr);
  gap: 14px;
  padding: 2px 2px 15px;
  border-bottom: 1px solid rgba(65,219,255,.22);
}
.token-stats-panel .stats-avatar {
  width: 64px;
  height: 64px;
  border: 2px solid rgba(241,249,255,.88);
  box-shadow: 0 0 0 2px rgba(53,231,255,.14), 0 0 14px rgba(53,231,255,.16);
}
.stats-title h2 {
  font-size: clamp(.9rem, 1.02vw, 1.12rem);
  letter-spacing: .025em;
}
.live-stats-grid {
  margin: 14px 2px 0;
  gap: 0;
  border-top: 0;
}
.live-stat {
  position: relative;
  padding: 11px 12px 10px;
  min-height: 64px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.live-stat:nth-child(odd) {
  border-right: 1px solid rgba(55,202,255,.18);
}
.live-stat:nth-child(n+3) {
  border-top: 1px solid rgba(255,69,191,.13);
}
.live-stat dt {
  color: rgba(131,222,239,.82);
  font-size: .63rem;
  letter-spacing: .11em;
}
.live-stat dd {
  margin-top: 6px;
  font-size: clamp(1rem, 1.12vw, 1.24rem);
}
.live-stat--buy dd {
  color: #a7ff62;
  text-shadow: 0 0 10px rgba(138,255,41,.28);
}
.live-stat--sell dd {
  color: #ff78d1;
  text-shadow: 0 0 10px rgba(255,69,191,.26);
}
.stats-updated {
  margin: 8px 5px 0;
  padding-top: 6px;
  border-top: 1px solid rgba(53,231,255,.08);
}

@media (max-width: 1179px), (max-height: 649px) {
  .token-stats-panel {
    width: min(92vw, 430px);
    min-width: 0;
    min-height: 238px;
    padding: 28px 28px 24px;
  }
}

/* ===== Compact rounded navbar ===== */
.nav-pill {
  top: 2.1vh;
  width: 36vw;
  min-width: 560px;
  max-width: 720px;
  height: 58px;
  min-height: 58px;
  max-height: 58px;
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  border-radius: 999px;
  border: 2px solid transparent;
  clip-path: none;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(4,14,28,.96), rgba(3,11,23,.90)) padding-box,
    linear-gradient(90deg, rgba(53,231,255,.95) 0%, rgba(53,231,255,.45) 22%, rgba(135,105,255,.28) 50%, rgba(255,69,191,.55) 78%, rgba(255,69,191,.95) 100%) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 14px 32px rgba(0,0,0,.30),
    0 0 18px rgba(53,231,255,.14),
    0 0 14px rgba(255,69,191,.10);
  backdrop-filter: blur(10px);
  filter: none;
  isolation: isolate;
}
.nav-pill::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 30%),
    linear-gradient(180deg, rgba(6,18,35,.94), rgba(3,11,23,.84));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  pointer-events: none;
  z-index: 0;
}
.nav-pill::after { display: none; }
.nav-pill a {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 100%;
  padding: 0 14px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: rgba(242,248,255,.94);
  font-size: clamp(.72rem, .80vw, .88rem);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255,255,255,.08);
  box-shadow: none;
}
.nav-pill > * + *::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(53,231,255,.40), rgba(255,69,191,.30), transparent);
}
.nav-pill a:hover,
.nav-pill a:focus-visible {
  outline: none;
  color: #fff;
  background: rgba(25,108,145,.08);
  text-shadow: 0 0 8px rgba(255,255,255,.18), 0 0 16px rgba(53,231,255,.12);
}
.nav-pill a.active {
  color: var(--green);
  background: linear-gradient(180deg, rgba(102,255,60,.10), rgba(102,255,60,.04));
  box-shadow:
    inset 0 0 0 1px rgba(138,255,41,.20),
    0 0 0 1px rgba(138,255,41,.10),
    inset 0 -2px 0 rgba(138,255,41,.78);
  text-shadow:
    0 0 8px rgba(138,255,41,.86),
    0 0 18px rgba(138,255,41,.38);
}
.nav-pill a.active::after {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 7px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--green), rgba(53,231,255,.95), transparent);
  box-shadow: 0 0 10px rgba(138,255,41,.46);
}
@media (max-width: 1179px), (max-height: 649px) {
  .nav-pill {
    width: min(92vw, 720px);
    min-width: 0;
    max-width: 720px;
    height: 58px;
    min-height: 58px;
    padding: 4px;
  }
  .nav-pill a {
    padding: 0 8px;
    font-size: clamp(.70rem, 2vw, .84rem);
  }
}

@media (max-width: 720px) {
  .nav-pill {
    height: 54px;
    min-height: 54px;
  }
}

/* ===== Multi-screen flow: Home -> Gallery ===== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 74px;
  background: #03111d;
}
body {
  overflow-x: hidden;
  overflow-y: auto;
  background: #03111d;
}

/* Keep the compact navigation visible on both screens. */
.topbar {
  position: fixed;
  inset: 0;
  z-index: 40;
}

/* ===== Gallery v6: custom room built around the native monitor ===== */
.gallery-integrated {
  --gallery-zoom: 1.12;
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  isolation: isolate;
  background: #021019;
}

.gallery-stage {
  --monitor-left: 24.52%;
  --monitor-top: 19.88%;
  --monitor-width: 50.72%;
  --monitor-height: 54.00%;
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 177.7778vh);
  height: max(56.25vw, 100vh);
  transform: translate(-50%, -50%) scale(var(--gallery-zoom));
  transform-origin: center center;
}

.gallery-room-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
  filter: saturate(1.015) contrast(1.01) brightness(.98);
}

/* The interactive layer sits inside the dark display, never over its physical bezel. */
.lab-monitor {
  position: absolute;
  left: var(--monitor-left);
  top: var(--monitor-top);
  width: var(--monitor-width);
  height: var(--monitor-height);
  z-index: 3;
  overflow: hidden;
  border-radius: 3.1% / 5.2%;
  color: #f4fbff;
  background:
    radial-gradient(circle at 72% 30%, rgba(255,69,191,.10), transparent 34%),
    radial-gradient(circle at 25% 58%, rgba(53,231,255,.11), transparent 36%),
    linear-gradient(145deg, rgba(3,21,33,.94), rgba(2,10,18,.96) 58%, rgba(12,8,26,.94));
  box-shadow:
    inset 0 0 0 1px rgba(80,218,255,.16),
    inset 0 10px 24px rgba(190,248,255,.025),
    inset 0 -38px 52px rgba(0,0,0,.34),
    inset 28px 0 44px rgba(0,0,0,.17),
    inset -28px 0 44px rgba(0,0,0,.17),
    0 12px 30px rgba(0,0,0,.20);
  outline: none;
}

.lab-monitor::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 16%),
    repeating-linear-gradient(180deg, transparent 0 3px, rgba(98,227,255,.018) 4px);
  mix-blend-mode: screen;
}

.lab-monitor::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 19;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(118deg, rgba(220,251,255,.055), transparent 23%, transparent 67%, rgba(53,231,255,.035) 82%, transparent),
    radial-gradient(ellipse at 50% 112%, rgba(53,231,255,.10), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 18%, transparent 76%, rgba(0,0,0,.16));
  box-shadow: inset 0 0 42px rgba(0,0,0,.28);
}

.lab-monitor-top {
  position: absolute;
  left: 3.2%;
  right: 3.2%;
  top: 3.5%;
  height: 9%;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(211,239,248,.75);
  font-size: clamp(7px, .54vw, 11px);
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  pointer-events: none;
}

.lab-monitor-top b {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  color: rgba(203,255,217,.82);
  font-size: .88em;
}

.lab-screen-brand {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 15%;
  max-height: 205%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: url("#neon-art-glow");
}

.lab-monitor-top i {
  width: .68em;
  height: .68em;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(138,255,41,.78);
}

.lab-gallery-body {
  position: absolute;
  left: 3.1%;
  right: 3.1%;
  top: 13.1%;
  bottom: 13.3%;
  display: grid;
  grid-template-columns: 19% 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 2.1%;
}

.lab-thumbs {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 4.5% 5%;
}

.lab-thumb {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(66,220,255,.38);
  border-radius: 10%;
  background:
    radial-gradient(circle at 50% 42%, rgba(53,231,255,.12), transparent 48%),
    rgba(4,18,29,.82);
  box-shadow:
    inset 0 1px 0 rgba(221,251,255,.045),
    inset 0 -10px 16px rgba(0,0,0,.20),
    0 5px 10px rgba(0,0,0,.18);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease;
}

.lab-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
  pointer-events: none;
}

.lab-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.lab-thumb:hover,
.lab-thumb:focus-visible {
  outline: none;
  transform: translateX(2px);
  filter: brightness(1.08);
}

.lab-thumb.is-active {
  border-color: rgba(138,255,41,.92);
  box-shadow:
    0 0 0 1px rgba(138,255,41,.17),
    0 0 9px rgba(138,255,41,.25),
    inset 0 0 10px rgba(53,231,255,.08);
}

.lab-main-screen {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(89,226,255,.22);
  border-radius: 1.8% / 3.5%;
  background: rgba(2,13,22,.34);
  box-shadow:
    inset 0 1px 0 rgba(224,252,255,.065),
    inset 0 -24px 40px rgba(0,0,0,.30),
    inset 18px 0 30px rgba(0,0,0,.12),
    inset -18px 0 30px rgba(0,0,0,.12),
    0 8px 20px rgba(0,0,0,.24),
    0 0 15px rgba(53,231,255,.055);
  perspective: 900px;
  touch-action: pan-y;
}

.lab-fullscreen {
  position: absolute;
  top: 3.2%;
  right: 2.2%;
  z-index: 10;
  width: clamp(28px, 2.25vw, 44px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(93,229,255,.48);
  border-radius: 22%;
  color: #dffaff;
  background: rgba(2,13,24,.76);
  box-shadow: 0 6px 18px rgba(0,0,0,.28), inset 0 0 12px rgba(53,231,255,.06);
  backdrop-filter: blur(7px);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.lab-fullscreen:hover,
.lab-fullscreen:focus-visible {
  outline: none;
  transform: scale(1.08);
  border-color: rgba(138,255,41,.9);
  background: rgba(5,27,38,.92);
  box-shadow: 0 0 14px rgba(53,231,255,.24), 0 0 10px rgba(138,255,41,.14);
}

.lab-fullscreen:active { transform: scale(.96); }

.lab-fullscreen-icon {
  position: relative;
  width: 42%;
  aspect-ratio: 1;
  background:
    linear-gradient(currentColor 0 0) left top / 43% 2px no-repeat,
    linear-gradient(currentColor 0 0) left top / 2px 43% no-repeat,
    linear-gradient(currentColor 0 0) right top / 43% 2px no-repeat,
    linear-gradient(currentColor 0 0) right top / 2px 43% no-repeat,
    linear-gradient(currentColor 0 0) left bottom / 43% 2px no-repeat,
    linear-gradient(currentColor 0 0) left bottom / 2px 43% no-repeat,
    linear-gradient(currentColor 0 0) right bottom / 43% 2px no-repeat,
    linear-gradient(currentColor 0 0) right bottom / 2px 43% no-repeat;
  transition: transform .18s ease;
}

.lab-fullscreen.is-active .lab-fullscreen-icon { transform: scale(.72) rotate(180deg); }

.lab-main-screen:fullscreen,
.lab-main-screen.is-faux-fullscreen {
  width: 100vw;
  height: 100vh;
  border: 0;
  border-radius: 0;
  background: #020812;
  box-shadow: none;
}

.lab-main-screen.is-faux-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.lab-main-screen:fullscreen .lab-scene-art,
.lab-main-screen.is-faux-fullscreen .lab-scene-art {
  object-fit: contain;
  background: #020812;
}

.lab-main-screen:fullscreen .lab-fullscreen,
.lab-main-screen.is-faux-fullscreen .lab-fullscreen {
  top: 22px;
  right: 24px;
  width: 46px;
}

.lab-main-screen:fullscreen .lab-arrow,
.lab-main-screen.is-faux-fullscreen .lab-arrow {
  width: 58px;
  height: 58px;
}

body.lab-faux-fullscreen-open { overflow: hidden; }

/* ===== Color-matched rooftop emitters =====
   Each small SVG sample selects luminous pixels by hue, then blurs their
   original RGB. No colored drop-shadow and no full-city brightness overlay. */
.neon-filter-definitions { position: absolute; pointer-events: none; }
.city-neon-overlay,
.rooftop-neon-overlay,
.rooftop-neon-dimmer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  overflow: hidden;
}
.city-neon-overlay {
  z-index: -2;
  transform: scale(1.035);
  transform-origin: center;
  -webkit-mask-image: linear-gradient(90deg, #000 0 93%, transparent 98.3%);
  mask-image: linear-gradient(90deg, #000 0 93%, transparent 98.3%);
}
.rooftop-neon-dimmer { z-index: 0; mix-blend-mode: normal; }
.rooftop-neon-overlay { z-index: 1; }
.neon-source {
  opacity: .3;
  animation: neon-source-breathe var(--neon-period, 5s) ease-in-out var(--neon-phase, 0s) infinite;
  will-change: opacity;
}
.neon-source--flicker { animation-name: neon-source-flicker; animation-timing-function: linear; }
/* DEX needs actual power dips: its baked-in signs stay bright if only the
   extra halo changes. Both passes use identical geometry and clock values.
   Keep a colored halo even during a dip; avoid switching the signs off. */
.rooftop-neon-overlay .neon-source {
  opacity: .8;
  animation-name: dex-neon-flicker;
  animation-timing-function: linear;
}
.rooftop-neon-overlay [data-neon-color="pink"] { filter: url("#dex-neon-pink-glow"); }
.rooftop-neon-overlay [data-neon-color="green"] { filter: url("#dex-neon-green-glow"); }
.neon-dimmer {
  opacity: 0;
  animation: dex-neon-cut var(--neon-period, 5s) linear var(--neon-phase, 0s) infinite;
  will-change: opacity;
}
.rooftop-neon-overlay .neon-source,
.rooftop-neon-dimmer .neon-dimmer {
  animation-duration: calc(var(--neon-period, 5s) * 1.7);
  animation-delay: calc(var(--neon-phase, 0s) * 1.7);
}
.city-neon-pulse--cat.is-sound-flicker { animation: cat-neon-sound 2.45s linear 1; }
#home[inert] .neon-source,
.rooftop-viewport[data-rooftop-scene="home"] .rooftop-neon-overlay .neon-source,
.rooftop-viewport[data-rooftop-scene="home"] .neon-dimmer {
  animation-play-state: paused;
}

.gallery-room-image:first-child { z-index: 0; }

.gallery-room-image--liquid,
.gallery-room-image--neon {
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: opacity, filter;
}

.gallery-room-image--liquid {
  z-index: 1;
  opacity: .28;
  filter: saturate(2.15) brightness(1.58) blur(.4px);
}

.gallery-room-image--liquid-left {
  -webkit-mask-image: radial-gradient(ellipse 5.7% 39% at 16% 43%, #000 0 55%, transparent 83%);
  mask-image: radial-gradient(ellipse 5.7% 39% at 16% 43%, #000 0 55%, transparent 83%);
  animation: lab-liquid-life 4.1s ease-in-out -.9s infinite;
}

.gallery-room-image--liquid-right {
  -webkit-mask-image: radial-gradient(ellipse 5.7% 39% at 84% 43%, #000 0 55%, transparent 83%);
  mask-image: radial-gradient(ellipse 5.7% 39% at 84% 43%, #000 0 55%, transparent 83%);
  animation: lab-liquid-life 6.3s ease-in-out -4.2s infinite;
}

.gallery-room-image--neon {
  z-index: 2;
  opacity: .2;
  filter: saturate(2.1) brightness(1.5) blur(.3px);
}

.gallery-room-image--neon-top {
  -webkit-mask-image:
    radial-gradient(ellipse 18% 10% at 12% 7%, #000 0 48%, transparent 82%),
    radial-gradient(ellipse 18% 10% at 88% 7%, #000 0 48%, transparent 82%),
    radial-gradient(ellipse 36% 12% at 50% 12%, #000 0 48%, transparent 84%);
  mask-image:
    radial-gradient(ellipse 18% 10% at 12% 7%, #000 0 48%, transparent 82%),
    radial-gradient(ellipse 18% 10% at 88% 7%, #000 0 48%, transparent 82%),
    radial-gradient(ellipse 36% 12% at 50% 12%, #000 0 48%, transparent 84%);
  animation: lab-neon-life 5.7s ease-in-out -2.1s infinite;
}

.gallery-room-image--neon-sides {
  -webkit-mask-image:
    radial-gradient(ellipse 5% 48% at 8% 43%, #000 0 48%, transparent 82%),
    radial-gradient(ellipse 5% 48% at 92% 43%, #000 0 48%, transparent 82%);
  mask-image:
    radial-gradient(ellipse 5% 48% at 8% 43%, #000 0 48%, transparent 82%),
    radial-gradient(ellipse 5% 48% at 92% 43%, #000 0 48%, transparent 82%);
  animation: lab-neon-flicker 3.8s linear -1.4s infinite;
}

.gallery-room-image--neon-bottom {
  -webkit-mask-image: radial-gradient(ellipse 49% 18% at 50% 86%, #000 0 50%, transparent 85%);
  mask-image: radial-gradient(ellipse 49% 18% at 50% 86%, #000 0 50%, transparent 85%);
  animation: lab-neon-life 7.6s ease-in-out -5.8s infinite;
}

.panel-frame--glow {
  z-index: 0;
  mix-blend-mode: screen;
  opacity: .2;
  filter: saturate(2.15) brightness(1.55);
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% 16% no-repeat,
    linear-gradient(#000 0 0) bottom / 100% 16% no-repeat,
    linear-gradient(#000 0 0) left / 14% 100% no-repeat,
    linear-gradient(#000 0 0) right / 14% 100% no-repeat;
  mask:
    linear-gradient(#000 0 0) top / 100% 16% no-repeat,
    linear-gradient(#000 0 0) bottom / 100% 16% no-repeat,
    linear-gradient(#000 0 0) left / 14% 100% no-repeat,
    linear-gradient(#000 0 0) right / 14% 100% no-repeat;
  animation: hud-edge-life 5.2s ease-in-out -2.2s infinite;
}

.token-stats-panel::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 0;
  pointer-events: none;
  background: url('./assets/panel-stats.png') center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  opacity: .19;
  filter: saturate(2.1) brightness(1.52);
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% 22% no-repeat,
    linear-gradient(#000 0 0) bottom / 100% 22% no-repeat,
    linear-gradient(#000 0 0) left / 14% 100% no-repeat,
    linear-gradient(#000 0 0) right / 14% 100% no-repeat;
  mask:
    linear-gradient(#000 0 0) top / 100% 22% no-repeat,
    linear-gradient(#000 0 0) bottom / 100% 22% no-repeat,
    linear-gradient(#000 0 0) left / 14% 100% no-repeat,
    linear-gradient(#000 0 0) right / 14% 100% no-repeat;
  animation: hud-edge-life 7.1s ease-in-out -5.4s infinite;
}

/* The duplicated edge-light layer was responsible for the stray green strip. */
.token-stats-panel::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

.nav-pill { animation: nav-hud-life 6.6s ease-in-out -3s infinite; }
.lab-monitor-top i { animation: online-led-life 3.1s ease-in-out infinite; }

@keyframes neon-source-breathe {
  0%, 100% { opacity: .24; }
  50% { opacity: .74; }
}
@keyframes neon-source-flicker {
  0%, 100% { opacity: .3; }
  38% { opacity: .6; }
  41% { opacity: .22; }
  44% { opacity: .78; }
  70% { opacity: .42; }
}
@keyframes cat-neon-sound {
  0%, 100% { opacity: .38; }
  7%, 36%, 66% { opacity: .85; }
  10%, 43%, 72% { opacity: .2; }
  13%, 23%, 47% { opacity: .96; }
  18%, 29%, 57%, 86% { opacity: .5; }
  76% { opacity: .8; }
}

/* Two gentle dips per longer cycle, separated by steady colored glow.
   The second dip is weaker. No double-stutter or almost-black outages. */
@keyframes dex-neon-flicker {
  0%, 22%, 30%, 62%, 70%, 100% { opacity: .8; }
  24%, 25% { opacity: .44; }
  28% { opacity: .92; }
  64%, 65% { opacity: .62; }
  68% { opacity: .88; }
}
@keyframes dex-neon-cut {
  0%, 22%, 30%, 62%, 70%, 100% { opacity: .02; }
  24%, 25% { opacity: .44; }
  28% { opacity: 0; }
  64%, 65% { opacity: .2; }
  68% { opacity: .01; }
}

@keyframes lab-liquid-life {
  0%, 100% { opacity: .2; filter: saturate(1.9) brightness(1.35) blur(.3px); }
  43% { opacity: .5; filter: saturate(2.6) brightness(2.05) blur(.82px); }
  50% { opacity: .32; }
  58% { opacity: .54; filter: saturate(2.75) brightness(2.18) blur(.9px); }
}

@keyframes lab-neon-life {
  0%, 100% { opacity: .15; filter: saturate(1.9) brightness(1.3) blur(.25px); }
  50% { opacity: .42; filter: saturate(2.5) brightness(1.95) blur(.7px); }
}

@keyframes lab-neon-flicker {
  0%, 100% { opacity: .17; filter: saturate(1.95) brightness(1.32) blur(.25px); }
  24% { opacity: .43; filter: saturate(2.5) brightness(1.95) blur(.68px); }
  26% { opacity: .14; }
  29% { opacity: .48; }
  65% { opacity: .27; }
  68% { opacity: .46; filter: saturate(2.65) brightness(2.08) blur(.75px); }
}

@keyframes hud-edge-life {
  0%, 100% { opacity: .14; filter: saturate(1.9) brightness(1.32); }
  50% { opacity: .36; filter: saturate(2.5) brightness(1.95); }
}

@keyframes nav-hud-life {
  0%, 100% {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 14px 32px rgba(0,0,0,.30), 0 0 17px rgba(53,231,255,.16), 0 0 14px rgba(255,69,191,.12);
  }
  50% {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 14px 32px rgba(0,0,0,.30), 0 0 34px rgba(53,231,255,.32), 0 0 28px rgba(255,69,191,.24);
  }
}

@keyframes online-led-life {
  0%, 100% { opacity: .72; box-shadow: 0 0 6px rgba(138,255,41,.56); }
  50% { opacity: 1; box-shadow: 0 0 12px rgba(138,255,41,.9); }
}

@media (prefers-reduced-motion: reduce) {
  .neon-source,
  .rooftop-neon-overlay .neon-source,
  .neon-dimmer,
  .city-neon-pulse--cat.is-sound-flicker,
  .gallery-room-image--liquid,
  .gallery-room-image--neon,
  .panel-frame--glow,
  .token-stats-panel::after,
  .nav-pill,
  .lab-monitor-top i,
  .arrows i {
    animation: none;
  }
  .rooftop-neon-dimmer { display: none; }
  .rooftop-neon-overlay .neon-source { opacity: .3; }
  .arrows i { opacity: .8; }
  .city-bg,
  .city-neon-overlay { transform: scale(1.035); }
  .hero-kitty { animation: none; }
}

.lab-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.018);
  transition: opacity .28s ease, transform .36s ease, visibility .28s ease;
  background: #030814;
}

.lab-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 48%, transparent 43%, rgba(0,4,10,.22) 88%),
    linear-gradient(180deg, rgba(215,250,255,.025), transparent 20%, transparent 75%, rgba(0,0,0,.24));
  box-shadow: inset 0 0 28px rgba(0,0,0,.18);
}

.lab-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  z-index: 2;
}

.lab-scene-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 2;
  user-select: none;
  pointer-events: none;
}

.lab-arrow {
  position: absolute;
  top: 50%;
  z-index: 9;
  width: 8.3%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  padding: 0 0 4px;
  border-radius: 50%;
  border: 1px solid transparent;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(3,16,28,.90), rgba(2,10,19,.90)) padding-box,
    linear-gradient(135deg, var(--cyan), var(--pink)) border-box;
  box-shadow: 0 3px 10px rgba(0,0,0,.30), 0 0 8px rgba(53,231,255,.13);
  font: 300 clamp(18px, 1.65vw, 34px)/1 Arial, sans-serif;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}

.lab-arrow--prev { left: 2.2%; }
.lab-arrow--next { right: 2.2%; }
.lab-arrow:hover,
.lab-arrow:focus-visible { outline: none; transform: translateY(-50%) scale(1.08); filter: brightness(1.12); }
.lab-arrow:active { transform: translateY(-50%) scale(.97); }

.lab-monitor-bottom {
  position: absolute;
  left: 3.2%;
  right: 3.2%;
  bottom: 3.3%;
  height: 7.2%;
  z-index: 11;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  pointer-events: none;
}

.lab-caption {
  display: flex;
  align-items: center;
  gap: .8em;
  min-width: 0;
  text-transform: uppercase;
}

.lab-caption span {
  color: var(--green);
  font-size: clamp(7px, .48vw, 10px);
  font-weight: 900;
  letter-spacing: .12em;
  text-shadow: 0 0 7px rgba(138,255,41,.45);
}

.lab-caption strong {
  overflow: hidden;
  color: rgba(241,249,252,.90);
  font-size: clamp(7px, .5vw, 11px);
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lab-dots {
  display: flex;
  align-items: center;
  gap: clamp(3px, .3vw, 6px);
  pointer-events: auto;
}

.lab-dots button {
  width: clamp(4px, .4vw, 8px);
  height: clamp(4px, .4vw, 8px);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(204,231,240,.22);
  cursor: pointer;
  transition: width .15s ease, background .15s ease, box-shadow .15s ease;
}

.lab-dots button.is-active {
  width: clamp(14px, 1.55vw, 30px);
  background: linear-gradient(90deg, var(--green), var(--cyan));
  box-shadow: 0 0 8px rgba(53,231,255,.26), 0 0 7px rgba(138,255,41,.22);
}

.lab-count {
  justify-self: end;
  color: rgba(213,239,247,.78);
  font-size: clamp(7px, .5vw, 11px);
  font-weight: 900;
  letter-spacing: .08em;
}

.lab-count [data-lab-current] {
  color: var(--green);
  text-shadow: 0 0 7px rgba(138,255,41,.46);
}

@media (max-width: 1179px), (max-height: 649px) {
  .gallery-integrated { --gallery-zoom: 1.08; height: 100vh; min-height: 650px; }
}

@media (max-width: 720px) {
  .gallery-integrated { --gallery-zoom: 1; min-height: 620px; }
  .lab-gallery-body { grid-template-columns: 22% 1fr; gap: 2%; }
  .lab-main-screen:not(:fullscreen):not(.is-faux-fullscreen) .lab-arrow--next {
    right: max(2.2%, calc(65.5% - 50vw + 13px));
  }
  .lab-monitor-top { font-size: 6px; }
  .lab-caption strong { display: none; }
}

/* ===== CNT archive room: content mounted inside the generated hardware ===== */
.archive-page.archive-integrated {
  position: relative;
  height: 100vh;
  min-height: 680px;
  scroll-margin-top: -74px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: #010711;
}

.archive-integrated::before,
.archive-integrated::after {
  display: none;
}

.archive-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 177.68vh);
  height: max(56.28vw, 100vh);
  transform: translate(-50%, -50%);
  color: #f4fbff;
}

.archive-room-image {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.archive-room-neon {
  z-index: 1;
  opacity: .58;
  mix-blend-mode: screen;
  will-change: opacity, filter;
}

.archive-room-neon--cyan {
  filter: brightness(1.9) saturate(1.7) drop-shadow(0 0 9px rgba(22,226,255,.92));
  -webkit-mask-image:
    radial-gradient(ellipse 14% 7% at 37% 10%, #000 0 38%, transparent 78%),
    radial-gradient(ellipse 13% 7% at 77% 16%, #000 0 38%, transparent 78%),
    radial-gradient(ellipse 5% 27% at 10.5% 40%, #000 0 34%, transparent 78%),
    radial-gradient(ellipse 5% 27% at 60% 40%, #000 0 34%, transparent 78%),
    radial-gradient(ellipse 13% 6% at 36% 70%, #000 0 30%, transparent 80%);
  mask-image:
    radial-gradient(ellipse 14% 7% at 37% 10%, #000 0 38%, transparent 78%),
    radial-gradient(ellipse 13% 7% at 77% 16%, #000 0 38%, transparent 78%),
    radial-gradient(ellipse 5% 27% at 10.5% 40%, #000 0 34%, transparent 78%),
    radial-gradient(ellipse 5% 27% at 60% 40%, #000 0 34%, transparent 78%),
    radial-gradient(ellipse 13% 6% at 36% 70%, #000 0 30%, transparent 80%);
  animation: archive-neon-cyan 3.7s ease-in-out infinite;
}

.archive-room-neon--green {
  filter: brightness(2) saturate(1.75) drop-shadow(0 0 10px rgba(133,255,35,.88));
  -webkit-mask-image:
    radial-gradient(ellipse 19% 9% at 72% 6%, #000 0 34%, transparent 78%),
    radial-gradient(ellipse 14% 7% at 38% 20%, #000 0 36%, transparent 78%),
    radial-gradient(ellipse 5% 24% at 63% 43%, #000 0 32%, transparent 78%),
    radial-gradient(ellipse 8% 34% at 95% 48%, #000 0 32%, transparent 80%),
    radial-gradient(ellipse 20% 10% at 37% 88%, #000 0 32%, transparent 80%);
  mask-image:
    radial-gradient(ellipse 19% 9% at 72% 6%, #000 0 34%, transparent 78%),
    radial-gradient(ellipse 14% 7% at 38% 20%, #000 0 36%, transparent 78%),
    radial-gradient(ellipse 5% 24% at 63% 43%, #000 0 32%, transparent 78%),
    radial-gradient(ellipse 8% 34% at 95% 48%, #000 0 32%, transparent 80%),
    radial-gradient(ellipse 20% 10% at 37% 88%, #000 0 32%, transparent 80%);
  animation: archive-neon-green 5.4s ease-in-out infinite;
}

.archive-room-neon--pink {
  filter: brightness(2.05) saturate(1.8) drop-shadow(0 0 9px rgba(255,42,190,.86));
  -webkit-mask-image:
    radial-gradient(circle 6% at 11.5% 22%, #000 0 32%, transparent 78%),
    radial-gradient(circle 6% at 59% 22%, #000 0 32%, transparent 78%),
    radial-gradient(circle 6% at 11.5% 67%, #000 0 32%, transparent 78%),
    radial-gradient(circle 6% at 59% 67%, #000 0 32%, transparent 78%),
    radial-gradient(ellipse 6% 25% at 91% 42%, #000 0 30%, transparent 80%),
    radial-gradient(circle 7% at 96% 88%, #000 0 30%, transparent 80%);
  mask-image:
    radial-gradient(circle 6% at 11.5% 22%, #000 0 32%, transparent 78%),
    radial-gradient(circle 6% at 59% 22%, #000 0 32%, transparent 78%),
    radial-gradient(circle 6% at 11.5% 67%, #000 0 32%, transparent 78%),
    radial-gradient(circle 6% at 59% 67%, #000 0 32%, transparent 78%),
    radial-gradient(ellipse 6% 25% at 91% 42%, #000 0 30%, transparent 80%),
    radial-gradient(circle 7% at 96% 88%, #000 0 30%, transparent 80%);
  animation: archive-neon-pink 6.8s ease-in-out infinite;
}

@keyframes archive-neon-cyan {
  0%, 100% { opacity: .40; }
  19% { opacity: .74; }
  22% { opacity: .48; }
  25%, 58% { opacity: .78; }
  61% { opacity: .44; }
  65% { opacity: .82; }
}

@keyframes archive-neon-green {
  0%, 100% { opacity: .38; }
  27%, 54% { opacity: .76; }
  57% { opacity: .43; }
  60% { opacity: .81; }
  78% { opacity: .62; }
}

@keyframes archive-neon-pink {
  0%, 35%, 100% { opacity: .33; }
  39% { opacity: .73; }
  42% { opacity: .45; }
  70% { opacity: .69; }
  74% { opacity: .38; }
}

.archive-room-glow {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(10px);
}

.archive-room-glow--cyan {
  left: 5%;
  top: 4%;
  width: 61%;
  height: 69%;
  background:
    radial-gradient(ellipse at 58% 2%, rgba(0,225,255,.28), transparent 18%),
    radial-gradient(ellipse at 13% 43%, rgba(0,225,255,.18), transparent 16%),
    radial-gradient(ellipse at 90% 48%, rgba(0,225,255,.13), transparent 13%);
  animation: archive-cyan-life 4.9s ease-in-out infinite;
}

.archive-room-glow--green {
  right: 1%;
  top: 1%;
  width: 38%;
  height: 98%;
  background:
    radial-gradient(ellipse at 42% 4%, rgba(136,255,36,.28), transparent 13%),
    radial-gradient(ellipse at 94% 45%, rgba(136,255,36,.19), transparent 18%),
    radial-gradient(ellipse at 47% 86%, rgba(136,255,36,.12), transparent 20%);
  animation: archive-green-life 6.3s ease-in-out infinite;
}

.archive-room-glow--pink {
  inset: 13% 5% 16%;
  background:
    radial-gradient(circle at 7% 52%, rgba(255,45,191,.19), transparent 9%),
    radial-gradient(circle at 61% 18%, rgba(255,45,191,.13), transparent 9%),
    radial-gradient(circle at 97% 81%, rgba(255,45,191,.17), transparent 10%);
  animation: archive-pink-life 7.6s ease-in-out infinite;
}

@keyframes archive-cyan-life {
  0%, 11%, 100% { opacity: .45; }
  23% { opacity: .82; }
  25% { opacity: .52; }
  28%, 61% { opacity: .75; }
  64% { opacity: .40; }
  68% { opacity: .88; }
}

@keyframes archive-green-life {
  0%, 100% { opacity: .44; }
  18%, 46% { opacity: .78; }
  49% { opacity: .52; }
  72% { opacity: .86; }
  75%, 78% { opacity: .48; }
  80% { opacity: .76; }
}

@keyframes archive-pink-life {
  0%, 31%, 100% { opacity: .36; }
  35% { opacity: .74; }
  38% { opacity: .47; }
  67% { opacity: .69; }
  71% { opacity: .39; }
}

.archive-integrated .archive-screen {
  position: absolute;
  z-index: 3;
  left: 12.56%;
  top: 22.42%;
  width: 45.34%;
  height: 43.68%;
  aspect-ratio: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: polygon(2.2% 0, 97.8% 0, 100% 4.2%, 100% 95.8%, 97.8% 100%, 2.2% 100%, 0 95.8%, 0 4.2%);
  background: #000815;
  box-shadow: inset 0 0 32px rgba(0,0,0,.62);
}

.archive-integrated .archive-screen::before {
  content: '';
  position: absolute;
  z-index: 4;
  inset: 0;
  background:
    repeating-linear-gradient(180deg, transparent 0 3px, rgba(125,226,255,.024) 4px),
    linear-gradient(110deg, rgba(255,255,255,.035), transparent 24%, transparent 80%);
  box-shadow: inset 0 0 30px rgba(0,0,0,.24);
  pointer-events: none;
}

.archive-integrated .archive-screen::after {
  display: none;
}

.archive-integrated .archive-video {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #00050c;
  accent-color: var(--green);
  pointer-events: auto;
}

.archive-integrated .archive-screen-top {
  position: absolute;
  z-index: 6;
  top: clamp(8px, .72vw, 14px);
  left: clamp(10px, .9vw, 18px);
  right: clamp(10px, .9vw, 18px);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(226,247,252,.72);
  font-size: clamp(7px, .52vw, 10px);
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  pointer-events: none;
  text-shadow: 0 2px 5px rgba(0,0,0,.94), 0 0 8px rgba(53,231,255,.32);
}

.archive-integrated .archive-screen-top b {
  color: var(--green);
  text-shadow: 0 0 8px rgba(138,255,41,.62), 0 2px 4px #000;
}

.archive-integrated .archive-lore {
  position: absolute;
  z-index: 3;
  left: 67.10%;
  top: 19.34%;
  width: 20.93%;
  height: 50.90%;
  min-width: 0;
  padding: clamp(9px, .85vw, 17px);
  overflow: hidden;
  border: 0;
  clip-path: polygon(5.2% 0, 94.8% 0, 100% 4.1%, 100% 95.9%, 94.8% 100%, 5.2% 100%, 0 95.9%, 0 4.1%);
  background:
    linear-gradient(rgba(2,11,28,.88), rgba(1,8,20,.91)),
    repeating-linear-gradient(180deg, rgba(73,218,255,.025) 0 1px, transparent 1px 4px);
  box-shadow: inset 0 0 30px rgba(0,0,0,.42);
}

.archive-integrated .archive-lore::before,
.archive-integrated .archive-lore::after {
  display: none;
}

.archive-lore-scroll {
  height: 100%;
  overflow: auto;
  padding-right: 3px;
  scrollbar-width: thin;
  scrollbar-color: rgba(138,255,41,.42) transparent;
}

.archive-lore-scroll::-webkit-scrollbar { width: 3px; }
.archive-lore-scroll::-webkit-scrollbar-track { background: transparent; }
.archive-lore-scroll::-webkit-scrollbar-thumb { background: rgba(138,255,41,.42); }

.archive-integrated .archive-lore-kicker {
  display: flex;
  align-items: center;
  gap: clamp(5px, .42vw, 8px);
  margin: 0;
  color: var(--green);
  font-size: clamp(6.5px, .48vw, 9px);
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(138,255,41,.38);
}

.archive-integrated .archive-lore-kicker i {
  flex: 0 0 auto;
  width: clamp(4px, .36vw, 7px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 7px rgba(138,255,41,.8);
  animation: online-led-life 3.1s ease-in-out infinite;
}

.archive-integrated .archive-lore h2 {
  margin: clamp(7px, .6vw, 12px) 0 clamp(6px, .58vw, 11px);
  color: #f7fcff;
  font-size: clamp(15px, 1.44vw, 28px);
  line-height: .94;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(53,231,255,.12);
}

.archive-integrated .archive-lore-lead {
  margin: 0 0 clamp(8px, .76vw, 15px);
  color: rgba(224,241,247,.73);
  font-size: clamp(8px, .67vw, 13px);
  line-height: 1.38;
}

.archive-integrated .archive-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 clamp(8px, .76vw, 15px);
  padding: 1px;
  background: rgba(70,213,244,.13);
}

.archive-integrated .archive-facts div {
  min-width: 0;
  padding: clamp(5px, .48vw, 9px);
  background: rgba(1,8,19,.88);
}

.archive-integrated .archive-facts dt {
  margin-bottom: 3px;
  color: var(--cyan);
  font-size: clamp(5.5px, .4vw, 8px);
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.archive-integrated .archive-facts dd {
  margin: 0;
  overflow: hidden;
  color: rgba(247,252,255,.92);
  font-size: clamp(7px, .58vw, 11px);
  font-weight: 800;
  line-height: 1.22;
  text-overflow: ellipsis;
}

.archive-integrated .archive-lore-copy {
  margin: 0;
  color: rgba(219,236,242,.70);
  font-size: clamp(8px, .61vw, 11.5px);
  line-height: 1.43;
}

.archive-integrated .archive-canon-note {
  margin: clamp(8px, .75vw, 14px) 0 0;
  padding: clamp(6px, .55vw, 10px);
  border-left: 2px solid var(--green);
  color: rgba(216,236,240,.66);
  background: rgba(138,255,41,.045);
  font-size: clamp(7px, .54vw, 10px);
  line-height: 1.38;
}

.archive-integrated .archive-canon-note span {
  display: block;
  margin-bottom: 3px;
  color: var(--green);
  font-size: clamp(5.5px, .39vw, 7.5px);
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.archive-integrated .archive-transmission {
  position: absolute;
  z-index: 3;
  left: 16.5%;
  top: 68.8%;
  width: 40.5%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(6px, .65vw, 12px);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: rgba(215,241,247,.70);
  text-shadow: 0 2px 4px #000, 0 0 6px rgba(53,231,255,.26);
}

.archive-integrated .archive-transmission span,
.archive-integrated .archive-transmission strong,
.archive-integrated .archive-transmission b {
  color: rgba(221,243,248,.68);
  font-size: clamp(5px, .40vw, 8px);
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.archive-integrated .archive-transmission strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.archive-integrated .archive-transmission b { color: var(--green); }

@media (max-width: 900px) {
  .archive-page.archive-integrated {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .archive-stage {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    min-height: 100vh;
    padding: 86px 14px 36px;
    transform: none;
    display: grid;
    gap: 14px;
    background: #020914;
  }

  .archive-room-image {
    height: 100%;
    object-fit: cover;
    opacity: .30;
    filter: brightness(.48) saturate(.82);
  }

  .archive-room-neon { opacity: .45; }
  .archive-room-image.archive-room-neon--cyan {
    filter: brightness(1.75) saturate(1.55) drop-shadow(0 0 7px rgba(22,226,255,.76));
  }
  .archive-room-image.archive-room-neon--green {
    filter: brightness(1.8) saturate(1.6) drop-shadow(0 0 7px rgba(133,255,35,.72));
  }
  .archive-room-image.archive-room-neon--pink {
    filter: brightness(1.8) saturate(1.65) drop-shadow(0 0 7px rgba(255,42,190,.70));
  }

  .archive-room-glow { opacity: .35; }

  .archive-integrated .archive-screen,
  .archive-integrated .archive-lore,
  .archive-integrated .archive-transmission {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }

  .archive-integrated .archive-screen {
    order: 1;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(53,231,255,.35);
    box-shadow: 0 16px 36px rgba(0,0,0,.42), 0 0 18px rgba(53,231,255,.09);
  }

  .archive-integrated .archive-transmission {
    order: 2;
    padding: 9px 10px;
    border: 1px solid rgba(53,231,255,.17);
    background: rgba(1,10,22,.84);
  }

  .archive-integrated .archive-transmission span,
  .archive-integrated .archive-transmission strong,
  .archive-integrated .archive-transmission b { font-size: 6px; }

  .archive-integrated .archive-lore {
    order: 3;
    height: auto;
    padding: 20px;
    border: 1px solid rgba(138,255,41,.25);
    clip-path: polygon(4% 0, 96% 0, 100% 4%, 100% 96%, 96% 100%, 4% 100%, 0 96%, 0 4%);
    box-shadow: 0 18px 40px rgba(0,0,0,.38), inset 0 0 30px rgba(0,0,0,.3);
  }

  .archive-lore-scroll { height: auto; overflow: visible; padding-right: 0; }
  .archive-integrated .archive-lore-kicker { font-size: 8px; }
  .archive-integrated .archive-lore h2 { font-size: clamp(25px, 8vw, 38px); }
  .archive-integrated .archive-lore-lead { font-size: 12px; }
  .archive-integrated .archive-facts div { padding: 10px; }
  .archive-integrated .archive-facts dt { font-size: 7px; }
  .archive-integrated .archive-facts dd { font-size: 10px; white-space: normal; }
  .archive-integrated .archive-lore-copy { font-size: 12px; line-height: 1.55; }
  .archive-integrated .archive-canon-note { padding: 10px; font-size: 10px; }
  .archive-integrated .archive-canon-note span { font-size: 7px; }
}

@media (max-width: 720px) {
  .archive-page.archive-integrated { scroll-margin-top: -66px; }
}

@media (prefers-reduced-motion: reduce) {
  .archive-room-neon,
  .archive-room-glow,
  .archive-integrated .archive-lore-kicker i {
    animation: none !important;
  }
}

/* ===== Physical separators and exact page landing ===== */
html { scroll-padding-top: 0; }

.landing,
.gallery-integrated,
.archive-page.archive-integrated {
  scroll-margin-top: 0;
}

.section-bridge {
  --bridge-left: rgba(53,231,255,.78);
  --bridge-mid: rgba(138,255,41,.74);
  --bridge-right: rgba(255,69,191,.68);
  position: relative;
  z-index: 12;
  width: 100%;
  height: clamp(18px, 1.75vw, 30px);
  margin: -1px 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(1,5,11,.98), rgba(10,31,44,.96) 44%, rgba(2,8,15,.98)),
    repeating-linear-gradient(90deg, transparent 0 5.5%, rgba(93,220,244,.08) 5.6% 5.8%);
  border-top: 1px solid rgba(81,224,251,.19);
  border-bottom: 1px solid rgba(118,255,71,.15);
  box-shadow:
    inset 0 5px 10px rgba(0,0,0,.46),
    inset 0 -5px 10px rgba(0,0,0,.40),
    0 0 16px rgba(53,231,255,.14);
}

.section-bridge::before {
  content: '';
  position: absolute;
  inset: 3px 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 7.8%, rgba(172,235,248,.10) 7.9% 8.05%, transparent 8.15% 12%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 42%, rgba(0,0,0,.25));
  opacity: .72;
}

.section-bridge::after {
  content: '';
  position: absolute;
  left: 5%;
  right: 5%;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, var(--bridge-left) 18%, var(--bridge-mid) 50%, var(--bridge-right) 82%, transparent);
  box-shadow: 0 0 7px var(--bridge-left), 0 0 12px rgba(138,255,41,.22);
  animation: section-bridge-life 5.8s ease-in-out infinite;
}

.section-bridge--gallery-archive {
  --bridge-left: rgba(138,255,41,.70);
  --bridge-mid: rgba(53,231,255,.72);
  --bridge-right: rgba(255,69,191,.76);
}

@keyframes section-bridge-life {
  0%, 100% { opacity: .54; filter: brightness(.88); }
  48% { opacity: .94; filter: brightness(1.28); }
  53% { opacity: .67; filter: brightness(1); }
  58% { opacity: .98; filter: brightness(1.34); }
}

@media (prefers-reduced-motion: reduce) {
  .section-bridge::after { animation: none; }
}