/* LeTa IPTV · "Kadraj" — graphite, bone and one copper light */
.iptv{
  --bg:#101114;--bg-2:#1c1d21;--bg-3:#0c0d10;--fg:#ede6d6;--dim:rgba(237,230,214,.62);--faint:rgba(237,230,214,.36);--line:rgba(237,230,214,.13);
  --accent:#e69459;--on-accent:#101114;--amber:#edb56e;--live:#db2933;--muted:#bfbdb8;
  --serif:ui-serif,'New York','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --u:46px;--lab:240px;
}
.iptv ::selection{background:var(--accent);color:var(--on-accent)}
.iptv em{font-style:italic;color:var(--accent)}
.iptv .eyebrow{color:var(--dim);margin-bottom:clamp(18px,3vh,30px)}
.ip-gl{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.iptv main,.iptv .credits{position:relative;z-index:1}
.serif{font-family:var(--serif)}

/* ---------- bar ---------- */
.ip-bar{position:fixed;right:var(--gutter);top:14px;z-index:900;display:flex;align-items:center;gap:10px;transition:transform .5s var(--ease)}
.ip-status{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 60%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:11px;color:var(--dim)}
.ip-status i,.credits-status i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(230,148,89,.6);animation:ip-pulse 2.4s infinite}
@keyframes ip-pulse{0%{box-shadow:0 0 0 0 rgba(230,148,89,.6)}70%{box-shadow:0 0 0 8px rgba(230,148,89,0)}100%{box-shadow:0 0 0 0 rgba(230,148,89,0)}}

