:root{--zoom-duration: .7s;--grid-animation-size: 400px}html:active-view-transition-type(zoom-out){--easing: cubic-bezier(.33, 1, .68, 1)}html:active-view-transition-type(zoom-out)::view-transition-old(main-content),html:active-view-transition-type(zoom-out)::view-transition-old(settings-content-card){animation:zoom-out var(--zoom-duration) var(--easing) both}html:active-view-transition-type(zoom-out)::view-transition-new(main-content),html:active-view-transition-type(zoom-out)::view-transition-new(settings-content-card){animation:zoom-in var(--zoom-duration) var(--easing) both}html:active-view-transition-type(zoom-out)::view-transition-old(grid-item-top){opacity:0}html:active-view-transition-type(zoom-out)::view-transition-new(grid-item-top){animation:top-grid-item-zoom var(--zoom-duration) var(--easing) both}html:active-view-transition-type(zoom-out)::view-transition-old(grid-item-right){opacity:0}html:active-view-transition-type(zoom-out)::view-transition-new(grid-item-right){animation:right-grid-item-zoom var(--zoom-duration) var(--easing) both}html:active-view-transition-type(zoom-out)::view-transition-old(grid-item-bottom){opacity:0}html:active-view-transition-type(zoom-out)::view-transition-new(grid-item-bottom){animation:bottom-grid-item-zoom var(--zoom-duration) var(--easing) both}html:active-view-transition-type(zoom-out)::view-transition-old(grid-item-left){opacity:0}html:active-view-transition-type(zoom-out)::view-transition-new(grid-item-left){animation:left-grid-item-zoom var(--zoom-duration) var(--easing) both}html:active-view-transition-type(zoom-in){--grid-animation-size: 800px;--easing: cubic-bezier(.32, 0, .67, 0)}html:active-view-transition-type(zoom-in)::view-transition-old(main-content),html:active-view-transition-type(zoom-in)::view-transition-old(settings-content-card){animation:zoom-in var(--zoom-duration) var(--easing) reverse both}html:active-view-transition-type(zoom-in)::view-transition-new(main-content),html:active-view-transition-type(zoom-in)::view-transition-new(settings-content-card){animation:zoom-out var(--zoom-duration) var(--easing) reverse both}html:active-view-transition-type(zoom-in)::view-transition-old(grid-item-top){opacity:0}html:active-view-transition-type(zoom-in)::view-transition-new(grid-item-top){animation:top-grid-item-zoom var(--zoom-duration) var(--easing) reverse both}html:active-view-transition-type(zoom-in)::view-transition-old(grid-item-right){opacity:0}html:active-view-transition-type(zoom-in)::view-transition-new(grid-item-right){animation:right-grid-item-zoom var(--zoom-duration) var(--easing) reverse both}html:active-view-transition-type(zoom-in)::view-transition-old(grid-item-bottom){opacity:0}html:active-view-transition-type(zoom-in)::view-transition-new(grid-item-bottom){animation:bottom-grid-item-zoom var(--zoom-duration) var(--easing) reverse both}html:active-view-transition-type(zoom-in)::view-transition-old(grid-item-left){opacity:0}html:active-view-transition-type(zoom-in)::view-transition-new(grid-item-left){animation:left-grid-item-zoom var(--zoom-duration) var(--easing) reverse both}@keyframes zoom-out{0%{transform:scale(1)}to{transform:scale(8);filter:blur(10px);opacity:0}}@keyframes zoom-in{0%{transform:scale(.2);filter:blur(10px);opacity:0}to{transform:scale(1)}}@keyframes top-grid-item-zoom{0%{transform:translateZ(0)}to{transform:translate3d(0,calc(var(--grid-animation-size) * -1),0)}}@keyframes bottom-grid-item-zoom{0%{transform:translateZ(0)}to{transform:translate3d(0,var(--grid-animation-size),0)}}@keyframes left-grid-item-zoom{0%{transform:translateZ(0)}to{transform:translate3d(calc(var(--grid-animation-size) * -1),0,0)}}@keyframes right-grid-item-zoom{0%{transform:translateZ(0)}to{transform:translate3d(var(--grid-animation-size),0,0)}}html:active-view-transition-type(settings){--easing: ease-out;--duration: .3s}html:active-view-transition-type(settings)::view-transition-old(settings-content-card){animation:var(--duration) var(--easing) both settings-content-slide-out-up}html:active-view-transition-type(settings)::view-transition-new(settings-content-card){animation:var(--duration) var(--easing) both settings-content-slide-in-up}html:active-view-transition-type(settings)::view-transition-image-pair(settings-content-card){perspective:1500px}@keyframes settings-content-slide-out-up{0%{transform:rotateX(0);filter:blur(0);opacity:1}to{transform:rotateX(10deg);filter:blur(10px);opacity:0}}@keyframes settings-content-slide-in-up{0%{transform:rotateX(-10deg);filter:blur(10px);opacity:0}to{transform:rotateX(0);filter:blur(0);opacity:1}}