/* TUNNL prototype. Every colour, font and radius comes from system/tunnl.css.
   Alpha steps are mixed from the tokens here, so a token change flows through. */

:root {
  --chalk-90: color-mix(in srgb, var(--k-chalk) 90%, transparent);
  --chalk-75: color-mix(in srgb, var(--k-chalk) 75%, transparent);
  --chalk-60: color-mix(in srgb, var(--k-chalk) 60%, transparent);
  --chalk-40: color-mix(in srgb, var(--k-chalk) 40%, transparent);
  --chalk-25: color-mix(in srgb, var(--k-chalk) 25%, transparent);
  --chalk-14: color-mix(in srgb, var(--k-chalk) 14%, transparent);
  --chalk-10: color-mix(in srgb, var(--k-chalk) 10%, transparent);
  --night-90: color-mix(in srgb, var(--k-night) 90%, transparent);
  --night-80: color-mix(in srgb, var(--k-night) 80%, transparent);
  --night-60: color-mix(in srgb, var(--k-night) 60%, transparent);
  --night-40: color-mix(in srgb, var(--k-night) 40%, transparent);
  --night-20: color-mix(in srgb, var(--k-night) 20%, transparent);
  --night-0: color-mix(in srgb, var(--k-night) 0%, transparent);
  --ink-10: color-mix(in srgb, var(--k-ink) 10%, transparent);
  --ink-06: color-mix(in srgb, var(--k-ink) 6%, transparent);
  --hair: color-mix(in srgb, var(--k-ink) 10%, transparent);
  --hair-night: color-mix(in srgb, var(--k-chalk) 10%, transparent);
  --tone: color-mix(in srgb, var(--k-ink) 7%, var(--k-ground));
  --white: color-mix(in srgb, var(--k-card) 40%, white);
  --turf-hi: color-mix(in srgb, var(--k-turf) 82%, white);
  --turf-lo: color-mix(in srgb, var(--k-turf) 88%, var(--k-night));
  --night-hi: color-mix(in srgb, var(--k-night) 86%, var(--k-chalk));

  --font-ui: "Mona Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-label: "Anybody", "Arial Narrow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r-plate: 8px; --r-row: 14px; --r-tile: 18px; --r-card: 22px; --r-hero: 28px; --r-pill: 999px;
  --slab: inset 0 1px 0 var(--chalk-60), inset 0 -1px 0 var(--ink-06), 0 1px 2px var(--night-20), 0 24px 48px -16px var(--night-20);
  --slab-d: inset 0 1px 0 var(--chalk-14), inset 0 -1px 0 var(--night-40), inset 0 0 0 1px var(--chalk-10), 0 1px 2px var(--night-20), 0 24px 48px -16px var(--night-60);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  /* liquid glass: one recipe everywhere. Blur plus saturation so what sits behind
     reads as light through glass; a specular top edge; a seated bottom edge. */
  --glass-f: blur(24px) saturate(1.6);
  --glass-edge: inset 0 1px 0 var(--chalk-25), inset 0 -1px 0 var(--night-40), inset 0 0 0 1px var(--chalk-10);
  /* light cast: the numeral's own colour, softened. Turf glows turf, chalk glows floodlight white */
  --turf-glow: drop-shadow(0 0 8px);
  /* light rig: where the hand points the light (gyro on phone, pointer on desktop) */
  --lx: 50%; --ly: 32%;
}
/* Show colours for one card (--sc ground, --si ink) */
.ec { --sc: var(--ec-bottle); --si: var(--ec-cream); }
.koko { --sc: var(--koko-orange); --si: var(--koko-teal); }
.dspn { --sc: var(--dspn-cream); --si: var(--dspn-brown); }
/* Show worlds: the lead show colours every show-led surface (door, welcome, question, shop, drops, passes).
   html carries w-<lead>; a show card or show page re-scopes with its own class.
   --lc ground, --li ink, --lt type over photos, --lc2/--lm/--lg the second, third and fourth piece tones,
   --lbb/--lbi the solid button on a show surface, --lgb/--lgt the glass button and chip, --los the offer slot. */
:root, .w-ec, .ec {
  --lc: var(--ec-bottle); --li: var(--ec-cream); --lt: var(--k-chalk);
  --lc2: color-mix(in srgb, var(--ec-bottle) 80%, var(--k-night)); --lc2i: var(--ec-cream);
  --lm: var(--ec-mint); --lmi: var(--k-ink); --lg: var(--ec-gold); --lgi: var(--k-ink);
  --lv2: var(--k-night-raise); --lv2i: var(--k-chalk);
  --lchat: color-mix(in srgb, var(--ec-mint) 40%, var(--k-ground));
  --pitch: color-mix(in srgb, var(--ec-bottle) 62%, var(--k-night));
  --lbb: linear-gradient(180deg, var(--white), var(--k-chalk)); --lbi: var(--k-ink);
  --lgb: linear-gradient(180deg, var(--chalk-25), var(--chalk-14)); --lgt: var(--k-chalk);
  --los: linear-gradient(180deg, color-mix(in srgb, var(--k-night) 20%, transparent), color-mix(in srgb, var(--k-night) 34%, transparent));
  --losl: inset 0 1px 0 var(--chalk-14), inset 0 0 0 1px var(--chalk-10);
}
.w-koko, .koko {
  --lc: var(--koko-orange); --li: var(--koko-teal); --lt: var(--koko-teal);
  --lc2: var(--koko-teal); --lc2i: var(--koko-peach);
  --lm: var(--koko-peach); --lmi: var(--koko-teal); --lg: var(--koko-teal); --lgi: var(--koko-peach);
  --lv2: var(--koko-teal); --lv2i: var(--koko-peach);
  --lchat: color-mix(in srgb, var(--koko-peach) 55%, var(--k-ground));
  --pitch: color-mix(in srgb, var(--koko-teal) 70%, var(--k-night));
  --lbb: linear-gradient(180deg, color-mix(in srgb, var(--koko-teal) 86%, var(--k-chalk)), var(--koko-teal)); --lbi: var(--koko-peach);
  --lgb: linear-gradient(180deg, color-mix(in srgb, var(--koko-peach) 46%, transparent), color-mix(in srgb, var(--koko-peach) 28%, transparent)); --lgt: var(--koko-teal);
  --los: linear-gradient(180deg, color-mix(in srgb, var(--koko-peach) 34%, transparent), color-mix(in srgb, var(--koko-peach) 20%, transparent));
  --losl: inset 0 1px 0 color-mix(in srgb, white 30%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--koko-teal) 12%, transparent);
}
.w-dspn, .dspn {
  --lc: var(--dspn-cream); --li: var(--dspn-brown); --lt: var(--dspn-brown);
  --lc2: var(--dspn-brown); --lc2i: var(--dspn-cream);
  --lm: var(--dspn-brick); --lmi: var(--dspn-cream); --lg: var(--dspn-rust); --lgi: var(--dspn-cream);
  --lv2: var(--dspn-brown); --lv2i: var(--dspn-cream);
  --lchat: color-mix(in srgb, var(--dspn-cream) 80%, var(--dspn-brick));
  --pitch: color-mix(in srgb, var(--dspn-brown) 66%, var(--k-night));
  --lbb: linear-gradient(180deg, color-mix(in srgb, var(--dspn-brown) 86%, var(--dspn-cream)), var(--dspn-brown)); --lbi: var(--dspn-cream);
  --lgb: linear-gradient(180deg, color-mix(in srgb, var(--dspn-brown) 12%, transparent), color-mix(in srgb, var(--dspn-brown) 7%, transparent)); --lgt: var(--dspn-brown);
  --los: linear-gradient(180deg, color-mix(in srgb, var(--dspn-brown) 7%, transparent), color-mix(in srgb, var(--dspn-brown) 11%, transparent));
  --losl: inset 0 1px 0 color-mix(in srgb, white 50%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--dspn-brown) 12%, transparent);
}
/* buttons and chips that sit on a show surface follow the show */
:is(.inv-body, .inv-panel, .welcome-in, .qcard, .qrow:not(.white), .pin, .ftq, .shop-hero, .prod, .tix, .follow, .mwu-card, .review, .passcard, .glasscard) :is(.btn.chalk) { background: var(--lbb); color: var(--lbi); }
:is(.inv-head, .inv-body, .inv-panel, .welcome-in, .qcard, .qrow:not(.white), .pin, .ftq, .shop-hero, .prod, .tix, .follow, .mwu-card, .review, .passcard) :is(.btn.glass, .chip.glass) { background: var(--lgb); color: var(--lgt); }

* { box-sizing: border-box; }
/* locked frame: no bounce reveal. The root always carries the active screen's ground
   (render() keeps html and body in step with each route), so rubber-banding shows
   the same colour the screen stands on. */
html { -webkit-text-size-adjust: 100%; background: var(--k-ground); overscroll-behavior-y: none; }
body { margin: 0; background: var(--k-ground); color: var(--k-ink); font-family: var(--font-ui); font-size: 15px; line-height: 22px; -webkit-font-smoothing: antialiased; overflow-x: hidden; overscroll-behavior-y: none; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
input, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--k-turf); outline-offset: 2px; }

