:root{--primary: #475569;--bg: #f8fafc;--text: #0f172a}body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);margin:0;display:flex;flex-direction:column;min-height:100vh}header{background:#fff;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px 3px #0000001a}main{padding:2rem;display:grid;grid-template-columns:1fr 300px;gap:2rem}.toolbar{margin-bottom:1rem;display:flex;gap:1rem;align-items:center;padding:1rem;background:#fff;border-radius:8px;flex-wrap:wrap}.canvas-viewport{background:#e2e8f0;border-radius:8px;padding:2rem;overflow:hidden;display:flex;justify-content:center;align-items:center;min-height:400px}.canvas-container{transform-origin:center;transition:transform .1s ease-out;background:#fff;box-shadow:0 4px 6px -1px #0000001a;display:flex}canvas{image-rendering:pixelated;max-width:100%}button{background:var(--primary);color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer}#palette{background:#fff;padding:1rem;border-radius:8px;height:fit-content}#palette-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:1rem}.palette-item{display:flex;align-items:center;gap:10px;padding:5px;background:#f1f5f9;border-radius:4px}.bead-swatch{width:30px;height:30px;border-radius:50%;border:1px solid #ddd}