@layer reboot{*,:before,:after{box-sizing:border-box}*{inset:unset;margin:0;padding:0}:root{font-size:120%;font-weight:400;line-height:1.5}html{-moz-text-size-adjust:none;text-size-adjust:none;-webkit-font-smoothing:antialiased;block-size:100%}body{color:#212529;-webkit-tap-highlight-color:#0000;background-color:#fff;min-block-size:100%;font-family:ui-rounded,Hiragino Maru Gothic ProN,Quicksand,Comfortaa,Manjari,Arial Rounded MT,Arial Rounded MT Bold,Calibri,source-sans-pro,sans-serif}input,button,textarea,select{font:inherit}button{line-height:inherit;border-style:none;border-radius:0}:disabled{opacity:.8;cursor:not-allowed}:focus-visible{outline-offset:.2rem}}:root{--border-color:black;--clr-primary:#2d471e;--fg-color:black;--bg-color:white;--clr-body:#eee;--brand-color:#2d471e;--accent-color:var(--brand-color);--clr-cta:hsl(from var(--brand-color) h calc(s - 30) calc(l + 10));--border-radius:.5rem}[data-theme=dark]{--clr-primary:#558639;--border-color:#dee2e6;--fg-color:white;--bg-color:#2e343a;--accent-color:#84e74b;--clr-body:#212529}body{background-color:var(--clr-body);color:var(--fg-color);--border-std:1px solid var(--border-color)}input,select,button,optgroup,textarea{border:var(--border-std);height:2rem;color:var(--fg-color);background-color:var(--bg-color);accent-color:var(--accent-color);background-color:var(--bg-color);border-radius:.5rem;margin:0 .25rem}p{text-wrap:pretty}.harmony{border:var(--border-std);border-radius:var(--border-radius);background-color:var(--bg-color);box-shadow:5px -5px 5px #a5a5a5}.harmony__title{margin-block-end:1rem;margin-inline-start:.5em}.harmony__body{margin-block-end:1rem;padding-inline:2vw}.harmony__description{margin-bottom:1rem}.main{margin-left:clamp(1rem,5vw,5rem);margin-right:clamp(1rem,5vw,5rem)}:root{--swatch-height:5rem;--swatch-width:3rem}.app-description{margin-block:2rem;font-size:1.25em}.app__grid{grid-template-columns:1fr 1fr;gap:1rem;margin-block:2rem 1rem;display:grid}@media (max-width:860px){.app__grid{grid-template-columns:1fr}}.footer{text-align:center;background-color:var(--clr-primary);color:#fff;margin-block:2rem;padding-block:1rem}.footer a{color:#fff}d-none{display:none}.hero-header{background-color:var(--brand-color);color:#fff;grid-template-columns:1fr 3fr 1fr;justify-content:space-between;align-items:center;padding-inline:5vw;display:grid}.hero-header__title{text-align:center;margin:0;font-size:1.75rem}.theme-switcher{cursor:pointer;justify-self:end;margin-left:auto;margin-right:.5rem}.theme-switcher__btn{anchor-name:--theme-switcher-anchor;vertical-align:text-top;border-radius:var(--border-radius);background-color:var(--bg-color);height:2rem;color:var(--fg-color);border-color:var(--border-color);border-style:solid;border-width:1px;align-content:center;padding:0 .5rem;display:inline-block}.theme-switcher__btn span{margin-inline-start:.5rem}@media screen and (max-width:600px){.theme-switcher__btn span{display:none}}.theme-switcher__btn:hover,.theme-switcher__btn:focus-visible{--bg-hover-color:oklab(from var(--brand-color) calc(l + .4) a b);background-color:var(--bg-hover-color);color:contrast(var(--bg-hover-color))}.theme-switcher__menu{position-anchor:--theme-switcher-anchor;margin:unset;inset:unset;top:anchor(bottom);right:anchor(right);background-color:var(--bg-color);color:var(--fg-color);border-radius:var(--border-radius);border-style:solid;border-width:1px;border-color:var(--color-border);padding:0}.theme-switcher__menu li{margin:0;list-style:none}.theme-switcher__menu li:hover,.theme-switcher__menu li:focus-visible{--bg-hover-color:oklab(from var(--brand-color) calc(l + .4) a b);background-color:var(--bg-hover-color);color:contrast(var(--bg-hover-color))}.theme-switcher__menu button{background-color:inherit;color:inherit;border-style:none}.theme-switcher__menu-item-label{margin-inline-start:.5rem}.theme-switcher__icon{vertical-align:middle;color:var(--fg-color);margin-inline-end:.25rem}.base-color{background-color:var(--bg-color);border:3px solid var(--clr-cta);border-radius:var(--border-radius);box-shadow:5px -5px 5px #a5a5a5}.base-color__title{background-color:hsl(from var(--clr-cta) h s calc(l + 20));border-radius:.3rem .3rem 0 0;margin-block-end:1rem;padding-inline-start:.5em}.base-color__body{margin-block-end:1rem;padding-inline:2vw}.base-color__description{margin-bottom:1rem}.base-color__grid{grid-template-columns:var(--swatch-width) 10em;align-items:center;column-gap:1rem;margin-block-end:1lh;display:grid}.base-color__swatch{width:var(--swatch-width);height:calc(var(--swatch-height) - 2px);border-style:solid;border-width:2px;border-color:var(--color-border);border-radius:10%}.base-color__input{flex-direction:column;display:flex}.base-color__input input{border:3px solid var(--clr-cta);padding:.5rem}.base-color__input label{padding-inline-start:.25em}.base-color__error{color:red;height:2lh;font-size:.75em;font-style:italic}.color-swatch{anchor-name:--swatch-anchor;anchor-scope:--swatch-anchor}.color-swatch__info{position-anchor:--swatch-anchor;top:calc(anchor(bottom) - 1em);right:calc(anchor(right) - 3em);background-color:var(--bg-color);color:var(--fg-color);border-radius:var(--border-radius);border-style:solid;border-width:1px;border-color:var(--color-border);padding:.25em .5em}.color-swatch__info p{-webkit-user-select:all;user-select:all}.color-swatch__info:popover-open{grid-template-columns:1fr 2fr;align-items:center;column-gap:.5em;display:grid}.color-swatch__color{text-align:left;align-self:start}.swatch-group__grid{grid-template-columns:repeat(auto-fit, var(--swatch-width));align-items:center;display:grid}.swatch-group__swatch{width:var(--swatch-width);height:calc(var(--swatch-height) - 2px);border-style:solid;border-width:2px;border-color:var(--color-border);border-radius:10%}.swatch-group__label{text-align:center;height:1lh}.SliderRoot{align-items:center;width:clamp(200px,20vw,600px);height:2em;display:flex;position:relative}.SliderRoot[data-orientation=vertical]{flex-direction:column;width:20px;height:100px}.SliderTrack{background-color:gray;flex-grow:1;height:3px;position:relative}.SliderTrack[data-orientation=vertical]{width:3px}.SliderRange{background-color:#000;position:absolute}.SliderRange[data-orientation=vertical]{width:100%}.SliderThumb{background-color:var(--clr-primary);cursor:pointer;border-radius:50%;width:20px;height:20px;display:block}.SliderLabel{margin-block:1em;display:block}