/* CFTI — the room is the interface. Based on the original CFTI room prototype. */
:root{
  --room:#111833; --cream:#f4ead3; --cream-dim:#c9bfa8; --pink:#ff5d8f; --blue:#56a8ff;
  --phosphor:#a6ffbc; --glass:#0a0e1c;
  --display:"Bungee","Arial Black",Impact,sans-serif;
  --body:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --osd:"VT323",ui-monospace,"Courier New",monospace;
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:clip;overscroll-behavior:none;background:#07060c;color:var(--cream);font-family:var(--body)}
[hidden]{display:none!important}
.skip{position:fixed;left:-999px;top:8px;z-index:100;background:var(--cream);color:#000;padding:8px 12px;border-radius:8px}
.skip:focus{left:8px}

#room{position:fixed;inset:0;overflow:clip;touch-action:none;user-select:none;-webkit-user-select:none;transition:filter .6s ease}
#ambient{position:absolute;inset:-60px;background:url(assets/room.jpg) center/cover;filter:blur(36px) brightness(.42) saturate(1.25)}
#plate{position:absolute;inset:0;width:100%;height:100%;display:block}
#world{position:absolute;left:0;top:0;width:1536px;height:1024px;transform-origin:0 0}
#plateImg{position:absolute;inset:0;width:100%;height:100%;display:none}
.gl-off #plateImg{display:block}
#wx{position:absolute;inset:0;width:1536px;height:1024px;pointer-events:none}

#spill{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.16;transition:opacity .5s,background .6s;
  background:radial-gradient(ellipse 760px 520px at 791px 300px,var(--spill,#ff5d8f),transparent 70%)}
#spill.flash{opacity:.42;transition:opacity .08s}
#dim{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .9s ease;background:rgba(6,4,16,.62);
  -webkit-mask:radial-gradient(ellipse 330px 205px at 791px 279px,transparent 82%,#000 100%);
          mask:radial-gradient(ellipse 330px 205px at 791px 279px,transparent 82%,#000 100%)}
.movie #dim{opacity:1}
#flash{position:absolute;inset:0;pointer-events:none;background:#dfe9ff;mix-blend-mode:screen;opacity:0}
#flash.on{animation:bolt .9s ease-out}
@keyframes bolt{0%{opacity:0}6%{opacity:.55}12%{opacity:.1}18%{opacity:.4}100%{opacity:0}}
.flame{position:absolute;width:var(--r);height:var(--r);margin:calc(var(--r)/-2) 0 0 calc(var(--r)/-2);border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,190,110,.55),rgba(255,140,60,.12) 45%,transparent 70%);animation:flicker var(--t,2.3s) infinite steps(1,end) var(--d,0s)}
@keyframes flicker{0%{opacity:.75}12%{opacity:.95}20%{opacity:.7}33%{opacity:1}47%{opacity:.8}60%{opacity:.92}74%{opacity:.68}88%{opacity:.9}}

/* the photographed TV's glass, replaced by the live channel */
#tv{position:absolute;left:0;top:0;width:508px;height:302px;transform-origin:0 0}
.screen{position:absolute;inset:0;overflow:hidden;border-radius:3px;container-type:size;
  --u:min(1cqw,1.3333cqh);box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),inset 0 0 22px rgba(0,0,0,.3);
  --b-night:#0b0b2c;--b-cyan:#45dcff;--b-pink:#ff3fa6;--b-cream:#fff4e2;--b-gold:#ffd45c;--b-ink:#0c0a26}
.screen.off .ch,.screen.off .osd{visibility:hidden}
.screen.off::before{content:"";position:absolute;inset:0;background:#030306;z-index:5}
.dot{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);background:#fff;opacity:0;z-index:6;pointer-events:none}
.screen.powering .dot{animation:collapse .45s ease forwards}
.screen.waking .dot{animation:wake .4s ease forwards}
@keyframes collapse{0%{opacity:.9;height:100%;width:100%}45%{opacity:.9;height:2px;width:100%}100%{opacity:0;height:2px;width:2px}}
@keyframes wake{0%{opacity:.9;height:2px;width:2px}50%{opacity:.9;height:2px;width:100%}100%{opacity:0;height:100%;width:100%}}
.scan{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:.2;mix-blend-mode:multiply;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.22) 0 1px,transparent 1px 3px)}
.glare{position:absolute;inset:0;pointer-events:none;z-index:4;
  background:linear-gradient(118deg,rgba(255,255,255,.075) 0 22%,transparent 22.4% 100%),radial-gradient(ellipse at center,transparent 62%,rgba(0,0,0,.38) 100%)}
canvas.static{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;z-index:3;opacity:0;pointer-events:none}
canvas.static.show{opacity:1}
.osd{position:absolute;top:calc(5*var(--u));right:calc(6*var(--u));z-index:4;font-family:var(--display);color:var(--b-cream);
  font-size:calc(5.2*var(--u));line-height:.9;text-align:right;text-shadow:0 0 calc(1.8*var(--u)) rgba(69,220,255,.85);transition:opacity .6s;pointer-events:none}
.osd small{display:block;font:800 calc(2.1*var(--u))/1.7 var(--body);letter-spacing:.18em}
.osd.fade{opacity:0}

/* channels */
.ch{position:absolute;inset:0;padding:calc(7*var(--u)) calc(7*var(--u)) calc(6*var(--u));display:flex;flex-direction:column;gap:calc(2.4*var(--u));z-index:2;
  font-size:calc(3.4*var(--u));line-height:1.35;color:var(--b-cream);font-weight:600}
.ch:not(.c-welcome):not(.c-mic){background:
  radial-gradient(120% 90% at 50% 118%,rgba(255,63,166,.42),transparent 62%),
  radial-gradient(80% 70% at 100% -10%,rgba(69,220,255,.24),transparent 60%),
  linear-gradient(180deg,#0d0c33,#090922)}
.ch p{margin:0}
.ch h2,.mic-ui h2{font-family:var(--display);font-weight:400;margin:0;line-height:1;text-wrap:balance;color:transparent;
  background:linear-gradient(180deg,var(--b-cyan) 0 53%,var(--b-pink) 53% 100%);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 calc(1.6*var(--u)) rgba(255,63,166,.5));font-size:calc(7*var(--u))}
.kicker{font:800 calc(2.6*var(--u))/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--b-cyan);display:flex;align-items:center;gap:calc(1.3*var(--u))}
.kicker::before{content:"";flex:none;width:calc(1.3*var(--u));height:calc(1.3*var(--u));border-radius:50%;background:#ff2e4d;box-shadow:0 0 calc(1.4*var(--u)) #ff2e4d}
.note{font-weight:500;color:rgba(255,244,226,.68);font-size:calc(2.4*var(--u))}
.btn{font:800 calc(3.1*var(--u))/1 var(--body);color:var(--b-ink);background:var(--b-cream);border:0;border-radius:999px;padding:calc(1.9*var(--u)) calc(3.6*var(--u));
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:calc(1*var(--u));box-shadow:0 calc(.6*var(--u)) calc(2.6*var(--u)) rgba(0,0,0,.4)}
.btn:hover{background:#fff}
.btn.ghost{background:rgba(255,255,255,.07);color:var(--b-cream);box-shadow:0 0 0 2px rgba(255,244,226,.85) inset}
.row{display:flex;gap:calc(1.6*var(--u));flex-wrap:wrap;align-items:center}
.ch :focus-visible,.rbtn:focus-visible{outline:3px solid var(--b-cyan);outline-offset:2px}

.c-welcome{background:none;justify-content:space-between}
.c-welcome h2,.c-welcome .hint{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.onair{align-self:flex-start;font-family:var(--osd);font-size:calc(4*var(--u));color:#fff;background:#d6203f;padding:0 calc(1.6*var(--u));border-radius:calc(1*var(--u));animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}

.fact{font-weight:800;font-size:calc(5.4*var(--u));line-height:1.15;min-height:calc(12*var(--u));text-wrap:balance;letter-spacing:-.01em}
.verdict{font:800 calc(3.4*var(--u))/1.1 var(--body);letter-spacing:.08em;text-transform:uppercase;min-height:calc(4*var(--u))}
.verdict.good{color:var(--b-cyan)} .verdict.bad{color:var(--b-pink)}
.score{font:800 calc(2.4*var(--u))/1 var(--body);letter-spacing:.16em;color:rgba(255,244,226,.6)}
.scene{font-weight:700;font-size:calc(4.3*var(--u));line-height:1.3;max-width:52ch;min-height:calc(16*var(--u))}

.mic-stage{display:grid;grid-template-columns:1fr auto;gap:calc(3*var(--u));align-items:end}
.meter{height:calc(5*var(--u));border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--b-cyan),var(--b-pink));transition:width .08s linear}
.applause-label{font:800 calc(3.4*var(--u))/1.1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--b-cyan);min-height:calc(5*var(--u))}
.clap{width:calc(17*var(--u));height:calc(17*var(--u));border-radius:50%;border:0;cursor:pointer;font:400 calc(3*var(--u))/1 var(--display);touch-action:none;user-select:none;
  background:linear-gradient(180deg,#ff5cb6,#e0208a);color:var(--b-cream);box-shadow:0 calc(1*var(--u)) 0 #8d0f52,0 0 calc(4*var(--u)) rgba(255,63,166,.5)}
.clap:active,.clap.down{transform:translateY(calc(.8*var(--u)));box-shadow:0 calc(.2*var(--u)) 0 #8d0f52,0 0 calc(4*var(--u)) rgba(255,63,166,.5)}

.c-mic{padding:0;background:#000}
.c-mic canvas{width:100%;height:100%;display:block;touch-action:none}
.mic-ui{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2.4*var(--u));text-align:center;padding:calc(6*var(--u));
  background:radial-gradient(120% 90% at 50% 118%,rgba(255,63,166,.35),transparent 62%),rgba(9,9,40,.84)}
.mic-ui h2{font-size:calc(8*var(--u))}
.seg{display:flex;border-radius:99px;box-shadow:0 0 0 2px var(--b-cream) inset;overflow:hidden}
.seg button{font:800 calc(2.7*var(--u))/1 var(--body);background:transparent;color:var(--b-cream);border:0;padding:calc(1.4*var(--u)) calc(2.6*var(--u));cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--b-cream);color:var(--b-ink)}

.c-shop .ticker{margin:calc(-7*var(--u)) calc(-7*var(--u)) 0}
.ticker{overflow:hidden;white-space:nowrap;font:800 calc(2.7*var(--u))/1.7 var(--body);letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(90deg,var(--b-pink),#ff6a5c);color:#fff}
.ticker span{display:inline-block;padding-left:100%;animation:tick 14s linear infinite}
@keyframes tick{to{transform:translateX(-100%)}}
.product{display:grid;grid-template-columns:auto 1fr;gap:calc(3.4*var(--u));align-items:center}
.tee{width:calc(22*var(--u));aspect-ratio:1}
.left{font:800 calc(2.6*var(--u))/1 var(--body);letter-spacing:.14em;color:var(--b-cyan);margin-bottom:calc(1*var(--u))}
.product p{margin-bottom:calc(2*var(--u))}

.c-brand h2{font-size:calc(5.6*var(--u))}
.slate{border:calc(.4*var(--u)) solid rgba(255,244,226,.85);border-radius:calc(2*var(--u));padding:calc(2.4*var(--u));text-align:center;background:rgba(9,9,40,.55);
  box-shadow:0 0 calc(3.4*var(--u)) rgba(69,220,255,.28),inset 0 0 calc(3*var(--u)) rgba(255,63,166,.18)}
.slate .pres{font:800 calc(2.3*var(--u))/1.2 var(--body);letter-spacing:.18em;color:rgba(255,244,226,.72)}
.slate .bname{font-family:var(--display);font-size:calc(6.4*var(--u));line-height:1.05;word-break:break-word;color:transparent;
  background:linear-gradient(180deg,var(--b-cyan) 0 53%,var(--b-pink) 53% 100%);-webkit-background-clip:text;background-clip:text}
.slate .show{font-weight:800;font-size:calc(3.6*var(--u))}
.c-brand input{font:700 calc(3.2*var(--u)) var(--body);background:var(--b-cream);color:var(--b-ink);border:0;border-radius:99px;padding:calc(1.4*var(--u)) calc(3*var(--u));min-width:0;flex:1 1 calc(30*var(--u))}

.c-guide{gap:calc(1.6*var(--u))}
.c-guide h2{font-size:calc(5.6*var(--u))}
.guide{width:100%;border-collapse:collapse;font:700 calc(2.9*var(--u))/1.15 var(--body);font-variant-numeric:tabular-nums}
.guide td{border-bottom:1px solid rgba(255,244,226,.14);padding:calc(.7*var(--u)) calc(1.4*var(--u))}
.guide td:first-child{color:var(--b-cyan);font-weight:800;width:calc(14*var(--u))}
.guide button{font:inherit;color:var(--b-cream);background:none;border:0;padding:0;cursor:pointer;text-align:left}
.guide button:hover{color:var(--b-pink)}
.c-card,.c-ccn,.c-agency{justify-content:center}
.c-card p,.c-ccn p,.c-agency p{max-width:56ch;font-size:calc(3.6*var(--u))}
.c-card h2,.c-ccn h2,.c-agency h2{font-size:calc(8*var(--u))}
.c-ccn{background:radial-gradient(120% 90% at 50% 118%,rgba(255,170,40,.4),transparent 62%),linear-gradient(180deg,#1b0b26,#0a0614)!important}
.c-agency{background:radial-gradient(90% 80% at 0% 0%,rgba(69,220,255,.3),transparent 60%),linear-gradient(180deg,#0b1430,#060a1a)!important}

/* objects in the photograph that do something */
.hs{position:absolute;display:block;border:0;padding:0;margin:0;background:transparent;cursor:pointer;border-radius:var(--rr,18px);-webkit-tap-highlight-color:transparent}
.hs::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .25s ease;
  box-shadow:0 0 0 calc(1.6px / var(--s,1)) rgba(255,255,255,.9),0 0 calc(26px / var(--s,1)) rgba(255,93,143,.55),inset 0 0 calc(30px / var(--s,1)) rgba(255,255,255,.12)}
.hs:hover::after,.hs:focus-visible::after,.hs.teach::after{opacity:1}
.hs:focus{outline:none}
.hs .tag{position:absolute;left:50%;bottom:100%;transform:translate(-50%,calc(-8px / var(--s,1)));white-space:nowrap;pointer-events:none;
  font:600 calc(13px / var(--s,1))/1 var(--ui);color:#fff;padding:calc(6px / var(--s,1)) calc(10px / var(--s,1));border-radius:999px;
  background:rgba(18,14,26,.7);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);opacity:0;transition:opacity .2s}
.hs.below .tag{bottom:auto;top:100%;transform:translate(-50%,calc(8px / var(--s,1)))}
.hs:hover .tag,.hs:focus-visible .tag,.hs.teach .tag{opacity:1}
.hs[aria-current="true"]::after{opacity:.55;box-shadow:0 0 0 calc(1.2px / var(--s,1)) rgba(166,255,188,.85),0 0 calc(18px / var(--s,1)) rgba(166,255,188,.4)}
@media (pointer:coarse){.hs .tag{font-size:calc(15px / var(--s,1))}}

/* the remote */
#remote{position:fixed;left:max(24px,env(safe-area-inset-left));bottom:0;width:172px;padding:22px 16px 30px;border-radius:30px 30px 0 0;
  background:linear-gradient(180deg,#1d1b22,#121116 70%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 -10px 40px rgba(0,0,0,.55);
  display:grid;grid-template-columns:repeat(3,1fr);gap:9px;transform:translateY(calc(100% + 40px)) rotate(-3deg);transform-origin:50% 120%;
  transition:transform .5s cubic-bezier(.2,.9,.2,1);z-index:10}
#remote.up{transform:translateY(0) rotate(-3deg)}
#remote .brand{grid-column:1/-1;font:400 13px/1 var(--display);letter-spacing:.04em;color:#8d8794;text-align:center;margin-bottom:4px}
#remote .brand span{color:var(--pink)}
#remote #nums{display:contents}
.rbtn{font:600 14px/1 var(--ui);color:#e9e4ee;background:#2b2831;border:0;border-radius:11px;height:40px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 0 #08070a;touch-action:manipulation}
.rbtn:active{transform:translateY(1px)}
.rbtn.num{font:400 22px/1 var(--osd)}
.rbtn.num[aria-current="true"]{background:var(--phosphor);color:#10131f}
.rbtn.power{background:#b8283f;grid-column:3}
#chUp,#chDown{grid-column:span 3;height:38px}
@media (max-width:600px){#remote{left:50%;width:min(360px,calc(100% - 24px));transform:translate(-50%,calc(100% + 40px));grid-template-columns:repeat(7,1fr);gap:6px;padding:14px 12px max(16px,env(safe-area-inset-bottom))}
  #remote.up{transform:translate(-50%,0)}
  #chUp,#chDown{grid-column:span 7;height:34px} .rbtn{height:34px} .rbtn.power{grid-column:auto}}

#hint{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);max-width:calc(100% - 32px);text-align:center;
  font:500 14px/1.35 var(--ui);color:rgba(255,255,255,.9);text-shadow:0 1px 12px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.8);pointer-events:none;transition:opacity .8s ease;z-index:5;margin:0}
#hint kbd{font:600 12px/1 var(--ui);padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.16)}
#hint.gone{opacity:0}

/* header: small, out of the way */
#top{position:fixed;top:max(14px,env(safe-area-inset-top));left:16px;right:16px;z-index:30;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}
#top>*{pointer-events:auto}
.logo{font:400 15px/1 var(--display);color:var(--cream);text-decoration:none;letter-spacing:.02em;padding:10px 14px;border-radius:999px;background:rgba(10,8,20,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.logo span{color:var(--blue);text-shadow:0 0 12px rgba(86,168,255,.6)}
#menuBtn{font:700 14px/1 var(--ui);color:#fff;border:1px solid rgba(255,255,255,.25);background:rgba(10,8,20,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:999px;padding:11px 16px;cursor:pointer}
#nav{position:absolute;right:0;top:48px;display:flex;flex-direction:column;min-width:210px;padding:8px;border-radius:16px;background:rgba(14,11,26,.92);border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 50px rgba(0,0,0,.5);backdrop-filter:blur(14px)}
#nav a{color:var(--cream);text-decoration:none;font:600 15px/1 var(--ui);padding:12px 12px;border-radius:10px}
#nav a:hover,#nav a:focus-visible,#nav a[aria-current="page"]{background:rgba(255,93,143,.18);color:#fff;outline:none}
.logo:focus-visible,#menuBtn:focus-visible{outline:3px solid var(--phosphor);outline-offset:2px}
@media (max-width:420px){.logo{font-size:12px}}

/* panels: pages as things in the room */
body.paneled #room{filter:blur(3px) brightness(.62) saturate(1.1)}
#panels{position:fixed;inset:0;z-index:20;pointer-events:none}
.panel{pointer-events:auto;position:absolute;right:max(24px,4vw);top:130px;bottom:24px;width:min(460px,calc(100% - 48px));display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(24,18,40,.94),rgba(12,9,22,.96));border:1px solid rgba(255,255,255,.12);border-radius:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,93,143,.08),0 0 60px rgba(255,93,143,.12);overflow:hidden;animation:pin .45s cubic-bezier(.2,.9,.2,1)}
@keyframes pin{from{opacity:0;transform:translateY(18px) scale(.98)}}
.panel:focus{outline:none}
.p-head{padding:26px 26px 18px;border-bottom:1px solid rgba(255,255,255,.08);background:radial-gradient(120% 140% at 0% 0%,rgba(255,63,166,.22),transparent 55%),radial-gradient(100% 120% at 100% 0%,rgba(69,220,255,.16),transparent 60%)}
.p-kick{font:800 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:#45dcff}
.p-head h1{font:400 clamp(28px,4vw,38px)/1.02 var(--display);margin:10px 0 10px;color:transparent;background:linear-gradient(180deg,#45dcff 0 53%,#ff3fa6 53% 100%);-webkit-background-clip:text;background-clip:text}
.p-head p{margin:0;color:rgba(244,234,211,.82);font-size:15px;line-height:1.5}
.p-head a{color:#ff7aa8}
.p-body{padding:18px 26px 80px;overflow-y:auto;overscroll-behavior:contain;flex:1}
#closePanel{pointer-events:auto;position:absolute;right:max(24px,4vw);top:76px;z-index:2;font:700 14px/1 var(--ui);color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:12px 16px;cursor:pointer;backdrop-filter:blur(8px)}
#closePanel kbd{font:600 11px/1 var(--ui);opacity:.6;margin-left:6px}
#closePanel:focus-visible,.pbtn:focus-visible,.form :focus-visible,.shows button:focus-visible,.faq summary:focus-visible,.world:focus-visible{outline:3px solid var(--phosphor);outline-offset:2px}

.form{display:grid;gap:14px}
.form label{display:grid;gap:6px;font:700 13px/1.2 var(--ui);color:rgba(244,234,211,.85)}
.form .opt{font-weight:500;opacity:.6}
.form input,.form select,.form textarea{font:500 16px/1.3 var(--ui);color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:12px 14px;width:100%}
.form textarea{resize:vertical}
.form select option{color:#000}
.hp{position:absolute;left:-9999px}
.pbtn{display:inline-flex;justify-content:center;align-items:center;gap:8px;font:800 15px/1 var(--body);color:#0c0a26;background:#fff4e2;border:0;border-radius:999px;padding:14px 22px;cursor:pointer;text-decoration:none;box-shadow:0 8px 24px rgba(255,63,166,.25)}
.pbtn:hover{background:#fff}
.pbtn.ghost{background:transparent;color:#fff4e2;box-shadow:inset 0 0 0 2px rgba(255,244,226,.8)}
.pbtn[disabled]{opacity:.6;cursor:wait}
.prow{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.status{margin:0;font:600 14px/1.4 var(--ui);min-height:1.4em}
.status.ok{color:var(--phosphor)} .status.err{color:#ff8fae}
.out a{color:#ff7aa8;font-weight:700}
.merch,.svc{padding-left:18px;line-height:1.6;color:rgba(244,234,211,.85);margin:0 0 18px}
.svc li{margin-bottom:8px}
.shows{list-style:none;padding:0;margin:0}
.shows button{all:unset;box-sizing:border-box;display:flex;width:100%;gap:14px;align-items:baseline;padding:14px 8px;border-bottom:1px solid rgba(255,255,255,.08);cursor:pointer;border-radius:10px}
.shows button:hover{background:rgba(255,255,255,.05)}
.shows .n{font:400 18px/1 var(--osd);color:#45dcff;width:26px}
.shows .t{font:800 18px/1.2 var(--body)}
.shows .d{display:block;font:500 14px/1.4 var(--ui);color:rgba(244,234,211,.7);margin-top:4px}
#showOne h2{font:400 28px/1 var(--display);margin:6px 0 12px}
#showOne p{line-height:1.55;color:rgba(244,234,211,.85)}
.back{all:unset;cursor:pointer;color:#45dcff;font:700 14px/1 var(--ui)}
.faq details{border-bottom:1px solid rgba(255,255,255,.08);padding:4px 0}
.faq summary{cursor:pointer;font:800 16px/1.3 var(--body);padding:12px 4px;list-style-position:outside}
.faq p{margin:0 4px 14px;color:rgba(244,234,211,.8);line-height:1.55}
.worlds{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.world{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.14);font:800 17px/1.2 var(--body);cursor:pointer}
.world small{font:600 12px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:rgba(244,234,211,.6)}
.world.on{border-color:#ff3fa6;background:rgba(255,63,166,.12)}
.world.on small{color:#45dcff}
.world[disabled]{opacity:.6;cursor:default}

@media (max-width:700px){
  .panel{left:0;right:0;width:auto;top:auto;bottom:0;max-height:78svh;border-radius:22px 22px 0 0;animation-name:sheet}
  @keyframes sheet{from{transform:translateY(40px);opacity:0}}
  #closePanel{right:12px;bottom:auto;top:calc(22svh - 56px);transform:none}
  .p-head{padding:22px 20px 14px} .p-body{padding:16px 20px max(28px,env(safe-area-inset-bottom))}
  body.paneled #hint{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- round 2: art on the channels, video, socials, products, jobs ---- */
.c-animal{background:radial-gradient(90% 90% at 100% 100%,rgba(255,63,166,.35),transparent 60%),linear-gradient(160deg,#2e2e2e,#1c1c1f)!important}
.af-art{position:absolute;right:calc(5*var(--u));bottom:calc(5*var(--u));width:calc(30*var(--u));opacity:.95;pointer-events:none;filter:drop-shadow(0 0 calc(2*var(--u)) rgba(255,63,166,.45))}
.af-play,.af-end{position:relative;display:flex;flex-direction:column;gap:calc(2.2*var(--u));max-width:64%}
.af-end{max-width:none}
.af-end h2{font-size:calc(11*var(--u))}
.af-end p{font-size:calc(3.8*var(--u))}
.af-chicken{position:absolute;right:0;top:calc(-2*var(--u));width:calc(34*var(--u));pointer-events:none}
.c-animal .af-play ~ .af-art{display:block}
.c-animal:has(.af-end:not([hidden])) .af-art{display:none}
.c-soap{background:radial-gradient(circle at 80% 30%,rgba(69,220,255,.28),transparent 45%),radial-gradient(circle at 50% 0%,#7a1b3c,#2a0a18 70%)!important}
.puppet{position:absolute;right:calc(6*var(--u));top:calc(20*var(--u));width:calc(24*var(--u));aspect-ratio:1;object-fit:cover;border-radius:50%;border:calc(.6*var(--u)) solid #fff4e2;box-shadow:0 0 calc(4*var(--u)) rgba(69,220,255,.5);transform:rotate(6deg)}
.c-soap .scene,.c-soap h2,.c-soap .kicker{max-width:66%}
.c-tat .row{margin-top:auto}
.tee{object-fit:contain}
.price{color:var(--b-gold)}
.c-social{justify-content:center}
.soc-row{display:flex;flex-wrap:wrap;gap:10px}
.soc{display:inline-flex;align-items:center;gap:8px;color:#fff4e2;text-decoration:none;font:700 14px/1 var(--ui);padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.soc:hover,.soc:focus-visible{background:rgba(255,63,166,.22);outline:none;border-color:#ff3fa6}
.soc svg{width:18px;height:18px;fill:currentColor;flex:none}
.c-social .soc{font:800 calc(3*var(--u))/1 var(--body);padding:calc(1.8*var(--u)) calc(3*var(--u));gap:calc(1.4*var(--u))}
.c-social .soc svg{width:calc(4*var(--u));height:calc(4*var(--u))}
.c-social .soc-row{gap:calc(1.6*var(--u))}
.soc-row.small{padding:10px 6px 4px;border-top:1px solid rgba(255,255,255,.1);margin-top:6px;gap:6px}
.soc-row.small .soc span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.soc-row.small .soc{padding:9px}
#panels .soc-row{margin-top:22px}

.vid{position:absolute;inset:0;z-index:7;background:#000}
.vid-frame,.vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-x{position:absolute;right:calc(2*var(--u));top:calc(2*var(--u));z-index:2;font:800 calc(2.6*var(--u))/1 var(--body);color:#fff;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:calc(1.4*var(--u)) calc(2.4*var(--u));cursor:pointer}

.products{list-style:none;padding:0;margin:0 0 6px;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.prod{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:#fff4e2;padding:10px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);height:100%}
.prod:hover,.prod:focus-visible{border-color:#ff3fa6;background:rgba(255,63,166,.1);outline:none}
.pimg{aspect-ratio:1;border-radius:10px;background:#3b3b3e;display:grid;place-items:center;overflow:hidden}
.pimg img{width:82%;height:82%;object-fit:contain}
.pimg b{font:400 22px/1 var(--display);color:transparent;background:linear-gradient(180deg,#45dcff 0 53%,#ff3fa6 53%);-webkit-background-clip:text;background-clip:text}
.pname{font:700 13px/1.3 var(--ui)}
.pprice{font:800 14px/1 var(--body);color:#45dcff;margin-top:auto}

.jobs{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:14px}
.job{padding:16px 18px;border-radius:6px;background:#f4ead3;color:#1a1424;transform:rotate(var(--tilt,0));box-shadow:0 10px 24px rgba(0,0,0,.35);position:relative}
.job::before{content:"";position:absolute;top:-7px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#ff3fa6;box-shadow:0 2px 0 #8d0f52}
.job h3{font:400 20px/1.1 var(--display);margin:6px 0 4px;color:#1a1424}
.jteam{font:800 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#b0105f}
.jwhere{margin:0 0 6px;font:700 13px/1.3 var(--ui);color:#4b3f57}
.jdesc{margin:0 0 12px;font:500 14px/1.45 var(--ui);color:#2b2236}
.pbtn.small{padding:10px 16px;font-size:14px;background:#1a1424;color:#fff4e2;box-shadow:none}
.form-h{font:400 22px/1 var(--display);margin:0 0 14px;color:#fff4e2}
.form input[type=file]{padding:9px;font-size:14px}
#warp{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 45%,#fff 0,#ff9bd0 22%,#5b3cff 55%,#05030c 100%);mix-blend-mode:screen}
#warp.on{animation:warp .62s ease-in-out}
@keyframes warp{0%{opacity:0;transform:scale(.6)}40%{opacity:.95;transform:scale(1.15)}100%{opacity:0;transform:scale(1.4)}}
.world span{display:block}
.tod{margin-top:24px}
.seg2{display:flex;flex-wrap:wrap;gap:8px}
.seg2 button{font:700 14px/1 var(--ui);color:#fff4e2;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:11px 14px;cursor:pointer}
.seg2 button[aria-pressed="true"]{background:#fff4e2;color:#0c0a26}
.seg2 button:focus-visible{outline:3px solid var(--phosphor);outline-offset:2px}
.logo{display:inline-flex;align-items:center}
.logo-img{height:30px;width:auto;display:block}
@media (max-width:420px){.logo-img{height:24px}}
.logo .logo-text{display:none}
.logo.noimg .logo-text{display:inline}
.ag-logo{width:72px;height:auto;display:block;margin:12px 0 4px}
.ag-graphic{display:block;width:100%;height:auto;border-radius:12px;margin:0 0 18px;background:rgba(255,255,255,.04)}
.ag-tv{position:absolute;right:calc(6*var(--u));top:calc(18*var(--u));width:calc(20*var(--u));filter:drop-shadow(0 0 calc(3*var(--u)) rgba(255,93,170,.55))}
.c-agency p,.c-agency h2,.c-agency .kicker{max-width:68%}
.legal .p-body h2{font:800 17px/1.3 var(--body);margin:22px 0 8px;color:#fff4e2}
.legal .p-body p,.legal .p-body li{font:500 15px/1.6 var(--ui);color:rgba(244,234,211,.84)}
.legal .p-body ul{padding-left:20px;margin:0 0 10px}
.legal .p-body li{margin-bottom:8px}
.legal a,.fine a{color:#ff7aa8}
.sel{user-select:all;-webkit-user-select:all;color:#45dcff;font-weight:700}
.fine{margin:0;font:500 12px/1.4 var(--ui);color:rgba(244,234,211,.55)}
.legal-links{display:flex;gap:4px;padding:6px 4px 2px}
.legal-links a{font:600 12px/1 var(--ui)!important;padding:8px!important;color:rgba(244,234,211,.6)!important}

/* ---- house rules pass: accessibility, readable TV text on phones, consent, 404 ---- */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.screen:focus-visible{outline:4px solid #45dcff;outline-offset:6px}
/* TV text: never smaller than 16px on screen (world scale is --s) */
.ch{overflow-y:auto;font-size:max(calc(3.4*var(--u)),calc(16px / var(--s,1)))}
.ch p,.c-card p,.c-ccn p,.c-agency p{font-size:max(calc(3.6*var(--u)),calc(16px / var(--s,1)))}
.fact{font-size:max(calc(5.4*var(--u)),calc(19px / var(--s,1)))}
.scene{font-size:max(calc(4.3*var(--u)),calc(17px / var(--s,1)))}
.kicker,.note,.score,.osd small{font-size:max(calc(2.6*var(--u)),calc(12px / var(--s,1)))}
.verdict,.applause-label{font-size:max(calc(3.4*var(--u)),calc(14px / var(--s,1)))}
.btn,.seg button{font-size:max(calc(3.1*var(--u)),calc(15px / var(--s,1)));min-height:calc(44px / var(--s,1))}
.guide{font-size:max(calc(2.9*var(--u)),calc(14px / var(--s,1)))}
.c-social .soc{font-size:max(calc(3*var(--u)),calc(14px / var(--s,1)))}
.mic-best{margin:0;font-size:max(calc(2.6*var(--u)),calc(12px / var(--s,1)));color:rgba(255,244,226,.7)}
.btn[disabled]{opacity:.7;cursor:not-allowed}
.tick-pause{position:absolute;right:calc(2*var(--u));bottom:calc(2*var(--u));z-index:3;font:700 max(calc(2.4*var(--u)),calc(12px / var(--s,1)))/1 var(--body);color:#fff4e2;background:rgba(0,0,0,.45);border:1px solid rgba(255,244,226,.5);border-radius:999px;padding:calc(1.2*var(--u)) calc(2*var(--u));cursor:pointer}
.ticker.paused span{animation-play-state:paused}
.vid-bar{position:absolute;right:calc(2*var(--u));top:calc(2*var(--u));z-index:2;display:flex;gap:calc(1.2*var(--u))}
.vid-bar .vid-x{position:static}
.vid-yt{font:800 max(calc(2.6*var(--u)),calc(13px / var(--s,1)))/1 var(--body);color:#fff;background:#d6203f;border-radius:999px;padding:calc(1.4*var(--u)) calc(2.4*var(--u));text-decoration:none}
.vid-x{font-size:max(calc(2.6*var(--u)),calc(13px / var(--s,1)))}
@media (max-width:700px){.af-art,.puppet,.ag-tv,.af-chicken{display:none}.af-play,.c-soap .scene,.c-soap h2,.c-soap .kicker,.c-agency p,.c-agency h2,.c-agency .kicker{max-width:none}}
/* panels: 16px body text */
.p-head p,.legal .p-body p,.legal .p-body li,.faq p,.jdesc,.svc,.merch{font-size:16px}
.form label{font-size:14px}
.check{display:flex!important;grid-template-columns:none;align-items:center;gap:10px!important;font:600 15px/1.3 var(--ui)!important}
.check input{width:22px;height:22px;flex:none;accent-color:#ff3fa6}
#consent{position:fixed;left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:40;max-width:560px;margin:0 auto;padding:18px 20px;border-radius:18px;background:rgba(14,11,26,.96);border:1px solid rgba(255,255,255,.16);box-shadow:0 20px 60px rgba(0,0,0,.6)}
#consent p{margin:0 0 12px;font:500 15px/1.5 var(--ui);color:#fff4e2}
#consent a{color:#ff7aa8}
#consent .prow{margin-top:0}
.lost .bars{display:grid;grid-template-columns:repeat(7,1fr);height:120px}
.lost .bars i:nth-child(1){background:#c0c0c0}.lost .bars i:nth-child(2){background:#c0c000}.lost .bars i:nth-child(3){background:#00c0c0}.lost .bars i:nth-child(4){background:#00c000}.lost .bars i:nth-child(5){background:#c000c0}.lost .bars i:nth-child(6){background:#c00000}.lost .bars i:nth-child(7){background:#0000c0}
.vid-fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:calc(8*var(--u));margin:0;color:#fff4e2;font:700 max(calc(3.4*var(--u)),calc(15px / var(--s,1)))/1.4 var(--body)}
.vid-fallback a{color:#ff7aa8}
.vid-frame iframe{z-index:1;background:transparent}
/* Overflowing channels scroll from the top instead of clipping their headline */
.c-card,.c-ccn,.c-agency,.c-social{justify-content:safe center}
.c-card h2,.c-ccn h2,.c-agency h2{font-size:calc(7*var(--u))}
.ch .row{flex-shrink:0}
.ch > *{flex-shrink:0}

/* ---- Cult Comedy Night dates (from cultcomedynight.com) ---- */
.ccn-chip{display:inline-flex;align-items:center;gap:2px;margin:0 10px;border-radius:999px;background:rgba(10,8,20,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,170,40,.55);box-shadow:0 0 18px rgba(255,170,40,.25)}
.ccn-chip[hidden]{display:none}
.ccn-chip a{font:700 13px/1 var(--ui);color:#ffd28a;text-decoration:none;padding:11px 4px 11px 14px;letter-spacing:.02em;white-space:nowrap}
.ccn-chip a::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#ffaa28;margin-right:8px;vertical-align:1px}
.ccn-chip[data-state="tonight"] a::before,.ccn-chip[data-state="live"] a::before{background:#ff3f5e;animation:ccnPulse 1.4s ease-in-out infinite}
.ccn-chip button{font:400 18px/1 var(--ui);color:rgba(255,255,255,.6);background:none;border:0;padding:8px 12px 8px 6px;cursor:pointer}
.ccn-chip a:hover{color:#fff}.ccn-chip button:hover{color:#fff}
.ccn-chip a:focus-visible,.ccn-chip button:focus-visible{outline:3px solid var(--phosphor);outline-offset:2px;border-radius:999px}
@keyframes ccnPulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.ccn-chip a::before{animation:none!important}}
@media (max-width:640px){.ccn-chip{position:absolute;top:52px;left:0;margin:0}.ccn-chip a{font-size:12px}}

.ccn-next{display:flex;flex-direction:column;align-items:center;gap:calc(1.2*var(--u));margin:calc(2*var(--u)) 0 calc(3*var(--u));flex-shrink:0}
.ccn-next[hidden]{display:none}
.ccn-badge{font:700 max(calc(2.6*var(--u)),calc(12px / var(--s,1)))/1 var(--ui);letter-spacing:.14em;color:#1b0b26;background:#ffaa28;padding:calc(.9*var(--u)) calc(2*var(--u));border-radius:999px}
.ccn-next[data-state="tonight"] .ccn-badge,.ccn-next[data-state="live"] .ccn-badge{background:#ff3f5e;color:#fff}
.ccn-date{font:400 max(calc(6*var(--u)),calc(20px / var(--s,1)))/1.1 var(--display);color:#ffd28a;text-shadow:0 0 calc(3*var(--u)) rgba(255,170,40,.55)}
.ccn-where,.ccn-who{font-size:max(calc(3*var(--u)),calc(16px / var(--s,1)));color:rgba(255,255,255,.82)}

.ccn-dates{margin:0 0 22px}
.ccn-dates[hidden]{display:none}
.ccn-h{font:400 20px/1.2 var(--display);margin:0 0 12px;color:#ffd28a}
.ccn-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ccn-item{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:start;padding:14px;border-radius:14px;background:rgba(255,170,40,.08);border:1px solid rgba(255,170,40,.3)}
.ccn-when{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:56px;padding:8px 6px;border-radius:10px;background:#ffaa28;color:#1b0b26}
.ccn-mon{font:700 12px/1 var(--ui);letter-spacing:.12em}
.ccn-day{font:400 26px/1 var(--display)}
.ccn-info{display:flex;flex-direction:column;gap:3px;font-size:15px;color:rgba(255,255,255,.85)}
.ccn-info strong{color:#fff;font-size:16px}
.ccn-acts{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:6px}
.ccn-acts .pbtn{margin:0;text-decoration:none;display:inline-block;text-align:center}
.ccn-cal{color:#ffd28a;font-weight:600;font-size:14px}
.c-ccn.has-show>p{display:none}.c-ccn.has-show .ccn-next{margin-top:calc(1*var(--u))}
@media (max-width:700px){.c-ccn.has-show .kicker,.c-ccn.has-show .ccn-who{display:none}.c-ccn.has-show .ccn-next{gap:calc(.6*var(--u));margin-bottom:calc(1.5*var(--u))}}