.background{--dx-percentage:-400}.background g path{transform:translateX(calc((var(--dx-percentage) * 1px) / (var(--divider))));transition:transform 1s linear}.background g path:first-of-type{--divider:15}.background g path:nth-of-type(2),.background g path:nth-of-type(3){--divider:10}.background g path:nth-of-type(4){--divider:5}.background-rect{fill:url(#background-rect-gradient-light)}@media (prefers-color-scheme:dark){.background-rect{fill:url(#background-rect-gradient-dark)}}.background-path-1{fill:url(#background-path-1-gradient-light)}@media (prefers-color-scheme:dark){.background-path-1{fill:url(#background-path-1-gradient-dark)}}.background-path-2{fill:url(#background-path-2-gradient-light)}@media (prefers-color-scheme:dark){.background-path-2{fill:url(#background-path-2-gradient-dark)}}.background-path-3{fill:url(#background-path-3-gradient-light)}@media (prefers-color-scheme:dark){.background-path-3{fill:url(#background-path-3-gradient-dark)}}.background-path-4{fill:url(#background-path-4-gradient-light)}@media (prefers-color-scheme:dark){.background-path-4{fill:url(#background-path-4-gradient-dark)}}
.window-frame{--window-frame-height:300px;--window-frame-width:300px;--window-frame-top:0px;--window-frame-left:0px;--nav-bar-item-center-x:0;--nav-bar-item-center-y:0;--animation-duration:.3s;height:var(--window-frame-height);width:var(--window-frame-width);top:var(--window-frame-top);left:var(--window-frame-left)}.window-frame.windowed-to-minimized{animation:windowed-to-minimized var(--animation-duration) ease forwards}@keyframes windowed-to-minimized{to{transform:translateX(calc(var(--nav-bar-item-center-x) * 1px)) translateY(calc(var(--nav-bar-item-center-y) * 1px)) scale(.01)}}.window-frame.minimized-to-windowed{animation:minimized-to-windowed var(--animation-duration) ease forwards}@keyframes minimized-to-windowed{0%{transform:translateX(calc(var(--nav-bar-item-center-x) * 1px)) translateY(calc(var(--nav-bar-item-center-y) * 1px)) scale(.01)}to{transform:translate(0)scale(1)}}.window-frame.windowed-to-maximized{animation:windowed-to-maximized var(--animation-duration) ease forwards}@keyframes windowed-to-maximized{to{height:calc(100% - var(--nav-bar-height));border-radius:0;width:100%;top:0;left:0}}.window-frame.maximized-to-windowed{animation:maximized-to-windowed var(--animation-duration) ease forwards}@keyframes maximized-to-windowed{0%{height:calc(100% - var(--nav-bar-height));width:100%;top:0;left:0}to{height:var(--window-frame-height);width:var(--window-frame-width);top:var(--window-frame-top);left:var(--window-frame-left)}}.window-frame.maximized-to-minimized{animation:maximized-to-minimized var(--animation-duration) ease forwards}@keyframes maximized-to-minimized{0%{height:calc(100% - var(--nav-bar-height));border-radius:0;width:100%;top:0;left:0}to{transform:translateX(calc(var(--nav-bar-item-center-x) * 1px)) translateY(calc(var(--nav-bar-item-center-y) * 1px)) scale(.01)}}.window-frame.minimized-to-maximized{animation:minimized-to-maximized var(--animation-duration) ease forwards}@keyframes minimized-to-maximized{0%{transform:translateX(calc(var(--nav-bar-item-center-x) * 1px)) translateY(calc(var(--nav-bar-item-center-y) * 1px)) scale(.01)}to{height:calc(100% - var(--nav-bar-height));border-radius:0;width:100%;top:0;left:0}}