/* type */
/* labels and metadata: sentence case in the UI face, never tracked caps (rule D31) */
.lbl { font-family: var(--font-ui); font-weight: 500; font-size: 13px; line-height: 18px; letter-spacing: 0; opacity: .72; }
.sample { font-family: var(--font-ui); font-weight: 500; font-size: 11px; line-height: 14px; letter-spacing: 0; color: var(--k-mute); }
.night .sample, .on-night .sample { color: var(--k-mute-night); }
.on-col .sample { color: inherit; opacity: .7; }
.kd { font-family: var(--k-font-display); font-style: italic; font-weight: 900; text-transform: uppercase; line-height: .86; }
.t1 { font-size: 32px; line-height: 36px; font-weight: 650; letter-spacing: -.02em; margin: 0; }
.t2 { font-size: 22px; line-height: 26px; font-weight: 650; letter-spacing: -.02em; margin: 0; }
.h3 { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.bs { font-size: 15px; line-height: 20px; font-weight: 600; }
.body { font-size: 15px; line-height: 22px; }
.cap { font-size: 12px; line-height: 16px; }
.mute { color: var(--k-mute-deep); }
.night .mute, .on-night .mute { color: var(--k-mute-night); }
p { margin: 0; }

/* icons: system glyphs as CSS masks */
.ic { width: 22px; height: 22px; flex: none; display: block; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ic.s18 { width: 18px; height: 18px; }
.i-home { --i: url(system/icons/home-ink.svg); } .i-matches { --i: url(system/icons/matches-ink.svg); } .i-live { --i: url(system/icons/live-ink.svg); }
.i-wallet { --i: url(system/icons/wallet-ink.svg); } .i-profile { --i: url(system/icons/profile-ink.svg); } .i-chat { --i: url(system/icons/chat-ink.svg); }
.i-shop { --i: url(system/icons/shop-ink.svg); } .i-calendar { --i: url(system/icons/calendar-ink.svg); } .i-ask { --i: url(system/icons/ask-ink.svg); }
.i-whistle { --i: url(system/icons/whistle-ink.svg); } .i-people { --i: url(system/icons/people-ink.svg); } .i-try { --i: url(system/icons/try-ink.svg); }
.gl { flex: none; display: block; }

/* buttons and chips */
.btn { height: 56px; padding: 0 24px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 600; white-space: nowrap; transition: transform .15s var(--ease); flex: none; }
.btn:active { transform: scale(.97); }
.btn.sm { height: 44px; padding: 0 18px; font-size: 14px; }
.btn.xs { height: 36px; padding: 0 14px; font-size: 13px; }
.btn.block { width: 100%; }
.btn.turf { background: linear-gradient(180deg, var(--turf-hi), var(--k-turf) 55%, var(--turf-lo)); color: var(--k-ink); box-shadow: inset 0 1px 0 var(--chalk-60), inset 0 -1px 0 color-mix(in srgb, var(--turf-lo) 60%, transparent), 0 1px 2px var(--night-20), 0 12px 26px -10px color-mix(in srgb, var(--k-turf) 70%, transparent); }
.btn.night { background: linear-gradient(180deg, var(--night-hi), var(--k-night)); color: var(--k-chalk); box-shadow: inset 0 1px 0 var(--chalk-14), 0 10px 18px -12px var(--k-night); }
.btn.chalk { background: linear-gradient(180deg, var(--white), var(--k-chalk)); color: var(--k-ink); box-shadow: inset 0 1px 0 var(--white), 0 1px 2px var(--night-20), 0 12px 22px -12px var(--night-60); }
.btn.glass { background: linear-gradient(180deg, var(--chalk-25), var(--chalk-10) 55%, var(--chalk-14)); color: var(--k-chalk); box-shadow: var(--glass-edge), 0 8px 20px -14px var(--night-80); -webkit-backdrop-filter: var(--glass-f); backdrop-filter: var(--glass-f); }
.btn.quiet { background: var(--ink-06); color: var(--k-ink); }
.btn.raise { background: var(--k-night-raise); color: var(--k-chalk); }
.round { width: 44px; height: 44px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; flex: none; background: color-mix(in srgb, white 72%, transparent); box-shadow: inset 0 1px 0 white, inset 0 -1px 0 var(--ink-06), 0 6px 14px -10px var(--night-60); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.round.dark { background: linear-gradient(180deg, var(--chalk-14), var(--chalk-10)); box-shadow: inset 0 1px 0 var(--chalk-25), inset 0 0 0 1px var(--chalk-10); color: var(--k-chalk); -webkit-backdrop-filter: var(--glass-f); backdrop-filter: var(--glass-f); }
.round.turf { background: var(--k-turf); color: var(--k-ink); box-shadow: none; }
.chip { height: 32px; padding: 0 12px; border-radius: 16px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; flex: none; background: var(--white); color: var(--k-ink); }
.chip.glass { background: linear-gradient(180deg, var(--chalk-25), var(--chalk-14)); color: var(--k-chalk); box-shadow: inset 0 1px 0 var(--chalk-25), inset 0 0 0 1px var(--chalk-10); -webkit-backdrop-filter: var(--glass-f); backdrop-filter: var(--glass-f); }
.chip.turf { background: var(--k-turf); color: var(--k-ink); }
.chip.ink { background: var(--k-ink); color: var(--k-chalk); }
.chip.tone { background: var(--ink-06); }
.live-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--k-clock); display: block; flex: none; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.plate { display: inline-flex; padding: 4px 6px; border-radius: var(--r-plate); background: var(--k-night); color: var(--k-chalk); flex: none; }
.link-u { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.seg { display: inline-flex; padding: 3px; border-radius: 19px; background: color-mix(in srgb, var(--k-ink) 9%, var(--k-ground)); gap: 2px; }
.seg a, .seg button { height: 32px; padding: 0 16px; border-radius: 16px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--k-mute-deep); }
.seg .on { background: var(--white); color: var(--k-ink); box-shadow: 0 4px 10px -6px var(--night-60); }
.seg.dark { background: var(--chalk-10); }
.seg.dark a, .seg.dark button { color: var(--k-mute-night); }
.seg.dark .on { background: var(--k-chalk); color: var(--k-ink); }

/* surfaces */
.slab { background: var(--k-card); border-radius: var(--r-hero); box-shadow: var(--slab); }
.slab.white { background: var(--white); }
.slab.night { background: radial-gradient(120% 90% at 50% 0%, var(--night-hi), var(--k-night) 70%); color: var(--k-chalk); box-shadow: var(--slab-d); }
.slab.night .dm { filter: var(--turf-glow); }
.card { background: var(--k-card); border-radius: var(--r-card); }
.card.white { background: var(--white); }
.pad { padding: 20px; } .pad16 { padding: 16px; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.between { justify-content: space-between; }
.g4 { gap: 4px; } .g6 { gap: 6px; } .g8 { gap: 8px; } .g10 { gap: 10px; } .g12 { gap: 12px; } .g16 { gap: 16px; } .g20 { gap: 20px; } .g24 { gap: 24px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.list > * + * { border-top: 1px solid var(--hair); }
.night .list > * + *, .on-night .list > * + * { border-top-color: var(--hair-night); }
.cols, .cols2, .cols3 { display: flex; flex-direction: column; gap: 24px; }

/* frame */
#app { min-height: 100vh; min-height: 100dvh; }
.screen { position: relative; min-height: 100vh; min-height: 100dvh; padding-bottom: 120px; }
.screen.notab { padding-bottom: 32px; }
.screen.night { background: var(--k-night); color: var(--k-chalk); }
.page { width: 100%; max-width: 560px; margin: 0 auto; padding: 0 16px; }
/* sticky bars sit on glass over a near-solid ground, so nothing reads as sliding behind them */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; padding: 0 16px; max-width: 560px; margin: 0 auto; background: color-mix(in srgb, var(--k-ground) 93%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); }
.topbar.clear { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; position: relative; }
.night .topbar, .topbar.dark { background: color-mix(in srgb, var(--k-night) 88%, transparent); color: var(--k-chalk); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: var(--k-ground); }
  .night .topbar, .topbar.dark { background: var(--k-night); }
  .tabbar { background: var(--k-ink); }
}
.topbar .title { font-size: 16px; font-weight: 600; text-align: center; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .sp { width: 44px; flex: none; }
.enter { animation: enter .42s var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(10px); } }

/* tab bar: floating night-glass capsule, 64 high, 16 in */
.tabbar { position: fixed; z-index: 40; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); height: 64px; max-width: 528px; margin: 0 auto; padding: 4px 8px; border-radius: 32px; display: flex; background: linear-gradient(180deg, color-mix(in srgb, var(--k-ink) 78%, transparent), color-mix(in srgb, var(--k-ink) 90%, transparent)); -webkit-backdrop-filter: var(--glass-f); backdrop-filter: var(--glass-f); box-shadow: inset 0 1px 0 var(--chalk-25), inset 0 -1px 0 var(--night-60), inset 0 0 0 1px var(--chalk-10), 0 1px 2px var(--night-20), 0 24px 40px -16px var(--night-60); }
.tabbar a { flex: 1; min-width: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--k-chalk); opacity: .62; }
.tabbar a.on { opacity: 1; }
.tabbar .tl { display: flex; align-items: center; gap: 4px; font-size: 11px; line-height: 13px; font-weight: 500; }
.tabbar a.on .tl { font-weight: 600; }
.tabbar .dot { width: 0; height: 4px; border-radius: 2px; background: var(--k-turf); transition: width .24s var(--spring); }
.tabbar a.on .dot { width: 4px; }
.tab-scrim { position: fixed; left: 0; right: 0; bottom: 0; height: 120px; z-index: 30; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--k-ground) 0%, transparent), color-mix(in srgb, var(--k-ground) 90%, transparent) 60%, var(--k-ground)); }
body.is-night .tab-scrim { background: linear-gradient(180deg, var(--night-0), var(--night-90) 60%, var(--k-night)); }
.topnav { display: none; }

/* dot matrix */
.dm { display: block; flex: none; }
.dm .off { opacity: .1; }
/* turf numerals on night emit light: the clock, the countup, the live scores */
#clock .dm, #countup .dm, .scorebox .dm, .md-hero .dm, .yt .dm, .mcard .bt .dm, .arcs .dm, .score .dm { filter: var(--turf-glow); }

/* sound chip */
.soundchip { height: 36px; padding: 0 12px; border-radius: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; background: var(--ink-06); color: var(--k-ink); }
.soundchip.dark { background: var(--chalk-14); color: var(--k-chalk); }
.soundchip .sw { width: 22px; height: 13px; border-radius: 7px; background: var(--ink-10); position: relative; }
.soundchip.dark .sw { background: var(--chalk-25); }
.soundchip .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 9px; height: 9px; border-radius: 5px; background: currentColor; transition: transform .2s; }
.soundchip[aria-pressed="true"] .sw { background: var(--k-turf); }
.soundchip[aria-pressed="true"] .sw::after { transform: translateX(9px); background: var(--k-ink); }
.tog { width: 50px; height: 30px; border-radius: 15px; background: var(--ink-10); position: relative; flex: none; transition: background .2s; }
.tog::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 12px; background: var(--white); box-shadow: 0 2px 5px var(--night-20); transition: transform .24s var(--spring); }
.tog[aria-checked="true"] { background: var(--k-turf); }
.tog[aria-checked="true"]::after { transform: translateX(20px); }

