:where(html) {
    --csstools-color-scheme--light: initial;
    --link: var(--indigo-7);
    --link-visited: var(--purple-7);
    --text-1: var(--gray-12);
    --text-2: var(--gray-7);
    --surface-1: var(--gray-0);
    --surface-2: var(--gray-2);
    --surface-3: var(--gray-3);
    --surface-4: var(--gray-4);
    --scrollthumb-color: var(--gray-7);
    -webkit-text-size-adjust: none;
    accent-color: var(--brand, var(--link));
    background-color: var(--surface-1);
    block-size: 100%;
    caret-color: var(--brand, var(--link));
    color: var(--text-1);
    color-scheme: light;
    font-family: var(--font-system-ui);
    line-height: var(--font-lineheight-3);
    scrollbar-color: var(--scrollthumb-color) transparent
}

@media (dynamic-range:high) or (color-gamut:p3) {
    @supports (color:color(display-p3 0 0 0)) {
        :where(html) {
            --link: color(display-p3 .1 .39 1);
            --link-visited: color(display-p3 .6 .2 1)
        }
    }
}

:where(html) :where(dialog) {
    background-color: var(--surface-1)
}

:where(html) :where(button, .btn) {
    --_highlight: var(--_highlight-light);
    --_bg: var(--_bg-light);
    --_ink-shadow: var(--_ink-shadow-light)
}

:where(html) :where(button, .btn) :where([type=reset]) {
    --_text: var(--red-6);
    --_border: var(--red-3)
}

:where(html) [disabled]:where(button, input[type=button], .btn) {
    --_text: var(--gray-6)
}

:where(html) [disabled]:where(button, input[type=submit], .btn) {
    --_text: var(--gray-6)
}

:where(html) [disabled]:where(button, input[type=reset], .btn) {
    --_text: var(--gray-6)
}

:where(html) :where(textarea, select, input:not([type=button], [type=submit], [type=reset])) {
    background-color: var(--surface-2)
}

@media (prefers-color-scheme:dark) {
    :where(html) {
        --csstools-color-scheme--light: ;
        --link: var(--indigo-3);
        --link-visited: var(--purple-3);
        --text-1: var(--gray-1);
        --text-2: var(--gray-4);
        --surface-1: var(--gray-9);
        --surface-2: var(--gray-8);
        --surface-3: var(--gray-7);
        --surface-4: var(--gray-6);
        --scrollthumb-color: var(--gray-6);
        --shadow-strength: 10%;
        --shadow-color: 220 40% 2%;
        color-scheme: dark
    }
}

:where(a[href]) {
    color: var(--brand, var(--link))
}

:where(a[href]):where(:visited) {
    color: var(--link-visited)
}

:focus-visible {
    outline-color: var(--brand, var(--link))
}

*,
:after,
:before {
    box-sizing: border-box
}

:where(:not(dialog)) {
    margin: 0
}

:where(:not(fieldset, progress, meter)) {
    background-origin: border-box;
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 0
}

@media (prefers-reduced-motion:no-preference) {
    :where(html) {
        scroll-behavior: smooth
    }
}

@media (prefers-reduced-motion:no-preference) {
    :where(:focus-visible) {
        transition: outline-offset 145ms var(--ease-2)
    }

    :where(:not(:active):focus-visible) {
        transition-duration: .25s
    }
}

:where(:not(:active):focus-visible) {
    outline-offset: 5px
}

:where(body) {
    min-block-size: 100%
}

:where(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
    font-weight: var(--font-weight-9);
    line-height: var(--font-lineheight-1)
}

:where(h1) {
    font-size: var(--font-size-8);
    max-inline-size: var(--size-header-1)
}

:where(h2) {
    font-size: var(--font-size-6);
    max-inline-size: var(--size-header-2)
}

:where(h3) {
    font-size: var(--font-size-5)
}

:where(h4) {
    font-size: var(--font-size-4)
}

