@value  --breakpoints: "../modules/breakpoints.module.css";.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-block:calc(var(--base-spacing) * 2);padding-inline:calc(var(--container-inline-padding) * 1.5)}.hero__inner{--container: var(--container-max-width);display:flex;flex-direction:column;gap:0}.hero__inner>*+*{margin-top:calc(var(--base-spacing) * 4)}:global(.hero__inner>:nth-child(2)){margin-top:0}.copy-examples{padding-block:calc(var(--base-spacing) * 6);padding-inline:calc(var(--container-inline-padding) * 1.5)}.copy-examples__container{--container: var(--container-max-width)}.copy-examples__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,35rem),1fr));grid-gap:calc(var(--base-spacing) * 6);gap:calc(var(--base-spacing) * 6)}.score{-webkit-margin-after:0;margin-block-end:0}.score__container{--container: var(--container-max-width);display:flex;flex-wrap:wrap;gap:calc(var(--base-spacing) * 3);justify-content:space-between;align-items:flex-end}.score__content{display:flex;align-items:flex-end}.color-controls{-webkit-margin-after:0;margin-block-end:0}.color-controls__container{--container: var(--container-max-width);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,35rem),1fr));grid-gap:calc(var(--base-spacing) * 4.5);gap:calc(var(--base-spacing) * 4.5)}.color-controls__control{display:grid;grid-gap:calc(var(--base-spacing) * 3);gap:calc(var(--base-spacing) * 3)}.example{--field-color: var(--foreground-color)}.example--dark{--field-color: #000}.example--light{--field-color: #fff}.example__label{display:inline-block;color:var(--field-color)}.example__textarea{display:block;inline-size:100%;block-size:auto;-webkit-margin-before:calc(var(--base-spacing) * 2);margin-block-start:calc(var(--base-spacing) * 2);padding:0;border:none;border-radius:calc(var(--base-spacing) / 2);background-color:transparent;color:var(--field-color);font-family:var(--copy);line-height:180%;resize:none}.example__textarea::-webkit-input-placeholder{color:var(--field-color)}.example__textarea::-moz-placeholder{color:var(--field-color)}.example__textarea:-ms-input-placeholder{color:var(--field-color)}.example__textarea::-ms-input-placeholder{color:var(--field-color)}.example__textarea::placeholder{color:var(--field-color)}.example__textarea:focus-visible{outline:3px solid var(--field-color);outline-offset:3px}.example__textarea{font-size:1.6rem}.example__textarea--large{font-size:2.4rem;line-height:150%}.header{padding-block:0}.header__container{--container: var(--container-max-width);position:relative}.typeface{-webkit-margin-after:calc(var(--base-spacing) * 4.5);margin-block-end:calc(var(--base-spacing) * 4.5)}.typeface__container{--container: var(--container-max-width)}.typeface__select{max-inline-size:-webkit-max-content;max-inline-size:-moz-max-content;max-inline-size:max-content}@value --bp-small,--bp-small_max from --breakpoints;.actions{--container: var(--container-max-width);display:flex;flex-direction:column;gap:calc(var(--base-spacing) * 2.5)}.actions__row{display:flex;gap:calc(var(--base-spacing) * 3)}.actions__fix{display:inline-flex;align-items:center;gap:calc(var(--base-spacing) * 1.5)}.actions__selectLabel{display:inline-flex;align-items:center;gap:calc(var(--base-spacing) * .75);font-size:1.2rem;letter-spacing:.08em;text-transform:uppercase;font-weight:var(--font-weight-bold);color:var(--select-bg, currentColor)}.actions__selectText{white-space:nowrap}.actions__select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:calc(var(--base-spacing) / 2) calc(var(--base-spacing) * 1.25);border-radius:calc(var(--base-spacing) / 2);border:2px solid var(--select-bg, currentColor);background:var(--select-bg, transparent);color:var(--select-fg, inherit);font-size:1.2rem;font-weight:var(--font-weight-bold);letter-spacing:.08em;text-transform:uppercase;text-align:center}.actions__ctaText{display:flex;flex-direction:column;gap:calc(var(--base-spacing) / 2);align-items:center;line-height:120%}.actions__shortcut{display:block;font-size:1.2rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7}.actions__swatches{display:flex;gap:calc(var(--base-spacing) * 2);margin:0;padding:0;list-style:none}.actions__swatchesWrap,.actions__swatch{position:relative}.actions__swatch--edit{-webkit-animation:wiggle .25s ease-in-out infinite;animation:wiggle .25s ease-in-out infinite;-webkit-transform:rotate(var(--wiggle-rotate, 0deg));transform:rotate(var(--wiggle-rotate, 0deg))}.actions__swatch--edit .color-swatch{pointer-events:none}.actions__swatchDelete{position:absolute;inset-block-start:-7px;inset-inline-end:-6px;inline-size:2rem;block-size:2rem;border-radius:999px;border:2px solid currentColor;background:var(--background-color);color:var(--foreground-color);font-size:1.4rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.actions__swatchDeleteIcon{display:block;-webkit-transform:translateY(-3px);transform:translateY(-3px)}.actions__swatchDeleteWrap{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.actions__swatchDeleteWrap .actions__swatchDelete{pointer-events:auto}@-webkit-keyframes wiggle{0%,to{-webkit-transform:rotate(calc(var(--wiggle-rotate, 0deg) - 1deg));transform:rotate(calc(var(--wiggle-rotate, 0deg) - 1deg))}50%{-webkit-transform:rotate(calc(var(--wiggle-rotate, 0deg) + 1deg));transform:rotate(calc(var(--wiggle-rotate, 0deg) + 1deg))}}@keyframes wiggle{0%,to{-webkit-transform:rotate(calc(var(--wiggle-rotate, 0deg) - 1deg));transform:rotate(calc(var(--wiggle-rotate, 0deg) - 1deg))}50%{-webkit-transform:rotate(calc(var(--wiggle-rotate, 0deg) + 1deg));transform:rotate(calc(var(--wiggle-rotate, 0deg) + 1deg))}}.tabs{--tabs-foreground-color: var(--foreground-color)}.tabs--dark{--tabs-foreground-color: #000}.tabs--light{--tabs-foreground-color: #fff}.tabs__list{list-style-type:none;display:flex;flex-wrap:wrap;margin:0;padding:0}.tabs__list:has(.tabs__item:first-child>.tabs__tab[aria-selected=false])~.tabs__panel{border-start-start-radius:calc(var(--base-spacing) / 2)}.tabs__item{display:grid;min-inline-size:-webkit-max-content;min-inline-size:-moz-max-content;min-inline-size:max-content}.tabs__tab{position:relative;display:block;display:flex;align-items:center;gap:calc(var(--base-spacing));padding-block:calc(var(--base-spacing) * 1.5);padding-inline:calc(var(--base-spacing) * 3);-webkit-border-before:3px solid transparent;border-block-start:3px solid transparent;border-inline:3px solid transparent;border-start-end-radius:calc(var(--base-spacing) / 2);border-start-start-radius:calc(var(--base-spacing) / 2);color:var(--tabs-foreground-color);text-decoration:none}.tabs__tab:focus-visible{outline:3px solid var(--tabs-foreground-color);outline-offset:calc((var(--base-spacing) * 1.5) * -1)}.tabs__tab[aria-selected=true]{border-inline-color:var(--tabs-foreground-color);border-block-start-color:var(--tabs-foreground-color)}.tabs__tab[aria-selected=true]:before{content:"";position:absolute;inset-block-start:100%;inset-inline-start:0;inline-size:100%;block-size:3px;background-color:var(--background-color)}.tabs__panel{padding:calc(var(--base-spacing) * 3) calc(var(--base-spacing) * 1.5);border:3px solid var(--tabs-foreground-color);border-start-end-radius:calc(var(--base-spacing) / 2);border-end-start-radius:calc(var(--base-spacing) / 2);border-end-end-radius:calc(var(--base-spacing) / 2)}.tabs__icon{display:inline-flex;inline-size:1.6rem;block-size:1.6rem;color:var(--tabs-foreground-color)}.tabs__icon svg{inline-size:100%;block-size:100%;fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.wcag{display:flex;flex-wrap:wrap;gap:calc(var(--base-spacing) * 2);align-items:start;margin-block:0;padding:0;-webkit-margin-start:auto;margin-inline-start:auto;justify-content:flex-end;text-align:end}.wcag__item{display:inline-flex;flex-direction:column;gap:var(--base-spacing);align-items:center;-webkit-margin-start:calc(var(--base-spacing) * 3);margin-inline-start:calc(var(--base-spacing) * 3);text-align:center}.wcag__item:first-child{-webkit-margin-start:0;margin-inline-start:0}.color-control>:not([hidden])~:not([hidden]){-webkit-margin-before:calc(var(--base-spacing) * 2.5);margin-block-start:calc(var(--base-spacing) * 2.5)}.badge{--badge-bg-color: var(--foreground-color);--badge-fg-color: var(--background-color);display:inline-flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--base-spacing);padding:var(--base-spacing) calc(var(--base-spacing) * 1.5);border-radius:calc(var(--base-spacing) / 2);background-color:var(--badge-bg-color);color:var(--badge-fg-color)}.badge>svg{flex-basis:2.4rem}.badge--dark{--badge-bg-color: #000;--badge-fg-color: #fff}.badge--light{--badge-bg-color: #fff;--badge-fg-color: #000}.badge__content{flex:1}.badge__label{--badge-text-color: var(--foreground-color);color:var(--badge-text-color)}.badge__label--dark{--badge-text-color: #000}.badge__label--light{--badge-text-color: #fff}.text-input{display:grid;grid-gap:calc(var(--base-spacing) * 1.5);gap:calc(var(--base-spacing) * 1.5)}.text-input__label{--label-color: var(--foreground-color);color:var(--label-color)}.text-input__label--dark{--label-color: #000}.text-input__label--light{--label-color: #fff}.text-input__wrapper{position:relative}.text-input__input{--input-color: var(--foreground-color);--input-outline-color: var(--foreground-color);inline-size:100%;padding:var(--base-spacing) calc(var(--base-spacing) * 1.5);border-radius:var(--base-spacing);border:3px solid var(--input-outline-color);color:var(--input-color);font-family:var(--font-family-primary);font-size:inherit;font-variation-settings:inherit;line-height:inherit}.text-input__input:focus-visible{outline:3px solid var(--input-outline-color);outline-offset:3px}.text-input__input--dark{--input-color: #000;--input-outline-color: #000}.text-input__input--light{--input-color: #fff;--input-outline-color: #fff}@-webkit-keyframes fade-in-out{0%,to{opacity:0}5%,95%{opacity:1}}@keyframes fade-in-out{0%,to{opacity:0}5%,95%{opacity:1}}.copy-cta{position:absolute;inset-block-start:50%;inset-inline-end:calc(var(--base-spacing) * 1.5);display:flex;flex-direction:column;justify-content:center;align-items:center;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.copy-cta__button{--cta-outline-color: var(--foreground-color);--cta-text-color: var(--foreground-color);position:relative;inline-size:4rem;block-size:4rem;border:none;border-radius:calc(var(--base-spacing) / 2);color:var(--cta-text-color);outline:none}.copy-cta__button:focus-visible{outline:3px solid var(--cta-outline-color);outline-offset:3px}.copy-cta__button--dark{--cta-outline-color: #000;--cta-text-color: #000}.copy-cta__button--light{--cta-outline-color: #fff;--cta-text-color: #fff}.copy-cta__tooltip{--tooltip-bg-color: var(--foreground-color);--tooltip-fg-color: var(--background-color);position:absolute;inset-block-start:-40px;inset-inline-start:50%;padding:calc(var(--base-spacing) / 2) var(--base-spacing);background-color:var(--tooltip-bg-color);color:var(--tooltip-fg-color);opacity:0;-webkit-transform:translateX(-50%);transform:translate(-50%)}.copy-cta__tooltip:after{content:"";position:absolute;inset-block-start:100%;inset-inline-start:50%;inline-size:0;block-size:0;-webkit-margin-start:-5px;margin-inline-start:-5px;border:5px solid transparent;border-block-start-color:var(--tooltip-bg-color);pointer-events:none}.copy-cta__tooltip--dark{--tooltip-bg-color: #000;--tooltip-fg-color: #fff}.copy-cta__tooltip--light{--tooltip-bg-color: #fff;--tooltip-fg-color: #000}.copy-cta__tooltip--active{-webkit-animation:fade-in-out 2s ease-in-out;animation:fade-in-out 2s ease-in-out}.cta{--cta-bg-color: var(--foreground-color);--cta-fg-color: var(--background-color);display:flex;gap:calc(var(--base-spacing) * 2);justify-content:center;align-items:center;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;padding:calc(var(--base-spacing) * 1.5) calc(var(--base-spacing) * 3);border-radius:calc(var(--base-spacing) / 2);border:2px solid var(--cta-bg-color);background-color:var(--cta-bg-color);color:var(--cta-fg-color)}.cta:is(a){text-decoration:none}.cta:focus-visible{outline:3px solid var(--cta-bg-color);outline-offset:3px}.cta--dark{--cta-bg-color: #000;--cta-fg-color: #fff}.cta--light{--cta-bg-color: #fff;--cta-fg-color: #000}.cta__content{pointer-events:none}@value --bp-tiny from --breakpoints;.color-swatch{--swatch-outline-color: var(--foreground-color);display:inline-flex;justify-content:center;align-items:center;inline-size:4rem;block-size:4rem;border-radius:calc(var(--base-spacing) / 2);vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;appearance:none}.color-swatch:focus-visible{outline:3px solid var(--swatch-outline-color);outline-offset:3px}.color-swatch--dark{--swatch-outline-color: #000}.color-swatch--light{--swatch-outline-color: #fff}.icon{display:inline-block;vertical-align:middle}.select{--field-fg-color: var(--foreground-color);--field-bg-color: var(--background-color)}.select--dark{--field-fg-color: #000;--field-bg-color: #fff}.select--light{--field-fg-color: #fff;--field-bg-color: #000}.select__label{display:inline-block;-webkit-margin-after:calc(var(--base-spacing) * 1.5);margin-block-end:calc(var(--base-spacing) * 1.5);color:var(--field-fg-color)}.select__wrapper{position:relative}.select__control{display:block;inline-size:100%;padding-block:calc(var(--base-spacing) * 2);padding-inline:calc(var(--base-spacing) * 2) calc(var(--base-spacing) * 6);border-radius:calc(var(--base-spacing) / 2);border:2px solid var(--field-fg-color);background-color:var(--field-bg-color);color:var(--field-fg-color);font-size:1.8rem;font-variation-settings:"wght" var(--font-weight-medium);line-height:inherit}.select__control:focus-visible{outline:3px solid var(--field-fg-color);outline-offset:3px}.select__icon{position:absolute;inset-block-start:50%;inset-inline-end:calc(var(--base-spacing) * 2);color:var(--field-fg-color);-webkit-transform:translateY(-50%);transform:translateY(-50%)}.range-input{display:grid;grid-gap:calc(var(--base-spacing) * 1.5);gap:calc(var(--base-spacing) * 1.5)}.range-input__label{--label-color: var(--foreground-color);color:var(--label-color)}.range-input__label--dark{--label-color: #000}.range-input__label--light{--label-color: #fff}.range-input__control{--input-thumb-color: var(--foreground-color);--input-bg-color: var(--foreground-color);--input-outline-color: var(--foreground-color);display:block;inline-size:100%;block-size:.6rem;border-radius:2rem;background-color:var(--input-bg-color)}.range-input__control:focus-visible{outline:3px solid var(--input-outline-color);outline-offset:3px}.range-input__control::-webkit-slider-thumb{inline-size:3rem;block-size:3rem;border-radius:50%;background-color:var(--input-thumb-color);-webkit-appearance:none;-moz-appearance:none;appearance:none}.range-input__control::-moz-range-thumb{inline-size:3rem;block-size:3rem;border-radius:50%;background-color:var(--input-thumb-color);-moz-appearance:none;-webkit-appearance:none;appearance:none}.range-input__control--dark{--input-thumb-color: #000;--input-bg-color: rgb(0 0 0 / 30%);--input-outline-color: #000}.range-input__control--light{--input-thumb-color: #fff;--input-bg-color: rgb(255 255 255 / 30%);--input-outline-color: #fff}.text-swatch{margin:0;display:inline-block;color:var(--foreground-color);padding:calc(var(--base-spacing) * 1.5);border:3px solid var(--foreground-color);border-radius:var(--base-spacing);line-height:normal}.divider{--container: var(--container-max-width);padding-inline:calc(var(--container-inline-padding) * 1.5)}.divider__line{--divider-border-color: var(--foreground-color);display:block;margin-block:calc(var(--base-spacing) * 3);background-color:transparent;border:2px solid var(--divider-border-color)}.divider__line--dark{--divider-border-color: #000}.divider__line--light{--divider-border-color: #fff}@value  --breakpoints: "../../../styles/modules/breakpoints.module.css";@value --bp-medium from --breakpoints;.ratio{--badge-bg-color: var(--foreground-color);display:inline-block;margin-inline:calc(var(--base-spacing) * 1.5);color:var(--badge-bg-color)}.ratio--dark{--badge-bg-color: #000}.ratio--light{--badge-bg-color: #fff}.text-base{--f-min-rem: calc(var(--min) * .1rem);--f-max-rem: calc(var(--max) * .1rem);--f-min: (var(--min) * .1);--f-max: (var(--max) * .1);--slope: calc((var(--f-max) - var(--f-min)) / (128 - 42.8));--y-axis-intersection: calc(-42.8 * var(--slope) + var(--f-min));--preferred-value: calc( (var(--y-axis-intersection) * 1rem) + (var(--slope) * 100vw) );font-size:clamp(var(--f-min-rem),var(--preferred-value),var(--f-max-rem));font-variation-settings:"wght" var(--weight)}.text-light{--weight: var(--font-weight-light)}.text-thin{--weight: var(--font-weight-thin)}.text-regular{--weight: var(--font-weight-regular)}.text-medium{--weight: var(--font-weight-medium)}.text-semiBold{--weight: var(--font-weight-semi-bold)}.text-bold{--weight: var(--font-weight-bold)}.text-colossus{--min: 56;--max: 96;font-family:var(--font-family-primary);line-height:110%}.text-horizon{--min: 32;--max: 56;font-family:var(--font-family-primary);line-height:120%}.text-landmark{--min: 22;--max: 36;font-family:var(--font-family-primary);line-height:125%}.text-beacon{--min: 18;--max: 28;font-family:var(--font-family-primary);line-height:135%}.text-pinnacle{--min: 16;--max: 24;font-family:var(--font-family-primary);line-height:145%}.text-script{--min: 14;--max: 18;font-family:var(--font-family-primary);line-height:140%}.text-whisper{--min: 13;--max: 16;font-family:var(--font-family-primary);line-height:150%}.text-echo{--min: 12;--max: 14;font-family:var(--font-family-primary);line-height:140%}.text-pulse{--min: 14;--max: 16;font-family:var(--font-family-primary);line-height:160%}@media (min-width: --bp-medium){.hero{padding-block:calc(var(--base-spacing) * 4)}.hero__inner{gap:0}.hero__inner>*+*{margin-top:calc(var(--base-spacing) * 5)}:global(.hero__inner>:nth-child(2)){margin-top:0}.copy-examples{padding-block:calc(var(--base-spacing) * 8)}.badge{padding-block:var(--base-spacing)}.ratio{margin-inline:calc(var(--base-spacing) * 3)}}@media (max-width: --bp-small_max){.actions__row{flex-direction:column}.actions__cta{inline-size:100%}}@media (min-width: --bp-small){.actions__row{align-items:center}}@media (prefers-reduced-motion: no-preference){.tabs__tab[aria-selected=true]:before{-webkit-transition:background-color .25s ease-in-out;transition:background-color .25s ease-in-out}.cta,.select__control{-webkit-transition:background-color .25s ease-in-out,color .25s ease-in-out;transition:background-color .25s ease-in-out,color .25s ease-in-out}}@media (hover: hover){.cta:hover{background-color:var(--cta-fg-color);color:var(--cta-bg-color)}}@media (min-width: --bp-tiny){.color-swatch{inline-size:5rem;block-size:5rem}}