.demo-root{--ink:#11142b;--muted:#687086;--line:#e4e7f0;--soft:#f7f8fc;--violet:#7c3aed;--blue:#3867f4;--green:#16a36a;--shadow:0 24px 70px #1c23461f;color:var(--ink);font-family:var(--font-geist-sans), Inter, ui-sans-serif, system-ui, sans-serif}.demo-root *,.demo-root :before,.demo-root :after{box-sizing:border-box}.demo-root button,.demo-root a{font:inherit}.demo-root .primary{color:#fff;background:linear-gradient(135deg, var(--blue), var(--violet));cursor:pointer;border:0;border-radius:13px;padding:13px 20px;font-weight:750;box-shadow:0 10px 30px #5b4be640}.demo-root .secondary{border:1px solid var(--line);color:var(--ink);cursor:pointer;background:#fff;border-radius:12px;padding:11px 16px;text-decoration:none}.demo-root .large{padding:14px 22px}.demo-root .app-shell{border:1px solid var(--line);max-width:1380px;min-height:660px;box-shadow:var(--shadow);background:#fff;border-radius:26px;grid-template-columns:230px 1fr;margin:auto;display:grid;overflow:hidden}.demo-root .sidebar{border-right:1px solid var(--line);background:#fafbfe;padding:24px 15px}.demo-root .side-title{letter-spacing:.12em;color:#8b92a4;padding:5px 12px 17px;font-size:11px}.demo-root .stage{text-align:left;color:#52596e;cursor:pointer;background:0 0;border:0;border-radius:13px;align-items:center;gap:12px;width:100%;padding:14px 10px;display:flex}.demo-root .stage i{background:#fff;border:1px solid #d9dce8;border-radius:9px;place-items:center;width:29px;height:29px;font-style:normal;font-weight:750;display:grid}.demo-root .stage span{font-weight:720}.demo-root .stage small{color:#9298a8;margin-top:2px;font-weight:450;display:block}.demo-root .stage.active{color:#4e2ac7;background:#eeeaff}.demo-root .stage.active i{color:#fff;background:linear-gradient(135deg, var(--violet), var(--blue));border-color:#0000}.demo-root .workspace{padding:30px 34px}.demo-root .workspace-top{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding-bottom:20px;display:flex}.demo-root .crumb{color:#878ea1;font-size:12px}.demo-root .workspace h3{margin:5px 0 0;font-size:25px}.demo-root .status-pill{color:#666d7f;background:#f2f3f7;border-radius:999px;padding:8px 13px;font-size:12px;font-weight:750}.demo-root .view{padding-top:30px;display:none}.demo-root .view.active{animation:.35s demofade;display:block}@keyframes demofade{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.demo-root label{margin-bottom:10px;font-weight:760;display:block}.demo-root textarea{resize:vertical;width:100%;min-height:150px;font:inherit;border:1px solid #d9ddea;border-radius:16px;outline:none;padding:18px;font-size:18px;line-height:1.5;box-shadow:inset 0 1px 2px #00000005}.demo-root textarea:focus{border-color:#a898f0;box-shadow:0 0 0 4px #eeeaff}.demo-root .suggestions,.demo-root .model-row{flex-wrap:wrap;gap:9px;margin:16px 0 26px;display:flex}.demo-root .suggestions button,.demo-root .choice{border:1px solid var(--line);color:#5f6679;cursor:pointer;background:#fff;border-radius:999px;padding:9px 12px}.demo-root .model-row{border:1px solid var(--line);background:#fafbfe;border-radius:16px;align-items:center;padding:20px}.demo-root .model-row span{margin-right:auto;font-weight:720}.demo-root .choice.selected{color:#5732cb;background:#f1edff;border-color:#a797ef}.demo-root .generation-header{justify-content:space-between;display:flex}.demo-root .generation-header small{color:var(--muted);margin-top:4px;display:block}.demo-root .generation-header>span{color:var(--violet);font-size:24px;font-weight:800}.demo-root .progress{background:#eeeef5;border-radius:10px;height:8px;margin:17px 0 22px;overflow:hidden}.demo-root .progress span{background:linear-gradient(90deg, var(--blue), var(--violet));width:0;height:100%;transition:width .35s;display:block}.demo-root .build-log{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:22px;display:grid}.demo-root .log-item{border:1px solid var(--line);color:#667085;background:#fff;border-radius:12px;padding:12px}.demo-root .log-item.done{color:#176a4a;background:#f3fbf7;border-color:#cdeede}.demo-root .generated-canvas{border:1px solid var(--line);background:radial-gradient(circle,#f2edff,#fbfcff 55%,#fff);border-radius:18px;min-height:310px;position:relative;overflow:hidden}.demo-root .agent-node{opacity:0;background:#fff;border:1px solid #d7d2f0;border-radius:15px;width:150px;padding:15px;animation:.45s forwards demopop;position:absolute;transform:scale(.7);box-shadow:0 12px 28px #38306e1c}.demo-root .agent-node strong{display:block}.demo-root .agent-node small{color:var(--muted)}@keyframes demopop{to{opacity:1;transform:scale(1)}}.demo-root .hidden{display:none!important}.demo-root .connect-grid{grid-template-columns:1fr 1fr;gap:24px;display:grid}.demo-root .connect-grid h4,.demo-root .deploy-title{font-size:19px}.demo-root .connector-list,.demo-root .provider-list{gap:10px;display:grid}.demo-root .connector,.demo-root .provider{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:14px;align-items:center;gap:12px;padding:14px;display:flex}.demo-root .connector.selected,.demo-root .provider.selected{background:#f7f4ff;border-color:#aa9af0}.demo-root .connector .logo,.demo-root .provider .logo{color:#5b36cc;background:#f0edff;border-radius:10px;place-items:center;width:36px;height:36px;font-weight:850;display:grid}.demo-root .connector b,.demo-root .provider b{display:block}.demo-root .connector small,.demo-root .provider small{color:var(--muted)}.demo-root .connector em,.demo-root .provider em{color:#aaa;margin-left:auto;font-style:normal}.demo-root .selected em{color:var(--green)}.demo-root .connection-summary{color:#5f6678;background:#f7f8fc;border-radius:14px;justify-content:space-between;margin:24px 0;padding:16px 18px;display:flex}.demo-root .test-console{border:1px solid var(--line);background:#fafbfe;border-radius:18px;padding:20px}.demo-root .test-input span{color:#888fa2;font-size:12px}.demo-root .test-input p{margin:8px 0 20px;font-size:18px}.demo-root .timeline{gap:10px;display:grid}.demo-root .timeline-item{border:1px solid var(--line);opacity:.35;background:#fff;border-radius:12px;align-items:center;gap:12px;padding:12px;display:flex}.demo-root .timeline-item.running{opacity:1;border-color:#aa9af0}.demo-root .timeline-item.done{opacity:1}.demo-root .timeline-item i{color:#623bd1;background:#eeeaff;border-radius:8px;place-items:center;width:27px;height:27px;font-style:normal;display:grid}.demo-root .test-result{background:#eefaf4;border:1px solid #ccebdc;border-radius:14px;align-items:center;gap:14px;margin-top:16px;padding:16px;display:flex}.demo-root .test-result p{color:#52705f;margin:4px 0 0}.demo-root .check{background:var(--green);color:#fff;border-radius:50%;place-items:center;width:34px;height:34px;display:grid}.demo-root .metrics{grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0;display:grid}.demo-root .metrics div{border:1px solid var(--line);border-radius:13px;padding:15px}.demo-root .metrics span{color:var(--muted);font-size:12px;display:block}.demo-root .metrics b{font-size:20px}.demo-root .deploy-options{grid-template-columns:repeat(3,1fr);gap:15px;display:grid}.demo-root .deploy-card{border:1px solid var(--line);text-align:left;cursor:pointer;background:#fff;border-radius:17px;min-height:160px;padding:20px}.demo-root .deploy-card span{color:var(--violet);margin-bottom:16px;font-size:28px;display:block}.demo-root .deploy-card b,.demo-root .deploy-card small{display:block}.demo-root .deploy-card small{color:var(--muted);margin-top:7px}.demo-root .deploy-card.selected{background:#f7f4ff;border-color:#9e8bea;box-shadow:0 0 0 3px #eeeaff}.demo-root .deploy-progress{justify-content:center;align-items:center;gap:16px;margin:45px auto;display:flex}.demo-root .deploy-progress small{color:var(--muted);margin-top:6px;display:block}.demo-root .spinner{border:4px solid #e8e5f4;border-top-color:var(--violet);border-radius:50%;width:38px;height:38px;animation:1s linear infinite demospin}@keyframes demospin{to{transform:rotate(360deg)}}.demo-root .success{text-align:center;padding:28px}.demo-root .success-icon{background:var(--green);color:#fff;border-radius:50%;place-items:center;width:58px;height:58px;margin:auto;font-size:28px;display:grid}.demo-root .success h3{font-size:32px}.demo-root .success p{color:var(--muted)}.demo-root .success-tags{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.demo-root .success-tags span{background:#f2f4f8;border-radius:999px;padding:8px 11px;font-size:12px}@media (max-width:980px){.demo-root .app-shell{grid-template-columns:1fr}.demo-root .sidebar{border-right:0;border-bottom:1px solid var(--line);display:flex;overflow:auto}.demo-root .side-title{display:none}.demo-root .stage{min-width:150px}.demo-root .connect-grid{grid-template-columns:1fr}}@media (max-width:640px){.demo-root .workspace{padding:22px 16px}.demo-root .app-shell{border-radius:18px}.demo-root .build-log,.demo-root .metrics,.demo-root .deploy-options{grid-template-columns:1fr}.demo-root .connection-summary{gap:8px;display:grid}}