:root{--bg: #f8f8f8;--bg-raised: #ffffff;--bg-active: #ebebeb;--border: #e0e0e0;--border-sub: #e8e8e8;--border-hover: #999;--text: #1e1e1e;--text-dim: #555;--text-dimmer: #888;--text-btn: #555;--text-btn-hover: #111;--text-strong: #222;--error: #c0392b;--shadow-active: rgba(0,0,0,.12)}[data-theme=dark]{--bg: #1a1a1a;--bg-raised: #111;--bg-active: #2a2a2a;--border: #333;--border-sub: #222;--border-hover: #555;--text: #d4d4d4;--text-dim: #666;--text-dimmer: #888;--text-btn: #888;--text-btn-hover: #ccc;--text-strong: #ccc;--error: #f48771;--shadow-active: rgba(0,0,0,.6)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:monospace;background:var(--bg);color:var(--text);height:100vh;display:flex;flex-direction:column}header{padding:.75rem 1.25rem;background:var(--bg-raised);border-bottom:1px solid var(--border);font-size:.85rem;color:var(--text-dimmer);display:flex;align-items:center;justify-content:space-between}header strong{color:var(--text-strong)}.header-left{display:flex;align-items:center;gap:1rem}.menubar{display:flex;align-items:center;gap:.1rem}.menu{position:relative}.menu-trigger{font-family:monospace;font-size:.85rem;color:var(--text-btn);background:none;border:none;padding:.2rem .5rem;cursor:pointer;border-radius:2px}a.menu-trigger{text-decoration:none;display:inline-block}.menu-trigger:hover,.menu-trigger.open{color:var(--text-btn-hover);background:var(--bg-active)}.menu-dropdown{display:none;position:absolute;top:100%;left:0;z-index:100;background:var(--bg-raised);border:1px solid var(--border);box-shadow:0 4px 12px var(--shadow-active);min-width:130px;list-style:none;padding:.25rem 0;margin-top:2px}.menu-dropdown.open{display:block}.menu-dropdown li button{display:block;width:100%;text-align:left;font-family:monospace;font-size:.85rem;color:var(--text-btn);background:none;border:none;padding:.3rem 1rem;cursor:pointer}.menu-dropdown li button:hover{color:var(--text-btn-hover);background:var(--bg-active)}.menu-sub{position:relative}.menu-submenu{display:none;position:absolute;left:100%;top:-.25rem;z-index:101;background:var(--bg-raised);border:1px solid var(--border);box-shadow:0 4px 12px var(--shadow-active);min-width:110px;list-style:none;padding:.25rem 0}.menu-submenu.open{display:block}.menu-submenu li button{display:block;width:100%;text-align:left;font-family:monospace;font-size:.85rem;color:var(--text-btn);background:none;border:none;padding:.3rem 1rem;cursor:pointer}.menu-submenu li button:hover:not(:disabled){color:var(--text-btn-hover);background:var(--bg-active)}.menu-submenu li button:disabled{color:var(--text-dimmer);cursor:default;opacity:.5}.menu-separator{height:1px;background:var(--border-sub);margin:.25rem 0}#btn-theme{font-size:1rem;color:var(--text-dimmer);background:none;border:none;padding:0;cursor:pointer;line-height:1}#btn-theme:hover{color:var(--text-strong)}.panes{flex:1;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}.pane{display:flex;flex-direction:column;overflow:hidden}.pane+.pane{border-left:1px solid var(--border)}#editor{flex:1;overflow:auto;min-height:0}#editor .cm-editor{height:100%;font-size:.9rem}#editor .cm-scroller{font-family:monospace;line-height:1.6}#right{display:flex;flex-direction:column;overflow:hidden}#viewer-pane{flex:1;overflow:hidden;position:relative}#viewer-pane .viewport{position:absolute;inset:0}#console-pane{border-top:1px solid var(--border);background:var(--bg-raised);flex-shrink:0;max-height:30vh;overflow:auto;display:flex;flex-direction:column}.console-header{padding:.3rem 1rem;font-size:.75rem;color:var(--text-dim);border-bottom:1px solid var(--border-sub);flex-shrink:0}pre{padding:0 1rem .75rem;font-size:.85rem;line-height:1.6;white-space:pre}pre.error{color:var(--error)}#editor-footer{display:flex;align-items:center;justify-content:flex-end;gap:.4rem;padding:.4rem 1rem;font-size:.75rem;background:var(--bg-raised);border-top:1px solid var(--border-sub);flex-shrink:0}#editor-footer button{font-family:monospace;font-size:.75rem;color:var(--text-btn);background:none;border:1px solid var(--border);padding:.15rem .5rem;cursor:pointer;border-radius:2px}#editor-footer button:hover{color:var(--text-btn-hover);border-color:var(--border-hover)}#view-mode-controls{display:flex;align-items:center;gap:.4rem;border-right:1px solid var(--border);padding-right:.6rem;margin-right:.2rem}#editor-footer button:disabled{color:var(--text-dimmer);border-color:var(--border-sub);cursor:default;opacity:.5}#run-controls{display:flex;align-items:center;gap:.4rem;border-right:1px solid var(--border);padding-right:.6rem;margin-right:.2rem}#editor-footer button.active{color:var(--text-btn-hover);border-color:var(--border-hover);background:var(--bg-active);box-shadow:inset 0 1px 3px var(--shadow-active)}#tab-bar{display:none;align-items:stretch;background:var(--bg);border-bottom:1px solid var(--border);overflow-x:auto;flex-shrink:0;font-family:monospace;font-size:.75rem}.tab{display:flex;align-items:center;gap:.3rem;padding:.4rem .6rem .4rem 1rem;border-right:1px solid var(--border);cursor:default;color:var(--text-dim);white-space:nowrap;min-width:0;user-select:none}.tab:hover{background:var(--bg-active);color:var(--text)}.tab.active{background:var(--bg-raised);color:var(--text);box-shadow:inset 0 2px 0 var(--border-hover)}.tab-label{max-width:140px;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.tab-close{font-family:monospace;font-size:.9rem;color:var(--text-dimmer);background:none;border:none;cursor:pointer;padding:0 2px;line-height:1;flex-shrink:0}.tab-close:hover{color:var(--text)}#rename-dialog-overlay{display:none;position:fixed;inset:0;z-index:200;background:#00000059;align-items:center;justify-content:center}#rename-dialog-overlay.open{display:flex}#rename-dialog{background:var(--bg-raised);border:1px solid var(--border);box-shadow:0 8px 24px var(--shadow-active);padding:1.25rem 1.5rem;width:320px;max-width:90vw;font-family:monospace;font-size:.85rem}#rename-dialog label{display:block;color:var(--text-dim);margin-bottom:.5rem}#rename-dialog input[type=text]{display:block;width:100%;font-family:monospace;font-size:.85rem;color:var(--text);background:var(--bg);border:1px solid var(--border);padding:.35rem .6rem;outline:none;box-sizing:border-box}#rename-dialog input[type=text]:focus{border-color:var(--border-hover)}#rename-dialog-error{color:var(--error);font-size:.8rem;min-height:1.2em;margin-top:.4rem}#rename-dialog-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}#rename-dialog-actions button{font-family:monospace;font-size:.8rem;color:var(--text-btn);background:none;border:1px solid var(--border);padding:.2rem .75rem;cursor:pointer;border-radius:2px}#rename-dialog-actions button:hover{color:var(--text-btn-hover);border-color:var(--border-hover)}#help-dialog-overlay{display:none;position:fixed;inset:0;z-index:200;background:#00000059;align-items:center;justify-content:center}#help-dialog-overlay.open{display:flex}#help-dialog{background:var(--bg-raised);border:1px solid var(--border);box-shadow:0 8px 24px var(--shadow-active);width:816px;max-width:92vw;max-height:82vh;display:flex;flex-direction:column;font-family:monospace;font-size:.85rem}#help-dialog-header{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.25rem .75rem;border-bottom:1px solid var(--border);flex-shrink:0}#help-dialog-header h2{font-size:1rem;font-weight:700;color:var(--text-strong);letter-spacing:.05em}#help-dialog-close{font-family:monospace;font-size:1.1rem;color:var(--text-dimmer);background:none;border:none;cursor:pointer;padding:0 2px;line-height:1}#help-dialog-close:hover{color:var(--text)}#help-dialog-body{overflow-y:auto;padding:1rem 1.25rem 1.25rem}.help-intro{color:var(--text-dim);line-height:1.6;margin-bottom:1.25rem}.help-section{margin-bottom:1.25rem}.help-section h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dimmer);margin-bottom:.5rem;padding-bottom:.25rem;border-bottom:1px solid var(--border-sub)}.help-table{width:100%;border-collapse:collapse}.help-table tr+tr td{border-top:1px solid var(--border-sub)}.help-table td{padding:.3rem .5rem;vertical-align:top;line-height:1.5}.help-table td:first-child{color:var(--text-strong);white-space:nowrap;padding-right:1.5rem;width:1%}.help-table td:last-child{color:var(--text-dim)}#new-dialog-overlay{display:none;position:fixed;inset:0;z-index:200;background:#00000059;align-items:center;justify-content:center}#new-dialog-overlay.open{display:flex}#new-dialog{background:var(--bg-raised);border:1px solid var(--border);box-shadow:0 8px 24px var(--shadow-active);padding:1.25rem 1.5rem;font-family:monospace;font-size:.85rem}#new-dialog p{color:var(--text-dim);margin-bottom:1rem}#new-dialog-actions{display:flex;justify-content:flex-end;gap:.5rem}#new-dialog-actions button{font-family:monospace;font-size:.8rem;color:var(--text-btn);background:none;border:1px solid var(--border);padding:.2rem .75rem;cursor:pointer;border-radius:2px}#new-dialog-actions button:hover{color:var(--text-btn-hover);border-color:var(--border-hover)}#load-dialog-overlay{display:none;position:fixed;inset:0;z-index:200;background:#00000059;align-items:center;justify-content:center}#load-dialog-overlay.open{display:flex}#load-dialog{background:var(--bg-raised);border:1px solid var(--border);box-shadow:0 8px 24px var(--shadow-active);padding:1.25rem 1.5rem;width:480px;max-width:90vw;font-family:monospace;font-size:.85rem}#load-dialog label{display:block;color:var(--text-dim);margin-bottom:.5rem}#load-dialog input[type=url]{display:block;width:100%;font-family:monospace;font-size:.85rem;color:var(--text);background:var(--bg);border:1px solid var(--border);padding:.35rem .6rem;outline:none;box-sizing:border-box}#load-dialog input[type=url]:focus{border-color:var(--border-hover)}#load-dialog-error{color:var(--error);font-size:.8rem;min-height:1.2em;margin-top:.4rem}#load-dialog-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}#load-dialog-actions button{font-family:monospace;font-size:.8rem;color:var(--text-btn);background:none;border:1px solid var(--border);padding:.2rem .75rem;cursor:pointer;border-radius:2px}#load-dialog-actions button:hover{color:var(--text-btn-hover);border-color:var(--border-hover)}#load-dialog-actions button#load-dialog-confirm{color:var(--text-strong);border-color:var(--border-hover)}#layout-tab-bar{display:none;flex-shrink:0;border-bottom:1px solid var(--border);background:var(--bg-raised)}#layout-tab-bar button{flex:1;padding:.6rem 1rem;border:none;background:transparent;color:var(--text-btn);font-size:.9rem;cursor:pointer;border-bottom:2px solid transparent}#layout-tab-bar button.active{color:var(--text-strong);border-bottom-color:var(--text-strong)}#layout-tab-bar button:hover{color:var(--text-btn-hover)}@media (max-width: 768px){#layout-tab-bar{display:flex}.panes{grid-template-columns:1fr}.panes[data-active-pane=editor] #right{display:none}.panes[data-active-pane=viewer]>.pane:first-child{display:none}.pane+.pane{border-left:none}}