.live-head{justify-content:space-between;align-items:center;gap:var(--sp-16);min-block-size:var(--control-h-sm);display:flex}.live-title{font:var(--weight-display) var(--text-md) / var(--leading-snug) var(--font-display)}.live-toggle{visibility:hidden}[data-live] .live-toggle,[data-flow] .live-toggle{visibility:visible}[data-live=static] .live-toggle{display:none}.build{gap:var(--sp-16);padding:var(--sp-24);background:var(--surface-tint);border:var(--bw) solid var(--border);border-radius:var(--r-site-card);margin-block-end:var(--sp-48);display:grid}.build-grid{gap:var(--sp-24);grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:stretch;display:grid}.build-side{gap:var(--sp-24);align-content:start;display:grid}.build-plan{gap:var(--sp-4);min-block-size:calc(var(--text-md) * 4.2);display:grid}.build-plan-name{font:var(--weight-display) var(--text-md) / var(--leading-snug) var(--font-display)}.build-plan-meta{color:var(--ink-muted);font-size:var(--text-ui)}.build-plan-price{font-size:var(--text-md)}.build-steps{gap:var(--sp-8);grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}.build-step{gap:var(--sp-8);font:var(--weight-strong) var(--text-xs) / var(--leading-label) var(--font-label);color:var(--ink-faint);display:grid}.build-bar{block-size:var(--sp-4);background:var(--border);display:block;position:relative;overflow:hidden}.build-bar:after{content:"";background:var(--accent);transform-origin:0;transition:transform var(--dur-large) var(--ease-linear);position:absolute;inset:0;transform:scaleX(0)}[dir=rtl] .build-bar:after{transform-origin:100%}.build-step[data-state=active]{color:var(--accent-ink)}.build-step[data-state=active] .build-bar:after{transform:scaleX(.5)}.build-step[data-state=done]{color:var(--ink)}.build-step[data-state=done] .build-bar:after{background:var(--success);transform:scaleX(1)}.build-ip{align-items:baseline;gap:var(--sp-8);font-size:var(--text-ui);flex-wrap:wrap;margin-block-start:var(--sp-16);display:flex}.build-ip-label{color:var(--ink-muted)}.build-ip-value{font-family:var(--font-mono);font-size:var(--text-md);font-weight:var(--weight-strong);color:var(--accent-ink)}.term{border-radius:calc(var(--r-site-card) - var(--sp-24));background:var(--band-bg);color:var(--band-ink);border:var(--bw) solid var(--band-line);font:var(--weight-regular) var(--text-ui) / var(--leading-code) var(--font-mono);min-inline-size:0;overflow:hidden}.term-bar{gap:var(--sp-8);padding:var(--sp-12) var(--sp-16);border-block-end:var(--bw) solid var(--band-line);display:flex}.term-dot{inline-size:var(--sp-8);block-size:var(--sp-8);border-radius:var(--r-full);background:var(--band-line)}.term-body{padding:var(--sp-16);block-size:calc(var(--text-ui) * var(--leading-code) * 5 + var(--sp-32));overflow:hidden}.t-line{white-space:pre-wrap;overflow-wrap:anywhere;min-block-size:1lh;display:block}.t-prompt{color:var(--band-accent)}[data-line=out]{color:var(--band-muted)}.caret{inline-size:var(--caret-w);vertical-align:text-bottom;background:var(--band-accent);block-size:1.1em;animation:live-blink var(--dur-blink) steps(1) var(--blink-count);display:inline-block}@keyframes live-blink{50%{opacity:0}}.flow-pair{gap:var(--sp-32);grid-template-columns:repeat(2,minmax(0,1fr));inline-size:100%;display:grid}.flow-scene{font:var(--weight-strong) var(--text-xs) / var(--leading-label) var(--font-label);letter-spacing:var(--tracking-eyebrow);color:var(--accent-ink)}.flow{gap:var(--sp-12);inline-size:100%;margin-block-start:var(--sp-16);display:grid}.flow-track{grid-template-columns:auto minmax(var(--sp-48), 1fr) auto minmax(var(--sp-48), 1fr) auto;align-items:center;gap:var(--sp-4);display:grid}.flow-node{align-content:center;justify-items:center;gap:var(--sp-4);text-align:center;min-inline-size:calc(var(--sp-64) + var(--sp-12));min-block-size:calc(var(--sp-96) + var(--sp-12));padding:var(--sp-12);background:var(--surface);border:var(--bw) solid var(--border-strong);border-radius:calc(var(--r-site-card) - var(--sp-4));display:grid}.flow-node.is-edge{border-color:var(--accent);background:var(--accent-soft)}.flow-icon{inline-size:var(--sp-24);block-size:var(--sp-24);color:var(--accent-ink)}.flow-name{font:var(--weight-display) var(--text-ui) / var(--leading-snug) var(--font-display)}.flow-sub{color:var(--ink-muted);font-size:var(--text-xs);max-inline-size:16ch}.flow-link{block-size:var(--sp-24);position:relative;container-type:inline-size}.flow-line{inline-size:100%;block-size:var(--sp-8);transform:translateY(-50%) scaleX(var(--inline-sign));position:absolute;inset-block-start:50%;inset-inline:0}.flow-line path{fill:none;stroke:var(--border-dash);stroke-width:var(--ring-width);stroke-dasharray:var(--sp-8) var(--sp-8);animation:flow-dash var(--dur-pulse) var(--ease-linear) infinite}@keyframes flow-dash{to{stroke-dashoffset:calc(var(--sp-16) * -1)}}.packet{inline-size:var(--sp-8);block-size:var(--sp-8);border-radius:var(--r-full);opacity:0;animation:packet-ok calc(var(--dur-pulse) * 2) var(--ease-in-out) calc(var(--i) * var(--dur-pulse) / -2) infinite;margin-block-start:calc(var(--sp-8) / -2);position:absolute;inset-block-start:50%;inset-inline-start:0}.packet.is-ok{background:var(--accent);filter:drop-shadow(0 0 var(--glow-r) var(--glow-ok))}.packet.is-bad{background:var(--danger);filter:drop-shadow(0 0 var(--glow-r) var(--glow-bad));animation-name:packet-bad}.packet.is-bad.is-pass{animation-name:packet-ok}@keyframes packet-ok{0%{opacity:0;transform:translate(0)}10%,90%{opacity:1}to{opacity:0;transform:translateX(calc(var(--inline-sign) * (100cqw - var(--sp-8))))}}@keyframes packet-bad{0%{opacity:0;transform:translate(0)scale(1)}10%,80%{opacity:1}to{opacity:0;transform:translateX(calc(var(--inline-sign) * (100cqw - var(--sp-8)))) scale(2)}}.flow-legend{align-items:center;gap:var(--sp-16);color:var(--ink-muted);font:var(--weight-strong) var(--text-xs) / var(--leading-label) var(--font-label);flex-wrap:wrap;display:flex}.flow-key:before{content:"";inline-size:var(--sp-8);block-size:var(--sp-8);border-radius:var(--r-site-chip);margin-inline-end:var(--sp-8);display:inline-block}.flow-key.is-ok:before{background:var(--accent)}.flow-key.is-bad:before{background:var(--danger)}.flow-legend .live-toggle{margin-inline-start:auto}[data-flow]:not([data-run]) .packet,[data-flow]:not([data-run]) .flow-line path{animation-play-state:paused}.cta-support .line-figure{inline-size:100%}.cta-support{gap:var(--sp-16);justify-items:start;inline-size:100%;max-inline-size:36rem;display:grid}.reply{align-items:center;gap:var(--sp-12);padding:var(--sp-12) var(--sp-16);background:var(--surface);border:var(--bw) solid var(--border-strong);border-radius:var(--r-site-control);color:var(--ink-muted);font-size:var(--text-ui);display:inline-flex}.reply-dots{gap:var(--sp-4);display:inline-flex}.reply-dots i{filter:drop-shadow(0 0 var(--glow-r) var(--glow-ok));inline-size:var(--sp-8);block-size:var(--sp-8);border-radius:var(--r-full);background:var(--accent);animation:reply-dot calc(var(--dur-pulse) * 2 / 3) var(--ease-in-out) infinite;animation-delay:calc(var(--n,0) * var(--dur-pulse) / 6)}.reply-dots i:nth-child(2){--n:1}.reply-dots i:nth-child(3){--n:2}@keyframes reply-dot{0%,to{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(calc(var(--sp-4) * -1))}}@media (width<=1023px){.flow-pair{grid-template-columns:minmax(0,1fr)}}@media (width<=767px){.build{padding:var(--sp-16)}.build-grid{grid-template-columns:minmax(0,1fr)}.flow-track{grid-template-columns:auto minmax(var(--sp-24), 1fr) auto minmax(var(--sp-24), 1fr) auto}.flow-node{min-inline-size:0;min-block-size:var(--sp-64);padding:var(--sp-8)}.flow-name{font-size:var(--text-xs)}.flow-icon,.flow-sub{display:none}}@media (prefers-reduced-motion:reduce){.packet{display:none}.flow-line path,.caret,.reply-dots i{animation:none}.build-bar:after{transition:none}.live-toggle{display:none}}.net{margin:0 0 var(--sp-32);inline-size:100%}.net-scene{gap:var(--sp-16);padding:var(--sp-24) var(--sp-24) var(--sp-16);background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-site-card);display:grid}.net-svg{block-size:auto;inline-size:100%;max-inline-size:56rem;margin-inline:auto;display:block;overflow:visible}.net-h{aspect-ratio:800/470}.net-v{aspect-ratio:390/262;max-inline-size:30rem;display:none}.net-svg path,.net-svg circle{vector-effect:non-scaling-stroke}.net-svg text{font-family:var(--font-label);font-size:var(--text-xs)}.net-cable{fill:none;stroke:var(--ink);stroke-width:1.25px;stroke-linecap:round;stroke-linejoin:round}.net-cable.is-atk{stroke:var(--danger);stroke-dasharray:var(--sp-4) var(--sp-8);stroke-width:1px}.net-cut path{fill:none;stroke:var(--danger);stroke-width:1.5px;stroke-dasharray:var(--sp-8) var(--sp-4);stroke-linecap:round;stroke-linejoin:round}.net-cut .net-x{stroke-dasharray:none;stroke-width:2px}.net-shield-body{fill:var(--surface);stroke:var(--ink);stroke-width:1.25px;stroke-linejoin:round}.net-shield-check{fill:none;stroke:var(--accent);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}.net-shield-flash{fill:none;stroke:var(--danger);stroke-width:2.5px;stroke-linejoin:round;opacity:0}.net-pk{fill:var(--accent);stroke:var(--surface);stroke-width:1.5px;cx:0;cy:0;offset-rotate:0deg;offset-distance:var(--at,0%)}.net-pk.is-atk{fill:var(--danger);offset-distance:0%}.net-atk,.net .gate-down{opacity:0}.net-labels text{fill:var(--ink);font-weight:var(--weight-strong)}.net-labels .nl-name{fill:var(--ink)}.net-labels .nl-sub{fill:var(--ink-muted);font-weight:var(--weight-regular)}.net-labels .nl-ok{fill:var(--success);font-weight:var(--weight-regular)}.net-labels .nl-bad{fill:var(--danger);font-weight:var(--weight-regular)}.net-foot{gap:var(--sp-16);border-block-start:var(--bw) dashed var(--border-dash);grid-template-columns:minmax(0,1fr) auto;align-items:center;padding-block-start:var(--sp-12);display:grid}.net-steps{padding:var(--sp-12) 0 0;margin:0;list-style:none;display:none;position:relative}.net-steps:before{content:"";block-size:var(--sp-4);background:var(--border);position:absolute;inset-block-start:0;inset-inline:0}.net-step{grid-area:1/1}.net-tick{block-size:var(--sp-4);position:absolute;inset-block-start:0;inset-inline:0;overflow:hidden}.net-tick:after{content:"";background:var(--accent);opacity:0;position:absolute;inset:0}.net-cap{font:var(--weight-strong) var(--text-ui) / var(--leading-snug) var(--font-sans);color:var(--ink)}.net-cap-static{color:var(--ink-muted);font-size:var(--text-ui);margin:0}.net-toggle{align-items:center;gap:var(--sp-8);min-block-size:var(--control-h-sm);padding:0 var(--sp-12);border:var(--bw) solid var(--border-strong);border-radius:var(--r-site-control);background:var(--surface);color:var(--ink);font:var(--weight-strong) var(--text-xs) / 1 var(--font-label);cursor:pointer;visibility:hidden;display:inline-flex}[data-flow] .net-toggle{visibility:visible}.net-toggle:hover{background:var(--surface-tint)}.net-toggle:before{content:"";inline-size:var(--sp-8);block-size:var(--sp-12);border-inline:var(--sp-4) solid currentColor;box-sizing:border-box}.net-toggle[aria-pressed=true]:before{border-inline:0;border-block:var(--sp-4) solid transparent;border-inline-start:var(--sp-8) solid currentColor;border-block-width:var(--sp-8);block-size:0;inline-size:0}@media (prefers-reduced-motion:no-preference){.net-steps{display:grid}.net-cap-static{display:none}.net .gate-a{animation:net-gate-a var(--dur-cycle) linear infinite}.net .gate-down{animation:net-gate-down var(--dur-cycle) linear infinite}.net .net-cable.is-atk,.net-cut path{animation:net-dash var(--dur-packet) linear infinite}.net-pk{animation:net-trip var(--dur-packet) linear calc(var(--dur-packet) * var(--k,0) * -1) infinite}.net-pk.is-atk{animation:net-attack var(--dur-cycle) linear infinite;offset-distance:0%}.net-pk.is-atk.is-late{animation-delay:calc(var(--dur-cycle) * -.94)}.net-atk{opacity:1}.net-shield-flash{animation:net-flash var(--dur-cycle) linear infinite}.s1 .net-tick:after,.s1 .net-cap{animation:net-s1 var(--dur-cycle) linear infinite}.s2 .net-tick:after,.s2 .net-cap{animation:net-s2 var(--dur-cycle) linear infinite}.s3 .net-tick:after,.s3 .net-cap{animation:net-s3 var(--dur-cycle) linear infinite}.net:not([data-run]) *,.net:not([data-run]) :before,.net:not([data-run]) :after{animation-play-state:paused}}@media (prefers-reduced-motion:reduce){.net-toggle{display:none}}@keyframes net-gate-a{0%,23%{opacity:1}27%,67%{opacity:0}72%,to{opacity:1}}@keyframes net-gate-down{0%,25%{opacity:0}29%,67%{opacity:1}71%,to{opacity:0}}@keyframes net-s1{0%,25%{opacity:1}28%,71%{opacity:0}74%,to{opacity:1}}@keyframes net-s2{0%,28%{opacity:0}31%,44%{opacity:1}47%,to{opacity:0}}@keyframes net-s3{0%,46%{opacity:0}49%,66%{opacity:1}69%,to{opacity:0}}@keyframes net-dash{to{stroke-dashoffset:-12px}}@keyframes net-trip{0%{offset-distance:0%;opacity:0}10%,90%{opacity:1}to{offset-distance:100%;opacity:0}}@keyframes net-attack{0%,46%{offset-distance:0%;opacity:0}48%{opacity:1}63%{offset-distance:100%;opacity:1}65%,to{offset-distance:100%;opacity:0}}@keyframes net-flash{0%,62%{opacity:0}64%{opacity:1}67%,68%{opacity:0}70%{opacity:1}74%,to{opacity:0}}@media (width<=767px){.net-h{display:none}.net-v{display:block}.net-scene{padding:var(--sp-16) var(--sp-12) var(--sp-12)}.net-foot{grid-template-columns:minmax(0,1fr)}}
