:root{--bg:#f3f5f9;--panel:#fff;--border:#d9dee8;--text:#1f2937;--muted:#6b7280;--accent:#2563eb;--accent-hover:#1d4ed8;--danger:#b91c1c;--header:#f8fafc;--code-bg:#fff;--code-text:#1f2937}@media (prefers-color-scheme:dark){:root{--bg:#0b1020;--panel:#151b2e;--border:#2a3350;--text:#e5e7eb;--muted:#94a3b8;--header:#1a2238;--danger:#f87171;--code-bg:#0f172a;--code-text:#e2e8f0}}*{box-sizing:border-box}body{background:var(--bg);height:100vh;color:var(--text);flex-direction:column;margin:0;padding:16px 20px;font-family:system-ui,-apple-system,Segoe UI,sans-serif;display:flex}main{flex-direction:column;flex:1;width:100%;min-height:0;display:flex}h1{margin:4px 0 2px;font-size:1.4rem}.sub{color:var(--muted);margin:0 0 12px}.panels{flex:1;grid-template-columns:1fr 1fr;gap:20px;min-height:0;display:grid}@media (width<=800px){body{height:auto;min-height:100vh}.panels{grid-template-columns:1fr}.panel{height:80vh}}.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;flex-direction:column;min-height:0;display:flex;overflow:hidden;box-shadow:0 1px 3px #00000014}.panel-header{background:var(--header);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:8px;height:52px;padding:0 14px;display:flex}.panel-title{font-size:.95rem;font-weight:600}.actions{gap:8px;display:flex}button{font:inherit;border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer;border-radius:8px;padding:6px 14px;font-size:.85rem}button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}.panel-body{flex:1;min-height:0;position:relative}#code{resize:none;background:var(--code-bg);width:100%;height:100%;color:var(--code-text);tab-size:4;border:0;outline:0;padding:14px;font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.canvas-wrap{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background:#fff;overflow:hidden}.canvas-wrap.panning{cursor:grabbing}#mycanvas{transform-origin:0 0;width:4000px;height:4000px;position:absolute;top:0;left:0}.zoom-label{text-align:center;min-width:3.2em;color:var(--muted);align-self:center;font-size:.85rem}#output{white-space:pre-wrap;background:var(--code-bg);flex:1;min-height:0;margin:0;padding:10px 14px;font:13px ui-monospace,Menlo,Consolas,monospace;overflow:auto}.output-panel{flex:0 0 8.5rem;margin-top:16px}.save-url{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;align-self:center;max-width:18em;font-size:.8rem;overflow:hidden}.save-error{color:var(--danger);align-self:center;font-size:.8rem}