.page{flex-wrap:wrap;place-content:center;width:100%;height:100vh;padding:2vmax;display:flex}.cover{z-index:1;background-color:#000;border-radius:10px;justify-content:center;align-items:center;width:75px;height:64px;padding-bottom:11px;display:flex;position:absolute;transform:rotateX(13deg);box-shadow:0 1px 1px 1px #fff}.button-s{cursor:pointer;z-index:2;color:#000000b3;background-color:#ddd;border:none;border-bottom:2px solid #fff;border-radius:8px;width:70px;height:60px;font-size:22px;font-weight:500;transition:all 80ms;position:absolute;transform:rotateX(13deg);box-shadow:0 4px 0 .2px #747474}.d3warpper{transform-style:preserve-3d;perspective:100px;justify-content:center;align-items:center;display:flex;position:relative;scale:1}.button-s:active{transition:all 80ms;transform:translateY(4.5px);box-shadow:0 4px 0 .2px #74747400}
::view-transition-group(root){animation-timing-function:var(--expo-out)}::view-transition-new(root){transform-origin:0 0;animation:1s both scale;-webkit-mask:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 40 40\"><defs><filter id=\"blur\"><feGaussianBlur stdDeviation=\"2\"/></filter></defs><circle cx=\"0\" cy=\"0\" r=\"18\" fill=\"white\" filter=\"url(%23blur)\"/></svg>") 0 0/0 no-repeat content-box border-box;mask:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 40 40\"><defs><filter id=\"blur\"><feGaussianBlur stdDeviation=\"2\"/></filter></defs><circle cx=\"0\" cy=\"0\" r=\"18\" fill=\"white\" filter=\"url(%23blur)\"/></svg>") 0 0/0 no-repeat content-box border-box}::view-transition-old(root){transform-origin:0 0;z-index:-1;animation:1s both scale}.dark::view-transition-old(root){transform-origin:0 0;z-index:-1;animation:1s both scale}@keyframes scale{to{-webkit-mask-size:350vmax;mask-size:350vmax}}:root{background:#fff}.dark{background:#000}