:root {
    --0: "Atkinson Hyperlegible Pro", "Atkinson Hyperlegible", Helvetica, Arial, sans-serif;
    --1: Xcharter, Charter, Georgia, Times, "Times New Roman", serif;
    --2: "Fira Mono", "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace;
    --3: "Atkinson Hyperlegible Pro", "Atkinson Hyperlegible", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --4: #fff;
    --5: #e6e6e6;
    --6: #ccc;
    --7: #b3b3b3;
    --8: #999;
    --9: gray;
    --a: #666;
    --b: #4d4d4d;
    --c: #333;
    --d: #1a1a1a;
    --e: #000;
    --f: #ff9666;
    --g: #ff854c;
    --h: #ff7433;
    --i: #ff621a;
    --j: #ff5100;
    --k: color-mix(in srgb, var(--f), var(--l));
    --m: color-mix(in srgb, var(--g), var(--n));
    --o: color-mix(in srgb, var(--h), var(--p));
    --q: color-mix(in srgb, var(--i), var(--r));
    --s: color-mix(in srgb, var(--j), var(--t));
    --l: var(--a);
    --n: var(--b);
    --p: var(--c);
    --r: var(--d);
    --t: var(--e);
    --u: #17cf63;
    --v: #14b858;
    --w: #12a14d;
    --x: #0f8a42;
    --y: #0d7337;
    --z: #fc6;
    --10: #ffc44c;
    --11: #fb3;
    --12: #ffb31a;
    --13: #fa0;
    --14: #e96363;
    --15: #e64d4d;
    --16: #e23636;
    --17: #df2020;
    --18: #c91d1d
}

*,
:before,
:after {
    box-sizing: border-box;
    color: inherit;
    font: inherit;
    text-align: inherit;
    vertical-align: baseline;
    background: 0 0;
    border: 0;
    outline: 0;
    margin: 0;
    padding: 0
}

html {
    background: var(--4);
    text-align: left;
    overflow-wrap: break-word;
    scroll-behavior: smooth;
    font-size: clamp(100%, 5vw + 1rem, 105%)
}

body {
    color: var(--e);
    font-size: 1rem;
    font-family: var(--0);
    font-variant-numeric: slashed-zero;
    font-weight: 400;
    line-height: 1.5
}

img,
svg,
picture,
video,
canvas,
audio,
iframe,
embed,
object {
    max-width: 100%;
    display: block
}

p,
pre,
table,
blockquote,
:is(h1, h2, h3, h4, h5, h6),
:is([data-list~=ol], [data-list~=ul], [data-list~=dl]) {
    margin: .75rem 0
}

:is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--0);
    font-variant-ligatures: no-common-ligatures;
    font-weight: 400
}

h1,
[data-text~=h1] {
    font-size: clamp(2.488rem, 3vw + 1rem, 4.209rem);
    line-height: 1.2
}

h2,
[data-text~=h2] {
    font-size: clamp(2.074rem, 3vw + 1rem, 3.157rem);
    line-height: 1.2
}

h3,
[data-text~=h3] {
    font-size: clamp(1.728rem, 3vw + 1rem, 2.369rem);
    line-height: 1.3
}

h4,
[data-text~=h4] {
    font-size: clamp(1.44rem, 3vw + 1rem, 1.777rem);
    line-height: 1.4
}

h5,
[data-text~=h5] {
    font-size: clamp(1.2rem, 3vw + 1rem, 1.333rem);
    line-height: 1.4
}

h6,
[data-text~=h6] {
    font-size: 1rem;
    line-height: 1.5
}

b,
strong {
    font-weight: bolder
}

i,
em,
dfn {
    font-style: italic
}

[title]:where(abbr, dfn) {
    text-underline-offset: .3125em;
    cursor: help;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    text-decoration-thickness: .125rem
}

mark {
    background-color: var(--12);
    color: var(--e)
}

small,
sub,
sup,
[data-text~=small] {
    font-size: .833rem
}

