:root{color-scheme:dark;--bg:#0d1113;--panel:#182025;--panel2:#12191c;--line:#314047;--text:#f2f5f6;--muted:#91a0a8;--accent:#d9aa4e;--bad:#e57b69;--ok:#5eb788}
*{box-sizing:border-box}body{margin:0;height:100vh;overflow:hidden;background:var(--bg);color:var(--text);font:13px "Microsoft YaHei UI",sans-serif}button,input,select,textarea{font:inherit}
.topbar{height:64px;display:flex;align-items:center;gap:16px;padding:0 22px;border-bottom:1px solid var(--line);background:#13191c}.topbar>a{color:var(--accent);font-size:25px;text-decoration:none}.topbar strong{font-size:17px}.topbar>span{color:var(--accent)}.topbar .session-label{margin-left:auto;color:var(--muted);font-size:11px}.topbar code{color:var(--muted)}
button{padding:9px 11px;border:1px solid var(--line);border-radius:4px;background:#222c31;color:var(--text);cursor:pointer}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.45;cursor:not-allowed}.primary{background:var(--accent);color:#171717;font-weight:700}.failure{color:var(--bad)!important}
.error-banner{position:absolute;z-index:8;left:0;right:0;top:64px;padding:10px 22px;border-bottom:1px solid #743b34;background:#2b1715;color:#f0b1a9;white-space:pre-wrap}.error-banner:not([hidden])~.sidebar,.error-banner:not([hidden])~.viewport{top:104px}
.sidebar{position:absolute;left:0;top:64px;bottom:0;width:310px;overflow:auto;padding:18px;border-right:1px solid var(--line);background:#141a1d}.sidebar section+section{margin-top:22px;padding-top:4px;border-top:1px solid var(--line)}.sidebar h2{margin:14px 0 10px;color:var(--accent);font-size:14px}.sidebar h2:first-child{margin-top:0}.sidebar label{display:flex;flex-direction:column;gap:7px;margin:10px 0;color:var(--muted)}textarea,select,input{width:100%;padding:9px;border:1px solid var(--line);border-radius:3px;background:#0e1417;color:var(--text)}.sidebar section>button{width:100%;margin:5px 0}.selection{display:grid;grid-template-columns:1fr 1fr;gap:7px 10px;margin:10px 0;padding:10px;border:1px solid var(--line);background:var(--panel2)}.selection span{color:var(--muted)}.selection strong{text-align:right}.help{color:var(--muted);font-size:11px;line-height:1.55}.action-controls{display:grid;grid-template-columns:1fr 1fr;gap:6px}.action-controls button{display:flex;flex-direction:column;gap:3px}.action-controls small{color:var(--muted);font-size:10px}.log{max-height:180px;overflow:auto;color:var(--muted);font:11px/1.5 Consolas,sans-serif}.log p{margin:0 0 7px}.export-panel{padding-bottom:22px}.export-result{display:flex;flex-direction:column;gap:8px;margin-top:9px}.export-result a{color:var(--accent)}.export-result .download{display:block;padding:9px;border-radius:4px;background:var(--ok);color:#102017;text-align:center;text-decoration:none;font-weight:700}
.viewport{position:absolute;left:310px;right:0;top:64px;bottom:0;overflow:hidden;cursor:grab;touch-action:none;background-color:var(--bg);background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-position:var(--grid-x,0) var(--grid-y,0);background-size:var(--grid-size,24px) var(--grid-size,24px)}.viewport.panning{cursor:grabbing}.world{position:absolute;left:0;top:0;width:max-content;height:max-content;transform-origin:0 0;will-change:transform}.flow{width:3050px;min-height:3860px;display:flex;align-items:flex-start;gap:30px;padding:45px}.flow>i{margin-top:300px;color:var(--accent);font-size:32px;font-style:normal}.stage{width:250px}.stage h2{height:28px;margin:0 0 14px;color:var(--muted);font-size:14px}.stage.action-stage{width:760px}.canvas-hint{position:absolute;right:16px;bottom:14px;padding:7px 10px;border:1px solid var(--line);border-radius:4px;background:#13191ce8;color:var(--muted);pointer-events:none}
article{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:160px;padding:8px;border:1px solid var(--line);border-radius:5px;background:var(--panel);overflow:hidden}article.empty{color:var(--muted)}article.failed{border-color:#84483f;background:#241816}article img,article video{width:100%;height:122px;object-fit:contain;background:repeating-conic-gradient(#303a3f 0 25%,#242d31 0 50%) 50%/18px 18px}article img[role=button]{cursor:zoom-in}article span,article small{color:var(--muted);font-size:10px}.direction-list{display:flex;flex-direction:column;gap:12px}.media-empty{display:grid;place-items:center;width:100%;height:100px;border:1px dashed var(--line)}
.action-group{margin-bottom:44px}.action-group>h3{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;font-size:14px}.action-group>h3 span{color:var(--muted);font-size:11px;font-weight:400}.nine-grid{display:grid;grid-template-columns:repeat(3,230px);grid-auto-rows:minmax(208px,auto);gap:12px}.nine-grid article{min-height:208px}.nine-grid article img,.nine-grid article video{height:132px}.action-center{border-color:var(--accent);background:#242116}.action-center>button{min-width:110px;background:var(--accent);color:#171717;font-weight:700}.card-buttons{display:flex;gap:5px;width:100%}.card-buttons button{flex:1;padding:5px;font-size:10px}.failure{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
dialog{max-width:none;padding:0;border:1px solid var(--line);border-radius:7px;background:#111719;color:var(--text)}dialog::backdrop{background:rgb(0 0 0/.78)}.dialog-head{display:flex;align-items:center;gap:14px;padding:12px 14px;border-bottom:1px solid var(--line);background:#172024}.dialog-head span{color:var(--muted);font:11px Consolas,sans-serif}.dialog-head button{margin-left:auto}.catalog-dialog{width:min(1050px,94vw);height:min(800px,90vh);overflow:auto}.catalog-tools{display:flex;align-items:end;gap:12px;padding:14px}.catalog-tools label{flex:1;display:flex;flex-direction:column;gap:6px;color:var(--muted)}#catalogStatus{padding:0 14px;color:var(--muted)}.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;padding:14px}.catalog-grid article img{height:150px}
.preview-dialog{width:min(1200px,96vw);height:min(880px,94vh)}.preview-layout{display:grid;grid-template-columns:minmax(0,1fr) 390px;height:calc(100% - 58px)}.preview-media{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto;background:repeating-conic-gradient(#303a3f 0 25%,#242d31 0 50%) 50%/24px 24px}.preview-media img,.preview-media video{display:block;max-width:100%;max-height:100%;object-fit:contain}.diagnostics{min-height:0;overflow:auto;padding:16px;border-left:1px solid var(--line);background:#141b1e}.diagnostics h3{margin:18px 0 9px;color:var(--accent);font-size:13px}.diagnostics h3:first-child{margin-top:0}.diagnostics pre{max-height:310px;overflow:auto;padding:12px;border:1px solid var(--line);background:#0d1214;color:#d8dde0;white-space:pre-wrap;word-break:break-word;font:12px/1.6 "Microsoft YaHei UI",sans-serif}.reference-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.reference-grid a{display:flex;flex-direction:column;gap:4px;color:var(--muted);text-decoration:none}.reference-grid img{width:100%;height:110px;object-fit:contain;background:#20292d}.attempt-tabs{display:flex;flex-wrap:wrap;gap:6px}.attempt-tabs button.active{border-color:var(--accent);color:var(--accent)}#attemptMeta{color:var(--bad);white-space:pre-wrap}
@media(max-width:820px){.sidebar{width:260px}.viewport{left:260px}.topbar .session-label,.topbar code{display:none}.preview-layout{grid-template-columns:1fr}.diagnostics{display:none}.canvas-hint{display:none}}