:root{--color-text:#1a181b;--color-nuance-light:#ebe8ee;--color-nuance-dark:#cdc7d1;--color-accent:#c793ec}*,:before,:after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.page{--font-family-basic:"Century Gothic","CenturyGothic","AppleGothic",sans-serif;--font-family-mono:"Lucida Console","Monaco",monospace;font-family:var(--font-family-basic)}.page__body{border:0;grid-template-rows:1fr auto;grid-template-columns:1fr;justify-content:center;align-items:center;gap:2.4rem;min-height:100dvh;margin:0;padding-block:3.6rem;display:grid}.page__main{width:100%}.page__title{margin-top:0;margin-bottom:1.2rem}.container{flex-direction:column;align-items:center;width:100%;max-width:560px;margin:0 auto;padding-left:min(5%,2rem);padding-right:min(5%,2rem);display:flex}@supports (width:1rem){.container{max-width:35rem}}@supports (width:1ch){.container{max-width:70ch}}.title{text-align:center;color:var(--color-text);font-size:2rem;font-weight:500}.form{border:.1rem solid var(--color-nuance-dark);border-radius:.6rem;flex-wrap:wrap;align-items:center;gap:.6rem;width:100%;padding:1rem;font-size:1rem;display:flex}.form__text{color:var(--color-text);margin-block:0;font-size:1.2rem}.form__text:empty{display:none}.form__input-wrapper{grid-template-columns:1fr 1fr;align-items:center;gap:.6rem;width:100%;display:grid}.form__select{border:.1rem solid var(--color-nuance-dark);font-family:var(--font-family-mono);color:var(--color-text);background-color:#0000;border-radius:.3rem;width:100%;padding:.3rem;font-size:1rem;transition:border-color .3s}.form__select:hover{border-color:var(--color-accent)}.form__select:focus-visible{outline:.1rem solid var(--color-accent);border-color:var(--color-accent)}.form__optgroup{text-transform:uppercase}.form__option{font-family:var(--font-family-mono);text-transform:none;font-size:1rem}.form__input{border:.1rem solid var(--color-nuance-dark);font-family:var(--font-family-mono);color:var(--color-text);border-radius:.3rem;width:100%;padding:.3rem .6rem;font-size:1rem;transition:border-color .3s}.form__input:hover{border-color:var(--color-accent)}.form__input:focus-visible{outline:.1rem solid var(--color-accent);border-color:var(--color-accent)}.form__input:disabled{border-color:var(--color-nuance-dark)}.form__submit{font-family:var(--font-family-basic);color:var(--color-text);background-color:var(--color-nuance-light);border:none;border-radius:.3rem;align-self:start;padding:.3rem .6rem;font-size:1.2rem;font-weight:500;transition:background-color .3s,opacity .3s}.form__submit:hover{background-color:var(--color-accent)}.form__submit:active{opacity:.5}.form__submit:focus-visible{outline:.15rem solid var(--color-accent)}.form__submit:disabled{background-color:var(--color-nuance-light);color:var(--color-nuance-dark);opacity:1}.form__result{padding:.4rem 0;font-size:1.2rem}.footer{flex-flow:wrap;justify-content:center;gap:.6rem 1.2rem;display:flex}.footer__footnote{width:100%;margin-block:0}.footnote{text-align:center;color:var(--color-text);font-size:1rem}.link{--icon-color:var(--color-text);color:var(--color-text);border-radius:.3rem;text-decoration:none;transition:color .3s,opacity .3s}.link:hover{--icon-color:var(--color-accent);color:var(--icon-color)}.link:active{opacity:.5}.link:focus-visible{outline-offset:.3rem;outline:.15rem solid var(--color-accent)}.icon-text:before{content:"";vertical-align:middle;background-color:var(--icon-color);-webkit-mask-image:var(--icon-url);mask-image:var(--icon-url);width:1.5em;height:1.5em;margin-right:.5em;transition:background-color .3s ease-out;display:inline-block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-text--github{--icon-url:url(../images/github.svg)}.icon-text--gmail{--icon-url:url(../images/gmail.svg)}