:root{--color-blue: oklch(45% 50% 264deg);--color-blue-2: oklch(55% 50% 264deg);--color-red: oklch(50% 55% 31deg);--color-gray-50: oklch(98.42% .0034 247.86deg);--color-gray-100: oklch(93.48% .48% 264deg);--color-gray-200: oklch(90.75% .72% 264deg);--color-gray-300: oklch(85.73% 1.45% 264deg);--color-gray-400: oklch(73.54% 3.04% 264deg);--color-gray-500: oklch(63.21% 3.75% 264deg);--color-gray-600: oklch(47.49% 4.69% 264deg);--color-gray-700: oklch(37.57% 4.62% 264deg);--color-gray-800: oklch(29.59% 4.25% 264deg);--color-gray-900: oklch(25.48% 4.5% 264deg);--color-gray-950: oklch(21.37% 4.75% 264deg);--color-primary: var(--color-gray-900);--color-background: var(--color-gray-50);--color-base: var(--color-gray-100);--color-border: var(--color-gray-200);--color-accent: var(--color-blue);--color-accent-variant: var(--color-blue-2)}@media (prefers-color-scheme: dark){:root{--color-blue: oklch(69% 50% 264deg);--color-blue-2: oklch(59% 50% 264deg);--color-red: oklch(80% 55% 31deg);--color-gray-50: oklch(17% 1% 264deg);--color-gray-100: oklch(24.15% 2.3% 264deg);--color-gray-200: oklch(27.8% 2.6% 264deg);--color-gray-300: oklch(31.4% 2.6% 264deg);--color-gray-400: oklch(41.2% 3.2% 264deg);--color-gray-500: oklch(56.4% 3.6% 264deg);--color-gray-600: oklch(72.2% 3.6% 264deg);--color-gray-700: oklch(83.8% 4.1% 264deg);--color-gray-800: oklch(85.55% 3.48% 264deg);--color-gray-900: oklch(88.3% 2.2% 264deg);--color-gray-950: oklch(86.43% 1.73% 264deg)}}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:var(--color-primary);background-color:var(--color-base);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:var(--color-accent);text-decoration:inherit}a:hover{color:var(--color-accent-variant)}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;overflow:hidden}h1{font-size:3.2em;line-height:1.1}#root{width:100vw;height:100vh;display:grid;place-items:center}.panel{padding:.5rem;border-radius:.5rem;background-color:var(--color-background);border:1px solid var(--color-border)}.button{cursor:pointer;box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:2.5rem;padding:0 .875rem;margin:0;outline:0;border:1px solid var(--color-border);border-radius:.375rem;background-color:var(--color-background);font-family:inherit;font-size:1rem;font-weight:500;line-height:1.5rem;-webkit-user-select:none;user-select:none}.button[data-color=red]{color:var(--color-red)}@media (hover: hover){.button:hover{background-color:var(--color-gray-100)}}.button:active{background-color:var(--color-gray-100)}.button:focus-visible{outline:2px solid var(--color-accent);outline-offset:-1px}.backdrop{position:fixed;min-height:100dvh;inset:0;background-color:#000;opacity:.2;transition:opacity .15s}@supports (-webkit-touch-callout: none){.backdrop{position:absolute}}@media (prefers-color-scheme: dark){.backdrop{opacity:.7}}.backdrop[data-starting-style],.backdrop[data-ending-style]{opacity:0}.popup{box-sizing:border-box;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);max-width:calc(100vw - 3rem);max-height:calc(100vh - 3rem);overflow-y:auto;margin-top:-2rem;padding:1.5rem;border-radius:.5rem;outline:1px solid var(--color-border);background-color:var(--color-background);transition:all .15s}@media (prefers-color-scheme: dark){.popup{outline:1px solid var(--color-gray-300)}}.popup[data-starting-style],.popup[data-ending-style]{opacity:0;transform:translate(-50%,-50%) scale(.9)}