:root {
    --color-background-opacity: 0.1;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-note-a0: #121929;
        --color-note-a10: #132440;
        --color-note-a20: #172f55;
        --color-note-a30: #193d75;
        --color-note-a40: #1b4fa0;
        --color-note-a50: #1d61cb;
        --color-note-a60: #4387e0;
        --color-note-a70: #6eacf3;
        --color-note-a80: #98c7f8;
        --color-note-a90: #c0e0fa;

        --color-tip-a0: #152217;
        --color-tip-a10: #1a341e;
        --color-tip-a20: #214626;
        --color-tip-a30: #275e2f;
        --color-tip-a40: #307f3b;
        --color-tip-a50: #39a047;
        --color-tip-a60: #5bb564;
        --color-tip-a70: #86ca8a;
        --color-tip-a80: #b3dab4;
        --color-tip-a90: #dbe9db;

        --color-important-a0: #201b2b;
        --color-important-a10: #302743;
        --color-important-a20: #413458;
        --color-important-a30: #58437b;
        --color-important-a40: #7658a8;
        --color-important-a50: #946dd6;
        --color-important-a60: #b999e8;
        --color-important-a70: #dbc8f3;
        --color-important-a80: #f0e9f8;
        --color-important-a90: #f2ecfa;

        --color-warning-a0: #251e12;
        --color-warning-a10: #3a2d14;
        --color-warning-a20: #4d3c18;
        --color-warning-a30: #6a501a;
        --color-warning-a40: #906a1d;
        --color-warning-a50: #b68520;
        --color-warning-a60: #caa342;
        --color-warning-a70: #e0c36c;
        --color-warning-a80: #f0de9a;
        --color-warning-a90: #faf1c8;

        --color-caution-a0: #2b1616;
        --color-caution-a10: #431c1c;
        --color-caution-a20: #582624;
        --color-caution-a30: #7b2f2c;
        --color-caution-a40: #a83c36;
        --color-caution-a50: #d64841;
        --color-caution-a60: #e8736a;
        --color-caution-a70: #f3a095;
        --color-caution-a80: #f8c7bf;
        --color-caution-a90: #faece9;

        --color-default-a0: #232323;
        --color-default-a10: #363636;
        --color-default-a20: #484848;
        --color-default-a30: #626262;
        --color-default-a40: #858585;
        --color-default-a50: #a8a8a8;
        --color-default-a60: #bcbcbc;
        --color-default-a70: #d1d1d1;
        --color-default-a80: #e2e2e2;
        --color-default-a90: #f1f1f1;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --color-note-a0: #edf7ff;
        --color-note-a10: #c4e4ff;
        --color-note-a20: #9ccdff;
        --color-note-a30: #73b4ff;
        --color-note-a40: #4894f7;
        --color-note-a50: #1f6feb;
        --color-note-a60: #1052c4;
        --color-note-a70: #05389e;
        --color-note-a80: #002478;
        --color-note-a90: #001652;

        --color-tip-a0: #ebfaeb;
        --color-tip-a10: #dfeddf;
        --color-tip-a20: #b8e0b9;
        --color-tip-a30: #8cd490;
        --color-tip-a40: #63c76d;
        --color-tip-a50: #3fb950;
        --color-tip-a60: #2b943c;
        --color-tip-a70: #1a6e2b;
        --color-tip-a80: #0e471b;
        --color-tip-a90: #06210d;

        --color-important-a0: #f8f0ff;
        --color-important-a10: #f7f0ff;
        --color-important-a20: #f7f0ff;
        --color-important-a30: #e5d1ff;
        --color-important-a40: #cba8ff;
        --color-important-a50: #ab7df8;
        --color-important-a60: #845ed1;
        --color-important-a70: #6344ab;
        --color-important-a80: #452e85;
        --color-important-a90: #2f205e;

        --color-warning-a0: #fffdf0;
        --color-warning-a10: #fff6cc;
        --color-warning-a20: #f7e49e;
        --color-warning-a30: #ebcc71;
        --color-warning-a40: #deb347;
        --color-warning-a50: #d29922;
        --color-warning-a60: #ab7613;
        --color-warning-a70: #855508;
        --color-warning-a80: #5e3701;
        --color-warning-a90: #381f00;

        --color-caution-a0: #fff3f0;
        --color-caution-a10: #fff0ed;
        --color-caution-a20: #ffcdc4;
        --color-caution-a30: #ffa79c;
        --color-caution-a40: #ff7e73;
        --color-caution-a50: #f85149;
        --color-caution-a60: #d13532;
        --color-caution-a70: #ab2023;
        --color-caution-a80: #851318;
        --color-caution-a90: #5e0c13;

        --color-default-a0: #ffffff;
        --color-default-a10: #f5f5f5;
        --color-default-a20: #e8e8e8;
        --color-default-a30: #dbdbdb;
        --color-default-a40: #cfcfcf;
        --color-default-a50: #c2c2c2;
        --color-default-a60: #9c9c9c;
        --color-default-a70: #757575;
        --color-default-a80: #4f4f4f;
        --color-default-a90: #292929;
    }
}

