/*
 * base.css — the app's element defaults: box sizing, the page font and
 * rhythm, headings, links, lists, tables, forms and buttons, <details>,
 * <dialog>, [role=tab] and the other built-in elements, plus the colour ramps
 * and semantic variables (--gray-*, --blue-*, --fg, --bg, --accent, --bad-fg,
 * --rhythm, --border-radius, --main-font, …) that wyldcards.css and
 * design-system.css build on. It loads first, before wyldcards.css.
 *
 * It began as the parts of missing.css that Wyldcards used, kept rule for
 * rule so nothing moved when missing.css was removed: every selector naming
 * a class the app never uses was dropped (its utility classes, layouts and
 * components), and so were the variables nothing reads. Pages looked the same
 * before and after (screenshots of 32 pages in light, dark and phone widths,
 * and computed styles of every element, compared on 2026-09-24).
 *
 * This file is ours now. Change element defaults here; keep colours, sizes and
 * timings on the tokens in design-system.css for anything new.
 *
 * Derived from missing.css (https://missing.style) by Deniz Akşimşek and
 * contributors, used under the BSD 2-Clause License:
 *
 *   Redistribution and use in source and binary forms, with or without
 *   modification, are permitted provided that the following conditions are met:
 *   1. Redistributions of source code must retain the above copyright notice,
 *      this list of conditions and the following disclaimer.
 *   2. Redistributions in binary form must reproduce the above copyright
 *      notice, this list of conditions and the following disclaimer in the
 *      documentation and/or other materials provided with the distribution.
 *   THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
 *   AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 *   IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
 *   ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
 *   LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
 *   CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
 *   SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
 *   INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
 *   CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
 *   ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 *   POSSIBILITY OF SUCH DAMAGE.
 */

*,
:before,
:after {
    box-sizing: border-box;
    background-repeat: no-repeat;
}

:before,
:after {
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
    vertical-align: inherit;
}

:root {
    cursor: default;
    overflow-wrap: break-word;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    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;
    text-indent: 0;
    border-color: currentColor;
}

button,
input,
select {
    margin: 0;
}

fieldset {
    border: 1px solid #a0a0a0;
}

progress {
    vertical-align: baseline;
}

textarea {
    margin: 0;
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

::-webkit-inner-spin-button {
    block-size: auto;
}

::-webkit-outer-spin-button {
    block-size: auto;
}

::-webkit-input-placeholder {
    color: inherit;
    opacity: .54;
}

::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

[hidden] {
    display: none!important;
}

:focus-visible {
    outline: .2em solid var(--accent);
    z-index: 32;
}

iframe:focus-visible,
html:focus-visible,
body:focus-visible {
    outline: none;
}

:target {
    outline: .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-6: #979b9d;
    --gray-7: #7e8282;
    --gray-8: #666968;
    --gray-10: #3a3a37;
    --gray-11: #252521;
    --gray-12: #121210;
    --red-1: #ffe3e3;
    --red-2: #ffc9c9;
    --red-6: #fa5252;
    --red-11: #962020;
    --red-12: #7d1a1a;
    --blue-2: #a5d8ff;
    --blue-3: #74c0fc;
    --blue-5: #339af0;
    --blue-7: #1c7ed6;
    --blue-10: #145591;
    --green-1: #d3f9d8;
    --green-2: #b2f2bb;
    --green-11: #1b5727;
    --green-12: #133d1b;
    --yellow-1: #fff3bf;
    --yellow-2: #ffec99;
    --yellow-11: #804200;
    --yellow-12: #663500;
}

html {
    font-family: var(--main-font);
    line-height: var(--rhythm);
    background: var(--bg);
    color: var(--fg);
    scroll-padding-block-start: calc(4*var(--gap));
}

body {
    margin: 0;
}

header,
footer,
section+section {
    margin-block: calc(2*var(--gap));
}

nav :is(a:not(.\<button\>)) {
    color: var(--accent);
    text-decoration: none;
}

aside {
    font-size: .8em;
    line-height: calc(var(--rhythm)*2/3);
    --gap: calc(var(--rhythm)*var(--density)*2/3);
    border-block: 1px solid var(--graphical-fg);
    padding-block: var(--gap);
    margin-block: calc(var(--gap)*3/2);
}

aside h1,
aside h2,
aside h3,
aside h4,
aside h5,
aside h6 {
    text-transform: none;
    letter-spacing: none;
    font-size: 1em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--display-font);
    margin-block-start: calc(2*var(--gap));
    margin-block-end: var(--gap);
    font-size: 1em;
    position: relative;
}

