:root {
  /* Design typography reference: IBM Plex Mono* Mono** for tiny probability values etched into chrome strips; IBM Plex Sans KR* KR** for bilingual-friendly notes. */
  --deep-table: #08090D;
  --graphite: #111824;
  --hidden-blue: #1A202A;
  --chrome: #C9D0D8;
  --mercury: #F2F5F7;
  --steel: #65717F;
  --amber: #E8A94E;
  --teal: #4FB7B2;
  --violet: #8E7CFF;
  --display: "Libre Baskerville", Georgia, serif;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --note: "IBM Plex Sans KR", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", monospace;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--deep-table);
}

body {
  margin: 0;
  color: var(--chrome);
  font-family: var(--note);
  background:
    radial-gradient(circle at 22% 12%, rgba(79, 183, 178, 0.16), transparent 28rem),
    radial-gradient(circle at 78% 34%, rgba(232, 169, 78, 0.12), transparent 24rem),
    radial-gradient(circle at 52% 78%, rgba(142, 124, 255, 0.10), transparent 32rem),
    linear-gradient(135deg, #08090D 0%, #111824 47%, #08090D 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(96deg, rgba(242,245,247,0.025) 0 1px, transparent 1px 7px),
    linear-gradient(120deg, rgba(101,113,127,0.10), rgba(242,245,247,0.06) 42%, rgba(26,32,42,0.18) 58%, rgba(201,208,216,0.08));
  mix-blend-mode: screen;
  opacity: .55;
  z-index: 1;
}

.grain-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: .34;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(242,245,247,.07) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 60%, rgba(101,113,127,.09) 0 1px, transparent 1px);
  background-size: 19px 23px, 31px 29px;
}

.inspection-lamp {
  position: fixed;
  left: 0;
  top: 0;
  width: 34rem;
  height: 34rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,245,247,.16), rgba(79,183,178,.07) 30%, transparent 68%);
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: screen;
  opacity: .72;
}

.probability-table { position: relative; z-index: 3; }

.station {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(1rem, 1fr) repeat(10, minmax(0, 7.8rem)) minmax(1rem, 1fr);
  align-items: center;
  padding: 8vh 0;
  isolation: isolate;
}

.station::after {
  content: "";
  position: absolute;
  width: 42rem;
  height: 12rem;
  left: 20%;
  bottom: 8%;
  background: radial-gradient(ellipse, rgba(0,0,0,.45), transparent 67%);
  transform: rotate(-8deg);
  z-index: -1;
}

.station-copy {
  max-width: 38rem;
  opacity: .35;
  transform: translateY(2rem) rotate(-1deg);
  transition: opacity .9s ease, transform .9s ease;
}

.station.in-view .station-copy,
.station-copy.is-lit {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--amber);
  font: 500 .78rem/1.5 var(--note);
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  color: var(--mercury);
  letter-spacing: -.055em;
}

h2 {
  font-size: clamp(3rem, 7vw, 7.4rem);
  line-height: .98;
  text-shadow: 0 1rem 4rem rgba(0,0,0,.55);
}

p {
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  line-height: 1.75;
  color: var(--chrome);
}

.lead {
  max-width: 34rem;
  margin-top: 1.45rem;
  color: var(--chrome);
}

.wordmark {
  position: relative;
  font-size: clamp(4.6rem, 11vw, 13rem);
  line-height: .82;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201,208,216,.22);
  background: linear-gradient(120deg, #65717F, #F2F5F7 42%, #1A202A 58%, #C9D0D8);
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 2rem 3rem rgba(0,0,0,.72));
  animation: chromeSweep 8s ease-in-out infinite;
}

.wordmark::after {
  content: attr(data-text);
  position: absolute;
  inset: .08em 0 auto .02em;
  color: rgba(8,9,13,.55);
  z-index: -1;
}

.opening-copy { grid-column: 2 / 8; align-self: start; margin-top: 7vh; }
.opening-cluster { grid-column: 7 / 12; grid-row: 1; min-height: 36rem; }
.could-copy { grid-column: 3 / 7; grid-row: 1; }
.sheets-cluster { grid-column: 7 / 12; grid-row: 1; min-height: 42rem; }
.rhythm-cluster { grid-column: 2 / 8; grid-row: 1; min-height: 42rem; }
.usually-copy { grid-column: 7 / 12; grid-row: 1; }
.surprises-copy { grid-column: 2 / 7; grid-row: 1; }
.compartment-cluster { grid-column: 7 / 12; grid-row: 1; min-height: 40rem; }
.closing-copy { grid-column: 6 / 12; grid-row: 1; }
.constellation { grid-column: 2 / 8; grid-row: 1; min-height: 35rem; }

