:root{
  --bg:#050a17; --bg2:#0a1328; --panel:#0d1730; --line:rgba(255,255,255,.08);
  --text:#eef2fb; --muted:#93a0bd; --red:#e11d2e; --red2:#b3121f; --gold:#d6a84a; --cyan:#22d3ee;
  --font:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
}
html[lang=ar]{ --font:'Tajawal','Inter',system-ui,sans-serif; }
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}
body{background:radial-gradient(1200px 600px at 50% -200px,#14285a 0%,transparent 60%),var(--bg);min-height:100vh;overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;padding:12px clamp(16px,3vw,40px);
  background:rgba(5,10,23,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#ff3446,var(--red2));
  font-weight:900;font-size:15px;letter-spacing:-.5px;box-shadow:0 6px 20px rgba(225,29,46,.45);font-family:'Inter',sans-serif;color:#fff}
.brand-mark.sm{width:28px;height:28px;font-size:11px;border-radius:7px}
.brand-text{display:flex;align-items:baseline;gap:6px;font-family:'Inter',sans-serif}
.brand-text b{font-weight:900;letter-spacing:.5px;font-size:18px}
.brand-text i{font-style:normal;font-weight:800;font-size:12px;color:#fff;background:var(--red);padding:2px 6px;border-radius:4px;letter-spacing:1px}
.brand-tag{font-size:11px;color:var(--cyan);border:1px solid rgba(34,211,238,.35);padding:3px 8px;border-radius:99px;letter-spacing:.5px;text-transform:uppercase}
.sections{display:flex;gap:4px;overflow-x:auto;flex:1;scrollbar-width:none}
.sections::-webkit-scrollbar{display:none}
.sec{background:none;border:0;padding:8px 14px;border-radius:8px;color:var(--muted);font-weight:600;font-size:14px;white-space:nowrap;position:relative}
.sec.active{color:#fff;background:rgba(255,255,255,.06)}
.sec.active::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;background:var(--red);border-radius:2px}
.sec.soon{opacity:.45;cursor:default}
.lang-switch{display:flex;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:99px;padding:3px}
.lang-switch button{background:none;border:0;padding:6px 14px;border-radius:99px;font-weight:700;font-size:13px;color:var(--muted)}
.lang-switch button.active{background:#fff;color:#0a1328}

.wrap{max-width:1440px;margin:0 auto;padding:20px clamp(12px,2.5vw,32px) 40px}

/* ---------- studio ---------- */
.studio{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#020611;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);isolation:isolate;container-type:inline-size}
.studio:fullscreen{border-radius:0;width:100vw;height:100vh;aspect-ratio:auto}
.cam{position:absolute;inset:0;transition:transform 1.6s cubic-bezier(.65,0,.25,1);transform-origin:50% 60%}
.cam.focus-f{transform:scale(1.18) translateX(9%)}
html[dir=rtl] .cam.focus-f{transform:scale(1.18) translateX(9%)}
.cam.focus-m{transform:scale(1.18) translateX(-9%)}
.cam.wide{transform:scale(1)}

.wall{position:absolute;left:0;right:0;top:0;height:78%;overflow:hidden}
.skyline{position:absolute;inset:0;width:100%;height:100%;filter:saturate(1.15)}
.wall-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.55) 1px,transparent 1px);background-size:calc(100%/8) calc(100%/4)}
.wall-glow{position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 40%,transparent 30%,rgba(2,6,17,.85) 100%),linear-gradient(180deg,transparent 60%,rgba(2,6,17,.9))}
.wall-title{position:absolute;top:6%;left:0;right:0;text-align:center;font-weight:900;letter-spacing:.35em;font-size:clamp(14px,3.2cqw,46px);
  color:rgba(255,255,255,.1);font-family:'Inter',sans-serif;line-height:1}
.wall-title small{display:block;font-size:.32em;letter-spacing:.6em;margin-top:.6em;color:rgba(214,168,74,.35)}
html[lang=ar] .wall-title{letter-spacing:0;font-family:'Tajawal',sans-serif}
.beam{position:absolute;top:-20%;width:18%;height:140%;background:linear-gradient(180deg,rgba(120,200,255,.18),transparent 70%);filter:blur(8px);transform-origin:top center;mix-blend-mode:screen;animation:sweep 9s ease-in-out infinite}
.beam.b1{left:8%;transform:rotate(18deg)} .beam.b2{left:46%;animation-delay:-3s;opacity:.6} .beam.b3{right:6%;transform:rotate(-18deg);animation-delay:-6s}
@keyframes sweep{0%,100%{opacity:.25}50%{opacity:.75}}

.center-screen{position:absolute;left:50%;top:14%;width:28%;transform:translateX(-50%);aspect-ratio:16/10;z-index:2}
.cs-frame{position:absolute;inset:0;border-radius:6px;overflow:hidden;background:#071229;border:2px solid rgba(34,211,238,.45);
  box-shadow:0 0 40px rgba(34,211,238,.25),inset 0 0 30px rgba(0,0,0,.6)}
.cs-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity .8s, transform 8s linear;transform:scale(1.02)}
.cs-img.kb{transform:scale(1.12)}
.cs-img .ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:8%;font-weight:800;font-size:clamp(9px,1.25cqw,18px);line-height:1.25}
.cs-tag{position:absolute;left:0;bottom:0;background:var(--red);font-weight:800;font-size:clamp(7px,.85cqw,12px);padding:.35em .8em;letter-spacing:.06em;text-transform:uppercase}
html[dir=rtl] .cs-tag{left:auto;right:0}
.cs-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);pointer-events:none}

