:root{--canvas:#101016;--card:#181822;--card2:#1e1e2b;--line:rgba(255,255,255,.12);--text:#ececf8;--muted:#a3a3bb;--accent:#6d28d9;--accent-light:#9d6fe8;--accent-rgb:157,111,232;--accent-mid:#9d6fe8}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:radial-gradient(1100px 520px at 75% -160px,rgba(var(--accent-rgb),.26),transparent 70%) fixed,var(--canvas);color:var(--text);font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:1000px;margin:0 auto;padding:0 24px}
main.wrap{padding-bottom:64px}

/* head */
.hero{padding:44px 0 26px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--muted);margin-bottom:20px}
.logo{width:22px;height:22px;border-radius:7px;background:var(--accent)}
.ver{margin-left:4px;padding:2px 9px;border-radius:999px;border:1px solid rgba(var(--accent-rgb),.55);color:var(--accent-light);font-size:12px;font-weight:700}
h1{font-size:34px;line-height:1.15;margin:0 0 12px;font-weight:700;letter-spacing:-.01em;max-width:780px;text-wrap:balance}
.intro{color:var(--muted);margin:0 0 22px;font-size:16px;max-width:680px}
.toc{display:flex;flex-wrap:wrap;gap:8px}
.toc a{color:var(--text);text-decoration:none;font:600 13px system-ui,sans-serif;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);transition:background .15s,border-color .15s}
.toc a:hover{border-color:rgba(var(--accent-rgb),.7);background:rgba(var(--accent-rgb),.16)}