h1 {
    text-transform: none;
    font-size: 2em;
    line-height: calc(2*var(--rhythm));
    letter-spacing: 0;
}

h2 {
    text-transform: none;
    font-size: 1.6em;
    line-height: calc(1.5*var(--rhythm));
    letter-spacing: 0;
}

h3 {
    font-size: 1.17em;
    line-height: calc(1*var(--rhythm));
}

h4,
h5,
h6 {
    text-transform: none;
    font-size: 1em;
    line-height: calc(1*var(--rhythm));
    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;
}

:is(h1:target, h2:target, h3:target, h4:target, h5:target, h6:target):before {
    content: "";
    background: var(--accent);
    width: 4px;
    height: 100%;
    display: block;
    position: absolute;
    left: -.5em;
}

header {
    font-family: var(--display-font);
    border-block-end: 1px solid var(--graphical-fg);
}

footer {
    font-family: var(--secondary-font);
    font-size: .8em;
    line-height: calc(var(--rhythm)*2/3);
    border-block-start: 1px solid var(--graphical-fg);
}

body>header,
body>footer,
main+footer {
    padding: var(--rhythm)calc((100% - var(--eff-line-length))/2);
}

address {
    --density: 0;
}

p {
    margin-block: var(--gap);
}

hr {
    color: inherit;
    margin-inline: 0;
    margin-block: var(--gap);
    border-inline-start: 1px solid var(--accent);
    border-block-start: 1px solid var(--accent);
    border-block-end: none;
    border-inline-end: none;
    flex: 0 1 0;
    block-size: auto;
}

pre {
    font-family: var(--mono-font);
    font-size: .9em;
    line-height: var(--rhythm);
    tab-size: 2;
    margin: var(--gap)0;
    scrollbar-width: thin;
    scrollbar-color: var(--accent)transparent;
    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);
    border-inline-start: 1px solid var(--graphical-fg);
    color: var(--muted-fg);
    font-style: italic;
}

blockquote em,
blockquote cite,
blockquote dfn,
blockquote var,
blockquote i,
blockquote address {
    font-style: normal;
}

blockquote footer {
    text-align: right;
    text-align: end;
}

ul,
ol {
    margin-block: var(--gap);
    padding-inline-start: var(--rhythm);
}

:is(ul, ol) :is(ul, ol) {
    padding-inline-start: var(--gap);
}

:is(ul, ol)[role=list],
:is(ul, ol)[role=listbox] {
    padding-inline-start: 0;
    list-style: none;
}

ol {
    list-style: decimal;
}

dl {
    margin-block: var(--gap);
}

dt {
    font-weight: 700;
    font-family: var(--secondary-font);
}

dd {
    margin-inline-start: var(--rhythm);
}

li::marker {
    font-family: var(--secondary-font);
}

figure {
    max-width: 100%;
    margin-inline: 0;
}

figcaption {
    margin-block: var(--gap);
    font-family: var(--secondary-font);
    color: var(--muted-fg);
}

main {
    max-inline-size: var(--eff-line-length);
    inline-size: 100%;
    margin-inline: auto;
}

main:first-child {
    padding-top: var(--gap);
}

a {
    color: var(--link-fg,var(--accent));
    border-radius: var(--border-radius);
    outline-offset: 1px;
    background: 0 0;
    border: none;
    font-family: inherit;
    font-size: 1em;
    text-decoration: underline 1px dotted;
}

:is(a):hover,
:is(a):focus {
    cursor: pointer;
    outline: none;
    text-decoration: underline 2px;
}

