/* ===== Stage themes (v2 colour scheme) ===== */
.stage.th-paper{--bg:#F2F2EF;--line:#D9D9D3;--soft:#E6E6E1}
.stage.th-cream{--bg:#F5EFE4;--line:#E0D5C2;--soft:#EBE2D2;--mute:#A89F8E}
.stage.th-mist{--bg:#ECF0F6;--line:#D2D9E5;--soft:#DFE5EE;--mute:#98A1B2}
.stage.th-sage{--bg:#E9F0EA;--line:#CCDACE;--soft:#DAE5DC;--mute:#95A699}
.stage.th-blush{--bg:#F7ECEA;--line:#E8D3CF;--soft:#EFDEDB;--mute:#AE9A96}
.stage.th-lilac{--bg:#EFEBF8;--line:#D9D1EE;--soft:#E3DCF3;--mute:#A39CB8}
.stage.th-dark{--bg:#0E0F12;--ink:#F4F4F2;--mute:#5E5F66;--soft:#1C1D22;--line:#26272D;--card:#17181C}
.stage.th-navy{--bg:#0A1130;--ink:#F2F4FF;--mute:#6670A0;--soft:#141D47;--line:#1E2858;--card:#111A40}
.stage.th-accent{--bg:var(--ac);--ink:#FFFFFF;--mute:rgba(255,255,255,.58);--soft:rgba(255,255,255,.16);--line:rgba(255,255,255,.22)}
.th-accent .w.ac,.th-navy .w.ac,.th-dark .w.ac{--c:var(--ac2)}
.th-accent .w.hla{background:var(--ac2);--c:#111113}
.th-accent .w.ul::after{background:var(--ac2)}
.th-accent .stat.ac .sv,.th-accent .strike .new{color:#fff}
.th-accent .ring .fg{stroke:#fff}.th-accent .hb.win .tr i{background:#fff}
.th-accent .bigbtn.ac{background:#fff;color:var(--ac)}
.th-accent .spark{color:#fff}
.th-accent .chk{background:#111113}
.th-accent .bigic.fill{background:#fff;color:var(--ac)}
.dk .fr-card.dark,.dk .fr-br.dark{box-shadow:0 50px 90px -30px rgba(0,0,0,.7),0 0 0 2px rgba(255,255,255,.05)}
.dark .kpi,.dark .kb-col,.dark .cal .dd{background:#1D1E23}
.dark .kb-card{background:#26272D;box-shadow:none;color:#ECECEA}
.dark .msg.a{background:#23242A}.dark .typing{background:#23242A}
.dark .fld .in{background:#1D1E23;border-color:#2C2D34;color:#ECECEA}
.dark .prompt{background:#1D1E23;border-color:#3A3B42}
.dark .rw.sel{background:#1E2340}
.dark .tbl th,.dark .kl{color:#80818A}
.th-navy .dots,.th-dark .dots{opacity:.6}

/* ===== v2 blocks ===== */
.ui2{padding:40px;font-size:28px;line-height:1.3}
.ui2 svg{width:1em;height:1em;stroke-width:2.2}
/* funnel */
.funnel{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.fn{height:96px;border-radius:20px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;color:#fff;font-weight:750;font-size:32px;transform:scaleX(0);animation:grow .8s cubic-bezier(.2,.8,.2,1) forwards}
.fn small{font-weight:600;opacity:.8;font-size:24px}
/* donut */
.donut{display:flex;align-items:center;gap:40px}
.donut svg{width:340px;height:340px;transform:rotate(-90deg);flex:none}
.donut .seg{fill:none;stroke-width:58;stroke-dasharray:0 1000;animation:segIn 1s cubic-bezier(.3,.1,.2,1) forwards}
@keyframes segIn{to{stroke-dasharray:var(--len) 1000}}
.legend{display:flex;flex-direction:column;gap:16px;font-size:30px;font-weight:650}
.legend i{display:inline-block;width:22px;height:22px;border-radius:7px;margin-right:14px;vertical-align:-2px}
.legend b{color:#8B8B86;font-weight:600;margin-left:10px}
/* gauge */
.gauge{position:relative;width:560px;height:320px}
.gauge svg{width:100%;height:100%;overflow:visible}
.gauge .gt{fill:none;stroke:#ECECE8;stroke-width:46;stroke-linecap:round}
.gauge .gv{fill:none;stroke:var(--ac);stroke-width:46;stroke-linecap:round;stroke-dasharray:0 900;animation:gIn 1.6s cubic-bezier(.3,.1,.2,1) forwards}
@keyframes gIn{to{stroke-dasharray:var(--len) 900}}
.gauge .needle{position:absolute;left:50%;bottom:26px;width:10px;height:200px;margin-left:-5px;border-radius:5px;background:#111113;transform-origin:50% 100%;transform:rotate(-90deg);animation:needle 1.6s cubic-bezier(.3,.1,.2,1) forwards}
@keyframes needle{to{transform:rotate(var(--deg))}}
.gauge .hub{position:absolute;left:50%;bottom:10px;width:42px;height:42px;margin-left:-21px;border-radius:50%;background:#111113}
.gauge .gl2{position:absolute;left:0;right:0;bottom:-90px;text-align:center}
/* heatmap */
.heat{display:grid;gap:8px}
.heat i{aspect-ratio:1;border-radius:8px;display:block;background:var(--ac);opacity:0;animation:hIn .4s forwards}
@keyframes hIn{to{opacity:var(--o)}}
/* gantt */
.gantt{display:flex;flex-direction:column;gap:18px}
.gr{display:grid;grid-template-columns:200px 1fr;align-items:center;gap:16px;font-size:24px;font-weight:650}
.gtrack{height:46px;position:relative;background:repeating-linear-gradient(90deg,#F0F0EC 0 2px,transparent 2px 12.5%)}
.gbar{position:absolute;top:0;bottom:0;border-radius:12px;transform:scaleX(0);transform-origin:0 50%;animation:grow .7s cubic-bezier(.2,.8,.2,1) forwards}
/* week */
.week{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;height:520px}
.wk{position:relative;background:#F6F6F3;border-radius:16px}
.dark .wk{background:#1D1E23}
.wk h6{margin:0;padding:12px;font-size:20px;color:#8B8B86;text-align:center}
.wev{position:absolute;left:8px;right:8px;border-radius:12px;padding:8px 10px;font-size:18px;font-weight:700;color:#fff;overflow:hidden}
/* map pins */
.mapc{position:relative;width:100%;aspect-ratio:1.5;background:#E6ECF3;border-radius:24px;overflow:hidden}
.dark .mapc{background:#1A2233}
.mapc .land{position:absolute;background:#D2DBE6;border-radius:40% 55% 45% 60%}
.dark .mapc .land{background:#253049}
.pin{position:absolute;transform:translate(-50%,-100%)}
.pin .pb{display:flex;align-items:center;gap:8px;background:#111113;color:#fff;border-radius:14px;padding:8px 14px;font-size:20px;font-weight:700;white-space:nowrap}
.pin .pt{width:18px;height:18px;border-radius:50%;background:var(--ac);border:5px solid #fff;margin:6px auto 0;box-sizing:content-box}
/* laptop frame */
.fr-lap{width:100%}
.fr-lap .lscr{background:#111113;border-radius:30px 30px 0 0;padding:22px 22px 0}
.fr-lap .lin{background:#fff;border-radius:12px 12px 0 0;overflow:hidden;color:#111113;min-height:300px}
.fr-lap .lbase{height:34px;background:#D6D6D1;border-radius:0 0 30px 30px;margin:0 -50px;position:relative;box-shadow:var(--sh)}
.fr-lap .lbase::after{content:'';position:absolute;left:50%;top:0;width:160px;height:12px;margin-left:-80px;background:#BDBDB7;border-radius:0 0 10px 10px}
/* before/after wipe */
.wipe{position:relative;border-radius:30px;overflow:hidden;box-shadow:var(--sh)}
.wipe .pa,.wipe .pb2{padding:40px;min-height:420px}
.wipe .pa{background:#FFF4F3;color:#111113}
.wipe .pb2{position:absolute;inset:0;background:#fff;color:#111113;clip-path:inset(0 0 0 100%);animation:wipeIn 1.4s cubic-bezier(.6,0,.2,1) forwards}
@keyframes wipeIn{to{clip-path:inset(0 0 0 0)}}
.wipe .bar2{position:absolute;top:0;bottom:0;width:8px;background:var(--ac);left:100%;animation:wipeBar 1.4s cubic-bezier(.6,0,.2,1) forwards}
@keyframes wipeBar{to{left:0}}
.wipe .lab{position:absolute;top:24px;right:24px}
/* receipt */
.rcpt{background:#fff;color:#111113;padding:44px 44px 64px;font-family:'JetBrains Mono',monospace;font-size:24px;position:relative;box-shadow:var(--sh);-webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 20px) no-repeat,radial-gradient(circle 12px at 12px 100%,transparent 11px,#000 12px) bottom left/24px 20px repeat-x;mask:linear-gradient(#000,#000) top/100% calc(100% - 20px) no-repeat,radial-gradient(circle 12px at 12px 100%,transparent 11px,#000 12px) bottom left/24px 20px repeat-x}
.rcpt .rl{display:flex;justify-content:space-between;padding:10px 0;border-bottom:2px dashed #E6E6E1}
.rcpt .rt{font-size:40px;font-weight:600;display:flex;justify-content:space-between;margin-top:20px}
/* credit card */
.ccard{width:620px;aspect-ratio:1.586;border-radius:36px;background:var(--ac);color:#fff;padding:44px;position:relative;box-shadow:var(--sh);overflow:hidden;animation:aFlip .9s cubic-bezier(.2,.8,.2,1) both}
.ccard::before{content:'';position:absolute;right:-120px;top:-120px;width:380px;height:380px;border-radius:50%;background:rgba(255,255,255,.14)}
.ccard .chip2{width:86px;height:64px;border-radius:14px;background:#F2D27A;margin:30px 0 40px}
.ccard .num{font:600 38px 'JetBrains Mono',monospace;letter-spacing:.08em}
.ccard .nm{position:absolute;left:44px;bottom:40px;font-size:24px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.ccard .br{position:absolute;right:44px;bottom:34px;display:flex}
.ccard .br i{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.85);display:block}
.ccard .br i+i{margin-left:-20px;background:rgba(255,255,255,.5)}
/* lockscreen */
.lock{min-height:820px;background:var(--ac);color:#fff;padding:60px 26px 40px;text-align:center;margin-top:-80px}
.lock .tm{font-size:120px;font-weight:700;letter-spacing:-.04em;line-height:1;margin-top:30px}
.lock .dt{font-size:28px;opacity:.85;margin-bottom:40px}
.lock .toast{text-align:left;background:rgba(255,255,255,.92)}
/* multiplayer cursors */
.mpc{position:relative;padding:40px;min-height:440px}
.mcur{position:absolute;display:flex;align-items:flex-start;gap:4px;animation:mcur 3s ease-in-out infinite alternate}
.mcur svg{width:40px;height:40px}
.mcur span{margin-top:30px;color:#fff;font-size:20px;font-weight:700;padding:4px 12px;border-radius:10px 10px 10px 2px;white-space:nowrap}
@keyframes mcur{to{transform:translate(var(--mx),var(--my))}}
/* comments */
.cmt{display:flex;gap:18px;padding:18px 0}
.cmt .cb{background:#F4F4F1;border-radius:0 22px 22px 22px;padding:16px 22px;font-size:26px;flex:1}
.dark .cmt .cb{background:#23242A}
.cmt .cn{font-weight:750;font-size:22px;margin-bottom:4px}
.reacts{display:flex;gap:10px;margin-top:10px}
.reacts span{display:inline-flex;align-items:center;gap:6px;font-size:20px;font-weight:700;background:#fff;border:2px solid #E6E6E1;border-radius:999px;padding:4px 12px}
/* stamp */
.stamp{position:absolute;right:30px;bottom:30px;border:8px solid var(--ok);color:var(--ok);font-weight:900;font-size:48px;letter-spacing:.08em;text-transform:uppercase;padding:8px 26px;border-radius:18px;transform:rotate(-12deg) scale(2);opacity:0;animation:stamp .5s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes stamp{to{opacity:1;transform:rotate(-12deg) scale(1)}}
/* signature */
.sig{width:100%;height:170px}
.sig path{fill:none;stroke:#1C2B8F;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1800;stroke-dashoffset:1800;animation:draw 1.8s ease-in-out forwards}
/* qr */
.qr{display:grid;grid-template-columns:repeat(21,1fr);gap:0;width:420px;height:420px;padding:26px;background:#fff;border-radius:34px;box-shadow:var(--sh);position:relative;overflow:hidden}
.qr i{display:block;background:#111113}.qr i.o{background:transparent}
.qr .scan{position:absolute;left:0;right:0;height:6px;background:var(--ac);top:0;animation:scan 1.6s ease-in-out infinite alternate}
@keyframes scan{to{top:100%}}
/* waveform */
.wave{display:flex;align-items:center;gap:8px;height:180px}
.wave i{flex:1;border-radius:6px;background:var(--ac);animation:wv 1s ease-in-out infinite alternate;display:block}
@keyframes wv{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
/* video player */
.vid{position:relative;aspect-ratio:16/9;background:#1B1C22;overflow:hidden}
.vid .sh{position:absolute;border-radius:50%}
.vid .play{position:absolute;left:50%;top:50%;width:130px;height:130px;margin:-65px;border-radius:50%;background:rgba(255,255,255,.95);color:#111113;display:flex;align-items:center;justify-content:center}
.vid .play svg{width:56px;height:56px;fill:#111113}
.vid .cap{position:absolute;left:0;right:0;bottom:60px;text-align:center}
.vid .cap span{background:rgba(0,0,0,.72);color:#fff;font-size:30px;font-weight:700;padding:8px 18px;border-radius:10px}
.vid .prog{position:absolute;left:24px;right:24px;bottom:24px;height:8px;border-radius:4px;background:rgba(255,255,255,.25)}
.vid .prog i{display:block;height:100%;width:70%;background:var(--ac);border-radius:4px;transform:scaleX(0);transform-origin:0 50%;animation:grow 3s linear forwards}
/* social post */
.post .ph2{aspect-ratio:1.4;border-radius:22px;margin:22px 0;position:relative;overflow:hidden}
.post .acts{display:flex;gap:30px;font-size:26px;font-weight:700;align-items:center}
.post .acts svg{width:34px;height:34px}
.post .heart svg{fill:#EF3D6E;stroke:#EF3D6E}
/* modal */
.mod-wrap{position:relative;padding:40px;min-height:560px}
.mod-dim{position:absolute;inset:0;background:rgba(17,17,19,.45);opacity:0;animation:aFade .4s forwards}
.mod{position:absolute;left:60px;right:60px;top:90px;background:#fff;border-radius:28px;padding:40px;box-shadow:var(--sh);color:#111113}
/* coach mark */
.coach{position:relative;padding:40px;min-height:400px}
.coach .target{position:relative;display:inline-flex}
.coach .pulse{position:absolute;inset:-14px;border-radius:24px;border:5px solid var(--ac);animation:pulse2 1.4s ease-out infinite}
@keyframes pulse2{from{opacity:1;transform:scale(.9)}to{opacity:0;transform:scale(1.25)}}
.coach .tip{position:absolute;background:#111113;color:#fff;border-radius:22px;padding:22px 26px;font-size:26px;width:420px;line-height:1.35}
.coach .tip b{display:block;font-size:30px;margin-bottom:6px}
/* dropdown */
.dd2{border:2px solid #E3E3DE;border-radius:18px;padding:18px 22px;display:flex;align-items:center;font-size:28px;font-weight:650}
.ddl{margin-top:10px;border-radius:18px;box-shadow:var(--sh2);background:#fff;padding:10px;position:relative}
.ddl .o{padding:16px 18px;border-radius:12px;font-size:26px;display:flex;gap:14px;align-items:center;position:relative;z-index:1}
.ddl .hlb{position:absolute;left:10px;right:10px;height:62px;border-radius:12px;background:color-mix(in srgb,var(--ac) 14%,#fff);top:10px;animation:ddMove 1.6s cubic-bezier(.6,0,.2,1) forwards}
@keyframes ddMove{to{transform:translateY(var(--dy))}}
/* file tree */
.tree{font-family:'JetBrains Mono',monospace;font-size:25px;line-height:1.9}
.tree .f{display:flex;align-items:center;gap:12px}
.tree .f svg{width:28px;height:28px}
/* PR card */
.pr .chk2{display:flex;align-items:center;gap:14px;padding:12px 0;font-size:24px}
.spin{animation:spin 1s linear infinite;display:inline-flex}
/* json */
.json .k{color:#C9A7FF}.json .s{color:#7CE3B5}.json .n{color:#FFC978}.json .p{color:#8E8F98}
/* seat slider */
.sld{position:relative;height:16px;border-radius:8px;background:#ECECE8;margin:50px 0 30px}
.sld i{position:absolute;left:0;top:0;bottom:0;border-radius:8px;background:var(--ac);width:0;animation:sldW 1.6s cubic-bezier(.4,.1,.2,1) forwards}
.sld b{position:absolute;top:50%;left:0;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:#fff;border:6px solid var(--ac);animation:sldL 1.6s cubic-bezier(.4,.1,.2,1) forwards}
@keyframes sldW{to{width:var(--p)}}@keyframes sldL{to{left:var(--p)}}
/* flip digits */
.digits{display:flex;gap:18px;align-items:flex-start}
.dg{display:flex;flex-direction:column;align-items:center;gap:12px}
.dg b{background:#111113;color:#fff;font-size:120px;font-weight:800;letter-spacing:-.03em;border-radius:26px;padding:10px 26px;min-width:190px;text-align:center;font-variant-numeric:tabular-nums;box-shadow:var(--sh2)}
.dk .dg b{background:#fff;color:#111113}
.dg small{font-size:26px;color:var(--mute);font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.dsep{font-size:110px;font-weight:800;color:var(--mute);margin-top:10px}
/* marquee */
.marq{width:100%;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq .mt{display:flex;gap:24px;width:max-content;animation:marq 12s linear infinite}
.marq.rev .mt{animation-direction:reverse}
@keyframes marq{to{transform:translateX(-50%)}}
.marq .mc{display:flex;align-items:center;gap:14px;background:#fff;border-radius:22px;padding:20px 30px;box-shadow:var(--sh2);font-size:32px;font-weight:750;white-space:nowrap;color:#111113}
.marq .mc svg{width:36px;height:36px}
/* nps */
.nps{display:grid;grid-template-columns:repeat(11,1fr);gap:8px}
.nps span{aspect-ratio:1;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:750;font-size:24px;background:#F0F0EC}
.nps span.pick{background:var(--ac);color:#fff}
/* cohort */
.coh{display:grid;grid-template-columns:120px repeat(8,1fr);gap:6px;font-size:18px;font-weight:700}
.coh span{height:50px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.coh .c{background:var(--ac);color:#fff;opacity:0;animation:hIn .3s forwards}
/* podium */
.podium{display:flex;align-items:flex-end;gap:18px}
.pd{display:flex;flex-direction:column;align-items:center;gap:16px;width:250px}
.pd .blk{width:100%;border-radius:24px 24px 0 0;background:var(--soft);display:flex;justify-content:center;padding-top:22px;font-size:80px;font-weight:800;color:var(--mute);transform:scaleY(0);transform-origin:50% 100%;animation:grow2 .8s cubic-bezier(.2,.8,.2,1) forwards}
.pd.win .blk{background:var(--ac);color:#fff}
.pd .pn{font-size:32px;font-weight:750}
/* matrix */
.mx{width:100%;border-collapse:collapse;font-size:26px}
.mx th{font-size:24px;padding:0 0 18px;text-align:center}.mx th:first-child{text-align:left}
.mx td{padding:16px 0;border-top:2px solid #F0F0EC;text-align:center;font-weight:600}
.mx td:first-child{text-align:left}
.mx .y{color:var(--ok)}.mx .n{color:#C9C9C4}
.mx .us{background:color-mix(in srgb,var(--ac) 10%,#fff)}
.mx svg{width:34px;height:34px;stroke-width:3}
/* mind map */
.mind{position:relative;width:820px;height:820px}
.mind svg.lines{position:absolute;inset:0;width:100%;height:100%}
.mind svg.lines line{stroke:var(--line);stroke-width:4;stroke-dasharray:500;stroke-dashoffset:500;animation:draw .6s forwards}
.mind .mn{position:absolute;transform:translate(-50%,-50%)}
.mind .mcn{background:var(--ac);color:#fff;border-radius:34px;padding:30px 40px;font-size:40px;font-weight:800;box-shadow:var(--sh)}
/* word swap */
.swap{display:inline-flex;flex-direction:column;height:1.15em;overflow:hidden;vertical-align:bottom}
.swap span{display:block;height:1.15em;line-height:1.15em;animation:swapY var(--sd) cubic-bezier(.7,0,.2,1) infinite;color:var(--ac);font-weight:800}
.th-accent .swap span,.dk .swap span{color:var(--ac2)}
/* versus */
.vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;width:100%}
.vs .vc{border-radius:34px;padding:50px 30px;text-align:center;font-size:52px;font-weight:800;letter-spacing:-.03em;box-shadow:var(--sh2)}
.vs .vc small{display:block;font-size:26px;font-weight:600;opacity:.7;margin-top:10px;letter-spacing:0}
.vs .vo{width:120px;height:120px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:900}
/* reactions burst */
.burst{position:relative;width:600px;height:620px}
.burst .rb{position:absolute;bottom:0;width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;animation:rise2 2.4s ease-out infinite}
.burst .rb svg{width:52px;height:52px;fill:currentColor}
@keyframes rise2{0%{opacity:0;transform:translateY(0) scale(.5)}15%{opacity:1;transform:translateY(-60px) scale(1)}100%{opacity:0;transform:translateY(-560px) translateX(var(--rx)) scale(1.1)}}
/* award */
.award{display:flex;flex-direction:column;align-items:center;gap:16px;background:#fff;color:#111113;border-radius:40px;padding:50px 70px;box-shadow:var(--sh);text-align:center}
.award .medal{width:170px;height:170px;border-radius:50%;background:var(--ac2);display:flex;align-items:center;justify-content:center;color:#111113}
.award .medal svg{width:96px;height:96px}
.award .ak{font-size:24px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#8B8B86}
.award .at{font-size:52px;font-weight:800;letter-spacing:-.03em}
/* doc editor */
.doc p{font-size:28px;line-height:1.55;margin:0 0 18px;color:#3A3A37}
.dark .doc p{color:#C9C9CF}
.doc mark{background:none;color:inherit;position:relative}
.doc mark::before{content:'';position:absolute;inset:-2px -4px;background:color-mix(in srgb,var(--ac) 22%,transparent);border-radius:6px;transform:scaleX(0);transform-origin:0 50%;animation:grow .6s forwards;animation-delay:inherit;z-index:-1}
.doc mark{z-index:0;animation-delay:inherit}
.sugg{background:#fff;color:#111113;border-radius:24px;padding:24px;box-shadow:var(--sh2);border:2px solid color-mix(in srgb,var(--ac) 40%,#fff)}
.sugg .sh2{display:flex;align-items:center;gap:10px;color:var(--ac);font-weight:800;font-size:22px;margin-bottom:8px}
/* diff */
.diff .dl2{font-family:'JetBrains Mono',monospace;font-size:26px;padding:10px 16px;border-radius:10px;margin:6px 0}
.diff .del{background:#FDE7E8;color:#A1252A}.diff .add{background:#DDF4EA;color:#0A6B4D}
.dark .diff .del{background:#3A1B1E;color:#FF9EA3}.dark .diff .add{background:#12342A;color:#7CE3B5}
/* translate */
.tr2{display:flex;flex-direction:column;gap:18px}
.tr2 .tb2{border-radius:22px;padding:24px 28px;font-size:32px;font-weight:600;background:#F4F4F1}
.dark .tr2 .tb2{background:#1D1E23}
.tr2 .tb2.to{background:color-mix(in srgb,var(--ac) 12%,#fff)}
.dark .tr2 .tb2.to{background:color-mix(in srgb,var(--ac) 22%,#17181C)}
.tr2 .lg2{font-size:20px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8B8B86;margin-bottom:6px}
/* image gen */
.igrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.igrid>div{aspect-ratio:1;border-radius:22px;position:relative;overflow:hidden;background:#ECECE8}
.igrid .art{position:absolute;inset:0;opacity:0;animation:aFade .6s forwards}
.igrid .art i{position:absolute;display:block}
.shim{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);background-size:300% 100%;animation:shim 1.1s linear infinite}
@keyframes shim{from{background-position:120% 0}to{background-position:-120% 0}}
/* kpi grid */
.kg{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:100%}
.kt{background:#fff;color:#111113;border-radius:28px;padding:30px;box-shadow:var(--sh2)}
.kt .kl{font-size:22px;color:#8B8B86;font-weight:650}
.kt .kv{font-size:58px;font-weight:800;letter-spacing:-.04em;margin:6px 0 10px}
.kt svg.spk{width:100%;height:60px}
.kt svg.spk path{fill:none;stroke-width:5;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1.4s forwards}
/* horizontal stepper */
.hstep{display:flex;align-items:flex-start;width:100%}
.hs{flex:1;display:flex;flex-direction:column;align-items:center;gap:14px;font-size:24px;font-weight:700;position:relative;text-align:center}
.hs .hd2{width:70px;height:70px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--mute);z-index:1;animation:hsOn .4s forwards}
.hs .hd2 svg{width:34px;height:34px;stroke-width:3}
@keyframes hsOn{to{background:var(--ac);color:#fff}}
.hs::before{content:'';position:absolute;top:33px;right:50%;width:100%;height:4px;background:var(--line)}
.hs:first-child::before{display:none}
.hs::after{content:'';position:absolute;top:33px;right:50%;width:100%;height:4px;background:var(--ac);transform:scaleX(0);transform-origin:0 50%;animation:grow .4s forwards;animation-delay:inherit}
.hs:first-child::after{display:none}
/* timer */
.tmr{display:flex;align-items:center;gap:26px}
.tmr .tp{width:96px;height:96px;border-radius:50%;background:var(--bad);color:#fff;display:flex;align-items:center;justify-content:center}
.tmr .tp svg{width:40px;height:40px;fill:#fff}
.tmr .tt{font:700 76px 'JetBrains Mono',monospace;letter-spacing:-.02em}
.rec{width:18px;height:18px;border-radius:50%;background:var(--bad);display:inline-block;animation:blink 1s steps(1) infinite}
/* chat widget */
.cw{position:relative;min-height:760px;padding:30px}
.cw .panel{position:absolute;right:30px;bottom:150px;width:560px;background:#fff;border-radius:30px;box-shadow:var(--sh);overflow:hidden;transform-origin:100% 100%;animation:aPop .6s both;color:#111113}
.cw .ph3{background:var(--ac);color:#fff;padding:26px;display:flex;align-items:center;gap:14px;font-weight:800;font-size:28px}
.cw .fab{position:absolute;right:30px;bottom:30px;width:100px;height:100px;border-radius:50%;background:var(--ac);color:#fff;display:flex;align-items:center;justify-content:center}
.cw .fab svg{width:48px;height:48px}
/* keycaps */
.keys{display:flex;gap:26px;align-items:center}
.kc{min-width:170px;height:170px;padding:0 36px;border-radius:36px;background:#fff;color:#111113;display:flex;align-items:center;justify-content:center;font-size:64px;font-weight:800;box-shadow:0 14px 0 #D3D3CD,var(--sh2);animation:keyP .5s ease forwards}
@keyframes keyP{0%{transform:none}40%{transform:translateY(12px);box-shadow:0 2px 0 #D3D3CD,var(--sh2)}100%{transform:none}}
.kplus{font-size:70px;font-weight:800;color:var(--mute)}
/* deck fan */
.deck{position:relative;width:700px;height:620px}
.deck .dc{position:absolute;left:50%;top:50%;width:420px;height:540px;margin:-270px 0 0 -210px;border-radius:34px;box-shadow:var(--sh);display:flex;flex-direction:column;justify-content:flex-end;padding:36px;color:#fff;font-size:40px;font-weight:800;letter-spacing:-.02em;animation:fan .9s cubic-bezier(.2,.8,.2,1) forwards}
.deck .dc svg{width:70px;height:70px;margin-bottom:auto}
@keyframes fan{to{transform:translateX(var(--fx)) rotate(var(--fr))}}
/* confetti */
.conf{position:absolute;inset:0;pointer-events:none}
.conf i{position:absolute;left:50%;top:45%;width:22px;height:34px;border-radius:5px;opacity:0;animation:conf 1.6s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes conf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--cx),var(--cy)) rotate(var(--cr))}}
/* booking */
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0}
.slots span{border:2px solid #E3E3DE;border-radius:16px;padding:18px 0;text-align:center;font-weight:700;font-size:26px}
.slots span.pk{animation:pick .3s forwards}
@keyframes pick{to{background:var(--ac);border-color:var(--ac);color:#fff}}
/* poll */
.poll .po{position:relative;border-radius:16px;overflow:hidden;background:#F4F4F1;margin:12px 0;padding:20px 24px;display:flex;justify-content:space-between;font-weight:700;font-size:27px}
.dark .poll .po{background:#1D1E23}
.poll .po i{position:absolute;left:0;top:0;bottom:0;width:var(--p);background:color-mix(in srgb,var(--ac) 22%,transparent);transform:scaleX(0);transform-origin:0 50%;animation:grow 1s cubic-bezier(.3,.1,.2,1) forwards}
.poll .po.win i{background:color-mix(in srgb,var(--ac) 40%,transparent)}
.poll .po span{position:relative}
/* copy link */
.cpl{display:flex;gap:14px;align-items:center;border:2px solid #E3E3DE;border-radius:20px;padding:14px 14px 14px 26px;font-size:28px}
.cpl .u{flex:1;font-family:'JetBrains Mono',monospace;color:#6B6B66;font-size:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* connect */
.conn{display:flex;align-items:center;gap:0}
.conn .ci2{width:200px;height:200px;border-radius:54px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--sh)}
.conn .ci2 svg{width:96px;height:96px}
.conn .wire{width:220px;height:8px;background:var(--line);position:relative;border-radius:4px}
.conn .wire i{position:absolute;inset:0;background:var(--ac);border-radius:4px;transform:scaleX(0);transform-origin:0 50%;animation:grow .8s forwards}
.conn .plug{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px;border-radius:50%;background:#fff;box-shadow:var(--sh2);display:flex;align-items:center;justify-content:center;color:var(--ok)}
.conn .plug svg{width:40px;height:40px;stroke-width:3}
/* incident */
.inc{border-left:10px solid var(--bad);animation:incOk .4s forwards}
@keyframes incOk{to{border-left-color:var(--ok)}}
/* ticker */
.tick{display:flex;gap:14px;align-items:center;font-size:30px;font-weight:750}
/* shimmer card rows */
.sk2{position:relative;overflow:hidden}
.funnel{width:820px}.marq{width:980px}.vs{width:960px}.wipe{width:820px}
.land .marq{width:820px}.land .vs{width:820px}
.gauge .gl2{bottom:-150px}