html,
body {
    font-family: Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif;
}

html {
    display: flex;
    justify-content: center;
    color: var(--color-default-a90);
    background: var(--color-default-a0);
}

html>body {
    display: flex;
    flex-direction: column;
    max-width: 1024px;
    flex: 1 1 auto;
}

html>body a {
    color: var(--color-note-a60);
}

html>body>h1:first-child {
    position: sticky;
    top: 0;
    background: var(--color-default-a0);
}

html>body>span.owner {
    position: sticky;
    bottom: 0;
    background: var(--color-default-a0);
    text-align: right;
}

h1,
h2 {
    border-bottom: solid 0.085em var(--color-default-a10);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-default-a80)
}

a {
    text-decoration: none;
}

li::marker {
    color: var(--color-default-a50);
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol {
    margin-block-start: 0.2em;
    margin-block-end: 1em;
}

blockquote {
    margin-block-start: 0.85em;
    margin-block-end: 0.85em;
    margin-inline-start: 0em;
    margin-inline-end: 0em;
    padding-inline-start: 1em;
    border-left: solid 0.25em var(--color-default-a50);
    background-color: rgb(from var(--color-default-a50) r g b / var(--color-background-opacity));
    color: var(--color-default-a70);
}

blockquote>p {
    margin-block-start: 0.2em;
    margin-block-end: 0.5em;
}

blockquote>p>span.icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 0.85em;
    margin-bottom: 0.85em;
    column-gap: 0.5em;
}

blockquote.note {
    border-left: solid 0.25em var(--color-note-a50);
    background-color: rgb(from var(--color-note-a50) r g b / var(--color-background-opacity));
}

blockquote.note>p>span.icon {
    color: var(--color-note-a50);
}

blockquote.tip {
    border-left: solid 0.25em var(--color-tip-a50);
    background-color: rgb(from var(--color-tip-a50) r g b / var(--color-background-opacity));
}

blockquote.tip>p>span.icon {
    color: var(--color-tip-a50);
}

blockquote.important {
    border-left: solid 0.25em var(--color-important-a50);
    background-color: rgb(from var(--color-important-a50) r g b / var(--color-background-opacity));
}

blockquote.important>p>span.icon {
    color: var(--color-important-a50);
}

blockquote.warning {
    border-left: solid 0.25em var(--color-warning-a50);
    background-color: rgb(from var(--color-warning-a50) r g b / var(--color-background-opacity));
}

blockquote.warning>p>span.icon {
    color: var(--color-warning-a50);
}

blockquote.caution {
    border-left: solid 0.25em var(--color-caution-a50);
    background-color: rgb(from var(--color-caution-a50) r g b / var(--color-background-opacity));
}

blockquote.caution>p>span.icon {
    color: var(--color-caution-a50);
}

cite {
    font-size: 0.85em;
    color: var(--color-default-a70);
}

span.theme.d-f-0 {
    color: var(--color-default-a0);
}

span.theme.d-f-1 {
    color: var(--color-default-a10);
}

span.theme.d-f-2 {
    color: var(--color-default-a20);
}

span.theme.d-f-3 {
    color: var(--color-default-a30);
}

span.theme.d-f-4 {
    color: var(--color-default-a40);
}

span.theme.d-f-5 {
    color: var(--color-default-a50);
}