.artifact-cluster, .constellation { position: relative; }

.chrome-coin {
  position: absolute;
  width: clamp(16rem, 26vw, 27rem);
  height: clamp(16rem, 26vw, 27rem);
  right: 6%;
  top: 12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 28%, #F2F5F7, #C9D0D8 18%, #65717F 36%, #1A202A 58%, #C9D0D8 74%, #08090D 100%);
  box-shadow: inset -1.2rem -1.4rem 3rem rgba(8,9,13,.72), inset .7rem .7rem 1.4rem rgba(242,245,247,.45), 0 3rem 5rem rgba(0,0,0,.62);
  transform: rotate(-14deg);
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}

.chrome-coin::after {
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  border: 1px dashed rgba(8,9,13,.42);
  box-shadow: inset 0 0 0 1.1rem rgba(242,245,247,.08);
}

.coin-ring {
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background: conic-gradient(from 40deg, var(--teal) 0 22%, transparent 22% 35%, var(--amber) 35% 48%, transparent 48% 100%);
  -webkit-mask: radial-gradient(circle, transparent 61%, black 62% 66%, transparent 67%);
  mask: radial-gradient(circle, transparent 61%, black 62% 66%, transparent 67%);
}

.coin-value {
  position: absolute;
  left: 24%; top: 43%;
  font: 600 clamp(2.7rem, 5vw, 5.3rem)/1 var(--serif);
  color: rgba(8,9,13,.78);
  letter-spacing: -.04em;
}

.coin-caption {
  position: absolute;
  left: -16%;
  bottom: 3%;
  max-width: 15rem;
  padding: .85rem 1rem;
  background: rgba(8,9,13,.7);
  color: var(--mercury);
  border: 1px solid rgba(201,208,216,.28);
  border-radius: 999px;
  font: 400 .86rem/1.45 var(--note);
  opacity: 0;
  transform: translateY(.7rem);
  transition: opacity .5s ease, transform .5s ease;
}

.chrome-coin.flipped { transform: rotateY(24deg) rotate(-5deg) translateY(-1rem); }
.chrome-coin.flipped .coin-caption { opacity: 1; transform: translateY(0); }

.torn-note {
  position: absolute;
  left: 8%; bottom: 10%;
  width: 15rem;
  padding: 1.6rem 1.4rem;
  color: #1A202A;
  background: linear-gradient(150deg, rgba(242,245,247,.86), rgba(201,208,216,.62));
  clip-path: polygon(0 7%, 95% 0, 100% 90%, 85% 100%, 10% 93%);
  font: 700 2.5rem/1 var(--serif);
  transform: rotate(10deg);
  box-shadow: 0 2rem 3rem rgba(0,0,0,.4);
}

