.topbar #demoButton{margin-left:auto}
.topbar .header-note{margin-left:0}
.generated-card{display:grid;gap:7px}
.generated-card img{display:block;width:100%;border-radius:8px;background:#111;aspect-ratio:1;object-fit:contain}
.generated-card a{color:#d8c4ff;text-decoration:none;font-size:11px}
.generated-card a:hover{text-decoration:underline}
#resultState:has(.generated-card){display:grid;gap:12px;padding:8px;border-style:solid}
@media(max-width:700px){.topbar{height:auto;min-height:70px;flex-wrap:wrap;padding:10px 0}.topbar .header-note{display:none}.topbar #demoButton{margin-left:0}}
:root{color-scheme:dark;--bg:#0b0c10;--surface:#15161c;--surface-2:#1a1b22;--line:#30313b;--muted:#9395a3;--text:#f5f4f8;--violet:#ad8bfa;--cyan:#72dce9;--green:#7de3c3;--amber:#eab773}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 20% -10%,#1c1730 0,transparent 32%),var(--bg);color:var(--text);font-family:"Aptos Display","PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}button,textarea,select{font:inherit}button{cursor:pointer}button:focus-visible,textarea:focus-visible,select:focus-visible,.asset-add:focus-within{outline:2px solid var(--cyan);outline-offset:3px}.app{max-width:1500px;margin:auto;min-height:100vh;padding:0 28px 36px}.topbar{height:70px;display:flex;align-items:center;gap:28px;border-bottom:1px solid #292a34}.brand{display:flex;align-items:center;gap:10px;min-width:245px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#33264a;color:#cfb9ff;font-size:19px}.brand>span:last-child{display:grid;gap:1px}.brand strong{font-size:15px;letter-spacing:-.02em}.brand small{font-size:10px;color:var(--muted)}.header-note{margin-left:auto;color:#9da0aa;font-size:11px;white-space:nowrap}.live-dot{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:6px}.primary-button{border:0;border-radius:11px;background:linear-gradient(120deg,#c8b7ff,#a16cf0);color:#161022;font-size:12px;font-weight:750;padding:11px 15px;white-space:nowrap;box-shadow:0 7px 25px #7c3aed33}.primary-button:hover{filter:brightness(1.09)}.primary-button:disabled{opacity:.55;cursor:wait}
main{display:grid;gap:22px}.intro{display:flex;justify-content:space-between;gap:20px;align-items:end;padding:34px 2px 6px}.eyebrow{font-family:"Cascadia Code",monospace;letter-spacing:.14em;color:#a28ac3;font-size:9px;margin:0 0 8px}.intro h1{font-size:30px;letter-spacing:-.055em;margin:0 0 8px;font-weight:700}.lead{color:#a4a5af;font-size:12px;line-height:1.6;margin:0;max-width:680px}.step-count{display:grid;text-align:right;gap:0}.step-count span{font-family:"Cascadia Code",monospace;font-size:34px;line-height:1;color:#b49af0}.step-count small{color:#81838f;font-size:10px}
.panel{border:1px solid #31313b;border-radius:16px;background:linear-gradient(155deg,#1b1c22,#14151b);box-shadow:inset 0 1px #ffffff09,0 16px 50px #00000024}.composer{padding:18px 20px 20px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:18px}.section-head h2{font-size:16px;letter-spacing:-.025em;margin:0}.subtle-badge{border:1px solid #50415d;background:#2a2133;border-radius:7px;padding:5px 8px;color:#c4a9e3;font-size:9px}.field-label{display:block;color:#d0ced6;font-size:11px;font-weight:650;margin:15px 0 8px}textarea{display:block;width:100%;min-height:82px;resize:vertical;border:1px solid #3b3b46;border-radius:11px;background:#101115;color:#f4f2f7;font-size:12px;line-height:1.65;padding:12px 14px}textarea::placeholder{color:#747582}.settings-row{display:flex;gap:12px;align-items:end;margin-top:12px}.settings-row label{display:grid;gap:6px;color:#a8a9b2;font-size:10px;min-width:168px}.settings-row select{height:34px;padding:0 10px;background:#111217;color:#e5e4ea;border:1px solid #3a3a45;border-radius:8px;font-size:11px}.input-tip{margin-left:auto;color:#777985;font-size:10px}.assets-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-top:21px;padding-top:15px;border-top:1px solid #30313a}.assets-head>div{display:flex;align-items:center;gap:10px}.assets-head strong{font-size:12px}.assets-head span{color:#9293a0;font-size:10px}.assets-head p{margin:0;color:#777985;font-size:10px}.asset-row{display:flex;gap:10px;margin-top:11px;min-height:84px}.asset-add{width:160px;min-width:160px;display:grid;align-content:center;justify-items:center;gap:2px;border:1px dashed #6a5682;border-radius:10px;background:#211a2a;color:#e1cffa;cursor:pointer}.asset-add:hover{background:#2a2037}.asset-add span{font-size:18px;line-height:1}.asset-add strong{font-size:10px}.asset-add small{font-size:9px;color:#9a84b2}.asset-list{min-width:0;display:flex;gap:10px;overflow:auto;flex:1}.asset-empty{display:flex;align-items:center;color:#7f808c;font-size:10px;padding:0 10px}.asset-card{position:relative;width:150px;min-width:150px;height:84px;border:1px solid #444550;border-radius:10px;overflow:hidden;background:#17181d}.asset-card img{width:100%;height:100%;object-fit:cover;opacity:.75}.asset-role{position:absolute;bottom:5px;left:5px;background:#131419e8;border:1px solid #55535f;border-radius:5px;color:white;font-size:9px;max-width:108px;height:22px}.asset-remove{position:absolute;right:5px;top:5px;border:0;border-radius:5px;background:#15151bdc;color:#fff;font-size:15px;width:22px;height:22px}.asset-name{position:absolute;left:6px;top:5px;max-width:105px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#15151bcc;padding:3px 5px;border-radius:4px;font-size:8px}
.flow-section{min-width:0;padding-top:3px}.flow-heading{margin-bottom:7px}.flow-tabs{display:flex;gap:5px;padding:4px;background:#1b1c23;border:1px solid #34343e;border-radius:10px}.flow-tab{border:0;background:transparent;color:#aaaab5;border-radius:7px;padding:8px 17px;font-size:11px}.flow-tab.active{background:#453358;color:#f8ebff;box-shadow:inset 0 1px #ffffff1f}.route-explanation{color:#9395a0;font-size:11px;margin:0 0 11px}.flow-scroll{width:100%;overflow-x:auto;border:1px solid #2d2e37;border-radius:16px;background:#0e0f14;scrollbar-color:#5d526e #16171b}.flow-board{position:relative;width:1280px;height:250px;background-image:radial-gradient(#ffffff16 1px,transparent 1px);background-size:23px 23px}.flow-lines{position:absolute;inset:0;width:1280px;height:250px;overflow:visible}.flow-lines path{fill:none;stroke:#867a9c;stroke-width:2}.flow-lines path.done{stroke:var(--green);stroke-width:3}.flow-lines path.active{stroke:var(--cyan);stroke-width:3;stroke-dasharray:7 5;animation:travel .55s linear infinite}.flow-lines .arrow{fill:#867a9c}.flow-lines .arrow.done{fill:var(--green)}.flow-lines .arrow.active{fill:var(--cyan)}.flow-node{position:absolute;top:80px;width:180px;height:90px;padding:13px;border:1px solid #45424f;background:linear-gradient(150deg,#202027,#17181e);border-radius:14px;box-shadow:0 9px 24px #0008;display:flex;flex-direction:column;justify-content:space-between;cursor:default}.flow-node.active{border-color:var(--cyan);box-shadow:0 0 0 1px #72dce933,0 12px 25px #0008}.flow-node.done{border-color:#527767}.flow-node .node-index{font-family:"Cascadia Code",monospace;font-size:8px;color:#9a8bad;letter-spacing:.07em}.flow-node .node-title{font-size:12px;font-weight:700;line-height:1.2}.flow-node .node-meta{font-size:9px;color:#9a9ba7;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.flow-node .node-type{position:absolute;right:10px;top:12px;color:#777a86;font-size:8px}.flow-node:first-child{border-color:#73618c}.flow-node:last-child{border-color:#598377}.flow-foot{display:flex;justify-content:space-between;gap:12px;color:#757782;font-size:9px;padding:8px 3px 0}.flow-foot span:last-child{display:none}
.details-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.detail-card{min-height:158px;padding:17px}.detail-card h3{font-size:13px;margin:0 0 9px}.detail-card>p:not(.eyebrow){color:#aaaab5;font-size:10px;line-height:1.6;margin:0}.intent-summary{color:#a9aab5;font-size:10px;line-height:1.65;min-height:34px}.intent-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}.intent-tags span{padding:4px 7px;border:1px solid #514462;background:#2c2438;color:#ddcafd;border-radius:5px;font-size:9px}.model-status{margin-top:14px;color:#8b8d99;font-size:9px;display:flex;align-items:center;gap:7px}.model-status span:first-child{width:7px;height:7px;border-radius:50%;background:#72737e}.model-status.ready span:first-child{background:var(--green)}.result-placeholder{margin-top:10px;border:1px dashed #4a4b55;border-radius:8px;padding:12px;color:#82848f;font-size:10px;text-align:center}.toast{position:fixed;right:22px;bottom:20px;z-index:30;background:#292330;border:1px solid #6b5683;color:#f5eaff;padding:11px 15px;border-radius:9px;font-size:11px;box-shadow:0 18px 45px #0008;opacity:0;transform:translateY(9px);pointer-events:none;transition:opacity .25s,transform .25s}.toast.show{opacity:1;transform:translateY(0)}@keyframes travel{to{stroke-dashoffset:-12}}
@media(max-width:900px){.app{padding:0 16px 30px}.details-grid{grid-template-columns:1fr}.intro h1{font-size:25px}.flow-foot span:last-child{display:inline}.assets-head p{display:none}.input-tip{display:none}}
.reference-warning{margin:11px 0 0!important;padding:9px 10px;border:1px solid #c68a48;border-radius:7px;background:#3b2a1c;color:#ffd5a5!important;font-size:10px!important;line-height:1.55}
.reference-warning[hidden]{display:none}
@media(max-width:560px){.topbar{gap:10px}.brand{min-width:0}.brand small,.header-note{display:none}.primary-button{margin-left:auto;padding:10px 12px}.intro{padding-top:24px}.intro h1{font-size:22px}.step-count{display:none}.composer{padding:16px}.settings-row{flex-wrap:wrap}.settings-row label{flex:1;min-width:115px}.asset-add{width:120px;min-width:120px}.flow-heading{align-items:end}.flow-tab{padding:8px 11px}.flow-foot{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.account-button,.secondary-button,.icon-button{border:1px solid #565160;background:#222029;color:#eee8f7;border-radius:9px;padding:9px 12px;font-size:11px}.account-button:hover,.secondary-button:hover,.icon-button:hover{background:#30283a}.flow-node{text-align:left;color:var(--text);font:inherit}.flow-node:hover,.flow-node.selected{border-color:#c0a7ff;box-shadow:0 0 0 2px #a78bfa40,0 9px 24px #0008}.flow-node:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.step-inspector,.history-panel{padding:20px}.inspector-help{color:#a9a8b4;font-size:11px;line-height:1.6;margin:12px 0}.inspector-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.inspector-fields label{display:grid;gap:7px;color:#ccc4d9;font-size:11px}.inspector-fields textarea{min-height:132px;font-family:"Cascadia Code","Microsoft YaHei",monospace;font-size:10px}.inspector-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:13px}.inspector-actions span{color:#8f8b9c;font-size:10px}.inspector-actions>div{display:flex;gap:8px}.history-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}.history-item{border:1px solid #3a3b44;border-radius:10px;overflow:hidden;background:#111218}.history-item img{display:block;width:100%;aspect-ratio:1;object-fit:cover}.history-item div{padding:9px;font-size:10px;color:#c5c4ce}.history-empty{font-size:11px;color:#858592}.auth-dialog{width:min(420px,calc(100% - 32px));border:1px solid #5a5069;border-radius:16px;background:#1c1a22;color:var(--text);padding:20px;box-shadow:0 30px 80px #000b}.auth-dialog::backdrop{background:#000a}.auth-dialog h2{font-size:17px;margin:0}.auth-dialog p{font-size:11px;color:#a7a3b1;line-height:1.6}.auth-dialog label{display:grid;gap:6px;font-size:11px;margin-top:12px}.auth-dialog input{height:38px;border:1px solid #55505e;border-radius:8px;background:#101014;color:white;padding:0 10px}.auth-actions{display:flex;gap:8px;margin-top:17px}.auth-actions button{flex:1}@media(max-width:700px){.inspector-fields{grid-template-columns:1fr}.inspector-actions{align-items:stretch;flex-direction:column}.inspector-actions>div{justify-content:flex-end}}@media(max-width:560px){.account-button{padding:9px;font-size:10px}}
.flow-lines{pointer-events:none}
.guest-mode{color:#b5b7c2;font-size:10px;white-space:nowrap}
.error-details{margin-top:12px;padding:10px;border:1px solid #b96b69;border-radius:8px;background:#352022;color:#ffd4d0;font-size:10px;line-height:1.6;white-space:pre-line;overflow-wrap:anywhere}
.error-details[hidden]{display:none}
@media(max-width:560px){.guest-mode{width:100%;order:2}.topbar #demoButton{order:3}.topbar #generateButton{order:4}}