small[role=note] {
    float: inline-end;
    clear: inline-end;
    --sidenote-width: 20ch;
    max-inline-size: var(--sidenote-width);
    font-family: var(--secondary-font);
    background: var(--bg);
    border: 1px solid #0000;
    margin-block-end: var(--rhythm);
    margin-inline-end: calc(1em - var(--sidenote-width));
    padding-inline: 1.5ch 1ch;
    transition: transform .1s ease-in-out;
    display: block;
}

small[role=note]:hover,
small[role=note]:focus-within {
    border: 1px solid var(--graphical-fg);
    border-radius: var(--border-radius);
    transform: translateX(calc(0px - var(--sidenote-width) + min(var(--gutter-width),var(--sidenote-width))));
}

small {
    font-size: .8em;
    line-height: calc(var(--rhythm)*2/3);
}

s {
    color: var(--bad-fg);
}

q {
    font-style: italic;
}

q em,
q cite,
q dfn,
q var,
q i,
q 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 {
    background: var(--wc-surface-muted, var(--interactive-bg));
    border: 1px solid var(--wc-border, var(--graphical-fg));
    border-radius: var(--wc-radius-sm, var(--border-radius));
    border-block-end-width: 2px;
    padding: 0 .3em;
    font-size: .8em;
    line-height: 1.1em;
    display: inline-block;
}

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 {
    block-size: auto;
    inline-size: max-content;
    max-inline-size: 100%;
}

table {
    font-variant-numeric: tabular-nums;
    font: inherit;
}

caption {
    text-align: start;
    font-family: var(--secondary-font);
    font-style: italic;
}

tbody {
    border-block: 1px solid var(--faded-fg);
}

td,
th {
    vertical-align: top;
}

:is(td, th):not(:last-child) {
    padding-inline-end: var(--rhythm);
}

th {
    font-family: var(--secondary-font);
    text-align: start;
}

input {
    display: block;
}

label :is(input, select):not([specificity-hack]) {
    padding-block: 0;
    display: inline;
}

:where(button, input[type=submit], input[type=reset], input[type=button]):not(.\<a\>) {
    padding: 0 calc(var(--rhythm)/4);
    vertical-align: middle;
    box-sizing: border-box;
    font-size: .8rem;
    line-height: 1.125em;
    font-family: var(--secondary-font);
    min-height: var(--rhythm);
    background: var(--wc-surface, var(--interactive-bg));
    color: var(--fg);
    border: 1px solid var(--wc-border, var(--muted-fg));
    box-shadow: none;
    border-radius: var(--wc-radius-sm, var(--border-radius));
    transition: background-color var(--wc-duration-fast, 0s) var(--wc-ease, ease), border-color var(--wc-duration-fast, 0s) var(--wc-ease, ease), color var(--wc-duration-fast, 0s) var(--wc-ease, ease);
    justify-content: center;
    align-items: center;
    text-decoration: none;
    display: inline-flex;
}

input::file-selector-button {
    padding: 0 calc(var(--rhythm)/4);
    vertical-align: middle;
    box-sizing: border-box;
    font-size: .8rem;
    line-height: 1.125em;
    font-family: var(--secondary-font);
    min-height: var(--rhythm);
    background: var(--wc-surface, var(--interactive-bg));
    color: var(--fg);
    border: 1px solid var(--wc-border, var(--muted-fg));
    box-shadow: none;
    border-radius: var(--wc-radius-sm, var(--border-radius));
    transition: background-color var(--wc-duration-fast, 0s) var(--wc-ease, ease), border-color var(--wc-duration-fast, 0s) var(--wc-ease, ease), color var(--wc-duration-fast, 0s) var(--wc-ease, ease);
    justify-content: center;
    align-items: center;
    text-decoration: none;
    display: inline-flex;
}

input::file-selector-button:hover {
    border-color: var(--wc-brand, var(--accent));
    background: var(--wc-surface-muted, var(--interactive-bg));
    text-decoration: none;
}

input::file-selector-button:focus-visible {
    border-color: var(--wc-brand, var(--accent));
    background: var(--wc-surface-muted, var(--interactive-bg));
    text-decoration: none;
}

input::file-selector-button:active {
    box-shadow: none;
}

:where(button, input[type=submit], input[type=reset], input[type=button]):not(.\<a\>):is(a) {
    cursor: default;
}

