.themed-elements{--base: 240;--highlight: calc(var(--base) - 160)}.themed-elements main{background:hsl(var(--base), 20%, 20%);color:hsl(var(--base), 20%, 95%)}.themed-elements input:not([type=checkbox]):not([type=radio]):not([type=range]),.themed-elements textarea{border:none;border-radius:.4rem}.themed-elements input:not([type=checkbox]):not([type=radio]):not([type=range]):focus-within,.themed-elements textarea:focus-within{outline:2px solid hsl(var(--highlight), 50%, 50%)}.themed-elements button.button,.themed-elements a.button{--side-margin: 2.4rem;padding-block:1.2rem;padding-left:var(--side-margin);border-radius:80rem;font-weight:600;border:unset;cursor:pointer}.themed-elements button.button.primary,.themed-elements a.button.primary{background:hsl(var(--base), 100%, 65%);color:hsl(var(--base), 20%, 95%)}.themed-elements button.button.primary .icon,.themed-elements a.button.primary .icon{background-color:hsl(var(--base), 20%, 95%)}.themed-elements button.button.secondary,.themed-elements a.button.secondary{color:hsl(var(--base), 50%, 40%);background:hsl(var(--base), 20%, 95%)}.themed-elements button.button.secondary .icon,.themed-elements a.button.secondary .icon{background-color:hsl(var(--base), 50%, 40%)}.themed-elements button.button.cta,.themed-elements a.button.cta{background:hsl(var(--highlight), 80%, 60%);color:hsl(var(--base), 50%, 20%)}.themed-elements button.button.cta .icon,.themed-elements a.button.cta .icon{background-color:hsl(var(--base), 50%, 20%)}.themed-elements button.button .icon__wrapper,.themed-elements a.button .icon__wrapper{width:3.2rem;height:3.2rem;border:1px solid;border-radius:50%;margin-left:var(--side-margin);transform:translateX(calc(var(--side-margin) * -1));transition:transform .25s ease-in-out}.themed-elements button.button:hover .icon__wrapper,.themed-elements a.button:hover .icon__wrapper{transform:translateX(calc(var(--side-margin) / 2 * -1));transition:transform .25s ease-in-out}.themed-elements .ranges__wrapper{--slider-size: 3.2rem}.themed-elements .ranges__wrapper input{--outer-width: 1.6rem;--inner-width: 0.4rem;position:relative;isolation:isolate;border-radius:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;background-color:hsl(var(--base), 50%, 60%, 0.5);height:var(--inner-width);z-index:1}.themed-elements .ranges__wrapper input:active::-webkit-slider-thumb,.themed-elements .ranges__wrapper input:focus-within::-webkit-slider-thumb,.themed-elements .ranges__wrapper input:focus-visible::-webkit-slider-thumb{border-color:hsl(var(--highlight), 100%, 50%)}.themed-elements .ranges__wrapper input::-webkit-slider-thumb{--buffer: 0.4rem;--size: 1.6rem;-webkit-appearance:none;appearance:none;background-color:hsl(var(--base), 50%, 40%);border:2px solid hsl(var(--base), 50%, 90%);width:var(--size);height:var(--size);border-radius:.8rem;margin-top:calc(var(--buffer)/2*-1);margin-bottom:calc(var(--buffer)/2*-1);box-shadow:0 0 4px -2px #000}.themed-elements .ranges__wrapper input::-moz-range-thumb{--buffer: 0.4rem;-moz-appearance:none;appearance:none;width:.4rem;margin-top:calc(var(--buffer)/2*-1);margin-bottom:calc(var(--buffer)/2*-1)}.themed-elements input[type=checkbox]{--width: 4.8rem;--height: 3.2rem;--padding: 0.4rem;position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:grid;align-items:center;padding:var(--padding);width:var(--width);height:var(--height);background-color:hsl(var(--base), 5%, 80%);border-radius:8rem;box-shadow:inset 0 0 4px -2px;transition:background-color 1s ease-in-out;cursor:pointer}.themed-elements input[type=checkbox]::before{--size: calc(var(--height) - var(--padding) * 2);position:relative;display:block;content:"";width:var(--size);height:var(--size);background-color:hsl(var(--base), 5%, 60%);border-radius:50%;transform:translateX(calc(var(--width) - 3.2rem));transition:transform .25s ease-out;z-index:1}.themed-elements input[type=checkbox]:checked{background-color:hsl(var(--highlight), 50%, 60%);transition:background-color .5s ease-in-out}.themed-elements input[type=checkbox]:checked::before{background-color:hsl(var(--base), 100%, 60%);transform:translateX(0);transition:transform .25s ease-in}.themed-elements fieldset{border-color:hsl(var(--base), 100%, 80%, 0.5)}.themed-elements .radio__wrapper label{padding:.4rem;border-radius:.4rem}.themed-elements .radio__wrapper label:hover{background:hsl(var(--highlight), 100%, 60%, 0.25)}