:root{--primary:#ff9aa2;--secondary:#ffb7b2;--tertiary:#ffdac1;--quaternary:#e2f0cb;--quinary:#b5ead7;--senary:#c7ceea;--bg-gradient:linear-gradient(135deg,#fdfbfb,#ebedee);--text-dark:#2c3e50;--text-light:#fff;--card-bg:hsla(0,0%,100%,.85);--font-heading:"Fredoka",sans-serif;--font-body:"Nunito",sans-serif;--shadow-sm:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--shadow-md:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--shadow-lg:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04)}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-gradient);background-attachment:fixed;color:var(--text-dark);font-family:var(--font-body);min-height:100vh;min-height:100dvh;overflow:hidden;position:relative;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none}body:before{animation:floatBG 20s infinite alternate;background-image:radial-gradient(circle at 15% 50%,rgba(255,154,162,.2) 0,transparent 50%),radial-gradient(circle at 85% 30%,rgba(181,234,215,.3) 0,transparent 50%),radial-gradient(circle at 50% 80%,rgba(199,206,234,.25) 0,transparent 50%);content:"";height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:-1}@keyframes floatBG{0%{transform:scale(1)}to{transform:scale(1.1) translate(20px,20px)}}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);letter-spacing:.5px}.title-bounce{animation:bounceTitle 2s ease-in-out infinite;display:inline-block}@keyframes bounceTitle{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(2deg)}}.glass-panel{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:var(--card-bg);border:1px solid hsla(0,0%,100%,.5);border-radius:24px;box-shadow:var(--shadow-lg)}.btn-primary{background:linear-gradient(135deg,#ff9aa2,#ffb7b2);border:none;border-radius:50px;box-shadow:0 4px 14px #ff9aa263;color:#fff;cursor:pointer;font-family:var(--font-heading);font-size:1.1rem;font-weight:600;padding:12px 24px;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.btn-primary:hover{box-shadow:0 6px 20px #ff9aa273;transform:translateY(-3px) scale(1.05)}.btn-primary:active{transform:translateY(1px) scale(.98)}.btn-icon{align-items:center;background:#fff;border:none;border-radius:50%;box-shadow:var(--shadow-md);cursor:pointer;display:flex;height:48px;justify-content:center;transition:all .3s cubic-bezier(.175,.885,.32,1.275);width:48px}.btn-icon:hover{box-shadow:var(--shadow-lg);transform:scale(1.1)}svg.colorable path{cursor:pointer;transition:fill .3s ease}svg.colorable path:hover{opacity:.85;stroke:#ff9aa2;stroke-width:3}.app-container[data-v-7f126c8d]{display:flex;flex-direction:column;gap:2rem;margin:0 auto;max-width:1200px;min-height:100vh;padding:2rem}.app-header[data-v-7f126c8d]{padding:2rem;text-align:center}.app-header h1[data-v-7f126c8d]{color:#ff6b81;font-size:3rem;margin-bottom:.5rem;text-shadow:2px 2px 0 hsla(0,0%,100%,.8),4px 4px 10px rgba(255,107,129,.3)}.subtitle[data-v-7f126c8d]{color:#747d8c;font-size:1.2rem;font-weight:600}.app-main[data-v-7f126c8d]{display:grid;flex:1;gap:2rem;grid-template-columns:280px 1fr}.tools-panel[data-v-7f126c8d]{display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem}.panel-title[data-v-7f126c8d]{border-bottom:2px dashed #eccc68;color:#3742fa;font-family:Mali,cursive;font-size:1.5rem;padding-bottom:.5rem;text-align:center}.color-grid[data-v-7f126c8d]{display:grid;gap:10px;grid-template-columns:repeat(4,1fr)}.color-btn[data-v-7f126c8d]{aspect-ratio:1;border:4px solid #fff;border-radius:50%;box-shadow:var(--shadow-sm);cursor:pointer;transition:all .2s cubic-bezier(.175,.885,.32,1.275);width:100%}.color-btn[data-v-7f126c8d]:hover{box-shadow:var(--shadow-md);transform:scale(1.15)}.color-btn.active[data-v-7f126c8d]{border-color:#3742fa;box-shadow:0 0 15px #3742fa66;transform:scale(1.25);z-index:2}.actions[data-v-7f126c8d]{display:flex;justify-content:center;margin-top:auto}.action-btn[data-v-7f126c8d]{gap:.5rem;width:100%}.action-btn[data-v-7f126c8d],.canvas-container[data-v-7f126c8d]{align-items:center;display:flex;justify-content:center}.canvas-container[data-v-7f126c8d]{min-height:500px;overflow:hidden;padding:2rem;position:relative}.nav-btn[data-v-7f126c8d]{background:#fff;font-size:1.5rem;position:absolute;top:1rem;z-index:10}.nav-btn.prev[data-v-7f126c8d]{left:1rem}.nav-btn.next[data-v-7f126c8d]{right:1rem}.canvas-area[data-v-7f126c8d]{flex:1;height:70vh;margin:0 auto}.canvas-area[data-v-7f126c8d],.svg-injector[data-v-7f126c8d]{align-items:center;display:flex;justify-content:center;width:100%}.svg-injector[data-v-7f126c8d]{height:100%}[data-v-7f126c8d] svg{filter:drop-shadow(0 10px 15px rgba(0,0,0,.1));height:100%;max-height:100%;-o-object-fit:contain;object-fit:contain;touch-action:none;width:100%}[data-v-7f126c8d] svg .color-target{cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 16v-4a2 2 0 0 0-2-2h-3v-6a2 2 0 0 0-4 0v6H8a2 2 0 0 0-2 2v4M4 16h16v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-4z"></path></svg>') 12 12,crosshair;touch-action:manipulation;transition:all .2s ease-out}[data-v-7f126c8d] svg .color-target:hover{filter:brightness(.95);stroke-width:6}.app-footer[data-v-7f126c8d]{color:#747d8c;font-weight:700;padding:1rem;text-align:center}@media(max-width:768px)and (orientation:portrait){.app-container[data-v-7f126c8d]{gap:.5rem;height:100vh;height:100dvh;overflow:hidden;padding:.5rem}.app-footer[data-v-7f126c8d],.app-header[data-v-7f126c8d]{display:none}.app-main[data-v-7f126c8d]{display:flex;flex-direction:column;gap:.5rem;height:100%;min-height:0}.tools-panel[data-v-7f126c8d]{flex-shrink:0;gap:1rem;order:2;padding:1rem}.color-grid[data-v-7f126c8d]{gap:8px;grid-template-columns:repeat(7,1fr)}.canvas-container[data-v-7f126c8d]{flex:1;min-height:0;order:1;padding:3.5rem .5rem .5rem}.canvas-area[data-v-7f126c8d]{height:100%}.nav-btn[data-v-7f126c8d]{top:.5rem}}@media(max-height:500px)and (orientation:landscape),(max-width:900px)and (orientation:landscape){.app-container[data-v-7f126c8d]{gap:.5rem;height:100vh;min-height:100vh;padding:.5rem}.app-footer[data-v-7f126c8d],.app-header[data-v-7f126c8d]{display:none}.app-main[data-v-7f126c8d]{gap:1rem;grid-template-columns:200px 1fr;grid-template-rows:1fr;height:calc(100vh - 1rem)}.tools-panel[data-v-7f126c8d]{gap:.5rem;height:100%;order:1;overflow-y:auto;padding:.5rem;position:static}.color-grid[data-v-7f126c8d]{gap:6px;grid-template-columns:repeat(4,1fr)}.canvas-container[data-v-7f126c8d]{height:100%;min-height:unset;order:2;padding:3.5rem .5rem .5rem}.canvas-area[data-v-7f126c8d]{height:100%;width:100%}.nav-btn[data-v-7f126c8d]{top:.5rem}}