:root {
  color-scheme: dark;
  --black: #030405;
  --ink: #080b0c;
  --deep: #0d1112;
  --smoke: #1a1a18;
  --panel: rgba(11, 12, 12, 0.76);
  --panel-soft: rgba(24, 21, 17, 0.62);
  --gold: #ddc186;
  --gold-bright: #f0d793;
  --gold-deep: #a07332;
  --ember: #ebc473;
  --maroon: #412020;
  --paper: #f2f2f2;
  --text: #f3ead7;
  --muted: #b5aa94;
  --dim: #7f7769;
  --line: rgba(221, 193, 134, 0.22);
  --line-strong: rgba(235, 196, 115, 0.48);
  --shadow: rgba(0, 0, 0, 0.62);
  --key-logo: url("./assets/magic-key-logo.png?v=3");
  --key-full: url("./assets/magic-golden-key-cutout.png");
  --gate-art: url("./assets/golden-gate-hero.png");
  --module-gate: url("./assets/golden-gate-hero.png");
  --serif: "Times New Roman", Georgia, "Noto Serif SC", "Songti SC", "SimSun", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--serif);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 128px;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 8%, rgba(221, 193, 134, 0.12), transparent 30rem),
    radial-gradient(ellipse at 78% 30%, rgba(185, 126, 43, 0.08), transparent 42rem),
    radial-gradient(ellipse at 20% 62%, rgba(99, 121, 128, 0.08), transparent 36rem),
    radial-gradient(ellipse at 50% 1180px, rgba(221, 193, 134, 0.075), transparent 42rem),
    radial-gradient(ellipse at 50% 2020px, rgba(164, 124, 54, 0.08), transparent 48rem),
    linear-gradient(115deg, transparent 0 42%, rgba(221, 193, 134, 0.025) 42.2% 42.5%, transparent 42.8%),
    linear-gradient(180deg, #040506 0%, #090d0e 36%, #060808 68%, #040405 100%);
  overflow-x: hidden;
}

main {
  position: relative;
  z-index: 3;
  width: 100%;
  overflow-x: clip;
}

main::before,
main::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 760px;
  z-index: -1;
  width: min(1160px, calc(100vw - 24px));
  height: 760px;
  pointer-events: none;
  transform: translateX(-50%);
}

main::before {
  opacity: 0.5;
  background:
    radial-gradient(ellipse at 50% 7%, rgba(230, 190, 103, 0.16), transparent 32%),
    radial-gradient(ellipse at 50% 43%, transparent 0 22%, rgba(221, 193, 134, 0.2) 22.2% 22.45%, transparent 22.8% 41%, rgba(221, 193, 134, 0.12) 41.2% 41.45%, transparent 42%),
    radial-gradient(ellipse at 50% 96%, rgba(221, 193, 134, 0.08), transparent 42%),
    linear-gradient(90deg, transparent 0 49.88%, rgba(221, 193, 134, 0.17) 50%, transparent 50.12%),
    linear-gradient(24deg, transparent 0 49.86%, rgba(221, 193, 134, 0.08) 50%, transparent 50.14%),
    linear-gradient(-24deg, transparent 0 49.86%, rgba(221, 193, 134, 0.08) 50%, transparent 50.14%);
  filter: blur(0.3px);
}

main::after {
  top: 900px;
  opacity: 0.12;
  background: var(--gate-art) center top / min(900px, 92vw) auto no-repeat;
  filter: saturate(0.62) brightness(0.48) blur(0.2px);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 50%, transparent 82%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 50%, transparent 82%);
}

body::before {
  content: "";
  position: fixed;
  right: -120px;
  bottom: -130px;
  z-index: 1;
  width: min(420px, 44vw);
  aspect-ratio: 0.75;
  pointer-events: none;
  opacity: 0.045;
  background: var(--key-full) center / contain no-repeat;
  filter: saturate(0.85);
  transform: rotate(12deg);
}

body::selection {
  color: #130e06;
  background: var(--gold-bright);
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: overlay;
}

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 74px, rgba(221, 193, 134, 0.035) 75px, transparent 76px),
    repeating-linear-gradient(180deg, transparent 0 130px, rgba(255, 255, 255, 0.025) 131px, transparent 132px);
}

