:root {
    --md-brand: #0284c7;
    --md-brand-2: #06b6d4;
    --md-text: #1f2937;
    --md-muted: #6b7280;
    --md-border: #e5e7eb;
    --md-bg: #ffffff;
    --md-sidebar-bg: #f8fafc;
    --md-sidebar-active-bg: #e0f2fe;
    --md-link: #0284c7;
}

.dark {
    --md-text: #e5e7eb;
    --md-muted: #9ca3af;
    --md-border: #374151;
    --md-bg: #0b1120;
    --md-sidebar-bg: #0f172a;
    --md-sidebar-active-bg: #0c4a6e;
    --md-link: #38bdf8;
}

.md-sidebar .md-brand {
    font-weight: 800;
    letter-spacing: -0.01em;
    background: linear-gradient(90deg, var(--md-brand), var(--md-brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.md-sidebar a:hover {
    background: var(--md-sidebar-active-bg, #e0f2fe);
    color: var(--md-brand);
}

.md-sidebar a[aria-current="page"] {
    background: linear-gradient(90deg, var(--md-brand), var(--md-brand-2));
    color: #fff;
    font-weight: 600;
}

.md-content a {
    color: var(--md-link);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--md-link) 35%, transparent);
}

.md-content a:hover {
    border-bottom-color: var(--md-link);
}

.md-content h1,
.md-content h2,
.md-content h3 {
    color: var(--md-text);
    scroll-margin-top: 5rem;
}

.md-content h1 {
    background: linear-gradient(90deg, var(--md-brand), var(--md-brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.md-content :not(pre) > code {
    background: color-mix(in srgb, var(--md-brand) 10%, #f3f4f6);
    color: var(--md-brand);
}

.dark .md-content :not(pre) > code {
    background: color-mix(in srgb, var(--md-brand) 20%, #1e293b);
    color: #7dd3fc;
}

.md-content pre {
    background: #0f172a;
    border: 1px solid #1e293b;
}