/* ===== TamboUI Documentation Theme ===== */
/* Modern documentation styling inspired by Starlight/Docusaurus */

/* CSS Custom Properties */
:root {
    /* Brand colors (shared across light/dark) */
    --tamboui-accent-primary: #00d4ff;
    --tamboui-accent-secondary: #7c3aed;
    --tamboui-success: #10b981;
    --tamboui-warning: #f59e0b;

    /* Colors - Light Mode */
    /* A "day" variant that stays connected to the dark theme:
       keep the same purple secondary, and use a slightly deeper cyan for readability. */
    --sl-color-white: #ffffff;
    --sl-color-gray-1: #f1f5f9; /* slate-100 */
    --sl-color-gray-2: #e2e8f0; /* slate-200 */
    --sl-color-gray-3: #cbd5e1; /* slate-300 */
    --sl-color-gray-4: #64748b; /* slate-500 */
    --sl-color-gray-5: #475569; /* slate-600 */
    --sl-color-gray-6: #1e293b; /* slate-800 */
    --sl-color-black: #0f172a;  /* slate-900 */

    /* Accent */
    --sl-color-accent: #0891b2; /* cyan-600 */
    --sl-color-accent-high: #0e7490; /* cyan-700 */
    --sl-color-accent-low: rgba(8, 145, 178, 0.12);

    /* Semantic colors */
    --sl-color-bg: #f8fafc; /* slate-50 */
    --sl-color-bg-nav: rgba(248, 250, 252, 0.88);
    --sl-color-bg-sidebar: var(--sl-color-gray-1);
    --sl-color-bg-inline-code: var(--sl-color-gray-2);
    --sl-color-hairline: var(--sl-color-gray-3);
    --sl-color-hairline-light: var(--sl-color-gray-2);
    --sl-color-text: var(--sl-color-black);
    --sl-color-text-accent: var(--sl-color-accent-high);
    --sl-color-text-invert: var(--sl-color-white);

    /* Code block colors */
    --sl-color-bg-code: #0f172a; /* matches landing page code background */
    --sl-color-text-code: #e2e8f0;

    /* Layout */
    --sl-nav-height: 3.5rem;
    --sl-sidebar-width: 18rem;
    --sl-content-width: 50rem;
    --sl-nav-pad-x: 1rem;
    --sl-content-pad-x: 2rem;

    /* Typography */
    --sl-font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --sl-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, 'Cascadia Code', Menlo, Monaco, 'Courier New', monospace;

    /* Transitions */
    --sl-transition-fast: 0.15s ease;
}

/* Dark Mode */
[data-theme="dark"],
.dark {
    /* Match landing page dark palette */
    --sl-color-bg: #0a0e27;
    --sl-color-bg-nav: rgba(10, 14, 39, 0.78);
    --sl-color-bg-sidebar: #141b2d;
    --sl-color-bg-inline-code: #0f172a;
    --sl-color-hairline: #334155;
    --sl-color-hairline-light: #1e293b;
    --sl-color-text: #e2e8f0;

    /* Accent matches landing page */
    --sl-color-accent: var(--tamboui-accent-primary);
    --sl-color-accent-high: var(--tamboui-accent-primary);
    --sl-color-accent-low: rgba(0, 212, 255, 0.12);
    --sl-color-text-accent: var(--sl-color-accent-high);

    /* Slate-like grays for dark UI surfaces */
    --sl-color-gray-1: #141b2d;
    --sl-color-gray-2: #0f172a;
    --sl-color-gray-3: #1e293b;
    --sl-color-gray-4: #64748b;
    --sl-color-gray-5: #94a3b8;
    --sl-color-gray-6: #cbd5e1;
}

/* Prefer dark mode by default for terminal tool docs */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Keep in sync with [data-theme="dark"] */
        --sl-color-bg: #0a0e27;
        --sl-color-bg-nav: rgba(10, 14, 39, 0.78);
        --sl-color-bg-sidebar: #141b2d;
        --sl-color-bg-inline-code: #0f172a;
        --sl-color-hairline: #334155;
        --sl-color-hairline-light: #1e293b;
        --sl-color-text: #e2e8f0;

        --sl-color-accent: var(--tamboui-accent-primary);
        --sl-color-accent-high: var(--tamboui-accent-primary);
        --sl-color-accent-low: rgba(0, 212, 255, 0.12);
        --sl-color-text-accent: var(--sl-color-accent-high);

        --sl-color-gray-1: #141b2d;
        --sl-color-gray-2: #0f172a;
        --sl-color-gray-3: #1e293b;
        --sl-color-gray-4: #64748b;
        --sl-color-gray-5: #94a3b8;
        --sl-color-gray-6: #cbd5e1;
    }
}

