/* Screen Recorder Pro - site styles */
:root{
  --bg:#081012; --bg2:#0C171A; --panel:#111E22; --panel2:#15262B; --line:#1E3237; --line2:#2A454B;
  --text:#E7F1F0; --mute:#8CA5A6; --dim:#5F7A7C;
  --accent:#2DD4BF; --accent2:#5EEAD4; --ink:#04201C; --rec:#FF5A5F; --gold:#F2C14E;
  --r-s:8px; --r-m:14px; --r-l:22px;
  --font-d:"Bricolage Grotesque","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --font-b:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;
  --maxw:1180px;
  --strong:#fff; --lead:#B5C9C9; --popbg:#112529; --navbg:rgba(8,16,18,.78); color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font-b);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{width:min(var(--maxw),100% - 40px);margin-inline:auto}
.skip{position:absolute;inset-inline-start:8px;top:8px;transform:translateY(-250%);background:var(--accent);color:var(--ink);padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{transform:none}

/* type */
h1,h2,h3,h4{font-family:var(--font-d);line-height:1.08;letter-spacing:-.025em;font-weight:700;color:var(--strong)}
h1{font-size:clamp(2.3rem,4.6vw,3.7rem);font-weight:800;letter-spacing:-.04em}
h2{font-size:clamp(1.9rem,3.8vw,3rem)}
h3{font-size:1.28rem;letter-spacing:-.015em;line-height:1.2}
p{color:var(--mute)}
.lead{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--lead);max-width:56ch}
.small{font-size:.9rem}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:var(--navbg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.brand{display:flex;align-items:center;gap:11px;color:var(--strong);font-family:var(--font-d);font-weight:700;font-size:1.12rem;letter-spacing:-.02em}
.brand:hover{color:var(--strong)}
.brand-mark{width:30px;height:30px;border-radius:9px;background:var(--panel2);border:1px solid var(--line2);display:grid;place-items:center}
.brand-mark i{width:11px;height:11px;border-radius:50%;background:var(--rec);box-shadow:0 0 0 4px rgba(255,90,95,.18);animation:pulse 2s infinite}
.menu{display:flex;align-items:center;gap:6px;list-style:none}
.menu a{color:var(--mute);padding:8px 13px;border-radius:9px;font-size:.96rem;font-weight:500;transition:color .15s,background .15s}
.menu a:hover{color:var(--strong);background:var(--panel)}
.menu a[aria-current="page"]{color:var(--strong);background:var(--panel2)}
.nav-cta{display:flex;gap:10px;align-items:center}
.burger{display:none;background:var(--panel);border:1px solid var(--line2);color:var(--strong);width:42px;height:42px;border-radius:10px;cursor:pointer;font-size:1.15rem}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:600 .98rem/1 var(--font-b);padding:14px 22px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:transform .15s,background .15s,border-color .15s,box-shadow .15s;white-space:nowrap}
.btn-primary{background:var(--accent);color:var(--ink)}
.btn-primary:hover{background:var(--accent2);color:var(--ink);transform:translateY(-2px);box-shadow:0 10px 30px -10px rgba(45,212,191,.7)}
.btn-ghost{background:transparent;color:var(--strong);border-color:var(--line2)}
.btn-ghost:hover{background:var(--panel);color:var(--strong);border-color:var(--dim)}
.btn-sm{padding:10px 16px;font-size:.9rem;border-radius:10px}
.btn-block{width:100%}
.btn svg{width:18px;height:18px;flex:none}

/* hero */
.hero{position:relative;padding:76px 0 40px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-200px -10% auto -10%;height:700px;background:radial-gradient(60% 60% at 70% 30%,rgba(45,212,191,.16),transparent 70%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;position:relative}
.hero h1{margin-bottom:22px}
.hero .lead{margin-bottom:34px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--dim);font-size:.9rem}
.hero-meta span{display:inline-flex;align-items:center;gap:7px}
.hero-meta svg{width:15px;height:15px;color:var(--accent)}

/* recorder mock */
.rig{position:relative}
.win{background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-m);box-shadow:0 50px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02);overflow:hidden}
.win-bar{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--bg2);border-bottom:1px solid var(--line)}
.win-dots{display:flex;gap:6px}
.win-dots i{width:10px;height:10px;border-radius:50%;background:var(--line2)}
.win-title{font-size:.78rem;color:var(--dim);margin-inline:auto}
.shot{aspect-ratio:16/10;background:var(--bg2);overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.rec-chip{position:absolute;top:58px;left:16px;display:flex;align-items:center;gap:9px;background:rgba(8,16,18,.82);backdrop-filter:blur(8px);border:1px solid var(--line2);padding:7px 12px;border-radius:999px;font:600 .82rem/1 var(--font-b);color:var(--strong);font-variant-numeric:tabular-nums}
.rec-chip i{width:9px;height:9px;border-radius:50%;background:var(--rec);animation:pulse 1.4s infinite}
.timeline{position:relative;padding:14px 16px 16px;background:var(--bg2);border-top:1px solid var(--line)}
.tl-track{position:relative;height:34px;border-radius:8px;background:var(--panel2);overflow:hidden;display:flex;align-items:flex-end;gap:2px;padding:4px}
.tl-track b{flex:1;background:var(--line2);border-radius:2px;min-height:4px;transition:background .3s}
.tl-track b.on{background:var(--accent)}
.tl-play{position:absolute;top:10px;bottom:12px;width:2px;background:var(--rec);left:16px;box-shadow:0 0 12px var(--rec)}
.tl-play::before{content:"";position:absolute;top:-4px;left:-4px;width:10px;height:10px;border-radius:50%;background:var(--rec)}
.tl-marks{position:relative;height:22px;margin-top:8px;font-size:.72rem;color:var(--dim)}
.tl-marks span{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px;white-space:nowrap}
.tl-marks span::before{content:"";width:1px;height:6px;background:var(--dim)}
.float-card{position:absolute;right:-18px;bottom:96px;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-m);padding:14px 16px;box-shadow:0 30px 60px -25px rgba(0,0,0,.9);width:250px}
.float-card .k{font-size:.76rem;color:var(--dim)}
.float-card .v{font:700 1.05rem var(--font-d);color:var(--strong)}
.float-card .bars{display:flex;gap:3px;align-items:flex-end;height:26px;margin-top:8px}
.float-card .bars i{flex:1;background:var(--accent);border-radius:2px;animation:bar 1.1s ease-in-out infinite}
.float-card .bars i:nth-child(2n){animation-delay:.2s}.float-card .bars i:nth-child(3n){animation-delay:.45s}.float-card .bars i:nth-child(5n){animation-delay:.7s}

/* ruler divider */
.ruler{height:14px;margin:0;background:repeating-linear-gradient(90deg,var(--line2) 0 1px,transparent 1px 12px),repeating-linear-gradient(90deg,var(--dim) 0 1px,transparent 1px 120px);background-size:100% 6px,100% 14px;background-repeat:repeat-x;background-position:0 100%,0 100%;opacity:.55}

/* sections */
section{padding:104px 0}
.sec-head{max-width:720px;margin-bottom:56px}
.sec-head p{margin-top:16px;font-size:1.08rem}
.sec-head.center{margin-inline:auto;text-align:center}
.alt{background:var(--bg2);border-block:1px solid var(--line)}

