/*! hauy.css — Tachyons v4.12 base (52 of 52 modules, colors & fonts removed) + 8 HSLuv palettes × 9 lightness steps × 3 contrast levels, as light-dark() variables + self-hosted fonts | generated by Hauy CSS */

/* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
h1 { font-size: 2em; margin: 0.67em 0; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img { border-style: none; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: .0625rem dotted ButtonText; }
fieldset { padding: 0.35em 0.75em 0.625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { vertical-align: baseline; }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -.125rem; }
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details { display: block; }
summary { display: list-item; }
template { display: none; }
[hidden] { display: none; }

/* BOX SIZING */

html, body, div, article, aside, section, main, nav, footer, header, form, fieldset, legend, pre, code, a, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, blockquote, figcaption, figure, textarea, table, td, th, tr, input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }

/* ASPECT RATIOS */

.aspect-ratio { height: 0; position: relative; }
.aspect-ratio--16x9 { padding-bottom: 56.25%; }
.aspect-ratio--9x16 { padding-bottom: 177.77%; }
.aspect-ratio--4x3 { padding-bottom: 75%; }
.aspect-ratio--3x4 { padding-bottom: 133.33%; }
.aspect-ratio--6x4 { padding-bottom: 66.6%; }
.aspect-ratio--4x6 { padding-bottom: 150%; }
.aspect-ratio--8x5 { padding-bottom: 62.5%; }
.aspect-ratio--5x8 { padding-bottom: 160%; }
.aspect-ratio--7x5 { padding-bottom: 71.42%; }
.aspect-ratio--5x7 { padding-bottom: 140%; }
.aspect-ratio--1x1 { padding-bottom: 100%; }
.aspect-ratio--object { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; }

/* IMAGES */

img { max-width: 100%; }

/* BACKGROUND SIZE */

.cover { background-size: cover!important; }
.contain { background-size: contain!important; }

/* BACKGROUND POSITION */

.bg-center { background-repeat: no-repeat; background-position: center center; }
.bg-top { background-repeat: no-repeat; background-position: top center; }
.bg-right { background-repeat: no-repeat; background-position: center right; }
.bg-bottom { background-repeat: no-repeat; background-position: bottom center; }
.bg-left { background-repeat: no-repeat; background-position: center left; }

/* OUTLINES */

.outline { outline: .0625rem solid; }
.outline-transparent { outline: .0625rem solid transparent; }
.outline-0 { outline: 0; }

/* BORDERS */

.ba { border-style: solid; border-width: .0625rem; }
.bt { border-top-style: solid; border-top-width: .0625rem; }
.br { border-right-style: solid; border-right-width: .0625rem; }
.bb { border-bottom-style: solid; border-bottom-width: .0625rem; }
.bl { border-left-style: solid; border-left-width: .0625rem; }
.bn { border-style: none; border-width: 0; }

/* BORDER COLORS */

.b--transparent { border-color: transparent; }
.b--inherit { border-color: inherit; }
.b--initial { border-color: initial; }
.b--unset { border-color: unset; }

/* BORDER RADIUS */

