:root{--bg-deep:#05070b;--panel-bg:#0d111ab8;--panel-border:#ffffff14;--panel-shadow:0 20px 50px #000000bf, 0 0 1px #ffffff26;--accent:#38bdf8;--accent-glow:#38bdf84d;--text-muted:#ffffff73}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}html,body{touch-action:none;-webkit-text-size-adjust:100%;background-color:var(--bg-deep);width:100%;height:100dvh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;transition:background-color .4s;overflow:hidden}#app{width:100%;max-width:100vw;height:100dvh;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);background-color:#0000;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}#tray-wrapper{background-color:#07090e;border:1px solid #ffffff0f;border-radius:12px;justify-content:center;align-items:center;transition:width .38s cubic-bezier(.16,1,.3,1),height .38s cubic-bezier(.16,1,.3,1),border-radius .3s;display:flex;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%);box-shadow:0 25px 80px #000000d9,0 0 1px #ffffff1f}#tray-wrapper.tray-format-ordenador{aspect-ratio:16/9;width:min(94vw,152.889vh);height:min(86vh,52.875vw)}#tray-wrapper.tray-format-movil{aspect-ratio:9/16;width:min(86vw,48.375vh);height:min(86vh,152.889vw)}#tray-wrapper.tray-format-panoramica{aspect-ratio:21/9;width:min(96vw,182vh);height:min(78vh,41.1429vw)}#tray-wrapper.tray-format-cuadrada{aspect-ratio:1;width:min(84vw,84vh);height:min(84vw,84vh)}#fluid-canvas{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block}.floating-dock{z-index:10;background:var(--panel-bg);-webkit-backdrop-filter:blur(24px)saturate(180%);border:1px solid var(--panel-border);box-shadow:var(--panel-shadow);border-radius:40px;align-items:center;padding:6px 14px;display:flex;position:absolute}.top-dock{gap:8px;top:20px;left:50%;transform:translate(-50%)}.bottom-dock{gap:8px;padding:8px 16px;bottom:24px;left:50%;transform:translate(-50%)}.dock-handle{appearance:none;cursor:pointer;z-index:6;pointer-events:none;background:0 0;border:none;flex-shrink:0;width:100%;height:18px;margin:0;padding:0;display:none;position:absolute;left:0;transform:none}.icon-btn{width:38px;height:38px;color:var(--text-muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:50%;outline:none;justify-content:center;align-items:center;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex}.icon-btn svg{stroke:currentColor;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round;fill:none;width:20px;height:20px;transition:transform .2s,stroke .2s}.icon-btn:hover{color:#fff;background:#ffffff14;border-color:#ffffff1f;transform:translateY(-1px)}.icon-btn:active{transform:scale(.94)}.icon-btn.active{color:#38bdf8;box-shadow:0 0 16px var(--accent-glow);background:#38bdf824;border-color:#38bdf859}.icon-btn.muted svg{color:#ffffff40}.dock-separator{background:#ffffff1f;width:1px;height:20px;margin:0 2px}.slider-container{align-items:center;gap:8px;padding:0 4px;display:flex}.slider-container svg{width:14px;height:14px;fill:var(--text-muted)}.size-slider{appearance:none;cursor:pointer;background:#fff3;border-radius:2px;outline:none;width:80px;height:3px;transition:background .2s}.size-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:13px;height:13px;transition:transform .15s,background .15s;box-shadow:0 1px 4px #00000080}.size-slider::-webkit-slider-thumb:hover{background:#38bdf8;transform:scale(1.25)}.color-dot{cursor:pointer;-webkit-user-select:none;user-select:none;background-clip:padding-box;border:2px solid #0000;border-radius:50%;outline:none;width:28px;height:28px;transition:transform .2s cubic-bezier(.16,1,.3,1),border-color .2s,box-shadow .2s,opacity .2s,filter .2s;position:relative;box-shadow:inset 0 1px 2px #ffffff40,0 2px 6px #0006}.color-dot:hover{transform:scale(1.22)translateY(-2px)}.color-dot.active{transform:scale(1.2);border:2.5px solid #fff!important;box-shadow:0 0 0 2px #ffffff40,0 0 16px #fff9!important}.color-dot.disabled{opacity:.42;filter:grayscale(.55)}.color-dot.disabled:after{content:"";pointer-events:none;background:#ef4444;border-radius:2px;width:140%;height:2px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(45deg);box-shadow:0 0 4px #000c,0 0 6px #ef444499}.harmony-wrapper{align-items:center;margin-left:6px;display:flex;position:relative}.palette-harmony-btn{width:28px;height:28px;color:var(--text-muted);cursor:pointer;box-shadow:none;background:0 0;border:none;outline:none;justify-content:center;align-items:center;padding:0;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex;position:relative}.palette-harmony-btn:hover{color:#fff;transform:scale(1.18)}.palette-harmony-btn:active{transform:scale(.92)}.palette-harmony-btn svg{stroke:currentColor;stroke-width:1.6px;width:23px;height:23px}.palette-harmony-btn.has-dropdown:after{content:"";pointer-events:none;border-bottom:4px solid #ffffff80;border-left:3.5px solid #0000;border-right:3.5px solid #0000;width:0;height:0;transition:border-color .2s,transform .2s cubic-bezier(.16,1,.3,1);position:absolute;top:-1px;left:50%;transform:translate(-50%)}.palette-harmony-btn.has-dropdown:hover:after{border-bottom-color:#fff}.harmony-wrapper.open .palette-harmony-btn.has-dropdown:after,.palette-harmony-btn.armed.has-dropdown:after{border-bottom-color:#38bdf8;transform:translate(-50%)translateY(-1px)}.harmony-wrapper.open .palette-harmony-btn,.palette-harmony-btn.armed{color:#38bdf8}.palette-harmony-btn.armed{filter:drop-shadow(0 0 6px #38bdf873)}.harmony-dropdown{z-index:220;background:0 0;flex-direction:column;align-items:center;gap:8px;padding:0;animation:.2s cubic-bezier(.16,1,.3,1) dropdown-appear;display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%)}.harmony-wrapper.open .harmony-dropdown{display:flex}.harmony-variant{color:#ffffffb3;cursor:pointer;background:#0e121af2;border:1px solid #ffffff1f;border-radius:50%;outline:none;justify-content:center;align-items:center;width:38px;height:38px;padding:0;transition:color .2s,border-color .2s,background .2s,transform .2s;display:flex;box-shadow:0 8px 24px #00000073}.harmony-variant svg{width:22px;height:22px}.harmony-variant:hover{color:#fff;background:#111a2e;border-color:#38bdf88c;transform:scale(1.08);box-shadow:0 0 14px #38bdf840}.harmony-variant:active{transform:scale(.94)}.harmony-variant.active{color:#38bdf8;background:#111a2e;border-color:#38bdf88c;box-shadow:0 0 14px #38bdf84d}@media (width<=600px){.size-slider{width:52px}}@media (width<=768px){.dock-handle{display:block}.top-dock .dock-handle{bottom:0}.bottom-dock .dock-handle{top:0}.top-dock{top:max(6px, env(safe-area-inset-top,0px));--dock-slide:0%;width:max-content;max-width:calc(100% - 12px);transform:translate(-50%, var(--dock-slide));will-change:transform;border-radius:24px;flex-wrap:wrap;justify-content:center;gap:4px;padding:6px 10px;transition:transform .42s cubic-bezier(.16,1,.3,1),box-shadow .3s,opacity .3s;left:50%}.bottom-dock{bottom:max(6px, env(safe-area-inset-bottom,0px));--dock-slide:0%;max-width:calc(100% - 12px);transform:translate(-50%, var(--dock-slide));will-change:transform;border-radius:24px;flex-wrap:wrap;justify-content:center;gap:8px;padding:8px 12px;transition:transform .42s cubic-bezier(.16,1,.3,1),box-shadow .3s,opacity .3s}.top-dock.dock-collapsed{--dock-slide:calc(-100% + 14px);box-shadow:0 8px 28px #00000073}.bottom-dock.dock-collapsed{--dock-slide:calc(100% - 12px);box-shadow:0 -8px 28px #00000073}.top-dock.dock-collapsed .dock-handle,.bottom-dock.dock-collapsed .dock-handle{height:28px;box-shadow:none;background:0 0;pointer-events:auto!important}.bottom-dock.dock-collapsed .dock-handle{height:28px;top:-14px}.top-dock.dock-collapsed :not(.dock-handle),.bottom-dock.dock-collapsed :not(.dock-handle){pointer-events:none!important}.icon-btn{flex-shrink:0;width:38px;height:38px}.icon-btn svg{width:20px;height:20px}.dock-separator{height:18px;margin:0 1px}.slider-container{gap:5px;padding:0 2px}.slider-container svg{width:12px;height:12px}.size-slider{width:56px}.color-dot,.palette-harmony-btn{width:28px;height:28px}.palette-harmony-btn svg{width:22px;height:22px}.harmony-variant{width:36px;height:36px}#tray-wrapper{z-index:1;border-radius:8px}.floating-dock{z-index:20}#tray-wrapper.tray-format-ordenador{width:min(98vw,177.778dvh - 78.2222px);height:min(100dvh - 44px,55.125vw)}#tray-wrapper.tray-format-movil{width:min(98vw,56.25dvh - 24.75px);height:min(100dvh - 44px,174.222vw)}#tray-wrapper.tray-format-panoramica{width:min(98vw,233.333dvh - 102.667px);height:min(100dvh - 44px,42vw)}#tray-wrapper.tray-format-cuadrada{width:min(96vw,100dvh - 44px);height:min(96vw,100dvh - 44px)}.random-variant,.comb-variant{width:36px;height:36px}.color-picker-popover{max-width:calc(100vw - 24px)}}@media (width<=768px) and (orientation:portrait){#tray-wrapper.tray-format-movil{width:min(98vw,56.25dvh - 24.75px);height:min(100dvh - 44px,174.222vw)}}@media (width<=900px) and (orientation:landscape) and (height<=500px){.top-dock{gap:3px;max-width:calc(100% - 8px);padding:4px 8px;top:4px}.bottom-dock{padding:4px 8px;bottom:4px}.icon-btn{width:34px;height:34px}.icon-btn svg{width:18px;height:18px}#tray-wrapper.tray-format-ordenador,#tray-wrapper.tray-format-panoramica,#tray-wrapper.tray-format-movil,#tray-wrapper.tray-format-cuadrada{width:min(96vw,177.778dvh - 71.1111px);height:min(100dvh - 40px,54vw)}#tray-wrapper.tray-format-cuadrada{width:min(72vw,100dvh - 40px);height:min(72vw,100dvh - 40px)}#tray-wrapper.tray-format-movil{width:min(44vw,56.25dvh - 22.5px);height:min(100dvh - 40px,78.2222vw)}}#overlay-canvas{pointer-events:none;z-index:5;width:100%;height:100%;position:absolute;top:0;left:0}.random-wrapper{align-items:center;display:flex;position:relative}.icon-btn.has-dropdown{position:relative}.icon-btn.has-dropdown:after{content:"";pointer-events:none;border-top:4px solid #ffffff80;border-left:3.5px solid #0000;border-right:3.5px solid #0000;width:0;height:0;transition:all .2s cubic-bezier(.16,1,.3,1);position:absolute;bottom:2px;left:50%;transform:translate(-50%)}.icon-btn.has-dropdown:hover:after,.icon-btn.has-dropdown.active:after{border-top-color:#fff}.random-wrapper.open .icon-btn.has-dropdown:after,.icon-btn.has-dropdown.open:after{border-top-color:#38bdf8;transform:translate(-50%)translateY(1px)}.random-dropdown{-webkit-backdrop-filter:none;z-index:200;box-shadow:none;background:0 0;border:none;border-radius:0;flex-direction:column;align-items:center;gap:8px;padding:0;animation:.2s cubic-bezier(.16,1,.3,1) dropdown-appear;display:flex;position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%)}@keyframes dropdown-appear{0%{opacity:0;transform:translate(-50%)translateY(-8px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.random-variant{-webkit-backdrop-filter:blur(20px);color:#ffffffbf;cursor:pointer;background:#0e121af2;border:1px solid #ffffff29;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;padding:7px;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex;box-shadow:0 4px 16px #000000a6,0 0 1px #ffffff26}.random-variant:hover{color:#38bdf8;background:#111a2e;border-color:#38bdf8;transform:scale(1.1);box-shadow:0 4px 20px #000000b3,0 0 16px #38bdf873}.random-variant svg{width:100%;height:100%}@keyframes btn-generating-pulse{0%,to{opacity:1;box-shadow:0 0 12px #38bdf859}50%{opacity:.75;box-shadow:0 0 18px #38bdf88c}}#btn-random.generating{color:#38bdf8;border-color:#38bdf873;animation:1.6s ease-in-out infinite btn-generating-pulse}#btn-random.generating.has-dropdown:after{border-top-color:#38bdf8}#btn-random.paused{color:#38bdf8;border-color:#38bdf873;box-shadow:0 0 10px #38bdf833}#btn-random.paused.has-dropdown:after{border-top-color:#38bdf8}.random-stop-dropdown{-webkit-backdrop-filter:none;z-index:250;box-shadow:none;pointer-events:auto;background:0 0;border:none;border-radius:0;justify-content:center;padding:0;animation:.15s cubic-bezier(.16,1,.3,1) dropdown-appear;display:flex;position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%)}.random-stop-btn{-webkit-backdrop-filter:blur(20px);color:#fca5a5;cursor:pointer;background:#0e121af2;border:1px solid #ef44448c;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;padding:0;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex;box-shadow:0 4px 16px #000000a6,0 0 1px #ef44444d}.random-stop-btn:hover,.random-stop-btn.active-hover{color:#fff;background:#2a1215;border-color:#ef4444;transform:scale(1.1);box-shadow:0 4px 20px #000000b3,0 0 18px #ef4444a6}.random-stop-btn svg{width:16px;height:16px}.clear-wrapper{align-items:center;display:flex;position:relative}.clear-wrapper.open .icon-btn.has-dropdown:after{border-top-color:#38bdf8;transform:translate(-50%)translateY(1px)}.clear-reset-dropdown{-webkit-backdrop-filter:none;z-index:250;box-shadow:none;pointer-events:auto;background:0 0;border:none;border-radius:0;justify-content:center;padding:0;animation:.15s cubic-bezier(.16,1,.3,1) dropdown-appear;display:flex;position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%)}.clear-reset-btn{-webkit-backdrop-filter:blur(20px);color:#fca5a5;cursor:pointer;background:#0e121af2;border:1px solid #ef44448c;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;padding:0;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex;box-shadow:0 4px 16px #000000a6,0 0 1px #ef44444d}.clear-reset-btn:hover,.clear-reset-btn.active-hover{color:#fff;background:#2a1215;border-color:#ef4444;transform:scale(1.1);box-shadow:0 4px 20px #000000b3,0 0 18px #ef4444a6}.clear-reset-btn svg{fill:none;stroke:currentColor;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round;width:16px;height:16px}.variant-item-wrapper{flex-direction:column;align-items:center;display:flex;position:relative}.color-picker-popover{-webkit-backdrop-filter:blur(24px)saturate(180%);z-index:50;-webkit-user-select:none;user-select:none;background:#0e121af0;border:1px solid #ffffff1f;border-radius:16px;flex-direction:column;gap:10px;width:316px;padding:10px;animation:.2s cubic-bezier(.16,1,.3,1) picker-appear;display:flex;position:absolute;bottom:calc(100% + 14px);left:50%;transform:translate(-50%);box-shadow:0 16px 40px #000c,0 0 1px #fff3}@keyframes picker-appear{0%{opacity:0;transform:translate(-50%)translateY(8px)scale(.96)}to{opacity:1;transform:translate(-50%)translateY(0)scale(1)}}@keyframes picker-appear-top{0%{opacity:0;transform:translate(-50%)translateY(-8px)scale(.96)}to{opacity:1;transform:translate(-50%)translateY(0)scale(1)}}.color-picker-popover.picker-anchor-top{animation-name:picker-appear-top;top:calc(100% + 14px);bottom:auto}.picker-sat-val-wrapper{cursor:crosshair;border-radius:10px;width:100%;height:120px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff1a}.picker-sat-val-wrapper canvas{pointer-events:none;width:100%;height:100%;display:block}.picker-hue-wrapper{cursor:pointer;border-radius:7px;width:100%;height:14px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff1a}.picker-hue-wrapper canvas{pointer-events:none;width:100%;height:100%;display:block}.picker-handle{pointer-events:none;background:0 0;border:2px solid #fff;border-radius:50%;width:14px;height:14px;position:absolute;top:0;left:0;transform:translate(-50%,-50%);box-shadow:0 0 3px #000c,inset 0 0 2px #0009}.picker-handle.hue-handle{background:#ffffffe6;border:2px solid #111827;width:16px;height:16px;top:50%}.drop-wrapper{align-items:center;display:flex;position:relative}.drop-wrapper.open .icon-btn.has-dropdown:after{border-top-color:#38bdf8;transform:translate(-50%)translateY(1px)}.drop-dropdown{z-index:200;box-shadow:none;background:0 0;border:none;flex-direction:column;align-items:center;gap:8px;padding:0;display:none;position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%)}.drop-wrapper.open .drop-dropdown{animation:.2s cubic-bezier(.16,1,.3,1) dropdown-appear;display:flex}.drop-variant{-webkit-backdrop-filter:blur(20px);color:#ffffffbf;cursor:pointer;background:#0e121af2;border:1px solid #ffffff29;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;padding:8px;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex;box-shadow:0 4px 16px #000000a6,0 0 1px #ffffff26}.drop-variant:hover,.drop-variant.active{color:#38bdf8;background:#111a2e;border-color:#38bdf8;transform:scale(1.1);box-shadow:0 4px 20px #000000b3,0 0 16px #38bdf873}.drop-variant svg{width:100%;height:100%}.vortex-wrapper{align-items:center;display:flex;position:relative}.vortex-wrapper.open .icon-btn.has-dropdown:after{border-top-color:#38bdf8;transform:translate(-50%)translateY(1px)}.vortex-dropdown{z-index:200;box-shadow:none;background:0 0;border:none;flex-direction:column;align-items:center;gap:8px;padding:0;display:none;position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%)}.vortex-wrapper.open .vortex-dropdown{animation:.2s cubic-bezier(.16,1,.3,1) dropdown-appear;display:flex}.vortex-variant{-webkit-backdrop-filter:blur(20px);color:#ffffffbf;cursor:pointer;background:#0e121af2;border:1px solid #ffffff29;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;padding:8px;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex;box-shadow:0 4px 16px #000000a6,0 0 1px #ffffff26}.vortex-variant:hover,.vortex-variant.active{color:#38bdf8;background:#111a2e;border-color:#38bdf8;transform:scale(1.1);box-shadow:0 4px 20px #000000b3,0 0 16px #38bdf873}.vortex-variant svg{fill:none;stroke:currentColor;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%}.comb-wrapper{align-items:center;display:flex;position:relative}.comb-wrapper.open .icon-btn.has-dropdown:after{border-top-color:#38bdf8;transform:translate(-50%)translateY(1px)}.comb-dropdown{z-index:200;box-shadow:none;background:0 0;border:none;flex-direction:column;align-items:center;gap:8px;padding:0;display:none;position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%)}.comb-wrapper.open .comb-dropdown{animation:.2s cubic-bezier(.16,1,.3,1) dropdown-appear;display:flex}.comb-variant{-webkit-backdrop-filter:blur(20px);color:#ffffffbf;cursor:pointer;background:#0e121af2;border:1px solid #ffffff29;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;padding:8px;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex;box-shadow:0 4px 16px #000000a6,0 0 1px #ffffff26}.comb-variant:hover{color:#38bdf8;background:#111a2e;border-color:#38bdf8;transform:scale(1.1);box-shadow:0 4px 20px #000000b3,0 0 16px #38bdf873}.comb-variant svg{width:100%;height:100%}