@import "https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Syne:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#09080f;--panel:#16122a;--panel2:#1f1840;--border:#7355e82e;--border2:#a380ff38;--text:#ede6ff;--muted:#7a6e9a;--accent:#7355e8;--accent-lit:#a480ff;--accent2:#c9b0ff;--r:8px}html,body{height:100%;overflow:hidden}body{background:var(--bg);color:var(--text);cursor:default;flex-direction:column;font-family:Syne,sans-serif;display:flex}.topbar{border-bottom:1px solid var(--border);background:var(--panel);z-index:100;flex-shrink:0;justify-content:space-between;align-items:center;height:52px;padding:0 24px;display:flex}.logo{letter-spacing:-.5px;color:var(--text);font-family:DM Serif Display,serif;font-size:22px}.logo span{color:var(--accent)}.topbar-center{gap:6px;display:flex}.mode-btn{border:1px solid var(--border2);color:var(--muted);cursor:pointer;background:0 0;border-radius:20px;padding:5px 14px;font-family:Syne,sans-serif;font-size:12px;transition:all .18s}.mode-btn.active,.mode-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}.export-btn{border-radius:var(--r);background:var(--accent);color:#fff;cursor:pointer;border:none;padding:7px 18px;font-family:Syne,sans-serif;font-size:12px;font-weight:500;transition:opacity .15s,transform .1s}.export-btn:hover{opacity:.88;transform:scale(.98)}.app{flex:1;display:flex;overflow:hidden}.panel{background:var(--panel);border-right:1px solid var(--border);z-index:10;flex-direction:column;width:310px;min-width:310px;display:flex;overflow-y:auto}.panel::-webkit-scrollbar{width:4px}.panel::-webkit-scrollbar-track{background:0 0}.panel::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}.section{border-bottom:1px solid var(--border);padding:18px 20px 14px}.section-title{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-size:10px;font-weight:500}.shape-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.shape-btn{aspect-ratio:1;border-radius:var(--r);border:1px solid var(--border2);background:var(--panel2);cursor:pointer;justify-content:center;align-items:center;transition:all .15s;display:flex;position:relative;overflow:hidden}.shape-btn:hover{border-color:var(--accent)}.shape-btn.active{border-color:var(--accent);background:#7355e826}.shape-btn svg{width:28px;height:28px}.shape-label{color:var(--muted);text-align:center;letter-spacing:.05em;margin-top:4px;font-size:9px}.shape-cell{flex-direction:column;display:flex}.color-preview-bar{border-radius:var(--r);border:1px solid var(--border2);height:36px;margin-bottom:14px;transition:background .3s;position:relative;overflow:hidden}.color-preview-bar:after{content:"";pointer-events:none;background:linear-gradient(90deg,#ffffff0f 0%,#0000 40%,#0000001f 100%);position:absolute;inset:0}.color-slots{align-items:stretch;gap:8px;margin-bottom:12px;display:flex}.color-slot{flex-direction:column;flex:1;gap:5px;display:flex}.color-swatch{border-radius:var(--r);cursor:pointer;border:2px solid #0000;height:52px;transition:transform .15s,border-color .15s,box-shadow .15s;position:relative;overflow:hidden}.color-swatch:hover{border-color:#ffffff4d;transform:translateY(-2px)}.color-swatch.active-slot{border-color:#fff;box-shadow:0 0 0 1px #fff3}.color-swatch input[type=color]{opacity:0;cursor:pointer;border:none;width:calc(100% + 16px);height:calc(100% + 16px);position:absolute;inset:-8px}.color-swatch-hex{text-align:center;color:#ffffffbf;letter-spacing:.04em;pointer-events:none;text-shadow:0 1px 3px #0009;font-family:DM Mono,monospace;font-size:9px;position:absolute;bottom:4px;left:0;right:0}.color-swatch-num{color:#fff9;pointer-events:none;text-shadow:0 1px 3px #00000080;font-size:9px;font-weight:600;position:absolute;top:5px;left:7px}.color-add-btn{border-radius:var(--r);border:1px dashed var(--border2);cursor:pointer;width:44px;min-width:44px;color:var(--muted);background:0 0;flex-shrink:0;justify-content:center;align-self:stretch;align-items:center;font-size:20px;transition:all .15s;display:flex}.color-add-btn:hover{border-color:var(--accent);color:var(--accent);background:#7355e81a}.color-add-btn.remove{border-style:solid;font-size:16px}.color-add-btn.remove:hover{color:#e24b4a;background:#e24b4a14;border-color:#e24b4a}.palette-label{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:7px;font-size:10px}.quick-palette{flex-wrap:wrap;gap:5px;margin-bottom:12px;display:flex}.pal-swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;flex-shrink:0;width:22px;height:22px;transition:transform .12s,border-color .12s}.pal-swatch:hover{border-color:#fff6;transform:scale(1.25)}.color-mode-row{gap:6px;margin-top:4px;display:flex}.toggle-pill{border-radius:var(--r);border:1px solid var(--border2);background:var(--panel2);color:var(--muted);text-align:center;cursor:pointer;flex-direction:column;flex:1;align-items:center;gap:4px;padding:8px 4px 6px;font-family:Syne,sans-serif;font-size:10px;transition:all .15s;display:flex}.toggle-pill:hover{border-color:var(--accent);color:var(--accent)}.toggle-pill.active{border-color:var(--accent);color:var(--accent-lit);background:#7355e82e}.pill-icon{border-radius:3px;width:100%;height:10px;position:relative;overflow:hidden}.pill-icon-gradient{background:linear-gradient(90deg,#7355e8,#a480ff)}.pill-icon-mixed{display:flex}.pill-icon-mixed span{flex:1;height:100%}.pill-icon-random{background:linear-gradient(90deg,#fbbf24,#7355e8,#34d399,#a480ff) 0 0/200% 100%}.slider-row{margin-bottom:14px}.slider-header{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.slider-label{color:var(--text);font-size:12px}.slider-val{color:var(--accent2);text-align:right;min-width:36px;font-family:DM Mono,monospace;font-size:12px}input[type=range]{-webkit-appearance:none;background:var(--border2);cursor:pointer;border-radius:2px;outline:none;width:100%;height:3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border:2px solid var(--bg);border-radius:50%;width:14px;height:14px;transition:transform .1s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.blend-grid{grid-template-columns:1fr 1fr;gap:7px;display:grid}.blend-btn{border-radius:var(--r);border:1px solid var(--border2);background:var(--panel2);color:var(--muted);text-align:center;cursor:pointer;padding:7px;font-family:Syne,sans-serif;font-size:11px;transition:all .15s}.blend-btn.active,.blend-btn:hover{border-color:var(--accent);color:var(--accent)}.preset-row{flex-wrap:wrap;gap:8px;display:flex}.preset-chip{border:1px solid var(--border2);background:var(--panel2);color:var(--muted);cursor:pointer;border-radius:20px;padding:5px 12px;font-size:11px;transition:all .15s}.preset-chip:hover{border-color:var(--accent);color:var(--accent)}.preset-chip.active{background:var(--accent);border-color:var(--accent);color:#fff}.preset-chip.none-chip{border-style:dashed}.preset-chip.none-chip.active{background:var(--panel2);border-color:var(--border2);color:var(--text);border-style:solid}.canvas-area{background:radial-gradient(ellipse at 30% 40%, #7355e814 0%, transparent 60%), radial-gradient(ellipse at 70% 70%, #a480ff0d 0%, transparent 50%), var(--bg);flex:1;position:relative;overflow:hidden}.canvas-label{color:#ffffff2e;letter-spacing:.12em;text-transform:uppercase;pointer-events:none;z-index:5;font-family:DM Mono,monospace;font-size:12px;position:absolute;top:20px;left:50%;transform:translate(-50%)}.grid-bg{pointer-events:none;background-image:linear-gradient(#ffffff06 1px,#0000 1px),linear-gradient(90deg,#ffffff06 1px,#0000 1px);background-size:40px 40px;position:absolute;inset:0}.code-panel{background:var(--panel);border-left:1px solid var(--border);z-index:10;flex-direction:column;width:300px;min-width:300px;display:flex;overflow:hidden}.code-tabs{border-bottom:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;display:flex}.code-tab{text-align:center;color:var(--muted);cursor:pointer;white-space:nowrap;border-bottom:2px solid #0000;flex:1;min-width:40px;padding:9px 4px;font-size:10px;transition:all .15s}.code-tab.active{color:var(--accent);border-bottom-color:var(--accent)}.code-tab:hover:not(.active){color:var(--text)}.code-body{flex:1;padding:16px;overflow-y:auto}.code-body::-webkit-scrollbar{width:3px}.code-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}pre{color:#c9b0ff;white-space:pre-wrap;word-break:break-all;font-family:DM Mono,monospace;font-size:11px;line-height:1.7}.code-keyword{color:#ff79c6}.code-prop{color:#8be9fd}.code-val{color:#f1fa8c}.code-comment{color:#6272a4}.code-str{color:#50fa7b}.copy-btn{border-radius:var(--r);border:1px solid var(--border2);background:var(--panel2);width:calc(100% - 32px);color:var(--text);cursor:pointer;flex-shrink:0;margin:12px 16px;padding:9px;font-family:Syne,sans-serif;font-size:12px;transition:all .15s}.copy-btn:hover{background:var(--accent);border-color:var(--accent)}.copy-btn.copied{color:#fff;background:#1d9e75;border-color:#1d9e75}.chase-toggle{border:1px solid var(--border2);background:var(--panel2);color:var(--muted);cursor:pointer;letter-spacing:.04em;border-radius:20px;padding:4px 10px;font-family:Syne,sans-serif;font-size:10px;font-weight:500;transition:all .15s}.chase-toggle.active{background:var(--accent);border-color:var(--accent);color:#fff}.trail-particle{pointer-events:none;z-index:9998;transform-origin:50%;position:fixed}.toast{color:#fff;z-index:99999;pointer-events:none;background:#1d9e75;border-radius:20px;padding:10px 22px;font-size:13px;transition:transform .3s cubic-bezier(.34,1.56,.64,1);position:fixed;bottom:24px;left:50%;transform:translate(-50%)translateY(60px)}.toast.show{transform:translate(-50%)translateY(0)}