/* TalentFesto landing v3: "a dark stage that lights up as you scroll".
   Same-origin stylesheet (the site CSP has no 'unsafe-inline'): no inline styles anywhere in the page;
   per-element values come from classes, or from main.js through the CSSOM.

   Layers: this file alone renders the complete page (JS off, reduced motion). main.js adds .js on <html>, then
   .motion (and .lu-on) when motion is allowed; everything under .motion is the scroll-driven version of a state
   this file already shows.

   v3: one centred container (.wrap / .stage-in) carries every section, so all copy shares one left edge and the
   side gutter grows with the screen. The phones are drawn in HTML and CSS (.ui), scaled with container-query
   units (--u is one point of a 390-point screen), so they stay sharp at any size and any browser zoom. */

/* ---------- metric-matched fallbacks: the swap to Mona Sans / Inter must not move the H1 (CLS) ---------- */
@font-face{font-family:"Mona Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Roboto");
  size-adjust:102.3%;ascent-override:106.5%;descent-override:31.3%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Roboto");
  size-adjust:107.4%;ascent-override:90.3%;descent-override:22.3%;line-gap-override:0%}

:root{
  color-scheme:dark;
  /* grounds = lighting states, and they are visibly different on purpose */
  --stage:#05010F;      /* blackout: hero, scoreboard, finale, footer */
  --cine:#000000;       /* cinema: Watch */
  --bg:#0A0320;         /* stage wash: line-up, how it works */
  --lit:#27136F;        /* the lit stage: the Hunts arena */
  --studio:#191820;     /* graphite: Create */
  --night:#070C22;      /* night: Discover */
  --surface:#140A2E; --raised:#1C1238;
  --house:#F3ECE4;      /* house lights up: In control (a light ground) */
  --hair:rgba(255,255,255,.08); --hair-2:rgba(255,255,255,.14);
  /* ink (web values: ink-3 lifted above the app's .44 so small text passes 4.5:1) */
  --ink:#F5F3FA; --ink-2:rgba(245,243,250,.7); --ink-3:rgba(245,243,250,.56); --ink-dim:rgba(245,243,250,.12);
  /* one accent: #6624F1 fills only, #A58BFF text and lines */
  --accent:#6624F1; --accent-hover:#7435F6; --accent-ink:#A58BFF;
  --live:#D93A40; --warn:#F2B54D;
  --brand:linear-gradient(135deg,#5813E9 0%,#E52EF6 45%,#F33177 65%,#FB7E29 100%);   /* the logo ring and the drawn Create ring only */
  /* type */
  --f:Inter,"Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans","Noto Sans Devanagari",sans-serif;
  --fd:"Mona Sans","Mona Fallback",Inter,Arial,sans-serif;
  /* motion */
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.42,.64,1);
  /* layout: one centred container; the gutter grows with the screen (20px on phones, 104px at most) */
  --gut:clamp(20px,5vw,104px);
  --maxw:1680px;
  --colgap:clamp(16px,2vw,32px);
  --nav-h:56px;
  /* type scale: H2 (chapters), display (Watch, the curtain call), body, fine */
  --fs-h2:clamp(1.9rem,8.6vw,2.6rem);
  --fs-disp:clamp(2.4rem,11vw,3.4rem);
  --fs-lead:1.0625rem;
  --fs-body:1rem; --lh-body:1.5;
  --fs-fine:.8125rem;
}
@media (min-width:960px){:root{--nav-h:64px;--fs-h2:clamp(2.25rem,3.3vw,4.25rem);--fs-disp:clamp(2.75rem,5.4vw,6.5rem);
  --fs-lead:clamp(1.0625rem,.45vw + .78rem,1.3125rem);--fs-body:clamp(1rem,.42vw + .67rem,1.1875rem);--lh-body:1.55;
  --fs-fine:clamp(.8125rem,.18vw + .62rem,.9375rem)}}
@media (min-width:2200px){:root{--maxw:1840px}}

*,*::before,*::after{box-sizing:border-box}
html{background-color:var(--stage);color:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%;
  overflow-x:hidden;transition:background-color .6s var(--ease)}
