:root{color-scheme:dark;--void:#050d10;--glass:#0a1620;--ink:#e7eaef;--teal:#57d6c1;--amber:#ffc35a;--muted:#a3adba;--edge:#274747;--mono:'IBM Plex Mono',ui-monospace,monospace;--dot:'Doto',var(--mono)}

*{box-sizing:border-box}
html{min-height:100%;background:var(--void)}
body{margin:0;color:var(--ink);font:400 12px/1.65 var(--mono);background:radial-gradient(ellipse at 48% 30%,#10272b66,transparent 64%),linear-gradient(90deg,#071115,#050d10);min-height:100vh}
a{color:inherit;text-decoration:none}
button{font:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:6px}
[hidden]{display:none!important}
.shell{width:min(1560px,100%);margin:auto;padding:32px 44px 24px}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:3px 0 25px}
.brand{display:flex;align-items:center;gap:15px}
.brand-cube{width:37px;height:43px;stroke:var(--teal);stroke-width:1.3}
.brand strong{font:900 26px/1 var(--dot);letter-spacing:1px;white-space:nowrap}
.brand small{display:block;color:var(--teal);font-size:9px;letter-spacing:2.3px;margin-top:8px}
.clock{text-align:right}
.clock>span{display:block;color:var(--muted);font-size:8px;letter-spacing:1.3px}
.clock>span span{color:var(--teal);margin-left:5px}
.clock time{display:block;font:900 30px/1.1 var(--dot);letter-spacing:2px;margin:5px 0}
.clock small{font-size:8px;color:var(--muted)}
.build-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:39px;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);font-size:9px;color:var(--muted)}
.build-strip>span{display:flex;align-items:center;gap:9px}
.build-strip i{width:4px;height:4px;background:var(--teal)}
.build-strip b{font-size:8px;font-weight:500;color:var(--amber);padding-left:9px;border-left:1px solid var(--edge)}
#signal{font-size:8px;color:#b0c3c4}
main{display:block;padding:34px 0 30px}
.theatre{display:flex;flex-direction:column;min-width:0;position:relative;border:1px solid #466e6c;background:#071418;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.theatre:before,.theatre:after{content:'';position:absolute;z-index:3;pointer-events:none;width:33px;height:3px;background:var(--teal)}
.theatre:before{top:0;left:0}
.theatre:after{bottom:0;right:0}
.stage-top,.stage-bottom{height:39px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px;color:var(--muted);font-size:8px;letter-spacing:1.1px;background:#09171b}
.stage-top{border-bottom:1px solid #2b4646}
.stage-top>span:first-child{color:var(--teal)}
#expand{color:var(--ink);background:none;border:0;padding:4px;cursor:pointer;font-size:9px;margin-left:auto}
#expand span{font-size:14px;vertical-align:middle}
.stage{flex:1;position:relative;min-height:510px;aspect-ratio:1.7;overflow:hidden;background:#050e12}
.standby{position:absolute;inset:0;isolation:isolate;background:radial-gradient(ellipse at 84% 52%,#163b3d55,transparent 65%)}
.standby:after{content:'';pointer-events:none;position:absolute;inset:0;z-index:4;background:repeating-linear-gradient(0deg,#00161800 0,#00161800 3px,#02080b60 4px);opacity:.38}
.stage-grid{position:absolute;inset:0;background-image:radial-gradient(#52767755 .6px,transparent .7px);background-size:6px 6px;opacity:.26;mask-image:linear-gradient(to right,transparent,#000)}
.island-art{position:absolute;width:75%;height:94%;object-fit:contain;right:-3%;top:4%;opacity:.78;pointer-events:none}
.standby-copy{position:relative;padding:64px 38px;z-index:2;max-width:510px}
.small-readout{display:flex;align-items:center;gap:10px;color:var(--amber);font-size:8px;letter-spacing:1.8px}
.crosshair{font-size:18px;font-weight:400;line-height:1}
h1{font:900 clamp(28px,3.6vw,56px)/1.14 var(--dot);letter-spacing:-.8px;margin:29px 0 21px;max-width:460px;color:#ecf7f4;text-shadow:0 0 24px #57d6c116}
#detail{max-width:33ch;font-size:11px;line-height:1.9;color:#b9cece;margin:0}
.standby-note{display:flex;align-items:center;gap:15px;margin-top:34px;font-size:9px;line-height:1.7;color:var(--teal)}
.bracket{font:900 36px/1 var(--dot);color:#3a7772}
.stage-caption{position:absolute;bottom:18px;left:38px;right:25px;display:flex;justify-content:space-between;gap:14px;color:#86aaa7;font-size:7px;letter-spacing:1px}
.stage-caption span:last-child{color:#658982}
.stage-bottom{border-top:1px solid #2b4646;letter-spacing:.6px}
.stage-bottom>span:first-child{display:flex;align-items:center;gap:8px}
.stage-bottom b{font-size:8px;font-weight:400;color:#bdcecf}
.tiny-square{width:4px;height:4px;border:1px solid var(--teal)}
#game{position:absolute;inset:0;width:100%;height:100%;border:0}
footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:18px;border-top:1px solid var(--edge);font-size:8px;color:var(--muted)}
.footer-tag{font-size:7px;letter-spacing:1px}
.footer-tag b{font-weight:500;color:var(--teal);margin-left:7px}
footer nav{display:flex;gap:25px}
footer a{font-size:9px;color:#c7dbd8;padding:5px 0;border-bottom:1px solid #42615d}
footer a:hover{color:var(--teal);border-color:var(--teal)}
footer a span{margin-left:5px;color:var(--teal)}
.footer-end{font-size:7px;letter-spacing:.8px;color:#78948e}
.no-script{margin:20px auto;padding:20px;max-width:600px;color:var(--amber)}
.stage:fullscreen{aspect-ratio:auto;min-height:100vh;width:100vw;background:#050e12}
@keyframes signal{50%{opacity:.5}
}

@media(min-width:1450px){.stage{min-height:570px}
.standby-copy{padding-top:80px}
}

@media(max-width:1100px){.shell{padding:25px 25px 22px}
.masthead{gap:20px}
main{display:block}
.stage{min-height:490px}
.standby-copy{padding:58px 28px}
h1{font-size:42px}
.stage-caption{left:28px;right:20px}
.island-art{right:-5%;width:80%;opacity:.62}
.footer-end{display:none}
.build-strip{font-size:8px}
.build-strip b{font-size:7px}
#signal{display:none}
}

@media(max-width:800px){.shell{padding:22px}
.brand strong{font-size:23px}
.brand-cube{width:30px;height:37px}
.brand{gap:10px}
.brand small{font-size:8px}
.clock time{font-size:24px}
.clock>span{font-size:7px}
main{grid-template-columns:1fr;gap:26px;padding-top:23px}
.stage{min-height:440px;aspect-ratio:1.65}
.standby-copy{padding:50px 32px}
.island-art{width:75%;right:-9%;opacity:.69}
.stage-caption{left:32px}
.footer-tag{max-width:180px;line-height:2}
.footer-tag b{margin-left:0;display:block}
footer nav{gap:20px}
}

@media(max-width:520px){.shell{padding:18px 15px 23px}
.masthead{flex-wrap:wrap;gap:18px;padding-bottom:19px}
.brand{gap:10px}
.brand strong{font-size:21px}
.brand small{font-size:7px;letter-spacing:1.8px}
.clock{margin-left:auto}
.clock time{font-size:23px;letter-spacing:1px}
.clock small{font-size:7px}
.clock>span{font-size:6px;letter-spacing:.7px}
.build-strip{align-items:flex-start;flex-direction:column;justify-content:center;gap:4px;padding:10px 0;font-size:7px}
.build-strip>span{gap:7px}
.build-strip b{font-size:6px}
main{padding:20px 0 24px}
.stage-top,.stage-bottom{padding:0 12px;font-size:7px;height:34px;letter-spacing:.5px}
.stage{min-height:485px;aspect-ratio:auto}
.standby-copy{padding:38px 21px}
.small-readout{font-size:6.5px;letter-spacing:1.3px;gap:7px}
h1{font-size:37px;line-height:1.17;letter-spacing:-1px;margin:24px 0 20px}
#detail{font-size:9px;max-width:31ch}
.standby-note{font-size:8px;gap:12px;margin-top:25px}
.island-art{width:105%;height:68%;right:-35%;top:33%;opacity:.47}
.stage-caption{font-size:5px;letter-spacing:.6px;left:21px;right:16px;bottom:15px}
.stage-bottom b,#watch-mode{font-size:6px}
.footer-tag{font-size:6px}
footer nav{gap:15px}
footer a{font-size:8px}
.footer-tag b{letter-spacing:.5px}
footer{gap:15px}
.bracket{font-size:30px}
}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}
}


/* Public company identity and legal links share the quiet lower HUD rail. */
.brand-mark{width:42px;height:42px;flex:none}
footer{display:block}
.footer-main,.footer-legal{display:flex;align-items:center;gap:25px;justify-content:space-between}
.footer-brand{font:500 14px/1 var(--mono);letter-spacing:1.2px;color:var(--ink)}
.footer-main .footer-tag{margin-right:auto}
.footer-main nav{margin-left:auto}
.footer-legal{border-top:1px solid #1c3436;margin-top:20px;padding-top:13px;gap:20px}
.footer-legal p{font-size:7px;line-height:1.9;color:#99abaa;margin:0}
.footer-legal nav{gap:18px}
.footer-legal a{font-size:8px;border:0;color:#b0c6c1}
@media(max-width:800px){.footer-main{gap:18px}
.footer-main .footer-tag{max-width:140px}
.footer-legal p{font-size:7px}
.footer-legal{align-items:flex-start}
.brand-mark{width:37px;height:37px}
}
@media(max-width:520px){.brand-mark{width:33px;height:33px}
.footer-main{flex-wrap:wrap;gap:15px}
.footer-main .footer-tag{margin:0 0 0 auto;max-width:none;text-align:right}
.footer-main nav{width:100%;margin:0;justify-content:space-between}
.footer-legal{display:block;margin-top:18px}
.footer-legal p{font-size:6px}
.footer-legal nav{margin-top:9px;gap:23px}
.footer-legal a{font-size:7px}
}


.brand strong{font:500 15px/1 var(--mono);letter-spacing:1.5px}.channel-title{font:900 30px/1 var(--dot);letter-spacing:1px;white-space:nowrap}.masthead{gap:25px}.brand{gap:10px}@media(max-width:800px){.brand strong{font-size:12px}.channel-title{font-size:25px}.masthead{gap:16px}}@media(max-width:520px){.brand strong{font-size:11px}.channel-title{order:3;width:100%;text-align:center;font-size:26px;margin:5px 0 2px}.masthead{gap:15px}.clock{margin-left:auto}}

.footer-main nav a.play-link{display:inline-block;padding:12px 23px;font:500 12px/1.4 var(--mono);color:#d7fff2;border:1px solid #66bda8;background:#17413c70;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px))}.footer-main nav a.play-link:hover{background:#235f52;color:#fff;border-color:#9befd6}.brand small{font-size:7px;letter-spacing:1.2px;margin-top:8px}.legal-shell{max-width:760px;margin:0 auto;padding:35px 24px}.legal-shell header{display:flex;align-items:center;justify-content:space-between;padding-bottom:22px;border-bottom:1px solid var(--edge)}.legal-shell h1{font-size:36px;margin:36px 0 10px}.legal-shell h2{font:500 16px/1.5 var(--mono);margin:30px 0 10px}.legal-shell main{display:block;padding:0}.legal-shell p{font-size:13px;line-height:1.85;color:#bfcecf;margin:12px 0}.legal-shell .updated{font-size:10px;color:var(--muted)}.legal-shell main a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}.legal-shell footer{margin-top:35px}.legal-shell footer nav{gap:20px}.legal-shell footer p{font-size:9px;margin:0}.legal-shell .policy-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px}@media(max-width:520px){.footer-main nav a.play-link{width:100%;text-align:center;font-size:12px;padding:14px 20px}.brand small{font-size:6px;letter-spacing:.7px}.legal-shell h1{font-size:30px}.legal-shell p{font-size:12px}.legal-shell header{font-size:10px}}

/* Brand, channel and programme are separate broadcast identities. */
.masthead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}.brand{justify-self:start;display:flex;align-items:center;gap:12px}.brand-mark{width:39px;height:39px}.brand strong{display:block;font:500 15px/1.2 var(--mono);letter-spacing:1.2px}.brand small{display:block;font:500 8px/1.2 var(--mono);letter-spacing:2px;color:var(--amber);margin-top:6px}.channel-title{justify-self:center}.clock{justify-self:end}.build-strip b{border:0;padding-left:0;color:var(--amber)}@media(max-width:800px){.masthead{gap:18px}.brand strong{font-size:12px}.brand small{font-size:7px;letter-spacing:1.6px}.brand-mark{width:35px;height:35px}.brand{gap:10px}.channel-title{font-size:25px}}@media(max-width:520px){.masthead{grid-template-columns:1fr auto;gap:18px}.brand strong{font-size:12px;letter-spacing:1px}.brand small{font-size:7px;letter-spacing:1.8px}.brand-mark{width:34px;height:34px}.channel-title{grid-column:1/-1;grid-row:2;order:initial;font-size:28px;margin:2px 0 0;width:auto}.clock{grid-column:2;grid-row:1}.clock time{font-size:23px}.build-strip{flex-direction:row;align-items:center;justify-content:space-between;padding:10px 0}.build-strip b{font-size:7px}.build-strip>span{font-size:8px}}
/* Programme controls remain available in standby and fullscreen. */
.language{display:flex;justify-content:flex-end;gap:0;margin-top:9px}.language button{padding:4px 8px;border:1px solid #355451;background:transparent;color:var(--muted);font:500 9px/1 var(--mono);cursor:pointer;min-width:30px;min-height:25px}.language button+button{border-left:0}.language button[aria-pressed='true']{background:#14302d;color:#bcf5dd;border-color:#5b8f80}.clock #uk-label{margin-left:0;color:var(--muted)}#expand{margin-left:0;display:grid;place-items:center;width:30px;height:30px;border:1px solid transparent;padding:5px;flex:none}#expand:hover{border-color:#51796d;color:var(--teal)}#expand svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.4;fill:none}.stage-top #round-label{margin-left:auto}.host-card{display:flex;align-items:center;gap:10px}.host-card img{width:42px;height:42px;object-fit:cover;object-position:50% 35%;border:1px solid #527c73;clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px))}.host-card span{display:block}.host-card strong{display:block;color:#d3eae1;font-size:10px;font-weight:500}.host-card small{display:block;color:#89afa1;font-size:7px;margin-top:4px}.stage-bottom{height:auto;min-height:62px;padding-top:8px;padding-bottom:8px}.stage-bottom:has(.host-card[hidden]){min-height:39px}.theatre:fullscreen{width:100vw;height:100vh;max-width:none;border:0;clip-path:none}.theatre:fullscreen .stage{min-height:0;aspect-ratio:auto}.theatre:fullscreen .standby-copy{padding-top:8vh}html:lang(zh-CN) h1{font-family:var(--mono);font-size:clamp(30px,3.4vw,48px);font-weight:500;line-height:1.4;letter-spacing:2px}html:lang(zh-CN) .channel-title{font-family:var(--mono);font-size:27px;letter-spacing:5px}html:lang(zh-CN) .standby-copy{max-width:560px}html:lang(zh-CN) #detail{font-size:12px;line-height:2}@media(max-width:520px){.host-card{gap:7px}.host-card img{width:34px;height:34px}.host-card strong{font-size:8px}.host-card small{font-size:6px}.stage-bottom{gap:7px;min-height:55px}.stage-bottom:has(.host-card[hidden]){min-height:34px}.language{margin-top:7px}.language button{font-size:8px;min-height:24px}.clock small{font-size:6px}.stage-top #round-label{font-size:6px}.stage-top{letter-spacing:.15px}html:lang(zh-CN) .stage-top{font-size:6px}html:lang(zh-CN) h1{font-size:31px;line-height:1.55}html:lang(zh-CN) #detail{font-size:10px}.theatre:fullscreen .stage{min-height:0}}