.torn-note small { font: 500 .78rem/1.3 var(--note); color: #65717F; }

.maybe-lines {
  position: absolute;
  inset: 1rem auto auto -3rem;
  width: 42rem;
  max-width: 105%;
  fill: none;
  stroke: rgba(79,183,178,.44);
  stroke-width: 1.2;
  stroke-dasharray: 7 11;
  filter: drop-shadow(0 0 1rem rgba(79,183,178,.18));
}

.probability-sheet {
  position: absolute;
  width: min(34rem, 80vw);
  min-height: 15rem;
  padding: 2rem;
  border: 1px solid rgba(242,245,247,.28);
  border-radius: 1.4rem;
  background: linear-gradient(135deg, rgba(242,245,247,.16), rgba(79,183,178,.10) 45%, rgba(26,32,42,.36));
  backdrop-filter: blur(12px);
  box-shadow: 0 2rem 4rem rgba(0,0,0,.36), inset 0 0 0 1px rgba(242,245,247,.05);
  transition: transform 1s cubic-bezier(.2,.7,.2,1), opacity .7s ease;
}

.probability-sheet::after {
  content: attr(data-exact);
  position: absolute;
  right: 1.4rem;
  bottom: 1rem;
  color: var(--mercury);
  font: 600 4.2rem/1 var(--serif);
  opacity: .22;
}

.probability-sheet b { display: block; color: var(--mercury); font: 700 1.25rem/1.3 var(--display); }
.probability-sheet span { display: block; margin-top: 3rem; max-width: 18rem; color: var(--chrome); }
.probability-sheet em { position: absolute; top: 1.2rem; right: 1.3rem; color: var(--amber); font: 500 .9rem/1 var(--note); }
.sheet-a { top: 12%; left: 2%; transform: rotate(-8deg); }
.sheet-b { top: 22%; left: 10%; transform: rotate(4deg); }
.sheet-c { top: 33%; left: 18%; transform: rotate(13deg); }
.could-station.in-view .sheet-a { transform: translate(-3rem, -1rem) rotate(-13deg); }
.could-station.in-view .sheet-b { transform: translate(2rem, .4rem) rotate(2deg); }
.could-station.in-view .sheet-c { transform: translate(5.5rem, 2.2rem) rotate(14deg); }

.percentile-strip {
  position: absolute;
  left: 0; bottom: 11%;
  width: 31rem; height: 3.4rem;
  border-radius: 999px;
  background: linear-gradient(120deg, #65717F, #F2F5F7 42%, #1A202A 58%, #C9D0D8);
  box-shadow: 0 1.6rem 3rem rgba(0,0,0,.45);
  display: flex;
  justify-content: space-around;
  align-items: center;
  transform: rotate(-5deg);
}
.percentile-strip i { width: 1px; height: 1.4rem; background: rgba(8,9,13,.6); }
.amber-annotation { position: absolute; right: 4%; bottom: 2%; color: var(--amber); font-size: .94rem; transform: rotate(6deg); }

.trial-piece {
  position: absolute;
  display: grid;
  place-items: center;
  color: rgba(8,9,13,.75);
  font: 600 2rem/1 var(--serif);
  background: linear-gradient(120deg, #65717F, #F2F5F7 42%, #1A202A 58%, #C9D0D8);
  box-shadow: 0 2.2rem 4rem rgba(0,0,0,.48), inset .2rem .2rem 1rem rgba(242,245,247,.28);
  animation: drift 7s ease-in-out infinite;
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.hexagon { width: 11rem; height: 10rem; left: 8%; top: 9%; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.triangle { width: 12rem; height: 12rem; left: 42%; top: 17%; clip-path: polygon(50% 0, 100% 100%, 0 100%); animation-delay: -1s; }
.circle { width: 10rem; height: 10rem; left: 24%; top: 49%; border-radius: 50%; animation-delay: -2s; }
.wedge { width: 13rem; height: 13rem; right: 12%; top: 48%; border-radius: 50%; clip-path: polygon(50% 50%, 100% 0, 100% 100%); animation-delay: -3s; }
.bar { width: 16rem; height: 5rem; left: 5%; bottom: 8%; border-radius: 999px; animation-delay: -4s; }
.usually-station.in-view .hexagon { transform: translate(1rem, 1rem) rotate(17deg); }
.usually-station.in-view .triangle { transform: translate(-1rem, 2rem) rotate(-11deg); }
.usually-station.in-view .circle { transform: translate(2rem, -1rem) rotate(8deg); }
.usually-station.in-view .wedge { transform: translate(-2rem, -2rem) rotate(32deg); }
.usually-station.in-view .bar { transform: translate(4rem, -.5rem) rotate(-4deg); }

.dice-shadow { position: absolute; width: 9rem; height: 9rem; background: rgba(0,0,0,.32); filter: blur(1rem); transform: rotate(13deg); }
.dice-shadow.one { left: 15%; top: 34%; }
.dice-shadow.two { right: 11%; bottom: 16%; }
blockquote { margin: 2rem 0 0; color: var(--teal); font: 500 2.2rem/1.15 var(--serif); }

.chrome-drawer {
  position: absolute;
  width: min(34rem, 82vw);
  height: 22rem;
  left: 8%; top: 23%;
  perspective: 900px;
}
.drawer-lid, .drawer-inside {
  position: absolute;
  inset: 0;
  border-radius: 2rem;
  background: linear-gradient(120deg, #65717F, #F2F5F7 42%, #1A202A 58%, #C9D0D8);
  box-shadow: 0 3rem 5rem rgba(0,0,0,.55), inset 0 0 0 1px rgba(242,245,247,.28);
}
.drawer-lid {
  transform-origin: 50% 0;
  display: grid;
  place-items: center;
  color: rgba(8,9,13,.74);
  font: 700 4rem/1 var(--serif);
  transition: transform 1s cubic-bezier(.2,.7,.2,1);
  z-index: 2;
}
.drawer-inside {
  inset: 2rem;
  display: grid;
  place-items: center;
  text-align: center;
  background: radial-gradient(circle at center, rgba(142,124,255,.45), rgba(26,32,42,.88) 62%, #08090D);
  border: 1px solid rgba(142,124,255,.48);
}
.drawer-inside strong { font: 700 6.8rem/1 var(--serif); color: var(--violet); text-shadow: 0 0 2rem rgba(142,124,255,.45); }
.drawer-inside p { margin: -1.7rem 0 0; color: var(--mercury); }
.surprises-station.in-view .drawer-lid, .chrome-drawer.open .drawer-lid { transform: rotateX(-67deg) translateY(-.6rem); }

.mirror-shard {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 1rem;
  color: rgba(8,9,13,.78);
  font: 600 .9rem/1.2 var(--note);
  text-transform: uppercase;
  letter-spacing: .08em;
  background: linear-gradient(120deg, rgba(101,113,127,.95), rgba(242,245,247,.95) 42%, rgba(26,32,42,.9) 58%, rgba(201,208,216,.95));
  box-shadow: 0 1.8rem 3rem rgba(0,0,0,.45);
  transition: transform .8s ease, filter .8s ease;
}
.shard-one { width: 9rem; height: 5rem; right: 10%; top: 9%; clip-path: polygon(10% 0, 100% 20%, 80% 100%, 0 78%); transform: rotate(20deg); }
.shard-two { width: 12rem; height: 6rem; left: -2%; bottom: 16%; clip-path: polygon(0 20%, 80% 0, 100% 76%, 18% 100%); transform: rotate(-16deg); }
.shard-three { width: 8rem; height: 8rem; right: 4%; bottom: 8%; clip-path: polygon(45% 0, 100% 42%, 58% 100%, 0 62%); transform: rotate(8deg); }
.surprises-station.in-view .mirror-shard { filter: brightness(1.28); }

.constellation { position: relative; }
.constellation svg { position: absolute; inset: 5% auto auto 0; width: 100%; height: 80%; fill: none; stroke: rgba(232,169,78,.42); stroke-width: 1.4; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.6s ease; }
.closing-station.in-view .constellation svg { stroke-dashoffset: 0; }
.star {
  position: absolute;
  color: var(--mercury);
  font-family: var(--serif);
  font-size: 1.7rem;
  text-shadow: 0 0 1.5rem rgba(242,245,247,.4);
  transition: transform 1.3s ease, color .8s ease;
}
.s1 { left: 8%; top: 62%; } .s2 { left: 28%; top: 26%; } .s3 { left: 48%; top: 48%; color: var(--violet); }
.s4 { left: 70%; top: 14%; } .s5 { left: 82%; top: 63%; color: var(--teal); } .s6 { left: 18%; top: 78%; color: var(--amber); } .s7 { left: 64%; top: 78%; }
.closing-station.in-view .star { transform: translateY(-.7rem) scale(1.05); }
.final-mark { margin-top: 2rem; color: var(--amber); font: 700 2.1rem/1 var(--display); }

.chance-nav {
  position: fixed;
  right: 2rem;
  top: 50%;
  width: 8rem;
  height: 8rem;
  transform: translateY(-50%);
  z-index: 6;
  border: 1px solid rgba(201,208,216,.22);
  border-radius: 50%;
  background: rgba(8,9,13,.38);
  backdrop-filter: blur(10px);
}
.nav-tick {
  position: absolute;
  left: 50%; top: 50%;
  width: .55rem; height: .55rem;
  margin: -.275rem;
  border-radius: 50%;
  background: var(--steel);
  text-decoration: none;
  color: var(--chrome);
  transition: background .3s ease, box-shadow .3s ease;
}
.nav-tick span { position: absolute; left: 1rem; top: -.35rem; font: 500 .7rem/1 var(--mono); opacity: .7; }
.nav-tick:nth-child(1) { transform: rotate(-92deg) translateX(3.8rem); }
.nav-tick:nth-child(2) { transform: rotate(-28deg) translateX(3.8rem); }
.nav-tick:nth-child(3) { transform: rotate(36deg) translateX(3.8rem); }
.nav-tick:nth-child(4) { transform: rotate(100deg) translateX(3.8rem); }
.nav-tick:nth-child(5) { transform: rotate(164deg) translateX(3.8rem); }
.nav-tick.active { background: var(--amber); box-shadow: 0 0 1.3rem rgba(232,169,78,.6); }

@keyframes chromeSweep { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes drift { 0%,100% { translate: 0 0; } 50% { translate: .7rem -1rem; } }

@media (max-width: 860px) {
  .station { display: block; padding: 7rem 1.25rem; min-height: auto; }
  .station-copy { max-width: none; margin: 0 0 2rem; }
  .artifact-cluster, .constellation { min-height: 31rem; }
  .chance-nav { right: .8rem; transform: translateY(-50%) scale(.78); }
  h2 { font-size: clamp(2.8rem, 14vw, 5rem); }
  .wordmark { font-size: clamp(3.4rem, 18vw, 6.5rem); }
  .probability-sheet { width: 80vw; }
  .sheet-a { left: 0; } .sheet-b { left: 5%; } .sheet-c { left: 10%; }
  .chrome-drawer { left: 0; }
}