:root,[data-theme=light]{--bg: #f7f5ef;--panel: #f1eee7;--panel-2: #ffffff;--line: #d7d2c7;--line-strong: #b1b1b1;--text: #414141;--muted: #978f7e;--accent: #ffc800;--accent-ink: #3a3526;--hover: #ebe6db;--grid-dot: #a39b88;--glass: rgba(243, 240, 233, .66);--glass-solid: rgba(245, 242, 236, .94);--glass-border: rgba(255, 255, 255, .5);--shadow: rgba(60, 50, 30, .14)}[data-theme=dark]{--bg: #111110;--panel: #1a1918;--panel-2: #242220;--line: #2d2b28;--line-strong: #3d3b38;--text: #c8c4bc;--muted: #857f74;--accent: #ffc800;--accent-ink: #2a2618;--hover: #2f2c28;--grid-dot: #3c3a34;--glass: rgba(26, 25, 23, .62);--glass-solid: rgba(22, 21, 19, .95);--glass-border: rgba(255, 255, 255, .07);--shadow: rgba(0, 0, 0, .45)}*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--text);overflow:hidden;overscroll-behavior:none}#app{position:fixed;inset:0}#ui{position:absolute;inset:0;z-index:10;pointer-events:none}.float{pointer-events:auto;background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--glass-border);border-radius:20px;box-shadow:0 8px 28px var(--shadow)}body.perf-noblur .float,body.perf-noblur .dd-menu{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--glass-solid)}#modes,#status,#zoombox,#topbar{position:absolute}#topbar{top:14px;right:14px;padding:5px;display:flex;align-items:center;gap:2px}#topbar button{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:none;background:none;border-radius:16px;color:var(--text);cursor:pointer}#topbar button:hover{background:var(--hover)}#topbar button svg{display:block}#modes{top:14px;left:50%;transform:translate(-50%);display:flex;gap:4px;padding:5px;border-radius:999px}.mode-btn{background:none;border:none;color:var(--muted);font:inherit;font-size:14px;font-weight:500;padding:7px 20px;border-radius:999px;cursor:pointer}.mode-btn:hover{color:var(--text)}.mode-btn.active{background:var(--accent);color:var(--accent-ink);font-weight:600}#dock{position:absolute;bottom:16px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;max-width:calc(100vw - 28px)}#context{max-width:calc(100vw - 28px);padding:16px 18px;border-radius:20px;display:flex;flex-direction:column;align-items:stretch}#ctx-body{width:340px;max-height:min(58vh,480px);overflow-y:auto}#ctx-above{align-self:flex-start}#ctx-above.hidden{display:none}.output-pill{padding:8px 14px;border-radius:12px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}#context.wide #ctx-body{width:560px}#context.anim #ctx-body{width:760px}#context.edit #ctx-body{width:560px}.edit-cols>.edit-side:first-child{flex:0 1 auto}#context.ht #ctx-body{width:720px}.ht-cols{display:flex;align-items:stretch;gap:18px}.ht-main{display:flex;flex-direction:column;gap:10px;flex:1 1 0;min-width:0}.ht-shapes{flex:0 0 250px;border-left:1px solid var(--line);padding-left:18px;overflow-y:auto;max-height:56vh}.ht-shapes .asset-row{flex-wrap:wrap;overflow-x:visible}.ht-shapes .asset-list,#ht-mode{flex-wrap:wrap}#ht-scrub{display:flex;align-items:center;gap:8px;margin-top:8px}#ht-scrub[hidden]{display:none}#ht-scrub .rng{flex:1;margin-bottom:0}.ht-main .noise-right{display:flex;flex-direction:column;gap:10px}.ht-main .chk{width:100%;justify-content:space-between}#context.fit #ctx-body{width:auto}.noise-body,.exp-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.anim-cols{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}.anim-selects{display:grid;grid-template-columns:repeat(2,168px);gap:9px}.anim-selects .dd{width:100%}.anim-sliders{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px}.noise-left .mask-preview{margin-bottom:8px}#context.hidden,.ctx-panel.hidden{display:none}.ctx-panel h2{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}#dock-row{display:flex;align-items:stretch;gap:10px;width:max-content;max-width:calc(100vw - 28px)}#toolbox,#edits,#settings{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;justify-content:center;padding:10px}.tool-btn{display:inline-flex;align-items:center;justify-content:center;height:36px;background:var(--panel-2);color:var(--text);border:none;border-radius:10px;padding:0 14px;font-size:13px;cursor:pointer;white-space:nowrap}.tool-btn.icon-btn{width:36px;padding:0}.tool-btn svg{display:block}.tool-btn:hover{background:var(--hover)}.tool-btn.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}.tb-field{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}.tb-field select{background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:13px}.tb-sep{width:1px;align-self:stretch;background:var(--line);margin:2px}#status{left:14px;bottom:16px;padding:12px 14px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}#zoombox{right:14px;bottom:16px;padding:10px;display:flex;align-items:center;gap:6px}#sh-zlabel{min-width:42px;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}.dd{position:relative}.dd-btn{gap:8px;justify-content:space-between;min-width:104px}.num-field{display:flex;align-items:center;gap:6px;height:36px;min-width:104px;padding:0 12px;background:var(--panel-2);border:none;border-radius:10px;font-size:13px}.num-field input{width:100%;border:none;background:none;outline:none;color:var(--text);font-weight:700;font-size:13px;-moz-appearance:textfield}.num-field input::-webkit-outer-spin-button,.num-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.dd-label{display:inline-flex;align-items:baseline;gap:5px;min-width:0;overflow:hidden}.dd-prefix{color:var(--muted);flex-shrink:0}.dd-btn b{color:var(--text);font-weight:700;text-transform:capitalize;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dd-caret{color:var(--muted);font-size:10px;flex-shrink:0}.select-grid .dd,.select-grid .dd-btn,.anim-selects .dd,.anim-selects .dd-btn{width:100%}.dd-menu{display:flex;flex-direction:column;gap:2px;padding:6px;background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--glass-border);border-radius:14px;box-shadow:0 8px 28px var(--shadow);z-index:1000;max-height:50vh;overflow-y:auto}.dd-item{background:none;border:none;color:var(--text);border-radius:9px;padding:7px 16px;font-size:13px;cursor:pointer;text-align:left;white-space:nowrap;text-transform:capitalize;font-variant-numeric:tabular-nums}.dd-item:hover{background:var(--hover)}.dd-item.active{background:var(--accent);color:var(--accent-ink);font-weight:700}.shapes-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.shapes-head h2{margin:0}.shapes-head .tool-btn{height:30px;font-size:12px}.asset-row{display:flex;align-items:center;gap:6px;overflow-x:auto;padding-bottom:2px}.asset-list{display:flex;align-items:center;gap:6px}.asset-sep{flex-shrink:0;align-self:stretch;width:1px;background:var(--line);margin:3px}.asset-btn{position:relative;width:46px;height:46px;flex-shrink:0;display:grid;place-items:center;background:var(--panel-2);border:none;border-radius:8px;cursor:pointer;padding:6px;font-size:18px;color:var(--text)}.asset-btn:hover{background:var(--hover)}.asset-btn.active{background:var(--accent);color:var(--accent-ink)}.asset-btn svg{width:100%;height:100%;opacity:.5}.asset-btn.active svg{opacity:1}.del-badge{position:absolute;top:3px;right:3px;width:15px;height:15px;border-radius:50%;background:#e03131;color:#fff;font-size:11px;line-height:15px;text-align:center;cursor:pointer;display:none;z-index:2;box-shadow:0 1px 3px #00000059}.asset-btn:hover .del-badge,.swatch:hover .del-badge{display:block}.del-badge:hover{background:#c92a2a}.dropzone{flex-shrink:0;width:98px;height:46px;display:grid;place-items:center;gap:5px;grid-auto-flow:column;border:1px dashed var(--line);border-radius:8px;font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap;transition:border-color .12s,background .12s,color .12s}.dropzone:hover,.dropzone.over{border-color:var(--accent);background:var(--hover);color:var(--text)}.palette-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.palette-row{display:flex;height:26px;border:1px solid var(--line);border-radius:6px;overflow:hidden;cursor:pointer;padding:0;background:none}.palette-row.active{outline:2px solid var(--accent);outline-offset:1px}.palette-row i{flex:1;display:block}.swatches{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.swatch{position:relative;width:34px;height:34px;border-radius:6px;overflow:hidden;border:1px solid var(--line)}.swatch.active{outline:2px solid var(--accent);outline-offset:1px}.swatch input[type=color]{width:150%;height:150%;margin:-25%;border:none;padding:0;background:none;cursor:pointer}.swatch-add{width:34px;height:34px;border-radius:6px;border:1px dashed var(--line);background:var(--panel-2);color:var(--muted);font-size:18px;cursor:pointer}.swatch-add:hover{border-color:var(--accent);color:var(--accent)}.rng{position:relative;height:34px;border-radius:99px;background:var(--line);overflow:hidden;cursor:pointer;user-select:none;touch-action:none;outline:none;margin-bottom:9px}.rng:focus-visible{box-shadow:0 0 0 2px var(--accent)}.rng-content{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 15px;box-sizing:border-box;font-size:13px;white-space:nowrap;pointer-events:none;color:var(--text)}.rng-val{font-weight:700;font-variant-numeric:tabular-nums}.rng-fill{position:absolute;top:0;left:0;height:100%;background:var(--text);overflow:hidden}.rng-content--light{color:var(--panel-2)}.mask-preview{width:100%;aspect-ratio:1;border-radius:8px;border:1px solid var(--line);image-rendering:pixelated;cursor:grab;display:block;margin-bottom:8px;touch-action:none}.mask-preview:active{cursor:grabbing}.chk{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);cursor:pointer}.chk input[type=checkbox]{appearance:none;-webkit-appearance:none;width:44px;height:18px;border-radius:99px;background:var(--line);position:relative;cursor:pointer;flex-shrink:0;margin:0;transition:background .2s cubic-bezier(.4,0,.2,1)}.chk input[type=checkbox]:hover{background:var(--accent)}.chk input[type=checkbox]:before{content:"";position:absolute;top:0;left:0;width:56%;height:100%;border-radius:99px;border:3px solid var(--text);background:transparent;box-sizing:border-box;transition:left .15s cubic-bezier(.4,0,.2,1),background .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1)}.chk input[type=checkbox]:checked:before{left:44%;background:var(--text);border-color:transparent}.anim-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.anim-head h2{margin:0}.select-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end;margin-bottom:12px}.sel{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted)}.sel select{background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:5px 6px;font-size:12px;text-transform:capitalize}#anim-play{background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:6px 12px;font-size:13px;cursor:pointer;white-space:nowrap}#anim-play:hover{background:var(--hover)}#anim-play.playing{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.exp-toggles{display:flex;flex-direction:column;gap:7px;align-items:flex-start}.exp-dims{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;margin:2px 0 10px}.exp-sub{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}.exp-cols{align-items:stretch}.exp-col{display:flex;flex-direction:column}.exp-col .exp-save{margin-top:auto;padding-top:12px}.colors-cols{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:start}#ctx-brush{display:flex;align-items:stretch;gap:14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}#ctx-brush.hidden{display:none}#context.brush-only #ctx-brush{margin-top:0;padding-top:0;border-top:none}.brush-group{display:flex;flex-direction:column;gap:8px}.brush-title{margin:0;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}.brush-controls{flex:1;display:flex;align-items:center;gap:10px}#ctx-brush #brush-size,#ctx-brush #brush-span{width:150px}#ctx-brush .rng{margin-bottom:0}.seg{display:inline-flex;border:none;border-radius:12px;overflow:hidden;background:var(--panel-2)}.seg-btn{border:none;background:transparent;color:var(--text);padding:8px 18px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.seg-btn+.seg-btn{border-left:1px solid var(--line)}.seg-btn.active{background:var(--accent);color:var(--accent-ink)}.seg-btn.disabled,.seg-btn:disabled{opacity:.35;cursor:not-allowed}.seg-btn svg{display:block}.grid-opts{display:flex;flex-direction:column;gap:12px;align-items:flex-start}.grid-opts .chk{width:100%;justify-content:space-between;flex-direction:row-reverse}#grid-sliders{margin-top:14px}.bg-row{display:flex;align-items:center;gap:10px}.bg-row .swatch{width:34px;height:34px}.hex-row{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}.hex-input{width:84px;height:30px;padding:0 8px;background:var(--panel-2);border:none;border-radius:8px;color:var(--text);font:inherit;font-size:12px;font-variant-numeric:tabular-nums;text-transform:uppercase;outline:none}.hex-input:focus{box-shadow:0 0 0 2px var(--accent) inset}.bg-row .hex-input{flex:1;min-width:0}.colors-right .exp-sub+.bg-row+.exp-sub{margin-top:16px}.exp-progress{align-self:flex-start;display:inline-block;font-size:12px;color:var(--accent-ink);background:var(--accent);padding:5px 11px;border-radius:999px;font-variant-numeric:tabular-nums;margin-top:8px}.exp-progress:empty{display:none}.frame-ui,.tile-frame-ui{touch-action:none}.tile-frame-border{stroke:var(--accent)}.tile-frame-handle{fill:var(--accent);stroke:var(--accent-ink)}.tile-seam{stroke:#06b6d4}.ctx-hint{margin:0 0 12px;font-size:12px;line-height:1.45;color:var(--muted);max-width:240px}.divider-lines{fill:none;stroke:var(--accent);stroke-opacity:.85}#div-density{margin-bottom:4px}.blocked-shape{fill:#e03131;fill-opacity:.14;stroke:#e03131;stroke-opacity:.95;stroke-linecap:round;stroke-linejoin:round}.stencil-shape{fill:#37b24d;fill-opacity:.12;stroke:#37b24d;stroke-opacity:.95;stroke-linecap:round;stroke-linejoin:round}.block-drag-rect{fill:#e03131;fill-opacity:.1;stroke:#e03131;stroke-linecap:round}.line-preview{fill:none;stroke:var(--accent);stroke-opacity:.9;stroke-linecap:round;stroke-linejoin:round}.hover-cells.block .hover-cell{fill:#e03131;fill-opacity:.22}.seg-text{font-size:12px;font-weight:600}.block-row{display:flex;align-items:center;gap:16px;margin-top:12px}.block-row .seg,.block-row .seg-btn{flex:1}.block-row .chk{flex-shrink:0}.edit-cols{display:flex;align-items:stretch;gap:18px}.edit-side{display:flex;flex-direction:column;gap:10px;flex:1}.edit-side h2{margin:0}.edit-sep{width:1px;align-self:stretch;background:var(--line)}.edit-row{display:flex;align-items:center;gap:6px;margin-top:auto}.edit-row .tool-btn{flex:1}.edit-btns{display:flex;gap:6px;margin-top:auto}.edit-btns .tool-btn{flex:1}.edit-swatches{display:flex;flex-wrap:wrap;gap:6px}.edit-swatch{width:34px;height:34px;border-radius:6px;border:none;cursor:pointer;padding:0}.edit-swatch.active{outline:2px solid var(--accent);outline-offset:1px}.edit-swatch.dice{display:grid;place-items:center;background:var(--panel-2);color:var(--muted)}.edit-swatch.dice svg{width:20px;height:20px}.edit-swatch.none{display:grid;place-items:center;background:var(--panel-2);color:var(--muted)}.edit-swatch.none svg{width:22px;height:22px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.panel-head h2{margin:0}.stencil-src{display:flex;margin-bottom:14px}.stencil-src .seg-btn{flex:1}.stencil-lock{margin-top:12px}#src-noise.hidden,#src-stripes.hidden,#src-image.hidden,#src-text.hidden,#mask-reseed.hidden{display:none}#src-text{display:flex;flex-direction:column;gap:12px}.text-input{width:100%;box-sizing:border-box;height:38px;padding:0 12px;background:var(--panel-2);color:var(--text);border:none;border-radius:10px;font-size:15px;outline:none}.text-input:focus{outline:2px solid var(--accent)}.img-drop{position:relative;display:block;cursor:pointer}.img-preview{cursor:pointer;margin-bottom:0;background:var(--panel-2)}.img-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;line-height:1.4;color:var(--muted);pointer-events:none}.img-drop.has-image .img-hint{display:none}.img-drop.over .img-preview{border-color:var(--accent)}.noise-actions{display:flex;gap:8px;margin-top:12px}.noise-actions button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;background:var(--panel-2);color:var(--text);border:none;border-radius:10px;padding:0 14px;font-size:13px;cursor:pointer;white-space:nowrap}.noise-actions button:hover{background:var(--hover)}#stage{position:absolute;inset:0;overflow:hidden;background:var(--bg);cursor:crosshair;touch-action:none;overscroll-behavior:none}.text-fontrow{display:flex;align-items:center;gap:12px}body.ambient #ui{display:none}.ambient-msg{display:none;position:fixed;inset:0;z-index:50;pointer-events:none;align-items:center;justify-content:center;text-align:center;padding:0 24px;font-size:clamp(20px,7vw,34px);font-weight:700;letter-spacing:.01em;color:var(--text)}body.ambient .ambient-msg{display:flex}.safari-wip{position:fixed;top:10px;left:12px;z-index:9999;pointer-events:none;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--muted);background:var(--glass-solid);border:1px solid var(--glass-border);border-radius:8px;padding:4px 9px;box-shadow:0 4px 14px var(--shadow)}#stage.tool-pan{cursor:grab}#stage.tool-pan.panning{cursor:grabbing}.halftone-preview{opacity:.5}.grid-dot{fill:var(--grid-dot)}.hover-cell{fill:var(--line);fill-opacity:.75}.mode-btn,.tool-btn,.seg-btn,.dd-btn,.dd-item,.swatch,.swatch-add,.swatch-del,.edit-swatch,.asset-btn,.num-field,#topbar button{transition:background-color .16s cubic-bezier(.4,0,.2,1),color .16s cubic-bezier(.4,0,.2,1),border-color .16s cubic-bezier(.4,0,.2,1),box-shadow .16s cubic-bezier(.4,0,.2,1),outline-color .16s cubic-bezier(.4,0,.2,1),transform .12s cubic-bezier(.4,0,.2,1)}.mode-btn:active,.tool-btn:active,.seg-btn:active,.dd-btn:active,.swatch-add:active,.edit-swatch:active,.asset-btn:active,#topbar button:active{transform:scale(.93)}.tool-btn:active,.seg-btn:active,.dd-btn:active{transform:scale(.96)}.cell-bg.animating rect{transition:x .22s cubic-bezier(.4,0,.2,1),y .22s cubic-bezier(.4,0,.2,1),width .22s cubic-bezier(.4,0,.2,1),height .22s cubic-bezier(.4,0,.2,1),rx .22s cubic-bezier(.4,0,.2,1)}.morph>*{transition:opacity .11s cubic-bezier(.4,0,.2,1)}.morph.is-fading>*{opacity:0;pointer-events:none}.morph,#ctx-body.morph{overflow:hidden}.morph.is-sizing{transition:width .21s cubic-bezier(.4,0,.2,1),height .21s cubic-bezier(.4,0,.2,1)}.hover-overlay{opacity:0;transition:opacity .16s cubic-bezier(.4,0,.2,1)}.hover-overlay.visible{opacity:1}