*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#d0d0d0;background:#1a1a1a;height:100vh;font-family:system-ui,sans-serif;font-size:13px;display:flex;overflow:hidden}#sidebar{background:#111;border-right:1px solid #333;flex-direction:column;flex-shrink:0;width:200px;display:flex}#sidebar h2{letter-spacing:.06em;text-transform:uppercase;color:#666;border-bottom:1px solid #222;flex-shrink:0;padding:12px 14px;font-size:11px;font-weight:600}#demo-list{flex:1;list-style:none;overflow-y:auto}#demo-list li{border-bottom:1px solid #1e1e1e}#demo-list li button{color:#b0b0b0;cursor:pointer;text-align:left;background:0 0;border:none;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:8px 14px;font-size:12px;transition:background .1s;display:flex}#demo-list li button:hover{color:#eee;background:#1f1f1f}#demo-list li.active button{color:#9090ff;background:#2a2a5a;font-weight:600}#demo-list li button .stem{color:#444;font-family:monospace;font-size:10px}#demo-list li.active button .stem{color:#55a}#main{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}#stage-header{color:#888;z-index:9999;background:#181818;border-bottom:1px solid #333;flex-shrink:0;align-items:center;gap:10px;padding:6px 16px;font-size:12px;display:flex;position:relative}#stage-header .running-label{flex:1}#stage-header .running-label span{color:#ccc;font-weight:500}#reload-btn{color:#aaa;cursor:pointer;background:#252525;border:1px solid #444;border-radius:3px;padding:3px 10px;font-size:11px;transition:background .1s}#reload-btn:hover{color:#eee;background:#333}.header-links{align-items:center;gap:6px;display:flex}.header-icon-btn{color:#aaa;background:#252525;border:1px solid #444;border-radius:3px;justify-content:center;align-items:center;width:28px;height:24px;text-decoration:none;transition:background .1s,color .1s;display:flex}.header-icon-btn:hover{color:#eee;background:#333}.header-doc-btn{color:#aaa;background:#252525;border:1px solid #444;border-radius:3px;padding:3px 10px;font-size:11px;text-decoration:none;transition:background .1s,color .1s}.header-doc-btn:hover{color:#eee;background:#333}#stage{flex-wrap:wrap;flex:1;align-content:flex-start;gap:16px;min-height:0;padding:20px;display:flex;overflow-y:auto}#stage .error-msg{color:#ff7070;white-space:pre-wrap;word-break:break-all;background:#2a1010;border:1px solid #5a2020;border-radius:4px;width:100%;padding:12px 16px;font-family:monospace;font-size:12px}.canvas-item{flex-direction:column;display:flex}.canvas-wrapper{flex-shrink:0;width:300px;height:400px;position:relative}.canvas-wrapper canvas{background:#0a0a0a;border:1px solid #333;width:100%;height:100%;display:block}.canvas-loading{pointer-events:none;background:#0a0a0ae0;border:1px solid #333;flex-direction:column;justify-content:center;align-items:center;gap:12px;transition:opacity .4s;display:flex;position:absolute;inset:0}.canvas-loading.done{opacity:0}.canvas-loading .spinner{border:2px solid #333;border-top-color:#7aaaff;border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.canvas-loading .loading-text{color:#666;font-family:monospace;font-size:11px}.canvas-loading .loading-track{background:#222;border-radius:1px;width:120px;height:2px;overflow:hidden}.canvas-loading .loading-bar{background:#7aaaff;border-radius:1px;width:0%;height:100%;transition:width .15s}.canvas-path{color:#444;text-overflow:ellipsis;white-space:nowrap;cursor:default;-webkit-user-select:none;user-select:none;max-width:300px;padding:4px 6px;font-family:monospace;font-size:10px;overflow:hidden}.canvas-path.has-path{color:#555;cursor:pointer}.canvas-path.has-path:hover{color:#9090ff}#code-panel{z-index:9999;background:#0d0d0d;border-top:1px solid #2a2a2a;flex-direction:column;flex-shrink:0;height:240px;transition:height .2s;display:flex;position:relative}#code-panel.collapsed{height:auto}#code-panel.collapsed #code-view{display:none}#code-panel .code-header{border-bottom:1px solid #1e1e1e;flex-shrink:0;justify-content:space-between;align-items:center;padding:4px 12px;display:flex}#code-panel .code-header button{color:#444;cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:10px}#code-panel .code-header button:hover{color:#888}#code-panel .code-header span{letter-spacing:.06em;text-transform:uppercase;color:#444;font-size:10px;font-weight:600}#code-panel .code-header .code-file{letter-spacing:0;text-transform:none;color:#4a4a6a;font-family:monospace;font-size:10px;font-weight:400}#code-view{flex:1;padding:8px 12px;overflow:auto}#code-view pre{color:silver;white-space:pre;tab-size:2;margin:0;font-family:Fira Code,Cascadia Code,monospace;font-size:11px;line-height:1.6}#console-panel{z-index:9999;background:#0f0f0f;border-top:1px solid #2a2a2a;flex-direction:column;flex-shrink:0;height:160px;transition:height .2s;display:flex;position:relative}#console-panel.collapsed{height:auto}#console-panel.collapsed #console-log{display:none}#console-panel .console-header{border-bottom:1px solid #1e1e1e;flex-shrink:0;justify-content:space-between;align-items:center;padding:4px 12px;display:flex}#console-panel .console-header span{letter-spacing:.06em;text-transform:uppercase;color:#444;font-size:10px;font-weight:600}#console-panel .console-header button{color:#444;cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:10px}#console-panel .console-header button:hover{color:#888}#console-log{flex:1;padding:4px 0;overflow-y:auto}#console-log .log-entry{border-bottom:1px solid #141414;gap:8px;padding:2px 12px;font-family:monospace;font-size:11px;line-height:1.5;display:flex}#console-log .log-entry .log-time{color:#444;flex-shrink:0}#console-log .log-entry.log{color:silver}#console-log .log-entry.warn{color:#d4aa00;background:#1a1600}#console-log .log-entry.error{color:#ff6060;background:#1a0a0a}#model-panel{background:#111;border-left:1px solid #333;flex-direction:column;flex-shrink:0;width:220px;display:flex}#model-panel h2{letter-spacing:.06em;text-transform:uppercase;color:#666;border-bottom:1px solid #222;flex-shrink:0;padding:12px 14px;font-size:11px;font-weight:600}#model-list{flex:1;list-style:none;overflow-y:auto}#model-list li{border-bottom:1px solid #1e1e1e}#model-list li button{color:#b0b0b0;cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:6px;width:100%;padding:8px 12px;font-size:11px;transition:background .1s;display:flex}#model-list li button:hover{color:#eee;background:#1f1f1f}#model-list li button .model-name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}#model-list li button .badge{border-radius:3px;flex-shrink:0;padding:1px 5px;font-family:monospace;font-size:10px;font-weight:700}#model-list li button .badge.c2{color:#7aaaff;background:#2a3a5a}#model-list li button .badge.c6{color:#7adf7a;background:#2a4a2a}#model-list .status{color:#555;padding:12px 14px;font-size:11px}#copy-toast{color:#eee;opacity:0;z-index:99999;pointer-events:none;background:#333;border-radius:4px;padding:6px 14px;font-size:12px;transition:opacity .15s,transform .15s;position:fixed;bottom:24px;left:50%;transform:translate(-50%)translateY(8px)}#copy-toast.show{opacity:1;transform:translate(-50%)translateY(0)}