/* Generated by MindMap/marketing/web/make_web_assets.py from home/css/home.css and home/sections/*.css.
   Do not edit: change those files and run `python3 MindMap/marketing/web/make_web_assets.py css`. */
/* ---- css/home.css */
@font-face{font-family:'Inter';src:url(../fonts/Inter.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'SpinCycle';src:url(../fonts/SpinCycle.otf) format('opentype');font-display:swap}
:root{
--navy-0:#030a2a; --navy-1:#071a52; --navy-2:#0e2a82; --blue-3:#1a45b4; --blue-4:#2a62e6; --blue-5:#5b8cff;
--sky:#7cc0ff; --sky-2:#a9d8ff; --violet:#8b5cff; --violet-2:#7c5cff; --gold:#e0a82e; --ok:#33c98a;
--ink:#ffffff; --ink-2:#d6e4ff; --muted:#9fb3e0; --muted-2:#7f93c4;
--card:rgba(255,255,255,.06); --card-2:rgba(255,255,255,.1); --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.2);
--appbar:#232838; --appbar-ink:#e9ecf5; --win-bg:#0b1330;
--maxw:1200px; --gutter:clamp(16px,4vw,40px);
--nav-h:64px;
--hp:0;
--mx:0; --my:0;
--font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--navy-1);color:var(--ink);font-family:var(--font);line-height:1.55;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--sky);text-decoration:none}
a:hover{color:var(--sky-2)}
button{font:inherit;color:inherit}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.eyebrow svg,.chips svg,.pi svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
em.hl,h1 em,h2 em{font-style:normal;background:linear-gradient(92deg,#7cc0ff 0%,#a9d8ff 60%,#c9b8ff 100%);
-webkit-background-clip:text;background-clip:text;color:transparent}
.bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--navy-1)}
.bgfx .tone{position:absolute;inset:0;opacity:0;will-change:opacity}
.bgfx .tone[data-tone="hero"]{opacity:1;background:radial-gradient(120% 90% at 50% 38%,#2a62e6 0%,#1a45b4 34%,#0e2a82 66%,#071a52 100%)}
.bgfx .tone[data-tone="overview"]{background:radial-gradient(110% 80% at 50% 0%,#1d4fc4 0%,#0f2d86 40%,#071a52 75%,#04103a 100%)}
.bgfx .tone[data-tone="layouts"]{background:radial-gradient(100% 80% at 20% 10%,#2d4fd6 0%,#14298a 42%,#081650 78%,#040c34 100%)}
.bgfx .tone[data-tone="templates"]{background:radial-gradient(100% 80% at 80% 10%,#4a3fd6 0%,#22208c 42%,#0d0f52 78%,#060833 100%)}
.bgfx .tone[data-tone="media"]{background:radial-gradient(100% 80% at 30% 0%,#1c79b8 0%,#0f4483 42%,#08245a 78%,#041438 100%)}
.bgfx .tone[data-tone="scenes"]{background:radial-gradient(100% 80% at 70% 0%,#0f7a78 0%,#0b3f63 42%,#061f45 78%,#030f2b 100%)}
.bgfx .tone[data-tone="sync"]{background:radial-gradient(100% 80% at 50% 0%,#2f7fe0 0%,#174a9e 42%,#0a2560 78%,#05143c 100%)}
.bgfx .tone[data-tone="present"]{background:radial-gradient(100% 80% at 50% 10%,#7a3a2c 0%,#3e1d3b 42%,#170f38 78%,#0a0824 100%)}
.bgfx .tone[data-tone="collab"]{background:radial-gradient(100% 80% at 30% 0%,#2a78c8 0%,#16488f 42%,#0a2459 78%,#05143a 100%)}
.bgfx .tone[data-tone="ai"]{background:radial-gradient(100% 80% at 60% 0%,#6a3df0 0%,#3a20a8 42%,#170c5c 78%,#0b0636 100%)}
.bgfx .tone[data-tone="tail"]{background:radial-gradient(110% 80% at 50% 0%,#1d47b8 0%,#0e2a82 40%,#071a52 75%,#030a2a 100%)}
.wall-scene{position:absolute;inset:-10vh -10vw;perspective:1800px;perspective-origin:50% 40%;
opacity:calc(1 - var(--hp) * 1.45)}
.wall{position:absolute;left:50%;top:50%;display:flex;gap:var(--tile-gap);transform-style:preserve-3d;will-change:transform;
--tile-w:clamp(150px,15vw,250px);--tile-gap:calc(var(--tile-w) * .09);
transform:translate(-50%,-50%)
translateY(calc(var(--hp) * -18vh))
rotateX(calc(24deg + var(--hp) * 16deg + var(--my) * -2deg))
rotateZ(calc(-9deg + var(--mx) * 1.2deg))
scale(calc(1 + var(--hp) * .18))}
.wall .col{flex:none;width:var(--tile-w);display:flex;flex-direction:column;gap:var(--tile-gap);transform-style:preserve-3d}
.tile{width:var(--tile-w);aspect-ratio:4/3;position:relative;transform-style:preserve-3d;
animation:tile-float var(--d,18s) ease-in-out var(--dl,0s) infinite alternate}
.tile .tc{position:absolute;inset:0;border-radius:calc(var(--tile-w) * .045);overflow:hidden;background:#13204f;
box-shadow:0 calc(var(--tile-w)*.09) calc(var(--tile-w)*.17) rgba(2,8,40,.55),0 0 0 1.5px rgba(255,255,255,.16);
transition:transform .9s cubic-bezier(.2,.7,.2,1),box-shadow .9s}
.tile img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.tile img.ok{opacity:1}
.tile .tn{position:absolute;left:8px;right:8px;bottom:8px;padding:5px 9px;border-radius:8px;font-size:12px;font-weight:600;
background:rgba(6,14,48,.88);color:#fff;opacity:0;transform:translateY(6px);transition:.35s;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes tile-float{
0%{transform:translate3d(0,calc(var(--a,3px) * -1),0) rotateZ(calc(var(--r,.15deg) * -1))}
100%{transform:translate3d(0,var(--a,3px),var(--z,5px)) rotateZ(var(--r,.15deg))}
}
.hero-live .tile:hover .tc{transform:translateZ(24px) scale(1.02);
box-shadow:0 26px 50px rgba(2,8,40,.6),0 0 0 1.5px rgba(124,192,255,.6),0 0 26px rgba(124,192,255,.25)}
.hero-live .tile:hover .tn{opacity:1;transform:none}
.bgfx .wall-shade{position:absolute;inset:0;opacity:calc(1 - var(--hp));
background:radial-gradient(ellipse 50% 56% at 50% 52%,rgba(16,48,158,.96) 0%,rgba(16,48,158,.9) 44%,rgba(16,48,158,.5) 72%,rgba(16,48,158,0) 100%),
linear-gradient(180deg,rgba(4,12,50,.6) 0%,rgba(4,12,50,0) 16%,rgba(4,12,50,0) 74%,rgba(4,12,50,.6) 100%)}
@media(max-width:700px){
.bgfx .wall-shade{background:linear-gradient(180deg,rgba(14,44,150,.62) 0%,rgba(14,44,150,.9) 14%,rgba(14,44,150,.93) 66%,rgba(14,44,150,.45) 86%,rgba(14,44,150,.2) 100%)}
}
.wall-paused .tile{animation-play-state:paused}
.wall-off .wall-scene,.wall-off .wall-shade{visibility:hidden}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.nav.solid{background:rgba(5,14,52,.72);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
box-shadow:0 1px 0 var(--line)}
.nav .container{height:100%;display:flex;align-items:center;gap:20px}
.nav .logo{display:flex;align-items:center;gap:10px;color:#fff;font-family:'SpinCycle',var(--font);font-size:26px;letter-spacing:.5px}
.nav .logo img{width:34px;height:34px;object-fit:contain}
.nav .links{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav .links a{color:var(--ink-2);font-weight:600;font-size:15px;padding:8px 12px;border-radius:10px}
.nav .links a:hover{color:#fff;background:var(--card-2)}
.nav .links a.btn{margin-left:8px}
.nav .menu-btn{display:none;margin-left:auto;background:none;border:0;width:40px;height:40px;border-radius:10px;cursor:pointer}
.nav .menu-btn span{display:block;width:20px;height:2px;margin:5px auto;background:#fff;border-radius:2px;transition:.3s}
@media(max-width:860px){
.nav .menu-btn{display:block}
.nav .links{position:fixed;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;padding:12px var(--gutter) 20px;
background:rgba(5,14,52,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
transform:translateY(-8px);opacity:0;pointer-events:none;transition:.25s}
.nav.open .links{transform:none;opacity:1;pointer-events:auto}
.nav .links a{padding:12px 14px;font-size:16px}
.nav .links a.btn{margin:8px 0 0}
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:14px;font-weight:700;
font-size:16px;line-height:1;color:#fff;border:1px solid var(--line-2);background:rgba(255,255,255,.08);cursor:pointer;
transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{color:#fff;transform:translateY(-2px);background:rgba(255,255,255,.14)}
.btn-primary{border:0;background:linear-gradient(95deg,#4f8dff 0%,#6b6cff 55%,#8b5cff 100%);
box-shadow:0 10px 30px rgba(80,110,255,.45),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary:hover{background:linear-gradient(95deg,#5b97ff 0%,#7a7aff 55%,#9a6cff 100%);box-shadow:0 14px 40px rgba(80,110,255,.6)}
.btn-sm{padding:10px 16px;font-size:14px;border-radius:12px}
.btn svg{width:18px;height:18px}
main{position:relative;z-index:1;pointer-events:none}
main>*:not(.hero){pointer-events:auto}
.hero-live .bgfx .wall-scene{pointer-events:auto}
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:calc(var(--nav-h) + 24px) var(--gutter) 90px;position:relative;pointer-events:none}
.hero a,.hero button{pointer-events:auto}
.hero-brand{display:flex;flex-direction:column;align-items:center;
transform:translateY(calc(var(--hp) * -80px)) scale(calc(1 - var(--hp) * .08));opacity:calc(1 - var(--hp) * 1.6)}
.hero-icon{position:relative;width:clamp(96px,11vw,150px);aspect-ratio:1}
.hero-icon .glow{position:absolute;left:50%;top:50%;width:220%;height:220%;transform:translate(-50%,-50%);border-radius:50%;
background:radial-gradient(circle,rgba(90,175,255,.55) 0%,rgba(90,140,255,.2) 40%,rgba(0,0,0,0) 70%);animation:glow 5s ease-in-out infinite alternate}
.hero-icon img{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 16px 30px rgba(0,6,40,.6));
animation:icon-bob 6s ease-in-out infinite alternate}
@keyframes glow{from{opacity:.75;transform:translate(-50%,-50%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes icon-bob{from{transform:translateY(-4px)}to{transform:translateY(6px)}}
.wordmark{font-family:'SpinCycle',var(--font);font-weight:400;font-size:clamp(60px,8.4vw,112px);line-height:1;letter-spacing:1px;
margin-top:clamp(6px,1vw,14px);text-shadow:0 6px 30px rgba(0,10,50,.6)}
.hero h1{margin:clamp(10px,1.4vw,18px) 0 0;font-size:clamp(28px,4.2vw,56px);line-height:1.08;font-weight:800;letter-spacing:-.02em;
text-shadow:0 2px 24px rgba(0,10,50,.55)}
.hero-sub{margin:16px auto 0;max-width:600px;color:var(--ink-2);font-size:clamp(16px,1.5vw,20px);text-shadow:0 2px 14px rgba(0,10,50,.7)}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.platforms{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.platforms a{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;font-size:13px;font-weight:600;
color:var(--ink-2);background:rgba(6,16,60,.62);border:1px solid var(--line)}
.platforms a:hover{color:#fff;border-color:var(--sky)}
.bi{flex:none;height:1em;fill:currentColor}
.bi-windows{width:.929em}.bi-apple,.bi-android{width:.786em}.bi-linux,.bi-globe{width:.857em}.bi-mobile{width:.429em}
.platforms .bi{font-size:13px}
.sparkle{position:absolute;color:#9ad6ff;filter:drop-shadow(0 0 10px rgba(90,180,255,.9));animation:twinkle 3.2s ease-in-out infinite;pointer-events:none}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(20deg)}}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;
color:var(--ink-2);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:calc(1 - var(--hp) * 3)}
.scroll-cue i{width:24px;height:38px;border-radius:14px;border:2px solid rgba(255,255,255,.55);position:relative}
.scroll-cue i::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;
animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
.chips{position:fixed;top:calc(var(--nav-h) + 8px);left:50%;z-index:40;transform:translate(-50%,-12px);opacity:0;pointer-events:none;
transition:opacity .35s,transform .35s;max-width:calc(100vw - 24px)}
.chips.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.chips.show.tuck{opacity:0;transform:translate(-50%,-12px);pointer-events:none}
.chips .in{display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(5,14,52,.84);backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.chips .in::-webkit-scrollbar{display:none}
.chips a{flex:none;display:flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;color:var(--ink-2);font-size:13px;font-weight:600;
white-space:nowrap;transition:background .25s,color .25s}
.chips a:hover{color:#fff;background:var(--card-2)}
.chips a.on{color:#08164a;background:linear-gradient(95deg,#9fd0ff,#c4b8ff)}
.chips a svg{width:14px;height:14px}
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
.overview{padding:40px 0 120px;perspective:1600px}
.overview .head{text-align:center;max-width:820px;margin:0 auto 46px}
.overview .shot-wrap{position:relative;max-width:1120px;margin:0 auto;transform-origin:50% 0;
transform:rotateX(calc(var(--op,1) * 28deg)) scale(calc(1 - var(--op,1) * .12)) translateY(calc(var(--op,1) * 40px))}
.overview .win{border-radius:20px;overflow:hidden;background:var(--win-bg);
box-shadow:0 0 0 1px rgba(255,255,255,.16),0 50px 120px rgba(0,6,40,.65),0 0 120px rgba(80,140,255,.25)}
.overview .win img{width:100%;height:auto}
.callout{position:absolute;left:var(--x);top:var(--y);z-index:2;pointer-events:none}
.callout .dot{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:#7cc0ff;
box-shadow:0 0 0 4px rgba(124,192,255,.3),0 0 18px rgba(124,192,255,.9);transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.callout .dot::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(124,192,255,.6);animation:ping 2.2s ease-out infinite}
@keyframes ping{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}}
.callout .lbl{position:absolute;white-space:nowrap;padding:8px 14px;border-radius:12px;font-size:14px;font-weight:700;color:#fff;
background:rgba(8,20,70,.82);backdrop-filter:blur(10px);border:1px solid rgba(124,192,255,.5);
box-shadow:0 10px 30px rgba(0,8,40,.5);opacity:0;transform:translateY(8px) scale(.9);transition:.5s cubic-bezier(.3,1.4,.5,1)}
.callout .lbl small{display:block;font-size:12px;font-weight:500;color:var(--muted)}
.callout.l .lbl{right:18px;top:-20px}.callout.r .lbl{left:18px;top:-20px}
.callout.t .lbl{left:50%;bottom:18px;transform:translate(-50%,8px) scale(.9)}
.shown .callout .dot{transform:scale(1)}
.shown .callout .lbl{opacity:1;transform:none}
.shown .callout.t .lbl{transform:translate(-50%,0)}
@media(max-width:640px){
.overview .shot-wrap{max-width:300px}
.overview .win{border-radius:34px;padding:8px;background:#0b0f1e;box-shadow:0 0 0 1.5px rgba(255,255,255,.22),0 40px 90px rgba(0,6,40,.65),0 0 80px rgba(80,140,255,.25)}
.overview .win img{border-radius:27px}
.callout{display:none}
}
.feature{position:relative;padding:clamp(80px,12vh,150px) 0 clamp(40px,8vh,90px)}
.feature-head{text-align:center;max-width:860px;margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:999px;font-size:13px;font-weight:700;
letter-spacing:.06em;text-transform:uppercase;color:#cfe3ff;background:rgba(124,192,255,.12);border:1px solid rgba(124,192,255,.3)}
.eyebrow svg{width:16px;height:16px}
.eyebrow .tier{margin-left:4px;padding:2px 8px;border-radius:999px;font-size:11px;letter-spacing:.04em;text-transform:none;color:#2a1c00;
background:linear-gradient(95deg,#f5c451,#e0a82e)}
.eyebrow .tier.biz{color:#fff;background:#5b8cff}.eyebrow .tier.ai{color:#fff;background:linear-gradient(95deg,#8b5cff,#6a3df0)}
.feature h2,.overview h2,.band h2{margin:18px 0 0;font-size:clamp(34px,5vw,64px);line-height:1.04;font-weight:800;letter-spacing:-.025em}
.lead{margin:18px auto 0;max-width:720px;color:var(--ink-2);font-size:clamp(17px,1.6vw,20px)}
.feature-stage{position:relative;max-width:1040px;margin:clamp(36px,6vh,60px) auto 0}
.feature-points{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1100px;margin:clamp(40px,6vh,64px) auto 0}
@media(max-width:980px){.feature-points{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.feature-points{grid-template-columns:1fr}}
.point{padding:20px 20px 18px;border-radius:18px;background:linear-gradient(180deg,rgba(20,36,110,.55),rgba(10,22,80,.45));
border:1px solid var(--line);transition:transform .3s,border-color .3s,background .3s}
.point:hover{transform:translateY(-4px);border-color:rgba(124,192,255,.45);background:linear-gradient(180deg,rgba(28,48,140,.6),rgba(14,28,96,.5))}
.point .pi{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:12px;
background:linear-gradient(135deg,rgba(124,192,255,.3),rgba(139,92,255,.3));border:1px solid rgba(255,255,255,.18)}
.point .pi svg{width:20px;height:20px;stroke:#d8ebff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.point h3{margin:0 0 6px;font-size:17px;font-weight:700}
.point p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5}
.feature-stage{container-type:inline-size}
.demo{position:relative;width:100%;aspect-ratio:960/600}
@container (width < 680px){.demo{aspect-ratio:420/600;max-height:720px}}
.demo-box{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;border-radius:22px;
box-shadow:0 0 0 1px rgba(255,255,255,.16),0 40px 100px rgba(0,6,40,.6),0 0 90px rgba(80,140,255,.18)}
.demo[data-frame="window"] .demo-box{background:var(--win-bg)}
.demo[data-frame="none"] .demo-box{overflow:visible;border-radius:0;box-shadow:none}
.demo-compact .demo-box{border-radius:28px}
.stage{position:relative;overflow:hidden}
.demo[data-frame="none"] .stage{overflow:visible}
.appbar{height:44px;display:flex;align-items:center;gap:6px;padding:0 12px;background:var(--appbar);color:var(--appbar-ink);
border-bottom:1px solid rgba(255,255,255,.06);position:relative;z-index:2}
.appbar svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.appbar .ib{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;opacity:.92}
.appbar .ttl{position:absolute;left:50%;transform:translateX(-50%);font-size:14px;font-weight:500;letter-spacing:.01em;white-space:nowrap}
.appbar .sp{flex:1}
.demo-compact .appbar{height:40px;padding:0 8px;gap:2px}
.demo-compact .appbar .ib{width:28px;height:28px}
.demo-compact .appbar svg{width:18px;height:18px}
.shot-float{position:absolute;z-index:3;bottom:-30px;width:170px;padding:0;border:0;background:none;cursor:zoom-in;
transform:translateY(calc(var(--sp,0) * -40px)) rotate(var(--rot,4deg));transition:transform .15s linear}
.shot-float.right{right:-150px;--rot:5deg}.shot-float.left{left:-150px;--rot:-5deg}
.shot-float .phone{display:block}
.shot-float .hint{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:600;
color:var(--ink-2);padding:5px 10px;border-radius:999px;background:rgba(5,14,52,.7);border:1px solid var(--line);opacity:.0;transition:.3s}
.shot-float:hover .hint,.shot-float:focus-visible .hint{opacity:1}
.see-app{display:none;margin:22px auto 0;width:max-content}
.see-app.sync-app{display:flex}
@media(max-width:1399px){.shot-float{display:none}.see-app{display:flex}}
.phone{position:relative;border-radius:30px;padding:7px;background:#0b0f1e;
box-shadow:0 0 0 1.5px rgba(255,255,255,.22),0 30px 70px rgba(0,6,40,.65)}
.phone img{border-radius:24px;width:100%;height:auto}
.phone::before{content:"";position:absolute;top:13px;left:50%;width:26%;height:10px;margin-left:-13%;border-radius:10px;background:#0b0f1e;z-index:1}
.mm-cursor{position:absolute;left:0;top:0;z-index:20;pointer-events:none;will-change:transform;transition:opacity .3s}
.mm-cursor .arrow{width:18px;height:22px;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.mm-cursor .tag{position:absolute;left:12px;top:18px;display:flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:999px;
color:#fff;font-size:13px;font-weight:600;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.25);background:var(--c)}
.mm-cursor .tag b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:#fff;color:var(--c)}
.mm-cursor.click .arrow{animation:cursor-click .35s ease}
@keyframes cursor-click{50%{transform:scale(.8)}}
.mm-ripple{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid var(--c,#7cc0ff);
pointer-events:none;animation:ripple .6s ease-out forwards;z-index:19}
@keyframes ripple{from{transform:scale(.2);opacity:1}to{transform:scale(1.4);opacity:0}}
.mm-caret{display:inline-block;width:2px;height:1.05em;margin-left:1px;vertical-align:-.15em;background:currentColor;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.band{padding:clamp(80px,12vh,140px) 0}
.band .head{text-align:center;max-width:820px;margin:0 auto 46px}
.grid-more{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:980px){.grid-more{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grid-more{grid-template-columns:1fr}}
.grid-more .point h3{font-size:16px}
.plat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media(max-width:980px){.plat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.plat-grid{grid-template-columns:repeat(2,1fr)}}
.plat{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 14px 20px;border-radius:20px;text-align:center;color:#fff;
background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid var(--line);transition:.3s}
.plat:hover{color:#fff;transform:translateY(-5px);border-color:rgba(124,192,255,.55);box-shadow:0 20px 50px rgba(0,8,40,.45)}
.plat .bi{font-size:48px;fill:#fff}
.plat b{font-size:17px}
.plat span{font-size:13px;color:var(--muted)}
.plat em{font-style:normal;font-size:13px;font-weight:700;color:var(--sky)}
.band.faq{padding-top:0}
.band.faq .head{max-width:1000px}
.faq-list{max-width:860px;margin:0 auto;display:grid;gap:12px}
.faq-item{border-radius:18px;background:linear-gradient(180deg,rgba(20,36,110,.55),rgba(10,22,80,.45));border:1px solid var(--line);
transition:border-color .3s,background .3s}
.faq-item:hover,.faq-item[open]{border-color:rgba(124,192,255,.45)}
.faq-item[open]{background:linear-gradient(180deg,rgba(28,48,140,.6),rgba(14,28,96,.5))}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;border-radius:17px;
cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";flex:none;width:9px;height:9px;margin-right:4px;border-right:2px solid var(--sky);
border-bottom:2px solid var(--sky);transform:translateY(-3px) rotate(45deg);transition:transform .3s}
.faq-item[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.faq-item summary:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.faq-item h3{margin:0;font-size:17px;font-weight:700;line-height:1.35}
.faq-a{padding:0 22px 20px}
.faq-a p{margin:0;max-width:760px;color:var(--ink-2);font-size:15.5px;line-height:1.6}
.final{position:relative;overflow:hidden;text-align:center;padding:clamp(90px,14vh,160px) 0;margin:0 var(--gutter);border-radius:36px;
background:radial-gradient(80% 120% at 50% 0%,#2a62e6 0%,#1a45b4 40%,#0e2a82 80%);border:1px solid var(--line-2);
box-shadow:0 40px 120px rgba(0,6,40,.6)}
.final .mini-wall{position:absolute;inset:0;opacity:.28;perspective:1200px;pointer-events:none}
.final .mini-wall .wall{--tile-w:160px;transform:translate(-50%,-50%) rotateX(28deg) rotateZ(-10deg)}
.final::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(56% 62% at 50% 50%,rgba(18,52,166,.9) 0%,rgba(18,52,166,.62) 55%,rgba(18,52,166,.15) 100%)}
.final .inner{position:relative;z-index:1}
.final img.icon{width:96px;height:auto;margin:0 auto 10px;filter:drop-shadow(0 14px 26px rgba(0,6,40,.6))}
.final h2{margin:10px 0 0;font-size:clamp(34px,5vw,60px);line-height:1.05;font-weight:800;letter-spacing:-.02em}
.site-foot{position:relative;z-index:1;margin-top:90px;padding:56px 0 34px;background:rgba(3,10,42,.72);border-top:1px solid var(--line);
backdrop-filter:blur(10px)}
.site-foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
@media(max-width:860px){.site-foot .cols{grid-template-columns:1fr 1fr}}
.site-foot .logo{display:flex;align-items:center;gap:10px;font-family:'SpinCycle',var(--font);font-size:26px;color:#fff}
.site-foot .logo img{width:34px;height:auto}
.site-foot h3{margin:4px 0 12px;font-size:13px;font-weight:700;line-height:inherit;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin:7px 0}
.site-foot li a{color:var(--ink-2);font-size:15px}
.site-foot li a:hover{color:#fff}
.site-foot .fine{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
color:var(--muted-2);font-size:13px}
.site-foot p{color:var(--muted);font-size:14px;max-width:340px}
.lightbox{position:fixed;inset:0;z-index:100;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;
padding:60px 20px 24px;background:rgba(2,6,26,.88);backdrop-filter:blur(10px)}
.lightbox.open{display:flex;animation:lb-in .3s ease}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
.lightbox .lb-img{max-width:min(1400px,96vw);max-height:calc(100vh - 170px);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6);object-fit:contain}
.lightbox .lb-tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.lightbox .lb-tabs button{padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.06);cursor:pointer;font-weight:600;font-size:14px}
.lightbox .lb-tabs button.on{background:#fff;color:#0a1a52}
.lightbox .lb-close{position:absolute;top:14px;right:18px;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);
background:rgba(255,255,255,.08);cursor:pointer;font-size:22px;line-height:1}
.lightbox .lb-cap{color:var(--ink-2);font-size:14px}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.tile,.hero-icon img,.hero-icon .glow,.sparkle,.scroll-cue i::after,.callout .dot::after{animation:none!important}
.reveal{opacity:1;transform:none;transition:none}
}
/* ---- sections/layouts.css */
.sx-layouts{font-family:var(--font);color:#e9ecf8;user-select:none;-webkit-user-select:none}
.sx-layouts .lp-bg{position:absolute;inset:0;
background:
radial-gradient(70% 38% at 30% 0%,rgba(132,96,214,.34) 0%,rgba(132,96,214,0) 100%),
radial-gradient(60% 34% at 78% 4%,rgba(90,120,230,.26) 0%,rgba(90,120,230,0) 100%),
radial-gradient(90% 70% at 50% 62%,#1a1f42 0%,#141836 55%,#0f1229 100%)}
.sx-layouts .lp-bg::after{content:"";position:absolute;inset:0;opacity:.55;
background-image:radial-gradient(1px 1px at 12% 22%,rgba(255,255,255,.7),transparent 60%),
radial-gradient(1px 1px at 81% 31%,rgba(255,255,255,.6),transparent 60%),
radial-gradient(1.2px 1.2px at 64% 78%,rgba(255,255,255,.5),transparent 60%),
radial-gradient(1px 1px at 27% 84%,rgba(255,255,255,.5),transparent 60%),
radial-gradient(1px 1px at 92% 66%,rgba(255,255,255,.55),transparent 60%),
radial-gradient(1.2px 1.2px at 44% 12%,rgba(255,255,255,.5),transparent 60%),
radial-gradient(1px 1px at 6% 58%,rgba(255,255,255,.45),transparent 60%)}
.sx-layouts .lp-glow{position:absolute;left:0;top:0;width:380px;height:380px;border-radius:50%;pointer-events:none;will-change:transform,opacity;
background:radial-gradient(circle,rgba(255,226,160,.30) 0%,rgba(190,150,255,.16) 34%,rgba(120,110,255,.06) 58%,rgba(0,0,0,0) 72%)}
.sx-layouts.is-compact .lp-glow{width:330px;height:330px}
.sx-layouts .lp-svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.sx-layouts .lp-edge,.sx-layouts .lp-axis{stroke-linecap:round;stroke-linejoin:round}
.sx-layouts .lp-mon{font:600 11px var(--font);fill:rgba(233,236,248,.62);letter-spacing:.04em}
.sx-layouts.is-compact .lp-mon{font-size:12px}
.sx-layouts .lp-nodes{position:absolute;inset:0;pointer-events:none}
.sx-layouts .lp-node{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;text-align:center;
font-weight:600;line-height:1.2;white-space:nowrap;letter-spacing:-.005em;will-change:transform;transform-origin:50% 50%;
box-shadow:0 6px 16px rgba(3,6,26,.38),inset 0 0 0 1px rgba(255,255,255,.22);transition:box-shadow .5s}
.sx-layouts .lp-node .lb{display:block;will-change:transform}
.sx-layouts .lp-node.l0{font-weight:650;letter-spacing:-.015em;
box-shadow:0 10px 30px rgba(3,6,26,.5),0 0 34px rgba(255,226,160,.28),inset 0 0 0 1px rgba(255,255,255,.5)}
.sx-layouts .lp-node.l2{box-shadow:0 5px 12px rgba(3,6,26,.4),inset 0 0 0 1px rgba(255,255,255,.16)}
.sx-layouts .lp-node.ghost{box-shadow:inset 0 0 0 2px rgba(252,239,199,.5),0 0 60px rgba(252,239,199,.08)}
.sx-layouts .lp-panel{position:absolute;left:16px;right:16px;top:8px;height:98px;border-radius:18px;z-index:5;
background:linear-gradient(180deg,rgba(40,45,82,.94),rgba(29,33,62,.94));border:1px solid rgba(255,255,255,.1);
box-shadow:0 16px 40px rgba(2,5,24,.45),inset 0 1px 0 rgba(255,255,255,.06)}
.sx-layouts .lp-card{position:absolute;top:16px;width:122px;height:70px;padding:0;border-radius:12px;cursor:pointer;
background:#232846;border:1.5px solid rgba(255,255,255,.1);color:#e7eaf6;font:inherit;text-align:center;
transition:transform .25s cubic-bezier(.3,1.4,.5,1),border-color .25s,box-shadow .35s,background .3s}
.sx-layouts .lp-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.3)}
.sx-layouts .lp-card:focus-visible{outline:2px solid #9fd0ff;outline-offset:2px}
.sx-layouts .lp-card .nm{position:absolute;left:0;right:0;top:6px;display:block;height:20px;line-height:20px;font-size:12.5px;font-weight:600;white-space:nowrap;letter-spacing:-.005em}
.sx-layouts .lp-card .pv{position:absolute;left:5px;right:5px;top:27px;bottom:5px;border-radius:8px;display:block;
background:rgba(255,255,255,.045);transition:background .35s}
.sx-layouts .lp-card .pv svg{display:block;width:100%;height:100%}
.sx-layouts .lp-card .ln,.sx-layouts .lp-chip .ln{fill:none;stroke:#bfcaf0;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s}
.sx-layouts .lp-card .ln.th,.sx-layouts .lp-chip .ln.th{stroke-width:1.35}
.sx-layouts .lp-card .fl,.sx-layouts .lp-chip .fl{fill:#bfcaf0;transition:fill .35s}
.sx-layouts .lp-card .fl.o,.sx-layouts .lp-chip .fl.o{opacity:.65}
.sx-layouts .lp-card.on{border-color:#7aa2ff;background:#26305e;
box-shadow:0 0 0 2px rgba(91,140,255,.45),0 10px 26px rgba(50,90,255,.45)}
.sx-layouts .lp-card.on .pv{background:linear-gradient(180deg,#5f8fff,#4570ee)}
.sx-layouts .lp-card.on .ln{stroke:#fff}.sx-layouts .lp-card.on .fl{fill:#fff}
.sx-layouts .lp-card .pp,.sx-layouts .lp-sheet .pp{position:absolute;top:-9px;left:50%;transform:translateX(-50%);padding:0 8px;border-radius:999px;
font-size:11px;font-weight:700;line-height:16px;color:#302000;white-space:nowrap;letter-spacing:.01em;
background:linear-gradient(95deg,rgb(246,200,92),rgb(214,150,28));box-shadow:0 2px 8px rgba(0,0,0,.35)}
.sx-layouts .press{animation:lp-press .38s cubic-bezier(.3,1.5,.5,1)}
@keyframes lp-press{0%{transform:scale(1)}35%{transform:scale(.93)}100%{transform:scale(1)}}
.sx-layouts .lp-cur{transition:opacity .4s}
.sx-layouts .lp-sheet{position:absolute;left:0;right:0;bottom:0;height:122px;z-index:5;border-radius:22px 22px 0 0;
background:linear-gradient(180deg,#272c50,#1d2142);border-top:1px solid rgba(255,255,255,.12);
box-shadow:0 -12px 32px rgba(2,5,24,.45)}
.sx-layouts .lp-sheet .hd{position:absolute;top:8px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:2px;background:rgba(255,255,255,.28)}
.sx-layouts .lp-sheet .ttl{position:absolute;top:19px;left:18px;right:18px;height:22px;display:flex;align-items:center;gap:7px;
font-size:14px;font-weight:600;color:#eef1fb;white-space:nowrap}
.sx-layouts .lp-sheet .ttl b{font-weight:700}
.sx-layouts .lp-sheet .ttl .sfx{color:rgba(233,236,248,.6);font-weight:500}
.sx-layouts .lp-sheet .ttl .pp{position:static;transform:none;margin-left:4px;font-size:12px;line-height:18px;padding:0 9px;
opacity:0;transition:opacity .3s}
.sx-layouts .lp-sheet.is-prem .ttl .pp{opacity:1}
.sx-layouts .lp-sheet .ttl.swap{animation:lp-swap .45s cubic-bezier(.2,.8,.2,1)}
@keyframes lp-swap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sx-layouts .lp-sheet .strip-wrap{position:absolute;left:0;right:0;top:44px;height:56px;overflow:hidden}
.sx-layouts .lp-sheet .strip{position:relative;display:flex;gap:8px;width:max-content;padding:6px 16px 0;
transition:transform .55s cubic-bezier(.3,.8,.3,1);will-change:transform}
.sx-layouts .lp-chip{position:relative;flex:none;height:42px;display:flex;align-items:center;gap:7px;padding:0 14px 0 5px;border-radius:21px;
cursor:pointer;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.12);color:#e7eaf6;font:inherit;font-size:13px;font-weight:600;
white-space:nowrap;transition:background .3s,border-color .3s,box-shadow .35s}
.sx-layouts .lp-chip .ic{width:52px;height:30px;border-radius:15px;display:grid;place-items:center;background:rgba(255,255,255,.07);transition:background .3s}
.sx-layouts .lp-chip .ic svg{width:50px;height:17px;display:block}
.sx-layouts .lp-chip .cr{position:absolute;top:-6px;right:-3px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
background:linear-gradient(135deg,rgb(246,200,92),rgb(214,150,28));box-shadow:0 2px 6px rgba(0,0,0,.35)}
.sx-layouts .lp-chip .cr svg{width:11px;height:11px;fill:#302000}
.sx-layouts .lp-chip.on{background:linear-gradient(95deg,#5b8cff,#6b6cff);border-color:rgba(255,255,255,.35);color:#fff;
box-shadow:0 6px 18px rgba(70,110,255,.45)}
.sx-layouts .lp-chip.on .ic{background:rgba(255,255,255,.2)}
.sx-layouts .lp-chip.on .ln{stroke:#fff}.sx-layouts .lp-chip.on .fl{fill:#fff}
.sx-layouts .lp-tap{position:absolute;left:0;top:0;width:0;height:0;z-index:20;pointer-events:none}
.sx-layouts .lp-tap i{position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:50%;
background:rgba(255,255,255,.26);border:2px solid rgba(255,255,255,.9);box-shadow:0 6px 16px rgba(0,0,0,.35);
opacity:0;transform:scale(1.3);transition:opacity .25s,transform .25s cubic-bezier(.3,1.4,.5,1),background .2s}
.sx-layouts .lp-tap.show i{opacity:1;transform:scale(1)}
.sx-layouts .lp-tap.down i{transform:scale(.78);background:rgba(255,255,255,.5)}
/* ---- sections/templates.css */
.sx-templates{background:#1e2139;color:#e9ecf5;font-family:var(--font);-webkit-user-select:none;user-select:none;touch-action:pan-y;
cursor:default}
.sx-templates .gal{position:absolute;inset:0;transform-origin:50% 45%}
.sx-templates .tabs{position:absolute;left:0;right:0;top:0;height:52px;display:flex;justify-content:center;gap:6px;padding-top:7px;
background:#1e2139;z-index:3;box-shadow:0 6px 14px rgba(8,10,28,.28)}
.sx-templates .tab{position:relative;width:128px;display:grid;place-items:center;font-size:17px;font-weight:500;color:#d9ddeb;
letter-spacing:.005em;border-radius:9px 9px 0 0}
.sx-templates .tab.on{background:#141827;color:#fff}
.sx-templates .tab.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;background:#f2f7ff}
.sx-templates .list{position:absolute;left:0;right:0;top:52px;bottom:64px;overflow:hidden}
.sx-templates .content{position:absolute;left:0;right:0;top:0;will-change:transform}
.sx-templates .cat{position:absolute;left:0;right:0;background:linear-gradient(180deg,#1f223a 0%,var(--tb,#1d2854) 100%)}
.sx-templates .cat.up{z-index:2}
.sx-templates .bh{position:absolute;left:18px;top:11px;font-size:15px;font-weight:700;color:#fff;letter-spacing:.005em}
.sx-templates .sa{position:absolute;right:18px;top:12px;font-size:13px;font-weight:500;color:#8fabf2}
.sx-templates .track{position:absolute;left:0;top:0;height:1px;will-change:transform}
.sx-templates .slot{position:absolute;left:0;top:0}
.sx-templates .slot:has(.card.lift),.sx-templates .slot:has(.card.sel){z-index:3}
.sx-templates .sb{position:absolute;right:4px;top:0;width:4px;border-radius:2px;background:rgba(255,255,255,.26);will-change:transform}
.sx-templates .card{position:absolute;left:0;top:0;width:144px;height:108px;border-radius:9px;background-color:#2a2f4a;
background-repeat:no-repeat,no-repeat;background-position:right 6px bottom 6px,center;background-size:19px 19px,cover;
box-shadow:0 0 0 1px rgba(255,255,255,.13),0 6px 14px rgba(4,6,24,.28);
transition:translate .5s cubic-bezier(.3,1.45,.5,1),scale .5s cubic-bezier(.3,1.45,.5,1),box-shadow .45s ease}
.sx-templates .card .nm{position:absolute;left:-7px;right:-7px;top:calc(100% + 7px);text-align:center;font-size:12.5px;line-height:16px;
color:#dce1f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.sx-templates .card .pm{position:absolute;right:9px;top:-9px;height:18px;padding:0 8px;border-radius:9px;font-size:11px;font-weight:700;
line-height:18px;letter-spacing:.01em;color:#3b2500;background:linear-gradient(180deg,#f7d06a 0%,#e2a62e 100%);
box-shadow:0 2px 6px rgba(20,10,0,.35),inset 0 1px 0 rgba(255,255,255,.45)}
.sx-templates .card::before{content:"";position:absolute;inset:-6px;border-radius:14px;border:2.5px solid #6f9bff;
box-shadow:0 0 18px rgba(111,155,255,.55);opacity:0;scale:.9;
transition:opacity .25s ease,scale .55s cubic-bezier(.3,1.7,.5,1)}
.sx-templates .card.sel::before{opacity:1;scale:1}
.sx-templates .card.lift{translate:0 -6px;scale:1.07;z-index:3;
box-shadow:0 0 0 2px rgba(140,190,255,.95),0 18px 36px rgba(2,4,20,.55),0 0 34px rgba(110,170,255,.5)}
.sx-templates .card.lift .nm{color:#fff}
@media (hover:hover){
.sx-templates.live .card:hover{translate:0 -6px;scale:1.07;z-index:3;cursor:pointer;
box-shadow:0 0 0 2px rgba(140,190,255,.95),0 18px 36px rgba(2,4,20,.55),0 0 34px rgba(110,170,255,.5)}
.sx-templates.live .card:hover .nm{color:#fff}
}
.sx-templates.drag .card{cursor:grabbing}
.sx-templates .bot{position:absolute;left:0;right:0;bottom:0;height:64px;background:#1e213b;z-index:3;
box-shadow:0 -6px 14px rgba(8,10,28,.28)}
.sx-templates .tbtn{position:absolute;top:10px;width:204px;height:44px;border-radius:12px;display:flex;align-items:center;
justify-content:center;gap:8px;font-size:18px;font-weight:500;color:#f3f5fc;
transition:scale .18s ease,filter .25s ease,box-shadow .3s ease}
.sx-templates .tbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sx-templates .tb-c{left:16px;border:1.5px solid rgba(255,255,255,.09);background:rgba(255,255,255,.015)}
.sx-templates .tb-k{right:16px;background:linear-gradient(95deg,#5d89fe 0%,#6c74fe 50%,#7862fd 100%);
box-shadow:0 8px 22px rgba(96,110,255,.32),inset 0 1px 0 rgba(255,255,255,.22)}
.sx-templates .tb-k.hot{filter:brightness(1.12);box-shadow:0 10px 28px rgba(96,110,255,.55),inset 0 1px 0 rgba(255,255,255,.3)}
.sx-templates .tb-k.press{scale:.95}
.sx-templates .tb-k::after{content:"";position:absolute;inset:0;border-radius:12px;opacity:0;pointer-events:none}
.sx-templates .tb-k.pulse::after{animation:tp-pulse 1.1s ease-out}
@keyframes tp-pulse{0%{opacity:1;box-shadow:0 0 0 0 rgba(130,155,255,.8)}100%{opacity:0;box-shadow:0 0 0 16px rgba(130,155,255,0)}}
.sx-templates .opened{position:absolute;left:0;top:0;transform-origin:0 0;z-index:6;visibility:hidden;overflow:hidden;background:#141827}
.sx-templates .opened.on{visibility:visible;will-change:transform,clip-path}
.sx-templates .opened .kb{position:absolute;inset:0;transform-origin:50% 50%}
.sx-templates .opened img{position:absolute;display:block;max-width:none;-webkit-user-drag:none}
.sx-templates .opened .hi{left:0;top:0;width:100%;height:100%;object-fit:cover;visibility:hidden}
.sx-templates .opened .hi.ok{visibility:visible}
.sx-templates .card .pm{transition:opacity .35s ease}
.sx-templates .card.src .pm{opacity:0;transition-duration:.15s}
.sx-templates .opened .blur{left:-6%;top:-6%;width:112%;height:112%;object-fit:cover;filter:blur(22px) saturate(1.1);opacity:.9}
.sx-templates .mm-cursor{z-index:9}
.sx-templates .mm-ripple{z-index:8}
.sx-templates.tp-c .tabs{height:46px;padding-top:6px;gap:4px}
.sx-templates.tp-c .tab{width:104px;font-size:15px}
.sx-templates.tp-c .list{top:46px;bottom:62px}
.sx-templates.tp-c .bh{left:14px;top:9px;font-size:14px}
.sx-templates.tp-c .sa{right:14px;top:10px;font-size:12px}
.sx-templates.tp-c .card{width:112px;height:84px;border-radius:8px;background-size:16px 16px,cover;background-position:right 5px bottom 5px,center}
.sx-templates.tp-c .card .nm{top:calc(100% + 6px);font-size:12px;line-height:15px;left:-5px;right:-5px}
.sx-templates.tp-c .card .pm{right:7px;top:-9px;height:18px;line-height:18px;padding:0 7px;font-size:12px}
.sx-templates.tp-c .card::before{inset:-5px;border-radius:12px}
.sx-templates.tp-c .bot{height:62px}
.sx-templates.tp-c .tbtn{top:10px;width:150px;height:42px;font-size:17px;border-radius:12px}
.sx-templates.tp-c .tb-c{left:12px}
.sx-templates.tp-c .tb-k{right:12px}
/* ---- sections/media.css */
.sx-media{font-family:var(--font);color:#12303a;-webkit-user-select:none;user-select:none;
background:radial-gradient(58% 62% at 52% 44%,#eef6fe 0%,#e0edfb 46%,#d2e3f6 78%,#c9dcf2 100%)}
.sx-media .lines,.sx-media .leads{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.sx-media .lines{z-index:1}
.sx-media .nodes{position:absolute;inset:0;z-index:2;pointer-events:none}
.sx-media .leads{z-index:3}
.sx-media .cards{position:absolute;inset:0;z-index:4;pointer-events:none}
.sx-media .ui{position:absolute;inset:0;z-index:5;pointer-events:none}
.sx-media svg{display:block}
.sx-media:not(.run) *,.sx-media:not(.run) *::before,.sx-media:not(.run) *::after{animation-play-state:paused!important}
.sx-media.still *,.sx-media.still *::before,.sx-media.still *::after{transition:none!important}
.sx-media.reduced *,.sx-media.reduced *::before,.sx-media.reduced *::after{animation:none!important}
.sx-media .ln{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sx-media.cmp .ln{stroke-width:1.8}
.sx-media .gear .g0{fill:#fff;stroke:#8aa0b4;stroke-width:1.2}
.sx-media .gear .g1{fill:none;stroke:#3d4b5c;stroke-width:1.7;stroke-dasharray:1.6 1.1}
.sx-media .gear .g2{fill:#3d4b5c}
.sx-media .nd{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.14;
color:#10303a;white-space:nowrap}
.sx-media .nd.root{box-sizing:border-box;border-radius:13px;border:2px solid #3fb0b5;font-weight:500;letter-spacing:-.01em;
background:linear-gradient(180deg,#d4f6f6 0%,#b2eaec 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 0 0 5px rgba(90,190,200,.13),0 10px 24px rgba(28,90,120,.22),0 2px 5px rgba(28,90,120,.14)}
.sx-media .nd.oct{--cx:13px;--cy:10px;font-size:14px;filter:drop-shadow(0 3px 5px rgba(28,80,110,.2))}
.sx-media .nd.oct.sm{--cx:16px;--cy:13px;font-size:12.5px}
.sx-media .nd.oct::before,.sx-media .nd.oct::after{content:"";position:absolute;inset:0;
clip-path:polygon(var(--cx) 0,calc(100% - var(--cx)) 0,100% var(--cy),100% calc(100% - var(--cy)),calc(100% - var(--cx)) 100%,var(--cx) 100%,0 calc(100% - var(--cy)),0 var(--cy))}
.sx-media .nd.oct::before{background:var(--b)}
.sx-media .nd.oct::after{inset:1.6px;background:linear-gradient(180deg,var(--f2) 0%,var(--f) 100%)}
.sx-media .nd.oct span{position:relative;z-index:1}
.sx-media.cmp .nd.oct{--cx:12px;--cy:9.5px;font-size:13.5px}
.sx-media.cmp .nd.oct.sm{--cx:15px;--cy:12.5px;font-size:12px}
.sx-media .lw{width:0;height:0;display:block}
.sx-media .lf{position:absolute;left:0;top:0;box-sizing:border-box;height:20px;padding:0 7px;display:flex;align-items:center;gap:5px;
border-radius:7px;border:1.2px solid var(--b);background:linear-gradient(180deg,#fff 0%,var(--lf) 70%);
font-size:11.5px;font-weight:500;color:#173842;white-space:nowrap;transform:translate(0,-50%);
box-shadow:0 2px 5px rgba(28,80,110,.12);transition:opacity .3s ease,transform .45s cubic-bezier(.3,1.5,.5,1),box-shadow .4s ease}
.sx-media.cmp .lf{height:24px;padding:0 9px;font-size:12px;border-radius:8px;transform:translate(-50%,-50%)}
.sx-media.wd .lw.media .lf{opacity:0;transform:translate(0,-50%) scale(.86)}
.sx-media .bdg{position:absolute;right:-8px;top:-9px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
background:#fff;border:1.5px solid var(--b);color:var(--b);box-shadow:0 2px 6px rgba(28,80,110,.25);
transform:scale(0);transition:transform .45s cubic-bezier(.3,1.7,.5,1)}
.sx-media .bdg svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sx-media .lf.has .bdg{transform:scale(1)}
.sx-media .lf.act{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--b),0 6px 16px rgba(28,80,110,.28);transform:translate(-50%,-50%) scale(1.06)}
.sx-media .mn{position:absolute;box-sizing:border-box;display:flex;flex-direction:column;padding:0 4.8px 4.8px;border-radius:9px;
border:1.5px solid var(--b);background:linear-gradient(180deg,var(--f2) 0%,var(--f) 100%);
box-shadow:0 6px 14px rgba(28,80,110,.2),0 1px 3px rgba(28,80,110,.12)}
.sx-media .mn.grow{opacity:0;transform:scale(.25);
transition:transform .55s cubic-bezier(.3,1.45,.5,1),opacity .28s ease}
.sx-media .lw.media .mn.grow{opacity:1;transform:none}
.sx-media .mh{flex:none;height:20.8px;line-height:21px;padding:0 1px;font-size:11px;font-weight:500;color:#173842;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-media .mt,.sx-media .mp{position:relative;flex:1;border-radius:5px;overflow:hidden}
.sx-media .img{position:absolute;inset:0;background-repeat:no-repeat}
.sx-media .mn-video .mt{background:#3c3592}
.sx-media .mpl{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;
display:grid;place-items:center;background:rgba(18,12,50,.55);box-shadow:0 0 0 1.5px rgba(255,255,255,.7)}
.sx-media .mpl svg{width:13px;height:13px;margin-left:1px;fill:#fff}
.sx-media .mn-wiki .mt{background:#d5d6db}
.sx-media .mn-wiki .img{opacity:0;transform:scale(1.08);transition:opacity .5s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.sx-media .lw.ready .mn-wiki .img{opacity:1;transform:none}
.sx-media .shim{position:absolute;inset:0;overflow:hidden;transition:opacity .4s ease}
.sx-media .shim::after,.sx-media .wsk::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:60%;
background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 100%);
animation:sxm-sweep 1.15s ease-in-out infinite}
.sx-media .lw.ready .shim{opacity:0}
@keyframes sxm-sweep{from{transform:translateX(0)}to{transform:translateX(270%)}}
.sx-media .mp{background:#4b4e60;display:grid;place-items:center}
.sx-media .mp .rd{position:absolute;left:5px;top:5px;width:6px;height:6px;border-radius:50%;background:#ff4f5a;opacity:0;transition:opacity .25s}
.sx-media .lw.recording .mp .rd{opacity:1;animation:sxm-blink 1s ease-in-out infinite}
.sx-media .mc{position:absolute;opacity:0;will-change:transform,opacity}
.sx-media .bob{position:relative;width:100%;height:100%;will-change:transform}
.sx-media .shell{box-sizing:border-box;width:100%;height:100%;display:flex;flex-direction:column;padding:0 7px 7px;border-radius:14px;
border:1.5px solid var(--b);background:linear-gradient(180deg,var(--f2) 0%,var(--f) 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 30px 50px -16px rgba(14,44,90,.45),0 10px 22px rgba(14,44,90,.16),0 0 0 4px rgba(255,255,255,.28)}
.sx-media .shell{transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.sx-media .mc.dim .shell{opacity:.38;transform:scale(.965)}
.sx-media.wd .mc{pointer-events:auto}
.sx-media.wd .mc:hover .shell{transform:translateY(-4px) scale(1.012);
box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 38px 60px -16px rgba(14,44,90,.5),0 14px 28px rgba(14,44,90,.2),0 0 0 4px rgba(255,255,255,.4)}
.sx-media .ld.dim{stroke-opacity:.35}
.sx-media .ldot.dim{fill-opacity:.4;stroke-opacity:.4}
.sx-media .hd{flex:none;height:26px;line-height:27px;padding:0 2px;font-size:13.5px;font-weight:500;color:#12303a;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-media.cmp .hd{height:28px;line-height:29px;font-size:15px}
.sx-media .panel{position:relative;flex:1;min-height:0;border-radius:9px;overflow:hidden;display:flex;flex-direction:column}
.sx-media .port{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;box-sizing:border-box;border-radius:50%;
background:#fff;border:2px solid var(--b);box-shadow:0 1px 3px rgba(14,44,90,.3)}
.sx-media .ld{fill:none;stroke-width:1.7;stroke-dasharray:4.5 4.5;stroke-linecap:round;animation:sxm-march 1.1s linear infinite}
.sx-media .ldot{fill:#fff;stroke-width:2}
@keyframes sxm-march{to{stroke-dashoffset:-9}}
.sx-media .mc-video .panel{background:linear-gradient(180deg,#4a41a6 0%,#3d3592 100%)}
.sx-media .vthumb{position:relative;flex:none;overflow:hidden;background:#2d2a7a}
.sx-media .vthumb .img{will-change:transform;transform-origin:90% 10%}
.sx-media .drops{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .6s ease}
.sx-media .mc-video.playing .drops{opacity:1}
.sx-media .dp{position:absolute;bottom:-14px;border-radius:50% 50% 50% 50%/62% 62% 40% 40%;opacity:0;
box-shadow:0 0 0 1.2px rgba(25,12,45,.55),inset -2px -2px 0 rgba(0,0,0,.12);
animation:sxm-rise var(--d) linear var(--dl) infinite}
.sx-media .mc-video:not(.playing) .dp{animation-play-state:paused}
@keyframes sxm-rise{
0%{transform:translate(0,0) rotate(-8deg);opacity:0}
15%{opacity:.92}
70%{opacity:.85}
100%{transform:translate(var(--dx),calc(var(--hgt) * -1)) rotate(14deg);opacity:0}
}
.sx-media .shade{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;
background:linear-gradient(180deg,rgba(14,8,46,0) 50%,rgba(14,8,46,.62) 100%)}
.sx-media .mc-video.started .shade{opacity:1}
.sx-media .eq{position:absolute;left:8px;top:8px;height:20px;padding:0 6px;display:flex;align-items:center;gap:2.5px;border-radius:6px;
background:rgba(12,8,40,.55);opacity:0;transform:scale(.8);transition:opacity .3s ease,transform .3s ease}
.sx-media .eq i{display:block;width:3px;height:11px;border-radius:2px;background:#fff;transform-origin:50% 100%;transform:scaleY(.35)}
.sx-media .mc-video.playing .eq{opacity:1;transform:none}
.sx-media .mc-video.playing .eq i{animation:sxm-eq .9s ease-in-out infinite}
.sx-media .mc-video.playing .eq i:nth-child(2){animation-duration:.7s;animation-delay:-.3s}
.sx-media .mc-video.playing .eq i:nth-child(3){animation-duration:1.05s;animation-delay:-.55s}
@keyframes sxm-eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.sx-media .pbtn{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
display:grid;place-items:center;color:#fff;background:rgba(16,10,52,.6);
box-shadow:0 0 0 2px rgba(255,255,255,.85),0 8px 20px rgba(8,4,30,.45);
transition:opacity .35s ease,transform .45s cubic-bezier(.3,1.5,.5,1)}
.sx-media .pbtn svg{width:22px;height:22px}
.sx-media .pbtn::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(255,255,255,.8);
animation:sxm-ping 2s ease-out infinite}
.sx-media .mc-video.started .pbtn::after{animation:none;opacity:0}
.sx-media .mc-video.ctl-hide .pbtn{opacity:0;transform:scale(.7)}
.sx-media .pp path{fill:currentColor}
@keyframes sxm-ping{0%{transform:scale(1);opacity:.85}80%,100%{transform:scale(1.55);opacity:0}}
.sx-media .vbar{position:absolute;left:10px;right:10px;bottom:9px;height:3px;border-radius:2px;background:rgba(255,255,255,.32);
opacity:0;transition:opacity .4s ease}
.sx-media .mc-video.started .vbar,.sx-media .mc-video.started .vtm{opacity:1}
.sx-media .vbar .fill{position:absolute;inset:0;border-radius:2px;transform-origin:0 50%;transform:scaleX(0);
background:linear-gradient(90deg,#ff5a5f,#ff2d55)}
.sx-media .vbar .kw{position:absolute;inset:0}
.sx-media .vbar .knob{position:absolute;left:-5px;top:-3.5px;width:10px;height:10px;border-radius:50%;background:#fff;
box-shadow:0 0 0 3px rgba(255,45,85,.35),0 1px 3px rgba(0,0,0,.4)}
.sx-media .vtm{position:absolute;right:9px;bottom:17px;padding:1px 5px;border-radius:4px;font-size:11px;font-weight:600;color:#fff;
background:rgba(10,6,36,.5);font-variant-numeric:tabular-nums;opacity:0;transition:opacity .4s ease}
.sx-media .vmeta{flex:1;padding:7px 9px 0;color:#fff;overflow:hidden}
.sx-media .vmeta b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.22;font-weight:700}
.sx-media .vmeta span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px;
font-size:11px;line-height:1.3;color:rgba(255,255,255,.78);word-break:break-all}
.sx-media.cmp .pbtn{width:56px;height:56px;margin:-28px 0 0 -28px}
.sx-media.cmp .pbtn svg{width:26px;height:26px}
.sx-media.cmp .vmeta{padding:7px 11px 0}
.sx-media.cmp .vmeta b{font-size:14px}
.sx-media.cmp .vmeta span{-webkit-line-clamp:1;font-size:12px;word-break:normal;white-space:nowrap;text-overflow:ellipsis;display:block}
.sx-media .mc-wiki .panel{background:linear-gradient(180deg,#d9dadf 0%,#cbccd2 100%)}
.sx-media .wph{position:relative;flex:none;overflow:hidden;background:#d0d1d6}
.sx-media .wph .img{transition:opacity .55s ease,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.sx-media .wtt{padding:6px 9px 0;font-size:15px;line-height:1.2;font-weight:700;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
transition:opacity .45s ease .12s,transform .55s cubic-bezier(.2,.8,.2,1) .12s}
.sx-media .wdm{padding:2px 9px 0;font-size:11px;color:#3a3d46;transition:opacity .45s ease .2s,transform .55s cubic-bezier(.2,.8,.2,1) .2s}
.sx-media.cmp .wtt{padding:8px 11px 0;font-size:17px}
.sx-media.cmp .wdm{padding:2px 11px 0;font-size:12px}
.sx-media .mc-wiki.loading .wph .img{opacity:0;transform:scale(1.12)}
.sx-media .mc-wiki.loading .wtt,.sx-media .mc-wiki.loading .wdm{opacity:0;transform:translateY(6px)}
.sx-media .wsk{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .45s ease}
.sx-media .mc-wiki.loading .wsk{opacity:1}
.sx-media .wsk i{position:absolute;left:9px;display:block;border-radius:5px;background:rgba(150,153,165,.38)}
.sx-media .wsk .a{left:0;top:0;width:100%;height:var(--ph);border-radius:0;background:rgba(160,163,175,.3)}
.sx-media .wsk .b{top:calc(var(--ph) + 9px);width:72%;height:12px}
.sx-media .wsk .c{top:calc(var(--ph) + 27px);width:38%;height:8px}
.sx-media .wlk{position:absolute;right:8px;top:8px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
background:rgba(255,255,255,.94);color:#2f6bff;box-shadow:0 2px 8px rgba(0,0,0,.2);transform:scale(0);
transition:transform .45s cubic-bezier(.3,1.7,.5,1) .3s}
.sx-media .wlk svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sx-media .mc-wiki.ready .wlk{transform:scale(1)}
.sx-media .mc-voice .panel{background:linear-gradient(180deg,#52556a 0%,#45485a 100%);padding:0 8px}
.sx-media.cmp .mc-voice .panel{padding:0 10px}
.sx-media .vtop{position:relative;flex:none;height:24px;display:flex;align-items:center;gap:6px;font-size:11.5px;color:#e4e7f2}
.sx-media.cmp .vtop{height:28px;font-size:12.5px}
.sx-media .vtop .rd{width:8px;height:8px;border-radius:50%;background:#ff4f5a;box-shadow:0 0 0 3px rgba(255,79,90,.25);display:none}
.sx-media .vtop .lb{display:none;font-weight:700;color:#ff9aa0;letter-spacing:.02em}
.sx-media .vtop .tr{display:none;margin-left:auto;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.sx-media .mc-voice.rec .vtop .rd{display:block;animation:sxm-blink 1s ease-in-out infinite}
.sx-media .mc-voice.rec .vtop .lb,.sx-media .mc-voice.rec .vtop .tr{display:block}
.sx-media .mc-voice.rec .vtop .fn{display:none}
@keyframes sxm-blink{0%,100%{opacity:1}50%{opacity:.25}}
.sx-media .wv{display:block;flex:none}
.sx-media .vctl{position:relative;flex:1}
.sx-media .rc,.sx-media .pc{position:absolute;inset:0;display:flex;align-items:center;transition:opacity .3s ease,transform .35s ease}
.sx-media .rc{gap:9px;justify-content:center}
.sx-media .pc{gap:6px;opacity:0;transform:translateY(5px)}
.sx-media .mc-voice.player .rc{opacity:0;transform:translateY(-5px)}
.sx-media .mc-voice.player .pc{opacity:1;transform:none}
.sx-media .stopbtn{position:relative;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#ff4f5a;
box-shadow:0 3px 10px rgba(255,60,80,.45)}
.sx-media .stopbtn i{display:block;width:10px;height:10px;border-radius:2.5px;background:#fff}
.sx-media .mc-voice.rec .stopbtn::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid rgba(255,90,100,.8);
animation:sxm-ping 1.4s ease-out infinite}
.sx-media .hint{font-size:11.5px;color:#cfd3e4}
.sx-media.cmp .stopbtn{width:32px;height:32px}
.sx-media.cmp .hint{font-size:12.5px}
.sx-media .pc .b{flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:#2d303e;color:#a9aec2}
.sx-media .pc .b svg{width:13px;height:13px}
.sx-media .pc .b.vo{color:#e4e7f2}
.sx-media .pc .b.vo svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sx-media .pc .b.vo svg path:first-child{fill:currentColor;stroke:none}
.sx-media .grp{flex:none;height:24px;display:flex;align-items:center;padding:0 3px;border-radius:12px;background:#2d303e;color:#c9cee0}
.sx-media .grp>span{width:20px;height:24px;display:grid;place-items:center}
.sx-media .grp svg{width:12px;height:12px}
.sx-media .grp .pl{color:#fff}
.sx-media .grp .pl svg{width:15px;height:15px}
.sx-media svg.f{fill:currentColor}
.sx-media .sl{position:relative;flex:1;margin:0 5px 0 2px;height:4px;border-radius:2px;background:rgba(220,225,245,.3)}
.sx-media .sl .fl{position:absolute;inset:0;border-radius:2px;transform-origin:0 50%;transform:scaleX(0);background:#7f9bff}
.sx-media .sl .kw{position:absolute;inset:0}
.sx-media .sl .kn{position:absolute;left:-5.5px;top:-3.5px;width:11px;height:11px;border-radius:50%;background:#5b7cff;box-shadow:0 0 0 2px #dfe5ff}
.sx-media .pc .t{flex:none;font-size:11px;font-weight:600;color:#e4e7f2;font-variant-numeric:tabular-nums}
.sx-media.cmp .pc{gap:8px}
.sx-media.cmp .pc .b{width:28px;height:28px}
.sx-media.cmp .grp{height:28px;border-radius:14px}
.sx-media.cmp .grp>span{width:24px;height:28px}
.sx-media.cmp .pc .t{font-size:12px}
.sx-media .sel{position:absolute;box-sizing:border-box;border:2px solid #2f6bff;border-radius:10px;
box-shadow:0 0 0 4px rgba(47,107,255,.16);opacity:0;transform:scale(1.12);transition:opacity .2s ease,transform .3s cubic-bezier(.3,1.5,.5,1)}
.sx-media .sel.on{opacity:1;transform:none}
.sx-media .tb{position:absolute;width:166px;height:36px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;
padding:0 5px;border-radius:12px;background:#262b3c;box-shadow:0 12px 28px rgba(12,24,60,.35),0 0 0 1px rgba(255,255,255,.06);
opacity:0;transform:scale(.82) translateY(4px);transition:opacity .22s ease,transform .38s cubic-bezier(.3,1.5,.5,1)}
.sx-media .tb.on{opacity:1;transform:none}
.sx-media .tb .b{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#e6eaf5;transition:background .18s,transform .18s}
.sx-media .tb .b svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sx-media .tb .b.hit{background:#2f6bff;transform:scale(.92)}
.sx-media.cmp .tb{width:196px;height:42px;padding:0 6px}
.sx-media.cmp .tb .b{width:32px;height:32px}
.sx-media.cmp .tb .b svg{width:20px;height:20px}
.sx-media .uf{position:absolute;height:36px;box-sizing:border-box;display:flex;align-items:center;gap:7px;padding:0 5px 0 9px;border-radius:12px;
background:#fff;border:1.5px solid #2f6bff;color:#1b2333;font-size:12.5px;
box-shadow:0 0 0 4px rgba(47,107,255,.14),0 14px 32px rgba(12,24,60,.28);
opacity:0;transform:scale(.9) translateY(4px);transition:opacity .22s ease,transform .38s cubic-bezier(.3,1.5,.5,1)}
.sx-media .uf.on{opacity:1;transform:none}
.sx-media .uf .li{flex:none;color:#2f6bff}
.sx-media .uf .li svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sx-media .uf .tx{flex:1;min-width:0;display:flex;overflow:hidden;white-space:nowrap;color:#8b93a6}
.sx-media .uf .tx.v{color:#1b2333;justify-content:flex-end}
.sx-media .uf .tx>span{flex:none}
.sx-media .uf mark{background:rgba(47,107,255,.24);color:inherit;border-radius:2px}
.sx-media .uf .mm-caret{color:#2f6bff;margin:0 1px 0 0}
.sx-media .uf .add{flex:none;height:26px;padding:0 13px;display:grid;place-items:center;border-radius:8px;background:#2f6bff;color:#fff;
font-weight:600;transition:transform .15s,background .15s}
.sx-media .uf .add.hit{background:#1d4fd6;transform:scale(.92)}
.sx-media.cmp .uf{height:40px;font-size:13px}
.sx-media.cmp .uf .add{height:30px}
.sx-media .pb{position:absolute;padding:6px 13px;border-radius:9px;background:#262b3c;color:#fff;font-size:12.5px;font-weight:600;
box-shadow:0 8px 20px rgba(12,24,60,.35);opacity:0;transform:translateY(5px) scale(.9);
transition:opacity .2s ease,transform .3s cubic-bezier(.3,1.5,.5,1)}
.sx-media .pb::after{content:"";position:absolute;left:16px;bottom:-5px;width:10px;height:10px;background:#262b3c;transform:rotate(45deg);border-radius:2px}
.sx-media .pb.below::after{bottom:auto;top:-5px}
.sx-media .pb.below{transform:translateY(-5px) scale(.9)}
.sx-media .pb.on{opacity:1;transform:none}
.sx-media.cmp .pb{font-size:13px;padding:7px 14px}
.sx-media .mm-cursor{z-index:30}
.sx-media .tdot{position:absolute;left:0;top:0;z-index:30;will-change:transform;transition:opacity .3s ease}
.sx-media .tdot i{position:absolute;left:-15px;top:-15px;width:30px;height:30px;box-sizing:border-box;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.55) 0%,rgba(110,140,200,.35) 70%);border:2px solid rgba(255,255,255,.95);
box-shadow:0 4px 14px rgba(20,40,90,.35),0 0 0 1px rgba(40,70,140,.25)}
.sx-media .tdot.click i{animation:sxm-press .35s ease}
@keyframes sxm-press{40%{transform:scale(.78)}}
.sx-media .mm-ripple{z-index:29}
.sx-media .pulse{position:absolute;width:0;height:0;z-index:6}
.sx-media .pulse::before{content:"";position:absolute;left:-22px;top:-22px;width:44px;height:44px;box-sizing:border-box;border-radius:50%;
border:2.5px solid var(--c);animation:sxm-pulse .85s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes sxm-pulse{from{transform:scale(.2);opacity:1}to{transform:scale(1.6);opacity:0}}
.sx-media .zm{position:absolute;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;
background:#949cab;box-shadow:0 4px 12px rgba(20,40,80,.22)}
.sx-media .zm svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sx-media.enter .nd{animation:sxm-pop .62s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i,0) * 55ms)}
.sx-media.enter .ln{stroke-dasharray:1;animation:sxm-draw .9s cubic-bezier(.4,0,.2,1) both .1s}
.sx-media.enter .gear{animation:sxm-fade .5s ease both .45s}
@keyframes sxm-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes sxm-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sxm-fade{from{opacity:0}to{opacity:1}}
/* ---- sections/scenes.css */
.sx-scenes{font-family:var(--font);color:#fff;background:#08102c;-webkit-user-select:none;user-select:none;
--violet:#7c5cff;--blue:#5b8cff;--panel:#27225a;--well:#16172f}
.sx-scenes.still *,.sx-scenes.still *::before,.sx-scenes.still *::after{transition:none!important;animation:none!important}
.sx-scenes .sky{position:absolute;inset:0;z-index:0;pointer-events:none;will-change:transform}
.sx-scenes .sc{position:absolute;left:0;top:0;width:100%;height:100%;display:block;opacity:0;transform-origin:50% 45%}
.sx-scenes .calm{position:absolute;inset:0;z-index:1;pointer-events:none;
background:radial-gradient(320px 290px at 273px 275px,rgba(5,10,32,.4) 0%,rgba(5,10,32,.26) 50%,rgba(5,10,32,0) 100%)}
.sx-scenes.m-compact .calm{background:radial-gradient(230px 210px at 226px 193px,rgba(5,10,32,.46) 0%,rgba(5,10,32,.28) 52%,rgba(5,10,32,0) 100%),
linear-gradient(180deg,rgba(5,10,32,0) 55%,rgba(5,10,32,.35) 100%)}
.sx-scenes .map{position:absolute;width:0;height:0;z-index:3}
.sx-scenes.run .map{animation:sxs-float 9s ease-in-out infinite alternate}
@keyframes sxs-float{from{transform:translateY(-3px)}to{transform:translateY(3px)}}
.sx-scenes .arms{position:absolute;left:-420px;top:-420px;overflow:visible;pointer-events:none;
filter:drop-shadow(0 1px 2px rgba(0,0,20,.55))}
.sx-scenes .nd{--x:0px;--y:0px;position:absolute;left:0;top:0;white-space:nowrap;text-align:center;line-height:1.15;opacity:0;
transform:translate(var(--x),var(--y)) translate(-50%,-50%) scale(.3);
transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .3s ease}
.sx-scenes .nd.in{opacity:1;transform:translate(var(--x),var(--y)) translate(-50%,-50%) scale(1)}
.sx-scenes .nd.pill{padding:6px 15px 7px;border-radius:999px;background:var(--pc);color:var(--pt);font-size:13.5px;font-weight:650;
box-shadow:0 4px 12px rgba(0,0,20,.4),inset 0 1px 0 rgba(255,255,255,.5)}
.sx-scenes .nd.sub{width:96px;padding:6px 9px 7px;border-radius:50%;white-space:normal;background:var(--sb);color:#f6f3ff;
border:1.5px solid var(--bd);font-size:11.5px;font-weight:500;line-height:1.22;box-shadow:0 4px 12px rgba(0,0,20,.42)}
.sx-scenes .nd.root{width:110px;height:110px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:radial-gradient(circle at 36% 30%,#fffef6 0%,#fdf4d6 55%,#f4e3ad 100%);color:#1b1810;
font-size:25px;font-weight:800;line-height:1.08;letter-spacing:-.01em;
box-shadow:0 0 0 3px rgba(255,248,220,.22),0 10px 30px rgba(0,0,20,.5),0 0 46px rgba(255,232,160,.35)}
.sx-scenes .nd.root i{font-style:normal;font-size:21px;margin-right:1px;vertical-align:1px}
.sx-scenes .nd.root::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(255,240,190,.55);opacity:0}
.sx-scenes.run .nd.root.in::after{animation:sxs-halo 3.6s ease-out 1.6s infinite}
@keyframes sxs-halo{0%{opacity:.7;transform:scale(.94)}70%,100%{opacity:0;transform:scale(1.3)}}
.sx-scenes.m-compact .nd.pill{font-size:13px;padding:5px 12px 6px}
.sx-scenes.m-compact .nd.sub{width:82px;font-size:12px;padding:5px 5px 6px;line-height:1.18}
.sx-scenes.m-compact .nd.root{width:88px;height:88px;font-size:20px}
.sx-scenes.m-compact .nd.root i{font-size:17px}
.sx-scenes .prow{position:absolute;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:#eef0ff}
.sx-scenes .prow .prem{margin-left:auto;height:18px;padding:0 8px;border-radius:9px;display:grid;place-items:center;
background:linear-gradient(90deg,#5b8cff,#7c5cff);color:#fff;font-size:11px;font-weight:700;letter-spacing:.01em;
box-shadow:0 2px 8px rgba(91,140,255,.4)}
.sx-scenes .prow .sw{position:relative;width:36px;height:20px;border-radius:10px;background:linear-gradient(90deg,#5b8cff,#7c5cff);flex:none}
.sx-scenes .prow .sw i{position:absolute;right:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sx-scenes .srow{position:absolute;height:24px;display:flex;align-items:center;gap:10px;font-size:13px;color:#eef0ff}
.sx-scenes .srow .lb{width:64px;flex:none}
.sx-scenes .slider{position:relative;height:24px;flex:none;cursor:pointer;touch-action:none}
.sx-scenes .slider .tr,.sx-scenes .slider .fl{position:absolute;left:0;right:0;top:10px;height:4px;border-radius:2px}
.sx-scenes .slider .tr{background:rgba(255,255,255,.26)}
.sx-scenes .slider .fl{background:linear-gradient(90deg,#4f7dff,#6f9bff);transform-origin:0 50%}
.sx-scenes .slider .kn{position:absolute;left:-9px;top:3px;width:18px;height:18px;border-radius:50%;background:#5b8cff;
border:2.5px solid #dfe8ff;box-shadow:0 2px 6px rgba(0,0,30,.45)}
.sx-scenes .slider .kn::after{content:"";position:absolute;inset:-7px;border-radius:50%;background:rgba(124,160,255,.35);
transform:scale(.4);opacity:0;transition:transform .25s ease,opacity .25s ease}
.sx-scenes .slider .kn.grab::after{transform:scale(1);opacity:1}
.sx-scenes .srow .val{flex:1;text-align:right;font-size:12.5px;font-variant-numeric:tabular-nums;color:#dfe3ff}
.sx-scenes .gen,.sx-scenes .chip.ai{cursor:pointer;overflow:hidden}
.sx-scenes .ic svg{display:block;width:100%;height:100%;fill:currentColor}
.sx-scenes .dot{position:absolute;width:8px;height:8px;border-radius:50%;background:#f3a51f;box-shadow:0 0 8px rgba(243,165,31,.8)}
.sx-scenes .shine{position:absolute;top:-20%;bottom:-20%;left:0;width:60%;pointer-events:none;transform:translateX(-140%) skewX(-18deg);
background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.2) 50%,rgba(255,255,255,0))}
.sx-scenes.run .shine{animation:sxs-shine 4.2s ease-in-out 1s infinite}
@keyframes sxs-shine{0%{transform:translateX(-140%) skewX(-18deg)}38%,100%{transform:translateX(260%) skewX(-18deg)}}
.sx-scenes.run .gen .ic,.sx-scenes.run .chip.ai .ic{animation:sxs-twinkle 2.8s ease-in-out infinite}
@keyframes sxs-twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.18) rotate(12deg)}}
.sx-scenes .card,.sx-scenes .chip{position:absolute;overflow:hidden;cursor:pointer;background:#13142b;
border:1px solid rgba(255,255,255,.16);transition:background-color .35s,border-color .35s,box-shadow .35s}
.sx-scenes .card .nm,.sx-scenes .chip .nm{position:absolute;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
color:#eef0ff;font-weight:500;letter-spacing:-.005em}
.sx-scenes .pv{position:absolute;left:4px;bottom:4px;display:block}
.sx-scenes .card:hover,.sx-scenes .chip:hover{border-color:rgba(255,255,255,.42)}
.sx-scenes .card.on,.sx-scenes .chip.on{background:linear-gradient(180deg,#7593ff,#577af5);border-color:#b4c8ff;
box-shadow:0 0 0 2px rgba(124,160,255,.35),0 6px 22px rgba(80,110,255,.5)}
.sx-scenes .card.on .nm,.sx-scenes .chip.on .nm{color:#fff;font-weight:650}
.sx-scenes .card.pop,.sx-scenes .chip.pop{animation:sxs-pop .6s cubic-bezier(.3,.7,.3,1)}
@keyframes sxs-pop{0%{transform:scale(1)}25%{transform:scale(.92)}62%{transform:scale(1.06)}100%{transform:scale(1)}}
.sx-scenes [role="button"]:focus-visible{outline:2px solid #a9c4ff;outline-offset:2px}
.sx-scenes .drawer{position:absolute;left:590px;top:10px;width:360px;height:536px;z-index:8;border-radius:16px;
background:linear-gradient(180deg,rgba(54,50,116,.96) 0%,rgba(42,38,98,.97) 100%);border:1px solid rgba(255,255,255,.17);
box-shadow:0 26px 70px rgba(2,6,30,.6),inset 0 1px 0 rgba(255,255,255,.12);
opacity:0;transform:translateX(44px);transition:transform .9s cubic-bezier(.2,.85,.2,1),opacity .5s ease}
.sx-scenes .drawer.in{opacity:1;transform:translateZ(0)}
.sx-scenes .drawer .dt{position:absolute;left:16px;top:14px;font-size:14px;font-weight:700;letter-spacing:.005em}
.sx-scenes .drawer .x{position:absolute;right:12px;top:10px;width:26px;height:26px;border-radius:50%;background:#14152b;
display:grid;place-items:center;font-size:18px;line-height:1;color:#e8e8ff}
.sx-scenes .tabs{position:absolute;left:10px;right:10px;top:44px;height:36px;display:flex;gap:6px}
.sx-scenes .tabs span{flex:1;display:grid;place-items:center;border-radius:9px;background:#15162e;font-size:14px;color:#e6e8f8}
.sx-scenes .tabs span.on{background:linear-gradient(180deg,#9072ff,#7554f2);color:#fff;font-weight:600;box-shadow:0 4px 16px rgba(124,92,255,.5)}
.sx-scenes .panel{position:absolute;left:10px;top:88px;width:340px;height:398px;border-radius:12px;background:var(--panel);
overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.sx-scenes .panel .prow{left:12px;right:12px;top:8px;height:30px}
.sx-scenes .panel .srow{left:12px;right:12px;top:42px}
.sx-scenes .gen{position:absolute;left:10px;right:10px;top:74px;height:32px;border-radius:10px;background:var(--well);
border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:500;
transition:transform .15s ease,background-color .2s}
.sx-scenes .gen:hover{background:#1f2042}
.sx-scenes .gen.pressed{transform:scale(.97);background:#2a2b58}
.sx-scenes .gen .ic{width:15px;height:15px;color:#c8b6ff}
.sx-scenes .gen .dot{right:13px;top:11px}
.sx-scenes .list{position:absolute;left:0;right:0;top:116px;height:282px;overflow:hidden}
.sx-scenes .scroll,.sx-scenes .rest{position:absolute;left:0;right:0;top:0;height:1px}
.sx-scenes .scroll{will-change:transform}
.sx-scenes .cat{position:absolute;left:12px;font-size:13px;font-weight:700;line-height:20px;color:#fff;letter-spacing:.005em}
.sx-scenes .card{width:103px;height:68px;border-radius:9px}
.sx-scenes .card .nm{left:7px;right:4px;top:4px;font-size:11px;line-height:16px;letter-spacing:-.01em}
.sx-scenes .card .pv{border-radius:5px}
.sx-scenes .yours{position:absolute;left:0;right:0;top:0;height:106px;opacity:0;transform-origin:50% 0}
.sx-scenes .trash{position:absolute;right:8px;top:26px;width:17px;height:17px;border-radius:50%;background:#fff;display:grid;place-items:center;
box-shadow:0 1px 3px rgba(0,0,0,.35);z-index:1}
.sx-scenes .trash svg{width:11px;height:11px;fill:none;stroke:#e05a5a;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sx-scenes .sbar{position:absolute;right:2px;top:0;width:3px;border-radius:2px;background:rgba(255,255,255,.22);transition:background-color .3s}
.sx-scenes .sbar.lit{background:rgba(255,255,255,.6)}
.sx-scenes .reset{position:absolute;left:10px;right:10px;top:494px;height:34px;border-radius:10px;background:#15162e;
display:grid;place-items:center;font-size:14px;color:#e8eaff}
.sx-scenes .sheet{position:absolute;left:0;right:0;top:384px;bottom:0;z-index:8;border-radius:22px 22px 0 0;
background:linear-gradient(180deg,rgba(52,48,114,.97) 0%,rgba(38,34,90,.98) 100%);border-top:1px solid rgba(255,255,255,.2);
box-shadow:0 -14px 40px rgba(2,6,30,.5);opacity:0;transform:translateY(70px);
transition:transform .9s cubic-bezier(.2,.85,.2,1),opacity .5s ease}
.sx-scenes .sheet.in{opacity:1;transform:translateZ(0)}
.sx-scenes .sheet .handle{position:absolute;left:50%;top:7px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:rgba(255,255,255,.35)}
.sx-scenes .sheet .prow{left:16px;right:16px;top:13px;height:26px;font-size:13.5px}
.sx-scenes .sheet .prow .prem{font-size:12px;height:19px}
.sx-scenes .sheet .srow{left:16px;right:16px;top:42px;font-size:13.5px}
.sx-scenes .sheet .srow .val{font-size:13px}
.sx-scenes .strip{position:absolute;left:0;right:0;top:76px;height:84px}
.sx-scenes .track,.sx-scenes .crest{position:absolute;left:0;top:0;height:84px}
.sx-scenes .track{will-change:transform}
.sx-scenes .chip{top:0;width:112px;height:84px;border-radius:12px}
.sx-scenes .chip .nm{left:9px;right:6px;top:5px;font-size:12px;line-height:17px}
.sx-scenes .chip .pv{border-radius:8px}
.sx-scenes .chip.ai{background:linear-gradient(150deg,#8a66ff 0%,#5a6cff 100%);border-color:rgba(255,255,255,.3);
box-shadow:0 6px 18px rgba(110,90,255,.45);transition:transform .15s ease}
.sx-scenes .chip.ai.pressed{transform:scale(.95)}
.sx-scenes .chip.ai .ic{position:absolute;left:50%;top:14px;width:24px;height:24px;margin-left:-12px;color:#fff}
.sx-scenes .chip.ai .t{position:absolute;left:8px;right:8px;top:44px;text-align:center;font-size:12px;font-weight:650;line-height:1.2;white-space:normal}
.sx-scenes .chip.ai .dot{right:9px;top:9px}
.sx-scenes .chip .ytag{position:absolute;right:9px;bottom:9px;padding:1px 6px;border-radius:6px;font-size:12px;font-weight:600;
background:rgba(8,10,34,.72);color:#fff}
.sx-scenes .veil{position:absolute;inset:0;z-index:12;background:rgba(4,8,28,.5);opacity:0;pointer-events:none;transition:opacity .35s ease}
.sx-scenes .veil.open{opacity:1}
.sx-scenes .dlg{position:absolute;z-index:13;left:280px;top:140px;width:400px;height:216px;border-radius:18px;pointer-events:none;
background:linear-gradient(180deg,#312c70 0%,#262159 100%);border:1px solid rgba(255,255,255,.17);
box-shadow:0 30px 80px rgba(0,0,20,.6),0 0 70px rgba(124,92,255,.28);
opacity:0;transform:translateY(16px) scale(.94);transition:opacity .3s ease,transform .5s cubic-bezier(.34,1.4,.64,1)}
.sx-scenes .dlg.open{opacity:1;transform:none}
.sx-scenes.m-compact .dlg{left:24px;top:150px;width:372px}
.sx-scenes .dlg .pt{position:absolute;left:18px;top:16px;display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700}
.sx-scenes .dlg .pt .ic{width:28px;height:28px;padding:6px;border-radius:9px;color:#fff;background:linear-gradient(135deg,#8a66ff,#4f8dff);
box-shadow:0 3px 12px rgba(124,92,255,.5)}
.sx-scenes .dlg .st{position:absolute;left:18px;right:18px;top:52px;font-size:12.5px;color:#bfc3ee}
.sx-scenes .dlg .inp{position:absolute;left:18px;right:18px;top:74px;height:42px;padding:0 12px;border-radius:10px;
background:#1a1842;border:2px solid rgba(255,255,255,.14);font-size:14px;line-height:38px;color:#fff;white-space:pre;overflow:hidden;
transition:border-color .25s,box-shadow .25s}
.sx-scenes .dlg .inp:empty::before{content:attr(data-hint);color:rgba(220,222,255,.42)}
.sx-scenes .dlg .inp.typing{border-color:#7f8fff;box-shadow:0 0 0 3px rgba(127,143,255,.22)}
.sx-scenes .dlg .ck{position:absolute;left:18px;top:126px;display:flex;align-items:center;gap:8px;font-size:13px;color:#e6e8ff}
.sx-scenes .dlg .ck i{position:relative;width:17px;height:17px;border-radius:5px;background:#7c5cff}
.sx-scenes .dlg .ck i::after{content:"";position:absolute;left:5.5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.sx-scenes .dlg .btns{position:absolute;left:18px;right:18px;top:160px;height:38px;display:flex;gap:12px}
.sx-scenes .dlg .btns span{flex:1;position:relative;display:grid;place-items:center;border-radius:10px;font-size:14px;font-weight:600}
.sx-scenes .dlg .cancel{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#e6e8ff}
.sx-scenes .dlg .go{background:linear-gradient(95deg,#4f8dff,#7c5cff);box-shadow:0 6px 18px rgba(90,110,255,.45)}
.sx-scenes .dlg .go .spin{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;opacity:0}
.sx-scenes .dlg .go.busy b{opacity:0}
.sx-scenes .dlg .go.busy .spin{opacity:1;animation:sxs-spin .8s linear infinite}
@keyframes sxs-spin{to{transform:rotate(360deg)}}
.sx-scenes .mm-cursor{opacity:0}
.sx-scenes .mm-cursor.on{opacity:1}
.sx-scenes .tap{position:absolute;left:0;top:0;z-index:20;pointer-events:none;opacity:0;transition:opacity .3s;will-change:transform}
.sx-scenes .tap.on{opacity:1}
.sx-scenes .tap i{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.36);
border:2px solid rgba(255,255,255,.9);box-shadow:0 4px 14px rgba(0,0,20,.4);transition:transform .2s ease,background-color .2s}
.sx-scenes .tap.hold i{transform:scale(.82);background:rgba(255,255,255,.55)}
.sx-scenes .tap.down i{animation:sxs-tap .35s ease}
@keyframes sxs-tap{50%{transform:scale(.74)}}
.sx-scenes .trip{position:absolute;z-index:19;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:2px solid #fff;
pointer-events:none;animation:sxs-ripple .6s ease-out forwards}
@keyframes sxs-ripple{from{transform:scale(.25);opacity:1}to{transform:scale(1.4);opacity:0}}
/* ---- sections/sync.css */
.sx-sync{font-family:var(--font);-webkit-user-select:none;user-select:none}
.sx-sync:not(.on) *{animation-play-state:paused!important}
.sx-sync .amb{position:absolute;left:-6%;right:-6%;top:12%;bottom:-4%;pointer-events:none;
background:radial-gradient(50% 48% at 50% 52%,rgba(96,160,255,.30) 0%,rgba(96,160,255,.12) 45%,rgba(96,160,255,0) 72%)}
.sx-sync .floor{position:absolute;left:4%;right:4%;bottom:14px;height:70px;pointer-events:none;
background:radial-gradient(50% 50% at 50% 50%,rgba(2,8,40,.55) 0%,rgba(2,8,40,0) 70%)}
.sx-sync.is-compact .floor{left:16%;right:16%;bottom:-8px}
.sx-sync .dev{position:absolute;z-index:1}
.sx-sync .dev-tablet{z-index:2}
.sx-sync .dev-phone{z-index:5}
.sx-sync.on .dev{animation:sx-sync-float 7s ease-in-out infinite alternate}
.sx-sync.on .dev-tablet{animation-duration:8.2s;animation-delay:-3s}
.sx-sync.on .dev-phone{animation-duration:6.4s;animation-delay:-1.4s}
@keyframes sx-sync-float{from{transform:translateY(-3px)}to{transform:translateY(3px)}}
.sx-sync .frame{position:absolute;inset:0;background:linear-gradient(160deg,#1a2033 0%,#0b0f1e 40%,#080b16 100%);
box-shadow:0 0 0 1.5px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.12),0 28px 60px rgba(0,6,40,.6),0 8px 18px rgba(0,6,40,.35)}
.sx-sync .dev-phone .frame::after{content:"";position:absolute;top:10px;left:50%;width:30%;height:9px;margin-left:-15%;border-radius:6px;background:#04060d;z-index:6}
.sx-sync .dev-laptop .frame{border-bottom-left-radius:4px!important;border-bottom-right-radius:4px!important}
.sx-sync .base{position:absolute;left:-7%;right:-7%;bottom:-14px;height:14px;border-radius:2px 2px 14px 14px/2px 2px 10px 10px;
background:linear-gradient(180deg,#4a5274 0%,#2a3150 35%,#161b31 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 16px 30px rgba(0,6,40,.55)}
.sx-sync .base::after{content:"";position:absolute;left:50%;top:0;width:16%;height:5px;margin-left:-8%;border-radius:0 0 6px 6px;background:#1a2038}
.sx-sync.is-compact .base{bottom:-8px;height:8px}
.sx-sync.is-compact .base::after{height:3px}
.sx-sync .scr{position:absolute;overflow:hidden;background:linear-gradient(180deg,#d9eafc 0%,#eaf3fe 50%,#f6f9ff 100%);cursor:pointer;
-webkit-tap-highlight-color:transparent}
.sx-sync.still .scr{cursor:default}
.sx-sync .sbar{position:absolute;left:0;right:0;top:0;background:#232838}
.sx-sync .bar{position:absolute;left:0;right:0;background-color:#232838;background-repeat:no-repeat;color:#e9ecf5;font-weight:500;
display:flex;align-items:center;justify-content:center;white-space:nowrap;z-index:3;box-shadow:0 1px 0 rgba(0,0,0,.18)}
.sx-sync .view{position:absolute;left:0;overflow:hidden;transition:opacity .38s ease}
.sx-sync .map{position:absolute;left:0;top:0;transform-origin:0 0}
.sx-sync .br{position:absolute;left:0;top:0;overflow:visible}
.sx-sync .glare{position:absolute;inset:0;pointer-events:none;z-index:9;
background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 26%,rgba(255,255,255,0) 40%)}
.sx-sync .nd{position:absolute;top:0;display:flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:9px;
border:1.5px solid;font:600 14px/1 var(--font);color:#1f2737;white-space:nowrap;
box-shadow:0 1px 2px rgba(20,40,90,.12);transition:box-shadow .45s ease}
.sx-sync .nd.left{transform-origin:100% 50%}
.sx-sync .nd.root{width:140px;height:44px;justify-content:center;padding:0;font-size:18px;font-weight:700;color:#fff;letter-spacing:-.01em;
background:linear-gradient(180deg,#6283ff,#4461ee);border-color:#3550d8;border-radius:12px;transform:translate(-50%,-50%);
box-shadow:0 6px 16px rgba(50,80,210,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.sx-sync .nd.empty{min-width:46px}
.sx-sync .nd.sel{box-shadow:0 0 0 2px #fff,0 0 0 4px #3b7cf6,0 4px 12px rgba(40,90,220,.3)}
.sx-sync .nd.flash{box-shadow:0 0 0 3px rgba(91,140,255,.55),0 0 24px 6px rgba(91,140,255,.55)}
.sx-sync .nd .mm-caret{margin-left:1px;color:#2b5fe0;width:2px}
.sx-sync .cb{flex:none;position:relative;width:15px;height:15px;border-radius:4px;border:1.8px solid #3fae78;background:#fff;
transition:background .2s,border-color .2s}
.sx-sync .cb::after{content:"";position:absolute;left:3.5px;top:.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;
transform:rotate(45deg) scale(0);transition:transform .32s cubic-bezier(.3,1.7,.5,1)}
.sx-sync .cb.on{background:#33c98a;border-color:#27a873}
.sx-sync .cb.on::after{transform:rotate(45deg) scale(1)}
.sx-sync .plus{position:absolute;width:24px;height:24px;border-radius:50%;background:#3b6cf6;
box-shadow:0 4px 10px rgba(40,80,220,.45),0 0 0 2px #fff;scale:0;transition:scale .32s cubic-bezier(.3,1.6,.5,1)}
.sx-sync .plus.show{scale:1}
.sx-sync .plus::before,.sx-sync .plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2.4px;margin:-1.2px 0 0 -6px;border-radius:2px;background:#fff}
.sx-sync .plus::after{transform:rotate(90deg)}
.sx-sync .touch{position:absolute;left:0;top:0;width:0;height:0;z-index:12;pointer-events:none;opacity:0;transition:opacity .25s;will-change:transform}
.sx-sync .touch .dot{position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50%;
background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.8),rgba(215,228,255,.5));border:2px solid rgba(255,255,255,.95);
box-shadow:0 4px 14px rgba(10,25,80,.35)}
.sx-sync.is-compact .touch .dot{left:-15px;top:-15px;width:30px;height:30px}
.sx-sync .tap{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid #3b7cf6;pointer-events:none;z-index:11}
.sx-sync .kb{position:absolute;left:0;right:0;bottom:0;z-index:10;display:flex;flex-direction:column;justify-content:space-between;padding:5px 3px 7px;
background:#d3d8e1;box-shadow:0 -1px 0 rgba(0,0,0,.08);transform:translateY(102%);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.sx-sync .kb.show{transform:none}
.sx-sync .krow{display:flex;gap:3px;height:21%}
.sx-sync .k{flex:1;border-radius:3px;background:#fff;box-shadow:0 1px 0 #9298a6;transition:background .08s}
.sx-sync .k.fn{background:#aeb5c3}
.sx-sync .k.ret{background:#3b7cf6}
.sx-sync .k.hit{background:#9fb4d8}
.sx-sync .k.ret.hit{background:#2558c9}
.sx-sync .lp-cursor{opacity:0}
.sx-sync.is-compact .lp-cursor .arrow{width:13px;height:16px}
.sx-sync .ring{position:absolute;left:0;top:0;border-radius:50%;border:2.5px solid #4f8dff;opacity:0;pointer-events:none;z-index:8;
box-shadow:0 0 14px rgba(79,141,255,.75),inset 0 0 10px rgba(79,141,255,.4)}
.sx-sync .badge{position:absolute;left:50%;top:0;z-index:7;transform:translate(-50%,-50%);width:100px;height:26px;border-radius:999px;
display:flex;align-items:center;justify-content:center;gap:6px;font:600 12px/1 var(--font);color:#e9f5ff;white-space:nowrap;
background:rgba(7,18,60,.9);border:1px solid rgba(124,192,255,.32);box-shadow:0 8px 18px rgba(0,6,40,.45);
transition:border-color .3s,box-shadow .3s,color .3s}
.sx-sync .badge .ic{position:relative;width:14px;height:14px;border-radius:50%;background:#33c98a;flex:none;box-sizing:border-box}
.sx-sync .badge .ic::after{content:"";position:absolute;left:4.6px;top:2.4px;width:3.4px;height:6.6px;border:solid #fff;border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}
.sx-sync .badge.busy{color:#bfe1ff;border-color:rgba(124,192,255,.85);box-shadow:0 8px 18px rgba(0,6,40,.45),0 0 18px rgba(124,192,255,.55)}
.sx-sync .badge.busy .ic{background:none;border:2px solid rgba(124,192,255,.28);border-top-color:#9fd2ff;animation:sx-sync-spin .7s linear infinite}
.sx-sync .badge.busy .ic::after{display:none}
@keyframes sx-sync-spin{to{transform:rotate(360deg)}}
.sx-sync .cloud{position:absolute;z-index:6;pointer-events:none}
.sx-sync.on .cloud{animation:sx-sync-bob 5.5s ease-in-out infinite alternate}
@keyframes sx-sync-bob{from{transform:translateY(-3px)}to{transform:translateY(4px)}}
.sx-sync .cbody{position:absolute;inset:0}
.sx-sync .cs{display:block;overflow:visible;filter:drop-shadow(0 10px 18px rgba(0,10,60,.45)) drop-shadow(0 0 14px rgba(124,192,255,.5))}
.sx-sync .cicon{position:absolute;transform:translate(-50%,-50%);border-radius:22%;box-shadow:0 3px 8px rgba(20,50,140,.35)}
.sx-sync .cglow{position:absolute;left:50%;top:50%;width:190%;height:240%;transform:translate(-50%,-50%);opacity:.55;pointer-events:none;
background:radial-gradient(closest-side,rgba(124,192,255,.55),rgba(124,192,255,.15) 55%,rgba(124,192,255,0))}
.sx-sync .cburst{position:absolute;left:50%;top:55%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;opacity:0;
border:2px solid rgba(170,215,255,.9);box-shadow:0 0 20px rgba(124,192,255,.6)}
.sx-sync .clabel{position:absolute;left:50%;top:100%;margin-top:3px;transform:translateX(-50%);white-space:nowrap;
font:700 12px/1.2 var(--font);letter-spacing:.02em;color:#e3efff;text-shadow:0 2px 10px rgba(0,10,50,.8)}
.sx-sync .links{position:absolute;left:0;top:0;z-index:3;overflow:visible;pointer-events:none}
.sx-sync .lk{fill:none;stroke:rgba(160,205,255,.4);stroke-width:1.5;stroke-dasharray:2 6;stroke-linecap:round}
.sx-sync.on .lk{animation:sx-sync-flow 1.6s linear infinite}
@keyframes sx-sync-flow{to{stroke-dashoffset:-16}}
.sx-sync .bm{fill:none;stroke:#eaf6ff;stroke-width:3;stroke-linecap:round}
.sx-sync .bm-glow{fill:none;stroke:rgba(124,192,255,.55);stroke-width:9;stroke-linecap:round}
.sx-sync .heads{position:absolute;left:0;top:0;z-index:4;pointer-events:none}
.sx-sync .head{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;opacity:0;will-change:transform;
background:radial-gradient(circle,#fff 0%,#dff0ff 45%,rgba(124,192,255,.0) 72%);
box-shadow:0 0 14px 5px rgba(124,192,255,.85),0 0 30px 10px rgba(91,140,255,.45)}
/* ---- sections/present.css */
.sx-present{font-family:var(--font);color:#fff;-webkit-user-select:none;user-select:none}
.sx-present .spill{position:absolute;left:-5%;right:-5%;top:-7%;bottom:-11%;z-index:-1;pointer-events:none;border-radius:50%;
background:radial-gradient(closest-side,rgba(255,138,84,.2),rgba(255,138,84,.07) 60%,rgba(255,138,84,0))}
.sx-present .scr{position:absolute;inset:0;overflow:hidden;border-radius:22px;background:#15111a;isolation:isolate;
box-shadow:0 44px 110px rgba(12,4,24,.7),0 0 0 1px rgba(0,0,0,.35),0 0 90px rgba(255,128,72,.14);
opacity:0;transform:scale(.97);transition:opacity .8s ease,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.sx-present.cmp .scr{border-radius:30px}
.sx-present .scr.on{opacity:1;transform:none}
.sx-present .ember{position:absolute;left:-10%;top:-12%;width:120%;height:124%;z-index:0;pointer-events:none;
background:radial-gradient(50% 50% at 50% 50%,rgba(156,62,36,.62) 0%,rgba(122,44,32,.36) 36%,rgba(66,26,34,.14) 66%,rgba(21,17,26,0) 100%);
animation:sx-present-ember 7s ease-in-out infinite alternate}
@keyframes sx-present-ember{from{opacity:.82;transform:scale(.95)}to{opacity:1;transform:scale(1.05)}}
.sx-present .cv{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;cursor:pointer;display:block}
.sx-present .glass{position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 60px rgba(0,0,0,.35);
background:linear-gradient(118deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 30%),
radial-gradient(120% 100% at 50% 50%,rgba(0,0,0,0) 58%,rgba(6,2,10,.42) 100%)}
.sx-present .ob{position:absolute;z-index:8;display:grid;place-items:center;width:40px;height:40px;padding:0;margin:0;border-radius:50%;
border:1.5px solid rgba(255,255,255,.62);background:rgba(30,24,38,.5);color:#fff;cursor:pointer;
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(0,0,0,.35);
opacity:0;transform:scale(.7);transition:opacity .5s ease,transform .6s cubic-bezier(.3,1.5,.5,1),background .2s,border-color .2s,box-shadow .2s}
.sx-present .ob svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.sx-present .bx{top:16px;right:16px;width:36px;height:36px}
.sx-present .bx svg{width:15px;height:15px}
.sx-present .bp{left:16px;bottom:16px}
.sx-present .bn{right:16px;bottom:16px}
.sx-present .chrome .ob{opacity:1;transform:none}
.sx-present .chrome .bp{transition-delay:.08s}
.sx-present .chrome .bn{transition-delay:.16s}
.sx-present .ob:hover,.sx-present .ob.hov{background:rgba(255,255,255,.17);border-color:#fff;box-shadow:0 6px 22px rgba(0,0,0,.4),0 0 18px rgba(255,190,140,.3)}
.sx-present .ob:focus-visible{outline:2px solid #ffd2a8;outline-offset:3px}
.sx-present .ob::after{content:"";position:absolute;inset:-2px;border-radius:50%;pointer-events:none;opacity:0}
.sx-present .ob.press{animation:sx-present-press .5s cubic-bezier(.3,1.4,.5,1)}
.sx-present .ob.press::after{animation:sx-present-ring .75s ease-out}
@keyframes sx-present-press{0%{transform:scale(1)}28%{transform:scale(.8)}100%{transform:scale(1)}}
@keyframes sx-present-ring{0%{opacity:1;box-shadow:0 0 0 0 rgba(255,200,150,.8)}100%{opacity:0;box-shadow:0 0 0 18px rgba(255,200,150,0)}}
.sx-present .ind{position:absolute;z-index:8;left:50%;bottom:21px;height:30px;display:flex;align-items:center;gap:12px;padding:0 14px;
border-radius:999px;background:rgba(28,22,36,.56);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
box-shadow:0 8px 24px rgba(0,0,0,.35);opacity:0;transform:translate(-50%,12px);transition:opacity .6s ease .12s,transform .7s cubic-bezier(.2,.9,.3,1.2) .12s}
.sx-present .chrome .ind{opacity:1;transform:translate(-50%,0)}
.sx-present .ind .dots{position:relative;display:flex;gap:8px}
.sx-present .ind .dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.26);transition:background .5s}
.sx-present .ind .dots i.done{background:rgba(255,214,176,.6)}
.sx-present .ind .act{position:absolute;left:-5px;top:0;width:16px;height:6px;border-radius:3px;
background:linear-gradient(90deg,#ffa970,#ffe1b4);box-shadow:0 0 10px rgba(255,170,110,.85);
transition:transform .6s cubic-bezier(.3,1.35,.5,1),opacity .3s}
.sx-present .ind .cnt{display:inline-block;min-width:34px;text-align:right;font-size:12.5px;font-weight:650;letter-spacing:.02em;
font-variant-numeric:tabular-nums;color:rgba(255,255,255,.9)}
.sx-present .ind .cnt.flip{animation:sx-present-flip .45s cubic-bezier(.2,.8,.3,1)}
@keyframes sx-present-flip{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.sx-present .drw{position:absolute;z-index:9;right:16px;top:66px;bottom:72px;width:300px;padding:18px 18px 16px;overflow:hidden;
border-radius:18px;background:rgba(34,27,42,.74);border:1px solid rgba(255,255,255,.16);
-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
box-shadow:-18px 26px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1);
opacity:0;transform:translateX(calc(100% + 34px));transition:transform .7s cubic-bezier(.2,.85,.25,1),opacity .4s ease;pointer-events:none}
.sx-present .drw.open{opacity:1;transform:none;pointer-events:auto}
.sx-present .drw .grip{display:none}
.sx-present .dhd{display:flex;align-items:center;gap:12px;padding:0 36px 14px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.sx-present .ddot{flex:none;width:14px;height:14px;border-radius:50%;box-shadow:0 0 14px currentColor}
.sx-present .dtt small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.56)}
.sx-present .dtt b{display:block;margin-top:1px;font-size:21px;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.sx-present .dtx{margin:14px 0 0;font-size:15px;line-height:1.58;color:rgba(244,238,250,.92)}
.sx-present .drw.open .dhd,.sx-present .drw.open .dtx{animation:sx-present-in .6s cubic-bezier(.2,.8,.3,1) both}
.sx-present .drw.open .dhd{animation-delay:.12s}
.sx-present .drw.open .dtx{animation-delay:.22s}
@keyframes sx-present-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sx-present .dx{position:absolute;top:14px;right:14px;width:30px;height:30px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;
background:rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:background .2s}
.sx-present .dx:hover{background:rgba(255,255,255,.2)}
.sx-present .dx svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.sx-present.cmp .drw{left:10px;right:10px;top:auto;bottom:66px;width:auto;height:204px;padding:24px 18px 16px;border-radius:22px;
transform:translateY(calc(100% + 90px));box-shadow:0 -14px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1)}
.sx-present.cmp .drw.open{transform:none}
.sx-present.cmp .drw .grip{display:block;position:absolute;left:50%;top:8px;width:38px;height:4px;margin-left:-19px;border-radius:2px;background:rgba(255,255,255,.3)}
.sx-present.cmp .dx{top:16px;right:14px}
.sx-present.cmp .dtx{font-size:14.5px;line-height:1.5}
.sx-present .tap{position:absolute;left:0;top:0;z-index:12;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;pointer-events:none;opacity:0;
background:radial-gradient(circle,rgba(255,255,255,.5) 0,rgba(255,255,255,.22) 58%,rgba(255,255,255,0) 72%);border:2px solid rgba(255,255,255,.8)}
.sx-present .tap.on{animation:sx-present-tap .65s ease-out}
@keyframes sx-present-tap{0%{opacity:0;transform:scale(1.5)}22%{opacity:1;transform:scale(.82)}100%{opacity:0;transform:scale(1.55)}}
.sx-present.idle .ember{animation-play-state:paused}
.sx-present.still .ember{animation:none}
.sx-present.still .scr,.sx-present.still .ob,.sx-present.still .ind,.sx-present.still .drw,.sx-present.still .act{transition:none}
.sx-present.still .cnt,.sx-present.still .drw .dhd,.sx-present.still .drw .dtx,.sx-present.still .ob{animation:none}
@media (prefers-reduced-motion:reduce){
.sx-present .ember,.sx-present .tap,.sx-present .ob,.sx-present .cnt,.sx-present .drw .dhd,.sx-present .drw .dtx{animation:none!important}
}
/* ---- sections/collab.css */
.sx-collab{font-family:var(--font);color:#1f2a3d;-webkit-user-select:none;user-select:none;
background:radial-gradient(70% 55% at 18% 8%,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 70%),
linear-gradient(180deg,#c6dff9 0%,#d9eafc 34%,#e8f2fd 58%,#e4effb 100%)}
.sx-collab .bg,.sx-collab .world,.sx-collab .top{position:absolute;inset:0}
.sx-collab .bg{pointer-events:none;overflow:hidden}
.sx-collab .bg svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.sx-collab .top{pointer-events:none;z-index:25}
.sx-collab .cloud{position:absolute;display:block;border-radius:50%;
background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,.55) 45%,rgba(255,255,255,0));
animation:sxc-drift 38s ease-in-out infinite alternate}
.sx-collab .cloud.c1{left:6%;top:40px;width:240px;height:58px}
.sx-collab .cloud.c2{left:58%;top:16px;width:300px;height:64px;animation-duration:46s;animation-delay:-12s;opacity:.85}
.sx-collab .cloud.c3{left:30%;top:300px;width:220px;height:46px;animation-duration:52s;animation-delay:-30s;opacity:.6}
.sx-collab.cm .cloud.c1{left:-40px;top:120px;width:200px;height:50px}
.sx-collab.cm .cloud.c2{left:200px;top:330px;width:240px;height:54px;opacity:.7}
@keyframes sxc-drift{from{transform:translateX(-30px)}to{transform:translateX(40px)}}
.sx-collab .shim{position:absolute;display:block;height:2px;border-radius:2px;
background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95),rgba(255,255,255,0));
animation:sxc-shim 6s ease-in-out infinite}
@keyframes sxc-shim{0%,100%{opacity:.15;transform:translateX(-14px) scaleX(.7)}50%{opacity:.85;transform:translateX(14px) scaleX(1)}}
.sx-collab .edges{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.sx-collab .edges .e{fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .7s ease}
.sx-collab .edges .e1{stroke-width:3.2}
.sx-collab .edges .e2{stroke-width:2}
.sx-collab.cm .edges .e1{stroke-width:2.6}
.sx-collab .n{position:absolute;left:0;top:0;cursor:pointer;will-change:transform}
.sx-collab .bx{--r:12px;position:relative;display:flex;align-items:center;justify-content:center;gap:7px;box-sizing:border-box;
border:1.5px solid #c9d2e2;border-radius:var(--r);white-space:nowrap;background-color:#fff;
box-shadow:0 1px 2px rgba(25,50,110,.10),0 6px 16px rgba(25,50,110,.10);
transition:background-color .7s ease,border-color .7s ease,box-shadow .3s ease,transform .45s cubic-bezier(.3,1.5,.5,1)}
.sx-collab .n:hover .bx{box-shadow:0 1px 2px rgba(25,50,110,.12),0 10px 24px rgba(25,50,110,.18)}
.sx-collab .tx{display:inline-block;line-height:1}
.sx-collab .em{display:inline-block}
.sx-collab .root .bx{--r:16px;color:#fff;font-size:var(--fr);font-weight:700;letter-spacing:-.01em;border-color:#3357c8;
background:linear-gradient(180deg,#6590f8 0%,#3f66de 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 4px rgba(30,60,160,.18),0 12px 28px rgba(43,79,190,.32)}
.sx-collab .branch .bx{--r:12px;font-size:var(--fb);font-weight:650;color:#1d2738}
.sx-collab .leaf .bx{--r:9px;font-size:var(--fl);font-weight:500;color:#2b3546;border-width:1.3px;justify-content:flex-start;padding:0 12px}
.sx-collab.cm .leaf .bx{padding:0 11px;gap:6px}
.sx-collab .leaf .bx .dots{margin:0 auto}
.sx-collab .cb{width:15px;height:15px;flex:none;overflow:visible}
.sx-collab.cm .cb{width:14px;height:14px}
.sx-collab .cb rect{fill:#fff;stroke:#8f9aae;stroke-width:1.5;transition:fill .25s ease,stroke .25s ease}
.sx-collab .cb path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;
transition:stroke-dashoffset .38s cubic-bezier(.4,0,.2,1) .08s}
.sx-collab .done .cb rect{fill:var(--k);stroke:var(--k)}
.sx-collab .done .cb path{stroke-dashoffset:0}
.sx-collab .done .tx{color:#6b7587;transition:color .4s ease}
.sx-collab .dots{display:inline-flex;gap:4px;align-items:center;height:8px}
.sx-collab .dots i{width:6px;height:6px;border-radius:50%;background:var(--c);animation:sxc-dot 1.05s ease-in-out infinite}
.sx-collab .dots i:nth-child(2){animation-delay:.15s}
.sx-collab .dots i:nth-child(3){animation-delay:.3s}
@keyframes sxc-dot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
.sx-collab .halo .bx::after{content:"";position:absolute;inset:-5px;border-radius:calc(var(--r) + 5px);pointer-events:none;
border:2px solid var(--c);box-shadow:0 0 16px var(--c);animation:sxc-halo 1.3s ease-in-out infinite alternate}
@keyframes sxc-halo{from{opacity:.35}to{opacity:.9}}
.sx-collab .lift .bx{transform:scale(1.07) rotate(-1.6deg);
box-shadow:0 0 0 2.5px var(--c),0 4px 8px rgba(25,50,110,.12),0 18px 36px rgba(25,50,110,.26)}
.sx-collab .lift{z-index:5}
.sx-collab .fl{position:absolute;inset:-5px;border-radius:calc(var(--r) + 5px);pointer-events:none;opacity:0;
border:2.5px solid var(--c);box-shadow:0 0 18px var(--c),inset 0 0 10px var(--c)}
.sx-collab .mm-cursor{transition:opacity .35s ease}
.sx-collab .mm-cursor .arrow{display:none}
.sx-collab .mm-cursor::before{content:"";position:absolute;left:-6px;top:0;width:0;height:0;
border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:8px solid var(--c);
filter:drop-shadow(0 -1px 1px rgba(0,0,0,.08))}
.sx-collab .mm-cursor .tag{left:0;top:7px;transform:translateX(-50%);transform-origin:50% 0;
box-shadow:0 4px 12px rgba(20,40,90,.28),0 1px 2px rgba(20,40,90,.2)}
.sx-collab.cm .mm-cursor .tag b{font-size:12px}
.sx-collab .chip{position:absolute;top:14px;right:16px;z-index:30;display:flex;align-items:center;gap:8px;padding:5px 13px 5px 6px;
border-radius:999px;background:rgba(255,255,255,.88);font-size:12.5px;font-weight:600;color:#24324a;
box-shadow:0 6px 20px rgba(25,55,120,.16),inset 0 0 0 1px rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sx-collab.cm .chip{top:12px;right:12px}
.sx-collab .avs{display:flex}
.sx-collab .avs b{width:26px;height:26px;margin-left:-8px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;
color:#fff;background:var(--c);border:2px solid #fff;box-sizing:border-box}
.sx-collab .avs b:first-child{margin-left:0}
.sx-collab .avs b.y{display:none}
.sx-collab .avs b.y.on{display:grid;animation:sxc-in .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes sxc-in{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.sx-collab .live{width:8px;height:8px;border-radius:50%;background:#22c55e;animation:sxc-live 2s ease-out infinite}
@keyframes sxc-live{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}80%,100%{box-shadow:0 0 0 7px rgba(34,197,94,0)}}
.sx-collab .zoom{position:absolute;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.sx-collab .zoom span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(80,97,128,.5);
box-shadow:0 2px 8px rgba(20,40,90,.18)}
.sx-collab .zoom svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sx-collab .hint{position:absolute;left:16px;bottom:16px;z-index:30;display:flex;align-items:center;gap:8px;padding:6px 13px 6px 9px;
border-radius:999px;background:rgba(255,255,255,.82);color:#2a3a55;font-size:12.5px;font-weight:600;pointer-events:none;
box-shadow:0 4px 14px rgba(25,55,120,.14);transition:opacity .4s ease,transform .4s ease}
.sx-collab.cm .hint{left:auto;right:12px;bottom:12px;font-size:12px}
.sx-collab .hint i{width:9px;height:9px;border-radius:50%;background:#22A050;box-shadow:0 0 0 3px rgba(34,160,80,.22)}
.sx-collab .hint.gone{opacity:0;transform:translateY(6px)}
.sx-collab.paused *,.sx-collab.paused *::before,.sx-collab.paused *::after{animation-play-state:paused!important}
.sx-collab.still *,.sx-collab.still *::before,.sx-collab.still *::after{animation:none!important;transition:none!important}
.sx-collab.still .halo .bx::after{opacity:.6}
/* ---- sections/ai.css */
.sx-ai{--ink:#2a2433;--ai:#7c5cff;font-family:var(--font);color:var(--ink);user-select:none;-webkit-user-select:none}
.sx-ai .c-rose{--f:#f8c4d3;--b:#d98ba4;--l:#d9728f}
.sx-ai .c-coral{--f:#ffc4b3;--b:#ea8f76;--l:#e67b62}
.sx-ai .c-green{--f:#d3eabd;--b:#93c177;--l:#7cb35e}
.sx-ai .c-amber{--f:#fde3a7;--b:#ddb258;--l:#d9a43f}
.sx-ai .c-lav{--f:#ddccf6;--b:#a68bd8;--l:#9a7cd3}
.sx-ai .c-sky{--f:#cadff9;--b:#82a6dd;--l:#7099d8}
.sx-ai .c-mint{--f:#c2eedc;--b:#5fbf99;--l:#4fb18b}
.sx-ai .cv{position:absolute;inset:0;
background:radial-gradient(60% 55% at 38% 48%,rgba(255,255,255,.6),rgba(255,255,255,0) 70%),
linear-gradient(170deg,#e6f4f7 0%,#d5ebf0 55%,#c8e1ea 100%)}
.sx-ai .cam{position:absolute;left:0;top:0;width:100%;height:0;will-change:transform}
.sx-ai .nds{position:absolute;left:0;top:0;width:2000px;height:0}
.sx-ai svg.ed{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible}
.sx-ai .ed path{fill:none;stroke:var(--l);stroke-width:1.8;stroke-linecap:round}
.sx-ai .ed path.r{stroke-width:2.8}
.sx-ai .ed path.gh{stroke:#8b6cff;stroke-width:1.6;stroke-dasharray:3 4;animation:sx-ai-dash 1s linear infinite}
@keyframes sx-ai-dash{to{stroke-dashoffset:-14}}
.sx-ai .nd{position:absolute;left:0;top:0;padding:4px 8px;border-radius:6px;background-color:var(--f);border:1.5px solid var(--b);
font-size:12px;font-weight:500;line-height:1.25;color:var(--ink);white-space:nowrap;
box-shadow:0 1px 2px rgba(60,40,80,.16),0 3px 10px rgba(60,40,80,.07);
transition:background-color .55s ease,border-color .55s ease,color .55s ease,box-shadow .5s ease,filter .45s ease}
.sx-ai .nd.root{padding:8px 10px;max-width:112px;white-space:normal;text-align:center;font-size:15px;font-weight:600;line-height:1.15;
color:#fff;background:linear-gradient(180deg,#2d3aaf,#1d278b);border:1.5px solid #4c5bd3;border-radius:8px;
box-shadow:0 8px 20px rgba(29,39,139,.35),inset 0 1px 0 rgba(255,255,255,.2)}
.sx-ai .nd.br{display:flex;align-items:center;gap:5px;padding:4px 8px 4px 6px;font-size:12.5px;font-weight:600}
.sx-ai .nd .e{font-size:12px;line-height:1}
.sx-ai .nd.lf{max-width:150px;white-space:normal}
.sx-ai .nd.lf.sg{max-width:none;white-space:nowrap}
.sx-ai .nd .ck{display:flex;align-items:center;gap:4px;margin-top:2px;font-size:11px;font-weight:500;color:rgba(42,36,51,.72);white-space:nowrap}
.sx-ai .nd .ck.hid{display:none}
.sx-ai .nd .ck.in{animation:sx-ai-ckin .55s ease both}
@keyframes sx-ai-ckin{from{opacity:0;transform:translateY(-5px)}}
.sx-ai .nd .cb{flex:none;width:9px;height:9px;border:1.3px solid rgba(42,36,51,.5);border-radius:2.5px;background:rgba(255,255,255,.7)}
.sx-ai .nd.nl{display:flex;align-items:flex-start;gap:5px;max-width:100px}
.sx-ai .nd.nl .cb{margin-top:2.5px}
.sx-ai .nd.on{box-shadow:0 0 0 2px #fff,0 0 0 4px #3d7bff,0 6px 16px rgba(61,123,255,.35)}
.sx-ai .nd.gh{background-color:rgba(255,255,255,.55);border:1.5px dashed rgba(124,92,255,.85);color:#4a35b6;cursor:pointer;
box-shadow:0 4px 14px rgba(124,92,255,.2)}
.sx-ai .nd.gh::before{content:"";position:absolute;inset:-4px;border-radius:10px;box-shadow:0 0 14px 2px rgba(139,92,255,.6);
opacity:.2;animation:sx-ai-glow 1.6s ease-in-out infinite alternate;animation-delay:var(--sd,0s);pointer-events:none}
@keyframes sx-ai-glow{from{opacity:.12}to{opacity:.85}}
.sx-ai .nd .sh{display:none}
.sx-ai .nd.gh .sh{display:block;position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.sx-ai .nd.gh .sh::after{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;
background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.95) 50%,rgba(255,255,255,0));
transform:translateX(-130%);animation:sx-ai-shim 2.4s ease-in-out infinite;animation-delay:var(--sd,0s)}
@keyframes sx-ai-shim{0%{transform:translateX(-130%)}55%,100%{transform:translateX(280%)}}
.sx-ai .nd.gh .t{position:relative}
.sx-ai .nd.gh:hover{border-color:#6d4cff}
.sx-ai .nd.gh.sel{background-color:#6c5cff;border:1.5px solid #5544ee;color:#fff;
box-shadow:0 0 0 3px rgba(139,92,255,.25),0 8px 20px rgba(84,68,238,.45)}
.sx-ai .nd.gh.sel::before{opacity:.9;animation:none}
.sx-ai .nd.gh.sel .sh{display:none}
.sx-ai .nd.kept{overflow:hidden}
.sx-ai .nd.gone{filter:blur(3px)}
.sx-ai .fx{position:absolute;inset:0;pointer-events:none;z-index:7}
.sx-ai .fly{position:absolute;left:0;top:0;width:20px;height:20px;margin:-10px 0 0 -10px;will-change:transform}
.sx-ai .fly svg{display:block;width:100%;height:100%;fill:#a68dff;filter:drop-shadow(0 0 6px rgba(160,120,255,.95)) drop-shadow(0 0 1.5px #fff)}
.sx-ai .bst{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.sx-ai .bst i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--k);
animation:sx-ai-pt .7s cubic-bezier(.2,.7,.3,1) forwards}
.sx-ai .bst i.rg{left:-15px;top:-15px;width:30px;height:30px;background:none;border:2px solid var(--k);animation:sx-ai-rg .6s ease-out forwards}
@keyframes sx-ai-pt{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
@keyframes sx-ai-rg{from{transform:scale(.3);opacity:.9}to{transform:scale(1.8);opacity:0}}
.sx-ai .chat{position:absolute;left:668px;top:10px;right:10px;bottom:10px;border-radius:18px;overflow:hidden;z-index:4;
background:radial-gradient(90% 34% at 12% 0%,rgba(139,92,255,.26),rgba(139,92,255,0) 70%),linear-gradient(180deg,#97a7bf 0%,#8597b2 100%);
border:1px solid rgba(255,255,255,.45);box-shadow:0 18px 50px rgba(30,40,90,.28),inset 0 1px 0 rgba(255,255,255,.5)}
.sx-ai .hd{position:absolute;left:10px;right:10px;top:10px;height:30px;display:flex;align-items:center;gap:6px}
.sx-ai .spk{width:28px;height:28px;flex:none;display:grid;place-items:center;position:relative}
.sx-ai .spk::before{content:"";position:absolute;inset:0;border-radius:50%;
background:radial-gradient(circle,rgba(150,110,255,.65),rgba(139,92,255,0) 68%);animation:sx-ai-breathe 2.4s ease-in-out infinite alternate}
.sx-ai .spk.busy::before{animation-duration:.55s}
@keyframes sx-ai-breathe{from{transform:scale(.75);opacity:.55}to{transform:scale(1.15);opacity:1}}
.sx-ai .spk svg{position:relative;width:19px;height:19px;fill:#fff;filter:drop-shadow(0 0 4px rgba(150,120,255,.95))}
.sx-ai .ttl{flex:1;min-width:0;height:28px;line-height:28px;padding:0 10px;border-radius:8px;background:#171d2e;color:#eef1fb;
font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.sx-ai .ttl.sw{color:transparent}
.sx-ai .rb{width:28px;height:28px;flex:none;border-radius:50%;background:#171d2e;display:grid;place-items:center}
.sx-ai .rb svg,.sx-ai .sq svg,.sx-ai .undo svg{width:15px;height:15px;fill:none;stroke:#e9edf8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sx-ai .cvo{position:absolute;left:10px;right:10px;top:50px;bottom:104px;overflow:hidden}
.sx-ai .lst{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;gap:10px;padding:4px 0 6px;
transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s ease}
.sx-ai .lst.out{opacity:0}
.sx-ai .rw{display:flex;gap:7px;align-items:flex-start}
.sx-ai .rw.me{justify-content:flex-end;align-items:flex-end;transform-origin:100% 100%;animation:sx-ai-pop .5s cubic-bezier(.3,1.4,.5,1) both}
.sx-ai .rw.ai{transform-origin:0 0;animation:sx-ai-pop .5s cubic-bezier(.3,1.4,.5,1) both}
@keyframes sx-ai-pop{from{opacity:0;transform:scale(.7) translateY(8px)}}
.sx-ai .bb{max-width:196px;padding:8px 11px;border-radius:13px;font-size:12.5px;line-height:1.4;font-weight:500;transition:width .25s ease}
.sx-ai .me .bb{background:linear-gradient(135deg,#5b8cff,#6f7bff);color:#fff;border-bottom-right-radius:5px;box-shadow:0 6px 16px rgba(60,90,220,.3)}
.sx-ai .ai .bb{background:#161c2d;color:#eef1fb;border:1px solid rgba(255,255,255,.06);border-top-left-radius:5px;box-shadow:0 6px 16px rgba(10,15,40,.25)}
.sx-ai .av{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center}
.sx-ai .av.me{background:linear-gradient(135deg,#d46ddb,#a24fd0);color:#fff;font-size:12px;font-weight:700;box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.sx-ai .avc{display:flex;flex-direction:column;gap:5px;flex:none}
.sx-ai .av.ai{background:#161c2d;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 12px rgba(139,92,255,.45)}
.sx-ai .av.ai svg{width:15px;height:15px;fill:#a68dff;filter:drop-shadow(0 0 3px rgba(160,120,255,.9))}
.sx-ai .undo{width:26px;height:26px;border-radius:50%;background:#161c2d;display:grid;place-items:center;opacity:0;transform:scale(.4);
transition:opacity .3s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.sx-ai .undo.on{opacity:1;transform:none}
.sx-ai .undo svg{width:13px;height:13px}
.sx-ai .dots{display:flex;gap:4px;padding:5px 2px}
.sx-ai .dots i{width:6px;height:6px;border-radius:50%;background:#a99bff;animation:sx-ai-dot 1s ease-in-out infinite}
.sx-ai .dots i:nth-child(2){animation-delay:.15s}
.sx-ai .dots i:nth-child(3){animation-delay:.3s}
@keyframes sx-ai-dot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
.sx-ai .inp{position:absolute;left:10px;right:10px;bottom:54px;height:40px;display:flex;align-items:center;padding:0 12px;border-radius:10px;
background:#161c2d;border:1.5px solid rgba(255,255,255,.14);color:#fff;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;
transition:border-color .3s,box-shadow .3s}
.sx-ai .inp.focus{border-color:#8b6cff;box-shadow:0 0 0 3px rgba(139,92,255,.3)}
.sx-ai .inp .ph{color:rgba(214,222,245,.6);font-style:italic}
.sx-ai .btns{position:absolute;left:10px;right:10px;bottom:12px;height:34px;display:flex;gap:6px}
.sx-ai .btns .fl{flex:1}
.sx-ai .sq{width:34px;height:34px;flex:none;border-radius:9px;background:#161c2d;border:1px solid rgba(255,255,255,.08);display:grid;place-items:center}
.sx-ai .sq svg{width:17px;height:17px}
.sx-ai .sq.mdl svg{stroke:#a08bff;stroke-width:1.5}
.sx-ai .sq.send{background:linear-gradient(135deg,#6a8dff,#7c5cff);border-color:transparent;box-shadow:0 4px 14px rgba(110,100,255,.5)}
.sx-ai .press{animation:sx-ai-press .32s ease}
@keyframes sx-ai-press{40%{transform:scale(.86)}}
.sx-ai .sheet{position:absolute;left:0;right:0;bottom:0;height:238px;border-radius:20px 20px 0 0;z-index:4;
background:radial-gradient(70% 40% at 20% 0%,rgba(139,92,255,.22),rgba(139,92,255,0) 70%),#8a9bb5;
border-top:1px solid rgba(255,255,255,.5);box-shadow:0 -12px 34px rgba(30,40,90,.22);
transition:transform .55s cubic-bezier(.3,.9,.3,1)}
.sx-ai .sheet.min{transform:translateY(160px)}
.sx-ai .hdl{position:absolute;left:50%;top:8px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:rgba(255,255,255,.65)}
.sx-ai.c .cvo{left:12px;right:12px;top:22px;bottom:64px;transition:opacity .35s}
.sx-ai .sheet.min .cvo{opacity:0}
.sx-ai .prm{position:absolute;left:0;right:0;bottom:0;height:62px;padding:8px 12px 14px;display:flex;gap:6px;align-items:center;background:#8a9bb5;z-index:5}
.sx-ai.c .inp{position:relative;left:auto;right:auto;bottom:auto;flex:1;min-width:0;height:40px;font-size:13px}
.sx-ai.c .bb{max-width:250px;font-size:13px}
.sx-ai .toast{position:absolute;z-index:6;display:flex;align-items:stretch;height:42px;border-radius:12px;overflow:hidden;
background:#111625;color:#f2f4fb;font-size:13px;font-weight:500;white-space:nowrap;
box-shadow:0 14px 34px rgba(10,15,45,.35),0 0 0 1px rgba(255,255,255,.08);
opacity:0;transform:translateY(16px) scale(.96);transition:opacity .35s,transform .5s cubic-bezier(.3,1.35,.5,1);pointer-events:none}
.sx-ai .toast.on{opacity:1;transform:none}
.sx-ai .toast .msg{display:flex;align-items:center;padding:0 14px}
.sx-ai .toast .tb{display:flex;align-items:center;padding:0 14px;border-left:1px solid rgba(255,255,255,.14);transition:color .3s,text-shadow .3s}
.sx-ai .toast .tb.ex.rdy{color:#cdbfff;text-shadow:0 0 12px rgba(160,130,255,.9)}
.sx-ai.w .toast{bottom:14px}
.sx-ai.c .toast{top:10px;left:10px;right:10px;font-size:12.5px;transform:translateY(-16px) scale(.96)}
.sx-ai.c .toast.on{transform:none}
.sx-ai.c .toast .msg{flex:1;padding:0 12px}
.sx-ai.c .toast .tb{padding:0 12px}
.sx-ai .mm-cursor{z-index:20}
.sx-ai .tch{position:absolute;left:0;top:0;z-index:20;width:28px;height:28px;margin:-11px 0 0 -11px;border-radius:50%;
background:rgba(255,255,255,.45);border:2px solid #fff;box-shadow:0 4px 14px rgba(20,20,60,.35),0 0 0 6px rgba(124,92,255,.2);
pointer-events:none;will-change:transform;transition:opacity .3s}
.sx-ai .tch.click{animation:sx-ai-tap .35s ease}
@keyframes sx-ai-tap{50%{scale:.72}}
.sx-ai.c .nd{font-size:12.5px}
.sx-ai.c .nd.root{max-width:94px;padding:7px 9px;font-size:13.5px}
.sx-ai.c .nd.br{font-size:13.5px}
.sx-ai.c .nd .ck{font-size:12px}
.sx-ai.c .nd.lf{max-width:172px}
.sx-ai.paused *,.sx-ai.paused *::before,.sx-ai.paused *::after{animation-play-state:paused!important}
.sx-ai.rm *,.sx-ai.rm *::before,.sx-ai.rm *::after{animation:none!important;transition:none!important}