:where(button, input[type=submit], input[type=reset], input[type=button]):not(.\<a\>):hover,
:where(button, input[type=submit], input[type=reset], input[type=button]):not(.\<a\>):focus-visible {
    border-color: var(--wc-brand, var(--accent));
    background: var(--wc-surface-muted, var(--interactive-bg));
    text-decoration: none;
}

:where(button, input[type=submit], input[type=reset], input[type=button]):not(.\<a\>):active {
    box-shadow: none;
}

:is(strong>:where(button, input[type=submit], input[type=reset], input[type=button]):not(.\<a\>)) {
    background: var(--accent);
    color: var(--bg);
    border: none;
    font-weight: 700;
}

:is(strong>:where(button, input[type=submit], input[type=reset], input[type=button]):not(.\<a\>)):is(:hover, :focus-visible) {
    background: var(--accent);
    color: var(--bg);
}

:is(strong>:where(button, input[type=submit], input[type=reset], input[type=button]):not(.\<a\>))[disabled] {
    color: var(--muted-accent);
}

:where(button, input[type=submit], input[type=reset], input[type=button]):not(.\<a\>):active:is([aria-pressed], [aria-expanded]) {
    color: var(--accent);
}

:where(button, input[type=submit], input[type=reset], input[type=button]):not(.\<a\>):where([aria-pressed=true], [aria-expanded=true]) {
    border-color: var(--wc-brand, var(--accent));
    background: var(--wc-info-bg, var(--pressed-interactive-bg));
    color: var(--accent);
}

:where(button, input[type=submit], input[type=reset], input[type=button]):not(.\<a\>):where([aria-pressed=true], [aria-expanded=true]):hover,
:where(button, input[type=submit], input[type=reset], input[type=button]):not(.\<a\>):where([aria-pressed=true], [aria-expanded=true]):focus-visible {
    background: var(--wc-info-bg, var(--pressed-interactive-bg));
}

:where(button, input[type=submit], input[type=reset], input[type=button]):not(.\<a\>):disabled {
    color: var(--muted-fg);
    box-shadow: none;
    border-color: var(--wc-border, var(--muted-fg));
    background: var(--wc-surface, var(--interactive-bg));
    cursor: not-allowed;
}

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)/4);
    vertical-align: top;
    font-size: 1rem;
    line-height: inherit;
    font-family: var(--main-font);
    background: var(--wc-field-bg, var(--bg));
    color: var(--fg);
    border: 1px solid var(--wc-border, var(--graphical-fg));
    border-radius: var(--wc-radius-sm, var(--border-radius));
    vertical-align: top;
    transition: border-color var(--wc-duration-fast, 0s) var(--wc-ease, ease);
}

:is(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):focus-visible {
    border: 1px solid var(--accent);
}

:is(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)::placeholder {
    color: var(--muted-fg);
    opacity: 1;
}

input[type=range] {
    padding: calc(var(--gap)/4);
    width: 100%;
}

input[type=color] {
    height: calc(1.5*var(--rhythm));
    background: 0 0;
    border: none;
    margin: 0;
    padding: 0;
}

input[type=file] {
    padding: calc(var(--gap)/4)0;
    font: inherit;
    line-height: calc(var(--rhythm)/2);
}

input[type=file]::file-selector-button {
    margin-block: .1em 0;
    margin-inline-end: 1ch;
}

select[multiple] {
    vertical-align: top;
}

optgroup:before {
    color: var(--muted-fg);
    font-style: normal;
}

label[for] {
    padding-block: calc(var(--gap)/4);
    display: block;
}

fieldset {
    padding: var(--gap);
    margin: var(--gap)0;
    border-radius: var(--border-radius);
    border: 1px solid var(--graphical-fg);
    width: 100%;
    position: relative;
}

fieldset>legend+* {
    margin-block-start: 0;
}

details:not(specificity-hack) {
    padding-block-start: 0;
}

details:not(specificity-hack):not([open]) {
    padding-block-end: 0;
}

summary {
    margin: calc(0px - var(--gap));
    margin-top: calc(0px - var(--gap));
    padding-inline: var(--gap);
    font-family: var(--secondary-font);
    cursor: pointer;
    margin-bottom: 0;
    font-weight: 700;
}