span.theme.d-f-6 {
    color: var(--color-default-a60);
}

span.theme.d-f-7 {
    color: var(--color-default-a70);
}

span.theme.d-f-8 {
    color: var(--color-default-a80);
}

span.theme.d-f-9 {
    color: var(--color-default-a90);
}

span.theme.d-b-0 {
    background: var(--color-default-a0);
}

span.theme.d-b-1 {
    background: var(--color-default-a10);
}

span.theme.d-b-2 {
    background: var(--color-default-a20);
}

span.theme.d-b-3 {
    background: var(--color-default-a30);
}

span.theme.d-b-4 {
    background: var(--color-default-a40);
}

span.theme.d-b-5 {
    background: var(--color-default-a50);
}

span.theme.d-b-6 {
    background: var(--color-default-a60);
}

span.theme.d-b-7 {
    background: var(--color-default-a70);
}

span.theme.d-b-8 {
    background: var(--color-default-a80);
}

span.theme.d-b-9 {
    background: var(--color-default-a90);
}

span.theme.n-f-0 {
    color: var(--color-note-a0);
}

span.theme.n-f-1 {
    color: var(--color-note-a10);
}

span.theme.n-f-2 {
    color: var(--color-note-a20);
}

span.theme.n-f-3 {
    color: var(--color-note-a30);
}

span.theme.n-f-4 {
    color: var(--color-note-a40);
}

span.theme.n-f-5 {
    color: var(--color-note-a50);
}

span.theme.n-f-6 {
    color: var(--color-note-a60);
}

span.theme.n-f-7 {
    color: var(--color-note-a70);
}

span.theme.n-f-8 {
    color: var(--color-note-a80);
}

span.theme.n-f-9 {
    color: var(--color-note-a90);
}

span.theme.n-b-0 {
    background: var(--color-note-a0);
}

span.theme.n-b-1 {
    background: var(--color-note-a10);
}

span.theme.n-b-2 {
    background: var(--color-note-a20);
}

span.theme.n-b-3 {
    background: var(--color-note-a30);
}

span.theme.n-b-4 {
    background: var(--color-note-a40);
}

span.theme.n-b-5 {
    background: var(--color-note-a50);
}

span.theme.n-b-6 {
    background: var(--color-note-a60);
}

span.theme.n-b-7 {
    background: var(--color-note-a70);
}

span.theme.n-b-8 {
    background: var(--color-note-a80);
}

span.theme.n-b-9 {
    background: var(--color-note-a90);
}

span.theme.t-f-0 {
    color: var(--color-tip-a0);
}

span.theme.t-f-1 {
    color: var(--color-tip-a10);
}

span.theme.t-f-2 {
    color: var(--color-tip-a20);
}

span.theme.t-f-3 {
    color: var(--color-tip-a30);
}

span.theme.t-f-4 {
    color: var(--color-tip-a40);
}

span.theme.t-f-5 {
    color: var(--color-tip-a50);
}

span.theme.t-f-6 {
    color: var(--color-tip-a60);
}

span.theme.t-f-7 {
    color: var(--color-tip-a70);
}

span.theme.t-f-8 {
    color: var(--color-tip-a80);
}

span.theme.t-f-9 {
    color: var(--color-tip-a90);
}

span.theme.t-b-0 {
    background: var(--color-tip-a0);
}

span.theme.t-b-1 {
    background: var(--color-tip-a10);
}

span.theme.t-b-2 {
    background: var(--color-tip-a20);
}

span.theme.t-b-3 {
    background: var(--color-tip-a30);
}

span.theme.t-b-4 {
    background: var(--color-tip-a40);
}

span.theme.t-b-5 {
    background: var(--color-tip-a50);
}

span.theme.t-b-6 {
    background: var(--color-tip-a60);
}

span.theme.t-b-7 {
    background: var(--color-tip-a70);
}

span.theme.t-b-8 {
    background: var(--color-tip-a80);
}

span.theme.t-b-9 {
    background: var(--color-tip-a90);
}

span.theme.i-f-0 {
    color: var(--color-important-a0);
}

span.theme.i-f-1 {
    color: var(--color-important-a10);
}

span.theme.i-f-2 {
    color: var(--color-important-a20);
}

span.theme.i-f-3 {
    color: var(--color-important-a30);
}

