.page{flex-wrap:wrap;place-content:center;width:100%;height:100vh;padding:2vmax;display:flex}.btn-wrapper{background-color:#000;border-radius:16px;justify-content:center;align-items:flex-start;padding:6px;transition:box-shadow .2s ease-in-out;display:flex;position:relative;box-shadow:0 1.5px #ffffff2b,inset 0 0 2px #00000014}.btn-wrapper:after{content:"";width:50%;height:0;position:absolute;transform:rotate(15deg);box-shadow:-20px 0 100px 10px #fff9}.btn{cursor:pointer;background:radial-gradient(circle at 50% -100%,#7f8f9b99 0%,#0001 75%),conic-gradient(#ffffff14 .25turn,#ffffff20 .25turn .5turn,#ffffff14 .5turn .75turn,#ffffff20 .75turn) 0 0/4px 4px,#010405;border:none;border-radius:10px;justify-content:center;align-items:center;width:230px;height:60px;transition:box-shadow .15s ease-in-out;display:flex;box-shadow:inset .5px .5px #ffffff7d,inset 0 0 1px 2px #0009,inset 0 0 6px #ffffff96,inset 0 -2px #1a1a1a,0 3px 2px #0000001f,0 7px 5px #00000021,4px 13px 10px #00000024,10px 22px 18px #00000024,20px 42px 33px #00000026,60px 50px 80px #00000026,0 3px 3px #0000001a}.btn-icon{transform-origin:50%;background-color:#8c8c8c;border-radius:5px;grid-template-rows:repeat(7,auto);grid-template-columns:repeat(7,auto);gap:3px;margin:5px;padding:5px;transition:aspect-ratio .15s ease-in-out,background-color .2s ease-in-out,box-shadow .2s ease-in-out,transform .15s ease-in-out;display:grid;box-shadow:inset 0 1px #fff5}.pixel{background-color:#fff2;border-radius:1px;width:3px;height:3px;transition:background-color .15s ease-in-out,box-shadow .15s ease-in-out}.pixel:nth-child(9),.pixel:nth-child(10),.pixel:nth-child(11),.pixel:nth-child(17),.pixel:nth-child(18),.pixel:nth-child(19),.pixel:nth-child(25),.pixel:nth-child(26),.pixel:nth-child(27),.pixel:nth-child(31),.pixel:nth-child(32),.pixel:nth-child(33),.pixel:nth-child(37),.pixel:nth-child(38),.pixel:nth-child(39){background-color:#fff8;animation:1.2s ease-in-out infinite pulse}.pixel:nth-child(9){animation-delay:0s}.pixel:nth-child(10){animation-delay:.1s}.pixel:nth-child(11){animation-delay:.2s}.pixel:nth-child(17){animation-delay:.1s}.pixel:nth-child(18){animation-delay:.2s}.pixel:nth-child(19){animation-delay:.3s}.pixel:nth-child(25){animation-delay:.2s}.pixel:nth-child(26){animation-delay:.3s}.pixel:nth-child(27){animation-delay:.4s}.pixel:nth-child(31){animation-delay:.1s}.pixel:nth-child(32){animation-delay:.2s}.pixel:nth-child(33){animation-delay:.3s}.pixel:nth-child(37){animation-delay:0s}.pixel:nth-child(38){animation-delay:.1s}.pixel:nth-child(39){animation-delay:.2s}@keyframes pulse{0%,to{background-color:#fff;box-shadow:0 0 3px 1px #fff}50%{background-color:#fff;box-shadow:0 0 1px 1px #0001}}.btn-text{color:#fff;-webkit-user-select:none;user-select:none;justify-content:center;align-items:flex-start;gap:1px;width:80%;font-family:Montserrat,Figtree,sans-serif;font-size:16px;font-weight:400;line-height:16px;transition:text-shadow .15s ease-in-out,color .15s ease-in-out,gap .15s ease-in-out,font-weight .15s ease-in-out;display:flex}.btn-letter{animation:2s ease-in-out infinite letter-anim;display:inline-block}@keyframes letter-anim{50%{color:#fff6}}.btn-letter:first-child{animation-delay:0s}.btn-letter:nth-child(2){animation-delay:.1s}.btn-letter:nth-child(3){animation-delay:.2s}.btn-letter:nth-child(4){animation-delay:.3s}.btn-letter:nth-child(5){animation-delay:.4s}.btn-letter:nth-child(6){animation-delay:.5s}.btn-letter:nth-child(7){animation-delay:.6s}.btn-letter:nth-child(8){animation-delay:.7s}.btn-letter:nth-child(9){animation-delay:.8s}#corner-1{transition:transform .15s ease-in-out;position:absolute;top:0;left:0;transform:translate(-24px,-24px)rotate(-90deg)}#corner-2{transition:transform .15s ease-in-out;position:absolute;top:0;right:0;transform:translate(24px,-24px)rotate(0)}#corner-3{transition:transform .15s ease-in-out;position:absolute;bottom:0;right:0;transform:translate(24px,24px)rotate(90deg)}#corner-4{transition:transform .15s ease-in-out;position:absolute;bottom:0;left:0;transform:translate(-24px,24px)rotate(180deg)}.line{fill:#444}.btn-wrapper:has(.btn:hover){box-shadow:0 1.5px #ffffff2b,inset 0 0 2px #00000014,inset 0 0 4px 3px #f5ffd3d9,0 0 16px 8px #ffffff1a}.btn-wrapper:has(.btn:hover) #corner-1{transform:translate(-16px,-16px)rotate(-90deg)}.btn-wrapper:has(.btn:hover) #corner-2{transform:translate(16px,-16px)rotate(0)}.btn-wrapper:has(.btn:hover) #corner-3{transform:translate(16px,16px)rotate(90deg)}.btn-wrapper:has(.btn:hover) #corner-4{transform:translate(-16px,16px)rotate(180deg)}.btn-wrapper:has(.btn:hover) .pixel{background-color:#fff2;animation:none}.btn-wrapper:has(.btn:hover) .pixel:nth-child(4),.btn-wrapper:has(.btn:hover) .pixel:nth-child(10),.btn-wrapper:has(.btn:hover) .pixel:nth-child(11),.btn-wrapper:has(.btn:hover) .pixel:nth-child(12),.btn-wrapper:has(.btn:hover) .pixel:nth-child(16),.btn-wrapper:has(.btn:hover) .pixel:nth-child(18),.btn-wrapper:has(.btn:hover) .pixel:nth-child(24),.btn-wrapper:has(.btn:hover) .pixel:nth-child(25),.btn-wrapper:has(.btn:hover) .pixel:nth-child(26),.btn-wrapper:has(.btn:hover) .pixel:nth-child(32),.btn-wrapper:has(.btn:hover) .pixel:nth-child(34),.btn-wrapper:has(.btn:hover) .pixel:nth-child(37),.btn-wrapper:has(.btn:hover) .pixel:nth-child(38),.btn-wrapper:has(.btn:hover) .pixel:nth-child(39),.btn-wrapper:has(.btn:hover) .pixel:nth-child(40),.btn-wrapper:has(.btn:hover) .pixel:nth-child(46){animation:.25s ease-in-out forwards pixel-form}.btn-wrapper:has(.btn:hover) .pixel:nth-child(4){animation-delay:50ms}.btn-wrapper:has(.btn:hover) .pixel:nth-child(10){animation-delay:.1s}.btn-wrapper:has(.btn:hover) .pixel:nth-child(11){animation-delay:.15s}.btn-wrapper:has(.btn:hover) .pixel:nth-child(12){animation-delay:.2s}.btn-wrapper:has(.btn:hover) .pixel:nth-child(16){animation-delay:.25s}.btn-wrapper:has(.btn:hover) .pixel:nth-child(18){animation-delay:.3s}.btn-wrapper:has(.btn:hover) .pixel:nth-child(24){animation-delay:.35s}.btn-wrapper:has(.btn:hover) .pixel:nth-child(25){animation-delay:.4s}.btn-wrapper:has(.btn:hover) .pixel:nth-child(26){animation-delay:.45s}.btn-wrapper:has(.btn:hover) .pixel:nth-child(32){animation-delay:.5s}.btn-wrapper:has(.btn:hover) .pixel:nth-child(34){animation-delay:.55s}.btn-wrapper:has(.btn:hover) .pixel:nth-child(37){animation-delay:.6s}.btn-wrapper:has(.btn:hover) .pixel:nth-child(38){animation-delay:.65s}.btn-wrapper:has(.btn:hover) .pixel:nth-child(39){animation-delay:.7s}.btn-wrapper:has(.btn:hover) .pixel:nth-child(40){animation-delay:.75s}.btn-wrapper:has(.btn:hover) .pixel:nth-child(46){animation-delay:.8s}.btn-wrapper:has(.btn:hover) .btn-letter{animation:none}.btn-wrapper:has(.btn:hover) .btn-text{gap:3px;font-weight:500}@keyframes pixel-form{0%{opacity:0;background-color:#fff2;transform:scale(.2)}60%{opacity:1;background-color:#fff;transform:scale(1.5)}to{opacity:1;background-color:#acff27;transform:scale(1)}}.btn-wrapper:has(.btn:active){box-shadow:0 1.5px #ffffff2b,inset 0 0 2px #00000014,inset 0 0 4px 3px #00ff62bf,0 0 32px 2px #00ff628c}.btn-wrapper:has(.btn:active) #corner-1{transform:translate(-10px,-10px)rotate(-90deg)}.btn-wrapper:has(.btn:active) #corner-2{transform:translate(10px,-10px)rotate(0)}.btn-wrapper:has(.btn:active) #corner-3{transform:translate(10px,10px)rotate(90deg)}.btn-wrapper:has(.btn:active) #corner-4{transform:translate(-10px,10px)rotate(180deg)}.btn-wrapper:has(.btn:active) .btn{box-shadow:inset .5px .5px #ffffff7d,inset 0 0 1px 2px #0009,inset 0 0 6px #ffffff96,inset 0 -2px #1a1a1a,0 3px 2px #0000001f,0 7px 5px #00000021,4px 13px 10px #00000024,10px 22px 18px #00000024,20px 42px 33px #00000026,60px 50px 80px #00000026,0 3px 3px #0000001a,0 0 120px #60f1cdaa,-4px -4px 8px #c5ff27ee,4px 4px 16px #c5ff27ee}.btn-wrapper:has(.btn:active) .line{fill:#a1ff2788}.btn-wrapper:has(.btn:active) .btn-text{color:#fff;text-shadow:0 0 2px #c5ff27;filter:drop-shadow(0 0 2px #000);gap:1px}.btn-wrapper:has(.btn:active) .btn-icon{animation:none;box-shadow:inset 0 0 5px #7bff0066,0 0 16px -6px #fffa}.btn-wrapper:has(.btn:active) .pixel:nth-child(4),.btn-wrapper:has(.btn:active) .pixel:nth-child(10),.btn-wrapper:has(.btn:active) .pixel:nth-child(11),.btn-wrapper:has(.btn:active) .pixel:nth-child(12),.btn-wrapper:has(.btn:active) .pixel:nth-child(16),.btn-wrapper:has(.btn:active) .pixel:nth-child(18),.btn-wrapper:has(.btn:active) .pixel:nth-child(24),.btn-wrapper:has(.btn:active) .pixel:nth-child(25),.btn-wrapper:has(.btn:active) .pixel:nth-child(26),.btn-wrapper:has(.btn:active) .pixel:nth-child(32),.btn-wrapper:has(.btn:active) .pixel:nth-child(34),.btn-wrapper:has(.btn:active) .pixel:nth-child(37),.btn-wrapper:has(.btn:active) .pixel:nth-child(38),.btn-wrapper:has(.btn:active) .pixel:nth-child(39),.btn-wrapper:has(.btn:active) .pixel:nth-child(40),.btn-wrapper:has(.btn:active) .pixel:nth-child(46){box-shadow:0 0 1px 1px #fff8,0 0 2px 2px #c5ff27}.btn-wrapper:has(.btn:focus){box-shadow:0 1.5px #ffffff2b,inset 0 0 2px #00000014,inset 0 0 4px 3px #00ff62bf,0 0 32px 2px #00ff628c}.btn-wrapper:has(.btn:focus) .btn{box-shadow:inset .5px .5px #ffffff7d,inset 0 0 1px 2px #0009,inset 0 0 6px #ffffff96,inset 0 -2px #1a1a1a,0 3px 2px #0000001f,0 7px 5px #00000021,4px 13px 10px #00000024,10px 22px 18px #00000024,20px 42px 33px #00000026,60px 50px 80px #00000026,0 3px 3px #0000001a,0 0 120px #60f1cdaa,-4px -4px 8px #c5ff27ee,4px 4px 16px #c5ff27ee}.btn-wrapper:has(.btn:focus) .line{fill:#a1ff2788}.btn-wrapper:has(.btn:focus) .btn-text{color:#fff;text-shadow:0 0 2px #c5ff27;filter:drop-shadow(0 0 2px #000);gap:1px}.btn-wrapper:has(.btn:focus) .btn-icon{animation:none;box-shadow:inset 0 0 5px #7bff0066,0 0 16px -6px #fffa}.btn-wrapper:has(.btn:focus) .pixel{background-color:#fff2;animation:none}.btn-wrapper:has(.btn:focus) .pixel:nth-child(4),.btn-wrapper:has(.btn:focus) .pixel:nth-child(10),.btn-wrapper:has(.btn:focus) .pixel:nth-child(11),.btn-wrapper:has(.btn:focus) .pixel:nth-child(12),.btn-wrapper:has(.btn:focus) .pixel:nth-child(16),.btn-wrapper:has(.btn:focus) .pixel:nth-child(18),.btn-wrapper:has(.btn:focus) .pixel:nth-child(24),.btn-wrapper:has(.btn:focus) .pixel:nth-child(25),.btn-wrapper:has(.btn:focus) .pixel:nth-child(26),.btn-wrapper:has(.btn:focus) .pixel:nth-child(32),.btn-wrapper:has(.btn:focus) .pixel:nth-child(34),.btn-wrapper:has(.btn:focus) .pixel:nth-child(37),.btn-wrapper:has(.btn:focus) .pixel:nth-child(38),.btn-wrapper:has(.btn:focus) .pixel:nth-child(39),.btn-wrapper:has(.btn:focus) .pixel:nth-child(40),.btn-wrapper:has(.btn:focus) .pixel:nth-child(46){background-color:#c5ff27;box-shadow:0 0 1px 1px #fff8,0 0 2px 2px #c5ff27}.card{transform-origin:top;color:#e1f1ba;opacity:0;z-index:10;pointer-events:none;-webkit-user-select:none;user-select:none;min-width:230px;max-width:260px;padding:16px;font-family:Montserrat,Figtree,sans-serif;font-size:14px;font-weight:300;line-height:1.4;transition:opacity .2s cubic-bezier(.68,-.55,.27,1.55),transform .4s cubic-bezier(.68,-.55,.27,1.55);position:absolute;top:110%;left:50%;transform:translate(-50%)scaleY(0)rotateX(-90deg)}.card-header{text-align:start;perspective:150px;transform-style:preserve-3d;background:0 0;border-bottom:1px solid #444;padding:.25em 0}.card-header:before{content:"";filter:drop-shadow(0 5px 38px #54d193)blur(3px);transform-origin:top;background-color:#fff;border-radius:3px;width:230px;height:5px;transition:transform .2s ease-in-out;position:absolute;top:-16px;left:-16px;transform:rotateX(60deg)scale(1);box-shadow:0 0 8px 2px #fffc,0 5px 36px 14px #48ff00cc}.card-header span{letter-spacing:.05em;color:#fff;text-shadow:0 0 8px #fff6;font-size:1.2em;font-weight:500}.card-body{justify-content:space-between;align-items:center;padding:.5em 0;display:flex}.btn:focus~.card,.btn:focus-visible~.card{opacity:1;pointer-events:auto;transform:translate(-50%)scaleY(1)rotateX(0)}:is(.btn-wrapper:has(.btn:focus),.btn-wrapper:has(.btn:focus-visible)) #corner-3{transform:translate(24px,126px)rotate(90deg)}:is(.btn-wrapper:has(.btn:focus),.btn-wrapper:has(.btn:focus-visible)) #corner-4{transform:translate(-24px,126px)rotate(180deg)}:is(.btn-wrapper:has(.btn:focus),.btn-wrapper:has(.btn:focus-visible)) .card-header:before{animation:.25s ease-in-out forwards bar-anim}@keyframes bar-anim{0%{transform:rotateX(90deg)scale(1.5,.8)}to{transform:rotateX(60deg)scale(1)}}:is(.btn-wrapper:has(.btn:focus):hover,.btn-wrapper:has(.btn:focus-visible):hover) #corner-3{transform:translate(16px,120px)rotate(90deg)}:is(.btn-wrapper:has(.btn:focus):hover,.btn-wrapper:has(.btn:focus-visible):hover) #corner-4{transform:translate(-16px,120px)rotate(180deg)}:is(.btn-wrapper:has(.btn:focus):active,.btn-wrapper:has(.btn:focus-visible):active) #corner-3{transform:translate(10px,116px)rotate(90deg)}:is(.btn-wrapper:has(.btn:focus):active,.btn-wrapper:has(.btn:focus-visible):active) #corner-4{transform:translate(-10px,116px)rotate(180deg)}
::view-transition-group(root){animation-timing-function:var(--expo-in)}::view-transition-new(root){animation:2s both scale;-webkit-mask:url(/assets/i-love-you-love.gif) 50%/0 no-repeat;mask:url(/assets/i-love-you-love.gif) 50%/0 no-repeat}::view-transition-old(root){animation:2s both scale}.dark::view-transition-old(root){animation:2s both scale}@keyframes scale{0%{-webkit-mask-size:0;mask-size:0}10%{-webkit-mask-size:50vmax;mask-size:50vmax}90%{-webkit-mask-size:50vmax;mask-size:50vmax}to{-webkit-mask-size:2000vmax;mask-size:2000vmax}}:root{--expo-in:linear(0 0%,.0085 31.26%,.0167 40.94%,.0289 48.86%,.0471 55.92%,.0717 61.99%,.1038 67.32%,.1443 72.07%,.1989 76.7%,.2659 80.89%,.3465 84.71%,.4419 88.22%,.554 91.48%,.6835 94.51%,.8316 97.34%,1 100%);--expo-out:linear(0 0%,.1684 2.66%,.3165 5.49%,.446 8.52%,.5581 11.78%,.6535 15.29%,.7341 19.11%,.8011 23.3%,.8557 27.93%,.8962 32.68%,.9283 38.01%,.9529 44.08%,.9711 51.14%,.9833 59.06%,.9915 68.74%,1 100%);background:#fff}.dark{background:#000}