/* ShareSmartAI C-list: hex-lit backgrounds + interactive layers + agent flow components. Needs ent.css, endb.css, iris.css */
@property --sw{syntax:'<percentage>';inherits:true;initial-value:0%}
@keyframes cxsweep{from{--sw:0%}to{--sw:100%}}
@keyframes cxin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body.e.iris{--glow:#5ce1ff;--glow2:#b49cff}
/* palettes */
body.e.iris.pn{--bg:#0a0424;--bg2:#10083a;--ink:#eef0ff;--ink2:#b9b4e6;--ink3:#8279c0;--line:rgba(255,255,255,.12);--acs:rgba(124,92,255,.2);--ac:#7c5cff;--on:#fff}
body.e.iris.pn .btn,body.e.iris.pn .ix-main .bn{background:#7c5cff}
body.e.iris.pn .btn.o{color:#d9ceff;border-color:rgba(217,206,255,.45)}
body.e.iris.pn .ix-main,body.e.iris.pn .ix-sub{background:rgba(10,4,36,.92);--ink:#eef0ff;--ink2:#b9b4e6;color:#eef0ff}
body.e.iris.pn .ix-main .lg,body.e.iris.pn .ix-sub b,body.e.iris.pn .ix-sub nav a{color:#eef0ff}
body.e.iris.pn .ix-main nav,body.e.iris.pn .ix-main .cs{color:#cfc6ff}
body.e.iris.pn .ix-sub nav a.on,body.e.iris.pn .ix-sub nav a:hover{color:#8fe9ff;border-bottom-color:#8fe9ff}
body.e.iris.pn .acc{color:#9fe8ff}
body.e.iris.pn .chip,body.e.iris.pn .pl,body.e.iris.pn .gv>div,body.e.iris.pn .stk>div,body.e.iris.pn .sts>div,body.e.iris.pn .cmpt{background:#130a42}
body.e.iris.pn .cmpt td:last-child{color:#fff;background:rgba(124,92,255,.18)}
body.e.iris.pn .hero:not(.dkh) .btn.o{color:#d9ceff}
body.e.iris.pb{--ac:#e8620d;--ac2:#1b9bb4;--acs:#fff1e6;--dk:#0f3f63;--bg2:#eef4f8;--ink:#0d2b44;--ink2:#3d5a73;--ink3:#7a93a8;--line:#d7e3ec;--ip:radial-gradient(120% 130% at 15% 0%,#1d77ad 0%,#114a73 46%,#0a2f4a 100%);--glow:#7fe3f5;--glow2:#ffb37a}
body.e.iris.pb .btn:hover,body.e.iris.pb .ix-main .bn:hover{background:#c7520a}
body.e.iris.pb .btn.o{color:#114a73;border-color:#114a73}body.e.iris.pb .btn.o:hover{background:#e6f1f8}
body.e.iris.pb .ix-top{background:#0f3f63}
body.e.iris.pb .ix-main .lg i{background:linear-gradient(135deg,#e8620d,#1b9bb4)}
body.e.iris.pb .ix-sub nav a.on,body.e.iris.pb .ix-sub nav a:hover{color:#114a73;border-bottom-color:#e8620d}
body.e.iris.pb .ix-main nav a:hover{color:#e8620d}
body.e.iris.pb .ix-main .cs{color:#114a73}
body.e.iris.pb .hero.dkh .btn,body.e.iris.pb .hero.dkh .btn:hover{color:#114a73}
body.e.iris.pb .hero.dkh .acc,body.e.iris.pb .dk .acc,body.e.iris.pb .bxp .acc,body.e.iris.pb .ip .acc{color:#ffb37a}
body.e.iris.pb .eyebrow{color:#3d5a73}body.e.iris.pb .dk .eyebrow,body.e.iris.pb .hero.dkh .eyebrow{color:#a9dff0}
body.e.iris.pb .fcta .md2:after{background:linear-gradient(100deg,rgba(10,47,74,.94) 0%,rgba(15,63,99,.8) 42%,rgba(15,63,99,.3) 75%,rgba(10,47,74,.1) 100%)}
body.e.iris.pb .tile:before{background:radial-gradient(circle,#e8620d,transparent 66%)}
/* hex-lit background */
.hx{position:relative;isolation:isolate}
.hx:before,.hx:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-size:120px 207.85px;background-position:center top;border-radius:inherit}
.hx:before{background-image:var(--hexb)}
.hx:after{background-image:var(--hexa);-webkit-mask-image:radial-gradient(circle 250px at var(--mx,-999px) var(--my,-999px),#000,transparent 72%),linear-gradient(100deg,transparent 34%,#000 50%,transparent 66%);mask-image:radial-gradient(circle 250px at var(--mx,-999px) var(--my,-999px),#000,transparent 72%),linear-gradient(100deg,transparent 34%,#000 50%,transparent 66%);-webkit-mask-size:100% 100%,240% 100%;mask-size:100% 100%,240% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0,var(--sw) 0;mask-position:0 0,var(--sw) 0;animation:cxsweep 13s linear infinite}
.e .alt.hx{background:linear-gradient(180deg,#f6f3ff,#efeaff)}
body.e.iris.pn .alt.hx{background:linear-gradient(180deg,#10083a,#0c0630)}
body.e.iris.pb .alt.hx{background:linear-gradient(180deg,#eef4f8,#e3edf4)}
.e .dk.hx,.e .hero.dkh.hx{--hexb:var(--hexbd);--hexa:var(--hexad)}
/* ============ interactive layers ============ */
.lx{padding-bottom:clamp(64px,8vw,110px)}
.lx .sh h2,.lx .sh .lede{color:#fff}.lx .sh .lede{color:#cdbfff}
.lxg{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:36px;align-items:start}
.lxs{position:relative}
.lxst{position:relative;height:590px;perspective:1500px;perspective-origin:50% 34%}
.lxst .beam{position:absolute;left:50%;top:4%;bottom:6%;width:2px;margin-left:-1px;background:linear-gradient(to top,transparent,var(--glow) 25%,#fff 50%,var(--glow) 75%,transparent);opacity:.55;pointer-events:none}
.lxst .pk{position:absolute;left:50%;bottom:7%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#fff;box-shadow:0 0 14px 5px var(--glow),0 0 40px 10px rgba(92,225,255,.35);opacity:0;animation:lxrise 5.4s linear infinite;animation-delay:calc(var(--d)*1s);pointer-events:none;z-index:6}
@keyframes lxrise{0%{transform:translateY(0) scale(.5);opacity:0}10%{opacity:1;transform:translateY(-30px) scale(1)}85%{opacity:1}100%{transform:translateY(-470px) scale(.6);opacity:0}}
.lxst .pl,.lxst .plx{--sp:88px;position:absolute;left:50%;top:0;width:min(480px,94%);height:96px;margin-left:calc(min(480px,94%)/-2);border:1px solid hsla(var(--h),100%,78%,.55);border-radius:14px;color:#fff;text-align:left;cursor:pointer;transform:translateY(calc(var(--k)*var(--sp) + 36px)) rotateX(62deg) rotateZ(-22deg);transform-style:preserve-3d;background:linear-gradient(135deg,hsla(var(--h),95%,62%,.38),rgba(26,14,110,.62) 58%,hsla(calc(var(--h) + 40),95%,65%,.22));box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 26px 44px -22px rgba(0,0,0,.6),0 0 26px -6px hsla(var(--h),100%,70%,.4);transition:transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .5s,border-color .5s,opacity .5s,filter .5s;overflow:hidden;display:flex;flex-direction:row;align-items:center;gap:16px;padding:0 26px;font-family:var(--fd);backdrop-filter:blur(2px)}
.lxst .pl:before,.lxst .plx:before{content:"";position:absolute;inset:0;background-image:var(--hexa);background-size:60px 104px;opacity:.55;mix-blend-mode:screen;pointer-events:none}
.lxst .pl:after,.lxst .plx:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.4) 50%,transparent 62%);background-size:260% 100%;background-position:130% 0;animation:lxscan 6s ease-in-out infinite;animation-delay:calc(var(--k)*-.7s);pointer-events:none}
@keyframes lxscan{0%,35%{background-position:130% 0}80%,100%{background-position:-30% 0}}
.lxst .pl i,.lxst .plx i{font:600 13px ui-monospace,Menlo,monospace;color:hsl(var(--h),100%,82%);font-style:normal;text-shadow:0 0 12px hsl(var(--h),100%,70%);position:relative}
.lxst .pl b,.lxst .plx b{font:500 22px var(--fd);letter-spacing:-.01em;position:relative;display:block;line-height:1.1}
.lxst .pl small,.lxst .plx small{display:block;font:400 12.5px var(--fb);color:#d5cbff;position:relative;margin-top:3px}
.lxst .pl .hd,.lxst .plx .hd{margin-left:auto;display:flex;gap:5px;position:relative}
.lxst .pl .hd u,.lxst .plx .hd u{width:11px;height:12px;background:hsl(var(--h),100%,75%);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);opacity:.85;animation:lxhx 2.4s ease-in-out infinite;animation-delay:calc(var(--q)*.25s)}
@keyframes lxhx{50%{opacity:.25;transform:scale(.8)}}
.lxst.has .pl:not(.on){opacity:.5;filter:saturate(.7)}
.lxst .pl.on,.lxst .plx.on{transform:translateY(calc(var(--k)*var(--sp) + 8px)) rotateX(62deg) rotateZ(-22deg);border-color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 30px 50px -22px rgba(0,0,0,.65),0 0 54px 0 hsla(var(--h),100%,70%,.85);z-index:3}
.lxst .pl:hover:not(.on){opacity:.85}
.lxst .pl:focus-visible{outline:2px solid #fff;outline-offset:4px}
.lxlive{margin-top:10px;display:flex;gap:10px;align-items:center;font:500 13.5px ui-monospace,Menlo,monospace;color:#bfe9ff;min-height:46px;padding:12px 16px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(10,4,40,.5)}
.lxlive b{color:#5ce1ff;font-weight:600;white-space:nowrap}.lxlive span:after{content:"";display:inline-block;width:7px;height:1em;background:#5ce1ff;margin-left:3px;vertical-align:-2px;animation:bl 1s steps(2) infinite}
.lxfl{display:flex;margin-top:14px;gap:0;align-items:stretch}
.lxfl button{all:unset;box-sizing:border-box;flex:1;cursor:pointer;text-align:center;padding:12px 4px 0;font:500 12px var(--fb);color:#b9b0f0;position:relative;transition:color .3s}
.lxfl button:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.14)}
.lxfl button i{position:absolute;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--glow),#fff)}
.lxfl button.on i{animation:lxfill var(--dur,5.2s) linear forwards}.lxfl button.done i{width:100%}
@keyframes lxfill{to{width:100%}}
.lxfl button b{display:block;font:600 11px ui-monospace,Menlo,monospace;color:#8f84d6}.lxfl button.on,.lxfl button.on b{color:#fff}.lxfl button:hover{color:#fff}
.lxrun{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:10px 18px;border-radius:8px;border:1.5px solid rgba(92,225,255,.6);color:#bff0ff;font:600 13.5px var(--fb);text-transform:uppercase;letter-spacing:.02em;transition:.2s}.lxrun:hover{background:rgba(92,225,255,.14)}
.lxd{background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:clamp(22px,2.6vw,34px);backdrop-filter:blur(10px);box-shadow:0 40px 70px -40px rgba(0,0,0,.7);color:#e9e4ff;min-height:590px}
.lxp{display:none}.lxp.on{display:block;animation:cxin .5s}
.lxk{font:600 12.5px ui-monospace,Menlo,monospace;letter-spacing:.12em;color:#5ce1ff;margin-bottom:12px}
.lxd h3{font:300 clamp(26px,2.5vw,34px)/1.1 var(--fd);color:#fff;margin-bottom:10px;letter-spacing:-.02em}
.lxd .lxl{color:#cdbfff;font-size:16.5px;margin-bottom:20px}
.lxio{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-bottom:22px}
.lxio>div{padding:12px 14px;border-radius:12px;background:rgba(10,4,40,.5);border:1px solid rgba(255,255,255,.12)}
.lxio small{display:block;font:600 10.5px ui-monospace,Menlo,monospace;letter-spacing:.12em;color:#8f84d6;text-transform:uppercase;margin-bottom:3px}
.lxio b{font:500 14px var(--fb);color:#fff;line-height:1.35;display:block}
.lxio em{font-style:normal;color:#5ce1ff;font-size:20px}
.lxd h4{font:600 12px ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:#9d92e6;margin:0 0 10px}
.lxag{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:22px}
.lxag>div{padding:11px 13px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:.25s;position:relative;padding-left:34px}
.lxag>div:before{content:"";position:absolute;left:12px;top:15px;width:11px;height:12px;background:var(--glow);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);box-shadow:0 0 12px var(--glow)}
.lxag>div:hover{border-color:var(--glow);background:rgba(92,225,255,.08);transform:translateY(-2px)}
.lxag b{display:block;font:500 14.5px var(--fb);color:#fff}.lxag span{font-size:12.8px;color:#bdb2f2;line-height:1.4;display:block;margin-top:2px}
.lxsv{list-style:none;display:grid;gap:7px;margin:0 0 20px}
.lxsv li{display:flex;gap:10px;font-size:14.5px;color:#e0d9ff;align-items:flex-start}.lxsv li:before{content:"";flex:none;margin-top:6px;width:7px;height:7px;border-radius:2px;background:var(--glow);box-shadow:0 0 10px var(--glow);transform:rotate(45deg)}
.lxsp{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font:600 11.5px ui-monospace,Menlo,monospace;letter-spacing:.1em;color:#8f84d6;text-transform:uppercase}
.lxsp span{padding:5px 10px;border-radius:99px;border:1px solid rgba(92,225,255,.5);color:#bff0ff;letter-spacing:.04em}
.lx.mini .lxst{height:520px}
/* ============ flow ============ */
.fw{position:relative;aspect-ratio:1000/470;max-width:1100px;margin:0 auto;border-radius:22px;background:var(--ip);border:1px solid rgba(255,255,255,.14);overflow:hidden;box-shadow:0 40px 80px -40px rgba(38,0,140,.7)}
.fw svg{position:absolute;inset:0;width:100%;height:100%}
.fw .ln{fill:none;stroke:rgba(190,170,255,.55);stroke-width:1.6}.fw .ln.d{stroke-dasharray:6 7;animation:dash 1.4s linear infinite}.fw .ln.on{stroke:#5ce1ff;stroke-width:2.4;filter:drop-shadow(0 0 6px #5ce1ff)}
.fw .pkt{fill:#fff;filter:drop-shadow(0 0 5px #5ce1ff)}.fw .pkt.o{fill:#ffb37a;filter:drop-shadow(0 0 5px #ff8a3d)}.fw .pkt.v{fill:#d9c9ff;filter:drop-shadow(0 0 5px #b49cff)}
.fw .tg{font:600 15px ui-monospace,Menlo,monospace;fill:#bff0ff;letter-spacing:.08em}
.fn{position:absolute;transform:translate(-50%,-50%);padding:12px 18px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;font:500 16px var(--fd);text-align:center;backdrop-filter:blur(6px);transition:.4s;white-space:nowrap}
.fn small{display:block;font:400 12px var(--fb);color:#cdbfff;margin-top:2px}
.fn.on{border-color:#5ce1ff;box-shadow:0 0 0 4px rgba(92,225,255,.16),0 0 34px rgba(92,225,255,.5);background:rgba(92,225,255,.14)}
.fn.m{background:linear-gradient(135deg,#7a4dff,#4c00ff);border-color:#cdbfff;font-size:19px;padding:16px 24px}
.fn.m.on{box-shadow:0 0 0 5px rgba(180,156,255,.3),0 0 50px rgba(124,92,255,.9)}
.fn.sp{display:flex;gap:8px;padding:10px 12px}.fn.sp span{padding:6px 11px;border-radius:99px;background:rgba(255,255,255,.1);font:500 13px var(--fb)}
.fn.you{border-color:#ffb37a}.fn.you.on{border-color:#ffb37a;box-shadow:0 0 34px rgba(255,138,61,.6);background:rgba(255,138,61,.16)}
.fsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1100px;margin:22px auto 0}
.fs{all:unset;box-sizing:border-box;cursor:pointer;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--bg);transition:.3s;position:relative;overflow:hidden}
.fs b{display:block;font:500 16.5px var(--fd);margin:4px 0 4px;color:var(--ink)}.fs span{font-size:14px;color:var(--ink2);display:block;line-height:1.45}.fs i{font:600 12px ui-monospace,Menlo,monospace;color:var(--ac);font-style:normal;letter-spacing:.1em}
.fs.on{border-color:var(--ac);box-shadow:0 18px 34px -22px var(--ac);transform:translateY(-3px)}.fs:hover{border-color:var(--ac)}
.fs:before{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--ac)}.fs.on:before{animation:lxfill 3s linear forwards}
.mobonly{display:none}
/* ============ file vs agent ============ */
.fv{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1100px;margin:0 auto}
.fv>div{border-radius:22px;padding:clamp(24px,3vw,38px);position:relative;overflow:hidden}
.fv .a{background:var(--bg2);border:1px dashed var(--line);color:var(--ink)}
.fv .b{background:var(--ip);color:#fff;box-shadow:0 40px 80px -40px rgba(38,0,140,.75);border:1px solid rgba(255,255,255,.2)}
.fv .k{font:600 12px ui-monospace,Menlo,monospace;letter-spacing:.14em;margin-bottom:8px;color:var(--ink3)}.fv .b .k{color:#5ce1ff}
.fv h3{font:300 clamp(24px,2.4vw,32px)/1.1 var(--fd);margin-bottom:18px}.fv .b h3{color:#fff}
.fv ul{list-style:none;display:grid;gap:11px}.fv li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--ink2)}.fv .b li{color:#e4dcff}
.fv .a li:before{content:"✕";color:#b4506a;font-weight:700;flex:none}.fv .b li:before{content:"";flex:none;margin-top:5px;width:10px;height:11px;background:#5ce1ff;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);box-shadow:0 0 12px #5ce1ff}
.fv .a li{opacity:.8}
.fv .tl2{margin-top:22px;display:flex;gap:0;align-items:center;font:500 12px ui-monospace,Menlo,monospace}
.fv .tl2 span{padding:7px 10px;border-radius:8px;background:rgba(0,0,0,.06);color:var(--ink2);margin-right:-1px}.fv .tl2 em{font-style:normal;margin:0 6px;color:var(--ink3)}
.fv .b .tl2 span{background:rgba(255,255,255,.12);color:#fff}.fv .b .tl2 em{color:#5ce1ff}
.fv .a .tl2 span:nth-child(3){animation:lgi 1s 1s both;}
/* ============ A2A conversation ============ */
.a2{display:grid;grid-template-columns:1fr 1.25fr;gap:34px;max-width:1160px;margin:0 auto;align-items:stretch}
.a2 .who{display:grid;gap:14px;align-content:start}
.a2 .ag{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:16px;background:var(--bg);border:1px solid var(--line)}
.a2 .ag i{flex:none;width:46px;height:52px;background:linear-gradient(135deg,var(--ac),var(--ac2));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;color:#fff;font:600 15px var(--fd);font-style:normal}
.a2 .ag b{display:block;font:500 17px var(--fd);color:var(--ink)}.a2 .ag span{font-size:13.5px;color:var(--ink2)}
.a2 .ag.t i{background:linear-gradient(135deg,#5ce1ff,#4c00ff)}
.a2 .pt{display:flex;gap:8px;flex-wrap:wrap}.a2 .pt span{padding:7px 12px;border-radius:99px;border:1px solid var(--line);font:600 12.5px ui-monospace,Menlo,monospace;color:var(--ink2)}.a2 .pt span.on{background:var(--ac);color:#fff;border-color:var(--ac)}
.a2 .rule{padding:14px 16px;border-radius:14px;border:1px dashed var(--ac);background:var(--acs);font-size:14px;color:var(--ink)}
.a2 .rule b{color:var(--ac);font:600 11.5px ui-monospace,Menlo,monospace;letter-spacing:.1em;display:block;margin-bottom:3px}
.a2c{background:var(--ip);border-radius:22px;padding:22px;color:#fff;min-height:500px;display:flex;flex-direction:column;gap:12px;box-shadow:0 40px 80px -40px rgba(38,0,140,.75);border:1px solid rgba(255,255,255,.16);position:relative}
.a2c .top{display:flex;justify-content:space-between;align-items:center;font:600 12px ui-monospace,Menlo,monospace;letter-spacing:.1em;color:#bff0ff;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.14)}
.a2c .rp{all:unset;cursor:pointer;color:#bff0ff;font:600 12px var(--fb);text-transform:uppercase;letter-spacing:.06em;padding:5px 10px;border:1px solid rgba(92,225,255,.5);border-radius:7px}.a2c .rp:hover{background:rgba(92,225,255,.14)}
.am{max-width:88%;padding:12px 15px;border-radius:14px;font-size:14.5px;line-height:1.5;opacity:0;transform:translateY(10px);transition:.5s;position:relative}
.am.vis{opacity:1;transform:none}
.am .tg{display:block;font:600 10.5px ui-monospace,Menlo,monospace;letter-spacing:.12em;margin-bottom:4px;opacity:.85}
.am.in{align-self:flex-start;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
.am.out{align-self:flex-end;background:linear-gradient(135deg,#6a3cff,#4c00ff);border:1px solid rgba(255,255,255,.28)}
.am.sys{align-self:center;max-width:96%;background:rgba(92,225,255,.1);border:1px dashed rgba(92,225,255,.55);color:#cfefff;font:500 13px ui-monospace,Menlo,monospace}
.am.sys code{color:#fff}
.am.dec{align-self:flex-end;background:#fff;color:#130032;border:2px solid #ff8a3d}.am.dec .bt{display:flex;gap:8px;margin-top:8px}.am.dec .bt span{padding:6px 12px;border-radius:7px;font:600 12.5px var(--fb);border:1px solid #e3dff2}.am.dec .bt span:first-child{background:#ff6a1a;color:#fff;border-color:#ff6a1a}.am.dec .tg{color:#c2410c}
/* ============ specialists ============ */
.spx .ints{display:flex;gap:8px;flex-wrap:wrap;margin:-20px 0 28px}
.spx .ints.c{justify-content:center}
.spx .ints button{all:unset;cursor:pointer;padding:9px 16px;border-radius:99px;border:1.5px solid var(--line);font:500 15px var(--fb);color:var(--ink2);transition:.25s;background:var(--bg)}
.spx .ints button:hover{border-color:var(--ac);color:var(--ac)}.spx .ints button.on{background:var(--ac);border-color:var(--ac);color:#fff}
.spg{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sc{position:relative;padding:24px 20px 20px;border-radius:18px;background:var(--bg);border:1px solid var(--line);transition:.35s;overflow:hidden}
.sc i{display:grid;place-items:center;width:52px;height:58px;margin-bottom:14px;background:linear-gradient(135deg,var(--ac),var(--ac2,#8f6bff));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);color:#fff;font:600 17px var(--fd);font-style:normal;transition:.4s}
.sc b{display:block;font:500 19px var(--fd);margin-bottom:4px;color:var(--ink)}.sc span{display:block;font-size:14px;color:var(--ink2);line-height:1.45}
.sc em{display:block;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-style:normal;font-size:13px;color:var(--ac);line-height:1.4}
.sc:hover{transform:translateY(-5px);border-color:var(--ac);box-shadow:0 24px 40px -26px var(--ac)}.sc:hover i{transform:rotate(60deg)}.sc:hover i{transform:scale(1.08)}
.sc.dim{opacity:.32;filter:grayscale(.6);transform:scale(.98)}
.sc.hit{border-color:var(--ac);box-shadow:0 20px 40px -28px var(--ac)}
.spnote{margin-top:18px;font-size:14.5px;color:var(--ink2);text-align:center;min-height:22px}.spnote b{color:var(--ac)}
/* ============ playbook ============ */
.pbk{display:grid;grid-template-columns:1fr 1.1fr;gap:26px;max-width:1160px;margin:0 auto}
.pbd{background:#fff;color:#130032;border-radius:18px;border:1px solid #e4dff2;box-shadow:0 30px 60px -34px rgba(19,0,50,.5);overflow:hidden;font-size:14.5px}
.pbd .hd{display:flex;gap:10px;align-items:center;padding:14px 18px;border-bottom:1px solid #eee9fa;font-weight:600}.pbd .hd small{margin-left:auto;font-weight:500;color:#7a6fa3}
.pbd .rl{all:unset;box-sizing:border-box;display:flex;gap:12px;align-items:center;width:100%;padding:15px 18px;border-bottom:1px solid #f1edfb;cursor:pointer;color:#130032;font-size:14.5px;line-height:1.4;transition:.2s}
.pbd .rl:hover{background:#f6f3ff}.pbd .rl.on{background:#efe9ff;box-shadow:inset 3px 0 0 #4c00ff}
.pbd .rl .sw{flex:none;margin-left:auto;width:36px;height:20px;border-radius:99px;background:#4c00ff;position:relative;transition:.25s}.pbd .rl .sw:after{content:"";position:absolute;top:2px;left:18px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.25s}
.pbd .rl.off .sw{background:#cfc8e6}.pbd .rl.off .sw:after{left:2px}
.pbd .rl b{font-weight:600}
.pbr{display:none;background:var(--ip);border-radius:18px;padding:26px;color:#fff;box-shadow:0 40px 80px -40px rgba(38,0,140,.75);border:1px solid rgba(255,255,255,.16)}.pbr.on{display:block;animation:cxin .45s}
.pbr .q{font:600 11px ui-monospace,Menlo,monospace;letter-spacing:.12em;color:#5ce1ff;margin-bottom:6px}.pbr .qt{padding:13px 15px;border-radius:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);font-size:15px;margin-bottom:16px}
.pbr .so,.pbr .sf{padding:14px 16px;border-radius:12px;font-size:14.5px;line-height:1.5;margin-top:10px}
.pbr .so{background:rgba(92,225,255,.12);border:1px solid rgba(92,225,255,.55)}.pbr .sf{background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.3);color:#cdbfff}
.pbr .so b,.pbr .sf b{display:block;font:600 11px ui-monospace,Menlo,monospace;letter-spacing:.12em;margin-bottom:4px}.pbr .so b{color:#5ce1ff}.pbr .sf b{color:#ffb37a}
.pbr[data-st=off] .so{display:none}.pbr[data-st=on] .sf{display:none}
.pbr .ex{margin-top:14px;font-size:12.5px;color:#cdbfff}
/* ============ audience ============ */
.aud{max-width:1100px;margin:0 auto}
.aud .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.aud .tabs button{all:unset;cursor:pointer;padding:10px 18px;border-radius:99px;border:1.5px solid var(--line);font:500 15px var(--fb);color:var(--ink2);background:var(--bg);transition:.25s}.aud .tabs button.on{background:var(--ac);color:#fff;border-color:var(--ac)}.aud .tabs button:hover{border-color:var(--ac)}
.aud .pn{display:none;grid-template-columns:.8fr 1.2fr;gap:22px}.aud .pn.on{display:grid;animation:cxin .45s}
.aud .qa{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:22px}
.aud .qa small{font:600 11px ui-monospace,Menlo,monospace;letter-spacing:.12em;color:var(--ink3);display:block;margin-bottom:6px}
.aud .qa p{font:400 17px/1.4 var(--fd);color:var(--ink);margin-bottom:16px}
.aud .mt{display:grid;gap:10px}.aud .mt div{display:grid;grid-template-columns:90px 1fr;gap:10px;align-items:center;font-size:13.5px;color:var(--ink2)}.aud .mt .br{height:7px;border-radius:7px;background:var(--line);overflow:hidden}.aud .mt .br i{display:block;height:100%;background:linear-gradient(90deg,var(--ac2,#5ce1ff),var(--ac));width:var(--w)}
.aud .ans{background:var(--ip);color:#fff;border-radius:18px;padding:24px;border:1px solid rgba(255,255,255,.16);box-shadow:0 40px 80px -40px rgba(38,0,140,.75)}
.aud .ans .who{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.aud .ans .who span{padding:5px 10px;border-radius:99px;background:rgba(92,225,255,.14);border:1px solid rgba(92,225,255,.5);font:600 11.5px ui-monospace,Menlo,monospace;color:#bff0ff}
.aud .ans p{font-size:15.5px;line-height:1.6;color:#f0ebff}.aud .ans p+p{margin-top:10px}.aud .ans .src{margin-top:14px;font:500 12.5px ui-monospace,Menlo,monospace;color:#9fe8ff}
/* ============ heroes (C) ============ */
.hmo{position:relative;height:440px;max-width:820px;margin:44px auto 0}
.hmo>*{position:absolute;left:50%;top:50%}
.mdoc{width:230px;height:300px;margin:-150px 0 0 -115px;background:#fff;border-radius:12px;padding:22px 20px;color:#130032;box-shadow:0 40px 70px -30px rgba(0,0,0,.6);animation:mdoc 11s ease-in-out infinite;text-align:left}
.mdoc b{display:block;font:600 14px var(--fb);margin-bottom:14px}.mdoc u{display:block;height:7px;border-radius:4px;background:#e8e3f6;margin:9px 0;text-decoration:none}.mdoc u:nth-child(3n){width:70%}.mdoc u:nth-child(4n){width:85%}
.mdoc .stp2{position:absolute;right:14px;bottom:14px;padding:5px 9px;border-radius:6px;background:#efe9ff;color:#4c00ff;font:600 11px var(--fb)}
@keyframes mdoc{0%,28%{transform:scale(1) rotate(-3deg);opacity:1;filter:none}38%{transform:scale(.25) rotate(20deg);opacity:0;filter:blur(6px)}94%{transform:scale(.25);opacity:0}100%{transform:scale(1) rotate(-3deg);opacity:1}}
.morb{width:170px;height:170px;margin:-85px 0 0 -85px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d9ceff,#7a4dff 45%,#25007a);box-shadow:0 0 0 14px rgba(180,156,255,.14),0 0 90px 10px rgba(124,92,255,.8);display:grid;place-items:center;font:500 19px var(--fd);color:#fff;text-align:center;animation:morb 11s ease-in-out infinite;opacity:0}
.morb:before{content:"";position:absolute;inset:-22px;border-radius:50%;border:1.5px dashed rgba(190,170,255,.7);animation:spn 18s linear infinite}
@keyframes morb{0%,30%{transform:scale(.2);opacity:0}42%{transform:scale(1.05);opacity:1}46%,88%{transform:scale(1);opacity:1}96%,100%{transform:scale(.2);opacity:0}}
.mring{width:0;height:0;animation:mring 11s ease-in-out infinite;opacity:0}
@keyframes mring{0%,44%{opacity:0}54%,88%{opacity:1}96%,100%{opacity:0}}
.mring .rot{position:absolute;left:0;top:0;width:0;height:0;animation:spn 40s linear infinite}
.mc{position:absolute;left:0;top:0;transform:rotate(var(--a)) translateX(var(--R,235px))}
.mc b{position:absolute;left:0;top:0;white-space:nowrap;padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(6px);font:500 14.5px var(--fb);color:#fff;transform:translate(-50%,-50%) rotate(calc(var(--a) * -1));animation:mcc 40s linear infinite}
@keyframes mcc{to{transform:translate(-50%,-50%) rotate(calc(var(--a) * -1 - 360deg))}}
.mcap{top:auto!important;bottom:-6px;transform:translateX(-50%);font:600 13px ui-monospace,Menlo,monospace;letter-spacing:.12em;color:#bff0ff;white-space:nowrap}
.mcap span{position:absolute;left:50%;transform:translateX(-50%);opacity:0;animation:mcp 11s infinite}.mcap span:nth-child(1){animation-name:mcp1}.mcap span:nth-child(2){animation-name:mcp2}
@keyframes mcp1{0%,28%{opacity:1}34%,94%{opacity:0}100%{opacity:1}}@keyframes mcp2{0%,36%{opacity:0}46%,88%{opacity:1}96%,100%{opacity:0}}
.hnet{position:relative;max-width:1000px;margin:46px auto 0;aspect-ratio:1000/360}
.hnet svg{position:absolute;inset:0;width:100%;height:100%}
.hnet .hx6{fill:rgba(124,92,255,.2);stroke:#cdbfff;stroke-width:2}.hnet .hx6.t{fill:rgba(92,225,255,.14);stroke:#9fe8ff}
.hnet text{font-family:var(--fd);fill:#fff}.hnet .s{font:12px ui-monospace,Menlo,monospace;fill:#bff0ff;letter-spacing:.06em}
.hsend{max-width:820px;margin:44px auto 0;text-align:left}
.hsend .row{display:flex;gap:10px;flex-wrap:wrap;padding:6px 18px 4px;align-items:center}
.hsend .file{display:flex;gap:10px;align-items:center;padding:16px 20px;border-bottom:1px solid #eee9fa;font-weight:600}.hsend .file i{width:34px;height:42px;border-radius:6px;background:#efe9ff;display:grid;place-items:center;font:700 11px var(--fb);color:#4c00ff;font-style:normal}
.hsend .row b{font:600 11.5px ui-monospace,Menlo,monospace;letter-spacing:.1em;color:#7a6fa3;width:84px}
.hsend .opt{padding:8px 14px;border-radius:99px;background:#f4f1fc;font:500 14px var(--fb);color:#41366a;border:1.5px solid transparent;animation:opt 9s infinite;animation-delay:var(--d)}
@keyframes opt{0%,4%{background:#f4f1fc;border-color:transparent;color:#41366a}12%,92%{background:#efe9ff;border-color:#4c00ff;color:#4c00ff}100%{background:#f4f1fc;border-color:transparent}}
.hsend .go{margin:12px 18px 18px;padding:14px 18px;border-radius:12px;background:#130032;color:#fff;display:flex;gap:12px;align-items:center;font-weight:600;position:relative;overflow:hidden}
.hsend .go:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(92,225,255,.35),transparent 70%);background-size:250% 100%;animation:lxscan 4.5s infinite}
.hsend .go small{margin-left:auto;font:500 12.5px ui-monospace,Menlo,monospace;color:#9fe8ff}
.hsend .res{margin:0 18px 18px;padding:14px 16px;border-radius:12px;border:1.5px solid #16a34a;background:#e9f8ef;font-size:14.5px;opacity:0;animation:resv 9s infinite;display:flex;gap:12px;align-items:center}
@keyframes resv{0%,52%{opacity:0;transform:translateY(8px)}62%,92%{opacity:1;transform:none}100%{opacity:0}}
.hsend .res i{flex:none;width:28px;height:32px;background:#16a34a;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;color:#fff;font-style:normal;font-weight:700;font-size:13px}
.hsend .res b{display:block;color:#15803d}.hsend .res span{color:#41366a;font-size:13px}
.desk td small{display:block;color:#7a6fa3;font-size:12px}
.hlay{margin-top:52px}
/* misc */
.cxnote{text-align:center;margin-top:20px;font-size:13px;color:var(--ink3)}
.e .dk .cxnote{color:#a99dea}
@media(max-width:1000px){
 .lxg,.a2,.pbk,.fv,.aud .pn{grid-template-columns:1fr}.spg{grid-template-columns:1fr 1fr}.fsteps{grid-template-columns:1fr 1fr}
 .lxst{height:460px}.lxst .pl,.lxst .plx{--sp:66px;height:78px}.lxst .pl b{font-size:18px}.lxd{min-height:0}.lxag{grid-template-columns:1fr}
 .hmo{height:380px;transform:scale(.8)}.mring .rot{}
}
@media(max-width:700px){.fw{display:none}.mobonly{display:grid}.fsteps{grid-template-columns:1fr}.spg{grid-template-columns:1fr}.hnet{display:none}.hmo{transform:scale(.6);height:300px;margin-top:20px}.lxio{grid-template-columns:1fr}.lxio em{display:none}.lxst .pl small{display:none}.lxst .pl .hd{display:none}}
@media(prefers-reduced-motion:reduce){.hx:after,.lxst .pk,.mdoc,.morb,.mring,.hsend .opt,.hsend .res{animation-duration:40s}}
.lxg>*,.a2>*,.pbk>*,.fv>*,.aud .pn>*{min-width:0}
.lxfl button{min-width:0;overflow-wrap:anywhere;padding-inline:2px}
@media(max-width:700px){
 .ix-main .wrap{padding:0 14px;gap:10px}.ix-main .lg{font-size:20px}.ix-main .lg i{width:26px;height:26px}.ix-main .bn{padding:10px 12px;font-size:12px}
 .lxfl button{font-size:10px}.lxfl button b{font-size:9.5px}.a2c{padding:16px}.am{max-width:96%}
}
.am code{white-space:normal;overflow-wrap:anywhere}