/* ---------- 01 kadraj ---------- */
.kadraj{position:relative;height:430vh}
.k-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.k-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}
.no-gl .k-fallback{opacity:.0}
.k-shade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 40%,rgba(16,17,20,.55) 100%)}
.k-frame{position:absolute;left:50%;top:50%;width:min(46vw,58vh);aspect-ratio:1100/1021;transform:translate(-50%,-50%);pointer-events:none}
.k-frame img{position:absolute;inset:0;width:100%;height:100%;will-change:transform,opacity;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.k-copy{position:absolute;inset:0;pointer-events:none}
.k-kicker{position:absolute;left:50%;top:calc(var(--bar-h) + 10px);transform:translateX(-50%);display:flex;gap:18px;color:var(--dim);white-space:nowrap}
.k-kicker span+span::before{content:"·";margin-right:18px;color:var(--accent)}
.k-title{font-family:var(--serif);font-weight:400;letter-spacing:-.025em;line-height:.95}
.k-l1,.k-l2{position:absolute;left:0;right:0;text-align:center;font-size:clamp(46px,8.2vw,150px);white-space:nowrap}
.k-l1{top:13vh}
.k-l2{bottom:9vh}
.k-l2 em{padding-right:.04em}
.k-hud{position:absolute;inset:16px;pointer-events:none;font-size:11px;color:var(--faint);opacity:0}
.k-hud>span{position:absolute;display:inline-flex;align-items:center;gap:8px}
.hud-tl{left:30px;top:calc(var(--bar-h) - 4px)}.hud-tr{right:30px;top:calc(var(--bar-h) - 4px);font-variant-numeric:tabular-nums}
.hud-bl{left:30px;bottom:24px}.hud-br{right:30px;bottom:24px}
.rec{width:7px;height:7px;border-radius:50%;background:var(--live);animation:ip-blink 1.2s steps(2) infinite}
@keyframes ip-blink{50%{opacity:.15}}
.hud-c{position:absolute;width:22px;height:22px;border-color:var(--faint);border-style:solid;border-width:0}
.c1{left:0;top:calc(var(--bar-h) - 22px);border-left-width:1px;border-top-width:1px}
.c2{right:0;top:calc(var(--bar-h) - 22px);border-right-width:1px;border-top-width:1px}
.c3{left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.c4{right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
.k-caps{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(70px,13vh,140px);pointer-events:none}
.k-cap{position:absolute;left:0;bottom:0;max-width:17ch;font-family:var(--serif);font-size:clamp(30px,4.4vw,74px);line-height:1.02;letter-spacing:-.02em;opacity:0;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.k-cap[data-cap="3"]{max-width:22ch;font-size:clamp(26px,3.4vw,58px)}
.k-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
.gl .k-film{width:2px;height:2px;inset:auto;left:0;top:0}

/* ---------- 02 intro ---------- */
.intro{padding:clamp(110px,18vh,220px) var(--gutter) clamp(90px,14vh,170px);max-width:1520px;background:var(--bg)}
.intro-text{font-family:var(--serif);font-size:clamp(28px,3.7vw,62px);line-height:1.12;letter-spacing:-.018em;max-width:26ch}
.intro-note{max-width:64ch;margin-top:clamp(28px,5vh,52px);padding-left:16px;border-left:2px solid var(--accent);color:var(--dim);line-height:1.6}
.facts{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(12px,1.6vw,26px);margin-top:clamp(60px,10vh,120px);border-top:1px solid var(--line)}
.facts li{padding-top:18px;display:flex;flex-direction:column;gap:8px}
.fact-n{display:block;font-size:clamp(60px,7.4vw,128px);font-weight:250;font-stretch:62%;line-height:.82;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--fg);height:.82em;overflow:hidden}
.fact-n .odo{display:inline-flex;flex-direction:column;transition:transform 1.4s var(--ease)}
.fact-n .odo span{height:.82em;line-height:.82em}
.fact-l{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--dim);max-width:16ch}
.facts li:last-child .fact-n{color:var(--accent)}

/* ---------- 03 zap ---------- */
.zap{position:relative;height:560vh}
.zap-stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(250px,23vw) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:clamp(24px,3vw,56px);padding:calc(var(--bar-h) + 6px) var(--gutter) clamp(18px,3vh,36px)}
.zap-head{grid-column:1/-1;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:clamp(14px,2.4vh,28px)}
.zap-head .eyebrow{width:100%;margin:0}
.zap-title{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.2vw,72px);line-height:.98;letter-spacing:-.022em}
.zap-hint{color:var(--faint)}
.zap-list{align-self:center;display:flex;flex-direction:column;counter-reset:ch}
.zap-list button{position:relative;display:grid;grid-template-columns:2.4em 1fr;align-items:baseline;gap:10px;width:100%;padding:9px 0 9px 14px;text-align:left;color:var(--faint);font-size:clamp(14px,1.05vw,17px);font-weight:550;transition:color .35s,padding .5s var(--ease)}
.zap-list button::before{content:"";position:absolute;left:0;top:50%;width:2px;height:0;background:var(--accent);transform:translateY(-50%);transition:height .5s var(--ease)}
.zap-list button .mono{font-size:11px}
.zap-list button:hover{color:var(--dim)}
.zap-list button[aria-selected=true]{color:var(--fg);padding-left:22px}
.zap-list button[aria-selected=true]::before{height:70%}
.tv{grid-row:2;grid-column:2;align-self:center;justify-self:center;width:min(100%,calc((100svh - var(--bar-h) - 200px) * 16 / 9));position:relative}
.tv-screen{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:10px solid #08090b;box-shadow:0 0 0 1px rgba(237,230,214,.14),0 50px 90px -40px #000,inset 0 0 0 1px rgba(255,255,255,.04)}
.tv-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.gl-tv .tv-img{opacity:0}
.tv-osd{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(16px,2.4vw,34px);background:linear-gradient(to top,rgba(16,17,20,.92) 0%,rgba(16,17,20,.55) 34%,transparent 62%),linear-gradient(to right,rgba(16,17,20,.55),transparent 55%);pointer-events:none}
.tv-ch{position:absolute;left:clamp(16px,2.4vw,34px);top:clamp(14px,2vw,26px);display:flex;align-items:center;gap:8px;font-size:clamp(13px,1.1vw,17px);color:var(--fg)}
.tv-ch-label{opacity:.5}
.tv-ch-num{display:inline-flex;align-items:flex-start;height:1.2em;overflow:hidden}
.tv-ch-num .odo{flex:none;display:inline-flex;flex-direction:column;transition:transform .45s var(--ease)}
.tv-ch-num .odo span{height:1.2em;line-height:1.2em}
.tv-live{display:inline-flex;align-items:center;gap:6px;margin-left:8px;font-style:normal;font-size:11px;color:var(--fg);padding:3px 8px;border-radius:5px;background:rgba(219,41,51,.18);border:1px solid rgba(219,41,51,.5)}
.tv-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--live);animation:ip-blink 1.2s steps(2) infinite}
.tv-name{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,58px);letter-spacing:-.02em;line-height:1}
.tv-blurb{max-width:46ch;margin-top:10px;font-size:clamp(13px,1vw,16px);color:var(--dim);line-height:1.45}
.tv-chips{display:flex;flex-wrap:wrap;gap:6px;max-width:min(78%,820px);margin-top:16px}
.tv-chips li{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;padding:5px 9px;border-radius:6px;background:rgba(237,230,214,.08);border:1px solid rgba(237,230,214,.12);color:var(--fg);opacity:0;transform:translateY(8px)}
.tv-chips li.pro{border-color:rgba(230,148,89,.55)}
.tv-chips li.pro::after{content:" · PRO";color:var(--accent)}
.tv-chips.is-in li{opacity:1;transform:none;transition:opacity .5s,transform .6s var(--ease);transition-delay:calc(var(--k) * 28ms)}
.tv-next{position:absolute;right:clamp(12px,1.6vw,22px);top:clamp(12px,1.6vw,22px);width:clamp(120px,13vw,200px);border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px rgba(237,230,214,.25),0 16px 30px -12px #000;transform-origin:100% 0;transition:transform .5s var(--ease),box-shadow .3s;pointer-events:auto}
.tv-next img{width:100%;aspect-ratio:16/9;object-fit:cover}
.tv-next span{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;font-size:10px;color:var(--fg);text-align:left;background:linear-gradient(to top,rgba(16,17,20,.9),transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-next:hover{transform:scale(1.12);box-shadow:0 0 0 1px var(--accent),0 20px 40px -12px #000}
.tv-foot{display:flex;justify-content:space-between;align-items:center;padding:12px 14px 0;color:var(--faint)}
.tv-led{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.tv.is-zapping .tv-led{background:#fff}

/* ---------- 04 screens ---------- */
.screens{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,70px);align-items:center;padding:clamp(120px,18vh,220px) var(--gutter);background:var(--bg)}
.screens-title{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.6vw,80px);line-height:1;letter-spacing:-.022em;max-width:13ch}
.screens-text{margin-top:22px;max-width:44ch;color:var(--dim);font-size:17px;line-height:1.6}
.devices{position:relative;height:clamp(420px,52vw,760px)}
.dev{position:absolute;margin:0}
.dev-frame{overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(237,230,214,.16),0 40px 70px -30px #000}
.dev img{width:100%;height:auto}
.dev figcaption{margin-top:10px;font-size:11px;color:var(--faint)}
.dev-tv{left:0;top:4%;width:82%}
.dev-tv .dev-frame{border-radius:12px;border:8px solid #0a0a0c}
.dev-ipad{right:12%;top:30%;width:30%}
.dev-ipad .dev-frame{border-radius:22px;border:9px solid #0a0a0c}
.dev-phone{right:0;top:44%;width:19%}
.dev-phone .dev-frame{border-radius:28px;border:7px solid #0a0a0c}
.screens-note{grid-column:1/-1;color:var(--faint);margin-top:10px}

/* ---------- 05 experiences ---------- */
.xp{position:relative;background:var(--bg-3)}
.xp-pin{position:relative;height:300vh}
.xp-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;padding:calc(var(--bar-h) + 6px) 0 clamp(18px,3vh,36px);overflow:hidden}
.xp-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;padding:0 var(--gutter)}
.xp-head .eyebrow{width:100%;margin:0}
.xp-title{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4vw,68px);line-height:1;letter-spacing:-.022em;max-width:20ch}
.xp-hint{color:var(--faint)}
.xp-ring{--cw:clamp(210px,min(21vw,36vh),340px);--R:calc(var(--cw) * 2.62);position:relative;flex:1;min-height:0;perspective:1000px;perspective-origin:50% 50%;cursor:grab;touch-action:pan-y}
.xp-ring:active{cursor:grabbing}
.xp-cyl{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:translateZ(var(--R)) rotateY(var(--rot,0deg))}
.xp-card{position:absolute;left:calc(var(--cw) / -2);top:calc(var(--cw) * -.66);width:var(--cw);transform:rotateY(calc(var(--i) * 24deg)) translateZ(calc(var(--R) * -1));backface-visibility:hidden;transition:opacity .4s}
.xp-in{position:relative;border-radius:16px;overflow:hidden;background:#15161a;box-shadow:0 0 0 1px color-mix(in srgb,var(--tint) 30%,transparent),0 30px 60px -30px #000}
.xp-fig{margin:0;aspect-ratio:4/5;overflow:hidden}
.xp-fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1s var(--ease)}
.xp-card:hover .xp-fig img{transform:scale(1.1)}
.xp-card.is-rippling .xp-fig img{filter:url(#ripple)}
.xp-ui{position:absolute;left:10px;right:10px;top:10px;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;opacity:.9}
.xp-ui i{height:5px;border-radius:3px;background:color-mix(in srgb,var(--tint) 70%,transparent)}
.xp-ui i:first-child{grid-column:span 2;background:var(--tint)}
.xp-n{position:absolute;left:14px;bottom:calc(100% - 44px);font-size:10px;color:#fff;opacity:.7}
.xp-name{position:absolute;left:16px;right:16px;bottom:58px;font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.4vw,40px);letter-spacing:-.02em;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.xp-line{position:absolute;left:16px;right:16px;bottom:14px;font-size:12px;line-height:1.35;color:rgba(255,255,255,.82);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.xp-in::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,12,.9),rgba(10,10,12,.2) 50%,transparent 70%);pointer-events:none}
.xp-name,.xp-line,.xp-n{z-index:1}
.xp-card.is-front .xp-in{box-shadow:0 0 0 1.5px var(--tint),0 40px 80px -30px #000}
.xp-now{align-self:center;color:var(--dim)}
.icons-row{position:relative;padding:clamp(80px,12vh,140px) var(--gutter) 40px;background:var(--bg-3)}
.icons-label{color:var(--dim);margin-bottom:22px;display:flex;align-items:center;gap:10px}
.pro-badge{font-family:var(--mono);font-size:10px;font-weight:400;padding:3px 7px;border-radius:5px;background:var(--accent);color:var(--on-accent)}
.icons{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(8px,1.2vw,18px)}
.icons li{aspect-ratio:1;border-radius:22%;overflow:hidden;box-shadow:0 18px 30px -16px #000,0 0 0 1px rgba(237,230,214,.08);transition:transform .6s var(--ease-back)}
.icons li:hover{transform:translateY(-8px) rotate(-3deg) scale(1.06)}
.icons img{width:100%;height:100%;object-fit:cover}
.family{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,70px);align-items:center;padding:clamp(80px,12vh,140px) var(--gutter) clamp(110px,16vh,200px);background:var(--bg-3)}
.family-title{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.2vw,72px);line-height:1;letter-spacing:-.022em;margin-bottom:18px}
.family-copy p:last-child{color:var(--dim);max-width:40ch;line-height:1.6}
.seats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,24px)}
.seats li{aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px var(--bg-3),0 0 0 4px rgba(237,230,214,.16);transition:transform .6s var(--ease-back),box-shadow .3s}
.seats li:hover{transform:scale(1.08);box-shadow:0 0 0 3px var(--bg-3),0 0 0 5px var(--accent)}
.seats img{width:100%;height:100%;object-fit:cover}

/* ---------- 06 guide ---------- */
.guide{position:relative;padding:clamp(110px,16vh,200px) var(--gutter) clamp(100px,14vh,170px);background:var(--bg)}
.guide-title{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.8vw,84px);line-height:1;letter-spacing:-.022em;max-width:16ch}
.guide-sub{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;margin-top:18px;color:var(--dim)}
.guide-count{color:var(--fg)}
.guide-count b{font-weight:400;color:var(--accent)}
.guide-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:28px 0 22px}
.chip{height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--dim);transition:background .3s,color .3s,border-color .3s}
.chip:hover{color:var(--fg);border-color:var(--faint)}
.chip.is-on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip-sep{width:1px;height:20px;background:var(--line);margin:0 6px}
.epg{position:relative;border-radius:18px;overflow:hidden;background:var(--bg-3);box-shadow:0 0 0 1px var(--line)}
.epg-scroll{position:relative;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:rgba(237,230,214,.25) transparent;cursor:grab}
.epg-scroll.is-drag{cursor:grabbing;user-select:none}
.epg-scroll:focus-visible{outline-offset:-3px}
.epg-ruler{display:flex;height:34px;margin-left:var(--lab);border-bottom:1px solid var(--line);color:var(--faint);font-size:10px;width:max-content}
.epg-ruler span{flex:none;width:calc(var(--u) * 2);padding:11px 0 0 8px;border-left:1px solid var(--line)}
.epg-row{display:flex;width:max-content;min-width:100%;height:138px;border-bottom:1px solid var(--line)}
.epg-row:last-child{border-bottom:0}
.epg-label{position:sticky;left:0;z-index:3;flex:none;width:var(--lab);background:var(--bg-3);border-right:1px solid var(--line);font:inherit}
.epg-label-btn{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-content:center;column-gap:10px;row-gap:4px;width:100%;height:100%;padding:0 18px;text-align:left;cursor:default}
.epg-ch{grid-column:1/-1;font-size:10px;color:var(--accent)}
.epg-name{font-size:15px;font-weight:600;line-height:1.2;color:var(--fg)}
.epg-n{align-self:center;justify-self:end;font-size:10px;color:var(--faint);padding:2px 7px;border-radius:5px;border:1px solid var(--line)}
.epg-track{display:flex;padding:8px 0 8px 6px}
.epg-item{flex:none;width:calc(var(--dur) * var(--u));padding-right:6px}
.prog{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;height:100%;padding:9px 11px;border-radius:10px;background:var(--bg-2);box-shadow:inset 0 0 0 1px rgba(237,230,214,.07);text-align:left;overflow:hidden;transition:background .3s,box-shadow .3s,opacity .4s,transform .4s var(--ease)}
.prog:hover,.prog:focus-visible{background:#26272c;box-shadow:inset 0 0 0 1px var(--accent)}
.prog-time{font-size:10px;color:var(--faint)}
.prog-t{font-size:13.5px;font-weight:600;line-height:1.2;color:var(--fg);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prog-d{font-size:11.5px;line-height:1.35;color:var(--dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.epg-item[style*="--dur:2"] .prog-d{display:none}
.prog-tags{margin-top:auto;display:flex;align-items:center;gap:6px;width:100%}
.tag{font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:.04em;padding:2px 6px;border-radius:4px}
.tag-pro{background:var(--accent);color:var(--on-accent)}
.tag-soon{background:transparent;color:var(--amber);box-shadow:inset 0 0 0 1px rgba(237,181,110,.6)}
.pls{display:flex;gap:4px;margin-left:auto}
.pl{width:8px;height:8px;border-radius:2px;border:1px solid var(--faint)}
.pl-ipad{width:7px;height:9px;border-radius:2px}
.pl-iphone{width:5px;height:9px;border-radius:2px}
.pl-appletv{width:11px;height:7px;border-radius:1px}
.epg-item.is-now .prog{background:var(--fg);box-shadow:none}
.epg-item.is-now .prog-t{color:var(--bg)}
.epg-item.is-now .prog-d,.epg-item.is-now .prog-time{color:rgba(16,17,20,.65)}
.epg-item.is-now .pl{border-color:rgba(16,17,20,.5)}
.epg-item.is-off .prog{opacity:.16;transform:scale(.97)}
.epg-now{position:absolute;top:0;bottom:0;z-index:2;width:2px;margin-left:-1px;background:var(--live);pointer-events:none}
.epg-now span{position:absolute;top:6px;left:50%;transform:translateX(-50%);padding:2px 7px;border-radius:4px;background:var(--live);color:#fff;font-size:9.5px;letter-spacing:.06em}
.detail{position:fixed;right:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,28px);z-index:960;width:min(420px,calc(100vw - 24px));padding:24px 24px 22px;border-radius:20px;background:color-mix(in srgb,var(--bg-2) 92%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 0 0 1px var(--line),0 40px 80px -30px #000;transform:translateY(20px);opacity:0;transition:transform .5s var(--ease),opacity .35s}
.detail.is-open{transform:none;opacity:1}
.detail-close{position:absolute;right:14px;top:14px;height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--line);font-size:10.5px;color:var(--dim)}
.detail-ch{font-size:10.5px;color:var(--accent);margin-bottom:10px}
.detail-title{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.05;letter-spacing:-.015em;padding-right:60px}
.detail-desc{margin-top:12px;color:var(--dim);line-height:1.55}
.detail-meta{margin-top:16px;font-size:11px;color:var(--faint);display:flex;flex-wrap:wrap;gap:8px}
.detail-meta b{font-weight:400;padding:3px 8px;border-radius:5px;border:1px solid var(--line);color:var(--fg)}
.detail-meta b.pro{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* ---------- 07 plans ---------- */
.plans{padding:clamp(110px,16vh,200px) var(--gutter);background:var(--bg)}
.plans-title{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.8vw,84px);line-height:1;letter-spacing:-.022em;max-width:15ch}
.plan-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(14px,2vw,28px);margin-top:clamp(40px,7vh,80px)}
.plan{position:relative;padding:clamp(24px,3vw,44px);border-radius:24px;box-shadow:0 0 0 1px var(--line)}
.plan h3{font-size:15px;font-weight:600;font-stretch:112%;letter-spacing:.01em}
.plan-pro{background:radial-gradient(120% 120% at 100% 0%,rgba(230,148,89,.16),transparent 55%),var(--bg-2);box-shadow:0 0 0 1px rgba(230,148,89,.35)}
.plan-price{margin-top:26px;display:flex;align-items:baseline;gap:12px}
.price-n{font-family:var(--serif);font-size:clamp(56px,7vw,116px);line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price-per{color:var(--dim)}
.plan-d{margin-top:20px;color:var(--dim);line-height:1.6;max-width:36ch}
.plan-trial{margin-top:10px;color:var(--amber)}
.plan-switch{position:absolute;right:clamp(16px,2.4vw,36px);top:clamp(16px,2.4vw,36px);display:inline-flex;padding:3px;border-radius:999px;box-shadow:0 0 0 1px var(--line)}
.plan-switch button{height:32px;padding:0 14px;border-radius:999px;font-family:var(--mono);font-size:11px;color:var(--dim);transition:background .3s,color .3s}
.plan-switch button[aria-checked=true]{background:var(--fg);color:var(--bg)}
.plan-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;margin-top:28px}
.plan-list li{position:relative;padding-left:22px;font-size:15px;line-height:1.4}
.plan-list li::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:6px;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-45deg)}
.plans-note{margin-top:24px;color:var(--faint);max-width:80ch;line-height:1.6}

/* ---------- 08 quiet ---------- */
.quiet{position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden;text-align:center;background:#07080a}
.quiet-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.quiet::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 50%,rgba(7,8,10,.3),rgba(7,8,10,.92))}
.quiet-in{position:relative;z-index:1;padding:clamp(100px,14vh,160px) var(--gutter);display:flex;flex-direction:column;align-items:center}
.quiet-title{font-family:var(--serif);font-weight:400;font-size:clamp(44px,7.4vw,132px);line-height:.95;letter-spacing:-.03em;max-width:12ch}
.quiet-list{display:flex;flex-direction:column;gap:10px;margin:34px 0 34px;color:var(--dim);line-height:1.5}
.quiet-link{--b:transparent}

/* ---------- 09 credits ---------- */
.credits{padding:clamp(110px,18vh,220px) var(--gutter) 28px;background:var(--bg);text-align:center;overflow:hidden}
.credits-roll{display:flex;flex-direction:column;gap:14px;margin:0 auto clamp(60px,10vh,120px);max-width:760px}
.credits-roll p{display:grid;grid-template-columns:1fr 1fr;gap:24px;font-family:var(--serif);font-size:clamp(18px,1.7vw,26px)}
.credits-roll p:first-child{display:block;font-family:var(--mono);font-size:12px;color:var(--accent);margin-bottom:14px}
.cr-role{text-align:right;font-size:11px;color:var(--faint);align-self:center}
.credits-roll p span:last-child{text-align:left}
.credits-mark{position:relative;width:min(340px,60vw);aspect-ratio:1100/1021;margin:0 auto}
.credits-mark img{position:absolute;inset:0;width:100%;height:100%}
.credits-title{margin-top:clamp(30px,5vh,56px);font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(56px,10vw,190px);line-height:.9;letter-spacing:-.035em}
.credits-status{display:inline-flex;align-items:center;gap:9px;margin-top:22px;color:var(--dim)}
.credits-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;margin-top:36px;font-size:15px}
.credits-links a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease),color .3s}
.credits-links a:hover{background-size:100% 1px;color:var(--accent)}
.credits-legal{max-width:70ch;margin:40px auto 0;color:var(--faint);line-height:1.6}
.credits-copy{margin-top:14px;color:var(--faint)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .facts{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:30px}
  .icons{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:860px){
  .zap{height:auto}
  .zap-stage{position:relative;height:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;padding-top:clamp(90px,12vh,120px)}
  .zap-list{flex-direction:row;overflow-x:auto;gap:6px;margin:0 calc(var(--gutter) * -1) 16px;padding:0 var(--gutter);scrollbar-width:none}
  .zap-list::-webkit-scrollbar{display:none}
  .zap-list li{flex:none}
  .zap-list button{width:auto;padding:8px 12px;border-radius:999px;border:1px solid var(--line);grid-template-columns:auto auto;white-space:nowrap}
  .zap-list button::before{display:none}
  .zap-list button[aria-selected=true]{padding:8px 12px;background:var(--fg);color:var(--bg);border-color:var(--fg)}
  .tv{grid-column:1;grid-row:auto;width:100%}
  .tv-screen{aspect-ratio:4/5;border-width:6px}
  .tv-chips{max-width:100%}
  .tv-next{width:104px}
  .screens{grid-template-columns:1fr}
  .devices{height:auto;aspect-ratio:1/1.05}
  .xp-pin{height:auto}
  .xp-stage{position:relative;height:auto;padding-top:clamp(90px,12vh,120px)}
  .xp-ring{perspective:none;flex:none;height:auto;cursor:auto;margin-top:22px}
  .xp-cyl{position:relative;left:0;top:0;width:auto;height:auto;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gutter) 10px;transform:none!important;scrollbar-width:none}
  .xp-cyl::-webkit-scrollbar{display:none}
  .xp-card{position:relative;left:auto;top:auto;flex:none;width:72vw;transform:none!important;opacity:1!important;visibility:visible!important;scroll-snap-align:center}
  .xp-now{margin-top:14px}
  .family{grid-template-columns:1fr}
  .plan-grid{grid-template-columns:1fr}
  .plan-switch{position:static;margin-top:18px}
  .plan-list{grid-template-columns:1fr}
}
@media (max-width:720px){
  .kadraj{height:330vh}
  .k-frame{width:min(80vw,46vh)}
  .k-l1,.k-l2{font-size:clamp(38px,12.4vw,64px);white-space:normal;padding:0 16px}
  .k-l1{top:14vh}
  .k-l2{bottom:13vh}
  .k-kicker{flex-direction:column;gap:2px;align-items:center;top:calc(var(--bar-h) + 6px)}
  .k-kicker span+span::before{display:none}
  .k-hud .hud-br,.k-hud .hud-tr,.k-hud .hud-tl{display:none}
  .k-caps{bottom:12vh}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ip-status span{display:none}
  .ip-status{padding:0 12px}
  .epg-scroll{overflow:visible;cursor:auto}
  .epg-ruler,.epg-now{display:none}
  .epg-row{display:block;width:auto;height:auto}
  .epg-label{position:static;width:auto;border-right:0;border-bottom:1px solid var(--line)}
  .epg-label-btn{padding:16px;cursor:pointer;grid-template-columns:1fr auto}
  .epg-label-btn::after{content:"+";grid-column:2;grid-row:1/3;align-self:center;font-family:var(--mono);font-size:18px;color:var(--accent);transition:transform .4s var(--ease)}
  .epg-label-btn[aria-expanded=true]::after{transform:rotate(45deg)}
  .epg-n{grid-column:1;justify-self:start}
  .epg-track{flex-direction:column;gap:8px;padding:10px}
  .epg-row.is-collapsed .epg-track{display:none}
  .epg-item{width:auto;padding:0}
  .epg-item .prog-d,.epg-item[style*="--dur:2"] .prog-d{display:block;-webkit-line-clamp:4}
  .icons{grid-template-columns:repeat(5,minmax(0,1fr))}
  .seats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .detail{left:12px;right:12px;bottom:12px;width:auto}
  .credits-roll p{grid-template-columns:1fr;gap:2px}
  .cr-role,.credits-roll p span:last-child{text-align:center}
  .dev-tv{width:100%}
  .dev-ipad{right:30%;top:40%;width:40%}
  .dev-phone{right:2%;top:48%;width:28%}
}
.reduce .kadraj{height:auto}
.reduce .k-stage{position:relative;height:100vh}
.reduce .zap,.reduce .xp-pin{height:auto}
.reduce .zap-stage,.reduce .xp-stage{position:relative;height:auto}

