:root{--animate-duration: .3s}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}.slide-container{position:relative;overflow:hidden}.slide-in{animation:slideIn var(--animate-duration) ease-in forwards}.slide-out{animation:slideOut var(--animate-duration) ease-out forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fade-in{animation:fadeIn var(--animate-duration) ease-in forwards}.fade-out{animation:fadeOut var(--animate-duration) ease-out forwards}:root{--animate-expand-max-height: 20vh}.animate-expand.closed{max-height:0;opacity:0;transition:opacity calc(var(--animate-duration) / 2) ease-out 0ms,max-height calc(var(--animate-duration) / 2) ease-out calc(var(--animate-duration) / 2),background-color var(--animate-duration) ease-out,color var(--animate-duration) ease-out}.animate-expand.open{max-height:var(--animate-expand-max-height, 20vh);opacity:1;transition:max-height calc(var(--animate-duration) / 2) ease-in 0ms,opacity calc(var(--animate-duration) / 2) ease-in calc(var(--animate-duration) / 2),background-color var(--animate-duration) ease-in,color var(--animate-duration) ease-in}:root{--app-spp-title-height: 64px}