:root { color-scheme: dark; --bg:#171223; --ink:#fff; --accent:#ae8aff; --accent-ink:#121212; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:system-ui,sans-serif; line-height:1.55; }
.shell { width:min(100% - 2rem,72rem); margin-inline:auto; }
.bar { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
header,footer { padding-block:1.25rem; }
.wordmark { display:flex; gap:.6rem; align-items:center; font-weight:800; font-size:1.6rem; }
.wordmark img,.station img { width:3rem; height:3rem; object-fit:contain; }
.hero { padding:clamp(2rem,8vw,7rem) clamp(1.4rem,5vw,4rem); border-radius:1.6rem; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,transparent),transparent); border:1px solid color-mix(in srgb,var(--ink) 20%,transparent); margin-block:1rem 2rem; }
.hero h1 { font-size:clamp(2rem,5vw,4.5rem); max-width:17ch; line-height:1.22; margin:.3em 0 .65em; }
.eyebrow { font-size:.8rem; letter-spacing:.16em; font-weight:800; }
a { color:inherit; }
button,.cta { background:var(--accent); color:var(--accent-ink); cursor:pointer; border:0; border-radius:.6rem; padding:.7rem 1rem; font:inherit; font-weight:700; text-decoration:none; display:inline-block; }
input,select { font:inherit; color:inherit; background:var(--bg); border:1px solid color-mix(in srgb,var(--ink) 35%,transparent); border-radius:.5rem; padding:.55rem; max-width:100%; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap:1rem; }
.station,.player,.panel { padding:1rem; border-radius:.85rem; border:1px solid color-mix(in srgb,var(--ink) 22%,transparent); }
.station h3 { margin:.3rem 0; }
.player { margin-top:1rem; }
audio { max-width:100%; }
.panel { margin-block:1rem; }
form label { display:grid; gap:.25rem; margin-bottom:.75rem; }
form input[type=color] { width:100%; height:2.6rem; }
form input[type=checkbox] { justify-self:start; }
.actions { display:flex; gap:.75rem; flex-wrap:wrap; }
.preview { border-radius:.6rem; padding:1rem; margin-bottom:.75rem; overflow-wrap:anywhere; }
.preview img { width:3rem; height:3rem; object-fit:contain; vertical-align:middle; margin-right:.5rem; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

.streaming .shell { width:min(100% - 2rem,78rem); }
.topbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; min-height:5.5rem; }
.topbar nav { display:flex; gap:1.6rem; }
.topbar nav a,.topbar .wordmark { text-decoration:none; }
.mark { display:grid; place-items:center; width:2rem; height:2rem; color:var(--accent-ink); background:var(--accent); border-radius:.65rem; font-size:.8rem; }
.cinema { min-height:clamp(22rem,52vw,37rem); display:flex; align-items:end; overflow:hidden; position:relative; isolation:isolate; margin-top:.3rem; padding:clamp(1.5rem,6vw,5rem); }
.hero-art { position:absolute; inset:0; z-index:-2; background:
  radial-gradient(ellipse at 72% 45%,color-mix(in srgb,var(--accent) 65%,transparent),transparent 28%),
  radial-gradient(ellipse at 82% 28%,#254b72,transparent 43%),
  linear-gradient(135deg,var(--bg) 24%,#201a42 70%,#10192d);
  background-size:cover; background-position:center; }
.cinema::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,var(--bg),color-mix(in srgb,var(--bg) 82%,transparent) 36%,transparent 100%),linear-gradient(0deg,var(--bg),transparent 67%); }
.hero-copy { position:relative; max-width:42rem; }
.hero-copy .eyebrow { letter-spacing:.17em; color:var(--ink); }
.eyebrow span:first-child:empty,.live-dot { width:.55rem; height:.55rem; display:inline-block; border-radius:50%; background:var(--accent); margin-inline-end:.35rem; }
.eyebrow .live-dot { background:#ff626b; }
.catalog-block { margin:2.5rem 0; scroll-margin:1rem; }
.catalog-block h2 { margin:.15rem 0; font-size:clamp(1.6rem,4vw,2.4rem); line-height:1.15; }
.catalog-block .eyebrow { margin:0; opacity:.8; }
.tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin:1.2rem 0; }
.tabs button { color:var(--ink); background:transparent; border:1px solid color-mix(in srgb,var(--ink) 26%,transparent); border-radius:99px; }
.tabs button[aria-pressed=true] { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
.media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr)); gap:1rem; }
.media-card { padding:0; background:color-mix(in srgb,var(--ink) 6%,var(--bg)); color:var(--ink); overflow:hidden; text-align:start; border:1px solid color-mix(in srgb,var(--ink) 14%,transparent); transition:transform .18s ease,border-color .18s ease; }
.media-card:hover,.media-card:focus-visible { transform:translateY(-3px); border-color:var(--accent); }
.card-cover { position:relative; display:grid; place-items:center; aspect-ratio:16/10; width:100%; background:radial-gradient(ellipse at 72% 15%,var(--accent),transparent 75%),linear-gradient(130deg,#102333,#332754); color:#fff; overflow:hidden; }
.card-cover img { position:absolute; width:100%; height:100%; object-fit:cover; }
[data-type=radio] .card-cover img { width:52%; height:68%; object-fit:contain; }
.card-cover b { width:2.9rem; height:2.9rem; display:grid; place-items:center; z-index:1; border-radius:50%; background:#090b13ac; font-size:1.1rem; }
.card-label { display:block; padding:.8rem 1rem; }
.card-label small { display:block; margin-top:.2rem; opacity:.7; font-weight:400; }
.theater { color:var(--ink); background:var(--bg); width:min(calc(100% - 1rem),64rem); max-height:calc(100dvh - 2rem); border:1px solid color-mix(in srgb,var(--ink) 25%,transparent); border-radius:1rem; padding:clamp(.75rem,3vw,1.5rem); }
.theater::backdrop { background:#060810db; }
.theater video { width:100%; max-height:65dvh; background:#000; border-radius:.6rem; }
.theater h2 { margin:.5rem 0; }
.theater audio { width:100%; margin-block:1rem; }
.theater .player-options { margin-top:.6rem; }
.theater ::cue { font-family:system-ui,sans-serif; }
@media (max-width:38rem) { .topbar nav { order:3; width:100%; gap:1rem; } }
@media (prefers-reduced-motion:reduce) { .media-card { transition:none; } }

.viewer-controls { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.viewer-controls select { padding:.46rem .55rem; }
.hero-copy #featured { font-size:clamp(1rem,2vw,1.15rem); margin:0 0 1.1rem; }
.player-description { white-space:pre-wrap; }
:lang(si) .hero h1 { line-height:1.35; letter-spacing:normal; }
@media (max-width:27rem) {
  .topbar { gap:.55rem; padding-block:1rem; }
  .viewer-controls { width:100%; }
}
@font-face {
  font-family:"Flex Sinhala";
  src:url("/vendor/noto-sans-sinhala.woff2") format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  unicode-range:U+0D80-0DFF,U+200C-200D,U+25CC;
}
body { font-family:"Flex Sinhala",system-ui,sans-serif; }
.theater ::cue { font-family:"Flex Sinhala",system-ui,sans-serif; }

.streaming .topbar { border-bottom:1px solid color-mix(in srgb,var(--ink) 13%,transparent); margin-bottom:1rem; }
.streaming .topbar nav { flex-wrap:wrap; gap:.55rem 1.22rem; font-weight:650; }
.streaming .topbar nav a:hover { color:var(--accent); }
.streaming .cinema { min-height:clamp(24rem,46vw,37rem); box-shadow:0 14px 48px #0004; }
.streaming .cinema.has-artwork .hero-art { background-position:center 35%; }
.streaming .cinema.has-artwork { color:white; }
.streaming .cinema.has-artwork .eyebrow { color:#fff; }
.streaming .cinema.has-artwork::after { background:linear-gradient(90deg,#0b0b13 0%,#0b0b13cc 38%,#0b0b1322 100%),linear-gradient(0deg,#0b0b13b0,transparent 45%); }
.streaming .cinema h1 { margin-bottom:.28em; }
.streaming .hero-copy { padding-bottom:1.45rem; }
.featured-select { position:absolute; bottom:1rem; right:clamp(.8rem,4vw,2.4rem); display:flex; gap:.3rem; }
.featured-select button { padding:.3rem .62rem; font-size:.77rem; border:1px solid #ffffff45; color:#fff; background:#101019bd; }
.featured-select button[aria-pressed=true] { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
.catalog-rows h3 { font-size:1.24rem; margin:1.35rem 0 .65rem; }
.media-shelf { display:grid; grid-auto-flow:column; grid-auto-columns:clamp(9.6rem,18vw,13.4rem); gap:.8rem; overflow-x:auto; padding:.3rem .15rem .85rem; scroll-snap-type:x proximity; }
.media-shelf > button { scroll-snap-align:start; }
.media-card[data-type=movie] .card-cover,.media-card[data-type=series] .card-cover { aspect-ratio:4/5; }
.media-card[data-type=music] .card-cover { aspect-ratio:1; }
.media-card .card-label { overflow-wrap:anywhere; }
.series-season { display:flex; gap:.6rem; align-items:center; margin:1rem 0; }
.series-dialog #episode-list { margin-top:1rem; }
.member-hero { margin:1rem 0; padding:clamp(1rem,5vw,3.5rem); border:1px solid #ffffff35; border-radius:1rem; background:linear-gradient(120deg,#251d39,#172131); }
.member-hero h1 { margin:.2rem 0; font-size:clamp(2rem,5vw,3.4rem); }
.member-auth,.member-plan-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); gap:1rem; }
.member-plan { background:color-mix(in srgb,var(--ink) 7%,var(--bg)); overflow-wrap:anywhere; }
.member-plan h3 { margin-top:.2rem; }
.member-plan strong { color:var(--accent); }
.checkout-dialog { max-width:43rem; }

.streaming .section-tinted { color:var(--ink); background-color:var(--section-bg); }
.streaming .topbar.section-tinted { padding-inline:clamp(.7rem,2vw,1.3rem); border-radius:.8rem; margin-top:.65rem; }
.streaming .hero.section-tinted:not(.has-artwork)::after { background:linear-gradient(90deg,var(--section-bg),transparent); }
.streaming .hero.section-tinted.has-artwork::after { background:linear-gradient(90deg,color-mix(in srgb,var(--section-bg) 38%,#080810),#0808108c 62%,#08081030); }
.catalog-row,.streaming #radio { padding:clamp(.8rem,2vw,1.35rem); border-radius:.9rem; margin:.8rem 0; border:1px solid color-mix(in srgb,var(--ink) 14%,transparent); }
.catalog-row:not(.section-tinted),.streaming #radio:not(.section-tinted) { background:color-mix(in srgb,var(--ink) 4%,var(--bg)); }
.catalog-row h3 { margin:.1rem 0 .65rem; display:flex; gap:.55rem; align-items:center; }
.catalog-row h3::before { content:""; width:.25rem; height:1.1rem; border-radius:.2rem; background:var(--accent); }
.site-footer { display:flex; justify-content:space-between; gap:.65rem; padding:1.25rem; margin-top:2rem; margin-bottom:1rem; border:1px solid color-mix(in srgb,var(--ink) 14%,transparent); border-radius:.8rem; }
.footer-brand { color:var(--accent); font-weight:800; }
.membership.section-tinted .member-hero { background:linear-gradient(120deg,var(--section-bg),color-mix(in srgb,var(--accent) 18%,var(--section-bg))); }
.membership .sms-choice { display:flex; gap:.5rem; align-items:center; margin:.6rem 0 1rem; }