:root {
  /* Typography compliance: IBM Plex Mono** for the domain lockup, Inter** for longer explanatory copy where readability needs a quieter modern voice, Space Mono** for oversized numerals. */
  --obsidian: #050403;
  --graphite: #14110E;
  --marble: #26221D;
  --gold: #D6A84F;
  --molten: #FFD36A;
  --mist: #F3E1B2;
  --violet: #31283A;
  --vein: #8C8376;
  --sidebar: 18rem;
  --mono: "IBM Plex Mono", "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --space: "Space Mono", "IBM Plex Mono", ui-monospace, monospace;
  --inter: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--obsidian);
  color: var(--mist);
  font-family: var(--inter);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 74% 18%, rgba(49, 40, 58, .42), transparent 28rem),
    radial-gradient(circle at 28% 72%, rgba(214, 168, 79, .08), transparent 30rem),
    linear-gradient(116deg, transparent 0 18%, rgba(140, 131, 118, .10) 18.18%, transparent 18.7% 44%, rgba(255, 211, 106, .12) 44.1%, transparent 44.55%),
    radial-gradient(ellipse at 50% 50%, rgba(38, 34, 29, .86), var(--obsidian) 63%);
}

.quest-spine {
  position: fixed;
  z-index: 10;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  padding: 2.2rem 2rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border-right: 1px solid rgba(214, 168, 79, .26);
  background:
    radial-gradient(circle at 20% 12%, rgba(243, 225, 178, .10), transparent 10rem),
    radial-gradient(circle at 90% 80%, rgba(49, 40, 58, .35), transparent 13rem),
    linear-gradient(136deg, rgba(140, 131, 118, .08), transparent 34%),
    var(--graphite);
  box-shadow: 1.5rem 0 5rem rgba(0, 0, 0, .54), inset -1px 0 rgba(255, 211, 106, .14);
}

.spine-marble, .quest-spine::before, .quest-spine::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.spine-marble {
  background:
    linear-gradient(31deg, transparent 21%, rgba(140, 131, 118, .22) 21.25%, transparent 21.8%),
    linear-gradient(119deg, transparent 52%, rgba(255, 211, 106, .22) 52.1%, transparent 52.35%),
    linear-gradient(69deg, transparent 71%, rgba(140, 131, 118, .15) 71.15%, transparent 71.7%);
  opacity: .8;
}

.quest-spine::before {
  left: 4.2rem;
  right: auto;
  width: 1px;
  margin-block: 8rem 9rem;
  background: linear-gradient(180deg, transparent, var(--gold), var(--vein), var(--molten), transparent);
  box-shadow: 0 0 18px rgba(255, 211, 106, .38);
}

.quest-spine::after {
  background: radial-gradient(circle at 4.2rem var(--orb-y, 22%), rgba(255, 211, 106, .22), transparent 4.2rem);
}

.spine-title {
  position: relative;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--mist);
  font-size: .86rem;
  text-transform: lowercase;
}

.spine-title::after, .domain-lockup::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: .72rem;
  width: 100%;
  transform-origin: left;
  background: linear-gradient(90deg, var(--molten), transparent);
  animation: underlineDraw 1.4s cubic-bezier(.22, 1, .36, 1) both;
}

.spine-track {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.1rem;
  margin-left: 1rem;
}

.spine-orb {
  position: absolute;
  left: 1.01rem;
  top: var(--orb-track-y, 0%);
  width: .92rem;
  height: .92rem;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 30% 30%, #F3E1B2, #FFD36A 42%, #D6A84F 65%, transparent 67%);
  box-shadow: 0 0 1.4rem rgba(255, 211, 106, .94), 0 0 3.8rem rgba(214, 168, 79, .38);
  transition: top .72s cubic-bezier(.22, 1, .36, 1);
}

.chapter-link {
  position: relative;
  color: rgba(243, 225, 178, .54);
  text-decoration: none;
  font-family: var(--mono);
  letter-spacing: .12em;
  font-size: .72rem;
  text-transform: uppercase;
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  align-items: center;
}

.sigil {
  color: var(--gold);
  font-family: var(--space);
  font-weight: 700;
  text-shadow: 0 0 1rem rgba(255, 211, 106, .42);
}

.link-label { position: relative; width: fit-content; padding-bottom: .42rem; }
.link-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--molten);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.chapter-link.active { color: var(--mist); }
.chapter-link.active .link-label::after, .chapter-link:hover .link-label::after { transform: scaleX(1); }

