@font-face{font-family:'AstheticPixel';src:url(fonts/AstheticPixel.otf) format('opentype');font-weight:normal;font-style:normal;font-display:swap}
:root{--ink:#111;--paper:#f7f5ef;--pink:#ff4fa3;--cyan:#8fd8df;--yellow:#ffe45c;--red:#ff3b30;--green:#3ddc73;--blue:#2f7bff;--pixel-font:'Silkscreen','Courier New',monospace;--aero-bg:#4580c4;--aero-grad:linear-gradient(to right,#ffffff66,#0000001a,#ffffff33),var(--aero-bg);--aero-glass:linear-gradient(135deg,#fff5 70px,transparent 100px),linear-gradient(225deg,#fff5 70px,transparent 100px),linear-gradient(54deg,#0002 0 4%,#6661 6% 6%,#0002 8% 10%,#0002 15% 16%,#aaa1 17% 18%,#0002 23% 24%,#bbb2 25% 26%,#0002 31% 33%,#0002 34% 34.5%,#bbb2 36% 40%,#0002 41% 41.5%,#bbb2 44% 45%,#bbb2 46% 47%,#0002 48% 49%,#0002 50% 50.5%,#0002 56% 56.5%,#bbb2 57% 63%,#0002 67% 69%,#bbb2 69.5% 70%,#0002 73.5% 74%,#bbb2 74.5% 79%,#0002 80% 84%,#aaa2 85% 86%,#0002 87%,#bbb1 90%) left center/100vw 100vh no-repeat fixed;--aero-bd:#000000b3;--aero-bdr:6px;--aero-space:6px;--aero-surface:#f0f0f0;--aero-wct-bd:#0000004d;--aero-wct-bdr:5px;--aero-wct-bg:linear-gradient(#ffffff80,#ffffff4d 45%,#0000001a 50%,#0000001a 75%,#ffffff80);--aero-wct-bg-h:radial-gradient(circle at bottom,#2aceda,transparent 65%),linear-gradient(#b6d9ee 50%,#1a6ca1 0);--aero-wct-close:radial-gradient(circle at -60% 50%,#0007 5% 10%,#0000 50%),radial-gradient(circle at 160% 50%,#0007 5% 10%,#0000 50%),linear-gradient(#e0a197e5,#cf796a 25% 50%,#d54f36 50%);--aero-font:600 11px "Segoe UI",system-ui,-apple-system,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0a3a3f;color:var(--ink);font-family:var(--pixel-font);cursor:url(images/img001.gif) 0 31,url(images/img002.gif) 0 31,auto}
#canvas{position:fixed;inset:0;z-index:5;overflow:hidden;cursor:url(images/img003.gif) 0 31,url(images/img004.gif) 0 31,crosshair;background-color:var(--paper)}
.particle{position:absolute;z-index:50;pointer-events:none;opacity:1;border-radius:50%;transition:filter .08s linear;}.brush-mark{position:absolute;z-index:50;pointer-events:none;border-radius:50%;opacity:1;transition:filter .08s linear;}.image-item{position:absolute;z-index:10;max-width:360px;max-height:360px;object-fit:contain;cursor:move;user-select:none;pointer-events:auto;transform:translate(-50%,-50%);border:2px solid transparent}.sticker-item{position:absolute;z-index:10;max-width:360px;max-height:360px;cursor:move;user-select:none;pointer-events:auto;transform:translate(-50%,-50%);border:2px solid transparent}.sticker-item-img{display:block;width:100%;height:auto;pointer-events:none;user-select:none}.sticker-item.selected{border-color:var(--pink);outline:2px dashed var(--ink);outline-offset:3px}.sticker-item.locked{cursor:default}.sticker-toolbar{position:absolute;top:-16px;right:-16px;display:none;gap:4px;z-index:5}.sticker-item.selected .sticker-toolbar{display:flex}.sticker-toolbar button{width:22px;height:22px;padding:0;line-height:1;font-size:11px;font-weight:700;font-family:var(--pixel-font);border:2px solid var(--ink);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:1px 1px 0 rgba(0,0,0,.6);background:#fff;color:var(--ink)}.sticker-toolbar .sticker-lock{background:var(--green)}.sticker-toolbar .sticker-remove{background:var(--red);color:#fff}.sticker-toolbar button:hover{transform:scale(1.15)}.canvas-reference{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0;pointer-events:none;display:block}.image-item.selected{border-color:var(--pink);outline:2px dashed var(--ink);outline-offset:3px}.library-panel{position:fixed;right:18px;top:18px;z-index:35;width:230px;max-height:calc(100vh - 36px);overflow:auto;display:none;padding:12px;background:rgba(255,255,255,.94);border:2px solid var(--ink);box-shadow:3px 3px 5px rgba(0,0,0,.75),6px 7px 18px rgba(0,0,0,.7)}.library-panel.open{display:block}.library-panel h3{margin:0 0 9px;font-size:12px;text-transform:uppercase}.library-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.library-thumb{width:100%;aspect-ratio:1;object-fit:cover;border:2px solid var(--ink);cursor:pointer;background:#eee}.library-thumb:hover{outline:3px solid var(--pink);outline-offset:1px}.library-empty{font:11px monospace;line-height:1.35}.image-settings{display:none}.image-settings.visible{display:flex}.floater{mix-blend-mode:difference;background:#fff!important;animation:floatLife var(--float-time) steps(8,end) infinite alternate;transform-origin:center;}.floater::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:1px solid rgba(255,255,255,.28);animation:floatPulse var(--pulse-time) steps(6,end) infinite alternate;}@keyframes floatLife{0%{transform:translate(var(--dx1),var(--dy1)) rotate(-4deg)}25%{transform:translate(var(--dx2),var(--dy2)) rotate(6deg)}50%{transform:translate(var(--dx3),var(--dy3)) rotate(-5deg)}75%{transform:translate(var(--dx2),var(--dy2)) rotate(5deg)}100%{transform:translate(var(--dx1),var(--dy1)) rotate(-4deg)}}@keyframes floatPulse{from{scale:.92;opacity:.65}to{scale:1.08;opacity:1}}
#blurCursor{position:fixed;display:none;pointer-events:none;z-index:100;border:2px solid var(--ink);border-radius:50%;background:rgba(255,255,255,.12);mix-blend-mode:multiply;transform:translate(-50%,-50%);}.canvas-panel{position:fixed;left:18px;top:78px;z-index:30;display:none;flex-direction:column;position:relative;background:var(--aero-surface);border:1px solid var(--aero-bd);border-radius:var(--aero-bdr);box-shadow:3px 3px 5px rgba(0,0,0,.45),6px 7px 18px rgba(0,0,0,.35),2px 2px 10px 1px var(--aero-bd),inset 0 0 0 1px #fffa;overflow:hidden}.canvas-panel.open{display:flex}.canvas-panel .panel-body{align-items:end}.canvas-panel label{display:flex;flex-direction:column;gap:5px;font:11px var(--pixel-font);text-transform:uppercase}.canvas-panel select{border:2px solid var(--ink);padding:8px;background:white;font-weight:bold;font-family:var(--pixel-font)}
.canvas-panel input[type=number]{border:2px solid var(--ink);padding:8px;background:white;font-weight:bold;font-family:var(--pixel-font);width:90px}
.custom-size-fields{display:none;flex-direction:row;gap:10px}
.custom-size-fields.visible{display:flex}.canvas-panel button{background:var(--cyan)}
.blur-patch{display:none;} 
/* Organic forms: a single filled, rounded star/blob with thick tentacle lobes */
.organism{position:absolute;pointer-events:none;width:260px;height:260px;transform:translate(-50%,-50%);transform-origin:center;overflow:visible}
.organism svg{width:100%;height:100%;overflow:visible}.organism path{fill:none;stroke:var(--organism-color);stroke-width:var(--tentacle-thickness,22px);stroke-linecap:round;stroke-linejoin:round;filter:none;stroke-dasharray:var(--path-length);stroke-dashoffset:var(--path-length)}.organism path.growing{animation:tentacleGrow 1.8s steps(16,end) forwards}.organism circle{fill:var(--organism-color);filter:none;transform-origin:130px 130px;animation:bodyGrow .45s steps(6,end) forwards}
@keyframes tentacleGrow{0%{stroke-dashoffset:var(--path-length)}100%{stroke-dashoffset:0}}
@keyframes bodyGrow{0%{transform:scale(0)}100%{transform:scale(1)}}

.floating{position:fixed;z-index:20;display:flex;flex-direction:column;background:var(--aero-surface);border:1px solid var(--aero-bd);border-radius:var(--aero-bdr);box-shadow:3px 3px 5px rgba(0,0,0,.45),6px 7px 18px rgba(0,0,0,.35),2px 2px 10px 1px var(--aero-bd),inset 0 0 0 1px #fffa;overflow:hidden}.floating::before,.canvas-panel::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(transparent 20%,#ffffffb3 40%,transparent 41%),var(--aero-grad);background-color:var(--aero-bg);box-shadow:inset 0 0 0 1px #fffd;opacity:.85}
.chrome-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:var(--aero-space) var(--aero-space) 0;background:var(--aero-glass);background-color:var(--aero-bg);border:0;border-radius:var(--aero-bdr) var(--aero-bdr) 0 0;box-shadow:inset 0 1px 0 #fffd,inset 1px 0 0 #fffd,inset -1px 0 0 #fffd;cursor:move;user-select:none;touch-action:none}
.chrome-bar .chrome-label{margin:0 0 var(--aero-space) 2px;font:var(--aero-font);color:#000;line-height:15px;letter-spacing:0;text-shadow:0 0 8px #fff,0 0 8px #fff,0 0 8px #fff,0 0 8px #fff,0 0 8px #fff,0 0 8px #fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.title-bar-controls{display:flex;flex:none;align-self:flex-start;margin-bottom:var(--aero-space);background:#fff3;border:1px solid var(--aero-wct-bd);border-top:0;border-radius:0 0 var(--aero-wct-bdr) var(--aero-wct-bdr);box-shadow:0 1px 0 #fffa,1px 0 0 #fffa,-1px 0 0 #fffa}
.title-bar-controls button{background:none;border:0;border-right:1px solid var(--aero-wct-bd);box-shadow:none;box-sizing:border-box;min-height:18px;min-width:26px;padding:0;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.title-bar-controls button:last-child{border-right:0;min-width:40px;border-radius:0 0 var(--aero-wct-bdr) 0}
.title-bar-controls button:first-child{border-radius:0 0 0 var(--aero-wct-bdr)}
.title-bar-controls button::before{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px #fff5;background:var(--aero-wct-bg) no-repeat center,url('images/img005.png') no-repeat center 8px}
.title-bar-controls button[aria-label=Maximize]::before{background:var(--aero-wct-bg) no-repeat center,url('images/img006.png') no-repeat 50%}
.title-bar-controls button[aria-label=Close]::before{background:var(--aero-wct-bg) no-repeat center,url('images/img007.png') no-repeat 50%}
.title-bar-controls button:hover::before{background:var(--aero-wct-bg-h) no-repeat center,var(--aero-wct-bg) no-repeat center,inherit;box-shadow:0 0 7px 3px #5dc4f0,inset 0 0 0 1px #fff5}
.title-bar-controls button[aria-label=Close]:hover::before{background:var(--aero-wct-close) no-repeat center,var(--aero-wct-bg) no-repeat center,inherit;box-shadow:0 0 7px 3px #e68e75,inset 0 0 0 1px #fff5}
.title-bar-controls button:active::before{filter:brightness(.82)}
.panel-body{display:flex;align-items:center;gap:10px;padding:10px 12px;flex-wrap:wrap;position:relative;background:var(--aero-surface);border:1px solid var(--aero-bd);border-top:0;border-radius:0 0 var(--aero-bdr) var(--aero-bdr);box-shadow:0 0 0 1px #fff9}
.panel-body.stack{flex-direction:column;align-items:stretch;flex-wrap:nowrap}
.top-left{left:18px;top:18px;max-width:calc(100vw - 36px)}
.bottom-left{left:18px;bottom:18px}
.bottom-middle{left:50%;bottom:18px;transform:translateX(-50%);max-width:calc(100vw - 36px)}
.bottom-middle .tools-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.bottom-middle .swatches{justify-content:center;padding-left:0}
/* Brush toolbar: Aero window tinted magenta -- scoped entirely to .bottom-middle
   via the --aero-bg custom property, so no other window is affected. */
.bottom-middle{--aero-bg:#c23b8f}
.bottom-middle button.tool-icon{background:rgba(255,255,255,.45);border-radius:50%;box-shadow:1px 1px 2px rgba(122,15,74,.4)}
.bottom-middle button.tool-icon:hover{background:rgba(255,255,255,.7)}
.bottom-middle button.tool-icon.active{background:#fff;box-shadow:0 0 0 2px #ff1f8f,1px 1px 3px rgba(122,15,74,.5)}
.bottom-middle .color-group-label{color:#7a0f4a;opacity:1;font-weight:700}
.bottom-middle .swatch{border-color:#7a0f4a}
.bottom-middle .swatch.active{outline-color:#7a0f4a}
.bottom-middle .color-picker{border-color:#7a0f4a}
.bottom-middle .bg-wrap{border-color:#7a0f4a}
.bottom-middle .color-divider{background:#7a0f4a;opacity:.35}
.side-right{right:18px;top:50%;transform:translateY(-50%);max-height:calc(100vh - 36px);max-width:260px}
.side-right .panel-body{overflow:auto}
/* Options window: Aero window tinted orange -- scoped entirely to .side-right
   via the --aero-bg custom property. */
.side-right{--aero-bg:#d97e2e}
.side-right button.tool{border-color:#8a3a0a;box-shadow:1px 1px 2px rgba(138,58,10,.5),3px 3px 8px rgba(138,58,10,.4),inset 1px 1px 2px rgba(255,255,255,.6),inset -1px -1px 2px rgba(138,58,10,.25)}
/* Plain settings panel: no special skin -- same black/white pixel look as
   every other window (default chrome-bar, default panel-body, default
   button). Only the structural bits stay scoped to .side-right: the
   vertical fader housing/rotation and the EQ-rack layout, since those are
   this panel's own control shape, not part of the removed theme. */
.side-right output,.side-right input.size-exact{background:#fff;color:var(--ink);border:2px solid var(--ink);padding:1px 5px;font-family:var(--pixel-font);font-weight:700;font-size:9px;min-width:34px;text-align:center}
.side-right input.size-exact{-moz-appearance:textfield;cursor:text;width:34px}
.side-right input.size-exact::-webkit-outer-spin-button,.side-right input.size-exact::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.side-right input.size-exact:focus{outline:2px solid var(--ink);outline-offset:1px}
.side-right .eq-rack,.side-right .size-panel.visible,.side-right .image-settings.visible,.side-right .float-settings.visible{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:16px;padding:4px 2px}
.side-right .eq-channel{display:flex;flex-direction:column;align-items:center;gap:9px}
.side-right .eq-label{color:var(--ink);font-weight:700;letter-spacing:.5px;font:8px var(--pixel-font);text-transform:uppercase;text-align:center;max-width:58px}
.side-right .fader{position:relative;width:26px;height:112px}
.side-right input[type=range]{-webkit-appearance:none;appearance:none;position:absolute;left:50%;top:50%;width:112px;height:26px;margin:0;background:transparent;cursor:pointer;transform:translate(-50%,-50%) rotate(-90deg)}
.side-right input[type=range]::-webkit-slider-runnable-track{height:8px;background:#fff;border:2px solid var(--ink)}
.side-right input[type=range]::-moz-range-track{height:8px;background:#fff;border:2px solid var(--ink)}
.side-right input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:24px;margin-top:-10px;background:#fff;border:2px solid var(--ink);box-shadow:1px 1px 2px rgba(0,0,0,.75),3px 3px 8px rgba(0,0,0,.65),inset 1px 1px 2px rgba(255,255,255,.55),inset -1px -1px 2px rgba(0,0,0,.35)}
.side-right input[type=range]::-moz-range-thumb{width:14px;height:24px;background:#fff;border:2px solid var(--ink);box-shadow:1px 1px 2px rgba(0,0,0,.75),3px 3px 8px rgba(0,0,0,.65),inset 1px 1px 2px rgba(255,255,255,.55),inset -1px -1px 2px rgba(0,0,0,.35)}
.side-right output,.side-right input.size-exact,.side-right input[type=range]::-webkit-slider-runnable-track,.side-right input[type=range]::-webkit-slider-thumb{border-color:#8a3a0a}
.side-right input[type=range]::-moz-range-track,.side-right input[type=range]::-moz-range-thumb{border-color:#8a3a0a}
/* Brush size control: laid out horizontally instead of the vertical
   rotated fader used by the other channels. Scoped to #sizePanel only. */
#sizePanel .eq-channel{flex-direction:row;align-items:center;gap:10px}
#sizePanel .fader{width:170px;height:26px}
#sizePanel input[type=range]{position:relative;left:0;top:0;width:100%;height:26px;margin:0;transform:none}
.size-panel{display:none}
.size-panel.visible{display:flex}
.animate-corner{right:18px;bottom:78px}
.top-right{right:18px;top:18px;max-width:200px}
.sticker-panel-body{flex-direction:column;align-items:stretch;gap:10px}
.sticker-panel-body .sticker-row{display:flex;flex-direction:column;gap:4px}
.sticker-panel-body .sticker-row-head{display:flex;justify-content:space-between;align-items:center;font:9px var(--pixel-font);text-transform:uppercase;letter-spacing:.5px}
.sticker-panel-body .sticker-row-head output{font:9px var(--pixel-font);border:2px solid var(--ink);padding:1px 5px;background:#fff}
.sticker-panel-body input[type=range]{width:100%}
button{border:2px solid var(--ink);background:white;padding:10px 13px;font-weight:700;font-size:17px;text-transform:uppercase;cursor:pointer;box-shadow:2px 2px 3px rgba(0,0,0,.8),4px 5px 11px rgba(0,0,0,.7),inset 2px 2px 3px rgba(255,255,255,.85),inset -2px -2px 3px rgba(0,0,0,.3);font-family:'AstheticPixel',var(--pixel-font)}
button.tool-icon{width:46px;height:46px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;box-shadow:none}
button.tool-icon:hover{background:none;border:none;box-shadow:none;transform:none}
button.tool-icon svg{width:34px;height:34px;display:block;image-rendering:pixelated;filter:drop-shadow(2px 3px 3px rgba(0,0,0,.75));transition:transform .12s ease,filter .12s ease}
button.tool-icon img{max-width:40px;max-height:40px;width:auto;height:auto;display:block;image-rendering:pixelated;object-fit:contain;filter:drop-shadow(2px 3px 3px rgba(0,0,0,.75));transition:transform .12s ease,filter .12s ease}
button.tool-icon:hover svg,button.tool-icon:hover img{transform:scale(1.14) rotate(-2deg)}
button.tool-icon.active{background:none;border:none;box-shadow:none;transform:none}
button.tool-icon.active svg,button.tool-icon.active img{transform:scale(1.16);filter:drop-shadow(0 0 3px var(--pink)) drop-shadow(0 0 7px var(--pink)) drop-shadow(2px 3px 3px rgba(0,0,0,.7))}
#animateButton.active{background:var(--cyan);color:var(--ink)}
/* Experimental global motion: deliberately stepped, unpredictable movement. */
#canvas.experimental-motion .particle:not(.floater),#canvas.experimental-motion .brush-mark{
  animation:experimentalDrift .62s steps(2,end) infinite alternate;
  transform-origin:center;
}
#canvas.experimental-motion .particle:nth-child(7n){animation-name:experimentalBurst;animation-duration:1.8s}
#canvas.experimental-motion .particle:nth-child(11n){animation-name:experimentalFlip;animation-duration:1.1s}
#canvas.experimental-motion .brush-mark:nth-child(9n){animation-name:experimentalBurst;animation-duration:1.35s}
#canvas.experimental-motion .image-item{animation-name:photoWobble,photoSnap;animation-duration:2.35s,1.7s;animation-timing-function:steps(7,end),steps(5,end);animation-iteration-count:infinite;animation-direction:alternate}

#canvas.experimental-motion .image-item{
  animation:photoWobble 2.35s steps(7,end) infinite alternate;
  transform-origin:center;
}
#canvas.experimental-motion .organism{
  animation:organismChaos 1.9s steps(8,end) infinite alternate;
  transform-origin:center;
}
#canvas.experimental-motion .particle:nth-child(5n){filter:hue-rotate(18deg)}
#canvas.experimental-motion .particle:nth-child(3n),#canvas.experimental-motion .brush-mark:nth-child(3n){animation-duration:1.55s;animation-delay:-.32s}
#canvas.experimental-motion .particle:nth-child(4n),#canvas.experimental-motion .brush-mark:nth-child(4n){animation-duration:.9s;animation-delay:-.18s}
@keyframes experimentalDrift{
  0%{transform:translate(0,0) rotate(-8deg) scale(1)}
  20%{transform:translate(-18px,11px) rotate(17deg) scale(.78)}
  43%{transform:translate(24px,-16px) rotate(-23deg) scale(1.22)}
  66%{transform:translate(-9px,25px) rotate(11deg) scale(.69)}
  82%{transform:translate(31px,4px) rotate(-18deg) scale(1.16)}
  100%{transform:translate(-22px,-21px) rotate(28deg) scale(.88)}
}
@keyframes experimentalBurst{
  0%{transform:translate(0,0) rotate(0) scale(1)}
  35%{transform:translate(-42px,27px) rotate(95deg) scale(.55)}
  70%{transform:translate(38px,-34px) rotate(-130deg) scale(1.35)}
  100%{transform:translate(-12px,45px) rotate(210deg) scale(.72)}
}
@keyframes experimentalFlip{
  0%{transform:translate(0,0) rotate(0) scaleX(1)}
  25%{transform:translate(21px,-30px) rotate(180deg) scaleX(-.35)}
  50%{transform:translate(-35px,18px) rotate(360deg) scaleX(1.4)}
  75%{transform:translate(28px,38px) rotate(540deg) scaleX(-.55)}
  100%{transform:translate(-18px,-26px) rotate(720deg) scaleX(1)}
}
@keyframes photoWobble{
  0%{transform:translate(-50%,-50%) rotate(-9deg) skew(0deg,0deg) scale(1)}
  28%{transform:translate(calc(-50% + 22px),calc(-50% - 17px)) rotate(13deg) skew(7deg,-4deg) scale(1.08)}
  56%{transform:translate(calc(-50% - 28px),calc(-50% + 24px)) rotate(-16deg) skew(-8deg,7deg) scale(.91)}
  100%{transform:translate(calc(-50% + 35px),calc(-50% + 12px)) rotate(19deg) skew(5deg,-6deg) scale(1.12)}
}
@keyframes photoSnap{0%{filter:none}45%{filter:hue-rotate(90deg) contrast(1.8)}100%{filter:invert(.18) saturate(2.2) contrast(1.4)}}
@keyframes organismChaos{
  0%{transform:translate(-50%,-50%) rotate(-3deg) scale(1)}
  35%{transform:translate(calc(-50% + 6px),calc(-50% - 4px)) rotate(5deg) scale(1.04)}
  68%{transform:translate(calc(-50% - 5px),calc(-50% + 5px)) rotate(-6deg) scale(.96)}
  100%{transform:translate(calc(-50% + 3px),calc(-50% + 2px)) rotate(4deg) scale(1.02)}
}
button:hover{transform:translate(2px,2px);box-shadow:1px 1px 3px rgba(0,0,0,.8),inset -2px -2px 3px rgba(255,255,255,.6),inset 2px 2px 3px rgba(0,0,0,.35)}
.tool.active{background:var(--pink);color:var(--ink);transform:translate(2px,2px);box-shadow:1px 1px 3px rgba(0,0,0,.85),inset -2px -2px 3px rgba(255,255,255,.5),inset 2px 2px 3px rgba(0,0,0,.4)}
#clear{background:var(--yellow)}
.swatches{display:flex;gap:10px;align-items:stretch;padding-left:3px}
.color-group{display:flex;flex-direction:column;align-items:center;gap:6px}
.color-group-label{font:8px var(--pixel-font);text-transform:uppercase;letter-spacing:.5px;opacity:.7;white-space:nowrap}
.color-group-row{display:flex;gap:5px;align-items:center}
.color-divider{width:2px;align-self:stretch;background:var(--ink);opacity:.2;margin:0 2px}
.swatch{width:25px;height:25px;border:2px solid var(--ink);cursor:pointer;box-shadow:1px 1px 2px rgba(0,0,0,.75),3px 3px 8px rgba(0,0,0,.65),inset 1px 1px 2px rgba(255,255,255,.55),inset -1px -1px 2px rgba(0,0,0,.35)}.swatch.active{outline:2px solid var(--ink);outline-offset:2px}
.color-picker{width:30px;height:30px;padding:0;border:2px solid var(--ink);background:white;cursor:pointer;box-shadow:1px 1px 2px rgba(0,0,0,.75),3px 3px 8px rgba(0,0,0,.65),inset 1px 1px 2px rgba(255,255,255,.55),inset -1px -1px 2px rgba(0,0,0,.35)}.color-picker::-webkit-color-swatch-wrapper{padding:2px}.color-picker::-webkit-color-swatch{border:0}
.picker-wrap{position:relative;display:inline-flex}
.custom-wrap::after{content:'+';position:absolute;top:-6px;right:-6px;width:14px;height:14px;background:var(--pink);color:#fff;font-size:10px;font-weight:700;line-height:14px;text-align:center;border:2px solid var(--ink);border-radius:50%;pointer-events:none;font-family:var(--pixel-font);z-index:2}
.bg-wrap{padding:3px;border:2px solid var(--ink);background:repeating-conic-gradient(#d8d8d8 0% 25%,#fff 0% 50%) 0 0/10px 10px;box-shadow:1px 1px 2px rgba(0,0,0,.75),3px 3px 8px rgba(0,0,0,.65)}
.bg-wrap .color-picker{border:none;box-shadow:none;width:24px;height:24px}
.float-settings{display:none}.float-settings.visible{display:flex}
@media(max-width:650px){.side-right{right:8px;max-width:200px}}

/* ---- Sticker window: Aero glass ---- */
/* Sticker window: Aero window tinted green -- scoped entirely to .top-right
   via the --aero-bg custom property. */
.top-right{--aero-bg:#5aab5e}
.top-right #addStickerButton{background:#eafcea;border-color:#2f6b3a;color:#1f4d28;box-shadow:1px 1px 2px rgba(47,107,58,.5),3px 3px 8px rgba(47,107,58,.4),inset 1px 1px 2px rgba(255,255,255,.6),inset -1px -1px 2px rgba(47,107,58,.25)}
.top-right .sticker-row-head{color:#1f4d28;font:8px var(--pixel-font);text-transform:uppercase;letter-spacing:.5px}
.top-right .sticker-row-head output{font:9px var(--pixel-font);border:2px solid #2f6b3a;padding:1px 5px;background:#fff;color:var(--ink)}
.top-right input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;margin:8px 0;background:transparent;cursor:pointer}
.top-right input[type=range]::-webkit-slider-runnable-track{height:8px;background:#fff;border:2px solid #2f6b3a}
.top-right input[type=range]::-moz-range-track{height:8px;background:#fff;border:2px solid #2f6b3a}
.top-right input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:24px;margin-top:-10px;background:#fff;border:2px solid #2f6b3a;box-shadow:1px 1px 2px rgba(47,107,58,.5),3px 3px 8px rgba(47,107,58,.4),inset 1px 1px 2px rgba(255,255,255,.6),inset -1px -1px 2px rgba(47,107,58,.25)}
.top-right input[type=range]::-moz-range-thumb{width:14px;height:24px;background:#fff;border:2px solid #2f6b3a;box-shadow:1px 1px 2px rgba(47,107,58,.5),3px 3px 8px rgba(47,107,58,.4),inset 1px 1px 2px rgba(255,255,255,.6),inset -1px -1px 2px rgba(47,107,58,.25)}

.deco-window{left:18px;bottom:132px;max-width:260px;--aero-bg:#caa23a}
.deco-window .panel-body{justify-content:center;padding:14px}
.deco-window .panel-body img{display:block;max-width:220px;max-height:260px;width:auto;height:auto;pointer-events:none;user-select:none}
@media(max-width:650px){.deco-window{max-width:200px}.deco-window .panel-body img{max-width:170px}}