:root{color-scheme:dark light;--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%}:root[color-mode=light] .light--hidden{display:none}: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{min-block-size:100%;font-family:system-ui,sans-serif;background:var(--surface1);color:var(--text1)}h1,h2,h3{font-weight:300;font-size:var(--space-lg)}small{line-height:1.5;color:var(--text2);font-size:var(--space-sm);font-weight:200}input{outline-offset:5px}main{display:grid;gap:var(--space-md);place-content:center;padding:var(--space-xl)}section{display:grid;gap:var(--space-md)}header{display:grid;gap:var(--space-xxs);place-items:center}.hero-icon{width:40vh;fill:var(--text2);color:var(--brand);user-select:none}@media (min-width: 540px){h1{font-size:var(--space-xl)}small{font-size:var(--space-md)}}.color-mode-toggle{position:absolute;top:var(--space-xs);right:var(--space-sm);border-radius:11px;display:block;width:40px;height:22px;flex-shrink:0;border:1px solid var(--surface1);background-color:var(--surface2);transition:border-color .25s}.color-mode-toggle:hover{border-color:var(--text1)}.color-mode-toggle:active{scale:.97}.color-mode-check{position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background-color:var(--brand);box-shadow:var(--shadow-1);transition:transform .25s}.color-mode-icon{position:relative;display:block;width:18px;height:18px;border-radius:50%;overflow:hidden}.color-mode-icon svg{position:absolute;top:3px;left:3px;width:12px;height:12px;fill:var(--bright-text1);stroke:var(--bright-text1);stroke-linecap:round;stroke-linejoin:round;stroke-width:3px}:root[color-mode=dark] .color-mode-icon svg{fill:var(--text1);transition:opacity .25s}.sun{opacity:1}.moon{opacity:0}: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)}