/* spec strip */
.specs{padding:0}
.specs-row{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-l);background:var(--bg2);overflow:hidden}
.specs-row div{padding:26px 28px;border-right:1px solid var(--line)}
.specs-row div:last-child{border-right:0}
.specs-row strong{display:block;font:700 1.55rem var(--font-d);color:var(--strong);letter-spacing:-.03em}
.specs-row span{color:var(--mute);font-size:.92rem}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.cell{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);padding:30px;position:relative;overflow:hidden;transition:border-color .2s}
.cell:hover{border-color:var(--line2)}
.cell h3{margin-bottom:10px}
.cell p{font-size:.98rem}
.c-a{grid-column:span 4}.c-b{grid-column:span 2}.c-c{grid-column:span 2}.c-d{grid-column:span 2}.c-e{grid-column:span 2}.c-f{grid-column:span 3}.c-g{grid-column:span 3}
.ico{width:44px;height:44px;border-radius:12px;background:rgba(45,212,191,.1);border:1px solid rgba(45,212,191,.28);display:grid;place-items:center;margin-bottom:20px;color:var(--accent)}
.ico svg{width:22px;height:22px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chip{font-size:.82rem;color:var(--lead);background:var(--bg2);border:1px solid var(--line2);padding:6px 12px;border-radius:999px}
.fpsbars{display:flex;gap:4px;align-items:flex-end;height:90px;margin-top:26px}
.fpsbars i{flex:1;background:linear-gradient(var(--accent),rgba(45,212,191,.25));border-radius:3px 3px 0 0}

/* privacy demo */
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.form-mock{background:#fff;color:#1b2b2b;border-radius:var(--r-m);padding:22px;box-shadow:0 40px 70px -35px rgba(0,0,0,.9);font-size:.95rem}
.form-mock .row{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.form-mock label{font-size:.76rem;color:#5b6f6f;font-weight:600}
.form-mock .field{border:1px solid #cfdcdc;border-radius:8px;padding:10px 12px;font-variant-numeric:tabular-nums;transition:filter .35s,background .35s}
.form-mock.shielded .sens{filter:blur(8px);background:#e7efef;user-select:none}
.form-mock .fm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-weight:700}
.form-mock .badge{font-size:.72rem;background:#e6faf6;color:#0a6b5e;padding:4px 9px;border-radius:999px;font-weight:700;display:inline-flex;gap:6px;align-items:center}
.switch{display:inline-flex;align-items:center;gap:12px;margin-top:26px;cursor:pointer;background:var(--panel);border:1px solid var(--line2);padding:10px 16px 10px 12px;border-radius:999px;color:var(--strong);font:600 .95rem var(--font-b)}
.switch .tr{width:42px;height:24px;border-radius:999px;background:var(--line2);position:relative;transition:background .2s}
.switch .tr::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}
.switch[aria-pressed="true"] .tr{background:var(--accent)}
.switch[aria-pressed="true"] .tr::after{transform:translateX(18px)}
.ticks{list-style:none;margin-top:26px;display:grid;gap:12px}
.ticks li{display:flex;gap:12px;color:var(--lead);font-size:1rem}
.ticks svg{flex:none;width:20px;height:20px;color:var(--accent);margin-top:3px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:var(--panel)}
.step{padding:34px;border-right:1px solid var(--line);position:relative}
.step:last-child{border-right:0}
.step .n{font:800 3.2rem/1 var(--font-d);color:var(--line2);letter-spacing:-.05em;margin-bottom:22px}
.step h3{margin-bottom:10px}

/* plans */
.billing{display:inline-flex;background:var(--panel);border:1px solid var(--line2);border-radius:999px;padding:4px;margin-bottom:44px}
.billing button{background:none;border:0;color:var(--mute);font:600 .94rem var(--font-b);padding:10px 20px;border-radius:999px;cursor:pointer;transition:all .2s}
.billing button[aria-pressed="true"]{background:var(--accent);color:var(--ink)}
.billing em{font-style:normal;font-size:.76rem;margin-left:6px;opacity:.85}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);padding:32px;display:flex;flex-direction:column;position:relative}
.plan.pop{border:1.5px solid var(--accent);background:linear-gradient(180deg,var(--popbg),var(--panel) 60%)}
.plan .tag{position:absolute;top:-13px;right:24px;background:var(--accent);color:var(--ink);font:700 .76rem var(--font-b);padding:5px 12px;border-radius:999px}
.plan h3{font-size:1.4rem}
.plan .for{font-size:.92rem;margin:4px 0 22px}
.price{font:800 3rem/1 var(--font-d);color:var(--strong);letter-spacing:-.04em}
.price small{font:500 1rem var(--font-b);color:var(--mute);letter-spacing:0;margin-left:6px}
.plan .note{font-size:.88rem;min-height:1.4em;margin:8px 0 24px;color:var(--dim)}
.plan ul{list-style:none;display:grid;gap:11px;margin-bottom:30px;flex:1;align-content:start;padding-top:22px;border-top:1px solid var(--line)}
.plan li{display:flex;gap:11px;color:var(--lead);font-size:.96rem}
.plan li svg{flex:none;width:18px;height:18px;color:var(--accent);margin-top:3px}
.plan li.off{color:var(--dim)}
.plan li.off svg{color:var(--dim)}

/* table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:640px}
th,td{padding:16px 22px;text-align:left;border-bottom:1px solid var(--line);font-size:.97rem}
th{font:700 .95rem var(--font-d);color:var(--strong);background:var(--bg2)}
td{color:var(--lead)}
tr:last-child td{border-bottom:0}
td:not(:first-child),th:not(:first-child){text-align:center}
.yes{color:var(--accent);font-weight:700}.no{color:var(--dim)}

/* faq */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:10px}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);transition:border-color .2s}
.faq details[open]{border-color:var(--line2)}
.faq summary{cursor:pointer;list-style:none;padding:20px 24px;font:600 1.06rem var(--font-d);color:var(--strong);display:flex;justify-content:space-between;gap:20px;align-items:center;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.6rem/1 var(--font-b);color:var(--accent);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 24px 22px;font-size:1rem}

/* cta */
.cta{text-align:center;padding:120px 0}
.cta-box{border:1px solid var(--line2);border-radius:28px;padding:80px 28px;background:radial-gradient(70% 120% at 50% 0%,rgba(45,212,191,.14),transparent 70%),var(--panel);position:relative;overflow:hidden}
.cta h2{max-width:20ch;margin:0 auto 18px}
.cta p{max-width:50ch;margin:0 auto 34px}
.cta .hero-actions{justify-content:center;margin:0}

/* page header */
.phead{padding:84px 0 56px;border-bottom:1px solid var(--line);background:radial-gradient(60% 100% at 80% 0%,rgba(45,212,191,.1),transparent 70%)}
.phead h1{font-size:clamp(2.2rem,5vw,3.8rem);max-width:18ch;margin-bottom:18px}

/* features page rows */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:70px 0;border-bottom:1px solid var(--line)}
.frow:last-child{border-bottom:0}
.frow.flip .ftxt{order:2}
.frow h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:16px}
.fvis{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);padding:34px;min-height:260px;display:grid;place-items:center}
.fvis .big{width:84px;height:84px;color:var(--accent)}
.fvis .big svg{width:100%;height:100%}

/* download */
.dl-card{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);padding:34px}
.panel h3{margin-bottom:14px}
.kv{display:grid;gap:0}
.kv div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.96rem}
.kv div:last-child{border-bottom:0}
.kv span{color:var(--mute)}.kv b{color:var(--strong);font-weight:600;text-align:right}
.alert{border:1px solid rgba(242,193,78,.4);background:rgba(242,193,78,.07);border-radius:var(--r-m);padding:18px 20px;color:#E9D9A8;font-size:.95rem}
.alert b{color:var(--gold)}

/* legal */
.legal{max-width:760px}
.legal h2{font-size:1.5rem;margin:48px 0 14px}
.legal p,.legal li{color:var(--lead);font-size:1.02rem;margin-bottom:14px}
.legal ul{padding-left:22px;margin-bottom:14px}
.legal .upd{color:var(--dim);font-size:.92rem}

/* contact */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* footer */
footer{border-top:1px solid var(--line);padding:64px 0 36px;background:var(--bg2)}
.foot{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;margin-bottom:48px}
.foot h4{font:600 .95rem var(--font-d);color:var(--strong);margin-bottom:14px;letter-spacing:0}
.foot ul{list-style:none;display:grid;gap:9px}
.foot a{color:var(--mute);font-size:.94rem}
.foot a:hover{color:var(--strong)}
.foot p{font-size:.92rem;max-width:34ch;margin-top:14px}
.legalline{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);padding-top:24px;color:var(--dim);font-size:.88rem}