.spine-coordinates {
  position: relative;
  color: rgba(140, 131, 118, .72);
  font-family: var(--space);
  font-size: .66rem;
  letter-spacing: .14em;
  line-height: 1.9;
}

.quest-stage {
  position: relative;
  z-index: 1;
  margin-left: var(--sidebar);
  min-height: 500vh;
  background:
    radial-gradient(circle at 88% 10%, rgba(49, 40, 58, .34), transparent 25rem),
    linear-gradient(100deg, rgba(5, 4, 3, .94), rgba(20, 17, 14, .92));
}

.chamber {
  position: relative;
  min-height: 100vh;
  overflow: clip;
  border-bottom: 1px solid rgba(214, 168, 79, .08);
}

.sticky-layer {
  position: sticky;
  top: 0;
  min-height: 100vh;
  padding: clamp(3rem, 6vw, 7rem);
  display: grid;
  place-items: center;
}

.marble-fault {
  position: fixed;
  pointer-events: none;
  z-index: 2;
  height: 1px;
  width: 72vw;
  background: linear-gradient(90deg, transparent, rgba(140, 131, 118, .48), rgba(255, 211, 106, .75), transparent);
  transform-origin: left;
  opacity: .5;
  animation: veinTravel 5.8s linear infinite;
}
.fault-a { top: 23vh; left: 20rem; transform: rotate(-18deg); }
.fault-b { top: 72vh; left: 23rem; transform: rotate(13deg); animation-delay: -2.4s; }

.copy-panel {
  position: relative;
  z-index: 3;
  max-width: 43rem;
  padding: 1.4rem 1.6rem;
  background: linear-gradient(135deg, rgba(38, 34, 29, .50), rgba(20, 17, 14, .16));
  border: 1px solid rgba(243, 225, 178, .11);
  box-shadow: 0 1rem 5rem rgba(0, 0, 0, .34), inset 0 1px rgba(255, 211, 106, .08);
  backdrop-filter: blur(8px);
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--gold);
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .72rem;
}

h1, h2 { margin: 0; font-family: var(--mono); font-weight: 600; line-height: .96; letter-spacing: -.055em; }
h2 { font-size: clamp(2.8rem, 6vw, 7rem); }
p { color: rgba(243, 225, 178, .72); font-size: clamp(.96rem, 1.4vw, 1.16rem); line-height: 1.75; }

.chapter-number {
  position: absolute;
  z-index: 1;
  top: 8vh;
  right: -1vw;
  font-family: var(--space);
  font-size: clamp(7rem, 17vw, 19rem);
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px rgba(214, 168, 79, .18);
  text-shadow: 0 0 6rem rgba(49, 40, 58, .62);
}

.domain-lockup { font-size: clamp(3.7rem, 10vw, 11.2rem); color: var(--mist); text-shadow: 0 0 4rem rgba(214, 168, 79, .18); }
.domain-line { max-width: 36rem; }
.threshold-copy { justify-self: start; align-self: center; margin-left: 3vw; }

.threshold-slab {
  position: absolute;
  right: 7vw;
  bottom: 13vh;
  width: min(32rem, 42vw);
  min-height: 12rem;
  padding: 1.2rem;
  display: flex;
  justify-content: space-around;
  align-items: end;
  font-family: var(--space);
  color: rgba(255, 211, 106, .72);
  letter-spacing: .16em;
  background:
    linear-gradient(126deg, rgba(140, 131, 118, .11), transparent 27%),
    linear-gradient(19deg, transparent 62%, rgba(255, 211, 106, .16) 62.2%, transparent 63%),
    rgba(20, 17, 14, .68);
  border: 1px solid rgba(140, 131, 118, .22);
  transform: rotate(-5deg);
}

.blob {
  position: absolute;
  z-index: 0;
  border-radius: 45% 55% 62% 38% / 48% 44% 56% 52%;
  filter: blur(.4px);
  background: radial-gradient(circle at 34% 28%, rgba(243, 225, 178, .22), rgba(214, 168, 79, .10) 28%, rgba(49, 40, 58, .30) 58%, transparent 72%);
  border: 1px solid rgba(255, 211, 106, .14);
  animation: blobDrift 8s ease-in-out infinite alternate;
}
.blob-one { width: 29rem; height: 22rem; left: 5vw; top: 12vh; }
.blob-two { width: 18rem; height: 25rem; right: 9vw; top: 10vh; animation-delay: -3s; }
.blob-three { width: 36rem; height: 25rem; left: 30vw; bottom: 6vh; animation-delay: -1.7s; }
.blob-four { width: 43rem; height: 31rem; right: -8vw; top: 17vh; animation-delay: -4s; }