/* ===== Reset & Base ===== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--sl-nav-height) + 1rem);
}

body {
    font-family: var(--sl-font-system);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--sl-color-text);
    background: var(--sl-color-bg);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* ===== Header ===== */
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--sl-nav-height);
    background: var(--sl-color-bg-nav);
    border-bottom: 1px solid var(--sl-color-hairline);
    display: flex;
    align-items: center;
    padding: 0 var(--sl-nav-pad-x);
    backdrop-filter: blur(8px);
}

#header h1 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--sl-color-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

#header h1 a {
    color: inherit;
    text-decoration: none;
}

#header h1 a:hover {
    text-decoration: none;
}

#header h1::before {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    /* Inline TamboUI gradient icon (from images/tamboui_icon_gradient.svg) */
    background: url("data:image/svg+xml,%3Csvg id='artwork' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1024 880'%3E %3Cdefs%3E %3Cstyle%3E .cls-1 { fill: url(%23linear-gradient-2); } .cls-2 { fill: url(%23linear-gradient); } .cls-3 { fill: %23fff; opacity: .35; } %3C/style%3E %3ClinearGradient id='linear-gradient' x1='37.73' y1='104.49' x2='661.7' y2='728.46' gradientUnits='userSpaceOnUse'%3E %3Cstop offset='.05' stop-color='%2381c786'/%3E %3Cstop offset='.53' stop-color='%23eee234'/%3E %3Cstop offset='1' stop-color='%23a93e88'/%3E %3C/linearGradient%3E %3ClinearGradient id='linear-gradient-2' x1='106.24' y1='35.98' x2='730.21' y2='659.95' xlink:href='%23linear-gradient'/%3E %3C/defs%3E %3Cg%3E %3Cpath class='cls-2' d='M533.65,389.62l-213.18-213.18c-13.84-13.84-36.29-13.84-50.13.02l-43.68,43.74c-13.82,13.84-13.81,36.26.02,50.09l119.34,119.34c13.84,13.84,13.84,36.27,0,50.11l-119.32,119.32c-13.84,13.84-13.84,36.27,0,50.11l43.65,43.65c13.84,13.84,36.27,13.84,50.1,0l46.91-46.89c14.43-14.43,39.1-4.2,39.1,16.2v30.23c0,19.57,15.86,35.43,35.43,35.43h322.97c19.57,0,35.43-15.86,35.43-35.43v-86.36c0-19.57-15.86-35.43-35.43-35.43h-267.43c-20.17,0-30.27-24.39-16-38.65l52.21-52.19c13.84-13.84,13.85-36.28,0-50.12Z'/%3E %3Cpath class='cls-1' d='M512,70.86c94.08,0,189.5,4.43,283.58,13.17,17.12,1.59,34.18,6.55,50.7,14.73,15.51,7.68,30.09,17.98,43.39,30.65l.02.02.09.09c13.32,12.75,24.31,26.95,32.66,42.18,8.94,16.3,14.58,33.29,16.76,50.48,9.24,72.84,13.93,146.71,13.93,219.56s-4.69,146.72-13.93,219.56c-2.18,17.19-7.82,34.18-16.76,50.48-8.35,15.23-19.34,29.42-32.66,42.18l-.04.04h-.01c-13.29,12.69-27.9,23.02-43.45,30.71-16.52,8.18-33.59,13.14-50.71,14.73-94.08,8.74-189.49,13.17-283.57,13.17s-189.5-4.43-283.58-13.17c-17.12-1.59-34.18-6.55-50.7-14.73-15.52-7.69-30.12-18-43.39-30.65h-.01s-.05-.06-.05-.06l-.04-.04c-13.32-12.75-24.31-26.95-32.66-42.18-8.94-16.3-14.58-33.29-16.76-50.48-9.24-72.84-13.93-146.71-13.93-219.56s4.69-146.72,13.93-219.56c2.18-17.19,7.82-34.18,16.76-50.48,8.34-15.22,19.32-29.39,32.67-42.19h.01s.03-.04.03-.04c13.29-12.68,27.9-23.01,43.45-30.7,16.52-8.18,33.59-13.14,50.71-14.73,94.08-8.74,189.49-13.17,283.57-13.17ZM512,10c-95.96,0-193.26,4.52-289.2,13.43-24.61,2.29-48.85,9.28-72.09,20.79-21.05,10.42-40.72,24.29-58.45,41.21l-.06.06-.06.06c-17.81,17.06-32.6,36.19-43.94,56.88-12.63,23.03-20.62,47.28-23.77,72.08-9.56,75.38-14.41,151.82-14.41,227.23s4.85,151.85,14.41,227.22c3.15,24.81,11.15,49.06,23.77,72.08,11.34,20.69,26.13,39.82,43.94,56.88l.07.06.07.06c17.73,16.92,37.4,30.78,58.45,41.21,23.24,11.51,47.48,18.5,72.07,20.79,95.96,8.91,193.26,13.43,289.22,13.43s193.26-4.52,289.2-13.43c24.6-2.29,48.85-9.28,72.09-20.79,21.05-10.42,40.72-24.29,58.45-41.21l.07-.06.07-.06c17.81-17.06,32.59-36.19,43.94-56.88,12.63-23.03,20.63-47.28,23.77-72.08,9.56-75.37,14.41-151.82,14.41-227.22s-4.85-151.85-14.41-227.22c-3.15-24.8-11.15-49.05-23.77-72.08-11.34-20.69-26.13-39.82-43.94-56.88l-.07-.06-.07-.06c-17.73-16.92-37.4-30.78-58.45-41.21-23.24-11.51-47.48-18.5-72.07-20.79-95.97-8.91-193.27-13.43-289.22-13.43h0Z'/%3E %3C/g%3E %3Cpath class='cls-3' d='M295.41,169.7c8.49,0,16.48,3.31,22.48,9.31l213.18,213.18c6.01,6.01,9.31,13.99,9.31,22.49,0,8.5-3.31,16.48-9.32,22.49l-52.21,52.19c-7.66,7.66-9.85,18.63-5.7,28.64,4.14,10.01,13.45,16.22,24.28,16.22h267.43c17.53,0,31.8,14.26,31.8,31.8v86.36c0,17.53-14.26,31.8-31.8,31.8h-322.97c-17.53,0-31.8-14.26-31.8-31.8v-30.23c0-16.64-13.58-26.59-26.71-26.59-6.95,0-13.56,2.78-18.6,7.82l-46.91,46.89c-6.01,6-13.99,9.31-22.48,9.31s-16.48-3.31-22.48-9.31l-43.65-43.65c-12.4-12.4-12.4-32.57,0-44.97l119.32-119.32c7.38-7.38,11.44-17.19,11.44-27.63,0-10.44-4.06-20.25-11.44-27.63l-119.34-119.34c-12.39-12.39-12.4-32.55-.02-44.95l43.68-43.74c6.01-6.02,14-9.33,22.5-9.33M295.41,166.06c-9.08,0-18.15,3.47-25.07,10.4l-43.68,43.74c-13.82,13.84-13.81,36.26.02,50.09l119.34,119.34c13.84,13.84,13.84,36.27,0,50.11l-119.32,119.32c-13.84,13.84-13.84,36.27,0,50.11l43.65,43.65c6.92,6.92,15.99,10.38,25.06,10.38s18.13-3.46,25.05-10.37l46.91-46.89c4.67-4.66,10.4-6.75,16.03-6.75,11.78,0,23.07,9.15,23.07,22.95v30.23c0,19.57,15.86,35.43,35.43,35.43h322.97c19.57,0,35.43-15.86,35.43-35.43v-86.36c0-19.57-15.86-35.43-35.43-35.43h-267.43c-20.17,0-30.27-24.39-16-38.65l52.21-52.19c13.84-13.84,13.85-36.28,0-50.12l-213.18-213.18c-6.92-6.92-15.99-10.38-25.06-10.38h0Z'/%3E %3Cpath class='cls-3' d='M512,13.64c95.84,0,193.04,4.51,288.89,13.41,24.14,2.25,47.95,9.12,70.79,20.43,20.72,10.26,40.09,23.91,57.56,40.58l.05.05.08.07c17.55,16.8,32.1,35.64,43.27,56,12.41,22.63,20.26,46.44,23.36,70.79,9.55,75.22,14.38,151.51,14.38,226.76s-4.84,151.54-14.39,226.77c-3.09,24.35-10.95,48.16-23.36,70.79-11.16,20.36-25.72,39.2-43.28,56.01l-.04.04-.08.07c-17.47,16.66-36.83,30.32-57.55,40.58-22.84,11.31-46.66,18.18-70.81,20.43-95.83,8.9-193.02,13.41-288.86,13.41s-193.04-4.51-288.89-13.41c-24.14-2.25-47.95-9.12-70.79-20.43-20.72-10.26-40.09-23.91-57.55-40.57l-.07-.06-.07-.07c-17.54-16.8-32.1-35.64-43.27-56-12.41-22.63-20.26-46.44-23.36-70.79-9.54-75.22-14.38-151.51-14.38-226.76s4.84-151.55,14.39-226.77c3.09-24.35,10.95-48.16,23.35-70.79,11.17-20.36,25.72-39.2,43.27-56l.12-.12h0c17.47-16.67,36.83-30.32,57.56-40.58,22.84-11.31,46.66-18.18,70.81-20.43,95.83-8.9,193.02-13.41,288.86-13.41M512,10c-95.96,0-193.26,4.52-289.2,13.43-24.61,2.29-48.85,9.28-72.09,20.79-21.05,10.42-40.72,24.29-58.45,41.21l-.06.06-.06.06c-17.81,17.06-32.6,36.19-43.94,56.88-12.63,23.03-20.62,47.28-23.77,72.08-9.56,75.38-14.41,151.82-14.41,227.23s4.85,151.85,14.41,227.22c3.15,24.81,11.15,49.06,23.77,72.08,11.34,20.69,26.13,39.82,43.94,56.88l.07.06.07.06c17.73,16.92,37.4,30.78,58.45,41.21,23.24,11.51,47.48,18.5,72.07,20.79,95.96,8.91,193.26,13.43,289.22,13.43s193.26-4.52,289.2-13.43c24.6-2.29,48.85-9.28,72.09-20.79,21.05-10.42,40.72-24.29,58.45-41.21l.07-.06.07-.06c17.81-17.06,32.59-36.19,43.94-56.88,12.63-23.03,20.63-47.28,23.77-72.08,9.56-75.37,14.41-151.82,14.41-227.22s-4.85-151.85-14.41-227.22c-3.15-24.8-11.15-49.05-23.77-72.08-11.34-20.69-26.13-39.82-43.94-56.88l-.07-.06-.07-.06c-17.73-16.92-37.4-30.78-58.45-41.21-23.24-11.51-47.48-18.5-72.07-20.79-95.97-8.91-193.27-13.43-289.22-13.43h0Z'/%3E %3Cpath class='cls-3' d='M512,70.86c94.08,0,189.5,4.43,283.58,13.17,17.12,1.59,34.18,6.55,50.7,14.73,15.51,7.68,30.09,17.98,43.39,30.65l.02.02.09.09c13.32,12.75,24.31,26.95,32.66,42.18,8.94,16.3,14.58,33.29,16.76,50.48,9.24,72.84,13.93,146.71,13.93,219.56s-4.69,146.72-13.93,219.56c-2.18,17.19-7.82,34.18-16.76,50.48-8.35,15.23-19.34,29.42-32.66,42.18l-.04.04h-.01c-13.29,12.69-27.9,23.02-43.45,30.71-16.52,8.18-33.59,13.14-50.71,14.73-94.08,8.74-189.49,13.17-283.57,13.17s-189.5-4.43-283.58-13.17c-17.12-1.59-34.18-6.55-50.7-14.73-15.52-7.69-30.12-18-43.39-30.65h-.01s-.05-.06-.05-.06l-.04-.04c-13.32-12.76-24.31-26.95-32.66-42.18-8.94-16.3-14.58-33.29-16.76-50.48-9.24-72.84-13.93-146.71-13.93-219.56s4.69-146.72,13.93-219.56c2.18-17.19,7.82-34.18,16.76-50.48,8.34-15.22,19.32-29.39,32.67-42.19h.01s.03-.04.03-.04c13.29-12.68,27.9-23.01,43.45-30.7,16.52-8.18,33.59-13.14,50.71-14.73,94.08-8.74,189.49-13.17,283.57-13.17M512,67.23c-94.2,0-189.72,4.43-283.91,13.18-17.57,1.64-35.06,6.71-51.98,15.09-15.87,7.86-30.79,18.4-44.34,31.33-13.66,13.08-24.87,27.57-33.4,43.11-9.16,16.7-14.94,34.12-17.18,51.77-9.26,72.99-13.96,147.02-13.96,220.02s4.7,147.03,13.96,220.02c2.24,17.65,8.02,35.07,17.18,51.77,8.53,15.56,19.75,30.05,33.34,43.06l2.61-2.54-2.53,2.61c13.58,12.94,28.48,23.47,44.33,31.31,16.92,8.38,34.41,13.46,51.97,15.09,94.2,8.75,189.72,13.18,283.92,13.18s189.72-4.43,283.91-13.18c17.57-1.64,35.06-6.71,51.98-15.09,15.87-7.86,30.79-18.4,44.34-31.33h0s.06-.06.06-.06c13.58-13,24.8-27.49,33.33-43.05,9.16-16.71,14.94-34.12,17.18-51.77,9.26-72.99,13.96-147.02,13.96-220.02s-4.7-147.03-13.96-220.02c-2.24-17.65-8.02-35.07-17.18-51.77-8.53-15.56-19.75-30.05-33.34-43.06l-.08-.08c-13.58-12.94-28.48-23.46-44.32-31.3-16.92-8.38-34.41-13.46-51.97-15.09-94.2-8.75-189.73-13.18-283.92-13.18h0Z'/%3E %3C/svg%3E") center / contain no-repeat;
}

