@font-face{font-family:Thmanyah;src:url(fonts/thmanyahsans-Regular.woff2);font-weight:400;font-display:swap}
@font-face{font-family:Thmanyah;src:url(fonts/thmanyahsans-Medium.woff2);font-weight:500;font-display:swap}
@font-face{font-family:Thmanyah;src:url(fonts/thmanyahsans-Bold.woff2);font-weight:600 700;font-display:swap}
@font-face{font-family:Thmanyah;src:url(fonts/thmanyahsans-Black.woff2);font-weight:800 900;font-display:swap}
:root{--faint:#8f887f;--ground:#0c0b0a;--panel:#141311;--raise:#1e1c1a;--line:#2a2724;--ink:#f4f1ec;--mute:#a39c93;--signal:#ef3b2d;--ok:#5fc48a;--paper:#f4f1ec;--paper-2:#e9e4dc;--paper-ink:#5f5952;
--ui:Figtree,Thmanyah,sans-serif;--snap:cubic-bezier(.2,.8,.2,1);--gut:clamp(16px,4vw,48px);--sec:clamp(88px,12vw,176px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink);font:500 17px/1.6 var(--ui);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.wrap{max-width:1240px;margin:auto;padding-inline:var(--gut)}.wrap.wide{max-width:1400px}
h1,h2,h3,p{margin:0}em{font-style:normal}
h1{font-size:clamp(46px,6.8vw,100px);line-height:1.02;font-weight:650;letter-spacing:-.035em}h1 em{color:var(--mute)}
h2{font-size:clamp(34px,4.2vw,60px);line-height:1.06;font-weight:650;letter-spacing:-.03em;text-wrap:balance}h2 em{color:var(--mute)}
.sub{color:var(--mute);max-width:52ch;margin-top:24px;font-size:19px}
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3{letter-spacing:0;line-height:1.25;font-weight:600}:lang(ar) body,:lang(ar) p{line-height:1.8}
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding-inline:24px;border-radius:12px;background:var(--ink);color:var(--ground);font-weight:700;white-space:nowrap;transition:background .15s,transform .15s var(--snap)}
.btn:hover{background:#fff}.btn:active{transform:scale(.97)}.btn.sm{height:38px;padding-inline:15px;border-radius:9px;font-size:15px}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}.btn.ghost:hover{background:var(--raise)}
.arr{font-style:normal;transition:transform .2s var(--snap)}.btn:hover .arr{transform:translateX(3px)}[dir=rtl] .arr{transform:scaleX(-1)}
#nav{position:sticky;top:0;z-index:20;background:rgba(12,11,10,.72);backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid transparent;transition:border-color .2s}#nav.stuck{border-color:var(--line)}
.navin{display:flex;align-items:center;gap:32px;height:68px}.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.015em;white-space:nowrap}.brand img{display:block;transform:scale(1.22)}
.links{display:flex;gap:26px;color:var(--mute);font-size:15px}.links a:hover{color:var(--ink)}.navend{margin-inline-start:auto;display:flex;gap:8px;align-items:center}.quiet{color:var(--mute);font-size:15px;padding:6px 10px;font-family:var(--ui)}.quiet:hover{color:var(--ink)}
.hero{padding-top:clamp(40px,5vw,72px);}
.herorow{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:32px;margin-bottom:40px}.lede{color:var(--mute);font-size:20px;max-width:34em;line-height:1.5}.cta{display:flex;gap:10px;flex:none}
.app{margin:0;background:var(--panel);border-radius:18px;box-shadow:0 0 0 1px var(--line),0 60px 120px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden;font-size:13px}
.abar{display:flex;align-items:center;gap:12px;height:44px;padding-inline:14px;border-bottom:1px solid var(--line)}.dots{display:flex;gap:7px}.dots i{width:11px;height:11px;border-radius:50%;background:var(--line)}.afilm{font-weight:700}.astatus{margin-inline-start:auto;display:flex;align-items:center;gap:7px;color:var(--mute)}.astatus i{width:7px;height:7px;border-radius:50%;background:var(--signal)}.aexport{background:var(--raise);color:var(--ink);font-weight:700;padding:5px 13px;border-radius:8px}
.abody{display:grid;grid-template-columns:320px 1fr}.achat{border-inline-end:1px solid var(--line);padding:18px;display:flex;flex-direction:column;justify-content:flex-start;gap:14px;height:clamp(420px,46vw,640px);overflow:hidden}
.msg{display:flex;gap:9px;align-items:flex-start;transition:opacity .3s,transform .3s var(--snap)}.msg.off{display:none}.msg svg{width:30px;height:30px;flex:none}.msg b{display:block;font-size:12px;color:var(--mute);font-weight:600}.msg.u{align-self:flex-end;background:var(--raise);padding:9px 13px;border-radius:10px;max-width:90%}
.amain{min-width:0;display:flex;flex-direction:column}.astages{display:flex;gap:4px;list-style:none;margin:0;padding:10px 14px;color:var(--faint);font-size:12px}.astages li{padding:3px 10px;border-radius:99px}.astages li.on{background:var(--raise);color:var(--ink)}.astages li.done{color:var(--mute)}
.stagebox{flex:1;display:grid;place-items:center;padding:6px 24px 16px;min-height:0;background-image:radial-gradient(#34302b 1px,transparent 1px);background-size:18px 18px}
.film{position:relative;height:100%;max-height:100%;aspect-ratio:16/9;max-width:100%;overflow:hidden;border-radius:6px;background:#000;container-type:inline-size}.film #wipe{position:absolute;inset:0}#word{position:absolute;left:50%;top:50%;font:800 100px/1 var(--ui);letter-spacing:-.04em;white-space:nowrap}.sample{position:absolute;bottom:8px;inset-inline-end:10px;font-size:11px;color:#fff;background:rgba(0,0,0,.45);padding:1px 7px;border-radius:5px}
.tl{border-top:1px solid var(--line);padding:8px 14px 12px}.trans{display:flex;gap:12px;color:var(--mute);font-variant-numeric:tabular-nums;margin-bottom:7px}.trans output:first-of-type{color:var(--ink)}.beat{flex:1}.track{position:relative;display:grid;gap:3px}#strip{display:flex;height:34px;gap:1px;border-radius:5px;overflow:hidden}#strip i{display:grid;place-items:center;font-size:10px;font-weight:800;font-style:normal;overflow:hidden}
.lane{position:relative;height:12px;background:#191715;border-radius:3px;overflow:hidden}.lane span{display:none}.lane i{position:absolute;top:0;bottom:0;background:#3a3631;border-radius:3px}.lane:nth-of-type(2) i{background:#57392f}
#head{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--signal);box-shadow:0 0 12px var(--signal)}
.stages{margin-top:var(--sec)}.stages{height:520vh}.pin{position:sticky;top:68px;height:calc(100svh - 68px);display:flex;align-items:center}.pin>.wrap{width:100%}
.sthead{margin-bottom:clamp(24px,4vh,48px)}.stlist{position:relative;height:min(52vh,420px)}
.st{position:absolute;inset:0;display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center;opacity:0;transform:translateY(14px);transition:opacity .35s,transform .45s var(--snap);pointer-events:none}.st.on{opacity:1;transform:none}
.stt small{color:var(--signal);font-weight:700;font-variant-numeric:tabular-nums;font-size:15px}.stt h3{font-size:clamp(26px,3vw,38px);line-height:1.1;letter-spacing:-.03em;font-weight:800;margin:10px 0 14px}.stt p{color:var(--mute)}
.stv{background:var(--panel);border-radius:18px;box-shadow:0 0 0 1px var(--line);padding:10px;font-size:15px}.stv>*{background:var(--raise);border-radius:8px;padding:22px;margin:0}
.form .lb{display:block;color:var(--mute);font-size:13px;margin:12px 0 5px}.form .lb:first-child{margin-top:0}.in{background:var(--ground);border-radius:7px;padding:9px 13px;box-shadow:0 0 0 1px var(--line)}.seg{display:flex;flex-wrap:wrap;gap:5px}.seg span{text-decoration:none;padding:5px 12px;border-radius:7px;background:var(--ground);color:var(--mute);font-size:14px}.seg span.on{background:var(--ink);color:var(--ground);font-weight:700}
.ideas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:none!important;padding:0!important}.ideas>div{position:relative;background:var(--raise);border-radius:8px;padding:18px;display:flex;flex-direction:column;gap:6px;min-height:210px}.ideas small{color:var(--mute);flex:1}.ideas span{color:var(--mute);font-size:14px;line-height:1.35}.ideas b{font-size:18px;letter-spacing:-.015em}.ideas .on{box-shadow:0 0 0 1px var(--signal)}.ideas i{position:absolute;top:14px;inset-inline-end:14px;width:22px;height:22px;background:var(--signal);border-radius:50%;display:grid;place-items:center;font:700 12px var(--ui);color:#fff}
.frames{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:none!important;padding:0!important}.frames div{aspect-ratio:2/1;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:clamp(20px,2.5vw,32px);letter-spacing:-.04em}
.code{font:500 14px/1.75 ui-monospace,Menlo,monospace;overflow-x:auto}.code s{text-decoration:none;color:var(--mute)}.code b{color:var(--signal);font-weight:500}
.gate{list-style:none}.gate li{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line)}.gate i{font:700 12px var(--ui);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:rgba(95,196,138,.16);color:var(--ok)}.gate span{margin-inline-start:auto;color:var(--mute);font-variant-numeric:tabular-nums}.gate .bad i{background:var(--signal);color:#fff}.gate .bad span{color:var(--ink)}.gate .fix{border:0;padding-bottom:0;justify-content:flex-end}.gate button{background:var(--signal);color:#fff;font-weight:700;padding:7px 14px;border-radius:8px;font-size:14px}
.exp{display:grid;gap:18px}.menu{display:grid;grid-template-columns:1fr 1fr;gap:8px}.menu div{padding:12px 14px;border-radius:9px;background:var(--ground)}.menu .on{box-shadow:0 0 0 1px var(--signal)}.menu small{display:block;color:var(--mute)}.shapes{display:flex;justify-content:space-between;align-items:flex-end;gap:8px}.shapes>span{display:grid;justify-items:center;gap:8px;color:var(--mute);font-size:13px}.shapes span span{display:block;border:2px solid var(--mute);border-radius:4px;text-decoration:none}
.ruler{position:relative;display:grid;grid-template-columns:repeat(6,1fr);margin-top:clamp(24px,4vh,44px);border-top:1px solid var(--line);color:var(--faint);font-size:13px;padding-top:9px;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(100%/24)) top/100% 7px no-repeat}.ruler span.on{color:var(--ink)}#rhead{position:absolute;top:-16px;bottom:0;width:2px;background:var(--signal);box-shadow:0 0 12px var(--signal);inset-inline-start:0}
.ink{padding-block:var(--sec)}.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.palette{background:var(--panel);border-radius:18px;padding:10px;box-shadow:0 0 0 1px var(--line),0 40px 80px -30px #000}.palette small{display:block;color:var(--faint);padding:8px 10px}.only{display:flex;flex-wrap:wrap;gap:5px;padding:0 8px 14px}.only span{padding:6px 13px;border-radius:8px;background:var(--raise);color:var(--mute);font-size:15px}.only .on{background:var(--ink);color:var(--ground);font-weight:700}.psearch{display:flex;justify-content:space-between;align-items:flex-end;background:var(--raise);border-radius:8px;padding:14px;min-height:112px}.send{width:30px;height:30px;border-radius:50%;background:var(--signal);color:#fff;display:grid;place-items:center;font-weight:700}
.ar-band{border-block:1px solid var(--line);padding-block:clamp(56px,7vw,96px);font-family:Thmanyah,Figtree,sans-serif}.ar-band p{font-size:clamp(44px,7vw,104px);font-weight:600;line-height:1.2}.ar-band span{color:var(--mute);display:block;margin-top:12px;font-size:20px;max-width:44ch}
.close{text-align:center;padding-top:var(--sec);}.close h2{font-size:clamp(56px,7.5vw,108px)}.term{display:inline-block;text-align:left;margin:40px 0 20px;background:var(--panel);box-shadow:0 0 0 1px var(--line);padding:16px 26px;border-radius:12px;font:500 16px/1.8 ui-monospace,Menlo,monospace}.term s{text-decoration:none;color:var(--signal)}.close p{color:var(--mute);max-width:46ch;margin:auto}
.foot{display:flex;justify-content:space-between;margin-top:var(--sec);padding-block:22px;border-top:1px solid var(--line);color:var(--mute);font-size:14px}
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s,transform .8s var(--snap)}.rv.seen{opacity:1;transform:none}
:root{--tray:0 0 0 1px var(--line)}html{scroll-padding-top:68px}
.skip{position:absolute;inset-inline-start:16px;top:-60px;z-index:30;background:var(--ink);color:var(--ground);padding:8px 14px;border-radius:8px}.skip:focus{top:12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.mocknote{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:16px;color:var(--faint);font-size:14px}.mocknote button{color:var(--ink);min-height:44px;padding-inline:8px}
.ideas span{min-height:2.7em}.st>*{min-width:0}.stv{min-height:300px;display:grid;grid-template-columns:minmax(0,1fr)}.frames{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-self:center}.frames div{min-width:0}
#crew,.tight{padding-top:var(--sec)}
.sub{margin-bottom:0}
.crew{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:48px;background:var(--panel);border-radius:18px;box-shadow:var(--tray);padding:10px}.crew div{background:var(--raise);border-radius:8px;padding:18px 16px;font-size:15px;transition:background .2s}.crew svg{width:44px;display:block;margin-bottom:28px;filter:saturate(.75)}
@media(hover:hover){.crew div:hover{background:#262421}}
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:24px;color:var(--mute);font-size:15px}.tiers b{display:block;color:var(--ink);font-weight:650}
.own{display:grid;grid-template-columns:repeat(3,1fr)}.own>div{padding:28px;background:var(--panel);box-shadow:var(--tray)}.own>div:first-of-type{border-start-start-radius:18px;border-end-start-radius:18px}.own>div:last-child{border-start-end-radius:18px;border-end-end-radius:18px}.own h3{font-size:22px;letter-spacing:-.02em;font-weight:650;margin-bottom:8px}.own p{color:var(--mute);font-size:16px}
.stt h3{font-weight:650}
.faq{display:grid;grid-template-columns:5fr 7fr;gap:64px}details{border-bottom:1px solid var(--line)}summary{cursor:pointer;padding:18px 0;font-weight:650;list-style:none;display:flex;justify-content:space-between}summary::after{content:'+';color:var(--mute);font-size:20px;line-height:1}details[open] summary::after{content:'−'}details p{color:var(--mute);padding-bottom:18px;max-width:56ch}
.buy{margin-top:20px!important;color:var(--ink)!important}.term{margin-top:24px}
.foot{max-width:1240px;margin:0 auto}
.quiet,.btn.sm{min-height:44px}
:lang(ar) :is(.stt h3,.own h3,.ideas b,.tiers b){letter-spacing:0;line-height:1.3;font-weight:600}:lang(ar) .ideas span{line-height:1.6}
[dir=rtl] .btn:hover .arr{transform:scaleX(-1) translateX(3px)}
html:not(.js) .stages{height:auto}html:not(.js) .pin{position:static;height:auto;display:block}html:not(.js) .stlist{height:auto;display:grid;gap:56px}html:not(.js) .st{position:static;opacity:1;transform:none}html:not(.js) :is(.ruler,#app,.mocknote,#crew .crew,#lang){display:none}
@media(max-width:980px),(max-height:639px){.stages{height:auto}.pin{position:static;height:auto;display:block}.stlist{height:auto;display:grid;gap:56px}.st{position:static;opacity:1;transform:none;pointer-events:auto;grid-template-columns:minmax(0,1fr);gap:20px}.ruler{display:none}}
@media(max-width:980px){.faq{grid-template-columns:1fr;gap:24px}.own{grid-template-columns:1fr}.own>div{border-radius:0!important}.links{display:none}.herorow{flex-direction:column;align-items:flex-start;gap:24px}.abody{grid-template-columns:1fr}.achat{display:none}.film{height:auto;width:100%}.stagebox{padding:6px 10px 12px}
.stages{height:auto}.pin{position:static;height:auto;display:block}.stlist{height:auto;display:grid;gap:56px}.st{position:static;opacity:1;transform:none;grid-template-columns:1fr;gap:20px;pointer-events:auto}.ruler{display:none}.split{grid-template-columns:1fr;gap:40px}.crew{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.cta{flex-direction:column;align-self:stretch}.btn{justify-content:center}.tiers{grid-template-columns:1fr 1fr}.ideas{grid-template-columns:1fr}.ideas>div{min-height:0}.ideas small{flex:none}.astages{overflow:hidden}.astages li{padding:3px 7px}.tiers{grid-template-columns:1fr 1fr;gap:12px}.code{font-size:12px}.stv>*{padding:16px}.stv .ideas,.stv .frames{padding:0}.term{font-size:14px}.dots{display:none}.crew{grid-template-columns:repeat(2,1fr)}.foot{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv,.st{transition:none}}
html:not(.js) .st{grid-template-columns:minmax(0,1fr)}
.btn{height:48px;padding-inline:22px;border-radius:10px;font-size:16px;font-weight:650;box-sizing:border-box}.btn.sm{height:44px;min-height:44px;padding-inline:18px;border-radius:10px;font-size:15px}
.aexport,.gate button{border-radius:8px;font-weight:650;font-size:13px;padding:6px 13px}.gate button{background:var(--ink);color:var(--ground)}
.mocknote .btn{color:var(--ink);min-height:44px;padding-inline:18px}
/* Round 3: character back. Consistent parts, varied fields. */
h1 em{color:var(--signal)}
h1{font-size:clamp(48px,7.8vw,116px);font-weight:750;letter-spacing:-.04em}h2{font-weight:750;font-size:clamp(36px,5vw,72px);letter-spacing:-.035em}
#crew{background:var(--paper);color:var(--ground);padding-block:var(--sec);margin-top:0}#crew h2 em,#crew .sub{color:var(--paper-ink)}
#crew .crew{background:none;box-shadow:none;padding:0;gap:10px}#crew .crew div{background:#fff;box-shadow:0 0 0 1px var(--paper-2);border-radius:16px;padding:26px 12px 18px;text-align:center;font-weight:700;transition:transform .3s var(--snap)}#crew .crew svg{width:84%;max-width:128px;margin:0 auto 12px;filter:none}
@media(hover:hover){#crew .crew div:hover{background:#fff;transform:translateY(-6px) rotate(-1.5deg)}}
#crew .tiers{color:var(--paper-ink);border-top:1px solid #cfc8bd;padding-top:14px}#crew .tiers b{color:var(--ground)}
.stages{margin-bottom:var(--sec)}
#install{background:var(--signal);color:#fff;padding-block:var(--sec);margin-top:var(--sec)}#install h2{font-size:clamp(72px,14vw,210px);line-height:.95;letter-spacing:-.05em;font-weight:800}#install p{color:#fff}#install .buy{color:#fff!important}#install .term{background:var(--ground);color:var(--ink);box-shadow:none}
:lang(ar) #install h2{letter-spacing:0;line-height:1.25}
@media(max-width:560px){.navin{gap:8px}.brand b{font-size:15px}.navend{gap:2px}.navend .btn.sm{padding-inline:12px;font-size:14px}.quiet{padding:6px}}
/* Crew on the dark field, mascots stay large and colourful. */
#crew{background:var(--ground);color:var(--ink);padding-block:0}#crew h2 em,#crew .sub{color:var(--mute)}
#crew .crew div{background:var(--panel);box-shadow:0 0 0 1px var(--line);color:var(--ink)}
@media(hover:hover){#crew .crew div:hover{background:var(--raise)}}
#crew .tiers{color:var(--mute);border-color:var(--line)}#crew .tiers b{color:var(--ink)}
.stages{margin-bottom:0}
/* One button size everywhere; paired buttons share a width. */
.btn,.btn.sm{height:48px;min-height:48px;padding-inline:22px;font-size:16px;border-radius:10px;justify-content:center}
.cta{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:560px){.cta{grid-template-columns:1fr}.navend .btn.sm{height:44px;min-height:44px;padding-inline:12px;font-size:14px}}
.btn{min-width:204px}
@media(max-width:560px){.btn{min-width:0}}
/* Drawn icons, no text glyphs. */
.ck,.wn,.ideas i.ck,.gate i.ck,.gate i.wn{font-size:0}
.ck::before,.wn::before{content:'';width:12px;height:12px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.ck{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l5 5 9-11'/%3E%3C/svg%3E")}
.wn{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M12 5v9M12 19.5v.1'/%3E%3C/svg%3E")}
summary::after{content:'';width:12px;height:12px;align-self:center;background:linear-gradient(var(--mute),var(--mute)) center/100% 2px no-repeat,linear-gradient(var(--mute),var(--mute)) center/2px 100% no-repeat;transition:transform .25s var(--snap)}
details[open] summary::after{content:'';transform:rotate(45deg)}
/* Crew: each one steps forward in their own way. */
#crew .crew .mate{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;padding-bottom:18px;transition:box-shadow .35s,background .35s}
.mate svg{position:relative;overflow:visible;transform-origin:50% 80%;transition:filter .35s}
.mate b{font-weight:700;transition:color .3s}.mate small{display:block;color:var(--mute);font-size:13px;line-height:1.3;margin-top:2px;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .4s var(--snap)}
.fx{position:absolute;inset:0;z-index:-1;opacity:0;transform:scale(.7);background:radial-gradient(60% 55% at 50% 38%,color-mix(in srgb,var(--c) 38%,transparent),transparent 72%);transition:opacity .35s,transform .6s var(--snap)}
@media(hover:hover){#crew .crew .mate:hover{transform:none;background:var(--panel);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent),0 24px 60px -24px color-mix(in srgb,var(--c) 45%,transparent)}
.mate:hover .fx{opacity:1;transform:none}.mate:hover b{color:var(--c)}.mate:hover small{opacity:1;transform:none}.mate:hover svg{filter:drop-shadow(0 10px 18px color-mix(in srgb,var(--c) 55%,transparent))}
.m-director:hover svg{animation:slam .7s var(--snap) both}.m-writer:hover svg{animation:scribble .8s ease-in-out both}.m-designer:hover svg{animation:twirl .85s var(--snap) both}.m-animator:hover svg{animation:bounce .8s ease-out both}.m-sound:hover svg{animation:beat .9s ease-in-out infinite}.m-critic:hover svg{animation:inspect .9s var(--snap) both}}
@media(hover:none){.mate small{opacity:1;transform:none}}
@keyframes slam{0%{transform:translateY(-34px) scale(1.1)}45%{transform:translateY(4px) scale(1.26,.9)}70%{transform:translateY(-6px) scale(1.08,1.14)}100%{transform:scale(1.14)}}
@keyframes scribble{0%,100%{transform:scale(1.12) rotate(0)}20%{transform:scale(1.14) rotate(-9deg) translateX(-5px)}45%{transform:scale(1.14) rotate(8deg) translateX(5px)}70%{transform:scale(1.14) rotate(-5deg) translateX(-3px)}}
@keyframes twirl{0%{transform:rotateY(0)}100%{transform:rotateY(360deg) scale(1.14)}}
@keyframes bounce{0%{transform:none}25%{transform:scale(1.2,.8)}50%{transform:translateY(-26px) scale(.88,1.18)}75%{transform:scale(1.14,.92)}100%{transform:scale(1.12)}}
@keyframes beat{0%,100%{transform:scale(1.08)}18%{transform:scale(1.24)}36%{transform:scale(1.08)}54%{transform:scale(1.18)}}
@keyframes inspect{0%{transform:none}55%{transform:scale(1.38) translateY(6px) rotate(-5deg)}100%{transform:scale(1.14)}}
@media(prefers-reduced-motion:reduce){.mate svg{animation:none!important}}
.mate svg{filter:drop-shadow(0 0 1px rgba(255,255,255,.6))}
@media(hover:hover){.mate:hover svg{filter:drop-shadow(0 0 1px rgba(255,255,255,.6)) drop-shadow(0 10px 18px color-mix(in srgb,var(--c) 55%,transparent))}}
#install .btn{margin-top:24px}#install .req{margin-top:20px;opacity:.9}
/* Crew are always alive; hovering one makes the others react. */
@keyframes i-director{0%,100%{transform:none}50%{transform:rotate(-3deg) translateY(2px)}}
@keyframes i-writer{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes i-designer{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(5deg)}}
@keyframes i-animator{0%,60%,100%{transform:none}70%{transform:scale(1.08,.93)}82%{transform:translateY(-10px) scale(.96,1.05)}}
@keyframes i-sound{0%,100%{transform:scale(1)}25%{transform:scale(1.05)}50%{transform:scale(1)}75%{transform:scale(1.03)}}
@keyframes i-critic{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
.mate svg{rotate:var(--lean,0deg);translate:var(--shift,0) var(--lift,0);scale:var(--react,1);transition:filter .35s,rotate .45s var(--snap),translate .45s var(--snap),scale .45s var(--snap)}
.m-director svg{animation:i-director 3.4s ease-in-out infinite}.m-writer svg{animation:i-writer 2.2s ease-in-out infinite}.m-designer svg{animation:i-designer 3s ease-in-out infinite}.m-animator svg{animation:i-animator 2.6s ease-out infinite}.m-sound svg{animation:i-sound 1.1s ease-in-out infinite}.m-critic svg{animation:i-critic 3.8s ease-in-out infinite}
@media(hover:hover){.m-director:hover svg{animation:slam .7s var(--snap) both,i-director 1.7s .7s ease-in-out infinite}.m-writer:hover svg{animation:scribble .8s ease-in-out both,i-writer .9s .8s ease-in-out infinite}.m-designer:hover svg{animation:twirl .85s var(--snap) both,i-designer 1.5s .85s ease-in-out infinite}.m-animator:hover svg{animation:bounce .8s ease-out both,i-animator 1.3s .8s ease-out infinite}.m-critic:hover svg{animation:inspect .9s var(--snap) both,i-critic 1.6s .9s ease-in-out infinite}}
.mate.watching{opacity:.82;transition:opacity .3s,box-shadow .35s,background .35s}
/* Secondary button: same box, clearly visible edge, so the pair reads as equal. */
.btn.ghost{background:#26231f;box-shadow:inset 0 0 0 1px #4a443e;color:var(--ink)}.btn.ghost:hover{background:#312d28}
.m-director svg [fill="#17120e"]{fill:#f4f1ec}
::selection{background:var(--signal);color:#fff}
#install ::selection{background:var(--ground);color:#fff}
/* Phone and tablet pass. */
#crew{padding-top:var(--sec)}
@media(max-width:980px){
.navin{flex-wrap:wrap;height:auto;padding-block:10px;row-gap:6px}.links{display:flex;order:3;width:100%;gap:22px;overflow-x:auto;scrollbar-width:none;font-size:14px;padding-block:4px}
html{scroll-padding-top:110px}
.stv{min-height:0}.stages{margin-top:72px}.tight,#crew{padding-top:72px}.ink{padding-block:72px}#install{margin-top:72px;padding-block:72px}
.sthead{margin-bottom:32px}.herorow{margin-top:20px}.btn{min-width:0}.cta{align-self:stretch;max-width:440px;width:100%}.mocknote .btn{width:auto}
}
@media(max-width:560px){h1{font-size:clamp(42px,12.5vw,56px)}.lede{font-size:18px}.sub{font-size:17px}.stlist{gap:44px}.foot{flex-direction:column;gap:6px}.stagebox{background-size:14px 14px}.astages{font-size:11px;padding:8px 10px;gap:0}.astatus{font-size:12px}.film{border-radius:5px}#strip{height:26px}#install h2{font-size:clamp(60px,18vw,88px)}.crew .mate svg{width:72%}}

div.buy{display:grid;gap:16px;max-width:760px;margin-inline:auto}.price{margin:0;font-size:18px}.price b{font-size:44px;font-weight:700}.devices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.device{display:grid;gap:4px;padding:16px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);opacity:.55;text-align:start}.device span{font-size:13px}.device.on{opacity:1;background:#ef3b2d;color:#fff;box-shadow:none;text-decoration:none;min-height:44px}.fine{margin:0;font-size:13px;opacity:.7}
@media (max-width:640px){.devices{grid-template-columns:1fr}}
:lang(ar) body{font-family:Thmanyah,Figtree,sans-serif}:lang(ar) :is(h1,h2,h3,#word,#install h2){font-family:Thmanyah,sans-serif;font-weight:800;letter-spacing:0}:lang(ar) h1{line-height:1.2}
.quiet{display:inline-flex;align-items:center}
/* Engine swap in the lede. */
.swap{position:relative;display:inline-block;height:1.5em;vertical-align:bottom;transition:width .5s var(--snap);color:var(--ink);font-weight:600;white-space:nowrap}
.eng{position:absolute;inset-inline-start:0;top:0;display:inline-flex;align-items:center;gap:.32em;opacity:0;transform:translateY(.7em);filter:blur(5px);transition:opacity .4s,transform .5s var(--snap),filter .4s}
.eng.on{opacity:1;transform:none;filter:none}.eng.off{opacity:0;transform:translateY(-.7em);filter:blur(5px)}
.eng i{width:1em;height:1em;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
@media(prefers-reduced-motion:reduce){.swap,.eng{transition:none}}
/* Closing ticket: a dark slate on the red field. */
.ticket{max-width:880px;margin:44px auto 0;background:var(--ground);color:var(--ink);border-radius:20px;overflow:hidden;text-align:start;box-shadow:0 40px 80px -30px rgba(0,0,0,.55)}
.slate{height:22px;background:repeating-linear-gradient(-68deg,var(--ink) 0 34px,var(--ground) 34px 68px);border-bottom:1px solid var(--line)}
.tmain{display:grid;grid-template-columns:1fr 1fr}.tprice,.tbuy{padding:36px}.tbuy{border-inline-start:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
#install .price{margin:0;font-size:inherit;color:var(--ink);line-height:1}.price b{font-size:clamp(72px,9vw,104px);font-weight:800;letter-spacing:-.05em}
#install .once{margin:10px 0 0;color:var(--mute);max-width:none}
.incl{list-style:none;margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--line);display:grid;gap:10px;font-size:15px}.incl li{display:flex;align-items:center;gap:10px}.incl li::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--signal)}
.btn.wide{width:100%;min-width:0;background:var(--signal);color:#fff;padding-inline:14px}.btn.wide:hover{background:#ff4c3e}#install .btn{margin-top:0}
#install .after{margin:12px 0 0;color:var(--mute);font-size:14px;max-width:none}
.soon{margin-top:24px;border-top:1px solid var(--line)}.soon span{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}.soon span:last-child{border:0;padding-bottom:0}.soon b{font-weight:600}.soon i{font-style:normal;color:var(--mute);font-size:13px}
#install .fine{margin:0;max-width:none;padding:16px 36px;border-top:1px solid var(--line);color:var(--mute);font-size:13px}
@media(max-width:700px){.tmain{grid-template-columns:1fr}.tprice,.tbuy{padding:24px}.tbuy{border-inline-start:0;border-top:1px solid var(--line)}#install .fine{padding:14px 24px}}
/* Phone header: one calm row, everything else in the sheet. */
.menubtn{display:none;width:44px;height:44px;position:relative}.menubtn i{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s var(--snap),top .3s var(--snap)}.menubtn i:first-child{top:17px}.menubtn i:last-child{top:25px}
.menubtn.open i:first-child{top:21px;transform:rotate(45deg)}.menubtn.open i:last-child{top:21px;transform:rotate(-45deg)}
.sheet{display:none}
@media(max-width:980px){.navin{flex-wrap:nowrap;height:64px;padding-block:0}.links{display:none}.menubtn{display:block;margin-inline-end:-10px}.navcta{display:none}
.sheet{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--snap);border-top:1px solid transparent}.sheet.open{grid-template-rows:1fr;border-color:var(--line)}.sheetin{overflow:hidden;min-height:0;display:flex;flex-direction:column;padding-inline:var(--gut)}.sheetin>a:not(.btn){padding:14px 0;font-size:20px;font-weight:600;border-bottom:1px solid var(--line)}.sheetin .btn{margin-block:16px;min-width:0}
.sheet:not(.open) .sheetin{visibility:hidden;transition:visibility .35s}#nav{background:rgba(12,11,10,.9)}html{scroll-padding-top:72px}}
@media(max-width:560px){h1{font-size:clamp(36px,11.1vw,60px)}:lang(ar) h1{font-size:clamp(44px,13vw,64px)}.swap{vertical-align:bottom}}
/* Crew spotlight on touch, same moves as hover. */
.mate.act .fx{opacity:1;transform:none}.mate.act b{color:var(--c)}#crew .crew .mate.act{box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent),0 24px 60px -24px color-mix(in srgb,var(--c) 45%,transparent)}
.mate.act svg{filter:drop-shadow(0 0 1px rgba(255,255,255,.6)) drop-shadow(0 10px 18px color-mix(in srgb,var(--c) 55%,transparent))}
.m-director.act svg{animation:slam .7s var(--snap) both,i-director 1.7s .7s ease-in-out infinite}.m-writer.act svg{animation:scribble .8s ease-in-out both,i-writer .9s .8s ease-in-out infinite}.m-designer.act svg{animation:twirl .85s var(--snap) both,i-designer 1.5s .85s ease-in-out infinite}.m-animator.act svg{animation:bounce .8s ease-out both,i-animator 1.3s .8s ease-out infinite}.m-sound.act svg{animation:beat .9s ease-in-out infinite}.m-critic.act svg{animation:inspect .9s var(--snap) both,i-critic 1.6s .9s ease-in-out infinite}
.build{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-content:center}.bshot{aspect-ratio:4/3;border-radius:6px;display:grid;place-items:center;font-weight:800;font-size:clamp(13px,1.3vw,18px);letter-spacing:-.02em}.bshot.pending{background:repeating-linear-gradient(-45deg,var(--line) 0 6px,transparent 6px 12px);box-shadow:inset 0 0 0 1px var(--line)}
.bline{grid-column:1/-1;height:3px;border-radius:2px;background:var(--line);margin-top:14px;overflow:hidden}.bline i{display:block;height:100%;width:80%;background:var(--signal)}.build p{grid-column:1/-1;margin:0;color:var(--mute);font-size:14px}
.m-sound svg [stroke="#17120e"]{stroke:#f4f1ec}.m-sound svg [fill="#17120e"]{fill:#f4f1ec}
/* Crew review 3. */
.stages{height:400vh}#crew{padding-top:clamp(72px,8vw,112px)}#check{background:var(--panel);border-block:1px solid var(--line);margin-top:0}
.facts{margin:0 0 24px;color:var(--mute);font-size:14px;text-align:end}.gate b{font-weight:500}.gbtn{background:var(--ink);color:var(--ground);border-radius:8px;padding:6px 13px;font-weight:650;font-size:13px}
.bshot,.gate li{transition:opacity .3s,transform .4s var(--snap)}.bshot.wait{opacity:.14;transform:scale(.94)}.gate li.wait{opacity:.2}.bline i{transition:width .2s linear}
.links a[aria-current]{color:var(--ink)}.mocknote .btn{min-width:0;height:44px;min-height:44px}#install .fine{opacity:1}html{-webkit-tap-highlight-color:transparent;scroll-padding-top:69px}.sheetin a:active{color:var(--signal)}
#crew,#check,#install{scroll-margin-top:0}
.buybar{display:none}
@media(max-width:980px){.sheet{position:absolute;inset-inline:0;top:100%;background:var(--ground);border-bottom:1px solid var(--line)}.own>div{border-radius:0!important}.own>div:first-of-type{border-radius:18px 18px 0 0!important}.own>div:last-child{border-radius:0 0 18px 18px!important}.facts{text-align:start}
.buybar{display:flex;position:fixed;z-index:15;inset-inline:12px;bottom:calc(12px + env(safe-area-inset-bottom));align-items:center;justify-content:space-between;background:var(--raise);box-shadow:0 0 0 1px #4a443e,0 16px 40px rgba(0,0,0,.6);border-radius:14px;padding:8px 8px 8px 16px;font-size:14px;color:var(--mute);transform:translateY(90px);transition:transform .35s var(--snap)}.buybar.show{transform:none}.buybar b{background:var(--ink);color:var(--ground);padding:10px 14px;border-radius:9px;font-weight:650}}
@media(max-width:560px){.lede{min-height:4.5lh}.crew,#crew .crew{grid-template-columns:repeat(3,1fr);gap:6px}#crew .crew .mate{padding:14px 4px 10px;font-size:13px}#crew .crew .mate small{font-size:11px}#crew .crew svg{width:76%;margin-bottom:6px}}
/* Feedback layer. */
.st.on{pointer-events:auto}
.btn{transition:background .15s,transform .15s var(--snap),box-shadow .2s}@media(hover:hover){.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px -10px rgba(244,241,236,.35)}.btn.wide:hover{box-shadow:0 10px 28px -10px var(--signal)}}.btn:active,.buybar b:active{transform:scale(.97)}
.btn.loading{pointer-events:none;opacity:.85}.btn.loading::before{content:'';width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.seg span,.ideas>div,.menu>div,.only span,.gbtn{cursor:pointer;user-select:none;transition:background .18s,color .18s,box-shadow .18s,transform .15s var(--snap)}
.seg span:active,.ideas>div:active,.menu>div:active,.only span:active,.gbtn:active{transform:scale(.97)}
@media(hover:hover){.seg span:not(.on):hover,.only span:not(.on):hover{color:var(--ink);background:#2a2724}.ideas>div:not(.on):hover,.menu>div:not(.on):hover{box-shadow:0 0 0 1px #4a443e}}
.gbtn.busy{pointer-events:none;opacity:.7}.gate .fixed span{color:var(--mute)}.gate .fixed i{animation:pop .4s var(--snap)}@keyframes pop{0%{transform:scale(.4)}60%{transform:scale(1.25)}}.ideas i{animation:pop .35s var(--snap)}
.toast{position:fixed;z-index:30;inset-inline-start:50%;bottom:24px;translate:-50% 0;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);background:var(--raise);color:var(--ink);box-shadow:0 0 0 1px #4a443e,0 16px 40px rgba(0,0,0,.6);border-radius:12px;padding:10px 14px;font-size:15px;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s,transform .3s var(--snap)}.toast.show{opacity:1;transform:none;pointer-events:auto}[dir=rtl] .toast{translate:50% 0}.toast i{flex:none;display:grid;place-items:center;color:var(--ok)}.toast button{color:var(--signal);font-weight:700;min-height:32px;padding-inline:6px;white-space:nowrap}
@media(max-width:980px){.toast{bottom:84px}}
h2.arrive{animation:arrive .9s var(--snap)}@keyframes arrive{0%{opacity:.35;transform:translateY(10px)}100%{opacity:1;transform:none}}
details{transition:background .2s}summary:active{opacity:.7}details[open] p{animation:reveal .3s var(--snap)}@keyframes reveal{from{opacity:0;transform:translateY(-4px)}}
.links a{transition:color .15s}@media(prefers-reduced-motion:reduce){.btn,.toast{transition:none}.btn:hover{transform:none}h2.arrive,details[open] p{animation:none}}
.gbtn.busy{opacity:1;background:none;color:var(--ok)!important;padding-inline:0}
.tryit{display:flex;align-items:center;gap:8px;max-width:640px;margin:18px auto 0;background:var(--panel);box-shadow:0 0 0 1px var(--line);border-radius:14px;padding:7px 7px 7px 16px;transition:box-shadow .2s}[dir=rtl] .tryit{padding:7px 16px 7px 7px}.tryit:focus-within{box-shadow:0 0 0 1px var(--signal),0 0 32px -8px var(--signal)}.tryit input{flex:1;min-width:0;height:36px;background:none;border:0;outline:0;color:var(--ink);font:500 16px var(--ui)}.tryit input::placeholder{color:var(--mute)}.tryit .send{flex:none;width:36px;height:36px;border-radius:10px;background:var(--signal);color:#fff;display:grid;place-items:center;transition:transform .15s var(--snap)}.tryit .send:active{transform:scale(.92)}
html:not(.js) .tryit{display:none}
/* Crew piano. */
#crew .crew .mate{cursor:pointer;user-select:none;-webkit-user-select:none}
.note{position:absolute;top:12px;inset-inline-end:14px;color:var(--c);font-weight:800;font-size:18px;pointer-events:none;animation:noteup .8s var(--snap) forwards}
@keyframes noteup{0%{opacity:0;transform:translateY(14px) scale(.7)}25%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-20px)}}
.mate.struck{animation:struck .3s var(--snap)}@keyframes struck{0%{transform:translateY(5px) scale(.98)}100%{transform:none}}
.playhint{margin:18px 0 0;color:var(--mute);font-size:15px}
@media(prefers-reduced-motion:reduce){.note,.mate.struck{animation:none}}