/* motion */
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
@keyframes bar{0%,100%{height:20%}50%{height:100%}}
.hero .rig{animation:rise .9s cubic-bezier(.2,.7,.2,1) both .1s}
.hero h1,.hero .lead,.hero-actions,.hero-meta{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero .lead{animation-delay:.08s}.hero-actions{animation-delay:.16s}.hero-meta{animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* responsive */
@media (max-width:980px){
  .hero-grid,.demo-grid,.frow,.dl-card{grid-template-columns:1fr;gap:40px}
  .frow.flip .ftxt{order:0}
  .float-card{right:10px;bottom:90px}
  .plans,.cards3,.steps{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:0}
  .specs-row{grid-template-columns:1fr 1fr}.specs-row div:nth-child(2){border-right:0}.specs-row div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .bento{grid-template-columns:1fr 1fr}.c-a,.c-b,.c-c,.c-d,.c-e,.c-f,.c-g{grid-column:span 2}
  .foot{grid-template-columns:1fr 1fr}
  section{padding:76px 0}
  .menu{position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--bg);border-bottom:1px solid var(--line);padding:12px 20px 20px;display:none}
  .menu.open{display:flex}
  .burger{display:block}
  .nav-cta .btn{display:none}
}
@media (max-width:560px){
  .hero{padding-top:44px}
  .float-card{display:none}
  .specs-row{grid-template-columns:1fr}.specs-row div{border-right:0!important;border-bottom:1px solid var(--line)}.specs-row div:last-child{border-bottom:0}
  .foot{grid-template-columns:1fr}
  .cta-box{padding:56px 20px}
  .btn{padding:14px 18px}
}

/* ===== animated product stage (hero) ===== */
.stage{--D:5.6s;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-m);overflow:hidden;box-shadow:0 60px 100px -45px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.02);font-size:clamp(11px,1.05vw,14px)}
.st-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg2);border-bottom:1px solid var(--line)}
.st-rec{margin-left:auto;display:inline-flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line2);border-radius:999px;padding:4px 11px;font:600 .82em/1 var(--font-b);color:var(--lead);font-variant-numeric:tabular-nums;transition:all .3s}
.st-rec i{width:.7em;height:.7em;border-radius:50%;background:var(--dim);transition:background .3s}
.st-rec.live{color:var(--strong);border-color:rgba(255,90,95,.55)}
.st-rec.live i{background:var(--rec);animation:pulse 1.2s infinite}
.st-screen{position:relative;aspect-ratio:16/10;background:#0A1519;overflow:hidden}
.pg{position:absolute;inset:0;padding:5.5%}
.pg-nav{display:flex;align-items:center;gap:2.2%;margin-bottom:3.5%}
.pg-nav i{width:6%;height:1.5em;border-radius:6px;background:var(--accent)}
.pg-nav span{width:10%;height:.7em;border-radius:99px;background:var(--line2)}
.pg-nav em{margin-left:auto;width:11%;height:1.6em;border-radius:8px;background:var(--panel2)}
.pg-body{display:grid;grid-template-columns:1.35fr 1fr;gap:3.5%;height:78%}
.pg-chart{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:5%;display:flex;flex-direction:column;gap:6%}
.pg-h{height:.9em;width:42%;border-radius:99px;background:var(--line2)}
.pg-bars{flex:1;display:flex;align-items:flex-end;gap:3%}
.pg-bars b{flex:1;background:linear-gradient(var(--accent),rgba(45,212,191,.2));border-radius:4px 4px 0 0;animation:busy 1.6s ease-in-out infinite}
.pg-l{height:.6em;border-radius:99px;background:var(--line);width:90%}.pg-l.s{width:60%}
.pg-card{background:#fff;border-radius:12px;padding:6% 7%;display:flex;flex-direction:column;gap:2%;color:#1b2b2b}
.pg-logo{width:34%;height:1.2em;border-radius:6px;background:#0d2a2a;margin-bottom:6%}
.pg-lab{font-size:.78em;font-weight:700;color:#5b6f6f}
.pg-f{border:1px solid #cfdcdc;border-radius:7px;padding:.55em .7em;font-size:.9em;margin-bottom:4%;transition:filter .5s,background .5s;white-space:nowrap;overflow:hidden}
.pg-btn{margin-top:auto;height:2.1em;border-radius:8px;background:#0d9488}
@keyframes busy{0%,100%{height:25%}50%{height:95%}}
.pg-bars b:nth-child(1){animation-delay:-.1s}.pg-bars b:nth-child(2){animation-delay:-.5s}.pg-bars b:nth-child(3){animation-delay:-.9s}.pg-bars b:nth-child(4){animation-delay:-.3s}.pg-bars b:nth-child(5){animation-delay:-1.2s}.pg-bars b:nth-child(6){animation-delay:-.7s}.pg-bars b:nth-child(7){animation-delay:-1.4s}.pg-bars b:nth-child(8){animation-delay:-.2s}.pg-bars b:nth-child(9){animation-delay:-1s}

/* selection frame */
.sel{position:absolute;inset:2.5%;border:2px dashed var(--accent);border-radius:6px;transition:border-color .4s,opacity .4s;pointer-events:none}
.sel .h{position:absolute;width:10px;height:10px;background:#fff;border:2px solid var(--accent);border-radius:2px;transition:border-color .4s}
.sel .tl{left:-6px;top:-6px}.sel .tr{right:-6px;top:-6px}.sel .bl{left:-6px;bottom:-6px}.sel .br{right:-6px;bottom:-6px}
.seltag{position:absolute;left:.7em;bottom:.7em;background:var(--accent);color:var(--ink);font:700 .78em/1 var(--font-b);padding:.45em .7em;border-radius:6px;transition:opacity .3s}
.stage:not([data-scene="0"]) .sel{border-style:solid;border-color:rgba(255,90,95,.7)}
.stage:not([data-scene="0"]) .sel .h,.stage:not([data-scene="0"]) .seltag{opacity:0}
.stage[data-scene="0"] .sel{animation:selDraw 1.3s cubic-bezier(.2,.8,.2,1) both .2s}
@keyframes selDraw{from{inset:32% 30% 30% 34%;opacity:.4}to{inset:2.5%;opacity:1}}

/* keys + countdown */
.keys{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);display:flex;gap:.45em;opacity:0;transition:opacity .35s}
.keys kbd{font:700 .85em/1 var(--font-b);color:var(--strong);background:var(--panel2);border:1px solid var(--line2);border-bottom-width:3px;border-radius:7px;padding:.65em .9em;box-shadow:0 8px 20px -8px #000;transition:all .12s}
.stage[data-scene="0"] .keys{opacity:1;transition-delay:1.5s}
.stage[data-scene="0"] .k-r{animation:keyp .5s 2.4s both}
@keyframes keyp{40%{transform:translateY(3px);background:var(--accent);color:var(--ink);border-color:var(--accent2)}100%{background:var(--accent);color:var(--ink);border-color:var(--accent2)}}
.countdown{position:absolute;inset:0;display:grid;place-items:center;font:800 7em/1 var(--font-d);color:var(--strong);opacity:0;text-shadow:0 0 60px rgba(45,212,191,.8);pointer-events:none;transform:scale(.8)}
.countdown.show{animation:cdp .9s ease-out both}
@keyframes cdp{0%{opacity:0;transform:scale(1.5)}25%{opacity:1}100%{opacity:0;transform:scale(.8)}}

/* smooth HUD */
.hud{position:absolute;left:5%;bottom:6%;width:34%;background:rgba(8,16,18,.9);backdrop-filter:blur(8px);border:1px solid var(--line2);border-radius:12px;padding:.9em 1em;opacity:0;transform:translateY(8px);transition:all .5s}
.hud-k{font:600 .8em var(--font-b);color:var(--mute);margin-bottom:.4em}
.hud svg{width:100%;height:2.4em;display:block}
.hud-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:6 0}
.hud-chip{margin-top:.7em;display:inline-block;font:600 .74em var(--font-b);color:var(--ink);background:var(--accent);padding:.35em .7em;border-radius:99px}
.stage[data-scene="1"] .hud{opacity:1;transform:none;transition-delay:.4s}
.stage[data-scene="1"] .pg-bars b{animation-duration:.7s}

/* privacy */
.stage[data-scene="2"] .sens{filter:blur(7px);background:#e5eded;transition-delay:1.3s}
.shield{position:absolute;right:6%;bottom:12%;display:flex;align-items:center;gap:.6em;background:rgba(8,16,18,.9);border:1px solid var(--accent);color:var(--strong);border-radius:99px;padding:.6em 1em .6em .8em;font:600 .86em var(--font-b);opacity:0;transform:translateY(10px) scale(.95);transition:all .5s}
.shield svg{width:1.4em;height:1.4em;color:var(--accent)}
.stage[data-scene="2"] .shield{opacity:1;transform:none;transition-delay:1.5s}
.pg-card{position:relative;overflow:hidden}
.pg-card::after{content:"";position:absolute;left:0;right:0;top:-30%;height:30%;background:linear-gradient(transparent,rgba(45,212,191,.45),transparent);opacity:0}
.stage[data-scene="2"] .pg-card::after{animation:sweep 1.3s ease-in-out .3s both}
@keyframes sweep{0%{top:-30%;opacity:1}100%{top:110%;opacity:1}}

/* subtitles + search */
.subs{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);max-width:82%;background:rgba(0,0,0,.78);color:var(--strong);font:600 1em/1.35 var(--font-b);padding:.5em .9em;border-radius:8px;text-align:center;opacity:0;transition:opacity .3s}
.stage[data-scene="3"] .subs{opacity:1}
.searchbox{position:absolute;left:5%;top:5%;width:52%;display:flex;align-items:center;gap:.6em;background:rgba(8,16,18,.92);border:1px solid var(--accent);border-radius:99px;padding:.6em 1em;color:var(--strong);font:600 .95em var(--font-b);opacity:0;transform:translateY(-8px);transition:all .5s}
.searchbox svg{width:1.3em;height:1.3em;color:var(--accent);flex:none}
.searchbox u{margin-left:auto;text-decoration:none;font-size:.82em;color:var(--ink);background:var(--accent);padding:.25em .65em;border-radius:99px;opacity:0;transition:opacity .3s}
.searchbox u.on{opacity:1}
.stage[data-scene="3"] .searchbox{opacity:1;transform:none;transition-delay:.3s}
#qTxt::after{content:"";display:inline-block;width:2px;height:1em;background:#fff;margin-left:2px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* timeline strip */
.st-tl{position:relative;padding:12px 16px 10px;background:var(--bg2);border-top:1px solid var(--line)}
.st-tl .tl-track{height:30px}
.st-tl .tl-play{top:8px;bottom:26px}
.chap{position:relative;height:1.6em;margin-top:6px;font-size:.78em;color:var(--dim)}
.chap span{position:absolute;transform:translateX(-50%);padding:.15em .6em;border:1px solid var(--line2);border-radius:99px;background:var(--panel);opacity:0;transition:opacity .4s;white-space:nowrap}
.stage[data-scene="3"] .chap span{opacity:1}
.stage[data-scene="3"] .chap span:nth-child(2){transition-delay:.5s}.stage[data-scene="3"] .chap span:nth-child(3){transition-delay:1s}
.hitmark{position:absolute;top:10px;width:3px;height:30px;margin-left:16px;background:var(--gold);border-radius:2px;box-shadow:0 0 12px var(--gold);opacity:0;transition:opacity .3s}
.hitmark.on{opacity:1}

/* caption + tabs */
.st-cap{padding:14px 18px 6px;display:flex;flex-direction:column;gap:2px;min-height:4.4em;border-top:1px solid var(--line)}
.st-cap b{font:700 1.18em var(--font-d);color:var(--strong);letter-spacing:-.01em}
.st-cap span{color:var(--mute);font-size:.98em}
.st-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px 14px 14px}
.st-tabs button{position:relative;overflow:hidden;background:var(--bg2);border:1px solid var(--line);color:var(--mute);font:600 .88em var(--font-b);padding:.8em .4em;border-radius:9px;cursor:pointer;transition:color .2s,border-color .2s}
.st-tabs button:hover{color:var(--strong);border-color:var(--line2)}
.st-tabs button.on{color:var(--strong);border-color:var(--accent)}
.st-tabs .fill{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--accent)}
.st-tabs button.on .fill{animation:fillbar var(--D) linear forwards}
.stage.paused .st-tabs button.on .fill{animation:none;width:100%}
@keyframes fillbar{to{width:100%}}
@media (max-width:560px){.stage{font-size:11px}.countdown{font-size:5em}.hud{width:38%}.st-cap span{font-size:.92em}}

/* ===== feature animations ===== */
.fvis{padding:0;display:block;place-items:initial;min-height:330px;overflow:hidden;background:linear-gradient(180deg,var(--panel),var(--bg2))}
.fvis *,.fvis *::before,.fvis *::after{animation-play-state:paused!important}
.fvis.in *,.fvis.in *::before,.fvis.in *::after{animation-play-state:running!important}
.fv{width:100%;min-width:0;padding:30px;display:flex;flex-direction:column;justify-content:center;gap:18px;min-height:330px;font-size:14px}
.fv u{text-decoration:none}

/* 1 capture */
.cap1 .mons{display:flex;gap:3%;align-items:center}
.cap1 .mon{position:relative;aspect-ratio:16/10;background:#0A1519;border:2px solid var(--line2);border-radius:8px;overflow:hidden}
.cap1 .m1{width:66%}.cap1 .m2{width:31%;opacity:.7}
.cap1 .mwin{position:absolute;background:var(--panel2);border:1px solid var(--line2);border-radius:5px}
.cap1 .w1{left:8%;top:12%;width:40%;height:50%}.cap1 .w2{right:8%;bottom:10%;width:38%;height:38%}
.cap1 .sel1{position:absolute;border:2px solid var(--accent);background:rgba(45,212,191,.13);border-radius:4px;animation:selmode 9s ease-in-out infinite}
@keyframes selmode{0%,26%{left:0;top:0;width:100%;height:100%}36%,60%{left:8%;top:12%;width:40%;height:50%}70%,96%{left:32%;top:38%;width:56%;height:46%}100%{left:0;top:0;width:100%;height:100%}}
.cap1 .modes{display:flex;gap:8px}
.cap1 .md{font:600 .86em var(--font-b);padding:.5em 1em;border-radius:99px;border:1px solid var(--line2);color:var(--mute)}
.cap1 .a{animation:mdA 9s infinite}.cap1 .b{animation:mdB 9s infinite}.cap1 .c{animation:mdC 9s infinite}
@keyframes mdA{0%,30%{background:var(--accent);color:var(--ink);border-color:var(--accent)}34%,100%{background:none;color:var(--mute);border-color:var(--line2)}}
@keyframes mdB{0%,32%{background:none;color:var(--mute);border-color:var(--line2)}36%,63%{background:var(--accent);color:var(--ink);border-color:var(--accent)}67%,100%{background:none;color:var(--mute);border-color:var(--line2)}}
@keyframes mdC{0%,66%{background:none;color:var(--mute);border-color:var(--line2)}70%,97%{background:var(--accent);color:var(--ink);border-color:var(--accent)}100%{background:none;color:var(--mute);border-color:var(--line2)}}
.cap1 .srcs{display:flex;flex-wrap:wrap;gap:8px}
.cap1 .src{font:600 .84em var(--font-b);padding:.5em .9em;border-radius:10px;background:var(--bg2);border:1px solid var(--line2);color:var(--lead);animation:srcl 9s infinite}
.cap1 .s2{animation-delay:.6s}.cap1 .s3{animation-delay:1.2s}.cap1 .s4{animation-delay:1.8s}
@keyframes srcl{0%,6%{border-color:var(--line2);box-shadow:none}12%,30%{border-color:var(--accent);box-shadow:0 0 0 3px rgba(45,212,191,.15)}40%,100%{border-color:var(--line2);box-shadow:none}}

/* 2 smooth */
.sm .pipe{display:flex;align-items:center;gap:0}
.sm .pipe span{flex:none;font:600 .8em var(--font-b);background:var(--bg2);border:1px solid var(--line2);padding:.7em .8em;border-radius:10px;color:var(--strong);text-align:center}
.sm .pipe b{position:relative;flex:1;height:2px;background:var(--line2);margin:0 -1px}
.sm .pipe b::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:flow 1.8s linear infinite}
.sm .pipe b:nth-of-type(2)::after{animation-delay:.6s}.sm .pipe b:nth-of-type(3)::after{animation-delay:1.2s}
@keyframes flow{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
.sm .lane label{display:block;font:600 .8em var(--font-b);color:var(--mute);margin-bottom:7px}
.sm .strip{position:relative;height:30px;overflow:hidden;border-radius:8px;background:var(--bg2);border:1px solid var(--line)}
.sm .reel{position:absolute;left:0;top:0;display:flex;gap:4px;padding:5px;width:max-content;height:100%;animation:reel 5s linear infinite}
.sm .reel.bad{animation-duration:5s}
.sm .reel i{width:14px;height:100%;border-radius:3px;background:var(--accent)}
.sm .reel.bad i.x{background:transparent;border:1px dashed var(--rec)}
.sm .reel.good i{animation:none}
@keyframes reel{to{transform:translateX(-50%)}}

/* 3 privacy */
.pv .pvcols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pv .pvp{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px}
.pv .pvp.rec{border-color:rgba(255,90,95,.45)}
.pv .pvl{display:flex;align-items:center;gap:7px;font:600 .78em var(--font-b);color:var(--mute);margin-bottom:10px}
.pv .pvl i{width:8px;height:8px;border-radius:50%;background:var(--rec);animation:pulse 1.3s infinite}
.pv .pvform{background:#fff;border-radius:9px;padding:12px;color:#1b2b2b;position:relative;overflow:hidden}
.pv .pvform u{display:block;font-size:.68em;font-weight:700;color:#5b6f6f;margin-bottom:3px}
.pv .f{border:1px solid #cfdcdc;border-radius:6px;padding:.45em .6em;font-size:.82em;margin-bottom:9px;white-space:nowrap;overflow:hidden}
.pv .rec .sens{animation:blurp 8s ease-in-out infinite}
@keyframes blurp{0%,14%{filter:none;background:#fff}22%,86%{filter:blur(6px);background:#e5eded}94%,100%{filter:none;background:#fff}}
.pv .rec .pvform::after{content:"";position:absolute;left:0;right:0;top:-30%;height:30%;background:linear-gradient(transparent,rgba(45,212,191,.5),transparent);animation:sweep2 8s ease-in-out infinite}
@keyframes sweep2{0%,8%{top:-30%}22%{top:105%}100%{top:105%}}
.pv .pvbadge{align-self:center;font:600 .84em var(--font-b);color:var(--accent);border:1px solid var(--accent);padding:.5em 1.1em;border-radius:99px;animation:badgep 8s infinite}
@keyframes badgep{0%,14%{opacity:.25}22%,86%{opacity:1}94%,100%{opacity:.25}}

/* 4 subtitles + chapters */
.sc .scvideo{position:relative;background:var(--bg2);border:1px solid var(--line);border-radius:12px;height:96px;padding:12px;overflow:hidden}
.sc .wave{display:flex;align-items:center;gap:3px;height:100%}
.sc .wave i{flex:1;height:var(--h);background:var(--line2);border-radius:2px;animation:wv 1.4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes wv{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.sc .head{position:absolute;top:0;bottom:0;width:2px;background:var(--rec);box-shadow:0 0 10px var(--rec);animation:headmv 9s linear infinite}
@keyframes headmv{from{left:12px}to{left:calc(100% - 14px)}}
.sc .chaps{position:relative;height:30px;margin-top:-6px}
.sc .chaps span{position:absolute;top:0;transform:translateX(-50%);font:600 .76em var(--font-b);padding:.35em .8em;border-radius:99px;background:var(--panel2);border:1px solid var(--accent);color:var(--accent);opacity:0}
.sc .c1{left:8%;animation:ch1 9s infinite}.sc .c2{left:42%;animation:ch2 9s infinite}.sc .c3{left:76%;animation:ch3 9s infinite}
@keyframes ch1{0%,2%{opacity:0;transform:translate(-50%,-8px)}8%,94%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
@keyframes ch2{0%,38%{opacity:0;transform:translate(-50%,-8px)}44%,94%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
@keyframes ch3{0%,72%{opacity:0;transform:translate(-50%,-8px)}78%,94%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.sc .sublines{position:relative;height:56px}
.sc .sublines p{position:absolute;left:0;right:0;text-align:center;margin:0;color:var(--strong);background:rgba(0,0,0,.6);border-radius:8px;padding:.55em .9em;font:600 .96em/1.35 var(--font-b);opacity:0}
.sc .l1{animation:ln1 9s infinite}.sc .l2{animation:ln2 9s infinite}.sc .l3{animation:ln3 9s infinite}
@keyframes ln1{0%,2%{opacity:0}6%,30%{opacity:1}34%,100%{opacity:0}}
@keyframes ln2{0%,34%{opacity:0}38%,62%{opacity:1}66%,100%{opacity:0}}
@keyframes ln3{0%,66%{opacity:0}70%,94%{opacity:1}98%,100%{opacity:0}}

/* 5 search */
.sr .sbox{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--accent);border-radius:99px;padding:.8em 1.1em;color:var(--strong);font:600 1.05em var(--font-b)}
.sr .sbox svg{width:20px;height:20px;color:var(--accent);flex:none}
.sr .typed{display:inline-block;overflow:hidden;white-space:nowrap;width:0;animation:typ 9s steps(7,end) infinite}
@keyframes typ{0%{width:0}18%,92%{width:7ch}100%{width:0}}
.sr .caret{width:2px;height:1.1em;background:#fff;animation:blink 1s steps(1) infinite}
.sr .res{list-style:none;display:grid;gap:8px}
.sr .res li{display:flex;gap:12px;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:.7em 1em;color:var(--lead);opacity:0}
.sr .res b{font:700 .84em var(--font-b);color:var(--ink);background:var(--accent);padding:.2em .6em;border-radius:6px;font-variant-numeric:tabular-nums}
.sr .res li:nth-child(1){animation:ri1 9s infinite}.sr .res li:nth-child(2){animation:ri2 9s infinite}.sr .res li:nth-child(3){animation:ri3 9s infinite}
@keyframes ri1{0%,20%{opacity:0;transform:translateY(8px)}26%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes ri2{0%,26%{opacity:0;transform:translateY(8px)}32%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes ri3{0%,32%{opacity:0;transform:translateY(8px)}38%,92%{opacity:1;transform:none}100%{opacity:0}}
.sr .stl{position:relative;height:22px}
.sr .strack{position:absolute;left:0;right:0;top:9px;height:4px;border-radius:4px;background:var(--line2)}
.sr .m{position:absolute;top:2px;width:4px;height:18px;border-radius:2px;background:var(--gold);box-shadow:0 0 10px var(--gold);opacity:0}
.sr .m1{left:14%;animation:mk 9s infinite .0s}.sr .m2{left:42%;animation:mk 9s infinite .35s}.sr .m3{left:83%;animation:mk 9s infinite .7s}
@keyframes mk{0%,30%{opacity:0;transform:scaleY(0)}38%,92%{opacity:1;transform:scaleY(1)}100%{opacity:0}}

/* 6 annotate */
.an{flex-direction:row;align-items:stretch;gap:16px}
.an .canvas{position:relative;flex:1.5;background:#0A1519;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.an svg{width:100%;height:100%;display:block}
.an .arrow{stroke-dasharray:140;stroke-dashoffset:140;animation:draw 8s infinite}
.an .ah{stroke-dasharray:60;stroke-dashoffset:60;animation:drawh 8s infinite}
@keyframes draw{0%,8%{stroke-dashoffset:140}22%,88%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:140}}
@keyframes drawh{0%,20%{stroke-dashoffset:60}28%,88%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:60}}
.an .hl{transform-box:fill-box;transform-origin:left;transform:scaleX(0);opacity:.28;animation:hlk 8s infinite}
@keyframes hlk{0%,30%{transform:scaleX(0)}44%,88%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
.an .lbl{transform-box:fill-box;transform-origin:center;opacity:0;animation:lblk 8s infinite}
@keyframes lblk{0%,24%{opacity:0;transform:scale(.6)}32%,88%{opacity:1;transform:scale(1)}96%,100%{opacity:0}}
.an .logo{position:absolute;right:10px;bottom:10px;font:700 .72em var(--font-b);color:var(--strong);background:rgba(45,212,191,.2);border:1px solid var(--accent);padding:.3em .7em;border-radius:6px}
.an .tele{flex:1;position:relative;background:var(--bg2);border:1px solid var(--line);border-radius:12px;overflow:hidden;min-height:190px}
.an .tele::before,.an .tele::after{content:"";position:absolute;left:0;right:0;height:34%;z-index:2;pointer-events:none}
.an .tele::before{top:0;background:linear-gradient(var(--bg2),transparent)}.an .tele::after{bottom:0;background:linear-gradient(transparent,var(--bg2))}
.an .tl-in{padding:34% 14px;animation:tele 12s linear infinite}
.an .tl-in p{color:var(--strong);font:600 1.02em/1.3 var(--font-b);margin-bottom:.9em}
@keyframes tele{from{transform:translateY(0)}to{transform:translateY(-62%)}}

/* 7 automate */
.au .sched{display:flex;align-items:center;gap:16px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px}
.au .clock{position:relative;width:54px;height:54px;border-radius:50%;border:2px solid var(--line2);flex:none}
.au .clock::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--accent)}
.au .hand{position:absolute;left:50%;bottom:50%;width:2px;height:20px;margin-left:-1px;background:var(--accent);transform-origin:bottom;animation:spin 6s linear infinite;border-radius:2px}
@keyframes spin{to{transform:rotate(360deg)}}
.au .sched b{display:block;color:var(--strong);font:700 1.05em var(--font-d)}.au .sched span{color:var(--mute);font-size:.88em}
.au .keyrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.au .kk{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--mute);font:600 .82em var(--font-b)}
.au kbd{font:700 1.3em/1 var(--font-b);color:var(--strong);background:var(--panel2);border:1px solid var(--line2);border-bottom-width:4px;border-radius:12px;width:100%;padding:.7em 0;text-align:center}
.au .k1 kbd{animation:kp1 9s infinite}.au .k2 kbd{animation:kp2 9s infinite}.au .k3 kbd{animation:kp3 9s infinite}
@keyframes kp1{0%,4%{background:var(--panel2);transform:none}8%,14%{background:var(--accent);color:var(--ink);transform:translateY(3px);border-bottom-width:1px}20%,100%{background:var(--panel2);color:var(--strong);transform:none;border-bottom-width:4px}}
@keyframes kp2{0%,38%{background:var(--panel2);transform:none}42%,48%{background:var(--accent);color:var(--ink);transform:translateY(3px);border-bottom-width:1px}54%,100%{background:var(--panel2);color:var(--strong);transform:none;border-bottom-width:4px}}
@keyframes kp3{0%,70%{background:var(--panel2);transform:none}74%,80%{background:var(--rec);color:var(--strong);transform:translateY(3px);border-bottom-width:1px}86%,100%{background:var(--panel2);color:var(--strong);transform:none;border-bottom-width:4px}}
.au .status{position:relative;height:38px}
.au .s{position:absolute;left:50%;top:0;transform:translateX(-50%);white-space:nowrap;display:flex;align-items:center;gap:8px;padding:.55em 1.2em;border-radius:99px;border:1px solid var(--line2);background:var(--bg2);color:var(--strong);font:600 .9em var(--font-b);opacity:0}
.au .s i{width:9px;height:9px;border-radius:50%;background:var(--rec);animation:pulse 1.2s infinite}
.au .s1{animation:st1 9s infinite}.au .s2{animation:st2 9s infinite}.au .s3{animation:st3 9s infinite}
@keyframes st1{0%,10%{opacity:0}16%,36%{opacity:1}42%,100%{opacity:0}}
@keyframes st2{0%,42%{opacity:0}48%,68%{opacity:1}72%,100%{opacity:0}}
@keyframes st3{0%,76%{opacity:0}82%,96%{opacity:1;border-color:var(--accent)}100%{opacity:0}}

/* 8 share */
.sh .shrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sh .pc{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--mute);font:600 .8em var(--font-b)}
.sh .scr{width:92px;height:60px;border:2px solid var(--line2);border-radius:8px;background:#0A1519;position:relative}
.sh .scr::after{content:"";position:absolute;left:50%;bottom:-9px;width:50px;height:3px;background:var(--line2);transform:translateX(-50%);border-radius:2px}
.sh .scr::before{content:"";position:absolute;inset:8px;border-radius:4px;background:linear-gradient(135deg,var(--accent),rgba(45,212,191,.2))}
.sh .link{position:relative;flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--line2) 0 6px,transparent 6px 12px)}
.sh .pkt{position:absolute;top:-8px;left:0;width:30px;height:18px;border-radius:5px;background:var(--accent);box-shadow:0 0 14px rgba(45,212,191,.8);opacity:0;animation:pk 9s infinite}
@keyframes pk{0%,26%{left:0;opacity:0}30%{opacity:1}60%{opacity:1}66%,100%{left:calc(100% - 30px);opacity:0}}
.sh .ph{position:relative;width:96px;height:160px;border:2px solid var(--line2);border-radius:18px;background:var(--bg2);display:grid;place-items:center;overflow:hidden}
.sh .qr{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;width:62px;animation:qrk 9s infinite}
.sh .qr i{aspect-ratio:1;background:transparent;border-radius:1px}.sh .qr i.q{background:#fff}
@keyframes qrk{0%,6%{opacity:0;transform:scale(.8)}12%,64%{opacity:1;transform:none}70%,100%{opacity:0}}
.sh .rcv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--accent);font:700 .9em var(--font-b);opacity:0;animation:rc 9s infinite}
.sh .rcv svg{width:38px;height:38px;padding:8px;border-radius:50%;border:2px solid var(--accent)}
@keyframes rc{0%,68%{opacity:0;transform:scale(.8)}76%,94%{opacity:1;transform:none}100%{opacity:0}}
.sh .prog{height:6px;border-radius:99px;background:var(--bg2);overflow:hidden;border:1px solid var(--line)}
.sh .prog i{display:block;height:100%;width:0;background:var(--accent);animation:pg 9s infinite}
@keyframes pg{0%,28%{width:0}64%,92%{width:100%}100%{width:0}}
@media (max-width:560px){.an{flex-direction:column}.sh .ph{width:84px;height:140px}.fv{padding:20px}}
@media (prefers-reduced-motion:reduce){.fvis *{animation:none!important}.sc .chaps span,.sc .l1,.sr .res li,.sr .m,.au .s3,.an .lbl,.sh .rcv{opacity:1!important}.sr .typed{width:7ch!important}.an .arrow,.an .ah{stroke-dashoffset:0!important}.an .hl{transform:none!important}.pv .rec .sens{filter:blur(6px)!important}.sh .qr{opacity:1!important}.sh .rcv{display:none}.sc .l2,.sc .l3,.au .s1,.au .s2{display:none}}

/* ===== logo + language switch ===== */
.brand-mark{width:32px;height:32px;border-radius:9px;border:0;background:none;display:block;object-fit:contain}
.lang{display:inline-flex;background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:3px}
.lang a{color:var(--mute);font:700 .78rem/1 var(--font-b);padding:8px 10px;border-radius:7px;transition:color .15s,background .15s}
.lang a:hover{color:var(--strong)}
.lang a[aria-current="true"]{background:var(--accent);color:var(--ink)}

/* ===== Arabic / RTL ===== */
html[lang="ar"]{--font-d:"Cairo","Segoe UI",system-ui,sans-serif;--font-b:"IBM Plex Sans Arabic","Cairo","Segoe UI",system-ui,sans-serif}
html[lang="ar"] *{letter-spacing:0!important}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{line-height:1.3}
html[lang="ar"] h1{font-weight:800}
html[lang="ar"] body{line-height:1.8}
html[lang="ar"] .lang a{font-family:"Segoe UI",system-ui,sans-serif}
html[dir="rtl"] .plan .tag{right:auto;left:24px}
html[dir="rtl"] .specs-row div{border-right:0;border-left:1px solid var(--line)}
html[dir="rtl"] .specs-row div:last-child{border-left:0}
html[dir="rtl"] .step{border-right:0;border-left:1px solid var(--line)}
html[dir="rtl"] .step:last-child{border-left:0}
html[dir="rtl"] td:first-child,html[dir="rtl"] th:first-child{text-align:right}
html[dir="rtl"] .legal ul{padding-left:0;padding-right:22px}
html[dir="rtl"] .billing em{margin-left:0;margin-right:6px}
html[dir="rtl"] .price small{margin-left:0;margin-right:6px}
html[dir="rtl"] .kv b{text-align:left}
html[dir="rtl"] .st-rec,html[dir="rtl"] .kk,html[dir="rtl"] kbd{direction:ltr}
/* visual demos keep their layout; text inside them stays readable */
.stage,.fvis,.form-mock{direction:ltr}
html[dir="rtl"] .stage,html[dir="rtl"] .fvis,html[dir="rtl"] .form-mock{text-align:left}
html[dir="rtl"] .st-cap,html[dir="rtl"] .sc .sublines p,html[dir="rtl"] .sr .res li,html[dir="rtl"] .an .tele p,html[dir="rtl"] .pv .f,html[dir="rtl"] .form-mock .field,html[dir="rtl"] .pg-f{unicode-bidi:plaintext;text-align:start}
html[dir="rtl"] .st-cap{text-align:right}
html[dir="rtl"] .sc .sublines p{text-align:center}
html[lang="ar"] .sr .typed{width:auto;animation:typFade 9s infinite}
@keyframes typFade{0%{opacity:0}14%,92%{opacity:1}100%{opacity:0}}
@media (max-width:980px){
  html[dir="rtl"] .step{border-left:0;border-bottom:1px solid var(--line)}html[dir="rtl"] .step:last-child{border-bottom:0}
  html[dir="rtl"] .specs-row div{border-left:0}html[dir="rtl"] .specs-row div:nth-child(2){border-left:0}
}
@media (max-width:560px){.lang a{padding:7px 8px}.nav-cta{gap:8px}}
html[lang="ar"] h1{font-size:clamp(2.1rem,4vw,3.2rem)}
html[lang="ar"] .phead h1{font-size:clamp(2rem,4.4vw,3.2rem)}
.price{direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .price{text-align:right}
html[dir="rtl"] .plan .for,html[dir="rtl"] .plan .note{text-align:right}


/* ===== light theme ===== */
html[data-theme="light"]{
  --bg:#F4F9F8; --bg2:#E9F3F1; --panel:#FFFFFF; --panel2:#F0F7F6; --line:#D6E5E2; --line2:#BFD5D1;
  --text:#102223; --mute:#4B6567; --dim:#789092; --accent:#0B8A7E; --accent2:#0A6F65; --ink:#FFFFFF; --gold:#B7791F;
  --strong:#0C1B1C; --lead:#2F4A4C; --popbg:#E3F4F1; --navbg:rgba(244,249,248,.84); color-scheme:light;
}
/* product surfaces stay dark in both themes */
.stage,.fvis,.cap-dark{
  --bg:#081012; --bg2:#0C171A; --panel:#111E22; --panel2:#15262B; --line:#1E3237; --line2:#2A454B;
  --text:#E7F1F0; --mute:#8CA5A6; --dim:#5F7A7C; --accent:#2DD4BF; --accent2:#5EEAD4; --ink:#04201C; --gold:#F2C14E;
  --strong:#fff; --lead:#B5C9C9;
}
html[data-theme="light"] .stage,html[data-theme="light"] .fvis{box-shadow:0 30px 70px -35px rgba(8,40,40,.45)}
html[data-theme="light"] .hero::before{background:radial-gradient(60% 60% at 70% 30%,rgba(11,138,126,.14),transparent 70%)}
html[data-theme="light"] .phead{background:radial-gradient(60% 100% at 80% 0%,rgba(11,138,126,.1),transparent 70%)}
html[data-theme="light"] .cta-box{background:radial-gradient(70% 120% at 50% 0%,rgba(11,138,126,.12),transparent 70%),var(--panel)}
html[data-theme="light"] .form-mock{box-shadow:0 30px 60px -35px rgba(8,40,40,.4);border:1px solid var(--line)}
html[data-theme="light"] .btn-primary:hover{box-shadow:0 10px 30px -12px rgba(11,138,126,.6)}
html[data-theme="light"] .alert{color:#6b4a0a;background:rgba(183,121,31,.1);border-color:rgba(183,121,31,.4)}
html[data-theme="light"] .alert b{color:#8a5a0f}
html[data-theme="light"] .ico{background:rgba(11,138,126,.1);border-color:rgba(11,138,126,.3)}
html[data-theme="light"] .chip{background:var(--bg2)}

/* theme button */
.theme{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--line2);background:var(--panel);color:var(--strong);cursor:pointer;transition:background .15s,border-color .15s}
.theme:hover{border-color:var(--dim)}
.theme svg{width:19px;height:19px}
.theme .i-moon{display:none}
html[data-theme="light"] .theme .i-sun{display:none}
html[data-theme="light"] .theme .i-moon{display:block}
@media (max-width:560px){.theme{width:36px;height:36px}}

/* ===== webcam bubble demo ===== */
.wc .wscr{position:relative;aspect-ratio:16/10;background:#0A1519;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.wc .wpage{position:absolute;inset:0;padding:6%}
.wc .wpage .a{display:block;height:6%;width:34%;border-radius:99px;background:var(--line2);margin-bottom:3%}
.wc .wpage .b{display:block;height:4%;width:56%;border-radius:99px;background:var(--line);margin-bottom:6%}
.wc .wchart{display:flex;align-items:flex-end;gap:3%;height:42%;width:70%;margin-left:auto}
.wc .wchart b{flex:1;background:linear-gradient(var(--accent),rgba(45,212,191,.2));border-radius:4px 4px 0 0}
.wc .wchart b:nth-child(1){height:40%}.wc .wchart b:nth-child(2){height:62%}.wc .wchart b:nth-child(3){height:48%}.wc .wchart b:nth-child(4){height:82%}.wc .wchart b:nth-child(5){height:68%}
.wc .cam{position:absolute;left:70%;top:56%;width:22%;aspect-ratio:1;border-radius:50%;overflow:visible;animation:camdemo 12s ease-in-out infinite;box-shadow:0 0 0 0 rgba(45,212,191,0),0 0 0 0 rgba(0,0,0,0)}
.wc .cam>svg{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;display:block;animation:camclip 12s ease-in-out infinite}
@keyframes camclip{0%,52%{border-radius:50%}60%,92%{border-radius:22%}100%{border-radius:50%}}
@keyframes camdemo{
 0%,14%{left:70%;top:56%;width:22%;border-radius:50%;box-shadow:0 0 0 0 rgba(45,212,191,0),0 0 0 0 rgba(0,0,0,0)}
 30%,36%{left:6%;top:8%;width:22%;border-radius:50%;box-shadow:0 0 0 0 rgba(45,212,191,0),0 0 0 0 rgba(0,0,0,0)}
 48%,52%{left:6%;top:8%;width:32%;border-radius:50%;box-shadow:0 0 0 0 rgba(45,212,191,0),0 0 0 0 rgba(0,0,0,0)}
 62%,66%{left:6%;top:8%;width:32%;border-radius:22%;box-shadow:0 0 0 0 rgba(45,212,191,0),0 0 0 0 rgba(0,0,0,0)}
 76%,80%{left:6%;top:8%;width:32%;border-radius:22%;box-shadow:0 0 0 5px rgba(45,212,191,1),0 0 0 0 rgba(0,0,0,0)}
 90%,94%{left:6%;top:8%;width:32%;border-radius:22%;box-shadow:0 0 0 5px rgba(45,212,191,1),0 24px 40px 2px rgba(0,0,0,.75)}
 100%{left:70%;top:56%;width:22%;border-radius:50%;box-shadow:0 0 0 0 rgba(45,212,191,0),0 0 0 0 rgba(0,0,0,0)}}
.wc .hd{position:absolute;width:9px;height:9px;background:#fff;border:2px solid var(--accent);border-radius:2px;opacity:0;animation:hdl 12s infinite}
.wc .hd.tl{left:-5px;top:-5px}.wc .hd.tr{right:-5px;top:-5px}.wc .hd.bl{left:-5px;bottom:-5px}.wc .hd.br{right:-5px;bottom:-5px}
@keyframes hdl{0%,30%{opacity:0}34%,50%{opacity:1}54%,100%{opacity:0}}
.wc .cursor{position:absolute;width:20px;height:20px;left:81%;top:74%;opacity:0;animation:curs 12s ease-in-out infinite;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));z-index:3}
@keyframes curs{0%,2%{opacity:0;left:81%;top:74%}6%,14%{opacity:1;left:81%;top:74%}30%{opacity:1;left:17%;top:25%}34%{opacity:1;left:28%;top:43%}48%{opacity:1;left:38%;top:59%}52%,100%{opacity:0;left:38%;top:59%}}
.wc .wctl{display:flex;flex-wrap:wrap;gap:8px}
.wc .wctl span{font:600 .84em var(--font-b);padding:.5em 1em;border-radius:99px;border:1px solid var(--line2);color:var(--mute)}
.wc .k1{animation:wk1 12s infinite}.wc .k2{animation:wk2 12s infinite}.wc .k3{animation:wk3 12s infinite}.wc .k4{animation:wk4 12s infinite}.wc .k5{animation:wk5 12s infinite}
@keyframes wk1{0%,12%{background:none;color:var(--mute);border-color:var(--line2)}16%,32%{background:var(--accent);color:var(--ink);border-color:var(--accent)}36%,100%{background:none;color:var(--mute);border-color:var(--line2)}}
@keyframes wk2{0%,34%{background:none;color:var(--mute);border-color:var(--line2)}38%,50%{background:var(--accent);color:var(--ink);border-color:var(--accent)}54%,100%{background:none;color:var(--mute);border-color:var(--line2)}}
@keyframes wk3{0%,52%{background:none;color:var(--mute);border-color:var(--line2)}56%,64%{background:var(--accent);color:var(--ink);border-color:var(--accent)}68%,100%{background:none;color:var(--mute);border-color:var(--line2)}}
@keyframes wk4{0%,66%{background:none;color:var(--mute);border-color:var(--line2)}70%,78%{background:var(--accent);color:var(--ink);border-color:var(--accent)}82%,100%{background:none;color:var(--mute);border-color:var(--line2)}}
@keyframes wk5{0%,80%{background:none;color:var(--mute);border-color:var(--line2)}84%,94%{background:var(--accent);color:var(--ink);border-color:var(--accent)}98%,100%{background:none;color:var(--mute);border-color:var(--line2)}}
@media (prefers-reduced-motion:reduce){.wc .cam{left:6%;top:8%;width:32%;border-radius:22%;box-shadow:0 0 0 5px #2DD4BF,0 24px 40px 2px rgba(0,0,0,.75)}.wc .cam>svg{border-radius:22%}}

/* ===== saved-video editor demo ===== */
.ed .estage{position:relative;aspect-ratio:16/9;background:#0A1519;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ed .eframe{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80%;height:80%;border-radius:6px;animation:efr 14s ease-in-out infinite;outline:1px solid var(--line2)}
.ed .ev{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:linear-gradient(135deg,#1d5560,#0e2a33)}
.ed .ev::before{content:"";position:absolute;width:26%;aspect-ratio:1;border-radius:50%;left:12%;top:16%;background:radial-gradient(circle,#FDE68A,#F59E0B)}
.ed .ev::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(transparent,rgba(0,0,0,.35)),repeating-linear-gradient(100deg,#0c3a40 0 14%,#12525a 14% 28%)}
@keyframes efr{0%,24%{width:80%;height:80%}32%,36%{width:45%;height:80%}44%,50%{width:25.3%;height:80%}58%,100%{width:80%;height:80%}}
.ed .eh{position:absolute;width:9px;height:9px;background:#fff;border:2px solid var(--accent);border-radius:2px;opacity:0;animation:ehh 14s infinite;z-index:2}
.ed .eh.tl{left:-5px;top:-5px}.ed .eh.tr{right:-5px;top:-5px}.ed .eh.bl{left:-5px;bottom:-5px}.ed .eh.br{right:-5px;bottom:-5px}
@keyframes ehh{0%,24%{opacity:0}27%,56%{opacity:1}59%,100%{opacity:0}}
.ed .esize{position:absolute;left:50%;top:8px;transform:translateX(-50%);z-index:3}
.ed .esize b{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;font:700 .72em var(--font-b);background:var(--accent);color:var(--ink);padding:.3em .7em;border-radius:99px;opacity:0}
.ed .s1{animation:sz1 14s infinite}.ed .s2{animation:sz2 14s infinite}.ed .s3{animation:sz3 14s infinite}
@keyframes sz1{0%,24%{opacity:0}27%,29%{opacity:1}31%,100%{opacity:0}}
@keyframes sz2{0%,30%{opacity:0}33%,42%{opacity:1}45%,100%{opacity:0}}
@keyframes sz3{0%,44%{opacity:0}47%,52%{opacity:1}55%,100%{opacity:0}}
.ed .esub{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);width:max-content;max-width:92%;background:rgba(0,0,0,.72);color:#fff;font:600 .8em/1.3 var(--font-b);padding:.4em .8em;border-radius:6px;text-align:center;opacity:0;animation:esb 14s infinite;white-space:normal}
@keyframes esb{0%,58%{opacity:0}62%,76%{opacity:1}80%,100%{opacity:0}}
.ed .etoast{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--accent);color:#fff;font:600 .82em var(--font-b);padding:.55em 1em;border-radius:99px;opacity:0;transform:translateY(10px);animation:ets 14s infinite;z-index:4}
.ed .etoast svg{width:1.2em;height:1.2em;color:var(--accent)}
@keyframes ets{0%,88%{opacity:0;transform:translateY(10px)}92%,98%{opacity:1;transform:none}100%{opacity:0}}
.ed .etl{position:relative;height:64px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;overflow:hidden}
.ed .etrack{display:flex;gap:2px;align-items:flex-end;height:32px}
.ed .etrack i{flex:1;background:var(--line2);border-radius:2px;height:30%}
.ed .etrack i:nth-child(3n){height:80%}.ed .etrack i:nth-child(4n+1){height:55%}.ed .etrack i:nth-child(5n){height:95%}.ed .etrack i:nth-child(7n){height:40%}
.ed .dim{position:absolute;top:0;bottom:0;background:rgba(8,16,18,.78);width:0}
.ed .dl{left:0;animation:dml 14s ease-in-out infinite}.ed .dr{right:0;animation:dmr 14s ease-in-out infinite}
@keyframes dml{0%,3%{width:0}22%,100%{width:18%}}@keyframes dmr{0%,3%{width:0}22%,100%{width:16%}}
.ed .hnd{position:absolute;top:4px;height:36px;width:6px;border-radius:3px;background:var(--accent);box-shadow:0 0 10px rgba(45,212,191,.7)}
.ed .hl{left:0;animation:hdl2 14s ease-in-out infinite}.ed .hr{right:0;animation:hdr2 14s ease-in-out infinite}
@keyframes hdl2{0%,3%{left:0}22%,100%{left:18%}}@keyframes hdr2{0%,3%{right:0}22%,100%{right:16%}}
.ed .echap{position:absolute;left:10px;right:10px;bottom:6px;height:18px;font-size:.7em}
.ed .echap span{position:absolute;transform:translateX(-50%);padding:.1em .6em;border:1px solid var(--accent);border-radius:99px;color:var(--accent);background:var(--panel2);opacity:0;white-space:nowrap;animation:ech 14s infinite}
.ed .c1{left:10%}.ed .c2{left:44%;animation-delay:.15s}.ed .c3{left:78%;animation-delay:.3s}
@keyframes ech{0%,70%{opacity:0}74%,96%{opacity:1}100%{opacity:0}}
.ed .ectl{display:flex;flex-wrap:wrap;gap:8px}
.ed .ectl span{font:600 .84em var(--font-b);padding:.5em 1em;border-radius:99px;border:1px solid var(--line2);color:var(--mute)}
.ed .q1{animation:eq1 14s infinite}.ed .q2{animation:eq2 14s infinite}.ed .q3{animation:eq3 14s infinite}.ed .q4{animation:eq4 14s infinite}.ed .q5{animation:eq5 14s infinite}
@keyframes eq1{0%,2%{background:none;color:var(--mute);border-color:var(--line2)}5%,24%{background:var(--accent);color:var(--ink);border-color:var(--accent)}27%,100%{background:none;color:var(--mute);border-color:var(--line2)}}
@keyframes eq2{0%,25%{background:none;color:var(--mute);border-color:var(--line2)}28%,56%{background:var(--accent);color:var(--ink);border-color:var(--accent)}59%,100%{background:none;color:var(--mute);border-color:var(--line2)}}
@keyframes eq3{0%,58%{background:none;color:var(--mute);border-color:var(--line2)}62%,76%{background:var(--accent);color:var(--ink);border-color:var(--accent)}80%,100%{background:none;color:var(--mute);border-color:var(--line2)}}
@keyframes eq4{0%,72%{background:none;color:var(--mute);border-color:var(--line2)}76%,86%{background:var(--accent);color:var(--ink);border-color:var(--accent)}90%,100%{background:none;color:var(--mute);border-color:var(--line2)}}
@keyframes eq5{0%,88%{background:none;color:var(--mute);border-color:var(--line2)}92%,98%{background:var(--accent);color:var(--ink);border-color:var(--accent)}100%{background:none;color:var(--mute);border-color:var(--line2)}}
@media (prefers-reduced-motion:reduce){.ed .dl{width:18%}.ed .dr{width:16%}.ed .hl{left:18%}.ed .hr{right:16%}.ed .esub,.ed .echap span{opacity:1}.ed .etoast{display:none}.ed .s1{opacity:1}}

/* ===== perf: skip rendering rows far off-screen ===== */
.frow{content-visibility:auto;contain-intrinsic-size:auto 520px}
.fvis{contain:layout paint}
/* ===== audio mixer ===== */
.mx{display:flex;flex-direction:column;gap:10px;padding:26px}
.mx .mrow{display:grid;grid-template-columns:96px 1fr 64px;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:12px}
.mx .ml{font:600 .78em var(--font-b);color:var(--mute)}
.mx .bars{display:flex;align-items:flex-end;gap:2px;height:38px}
.mx .bars i{flex:1;height:100%;border-radius:2px;background:var(--accent);transform-origin:bottom;transform:scaleY(.2);animation:mxa 1.2s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.17s)}
.mx .sy i{background:#60A5FA;animation-duration:1.4s}
.mx .mic{animation:mxs 12s infinite}
.mx .mic i{background:#F59E0B;animation-duration:.8s}
.mx .mo i{animation-duration:1s}
@keyframes mxa{0%{transform:scaleY(.12)}50%{transform:scaleY(.85)}100%{transform:scaleY(.35)}}
@keyframes mxs{0%,18%{opacity:.18}26%,72%{opacity:1}80%,100%{opacity:.18}}
.mx .sl{position:relative;height:4px;border-radius:2px;background:var(--line2)}
.mx .out .sl{background:none}
.mx .kn{position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;border:2px solid var(--accent);animation:mxk1 12s ease-in-out infinite}
.mx .k2{animation-name:mxk2}
@keyframes mxk1{0%,10%{transform:translateX(38px)}35%,55%{transform:translateX(26px)}80%,100%{transform:translateX(38px)}}
@keyframes mxk2{0%,10%{transform:translateX(14px)}35%,60%{transform:translateX(40px)}85%,100%{transform:translateX(14px)}}
.mx .mjoin{display:grid;place-items:center;color:var(--accent)}.mx .mjoin svg{width:20px;height:20px}
/* ===== record controls ===== */
@property --t{syntax:'<integer>';inherits:false;initial-value:0}
.rt{padding:22px}.rt .rs{position:relative;aspect-ratio:16/9;background:#0A1519;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rt .rs>i{position:absolute;left:8%;height:7px;border-radius:4px;background:var(--line2)}
.rt .l1{top:16%;width:46%}.rt .l2{top:28%;width:62%}.rt .l3{top:40%;width:34%}
.rt .cdn{position:absolute;inset:0;display:grid;place-items:center}
.rt .cdn b{grid-area:1/1;width:30%;aspect-ratio:1;max-width:96px;display:grid;place-items:center;border-radius:50%;background:rgba(45,212,191,.16);border:3px solid var(--accent);color:#fff;font:800 2.4em var(--font-b);opacity:0}
.rt .n3{animation:rtn3 12s infinite}.rt .n2{animation:rtn2 12s infinite}.rt .n1{animation:rtn1 12s infinite}
@keyframes rtn3{0%{opacity:0;transform:scale(1.3)}2%,7%{opacity:1;transform:none}9%,100%{opacity:0}}
@keyframes rtn2{0%,8%{opacity:0;transform:scale(1.3)}10%,15%{opacity:1;transform:none}17%,100%{opacity:0}}
@keyframes rtn1{0%,16%{opacity:0;transform:scale(1.3)}18%,23%{opacity:1;transform:none}25%,100%{opacity:0}}
.rt .tb{position:absolute;left:50%;bottom:12px;transform:translate(-50%,40px);display:flex;align-items:center;gap:12px;background:var(--panel2);border:1px solid var(--line2);border-radius:99px;padding:.5em .6em .5em 1em;opacity:0;animation:rtb 12s infinite}
@keyframes rtb{0%,24%{opacity:0;transform:translate(-50%,40px)}28%,94%{opacity:1;transform:translate(-50%,0)}98%,100%{opacity:0;transform:translate(-50%,40px)}}
.rt .rdot{width:10px;height:10px;border-radius:50%;background:#EF4444;animation:rtd 1s steps(2,jump-none) infinite}
@keyframes rtd{0%{opacity:1}100%{opacity:.25}}
.rt .tm{font:700 .9em var(--font-b);color:#fff;min-width:3.6em;counter-reset:t var(--t);animation:rtt 12s linear infinite;font-variant-numeric:tabular-nums}
.rt .tm::before{content:"00:" counter(t,decimal-leading-zero)}
@keyframes rtt{0%,25%{--t:0}50%{--t:3}62%{--t:3}90%,100%{--t:6}}
.rt .pbtn,.rt .sbtn{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--line2)}
.rt .pbtn svg,.rt .sbtn svg{width:14px;height:14px}
.rt .pbtn{animation:rtp 12s infinite}.rt .sbtn{animation:rts 12s infinite}
@keyframes rtp{0%,48%{background:var(--line2);color:#fff}51%,60%{background:var(--accent);color:var(--ink)}63%,100%{background:var(--line2);color:#fff}}
@keyframes rts{0%,89%{background:var(--line2)}92%,100%{background:#EF4444}}
.rt .pbadge{position:absolute;top:12px;left:50%;transform:translateX(-50%);font:700 .72em var(--font-b);color:var(--ink);background:#FBBF24;padding:.35em .9em;border-radius:99px;opacity:0;animation:rtpb 12s infinite}
@keyframes rtpb{0%,49%{opacity:0}52%,60%{opacity:1}63%,100%{opacity:0}}
.rt .rtoast{animation:rtts 12s infinite;top:12px;right:12px;bottom:auto}
@keyframes rtts{0%,91%{opacity:0;transform:translateY(-8px)}94%,99%{opacity:1;transform:none}100%{opacity:0}}
/* ===== library ===== */
.lb{padding:22px}
.lb .lbt{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:.6em .9em;color:var(--mute);font:500 .82em var(--font-b);margin-bottom:12px}
.lb .lbt svg{width:16px;height:16px;color:var(--accent)}
.lb .lg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lb .cd{animation:lbc 12s ease-out infinite;opacity:0}
.lb .cd:nth-child(2){animation-delay:.1s}.lb .cd:nth-child(3){animation-delay:.2s}.lb .cd:nth-child(4){animation-delay:.3s}.lb .cd:nth-child(5){animation-delay:.4s}.lb .cd:nth-child(6){animation-delay:.5s}
@keyframes lbc{0%{opacity:0;transform:translateY(12px)}6%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
.lb .ci{position:relative;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:6px 6px 8px}
.lb .ci b{display:block;margin-top:6px;font:600 .72em var(--font-b);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb .th{position:relative;aspect-ratio:16/10;border-radius:6px;background:linear-gradient(135deg,#1d5560,#0e2a33)}
.lb .th small{position:absolute;right:4px;bottom:4px;font:600 .62em var(--font-b);background:rgba(0,0,0,.7);color:#fff;padding:.1em .45em;border-radius:4px}
.lb .t1{background:linear-gradient(135deg,#4c3b7a,#1c1838)}.lb .t2{background:linear-gradient(135deg,#7a4b2c,#2d1b10)}.lb .t3{background:linear-gradient(135deg,#7a2c3f,#2a1018)}.lb .t4{background:linear-gradient(135deg,#2c5f7a,#10232d)}.lb .t5{background:linear-gradient(135deg,#3f7a3c,#13281a)}
.lb .pick{animation:lbk 12s ease-in-out infinite}
@keyframes lbk{0%,40%{transform:none;border-color:var(--line);box-shadow:none}48%,78%{transform:translateY(-4px) scale(1.05);border-color:var(--accent);box-shadow:0 12px 24px -10px rgba(45,212,191,.55)}86%,100%{transform:none;border-color:var(--line);box-shadow:none}}
.lb .act{position:absolute;left:6px;right:6px;top:6px;display:flex;gap:4px;justify-content:center;opacity:0;animation:lba 12s infinite}
.lb .act span{font:700 .62em var(--font-b);background:var(--accent);color:var(--ink);padding:.3em .7em;border-radius:99px}
@keyframes lba{0%,50%{opacity:0}56%,76%{opacity:1}82%,100%{opacity:0}}
.lb .cur{position:absolute;right:18%;bottom:18%;width:20px;height:20px;opacity:0;animation:lbm 12s ease-in-out infinite;pointer-events:none;z-index:2}
@keyframes lbm{0%,30%{opacity:0;transform:translate(60px,50px)}40%{opacity:1;transform:translate(60px,50px)}48%{opacity:1;transform:translate(0,0)}50%{transform:translate(0,0) scale(.85)}52%,76%{opacity:1;transform:translate(0,0)}84%,100%{opacity:0;transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.mx .bars i{transform:scaleY(.6)}.lb .cd,.rt .tb{opacity:1}.rt .cdn,.rt .pbadge,.rt .rtoast{display:none}.rt .tb{transform:translate(-50%,0)}.rt .tm::before{content:"00:06"}.lb .act{opacity:1}}
.rt .rtoast{position:absolute;display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--accent);color:#fff;font:600 .78em var(--font-b);padding:.5em .9em;border-radius:99px;opacity:0;z-index:4}
.rt .rtoast svg{width:1.2em;height:1.2em;color:var(--accent);flex:none}