sub,
sup {
    line-height: 0;
    position: relative
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

hr {
    border-top: .125rem solid var(--e);
    min-height: .0625rem;
    margin: .75rem 0;
    display: block
}

:where(a) {
    color: var(--e);
    text-decoration: none;
    -webkit-text-decoration: underline solid var(--j);
    -webkit-text-decoration: underline solid var(--j);
    text-decoration: underline solid var(--j);
    text-decoration-thickness: .125rem;
    -webkit-text-decoration: underline solid var(--j);
    text-underline-offset: .3125em;
    cursor: pointer;
    background-color: #0000
}

:where(a:hover, a:active) {
    color: var(--j);
    text-decoration: none
}

:where(a:focus) {
    outline-offset: -.125rem;
    outline: thin dotted
}

blockquote,
q {
    quotes: none
}

blockquote {
    font-family: var(--1);
    font-style: italic
}

blockquote:before,
blockquote:after {
    content: "";
    content: none
}

:where(blockquote) small {
    display: block
}

:where(blockquote) small:before {
    content: "— "
}

code,
kbd,
pre,
samp {
    font-family: var(--2)
}

pre {
    white-space: pre-wrap;
    overflow: auto
}

ol,
ul {
    list-style-type: none
}

:is([data-list~=ol], [data-list~=ul], [data-list~=dl]) {
    padding-left: 1.5rem;
    list-style-position: outside
}

[data-list~=ol] {
    list-style-type: decimal
}

[data-list~=ol]>li:first-child>[data-list~=ol] {
    list-style-type: lower-alpha
}

[data-list~=ul] {
    list-style-type: disc
}

[data-list~=ul]>li:first-child>[data-list~=ul] {
    list-style-type: circle
}

:is([data-list~=ol], [data-list~=ul], [data-list~=dl]) [data-list] {
    margin: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    display: table
}

td,
th {
    padding: .5rem .75rem;
    display: table-cell
}

:where(form) select,
textarea,
input {
    margin: .5rem 0
}

select,
textarea,
input[type=text],
input[type=email],
input[type=password],
input[type=time],
input[type=date],
input[type=datetime-local],
input[type=month],
input[type=week],
input[type=number],
input[type=range],
input[type=search],
input[type=tel],
input[type=url] {
    border: .0625em solid var(--9);
    color: var(--9);
    font-family: var(--3);
    background-color: #0000;
    border-radius: .25rem;
    width: 100%;
    padding: .5rem .75rem;
    transition: color .2s, border-color .2s, background-color .2s;
    display: block
}

select:focus,
textarea:focus,
input:focus:not([type=button], [type=reset], [type=submit]) {
    color: var(--e);
    border-color: var(--j)
}

textarea {
    resize: vertical;
    min-height: 6.25rem;
    overflow: auto
}

button,
select,
[type=button],
[type=reset],
[type=submit] {
    font-family: var(--3);
    text-transform: none;
    overflow: visible
}

[type=file] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute
}

:not([type=button], [type=reset], [type=submit]):invalid {
    border-color: var(--18)
}

::selection {
    color: #000;
    text-shadow: none;
    background-color: #ffd580
}

[data-container] {
    width: clamp(20rem, 100%, 62.5rem);
    margin: 0 auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem
}

:where(body)>[data-container]:first-child {
    margin-top: 4.5rem
}

:where(body)>[data-container]:last-child {
    margin-bottom: 3rem
}

[data-container~=full] {
    width: 100%
}

[data-grid] {
    column-gap: 1.25rem;
    display: grid
}

[data-column] {
    grid-column: 1/-1
}

[data-dropbox] {
    z-index: -10;
    box-sizing: content-box;
    visibility: hidden;
    color: var(--e);
    opacity: 0;
    min-width: 10rem;
    transition: opacity .3s, visibility .3s;
    display: none
}

[data-dropbox~=menu] {
    background-color: var(--4);
    border: .0625em solid var(--e)
}