.right-ledge { justify-self: end; margin-right: 5vw; }
.fragment-rain .sticky-layer { background: radial-gradient(circle at 28% 45%, rgba(214, 168, 79, .10), transparent 28rem); }
.shard-field { position: absolute; inset: 0; z-index: 2; }
.shard {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 .45rem;
  border-radius: 999px;
  border: 1px solid rgba(214, 168, 79, .32);
  color: var(--molten);
  font-family: var(--space);
  font-size: .72rem;
  background: rgba(20, 17, 14, .72);
  box-shadow: 0 0 1.2rem rgba(214, 168, 79, .14);
  transform: translate3d(var(--tx, 0), var(--ty, 0), 0) rotate(var(--rot, 0deg));
  transition: transform .2s linear;
}
.shard:nth-child(1) { left: 9%; top: 18%; } .shard:nth-child(2) { left: 42%; top: 11%; }
.shard:nth-child(3) { left: 80%; top: 22%; } .shard:nth-child(4) { left: 66%; top: 42%; }
.shard:nth-child(5) { left: 14%; top: 54%; } .shard:nth-child(6) { left: 28%; top: 81%; }
.shard:nth-child(7) { left: 78%; top: 74%; } .shard:nth-child(8) { left: 52%; top: 66%; }
.shard:nth-child(9) { left: 90%; top: 52%; } .shard:nth-child(10) { left: 33%; top: 34%; }
.shard:nth-child(11) { left: 58%; top: 18%; } .shard:nth-child(12) { left: 18%; top: 29%; }
.shard:nth-child(13) { left: 48%; top: 88%; } .shard:nth-child(14) { left: 72%; top: 88%; }
.shard:nth-child(15) { left: 7%; top: 73%; }

.constellation-ring {
  position: absolute;
  width: 36rem;
  height: 36rem;
  border-radius: 50%;
  border: 1px dashed rgba(255, 211, 106, .22);
  left: 14vw;
  top: 22vh;
  animation: slowSpin 20s linear infinite;
}

.compression-atrium .sticky-layer { place-items: stretch; }
.atrium-copy { align-self: start; justify-self: start; margin: 6vh 0 0 3vw; max-width: 36rem; }
.capsule-system { position: absolute; inset: 0; display: grid; place-items: center; transform: translateX(10vw); }
.compression-capsule {
  position: relative;
  z-index: 3;
  width: 9rem;
  height: 27rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 211, 106, .65);
  background: linear-gradient(180deg, rgba(255, 211, 106, .24), rgba(20, 17, 14, .55) 34%, rgba(214, 168, 79, .18));
  box-shadow: inset 0 0 2rem rgba(255, 211, 106, .22), 0 0 5rem rgba(214, 168, 79, .35);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 2.2rem .5rem;
  color: var(--mist);
  font-family: var(--space);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  animation: capsulePulse 3.8s ease-in-out infinite;
}
.capsule-core { position: absolute; inset: 36% 18%; border-radius: 999px; background: var(--molten); filter: blur(14px); opacity: .62; }
.ring { position: absolute; border: 1px solid rgba(214, 168, 79, .24); border-radius: 50%; animation: slowSpin 18s linear infinite; }
.ring-one { width: 25rem; height: 25rem; } .ring-two { width: 39rem; height: 39rem; animation-direction: reverse; }
.trail { position: absolute; width: 34rem; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.trail-one { transform: rotate(31deg); } .trail-two { transform: rotate(-49deg); }

.proof-ascent { background: linear-gradient(90deg, rgba(5,4,3,.94), rgba(20,17,14,.8), rgba(5,4,3,.97)); }
.corridor-layer { place-items: center; }
.proof-corridor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(24vw, 18rem);
  background: linear-gradient(90deg, transparent, rgba(255, 211, 106, .12), rgba(243, 225, 178, .04), rgba(255, 211, 106, .12), transparent);
  border-inline: 1px solid rgba(214, 168, 79, .28);
  box-shadow: 0 0 6rem rgba(214, 168, 79, .22);
}
.ascent-capsule {
  position: absolute;
  left: 50%;
  top: var(--ascent-y, 70%);
  transform: translate(-50%, -50%);
  width: 5.8rem;
  height: 13rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  writing-mode: vertical-rl;
  font-family: var(--space);
  color: var(--molten);
  border: 1px solid rgba(255, 211, 106, .62);
  background: rgba(20, 17, 14, .62);
  box-shadow: 0 0 3rem rgba(255, 211, 106, .32);
  transition: top .18s linear;
}
.ledge { position: absolute; max-width: 31rem; }
.ledge-one { right: 7vw; top: 18vh; }
.ledge-two { left: 7vw; bottom: 19vh; max-width: 24rem; }
.proof-label { position: absolute; font-family: var(--space); color: rgba(214, 168, 79, .55); letter-spacing: .12em; font-size: .7rem; }
.label-a { left: 18vw; top: 28vh; } .label-b { right: 18vw; bottom: 28vh; }