@supports (overflow:clip){html{overflow-x:clip}}
html[data-ground="cine"]{background-color:var(--cine)}
html[data-ground="bg"]{background-color:var(--bg)}
html[data-ground="lit"]{background-color:var(--lit)}
html[data-ground="studio"]{background-color:var(--studio)}
html[data-ground="night"]{background-color:var(--night)}
html[data-ground="surface"]{background-color:var(--surface)}
body{margin:0;background:transparent;font:400 16px/24px var(--f);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility}
@media (prefers-reduced-motion:no-preference){html:not(.lenis){scroll-behavior:smooth}}
img{max-width:100%}
main,.foot{overflow-x:clip}
a{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:min(100% - 2 * var(--gut),var(--maxw));margin-inline:auto}
.skip{position:absolute;left:var(--gut);top:-80px;z-index:100;padding:10px 16px;border-radius:20px;background:var(--accent);
  color:#fff;font:700 14px/20px var(--f);text-decoration:none}
.skip:focus{top:calc(8px + env(safe-area-inset-top,0px))}
.i{width:20px;height:20px;flex:none;display:block;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* no JS: each chapter paints its own ground (with JS the <html> ground crossfades instead) */
.no-js [data-ground="stage"]{background:var(--stage)}
.no-js [data-ground="cine"]{background:var(--cine)}
.no-js [data-ground="bg"]{background:var(--bg)}
.no-js [data-ground="lit"]{background:var(--lit)}
.no-js [data-ground="studio"]{background:var(--studio)}
.no-js [data-ground="night"]{background:var(--night)}
.no-js [data-ground="surface"]{background:var(--surface)}

/* ---------- lenis (its six rules, copied here: the CDN stylesheet would be blocked by the CSP) ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}

/* ================= type ================= */
.h1{margin:0;font-family:var(--fd);font-weight:700;font-stretch:100%;font-size:13.2vw;line-height:.9;letter-spacing:-.045em}
.h1-l{display:block}
.h1 .l2 .w{display:block}
.h2{margin:0;font-family:var(--fd);font-weight:700;font-stretch:100%;font-size:var(--fs-h2);line-height:1;letter-spacing:-.035em;text-wrap:balance;max-width:14ch}
.h2.display{font-size:var(--fs-disp);line-height:.94;max-width:12ch}
.h3x{margin:0;font-family:var(--fd);font-weight:700;font-stretch:100%;font-size:clamp(1.6rem,6.4vw,2.2rem);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
@media (min-width:960px){.h3x{font-size:clamp(2rem,2.9vw,3.4rem)}}
.lead{margin:0;font-size:var(--fs-lead);line-height:1.5;color:var(--ink-2);max-width:36ch}
.body{margin:16px 0 0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-2);max-width:34em}
.body-s{margin:0;font-size:calc(var(--fs-body) * .94);line-height:1.5;color:var(--ink-2)}
.fine{margin:0;font-size:var(--fs-fine);line-height:1.45;color:var(--ink-3)}
.try{display:flex;align-items:center;gap:8px;margin:0;font:500 14px/20px var(--f);color:var(--accent-ink)}
.try .i{width:18px;height:18px}

/* ================= nav: logo, four links, one filled CTA. Flat. ================= */
.nav{position:fixed;z-index:50;top:0;left:0;right:0;padding-top:env(safe-area-inset-top,0px);
  border-bottom:1px solid transparent;transition:background-color .32s var(--ease),border-color .32s var(--ease),transform .32s var(--ease)}
.nav.is-solid,.no-js .nav{background:rgba(10,3,32,.92);border-bottom-color:rgba(255,255,255,.08)}
.nav.is-hidden{transform:translateY(-101%)}
.nav-in{height:var(--nav-h);display:flex;align-items:center;gap:28px;width:min(100% - 2 * var(--gut),var(--maxw));margin-inline:auto}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;color:#F5F3FA;text-decoration:none;
  font:700 17px/22px var(--f);letter-spacing:-.01em}
.brand img{width:28px;height:28px;display:block}
.nav-links{display:none;align-items:center;gap:28px}
.nav-links a{position:relative;padding:10px 0;color:rgba(245,243,250,.7);text-decoration:none;font:500 14px/20px var(--f);transition:color .2s var(--ease)}
.nav-links a:hover,.nav-links a.on{color:#F5F3FA}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:#A58BFF;transform:scaleX(0);transform-origin:0 50%;transition:transform .32s var(--ease)}
.nav-links a.on::after{transform:none}
.cta{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:18px;background:var(--accent);color:#fff;
  text-decoration:none;font:700 13px/1 var(--f);white-space:nowrap;transition:background-color .2s var(--ease)}
.cta:hover{background:var(--accent-hover)}
.cta-l{display:inline-block}
.nav-progress{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#A58BFF;transform-origin:0 50%;transform:scaleX(0);opacity:0;transition:opacity .32s}
.motion .nav.is-solid .nav-progress{opacity:1}
@media (min-width:960px){.nav-links{display:flex}.cta{height:40px;padding:0 18px;border-radius:20px;font-size:14px}}

/* ================= store buttons (state S1: Google Play is live; the App Store one waits behind APP_STORE_LIVE) ================= */
.stores{display:flex;flex-wrap:wrap;gap:12px}
.store{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 24px 0 19px;border-radius:28px;background:var(--accent);color:#fff;
  text-decoration:none;white-space:nowrap;transition:background-color .2s var(--ease)}
.store:hover{background:var(--accent-hover)}
.store .i{width:20px;height:20px;stroke-width:0;fill:currentColor}
.store .cta-l{display:flex;flex-direction:column;gap:2px}
.store small{font:500 12px/14px var(--f);color:rgba(255,255,255,.82)}
.store b{font:700 18px/20px var(--f);letter-spacing:-.01em}
.store-ios{background:var(--raised);border:1px solid var(--hair-2)}
.store-ios:hover{background:#251a47}
.store-xl{height:64px;border-radius:32px;padding:0 30px 0 24px;gap:14px}
.store-xl .i{width:22px;height:22px}
.store-xl b{font-size:20px;line-height:22px}
.tlink{display:inline-flex;align-items:center;gap:6px;color:var(--accent-ink);text-decoration:none;font:500 15px/22px var(--f)}
.tlink .i{width:18px;height:18px}
.tlink .cta-l{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .32s var(--ease)}
.tlink:hover .cta-l{background-size:100% 1px}

/* ================= the phone: one family everywhere ================= */
/* A titanium rim (the border, a metal gradient), a thin black bezel, two volume keys and a side key, and a faint
   reflection across the glass. No drop shadow (house rule): the room's light is the only depth. */
.phone{--pw:var(--phw,280px);--rim:calc(var(--pw) * .0085);--bz:calc(var(--pw) * .026);
  position:relative;flex:none;width:var(--pw);padding:var(--bz);border:var(--rim) solid transparent;border-radius:calc(var(--pw) * .165);
  background:linear-gradient(#030207,#030207) padding-box,
    linear-gradient(152deg,#a59ec2 0%,#3d3854 7%,#18151f 26%,#0b0a10 50%,#1a1724 73%,#403a57 90%,#aaa3c6 100%) border-box;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.phone::before,.phone::after{content:"";position:absolute;z-index:-1;width:calc(var(--rim) + var(--pw) * .009);border-radius:calc(var(--pw) * .006)}
.phone::before{right:100%;top:20%;height:15%;background:linear-gradient(180deg,#4a4562 0 43%,transparent 43% 57%,#4a4562 57% 100%)}
.phone::after{left:100%;top:25%;height:9.5%;background:#4a4562}
.screen{position:relative;aspect-ratio:390 / 844;border-radius:calc(var(--pw) * .1305);overflow:hidden;background:var(--bg);isolation:isolate;
  container-type:inline-size;--u:calc(100cqi / 390);transform:translateZ(0)}
.screen::after{content:"";position:absolute;inset:0;z-index:40;pointer-events:none;border-radius:inherit;
  background:linear-gradient(118deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.04) 19%,rgba(255,255,255,0) 33%)}

/* ---------- the in-phone UI: a landing-grade rendition of the app (same structure, fewer and larger labels) ---------- */
.ui{position:absolute;inset:0;overflow:hidden;padding-top:calc(54 * var(--u));background:var(--bg);color:var(--ink);
  font:400 calc(15 * var(--u))/1.35 var(--f);letter-spacing:0}
.ui img{display:block}
.ui .i{width:calc(24 * var(--u));height:calc(24 * var(--u))}
.screen[data-screens]>.ui[data-k]{opacity:0;transform:scale(.985);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.screen[data-screens]>.ui[data-k].on{opacity:1;transform:none}
.u-px{padding-inline:calc(16 * var(--u))}
.u-mx{margin-inline:calc(16 * var(--u))}
/* materials (no live blur inside phones: the fill, rim and sheen read as glass and cost nothing) */
.u-glass{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 55%),rgba(28,18,56,.8);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.u-clear{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.02) 60%),rgba(16,10,34,.36);border:1px solid rgba(255,255,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
/* status bar, island, home indicator */
.u-sb{position:absolute;z-index:30;left:0;right:0;top:0;height:calc(54 * var(--u));display:flex;align-items:center;justify-content:space-between;
  padding:calc(3 * var(--u)) calc(30 * var(--u)) 0 calc(46 * var(--u));color:#fff;pointer-events:none}
.u-sb b{font:700 calc(16.5 * var(--u))/1 var(--f);letter-spacing:-.01em}
.u-sbi{display:flex;align-items:center;gap:calc(5 * var(--u))}
.u-sbi svg{display:block;height:calc(12 * var(--u));fill:currentColor;color:#fff}
.u-sbi .sb-s{width:calc(18 * var(--u))}
.u-sbi .sb-w{width:calc(16 * var(--u))}
.u-sbi .sb-b{width:calc(27 * var(--u));height:calc(13 * var(--u))}
.u-isl{position:absolute;z-index:31;left:50%;top:calc(11 * var(--u));width:calc(122 * var(--u));height:calc(36 * var(--u));transform:translateX(-50%);border-radius:calc(18 * var(--u));background:#000}
.u-hi{position:absolute;z-index:31;left:50%;bottom:calc(8 * var(--u));width:calc(134 * var(--u));height:calc(5 * var(--u));transform:translateX(-50%);border-radius:calc(3 * var(--u));background:rgba(255,255,255,.88)}
/* controls */
.u-circ{display:grid;place-items:center;flex:none;width:calc(42 * var(--u));height:calc(42 * var(--u));border-radius:50%;color:#fff}
.u-circ .i{width:calc(22 * var(--u));height:calc(22 * var(--u))}
.u-circ-s{width:calc(34 * var(--u));height:calc(34 * var(--u))}
.u-circ-s .i{width:calc(17 * var(--u));height:calc(17 * var(--u))}
.u-btn{display:inline-flex;align-items:center;justify-content:center;gap:calc(7 * var(--u));height:calc(42 * var(--u));padding:0 calc(18 * var(--u));border-radius:calc(21 * var(--u));
  background:var(--accent);color:#fff;font:700 calc(15 * var(--u))/1 var(--f);white-space:nowrap}
.u-btn .i{width:calc(19 * var(--u));height:calc(19 * var(--u))}
.u-btn-sm{height:calc(34 * var(--u));padding:0 calc(15 * var(--u));font-size:calc(14 * var(--u))}
.u-btn-l{display:flex;width:100%;height:calc(54 * var(--u));border-radius:calc(27 * var(--u));font-size:calc(17 * var(--u))}
.u-btn-g{background:none}
.u-btn-g.u-glass{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 55%),rgba(28,18,56,.8)}
.u-seg{position:relative;z-index:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);height:calc(44 * var(--u));margin-inline:calc(16 * var(--u));
  padding:calc(4 * var(--u));border-radius:calc(22 * var(--u))}
.u-seg>span{position:relative;display:flex;align-items:center;justify-content:center;gap:calc(6 * var(--u));border-radius:calc(18 * var(--u));
  font:500 calc(15 * var(--u))/1 var(--f);color:var(--ink-2);white-space:nowrap}
.u-seg>span.on{color:#fff;font-weight:700}
.u-seg .i{width:calc(18 * var(--u));height:calc(18 * var(--u))}
.u-seg>span.on::before,.u-tabs>span.on::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 60%),#6129E6;border:1px solid rgba(190,170,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.u-tabs{position:absolute;z-index:12;left:calc(16 * var(--u));right:calc(16 * var(--u));bottom:calc(26 * var(--u));height:calc(64 * var(--u));
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;padding:0 calc(5 * var(--u));border-radius:calc(32 * var(--u))}
.u-tabs>span{position:relative;display:flex;align-items:center;justify-content:center;height:calc(54 * var(--u));border-radius:calc(27 * var(--u));color:rgba(245,243,250,.74)}
.u-tabs>span .i{width:calc(27 * var(--u));height:calc(27 * var(--u))}
.u-tabs>span.on{color:#fff}
.u-tabs>span.on .i{fill:currentColor;fill-opacity:.3}
.u-tabs>span.on::before{inset:0 calc(2 * var(--u))}
.u-create i{display:block;width:calc(46 * var(--u));height:calc(46 * var(--u));padding:calc(2.5 * var(--u));border-radius:50%;background:var(--brand)}
.u-create b{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#140A2E;color:#fff}
.u-create b .i{width:calc(22 * var(--u));height:calc(22 * var(--u));stroke-width:2}
.u-chip{display:inline-flex;align-items:center;gap:calc(6 * var(--u));flex:none;height:calc(38 * var(--u));padding:0 calc(14 * var(--u)) 0 calc(11 * var(--u));border-radius:calc(19 * var(--u));
  background:var(--raised);border:1px solid var(--hair);font:500 calc(15 * var(--u))/1 var(--f);color:var(--ink);white-space:nowrap}
.u-chip .i{width:calc(18 * var(--u));height:calc(18 * var(--u))}
.u-chip.sel{background:var(--accent);border-color:transparent;color:#fff}
.u-mchip{display:inline-flex;align-items:center;gap:calc(6 * var(--u));height:calc(32 * var(--u));padding:0 calc(13 * var(--u)) 0 calc(10 * var(--u));border-radius:calc(16 * var(--u));
  font:500 calc(14 * var(--u))/1 var(--f);color:#fff;white-space:nowrap}
.u-mchip .i{width:calc(17 * var(--u));height:calc(17 * var(--u))}
.u-av{display:grid;place-items:center;flex:none;width:calc(38 * var(--u));height:calc(38 * var(--u));border-radius:50%;background:#2a1d4a;border:1px solid rgba(255,255,255,.2);
  font:700 calc(16 * var(--u))/1 var(--f);color:#fff}
.u-ic{display:grid;place-items:center;flex:none;width:calc(38 * var(--u));height:calc(38 * var(--u));border-radius:calc(11 * var(--u));background:rgba(165,139,255,.14);color:var(--accent-ink)}
.u-ic .i{width:calc(21 * var(--u));height:calc(21 * var(--u))}
.u-sect{display:flex;align-items:baseline;justify-content:space-between;margin:calc(22 * var(--u)) 0 calc(12 * var(--u))}
.u-sect b{font:700 calc(20 * var(--u))/1.2 var(--f);letter-spacing:-.015em}
.u-sect span{font:500 calc(15 * var(--u))/1 var(--f);color:var(--accent-ink)}
.u-lthead{display:flex;align-items:center;justify-content:space-between;min-height:calc(52 * var(--u))}
.u-lt{display:block;font:700 calc(40 * var(--u))/1 var(--fd);font-stretch:100%;letter-spacing:-.035em}
.u-sub{display:block;margin-top:calc(6 * var(--u));font:500 calc(15 * var(--u))/1.2 var(--f);color:var(--ink-2)}
.u-tile{position:relative;border-radius:calc(16 * var(--u));overflow:hidden;background:var(--raised)}
.u-tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.u-dur{position:absolute;left:calc(8 * var(--u));top:calc(8 * var(--u));display:inline-flex;align-items:center;gap:calc(4 * var(--u));height:calc(26 * var(--u));padding:0 calc(9 * var(--u)) 0 calc(7 * var(--u));
  border-radius:calc(13 * var(--u));font:700 calc(13 * var(--u))/1 var(--f);color:#fff;font-variant-numeric:tabular-nums}
.u-dur .i{width:calc(12 * var(--u));height:calc(12 * var(--u))}
.u-mas{display:grid;grid-template-columns:1fr 1fr;gap:calc(8 * var(--u));align-items:start}
.u-col{display:flex;flex-direction:column;gap:calc(8 * var(--u))}
.u-tile.r916{aspect-ratio:9 / 16}
.u-tile.r11{aspect-ratio:1}
.u-tile.r43{aspect-ratio:4 / 3}
.u-tile.r23{aspect-ratio:2 / 3}
.u-tile.r45{aspect-ratio:4 / 5}
.u-group{border-radius:calc(18 * var(--u));background:var(--surface);border:1px solid var(--hair);overflow:hidden}
.u-row{display:flex;align-items:center;gap:calc(12 * var(--u));min-height:calc(62 * var(--u));padding:calc(10 * var(--u)) calc(14 * var(--u))}
.u-row+.u-row{border-top:1px solid var(--hair)}
.u-rt{display:flex;flex-direction:column;gap:calc(3 * var(--u));flex:1;min-width:0}
.u-rt b{font:500 calc(16 * var(--u))/1.25 var(--f)}
.u-rt small{font:400 calc(13.5 * var(--u))/1.3 var(--f);color:var(--ink-2)}
.u-sw{position:relative;flex:none;width:calc(50 * var(--u));height:calc(30 * var(--u));border-radius:calc(15 * var(--u));background:rgba(255,255,255,.18)}
.u-sw::after{content:"";position:absolute;top:calc(3 * var(--u));left:calc(3 * var(--u));width:calc(24 * var(--u));height:calc(24 * var(--u));border-radius:50%;background:#fff}
.u-sw.on{background:var(--accent)}
.u-sw.on::after{left:auto;right:calc(3 * var(--u))}
.ui .u-chev{width:calc(20 * var(--u));height:calc(20 * var(--u));color:var(--ink-3)}
.u-full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p78{width:78%}.p40{width:40%}.p16{width:16%}.p34{width:34%}.p58{width:58%}.p12{width:12%}
/* Hunt card */
.u-hunt{position:relative;height:calc(190 * var(--u));border-radius:calc(22 * var(--u));overflow:hidden;background:#1d1424}
.u-hunt>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.u-hunt-f{position:absolute;left:calc(8 * var(--u));right:calc(8 * var(--u));bottom:calc(8 * var(--u));display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:calc(10 * var(--u));row-gap:calc(4 * var(--u));align-items:center;padding:calc(12 * var(--u)) calc(12 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u));border-radius:calc(16 * var(--u))}
.u-hn{grid-column:1;font:700 calc(19 * var(--u))/1.15 var(--f);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-hm{grid-column:1;font:500 calc(14 * var(--u))/1.2 var(--f);color:var(--ink-2)}
.ui .u-warn{color:var(--warn)}
.u-hunt-f .u-btn{grid-column:2;grid-row:1 / span 2}
.u-pr{position:absolute;left:calc(14 * var(--u));right:calc(14 * var(--u));bottom:calc(6 * var(--u));height:calc(3 * var(--u));border-radius:calc(2 * var(--u));background:rgba(255,255,255,.14);overflow:hidden}
.u-pr i{display:block;height:100%;border-radius:inherit;background:var(--accent-ink)}
.u-hunt-f .u-warn~.u-pr i{background:var(--warn)}
/* Home */
.u-hbar{display:flex;align-items:center;justify-content:space-between;height:calc(52 * var(--u));padding:0 calc(16 * var(--u))}
.u-brand{display:flex;align-items:center;gap:calc(9 * var(--u))}
.u-brand img{width:calc(30 * var(--u));height:calc(30 * var(--u))}
.u-brand b{font:700 calc(20 * var(--u))/1 var(--f);letter-spacing:-.015em}
.ui-home .u-seg{margin-top:calc(6 * var(--u))}
.u-post{margin-top:calc(22 * var(--u))}
.u-post-h{display:flex;align-items:center;gap:calc(10 * var(--u));margin-bottom:calc(10 * var(--u))}
.u-who{display:flex;flex-direction:column;gap:calc(2 * var(--u));flex:1;min-width:0}
.u-who b{font:700 calc(16 * var(--u))/1.2 var(--f)}
.u-who span{font:400 calc(14 * var(--u))/1.2 var(--f);color:var(--ink-2)}
.u-follow{font:700 calc(15 * var(--u))/1 var(--f);color:var(--accent-ink)}
.u-media{position:relative;height:calc(380 * var(--u));border-radius:calc(22 * var(--u));overflow:hidden;background:#3a2418}
.u-media img{width:100%;height:100%;object-fit:cover}
.u-media .u-mchip{position:absolute;left:calc(12 * var(--u));top:calc(12 * var(--u))}
/* Reel (Watch): the whole slide flicks, its rail and caption with it; the top tabs and the tab bar stay */
.ui-reel{padding-top:0;background:#000}
.u-reel{position:absolute;inset:0;will-change:transform}
.u-slide{position:absolute;left:0;right:0;top:0;height:100%}
.u-slide:nth-child(2){top:100%}
.u-slide:nth-child(3){top:200%}
.u-slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.u-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 20%),linear-gradient(0deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.42) 26%,rgba(0,0,0,0) 48%)}
.u-rail{position:absolute;right:calc(14 * var(--u));bottom:calc(200 * var(--u));display:flex;flex-direction:column;align-items:center;gap:calc(14 * var(--u))}
.u-av-l{position:relative;width:calc(48 * var(--u));height:calc(48 * var(--u));margin-bottom:calc(8 * var(--u));border:calc(2 * var(--u)) solid #fff;font-size:calc(19 * var(--u))}
.u-av-l i{position:absolute;left:50%;bottom:calc(-10 * var(--u));transform:translateX(-50%);display:grid;place-items:center;width:calc(20 * var(--u));height:calc(20 * var(--u));border-radius:50%;background:var(--accent)}
.ui .u-av-l i .i{width:calc(12 * var(--u));height:calc(12 * var(--u));stroke-width:2.6}
.u-rb{display:grid;place-items:center;width:calc(50 * var(--u));height:calc(50 * var(--u));border-radius:50%;color:#fff}
.ui .u-rb .i{width:calc(25 * var(--u));height:calc(25 * var(--u))}
.u-info{position:absolute;left:calc(16 * var(--u));right:calc(84 * var(--u));bottom:calc(118 * var(--u))}
.u-who2{display:flex;align-items:center;gap:calc(10 * var(--u))}
.u-who2 b{font:700 calc(17 * var(--u))/1.2 var(--f)}
.u-fcap{display:inline-flex;align-items:center;height:calc(28 * var(--u));padding:0 calc(12 * var(--u));border-radius:calc(14 * var(--u));font:700 calc(13.5 * var(--u))/1 var(--f);color:#fff}
.u-info p{margin:calc(8 * var(--u)) 0 calc(11 * var(--u));font:400 calc(16 * var(--u))/1.35 var(--f);color:#fff}
.u-prog{position:absolute;left:calc(16 * var(--u));right:calc(16 * var(--u));bottom:calc(104 * var(--u));height:calc(3 * var(--u));border-radius:calc(2 * var(--u));background:rgba(255,255,255,.24);overflow:hidden}
.u-prog i{display:block;height:100%;background:#fff}
.u-rtop{position:absolute;z-index:10;left:calc(16 * var(--u));right:calc(16 * var(--u));top:calc(58 * var(--u));display:flex;gap:calc(10 * var(--u))}
.u-rtop .u-seg{flex:1;margin:0}
/* Hunts hub, detail, entries */
.ui-hub .u-lthead,.ui-disc .u-lthead{margin-top:calc(8 * var(--u))}
.ui-hub .u-seg{margin-top:calc(12 * var(--u))}
.u-hcol{display:flex;flex-direction:column;gap:calc(14 * var(--u));margin-top:calc(18 * var(--u))}
.u-hcol .u-hunt{height:calc(178 * var(--u))}
.ui-detail{padding-top:0}
.u-dhero{position:relative;height:calc(376 * var(--u))}
.u-dhero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.u-dscrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,3,32,.4) 0%,rgba(10,3,32,0) 26%,rgba(10,3,32,.28) 56%,var(--bg) 100%)}
.u-dtop{position:absolute;left:calc(16 * var(--u));right:calc(16 * var(--u));top:calc(58 * var(--u));display:flex;justify-content:space-between}
.u-dposter{position:absolute;left:calc(16 * var(--u));right:calc(16 * var(--u));bottom:calc(4 * var(--u))}
.u-poster{display:block;margin-top:calc(12 * var(--u));font:700 calc(50 * var(--u))/.94 var(--fd);font-stretch:100%;letter-spacing:-.035em;text-transform:uppercase}
.u-theme{display:block;margin-top:calc(8 * var(--u));font:400 calc(15 * var(--u))/1.35 var(--f);color:var(--ink-2)}
.u-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(8 * var(--u));margin-top:calc(20 * var(--u))}
.u-stats span{display:flex;flex-direction:column;gap:calc(4 * var(--u));padding:calc(12 * var(--u)) calc(12 * var(--u)) calc(13 * var(--u));border-radius:calc(16 * var(--u));background:var(--surface);border:1px solid var(--hair)}
.u-stats b{font:700 calc(22 * var(--u))/1.05 var(--f);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.u-stats small{font:500 calc(13 * var(--u))/1.2 var(--f);color:var(--ink-2)}
.u-end{display:flex;gap:calc(12 * var(--u));align-items:flex-start;margin-top:calc(12 * var(--u));padding:calc(14 * var(--u));border-radius:calc(18 * var(--u));background:var(--surface);border:1px solid var(--hair)}
.u-end small{display:block;font:500 calc(13 * var(--u))/1.2 var(--f);color:var(--ink-2)}
.u-end b{display:block;margin-top:calc(4 * var(--u));font:500 calc(15 * var(--u))/1.4 var(--f)}
.u-cta{position:absolute;left:0;right:0;bottom:0;padding:calc(14 * var(--u)) calc(16 * var(--u)) calc(30 * var(--u));border-width:1px 0 0;border-radius:0}
.ui-entries .u-lthead{margin-top:calc(4 * var(--u))}
.ui-entries .u-lt{margin-top:calc(4 * var(--u))}
.ui-entries .u-seg{margin-top:calc(14 * var(--u))}
.u-egrid{display:grid;grid-template-columns:1fr 1fr;gap:calc(8 * var(--u));margin-top:calc(14 * var(--u))}
.u-egrid .u-tile{aspect-ratio:9 / 14}
.u-rank{position:absolute;left:calc(10 * var(--u));top:calc(10 * var(--u));display:grid;place-items:center;height:calc(28 * var(--u));padding:0 calc(10 * var(--u));border-radius:calc(14 * var(--u));
  font:700 calc(14 * var(--u))/1 var(--f);font-variant-numeric:tabular-nums;color:#fff}
.u-vote{position:absolute;left:calc(10 * var(--u));bottom:calc(10 * var(--u));display:grid;place-items:center;width:calc(40 * var(--u));height:calc(40 * var(--u));border-radius:50%;
  background:rgba(10,3,32,.46);border:1px solid rgba(255,255,255,.26);color:#fff}
.ui .u-vote .i{width:calc(20 * var(--u));height:calc(20 * var(--u))}
.u-vote.on{background:var(--accent);border-color:transparent}
.u-vote.on .i{fill:currentColor}
/* Create: record, publish, the who-can-watch sheet */
.ui-rec{padding-top:0;background:#000}
.u-rscrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,0) 22%),linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0) 32%)}
.u-rectop{position:absolute;left:calc(16 * var(--u));right:calc(16 * var(--u));top:calc(60 * var(--u));display:flex;justify-content:space-between;align-items:flex-start}
.u-recside{display:flex;flex-direction:column;gap:calc(14 * var(--u))}
.u-recbtn{position:absolute;left:50%;bottom:calc(58 * var(--u));width:calc(86 * var(--u));height:calc(86 * var(--u));transform:translateX(-50%)}
.u-recbtn i{position:absolute;inset:calc(12 * var(--u));border-radius:50%;background:#E5484D;transition:inset .3s var(--ease),border-radius .3s var(--ease)}
.screen.rec .u-recbtn i{inset:calc(27 * var(--u));border-radius:calc(8 * var(--u))}
.rec-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.rec-ring circle{fill:none;stroke-width:4}
.rec-ring .tr{stroke:rgba(255,255,255,.9)}
.rec-ring .fg{stroke:#E5484D;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:opacity .2s}
.screen.rec .rec-ring .fg{opacity:1}
.u-nav{display:flex;align-items:center;justify-content:space-between;height:calc(52 * var(--u))}
.u-nav b{font:700 calc(18 * var(--u))/1 var(--f)}
.u-nsp{width:calc(42 * var(--u))}
.u-cov{display:flex;gap:calc(14 * var(--u));margin-top:calc(12 * var(--u))}
.u-cov-main{width:calc(92 * var(--u));height:calc(124 * var(--u));border-radius:calc(14 * var(--u));object-fit:cover;object-position:72% 50%}
.u-cov-r small{display:block;margin-top:calc(4 * var(--u));font:500 calc(13 * var(--u))/1 var(--f);color:var(--ink-2)}
.u-cov-row{display:flex;gap:calc(8 * var(--u));margin-top:calc(10 * var(--u))}
.u-cov-row img{width:calc(48 * var(--u));height:calc(64 * var(--u));border-radius:calc(10 * var(--u));object-fit:cover;opacity:.66}
.u-cov-row img.on{opacity:1;outline:calc(2 * var(--u)) solid var(--accent-ink);outline-offset:calc(-2 * var(--u))}
.u-cov-row .c1{object-position:72% 50%}.u-cov-row .c2{object-position:35% 30%}.u-cov-row .c3{object-position:60% 88%}
.u-field{margin-top:calc(18 * var(--u));padding:calc(12 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u));border-radius:calc(16 * var(--u));background:var(--raised);border:1px solid var(--hair)}
.u-field small{display:block;font:500 calc(13 * var(--u))/1 var(--f);color:var(--ink-2)}
.u-field span{display:block;margin-top:calc(8 * var(--u));font:400 calc(16 * var(--u))/1.3 var(--f)}
.ui-pub .u-group{margin-top:calc(14 * var(--u))}
.u-postbar{position:absolute;left:0;right:0;bottom:calc(30 * var(--u))}
.screen .dim{position:absolute;inset:0;z-index:14;background:rgba(10,3,32,.6);transition:opacity .3s var(--ease)}
.u-sheet{position:absolute;z-index:15;left:0;right:0;bottom:0;padding:calc(8 * var(--u)) calc(16 * var(--u)) calc(30 * var(--u));border-radius:calc(28 * var(--u)) calc(28 * var(--u)) 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 30%),#1B1236;border:1px solid rgba(255,255,255,.14);border-bottom:0;transition:transform .45s var(--spring)}
.u-grab{display:block;width:calc(40 * var(--u));height:calc(5 * var(--u));margin:0 auto calc(12 * var(--u));border-radius:calc(3 * var(--u));background:rgba(255,255,255,.3)}
.u-sh-h{display:flex;align-items:center;justify-content:space-between}
.u-sh-h b{font:700 calc(19 * var(--u))/1.2 var(--f);letter-spacing:-.01em}
.u-opts{display:flex;flex-direction:column;gap:calc(8 * var(--u));margin-top:calc(14 * var(--u))}
.u-opt{display:flex;align-items:center;gap:calc(12 * var(--u));padding:calc(12 * var(--u)) calc(14 * var(--u));border-radius:calc(16 * var(--u));background:var(--surface);border:1px solid var(--hair);
  transition:background-color .25s var(--ease),border-color .25s var(--ease)}
.u-opt.on{border-color:rgba(165,139,255,.6);background:rgba(102,36,241,.18)}
.u-chk{display:grid;place-items:center;flex:none;width:calc(26 * var(--u));height:calc(26 * var(--u));border-radius:50%;border:1.5px solid rgba(255,255,255,.3);color:transparent}
.ui .u-chk .i,.u-sheet .u-chk .i{width:calc(15 * var(--u));height:calc(15 * var(--u));stroke-width:2.6}
.u-opt.on .u-chk{background:var(--accent);border-color:var(--accent);color:#fff}
.u-sheet>.u-btn-l{margin-top:calc(16 * var(--u))}
.u-sheet .i{width:calc(21 * var(--u));height:calc(21 * var(--u))}
.motion .screen:not(.sheet-up) .dim{opacity:0}
.motion .screen:not(.sheet-up) .u-sheet.sheet{transform:translateY(104%)}
/* Discover, profile */
.u-search{display:flex;align-items:center;gap:calc(10 * var(--u));height:calc(48 * var(--u));margin-top:calc(12 * var(--u));padding:0 calc(16 * var(--u));border-radius:calc(24 * var(--u));
  background:var(--raised);border:1px solid var(--hair);font:400 calc(15 * var(--u))/1 var(--f);color:var(--ink-3)}
.ui .u-search .i{width:calc(20 * var(--u));height:calc(20 * var(--u));color:var(--ink-2)}
.u-chips{display:flex;gap:calc(8 * var(--u));margin-top:calc(14 * var(--u));overflow:hidden}
.u-split{justify-content:space-between}
.u-pf{display:flex;flex-direction:column;align-items:flex-start}
.u-av-xl{width:calc(96 * var(--u));height:calc(96 * var(--u));margin-top:calc(4 * var(--u));font-size:calc(38 * var(--u));background:#21153f;border-color:rgba(165,139,255,.42)}
.u-pname{margin-top:calc(14 * var(--u));font:700 calc(28 * var(--u))/1.05 var(--fd);font-stretch:100%;letter-spacing:-.03em}
.u-pchips{display:flex;gap:calc(8 * var(--u));margin-top:calc(10 * var(--u))}
.u-bio{margin-top:calc(10 * var(--u));font:400 calc(16 * var(--u))/1.35 var(--f);color:var(--ink-2)}
.u-pbtns{display:grid;grid-template-columns:1fr 1fr;gap:calc(10 * var(--u));align-self:stretch;margin-top:calc(16 * var(--u))}
.ui-prof .u-seg{margin-top:calc(16 * var(--u))}
.ui-prof .u-mas{margin-top:calc(12 * var(--u))}
/* In control: privacy and report status */
.ui-priv .u-lt{margin-top:calc(4 * var(--u))}
.u-g1{margin-top:calc(22 * var(--u))}
.u-row-l{min-height:calc(78 * var(--u))}
.u-glabel{display:block;margin:calc(24 * var(--u)) 0 calc(8 * var(--u));font:700 calc(15 * var(--u))/1 var(--f);color:var(--ink-2)}
.ui-rep{padding-top:0;background:#120a24}
.u-rdim{position:absolute;inset:0;background:rgba(10,3,32,.42)}
.u-steps{list-style:none;margin:calc(16 * var(--u)) 0 0;padding:0;display:flex;flex-direction:column;gap:calc(14 * var(--u))}
.u-steps li{display:flex;align-items:center;gap:calc(12 * var(--u))}
.u-steps li.done .u-chk{background:var(--accent);border-color:var(--accent);color:#fff}
.u-dot{flex:none;width:calc(26 * var(--u));height:calc(26 * var(--u));border-radius:50%;border:1.5px solid rgba(255,255,255,.3)}
.u-steps li.now .u-dot{border:calc(2 * var(--u)) solid var(--warn);background:radial-gradient(circle,var(--warn) 0 36%,transparent 40%)}
.u-note{display:block;margin-top:calc(16 * var(--u));font:400 calc(15 * var(--u))/1.4 var(--f);color:var(--ink-2)}
.u-sbtns{display:grid;grid-template-columns:1fr 1fr;gap:calc(10 * var(--u));margin-top:calc(16 * var(--u))}
.u-sbtns .u-btn{height:calc(50 * var(--u));border-radius:calc(25 * var(--u))}

/* ---------- light: cone, floor pool. Only opacity and transform ever animate. ---------- */
.light{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.cone{position:absolute;top:0;left:calc(var(--cx,50%) - 60vw);width:120vw;height:100%;transform-origin:50% 0;
  background:conic-gradient(from 0deg at 50% 0%,transparent 163deg,rgba(165,139,255,.1) 169deg,rgba(165,139,255,.2) 174deg,rgba(245,243,250,.26) 180deg,rgba(165,139,255,.2) 186deg,rgba(165,139,255,.1) 191deg,transparent 197deg);
  -webkit-mask-image:linear-gradient(#000 30%,transparent 92%);mask-image:linear-gradient(#000 30%,transparent 92%)}
.cone::before{content:"";position:absolute;left:calc(50% - 90px);top:-30px;width:180px;height:60px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(245,243,250,.5),rgba(165,139,255,.18) 55%,transparent)}
.pool{position:absolute;left:calc(var(--cx,50%) - var(--pool-w,560px) / 2);top:var(--pool-y,70%);width:var(--pool-w,560px);height:calc(var(--pool-w,560px) * .34);
  background:radial-gradient(closest-side,rgba(165,139,255,.22),rgba(102,36,241,.08) 60%,transparent)}

/* ---------- glass on the page: exactly two objects (G1 hero chip, G2 who-can-watch lens) ---------- */
.glass{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 55%),rgba(30,20,58,.52);
  -webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);
  border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.04)}
.glass-tint{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 60%),rgba(102,36,241,.42);
  border:1px solid rgba(165,139,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.06)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:#1A1033}}
html[data-tier="lite"] .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 55%),#1A1033}
@media (prefers-reduced-transparency:reduce){
  .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:#1A1033}
  .glass-tint{background:#6624F1}
}

/* ---------- keywords: the giant chapter word (aria-hidden; the H2 carries the meaning) ---------- */
.kw{margin:0;font-family:var(--fd);font-weight:800;font-stretch:125%;text-transform:uppercase;line-height:.8;letter-spacing:-.045em;
  white-space:nowrap;color:var(--ink);pointer-events:none;user-select:none;font-size:var(--kw-m)}
.kw-hunts{--kw-m:26vw;--kw-d:min(19vw,30svh)}
.kw-create{--kw-m:20.3vw}
.kw-discover{--kw-m:15.4vw;--kw-d:min(15.6vw,26svh)}
.motion .kw{opacity:.12}
.motion .kw-create{opacity:1}

/* ================= 01 HERO: curtain up ================= */
.hero{position:relative;--cx:50%;--pool-w:min(130vw,640px);--pool-y:62%;padding:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 24px) 0 24px}
.hero-light .cone{opacity:.7}
.hero-grid{position:relative;z-index:2}
.hero-text{container-type:inline-size}
.slot{position:relative;display:inline-block;width:1.45em;height:.74em;margin-left:.16em;border-radius:.37em;overflow:hidden;
  vertical-align:.02em;background:var(--raised);isolation:isolate;transform:translateZ(0)}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.slot img.on{opacity:1;transform:none}
.slot::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,0) 55%)}
.slot-l{position:absolute;z-index:2;left:50%;bottom:.09em;transform:translateX(-50%);font:500 11px/14px var(--f);letter-spacing:0;color:#fff;opacity:0;transition:opacity .6s var(--ease)}
.slot-l.on{opacity:1}
.hero-copy{margin-top:22px}
.hero-copy .stores{margin-top:24px}
.hero-copy .fine{margin-top:14px}
.hero-copy .tlink{margin-top:12px}
.hero-fig{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;margin-top:36px}
.hero-phone{position:relative;z-index:2}
.hero-fig{--phw:min(76vw,340px,(100svh - var(--nav-h) - 40px) / 2.084)}
.hero-fig::after{content:"";position:absolute;z-index:0;left:50%;bottom:-7%;width:min(180%,620px);height:22%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(165,139,255,.26),rgba(102,36,241,.08) 60%,transparent)}
.g1-wrap{display:none}
.g1{display:flex;align-items:center;gap:12px;margin:0;padding:14px 18px 14px 14px;border-radius:20px;color:var(--ink);font:400 15px/20px var(--f);width:max-content;max-width:17rem}
.g1 b{font-weight:700}
.g1 .i{width:22px;height:22px;flex:none;color:var(--accent-ink)}
@media (min-width:600px){
  .g1-wrap{display:block;position:absolute;z-index:3;right:calc(50% + var(--phw) / 2 - 3.25rem);top:66%}
}
@media (min-width:960px){
  /* the phone is sized by the screen's width AND its height, so it is always fully in frame (any window, any zoom) */
  .hero{--hm:clamp(12px,1.8svh,32px);--pwh:clamp(250px,min(30vw,(100svh - var(--nav-h) - 2 * var(--hm)) / 2.084),600px);
    --cx:calc(50% + min(50% - var(--gut),var(--maxw) / 2) - var(--pwh) / 2);--pool-w:760px;--pool-y:calc(100% - 22svh);
    min-height:100svh;display:flex;align-items:center;padding:calc(var(--nav-h) + var(--hm)) 0 var(--hm)}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) var(--pwh);column-gap:clamp(40px,5vw,120px);align-items:stretch}
  /* v3.1: the phone now takes the full height; on tall screens the words keep v3's rhythm (H1 and copy sit
     inside the phone's top and bottom edges) instead of drifting apart with it */
  .hero-text{display:flex;flex-direction:column;justify-content:space-between;gap:32px;min-width:0;padding-block:clamp(0px,(100svh - 880px) * .28,96px)}
  .h1{font-size:min(12.3cqi,9.5rem)}
  .h1 .l2 .w{display:inline}
  .hero-copy{margin-top:0}
  .hero-copy .lead{max-width:34ch}
  .hero-fig{margin:0;display:block}
  .hero-fig{--phw:var(--pwh)}
  .g1-wrap{right:calc(100% - 3.5rem);top:69%}
}

/* ================= 02 TEN TALENTS: the line-up ================= */
.talents{position:relative;padding:12svh 0 6svh;overflow:hidden}
@media (min-width:960px){
  .talents{padding:16svh 0 9svh}
  .talents-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--colgap);align-items:end}
  .talents-head .h2{grid-column:1 / span 6;max-width:none}
  .talents-head .body{grid-column:8 / -1;margin:0 0 .3em}
}
.talents-head{position:relative;z-index:2}
.lu-list{list-style:none;margin:7svh auto 0;width:min(100% - 2 * var(--gut),var(--maxw));padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.06em .5em;
  font-family:var(--fd);font-weight:800;font-stretch:125%;text-transform:uppercase;font-size:clamp(1.9rem,8.2vw,5.6rem);line-height:.92;letter-spacing:-.045em}
.lu-list li:nth-child(n+6){color:var(--ink-2)}
.lu{display:none}
.lu-on .lu-list{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lu-on .lu{display:block;position:relative;margin-top:8svh}
.lu-tilt{width:136vw;margin-left:-18vw;transform:rotate(-3deg)}
.lu-row{position:relative;white-space:nowrap;font-family:var(--fd);font-weight:800;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(3.2rem,13.5vw,10rem);line-height:.86;letter-spacing:-.045em}
.lu-row+.lu-row{margin-top:.1em}
.lu-track{display:inline-flex;align-items:center;gap:.5em;will-change:transform}
.lu-w{position:relative;flex:none;color:var(--ink-2);transition:color .3s var(--ease)}
.lu-b .lu-w{color:rgba(245,243,250,.44)}
.lu-w.lit{color:var(--ink)}
.lu-w b{position:absolute;left:.03em;top:-.17em;font:500 .12em/1 var(--f);letter-spacing:.02em;color:var(--accent-ink);font-variant-numeric:tabular-nums}

/* ================= chapter stages ================= */
/* phones and narrow tablets: text first, plain, on the ground; then the phone's own stage, sticky, with nothing over it */
.ch{position:relative;padding-top:10svh}
.ch .kw{position:relative;z-index:1;padding-inline:var(--gut)}
.stage-in{position:relative}
.ch-copy{position:relative;z-index:3;width:min(100% - 2 * var(--gut),var(--maxw));margin:18px auto 0}
.ch-side{position:relative;z-index:3;width:min(100% - 2 * var(--gut),var(--maxw));margin:22px auto 0;padding:0}
.ch-copy .fine{margin-top:14px}
.ch-fig{position:relative;margin:28px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;padding-bottom:24px;overflow:hidden}
.ch-fig .phone{z-index:2}
.vfx-wrap{position:relative;z-index:2;width:var(--phw)}
.ch-light,.deadline.dl-d{display:none}
.fig-cap{position:relative;z-index:3;align-self:stretch;display:flex;gap:10px;margin:0;padding-inline:var(--gut);font:500 15px/22px var(--f)}
.fig-cap-n{color:var(--accent-ink);font-variant-numeric:tabular-nums}
.ch-run{display:none}
.motion .ch-stage,.motion .stage-in{display:contents}
.motion .ch-fig{position:sticky;top:max(calc(var(--nav-h) + 8px),calc(50svh - var(--phw) * 1.042 - 46px));margin-top:24px;padding-bottom:max(24px,3svh)}
.motion .ch-run{display:block;height:calc(var(--len-m) * 100svh)}
.no-js .fig-cap,html:not(.motion) .fig-cap{display:none}
.ch{--phw:min(72vw,330px,(100svh - var(--nav-h) - 170px) / 2.084)}
.ch-hunts{--len:2;--len-m:.5}
.ch-create{--len:1.9;--len-m:.5}
.ch-discover{--len:2;--len-m:.42}
.ch-watch{--len:1.7;--len-m:0}

@media (min-width:960px){
  .ch{padding-top:0}
  .ch-stage{position:relative;height:100svh;min-height:600px;overflow:hidden}
  .motion .ch-stage{display:block;position:sticky;top:0}
  .stage-in,.motion .stage-in{display:block;position:absolute;z-index:2;top:0;bottom:0;left:0;right:0;width:min(100% - 2 * var(--gut),var(--maxw));margin-inline:auto}
  .motion .ch-run{height:calc((var(--len) - 1) * 100svh)}
  .ch .kw{position:absolute;padding:0}
  .ch-copy,.ch-side{position:absolute;width:auto;margin:0;padding:0}
  .ch-fig,.motion .ch-fig{position:absolute;top:auto;margin:0;padding:0;display:block;overflow:visible}
  .ch-light{display:block}
  .deadline.dl-d{display:flex}
  .fig-cap,.deadline.dl-m{display:none}
  /* chapter phones share one size rule: by width and by height, so each is fully in frame */
  .ch-stage{--cm:clamp(12px,1.8svh,32px);--pwc:clamp(240px,min(26vw,(100svh - var(--nav-h) - 2 * var(--cm)) / 2.084),520px);--phw:var(--pwc)}
}

/* ---------- 03 WATCH: cinema. The room goes dark, a wide frame lights up, the large phone plays the same clip. ---------- */
.u-reel img{will-change:auto}
.cine{position:relative;height:clamp(170px,52vw,320px);overflow:hidden;background:#000}
.cine img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease)}
.cine img.on{opacity:1}
.cine::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.35) 30%,rgba(0,0,0,0) 52%),linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,0) 58%)}
/* phones: title, text, then the wide frame with the phone resting over its lower half (no sticky stage: nothing to scroll through) */
.ch-watch .ch-stage,.motion .ch-watch .ch-stage{display:flex;flex-direction:column}
.ch-watch .stage-in,.motion .ch-watch .stage-in{display:contents}
.ch-watch .w-title{order:1;width:min(100% - 2 * var(--gut),var(--maxw));margin-inline:auto}
.ch-watch .ch-copy{order:2;margin-top:16px}
.ch-watch .cine{order:3;margin-top:30px}
.ch-watch .ch-fig,.motion .ch-watch .ch-fig{order:4;position:relative;top:auto;height:auto;margin-top:calc(clamp(170px,52vw,320px) * -.5);padding-bottom:0;justify-content:flex-start;overflow:visible}
@media (max-width:959px){.motion .ch-watch .ch-run{display:none}}
@media (min-width:960px){
  .ch-watch .ch-stage,.motion .ch-watch .ch-stage{display:block;--bt:calc(var(--nav-h) + 2.5svh);--bh:min(57svh,40vw);--bb:calc(var(--bt) + var(--bh))}
  .ch-watch .stage-in,.motion .ch-watch .stage-in{display:block}
  .cine{position:absolute;left:0;right:0;top:var(--bt);height:var(--bh);max-width:1920px;margin-inline:auto}
  .ch-watch .w-title{position:absolute;z-index:3;left:0;bottom:calc(100% - var(--bb) + 3svh);width:auto;margin:0;max-width:11ch}
  .ch-watch .ch-copy{left:0;top:calc(var(--bb) + 3.6svh);width:min(36rem,calc(100% - var(--pwc) - 8vw))}
  .ch-watch .ch-copy .body{margin-top:0}
  .ch-watch .ch-fig,.motion .ch-watch .ch-fig{position:absolute;right:0;left:auto;top:calc(var(--nav-h) + (100svh - var(--nav-h) - var(--pwc) * 2.084) / 2);width:var(--pwc);margin:0}
  .ch-watch .ch-fig::after{content:"";position:absolute;z-index:0;left:50%;bottom:-6%;width:200%;height:20%;transform:translateX(-50%);pointer-events:none;
    background:radial-gradient(closest-side,rgba(165,139,255,.2),rgba(102,36,241,.06) 60%,transparent)}
}
/* wider than 1920: the band becomes a screen with soft edges, so its photo is never stretched past twice its pixels */
@media (min-width:1921px){.cine{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}}

/* ---------- 04a HUNTS: the arena. The one truly lit stage: violet floor, cone, pool. (Composition unchanged from v2.) ---------- */
.ch-hunts{--cx:50%;--pool-w:680px;--pool-y:58%;--ink-3:rgba(245,243,250,.76);--ink-2:rgba(245,243,250,.86)}
.ch-hunts .ch-stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(85% 62% at 50% 104%,rgba(138,92,255,.55),rgba(102,36,241,.22) 48%,rgba(102,36,241,0) 76%)}
.ch-hunts .ch-light .cone{opacity:.95}
.ch-hunts .pool{background:radial-gradient(closest-side,rgba(190,168,255,.42),rgba(130,84,255,.16) 60%,transparent)}
.ch-hunts .ch-copy,.ch-hunts .ch-side,.ch-hunts .ch-fig{z-index:2}
.ph-stack{position:relative;z-index:0;display:flex;justify-content:center}
.ph-stack>.phone{z-index:1}
/* centred with no transform (GSAP owns the transform for its sway): a wide box centred on the phone, clipped by its stage */
.ch .ph-stack>.kw{position:absolute;z-index:0;left:-100vw;right:-100vw;top:31%;margin:-.4em 0 0;padding:0;text-align:center}
.steps{list-style:none}
.step{display:grid;grid-template-columns:2.6rem 1fr;gap:0 10px;padding:14px 0;border-top:1px solid rgba(255,255,255,.16)}
.step:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.step-n{font:500 14px/22px var(--f);font-variant-numeric:tabular-nums;color:var(--ink-3);transition:color .35s var(--ease)}
.step-t{margin:0;font:700 17px/22px var(--f);letter-spacing:-.01em;color:var(--ink);transition:color .35s var(--ease)}
.step-b p{margin:6px 0 0;font-size:15px;line-height:22px;color:var(--ink-2)}
.step.on .step-n{color:#DCCFFF}
.deadline{display:flex;align-items:center;gap:10px;font:500 13px/18px var(--f);color:var(--ink-2)}
.deadline .i{width:18px;height:18px;color:#C9B8FF}
.dl-bar{position:relative;flex:1;height:1px;background:rgba(255,255,255,.22)}
.dl-fill{position:absolute;inset:0;background:#C9B8FF;transform-origin:0 50%}
.dl-m{align-self:stretch;padding-inline:var(--gut);position:relative;z-index:3}
@media (min-width:960px){
  .ch-hunts .ch-stage{--pwc:clamp(230px,min(25vw,(100svh - var(--nav-h) - 2 * var(--cm)) / 2.084 * .96),480px);--phw:var(--pwc)}
  .ch-hunts .ch-light{z-index:1}
  .ch-hunts .ph-stack>.kw{font-size:var(--kw-d)}
  .ch-hunts .ch-copy{left:0;bottom:max(6svh,48px);width:min(34rem,calc(50% - var(--pwc) / 2 - 48px))}
  .ch-hunts .ch-side{right:0;bottom:max(6svh,48px);width:min(24rem,calc(50% - var(--pwc) / 2 - 48px))}
  .ch-hunts .ch-fig,.motion .ch-hunts .ch-fig{left:calc(50% - var(--pwc) / 2);top:calc(var(--nav-h) + (100svh - var(--nav-h) - 48px - var(--pwc) * 2.084) / 2);width:var(--pwc)}
  .step{padding:16px 0}
  .step-t{font-size:clamp(17px,1.05vw,20px);line-height:1.3}
  .step-b p{font-size:clamp(15px,.85vw,17px);line-height:1.5}
  .motion .step .step-t{color:var(--ink-3)}
  .motion .step.on .step-t{color:var(--ink)}
  .motion .step-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
  .motion .step.on .step-b{grid-template-rows:1fr}
  .motion .step-b>p{overflow:hidden;min-height:0}
  .dl-d{position:absolute;z-index:3;left:0;right:0;bottom:16px}
}

/* ---------- 04b HUNTS: the scoreboard (blackout). Opaque rows, a lit #1, a spotlight that lands on it. ---------- */
.board{position:relative}
.board-track{position:relative}
.board-stage{position:relative;overflow:hidden;padding:calc(var(--nav-h) + 22px) 0 24px}
.board-light{--cx:calc(var(--gut) + 1.6rem)}
.board-light .cone{height:62%;opacity:0}
html:not(.motion) .board-light .cone{opacity:.8}
.board-in{position:relative;z-index:2}
.board-head .body{margin-top:12px}
.board-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;margin-top:16px}
.board-hunt{display:flex;align-items:center;gap:8px;margin:0;font:500 14px/20px var(--f);color:var(--ink-2)}
.board-hunt .i{width:18px;height:18px;color:var(--accent-ink)}
.board-hunt b{color:var(--ink);font-weight:700}
.board-hunt span{color:var(--ink-3)}
.board-hunt span::before{content:"";display:inline-block;width:3px;height:3px;margin:0 8px 3px 2px;border-radius:50%;background:var(--ink-3)}
.board-panel{position:relative;margin-top:12px}
.rows{list-style:none;margin:0;padding:0;position:relative}
.row{--rh:68px;position:relative;display:grid;grid-template-columns:2.6rem 4.6rem minmax(0,1fr) 22px 44px;align-items:center;gap:0 10px;height:var(--rh);padding:0 10px 0 12px}
.row::before,.row::after{content:"";position:absolute;inset:3px 0;z-index:-1;border-radius:12px}
.row::before{background:var(--surface);border:1px solid var(--hair)}
.row::after{background:linear-gradient(90deg,rgba(102,36,241,.7),rgba(102,36,241,.2) 62%,rgba(102,36,241,.06));border:1px solid rgba(165,139,255,.6);opacity:0;transition:opacity .6s var(--ease)}
.row.top::after,html:not(.motion) .r1::after{opacity:1}
.mv{position:relative;width:22px;height:22px;border-radius:50%;border:1px solid transparent;color:var(--accent-ink);transition:border-color .35s var(--ease),background-color .35s var(--ease)}
.mv .i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;opacity:0;transform:translateY(4px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.mv .mv-d{color:var(--ink-3);transform:translateY(-4px)}
.row.up .mv{border-color:rgba(165,139,255,.6);background:rgba(102,36,241,.34)}
.row.down .mv{border-color:var(--hair-2)}
.row.up .mv-u,.row.down .mv-d{opacity:1;transform:none}
.rk{display:block;height:1em;overflow:hidden;font-family:var(--fd);font-weight:800;font-stretch:125%;font-size:2.3rem;line-height:1;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;color:var(--ink);transition:color .5s var(--ease)}
.rk-strip{display:block}
.rk-strip span{display:block;height:1em}
.r2 .rk-strip{transform:translateY(-25%)}
.r3 .rk-strip{transform:translateY(-50%)}
.r4 .rk-strip{transform:translateY(-75%)}
.motion .rk-strip{transform:none}
.row.top .rk,html:not(.motion) .r1 .rk{color:#fff}
.row-img{width:100%;height:calc(var(--rh) - 18px);object-fit:cover;border-radius:8px;display:block;background:var(--raised);transition:transform .5s var(--ease)}
.row.top .row-img,html:not(.motion) .r1 .row-img{transform:scale(1.1);outline:2px solid var(--accent-ink);outline-offset:1px}
.row-t b{display:block;font-family:var(--fd);font-weight:700;font-stretch:100%;font-size:19px;line-height:22px;letter-spacing:-.02em}
.row-t span{display:block;margin-top:2px;font:400 13px/18px var(--f);color:var(--ink-3)}
.row.top .row-t span,html:not(.motion) .r1 .row-t span{color:rgba(245,243,250,.82)}
.vb{display:none;position:relative;height:6px;border-radius:3px;background:rgba(245,243,250,.1);overflow:hidden}
.vb-fill{position:absolute;inset:0;border-radius:3px;background:rgba(165,139,255,.6);transform-origin:0 50%}
.r1 .vb-fill{transform:scaleX(1)}
.r2 .vb-fill{transform:scaleX(.74)}
.r3 .vb-fill{transform:scaleX(.52)}
.r4 .vb-fill{transform:scaleX(.34)}
.row.top .vb-fill,html:not(.motion) .r1 .vb-fill{background:var(--accent-ink)}
.vote{position:relative;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--hair-2);background:transparent;color:var(--ink-2);
  display:grid;place-items:center;cursor:pointer;transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .12s var(--ease)}
.vote:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
.vote:active{transform:scale(.94)}
.vote[aria-pressed="true"]{background:var(--accent);border-color:transparent;color:#fff}
.vote[aria-pressed="true"] .i{fill:currentColor;fill-opacity:1}
.vote.pop .i{animation:pop .24s var(--spring)}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}}
.beam{position:absolute;z-index:8;left:0;right:0;top:-34px;height:calc(var(--rh,68px) + 68px);pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 34% 46% at 15% 50%,rgba(245,243,250,.4),rgba(190,168,255,.18) 55%,rgba(165,139,255,0) 100%)}
html:not(.motion) .beam{opacity:.9}
.board-foot{display:grid;gap:10px;padding-block:20px 7svh}
.board-foot .tlink{margin-top:6px;justify-self:start}
.board-run{display:none}
.motion .board-stage{position:sticky;top:0}
.motion .board-run{display:block;height:70svh}
@media (max-width:959px){.motion .board-stage{min-height:100svh;display:flex;flex-direction:column;justify-content:center}.motion .board-run{height:45svh}.row{--rh:76px}}
@media (max-width:959px) and (max-height:520px){.motion .board-stage{position:relative}.motion .board-run{display:none}}
@media (min-width:600px){
  .row{--rh:84px;grid-template-columns:3.2rem 7.5rem minmax(0,1fr) 26px 44px}
  .rk{font-size:2.8rem}
}
@media (min-width:960px){
  .board-stage{display:flex;flex-direction:column;justify-content:center;min-height:100svh;padding:calc(var(--nav-h) + 12px) 0 28px}
  .motion .board-stage{height:100svh}
  .board-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--colgap);align-items:start}
  .board-head{grid-column:1 / span 4;grid-row:1}
  .board-meta{grid-column:1 / span 4;grid-row:2;flex-direction:column;align-items:flex-start;gap:10px;margin:28px 0 0;align-self:start}
  .board-panel{grid-column:6 / -1;grid-row:1 / span 2;margin:0}
  .row{--rh:clamp(84px,15.5svh,172px);grid-template-columns:clamp(4.4rem,6.4vw,7.2rem) clamp(140px,14vw,270px) minmax(0,1fr) clamp(70px,7.5vw,140px) 26px 48px;
    gap:0 clamp(12px,1.5vw,28px);padding:0 clamp(12px,1.3vw,22px)}
  .vote{width:48px;height:48px}
  .vb{display:block}
  .rk{font-size:clamp(2.8rem,5.6vw,5.8rem)}
  .row-t b{font-size:clamp(20px,1.9vw,32px);line-height:1.1}
  .row-t span{font-size:14px;line-height:20px;margin-top:4px}
  .board-light{--cx:calc(50% - 6vw)}
  .board-foot{grid-template-columns:repeat(12,minmax(0,1fr));gap:10px var(--colgap);align-items:start;padding-block:22px 7svh}
  /* one block under the score panel: the sentence, its fine print, the link (nothing floats alone) */
  .board-foot .body-s,.board-foot .fine,.board-foot .tlink{grid-column:6 / -1;max-width:44rem}
  .board-foot .tlink{margin-top:6px}
  .motion .board-run{height:70svh}
}

/* ---------- 05 CREATE: studio. A split viewfinder: the camera frame (REC, timecode, thirds) holds the phone on the left; the words sit on the right. ---------- */
.ch-create{--ink-3:rgba(245,243,250,.6)}
.ch-create .kw{display:none}
.vfx{position:absolute;z-index:1;inset:-22px;pointer-events:none}
.vfx-grid,.vfx-max{display:none}
.vfx-c{position:absolute;width:26px;height:26px;border:0 solid rgba(245,243,250,.72)}
.vfx-c.tl{top:0;left:0;border-top-width:1.5px;border-left-width:1.5px}
.vfx-c.tr{top:0;right:0;border-top-width:1.5px;border-right-width:1.5px}
.vfx-c.bl{bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px}
.vfx-c.br{bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px}
.vfx-rec{position:absolute;left:0;top:-36px;display:flex;align-items:center;gap:8px;margin:0;font:700 12px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.vfx-rec i{width:9px;height:9px;border-radius:50%;background:rgba(245,243,250,.4)}
.vfx-rec span{margin-left:4px;font:800 18px/1 var(--fd);letter-spacing:0;color:var(--ink);font-variant-numeric:tabular-nums}
.vfx-rec.is-rec{color:#fff}
.vfx-rec.is-rec i{background:var(--live)}
.chip-s{display:inline-flex;align-items:center;gap:5px;height:24px;margin-right:8px;padding:0 9px 0 7px;border-radius:12px;background:var(--raised);
  border:1px solid var(--hair);color:var(--ink-2);font:500 12px/1 var(--f);vertical-align:1px}
.chip-s .i{width:14px;height:14px}
.ch-create .h2{max-width:none}
.wcw .try{margin-bottom:12px}
.seg{--i:0;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:50px;padding:4px;border-radius:25px;background:#0F0E14;border:1px solid var(--hair)}
.seg button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;padding:0 6px;border:0;border-radius:21px;background:none;
  color:var(--ink-2);font:500 14px/1.1 var(--f);cursor:pointer;transition:color .2s var(--ease)}
.seg button[aria-pressed="true"]{color:#fff}
.seg button .i{width:17px;height:17px}
.seg .lens{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);border-radius:21px;
  transform:translateX(calc(var(--i) * 100%));transition:transform .32s var(--spring)}
.wcw-line{margin:12px 0 0;min-height:44px;font-size:15px;line-height:22px;color:var(--ink-2)}
.ch-create .fig-cap{margin-bottom:22px}
.cr-pane{position:relative}
.ch-create .vfx-wrap{margin-top:36px}
@media (max-width:399px){.seg button .i{display:none}}
@media (min-width:960px){
  .ch-create .ch-stage{--pwc:clamp(240px,min(24vw,(100svh - var(--nav-h) - 2svh - 44px) / 2.084),470px);--phw:var(--pwc)}
  .ch-create .kw{display:block;right:-.4vw;top:50%;left:auto;font-size:min(14vw,21svh);writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);color:var(--ink);opacity:.06;line-height:.8}
  .motion .ch-create .kw{opacity:.06}
  .cr-pane{position:absolute;left:55%;right:0;top:calc(var(--nav-h) + 3svh);bottom:4svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3.4svh,40px);z-index:2}
  .ch-create .ch-copy,.ch-create .ch-side{position:relative;width:auto}
  .ch-create .h2{font-size:var(--fs-h2)}
  .ch-create .ch-copy .body{margin-top:clamp(12px,2svh,20px)}
  .ch-create .ch-copy .ios{margin-top:14px}
  .ch-create .ch-fig,.motion .ch-create .ch-fig{left:calc(24% - var(--pwc) / 2);top:calc(var(--nav-h) + (100svh - var(--nav-h) - var(--pwc) * 2.084) / 2);width:var(--pwc)}
  .ch-create .vfx-wrap{margin:0}
  .wcw{max-width:30rem}
  /* the camera frame: a big viewfinder around the phone, thirds grid, REC and timecode */
  .vfx{inset:auto;left:50%;top:50%;width:min(48vw,var(--maxw) * .48);height:calc(100svh - var(--nav-h) - 2svh);min-height:480px;transform:translate(-50%,-50%);border-radius:2px}
  .vfx-grid{display:block;position:absolute;inset:0;background-repeat:no-repeat;
    background-image:linear-gradient(rgba(245,243,250,.1),rgba(245,243,250,.1)),linear-gradient(rgba(245,243,250,.1),rgba(245,243,250,.1)),linear-gradient(rgba(245,243,250,.1),rgba(245,243,250,.1)),linear-gradient(rgba(245,243,250,.1),rgba(245,243,250,.1));
    background-size:1px 100%,1px 100%,100% 1px,100% 1px;background-position:33.333% 0,66.666% 0,0 33.333%,0 66.666%}
  .vfx-c{width:34px;height:34px}
  .vfx-c.tl{border-top-width:2px;border-left-width:2px}.vfx-c.tr{border-top-width:2px;border-right-width:2px}
  .vfx-c.bl{border-bottom-width:2px;border-left-width:2px}.vfx-c.br{border-bottom-width:2px;border-right-width:2px}
  .vfx-rec{left:26px;top:24px;gap:10px;font-size:13px}
  .vfx-rec i{width:11px;height:11px}
  .vfx-rec span{font-size:clamp(1.5rem,2.2vw,2.2rem);margin-left:8px}
  .vfx-max{display:block;position:absolute;right:26px;top:26px;margin:0;font:500 13px/18px var(--f);color:var(--ink-3)}
}

/* ---------- 06 DISCOVER: a gallery that slides past a large phone, on a night ground ---------- */
.ch-discover .kw{--kw-m:15.4vw;opacity:.22}
.gal{position:relative;margin-top:26px;overflow:hidden;--gh:min(62vw,300px)}
.gal-track{display:flex;align-items:center;gap:14px;width:max-content;height:var(--gh);padding-inline:var(--gut);will-change:transform}
.gc{position:relative;flex:none;margin:0;height:calc(var(--gh) * var(--s,.7));aspect-ratio:var(--ar,16 / 9);border-radius:12px;overflow:hidden;background:var(--raised);
  opacity:.7;transition:opacity .4s var(--ease)}
.gc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gc::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0) 45%)}
.gc figcaption{position:absolute;z-index:1;left:12px;bottom:12px;padding:4px 10px;border-radius:12px;background:rgba(5,1,15,.74);font:500 13px/16px var(--f);color:#fff}
.gc.lit{opacity:1}
.gc-l{--s:.7;--ar:16 / 9}
.gc-p{--s:.94;--ar:4 / 5}
.gc-t{--s:.98;--ar:3 / 4}
.gc-w{--s:.52;--ar:2 / 1}
.dy-u{margin-top:calc(var(--gh) * -.14)}
.dy-d{margin-top:calc(var(--gh) * .14)}
html:not(.motion) .gc{opacity:1}
.ch-discover .ch-stage{display:flex;flex-direction:column}
.ch-discover .kw{order:1}
.ch-discover .stage-in{order:2}
.ch-discover .gal{order:3}
.motion .ch-discover .ch-stage{display:contents}
@media (max-width:959px){
  .ch-discover .stage-in,.motion .ch-discover .stage-in{display:contents}
  .ch-discover .ch-copy{order:2}
  .ch-discover .gal{order:3}
  .ch-discover .ch-fig{order:4}
}
@media (min-width:960px){
  .ch-discover .ch-stage,.motion .ch-discover .ch-stage{display:block;--gh:min(44svh,32vw,480px);--gt:calc(var(--nav-h) + 4svh + min(17.5rem,31svh) + 3svh)}
  .ch-discover .kw{left:0;right:0;top:calc(var(--gt) + var(--gh) / 2 - .4em);text-align:center;font-size:var(--kw-d);z-index:0}
  .ch-discover .ch-copy{left:0;top:calc(var(--nav-h) + 4svh);width:min(40rem,calc(100% - var(--pwc) - 8vw))}
  .ch-discover .ch-copy .h2{max-width:none}
  .ch-discover .ch-copy .body{margin-top:clamp(14px,1.8svh,22px)}
  .gal{position:absolute;left:0;right:0;top:var(--gt);margin:0;height:var(--gh);z-index:1}
  .gal-track{gap:2.2vw;padding-left:max(var(--gut),(100vw - var(--maxw)) / 2)}
  .ch-discover .ch-fig,.motion .ch-discover .ch-fig{right:0;left:auto;top:calc(var(--nav-h) + (100svh - var(--nav-h) - var(--pwc) * 2.084) / 2);width:var(--pwc);z-index:3}
}

/* ================= 07 IN CONTROL: the house lights come up. A light, warm ground: the one calm chapter. ================= */
.safe{--ink:#1B1033;--ink-2:rgba(27,16,51,.76);--ink-3:rgba(27,16,51,.66);--hair:rgba(27,16,51,.12);--hair-2:rgba(27,16,51,.2);--accent-ink:#5A1FE0;
  position:relative;padding:13svh 0 11svh;background:var(--house);color:var(--ink);color-scheme:light}
.safe .phone{--ink:#F5F3FA;--ink-2:rgba(245,243,250,.7);--ink-3:rgba(245,243,250,.56);--hair:rgba(255,255,255,.08);--hair-2:rgba(255,255,255,.14);--accent-ink:#A58BFF;color-scheme:dark}
.safe-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.kw-s{margin:0 0 18px;font-family:var(--fd);font-weight:800;font-stretch:125%;text-transform:uppercase;font-size:clamp(2.3rem,12vw,5.4rem);line-height:.8;letter-spacing:-.045em;color:var(--ink)}
.safe-fig{position:relative;display:flex;justify-content:center;gap:12px;margin:36px 0 8px}
.safe-fig{--phw:min(43vw,236px)}
.safe-fig .ph-b{margin-top:44px}
.ctrls{list-style:none;margin:28px 0 0;padding:0}
.ctrl{display:grid;grid-template-columns:24px minmax(0,1fr);gap:0 14px;padding:18px 0;border-top:1px solid var(--hair-2)}
.ctrl:last-child{border-bottom:1px solid var(--hair-2)}
.ic-draw{width:24px;height:24px;margin-top:1px;fill:none;stroke:var(--accent-ink);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.motion .ic-draw>*{stroke-dasharray:1;stroke-dashoffset:1}
.ctrl-t{margin:0;font:700 17px/22px var(--f);letter-spacing:-.01em}
.ctrl p{margin:6px 0 0;font-size:15px;line-height:22px;color:var(--ink-2)}
.ctrl p.fine{font-size:13px;line-height:18px;color:var(--ink-3)}
.safe a{color:var(--accent-ink)}
.safe-foot{margin-top:28px}
.links{display:flex;flex-wrap:wrap;gap:6px 20px;margin:10px 0 0;font:500 14px/22px var(--f)}
.links a{color:var(--accent-ink);text-decoration:none}
.links a:hover{text-decoration:underline}
.mini-store{margin-top:28px;padding-top:24px;border-top:1px solid var(--hair)}
.mini-t{margin:0 0 14px;font:700 18px/24px var(--f);letter-spacing:-.01em}
.safe .store{color:#fff}
.safe .store-ios{background:#1B1033;border-color:transparent}
@media (min-width:960px){
  .safe{padding:15svh 0 13svh}
  .safe-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--colgap);grid-template-areas:"head head head head head head head . fig fig fig fig" "list list list list list list list . fig fig fig fig" "foot foot foot foot foot foot foot . fig fig fig fig"}
  .safe-head{grid-area:head}
  .ctrls{grid-area:list;display:grid;grid-template-columns:1fr 1fr;gap:0 32px;margin-top:40px}
  .ctrl:last-child{border-bottom:0}
  .ctrls .ctrl:nth-last-child(-n+2){border-bottom:1px solid var(--hair-2)}
  .ctrl-t{font-size:clamp(17px,1.05vw,20px);line-height:1.3}
  .ctrl p{font-size:clamp(15px,.85vw,17px);line-height:1.5}
  .safe-foot{grid-area:foot}
  .safe-fig{grid-area:fig;align-self:start;position:sticky;top:calc(50svh - var(--phw) * 1.2);margin:0;justify-content:flex-start;--phw:clamp(200px,15vw,330px)}
  .safe-fig .ph-b{margin:64px 0 0 -18%}
}

/* ================= 08 HOW IT WORKS: a Hunt you can play through ================= */
/* Left: the four steps (the active one opens with its control). Right: the Hunt itself, its entries ranked by free
   votes, and a timeline you can drag. Scroll plays it; any click, drag or key takes over (Reset gives it back). */
.how{position:relative;padding:10svh 0 6svh}
.how-track{position:relative}
.how-stage{position:relative}
.how-run{display:none}
.how-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.how-intro{margin-top:16px}
.how-fine{margin-top:18px}
.hx-steps{list-style:none;margin:24px 0 0;padding:0}
.hx-step{border-top:1px solid var(--hair-2)}
.hx-step:last-child{border-bottom:1px solid var(--hair-2)}
.hx-tab{display:flex;align-items:baseline;gap:14px;width:100%;margin:0;padding:16px 0;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer;font:700 17px/1.3 var(--f);letter-spacing:-.01em}
.hx-n{flex:none;width:2.2rem;font:500 14px/1 var(--f);font-variant-numeric:tabular-nums;color:var(--ink-3);transition:color .3s var(--ease)}
.hx-tt{transition:color .3s var(--ease)}
.hx-step.on .hx-n{color:var(--accent-ink)}
.hx-b{padding:0 0 18px calc(2.2rem + 14px)}
.hx-b p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:40ch}
.hx-bt{display:none}
.hx-b .try{margin-top:12px}
.hx-themes{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;border:0}
.hx-themes legend{float:left;width:100%;margin:0 0 10px;padding:0;font:500 13px/18px var(--f);color:var(--ink-3)}
.hx-themes label{position:relative;cursor:pointer}
.hx-themes input{position:absolute;opacity:0;width:1px;height:1px}
.hx-themes span{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:20px;background:var(--raised);border:1px solid var(--hair-2);
  font:500 14px/1 var(--f);color:var(--ink);transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.hx-themes input:checked+span{background:var(--accent);border-color:transparent;color:#fff}
.hx-themes input:focus-visible+span{outline:2px solid var(--accent-ink);outline-offset:3px}
.hx-ctl{margin-top:14px}
.hx-enter{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px 0 16px;border:0;border-radius:23px;background:var(--accent);color:#fff;
  font:700 15px/1 var(--f);cursor:pointer;transition:background-color .2s var(--ease),opacity .2s}
.hx-enter:hover{background:var(--accent-hover)}
.hx-enter .i{width:18px;height:18px}
.hx-enter[aria-disabled="true"]{background:var(--raised);color:var(--ink-2);cursor:default}
/* the panel */
.hx-panel{--rh:56px;position:relative;padding:18px;border-radius:24px;background:var(--surface);border:1px solid var(--hair-2)}
.hx-hunt{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto;gap:12px 14px;align-items:center}
.hx-cover{grid-row:1;width:96px;height:96px;border-radius:14px;object-fit:cover;background:var(--raised)}
.hx-hunt-tx{grid-row:1;min-width:0}
.hx-by{display:inline-flex;align-items:center;gap:6px;font:500 12px/16px var(--f);color:var(--accent-ink)}
.hx-by .i{width:15px;height:15px}
.hx-title{display:block;margin-top:6px;font:700 clamp(1.4rem,5.4vw,1.75rem)/1 var(--fd);font-stretch:100%;letter-spacing:-.03em}
.hx-theme{display:block;margin-top:6px;font-size:13px;line-height:1.4;color:var(--ink-2)}
.hx-clock{grid-column:1 / -1;display:flex;align-items:center;gap:12px}
.hx-status{flex:none;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:14px;font:700 12px/1 var(--f);letter-spacing:.01em;
  background:rgba(60,201,138,.14);color:#6FE0AD;border:1px solid rgba(60,201,138,.3)}
.hx-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.hx-status.is-closed{background:rgba(245,243,250,.08);color:var(--ink-2);border-color:var(--hair-2)}
.hx-status.is-soon{background:rgba(165,139,255,.12);color:var(--accent-ink);border-color:rgba(165,139,255,.3)}
.hx-dl{display:flex;align-items:center;gap:8px;flex:1;color:var(--ink-3)}
.hx-dl .i{width:16px;height:16px}
.hx-dl-bar{position:relative;flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.hx-dl-bar i{position:absolute;inset:0;border-radius:inherit;background:var(--accent-ink);transform-origin:0 50%}
.hx-list-h{display:flex;align-items:baseline;justify-content:space-between;margin:20px 0 8px;font:700 15px/1.2 var(--f)}
.hx-list-h span{font:400 13px/1.2 var(--f);color:var(--ink-3)}
.hx-list{list-style:none;margin:0;padding:0;position:relative}
.hx-row{display:grid;grid-template-columns:28px 64px minmax(0,1fr) 24% 44px;align-items:center;gap:10px;height:var(--rh);padding:0 6px 0 8px;border-radius:14px;
  border:1px solid transparent;transition:background-color .4s var(--ease),border-color .4s var(--ease),opacity .4s var(--ease)}
.hx-rk{font:800 22px/1 var(--fd);font-stretch:125%;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink);text-align:center}
.hx-th{width:64px;height:40px;border-radius:8px;object-fit:cover;background:var(--raised)}
.hx-you{display:grid;place-items:center;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0)),#3a1d8f;color:#fff}
.hx-you .i{width:20px;height:20px}
.hx-t{min-width:0}
.hx-t b{display:block;font:700 15px/1.2 var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-t small{display:block;margin-top:2px;font:400 12px/1.2 var(--f);color:var(--ink-3)}
.hx-bar{position:relative;height:6px;border-radius:3px;background:rgba(245,243,250,.1);overflow:hidden}
.hx-bar i{position:absolute;inset:0;border-radius:inherit;background:rgba(165,139,255,.7);transform-origin:0 50%;transform:scaleX(var(--v,0))}
.w100{--v:1}.w87{--v:.87}.w83{--v:.83}.w78{--v:.78}.w48{--v:.48}
.hx-vote{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--hair-2);background:transparent;color:var(--ink-2);cursor:pointer;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .12s var(--ease)}
.hx-vote:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
.hx-vote:active{transform:scale(.94)}
.hx-vote .i{width:19px;height:19px}
.hx-vote[aria-pressed="true"]{background:var(--accent);border-color:transparent;color:#fff}
.hx-vote[aria-pressed="true"] .i{fill:currentColor}
.hx-vote[aria-disabled="true"]{opacity:.4;cursor:default}
.hx-vote.pop .i{animation:pop .24s var(--spring)}
.hx-row.is-you{background:linear-gradient(rgba(102,36,241,.16),rgba(102,36,241,.16)),var(--surface);border-color:rgba(165,139,255,.32)}
.js .hx-row.up{z-index:4}
.js .hx-row.down{z-index:1}   /* opaque rows; the one that climbs rides over the one it passes (as on the scoreboard) */
.hx-row.is-you .hx-vote{opacity:.38;cursor:not-allowed}
.hx-row.fin .hx-rk{color:var(--accent-ink)}
.hx-finale{position:absolute;z-index:3;left:8px;right:8px;top:calc(3 * var(--rh) - 11px);height:22px;margin:0;display:flex;align-items:center;justify-content:flex-end;gap:8px;
  padding-right:52px;pointer-events:none}
.hx-finale::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:50%;border-top:1px dashed rgba(165,139,255,.6)}
.hx-finale span{flex:none;height:22px;padding:0 9px;border-radius:11px;display:inline-flex;align-items:center;font:700 11px/1 var(--f);letter-spacing:.02em;
  color:#E3DAFF;background:#2a1868;border:1px solid rgba(165,139,255,.55)}
.hx-result{display:flex;align-items:center;gap:12px;min-height:56px;margin:16px 0 0;padding:10px 14px;border-radius:16px;background:rgba(245,243,250,.04);border:1px solid var(--hair-2);
  font-size:14px;line-height:1.45;color:var(--ink-2);transition:background-color .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease)}
.hx-result b{color:var(--ink)}
.hx-result.is-on{background:linear-gradient(90deg,rgba(102,36,241,.5),rgba(102,36,241,.14));border-color:rgba(165,139,255,.5);color:var(--ink)}
.hx-result .i{width:22px;height:22px;color:var(--accent-ink)}
.hx-result.is-on .i{color:#fff}
.hx-time{margin-top:18px}
.hx-time-l{display:block;margin-bottom:6px;font:500 12px/16px var(--f);color:var(--ink-3)}
.hx-range{display:block;width:100%;height:28px;margin:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;--p:100%}
.hx-range:focus{outline:none}
.hx-range:focus-visible{outline:2px solid var(--accent-ink);outline-offset:4px;border-radius:14px}
.hx-range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent-ink) var(--p),rgba(255,255,255,.14) var(--p))}
.hx-range::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.14)}
.hx-range::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent-ink)}
.hx-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:#fff;border:5px solid var(--accent)}
.hx-range::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:5px solid var(--accent)}
.hx-ticks{position:relative;height:18px;margin-top:4px;font:500 12px/18px var(--f);color:var(--ink-3)}
.hx-ticks span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.hx-ticks .t0{left:0;transform:none}
.hx-ticks .t1{left:22%}
.hx-ticks .t2{left:45%}
.hx-ticks .t3{left:82%}
.hx-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;min-height:28px}
.hx-say{margin:0;font-size:13px;line-height:1.45;color:var(--ink-3)}
.hx-reset{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--hair-2);border-radius:16px;background:none;color:var(--ink-2);
  font:500 13px/1 var(--f);cursor:pointer}
