/* qitv.app — the poster with a pinch of the app's TV look. Sizes follow the reference mockup at
   1440 px wide and scale down from there. */

@font-face { font-family: "Inter"; src: url(/fonts/inter/inter-latin.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Roboto Slab"; src: url(/fonts/roboto-slab/roboto-slab-latin.woff2) format("woff2"); font-weight: 800 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/ibm-plex-mono/ibm-plex-mono-400-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/ibm-plex-mono/ibm-plex-mono-500-latin.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/ibm-plex-mono/ibm-plex-mono-600-latin.woff2) format("woff2"); font-weight: 600; font-display: swap; }
/* Arrows and π, which the Latin files lack (Roboto Slab has no arrows at all: --slab falls back to Inter). */
@font-face { font-family: "Inter"; src: url(/fonts/inter/inter-symbols.woff2) format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+2190-2199, U+03C0; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/ibm-plex-mono/ibm-plex-mono-400-symbols.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+2190-2199, U+03C0; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/ibm-plex-mono/ibm-plex-mono-500-symbols.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+2190-2199, U+03C0; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/ibm-plex-mono/ibm-plex-mono-600-symbols.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+2190-2199, U+03C0; }

:root {
  --ink: #1c1917;
  --paper: #f4eee8;
  --coral: #ff6656;
  --muted: rgba(244, 238, 232, .72);
  --faint: rgba(244, 238, 232, .55);
  --rule: rgba(244, 238, 232, .12);
  --wash: rgba(255, 102, 86, .07);
  --gutter: clamp(16px, 3.6vw, 52px);
  --max: 1440px;
  --pad: max(var(--gutter), (100% - var(--max)) / 2 + var(--gutter));
  --slab: "Roboto Slab", Inter, Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

/* Arabic, Devanagari and Chinese text comes from the visitor's own system fonts (the site's fonts
   don't cover those scripts); Latin words on those pages keep the site's fonts. Letter-spacing
   is off there: it would break joined scripts. */
:lang(ar) { --script: "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif; }
:lang(hi) { --script: "Kohinoor Devanagari", "Noto Sans Devanagari", "Nirmala UI", Mangal, sans-serif; }
:lang(zh) { --script: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif; }
:is(:lang(ar), :lang(hi), :lang(zh)) {
  --slab: "Roboto Slab", Inter, var(--script);
  --sans: Inter, var(--script);
  --mono: "IBM Plex Mono", var(--script);
}
:is(:lang(ar), :lang(hi), :lang(zh)) :is(.mono, .menu .lk, .menu .dl, .big small, .chips.fmt li, .safe, h1, .sec-h h2) { letter-spacing: 0; }
:is(:lang(ar), :lang(hi)) h1 { line-height: 1.25; }
:lang(zh) h1 { line-height: 1.1; }
/* Long words in these languages would not fit the headline's column at full size. */
:lang(ru) { --h1-scale: .86; }
:lang(tr) { --h1-scale: .95; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 400 1rem/1.5 var(--sans); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2, h3, ul { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 2px; }
.mono { font-family: var(--mono); letter-spacing: .08em; }

/* ---------- menu bar ---------- */
.menu { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.4rem); padding: clamp(14px, 1.7vw, 24px) var(--pad); }
.mark { display: flex; align-items: center; gap: .7rem; margin-inline-end: auto; text-decoration: none; }
.mark .icon { position: relative; width: clamp(34px, 2.9vw, 42px); aspect-ratio: 1; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.mark .icon img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .45s; }
.mark .icon .pi { opacity: 0; }
.mark:hover .icon, .mark:focus-visible .icon { transform: rotate(180deg); }
.mark:hover .icon .pi, .mark:focus-visible .icon .pi { opacity: 1; }
.mark .name { font: 900 clamp(1.4rem, 1.9vw, 1.7rem)/1 var(--slab); letter-spacing: -.02em; }
.menu .lk { font: 400 .95rem/1 var(--mono); letter-spacing: .08em; color: var(--muted); text-decoration: none; }
.menu .lk:hover { color: var(--paper); }
.menu .dl { font: 600 1rem/1 var(--mono); letter-spacing: .08em; background: var(--coral); color: var(--ink); padding: .72em 1.05em; border-radius: .35em; text-decoration: none; white-space: nowrap; }
.bars { height: 6px; opacity: .9; background: linear-gradient(90deg, #bfbfbf 0 14.29%, #bfbf00 0 28.57%, #00bfbf 0 42.86%, #00bf00 0 57.14%, #bf00bf 0 71.43%, #bf0000 0 85.71%, #0000bf 0 100%); }

/* ---------- first screen ---------- */
.hero { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 47fr); min-height: 50cqw; overflow-x: clip; }
.copy { position: relative; z-index: 2; padding-block: clamp(48px, 5.6vw, 80px) clamp(48px, 5vw, 72px); padding-inline: var(--pad) 0; }
.kicker { color: var(--coral); font-size: clamp(.78rem, 1.1vw, 1rem); }
h1 { font: 900 calc(var(--h1-scale, 1) * clamp(2.9rem, 7.33vw, 6.6rem))/.94 var(--slab); letter-spacing: -.025em; margin: .35em 0 .4em; overflow-wrap: break-word; }
h1 span { color: var(--coral); }
.lede { font-size: clamp(1.06rem, 1.5vw, 1.35rem); line-height: 1.5; color: rgba(244, 238, 232, .8); max-width: 26.5em; }
.dl-block { display: flex; flex-wrap: wrap; align-items: stretch; gap: 1rem 1.4rem; margin-top: clamp(1.8rem, 2.9vw, 2.6rem); }
.big { background: var(--coral); color: var(--ink); padding: 1rem 1.6rem; border-radius: .35rem; display: flex; flex-direction: column; justify-content: center; text-decoration: none; }
.big strong { font: 800 clamp(1.2rem, 1.7vw, 1.5rem)/1.2 var(--slab); }
.big small { font: 500 .85rem/1.3 var(--mono); letter-spacing: .06em; margin-top: .3rem; opacity: .8; }
.others { display: flex; flex-direction: column; justify-content: center; font-size: .95rem; line-height: 1.9; color: rgba(244, 238, 232, .78); }
.others a { text-decoration-color: rgba(255, 102, 86, .7); text-underline-offset: .25em; }
.others a:hover { color: var(--paper); }
.safe { margin-top: 1.6rem; font-size: .85rem; letter-spacing: .04em; color: var(--faint); }
.safe a { color: rgba(244, 238, 232, .78); text-decoration-color: rgba(255, 102, 86, .7); text-underline-offset: .25em; }
.safe a:hover { color: var(--paper); }
.stage { position: relative; }
.stage > div { position: absolute; overflow: hidden; border-radius: .8rem; }
.s1 { inset-inline-start: 2.2cqw; top: 5.1cqw; width: 64.4cqw; box-shadow: 0 3rem 6rem rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .1); }
.s2 { inset-inline-start: .35cqw; top: 31.1cqw; width: 33.3cqw; box-shadow: 0 2rem 4rem rgba(0, 0, 0, .6); border: .35rem solid var(--ink); }

/* ---------- facts ---------- */
.facts { display: grid; grid-template-columns: repeat(5, 1fr); border-block: 1px solid var(--rule); position: relative; z-index: 3; background: var(--ink); }
.facts li { padding: 1.5rem 1.6rem; border-inline-start: 1px solid var(--rule); }
.facts li:first-child { border-inline-start: 0; padding-inline-start: var(--pad); }
.facts strong { display: block; font: 800 1.2rem/1.3 var(--slab); }
.facts span { display: block; margin-top: .35rem; font-size: .98rem; line-height: 1.45; color: rgba(244, 238, 232, .6); }

/* ---------- sections ---------- */
.sec { padding: clamp(56px, 6.6vw, 96px) var(--pad) clamp(48px, 5.5vw, 80px); }
.sec-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.4rem; margin-bottom: clamp(1.6rem, 2.9vw, 2.6rem); }
.sec-h h2 { font: 900 clamp(2.2rem, 4vw, 3.6rem)/1 var(--slab); letter-spacing: -.02em; }
.sec-h .mono { color: var(--coral); }
#free { padding-top: clamp(24px, 2.2vw, 32px); }

/* ---------- two ways to watch ---------- */
.ways { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); }
.way { padding: clamp(1.6rem, 2.7vw, 2.4rem); }
.way + .way { border-inline-start: 1px solid var(--rule); }
.way .label { font-size: .9rem; color: var(--coral); }
.way h3 { font: 900 clamp(1.6rem, 2.6vw, 2.3rem)/1.05 var(--slab); letter-spacing: -.01em; margin: .45em 0 .5em; }
.way p { font-size: 1.15rem; line-height: 1.55; color: var(--muted); max-width: 32em; }
.way p a { text-decoration-color: rgba(255, 102, 86, .7); text-underline-offset: .2em; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.chips li { font-size: .98rem; padding: .45em .8em; border: 1px solid var(--rule); border-radius: 99em; color: rgba(244, 238, 232, .8); }
.chips li.on { border-color: var(--coral); color: var(--coral); }
.chips.fmt li { border-radius: .3em; font: 400 .92rem/1.5 var(--mono); letter-spacing: .06em; }
.way .note { margin-top: 1.4rem; font-size: 1rem; color: var(--faint); }

/* ---------- what's on: a channel list ---------- */
.chan { display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: clamp(1.6rem, 3.8vw, 3.4rem); align-items: start; }
.row { display: grid; grid-template-columns: 3rem 1fr; gap: .4rem 1rem; width: 100%; padding: 1.15rem 1.2rem 1.2rem; text-align: start; font: inherit; color: inherit; background: none; border: 0; border-inline-start: .22rem solid transparent; cursor: pointer; }
.row + .row { border-top: 1px solid var(--rule); }
.row .n { font-size: 1.05rem; color: rgba(244, 238, 232, .6); padding-top: .25rem; }
.row .t { display: block; font: 800 clamp(1.25rem, 1.6vw, 1.45rem)/1.3 var(--slab); }
.row .d { display: block; margin-top: .3rem; font-size: 1.05rem; line-height: 1.45; color: rgba(244, 238, 232, .62); }
.row .bar { grid-column: 2; display: none; height: .22rem; margin-top: .9rem; background: rgba(244, 238, 232, .1); }
.row .bar b { display: block; width: 0; height: 100%; background: var(--coral); }
.row[aria-pressed="true"] { border-inline-start-color: var(--coral); background: var(--wash); }
.row[aria-pressed="true"] .n { color: var(--coral); }
/* .live: the page's script runs the list; without it every description shows. */
.chan.live .row:not([aria-pressed="true"]) .d { display: none; }
.chan.live .row[aria-pressed="true"] .bar { display: block; }
.chan.live .row[aria-pressed="true"] .bar b { animation: fill 5s linear forwards; }
.chan.live.paused .row .bar b { animation-play-state: paused; }
@keyframes fill { to { width: 100%; } }
.screen { position: sticky; top: 2rem; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .8rem; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 2.4rem 5rem rgba(0, 0, 0, .55); background: #0b0f14; }
.screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.screen img.on { opacity: 1; }
.screen .lbl { position: absolute; inset-inline-start: 1.2rem; bottom: 1.1rem; background: rgba(28, 25, 23, .85); padding: .45em .8em; border-radius: .3em; font-size: .8rem; }

/* ---------- download ---------- */
.get { border-top: 1px solid var(--rule); }
.plats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); }
.plat { position: relative; padding: 3.4rem 2rem 2.2rem; }
.plat + .plat { border-inline-start: 1px solid var(--rule); }
.plat.here { background: var(--wash); box-shadow: inset 0 .25rem 0 var(--coral); }
.plat .tag { position: absolute; top: 1.6rem; inset-inline-start: 2rem; font-size: .85rem; color: var(--coral); }
.plat h3 { font: 900 clamp(1.8rem, 2.6vw, 2.3rem)/1.1 var(--slab); letter-spacing: -.01em; margin-bottom: 1rem; }
.file { display: flex; justify-content: space-between; align-items: center; padding: .85em 1em; margin-bottom: .6rem; border: 1px solid var(--rule); border-radius: .3rem; font-size: 1.05rem; text-decoration: none; }
.file:hover { border-color: rgba(255, 102, 86, .6); }
.file span { font-size: .85em; opacity: .75; }
.file.main { background: var(--coral); border-color: var(--coral); color: var(--ink); font-weight: 700; }
.file.main span { opacity: 1; }
.how { margin-top: 1.1rem; font-size: .98rem; line-height: 1.5; color: rgba(244, 238, 232, .6); }
.how b { color: rgba(244, 238, 232, .85); }
.how a { text-decoration-color: rgba(255, 102, 86, .7); text-underline-offset: .2em; }
code { font: 400 .9em var(--mono); background: rgba(244, 238, 232, .08); padding: .1em .35em; border-radius: .2em; }
.after { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; margin-top: 1.6rem; font-size: .95rem; color: rgba(244, 238, 232, .6); }
.after a { color: var(--paper); text-decoration-color: rgba(255, 102, 86, .7); text-underline-offset: .25em; }

/* ---------- footer ---------- */
.langs { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; padding: 0 var(--pad) 1.6rem; font-size: .92rem; }
.langs a { color: var(--muted); text-decoration: none; }
.langs a:hover { color: var(--paper); }
.langs a[aria-current] { color: var(--coral); }
.foot-main { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.6rem 4rem; padding: 3rem var(--pad) 2.2rem; }
.foot-main p { font-size: .98rem; line-height: 1.6; color: var(--faint); max-width: 44em; }
.foot-main p a { text-decoration-color: rgba(244, 238, 232, .4); }
.foot-links { display: flex; flex-wrap: wrap; gap: .8rem 2.2rem; justify-content: flex-end; align-items: start; font-weight: 500; color: var(--muted); }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--paper); }
.fstory { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 2rem; margin: 0 var(--pad); padding: 1.3rem 0 2.4rem; border-top: 1px solid var(--rule); font-size: .92rem; color: rgba(244, 238, 232, .6); }
.fstory b { color: rgba(244, 238, 232, .75); font-weight: 600; }

