html {
    min-width: 20rem;
    background: var(--dc-color-canvas);
}

body {
    margin: 0;
    color: var(--dc-color-text);
    background: var(--dc-color-canvas);
    font-family: var(--dc-font-sans);
    font-size: var(--dc-text-md);
    font-weight: var(--dc-weight-regular);
    line-height: var(--dc-leading-normal);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: var(--dc-color-primary);
    text-underline-offset: 0.16em;
}

a:hover {
    color: var(--dc-color-primary-hover);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--dc-color-focus);
    outline-offset: 2px;
    box-shadow: var(--dc-focus-ring);
}

::selection {
    color: var(--dc-color-text);
    background: var(--dc-color-primary-soft);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--dc-color-border-strong) transparent;
}

*::-webkit-scrollbar {
    width: 0.625rem;
    height: 0.625rem;
}

*::-webkit-scrollbar-thumb {
    background: var(--dc-color-border-strong);
    border: 0.1875rem solid transparent;
    border-radius: var(--dc-radius-pill);
    background-clip: padding-box;
}

.dc-skip-link {
    position: fixed;
    z-index: 5000;
    top: var(--dc-space-4);
    left: var(--dc-space-4);
    padding: var(--dc-space-4) var(--dc-space-6);
    color: #ffffff;
    background: var(--dc-color-primary-hover);
    border-radius: var(--dc-radius-sm);
    transform: translateY(-160%);
    transition: transform var(--dc-duration-fast) var(--dc-ease-standard);
}

.dc-skip-link:focus {
    color: #ffffff;
    transform: translateY(0);
}

.dc-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.18em;
}

.dc-icon--sm {
    width: 1rem;
    height: 1rem;
}

.dc-icon--lg {
    width: 1.25rem;
    height: 1.25rem;
}

[hidden] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}