:root{--font:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mono:ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;--panel:#fff;--canvas:#ececec;--grid:#0000000b;--border:#e6e6e6;--border-strong:#d4d4d4;--divider:#f0f0f0;--text:#1e1e1e;--text-2:#6b6b6b;--text-3:#9b9b9b;--track:#e2e2e2;--hover:#f5f5f5;--accent:#0d99ff;--danger:#e5484d;--radius:6px;--panel-width:280px;--thumb:14px;--shadow-pop:0 4px 16px #00000014, 0 1px 3px #0000000f;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0}body{font:11px/1.45 var(--font);color:var(--text);background:var(--canvas);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"cv11", "ss01";overflow:hidden}button,input{font:inherit;color:inherit}button{cursor:pointer}:focus-visible{outline:2px solid var(--accent);outline-offset:1px}[hidden]{display:none!important}.app{grid-template-columns:var(--panel-width) minmax(0, 1fr);height:100dvh;display:grid}.panel{background:var(--panel);border-right:1px solid var(--border);z-index:2;flex-direction:column;min-height:0;display:flex}.panel-body{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d6d6d6 transparent;flex:1;min-height:0;overflow-y:auto}.stage{min-width:0;min-height:0;position:relative;overflow:hidden}.panel-header{border-bottom:1px solid var(--border);flex:none;justify-content:space-between;align-items:center;height:44px;padding:0 8px 0 16px;display:flex}.brand{align-items:baseline;gap:8px;min-width:0;display:flex}.brand-mark{background:#d5dd76;border-radius:50%;align-self:center;width:10px;height:10px;box-shadow:inset 0 0 0 1.5px #2b2a22}.brand-name{letter-spacing:-.01em;font-size:13px;font-weight:600}.brand-tag{color:var(--text-3);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.header-actions{gap:2px;display:flex}.section{border-bottom:1px solid var(--divider);padding:12px 16px 10px}.section:last-child{border-bottom:0}.section-head{justify-content:space-between;align-items:center;min-height:20px;margin-bottom:6px;display:flex}.section-title{letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin:0;font-size:10px;font-weight:500}.row{margin:0 0 6px}.row-head{justify-content:space-between;align-items:center;gap:8px;min-height:22px;display:flex}.row-label{color:var(--text);-webkit-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.row--range .row-label{cursor:default}.row-value{width:70px;height:22px;color:var(--text-2);text-align:right;font-variant-numeric:tabular-nums;background:0 0;border:1px solid #0000;border-radius:4px;margin-right:-5px;padding:0 5px}.row-value:hover{border-color:var(--border)}.row-value:focus{border-color:var(--accent);color:var(--text);background:#fff;outline:none}.range{appearance:none;cursor:pointer;touch-action:pan-y;--fill:50%;background:0 0;width:100%;height:20px;margin:0;display:block}.range:focus{outline:none}.range::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--text) 0 var(--fill), var(--track) var(--fill) 100%);border-radius:2px;height:2px}.range::-webkit-slider-thumb{-webkit-appearance:none;width:var(--thumb);height:var(--thumb);margin-top:calc((2px - var(--thumb)) / 2);border:1.5px solid var(--text);background:#fff;border-radius:50%;transition:transform .12s;box-shadow:0 1px 2px #0000001f}.range:active::-webkit-slider-thumb{transform:scale(1.12)}.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #0d99ff59}.range::-moz-range-track{background:var(--track);border-radius:2px;height:2px}.range::-moz-range-progress{background:var(--text);border-radius:2px;height:2px}.range::-moz-range-thumb{width:calc(var(--thumb) - 3px);height:calc(var(--thumb) - 3px);border:1.5px solid var(--text);background:#fff;border-radius:50%}.range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #0d99ff59}.segmented{border-radius:var(--radius);background:#f1f1f1;grid-auto-columns:1fr;grid-auto-flow:column;gap:2px;padding:2px;display:grid}.seg-option{height:26px;color:var(--text-2);white-space:nowrap;background:0 0;border:0;border-radius:5px;padding:0 6px;font-weight:500;transition:background-color .12s,color .12s}.seg-option:hover{color:var(--text)}.seg-option[aria-checked=true]{background:var(--text);color:#fff}.segmented--small .seg-option{height:24px}.check{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;min-height:24px;margin:2px 0 4px;display:flex;position:relative}.check input{opacity:0;width:1px;height:1px;position:absolute}.check-box{background:#fff;border:1.5px solid #8c8c8c;border-radius:3px;flex:none;width:13px;height:13px;transition:background-color .12s,border-color .12s;position:relative}.check input:checked+.check-box{border-color:var(--text);background:var(--text)}.check input:checked+.check-box:after{content:"";border:1.5px solid #fff;border-width:0 1.5px 1.5px 0;width:3.5px;height:7px;position:absolute;top:.5px;left:3px;transform:rotate(45deg)}.check input:focus-visible+.check-box{outline:2px solid var(--accent);outline-offset:1px}.dropzone-row{gap:6px;margin-bottom:10px;display:flex}.dropzone{border-radius:var(--radius);min-width:0;height:40px;color:var(--text-2);background:#fafafa;border:1px dashed #cfcfcf;flex:1;justify-content:center;align-items:center;gap:6px;padding:0 10px;transition:border-color .12s,background-color .12s;display:flex}.dropzone:hover{background:#f5f5f5;border-color:#a8a8a8}.dropzone-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.icon{flex:none;display:inline-flex}.icon-button{border:1px solid var(--border);border-radius:var(--radius);width:40px;height:40px;color:var(--text-2);background:#fff;flex:none;place-items:center;transition:background-color .12s,color .12s;display:inline-grid}.icon-button:hover:not(:disabled){background:var(--hover);color:var(--text)}.icon-button--ghost{background:0 0;border-color:#0000;width:28px;height:28px}.icon-button:disabled{opacity:.35;cursor:default}.section-actions{gap:2px;display:flex}.section-head .icon-button--ghost{width:22px;height:22px;margin-right:-4px}.button{border:1px solid var(--border-strong);border-radius:var(--radius);white-space:nowrap;background:#fff;justify-content:center;align-items:center;gap:6px;height:34px;padding:0 12px;font-weight:500;transition:background-color .12s,border-color .12s,transform 60ms;display:inline-flex}.button:hover{background:var(--hover)}.button:active{transform:translateY(.5px)}.button--primary{border-color:var(--text);background:var(--text);color:#fff}.button--primary:hover{background:#000}.chips{flex-wrap:wrap;gap:4px;margin:0 0 10px;display:flex}.chip{border:1px solid var(--border);height:24px;color:var(--text-2);background:#fff;border-radius:999px;padding:0 10px;font-weight:500;transition:background-color .12s,color .12s,border-color .12s}.chip:hover{border-color:var(--border-strong);color:var(--text)}.chip[aria-pressed=true]{border-color:var(--text);background:var(--text);color:#fff}.section-note{color:var(--text-3);margin:-2px 0 10px;line-height:1.45}.effect{border-radius:var(--radius);margin:0 -8px 4px;transition:background-color .12s}.effect.is-on{box-shadow:inset 0 0 0 1px var(--divider);background:#fafafa}.effect-head{align-items:center;gap:2px;height:32px;padding:0 8px 0 2px;display:flex}.effect-eye{width:28px;height:28px;color:var(--text-3);background:0 0;border:0;border-radius:5px;place-items:center;display:inline-grid}.effect-eye:hover{background:var(--hover);color:var(--text)}.effect-eye .icon{display:none}.effect-eye[aria-pressed=true] .icon:first-child,.effect-eye[aria-pressed=false] .icon:last-child{display:inline-flex}.effect-eye[aria-pressed=true]{color:var(--text)}.effect-name{height:28px;color:var(--text-2);text-align:left;background:0 0;border:0;flex:1;padding:0 4px;font-weight:500}.effect.is-on .effect-name{color:var(--text)}.effect-tag{border:1px solid var(--border);color:var(--text-3);letter-spacing:.02em;border-radius:999px;padding:1px 6px;font-size:10px}.effect.is-on .effect-tag--vector{color:#0b76d1;border-color:#c7e3ff}.effect.is-on .effect-tag--raster{color:#a5642a;border-color:#f0dcc6}.effect-body{padding:2px 10px 8px}.color-grid{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;display:grid}.color-field{gap:4px;display:grid}.color-input{border:1px solid var(--border);border-radius:var(--radius);background:#fff;align-items:center;gap:6px;height:30px;padding:3px;display:flex}.color-input:focus-within{border-color:var(--accent)}.swatch{background:var(--swatch,#fff);border-radius:4px;flex:none;width:22px;height:22px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #0000001f}.swatch input[type=color]{opacity:0;cursor:pointer;border:0;width:calc(100% + 8px);height:calc(100% + 8px);padding:0;position:absolute;inset:-4px}.hex{width:100%;min-width:0;height:22px;font-family:var(--mono);text-transform:uppercase;background:0 0;border:0;padding:0 2px;font-size:11px}.hex:focus{outline:none}.export-meta{justify-content:space-between;align-items:center;gap:8px;margin-top:4px;display:flex}.export-info{color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}.panel-footer{padding:10px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--panel);flex:none;gap:6px;display:grid}.footer-row{grid-template-columns:1fr 1fr;gap:6px;display:grid}.seed{border:1px solid var(--border);border-radius:var(--radius);cursor:text;align-items:center;gap:6px;height:34px;padding:0 4px 0 10px;display:flex}.seed:focus-within{border-color:var(--accent)}.seed-label{color:var(--text-3)}.seed-input{text-align:right;width:100%;min-width:0;height:100%;font-family:var(--mono);background:0 0;border:0;font-size:11px}.seed-input:focus{outline:none}.viewport{background-color:var(--canvas);background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);background-size:24px 24px;background-position:var(--grid-x,0) var(--grid-y,0);touch-action:none;position:absolute;inset:0}.viewport-canvas{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;display:block}.viewport-canvas.is-panning{cursor:grabbing}.hud{z-index:1;pointer-events:none;align-items:center;display:flex;position:absolute}.hud>*{pointer-events:auto}.hud--tl{top:12px;left:12px}.hud--tr{top:12px;right:12px}.hud--bl{bottom:12px;left:14px}.hud--br{bottom:12px;right:12px}.hud-chip{border:1px solid var(--border);border-radius:var(--radius);color:var(--text-2);font-variant-numeric:tabular-nums;background:#ffffffeb;padding:3px 8px}.zoom{border:1px solid var(--border);pointer-events:auto;background:#fffffff5;border-radius:8px;gap:2px;padding:3px;box-shadow:0 1px 2px #0000000a}.zoom-button{min-width:26px;height:26px;color:var(--text);font-variant-numeric:tabular-nums;background:0 0;border:0;border-radius:5px;place-items:center;padding:0 6px;display:inline-grid}.zoom-button:hover{background:var(--hover)}.zoom-value{min-width:48px}.zoom-fit{border:1px solid var(--border);font-weight:500}.zoom-divider{background:var(--border);width:1px;height:16px;margin:0 3px}.status{color:var(--text-3);font-variant-numeric:tabular-nums;background:#ffffffd1;border-radius:999px;align-items:center;gap:6px;padding:2px 8px;display:inline-flex}.status:empty{display:none}.status.is-busy:before{content:"";background:var(--accent);border-radius:50%;width:6px;height:6px;animation:.9s ease-in-out infinite alternate pulse}@keyframes pulse{0%{opacity:.25}to{opacity:1}}.help-button{border:1px solid var(--border);width:28px;height:28px;color:var(--text-2);background:#fffffff5;border-radius:50%;font-weight:600}.help-button:hover{color:var(--text)}.help{border:1px solid var(--border);width:300px;box-shadow:var(--shadow-pop);background:#fff;border-radius:10px;padding:12px 14px;position:absolute;bottom:36px;right:0}.help h3{letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin:0 0 8px;font-size:10px;font-weight:500}.help dl{grid-template-columns:auto 1fr;gap:6px 12px;margin:0;display:grid}.help dt{color:var(--text-2)}.help dd{text-align:right;margin:0}kbd{border:1px solid var(--border);min-width:16px;font:10px/14px var(--font);text-align:center;border-bottom-width:2px;border-radius:4px;margin:0 1px;padding:0 4px;display:inline-block}.drop-overlay{z-index:3;border:2px dashed var(--accent);color:var(--accent);pointer-events:none;background:#0d99ff0f;border-radius:12px;place-items:center;font-size:13px;font-weight:500;display:none;position:absolute;inset:10px}.drop-overlay.is-active{display:grid}.toast{left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:10;background:var(--text);color:#fff;max-width:min(90vw,420px);box-shadow:var(--shadow-pop);opacity:0;pointer-events:none;border-radius:8px;padding:8px 12px;transition:opacity .18s,transform .18s;position:fixed;transform:translate(-50%,6px)}.toast.is-visible{opacity:1;transform:translate(-50%)}.toast--error{background:var(--danger)}@media (width<=820px){.app{grid-template-rows:minmax(240px,52dvh) minmax(0,1fr);grid-template-columns:minmax(0,1fr)}.stage{order:-1}.panel{border-right:0;border-top:1px solid var(--border)}.toast{bottom:auto;top:calc(12px + env(safe-area-inset-top))}.help{width:min(300px,100vw - 32px)}}@media (pointer:coarse){:root{--thumb:22px}.range{height:30px}.seg-option{height:32px}.chip{height:30px}.row-value{width:84px;font-size:16px}.hex,.seed-input{font-size:16px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}