:root{--bg:#0a0a0a;--fg:#e8e8e6;--fg-dim:#e8e8e68c;--line:#e8e8e624;--raised:#e8e8e614}:root.light{--bg:#f4f3f0;--fg:#1a1a18;--fg-dim:#1a1a188c;--line:#1a1a1829;--raised:#1a1a1812}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;font-family:SF Mono,ui-monospace,Menlo,monospace;font-size:12px}.app{flex-direction:column;height:100%;display:flex}.toolbar{border-bottom:1px solid var(--line);flex-direction:column;gap:6px;padding:10px 14px;display:flex}.toolbar-row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.wordmark{letter-spacing:.04em;-webkit-user-select:none;user-select:none;margin-right:8px;font-weight:600}.group{align-items:center;gap:4px;display:flex}.group.push{margin-left:auto}.group+.group{border-left:1px solid var(--line);padding-left:12px}.btn{font:inherit;color:var(--fg-dim);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;padding:5px 10px}.btn:hover{color:var(--fg);background:var(--raised)}.btn.selected{color:var(--fg);border-color:var(--line);background:var(--raised)}.btn:disabled{opacity:.35;cursor:default;background:0 0}.symbols{gap:2px}.symbol{font:inherit;width:24px;height:24px;color:var(--fg-dim);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;place-items:center;display:grid}.symbol:hover{color:var(--fg);background:var(--raised)}.symbol.selected{color:var(--fg);border-color:var(--line);background:var(--raised)}.slider-label{color:var(--fg-dim);white-space:nowrap;align-items:center;gap:8px;display:flex}.slider-text{min-width:10ch;display:inline-block}input[type=range]{width:90px;accent-color:var(--fg)}.panel{border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:16px;padding:8px 14px;display:flex}.canvas-wrap{flex:1;min-height:0;position:relative}.drop-overlay{border:1px dashed var(--fg-dim);background:color-mix(in srgb, var(--bg) 70%, transparent);color:var(--fg);pointer-events:none;border-radius:12px;place-items:center;display:grid;position:absolute;inset:10px}.canvas-wrap canvas{cursor:crosshair;touch-action:none;display:block}