@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Michroma&display=swap');
/* Canvas 1920x1080. Action-safe ≈ 67x38px (93%), title-safe ≈ 96x54px (90%). All text sits inside action-safe;
   critical text (names, headlines, prices) inside title-safe horizontally. Backgrounds/video may bleed. */
:root{--acc:#97efca;--line:#2a3142;--dim:#8f99ae;--panel:#0d1018;--red:#ff3b3b;--ax:67px;--ay:38px;--tx:96px;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:1920px;height:1080px;overflow:hidden;background:#000;color:#e6ecf8;font-family:Michroma,Orbitron,sans-serif;letter-spacing:.14em;text-transform:uppercase}
body.obs{background:transparent}
[data-el]{transition:opacity .45s var(--ease),transform .45s var(--ease),clip-path .6s var(--ease)}
.off{opacity:0!important;pointer-events:none}
/* top bar */
.topbar{position:absolute;top:22px;left:var(--ax);right:var(--ax);height:34px;display:flex;align-items:center;font-size:13px;color:var(--acc);gap:36px}
.topbar.off{transform:translateY(-20px)}
.topbar .r{margin-left:auto;display:flex;gap:28px;align-items:center}
.dot{width:10px;height:10px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc);animation:bl 2s infinite}@keyframes bl{50%{opacity:.3}}
#clock{font-family:Orbitron;font-weight:700;font-size:18px;color:#fff;letter-spacing:.1em}
#ros{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:14px;align-items:center;font-size:13px;color:#d6dbe0;white-space:nowrap}
#ros b{font-family:Orbitron;color:#fff;font-size:16px}#ros.over b{color:var(--red)}#ros i{width:8px;height:8px;border-radius:50%;background:var(--red);display:inline-block}
/* cameras */
.cams{position:absolute;top:62px;left:48px;right:48px;height:556px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cam{position:relative;border:2px solid #3a4152;overflow:hidden}.ph .cam{background:linear-gradient(160deg,#4a4f58,#2c3038)}
.ph .cam::before{content:'CAMERA SOURCE';position:absolute;top:42%;width:100%;text-align:center;color:#ffffff55;font-size:18px}
.cam .lt{position:absolute;left:0;right:0;bottom:0;padding:40px 22px 18px;background:linear-gradient(transparent,#000d 40%);display:flex;align-items:flex-end;gap:14px;transition:transform .5s var(--ease),opacity .5s}
.cams.off{opacity:1!important}.cams.off .lt{transform:translateY(100%);opacity:0}
.cam .who{flex:1;min-width:0}
.cam .nm{font-family:Orbitron;font-weight:700;font-size:26px;letter-spacing:.14em;color:var(--acc);white-space:nowrap;overflow:hidden;display:flex;align-items:center;gap:12px}
.cam .nm::before{content:'';flex:none;width:10px;height:10px;border-radius:50%;background:var(--acc)}
.cam .ti{font-size:14px;color:#d6dbe0;margin:8px 0 0 22px;white-space:nowrap;overflow:hidden;letter-spacing:.1em}
.cam .badge{flex:none;border:1px solid #8a93a6;padding:8px 12px;font-size:13px;background:#000b}
/* middle band */
.mid{position:absolute;top:626px;left:0;right:0;height:140px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 var(--tx);gap:40px}
.obs .mid{background:#000e}
.logo h1{font-family:Orbitron;font-weight:900;font-size:60px;letter-spacing:.55em;color:var(--acc)}.logo p{font-size:12px;color:var(--dim);margin-top:10px;letter-spacing:.12em}
.events{border:1px solid #3a4152;border-radius:6px;padding:14px 22px;display:flex;gap:30px;font-size:14px;line-height:1.7;margin-left:auto}
.events h3{font-family:Orbitron;font-size:15px;color:var(--acc);margin-bottom:4px}.events .up h3{color:#7fcfae}
.live{margin-left:auto;display:flex;align-items:center;gap:28px}.events+.live{margin-left:40px}
.live .t{text-align:center;font-size:15px;line-height:1.9;color:var(--acc)}.live .t div:last-child{color:#d6dbe0;font-size:13px}
.live .btn{font-size:14px;background:var(--acc);color:#000;padding:14px 18px;letter-spacing:.14em;display:flex;align-items:center;gap:10px}
.live .btn::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--red);animation:bl 1.2s infinite}
/* featured X post: slides over the middle band (never collides with breaking banner or cam lower-thirds) */
.feat{position:absolute;top:634px;left:var(--tx);right:var(--tx);height:124px;display:flex;background:#070a12f2;border:1px solid var(--acc);box-shadow:0 0 30px #97efca33;
 clip-path:inset(0 100% 0 0);transition:clip-path .7s var(--ease);z-index:5}
.feat.on{clip-path:inset(0 0 0 0)}
.feat .lb{flex:none;width:170px;background:var(--acc);color:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:15px}
.feat .lb span{font-family:Orbitron;font-weight:900;font-size:30px;letter-spacing:0;text-transform:none}
.feat .tx{flex:1;min-width:0;padding:14px 28px;display:flex;flex-direction:column;justify-content:center}
.feat .u{color:var(--acc);font-size:15px}.feat .b{font-family:Orbitron;font-weight:500;margin-top:8px;letter-spacing:.03em;text-transform:none;line-height:1.3;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:26px}
/* breaking */
.brk{position:absolute;top:784px;left:var(--tx);right:var(--tx);height:84px;display:flex;border:1px solid var(--line);clip-path:inset(0 0 0 0)}
.brk.off{clip-path:inset(0 100% 0 0);opacity:1!important}
.brk .lb{flex:none;width:170px;background:var(--acc);color:#000;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}
.brk .tx{background:var(--panel);flex:1;min-width:0;padding:12px 26px;display:flex;flex-direction:column;justify-content:center}
.brk .h{font-family:Orbitron;font-weight:700;font-size:28px;color:var(--acc);letter-spacing:.06em;white-space:nowrap;overflow:hidden}
.brk .s{font-size:15px;margin-top:8px;white-space:nowrap;overflow:hidden;letter-spacing:.08em}
.brk.flash{border-color:var(--red);box-shadow:0 0 28px #ff3b3b66}.brk.flash .lb{background:var(--red);color:#fff;animation:fl .9s steps(1) infinite}
.brk.flash .h{color:#fff}@keyframes fl{50%{background:#fff;color:var(--red)}}
.brk.flash .tx{background:linear-gradient(90deg,#2a0b0e,var(--panel) 60%)}
/* markets */
.mkts{position:absolute;top:880px;left:var(--tx);right:var(--tx);height:66px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mkts.off{transform:translateY(20px)}
.mk{background:var(--panel);border-left:3px solid var(--acc);display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:16px;position:relative}
.mk .p{text-align:right;font-family:Orbitron;font-size:21px;font-weight:700}.mk .c{font-size:14px;margin-top:4px}.up{color:#97efca}.dn{color:#ff6b6b}
.mk .smp{position:absolute;left:20px;bottom:5px;font-size:10px;color:#6b7488}
/* tickers: bands bleed edge to edge, text clears the action-safe bottom (ends at y=1040) */
.tk{position:absolute;left:0;right:0;height:38px;display:flex;align-items:center;overflow:hidden;font-size:15px;background:#06080c;border-top:1px solid #151a24}
.tk.off{transform:translateY(12px)}
.tk .lab{flex:none;width:250px;height:100%;display:flex;align-items:center;padding-left:var(--ax);background:#11151f;z-index:1;color:#d6dbe0;font-size:13px}
.tk.m .lab{background:#0c1a14;color:var(--acc)}
.tk .run{display:flex;gap:70px;white-space:nowrap;animation:sc 60s linear infinite;padding-left:40px}.tk .run span::before{content:'● ';color:var(--acc);font-size:9px}.tk.m .run span::before{content:''}
@keyframes sc{to{transform:translateX(-50%)}}
#t1{top:962px}#t2{top:1002px}
.base{position:absolute;left:0;right:0;top:1040px;bottom:0;background:#000}.obs .base{display:none}
/* safe-area guides (?guides) */
.guides::after{content:'';position:fixed;inset:var(--ay) var(--ax);border:2px dashed #0f0a;pointer-events:none;z-index:99}
.guides::before{content:'';position:fixed;inset:54px var(--tx);border:2px dashed #f0fa;pointer-events:none;z-index:99}
/* refinements */
.cam .ti{display:flex;flex-wrap:wrap;gap:2px 14px;white-space:normal}.cam .ti span{white-space:nowrap}.cam .ti .h{color:var(--acc)}
.logo{flex:none}.logo h1{font-size:54px;letter-spacing:.5em}.logo p{font-size:11px;white-space:nowrap}
.events{font-size:13px;white-space:nowrap;gap:26px;padding:12px 20px}.events h3{font-size:14px}
.live .t{white-space:nowrap}.live .btn{white-space:nowrap}
.tk .lab{border-right:1px solid #2a3142;box-shadow:12px 0 16px #000}
.mid{gap:28px}.events{letter-spacing:.08em;font-size:13px}.events+.live{margin-left:28px}.live{gap:18px}.live .t{font-size:13px;letter-spacing:.12em}.live .t div:last-child{font-size:12px}
.logo h1{font-size:52px;letter-spacing:.46em}.logo p{font-size:10px;letter-spacing:.1em}
.feat{background:#070a12}.featuring .mid>*{opacity:0;transition:opacity .4s}.mid>*{transition:opacity .4s}
.cam .nm{display:block;white-space:nowrap}.cam .nm::before{display:inline-block;vertical-align:middle;margin:-4px 12px 0 0}
/* demo camera fill: soft moving light + grain + vignette, looks like a dim studio feed */
.democam .cam{background:#101216}
.democam .cam::before{content:''!important;position:absolute;inset:-20%;top:-20%;width:auto;background:
 radial-gradient(40% 50% at 30% 40%,rgba(151,239,202,.22),transparent 70%),radial-gradient(35% 45% at 70% 65%,rgba(255,190,140,.14),transparent 70%),
 radial-gradient(30% 60% at 50% 95%,rgba(0,0,0,.9),transparent 70%);animation:drift 14s ease-in-out infinite alternate}
.democam .cam:nth-child(2)::before{animation-duration:18s;animation-delay:-6s;filter:hue-rotate(40deg)}.democam .cam:nth-child(3)::before{animation-duration:16s;animation-delay:-3s;filter:hue-rotate(-30deg)}
.democam .cam::after{content:'';position:absolute;inset:0;pointer-events:none;background:
 radial-gradient(ellipse 22% 30% at 50% 46%,rgba(255,255,255,.07),transparent 70%),radial-gradient(ellipse 34% 26% at 50% 88%,rgba(255,255,255,.05),transparent 70%),
 repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.55));animation:grain .5s steps(2) infinite}
.democam .cam.feed::after{background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.6))}
.democam .cam .lt{z-index:2}.cam video.webcam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);z-index:1}
@keyframes drift{0%{transform:translate(-4%,-2%) scale(1)}100%{transform:translate(5%,4%) scale(1.08)}}
@keyframes grain{50%{opacity:.85}}
/* smooth content swaps + layout switch fades */
.x{transition:opacity .16s ease}.x.xf{opacity:0!important}
body{animation:layin .35s ease-out}@keyframes layin{from{opacity:0}}
body.leaving{opacity:0;transition:opacity .28s ease-in}
[data-el]{transition:opacity .35s var(--ease),transform .35s var(--ease),clip-path .5s var(--ease)}
.mk .p .v{display:inline-block}

/* studio guest preview (VDO.Ninja view link in a camera slot) */
.cam iframe.gprev{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1;background:#000}.cam .lt{z-index:2}

.feedoff{color:#ff9f43!important;font-weight:700;letter-spacing:.08em}

/* sponsor logos */
.tk .run span.spl{display:inline-flex;align-items:center;height:100%}.tk .run span.spl::before{content:''!important}.tk .run span.spl img{height:30px;max-width:180px;object-fit:contain;display:block}
/* studio "Use webcam" error (off-air helper, shown in CAM_01 only in the studio/browser preview, never in OBS) */
#camerr{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:28px;background:#16181d;color:#e9edf5;font:500 14px/1.45 'JetBrains Mono',monospace;letter-spacing:.02em;text-transform:none;text-align:center}
#camerr b{font:400 18px 'Future Earth',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#ff4d4d}