/* ---------- frosted glass in the quiet band (WebGL draws video + fog behind this transparent section) ---------- */
.gl-quiet .quiet{background:transparent}
.gl-quiet .quiet-bg{opacity:.01}
.gl-quiet .quiet::after{background:radial-gradient(70% 60% at 50% 50%,rgba(7,8,10,.38),rgba(7,8,10,.12) 70%,rgba(7,8,10,.55))}
.quiet-wipe{display:none;align-items:center;gap:10px;margin:-6px 0 22px;color:var(--fg);opacity:.75}
.gl-quiet .quiet-wipe{display:inline-flex}
.quiet-wipe i{position:relative;width:26px;height:14px;border-radius:999px;border:1px solid rgba(237,230,214,.5)}
.quiet-wipe i::after{content:"";position:absolute;left:3px;top:3px;width:6px;height:6px;border-radius:50%;background:var(--fg);animation:ip-wipe 2.2s var(--ease) infinite}
@keyframes ip-wipe{0%,100%{transform:translateX(0)}50%{transform:translateX(12px)}}
.gl-quiet .quiet-in{text-shadow:0 2px 24px rgba(0,0,0,.45)}

/* ---------- scrambled channel names ---------- */
.tv-name .scr{display:inline-block;white-space:pre-wrap}
.tv-name .scr .ch-wild{color:var(--accent);opacity:.85}
.tv-ch-num.is-scr{font-variant-numeric:tabular-nums}