[data-toggle~=tooltip] {
    text-underline-offset: .3125em;
    cursor: help;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    text-decoration-thickness: .125rem
}

[data-dropbox=tooltip] {
    background-color: var(--e);
    color: var(--4);
    min-width: 24ch;
    padding: .5rem .75rem;
    bottom: 100%
}

[data-toggle] {
    position: relative
}

[data-toggle~=tooltip]>[data-dropbox],
[data-toggle~=pop]>[data-dropbox],
[data-toggle~=pop]+[data-dropbox] {
    display: block;
    position: absolute
}

[data-state=active]>[data-dropbox],
[data-state=active]+[data-dropbox],
[data-toggle~=tooltip]:hover>[data-dropbox] {
    z-index: 100;
    visibility: visible;
    opacity: 1;
    display: block
}

[data-anchor] {
    color: var(--j);
    font-family: var(--3);
    cursor: pointer;
    padding: .5rem .75rem;
    text-decoration: none;
    transition: color .2s, border-color .2s, background-color .2s;
    display: block
}

[data-anchor]:where([data-state=active], :hover, :active) {
    color: var(--e);
    text-decoration: none
}

[data-anchor]:focus {
    outline-offset: -.125rem;
    outline: thin dotted
}

[data-anchor~=menu] {
    color: var(--e)
}

[data-anchor~=menu]:where([data-state=active], :hover, :active) {
    background-color: var(--e);
    color: var(--4)
}

[data-flex~=breadcrumb] {
    column-gap: .375em
}

:where([data-flex~=breadcrumb]) li:after {
    content: "/";
    margin-left: .375em
}

:where([data-flex~=breadcrumb]) li:last-child:after {
    content: "";
    margin-right: 0
}

[data-flex~=line-top] {
    border-top: .125em solid var(--e)
}

:where([data-flex~=line-top]) [data-anchor~=line] {
    border-top: .125em solid #0000;
    bottom: .125em
}

[data-flex~=line-bottom] {
    border-bottom: .125em solid var(--e)
}

:where([data-flex~=line-bottom]) [data-anchor~=line] {
    border-bottom: .125em solid #0000;
    top: .125em
}

[data-anchor~=line] {
    z-index: 1;
    color: var(--j);
    position: relative
}

[data-anchor~=line]:where([data-state=active], :hover, :active) {
    z-index: 5;
    border-color: var(--j);
    color: var(--e)
}

[data-navbar] {
    background-color: var(--e);
    color: var(--j);
    width: 100%
}

[data-navbar=top],
[data-navbar=bottom] {
    z-index: 1000;
    position: fixed
}

[data-navbar=top] {
    top: 0
}

:where([data-navbar=top]) [data-dropbox] {
    top: 100%
}

[data-navbar=bottom] {
    bottom: 0
}

:where([data-navbar=bottom]) [data-dropbox] {
    bottom: 100%
}

[data-anchor~=navbar] {
    color: var(--4)
}

[data-anchor~=navbar]:where([data-state=active], :hover, :active) {
    color: var(--j)
}

[data-dropbox~=navbar] {
    background-color: var(--d)
}

[data-button] {
    background-color: var(--e);
    color: var(--4);
    font-family: var(--3);
    cursor: pointer;
    border: .0625em solid #0000;
    border-radius: .25rem;
    padding: .5rem .75rem;
    text-decoration: none;
    transition: color .2s, border-color .2s, background-color .2s;
    display: inline-block
}

[data-button]:is([data-state=active], :hover, :active) {
    background-color: var(--c);
    text-decoration: none
}

[data-button]:focus {
    outline-offset: -.125rem;
    outline: thin dotted
}

[data-button~=outline] {
    color: var(--e);
    border-color: var(--e)
}

[data-button~=outline]:is([data-state=active], :hover, :active) {
    background-color: var(--e);
    color: var(--4)
}

[data-button~=tertiary] {
    background-color: var(--t);
    color: var(--4)
}