#header .details {
    display: none; /* Hide version details to make room for nav */
}

/* ===== Top Navigation Bar ===== */
.top-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    position: absolute;
    left: var(--sl-sidebar-width);
    overflow-x: auto;
    scrollbar-width: none;
}

.top-nav::-webkit-scrollbar {
    display: none;
}

.top-nav a {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--sl-color-gray-5);
    text-decoration: none;
    border-radius: 0.375rem;
    white-space: nowrap;
    transition: all var(--sl-transition-fast);
}

.top-nav a:hover {
    color: var(--sl-color-text-accent);
    background: var(--sl-color-accent-low);
    text-decoration: none;
}

.top-nav a.current {
    color: var(--sl-color-text-accent);
    background: var(--sl-color-accent-low);
}

/* Mobile: hamburger menu for top nav */
@media (max-width: 72rem) {
    .top-nav {
        display: none;
    }

    .mobile-nav-toggle {
        display: flex;
    }

    .mobile-nav {
        display: block;
    }
}

@media (min-width: 72.01rem) {
    .mobile-nav-toggle {
        display: none;
    }

    .mobile-nav {
        display: none;
    }
}

/* Mobile navigation drawer */
.mobile-nav-toggle {
    background: transparent;
    border: 1px solid var(--sl-color-hairline);
    border-radius: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    margin-left: auto;
    margin-right: 0.5rem;
    align-items: center;
    justify-content: center;
    color: var(--sl-color-text);
    transition: all var(--sl-transition-fast);
}