.br0 { border-radius: 0; }
.br1 { border-radius: .125rem; }
.br2 { border-radius: .25rem; }
.br3 { border-radius: .5rem; }
.br4 { border-radius: 1rem; }
.br-100 { border-radius: 100%; }
.br-pill { border-radius: 9999rem; }
.br--bottom { border-top-left-radius: 0; border-top-right-radius: 0; }
.br--top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.br--right { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.br--left { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.br-inherit { border-radius: inherit; }
.br-initial { border-radius: initial; }
.br-unset { border-radius: unset; }

/* BORDER STYLES */

.b--dotted { border-style: dotted; }
.b--dashed { border-style: dashed; }
.b--solid { border-style: solid; }
.b--none { border-style: none; }

/* BORDER WIDTHS */

.bw0 { border-width: 0; }
.bw1 { border-width: .125rem; }
.bw2 { border-width: .25rem; }
.bw3 { border-width: .5rem; }
.bw4 { border-width: 1rem; }
.bw5 { border-width: 2rem; }
.bt-0 { border-top-width: 0; }
.br-0 { border-right-width: 0; }
.bb-0 { border-bottom-width: 0; }
.bl-0 { border-left-width: 0; }

/* BOX-SHADOW */

.shadow-1 { box-shadow: 0 0 .25rem .125rem rgba( 0, 0, 0, 0.2 ); }
.shadow-2 { box-shadow: 0 0 .5rem .125rem rgba( 0, 0, 0, 0.2 ); }
.shadow-3 { box-shadow: .125rem .125rem .25rem .125rem rgba( 0, 0, 0, 0.2 ); }
.shadow-4 { box-shadow: .125rem .125rem .5rem 0 rgba( 0, 0, 0, 0.2 ); }
.shadow-5 { box-shadow: .25rem .25rem .5rem 0 rgba( 0, 0, 0, 0.2 ); }

/* CODE */

.pre { overflow-x: auto; overflow-y: hidden; overflow: scroll; }

/* COORDINATES */

.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.top-1 { top: 1rem; }
.right-1 { right: 1rem; }
.bottom-1 { bottom: 1rem; }
.left-1 { left: 1rem; }
.top-2 { top: 2rem; }
.right-2 { right: 2rem; }
.bottom-2 { bottom: 2rem; }
.left-2 { left: 2rem; }
.top--1 { top: -1rem; }
.right--1 { right: -1rem; }
.bottom--1 { bottom: -1rem; }
.left--1 { left: -1rem; }
.top--2 { top: -2rem; }
.right--2 { right: -2rem; }
.bottom--2 { bottom: -2rem; }
.left--2 { left: -2rem; }
.absolute--fill { top: 0; right: 0; bottom: 0; left: 0; }

/* CLEARFIX */

.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }
.cl { clear: left; }
.cr { clear: right; }
.cb { clear: both; }
.cn { clear: none; }

/* DISPLAY */

.dn { display: none; }
.di { display: inline; }
.db { display: block; }
.dib { display: inline-block; }
.dit { display: inline-table; }
.dt { display: table; }
.dtc { display: table-cell; }
.dt-row { display: table-row; }
.dt-row-group { display: table-row-group; }
.dt-column { display: table-column; }
.dt-column-group { display: table-column-group; }
.dt--fixed { table-layout: fixed; width: 100%; }

/* FLEXBOX */

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-auto { flex: 1 1 auto; min-width: 0; min-height: 0; }
.flex-none { flex: none; }
.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-column-reverse { flex-direction: column-reverse; }
.flex-row-reverse { flex-direction: row-reverse; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-baseline { align-self: baseline; }
.self-stretch { align-self: stretch; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-center { align-content: center; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
.content-stretch { align-content: stretch; }
.order-0 { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }
.order-7 { order: 7; }
.order-8 { order: 8; }
.order-last { order: 99999; }
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }

/* FLOATS */

.fl { float: left; _display: inline; }
.fr { float: right; _display: inline; }
.fn { float: none; }

/* FONT STYLE */

.i { font-style: italic; }
.fs-normal { font-style: normal; }

/* FONT WEIGHT */

.normal { font-weight: normal; }
.b { font-weight: bold; }
.fw1 { font-weight: 100; }
.fw2 { font-weight: 200; }
.fw3 { font-weight: 300; }
.fw4 { font-weight: 400; }
.fw5 { font-weight: 500; }
.fw6 { font-weight: 600; }
.fw7 { font-weight: 700; }
.fw8 { font-weight: 800; }
.fw9 { font-weight: 900; }

/* FORMS */

.input-reset { -webkit-appearance: none; -moz-appearance: none; }
.button-reset::-moz-focus-inner, .input-reset::-moz-focus-inner { border: 0; padding: 0; }

/* HEIGHTS */

.h1 { height: 1rem; }
.h2 { height: 2rem; }
.h3 { height: 4rem; }
.h4 { height: 8rem; }
.h5 { height: 16rem; }
.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }
.min-h-100 { min-height: 100%; }
.vh-25 { height: 25vh; }
.vh-50 { height: 50vh; }
.vh-75 { height: 75vh; }
.vh-100 { height: 100vh; }
.min-vh-100 { min-height: 100vh; }
.h-auto { height: auto; }
.h-inherit { height: inherit; }

/* LETTER SPACING */

.tracked { letter-spacing: .1em; }
.tracked-tight { letter-spacing: -.05em; }
.tracked-mega { letter-spacing: .25em; }

/* LINE HEIGHT / LEADING */

.lh-solid { line-height: 1; }
.lh-title { line-height: 1.25; }
.lh-copy { line-height: 1.5; }

/* LINKS */

.link { text-decoration: none; transition: color .15s ease-in; }
.link:link, .link:visited { transition: color .15s ease-in; }
.link:hover { transition: color .15s ease-in; }
.link:active { transition: color .15s ease-in; }
.link:focus { transition: color .15s ease-in; outline: .0625rem dotted currentColor; }

/* LISTS */

.list { list-style-type: none; }

/* MAX WIDTHS */

.mw-100 { max-width: 100%; }
.mw1 { max-width: 1rem; }
.mw2 { max-width: 2rem; }
.mw3 { max-width: 4rem; }
.mw4 { max-width: 8rem; }
.mw5 { max-width: 16rem; }
.mw6 { max-width: 32rem; }
.mw7 { max-width: 48rem; }
.mw8 { max-width: 64rem; }
.mw9 { max-width: 96rem; }
.mw-none { max-width: none; }

/* WIDTHS */

.w1 { width: 1rem; }
.w2 { width: 2rem; }
.w3 { width: 4rem; }
.w4 { width: 8rem; }
.w5 { width: 16rem; }
.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-33 { width: 33%; }
.w-34 { width: 34%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-90 { width: 90%; }
.w-100 { width: 100%; }
.w-third { width: calc(100% / 3); }
.w-two-thirds { width: calc(100% / 1.5); }
.w-auto { width: auto; }

/* OVERFLOW */

.overflow-visible { overflow: visible; }
.overflow-hidden { overflow: hidden; }
.overflow-scroll { overflow: scroll; }
.overflow-auto { overflow: auto; }
.overflow-x-visible { overflow-x: visible; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-x-scroll { overflow-x: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-visible { overflow-y: visible; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-y-scroll { overflow-y: scroll; }
.overflow-y-auto { overflow-y: auto; }

/* POSITIONING */

.static { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

/* OPACITY */

.o-100 { opacity: 1; }
.o-90 { opacity: .9; }
.o-80 { opacity: .8; }
.o-70 { opacity: .7; }
.o-60 { opacity: .6; }
.o-50 { opacity: .5; }
.o-40 { opacity: .4; }
.o-30 { opacity: .3; }
.o-20 { opacity: .2; }
.o-10 { opacity: .1; }
.o-05 { opacity: .05; }
.o-025 { opacity: .025; }
.o-0 { opacity: 0; }

/* ROTATIONS */

.rotate-45 { transform: rotate(45deg); }
.rotate-90 { transform: rotate(90deg); }
.rotate-135 { transform: rotate(135deg); }
.rotate-180 { transform: rotate(180deg); }
.rotate-225 { transform: rotate(225deg); }
.rotate-270 { transform: rotate(270deg); }
.rotate-315 { transform: rotate(315deg); }

/* SKINS */

.color-inherit { color: inherit; }
.bg-transparent { background-color: transparent; }
.bg-inherit { background-color: inherit; }

/* SKINS:PSEUDO */

.hover-inherit:hover, .hover-inherit:focus { color: inherit; }
.hover-bg-transparent:hover, .hover-bg-transparent:focus { background-color: transparent; }
.hover-bg-inherit:hover, .hover-bg-inherit:focus { background-color: inherit; }

/* SPACING */

:root { --spacing-none: 0; --spacing-extra-small: .25rem; --spacing-small: .5rem; --spacing-medium: 1rem; --spacing-large: 2rem; --spacing-extra-large: 4rem; --spacing-extra-extra-large: 8rem; --spacing-extra-extra-extra-large: 16rem; }
.pa0 { padding: var(--spacing-none); }
.pa1 { padding: var(--spacing-extra-small); }
.pa2 { padding: var(--spacing-small); }
.pa3 { padding: var(--spacing-medium); }
.pa4 { padding: var(--spacing-large); }
.pa5 { padding: var(--spacing-extra-large); }
.pa6 { padding: var(--spacing-extra-extra-large); }
.pa7 { padding: var(--spacing-extra-extra-extra-large); }
.pl0 { padding-left: var(--spacing-none); }
.pl1 { padding-left: var(--spacing-extra-small); }
.pl2 { padding-left: var(--spacing-small); }
.pl3 { padding-left: var(--spacing-medium); }
.pl4 { padding-left: var(--spacing-large); }
.pl5 { padding-left: var(--spacing-extra-large); }
.pl6 { padding-left: var(--spacing-extra-extra-large); }
.pl7 { padding-left: var(--spacing-extra-extra-extra-large); }
.pr0 { padding-right: var(--spacing-none); }
.pr1 { padding-right: var(--spacing-extra-small); }
.pr2 { padding-right: var(--spacing-small); }
.pr3 { padding-right: var(--spacing-medium); }
.pr4 { padding-right: var(--spacing-large); }
.pr5 { padding-right: var(--spacing-extra-large); }
.pr6 { padding-right: var(--spacing-extra-extra-large); }
.pr7 { padding-right: var(--spacing-extra-extra-extra-large); }
.pb0 { padding-bottom: var(--spacing-none); }
.pb1 { padding-bottom: var(--spacing-extra-small); }
.pb2 { padding-bottom: var(--spacing-small); }
.pb3 { padding-bottom: var(--spacing-medium); }
.pb4 { padding-bottom: var(--spacing-large); }
.pb5 { padding-bottom: var(--spacing-extra-large); }
.pb6 { padding-bottom: var(--spacing-extra-extra-large); }
.pb7 { padding-bottom: var(--spacing-extra-extra-extra-large); }
.pt0 { padding-top: var(--spacing-none); }
.pt1 { padding-top: var(--spacing-extra-small); }
.pt2 { padding-top: var(--spacing-small); }
.pt3 { padding-top: var(--spacing-medium); }
.pt4 { padding-top: var(--spacing-large); }
.pt5 { padding-top: var(--spacing-extra-large); }
.pt6 { padding-top: var(--spacing-extra-extra-large); }
.pt7 { padding-top: var(--spacing-extra-extra-extra-large); }
.pv0 { padding-top: var(--spacing-none); padding-bottom: var(--spacing-none); }
.pv1 { padding-top: var(--spacing-extra-small); padding-bottom: var(--spacing-extra-small); }
.pv2 { padding-top: var(--spacing-small); padding-bottom: var(--spacing-small); }
.pv3 { padding-top: var(--spacing-medium); padding-bottom: var(--spacing-medium); }
.pv4 { padding-top: var(--spacing-large); padding-bottom: var(--spacing-large); }
.pv5 { padding-top: var(--spacing-extra-large); padding-bottom: var(--spacing-extra-large); }
.pv6 { padding-top: var(--spacing-extra-extra-large); padding-bottom: var(--spacing-extra-extra-large); }
.pv7 { padding-top: var(--spacing-extra-extra-extra-large); padding-bottom: var(--spacing-extra-extra-extra-large); }
.ph0 { padding-left: var(--spacing-none); padding-right: var(--spacing-none); }
.ph1 { padding-left: var(--spacing-extra-small); padding-right: var(--spacing-extra-small); }
.ph2 { padding-left: var(--spacing-small); padding-right: var(--spacing-small); }
.ph3 { padding-left: var(--spacing-medium); padding-right: var(--spacing-medium); }
.ph4 { padding-left: var(--spacing-large); padding-right: var(--spacing-large); }
.ph5 { padding-left: var(--spacing-extra-large); padding-right: var(--spacing-extra-large); }
.ph6 { padding-left: var(--spacing-extra-extra-large); padding-right: var(--spacing-extra-extra-large); }
.ph7 { padding-left: var(--spacing-extra-extra-extra-large); padding-right: var(--spacing-extra-extra-extra-large); }
.ma0 { margin: var(--spacing-none); }
.ma1 { margin: var(--spacing-extra-small); }
.ma2 { margin: var(--spacing-small); }
.ma3 { margin: var(--spacing-medium); }
.ma4 { margin: var(--spacing-large); }
.ma5 { margin: var(--spacing-extra-large); }
.ma6 { margin: var(--spacing-extra-extra-large); }
.ma7 { margin: var(--spacing-extra-extra-extra-large); }
.ml0 { margin-left: var(--spacing-none); }
.ml1 { margin-left: var(--spacing-extra-small); }
.ml2 { margin-left: var(--spacing-small); }
.ml3 { margin-left: var(--spacing-medium); }
.ml4 { margin-left: var(--spacing-large); }
.ml5 { margin-left: var(--spacing-extra-large); }
.ml6 { margin-left: var(--spacing-extra-extra-large); }
.ml7 { margin-left: var(--spacing-extra-extra-extra-large); }
.mr0 { margin-right: var(--spacing-none); }
.mr1 { margin-right: var(--spacing-extra-small); }
.mr2 { margin-right: var(--spacing-small); }
.mr3 { margin-right: var(--spacing-medium); }
.mr4 { margin-right: var(--spacing-large); }
.mr5 { margin-right: var(--spacing-extra-large); }
.mr6 { margin-right: var(--spacing-extra-extra-large); }
.mr7 { margin-right: var(--spacing-extra-extra-extra-large); }
.mb0 { margin-bottom: var(--spacing-none); }
.mb1 { margin-bottom: var(--spacing-extra-small); }
.mb2 { margin-bottom: var(--spacing-small); }
.mb3 { margin-bottom: var(--spacing-medium); }
.mb4 { margin-bottom: var(--spacing-large); }
.mb5 { margin-bottom: var(--spacing-extra-large); }
.mb6 { margin-bottom: var(--spacing-extra-extra-large); }
.mb7 { margin-bottom: var(--spacing-extra-extra-extra-large); }
.mt0 { margin-top: var(--spacing-none); }
.mt1 { margin-top: var(--spacing-extra-small); }
.mt2 { margin-top: var(--spacing-small); }
.mt3 { margin-top: var(--spacing-medium); }
.mt4 { margin-top: var(--spacing-large); }
.mt5 { margin-top: var(--spacing-extra-large); }
.mt6 { margin-top: var(--spacing-extra-extra-large); }
.mt7 { margin-top: var(--spacing-extra-extra-extra-large); }
.mv0 { margin-top: var(--spacing-none); margin-bottom: var(--spacing-none); }
.mv1 { margin-top: var(--spacing-extra-small); margin-bottom: var(--spacing-extra-small); }
.mv2 { margin-top: var(--spacing-small); margin-bottom: var(--spacing-small); }
.mv3 { margin-top: var(--spacing-medium); margin-bottom: var(--spacing-medium); }
.mv4 { margin-top: var(--spacing-large); margin-bottom: var(--spacing-large); }
.mv5 { margin-top: var(--spacing-extra-large); margin-bottom: var(--spacing-extra-large); }
.mv6 { margin-top: var(--spacing-extra-extra-large); margin-bottom: var(--spacing-extra-extra-large); }
.mv7 { margin-top: var(--spacing-extra-extra-extra-large); margin-bottom: var(--spacing-extra-extra-extra-large); }
.mh0 { margin-left: var(--spacing-none); margin-right: var(--spacing-none); }
.mh1 { margin-left: var(--spacing-extra-small); margin-right: var(--spacing-extra-small); }
.mh2 { margin-left: var(--spacing-small); margin-right: var(--spacing-small); }
.mh3 { margin-left: var(--spacing-medium); margin-right: var(--spacing-medium); }
.mh4 { margin-left: var(--spacing-large); margin-right: var(--spacing-large); }
.mh5 { margin-left: var(--spacing-extra-large); margin-right: var(--spacing-extra-large); }
.mh6 { margin-left: var(--spacing-extra-extra-large); margin-right: var(--spacing-extra-extra-large); }
.mh7 { margin-left: var(--spacing-extra-extra-extra-large); margin-right: var(--spacing-extra-extra-extra-large); }

/* NEGATIVE MARGINS */

.na1 { margin: calc(-1 * var(--spacing-extra-small)); }
.na2 { margin: calc(-1 * var(--spacing-small)); }
.na3 { margin: calc(-1 * var(--spacing-medium)); }
.na4 { margin: calc(-1 * var(--spacing-large)); }
.na5 { margin: calc(-1 * var(--spacing-extra-large)); }
.na6 { margin: calc(-1 * var(--spacing-extra-extra-large)); }
.na7 { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
.nl1 { margin-left: calc(-1 * var(--spacing-extra-small)); }
.nl2 { margin-left: calc(-1 * var(--spacing-small)); }
.nl3 { margin-left: calc(-1 * var(--spacing-medium)); }
.nl4 { margin-left: calc(-1 * var(--spacing-large)); }
.nl5 { margin-left: calc(-1 * var(--spacing-extra-large)); }
.nl6 { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
.nl7 { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
.nr1 { margin-right: calc(-1 * var(--spacing-extra-small)); }
.nr2 { margin-right: calc(-1 * var(--spacing-small)); }
.nr3 { margin-right: calc(-1 * var(--spacing-medium)); }
.nr4 { margin-right: calc(-1 * var(--spacing-large)); }
.nr5 { margin-right: calc(-1 * var(--spacing-extra-large)); }
.nr6 { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
.nr7 { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
.nb1 { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
.nb2 { margin-bottom: calc(-1 * var(--spacing-small)); }
.nb3 { margin-bottom: calc(-1 * var(--spacing-medium)); }
.nb4 { margin-bottom: calc(-1 * var(--spacing-large)); }
.nb5 { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
.nb6 { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
.nb7 { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
.nt1 { margin-top: calc(-1 * var(--spacing-extra-small)); }
.nt2 { margin-top: calc(-1 * var(--spacing-small)); }
.nt3 { margin-top: calc(-1 * var(--spacing-medium)); }
.nt4 { margin-top: calc(-1 * var(--spacing-large)); }
.nt5 { margin-top: calc(-1 * var(--spacing-extra-large)); }
.nt6 { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
.nt7 { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }

/* TABLES */

.collapse { border-collapse: collapse; border-spacing: 0; }
.stripe-light:nth-child(odd) { background-color: var(--overlay-10, rgba(255,255,255,.1)); }
.stripe-dark:nth-child(odd) { background-color: var(--overlay-10, rgba(0,0,0,.1)); }

/* TEXT DECORATION */

.strike { text-decoration: line-through; }
.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }

/* TEXT ALIGN */

.tl { text-align: left; }
.tr { text-align: right; }
.tc { text-align: center; }
.tj { text-align: justify; }

/* TEXT TRANSFORM */

.ttc { text-transform: capitalize; }
.ttl { text-transform: lowercase; }
.ttu { text-transform: uppercase; }
.ttn { text-transform: none; }

/* TYPE SCALE */

.f-6, .f-headline { font-size: 6rem; }
.f-5, .f-subheadline { font-size: 5rem; }
.f1 { font-size: 3rem; }
.f2 { font-size: 2.25rem; }
.f3 { font-size: 1.5rem; }
.f4 { font-size: 1.25rem; }
.f5 { font-size: 1rem; }
.f6 { font-size: .875rem; }
.f7 { font-size: .75rem; }

/* TYPOGRAPHY */

.measure { max-width: 30em; }
.measure-wide { max-width: 34em; }
.measure-narrow { max-width: 20em; }
.indent { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
.small-caps { font-variant: small-caps; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* UTILITIES */

.overflow-container { overflow-y: scroll; }
.center { margin-right: auto; margin-left: auto; }
.mr-auto { margin-right: auto; }
.ml-auto { margin-left: auto; }

/* VISIBILITY */

.clip { position: fixed !important; _position: absolute !important; clip: rect(.0625rem .0625rem .0625rem .0625rem); clip: rect(.0625rem, .0625rem, .0625rem, .0625rem); }

/* WHITE SPACE */

.ws-normal { white-space: normal; }
.nowrap { white-space: nowrap; }
.pre { white-space: pre; }

/* VERTICAL ALIGN */

.v-base { vertical-align: baseline; }
.v-mid { vertical-align: middle; }
.v-top { vertical-align: top; }
.v-btm { vertical-align: bottom; }

/* HOVER EFFECTS */

.dim { opacity: 1; transition: opacity .15s ease-in; }
.dim:hover, .dim:focus { opacity: .5; transition: opacity .15s ease-in; }
.dim:active { opacity: .8; transition: opacity .15s ease-out; }
.glow { transition: opacity .15s ease-in; }
.glow:hover, .glow:focus { opacity: 1; transition: opacity .15s ease-in; }
.hide-child .child { opacity: 0; transition: opacity .15s ease-in; }
.hide-child:hover .child, .hide-child:focus .child, .hide-child:active .child { opacity: 1; transition: opacity .15s ease-in; }
.underline-hover:hover, .underline-hover:focus { text-decoration: underline; }
.grow { -moz-osx-font-smoothing: grayscale; backface-visibility: hidden; transform: translateZ(0); transition: transform 0.25s ease-out; }
.grow:hover, .grow:focus { transform: scale(1.05); }
.grow:active { transform: scale(.90); }
.grow-large { -moz-osx-font-smoothing: grayscale; backface-visibility: hidden; transform: translateZ(0); transition: transform .25s ease-in-out; }
.grow-large:hover, .grow-large:focus { transform: scale(1.2); }
.grow-large:active { transform: scale(.95); }
.pointer:hover { cursor: pointer; }
.shadow-hover { cursor: pointer; position: relative; transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
.shadow-hover::after { content: ''; box-shadow: 0 0 1rem .125rem rgba( 0, 0, 0, .2 ); border-radius: inherit; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
.shadow-hover:hover::after, .shadow-hover:focus::after { opacity: 1; }
.bg-animate, .bg-animate:hover, .bg-animate:focus { transition: background-color .15s ease-in-out; }

/* Z-INDEX */

.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-3 { z-index: 3; }
.z-4 { z-index: 4; }
.z-5 { z-index: 5; }
.z-999 { z-index: 999; }
.z-9999 { z-index: 9999; }
.z-max { z-index: 2147483647; }
.z-inherit { z-index: inherit; }
.z-initial { z-index: initial; }
.z-unset { z-index: unset; }

/* NESTED */

.nested-copy-line-height p, .nested-copy-line-height ul, .nested-copy-line-height ol { line-height: 1.5; }
.nested-headline-line-height h1, .nested-headline-line-height h2, .nested-headline-line-height h3, .nested-headline-line-height h4, .nested-headline-line-height h5, .nested-headline-line-height h6 { line-height: 1.25; }
.nested-list-reset ul, .nested-list-reset ol { padding-left: 0; margin-left: 0; list-style-type: none; }
.nested-copy-indent p+p { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
.nested-copy-separator p+p { margin-top: 1.5em; }
.nested-img img { width: 100%; max-width: 100%; display: block; }
.nested-links a { color: var(--link, var(--blue, #357edd)); transition: color .15s ease-in; }
.nested-links a:hover, .nested-links a:focus { color: var(--link-hover, var(--blue-80, #96ccff)); transition: color .15s ease-in; }

/* DEBUG CHILDREN */

.debug * { outline: 1px solid gold; }
.debug-white * { outline: 1px solid white; }
.debug-black * { outline: 1px solid black; }

/* DEBUG GRID */

.debug-grid { background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII=) repeat top left; }
.debug-grid-16 { background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII=) repeat top left; }
.debug-grid-8-solid { background:white url(data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw==) repeat top left; }
.debug-grid-16-solid { background:white url(data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7) repeat top left; }

/* NOT SMALL (-ns) */

@media screen and (min-width: 30em) {
  /* ASPECT RATIOS */
  .aspect-ratio-ns { height: 0; position: relative; }
  .aspect-ratio--16x9-ns { padding-bottom: 56.25%; }
  .aspect-ratio--9x16-ns { padding-bottom: 177.77%; }
  .aspect-ratio--4x3-ns { padding-bottom: 75%; }
  .aspect-ratio--3x4-ns { padding-bottom: 133.33%; }
  .aspect-ratio--6x4-ns { padding-bottom: 66.6%; }
  .aspect-ratio--4x6-ns { padding-bottom: 150%; }
  .aspect-ratio--8x5-ns { padding-bottom: 62.5%; }
  .aspect-ratio--5x8-ns { padding-bottom: 160%; }
  .aspect-ratio--7x5-ns { padding-bottom: 71.42%; }
  .aspect-ratio--5x7-ns { padding-bottom: 140%; }
  .aspect-ratio--1x1-ns { padding-bottom: 100%; }
  .aspect-ratio--object-ns { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; }

  /* BACKGROUND SIZE */
  .cover-ns { background-size: cover!important; }
  .contain-ns { background-size: contain!important; }

  /* BACKGROUND POSITION */
  .bg-center-ns { background-repeat: no-repeat; background-position: center center; }
  .bg-top-ns { background-repeat: no-repeat; background-position: top center; }
  .bg-right-ns { background-repeat: no-repeat; background-position: center right; }
  .bg-bottom-ns { background-repeat: no-repeat; background-position: bottom center; }
  .bg-left-ns { background-repeat: no-repeat; background-position: center left; }

  /* OUTLINES */
  .outline-ns { outline: .0625rem solid; }
  .outline-transparent-ns { outline: .0625rem solid transparent; }
  .outline-0-ns { outline: 0; }

  /* BORDERS */
  .ba-ns { border-style: solid; border-width: .0625rem; }
  .bt-ns { border-top-style: solid; border-top-width: .0625rem; }
  .br-ns { border-right-style: solid; border-right-width: .0625rem; }
  .bb-ns { border-bottom-style: solid; border-bottom-width: .0625rem; }
  .bl-ns { border-left-style: solid; border-left-width: .0625rem; }
  .bn-ns { border-style: none; border-width: 0; }

  /* BORDER RADIUS */
  .br0-ns { border-radius: 0; }
  .br1-ns { border-radius: .125rem; }
  .br2-ns { border-radius: .25rem; }
  .br3-ns { border-radius: .5rem; }
  .br4-ns { border-radius: 1rem; }
  .br-100-ns { border-radius: 100%; }
  .br-pill-ns { border-radius: 9999rem; }
  .br--bottom-ns { border-top-left-radius: 0; border-top-right-radius: 0; }
  .br--top-ns { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .br--right-ns { border-top-left-radius: 0; border-bottom-left-radius: 0; }
  .br--left-ns { border-top-right-radius: 0; border-bottom-right-radius: 0; }
  .br-inherit-ns { border-radius: inherit; }
  .br-initial-ns { border-radius: initial; }
  .br-unset-ns { border-radius: unset; }

  /* BORDER STYLES */
  .b--dotted-ns { border-style: dotted; }
  .b--dashed-ns { border-style: dashed; }
  .b--solid-ns { border-style: solid; }
  .b--none-ns { border-style: none; }

  /* BORDER WIDTHS */
  .bw0-ns { border-width: 0; }
  .bw1-ns { border-width: .125rem; }
  .bw2-ns { border-width: .25rem; }
  .bw3-ns { border-width: .5rem; }
  .bw4-ns { border-width: 1rem; }
  .bw5-ns { border-width: 2rem; }
  .bt-0-ns { border-top-width: 0; }
  .br-0-ns { border-right-width: 0; }
  .bb-0-ns { border-bottom-width: 0; }
  .bl-0-ns { border-left-width: 0; }

  /* BOX-SHADOW */
  .shadow-1-ns { box-shadow: 0 0 .25rem .125rem rgba( 0, 0, 0, 0.2 ); }
  .shadow-2-ns { box-shadow: 0 0 .5rem .125rem rgba( 0, 0, 0, 0.2 ); }
  .shadow-3-ns { box-shadow: .125rem .125rem .25rem .125rem rgba( 0, 0, 0, 0.2 ); }
  .shadow-4-ns { box-shadow: .125rem .125rem .5rem 0 rgba( 0, 0, 0, 0.2 ); }
  .shadow-5-ns { box-shadow: .25rem .25rem .5rem 0 rgba( 0, 0, 0, 0.2 ); }

  /* COORDINATES */
  .top-0-ns { top: 0; }
  .right-0-ns { right: 0; }
  .bottom-0-ns { bottom: 0; }
  .left-0-ns { left: 0; }
  .top-1-ns { top: 1rem; }
  .right-1-ns { right: 1rem; }
  .bottom-1-ns { bottom: 1rem; }
  .left-1-ns { left: 1rem; }
  .top-2-ns { top: 2rem; }
  .right-2-ns { right: 2rem; }
  .bottom-2-ns { bottom: 2rem; }
  .left-2-ns { left: 2rem; }
  .top--1-ns { top: -1rem; }
  .right--1-ns { right: -1rem; }
  .bottom--1-ns { bottom: -1rem; }
  .left--1-ns { left: -1rem; }
  .top--2-ns { top: -2rem; }
  .right--2-ns { right: -2rem; }
  .bottom--2-ns { bottom: -2rem; }
  .left--2-ns { left: -2rem; }
  .absolute--fill-ns { top: 0; right: 0; bottom: 0; left: 0; }

  /* CLEARFIX */
  .cl-ns { clear: left; }
  .cr-ns { clear: right; }
  .cb-ns { clear: both; }
  .cn-ns { clear: none; }

  /* DISPLAY */
  .dn-ns { display: none; }
  .di-ns { display: inline; }
  .db-ns { display: block; }
  .dib-ns { display: inline-block; }
  .dit-ns { display: inline-table; }
  .dt-ns { display: table; }
  .dtc-ns { display: table-cell; }
  .dt-row-ns { display: table-row; }
  .dt-row-group-ns { display: table-row-group; }
  .dt-column-ns { display: table-column; }
  .dt-column-group-ns { display: table-column-group; }
  .dt--fixed-ns { table-layout: fixed; width: 100%; }

  /* FLEXBOX */
  .flex-ns { display: flex; }
  .inline-flex-ns { display: inline-flex; }
  .flex-auto-ns { flex: 1 1 auto; min-width: 0; min-height: 0; }
  .flex-none-ns { flex: none; }
  .flex-column-ns { flex-direction: column; }
  .flex-row-ns { flex-direction: row; }
  .flex-wrap-ns { flex-wrap: wrap; }
  .flex-nowrap-ns { flex-wrap: nowrap; }
  .flex-wrap-reverse-ns { flex-wrap: wrap-reverse; }
  .flex-column-reverse-ns { flex-direction: column-reverse; }
  .flex-row-reverse-ns { flex-direction: row-reverse; }
  .items-start-ns { align-items: flex-start; }
  .items-end-ns { align-items: flex-end; }
  .items-center-ns { align-items: center; }
  .items-baseline-ns { align-items: baseline; }
  .items-stretch-ns { align-items: stretch; }
  .self-start-ns { align-self: flex-start; }
  .self-end-ns { align-self: flex-end; }
  .self-center-ns { align-self: center; }
  .self-baseline-ns { align-self: baseline; }
  .self-stretch-ns { align-self: stretch; }
  .justify-start-ns { justify-content: flex-start; }
  .justify-end-ns { justify-content: flex-end; }
  .justify-center-ns { justify-content: center; }
  .justify-between-ns { justify-content: space-between; }
  .justify-around-ns { justify-content: space-around; }
  .content-start-ns { align-content: flex-start; }
  .content-end-ns { align-content: flex-end; }
  .content-center-ns { align-content: center; }
  .content-between-ns { align-content: space-between; }
  .content-around-ns { align-content: space-around; }
  .content-stretch-ns { align-content: stretch; }
  .order-0-ns { order: 0; }
  .order-1-ns { order: 1; }
  .order-2-ns { order: 2; }
  .order-3-ns { order: 3; }
  .order-4-ns { order: 4; }
  .order-5-ns { order: 5; }
  .order-6-ns { order: 6; }
  .order-7-ns { order: 7; }
  .order-8-ns { order: 8; }
  .order-last-ns { order: 99999; }
  .flex-grow-0-ns { flex-grow: 0; }
  .flex-grow-1-ns { flex-grow: 1; }
  .flex-shrink-0-ns { flex-shrink: 0; }
  .flex-shrink-1-ns { flex-shrink: 1; }

  /* FLOATS */
  .fl-ns { float: left; _display: inline; }
  .fr-ns { float: right; _display: inline; }
  .fn-ns { float: none; }

  /* FONT STYLE */
  .i-ns { font-style: italic; }
  .fs-normal-ns { font-style: normal; }

  /* FONT WEIGHT */
  .normal-ns { font-weight: normal; }
  .b-ns { font-weight: bold; }
  .fw1-ns { font-weight: 100; }
  .fw2-ns { font-weight: 200; }
  .fw3-ns { font-weight: 300; }
  .fw4-ns { font-weight: 400; }
  .fw5-ns { font-weight: 500; }
  .fw6-ns { font-weight: 600; }
  .fw7-ns { font-weight: 700; }
  .fw8-ns { font-weight: 800; }
  .fw9-ns { font-weight: 900; }

  /* HEIGHTS */
  .h1-ns { height: 1rem; }
  .h2-ns { height: 2rem; }
  .h3-ns { height: 4rem; }
  .h4-ns { height: 8rem; }
  .h5-ns { height: 16rem; }
  .h-25-ns { height: 25%; }
  .h-50-ns { height: 50%; }
  .h-75-ns { height: 75%; }
  .h-100-ns { height: 100%; }
  .min-h-100-ns { min-height: 100%; }
  .vh-25-ns { height: 25vh; }
  .vh-50-ns { height: 50vh; }
  .vh-75-ns { height: 75vh; }
  .vh-100-ns { height: 100vh; }
  .min-vh-100-ns { min-height: 100vh; }
  .h-auto-ns { height: auto; }
  .h-inherit-ns { height: inherit; }

  /* LETTER SPACING */
  .tracked-ns { letter-spacing: .1em; }
  .tracked-tight-ns { letter-spacing: -.05em; }
  .tracked-mega-ns { letter-spacing: .25em; }

  /* LINE HEIGHT / LEADING */
  .lh-solid-ns { line-height: 1; }
  .lh-title-ns { line-height: 1.25; }
  .lh-copy-ns { line-height: 1.5; }

  /* MAX WIDTHS */
  .mw-100-ns { max-width: 100%; }
  .mw1-ns { max-width: 1rem; }
  .mw2-ns { max-width: 2rem; }
  .mw3-ns { max-width: 4rem; }
  .mw4-ns { max-width: 8rem; }
  .mw5-ns { max-width: 16rem; }
  .mw6-ns { max-width: 32rem; }
  .mw7-ns { max-width: 48rem; }
  .mw8-ns { max-width: 64rem; }
  .mw9-ns { max-width: 96rem; }
  .mw-none-ns { max-width: none; }

  /* WIDTHS */
  .w1-ns { width: 1rem; }
  .w2-ns { width: 2rem; }
  .w3-ns { width: 4rem; }
  .w4-ns { width: 8rem; }
  .w5-ns { width: 16rem; }
  .w-10-ns { width: 10%; }
  .w-20-ns { width: 20%; }
  .w-25-ns { width: 25%; }
  .w-30-ns { width: 30%; }
  .w-33-ns { width: 33%; }
  .w-34-ns { width: 34%; }
  .w-40-ns { width: 40%; }
  .w-50-ns { width: 50%; }
  .w-60-ns { width: 60%; }
  .w-70-ns { width: 70%; }
  .w-75-ns { width: 75%; }
  .w-80-ns { width: 80%; }
  .w-90-ns { width: 90%; }
  .w-100-ns { width: 100%; }
  .w-third-ns { width: calc(100% / 3); }
  .w-two-thirds-ns { width: calc(100% / 1.5); }
  .w-auto-ns { width: auto; }

  /* OVERFLOW */
  .overflow-visible-ns { overflow: visible; }
  .overflow-hidden-ns { overflow: hidden; }
  .overflow-scroll-ns { overflow: scroll; }
  .overflow-auto-ns { overflow: auto; }
  .overflow-x-visible-ns { overflow-x: visible; }
  .overflow-x-hidden-ns { overflow-x: hidden; }
  .overflow-x-scroll-ns { overflow-x: scroll; }
  .overflow-x-auto-ns { overflow-x: auto; }
  .overflow-y-visible-ns { overflow-y: visible; }
  .overflow-y-hidden-ns { overflow-y: hidden; }
  .overflow-y-scroll-ns { overflow-y: scroll; }
  .overflow-y-auto-ns { overflow-y: auto; }

  /* POSITIONING */
  .static-ns { position: static; }
  .relative-ns { position: relative; }
  .absolute-ns { position: absolute; }
  .fixed-ns { position: fixed; }

  /* ROTATIONS */
  .rotate-45-ns { transform: rotate(45deg); }
  .rotate-90-ns { transform: rotate(90deg); }
  .rotate-135-ns { transform: rotate(135deg); }
  .rotate-180-ns { transform: rotate(180deg); }
  .rotate-225-ns { transform: rotate(225deg); }
  .rotate-270-ns { transform: rotate(270deg); }
  .rotate-315-ns { transform: rotate(315deg); }

  /* SPACING */
  .pa0-ns { padding: var(--spacing-none); }
  .pa1-ns { padding: var(--spacing-extra-small); }
  .pa2-ns { padding: var(--spacing-small); }
  .pa3-ns { padding: var(--spacing-medium); }
  .pa4-ns { padding: var(--spacing-large); }
  .pa5-ns { padding: var(--spacing-extra-large); }
  .pa6-ns { padding: var(--spacing-extra-extra-large); }
  .pa7-ns { padding: var(--spacing-extra-extra-extra-large); }
  .pl0-ns { padding-left: var(--spacing-none); }
  .pl1-ns { padding-left: var(--spacing-extra-small); }
  .pl2-ns { padding-left: var(--spacing-small); }
  .pl3-ns { padding-left: var(--spacing-medium); }
  .pl4-ns { padding-left: var(--spacing-large); }
  .pl5-ns { padding-left: var(--spacing-extra-large); }
  .pl6-ns { padding-left: var(--spacing-extra-extra-large); }
  .pl7-ns { padding-left: var(--spacing-extra-extra-extra-large); }
  .pr0-ns { padding-right: var(--spacing-none); }
  .pr1-ns { padding-right: var(--spacing-extra-small); }
  .pr2-ns { padding-right: var(--spacing-small); }
  .pr3-ns { padding-right: var(--spacing-medium); }
  .pr4-ns { padding-right: var(--spacing-large); }
  .pr5-ns { padding-right: var(--spacing-extra-large); }
  .pr6-ns { padding-right: var(--spacing-extra-extra-large); }
  .pr7-ns { padding-right: var(--spacing-extra-extra-extra-large); }
  .pb0-ns { padding-bottom: var(--spacing-none); }
  .pb1-ns { padding-bottom: var(--spacing-extra-small); }
  .pb2-ns { padding-bottom: var(--spacing-small); }
  .pb3-ns { padding-bottom: var(--spacing-medium); }
  .pb4-ns { padding-bottom: var(--spacing-large); }
  .pb5-ns { padding-bottom: var(--spacing-extra-large); }
  .pb6-ns { padding-bottom: var(--spacing-extra-extra-large); }
  .pb7-ns { padding-bottom: var(--spacing-extra-extra-extra-large); }
  .pt0-ns { padding-top: var(--spacing-none); }
  .pt1-ns { padding-top: var(--spacing-extra-small); }
  .pt2-ns { padding-top: var(--spacing-small); }
  .pt3-ns { padding-top: var(--spacing-medium); }
  .pt4-ns { padding-top: var(--spacing-large); }
  .pt5-ns { padding-top: var(--spacing-extra-large); }
  .pt6-ns { padding-top: var(--spacing-extra-extra-large); }
  .pt7-ns { padding-top: var(--spacing-extra-extra-extra-large); }
  .pv0-ns { padding-top: var(--spacing-none); padding-bottom: var(--spacing-none); }
  .pv1-ns { padding-top: var(--spacing-extra-small); padding-bottom: var(--spacing-extra-small); }
  .pv2-ns { padding-top: var(--spacing-small); padding-bottom: var(--spacing-small); }
  .pv3-ns { padding-top: var(--spacing-medium); padding-bottom: var(--spacing-medium); }
  .pv4-ns { padding-top: var(--spacing-large); padding-bottom: var(--spacing-large); }
  .pv5-ns { padding-top: var(--spacing-extra-large); padding-bottom: var(--spacing-extra-large); }
  .pv6-ns { padding-top: var(--spacing-extra-extra-large); padding-bottom: var(--spacing-extra-extra-large); }
  .pv7-ns { padding-top: var(--spacing-extra-extra-extra-large); padding-bottom: var(--spacing-extra-extra-extra-large); }
  .ph0-ns { padding-left: var(--spacing-none); padding-right: var(--spacing-none); }
  .ph1-ns { padding-left: var(--spacing-extra-small); padding-right: var(--spacing-extra-small); }
  .ph2-ns { padding-left: var(--spacing-small); padding-right: var(--spacing-small); }
  .ph3-ns { padding-left: var(--spacing-medium); padding-right: var(--spacing-medium); }
  .ph4-ns { padding-left: var(--spacing-large); padding-right: var(--spacing-large); }
  .ph5-ns { padding-left: var(--spacing-extra-large); padding-right: var(--spacing-extra-large); }
  .ph6-ns { padding-left: var(--spacing-extra-extra-large); padding-right: var(--spacing-extra-extra-large); }
  .ph7-ns { padding-left: var(--spacing-extra-extra-extra-large); padding-right: var(--spacing-extra-extra-extra-large); }
  .ma0-ns { margin: var(--spacing-none); }
  .ma1-ns { margin: var(--spacing-extra-small); }
  .ma2-ns { margin: var(--spacing-small); }
  .ma3-ns { margin: var(--spacing-medium); }
  .ma4-ns { margin: var(--spacing-large); }
  .ma5-ns { margin: var(--spacing-extra-large); }
  .ma6-ns { margin: var(--spacing-extra-extra-large); }
  .ma7-ns { margin: var(--spacing-extra-extra-extra-large); }
  .ml0-ns { margin-left: var(--spacing-none); }
  .ml1-ns { margin-left: var(--spacing-extra-small); }
  .ml2-ns { margin-left: var(--spacing-small); }
  .ml3-ns { margin-left: var(--spacing-medium); }
  .ml4-ns { margin-left: var(--spacing-large); }
  .ml5-ns { margin-left: var(--spacing-extra-large); }
  .ml6-ns { margin-left: var(--spacing-extra-extra-large); }
  .ml7-ns { margin-left: var(--spacing-extra-extra-extra-large); }
  .mr0-ns { margin-right: var(--spacing-none); }
  .mr1-ns { margin-right: var(--spacing-extra-small); }
  .mr2-ns { margin-right: var(--spacing-small); }
  .mr3-ns { margin-right: var(--spacing-medium); }
  .mr4-ns { margin-right: var(--spacing-large); }
  .mr5-ns { margin-right: var(--spacing-extra-large); }
  .mr6-ns { margin-right: var(--spacing-extra-extra-large); }
  .mr7-ns { margin-right: var(--spacing-extra-extra-extra-large); }
  .mb0-ns { margin-bottom: var(--spacing-none); }
  .mb1-ns { margin-bottom: var(--spacing-extra-small); }
  .mb2-ns { margin-bottom: var(--spacing-small); }
  .mb3-ns { margin-bottom: var(--spacing-medium); }
  .mb4-ns { margin-bottom: var(--spacing-large); }
  .mb5-ns { margin-bottom: var(--spacing-extra-large); }
  .mb6-ns { margin-bottom: var(--spacing-extra-extra-large); }
  .mb7-ns { margin-bottom: var(--spacing-extra-extra-extra-large); }
  .mt0-ns { margin-top: var(--spacing-none); }
  .mt1-ns { margin-top: var(--spacing-extra-small); }
  .mt2-ns { margin-top: var(--spacing-small); }
  .mt3-ns { margin-top: var(--spacing-medium); }
  .mt4-ns { margin-top: var(--spacing-large); }
  .mt5-ns { margin-top: var(--spacing-extra-large); }
  .mt6-ns { margin-top: var(--spacing-extra-extra-large); }
  .mt7-ns { margin-top: var(--spacing-extra-extra-extra-large); }
  .mv0-ns { margin-top: var(--spacing-none); margin-bottom: var(--spacing-none); }
  .mv1-ns { margin-top: var(--spacing-extra-small); margin-bottom: var(--spacing-extra-small); }
  .mv2-ns { margin-top: var(--spacing-small); margin-bottom: var(--spacing-small); }
  .mv3-ns { margin-top: var(--spacing-medium); margin-bottom: var(--spacing-medium); }
  .mv4-ns { margin-top: var(--spacing-large); margin-bottom: var(--spacing-large); }
  .mv5-ns { margin-top: var(--spacing-extra-large); margin-bottom: var(--spacing-extra-large); }
  .mv6-ns { margin-top: var(--spacing-extra-extra-large); margin-bottom: var(--spacing-extra-extra-large); }
  .mv7-ns { margin-top: var(--spacing-extra-extra-extra-large); margin-bottom: var(--spacing-extra-extra-extra-large); }
  .mh0-ns { margin-left: var(--spacing-none); margin-right: var(--spacing-none); }
  .mh1-ns { margin-left: var(--spacing-extra-small); margin-right: var(--spacing-extra-small); }
  .mh2-ns { margin-left: var(--spacing-small); margin-right: var(--spacing-small); }
  .mh3-ns { margin-left: var(--spacing-medium); margin-right: var(--spacing-medium); }
  .mh4-ns { margin-left: var(--spacing-large); margin-right: var(--spacing-large); }
  .mh5-ns { margin-left: var(--spacing-extra-large); margin-right: var(--spacing-extra-large); }
  .mh6-ns { margin-left: var(--spacing-extra-extra-large); margin-right: var(--spacing-extra-extra-large); }
  .mh7-ns { margin-left: var(--spacing-extra-extra-extra-large); margin-right: var(--spacing-extra-extra-extra-large); }

  /* NEGATIVE MARGINS */
  .na1-ns { margin: calc(-1 * var(--spacing-extra-small)); }
  .na2-ns { margin: calc(-1 * var(--spacing-small)); }
  .na3-ns { margin: calc(-1 * var(--spacing-medium)); }
  .na4-ns { margin: calc(-1 * var(--spacing-large)); }
  .na5-ns { margin: calc(-1 * var(--spacing-extra-large)); }
  .na6-ns { margin: calc(-1 * var(--spacing-extra-extra-large)); }
  .na7-ns { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
  .nl1-ns { margin-left: calc(-1 * var(--spacing-extra-small)); }
  .nl2-ns { margin-left: calc(-1 * var(--spacing-small)); }
  .nl3-ns { margin-left: calc(-1 * var(--spacing-medium)); }
  .nl4-ns { margin-left: calc(-1 * var(--spacing-large)); }
  .nl5-ns { margin-left: calc(-1 * var(--spacing-extra-large)); }
  .nl6-ns { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
  .nl7-ns { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
  .nr1-ns { margin-right: calc(-1 * var(--spacing-extra-small)); }
  .nr2-ns { margin-right: calc(-1 * var(--spacing-small)); }
  .nr3-ns { margin-right: calc(-1 * var(--spacing-medium)); }
  .nr4-ns { margin-right: calc(-1 * var(--spacing-large)); }
  .nr5-ns { margin-right: calc(-1 * var(--spacing-extra-large)); }
  .nr6-ns { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
  .nr7-ns { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
  .nb1-ns { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
  .nb2-ns { margin-bottom: calc(-1 * var(--spacing-small)); }
  .nb3-ns { margin-bottom: calc(-1 * var(--spacing-medium)); }
  .nb4-ns { margin-bottom: calc(-1 * var(--spacing-large)); }
  .nb5-ns { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
  .nb6-ns { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
  .nb7-ns { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
  .nt1-ns { margin-top: calc(-1 * var(--spacing-extra-small)); }
  .nt2-ns { margin-top: calc(-1 * var(--spacing-small)); }
  .nt3-ns { margin-top: calc(-1 * var(--spacing-medium)); }
  .nt4-ns { margin-top: calc(-1 * var(--spacing-large)); }
  .nt5-ns { margin-top: calc(-1 * var(--spacing-extra-large)); }
  .nt6-ns { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
  .nt7-ns { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }

  /* TEXT DECORATION */
  .strike-ns { text-decoration: line-through; }
  .underline-ns { text-decoration: underline; }
  .no-underline-ns { text-decoration: none; }

  /* TEXT ALIGN */
  .tl-ns { text-align: left; }
  .tr-ns { text-align: right; }
  .tc-ns { text-align: center; }
  .tj-ns { text-align: justify; }

  /* TEXT TRANSFORM */
  .ttc-ns { text-transform: capitalize; }
  .ttl-ns { text-transform: lowercase; }
  .ttu-ns { text-transform: uppercase; }
  .ttn-ns { text-transform: none; }

  /* TYPE SCALE */
  .f-6-ns, .f-headline-ns { font-size: 6rem; }
  .f-5-ns, .f-subheadline-ns { font-size: 5rem; }
  .f1-ns { font-size: 3rem; }
  .f2-ns { font-size: 2.25rem; }
  .f3-ns { font-size: 1.5rem; }
  .f4-ns { font-size: 1.25rem; }
  .f5-ns { font-size: 1rem; }
  .f6-ns { font-size: .875rem; }
  .f7-ns { font-size: .75rem; }

  /* TYPOGRAPHY */
  .measure-ns { max-width: 30em; }
  .measure-wide-ns { max-width: 34em; }
  .measure-narrow-ns { max-width: 20em; }
  .indent-ns { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
  .small-caps-ns { font-variant: small-caps; }
  .truncate-ns { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* UTILITIES */
  .center-ns { margin-right: auto; margin-left: auto; }
  .mr-auto-ns { margin-right: auto; }
  .ml-auto-ns { margin-left: auto; }

  /* VISIBILITY */
  .clip-ns { position: fixed !important; _position: absolute !important; clip: rect(.0625rem .0625rem .0625rem .0625rem); clip: rect(.0625rem, .0625rem, .0625rem, .0625rem); }

  /* WHITE SPACE */
  .ws-normal-ns { white-space: normal; }
  .nowrap-ns { white-space: nowrap; }
  .pre-ns { white-space: pre; }

  /* VERTICAL ALIGN */
  .v-base-ns { vertical-align: baseline; }
  .v-mid-ns { vertical-align: middle; }
  .v-top-ns { vertical-align: top; }
  .v-btm-ns { vertical-align: bottom; }
}

/* MEDIUM (-m) */

@media screen and (min-width: 30em) and (max-width: 60em) {
  /* ASPECT RATIOS */
  .aspect-ratio-m { height: 0; position: relative; }
  .aspect-ratio--16x9-m { padding-bottom: 56.25%; }
  .aspect-ratio--9x16-m { padding-bottom: 177.77%; }
  .aspect-ratio--4x3-m { padding-bottom: 75%; }
  .aspect-ratio--3x4-m { padding-bottom: 133.33%; }
  .aspect-ratio--6x4-m { padding-bottom: 66.6%; }
  .aspect-ratio--4x6-m { padding-bottom: 150%; }
  .aspect-ratio--8x5-m { padding-bottom: 62.5%; }
  .aspect-ratio--5x8-m { padding-bottom: 160%; }
  .aspect-ratio--7x5-m { padding-bottom: 71.42%; }
  .aspect-ratio--5x7-m { padding-bottom: 140%; }
  .aspect-ratio--1x1-m { padding-bottom: 100%; }
  .aspect-ratio--object-m { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; }

  /* BACKGROUND SIZE */
  .cover-m { background-size: cover!important; }
  .contain-m { background-size: contain!important; }

  /* BACKGROUND POSITION */
  .bg-center-m { background-repeat: no-repeat; background-position: center center; }
  .bg-top-m { background-repeat: no-repeat; background-position: top center; }
  .bg-right-m { background-repeat: no-repeat; background-position: center right; }
  .bg-bottom-m { background-repeat: no-repeat; background-position: bottom center; }
  .bg-left-m { background-repeat: no-repeat; background-position: center left; }

  /* OUTLINES */
  .outline-m { outline: .0625rem solid; }
  .outline-transparent-m { outline: .0625rem solid transparent; }
  .outline-0-m { outline: 0; }

  /* BORDERS */
  .ba-m { border-style: solid; border-width: .0625rem; }
  .bt-m { border-top-style: solid; border-top-width: .0625rem; }
  .br-m { border-right-style: solid; border-right-width: .0625rem; }
  .bb-m { border-bottom-style: solid; border-bottom-width: .0625rem; }
  .bl-m { border-left-style: solid; border-left-width: .0625rem; }
  .bn-m { border-style: none; border-width: 0; }

  /* BORDER RADIUS */
  .br0-m { border-radius: 0; }
  .br1-m { border-radius: .125rem; }
  .br2-m { border-radius: .25rem; }
  .br3-m { border-radius: .5rem; }
  .br4-m { border-radius: 1rem; }
  .br-100-m { border-radius: 100%; }
  .br-pill-m { border-radius: 9999rem; }
  .br--bottom-m { border-top-left-radius: 0; border-top-right-radius: 0; }
  .br--top-m { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .br--right-m { border-top-left-radius: 0; border-bottom-left-radius: 0; }
  .br--left-m { border-top-right-radius: 0; border-bottom-right-radius: 0; }
  .br-inherit-m { border-radius: inherit; }
  .br-initial-m { border-radius: initial; }
  .br-unset-m { border-radius: unset; }

  /* BORDER STYLES */
  .b--dotted-m { border-style: dotted; }
  .b--dashed-m { border-style: dashed; }
  .b--solid-m { border-style: solid; }
  .b--none-m { border-style: none; }

  /* BORDER WIDTHS */
  .bw0-m { border-width: 0; }
  .bw1-m { border-width: .125rem; }
  .bw2-m { border-width: .25rem; }
  .bw3-m { border-width: .5rem; }
  .bw4-m { border-width: 1rem; }
  .bw5-m { border-width: 2rem; }
  .bt-0-m { border-top-width: 0; }
  .br-0-m { border-right-width: 0; }
  .bb-0-m { border-bottom-width: 0; }
  .bl-0-m { border-left-width: 0; }

  /* BOX-SHADOW */
  .shadow-1-m { box-shadow: 0 0 .25rem .125rem rgba( 0, 0, 0, 0.2 ); }
  .shadow-2-m { box-shadow: 0 0 .5rem .125rem rgba( 0, 0, 0, 0.2 ); }
  .shadow-3-m { box-shadow: .125rem .125rem .25rem .125rem rgba( 0, 0, 0, 0.2 ); }
  .shadow-4-m { box-shadow: .125rem .125rem .5rem 0 rgba( 0, 0, 0, 0.2 ); }
  .shadow-5-m { box-shadow: .25rem .25rem .5rem 0 rgba( 0, 0, 0, 0.2 ); }

  /* COORDINATES */
  .top-0-m { top: 0; }
  .right-0-m { right: 0; }
  .bottom-0-m { bottom: 0; }
  .left-0-m { left: 0; }
  .top-1-m { top: 1rem; }
  .right-1-m { right: 1rem; }
  .bottom-1-m { bottom: 1rem; }
  .left-1-m { left: 1rem; }
  .top-2-m { top: 2rem; }
  .right-2-m { right: 2rem; }
  .bottom-2-m { bottom: 2rem; }
  .left-2-m { left: 2rem; }
  .top--1-m { top: -1rem; }
  .right--1-m { right: -1rem; }
  .bottom--1-m { bottom: -1rem; }
  .left--1-m { left: -1rem; }
  .top--2-m { top: -2rem; }
  .right--2-m { right: -2rem; }
  .bottom--2-m { bottom: -2rem; }
  .left--2-m { left: -2rem; }
  .absolute--fill-m { top: 0; right: 0; bottom: 0; left: 0; }

  /* CLEARFIX */
  .cl-m { clear: left; }
  .cr-m { clear: right; }
  .cb-m { clear: both; }
  .cn-m { clear: none; }

  /* DISPLAY */
  .dn-m { display: none; }
  .di-m { display: inline; }
  .db-m { display: block; }
  .dib-m { display: inline-block; }
  .dit-m { display: inline-table; }
  .dt-m { display: table; }
  .dtc-m { display: table-cell; }
  .dt-row-m { display: table-row; }
  .dt-row-group-m { display: table-row-group; }
  .dt-column-m { display: table-column; }
  .dt-column-group-m { display: table-column-group; }
  .dt--fixed-m { table-layout: fixed; width: 100%; }

  /* FLEXBOX */
  .flex-m { display: flex; }
  .inline-flex-m { display: inline-flex; }
  .flex-auto-m { flex: 1 1 auto; min-width: 0; min-height: 0; }
  .flex-none-m { flex: none; }
  .flex-column-m { flex-direction: column; }
  .flex-row-m { flex-direction: row; }
  .flex-wrap-m { flex-wrap: wrap; }
  .flex-nowrap-m { flex-wrap: nowrap; }
  .flex-wrap-reverse-m { flex-wrap: wrap-reverse; }
  .flex-column-reverse-m { flex-direction: column-reverse; }
  .flex-row-reverse-m { flex-direction: row-reverse; }
  .items-start-m { align-items: flex-start; }
  .items-end-m { align-items: flex-end; }
  .items-center-m { align-items: center; }
  .items-baseline-m { align-items: baseline; }
  .items-stretch-m { align-items: stretch; }
  .self-start-m { align-self: flex-start; }
  .self-end-m { align-self: flex-end; }
  .self-center-m { align-self: center; }
  .self-baseline-m { align-self: baseline; }
  .self-stretch-m { align-self: stretch; }
  .justify-start-m { justify-content: flex-start; }
  .justify-end-m { justify-content: flex-end; }
  .justify-center-m { justify-content: center; }
  .justify-between-m { justify-content: space-between; }
  .justify-around-m { justify-content: space-around; }
  .content-start-m { align-content: flex-start; }
  .content-end-m { align-content: flex-end; }
  .content-center-m { align-content: center; }
  .content-between-m { align-content: space-between; }
  .content-around-m { align-content: space-around; }
  .content-stretch-m { align-content: stretch; }
  .order-0-m { order: 0; }
  .order-1-m { order: 1; }
  .order-2-m { order: 2; }
  .order-3-m { order: 3; }
  .order-4-m { order: 4; }
  .order-5-m { order: 5; }
  .order-6-m { order: 6; }
  .order-7-m { order: 7; }
  .order-8-m { order: 8; }
  .order-last-m { order: 99999; }
  .flex-grow-0-m { flex-grow: 0; }
  .flex-grow-1-m { flex-grow: 1; }
  .flex-shrink-0-m { flex-shrink: 0; }
  .flex-shrink-1-m { flex-shrink: 1; }

  /* FLOATS */
  .fl-m { float: left; _display: inline; }
  .fr-m { float: right; _display: inline; }
  .fn-m { float: none; }

  /* FONT STYLE */
  .i-m { font-style: italic; }
  .fs-normal-m { font-style: normal; }

  /* FONT WEIGHT */
  .normal-m { font-weight: normal; }
  .b-m { font-weight: bold; }
  .fw1-m { font-weight: 100; }
  .fw2-m { font-weight: 200; }
  .fw3-m { font-weight: 300; }
  .fw4-m { font-weight: 400; }
  .fw5-m { font-weight: 500; }
  .fw6-m { font-weight: 600; }
  .fw7-m { font-weight: 700; }
  .fw8-m { font-weight: 800; }
  .fw9-m { font-weight: 900; }

  /* HEIGHTS */
  .h1-m { height: 1rem; }
  .h2-m { height: 2rem; }
  .h3-m { height: 4rem; }
  .h4-m { height: 8rem; }
  .h5-m { height: 16rem; }
  .h-25-m { height: 25%; }
  .h-50-m { height: 50%; }
  .h-75-m { height: 75%; }
  .h-100-m { height: 100%; }
  .min-h-100-m { min-height: 100%; }
  .vh-25-m { height: 25vh; }
  .vh-50-m { height: 50vh; }
  .vh-75-m { height: 75vh; }
  .vh-100-m { height: 100vh; }
  .min-vh-100-m { min-height: 100vh; }
  .h-auto-m { height: auto; }
  .h-inherit-m { height: inherit; }

  /* LETTER SPACING */
  .tracked-m { letter-spacing: .1em; }
  .tracked-tight-m { letter-spacing: -.05em; }
  .tracked-mega-m { letter-spacing: .25em; }

  /* LINE HEIGHT / LEADING */
  .lh-solid-m { line-height: 1; }
  .lh-title-m { line-height: 1.25; }
  .lh-copy-m { line-height: 1.5; }

  /* MAX WIDTHS */
  .mw-100-m { max-width: 100%; }
  .mw1-m { max-width: 1rem; }
  .mw2-m { max-width: 2rem; }
  .mw3-m { max-width: 4rem; }
  .mw4-m { max-width: 8rem; }
  .mw5-m { max-width: 16rem; }
  .mw6-m { max-width: 32rem; }
  .mw7-m { max-width: 48rem; }
  .mw8-m { max-width: 64rem; }
  .mw9-m { max-width: 96rem; }
  .mw-none-m { max-width: none; }

  /* WIDTHS */
  .w1-m { width: 1rem; }
  .w2-m { width: 2rem; }
  .w3-m { width: 4rem; }
  .w4-m { width: 8rem; }
  .w5-m { width: 16rem; }
  .w-10-m { width: 10%; }
  .w-20-m { width: 20%; }
  .w-25-m { width: 25%; }
  .w-30-m { width: 30%; }
  .w-33-m { width: 33%; }
  .w-34-m { width: 34%; }
  .w-40-m { width: 40%; }
  .w-50-m { width: 50%; }
  .w-60-m { width: 60%; }
  .w-70-m { width: 70%; }
  .w-75-m { width: 75%; }
  .w-80-m { width: 80%; }
  .w-90-m { width: 90%; }
  .w-100-m { width: 100%; }
  .w-third-m { width: calc(100% / 3); }
  .w-two-thirds-m { width: calc(100% / 1.5); }
  .w-auto-m { width: auto; }

  /* OVERFLOW */
  .overflow-visible-m { overflow: visible; }
  .overflow-hidden-m { overflow: hidden; }
  .overflow-scroll-m { overflow: scroll; }
  .overflow-auto-m { overflow: auto; }
  .overflow-x-visible-m { overflow-x: visible; }
  .overflow-x-hidden-m { overflow-x: hidden; }
  .overflow-x-scroll-m { overflow-x: scroll; }
  .overflow-x-auto-m { overflow-x: auto; }
  .overflow-y-visible-m { overflow-y: visible; }
  .overflow-y-hidden-m { overflow-y: hidden; }
  .overflow-y-scroll-m { overflow-y: scroll; }
  .overflow-y-auto-m { overflow-y: auto; }

  /* POSITIONING */
  .static-m { position: static; }
  .relative-m { position: relative; }
  .absolute-m { position: absolute; }
  .fixed-m { position: fixed; }

  /* ROTATIONS */
  .rotate-45-m { transform: rotate(45deg); }
  .rotate-90-m { transform: rotate(90deg); }
  .rotate-135-m { transform: rotate(135deg); }
  .rotate-180-m { transform: rotate(180deg); }
  .rotate-225-m { transform: rotate(225deg); }
  .rotate-270-m { transform: rotate(270deg); }
  .rotate-315-m { transform: rotate(315deg); }

  /* SPACING */
  .pa0-m { padding: var(--spacing-none); }
  .pa1-m { padding: var(--spacing-extra-small); }
  .pa2-m { padding: var(--spacing-small); }
  .pa3-m { padding: var(--spacing-medium); }
  .pa4-m { padding: var(--spacing-large); }
  .pa5-m { padding: var(--spacing-extra-large); }
  .pa6-m { padding: var(--spacing-extra-extra-large); }
  .pa7-m { padding: var(--spacing-extra-extra-extra-large); }
  .pl0-m { padding-left: var(--spacing-none); }
  .pl1-m { padding-left: var(--spacing-extra-small); }
  .pl2-m { padding-left: var(--spacing-small); }
  .pl3-m { padding-left: var(--spacing-medium); }
  .pl4-m { padding-left: var(--spacing-large); }
  .pl5-m { padding-left: var(--spacing-extra-large); }
  .pl6-m { padding-left: var(--spacing-extra-extra-large); }
  .pl7-m { padding-left: var(--spacing-extra-extra-extra-large); }
  .pr0-m { padding-right: var(--spacing-none); }
  .pr1-m { padding-right: var(--spacing-extra-small); }
  .pr2-m { padding-right: var(--spacing-small); }
  .pr3-m { padding-right: var(--spacing-medium); }
  .pr4-m { padding-right: var(--spacing-large); }
  .pr5-m { padding-right: var(--spacing-extra-large); }
  .pr6-m { padding-right: var(--spacing-extra-extra-large); }
  .pr7-m { padding-right: var(--spacing-extra-extra-extra-large); }
  .pb0-m { padding-bottom: var(--spacing-none); }
  .pb1-m { padding-bottom: var(--spacing-extra-small); }
  .pb2-m { padding-bottom: var(--spacing-small); }
  .pb3-m { padding-bottom: var(--spacing-medium); }
  .pb4-m { padding-bottom: var(--spacing-large); }
  .pb5-m { padding-bottom: var(--spacing-extra-large); }
  .pb6-m { padding-bottom: var(--spacing-extra-extra-large); }
  .pb7-m { padding-bottom: var(--spacing-extra-extra-extra-large); }
  .pt0-m { padding-top: var(--spacing-none); }
  .pt1-m { padding-top: var(--spacing-extra-small); }
  .pt2-m { padding-top: var(--spacing-small); }
  .pt3-m { padding-top: var(--spacing-medium); }
  .pt4-m { padding-top: var(--spacing-large); }
  .pt5-m { padding-top: var(--spacing-extra-large); }
  .pt6-m { padding-top: var(--spacing-extra-extra-large); }
  .pt7-m { padding-top: var(--spacing-extra-extra-extra-large); }
  .pv0-m { padding-top: var(--spacing-none); padding-bottom: var(--spacing-none); }
  .pv1-m { padding-top: var(--spacing-extra-small); padding-bottom: var(--spacing-extra-small); }
  .pv2-m { padding-top: var(--spacing-small); padding-bottom: var(--spacing-small); }
  .pv3-m { padding-top: var(--spacing-medium); padding-bottom: var(--spacing-medium); }
  .pv4-m { padding-top: var(--spacing-large); padding-bottom: var(--spacing-large); }
  .pv5-m { padding-top: var(--spacing-extra-large); padding-bottom: var(--spacing-extra-large); }
  .pv6-m { padding-top: var(--spacing-extra-extra-large); padding-bottom: var(--spacing-extra-extra-large); }
  .pv7-m { padding-top: var(--spacing-extra-extra-extra-large); padding-bottom: var(--spacing-extra-extra-extra-large); }
  .ph0-m { padding-left: var(--spacing-none); padding-right: var(--spacing-none); }
  .ph1-m { padding-left: var(--spacing-extra-small); padding-right: var(--spacing-extra-small); }
  .ph2-m { padding-left: var(--spacing-small); padding-right: var(--spacing-small); }
  .ph3-m { padding-left: var(--spacing-medium); padding-right: var(--spacing-medium); }
  .ph4-m { padding-left: var(--spacing-large); padding-right: var(--spacing-large); }
  .ph5-m { padding-left: var(--spacing-extra-large); padding-right: var(--spacing-extra-large); }
  .ph6-m { padding-left: var(--spacing-extra-extra-large); padding-right: var(--spacing-extra-extra-large); }
  .ph7-m { padding-left: var(--spacing-extra-extra-extra-large); padding-right: var(--spacing-extra-extra-extra-large); }
  .ma0-m { margin: var(--spacing-none); }
  .ma1-m { margin: var(--spacing-extra-small); }
  .ma2-m { margin: var(--spacing-small); }
  .ma3-m { margin: var(--spacing-medium); }
  .ma4-m { margin: var(--spacing-large); }
  .ma5-m { margin: var(--spacing-extra-large); }
  .ma6-m { margin: var(--spacing-extra-extra-large); }
  .ma7-m { margin: var(--spacing-extra-extra-extra-large); }
  .ml0-m { margin-left: var(--spacing-none); }
  .ml1-m { margin-left: var(--spacing-extra-small); }
  .ml2-m { margin-left: var(--spacing-small); }
  .ml3-m { margin-left: var(--spacing-medium); }
  .ml4-m { margin-left: var(--spacing-large); }
  .ml5-m { margin-left: var(--spacing-extra-large); }
  .ml6-m { margin-left: var(--spacing-extra-extra-large); }
  .ml7-m { margin-left: var(--spacing-extra-extra-extra-large); }
  .mr0-m { margin-right: var(--spacing-none); }
  .mr1-m { margin-right: var(--spacing-extra-small); }
  .mr2-m { margin-right: var(--spacing-small); }
  .mr3-m { margin-right: var(--spacing-medium); }
  .mr4-m { margin-right: var(--spacing-large); }
  .mr5-m { margin-right: var(--spacing-extra-large); }
  .mr6-m { margin-right: var(--spacing-extra-extra-large); }
  .mr7-m { margin-right: var(--spacing-extra-extra-extra-large); }
  .mb0-m { margin-bottom: var(--spacing-none); }
  .mb1-m { margin-bottom: var(--spacing-extra-small); }
  .mb2-m { margin-bottom: var(--spacing-small); }
  .mb3-m { margin-bottom: var(--spacing-medium); }
  .mb4-m { margin-bottom: var(--spacing-large); }
  .mb5-m { margin-bottom: var(--spacing-extra-large); }
  .mb6-m { margin-bottom: var(--spacing-extra-extra-large); }
  .mb7-m { margin-bottom: var(--spacing-extra-extra-extra-large); }
  .mt0-m { margin-top: var(--spacing-none); }
  .mt1-m { margin-top: var(--spacing-extra-small); }
  .mt2-m { margin-top: var(--spacing-small); }
  .mt3-m { margin-top: var(--spacing-medium); }
  .mt4-m { margin-top: var(--spacing-large); }
  .mt5-m { margin-top: var(--spacing-extra-large); }
  .mt6-m { margin-top: var(--spacing-extra-extra-large); }
  .mt7-m { margin-top: var(--spacing-extra-extra-extra-large); }
  .mv0-m { margin-top: var(--spacing-none); margin-bottom: var(--spacing-none); }
  .mv1-m { margin-top: var(--spacing-extra-small); margin-bottom: var(--spacing-extra-small); }
  .mv2-m { margin-top: var(--spacing-small); margin-bottom: var(--spacing-small); }
  .mv3-m { margin-top: var(--spacing-medium); margin-bottom: var(--spacing-medium); }
  .mv4-m { margin-top: var(--spacing-large); margin-bottom: var(--spacing-large); }
  .mv5-m { margin-top: var(--spacing-extra-large); margin-bottom: var(--spacing-extra-large); }
  .mv6-m { margin-top: var(--spacing-extra-extra-large); margin-bottom: var(--spacing-extra-extra-large); }
  .mv7-m { margin-top: var(--spacing-extra-extra-extra-large); margin-bottom: var(--spacing-extra-extra-extra-large); }
  .mh0-m { margin-left: var(--spacing-none); margin-right: var(--spacing-none); }
  .mh1-m { margin-left: var(--spacing-extra-small); margin-right: var(--spacing-extra-small); }
  .mh2-m { margin-left: var(--spacing-small); margin-right: var(--spacing-small); }
  .mh3-m { margin-left: var(--spacing-medium); margin-right: var(--spacing-medium); }
  .mh4-m { margin-left: var(--spacing-large); margin-right: var(--spacing-large); }
  .mh5-m { margin-left: var(--spacing-extra-large); margin-right: var(--spacing-extra-large); }
  .mh6-m { margin-left: var(--spacing-extra-extra-large); margin-right: var(--spacing-extra-extra-large); }
  .mh7-m { margin-left: var(--spacing-extra-extra-extra-large); margin-right: var(--spacing-extra-extra-extra-large); }

  /* NEGATIVE MARGINS */
  .na1-m { margin: calc(-1 * var(--spacing-extra-small)); }
  .na2-m { margin: calc(-1 * var(--spacing-small)); }
  .na3-m { margin: calc(-1 * var(--spacing-medium)); }
  .na4-m { margin: calc(-1 * var(--spacing-large)); }
  .na5-m { margin: calc(-1 * var(--spacing-extra-large)); }
  .na6-m { margin: calc(-1 * var(--spacing-extra-extra-large)); }
  .na7-m { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
  .nl1-m { margin-left: calc(-1 * var(--spacing-extra-small)); }
  .nl2-m { margin-left: calc(-1 * var(--spacing-small)); }
  .nl3-m { margin-left: calc(-1 * var(--spacing-medium)); }
  .nl4-m { margin-left: calc(-1 * var(--spacing-large)); }
  .nl5-m { margin-left: calc(-1 * var(--spacing-extra-large)); }
  .nl6-m { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
  .nl7-m { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
  .nr1-m { margin-right: calc(-1 * var(--spacing-extra-small)); }
  .nr2-m { margin-right: calc(-1 * var(--spacing-small)); }
  .nr3-m { margin-right: calc(-1 * var(--spacing-medium)); }
  .nr4-m { margin-right: calc(-1 * var(--spacing-large)); }
  .nr5-m { margin-right: calc(-1 * var(--spacing-extra-large)); }
  .nr6-m { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
  .nr7-m { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
  .nb1-m { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
  .nb2-m { margin-bottom: calc(-1 * var(--spacing-small)); }
  .nb3-m { margin-bottom: calc(-1 * var(--spacing-medium)); }
  .nb4-m { margin-bottom: calc(-1 * var(--spacing-large)); }
  .nb5-m { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
  .nb6-m { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
  .nb7-m { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
  .nt1-m { margin-top: calc(-1 * var(--spacing-extra-small)); }
  .nt2-m { margin-top: calc(-1 * var(--spacing-small)); }
  .nt3-m { margin-top: calc(-1 * var(--spacing-medium)); }
  .nt4-m { margin-top: calc(-1 * var(--spacing-large)); }
  .nt5-m { margin-top: calc(-1 * var(--spacing-extra-large)); }
  .nt6-m { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
  .nt7-m { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }

  /* TEXT DECORATION */
  .strike-m { text-decoration: line-through; }
  .underline-m { text-decoration: underline; }
  .no-underline-m { text-decoration: none; }

  /* TEXT ALIGN */
  .tl-m { text-align: left; }
  .tr-m { text-align: right; }
  .tc-m { text-align: center; }
  .tj-m { text-align: justify; }

  /* TEXT TRANSFORM */
  .ttc-m { text-transform: capitalize; }
  .ttl-m { text-transform: lowercase; }
  .ttu-m { text-transform: uppercase; }
  .ttn-m { text-transform: none; }

  /* TYPE SCALE */
  .f-6-m, .f-headline-m { font-size: 6rem; }
  .f-5-m, .f-subheadline-m { font-size: 5rem; }
  .f1-m { font-size: 3rem; }
  .f2-m { font-size: 2.25rem; }
  .f3-m { font-size: 1.5rem; }
  .f4-m { font-size: 1.25rem; }
  .f5-m { font-size: 1rem; }
  .f6-m { font-size: .875rem; }
  .f7-m { font-size: .75rem; }

  /* TYPOGRAPHY */
  .measure-m { max-width: 30em; }
  .measure-wide-m { max-width: 34em; }
  .measure-narrow-m { max-width: 20em; }
  .indent-m { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
  .small-caps-m { font-variant: small-caps; }
  .truncate-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* UTILITIES */
  .center-m { margin-right: auto; margin-left: auto; }
  .mr-auto-m { margin-right: auto; }
  .ml-auto-m { margin-left: auto; }

  /* VISIBILITY */
  .clip-m { position: fixed !important; _position: absolute !important; clip: rect(.0625rem .0625rem .0625rem .0625rem); clip: rect(.0625rem, .0625rem, .0625rem, .0625rem); }

  /* WHITE SPACE */
  .ws-normal-m { white-space: normal; }
  .nowrap-m { white-space: nowrap; }
  .pre-m { white-space: pre; }

  /* VERTICAL ALIGN */
  .v-base-m { vertical-align: baseline; }
  .v-mid-m { vertical-align: middle; }
  .v-top-m { vertical-align: top; }
  .v-btm-m { vertical-align: bottom; }
}

/* LARGE (-l) */

@media screen and (min-width: 60em) {
  /* ASPECT RATIOS */
  .aspect-ratio-l { height: 0; position: relative; }
  .aspect-ratio--16x9-l { padding-bottom: 56.25%; }
  .aspect-ratio--9x16-l { padding-bottom: 177.77%; }
  .aspect-ratio--4x3-l { padding-bottom: 75%; }
  .aspect-ratio--3x4-l { padding-bottom: 133.33%; }
  .aspect-ratio--6x4-l { padding-bottom: 66.6%; }
  .aspect-ratio--4x6-l { padding-bottom: 150%; }
  .aspect-ratio--8x5-l { padding-bottom: 62.5%; }
  .aspect-ratio--5x8-l { padding-bottom: 160%; }
  .aspect-ratio--7x5-l { padding-bottom: 71.42%; }
  .aspect-ratio--5x7-l { padding-bottom: 140%; }
  .aspect-ratio--1x1-l { padding-bottom: 100%; }
  .aspect-ratio--object-l { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; }

  /* BACKGROUND SIZE */
  .cover-l { background-size: cover!important; }
  .contain-l { background-size: contain!important; }

  /* BACKGROUND POSITION */
  .bg-center-l { background-repeat: no-repeat; background-position: center center; }
  .bg-top-l { background-repeat: no-repeat; background-position: top center; }
  .bg-right-l { background-repeat: no-repeat; background-position: center right; }
  .bg-bottom-l { background-repeat: no-repeat; background-position: bottom center; }
  .bg-left-l { background-repeat: no-repeat; background-position: center left; }

  /* OUTLINES */
  .outline-l { outline: .0625rem solid; }
  .outline-transparent-l { outline: .0625rem solid transparent; }
  .outline-0-l { outline: 0; }

  /* BORDERS */
  .ba-l { border-style: solid; border-width: .0625rem; }
  .bt-l { border-top-style: solid; border-top-width: .0625rem; }
  .br-l { border-right-style: solid; border-right-width: .0625rem; }
  .bb-l { border-bottom-style: solid; border-bottom-width: .0625rem; }
  .bl-l { border-left-style: solid; border-left-width: .0625rem; }
  .bn-l { border-style: none; border-width: 0; }

  /* BORDER RADIUS */
  .br0-l { border-radius: 0; }
  .br1-l { border-radius: .125rem; }
  .br2-l { border-radius: .25rem; }
  .br3-l { border-radius: .5rem; }
  .br4-l { border-radius: 1rem; }
  .br-100-l { border-radius: 100%; }
  .br-pill-l { border-radius: 9999rem; }
  .br--bottom-l { border-top-left-radius: 0; border-top-right-radius: 0; }
  .br--top-l { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .br--right-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
  .br--left-l { border-top-right-radius: 0; border-bottom-right-radius: 0; }
  .br-inherit-l { border-radius: inherit; }
  .br-initial-l { border-radius: initial; }
  .br-unset-l { border-radius: unset; }

  /* BORDER STYLES */
  .b--dotted-l { border-style: dotted; }
  .b--dashed-l { border-style: dashed; }
  .b--solid-l { border-style: solid; }
  .b--none-l { border-style: none; }

  /* BORDER WIDTHS */
  .bw0-l { border-width: 0; }
  .bw1-l { border-width: .125rem; }
  .bw2-l { border-width: .25rem; }
  .bw3-l { border-width: .5rem; }
  .bw4-l { border-width: 1rem; }
  .bw5-l { border-width: 2rem; }
  .bt-0-l { border-top-width: 0; }
  .br-0-l { border-right-width: 0; }
  .bb-0-l { border-bottom-width: 0; }
  .bl-0-l { border-left-width: 0; }

  /* BOX-SHADOW */
  .shadow-1-l { box-shadow: 0 0 .25rem .125rem rgba( 0, 0, 0, 0.2 ); }
  .shadow-2-l { box-shadow: 0 0 .5rem .125rem rgba( 0, 0, 0, 0.2 ); }
  .shadow-3-l { box-shadow: .125rem .125rem .25rem .125rem rgba( 0, 0, 0, 0.2 ); }
  .shadow-4-l { box-shadow: .125rem .125rem .5rem 0 rgba( 0, 0, 0, 0.2 ); }
  .shadow-5-l { box-shadow: .25rem .25rem .5rem 0 rgba( 0, 0, 0, 0.2 ); }

  /* COORDINATES */
  .top-0-l { top: 0; }
  .right-0-l { right: 0; }
  .bottom-0-l { bottom: 0; }
  .left-0-l { left: 0; }
  .top-1-l { top: 1rem; }
  .right-1-l { right: 1rem; }
  .bottom-1-l { bottom: 1rem; }
  .left-1-l { left: 1rem; }
  .top-2-l { top: 2rem; }
  .right-2-l { right: 2rem; }
  .bottom-2-l { bottom: 2rem; }
  .left-2-l { left: 2rem; }
  .top--1-l { top: -1rem; }
  .right--1-l { right: -1rem; }
  .bottom--1-l { bottom: -1rem; }
  .left--1-l { left: -1rem; }
  .top--2-l { top: -2rem; }
  .right--2-l { right: -2rem; }
  .bottom--2-l { bottom: -2rem; }
  .left--2-l { left: -2rem; }
  .absolute--fill-l { top: 0; right: 0; bottom: 0; left: 0; }

  /* CLEARFIX */
  .cl-l { clear: left; }
  .cr-l { clear: right; }
  .cb-l { clear: both; }
  .cn-l { clear: none; }

  /* DISPLAY */
  .dn-l { display: none; }
  .di-l { display: inline; }
  .db-l { display: block; }
  .dib-l { display: inline-block; }
  .dit-l { display: inline-table; }
  .dt-l { display: table; }
  .dtc-l { display: table-cell; }
  .dt-row-l { display: table-row; }
  .dt-row-group-l { display: table-row-group; }
  .dt-column-l { display: table-column; }
  .dt-column-group-l { display: table-column-group; }
  .dt--fixed-l { table-layout: fixed; width: 100%; }

  /* FLEXBOX */
  .flex-l { display: flex; }
  .inline-flex-l { display: inline-flex; }
  .flex-auto-l { flex: 1 1 auto; min-width: 0; min-height: 0; }
  .flex-none-l { flex: none; }
  .flex-column-l { flex-direction: column; }
  .flex-row-l { flex-direction: row; }
  .flex-wrap-l { flex-wrap: wrap; }
  .flex-nowrap-l { flex-wrap: nowrap; }
  .flex-wrap-reverse-l { flex-wrap: wrap-reverse; }
  .flex-column-reverse-l { flex-direction: column-reverse; }
  .flex-row-reverse-l { flex-direction: row-reverse; }
  .items-start-l { align-items: flex-start; }
  .items-end-l { align-items: flex-end; }
  .items-center-l { align-items: center; }
  .items-baseline-l { align-items: baseline; }
  .items-stretch-l { align-items: stretch; }
  .self-start-l { align-self: flex-start; }
  .self-end-l { align-self: flex-end; }
  .self-center-l { align-self: center; }
  .self-baseline-l { align-self: baseline; }
  .self-stretch-l { align-self: stretch; }
  .justify-start-l { justify-content: flex-start; }
  .justify-end-l { justify-content: flex-end; }
  .justify-center-l { justify-content: center; }
  .justify-between-l { justify-content: space-between; }
  .justify-around-l { justify-content: space-around; }
  .content-start-l { align-content: flex-start; }
  .content-end-l { align-content: flex-end; }
  .content-center-l { align-content: center; }
  .content-between-l { align-content: space-between; }
  .content-around-l { align-content: space-around; }
  .content-stretch-l { align-content: stretch; }
  .order-0-l { order: 0; }
  .order-1-l { order: 1; }
  .order-2-l { order: 2; }
  .order-3-l { order: 3; }
  .order-4-l { order: 4; }
  .order-5-l { order: 5; }
  .order-6-l { order: 6; }
  .order-7-l { order: 7; }
  .order-8-l { order: 8; }
  .order-last-l { order: 99999; }
  .flex-grow-0-l { flex-grow: 0; }
  .flex-grow-1-l { flex-grow: 1; }
  .flex-shrink-0-l { flex-shrink: 0; }
  .flex-shrink-1-l { flex-shrink: 1; }

  /* FLOATS */
  .fl-l { float: left; _display: inline; }
  .fr-l { float: right; _display: inline; }
  .fn-l { float: none; }

  /* FONT STYLE */
  .i-l { font-style: italic; }
  .fs-normal-l { font-style: normal; }

  /* FONT WEIGHT */
  .normal-l { font-weight: normal; }
  .b-l { font-weight: bold; }
  .fw1-l { font-weight: 100; }
  .fw2-l { font-weight: 200; }
  .fw3-l { font-weight: 300; }
  .fw4-l { font-weight: 400; }
  .fw5-l { font-weight: 500; }
  .fw6-l { font-weight: 600; }
  .fw7-l { font-weight: 700; }
  .fw8-l { font-weight: 800; }
  .fw9-l { font-weight: 900; }

  /* HEIGHTS */
  .h1-l { height: 1rem; }
  .h2-l { height: 2rem; }
  .h3-l { height: 4rem; }
  .h4-l { height: 8rem; }
  .h5-l { height: 16rem; }
  .h-25-l { height: 25%; }
  .h-50-l { height: 50%; }
  .h-75-l { height: 75%; }
  .h-100-l { height: 100%; }
  .min-h-100-l { min-height: 100%; }
  .vh-25-l { height: 25vh; }
  .vh-50-l { height: 50vh; }
  .vh-75-l { height: 75vh; }
  .vh-100-l { height: 100vh; }
  .min-vh-100-l { min-height: 100vh; }
  .h-auto-l { height: auto; }
  .h-inherit-l { height: inherit; }

  /* LETTER SPACING */
  .tracked-l { letter-spacing: .1em; }
  .tracked-tight-l { letter-spacing: -.05em; }
  .tracked-mega-l { letter-spacing: .25em; }

  /* LINE HEIGHT / LEADING */
  .lh-solid-l { line-height: 1; }
  .lh-title-l { line-height: 1.25; }
  .lh-copy-l { line-height: 1.5; }

  /* MAX WIDTHS */
  .mw-100-l { max-width: 100%; }
  .mw1-l { max-width: 1rem; }
  .mw2-l { max-width: 2rem; }
  .mw3-l { max-width: 4rem; }
  .mw4-l { max-width: 8rem; }
  .mw5-l { max-width: 16rem; }
  .mw6-l { max-width: 32rem; }
  .mw7-l { max-width: 48rem; }
  .mw8-l { max-width: 64rem; }
  .mw9-l { max-width: 96rem; }
  .mw-none-l { max-width: none; }

  /* WIDTHS */
  .w1-l { width: 1rem; }
  .w2-l { width: 2rem; }
  .w3-l { width: 4rem; }
  .w4-l { width: 8rem; }
  .w5-l { width: 16rem; }
  .w-10-l { width: 10%; }
  .w-20-l { width: 20%; }
  .w-25-l { width: 25%; }
  .w-30-l { width: 30%; }
  .w-33-l { width: 33%; }
  .w-34-l { width: 34%; }
  .w-40-l { width: 40%; }
  .w-50-l { width: 50%; }
  .w-60-l { width: 60%; }
  .w-70-l { width: 70%; }
  .w-75-l { width: 75%; }
  .w-80-l { width: 80%; }
  .w-90-l { width: 90%; }
  .w-100-l { width: 100%; }
  .w-third-l { width: calc(100% / 3); }
  .w-two-thirds-l { width: calc(100% / 1.5); }
  .w-auto-l { width: auto; }

  /* OVERFLOW */
  .overflow-visible-l { overflow: visible; }
  .overflow-hidden-l { overflow: hidden; }
  .overflow-scroll-l { overflow: scroll; }
  .overflow-auto-l { overflow: auto; }
  .overflow-x-visible-l { overflow-x: visible; }
  .overflow-x-hidden-l { overflow-x: hidden; }
  .overflow-x-scroll-l { overflow-x: scroll; }
  .overflow-x-auto-l { overflow-x: auto; }
  .overflow-y-visible-l { overflow-y: visible; }
  .overflow-y-hidden-l { overflow-y: hidden; }
  .overflow-y-scroll-l { overflow-y: scroll; }
  .overflow-y-auto-l { overflow-y: auto; }

  /* POSITIONING */
  .static-l { position: static; }
  .relative-l { position: relative; }
  .absolute-l { position: absolute; }
  .fixed-l { position: fixed; }

  /* ROTATIONS */
  .rotate-45-l { transform: rotate(45deg); }
  .rotate-90-l { transform: rotate(90deg); }
  .rotate-135-l { transform: rotate(135deg); }
  .rotate-180-l { transform: rotate(180deg); }
  .rotate-225-l { transform: rotate(225deg); }
  .rotate-270-l { transform: rotate(270deg); }
  .rotate-315-l { transform: rotate(315deg); }

  /* SPACING */
  .pa0-l { padding: var(--spacing-none); }
  .pa1-l { padding: var(--spacing-extra-small); }
  .pa2-l { padding: var(--spacing-small); }
  .pa3-l { padding: var(--spacing-medium); }
  .pa4-l { padding: var(--spacing-large); }
  .pa5-l { padding: var(--spacing-extra-large); }
  .pa6-l { padding: var(--spacing-extra-extra-large); }
  .pa7-l { padding: var(--spacing-extra-extra-extra-large); }
  .pl0-l { padding-left: var(--spacing-none); }
  .pl1-l { padding-left: var(--spacing-extra-small); }
  .pl2-l { padding-left: var(--spacing-small); }
  .pl3-l { padding-left: var(--spacing-medium); }
  .pl4-l { padding-left: var(--spacing-large); }
  .pl5-l { padding-left: var(--spacing-extra-large); }
  .pl6-l { padding-left: var(--spacing-extra-extra-large); }
  .pl7-l { padding-left: var(--spacing-extra-extra-extra-large); }
  .pr0-l { padding-right: var(--spacing-none); }
  .pr1-l { padding-right: var(--spacing-extra-small); }
  .pr2-l { padding-right: var(--spacing-small); }
  .pr3-l { padding-right: var(--spacing-medium); }
  .pr4-l { padding-right: var(--spacing-large); }
  .pr5-l { padding-right: var(--spacing-extra-large); }
  .pr6-l { padding-right: var(--spacing-extra-extra-large); }
  .pr7-l { padding-right: var(--spacing-extra-extra-extra-large); }
  .pb0-l { padding-bottom: var(--spacing-none); }
  .pb1-l { padding-bottom: var(--spacing-extra-small); }
  .pb2-l { padding-bottom: var(--spacing-small); }
  .pb3-l { padding-bottom: var(--spacing-medium); }
  .pb4-l { padding-bottom: var(--spacing-large); }
  .pb5-l { padding-bottom: var(--spacing-extra-large); }
  .pb6-l { padding-bottom: var(--spacing-extra-extra-large); }
  .pb7-l { padding-bottom: var(--spacing-extra-extra-extra-large); }
  .pt0-l { padding-top: var(--spacing-none); }
  .pt1-l { padding-top: var(--spacing-extra-small); }
  .pt2-l { padding-top: var(--spacing-small); }
  .pt3-l { padding-top: var(--spacing-medium); }
  .pt4-l { padding-top: var(--spacing-large); }
  .pt5-l { padding-top: var(--spacing-extra-large); }
  .pt6-l { padding-top: var(--spacing-extra-extra-large); }
  .pt7-l { padding-top: var(--spacing-extra-extra-extra-large); }
  .pv0-l { padding-top: var(--spacing-none); padding-bottom: var(--spacing-none); }
  .pv1-l { padding-top: var(--spacing-extra-small); padding-bottom: var(--spacing-extra-small); }
  .pv2-l { padding-top: var(--spacing-small); padding-bottom: var(--spacing-small); }
  .pv3-l { padding-top: var(--spacing-medium); padding-bottom: var(--spacing-medium); }
  .pv4-l { padding-top: var(--spacing-large); padding-bottom: var(--spacing-large); }
  .pv5-l { padding-top: var(--spacing-extra-large); padding-bottom: var(--spacing-extra-large); }
  .pv6-l { padding-top: var(--spacing-extra-extra-large); padding-bottom: var(--spacing-extra-extra-large); }
  .pv7-l { padding-top: var(--spacing-extra-extra-extra-large); padding-bottom: var(--spacing-extra-extra-extra-large); }
  .ph0-l { padding-left: var(--spacing-none); padding-right: var(--spacing-none); }
  .ph1-l { padding-left: var(--spacing-extra-small); padding-right: var(--spacing-extra-small); }
  .ph2-l { padding-left: var(--spacing-small); padding-right: var(--spacing-small); }
  .ph3-l { padding-left: var(--spacing-medium); padding-right: var(--spacing-medium); }
  .ph4-l { padding-left: var(--spacing-large); padding-right: var(--spacing-large); }
  .ph5-l { padding-left: var(--spacing-extra-large); padding-right: var(--spacing-extra-large); }
  .ph6-l { padding-left: var(--spacing-extra-extra-large); padding-right: var(--spacing-extra-extra-large); }
  .ph7-l { padding-left: var(--spacing-extra-extra-extra-large); padding-right: var(--spacing-extra-extra-extra-large); }
  .ma0-l { margin: var(--spacing-none); }
  .ma1-l { margin: var(--spacing-extra-small); }
  .ma2-l { margin: var(--spacing-small); }
  .ma3-l { margin: var(--spacing-medium); }
  .ma4-l { margin: var(--spacing-large); }
  .ma5-l { margin: var(--spacing-extra-large); }
  .ma6-l { margin: var(--spacing-extra-extra-large); }
  .ma7-l { margin: var(--spacing-extra-extra-extra-large); }
  .ml0-l { margin-left: var(--spacing-none); }
  .ml1-l { margin-left: var(--spacing-extra-small); }
  .ml2-l { margin-left: var(--spacing-small); }
  .ml3-l { margin-left: var(--spacing-medium); }
  .ml4-l { margin-left: var(--spacing-large); }
  .ml5-l { margin-left: var(--spacing-extra-large); }
  .ml6-l { margin-left: var(--spacing-extra-extra-large); }
  .ml7-l { margin-left: var(--spacing-extra-extra-extra-large); }
  .mr0-l { margin-right: var(--spacing-none); }
  .mr1-l { margin-right: var(--spacing-extra-small); }
  .mr2-l { margin-right: var(--spacing-small); }
  .mr3-l { margin-right: var(--spacing-medium); }
  .mr4-l { margin-right: var(--spacing-large); }
  .mr5-l { margin-right: var(--spacing-extra-large); }
  .mr6-l { margin-right: var(--spacing-extra-extra-large); }
  .mr7-l { margin-right: var(--spacing-extra-extra-extra-large); }
  .mb0-l { margin-bottom: var(--spacing-none); }
  .mb1-l { margin-bottom: var(--spacing-extra-small); }
  .mb2-l { margin-bottom: var(--spacing-small); }
  .mb3-l { margin-bottom: var(--spacing-medium); }
  .mb4-l { margin-bottom: var(--spacing-large); }
  .mb5-l { margin-bottom: var(--spacing-extra-large); }
  .mb6-l { margin-bottom: var(--spacing-extra-extra-large); }
  .mb7-l { margin-bottom: var(--spacing-extra-extra-extra-large); }
  .mt0-l { margin-top: var(--spacing-none); }
  .mt1-l { margin-top: var(--spacing-extra-small); }
  .mt2-l { margin-top: var(--spacing-small); }
  .mt3-l { margin-top: var(--spacing-medium); }
  .mt4-l { margin-top: var(--spacing-large); }
  .mt5-l { margin-top: var(--spacing-extra-large); }
  .mt6-l { margin-top: var(--spacing-extra-extra-large); }
  .mt7-l { margin-top: var(--spacing-extra-extra-extra-large); }
  .mv0-l { margin-top: var(--spacing-none); margin-bottom: var(--spacing-none); }
  .mv1-l { margin-top: var(--spacing-extra-small); margin-bottom: var(--spacing-extra-small); }
  .mv2-l { margin-top: var(--spacing-small); margin-bottom: var(--spacing-small); }
  .mv3-l { margin-top: var(--spacing-medium); margin-bottom: var(--spacing-medium); }
  .mv4-l { margin-top: var(--spacing-large); margin-bottom: var(--spacing-large); }
  .mv5-l { margin-top: var(--spacing-extra-large); margin-bottom: var(--spacing-extra-large); }
  .mv6-l { margin-top: var(--spacing-extra-extra-large); margin-bottom: var(--spacing-extra-extra-large); }
  .mv7-l { margin-top: var(--spacing-extra-extra-extra-large); margin-bottom: var(--spacing-extra-extra-extra-large); }
  .mh0-l { margin-left: var(--spacing-none); margin-right: var(--spacing-none); }
  .mh1-l { margin-left: var(--spacing-extra-small); margin-right: var(--spacing-extra-small); }
  .mh2-l { margin-left: var(--spacing-small); margin-right: var(--spacing-small); }
  .mh3-l { margin-left: var(--spacing-medium); margin-right: var(--spacing-medium); }
  .mh4-l { margin-left: var(--spacing-large); margin-right: var(--spacing-large); }
  .mh5-l { margin-left: var(--spacing-extra-large); margin-right: var(--spacing-extra-large); }
  .mh6-l { margin-left: var(--spacing-extra-extra-large); margin-right: var(--spacing-extra-extra-large); }
  .mh7-l { margin-left: var(--spacing-extra-extra-extra-large); margin-right: var(--spacing-extra-extra-extra-large); }

  /* NEGATIVE MARGINS */
  .na1-l { margin: calc(-1 * var(--spacing-extra-small)); }
  .na2-l { margin: calc(-1 * var(--spacing-small)); }
  .na3-l { margin: calc(-1 * var(--spacing-medium)); }
  .na4-l { margin: calc(-1 * var(--spacing-large)); }
  .na5-l { margin: calc(-1 * var(--spacing-extra-large)); }
  .na6-l { margin: calc(-1 * var(--spacing-extra-extra-large)); }
  .na7-l { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
  .nl1-l { margin-left: calc(-1 * var(--spacing-extra-small)); }
  .nl2-l { margin-left: calc(-1 * var(--spacing-small)); }
  .nl3-l { margin-left: calc(-1 * var(--spacing-medium)); }
  .nl4-l { margin-left: calc(-1 * var(--spacing-large)); }
  .nl5-l { margin-left: calc(-1 * var(--spacing-extra-large)); }
  .nl6-l { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
  .nl7-l { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
  .nr1-l { margin-right: calc(-1 * var(--spacing-extra-small)); }
  .nr2-l { margin-right: calc(-1 * var(--spacing-small)); }
  .nr3-l { margin-right: calc(-1 * var(--spacing-medium)); }
  .nr4-l { margin-right: calc(-1 * var(--spacing-large)); }
  .nr5-l { margin-right: calc(-1 * var(--spacing-extra-large)); }
  .nr6-l { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
  .nr7-l { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
  .nb1-l { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
  .nb2-l { margin-bottom: calc(-1 * var(--spacing-small)); }
  .nb3-l { margin-bottom: calc(-1 * var(--spacing-medium)); }
  .nb4-l { margin-bottom: calc(-1 * var(--spacing-large)); }
  .nb5-l { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
  .nb6-l { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
  .nb7-l { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
  .nt1-l { margin-top: calc(-1 * var(--spacing-extra-small)); }
  .nt2-l { margin-top: calc(-1 * var(--spacing-small)); }
  .nt3-l { margin-top: calc(-1 * var(--spacing-medium)); }
  .nt4-l { margin-top: calc(-1 * var(--spacing-large)); }
  .nt5-l { margin-top: calc(-1 * var(--spacing-extra-large)); }
  .nt6-l { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
  .nt7-l { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }

  /* TEXT DECORATION */
  .strike-l { text-decoration: line-through; }
  .underline-l { text-decoration: underline; }
  .no-underline-l { text-decoration: none; }

  /* TEXT ALIGN */
  .tl-l { text-align: left; }
  .tr-l { text-align: right; }
  .tc-l { text-align: center; }
  .tj-l { text-align: justify; }

  /* TEXT TRANSFORM */
  .ttc-l { text-transform: capitalize; }
  .ttl-l { text-transform: lowercase; }
  .ttu-l { text-transform: uppercase; }
  .ttn-l { text-transform: none; }

  /* TYPE SCALE */
  .f-6-l, .f-headline-l { font-size: 6rem; }
  .f-5-l, .f-subheadline-l { font-size: 5rem; }
  .f1-l { font-size: 3rem; }
  .f2-l { font-size: 2.25rem; }
  .f3-l { font-size: 1.5rem; }
  .f4-l { font-size: 1.25rem; }
  .f5-l { font-size: 1rem; }
  .f6-l { font-size: .875rem; }
  .f7-l { font-size: .75rem; }

  /* TYPOGRAPHY */
  .measure-l { max-width: 30em; }
  .measure-wide-l { max-width: 34em; }
  .measure-narrow-l { max-width: 20em; }
  .indent-l { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
  .small-caps-l { font-variant: small-caps; }
  .truncate-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* UTILITIES */
  .center-l { margin-right: auto; margin-left: auto; }
  .mr-auto-l { margin-right: auto; }
  .ml-auto-l { margin-left: auto; }

  /* VISIBILITY */
  .clip-l { position: fixed !important; _position: absolute !important; clip: rect(.0625rem .0625rem .0625rem .0625rem); clip: rect(.0625rem, .0625rem, .0625rem, .0625rem); }

  /* WHITE SPACE */
  .ws-normal-l { white-space: normal; }
  .nowrap-l { white-space: nowrap; }
  .pre-l { white-space: pre; }

  /* VERTICAL ALIGN */
  .v-base-l { vertical-align: baseline; }
  .v-mid-l { vertical-align: middle; }
  .v-top-l { vertical-align: top; }
  .v-btm-l { vertical-align: bottom; }
}

/* fonts — self-hosted: no visitor request ever leaves your origin (GDPR).
   Download the families once from fonts.google.com ("Get font" →
   "Download all"), convert the TTFs to WOFF2 (e.g. woff2_compress; or
   list the .ttf names in the editor to skip converting), and place these
   files next to this css file:
     fonts/AtkinsonHyperlegible-Regular.woff2
     fonts/AtkinsonHyperlegible-Italic.woff2
     fonts/AtkinsonHyperlegible-Bold.woff2
     fonts/AtkinsonHyperlegible-BoldItalic.woff2
     fonts/AtkinsonHyperlegibleMono-VariableFont_wght.woff2
     fonts/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.woff2
     fonts/OFL.txt   (the fonts' SIL OFL license — keep it with the files)
   Linking Google's CDN instead would send every visitor's IP address
   to Google before they could consent (LG München I, 3 O 17493/20). */

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-Regular-a9bbfed4e1a739df7b1fdab3ec2489e9.woff2?vsn=d") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-Italic-48f4379b1ae8f9fb49e7883b646ae097.woff2?vsn=d") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-Bold-54b913e96db8e51603e197d5b3cf666f.woff2?vsn=d") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-BoldItalic-fb0394a55c92ab3a4cc98058b803880b.woff2?vsn=d") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("fonts/AtkinsonHyperlegibleMono-VariableFont_wght-d81a99e41357fb3211431a182c309d13.woff2?vsn=d") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("fonts/AtkinsonHyperlegibleMono-Italic-VariableFont_wght-59f254173fa3dc97da51e485a4af02a6.woff2?vsn=d") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* fonts */
  --font-sans: "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;

  /* red (base #ff4136) */
  --red-90: light-dark(#ffdad9, #3f0300);
  --red-80: light-dark(#ffb3b1, #660700);
  --red-70: light-dark(#ff8985, #900f00);
  --red-60: light-dark(#ff544c, #bc1700);
  --red-50: light-dark(#ea1f00, #ea1f00);
  --red-40: light-dark(#bc1700, #ff544c);
  --red-30: light-dark(#900f00, #ff8985);
  --red-20: light-dark(#660700, #ffb3b1);
  --red-10: light-dark(#3f0300, #ffdad9);
  --red: var(--red-60);

  /* orange (base #ff6300) */
  --orange-90: light-dark(#ffdad4, #360f00);
  --orange-80: light-dark(#ffb4a6, #591d00);
  --orange-70: light-dark(#ff8b6c, #7d2d00);
  --orange-60: light-dark(#f76000, #a43d00);
  --orange-50: light-dark(#cd4e00, #cd4e00);
  --orange-40: light-dark(#a43d00, #f76000);
  --orange-30: light-dark(#7d2d00, #ff8b6c);
  --orange-20: light-dark(#591d00, #ffb4a6);
  --orange-10: light-dark(#360f00, #ffdad4);
  --orange: var(--orange-60);

  /* yellow (base #ffd700) */
  --yellow-90: light-dark(#ffe07f, #221b00);
  --yellow-80: light-dark(#e9c400, #3a3000);
  --yellow-70: light-dark(#c9a900, #544600);
  --yellow-60: light-dark(#aa8f00, #705d00);
  --yellow-50: light-dark(#8c7500, #8c7500);
  --yellow-40: light-dark(#705d00, #aa8f00);
  --yellow-30: light-dark(#544600, #c9a900);
  --yellow-20: light-dark(#3a3000, #e9c400);
  --yellow-10: light-dark(#221b00, #ffe07f);
  --yellow: var(--yellow-90);

  /* purple (base #5e2ca5) */
  --purple-90: light-dark(#e6dff9, #250d46);
  --purple-80: light-dark(#cdbff3, #3e1b70);
  --purple-70: light-dark(#b69fed, #5a2a9e);
  --purple-60: light-dark(#a07ee7, #7639cd);
  --purple-50: light-dark(#8c5bdf, #8c5bdf);
  --purple-40: light-dark(#7639cd, #a07ee7);
  --purple-30: light-dark(#5a2a9e, #b69fed);
  --purple-20: light-dark(#3e1b70, #cdbff3);
  --purple-10: light-dark(#250d46, #e6dff9);
  --purple: var(--purple-30);

  /* pink (base #ff80cc) */
  --pink-90: light-dark(#ffd8ec, #3c0029);
  --pink-80: light-dark(#ffaedb, #610045);
  --pink-70: light-dark(#ff7fcc, #890063);
  --pink-60: light-dark(#ff3bbe, #b30082);
  --pink-50: light-dark(#df00a3, #df00a3);
  --pink-40: light-dark(#b30082, #ff3bbe);
  --pink-30: light-dark(#890063, #ff7fcc);
  --pink-20: light-dark(#610045, #ffaedb);
  --pink-10: light-dark(#3c0029, #ffd8ec);
  --pink: var(--pink-70);

  /* green (base #19a974) */
  --green-90: light-dark(#55feb7, #012113);
  --green-80: light-dark(#25e19c, #033824);
  --green-70: light-dark(#1ec286, #075136);
  --green-60: light-dark(#18a571, #0c6c49);
  --green-50: light-dark(#12885c, #12885c);
  --green-40: light-dark(#0c6c49, #18a571);
  --green-30: light-dark(#075136, #1ec286);
  --green-20: light-dark(#033824, #25e19c);
  --green-10: light-dark(#012113, #55feb7);
  --green: var(--green-60);

  /* blue (base #357edd) */
  --blue-90: light-dark(#d9e2fc, #061b38);
  --blue-80: light-dark(#b1c6f8, #10305a);
  --blue-70: light-dark(#86abf5, #1a4780);
  --blue-60: light-dark(#4f90f1, #265ea8);
  --blue-50: light-dark(#3277d1, #3277d1);
  --blue-40: light-dark(#265ea8, #4f90f1);
  --blue-30: light-dark(#1a4780, #86abf5);
  --blue-20: light-dark(#10305a, #b1c6f8);
  --blue-10: light-dark(#061b38, #d9e2fc);
  --blue: var(--blue-50);

  /* gray (base #777777) */
  --gray-90: light-dark(#e2e2e2, #1b1b1b);
  --gray-80: light-dark(#c6c6c6, #303030);
  --gray-70: light-dark(#ababab, #474747);
  --gray-60: light-dark(#919191, #5e5e5e);
  --gray-50: light-dark(#777777, #777777);
  --gray-40: light-dark(#5e5e5e, #919191);
  --gray-30: light-dark(#474747, #ababab);
  --gray-20: light-dark(#303030, #c6c6c6);
  --gray-10: light-dark(#1b1b1b, #e2e2e2);
  --gray: var(--gray-50);

  /* roles — semantic aliases into the ramps above (the focus pair generates below) */
  --error: var(--red-40);
  --success: var(--green-30);
  --warning: var(--yellow-20);
  --brand: var(--blue-40);
  --link: var(--blue-40);
  --link-hover: var(--blue-20);
  --link-visited: var(--purple-40);

  /* role families — containers, on-* text, and the focus pair, surface-style, in each role's hue */
  --error-container: light-dark(#ffe1e1, #520500);
  --on-error: light-dark(#fff4f4, #380200);
  --on-error-muted: light-dark(#ffd2d1, #520500);
  --on-error-container: light-dark(#380200, #fff4f4);
  --success-container: light-dark(#8bfec7, #022c1b);
  --on-success: light-dark(#dbffeb, #011c10);
  --on-success-muted: light-dark(#2afaae, #022c1b);
  --on-success-container: light-dark(#011c10, #dbffeb);
  --warning-container: light-dark(#ffe6a2, #2e2500);
  --on-warning: light-dark(#fff6e0, #1e1700);
  --on-warning-muted: light-dark(#ffda4c, #2e2500);
  --on-warning-container: light-dark(#1e1700, #fff6e0);
  --brand-container: light-dark(#e1e8fc, #0b2649);
  --on-brand: light-dark(#f4f6fe, #051731);
  --on-brand-muted: light-dark(#d1ddfb, #0b2649);
  --on-brand-container: light-dark(#051731, #f4f6fe);
  --focus: light-dark(#ffe07f, #ffe07f);
  --on-focus: light-dark(#1e1700, #1e1700);
  --focus-ring: light-dark(#e9c400, #e9c400);

  /* surfaces */
  --surface: light-dark(#f6f6f6, #181818);
  --surface-container: light-dark(#e8e8e8, #262626);
  --on-surface: light-dark(#262626, #e2e2e2);
  --on-surface-muted: light-dark(#5e5e5e, #9e9e9e);
  --outline: light-dark(#b9b9b9, #525252);
  --on-surface-container: var(--on-surface);

  /* overlays: black over the light theme, white over the dark */
  --overlay-90: light-dark(rgba(0, 0, 0, 0.9), rgba(255, 255, 255, 0.9));
  --overlay-80: light-dark(rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8));
  --overlay-70: light-dark(rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.7));
  --overlay-60: light-dark(rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.6));
  --overlay-50: light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
  --overlay-40: light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4));
  --overlay-30: light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3));
  --overlay-20: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
  --overlay-10: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
  --overlay-05: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
}

@media (prefers-contrast: more) {
  :root {
    /* red (base #ff4136) */
    --red-90: light-dark(#fff8f8, #190100);
    --red-80: light-dark(#ffcbc9, #4e0400);
    --red-70: light-dark(#ff9a98, #7f0b00);
    --red-60: light-dark(#ff605a, #b31500);
    --red-50: light-dark(#ea1f00, #ea1f00);
    --red-40: light-dark(#b31500, #ff605a);
    --red-30: light-dark(#7f0b00, #ff9a98);
    --red-20: light-dark(#4e0400, #ffcbc9);
    --red-10: light-dark(#190100, #fff8f8);

    /* orange (base #ff6300) */
    --orange-90: light-dark(#fff8f7, #150300);
    --orange-80: light-dark(#ffcbc2, #441400);
    --orange-70: light-dark(#ff9c86, #6e2600);
    --orange-60: light-dark(#ff640a, #9c3a00);
    --orange-50: light-dark(#cd4e00, #cd4e00);
    --orange-40: light-dark(#9c3a00, #ff640a);
    --orange-30: light-dark(#6e2600, #ff9c86);
    --orange-20: light-dark(#441400, #ffcbc2);
    --orange-10: light-dark(#150300, #fff8f7);

    /* yellow (base #ffd700) */
    --yellow-90: light-dark(#fff9eb, #0a0700);
    --yellow-80: light-dark(#fcd400, #2c2300);
    --yellow-70: light-dark(#d5b400, #4a3d00);
    --yellow-60: light-dark(#b09400, #6a5800);
    --yellow-50: light-dark(#8c7500, #8c7500);
    --yellow-40: light-dark(#6a5800, #b09400);
    --yellow-30: light-dark(#4a3d00, #d5b400);
    --yellow-20: light-dark(#2c2300, #fcd400);
    --yellow-10: light-dark(#0a0700, #fff9eb);

    /* purple (base #5e2ca5) */
    --purple-90: light-dark(#faf9fe, #0c031d);
    --purple-80: light-dark(#dcd2f7, #2f1357);
    --purple-70: light-dark(#bfabf0, #4e248b);
    --purple-60: light-dark(#a584e9, #7136c4);
    --purple-50: light-dark(#8c5bdf, #8c5bdf);
    --purple-40: light-dark(#7136c4, #a584e9);
    --purple-30: light-dark(#4e248b, #bfabf0);
    --purple-20: light-dark(#2f1357, #dcd2f7);
    --purple-10: light-dark(#0c031d, #faf9fe);

    /* pink (base #ff80cc) */
    --pink-90: light-dark(#fff7fb, #18000e);
    --pink-80: light-dark(#ffc7e5, #4b0034);
    --pink-70: light-dark(#ff93d2, #790057);
    --pink-60: light-dark(#ff4dc1, #ab007c);
    --pink-50: light-dark(#df00a3, #df00a3);
    --pink-40: light-dark(#ab007c, #ff4dc1);
    --pink-30: light-dark(#790057, #ff93d2);
    --pink-20: light-dark(#4b0034, #ffc7e5);
    --pink-10: light-dark(#18000e, #fff7fb);

    /* green (base #19a974) */
    --green-90: light-dark(#e8fff2, #000a04);
    --green-80: light-dark(#29f4a9, #022a1a);
    --green-70: light-dark(#21cf8f, #05472e);
    --green-60: light-dark(#19aa75, #0b6645);
    --green-50: light-dark(#12885c, #12885c);
    --green-40: light-dark(#0b6645, #19aa75);
    --green-30: light-dark(#05472e, #21cf8f);
    --green-20: light-dark(#022a1a, #29f4a9);
    --green-10: light-dark(#000a04, #e8fff2);

    /* blue (base #357edd) */
    --blue-90: light-dark(#f7f9fe, #010715);
    --blue-80: light-dark(#c9d7fa, #0a2445);
    --blue-70: light-dark(#98b6f6, #163d71);
    --blue-60: light-dark(#5c96f2, #23599f);
    --blue-50: light-dark(#3277d1, #3277d1);
    --blue-40: light-dark(#23599f, #5c96f2);
    --blue-30: light-dark(#163d71, #98b6f6);
    --blue-20: light-dark(#0a2445, #c9d7fa);
    --blue-10: light-dark(#010715, #f7f9fe);

    /* gray (base #777777) */
    --gray-90: light-dark(#f9f9f9, #070707);
    --gray-80: light-dark(#d7d7d7, #242424);
    --gray-70: light-dark(#b6b6b6, #3e3e3e);
    --gray-60: light-dark(#969696, #595959);
    --gray-50: light-dark(#777777, #777777);
    --gray-40: light-dark(#595959, #969696);
    --gray-30: light-dark(#3e3e3e, #b6b6b6);
    --gray-20: light-dark(#242424, #d7d7d7);
    --gray-10: light-dark(#070707, #f9f9f9);

    /* role families — containers, on-* text, and the focus pair, surface-style, in each role's hue */
    --error-container: light-dark(#ffe9e8, #3f0300);
    --on-error: light-dark(#ffffff, #000000);
    --on-error-muted: light-dark(#fff4f4, #2b0100);
    --on-error-container: light-dark(#000000, #ffffff);
    --success-container: light-dark(#b0fed6, #012113);
    --on-success: light-dark(#ffffff, #000000);
    --on-success-muted: light-dark(#dbffeb, #01150b);
    --on-success-container: light-dark(#000000, #ffffff);
    --warning-container: light-dark(#ffedbd, #221b00);
    --on-warning: light-dark(#ffffff, #000000);
    --on-warning-muted: light-dark(#fff6e0, #161000);
    --on-warning-container: light-dark(#000000, #ffffff);
    --brand-container: light-dark(#e8eefd, #061b38);
    --on-brand: light-dark(#ffffff, #000000);
    --on-brand-muted: light-dark(#f4f6fe, #031126);
    --on-brand-container: light-dark(#000000, #ffffff);
    --focus: light-dark(#fff9eb, #fff9eb);
    --on-focus: light-dark(#000000, #000000);
    --focus-ring: light-dark(#d5b400, #d5b400);

    /* surfaces */
    --surface: light-dark(#fcfcfc, #0e0e0e);
    --surface-container: light-dark(#eeeeee, #1b1b1b);
    --on-surface: light-dark(#000000, #ffffff);
    --on-surface-muted: light-dark(#3b3b3b, #c6c6c6);
    --outline: light-dark(#848484, #848484);
  }
}

@media (prefers-contrast: less) {
  :root {
    /* red (base #ff4136) */
    --red-90: light-dark(#ffc3c2, #560500);
    --red-80: light-dark(#ffa19e, #790a00);
    --red-70: light-dark(#ff7b77, #9d1100);
    --red-60: light-dark(#ff4a41, #c21800);
    --red-50: light-dark(#ea1f00, #ea1f00);
    --red-40: light-dark(#c21800, #ff4a41);
    --red-30: light-dark(#9d1100, #ff7b77);
    --red-20: light-dark(#790a00, #ffa19e);
    --red-10: light-dark(#560500, #ffc3c2);

    /* orange (base #ff6300) */
    --orange-90: light-dark(#ffc4b9, #4b1700);
    --orange-80: light-dark(#ffa28e, #692400);
    --orange-70: light-dark(#ff7d56, #893100);
    --orange-60: light-dark(#f15d00, #aa3f00);
    --orange-50: light-dark(#cd4e00, #cd4e00);
    --orange-40: light-dark(#aa3f00, #f15d00);
    --orange-30: light-dark(#893100, #ff7d56);
    --orange-20: light-dark(#692400, #ffa28e);
    --orange-10: light-dark(#4b1700, #ffc4b9);

    /* yellow (base #ffd700) */
    --yellow-90: light-dark(#f5cf00, #302700);
    --yellow-80: light-dark(#dab800, #463900);
    --yellow-70: light-dark(#c0a100, #5c4d00);
    --yellow-60: light-dark(#a68b00, #746100);
    --yellow-50: light-dark(#8c7500, #8c7500);
    --yellow-40: light-dark(#746100, #a68b00);
    --yellow-30: light-dark(#5c4d00, #c0a100);
    --yellow-20: light-dark(#463900, #dab800);
    --yellow-10: light-dark(#302700, #f5cf00);

    /* purple (base #5e2ca5) */
    --purple-90: light-dark(#d7ccf6, #34155f);
    --purple-80: light-dark(#c3b0f1, #4a2184);
    --purple-70: light-dark(#b095ec, #622eac);
    --purple-60: light-dark(#9d79e6, #7b3cd5);
    --purple-50: light-dark(#8c5bdf, #8c5bdf);
    --purple-40: light-dark(#7b3cd5, #9d79e6);
    --purple-30: light-dark(#622eac, #b095ec);
    --purple-20: light-dark(#4a2184, #c3b0f1);
    --purple-10: light-dark(#34155f, #d7ccf6);

    /* pink (base #ff80cc) */
    --pink-90: light-dark(#ffbfe2, #52003a);
    --pink-80: light-dark(#ff9ad4, #730052);
    --pink-70: light-dark(#ff6ec7, #96006c);
    --pink-60: light-dark(#ff29bd, #ba0087);
    --pink-50: light-dark(#df00a3, #df00a3);
    --pink-40: light-dark(#ba0087, #ff29bd);
    --pink-30: light-dark(#96006c, #ff6ec7);
    --pink-20: light-dark(#730052, #ff9ad4);
    --pink-10: light-dark(#52003a, #ffbfe2);

    /* green (base #19a974) */
    --green-90: light-dark(#28eea5, #022f1d);
    --green-80: light-dark(#22d392, #05432c);
    --green-70: light-dark(#1cb980, #08593b);
    --green-60: light-dark(#17a06e, #0d704b);
    --green-50: light-dark(#12885c, #12885c);
    --green-40: light-dark(#0d704b, #17a06e);
    --green-30: light-dark(#08593b, #1cb980);
    --green-20: light-dark(#05432c, #22d392);
    --green-10: light-dark(#022f1d, #28eea5);

    /* blue (base #357edd) */
    --blue-90: light-dark(#c1d1fa, #0c284c);
    --blue-80: light-dark(#9ebaf7, #153a6b);
    --blue-70: light-dark(#77a3f4, #1e4e8c);
    --blue-60: light-dark(#448df1, #2762ae);
    --blue-50: light-dark(#3277d1, #3277d1);
    --blue-40: light-dark(#2762ae, #448df1);
    --blue-30: light-dark(#1e4e8c, #77a3f4);
    --blue-20: light-dark(#153a6b, #9ebaf7);
    --blue-10: light-dark(#0c284c, #c1d1fa);

    /* gray (base #777777) */
    --gray-90: light-dark(#d1d1d1, #282828);
    --gray-80: light-dark(#bababa, #3a3a3a);
    --gray-70: light-dark(#a3a3a3, #4e4e4e);
    --gray-60: light-dark(#8d8d8d, #626262);
    --gray-50: light-dark(#777777, #777777);
    --gray-40: light-dark(#626262, #8d8d8d);
    --gray-30: light-dark(#4e4e4e, #a3a3a3);
    --gray-20: light-dark(#3a3a3a, #bababa);
    --gray-10: light-dark(#282828, #d1d1d1);

    /* role families — containers, on-* text, and the focus pair, surface-style, in each role's hue */
    --error-container: light-dark(#ffdedd, #5e0600);
    --on-error: light-dark(#ffc7c6, #7b0b00);
    --on-error-muted: light-dark(#ff9e9c, #900f00);
    --on-error-container: light-dark(#7b0b00, #ffc7c6);
    --success-container: light-dark(#74febf, #033320);
    --on-success: light-dark(#28f1a7, #05452d);
    --on-success-muted: light-dark(#22d291, #075136);
    --on-success-container: light-dark(#05452d, #28f1a7);
    --warning-container: light-dark(#ffe392, #352b00);
    --on-warning: light-dark(#f9d200, #473a00);
    --on-warning-muted: light-dark(#d9b600, #544600);
    --on-warning-container: light-dark(#473a00, #f9d200);
    --brand-container: light-dark(#dde5fc, #0e2c53);
    --on-brand: light-dark(#c5d4fa, #153b6d);
    --on-brand-muted: light-dark(#9cb9f7, #1a4780);
    --on-brand-container: light-dark(#153b6d, #c5d4fa);
    --focus: light-dark(#f5cf00, #f5cf00);
    --on-focus: light-dark(#473a00, #473a00);
    --focus-ring: light-dark(#f5cf00, #f5cf00);

    /* surfaces */
    --surface: light-dark(#f1f1f1, #1f1f1f);
    --surface-container: light-dark(#e5e5e5, #2c2c2c);
    --on-surface: light-dark(#474747, #c6c6c6);
    --on-surface-muted: light-dark(#6a6a6a, #919191);
    --outline: light-dark(#c6c6c6, #474747);
  }
}

/* fonts */
html { font-family: var(--font-sans); }
code, kbd, samp, pre { font-family: var(--font-mono); }
.sans-serif { font-family: var(--font-sans); }
.code { font-family: var(--font-mono); }
.serif, .system-serif { font-family: serif; }
.system-sans-serif { font-family: sans-serif; }

/* red */
.red { color: var(--red); }
.red-90 { color: var(--red-90); }
.red-80 { color: var(--red-80); }
.red-70 { color: var(--red-70); }
.red-60 { color: var(--red-60); }
.red-50 { color: var(--red-50); }
.red-40 { color: var(--red-40); }
.red-30 { color: var(--red-30); }
.red-20 { color: var(--red-20); }
.red-10 { color: var(--red-10); }
.bg-red { background-color: var(--red); }
.bg-red-90 { background-color: var(--red-90); }
.bg-red-80 { background-color: var(--red-80); }
.bg-red-70 { background-color: var(--red-70); }
.bg-red-60 { background-color: var(--red-60); }
.bg-red-50 { background-color: var(--red-50); }
.bg-red-40 { background-color: var(--red-40); }
.bg-red-30 { background-color: var(--red-30); }
.bg-red-20 { background-color: var(--red-20); }
.bg-red-10 { background-color: var(--red-10); }
.b--red { border-color: var(--red); }
.b--red-90 { border-color: var(--red-90); }
.b--red-80 { border-color: var(--red-80); }
.b--red-70 { border-color: var(--red-70); }
.b--red-60 { border-color: var(--red-60); }
.b--red-50 { border-color: var(--red-50); }
.b--red-40 { border-color: var(--red-40); }
.b--red-30 { border-color: var(--red-30); }
.b--red-20 { border-color: var(--red-20); }
.b--red-10 { border-color: var(--red-10); }
.hover-red:focus, .hover-red:hover { color: var(--red); }
.hover-red-90:focus, .hover-red-90:hover { color: var(--red-90); }
.hover-red-80:focus, .hover-red-80:hover { color: var(--red-80); }
.hover-red-70:focus, .hover-red-70:hover { color: var(--red-70); }
.hover-red-60:focus, .hover-red-60:hover { color: var(--red-60); }
.hover-red-50:focus, .hover-red-50:hover { color: var(--red-50); }
.hover-red-40:focus, .hover-red-40:hover { color: var(--red-40); }
.hover-red-30:focus, .hover-red-30:hover { color: var(--red-30); }
.hover-red-20:focus, .hover-red-20:hover { color: var(--red-20); }
.hover-red-10:focus, .hover-red-10:hover { color: var(--red-10); }
.hover-bg-red:focus, .hover-bg-red:hover { background-color: var(--red); }
.hover-bg-red-90:focus, .hover-bg-red-90:hover { background-color: var(--red-90); }
.hover-bg-red-80:focus, .hover-bg-red-80:hover { background-color: var(--red-80); }
.hover-bg-red-70:focus, .hover-bg-red-70:hover { background-color: var(--red-70); }
.hover-bg-red-60:focus, .hover-bg-red-60:hover { background-color: var(--red-60); }
.hover-bg-red-50:focus, .hover-bg-red-50:hover { background-color: var(--red-50); }
.hover-bg-red-40:focus, .hover-bg-red-40:hover { background-color: var(--red-40); }
.hover-bg-red-30:focus, .hover-bg-red-30:hover { background-color: var(--red-30); }
.hover-bg-red-20:focus, .hover-bg-red-20:hover { background-color: var(--red-20); }
.hover-bg-red-10:focus, .hover-bg-red-10:hover { background-color: var(--red-10); }

/* orange */
.orange { color: var(--orange); }
.orange-90 { color: var(--orange-90); }
.orange-80 { color: var(--orange-80); }
.orange-70 { color: var(--orange-70); }
.orange-60 { color: var(--orange-60); }
.orange-50 { color: var(--orange-50); }
.orange-40 { color: var(--orange-40); }
.orange-30 { color: var(--orange-30); }
.orange-20 { color: var(--orange-20); }
.orange-10 { color: var(--orange-10); }
.bg-orange { background-color: var(--orange); }
.bg-orange-90 { background-color: var(--orange-90); }
.bg-orange-80 { background-color: var(--orange-80); }
.bg-orange-70 { background-color: var(--orange-70); }
.bg-orange-60 { background-color: var(--orange-60); }
.bg-orange-50 { background-color: var(--orange-50); }
.bg-orange-40 { background-color: var(--orange-40); }
.bg-orange-30 { background-color: var(--orange-30); }
.bg-orange-20 { background-color: var(--orange-20); }
.bg-orange-10 { background-color: var(--orange-10); }
.b--orange { border-color: var(--orange); }
.b--orange-90 { border-color: var(--orange-90); }
.b--orange-80 { border-color: var(--orange-80); }
.b--orange-70 { border-color: var(--orange-70); }
.b--orange-60 { border-color: var(--orange-60); }
.b--orange-50 { border-color: var(--orange-50); }
.b--orange-40 { border-color: var(--orange-40); }
.b--orange-30 { border-color: var(--orange-30); }
.b--orange-20 { border-color: var(--orange-20); }
.b--orange-10 { border-color: var(--orange-10); }
.hover-orange:focus, .hover-orange:hover { color: var(--orange); }
.hover-orange-90:focus, .hover-orange-90:hover { color: var(--orange-90); }
.hover-orange-80:focus, .hover-orange-80:hover { color: var(--orange-80); }
.hover-orange-70:focus, .hover-orange-70:hover { color: var(--orange-70); }
.hover-orange-60:focus, .hover-orange-60:hover { color: var(--orange-60); }
.hover-orange-50:focus, .hover-orange-50:hover { color: var(--orange-50); }
.hover-orange-40:focus, .hover-orange-40:hover { color: var(--orange-40); }
.hover-orange-30:focus, .hover-orange-30:hover { color: var(--orange-30); }
.hover-orange-20:focus, .hover-orange-20:hover { color: var(--orange-20); }
.hover-orange-10:focus, .hover-orange-10:hover { color: var(--orange-10); }
.hover-bg-orange:focus, .hover-bg-orange:hover { background-color: var(--orange); }
.hover-bg-orange-90:focus, .hover-bg-orange-90:hover { background-color: var(--orange-90); }
.hover-bg-orange-80:focus, .hover-bg-orange-80:hover { background-color: var(--orange-80); }
.hover-bg-orange-70:focus, .hover-bg-orange-70:hover { background-color: var(--orange-70); }
.hover-bg-orange-60:focus, .hover-bg-orange-60:hover { background-color: var(--orange-60); }
.hover-bg-orange-50:focus, .hover-bg-orange-50:hover { background-color: var(--orange-50); }
.hover-bg-orange-40:focus, .hover-bg-orange-40:hover { background-color: var(--orange-40); }
.hover-bg-orange-30:focus, .hover-bg-orange-30:hover { background-color: var(--orange-30); }
.hover-bg-orange-20:focus, .hover-bg-orange-20:hover { background-color: var(--orange-20); }
.hover-bg-orange-10:focus, .hover-bg-orange-10:hover { background-color: var(--orange-10); }

/* yellow */
.yellow { color: var(--yellow); }
.yellow-90 { color: var(--yellow-90); }
.yellow-80 { color: var(--yellow-80); }
.yellow-70 { color: var(--yellow-70); }
.yellow-60 { color: var(--yellow-60); }
.yellow-50 { color: var(--yellow-50); }
.yellow-40 { color: var(--yellow-40); }
.yellow-30 { color: var(--yellow-30); }
.yellow-20 { color: var(--yellow-20); }
.yellow-10 { color: var(--yellow-10); }
.bg-yellow { background-color: var(--yellow); }
.bg-yellow-90 { background-color: var(--yellow-90); }
.bg-yellow-80 { background-color: var(--yellow-80); }
.bg-yellow-70 { background-color: var(--yellow-70); }
.bg-yellow-60 { background-color: var(--yellow-60); }
.bg-yellow-50 { background-color: var(--yellow-50); }
.bg-yellow-40 { background-color: var(--yellow-40); }
.bg-yellow-30 { background-color: var(--yellow-30); }
.bg-yellow-20 { background-color: var(--yellow-20); }
.bg-yellow-10 { background-color: var(--yellow-10); }
.b--yellow { border-color: var(--yellow); }
.b--yellow-90 { border-color: var(--yellow-90); }
.b--yellow-80 { border-color: var(--yellow-80); }
.b--yellow-70 { border-color: var(--yellow-70); }
.b--yellow-60 { border-color: var(--yellow-60); }
.b--yellow-50 { border-color: var(--yellow-50); }
.b--yellow-40 { border-color: var(--yellow-40); }
.b--yellow-30 { border-color: var(--yellow-30); }
.b--yellow-20 { border-color: var(--yellow-20); }
.b--yellow-10 { border-color: var(--yellow-10); }
.hover-yellow:focus, .hover-yellow:hover { color: var(--yellow); }
.hover-yellow-90:focus, .hover-yellow-90:hover { color: var(--yellow-90); }
.hover-yellow-80:focus, .hover-yellow-80:hover { color: var(--yellow-80); }
.hover-yellow-70:focus, .hover-yellow-70:hover { color: var(--yellow-70); }
.hover-yellow-60:focus, .hover-yellow-60:hover { color: var(--yellow-60); }
.hover-yellow-50:focus, .hover-yellow-50:hover { color: var(--yellow-50); }
.hover-yellow-40:focus, .hover-yellow-40:hover { color: var(--yellow-40); }
.hover-yellow-30:focus, .hover-yellow-30:hover { color: var(--yellow-30); }
.hover-yellow-20:focus, .hover-yellow-20:hover { color: var(--yellow-20); }
.hover-yellow-10:focus, .hover-yellow-10:hover { color: var(--yellow-10); }
.hover-bg-yellow:focus, .hover-bg-yellow:hover { background-color: var(--yellow); }
.hover-bg-yellow-90:focus, .hover-bg-yellow-90:hover { background-color: var(--yellow-90); }
.hover-bg-yellow-80:focus, .hover-bg-yellow-80:hover { background-color: var(--yellow-80); }
.hover-bg-yellow-70:focus, .hover-bg-yellow-70:hover { background-color: var(--yellow-70); }
.hover-bg-yellow-60:focus, .hover-bg-yellow-60:hover { background-color: var(--yellow-60); }
.hover-bg-yellow-50:focus, .hover-bg-yellow-50:hover { background-color: var(--yellow-50); }
.hover-bg-yellow-40:focus, .hover-bg-yellow-40:hover { background-color: var(--yellow-40); }
.hover-bg-yellow-30:focus, .hover-bg-yellow-30:hover { background-color: var(--yellow-30); }
.hover-bg-yellow-20:focus, .hover-bg-yellow-20:hover { background-color: var(--yellow-20); }
.hover-bg-yellow-10:focus, .hover-bg-yellow-10:hover { background-color: var(--yellow-10); }

/* purple */
.purple { color: var(--purple); }
.purple-90 { color: var(--purple-90); }
.purple-80 { color: var(--purple-80); }
.purple-70 { color: var(--purple-70); }
.purple-60 { color: var(--purple-60); }
.purple-50 { color: var(--purple-50); }
.purple-40 { color: var(--purple-40); }
.purple-30 { color: var(--purple-30); }
.purple-20 { color: var(--purple-20); }
.purple-10 { color: var(--purple-10); }
.bg-purple { background-color: var(--purple); }
.bg-purple-90 { background-color: var(--purple-90); }
.bg-purple-80 { background-color: var(--purple-80); }
.bg-purple-70 { background-color: var(--purple-70); }
.bg-purple-60 { background-color: var(--purple-60); }
.bg-purple-50 { background-color: var(--purple-50); }
.bg-purple-40 { background-color: var(--purple-40); }
.bg-purple-30 { background-color: var(--purple-30); }
.bg-purple-20 { background-color: var(--purple-20); }
.bg-purple-10 { background-color: var(--purple-10); }
.b--purple { border-color: var(--purple); }
.b--purple-90 { border-color: var(--purple-90); }
.b--purple-80 { border-color: var(--purple-80); }
.b--purple-70 { border-color: var(--purple-70); }
.b--purple-60 { border-color: var(--purple-60); }
.b--purple-50 { border-color: var(--purple-50); }
.b--purple-40 { border-color: var(--purple-40); }
.b--purple-30 { border-color: var(--purple-30); }
.b--purple-20 { border-color: var(--purple-20); }
.b--purple-10 { border-color: var(--purple-10); }
.hover-purple:focus, .hover-purple:hover { color: var(--purple); }
.hover-purple-90:focus, .hover-purple-90:hover { color: var(--purple-90); }
.hover-purple-80:focus, .hover-purple-80:hover { color: var(--purple-80); }
.hover-purple-70:focus, .hover-purple-70:hover { color: var(--purple-70); }
.hover-purple-60:focus, .hover-purple-60:hover { color: var(--purple-60); }
.hover-purple-50:focus, .hover-purple-50:hover { color: var(--purple-50); }
.hover-purple-40:focus, .hover-purple-40:hover { color: var(--purple-40); }
.hover-purple-30:focus, .hover-purple-30:hover { color: var(--purple-30); }
.hover-purple-20:focus, .hover-purple-20:hover { color: var(--purple-20); }
.hover-purple-10:focus, .hover-purple-10:hover { color: var(--purple-10); }
.hover-bg-purple:focus, .hover-bg-purple:hover { background-color: var(--purple); }
.hover-bg-purple-90:focus, .hover-bg-purple-90:hover { background-color: var(--purple-90); }
.hover-bg-purple-80:focus, .hover-bg-purple-80:hover { background-color: var(--purple-80); }
.hover-bg-purple-70:focus, .hover-bg-purple-70:hover { background-color: var(--purple-70); }
.hover-bg-purple-60:focus, .hover-bg-purple-60:hover { background-color: var(--purple-60); }
.hover-bg-purple-50:focus, .hover-bg-purple-50:hover { background-color: var(--purple-50); }
.hover-bg-purple-40:focus, .hover-bg-purple-40:hover { background-color: var(--purple-40); }
.hover-bg-purple-30:focus, .hover-bg-purple-30:hover { background-color: var(--purple-30); }
.hover-bg-purple-20:focus, .hover-bg-purple-20:hover { background-color: var(--purple-20); }
.hover-bg-purple-10:focus, .hover-bg-purple-10:hover { background-color: var(--purple-10); }

/* pink */
.pink { color: var(--pink); }
.pink-90 { color: var(--pink-90); }
.pink-80 { color: var(--pink-80); }
.pink-70 { color: var(--pink-70); }
.pink-60 { color: var(--pink-60); }
.pink-50 { color: var(--pink-50); }
.pink-40 { color: var(--pink-40); }
.pink-30 { color: var(--pink-30); }
.pink-20 { color: var(--pink-20); }
.pink-10 { color: var(--pink-10); }
.bg-pink { background-color: var(--pink); }
.bg-pink-90 { background-color: var(--pink-90); }
.bg-pink-80 { background-color: var(--pink-80); }
.bg-pink-70 { background-color: var(--pink-70); }
.bg-pink-60 { background-color: var(--pink-60); }
.bg-pink-50 { background-color: var(--pink-50); }
.bg-pink-40 { background-color: var(--pink-40); }
.bg-pink-30 { background-color: var(--pink-30); }
.bg-pink-20 { background-color: var(--pink-20); }
.bg-pink-10 { background-color: var(--pink-10); }
.b--pink { border-color: var(--pink); }
.b--pink-90 { border-color: var(--pink-90); }
.b--pink-80 { border-color: var(--pink-80); }
.b--pink-70 { border-color: var(--pink-70); }
.b--pink-60 { border-color: var(--pink-60); }
.b--pink-50 { border-color: var(--pink-50); }
.b--pink-40 { border-color: var(--pink-40); }
.b--pink-30 { border-color: var(--pink-30); }
.b--pink-20 { border-color: var(--pink-20); }
.b--pink-10 { border-color: var(--pink-10); }
.hover-pink:focus, .hover-pink:hover { color: var(--pink); }
.hover-pink-90:focus, .hover-pink-90:hover { color: var(--pink-90); }
.hover-pink-80:focus, .hover-pink-80:hover { color: var(--pink-80); }
.hover-pink-70:focus, .hover-pink-70:hover { color: var(--pink-70); }
.hover-pink-60:focus, .hover-pink-60:hover { color: var(--pink-60); }
.hover-pink-50:focus, .hover-pink-50:hover { color: var(--pink-50); }
.hover-pink-40:focus, .hover-pink-40:hover { color: var(--pink-40); }
.hover-pink-30:focus, .hover-pink-30:hover { color: var(--pink-30); }
.hover-pink-20:focus, .hover-pink-20:hover { color: var(--pink-20); }
.hover-pink-10:focus, .hover-pink-10:hover { color: var(--pink-10); }
.hover-bg-pink:focus, .hover-bg-pink:hover { background-color: var(--pink); }
.hover-bg-pink-90:focus, .hover-bg-pink-90:hover { background-color: var(--pink-90); }
.hover-bg-pink-80:focus, .hover-bg-pink-80:hover { background-color: var(--pink-80); }
.hover-bg-pink-70:focus, .hover-bg-pink-70:hover { background-color: var(--pink-70); }
.hover-bg-pink-60:focus, .hover-bg-pink-60:hover { background-color: var(--pink-60); }
.hover-bg-pink-50:focus, .hover-bg-pink-50:hover { background-color: var(--pink-50); }
.hover-bg-pink-40:focus, .hover-bg-pink-40:hover { background-color: var(--pink-40); }
.hover-bg-pink-30:focus, .hover-bg-pink-30:hover { background-color: var(--pink-30); }
.hover-bg-pink-20:focus, .hover-bg-pink-20:hover { background-color: var(--pink-20); }
.hover-bg-pink-10:focus, .hover-bg-pink-10:hover { background-color: var(--pink-10); }

/* green */
.green { color: var(--green); }
.green-90 { color: var(--green-90); }
.green-80 { color: var(--green-80); }
.green-70 { color: var(--green-70); }
.green-60 { color: var(--green-60); }
.green-50 { color: var(--green-50); }
.green-40 { color: var(--green-40); }
.green-30 { color: var(--green-30); }
.green-20 { color: var(--green-20); }
.green-10 { color: var(--green-10); }
.bg-green { background-color: var(--green); }
.bg-green-90 { background-color: var(--green-90); }
.bg-green-80 { background-color: var(--green-80); }
.bg-green-70 { background-color: var(--green-70); }
.bg-green-60 { background-color: var(--green-60); }
.bg-green-50 { background-color: var(--green-50); }
.bg-green-40 { background-color: var(--green-40); }
.bg-green-30 { background-color: var(--green-30); }
.bg-green-20 { background-color: var(--green-20); }
.bg-green-10 { background-color: var(--green-10); }
.b--green { border-color: var(--green); }
.b--green-90 { border-color: var(--green-90); }
.b--green-80 { border-color: var(--green-80); }
.b--green-70 { border-color: var(--green-70); }
.b--green-60 { border-color: var(--green-60); }
.b--green-50 { border-color: var(--green-50); }
.b--green-40 { border-color: var(--green-40); }
.b--green-30 { border-color: var(--green-30); }
.b--green-20 { border-color: var(--green-20); }
.b--green-10 { border-color: var(--green-10); }
.hover-green:focus, .hover-green:hover { color: var(--green); }
.hover-green-90:focus, .hover-green-90:hover { color: var(--green-90); }
.hover-green-80:focus, .hover-green-80:hover { color: var(--green-80); }
.hover-green-70:focus, .hover-green-70:hover { color: var(--green-70); }
.hover-green-60:focus, .hover-green-60:hover { color: var(--green-60); }
.hover-green-50:focus, .hover-green-50:hover { color: var(--green-50); }
.hover-green-40:focus, .hover-green-40:hover { color: var(--green-40); }
.hover-green-30:focus, .hover-green-30:hover { color: var(--green-30); }
.hover-green-20:focus, .hover-green-20:hover { color: var(--green-20); }
.hover-green-10:focus, .hover-green-10:hover { color: var(--green-10); }
.hover-bg-green:focus, .hover-bg-green:hover { background-color: var(--green); }
.hover-bg-green-90:focus, .hover-bg-green-90:hover { background-color: var(--green-90); }
.hover-bg-green-80:focus, .hover-bg-green-80:hover { background-color: var(--green-80); }
.hover-bg-green-70:focus, .hover-bg-green-70:hover { background-color: var(--green-70); }
.hover-bg-green-60:focus, .hover-bg-green-60:hover { background-color: var(--green-60); }
.hover-bg-green-50:focus, .hover-bg-green-50:hover { background-color: var(--green-50); }
.hover-bg-green-40:focus, .hover-bg-green-40:hover { background-color: var(--green-40); }
.hover-bg-green-30:focus, .hover-bg-green-30:hover { background-color: var(--green-30); }
.hover-bg-green-20:focus, .hover-bg-green-20:hover { background-color: var(--green-20); }
.hover-bg-green-10:focus, .hover-bg-green-10:hover { background-color: var(--green-10); }

/* blue */
.blue { color: var(--blue); }
.blue-90 { color: var(--blue-90); }
.blue-80 { color: var(--blue-80); }
.blue-70 { color: var(--blue-70); }
.blue-60 { color: var(--blue-60); }
.blue-50 { color: var(--blue-50); }
.blue-40 { color: var(--blue-40); }
.blue-30 { color: var(--blue-30); }
.blue-20 { color: var(--blue-20); }
.blue-10 { color: var(--blue-10); }
.bg-blue { background-color: var(--blue); }
.bg-blue-90 { background-color: var(--blue-90); }
.bg-blue-80 { background-color: var(--blue-80); }
.bg-blue-70 { background-color: var(--blue-70); }
.bg-blue-60 { background-color: var(--blue-60); }
.bg-blue-50 { background-color: var(--blue-50); }
.bg-blue-40 { background-color: var(--blue-40); }
.bg-blue-30 { background-color: var(--blue-30); }
.bg-blue-20 { background-color: var(--blue-20); }
.bg-blue-10 { background-color: var(--blue-10); }
.b--blue { border-color: var(--blue); }
.b--blue-90 { border-color: var(--blue-90); }
.b--blue-80 { border-color: var(--blue-80); }
.b--blue-70 { border-color: var(--blue-70); }
.b--blue-60 { border-color: var(--blue-60); }
.b--blue-50 { border-color: var(--blue-50); }
.b--blue-40 { border-color: var(--blue-40); }
.b--blue-30 { border-color: var(--blue-30); }
.b--blue-20 { border-color: var(--blue-20); }
.b--blue-10 { border-color: var(--blue-10); }
.hover-blue:focus, .hover-blue:hover { color: var(--blue); }
.hover-blue-90:focus, .hover-blue-90:hover { color: var(--blue-90); }
.hover-blue-80:focus, .hover-blue-80:hover { color: var(--blue-80); }
.hover-blue-70:focus, .hover-blue-70:hover { color: var(--blue-70); }
.hover-blue-60:focus, .hover-blue-60:hover { color: var(--blue-60); }
.hover-blue-50:focus, .hover-blue-50:hover { color: var(--blue-50); }
.hover-blue-40:focus, .hover-blue-40:hover { color: var(--blue-40); }
.hover-blue-30:focus, .hover-blue-30:hover { color: var(--blue-30); }
.hover-blue-20:focus, .hover-blue-20:hover { color: var(--blue-20); }
.hover-blue-10:focus, .hover-blue-10:hover { color: var(--blue-10); }
.hover-bg-blue:focus, .hover-bg-blue:hover { background-color: var(--blue); }
.hover-bg-blue-90:focus, .hover-bg-blue-90:hover { background-color: var(--blue-90); }
.hover-bg-blue-80:focus, .hover-bg-blue-80:hover { background-color: var(--blue-80); }
.hover-bg-blue-70:focus, .hover-bg-blue-70:hover { background-color: var(--blue-70); }
.hover-bg-blue-60:focus, .hover-bg-blue-60:hover { background-color: var(--blue-60); }
.hover-bg-blue-50:focus, .hover-bg-blue-50:hover { background-color: var(--blue-50); }
.hover-bg-blue-40:focus, .hover-bg-blue-40:hover { background-color: var(--blue-40); }
.hover-bg-blue-30:focus, .hover-bg-blue-30:hover { background-color: var(--blue-30); }
.hover-bg-blue-20:focus, .hover-bg-blue-20:hover { background-color: var(--blue-20); }
.hover-bg-blue-10:focus, .hover-bg-blue-10:hover { background-color: var(--blue-10); }

/* gray */
.gray { color: var(--gray); }
.gray-90 { color: var(--gray-90); }
.gray-80 { color: var(--gray-80); }
.gray-70 { color: var(--gray-70); }
.gray-60 { color: var(--gray-60); }
.gray-50 { color: var(--gray-50); }
.gray-40 { color: var(--gray-40); }
.gray-30 { color: var(--gray-30); }
.gray-20 { color: var(--gray-20); }
.gray-10 { color: var(--gray-10); }
.bg-gray { background-color: var(--gray); }
.bg-gray-90 { background-color: var(--gray-90); }
.bg-gray-80 { background-color: var(--gray-80); }
.bg-gray-70 { background-color: var(--gray-70); }
.bg-gray-60 { background-color: var(--gray-60); }
.bg-gray-50 { background-color: var(--gray-50); }
.bg-gray-40 { background-color: var(--gray-40); }
.bg-gray-30 { background-color: var(--gray-30); }
.bg-gray-20 { background-color: var(--gray-20); }
.bg-gray-10 { background-color: var(--gray-10); }
.b--gray { border-color: var(--gray); }
.b--gray-90 { border-color: var(--gray-90); }
.b--gray-80 { border-color: var(--gray-80); }
.b--gray-70 { border-color: var(--gray-70); }
.b--gray-60 { border-color: var(--gray-60); }
.b--gray-50 { border-color: var(--gray-50); }
.b--gray-40 { border-color: var(--gray-40); }
.b--gray-30 { border-color: var(--gray-30); }
.b--gray-20 { border-color: var(--gray-20); }
.b--gray-10 { border-color: var(--gray-10); }
.hover-gray:focus, .hover-gray:hover { color: var(--gray); }
.hover-gray-90:focus, .hover-gray-90:hover { color: var(--gray-90); }
.hover-gray-80:focus, .hover-gray-80:hover { color: var(--gray-80); }
.hover-gray-70:focus, .hover-gray-70:hover { color: var(--gray-70); }
.hover-gray-60:focus, .hover-gray-60:hover { color: var(--gray-60); }
.hover-gray-50:focus, .hover-gray-50:hover { color: var(--gray-50); }
.hover-gray-40:focus, .hover-gray-40:hover { color: var(--gray-40); }
.hover-gray-30:focus, .hover-gray-30:hover { color: var(--gray-30); }
.hover-gray-20:focus, .hover-gray-20:hover { color: var(--gray-20); }
.hover-gray-10:focus, .hover-gray-10:hover { color: var(--gray-10); }
.hover-bg-gray:focus, .hover-bg-gray:hover { background-color: var(--gray); }
.hover-bg-gray-90:focus, .hover-bg-gray-90:hover { background-color: var(--gray-90); }
.hover-bg-gray-80:focus, .hover-bg-gray-80:hover { background-color: var(--gray-80); }
.hover-bg-gray-70:focus, .hover-bg-gray-70:hover { background-color: var(--gray-70); }
.hover-bg-gray-60:focus, .hover-bg-gray-60:hover { background-color: var(--gray-60); }
.hover-bg-gray-50:focus, .hover-bg-gray-50:hover { background-color: var(--gray-50); }
.hover-bg-gray-40:focus, .hover-bg-gray-40:hover { background-color: var(--gray-40); }
.hover-bg-gray-30:focus, .hover-bg-gray-30:hover { background-color: var(--gray-30); }
.hover-bg-gray-20:focus, .hover-bg-gray-20:hover { background-color: var(--gray-20); }
.hover-bg-gray-10:focus, .hover-bg-gray-10:hover { background-color: var(--gray-10); }

/* surfaces */
.bg-surface { background-color: var(--surface); }
.bg-surface-container { background-color: var(--surface-container); }
.on-surface { color: var(--on-surface); }
.on-surface-muted { color: var(--on-surface-muted); }
.b--outline { border-color: var(--outline); }
.on-surface-container { color: var(--on-surface-container); }

/* overlays */
.overlay-90 { color: var(--overlay-90); }
.overlay-80 { color: var(--overlay-80); }
.overlay-70 { color: var(--overlay-70); }
.overlay-60 { color: var(--overlay-60); }
.overlay-50 { color: var(--overlay-50); }
.overlay-40 { color: var(--overlay-40); }
.overlay-30 { color: var(--overlay-30); }
.overlay-20 { color: var(--overlay-20); }
.overlay-10 { color: var(--overlay-10); }
.overlay-05 { color: var(--overlay-05); }
.bg-overlay-90 { background-color: var(--overlay-90); }
.bg-overlay-80 { background-color: var(--overlay-80); }
.bg-overlay-70 { background-color: var(--overlay-70); }
.bg-overlay-60 { background-color: var(--overlay-60); }
.bg-overlay-50 { background-color: var(--overlay-50); }
.bg-overlay-40 { background-color: var(--overlay-40); }
.bg-overlay-30 { background-color: var(--overlay-30); }
.bg-overlay-20 { background-color: var(--overlay-20); }
.bg-overlay-10 { background-color: var(--overlay-10); }
.bg-overlay-05 { background-color: var(--overlay-05); }
.b--overlay-90 { border-color: var(--overlay-90); }
.b--overlay-80 { border-color: var(--overlay-80); }
.b--overlay-70 { border-color: var(--overlay-70); }
.b--overlay-60 { border-color: var(--overlay-60); }
.b--overlay-50 { border-color: var(--overlay-50); }
.b--overlay-40 { border-color: var(--overlay-40); }
.b--overlay-30 { border-color: var(--overlay-30); }
.b--overlay-20 { border-color: var(--overlay-20); }
.b--overlay-10 { border-color: var(--overlay-10); }
.b--overlay-05 { border-color: var(--overlay-05); }
.hover-overlay-90:focus, .hover-overlay-90:hover { color: var(--overlay-90); }
.hover-overlay-80:focus, .hover-overlay-80:hover { color: var(--overlay-80); }
.hover-overlay-70:focus, .hover-overlay-70:hover { color: var(--overlay-70); }
.hover-overlay-60:focus, .hover-overlay-60:hover { color: var(--overlay-60); }
.hover-overlay-50:focus, .hover-overlay-50:hover { color: var(--overlay-50); }
.hover-overlay-40:focus, .hover-overlay-40:hover { color: var(--overlay-40); }
.hover-overlay-30:focus, .hover-overlay-30:hover { color: var(--overlay-30); }
.hover-overlay-20:focus, .hover-overlay-20:hover { color: var(--overlay-20); }
.hover-overlay-10:focus, .hover-overlay-10:hover { color: var(--overlay-10); }
.hover-overlay-05:focus, .hover-overlay-05:hover { color: var(--overlay-05); }
.hover-bg-overlay-90:focus, .hover-bg-overlay-90:hover { background-color: var(--overlay-90); }
.hover-bg-overlay-80:focus, .hover-bg-overlay-80:hover { background-color: var(--overlay-80); }
.hover-bg-overlay-70:focus, .hover-bg-overlay-70:hover { background-color: var(--overlay-70); }
.hover-bg-overlay-60:focus, .hover-bg-overlay-60:hover { background-color: var(--overlay-60); }
.hover-bg-overlay-50:focus, .hover-bg-overlay-50:hover { background-color: var(--overlay-50); }
.hover-bg-overlay-40:focus, .hover-bg-overlay-40:hover { background-color: var(--overlay-40); }
.hover-bg-overlay-30:focus, .hover-bg-overlay-30:hover { background-color: var(--overlay-30); }
.hover-bg-overlay-20:focus, .hover-bg-overlay-20:hover { background-color: var(--overlay-20); }
.hover-bg-overlay-10:focus, .hover-bg-overlay-10:hover { background-color: var(--overlay-10); }
.hover-bg-overlay-05:focus, .hover-bg-overlay-05:hover { background-color: var(--overlay-05); }

/* roles */
.error { color: var(--error); }
.bg-error { background-color: var(--error); }
.b--error { border-color: var(--error); }
.on-error { color: var(--on-error); }
.on-error-muted { color: var(--on-error-muted); }
.bg-error-container { background-color: var(--error-container); }
.on-error-container { color: var(--on-error-container); }
.success { color: var(--success); }
.bg-success { background-color: var(--success); }
.b--success { border-color: var(--success); }
.on-success { color: var(--on-success); }
.on-success-muted { color: var(--on-success-muted); }
.bg-success-container { background-color: var(--success-container); }
.on-success-container { color: var(--on-success-container); }
.warning { color: var(--warning); }
.bg-warning { background-color: var(--warning); }
.b--warning { border-color: var(--warning); }
.on-warning { color: var(--on-warning); }
.on-warning-muted { color: var(--on-warning-muted); }
.bg-warning-container { background-color: var(--warning-container); }
.on-warning-container { color: var(--on-warning-container); }
.brand { color: var(--brand); }
.bg-brand { background-color: var(--brand); }
.b--brand { border-color: var(--brand); }
.on-brand { color: var(--on-brand); }
.on-brand-muted { color: var(--on-brand-muted); }
.bg-brand-container { background-color: var(--brand-container); }
.on-brand-container { color: var(--on-brand-container); }
.bg-focus { background-color: var(--focus); }
.on-focus { color: var(--on-focus); }
.b--focus { border-color: var(--focus); }
:focus-visible { outline: .1875rem solid var(--focus-ring); }
.focus-fill:focus-visible { outline: .1875rem solid transparent; background-color: var(--focus); color: var(--on-focus); text-decoration: none; }