.ambient-dust {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.ambient-dust span {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(240, 215, 147, 0.58);
  box-shadow: 0 0 18px rgba(240, 215, 147, 0.7);
  animation: drift 18s linear infinite;
}

.ambient-dust span:nth-child(1) { left: 18%; top: 64%; animation-duration: 24s; }
.ambient-dust span:nth-child(2) { left: 42%; top: 24%; animation-duration: 19s; animation-delay: -8s; }
.ambient-dust span:nth-child(3) { left: 74%; top: 38%; animation-duration: 28s; animation-delay: -4s; }
.ambient-dust span:nth-child(4) { left: 63%; top: 76%; animation-duration: 22s; animation-delay: -12s; }
.ambient-dust span:nth-child(5) { left: 8%; top: 34%; animation-duration: 30s; animation-delay: -18s; }

@keyframes drift {
  0% { transform: translate3d(0, 60px, 0); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translate3d(44px, -180px, 0); opacity: 0; }
}

@keyframes keyPulse {
  0%, 100% { filter: brightness(0.95); box-shadow: 0 0 26px rgba(221, 193, 134, 0.16); }
  50% { filter: brightness(1.12); box-shadow: 0 0 42px rgba(221, 193, 134, 0.26); }
}

@keyframes keyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes relicFloat {
  0%, 100% { transform: translate3d(-50%, 0, 0) rotate(-1deg); }
  50% { transform: translate3d(-50%, -12px, 0) rotate(1deg); }
}

@keyframes relicAlign {
  0%, 100% { transform: rotate(0deg) translateY(0) scale(1); }
  45% { transform: rotate(2deg) translateY(-5px) scale(1.01); }
  72% { transform: rotate(-3deg) translateY(2px) scale(0.995); }
}

.hero {
  position: relative;
  min-height: 760px;
  isolation: isolate;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  left: max(10px, calc(50% - 640px));
  bottom: 72px;
  z-index: -1;
  width: min(210px, 20vw);
  aspect-ratio: 0.75;
  opacity: 0.14;
  background: var(--key-full) center / contain no-repeat;
  filter: saturate(0.96);
  transform: rotate(-18deg);
  pointer-events: none;
}

.hero-art {
  position: absolute;
  inset: 0;
  z-index: -5;
  background-image: url("./assets/cosmic-gate-hero.png");
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  filter: saturate(0.86) contrast(1.08) brightness(0.88);
  animation: slowParallax 28s ease-in-out infinite alternate;
}

@keyframes slowParallax {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.055) translate3d(-12px, -8px, 0); }
}

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(ellipse at 52% 31%, rgba(221, 193, 134, 0.12), transparent 27rem),
    linear-gradient(90deg, rgba(3, 4, 5, 0.9) 0%, rgba(3, 4, 5, 0.58) 38%, rgba(3, 4, 5, 0.3) 66%, rgba(3, 4, 5, 0.78) 100%),
    linear-gradient(180deg, rgba(3, 4, 5, 0.2) 0%, rgba(3, 4, 5, 0.08) 50%, #030405 100%);
}

.celestial-map {
  position: absolute;
  left: 50%;
  top: 43%;
  z-index: -2;
  width: min(72vw, 940px);
  aspect-ratio: 1.85 / 1;
  transform: translate(-50%, -50%);
  opacity: 0.32;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 0 16%, rgba(221, 193, 134, 0.42) 16.2% 16.5%, transparent 17% 31%, rgba(221, 193, 134, 0.28) 31.2% 31.5%, transparent 32%),
    linear-gradient(90deg, transparent 0 48%, rgba(221, 193, 134, 0.32) 49.8% 50.2%, transparent 52%),
    linear-gradient(25deg, transparent 0 49.8%, rgba(221, 193, 134, 0.18) 50%, transparent 50.2%),
    linear-gradient(-25deg, transparent 0 49.8%, rgba(221, 193, 134, 0.18) 50%, transparent 50.2%);
  border: 1px solid rgba(221, 193, 134, 0.15);
  border-radius: 50%;
  box-shadow: 0 0 90px rgba(221, 193, 134, 0.08);
}

.celestial-map::before,
.celestial-map::after {
  content: "";
  position: absolute;
  inset: 16%;
  border: 1px solid rgba(221, 193, 134, 0.22);
  transform: rotate(45deg);
}

.celestial-map::after {
  inset: 33%;
  border-radius: 50%;
  transform: none;
  background: radial-gradient(circle, rgba(221, 193, 134, 0.65) 0 2px, transparent 3px);
}

.nav {
  position: fixed;
  left: 50%;
  top: 0;
  z-index: 60;
  width: min(1220px, calc(100% - 64px));
  margin: 0;
  padding: 18px 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  transform: translateX(-50%);
}

.nav::before {
  content: "";
  position: fixed;
  left: 50%;
  top: 0;
  z-index: -1;
  width: 100vw;
  height: 92px;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(3, 4, 5, 0.94), rgba(3, 4, 5, 0.72) 68%, rgba(3, 4, 5, 0));
  pointer-events: none;
}

