:root {
    --gray1: oklch(1 0 0);
    --gray2: oklch(0.9 0 0);
    --gray3: oklch(0.74 0 0);
    --gray4: oklch(0.67 0 0);
    --gray5: oklch(0.6058 0 0);
    --gray6: oklch(0.45 0 0);
    --gray7: oklch(0.3058 0 0);
    --gray8: oklch(0.2 0 0);
    --gray9: oklch(0.11 0 0);

    --red1: oklch(0.98 0.015 19);
    --red2: oklch(0.9 0.1036 19);
    --red3: oklch(0.74 0.14 19);
    --red4: oklch(0.67 0.18 19);
    --red5: oklch(0.6058 0.2 19);
    --red6: oklch(0.45 0.2 19);
    --red7: oklch(0.3058 0.2 19);
    --red8: oklch(0.2 0.1 19);
    --red9: oklch(0.11 0.028 19);

    --green1: oklch(0.98 0.015 138);
    --green2: oklch(0.9 0.1036 138);
    --green3: oklch(0.74 0.14 138);
    --green4: oklch(0.67 0.18 138);
    --green5: oklch(0.6058 0.2 138);
    --green6: oklch(0.45 0.2 138);
    --green7: oklch(0.3058 0.2 138);
    --green8: oklch(0.2 0.1 138);
    --green9: oklch(0.11 0.028 138);

    --blue1: oklch(0.98 0.015 230);
    --blue2: oklch(0.9 0.05 230);
    --blue3: oklch(0.74 0.14 230);
    --blue4: oklch(0.67 0.18 230);
    --blue5: oklch(0.6058 0.2 230);
    --blue6: oklch(0.45 0.2 230);
    --blue7: oklch(0.3058 0.2 230);
    --blue8: oklch(0.2 0.1 230);
    --blue9: oklch(0.11 0.028 230);

    --yellow1: oklch(0.98 0.02 90);
    --yellow2: oklch(0.94 0.08 90);
    --yellow3: oklch(0.88 0.14 90);
    --yellow4: oklch(0.82 0.18 90);
    --yellow5: oklch(0.76 0.16 90);

    --border: black;
    --border-w: 2px;
    --shadow: #000000;
    --border-radius: 0px;

    --background: var(--gray1);
    --surface: #fcfcfc;
    --surface-1: #ffffff;

    --text: oklch(0 0 0);
    --link: oklch(0.47 0.15 254);
    --link-visited: oklch(0.47 0.15 300);

    --box-shadow-3: 4px 4px 0 0 var(--shadow);
    --box-shadow-2: 3px 3px 0 0 var(--shadow);
    --box-shadow-1: 1px 1px 0 0 var(--shadow);
    --box-shadow-0: 0px 0px 0 0 var(--shadow);

    --alert-info-bg: var(--blue2);
    --alert-info-fg: var(--blue9);
    --alert-success-bg: var(--green2);
    --alert-success-fg: var(--green9);
    --alert-warning-bg: var(--yellow2);
    --alert-warning-fg: var(--gray9);
    --alert-danger-bg: var(--red2);
    --alert-danger-fg: var(--red9);

    --badge-info-bg: var(--blue2);
    --badge-info-fg: var(--blue8);
    --badge-success-bg: var(--green2);
    --badge-success-fg: var(--green8);
    --badge-warning-bg: var(--yellow2);
    --badge-warning-fg: var(--gray9);
    --badge-danger-bg: var(--red2);
    --badge-danger-fg: var(--red8);

    --card-blue-bg: var(--blue3);
    --card-blue-fg: var(--gray1);
    --card-red-bg: var(--red3);
    --card-red-fg: var(--gray1);
    --card-green-bg: var(--green3);
    --card-green-fg: var(--gray1);

    --text-muted: var(--gray5);

    --btn-soft-blue-bg: var(--blue2);
    --btn-soft-blue-fg: var(--blue8);
    --btn-soft-red-bg: var(--red2);
    --btn-soft-red-fg: var(--red8);
    --btn-soft-green-bg: var(--green2);
    --btn-soft-green-fg: var(--green8);
    --btn-soft-yellow-bg: var(--yellow2);
    --btn-soft-yellow-fg: var(--gray9);

    --box-accent-bg: var(--blue2);
    --box-accent-fg: var(--text);
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: oklch(0.2 0.05 259);
        --surface: oklch(0.28 0.07 259);
        --surface-1: oklch(0.35 0.08 259);

        --text: oklch(0.95 0.01 259);
        --border: black;
        --shadow: #000000;

        --link: oklch(0.78 0.15 259);
        --link-visited: oklch(0.73 0.12 310);

        --alert-info-bg: oklch(0.35 0.12 259);
        --alert-info-fg: oklch(0.9 0.05 259);
        --alert-success-bg: oklch(0.35 0.12 155);
        --alert-success-fg: oklch(0.9 0.05 155);
        --alert-warning-bg: oklch(0.38 0.1 80);
        --alert-warning-fg: oklch(0.92 0.08 80);
        --alert-danger-bg: oklch(0.33 0.12 25);
        --alert-danger-fg: oklch(0.9 0.06 25);

        --badge-info-bg: oklch(0.4 0.14 259);
        --badge-info-fg: oklch(0.95 0.02 259);
        --badge-success-bg: oklch(0.4 0.14 155);
        --badge-success-fg: oklch(0.95 0.02 155);
        --badge-warning-bg: oklch(0.45 0.12 80);
        --badge-warning-fg: oklch(0.95 0.04 80);
        --badge-danger-bg: oklch(0.4 0.14 25);
        --badge-danger-fg: oklch(0.95 0.02 25);

        --card-blue-bg: oklch(0.45 0.15 259);
        --card-blue-fg: oklch(0.95 0.01 259);
        --card-red-bg: oklch(0.45 0.15 25);
        --card-red-fg: oklch(0.95 0.01 25);
        --card-green-bg: oklch(0.45 0.15 155);
        --card-green-fg: oklch(0.95 0.01 155);

        --text-muted: oklch(0.65 0.04 259);

        --btn-soft-blue-bg: oklch(0.38 0.1 259);
        --btn-soft-blue-fg: oklch(0.9 0.04 259);
        --btn-soft-red-bg: oklch(0.38 0.1 25);
        --btn-soft-red-fg: oklch(0.9 0.04 25);
        --btn-soft-green-bg: oklch(0.38 0.1 155);
        --btn-soft-green-fg: oklch(0.9 0.04 155);
        --btn-soft-yellow-bg: oklch(0.38 0.1 80);
        --btn-soft-yellow-fg: oklch(0.9 0.04 80);

        --box-accent-bg: oklch(0.3 0.09 259);
        --box-accent-fg: var(--text);
    }
}

