:root{color:#e2e8f0;font-synthesis:none;background:#090d18;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}html,body,#root{height:100%}*{box-sizing:border-box}body{min-width:920px;margin:0;overflow:hidden}button{font:inherit;color:#e2e8f0;cursor:pointer;background:#172033;border:1px solid #334155;border-radius:9px;padding:9px 14px}button:hover:not(:disabled){background:#202b40;border-color:#64748b}button.primary{background:#6366f1;border-color:#6366f1}button.primary:hover:not(:disabled){background:#5558df}button:disabled{cursor:not-allowed;opacity:.45}.app-shell{flex-direction:column;height:100vh;min-height:0;display:flex;overflow:hidden}.topbar{background:#0d1320;border-bottom:1px solid #202a3b;flex:none;justify-content:space-between;align-items:center;gap:24px;min-height:70px;padding:12px 20px;display:flex}.brand,.actions{align-items:center;display:flex}.brand{gap:12px}.logo-mark{object-fit:contain;width:40px;height:40px}.brand h1,.brand p{margin:0}.brand h1{font-size:18px}.brand p{color:#7f8da4;margin-top:2px;font-size:12px}.actions{gap:10px}.status{margin-right:4px;font-size:13px}.status.ok{color:#34d399}.status.error{color:#fb7185}.workspace{flex:1;grid-template-columns:minmax(420px,.95fr) minmax(500px,1.45fr);min-height:0;display:grid;overflow:hidden}.pane{flex-direction:column;min-width:0;min-height:0;display:flex}.editor-pane{background:#0b101c;border-right:1px solid #202a3b}.pane-title{color:#94a3b8;background:#101725;border-bottom:1px solid #202a3b;flex:0 0 42px;justify-content:space-between;align-items:center;height:42px;padding:0 16px;font-size:12px;display:flex}.code-editor{flex:1;width:100%;min-height:0;overflow:hidden}.code-editor .cm-editor{height:100%;min-height:0}.code-editor .cm-scroller{overflow:auto}.diagnostics{color:#fecdd3;background:#25121a;border-top:1px solid #492031;max-height:150px;padding:10px 14px;font-size:12px;overflow:auto}.diagnostics div{gap:10px;padding:4px;display:flex}.preview-pane{background:#141b2a}.preview-stage{background-color:#111827;background-image:linear-gradient(45deg,#182234 25%,#0000 25%),linear-gradient(-45deg,#182234 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#182234 75%),linear-gradient(-45deg,#0000 75%,#182234 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;flex:1;place-items:center;min-height:0;padding:32px;display:grid;overflow:auto}.svg-preview{border-radius:6px;place-items:center;max-width:100%;max-height:100%;display:grid;overflow:hidden;box-shadow:0 24px 60px #0005}.preview-content{justify-items:center;gap:16px;max-width:100%;max-height:100%;display:grid}.canvas-switcher{align-items:center;gap:8px;display:flex}.canvas-dot{color:#94a3b8;background:#172033cc;border:1px solid #475569;border-radius:999px;place-items:center;width:26px;height:26px;padding:0;font-size:12px;display:grid}.canvas-dot.active{color:#fff;background:#6366f1;border-color:#818cf8}.svg-preview svg{max-width:100%;max-height:calc(100vh - 150px);display:block}.empty-state{color:#64748b;font-size:14px}