.gilded-exit { background: radial-gradient(circle at 58% 45%, rgba(255, 211, 106, .18), transparent 24rem), linear-gradient(180deg, var(--graphite), var(--marble)); }
.halo {
  position: absolute;
  width: min(46vw, 38rem);
  height: min(46vw, 38rem);
  border-radius: 50%;
  right: 7vw;
  top: 17vh;
  background: radial-gradient(circle, rgba(243, 225, 178, .22) 0 14%, rgba(255, 211, 106, .16) 15% 31%, transparent 32% 100%);
  border: 1px solid rgba(255, 211, 106, .34);
  box-shadow: 0 0 7rem rgba(214, 168, 79, .30), inset 0 0 5rem rgba(255, 211, 106, .10);
  transform: scale(var(--halo-scale, 1));
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
  animation: haloBloom 5s ease-in-out infinite alternate;
}
.exit-copy { justify-self: start; margin-left: 5vw; max-width: 39rem; }
.proof-door {
  margin-top: 1.2rem;
  padding: 1rem 1.3rem;
  border: 1px solid rgba(255, 211, 106, .6);
  color: var(--mist);
  background: linear-gradient(90deg, rgba(214, 168, 79, .16), rgba(20, 17, 14, .72));
  font-family: var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 0 1rem rgba(255, 211, 106, .08), 0 0 2rem rgba(214, 168, 79, .16);
}
.proof-door span { position: relative; }
.proof-door span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.42rem; height: 1px; background: var(--molten); transform: scaleX(0); transform-origin: left; transition: transform .45s ease; }
.proof-door:hover span::after, .proof-door.open span::after { transform: scaleX(1); }
.proof-door.open { box-shadow: 0 0 4rem rgba(255, 211, 106, .42); }

@keyframes underlineDraw { from { transform: scaleX(0); opacity: .2; } to { transform: scaleX(1); opacity: 1; } }
@keyframes veinTravel { 0%, 100% { opacity: .18; filter: blur(.5px); } 50% { opacity: .72; filter: blur(0); } }
@keyframes blobDrift { from { transform: translate3d(-1rem, .5rem, 0) rotate(-4deg) scale(.98); } to { transform: translate3d(1.4rem, -1rem, 0) rotate(5deg) scale(1.04); } }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes capsulePulse { 0%, 100% { box-shadow: inset 0 0 2rem rgba(255, 211, 106, .18), 0 0 4rem rgba(214, 168, 79, .28); } 50% { box-shadow: inset 0 0 3rem rgba(255, 211, 106, .32), 0 0 7rem rgba(255, 211, 106, .45); } }
@keyframes haloBloom { from { filter: saturate(.9); } to { filter: saturate(1.25) brightness(1.08); } }

@media (max-width: 900px) {
  :root { --sidebar: 6.5rem; }
  .quest-spine { padding: 1rem .75rem; }
  .spine-title, .link-label, .spine-coordinates { display: none; }
  .quest-spine::before { left: 3.24rem; }
  .spine-track { margin-left: 1.4rem; }
  .copy-panel { max-width: calc(100vw - 9rem); }
  .threshold-copy, .atrium-copy, .exit-copy { margin-left: 0; }
  h2 { font-size: clamp(2.2rem, 10vw, 5rem); }
  .domain-lockup { font-size: clamp(2.7rem, 12vw, 6rem); }
  .capsule-system { transform: translateX(0); }
  .threshold-slab { display: none; }
}