/* ===== front doors (landing styles live at the end of this file) ===== */
/* bill: line-up cards. Mobile row, desktop tall (Direction C) */
.bill { display: flex; flex-direction: column; gap: 8px; }
.billcard { position: relative; height: 100px; border-radius: var(--r-card); overflow: hidden; display: flex; background: var(--sc); color: var(--si); }
.billcard .ground { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.billcard .cut { position: absolute; right: 0; bottom: 0; height: 112%; width: auto; max-width: none; pointer-events: none; }
.billcard .cut.wide { right: -12px; height: 100%; }
.billcard::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--sc) 46%, color-mix(in srgb, var(--sc) 0%, transparent) 70%); }
.billcard .txt { position: relative; z-index: 2; padding: 16px 16px 0; max-width: 62%; display: flex; flex-direction: column; gap: 6px; }
.billcard .name { display: flex; align-items: center; gap: 6px; }
.billcard .name .kd { font-size: 19px; line-height: 19px; }
.billcard .egg { width: 13px; height: auto; }
.billcard .desc { font-size: 12px; line-height: 16px; }
.billcard .act { position: absolute; right: 10px; bottom: 10px; z-index: 3; }
.billcard .act .btn { height: 40px; padding: 0 16px; font-size: 13px; }
.joined-tag { height: 40px; padding: 0 14px; border-radius: 20px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; background: linear-gradient(180deg, color-mix(in srgb, var(--k-chalk) 32%, transparent), var(--chalk-25)); color: var(--k-chalk); box-shadow: inset 0 1px 0 var(--chalk-40), inset 0 0 0 1px var(--chalk-10); -webkit-backdrop-filter: var(--glass-f); backdrop-filter: var(--glass-f); }
.dspn .joined-tag { background: var(--night-60); }
.lineup { position: relative; border-radius: var(--r-hero); overflow: hidden; aspect-ratio: 276 / 326; background: var(--sc); color: var(--si); box-shadow: var(--slab-d); }
.lineup .ground { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lineup .cut { position: absolute; left: 50%; bottom: 22%; height: 78%; width: auto; max-width: none; transform: translateX(-50%); -webkit-mask: linear-gradient(180deg, black 70%, transparent 98%); mask: linear-gradient(180deg, black 70%, transparent 98%); }
.lineup .cut.wide { height: 70%; }
.lineup .plate { position: absolute; left: 14px; top: 14px; z-index: 2; }
.lineup .foot { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; display: flex; flex-direction: column; gap: 12px; }
.lineup .foot .kd { font-size: 19px; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.lineup .foot .btn { width: 100%; height: 48px; }
.lineup .foot .joined-tag { width: 100%; justify-content: center; height: 48px; border-radius: 24px; }

/* EggChasers invitation */
.inv { position: relative; min-height: 100vh; min-height: 100dvh; background: var(--lc); color: var(--li); overflow: hidden; }
.inv .rib { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.inv .cut { position: absolute; left: 50%; top: 100px; height: 360px; width: auto; max-width: none; transform: translateX(-50%); -webkit-mask: linear-gradient(180deg, black 60%, transparent 96%); mask: linear-gradient(180deg, black 60%, transparent 96%); }
.inv-head { position: relative; z-index: 3; height: 64px; padding: 0 16px; display: flex; justify-content: space-between; align-items: center; }
.pill-lockup { height: 32px; padding: 0 12px; border-radius: 16px; background: var(--night-90); display: inline-flex; align-items: center; }
.inv-body { position: relative; z-index: 3; padding: 360px 16px 28px; display: flex; flex-direction: column; gap: 14px; max-width: 560px; margin: 0 auto; }
.inv-body .kd { font-size: 37px; }
.offer-slot { border-radius: var(--r-card); padding: 16px; background: var(--los); -webkit-backdrop-filter: var(--glass-f); backdrop-filter: var(--glass-f); box-shadow: var(--losl); display: flex; flex-direction: column; gap: 6px; }
.offer-slot.light { background: var(--white); color: var(--k-ink); box-shadow: var(--slab); }
.inv-form { display: none; }

/* join flow */
.field-lbl { margin-bottom: 8px; color: var(--k-mute-deep); display: block; }
.field { width: 100%; height: 56px; border: 0; border-radius: var(--r-row); background: var(--white); padding: 0 16px; font-size: 17px; color: var(--k-ink); box-shadow: 0 1px 2px var(--night-20); }
.field::placeholder { color: var(--k-mute); }
.field-err { color: var(--k-clock); font-size: 13px; margin-top: 8px; }
.mail-card { background: var(--tone); border-radius: var(--r-hero); padding: 16px; }
.mail-card .inner { background: var(--white); border-radius: var(--r-card); padding: 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 24px -16px var(--night-60); }
.err { background: var(--k-clock); color: var(--k-night); border-radius: var(--r-card); padding: 14px 16px; display: flex; gap: 10px; align-items: flex-start; }
.join-wrap { max-width: 480px; margin: 0 auto; }
.join-wrap .offer-slot.light { margin-top: 24px; }

/* welcome */
.welcome { position: relative; min-height: 100vh; min-height: 100dvh; background: var(--lc); color: var(--li); overflow: hidden; }
.welcome .rib { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.welcome-in { position: relative; z-index: 2; max-width: 480px; margin: 0 auto; padding: 60px 16px 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.welcome h1 { font-size: 34px; line-height: 38px; font-weight: 650; letter-spacing: -.02em; margin: 4px 0 0; }
.sting { position: relative; width: 66px; height: 69px; }
.sting i { position: absolute; inset: 0; background: var(--k-turf); -webkit-mask: url(system/mark/mark-turf.svg) center / contain no-repeat; mask: url(system/mark/mark-turf.svg) center / contain no-repeat; opacity: 0; animation: kite .5s var(--spring) forwards; }
.sting i:nth-child(1) { clip-path: polygon(24% -2%, 76% -2%, 76% 42%, 24% 42%); animation-delay: .05s; --dx: 0; --dy: -14px; }
.sting i:nth-child(2) { clip-path: polygon(-2% 28%, 47% 28%, 47% 72%, -2% 72%); animation-delay: .17s; --dx: -14px; --dy: 0; }
.sting i:nth-child(3) { clip-path: polygon(53% 28%, 102% 28%, 102% 72%, 53% 72%); animation-delay: .29s; --dx: 14px; --dy: 0; }
.sting i:nth-child(4) { clip-path: polygon(24% 58%, 76% 58%, 76% 102%, 24% 102%); animation-delay: .41s; --dx: 0; --dy: 14px; }
@keyframes kite { from { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.6); } to { opacity: 1; transform: none; } }
.sheet-card { width: 100%; border-radius: var(--r-hero); background: var(--k-night); color: var(--k-chalk); box-shadow: var(--slab-d); overflow: hidden; text-align: left; }
.sheet-card .sh-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 12px; border-bottom: 1px solid var(--hair-night); }
.sheet-card .sh-body { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 12px; }
.sheet-rows .sr { display: flex; align-items: center; gap: 14px; height: 32px; border-bottom: 1px dashed var(--hair-night); font-size: 14px; color: var(--k-mute-night); }
.sheet-rows .sr:last-child { border-bottom: 0; }
.sheet-rows .sr .who { flex: 1; }
.sheet-rows .sr.you { color: var(--k-turf); font-weight: 600; }
.founder { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 14px; background: var(--k-turf); color: var(--k-ink); font-size: 12px; font-weight: 600; }
.welcome .acts { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

/* sheets, toasts */
.scrim { position: fixed; inset: 0; z-index: 80; background: var(--night-40); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s both; }
@keyframes fade { from { opacity: 0; } }
.bsheet { width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; overscroll-behavior: contain; background: var(--k-card); border-radius: var(--r-hero) var(--r-hero) 0 0; padding: 10px 16px max(24px, env(safe-area-inset-bottom)); animation: rise .34s var(--ease) both; }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }
.grab { width: 40px; height: 5px; border-radius: 3px; background: var(--ink-10); margin: 0 auto 14px; }
.story { position: relative; width: min(100%, 300px); aspect-ratio: 9 / 16; margin: 0 auto; border-radius: var(--r-card); overflow: hidden; background: var(--k-night); color: var(--k-chalk); box-shadow: var(--slab-d); }
.story .rib { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story .st-in { position: absolute; inset: 0; padding: 22px 20px; display: flex; flex-direction: column; }
.story .kd { font-size: 40px; }
.toast { position: fixed; z-index: 90; left: 50%; top: 16px; transform: translateX(-50%); width: calc(100% - 32px); max-width: 420px; background: var(--k-ink); color: var(--k-chalk); border-radius: var(--r-card); padding: 14px 16px; display: flex; gap: 12px; align-items: center; box-shadow: 0 20px 40px -16px var(--night-60); animation: drop .4s var(--spring) both; }
@keyframes drop { from { transform: translate(-50%, -24px); opacity: 0; } }
.av { display: block; width: 64px; height: 64px; border-radius: 99px; overflow: hidden; flex: none; position: relative; background: var(--sc); box-shadow: 0 8px 16px -10px var(--night-60); }
.av img { position: absolute; left: 50%; top: 4%; height: 190%; width: auto; max-width: none; transform: translateX(-50%); }
.av.wide img { height: 150%; top: 6%; }
.av.s32 { width: 32px; height: 32px; } .av.s36 { width: 36px; height: 36px; } .av.s40 { width: 40px; height: 40px; } .av.s44 { width: 44px; height: 44px; }
.ini { width: 32px; height: 32px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; background: var(--koko-peach); color: var(--k-ink); flex: none; }

/* ===== home: feed ===== */
.md-hero { position: relative; height: 212px; border-radius: var(--r-hero); overflow: hidden; background: var(--k-night); color: var(--k-chalk); box-shadow: var(--slab-d); display: block; }
.md-hero .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 38%; }
/* light rule: the lamp sits right, the beam falls onto the type; shade only on the type side */
.md-hero .shade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--night-60), var(--night-0) 62%), linear-gradient(180deg, var(--night-0) 45%, var(--night-60)); }
.md-hero .top { position: absolute; left: 18px; right: 18px; top: 16px; display: flex; justify-content: space-between; align-items: center; }
.md-hero .bot { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 12px; }
.md-hero .bot .t { padding: 0 8px; }
/* the info strip: the countdown and the way in sit on frosted glass, as on the posters */
.hstrip { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--k-night) 22%, transparent), var(--night-40)); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: inset 0 1px 0 var(--chalk-14), inset 0 0 0 1px var(--chalk-10); }
.md-hero .t { font-size: 26px; line-height: 28px; font-weight: 600; letter-spacing: -.02em; }
.utabs { display: flex; border-bottom: 1px solid var(--hair); }
.utabs a, .utabs button { flex: 1; height: 44px; position: relative; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; color: var(--k-mute-deep); white-space: nowrap; padding: 0 6px; }
.utabs .on { color: var(--k-ink); font-weight: 600; }
.utabs .on::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 28px; margin-left: -14px; height: 3px; border-radius: 2px; background: currentColor; }
.stories { display: flex; justify-content: space-between; gap: 8px; }
.storyav { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 76px; flex: none; font-size: 12px; line-height: 14px; font-weight: 500; text-align: center; }
.storyav .wrapav { position: relative; }
.storyav .livetag { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); height: 18px; padding: 0 6px; border-radius: 9px; background: var(--k-clock); color: white; display: flex; align-items: center; font-family: var(--font-ui); font-weight: 600; font-size: 10px; letter-spacing: 0; }
.storyav .obj { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.storyav .obj img { width: 64px; height: auto; }
.post { background: var(--white); border-radius: var(--r-card); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.post-head { display: flex; align-items: center; gap: 10px; }
.qcard { border-radius: var(--r-hero); background: var(--sc, var(--lc)); color: var(--si, var(--li)); padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--slab-d); }
.qcard .terms { font-size: 12px; line-height: 16px; opacity: .8; }
.qcard .dashes { letter-spacing: 2px; opacity: .6; font-size: 12px; }
.qrow { border-radius: var(--r-card); background: var(--sc, var(--lc)); color: var(--si, var(--li)); padding: 12px 12px 12px 14px; display: flex; align-items: center; gap: 12px; box-shadow: var(--slab-d); }
.qrow.white { background: var(--white); color: var(--k-ink); box-shadow: var(--slab); }

/* apps grid */
.apps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
.app { display: flex; flex-direction: column; gap: 8px; }
.app .tile { position: relative; aspect-ratio: 171 / 138; border-radius: var(--r-hero); background: radial-gradient(120% 90% at 30% 0%, var(--night-hi), var(--k-night) 60%); overflow: hidden; box-shadow: var(--slab-d), inset 0 1px 0 var(--chalk-14), inset 0 0 0 1px var(--chalk-10); }
.app .micro { position: absolute; inset: 10px 12px; color: var(--k-chalk); opacity: .12; font-family: var(--font-label); font-size: 10px; line-height: 13px; letter-spacing: .08em; text-transform: uppercase; overflow: hidden; }
.app .micro img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.app .obj { position: absolute; left: 50%; top: 46%; width: auto; max-width: 66%; max-height: 80%; transform: translate(-50%, -50%); animation: hover 3.2s ease-in-out infinite; z-index: 2; }
.app .shadow { position: absolute; left: 50%; bottom: 14px; width: 46%; height: 10px; margin-left: -23%; border-radius: 50%; background: radial-gradient(closest-side, var(--night-90), transparent); animation: breathe 3.2s ease-in-out infinite; }
.app:nth-child(2) .obj, .app:nth-child(2) .shadow { animation-delay: .53s; } .app:nth-child(3) .obj, .app:nth-child(3) .shadow { animation-delay: 1.06s; }
.app:nth-child(4) .obj, .app:nth-child(4) .shadow { animation-delay: 1.59s; } .app:nth-child(5) .obj, .app:nth-child(5) .shadow { animation-delay: 2.12s; } .app:nth-child(6) .obj, .app:nth-child(6) .shadow { animation-delay: 2.65s; }
@keyframes hover { 50% { transform: translate(-50%, calc(-50% - 6px)); } }
@keyframes breathe { 50% { transform: scaleX(.78); opacity: .6; } }
.app .badge { position: absolute; right: 10px; top: 10px; z-index: 3; }
.app .t { font-size: 17px; line-height: 20px; font-weight: 600; }

/* ask */
.bubble-me { align-self: flex-end; background: var(--k-ink); color: var(--k-chalk); border-radius: 22px 22px 6px 22px; padding: 12px 16px; max-width: 86%; font-size: 15px; }
.ask-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acard { position: relative; height: 118px; border-radius: var(--r-card); overflow: hidden; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; }
.acard { box-shadow: inset 0 1px 0 var(--chalk-10), inset 0 0 0 1px color-mix(in srgb, var(--k-chalk) 6%, transparent); }
.acard.shirt { background: var(--lc); color: var(--li); }
.acard.shirt img { position: absolute; right: -16px; top: -6px; height: 140%; width: auto; max-width: none; }
.acard.credit { background: radial-gradient(130% 90% at 50% 0%, var(--night-hi), var(--k-night) 70%); color: var(--k-chalk); }
.acard .coin { position: absolute; left: 50%; top: 10px; width: 58px; height: 58px; margin-left: -29px; animation: none; }
.acard .coin img { inset: 12px; width: 34px; height: 34px; }
.composer { display: flex; align-items: center; gap: 10px; background: var(--white); border-radius: 28px; padding: 6px 6px 6px 18px; box-shadow: var(--slab); }
.composer input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 16px; color: var(--k-ink); height: 44px; }

