:root{color-scheme:dark light;--speed:250ms;--hue-brand:217;--info-hue:222;--success-hue:120;--warning-hue:40;--failure-hue:2;--accent-offset:30;--surface-shadow:var(--hue) 10% 20%;--shadow-strength:0.02;--saturation-bias:0;--saturation-value:0.5;--saturation:calc(var(--saturation-value) + var(--saturation-bias));--lightness-bias:0;--lightness-value:0.5;--lightness:calc(var(--lightness-value) + var(--lightness-bias));--hue:var(--hue-brand);--light-saturation:0.66;--dark-saturation:calc(var(--light-saturation) * 0.6);--light-lightness:0.57;--dark-lightness:calc(var(--light-saturation) * 0.75);--brand-h:var(--hue);--brand-s:calc(100% * var(--saturation));--brand-l:calc(100% * var(--lightness));--brand-hsl:var(--brand-h) var(--brand-s) var(--brand-l);--brand:hsl(var(--brand-h) var(--brand-s) var(--brand-l));--info-saturation-bias:0;--info-lightness-bias:0;--info-h:var(--info-hue);--info-s:calc(100% * (var(--saturation) + var(--info-saturation-bias)));--info-l:calc(100% * (var(--lightness) + var(--info-lightness-bias)));--info:hsl(var(--info-h) var(--info-s) var(--info-l));--success-saturation-bias:0;--success-lightness-bias:0;--success-h:var(--success-hue);--success-s:calc(100% * (var(--saturation) + var(--success-saturation-bias)));--success-l:calc(100% * (var(--lightness) + var(--success-lightness-bias)));--success-hsl:var(--success-h) var(--success-s) var(--success-l);--success:hsl(var(--success-h) var(--success-s) var(--success-l));--warning-saturation-bias:0;--warning-lightness-bias:0;--warning-h:var(--warning-hue);--warning-s:calc(100% * (var(--saturation) + var(--warning-saturation-bias)));--warning-l:calc(100% * (var(--lightness) + var(--warning-lightness-bias)));--warning-hsl:var(--warning-h) var(--warning-s) var(--warning-l);--warning:hsl(var(--warning-h) var(--warning-s) var(--warning-l));--failure-saturation-bias:0;--failure-lightness-bias:0;--failure-h:var(--failure-hue);--failure-s:calc(100% * (var(--saturation) + var(--failure-saturation-bias)));--failure-l:calc(100% * (var(--lightness) + var(--failure-lightness-bias)));--failure-hsl:var(--failure-h) var(--failure-s) var(--failure-l);--failure:hsl(var(--failure-h) var(--failure-s) var(--failure-l));--primary-hue:calc(var(--hue) + 180 + var(--accent-offset));--primary-fg-hsl:calc(var(--primary-hue) + 180) calc(100% * var(--saturation)) calc(100% * var(--lightness));--primary-bg-hsl:var(--primary-hue) calc(100% * var(--saturation)) calc(100% * var(--lightness));--primary-fg:hsl(var(--primary-fg-hsl));--primary-bg:hsl(var(--primary-bg-hsl));--secondary-hue:calc(var(--hue) + 180 - var(--accent-offset));--secondary-fg-hsl:calc(var(--secondary-hue) + 180) calc(100% * var(--saturation)) calc(100% * var(--lightness));--secondary-bg-hsl:var(--secondary-hue) calc(100% * var(--saturation)) calc(100% * var(--lightness));--secondary-fg:hsl(var(--secondary-fg-hsl));--secondary-bg:hsl(var(--secondary-bg-hsl));--text-saturation:0.2;--text-bias:0;--light-text-lightness:0.1;--light-text-factor:1;--dark-text-lightness:0.9;--dark-text-factor:-1;--text1-hsl:var(--hue) calc(100% * var(--text-saturation)) calc(100% * (var(--text-lightness) + (0 * var(--text-factor) * 0.2) - (var(--text-factor) * var(--text-bias))));--text2-hsl:var(--hue) calc(100% * (var(--text-saturation) / 2)) calc(100% * (var(--text-lightness) + (1 * var(--text-factor) * 0.2) - (var(--text-factor) * var(--text-bias))));--text1:hsl(var(--text1-hsl));--text2:hsl(var(--text2-hsl));--surfaces-saturation:0.1;--surfaces-bias:0;--light-surfaces-lightness:0.98;--light-surfaces-factor:1;--dark-surfaces-lightness:0.12;--dark-surfaces-factor:-1;--surface1-hsl:var(--hue) calc(100% * var(--surfaces-saturation)) calc(100% * (var(--surfaces-lightness) - (var(--surfaces-factor) * 0) + (var(--surfaces-factor) * var(--surfaces-bias))));--surface2-hsl:var(--hue) calc(100% * var(--surfaces-saturation)) calc(100% * (var(--surfaces-lightness) - (var(--surfaces-factor) * 0.05) + (var(--surfaces-factor) * var(--surfaces-bias))));--surface3-hsl:var(--hue) calc(100% * var(--surfaces-saturation)) calc(100% * (var(--surfaces-lightness) - (var(--surfaces-factor) * 0.1) + (var(--surfaces-factor) * var(--surfaces-bias))));--surface4-hsl:var(--hue) calc(100% * var(--surfaces-saturation)) calc(100% * (var(--surfaces-lightness) - (var(--surfaces-factor) * 0.15) + (var(--surfaces-factor) * var(--surfaces-bias))));--surface1:hsl(var(--surface1-hsl));--surface2:hsl(var(--surface2-hsl));--surface3:hsl(var(--surface3-hsl));--surface4:hsl(var(--surface4-hsl))}@media screen and (prefers-color-scheme:light){:root{color-scheme:light;--saturation-value:var(--light-saturation);--lightness-value:var(--light-saturation);--text-factor:var(--light-text-factor);--text-lightness:var(--light-text-lightness);--surfaces-factor:var(--light-surfaces-factor);--surfaces-lightness:var(--light-surfaces-lightness);--surface-shadow:var(--hue) 10% 20%;--shadow-strength:0.02}}@media screen and (prefers-color-scheme:dark){:root{color-scheme:dark;--saturation-value:var(--dark-saturation);--lightness-value:var(--dark-saturation);--text-factor:var(--dark-text-factor);--text-lightness:var(--dark-text-lightness);--surfaces-factor:var(--dark-surfaces-factor);--surfaces-lightness:var(--dark-surfaces-lightness);--surface-shadow:var(--hue) 50% 3%;--shadow-strength:0.8}}html[color-scheme=light]{color-scheme:light;--saturation-value:var(--light-saturation);--lightness-value:var(--light-saturation);--text-factor:var(--light-text-factor);--text-lightness:var(--light-text-lightness);--surfaces-factor:var(--light-surfaces-factor);--surfaces-lightness:var(--light-surfaces-lightness);--surface-shadow:var(--hue) 10% 20%;--shadow-strength:0.02}html[color-scheme=dark]{color-scheme:dark;--saturation-value:var(--dark-saturation);--lightness-value:var(--dark-saturation);--text-factor:var(--dark-text-factor);--text-lightness:var(--dark-text-lightness);--surfaces-factor:var(--dark-surfaces-factor);--surfaces-lightness:var(--dark-surfaces-lightness);--surface-shadow:var(--hue) 50% 3%;--shadow-strength:0.8}html[color-scheme=dark] .rad-shadow2{box-shadow:0 0 0 hsla(var(--surface4-hsl)/.2),0 0 0 hsla(var(--surface4-hsl)/.2),0 0 0 hsla(var(--surface4-hsl)/.2),0 0 0 hsla(var(--surface4-hsl)/.2),0 0 0 hsla(var(--surface4-hsl)/.2)}@media screen and (prefers-contrast:more){:root{--text-bias:1;--surfaces-bias:1;--saturation-bias:1}}@media screen and (prefers-contrast:less){:root{--text-bias:-0.1;--surfaces-bias:-0.05;--saturation-bias:-0.05}}html[contrast=more]{--text-bias:1;--surfaces-bias:1;--saturation-bias:1}html[contrast=less]{--text-bias:-0.1;--surfaces-bias:-0.05;--saturation-bias:-0.05}*{box-sizing:border-box;margin:0}html{block-size:100%;background-color:var(--surface1);scroll-behavior:smooth;color:var(--text1);scrollbar-gutter:stable both-edges;overflow-y:auto}html ::-webkit-scrollbar{width:.4rem;height:.4rem}html ::-webkit-scrollbar-track{background-color:var(--surface3)}html ::-webkit-scrollbar-thumb{background-color:var(--text2);border-radius:8px}body{font-weight:300;font-feature-settings:normal,"kern","liga","clig off";font-kerning:normal;letter-spacing:.75px;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:grayscale;font-variant-ligatures:no-common-ligatures;font-smooth:always;font-size:13px;line-height:1.5;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}@media(min-width:520px){body{letter-spacing:calc(.75px + -.25 * (100vw - 520px) / 846)}}@media(min-width:1366px){body{letter-spacing:.5px}}a{text-decoration:none;color:var(--text1)}a:active{background-color:transparent}a:visited{background-color:#ccc}a[href^="tel:"]{color:orange;text-decoration:none}blockquote p{padding:15px;background:var(--surface2);border-radius:5px}blockquote p:before{content:"“"}blockquote p:after{content:"”"}h1,h2,h3,h4,h5{overflow-wrap:break-word}h1{font-size:35px;font-size:calc(31px + (35 - 31) * ((100vw - 576px) / (1600 - 576)))}@media screen and (max-width:576px){h1{font-size:31px}}@media screen and (min-width:1600px){h1{font-size:35px}}h2{font-size:29px;font-size:calc(27px + (29 - 27) * ((100vw - 576px) / (1600 - 576)))}@media screen and (max-width:576px){h2{font-size:27px}}@media screen and (min-width:1600px){h2{font-size:29px}}h3{font-size:25px;font-size:calc(21px + (25 - 21) * ((100vw - 576px) / (1600 - 576)))}@media screen and (max-width:576px){h3{font-size:21px}}@media screen and (min-width:1600px){h3{font-size:25px}}h4{font-size:23px;font-size:calc(19px + (23 - 19) * ((100vw - 576px) / (1600 - 576)))}@media screen and (max-width:576px){h4{font-size:19px}}@media screen and (min-width:1600px){h4{font-size:23px}}h5{font-size:25px;font-size:calc(15px + (25 - 15) * ((100vw - 576px) / (1600 - 576)))}@media screen and (max-width:576px){h5{font-size:15px}}@media screen and (min-width:1600px){h5{font-size:25px}}h6{font-size:19px;font-size:calc(14px + (19 - 14) * ((100vw - 576px) / (1600 - 576)))}@media screen and (max-width:576px){h6{font-size:14px}}@media screen and (min-width:1600px){h6{font-size:19px}}input{font-size:15px;font-size:calc(13px + (15 - 13) * ((100vw - 576px) / (1600 - 576)))}@media screen and (max-width:576px){input{font-size:13px}}@media screen and (min-width:1600px){input{font-size:15px}}label{font-size:15px;font-size:calc(13px + (15 - 13) * ((100vw - 576px) / (1600 - 576)))}@media screen and (max-width:576px){label{font-size:13px}}@media screen and (min-width:1600px){label{font-size:15px}}li{font-size:17px;font-size:calc(13px + (17 - 13) * ((100vw - 576px) / (1600 - 576)))}@media screen and (max-width:576px){li{font-size:13px}}@media screen and (min-width:1600px){li{font-size:17px}}nav>ul{display:flex}p{font-size:17px;font-size:calc(13px + (17 - 13) * ((100vw - 576px) / (1600 - 576)))}@media screen and (max-width:576px){p{font-size:13px}}@media screen and (min-width:1600px){p{font-size:17px}}textarea{font-size:17px;font-size:calc(13px + (17 - 13) * ((100vw - 576px) / (1600 - 576)))}@media screen and (max-width:576px){textarea{font-size:13px}}@media screen and (min-width:1600px){textarea{font-size:17px}}pre{font-size:17px;font-size:calc(13px + (17 - 13) * ((100vw - 576px) / (1600 - 576)))}@media screen and (max-width:576px){pre{font-size:13px}}@media screen and (min-width:1600px){pre{font-size:17px}}span{font-size:17px;font-size:calc(13px + (17 - 13) * ((100vw - 576px) / (1600 - 576)))}@media screen and (max-width:576px){span{font-size:13px}}@media screen and (min-width:1600px){span{font-size:17px}}.small{font-size:13;font-size:calc(11px + (13 - 11) * ((100vw - 576px) / (1600 - 576)))}@media screen and (max-width:576px){.small{font-size:11}}@media screen and (min-width:1600px){.small{font-size:13}}ul{list-style:none;padding:0}.surface-samples>*{border-radius:1rem;display:grid;place-content:center;font-size:3rem;font-weight:200;border:1px solid hsl(var(--hue) 10% calc(50% - 100% * var(--text-factor) * var(--text-bias))/calc(15% + 100% * var(--text-bias)))}.info{background-color:var(--info)}.info,.success{color:var(--text1)}.success{background-color:var(--success)}.warning{background-color:var(--warning)}.failure,.warning{color:var(--text1)}.failure{background-color:var(--failure)}.brand{color:var(--text1);background-color:var(--brand)}.primary{color:var(--primary-fg);background-color:var(--primary-bg)}.secondary{color:var(--secondary-fg);background-color:var(--secondary-bg)}.surface1{background-color:var(--surface1);color:var(--text2)}.surface2{background-color:var(--surface2);color:var(--text2)}.surface3{background-color:var(--surface3);color:var(--text1)}.surface4{background-color:var(--surface4)}.surface4,.text1{color:var(--text1)}.text2{color:var(--text2)}.rad-shadow{box-shadow:0 2.8px 2.2px hsl(var(--surface-shadow)/calc(var(--shadow-strength) + .03)),0 6.7px 5.3px hsl(var(--surface-shadow)/calc(var(--shadow-strength) + .01)),0 12.5px 10px hsl(var(--surface-shadow)/calc(var(--shadow-strength) + .02)),0 22.3px 17.9px hsl(var(--surface-shadow)/calc(var(--shadow-strength) + .02)),0 41.8px 33.4px hsl(var(--surface-shadow)/calc(var(--shadow-strength) + .03)),0 100px 80px hsl(var(--surface-shadow)/var(--shadow-strength))}.rad-shadow2{box-shadow:0 1px 1px hsla(var(--surface4-hsl)/.2),0 1px 1px hsla(var(--surface4-hsl)/.2),0 2px 2px hsla(var(--surface4-hsl)/.2),0 3px 3px hsla(var(--surface4-hsl)/.2),0 4px 4px hsla(var(--surface4-hsl)/.2)}#hue{background:linear-gradient(to right,var(--brand) 0,var(--brand) 50%,var(--text2) 50%,var(--text2) 100%);border:1px solid var(--text2);border-radius:8px;height:7px;width:356px;outline:none;transition:background var(--speed) ease-in;-webkit-appearance:none;-moz-appearance:none;appearance:none}.playground{margin:1rem .5rem}.hljs{background:var(--surface2)!important;border-radius:8px}.visuallyhidden:not(:focus):not(:active){border:0;padding:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.example .title{text-align:center;margin-top:3rem;margin-bottom:2rem}.example .container{width:100%;min-height:100vh;padding-left:1rem;padding-right:1rem;margin-right:auto;margin-left:auto}@media(min-width:24rem){.example .container{max-width:24em}}@media(min-width:36rem){.example .container{max-width:36rem}}@media(min-width:48rem){.example .container{max-width:48rem}}@media(min-width:70rem){.example .container{max-width:70rem}}.example .inputContainer{position:relative;height:3rem;margin:0 0 2rem}.example input{position:absolute;top:0;left:0;font-size:inherit;font-family:inherit;background:none;width:100%;border-radius:.25em;border:1px solid #dde0e3;outline:0 solid #6f9be2;padding:.8em}.example input:hover{border-color:#cfd3d8}.example input:focus{outline:1px solid #6f9be2;outline-offset:4px}.example input:focus~label,.example input:not(:placeholder-shown):not(:focus)~label{top:-.8rem;font-size:.8rem}.example label{-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1;position:absolute;left:1rem;top:.6rem;cursor:text;transition:top .2s ease-in,left .2s ease-in,font-size .2s ease-in;padding:0 .5rem;background:var(--surface1)}.example .ListImageContainer{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:2rem;gap:2rem;margin-bottom:3rem;justify-items:center}@media(min-width:48rem){.example .ListImageContainer{grid-template-columns:repeat(6,1fr)}}.example .imageWrapper{text-align:center}.example img{height:4rem}.example button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;text-decoration:none;border:none;font-size:1em;background-color:transparent;font-style:normal;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga","clig off";font-variant-ligatures:no-common-ligatures;font-smooth:always;line-height:1.5}kbd{background-color:#eee;border-radius:3px;border:1px solid #b4b4b4;box-shadow:0 1px 1px rgba(0,0,0,.2),inset 0 2px 0 0 hsla(0,0%,100%,.7);color:#333;display:inline-block;font-size:.85em;font-weight:700;line-height:1;padding:2px 4px;white-space:nowrap}del,ins{display:block;text-decoration:none;position:relative}del>span:first-child,ins>span:first-child{margin-left:1.5rem}del{background-color:hsla(var(--failure-hsl)/.2)}ins{background-color:hsla(var(--success-hsl)/.2)}del:before,ins:before{position:absolute;left:.5rem}del:before{content:"−"}ins:before{content:"+"}