:where(h5) {
    font-size: var(--font-size-3)
}

:where(h3, h4, h5, h6, dt) {
    max-inline-size: var(--size-header-3)
}

:where(p, ul, ol, dl, h6) {
    font-size: var(--font-size-2)
}

:where(a, u, ins, abbr) {
    text-underline-offset: 1px
}

@supports (-moz-appearance:none) {
    :where(a, u, ins, abbr) {
        text-underline-offset: 2px
    }
}

:where(a[href], area, button, input:not([type=text], [type=email], [type=number], [type=password], [type=""], [type=tel], [type=url]), label[for], select, summary, [tabindex]:not([tabindex*="-"], pre)) {
    cursor: pointer
}

:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation
}

:where(a):where([href]) {
    text-decoration-color: var(--indigo-2)
}

:where(a):where([href]):where(:visited) {
    text-decoration-color: var(--purple-2)
}

:where(a):where(:not(:hover)) {
    text-decoration: inherit
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
    display: block
}

:where(img, svg, video) {
    block-size: auto;
    max-inline-size: 100%
}

:where(input, button, textarea, select),
:where(input[type=file])::-webkit-file-upload-button {
    color: inherit;
    font: inherit;
    font-size: inherit;
    letter-spacing: inherit
}

::placeholder {
    color: var(--gray-7);
    opacity: .75
}

:where(input:not([type=range]), textarea) {
    padding-block: var(--size-1);
    padding-inline: var(--size-2)
}

:where(select) {
    field-sizing: content;
    padding-block: .75ch;
    padding-inline: var(--size-relative-4) 0
}

:where(textarea, select, input:not([type=button], [type=submit], [type=reset])) {
    background-color: var(--surface-2);
    border-radius: var(--radius-2)
}

:where(textarea) {
    field-sizing: content;
    min-block-size: 2lh;
    min-inline-size: var(--size-content-1);
    resize: vertical
}

:where(input[type=checkbox], input[type=radio]) {
    block-size: var(--size-3);
    inline-size: var(--size-3)
}

:where(svg:not([width])) {
    inline-size: var(--size-10)
}

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

:where(:not(pre)>code, kbd) {
    white-space: nowrap
}

:where(pre) {
    direction: ltr;
    max-inline-size: max-content;
    min-inline-size: 0;
    white-space: pre;
    writing-mode: lr
}

:where(:not(pre)>code) {
    background: var(--surface-2);
    border-radius: var(--radius-2);
    padding: var(--size-1) var(--size-2);
    writing-mode: lr
}

:where(kbd, var) {
    border-color: var(--surface-4);
    border-radius: var(--radius-2);
    border-width: var(--border-size-1);
    padding: var(--size-1) var(--size-2)
}

:where(mark) {
    border-radius: var(--radius-2);
    padding-inline: var(--size-1)
}

:where(ol, ul) {
    padding-inline-start: var(--size-8)
}

:where(li) {
    padding-inline-start: var(--size-2)
}

:where(li, dd, figcaption) {
    max-inline-size: var(--size-content-2)
}

:where(p) {
    text-wrap: pretty;
    max-inline-size: var(--size-content-3)
}

:where(dt, summary) {
    font-weight: var(--font-weight-7)
}

:where(dt:not(:first-of-type)) {
    margin-block-start: var(--size-5)
}

:where(small) {
    font-size: max(.5em, var(--font-size-0));
    max-inline-size: var(--size-content-1)
}

:where(hr) {
    background-color: var(--surface-3);
    height: var(--border-size-2);
    margin-block: var(--size-fluid-5)
}

:where(figure) {
    display: grid;
    gap: var(--size-2);
    place-items: center
}

:where(figure)>:where(figcaption) {
    text-wrap: balance;
    font-size: var(--font-size-1)
}

:where(blockquote, :not(blockquote)>cite) {
    border-inline-start-width: var(--border-size-3)
}