/* made with us */
.mwu { position: relative; height: 470px; }
.mwu .s { position: absolute; width: 230px; height: 400px; border-radius: var(--r-hero); overflow: hidden; box-shadow: var(--slab-d); transition: transform .5s var(--ease), z-index 0s .2s; }
.mwu .s img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.mwu .s .f { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, var(--sc) 92%); }
.mwu .s .lab { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; justify-content: space-between; align-items: baseline; color: var(--si); }
.mwu .s.green { --sc: var(--lc); --si: var(--li); left: 6px; top: 26px; transform: rotate(-4deg); z-index: 2; }
.mwu .s.gold { --sc: var(--lv2); --si: var(--lv2i); right: 6px; top: 50px; transform: rotate(3deg) scale(.94); z-index: 1; }
.mwu.flip .s.green { z-index: 1; transform: rotate(-3deg) scale(.94); }
.mwu.flip .s.gold { z-index: 2; transform: rotate(4deg); }

/* call it */
.callit { position: relative; background: var(--k-card); color: var(--k-ink); border-radius: var(--r-hero); overflow: hidden; padding: 24px 22px 22px; box-shadow: var(--slab-d); }
.callit .pl { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.callit > *:not(.pl) { position: relative; }
.scoreset { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: center; gap: 8px; }
.scorebox { width: 84px; height: 64px; border-radius: var(--r-row); background: radial-gradient(120% 100% at 50% 0%, var(--night-hi), var(--k-night) 75%); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; box-shadow: inset 0 1px 0 var(--chalk-14), inset 0 0 0 1px var(--chalk-10), 0 10px 20px -12px var(--k-night); }
.scorebox:active { transform: scale(.96); }
.markets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center; font-size: 12px; color: var(--k-mute-deep); }
.markets button { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.markets i { width: 52px; height: 52px; border-radius: var(--r-row); background: var(--ink-06); display: block; }
.markets .on i { background: radial-gradient(130% 100% at 50% 0%, var(--night-hi), var(--k-night) 75%); box-shadow: inset 0 1px 0 var(--chalk-14), inset 0 0 0 1px var(--chalk-10); }
.markets .on { color: var(--k-ink); font-weight: 600; }
.pager { display: flex; gap: 6px; justify-content: center; }
.pager i { width: 6px; height: 6px; border-radius: 3px; background: var(--chalk-25); display: block; }
.pager i.on { width: 20px; background: var(--k-chalk); }

/* chat */
.chat { background: linear-gradient(180deg, var(--lchat), var(--k-ground) 40%); }
.msg { display: flex; gap: 8px; align-items: flex-end; }
.msg .b { background: var(--white); border-radius: 20px; padding: 10px 14px; font-size: 15px; line-height: 21px; max-width: 84%; }
.msg .b .who { display: block; font-size: 12px; color: var(--k-mute-deep); }
.msg .b .tm { display: block; text-align: right; font-size: 11px; color: var(--k-mute); margin-top: 2px; }
.msg.me { justify-content: flex-end; }
.msg.me .b { background: var(--k-ink); color: var(--k-chalk); }
.msg.me .b .tm { color: var(--k-mute-night); }
.pin { background: var(--lc); color: var(--li); border-radius: 20px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; max-width: 86%; }
.poll { background: radial-gradient(130% 90% at 50% 0%, var(--night-hi), var(--k-night) 75%); color: var(--k-chalk); border-radius: var(--r-card); padding: 16px; display: flex; flex-direction: column; gap: 8px; max-width: 86%; box-shadow: inset 0 1px 0 var(--chalk-14), inset 0 0 0 1px var(--chalk-10); }
.arcs { position: relative; }
.arcs svg { display: block; width: 100%; height: auto; }
.arcs .l, .arcs .r { position: absolute; bottom: 4px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--k-mute-night); }
.arcs .l { left: 20%; } .arcs .r { right: 20%; align-items: flex-end; }
.gotit { align-self: flex-end; font-size: 12px; color: var(--k-mute-deep); display: flex; align-items: center; gap: 4px; }
.empty { text-align: center; padding: 120px 16px 40px; display: flex; flex-direction: column; gap: 8px; }

