@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/inter-normal-4.1.woff2") format("woff2-variations");
}
@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("/inter-italic-4.1.woff2") format("woff2-variations");
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/jet-brains-mono-normal-2.304.woff2") format("woff2-variations");
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("/jet-brains-mono-italic-2.304.woff2") format("woff2-variations");
}
:root {
    font-family: "Inter", sans-serif;
    font-feature-settings:
        "liga" 1,
        "calt" 1,
        "ss01" 1,
        "ss03" 1,
        "ss04" 1;

    color-scheme: light dark;

    --white: oklch(1 0 0);
    --black: oklch(0 0 0);
    --background: light-dark(var(--white), var(--black));
    --foreground: light-dark(var(--black), var(--white));
    --grey: oklch(0.564 0 0);
    --grey-background: light-dark(oklch(0.965 0 0), oklch(0.171 0 0));
    --grey-foreground: light-dark(oklch(0.44 0 0), oklch(0.698 0 0));
    --red: oklch(0.593 0.24 25);
    --red-lighter: oklch(0.617 0.25 25);
    --red-darker: oklch(0.568 0.23 25);
    --red-intense: light-dark(var(--red-darker), var(--red-lighter));
    --red-muted: light-dark(var(--red-lighter), var(--red-darker));
    --red-background: light-dark(oklch(0.968 0.015 25), oklch(0.182 0.073 25));
    --red-foreground: light-dark(oklch(0.462 0.187 25), oklch(0.717 0.176 25));
    --yellow: oklch(0.561 0.119 105);
    --yellow-lighter: oklch(0.584 0.123 105);
    --yellow-darker: oklch(0.539 0.114 105);
    --yellow-intense: light-dark(var(--yellow-darker), var(--yellow-lighter));
    --yellow-muted: light-dark(var(--yellow-lighter), var(--yellow-darker));
    --yellow-background: light-dark(
        oklch(0.962 0.127 105),
        oklch(0.173 0.036 105)
    );
    --yellow-foreground: light-dark(
        oklch(0.436 0.092 105),
        oklch(0.694 0.147 105)
    );
    --green: oklch(0.547 0.172 145);
    --green-lighter: oklch(0.57 0.179 145);
    --green-darker: oklch(0.525 0.165 145);
    --green-intense: light-dark(var(--green-darker), var(--green-lighter));
    --green-muted: light-dark(var(--green-lighter), var(--green-darker));
    --green-background: light-dark(
        oklch(0.958 0.073 145),
        oklch(0.165 0.051 145)
    );
    --green-foreground: light-dark(
        oklch(0.426 0.133 145),
        oklch(0.677 0.212 145)
    );
    --cyan: oklch(0.554 0.094 195);
    --cyan-lighter: oklch(0.576 0.098 195);
    --cyan-darker: oklch(0.529 0.09 195);
    --cyan-intense: light-dark(var(--cyan-darker), var(--cyan-lighter));
    --cyan-muted: light-dark(var(--cyan-lighter), var(--cyan-darker));
    --cyan-background: light-dark(
        oklch(0.96 0.059 195),
        oklch(0.168 0.028 195)
    );
    --cyan-foreground: light-dark(
        oklch(0.431 0.073 195),
        oklch(0.682 0.116 195)
    );
    --blue: oklch(0.567 0.186 255);
    --blue-lighter: oklch(0.591 0.194 255);
    --blue-darker: oklch(0.544 0.179 255);
    --blue-intense: light-dark(var(--blue-darker), var(--blue-lighter));
    --blue-muted: light-dark(var(--blue-lighter), var(--blue-darker));
    --blue-background: light-dark(
        oklch(0.965 0.016 255),
        oklch(0.174 0.057 255)
    );
    --blue-foreground: light-dark(
        oklch(0.443 0.145 255),
        oklch(0.697 0.161 255)
    );
    --magenta: oklch(0.602 0.281 325);
    --magenta-lighter: oklch(0.627 0.293 325);
    --magenta-darker: oklch(0.577 0.269 325);
    --magenta-intense: light-dark(
        var(--magenta-darker),
        var(--magenta-lighter)
    );
    --magenta-muted: light-dark(var(--magenta-lighter), var(--magenta-darker));
    --magenta-background: light-dark(
        oklch(0.969 0.026 325),
        oklch(0.184 0.086 325)
    );
    --magenta-foreground: light-dark(
        oklch(0.469 0.219 325),
        oklch(0.729 0.261 325)
    );
    --cerulean: oklch(0.558 0.111 230);
    --cerulean-lighter: oklch(0.583 0.116 230);
    --cerulean-darker: oklch(0.534 0.106 230);
    --cerulean-intense: light-dark(
        var(--cerulean-darker),
        var(--cerulean-lighter)
    );
    --cerulean-muted: light-dark(
        var(--cerulean-lighter),
        var(--cerulean-darker)
    );
    --cerulean-background: light-dark(
        oklch(0.965 0.02 230),
        oklch(0.169 0.033 230)
    );
    --cerulean-foreground: light-dark(
        oklch(0.436 0.086 230),
        oklch(0.69 0.137 230)
    );
    --accent: var(--cerulean);
    --accent-intense: var(--cerulean-intense);
    --accent-muted: var(--cerulean-muted);
    --accent-background: var(--cerulean-background);
    --accent-foreground: var(--cerulean-foreground);
}
* {
    box-sizing: border-box;
    overscroll-behavior: none;
    margin: 0;
    padding: 0;
}
.contents {
    display: contents;
}
body {
    font-size: 0.8125rem;
    color: var(--foreground);
    background-color: var(--background);
    display: flex;
    flex-direction: column;
    height: 100dvh;
    width: 100dvw;
}
header {
    background-color: var(--accent-background);
    flex-shrink: 0;
    padding: 0.5rem;
}
main.app {
    flex-grow: 1;
    overflow: auto;
}
main.standalone {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}
article {
    width: 100%;
    max-width: 900px;
    margin: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
a {
    color: var(--accent-foreground);
    &:hover {
        color: var(--accent);
    }
}
nav {
    display: flex;
    justify-content: center;
    align-items: center;
}
nav a {
    display: inline-block;
    font-weight: 700;
    margin: 0 0.5rem;
    color: var(--accent-foreground);
    &:hover {
        color: var(--accent);
    }
}
nav a:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
}
nav a:not(:first-child) {
    padding: 0.5rem 1rem;
}
nav a img {
    width: 2rem;
    height: 2rem;
}
h1 {
    font-family: "JetBrains Mono", monospace;
    font-weight: 900;
    font-size: 2.25rem;
    color: var(--accent);
}
h2 {
    font-weight: 800;
    font-size: 1.5rem;
}
button,
.button {
    border: none;
    border-radius: 0.5rem;
    background-color: var(--accent);
    font-weight: 600;
    padding: 0.5rem 1rem;

    &:hover {
        background-color: var(--accent-muted);
    }
}
.red-bg {
    background-color: var(--red-background);

    &:hover {
        background-color: var(--red);
    }
}
.blue-bg {
    background-color: var(--blue-background);

    &:hover {
        background-color: var(--blue);
    }
}
form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-weight: 600;
    font-size: 0.75rem;
}
input {
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem;
    font-family: inherit;
    font-feature-settings: inherit;
    font-size: inherit;
    color: var(--foreground);
    background-color: var(--grey-background);

    &::placeholder {
        color: var(--grey);
    }
}
a {
    text-decoration: none;
    font-weight: 700;
}
p {
    line-height: 1.5;
}
p.error {
    color: var(--red);
}
p.warning {
    color: var(--yellow);
}
p.muted {
    color: var(--grey-foreground);
}
div.flex-columns {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
.center-fill {
    width: 100%;
    text-align: center;
}
table {
    width: fit-content;
    border-spacing: 0;
    background-color: var(--background);
    border-radius: 0.5rem;
    overflow: clip;
}
th,
td {
    border: none;
    padding: 0.5rem 1rem;
    text-align: left;
    white-space: nowrap;
}
tbody tr:nth-child(odd) {
    background-color: var(--grey-background);
}
tbody tr:nth-child(even) {
    background-color: var(--accent-background);
}
thead th {
    background-color: var(--accent);
    position: sticky;
    top: 0;
}
code {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.75rem;
}