:where(blockquote) {
    display: grid;
    gap: var(--size-3);
    max-inline-size: var(--size-content-2);
    padding-block: var(--size-3);
    padding-inline: var(--size-4)
}

:where(:not(blockquote)>cite) {
    padding-inline-start: var(--size-2)
}

:where(summary) {
    background: var(--surface-3);
    border-radius: var(--radius-2);
    margin: calc(var(--size-2)*-1) calc(var(--size-3)*-1);
    padding: var(--size-2) var(--size-3)
}

:where(details) {
    background: var(--surface-2);
    border-radius: var(--radius-2);
    padding-block: var(--size-2);
    padding-inline: var(--size-3)
}

:where(details[open]>summary) {
    border-end-end-radius: 0;
    border-end-start-radius: 0;
    margin-bottom: var(--size-2)
}

:where(fieldset) {
    border: var(--border-size-1) solid var(--surface-4);
    border-radius: var(--radius-2)
}

:where(del) {
    background: var(--red-9);
    color: var(--red-2)
}

:where(ins) {
    background: var(--green-9);
    color: var(--green-1)
}

:where(abbr) {
    text-decoration-color: var(--blue-5)
}

:where(dialog) {
    background-color: var(--surface-1);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-6);
    color: inherit
}

:where(menu) {
    display: flex;
    gap: var(--size-3);
    padding-inline-start: 0
}

:where(sup) {
    font-size: .5em
}

:where(table) {
    --nice-inner-radius: calc(var(--radius-3) - 2px);
    background: var(--surface-2);
    border: 1px solid var(--surface-2);
    border-radius: var(--radius-3);
    width: fit-content
}

:where(table:not(:has(tfoot)) tr:last-child td:first-child) {
    border-end-start-radius: var(--nice-inner-radius)
}

:where(table:not(:has(tfoot)) tr:last-child td:last-child) {
    border-end-end-radius: var(--nice-inner-radius)
}

:where(table thead tr:first-child th:first-child) {
    border-start-start-radius: var(--nice-inner-radius)
}

:where(table thead tr:first-child th:last-child) {
    border-start-end-radius: var(--nice-inner-radius)
}

:where(tfoot tr:last-child th:first-of-type) {
    border-end-start-radius: var(--nice-inner-radius)
}

:where(tfoot tr:last-child td:first-of-type) {
    border-end-start-radius: var(--nice-inner-radius)
}

:where(tfoot tr:last-child th:last-of-type) {
    border-end-end-radius: var(--nice-inner-radius)
}

:where(tfoot tr:last-child td:last-of-type) {
    border-end-end-radius: var(--nice-inner-radius)
}

:where(th) {
    background-color: var(--surface-2);
    color: var(--text-1)
}

:where(table a:not(.does-not-exist):focus-visible) {
    outline-offset: -2px
}

:where(table button:not(.does-not-exist):focus-visible) {
    outline-offset: -2px
}

:where(table [contenteditable]:focus-visible) {
    outline-offset: -2px
}

:where(td) {
    text-wrap: pretty;
    background: var(--surface-1);
    max-inline-size: var(--size-content-2)
}

:where(td, th) {
    padding: var(--size-2);
    text-align: left
}

:where(td:not([align])) {
    text-align: center
}

:where(th:not([align])) {
    text-align: center
}

:where(thead) {
    border-collapse: collapse
}

:where(table tr:hover td),
:where(tbody tr:nth-child(2n):hover td) {
    background-color: var(--surface-3)
}

:where(table>caption) {
    margin: var(--size-3)
}

:where(tfoot button) {
    padding-block: var(--size-1);
    padding-inline: var(--size-3)
}

@media (prefers-color-scheme:dark) {
    :where(textarea, select, input:not([type=button], [type=submit], [type=reset])) {
        background-color: #171a1c
    }

    :where(dialog) {
        background-color: var(--surface-2)
    }

    ::placeholder {
        color: var(--gray-6)
    }
}