.mobile-nav-toggle:hover {
    background: var(--sl-color-accent-low);
    border-color: var(--sl-color-accent);
}

.mobile-nav-toggle svg {
    width: 20px;
    height: 20px;
}

.mobile-nav {
    position: fixed;
    top: var(--sl-nav-height);
    left: 0;
    right: 0;
    background: var(--sl-color-bg-nav);
    border-bottom: 1px solid var(--sl-color-hairline);
    padding: 1rem;
    z-index: 99;
    transform: translateY(-100%);
    opacity: 0;
    transition: all 0.2s ease;
    pointer-events: none;
}

.mobile-nav.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.mobile-nav a {
    display: block;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--sl-color-gray-5);
    text-decoration: none;
    border-radius: 0.5rem;
    border-left: 3px solid transparent;
    transition: all var(--sl-transition-fast);
}

.mobile-nav a:hover {
    color: var(--sl-color-text-accent);
    background: var(--sl-color-accent-low);
}

.mobile-nav a.current {
    color: var(--sl-color-text-accent);
    background: var(--sl-color-accent-low);
    border-left-color: var(--sl-color-accent);
}

/* ===== Layout ===== */
body.toc2 {
    padding-top: var(--sl-nav-height);
}

body.toc2.toc-left #toc {
    position: fixed;
    top: var(--sl-nav-height);
    left: 0;
    width: var(--sl-sidebar-width);
    height: calc(100vh - var(--sl-nav-height));
    overflow-y: auto;
    background: var(--sl-color-bg-sidebar);
    border-right: 1px solid var(--sl-color-hairline);
    padding: 1.5rem 1rem;
    z-index: 50;
}

