Something went wrong. Try again.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101@utility list-morph { :root[data-list-switch] & > * { view-transition-name: match-element; view-transition-class: list-shell; }}
:root[data-list-switch] { view-transition-name: none;
& [data-vt="move"] { view-transition-name: match-element; view-transition-class: list-move; }
& [data-vt="fade"] { view-transition-name: match-element; view-transition-class: list-fade; }}
::view-transition { pointer-events: none;}
::view-transition-group(.list-shell),::view-transition-group(.list-move),::view-transition-group(.list-fade) { animation-duration: 420ms; animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);}
::view-transition-group(.list-shell) { background: var(--color-background-default); border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--color-shadow-ring);}
::view-transition-old(.list-shell),::view-transition-new(.list-shell) { display: none;}
::view-transition-old(.list-move),::view-transition-new(.list-move),::view-transition-old(.list-fade),::view-transition-new(.list-fade) { height: 100%; width: auto; object-fit: none; object-position: left top;}
::view-transition-old(.list-fade) { animation: 150ms cubic-bezier(0.33, 1, 0.68, 1) both list-fade-out;}
::view-transition-new(.list-fade) { animation: 210ms cubic-bezier(0.33, 1, 0.68, 1) 105ms both list-fade-in;}
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-image-pair(*) { animation-duration: 0s !important; animation-delay: 0s !important; } ::view-transition-old(*) { animation: 150ms cubic-bezier(0.33, 1, 0.68, 1) both list-dissolve-out !important; } ::view-transition-new(*) { animation: 150ms cubic-bezier(0.33, 1, 0.68, 1) both list-dissolve-in !important; }}
@keyframes list-fade-in { from { opacity: 0; filter: blur(3px); }}
@keyframes list-fade-out { to { opacity: 0; filter: blur(3px); }}
@keyframes list-dissolve-in { from { opacity: 0; }}
@keyframes list-dissolve-out { to { opacity: 0; }}