:root {
    --bg: #FAF8F5;
    --surface: #FFFFFF;
    --raise: #F1EDE7;
    --line: #E3DCD3;
    --text: #40372E;
    --dim: #77695D;
    --bright: #1F1812;
    --accent: #CC3D10;
}

body {
    font-size: 17px;
}

.loading body {
    visibility: hidden;
}

::selection {
    background: var(--accent);
    color: #fff;
}

.nav-link.active {
    color: var(--bright);
    border-left-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.cb pre {
    white-space: pre-wrap;
    word-break: break-all;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}

.cb.nowrap pre {
    white-space: pre;
    word-break: normal;
}

.cb pre::-webkit-scrollbar {
    height: 6px;
}

.cb pre::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 3px;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}