[data-button~=tertiary]:is([data-state=active], :hover, :active) {
    background-color: var(--p);
    color: var(--4)
}

[data-button^=tertiary\ outline] {
    border-color: var(--t);
    color: var(--t)
}

[data-button^=tertiary\ outline]:is([data-state=active], :hover, :active) {
    background-color: var(--t);
    color: var(--4)
}

[data-button~=secondary] {
    background-color: var(--s);
    color: var(--4)
}

[data-button~=secondary]:is([data-state=active], :hover, :active) {
    background-color: var(--o);
    color: var(--4)
}

[data-button^=secondary\ outline] {
    border-color: var(--s);
    color: var(--s)
}

[data-button^=secondary\ outline]:is([data-state=active], :hover, :active) {
    background-color: var(--s);
    color: var(--4)
}

[data-button~=primary] {
    background-color: var(--j);
    color: var(--4)
}

[data-button~=primary]:is([data-state=active], :hover, :active) {
    background-color: var(--h);
    color: var(--4)
}

[data-button^=primary\ outline] {
    border-color: var(--j);
    color: var(--j)
}

[data-button^=primary\ outline]:is([data-state=active], :hover, :active) {
    background-color: var(--j);
    color: var(--4)
}

[data-button~=success] {
    background-color: var(--y);
    color: var(--4)
}

[data-button~=success]:is([data-state=active], :hover, :active) {
    background-color: var(--x);
    color: var(--4)
}

[data-button^=success\ outline] {
    border-color: var(--y);
    color: var(--y)
}

[data-button^=success\ outline]:is([data-state=active], :hover, :active) {
    background-color: var(--y);
    color: var(--4)
}

[data-button~=warning] {
    background-color: var(--13);
    color: var(--e)
}

[data-button~=warning]:is([data-state=active], :hover, :active) {
    background-color: var(--12);
    color: var(--e)
}

[data-button^=warning\ outline] {
    border-color: var(--13);
    color: var(--13)
}

[data-button^=warning\ outline]:is([data-state=active], :hover, :active) {
    background-color: var(--13);
    color: var(--e)
}

[data-button~=danger] {
    background-color: var(--18);
    color: var(--4)
}

[data-button~=danger]:is([data-state=active], :hover, :active) {
    background-color: var(--17);
    color: var(--4)
}

[data-button^=danger\ outline] {
    border-color: var(--18);
    color: var(--18)
}

[data-button^=danger\ outline]:is([data-state=active], :hover, :active) {
    background-color: var(--18);
    color: var(--4)
}

[data-button~=outline] {
    background-color: #0000
}

[data-button=link] {
    color: var(--e);
    text-decoration: none;
    -webkit-text-decoration: underline solid var(--j);
    -webkit-text-decoration: underline solid var(--j);
    text-decoration: underline solid var(--j);
    text-decoration-thickness: .125rem;
    -webkit-text-decoration: underline solid var(--j);
    text-underline-offset: .3125em;
    font-family: var(--0);
    background-color: #0000
}

[data-button=link]:is([data-state=active], :hover, :active) {
    color: var(--j);
    background-color: #0000;
    border-color: #0000;
    text-decoration: none
}

[data-state=disabled],
[data-state=disabled]:is(:hover, :active, :focus) {
    background-color: var(--5);
    color: var(--9);
    cursor: not-allowed;
    border-color: #0000;
    outline: 0;
    text-decoration: none
}

@font-face {
    font-family: Atkinson Hyperlegible Pro;
    src: local(Atkinson Hyperlegible Pro), url(up_/fonts/atkinson-hyperlegible-pro/AtkinsonHyperPro-Regular.6fcd7676.woff2)format("woff2");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Atkinson Hyperlegible Pro;
    src: local(Atkinson Hyperlegible Pro), url(up_/fonts/atkinson-hyperlegible-pro/AtkinsonHyperPro-Italic.f28a743b.woff2)format("woff2");
    font-weight: 400;
    font-style: italic
}