.anchors{position:absolute;left:0;right:0;bottom:22%;height:62%;z-index:3}
.anchor{position:absolute;bottom:0;width:31%;height:100%;margin:0}
#anchor-f{left:9%} #anchor-m{right:9%}
.anchor-art{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center}
.anchor-svg{height:100%;width:auto;overflow:visible;filter:drop-shadow(0 20px 30px rgba(0,0,0,.55))}
.anchor .torso{transform-box:view-box;transform-origin:200px 470px;animation:breathe 4.5s ease-in-out infinite}
.anchor .head{transform-box:view-box;transform-origin:200px 250px;animation:sway 7s ease-in-out infinite}
#anchor-m .head{animation-delay:-2.5s;animation-duration:8s}
.anchor.speaking .head{animation:talk 2.6s ease-in-out infinite}
.anchor.speaking.alt .head{animation:talk2 3.1s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.008,1.012)}}
@keyframes sway{0%,100%{transform:rotate(-.8deg)}50%{transform:rotate(.9deg)}}
@keyframes talk{0%{transform:rotate(0)}20%{transform:rotate(1.6deg) translateY(1px)}45%{transform:rotate(-.6deg) translateY(-1px)}70%{transform:rotate(1deg) translateY(2px)}100%{transform:rotate(0)}}
@keyframes talk2{0%{transform:rotate(0)}30%{transform:rotate(-1.6deg) translateY(2px)}60%{transform:rotate(.8deg)}100%{transform:rotate(0)}}
.spot{position:absolute;left:50%;bottom:10%;width:120%;height:110%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,236,200,.22),transparent);opacity:0;transition:opacity .8s}
.anchor.speaking .spot{opacity:1}

