:root {
    color-scheme: light dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #202124;
    background: #f7f7f5;
    font-synthesis: none;
}

body {
    margin: 0;
}

main {
    width: min(100% - 2rem, 58rem);
    margin: 0 auto;
    padding: 4rem 0 6rem;
}

header {
    max-width: 46rem;
    margin-bottom: 4rem;
}

.eyebrow {
    margin: 0 0 0.75rem;
    color: #5d625f;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

h1,
h2,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 1rem;
    font-size: clamp(2.25rem, 7vw, 4.5rem);
    font-weight: 650;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

h2 {
    margin-bottom: 1rem;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.introduction {
    color: #4e5350;
    font-size: 1.08rem;
    line-height: 1.7;
}

a {
    color: inherit;
    text-decoration-color: #8a8f8c;
    text-underline-offset: 0.2em;
}

a:hover {
    color: #000;
}

section {
    padding: 1.5rem 0 2.25rem;
    border-top: 1px solid #caccc9;
}

.section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

button {
    padding: 0;
    border: 0;
    color: #315d4a;
    background: transparent;
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}

button:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid #315d4a;
    outline-offset: 4px;
}

button:disabled {
    color: #777;
    cursor: wait;
    text-decoration: none;
}

footer {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid #caccc9;
    color: #656966;
    font-size: 0.9rem;
}

dialog {
    width: min(100% - 2rem, 34rem);
    padding: 2rem;
    border: 1px solid #737773;
    border-radius: 0;
    color: inherit;
    background: #f7f7f5;
}

dialog::backdrop {
    background: rgb(10 12 11 / 72%);
}

dialog h2 {
    font-size: 1.5rem;
}

dialog p {
    line-height: 1.6;
}

.consent-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25rem;
    margin-top: 2rem;
}

.primary-action {
    padding: 0.7rem 1rem;
    color: #fff;
    background: #315d4a;
}

.status,
.supporting-text {
    color: #656966;
}

.status.error {
    color: #9b2d20;
}

.identifiers {
    display: grid;
    gap: 1.25rem;
    margin: 1.5rem 0 0;
}

.identifiers div {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 1rem;
}

dt {
    color: #656966;
}

dd {
    min-width: 0;
    margin: 0;
}

dd code {
    overflow-wrap: anywhere;
}

code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 0.9em;
}

pre {
    overflow: auto;
    max-height: 34rem;
    margin: 1.25rem 0 0;
    padding: 1.25rem;
    border-left: 3px solid #315d4a;
    background: #eeeeeb;
    line-height: 1.55;
    tab-size: 2;
}

.hljs-attr,
.hljs-keyword,
.hljs-literal {
    color: #225f69;
}

.hljs-number {
    color: #89520b;
}

.hljs-string {
    color: #42691f;
}

@media (max-width: 38rem) {
    main {
        padding-top: 2.5rem;
    }

    header {
        margin-bottom: 3rem;
    }

    .identifiers div {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

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

    .eyebrow,
    .introduction,
    .status,
    .supporting-text,
    dt {
        color: #aeb3af;
    }

    a:hover {
        color: #fff;
    }

    section {
        border-color: #3a3e3b;
    }

    footer {
        border-color: #3a3e3b;
        color: #aeb3af;
    }

    dialog {
        border-color: #777d78;
        background: #222523;
    }

    button {
        color: #8ec6aa;
    }

    .primary-action {
        color: #171918;
        background: #8ec6aa;
    }

    pre {
        border-color: #8ec6aa;
        background: #222523;
    }

    .hljs-attr,
    .hljs-keyword,
    .hljs-literal {
        color: #82c7d1;
    }

    .hljs-number {
        color: #e0ae68;
    }

    .hljs-string {
        color: #a6c97a;
    }
}