body.toc2.toc-left #content {
    margin-left: var(--sl-sidebar-width);
    max-width: calc(var(--sl-content-width) + 2 * var(--sl-content-pad-x));
    padding: 2rem var(--sl-content-pad-x);
}

/* ===== Table of Contents ===== */
#toc #toctitle {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sl-color-gray-4);
    margin: 0 0 1rem 0;
    padding: 0 0.5rem;
}

#toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#toc > ul > li {
    margin-bottom: 0.25rem;
}

#toc a {
    display: block;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    color: var(--sl-color-text);
    text-decoration: none;
    border-radius: 0.375rem;
    transition: all var(--sl-transition-fast);
}

#toc a:hover {
    color: var(--sl-color-text-accent);
    background: var(--sl-color-accent-low);
}

#toc ul ul {
    margin-left: 0.75rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--sl-color-hairline);
}

#toc ul ul a {
    font-size: 0.8125rem;
    color: var(--sl-color-gray-4);
    padding: 0.25rem 0.75rem;
}

#toc ul ul a:hover {
    color: var(--sl-color-text-accent);
}

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    color: var(--sl-color-text);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

h1 {
    font-size: 2rem;
    margin-top: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--sl-color-hairline);
}

h2 {
    font-size: 1.5rem;
    color: var(--sl-color-text);
    padding: 0.75rem 1rem;
    margin-top: 3rem;
    margin-left: -1rem;
    margin-right: -1rem;
    background: var(--sl-color-gray-1);
    border-left: 4px solid var(--sl-color-accent);
    border-radius: 0 0.5rem 0.5rem 0;
}

