/* The moving parts that came from the living document (26.10.2026): the story told on a stage, step by step, and the
   live map of the architecture with its flows. Everything is scoped under .sx so the page's own classes stay as they
   are; the class names that clash with page.css are renamed (diagram → mdg, node → mnode, phone → hphone, …).
   The words live in each page (window.STORY); story.js draws and moves the parts. */
.sx{
  --bg:#F5F2ED;--bg-2:#EDE8E0;--card:#ffffff;--card-2:#FBF9F6;--line:#e6dfd5;--line-strong:#8a8279;
  --ink:#2D2D2D;--ink-2:#57524c;--ink-3:#7d766d;
  --brand:#C87A54;--brand-soft:#f6e6dc;--on-brand:#ffffff;--on-c:#ffffff;
  --claude:#C87A54;--claude-ink:#a65c38;--claude-soft:#f6e6dc;
  --sys:#1e3a8a;--sys-ink:#1e3a8a;--sys-soft:#e8ecf7;
  --hum:#2f7d5b;--hum-ink:#256a4c;--hum-soft:#e3f1ea;
  --add:#0e8fa3;--add-ink:#0a6573;--add-soft:#e1f3f5;
  --urgent:#b3261e;
  --hero-a:#141414;--hero-b:#1e3a8a;--hero-c:#2a4aa8;--cyan:#8fa6e6;
  --shadow:0 1px 2px rgba(45,45,45,.05),0 10px 30px -18px rgba(45,45,45,.28);
  --shadow-lg:0 2px 4px rgba(45,45,45,.04),0 40px 80px -48px rgba(45,45,45,.5);
  --glass:rgba(251,249,246,.9);
  --dotc:rgba(45,45,45,.07);
  --s-bg1:#141312;--s-bg2:#1b1c22;--s-bg3:#1d2a4a;
  --s-ink:#f3efe9;--s-ink2:#b9b2a8;--s-card:rgba(255,255,255,.07);--s-card-solid:#24252c;--s-line:rgba(255,255,255,.16);
  --s-claude:#e7a07c;--s-claude-d:#C87A54;--s-sys:#9fb3ee;--s-hum:#7cc7a3;--s-add:#5fc9d8;--s-gap:#ff8f7a;--s-wait:#ffd27a;
  --s-on:#141312;--s-wa:#4fd18b;
  --ease:cubic-bezier(.22,.7,.2,1);
  font:400 16px/1.65 var(--sans);color:var(--ink);text-align:start;
}
.sx button{font:inherit;color:inherit}
.sx img{max-width:100%}
.sx .wrap.wide{max-width:1320px}
.sx .ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sx .c-claude{--c:var(--claude);--cs:var(--claude-soft);--ci:var(--claude-ink)}
.sx .c-sys{--c:var(--sys);--cs:var(--sys-soft);--ci:var(--sys-ink)}
.sx .c-hum{--c:var(--hum);--cs:var(--hum-soft);--ci:var(--hum-ink)}
.sx .c-add{--c:var(--add);--cs:var(--add-soft);--ci:var(--add-ink)}
.sx .story{padding-block:26px 30px}
.sx .intro{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:8px 40px;align-items:end;margin-bottom:20px}
.sx .intro .eyebrow{grid-column:1/-1}
.sx .intro h1{font:900 clamp(34px,4.6vw,56px)/1.05 var(--serif);color:var(--ink);letter-spacing:-.01em;text-wrap:balance}
.sx .intro h1 .c{color:var(--claude)}
.sx .intro .lead{font-size:clamp(16px,1.6vw,18px);line-height:1.7;color:var(--ink-2);max-width:62ch;padding-bottom:4px}
@media (max-width:900px){
.sx .intro{grid-template-columns:1fr}
}
.sx .theater{display:grid;gap:14px;grid-template-areas:"cap" "ctl" "stage"}
@media (min-width:1024px){
.sx .theater{grid-template-columns:320px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"cap stage" "ctl stage";column-gap:20px}
}
.sx .st-cap{grid-area:cap;min-width:0;display:grid;gap:10px;align-content:start}
.sx .st-ctl{grid-area:ctl;min-width:0;display:grid;gap:12px}
.sx .stage{grid-area:stage;min-width:0}
@media (min-width:1024px){
.sx .st-cap{background:var(--card);border:1px solid var(--line);border-radius:22px 22px 0 0;border-bottom:0;padding:22px 22px 8px}
.sx .st-ctl{background:var(--card);border:1px solid var(--line);border-top:0;border-radius:0 0 22px 22px;padding:8px 22px 22px}
}
.sx .st-k{font:600 13px/1.3 var(--sans);color:var(--claude-ink);font-variant-numeric:tabular-nums}
.sx .st-t{font:700 clamp(23px,2.5vw,29px)/1.2 var(--serif);color:var(--ink);text-wrap:balance}
.sx .st-x{font-size:16.5px;line-height:1.72;color:var(--ink-2)}
.sx .st-cap.swap .st-t,.sx .st-cap.swap .st-x{animation:sx-rise .5s var(--ease) both}
.sx .st-cap.swap .st-x{animation-delay:.06s}
@keyframes sx-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sx .st-rail{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
.sx .st-rail button{appearance:none;display:block;width:100%;padding:9px 0;border:0;background:none;cursor:pointer;border-radius:6px}
.sx .st-rail i{display:block;height:5px;border-radius:5px;background:var(--line);overflow:hidden;position:relative}
.sx .st-rail i::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,var(--cyan),var(--brand));transform:scaleX(var(--p,0));transform-origin:right center;transition:transform var(--pt,0s) linear}
.sx .st-rail button:hover i{background:var(--line-strong)}
.sx .st-btns{display:flex;gap:8px;align-items:center}
.sx .sbtn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;border-radius:14px;border:1px solid var(--line-strong);background:var(--card);color:var(--ink);font:600 15.5px/1 var(--sans);cursor:pointer;white-space:nowrap;transition:transform .2s var(--ease),background .2s}
.sx .sbtn:hover{transform:translateY(-1px)}
.sx .sbtn:disabled{opacity:.4;cursor:default;transform:none}
.sx .sbtn.main{flex:1;background:var(--brand);border-color:var(--brand);color:var(--on-brand);box-shadow:0 10px 22px -12px var(--brand)}
.sx .sbtn.ghost{border-color:var(--line);background:transparent;color:var(--ink-2)}
.sx .sbtn .i-pause{display:none}
.sx .sbtn.on .i-pause{display:block}
.sx .sbtn.on .i-play{display:none}
.sx .sbtn .i-play{fill:currentColor;stroke:none}
@media (max-width:760px){
.sx .st-k{display:none}
.sx .st-t{font-size:22px}
.sx .st-x{font-size:15.5px;line-height:1.65}
.sx .sbtn{min-height:44px;padding:0 13px;font-size:15px}
.sx .sbtn .lbl-auto{display:none}
}
.sx .stage{position:relative;height:560px;border-radius:26px;overflow:hidden;isolation:isolate;color:var(--s-ink);cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(46% 52% at 86% 16%,rgba(143,166,230,.20),transparent 70%),radial-gradient(44% 50% at 10% 92%,rgba(200,122,84,.22),transparent 72%),linear-gradient(160deg,var(--s-bg1) 0%,var(--s-bg2) 52%,var(--s-bg3) 100%);
  box-shadow:var(--shadow-lg),inset 0 0 0 1px rgba(255,255,255,.06)}