.hx-reset:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
.hx-reset .i{width:15px;height:15px}
/* hearts that float up as votes arrive (motion only) */
.hx-p{position:absolute;z-index:5;width:16px;height:16px;color:#C9B8FF;fill:currentColor;stroke:none;pointer-events:none}
/* JS on: rows sit in fixed slots and move by transform (the order is the rank) */
.js .hx-list{height:calc(5 * var(--rh))}
.js .hx-row{position:absolute;left:0;right:0;top:0;z-index:2;background:var(--surface);transform:translateY(calc(var(--pos,0) * var(--rh)));transition:transform .5s var(--ease),background-color .4s var(--ease),border-color .4s var(--ease),opacity .4s var(--ease)}
.js .hx-row.out{opacity:0;pointer-events:none}
.js .hx-step .hx-b{display:none}
.js .hx-step.on .hx-b{display:block}
.js .hx-finale{transition:opacity .4s var(--ease)}
.js .hx-finale.out{opacity:0}
.js .hx-empty{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:var(--ink-3);text-align:center;transition:opacity .3s}
.js .hx-empty.out{opacity:0}
.hx-empty{display:none}
/* the rank numbers belong to the slots, not to the rows: 1 to 5 stay put while the entries slide behind them */
.hx-slots{display:none}
.js .hx-slots{display:block;position:absolute;z-index:5;top:0;left:7px;width:22px;margin:0;padding:0;list-style:none;pointer-events:none}
.js .hx-slots li{display:flex;align-items:center;justify-content:center;height:var(--rh);font:800 20px/1 var(--fd);font-stretch:125%;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--ink);transition:opacity .3s var(--ease),color .3s var(--ease)}
.js .hx-slots li.off{opacity:0}
.js .hx-slots li.fin{color:var(--accent-ink)}
.js .hx-row .hx-rk{visibility:hidden}
html.rm .hx-step .hx-b{display:block}
@media (min-width:600px){.hx-panel{padding:22px}.hx-cover{width:150px;height:84px}.hx-hunt{grid-template-columns:150px minmax(0,1fr)}}
@media (max-width:959px){
  /* phones: the step numbers become a row of four tabs; the open step's title and control show under them */
  .js .hx-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 6px}
  .js .hx-step{display:contents}
  .js .hx-tab{grid-row:1;justify-content:center;padding:10px 0;border-radius:12px;border:1px solid var(--hair-2);font-size:0}
  .js .hx-tab .hx-tt{display:none}
  .js .hx-n{width:auto;font-size:14px}
  .js .hx-step.on .hx-tab{background:rgba(102,36,241,.22);border-color:rgba(165,139,255,.5)}
  .js .hx-b{grid-row:2;grid-column:1 / -1;padding:14px 0 4px}
  .js .hx-bt{display:block;margin-bottom:6px;font:700 17px/1.3 var(--f);color:var(--ink)}
  html.rm .hx-steps{display:block}
  html.rm .hx-step{display:block}
  html.rm .hx-tab{font-size:17px;justify-content:flex-start}
  html.rm .hx-tab .hx-tt{display:inline}
  html.rm .hx-bt{display:none}
  .hx-row{grid-template-columns:22px 46px minmax(0,1fr) 22% 44px;gap:8px;padding:0 4px 0 6px}
  .hx-th{width:46px;height:32px}
  .hx-rk{font-size:20px}
}
@media (min-width:960px){
  .how{padding:0}
  .how-stage{padding:15svh 0}
  .how-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--colgap);align-items:center}
  .how-text{grid-column:1 / span 5}
  .hx-panel{grid-column:7 / -1;--rh:clamp(48px,6.6svh,68px);padding:clamp(18px,2.6svh,28px)}
  .hx-tab{font-size:clamp(17px,1.15vw,21px)}
  .hx-b p{font-size:clamp(15px,.85vw,17px)}
  .hx-cover{width:clamp(150px,11vw,210px);height:auto;aspect-ratio:16 / 9}
  .hx-hunt{grid-template-columns:auto minmax(0,1fr)}
  .hx-title{font-size:clamp(1.6rem,2.3vw,2.6rem)}
  .hx-theme{font-size:14px}
  .hx-row{grid-template-columns:34px clamp(64px,5vw,88px) minmax(0,1fr) 26% 44px;gap:clamp(10px,1vw,16px);padding:0 10px 0 12px}
  .hx-rk{font-size:clamp(22px,1.8vw,30px)}
  .js .hx-slots{left:13px;width:34px}
  .js .hx-slots li{font-size:clamp(22px,1.8vw,30px)}
  .hx-th{width:100%;height:calc(var(--rh) - 16px)}
  .hx-t b{font-size:clamp(15px,1vw,17px)}
  /* motion: the stage sticks while its run scrolls through, and the scroll plays the Hunt */
  .motion .how-stage{position:sticky;top:0;height:100svh;padding:calc(var(--nav-h) + 2svh) 0 2svh;display:flex;align-items:center}
  .motion .how-stage>.wrap{width:min(100% - 2 * var(--gut),var(--maxw))}
  .motion .how-run{display:block;height:180svh}
  .motion .how-text .how-fine{margin-top:clamp(12px,2svh,20px)}
}
@media (min-width:960px) and (max-height:760px){
  .hx-panel{--rh:46px}
  .hx-list-h{margin:12px 0 6px}
  .hx-time{margin-top:10px}
  .hx-result{margin-top:8px;padding:6px 12px;min-height:48px}
  .motion .how-text .body{margin-top:8px}
  .hx-tab{padding:12px 0}
}
/* phones: the panel and the four tabs stick while the run scrolls (only where they fit the screen) */
.hx-now{display:none;margin:0 0 12px;font:700 13px/1.3 var(--f);color:var(--accent-ink)}
@media (max-width:959px){.js .hx-now{display:block}.hx-panel{--rh:50px}}
@media (max-width:959px) and (min-height:700px){
  .motion .how-stage,.motion .how-grid{display:contents}
  .motion .how-text,.motion .hx-panel{width:min(100% - 2 * var(--gut),var(--maxw));margin-inline:auto}
  .motion .hx-panel{position:sticky;z-index:2;top:calc(var(--nav-h) + 8px);margin-top:28px}
  .motion .how-run{display:block;height:130svh}
}

