*,*:before,*:after{margin:0;box-sizing:border-box}body{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",}:is(.theme,:root)[data-color-scheme][data-contrast]{background-color:var(--color-background);color:var(--color-text)}:is(:root,.theme)[data-color-scheme=light]{color-scheme:light}:is(:root,.theme)[data-color-scheme=dark]{color-scheme:dark}:is(:root,.theme)[data-color=neutral][data-color-scheme=light][data-contrast=standard]{--color-background: oklch(97% 0 0);--color-text: oklch(26.9% 0 0)}:is(:root,.theme)[data-color=neutral][data-color-scheme=light][data-contrast=high]{--color-background: oklch(97% 0 0);--color-text: oklch(14.5% 0 0)}:is(:root,.theme)[data-color=neutral][data-color-scheme=dark][data-contrast=standard]{--color-background: oklch(14.5% 0 0);--color-text: oklch(92.2% 0 0)}:is(:root,.theme)[data-color=neutral][data-color-scheme=dark][data-contrast=high]{--color-background: oklch(14.5% 0 0);--color-text: oklch(98.5% 0 0)}:is(:root,.theme)[data-color=red][data-color-scheme=light][data-contrast=standard]{--color-background: oklch(93.6% .032 17.717);--color-text: oklch(44.4% .177 26.899)}:is(:root,.theme)[data-color=red][data-color-scheme=light][data-contrast=high]{--color-background: oklch(93.6% .032 17.717);--color-text: oklch(25.8% .092 26.042)}:is(:root,.theme)[data-color=red][data-color-scheme=dark][data-contrast=standard]{--color-background: oklch(25.8% .092 26.042);--color-text: oklch(88.5% .062 18.334)}:is(:root,.theme)[data-color=red][data-color-scheme=dark][data-contrast=high]{--color-background: oklch(25.8% .092 26.042);--color-text: oklch(97.1% .013 17.38)}:is(:root,.theme)[data-color=orange][data-color-scheme=light][data-contrast=standard]{--color-background: oklch(95.4% .038 75.164);--color-text: oklch(47% .157 37.304)}:is(:root,.theme)[data-color=orange][data-color-scheme=light][data-contrast=high]{--color-background: oklch(95.4% .038 75.164);--color-text: oklch(26.6% .079 36.259)}:is(:root,.theme)[data-color=orange][data-color-scheme=dark][data-contrast=standard]{--color-background: oklch(26.6% .079 36.259);--color-text: oklch(90.1% .076 70.697)}:is(:root,.theme)[data-color=orange][data-color-scheme=dark][data-contrast=high]{--color-background: oklch(26.6% .079 36.259);--color-text: oklch(98% .016 73.684)}:is(:root,.theme)[data-color=green][data-color-scheme=light][data-contrast=standard]{--color-background: oklch(96.2% .044 156.743);--color-text: oklch(44.8% .119 151.328)}:is(:root,.theme)[data-color=green][data-color-scheme=light][data-contrast=high]{--color-background: oklch(96.2% .044 156.743);--color-text: oklch(26.6% .065 152.934)}:is(:root,.theme)[data-color=green][data-color-scheme=dark][data-contrast=standard]{--color-background: oklch(26.6% .065 152.934);--color-text: oklch(92.5% .084 155.995)}:is(:root,.theme)[data-color=green][data-color-scheme=dark][data-contrast=high]{--color-background: oklch(26.6% .065 152.934);--color-text: oklch(98.2% .018 155.826)}:is(:root,.theme)[data-color=blue][data-color-scheme=light][data-contrast=standard]{--color-background: oklch(93.2% .032 255.585);--color-text: oklch(42.4% .199 265.638)}:is(:root,.theme)[data-color=blue][data-color-scheme=light][data-contrast=high]{--color-background: oklch(93.2% .032 255.585);--color-text: oklch(28.2% .091 267.935)}:is(:root,.theme)[data-color=blue][data-color-scheme=dark][data-contrast=standard]{--color-background: oklch(28.2% .091 267.935);--color-text: oklch(88.2% .059 254.128)}:is(:root,.theme)[data-color=blue][data-color-scheme=dark][data-contrast=high]{--color-background: oklch(28.2% .091 267.935);--color-text: oklch(97% .014 254.604)}:is(:root,.theme)[data-color=purple][data-color-scheme=light][data-contrast=standard]{--color-background: oklch(94.6% .033 307.174);--color-text: oklch(43.8% .218 303.724)}:is(:root,.theme)[data-color=purple][data-color-scheme=light][data-contrast=high]{--color-background: oklch(94.6% .033 307.174);--color-text: oklch(29.1% .149 302.717)}:is(:root,.theme)[data-color=purple][data-color-scheme=dark][data-contrast=standard]{--color-background: oklch(29.1% .149 302.717);--color-text: oklch(90.2% .063 306.703)}:is(:root,.theme)[data-color=purple][data-color-scheme=dark][data-contrast=high]{--color-background: oklch(29.1% .149 302.717);--color-text: oklch(97.7% .014 308.299)}:is(:root,.theme)[data-color=pink][data-color-scheme=light][data-contrast=standard]{--color-background: oklch(94.8% .028 342.258);--color-text: oklch(45.9% .187 3.815)}:is(:root,.theme)[data-color=pink][data-color-scheme=light][data-contrast=high]{--color-background: oklch(94.8% .028 342.258);--color-text: oklch(28.4% .109 3.907)}:is(:root,.theme)[data-color=pink][data-color-scheme=dark][data-contrast=standard]{--color-background: oklch(28.4% .109 3.907);--color-text: oklch(89.9% .061 343.231)}:is(:root,.theme)[data-color=pink][data-color-scheme=dark][data-contrast=high]{--color-background: oklch(28.4% .109 3.907);--color-text: oklch(97.1% .014 343.198)}:is(:root,.theme)[data-spacing="80%"]{--spacing: .8}:is(:root,.theme)[data-spacing="90%"]{--spacing: .9}:is(:root,.theme)[data-spacing="100%"]{--spacing: 1}:is(:root,.theme)[data-spacing="110%"]{--spacing: 1.1}:is(:root,.theme)[data-spacing="120%"]{--spacing: 1.2}:is(:root,.theme)[data-font-size="80%"]{--font-size: .8}:is(:root,.theme)[data-font-size="90%"]{--font-size: .9}:is(:root,.theme)[data-font-size="100%"]{--font-size: 1}:is(:root,.theme)[data-font-size="110%"]{--font-size: 1.1}:is(:root,.theme)[data-font-size="120%"]{--font-size: 1.2}:focus-visible{outline:2px solid var(--color-text);outline-offset:2px}main{align-items:center;display:flex;flex-direction:column;min-block-size:100vh;padding:4rem 1rem}h1{color:var(--color-text);font-size:2rem;font-weight:600;text-align:center;margin-bottom:.25rem}h2{color:var(--color-text);font-size:1.125rem;font-weight:400;text-align:center;margin-bottom:.25rem}a{color:var(--color-text);font-size:1.125rem;text-align:center;margin-bottom:2rem}.theme-select{align-items:center;display:grid;row-gap:calc(var(--spacing) * 2rem);column-gap:1rem;grid-template-columns:9rem 1fr;grid-auto-rows:2.5rem;& label{color:var(--color-text);font-size:calc(var(--font-size) * 1rem);font-weight:600}select{background-color:var(--color-background);block-size:2.5rem;border:1px solid var(--color-text);border-radius:.25rem;color:var(--color-text);font-size:calc(var(--font-size) * 1rem);inline-size:8rem;padding:0 .5rem}}