@font-face {
    font-family: Atkinson Hyperlegible Pro;
    src: local(Atkinson Hyperlegible Pro), url(up_/fonts/atkinson-hyperlegible-pro/AtkinsonHyperPro-Bold.ed2bb3af.woff2)format("woff2");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: Atkinson Hyperlegible Pro;
    src: local(Atkinson Hyperlegible Pro), url(up_/fonts/atkinson-hyperlegible-pro/AtkinsonHyperPro-BoldItalic.b197cc55.woff2)format("woff2");
    font-weight: 700;
    font-style: italic
}

@font-face {
    font-family: Xcharter;
    src: local(Xcharter), url(up_/fonts/xcharter/XCharter-Roman.ff14434c.woff2)format("woff2");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Xcharter;
    src: local(Xcharter), url(up_/fonts/xcharter/XCharter-Italic.20944042.woff2)format("woff2");
    font-weight: 400;
    font-style: italic
}

@font-face {
    font-family: Xcharter;
    src: local(Xcharter), url(up_/fonts/xcharter/XCharter-Bold.c8f1904c.woff2)format("woff2");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: Xcharter;
    src: local(Xcharter), url(up_/fonts/xcharter/XCharter-BoldItalic.0f3fe492.woff2)format("woff2");
    font-weight: 700;
    font-style: italic
}

@font-face {
    font-family: Fira Mono;
    src: local(Fira Mono), local(Fira Code), url(up_/fonts/fira-mono/FiraMono-Regular.bd490d99.woff2)format("woff2");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Fira Mono;
    src: local(Fira Mono), local(Fira Code), url(up_/fonts/fira-mono/FiraMono-Medium.26b3302b.woff2)format("woff2");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: Fira Mono;
    src: local(Fira Mono), local(Fira Code), url(up_/fonts/fira-mono/FiraMono-Bold.ea8f280f.woff2)format("woff2");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: icons;
    src: url(up_/fonts/icons/icons.7604ec27.woff2)format("woff2");
    font-weight: 400;
    font-style: normal;
    font-variant: normal
}

[data-icon]:before {
    content: attr(data-icon);
    vertical-align: middle;
    text-transform: none;
    font-family: icons;
    font-weight: 400;
    line-height: 1;
    display: inline-block
}

[data-position~=relative] {
    position: relative
}

[data-position~=absolute] {
    position: absolute
}

[data-position~=fixed] {
    position: fixed
}

[data-position~=top] {
    top: 0
}

[data-position~=bottom] {
    bottom: 0
}

[data-position~=left] {
    left: 0
}

[data-position~=right] {
    right: 0
}

[data-box~=leading] {
    margin: .75rem 0
}

[data-box~=padding] {
    padding: .5rem .75rem
}

[data-box~=padding-top] {
    padding-top: .5rem
}

[data-box~=padding-x],
[data-box~=padding-right] {
    padding-right: .75rem
}

[data-box~=padding-bottom] {
    padding-bottom: .5rem
}

[data-box~=padding-x],
[data-box~=padding-left] {
    padding-left: .75rem
}

[data-box~=border] {
    border: .0625em solid var(--9)
}

[data-box~=border-top] {
    border-top: .0625em solid var(--9)
}

[data-box~=border-left],
[data-box~=border-x] {
    border-left: .0625em solid var(--9)
}

[data-box~=border-right],
[data-box~=border-x] {
    border-right: .0625em solid var(--9)
}

[data-box~=border-bottom] {
    border-bottom: .0625em solid var(--9)
}

[data-box~=full-width] {
    width: 100%
}

[data-text~=left] {
    text-align: left
}

[data-text~=right] {
    text-align: right
}

[data-text~=center] {
    text-align: center
}

[data-text~=justify] {
    text-align: justify;
    hyphens: auto
}

[data-flex] {
    display: flex
}

[data-flex~=reverse] {
    flex-direction: row-reverse
}

[data-flex~=column] {
    flex-direction: column
}