.wordmark,
.nav-links,
.nav-actions,
.hero-inner,
.protocol-actions,
.panel-head,
.round-form,
.scan-control {
  display: flex;
  align-items: center;
}

.wordmark {
  gap: 14px;
  color: var(--text);
  text-decoration: none;
  font-size: 16px;
  letter-spacing: 0.18em;
  text-shadow: 0 0 22px rgba(221, 193, 134, 0.24);
}

.brand-mark {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 215, 147, 0.1), rgba(240, 215, 147, 0.03) 46%, transparent 68%);
  filter: drop-shadow(0 0 18px rgba(240, 215, 147, 0.32));
  box-shadow: none;
  animation: keyPulse 4.8s ease-in-out infinite;
}

.nav-actions {
  gap: 10px;
}

.nav-links {
  gap: clamp(18px, 3vw, 42px);
  justify-content: center;
  padding: 0 18px;
}

.nav-links a {
  position: relative;
  color: rgba(243, 234, 215, 0.78);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(221, 193, 134, 0.7), transparent);
  opacity: 0;
  transition: opacity 180ms ease;
}

.nav-links a:hover::after {
  opacity: 1;
}

.mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 42px;
  min-width: 138px;
  padding: 3px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(15, 16, 15, 0.8), rgba(0, 0, 0, 0.58));
  box-shadow: inset 0 0 24px rgba(221, 193, 134, 0.04);
  backdrop-filter: blur(18px);
}

.seg {
  color: var(--muted);
  background: transparent;
}

.seg.active {
  color: #130e06;
  background: linear-gradient(90deg, #f2dfab, #be8b3b 55%, #f0d793);
  box-shadow: 0 0 22px rgba(221, 193, 134, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.gold-button,
.ghost-button,
.icon-button {
  position: relative;
  min-height: 42px;
  white-space: nowrap;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, filter 180ms ease;
}

.gold-button {
  padding: 0 22px;
  color: #160f05;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent 16% 84%, rgba(255, 255, 255, 0.18)),
    linear-gradient(180deg, #ffe9ac 0%, #d9aa52 48%, #8d5f23 100%);
  box-shadow: 0 14px 42px rgba(221, 193, 134, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
}

.gold-button::after,
.gold-link::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -35%;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-130%) rotate(18deg);
  transition: transform 620ms ease;
  pointer-events: none;
}

.gold-button:hover,
.gold-link:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 18px 52px rgba(221, 193, 134, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.gold-button:hover::after,
.gold-link:hover::after {
  transform: translateX(560%) rotate(18deg);
}

.gold-button::before,
.ghost-button::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.34);
  border-bottom: 1px solid rgba(51, 31, 8, 0.32);
  pointer-events: none;
}

.gold-button.wide,
.ghost-button.wide {
  width: 100%;
}

.ghost-button {
  padding: 0 18px;
  color: var(--gold);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(37, 33, 26, 0.72), rgba(8, 9, 9, 0.72));
  backdrop-filter: blur(18px);
}

.ghost-button:hover,
.plain-link:hover {
  color: var(--gold-bright);
  border-color: var(--line-strong);
  box-shadow: inset 0 0 24px rgba(221, 193, 134, 0.06), 0 10px 32px rgba(0, 0, 0, 0.22);
}

.icon-button {
  width: 42px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle, rgba(221, 193, 134, 0.9) 0 2px, transparent 3px),
    linear-gradient(135deg, transparent 45%, rgba(240, 215, 147, 0.65) 46% 54%, transparent 55%),
    rgba(8, 9, 9, 0.72);
}

.hero-inner {
  position: relative;
  z-index: 4;
  width: min(1220px, calc(100% - 64px));
  min-height: 640px;
  margin: 0 auto;
  justify-content: center;
  gap: 0;
  padding: 96px 0 84px;
  perspective: 1200px;
}

.hero-copy {
  position: relative;
  z-index: 7;
  width: min(680px, 100%);
  margin-top: 68px;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  text-align: center;
}

.hero-title-lock {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
}

.hero-relic {
  position: absolute;
  left: var(--enter-center-x, 50%);
  top: var(--enter-center-y, 50%);
  z-index: -1;
  width: min(370px, 26vw);
  pointer-events: none;
  aspect-ratio: 0.72;
  opacity: 0.84;
  filter:
    saturate(1.04)
    contrast(1.05)
    brightness(0.96)
    drop-shadow(0 0 16px rgba(198, 148, 62, 0.28))
    drop-shadow(0 0 34px rgba(198, 148, 62, 0.16));
  mix-blend-mode: normal;
  transform: translate3d(-50%, -50%, 0);
  transform-style: preserve-3d;
  animation: none;
  will-change: auto;
}

