@layer base, components;@supports (view-timeline:--works){.warning{display:none}@keyframes adjust-z-index{0%{z-index:1}50%{z-index:100}to{z-index:1}}@keyframes rotate-cover{0%{transform:translateX(-100%) rotateY(-25deg)}35%{transform:translateX(0) rotateY(-25deg)}50%{transform:rotateY(0deg) translateZ(1em) scale(1.5)}65%{transform:translateX(0) rotateY(25deg)}to{transform:translateX(100%) rotateY(25deg)}}.cards li{view-timeline-name:--li-in-and-out-of-view;view-timeline-axis:inline;animation:adjust-z-index linear both;animation-duration:auto;animation-timeline:--li-in-and-out-of-view;animation-range:contain 0 contain 100%;perspective:40em;position:relative;z-index:1;will-change:z-index;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cards li span{display:none}.cards li:is(:target,:has(div:is(:hover,:focus))) span{display:block;text-shadow:0 0 5px rgba(0,0,0,.8)}.cards li div{animation:rotate-cover linear both;animation-duration:auto;animation-timeline:view(inline);transform-style:preserve-3d;transform:translateX(-100%) rotateY(-45deg);will-change:transform}.cards li div:hover{cursor:pointer}}@layer base{*{box-sizing:border-box;padding:0;margin:0}:root{--cover-size:10rem;--ombre-gradient:linear-gradient(90deg,#9eede7,#50d4c9,#09d5c4)}@media (max-width:800px){:root{--cover-size:5rem}}@media (max-width:500px){:root{--cover-size:6rem}}body,html{height:100%;width:100%;color:#ccc;background:#111;text-align:center}body{font-family:sans-serif;display:flex;flex-direction:column;gap:1em;padding:1em;background:radial-gradient(circle at top left,#0f8278 0,#000 60%) no-repeat;background-size:cover}body::-webkit-scrollbar{width:1em}#__next{height:100%}@supports (place-content:safe center){body{place-content:safe center}}a{color:#ffefd5}footer{font-style:italic;margin-top:1em}.cards{list-style:none;overflow-x:scroll;width:100%;white-space:nowrap;outline:1px solid transparent}.cards:focus{outline-color:#666}.cards:not(.active){scroll-snap-type:x mandatory}.cards li{display:inline-block;scroll-snap-align:center}.cards li,.cards li img{width:var(--cover-size);height:var(--cover-size)}.cards li img{display:block;-webkit-box-reflect:below .5em linear-gradient(transparent,rgba(0,0,0,.25))}.cards{min-height:calc(var(--cover-size) * 2.5);max-width:calc(var(--cover-size) * 6);margin:0 auto;padding:calc(var(--cover-size) / 3 * 1.6) 0}.cards li:first-of-type{margin-left:calc(50% - var(--cover-size) / 2)}.cards li:last-of-type{margin-right:calc(50% - var(--cover-size) / 2)}}@layer components{@layer warning{.warning{padding:1em;border:1px solid #000;z-index:9999;color:#000;background:rgba(255,255,225,.9);z-index:10001;width:max-content;margin:0 auto}:is(.warning:hover,.warning:has(:focus-within)){opacity:1}.warning>:first-child{margin-top:0}.warning>:last-child{margin-bottom:0}.warning a{color:blue}.warning--info{border:1px solid #123456;background:rgba(205,230,255,.8)}}@layer debug{#debug{position:absolute;top:1em;left:1em}#debug:after{content:" Show Debug";margin-left:1.5em;color:#fff;white-space:nowrap}#debug:checked+.cards{border:1px solid lime}#debug:checked+.cards li{text-align:center;color:#fff;border:1px solid blue}#debug:checked+.cards li:before{content:attr(id);display:block;position:absolute;inset:0;line-height:var(--cover-size);opacity:.5}#debug:checked+.cards li img{opacity:.5}}}