.sx .stage::before{content:"";position:absolute;inset:0;z-index:0;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.3px);background-size:22px 22px;pointer-events:none}
.sx .stage:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--brand)}
@media (max-width:760px){
.sx .stage{height:560px;border-radius:20px}
}
.sx .st-wires{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.sx .st-wl,.sx .st-pk{position:absolute;inset:0;pointer-events:none}
.sx .st-wl{z-index:3}
.sx .st-pk{z-index:5;overflow:hidden}
.sx .k-claude{--c:var(--s-claude)}
.sx .k-sys{--c:var(--s-sys)}
.sx .k-hum{--c:var(--s-hum)}
.sx .k-add{--c:var(--s-add)}
.sx .k-gap{--c:var(--s-gap)}
.sx .sn{position:absolute;left:var(--x,50%);top:var(--y,50%);transform:translate(-50%,-50%);z-index:2;width:max-content;transition:left .9s var(--ease),top .9s var(--ease)}
.sx .sn:not(.on){pointer-events:none}
.sx .sn-in{opacity:0;transform:scale(.86);transition:opacity .5s var(--ease) var(--dl,0s),transform .55s var(--ease) var(--dl,0s),filter .5s}
.sx .sn.on .sn-in{opacity:1;transform:none}
.sx .stage.focus .sn.on:not(.hot) .sn-in{opacity:.4;filter:saturate(.45)}
.sx .sn.ping .sn-in{animation:sx-sping .7s var(--ease)}
@keyframes sx-sping{35%{scale:1.06}100%{scale:1}}
.sx .sn-agent .sn-in{display:grid;justify-items:center;gap:5px;text-align:center}
.sx .disc{--d:72px;position:relative;width:var(--d);height:var(--d);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 34% 28%,#fff,#efe7dc 74%);box-shadow:0 0 0 6px rgba(231,160,124,.16),0 18px 40px -16px rgba(0,0,0,.7);transition:width .9s var(--ease),height .9s var(--ease),box-shadow .6s}
.sx .stage.solo #n-claude .disc{--d:132px}
.sx .stage.suited .disc{box-shadow:0 0 0 6px rgba(143,166,230,.2),0 18px 40px -16px rgba(0,0,0,.7)}
.sx .disc::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px solid rgba(231,160,124,.55);opacity:0;pointer-events:none}
.sx .stage.solo #n-claude .disc::after{animation:sx-ring 2.6s ease-out infinite}
@keyframes sx-ring{from{opacity:.9;transform:scale(.9)}to{opacity:0;transform:scale(1.28)}}
.sx .disc .spark{position:absolute;width:54%;height:54%;color:var(--s-claude-d);transition:opacity .5s,transform .6s var(--ease)}
.sx .disc img{position:absolute;inset:11%;width:78%;height:78%;object-fit:contain;opacity:0;transform:scale(.6) rotate(-10deg);transition:opacity .6s .1s,transform .8s .1s var(--ease)}
.sx .stage.suited .disc .spark{opacity:0;transform:scale(.5) rotate(40deg)}
.sx .stage.suited .disc img{opacity:1;transform:none}
.sx .sn-agent b{font:700 19px/1.15 var(--serif);color:#fff;transition:font-size .9s var(--ease)}
.sx .stage.solo #n-claude b{font-size:27px}
.sx .sn-agent .sub{font-size:13px;line-height:1.35;color:var(--s-ink2)}
.sx .sub.s-team{display:none}
.sx .stage:not(.solo) #n-claude .s-solo{display:none}
.sx .stage:not(.solo) #n-claude .s-team{display:block}
.sx .sk,.sx .sg{max-width:22%}
.sx .sk .sn-in{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 12px;border-radius:999px;background:rgba(231,160,124,.13);border:1px solid rgba(231,160,124,.4);color:#ffe7da;font:600 14.5px/1.3 var(--sans)}
.sx .sk .ic{width:18px;height:18px;color:var(--s-claude)}
.sx .sk.on .sn-in{animation:sx-bob 4.5s ease-in-out infinite;animation-delay:calc(var(--dl,0s) * 3)}
@keyframes sx-bob{50%{translate:0 -5px}}
.sx .sg .sn-in{display:flex;align-items:flex-start;gap:8px;padding:9px 13px 9px 11px;border-radius:15px;background:rgba(255,143,122,.11);border:1.5px dashed rgba(255,143,122,.62);color:#ffe2da;font:600 14.5px/1.4 var(--sans)}
.sx .sg .ic{width:18px;height:18px;margin-top:2px;color:var(--s-gap)}
.sx .sn-iso .sn-in{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:linear-gradient(rgba(255,143,122,.16),rgba(255,143,122,.16)),var(--s-card-solid);border:1.5px dashed var(--s-gap);color:#ffe2da;font:600 13.5px/1.2 var(--sans)}
.sx .sn-iso .ic{width:16px;height:16px;color:var(--s-gap)}
.sx .sn-server{z-index:3}
.sx .sn-server .sn-in{width:290px;padding:14px 14px 12px;border-radius:22px;background:linear-gradient(180deg,rgba(143,166,230,.2),rgba(14,36,92,.72));border:1px solid rgba(143,166,230,.55);box-shadow:0 0 0 7px rgba(143,166,230,.07),0 30px 60px -26px rgba(0,0,0,.8)}
.sx .srv-h{display:flex;align-items:center;gap:10px}
.sx .srv-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:linear-gradient(140deg,#8fa6e6,#1e3a8a);color:#fff;box-shadow:0 10px 20px -10px #8fa6e6}
.sx .srv-ic .ic{width:21px;height:21px;stroke-width:2}
.sx .srv-h b{display:block;font:700 21px/1.15 var(--serif);color:#fff}
.sx .srv-h div>span{display:block;font-size:12.5px;line-height:1.35;color:var(--s-ink2);white-space:nowrap}
.sx .srv-rows{list-style:none;margin:11px 0 0;padding:0;display:grid;gap:5px}
.sx .srv-rows li{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:10px;background:rgba(255,255,255,.05);font:500 13.5px/1.3 var(--sans);color:var(--s-ink2);transition:background .4s,color .4s,box-shadow .4s}
.sx .srv-rows .ic{width:16px;height:16px;color:var(--s-sys)}
.sx .srv-rows li.hot{background:rgba(143,166,230,.2);color:#fff;box-shadow:inset 0 0 0 1px rgba(143,166,230,.6)}
.sx .srv-rows em{margin-inline-start:auto;font:600 12px/1 var(--sans);font-style:normal;color:var(--s-sys);font-variant-numeric:tabular-nums;white-space:nowrap}
.sx .srv-rows em b{display:inline-block}
.sx .srv-rows em b.flip{animation:sx-flip .6s var(--ease)}
@keyframes sx-flip{0%{transform:translateY(-6px);opacity:0}100%{transform:none;opacity:1}}
.sx .sn-app .sn-in{display:grid;justify-items:center;gap:5px;text-align:center}
.sx .devices{position:relative;width:196px;height:118px}
.sx .laptop{position:absolute;left:0;bottom:0;width:146px}
.sx .lscr{height:90px;border-radius:9px 9px 3px 3px;background:#121212;border:4px solid #3a3835;padding:7px;display:grid;gap:5px;align-content:start}
.sx .lscr i{display:block;height:7px;border-radius:3px;background:rgba(255,255,255,.14)}
.sx .lscr i:nth-child(1){width:38%;background:rgba(143,166,230,.65)}
.sx .lscr i:nth-child(2){width:88%}
.sx .lscr i:nth-child(3){width:72%}
.sx .lscr i:nth-child(4){width:80%;background:rgba(98,208,162,.45)}
.sx .lscr i:nth-child(5){width:60%}
.sx .lbase{height:7px;margin-inline:-10px;border-radius:0 0 8px 8px;background:#3a3835}
.sx .mphone{position:absolute;right:0;bottom:-3px;width:60px;height:110px;border-radius:13px;background:#0d0d0d;padding:4px;box-shadow:0 14px 30px -12px rgba(0,0,0,.85),inset 0 0 0 1.5px rgba(255,255,255,.16)}
.sx .mscr{height:100%;border-radius:9px;background:#F5F2ED;color:#2D2D2D;padding:9px 5px 5px;display:grid;align-content:start;justify-items:stretch;gap:4px;font:600 7.5px/1.3 var(--sans);text-align:start;overflow:hidden}
.sx .mscr.swap>*{animation:sx-rise .4s var(--ease) both}
.sx .ma-h{font:700 8.5px/1.2 var(--sans);color:#2D2D2D}
.sx .ma-ok{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;justify-self:center;margin-top:10px;background:#e3f1ea;color:#256a4c}
.sx .ma-ok .ic{width:12px;height:12px;stroke-width:2.6}
.sx .ma-s{text-align:center;color:#57524c;font-weight:500}
.sx .ma-card{background:#fff;border:1px solid #e6dfd5;border-radius:6px;padding:4px;display:grid;gap:3px}
.sx .ma-k{justify-self:start;background:#f6e6dc;color:#a65c38;border-radius:99px;padding:1px 4px;font-size:6.5px}
.sx .ma-bs{display:grid;grid-template-columns:1.3fr 1fr;gap:2px}
.sx .ma-b{display:grid;place-items:center;height:12px;border-radius:4px;border:1px solid #8a8279;font-size:6.5px}
.sx .ma-b.main{background:#a65c38;border-color:#a65c38;color:#fff}
.sx .ma-b.wide{height:16px;margin-top:8px}
.sx .ma-b.press{animation:sx-press .5s var(--ease)}
@keyframes sx-press{40%{transform:scale(.88);box-shadow:0 0 0 4px rgba(98,208,162,.6)}100%{transform:none}}
.sx .ma-done{display:flex;align-items:center;gap:3px;background:#e3f1ea;color:#256a4c;border-radius:6px;padding:5px 4px}
.sx .ma-done .ic{width:10px;height:10px;stroke-width:2.8}
.sx .ma-dots{display:flex;gap:2px;justify-content:center;margin-top:4px}
.sx .ma-dots i{width:4px;height:4px;border-radius:50%;background:#1e3a8a;animation:sx-blink 1s infinite}
.sx .ma-dots i:nth-child(2){animation-delay:.2s}
.sx .ma-dots i:nth-child(3){animation-delay:.4s}
@keyframes sx-blink{50%{opacity:.25}}
.sx .sn-app b,.sx .st-tool b{font:600 14.5px/1.25 var(--sans);color:var(--s-ink)}
.sx .sn-app .sub,.sx .st-tool .sub{font-size:12.5px;line-height:1.35;color:var(--s-ink2)}
.sx .st-tool{max-width:230px}
.sx .st-tool .sn-in{display:flex;align-items:center;gap:10px;padding:10px 14px 10px 12px;border-radius:16px;background:var(--s-card);border:1px solid var(--s-line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sx .ti{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--ic) 22%,transparent);color:var(--ic)}
.sx .ti .ic{width:19px;height:19px;stroke-width:1.9}
.sx .st-tool .tx{display:grid;gap:1px;min-width:0}
.sx .sn-tools .sn-in{display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:999px;background:var(--s-card);border:1px solid rgba(143,166,230,.4)}
.sx .sn-tools .tb-l{font:600 12px/1 var(--sans);color:var(--s-sys);padding-inline:4px 2px}
.sx .sn-tools i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(143,166,230,.16);color:#dfe6fb}
.sx .sn-tools i .ic{width:15px;height:15px}
.sx .sn-tools.on i{animation:sx-pop .45s var(--ease) both;animation-delay:calc(var(--n) * .13s)}
@keyframes sx-pop{from{opacity:0;scale:.7}to{opacity:1;scale:1}}
.sx .sb{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);z-index:6;padding:5px 11px;border-radius:999px;background:#fff;color:#1a1a1a;font:700 12.5px/1.3 var(--sans);white-space:nowrap;box-shadow:0 10px 24px -10px rgba(0,0,0,.75);animation:sx-pop .4s var(--ease) both}
.sx .sb.k-ok{background:var(--s-hum);color:#04261a}
.sx .sb.k-wait{background:var(--s-wait);color:#3a2600}
.sx .sb.k-c{background:var(--s-claude);color:#2a0d00}
.sx #n-server .sb{bottom:auto;top:calc(100% + 8px)}
.sx .swl{position:absolute;transform:translate(-50%,-50%);padding:4px 10px;border-radius:999px;background:var(--s-card-solid);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);color:color-mix(in srgb,var(--c) 70%,#fff);font:600 12px/1.3 var(--sans);white-space:nowrap;animation:sx-pop .4s var(--ease) 1.1s both}
.sx .swl[hidden]{display:none}
.sx .sw-tube{fill:none;stroke:var(--c);stroke-opacity:.17;stroke-width:11;stroke-linecap:round}
.sx .sw-line{fill:none;stroke:var(--c);stroke-opacity:.9;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:1.5 7.5;animation:sx-flow 1.1s linear infinite;transition:opacity .45s}
@keyframes sx-flow{to{stroke-dashoffset:-9}}
.sx .sw.drawing .sw-line{opacity:0}
.sx .sw.k-gap .sw-tube{stroke-opacity:0}
.sx .sw.k-gap .sw-line{stroke-dasharray:6 8;animation:none;stroke-opacity:.8}
.sx .pk-path{fill:none;stroke:none}
.sx .pk-comet{fill:none;stroke:var(--c);stroke-width:7;stroke-linecap:round;stroke-opacity:.38;transition:opacity .3s}
.sx .pk-dot .halo{fill:var(--c);opacity:.28}
.sx .pk-dot .core{fill:var(--c)}
.sx .pk-dot .hi{fill:#fff}
.sx .pk-dot.gone{opacity:0;transition:opacity .4s}
.sx .pk{position:absolute;left:0;top:0;padding:4px 10px;border-radius:999px;background:var(--c);color:var(--s-on);font:700 12.5px/1.3 var(--sans);white-space:nowrap;box-shadow:0 8px 20px -8px rgba(0,0,0,.75);transition:opacity .35s}
.sx .pk.gone{opacity:0!important}
.sx #n-claude{--x:85%;--y:51%}
.sx .stage.solo #n-claude{--x:50%;--y:46%}
.sx #n-dana{--x:15%;--y:51%;--dl:.45s}
.sx #n-iso{--x:50%;--y:calc(51% - 21px);--dl:1s}
.sx #n-server{--x:50%;--y:51%}
.sx #n-app{--x:50%;--y:14%}
.sx #n-mail{--x:85%;--y:14%}

.sx #n-wa{--x:22%;--y:88%}
.sx #n-drive{--x:50%;--y:88%;--dl:.12s}
.sx #n-rec{--x:78%;--y:88%;--dl:.24s}
.sx #n-tools{--x:85%;--y:71%}
.sx #k1{--x:50%;--y:9%;--dl:.05s}
.sx #k2{--x:77%;--y:22%;--dl:.12s}
.sx #k3{--x:86%;--y:48%;--dl:.19s}
.sx #k4{--x:77%;--y:76%;--dl:.26s}
.sx #k5{--x:23%;--y:76%;--dl:.33s}
.sx #k6{--x:14%;--y:48%;--dl:.4s}
.sx #k7{--x:23%;--y:22%;--dl:.47s}
.sx #g1{--x:78%;--y:19%;--dl:.1s}
.sx #g2{--x:22%;--y:19%;--dl:.25s}
.sx #g3{--x:87%;--y:50%;--dl:.4s}
.sx #g4{--x:13%;--y:50%;--dl:.55s}
.sx #g5{--x:78%;--y:81%;--dl:.7s}
.sx #g6{--x:22%;--y:81%;--dl:.85s}
.sx .stage{container-type:inline-size}
@container (max-width: 900px){
.sx #n-wa{--x:20%}
.sx #n-rec{--x:80%}
.sx .st-tool{max-width:24%}
.sx .st-tool .sn-in{flex-direction:column;gap:5px;padding:8px 10px;text-align:center;border-radius:14px}
.sx .st-tool .sub{display:none}
.sx .sn-tools .tb-l{display:none}
.sx .swl{display:none}
.sx .sk,.sx .sg{max-width:28%}
.sx .sn-server .sn-in{width:262px}
}
@media (max-width:760px){
.sx #n-claude{--x:77%;--y:42%}
.sx .stage.solo #n-claude{--x:50%;--y:43%}
.sx #n-dana{--x:23%;--y:42%}
.sx #n-iso{--x:50%;--y:calc(42% - 18px)}
.sx #n-server{--x:50%;--y:71%}
.sx #n-tools{display:none}
.sx #n-app{--x:50%;--y:9.5%}
.sx #n-mail{--x:80%;--y:24%}

.sx #n-wa{--x:17%;--y:93%}
.sx #n-drive{--x:50%;--y:93%}
.sx #n-rec{--x:83%;--y:93%}
.sx #n-tools{--x:77%;--y:57.5%}
.sx #k1{--x:73%;--y:8%}
.sx #k2{--x:27%;--y:8%}
.sx #k3{--x:73%;--y:19%}
.sx #k4{--x:27%;--y:19%}
.sx #k5{--x:73%;--y:71%}
.sx #k6{--x:27%;--y:71%}
.sx #k7{--x:50%;--y:84%}
.sx #g1{--x:73%;--y:10%}
.sx #g2{--x:27%;--y:10%}
.sx #g3{--x:73%;--y:71%}
.sx #g4{--x:27%;--y:71%}
.sx #g5{--x:73%;--y:87%}
.sx #g6{--x:27%;--y:87%}
.sx .sk,.sx .sg{max-width:45%}
.sx .sk .sn-in{font-size:13px;padding:6px 11px 6px 9px;gap:6px}
.sx .sg .sn-in{font-size:13px;padding:7px 10px 7px 9px;gap:6px}
.sx .sk .ic,.sx .sg .ic{width:16px;height:16px}
.sx .disc{--d:52px}
.sx .stage.solo #n-claude .disc{--d:100px}
.sx .sn-agent b{font-size:15.5px}
.sx .stage.solo #n-claude b{font-size:22px}
.sx .sn-agent .sub{font-size:12px}
.sx .sn-server .sn-in{width:232px;padding:10px 10px 9px;border-radius:18px}
.sx .srv-ic{width:32px;height:32px;border-radius:10px}
.sx .srv-h b{font-size:17px}
.sx .srv-h div>span{font-size:11.5px}
.sx .srv-rows{margin-top:8px;gap:3px}
.sx .srv-rows li{padding:4px 8px;font-size:12px}
.sx .devices{width:104px;height:70px}
.sx .laptop{width:80px}
.sx .lscr{height:52px;border-width:3px;padding:4px;gap:3px}
.sx .lscr i{height:4px}
.sx .lbase{height:5px;margin-inline:-6px}
.sx .mphone{width:38px;height:70px;border-radius:9px;padding:3px}
.sx .mscr{border-radius:6px;padding:5px 3px 3px;gap:2px;font-size:4.8px}
.sx .ma-h{font-size:5.5px}
.sx .ma-ok{width:13px;height:13px;margin-top:5px}
.sx .ma-ok .ic{width:8px;height:8px}
.sx .ma-k,.sx .ma-b{font-size:4.5px}
.sx .ma-b{height:8px;border-radius:2px}
.sx .ma-b.wide{height:10px;margin-top:5px}
.sx .sn-app b,.sx .st-tool b{font-size:12.5px}
.sx .sn-app .sub{display:none}
.sx .st-tool{max-width:31%}
.sx .st-tool .sn-in{flex-direction:column;gap:4px;padding:7px 8px;text-align:center;border-radius:13px}
.sx .st-tool .sub{display:none}
.sx .ti{width:28px;height:28px;border-radius:9px}
.sx .ti .ic{width:16px;height:16px}
.sx .sn-tools .tb-l{display:none}
.sx .sn-tools i{width:24px;height:24px}
.sx .sn-tools i .ic{width:13px;height:13px}
.sx .sb{font-size:11.5px;padding:4px 9px}
.sx #n-server .sb{top:auto;bottom:calc(100% + 6px)}
.sx .pk{font-size:11.5px;padding:3px 8px}
}
.sx .mctrl{display:grid;gap:16px;margin-bottom:22px}
.sx .legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14.5px;color:var(--ink-2)}
.sx .legend li{display:inline-flex;align-items:center;gap:9px}
.sx .legend i{width:12px;height:12px;border-radius:4px;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 20%,transparent)}
.sx .ftabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:6px;border-radius:18px;background:var(--bg-2);border:1px solid var(--line)}
.sx .ftab{appearance:none;border:0;background:transparent;border-radius:13px;min-height:50px;padding:8px 12px;display:flex;align-items:center;justify-content:center;gap:10px;font:600 15px/1.25 var(--sans);color:var(--ink-2);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.sx .ftab .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;font:700 13px/1 var(--sans);background:var(--card);border:1px solid var(--line);color:var(--ink-2);transition:background .25s,color .25s}
.sx .ftab:hover{color:var(--ink)}
.sx .ftab[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(45,45,45,.06),0 8px 20px -12px rgba(45,45,45,.35)}
.sx .ftab[aria-pressed="true"] .n{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
@media (max-width:680px){
.sx .ftabs{grid-template-columns:repeat(2,minmax(0,1fr))}
.sx .ftab{justify-content:flex-start}
}
.sx .mdg{position:relative;padding:86px 30px 30px;border-radius:30px;border:1px solid var(--line);box-shadow:var(--shadow-lg);
  background:radial-gradient(70% 50% at 88% 0%,color-mix(in srgb,var(--claude) 8%,transparent),transparent 70%),radial-gradient(60% 50% at 10% 100%,color-mix(in srgb,var(--add) 10%,transparent),transparent 70%),radial-gradient(50% 40% at 50% 45%,color-mix(in srgb,var(--sys) 6%,transparent),transparent 70%),var(--card-2)}
.sx .mdg::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:radial-gradient(var(--dotc) 1px,transparent 1.4px);background-size:20px 20px}
.sx .wires{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.sx .wlabels{position:absolute;inset:0;z-index:3;pointer-events:none}
.sx .zones{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) 262px;column-gap:92px;align-items:stretch}
.sx .zone,.sx .band{--c:var(--sys);--cs:var(--sys-soft);--ci:var(--sys-ink);position:relative;border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--cs) 80%,var(--card)) 0%,var(--card) 58%);
  border:1px solid color-mix(in srgb,var(--c) 24%,var(--line));
  box-shadow:0 1px 2px rgba(45,45,45,.04),0 22px 44px -30px color-mix(in srgb,var(--c) 70%,transparent);
  transition:opacity .4s var(--ease),filter .4s var(--ease),box-shadow .4s var(--ease),border-color .4s}
.sx .zone::before,.sx .band::before{content:"";position:absolute;inset-inline:22px;top:-1px;height:3px;border-radius:0 0 4px 4px;background:var(--c)}
.sx .z-claude{--c:var(--claude);--cs:var(--claude-soft);--ci:var(--claude-ink)}
.sx .z-sys::before{background:linear-gradient(270deg,var(--hero-b),var(--cyan))}
.sx .z-human{--c:var(--hum);--cs:var(--hum-soft);--ci:var(--hum-ink)}
.sx .band{--c:var(--add);--cs:var(--add-soft);--ci:var(--add-ink);margin-top:92px;z-index:1}
.sx .zone:has(.hot),.sx .band:has(.hot){border-color:color-mix(in srgb,var(--c) 55%,var(--line))}
.sx .zh{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.sx .zi{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--c),color-mix(in srgb,var(--c) 55%,#0b1220));box-shadow:0 10px 20px -10px var(--c)}
.sx .zi .ic{width:22px;height:22px;stroke-width:2}
.sx .zh h3{font:700 21px/1.2 var(--serif);color:var(--ink)}
.sx .zh p{margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.sx .ztag{font:600 12.5px/1 var(--sans);color:var(--ci);background:var(--cs);border:1px solid color-mix(in srgb,var(--c) 32%,transparent);padding:7px 11px;border-radius:999px;white-space:nowrap}
.sx .nodes{display:grid;gap:10px}
.sx .mnode{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:11px;align-items:start;padding:11px 12px;border-radius:15px;background:var(--card);border:1px solid var(--line);transition:opacity .4s var(--ease),box-shadow .4s var(--ease),border-color .4s,transform .4s var(--ease)}
.sx .ni{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--cs);color:var(--ci)}
.sx .ni .ic{width:19px;height:19px}
.sx .nt{min-width:0}
.sx .nt b{display:block;font-weight:600;font-size:15px;line-height:1.35;color:var(--ink)}
.sx .nt .d{display:block;margin-top:2px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.sx .chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.sx .chip{display:inline-block;font:500 12.5px/1 var(--sans);padding:6px 9px;border-radius:999px;background:var(--bg-2);color:var(--ink);border:1px solid var(--line);white-space:nowrap}
.sx .mnode.hot{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 24%,transparent),0 16px 32px -18px var(--c);transform:translateY(-2px)}
.sx .mnode.ping::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--c);pointer-events:none;animation:sx-ping 1.2s var(--ease) forwards}
@keyframes sx-ping{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.07)}}
.sx .dg-play .tgt:not(.hot){opacity:.5}
.sx .mbadge{position:absolute;top:-12px;inset-inline-end:10px;z-index:4;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:var(--ci);color:var(--on-c);font:600 12.5px/1.2 var(--sans);white-space:nowrap;box-shadow:0 8px 18px -8px var(--c);animation:sx-pop .45s var(--ease) both}
.sx .mbadge.t-ok{background:var(--hum-ink)}
.sx .hbody{display:grid;gap:14px;justify-items:center;flex:1;align-content:start}
.sx .hrules{width:100%;grid-template-columns:1fr;gap:8px}
.sx .hr{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.sx .hr .ic{width:17px;height:17px;margin-top:2px;color:var(--hum-ink);stroke-width:2.2}
.sx .hr b{color:var(--ink);font-weight:600}
.sx .hphone{position:relative;width:216px;height:404px;flex:none;border-radius:34px;padding:8px;background:linear-gradient(160deg,#2b2a28,#0d0d0d 72%);box-shadow:0 26px 50px -22px rgba(6,14,32,.6),inset 0 0 0 1.5px rgba(255,255,255,.1);transition:box-shadow .4s var(--ease),opacity .4s,transform .4s var(--ease)}
.sx .hphone::before{content:"";position:absolute;top:15px;left:50%;width:58px;height:15px;margin-left:-29px;border-radius:9px;background:#0d0d0d;z-index:5}
.sx .hphone.hot{box-shadow:0 0 0 3px var(--hum),0 26px 50px -18px color-mix(in srgb,var(--hum) 70%,transparent);transform:translateY(-2px)}
.sx .scr{position:relative;height:100%;border-radius:27px;overflow:hidden;background:var(--bg)}
.sx .sbar{position:absolute;top:0;inset-inline:0;height:34px;display:flex;align-items:center;justify-content:space-between;padding:4px 20px 0;font:600 11px/1 var(--sans);color:var(--ink);z-index:2}
.sx .bat{width:20px;height:10px;border-radius:3px;border:1.5px solid currentColor;position:relative;opacity:.8}
.sx .bat::after{content:"";position:absolute;inset:1.5px 5px 1.5px 1.5px;border-radius:1px;background:currentColor}
.sx .pv{position:absolute;inset:34px 0 0;padding:6px 12px 12px;display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.sx .pv.cur{opacity:1;transform:none}
.sx .pv.out{opacity:0;transform:translateY(-8px)}
.sx .ph-head{display:flex;align-items:center;gap:7px;font:700 16px/1.2 var(--serif);color:var(--ink)}
.sx .ph-head img{width:24px;height:24px;border-radius:7px;background:#fff;padding:2px;border:1px solid var(--line)}
.sx .ph-head .sp{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--claude);color:#fff}
.sx .ph-head .sp .ic{width:15px;height:15px;stroke-width:2.4}
.sx .ph-empty{flex:1;display:grid;place-items:center;align-content:center;text-align:center;gap:7px;color:var(--ink-2);font-size:12.5px;line-height:1.5}
.sx .ph-empty p{font-weight:600;color:var(--ink);font-size:13.5px}
.sx .ph-empty.sm{flex:0;padding-top:8px}
.sx .ph-ok{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--hum-soft);color:var(--hum-ink)}
.sx .ph-ok .ic{width:18px;height:18px;stroke-width:2.4}
.sx .mpcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px;display:grid;gap:7px;box-shadow:var(--shadow)}
.sx .pmeta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font:500 12px/1 var(--sans);color:var(--ink-2)}
.sx .pk2{background:var(--brand-soft);color:var(--brand);font-weight:600;padding:4px 9px;border-radius:999px}
.sx .pt{font:600 13.5px/1.42 var(--sans);color:var(--ink)}
.sx .pproj{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.sx .pproj i{width:9px;height:9px;border-radius:3px;background:#2f7d5b;flex:none}
.sx .pa{font-size:12px;line-height:1.5;color:var(--ink-2)}
.sx .pa b{color:var(--ink);font-weight:600}
.sx .pbs{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:5px;margin-top:2px}
.sx .pb{position:relative;overflow:hidden;display:grid;place-items:center;height:34px;border-radius:10px;font:600 12.5px/1 var(--sans);border:1px solid var(--line-strong);color:var(--ink);background:var(--card)}
.sx .pb.main{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.sx .pb.tint{background:var(--bg-2);border-color:var(--bg-2)}
.sx .pb.main.press{animation:sx-press .5s var(--ease)}
.sx .pb.main.press::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:rgba(255,255,255,.6);animation:sx-ripple .6s ease-out forwards}
@keyframes sx-ripple{to{transform:scale(9);opacity:0}}
.sx .pdone{display:flex;align-items:center;gap:9px;background:var(--hum-soft);color:var(--hum-ink);border-radius:13px;padding:10px 11px;font:600 12.5px/1.45 var(--sans)}
.sx .pdone .ph-ok{width:28px;height:28px;background:var(--card)}
.sx .pdone p{flex:1}
.sx .pdone .undo{color:var(--brand);font-weight:600}
.sx .rec{flex:1;display:grid;place-items:center;align-content:center;gap:12px;text-align:center;color:var(--ink-2);font-size:12px}
.sx .mwave{display:flex;gap:3px;align-items:center;height:36px}
.sx .mwave i{display:block;width:3px;height:8px;border-radius:3px;background:var(--brand);animation:sx-wv .9s ease-in-out infinite alternate}
.sx .mwave i:nth-child(3n){animation-delay:-.3s}
.sx .mwave i:nth-child(3n+1){animation-delay:-.6s}
.sx .mwave i:nth-child(4n){animation-duration:1.2s}
@keyframes sx-wv{to{height:32px}}
.sx .rbtn{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;border:3px solid color-mix(in srgb,var(--urgent) 40%,var(--line));position:relative}
.sx .rbtn::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid color-mix(in srgb,var(--urgent) 45%,transparent);animation:sx-ring2 1.6s ease-out infinite}
@keyframes sx-ring2{from{opacity:1;transform:scale(.92)}to{opacity:0;transform:scale(1.18)}}
.sx .rbtn i{width:28px;height:28px;border-radius:8px;background:var(--urgent)}
.sx .rt{font:600 24px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.sx .chat{display:grid;gap:9px;align-content:start}
.sx .bub{font-size:12.5px;line-height:1.55;padding:9px 11px;border-radius:14px;max-width:90%;color:var(--ink)}
.sx .bub.me{justify-self:start;background:var(--bg-2);border-start-start-radius:5px}
.sx .bub.ai{justify-self:end;background:transparent;padding-inline:2px;opacity:0;animation:sx-rise .5s var(--ease) 1.5s forwards}
.sx .bh{order:2}
.sx .addons{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.sx .addon{grid-template-columns:1fr;gap:9px;padding:13px 12px 14px;align-content:start}
.sx .addon .ni{width:38px;height:38px}
.sx .addon .nt b{font-size:14.5px}
.sx .addon .nt .d{font-size:13px}
.sx .peers{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:8px;color:var(--ci)}
.sx .peers img{width:26px;height:26px;border-radius:50%;background:#fff;padding:2px;border:1px solid var(--line)}
.sx .peers img:not([src]){visibility:hidden}
.sx .peers .ic{width:16px;height:16px}
.sx .peers small{flex-basis:100%;font-size:12px;line-height:1.4;color:var(--ink-2)}
.sx .wl{position:absolute;transform:translate(-50%,-50%);padding:5px 10px;border-radius:999px;background:var(--card);border:1px solid color-mix(in srgb,var(--c) 35%,var(--line));color:var(--ci);font:600 12px/1.35 var(--sans);text-align:center;white-space:nowrap;box-shadow:var(--shadow)}
.sx .wl.above{transform:translate(-50%,calc(-100% - 12px));border-radius:12px;padding:5px 9px}
.sx .tube{fill:none;stroke:var(--c);stroke-opacity:.1;stroke-width:12;stroke-linecap:round}
.sx .mwire{fill:none;stroke:var(--c);stroke-opacity:.8;stroke-width:1.7;stroke-linecap:round;stroke-dasharray:1.5 7.5;animation:sx-flow 1.1s linear infinite}
.sx .mwire.rev{animation-direction:reverse}
.sx .port{fill:var(--card);stroke:var(--c);stroke-width:2}
.sx .act{fill:none;stroke:var(--c);stroke-width:3.2;stroke-linecap:butt}
.sx .comet{fill:none;stroke:var(--c);stroke-width:8;stroke-linecap:round;stroke-opacity:.32}
.sx .pdot .halo{fill:var(--c);opacity:.22;transform-box:fill-box;transform-origin:center;animation:sx-halo .9s ease-in-out infinite alternate}
.sx .pdot .core{fill:var(--c)}
.sx .pdot .hi{fill:#fff}
.sx .pdot.arrive{animation:sx-dotout .8s .2s forwards}
@keyframes sx-halo{to{transform:scale(1.5);opacity:.1}}
@keyframes sx-dotout{to{opacity:0}}
.sx .dg-play .wires .mwire{stroke-opacity:.45}
.sx .mdg[data-focus] .zone,.sx .mdg[data-focus] .band{opacity:.25;filter:saturate(.4)}
.sx .mdg[data-focus] .wires,.sx .mdg[data-focus] .wlabels{opacity:.3;transition:opacity .4s}
.sx .mdg[data-focus="claude"] #z-claude,.sx .mdg[data-focus="sys"] #z-sys,.sx .mdg[data-focus="sys"] #band,.sx .mdg[data-focus="human"] #z-human{opacity:1;filter:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 50%,transparent),0 30px 60px -28px var(--c)}
.sx .mdg[data-focus] .tgt{opacity:1}
.sx .mplayer{position:sticky;bottom:max(12px,env(safe-area-inset-bottom,0px));z-index:30;margin-top:16px;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"btns cap" "btns steps";gap:8px 18px;align-items:center;padding:14px 18px 16px;border-radius:20px;background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--line);box-shadow:0 20px 44px -22px rgba(45,45,45,.5)}
.sx .pctl{grid-area:btns;display:flex;gap:8px;align-items:center}
.sx .pbtn{appearance:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:1px solid var(--line-strong);background:var(--card);color:var(--ink);transition:transform .2s var(--ease),background .2s}
.sx .pbtn:hover{transform:scale(1.05)}
.sx .pbtn.main{background:var(--brand);border-color:var(--brand);color:var(--on-brand);width:52px;height:52px;box-shadow:0 10px 22px -10px var(--brand)}
.sx .pbtn .i-play{display:none}
.sx .pbtn.paused .i-play{display:block}
.sx .pbtn.paused .i-pause{display:none}
.sx .pbtn .i-play{fill:currentColor;stroke:none}
.sx .pcap{grid-area:cap;min-width:0}
.sx .pmeta2{font:600 13px/1.3 var(--sans);color:var(--ink-2)}
.sx .pmeta2 b{color:var(--brand);font-weight:600}
.sx .ptext{margin-top:3px;font:500 17px/1.55 var(--sans);color:var(--ink);min-height:1.55em}
.sx .ptext.swap{animation:sx-rise .45s var(--ease)}
.sx .msteps{grid-area:steps;list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.sx .sdot{appearance:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer;font:600 13px/1 var(--sans);border:1px solid var(--line);background:var(--card);color:var(--ink-2);transition:background .25s,color .25s,border-color .25s,transform .2s}
.sx .sdot:hover{transform:translateY(-1px);color:var(--ink)}
.sx .sdot.done{background:var(--brand-soft);color:var(--brand);border-color:transparent}
.sx .sdot[aria-current="step"]{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.sx .prog{position:absolute;bottom:0;inset-inline:20px;height:3px;border-radius:3px;overflow:hidden}
.sx .prog i{display:block;height:100%;transform:scaleX(0);transform-origin:right center;background:linear-gradient(270deg,var(--cyan),var(--brand))}
@media (max-width:1079.98px){
.sx .mdg{padding-block:26px;padding-inline:30px 22px}
.sx .zones{grid-template-columns:minmax(0,1fr);row-gap:72px}
.sx .band{margin-top:72px}
.sx .bh{order:0}
.sx .addons{grid-template-columns:repeat(2,minmax(0,1fr))}
.sx .addon{grid-template-columns:38px minmax(0,1fr);gap:11px}
}
@media (min-width:700px) and (max-width:1079.98px){
.sx .z-claude .nodes,.sx .z-sys .nodes{grid-template-columns:repeat(2,minmax(0,1fr))}
.sx .hbody{grid-template-columns:auto minmax(0,1fr);align-items:center;justify-items:stretch;gap:22px}
}
@media (max-width:640px){
.sx .mdg{border-radius:22px}
.sx .zone,.sx .band{padding:14px;border-radius:18px}
.sx .zh{grid-template-columns:auto minmax(0,1fr)}
.sx .zh .ztag{grid-column:1/-1;justify-self:start}
.sx .addons{grid-template-columns:1fr}
.sx .mplayer{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"cap cap" "steps btns";padding:12px 14px 14px;bottom:max(8px,env(safe-area-inset-bottom,0px));gap:8px 10px}
.sx .ptext{font-size:15px}
.sx .sdot{width:28px;height:28px;font-size:12px}
.sx .pbtn{width:40px;height:40px}
.sx .pbtn.main{width:44px;height:44px}
.sx .pctl{gap:6px}
.sx .msteps{gap:3px;align-self:center;flex-wrap:nowrap}
}
@media (max-width:380px){
.sx .sdot{width:25px;height:25px;font-size:12px}
.sx .msteps{gap:2px}
}
@media (prefers-reduced-motion: reduce){
.sx *,.sx *::before,.sx *::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
}
/* ---- left to right (the English page): the picture mirrors, the bars fill from the left ---- */
[dir="ltr"] .sx .sn{left:calc(100% - var(--x,50%))}
[dir="ltr"] .sx .st-rail i::after{transform-origin:left center;background:linear-gradient(90deg,var(--brand),var(--claude-ink))}
[dir="ltr"] .sx .prog i{transform-origin:left center}
.sx .st-rail i::after,.sx .prog i{background:linear-gradient(270deg,var(--claude-ink),var(--brand))}
/* the page's sections already give the room around it */
.sx .story,.sx .sec{padding:0}
.sx-sec .head{margin-bottom:28px}