:root{font-family:Outfit,Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#fff;background-color:#050505}body{margin:0;padding:0;overflow:hidden;width:100vw;height:100vh;background:radial-gradient(circle at center,#1a1a1a,#050505)}#app{width:100%;height:100%}.ui-container{position:absolute;z-index:1000;display:flex;transition:all .4s cubic-bezier(.16,1,.3,1);pointer-events:none}@media(min-width:768px){.ui-container{top:0;left:0;width:300px;height:100vh;padding:2.5rem;flex-direction:column;justify-content:center;gap:2rem}}@media(max-width:767px){.ui-container{inset:0;width:100%;height:100%;padding:1rem;flex-direction:column;justify-content:space-between;gap:0}.ui-title{position:relative;top:3vh;text-align:center;width:100%;margin-bottom:0!important}.panels-wrapper{display:flex;flex-direction:column;gap:.8rem;margin-bottom:2vh;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,transparent 100%);padding:1rem;border-radius:2rem 2rem 0 0}.panel{padding:.8rem!important;border-radius:1.2rem!important;background:#ffffff0d!important}.panel h3{font-size:.65rem!important;margin-bottom:.5rem!important}.template-grid{display:flex!important;overflow-x:auto;padding-bottom:5px;gap:8px}.template-grid button{flex:0 0 auto;width:100px!important;padding:.6rem!important;font-size:.8rem!important}.panel:has(input[type=color]){display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem!important}.panel:has(input[type=color]) h3{margin:0!important}input[type=color]{width:32px!important;height:32px!important;border-radius:50%!important;padding:0!important;overflow:hidden;border:2px solid rgba(255,255,255,.2)!important}}.ui-container>*{pointer-events:auto}.ui-title{margin:0;font-size:clamp(1.5rem,8vw,2.2rem);font-weight:800;text-transform:uppercase;letter-spacing:.3rem;background:linear-gradient(to right,#0ff,#08f,#0ff);background-size:200% auto;animation:shine 3s linear infinite;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 15px rgba(0,255,255,.4))}@keyframes shine{to{background-position:200% center}}.panel{background:#ffffff08;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);padding:1.5rem;border-radius:1.8rem;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #00000080}.panel h3{margin:0 0 1rem;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:#fff6}.template-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}button{background:#ffffff0d;border:1px solid rgba(255,255,255,.05);color:#fff;padding:.9rem;border-radius:1rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);width:100%}button:hover{background:#ffffff1f;border-color:#00ffff80;transform:translateY(-3px);box-shadow:0 5px 15px #0ff3}button:active{transform:scale(.92)}input[type=color]{width:100%;height:45px;border:none;background:#ffffff0d;border-radius:1rem;padding:8px;cursor:pointer;transition:all .3s ease}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:.8rem}.template-grid::-webkit-scrollbar{display:none}.template-grid{-ms-overflow-style:none;scrollbar-width:none}