.enter-anchor {
  display: inline-block;
}

.hero-particle-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.94;
  mix-blend-mode: screen;
}

.hero-relic.is-aligning {
  opacity: 0.86;
  filter: saturate(1.05) contrast(1.05);
}

.hero-relic::before,
.hero-relic::after {
  display: none;
}

.hero-relic canvas,
.hero-relic-fallback {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0;
}

.hero-relic canvas {
  position: relative;
  z-index: 2;
  opacity: 0.95;
}

.hero-relic.model-ready canvas {
  opacity: 0.95 !important;
}

.hero-relic-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: rotateZ(-12deg);
  transform-style: preserve-3d;
  backface-visibility: visible;
  animation: none;
  transform-origin: 52% 48%;
}

.hero-relic.model-ready .hero-relic-fallback {
  opacity: 0;
}

.overline {
  margin: 0 0 18px;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(221, 193, 134, 0.2);
}

h1 {
  position: relative;
  z-index: 5;
  color: var(--gold);
  font-size: clamp(56px, 7.2vw, 104px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.075em;
  text-align: center;
  text-indent: 0.075em;
  text-shadow: 0 0 34px rgba(221, 193, 134, 0.26), 0 20px 70px rgba(0, 0, 0, 0.7);
}

h2 {
  max-width: 760px;
  color: #f0e3c7;
  font-size: clamp(30px, 3.8vw, 54px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.02em;
}

h3 {
  color: #f2dfbd;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.start-line {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  color: #d8ccb1;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.start-line::before,
.start-line::after {
  content: "";
  width: 86px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(221, 193, 134, 0.45));
}

.start-line::after {
  background: linear-gradient(90deg, rgba(221, 193, 134, 0.45), transparent);
}

.lede {
  width: min(540px, 100%);
  margin: 24px auto 0;
  color: #d8d1c2;
  font-size: 16px;
  line-height: 1.85;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.65);
}

.hero-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}

.gold-link,
.plain-link {
  position: relative;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gold-link {
  min-width: 136px;
  color: #160f05;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent 16% 84%, rgba(255, 255, 255, 0.18)),
    linear-gradient(180deg, #ffe9ac 0%, #d9aa52 48%, #8d5f23 100%);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
  overflow: hidden;
  transition: box-shadow 180ms ease, filter 180ms ease, transform 180ms ease;
}

.plain-link {
  min-width: 126px;
  color: var(--gold);
  border-bottom: 1px solid rgba(221, 193, 134, 0.48);
  transition: color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.protocol-card,
.glass-panel {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  border: 1px solid rgba(229, 194, 115, 0.38);
  background-image:
    linear-gradient(180deg, rgba(1, 2, 2, 0.12), rgba(1, 2, 2, 0.5)),
    radial-gradient(ellipse at 50% 8%, rgba(255, 226, 139, 0.2), transparent 30%),
    radial-gradient(ellipse at 50% 52%, rgba(255, 226, 139, 0.06), transparent 55%),
    var(--module-gate),
    linear-gradient(145deg, rgba(18, 19, 18, 0.91), rgba(3, 4, 4, 0.94));
  background-position:
    center,
    center,
    center,
    center 43%,
    center;
  background-size:
    auto,
    auto,
    auto,
    176% auto,
    auto;
  background-repeat: no-repeat;
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(255, 242, 190, 0.12),
    0 0 64px rgba(217, 159, 56, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 26px 0 54px rgba(221, 193, 134, 0.07),
    inset -26px 0 54px rgba(221, 193, 134, 0.07),
    inset 0 0 170px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(22px);
  border-radius: 170px 170px 4px 4px / 48px 48px 4px 4px;
}

.protocol-card {
  background-size:
    auto,
    auto,
    auto,
    190% auto,
    auto;
}

.claim-panel {
  background-size:
    auto,
    auto,
    auto,
    182% auto,
    auto;
}

.archive-panel {
  background-size:
    auto,
    auto,
    auto,
    174% auto,
    auto;
}

.protocol-card::before,
.glass-panel::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 0;
  border: 1px solid rgba(230, 197, 120, 0.36);
  border-top: 1px solid rgba(255, 230, 160, 0.56);
  border-radius: 150px 150px 2px 2px / 54px 54px 2px 2px;
  background:
    linear-gradient(180deg, rgba(2, 3, 3, 0.22), rgba(2, 3, 3, 0.74)),
    radial-gradient(ellipse at 50% 13%, rgba(255, 226, 139, 0.14), transparent 30%),
    linear-gradient(90deg, rgba(255, 226, 139, 0.14) 0 1px, rgba(255, 226, 139, 0.04) 1px 8%, transparent 19%, transparent 81%, rgba(255, 226, 139, 0.04) 92%, rgba(255, 226, 139, 0.14) calc(100% - 1px) 100%),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(255, 231, 159, 0.026) 47px, transparent 48px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 24px 80px rgba(0, 0, 0, 0.28),
    inset 22px 0 44px rgba(255, 224, 143, 0.045),
    inset -22px 0 44px rgba(255, 224, 143, 0.045),
    0 0 42px rgba(237, 201, 119, 0.08);
  pointer-events: none;
}

.protocol-card::after,
.glass-panel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -11px;
  z-index: 1;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 230, 159, 0.56);
  background:
    radial-gradient(circle, rgba(255, 244, 204, 0.98) 0 2px, transparent 3px),
    linear-gradient(135deg, #0c0704, #6d4614 43%, #ffe3a1 50%, #2a1707);
  box-shadow: 0 0 26px rgba(237, 201, 119, 0.32), 0 10px 30px rgba(0, 0, 0, 0.38);
  transform: translateX(-50%) rotate(45deg);
}

.protocol-card .protocol-top::after,
.glass-panel .panel-head::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -32px;
  z-index: -1;
  width: min(260px, 64%);
  height: 28px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 76%, rgba(255, 244, 201, 0.74) 0 2px, transparent 3px),
    linear-gradient(90deg, transparent, rgba(255, 231, 154, 0.52) 21%, rgba(98, 57, 13, 0.38) 50%, rgba(255, 231, 154, 0.52) 79%, transparent),
    linear-gradient(180deg, rgba(255, 244, 202, 0.22), rgba(119, 72, 18, 0.08) 58%, transparent 60%);
  clip-path: polygon(0 100%, 12% 42%, 34% 58%, 50% 0, 66% 58%, 88% 42%, 100% 100%);
  opacity: 0.62;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 26px rgba(237, 201, 119, 0.35));
}

