/* ============================ THEME TOKENS ============================
   NIGHT OUT — a camcorder tape of a night at Club Kira.
     Language: near-black with visible grain, disco silver as the material,
     velvet red for the one warm surface (the menu), riso blue for the
     printed thing you get handed (the ticket), and light that misbehaves —
     acid-yellow HUD, blinking REC, prismatic tracking lines.
     Type: Bodoni Moda 900 for the big words, Silkscreen (pixel) for HUD
     labels / timecodes / the ticket, Instrument Sans for reading.
     One signature motion: the viewfinder — a running timecode over the hero
     frame, and the tape's rewind as the machine's loading state.
   ====================================================================== */
  :root{
    --ink:#07050C; --ink2:#0F0B17; --ink3:#181224; --line:#241C36;
    --silver:#D7D9E0; --silver2:#9A9BA8; --silver3:#5E5D6E;
    --velvet:#7B1A1F; --velvet2:#A32630; --riso:#6FBDEB; --riso-ink:#0E2E55;
    --cyan:#4FE3D6; --acid:#EFE24B; --pink:#FF3D9E; --hud:#FFE27A; --rec:#FF3B3B;
    --white:#fff; --mute:rgba(215,217,224,.7);
    --serif:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;
    --pixel:"Silkscreen","Press Start 2P",monospace;
    --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
    /* aliases the shared activity-menu skins itself from */
    --navy:#0F0B17; --green:#EFE24B; --red2:#EFE24B; --char:#0F0B17; --char2:#181224; --blue:#07050C;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  /* the viewport is locked on phones: no sideways drift from the ticker or
     the hero's oversized frame, no pinch-zoom on a page built for the thumb */
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--ink);overflow-x:hidden;overscroll-behavior-x:none}
  body{font-family:var(--sans);background:var(--ink);color:var(--silver);display:flex;justify-content:center;-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100vw;touch-action:pan-y}
  .h5{overflow-x:clip}
  body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:8000;opacity:.13;mix-blend-mode:screen;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  .h5{position:relative;width:min(460px,100vw);background:var(--ink);min-height:100vh}
  .px{font-family:var(--pixel);letter-spacing:.06em}

  /* ---------- preloader: a tape loading ---------- */
  .preloader{position:fixed;inset:0;background:var(--ink);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .85s cubic-bezier(.76,0,.24,1)}
  .preloader.done{transform:translateY(-100%)}
  .pl-lockup{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:clamp(8px,2.5vw,18px);padding:0 14px;max-width:100%}
  .pl-logo{height:clamp(24px,6.5vw,44px);width:auto;flex:0 0 auto;display:block;opacity:0;animation:plUp .6s cubic-bezier(.2,.8,.2,1) .05s forwards}
  .pl-x{font-family:var(--serif);font-weight:400;font-size:clamp(16px,4.5vw,30px);line-height:1;color:#fff;opacity:.45;animation:plxin .5s ease .16s both}
  @keyframes plUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes plxin{from{opacity:0;transform:translateY(10px)}to{opacity:.4;transform:none}}
  .pl-mark{font-family:var(--serif);font-weight:900;color:#fff;font-size:clamp(28px,8vw,56px);letter-spacing:-.03em;line-height:1.1;white-space:nowrap;clip-path:inset(0 100% 0 0);animation:plReveal 1.4s cubic-bezier(.76,0,.24,1) .15s forwards;text-shadow:0 0 28px rgba(255,61,158,.35)}
  @keyframes plReveal{to{clip-path:inset(0 0 0 0)}}
  .pl-count{position:absolute;bottom:38px;left:0;right:0;text-align:center;font-family:var(--pixel);color:var(--hud);font-size:12px;letter-spacing:.08em}
  .pl-rec{color:var(--rec);animation:blink 1.1s steps(2) infinite}
  .pl-bar{position:absolute;bottom:0;left:0;height:3px;width:0;background:var(--acid)}
  .pl-spider{display:none}
  @keyframes blink{to{opacity:0}}

  /* reveal */
  .rv{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
  .rv.in{opacity:1;transform:none}
  .rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}

  /* ---------- top bar ---------- */
  .topbar{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:16px 18px}
  .logo-img{height:34px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
  .tb-right{display:flex;align-items:center;gap:9px}
  .tb-link{font-family:var(--pixel);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#fff;text-decoration:none;background:rgba(7,5,12,.55);border:1px solid rgba(255,255,255,.28);padding:8px 11px;border-radius:2px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .tb-link[hidden]{display:none}

  /* ---------- hero: the viewfinder ---------- */
  .hero{position:relative;height:88vh;height:88svh;min-height:600px;max-height:860px;overflow:hidden;background:#000}
  .hero .heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.12);transform-origin:center;filter:contrast(1.06) saturate(1.05)}
  body.ready.go .hero .heroimg{animation:kb 12s ease-out forwards}
  @keyframes kb{from{transform:scale(1.12)}to{transform:scale(1)}}
  /* the tape scrubs through Leila's shots: two stacked frames, the next one
     cut in with a one-frame flash of static rather than a crossfade — a
     camcorder doesn't dissolve */
  .hero .heroimg.next{opacity:0;animation:none;transform:scale(1)}
  .hero .heroimg.next.on{opacity:1}
  .hero.cut .scan{background:repeating-linear-gradient(180deg,rgba(255,255,255,.35) 0 2px,transparent 2px 4px)}
  .hud .lbl{left:0;top:92px;color:var(--hud);text-transform:uppercase}
  .scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px);mix-blend-mode:screen}
  .hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,5,12,.4) 0%,transparent 28%,transparent 52%,rgba(7,5,12,.94) 82%,var(--ink) 100%)}
  .hud{position:absolute;inset:16px;font-family:var(--pixel);font-size:10px;letter-spacing:.06em;color:#fff;text-shadow:0 1px 0 #000;pointer-events:none;z-index:3}
  .hud span{position:absolute}
  .hud .rec{left:0;top:52px;color:var(--rec);animation:blink 1.1s steps(2) infinite}
  .hud .tc{right:0;top:52px}
  .hud .sp{left:0;top:72px}
  .hud .dt{right:0;top:72px;color:var(--hud)}
  .bat{display:inline-flex;gap:1px;border:1px solid currentColor;padding:1px;height:9px;width:16px;vertical-align:middle;position:relative}
  .bat b{flex:1;background:currentColor}
  .corner{position:absolute;width:16px;height:16px;border:2px solid rgba(255,255,255,.85)}
  .corner.tl{left:0;top:100px;border-right:0;border-bottom:0}.corner.tr{right:0;top:100px;border-left:0;border-bottom:0}
  .corner.bl{left:0;bottom:0;border-right:0;border-top:0}.corner.br{right:0;bottom:0;border-left:0;border-top:0}
  .hero .content{position:absolute;left:0;right:0;bottom:26px;padding:0 20px;z-index:4}
  .eyebrow{font-family:var(--pixel);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--acid)}
  .title{font-family:var(--serif);font-weight:900;font-size:clamp(66px,19vw,104px);line-height:.84;color:#fff;letter-spacing:-.035em;margin:10px 0 8px;text-shadow:0 0 30px rgba(255,61,158,.35)}
  .title span{display:block}
  .hashtag{font-family:var(--pixel);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--acid);margin:0 0 10px}
  .tagline{font-size:clamp(14px,4vw,16px);font-weight:400;color:var(--silver);margin-bottom:16px;max-width:36ch;line-height:1.45}
  .heroup{opacity:0;transform:translateY(26px)}
  body.ready.go .heroup{animation:up .8s cubic-bezier(.2,.8,.2,1) forwards}
  body.ready.go .heroup.a2{animation-delay:.16s}
  body.ready.go .heroup.a3{animation-delay:.32s}
  body.ready.go .heroup.a4{animation-delay:.48s}
  @keyframes up{to{opacity:1;transform:none}}
  body.skip-intro .heroup{animation:none;opacity:1;transform:none}
  body.skip-intro .hero .heroimg{animation:none;transform:scale(1)}

  /* ---------- buttons ---------- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--acid);color:var(--ink);font-family:var(--pixel);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:14px 18px;border:0;border-radius:2px;text-decoration:none;cursor:pointer;transition:transform .12s ease,background .15s ease;box-shadow:0 12px 30px -12px rgba(239,226,75,.55)}
  .btn:hover{background:#F6EB6A}
  .btn:active{transform:scale(.97)}
  .btn.full{width:100%}
  .btn.kicked{animation:btnpop .42s cubic-bezier(.34,1.56,.64,1)}
  @keyframes btnpop{30%{transform:scale(1.06)}100%{transform:scale(1)}}
  .btn.is-ended{background:var(--ink3)!important;color:var(--silver3)!important;box-shadow:none!important;cursor:default;pointer-events:none}

  /* ---------- ticker ---------- */
  .ticker{background:var(--acid);color:var(--ink);overflow:hidden;white-space:nowrap;font-family:var(--pixel);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:9px 0;border-top:1px solid #000;border-bottom:1px solid #000}
  .ticker span{display:inline-block;animation:slide 38s linear infinite}
  .ticker span i{font-style:normal;margin:0 8px;opacity:.55}
  @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ---------- sections ---------- */
  section{padding:40px 20px}
  .sec-eyebrow{display:block;font-family:var(--pixel);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px}
  h2{font-family:var(--serif);font-weight:700;font-size:clamp(30px,8.5vw,40px);line-height:1;color:#fff;letter-spacing:-.01em;margin-bottom:10px;text-wrap:balance}
  .lead{color:var(--silver2);font-size:15px;line-height:1.5;margin-bottom:20px;max-width:40ch}

  /* proof */
  .proof{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line);background:var(--ink2);padding:16px 18px}
  .proof .num{font-family:var(--pixel);font-size:22px;color:#fff;letter-spacing:.04em;line-height:1}
  .proof .lbl{font-family:var(--pixel);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--silver3);margin-top:6px}
  .avs{display:flex}
  .avs img{width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);margin-left:-9px;object-fit:cover;background:var(--ink3)}
  .avs img:first-child{margin-left:0}

  /* steps */
  .steps{display:grid;gap:0;border-top:1px solid var(--line)}
  .step{display:grid;grid-template-columns:76px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
  .step .n{font-family:var(--pixel);font-size:11px;color:var(--cyan);letter-spacing:.05em;padding-top:4px}
  .step h3{font-family:var(--serif);font-weight:700;font-size:21px;color:#fff;margin-bottom:4px}
  .step p{color:var(--silver2);font-size:14px;line-height:1.5}

  .divider{padding:0 20px;margin:6px 0 0}
  .divider img{width:100%;height:auto;display:block;opacity:.9}

  #block[hidden]{display:none}
  #blockRoot{margin-top:4px}

  /* reward ladder */
  .reward{background:var(--ink2);border:1px solid var(--line);padding:22px 18px}
  .reward .rtop{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
  .reward .rtitle{font-family:var(--serif);font-size:28px;line-height:.95;color:#fff;font-weight:400}
  .reward .rtitle b{font-weight:900}
  .reward .rtoday{text-align:right;font-family:var(--pixel);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--silver3);line-height:1.5}
  .reward .rtoday b{display:block;font-size:20px;color:var(--acid);letter-spacing:0}
  .reqline{font-size:13px;color:var(--silver2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin-bottom:16px}
  .reqline b{color:#fff}
  .ladder{position:relative;padding-left:12px}
  .track{position:absolute;left:14px;top:12px;bottom:12px;width:2px;background:var(--line)}
  .track .fill{display:block;width:100%;height:0;background:var(--acid);transition:height 1.4s cubic-bezier(.2,.8,.2,1) .2s}
  .in .track .fill{height:100%}
  .tier{display:flex;align-items:center;gap:14px;padding:10px 0;opacity:0;transform:translateX(-8px);transition:opacity .5s ease,transform .5s ease}
  .in .tier{opacity:1;transform:none}
  .in .tier:nth-child(2){transition-delay:.15s}.in .tier:nth-child(3){transition-delay:.3s}.in .tier:nth-child(4){transition-delay:.45s}
  .tier .dot{font-family:var(--pixel);font-size:8px;color:var(--ink);background:var(--acid);padding:6px 5px;border-radius:2px;position:relative;z-index:1;letter-spacing:.04em}
  .tier .info .w{font-size:14px;color:#fff}
  .tier .info .r{font-family:var(--pixel);font-size:9px;color:var(--cyan);letter-spacing:.06em;margin-top:2px}
  .reward .btn{margin-top:16px}

  /* the wall — a waterfall: two columns, each tile at the post's own ratio,
     so vertical and horizontal clips sit together the way a real tape does */
  .wall{columns:2;column-gap:6px}
  .clipx{position:relative;display:block;background:#000;border:1px solid var(--line);overflow:hidden;text-decoration:none;break-inside:avoid;margin:0 0 6px}
  .clipx img{width:100%;height:auto;display:block;filter:saturate(.92)}
  .clipx.h img{aspect-ratio:4/3;object-fit:cover}
  .clipx.v img{aspect-ratio:3/4;object-fit:cover}
  .clipx::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px);mix-blend-mode:screen}
  .clipx b{position:absolute;left:8px;bottom:6px;font-family:var(--pixel);font-size:8px;color:var(--hud);text-shadow:0 1px 0 #000;letter-spacing:.05em}
  .clipx i{position:absolute;right:8px;top:6px;font-family:var(--pixel);font-size:7px;color:#fff;opacity:.85;font-style:normal;letter-spacing:.05em;text-shadow:0 1px 0 #000}
  .wall-empty{font-family:var(--pixel);font-size:9px;letter-spacing:.06em;color:var(--silver3);text-transform:uppercase;line-height:1.8;padding:18px;border:1px dashed var(--line);text-align:center}
  .wall-empty[hidden]{display:none}
  .wall-cta{text-align:center;margin-top:18px}
  .btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);box-shadow:none}
  .btn.ghost:hover{background:rgba(255,255,255,.08)}

  footer{padding:40px 20px 110px;text-align:center;border-top:1px solid var(--line)}
  .fine{font-size:11px;color:var(--silver3);line-height:1.6;margin-top:16px;text-align:left}

  /* sticky bar */
  .stickybar{position:fixed;bottom:0;left:50%;transform:translate(-50%,110%);width:min(460px,100vw);background:rgba(15,11,23,.92);border-top:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:12px 16px;display:flex;align-items:center;z-index:900;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  .stickybar.show{transform:translate(-50%,0)}
  .stickybar .s-left{font-family:var(--pixel);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--silver3);line-height:1.5}
  .stickybar .s-left b{display:block;font-size:11px;color:var(--acid);letter-spacing:.06em}
  .stickybar .btn{padding:11px 13px;font-size:9px}

  /* ============================ THE TAPE (block.js) ============================ */
  .cam{background:linear-gradient(180deg,#2A2833,#15141A);border-radius:14px;padding:10px;box-shadow:0 30px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12)}
  .cam-top{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 10px;font-family:var(--pixel);font-size:8px;color:#8E8F9A;letter-spacing:.1em;text-transform:uppercase}
  .cam-top i{width:10px;height:10px;border-radius:50%;background:var(--rec);box-shadow:0 0 8px var(--rec);display:inline-block;vertical-align:middle;margin-right:6px}
  .cam-top i.off{background:#3A3843;box-shadow:none}
  .vf{position:relative;aspect-ratio:4/3;background:#000;border-radius:4px;overflow:hidden;box-shadow:inset 0 0 0 3px #0A0A0E}
  .vf::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px);mix-blend-mode:screen;z-index:2}
  /* The viewfinder never turns: a horizontal clip fills it, a vertical one
     sits inside it with black bars, like a vertical picture on a landscape
     screen (Leila, 2026-09-09). Same rule on the tape thumbs and the ticket. */
  .vf img.frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
  .vf img.frame.v{object-fit:contain}
  .vf .hud{inset:12px}
  .vf .hud .rec{top:0}.vf .hud .tc{top:0}.vf .hud .sp{top:auto;bottom:0}.vf .hud .dt{top:auto;bottom:0}
  .vf .corner.tl{left:10px;top:10px}.vf .corner.tr{right:10px;top:10px}.vf .corner.bl{left:10px;bottom:10px}.vf .corner.br{right:10px;bottom:10px}
  .vf .st{position:absolute;inset:0;display:none}
  .vf[data-state="door"]{aspect-ratio:auto}
  .vf[data-state="door"] .st-door{display:block;position:relative}
  .vf[data-state="door"] .corner.bl,.vf[data-state="door"] .corner.br,.vf[data-state="door"] .hud .sp,.vf[data-state="door"] .hud .dt{display:none}
  .vf[data-state="rec"] .st-rec,.vf[data-state="frame"] .st-frame,.vf[data-state="ticket"] .st-ticket{display:block}
  .vf[data-state="ticket"] .hud .sp,.vf[data-state="ticket"] .hud .dt,.vf[data-state="ticket"] .corner{display:none}
  /* door */
  .st-door{background:#0A0812;padding:36px 14px 14px}
  .door{display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:start}
  .selfie{aspect-ratio:3/4;background:#161221;border:1px dashed #4A4160;display:grid;place-items:center;text-align:center;font-family:var(--pixel);font-size:8px;color:var(--silver2);letter-spacing:.06em;cursor:pointer;overflow:hidden;position:relative;line-height:1.7}
  .selfie img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
  .selfie.has img{display:block}.selfie.has span{display:none}
  .selfie.miss{border-color:var(--rec)}
  .selfie input{display:none}
  .fields{display:grid;gap:8px}
  .fields label{font-family:var(--pixel);font-size:8px;color:var(--silver3);letter-spacing:.08em;text-transform:uppercase}
  .fields input{width:100%;background:#161221;border:1px solid #3A3150;color:#fff;padding:10px;font:inherit;font-size:15px;border-radius:2px}
  .fields input:focus{outline:2px solid var(--acid);outline-offset:1px}
  .sex{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .sx{background:#161221;border:1px solid #3A3150;color:var(--silver2);font-family:var(--pixel);font-size:9px;letter-spacing:.06em;padding:9px 0;border-radius:2px;cursor:pointer}
  .sx.on{background:var(--acid);color:var(--ink);border-color:var(--acid)}
  .sex.miss .sx{border-color:var(--rec)}
  .fields .hint{font-family:var(--pixel);font-size:8px;color:var(--acid);letter-spacing:.06em;line-height:1.7}
  .menu{margin-top:12px;background:var(--velvet);padding:10px 12px;color:#F6E7E3;box-shadow:inset 0 0 60px rgba(0,0,0,.3)}
  .menu .h{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--pixel);font-size:8px;letter-spacing:.08em;color:#F9C7CC;border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:6px;margin-bottom:4px}
  .menu .h b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:17px;color:#fff;letter-spacing:0}
  .menu label{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px dotted rgba(255,255,255,.22);cursor:pointer;gap:10px}
  .menu label:last-child{border-bottom:0}
  .menu input{position:absolute;opacity:0;width:0;height:0}
  .menu .n{font-family:var(--serif);font-weight:700;font-size:16px;color:#fff}
  .menu .v{font-family:var(--pixel);font-size:7px;color:#F9C7CC;letter-spacing:.06em;white-space:nowrap;text-transform:uppercase}
  .menu label:has(input:checked){background:rgba(255,255,255,.12);margin:0 -12px;padding-left:12px;padding-right:12px}
  .menu label:has(input:checked) .n::before{content:"● ";color:var(--acid)}
  .menu label:has(input:focus-visible){outline:2px solid var(--acid)}
  /* rec */
  .st-rec{background:#000}
  .static{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.5;animation:jit .12s steps(2) infinite}
  @keyframes jit{to{transform:translateY(-3px)}}
  .track-bar{position:absolute;left:0;right:0;height:18px;background:linear-gradient(180deg,transparent,rgba(79,216,233,.5),rgba(255,44,156,.5),transparent);animation:roll 1.6s linear infinite;mix-blend-mode:screen}
  @keyframes roll{from{top:-20px}to{top:100%}}
  .rew{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--pixel);font-size:20px;color:#fff;text-shadow:0 1px 0 #000;letter-spacing:.06em;text-align:center;line-height:1.6;z-index:3}
  .rew small{display:block;font-size:9px;color:var(--hud)}
  .rew .msg{display:block;font-size:8px;color:var(--silver2);margin-top:6px;max-width:26ch;line-height:1.6}
  /* frame */
  .st-frame .lbl{position:absolute;left:12px;bottom:28px;font-family:var(--pixel);font-size:9px;color:var(--hud);text-shadow:0 1px 0 #000;letter-spacing:.06em;z-index:3;text-transform:uppercase}
  .jitter{animation:hold 3s steps(1) infinite}
  @keyframes hold{0%,92%{transform:translate(0,0)}94%{transform:translate(0,-1px)}96%{transform:translate(1px,0)}98%{transform:translate(0,1px)}}
  /* ticket */
  .st-ticket{background:#0A0812;padding:30px 12px 12px}
  .tk{background:var(--riso);color:var(--riso-ink);padding:10px;height:100%;display:grid;grid-template-columns:1fr 22px;grid-template-rows:auto 1fr auto auto;gap:6px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0.1 0 0 0 0 0.3 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  .tk .t1{grid-column:1/-1;display:flex;justify-content:space-between;font-family:var(--pixel);font-size:7px;letter-spacing:.06em;border-bottom:2px solid var(--riso-ink);padding-bottom:4px;text-transform:uppercase}
  .tk .ph{grid-column:1;background:#000;position:relative;overflow:hidden;min-height:0}
  .tk .ph img{width:100%;height:100%;object-fit:cover;display:block;background:#000}
  .tk .ph img.v{object-fit:contain}
  .tk .ph b{position:absolute;right:6px;bottom:4px;font-family:var(--pixel);font-size:7px;color:var(--hud);text-shadow:0 1px 0 #000}
  .tk .side{grid-column:2;grid-row:2;writing-mode:vertical-rl;font-family:var(--pixel);font-size:6.5px;letter-spacing:.06em;border:1.5px solid var(--riso-ink);padding:4px 3px;text-align:center;text-transform:uppercase}
  .tk .t2{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--riso-ink);border-bottom:2px solid var(--riso-ink);padding:5px 0}
  .tk .t2 b{font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:-.02em}
  .tk .t2 i{font-family:var(--serif);font-size:12px}
  .tk .t3{grid-column:1/-1;font-family:var(--pixel);font-size:7px;letter-spacing:.06em;display:flex;justify-content:space-between;text-transform:uppercase}
  /* the host banner: who put you on the list (?i= arrivals) */
  .host{margin:0 0 14px}
  .host[hidden]{display:none}
  .hb{background:var(--riso);color:var(--riso-ink);padding:12px 14px;display:grid;gap:3px;border-left:6px solid var(--riso-ink)}
  .hb .hk{font-family:var(--pixel);font-size:8px;letter-spacing:.1em}
  .hb b{font-family:var(--sans);font-weight:600;font-size:20px;letter-spacing:-.02em;line-height:1.1;text-transform:uppercase}
  .hb span:last-child{font-family:var(--pixel);font-size:8px;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
  /* controls */
  .ctrl{display:grid;gap:8px;padding:12px 6px 4px}
  .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .row[hidden]{display:none}
  .k{background:linear-gradient(180deg,#3A3843,#1E1D25);color:#fff;border:1px solid #4A4855;border-radius:4px;padding:12px 10px;font-family:var(--pixel);font-size:10px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;line-height:1.4}
  .k.rec{background:var(--rec);border-color:#B22;color:#fff;font-size:12px;padding:16px}
  .k.acid{background:var(--acid);color:var(--ink);border-color:#B8AD2C}
  .k.q{background:transparent;color:var(--silver2);border-color:#3A3150}
  .k.wide{grid-column:1/-1}
  .k:disabled{opacity:.35;cursor:not-allowed}
  .k[hidden]{display:none}
  .status{font-family:var(--pixel);font-size:8px;color:var(--silver3);letter-spacing:.06em;text-align:center;padding:6px 0 2px;min-height:20px;line-height:1.7}
  .status.err{color:var(--rec)}.status.ok{color:var(--acid)}
  /* tape chapters */
  .tape{margin-top:18px}
  .tape .h{display:flex;justify-content:space-between;font-family:var(--pixel);font-size:9px;color:var(--silver2);letter-spacing:.06em;margin-bottom:8px;text-transform:uppercase}
  .clips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;touch-action:pan-x pan-y}
  .clip{flex:0 0 132px;aspect-ratio:4/3;position:relative;background:#000;border:1px solid var(--line);overflow:hidden;cursor:pointer;padding:0}
  .clip img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);display:block;background:#000}
  .clip img.v{object-fit:contain}
  .clip b{position:absolute;left:6px;bottom:5px;font-family:var(--pixel);font-size:8px;color:var(--hud);text-shadow:0 1px 0 #000}
  .clip.sel{border-color:var(--acid)}
  .clip.empty{display:grid;place-items:center;font-family:var(--pixel);font-size:8px;color:var(--silver3);letter-spacing:.06em;border-style:dashed;cursor:default}
  .plays{margin-top:12px;font-family:var(--pixel);font-size:8px;color:var(--silver3);letter-spacing:.06em;text-transform:uppercase;line-height:1.8}
  .plays b{color:var(--acid)}
  .toast{position:fixed;left:50%;bottom:88px;transform:translate(-50%,20px);background:#fff;color:var(--ink);font-family:var(--pixel);font-size:9px;letter-spacing:.06em;padding:12px 14px;border-radius:2px;opacity:0;transition:opacity .25s ease,transform .25s ease;z-index:9500;max-width:min(92vw,420px);text-align:center;line-height:1.6;pointer-events:none}
  .toast.show{opacity:1;transform:translate(-50%,0)}

  /* ---------- auth / ended modals ---------- */
  .auth-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:24px}
  .auth-modal[hidden]{display:none}
  .auth-backdrop{position:absolute;inset:0;background:rgba(7,5,12,.8);backdrop-filter:blur(6px)}
  .auth-card{position:relative;z-index:1;width:min(380px,92vw);background:var(--ink2);border:1px solid var(--line);border-radius:4px;padding:32px 26px 24px;text-align:center;box-shadow:0 30px 60px rgba(0,0,0,.6);animation:authpop .42s cubic-bezier(.34,1.56,.64,1)}
  @keyframes authpop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
  .auth-x{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--mute);font-size:26px;line-height:1;cursor:pointer}
  .auth-logo{height:28px;width:auto;margin:0 auto 18px;display:block}
  .auth-title{font-family:var(--serif);font-weight:700;font-size:26px;color:#fff;margin-bottom:8px}
  .auth-body{font-size:14px;color:var(--mute);line-height:1.5;margin-bottom:22px}

  /* ---------- language + share ---------- */
  .lang{position:relative;display:inline-block;margin-top:18px}
  .lang-btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink2);color:#fff;border:1px solid var(--line);border-radius:2px;padding:9px 15px;font-family:var(--pixel);font-size:9px;letter-spacing:.06em;cursor:pointer;transition:border-color .15s ease}
  .lang-btn:hover{border-color:rgba(255,255,255,.28)}
  .lang-globe{font-size:14px;opacity:.85}
  .lang-chev{opacity:.55}
  .lang-menu{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--ink3);border:1px solid var(--line);border-radius:4px;padding:6px;display:none;flex-direction:column;min-width:150px;max-height:248px;overflow:auto;box-shadow:0 18px 44px -12px rgba(0,0,0,.65);z-index:50}
  .lang-menu.open{display:flex}
  .lang-opt{background:none;border:none;color:rgba(255,255,255,.82);font-family:var(--sans);font-size:13px;font-weight:500;text-align:left;padding:9px 12px;border-radius:2px;cursor:pointer;white-space:nowrap}
  .lang-opt:hover{background:rgba(255,255,255,.08);color:#fff}
  .lang-opt.sel{color:var(--acid)}
  .share-wrap{position:relative}
  .share-btn{width:36px;height:36px;display:grid;place-items:center;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:50%;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .15s ease}
  .share-btn:hover{border-color:rgba(255,255,255,.3)}
  .share-btn svg{width:17px;height:17px;transform:translateX(-1px)}
  .share-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--ink3);border:1px solid var(--line);border-radius:4px;padding:6px;display:flex;flex-direction:column;min-width:174px;box-shadow:0 18px 44px -12px rgba(0,0,0,.6);z-index:60}
  .share-menu[hidden]{display:none}
  .share-wrap.up .share-menu{top:auto;bottom:calc(100% + 8px)}
  .share-opt{display:flex;align-items:center;gap:11px;background:none;border:none;color:rgba(255,255,255,.85);font-family:var(--sans);font-size:14px;font-weight:500;text-align:left;padding:10px 12px;border-radius:2px;cursor:pointer;text-decoration:none;white-space:nowrap;width:100%}
  .share-opt:hover{background:rgba(255,255,255,.08);color:#fff}
  .share-opt svg{width:17px;height:17px;flex:0 0 auto;color:var(--acid)}

  /* ---------- desktop ---------- */
  @media (min-width:768px){
    .h5{width:min(720px,100vw)}
    section{padding:56px 40px}
    h2{font-size:44px}
    .hero{height:80vh;max-height:900px}
    .hero .content{padding:0 40px;bottom:40px}
    .title{font-size:132px}
    .tagline{font-size:17px}
    .topbar{padding:20px 40px}
    .logo-img{height:40px}
    .steps{grid-template-columns:1fr 1fr 1fr;border-top:0;gap:18px}
    .step{grid-template-columns:1fr;border:1px solid var(--line);padding:18px;gap:8px}
    .divider{padding:0 40px}
    .stickybar{width:min(720px,100vw)}
    footer{padding:56px 40px 120px}
    .cam{padding:14px}
    .door{grid-template-columns:150px 1fr}
    .clip{flex-basis:168px}
  }
  @media (prefers-reduced-motion:reduce){
    .rv,.heroup{opacity:1;transform:none;transition:none;animation:none}
    .ticker span{animation:none}
    .hero .heroimg{animation:none;transform:none}
    .hud .rec,.pl-rec,.static,.track-bar,.jitter,.cam-top i{animation:none}
  }