@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap";:root{--bg-primary:#0f172a;--bg-secondary:#1e293b;--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent:#38bdf8;--glass-bg:#1e293bb3;--glass-border:#ffffff1a;--shadow:0 8px 32px 0 #0000005e}*{box-sizing:border-box;margin:0;padding:0}body,html,#root{background-color:var(--bg-primary);width:100%;height:100%;color:var(--text-primary);background-image:radial-gradient(at 40% 20%,#7a95ff26 0,#0000 50%),radial-gradient(at 80% 0,#1fddff26 0,#0000 50%),radial-gradient(at 0%,#ffdbde1a 0,#0000 50%);font-family:Outfit,sans-serif;overflow:hidden}.app-container{width:100vw;height:100vh;display:flex;position:relative}.hero{z-index:10;text-shadow:0 4px 20px #00000080;pointer-events:none;letter-spacing:-1px;font-size:3.5rem;font-weight:600;line-height:1.1;position:absolute;top:40px;left:50px}.hero span{color:var(--accent);letter-spacing:0;font-size:2.5rem;font-weight:300}.canvas-container{width:100%;height:100%;position:absolute;top:0;left:0}.color-picker-container{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);width:320px;box-shadow:var(--shadow);z-index:10;border-radius:24px;flex-direction:column;gap:25px;max-height:80vh;padding:30px;display:flex;position:absolute;top:50%;right:50px;transform:translateY(-50%)}.panel-title{color:var(--text-primary);text-transform:uppercase;letter-spacing:2px;border-bottom:1px solid var(--glass-border);flex-shrink:0;margin-bottom:5px;padding-bottom:15px;font-size:1.2rem;font-weight:600}.picker-scroll-area{flex-direction:column;gap:24px;padding:10px;display:flex;overflow-y:auto}.picker-scroll-area::-webkit-scrollbar{width:6px}.picker-scroll-area::-webkit-scrollbar-track{background:0 0}.picker-scroll-area::-webkit-scrollbar-thumb{background-color:var(--glass-border);border-radius:10px}.slot-section{flex-direction:column;gap:12px;display:flex}.slot-label{color:var(--text-secondary);letter-spacing:.5px;font-size:.95rem;font-weight:400}.colors-grid{flex-wrap:wrap;gap:12px;display:flex}.color-btn{cursor:pointer;border-radius:50%;outline:none;width:36px;height:36px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;box-shadow:0 4px 6px -1px #0000001a}.color-btn:hover{transform:scale(1.15)translateY(-2px);box-shadow:0 10px 15px -3px #0003}.color-btn.active{box-shadow:0 0 0 3px var(--bg-primary), 0 0 0 5px var(--accent);transform:scale(1.15)}