:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f3f3f1;--panel:#fff;--border:#d9d9d6;--text:#1a1a1a;--muted:#6a6a6a;--accent:#2b6cd9;--on-accent:#fff;--canvas-bg:#e4e4e1;--danger:#c62828;--grid-line:#0009;--swatch-ring:#00000026;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:13px}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#141414;--panel:#1d1d1d;--border:#2c2c2c;--text:#ececec;--muted:#9a9a9a;--accent:#6aa9dc;--on-accent:#0c0c0c;--canvas-bg:#0c0c0c;--danger:#ff6b5e;--grid-line:#ffffffbf;--swatch-ring:#ffffff26}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text)}.app{flex-direction:column;min-width:1024px;height:100%;display:flex}.topbar{background:var(--panel);border-bottom:1px solid var(--border);align-items:center;gap:12px;height:48px;padding:0 16px;display:flex}.brand{letter-spacing:.08em;text-transform:uppercase;margin-right:8px;font-weight:700}.spacer{flex:1}.body{flex:1;min-height:0;display:flex}.panel{background:var(--panel);border-right:1px solid var(--border);flex:none;width:320px;padding:12px 16px 24px;overflow:hidden auto}.panel-section{margin-bottom:20px}.panel-section h2{letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-size:11px;font-weight:600}.control{grid-template-columns:1fr;gap:4px;margin-bottom:10px;display:grid}.control-label{color:var(--muted)}.control input[type=range]{width:100%;accent-color:var(--accent)}.control .num,.control select,.seed input,.select{background:var(--bg);color:var(--text);border:1px solid var(--border);font:inherit;border-radius:4px;padding:4px 6px}.control .num{justify-self:end;width:80px}.control .num.invalid{border-color:var(--danger)}.control-head{align-items:center;gap:4px;min-height:22px;display:flex}.control-head .control-label{flex:none}.control.locked .control-label{color:var(--text)}.control.toggle{grid-template-columns:1fr}.control.toggle input[type=checkbox]{margin:0}.icon-btn{width:22px;height:22px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:4px;justify-content:center;align-items:center;padding:0;display:inline-flex}.icon-btn:hover{color:var(--text);background:var(--border)}.icon-btn.lock.on{color:var(--accent)}.segmented{border:1px solid var(--border);border-radius:4px;display:inline-flex;overflow:hidden}.segmented button{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;padding:4px 10px}.segmented button+button{border-left:1px solid var(--border)}.segmented button.on{background:var(--accent);color:var(--on-accent)}.btn{background:var(--bg);color:var(--text);border:1px solid var(--border);font:inherit;cursor:pointer;border-radius:4px;padding:5px 10px}.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:600}.seed{color:var(--muted);align-items:center;gap:6px;display:inline-flex}.seed input{width:120px}.btn.randomize,.btn.unlock-all{align-items:center;gap:6px;display:inline-flex}.btn:disabled{opacity:.35;cursor:default;border-color:var(--border)}.seed.locked{color:var(--text)}.info{color:var(--muted);margin-bottom:4px}.mono{font-variant-numeric:tabular-nums;color:var(--muted);text-align:right;min-width:48px}.preview{flex-direction:column;flex:1;min-width:0;display:flex}.preview-toolbar{border-bottom:1px solid var(--border);align-items:center;gap:16px;height:40px;padding:0 16px;display:flex}.scale{color:var(--muted);align-items:center;gap:8px;display:inline-flex}.scale input{width:140px;accent-color:var(--accent)}.canvas-wrap{flex:1;min-height:0;position:relative}.canvas-wrap canvas{display:block;position:absolute;inset:0}.color-editor{flex-direction:column;align-items:center;gap:10px;padding-top:8px;display:flex}.wheel{touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none;border-radius:50%;position:relative;overflow:hidden}.wheel-layer{border-radius:50%;position:absolute;inset:0}.wheel-hue{background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.wheel-sat{background:radial-gradient(circle,#fff 0%,#fff0 100%)}.wheel-dim{background:#000}.wheel-marker{pointer-events:none;border:2px solid #fff;border-radius:50%;width:12px;height:12px;margin:-6px 0 0 -6px;position:absolute;box-shadow:0 0 0 1px #000}.field{color:var(--muted);align-items:center;gap:4px;display:inline-flex}.field input[type=number],.field input[type=text]{background:var(--bg);color:var(--text);border:1px solid var(--border);font:inherit;border-radius:4px;width:56px;padding:3px 5px}.field.hex input{width:96px;font-family:ui-monospace,Menlo,Consolas,monospace}.field.invalid input{border-color:var(--danger)}.field.brightness{width:100%}.field.brightness input{accent-color:var(--accent);flex:1}.color-inputs{flex-direction:column;gap:6px;width:100%;display:flex}.field-row{align-items:center;gap:6px;display:flex}.field-group{width:32px;color:var(--muted);letter-spacing:.05em;font-size:11px}.swatches{flex-wrap:wrap;gap:8px;margin-bottom:8px;padding-top:4px;display:flex}.swatch{width:30px;height:30px;box-shadow:inset 0 0 0 1px var(--swatch-ring);border:2px solid #0000;border-radius:4px;position:relative}.swatch.on{border-color:var(--text)}.swatch.locked{outline:1px solid var(--accent);outline-offset:1px}.swatch-pick{cursor:pointer;background:0 0;border:0;border-radius:2px;padding:0;position:absolute;inset:0}.swatch-tag{text-align:center;color:#fff;text-shadow:0 0 2px #000,0 0 2px #000;pointer-events:none;font-size:9px;font-weight:700;position:absolute;bottom:-1px;left:0;right:0}.swatch-lock{border:1px solid var(--border);background:var(--panel);width:15px;height:15px;color:var(--muted);cursor:pointer;opacity:.35;border-radius:50%;justify-content:center;align-items:center;padding:0;display:inline-flex;position:absolute;top:-6px;right:-6px}.swatch:hover .swatch-lock,.swatch-lock.on,.swatch-lock:focus-visible{opacity:1}.swatch-lock.on{color:var(--accent);border-color:var(--accent)}.icon-btn:focus-visible,.swatch-lock:focus-visible,.swatch-pick:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.palette-tools{align-items:center;gap:4px;margin-bottom:6px;display:flex}.palette-tools .btn{padding:3px 6px}.palette-tools .btn:disabled{opacity:.35;cursor:default;border-color:var(--border)}.palette-tools .select{flex:auto;min-width:0}.modal-backdrop{z-index:10;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--panel);border:1px solid var(--border);border-radius:8px;width:380px;padding:16px 18px 14px;box-shadow:0 20px 60px #00000080}.modal h2{margin:0 0 14px;font-size:15px}.modal .control{margin-bottom:12px}.modal .size-row{gap:12px;display:flex}.modal .size-row .field input{width:90px}.modal-actions{justify-content:flex-end;gap:8px;margin-top:16px;display:flex}.info.error{color:var(--danger)}