/* ===== matchday ===== */
.hero-num { display: flex; align-items: flex-end; gap: 16px; }
.stat3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat3 .st { display: flex; flex-direction: column; gap: 6px; font-size: 12px; line-height: 15px; color: var(--k-mute-deep); }
.night .stat3 .st { color: var(--k-mute-night); }
.ptw { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ptw .p { background: var(--white); border-radius: var(--r-pill); padding: 8px 12px 8px 8px; display: flex; align-items: center; gap: 10px; box-shadow: var(--slab); }
.ph { width: 44px; height: 44px; border-radius: 99px; object-fit: cover; object-position: 50% 15%; flex: none; box-shadow: 0 0 0 2px var(--white); }
.ph.ten { box-shadow: 0 0 0 2px var(--k-turf); }
.formrow { display: flex; justify-content: space-between; align-items: center; }
.yt { background: var(--k-night); border-radius: var(--r-hero); padding: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; box-shadow: var(--slab-d), inset 0 0 0 1px var(--chalk-10); }
.yt > div { background: radial-gradient(130% 90% at 50% 0%, color-mix(in srgb, var(--k-night-raise) 92%, var(--k-chalk)), var(--k-night-raise) 70%); border-radius: var(--r-card); padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; color: var(--k-mute-night); box-shadow: inset 0 1px 0 var(--chalk-10); }
.tbl { background: var(--k-card); border-radius: var(--r-card); padding: 6px 10px; }
.tbl .tr { display: grid; grid-template-columns: 28px 1fr 32px 44px 36px; align-items: center; height: 40px; font-size: 15px; }
.tbl .tr.h { height: 32px; font-family: var(--font-ui); font-weight: 500; font-size: 12px; letter-spacing: 0; color: var(--k-mute); }
.tbl .tr.you { background: var(--white); border-radius: var(--r-row); margin: 0 -6px; padding: 0 6px; font-weight: 600; }
.tbl .tr > :nth-child(n+3) { text-align: right; }
.dmr { display: flex; justify-content: flex-end; align-items: center; }
.tbl .tr > :first-child { color: var(--k-mute-deep); }
.fx { background: var(--k-card); border-radius: var(--r-card); padding: 18px 12px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; text-align: center; }
.fx > div:not(.mid) { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.fx .code { width: 56px; height: 56px; border-radius: var(--r-tile); background: radial-gradient(120% 100% at 50% 0%, var(--night-hi), var(--k-night) 80%); color: var(--k-chalk); display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 var(--chalk-14), inset 0 0 0 1px var(--chalk-10); }
.fx .mid { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pitchbox { position: relative; border-radius: var(--r-hero); overflow: hidden; background: var(--pitch); box-shadow: var(--slab-d); }
.pitchbox .lines { position: absolute; inset: 14px 20px; }
.pitchbox .lines svg { width: 100%; height: 100%; display: block; }
.pl8 { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pl8 .ph { width: 38px; height: 38px; box-shadow: 0 0 0 2px var(--k-chalk), 0 8px 14px -8px var(--k-night); }
.pl8 .ph.ten { box-shadow: 0 0 0 2px var(--k-turf), 0 8px 14px -8px var(--k-night); }
.pl8 .nm { display: flex; align-items: center; gap: 3px; padding: 2px 5px; border-radius: 6px; background: var(--night-80); color: var(--k-chalk); font-size: 10px; line-height: 12px; font-weight: 600; white-space: nowrap; }
.pl8 .c { position: absolute; right: -4px; top: -4px; width: 15px; height: 15px; border-radius: 8px; background: var(--k-night); color: var(--k-chalk); font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.squadlist .r { display: flex; align-items: center; gap: 12px; height: 52px; }
.squadlist .ph { width: 34px; height: 34px; }

/* full-screen moments */
.moment { position: relative; min-height: 100vh; min-height: 100dvh; background: var(--k-night); color: var(--k-chalk); overflow: hidden; }
.moment .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.moment .bg.dim { opacity: .5; filter: blur(10px); transform: scale(1.1); }
.moment .in { position: relative; z-index: 2; }
.moment .kd.xl { font-size: 54px; }
.glassbox { position: relative; background: linear-gradient(180deg, color-mix(in srgb, var(--k-night-raise) 52%, transparent), color-mix(in srgb, var(--k-night-raise) 74%, transparent)); -webkit-backdrop-filter: var(--glass-f); backdrop-filter: var(--glass-f); border-radius: var(--r-card); padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: inset 0 1px 0 var(--chalk-14), inset 0 -1px 0 var(--night-60), inset 0 0 0 1px var(--chalk-10); }
.score { display: grid; grid-template-columns: 1fr 2px 1fr; align-items: center; gap: 16px; }
.score .bar { height: 104px; background: var(--k-turf); border-radius: 1px; }
.score .side { display: flex; flex-direction: column; gap: 8px; }
.score .side.r { align-items: flex-end; text-align: right; }
.ftq { background: var(--lc); color: var(--li); border-radius: var(--r-hero); padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--slab-d); }
.rows-d { background: var(--k-night-raise); border-radius: var(--r-card); padding: 4px 14px; box-shadow: inset 0 1px 0 var(--chalk-10), inset 0 0 0 1px color-mix(in srgb, var(--k-chalk) 6%, transparent); }
.rows-d a, .rows-d .r { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.rows-d .sq { width: 40px; height: 40px; border-radius: var(--r-row); background: var(--chalk-10); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.review .cut { position: absolute; left: 50%; top: 96px; height: 470px; width: auto; max-width: none; transform: translateX(-50%); -webkit-mask: linear-gradient(180deg, black 72%, transparent 98%); mask: linear-gradient(180deg, black 72%, transparent 98%); }
.ground-slab { position: relative; height: 320px; border-radius: var(--r-hero); overflow: hidden; color: var(--k-chalk); box-shadow: var(--slab-d); }
.ground-slab img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ground-slab .f { position: absolute; inset: 0; background: linear-gradient(180deg, var(--night-0) 40%, var(--k-night) 92%); }
.ground-slab .in { position: absolute; left: 16px; right: 16px; bottom: 16px; }

/* tickets */
.tk .bg { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(14px) saturate(.9); opacity: .9; }
.tk .shade { position: absolute; inset: 0; background: linear-gradient(180deg, var(--night-40), var(--night-20) 40%, var(--night-60)); }
.glasscard { position: relative; background: radial-gradient(130% 70% at 50% 0%, color-mix(in srgb, var(--k-chalk) 24%, transparent), var(--chalk-14) 60%); -webkit-backdrop-filter: var(--glass-f); backdrop-filter: var(--glass-f); border-radius: var(--r-hero); padding: 26px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; box-shadow: inset 0 1px 0 var(--chalk-40), inset 0 -1px 0 var(--night-40), inset 0 0 0 1px var(--chalk-14), 0 30px 60px -30px var(--night-80); }
.glasscard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: url(system/materials/frosted-glass.webp) center / cover; opacity: .1; mix-blend-mode: overlay; pointer-events: none; }
.glasscard > * { position: relative; }
.tk-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; text-align: left; font-size: 13px; line-height: 17px; }
.ring { position: relative; width: 220px; height: 220px; margin: 0 auto; }
.ring > svg { position: absolute; inset: 0; }
.ring .dm { filter: var(--turf-glow); }
.ring .c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.rows-tbl { background: var(--k-night-raise); border-radius: var(--r-card); padding: 0 16px; box-shadow: inset 0 1px 0 var(--chalk-10), inset 0 0 0 1px color-mix(in srgb, var(--k-chalk) 6%, transparent); }
.rows-tbl .r { display: flex; justify-content: space-between; height: 50px; align-items: center; font-size: 14px; }
.rows-tbl .r > :first-child { color: var(--k-mute-night); }
.passcard { position: relative; border-radius: var(--r-hero); overflow: hidden; background: var(--lc); color: var(--lt); box-shadow: var(--slab-d); }
.passcard .head { position: relative; z-index: 2; height: 36px; background: var(--k-turf); color: var(--k-ink); display: flex; align-items: center; justify-content: center; }
.passcard .ph2 { position: relative; height: 300px; }
.passcard .ph2 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.passcard .ph2 .f { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--lc) 96%); }
.passcard .in { position: relative; padding: 0 16px 16px; margin-top: -76px; display: flex; flex-direction: column; gap: 6px; }
.tilt { transform: perspective(900px) rotateX(6deg) rotateZ(-3deg); animation: tilt 1s var(--spring) both; }
@keyframes tilt { from { opacity: 0; transform: perspective(900px) translateY(60px) rotateX(20deg) rotateZ(-6deg); } }
.stackcards > * { margin-top: -18px; position: relative; }
.stackcards > :first-child { margin-top: 0; }
.strip { border-radius: var(--r-hero) var(--r-hero) 0 0; padding: 18px 18px 34px; position: relative; overflow: hidden; min-height: 90px; box-shadow: inset 0 1px 0 var(--chalk-14), inset 0 0 0 1px var(--chalk-10), 0 -8px 20px -14px var(--night-60); }
.strip.card-m .dm { filter: var(--turf-glow); }
.strip.card-m { background: var(--k-night); color: var(--k-chalk); }
.strip.card-m img { position: absolute; right: 0; top: -20px; width: 140px; }
.strip.mwu-s { background: var(--lc); color: var(--li); }
.strip.mwu-s img { position: absolute; right: -10px; top: -6px; height: 120px; width: auto; }
.strip.credit { background: var(--k-turf); color: var(--k-ink); }
.ready { position: absolute; right: 16px; top: 18px; transform: rotate(-6deg); background: var(--k-night); color: var(--k-chalk); border-radius: 8px; padding: 4px 8px; }

/* shop */
.shop-hero { position: relative; border-radius: 0 0 var(--r-hero) var(--r-hero); background: var(--lc); color: var(--li); overflow: hidden; min-height: 420px; margin: -64px -16px 0; }
.shop-hero img { position: absolute; right: -60px; top: 20px; height: 380px; width: auto; max-width: none; }
.shop-hero .f { position: absolute; inset: 0; background: linear-gradient(90deg, var(--lc) 26%, color-mix(in srgb, var(--lc) 0%, transparent) 70%); }
.shop-hero .in { position: relative; z-index: 2; padding: 84px 16px 20px; display: flex; flex-direction: column; gap: 12px; min-height: 420px; justify-content: flex-end; }
.shop-hero .t1 { max-width: 76%; }
.cats { display: flex; justify-content: space-between; }
.cats a { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; }
.cats i { width: 52px; height: 52px; border-radius: 99px; background: var(--white); display: flex; align-items: center; justify-content: center; box-shadow: var(--slab); font-style: normal; }
.cats .on i { background: var(--k-ink); color: var(--k-chalk); }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.prod { position: relative; height: 270px; border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; background: var(--lc); color: var(--li); box-shadow: var(--slab-d); }
.prod img { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 80%; object-fit: cover; object-position: 50% 30%; }
.prod .fade { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--pc, var(--lc)) 0%, transparent) 40%, var(--pc, var(--lc)) 74%); }
.prod.green2 { --pc: var(--lc2); background: var(--pc); color: var(--lc2i); }
.prod.mint { --pc: var(--lm); background: var(--lm); color: var(--lmi); }
.prod.gold { --pc: var(--lg); background: var(--lg); color: var(--lgi); }
.prod .in { position: relative; z-index: 2; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.prod .in b { font-size: 15px; line-height: 18px; font-weight: 600; }
.tix { position: relative; border-radius: var(--r-hero); overflow: hidden; min-height: 250px; color: var(--lt); background: var(--lc); display: flex; flex-direction: column; justify-content: flex-end; box-shadow: var(--slab-d); }
.tix img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tix .fade { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--lc) 10%, transparent), color-mix(in srgb, var(--lc) 30%, transparent) 30%, var(--lc) 82%); }
.tix .in { position: relative; z-index: 2; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.tix .tag { position: absolute; z-index: 2; left: 12px; top: 12px; }
.hscroll { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px 12px; scroll-padding-inline: 16px; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { flex: none; width: 280px; }

/* wallet, kept, you */
.mcard { position: relative; width: 100%; max-width: 420px; aspect-ratio: 358 / 190; border-radius: var(--r-hero); overflow: hidden; background: var(--k-night); color: var(--k-chalk); box-shadow: var(--slab-d); }
.mcard .chrome { position: absolute; right: -10%; top: -22%; width: 70%; height: auto; animation: turn 9s ease-in-out infinite; }
@keyframes turn { 0%, 100% { transform: perspective(500px) rotateY(0); } 8% { transform: perspective(500px) rotateY(-24deg); } 24% { transform: perspective(500px) rotateY(24deg); } 33% { transform: perspective(500px) rotateY(0); } }
.mcard .shade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--k-night) 30%, var(--night-0) 75%); }
.mcard .sheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mcard .sheen::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--chalk-14), transparent); animation: sheen 6s ease-in-out infinite 1s; transform: translateX(-120%) skewX(-18deg); }
@keyframes sheen { 0% { transform: translateX(-120%) skewX(-18deg); } 40%, 100% { transform: translateX(320%) skewX(-18deg); } }
.mcard .lk { position: absolute; left: 20px; top: 20px; height: 16px; width: auto; }
/* the chrome answers the hand: a specular pass that follows the light rig. Light only, nothing moves. */
.mcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(58% 48% at var(--lx) var(--ly), var(--chalk-25), transparent 70%); mix-blend-mode: screen; opacity: .55; }
.coin::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(52% 44% at var(--lx) var(--ly), color-mix(in srgb, white 60%, transparent), transparent 65%); mix-blend-mode: soft-light; opacity: .9; }
.tiltchip { position: absolute; right: 16px; top: 14px; z-index: 3; transition: opacity .4s var(--ease); }
.tiltchip.gone { opacity: 0; pointer-events: none; }
@media (min-width: 1024px) { .tiltchip { display: none; } }
@media (prefers-reduced-motion: reduce) { .mcard::after, .coin::after, .tiltchip { display: none; } }
.mcard .bt { position: absolute; left: 20px; bottom: 18px; right: 20px; display: flex; flex-direction: column; gap: 8px; }
.kept { background: radial-gradient(120% 80% at 50% 0%, var(--night-hi), var(--k-night) 70%); color: var(--k-chalk); border-radius: var(--r-hero); padding: 16px 10px 14px; box-shadow: var(--slab-d), inset 0 0 0 1px var(--chalk-10); }
.coins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 14px; }
.coinw { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-size: 11px; line-height: 14px; color: var(--k-mute-night); }
.coinw b { color: var(--k-chalk); font-size: 12px; display: block; }
.coin { position: relative; width: 84px; height: 84px; border-radius: 99px; background: var(--k-chrome-ramp); box-shadow: 0 16px 18px -12px var(--k-night), inset 0 0 0 1px var(--chalk-25); animation: float 3.2s ease-in-out infinite; }
.coin .rim { position: absolute; inset: 0; width: 100%; height: 100%; }
.coin::before { content: ""; position: absolute; inset: 15px; border-radius: 99px; background: radial-gradient(circle at 40% 35%, var(--night-hi), var(--k-night)); box-shadow: inset 0 2px 4px var(--night-60); }
.coin img { position: absolute; inset: 24px; width: 36px; height: 36px; }
.coin.big { width: 220px; height: 220px; }
.coin.big::before { inset: 38px; }
.coin.big img { inset: 64px; width: 92px; height: 92px; }
.coinw:nth-child(2) .coin { animation-delay: .53s; } .coinw:nth-child(3) .coin { animation-delay: 1.06s; }
@keyframes float { 50% { transform: translateY(-6px); } }
.coin.drop { animation: coindrop .9s var(--spring) both, float 3.2s ease-in-out .9s infinite; }
@keyframes coindrop { from { opacity: 0; transform: translateY(-60px) scale(1.2); } }
.shelf-empty { text-align: center; padding: 48px 20px; display: flex; flex-direction: column; gap: 6px; }
.recent .ri { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.recent .ri .ricon { width: 36px; height: 36px; border-radius: var(--r-row); background: var(--ink-06); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.credit-hero { background: radial-gradient(120% 90% at 50% 0%, var(--night-hi), var(--k-night) 70%); color: var(--k-chalk); border-radius: var(--r-hero); padding: 16px; display: flex; gap: 16px; align-items: center; box-shadow: var(--slab-d); }
.credit-hero .coin { width: 92px; height: 92px; flex: none; }
.credit-hero .coin::before { inset: 16px; } .credit-hero .coin img { inset: 27px; width: 38px; height: 38px; }
.kites { display: inline-flex; align-items: center; gap: 8px; }
.kites .mk { width: 40px; height: 42px; background: var(--k-ink); -webkit-mask: url(system/mark/mark-night.svg) center / contain no-repeat; mask: url(system/mark/mark-night.svg) center / contain no-repeat; }
.kites .dots { display: flex; flex-direction: column; gap: 4px; }
.kites .dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--ink-10); display: block; }
.kites .dots i.on { background: var(--k-turf); }
.coll { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center; font-size: 12px; line-height: 15px; }
.coll .b { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.coll i { width: 60px; height: 60px; border-radius: var(--r-tile); background: radial-gradient(130% 100% at 50% 0%, var(--night-hi), var(--k-night) 75%); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: inset 0 1px 0 var(--chalk-14), inset 0 0 0 1px var(--chalk-10); }
.coll i img { width: 48px; }
.coll .off i { background: var(--k-mute); } .coll .off i img { opacity: .35; } .coll .off { color: var(--k-mute-deep); }
.season { background: radial-gradient(120% 80% at 50% 0%, var(--night-hi), var(--k-night) 70%); color: var(--k-chalk); border-radius: var(--r-hero); padding: 16px; box-shadow: var(--slab-d); }
.season svg { width: 100%; height: auto; display: block; }
.follow { position: relative; overflow: hidden; border-radius: var(--r-hero); background: var(--lc); color: var(--li); padding: 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--slab-d); }
.follow .rib { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.follow > :not(.rib) { position: relative; }
.setrow { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.skel { background: linear-gradient(90deg, var(--ink-06) 25%, var(--ink-10) 50%, var(--ink-06) 75%); background-size: 200% 100%; animation: skel 1.4s linear infinite; border-radius: 8px; }
@keyframes skel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* show page */
.show-hero { position: relative; border-radius: var(--r-hero); overflow: hidden; background: var(--sc); color: var(--si); box-shadow: var(--slab-d); }
.show-hero .rib { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.show-hero .cut { position: absolute; right: -20px; top: 0; height: 250px; width: auto; max-width: none; z-index: 1; }
.show-hero .cut.wide { right: 50%; transform: translateX(50%); height: 230px; }
.show-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 0%, transparent) 150px, var(--sc) 250px); }
.show-hero .in { position: relative; z-index: 2; padding: 210px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.show-hero .kd { font-size: 34px; }
.mwu-card { position: relative; border-radius: var(--r-hero); overflow: hidden; background: var(--lc); color: var(--li); min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: var(--slab-d); }
.mwu-card img { position: absolute; left: 50%; top: 10px; height: 230px; width: auto; max-width: none; transform: translateX(-50%); }
.mwu-card .in { position: relative; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg, transparent, var(--lc) 30%); }

