:root{--bg-c1: hsla(210,100%,95%,1);--bg-c2: hsla(225,100%,92%,1);--bg-c3: hsla(260,100%,95%,1);--bg-c4: hsla(190,100%,95%,1);--bg-c5: hsla(220,100%,94%,1);--bg-c6: hsla(240,100%,95%,1);--bg-main: #f8fafc}body{font-family:Inter,sans-serif;margin:0;padding:0;min-height:100vh;overflow-x:hidden;background-color:var(--bg-main);background-image:radial-gradient(at 0% 0%,var(--bg-c1) 0,transparent 50%),radial-gradient(at 50% 0%,var(--bg-c2) 0,transparent 50%),radial-gradient(at 100% 0%,var(--bg-c3) 0,transparent 50%),radial-gradient(at 50% 100%,var(--bg-c4) 0,transparent 50%),radial-gradient(at 0% 100%,var(--bg-c5) 0,transparent 50%),radial-gradient(at 100% 100%,var(--bg-c6) 0,transparent 50%);background-attachment:fixed;animation:meshAnim 20s ease infinite alternate;transition:background-image .8s ease-in-out,background-color .8s ease-in-out}@keyframes meshAnim{0%{background-size:100% 100%}to{background-size:120% 120%;background-position:center}}.puzzle-piece{transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s,filter .2s}.puzzle-piece:hover{filter:brightness(1.05)}.puzzle-piece:active{transform:scale(.98);z-index:50}.glass-effect{background:#ffffffa6;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.4);box-shadow:0 8px 32px #1f268712}