.demo-head{max-width:860px;padding-top:48px;padding-bottom:8px}.demo-head h1{font-family:var(--font-display);margin:10px 0 12px;font-size:clamp(30px,4vw,46px);line-height:1.1}.demo-head p{color:var(--ink-muted);max-width:720px;font-size:1.05rem}.demo-wrap{max-width:1400px}.demo{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);margin:20px 0 24px;overflow:hidden}.demo-toolbar{border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;display:flex}.demo-phases{flex-wrap:wrap;gap:6px;display:flex}.demo-phases span{font:600 12px/1 var(--font-sans);background:var(--bg);color:var(--ink-subtle);border:1px solid var(--border);transition:all var(--ease-switch);border-radius:999px;padding:6px 10px}.demo-phases span.on{background:var(--teal-soft);color:var(--teal-dark);border-color:var(--after-border)}.demo-phases span.done{color:var(--teal)}.demo-controls{gap:6px;display:flex}.demo-btn{font:600 13px/1 var(--font-sans);border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer;border-radius:8px;padding:7px 12px}.demo-btn:disabled{opacity:.45;cursor:default}.demo-split{grid-template-columns:1fr 0fr;min-height:640px;transition:grid-template-columns 1.2s cubic-bezier(.4,0,.2,1);display:grid}.demo[data-state=ready] .demo-split{grid-template-columns:1fr 0fr}.demo:not([data-state=ready]) .demo-split{grid-template-columns:1.05fr 1fr}.demo-viz{background:var(--bg);border-left:1px solid var(--border);flex-direction:column;justify-content:space-between;display:flex;overflow:hidden}.demo-viz svg{width:100%;height:auto;padding:8px}.demo-term{color:#e7e5df;background:#121413;flex-direction:column;min-width:0;display:flex;position:relative}.demo-term-bar{color:#8b918e;background:#1c1f1e;align-items:center;gap:6px;padding:10px 14px;font:12px/1 ui-monospace,Menlo,monospace;display:flex}.demo-term-bar i{background:#3a3f3d;border-radius:50%;width:10px;height:10px}.demo-term-bar span{margin-left:8px}.demo-term-body{scroll-behavior:smooth;flex:1;max-height:640px;padding:16px 18px 72px;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-y:auto}.demo-term-body .ln{white-space:pre-wrap;word-break:break-word;animation:.5s ease-out both lnin}@keyframes lnin{0%{opacity:0;transform:translateY(3px)}}.demo-term-body .ps{color:#6fd3b8}.demo-term-body .h{color:#f3d6a4;margin-top:10px;font-weight:700}.demo-term-body .ok{color:#6fd3b8}.demo-term-body .err{color:#ff8a7a}.demo-term-body .warn{color:#f3c26b}.demo-term-body .dim{color:#8b918e}.caret{vertical-align:-2px;background:#e7e5df;width:8px;height:15px;margin-left:2px;animation:1s step-end infinite blink;display:inline-block}@keyframes blink{50%{opacity:0}}.demo:not([data-state=ready]) .caret{display:none}.demo-run{font:700 15px/1 var(--font-sans);background:var(--teal);color:#fff;cursor:pointer;box-shadow:var(--shadow-md);border:0;border-radius:10px;padding:13px 22px;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.demo-run:hover{background:var(--teal-dark)}.demo:not([data-state=ready]) .demo-run{display:none}.demo-final{opacity:0;visibility:hidden;padding:16px 18px;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;transition:opacity .9s,visibility 0s linear .9s;position:absolute;inset:37px 0 0;overflow-y:auto}.demo[data-state=final] .demo-final{opacity:1;visibility:visible;transition:opacity 1.2s .6s}.demo-term-body{transition:opacity .7s}.demo[data-state=final] .demo-term-body{opacity:0}.demo-final .ps{color:#6fd3b8}.demo-final-head{grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0 12px;display:grid}.demo-final-head div{background:#1c1f1e;border:1px solid #2a2f2d;border-radius:10px;padding:10px 12px}.demo-final-head .k{color:#8b918e;font-size:11px;display:block}.demo-final-head b{color:#e7e5df;font:600 13px/1.4 var(--font-sans)}.demo-final-head b.okc{color:#6fd3b8}.demo-final-sub{color:#f3d6a4;margin:0 0 8px;font-weight:700}.demo-artifacts{gap:6px;margin:0;padding:0;list-style:none;display:grid}.demo-artifacts li{opacity:0;background:#1a1d1c;border:1px solid #262b29;border-radius:10px;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:6px 12px;transition:opacity .7s,transform .7s;display:grid;transform:translateY(6px)}.demo[data-state=final] .demo-artifacts li{opacity:1;transform:none}.demo[data-state=final] .demo-artifacts li:nth-child(n){transition-delay:calc(var(--i,0) * .12s + .9s)}.af-ic{font:700 10px/1 var(--font-sans);letter-spacing:.03em;color:#fff;text-align:center;background:#3a4240;border-radius:6px;padding:8px 0}.af-yaml,.af-tf{background:#7b42bc}.af-sha,.af-csv,.af-json{background:#2e6fd8}.af-html,.af-md{background:var(--teal)}.af-pdf{background:#c0392b}.af-pr{background:#24292f}.af-main b{color:#e7e5df;font-weight:600;display:block}.af-main span{color:#9aa19d;font:12px/1.4 var(--font-sans);display:block}.af-size{color:#8b918e;white-space:nowrap;font-size:11px}.demo[data-state=final] #z-aws,.demo[data-state=final] #n-inv{opacity:.3;transition:opacity 1.6s}.demo-viz text{font-family:var(--font-sans);fill:var(--ink)}.demo-viz .zt{font-size:15px;font-weight:700}.demo-viz .zs{fill:var(--ink-subtle);font-size:11px}.demo-viz .nl{text-anchor:middle;font-size:10.5px;font-weight:600}.demo-viz .ns{fill:var(--ink-subtle);text-anchor:middle;font-size:10px}.demo-viz .ic{font:700 22px var(--font-display);fill:#fff;text-anchor:middle}.demo-viz .badge{text-anchor:middle;fill:var(--teal-dark);font-size:12px;font-weight:700;transition:opacity .6s}.demo-viz .v{transform-box:fill-box;transform-origin:50%;transition:opacity 1.1s cubic-bezier(.4,0,.2,1),transform 1.1s cubic-bezier(.4,0,.2,1)}.demo-viz .v[data-s=hidden]{opacity:0;transform:scale(.94)}#z-aws>rect:first-child{fill:var(--before-bg);stroke:var(--before-border);stroke-width:1.5px}#z-up>rect:first-child{fill:var(--after-bg);stroke:var(--after-border);stroke-width:1.5px}#n-agent polygon{fill:var(--teal);stroke:var(--teal-dark);stroke-width:1.6px}#n-inv path:not(.fold){fill:var(--surface);stroke:#a9a69e;stroke-width:1.6px;transition:fill .9s,stroke .9s}#n-inv .fold,#n-inv line{fill:none;stroke:#a9a69e;stroke-width:1.4px}#n-inv[data-s=active] path:not(.fold){stroke:var(--teal);animation:2.6s ease-in-out infinite pulse}#n-inv[data-s=ok] path:not(.fold){stroke:var(--teal);fill:var(--teal-soft)}.demo-viz .ring{fill:#0000;stroke:#0000;stroke-width:2.4px;transition:fill .9s,stroke .9s}.demo-viz .n[data-s=active] .ring{stroke:var(--teal);fill:#0b7a660f;animation:2.6s ease-in-out infinite pulse}.demo-viz .n[data-s=ok] .ring{stroke:var(--teal);fill:var(--teal-soft)}.demo-viz .n[data-s=err] .ring{stroke:#c0392b;fill:#fbe3df}.demo-viz .n[data-s=warn] .ring{stroke:var(--amber);fill:var(--amber-bg)}.demo-viz .tile{fill:#5b6b7f;transition:fill .9s}.demo-viz .n[data-s=ok] .tile,.demo-viz .n[data-s=active] .tile{fill:var(--teal)}.demo-viz .uplogo{fill:var(--teal);stroke:none}.demo-viz .tile-dark,.demo-viz .n[data-s=ok] .tile-dark,.demo-viz .n[data-s=active] .tile-dark{fill:#24292f}.demo-viz .tun{fill:#2e6fd80d;stroke:#2e6fd8;stroke-width:1.4px;stroke-dasharray:5 5;transition:fill .9s}#n-tunnel[data-s=active] .tun{animation:3s linear infinite flow}#n-tunnel[data-s=ok] .tun{fill:#2e6fd817}#n-tunnel .ring{display:none}.demo-viz .pkt{opacity:0;pointer-events:none;transition:opacity .6s}.demo-viz .e[data-s=sync]+.pkt,.demo-viz .e[data-s=req]+.pkt{opacity:1}.demo-viz .uplogo-t{font:700 15px var(--font-sans);fill:#fff;text-anchor:middle}.demo-viz .n[data-s=off]{opacity:.35;transition:opacity 1.6s}@keyframes pulse{50%{stroke-opacity:.45}}.demo-viz .e{fill:none;stroke-width:2px;marker-end:url(#arr);transition:opacity 1.1s,stroke 1.1s}.demo-viz .e[data-s=hidden]{opacity:0}.demo-viz .e[data-s=req]{stroke:var(--teal);stroke-dasharray:6 6;animation:1.6s linear infinite flow}.demo-viz .e[data-s=sync]{stroke:#2e6fd8;stroke-dasharray:10 6;stroke-width:2.6px;animation:1.4s linear infinite flow}.demo-viz .e[data-s=ok]{stroke:var(--teal);opacity:.55}.demo-viz .e[data-s=err]{stroke:#c0392b;stroke-dasharray:3 5}.demo-viz .e[data-s=off]{stroke:#b9b6ae;opacity:.35}@keyframes flow{to{stroke-dashoffset:-12px}}.demo-cap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);min-height:138px;margin:0 16px 16px;padding:16px 18px;transition:opacity .7s}.demo-cap.fade{opacity:0}.demo-cap-top{font:600 11px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--teal);align-items:center;gap:12px;display:flex}.demo-cap-bar{background:var(--border);border-radius:2px;flex:1;height:3px;overflow:hidden}.demo-cap-bar i{background:var(--teal);width:0;height:100%;transition:width .3s linear;display:block}.demo-cap h3{font-family:var(--font-display);margin:10px 0 6px;font-size:1.2rem}.demo-cap p{color:var(--ink-muted);margin:0;font-size:.95rem;line-height:1.5}.demo[data-state=ready] .demo-cap{display:none}.demo-after{max-width:860px;margin:0 0 64px}.demo-after p{color:var(--ink-muted)}.demo-credit{margin-top:18px;font-size:12px;color:var(--ink-subtle)!important}.demo-cta{flex-wrap:wrap;gap:12px;margin-top:16px;display:flex}@media (width<=900px){.demo:not([data-state=ready]) .demo-split,.demo-split{grid-template-columns:1fr}.demo[data-state=ready] .demo-viz{display:none}.demo-viz{border-left:0;border-bottom:1px solid var(--border);order:-1}.demo-split{min-height:0}.demo-term-body{min-height:260px;max-height:340px}}@media (prefers-reduced-motion:reduce){.demo-viz .e,.demo-viz .n *,.caret{animation:none!important}.demo-split,.demo-viz .v{transition:none}}