* {
    font-family: "Source Sans 3", sans-serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

code, pre {
    font-family: "Iosevka Web", monospace;
}

/* Page layout */

html {
    background: var(--background);
    line-height: 1.5;
}

body {
    color: var(--text);
    margin: 0 auto;
    max-width: 720px;
    padding: 32px 16px 64px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Sections */

section {
    margin-top: 32px;
}

section > h2 {
    font-size: 1.4rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: var(--border-w) solid var(--border);
    padding-bottom: 4px;
    margin-bottom: 16px;
}

/* Typography */

h1 {
    font-weight: 900;
    font-size: 2.5rem;
    line-height: 1.1;
}

h2 {
    font-weight: 800;
    font-size: 1.6rem;
}

h3 {
    font-weight: 700;
    font-size: 1.3rem;
}

h4 {
    font-weight: 700;
    font-size: 1.1rem;
}

h5 {
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

h6 {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

blockquote {
    border-left: 4px solid var(--border);
    padding: 8px 16px;
    background: var(--surface);
    font-style: italic;
}

pre {
    background: var(--gray9);
    color: var(--gray1);
    padding: 12px 16px;
    border: var(--border-w) solid var(--border);
    box-shadow: var(--box-shadow-2);
    overflow-x: auto;
    font-size: 0.9rem;
    line-height: 1.4;
}

code {
    background: var(--surface);
    border: 1px solid var(--gray3);
    padding: 1px 5px;
    font-size: 0.9em;
}

pre code {
    background: none;
    border: none;
    padding: 0;
}

mark {
    background: var(--yellow3);
    padding: 0 4px;
    border: 1px solid var(--border);
}

hr {
    border: none;
    border-top: var(--border-w) solid var(--border);
    margin: 16px 0;
}

/* Lists */

ul, ol {
    padding-left: 24px;
}

ul {
    list-style: square;
}

li {
    margin-bottom: 2px;
}

/* Tables */

table {
    width: 100%;
    border-collapse: collapse;
    border: var(--border-w) solid var(--border);
    box-shadow: var(--box-shadow-2);
}

th {
    background: var(--gray9);
    color: var(--gray1);
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

th, td {
    padding: 8px 12px;
    border: 1px solid var(--border);
}

tr:nth-child(even) {
    background: var(--surface);
}

/* Links */

a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    color: var(--link);

    &:hover {
        background: var(--link);
        color: var(--surface-1);
        text-decoration: none;
    }
    &:visited {
        color: var(--link-visited);
        &:hover {
            background: var(--link-visited);
            color: var(--surface-1);
        }
    }
}

/* Form elements */

input[type=""],
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    padding: 6px 10px;
    border: var(--border-w) solid var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-2);
    font-size: 1rem;
    color: var(--text);
    background: var(--surface-1);
}

select {
    cursor: pointer;
}

textarea {
    resize: vertical;
}

button,
a[type="button"] {
    padding: 6px 16px;
    color: var(--text);
    background: var(--surface-1);
    border: var(--border-w) solid var(--border);
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;

    margin: 2px;
    transform: translate(-2px, -2px);
    box-shadow: var(--box-shadow-3);
    transition: transform 0.05s, box-shadow 0.05s;
    &:hover {
        transform: translate(-1px, -1px);
        box-shadow: var(--box-shadow-1);
    }
    &:active {
        transform: translate(0, 0);
        box-shadow: var(--box-shadow-0);
    }
}

button.primary {
    background: var(--blue5);
    color: white;
    border-color: var(--border);
}

button.danger {
    background: var(--red5);
    color: white;
    border-color: var(--border);
}

button.success {
    background: var(--green5);
    color: white;
    border-color: var(--border);
}

button.soft-blue {
    background: var(--btn-soft-blue-bg);
    color: var(--btn-soft-blue-fg);
    border-color: var(--border);
}

button.soft-red {
    background: var(--btn-soft-red-bg);
    color: var(--btn-soft-red-fg);
    border-color: var(--border);
}

button.soft-green {
    background: var(--btn-soft-green-bg);
    color: var(--btn-soft-green-fg);
    border-color: var(--border);
}

button.soft-yellow {
    background: var(--btn-soft-yellow-bg);
    color: var(--btn-soft-yellow-fg);
    border-color: var(--border);
}

label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    span {
        font-size: 14px;
        font-weight: 600;
    }

    &:has([type="radio"]),
    &:has([type="checkbox"]) {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        span {
            font-weight: 400;
        }
    }
}

fieldset {
    background: var(--surface);
    border: var(--border-w) solid var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-2);
    padding: 12px;

    legend {
        background: var(--surface-1);
        padding: 2px 8px;
        border: var(--border-w) solid var(--border);
        border-radius: var(--border-radius);
        font-weight: 600;
        font-size: 0.9rem;
    }

    > label:not(:last-of-type) {
        margin-bottom: 6px;
    }
}