/* part headings */
.part{display:flex;align-items:center;gap:12px;margin:30px 0 16px;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700}
.part::after{content:"";flex:1;height:1px;background:var(--line)}
.badge{padding:3px 10px;border-radius:999px;background:var(--accent);color:#fff;letter-spacing:.06em;font-size:11px}

/* feature rows */
.feat{display:grid;grid-template-columns:1fr 1.05fr;gap:34px;align-items:center;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid var(--line);border-radius:20px;padding:30px 32px;margin-bottom:18px;scroll-margin-top:16px}
.feat.flip .txt{order:2}
.feat h3{margin:0 0 8px;font-size:21px;line-height:1.25}
.feat p{margin:0 0 12px;color:var(--muted)}
.how{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px;counter-reset:h}
.how li{counter-increment:h;position:relative;padding-left:34px;color:var(--text);font-size:14px}
.how li::before{content:counter(h);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:rgba(var(--accent-rgb),.22);color:var(--accent-light);font:700 12px/24px system-ui;text-align:center}
.ill{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:150px;min-width:0}
.cap{margin:18px 0 0;font-size:12.5px;color:var(--muted);text-align:center}

/* illustration 1: the panel is dragged to an edge and tucks in */
.win{position:relative;width:100%;max-width:380px;height:218px;border-radius:12px;background:#0c0c12;border:1px solid var(--line);overflow:hidden}
.win-bar{height:22px;background:#171722;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:5px;padding:0 9px}
.win-bar i{width:7px;height:7px;border-radius:50%;background:#3a3a4c}
.win-page{padding:16px 24px 0 18px;display:grid;gap:9px}
.win-page b{height:8px;border-radius:4px;background:#23232f;width:70%}.win-page b.s{width:40%}
.edge{position:absolute;top:22px;right:0;bottom:0;width:46px;background:linear-gradient(270deg,rgba(var(--accent-rgb),.6),transparent);border-right:3px solid var(--accent-light);opacity:0;animation:dockEdge 7s ease-in-out infinite}
.card-mock{position:absolute;top:56px;left:calc(50% - 58px);width:116px;height:132px;border-radius:12px;background:#13131a;border:1px solid rgba(var(--accent-rgb),.7);box-shadow:0 10px 28px rgba(0,0,0,.6);overflow:hidden;animation:dockMove 7s ease-in-out infinite}
.cm-head{height:24px;background:#1c1c28;display:flex;align-items:center;padding:0 10px}.cm-head span{width:46px;height:6px;border-radius:3px;background:var(--accent-light)}
.cm-body{padding:12px 10px;display:grid;gap:8px}.cm-body b{height:9px;border-radius:5px;background:#262634}.cm-body b:nth-child(2){width:70%}
.cm-strip{position:absolute;inset:0;background:#0d1117;display:grid;place-items:center;color:var(--accent-light);font:700 10px ui-monospace,monospace;opacity:0;animation:dockStrip 7s ease-in-out infinite}
@keyframes dockMove{
  0%,14%{left:calc(50% - 58px);width:116px}
  38%,52%{left:calc(100% - 126px);width:116px}
  62%,86%{left:calc(100% - 34px);width:34px}
  100%{left:calc(50% - 58px);width:116px}}
@keyframes dockEdge{0%,24%{opacity:0}40%,52%{opacity:1}60%,100%{opacity:0}}
@keyframes dockStrip{0%,56%{opacity:0}64%,86%{opacity:1}96%,100%{opacity:0}}

/* illustration 2: the strip */
.strip{--p:0;position:relative;display:flex;align-items:center;gap:10px;width:100%;max-width:380px;height:44px;padding:0 12px 11px;border:1px solid rgba(var(--accent-rgb),.75);border-top:0;border-radius:0 0 12px 12px;background:#0d1117;color:#8b949e;font:600 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace}
.s-icon,.s-label{position:relative;display:inline-block}
.s-icon{width:12px;text-align:center;color:var(--accent-light);flex:0 0 auto}
.s-label{flex:1 1 auto;height:12px;min-width:0}
.s-icon .a,.s-icon .b,.s-label .a,.s-label .b{position:absolute;left:0;top:0;white-space:nowrap;animation-duration:6s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.s-icon .a,.s-label .a{animation-name:wnWriting;color:#e6edf3}.s-icon .b,.s-label .b{animation-name:wnReady;opacity:0;color:#fff;text-shadow:0 0 6px rgba(255,255,255,.8)}
.s-icon .a{color:var(--accent-light)}
.s-show{flex:0 0 auto;padding:5px 14px;border-radius:8px;font:600 12.5px system-ui,sans-serif;background:rgba(var(--accent-rgb),.16);border:1px solid rgba(var(--accent-rgb),.7);color:var(--accent-light);animation:wnShow 6s ease-in-out infinite}
.s-bar{position:absolute;left:0;right:0;bottom:0;height:7px}
.s-bar::before,.s-fill::after{content:"";position:absolute;inset:0;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-size:5% 100%;mask-size:5% 100%;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2px),transparent 0);mask-image:linear-gradient(to right,#000 calc(100% - 2px),transparent 0)}
.s-bar::before{background:#21262d}
.s-fill{position:absolute;inset:0;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px rgba(255,255,255,.85))}
.s-fill::after{background:#fff;clip-path:inset(0 100% 0 0);animation:wnFill 6s steps(20,end) infinite}
@keyframes wnFill{0%{clip-path:inset(0 100% 0 0)}72%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes wnWriting{0%,70%{opacity:1}76%,94%{opacity:0}100%{opacity:1}}
@keyframes wnReady{0%,70%{opacity:0}76%,94%{opacity:1}100%{opacity:0}}
@keyframes wnShow{0%,70%{opacity:.4;background:rgba(var(--accent-rgb),.16);color:var(--accent-light)}78%,94%{opacity:1;background:var(--accent-mid);color:#fff}100%{opacity:.4}}

/* illustration 3: devices */
.devs{display:flex;align-items:flex-end;justify-content:center;gap:22px;flex-wrap:wrap}
.dev{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;animation:devGlow 6s infinite}
.dev .scr{border:2px solid #3a3a4c;border-radius:9px;background:#f8f2e8;padding:8px;display:grid;gap:6px;align-content:start;box-shadow:0 8px 20px rgba(0,0,0,.45)}
.dev .scr b{height:6px;border-radius:3px;background:#d8c9ad}.dev .scr b.s{width:55%;background:#c9a86a}
.d1 .scr{width:150px;height:92px}.d2 .scr{width:80px;height:106px}.d3 .scr{width:48px;height:92px;border-radius:12px}
.dev figcaption{font:600 12px system-ui,sans-serif;color:var(--muted)}
.d2{animation-delay:-4s}.d3{animation-delay:-2s}
@keyframes devGlow{0%,28%{filter:drop-shadow(0 0 0 transparent)}8%,20%{filter:drop-shadow(0 0 10px rgba(var(--accent-rgb),.9))}}
.dev:hover{filter:drop-shadow(0 0 10px rgba(var(--accent-rgb),.9))}

/* illustration 4: palette */
.pal{display:flex;gap:8px;align-items:stretch;justify-content:center;flex-wrap:nowrap}
.pal .col{display:flex;flex-direction:column;gap:7px}
.pal .col i{display:block;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.pal .rb{width:22px;border-radius:11px;background:linear-gradient(180deg,#ef4444,#f59e0b,#facc15,#22c55e,#06b6d4,#3b82f6,#8b5cf6,#ec4899);position:relative}
.pal .rb::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid #fff;background:var(--accent-light);box-shadow:0 0 0 1px rgba(0,0,0,.45)}

/* the rest as a grid of cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px}
.mini{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;display:flex;gap:14px;align-items:flex-start}
.mini .ico{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:rgba(var(--accent-rgb),.18);display:grid;place-items:center;color:var(--accent-light)}
.mini .ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mini h4{margin:0 0 4px;font-size:15.5px}
.mini p{margin:0;color:var(--muted);font-size:14px}
.mini a{display:inline-block;margin-top:8px;color:var(--accent-light);font-weight:700;text-decoration:none;font-size:14px}
.mini a:hover{text-decoration:underline}

.note{margin:22px 0 0;padding:12px 16px;border-radius:12px;background:rgba(233,184,74,.1);border:1px solid rgba(233,184,74,.35);color:#f0d9a0;font-size:14px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.btn{background:var(--card);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:11px 20px;font:600 14px system-ui,sans-serif;cursor:pointer}
.btn:hover{border-color:rgba(255,255,255,.3)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.privacy{color:var(--muted);font-size:13px;margin-top:22px}

@media (max-width:820px){
  .feat{grid-template-columns:1fr;gap:20px;padding:22px 20px}
  .feat.flip .txt{order:0}
  h1{font-size:27px}
}
@media (prefers-reduced-motion:reduce){
  .card-mock,.edge,.cm-strip,.s-fill::after,.s-icon .a,.s-icon .b,.s-label .a,.s-label .b,.s-show,.dev{animation:none}
  .card-mock{left:calc(100% - 34px);width:34px}.cm-strip{opacity:1}.s-fill::after{clip-path:inset(0 0 0 0)}.s-label .b,.s-icon .b{opacity:1}.s-label .a,.s-icon .a{opacity:0}
}

/* in detail */
.feat.wide{display:block}
.feat.wide .txt{margin-bottom:6px}
.grp{margin:18px 0 10px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.fmt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.fmt{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;transition:border-color .15s,transform .15s}
.fmt:hover{border-color:rgba(var(--accent-rgb),.6);transform:translateY(-1px)}
.fmt .ico{flex:0 0 auto;width:36px;height:36px;border-radius:10px;background:rgba(var(--accent-rgb),.18);display:grid;place-items:center;color:var(--accent-light)}
.fmt .ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fmt b{display:block;font-size:14.5px;margin-bottom:2px}
.fmt .d{display:block;color:var(--muted);font-size:13px}
.scope-note{margin:16px 0 0;font-size:13.5px;color:var(--muted)}
.scope-note b{color:var(--text)}

/* code viewer mock */
.frow-mock{display:flex;align-items:center;gap:10px;width:100%;max-width:400px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:8px 12px;font:12.5px ui-monospace,Consolas,monospace;margin-bottom:12px}
.frow-mock .cb{width:14px;height:14px;border-radius:4px;background:var(--accent);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.frow-mock .fn{flex:1;color:var(--text)}.frow-mock .bd{padding:1px 7px;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:11px}.frow-mock .sz{color:var(--muted);font-size:11.5px}
.frow-mock .vb{padding:3px 8px;border-radius:7px;border:1px solid rgba(var(--accent-rgb),.7);color:var(--accent-light);font-weight:700;animation:vbPulse 2.4s ease-in-out infinite}
@keyframes vbPulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.6)}50%{box-shadow:0 0 0 6px rgba(var(--accent-rgb),0)}}
.vw-mock{width:100%;max-width:400px;background:#0c0c12;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.5)}
.vw-head{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#171722;border-bottom:1px solid var(--line);font:600 12px ui-monospace,Consolas,monospace}
.vw-t{flex:1;color:var(--text)}.vw-badge{padding:1px 7px;border-radius:6px;background:rgba(var(--accent-rgb),.2);color:var(--accent-light);font-size:11px}.vw-x{color:var(--muted)}
.vw-pre{margin:0;padding:10px 0;counter-reset:l;font:12.3px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;color:#d6d6e6;overflow:hidden}
.vw-pre .ln{display:block;counter-increment:l;padding:0 14px 0 0;white-space:pre}
.vw-pre .ln::before{content:counter(l);display:inline-block;width:34px;margin-right:12px;text-align:right;color:#55556e}
.vw-pre .ln:nth-child(5){background:rgba(var(--accent-rgb),.12);animation:lnHl 4s ease-in-out infinite}
@keyframes lnHl{0%,100%{background:rgba(var(--accent-rgb),.05)}50%{background:rgba(var(--accent-rgb),.22)}}
.vw-pre i{font-style:normal}.vw-pre .k{color:#c084fc}.vw-pre .f{color:#7dd3fc}.vw-pre .s{color:#86efac}.vw-pre .n{color:#fbbf24}.vw-pre .c{color:#6b7280}
@media (prefers-reduced-motion:reduce){.frow-mock .vb,.vw-pre .ln:nth-child(5){animation:none}}

/* live preview mock: the Show page with its Desktop / Tablet / Mobile switch */
.sm{width:100%;max-width:410px;background:#0c0c12;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.5)}
.sm-bar{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#1b1b27;border-bottom:1px solid var(--line)}
.sm-name{flex:1;font:600 12.5px ui-monospace,Consolas,monospace;color:var(--text)}
.sm-dev{display:inline-flex;gap:2px;padding:3px;border:1px solid rgba(var(--accent-rgb),.7);border-radius:10px;background:#12121a}
.sm-b{padding:5px 11px;border-radius:7px;font:600 12px system-ui,sans-serif;color:#d6d6ea;animation-duration:7.5s;animation-iteration-count:infinite}
.sm-b.b1{animation-name:smB1}.sm-b.b2{animation-name:smB2}.sm-b.b3{animation-name:smB3}
@keyframes smB1{0%,30%{background:var(--accent);color:#fff}34%,100%{background:none;color:#d6d6ea}}
@keyframes smB2{0%,30%{background:none;color:#d6d6ea}34%,63%{background:var(--accent);color:#fff}67%,100%{background:none;color:#d6d6ea}}
@keyframes smB3{0%,63%{background:none;color:#d6d6ea}67%,96%{background:var(--accent);color:#fff}100%{background:none;color:#d6d6ea}}
.sm-stage{height:190px;background:#0b0b10;display:flex;justify-content:center;overflow:hidden}
.sm-frame{width:100%;background:#f8f2e8;padding:12px;display:grid;gap:10px;align-content:start;animation:smW 7.5s ease-in-out infinite}
@keyframes smW{0%,30%{width:100%}38%,63%{width:62%}71%,96%{width:30%}100%{width:100%}}
.sm-hero{height:62px;border-radius:8px;background:linear-gradient(135deg,#3a2616,#7a4a22);position:relative}
.sm-hero b{position:absolute;left:12px;top:14px;width:46%;height:9px;border-radius:5px;background:#fbe8c8}.sm-hero i{position:absolute;left:12px;top:34px;width:26%;height:12px;border-radius:7px;background:#f0b45a}
.sm-cards{display:flex;gap:8px;flex-wrap:wrap}
.sm-cards u{flex:1 1 60px;height:42px;border-radius:8px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.12)}
@media (prefers-reduced-motion:reduce){.sm-b,.sm-frame{animation:none}.sm-b.b1{background:var(--accent);color:#fff}}

/* export: animated flow + cards that say what each format is good for */
.flow{display:flex;align-items:center;gap:14px;margin:14px 0 6px;flex-wrap:wrap}
.flow-src{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;background:rgba(var(--accent-rgb),.16);border:1px solid rgba(var(--accent-rgb),.6);font:700 13px system-ui,sans-serif;color:var(--text)}
.flow-src svg{width:20px;height:20px;fill:none;stroke:var(--accent-light);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.flow-line{flex:1 1 60px;min-width:48px;height:2px;position:relative;background:repeating-linear-gradient(90deg,var(--accent-light) 0 7px,transparent 7px 14px);background-size:14px 2px;animation:flowDash .7s linear infinite;opacity:.8}
.flow-line::after{content:"";position:absolute;right:-2px;top:-4px;border-left:8px solid var(--accent-light);border-top:5px solid transparent;border-bottom:5px solid transparent}
@keyframes flowDash{from{background-position:0 0}to{background-position:14px 0}}
.flow-chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:6px 12px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.03);font:600 12.5px ui-monospace,Consolas,monospace;color:var(--muted);animation:chipOn 10.5s ease-in-out infinite;animation-delay:calc((var(--i) - 7) * 1.5s)}
@keyframes chipOn{0%,2%{transform:scale(1)}5%,12%{transform:scale(1.08);border-color:var(--accent-light);color:#fff;background:rgba(var(--accent-rgb),.34);box-shadow:0 0 14px rgba(var(--accent-rgb),.6)}15%,100%{transform:scale(1);border-color:var(--line);color:var(--muted);background:rgba(255,255,255,.03);box-shadow:none}}

/* export formats as a honeycomb: every cell is a hexagon, the second row sits half a cell to the side */
.feat.wide .hive{margin-left:-22px;margin-right:-22px}
.hive{container-type:inline-size;gap:0;display:grid;grid-template-columns:repeat(6,1fr);margin:6px 0 4px}
.fmt{position:relative;grid-column:span 2;height:38.49cqw;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:13% 12%;text-align:center;background:none;border:0;border-radius:0;transition:none;filter:drop-shadow(0 0 0 transparent);animation:fmtOn 10.5s ease-in-out infinite;animation-delay:calc((var(--i) - 7) * 1.5s)}
.fmt::before,.fmt::after{content:"";position:absolute;z-index:0;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.fmt::before{inset:3px;background:var(--line);animation:fmtEdge 10.5s ease-in-out infinite;animation-delay:calc((var(--i) - 7) * 1.5s)}
.fmt::after{inset:5px;background:var(--card)}
.fmt>*{position:relative;z-index:1}
.fmt:hover{transform:none;animation-play-state:paused;border:0;filter:drop-shadow(0 6px 18px rgba(var(--accent-rgb),.45))}
.fmt:hover::before{animation-play-state:paused;background:rgba(var(--accent-rgb),.85)}
@keyframes fmtOn{0%,2%{filter:drop-shadow(0 0 0 transparent)}5%,12%{filter:drop-shadow(0 6px 18px rgba(var(--accent-rgb),.5))}15%,100%{filter:drop-shadow(0 0 0 transparent)}}
@keyframes fmtEdge{0%,2%{background:var(--line)}5%,12%{background:rgba(var(--accent-rgb),.9)}15%,100%{background:var(--line)}}
.fmt .fh{display:flex;flex-direction:column;align-items:center;gap:7px}
.fmt .fh b{margin:0;font-size:16.5px;line-height:1.25}
.fmt p{margin:0}
.fmt .d{color:var(--text);font-size:14.3px;line-height:1.42}
.fmt .best{display:block;padding-top:7px;border-top:1px dashed var(--line);font-size:13.2px;line-height:1.38;color:var(--muted)}
.fmt .best em{display:block;font-style:normal;font-weight:700;color:var(--accent-light);letter-spacing:.02em}
.fmt .best em::before{content:"\2605";margin-right:5px}
/* the files group has two cells: centred; the chat group has five: three, then two tucked in between */
#expFiles .fmt:nth-child(1){grid-column:2/span 2}
#expChat .fmt:nth-child(4){grid-column:2/span 2}
#expChat .fmt:nth-child(n+4){margin-top:-9.62cqw}
#expFiles+.files-note{margin-top:14px}
.feat .files-note{margin:14px auto 0;max-width:640px;text-align:center;font-size:14.2px;line-height:1.55;color:var(--muted)}
.files-note b{color:var(--text)}
@media (max-width:760px){
  .hive{grid-template-columns:1fr}
  .feat.wide .hive{margin-left:0;margin-right:0}
  .fmt,#expFiles .fmt:nth-child(1),#expChat .fmt:nth-child(4){grid-column:1;width:min(100%,360px);height:calc(min(100cqw,360px) * 1.1547)}
  .fmt{justify-self:center}
  .fmt:nth-child(n+2),#expChat .fmt:nth-child(n+4){margin-top:-3%}
}
@media (prefers-reduced-motion:reduce){.chip,.fmt,.fmt::before,.flow-line{animation:none}}

/* ─── everyday tools: small animated scenes ─── */
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:16px}
.tool{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid var(--line);border-radius:18px;padding:16px 18px 20px;min-width:0}
.tool .tt{margin:14px 0 6px;font-size:17.5px;line-height:1.3}
.tool .td{margin:0;color:var(--muted);font-size:14px}
.scene{--c1:var(--accent-light);position:relative;display:flex;gap:14px;align-items:flex-start;height:196px;padding:12px;border-radius:13px;background:#0c0c12;border:1px solid var(--line);overflow:hidden}
.pm{position:relative;flex:0 0 172px;background:#13131a;border:1px solid rgba(var(--accent-rgb),.55);border-radius:11px;overflow:visible;font:600 10.5px system-ui,sans-serif;color:#cfcfe6}
.pm-h{height:26px;display:flex;align-items:center;justify-content:space-between;padding:0 9px;background:#1c1c28;border-radius:10px 10px 0 0;font-size:10.5px;color:#ddddf0}
.pm-h i{font-style:normal;font-size:12px;color:#8a8aa6}
.pm-row{height:26px;display:flex;align-items:center;gap:6px;padding:0 8px}
.dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:#888}.dot.a{background:#e8704a}.dot.b{background:#4a8bf0}.dot.c{background:#f0c24a}
.pm-b{flex:1;min-width:0;height:18px;line-height:18px;padding:0 7px;border-radius:5px;background:#1d1d29;border:1px solid rgba(255,255,255,.08);font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}
.pm-j{width:20px;height:18px;line-height:18px;text-align:center;border-radius:5px;background:#1d1d29;border:1px solid rgba(255,255,255,.08);font-size:10px;color:#a8a8c4}
.pm-foot{margin:4px 8px 0;text-align:center;font-size:9px;color:var(--accent-light);padding:3px 0}
.pm-modes{display:flex;gap:4px;padding:3px 8px}.pm-modes span{flex:1;text-align:center;padding:3px 0;border-radius:5px;background:#1a1a24;font-size:9px;color:#8a8aa6}.pm-modes .on{background:rgba(var(--accent-rgb),.28);color:#fff}
.pm-dl{position:relative;margin:3px 8px 8px;height:24px;border-radius:7px;background:var(--accent);color:#fff;font-size:9.5px;overflow:hidden}
.pm-dl span{position:absolute;inset:0;display:grid;place-items:center;white-space:nowrap}
.ck{width:12px;height:12px;border-radius:3px;border:1px solid rgba(255,255,255,.3);background:var(--accent);position:relative;flex:0 0 auto}
.ck::after{content:"";position:absolute;left:3px;top:0;width:3px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.chat{flex:1;min-width:0;height:100%;overflow:hidden;border-radius:9px;background:#111118;border:1px solid var(--line)}
.chat-in{padding:9px;display:grid;gap:9px}
.cb{background:#0a0a10;border:1px solid rgba(255,255,255,.07);border-radius:7px;padding:9px 9px;display:grid;gap:6px;height:54px;align-content:center}
.cb b{height:5px;border-radius:3px;background:#2a2a3a}.cb b:nth-child(2){width:72%}.cb b:nth-child(3){width:48%}
.cur{position:absolute;left:30px;top:150px;width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 0 0 4px rgba(255,255,255,.2),0 2px 8px rgba(0,0,0,.6);z-index:5;pointer-events:none;animation:curGo 7s ease-in-out infinite}
@keyframes curGo{0%,10%{left:34px;top:150px;transform:scale(1)}26%{left:var(--x);top:var(--y);transform:scale(1)}30%{transform:scale(.7)}34%{transform:scale(1)}40%,58%{left:var(--x);top:var(--y)}78%,100%{left:34px;top:150px;transform:scale(1)}}

/* 1 jump */
.sc-jump .chat-in{animation:jScroll 7s ease-in-out infinite}
@keyframes jScroll{0%,30%{transform:translateY(0)}44%,84%{transform:translateY(-126px)}96%,100%{transform:translateY(0)}}
.sc-jump .c3{animation:jFlash 7s ease-in-out infinite}
@keyframes jFlash{0%,34%{background:#0a0a10;border-color:rgba(255,255,255,.07)}40%,52%{background:rgba(187,134,252,.28);border-color:#bb86fc}62%,100%{background:#0a0a10;border-color:rgba(255,255,255,.07)}}
.sc-jump .j3{animation:jPress 7s infinite}
@keyframes jPress{0%,28%{background:#1d1d29;color:#a8a8c4}32%,44%{background:var(--accent);color:#fff}50%,100%{background:#1d1d29;color:#a8a8c4}}

/* 2 zip */
.sc-zip .cur{animation-name:curZip}
@keyframes curZip{0%,8%{left:34px;top:150px;transform:scale(1)}20%{left:14px;top:91px;transform:scale(1)}24%{transform:scale(.7)}28%{transform:scale(1)}44%{left:100px;top:150px;transform:scale(1)}48%{transform:scale(.7)}52%{transform:scale(1)}62%,100%{left:100px;top:150px}}
.sc-zip .k3{animation:zUntick 7s infinite}
@keyframes zUntick{0%,23%{background:var(--accent);border-color:rgba(255,255,255,.3)}24%,96%{background:transparent;border-color:rgba(255,255,255,.4)}100%{background:var(--accent)}}
.sc-zip .k3::after{animation:zMark 7s infinite}
@keyframes zMark{0%,23%{opacity:1}24%,96%{opacity:0}100%{opacity:1}}
.sc-zip .l1{animation:zL1 7s infinite}.sc-zip .l2{animation:zL2 7s infinite;opacity:0}
@keyframes zL1{0%,23%{opacity:1}24%,96%{opacity:0}100%{opacity:1}}@keyframes zL2{0%,23%{opacity:0}24%,96%{opacity:1}100%{opacity:0}}
.sc-zip .tray{position:absolute;right:16px;bottom:16px;display:flex;flex-direction:column;align-items:center;gap:4px;color:#8a8aa6;font:600 10.5px system-ui,sans-serif;animation:zTray 7s infinite}
.sc-zip .tray svg{width:46px;height:46px;fill:rgba(var(--accent-rgb),.18);stroke:var(--accent-light);stroke-width:1.5;stroke-linejoin:round}
@keyframes zTray{0%,66%{transform:scale(1)}74%,82%{transform:scale(1.14)}92%,100%{transform:scale(1)}}
.sc-zip .zipf{position:absolute;left:100px;top:152px;padding:4px 9px;border-radius:6px;background:var(--accent-light);color:#0d0d14;font:800 11px ui-monospace,monospace;opacity:0;animation:zFly 7s ease-in-out infinite}
@keyframes zFly{0%,50%{opacity:0;left:100px;top:152px}53%{opacity:1;left:100px;top:152px}70%{opacity:1;left:290px;top:128px}74%,100%{opacity:0;left:300px;top:130px}}

/* 3 copy */
.sc-copy .cur{animation-name:curCopy}
@keyframes curCopy{0%,10%{left:34px;top:150px;transform:scale(1)}26%{left:96px;top:41px;transform:scale(1)}30%{transform:scale(.7)}34%{transform:scale(1)}40%,100%{left:96px;top:41px}}
.sc-copy .copyb .l1,.sc-copy .copyb .l2{position:absolute;inset:0;padding:0 7px}
.sc-copy .l1{animation:cL1 7s infinite}.sc-copy .l2{animation:cL2 7s infinite;opacity:0;color:#86efac;font-weight:700}
@keyframes cL1{0%,30%{opacity:1}31%,76%{opacity:0}80%,100%{opacity:1}}@keyframes cL2{0%,30%{opacity:0}31%,76%{opacity:1}80%,100%{opacity:0}}
.sc-copy .copyb{animation:cBtn 7s infinite}
@keyframes cBtn{0%,30%{border-color:rgba(255,255,255,.08)}31%,76%{border-color:#86efac;box-shadow:0 0 10px rgba(134,239,172,.4)}80%,100%{border-color:rgba(255,255,255,.08);box-shadow:none}}
.paste{flex:1;min-width:0;height:128px;border-radius:9px;background:#111118;border:1px dashed rgba(var(--accent-rgb),.55);padding:8px 10px}
.paste-h{font:700 10px ui-monospace,monospace;color:var(--accent-light);margin-bottom:8px}
.pl{display:grid;gap:7px}.pl b{height:6px;border-radius:3px;background:#d6d6e6;width:0;animation:pLine 7s ease-out infinite}
.pl b:nth-child(1){animation-delay:0s}.pl b:nth-child(2){animation-delay:.25s}.pl b:nth-child(3){animation-delay:.5s}.pl b:nth-child(4){animation-delay:.75s}
@keyframes pLine{0%,40%{width:0}52%,88%{width:var(--w)}96%,100%{width:0}}

/* 4 refresh */
.sc-ref .cur{animation-name:curRef}
@keyframes curRef{0%,38%{left:34px;top:150px;transform:scale(1)}52%{left:151px;top:12px;transform:scale(1)}56%{transform:scale(.7)}60%{transform:scale(1)}66%,100%{left:151px;top:12px}}
.sc-ref .pm-ref{animation:rSpin 7s ease-in-out infinite}
@keyframes rSpin{0%,55%{transform:rotate(0);color:#8a8aa6}58%{color:var(--accent-light)}72%,100%{transform:rotate(360deg);color:#8a8aa6}}
.sc-ref .newrow{overflow:hidden;animation:rRow 7s ease-in-out infinite}
@keyframes rRow{0%,62%{height:0;opacity:0}74%,92%{height:26px;opacity:1;background:rgba(var(--accent-rgb),.16)}100%{height:0;opacity:0}}
.sc-ref .newb{animation:rNew 7s ease-in-out infinite}
@keyframes rNew{0%,14%{opacity:0;transform:translateY(16px)}24%,92%{opacity:1;transform:none}100%{opacity:0}}

/* 5 setup instructions */
.sc-set .cur{animation-name:curSet}
@keyframes curSet{0%,8%{left:34px;top:150px;transform:scale(1)}18%{left:132px;top:12px;transform:scale(1)}22%{transform:scale(.7)}26%{transform:scale(1)}34%{left:66px;top:118px}38%{transform:scale(.7)}42%{transform:scale(1)}56%,100%{left:66px;top:118px}}
.sc-set .pm-info{width:15px;height:15px;line-height:15px;text-align:center;border-radius:50%;border:1px solid var(--accent-light);color:var(--accent-light);animation:sPulse 7s infinite}
@keyframes sPulse{0%,10%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.7)}20%{box-shadow:0 0 0 7px rgba(var(--accent-rgb),0)}100%{box-shadow:none}}
.fly{position:absolute;left:8px;right:-18px;top:30px;padding:9px 10px;border-radius:10px;background:#181822;border:1px solid rgba(var(--accent-rgb),.55);box-shadow:0 12px 28px rgba(0,0,0,.6);z-index:3;opacity:0;transform:translateY(-6px);font-size:9.5px;color:#ddddf0;animation:sFly 7s ease-in-out infinite}
@keyframes sFly{0%,16%{opacity:0;transform:translateY(-6px)}22%,70%{opacity:1;transform:none}78%,100%{opacity:0;transform:translateY(-6px)}}
.fly b{display:block;margin-bottom:6px}
.pbox{display:grid;gap:4px;padding:6px;border-radius:5px;background:#0e0e16;margin-bottom:7px}.pbox u{height:4px;border-radius:2px;background:#f28b82;opacity:.8;text-decoration:none}.pbox u:nth-child(2){width:86%}.pbox u:nth-child(3){width:58%}
.cbtn{position:relative;height:19px;border-radius:6px;background:#23232f;border:1px solid rgba(255,255,255,.1);font-size:9px}.cbtn span{position:absolute;inset:0;display:grid;place-items:center}
.sc-set .l1{animation:cL1 7s infinite}.sc-set .l2{opacity:0;color:#86efac;animation:sL2 7s infinite}
@keyframes sL2{0%,40%{opacity:0}42%,70%{opacity:1}78%,100%{opacity:0}}
.sc-set .l1{animation-name:sL1}@keyframes sL1{0%,40%{opacity:1}42%,70%{opacity:0}78%,100%{opacity:1}}
.ci{flex:1;min-width:0;height:128px;border-radius:9px;background:#111118;border:1px solid var(--line);padding:8px 10px;font:600 10px system-ui,sans-serif;color:#9a9ab4}
.ci-h{margin-bottom:8px}.ci-t{display:grid;gap:5px;padding:7px;border-radius:5px;background:#0a0a10}.ci-t u{height:4px;border-radius:2px;background:#d6d6e6;opacity:0;animation:ciLine 7s ease-out infinite}
.ci-t u:nth-child(1){animation-delay:0s;width:90%}.ci-t u:nth-child(2){animation-delay:.2s;width:78%}.ci-t u:nth-child(3){animation-delay:.4s;width:50%}
@keyframes ciLine{0%,50%{opacity:0}60%,92%{opacity:.9}100%{opacity:0}}
.ci-ok{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;align-items:center;opacity:0;animation:ciOk 7s ease-out infinite}.ci-ok i{width:11px;height:11px;border-radius:50%;background:#22c55e}
.ci-ok span{padding:2px 6px;border-radius:5px;background:rgba(var(--accent-rgb),.2);color:#e6e6f6;font:600 9px ui-monospace,monospace}
@keyframes ciOk{0%,64%{opacity:0}74%,92%{opacity:1}100%{opacity:0}}

/* 6 save location */
.sc-save .cur{animation-name:curSave}
@keyframes curSave{0%,8%{left:34px;top:150px;transform:scale(1)}16%{left:114px;top:12px;transform:scale(1)}20%{transform:scale(.7)}24%{transform:scale(1)}30%,36%{left:70px;top:70px}52%,58%{left:70px;top:96px}74%,80%{left:70px;top:122px}96%,100%{left:34px;top:150px}}
.sc-save .pm-gear{animation:sPulse 7s infinite;border-radius:50%;width:16px;height:16px;line-height:16px;text-align:center}
.sc-save .fly{animation-name:sFlyLong}
@keyframes sFlyLong{0%,16%{opacity:0;transform:translateY(-6px)}22%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-6px)}}
.opt{margin-top:5px;padding:5px 8px;border-radius:6px;background:#0e0e16;border:1px solid rgba(255,255,255,.08);font-size:9.5px;color:#a8a8c4}
.sc-save .o1{animation:oSel1 7s infinite}.sc-save .o2{animation:oSel2 7s infinite}.sc-save .o3{animation:oSel3 7s infinite}
@keyframes oSel1{0%,28%{background:#0e0e16}32%,46%{background:rgba(var(--accent-rgb),.34);color:#fff;border-color:var(--accent-light)}50%,100%{background:#0e0e16}}
@keyframes oSel2{0%,48%{background:#0e0e16}52%,68%{background:rgba(var(--accent-rgb),.34);color:#fff;border-color:var(--accent-light)}72%,100%{background:#0e0e16}}
@keyframes oSel3{0%,70%{background:#0e0e16}74%,92%{background:rgba(var(--accent-rgb),.34);color:#fff;border-color:var(--accent-light)}96%,100%{background:#0e0e16}}
.res{position:relative;flex:1;min-width:0;height:128px}
.res .r{position:absolute;left:0;right:0;top:36px;display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:10px;background:#111118;border:1px solid rgba(var(--accent-rgb),.5);font:600 11px ui-monospace,monospace;color:#e6e6f6;opacity:0}
.res .r svg{width:24px;height:24px;flex:0 0 auto;fill:rgba(var(--accent-rgb),.18);stroke:var(--accent-light);stroke-width:1.5;stroke-linejoin:round}
.res .dlg{width:30px;height:22px;border-radius:4px;border:1px solid #8a8aa6;border-top-width:5px;flex:0 0 auto}
.sc-save .r1{animation:rv1 7s infinite}.sc-save .r2{animation:rv2 7s infinite}.sc-save .r3{animation:rv3 7s infinite}
@keyframes rv1{0%,30%{opacity:0}34%,46%{opacity:1}50%,100%{opacity:0}}
@keyframes rv2{0%,50%{opacity:0}54%,68%{opacity:1}72%,100%{opacity:0}}
@keyframes rv3{0%,72%{opacity:0}76%,92%{opacity:1}96%,100%{opacity:0}}

@media (max-width:520px){.tools{grid-template-columns:1fr}.scene{padding:10px;gap:10px}.pm{flex-basis:158px}.sc-zip .zipf{display:none}}
@media (prefers-reduced-motion:reduce){.cur,.scene *{animation:none!important}.sc-set .fly,.sc-save .fly{opacity:1;transform:none}.sc-copy .pl b{width:var(--w)}.ci-t u,.ci-ok{opacity:1}.res .r3{opacity:1}.sc-ref .newrow{height:26px;opacity:1}.sc-zip .l2,.sc-copy .l2,.sc-set .l2{opacity:0}.cur{display:none}}

/* ---- GetPlugzz page frame (web version) ---- */
.gpbar{position:sticky;top:0;z-index:20;background:rgba(16,16,22,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.gpbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px}
.gplogo{font:800 22px/1 'Syne',system-ui,sans-serif;color:#fff;text-decoration:none;letter-spacing:-.3px}.gplogo span{color:var(--accent-light)}
.gpnav{display:flex;align-items:center;gap:18px}.gpnav>a{color:var(--muted);text-decoration:none;font-weight:600;font-size:14px}.gpnav>a:hover{color:#fff}
.gplang{position:relative}.gplang-btn{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:6px 10px;font:700 12.5px system-ui,sans-serif;cursor:pointer}
.gplang-menu{display:none;position:absolute;right:0;top:36px;background:#181822;border:1px solid var(--line);border-radius:10px;padding:6px;min-width:64px;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.gplang.open .gplang-menu{display:block}.gplang-menu a{display:block;padding:6px 12px;color:var(--text);text-decoration:none;font-weight:700;font-size:13px;border-radius:6px}.gplang-menu a:hover{background:rgba(var(--accent-rgb),.25)}
.gpfoot{border-top:1px solid var(--line);padding:34px 0 46px;text-align:center}
.gpfoot-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}.gpfoot .btn{display:inline-block;text-decoration:none}
.gpfoot p{margin:0;color:var(--muted);font-size:13px}
.hero .brand .logo{background:var(--accent)}
@media (max-width:560px){.gpnav>a{display:none}}

/* ---- top "Add to Chrome" button ---- */
.hero-cta{margin:22px 0 18px}
.hero-cta a{display:inline-flex;align-items:center;gap:12px;padding:15px 30px;border-radius:999px;background:var(--accent);color:#fff;font:700 17px system-ui,sans-serif;text-decoration:none;box-shadow:0 10px 28px rgba(var(--accent-rgb),.45),0 0 0 1px rgba(255,255,255,.14) inset;transition:transform .15s,box-shadow .15s}
.hero-cta a:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(var(--accent-rgb),.6),0 0 0 1px rgba(255,255,255,.2) inset}
.hero-cta svg{width:22px;height:22px;flex:0 0 auto}
@media (max-width:560px){.hero-cta a{display:flex;justify-content:center;width:100%;box-sizing:border-box;font-size:16px;padding:14px 18px}}