:root{--sidebar-width: 280px;--bg: #ffffff;--grid: #e5e7eb;--border: #e5e7eb;--text: #111827;--muted: #6b7280;--accent: #6366f1}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--text);background:var(--bg)}.app-root{position:relative;height:100%}.sidebar{position:absolute;left:0;top:50%;transform:translateY(-50%);padding:12px;display:flex;flex-direction:column;align-items:center;gap:10px;border:1px solid var(--border);background:#ffffffe6;border-radius:9999px;box-shadow:0 2px 10px #0000000f;z-index:10}.brand{font-weight:600;letter-spacing:.2px}.tool-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;margin-bottom:10px;transition:transform .12s ease,background .2s ease,color .2s ease,border-color .2s ease}.tool-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-1px)}.color-swatches{display:flex;flex-direction:column;gap:10px;margin-top:6px}.color-swatch{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);cursor:pointer;transition:transform .12s ease,outline-color .2s ease}.color-swatch.selected{outline:2px solid var(--accent);outline-offset:2px;transform:translateY(-1px)}.toolbar{display:flex;gap:8px}.tool-button{padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:#fff;cursor:pointer;transition:transform .12s ease,background .2s ease,color .2s ease,border-color .2s ease}.tool-button.active{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-1px)}.board{position:absolute;top:0;right:0;bottom:0;left:0}.canvas{width:100%;height:100%;display:block;cursor:crosshair;transition:filter .2s ease}.hint{color:var(--muted);font-size:12px}