/* Juud product demo · styles (works offline: no external resources) */
@font-face{font-family:'Inter';src:url(fonts/inter-latin-400-normal.woff2) format('woff2');font-weight:400}
@font-face{font-family:'Inter';src:url(fonts/inter-latin-500-normal.woff2) format('woff2');font-weight:500}
@font-face{font-family:'Inter';src:url(fonts/inter-latin-600-normal.woff2) format('woff2');font-weight:600}
@font-face{font-family:'Inter';src:url(fonts/inter-latin-700-normal.woff2) format('woff2');font-weight:700}
@font-face{font-family:'Plex Arabic';src:url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');font-weight:400}
@font-face{font-family:'Plex Arabic';src:url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format('woff2');font-weight:500}
@font-face{font-family:'Plex Arabic';src:url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2');font-weight:600}

:root{
  --bg:#0F0E14; --ink:#F5F1E8; --mute:rgba(245,241,232,.58); --line:rgba(245,241,232,.13);
  --v:#8A49DF; --vl:#B994F7; --vd:#6B2FC4; --glass:rgba(245,241,232,.07);
  --sans:'Inter','Plex Arabic',system-ui,sans-serif;
  --hdr:64px; --ftr:92px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,.dev:focus-visible{outline:2px solid var(--vl);outline-offset:3px}
[hidden]{display:none!important}

#app{position:fixed;inset:0;display:grid;grid-template-rows:var(--hdr) 1fr var(--ftr);
  background:
    radial-gradient(1100px 720px at 10% -12%,rgba(138,73,223,.30),transparent 62%),
    radial-gradient(900px 640px at 96% 112%,rgba(66,98,230,.17),transparent 60%),
    var(--bg)}

/* ── header ── */
#top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 28px;direction:ltr;position:relative;z-index:20}
.brand{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.brand img{width:34px;height:34px;border-radius:9px}
#steps{display:flex;align-items:center;gap:6px}
.step{display:flex;align-items:center;gap:9px;padding:7px 14px 7px 8px;border-radius:99px;font-size:13px;font-weight:500;color:var(--mute);transition:.25s;border:1px solid transparent}
.step i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;border:1.5px solid var(--line)}
.step:hover{color:var(--ink);background:var(--glass)}
.step.done i{border-color:var(--vl);color:var(--vl)}
.step.on{color:var(--ink);background:rgba(138,73,223,.22);border-color:rgba(185,148,247,.45)}
.step.on i{background:var(--v);border-color:var(--v);color:#fff}
.stepsep{width:14px;height:1px;background:var(--line)}
.hctl{display:flex;justify-content:flex-end;align-items:center;gap:10px}
.seg{display:flex;padding:3px;border-radius:99px;background:var(--glass);border:1px solid var(--line)}
.seg button{padding:6px 14px;border-radius:99px;font-size:12.5px;font-weight:500;color:var(--mute)}
.seg button.on{background:var(--ink);color:#15141B}
.hbtn{padding:7px 14px;border-radius:99px;font-size:12.5px;font-weight:500;border:1px solid var(--line);background:var(--glass);color:var(--ink)}
.hbtn:hover{background:rgba(245,241,232,.14)}
.hbtn.ico{width:34px;height:34px;padding:0;display:grid;place-items:center;font-size:15px;font-weight:600}
.hbtn.ico svg{width:16px;height:16px}

/* ── stage ── */
#vp{position:relative;overflow:hidden}
#stage{position:absolute;left:calc(50% + var(--sx,0px));top:50%;width:1600px;height:900px;transform:translate(-50%,-50%) scale(var(--k,1));transform-origin:center;direction:ltr;transition:left .45s cubic-bezier(.2,.8,.2,1)}

.dev{position:absolute;cursor:pointer;outline:none;transition:transform .85s cubic-bezier(.2,.8,.2,1),opacity .55s,filter .55s;filter:drop-shadow(0 34px 44px rgba(0,0,0,.55));z-index:1}
.dev:not(.on):not(.dim):hover{transform:translateY(-8px)}
.dev.dim{opacity:.07;filter:blur(3px);pointer-events:none}
.dev.away{opacity:0;pointer-events:none}
.dev.on{cursor:default}

.screen{position:relative;overflow:hidden;background:#000;container-type:inline-size}
.media{position:relative;flex:1;min-height:0;background:#0b0a10}
.media>*{position:absolute;inset:0;width:100%;height:100%}
.vid{object-fit:cover;opacity:0;transition:opacity .3s}
.has-video .vid{opacity:1}
.poster{object-fit:cover;display:none}
.poster.on{display:block}
.has-video .poster{display:none}

/* laptop */
.laptop .lid{position:relative;background:#0b0a10;border:1px solid #2c2a36;border-radius:20px 20px 8px 8px;padding:12px 12px 14px}
.laptop .cam{position:absolute;top:5px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#2b2a35}
.laptop .screen{aspect-ratio:16/10;display:flex;flex-direction:column;border-radius:6px}
.laptop .base{position:relative;height:15px;margin:0 -34px;border-radius:0 0 22px 22px;background:linear-gradient(#d3d1da,#8c8a96);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.laptop .base i{position:absolute;left:50%;top:0;width:130px;height:5px;margin-left:-65px;border-radius:0 0 8px 8px;background:#6d6b77}
.bar{height:26px;flex:none;background:#1c1b24;display:flex;align-items:center;gap:6px;padding:0 10px}
.bar b{width:8px;height:8px;border-radius:50%;background:#3b3a47}
.bar span{margin-left:10px;flex:1;height:16px;border-radius:8px;background:#0f0e14;font-size:10px;line-height:16px;color:var(--mute);padding:0 10px;white-space:nowrap;overflow:hidden}

/* phone */
.phone .body{position:relative;height:480px;border-radius:42px;background:#0b0a10;border:1.5px solid #34323f;padding:9px;box-shadow:inset 0 0 0 2px #17161d}
.phone .body::before,.phone .body::after{content:"";position:absolute;width:3px;border-radius:2px;background:#2a2933}
.phone .body::before{left:-4px;top:112px;height:46px}
.phone .body::after{right:-4px;top:150px;height:68px}
.phone .screen{height:100%;border-radius:33px;display:flex}
.phone .island{position:absolute;top:19px;left:50%;width:68px;height:20px;margin-left:-34px;border-radius:12px;background:#000;z-index:3}

/* tablet */
.tablet .body{position:relative;background:#0b0a10;border:1.5px solid #34323f;border-radius:28px;padding:14px;box-shadow:inset 0 0 0 2px #17161d}
.tablet .cam{position:absolute;left:5px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#2b2a35}
.tablet .screen{aspect-ratio:4/3;border-radius:14px;display:flex}

/* labels + hover hint (overview only) */
.tag{position:absolute;left:50%;bottom:-48px;transform:translateX(-50%);white-space:nowrap;display:flex;gap:8px;align-items:center;padding:7px 15px;border-radius:99px;background:var(--glass);border:1px solid var(--line);font-size:13px;font-weight:500;backdrop-filter:blur(8px);transition:opacity .3s}
.tag small{font-size:12px;color:var(--mute);font-weight:400}
.hint{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:rgba(138,73,223,.94);display:grid;place-items:center;opacity:0;transform:scale(.8);transition:.25s;z-index:5;box-shadow:0 12px 34px rgba(107,47,196,.6)}
.hint svg{width:22px;height:22px;margin-left:3px}
.dev:hover .hint,.dev:focus-visible .hint{opacity:1;transform:none}
#app[data-view=scene] .tag,#app[data-view=scene] .hint{display:none}

/* overview headline */
#lede{position:absolute;left:60px;top:22px;max-width:760px;transition:opacity .4s}
#lede h1{font-size:42px;font-weight:600;letter-spacing:-.035em;line-height:1.05}
#lede h1 em{font-style:normal;color:var(--vl)}
#lede p{margin-top:12px;font-size:17px;line-height:1.5;color:var(--mute);max-width:560px}
#app[data-view=scene] #lede,#app[data-view=scene] #startbox{opacity:0;pointer-events:none}
#startbox{position:absolute;left:690px;top:46px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;transition:opacity .4s}
#app[data-lang=ar] #startbox{left:auto;right:690px;align-items:flex-end}
/* the overview needs no footer: the devices get its height */
#app[data-view=overview]{--ftr:0px}
#app[data-view=overview] #bar{display:none}
#app[data-lang=ar] #lede{direction:rtl;text-align:right;left:auto;right:60px}
#app[data-lang=ar] #lede h1{letter-spacing:0;line-height:1.25;font-size:40px}
#app[data-lang=ar] #lede p{font-size:16px;line-height:1.6}

/* overview: the first frame of the device's recording sits under the shade, the label stays readable on top */
#app[data-view=overview] .poster.on~.ph{background:linear-gradient(160deg,rgba(44,27,85,.58),rgba(23,18,39,.68) 55%,rgba(15,14,20,.84))}
#app[data-view=overview] .poster.on~.ph .pk,#app[data-view=overview] .poster.on~.ph .pn{text-shadow:0 2px 14px rgba(8,6,14,.7)}
#app[data-view=overview] .poster.on~.ph .pn{color:rgba(245,241,232,.82)}

/* rehearsal / placeholder screen */
.ph{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink);
  background:radial-gradient(120% 90% at 18% 0%,rgba(185,148,247,.34),transparent 55%),linear-gradient(160deg,#2c1b55,#171227 62%,#0f0e14);transition:opacity .3s}
.has-video .ph{opacity:0;pointer-events:none}
.phc{padding:6cqw;display:flex;flex-direction:column;align-items:center;gap:1.8cqw;max-width:100%}
.pk{font-size:6.2cqw;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.pn{font-size:3.2cqw;color:var(--mute)}
.pid{font-size:11cqw;font-weight:700;letter-spacing:-.04em;color:var(--vl);line-height:1}
.phc h3{font-size:5cqw;font-weight:600;letter-spacing:-.02em;line-height:1.2;max-width:84%}
.pill{font-size:2.5cqw;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:1cqw 2.4cqw;border-radius:99px;border:1px solid rgba(185,148,247,.5);color:var(--vl)}
.pf{font-size:2.3cqw;color:var(--mute);font-family:ui-monospace,Consolas,monospace;word-break:break-all}
.pt{font-size:3.2cqw;font-variant-numeric:tabular-nums}
.pbar{width:62%;height:.9cqw;border-radius:9px;background:rgba(255,255,255,.13);overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:var(--vl)}
.phone .pk{font-size:9cqw}.phone .pn{font-size:5cqw}
.phone .pid{font-size:16cqw}.phone .phc h3{font-size:8cqw}
.phone .pill{font-size:3.6cqw}.phone .pf{font-size:3.4cqw}.phone .pt{font-size:5cqw}

/* stage extras: badges, rail, caption */
#badges{position:absolute;left:0;right:0;top:22px;display:flex;justify-content:center;gap:10px;pointer-events:none}
.badge{display:flex;align-items:center;gap:9px;padding:7px 16px;border-radius:99px;background:rgba(196,134,26,.16);border:1px solid rgba(196,134,26,.55);color:#F0C679;font-size:13px;font-weight:600;letter-spacing:.02em}
.badge i{width:8px;height:8px;border-radius:50%;background:#F0C679}
#rail{position:absolute;left:0;right:0;top:736px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:0 120px}
.chip{padding:9px 18px;border-radius:99px;font-size:15px;font-weight:500;color:var(--mute);background:var(--glass);border:1px solid var(--line);transition:.2s}
.chip:hover{color:var(--ink);background:rgba(245,241,232,.13)}
.chip.on{color:#fff;background:var(--v);border-color:var(--v);box-shadow:0 8px 26px rgba(107,47,196,.5)}
#caption{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;pointer-events:none}
#caption span{max-width:1320px;padding:12px 26px;border-radius:16px;background:rgba(15,14,20,.62);border:1px solid var(--line);backdrop-filter:blur(10px);font-size:28px;font-weight:500;line-height:1.35;letter-spacing:-.01em;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
#caption.show span{opacity:1;transform:none}
#app[data-lang=ar] #caption span,#app[data-lang=ar] .chip,#app[data-lang=ar] .badge,#app[data-lang=ar] .tag{direction:rtl;letter-spacing:0}
#app[data-lang=ar] #caption span{font-size:30px;line-height:1.45;padding:10px 24px}

/* ── footer ── */
#bar{position:relative;display:flex;align-items:center;justify-content:center;padding:0 28px 18px;direction:ltr;z-index:20}
.cta{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:99px;background:var(--v);color:#fff;font-size:16px;font-weight:600;box-shadow:0 12px 34px rgba(107,47,196,.5);transition:.2s}
.cta:hover{background:#9a5cf0;transform:translateY(-1px)}
.cta svg{width:15px;height:15px}
.cta.small{padding:9px 22px;font-size:14px;box-shadow:none}
.hintline{font-size:14px;color:var(--mute)}
#start{gap:14px;padding:20px 44px;font-size:22px;box-shadow:0 14px 40px rgba(107,47,196,.55)}
#start svg{width:19px;height:19px}
#startbox .hintline{font-size:16px}
#bar-scene{display:none;width:100%;max-width:1480px;align-items:center;gap:26px}
#app[data-view=scene] #bar-scene{display:flex}
.tp{display:flex;align-items:center;gap:6px}
.tb{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:var(--glass);border:1px solid var(--line)}
.tb:hover{background:rgba(245,241,232,.15)}
.tb svg{width:18px;height:18px}
.tb.play{width:48px;height:48px;background:var(--ink);color:#15141B;border:0}
.tb.play svg{width:18px;height:18px}
.scrub{flex:1;display:flex;align-items:center;gap:14px;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--mute)}
#track{position:relative;flex:1;height:22px;cursor:pointer}
#track::before{content:"";position:absolute;left:0;right:0;top:9px;height:4px;border-radius:4px;background:rgba(245,241,232,.16)}
#fill{position:absolute;left:0;top:9px;height:4px;border-radius:4px;background:var(--vl);width:0}
#fill::after{content:"";position:absolute;right:-6px;top:-4px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.5)}
#ticks i{position:absolute;top:6px;width:2px;height:10px;border-radius:2px;background:rgba(245,241,232,.38)}
.tg{display:flex;align-items:center;gap:6px}
.tgl{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:99px;font-size:12.5px;font-weight:600;color:var(--mute);border:1px solid var(--line);background:var(--glass)}
.tgl svg{width:15px;height:15px}
.tgl:hover{color:var(--ink)}
.tgl.on{color:#fff;background:rgba(138,73,223,.4);border-color:rgba(185,148,247,.6)}
.tgl.live{color:#fff;background:var(--v);border-color:var(--v)}
.tgl.live[disabled]{opacity:.35;cursor:not-allowed;background:var(--glass);border-color:var(--line)}
#foot{position:absolute;left:0;right:0;bottom:7px;text-align:center;font-size:11px;letter-spacing:.04em;color:rgba(245,241,232,.38)}

/* ── help overlay ── */
#help{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,7,12,.72);backdrop-filter:blur(8px);z-index:40}
#help .card{width:420px;padding:28px 30px;border-radius:20px;background:#17151f;border:1px solid var(--line)}
#help h3{font-size:18px;margin-bottom:14px}
#help dl{display:grid;grid-template-columns:90px 1fr;gap:9px 12px;margin-bottom:20px;font-size:14px}
#help dt{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:var(--vl)}
#help dd{color:rgba(245,241,232,.82)}

@media (prefers-reduced-motion:reduce){.dev,#caption span,#stage{transition-duration:.01s}}
.no-anim *,.no-anim{transition:none!important;animation:none!important}

/* ── scripted WhatsApp-style chat (shown on a device while its clip is missing) ── */
.sim{display:none;flex-direction:column;background-color:#ece5dd;background-image:radial-gradient(rgba(11,123,98,.07) 1px,transparent 1.3px);background-size:18px 18px;color:#111b21}
.has-sim:not(.has-video) .sim{display:flex}
.has-sim:not(.has-video) .ph{display:none}
.shead{flex:none;display:flex;align-items:center;gap:3cqw;padding:15cqw 4cqw 3.4cqw;background:#0b7b62;color:#fff}
.shead i{width:10.5cqw;height:10.5cqw;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:5cqw}
.shead b{display:block;font-size:5.2cqw;font-weight:600;line-height:1.25}
.shead small{display:block;font-size:4cqw;color:rgba(255,255,255,.8);line-height:1.3}
.sim .msgs{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:1.8cqw;padding:2.6cqw;overflow:hidden}
.wb{max-width:86%;padding:2.2cqw 3cqw 1.5cqw;border-radius:3.6cqw;font-size:5.6cqw;line-height:1.55;box-shadow:0 1px 1px rgba(11,20,26,.1)}
.wb.in{align-self:flex-start;background:#fff;border-top-left-radius:1cqw}
.wb.out{align-self:flex-end;background:#d9fdd3;border-top-right-radius:1cqw}
.wb .bt{text-align:start}
.wb .trn{margin-top:1cqw;font-size:4.3cqw;line-height:1.4;color:#667781;direction:ltr;text-align:left}
.wb .tm{display:flex;justify-content:flex-end;align-items:center;gap:.8cqw;margin-top:.6cqw;font-size:3.6cqw;color:#8696a0;direction:ltr}
.wb .tm svg{width:4cqw;height:2.8cqw}
.pc{display:flex;gap:2.4cqw;align-items:center;margin-bottom:1.8cqw;padding:2cqw;border-radius:2.4cqw;background:#f0f2f5}
.pc .sw{flex:none;width:13cqw;height:13cqw;border-radius:2cqw;background:linear-gradient(145deg,#2a2833,#0d0c12)}
.pc b{display:block;font-size:4.8cqw;font-weight:600;line-height:1.3}
.pc .pr{display:block;font-size:5cqw;font-weight:700;color:#0b7b62}
.pc small{display:block;font-size:4cqw;color:#667781}
.pl{display:flex;align-items:center;justify-content:space-between;gap:2cqw;margin-bottom:1.8cqw;padding:2.2cqw 2.6cqw;border-radius:2.4cqw;background:#f0f2f5;border-inline-start:1cqw solid #0b7b62}
.pl b{display:block;font-size:5cqw;font-weight:600}
.pl small{display:block;font-size:4cqw;color:#667781}
.pl svg{flex:none;width:4cqw;height:4cqw}
.sl{align-self:center;display:flex;align-items:center;gap:1.8cqw;padding:1.7cqw 3.2cqw;border-radius:2.4cqw;background:rgba(255,255,255,.92);font-size:4.5cqw;color:#3b4a54;box-shadow:0 1px 1px rgba(11,20,26,.1)}
.sl svg{width:3.8cqw;height:3.8cqw}
.typing{align-self:flex-start;display:flex;gap:1.3cqw;padding:2.8cqw 3.4cqw;border-radius:3.4cqw;border-top-left-radius:1cqw;background:#fff;box-shadow:0 1px 1px rgba(11,20,26,.1)}
.typing i{width:1.7cqw;height:1.7cqw;border-radius:50%;background:#54656f;animation:ty 1s infinite}
.typing i:nth-child(2){animation-delay:.14s}.typing i:nth-child(3){animation-delay:.28s}
@keyframes ty{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-.7cqw)}}
.wb.n,.sl.n,.typing{animation:pop .3s ease both}
.typing i{animation:ty 1s infinite}
@keyframes pop{from{opacity:0;transform:translateY(2cqw) scale(.96)}to{opacity:1;transform:none}}
.comp{flex:none;display:flex;align-items:center;gap:2cqw;padding:2.2cqw 2.6cqw 3cqw;background:#f0ece6}
.comp span{flex:1;padding:2cqw 3.6cqw;border-radius:99px;background:#fff;font-size:4.6cqw;color:#8a959c}
.comp em{flex:none;width:7cqw;height:7cqw;border-radius:50%;background:#0b7b62}
#app[data-lang=ar] .shead{direction:rtl}
#app[data-lang=ar] .pc,#app[data-lang=ar] .pl{direction:rtl}
#app[data-lang=ar] .pl svg{transform:scaleX(-1)}

/* ── Telegram theme for the scripted chat (sim.theme = "tgm") ── */
.sim.tgm{background-color:#8fb59c;background-image:linear-gradient(150deg,#d9dcb8,#7fae92 62%,#6fa0a0);background-size:auto;color:#0f1a22}
.sim.tgm .shead{background:#517da2}
.sim.tgm .shead i{background:linear-gradient(145deg,#6ab3f3,#2c7fd1);font-size:5.4cqw}
.sim.tgm .shead small{color:rgba(255,255,255,.78)}
.sim.tgm .comp{background:#fff}
.sim.tgm .comp span{background:#fff;color:#8a959c;border-radius:0}
.sim.tgm .comp em{background:#517da2;border-radius:50%}
.sim.tgm .typing{background:#fff;border-top-left-radius:3.4cqw;border-bottom-left-radius:1cqw}
.sim.tgm .typing i{background:#7d8d9c}
.sim.tgm .sl{background:rgba(0,0,0,.28);color:#fff;box-shadow:none}
.sim.tgm .sl svg path{stroke:#fff}
.tgw{align-self:flex-start;max-width:92%;display:flex;flex-direction:column;gap:1cqw}
.tgw.n{animation:pop .3s ease both}
.tgb{padding:2.4cqw 3.2cqw 1.6cqw;border-radius:3.4cqw;border-bottom-left-radius:1cqw;background:#fff;font-size:5cqw;line-height:1.45;box-shadow:0 1px 1px rgba(11,20,26,.14)}
.tgb .th{font-weight:700;font-size:5.4cqw;margin-bottom:1.2cqw}
.tgb .tl{margin-bottom:1.2cqw}
.tgb .tr{display:flex;flex-direction:column;gap:.6cqw;margin-bottom:1.2cqw}
.tgb .tf{color:#4c5e6e;font-size:4.5cqw}
.tgb .tf1{display:none}
.tgb .tm{text-align:end;font-size:3.5cqw;color:#8a9aa8;margin-top:.4cqw;direction:ltr}
.tgw.done .tf0,.tgw.done .tk{display:none}
.tgw.done .tf1{display:block;color:#2d7d46}
.tk{display:flex;flex-direction:column;gap:1cqw}
.tkr{display:flex;gap:1cqw}
.tkr span{flex:1;text-align:center;padding:2.2cqw 1cqw;border-radius:2.2cqw;background:rgba(32,54,44,.5);color:#fff;font-size:4.6cqw;font-weight:500;transition:background .15s}
.tgw.pr .tkr span.ok{background:rgba(32,54,44,.85);box-shadow:0 0 0 .6cqw rgba(255,255,255,.7)}
.sim .tt{position:absolute;left:50%;top:26cqw;transform:translate(-50%,-2cqw);padding:2cqw 4.4cqw;border-radius:99px;background:rgba(20,28,34,.82);color:#fff;font-size:4.6cqw;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap}
.sim .tt.on{opacity:1;transform:translate(-50%,0)}
#app[data-lang=ar] .tgb,#app[data-lang=ar] .tk{direction:rtl}

/* A loaded clip sets the screen's shape (--va = width / height of the recording). */
.laptop.fit-video .screen{aspect-ratio:auto}
.laptop.fit-video .media{flex:none;aspect-ratio:var(--va)}
.tablet.fit-video .screen{aspect-ratio:auto;display:block}
.tablet.fit-video .media{width:100%;aspect-ratio:var(--va)}
.phone.fit-video .vid{object-fit:cover}


/* ── phones ──
   Portrait: a prompt asks to turn the phone (or turns the page for you). Landscape: a lean layout
   without the stepper and the small chips, so the device and the caption get the screen. */
#rotate{display:none;position:fixed;inset:0;z-index:200;align-items:center;justify-content:center;padding:28px;text-align:center;
  background:radial-gradient(900px 600px at 50% -10%,rgba(138,73,223,.35),transparent 60%),var(--bg)}
.rot-card{max-width:340px;display:flex;flex-direction:column;align-items:center;gap:16px}
.rot-ico{width:84px;height:84px;color:var(--vl);animation:rot 2.6s ease-in-out infinite}
@keyframes rot{0%,25%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
.rot-card h2{font-size:26px;font-weight:600;letter-spacing:-.02em}
.rot-card p{font-size:16px;line-height:1.55;color:var(--mute)}
.rot-card small{font-size:13px;color:var(--mute);line-height:1.5}
#app[data-lang=ar] .rot-card{direction:rtl}
#app[data-lang=ar] .rot-card h2{letter-spacing:0}
@media (orientation:portrait){
  html.mobile:not(.force-land) #rotate{display:flex}
  /* the page turns itself, so it stays landscape even when the phone is locked to portrait */
  html.mobile.force-land #app{inset:auto;top:0;left:var(--iw);width:var(--ih);height:var(--iw);transform-origin:0 0;transform:rotate(90deg)}
}
html.mobile{--hdr:44px;--ftr:56px}
html.mobile #steps,html.mobile #bLive,html.mobile #bSpeed,html.mobile #bHelp,html.mobile #foot,html.mobile #rail,html.mobile .seg,html.mobile .brand span{display:none!important}
html.mobile #top{padding:0 12px}
html.mobile .brand img{width:30px;height:30px}
html.mobile #bar{padding:0 14px 8px}
html.mobile #bar-scene{gap:14px}
html.mobile .tb{width:36px;height:36px}
html.mobile .tb.play{width:42px;height:42px}
html.mobile .tgl{padding:6px 12px;font-size:12px}
html.mobile #app[data-view=scene] #caption{bottom:8px}
html.mobile #caption span{font-size:32px;max-width:1540px;padding:10px 24px}
html.mobile #app[data-lang=ar] #caption span{font-size:32px;line-height:1.45;padding:10px 24px}
html.mobile #badges{top:8px}
html.mobile .badge{font-size:22px;padding:8px 22px}
html.mobile .badge i{width:11px;height:11px}
html.mobile #lede p{display:none}
html.mobile #lede h1{font-size:68px}
html.mobile #app[data-lang=ar] #lede h1{font-size:64px}
html.mobile #start{font-size:34px;padding:26px 62px}
html.mobile #start svg{width:28px;height:28px}
html.mobile #startbox .hintline{font-size:24px}
html.mobile .tag{font-size:22px}
html.mobile #top{display:flex;justify-content:space-between}
html.mobile{--ftr:50px}
html.mobile #app[data-view=scene]{--hdr:0px}
html.mobile #app[data-view=scene] #top{visibility:hidden;overflow:hidden;height:0}


/* ── full-screen reminder ── */
#fsHint{position:absolute;z-index:30;top:calc(var(--hdr) + 10px);right:22px;display:flex;align-items:center;border-radius:99px;background:var(--v);color:#fff;
  box-shadow:0 12px 34px rgba(107,47,196,.55);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .35s,transform .35s}
#fsHint.show{opacity:1;transform:none;pointer-events:auto}
#fsGo{display:flex;align-items:center;gap:9px;padding:10px 8px 10px 18px;font-size:14px;font-weight:600;color:inherit}
#fsGo svg{width:16px;height:16px;flex:none}
#fsX{width:30px;height:30px;margin:0 6px 0 0;border-radius:50%;font-size:20px;line-height:1;color:rgba(255,255,255,.8)}
#fsX:hover{background:rgba(255,255,255,.18);color:#fff}
#app[data-lang=ar] #fsGo{direction:rtl;padding:10px 18px 10px 8px}
#app.is-fs #fsHint,html.no-fs #fsHint,html.no-fs #bFull{display:none}
/* the button is filled purple, swells and sends out a ring every 2 s until the viewer goes full screen */
#app:not(.is-fs) #bFull{background:var(--v);border-color:var(--vl);color:#fff;animation:fspulse 2s ease-out infinite}
@keyframes fspulse{
  0%{box-shadow:0 0 0 0 rgba(185,148,247,.9);transform:scale(1)}
  22%{transform:scale(1.28)}
  50%{box-shadow:0 0 0 26px rgba(185,148,247,0);transform:scale(1)}
  100%{box-shadow:0 0 0 0 rgba(185,148,247,0);transform:scale(1)}}
#fsHint.show{animation:fsnudge 1.6s ease-in-out infinite}
@keyframes fsnudge{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
html.mobile #app[data-view=scene] #fsHint{top:8px;right:10px}
html.mobile #fsGo{padding:7px 6px 7px 14px;font-size:13px}
@media (orientation:portrait){html.mobile:not(.force-land) #fsHint{display:none}}