:is(.v48-shell,.v48-scope) .story-coding-agents{--ink:#294333;--sage:#e8efdd;--line:#dce5d5;--peach:#f8e5d7;--yellow:#f8efcb;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;position:relative;overflow:hidden;min-height:440px;font-size:13px}
:is(.v48-shell,.v48-scope) .story-coding-agents *{box-sizing:border-box}:is(.v48-shell,.v48-scope) .story-coding-agents .eyebrow{font:10px monospace;letter-spacing:1.5px;text-transform:uppercase;color:#6c7c61}:is(.v48-shell,.v48-scope) .story-coding-agents h3{font-size:24px;font-weight:500;margin:8px 0 0}:is(.v48-shell,.v48-scope) .story-coding-agents .canvas{position:relative;height:270px;margin:16px 0;min-width:0}:is(.v48-shell,.v48-scope) .story-coding-agents .foot{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:43px}:is(.v48-shell,.v48-scope) .story-coding-agents .foot small{max-width:65%;font-size:11px}:is(.v48-shell,.v48-scope) .story-coding-agents .tag{padding:5px 9px;border:1px solid var(--line);border-radius:20px;font:10px monospace;background:#f7f9f3;display:inline-block}:is(.v48-shell,.v48-scope) .story-coding-agents .paper{background:white;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px #29433309;padding:18px}:is(.v48-shell,.v48-scope) .story-coding-agents .muted{color:#71806a}:is(.v48-shell,.v48-scope) .story-coding-agents .mono{font-family:monospace}:is(.v48-shell,.v48-scope) .story-coding-agents .seal{background:var(--sage);border:1px solid #bfd0ad;border-radius:50%;display:grid;place-items:center;width:64px;height:64px;font-size:24px}:is(.v48-shell,.v48-scope) .story-coding-agents .graphic{width:100%;height:100%;overflow:visible}:is(.v48-shell,.v48-scope) .story-coding-agents .graphic path,:is(.v48-shell,.v48-scope) .story-coding-agents .graphic line{fill:none;stroke:#b9c9ae;stroke-width:2}:is(.v48-shell,.v48-scope) .story-coding-agents .graphic text{fill:var(--ink);font-family:monospace;font-size:12px}:is(.v48-shell,.v48-scope) .story-coding-agents .draw{stroke-dasharray:800;stroke-dashoffset:800;transition:stroke-dashoffset 1.4s ease}:is(.v48-shell,.v48-scope) .as-panel.is-acted .story-coding-agents .draw{stroke-dashoffset:0}:is(.v48-shell,.v48-scope) .story-coding-agents .shift{transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity .6s,background .6s,border-color .6s}:is(.v48-shell,.v48-scope) .story-coding-agents .line{height:7px;background:#e7ecdf;margin:10px 0;border-radius:5px}:is(.v48-shell,.v48-scope) .story-coding-agents .line.short{width:65%}:is(.v48-shell,.v48-scope) .story-coding-agents pre{margin:0}:is(.v48-shell,.v48-scope) .story-coding-agents .pill{padding:10px 16px;border-radius:8px;border:1px solid var(--line);background:white}:is(.v48-shell,.v48-scope) .story-coding-agents .status{background:var(--sage);border-radius:6px;padding:10px 14px;font-size:12px}:is(.v48-shell,.v48-scope) .story-coding-agents .warm{background:var(--peach)}
@media(max-width:600px){:is(.v48-shell,.v48-scope) .story-coding-agents{padding:16px;min-height:430px}:is(.v48-shell,.v48-scope) .story-coding-agents h3{font-size:20px}:is(.v48-shell,.v48-scope) .story-coding-agents .canvas{height:290px}:is(.v48-shell,.v48-scope) .story-coding-agents .foot{align-items:flex-start;gap:10px}:is(.v48-shell,.v48-scope) .story-coding-agents .foot small{max-width:50%;font-size:10px}:is(.v48-shell,.v48-scope) .story-coding-agents .paper{padding:12px}}
@media(prefers-reduced-motion:reduce){:is(.v48-shell,.v48-scope) .story-coding-agents *{transition:none!important;animation:none!important}}

:is(.v48-shell,.v48-scope) .story-coding-agents .editor-window{position:absolute;left:0;top:0;width:56%;height:245px;background:#f8faf4}:is(.v48-shell,.v48-scope) .story-coding-agents .window-dots{font-size:9px;color:#a6b698;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:20px}:is(.v48-shell,.v48-scope) .story-coding-agents .window-dots span{float:right;color:#6c7a62}:is(.v48-shell,.v48-scope) .story-coding-agents .terminal{position:absolute;right:0;bottom:0;width:40%;height:170px;background:#294333;color:#e5eedc}:is(.v48-shell,.v48-scope) .story-coding-agents .terminal pre,:is(.v48-shell,.v48-scope) .story-coding-agents .terminal .eyebrow{color:#d8e6c8}:is(.v48-shell,.v48-scope) .story-coding-agents .terminal pre{font-size:10px;margin-top:20px}:is(.v48-shell,.v48-scope) .story-coding-agents .editor-tools{margin-top:15px;padding:12px;border:1px dashed #a8bf94;font:11px/2 monospace;opacity:0;transform:translateX(30px)}:is(.v48-shell,.v48-scope) .as-panel.is-complete .story-coding-agents .editor-tools{transform:none;opacity:1}:is(.v48-shell,.v48-scope) .story-coding-agents .cable{position:absolute;left:52%;top:40px;width:12%;height:70px;border-top:3px solid #9cb789;border-right:3px solid #9cb789;transform:scaleY(.1);transform-origin:bottom;opacity:.3}:is(.v48-shell,.v48-scope) .as-panel.is-acted .story-coding-agents .cable{transform:none;opacity:1}:is(.v48-shell,.v48-scope) .story-coding-agents .local-plug{position:absolute;left:47%;top:20px;padding:12px;background:var(--sage);border:1px solid #b8cda6;border-radius:5px;transform:translateX(45px);font:10px monospace}:is(.v48-shell,.v48-scope) .as-panel.is-settled .story-coding-agents .local-plug{transform:none}:is(.v48-shell,.v48-scope) .story-coding-agents .handshake{position:absolute;top:15px;width:34%;padding:18px;display:grid;gap:15px;text-align:center}:is(.v48-shell,.v48-scope) .story-coding-agents .handshake b{font-size:22px;font-weight:500}:is(.v48-shell,.v48-scope) .story-coding-agents .handshake>span:last-child{font:10px monospace}:is(.v48-shell,.v48-scope) .story-coding-agents .desktop{left:0}:is(.v48-shell,.v48-scope) .story-coding-agents .remote{right:0}:is(.v48-shell,.v48-scope) .story-coding-agents .half{position:absolute;top:130px;width:125px;height:65px;display:grid;place-items:center;border:1px solid #b8c8a8;background:var(--sage);font:12px monospace}:is(.v48-shell,.v48-scope) .story-coding-agents .left-half{left:13%;border-radius:40px 5px 5px 40px}:is(.v48-shell,.v48-scope) .story-coding-agents .right-half{right:13%;border-radius:5px 40px 40px 5px;background:var(--yellow)}:is(.v48-shell,.v48-scope) .as-panel.is-acted .story-coding-agents .left-half{left:calc(50% - 125px)}:is(.v48-shell,.v48-scope) .as-panel.is-acted .story-coding-agents .right-half{right:calc(50% - 125px)}:is(.v48-shell,.v48-scope) .story-coding-agents .joined-session{position:absolute;left:0;right:0;top:220px;text-align:center;display:grid;gap:8px}:is(.v48-shell,.v48-scope) .story-coding-agents .dock-base{position:absolute;left:5%;right:5%;bottom:15px;height:110px;border-radius:12px;background:#edf2e5;border:1px solid #bdceab;padding:18px;box-shadow:0 14px 0 #e0e8d6}:is(.v48-shell,.v48-scope) .story-coding-agents .dock-base>span{font:9px monospace;letter-spacing:2px}:is(.v48-shell,.v48-scope) .story-coding-agents .dock-slots{display:flex;justify-content:space-around;margin-top:15px}:is(.v48-shell,.v48-scope) .story-coding-agents .dock-slots i{width:23%;height:35px;border:1px dashed #afc19e;border-radius:5px}:is(.v48-shell,.v48-scope) .story-coding-agents .tool-module{position:absolute;top:5px;width:23%;height:100px;display:grid;place-items:center;background:white;border:1px solid var(--line);border-radius:10px;box-shadow:0 9px 0 #e6ecdf}:is(.v48-shell,.v48-scope) .story-coding-agents .tool-module b{font-size:30px}:is(.v48-shell,.v48-scope) .story-coding-agents .tool-module span{font:10px monospace}:is(.v48-shell,.v48-scope) .story-coding-agents .tool-one{left:10%}:is(.v48-shell,.v48-scope) .story-coding-agents .tool-two{left:38%}:is(.v48-shell,.v48-scope) .story-coding-agents .tool-three{left:66%;background:#faf0e8}:is(.v48-shell,.v48-scope) .as-panel.is-acted .story-coding-agents .tool-one{transform:translateY(110px);background:var(--sage)}:is(.v48-shell,.v48-scope) .as-panel.is-settled .story-coding-agents .tool-two{transform:translateY(110px);background:var(--sage)}:is(.v48-shell,.v48-scope) .as-panel.is-complete .story-coding-agents .tool-three{transform:translateY(-4px) rotate(5deg);opacity:.4}:is(.v48-shell,.v48-scope) .story-coding-agents .excluded{position:absolute;right:3%;top:118px;font-size:9px}:is(.v48-shell,.v48-scope) .story-coding-agents .code-column{position:absolute;left:0;width:62%;height:100%;border-right:1px solid var(--line);padding:5px 20px 0 0}:is(.v48-shell,.v48-scope) .story-coding-agents .code-column pre{margin-top:22px;font-size:15px}:is(.v48-shell,.v48-scope) .story-coding-agents .code-result{margin-top:20px;border-left:3px solid #91ae76;padding:14px;background:#f1f6e8;display:grid;gap:7px;transform:translateY(30px);opacity:0}:is(.v48-shell,.v48-scope) .as-panel.is-complete .story-coding-agents .code-result{opacity:1;transform:none}:is(.v48-shell,.v48-scope) .story-coding-agents .code-result span{font-size:9px}:is(.v48-shell,.v48-scope) .story-coding-agents .code-result p{font-size:11px}:is(.v48-shell,.v48-scope) .story-coding-agents .broker-column{position:absolute;right:0;width:32%;height:100%;text-align:center}:is(.v48-shell,.v48-scope) .story-coding-agents .broker-block{margin:20px auto 0;padding:20px;background:var(--sage);border:1px solid #bbcda6;border-radius:10px;font-size:28px}:is(.v48-shell,.v48-scope) .story-coding-agents .broker-block small{display:block;font-size:9px;margin-top:8px}:is(.v48-shell,.v48-scope) .story-coding-agents .provider-mark{position:absolute;bottom:10px;width:100%;border-top:1px solid #b2c49e;padding-top:15px;font-size:11px}:is(.v48-shell,.v48-scope) .story-coding-agents .issue-packet{position:absolute;left:calc(50% - 25px);top:185px;background:var(--yellow);padding:12px;border-radius:5px;font:12px monospace;opacity:0}:is(.v48-shell,.v48-scope) .as-panel.is-acted .story-coding-agents .issue-packet{opacity:1;transform:translateY(-65px)}:is(.v48-shell,.v48-scope) .as-panel.is-settled .story-coding-agents .issue-packet{transform:translate(-150px,-65px);opacity:0}@media(max-width:600px){:is(.v48-shell,.v48-scope) .story-coding-agents .editor-window{width:54%;padding:12px}:is(.v48-shell,.v48-scope) .story-coding-agents .editor-window pre{font-size:9px}:is(.v48-shell,.v48-scope) .story-coding-agents .terminal{width:44%;padding:10px}:is(.v48-shell,.v48-scope) .story-coding-agents .terminal pre{font-size:8px}:is(.v48-shell,.v48-scope) .story-coding-agents .editor-tools{font-size:9px;padding:7px}:is(.v48-shell,.v48-scope) .story-coding-agents .handshake{width:42%;padding:8px}:is(.v48-shell,.v48-scope) .story-coding-agents .handshake b{font-size:18px}:is(.v48-shell,.v48-scope) .story-coding-agents .handshake>span:last-child{font-size:8px}:is(.v48-shell,.v48-scope) .story-coding-agents .half{width:90px}:is(.v48-shell,.v48-scope) .as-panel.is-acted .story-coding-agents .left-half{left:calc(50% - 90px)}:is(.v48-shell,.v48-scope) .as-panel.is-acted .story-coding-agents .right-half{right:calc(50% - 90px)}:is(.v48-shell,.v48-scope) .story-coding-agents .tool-module span{font-size:7px}:is(.v48-shell,.v48-scope) .story-coding-agents .code-column{width:58%;padding-right:10px}:is(.v48-shell,.v48-scope) .story-coding-agents .code-column pre{font-size:11px}:is(.v48-shell,.v48-scope) .story-coding-agents .broker-column{width:37%}:is(.v48-shell,.v48-scope) .story-coding-agents .code-result{padding:9px;font-size:11px}:is(.v48-shell,.v48-scope) .story-coding-agents .code-result p{font-size:10px}}