.desk{position:absolute;left:-2%;right:-2%;bottom:0;height:30%;z-index:4}
.desk svg{position:absolute;inset:0;width:100%;height:100%}
.desk-edge{filter:drop-shadow(0 0 6px #22d3ee);animation:edge 4s linear infinite}
@keyframes edge{0%,100%{opacity:.8}50%{opacity:1}}
.desk-logo{position:absolute;left:50%;top:20%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.5em;font-family:'Inter',sans-serif;font-size:clamp(9px,1.6cqw,24px);white-space:nowrap}
.desk-logo b{font-weight:900;letter-spacing:.08em}
.desk-logo i{font-style:normal;font-weight:800;font-size:.6em;background:var(--red);padding:.15em .45em;border-radius:3px;letter-spacing:.1em}
.nameplate{position:absolute;top:8%;display:flex;flex-direction:column;align-items:center;font-size:clamp(6px,.95cqw,14px);opacity:.92}
.nameplate b{font-weight:800;letter-spacing:.12em;font-family:'Inter',sans-serif}
html[lang=ar] .nameplate b{font-family:'Tajawal';letter-spacing:0;font-size:1.15em}
.nameplate span{color:var(--gold);font-size:.78em;letter-spacing:.06em;margin-top:.2em}
.np-f{left:24.5%;transform:translateX(-50%)} .np-m{right:24.5%;transform:translateX(50%)}

/* broadcast graphics */
.bug-live{position:absolute;top:3.2%;left:2.4%;z-index:10;display:flex;align-items:center;gap:.5em;font-size:clamp(8px,1.15cqw,16px);
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);padding:.4em .8em;border-radius:.4em;border:1px solid rgba(255,255,255,.12)}
.bug-live b{background:var(--red);padding:.1em .45em;border-radius:.2em;font-weight:900;letter-spacing:.1em}
.bug-live .bug-name{font-weight:800;letter-spacing:.1em;font-family:'Inter',sans-serif}
.dot{width:.6em;height:.6em;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(225,29,46,.7);animation:ping 1.6s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(225,29,46,.7)}80%{box-shadow:0 0 0 .7em rgba(225,29,46,0)}100%{box-shadow:0 0 0 0 rgba(225,29,46,0)}}
.bug-clock{position:absolute;top:3.2%;right:2.4%;z-index:10;font-family:var(--mono);font-size:clamp(8px,1.1cqw,15px);background:rgba(0,0,0,.55);
  padding:.45em .8em;border-radius:.4em;border:1px solid rgba(255,255,255,.12);display:flex;gap:1em}
