:root {
    color-scheme: light dark;
    font-family: system-ui, sans-serif;
    color: #172033;
    background: #f5f7fb;
}

body {
    margin: 0;
}

main {
    box-sizing: border-box;
    max-width: 54rem;
    min-height: calc(100vh - 4rem);
    margin: 2rem auto;
    padding: 2rem;
    border: 1px solid #d7dce5;
    border-radius: .75rem;
    background: white;
    box-shadow: 0 .25rem 1.5rem rgb(20 33 61 / 8%);
}

code {
    padding: .15rem .3rem;
    overflow-wrap: anywhere;
    background: #eef1f6;
}

dl {
    display: grid;
    grid-template-columns: minmax(10rem, 15rem) 1fr;
    gap: .5rem 1rem;
}

dt {
    font-weight: 650;
}

dd {
    margin: 0;
    overflow-wrap: anywhere;
}

button {
    padding: .55rem 1rem;
}

.progress,
.error {
    margin: 1.5rem 0;
    padding: 1rem;
    border-radius: .5rem;
    background: #eef4ff;
}

.error {
    color: #8b1d26;
    background: #fff0f1;
}

.spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: .2rem solid #afbdd5;
    border-top-color: #2458b8;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

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

    main {
        border-color: #364057;
        background: #192132;
    }

    code {
        background: #283248;
    }
}