summary:focus-visible,
summary:active {
    filter: brightness(.8);
    outline: none;
}

dialog {
    inline-inset: 0;
    background-color: var(--bg);
    color: var(--fg);
    border-color: var(--fg);
    block-size: fit-content;
    inline-size: fit-content;
    margin: auto!important;
}

dialog[open]::backdrop {
    opacity: .4;
    background: #000;
    animation: 2s bg;
    display: block;
}

@keyframes bg {
    0% {
        background: 0 0;
    }
}

dialog:not([open]) {
    display: none;
}

[role=menu],
[role=tabpanel],
figure,
details,
:where(dialog) {
    margin: var(--gap)0;
    padding: var(--gap);
    border-radius: var(--border-radius);
    background: var(--box-bg);
    border: 1px solid var(--graphical-fg);
    overflow: clip;
}

sub-title {
    color: var(--muted-fg);
    font-weight: 400;
    display: block;
}

[role=toolbar] {
    gap: calc(var(--gap)/2);
    flex-flow: wrap;
    display: flex;
}

:is([role=toolbar])>* {
    margin: 0;
}

chip {
    font-family: var(--secondary-font);
    border: 1px solid var(--accent);
    background: var(--box-bg);
    border-radius: calc(var(--rhythm)/2);
    padding-inline: calc(var(--rhythm)/2);
}

[role=tablist] {
    scrollbar-width: thin;
    gap: .5ch;
    display: flex;
}

[role=tab][role=tab] {
    all: initial;
    font-family: var(--secondary-font);
    padding: 0 calc(var(--rhythm)/4);
    min-height: var(--rhythm);
    color: var(--fg);
    border: solid var(--graphical-fg);
    background: var(--interactive-bg);
    border-width: 1px;
    border-start-start-radius: .4em;
    border-start-end-radius: .4em;
    margin: 0;
    position: relative;
    bottom: -1px;
}

[role=tab][role=tab]:active,
[role=tab][role=tab][aria-selected=true] {
    background: var(--box-bg);
    border-block-end: 1px solid #0000;
}

[role=tab][role=tab]:hover {
    background-color: var(--box-bg);
    box-shadow: none;
}

[role=tab][role=tab]:focus-visible {
    box-shadow: none;
    color: var(--accent);
    text-decoration: underline;
}

[role=tabpanel] {
    z-index: 1;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    margin-block-start: 0;
}

[role=menu] {
    z-index: 10;
    padding: calc(var(--gap)/2)0;
    flex-flow: column;
    margin: 1px 0 0;
    display: flex;
    position: absolute;
}

[role=menuitem] {
    padding: 0 calc(var(--gap)/2);
    color: var(--fg);
    border-radius: 0;
    text-decoration: none;
    display: block;
}

[role=menuitem]:focus,
[role=menuitem]:active {
    background: var(--accent);
    color: var(--bg);
}

[role=listbox] {
    list-style: none;
}

[role=listbox] [role=option] {
    margin-inline: calc(-1*var(--gap));
    padding-inline: var(--gap);
    border-radius: 0;
}

[role=listbox] [role=option][aria-selected=true] {
    background: var(--interactive-bg);
}

[role=listbox] [role=option].active {
    --temporary-bg: var(--accent);
    --temporary-fg: var(--bg);
    --temporary-accent: parent-var(--muted-accent);
    --temporary-muted-accent: parent-var(--box-bg);
    background: var(--temporary-bg);
    color: var(--temporary-fg);
}

[role=listbox] [role=option].active>* {
    --bg: var(--temporary-bg);
    --fg: var(--temporary-fg);
    --accent: var(--temporary-accent);
    --muted-accent: var(--temporary-muted-accent);
}

[aria-orientation=vertical] {
    text-align: center;
    flex-direction: column;
    width: fit-content;
}

.bad {
    --box-bg: var(--bad-bg);
    --accent: var(--bad-fg);
    --graphical-fg: var(--bad-graphical-fg);
}

