/* Webi TV. A dark room with the lights on the screen: near-black, one lime
   accent from the Webi brand, red only for "on air". Every surface is
   layered (gradient, glow, grain) rather than flat, the way a theatre is. */

/* The Webi faces, as on webi-web.com: Fredoka for every headline, number and
   the word "webi" itself, Assistant for reading. Self-hosted, subset. */
@font-face { font-family: 'Fredoka'; font-style: normal; font-display: swap; font-weight: 500; src: url(/_tv/fonts/fredoka-hebrew-500-normal.woff2) format('woff2'); unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-display: swap; font-weight: 500; src: url(/_tv/fonts/fredoka-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-display: swap; font-weight: 600; src: url(/_tv/fonts/fredoka-hebrew-600-normal.woff2) format('woff2'); unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-display: swap; font-weight: 600; src: url(/_tv/fonts/fredoka-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-display: swap; font-weight: 700; src: url(/_tv/fonts/fredoka-hebrew-700-normal.woff2) format('woff2'); unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-display: swap; font-weight: 700; src: url(/_tv/fonts/fredoka-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Assistant'; font-style: normal; font-display: swap; font-weight: 400; src: url(/_tv/fonts/assistant-hebrew-400-normal.woff2) format('woff2'); unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family: 'Assistant'; font-style: normal; font-display: swap; font-weight: 400; src: url(/_tv/fonts/assistant-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Assistant'; font-style: normal; font-display: swap; font-weight: 600; src: url(/_tv/fonts/assistant-hebrew-600-normal.woff2) format('woff2'); unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family: 'Assistant'; font-style: normal; font-display: swap; font-weight: 600; src: url(/_tv/fonts/assistant-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Assistant'; font-style: normal; font-display: swap; font-weight: 700; src: url(/_tv/fonts/assistant-hebrew-700-normal.woff2) format('woff2'); unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family: 'Assistant'; font-style: normal; font-display: swap; font-weight: 700; src: url(/_tv/fonts/assistant-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --bg: #07070b;
  --bg-2: #0f0f16;
  --bg-3: #171721;
  --line: rgb(255 255 255 / 0.08);
  --line-2: rgb(255 255 255 / 0.14);
  --text: #f5f5f7;
  --muted: rgb(245 245 247 / 0.66);
  --faint: rgb(245 245 247 / 0.42);
  --accent: #b6f24c;
  --accent-ink: #0d1a00;
  --live: #ff2d55;
  --gutter: max(16px, 4vw);
  --ease: cubic-bezier(.32, .72, 0, 1);
  --radius: 14px;
  --font: 'Assistant', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  /* the same token webi-web.com's /new4 sets on .v3 */
  --v3-display: 'Fredoka', 'Rubik', 'Assistant', system-ui, sans-serif;
  --display: var(--v3-display);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: 999px; font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { padding-inline: var(--gutter); max-width: 1680px; margin-inline: auto; }
.i { width: 1.15em; height: 1.15em; flex: none; }
[dir='rtl'] .i-fwd, [dir='rtl'] .i-back { transform: scaleX(-1); }

/* Display face, used sparingly, as on webi-web.com: the logo, each page's
   one big headline, and the top ten's numerals. Everything else reads in
   Assistant. */
.hero-title, .show-title, .page-title, .pitch-title, .band-title, .rank {
  font-family: var(--display);
}
/* The logo, and every "Webi" in the copy, set as the marketing site sets it. */
.logo, .webi-word { font-family: var(--v3-display, Rubik, system-ui, sans-serif); }
.webi-word { font-weight: 700; letter-spacing: -0.02em; }

/* ------------------------------------------------------------------ bar */

.bar { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s; background: linear-gradient(to bottom, rgb(7 7 11 / .85), rgb(7 7 11 / 0)); }
.bar.is-solid { background: rgb(9 9 14 / .82); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 1px 0 var(--line); }
.bar-in { display: flex; align-items: center; gap: 28px; height: 72px; padding-inline: var(--gutter); max-width: 1680px; margin-inline: auto; }
.logo { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; letter-spacing: -0.035em; direction: ltr; }
.logo-mark { font-size: 26px; line-height: 1; }
.logo-tv { font-size: 13px; line-height: 1; background: var(--accent); color: var(--accent-ink); padding: 5px 7px 4px; border-radius: 6px; letter-spacing: 0.04em; }
.bar-nav { display: flex; align-items: center; gap: 22px; font-size: 15px; color: var(--muted); }
.bar-nav > a, .menu-btn { transition: color .2s; display: inline-flex; align-items: center; gap: 4px; padding-block: 8px; }
.bar-nav > a:hover, .menu-btn:hover, .bar-nav > a[aria-current] { color: var(--text); }
.bar-nav > a[aria-current] { font-weight: 600; }
.menu { position: relative; }
.menu-pop { position: absolute; top: 100%; inset-inline-start: -16px; padding-top: 10px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s var(--ease), transform .35s var(--ease), visibility .25s; }
.menu:hover .menu-pop, .menu:focus-within .menu-pop { opacity: 1; visibility: visible; transform: none; }
.menu-pop ul { background: rgb(18 18 26 / .96); backdrop-filter: blur(20px); border: 1px solid var(--line-2); border-radius: 16px; padding: 8px; min-width: 240px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .7); }
.menu-pop a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--muted); transition: background .2s, color .2s; }
.menu-pop a:hover, .menu-pop a[aria-current] { background: rgb(255 255 255 / .06); color: var(--text); }
.menu-pop b, .chip b, .cat b { width: 8px; height: 8px; border-radius: 50%; background: oklch(0.78 0.16 var(--h)); flex: none; }
.find { margin-inline-start: auto; position: relative; display: flex; align-items: center; }
.find .i { position: absolute; inset-inline-start: 13px; color: var(--muted); pointer-events: none; width: 18px; height: 18px; }
.find input { width: 210px; height: 40px; border-radius: 999px; border: 1px solid var(--line-2); background: rgb(255 255 255 / .05); color: var(--text); font: inherit; font-size: 14px; padding-inline: 40px 14px; transition: width .4s var(--ease), background .2s, border-color .2s; }
.find input::placeholder { color: var(--faint); }
.find input:focus { outline: none; width: 280px; background: rgb(255 255 255 / .09); border-color: rgb(255 255 255 / .3); }
.find input::-webkit-search-cancel-button { display: none; }

/* -------------------------------------------------------------- buttons */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding-inline: 22px; border-radius: 999px; font-weight: 600; font-size: 16px; white-space: nowrap; transition: transform .3s var(--ease), background .2s, box-shadow .3s var(--ease), color .2s; }
.btn:active { transform: scale(.97); transition-duration: .1s; }
.btn .i { width: 18px; height: 18px; }
.btn-primary { background: #fff; color: #0a0a0f; }
.btn-primary:hover { background: #e9e9ee; }
.btn-live { background: var(--live); color: #fff; box-shadow: 0 10px 30px -10px rgb(255 45 85 / .7); }
.btn-live:hover { background: #ff4468; }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: #c6ff63; box-shadow: 0 10px 30px -12px rgb(182 242 76 / .6); }
.btn-glass { background: rgb(255 255 255 / .12); color: var(--text); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.btn-glass:hover { background: rgb(255 255 255 / .2); }
.btn-ghost { box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); }
.btn-ghost:hover { background: rgb(255 255 255 / .08); }
.btn-sm { height: 38px; padding-inline: 16px; font-size: 14px; }
.btn-lg { height: 56px; padding-inline: 30px; font-size: 17px; }
.btn-icon { width: 48px; padding: 0; }
.btn-block { width: 100%; }
.round { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .35); transition: box-shadow .2s, background .2s, transform .2s var(--ease); }
.round .i { width: 17px; height: 17px; }
.round:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.round-solid { background: #fff; color: #0a0a0f; box-shadow: none; }
.round-solid:hover { background: #e8e8ee; box-shadow: none; }

/* ---------------------------------------------------------------- badges */

.badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding-inline: 10px; border-radius: 7px; font-size: 12.5px; font-weight: 600; background: rgb(0 0 0 / .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; white-space: nowrap; }
.badge .i { width: 13px; height: 13px; }
.badge-live { background: var(--live); letter-spacing: .04em; }
.badge-glass { background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); height: 30px; font-size: 13.5px; padding-inline: 12px; border-radius: 999px; }
.badge-rec { background: rgb(0 0 0 / .6); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; animation: pulse 1.6s ease-in-out infinite; }
.when.is-live { color: #ff5c7a; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
.cat { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--accent); }
.sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; display: inline-block; }

/* ------------------------------------------------------------------- art */

/* Category-keyed artwork. Softness comes from gradient falloff, never from
   filter: blur, which would be a composited layer per poster. */
.art { position: absolute; inset: 0; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(120% 90% at var(--x) var(--y), oklch(0.62 0.17 var(--h) / .95), transparent 60%),
    radial-gradient(90% 80% at calc(100% - var(--x)) 100%, oklch(0.45 0.16 var(--h2) / .9), transparent 65%),
    linear-gradient(160deg, oklch(0.26 0.07 var(--h)), oklch(0.13 0.04 var(--h2))); }
.art i { position: absolute; display: block; }
.art-img, .art picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art-img-top { object-position: 50% 22%; }
.art.has-img .art-grain { opacity: .08; }
/* A host's picture on the billboard stands on the open side, away from the
   title, and fades into the colour behind it rather than under a shade. */
@media (min-width: 901px) {
  .art-hero.has-img > .art-img, .art-hero.has-img > picture { inset-inline-start: auto; inset-inline-end: 0; width: 62%;
    -webkit-mask-image: linear-gradient(to right, #000 50%, transparent 96%); mask-image: linear-gradient(to right, #000 50%, transparent 96%); }
  .art-hero.has-img > picture > img { width: 100%; height: 100%; object-fit: cover; }
}
/* On a phone the billboard stands upright: the tall poster owns the top of
   the screen and fades out before the words begin. */
@media (max-width: 700px) {
  .art-hero.has-img > .art-img, .art-hero.has-img > picture { height: 68%;
    -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
  .art-hero.has-img > picture > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
}
.art-grain { inset: 0; z-index: 3; opacity: .22; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.art-orbit .art-a { width: 130%; aspect-ratio: 1; left: calc(var(--x) - 65%); top: calc(var(--y) - 65%); border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 22px, oklch(0.9 0.12 var(--h) / .16) 23px 24px); mask: radial-gradient(circle, #000 20%, transparent 70%); }
.art-orbit .art-b { width: 34%; aspect-ratio: 1; left: calc(var(--x) - 17%); top: calc(var(--y) - 30%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, oklch(0.96 0.08 var(--h)), oklch(0.7 0.18 var(--h)) 45%, oklch(0.4 0.15 var(--h2)) 100%); box-shadow: 0 0 80px 10px oklch(0.7 0.18 var(--h) / .45); }
.art-orbit .art-c { display: none; }
/* The subject, drawn as one thin line across the poster: a heart for health,
   a rising line for money. It says what the poster is about before any word. */
.art-m { z-index: 2; height: 135%; aspect-ratio: 1; inset-inline-start: -14%; top: -12%; transform: rotate(-8deg);
  background: linear-gradient(150deg, oklch(0.97 0.06 var(--h) / .55), oklch(0.9 0.12 var(--h2) / .12));
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.art-waves .art-m, .art-grid .art-m { inset-inline-start: auto; inset-inline-end: -18%; transform: rotate(10deg); }
.art-hero .art-m { height: 115%; top: -4%; inset-inline-start: 2%; inset-inline-end: auto; transform: rotate(-6deg); opacity: .8; }
.art[data-c='money'] .art-m { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%220.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%207h6v6%22/%3E%3Cpath%20d%3D%22m22%207-8.5%208.5-5-5L2%2017%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%220.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%207h6v6%22/%3E%3Cpath%20d%3D%22m22%207-8.5%208.5-5-5L2%2017%22/%3E%3C/svg%3E"); }
.art[data-c='health'] .art-m { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%220.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2014c1.49-1.46%203-3.21%203-5.5A5.5%205.5%200%200%200%2016.5%203c-1.76%200-3%20.5-4.5%202-1.5-1.5-2.74-2-4.5-2A5.5%205.5%200%200%200%202%208.5c0%202.3%201.5%204.05%203%205.5l7%207Z%22/%3E%3Cpath%20d%3D%22M3.22%2012H9.5l.5-1%202%204.5%202-7%201.5%203.5h5.27%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%220.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2014c1.49-1.46%203-3.21%203-5.5A5.5%205.5%200%200%200%2016.5%203c-1.76%200-3%20.5-4.5%202-1.5-1.5-2.74-2-4.5-2A5.5%205.5%200%200%200%202%208.5c0%202.3%201.5%204.05%203%205.5l7%207Z%22/%3E%3Cpath%20d%3D%22M3.22%2012H9.5l.5-1%202%204.5%202-7%201.5%203.5h5.27%22/%3E%3C/svg%3E"); }
.art[data-c='tech'] .art-m { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%220.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.937%2015.5A2%202%200%200%200%208.5%2014.063l-6.135-1.582a.5.5%200%200%201%200-.962L8.5%209.936A2%202%200%200%200%209.937%208.5l1.582-6.135a.5.5%200%200%201%20.963%200L14.063%208.5A2%202%200%200%200%2015.5%209.937l6.135%201.581a.5.5%200%200%201%200%20.964L15.5%2014.063a2%202%200%200%200-1.437%201.437l-1.582%206.135a.5.5%200%200%201-.963%200z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%220.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.937%2015.5A2%202%200%200%200%208.5%2014.063l-6.135-1.582a.5.5%200%200%201%200-.962L8.5%209.936A2%202%200%200%200%209.937%208.5l1.582-6.135a.5.5%200%200%201%20.963%200L14.063%208.5A2%202%200%200%200%2015.5%209.937l6.135%201.581a.5.5%200%200%201%200%20.964L15.5%2014.063a2%202%200%200%200-1.437%201.437l-1.582%206.135a.5.5%200%200%201-.963%200z%22/%3E%3C/svg%3E"); }
.art[data-c='business'] .art-m { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%220.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.5%2016.5c-1.5%201.26-2%205-2%205s3.74-.5%205-2c.71-.84.7-2.13-.09-2.91a2.18%202.18%200%200%200-2.91-.09z%22/%3E%3Cpath%20d%3D%22m12%2015-3-3a22%2022%200%200%201%202-3.95A12.88%2012.88%200%200%201%2022%202c0%202.72-.78%207.5-6%2011a22.35%2022.35%200%200%201-4%202z%22/%3E%3Cpath%20d%3D%22M9%2012H4s.55-3.03%202-4c1.62-1.08%205%200%205%200%22/%3E%3Cpath%20d%3D%22M12%2015v5s3.03-.55%204-2c1.08-1.62%200-5%200-5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%220.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.5%2016.5c-1.5%201.26-2%205-2%205s3.74-.5%205-2c.71-.84.7-2.13-.09-2.91a2.18%202.18%200%200%200-2.91-.09z%22/%3E%3Cpath%20d%3D%22m12%2015-3-3a22%2022%200%200%201%202-3.95A12.88%2012.88%200%200%201%2022%202c0%202.72-.78%207.5-6%2011a22.35%2022.35%200%200%201-4%202z%22/%3E%3Cpath%20d%3D%22M9%2012H4s.55-3.03%202-4c1.62-1.08%205%200%205%200%22/%3E%3Cpath%20d%3D%22M12%2015v5s3.03-.55%204-2c1.08-1.62%200-5%200-5%22/%3E%3C/svg%3E"); }
.art[data-c='career'] .art-m { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%220.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2020V4a2%202%200%200%200-2-2h-4a2%202%200%200%200-2%202v16%22/%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%226%22%20rx%3D%222%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%220.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2020V4a2%202%200%200%200-2-2h-4a2%202%200%200%200-2%202v16%22/%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%226%22%20rx%3D%222%22/%3E%3C/svg%3E"); }
.art[data-c='family'] .art-m { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%220.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2021v-8a1%201%200%200%200-1-1h-4a1%201%200%200%200-1%201v8%22/%3E%3Cpath%20d%3D%22M3%2010a2%202%200%200%201%20.709-1.528l7-5.999a2%202%200%200%201%202.582%200l7%205.999A2%202%200%200%201%2021%2010v9a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%220.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2021v-8a1%201%200%200%200-1-1h-4a1%201%200%200%200-1%201v8%22/%3E%3Cpath%20d%3D%22M3%2010a2%202%200%200%201%20.709-1.528l7-5.999a2%202%200%200%201%202.582%200l7%205.999A2%202%200%200%201%2021%2010v9a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22/%3E%3C/svg%3E"); }
.art[data-c='spirit'] .art-m { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%220.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M12%202v2%22/%3E%3Cpath%20d%3D%22M12%2020v2%22/%3E%3Cpath%20d%3D%22m4.93%204.93%201.41%201.41%22/%3E%3Cpath%20d%3D%22m17.66%2017.66%201.41%201.41%22/%3E%3Cpath%20d%3D%22M2%2012h2%22/%3E%3Cpath%20d%3D%22M20%2012h2%22/%3E%3Cpath%20d%3D%22m6.34%2017.66-1.41%201.41%22/%3E%3Cpath%20d%3D%22m19.07%204.93-1.41%201.41%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%220.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M12%202v2%22/%3E%3Cpath%20d%3D%22M12%2020v2%22/%3E%3Cpath%20d%3D%22m4.93%204.93%201.41%201.41%22/%3E%3Cpath%20d%3D%22m17.66%2017.66%201.41%201.41%22/%3E%3Cpath%20d%3D%22M2%2012h2%22/%3E%3Cpath%20d%3D%22M20%2012h2%22/%3E%3Cpath%20d%3D%22m6.34%2017.66-1.41%201.41%22/%3E%3Cpath%20d%3D%22m19.07%204.93-1.41%201.41%22/%3E%3C/svg%3E"); }

.art-waves .art-a { inset: -40%; transform: rotate(var(--r)) scale(var(--s));
  background: repeating-linear-gradient(90deg, transparent 0 18px, oklch(0.88 0.14 var(--h) / .22) 19px 21px, transparent 22px 40px); mask: radial-gradient(60% 50% at 50% 50%, #000, transparent); }
.art-waves .art-b { width: 120%; height: 70%; left: -10%; bottom: -30%; border-radius: 50%;
  background: radial-gradient(closest-side, oklch(0.8 0.17 var(--h2) / .8), transparent); }
.art-waves .art-c { width: 50%; height: 50%; right: 10%; top: 5%; border-radius: 50%; background: radial-gradient(closest-side, oklch(0.95 0.1 var(--h) / .55), transparent); }

.art-beams .art-a { inset: -50%; transform: rotate(var(--r));
  background: conic-gradient(from 0deg at 50% 50%, transparent 0 12deg, oklch(0.9 0.14 var(--h) / .3) 14deg 16deg, transparent 18deg 50deg, oklch(0.9 0.12 var(--h2) / .25) 52deg 56deg, transparent 58deg 120deg, oklch(0.9 0.14 var(--h) / .22) 124deg 128deg, transparent 130deg 200deg, oklch(0.9 0.12 var(--h2) / .3) 204deg 207deg, transparent 209deg);
  mask: radial-gradient(circle at 50% 50%, #000 5%, transparent 55%); }
.art-beams .art-b { width: 60%; aspect-ratio: 1; left: calc(var(--x) - 30%); top: calc(var(--y) - 40%); border-radius: 50%; background: radial-gradient(closest-side, oklch(0.92 0.14 var(--h) / .9), oklch(0.7 0.18 var(--h) / .3) 55%, transparent); }
.art-beams .art-c { width: 140%; height: 40%; left: -20%; bottom: -20%; background: linear-gradient(to top, oklch(0.14 0.05 var(--h2)), transparent); }

.art-grid .art-a { width: 220%; height: 120%; left: -60%; bottom: -55%; transform: perspective(300px) rotateX(62deg);
  background-image: linear-gradient(oklch(0.88 0.15 var(--h) / .35) 1.5px, transparent 1.5px), linear-gradient(90deg, oklch(0.88 0.15 var(--h) / .35) 1.5px, transparent 1.5px); background-size: 46px 46px; mask: linear-gradient(to top, #000 10%, transparent 75%); }
.art-grid .art-b { width: 70%; aspect-ratio: 1; left: 15%; top: -5%; border-radius: 50%; background: radial-gradient(closest-side, oklch(0.85 0.17 var(--h2) / .85), oklch(0.6 0.2 var(--h) / .4) 50%, transparent); }
.art-grid .art-c { left: 0; right: 0; top: 52%; height: 2px; background: linear-gradient(90deg, transparent, oklch(0.95 0.1 var(--h)), transparent); box-shadow: 0 0 24px 4px oklch(0.85 0.15 var(--h) / .6); }

/* ------------------------------------------------------------------ hero */

.hero { position: relative; height: min(92vh, 980px); min-height: 640px; overflow: hidden; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.1s var(--ease), visibility 1.1s; }
.slide.is-on { opacity: 1; visibility: visible; }
.art-hero { transform: scale(1.08); transform-origin: 30% 40%; }
.slide.is-on .art-hero { animation: drift 18s var(--ease) forwards; }
@keyframes drift { from { transform: scale(1.14) translate3d(1.5%, 1%, 0); } to { transform: scale(1.04) translate3d(0, 0, 0); } }
.hero-shade { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(to left, rgb(7 7 11 / .92) 0%, rgb(7 7 11 / .55) 38%, rgb(7 7 11 / 0) 70%),
    linear-gradient(to top, var(--bg) 0%, rgb(7 7 11 / .6) 22%, rgb(7 7 11 / 0) 50%),
    linear-gradient(to bottom, rgb(7 7 11 / .5), transparent 22%); }
.hero-body { position: relative; z-index: 5; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: 72px; padding-bottom: 150px; }
.hero-body > * { max-width: 640px; }
.slide .hero-body > * { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.slide.is-on .hero-body > * { opacity: 1; transform: none; }
.slide.is-on .hero-body > :nth-child(2) { transition-delay: .08s; }
.slide.is-on .hero-body > :nth-child(3) { transition-delay: .16s; }
.slide.is-on .hero-body > :nth-child(4) { transition-delay: .24s; }
.slide.is-on .hero-body > :nth-child(5) { transition-delay: .3s; }
.slide.is-on .hero-body > :nth-child(6) { transition-delay: .36s; }
.hero-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.hero-title { font-size: clamp(38px, 5.4vw, 84px); line-height: 1.02; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; text-shadow: 0 4px 40px rgb(0 0 0 / .35); }
.hero-line { margin-top: 18px; font-size: clamp(17px, 1.45vw, 22px); line-height: 1.45; color: rgb(255 255 255 / .82); text-wrap: pretty; }
.hero-host { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.hero-host span { display: flex; flex-direction: column; line-height: 1.25; }
.hero-host b { font-weight: 600; }
.hero-host small { font-size: 14px; color: var(--muted); }
.hero-points { margin-top: 22px; display: grid; gap: 8px; }
.hero-points li { display: flex; align-items: center; gap: 10px; color: rgb(255 255 255 / .86); font-size: 16px; }
.hero-points .i { color: var(--accent); width: 18px; height: 18px; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.hero-stat { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14.5px; margin-inline-start: 8px; }
.hero-stat .i { width: 17px; height: 17px; }
.hero-nav { position: absolute; z-index: 6; bottom: 92px; inset-inline: 0; display: flex; justify-content: flex-end; gap: 12px; }
.hero-thumb { position: relative; width: 168px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; opacity: .55; transition: opacity .3s, transform .4s var(--ease), box-shadow .3s; box-shadow: 0 0 0 1px rgb(255 255 255 / .12); text-align: start; }
.hero-thumb:hover { opacity: .9; transform: translateY(-3px); }
.hero-thumb.is-on { opacity: 1; box-shadow: 0 0 0 2px #fff; }
.hero-thumb-t { position: absolute; inset: auto 0 0; z-index: 4; padding: 18px 10px 9px; font-size: 12px; font-weight: 600; line-height: 1.25; background: linear-gradient(to top, rgb(0 0 0 / .8), transparent); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-thumb-p { position: absolute; z-index: 5; inset: auto 0 0 auto; height: 3px; width: 0; background: var(--accent); }
.hero-thumb.is-on .hero-thumb-p { animation: progress var(--slide, 8s) linear forwards; }
.hero.is-paused .hero-thumb-p { animation-play-state: paused; }
@keyframes progress { to { width: 100%; } }

.avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden; font-weight: 700; font-size: 15px; color: #fff; letter-spacing: -.02em;
  background: linear-gradient(140deg, oklch(0.7 0.16 var(--h)), oklch(0.42 0.14 calc(var(--h) + 40))); box-shadow: 0 0 0 2px rgb(255 255 255 / .18); }
.avatar img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.avatar-xs { width: 24px; height: 24px; font-size: 10px; box-shadow: none; }
.avatar-lg { width: 64px; height: 64px; font-size: 21px; }

.hero-panel { position: absolute; z-index: 5; inset-inline-end: var(--gutter); top: 50%; transform: translateY(-62%); width: 330px; padding: 22px; border-radius: 22px;
  background: rgb(12 12 18 / .42); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), 0 40px 80px -30px rgb(0 0 0 / .7);
  opacity: 0; translate: -16px 0; transition: opacity .9s var(--ease) .35s, translate 1s var(--ease) .35s; }
.slide.is-on .hero-panel { opacity: 1; translate: 0 0; }
.hp-k { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.hp-k .i { width: 16px; height: 16px; }
.hero-panel .countdown { margin-top: 14px; gap: 8px; }
.hero-panel .countdown span { min-width: 0; flex: 1; padding: 12px 4px 9px; background: rgb(255 255 255 / .07); }
.hero-panel .countdown b { font-size: 30px; }
.hp-big { margin-top: 16px; font-size: 46px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; display: flex; flex-direction: column; gap: 6px; font-variant-numeric: tabular-nums; }
.hp-big small { font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.hp-bar { margin-top: 20px; height: 4px; border-radius: 4px; background: rgb(255 255 255 / .14); overflow: hidden; }
.hp-bar i { display: block; height: 100%; width: var(--p); background: var(--live); border-radius: 4px; }
.hp-foot { display: flex; justify-content: space-between; margin-top: 12px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- shelf */

.shelf { position: relative; z-index: 7; margin-top: -40px; padding-bottom: 40px; }
.shelf-flat { margin-top: 0; padding-top: 110px; }
.chips { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-block: 4px 8px; }
.chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding-inline: 16px; border-radius: 999px; font-size: 14.5px; font-weight: 500; white-space: nowrap; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); transition: background .2s, color .2s, box-shadow .2s; }
.chip:hover { background: rgb(255 255 255 / .1); color: var(--text); }
.chip.is-on { background: #fff; color: #0a0a0f; box-shadow: none; }

.row { margin-top: 44px; }
.row-head { padding-inline: var(--gutter); max-width: 1680px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 14px; }
.row-title { font-size: clamp(20px, 1.6vw, 26px); font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 14px; }
.row-sub { flex-basis: 100%; color: var(--muted); font-size: 15px; }
.row-all { font-size: 14px; font-weight: 500; color: var(--accent); display: inline-flex; align-items: center; gap: 2px; opacity: 0; transform: translateX(8px); transition: opacity .3s, transform .4s var(--ease); }
.row:hover .row-all, .row-all:focus-visible { opacity: 1; transform: none; }
.row-all .i { width: 15px; height: 15px; }
.row-pager { margin-inline-start: auto; display: flex; gap: 3px; align-self: center; }
.row-pager i { width: 14px; height: 2px; background: rgb(255 255 255 / .2); border-radius: 2px; transition: background .3s; }
.row-pager i.is-on { background: rgb(255 255 255 / .75); }

/* A rail: native scroll on touch, Netflix-style pages on a pointer. */
.rail { position: relative; max-width: 1680px; margin-inline: auto; }
.track { --per: 2.2; --gap: 10px; display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-inline: var(--gutter); padding-block: 4px 12px; scrollbar-width: none; }
.track::-webkit-scrollbar { display: none; }
.item { flex: none; width: calc((100% - var(--gap) * (var(--per) - 1)) / var(--per)); scroll-snap-align: start; position: relative; }
[data-variant='tall'] .track { --per: 2.6; }
[data-variant='live'] .track { --per: 1.15; }

.rail-btn { display: none; }

@media (hover: hover) and (pointer: fine) and (min-width: 800px) {
  .track { --base: 4; --per: min(var(--base), max(3, var(--count, 9))); --gap: 8px; overflow: visible; scroll-snap-type: none; transition: transform .75s var(--ease); padding-block: 0; }
  .rail { overflow-x: clip; overflow-y: visible; }
  [data-variant='tall'] .track { --per: 5; }
  [data-variant='live'] .track { --per: min(3, max(2, var(--count, 3))); }
  .rail-btn { display: grid; place-items: center; position: absolute; z-index: 20; top: 0; bottom: 0; width: calc(var(--gutter) - 6px); color: #fff; opacity: 0; transition: opacity .25s, background .25s; background: rgb(7 7 11 / .55); }
  .rail-btn .i { width: 34px; height: 34px; transition: transform .3s var(--ease); }
  .rail-btn:hover .i { transform: scale(1.25); }
  .rail-prev { inset-inline-start: 0; border-start-end-radius: 6px; border-end-end-radius: 6px; }
  .rail-next { inset-inline-end: 0; border-start-start-radius: 6px; border-end-start-radius: 6px; }
  .rail:hover .rail-btn:not([hidden]) { opacity: 1; }
  .rail-btn[hidden] { display: grid; visibility: hidden; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1100px) { .track { --base: 5; } [data-variant='tall'] .track { --per: 6; } }
@media (hover: hover) and (pointer: fine) and (min-width: 1500px) { .track { --base: 6; } [data-variant='tall'] .track { --per: 7; } }

/* ------------------------------------------------------------------ card */

.card { position: relative; border-radius: 10px; transition: transform .45s var(--ease), box-shadow .45s var(--ease); transform-origin: center 30%; background: var(--bg-2); }
.card-link { display: block; }
.poster { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--bg-3); }
.card-tall .poster { aspect-ratio: 2 / 3; }
.card-live .poster-name { font-size: clamp(18px, 1.5vw, 26px); }
.card-live .poster-title { padding: 18px 20px; }
.card-live .poster { box-shadow: 0 0 0 1px rgb(255 45 85 / .35); }
.poster::after { content: ''; position: absolute; inset: 0; z-index: 4; background: linear-gradient(to top, rgb(0 0 0 / .78) 0%, rgb(0 0 0 / .2) 45%, transparent 70%); }
.poster .badge { position: absolute; z-index: 6; top: 10px; inset-inline-start: 10px; }
.poster-logo { position: absolute; z-index: 6; top: 10px; inset-inline-end: 10px; width: 34px; height: 34px; border-radius: 9px; object-fit: contain; background: #fff; padding: 3px; }
.poster-title { position: absolute; z-index: 5; inset: auto 0 0; padding: 12px 14px 13px; display: flex; flex-direction: column; gap: 3px; }
.poster-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: oklch(0.88 0.12 var(--h, 100)); opacity: .9; }
.poster-name { font-size: clamp(15px, 1.05vw, 18px); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 2px 12px rgb(0 0 0 / .5); }
.card-tall .poster-name { font-size: clamp(17px, 1.25vw, 22px); -webkit-line-clamp: 4; }
.live-bar { position: absolute; z-index: 6; inset: auto 0 0; height: 3px; background: rgb(255 255 255 / .2); }
.live-bar::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--p); background: var(--live); }
.card-more { display: none; }

/* Touch and narrow: the essentials under the poster, always visible. */
@media not all and (hover: hover) and (pointer: fine), (max-width: 799px) {
  .card { background: none; }
  .card-more { display: block; padding: 8px 2px 0; }
  .card-actions, .card-line, .card-host { display: none; }
  .card-meta { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
}

/* Pointer: the poster grows into a preview, Netflix-style but with the time,
   the length and the one button that matters. */
@media (hover: hover) and (pointer: fine) and (min-width: 800px) {
  .item:hover, .item:focus-within { z-index: 30; }
  .card-more { display: block; position: absolute; inset-inline: 0; top: calc(100% - 10px); padding: 20px 14px 14px; background: var(--bg-3); border-radius: 0 0 10px 10px; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; box-shadow: 0 30px 50px -10px rgb(0 0 0 / .8); }
  .item:hover .card, .item:focus-within .card { transform: scale(1.32) translateY(-14%); box-shadow: 0 30px 60px -12px rgb(0 0 0 / .85); transition-delay: .32s; }
  .item:hover .card-more, .item:focus-within .card-more { opacity: 1; visibility: visible; transition-delay: .4s; }
  .item:hover .poster, .item:focus-within .poster { border-radius: 10px 10px 0 0; }
  .track > .item.is-first .card { transform-origin: right 30%; }
  .track > .item.is-last .card { transform-origin: left 30%; }
  .card-actions { display: flex; align-items: center; gap: 8px; }
  .card-free { margin-inline-start: auto; font-size: 11.5px; font-weight: 700; color: var(--accent); border: 1px solid rgb(182 242 76 / .4); padding: 3px 8px; border-radius: 6px; }
  .card-meta { display: flex; align-items: center; gap: 8px; margin-top: 11px; font-size: 13px; color: var(--muted); }
  .card-line { margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: rgb(255 255 255 / .8); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .card-host { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 12px; color: var(--muted); }
  .hot { margin-inline-start: auto; color: #ffb648; font-weight: 600; }
  .card-tall .card-line { -webkit-line-clamp: 3; }
}

/* Top 10: the rank stands behind the poster, Netflix's best idea. */
.track-rank .item { display: flex; align-items: flex-end; }
.item-rank { width: calc((100% - var(--gap) * (var(--per) - 1)) / var(--per) * 1.42); }
.rank { flex: none; width: 42%; font-size: clamp(110px, 12vw, 230px); line-height: .78; font-weight: 700; letter-spacing: -0.08em; color: var(--bg); -webkit-text-stroke: 3px rgb(255 255 255 / .55); text-align: center; margin-inline-end: -6%; position: relative; z-index: 0; user-select: none; }
.item-rank .card { flex: 1; z-index: 1; }
.item-rank .card-tall .poster-kicker { display: none; }

/* ----------------------------------------------------------------- guide */

.guide .wrap { margin-top: 4px; }
.guide-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.guide-tabs::-webkit-scrollbar { display: none; }
.guide-tab { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 10px 18px; border-radius: 14px; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px var(--line); text-align: start; transition: background .2s, box-shadow .2s; }
.guide-tab b { font-size: 16px; font-weight: 600; }
.guide-tab small { font-size: 12.5px; color: var(--faint); }
.guide-tab:hover { background: rgb(255 255 255 / .08); }
.guide-tab.is-on { background: #fff; color: #0a0a0f; box-shadow: none; }
.guide-tab.is-on small { color: rgb(10 10 15 / .6); }
.guide-day { display: none; }
.guide-day.is-on { display: block; animation: rise .5s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.slot { display: grid; grid-template-columns: 92px 148px 1fr auto; align-items: center; gap: 22px; padding-block: 16px; border-bottom: 1px solid var(--line); transition: background .2s; }
.slot:hover { background: linear-gradient(to left, rgb(255 255 255 / .035), transparent); }
.slot-time { display: flex; flex-direction: column; gap: 2px; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.slot-time small { font-size: 12.5px; font-weight: 400; color: var(--faint); letter-spacing: 0; }
.slot-time .badge { align-self: flex-start; }
.slot-art { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; display: block; }
.slot-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.slot-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.slot-line { margin-top: 4px; font-size: 14.5px; color: rgb(255 255 255 / .7); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.slot-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; font-size: 14px; color: var(--muted); }
.slot[data-status='live'] .slot-title { color: #fff; }

/* ------------------------------------------------------------------ band */

.band { margin-top: 90px; padding-block: 90px; position: relative; overflow: hidden; border-block: 1px solid var(--line);
  background: radial-gradient(60% 120% at 85% 0%, rgb(182 242 76 / .13), transparent 60%), radial-gradient(50% 100% at 10% 100%, rgb(120 90 255 / .14), transparent 60%), var(--bg-2); }
.band-in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.band-title { font-size: clamp(30px, 3.2vw, 50px); line-height: 1.08; font-weight: 600; letter-spacing: -0.03em; margin-top: 14px; text-wrap: balance; }
.band-lede { margin-top: 18px; font-size: 18px; color: var(--muted); max-width: 560px; }
.band-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.band-steps { display: grid; gap: 14px; }
.band-steps li { display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; border-radius: 20px; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(10px); }
.band-steps b { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 18px; }
.band-steps span { display: flex; flex-direction: column; gap: 3px; color: var(--muted); font-size: 15px; }
.band-steps strong { color: var(--text); font-weight: 600; font-size: 17px; }

/* ----------------------------------------------------------- event page */

.show-hero { position: relative; min-height: min(88vh, 900px); display: flex; align-items: flex-end; overflow: hidden; }
.show-hero .art-hero { animation: drift 22s var(--ease) forwards; }
.show-in { position: relative; z-index: 5; width: 100%; padding-top: 120px; padding-bottom: 56px; }
.show-in > * { max-width: 760px; }
.show-title { font-size: clamp(36px, 5vw, 76px); line-height: 1.03; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); margin-bottom: 26px; }
.crumbs a:hover { color: var(--text); }
.crumbs .i { width: 14px; height: 14px; opacity: .6; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 24px; font-size: 16px; color: rgb(255 255 255 / .86); }
.facts div { display: flex; align-items: center; gap: 9px; }
.facts dt .i { color: var(--accent); width: 19px; height: 19px; }
.countdown { display: flex; gap: 10px; margin-top: 28px; direction: ltr; }
.countdown span { min-width: 76px; padding: 12px 10px 10px; border-radius: 14px; text-align: center; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); backdrop-filter: blur(12px); display: flex; flex-direction: column; }
.countdown b { font-size: 34px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.countdown small { font-size: 12px; color: var(--muted); margin-top: 6px; }
.show-note { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; color: var(--muted); }
.show-note .i { width: 16px; height: 16px; }
.show-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; margin-top: 40px; align-items: start; }
.about h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; }
.about p { font-size: 18px; line-height: 1.75; color: rgb(255 255 255 / .82); max-width: 68ch; }
.about p + p { margin-top: 14px; }
.about h3 { margin-top: 34px; font-size: 19px; font-weight: 600; }
.points { display: grid; gap: 12px; margin-top: 16px; }
.points li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; padding: 16px 18px; border-radius: 14px; background: rgb(255 255 255 / .035); box-shadow: inset 0 0 0 1px var(--line); }
.points .i { color: var(--accent); margin-top: 3px; }
.side { display: grid; gap: 16px; position: sticky; top: 96px; }
.host-card, .ticket { padding: 24px; border-radius: 22px; background: linear-gradient(160deg, rgb(255 255 255 / .06), rgb(255 255 255 / .02)); box-shadow: inset 0 0 0 1px var(--line); }
.host-row { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.host-row h2 { font-size: 20px; font-weight: 700; }
.host-row p { color: var(--muted); font-size: 15px; }
.host-more { margin-top: 14px; font-size: 14px; color: var(--muted); }
.ticket-price { display: flex; align-items: baseline; gap: 10px; }
.ticket-price b { font-size: 34px; font-weight: 600; color: var(--accent); letter-spacing: -0.02em; }
.ticket-price span { color: var(--muted); }
.ticket ul { display: grid; gap: 10px; margin: 18px 0 22px; }
.ticket li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: rgb(255 255 255 / .85); }
.ticket li .i { color: var(--accent); width: 17px; height: 17px; }
.show .row { margin-top: 72px; }

/* ------------------------------------------------- category / search */

.page-head { position: relative; padding-top: 140px; padding-bottom: 36px; overflow: hidden; }
.page-head-sm { padding-bottom: 10px; }
.page-glow { position: absolute; inset: -40% -10% auto; height: 120%; background: radial-gradient(50% 60% at 70% 30%, oklch(0.6 0.17 var(--h) / .45), transparent 70%), radial-gradient(40% 50% at 20% 0%, oklch(0.5 0.15 calc(var(--h) + 40) / .35), transparent 70%); pointer-events: none; }
.page-head .wrap { position: relative; }
.page-title { font-size: clamp(34px, 4.4vw, 64px); line-height: 1.05; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; }
.page-lede { margin-top: 14px; font-size: 19px; color: var(--muted); max-width: 640px; }
.page-body { padding-top: 10px; padding-bottom: 40px; }
.grid-title { font-size: 22px; font-weight: 700; margin: 34px 0 16px; letter-spacing: -0.02em; }
.grid-count { margin: 20px 0 14px; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 22px 12px; }
.grid .item { width: auto; }
/* A grid is a list someone reads, not a shelf they skim: the details stay. */
.grid .card { background: none; }
.grid .card-more { display: block; position: static; opacity: 1; visibility: visible; background: none; box-shadow: none; padding: 12px 2px 0; }
.grid .item:hover .card, .grid .item:focus-within .card { transform: translateY(-4px); box-shadow: none; transition-delay: 0s; }
.grid .item:hover .poster, .grid .item:focus-within .poster { border-radius: 10px; box-shadow: 0 20px 40px -16px rgb(0 0 0 / .9); }
.grid .card-actions { display: none; }
.grid .card-meta { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); margin: 0; }
.grid .card-line { display: block; margin-top: 4px; font-size: 14px; color: rgb(255 255 255 / .75); }
.grid .card-host { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.find-lg { margin: 26px 0 0; max-width: 640px; }
.find-lg input { width: 100%; height: 56px; font-size: 18px; padding-inline: 50px 18px; }
.find-lg input:focus { width: 100%; }
.find-lg .i { inset-inline-start: 18px; width: 20px; height: 20px; }
.none { margin: 40px 0 18px; }
.none h2 { font-size: 22px; font-weight: 600; }
.none p { color: var(--muted); margin-top: 6px; }
.none + .chips { padding-inline: 0; flex-wrap: wrap; }

.empty { text-align: center; padding-block: 90px 40px; display: flex; flex-direction: column; align-items: center; }
.empty h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-top: 28px; }
.empty p { color: var(--muted); margin: 10px 0 24px; max-width: 460px; }
.empty-art { display: flex; gap: 10px; }
.empty-art i { width: 90px; aspect-ratio: 2/3; border-radius: 10px; background: linear-gradient(160deg, rgb(255 255 255 / .1), rgb(255 255 255 / .02)); box-shadow: inset 0 0 0 1px var(--line); }
.empty-art i:nth-child(2) { transform: translateY(-14px); background: linear-gradient(160deg, rgb(182 242 76 / .35), rgb(182 242 76 / .05)); }

/* ----------------------------------------------------------- hosts page */

.pitch { position: relative; padding: 170px 0 80px; overflow: hidden; }
.pitch-glow { position: absolute; inset: 0; background: radial-gradient(50% 70% at 75% 20%, rgb(182 242 76 / .18), transparent 70%), radial-gradient(40% 60% at 15% 40%, rgb(124 92 255 / .2), transparent 70%); }
.pitch-in { position: relative; }
.pitch-in > * { max-width: 820px; }
.pitch-title { font-size: clamp(40px, 6vw, 92px); line-height: 1; font-weight: 600; letter-spacing: -0.04em; margin-top: 16px; text-wrap: balance; }
.pitch-lede { margin-top: 22px; font-size: 20px; color: var(--muted); max-width: 640px; }
.perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.perks li { padding: 28px; border-radius: 22px; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px var(--line); }
.perks b { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgb(182 242 76 / .14); color: var(--accent); }
.perks h2 { font-size: 20px; font-weight: 700; margin-top: 18px; }
.perks p { margin-top: 8px; color: var(--muted); }
.faq { margin: 80px 0 40px; max-width: 820px; }
.faq h2 { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 16px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 20px 0; font-size: 18px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
.faq summary::after { content: '+'; font-weight: 400; font-size: 24px; line-height: 1; color: var(--muted); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 20px; color: var(--muted); font-size: 17px; }

/* ---------------------------------------------------------------- footer */

.foot { margin-top: 80px; border-top: 1px solid var(--line); padding-block: 56px 32px; color: var(--muted); font-size: 15px; }
.foot-in { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.foot-brand p { margin-top: 14px; max-width: 320px; }
.foot h2 { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 14px; }
.foot ul { display: grid; gap: 9px; }
.foot a:hover { color: var(--text); }
.foot-legal { margin-top: 48px; font-size: 13px; color: var(--faint); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1100px) {
  .bar-nav { gap: 16px; }
  .find input { width: 160px; }
  .show-body { grid-template-columns: 1fr; gap: 36px; }
  .side { position: static; grid-template-columns: 1fr 1fr; }
  .band-in { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 899px) {
  .bar-nav > a:not(:first-child) { display: none; }
  .bar-cta span { display: none; }
  .bar-cta { width: 38px; padding: 0; }
  .find input, .find input:focus { width: 38px; padding: 0; border-color: transparent; background: rgb(255 255 255 / .08); color: transparent; }
  .find input::placeholder { color: transparent; }
  .find:focus-within input { width: min(56vw, 260px); padding-inline: 38px 12px; color: var(--text); }
  .find .i { inset-inline-start: 10px; }
  .hero-nav { display: none; }
  .hero-panel { display: none; }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  body { font-size: 15px; }
  .bar-in { height: 60px; gap: 14px; }
  .menu { display: none; }
  .hero { height: auto; min-height: 0; aspect-ratio: auto; }
  .slide { position: absolute; }
  .slide.is-on { position: relative; }
  .hero-shade { background: linear-gradient(to top, var(--bg) 8%, rgb(7 7 11 / .7) 45%, rgb(7 7 11 / .2) 75%, rgb(7 7 11 / .45)); }
  .hero-body { padding-top: 46vh; padding-bottom: 70px; justify-content: flex-end; }
  .hero-points { display: none; }
  .hero-cta .btn { flex: 1; }
  .hero-stat { flex-basis: 100%; justify-content: center; margin: 4px 0 0; }
  .shelf { margin-top: -30px; }
  .row { margin-top: 34px; }
  .slot { grid-template-columns: 64px 1fr; gap: 6px 14px; }
  .slot-art { display: none; }
  .slot-time { font-size: 19px; grid-row: span 2; align-self: start; }
  .slot .btn { grid-column: 2; justify-self: start; }
  .slot-title { font-size: 16px; }
  .slot-line { display: none; }
  .rank { -webkit-text-stroke-width: 2px; }
  .show-hero { min-height: 0; }
  .show-in { padding-top: 34vh; }
  .countdown span { min-width: 0; flex: 1; }
  .countdown b { font-size: 26px; }
  .side { grid-template-columns: 1fr; }
  .band { padding-block: 60px; margin-top: 60px; }
  .foot-in { grid-template-columns: 1fr; }
}

.dock { display: none; }
@media (max-width: 700px) {
  .bar-nav, .bar-cta { display: none; }
  .dock { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; z-index: 60; inset: auto 0 0; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); background: rgb(9 9 14 / .88); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-top: 1px solid var(--line); }
  .dock a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--faint); padding-block: 4px; }
  .dock a[aria-current] { color: var(--text); }
  .dock .i { width: 22px; height: 22px; }
  .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .hero-cta .btn-icon { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}