[data-cloak] { display: none !important; }

:root
{
    /* Light theme variables */
    --dark-accent: #6b996a;
    --light-accent: #6b996a;
    --dark-accent-rgb: 95, 166, 166;
    --light-accent-rgb: 91, 134, 229;
    --dark-bg: #1a1a1a;
    --light-bg: #f8f8f8;
    --dark-border: #3a3a3a;
    --light-border: #e0e0e0;
    --dark-card-bg: #2a2a2a;
    --light-card-bg: #ffffff;

    /* Dark theme variables */
    --dark-code-bg: #1e1e1e;
    --light-code-bg: #f0f0f0;
    /* Base code text colour. Light is the darker teal so it carries contrast
       on --light-code-bg; dark keeps the lighter teal for #1e1e1e. */
    --dark-code-text: #82d0c9;
    --light-code-text: #66b2ab;
    --dark-modal-bg: #3a3a3a;
    --light-modal-bg: #ffffff;
    --dark-sidebar-bg: #252525;
    --light-sidebar-bg: #f8f9fa;
    --dark-text: #f0f0f0;
    --light-text: #333333;
    --dark-text-secondary: #a0a0a0;
    --light-text-secondary: #6c757d;
}

@supports (font-variation-settings: normal)
{
    :root
    {
        font-family: InterVariable, sans-serif;
    }
}

/* Base Styles */
body
{
    font-family: -apple-system, "Work Sans", BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: .85rem;
    font-weight: 400;
    /*font-variation-settings: "wdth" 100;*/
    line-height: 1.6;
}

/* Bootstrap's reboot sets `b, strong { font-weight: bolder }`. `bolder` is
   relative to the inherited weight, so the rendered result shifts with context
   and lands wherever the font's next heavier face happens to be. Pin it to a
   real weight instead. main.css loads after bootstrap.min.css, so matching
   specificity is enough — no !important needed. */
b,
strong
{
    font-weight: 600;
}

/* Light Theme (default) */
.theme-light
{
    --card-bg: var(--light-card-bg);
    --code-bg: var(--light-code-bg);
    --code-text: var(--light-code-text);
    --modal-bg: var(--light-modal-bg);
    --sidebar-bg: var(--light-sidebar-bg);
    --accent-color: var(--light-accent);
    --bg-color: var(--light-bg);
    --border-color: var(--light-border);
    --text-color: var(--light-text);
    --accent-color-rgb: var(--light-accent-rgb);
    --text-secondary: var(--light-text-secondary);
}

/* Dark Theme */
.theme-dark
{
    --card-bg: var(--dark-card-bg);
    --code-bg: var(--dark-code-bg);
    --code-text: var(--dark-code-text);
    --modal-bg: var(--dark-modal-bg);
    --sidebar-bg: var(--dark-sidebar-bg);
    --accent-color: var(--dark-accent);
    --bg-color: var(--dark-bg);
    --border-color: var(--dark-border);
    --text-color: var(--dark-text);
    --accent-color-rgb: var(--dark-accent-rgb);
    --text-secondary: var(--dark-text-secondary);
}

.theme-light, .theme-dark
{
    background-color: var(--bg-color);
    color: var(--text-color);
}

#app {
    min-height: 100vh;
}

/* Scrollbar Styling - Dark Theme */
.theme-dark
{
    --scrollbar-track: #1a1a1a;
    --scrollbar-thumb: #4a4a4a;
    --scrollbar-thumb-hover: #5a5a5a;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); /* Firefox */
}

/* Scrollbar Styling - Light Theme */
.theme-light
{
    --scrollbar-track: #f0f0f0;
    --scrollbar-thumb: #c0c0c0;
    --scrollbar-thumb-hover: #a0a0a0;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); /* Firefox */
}

/* WebKit Scrollbars (Chrome, Safari, Edge) */
.theme-dark ::-webkit-scrollbar,
.theme-dark::-webkit-scrollbar
{
    width: 10px;
    height: 10px;
}

.theme-dark ::-webkit-scrollbar-track,
.theme-dark::-webkit-scrollbar-track
{
    background: var(--scrollbar-track);
}

.theme-dark ::-webkit-scrollbar-thumb,
.theme-dark::-webkit-scrollbar-thumb
{
    background: var(--scrollbar-thumb);
    border-radius: 5px;
}

.theme-dark ::-webkit-scrollbar-thumb:hover,
.theme-dark::-webkit-scrollbar-thumb:hover
{
    background: var(--scrollbar-thumb-hover);
}

.theme-light ::-webkit-scrollbar,
.theme-light::-webkit-scrollbar
{
    width: 10px;
    height: 10px;
}

.theme-light ::-webkit-scrollbar-track,
.theme-light::-webkit-scrollbar-track
{
    background: var(--scrollbar-track);
}

.theme-light ::-webkit-scrollbar-thumb,
.theme-light::-webkit-scrollbar-thumb
{
    background: var(--scrollbar-thumb);
    border-radius: 5px;
}

.theme-light ::-webkit-scrollbar-thumb:hover,
.theme-light::-webkit-scrollbar-thumb:hover
{
    background: var(--scrollbar-thumb-hover);
}

/* Header Styles */
header.navbar
{
    background-color: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: .2rem 0
}

.theme-light header.navbar
{
    background-color: #fff;
}

/* The hero carries the logo at full strength, so the navbar mark steps back a
   little and lets it lead. Applied unconditionally: a class binding would only
   attach after first paint, which reads as a flash on reload. */
.navbar-brand img
{
    opacity: 0.9;
}

.navbar-brand
{
    color: #6b996a !important;
}

.brand-wf {
    font-weight: 520;
}

.brand-js {
    font-weight: 700;
}

.nav-link
{
    color: var(--text-color) !important;
}

/* Sidebar Styles */
.sidebar
{
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    height: calc(100vh - 60px);
    min-height: calc(100vh - 60px);
    overflow-y: auto;
    padding-bottom: 200px;
    padding-top: 1rem;
    position: sticky;
    top: 60px;
}

.sidebar .nav-link
{
    border-radius: 0.25rem;
    color: var(--text-color);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1.3;
    margin: 0;
    padding: 0.3rem 0 0.3rem 1.2rem;
}

.sidebar .nav-link:hover
{
    background-color: rgba(128, 128, 128, 0.1);
}

.sidebar .nav-link.active
{
    background-color: rgba(128, 128, 128, 0.15);
    color: var(--accent-color) !important;
    font-weight: 500;
    position: relative;
}