.bug-clock span{color:var(--muted)} .bug-clock b{color:#fff;font-weight:700}
.bug-ai{position:absolute;top:10.5%;left:2.4%;z-index:10;font-size:clamp(6px,.8cqw,11px);font-weight:800;letter-spacing:.14em;color:var(--cyan);
  border:1px solid rgba(34,211,238,.4);padding:.3em .7em;border-radius:99px;background:rgba(0,20,30,.5)}
html[dir=rtl] .bug-live{left:auto;right:2.4%} html[dir=rtl] .bug-clock{right:auto;left:2.4%} html[dir=rtl] .bug-ai{left:auto;right:2.4%}
html[lang=ar] .bug-ai{letter-spacing:0}

.lower-third{position:absolute;left:3%;right:3%;bottom:10.5%;z-index:12;display:flex;align-items:stretch;filter:drop-shadow(0 10px 25px rgba(0,0,0,.6));
  transform:translateY(0);transition:transform .6s cubic-bezier(.2,.9,.3,1),opacity .4s}
.lower-third.out{transform:translateX(-6%);opacity:0}
html[dir=rtl] .lower-third.out{transform:translateX(6%)}
.lt-tag{background:linear-gradient(180deg,#ff2a3d,var(--red2));padding:.5em 1em;display:flex;flex-direction:column;justify-content:center;font-size:clamp(9px,1.35cqw,19px);min-width:9em}
.lt-tag span{font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.lt-tag small{font-size:.62em;opacity:.85;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
html[lang=ar] .lt-tag small,html[lang=ar] .lt-tag span{letter-spacing:0}
.lt-main{flex:1;background:linear-gradient(180deg,#ffffff,#e3e8f2);color:#0a1328;padding:.55em 1.1em;min-width:0}
.lt-headline{font-weight:800;font-size:clamp(10px,1.75cqw,25px);line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lt-meta{display:flex;align-items:center;gap:.5em;font-size:clamp(7px,.95cqw,13px);color:#4a5672;font-weight:600;margin-top:.25em;white-space:nowrap;overflow:hidden}
.lt-meta #ltSource{color:var(--red2);font-weight:800;text-transform:uppercase}
.lt-speaker{display:inline-flex;align-items:center;gap:.4em}
.lt-speaker:not(:empty)::before{content:"";width:.55em;height:.55em;border-radius:50%;background:#16a34a;box-shadow:0 0 0 .2em rgba(22,163,74,.25)}
.sep{opacity:.4}

.crawl{position:absolute;left:0;right:0;bottom:0;height:8.5%;z-index:12;display:flex;background:rgba(3,7,18,.96);border-top:2px solid var(--gold)}
.crawl-label{background:var(--gold);color:#1a1205;font-weight:900;display:grid;place-items:center;padding:0 1.2em;font-size:clamp(8px,1.15cqw,16px);letter-spacing:.1em;white-space:nowrap}
html[lang=ar] .crawl-label{letter-spacing:0}
.crawl-track{flex:1;overflow:hidden;position:relative;display:flex;align-items:center;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.crawl-inner{display:inline-flex;white-space:nowrap;font-size:clamp(9px,1.25cqw,17px);font-weight:600;animation:crawl 160s linear infinite;padding-inline-start:100%}
html[dir=rtl] .crawl-inner{animation-name:crawlR}
.crawl-inner span{padding:0 1.4em}
.crawl-inner span::before{content:"◆";color:var(--red);margin-inline-end:1.2em;font-size:.7em}
.crawl-inner em{font-style:normal;color:var(--gold);font-weight:800;margin-inline-end:.5em}
@keyframes crawl{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes crawlR{from{transform:translateX(0)}to{transform:translateX(100%)}}

.controls{position:absolute;right:2.4%;top:16%;z-index:14;display:flex;flex-direction:column;gap:8px;opacity:0;transition:opacity .3s}
html[dir=rtl] .controls{right:auto;left:2.4%}
.studio:hover .controls{opacity:1}
.controls button{width:clamp(30px,3.2cqw,44px);height:clamp(30px,3.2cqw,44px);border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.55);backdrop-filter:blur(6px);display:grid;place-items:center}
.controls button:hover{background:var(--red)}
.controls svg{width:55%;height:55%;fill:#fff}
.i-pause,.i-mute{display:none}
.playing .i-play{display:none}.playing .i-pause{display:block}
.muted .i-vol{display:none}.muted .i-mute{display:block}

.golive{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(circle at 50% 50%,rgba(2,6,17,.35),rgba(2,6,17,.8));transition:opacity .6s}
.golive.hide{opacity:0;pointer-events:none}
.golive-btn{position:relative;display:flex;align-items:center;gap:.6em;border:0;border-radius:99px;padding:.9em 2em;font-size:clamp(14px,2cqw,26px);
  background:linear-gradient(135deg,#ff3446,var(--red2));box-shadow:0 15px 50px rgba(225,29,46,.55)}
.golive-btn b{font-weight:900;letter-spacing:.14em}
html[lang=ar] .golive-btn b{letter-spacing:0}
.golive-btn svg{width:1.2em;height:1.2em;fill:#fff}
.golive-btn .pulse{position:absolute;inset:0;border-radius:inherit;border:2px solid #ff4655;animation:ring 1.8s infinite}
@keyframes ring{from{transform:scale(1);opacity:.9}to{transform:scale(1.35);opacity:0}}
.golive p{margin:0;color:#cfd7ea;font-size:clamp(10px,1.2cqw,16px);text-shadow:0 2px 10px #000}

/* ---------- markets ---------- */
.markets{margin-top:14px;display:flex;align-items:stretch;border-radius:12px;overflow:hidden;background:var(--panel);border:1px solid var(--line);height:46px}
.mk-label{background:#0f1f45;color:var(--cyan);font-weight:800;letter-spacing:.12em;font-size:12px;display:grid;place-items:center;padding:0 16px}
.mk-track{flex:1;overflow:hidden;display:flex;align-items:center}
.mk-inner{display:inline-flex;white-space:nowrap;animation:crawl 70s linear infinite;font-family:var(--mono);font-size:13px}
html[dir=rtl] .mk-inner{animation-name:crawlR}
.mk-item{padding:0 22px;border-inline-end:1px solid var(--line);display:inline-flex;gap:10px;direction:ltr}
.mk-item b{color:#fff}.mk-item span{color:var(--muted)}
.up{color:#22c55e!important}.down{color:#ef4444!important}

/* ---------- news desk ---------- */
.desk-area{display:grid;grid-template-columns:1fr 340px;gap:24px;margin-top:28px}
.feed-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.feed-head h2{margin:0;font-size:24px;font-weight:900;display:flex;align-items:center;gap:10px}
.live-dot{width:10px;height:10px;border-radius:50%;background:var(--red);animation:ping 1.6s infinite}
.feed-status{color:var(--muted);font-size:13px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.chip{border:1px solid var(--line);background:rgba(255,255,255,.03);padding:7px 14px;border-radius:99px;font-size:13px;font-weight:600;color:var(--muted)}
.chip.active{background:#fff;color:#0a1328;border-color:#fff}
.chip i{font-style:normal;opacity:.6;margin-inline-start:6px;font-size:11px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,border-color .25s;position:relative}
.card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.2)}
.card.onair{border-color:var(--red);box-shadow:0 0 0 1px var(--red),0 10px 30px rgba(225,29,46,.25)}
.card.onair::after{content:"ON AIR";position:absolute;top:10px;inset-inline-end:10px;background:var(--red);font-size:10px;font-weight:900;padding:3px 7px;border-radius:4px;letter-spacing:.1em}
html[lang=ar] .card.onair::after{content:"على الهواء";letter-spacing:0}
.card .thumb{aspect-ratio:16/9;background:#0b1630 center/cover no-repeat;position:relative}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ph{background:linear-gradient(135deg,var(--c1,#16306a),var(--c2,#0a1328));color:rgba(255,255,255,.9)}
.thumb .ph{position:absolute;inset:0;display:flex;align-items:flex-end;padding:14px;font-weight:900;font-size:22px;letter-spacing:-.02em}
.thumb .ph small{position:absolute;top:12px;inset-inline-start:14px;font-size:11px;font-weight:800;letter-spacing:.12em;opacity:.7}
.card .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.flag{background:rgba(225,29,46,.15);color:#ff6b78;font-weight:800;padding:2px 8px;border-radius:4px;font-size:11px;letter-spacing:.04em}
.new{background:var(--gold);color:#1a1205;font-weight:900;padding:2px 6px;border-radius:4px;font-size:10px}
.card h3{margin:0;font-size:16px;line-height:1.35;font-weight:700}
.card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .acts{margin-top:auto;display:flex;gap:8px;padding-top:6px}
.btn-air{border:0;background:rgba(225,29,46,.14);color:#ff6b78;font-weight:800;font-size:12px;padding:7px 12px;border-radius:8px}
.btn-air:hover{background:var(--red);color:#fff}
.btn-src{font-size:12px;font-weight:700;padding:7px 12px;border-radius:8px;border:1px solid var(--line);text-decoration:none;color:var(--muted)}
.btn-src:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.skeleton{height:300px;border-radius:14px;background:linear-gradient(90deg,#0d1730,#14214a,#0d1730);background-size:200% 100%;animation:sk 1.4s infinite}
@keyframes sk{to{background-position:-200% 0}}
.empty{grid-column:1/-1;padding:40px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:14px}

.rundown-col{display:flex;flex-direction:column;gap:18px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.panel h3{margin:0 0 12px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
html[lang=ar] .panel h3{letter-spacing:0;font-size:16px}
.rundown{list-style:none;margin:0;padding:0;counter-reset:r;max-height:520px;overflow:auto}
.rundown li{counter-increment:r;display:grid;grid-template-columns:28px 1fr;gap:10px;padding:10px 6px;border-bottom:1px solid var(--line);font-size:13px;line-height:1.35;cursor:pointer;border-radius:8px}
.rundown li::before{content:counter(r,decimal-leading-zero);font-family:var(--mono);color:var(--muted);font-size:12px;padding-top:1px}
.rundown li:hover{background:rgba(255,255,255,.04)}
.rundown li.now{background:rgba(225,29,46,.12)}
.rundown li.now::before{content:"▶";color:var(--red)}
.rundown li.done{opacity:.45}
.rundown li small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.about p{color:#c4cde2;font-size:14px;line-height:1.6;margin:0 0 14px}
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stats li{background:rgba(255,255,255,.04);border-radius:10px;padding:10px;text-align:center}
.stats b{display:block;font-size:22px;font-weight:900}
.stats small{font-size:11px;margin-inline-start:2px;color:var(--muted)}
.stats span{font-size:11px;color:var(--muted)}

.foot{border-top:1px solid var(--line);padding:28px clamp(16px,3vw,40px);display:flex;flex-wrap:wrap;gap:16px 30px;align-items:center;color:var(--muted);font-size:13px}
.foot p{margin:0;max-width:720px;line-height:1.5}
.foot .copy{margin-inline-start:auto}
.brand.small .brand-text b{font-size:14px}

@media (max-width:1000px){.desk-area{grid-template-columns:1fr}.brand-tag{display:none}}
@media (max-width:640px){
  .topbar{gap:12px;flex-wrap:wrap}.sections{order:3;flex-basis:100%}
  .studio{border-radius:12px}.controls{opacity:1}
  .bug-clock span:nth-of-type(n+3),.bug-clock b:nth-of-type(n+3){display:none}
  .wrap{padding-left:10px;padding-right:10px}
}

/* ================= v2: photo-real anchor cameras ================= */
.stage{position:absolute;inset:0;overflow:hidden;background:#020611}
.stage .wall{height:100%}
.camera{position:absolute;overflow:hidden;background:#000;opacity:1;
  transition:left .9s cubic-bezier(.65,0,.25,1),top .9s cubic-bezier(.65,0,.25,1),width .9s cubic-bezier(.65,0,.25,1),height .9s cubic-bezier(.65,0,.25,1),opacity .35s,border-radius .9s,box-shadow .4s}
.shot{position:absolute;aspect-ratio:1344/768;transition:left .9s cubic-bezier(.65,0,.25,1),top .9s cubic-bezier(.65,0,.25,1),width .9s cubic-bezier(.65,0,.25,1)}
.shot img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
/* mouth: dark gap + lower lip/jaw nudged down by speech amplitude --o */
.mouth-in{position:absolute;left:calc(var(--mx) - var(--mw) * .8);width:calc(var(--mw) * 1.6);top:calc(var(--my) - .25%);
  height:calc(.5% + var(--o,0) * 1.15%);border-radius:50%;background:radial-gradient(ellipse at 50% 35%,#1a0606 40%,#3b1212 75%,transparent 100%);opacity:calc(var(--o,0) * 1.4)}
.jaw{position:absolute;inset:0;background-size:100% 100%;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse calc(var(--mw) * 2.6) 5.6% at var(--mx) calc(var(--my) + 3.4%),#000 58%,transparent 100%);
          mask-image:radial-gradient(ellipse calc(var(--mw) * 2.6) 5.6% at var(--mx) calc(var(--my) + 3.4%),#000 58%,transparent 100%);
  clip-path:inset(calc(var(--my) + .05%) 0 0 0);
  transform:translateY(calc(var(--o,0) * .95%))}
.calib{display:none}
.calib-on .calib{display:block;position:absolute;left:var(--mx);top:var(--my);width:14px;height:14px;margin:-7px;border:2px solid #0f0;border-radius:50%;z-index:9}

/* split / two-box */
.stage[data-mode=split] .camera{top:14%;height:60%;width:44.5%;border-radius:10px;border:1px solid rgba(255,255,255,.18);box-shadow:0 20px 50px rgba(0,0,0,.6)}
.stage[data-mode=split] .camera-f{left:4%}
.stage[data-mode=split] .camera-m{left:51.5%}
.stage[data-mode=split] .shot{width:172%;left:calc(50% - var(--fx) * 172%);top:-8%}
.stage[data-mode=split] .camera.speaking{box-shadow:0 0 0 2px var(--red),0 0 40px rgba(225,29,46,.45),0 20px 50px rgba(0,0,0,.6)}
/* full-frame single shot */
.stage[data-mode=f] .camera,.stage[data-mode=m] .camera{left:0;top:0;width:100%;height:100%;border-radius:0;border:0}
.stage[data-mode=f] .shot,.stage[data-mode=m] .shot{width:100%;left:0;top:0}
.stage[data-mode=f] .camera-m,.stage[data-mode=m] .camera-f{opacity:0;z-index:1}
.stage[data-mode=f] .camera-f,.stage[data-mode=m] .camera-m{z-index:2}
.stage[data-mode=f] .camera-f img,.stage[data-mode=m] .camera-m img{animation:push 26s ease-in-out infinite alternate}
.stage[data-mode=f] .camera-f .jaw,.stage[data-mode=f] .camera-f .mouth-in{animation:none}
@keyframes push{from{transform:scale(1)}to{transform:scale(1.045)}}
/* keep jaw/mouth glued to the pushed-in image: scale whole shot instead of the img */
.stage[data-mode=f] .camera-f img,.stage[data-mode=m] .camera-m img{animation:none}
.stage[data-mode=f] .camera-f .shot,.stage[data-mode=m] .camera-m .shot{animation:push 26s ease-in-out infinite alternate;transform-origin:calc(var(--fx) * 100%) calc(var(--fy) * 100%)}
.cam-tag{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:.6em;padding:.45em .8em;font-size:clamp(7px,.9cqw,13px);
  background:linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,.2));transition:opacity .4s}
.cam-tag em{font-style:normal;font-family:var(--mono);color:var(--red);font-weight:700}
.cam-tag b{font-weight:800;letter-spacing:.08em}
.cam-tag span{color:var(--gold);font-size:.85em}
html[lang=ar] .cam-tag b{letter-spacing:0}
.stage[data-mode=f] .cam-tag,.stage[data-mode=m] .cam-tag{opacity:0}
/* over-the-shoulder story box */
.stage .center-screen{z-index:5;transition:opacity .5s,left .9s,right .9s}
.stage[data-mode=split] .center-screen{opacity:0;pointer-events:none}
.stage[data-mode=f] .center-screen{left:59%;top:15%;width:36%;transform:none}
.stage[data-mode=m] .center-screen{left:5%;top:15%;width:36%;transform:none}
.stage[data-mode=split] .wall-title{opacity:1}

/* ================= v3: HeyGen clips ================= */
.clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s;background:transparent;pointer-events:none}
.camera.clip-on .clip{opacity:1}
.camera.clip-on .jaw,.camera.clip-on .mouth-in{display:none}
.hg-tag{font-size:9px;font-weight:800;letter-spacing:.06em;color:#0a1328;background:var(--cyan);padding:1px 5px;border-radius:3px;vertical-align:middle}