.page{flex-wrap:wrap;place-content:center;width:100%;height:100vh;padding:2vmax;display:flex}.tilt-wrapper{appearance:none;perspective:1000px;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;outline:none;justify-content:center;align-items:center;padding:60px;display:flex;position:relative}.sensor{z-index:50;width:50%;height:50%;position:absolute}.tl{top:0;left:0}.tr{top:0;right:0}.bl{bottom:0;left:0}.br{bottom:0;right:0}.visual-pill{transform-style:preserve-3d;background:linear-gradient(#fff 0%,#f0f2f5 100%);border:1px solid #ffffff80;border-radius:30px;justify-content:space-between;align-items:center;padding:16px 20px 16px 32px;transition:transform .2s cubic-bezier(.2,0,.4,1),box-shadow .2s;display:flex;position:relative;box-shadow:0 20px 50px -10px #00000026,0 10px 20px -10px #0000001a,inset 0 4px #fff,inset 0 -4px 2px #0000000d}.specular-highlight{z-index:10;pointer-events:none;opacity:.6;background:linear-gradient(#ffffffe6,#fff0);border-radius:80px;height:40%;position:absolute;top:2px;left:10px;right:10px}.text-label{color:#5c6b7f;-webkit-user-select:none;user-select:none;letter-spacing:1.5px;transform-style:preserve-3d;z-index:20;text-shadow:0 2px #fff;gap:1px;font-size:32px;font-weight:700;display:flex}.char{transform-origin:50%;transition:transform .5s cubic-bezier(.34,1.56,.64,1),color .3s;transition-delay:calc((10 - var(--i))*20ms);display:inline-block}.tilt-wrapper:hover .char{color:#454545;text-shadow:0 10px 20px #2563eb4d;transition-delay:calc(var(--i)*30ms);transform:translateY(-4px)rotateX(360deg)}.char:nth-child(4){width:.4em}.chip-wrapper{z-index:20;margin-left:24px;position:relative}.chip{background:linear-gradient(125deg,#ff0080,#ff8c00,#ffeb3b,#00b347,#08f,indigo,violet) 0 0/400% 400%;border-radius:16px;justify-content:center;align-items:center;width:56px;height:56px;transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .4s;animation:5s linear infinite rainbowFlow,3s ease-in-out infinite idleMove;display:flex;position:relative;overflow:hidden;transform:translateZ(20px);box-shadow:inset 2px 2px 4px #fff6,inset -2px -2px 4px #0000001a,0 8px 15px -4px #00000026}.chip:before{content:"";background:linear-gradient(135deg,#0000,#fff6,#0000);transition:transform .6s;position:absolute;inset:0;transform:translate(-100%)}.tilt-wrapper:hover .chip:before{transform:translate(100%)}.tilt-wrapper:hover .chip{animation:3s linear infinite rainbowFlow;transform:translate(8px)translateZ(30px)scale(1.1);box-shadow:0 15px 30px -5px #0003}.arrow-icon{z-index:2;width:24px;height:24px;transition:transform .4s cubic-bezier(.34,1.56,.64,1);animation:3s ease-in-out .2s infinite idleMove}.tilt-wrapper:hover .arrow-icon{animation:none;transform:translate(4px)}.right-glow{filter:blur(45px);opacity:1;z-index:-1;pointer-events:none;background:linear-gradient(125deg,#ff0080,#ff8c00,#ffeb3b,#00b347,#08f,indigo,violet) 0 0/400% 400%;border-radius:50%;width:100px;height:100px;transition:all .6s cubic-bezier(.2,.8,.2,1);animation:2s linear infinite rainbowFlow,2s infinite alternate glowPulse;position:absolute;top:50%;right:-30px;transform:translateY(-50%)translateZ(-20px)}.tilt-wrapper:hover .right-glow{opacity:.9;filter:blur(40px);width:140px;height:140px;animation:3s linear infinite rainbowFlow,2s infinite alternate glowPulse;right:-40px}@keyframes idleMove{0%,to{transform:translate(0)}50%{transform:translate(6px)}}@keyframes rainbowFlow{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes glowPulse{0%{opacity:.9;transform:translateY(-50%)translateZ(-20px)scale(1)}to{opacity:.7;transform:translateY(-50%)translateZ(-20px)scale(1.1)}}.tilt-wrapper:has(.tl:hover) .visual-pill{transform:rotateX(10deg)rotateY(-10deg)}.tilt-wrapper:has(.tr:hover) .visual-pill{transform:rotateX(10deg)rotateY(10deg)}.tilt-wrapper:has(.bl:hover) .visual-pill{transform:rotateX(-10deg)rotateY(-10deg)}.tilt-wrapper:has(.br:hover) .visual-pill{transform:rotateX(-10deg)rotateY(10deg)}.tilt-wrapper:active .visual-pill{box-shadow:0 5px 10px -5px #0000001a,inset 0 6px 10px #0000000d;transform:scale(.96)!important}.tilt-wrapper:active .chip{transform:translate(8px)translateZ(10px)scale(.95)}
::view-transition-group(root){animation-timing-function:ease-in-out}::view-transition-new(root){-webkit-mask:url(/assets/custom-svg.svg) 0 0/0 no-repeat;mask:url(/assets/custom-svg.svg) 0 0/0 no-repeat;-webkit-mask-origin:top left;mask-origin:top left;animation:1.5s both scale}::view-transition-old(root){z-index:-1;transform-origin:0 0;animation:1.5s both scale}.dark::view-transition-old(root){z-index:-1;transform-origin:0 0;animation:1.5s both scale}@keyframes scale{to{-webkit-mask-size:200vmax;mask-size:200vmax}}:root{background:#fff}.dark{background:#000}