.d-only { }
@media (max-width: 1023.98px) { .d-only { display: none !important; } }

/* =================== desktop, 1024 and up: top nav, wider content =================== */
@media (min-width: 1024px) {
  .m-only { display: none !important; }
  .tabbar, .tab-scrim { display: none; }
  .topnav { display: flex; position: sticky; top: 0; z-index: 50; height: 76px; align-items: center; gap: 36px; padding: 0 40px; background: color-mix(in srgb, var(--k-ground) 86%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); border-bottom: 1px solid var(--hair); }
  .topnav .lk { height: 20px; width: auto; }
  .topnav nav { display: flex; gap: 28px; font-size: 15px; font-weight: 500; color: var(--k-mute-deep); }
  .topnav nav a.on { color: var(--k-ink); font-weight: 600; }
  .topnav .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
  .topnav .search { width: 290px; height: 44px; border-radius: 22px; background: var(--white); display: flex; align-items: center; gap: 10px; padding: 0 16px; color: var(--k-mute); font-size: 14px; box-shadow: var(--slab); }
  .topnav .pillc { height: 44px; padding: 0 18px; border-radius: 22px; background: var(--white); display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; box-shadow: var(--slab); }
  .topnav .me { height: 44px; padding: 0 14px 0 4px; border-radius: 22px; background: var(--white); display: flex; align-items: center; gap: 8px; box-shadow: var(--slab); }
  .topnav .me .mb { width: 36px; height: 36px; border-radius: 18px; background: var(--tone); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
  .topnav.dark { background: color-mix(in srgb, var(--k-night) 88%, transparent); border-bottom-color: var(--hair-night); color: var(--k-chalk); }
  .topnav.dark nav { color: var(--k-mute-night); } .topnav.dark nav a.on { color: var(--k-chalk); }
  .topnav.dark .search, .topnav.dark .pillc, .topnav.dark .me { background: var(--k-night-raise); color: var(--k-chalk); box-shadow: none; }
  .topnav.dark .me .mb { background: var(--chalk-14); }
  .screen { padding-bottom: 56px; }
  .page { max-width: 1240px; padding: 0 40px; }
  .topbar { max-width: 1240px; padding: 0 40px; height: 88px; position: relative; background: none; }
  .night .topbar, .topbar.dark { background: none; }
  .topbar .title { text-align: left; font-size: 34px; line-height: 38px; font-weight: 650; letter-spacing: -.02em; }
  .topbar .back-m { display: none; }
  .cols { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start; }
  .cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
  .narrow { max-width: 560px; margin: 0 auto; }


  /* D1 invitation */
  .inv { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 24px; padding: 104px 40px 40px; background: var(--k-ground); color: var(--k-ink); }
  .inv-head { position: absolute; left: 0; right: 0; top: 0; padding: 0 40px; height: 88px; }
  .inv-head .pill-lockup { background: none; padding: 0; }
  .inv-panel { position: relative; border-radius: var(--r-hero); overflow: hidden; background: var(--lc); color: var(--li); min-height: 680px; box-shadow: var(--slab-d); }
  .inv .cut { left: auto; right: -10px; top: auto; bottom: 0; height: 84%; transform: none; -webkit-mask: none; mask: none; }
  .inv-body { padding: 40px; max-width: 60%; margin: 0; }
  .inv-body .kd { font-size: 66px; }
  .inv-form { display: flex; flex-direction: column; gap: 16px; background: var(--k-card); border-radius: var(--r-hero); padding: 32px; box-shadow: var(--slab); }
  .welcome-in { padding-top: 80px; max-width: 520px; }
  .bsheet { border-radius: var(--r-hero); margin: auto 0; }
  .scrim { align-items: center; }

  /* desktop home */
  .md-hero { height: 400px; }
  .md-hero .t { font-size: 52px; line-height: 54px; }
  .md-hero .top, .md-hero .bot { left: 36px; right: 36px; }
  .md-hero .top { top: 32px; } .md-hero .bot { bottom: 32px; }
  .billrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .apps { grid-template-columns: repeat(3, 1fr); }
  .show-hero { min-height: 380px; }
  .show-hero .rib { object-position: 50% 50%; }
  .show-hero::after { background: linear-gradient(90deg, var(--sc) 30%, color-mix(in srgb, var(--sc) 0%, transparent) 62%); }
  .show-hero .cut, .show-hero .cut.wide { top: auto; bottom: 0; right: 60px; height: 96%; transform: none; }
  .show-hero .in { padding: 36px; max-width: 62%; min-height: 380px; justify-content: flex-end; }
  .show-hero .kd { font-size: 80px; }
  .moment .kd.xl { font-size: 120px; }
  .score .bar { height: 160px; }
  .review .cut { left: auto; right: 8%; top: auto; bottom: 0; height: 88%; transform: none; }
  .shop-hero { margin: 8px 0 0; border-radius: var(--r-hero); min-height: 440px; }
  .shop-hero img { right: 60px; height: 420px; }
  .shop-hero .in { padding: 48px; min-height: 440px; }
  .shop-hero .t1 { font-size: 52px; line-height: 54px; max-width: 640px; }
  .pgrid { grid-template-columns: repeat(5, 1fr); }
  .pgrid .tix { min-height: 270px; }
  .mwu { height: 520px; max-width: 560px; margin: 0 auto; }
  .hscroll { margin: 0; padding: 4px 0 12px; }
  .callit, .chat-col { max-width: 640px; margin: 0 auto; }
  .tk-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; max-width: 1040px; margin: 0 auto; }
  .mcard { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .sting i { opacity: 1; }
}

/* phone view on desktop */
.phonebtn { height: 40px; padding: 0 14px; border-radius: 99px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; background: var(--k-night); color: var(--k-chalk); }
.topnav.dark .phonebtn { background: var(--k-chalk); color: var(--k-ink); }
.phoneview { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--k-night) 82%, transparent); backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.pv-dev { width: 414px; height: min(868px, calc(100vh - 90px)); border-radius: 56px; padding: 12px; background: linear-gradient(160deg, #2a2c29, #0b0c0a); box-shadow: inset 0 0 0 1px #ffffff22, 0 40px 80px -30px #000; }
.pv-dev iframe { width: 390px; height: 100%; border: 0; border-radius: 44px; background: var(--k-chalk); display: block; }
.pv-cap { color: var(--k-chalk); opacity: .75; }
.pv-x { position: absolute; right: 28px; top: 24px; width: 44px; height: 44px; border-radius: 99px; background: var(--k-chalk); color: var(--k-ink); display: grid; place-items: center; }
@media (max-width: 899px) { .phonebtn { display: none; } }
@media (min-width: 900px) { .apps { max-width: 980px; } }

/* section marker, used only where sections are a sequence (landing): dot number beside a plain heading (rule D31) */
.sec { display: flex; align-items: center; gap: 12px; color: var(--k-chalk); }
.sec .dm { flex: none; }
.sec-t { flex: none; font-family: var(--font-ui); font-weight: 600; font-size: 22px; line-height: 28px; letter-spacing: -.01em; }
/* the touchline: a hairline running out to the edge, ticked every five metres */
.sec-line { display: block; flex: 1; height: 11px; background:
  linear-gradient(0deg, transparent 5px, var(--chalk-14) 5px, var(--chalk-14) 6px, transparent 6px),
  repeating-linear-gradient(90deg, var(--chalk-14) 0 1px, transparent 1px 26px); }
.sec.ink { color: var(--k-ink); }
.sec.ink .sec-line { background:
  linear-gradient(0deg, transparent 5px, var(--hair) 5px, var(--hair) 6px, transparent 6px),
  repeating-linear-gradient(90deg, var(--hair) 0 1px, transparent 1px 26px); }



/* =================== D0 / Screens-0: TUNNL direct (landing) ===================
   One column at phone width, 1240 measure at 1024 and up. Everything sits on night.
   Stacking: the plate is z 0, every section is z 1, so no image can paint over copy. */
.land { position: relative; isolation: isolate; background: var(--k-night); color: var(--k-chalk); overflow: hidden; }
.land-head { position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 16px; }

/* hero: the light leads. Lamp high on the side away from the type, beam onto the words. */
.land-hero { position: relative; z-index: 1; overflow: hidden; padding-bottom: 32px; }
.land-hero + .land-sec { padding-top: 48px; }
.land-hero .photo { position: absolute; left: auto; right: -30%; top: -14px; width: 120%; max-width: none; height: auto; aspect-ratio: 9 / 16; object-fit: cover; z-index: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.land-hero .shade { position: absolute; inset: 0; z-index: 0; background:
  linear-gradient(180deg, var(--night-60) 0, var(--night-0) 90px),
  linear-gradient(180deg, var(--night-0) 44%, var(--night-60) 62%, var(--k-night) 92%); }
.land-copy { position: relative; z-index: 2; padding: clamp(340px, 100vw, 420px) 16px 0; display: flex; flex-direction: column; }
.land-copy h1 { font-size: clamp(32px, 10vw, 46px); margin: 0; padding-left: 2px; }
.land-sub { margin: 18px 0 0; font-size: 17px; line-height: 24px; color: var(--chalk-90); max-width: 30ch; }
.land-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.land-cta .btn.raise { box-shadow: inset 0 0 0 1px var(--hair-night); }
/* the hero never waits on the animation to be readable */
.land .enter { animation-name: land-rise; }
@keyframes land-rise { from { transform: translateY(10px); } }

/* sections */
.land-sec { position: relative; z-index: 1; padding: 72px 16px 0; display: flex; flex-direction: column; gap: 24px; max-width: 560px; margin: 0 auto; }

/* 01 What you get: a team sheet of four */
.offer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--hair-night); }
.offer { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) 84px; column-gap: 14px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--hair-night); }
.offer-no { padding-top: 3px; }
.offer-obj { position: relative; grid-column: 3; grid-row: 1; width: 84px; height: 72px; }
.offer-obj::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -4px; height: 10px; border-radius: 50%; background: radial-gradient(closest-side, var(--night-90), var(--night-0)); z-index: -1; }
.offer-obj img { position: relative; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 10px 14px var(--night-80)); }
.offer-txt { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 6px; }
.offer-t { margin: 0; font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--k-chalk); }
.offer-d { margin: 0; font-size: 14px; line-height: 20px; color: var(--k-mute-night); }