.protocol-card {
  width: 100%;
  padding: 42px 26px 26px;
  align-self: center;
  background-position:
    center,
    center,
    center,
    39% 43%,
    center;
}

.claim-panel {
  background-position:
    center,
    center,
    center,
    45% 43%,
    center;
}

.archive-panel {
  background-position:
    center,
    center,
    center,
    55% 43%,
    center;
}

.protocol-card > *,
.glass-panel > * {
  position: relative;
  z-index: 2;
}

.protocol-card > :not(.protocol-top),
.glass-panel > :not(.panel-head) {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.82);
}

.protocol-card .protocol-top::before,
.glass-panel .panel-head::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -24px;
  width: min(230px, 58%);
  height: 18px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 244, 203, 0.74) 0 1px, transparent 2px),
    linear-gradient(90deg, transparent, rgba(255, 224, 143, 0.48) 18%, rgba(96, 58, 15, 0.32) 50%, rgba(255, 224, 143, 0.48) 82%, transparent);
  clip-path: polygon(0 50%, 11% 0, 89% 0, 100% 50%, 89% 100%, 11% 100%);
  transform: translateX(-50%);
  opacity: 0.62;
  filter: drop-shadow(0 0 18px rgba(237, 201, 119, 0.28));
}

.protocol-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.protocol-top strong {
  color: var(--gold);
  font-size: 42px;
  font-weight: 400;
  line-height: 0.85;
  text-shadow: 0 0 28px rgba(221, 193, 134, 0.25);
}

.time-orb {
  margin: 18px 0;
  padding: 20px 0 18px;
  color: var(--gold-bright);
  font-size: clamp(44px, 5vw, 62px);
  font-weight: 400;
  line-height: 0.9;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, transparent, rgba(221, 193, 134, 0.08), transparent);
  text-shadow: 0 0 32px rgba(221, 193, 134, 0.25);
}

.time-orb.is-status {
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.08;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.protocol-grid {
  display: grid;
  gap: 10px;
}

.protocol-grid div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  min-height: 66px;
  padding: 14px 16px;
  border: 1px solid rgba(221, 193, 134, 0.13);
  background: rgba(0, 0, 0, 0.24);
}

.protocol-grid span,
.protocol-grid small,
.panel-head span,
.round-item span,
.table-row span {
  color: var(--muted);
}

.protocol-grid span,
.protocol-grid small {
  font-family: var(--sans);
  font-size: 12px;
}