span.theme.i-f-4 {
    color: var(--color-important-a40);
}

span.theme.i-f-5 {
    color: var(--color-important-a50);
}

span.theme.i-f-6 {
    color: var(--color-important-a60);
}

span.theme.i-f-7 {
    color: var(--color-important-a70);
}

span.theme.i-f-8 {
    color: var(--color-important-a80);
}

span.theme.i-f-9 {
    color: var(--color-important-a90);
}

span.theme.i-b-0 {
    background: var(--color-important-a0);
}

span.theme.i-b-1 {
    background: var(--color-important-a10);
}

span.theme.i-b-2 {
    background: var(--color-important-a20);
}

span.theme.i-b-3 {
    background: var(--color-important-a30);
}

span.theme.i-b-4 {
    background: var(--color-important-a40);
}

span.theme.i-b-5 {
    background: var(--color-important-a50);
}

span.theme.i-b-6 {
    background: var(--color-important-a60);
}

span.theme.i-b-7 {
    background: var(--color-important-a70);
}

span.theme.i-b-8 {
    background: var(--color-important-a80);
}

span.theme.i-b-9 {
    background: var(--color-important-a90);
}

span.theme.w-f-0 {
    color: var(--color-warning-a0);
}

span.theme.w-f-1 {
    color: var(--color-warning-a10);
}

span.theme.w-f-2 {
    color: var(--color-warning-a20);
}

span.theme.w-f-3 {
    color: var(--color-warning-a30);
}

span.theme.w-f-4 {
    color: var(--color-warning-a40);
}

span.theme.w-f-5 {
    color: var(--color-warning-a50);
}

span.theme.w-f-6 {
    color: var(--color-warning-a60);
}

span.theme.w-f-7 {
    color: var(--color-warning-a70);
}

span.theme.w-f-8 {
    color: var(--color-warning-a80);
}

span.theme.w-f-9 {
    color: var(--color-warning-a90);
}

span.theme.w-b-0 {
    background: var(--color-warning-a0);
}

span.theme.w-b-1 {
    background: var(--color-warning-a10);
}

span.theme.w-b-2 {
    background: var(--color-warning-a20);
}

span.theme.w-b-3 {
    background: var(--color-warning-a30);
}

span.theme.w-b-4 {
    background: var(--color-warning-a40);
}

span.theme.w-b-5 {
    background: var(--color-warning-a50);
}

span.theme.w-b-6 {
    background: var(--color-warning-a60);
}

span.theme.w-b-7 {
    background: var(--color-warning-a70);
}

span.theme.w-b-8 {
    background: var(--color-warning-a80);
}

span.theme.w-b-9 {
    background: var(--color-warning-a90);
}

span.theme.c-f-0 {
    color: var(--color-caution-a0);
}

span.theme.c-f-1 {
    color: var(--color-caution-a10);
}

span.theme.c-f-2 {
    color: var(--color-caution-a20);
}

span.theme.c-f-3 {
    color: var(--color-caution-a30);
}

span.theme.c-f-4 {
    color: var(--color-caution-a40);
}

span.theme.c-f-5 {
    color: var(--color-caution-a50);
}

span.theme.c-f-6 {
    color: var(--color-caution-a60);
}

span.theme.c-f-7 {
    color: var(--color-caution-a70);
}

span.theme.c-f-8 {
    color: var(--color-caution-a80);
}

span.theme.c-f-9 {
    color: var(--color-caution-a90);
}

span.theme.c-b-0 {
    background: var(--color-caution-a0);
}

span.theme.c-b-1 {
    background: var(--color-caution-a10);
}

span.theme.c-b-2 {
    background: var(--color-caution-a20);
}

span.theme.c-b-3 {
    background: var(--color-caution-a30);
}

span.theme.c-b-4 {
    background: var(--color-caution-a40);
}

span.theme.c-b-5 {
    background: var(--color-caution-a50);
}

span.theme.c-b-6 {
    background: var(--color-caution-a60);
}

span.theme.c-b-7 {
    background: var(--color-caution-a70);
}

span.theme.c-b-8 {
    background: var(--color-caution-a80);
}

span.theme.c-b-9 {
    background: var(--color-caution-a90);
}