input[type="checkbox"] {
    position: relative;
    appearance: none;
    height: 20px;
    width: 20px;
    margin: 2px;
    border: var(--border-w) solid var(--border);
    background: var(--surface-1);
    cursor: pointer;

    transform: translate(0, 0);
    box-shadow: var(--box-shadow-1);
    &:active {
        transform: translate(1px, 1px);
        box-shadow: var(--box-shadow-0);
    }

    &:checked {
        background: var(--blue5);
        border-color: var(--border);
    }
    &:checked::before {
        --checkmark: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F><svg width="20px" height="20px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="M 404.17071,106.90116 457.57588,148.97794 227.77184,417.6221 80.503045,289.77337 124.19817,234.74988 218.0618,320.5218 Z" id="path1" style="stroke-width:1.61834" /></svg>');
        position: absolute;
        content: " ";
        background-image: var(--checkmark);
        width: 20px;
        height: 20px;
        top: -2px;
        left: -2px;
    }
}

input[type="radio"] {
    position: relative;
    appearance: none;
    height: 20px;
    width: 20px;
    margin: 2px;
    border: var(--border-w) solid var(--border);
    border-radius: 50%;
    background: var(--surface-1);
    cursor: pointer;

    transform: translate(0, 0);
    box-shadow: var(--box-shadow-1);
    &:active {
        transform: translate(1px, 1px);
        box-shadow: var(--box-shadow-0);
    }

    &:checked {
        background: var(--blue5);
        border-color: var(--border);
    }
    &:checked::before {
        --dot: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F><svg width="20px" height="20px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle fill="white" cx="50" cy="50" r="15" /></svg>');
        position: absolute;
        content: " ";
        background-image: var(--dot);
        width: 20px;
        height: 20px;
        top: -2px;
        left: -2px;
    }
}

