:root { --bg:#0f1115; --fg:#e5e7eb; --muted:#9ca3af; --panel:#171a22; --accent:#7c3aed; }
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu}
header{padding:14px 18px;border-bottom:1px solid #22283a;background:var(--panel)}
h1{margin:0;font-size:18px}
.controls{display:flex;flex-wrap:wrap;gap:10px;padding:12px 16px;align-items:center}
.controls button{background:var(--accent);color:#fff;border:none;padding:8px 10px;border-radius:8px;cursor:pointer}
.preview{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 16px}
.pane{background:var(--panel);border:1px solid #22283a;border-radius:12px;padding:10px;min-height:360px;overflow:auto}
#raster{max-width:100%;height:auto;display:block;background:repeating-conic-gradient(#0000 0 90deg, #0001 0 180deg) 0 0/20px 20px}
#svgWrap svg{width:100%;height:auto;display:block}
@media (max-width: 900px){ .preview{ grid-template-columns:1fr; } }