.sidebar .nav-link.active::before
{
    content: '\25B8';
    left: 0.35rem;
    position: absolute;
    color: var(--accent-color);
}

.sidebar-heading
{
    color: var(--text-secondary);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sidebar-heading:first-child
{
    margin-top: 0.5rem !important;
}

* Form Controls *

/
input, select, textarea, .form-control
{
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

label
{
    margin-bottom: 0 !important;
}

.form-control
{
    padding: .25rem .5rem;
    font-size: .8rem;
}

.btn
{
    margin-bottom: .25rem;
}

.btn-info
{
    background-color: #df9058;
    border-color: #df9058;
    color: #fff;
}

.btn-info:hover
{
    background-color: #cc7a40;
    border-color: #cc7a40;
    color: #fff;
}

.btn-info:active
{
    background-color: #b75f21 !important;
    border-color: #b75f21 !important;
    color: #fff !important;
}


.btn-outline-info
{
    border-color: #df9058;
}

.btn-outline-primary
{
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.btn-outline-primary:hover
{
    background-color: var(--accent-color);
    color: white;
}



/* Main Content Area */
main
{
    display: flex;
    align-items: stretch;
    padding-bottom: 3rem;
    padding-top: 2rem;
}

h1, h2, h3, h4, h5, h6
{
    font-weight: 600;
    margin-bottom: .5rem;
}

/* Use :where() for zero specificity so utility classes can override */
:where(h1, h2, h3, h4, h5, h6)
{
    color: var(--text-color);
}

h1
{
    font-size: 1.6rem;
}

h2
{
    font-size: 1.4rem;
    margin-top: 2.5rem;
}

h3
{
    font-size: 1.2rem;
}

h4
{
    font-size: 1.1rem;
}

h5
{
    font-size: 1rem;
}


.lead
{
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.4;
}

p
{
    font-size: 1rem;
}

.content-section
{
    margin-bottom: 3rem;
}

.content-section a:not(.btn):not(.nav-link)
{
    color: rgb(143, 189, 255);
    text-decoration: none;
    font-weight: bold;
}

.content-section a:not(.btn):not(.nav-link):hover
{
    text-decoration: underline;
}

/* Code Blocks and Examples - avoid overriding Prism styling */
pre:not([class*="language-"])
{
    background-color: var(--code-bg);
    border-radius: 0.375rem;
    overflow-x: auto;
    overflow-y: auto;
    max-width: 100%;
    padding: 1rem;
}

code:not([class*="language-"])
{
    background-color: var(--code-bg);
    color: var(--code-text);
    border-radius: 0.25rem;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.875em;
    padding: 0.2rem 0.4rem;
}

.code-example
{
    margin: 2rem 0;
    overflow: hidden;
}

.code-example-preview
{
    display: none;
}

.code-example-code
{
    border-radius: 0 0 0.375rem 0.375rem;
    margin: 0;
}

.code-editor
{
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
}

.code-result
{
    background-color: var(--card-bg);
    border-radius: 0.375rem;
    min-height: 300px;
    overflow: auto;
}

/* Card and UI Elements */
.card
{
    background-color: var(--card-bg);
    color: var(--text-color);
}

.card h5, .card-header h5
{
    margin-top: 0;
}

.card .card-title
{
    margin-top: 0;
    color: var(--text-color);
}

.card .card-text
{
    color: var(--text-color);
}

.card:hover
{
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

pre[class*="language-"] {
    border-radius: 16px;
    max-width: 100%;
    overflow-x: auto;
}

.content-section pre {
    max-width: 100%;
    overflow-x: auto;
}

.copy-code-wrap {
    position: relative;
}

.copy-code-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(128, 128, 128, 0.15);
    border: none;
    color: rgba(200, 200, 200, 0.6);
    cursor: pointer;
    padding: 5px 6px;
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 2;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copy-code-wrap:hover .copy-code-btn {
    opacity: 0.6;
}

.copy-code-btn:hover {
    opacity: 1 !important;
    color: var(--bs-body-color);
}

.copy-code-btn.copied {
    color: var(--bs-success, #198754);
    opacity: 1 !important;
}



.btn-primary
{
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.btn-primary:hover
{
    background-color: #2f9999;
    border-color: #2f9999;
}

.btn-primary:active
{
    background-color: #1e6060 !important;
    border-color: #1e6060 !important;
}


.btn-success
{
    background-color: #398a65;
    border-color: #398a65;
}

.btn-success
{
    background-color: #398a65;
    border-color: #398a65;
}

.btn-success:active
{
    background-color: #105c38 !important;
    border-color: #105c38 !important;
    color: #fff !important;
}



.btn-outline-primary
{
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.btn-outline-primary:hover
{
    background-color: var(--accent-color);
    color: white;
}

/* Footer Styles */
.footer
{
    background-color: var(--sidebar-bg) !important;
    border-top: 1px solid var(--border-color);
    color: var(--text-color);
}

.footer a
{
    color: var(--accent-color);
    text-decoration: none;
}

.footer a:hover
{
    text-decoration: underline;
}

/* Theme Toggle Styles */
/* Flex-center the host: as an inline-flow child the button otherwise
   top-aligns inside baseline ghost space and floats a few px high of the
   navbar's true center line. */
[data-component="theme-toggle"]
{
    display: flex;
    align-items: center;
}

/* A global .btn rule adds 4px margin-bottom; flex centers the margin box,
   which rides the visible button ~2px high. Zero it here. */
[data-component="theme-toggle"] .btn
{
    margin: 0;
}

.theme-toggle-btn
{
    background: transparent;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    font-size: 1.5rem;
}

/* GitHub link in the navbar, sized to sit level with the theme toggle */
.navbar-github-link
{
    color: var(--text-color);
    font-size: 1.35rem;
    line-height: 1;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.navbar-github-link:hover
{
    color: var(--accent-color);
}

/* Navbar collapse — replaces Bootstrap collapse JS with reactive state */
@media (max-width: 991.98px) {
    .navbar-collapse {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .navbar-collapse.show {
        max-height: 500px;
    }
}

.sidebar-toggle {
    color: rgba(0, 0, 0, 0.55);
    font-size: 1.25rem;
    padding: 0.25rem 0.5rem;
    line-height: 1;
}

.sidebar-toggle.active {
    color: rgb(107, 153, 106);
}

.theme-dark .sidebar-toggle {
    color: rgba(255, 255, 255, 0.55);
}

.theme-dark .sidebar-toggle.active {
    color: rgb(107, 153, 106);
}

.theme-dark .navbar-toggler-icon {
    filter: invert(1) brightness(0.7);
}

/* Mobile Responsive Adjustments */
@media (max-width: 767.98px)
{
    .sidebar
    {
        bottom: 0;
        height: calc(100vh - 56px);
        left: 0;
        max-width: 280px;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 20px 0;
        position: fixed;
        top: 56px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        width: 80%;
        z-index: 1000;
    }

    .sidebar.show
    {
        transform: translateX(0);
    }

    main
    {
        padding-top: 1rem;
    }
}

/* API Reference Styles */
.api-item
{
    border-left: 3px solid var(--accent-color);
    margin-bottom: 2rem;
    padding-left: 1rem;
}

.api-signature
{
    background-color: var(--code-bg);
    border-radius: 0.375rem;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    margin-bottom: 1rem;
    overflow-x: auto;
    padding: 0.5rem 1rem;
}

.api-params
{
    margin-left: 1rem;
}

.api-param-name
{
    color: var(--accent-color);
    font-weight: bold;
}

.api-param-type
{
    color: var(--text-secondary);
    font-style: italic;
}

/* Search Box Styles - old rules removed, see .search-dropdown and .search-results below */

.search-result-item
{
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    padding: 0.75rem 1rem;
}

.search-result-item:hover
{
    background-color: rgba(0, 0, 0, 0.05);
}

.search-result-item:last-child
{
    border-bottom: none;
}

.search-highlight
{
    background-color: rgba(91, 134, 229, 0.2);
    border-radius: 0.2rem;
    padding: 0.1rem 0.2rem;
}

/* Navigation and Pagination */
.doc-nav
{
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
}

.doc-nav-item
{
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    line-height: 1.2;
    padding: 0;
    width: 48%;
}

.doc-nav-item > a
{
    display: block;
    padding: 1rem;
}

.doc-nav-item:hover
{
    border-color: var(--accent-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.doc-nav-direction
{
    color: var(--text-secondary);
    display: block;
    font-size: 0.875rem;
}

.doc-nav-title
{
    color: var(--accent-color);
    font-weight: 600;
}

/* Version selector */
.version-selector
{
    display: inline-block;
    position: relative;
}

.version-selector select
{
    appearance: none;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    color: var(--text-color);
    cursor: pointer;
    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
}

.version-selector::after
{
    content: "▼";
    font-size: 0.8em;
    pointer-events: none;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
}

/* Interactive examples */
.try-it-btn
{
    font-size: 0.875rem;
    margin-bottom: 1rem;
    margin-top: -0.5rem;
}

/* Prism theme integration - let prism-material-dark.css handle the styling */
/* Just ensure the backgrounds work with our themes */
.theme-light pre[class*="language-"]
{
    background: var(--code-bg) !important;
    /* Prism's base stylesheet loads after main.css and sets margin: .5em 0.
       Dark zeroes it in prism-material-dark.css; match that here so both
       themes lay out identically. */
    margin: 0;
    color: var(--code-text);
}

/* Prism's base stylesheet paints hsla(0,0%,100%,.5) behind these tokens, a
   hack tuned for its own near-white background. On any other code background
   it shows as a lighter patch. Cleared rather than matched to --code-bg so it
   stays correct if the background changes. Base rule is (0,1,0); the
   .theme-light prefix outranks it, which matters because prism.min.css loads
   after main.css. */
.theme-light .language-css .token.string,
.theme-light .style .token.string,
.theme-light .token.entity,
.theme-light .token.operator,
.theme-light .token.url
{
    background: transparent;
}

.theme-light code[class*="language-"]
{
    background: var(--code-bg) !important;
    /* Base text colour for anything Prism did not wrap in a .token span.
       Prism's base sets color:#000 on BOTH pre and code, and the inner
       code element is what actually paints the text, so it has to be set
       here too. Token classes (.token.keyword etc.) are class selectors
       and still outrank this, so highlighting is unaffected. */
    color: var(--code-text);
}

/* Let the material dark theme handle dark mode styling */

/* Modal styles for framework */
.modal
{
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1050;
}

.modal.active
{
    display: block;
}

.modal-dialog
{
    background-color: var(--modal-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

.modal-content
{
    background-color: var(--modal-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

.modal-header
{
    background-color: var(--modal-bg);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
}

.modal-body
{
    background-color: var(--modal-bg);
    color: var(--text-color);
}

.modal-footer
{
    background-color: var(--modal-bg);
    border-top: 1px solid var(--border-color);
    color: var(--text-color);
}

/* Interactive Code Example Styles */
.interactive-example
{
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    margin: 2rem 0;
    overflow: hidden;
}

.example-container
{
    display: flex;
    max-height: 600px;
    min-height: 200px;
    overflow: auto;
}

.code-panel
{
    border-right: 1px solid var(--border-color);
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 50%;
}

.preview-panel
{
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 50%;
}

.preview-content
{
    padding: .75rem 2rem;
}

.file-tabs
{
    background-color: var(--sidebar-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    height: 48px; /* Match preview-header height */
}

.tab-button
{
    align-items: center;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    font-size: 0.875rem;
    font-weight: 600; /* Match preview-title weight */
    height: 100%;
    line-height: 1;
    padding: 0.75rem 1rem; /* Increased to match preview-header */
    transition: all 0.2s ease;
}

.tab-button:hover
{
    background-color: var(--border-color);
    color: var(--text-color);
}

.tab-button.active
{
    background-color: var(--bg-color);
    border-bottom-color: var(--accent-color);
    color: var(--accent-color);
}

.playground-link
{
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    font-size: 0.75rem;
    margin-left: auto;
    padding: 0 1rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.playground-link:hover
{
    color: var(--accent-color);
}

.code-content
{
    flex: 1;
    overflow: hidden;
    position: relative;
}

.tab-content
{
    display: none;
    height: 100%;
}

.tab-content.active
{
    display: block;
}

.tab-content pre
{
    background-color: var(--code-bg);
    border: none;
    border-radius: 0;
    height: 100%;
    /* Explicit max-height so scroll triggers even when the height: 100%
       chain fails to resolve (percentage heights don't resolve against an
       ancestor that only has max-height, not a definite height). */
    max-height: 552px; /* 600px example-container max-height - 48px file-tabs */
    margin: 0;
    overflow: auto;
    width: initial !important;
}

.tab-content pre code
{
    display: block;
    font-size: 0.85rem !important;
    height: 100%;
    line-height: 1.3 !important;
    overflow: auto;
    overflow-x: auto; /* Hide horizontal scrollbar */
    padding: 1rem;
    white-space: pre-wrap; /* Allow text wrapping */
    word-wrap: break-word; /* Break long words if needed */
}

/* Fix Prism token backgrounds in code examples */
.tab-content pre code .token
{
    background-color: transparent !important;
}

.preview-header
{
    align-items: center;
    background-color: var(--sidebar-bg);
    border-bottom: 1px solid var(--border-color);
    box-sizing: border-box;
    display: flex;
    height: 48px; /* Explicit height match */
    justify-content: space-between;
    padding: 0.75rem 1rem; /* Match tab-button padding */
}

.preview-title
{
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
}


.preview-content
{
    flex: 1;
    overflow-y: auto;
    position: relative;
}

/* Dark theme: warm pewter background with grain texture */
.theme-dark .preview-content
{
    background-color: #20201d !important;
}

.theme-dark .preview-content::before
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    opacity: 0.075;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise-filter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.7' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.34'/%3E%3CfeFuncG type='linear' slope='0.34'/%3E%3CfeFuncB type='linear' slope='0.34'/%3E%3C/feComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.47' intercept='-0.23'/%3E%3CfeFuncG type='linear' slope='1.47' intercept='-0.23'/%3E%3CfeFuncB type='linear' slope='1.47' intercept='-0.23'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise-filter)'/%3E%3C/svg%3E");
}

/* Light theme: use lighter background for preview */
.theme-light .preview-content
{
    background-color: #f5f5f5;
}

/* Stacked layout: code tabs full width on top, preview below */
.example-container.stacked
{
    flex-direction: column;
    max-height: none;
    min-height: auto;
}

.example-container.stacked .code-panel
{
    border-bottom: 1px solid var(--border-color);
    border-right: none;
    flex: none;
    height: auto;
    max-height: 500px;
    overflow: auto;
    width: 100%;
}

.example-container.stacked .preview-panel
{
    flex: none;
    height: auto;
    min-height: 300px;
    width: 100%;
}

/* Responsive adjustments */
@media (max-width: 768px)
{
    .example-container
    {
        flex-direction: column;
        min-height: 600px;
    }

    .code-panel
    {
        border-bottom: 1px solid var(--border-color);
        border-right: none;
    }

    .code-panel,
    .preview-panel
    {
        flex: none;
        height: 300px;
        width: 100%;
    }

    .preview-header
    {
        flex-wrap: wrap;
        gap: 0.25rem;
        height: auto;
        min-height: 48px;
        padding: 0.5rem 0.75rem;
    }

    .preview-title
    {
        flex: 1;
        line-height: 1.3;
    }

}

/* Side-by-side layout for code examples */
.example-container.side-by-side-layout
{
    display: flex;
    flex-direction: column;
    max-height: none;
    min-height: auto;
}

.code-panels-row
{
    display: flex;
    flex-direction: row;
    height: 400px;  /* Fixed height matching normal examples */
    flex-shrink: 0;
}

.code-panel-left,
.code-panel-right
{
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;  /* Allow flex items to shrink below content size */
    overflow: hidden;
}

.code-panel-left
{
    border-right: 1px solid var(--border-color);
}

.code-panel-label
{
    align-items: center;
    background-color: var(--sidebar-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 600;
    height: 48px;
    padding: 0 1rem;
}

.code-panel-left .tab-content,
.code-panel-right .tab-content
{
    display: block;
    flex: 1;
    overflow: auto;
}

.code-panel-left .tab-content pre,
.code-panel-right .tab-content pre
{
    height: 100%;
    /* Side-by-side relies on flex:1 + overflow:auto on the .tab-content
       parent, not on the default tabbed layout's max-height fallback. */
    max-height: none;
    margin: 0 !important;  /* Override any margin including margin-bottom */
}

.preview-panel-full-width
{
    border-right: none;
    border-top: none;  /* No gap - seamless connection */
    display: flex;
    flex: none;
    flex-direction: column;
    height: 800px;  /* Double height for more preview space */
    width: 100%;
}

.preview-panel-full-width .preview-content
{
    flex: 1;
    overflow-y: auto;
}

/* Responsive: stack code panels vertically on mobile */
@media (max-width: 768px)
{
    .code-panels-row
    {
        flex-direction: column;
        height: auto;
    }

    .code-panel-left
    {
        border-bottom: 1px solid var(--border-color);
        border-right: none;
    }

    .code-panel-left,
    .code-panel-right
    {
        height: 250px;
    }

    .preview-panel-full-width
    {
        height: 300px;
    }
}

/* Progress bar width utility classes */
.progress-width-0
{
    width: 0%;
}

.progress-width-10
{
    width: 10%;
}

.progress-width-20
{
    width: 20%;
}

.progress-width-30
{
    width: 30%;
}

.progress-width-40
{
    width: 40%;
}

.progress-width-50
{
    width: 50%;
}

.progress-width-60
{
    width: 60%;
}

.progress-width-70
{
    width: 70%;
}

.progress-width-80
{
    width: 80%;
}

.progress-width-90
{
    width: 90%;
}

.progress-width-100
{
    width: 100%;
}

/* Bootstrap utility class overrides for theme compatibility */

/* Text utility class overrides */
.text-muted
{
    color: var(--text-secondary) !important;
}

.text-secondary
{
    color: var(--text-secondary) !important;
}

.text-dark
{
    color: var(--text-color) !important;
}

/* Background utility class overrides */
.bg-light
{
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

.bg-secondary
{
    background-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

.alert
{
    border-width: 2px !important;
}

.alert h6
{
    margin-top: 0;
}

.alert p:last-child
{
    margin-bottom: 0;
}

/* Alert component overrides */
.alert-info
{
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: #fff !important;
}

.alert-info a
{
    color: rgb(14, 110, 146);
    font-weight: bold;
    text-decoration: none;
}
.alert-primary
{
    --bs-alert-color: #fff;
    --bs-alert-bg: #496ea6;
    border: transparent;
}

.alert-warning
{
    background-color: rgb(219, 143, 14) !important;
    border: none;
    color: #fff !important;
}

.theme-dark .alert-warning
{
    background-color: rgb(136, 91, 14) !important;
}

.alert-success
{
    background-color: #466d48 !important;
    border-color: #466d48 !important;
    color: #fff !important;
}

.alert-danger
{
    background-color: rgba(220, 53, 69, 0.1) !important;
    border-color: #dc3545 !important;
    color: var(--text-color) !important;
}

.btn-warning
{
    background-color: #d5951d !important;
    border-color: #d5951d !important;
    color: #fff;
}

/* Button component overrides */
.btn-secondary
{
    background-color: var(--border-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

.btn-secondary:hover
{
    background-color: var(--text-secondary) !important;
    border-color: var(--text-secondary) !important;
    color: var(--bg-color) !important;
}

.btn-outline-secondary
{
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.btn-outline-secondary:hover
{
    background-color: var(--border-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

.btn-light
{
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

.btn-light:hover
{
    background-color: var(--border-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Minimize flash of unstyled content */
.content-area
{
    opacity: 1;
    transition: opacity 0.1s ease-in-out;
}

/* Offset hash-link scroll targets below the fixed navbar */
.content-area [id]
{
    scroll-margin-top: 80px;
}

/* Hide content very briefly during initial render to reduce FOUC */
.content-area:empty
{
    opacity: 0;
}

/* SSR Example Styling - Visually Distinct from Regular Examples */
.ssr-example-container
{
    background: var(--card-bg);
    border: 2px solid #28a745;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.15);
    margin: 20px 0;
}

.ssr-example-header
{
    align-items: center;
    background: linear-gradient(135deg, #28a745, #20c997);
    border-radius: 6px 6px 0 0;
    color: white;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 12px 20px;
}

.ssr-badge
{
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 4px 8px;
}

.ssr-title
{
    flex: 1;
    font-size: 16px;
    font-weight: 500;
}

.ssr-link
{
    color: white;
    font-size: 14px;
    opacity: 0.9;
    text-decoration: none;
    transition: opacity 0.2s;
}

.ssr-link:hover
{
    color: white;
    opacity: 1;
    text-decoration: underline;
}

.ssr-example-frame
{
    background: white;
    border: none;
    border-bottom: 1px solid var(--border-color);
    height: 400px;
    width: 100%;
}

.ssr-example-code
{
    border-bottom: 1px solid var(--border-color);
    padding: 15px 20px;
}

.ssr-example-code h5
{
    color: var(--text-color);
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 10px 0;
}

.ssr-example-code pre
{
    background: var(--code-bg);
    border-radius: 4px;
    font-size: 13px;
    margin: 0;
}

.ssr-example-note
{
    background: rgba(40, 167, 69, 0.05);
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.5;
    padding: 15px 20px;
}

.ssr-example-note strong
{
    color: #28a745;
}

/* Dark theme adjustments */
.theme-dark .ssr-example-frame
{
    background: #2a2a2a;
}

.theme-dark .ssr-example-note
{
    background: rgba(40, 167, 69, 0.1);
}

/* Progress bar width classes for list examples */
.progress-width-0 { width: 0%; }
.progress-width-10 { width: 10%; }
.progress-width-20 { width: 20%; }
.progress-width-30 { width: 30%; }
.progress-width-40 { width: 40%; }
.progress-width-50 { width: 50%; }
.progress-width-60 { width: 60%; }
.progress-width-70 { width: 70%; }
.progress-width-80 { width: 80%; }
.progress-width-90 { width: 90%; }
.progress-width-100 { width: 100%; }

/* Progress bar with text display via CSS custom property */
.progress:has(.progress-bar-text) {
    position: relative;
}

.progress-bar-text::after {
    content: var(--progress-text, "");
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    color: #333;
    font-size: 11px;
    font-weight: bold;
}

/* ================================
   Search Component Styles
   ================================ */

.search-container {
    position: relative;
    min-width: 280px;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    pointer-events: none;
}

.search-input {
    padding-left: 36px;
    padding-right: 40px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.theme-light .search-input {
    background: #e6f3f5;
}

.search-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
    outline: none;
}

.search-input::placeholder {
    color: var(--text-secondary);
}

.search-shortcut {
    position: absolute;
    right: 10px;
    padding: 2px 6px;
    font-size: 0.75rem;
    font-family: monospace;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
}

.search-dropdown {
    position: fixed;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    max-height: 400px;
    overflow-y: auto;
    min-width: 280px;
}

/* Ensure search container doesn't clip dropdown */
.search-container {
    overflow: visible !important;
}

@media (min-width: 992px) {
    .navbar-collapse {
        overflow: visible !important;
    }

    .navbar {
        overflow: visible !important;
    }
}

.theme-dark .search-dropdown {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.search-results {
    padding: 4px;
}

.search-result {
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text);
    transition: background-color 0.15s;
}

.search-result:hover,
.search-result.selected {
    background: rgba(128, 128, 128, 0.15);
    color: var(--text);
    text-decoration: none;
}

.theme-dark .search-result:hover,
.theme-dark .search-result.selected {
    background: rgba(255, 255, 255, 0.1);
}

.search-result-title {
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 2px;
}

.search-result-section {
    font-size: 0.75rem;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.search-result-excerpt {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.search-result-excerpt mark {
    background: rgba(var(--accent-rgb), 0.25);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

.search-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
    display: none;
}

/* Keyboard shortcut styling */
@media (min-width: 992px) {
    .search-container:focus-within .search-shortcut {
        display: none !important;
    }
}

/* ================================
   Feature Availability Badges
   ================================ */

.feature-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.5em;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 0.5em;
    cursor: help;
    position: relative;
}

.feature-badge::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5em 0.75em;
    background-color: var(--dark-bg);
    color: var(--dark-text);
    font-size: 0.85rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 1000;
    margin-bottom: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.feature-badge:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Mini badge - feature set available in all builds (baseline) */
.feature-badge-mini {
    background-color: #6c757d;
    color: white;
}

/* Lite+ badge - features in Lite build and above (not in Mini) */
.feature-badge-lite {
    background-color: #17A2B8;
    color: white;
}

/* Core+ badge - features in Core build and above */
.feature-badge-core {
    background-color: #4CAF50;
    color: white;
}

/* SPA+ badge - features in SPA build and above */
.feature-badge-spa {
    background-color: #2196F3;
    color: white;
}

/* Full badge - features only in Full build */
.feature-badge-full {
    background-color: #9C27B0;
    color: white;
}

/* DEV badge - features in dev builds only */
.feature-badge-dev {
    background-color: #FF9800;
    color: white;
}

/* Dark theme adjustments */
.theme-dark .feature-badge::after {
    background-color: var(--light-bg);
    color: var(--light-text);
}

/* =====================================================
   API Reference Page Styles
   ===================================================== */

.api-page {
    max-width: 900px;
}

.api-page h1 {
    margin-bottom: 0.5rem;
}

.api-page .lead {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.api-page a:not(.btn):not(.nav-link) {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
}

.api-page a:not(.btn):not(.nav-link):hover {
    text-decoration: underline;
}

/* API Table of Contents */
.api-toc {
    background-color: var(--code-bg);
    border-radius: 8px;
    padding: 1.5rem;
}

.api-toc h5 {
    margin-bottom: 1rem;
    font-weight: 600;
}

.api-toc ul {
    margin-bottom: 0.5rem;
}

.api-toc a {
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
}

.api-toc a:hover {
    color: var(--accent-color);
}

/* API Section */
.api-section {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
}

.api-section:last-child {
    border-bottom: none;
}

.api-section h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent-color);
    display: inline-block;
}

.api-section h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.api-section > p {
    margin-bottom: 1rem;
}

/* API Tables */
.api-section .table {
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.api-section .table th {
    font-weight: 600;
    background-color: var(--code-bg);
}

.api-section .table td code {
    background-color: var(--code-bg);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85em;
}

/* API Code blocks */
.api-section pre {
    margin-bottom: 1rem;
}

.api-section pre code {
    font-size: 0.85rem;
}

/* Supported Formats table styling */
.api-section .table tbody tr:hover {
    background-color: rgba(var(--accent-rgb), 0.05);
}

/* Alert boxes in API pages */
.api-section .alert {
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* See Also section */
.api-section:last-child h2 {
    border-bottom-color: var(--border);
}

.api-section:last-child ul {
    margin-bottom: 0;
}

.api-section:last-child a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
}

.api-section:last-child a:hover {
    text-decoration: underline;
}

/* Dark theme adjustments for API pages */
.theme-dark .api-toc {
    background-color: var(--dark-code-bg);
}

.theme-dark .api-section .table th {
    background-color: var(--dark-code-bg);
}

/* ==========================================
   Hero Section (Home Page)
   ========================================== */

.hero-section {
    background: #2D2D2D;
    color: white;
    padding: 3rem 2rem 1rem 2rem;
    margin: 1rem;
    border-radius: 1rem;
}

.hero-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.hero-title {
    margin-bottom: 1rem;
    line-height: 1.2;
}

/* Logo + wordmark on one line. */
.hero-brand-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
}

.hero-logo {
    flex: 0 0 auto;
    width: 5rem;
    height: 5rem;
}

.hero-brand {
    display: block;
    font-size: 5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fff 0%, #a8d8ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-brand-wf {
    font-weight: 650;
    letter-spacing: -0.070rem;
}

.hero-tagline {
    display: block;
    font-size: 2.3rem;
    font-weight: 650;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.3;
}

.hero-subtitle {
    font-size: 1.25rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    max-width: 700px;
    margin: 0 auto 2rem;
    line-height: 1.3;
}

.hero-version-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: -1rem auto 2rem;
    padding: 0.35rem 1rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.hero-version-badge:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: #a8d8ff;
    color: #fff;
}

.hero-version-sep {
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
}

.hero-version-cta {
    font-weight: 500;
    color: #a8d8ff;
}

.hero-script-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 0 auto 2.5rem;
    padding: 0.8rem 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    max-width: 620px;
}

.hero-script-tag code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 1.05rem;
    color: #a8d8ff;
    background: none;
    padding: 0;
}

.hero-script-cta {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.theme-light .hero-script-tag {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(26, 26, 46, 0.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.theme-light .hero-script-tag code {
    color: #0277bd;
}

.theme-light .hero-script-cta {
    color: rgba(26, 26, 46, 0.75);
}

/* Links inside the hero feature cards; inline hero copy needs its own
 * theming (the feature-detail sections keep their dark treatment in both
 * themes, hero cards do not). */
.hero-feature-link {
    color: #a8d8ff;
    font-weight: 600;
    text-decoration: none;
}

.hero-feature-link:hover {
    text-decoration: underline;
}

.theme-light .hero-feature-link {
    color: #2f6cb0;
}

.hero-features {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
    text-align: left;
}

.hero-feature {
    background: rgba(72, 92, 130, .65);
    border-radius: 12px;
    padding: 1.5rem;
    transition: transform 0.2s, background 0.2s;
    grid-column: span 2;
}



.hero-feature-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.hero-feature-icon svg {
    color: #1a1a2e;
}

.hero-feature h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: white;
}

.hero-feature p {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    line-height: 1.5;
}

.hero-feature code {
    background: rgba(255, 255, 255, 0.15);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #a8d8ff;
}

.hero-feature-wide {
    grid-column: span 3;
}

.hero-feature-code {
    padding: 1.2rem;
}

.hero-code-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.hero-code {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    margin: 0;
    overflow-x: auto;
    font-size: 0.78rem;
    line-height: 1.45;
    flex: 0 0 auto;
}

.hero-code code {
    background: none;
    padding: 0;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: inherit;
    white-space: pre;
}

.hero-code code b {
    color: #7ecfff;
    font-weight: 600;
}

.hero-code-callouts {
    flex: 1;
    min-width: 0;
}

.hero-code-callouts h3 {
    margin-top: 0;
}

.hero-code-callouts p {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.hero-code-callouts code {
    font-size: 0.82rem;
}

.hero-code-caption {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0.75rem;
    margin-bottom: 0;
}

.theme-light .hero-code {
    background: rgba(0, 0, 0, 0.06);
}

.theme-light .hero-code code {
    color: rgba(26, 26, 46, 0.85);
}

.theme-light .hero-code code b {
    color: #0277bd;
}

.theme-light .hero-code-callouts p {
    color: rgba(26, 26, 46, 0.7);
}

.theme-light .hero-code-caption {
    color: rgba(26, 26, 46, 0.8);
}

.hero-cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-cta .btn-primary {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border: none;
    color: #1a1a2e;
    font-weight: 600;
    padding: 0.75rem 2rem;
}

.hero-cta .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(79, 172, 254, 0.4);
}

.hero-cta .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.4);
    color: white;
    padding: 0.75rem 2rem;
}

.hero-cta .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
}

.hero-asterisk
{
    text-align: right;
}

/* Light Theme Hero Overrides */
.theme-light .hero-section {
    background: #f1f1f1;
    color: #1a1a2e;
}

.theme-light .hero-brand {
    background: linear-gradient(135deg, #0277bd 0%, #00838f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.theme-light .hero-tagline {
    color: rgba(26, 26, 46, 0.85);
}

.theme-light .hero-subtitle {
    color: rgba(26, 26, 46, 0.75);
}

.theme-light .hero-version-badge {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(26, 26, 46, 0.2);
    color: rgba(26, 26, 46, 0.85);
}

.theme-light .hero-version-badge:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: #4a7ab5;
    color: rgba(26, 26, 46, 1);
}

.theme-light .hero-version-sep {
    color: rgba(26, 26, 46, 0.3);
}

.theme-light .hero-version-cta {
    color: #4a7ab5;
}

.theme-light .hero-feature {
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.theme-light .hero-feature:hover {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.theme-light .hero-feature h3 {
    color: #0277bd;
}

.theme-light .hero-feature p {
    color: rgba(26, 26, 46, 0.7);
}

.theme-light .hero-feature code {
    background: rgba(2, 119, 189, 0.1);
    color: #0277bd;
}

.theme-light .hero-feature-icon {
    background: linear-gradient(135deg, #0288d1 0%, #00acc1 100%);
}

.theme-light .hero-cta .btn-primary {
    background: linear-gradient(135deg, #0288d1 0%, #00acc1 100%);
    color: white;
}

.theme-light .hero-cta .btn-primary:hover {
    box-shadow: 0 8px 25px rgba(2, 136, 209, 0.4);
}

.theme-light .hero-cta .btn-outline-light {
    border-color: rgba(2, 119, 189, 0.5);
    color: #0277bd;
}

.theme-light .hero-cta .btn-outline-light:hover {
    background: rgba(2, 119, 189, 0.1);
    border-color: #0277bd;
}

.theme-light .hero-asterisk {
    color: rgba(26, 26, 46, 0.6);
}

@media (max-width: 768px) {
    .hero-section {
        padding: 3rem 1.5rem 1rem;
    }

    .hero-brand {
        font-size: 2.5rem;
    }

    .hero-logo {
        width: 2.5rem;
        height: 2.5rem;
    }

    .hero-brand-row {
        gap: 0.75rem;
    }

    .hero-tagline {
        font-size: 1.4rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .hero-features {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .hero-feature {
        grid-column: span 1;
    }

    .hero-feature-wide {
        grid-column: span 1;
    }

    .hero-code-layout {
        flex-direction: column;
    }

    .hero-asterisk {
        margin-top: 1.5rem;
    }
}

/* ================================
   Home Feature Detail Sections
   ================================ */

.home-features-detail {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
}

.feature-detail-section {
    padding: 4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.feature-detail-section:last-child {
    border-bottom: none;
}

.feature-detail-inner {
    display: flex;
    gap: 3rem;
    align-items: start;
}

.feature-detail-alt .feature-detail-inner {
    flex-direction: row-reverse;
}

.feature-detail-text {
    flex: 1;
}

.feature-detail-text h2 {
    font-size: 2.4rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1rem;
    color: #a8d8ff;
}

.feature-detail-text p {
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 1rem;
}

.feature-detail-text code {
    background: rgba(168, 216, 255, 0.12);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #a8d8ff;
}

.feature-detail-text em {
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
}

/* Inline links inside homepage feature-detail sections.
 * Hero links keep their own treatment; this class is applied
 * explicitly to <a> tags in feature-detail paragraphs. */
.feature-link,
.feature-detail-text a.feature-link {
    color: #6fb6f0;
    font-weight: bold;
    text-decoration: none;
}
.feature-link:hover,
.feature-detail-text a.feature-link:hover {
    text-decoration: underline;
}

.feature-detail-code {
    flex: 0 0 420px;
}

.feature-detail-code pre {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    padding: 1.2rem 1.4rem;
    margin-top: 0;
    /* Wrap long prose lines so the column holds its 420px basis; a flex
       item's min-width:auto otherwise lets an unwrappable line force the
       column wide and crush the text beside it. */
    white-space: pre-wrap;
}

/* Prism (and the material-dark theme's .theme-dark code[class*="language-"],
   specificity 0-2-1, loaded after this sheet) set white-space: pre on the
   inner code element; this selector's 0-2-2 outranks both in either theme. */
.feature-detail-code pre code[class*="language-"] {
    white-space: pre-wrap;
    margin: 0;
    overflow-x: auto;
    font-size: 0.8rem;
    line-height: 1.5;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.feature-detail-code code {
    color: rgba(255, 255, 255, 0.85);
}

/* Light theme */
.theme-light .feature-detail-section {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

.theme-light .feature-detail-text h2 {
    color: #0277bd;
}

.theme-light .feature-detail-text p {
    color: rgba(26, 26, 46, 0.75);
}

.theme-light .feature-detail-text code {
    background: rgba(2, 119, 189, 0.1);
    color: #0277bd;
}

.theme-light .feature-detail-text em {
    color: rgba(26, 26, 46, 0.9);
}

.theme-light .feature-detail-code pre {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.08);
}

.theme-light .feature-detail-code code {
    color: rgba(26, 26, 46, 0.85);
}

@media (max-width: 768px) {
    .home-features-detail {
        padding: 1rem 1.5rem 3rem;
    }

    .feature-detail-section {
        padding: 2.5rem 0;
    }

    .feature-detail-inner,
    .feature-detail-alt .feature-detail-inner {
        flex-direction: column;
    }

    .feature-detail-code {
        flex: none;
        width: 100%;
    }
}

/* ================================
   Page Table of Contents
   ================================ */

/* Content-view fills remaining space in the flex row */
[data-component="content-view"]
{
    flex: 1;
    min-width: 0;
}

/* TOC container — fixed width on desktop, negative margins to negate
   main's padding so the background reaches top/right/bottom edges */
[data-component="page-toc"]
{
    flex-shrink: 0;
    width: 300px;
    margin-left: 1rem;
    margin-top: -2rem;
    margin-right: -1.5rem;
    margin-bottom: -3rem;
}

/* Mobile toggle button (hidden on desktop) */
.page-toc-toggle
{
    display: none;
}

/* TOC panel — sticky sidebar on desktop */
.page-toc-panel
{
    position: sticky;
    top: 70px;
    height: calc(100vh - 90px);
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border-color);
    padding: 0;
}

/* Headings scroll in the top region; the utility block below never moves. */
.page-toc-list
{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Permanent utility block, pinned to the panel bottom. Static markup, so it
   is present from first paint and the panel is never empty. */
.page-toc-utils
{
    margin-top: auto;
    border-top: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
}

.page-toc-utils .page-toc-util-link
{
    display: block;
    padding: 0.2rem 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-decoration: none;
}

.page-toc-utils .page-toc-util-link:hover
{
    color: var(--accent-color);
}

/* Slightly darker background in dark theme to offset from content (#353434) */
.theme-dark [data-component="page-toc"]
{
    background-color: #2f2e2e;
}

/* Panel header — visible on desktop, close button hidden */
.page-toc-panel-header
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.page-toc-close
{
    display: none;
}

/* TOC list */
.page-toc-list
{
    list-style: none;
    margin: 0;
    padding: 0;
}

/* TOC link */
.page-toc-link
{
    display: block;
    padding: 0.15rem 0.75rem 0.15rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 480;
    line-height: 1.4;
    border-left: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Brighter text in dark theme */
.theme-dark .page-toc-link
{
    color: #d7d7d7;
}

.theme-dark .page-toc-link:hover
{
    color: #e0e0e0;
}

.page-toc-link:hover
{
    color: var(--text-color);
    text-decoration: none;
}

/* Active heading indicator */
.page-toc-link.active
{
    color: var(--accent-color);
    border-left-color: var(--accent-color);
}

/* h2 section headers — bolder with spacing above */
.page-toc-link.page-toc-section
{
    font-weight: 600;
    margin-top: 0.4rem;
}

li:first-child > .page-toc-link.page-toc-section
{
    margin-top: 0;
}

/* h3 indent */
.page-toc-link.page-toc-indent
{
    padding-left: 1.75rem;
    font-size: 0.8rem;
}

/* Collapsed TOC (toggle button + overlay) on narrower screens; the
   persistent right sidebar shows at >= 1200px (Bootstrap xl). 1400px was
   too high, hiding the sidebar on typical laptops and many monitors. */
@media (max-width: 1199.98px)
{
    main
    {
        display: block;
    }

    [data-component="page-toc"]
    {
        width: auto;
    }

    .page-toc-toggle
    {
        display: block;
        position: fixed;
        top: 70px;
        right: 16px;
        z-index: 100;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 0.35rem 0.75rem;
        color: var(--text-secondary);
        font-size: 0.8rem;
        cursor: pointer;
    }

    .page-toc-toggle:hover
    {
        color: var(--text-color);
        border-color: var(--text-secondary);
    }

    .page-toc-panel
    {
        display: none;
        position: fixed;
        top: 60px;
        right: 0;
        width: 280px;
        max-height: calc(100vh - 60px);
        z-index: 1040;
        background: var(--card-bg);
        border-left: 1px solid var(--border-color);
        box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
        padding: 0;
    }

    .page-toc-panel.open
    {
        display: block;
    }

    .page-toc-panel-header
    {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-color);
        font-weight: 600;
        font-size: 0.9rem;
    }

    .page-toc-close
    {
        display: block;
        background: none;
        border: none;
        color: var(--text-secondary);
        font-size: 1.25rem;
        cursor: pointer;
        padding: 0 0.25rem;
    }

    .page-toc-close:hover
    {
        color: var(--text-color);
    }

    .page-toc-list
    {
        padding: 0.5rem 0;
    }
}


/* =========================================================================
   Blog
   ========================================================================= */

.blog-posts { max-width: 720px; }

.blog-card {
    padding: 24px 0;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}
.blog-card:first-child { padding-top: 0; }
.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: var(--text-muted, #888);
}
.blog-card-tags { display: flex; gap: 6px; }
.blog-tag {
    background: var(--tag-bg, #f0f0f0);
    color: var(--tag-color, #666);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
}
.blog-card-title {
    margin: 0 0 8px;
    font-size: 1.5rem;
    line-height: 1.3;
}
.blog-card-link { cursor: pointer; }
.blog-card-title .blog-card-link {
    color: #6b996a;
    text-decoration: none;
    font-weight: 600;
}
.blog-card-title .blog-card-link:hover { color: #8bbb8a; }
.blog-card-summary {
    color: var(--text-color, #555);
    line-height: 1.6;
    margin-bottom: 8px;
}
.blog-card-read-more {
    color: var(--accent-color, #7b2d8e);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
}
.blog-card-read-more:hover { text-decoration: underline; }
.blog-empty { color: var(--text-muted, #888); font-style: italic; padding: 40px 0; }

/* Blog post page. The wrapper goes wide so figures can breathe, but the
   prose children are independently capped at 720px so paragraphs stay
   readable. Figures (.blog-figure) are *not* in the prose-cap list, so
   they fill 85% of the wider wrapper instead. */
.blog-post { max-width: 1100px; margin: 0 auto; }
.blog-post-header,
.blog-post-body > p,
.blog-post-body > h2,
.blog-post-body > h3,
.blog-post-body > ul,
.blog-post-body > ol,
.blog-post-body > pre,
.blog-post-body > .copy-code-wrap {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.blog-post-header { margin-bottom: 32px; }
.blog-back-link {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--accent-color, #7b2d8e);
    text-decoration: none;
    font-size: 0.9rem;
}
.blog-back-link:hover { text-decoration: underline; }
.blog-post-date {
    display: block;
    color: var(--text-muted, #888);
    font-size: 0.85rem;
    margin-bottom: 8px;
}
.blog-post-header h1 { margin: 0 0 12px; line-height: 1.2; }
.blog-post-tags { display: flex; gap: 6px; }
.blog-post-body h2 { margin-top: 2rem; }
.blog-post-body p { margin-bottom: 1rem; line-height: 1.6; }

/* Figures sit 85% wide inside the 1100px-capped post wrapper, so they
   always look larger than the 720px prose column without ever escaping
   the wrapper into the docs sidebar. */
.blog-figure {
    width: 85%;
    margin: 32px auto;
    display: block;
}
.blog-figure img {
    width: 100%;
    height: auto;
    display: block;
}
.blog-figure figcaption {
    text-align: center;
    font-size: 0.9em;
    color: var(--text-muted, #888);
    font-style: italic;
    margin-top: 12px;
}

/* Dark theme support */
[data-theme="dark"] .blog-card { border-color: #333; }
[data-theme="dark"] .blog-card-summary { color: #aaa; }
[data-theme="dark"] .blog-tag { background: #2a2a3a; color: #aaa; }