*,
:before,
:after {
    box-sizing: border-box;
    background-repeat: no-repeat;
}
:before,
:after {
    text-decoration: inherit;
    vertical-align: inherit;
}
:root {
    cursor: default;
    overflow-wrap: break-word;
    -webkit-tap-highlight-color: transparent;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
}
abbr[title] {
    text-decoration: underline dotted;
}
strong,
b {
    font-weight: bolder;
}
small {
    font-size: 80%;
}
audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}
svg:not([fill]) {
    fill: currentColor;
}
table {
    border-collapse: collapse;
    border-color: currentColor;
    text-indent: 0;
}
button,
input,
select {
    margin: 0;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}
fieldset {
    border: 1px solid #a0a0a0;
}
progress {
    vertical-align: baseline;
}
textarea {
    margin: 0;
}
[type="search"] {
    -webkit-appearance: textfield;
}
input {
    outline-offset: 0;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    block-size: auto;
}
::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.54;
}
::-webkit-search-decoration {
    -webkit-appearance: none;
}
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}
[hidden] {
    display: none !important;
}
:focus-visible {
    outline: 0.2em solid var(--accent);
    z-index: 2;
}
iframe:focus-visible,
html:focus-visible,
body:focus-visible {
    outline: none;
}
:target {
    outline: 0.2em solid var(--fg);
    z-index: 2;
}
details > summary:first-of-type {
    display: list-item;
}
[aria-busy="true"] {
    cursor: progress;
}
[aria-disabled="true"],
[disabled] {
    cursor: not-allowed;
}
datalist {
    display: none !important;
}
:root {
    --gray-0: #f8fafb;
    --gray-1: #f2f4f6;
    --gray-2: #ebedef;
    --gray-3: #e0e4e5;
    --gray-4: #d1d6d8;
    --gray-5: #b1b6b9;
    --gray-6: #979b9d;
    --gray-7: #7e8282;
    --gray-8: #666968;
    --gray-9: #50514f;
    --gray-10: #3a3a37;
    --gray-11: #252521;
    --gray-12: #121210;
    --red-0: #fff5f5;
    --red-1: #ffe3e3;
    --red-2: #ffc9c9;
    --red-3: #ffa8a8;
    --red-4: #ff8787;
    --red-5: #ff6b6b;
    --red-6: #fa5252;
    --red-7: #f03e3e;
    --red-8: #e03131;
    --red-9: #c92a2a;
    --red-10: #b02525;
    --red-11: #962020;
    --red-12: #7d1a1a;
    --pink-0: #fff0f6;
    --pink-1: #ffdeeb;
    --pink-2: #fcc2d7;
    --pink-3: #faa2c1;
    --pink-4: #f783ac;
    --pink-5: #f06595;
    --pink-6: #e64980;
    --pink-7: #d6336c;
    --pink-8: #c2255c;
    --pink-9: #a61e4d;
    --pink-10: #8c1941;
    --pink-11: #731536;
    --pink-12: #59102a;
    --purple-0: #f8f0fc;
    --purple-1: #f3d9fa;
    --purple-2: #eebefa;
    --purple-3: #e599f7;
    --purple-4: #da77f2;
    --purple-5: #cc5de8;
    --purple-6: #be4bdb;
    --purple-7: #ae3ec9;
    --purple-8: #9c36b5;
    --purple-9: #862e9c;
    --purple-10: #702682;
    --purple-11: #5a1e69;
    --purple-12: #44174f;
    --violet-0: #f3f0ff;
    --violet-1: #e5dbff;
    --violet-2: #d0bfff;
    --violet-3: #b197fc;
    --violet-4: #9775fa;
    --violet-5: #845ef7;
    --violet-6: #7950f2;
    --violet-7: #7048e8;
    --violet-8: #6741d9;
    --violet-9: #5f3dc4;
    --violet-10: #5235ab;
    --violet-11: #462d91;
    --violet-12: #3a2578;
    --indigo-0: #edf2ff;
    --indigo-1: #dbe4ff;
    --indigo-2: #bac8ff;
    --indigo-3: #91a7ff;
    --indigo-4: #748ffc;
    --indigo-5: #5c7cfa;
    --indigo-6: #4c6ef5;
    --indigo-7: #4263eb;
    --indigo-8: #3b5bdb;
    --indigo-9: #364fc7;
    --indigo-10: #2f44ad;
    --indigo-11: #283a94;
    --indigo-12: #21307a;
    --blue-0: #e7f5ff;
    --blue-1: #d0ebff;
    --blue-2: #a5d8ff;
    --blue-3: #74c0fc;
    --blue-4: #4dabf7;
    --blue-5: #339af0;
    --blue-6: #228be6;
    --blue-7: #1c7ed6;
    --blue-8: #1971c2;
    --blue-9: #1864ab;
    --blue-10: #145591;
    --blue-11: #114678;
    --blue-12: #0d375e;
    --cyan-0: #e3fafc;
    --cyan-1: #c5f6fa;
    --cyan-2: #99e9f2;
    --cyan-3: #66d9e8;
    --cyan-4: #3bc9db;
    --cyan-5: #22b8cf;
    --cyan-6: #15aabf;
    --cyan-7: #1098ad;
    --cyan-8: #0c8599;
    --cyan-9: #0b7285;
    --cyan-10: #095c6b;
    --cyan-11: #074652;
    --cyan-12: #053038;
    --teal-0: #e6fcf5;
    --teal-1: #c3fae8;
    --teal-2: #96f2d7;
    --teal-3: #63e6be;
    --teal-4: #38d9a9;
    --teal-5: #20c997;
    --teal-6: #12b886;
    --teal-7: #0ca678;
    --teal-8: #099268;
    --teal-9: #087f5b;
    --teal-10: #066649;
    --teal-11: #054d37;
    --teal-12: #033325;
    --green-0: #ebfbee;
    --green-1: #d3f9d8;
    --green-2: #b2f2bb;
    --green-3: #8ce99a;
    --green-4: #69db7c;
    --green-5: #51cf66;
    --green-6: #40c057;
    --green-7: #37b24d;
    --green-8: #2f9e44;
    --green-9: #2b8a3e;
    --green-10: #237032;
    --green-11: #1b5727;
    --green-12: #133d1b;
    --lime-0: #f4fce3;
    --lime-1: #e9fac8;
    --lime-2: #d8f5a2;
    --lime-3: #c0eb75;
    --lime-4: #a9e34b;
    --lime-5: #94d82d;
    --lime-6: #82c91e;
    --lime-7: #74b816;
    --lime-8: #66a80f;
    --lime-9: #5c940d;
    --lime-10: #4c7a0b;
    --lime-11: #3c6109;
    --lime-12: #2c4706;
    --yellow-0: #fff9db;
    --yellow-1: #fff3bf;
    --yellow-2: #ffec99;
    --yellow-3: #ffe066;
    --yellow-4: #ffd43b;
    --yellow-5: #fcc419;
    --yellow-6: #fab005;
    --yellow-7: #f59f00;
    --yellow-8: #f08c00;
    --yellow-9: #e67700;
    --yellow-10: #b35c00;
    --yellow-11: #804200;
    --yellow-12: #663500;
    --orange-0: #fff4e6;
    --orange-1: #ffe8cc;
    --orange-2: #ffd8a8;
    --orange-3: #ffc078;
    --orange-4: #ffa94d;
    --orange-5: #ff922b;
    --orange-6: #fd7e14;
    --orange-7: #f76707;
    --orange-8: #e8590c;
    --orange-9: #d9480f;
    --orange-10: #bf400d;
    --orange-11: #99330b;
    --orange-12: #802b09;
    --choco-0: #fff8dc;
    --choco-1: #fce1bc;
    --choco-2: #f7ca9e;
    --choco-3: #f1b280;
    --choco-4: #e99b62;
    --choco-5: #df8545;
    --choco-6: #d46e25;
    --choco-7: #bd5f1b;
    --choco-8: #a45117;
    --choco-9: #8a4513;
    --choco-10: #703a13;
    --choco-11: #572f12;
    --choco-12: #3d210d;
    --brown-0: #faf4eb;
    --brown-1: #ede0d1;
    --brown-2: #e0cab7;
    --brown-3: #d3b79e;
    --brown-4: #c5a285;
    --brown-5: #b78f6d;
    --brown-6: #a87c56;
    --brown-7: #956b47;
    --brown-8: #825b3a;
    --brown-9: #6f4b2d;
    --brown-10: #5e3a21;
    --brown-11: #4e2b15;
    --brown-12: #422412;
    --sand-0: #f8fafb;
    --sand-1: #e6e4dc;
    --sand-2: #d5cfbd;
    --sand-3: #c2b9a0;
    --sand-4: #aea58c;
    --sand-5: #9a9178;
    --sand-6: #867c65;
    --sand-7: #736a53;
    --sand-8: #5f5746;
    --sand-9: #4b4639;
    --sand-10: #38352d;
    --sand-11: #252521;
    --sand-12: #121210;
    --camo-0: #f9fbe7;
    --camo-1: #e8ed9c;
    --camo-2: #d2df4e;
    --camo-3: #c2ce34;
    --camo-4: #b5bb2e;
    --camo-5: #a7a827;
    --camo-6: #999621;
    --camo-7: #8c851c;
    --camo-8: #7e7416;
    --camo-9: #6d6414;
    --camo-10: #5d5411;
    --camo-11: #4d460e;
    --camo-12: #36300a;
    --jungle-0: #ecfeb0;
    --jungle-1: #def39a;
    --jungle-2: #d0e884;
    --jungle-3: #c2dd6e;
    --jungle-4: #b5d15b;
    --jungle-5: #a8c648;
    --jungle-6: #9bbb36;
    --jungle-7: #8fb024;
    --jungle-8: #84a513;
    --jungle-9: #7a9908;
    --jungle-10: #658006;
    --jungle-11: #516605;
    --jungle-12: #3d4d04;
}
html {
    font-family: var(--main-font);
    line-height: var(--rhythm, 1.4rem);
    background: var(--bg);
    color: var(--fg);
    scroll-padding-block-start: calc(4 * var(--gap));
    scrollbar-color: var(--accent) transparent;
    scrollbar-width: auto;
    & * {
        @supports (accent-color: #000) {
            accent-color: var(--accent);
        }
        scrollbar-color: var(--accent) transparent;
        scrollbar-width: thin;
    }
}
body {
    margin: 0;
    scrollbar-width: auto;
}
header,
footer,
section + section {
    margin-block: calc(2 * var(--gap));
}
nav {
    :is(a:not(.\<button\>), .\<a\>) {
        text-decoration: none;
        color: var(--accent);
    }
}
aside {
    font-size: 0.8em;
    line-height: calc(var(--rhythm, 1rlh) * 2 / 3);
    --gap: calc(var(--rhythm, 1rlh) * var(--density) * 2 / 3);
    border-block-start: var(--border-block-start-width)
        var(--border-block-start-style) var(--graphical-fg);
    border-block-end: var(--border-block-end-width)
        var(--border-block-end-style) var(--graphical-fg);
    padding-block: var(--gap);
    margin-block: calc(var(--gap) * 3 / 2);
    &.bg {
        padding-inline: var(--gap);
    }
    & h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: 1em;
        text-transform: none;
        letter-spacing: normal;
    }
    &:is(.big, .\<big\>) {
        background: none;
        border: none;
        border-inline-start: var(--border-inline-start-width)
            var(--border-inline-start-style) var(--muted-fg);
        border-radius: 0;
        padding: 0;
        padding-inline-start: var(--rhythm, 1rlh);
        font-style: italic;
        color: var(--accent);
    }
}
h1,
h2,
h3,
h4,
h5,
h6,
.\<h1\>,
.\<h2\>,
.\<h3\>,
.\<h4\>,
.\<h5\>,
.\<h6\> {
    font-family: var(--display-font);
    font-size: 1em;
    margin-block: calc(2 * var(--gap)) var(--gap);
    position: relative;
}
h1,
.\<h1\> {
    font-size: 2em;
    text-transform: none;
    line-height: calc(2 * var(--rhythm, 1rlh));
    letter-spacing: 0;
}
h2,
.\<h2\> {
    font-size: 1.6em;
    text-transform: none;
    line-height: calc(1.5 * var(--rhythm, 1rlh));
    letter-spacing: 0;
}
h3,
.\<h3\> {
    font-size: 1.17em;
    line-height: calc(1 * var(--rhythm, 1rlh));
}
h4,
.\<h4\>,
h5,
.\<h5\>,
h6,
.\<h6\> {
    font-size: 1em;
    text-transform: none;
    line-height: calc(1 * var(--rhythm, 1rlh));
    letter-spacing: 0;
    margin-block-start: var(--gap);
}
h1 + h2,
h2 + h3,
h3 + h4,
h4 + h5,
h5 + h6,
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
    margin-block-start: var(--gap);
}
h1:target,
h2:target,
h3:target,
h4:target,
h5:target,
h6:target {
    outline: none;
    &:before {
        content: "";
        display: block;
        position: absolute;
        inset-inline-start: -0.5em;
        inline-size: 4px;
        block-size: 100%;
        background: var(--accent);
    }
}
header {
    font-family: var(--display-font);
    border-block-end: var(--border-block-end-width)
        var(--border-block-end-style) var(--graphical-fg);
}
footer {
    font-family: var(--secondary-font);
    font-size: 0.8em;
    line-height: calc(var(--rhythm, 1rlh) * 2 / 3);
    border-block-start: var(--border-block-start-width)
        var(--border-block-start-style) var(--graphical-fg);
}
body > header,
body > footer,
main + footer {
    --eff-line-length: min(
        calc(var(--full-width) - (2 * var(--rhythm, 1rlh))),
        var(--line-length)
    );
    padding-block: var(--rhythm, 1rlh);
    padding-inline: calc((var(--full-width) - var(--eff-line-length)) / 2);
}
address {
    --density: 0;
}
p {
    margin-block: var(--gap);
}
hr {
    color: inherit;
    margin-inline: 0;
    margin-block: var(--gap);
    flex: 0 1 0px;
    border-inline-start: var(--border-inline-start-width)
        var(--border-inline-start-style) var(--accent);
    block-size: auto;
    border-block-start: var(--border-block-start-width)
        var(--border-block-start-style) var(--accent);
    border-block-end: none;
    border-inline-end: none;
}
pre {
    font-family: var(--mono-font);
    font-size: 0.9em;
    line-height: var(--rhythm, 1rlh);
    tab-size: 2;
    margin-block: var(--gap);
    margin-inline: 0;
    overflow-x: auto;
}
blockquote {
    margin-inline: 0 var(--gap);
    padding-inline: var(--gap) 0;
    margin-block: var(--gap);
    font-size: 1.1em;
    line-height: var(--rhythm, 1rlh);
    font-style: italic;
    border-inline-start: var(--border-inline-start-width)
        var(--border-inline-start-style) var(--graphical-fg);
    color: var(--muted-fg);
    & em,
    cite,
    dfn,
    var,
    i,
    address {
        font-style: normal;
    }
    & footer {
        text-align: end;
    }
}
ul,
ol {
    padding-inline-start: var(--rhythm, 1rlh);
    margin-block: var(--gap);
    & & {
        padding-inline-start: var(--gap);
    }
    &[role="list"],
    &[role="listbox"] {
        padding-inline-start: 0;
        list-style: none;
    }
}
dl {
    margin-block: var(--gap);
}
dt {
    font-weight: 700;
    font-family: var(--secondary-font);
}
dd {
    margin-inline-start: var(--rhythm, 1rlh);
}
@supports selector(li::marker) {
    li::marker {
        font-family: var(--secondary-font);
    }
}
figure {
    max-inline-size: 100%;
    margin-inline: 0;
}
figcaption {
    margin-block: var(--gap);
    font-family: var(--secondary-font);
    color: var(--muted-fg);
}
main {
    --eff-line-length: min(
        calc(var(--full-width) - (2 * var(--rhythm, 1rlh))),
        var(--line-length)
    );
    max-inline-size: var(--eff-line-length);
    inline-size: 100%;
    margin-inline: auto;
    &:first-child {
        padding-block-start: var(--gap);
    }
}
a,
.\<a\> {
    color: var(--link-fg, var(--accent));
    border-radius: var(--interactive-border-radius);
    outline-offset: 1px;
    background: none;
    border: none;
    font-size: 1em;
    font-family: inherit;
    text-decoration: 1px dotted underline;
    &:is(button) {
        padding: 0;
    }
    .list-of-links & {
        text-decoration: none;
    }
    &:hover,
    &:focus {
        text-decoration: 2px solid underline;
        cursor: pointer;
        outline: none;
    }
}
small,
.\<small\> {
    font-size: 0.8em;
    line-height: calc(var(--rhythm, 1rlh) * 2 / 3);
}
s {
    color: var(--bad-fg);
}
q {
    font-style: italic;
    & em,
    cite,
    dfn,
    var,
    i,
    address {
        font-style: normal;
    }
}
time {
    font-variant-numeric: tabular-nums;
}
code,
samp,
kbd {
    font-family: var(--mono-font);
    font-style: normal;
}
samp {
    color: var(--ok-fg);
}
kbd kbd {
    display: inline-block;
    padding-block: 0;
    padding-inline: 0.3em;
    font-size: 0.8em;
    line-height: 1.1em;
    background: var(--interactive-bg);
    border: 1px outset var(--bg);
    border-block-end-width: 3px;
    border-radius: var(--interactive-border-radius);
}
sub {
    vertical-align: bottom;
    line-height: 1;
}
sup {
    vertical-align: top;
    line-height: 1;
}
mark {
    background: var(--warn-bg);
    color: var(--warn-fg);
}
ins {
    background: var(--ok-bg);
    color: var(--ok-fg);
}
del {
    background: var(--bad-bg);
    color: var(--bad-fg);
}
img,
video,
audio,
iframe,
object,
embed {
    max-inline-size: 100%;
    inline-size: max-content;
    block-size: auto;
}
:is(object, embed)[type="image/svg+xml"] {
    color-scheme: light;
}
table {
    font-variant-numeric: tabular-nums;
    font: inherit;
}
caption {
    text-align: start;
    font-family: var(--secondary-font);
    font-style: italic;
}
tbody {
    border-block-start: var(--border-block-start-width)
        var(--border-block-start-style) var(--faded-fg);
    border-block-end: var(--border-block-end-width)
        var(--border-block-end-style) var(--faded-fg);
}
td,
th {
    vertical-align: top;
    &:not(:last-child) {
        padding-inline-end: var(--rhythm, 1rlh);
    }
}
th {
    font-family: var(--secondary-font);
    text-align: start;
}
input {
    display: block;
}
label :is(input, select):not([specificity-hack]) {
    display: inline;
    padding-block: 0;
}
:where(
    button,
    input[type="submit"],
    input[type="reset"],
    input[type="button"],
    .\<button\>
):not(.\<a\>) {
    display: inline-flex;
    align-items: center;
    padding-block: 0;
    padding-inline: calc(var(--rhythm, 1rlh) / 4);
    vertical-align: middle;
    box-sizing: border-box;
    font-size: 0.8rem;
    line-height: 1.125em;
    font-family: var(--secondary-font);
    min-block-size: var(--rhythm, 1rlh);
    background: var(--interactive-bg);
    color: var(--fg);
    border: var(--interactive-border-width) var(--interactive-border-style)
        var(--muted-fg);
    box-shadow: var(--shadow);
    border-radius: var(--interactive-border-radius);
    &:is(a) {
        color: var(--fg);
        text-decoration: none;
        justify-content: center;
        align-items: center;
        cursor: default;
        &:hover,
        &:focus {
            text-decoration: none;
        }
    }
    &:is(.plain, .info, .ok, .warn, .bad) {
        --interactive-bg: var(--box-bg);
        --muted-fg: var(--graphical-fg);
        --fg: var(--accent);
    }
    &:hover,
    &:focus-visible {
        filter: brightness(1.1);
        box-shadow: var(--shadow-focus);
    }
    &:active {
        box-shadow: var(--shadow-active);
    }
    &:active:is([aria-pressed], [aria-expanded]) {
        color: var(--accent);
        box-shadow: var(--pressed-shadow-active);
    }
    &:where([aria-pressed="true"], [aria-expanded="true"]) {
        box-shadow: var(--pressed-shadow);
        background: var(--pressed-interactive-bg);
        color: var(--accent);
        &:hover,
        &:focus-visible {
            box-shadow: var(--pressed-shadow-focus);
        }
    }
    &:disabled {
        cursor: not-allowed;
        --fg: var(--muted-fg);
        box-shadow: var(--shadow-disabled);
    }
    &:is(.big, .\<big\>) {
        min-block-size: calc(1.5 * var(--rhythm, 1rlh));
        font-size: 1rem;
        padding-inline: calc(0.5 * var(--rhythm, 1rlh));
        line-height: var(--rhythm, 1rlh);
    }
}
a.\<button\>:not([specificity-hack]) {
    cursor: default;
}
strong
    > :where(
        button,
        input[type="submit"],
        input[type="reset"],
        input[type="button"],
        .\<button\>
    ):not(.\<a\>) {
    background: var(--accent);
    color: var(--box-bg);
    border-color: transparent;
    font-weight: 700;
    &:is(.plain, .info, .ok, .warn, .bad) {
        --fg: var(--box-bg);
    }
    &:active:is([aria-pressed], [aria-expanded]) {
        color: var(--graphical-fg);
        box-shadow: var(--pressed-shadow-active);
    }
    &:where([aria-pressed="true"], [aria-expanded="true"]) {
        box-shadow: var(--pressed-shadow);
        background: var(--pressed-interactive-bg);
        color: var(--graphical-fg);
        border-color: var(--muted-fg);
        &:hover,
        &:focus-visible {
            box-shadow: var(--pressed-shadow-focus);
        }
    }
}
strong:has(
    button,
    input[type="submit"],
    input[type="reset"],
    input[type="button"],
    .\<button\>
) {
    line-height: 1.125em;
}
input::file-selector-button {
    display: inline-flex;
    align-items: center;
    padding-block: 0;
    padding-inline: calc(var(--rhythm, 1rlh) / 4);
    vertical-align: middle;
    box-sizing: border-box;
    font-size: 0.8rem;
    line-height: 1.125em;
    font-family: var(--secondary-font);
    min-block-size: var(--rhythm, 1rlh);
    background: var(--interactive-bg);
    color: var(--fg);
    border: var(--interactive-border-width) var(--interactive-border-style)
        var(--muted-fg);
    box-shadow: var(--shadow);
    border-radius: var(--interactive-border-radius);
}
input:is(.plain, .info, .ok, .warn, .bad)::file-selector-button {
    --interactive-bg: var(--box-bg);
    --muted-fg: var(--graphical-fg);
    --fg: var(--accent);
}
input::file-selector-button:is(:hover, :focus-visible) {
    filter: brightness(1.1);
    box-shadow: var(--shadow-focus);
}
input::file-selector-button:active {
    box-shadow: var(--shadow-active);
}
input:disabled::file-selector-button {
    cursor: not-allowed;
    --fg: var(--muted-fg);
    box-shadow: var(--shadow-disabled);
}
input:is(.big, .\<big\>)::file-selector-button {
    min-block-size: calc(1.5 * var(--rhythm, 1rlh));
    font-size: 1rem;
    padding-inline: calc(0.5 * var(--rhythm, 1rlh));
    line-height: var(--rhythm, 1rlh);
}
strong > input::file-selector-button {
    background: var(--accent);
    color: var(--box-bg);
    border-color: transparent;
    font-weight: 700;
}
strong:has(input::file-selector-button) {
    line-height: 1.125em;
}
strong > input:is(.plain, .info, .ok, .warn, .bad)::file-selector-button {
    --fg: var(--box-bg);
}
input:not([type]),
input[type="text"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="number"],
select,
textarea {
    padding: calc(var(--rhythm, 1rlh) / 4);
    vertical-align: top;
    font-size: 1rem;
    line-height: inherit;
    font-family: var(--main-font);
    background: var(--bg);
    color: var(--fg);
    border: var(--interactive-border-width) var(--interactive-border-style)
        var(--graphical-fg);
    border-radius: var(--interactive-border-radius);
    &:not(input[size], textarea[cols]) {
        inline-size: var(
            --input-inline-size-internal,
            var(--input-inline-size)
        );
    }
    &:focus-visible {
        border-color: var(--accent);
    }
    &::placeholder {
        color: var(--muted-fg);
        opacity: 1;
        text-align: end;
    }
}
input[type="range"] {
    inline-size: 100%;
    padding: calc(var(--gap) / 4);
}
input[type="color"] {
    padding: 0;
    margin: 0;
    block-size: calc(1.5 * var(--rhythm, 1rlh));
    border: none;
    background: none;
}
input[type="file"] {
    padding-block: calc(var(--gap) / 4);
    padding-inline: 0;
    font: inherit;
    line-height: calc(var(--rhythm, 1rlh) / 2);
    &::file-selector-button {
        margin-block: 0.1em 0;
        margin-inline-end: 1ch;
    }
}
select {
    --picker-icon: var(--chevron-down-icon);
    --focus-color: var(--accent);
    --hover-color: color-mix(currentColor 10%, transparent);
    --checked-color: color-mix(var(--graphical-fg) 50%, var(--box-bg));
    --active-color: color-mix(var(--graphical-fg) 75%, var(--box-bg));
    --padding: calc(var(--rhythm, 1rlh) / 4);
    --indented: 1em;
    &[multiple],
    &[size]:not([size="1"]) {
        padding: unset;
    }
    @supports (appearance: base-select) {
        appearance: base-select;
        field-sizing: fixed;
        display: inline-flex !important;
        &::picker(select) {
            appearance: base-select;
            color: inherit;
            background: inherit;
            border: inherit;
            border-radius: inherit;
            scrollbar-width: inherit;
        }
        &::picker-icon {
            background-color: var(--accent);
            opacity: 0.7;
            mask-size: contain;
            mask-position: center;
            mask-repeat: no-repeat;
            mask-image: var(--picker-icon);
        }
        > button:first-child {
            all: unset;
            display: contents;
            interactivity: inert;
            white-space: normal;
        }
        > optgroup > legend {
            all: unset;
            display: block;
            unicode-bidi: isolate;
            padding-inline: var(--padding);
        }
        &[multiple][size="1"] {
            padding: var(--padding);
        }
    }
    @supports selector(option::checkmark) {
        & option::checkmark {
            content: "";
            visibility: hidden;
            block-size: 1em;
            aspect-ratio: 1 / 1;
            background-color: var(--accent);
            mask-size: contain;
            mask-position: center;
            mask-repeat: no-repeat;
            opacity: 0.7;
        }
        &:not([multiple], .checks, .checkboxes) {
            & option::checkmark {
                display: none;
            }
        }
        &:is([multiple], .checks, .checkboxes) {
            & option:checked::checkmark {
                visibility: visible;
                mask-image: var(--check-icon);
            }
            > optgroup > option {
                padding-inline-start: var(--padding);
            }
        }
        &.checkboxes {
            & option:not(:checked)::checkmark {
                visibility: visible;
                mask-image: var(--square-icon);
            }
            & option:checked::checkmark {
                visibility: visible;
                mask-image: var(--square-check-icon);
            }
        }
        &.flip {
            & option::checkmark {
                order: 1;
                margin-inline-start: auto;
            }
            > optgroup > option {
                padding-inline-start: var(--indented);
            }
        }
    }
    > optgroup {
        color: var(--muted-fg);
        font-style: normal;
        font-weight: bolder;
        &:disabled {
            cursor: not-allowed;
            filter: grayscale(1);
            opacity: 0.7;
        }
        > option {
            padding-inline: var(--indented) var(--padding);
        }
    }
    & option {
        color: var(--fg);
        font-weight: 400;
        padding-inline: var(--padding);
        &:focus-visible {
            outline: 2px dotted var(--focus-color);
        }
        &:enabled:hover {
            background-color: var(--hover-color);
        }
        &:enabled:checked {
            background-color: var(--checked-color);
        }
        &:enabled:checked:hover,
        &:enabled:active {
            background-color: var(--active-color);
        }
        :not(optgroup:disabled &):disabled {
            cursor: not-allowed;
            filter: grayscale(1);
            opacity: 0.7;
        }
    }
    &:focus option:checked {
        background: linear-gradient(
            0deg,
            var(--focus-color) 0%,
            var(--focus-color) 100%
        );
        color: var(--bg);
        @supports (appearance: base-select) {
            &::checkmark {
                background-color: var(--bg);
            }
        }
    }
    @supports not (appearance: base-select) {
        &:focus option:checked {
            color: var(--fg);
        }
        > optgroup:before {
            padding-inline: var(--padding);
        }
    }
}
meter,
progress {
    --border-width: var(--interactive-border-width);
    --border-style: var(--interactive-border-style);
    --border-radius: var(--tab-border-radius);
    @supports (
        selector(::-moz-meter-bar) or selector(::-webkit-meter-bar) or
            selector(::-moz-progress-bar) or selector(::-webkit-progress-bar)
    ) {
        appearance: none;
        box-sizing: border-box;
        display: inline-block;
        position: relative;
        background: var(--box-bg);
        border: var(--border-width) var(--border-style) var(--graphical-fg);
        border-radius: var(--border-radius);
        overflow: clip;
        block-size: 1em;
        inline-size: unset;
        min-inline-size: 5em;
        vertical-align: -0.2em;
        transition: all 0.1s ease-in-out;
    }
}
meter {
    @supports selector(::-webkit-meter-bar) {
        &::-webkit-meter-inner-element {
            grid-template-rows: unset;
        }
        &::-webkit-meter-bar {
            background: var(--box-bg);
            border-radius: 0;
        }
        &::-webkit-meter-even-less-good-value,
        &::-webkit-meter-suboptimum-value,
        &::-webkit-meter-optimum-value {
            background: var(--accent);
            border-radius: 0;
        }
        background: var(--plain-bg);
        border-color: var(--interactive-bg);
        &::-webkit-meter-optimum-value {
            --accent: var(--ok-fg);
        }
        &::-webkit-meter-suboptimum-value {
            --accent: var(--warn-fg);
        }
        &::-webkit-meter-even-less-good-value {
            --accent: var(--bad-fg);
        }
    }
    @supports selector(::-moz-meter-bar) {
        background: var(--box-bg);
        border-color: var(--graphical-fg);
        &::-moz-meter-bar {
            background: var(--accent);
            border-radius: 0;
        }
        &:-moz-meter-optimum {
            --box-bg: var(--ok-bg);
            --accent: var(--ok-fg);
            --graphical-fg: var(--ok-graphical-fg);
        }
        &:-moz-meter-sub-optimum {
            --box-bg: var(--warn-bg);
            --accent: var(--warn-fg);
            --graphical-fg: var(--warn-graphical-fg);
        }
        &:-moz-meter-sub-sub-optimum {
            --box-bg: var(--bad-bg);
            --accent: var(--bad-fg);
            --graphical-fg: var(--bad-graphical-fg);
        }
    }
}
progress {
    @supports selector(::-moz-progress-bar) {
        &::-moz-progress-bar {
            background: var(--accent);
            border-radius: 0;
            transition: all 0.1s ease-in-out;
        }
    }
    @supports selector(::-webkit-progress-bar) {
        &::-webkit-progress-bar {
            background: var(--box-bg);
            border-radius: 0;
        }
        &::-webkit-progress-value {
            background: var(--accent);
            border-radius: 0;
        }
    }
    &:not([value]) {
        --track-animation: progress-indeterminate 4s infinite ease-in-out;
        --track-size: 225% 100%;
        --track-animation-direction: to right;
        --track-bg-position-start: right;
        --track-bg-position-end: left;
        &.vertical {
            --track-size: 100% 225%;
            --track-animation-direction: to bottom;
            --track-bg-position-start: bottom;
            --track-bg-position-end: top;
        }
        --track-bg-color: linear-gradient(
            var(--track-animation-direction),
            var(--box-bg) 45%,
            var(--accent) 0%,
            var(--accent) 55%,
            var(--box-bg) 0%
        );
        @media (prefers-reduced-motion) {
            --track-bg-position-start: center;
            --track-bg-position-end: center;
            --track-animation: none;
        }
        @supports selector(progress::after) {
            &:after {
                content: "";
                inset: 0;
                position: absolute;
                background: var(--track-bg-color);
                background-size: var(--track-size);
                background-position: var(--track-bg-position-start);
                animation: var(--track-animation);
            }
        }
        @supports selector(::-webkit-progress-bar) {
            &::-webkit-progress-bar {
                background: var(--track-bg-color);
                background-size: var(--track-size);
                background-position: var(--track-bg-position-start);
                animation: var(--track-animation);
            }
        }
        @supports selector(::-moz-progress-bar) {
            &::-moz-progress-bar {
                background: var(--track-bg-color);
                background-size: var(--track-size);
                background-position: var(--track-bg-position-start);
                animation: var(--track-animation);
            }
        }
    }
}
@keyframes progress-indeterminate {
    50% {
        background-position: var(--track-bg-end);
    }
}
label[for] {
    display: block;
    padding-block: calc(var(--gap) / 4);
}
fieldset {
    position: relative;
    padding: var(--gap);
    margin-block: var(--gap);
    margin-inline: 0;
    inline-size: 100%;
    border-radius: var(--border-radius);
    > legend + * {
        margin-block-start: 0;
    }
    border-block-start: var(--border-block-start-width)
        var(--border-block-start-style) var(--graphical-fg);
    border-block-end: var(--border-block-end-width)
        var(--border-block-end-style) var(--graphical-fg);
    border-inline-start: var(--border-inline-start-width)
        var(--border-inline-start-style) var(--graphical-fg);
    border-inline-end: var(--border-inline-end-width)
        var(--border-inline-end-style) var(--graphical-fg);
}
details:not(specificity-hack) {
    padding-block-start: 0;
    &:not([open]) {
        padding-block-end: 0;
    }
}
summary {
    margin-inline: calc(0px - var(--gap));
    margin-block: calc(0px - var(--gap)) 0;
    padding-inline: var(--gap);
    font-family: var(--secondary-font);
    font-weight: 700;
    cursor: pointer;
    &:focus-visible,
    &:active {
        filter: brightness(0.8);
        outline: none;
    }
}
@supports selector(::details-content) {
    details:target::details-content {
        content-visibility: visible;
    }
}
dialog {
    inset-inline: 0;
    block-size: fit-content;
    inline-size: fit-content;
    margin: auto !important;
    background-color: var(--bg);
    color: var(--fg);
    border-color: var(--fg);
}
dialog:is([open], [popover])::backdrop {
    display: block;
    background: #000;
    opacity: 0.4;
    animation: bg 2s;
}
@keyframes bg {
    0% {
        background: transparent;
    }
}
dialog:not([popover], [open]),
[popover]:not(:popover-open) {
    display: none;
}
.box,
[role="menu"],
.sidebar-layout > header,
[role="tabpanel"],
figure,
details,
:where(dialog) {
    margin-block: var(--gap);
    margin-inline: 0;
    padding: var(--gap);
    overflow: clip;
    border-radius: var(--border-radius);
    background: var(--box-bg);
    border-block-start: var(--border-block-start-width)
        var(--border-block-start-style) var(--graphical-fg);
    border-block-end: var(--border-block-end-width)
        var(--border-block-end-style) var(--graphical-fg);
    border-inline-start: var(--border-inline-start-width)
        var(--border-inline-start-style) var(--graphical-fg);
    border-inline-end: var(--border-inline-end-width)
        var(--border-inline-end-style) var(--graphical-fg);
    scrollbar-color: var(--accent) transparent;
}
.titlebar {
    display: block;
    margin-inline: calc(0px - var(--gap));
    margin-block-end: var(--gap);
    padding-inline: var(--gap);
    font: inherit;
    font-family: var(--secondary-font);
    font-weight: 700;
    background: var(--graphical-fg);
    color: var(--bg);
    text-shadow: 0 0.1em 0.2em var(--fg);
    overflow-y: clip;
    & a {
        color: var(--bg);
    }
}
:is(.box, dialog):has(> .titlebar) {
    padding-block-start: 0;
}
.sub-title,
sub-title {
    display: block;
    font-weight: 400;
    color: var(--muted-fg);
}
.tool-bar,
[role="toolbar"] {
    display: flex;
    flex-flow: row wrap;
    gap: calc(var(--gap) / 2);
    > * {
        margin: 0;
    }
}
.sidebar-layout {
    --border: var(--border-inline-end-width) var(--border-inline-end-style)
        var(--graphical-fg);
    & header {
        border-inline: none;
        border-block: none;
        border-block-end: var(--border);
        border-radius: 0;
        & li {
            margin-block: calc(0.5 * var(--gap));
        }
        & a {
            font-weight: 700;
        }
    }
    .writing-mode\:vertical-lr &,
    .writing-mode\:vertical-rl & {
        display: grid;
        grid-template-columns: var(--sidebar-width) auto;
        inset: 0;
        > header {
            border-block-end: none;
            border-inline-end: var(--border);
            margin: 0;
        }
        > :nth-child(2) {
            overflow: auto;
            scrollbar-width: auto;
            --full-width: calc(100vi - var(--sidebar-width));
            --eff-line-length: min(
                calc(var(--full-width) - (2 * var(--rhythm, 1rlh))),
                var(--line-length)
            );
            padding-block-start: var(--gap);
        }
    }
    @media (min-width: 75ch) {
        display: grid;
        grid-template-columns: var(--sidebar-width) auto;
        inset: 0;
        > header {
            border-block-end: none;
            border-inline-end: var(--border);
            margin: 0;
        }
        > :nth-child(2) {
            overflow: auto;
            scrollbar-width: auto;
            --full-width: calc(100vi - var(--sidebar-width));
            --eff-line-length: min(
                calc(var(--full-width) - (2 * var(--rhythm, 1rlh))),
                var(--line-length)
            );
            padding-block-start: var(--gap);
        }
    }
}
.breadcrumbs[aria-label] {
    font-family: var(--secondary-font);
    &:has([aria-current="page"]) {
        --separator: var(--breadcrumb-page);
    }
    &:has([aria-current="step"]) {
        --separator: var(--breadcrumb-step);
    }
    & ul,
    ol {
        padding-inline-start: 0;
    }
    :is(ul, ol):not([type]) {
        list-style-type: "";
    }
    & li {
        display: inline list-item;
        &:not(:last-child):after {
            content: var(--separator, var(--breadcrumb-page)) / "";
            display: inline;
        }
    }
    [aria-current="page"],
    [aria-current="step"] {
        font-weight: 700;
    }
}
.chip,
chip {
    font-family: var(--secondary-font);
    border: var(--chip-border-width) var(--chip-border-style) var(--accent);
    background: var(--box-bg);
    border-radius: calc(var(--rhythm, 1rlh) / 2);
    padding-inline: calc(var(--rhythm, 1rlh) / 2);
}
.navbar {
    padding: var(--rhythm, 1rlh);
    font-family: var(--secondary-font);
    background: var(--box-bg);
    border-block-end: var(--border-block-end-width)
        var(--border-block-end-style) var(--accent);
    overflow-x: auto;
    z-index: 5;
    position: sticky;
    inset-block-start: 0;
    inset-inline: 0;
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: var(--gap);
    &.expanded {
        flex-flow: column;
        align-items: start;
        max-block-size: 90svb;
        overflow-y: auto;
        & ul[role="list"] {
            flex-flow: column;
        }
    }
    & * {
        flex-shrink: 0;
        margin-block: 0;
    }
    &:not(.expanded) {
        > :first-child,
        nav > :first-child {
            margin-inline-start: auto;
        }
        > :last-child,
        nav > :last-child {
            margin-inline-end: auto;
        }
    }
    & hr {
        align-self: stretch;
    }
    & nav ul[role="list"] {
        display: flex;
        flex-flow: row;
        gap: var(--rhythm, 1rlh);
        padding-inline-start: 0;
        & * {
            flex-shrink: 0;
        }
    }
    :is(a:not(.\<button\>, .chip), .\<a\>) {
        font-weight: 700;
        text-decoration: none;
        padding-inline: 0.2em;
        &:hover,
        &:focus {
            text-decoration: underline;
        }
    }
    [aria-current="page"] {
        position: relative;
    }
    [aria-current="page"]:after {
        content: "";
        display: block;
        position: absolute;
        background: currentcolor;
        block-size: 6px;
        inline-size: 100%;
        inset-block-end: calc(-1 * var(--gap));
        inset-inline: 0;
    }
    &.expanded [aria-current="page"]:after {
        block-size: 100%;
        inline-size: 6px;
        inset-inline-start: calc(-1 * var(--gap));
        inset-block: 0;
    }
}
.permalink-anchor {
    display: none;
    *:hover > & {
        display: initial;
    }
}
.iconbutton {
    border: none;
    background: none;
    color: currentcolor;
    padding: 0;
    box-shadow: none;
    line-height: var(--rhythm, 1rlh);
    font-size: var(--wcag-target-size-aa);
    inline-size: var(--wcag-target-size-aa);
    block-size: var(--wcag-target-size-aa);
    text-align: center;
    border-radius: 50%;
    transition: font-weight 0.2s ease-in-out;
    &:hover,
    &:focus-visible {
        box-shadow: none;
        outline: var(--interactive-border-width) var(--interactive-border-style)
            var(--accent);
        outline-offset: 6px;
    }
    &:active {
        box-shadow: none;
        outline-offset: 3px;
        background: none;
    }
    &[aria-pressed="true"] {
        box-shadow: none;
        transform: none;
    }
    &:is(.plain, .info, .ok, .warn, .bad) {
        color: var(--accent);
    }
    &:is(.big, .\<big\>) {
        font-size: var(--wcag-target-size-aaa);
        inline-size: var(--wcag-target-size-aaa);
        block-size: var(--wcag-target-size-aaa);
        padding-inline: 0;
    }
}
small[role="note"],
aside[role="note"] {
    --sidenote-width: 20ch;
    --gutter-width: calc((var(--full-width) - var(--eff-line-length)) / 2);
    --margin-inline: min(
        0px,
        calc(
            0px -
                min(
                    var(--gutter-width) - var(--rhythm, 1rlh),
                    var(--sidenote-width) + var(--rhythm, 1rlh)
                ) +
                var(--rhythm, 1rlh) - 1ch
        )
    );
    --density: 0.5;
    display: block;
    max-inline-size: var(--sidenote-width);
    padding-block: 1ch;
    padding-inline: 1.5ch 1ch;
    font-family: var(--secondary-font);
    background: var(--bg);
    border-block-start: var(--border-block-start-width)
        var(--border-block-start-style) transparent;
    border-block-end: var(--border-block-end-width)
        var(--border-block-end-style) transparent;
    border-inline-start: var(--border-inline-start-width)
        var(--border-inline-start-style) transparent;
    border-inline-end: var(--border-inline-end-width)
        var(--border-inline-end-style) transparent;
    float: inline-end;
    clear: inline-end;
    margin-inline: 1ch var(--margin-inline);
    text-align: start;
    &.flip {
        float: inline-start;
        clear: inline-start;
        margin-inline: var(--margin-inline) 1ch;
        text-align: end;
    }
    & p:first-child {
        margin-block-start: 0;
    }
    & p:last-child {
        margin-block-end: 0;
    }
    &:hover,
    &:focus-within {
        border-color: var(--graphical-fg);
        border-radius: var(--border-radius);
        background: var(--box-bg);
    }
}
[role="tablist"] {
    display: flex;
    gap: 0.5ch;
}
[role="tab"]:not([specificity-hack]) {
    margin: 0;
    position: relative;
    inset-block-end: calc(-1 * var(--border-block-start-width));
    border: var(--border-block-start-width) var(--border-block-start-style)
        var(--graphical-fg);
    border-start-start-radius: var(--tab-border-radius);
    border-start-end-radius: var(--tab-border-radius);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    &:is(button) {
        font-size: 1em;
        line-height: var(--rhythm, 1.4rem);
        box-shadow: none;
        &:is(:hover, :focus-visible, :active, :disabled) {
            filter: none;
            box-shadow: none;
        }
    }
    &:active,
    &[aria-selected="true"] {
        background: var(--box-bg);
        border-block-end: var(--border-block-start-width)
            var(--border-block-start-style) transparent;
    }
    &:hover {
        background-color: var(--box-bg);
    }
    &:focus-visible {
        color: var(--accent);
        text-decoration: underline;
    }
}
[role="tabpanel"] {
    margin-block-start: 0;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    z-index: 1;
}
[role="menu"] {
    position: absolute;
    z-index: 10;
    padding-block: calc(var(--gap) / 2);
    padding-inline: 0;
    margin-block: 1px 0;
    margin-inline: 0;
    display: flex;
    flex-flow: column nowrap;
}
[role="menuitem"] {
    padding-block: 0;
    padding-inline: calc(var(--gap) / 2);
    display: block;
    text-decoration: none;
    border-radius: 0;
    color: var(--fg);
    &:focus,
    &:active {
        background: var(--accent);
        color: var(--bg);
    }
}
[role="listbox"] {
    list-style: none;
    [role="option"] {
        margin-inline: calc(-1 * var(--gap));
        padding-inline: var(--gap);
        border-radius: 0;
    }
    [role="option"][aria-selected="true"] {
        background: var(--interactive-bg);
    }
    [role="option"].active {
        --temporary-bg: var(--accent);
        --temporary-fg: var(--bg);
        --temporary-accent: var(--muted-accent);
        --temporary-muted-accent: var(--box-bg);
        background: var(--temporary-bg);
        color: var(--temporary-fg);
        > * {
            --bg: var(--temporary-bg);
            --fg: var(--temporary-fg);
            --accent: var(--temporary-accent);
            --muted-accent: var(--temporary-muted-accent);
        }
    }
}
[aria-orientation="vertical"] {
    flex-direction: column;
    inline-size: fit-content;
    text-align: center;
}
input[type="checkbox"][role="switch"] {
    --toggle-track-border-color: var(--graphical-fg);
    --toggle-track-background: var(--bg);
    --toggle-nub-margin: 2px;
    --toggle-nub-background: var(--graphical-fg);
    &:dir(ltr) {
        --dir: 1;
    }
    &:dir(rtl) {
        --dir: -1;
    }
    --toggle-translate-end: translateX(
        calc(var(--dir) * (100% + 2 * var(--toggle-nub-margin)))
    );
    --toggle-translate-mid: translateX(
        calc(var(--dir) * (50% + var(--toggle-nub-margin)))
    );
    &.vertical {
        --toggle-translate-end: translateY(
            calc(100% + 2 * var(--toggle-nub-margin))
        );
        --toggle-translate-mid: translateY(
            calc(50% + var(--toggle-nub-margin))
        );
    }
    all: unset;
    appearance: none;
    display: inline-grid;
    vertical-align: middle;
    grid-template-columns: repeat(2, 1rem);
    aspect-ratio: 2 / 1;
    block-size: 1em;
    margin-block: auto;
    isolation: isolate;
    &:before,
    &:after {
        content: "";
        display: inline-block;
        transition:
            transform 0.2s ease-in-out,
            translate 0.2s ease-in-out,
            background-color 0.2s ease-in-out;
    }
    &:before {
        grid-column: 1 / span 2;
        grid-row: 1;
        border: var(--interactive-border-width) var(--interactive-border-style)
            var(--toggle-track-border-color);
        background: var(--toggle-track-background);
        border-radius: 9999rem;
    }
    &:after {
        grid-column: 1;
        grid-row: 1;
        margin: var(--toggle-nub-margin);
        border-radius: 99999rem;
        background: var(--toggle-nub-background);
        z-index: 2;
    }
    &:checked {
        --toggle-track-border-color: var(--accent);
        --toggle-track-background: var(--accent);
        --toggle-nub-background: var(--bg);
        &:after {
            transform: var(--toggle-translate-end);
        }
    }
    &:indeterminate {
        --toggle-track-border-color: var(--interactive-bg);
        --toggle-nub-background: var(--interactive-bg);
        &:after {
            transform: var(--toggle-translate-mid);
        }
    }
    &:focus-visible {
        --toggle-track-border-color: var(--bg);
        &:before {
            outline: 0.2em solid var(--accent);
        }
    }
    &:is(label > *):not(#specificity-hack) {
        margin-block-end: auto;
    }
    &:not(label > *) {
        padding-block: calc(var(--gap) / 4 + (var(--rhythm, 1rlh) - 1em) / 2);
    }
    label:has(> &) {
        display: flex;
        gap: var(--gap);
        flex-direction: row;
    }
    label:has(+ &) {
        inline-size: 100%;
    }
}
.plain {
    --box-bg: var(--plain-bg);
    --accent: var(--plain-fg);
    --graphical-fg: var(--plain-graphical-fg);
}
.info {
    --box-bg: var(--info-bg);
    --accent: var(--info-fg);
    --graphical-fg: var(--info-graphical-fg);
}
.ok {
    --box-bg: var(--ok-bg);
    --accent: var(--ok-fg);
    --muted-accent: light-dark(var(--green-7), var(--green-5));
    --graphical-fg: var(--ok-graphical-fg);
}
.warn {
    --box-bg: var(--warn-bg);
    --accent: var(--warn-fg);
    --muted-accent: light-dark(var(--yellow-7), var(--yellow-5));
    --graphical-fg: var(--warn-graphical-fg);
}
.bad {
    --box-bg: var(--bad-bg);
    --accent: var(--bad-fg);
    --muted-accent: light-dark(var(--red-7), var(--red-5));
    --graphical-fg: var(--bad-graphical-fg);
}
.color {
    color: var(--accent);
}
.bg {
    background: var(--box-bg);
}
.border\:none {
    border: none;
}
.border {
    border-block-start: var(--border-block-start-width)
        var(--border-block-start-style) var(--graphical-fg);
    border-block-end: var(--border-block-end-width)
        var(--border-block-end-style) var(--graphical-fg);
    border-inline-start: var(--border-inline-start-width)
        var(--border-inline-start-style) var(--graphical-fg);
    border-inline-end: var(--border-inline-end-width)
        var(--border-inline-end-style) var(--graphical-fg);
}
.border-block\:none {
    border-block: none;
}
.border-block {
    border-block-start: var(--border-block-start-width)
        var(--border-block-start-style) var(--graphical-fg);
    border-block-end: var(--border-block-end-width)
        var(--border-block-end-style) var(--graphical-fg);
}
.border-block-start\:none {
    border-block-start: none;
}
.border-block-start {
    border-block-start: var(--border-block-start-width)
        var(--border-block-start-style) var(--graphical-fg);
}
.border-block-end\:none {
    border-block-end: none;
}
.border-block-end {
    border-block-end: var(--border-block-end-width)
        var(--border-block-end-style) var(--graphical-fg);
}
.border-inline\:none {
    border-inline: none;
}
.border-inline {
    border-inline-start: var(--border-inline-start-width)
        var(--border-inline-start-style) var(--graphical-fg);
    border-inline-end: var(--border-inline-end-width)
        var(--border-inline-end-style) var(--graphical-fg);
}
.border-inline-start\:none {
    border-inline-start: none;
}
.border-inline-start {
    border-inline-start: var(--border-inline-start-width)
        var(--border-inline-start-style) var(--graphical-fg);
}
.border-inline-end\:none {
    border-inline-end: none;
}
.border-inline-end {
    border-inline-end: var(--border-inline-end-width)
        var(--border-inline-end-style) var(--graphical-fg);
}
:root {
    --fg: light-dark(var(--gray-12), var(--gray-0));
    --muted-fg: light-dark(var(--gray-10), var(--gray-2));
    --faded-fg: light-dark(var(--gray-6), var(--gray-7));
    --graphical-fg: var(--plain-graphical-fg);
    --plain-fg: light-dark(var(--blue-10), var(--blue-2));
    --info-fg: light-dark(var(--blue-11), var(--blue-2));
    --ok-fg: light-dark(var(--green-11), var(--green-2));
    --bad-fg: light-dark(var(--red-11), var(--red-2));
    --warn-fg: light-dark(var(--yellow-11), var(--yellow-2));
    --plain-graphical-fg: light-dark(var(--gray-6), var(--gray-6));
    --info-graphical-fg: light-dark(var(--blue-6), var(--blue-6));
    --ok-graphical-fg: light-dark(var(--green-6), var(--green-6));
    --bad-graphical-fg: light-dark(var(--red-6), var(--red-6));
    --warn-graphical-fg: light-dark(var(--yellow-6), var(--yellow-6));
    --bg: light-dark(var(--gray-0), var(--gray-12));
    --box-bg: var(--plain-bg);
    --interactive-bg: light-dark(var(--gray-4), var(--gray-8));
    --pressed-interactive-bg: var(--bg);
    --plain-bg: light-dark(var(--gray-1), var(--gray-11));
    --info-bg: light-dark(var(--blue-1), var(--blue-12));
    --ok-bg: light-dark(var(--green-1), var(--green-12));
    --bad-bg: light-dark(var(--red-1), var(--red-12));
    --warn-bg: light-dark(var(--yellow-1), var(--yellow-12));
    --accent: light-dark(var(--blue-10), var(--blue-2));
    --muted-accent: light-dark(var(--blue-7), var(--blue-5));
    --rhythm: 1.4rem;
    --line-length: 40rem;
    --input-inline-size: 20ch;
    --border-width: 1px;
    --border-block-start-width: var(--border-width);
    --border-block-end-width: var(--border-width);
    --border-inline-start-width: var(--border-width);
    --border-inline-end-width: var(--border-width);
    --border-style: solid;
    --border-block-start-style: var(--border-style);
    --border-block-end-style: var(--border-style);
    --border-inline-start-style: var(--border-style);
    --border-inline-end-style: var(--border-style);
    --border-radius: 0.2rem;
    --interactive-border-width: var(--border-width);
    --interactive-border-style: var(--border-style);
    --interactive-border-radius: 0.2rem;
    --chip-border-width: var(--border-width);
    --chip-border-style: var(--border-style);
    --tab-border-radius: 0.4em;
    --shadow: 0 2px 4px -2px var(--fg);
    --shadow-focus: 0 3px 6px -2px var(--fg);
    --shadow-active: none;
    --shadow-disabled: none;
    --pressed-shadow: 0 2px 4px -1px var(--fg) inset;
    --pressed-shadow-focus: 1 1px 3px -1px var(--fg) inset;
    --pressed-shadow-active: 0 1px 5px -1px var(--fg) inset;
    --main-font:
        "Source Sans 3", "Source Sans Pro", -apple-system, system-ui, sans-serif;
    --secondary-font: var(--main-font);
    --display-font: var(--secondary-font);
    --mono-font: "M Plus Code Latin", monospace, monospace;
    --breadcrumb-page: " / ";
    --breadcrumb-step: " \203a  ";
    --density: 1;
    --full-width: 100vi;
    --sidebar-width: 25ch;
    --wcag-target-size-aa: 24px;
    --wcag-target-size-aaa: 44px;
    --chevron-down-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
    --check-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');
    --square-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/></svg>');
    --square-check-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="m9 12 2 2 4-4"/></svg>');
}
:root:not(:has(meta[name="color-scheme"])) {
    &.-dark-theme {
        color-scheme: dark;
    }
    &.-no-dark-theme {
        color-scheme: light;
    }
    &:not(.-dark-theme, .-no-dark-theme) {
        color-scheme: light dark;
    }
}
* {
    --gap: calc(var(--rhythm, 1rlh) * var(--density));
}
.textcolumns {
    --col-width: 30ch;
    column-width: var(--col-width);
    column-gap: var(--gap);
    margin-block: var(--gap);
    :first-child {
        margin-block-start: 0 !important;
    }
    &:is(dl) {
        @supports (break-after: avoid-column) {
            & dt {
                break-after: avoid-column;
                break-inside: avoid-column;
                orphans: 2;
                widows: 2;
            }
            & dd {
                break-before: avoid-column;
                break-inside: avoid-column;
                orphans: 2;
                widows: 2;
            }
        }
        > div:has(dt):has(dd) {
            break-inside: avoid-column;
        }
    }
}
.text-align\:center {
    text-align: center;
}
.center {
    display: grid;
    place-items: center;
}
.align-content\:center {
    align-content: center;
}
.align-content\:end {
    align-content: end;
}
.big,
.\<big\> {
    font-size: 1.4em;
    line-height: calc(1.5 * var(--rhythm, 1rlh));
}
.container {
    --eff-line-length: min(
        calc(var(--full-width) - (2 * var(--rhythm, 1rlh))),
        var(--line-length)
    );
    max-inline-size: var(--eff-line-length);
    margin-inline: auto;
}
.fullbleed,
.fullscreen {
    --gutter-width: calc((var(--full-width) - var(--eff-line-length)) / 2);
    position: relative;
    max-inline-size: none;
    inline-size: var(--full-width);
    margin-inline-start: calc(0px - var(--gutter-width));
    border-radius: 0;
    border-inline: none;
}
.fullscreen {
    max-block-size: none;
    block-size: 100dvb;
}
.width\:100\% {
    width: 100%;
    max-width: 100%;
}
.height\:100\% {
    height: 100%;
    max-height: 100%;
}
.inline-size\:100\% {
    inline-size: 100%;
    max-inline-size: 100%;
}
.block-size\:100\% {
    block-size: 100%;
    max-block-size: 100%;
}
:is(
    body,
    .box,
    [role="menu"],
    .sidebar-layout > header,
    [role="tabpanel"],
    figure,
    details,
    dialog,
    aside,
    fieldset,
    dd,
    td,
    th
) {
    > :first-child:first-child:first-child:first-child,
    > :first-child > :first-child:first-child:first-child,
    > :first-child > :first-child > :first-child:first-child,
    > :first-child > :first-child > :first-child > :first-child {
        margin-block-start: 0;
    }
    > :last-child:last-child:last-child:last-child,
    > :last-child > :last-child:last-child:last-child,
    > :last-child > :last-child > :last-child:last-child,
    > :last-child > :last-child > :last-child > :last-child {
        margin-block-end: 0;
    }
}
.padding\:0 {
    padding: 0;
}
.padding {
    padding: var(--gap);
}
.padding-block\:0 {
    padding-block: 0;
}
.padding-block {
    padding-block: var(--gap);
}
.padding-block-start\:0 {
    padding-block-start: 0;
}
.padding-block-start {
    padding-block-start: var(--gap);
}
.padding-block-end\:0 {
    padding-block-end: 0;
}
.padding-block-end {
    padding-block-end: var(--gap);
}
.padding-inline\:0 {
    padding-inline: 0;
}
.padding-inline {
    padding-inline: var(--gap);
}
.padding-inline-start\:0 {
    padding-inline-start: 0;
}
.padding-inline-start {
    padding-inline-start: var(--gap);
}
.padding-inline-end\:0 {
    padding-inline-end: 0;
}
.padding-inline-end {
    padding-inline-end: var(--gap);
}
.padding-start\:0 {
    padding-block-start: 0;
    padding-inline-start: 0;
}
.padding-start {
    padding-block-start: var(--gap);
    padding-inline-start: var(--gap);
}
.padding-end\:0 {
    padding-block-end: 0;
    padding-inline-end: 0;
}
.padding-end {
    padding-block-end: var(--gap);
    padding-inline-end: var(--gap);
}
.margin\:0:not([specificity-hack]) {
    margin: 0;
}
.margin:not([specificity-hack]) {
    margin: var(--gap);
}
.margin-block\:0:not([specificity-hack]) {
    margin-block: 0;
}
.margin-block:not([specificity-hack]) {
    margin-block: var(--gap);
}
.margin-block\:auto:not([specificity-hack]) {
    margin-block: auto;
}
.margin-block-start\:0:not([specificity-hack]) {
    margin-block-start: 0;
}
.margin-block-start:not([specificity-hack]) {
    margin-block-start: var(--gap);
}
.margin-block-start\:auto:not([specificity-hack]) {
    margin-block-start: auto;
}
.margin-block-end\:0:not([specificity-hack]) {
    margin-block-end: 0;
}
.margin-block-end:not([specificity-hack]) {
    margin-block-end: var(--gap);
}
.margin-block-end\:auto:not([specificity-hack]) {
    margin-block-end: auto;
}
.margin-inline\:0:not([specificity-hack]) {
    margin-inline: 0;
}
.margin-inline:not([specificity-hack]) {
    margin-inline: var(--gap);
}
.margin-inline\:auto:not([specificity-hack]) {
    margin-inline: auto;
}
.margin-inline-start\:0:not([specificity-hack]) {
    margin-inline-start: 0;
}
.margin-inline-start:not([specificity-hack]) {
    margin-inline-start: var(--gap);
}
.margin-inline-start\:auto:not([specificity-hack]) {
    margin-inline-start: auto;
}
.margin-inline-end\:0:not([specificity-hack]) {
    margin-inline-end: 0;
}
.margin-inline-end:not([specificity-hack]) {
    margin-inline-end: var(--gap);
}
.margin-inline-end\:auto:not([specificity-hack]) {
    margin-inline-end: auto;
}
.margin-start\:0:not([specificity-hack]) {
    margin-block-start: 0;
    margin-inline-start: 0;
}
.margin-start:not([specificity-hack]) {
    margin-block-start: var(--gap);
    margin-inline-start: var(--gap);
}
.margin-start\:auto:not([specificity-hack]) {
    margin-block-start: auto;
    margin-inline-start: auto;
}
.margin-end\:0:not([specificity-hack]) {
    margin-block-end: 0;
    margin-inline-end: 0;
}
.margin-end:not([specificity-hack]) {
    margin-block-end: var(--gap);
    margin-inline-end: var(--gap);
}
.margin-end\:auto:not([specificity-hack]) {
    margin-block-end: auto;
    margin-inline-end: auto;
}
.flow-gap {
    > :not(:last-child) {
        margin-block-end: var(--gap);
    }
}
.nested-list :where(ul, ol, dl) {
    margin-block: 0;
}
.inline {
    display: inline;
}
.block {
    display: block;
}
.contents {
    display: contents;
}
.table {
    display: table;
    inline-size: 100%;
    margin: 0;
    --input-inline-size-internal: calc(100% - var(--gap));
}
.row,
.rows > * {
    display: table-row;
    &:not(:last-child):not([specificity-hack]) > * {
        margin-block-end: var(--gap);
    }
    > *:not([specificity-hack]) {
        display: table-cell;
        vertical-align: top;
    }
    > * + *:not([specificity-hack]) {
        margin-inline-start: var(--gap);
        display: inline-block;
    }
}
.overflow\:auto {
    overflow: auto;
}
.overflow\:scroll {
    overflow: scroll;
}
.overflow-x\:scroll {
    overflow-x: scroll;
}
.overflow-y\:scroll {
    overflow-y: scroll;
}
.overflow\:clip {
    overflow: clip;
}
.overflow-x\:clip {
    overflow-x: clip;
}
.overflow-y\:clip {
    overflow-y: clip;
}
.fixed {
    position: fixed;
}
.sticky {
    position: sticky;
}
.top {
    top: 0;
}
.right {
    right: 0;
}
.bottom {
    bottom: 0;
}
.left {
    left: 0;
}
.float\:left {
    float: left;
}
.float\:right {
    float: right;
}
.inset-block-start {
    inset-block-start: 0;
}
.inset-block-end {
    inset-block-end: 0;
}
.inset-inline-start {
    inset-inline-start: 0;
}
.inset-inline-end {
    inset-inline-end: 0;
}
.inset-block {
    inset-block: 0;
}
.inset-inline {
    inset-inline: 0;
}
.float\:inline-start {
    float: inline-start;
}
.float\:inline-end {
    float: inline-end;
}
@media print {
    :root {
        --bg: transparent;
        --fg: black;
        color-scheme: light;
    }
    .titlebar,
    role[menuitem] {
        --bg: white;
        text-shadow: none;
    }
    main,
    .container {
        max-inline-size: unset;
        inline-size: auto;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    table,
    tr,
    th,
    td,
    blockquote,
    pre,
    code,
    ol,
    li,
    dt,
    dd,
    .box,
    dialog,
    details,
    summary,
    img,
    figure,
    figcaption,
    video,
    audio,
    object,
    embed,
    fieldset,
    legend,
    input,
    textarea,
    select,
    button,
    header,
    footer,
    nav,
    aside,
    search,
    section {
        break-inside: avoid-page;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        break-after: avoid-page;
    }
    @supports (orphans: 2) {
        p {
            orphans: 2;
            widows: 2;
        }
    }
    a:not([href^="#"]):not(:has(> *)):after {
        content: " (" attr(href) ")";
        font-size: 80%;
    }
    abbr[title]:after {
        content: " (" attr(title) ")";
    }
    @supports selector(::details-content) {
        details::details-content {
            content-visibility: visible;
        }
    }
}
.wide-inputs {
    --input-inline-size-internal: 100%;
}
.narrow-inputs {
    --input-inline-size-internal: var(--input-inline-size);
}
.airy {
    --density: 3;
}
.spacious {
    --density: 2;
}
.dense {
    --density: 1;
}
.crowded {
    --density: 0.5;
}
.packed {
    --density: 0;
}
.airy-inside > * {
    --density: 3;
}
.spacious-inside > * {
    --density: 2;
}
.dense-inside > * {
    --density: 1;
}
.crowded-inside > * {
    --density: 0.5;
}
.packed-inside > * {
    --density: 0;
}
.autodensity {
    --density: 1;
    @media (min-width: 768px) {
        --density: 2;
    }
    @media (min-width: 1024px) {
        --density: 3;
    }
}
.vh,
v-h {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
    white-space: nowrap;
}
.all\:initial {
    all: initial;
}
.bold {
    font-weight: 700;
}
.italic {
    font-style: italic;
    & em,
    cite,
    dfn,
    var,
    i,
    address {
        font-style: normal;
    }
}
.allcaps {
    text-transform: uppercase;
    letter-spacing: 0.1rem;
}
.main-font,
.primary-font {
    font-family: var(--main-font);
}
.secondary-font {
    font-family: var(--secondary-font);
}
.display-font {
    font-family: var(--display-font);
}
.mono-font,
.monospace {
    font-family: var(--mono-font);
}
.massivetext {
    --eff-line-length: min(
        calc(var(--full-width) - (2 * var(--rhythm, 1rlh))),
        var(--line-length)
    );
    font-size: calc(0.13 * var(--eff-line-length));
    line-height: 1em;
    letter-spacing: 0;
}
.background-clip\:text {
    background-size: cover;
    @supports (background-clip: text) {
        background-clip: text;
    }
    color: transparent;
}
.text-stroke {
    --stroke-width: 1px;
    --stroke-color: lch(from currentcolor calc(100 - l) c calc(h + 180));
    -webkit-text-stroke: var(--stroke-width) var(--stroke-color);
}
.aestheticbreak {
    display: block;
    margin: 0;
    padding: 0;
    block-size: calc(0.5 * var(--gap));
}
@media screen {
    .hidden\@screen {
        display: none;
        & * {
            display: none;
        }
    }
}
@media print {
    .annotations\@print\:disabled :is(a:not([href^="#"]), abbr[title]):after {
        display: none;
    }
    .hidden\@print {
        display: none;
        & * {
            display: none;
        }
    }
    .block\@print {
        display: block;
        :is(
                .f-row,
                .flex-row,
                .f-col,
                .flex-column,
                .f-switch,
                .flex-switch,
                .grid
            )
            > * {
            margin: revert;
        }
    }
    hr.page-break {
        break-before: page;
        display: none;
    }
    .break-before\:page {
        break-before: page;
    }
    .break-after\:page {
        break-after: page;
    }
    .break-inside\:avoid-page {
        break-inside: avoid-page;
        & * {
            break-inside: avoid-page;
        }
    }
}
.flex-row,
.f-row {
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    > * {
        margin: 0;
    }
}
.flex-column,
.f-col {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    > * {
        margin: 0;
    }
}
.flex-switch,
.f-switch {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    --f-switch-threshold: 55ch;
    --flex-switch-threshold: var(--f-switch-threshold);
    > * {
        margin: 0;
        flex-grow: 1;
        flex-basis: calc((var(--flex-switch-threshold) - 100%) * 999);
    }
}
.justify-content\:start {
    justify-content: start;
}
.justify-content\:end {
    justify-content: end;
}
.justify-content\:center {
    justify-content: center;
}
.justify-content\:stretch {
    justify-content: stretch;
}
.justify-content\:space-between {
    justify-content: space-between;
}
.justify-content\:space-around {
    justify-content: space-around;
}
.justify-content\:space-evenly {
    justify-content: space-evenly;
}
.align-items\:start {
    align-items: start;
}
.align-items\:end {
    align-items: end;
}
.align-items\:baseline {
    align-items: baseline;
}
.align-items\:center {
    align-items: center;
}
.align-items\:stretch {
    align-items: stretch;
}
.align-self\:start {
    align-self: start;
}
.align-self\:end {
    align-self: end;
}
.align-self\:baseline {
    align-self: baseline;
}
.align-self\:center {
    align-self: center;
}
.align-self\:stretch {
    align-self: stretch;
}
.flex-grow\:0 {
    flex-grow: 0;
}
.flex-grow\:1 {
    flex-grow: 1;
}
.flex-grow\:2 {
    flex-grow: 2;
}
.flex-grow\:3 {
    flex-grow: 3;
}
.flex-grow\:4 {
    flex-grow: 4;
}
.flex-grow\:5 {
    flex-grow: 5;
}
.flex-grow\:6 {
    flex-grow: 6;
}
.flex-grow\:7 {
    flex-grow: 7;
}
.flex-grow\:8 {
    flex-grow: 8;
}
.flex-grow\:9 {
    flex-grow: 9;
}
.flex-grow\:10 {
    flex-grow: 10;
}
.flex-grow\:11 {
    flex-grow: 11;
}
.flex-grow\:12 {
    flex-grow: 12;
}
.flex-wrap\:wrap {
    flex-wrap: wrap;
}
.flex-wrap\:nowrap {
    flex-wrap: nowrap;
}
.flex-wrap\:wrap-reverse {
    flex-wrap: wrap-reverse;
}
.grid {
    display: grid;
    grid-auto-columns: var(--grid-col-width, 1fr);
    grid-auto-rows: var(--grid-row-width, auto);
    gap: var(--gap);
    > * {
        margin: 0;
    }
}
.grid-even-rows {
    --grid-row-width: 1fr;
}
.grid-variable-cols {
    --grid-col-width: auto;
}
[data-cols^="1 "] {
    grid-column-start: 1;
}
[data-cols$=" 1"] {
    grid-column-end: 2;
}
[data-cols="1"] {
    grid-column: 1;
}
[data-cols^="2 "] {
    grid-column-start: 2;
}
[data-cols$=" 2"] {
    grid-column-end: 3;
}
[data-cols="2"] {
    grid-column: 2;
}
[data-cols^="3 "] {
    grid-column-start: 3;
}
[data-cols$=" 3"] {
    grid-column-end: 4;
}
[data-cols="3"] {
    grid-column: 3;
}
[data-cols^="4 "] {
    grid-column-start: 4;
}
[data-cols$=" 4"] {
    grid-column-end: 5;
}
[data-cols="4"] {
    grid-column: 4;
}
[data-cols^="5 "] {
    grid-column-start: 5;
}
[data-cols$=" 5"] {
    grid-column-end: 6;
}
[data-cols="5"] {
    grid-column: 5;
}
[data-cols^="6 "] {
    grid-column-start: 6;
}
[data-cols$=" 6"] {
    grid-column-end: 7;
}
[data-cols="6"] {
    grid-column: 6;
}
[data-cols^="7 "] {
    grid-column-start: 7;
}
[data-cols$=" 7"] {
    grid-column-end: 8;
}
[data-cols="7"] {
    grid-column: 7;
}
[data-cols^="8 "] {
    grid-column-start: 8;
}
[data-cols$=" 8"] {
    grid-column-end: 9;
}
[data-cols="8"] {
    grid-column: 8;
}
[data-cols^="9 "] {
    grid-column-start: 9;
}
[data-cols$=" 9"] {
    grid-column-end: 10;
}
[data-cols="9"] {
    grid-column: 9;
}
[data-cols^="10 "] {
    grid-column-start: 10;
}
[data-cols$=" 10"] {
    grid-column-end: 11;
}
[data-cols="10"] {
    grid-column: 10;
}
[data-cols^="11 "] {
    grid-column-start: 11;
}
[data-cols$=" 11"] {
    grid-column-end: 12;
}
[data-cols="11"] {
    grid-column: 11;
}
[data-cols^="12 "] {
    grid-column-start: 12;
}
[data-cols$=" 12"] {
    grid-column-end: 13;
}
[data-cols="12"] {
    grid-column: 12;
}
[data-rows^="1 "] {
    grid-row-start: 1;
}
[data-rows$=" 1"] {
    grid-row-end: 2;
}
[data-rows="1"] {
    grid-row: 1;
}
[data-rows^="2 "] {
    grid-row-start: 2;
}
[data-rows$=" 2"] {
    grid-row-end: 3;
}
[data-rows="2"] {
    grid-row: 2;
}
[data-rows^="3 "] {
    grid-row-start: 3;
}
[data-rows$=" 3"] {
    grid-row-end: 4;
}
[data-rows="3"] {
    grid-row: 3;
}
[data-rows^="4 "] {
    grid-row-start: 4;
}
[data-rows$=" 4"] {
    grid-row-end: 5;
}
[data-rows="4"] {
    grid-row: 4;
}
[data-rows^="5 "] {
    grid-row-start: 5;
}
[data-rows$=" 5"] {
    grid-row-end: 6;
}
[data-rows="5"] {
    grid-row: 5;
}
[data-rows^="6 "] {
    grid-row-start: 6;
}
[data-rows$=" 6"] {
    grid-row-end: 7;
}
[data-rows="6"] {
    grid-row: 6;
}
[data-rows^="7 "] {
    grid-row-start: 7;
}
[data-rows$=" 7"] {
    grid-row-end: 8;
}
[data-rows="7"] {
    grid-row: 7;
}
[data-rows^="8 "] {
    grid-row-start: 8;
}
[data-rows$=" 8"] {
    grid-row-end: 9;
}
[data-rows="8"] {
    grid-row: 8;
}
[data-rows^="9 "] {
    grid-row-start: 9;
}
[data-rows$=" 9"] {
    grid-row-end: 10;
}
[data-rows="9"] {
    grid-row: 9;
}
[data-rows^="10 "] {
    grid-row-start: 10;
}
[data-rows$=" 10"] {
    grid-row-end: 11;
}
[data-rows="10"] {
    grid-row: 10;
}
[data-rows^="11 "] {
    grid-row-start: 11;
}
[data-rows$=" 11"] {
    grid-row-end: 12;
}
[data-rows="11"] {
    grid-row: 11;
}
[data-rows^="12 "] {
    grid-row-start: 12;
}
[data-rows$=" 12"] {
    grid-row-end: 13;
}
[data-rows="12"] {
    grid-row: 12;
}
@media (max-width: 768px) {
    [data-cols\@s^="1 "] {
        grid-column-start: 1;
    }
    [data-cols\@s$=" 1"] {
        grid-column-end: 2;
    }
    [data-cols\@s="1"] {
        grid-column: 1;
    }
    [data-cols\@s^="2 "] {
        grid-column-start: 2;
    }
    [data-cols\@s$=" 2"] {
        grid-column-end: 3;
    }
    [data-cols\@s="2"] {
        grid-column: 2;
    }
    [data-cols\@s^="3 "] {
        grid-column-start: 3;
    }
    [data-cols\@s$=" 3"] {
        grid-column-end: 4;
    }
    [data-cols\@s="3"] {
        grid-column: 3;
    }
    [data-cols\@s^="4 "] {
        grid-column-start: 4;
    }
    [data-cols\@s$=" 4"] {
        grid-column-end: 5;
    }
    [data-cols\@s="4"] {
        grid-column: 4;
    }
    [data-cols\@s^="5 "] {
        grid-column-start: 5;
    }
    [data-cols\@s$=" 5"] {
        grid-column-end: 6;
    }
    [data-cols\@s="5"] {
        grid-column: 5;
    }
    [data-cols\@s^="6 "] {
        grid-column-start: 6;
    }
    [data-cols\@s$=" 6"] {
        grid-column-end: 7;
    }
    [data-cols\@s="6"] {
        grid-column: 6;
    }
    [data-cols\@s^="7 "] {
        grid-column-start: 7;
    }
    [data-cols\@s$=" 7"] {
        grid-column-end: 8;
    }
    [data-cols\@s="7"] {
        grid-column: 7;
    }
    [data-cols\@s^="8 "] {
        grid-column-start: 8;
    }
    [data-cols\@s$=" 8"] {
        grid-column-end: 9;
    }
    [data-cols\@s="8"] {
        grid-column: 8;
    }
    [data-cols\@s^="9 "] {
        grid-column-start: 9;
    }
    [data-cols\@s$=" 9"] {
        grid-column-end: 10;
    }
    [data-cols\@s="9"] {
        grid-column: 9;
    }
    [data-cols\@s^="10 "] {
        grid-column-start: 10;
    }
    [data-cols\@s$=" 10"] {
        grid-column-end: 11;
    }
    [data-cols\@s="10"] {
        grid-column: 10;
    }
    [data-cols\@s^="11 "] {
        grid-column-start: 11;
    }
    [data-cols\@s$=" 11"] {
        grid-column-end: 12;
    }
    [data-cols\@s="11"] {
        grid-column: 11;
    }
    [data-cols\@s^="12 "] {
        grid-column-start: 12;
    }
    [data-cols\@s$=" 12"] {
        grid-column-end: 13;
    }
    [data-cols\@s="12"] {
        grid-column: 12;
    }
    [data-rows\@s^="1 "] {
        grid-row-start: 1;
    }
    [data-rows\@s$=" 1"] {
        grid-row-end: 2;
    }
    [data-rows\@s="1"] {
        grid-row: 1;
    }
    [data-rows\@s^="2 "] {
        grid-row-start: 2;
    }
    [data-rows\@s$=" 2"] {
        grid-row-end: 3;
    }
    [data-rows\@s="2"] {
        grid-row: 2;
    }
    [data-rows\@s^="3 "] {
        grid-row-start: 3;
    }
    [data-rows\@s$=" 3"] {
        grid-row-end: 4;
    }
    [data-rows\@s="3"] {
        grid-row: 3;
    }
    [data-rows\@s^="4 "] {
        grid-row-start: 4;
    }
    [data-rows\@s$=" 4"] {
        grid-row-end: 5;
    }
    [data-rows\@s="4"] {
        grid-row: 4;
    }
    [data-rows\@s^="5 "] {
        grid-row-start: 5;
    }
    [data-rows\@s$=" 5"] {
        grid-row-end: 6;
    }
    [data-rows\@s="5"] {
        grid-row: 5;
    }
    [data-rows\@s^="6 "] {
        grid-row-start: 6;
    }
    [data-rows\@s$=" 6"] {
        grid-row-end: 7;
    }
    [data-rows\@s="6"] {
        grid-row: 6;
    }
    [data-rows\@s^="7 "] {
        grid-row-start: 7;
    }
    [data-rows\@s$=" 7"] {
        grid-row-end: 8;
    }
    [data-rows\@s="7"] {
        grid-row: 7;
    }
    [data-rows\@s^="8 "] {
        grid-row-start: 8;
    }
    [data-rows\@s$=" 8"] {
        grid-row-end: 9;
    }
    [data-rows\@s="8"] {
        grid-row: 8;
    }
    [data-rows\@s^="9 "] {
        grid-row-start: 9;
    }
    [data-rows\@s$=" 9"] {
        grid-row-end: 10;
    }
    [data-rows\@s="9"] {
        grid-row: 9;
    }
    [data-rows\@s^="10 "] {
        grid-row-start: 10;
    }
    [data-rows\@s$=" 10"] {
        grid-row-end: 11;
    }
    [data-rows\@s="10"] {
        grid-row: 10;
    }
    [data-rows\@s^="11 "] {
        grid-row-start: 11;
    }
    [data-rows\@s$=" 11"] {
        grid-row-end: 12;
    }
    [data-rows\@s="11"] {
        grid-row: 11;
    }
    [data-rows\@s^="12 "] {
        grid-row-start: 12;
    }
    [data-rows\@s$=" 12"] {
        grid-row-end: 13;
    }
    [data-rows\@s="12"] {
        grid-row: 12;
    }
}
@media (min-width: 1024px) {
    [data-cols\@l^="1 "] {
        grid-column-start: 1;
    }
    [data-cols\@l$=" 1"] {
        grid-column-end: 2;
    }
    [data-cols\@l="1"] {
        grid-column: 1;
    }
    [data-cols\@l^="2 "] {
        grid-column-start: 2;
    }
    [data-cols\@l$=" 2"] {
        grid-column-end: 3;
    }
    [data-cols\@l="2"] {
        grid-column: 2;
    }
    [data-cols\@l^="3 "] {
        grid-column-start: 3;
    }
    [data-cols\@l$=" 3"] {
        grid-column-end: 4;
    }
    [data-cols\@l="3"] {
        grid-column: 3;
    }
    [data-cols\@l^="4 "] {
        grid-column-start: 4;
    }
    [data-cols\@l$=" 4"] {
        grid-column-end: 5;
    }
    [data-cols\@l="4"] {
        grid-column: 4;
    }
    [data-cols\@l^="5 "] {
        grid-column-start: 5;
    }
    [data-cols\@l$=" 5"] {
        grid-column-end: 6;
    }
    [data-cols\@l="5"] {
        grid-column: 5;
    }
    [data-cols\@l^="6 "] {
        grid-column-start: 6;
    }
    [data-cols\@l$=" 6"] {
        grid-column-end: 7;
    }
    [data-cols\@l="6"] {
        grid-column: 6;
    }
    [data-cols\@l^="7 "] {
        grid-column-start: 7;
    }
    [data-cols\@l$=" 7"] {
        grid-column-end: 8;
    }
    [data-cols\@l="7"] {
        grid-column: 7;
    }
    [data-cols\@l^="8 "] {
        grid-column-start: 8;
    }
    [data-cols\@l$=" 8"] {
        grid-column-end: 9;
    }
    [data-cols\@l="8"] {
        grid-column: 8;
    }
    [data-cols\@l^="9 "] {
        grid-column-start: 9;
    }
    [data-cols\@l$=" 9"] {
        grid-column-end: 10;
    }
    [data-cols\@l="9"] {
        grid-column: 9;
    }
    [data-cols\@l^="10 "] {
        grid-column-start: 10;
    }
    [data-cols\@l$=" 10"] {
        grid-column-end: 11;
    }
    [data-cols\@l="10"] {
        grid-column: 10;
    }
    [data-cols\@l^="11 "] {
        grid-column-start: 11;
    }
    [data-cols\@l$=" 11"] {
        grid-column-end: 12;
    }
    [data-cols\@l="11"] {
        grid-column: 11;
    }
    [data-cols\@l^="12 "] {
        grid-column-start: 12;
    }
    [data-cols\@l$=" 12"] {
        grid-column-end: 13;
    }
    [data-cols\@l="12"] {
        grid-column: 12;
    }
    [data-rows\@l^="1 "] {
        grid-row-start: 1;
    }
    [data-rows\@l$=" 1"] {
        grid-row-end: 2;
    }
    [data-rows\@l="1"] {
        grid-row: 1;
    }
    [data-rows\@l^="2 "] {
        grid-row-start: 2;
    }
    [data-rows\@l$=" 2"] {
        grid-row-end: 3;
    }
    [data-rows\@l="2"] {
        grid-row: 2;
    }
    [data-rows\@l^="3 "] {
        grid-row-start: 3;
    }
    [data-rows\@l$=" 3"] {
        grid-row-end: 4;
    }
    [data-rows\@l="3"] {
        grid-row: 3;
    }
    [data-rows\@l^="4 "] {
        grid-row-start: 4;
    }
    [data-rows\@l$=" 4"] {
        grid-row-end: 5;
    }
    [data-rows\@l="4"] {
        grid-row: 4;
    }
    [data-rows\@l^="5 "] {
        grid-row-start: 5;
    }
    [data-rows\@l$=" 5"] {
        grid-row-end: 6;
    }
    [data-rows\@l="5"] {
        grid-row: 5;
    }
    [data-rows\@l^="6 "] {
        grid-row-start: 6;
    }
    [data-rows\@l$=" 6"] {
        grid-row-end: 7;
    }
    [data-rows\@l="6"] {
        grid-row: 6;
    }
    [data-rows\@l^="7 "] {
        grid-row-start: 7;
    }
    [data-rows\@l$=" 7"] {
        grid-row-end: 8;
    }
    [data-rows\@l="7"] {
        grid-row: 7;
    }
    [data-rows\@l^="8 "] {
        grid-row-start: 8;
    }
    [data-rows\@l$=" 8"] {
        grid-row-end: 9;
    }
    [data-rows\@l="8"] {
        grid-row: 8;
    }
    [data-rows\@l^="9 "] {
        grid-row-start: 9;
    }
    [data-rows\@l$=" 9"] {
        grid-row-end: 10;
    }
    [data-rows\@l="9"] {
        grid-row: 9;
    }
    [data-rows\@l^="10 "] {
        grid-row-start: 10;
    }
    [data-rows\@l$=" 10"] {
        grid-row-end: 11;
    }
    [data-rows\@l="10"] {
        grid-row: 10;
    }
    [data-rows\@l^="11 "] {
        grid-row-start: 11;
    }
    [data-rows\@l$=" 11"] {
        grid-row-end: 12;
    }
    [data-rows\@l="11"] {
        grid-row: 11;
    }
    [data-rows\@l^="12 "] {
        grid-row-start: 12;
    }
    [data-rows\@l$=" 12"] {
        grid-row-end: 13;
    }
    [data-rows\@l="12"] {
        grid-row: 12;
    }
}
@media print {
    [data-cols\@p^="1 "] {
        grid-column-start: 1;
    }
    [data-cols\@p$=" 1"] {
        grid-column-end: 2;
    }
    [data-cols\@p="1"] {
        grid-column: 1;
    }
    [data-cols\@p^="2 "] {
        grid-column-start: 2;
    }
    [data-cols\@p$=" 2"] {
        grid-column-end: 3;
    }
    [data-cols\@p="2"] {
        grid-column: 2;
    }
    [data-cols\@p^="3 "] {
        grid-column-start: 3;
    }
    [data-cols\@p$=" 3"] {
        grid-column-end: 4;
    }
    [data-cols\@p="3"] {
        grid-column: 3;
    }
    [data-cols\@p^="4 "] {
        grid-column-start: 4;
    }
    [data-cols\@p$=" 4"] {
        grid-column-end: 5;
    }
    [data-cols\@p="4"] {
        grid-column: 4;
    }
    [data-cols\@p^="5 "] {
        grid-column-start: 5;
    }
    [data-cols\@p$=" 5"] {
        grid-column-end: 6;
    }
    [data-cols\@p="5"] {
        grid-column: 5;
    }
    [data-cols\@p^="6 "] {
        grid-column-start: 6;
    }
    [data-cols\@p$=" 6"] {
        grid-column-end: 7;
    }
    [data-cols\@p="6"] {
        grid-column: 6;
    }
    [data-cols\@p^="7 "] {
        grid-column-start: 7;
    }
    [data-cols\@p$=" 7"] {
        grid-column-end: 8;
    }
    [data-cols\@p="7"] {
        grid-column: 7;
    }
    [data-cols\@p^="8 "] {
        grid-column-start: 8;
    }
    [data-cols\@p$=" 8"] {
        grid-column-end: 9;
    }
    [data-cols\@p="8"] {
        grid-column: 8;
    }
    [data-cols\@p^="9 "] {
        grid-column-start: 9;
    }
    [data-cols\@p$=" 9"] {
        grid-column-end: 10;
    }
    [data-cols\@p="9"] {
        grid-column: 9;
    }
    [data-cols\@p^="10 "] {
        grid-column-start: 10;
    }
    [data-cols\@p$=" 10"] {
        grid-column-end: 11;
    }
    [data-cols\@p="10"] {
        grid-column: 10;
    }
    [data-cols\@p^="11 "] {
        grid-column-start: 11;
    }
    [data-cols\@p$=" 11"] {
        grid-column-end: 12;
    }
    [data-cols\@p="11"] {
        grid-column: 11;
    }
    [data-cols\@p^="12 "] {
        grid-column-start: 12;
    }
    [data-cols\@p$=" 12"] {
        grid-column-end: 13;
    }
    [data-cols\@p="12"] {
        grid-column: 12;
    }
    [data-rows\@p^="1 "] {
        grid-row-start: 1;
    }
    [data-rows\@p$=" 1"] {
        grid-row-end: 2;
    }
    [data-rows\@p="1"] {
        grid-row: 1;
    }
    [data-rows\@p^="2 "] {
        grid-row-start: 2;
    }
    [data-rows\@p$=" 2"] {
        grid-row-end: 3;
    }
    [data-rows\@p="2"] {
        grid-row: 2;
    }
    [data-rows\@p^="3 "] {
        grid-row-start: 3;
    }
    [data-rows\@p$=" 3"] {
        grid-row-end: 4;
    }
    [data-rows\@p="3"] {
        grid-row: 3;
    }
    [data-rows\@p^="4 "] {
        grid-row-start: 4;
    }
    [data-rows\@p$=" 4"] {
        grid-row-end: 5;
    }
    [data-rows\@p="4"] {
        grid-row: 4;
    }
    [data-rows\@p^="5 "] {
        grid-row-start: 5;
    }
    [data-rows\@p$=" 5"] {
        grid-row-end: 6;
    }
    [data-rows\@p="5"] {
        grid-row: 5;
    }
    [data-rows\@p^="6 "] {
        grid-row-start: 6;
    }
    [data-rows\@p$=" 6"] {
        grid-row-end: 7;
    }
    [data-rows\@p="6"] {
        grid-row: 6;
    }
    [data-rows\@p^="7 "] {
        grid-row-start: 7;
    }
    [data-rows\@p$=" 7"] {
        grid-row-end: 8;
    }
    [data-rows\@p="7"] {
        grid-row: 7;
    }
    [data-rows\@p^="8 "] {
        grid-row-start: 8;
    }
    [data-rows\@p$=" 8"] {
        grid-row-end: 9;
    }
    [data-rows\@p="8"] {
        grid-row: 8;
    }
    [data-rows\@p^="9 "] {
        grid-row-start: 9;
    }
    [data-rows\@p$=" 9"] {
        grid-row-end: 10;
    }
    [data-rows\@p="9"] {
        grid-row: 9;
    }
    [data-rows\@p^="10 "] {
        grid-row-start: 10;
    }
    [data-rows\@p$=" 10"] {
        grid-row-end: 11;
    }
    [data-rows\@p="10"] {
        grid-row: 10;
    }
    [data-rows\@p^="11 "] {
        grid-row-start: 11;
    }
    [data-rows\@p$=" 11"] {
        grid-row-end: 12;
    }
    [data-rows\@p="11"] {
        grid-row: 11;
    }
    [data-rows\@p^="12 "] {
        grid-row-start: 12;
    }
    [data-rows\@p$=" 12"] {
        grid-row-end: 13;
    }
    [data-rows\@p="12"] {
        grid-row: 12;
    }
}