h3 {
    font-size: 1.25rem;
    color: var(--sl-color-text-accent);
}

h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }

p {
    margin: 0.875rem 0;
    line-height: 1.8;
}

/* Section anchors */
h1 .anchor, h2 .anchor, h3 .anchor, h4 .anchor {
    opacity: 0;
    margin-left: 0.5rem;
    color: var(--sl-color-gray-3);
    text-decoration: none;
    transition: opacity var(--sl-transition-fast);
}

h1:hover .anchor, h2:hover .anchor, h3:hover .anchor, h4:hover .anchor {
    opacity: 1;
}

/* ===== Links ===== */
a {
    color: var(--sl-color-text-accent);
    text-decoration: none;
    transition: color var(--sl-transition-fast);
}

a:hover {
    text-decoration: underline;
}

/* ===== Code Blocks ===== */
.listingblock {
    margin: 1.5rem 0;
    position: relative;
}

.listingblock .title {
    font-family: var(--sl-font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--sl-color-gray-4);
    background: var(--sl-color-gray-2);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    border: 1px solid var(--sl-color-hairline);
    border-bottom: none;
}

.listingblock pre {
    margin: 0;
    padding: 1rem 1.25rem;
    background: var(--sl-color-bg-code);
    color: var(--sl-color-text-code);
    font-family: var(--sl-font-mono);
    font-size: 0.875rem;
    line-height: 1.7;
    overflow-x: auto;
    border-radius: 0.5rem;
    border: 1px solid var(--sl-color-hairline);
}

.listingblock .title + .content pre {
    border-radius: 0 0 0.5rem 0.5rem;
}

.listingblock pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* Inline code */
code:not([class]),
p code,
li code,
td code {
    font-family: var(--sl-font-mono);
    font-size: 0.875em;
    padding: 0.125em 0.375em;
    background: var(--sl-color-bg-inline-code);
    border-radius: 0.25rem;
    color: var(--sl-color-text);
}

/* ===== Tables ===== */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.9375rem;
    border: 1px solid var(--sl-color-hairline);
    border-radius: 0.5rem;
    overflow: hidden;
}

table th {
    background: var(--sl-color-gray-1);
    font-weight: 600;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--sl-color-hairline);
}

table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--sl-color-hairline-light);
    vertical-align: top;
}

table tr:last-child td {
    border-bottom: none;
}

table tr:hover td {
    background: var(--sl-color-accent-low);
}

/* ===== Admonitions ===== */
.admonitionblock {
    margin: 1.5rem 0;
}