/* 02 Joining */
.join-grid { display: flex; flex-direction: column; gap: 28px; }
.belief-s { font-size: 26px; line-height: 31px; font-weight: 600; letter-spacing: -.02em; color: var(--k-chalk); margin: 0; text-wrap: balance; }
.join-side { display: flex; flex-direction: column; gap: 12px; }
.join-side .t2 { color: var(--k-turf); }
.join-body { margin: 0; font-size: 16px; line-height: 24px; color: var(--k-mute-night); }
.join-pull { margin: 6px 0 0; padding-top: 14px; border-top: 1px solid var(--hair-night); font-weight: 600; font-size: 16px; line-height: 22px; color: var(--k-chalk); }

/* 03 On the bill */
.bill-h { font-size: clamp(28px, 8.4vw, 40px); line-height: .92; margin: -4px 0 0; color: var(--k-chalk); }
.nextup { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 0; border-top: 1px solid var(--hair-night); border-bottom: 1px solid var(--hair-night); }
.nextup::before { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 2px; background: var(--k-turf); }
.nx-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nx-m { font-size: 24px; line-height: .95; color: var(--k-chalk); }
.nx-v { font-size: 13px; line-height: 18px; color: var(--k-mute-night); }
.nx-d { flex: none; padding-bottom: 3px; }
.nx-d .dm { width: auto; height: 12px; }

/* footer */
.land-foot { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 72px 16px 36px; display: flex; flex-direction: column; gap: 22px; color: var(--k-chalk); }
.land-foot .sec-line { display: block; flex: none; width: 100%; }
.lf-row { display: flex; justify-content: space-between; align-items: center; }

.dbr { display: none; }

@media (min-width: 640px) and (max-width: 1023.98px) {
  .land-copy { padding-top: 420px; }
  .land-hero .photo { right: -8%; width: 60%; top: -40px; }
  .land-sec, .land-foot { max-width: 720px; }
  .land-hero .shade { background: linear-gradient(180deg, var(--night-60) 0, var(--night-0) 90px), linear-gradient(180deg, var(--night-0) 40%, var(--night-60) 60%, var(--k-night) 90%), linear-gradient(90deg, var(--k-night) 25%, var(--night-0) 50%); }
  .land-copy h1 { font-size: 56px; }
}

@media (min-width: 1024px) {
  .dbr { display: inline; }
  .land { --plate-h: clamp(560px, 48vw, 700px); }
  .land-plate { position: absolute; top: 24px; z-index: 0; height: var(--plate-h); left: calc(min(50% + 560px, 100% - 120px) - 0.8125 * 2 * var(--plate-h)); pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 55%, transparent 95%), linear-gradient(90deg, transparent 0, #000 40%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 55%, transparent 95%), linear-gradient(90deg, transparent 0, #000 40%); mask-composite: intersect; }
  .land-plate img { height: 100%; width: auto; max-width: none; }
  .land-head { position: relative; z-index: 5; max-width: 1240px; margin: 0 auto; padding: 0 40px; height: 88px; }
  .land-hero { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
  .land-copy { padding: clamp(150px, 15vw, 210px) 0 0; }
  .land-copy h1 { font-size: clamp(44px, 4.4vw, 64px); white-space: nowrap; line-height: .88; }
  .land-sub { margin-top: 26px; font-size: 19px; line-height: 28px; max-width: none; }
  .land-cta { margin-top: 34px; gap: 12px; }
  .land-cta .btn { height: 60px; padding: 0 30px; font-size: 16px; }

  .land-sec { max-width: 1240px; padding: 136px 40px 0; gap: 36px; }
  .land-hero + .land-sec { padding-top: 104px; }

  .offer-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 0; }
  .offer { display: flex; flex-direction: column; padding: 4px 28px 8px; border-bottom: 0; border-left: 1px solid var(--hair-night); }
  .offer:first-child { padding-left: 0; border-left: 0; }
  .offer:last-child { padding-right: 0; }
  .offer-no { padding: 0; }
  .offer-obj { width: 100%; height: 168px; margin: 18px 0 30px; }
  .offer-obj img { object-position: 0 100%; width: auto; max-width: 82%; }
  .offer-obj::after { left: 0; right: auto; width: 60%; bottom: -8px; height: 14px; }
  .offer-t { font-size: 19px; line-height: 25px; }
  .offer-d { font-size: 15px; line-height: 22px; }
  .offer-txt { gap: 10px; }

  .join-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; align-items: start; }
  .belief-s { font-size: 52px; line-height: 56px; letter-spacing: -.03em; max-width: 17ch; }
  .join-side { gap: 14px; padding-bottom: 6px; }
  .join-side .t2 { font-size: 26px; line-height: 30px; }
  .join-body { font-size: 17px; line-height: 26px; }
  .join-pull { font-size: 17px; margin-top: 10px; padding-top: 18px; }

  .bill-h { font-size: clamp(56px, 5vw, 72px); margin: -8px 0 4px; }
  .land .bill { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .nextup { flex-direction: row; justify-content: space-between; padding: 26px 0; align-items: center; margin-top: 4px; }
  .nx-l { flex-direction: row; align-items: baseline; gap: 28px; }
  .nx-m { font-size: clamp(26px, 2.4vw, 34px); white-space: nowrap; }
  .nx-l .lbl { white-space: nowrap; }
  .nx-v { white-space: nowrap; }
  .nx-v { font-size: 15px; }
  .nx-d .dm { height: 18px; }

  .land-foot { max-width: 1240px; padding: 104px 40px 48px; gap: 28px; }
}

/* the loops carry their own float and shadow, and more padding than the stills */
.offer-obj::after { display: none; }
.offer-obj img { filter: none; transform: scale(1.3); transform-origin: 50% 70%; }
@media (min-width: 900px) { .offer-obj img { transform: scale(1.35); transform-origin: 20% 75%; } }

.offer-obj.badge { width: 96px; height: 96px; }
.offer-obj.badge video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }
@media (min-width: 900px) { .offer-obj.badge { width: 200px; height: 200px; margin: 10px 0 22px -18px; } }
.showlogo { display: block; width: auto; max-width: 70%; object-fit: contain; border-radius: 0; filter: drop-shadow(0 2px 6px rgba(0,0,0,.18)); }
.lineup .foot .showlogo { margin: 0 0 2px; align-self: flex-start; }

/* ---------- show worlds: doors, welcome and the lead show (KOKO, DSPN) ---------- */
:is(.w-koko, .w-dspn) :is(.inv-head, .welcome) .soundchip.dark { background: var(--lgb); color: var(--lgt); }
:is(.w-koko, .w-dspn) :is(.inv-head, .welcome) .soundchip.dark .sw { background: color-mix(in srgb, var(--li) 22%, transparent); }
.inv .showlogo { width: auto; max-width: none; align-self: flex-start; }
.inv-body .showlogo { height: 74px; margin: 2px 0 2px -2px; }
.inv-body.koko-l .showlogo { height: 82px; }
.inv-body.dspn-l .showlogo { height: 96px; }
/* the group cut-outs are landscape: they sit wider and lower than Tim */
.inv .cut.wide { top: 118px; height: auto; width: 106%; }
.inv .cut.wide.dspn { width: 100%; top: 108px; }
.welcome .mk { width: 34px; height: auto; }
.welcome .wlogo { height: 56px; width: auto; }

.av.lead-mark { display: inline-flex; align-items: center; justify-content: center; }
/* social row: the five @inthetunnl accounts, in the colour of the type around them */
.social { display: flex; align-items: center; flex-wrap: wrap; gap: 0 2px; }
.social .so { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 22px; color: inherit; opacity: .78; transition: opacity .15s, background .15s; }
.social .so:hover, .social .so:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
.social .so svg { width: 19px; height: 19px; display: block; }
.social .handle { font-size: 13px; line-height: 18px; font-weight: 600; margin-right: 6px; opacity: .78; }
.social.tight .so { margin: 0 -2px; }
.land-social { position: relative; z-index: 4; margin-top: 18px; color: var(--k-chalk); }
.inv-foot { position: relative; z-index: 3; display: flex; justify-content: center; padding: 4px 16px 24px; }
.inv-form .social { margin: 0 -10px; color: var(--k-mute-deep); }
.review-page { padding-top: 440px; }
.review .cut.wide { top: 150px; height: auto; width: 118%; }
.show-hero .hero-logo { height: 64px; width: auto; max-width: none; align-self: flex-start; }
.tk-mark { display: block; padding: 6px 12px; border-radius: 16px; background: var(--lc); }
@media (min-width: 1024px) {
  .review .cut.wide { width: auto; height: 70%; right: 4%; top: auto; bottom: 0; }
  .show-hero .hero-logo { height: 110px; }
  /* group cut-outs on the 2-column door: lower right, the copy column narrows to keep faces clear */
  .inv .cut.wide { left: auto; right: 3%; top: auto; bottom: 0; width: 64%; height: auto; transform: none; }
  .inv .cut.wide.dspn { width: 60%; top: auto; }
  .inv-body.koko-l, .inv-body.dspn-l { max-width: 46%; }
  .inv-body .showlogo { height: 120px; }
  .inv-body.dspn-l .showlogo { height: 140px; }
}

