:root{
  --scr:#0C0C0E;--scr-2:#16161A;--scr-line:rgba(255,255,255,.10);--scr-line-2:rgba(255,255,255,.16);
  --text:#F6F5F3;--dim:rgba(246,245,243,.62);--faint:rgba(246,245,243,.40);--red:#F5001E;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --grain:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;overflow:hidden}
#app{position:relative;width:100vw;height:100vh;background:var(--scr);color:var(--text);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}
@media (min-aspect-ratio:9/16){ #app{width:calc(100vh * 9 / 16);margin:0 auto} }

.media{position:relative;overflow:hidden;background:#160808;width:100%;height:100%}
.media img,.media video{width:100%;height:100%;object-fit:cover;display:block}
.media::after{content:"";position:absolute;inset:0;background:var(--grain);background-size:140px;mix-blend-mode:overlay;opacity:.12;pointer-events:none}

.bar{display:flex;align-items:center;gap:10px;padding:2.4vh 4vw;flex:0 0 auto;z-index:5;color:var(--title-fg,var(--text))}
.mark{font-weight:800;letter-spacing:.02em;font-size:2.2vh}
.mark .r{color:var(--red)}
.mark-logo{height:4.4vh;max-height:4.4vh;max-width:44vw;object-fit:contain;display:block}
.handle{font-family:var(--mono);font-size:1.5vh;color:color-mix(in srgb,var(--title-fg,var(--text)) 62%,transparent)}
.live{margin-left:auto;display:flex;align-items:center;gap:.8vh;font-family:var(--mono);font-size:1.3vh;
  letter-spacing:.12em;color:color-mix(in srgb,var(--title-fg,var(--text)) 62%,transparent);text-transform:uppercase}
.pulse{width:1vh;height:1vh;border-radius:50%;background:var(--red);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(245,0,30,.55)}70%{box-shadow:0 0 0 1.2vh rgba(245,0,30,0)}100%{box-shadow:0 0 0 0 rgba(245,0,30,0)}}

/* ---------- FEED (base layer, always visible) ---------- */
#feed{position:absolute;inset:0;display:flex;flex-direction:column}
.viewport{flex:1;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent)}
.stream{position:absolute;top:0;left:0;right:0;display:grid;grid-template-columns:1fr 1fr;
  grid-auto-rows:22vh;grid-auto-flow:row dense;gap:1.1vh;padding:1.1vh 3vw;will-change:transform}

.card{border-radius:1.6vh;overflow:hidden;position:relative;background:#160808;display:flex;flex-direction:column;justify-content:flex-end}
.card.tall{grid-row:span 2}
.post{border:var(--post-bd-w,0) solid var(--post-bd-c,transparent)}
.post .media{position:absolute;inset:0}
.post .txt{position:relative;z-index:2;padding:1.3vh 1.5vh;background:linear-gradient(to top,rgba(0,0,0,.82),transparent)}
.post .cap{font-size:1.55vh;line-height:1.25;font-weight:640;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post .met{display:flex;gap:1.4vh;margin-top:1vh;font-family:var(--mono);font-size:1.25vh;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums}
.heart{width:1.2vh;height:1.2vh;fill:var(--accent-heart,var(--red));vertical-align:-1px}
.playdot{position:absolute;top:1.2vh;right:1.2vh;z-index:3;width:2.8vh;height:2.8vh;border-radius:50%;
  background:rgba(0,0,0,.45);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;
  font-size:1.2vh;color:#fff;border:1px solid var(--scr-line-2)}

.metric{grid-column:1 / -1;border:var(--card-bd-w,0) solid var(--card-bd-c,transparent);border-radius:1.6vh;
  background:linear-gradient(120deg,var(--acc,var(--red)),color-mix(in srgb,var(--acc,var(--red)) 55%,#000));
  display:flex;flex-direction:column;justify-content:center;padding:2.2vh 3vh;gap:.5vh}
.metric .m-label{font-family:var(--mono);font-size:1.5vh;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--acc-fg,#fff) 85%,transparent)}
.metric .m-value{font-size:6.4vh;font-weight:760;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--acc-fg,#fff)}
.metric .m-sub{font-family:var(--mono);font-size:1.5vh;color:color-mix(in srgb,var(--acc-fg,#fff) 90%,transparent)}
/* Metric cards grow into place as they scroll into view (JS adds .anim + .in). */
.stream.anim .metric{opacity:0;transform:scale(.86) translateY(1.6vh);transform-origin:center;
  transition:opacity .45s ease,transform .62s cubic-bezier(.22,.9,.28,1.12);will-change:transform,opacity}
.stream.anim .metric.in{opacity:1;transform:none}

/* inline QR card in the feed: optional title on top, then code + text row.
   Sized to a single grid row, matching the metric cards. */
.qrcard{grid-column:1 / -1;background:#fff;border:var(--qr-bd-w,0) solid var(--qr-bd-c,transparent);border-radius:1.6vh;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:.9vh;padding:2vh 3vh}
.qrcard .qr-title{font-family:var(--mono);font-size:1.4vh;letter-spacing:.12em;text-transform:uppercase;color:#111;font-weight:700}
.qrcard .qr-body{display:flex;flex-direction:row;align-items:center;gap:2.4vh}
.qrcard .qr-img{width:13vh;height:13vh;flex:0 0 auto}
.qrcard .qr-img svg{display:block;width:100%;height:100%}
.qrcard .qr-text{display:flex;flex-direction:column;gap:.5vh;min-width:0}
.qrcard .qr-cap{font-family:var(--mono);font-size:1.7vh;letter-spacing:.08em;text-transform:uppercase;color:#111;text-align:left;line-height:1.25}
.qrcard .qr-sub{font-family:var(--mono);font-size:1.35vh;color:rgba(17,17,17,.6);text-align:left;line-height:1.25}

.ticker{flex:0 0 auto;background:var(--ticker-bg,var(--red));color:var(--ticker-fg,#fff);overflow:hidden;white-space:nowrap;z-index:5}
.ticker .track{display:inline-block;padding:1.1vh 0;font-family:var(--mono);font-size:1.35vh;letter-spacing:.1em;text-transform:uppercase;animation:slide 26s linear infinite}
.ticker .track span{padding:0 2.4vh}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- OVERLAYS (spotlight + stats) ---------- */
.overlay{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;overflow:hidden;z-index:20}
#stats.overlay{transition:opacity .5s ease;z-index:25}
.overlay.show{opacity:1;visibility:visible}
#spotlight.zooming{transition:top .62s var(--ease),left .62s var(--ease),width .62s var(--ease),height .62s var(--ease),border-radius .62s var(--ease)}

#spotlight .media{position:absolute;inset:0}
#spotlight .top{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;gap:10px;padding:2.4vh 4vw;
  opacity:0;transform:translateY(-1vh);transition:opacity .5s ease,transform .5s var(--ease)}
.badge{display:inline-flex;align-items:center;gap:.6vh;font-family:var(--mono);font-size:1.2vh;letter-spacing:.08em;
  text-transform:uppercase;background:rgba(0,0,0,.4);border:1px solid var(--scr-line-2);padding:.7vh 1.2vh;border-radius:99px;backdrop-filter:blur(6px)}
.badge svg{width:1.5vh;height:1.5vh}
#spotlight .bottom{position:absolute;bottom:0;left:0;right:0;z-index:3;padding:6vh 4vw 3vh;
  background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.15) 80%,transparent);
  opacity:0;transform:translateY(100%);transition:opacity .55s ease,transform .55s var(--ease)}
/* caption + stats slide up on entry, then slide off so the content is unobscured */
#spotlight.chrome .top{opacity:1;transform:none}
#spotlight.chrome .bottom{opacity:1;transform:translateY(0)}
#spotlight .cap{font-size:2.6vh;line-height:1.24;font-weight:660;letter-spacing:-.01em}
#spotlight .metrics{display:flex;flex-wrap:wrap;gap:2vh 3.4vh;margin-top:2.2vh;font-variant-numeric:tabular-nums}
#spotlight .metrics .v{font-size:2.6vh;font-weight:700}
#spotlight .metrics .k{font-family:var(--mono);font-size:1.2vh;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:.4vh}
/* scan-to-follow QR card (spotlight + interstitial) */
.qr{background:#fff;border-radius:1.4vh;padding:1.3vh;display:flex;flex-direction:column;align-items:center;gap:.9vh}
.qr-img{width:12vh;height:12vh}
.qr-img svg{display:block;width:100%;height:100%}
.qr-cap{font-family:var(--mono);font-size:1.15vh;letter-spacing:.08em;text-transform:uppercase;color:#111;max-width:14vh;text-align:center;line-height:1.2}
#spotlight .qr{position:absolute;right:4vw;bottom:4vh;z-index:4;box-shadow:0 6px 22px rgba(0,0,0,.45)}
#spotlight.has-qr .bottom{padding-right:19vh} /* keep caption + metrics clear of the QR */
#interstitial .qr{margin-top:2vh}

#spotlight .prog{position:absolute;left:0;right:0;bottom:0;z-index:4;height:.5vh;background:rgba(255,255,255,.2)}
#spotlight .prog i{display:block;height:100%;width:0;background:var(--accent-heart,var(--red))}

#stats{position:relative;background:var(--scr)}
.s-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.s-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.5))}
.s-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;padding:3vh 4vw 4vh;overflow:hidden;color:var(--slide-fg,var(--text))}
.s-logo{max-height:8vh;max-width:52%;object-fit:contain;align-self:flex-start;margin-bottom:2.4vh}
.s-subtitle{font-family:var(--mono);font-size:1.8vh;color:color-mix(in srgb,var(--slide-fg,var(--text)) 62%,transparent);margin-top:1vh}
#stats .head{display:flex;align-items:baseline;justify-content:space-between;gap:2vh}
#stats .wk{font-family:var(--mono);font-size:1.5vh;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-slide,var(--red));font-weight:600}
#stats .hd{font-family:var(--mono);font-size:1.3vh;color:color-mix(in srgb,var(--slide-fg,var(--text)) 46%,transparent);white-space:nowrap}
.hero{margin-top:4vh}
.hero .lbl{font-family:var(--mono);font-size:1.5vh;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--slide-fg,var(--text)) 62%,transparent)}
.hero .big{font-size:9vh;line-height:.95;font-weight:760;letter-spacing:-.03em;margin-top:1.4vh;font-variant-numeric:tabular-nums;color:var(--slide-fg,var(--acc,var(--red)))}
.hero .delta{display:inline-flex;align-items:center;gap:.6vh;margin-top:1.8vh;font-family:var(--mono);font-size:1.6vh;
  color:#38d17a;background:rgba(56,209,122,.12);border:1px solid rgba(56,209,122,.28);padding:.6vh 1.4vh;border-radius:99px}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:1.4vh;margin-top:3.4vh}
.kpi{background:var(--acc,var(--red));border:1px solid transparent;border-radius:1.8vh;padding:2vh}
.kpi .k{font-family:var(--mono);font-size:1.3vh;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--acc-fg,#fff) 85%,transparent)}
.kpi .v{font-size:3.6vh;font-weight:720;letter-spacing:-.02em;margin-top:1vh;font-variant-numeric:tabular-nums;color:var(--acc-fg,#fff)}
.kpi .ks{font-family:var(--mono);font-size:1.3vh;color:color-mix(in srgb,var(--acc-fg,#fff) 85%,transparent);margin-top:.8vh;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero .subline{margin-top:1.6vh;font-family:var(--mono);font-size:1.7vh;color:color-mix(in srgb,var(--slide-fg,var(--text)) 62%,transparent)}
.toppost{margin-top:auto;display:flex;gap:1.8vh;align-items:center;background:var(--scr-2);border:1px solid var(--scr-line);border-radius:1.8vh;padding:1.6vh}
.toppost .thumb{width:7vh;height:9vh;border-radius:1.2vh;flex:0 0 auto;overflow:hidden;background:#160808}
.toppost .k{font-family:var(--mono);font-size:1.2vh;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-slide,var(--red));font-weight:600}
.toppost .h{font-size:2vh;font-weight:640;margin-top:.6vh;line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.toppost .m{font-family:var(--mono);font-size:1.4vh;color:var(--dim);margin-top:.8vh;font-variant-numeric:tabular-nums}

/* ---------- AUDIENCE CARD (top cities/countries) ---------- */
/* Spans two grid rows in the feed — the stacked name+bar rows need more height
   than a single 22vh row (justify-content centres them in the taller card). On
   the stats slide it's in a flex column, so grid-row is simply ignored there. */
.audiencecard{grid-column:1 / -1;grid-row:span 2;background:linear-gradient(120deg,#1c0609,#0f0f13);border:1px solid var(--scr-line);
  border-radius:1.6vh;padding:2vh 3vh;display:flex;flex-direction:column;justify-content:center;gap:1.4vh;color:var(--text)}
.audiencecard .ac-head{font-family:var(--mono);font-size:1.5vh;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-slide,var(--red));font-weight:600}
/* Name sits on its own line above the bar, so bars align regardless of name
   length (and long names like "United Arab Emirates" never get truncated).
   The bar spans a shared column and the % is a fixed, right-aligned column. */
.ac-row{display:grid;grid-template-columns:1fr 5vh;grid-template-areas:"name name" "bar pct";align-items:center;column-gap:1.4vh;row-gap:.7vh}
.ac-name{grid-area:name;font-size:1.9vh;font-weight:640;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-bar{grid-area:bar;height:1.1vh;border-radius:99px;background:var(--scr-2);overflow:hidden}
.ac-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent-slide,var(--red)),color-mix(in srgb,var(--accent-slide,var(--red)) 55%,#000))}
.ac-pct{grid-area:pct;font-family:var(--mono);font-size:1.7vh;font-weight:600;color:var(--accent-slide,var(--red));font-variant-numeric:tabular-nums;text-align:right}
/* on the stats slide it sits below the tiles, a touch larger */
#stats .audiencecard{margin-top:2.4vh}
#stats .audiencecard .ac-name{font-size:2.2vh}

/* ---------- INTERSTITIAL (end of feed) ---------- */
/* panel slides up over the feed; logo + text stagger in after it lands */
#interstitial.overlay{opacity:1;visibility:visible;transform:translateY(100%);transition:transform .7s var(--ease);background:var(--scr);z-index:30}
#interstitial.overlay.show{transform:translateY(0)}
.it-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.it-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.32))}
.it-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4vh;padding:10vw;text-align:center}
.it-logo{max-width:56%;max-height:16vh;object-fit:contain}
.it-text{font-size:4.4vh;line-height:1.18;font-weight:680;letter-spacing:-.01em;text-wrap:balance;max-width:18ch;color:var(--it-fg,var(--text))}
#interstitial .it-logo,#interstitial .it-text,#interstitial .qr{opacity:0;transform:translateY(2.4vh);transition:opacity .6s ease,transform .6s var(--ease)}
#interstitial.show .it-logo{opacity:1;transform:none;transition-delay:.35s}
#interstitial.show .it-text{opacity:1;transform:none;transition-delay:.6s}
#interstitial.show .qr{opacity:1;transform:none;transition-delay:.85s}
@media (prefers-reduced-motion:reduce){
  #interstitial.overlay{transition:opacity .4s ease;transform:none;opacity:0;visibility:hidden}
  #interstitial.overlay.show{opacity:1;visibility:visible}
  #interstitial .it-logo,#interstitial .it-text,#interstitial .qr{transition:none;opacity:1;transform:none}
}

.message{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;white-space:pre-line;
  padding:8vw;color:var(--dim);font-family:var(--mono);font-size:1.8vh;letter-spacing:.04em;z-index:40}