.card{--pointer-x: 0%;--pointer-y: 1%;--card-scale: 1;--card-opacity: 0;--rotate-x: 0deg;--rotate-x-delta: 0deg;--rotate-y: 0deg;--card-aspect: .718;--card-radius: 4.55% / 3.5%;--card-back: hsl(205, 100%, 25%);--card-glow: hsl(175, 66%, 93%);--fan-rotation: 5;--card-hover-height: 0px;width:max(20vw,calc(20vh * var(--card-aspect)));pointer-events:none;z-index:sibling-index();will-change:transform,z-index;transform-style:preserve-3d;grid-area:1 / 1;position:relative;left:50%;top:50%;transform:translate(-50%,-50%)}.card:hover,.card:focus-within{--card-hover-height: 17%}.deck[data-card-count="1"] .card{--card-hover-height: 0px !important}.card[data-active=true]{z-index:120}.card,.card__rotator,.card__rotator:after{aspect-ratio:var(--card-aspect);border-radius:var(--card-radius)}.card[data-active=true] .card__translator,.card[data-active=true] .card__rotator{touch-action:none}body:has(.card[data-active=true]){overflow:hidden}.card__translator,.card__rotator{display:grid;perspective:600px;transform-origin:center;transform-style:preserve-3d}.card__translator{transform:translate3d(0,100%,.01px) rotate(var(--fan-rotation)) translate3d(0,calc((100% + var(--card-hover-height)) * -1),.01px);transform-origin:center;transition:transform .3s ease-out;will-change:transform}.card[data-active=true] .card__translator{--card-scale: 1.3;transform:translateZ(calc(var(--card-scale) * 150px)) scale(var(--card-scale)) rotate(0)}.card__rotator{cursor:pointer;pointer-events:auto;transition:transform 0s ease-out;will-change:transform;border:none;background:transparent;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:1px solid transparent}.card[data-active=true] .card__rotator{--rotate-x-delta: 360deg;transform:rotateY(calc(var(--rotate-x) + var(--rotate-x-delta))) rotateX(var(--rotate-y));transition:transform .5s ease-out}.card__rotator:after{content:"";position:absolute;z-index:-1;width:100%;height:100%;box-shadow:0 0 3px -1px #fff,0 0 12px 2px var(--card-glow),0 10px 20px -5px #000,0 0 40px -30px var(--card-glow),0 0 50px -20px var(--card-glow);opacity:0;transition:opacity .2s ease-in-out;will-change:opacity}.card__rotator:hover:after,.card__rotator:focus:after{opacity:1}.card__rotator *{width:100%;display:grid;grid-area:1/1;aspect-ratio:var(--card-aspect);border-radius:var(--card-radius);transform-style:preserve-3d;pointer-events:none;overflow:hidden}.card__rotator img{height:auto}.card__back{background-color:#000;transform:rotateY(180deg) translateZ(1px);backface-visibility:visible}.card__front{opacity:1;transition:opacity .33s ease-out;backface-visibility:hidden}.card__glare{background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(0,0%,100%,.8) 10%,hsla(0,0%,100%,.65) 20%,hsla(0,0%,0%,.5) 90%);opacity:var(--card-opacity);mix-blend-mode:overlay;will-change:opacity,background-image;transition:opacity .3s ease-in-out}.card[data-active=true] .card__rotator:hover .card__glare{--card-opacity: 1}.card__link{position:relative;left:50%;bottom:0;pointer-events:auto;transition:transform .5s ease-in-out .5s;transform:translate(-50%,-100%);z-index:110;width:200%;opacity:0;will-change:transform,opacity}.card[data-active=true] .card__link{opacity:1;transform:translate(-50%,2rem);transition:none}.deck{width:100vw;height:100%;text-align:center;scroll-snap-align:center;flex:none;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;position:relative}.deck__cards{display:grid;grid-template-columns:1fr;grid-template-rows:1fr}.deck__name{position:absolute;font-size:3rem;font-style:italic}@media(orientation:landscape){.deck__name{left:0;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-lr}}@media(orientation:portrait){.deck__name{left:50%;top:0;transform:translate(-50%)}}.deck__name[data-hidden=true]{display:none}.deck__backdrop{top:0;right:0;bottom:0;left:0;z-index:0;background:#000;opacity:0;cursor:default;transition:opacity .3s ease-in-out}.deck:has(.card[data-active=true]) .deck__backdrop{position:fixed;opacity:.05;z-index:100}:root{--hue: 319;--color-primary-1: oklch(90% .077 var(--hue));--color-primary-2: oklch(80% .161 var(--hue));--color-primary-8: oklch(20% .096 var(--hue));--color-primary-9: oklch(10% .048 var(--hue));--color-background: var(--color-primary-2);--color-background-text: var(--color-primary-9)}@media(color-gamut:p3){:root{--color-primary-1: oklch(90% .085 var(--hue));--color-primary-2: oklch(80% .177 var(--hue));--color-primary-8: oklch(20% .103 var(--hue));--color-primary-9: oklch(10% .052 var(--hue))}}@media(color-gamut:rec2020){:root{--color-primary-1: oklch(90% .087 var(--hue));--color-primary-2: oklch(80% .181 var(--hue));--color-primary-8: oklch(20% .117 var(--hue));--color-primary-9: oklch(10% .058 var(--hue))}}@media(prefers-color-scheme:dark){:root{--color-background: var(--color-primary-8);--color-background-text: var(--color-primary-1)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}body{margin:0;font-family:Roboto,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:var(--color-background-text);background-color:var(--color-background);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-mos-osx-font-smoothing:grayscale}main{display:flex;width:100vw;height:100vh;flex-flow:column nowrap;overflow-x:hidden;scroll-snap-type:y mandatory}