body {
    --background-color: hsl(30, 0%, 97%);
    --hover-color: hsl(30, 0%, 92%);
    --max-content-width: 720px;
    --text-color: hsl(30, 0%, 8%);

    --link-brightness: 200%;
    --link-saturation: 800%;
    --link-sepia: 100%;
    --link-hue: 180deg;

    background-color: var(--background-color);
    color: var(--text-color);
    margin-bottom: 4rem;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
body:has(darkmode-toggle[scheme="dark"]) {
    --background-color: hsl(210, 74%, 17%);
    --hover-color: hsl(210, 54%, 28%);
    --text-color: hsl(30, 0%, 98%);
    --link-brightness: 74%;
    --link-saturation: 1200%;
    background-color: var(--background-color);
}

section {
    display: grid;
    grid-template-columns:
    minmax(1rem, 1fr) [breakout-start]
    minmax(0, auto) [content-start]
    min(var(--max-content-width), calc(100% - 2rem))
    [content-end] minmax(0, auto)
    [breakout-end] minmax(1rem, 1fr);

    & > * {
        grid-column: content;
    }
    & > .breakout {
        grid-column: breakout;
        overflow-x: auto;
    }
}
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid currentColor;

    h1 {
        font-variant: small-caps;
        font-size: 2em;
        a {
            color: var(--text-color);
            filter:
                brightness(var(--link-brightness))
                sepia(var(--link-sepia))
                hue-rotate(var(--link-hue))
                saturate(var(--link-saturation));
            text-decoration: none;
        }
    }
}
form {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    grid-auto-rows: min-content;
    grid-auto-flow: dense;

    fieldset {
        min-width: 0;
        div {
            display: flex;
            gap: 0.5rem;
        }
    }
    label:has(select) {
        display: grid;
        grid-template-columns: 5em minmax(0, 1fr);
    }
}
@media (max-width: 39rem) {
    form {
        grid-template-columns: max-content;
    }
}
data-viewer {
    --cursor: pointer;
    margin-block: 1.25em;
}
pre {
    white-space: pre-wrap;
}
data-viewer.info-table {
    --cursor: auto;
    --axes-width: 1px;
    font-family: monospace;

    &::part(column-header) { text-align: left; }
    &::part(index-name) { text-align: left; }
    &::part(section-header) {
        font-variant: small-caps;
        font-size: 1.3em;
        text-decoration: underline;
    }
}
table {
    border-collapse: collapse;
    font-family: monospace;

    thead th {
        text-align: left;
    }
    tbody tr {
        border-top: 1px solid currentColor;
    }
    :where(th, td) {
        padding: .125em .25em;
    }
}