:root {
    --fg: var(--gray-12);
    --muted-fg: var(--gray-10);
    --faded-fg: var(--gray-6);
    --graphical-fg: var(--plain-graphical-fg);
    --ok-fg: var(--green-11);
    --bad-fg: var(--red-11);
    --warn-fg: var(--yellow-11);
    --plain-graphical-fg: var(--gray-6);
    --bad-graphical-fg: var(--red-6);
    --bg: var(--gray-0);
    --box-bg: var(--plain-bg);
    --interactive-bg: var(--gray-4);
    --plain-bg: var(--gray-1);
    --ok-bg: var(--green-1);
    --bad-bg: var(--red-1);
    --warn-bg: var(--yellow-1);
    --accent: var(--blue-10);
    --muted-accent: var(--blue-7);
    --rhythm: 1.4rem;
    --line-length: 40rem;
    --border-radius: .2rem;
    --main-font: var(--wc-font-ui);
    --secondary-font: var(--main-font);
    --display-font: var(--secondary-font);
    --mono-font: var(--wc-font-mono);
    --density: 1;
    --full-width: 100vw;
    --eff-line-length: min(calc(var(--full-width) - (2*var(--rhythm))),var(--line-length));
    --gutter-width: calc(( var(--full-width) - var(--eff-line-length))/2);
}

:root.-dark-theme {
    --fg: var(--gray-0);
    --muted-fg: var(--gray-2);
    --faded-fg: var(--gray-7);
    --plain-bg: var(--gray-11);
    --ok-bg: var(--green-12);
    --bad-bg: var(--red-12);
    --warn-bg: var(--yellow-12);
    --bg: var(--gray-12);
    --box-bg: var(--gray-10);
    --interactive-bg: var(--gray-8);
    --ok-fg: var(--green-2);
    --bad-fg: var(--red-2);
    --warn-fg: var(--yellow-2);
    --accent: var(--blue-2);
    --muted-accent: var(--blue-5);
}

@media (prefers-color-scheme:dark) {
    :root:not(.-no-dark-theme) {
        --fg: var(--gray-0);
        --muted-fg: var(--gray-2);
        --faded-fg: var(--gray-7);
        --plain-bg: var(--gray-11);
        --ok-bg: var(--green-12);
        --bad-bg: var(--red-12);
        --warn-bg: var(--yellow-12);
        --bg: var(--gray-12);
        --box-bg: var(--gray-10);
        --interactive-bg: var(--gray-8);
        --ok-fg: var(--green-2);
        --bad-fg: var(--red-2);
        --warn-fg: var(--yellow-2);
        --accent: var(--blue-2);
        --muted-accent: var(--blue-5);
    }
}

* {
    --gap: calc(var(--rhythm)*var(--density));
    accent-color: var(--accent);
}

:is(body, [role=menu], [role=tabpanel], figure, details, dialog, aside, fieldset, dd, td, th)>:first-child:first-child:first-child:first-child,
:is(body, [role=menu], [role=tabpanel], figure, details, dialog, aside, fieldset, dd, td, th)>:first-child>:first-child:first-child:first-child,
:is(body, [role=menu], [role=tabpanel], figure, details, dialog, aside, fieldset, dd, td, th)>:first-child>:first-child>:first-child:first-child,
:is(body, [role=menu], [role=tabpanel], figure, details, dialog, aside, fieldset, dd, td, th)>:first-child>:first-child>:first-child>:first-child {
    margin-block-start: 0;
}

:is(body, [role=menu], [role=tabpanel], figure, details, dialog, aside, fieldset, dd, td, th)>:last-child:last-child:last-child:last-child,
:is(body, [role=menu], [role=tabpanel], figure, details, dialog, aside, fieldset, dd, td, th)>:last-child>:last-child:last-child:last-child,
:is(body, [role=menu], [role=tabpanel], figure, details, dialog, aside, fieldset, dd, td, th)>:last-child>:last-child>:last-child:last-child,
:is(body, [role=menu], [role=tabpanel], figure, details, dialog, aside, fieldset, dd, td, th)>:last-child>:last-child>:last-child>:last-child {
    margin-block-end: 0;
}

v-h {
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    white-space: nowrap;
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
}

[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 (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 (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;
    }
}