*,*:after,*:before{box-sizing:border-box}:root{--gray-0: #f8f9fa;--blue-2: #a5d8ff;--size-2: .5rem;--size-4: 1.25rem;--ease-elastic-2: cubic-bezier(.5, 1, .75, 1.25);--shared-range: entry, exit}body{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--size-4);place-items:center;min-height:100vh;background:var(--surface-2);font-family:Google Sans,sans-serif,system-ui}ul{border-radius:var(--md-sys-shape-medium);width:50vmin;min-width:300px;aspect-ratio:4 / 6;background:var(--gray-0);display:grid;padding:0;margin:0;padding:var(--size-4);gap:var(--size-4);grid-template-columns:repeat(4,1fr);overflow:auto;overflow-x:hidden;list-style-type:none;transition:all .5s var(--ease-elastic-2)}.card.elevated{padding:0;margin:0;background-color:var(--blue-2);min-width:0;transition:all .5s var(--ease-elastic-2)}.card .actions{display:grid;flex-direction:column;grid-template-columns:auto auto;gap:var(--size-2) var(--size-4)}.controls.card.elevated{background-color:var(--md-sys-color-surface)}.grid .card{aspect-ratio:1;animation:grid-in both,grid-out both;animation-timeline:view();animation-range:var(--shared-range);transform:scale(.25)}@keyframes grid-in{to{transform:scale(1)}}@keyframes grid-out{to{transform:scale(.25)}}.zipper .card{--distance: -250%;aspect-ratio:1;animation:zip-in both,zip-out both;animation-timeline:view();animation-range:var(--shared-range)}.zipper li:is(:nth-of-type(n):nth-child(4n),:nth-of-type(4n+3):nth-child(n)) .card{--distance: 250%}@keyframes zip-in{0%{transform:translate(var(--distance, 250%)) scale(0)}}@keyframes zip-out{to{transform:translate(var(--distance, 250%)) scale(0)}}.rotater .card{aspect-ratio:1;animation:rotate-in both,rotate-out both;animation-timeline:view();animation-range:var(--shared-range)}.rotater li:nth-of-type(2n) .card{--rotation: -180}.rotater li:nth-of-type(4n+3):nth-child(n) .card{--rotation: 180}.rotater li:nth-of-type(n):nth-child(4n) .card{--rotation: 270}@keyframes rotate-in{0%{transform:rotate(calc(var(--rotation, -270) * 1deg)) scale(.25)}}@keyframes rotate-out{to{transform:rotate(calc(var(--rotation, -270) * 1deg)) scale(.25)}}li{padding:0}.list li{min-height:40px;height:8vmin;grid-column:1 / -1;max-inline-size:100%}.list .card{height:100%;transform:scaleX(.25);animation:list-in both,list-out both;animation-timeline:view();animation-range:var(--shared-range)}@keyframes list-in{to{transform:scaleX(1)}}@keyframes list-out{to{transform:scaleX(.25)}}.horizontal{width:75vmin;aspect-ratio:4 / 2;display:flex;overflow-x:auto;overflow-y:hidden}.horizontal li{min-width:25%}.horizontal .card{height:100%;view-timeline:--card;view-timeline-axis:inline;animation:horizontal-in both;animation-timeline:--card;animation-range:cover 10% cover 90%}@keyframes horizontal-in{0%,to{transform:scaleY(.25)}5%,95%{transform:scaleY(1)}}