/* ================= 09 GET THE APP: the curtain call ================= */
.finale{position:relative;padding:12svh 0 9svh;text-align:center;overflow:hidden}
.finale-light{--cx:50%;--pool-w:min(90vw,520px);--pool-y:calc(12svh + 130px)}
.finale-light .cone{height:calc(12svh + 260px)}
.finale-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.finale-mark{display:block;width:120px;height:120px;margin:10px auto 34px}
.finale .h2{margin-inline:auto;max-width:13ch}
@media (min-width:960px){.finale .h2{max-width:none}.finale .h2 .ln{display:block}}
.finale .lead{margin:22px auto 0;max-width:42ch}
.finale-get{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:34px}
.finale .stores{justify-content:center}
.finale .fine{margin-top:22px}
.qr{display:none}
@media (min-width:960px) and (pointer:fine){
  .finale-get{flex-direction:row;gap:28px;padding:16px 16px 16px 16px;border-radius:24px;border:1px solid var(--hair-2);background:rgba(20,10,46,.6)}
  .finale-get .stores{padding-left:8px}
  .qr{display:flex;align-items:center;gap:16px;padding-left:28px;border-left:1px solid var(--hair-2);text-align:left}
  .qr-svg{display:block;width:120px;height:120px}
  .qr-l{margin:0;max-width:15ch;font-size:14px;line-height:1.45;color:var(--ink-2)}
}
@media (min-width:960px){.finale-mark{width:144px;height:144px}}

