:root{--bg: #0e1116;--panel: #161b22;--border: #252b34;--text: #d8dde6;--text-dim: #8a93a3;--accent: #79c0ff;--accent-strong: #58a6ff;--hover: #1f2630;--danger: #b04545}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);color-scheme:dark}#app{display:grid;grid-template-areas:"top top" "side canvas";grid-template-rows:56px 1fr;grid-template-columns:240px 1fr;height:100%}#topbar{grid-area:top;display:flex;gap:16px;align-items:center;padding:8px 16px;background:var(--panel);border-bottom:1px solid var(--border)}#sidebar{grid-area:side;padding:12px;background:var(--panel);border-right:1px solid var(--border);overflow:auto;color:var(--text)}#canvas-container{grid-area:canvas;position:relative;background:var(--bg)}#canvas-container canvas{display:block;width:100%;height:100%}#status{position:absolute;bottom:12px;right:12px;padding:6px 10px;background:#000000bf;color:#fff;border:1px solid var(--border);border-radius:4px;font-size:13px;display:none}#status.visible{display:block}input,select,button{background:#0d1117;color:var(--text);border:1px solid var(--border);border-radius:4px;padding:6px 8px;font:inherit}input:focus,select:focus{outline:none;border-color:var(--accent-strong);box-shadow:0 0 0 2px #58a6ff40}select{cursor:pointer}