/* ---------- short desktop windows: the download button stays on the first screen ---------- */
@media (min-width: 1000px) {
  h1 { font-size: calc(var(--h1-scale, 1) * clamp(2.9rem, min(7.33vw, 11.5vh), 6.6rem)); font-size: calc(var(--h1-scale, 1) * clamp(2.9rem, min(7.33vw, 11.5svh), 6.6rem)); }
  .copy { padding-top: clamp(32px, min(5.6vw, 6vh), 80px); padding-top: clamp(32px, min(5.6vw, 6svh), 80px); }
}

/* ---------- smaller screens ---------- */
@media (max-width: 999px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .copy { padding-inline-end: var(--pad); }
  .stage { height: 78cqw; margin-bottom: clamp(32px, 6vw, 56px); }
  .s1 { inset-inline-start: var(--gutter); top: 0; width: 92cqw; }
  .s2 { inset-inline-start: calc(var(--gutter) / 2); top: 36cqw; width: 58cqw; border-width: .25rem; }
  /* One fact per row: the name, then what it means, a hairline between rows. */
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts li, .facts li:first-child {
    display: grid; grid-template-columns: minmax(6.5rem, 36%) minmax(0, 1fr); gap: .15rem 1rem; align-items: baseline;
    padding: .95rem var(--gutter); border-inline-start: 0; border-top: 1px solid var(--rule);
  }
  .facts li:first-child { border-top: 0; }
  .facts span { margin-top: 0; }
  .chan { grid-template-columns: minmax(0, 1fr); }
  .screen { position: relative; top: 0; order: -1; }
}
@media (max-width: 759px) {
  .menu .lk { display: none; }
  .ways, .plats { grid-template-columns: minmax(0, 1fr); }
  .way + .way, .plat + .plat { border-inline-start: 0; border-top: 1px solid var(--rule); }
  .plat { padding: 3.2rem var(--gutter) 1.8rem; }
  .plat .tag { inset-inline-start: var(--gutter); }
  .foot-main { grid-template-columns: minmax(0, 1fr); }
  .foot-links { justify-content: flex-start; }
  .row { padding-inline: .8rem; grid-template-columns: 2.4rem 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mark .icon, .mark .icon img, .screen img { transition: none; }
  .mark:hover .icon, .mark:focus-visible .icon { transform: none; }
  .mark:hover .icon .pi, .mark:focus-visible .icon .pi { opacity: 0; }
  .chan.live .row[aria-pressed="true"] .bar b { animation: none; width: 100%; }
}

/* ---------- text pages ---------- */
.prose { max-width: calc(52rem + 2 * var(--pad)); }
.prose .page-title { font-size: clamp(2.4rem, 5vw, 4.2rem); margin: 0 0 .6em; }
.prose p, .prose li { font-size: 1.08rem; line-height: 1.65; color: var(--muted); }
.prose p + p, .prose ul + p { margin-top: 1.1em; }
.prose a { text-decoration-color: rgba(255, 102, 86, .7); text-underline-offset: .2em; }
.prose b { color: var(--paper); }
.prose h2 { font: 900 clamp(1.8rem, 3vw, 2.4rem)/1.1 var(--slab); margin: 2.2em 0 .7em; }
.credits { margin: .8em 0 1.1em; padding-inline-start: 1.2em; list-style: square; }
.credits li::marker { color: var(--coral); }
/* ---------- 404: a channel with no signal ---------- */
.nosignal { background: #05070a; }
.tv { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; color: #eef2f6; }
.tc { position: absolute; inset: 0; filter: brightness(.82) saturate(.92); }
.tc div { position: absolute; left: 0; right: 0; }
.tc-bars { top: 0; height: 58%; background: linear-gradient(90deg, #bfbfbf 0 14.29%, #bfbf00 0 28.57%, #00bfbf 0 42.86%, #00bf00 0 57.14%, #bf00bf 0 71.43%, #bf0000 0 85.71%, #0000bf 0 100%); }
.tc-rev { top: 58%; height: 7%; background: linear-gradient(90deg, #0000bf 0 14.29%, #131313 0 28.57%, #bf00bf 0 42.86%, #131313 0 57.14%, #00bfbf 0 71.43%, #131313 0 85.71%, #bfbfbf 0 100%); }
.tc-pluge { top: 65%; bottom: 0; background: linear-gradient(90deg, #00214c 0 17.8%, #f2f2f2 0 35.7%, #32006a 0 53.5%, #131313 0 71.4%, #090909 0 76%, #131313 0 80.7%, #1d1d1d 0 85.5%, #131313 0 100%); }
.tv-shade { position: absolute; inset: 0; background:
  radial-gradient(ellipse 75% 60% at 50% 32%, transparent 40%, rgba(5, 7, 10, .5) 100%),
  linear-gradient(180deg, rgba(5, 7, 10, .85) 0%, rgba(5, 7, 10, .35) 9%, rgba(5, 7, 10, .05) 18%, rgba(5, 7, 10, .15) 40%, rgba(5, 7, 10, .88) 60%, #05070a 74%); }
/* An old set's rolling bar, drifting down the picture. */
.tv::after { content: ""; position: absolute; left: 0; right: 0; top: -30%; height: 30%; pointer-events: none;
  background: linear-gradient(transparent, rgba(255, 255, 255, .05), transparent); animation: roll 7s linear infinite; }
@keyframes roll { to { transform: translateY(433%); } }
.tv-ring { position: absolute; left: 50%; top: 27%; transform: translate(-50%, -50%); width: clamp(140px, 17vw, 240px); aspect-ratio: 1; border-radius: 50%;
  border: clamp(3px, .35vw, 5px) solid rgba(255, 255, 255, .9); background: #1c1917; display: grid; place-items: center; box-shadow: 0 0 0 clamp(8px, 1vw, 14px) rgba(0, 0, 0, .25); }
.tv-ring img { width: 63%; }
.tv-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: clamp(14px, 1.7vw, 24px) var(--gutter); z-index: 2; }
.tv-clock { font: 600 clamp(1.3rem, 1.8vw, 1.7rem)/1 var(--sans); font-variant-numeric: tabular-nums; }
.banner { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(32px, 9vh, 110px); display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0 clamp(14px, 2.2vw, 32px); z-index: 2; }
.banner .num { font: 300 clamp(2.6rem, 5.4vw, 5rem)/1 var(--sans); }
.banner .tile { width: clamp(64px, 8vw, 120px); aspect-ratio: 1; border-radius: 16%; background: #1c1917; border: 3px solid #000; display: grid; place-items: center; box-shadow: 0 .4rem 1.4rem rgba(0, 0, 0, .5); }
.banner .tile img { width: 82%; }
.banner .t1 { display: flex; align-items: center; gap: .55em; }
.banner h1 { margin: 0; font: 800 clamp(2.2rem, 4.4vw, 4rem)/1 var(--sans); letter-spacing: -.02em; }
.offair { background: #4a4d52; color: #fff; font: 800 clamp(.8rem, 1.1vw, 1.05rem)/1 var(--sans); padding: .3em .5em; border-radius: .3em; letter-spacing: .04em; }
.banner .now { margin-top: .35em; font: 600 clamp(1.1rem, 2.2vw, 2rem)/1.25 var(--sans); }
.banner .now em { font-style: normal; font-weight: 500; color: #e08a5f; margin-right: .35em; }
.banner .prog { height: 5px; margin: 1em 0 .9em; max-width: 72em; border-radius: 1em; background: rgba(255, 255, 255, .16); overflow: hidden; }
.banner .prog b { display: block; height: 100%; width: 100%; background: #e08a5f; border-radius: 1em; animation: programme 40s linear infinite; transform-origin: left; }
@keyframes programme { from { transform: scaleX(0); } }
.banner .next { font-size: clamp(.95rem, 1.3vw, 1.25rem); color: rgba(238, 242, 246, .62); }
.banner .next b { color: rgba(238, 242, 246, .85); font-weight: 500; margin-right: .4em; }
.banner .next a { color: #eef2f6; text-decoration-color: #e08a5f; text-underline-offset: .2em; }
@media (max-width: 759px) {
  .banner { grid-template-columns: auto 1fr; }
  .banner .num { display: none; }
  .banner .hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tv::after { animation: none; display: none; }
  .banner .prog b { animation: none; transform: scaleX(.36); }
}