:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--space-xxs:.25rem;--space-xs:.5rem;--space-sm:1rem;--space-md:1.5rem;--space-lg:2rem;--space-xl:3rem;--space-xxl:6rem;--hue:120;--saturation:61%;--lightness:34%}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}:root[color-mode=light] .light--hidden,:root[color-mode=dark] .dark--hidden{display:none}:root[color-mode=light]{--brand:hsl(var(--hue) var(--saturation) var(--lightness));--text1:hsl(var(--hue) var(--saturation) 10% );--text2:hsl(var(--hue) calc(var(--saturation) / 2) 30%);--bright-text1:hsl(var(--hue) 15% 85%);--bright-text2:hsl(var(--hue) 15% 65%);--surface1:hsl(var(--hue) calc(var(--saturation) / 6) 90% );--surface2:hsl(var(--hue) calc(var(--saturation) / 8) 99%);--surface3:hsl(var(--hue) calc(var(--saturation) / 8) 96%);--surface4:hsl(var(--hue) calc(var(--saturation) / 8) 85%)}:root[color-mode=dark]{--brand:hsl(var(--hue) calc(var(--saturation) / 2) var(--lightness));--text1:hsl(var(--hue) 15% 85%);--text2:hsl(var(--hue) 15% 65%);--bright-text1:hsl(var(--hue) 15% 85%);--bright-text2:hsl(var(--hue) 15% 65%);--surface1:hsl(var(--hue) 10% 10%);--surface2:hsl(var(--hue) 10% 15%);--surface3:hsl(var(--hue) 5% 20%);--surface4:hsl(var(--hue) 5% 25%)}*,:before,:after{box-sizing:border-box;margin:0}html{block-size:100%}body{background:var(--surface1);min-block-size:100%;color:var(--text1);font-family:system-ui,sans-serif}h1,h2,h3{font-weight:300;font-size:var(--space-lg)}small{color:var(--text2);line-height:1.5;font-size:var(--space-sm);font-weight:200}input{outline-offset:5px}main{gap:var(--space-md);padding:var(--space-xl);place-content:center;display:grid}section{gap:var(--space-md);display:grid}header{gap:var(--space-xxs);place-items:center;display:grid}.hero-icon{width:40vh;fill:var(--text2);color:var(--brand);-webkit-user-select:none;user-select:none}@media (min-width:540px){h1{font-size:var(--space-xl)}small{font-size:var(--space-md)}}.color-mode-toggle{top:var(--space-xs);right:var(--space-sm);border:1px solid var(--surface1);background-color:var(--surface2);border-radius:11px;flex-shrink:0;width:40px;height:22px;transition:border-color .25s;display:block;position:absolute}.color-mode-toggle:hover{border-color:var(--text1)}.color-mode-toggle:active{scale:.97}.color-mode-check{background-color:var(--brand);width:18px;height:18px;box-shadow:var(--shadow-1);border-radius:50%;transition:transform .25s;position:absolute;top:1px;left:1px}.color-mode-icon{border-radius:50%;width:18px;height:18px;display:block;position:relative;overflow:hidden}.color-mode-icon svg{width:12px;height:12px;fill:var(--bright-text1);stroke:var(--bright-text1);stroke-linecap:round;stroke-linejoin:round;stroke-width:3px;position:absolute;top:3px;left:3px}:root[color-mode=dark] .color-mode-icon svg{fill:var(--text1);transition:opacity .25s}.sun{opacity:1}.moon,:root[color-mode=dark] .sun{opacity:0}:root[color-mode=dark] .moon{opacity:1}:root[color-mode=dark] .color-mode-toggle .color-mode-check{transform:translate(18px)}