@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&display=swap');
/* "Here's what's on" — the story guide between the hero and the journey.
   Static by default (no JavaScript, reduced motion); .is-live turns it into a pinned 3D broadcast. */
.guide{--g-ink:#eef1ff;--g-muted:#9aa3c8;--g-line:rgba(190,200,255,.16);position:relative;padding:90px 5.1% 10px;background:var(--paper);scroll-margin-top:0}
.guide-stage{position:relative}
.guide-screen{--ambient:123,146,255;--u:1;position:relative;overflow:hidden;isolation:isolate;border-radius:26px;color:var(--g-ink);padding:clamp(28px,5vw,64px);background:radial-gradient(120% 85% at 50% 18%,rgba(var(--ambient,123,146,255),.2),transparent 62%),radial-gradient(90% 70% at 50% 110%,rgba(var(--ambient,123,146,255),.1),transparent 70%),#060913}
.guide-field,.guide-viewport,.guide-flash,.guide-caption,.guide-ticker,.guide-bar,.guide-skip{display:none}
.guide-hud{display:flex;flex-direction:column}.guide-program{order:1}.guide-outro{order:2}
.guide-intro .eyebrow{color:#b7bfe2}.guide-intro .line{background:#b7bfe2}
.guide-intro h2{font:500 clamp(46px,6vw,98px)/1.04 var(--display);letter-spacing:-.055em;margin:26px 0 20px}
.guide-intro h2 em,.guide-outro-title em{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.05em;margin-left:.03em}
.guide-intro p{max-width:560px;margin:0;font-size:16px;line-height:1.75;color:var(--g-muted)}
.guide-program ol{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.guide-program a{position:relative;display:grid;gap:6px;padding:18px 0 4px;border-top:1px solid var(--g-line);color:var(--g-ink);transition:color .3s}
.guide-program a>i{position:absolute;left:0;top:-1px;height:2px;width:100%;background:rgb(var(--ambient));transform:scaleX(var(--fill,0));transform-origin:left;pointer-events:none}
.guide-program-n{font:11px/1 var(--sans);letter-spacing:.14em;color:var(--g-muted)}
.guide-program-t{font:500 clamp(17px,1.5vw,22px)/1.2 var(--display);letter-spacing:-.03em}
.guide-program-d{font-size:12px;line-height:1.5;color:var(--g-muted)}
.guide-program-s{display:none}
.guide-program a:hover .guide-program-t,.guide-program a:focus-visible .guide-program-t{color:rgb(var(--ambient))}
.guide-program a:focus-visible{outline:2px solid rgb(var(--ambient));outline-offset:6px}
.guide-outro{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;margin-top:40px;padding-top:28px;border-top:1px solid var(--g-line)}
.guide-outro-title{margin:0;font:500 clamp(28px,3vw,44px)/1.08 var(--display);letter-spacing:-.045em}
@media(max-width:900px){.guide-program ol{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.guide{padding:56px 6% 0}.guide-screen{border-radius:18px}.guide-intro h2{font-size:clamp(40px,11vw,60px)}.guide-intro p{font-size:15px}}

/* ---------------- Live broadcast ---------------- */
/* The hero pins and zooms into the TV; the broadcast sits over it and fades in from inside the screen. */
.hero-guide.is-live .hero{position:sticky;top:var(--hero-top,0px);z-index:1}
.hero-guide.is-live .guide{margin-top:calc(var(--hero-h,100svh) * -1);z-index:2;background:transparent;pointer-events:none}
.hero-guide.is-live .hero-copy{opacity:calc(1 - var(--hz,0) * 3.4);translate:0 calc(var(--hh,0) * -14px + var(--hz,0) * -110px)}
/* The hold before the zoom: the footer rule fills with the visitor's scroll, then the camera moves in. */
.hero-guide.is-live .hero-footer::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--hh,0));will-change:transform}
.hero-guide.is-live .hero-copy,.hero-guide.is-live .hero-footer,.hero-guide.is-live .character-home .channel-controls,.hero-guide.is-live .character-home .scene-coordinate,.hero-guide.is-live .character-home .character-caption{will-change:opacity,translate}
.hero-guide.is-live .hero-footer,.hero-guide.is-live .character-home .scene-coordinate,.hero-guide.is-live .character-home .character-caption{opacity:calc(1 - var(--hz,0) * 6)}
/* The channel pill clears away at the end of the hold, so nothing of it is left under the zoom's fade. */
.hero-guide.is-live .character-home .channel-controls{opacity:calc((1 - var(--hh,0)) * 3.4)}
.hero-guide.is-leaving .character-home .channel-controls{pointer-events:none}
.hero-guide.is-zooming .hero-copy,.hero-guide.is-zooming .hero-footer,.hero-guide.is-zooming .character-home .channel-controls{pointer-events:none}
/* The metal wrappers set their own pointer-events: faded hero controls must not catch taps or clicks mid-zoom. */
.hero-guide.is-zooming :is(.hero-copy,.hero-footer,.channel-controls) :is(a,button),.hero-guide.is-leaving .character-home .channel-controls :is(a,button){pointer-events:none!important}
.hero-guide.is-covered .hero{visibility:hidden}
.guide.is-live{padding:0}
.guide.is-live .guide-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;pointer-events:none}
.guide.is-live.is-covered .guide-stage{pointer-events:auto;background:var(--paper)}
.guide.is-live .guide-screen{position:absolute;inset:0;border-radius:0;padding:0;opacity:0}
.guide.is-live .guide-screen:after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.028) 0 1px,transparent 1px 3px),linear-gradient(to top,rgba(4,6,14,.82),rgba(4,6,14,.35) 22%,transparent 38%),linear-gradient(to bottom,rgba(4,6,14,.5),transparent 16%),radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,6,.55))}
.guide.is-live .guide-field{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:0}
.guide.is-live .guide-viewport{display:block;position:absolute;inset:0;z-index:1;overflow:hidden;perspective-origin:50% 50%}
.guide-world{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform-origin:0 0;will-change:transform}
.guide.is-live .guide-flash{display:block;position:absolute;inset:0;z-index:6;opacity:0;pointer-events:none;background:radial-gradient(ellipse 60% 8% at 50% 50%,#fff,#dfe6ff 45%,rgba(var(--ambient,123,146,255),.4) 70%,transparent)}


/* HUD */
.guide.is-live .guide-hud{display:block;position:absolute;inset:0;z-index:5;pointer-events:none;padding:clamp(18px,2.6vw,34px) 5.1% clamp(16px,2.4vw,28px)}
.guide.is-live.is-covered .guide-hud a{pointer-events:auto}
.guide.is-live .guide-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:10px;letter-spacing:.16em;color:#aeb6da}
.guide-onair{display:flex;align-items:center;gap:10px}.guide-onair b{font-weight:500;color:var(--g-ink)}
.guide-onair i{width:7px;height:7px;border-radius:50%;background:#ff5f6d;box-shadow:0 0 10px #ff5f6d;animation:g-blink 1.6s steps(2,start) infinite}
@keyframes g-blink{50%{opacity:.25}}
.guide-timecode{font-variant-numeric:tabular-nums;letter-spacing:.1em;color:var(--g-ink)}
.guide.is-live .guide-hud:before,.guide.is-live .guide-hud:after{content:'';position:absolute;left:clamp(12px,1.6vw,22px);right:clamp(12px,1.6vw,22px);height:22px;pointer-events:none;border:1px solid rgba(220,228,255,.28)}
.guide.is-live .guide-hud:before{top:clamp(12px,1.6vw,22px);border-bottom:0;-webkit-mask:linear-gradient(90deg,#000 22px,transparent 22px calc(100% - 22px),#000 0);mask:linear-gradient(90deg,#000 22px,transparent 22px calc(100% - 22px),#000 0)}
.guide.is-live .guide-hud:after{bottom:clamp(12px,1.6vw,22px);border-top:0;-webkit-mask:linear-gradient(90deg,#000 22px,transparent 22px calc(100% - 22px),#000 0);mask:linear-gradient(90deg,#000 22px,transparent 22px calc(100% - 22px),#000 0)}

.guide.is-live .guide-intro{position:absolute;left:0;right:0;bottom:clamp(140px,17vh,190px);text-align:center;opacity:0;transform:translateY(24px);transition:opacity .7s,transform .9s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.guide.is-live .guide-intro .eyebrow{justify-content:center}
.guide.is-live .guide-intro h2{font-size:clamp(44px,5.6vw,92px);margin:16px 0 12px}
.guide.is-live .guide-intro p{margin:auto;max-width:520px;font-size:15px}
.guide.is-live.is-intro.is-open .guide-intro{opacity:1;transform:none;transition-delay:.1s}

.guide.is-live .guide-caption{display:grid;gap:8px;position:absolute;left:5.1%;bottom:clamp(118px,15vh,150px);max-width:min(430px,60vw)}
.guide-caption>*{opacity:0;transform:translateY(16px)}
.guide-caption.is-in>*{animation:g-rise .8s cubic-bezier(.2,.8,.2,1) both}
.guide-caption.is-in>:nth-child(2){animation-delay:.08s}.guide-caption.is-in>:nth-child(3){animation-delay:.16s}
@keyframes g-rise{from{opacity:0;transform:translateY(16px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 -20% 0)}}
.guide-caption-kicker{font-size:10px;letter-spacing:.18em;color:rgb(var(--ambient))}
.guide-caption-title{font:500 clamp(24px,2.3vw,34px)/1.1 var(--display);letter-spacing:-.04em}
.guide-caption-text{font-size:14px;line-height:1.6;color:var(--g-muted)}
.guide.is-live.is-outro .guide-caption,.guide.is-live.is-intro .guide-caption{opacity:0}

.guide.is-live .guide-ticker{--c:#f0b779;display:grid;justify-items:end;gap:4px;position:absolute;right:5.1%;bottom:clamp(118px,15vh,150px);text-align:right;opacity:0;transition:opacity .4s}
.guide.is-live.is-ticker .guide-ticker{opacity:1}
.guide-ticker>*{transition:none}
.guide-ticker.is-in>*{animation:g-rise .6s cubic-bezier(.2,.8,.2,1) both}
.guide-ticker-n{font-size:10px;letter-spacing:.16em;color:var(--g-muted)}
.guide-ticker-year{font:500 clamp(40px,4.4vw,68px)/1 var(--display);letter-spacing:-.06em;color:var(--c)}
.guide-ticker-label{font-size:13px;font-weight:500}

.guide.is-live .guide-outro{position:absolute;left:0;right:0;top:60%;margin:0;padding:0;border:0;translate:0 -50%;flex-direction:column;justify-content:center;text-align:center;gap:28px;opacity:0;visibility:hidden;transform:scale(.96);transition:opacity .6s,transform .8s cubic-bezier(.2,.8,.2,1),visibility 0s .6s}
.guide.is-live .guide-outro-title{font-size:clamp(44px,5.4vw,88px)}
.guide.is-live.is-outro .guide-outro{opacity:1;visibility:visible;transform:none;transition:opacity .6s,transform .8s cubic-bezier(.2,.8,.2,1)}
.guide.is-live.is-covered.is-outro .guide-outro a{pointer-events:auto}
/* The metal wrapper sets its own visibility, so the hidden outro button would still catch clicks mid-broadcast. */
.guide.is-live:not(.is-outro) .guide-outro .metal-fx-root{visibility:hidden!important}

.guide.is-live .guide-skip{display:inline-flex;position:absolute;right:5.1%;top:clamp(52px,6.2vw,76px)}

.guide.is-live .guide-program{position:absolute;left:5.1%;right:5.1%;bottom:clamp(20px,3vh,34px)}
.guide.is-live .guide-program ol{margin:0;gap:18px}
.guide.is-live .guide-program a{padding:14px 0 2px;gap:4px;color:#8f98bf}
.guide.is-live .guide-program li.is-current a{color:var(--g-ink)}
.guide.is-live .guide-program-t{font-size:clamp(14px,1.15vw,17px)}
.guide.is-live .guide-program-d{font-size:11px}
.guide.is-live .guide-program li:not(.is-current) .guide-program-d{opacity:.6}

.guide.is-live.is-off .guide-hud{opacity:0;transition:opacity .25s}
.guide.is-live .guide-hud{transition:opacity .4s}
.guide.is-live:not(.is-open) .guide-hud>:not(.guide-intro){opacity:0}
.guide.is-live:not(.is-open) .guide-hud:focus-within>*{opacity:1}
.guide.is-live.is-open .guide-hud>*{transition:opacity .6s}

/* ---------------- 3D props (sizes in world units via --u) ---------------- */
.g-item{position:absolute;left:0;top:0;visibility:hidden;transform-origin:0 0;backface-visibility:hidden;-webkit-backface-visibility:hidden;color:var(--g-ink);will-change:transform,opacity}
.g-word{display:inline-block;--w:clamp(0,calc(var(--reveal,0) * (2.1 + var(--n,0) * .2) - var(--i) * .2),1);opacity:var(--w);transform:translateY(calc((1 - var(--w)) * 55%)) rotateX(calc((1 - var(--w)) * -80deg));transform-origin:50% 100%}
.g-title{width:calc(var(--u) * 1180px);text-align:center;font:500 calc(var(--u) * 116px)/1.02 var(--display);letter-spacing:-.055em}
.g-title .g-line{display:block}.g-title em{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.045em}
.g-kicker{display:block;margin-bottom:calc(var(--u) * 30px);font:500 max(10px,calc(var(--u) * 14px))/1 var(--sans);letter-spacing:.24em;color:rgb(var(--ambient));opacity:calc(var(--reveal,0) * 1.4)}
.guide.is-portrait .g-title{width:calc(var(--u) * 600px);font-size:calc(var(--u) * 70px)}

.g-face{width:calc(var(--u) * 580px);height:calc(var(--u) * 290px)}
.g-eye{position:absolute;top:calc(var(--u) * 76px);width:calc(var(--u) * 138px);height:calc(var(--u) * 138px);border-radius:50%;translate:calc(var(--gx,0) * var(--gaze,1) * var(--u) * 16px) calc(var(--gy,0) * var(--gaze,1) * var(--u) * 10px);animation:g-eye-blink 5.4s infinite}
.g-eye:first-child{left:calc(var(--u) * 108px)}.g-eye:nth-child(2){right:calc(var(--u) * 108px);animation-delay:.03s}
@keyframes g-eye-blink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}

.g-card{--c:#f0b779;width:calc(var(--u) * 430px);padding:calc(var(--u) * 26px) calc(var(--u) * 28px) calc(var(--u) * 28px);border-radius:calc(var(--u) * 22px);background:linear-gradient(155deg,rgba(255,255,255,.12),rgba(255,255,255,.025) 55%),rgba(10,14,31,.82);border:1px solid rgba(255,255,255,.15);box-shadow:0 calc(var(--u) * 40px) calc(var(--u) * 90px) rgba(0,0,8,.55),inset 0 1px 0 rgba(255,255,255,.2);overflow:hidden}
.g-card:before{content:'';position:absolute;left:0;right:0;top:0;height:calc(var(--u) * 4px);background:var(--c);box-shadow:0 0 calc(var(--u) * 24px) var(--c)}
.g-card-top{display:flex;justify-content:space-between;font:500 max(9px,calc(var(--u) * 12px))/1 var(--sans);letter-spacing:.16em;color:#9ea7cc;text-transform:uppercase}
.g-card-top span:first-child{color:var(--c)}
.g-card-mark{display:flex;align-items:center;height:calc(var(--u) * 118px);margin:calc(var(--u) * 20px) 0 calc(var(--u) * 18px)}
.g-card-mark img{max-height:100%;max-width:70%;width:auto;height:auto;object-fit:contain}
.g-card strong{display:block;font:500 calc(var(--u) * 36px)/1.05 var(--display);letter-spacing:-.04em}
.g-card-cat{display:block;margin-top:calc(var(--u) * 10px);font:500 max(8px,calc(var(--u) * 11px))/1.4 var(--sans);letter-spacing:.16em;color:#9ea7cc}
.g-card p{margin:calc(var(--u) * 18px) 0 0;padding-top:calc(var(--u) * 16px);border-top:1px solid rgba(255,255,255,.12);font:italic 400 calc(var(--u) * 20px)/1.35 Georgia,'Times New Roman',serif;color:#dfe4fb}
.g-glow{--c:#f0b779;width:calc(var(--u) * 820px);height:calc(var(--u) * 640px);border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 34%,transparent),color-mix(in srgb,var(--c) 8%,transparent) 60%,transparent)}
.g-year{--c:#f0b779;font:500 calc(var(--u) * 300px)/1 var(--display);letter-spacing:-.075em;white-space:nowrap;color:color-mix(in srgb,var(--c) 26%,transparent)}
.guide.is-portrait .g-year{font-size:calc(var(--u) * 200px)}
.g-parallel{display:flex;align-items:center;gap:calc(var(--u) * 18px);padding:calc(var(--u) * 14px) calc(var(--u) * 24px);border:1px solid rgba(160,190,255,.35);border-radius:99px;background:rgba(12,18,40,.8);font:500 max(9px,calc(var(--u) * 13px))/1 var(--sans);letter-spacing:.18em;white-space:nowrap}
.g-parallel b{font-size:1.6em;color:#85d9eb}


.g-slab{display:flex;flex-direction:column;width:calc(var(--u) * 360px);height:calc(var(--u) * 450px);padding:calc(var(--u) * 28px);border-radius:calc(var(--u) * 22px);background:linear-gradient(170deg,rgba(120,150,255,.16),rgba(255,255,255,.02) 55%),rgba(8,12,34,.9);border:1px solid rgba(140,165,255,.3);box-shadow:0 calc(var(--u) * 40px) calc(var(--u) * 90px) rgba(0,0,10,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.g-slab-n{font:500 max(9px,calc(var(--u) * 12px))/1 var(--sans);letter-spacing:.2em;color:#8fa3ff}
.g-slab strong{margin-top:calc(var(--u) * 14px);font:500 calc(var(--u) * 40px)/1.05 var(--display);letter-spacing:-.045em}
.g-slab strong em{display:block;font-family:Georgia,serif;font-weight:400}
.g-stat{margin-top:auto;font:500 calc(var(--u) * 116px)/.9 var(--display);letter-spacing:-.07em;color:#7d95ff;text-shadow:0 0 calc(var(--u) * 40px) rgba(90,120,255,.5)}
.g-stat sup{font-size:.4em;vertical-align:top;margin-left:.05em}
.g-slab-note{margin-top:calc(var(--u) * 14px);font:500 max(8px,calc(var(--u) * 11px))/1.5 var(--sans);letter-spacing:.16em;color:#9ea7cc}
.g-chips,.g-nodes{display:flex;flex-wrap:wrap;gap:calc(var(--u) * 8px);margin-top:calc(var(--u) * 16px)}
.g-chips i,.g-nodes i{font:500 max(9px,calc(var(--u) * 13px))/1 var(--sans);font-style:normal;padding:calc(var(--u) * 9px) calc(var(--u) * 13px);border-radius:99px;border:1px solid rgba(160,180,255,.3);color:#d6ddff}
.g-nodes{margin-top:auto;position:relative}
.g-nodes i{background:rgba(110,140,255,.12)}
.g-nodes i:nth-child(2){border-color:#d9a57a;color:#ffd8b8}
.g-frame{position:relative;margin-top:auto;aspect-ratio:16/9;border-radius:calc(var(--u) * 10px);background:linear-gradient(135deg,rgba(125,149,255,.35),rgba(20,26,60,.9)),#0c1030;border:1px solid rgba(150,170,255,.35);overflow:hidden}
.g-frame:before{content:'';position:absolute;inset:12%;z-index:1;border:1px dashed rgba(220,228,255,.28);pointer-events:none}
.g-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#05060c}
.g-frame i{z-index:2;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.g-frame i{position:absolute;font:500 max(8px,calc(var(--u) * 11px))/1 var(--sans);font-style:normal;letter-spacing:.14em}
.g-rec{left:8%;top:10%;color:#ff8a94}.g-rec:before{content:'●';margin-right:.5em;animation:g-blink 1.2s steps(2,start) infinite}
.g-tc{right:8%;bottom:10%;color:#dfe5ff;font-variant-numeric:tabular-nums}

.g-sleeve{width:calc(var(--u) * 430px);aspect-ratio:1;border-radius:calc(var(--u) * 6px);overflow:hidden;box-shadow:0 calc(var(--u) * 50px) calc(var(--u) * 100px) rgba(0,0,20,.65),0 0 0 1px rgba(255,255,255,.12)}
.g-sleeve img{display:block;width:100%;height:100%;object-fit:cover}
.g-sleeve:after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.22),transparent 38%,transparent 70%,rgba(255,255,255,.08))}
.g-disc{width:calc(var(--u) * 410px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#050507 0 3%,transparent 3.3%),conic-gradient(from 20deg,rgba(255,255,255,.14),transparent 12%,transparent 38%,rgba(255,255,255,.1) 50%,transparent 62%,transparent 88%,rgba(255,255,255,.14)),repeating-radial-gradient(circle,#0a0a0e 0 calc(var(--u) * 2px),#17171e calc(var(--u) * 2.6px) calc(var(--u) * 4px));box-shadow:0 calc(var(--u) * 30px) calc(var(--u) * 70px) rgba(0,0,0,.6)}
.g-disc-label{position:absolute;inset:32%;border-radius:50%;background:url('/assets/guide/sotamk.webp') center/cover;box-shadow:0 0 0 calc(var(--u) * 3px) #0a0a0e}
.g-album-meta{display:grid;justify-items:center;gap:calc(var(--u) * 12px);text-align:center;white-space:nowrap}
.g-album-meta strong{font:500 calc(var(--u) * 46px)/1 var(--display);letter-spacing:-.045em;background:linear-gradient(180deg,#fff,#aab8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.g-album-meta>span:nth-child(2){font:500 max(9px,calc(var(--u) * 12px))/1 var(--sans);letter-spacing:.2em;color:#aeb8e4}
.g-eq{display:flex;align-items:flex-end;gap:calc(var(--u) * 6px);height:calc(var(--u) * 42px)}
.g-eq i{width:calc(var(--u) * 6px);height:100%;border-radius:9px;background:linear-gradient(#bac6ff,#4f6bff);transform-origin:bottom;animation:g-eq 1.1s ease-in-out infinite alternate}
.g-eq i:nth-child(3n){animation-duration:.8s}.g-eq i:nth-child(4n+1){animation-duration:1.4s}.g-eq i:nth-child(5n+2){animation-delay:-.5s}.g-eq i:nth-child(2n){animation-delay:-.2s}
@keyframes g-eq{from{transform:scaleY(.15)}to{transform:scaleY(1)}}

.g-face-end .g-eye{top:calc(var(--u) * 76px)}
.g-eye::after{content:'';position:absolute;inset:0;border-radius:50%;border:calc(var(--u) * 12px) solid #eef2ff;z-index:1}
.g-eye::before{content:'';position:absolute;left:50%;top:50%;width:calc(var(--u) * 276px);height:calc(var(--u) * 276px);translate:-50% -50%;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(var(--ambient,123,146,255),0) 24%,rgba(var(--ambient,123,146,255),.42) 35%,rgba(var(--ambient,123,146,255),.78) 41%,rgba(var(--ambient,123,146,255),.95) 50%,rgba(var(--ambient,123,146,255),.5) 58%,rgba(var(--ambient,123,146,255),.2) 72%,rgba(var(--ambient,123,146,255),.06) 86%,rgba(var(--ambient,123,146,255),0) 100%)}

/* Act 03: the Production card carries the ARCADE launch film. */
.g-slab-film{width:calc(var(--u) * 580px);height:auto;min-height:calc(var(--u) * 450px)}
.g-slab-film .g-frame{flex:none;margin-top:calc(var(--u) * 22px)}
.g-slab-film .g-frame{border-radius:calc(var(--u) * 12px);box-shadow:0 0 0 1px rgba(160,180,255,.3),0 calc(var(--u) * 20px) calc(var(--u) * 50px) rgba(0,0,10,.5)}
.g-film-credit{margin-top:calc(var(--u) * 12px);font:500 max(9px,calc(var(--u) * 13px))/1.3 var(--sans);color:#c9d1f3}
.g-film-credit b{font-weight:600;color:#f7b36b}
.g-slab-film .g-slab-note{margin-top:calc(var(--u) * 6px)}

/* Act 02: the real Wasabe OS desktop, one layer per element. */
.g-os{width:calc(var(--u) * var(--w) * 1px);height:calc(var(--u) * var(--h) * 1px);--assembled:0}
.g-os>img{display:block;width:100%;height:100%;object-fit:cover}
.g-os-wall{border-radius:calc(var(--u) * 16px);overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 calc(var(--u) * 60px) calc(var(--u) * 160px) rgba(0,0,0,.6)}
.g-os-wall>img{filter:brightness(calc(.62 + var(--assembled) * .38))}
.g-os-files,.g-os-assistant{border-radius:calc(var(--u) * 12px);overflow:hidden;box-shadow:0 0 0 1px rgba(15,23,42,.1),0 calc(var(--u) * 24px) calc(var(--u) * 60px) calc(var(--u) * -12px) rgba(15,23,42,.34),0 calc(var(--u) * 8px) calc(var(--u) * 20px) calc(var(--u) * -8px) rgba(15,23,42,.22)}
.g-os-menu{box-shadow:0 1px 0 rgba(255,255,255,.55)}
.g-os-dock{border-radius:calc(var(--u) * 20px);overflow:hidden;box-shadow:0 calc(var(--u) * 18px) calc(var(--u) * 50px) calc(var(--u) * -12px) rgba(15,23,42,.3),inset 0 1px 1px rgba(255,255,255,.65)}
.g-os-tasks{box-sizing:border-box;padding:calc(var(--u) * 15px) calc(var(--u) * 16px);border-radius:calc(var(--u) * 24px);background:rgba(255,255,255,.86);box-shadow:0 calc(var(--u) * 12px) calc(var(--u) * 34px) rgba(15,23,42,.16);font-family:'Outfit',var(--sans);color:#1f2937}
.g-tasks-head{display:flex;align-items:center;gap:calc(var(--u) * 9px);font-size:calc(var(--u) * 14px);font-weight:700;color:#6d28d9}
.g-tasks-head i{width:calc(var(--u) * 20px);height:calc(var(--u) * 20px);border-radius:calc(var(--u) * 6px);background:#fff;box-shadow:0 0 0 .5px rgba(15,23,42,.12),0 1px 3px rgba(15,23,42,.12);position:relative}
.g-tasks-head i:after{content:'';position:absolute;inset:22%;border-radius:calc(var(--u) * 3px);background:linear-gradient(145deg,#A673EA,#6A28B8)}
.g-tasks-sub{margin:calc(var(--u) * 6px) 0 calc(var(--u) * 9px);font-size:calc(var(--u) * 11.5px);font-weight:600;color:#8b5cf6}
.g-tasks-row{display:flex;align-items:center;gap:calc(var(--u) * 9px);height:calc(var(--u) * 26px);font-size:calc(var(--u) * 12.5px);font-weight:600}
.g-tasks-row i{flex:none;width:calc(var(--u) * 8px);height:calc(var(--u) * 8px);border-radius:50%;background:#f59e0b}
.g-tasks-row span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-tasks-row b,.g-tasks-row em{font-style:normal;font-size:calc(var(--u) * 11px);font-weight:600;color:#ef4444}.g-tasks-row em{color:#94a3b8}
.g-os-label{position:absolute;left:0;top:calc(var(--u) * -44px);padding:calc(var(--u) * 7px) calc(var(--u) * 13px);border-radius:99px;background:rgba(10,20,12,.72);border:1px solid rgba(160,240,130,.45);font:600 calc(var(--u) * 17px)/1 'Outfit',var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#d8ffc2;white-space:nowrap;opacity:calc(1 - var(--assembled) * 1.6);box-shadow:0 0 calc(var(--u) * 20px) rgba(139,234,81,.25)}
.g-os-wall .g-os-label{top:calc(var(--u) * 24px);left:calc(var(--u) * 24px)}
.g-os-menu .g-os-label{left:auto;right:0}
.g-os-dock .g-os-label{top:auto;bottom:calc(var(--u) * -48px);left:50%;translate:-50% 0}
.guide.is-portrait .g-os-label{font-size:calc(var(--u) * 40px);top:calc(var(--u) * -70px)}
.guide.is-portrait .g-os-wall .g-os-label{top:calc(var(--u) * 30px)}
.guide.is-portrait .g-os-dock .g-os-label{bottom:calc(var(--u) * -74px)}
.guide.is-portrait .g-os-menu .g-os-label{display:none}

@media(max-width:720px){
  .guide.is-live .guide-bar .guide-channel,.guide.is-live .guide-timecode{display:none}
  .guide.is-live .guide-intro{bottom:clamp(120px,18svh,180px);padding:0 6%}
  .guide.is-live .guide-intro h2{font-size:clamp(40px,11.5vw,58px)}
  .guide.is-live .guide-intro p{font-size:14px}
  .guide.is-live .guide-caption{left:6%;right:6%;max-width:none;bottom:94px;gap:5px}
  .guide-caption-title{font-size:22px}.guide-caption-text{font-size:13px}
  .guide.is-live .guide-ticker{right:6%;top:62px;bottom:auto}
  .guide-ticker-year{font-size:34px}.guide-ticker-label{font-size:12px}
  .guide.is-live .guide-program{left:6%;right:6%;bottom:18px}
  .guide.is-live .guide-program ol{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .guide.is-live .guide-program a{padding-top:10px;min-height:44px;align-content:start}
  .guide.is-live .guide-program-t{display:none}
  .guide.is-live .guide-program-s{display:block;font:500 12px/1.2 var(--display);letter-spacing:-.01em;white-space:nowrap}
  .guide.is-live .guide-program-d{display:none}
  .guide.is-live .guide-skip{right:calc(6% + 14px);top:10px;min-height:44px}
  .guide.is-live .guide-outro-title{font-size:clamp(38px,11vw,56px)}
  .guide.is-live .guide-hud{padding:18px 6% 14px}
  /* 3D labels sized so they read at 9-11px on screen after the camera's projection. */
  .guide.is-portrait .g-card-top{font-size:calc(var(--u) * 19px)}
  .guide.is-portrait .g-card-cat{font-size:calc(var(--u) * 18px);letter-spacing:.12em}
  .guide.is-portrait .g-os-label{font-size:calc(var(--u) * 56px)}
  .guide.is-portrait .g-album-meta>span:nth-child(2){font-size:calc(var(--u) * 19px)}
  /* The film card's small print stays legible; the record's 3D label repeats the caption, so phones drop it. */
  .guide.is-portrait .g-slab-film .g-slab-note,.guide.is-portrait .g-frame i{font-size:calc(var(--u) * 16px)}
  .guide.is-portrait .g-album-meta{display:none}
  /* The camera pans across the parallel pair; the ticker above already reads 'The Forge Arena ↔ Equinox Games'. */
  .guide.is-portrait .g-parallel{display:none}
  /* In act 03 the film card carries the scene on its own; the caption names all three services. */
  .guide.is-portrait .g-slab:not(.g-slab-film){display:none}
  /* The programme spreads across the bar: wider, easier tap targets. */
  .guide.is-live .guide-program ol{flex:1}
}
/* The narrowest phones: act titles a size down so they clear the screen edges at the end of their hold. */
@media(max-width:360px){.guide.is-portrait .g-title{font-size:calc(var(--u) * 64px)}}
/* Phones and tablets: the stage fills the screen even with the browser bars retracted (100lvh), while the HUD
   keeps to the part that stays visible when they come back (100svh). */
@media(pointer:coarse){
  .guide-program a>i{transition:background-color .45s linear}
  .guide-caption-kicker,.g-kicker{transition:color .45s linear}
  .guide.is-portrait .g-slab:not(.g-slab-film){display:none}
  .guide.is-live .guide-stage{height:100lvh}
  .guide.is-live .guide-hud{bottom:calc(100lvh - 100svh)}
}
/* Touch tablets held upright: the programme stays one row of four, so the act captions sit clear above it. */
@media(min-width:721px) and (max-width:1050px) and (pointer:coarse){
  .guide.is-live .guide-program ol{flex:1 1 auto;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
}
/* Rotated phones: the phone HUD in one line along the bottom, so nothing prints over the programme. */
@media(max-width:950px) and (max-height:500px) and (pointer:coarse){
  .guide.is-live .guide-hud{padding:10px 4% 8px}
  .guide.is-live .guide-bar .guide-channel,.guide.is-live .guide-timecode{display:none}
  .guide.is-live .guide-skip{top:6px;right:4%;min-height:44px}
  .guide.is-live .guide-program{left:4%;right:4%;bottom:8px}
  .guide.is-live .guide-program ol{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:420px}
  .guide.is-live .guide-program a{padding:8px 0 0;min-height:44px;align-content:start;gap:2px}
  .guide.is-live .guide-program-t,.guide.is-live .guide-program-d{display:none}
  .guide.is-live .guide-program-s{display:block;font:500 12px/1.2 var(--display);white-space:nowrap}
  .guide.is-live .guide-caption{display:none}
  .guide.is-live .guide-ticker{top:auto;bottom:12px;right:4%;grid-auto-flow:column;align-items:baseline;gap:10px}
  .guide.is-live .guide-ticker-year{font-size:24px}
  .guide.is-live .guide-ticker-n{display:none}
  .guide.is-live .guide-intro{bottom:64px;padding:0 4%}
  .guide.is-live .guide-intro .eyebrow,.guide.is-live .guide-intro p{display:none}
  .guide.is-live .guide-intro h2{font-size:clamp(30px,9vh,40px);margin:0}
  .guide.is-live .guide-outro{top:auto;bottom:64px;translate:none;gap:10px}
  .guide.is-live .guide-outro-title{font-size:clamp(26px,8vh,36px)}
}
@media(max-height:700px) and (min-width:721px){.guide.is-live .guide-intro p{display:none}.guide.is-live .guide-caption-text{display:none}}

.guide.is-live .guide-flash.is-glass{background:radial-gradient(ellipse 75% 65% at 50% 45%,rgba(236,241,255,.95),rgba(123,146,255,.45) 55%,rgba(123,146,255,0) 85%)}
.guide.is-live:not(.is-open) .g-eye{animation:none}
/* Far off-screen the broadcast's looping animations (equaliser, blinks) stop restyling every frame. */
.guide.is-offstage *,.guide.is-offstage *::before,.guide.is-offstage *::after{animation-play-state:paused!important}


/* Low-power (no WebGL, CPU compositing): the same broadcast without the effects that repaint or blend the whole
   screen every frame. Words and labels that fade get their own layers so fading never re-rasters a title. */
.low-power .guide.is-live .guide-screen:after{background:linear-gradient(to top,rgba(4,6,14,.78),transparent 30%)}
.low-power .g-glow{display:none}
.low-power .g-card,.low-power .g-slab,.low-power .g-os-wall,.low-power .g-os-files,.low-power .g-os-assistant,.low-power .g-os-dock,.low-power .g-sleeve,.low-power .g-disc,.low-power .g-os-tasks{box-shadow:none}
.low-power .g-card:before{box-shadow:none}
.low-power .g-word,.low-power .g-kicker,.low-power .g-os-label{will-change:transform,opacity}
.low-power .g-os-wall>img{filter:none}
.low-power .g-stat{text-shadow:none}
.guide.is-live .guide-flash{will-change:opacity}
.low-power .guide.is-live .guide-field{will-change:transform}
.guide.is-live.is-waiting .guide-stage{visibility:hidden}