@layer template,demo;@property --angle{syntax: "<angle>"; inherits: true; initial-value: 0deg;}@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{--arc: 270deg;--radius-x: 30vw;--radius-y: 30vw;--duration: .2s;--cards-container-padding: 1.25rem;--border-color: transparent;--year-offset-x: 2.2rem;--year-offset-y: 1.2rem;--travel: .45s;--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-offset-y: 20px;--info-width: min(calc(var(--radius-x) * 1.4), 360px);--info-offset-y: 20px;box-sizing:content-box;position:relative;margin:2rem auto 0;width:calc(var(--radius-x) * 2);height:calc(var(--radius-y) * 2);padding:var(--cards-container-padding);@media(min-width:800px){--radius-x: min(19vw, calc(var(--measure, 68ch) * .48));--radius-y: calc(var(--radius-x) * 1.45);--label-size: 28px;--label-dot-size: 11px;--label-line-h-current: 2.2rem}}@media(min-width:1200px){--label-size: 32px;--border-color: var(--label-color)}.cards{position:absolute;inset:var(--cards-container-padding);aspect-ratio:calc(var(--radius-x) / var(--radius-y));border-radius:50%;border:1px solid var(--border-color);list-style:none}.cards li{position:absolute;inset:0;margin:0;padding:0;display:grid;place-content:center;justify-items:center;pointer-events:none}.cards li>label{--angle: calc((var(--i) - var(--index, 0)) * var(--arc) / var(--items));position:absolute;inset:0;margin:auto;transform:translate(calc(var(--radius-x) * sin(var(--angle))),calc(-1 * var(--radius-y) * cos(var(--angle))));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:--angle var(--travel) ease-in-out,color var(--duration) ease-in-out}.cards li>label span{position:absolute;top:50%;left:50%;white-space:nowrap;transform:translate(-50%,-50%) translate(calc(var(--year-offset-x) * sin(var(--angle))),calc(-1 * var(--year-offset-y) * cos(var(--angle))))}.cards li>label:before{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;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:calc(50% + var(--label-dot-size));left:50%;translate:-50% 0;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{text-align:center}.cards>li>h2{margin:0 0 .75rem;opacity:var(--title-opacity,0);translate:0 var(--title-offset-y);transition:var(--duration) ease-in-out var(--title-delay,0ms)}.cards>li>p{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(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}}[data-theme=dark] .cards-container{--label-color: #a3a39d}.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}[data-theme=dark] .genius-loci{color:#ddd}