@layer template,demo;@layer demo{input[type=radio]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.cards-container{--base-rotation: 0deg;--arc: 160deg;--radius: 30vw;--duration: .2s;--cards-container-size: calc(var(--radius) * 2);--cards-container-padding: 1.25rem;--border-color: transparent;--label-offset: calc(var(--radius) * -1 - 1rem);--label-text-extra-offset: -1.8rem;--label-size: 24px;--label-color: #666;--label-color-hover: steelblue;--label-line-h: 0;--label-line-h-current: 1.4rem;--label-dot-size: 8px;--title-top: 1rem;--title-offset-y: 20px;--info-top: 3.75rem;--info-width: min(68%, 360px);--info-offset-y: 20px;box-sizing:content-box;position:relative;margin:2rem auto 0;width:var(--cards-container-size);height:var(--cards-container-size);padding:var(--cards-container-padding);@media(min-width:800px){--radius: 22.5vw;--label-size: 28px;--label-dot-size: 11px;--label-line-h-current: 2.2rem;--title-top: 2.25rem;--info-top: 5.5rem}}@media(min-width:1200px){--label-size: 32px;--border-color: var(--label-color)}.cards{position:absolute;inset:var(--cards-container-padding);aspect-ratio:1;border-radius:50%;border:1px solid var(--border-color);transition:transform .3s ease-in-out var(--duration);list-style:none}.cards li{position:absolute;inset:0;margin:0;padding:0;transform-origin:center;display:grid;place-content:center;transform:rotate(calc(var(--i) * var(--arc) / var(--items)));pointer-events:none}.cards li>label{position:absolute;inset:0;margin:auto;transform:translateY(var(--label-offset));width:var(--label-size);height:var(--label-size);cursor:pointer;pointer-events:initial;text-align:center;color:var(--label-color);font-size:clamp(.8rem,2.5vw + .04rem,1rem);transition:var(--duration) ease-in-out}.cards li>label span{display:block;transform:translateY(var(--label-text-extra-offset))}.cards li>label:before{content:"";position:absolute;top:var(--cards-container-padding);left:50%;translate:-50% 0;width:var(--label-dot-size);height:var(--label-dot-size);aspect-ratio:50%;border-radius:50%;background-color:var(--label-color);transition:background-color var(--duration) ease-in-out}.cards li>label:after{content:"";position:absolute;top:100%;left:50%;translate:-50% 5px;width:2px;height:var(--label-line-h);background-color:#4682b4;transition:height .3s ease-in-out var(--label-line-delay,0ms)}.cards li>label:hover{--label-color: var(--label-color-hover)}.cards>li>h2,.cards>li>p{position:absolute;left:50%;text-align:center;transform:translate(-50%);transform-origin:center}.cards>li>h2{top:var(--title-top);opacity:var(--title-opacity,0);translate:0 var(--title-offset-y);transition:var(--duration) ease-in-out var(--title-delay,0ms)}.cards>li>p{top:var(--info-top);margin:0 auto;width:var(--info-width);z-index:2;font-size:clamp(.8rem,2.5vw + .05rem,.9rem);text-align:left;text-wrap:pretty;opacity:var(--info-opacity,0);transition:var(--duration) ease-in-out var(--info-delay,0ms)}li:has(input:checked){--label-opacity: 1;--label-color: var(--label-color-hover);--label-line-h: var(--label-line-h-current);--label-line-delay: calc(var(--duration) * 2);--title-opacity: 1;--title-offset-y: 0;--title-delay: calc(var(--duration) * 3);--info-opacity: 1;--info-offset-y: 0;--info-delay: calc(var(--duration) * 4)}.cards:has(input:checked){transform:rotate(calc(var(--base-rotation) - (var(--index) * var(--arc) / var(--items))));--current-rotation: calc(var(--base-rotation) - (var(--index) * var(--arc) / var(--items)))}.cards:has(li:nth-child(1)>input:checked){--index: 0}.cards:has(li:nth-child(2)>input:checked){--index: 1}.cards:has(li:nth-child(3)>input:checked){--index: 2}.cards:has(li:nth-child(4)>input:checked){--index: 3}.cards:has(li:nth-child(5)>input:checked){--index: 4}.cards:has(li:nth-child(6)>input:checked){--index: 5}.cards:has(li:nth-child(7)>input:checked){--index: 6}.cards:has(li:nth-child(8)>input:checked){--index: 7}.cards:has(li:nth-child(9)>input:checked){--index: 8}.cards:has(li:nth-child(10)>input:checked){--index: 9}.cards:has(li:nth-child(11)>input:checked){--index: 10}.cards:has(li:nth-child(12)>input:checked){--index: 11}.cards:has(li:nth-child(13)>input:checked){--index: 12}.cards:has(li:nth-child(14)>input:checked){--index: 13}.cards:has(li:nth-child(15)>input:checked){--index: 14}.cards:has(li:nth-child(16)>input:checked){--index: 15}.cards:has(li:nth-child(17)>input:checked){--index: 16}.cards:has(li:nth-child(18)>input:checked){--index: 17}.cards:has(li:nth-child(19)>input:checked){--index: 18}.cards:has(li:nth-child(20)>input:checked){--index: 19}.cards:has(li:nth-child(21)>input:checked){--index: 20}.cards:has(li:nth-child(22)>input:checked){--index: 21}.cards:has(li:nth-child(23)>input:checked){--index: 22}.cards:has(li:nth-child(24)>input:checked){--index: 23}.cards:has(li:nth-child(25)>input:checked){--index: 24}.cards:has(li:nth-child(26)>input:checked){--index: 25}.cards:has(li:nth-child(27)>input:checked){--index: 26}.cards:has(li:nth-child(28)>input:checked){--index: 27}.cards:has(li:nth-child(29)>input:checked){--index: 28}.cards:has(li:nth-child(30)>input:checked){--index: 29}.cards:has(li:nth-child(31)>input:checked){--index: 30}.cards:has(li:nth-child(32)>input:checked){--index: 31}.cards:has(li:nth-child(33)>input:checked){--index: 32}.cards:has(li:nth-child(34)>input:checked){--index: 33}.cards:has(li:nth-child(35)>input:checked){--index: 34}.cards:has(li:nth-child(36)>input:checked){--index: 35}.cards:has(li:nth-child(37)>input:checked){--index: 36}.cards:has(li:nth-child(38)>input:checked){--index: 37}.cards:has(li:nth-child(39)>input:checked){--index: 38}.cards:has(li:nth-child(40)>input:checked){--index: 39}}.genius-loci{text-align:left;font-size:clamp(2.2rem,6vw,4rem);margin:2.5rem 0 1.5rem;letter-spacing:.1em;font-weight:400;color:#444}