.protocol-grid strong {
  color: #f2e3c6;
  font-size: 25px;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.protocol-grid small {
  grid-column: 2;
}

.protocol-actions {
  gap: 10px;
  margin-top: 18px;
}

.microcopy {
  margin-top: 14px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.65;
}

.mechanism-section,
.access-section,
.treasury-section,
.final-section {
  position: relative;
  width: min(1220px, calc(100% - 64px));
  margin: 0 auto;
  isolation: isolate;
}

.mechanism-section::before,
.access-section::before,
.treasury-section::before,
.final-section::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  z-index: -1;
  width: min(1100px, calc(100vw - 24px));
  height: 620px;
  pointer-events: none;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 50% 17%, rgba(221, 193, 134, 0.1), transparent 36%),
    radial-gradient(ellipse at 50% 58%, transparent 0 27%, rgba(221, 193, 134, 0.085) 27.2% 27.45%, transparent 28% 43%, rgba(221, 193, 134, 0.045) 43.2% 43.5%, transparent 44%),
    linear-gradient(103deg, transparent 0 42%, rgba(221, 193, 134, 0.06) 42.15% 42.35%, transparent 42.6%),
    linear-gradient(257deg, transparent 0 47%, rgba(108, 130, 136, 0.045) 47.15% 47.35%, transparent 47.6%),
    linear-gradient(90deg, transparent, rgba(221, 193, 134, 0.055), transparent);
  opacity: 0.74;
}

.mechanism-section {
  scroll-margin-top: 128px;
  padding: 82px 0 68px;
  border-top: 1px solid rgba(221, 193, 134, 0.12);
  border-bottom: 1px solid rgba(221, 193, 134, 0.08);
}

.section-kicker {
  position: relative;
  text-align: center;
}

.section-kicker::before,
.section-title::before {
  content: "";
  width: 42px;
  height: 42px;
  display: block;
  margin: 0 auto 14px;
  opacity: 0.52;
  background: var(--key-logo) center / contain no-repeat;
  filter: saturate(0.82);
}

.section-kicker h2,
.section-title h2 {
  margin: 0 auto;
}

.section-kicker p:not(.overline),
.section-title p:not(.overline) {
  width: min(660px, 100%);
  margin: 18px auto 0;
  color: #cfc6b2;
  font-size: 16px;
  line-height: 1.8;
}

.rule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}

.rule-card {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  padding: 26px;
  border: 1px solid rgba(221, 193, 134, 0.15);
  background:
    linear-gradient(180deg, rgba(255, 244, 210, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(8, 9, 9, 0.58);
  box-shadow: inset 0 0 52px rgba(221, 193, 134, 0.03);
}

.rule-card::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -42px;
  width: 142px;
  aspect-ratio: 1;
  opacity: 0.075;
  background: var(--key-logo) center / contain no-repeat;
  pointer-events: none;
}

.rule-card span {
  color: rgba(221, 193, 134, 0.48);
  font-size: 42px;
  line-height: 1;
}

.rule-card h3 {
  margin-top: 22px;
}

.rule-card p {
  margin-top: 14px;
  color: #cfc6b2;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.75;
}

.access-section {
  scroll-margin-top: 128px;
  padding: 82px 0 34px;
}

.access-section::before {
  top: 36px;
  width: min(1180px, calc(100vw - 24px));
  height: 720px;
  aspect-ratio: auto;
  opacity: 0.82;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(221, 193, 134, 0.12), transparent 35%),
    radial-gradient(ellipse at 50% 57%, transparent 0 28%, rgba(221, 193, 134, 0.1) 28.2% 28.45%, transparent 29% 44%, rgba(221, 193, 134, 0.045) 44.2% 44.45%, transparent 45%),
    radial-gradient(ellipse at 50% 94%, rgba(221, 193, 134, 0.075), transparent 38%),
    linear-gradient(90deg, transparent, rgba(221, 193, 134, 0.055), transparent);
  filter: blur(0.15px);
}

.section-title {
  position: relative;
  margin-bottom: 30px;
  text-align: center;
}

.console-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1fr) minmax(320px, 0.92fr);
  gap: 22px;
  align-items: stretch;
  perspective: 1400px;
}

.glass-panel {
  padding: 42px 26px 26px;
}

.claim-panel::before,
.archive-panel::before,
.rounds-panel::before {
  background:
    linear-gradient(180deg, rgba(2, 3, 3, 0.38), rgba(2, 3, 3, 0.72)),
    radial-gradient(ellipse at 50% 13%, rgba(255, 226, 139, 0.15), transparent 30%),
    linear-gradient(135deg, rgba(221, 193, 134, 0.08), transparent 30%),
    linear-gradient(315deg, rgba(221, 193, 134, 0.07), transparent 26%),
    linear-gradient(90deg, rgba(255, 230, 159, 0.12) 0 1px, transparent 12%, transparent 88%, rgba(255, 230, 159, 0.12) calc(100% - 1px) 100%);
}

