:root {
    color-scheme: light dark;
    font-family: system-ui, sans-serif;
    line-height: 1.65;
    color: #202636;
    background: #f8f9fc;
}

body {
    margin: 0;
    border-top: 6px solid #415f91;
}

main {
    max-width: 46rem;
    margin: 0 auto;
    padding: 3rem 1.25rem 5rem;
}

header {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #c9cfda;
}

h1,
h2 {
    line-height: 1.25;
    letter-spacing: -0.02em;
}

h1 {
    font-size: clamp(2rem, 6vw, 3rem);
    margin: 0.5rem 0 1rem;
}

h2 {
    font-size: 1.35rem;
    margin-top: 2.5rem;
}

.app-name {
    font-weight: 650;
    color: #415f91;
}

.date {
    color: #505b6c;
}

a {
    color: #254c8a;
    text-underline-offset: 0.18em;
    overflow-wrap: anywhere;
}

a:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
}

li + li {
    margin-top: 0.75rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        color: #e1e5ee;
        background: #151923;
    }

    header {
        border-color: #454d5e;
    }

    .app-name,
    a {
        color: #aac7ff;
    }

    .date {
        color: #b6bfd0;
    }
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

th,
td {
    text-align: left;
    vertical-align: top;
    padding: 0.5rem;
    border-bottom: 1px solid currentColor;
    overflow-wrap: anywhere;
}