input[type="range"] {
    margin: 8px 1px 8px 0;
    height: 10px;
    border: var(--border-w) solid var(--border);
    background: var(--surface-1);
    box-shadow: var(--box-shadow-1);

    &::-webkit-slider-runnable-track {
        background: var(--blue5);
    }
    &::-moz-range-progress {
        background: var(--blue5);
        margin: 0;
        padding: 0;
        height: 6px;
    }

    &::-moz-range-thumb {
        background: var(--surface-1);
        border: var(--border-w) solid var(--border);
        border-radius: 0;
        height: 18px;
        width: 10px;
    }

    &::-webkit-slider-thumb {
        background: var(--surface-1);
        border: var(--border-w) solid var(--border);
        border-radius: 0;
        height: 18px;
        width: 10px;
    }
}

/* Progress */

progress {
    appearance: none;
    height: 16px;
    border: var(--border-w) solid var(--border);
    box-shadow: var(--box-shadow-1);
    background: var(--surface-1);
}

progress::-moz-progress-bar {
    background: var(--blue5);
}

progress::-webkit-progress-bar {
    background: var(--surface-1);
}

progress::-webkit-progress-value {
    background: var(--blue5);
}

/* Components */

.box {
    padding: 12px;
    border: var(--border-w) solid var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-3);
    background: var(--surface);
}

.card {
    border: var(--border-w) solid var(--border);
    box-shadow: var(--box-shadow-3);
    background: var(--surface);
    overflow: hidden;
}

.card-header {
    padding: 12px 16px;
    border-bottom: var(--border-w) solid var(--border);
    font-weight: 700;
}

.card-body {
    padding: 16px;
}

.badge {
    display: inline-block;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: var(--border-w) solid var(--border);
    box-shadow: var(--box-shadow-1);
}