.panel-head {
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.panel-head span,
.round-form label,
.empty-state,
.round-item span,
.table-row span {
  font-family: var(--sans);
  font-size: 13px;
}

.round-form {
  gap: 10px;
  flex-wrap: wrap;
}

.round-form label {
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

input {
  min-height: 42px;
  width: 126px;
  color: var(--text);
  border: 1px solid var(--line);
  outline: none;
  padding: 0 14px;
  background: rgba(0, 0, 0, 0.34);
}

input:focus {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 4px rgba(221, 193, 134, 0.08);
}

.result-box {
  min-height: 60px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  color: var(--muted);
  padding: 15px 16px;
  border: 1px solid rgba(221, 193, 134, 0.13);
  background:
    linear-gradient(90deg, rgba(221, 193, 134, 0.04), transparent),
    rgba(0, 0, 0, 0.22);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
}

.result-box.good {
  color: #e4f7e9;
  border-color: rgba(88, 177, 123, 0.44);
  background: rgba(42, 92, 66, 0.18);
}

.result-box.bad {
  color: #ffd8cf;
  border-color: rgba(196, 98, 74, 0.42);
  background: rgba(196, 98, 74, 0.12);
}

.scan-control {
  gap: 8px;
}

.scan-control input {
  width: 74px;
}

.round-list,
.round-table {
  display: grid;
  gap: 9px;
}

.round-item,
.table-row {
  display: grid;
  grid-template-columns: 98px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 12px 14px;
  border: 1px solid rgba(221, 193, 134, 0.12);
  background: rgba(0, 0, 0, 0.2);
}

.round-item strong,
.table-row strong {
  color: #f1dfbc;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.round-item span,
.table-row span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.round-item .gold-button,
.round-item .ghost-button,
.table-row .ghost-button {
  min-height: 36px;
  padding-inline: 16px;
  font-size: 13px;
}

.empty-state {
  min-height: 96px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed rgba(221, 193, 134, 0.17);
  background: rgba(0, 0, 0, 0.16);
}

.treasury-section {
  scroll-margin-top: 128px;
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(0, 0.68fr) minmax(420px, 1fr);
  align-items: center;
  gap: 50px;
  padding: 70px 0 88px;
}

.treasury-copy p,
.final-copy p {
  width: min(550px, 100%);
  margin-top: 20px;
  color: #cfc6b2;
  font-size: 16px;
  line-height: 1.85;
}

.final-section {
  scroll-margin-top: 128px;
  min-height: 420px;
  display: grid;
  place-items: center;
  text-align: center;
}

.final-copy h2 {
  margin: 0 auto;
}

.final-copy p {
  margin-left: auto;
  margin-right: auto;
}

.text-link {
  display: inline-flex;
  margin-top: 30px;
  color: var(--gold-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 215, 147, 0.48);
  padding-bottom: 6px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  max-width: min(420px, calc(100vw - 40px));
  min-height: 44px;
  display: none;
  align-items: center;
  padding: 12px 16px;
  color: var(--text);
  border: 1px solid var(--line);
  background: rgba(9, 10, 10, 0.9);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  font-family: var(--sans);
  font-size: 14px;
}

.toast.show {
  display: flex;
}

.reveal {
  animation: revealUp 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1100px) {
  .nav {
    width: min(100% - 40px, 980px);
  }

  .nav-links {
    gap: 18px;
  }

  .console-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .protocol-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .hero-inner {
    min-height: 560px;
    padding: 54px 0 72px;
  }

  .hero-relic {
    width: min(310px, 36vw);
    opacity: 0.7;
  }

  .nav-links {
    display: none;
  }

  .rule-grid,
  .treasury-section,
  .console-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  html {
    scroll-padding-top: 148px;
  }

  main {
    overflow-x: hidden;
  }

  main::before {
    top: 700px;
    width: calc(100vw - 28px);
    height: 620px;
    opacity: 0.36;
  }

  main::after {
    top: 840px;
    width: calc(100vw - 28px);
    height: 560px;
    opacity: 0.075;
    background-size: min(680px, 120vw) auto;
  }

  .nav,
  .hero-inner,
  .mechanism-section,
  .access-section,
  .treasury-section,
  .final-section {
    width: min(100% - 28px, 620px);
  }

  .nav,
  .panel-head,
  .protocol-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .nav {
    gap: 10px;
    padding: 12px 0 10px;
  }

  .nav::before {
    height: 148px;
    background:
      linear-gradient(180deg, rgba(3, 4, 5, 0.98), rgba(3, 4, 5, 0.88) 70%, rgba(3, 4, 5, 0));
  }

  .nav-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(118px, 0.42fr);
    gap: 8px;
  }

  .wordmark {
    justify-content: center;
    gap: 12px;
    font-size: 14px;
  }

  .brand-mark {
    width: 44px;
    height: 44px;
  }

  .mode-switch {
    width: 100%;
    min-width: 0;
    height: 40px;
  }

  .nav-actions .gold-button {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0 12px;
    font-size: 14px;
  }

  .hero {
    min-height: 780px;
  }

  h1 {
    font-size: clamp(43px, 11.6vw, 58px);
    line-height: 0.96;
    letter-spacing: 0.045em;
    text-indent: 0.045em;
  }

  h2 {
    font-size: clamp(28px, 9vw, 42px);
  }

  .hero-veil {
    background:
      linear-gradient(90deg, rgba(3, 4, 5, 0.94), rgba(3, 4, 5, 0.6)),
      linear-gradient(180deg, rgba(3, 4, 5, 0.14), rgba(3, 4, 5, 0.92));
  }

  .celestial-map {
    width: 118vw;
    top: 36%;
  }

  .hero-inner {
    min-height: 720px;
    align-items: flex-start;
    padding: 146px 0 78px;
  }

  .hero-copy {
    margin-top: 34px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-relic {
    width: min(230px, 52vw);
    opacity: 0.48;
  }

  .hero::after {
    left: -24px;
    bottom: 84px;
    width: min(150px, 34vw);
    opacity: 0.09;
  }

  body::before {
    display: none;
  }

  .overline {
    margin-bottom: 14px;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0.15em;
  }

  .lede {
    width: min(340px, 100%);
    margin-top: 22px;
    font-size: 15px;
    line-height: 1.75;
  }

  .hero-actions {
    width: 100%;
    flex-direction: column;
    margin-top: 28px;
  }

  .gold-link,
  .plain-link {
    width: 100%;
  }

  .start-line {
    gap: 10px;
    margin-top: 14px;
    font-size: 11px;
    letter-spacing: 0.13em;
  }

  .start-line::before,
  .start-line::after {
    width: 34px;
  }

  .mechanism-section,
  .access-section {
    padding-top: 54px;
  }

  .mechanism-section::before,
  .access-section::before,
  .treasury-section::before,
  .final-section::before {
    width: calc(100vw - 28px);
    height: 520px;
    opacity: 0.54;
  }

  .protocol-card,
  .glass-panel {
    min-height: 0;
    border-width: 1px;
    border-radius: 90px 90px 4px 4px / 34px 34px 4px 4px;
    padding: 22px;
  }

  .protocol-card::before,
  .glass-panel::before {
    inset: 10px;
    border-top-width: 2px;
    border-radius: 76px 76px 2px 2px / 30px 30px 2px 2px;
  }

  .protocol-card .protocol-top::before,
  .glass-panel .panel-head::before {
    top: -12px;
    width: min(150px, 48%);
  }

  .protocol-card .protocol-top::after,
  .glass-panel .panel-head::after {
    top: -28px;
    width: min(230px, 72%);
    height: 34px;
  }

  .round-form > *,
  .round-form input {
    width: 100%;
  }

  .round-item,
  .table-row {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .round-item button,
  .table-row button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 420px) {
  .nav,
  .hero-inner,
  .mechanism-section,
  .access-section,
  .treasury-section,
  .final-section {
    width: min(100% - 24px, 620px);
  }

  .wordmark {
    font-size: 13px;
    letter-spacing: 0.16em;
  }

  .brand-mark {
    width: 42px;
    height: 42px;
  }

  .nav-actions {
    grid-template-columns: minmax(0, 1fr) 128px;
  }

  .seg,
  .nav-actions .gold-button {
    font-size: 13px;
  }

  .hero-inner {
    padding-top: 142px;
  }

  main::before,
  main::after,
  .mechanism-section::before,
  .access-section::before,
  .treasury-section::before,
  .final-section::before {
    width: calc(100vw - 24px);
  }

  h1 {
    font-size: clamp(39px, 11vw, 46px);
    letter-spacing: 0.035em;
    text-indent: 0.035em;
  }

  .hero-relic {
    width: min(210px, 56vw);
    opacity: 0.42;
  }

  .start-line::before,
  .start-line::after {
    width: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .hero-relic {
    transition: none;
  }
}