.page{flex-wrap:wrap;place-content:center;width:100%;height:100vh;padding:2vmax;display:flex}.pixel-button{color:#fff;text-transform:uppercase;cursor:pointer;image-rendering:pixelated;background-color:#f33;border:4px solid #000;padding:10px 20px;font-family:Courier New,Courier,monospace;font-size:18px;transition:all .15s;display:inline-block;position:relative;box-shadow:6px 6px #000,inset 2px 2px #f99,inset -2px -2px #900}.pixel-button:hover{background-color:#f66;animation:.5s infinite alternate pixel-glow;transform:translate(-3px,-3px);box-shadow:8px 8px #000,inset 2px 2px #fcc,inset -2px -2px #c00}.pixel-button:active{background-color:#c00;transform:translate(2px,2px);box-shadow:3px 3px #000,inset 1px 1px #f99,inset -1px -1px #900}@keyframes pixel-glow{0%{text-shadow:0 0 2px #fff,0 0 4px #f99}to{text-shadow:0 0 4px #fff,0 0 8px #fcc}}.pixel-button:before{content:"";opacity:0;border:2px dashed #000;transition:opacity .2s;position:absolute;inset:-6px}.pixel-button:hover:before{opacity:1;animation:.3s infinite alternate pixel-border}@keyframes pixel-border{0%{border-color:#000}to{border-color:#333}}
:root{--circle-center-center-out:circle(0% at center);--circle-center-center-in:circle(125% at center);--circle-hesitate:circle(40% at center);--circle-top-left-out:circle(0% at top left);--circle-top-right-out:circle(0% at top right);--circle-bottom-right-out:circle(0% at bottom right);--circle-bottom-left-out:circle(0% at bottom left);--circle-top-left-in:circle(150% at top left);--circle-top-right-in:circle(150% at top right);--circle-bottom-right-in:circle(150% at bottom right);--circle-bottom-left-in:circle(150% at bottom left);--wipe-in:inset(0 0 0 0);--wipe-bottom:inset(100% 0 0 0);--wipe-left:inset(0 100% 0 0);--wipe-top:inset(0 0 100% 0);--wipe-right:inset(0 0 0 100%);--wipe-top-left-in:polygon(50% -50%,150% 50%,50% 150%,-50% 50%);--wipe-top-right-in:polygon(50% -50%,150% 50%,50% 150%,-50% 50%);--wipe-bottom-left-in:polygon(50% -50%,150% 50%,50% 150%,-50% 50%);--wipe-bottom-right-in:polygon(-50% 0%,200% 0,0 200%,0 -50%);--wipe-top-left-out:polygon(0 0,0 0,0 0,0 50%);--wipe-top-right-out:polygon(50% -50%,150% 50%,150% 50%,50% -50%);--wipe-bottom-left-out:polygon(-50% 50%,50% 150%,50% 150%,-50% 50%);--wipe-bottom-right-out:polygon(150% 50%,150% 50%,50% 150%,50% 150%);--wipe-cinematic-out:inset(100% 0 100% 0);--wipe-cinematic-mid:inset(10% 0 10% 0);--square-hesitate:inset(33% 33% 33% 33%);--square-out:inset(100% 100% 100% 100%);--square-in:var(--wipe-in);--square-top-left-out:inset(0 100% 100% 0);--square-top-right-out:inset(0 0 100% 100%);--square-bottom-left-out:inset(100% 100% 0 0);--square-bottom-right-out:inset(100% 0 0 100%);--diamond-center-in:polygon(-50% 50%,50% -50%,150% 50%,50% 150%);--diamond-center-out:polygon(50% 50%,50% 50%,50% 50%,50% 50%);--diamond-hesitate:polygon(45% 50%,50% 25%,55% 50%,50% 75%);--opposing-corners-in:polygon(0 0,0 100%,100% 100%,100% 0);--opposing-corners-out:polygon(0 0,50% 50%,100% 100%,50% 50%);--surface:#0d1a26;--surfaceHSL:0 0% 6%;--text:#abc9e3;--white:#e0f2ff;--brand:#4c88bd;--brandHSL:208 46% 52%;--brand-alt:#003c66;--pink:#d45498;--high-contrast:#ebf7ff;--layer-surface:1;--layer-tooltip:2;--layer-sticky:3}
::view-transition-new(root){animation:5s both in-circle-swoop}::view-transition-old(root){z-index:-1;animation:5s both out-circle-swoop}.open::view-transition-old(root){z-index:-1;animation:5s both out-circle-swoop}.open::view-transition-new(root){animation:5s both in-circle-swoop}@keyframes in-circle-swoop{0%{clip-path:var(--circle-top-right-out)}to{clip-path:var(--circle-bottom-right-in)}}@keyframes out-circle-swoop{0%{clip-path:var(--circle-bottom-right-in)}to{clip-path:var(--circle-top-right-out)}}:root{background:#fff}.dark{background:#87ceeb}