:root{--bg:#0a0d10;--panel:#12161b;--panel2:#191e24;--line:#30363d;--muted:#999fa8;--text:#edece7;--soft:#bfc3ca;--accent:#dec99b;--sans:system-ui,-apple-system,'Segoe UI','Microsoft YaHei',sans-serif}
html[data-theme=light]{--bg:#f1f3f5;--panel:#fff;--panel2:#f6f7f9;--line:#d8dde3;--muted:#68727e;--text:#232b34;--soft:#4d5865;--accent:#947130;color-scheme:light}
body.online-canvas{font-family:var(--sans)}.online-canvas .studio-shell{min-width:0;width:100%;height:100dvh;display:block}.online-canvas .main-area{height:100%;width:100%;min-width:0}.online-canvas .rail{position:fixed;left:0;top:0;bottom:0;width:210px;z-index:110;transform:translateX(-101%);transition:transform .2s;box-shadow:15px 0 45px #0005;background:var(--panel);overflow:auto}.online-canvas.canvas-flow-open .rail{transform:none}.online-canvas .topbar{min-height:58px;height:auto;gap:12px;padding:8px 14px;background:var(--panel);border-color:var(--line);flex-wrap:wrap}.online-canvas .topbar-left{display:none}.online-canvas .canvas-project-heading{gap:9px;min-width:0}.online-canvas .canvas-project-heading strong{font-size:14px;max-width:220px}.online-canvas .workspace-nav{display:none}.online-canvas .topbar-actions{gap:6px;margin-left:auto}.online-canvas .canvas-topline{display:none}.online-canvas .film-guide{display:block;padding:0 14px;background:var(--panel);min-height:0}.film-guide summary{cursor:pointer;min-height:36px;display:flex;align-items:center;gap:14px;color:var(--soft);font-size:12px}.film-guide summary span{color:var(--muted);font-size:11px}.film-guide:not([open])>:not(summary){display:none}.film-guide[open]{max-height:220px;overflow:auto}.online-canvas .canvas-viewport{background-color:var(--bg);min-height:180px;touch-action:none}.online-canvas .workspace{min-height:0}.online-canvas .inspector{background:var(--panel);width:340px;max-width:44vw}.online-canvas .node-card{background:var(--panel);border-color:var(--line)}.online-canvas .node-title{font-size:12px}.online-canvas .node-body p{font-size:11px;color:var(--soft)}.online-canvas .node-head{height:42px}.online-canvas .node-actions button{font-size:11px;min-height:28px}.online-canvas .field-label{font-size:12px;color:var(--soft)}.online-canvas .field :is(input,textarea,select){font-size:14px;background:var(--panel2);color:var(--text);border-color:var(--line)}.online-canvas .help{font-size:11px!important;line-height:1.6;color:var(--muted)!important}.online-canvas :is(.toolbar-btn,.run-all,.build-script,#canvas-flow-open,#toggle-inspector){min-height:34px;font-size:12px;cursor:pointer;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--text);padding:6px 10px}.online-canvas .primary,.online-canvas .run-all{background:#dec99b;color:#181a1d}.online-canvas .media-preview,.online-canvas .node-media{object-fit:contain;background:var(--bg)}.online-canvas .brand b{font-size:14px;letter-spacing:.02em}.online-canvas .brand small{font-size:11px}.online-canvas .rail-heading{padding-top:18px}.online-canvas .stage-link{min-height:40px}.online-canvas .more-tools-menu{z-index:120;background:var(--panel);min-width:210px}.online-canvas .canvas-dock,.online-canvas .canvas-bottom-bar,.online-canvas .canvas-view-tools{background:var(--panel)}.online-canvas .canvas-dock button,.online-canvas .canvas-bottom-bar button{min-width:34px;min-height:34px}.online-canvas .saved-indicator{border:0}.online-canvas #save-indicator{font-size:11px}
#canvas-gate{position:fixed;inset:0;z-index:300;display:grid;place-content:center;gap:16px;text-align:center;padding:24px;background:var(--bg);color:var(--text);font:14px var(--sans)}#canvas-gate[hidden]{display:none}#canvas-gate a{padding:12px 20px;border-radius:10px;color:#191a1b;background:#dec99b;text-decoration:none}body[data-canvas-loading]>.studio-shell{visibility:hidden}
.online-canvas .rail .stage-link{display:flex!important;justify-content:flex-start;padding:8px 12px}.online-canvas .rail .stage-link>span:not(.stage-num){display:inline!important}.online-canvas .rail .stage-num{font-size:11px}.online-canvas .rail .stage-num:after{content:none}.online-canvas .rail .rail-heading,.online-canvas .rail .brand>span:last-child{display:block}.online-canvas .rail .project-select{height:auto;padding:12px}.online-canvas .rail .project-select>div,.online-canvas .rail .project-select>button{display:block}
html[data-theme=light] .online-canvas :is(.toolbar-btn,.more-tools summary,.canvas-select,#rename-canvas-project,.canvas-app-mark,.canvas-controls button,.canvas-bottom-bar button,.canvas-dock button){color:var(--text)!important;background:var(--panel2)!important;border-color:var(--line)!important}html[data-theme=light] .online-canvas :is(.canvas-bottom-bar button.active,.canvas-controls button.active){background:#e7d3a8!important;color:#302613!important}
html[data-theme=light] .online-canvas :is(.feature-panel,.projects-panel,.assistant-panel,.character-studio-panel,.modal-card,.inspector-details,.take-card,.feature-card,.projects-entry,.assistant-change,.character-studio-person,.canvas-context-menu,.canvas-command-palette){background:var(--panel)!important;color:var(--text)!important;border-color:var(--line)!important}html[data-theme=light] .online-canvas :is(input,textarea,select,pre){background:var(--panel2)!important;color:var(--text)!important;border-color:var(--line)!important}html[data-theme=light] .online-canvas :is(p,small,.field-label,.node-status){color:var(--muted)!important}html[data-theme=light] .online-canvas :is(h1,h2,h3,strong,b){color:var(--text)}
@media(max-width:760px){.online-canvas .topbar{padding:7px 9px;gap:7px;align-items:center}.online-canvas .canvas-project-heading{flex:1;gap:5px}.online-canvas .canvas-project-heading strong{font-size:12px;max-width:130px}.online-canvas .canvas-app-mark,.online-canvas .canvas-select{display:none}.online-canvas .topbar-actions{margin:0;gap:5px}.online-canvas :is(.toolbar-btn,#canvas-flow-open,#toggle-inspector){min-height:40px;padding:7px;font-size:11px;width:auto}.online-canvas .toolbar-btn:before{content:none}.online-canvas .film-guide summary span{display:none}.online-canvas .inspector{max-width:100%;width:min(380px,92vw);position:absolute;right:0;top:0;bottom:0;z-index:70;box-shadow:-10px 0 35px #0007}.online-canvas .workspace{position:relative}.online-canvas .workspace:not(.inspector-visible) .inspector{display:none!important}.online-canvas .canvas-dock{left:7px;top:8px;gap:2px;max-width:calc(100% - 14px);overflow:auto}.online-canvas .canvas-dock button{min-width:38px;min-height:40px}.online-canvas .canvas-bottom-bar{max-width:calc(100% - 14px);overflow:auto;justify-content:flex-start;bottom:8px;left:7px;transform:none}.online-canvas .canvas-bottom-bar button{flex:none;min-height:40px}.online-canvas .canvas-hint,.online-canvas .canvas-corner{display:none}.online-canvas .node-card{width:270px}.online-canvas .field :is(input,textarea,select){font-size:16px}.online-canvas .modal-card,.online-canvas .feature-panel{max-height:90dvh;width:calc(100vw - 18px)}}

/* Keep inspector and canvas overlays inside the workspace stacking context. */
.online-canvas .workspace{position:relative;isolation:isolate;z-index:0}
.online-canvas .topbar-actions{overflow:visible;flex:0 0 auto}
.online-canvas .more-tools-menu{max-height:min(70dvh,560px);overflow-y:auto;overscroll-behavior:contain}
.online-canvas .node-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.online-canvas .node-actions [data-node-action="edit"]{color:var(--text);font-weight:600}
.online-canvas .inspector{overscroll-behavior:contain;touch-action:pan-y}
.online-canvas .inspector-head{position:sticky;top:-18px;z-index:4;background:var(--panel);padding-top:10px}
.online-canvas .inspector-actions{position:static;background:var(--panel)}
.online-canvas .inspector-head [data-clear-selection]{min-width:36px;min-height:36px;flex:none}