:root{--px: 4px;--epx: 2px;color-scheme:dark;background:#0e1124}body{position:relative;margin:0;color:#fff}.backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}.backdrop canvas{position:absolute;top:0;left:0;display:block;image-rendering:pixelated;opacity:0;transition:opacity 1.2s ease}.backdrop.ready canvas{opacity:1}.backdrop:after{content:"";position:absolute;inset:0;background:radial-gradient(240px 64px at 50% calc(100% - 38px),rgb(4 5 12 / var(--patch, .5)),#04050c00),radial-gradient(ellipse 95% 90% at 50% 50%,#04050c00 50%,#04050c80 80%,#04050cd9)}.center{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100svh;padding:88px 16px}.center h1{position:relative;z-index:2;margin:0;line-height:0}.panel{--pad: calc(var(--px) * 5);position:relative;z-index:1;margin-top:calc(var(--px) * -4.5);padding:calc(var(--px) * 8.5) var(--pad) calc(var(--px) * 6)}.panel-shell{position:absolute;inset:0;box-shadow:0 0 calc(var(--px) * 8) calc(var(--px) * 2) rgb(4 5 12 / var(--patch, .5))}.panel-bg{--n: var(--px);position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgb(255 255 255 / .025) 0 var(--px),rgb(255 255 255 / 0) var(--px) calc(var(--px) * 3)),#262a34;box-shadow:inset 0 var(--px) 0 #59616f,inset 0 calc(var(--px) * 2) 0 #353a46,inset var(--px) 0 0 #414857,inset calc(var(--px) * -1) 0 0 #1a1d24,inset 0 calc(var(--px) * -1) 0 #121419;clip-path:polygon(var(--n) 0,calc(100% - var(--n)) 0,100% var(--n),100% calc(100% - var(--n)),calc(100% - var(--n)) 100%,var(--n) 100%,0 calc(100% - var(--n)),0 var(--n))}.panel-bg:before,.panel-bg:after{--r: calc(var(--px) * 2);content:"";position:absolute;background:linear-gradient(var(--c) 0 0) left top / var(--r) var(--r) no-repeat,linear-gradient(var(--c) 0 0) right top / var(--r) var(--r) no-repeat,linear-gradient(var(--c) 0 0) left bottom / var(--r) var(--r) no-repeat,linear-gradient(var(--c) 0 0) right bottom / var(--r) var(--r) no-repeat}.panel-bg:before{--c: #111318;inset:calc(var(--px) * 4) calc(var(--px) * 2) calc(var(--px) * 2) calc(var(--px) * 4)}.panel-bg:after{--c: #6a7282;inset:calc(var(--px) * 3)}.foot{position:absolute;z-index:1;left:0;right:0;bottom:32px;display:flex;justify-content:center;padding:0 16px}.email{display:block;color:#fff;line-height:0;transition:opacity .15s ease}.email:hover{opacity:.8}.email:focus{outline:none}.email:focus-visible{outline:2px solid #fff;outline-offset:4px}.email svg{display:block;width:calc(var(--w) * var(--epx));height:calc(6 * var(--epx))}.center .logo{display:block;width:calc(62 * var(--px));height:calc(9 * var(--px))}.holly{position:absolute;left:calc(var(--px) * 50);top:calc(var(--px) * -4);width:calc(var(--px) * 13.5);height:calc(var(--px) * 6.5);display:none}:root[data-festive] .holly{display:block}.games{--icon: min(calc(16 * var(--px)), calc((100vw - 32px - 2 * var(--pad)) / 6.75));position:relative;z-index:1;display:flex;justify-content:center;gap:calc(var(--icon) * .4375);margin:0;padding:0;list-style:none}.games a{display:block;border-radius:22.37%;transition:transform .15s ease}.games a:hover{transform:translateY(-3px)}.games a:focus,.soon:focus{outline:none}.games a:focus-visible{outline:2px solid #fff;outline-offset:4px}.games img{display:block;width:var(--icon);height:var(--icon);border-radius:22.37%}.games li{position:relative}.tip{position:absolute;top:calc(100% + 10px);left:50%;z-index:2;padding:7px 10px;border-radius:6px;background:#000;color:#fff;font:12px/1 var(--font-mono);white-space:nowrap;box-shadow:0 6px 16px #00000073;opacity:0;transform:translate(-50%,-4px);transition:opacity .15s ease,transform .15s ease;pointer-events:none}.tip:before{content:"";position:absolute;bottom:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-bottom-color:#000}.games li:hover .tip,.games li:focus-within .tip,.soon:focus-visible .tip{opacity:1;transform:translate(-50%)}.soon img{opacity:.4}@media (max-width: 480px){.games li:first-child .tip,.games li:last-child .tip{transform:translateY(-4px)}.games li:first-child .tip{left:-4px}.games li:last-child .tip{left:auto;right:-4px}.games li:first-child .tip:before{left:calc(var(--icon) / 2 + 4px)}.games li:last-child .tip:before{left:auto;right:calc(var(--icon) / 2 - 1px)}.games li:first-child:hover .tip,.games li:first-child:focus-within .tip,.games li:last-child:hover .tip,.games li:last-child:focus-within .tip{transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.games a,.tip{transition:none}.games a:hover{transform:none}}