/* ---------- Salon Mode ---------- */
.salon{position:fixed;inset:0;z-index:9400;display:grid;place-items:center;background:#08090b;opacity:0;transition:opacity 1.2s var(--ease);pointer-events:none;overflow:hidden}
.salon.is-on{opacity:1;pointer-events:auto;cursor:none}
.salon[hidden]{display:none}
.salon-bg{position:absolute;inset:-4%}
.salon-bg img{width:100%;height:100%;object-fit:cover;opacity:.62;transform-origin:62% 40%;animation:ip-kenburns 46s ease-in-out infinite alternate}
@keyframes ip-kenburns{0%{transform:scale(1) translate3d(0,0,0)}100%{transform:scale(1.14) translate3d(-2.5%,1.5%,0)}}
.salon::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 55%,rgba(8,9,11,.15),rgba(8,9,11,.8))}
.salon-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.salon-mark{width:clamp(54px,5vw,78px);height:auto;opacity:.9;margin-bottom:clamp(14px,3vh,30px);filter:drop-shadow(0 8px 20px rgba(0,0,0,.5))}
.salon-clock{font-size:clamp(96px,17vw,290px);font-weight:200;font-stretch:62%;line-height:.82;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--fg)}
.salon-clock b{font-weight:200;animation:ip-colon 2s steps(2) infinite}
@keyframes ip-colon{50%{opacity:.25}}
.salon-date{margin-top:18px;color:var(--dim);text-transform:capitalize}
.salon-hint{position:absolute;left:50%;bottom:calc(-1 * clamp(80px,22vh,220px));transform:translateX(-50%);white-space:nowrap;color:var(--faint)}
.reduce .salon-bg img,.salon.no-motion .salon-bg img{animation:none}
@media (prefers-reduced-motion:reduce){.salon-bg img{animation:none}}
@media (max-width:720px){.salon-hint{bottom:calc(-1 * 18vh)}}
.tv-ch-num .ch-wild{color:var(--accent)}