.badge-info { background: var(--badge-info-bg); color: var(--badge-info-fg); }
.badge-success { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.badge-warning { background: var(--badge-warning-bg); color: var(--badge-warning-fg); }
.badge-danger { background: var(--badge-danger-bg); color: var(--badge-danger-fg); }

.card-blue { background: var(--card-blue-bg); color: var(--card-blue-fg); }
.card-red { background: var(--card-red-bg); color: var(--card-red-fg); }
.card-green { background: var(--card-green-bg); color: var(--card-green-fg); }

.alert {
    padding: 12px 16px;
    border: var(--border-w) solid var(--border);
    box-shadow: var(--box-shadow-2);
    font-weight: 500;
}

.alert-info { background: var(--alert-info-bg); color: var(--alert-info-fg); }
.alert-success { background: var(--alert-success-bg); color: var(--alert-success-fg); }
.alert-warning { background: var(--alert-warning-bg); color: var(--alert-warning-fg); }
.alert-danger { background: var(--alert-danger-bg); color: var(--alert-danger-fg); }

.tag {
    display: inline-block;
    padding: 1px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid var(--border);
    background: var(--surface-1);
}

.demo {
    margin: 16px 0;
    display: flex;
    justify-content: center;
}

.text-muted {
    color: var(--text-muted);
}

.box-accent {
    background: var(--box-accent-bg);
    color: var(--box-accent-fg);
}

footer {
    margin-top: 48px;
    padding-top: 12px;
    border-top: var(--border-w) solid var(--border);
    font-size: 0.85rem;
    color: var(--gray5);
}

/* Utility: layout */

.row {
    display: flex;
    flex-direction: row;
}
.col {
    display: flex;
    flex-direction: column;
}
.wrap {
    flex-wrap: wrap;
}
.items-center {
    align-items: center;
}

.g1 { gap: 2px; }
.g2 { gap: 4px; }
.g3 { gap: 6px; }
.g4 { gap: 8px; }
.g5 { gap: 12px; }
.g6 { gap: 16px; }

.m1 { margin: 2px; }
.m2 { margin: 4px; }
.m3 { margin: 6px; }
.m4 { margin: 8px; }

.p1 { padding: 2px; }
.p2 { padding: 4px; }
.p3 { padding: 6px; }
.p4 { padding: 8px; }
.p5 { padding: 10px; }
.p6 { padding: 16px; }

.justify-center { justify-content: center; }
.justify-start { justify-content: start; }
.justify-end { justify-content: end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.w-full { width: 100%; }
.flex-1 { flex: 1; }

/* Utility: colors */

.fg-gray1 { color: var(--gray1); }
.fg-gray2 { color: var(--gray2); }
.fg-gray3 { color: var(--gray3); }
.fg-gray4 { color: var(--gray4); }
.fg-gray5 { color: var(--gray5); }
.fg-gray6 { color: var(--gray6); }
.fg-gray7 { color: var(--gray7); }
.fg-gray8 { color: var(--gray8); }
.fg-gray9 { color: var(--gray9); }

.bg-gray1 { background: var(--gray1); }
.bg-gray2 { background: var(--gray2); }
.bg-gray3 { background: var(--gray3); }
.bg-gray4 { background: var(--gray4); }
.bg-gray5 { background: var(--gray5); }
.bg-gray6 { background: var(--gray6); }
.bg-gray7 { background: var(--gray7); }
.bg-gray8 { background: var(--gray8); }
.bg-gray9 { background: var(--gray9); }

.fg-red1 { color: var(--red1); }
.fg-red2 { color: var(--red2); }
.fg-red3 { color: var(--red3); }
.fg-red4 { color: var(--red4); }
.fg-red5 { color: var(--red5); }
.fg-red6 { color: var(--red6); }
.fg-red7 { color: var(--red7); }
.fg-red8 { color: var(--red8); }
.fg-red9 { color: var(--red9); }

.bg-red1 { background: var(--red1); }
.bg-red2 { background: var(--red2); }
.bg-red3 { background: var(--red3); }
.bg-red4 { background: var(--red4); }
.bg-red5 { background: var(--red5); }
.bg-red6 { background: var(--red6); }
.bg-red7 { background: var(--red7); }
.bg-red8 { background: var(--red8); }
.bg-red9 { background: var(--red9); }

.fg-green1 { color: var(--green1); }
.fg-green2 { color: var(--green2); }
.fg-green3 { color: var(--green3); }
.fg-green4 { color: var(--green4); }
.fg-green5 { color: var(--green5); }
.fg-green6 { color: var(--green6); }
.fg-green7 { color: var(--green7); }
.fg-green8 { color: var(--green8); }
.fg-green9 { color: var(--green9); }

.bg-green1 { background: var(--green1); }
.bg-green2 { background: var(--green2); }
.bg-green3 { background: var(--green3); }
.bg-green4 { background: var(--green4); }
.bg-green5 { background: var(--green5); }
.bg-green6 { background: var(--green6); }
.bg-green7 { background: var(--green7); }
.bg-green8 { background: var(--green8); }
.bg-green9 { background: var(--green9); }

.fg-blue1 { color: var(--blue1); }
.fg-blue2 { color: var(--blue2); }
.fg-blue3 { color: var(--blue3); }
.fg-blue4 { color: var(--blue4); }
.fg-blue5 { color: var(--blue5); }
.fg-blue6 { color: var(--blue6); }
.fg-blue7 { color: var(--blue7); }
.fg-blue8 { color: var(--blue8); }
.fg-blue9 { color: var(--blue9); }

.bg-blue1 { background: var(--blue1); }
.bg-blue2 { background: var(--blue2); }
.bg-blue3 { background: var(--blue3); }
.bg-blue4 { background: var(--blue4); }
.bg-blue5 { background: var(--blue5); }
.bg-blue6 { background: var(--blue6); }
.bg-blue7 { background: var(--blue7); }
.bg-blue8 { background: var(--blue8); }
.bg-blue9 { background: var(--blue9); }

.bg-yellow1 { background: var(--yellow1); }
.bg-yellow2 { background: var(--yellow2); }
.bg-yellow3 { background: var(--yellow3); }
.bg-yellow4 { background: var(--yellow4); }
.bg-yellow5 { background: var(--yellow5); }