/* ================= FAQ: programme notes ================= */
.faq{position:relative;padding:8svh 0 10svh}
.faq-grid{display:grid;gap:28px}
.faq-head .body{margin-top:16px}
.mail{margin-left:6px;color:var(--accent-ink);white-space:nowrap}
.faq-list details{border-top:1px solid var(--hair-2)}
.faq-list details:last-child{border-bottom:1px solid var(--hair-2)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;list-style:none;cursor:pointer;
  font:500 17px/24px var(--f);color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary .i{width:20px;height:20px;color:var(--ink-2);transition:transform .2s var(--ease)}
.faq-list details[open] summary .i{transform:rotate(45deg);color:var(--accent-ink)}
.faq-list summary:hover{color:#fff}
.ans{padding:0 0 18px}
.ans p{margin:0;max-width:60ch;font-size:15px;line-height:23px;color:var(--ink-2)}
.ans p+p{margin-top:8px}
@media (min-width:960px){
  .faq{padding:10svh 0 12svh}
  .faq-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--colgap)}
  .faq-head{grid-column:1 / span 5;position:sticky;top:calc(var(--nav-h) + 40px);align-self:start}
  .faq-list{grid-column:7 / -1}
  .faq-list summary{font-size:clamp(18px,1.1vw,20px);line-height:1.4;padding:20px 0}
  .ans p{font-size:clamp(15px,.85vw,17px);line-height:1.55}
}