[data-flex*=column\ reverse] {
    flex-direction: column-reverse
}

[data-flex~=wrap] {
    flex-wrap: wrap
}

[data-flex~=grow]>*,
[data-item~=grow] {
    flex-grow: 1
}

[data-flex~=gap] {
    gap: 1.25rem
}

[data-flex~=end] {
    justify-content: flex-end
}

[data-flex~=center] {
    justify-content: center
}

[data-flex~=between] {
    justify-content: space-between
}

[data-flex~=around] {
    justify-content: space-around
}

[data-flex~=even] {
    justify-content: space-evenly
}

@media screen and (width<=42.5em) {
    [data-grid~=main] {
        grid-template-columns: repeat(4, 1fr)
    }

    [data-column~=small-1] {
        grid-column: span 1
    }

    [data-column~=small-2] {
        grid-column: span 2
    }

    [data-column~=small-3] {
        grid-column: span 3
    }

    [data-column~=small-4] {
        grid-column: span 4
    }

    [data-display~=small-none],
    [data-display~=medium],
    [data-display~=large] {
        display: none
    }
}

@media screen and (width>=42.5625em) and (width<=61.1875em) {
    [data-grid~=main] {
        grid-template-columns: repeat(12, 1fr)
    }

    [data-column~=medium-1] {
        grid-column: span 1
    }

    [data-column~=medium-2] {
        grid-column: span 2
    }

    [data-column~=medium-3] {
        grid-column: span 3
    }

    [data-column~=medium-4] {
        grid-column: span 4
    }

    [data-column~=medium-5] {
        grid-column: span 5
    }

    [data-column~=medium-6] {
        grid-column: span 6
    }

    [data-column~=medium-7] {
        grid-column: span 7
    }

    [data-column~=medium-8] {
        grid-column: span 8
    }

    [data-column~=medium-9] {
        grid-column: span 9
    }

    [data-column~=medium-10] {
        grid-column: span 10
    }

    [data-column~=medium-11] {
        grid-column: span 11
    }

    [data-column~=medium-12] {
        grid-column: span 12
    }

    [data-display~=medium-none],
    [data-display~=small],
    [data-display~=large] {
        display: none
    }
}

@media screen and (width>=61.25em) {
    [data-grid~=main] {
        grid-template-columns: repeat(12, 1fr)
    }

    [data-column~=large-1] {
        grid-column: span 1
    }

    [data-column~=large-2] {
        grid-column: span 2
    }

    [data-column~=large-3] {
        grid-column: span 3
    }

    [data-column~=large-4] {
        grid-column: span 4
    }

    [data-column~=large-5] {
        grid-column: span 5
    }

    [data-column~=large-6] {
        grid-column: span 6
    }

    [data-column~=large-7] {
        grid-column: span 7
    }

    [data-column~=large-8] {
        grid-column: span 8
    }

    [data-column~=large-9] {
        grid-column: span 9
    }

    [data-column~=large-10] {
        grid-column: span 10
    }

    [data-column~=large-11] {
        grid-column: span 11
    }

    [data-column~=large-12] {
        grid-column: span 12
    }

    [data-display~=large-none],
    [data-display~=small],
    [data-display~=medium] {
        display: none
    }
}

@media print {

    html,
    body {
        height: auto
    }

    nav {
        display: none
    }

    [data-container] {
        max-width: 100%;
        margin: 0;
        padding: 0
    }

    [data-grid] {
        display: block
    }
}

[data-section~=header] {
    background-color: var(--e);
    color: var(--4);
    margin-bottom: 1.5rem;
    padding-top: 6rem;
    padding-bottom: 3rem
}

[data-section~=header] :is(h1, h2, h3, h4, h5, h6) {
    color: var(--4)
}

[data-section=footer] {
    margin-bottom: 3rem
}

:where([data-section~=header]) a {
    color: inherit
}

:where([data-section~=header]) a:hover {
    color: var(--j)
}