:root {
  /* atmosphere: 11 steps, equal OKLab lightness, #182026 → #CBD4DC */
  --atm-0: #182026; --atm-1: #272F36; --atm-2: #373F46; --atm-3: #475057;
  --atm-4: #596169; --atm-5: #6B737B; --atm-6: #7D868D; --atm-7: #9099A0;
  --atm-8: #A3ACB4; --atm-9: #B7C0C8; --atm-10: #CBD4DC;
  --accent: #F3FF00;
  --caption: 18px; --body: 29px; --list: 47px; --display: 172px;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --glass: rgba(255, 255, 255, .3);
  --glass-shadow: inset 0 -10px 18px rgba(0, 0, 0, .22);
}
.inter { --font: Inter, "Helvetica Neue", Arial, sans-serif; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--atm-0); }
body { font: 400 var(--caption)/1.1 var(--font); color: #fff; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

#stage { position: fixed; inset: 0; z-index: 0; }
#gl { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; will-change: filter, transform; }
#grain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;
  mix-blend-mode: overlay; image-rendering: pixelated; }

/* ---------- hero poster ---------- */
#hero { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
#hero.live { pointer-events: auto; }
.layer { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform, filter, opacity; }
.px { position: absolute; inset: 0; will-change: transform; }
.layer .enter { position: absolute; left: 50%; top: 50%; }
.poster, .topline, .name, .note, .chip, .store-link { letter-spacing: -.08em; line-height: .8; }

.topline { font: 400 var(--list)/.8 var(--font); letter-spacing: -.08em; text-align: center;
  transform: translate(-50%, -205px); }
.name { display: flex; align-items: flex-start; gap: 14px; transform: translate(-50%, -128px); }
.name h1 { font: 400 var(--display)/.8 var(--font); letter-spacing: -.08em; color: var(--glass);
  filter: url(#inset); white-space: nowrap; }
.name sup { font-size: .32em; vertical-align: top; position: relative; top: .1em; margin-left: .06em; }
.glass-dots { display: flex; width: 90px; height: 45px; margin-top: 8px; flex: none; }
.glass-dots i, #logo i { display: block; border-radius: 50%; }
.glass-dots i { width: 45px; height: 45px; background: var(--glass); box-shadow: var(--glass-shadow); }
.glass-dots i + i { margin-left: 0; background: transparent; box-shadow: var(--glass-shadow), inset 0 0 0 9px var(--glass); }

.note { font-size: var(--body); line-height: .8; transform: translate(var(--x), var(--y)); }
.chip { font-size: var(--caption); line-height: 1; letter-spacing: -.02em; background: var(--accent); color: #000;
  padding: 7px 10px 6px; transform: translate(var(--x), var(--y)); white-space: nowrap; }
.store-link { font-size: var(--caption); letter-spacing: -.02em; line-height: 1;
  transform: translate(var(--x), var(--y)); border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* entrance: rise 16px out of a 12px blur, staggered */
.enter { opacity: 0; filter: blur(12px); translate: 0 16px;
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), filter .9s cubic-bezier(.2,.7,.2,1), translate .9s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 60ms); }
.ready .enter { opacity: 1; filter: blur(0); translate: 0 0; }

/* ---------- header ---------- */
#top { position: fixed; inset: 0 0 auto; z-index: 4; display: flex; justify-content: space-between;
  align-items: center; padding: 24px 28px; pointer-events: none; }
#top a { pointer-events: auto; }
#logo { display: flex; mix-blend-mode: difference; }
#logo i { width: 26px; height: 26px; background: #fff; }
#logo i + i { margin-left: -8px; background: transparent; box-shadow: inset 0 0 0 2px #fff; }
#top nav { display: flex; gap: 40px; }

/* ---------- room UI ---------- */
#room-ui { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#back { position: absolute; left: 28px; top: 74px; font-size: var(--caption); opacity: 0;
  transition: opacity .4s; pointer-events: none; }
#back.on { opacity: 1; pointer-events: auto; }
#caption { position: absolute; left: 0; top: 0; background: var(--accent); color: #000; font-size: var(--caption);
  line-height: 1; text-transform: uppercase; padding: 7px 10px 6px; white-space: nowrap; opacity: 0;
  transition: opacity .25s; will-change: transform; }
#caption.on { opacity: 1; }

#tabs { position: absolute; left: 50%; bottom: 0; height: 32px; translate: -50% 110%;
  transition: translate .8s cubic-bezier(.2,.8,.2,1); pointer-events: auto; }
#tabs.on { translate: -50% 0; }
#tabs .row { position: absolute; inset: 0; }
#tabs button { position: absolute; top: 0; height: 32px; border: 0; background: var(--accent); color: #000;
  font: 400 var(--caption)/32px var(--font); padding: 0 12px; cursor: pointer; white-space: nowrap; text-align: center; }
#tabs .ink { position: absolute; top: 0; height: 32px; background: #000; }
#tabs .lit span { position: absolute; top: 0; height: 32px; color: #fff; font: 400 var(--caption)/32px var(--font);
  text-align: center; white-space: nowrap; }
#tabs .ink-row { pointer-events: none; }

/* ---------- preloader ---------- */
#preloader { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; }
#preloader .ground { position: absolute; inset: 0; transition: opacity .7s ease;
  background: linear-gradient(to bottom, var(--atm-0), var(--atm-1), var(--atm-2), var(--atm-3), var(--atm-4),
    var(--atm-5), var(--atm-6), var(--atm-7), var(--atm-8), var(--atm-9), var(--atm-10)); }
#preloader .ring { position: relative; width: 300px; height: 300px; border-radius: 50%; display: grid; place-items: center;
  background: var(--glass); box-shadow: var(--glass-shadow);
  transition: transform .6s cubic-bezier(.3,.6,.2,1), filter .6s ease, opacity .6s ease; }
#pct { font: 400 var(--display)/.8 var(--font); letter-spacing: -.08em; padding-top: .08em; font-variant-numeric: tabular-nums; }
#preloader.exit .ring { transform: scale(1.06); filter: blur(16px); opacity: 0; }
#preloader.exit .ground { opacity: 0; transition-delay: .3s; }
#preloader.gone { display: none; }