/* ================= footer: credits ================= */
.foot{background:var(--stage);border-top:1px solid var(--hair);padding:48px 0 calc(28px + env(safe-area-inset-bottom,0px));font-size:14px;line-height:22px;color:var(--ink-2)}
.foot-cols{display:grid;gap:28px}
.brandline{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:700 17px/22px var(--f);color:var(--ink)}
.brandline img{width:28px;height:28px}
.foot-brand p{margin:0;max-width:34ch}
.foot-h{margin:0 0 8px;font:700 14px/20px var(--f);color:var(--ink)}
.foot ul{list-style:none;margin:0;padding:0}
.foot ul a{color:var(--ink-2);text-decoration:none;line-height:30px}
.foot ul a:hover{color:var(--ink)}
.foot-legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--hair);font-size:13px;line-height:20px;color:var(--ink-3)}
.foot-legal p{margin:0 0 4px}
.credits a{color:var(--ink-3)}
@media (min-width:960px){.foot-cols{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--colgap)}.foot-brand{grid-column:1 / span 5}.foot-cols nav:nth-of-type(1){grid-column:7 / span 3}.foot-cols nav:nth-of-type(2){grid-column:10 / span 3}}

/* ================= toast (the vote demos). Flat, never glass. ================= */
.toast{position:fixed;z-index:60;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:10px;height:48px;padding:0 20px 0 16px;
  border-radius:24px;background:#1A1033;border:1px solid var(--hair-2);color:#F5F3FA;font:500 14px/20px var(--f);white-space:nowrap;
  opacity:0;transform:translate(-50%,12px);pointer-events:none;transition:opacity .24s var(--ease),transform .24s var(--spring)}
.toast .i{width:18px;height:18px;color:#A58BFF;fill:currentColor;fill-opacity:1}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ================= reduced motion: every chapter already shows its end state (no .motion class) ================= */
@media (prefers-reduced-motion:reduce){
  html{transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .seg .lens,.u-sheet,.slot img,.toast,.cine img,.hx-row,.hx-finale,.hx-result,.screen[data-screens]>.ui[data-k]{transition:none!important}
  .nav{transition:background-color .2s,border-color .2s}
}
.hx-lw{position:relative}