/* ---------- #/ early access ---------- */
.inside-link { font-size: 14px; color: var(--k-chalk); }
.early { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.early-lbl { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--k-mute-night); }
.early-row { display: flex; flex-direction: column; gap: 10px; }
.field.dark { background: var(--k-night-raise); color: var(--k-chalk); box-shadow: inset 0 0 0 1px var(--hair-night); border-radius: var(--r-pill); padding: 0 22px; }
.field.dark::placeholder { color: var(--k-mute-night); }
.field.dark:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--k-turf); }
.early .field-err { margin-top: 0; }
.early-note { font-size: 13px; line-height: 18px; color: var(--k-mute-night); }
.early.done { gap: 12px; padding: 20px 0 4px; border-top: 1px solid var(--hair-night); }
.early.done .founder { align-self: flex-start; }
.early.done .early-note { font-size: 15px; line-height: 22px; color: var(--chalk-90); }
.lands { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.inv .cut.wide { -webkit-mask: linear-gradient(180deg, black 60%, transparent 96%); mask: linear-gradient(180deg, black 60%, transparent 96%); }
@media (min-width: 1024px) {
  .early-row { flex-direction: row; }
  .early-row .field { flex: 1; height: 60px; font-size: 16px; }
  .early-row .btn { height: 60px; padding: 0 30px; font-size: 16px; }
  .early { margin-top: 34px; }
  .inv .cut.wide { -webkit-mask: none; mask: none; }
}
@media (min-width: 1024px) { .land-copy .land-sub { max-width: 62ch; } }
.review .glassbox { color: var(--k-chalk); }
.show-hero :is(.btn.glass, .chip.glass) { background: var(--lgb); color: var(--lgt); }
.show-hero .btn.chalk { background: var(--lbb); color: var(--lbi); }
:is(.w-koko, .w-dspn) .review .topbar { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:is(.w-koko, .w-dspn) .review .round.dark { background: var(--lgb); color: var(--lgt); box-shadow: none; }

/* ---------- entering a show's world from the platform ---------- */
.enterable { cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.enterable:hover { transform: translateY(-2px); }
.enterable:focus-visible { outline: 2px solid var(--k-turf); outline-offset: 3px; }
.lineup .foot .btn .gl, .billcard .act .btn .gl { margin-right: -4px; }
.allback { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 9px; border-radius: 16px; font-size: 12px; font-weight: 600; background: var(--ink-06); color: var(--k-ink); white-space: nowrap; }
.allback:hover { background: var(--ink-10); }
.topnav.dark .allback { background: var(--chalk-10); color: var(--k-chalk); }
.allrow { display: flex; margin-bottom: -4px; }

/* ---------- show names set large scale to their box and never clip ---------- */
.lineup, .inv-body, .show-hero .in, .billcard .txt { container-type: inline-size; }
.lineup .foot .kd { font-size: min(19px, calc((100cqi - 66px) / 10.6)); }
.lineup .foot .kd img { width: min(22px, 8cqi) !important; flex: none; }
.billcard .name .kd { font-size: min(19px, calc((100cqi - 66px) / 10.6)); }
.inv-body .kd { font-size: min(37px, calc(100cqi / 10.8)); }
.show-hero .kd { font-size: min(34px, calc(100cqi / 10.8)); }
@media (min-width: 1024px) {
  .inv-body .kd { font-size: min(66px, calc(100cqi / 10.8)); }
  .show-hero .kd { font-size: min(80px, calc(100cqi / 10.8)); }
}
.billcard .txt { width: 62%; }

/* ---------- show logos: EggChasers is stacked, so it stands taller to weigh the same ---------- */
.showlogo { width: auto; max-width: none; display: block; }
.inv-body.ec-l .showlogo { height: 112px; }
.welcome .wlogo.ec-logo { height: 84px; }
.show-hero .hero-logo.ec-logo { height: 96px; }
.billcard .name .showlogo.ec-logo { margin: -6px 0; }
@media (min-width: 1024px) {
  .inv-body.ec-l .showlogo { height: 168px; }
  .show-hero .hero-logo.ec-logo { height: 150px; }
}

/* ---------- shop tiles: the whole garment, contained on the studio ground ---------- */
:root { --studio: #E4E3DC; }
.prod { height: auto; display: flex; flex-direction: column; justify-content: flex-start; background: var(--pc, var(--lc)); color: var(--li); text-decoration: none; }
.prod .pimg { display: block; position: relative; aspect-ratio: 1 / 1; background: var(--studio); }
.prod .pimg img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 7%; object-fit: contain; object-position: 50% 50%; }
.prod .in { padding: 12px 12px 14px; gap: 2px; flex: 1; }
.prod .in .cap { opacity: .8; }
.prod .go { display: inline-flex; align-items: center; gap: 2px; margin-top: 8px; font-size: 13px; font-weight: 600; }
.prod:hover .pimg img { transform: scale(1.03); }
.prod .pimg img { transition: transform .3s var(--ease); }
.pgrid { align-items: stretch; }
.pgrid .tix { min-height: 0; height: 100%; }

/* ---------- a piece's page ---------- */
.w-ec, .ec { --lp: var(--ec-bottle); --lpi: var(--ec-cream); }
.w-koko, .koko { --lp: var(--koko-teal); --lpi: var(--koko-peach); }
.w-dspn, .dspn { --lp: var(--dspn-brown); --lpi: var(--dspn-cream); }
.pdp { display: flex; flex-direction: column; gap: 20px; }
.pgal { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ptrack { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--r-hero); background: var(--studio); scrollbar-width: none; box-shadow: var(--slab); }
.ptrack::-webkit-scrollbar { display: none; }
.pslide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; position: relative; aspect-ratio: 4 / 5; }
.pslide img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 6%; object-fit: contain; }
.pslide figcaption { position: absolute; left: 14px; bottom: 12px; font-size: 12px; font-weight: 600; color: var(--k-mute-deep); background: color-mix(in srgb, white 70%, transparent); padding: 4px 10px; border-radius: 12px; }
.pdots { display: flex; justify-content: center; gap: 6px; }
.pdots i { width: 6px; height: 6px; border-radius: 3px; background: var(--ink-10); transition: width .2s; }
.pdots i.on { width: 18px; background: var(--k-ink); }
.pthumbs { display: none; gap: 10px; }
.pthumb { width: 76px; height: 76px; border-radius: 14px; background: var(--studio); overflow: hidden; position: relative; box-shadow: inset 0 0 0 1px var(--hair); }
.pthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.pthumb.on { box-shadow: inset 0 0 0 2px var(--lp); }
.pinfo { display: flex; flex-direction: column; gap: 14px; }
.pinfo .t1 { margin-top: -4px; }
.pprice { font-size: 20px; font-weight: 650; letter-spacing: -.01em; }
.mwuchip { align-self: flex-start; background: var(--lp); color: var(--lpi); }
.psizes { display: flex; flex-wrap: wrap; gap: 8px; }
.psize { height: 44px; min-width: 52px; justify-content: center; font-size: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--hair); }
.psize.on { background: var(--lp); color: var(--lpi); box-shadow: none; }
.btn.pbuy { background: var(--lp); color: var(--lpi); box-shadow: inset 0 1px 0 var(--chalk-14), 0 12px 22px -12px var(--night-60); }
.pcredit { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: var(--r-row); background: var(--white); box-shadow: var(--slab); }
.pcredit .coin { width: 44px; height: 44px; flex: none; animation: none; }
.pcredit .coin img { inset: 9px; width: 26px; height: 26px; }
.pmwu { display: flex; gap: 6px; align-items: flex-start; }
.pmwu .gl { margin-top: 1px; color: var(--lp); }
.wdy { display: flex; flex-direction: column; border-top: 1px solid var(--hair); padding-top: 14px; gap: 2px; }
.wdy .lbl { color: var(--k-mute-deep); margin-bottom: 6px; }
.wr { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--hair); font-size: 14px; line-height: 20px; }
.wr .k { font-weight: 600; }
@media (min-width: 1024px) {
  .pdp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: start; max-width: 1180px; margin: 8px auto 0; }
  .pgal { position: sticky; top: 96px; }
  .pthumbs { display: flex; }
  .pdots { display: none; }
  .pinfo { padding-top: 8px; }
  .pinfo .t1 { font-size: 44px; line-height: 48px; }
}
.inv-body.ec-l .showlogo { height: 96px; }
@media (min-width: 1024px) {
  .inv-body.ec-l .showlogo { height: 150px; }
  .pslide { aspect-ratio: 1 / 1; }
  .ptrack { max-height: calc(100vh - 260px); }
  .pslide { max-height: calc(100vh - 260px); }
}

/* ---------- On now: each show by its logo on its own colour; Kept on night ---------- */
.lav { width: 64px; height: 64px; flex: none; border-radius: 99px; background: var(--sc); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 8px 16px -10px var(--night-60), inset 0 0 0 1px color-mix(in srgb, var(--k-ink) 6%, transparent); }
.lav img { display: block; height: auto; }
.storyav .obj { width: 64px; height: 64px; border-radius: 99px; background: radial-gradient(120% 100% at 50% 0%, var(--night-hi), var(--k-night) 72%); box-shadow: 0 8px 16px -10px var(--night-60); }
.storyav .obj img { width: 47px; }

/* ---------- floodlights ---------- */
.flood { position: relative; height: 100%; }
.flood img { display: block; }
.flood > img:not(.f-off) { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.land-plate .flood .f-off { height: 100%; width: auto; max-width: none; }
.land-hero .photo { overflow: hidden; }
.land-hero .photo .flood { position: absolute; inset: 0; }
.land-hero .photo .flood img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.flood .f-beam, .flood .f-glow { mix-blend-mode: screen; }
.land.lit .flood .f-lit { opacity: 1; }
.land.flooding .f-b1 { animation: strike .34s .18s both; }
.land.flooding .f-b2 { animation: strike .36s .5s both; }
.land.flooding .f-b3 { animation: strike .32s .8s both; }
.land.flooding .f-beam { animation: bloom 1.2s 1s cubic-bezier(.3, .6, .3, 1) both; -webkit-mask-image: radial-gradient(circle at 78% 22%, #000 0, #000 var(--r, 0%), transparent calc(var(--r, 0%) + 18%)); mask-image: radial-gradient(circle at 78% 22%, #000 0, #000 var(--r, 0%), transparent calc(var(--r, 0%) + 18%)); }
.land.flooding .f-glow { animation: glow 1.5s 1.05s ease-out both; }
.land.flooding .f-lit { animation: settle .45s 1.95s ease-in-out both; }
.land.flooding .land-copy { animation: land-in .6s 1.75s var(--ease) both; }
@property --r { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@keyframes strike { 0% { opacity: 0; } 18% { opacity: .85; } 30% { opacity: .15; } 46% { opacity: 1; } 58% { opacity: .6; } 72%, 100% { opacity: 1; } }
@keyframes bloom { from { opacity: 0; --r: 0%; } 30% { opacity: 1; } to { opacity: 1; --r: 120%; } }
@keyframes glow { 0% { opacity: 0; } 40% { opacity: .9; } 100% { opacity: 0; } }
@keyframes settle { from { opacity: 0; } to { opacity: 1; } }
@keyframes land-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .land .flood .f-lit { opacity: 1; animation: none !important; } }
/* the secondary on the match hero: clear system glass beside the chalk primary */
.md-hero .btn.glass, .moment .btn.glass[href="#/callit"] { background: linear-gradient(180deg, var(--chalk-40), var(--chalk-14) 55%, var(--chalk-25)); color: var(--k-chalk); box-shadow: inset 0 1px 0 var(--chalk-60), inset 0 -1px 0 var(--night-40), inset 0 0 0 1px var(--chalk-14), 0 8px 20px -14px var(--night-80); white-space: nowrap; }


/* neck label shots sit as a print on the cream ground */
.pslide img[src*="-neck"], .pthumb img[src*="-neck"], .pimg img[src*="-neck"] { padding: 0; object-fit: cover; object-position: center 40%; border-radius: 14px; box-shadow: 0 1px 2px var(--night-20), 0 18px 36px -18px var(--night-40); transform: scale(.84); }
.pthumb img[src*="-neck"] { border-radius: 6px; transform: scale(.78); }