/* ================= story round: an evening, the player, layouts, the guide on request ================= */
.intro-text{max-width:20ch}
.facts{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- An evening with LeTa (stacked sticky cards over floating things) ---------- */
.evening{position:relative;padding:clamp(110px,16vh,200px) var(--gutter) 24vh;background:var(--bg)}
.ev-float{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);overflow:hidden;pointer-events:none;z-index:0}
.fl{position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:4/5;object-fit:cover;border-radius:12px;transform:rotate(var(--r));will-change:transform}
.fl-hand{aspect-ratio:1100/1021;object-fit:contain;border-radius:0}
.fl-round{aspect-ratio:1;border-radius:50%}
.fl-b{opacity:.22;filter:blur(1.5px) saturate(.7)}
.fl-m{opacity:.5}
.fl-f{opacity:.75;filter:blur(9px)}
.ev-head{position:relative;z-index:1;max-width:960px;margin-bottom:clamp(50px,9vh,110px)}
.ev-title{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6vw,110px);line-height:.96;letter-spacing:-.03em}
.ev-sub{margin-top:18px;color:var(--dim);font-size:clamp(16px,1.3vw,20px);max-width:40ch}
.ev-stack{position:relative;z-index:1;display:flex;flex-direction:column;gap:26vh}
.ev-card{--tone:#1c1d21;--glow:rgba(230,148,89,.16);position:sticky;top:calc(var(--bar-h) + 26px + var(--k) * 12px);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.45fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center;min-height:min(66vh,620px);padding:clamp(26px,3.4vw,54px);border-radius:30px;background:radial-gradient(120% 120% at 0% 0%,var(--glow),transparent 55%),linear-gradient(160deg,color-mix(in srgb,var(--tone) 100%,#fff 4%),var(--tone));box-shadow:0 0 0 1px rgba(237,230,214,.1),0 -30px 70px -30px rgba(0,0,0,.75),0 40px 80px -40px #000;transform-origin:50% 0;will-change:transform}
.ev-card[data-tone=dusk]{--tone:#251d18;--glow:rgba(237,181,110,.22)}
.ev-card[data-tone=amber]{--tone:#22191a;--glow:rgba(230,148,89,.22)}
.ev-card[data-tone=ember]{--tone:#1f1517;--glow:rgba(219,41,51,.16)}
.ev-card[data-tone=wine]{--tone:#1c1620;--glow:rgba(159,122,234,.14)}
.ev-card[data-tone=night]{--tone:#10131b;--glow:rgba(110,140,200,.12)}
.ev-card[data-tone=morning]{--tone:#1b2025;--glow:rgba(237,230,214,.16)}
.ev-card[data-tone=stadium]{--tone:#161a16;--glow:rgba(237,181,110,.14)}
.ev-time{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.ev-clock{font-size:clamp(64px,8.6vw,156px);font-weight:200;font-stretch:62%;line-height:.8;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--fg)}
.ev-day{display:block;margin-bottom:.12em;font-family:var(--mono);font-size:max(12px,.13em);letter-spacing:.06em;color:var(--accent);font-stretch:100%}
.ev-label{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--dim)}
.ev-live,.ev-soon{font-style:normal;font-size:10px;padding:3px 8px;border-radius:5px}
.ev-live{background:rgba(219,41,51,.2);box-shadow:inset 0 0 0 1px rgba(219,41,51,.55);color:var(--fg)}
.ev-live::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--live);vertical-align:1px;animation:ip-blink 1.2s steps(2) infinite}
.ev-soon{color:var(--amber);box-shadow:inset 0 0 0 1px rgba(237,181,110,.6)}
.ev-story{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.7vw,46px);line-height:1.08;letter-spacing:-.018em}
.ev-text{margin-top:18px;font-size:clamp(15px,1.12vw,18px);line-height:1.6;color:var(--dim);max-width:46ch}
.ev-text b{font-weight:600;color:var(--fg);text-decoration:underline;text-decoration-color:rgba(230,148,89,.65);text-decoration-thickness:1px;text-underline-offset:4px}
.ev-fig{margin:0;aspect-ratio:4/5;border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px rgba(237,230,214,.1),0 24px 50px -24px #000}
.ev-fig img{width:100%;height:100%;object-fit:cover}
.ev-fig-seats{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18%;background:radial-gradient(70% 70% at 50% 40%,rgba(159,122,234,.18),transparent),#15131a}
.ev-fig-seats img{aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 3px #15131a,0 0 0 4px rgba(237,230,214,.18)}
.ev-fig-phone{display:grid;place-items:center;background:radial-gradient(60% 60% at 50% 40%,rgba(237,230,214,.14),transparent),#151a1f}
.ev-phone{width:52%;border-radius:22px;overflow:hidden;border:6px solid #0a0a0c;box-shadow:0 30px 50px -20px #000}
.ev-phone img{height:auto}

/* ---------- player channels: no chips, one sentence ---------- */
.tv-blurb{font-size:clamp(15px,1.25vw,20px);max-width:40ch;color:var(--fg);opacity:.86}
.tv-pro{margin-left:8px;font-weight:400;font-size:10px;padding:3px 7px;border-radius:5px;background:var(--accent);color:var(--on-accent)}

/* ---------- experiences: layout switcher ---------- */
.xp-modes{display:inline-flex;padding:3px;border-radius:999px;box-shadow:0 0 0 1px var(--line)}
.xp-modes button{height:32px;padding:0 15px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--dim);transition:background .3s,color .3s}
.xp-modes button:hover{color:var(--fg)}
.xp-modes button[aria-checked=true]{background:var(--fg);color:var(--bg)}
.xp-now .xp-hint{color:var(--faint)}
.xp-card{transition:opacity .4s,visibility 0s}
.icons-label{font-family:var(--serif);font-size:clamp(22px,2vw,32px);color:var(--fg);margin-bottom:26px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}

/* ---------- the full guide, behind one button ---------- */
.guide-sub{max-width:52ch}
.guide-open{margin-top:30px;--b:var(--fg);--t:var(--bg)}
.guide-open svg{transition:transform .6s var(--ease)}
.guide-open.is-open svg{transform:rotate(180deg)}
.guide-open:hover svg{transform:translateY(3px)}
.guide-open.is-open:hover svg{transform:rotate(180deg) translateY(3px)}
.guide-body{max-height:0;overflow:hidden;opacity:0;transition:max-height .95s var(--ease-io),opacity .6s}
.guide-body.is-open{opacity:1}
.guide-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:40px 0 18px}
.guide-tools .guide-filters{margin:0}
.guide-count{color:var(--dim)}
.guide-count b{font-weight:400;color:var(--accent)}

/* ---------- plans + quiet: sentences instead of lists ---------- */
.plan-pro-d{max-width:52ch;margin-top:24px}
.plan-pro-d b{font-weight:600;color:var(--fg)}
.quiet-text{max-width:46ch;margin:30px 0 34px;color:var(--dim);font-size:clamp(16px,1.25vw,20px);line-height:1.6}

@media (max-width:860px){
  .ev-card{grid-template-columns:1fr;min-height:0;gap:18px;top:calc(var(--bar-h) + 10px + var(--k) * 8px);padding:24px;border-radius:24px}
  .ev-time{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .ev-clock{font-size:clamp(56px,17vw,92px)}
  .ev-fig{aspect-ratio:16/10}
  .ev-fig-seats{grid-template-columns:repeat(4,1fr);padding:8% 10%;align-content:center}
  .ev-fig-phone .ev-phone{width:34%}
  .ev-stack{gap:18vh}
  .fl{--w:22vw!important}
  .fl-hand{--w:34vw!important}
  .xp-modes{display:none}
}
@media (max-width:720px){
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.reduce .ev-card{position:relative;top:auto}
.reduce .ev-float{display:none}
.reduce .xp-modes{display:none}
.reduce .guide-body{transition:none}
.plans-text{margin-top:22px;max-width:44ch;color:var(--dim);font-size:clamp(17px,1.4vw,22px);line-height:1.55}
.plans-text b{font-weight:600;color:var(--fg)}