.admonitionblock > table {
    border: none;
    background: transparent;
    margin: 0;
}

.admonitionblock > table tr:hover td {
    background: transparent;
}

.admonitionblock td.icon {
    width: 3rem;
    padding: 1rem;
    vertical-align: top;
    border: none;
}

.admonitionblock td.content {
    padding: 1rem 1rem 1rem 0;
    border: none;
    border-radius: 0.5rem;
}

.admonitionblock {
    background: var(--sl-color-gray-1);
    border-radius: 0.5rem;
    border-left: 4px solid;
}

.admonitionblock.note { border-color: #3b82f6; }
.admonitionblock.tip { border-color: #22c55e; }
.admonitionblock.warning { border-color: #f59e0b; }
.admonitionblock.caution { border-color: #ef4444; }
.admonitionblock.important { border-color: #8b5cf6; }

.admonitionblock .icon i {
    font-size: 1.25rem;
}

.admonitionblock.note .icon i { color: #3b82f6; }
.admonitionblock.tip .icon i { color: #22c55e; }
.admonitionblock.warning .icon i { color: #f59e0b; }
.admonitionblock.caution .icon i { color: #ef4444; }
.admonitionblock.important .icon i { color: #8b5cf6; }

/* ===== Lists ===== */
ul, ol {
    padding-left: 1.5rem;
    margin: 1rem 0;
}

li {
    margin: 0.5rem 0;
    line-height: 1.7;
}

li > p {
    margin: 0.25rem 0;
}

/* Tighter list spacing in sidebar */
#toc li {
    margin: 0.25rem 0;
}

/* Description lists */
.dlist dt {
    font-weight: 600;
    margin-top: 1rem;
    color: var(--sl-color-text);
}

.dlist dd {
    margin-left: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--sl-color-gray-5);
}

/* ===== Blockquotes ===== */
blockquote, .quoteblock {
    margin: 1.5rem 0;
    padding: 0.5rem 1.5rem;
    border-left: 3px solid var(--sl-color-accent);
    background: var(--sl-color-gray-1);
    border-radius: 0 0.5rem 0.5rem 0;
    color: var(--sl-color-gray-5);
}

/* ===== Images ===== */
.imageblock {
    margin: 1.5rem 0;
}

.imageblock img {
    max-width: 100%;
    border-radius: 0.5rem;
    border: 1px solid var(--sl-color-hairline);
}

.imageblock .title {
    font-size: 0.875rem;
    color: var(--sl-color-gray-4);
    text-align: center;
    margin-top: 0.5rem;
}

/* ===== Sidebar blocks ===== */
.sidebarblock {
    background: var(--sl-color-gray-1);
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin: 1.5rem 0;
    border: 1px solid var(--sl-color-hairline);
}

.sidebarblock > .content > .title {
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--sl-color-text);
}

/* ===== Example blocks ===== */
.exampleblock {
    border: 1px solid var(--sl-color-hairline);
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin: 1.5rem 0;
    background: var(--sl-color-bg);
}

.exampleblock > .title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sl-color-gray-4);
    margin-bottom: 0.75rem;
}

/* ===== Footer ===== */
#footer {
    margin-top: 4rem;
    padding: 2rem var(--sl-content-pad-x);
    background: var(--sl-color-bg-nav);
    border-top: 1px solid var(--sl-color-hairline);
    text-align: center;
    color: var(--sl-color-gray-4);
    font-size: 0.875rem;
}

#footer-text {
    margin: 0;
}

/* ===== Responsive ===== */
@media (max-width: 72rem) {
    body.toc2.toc-left #toc {
        display: none;
    }

    body.toc2.toc-left #content {
        margin-left: 0;
        max-width: none;
    }
}

@media (max-width: 48rem) {
    :root {
        --sl-content-pad-x: 1rem;
        --sl-nav-pad-x: 1rem;
    }

    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }

    .listingblock pre {
        font-size: 0.8125rem;
        padding: 0.875rem 1rem;
    }

    table {
        font-size: 0.875rem;
    }

    table th, table td {
        padding: 0.5rem 0.75rem;
    }
}

/* ===== Syntax Highlighting Overrides ===== */
.hljs {
    background: transparent !important;
}

/* ===== Print ===== */
@media print {
    #header, #toc, #footer {
        display: none;
    }

    body.toc2.toc-left #content {
        margin-left: 0;
        max-width: none;
    }

    .listingblock pre {
        background: #f5f5f5 !important;
        color: #333 !important;
        border: 1px solid #ddd;
    }
}

/* ===== Scrollbar styling ===== */
#toc::-webkit-scrollbar {
    width: 6px;
}

#toc::-webkit-scrollbar-track {
    background: transparent;
}

#toc::-webkit-scrollbar-thumb {
    background: var(--sl-color-gray-3);
    border-radius: 3px;
}

#toc::-webkit-scrollbar-thumb:hover {
    background: var(--sl-color-gray-4);
}

/* ===== Theme Toggle ===== */
.theme-toggle {
    background: transparent;
    border: 1px solid var(--sl-color-hairline);
    border-radius: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    margin-left: auto;
    margin-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sl-color-text);
    transition: all var(--sl-transition-fast);
}

.theme-toggle:hover {
    background: var(--sl-color-accent-low);
    border-color: var(--sl-color-accent);
    color: var(--sl-color-text-accent);
}

.theme-toggle .icon-sun {
    display: none;
}

.theme-toggle .icon-moon {
    display: block;
}

[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-sun {
        display: block;
    }
    :root:not([data-theme="light"]) .theme-toggle .icon-moon {
        display: none;
    }
}

/* ===== Page Navigation in Sidebar ===== */
.page-nav {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--sl-color-hairline);
}

.page-nav-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sl-color-gray-4);
    margin: 0 0 0.75rem 0.5rem;
}

.page-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.page-nav-list li {
    margin: 0.125rem 0;
}

.page-nav-list a {
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--sl-color-gray-5);
    text-decoration: none;
    border-radius: 0.375rem;
    border-left: 3px solid transparent;
    transition: all var(--sl-transition-fast);
}

.page-nav-list a:hover {
    color: var(--sl-color-text-accent);
    background: var(--sl-color-accent-low);
}

.page-nav-list li.current a {
    color: var(--sl-color-text-accent);
    background: var(--sl-color-accent-low);
    border-left-color: var(--sl-color-accent);
    font-weight: 600;
}

.page-nav-list li.current a:hover {
    background: var(--sl-color-accent-low);
}

/* ===== Prev/Next Navigation ===== */
.prev-next-nav {
    display: flex;
    gap: 1.5rem;
    margin: 3rem 0 2rem 0;
    padding: 0 var(--sl-content-pad-x);
    max-width: calc(var(--sl-content-width) + 2 * var(--sl-content-pad-x));
}

body.toc2.toc-left .prev-next-nav {
    margin-left: var(--sl-sidebar-width);
}

.prev-next-nav a,
.prev-next-nav .placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem;
    border: 1px solid var(--sl-color-hairline);
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all var(--sl-transition-fast);
}

.prev-next-nav a:hover {
    border-color: var(--sl-color-accent);
    background: var(--sl-color-accent-low);
}

.prev-next-nav .placeholder {
    visibility: hidden;
}

.prev-next-nav .prev {
    align-items: flex-start;
}

.prev-next-nav .next {
    align-items: flex-end;
}

.prev-next-nav .label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sl-color-gray-4);
    margin-bottom: 0.25rem;
}

.prev-next-nav .title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sl-color-text-accent);
}

@media (max-width: 72rem) {
    body.toc2.toc-left .prev-next-nav {
        margin-left: 0;
    }
}

@media (max-width: 48rem) {
    .prev-next-nav {
        flex-direction: column;
        gap: 0.75rem;
    }

    .prev-next-nav .prev,
    .prev-next-nav .next {
        align-items: flex-start;
    }
}

/* ===== Asciinema Player ===== */
.asciinema-player-container {
    margin: 1.5rem 0;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--sl-color-hairline);
    background: #1e1e2e;
}

.asciinema-player-container .ap-title {
    font-family: var(--sl-font-mono);
    font-size: 0.75rem;
    color: var(--sl-color-gray-4);
    text-align: center;
    padding: 0.5rem;
    background: var(--sl-color-gray-2);
    border-bottom: 1px solid var(--sl-color-hairline);
}

/* Ensure the player fills its container */
.asciinema-player-container .ap-player {
    width: 100%;
}

/* Style the player controls */
.asciinema-player-container .ap-control-bar {
    background: rgba(30, 30, 46, 0.9);
    border-top: 1px solid var(--sl-color-hairline);
}