/* Fuentes del proyecto — stacks con fallback a sistema */
:root {
    --md-text-font: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --md-code-font: "JetBrains Mono", "SF Mono", "Courier New", monospace;
}

:root {
    --md-primary-fg-color: #26A69A;
    --md-primary-fg-color--light: #4DB6AC;
    --md-primary-fg-color--dark: #00897B;
    --md-accent-fg-color: #FFB343;

    /* Gradient definition extracted from logo */
    --brand-gradient: linear-gradient(135deg, #26A69A 0%, #324AB2 40%, #FFB343 75%, #0F172A 100%);
    --text-gradient: linear-gradient(to right, #26A69A, #324AB2);
}

/* Apply gradient to the header/app bar */
.md-header {
    background: var(--brand-gradient) !important;
}

/* Larger logo */
.md-logo img {
    height: 64px !important;
    width: auto !important;
}

.md-header__button.md-logo {
    margin: 0.1rem 0.4rem !important;
    padding: 0 !important;
    height: 64px !important;
}

@media screen and (min-width: 76.25em) {
    .md-header__button.md-logo {
        margin-right: 1.5rem !important;
    }
}

/* Gradient text for the main title in the hero section */
.md-typeset h1 {
    background: var(--text-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
    /* Ensures gradient applies correctly */
}

/* Add a subtle border top to the footer with the gradient */
.md-footer {
    border-top: 4px solid;
    border-image: var(--brand-gradient) 1;
}

/* Customize the tabs navigation to blend better */
.md-tabs {
    background: #0F172A !important;
    /* Dark blue from the logo end */
}

/* Hover effects for links */
.md-typeset a {
    color: #324AB2;
    transition: color 0.2s;
}

.md-typeset a:hover {
    color: #26A69A;
}

/* Button customization */
.md-typeset .md-button--primary {
    background: #324AB2;
    border-color: #324AB2;
}

.md-typeset .md-button--primary:hover {
    background: #26A69A;
    border-color: #26A69A;
}

/* Series meta (MkDocs Material friendly) */
.series-meta {
    --sm-radius: 16px;
    --sm-pad: 12px;
    --sm-gap: 10px;

    /* intenta usar variables de MkDocs Material si existen */
    --sm-bg: var(--md-default-bg-color, #fff);
    --sm-fg: var(--md-default-fg-color, #111827);
    --sm-muted: color-mix(in srgb, var(--sm-fg) 65%, transparent);
    --sm-border: color-mix(in srgb, var(--sm-fg) 12%, transparent);
    --sm-shadow: 0 10px 25px rgba(0, 0, 0, .06);

    /* acento (si existe en Material) */
    --sm-accent: var(--md-accent-fg-color, #3b82f6);

    background: linear-gradient(135deg,
            color-mix(in srgb, var(--md-primary-fg-color, #26A69A) 14%, var(--sm-bg)),
            color-mix(in srgb, #324AB2 12%, var(--sm-bg)),
            color-mix(in srgb, var(--md-accent-fg-color, #FFB343) 14%, var(--sm-bg)));
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius);
    padding: var(--sm-pad);
    box-shadow: var(--sm-shadow);

    display: grid;
    gap: var(--sm-gap);
}

.series-meta:hover {
    box-shadow: 0 14px 35px rgba(0, 0, 0, .09);
}

.series-meta-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Chips */
.series-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 6px 10px;
    border-radius: 999px;

    background: color-mix(in srgb, var(--sm-bg) 88%, var(--sm-fg) 12%);
    border: 1px solid color-mix(in srgb, var(--sm-fg) 14%, transparent);

    font-size: 12px;
    line-height: 1;
    user-select: none;
}

.series-meta-chip .chip-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--sm-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sm-accent) 22%, transparent);
}

.series-meta-chip .chip-k {
    color: var(--sm-muted);
    font-weight: 600;
    letter-spacing: .2px;
}

.series-meta-chip .chip-v {
    color: var(--sm-fg);
    font-weight: 650;
}

/* Colores por tipo */
.series-meta[data-state*="construct"] .chip--status .chip-dot {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .20);
}

.series-meta[data-state*="draft"] .chip--status .chip-dot {
    background: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .20);
}

.series-meta[data-state*="ready"] .chip--status .chip-dot {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
}

.series-meta[data-state*="complete"] .chip--status .chip-dot {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
}

.series-meta[data-level*="general"] .chip--level .chip-dot {
    background: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, .18);
}

.series-meta[data-level*="inter"] .chip--level .chip-dot {
    background: #a78bfa;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, .18);
}

.series-meta[data-level*="avan"] .chip--level .chip-dot {
    background: #f472b6;
    box-shadow: 0 0 0 3px rgba(244, 114, 182, .18);
}

.series-meta[data-level*="tec"] .chip--level .chip-dot {
    background: #f472b6;
    box-shadow: 0 0 0 3px rgba(244, 114, 182, .18);
}

.chip--read .chip-dot {
    background: color-mix(in srgb, var(--sm-fg) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sm-fg) 14%, transparent);
}

/* Filas */
.series-meta-row {
    display: grid;
    grid-template-columns: 108px 1fr;
    gap: 12px;
    align-items: center;
}

.series-meta-label {
    color: var(--sm-muted);
    font-weight: 650;
    font-size: 12px;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.series-meta-value {
    color: var(--sm-fg);
    font-weight: 600;
}

/* Responsive */
@media (max-width: 520px) {
    .series-meta-row {
        grid-template-columns: 1fr;
    }
}

/* 5sigma Graphic */
.sigma-graphic {
    --panel: rgba(255, 255, 255, .06);
    --panel2: rgba(255, 255, 255, .08);
    --text: rgba(255, 255, 255, .92);
    --muted: rgba(255, 255, 255, .72);
    --grid: rgba(255, 255, 255, .18);
    --curve: rgba(255, 255, 255, .90);
    --tail: rgba(255, 100, 120, .18);
    --tailStroke: rgba(255, 140, 160, .90);
    --accent: rgba(150, 220, 255, .95);
    --shadow: 0 12px 32px rgba(0, 0, 0, .35);
    --radius: 18px;
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    color: var(--text);
    margin: 16px 0 24px;
}

[data-md-color-scheme="default"] .sigma-graphic {
    --panel: rgba(15, 23, 42, .10);
    --panel2: rgba(15, 23, 42, .16);
    --text: rgba(15, 23, 42, .98);
    --muted: rgba(15, 23, 42, .78);
    --grid: rgba(15, 23, 42, .35);
    --curve: rgba(15, 23, 42, .98);
    --tail: rgba(220, 38, 38, .25);
    --tailStroke: rgba(185, 28, 28, .95);
    --accent: rgba(2, 132, 199, .95);
    --shadow: 0 12px 32px rgba(15, 23, 42, .18);
}

[data-md-color-scheme="default"] .sigma-graphic .card {
    border-color: rgba(15, 23, 42, .2);
}

.sigma-graphic .wrap {
    width: min(1020px, 100%);
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 16px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .sigma-graphic .wrap {
        grid-template-columns: 1fr;
    }
}

.sigma-graphic .card {
    background: linear-gradient(180deg, var(--panel2), var(--panel));
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.sigma-graphic .top {
    padding: 18px 18px 10px 18px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    justify-content: space-between;
}

.sigma-graphic h1,
.sigma-graphic .sigma-label {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1.15;
}

.sigma-graphic .sub {
    margin: 6px 0 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.35;
    max-width: 58ch;
}

.sigma-graphic .plot {
    padding: 0 12px 14px 12px;
}

.sigma-graphic svg {
    width: 100%;
    height: auto;
    display: block;
}

.sigma-graphic .side {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sigma-graphic .metric {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
    padding: 12px;
}

.sigma-graphic .metric .k {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 8px;
    line-height: 1.35;
}

.sigma-graphic .metric .v {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .2px;
}

.sigma-graphic #sigma-read {
    font-weight: 800;
    font-family: var(--mono);
}

.sigma-graphic .controls {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sigma-graphic .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sigma-graphic .row label {
    font-size: 13px;
    color: var(--muted);
}

.sigma-graphic input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
}

.sigma-graphic .note {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}

.sigma-graphic .pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    font-size: 13px;
    color: var(--muted);
    width: fit-content;
    white-space: nowrap;
}

.sigma-graphic .dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--tailStroke);
    box-shadow: 0 0 0 4px rgba(255, 140, 160, .12);
}

.sigma-graphic .mono {
    font-family: var(--mono);
    font-weight: 800;
}

/* Snippet theme sync with native Material palette toggle */
[data-md-color-scheme="default"] :is(.ta-demo, .nn-demo, .ml-demo, .ai-mat, .ai-tabs, .sigma-graphic, .sigmas-dcspace, .dcs-hero) {
    color-scheme: light;
}

[data-md-color-scheme="slate"] :is(.ta-demo, .nn-demo, .ml-demo, .ai-mat, .ai-tabs, .sigma-graphic, .sigmas-dcspace, .dcs-hero) {
    color-scheme: dark;
}

[data-md-color-scheme="default"] .sigmas-dcspace {
    border-color: rgba(15, 23, 42, .18);
    background: linear-gradient(160deg, #F8FBFF, #EEF4FF);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
    color: rgba(15, 23, 42, 0.94);
}

[data-md-color-scheme="default"] .sigmas-dcspace .sigmas-dcspace__title {
    background: linear-gradient(90deg, #0F172A, #324AB2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-md-color-scheme="default"] .sigmas-dcspace .sigmas-dcspace__sub {
    color: rgba(15, 23, 42, 0.72);
}

[data-md-color-scheme="default"] .sigmas-dcspace .sigmas-dcspace__foot {
    border-top-color: rgba(15, 23, 42, 0.12);
}

[data-md-color-scheme="default"] .sigmas-dcspace .sigmas-dcspace__sources {
    color: rgba(15, 23, 42, 0.62);
}

[data-md-color-scheme="default"] .sigmas-dcspace .sigmas-dcspace__sources a {
    color: #146EEB;
    border-bottom-color: rgba(20, 110, 235, 0.35);
}

[data-md-color-scheme="default"] .sigmas-dcspace .sigmas-dcspace__sources a:hover {
    color: #0B57D0;
    border-bottom-color: #0B57D0;
}

[data-md-color-scheme="default"] .sigmas-dcspace .chip {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
}

/* Author byline */
.sigmas-author {
    margin: 48px 0 8px;
}

.sigmas-author__line {
    height: 1px;
    background: color-mix(in srgb, var(--md-default-fg-color) 12%, transparent);
    margin-bottom: 16px;
}

.sigmas-author__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: color-mix(in srgb, var(--md-default-fg-color) 65%, transparent);
}

.sigmas-author__name {
    font-weight: 700;
    color: var(--md-default-fg-color);
}

.sigmas-author__sep {
    opacity: 0.4;
}

.sigmas-author__link {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--md-primary-fg-color) !important;
    text-decoration: none !important;
    letter-spacing: 0.02em;
}

.sigmas-author__link:hover {
    color: var(--md-accent-fg-color) !important;
}

/* Hide right TOC sidebar — content is wide enough without it */
.md-sidebar--secondary {
    display: none !important;
}

/* Main tabs visibility */
.md-tabs__item {
    display: inline-block;
}

/* Mermaid containers */
.mermaid {
    min-height: 200px;
    margin: 20px 0;
    text-align: center;
    visibility: visible !important;
    display: block !important;
    white-space: pre;
    font-family: inherit;
}

/* Contact Section Styles */
.contact-grid {
    display: grid;
    gap: 15px;
    margin-top: 20px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.2s, border-color 0.2s;
}

.contact-item--split {
    justify-content: space-between;
}

.contact-item--split .contact-link {
    width: auto;
}

.contact-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--md-primary-fg-color);
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    color: inherit !important;
    width: 100%;
}

.copy-button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--md-primary-fg-color);
    padding: 5px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9em;
    font-weight: 500;
}

.copy-button:hover {
    background: rgba(38, 166, 154, 0.1);
}

#email-copy-status {
    transition: all 0.3s ease;
}

/* Shared animation shell (global wrapper injected by include_html) */
.anim-brand-shell {
    --anim-accent: var(--md-primary-fg-color, #26A69A);
    --anim-accent-2: #324AB2;
    --anim-warm: var(--md-accent-fg-color, #FFB343);
    --anim-brand-font: var(--md-text-font-family, inherit);
    --anim-bg: var(--md-default-bg-color, #ffffff);
    --anim-fg: var(--md-default-fg-color, #0f172a);
    --anim-border: color-mix(in srgb, var(--anim-fg) 18%, transparent);
    --anim-footer-border: rgba(15, 23, 42, .28);
    --anim-footer-fg: rgba(15, 23, 42, .84);
    --anim-logo-opacity: .34;
    --anim-logo-filter: saturate(1.08) contrast(1.04);
    --anim-surface: color-mix(in srgb, var(--anim-bg) 96%, var(--anim-fg) 4%);
    --anim-content-fg: color-mix(in srgb, var(--anim-fg) 94%, transparent);
    --anim-content-muted: color-mix(in srgb, var(--anim-fg) 72%, transparent);
    --anim-content-link: #0B57D0;
    margin: 18px 0;
    border: 1px solid var(--anim-border);
    border-radius: 16px;
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--anim-bg) 92%, #EAF1FF 8%),
            var(--anim-bg));
    box-shadow: 0 12px 30px color-mix(in srgb, var(--anim-fg) 12%, transparent);
    padding: 10px 10px 50px;
    position: relative;
    isolation: isolate;
    font-family: var(--anim-brand-font);
    color: var(--anim-fg);
    line-height: 1.45;
}

.anim-brand-shell::before {
    content: "5SIGMAS · Animation Library";
    position: absolute;
    left: 12px;
    right: 138px;
    bottom: 10px;
    padding-top: 6px;
    border-top: 1px solid var(--anim-footer-border);
    color: var(--anim-footer-fg);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.2;
    pointer-events: none;
    z-index: 1;
}

.anim-brand-shell::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 8px;
    width: 120px;
    height: 30px;
    background: url("/assets/logo.svg") no-repeat center / contain;
    opacity: var(--anim-logo-opacity);
    filter: var(--anim-logo-filter);
    pointer-events: none;
    z-index: 1;
}

.anim-brand-shell__toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 8px;
    position: relative;
    z-index: 3;
}

.anim-brand-shell[data-anim-fullscreen="off"] .anim-brand-shell__toolbar {
    display: none;
}

.anim-brand-shell__btn {
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--anim-accent-2) 38%, transparent);
    background: color-mix(in srgb, var(--anim-accent-2) 12%, transparent);
    color: var(--anim-fg);
    font-family: inherit;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    padding: 7px 12px;
    cursor: pointer;
}

.anim-brand-shell__btn:hover {
    border-color: color-mix(in srgb, var(--anim-accent-2) 56%, transparent);
    background: color-mix(in srgb, var(--anim-accent-2) 18%, transparent);
}

.anim-brand-shell__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--anim-accent-2) 26%, transparent);
}

.anim-brand-shell__viewport {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: clamp(6px, 0.9vw, 10px);
    color: var(--anim-content-fg);
    color-scheme: light;
    touch-action: pan-y;
}

[data-md-color-scheme="slate"] .anim-brand-shell__viewport {
    color-scheme: dark;
}

.anim-brand-shell__viewport>* {
    width: 100%;
    max-width: 100%;
}

.anim-brand-shell__viewport :is(.ta-demo, .nn-demo, .ml-demo, .ai-mat, .ai-tabs, .nn-tabs, .mlops-walkthrough, .s2, .sigma-graphic, .sigmas-dcspace, .dcs-hero, .ml-tabs, .ta-tabs) {
    font-family: inherit !important;
}

.anim-brand-shell__viewport :where(button, input, select, textarea) {
    font-family: inherit !important;
}

.anim-brand-shell__viewport>:is(.ta-demo, .ta-tabs, .ai-tabs, .ai-mat, .nn-tabs, .mlops-walkthrough, .s2, .ml-tabs) {
    width: 100%;
    max-width: none;
}

.anim-brand-shell :is(img, svg, canvas, video, iframe) {
    max-width: 100%;
}

.anim-brand-shell .ta-demo {
    margin: 0;
}

.anim-brand-shell .ai-mat {
    padding-bottom: var(--p) !important;
}

.anim-brand-shell .ta-demo::before,
.anim-brand-shell .ta-demo::after {
    display: none !important;
}

.anim-brand-shell[data-anim-contrast="force"] .anim-brand-shell__viewport :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, small, span, label, legend, summary, blockquote, code, pre, th, td) {
    color: var(--anim-content-fg) !important;
}

.anim-brand-shell[data-anim-contrast="force"] .anim-brand-shell__viewport :where(a) {
    color: var(--anim-content-link) !important;
}

.anim-brand-shell[data-anim-contrast="force"] .anim-brand-shell__viewport :where(button, input, select, textarea) {
    color: var(--anim-content-fg) !important;
    border-color: color-mix(in srgb, var(--anim-content-fg) 24%, transparent) !important;
}

.anim-brand-shell[data-anim-contrast="force"] .anim-brand-shell__viewport :where(.ta-card, .ta-section, .ta-vizbox, article, section, aside, pre, table) {
    border-color: color-mix(in srgb, var(--anim-content-fg) 18%, transparent) !important;
}

/* Datacenters en el espacio snippets */
.anim-brand-shell__viewport .dcf-snippet {
    border-radius: 16px !important;
}

.anim-brand-shell__viewport .dcf-snippet .viz-scroll {
    overflow-x: visible !important;
}

.anim-brand-shell__viewport .dcf-snippet .viz {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.anim-brand-shell__viewport .dcf-snippet .read span {
    border-radius: 10px !important;
}

@media (max-width: 760px) {
    .anim-brand-shell {
        margin-left: -0.55rem;
        margin-right: -0.55rem;
        padding-left: 6px;
        padding-right: 6px;
    }

    .anim-brand-shell__viewport .dcf-snippet {
        padding: 12px !important;
        gap: 10px !important;
    }

    .anim-brand-shell__viewport .dcf-snippet .head {
        gap: 5px !important;
    }

    .anim-brand-shell__viewport .dcf-snippet .title {
        font-size: 19px !important;
        line-height: 1.08 !important;
    }

    .anim-brand-shell__viewport .dcf-snippet .sub {
        font-size: 12.5px !important;
        line-height: 1.35 !important;
    }

    .anim-brand-shell__viewport .dcf-snippet .read {
        display: grid !important;
        gap: 6px !important;
    }

    .anim-brand-shell__viewport .dcf-snippet .read span {
        padding: 7px 9px !important;
        font-size: 11.5px !important;
    }
}

[data-md-color-scheme="slate"] .anim-brand-shell::after {
    background-image: url("/assets/logo_white.svg");
    opacity: var(--anim-logo-opacity);
    filter: var(--anim-logo-filter);
}

[data-md-color-scheme="slate"] .anim-brand-shell {
    --anim-border: color-mix(in srgb, #e2e8f0 24%, transparent);
    --anim-footer-border: rgba(226, 232, 240, .34);
    --anim-footer-fg: rgba(241, 245, 249, .82);
    --anim-logo-opacity: .28;
    --anim-logo-filter: saturate(1.12) contrast(1.08);
    --anim-surface: color-mix(in srgb, #0f172a 82%, #1e293b 18%);
    --anim-content-fg: rgba(241, 245, 249, 0.96);
    --anim-content-muted: rgba(203, 213, 225, 0.82);
    --anim-content-link: #7CC7FF;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 8, 23, 0.96));
    box-shadow: 0 16px 36px rgba(2, 8, 23, 0.44);
}

.anim-shell-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.anim-shell-modal.is-open {
    display: flex;
}

.anim-shell-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 8, 23, 0.68);
    backdrop-filter: blur(2px);
}

.anim-shell-modal__dialog {
    position: relative;
    width: 98vw;
    height: 98vh;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: var(--md-default-bg-color, #ffffff);
    color: var(--md-default-fg-color, #0f172a);
    box-shadow: 0 24px 70px rgba(2, 8, 23, 0.45);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.anim-shell-modal__head {
    display: flex;
    justify-content: flex-end;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    padding: 10px 12px;
}

.anim-shell-modal__close {
    appearance: none;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font-size: 13px;
    font-weight: 800;
    padding: 6px 10px;
    cursor: pointer;
}

.anim-shell-modal__body {
    flex: 1;
    overflow: auto;
    padding: 10px;
    color-scheme: light;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.anim-shell-modal__body>* {
    margin: 0;
    width: 100%;
}

.anim-shell-modal__body>.anim-brand-shell {
    display: flex;
    flex-direction: column;
}

.anim-shell-modal__body .anim-brand-shell__viewport {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.anim-scale-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.anim-shell-modal__body[data-anim-contrast="force"] {
    color: var(--md-default-fg-color, #0f172a);
}

.anim-shell-modal__body[data-anim-contrast="force"] :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, small, span, label, legend, summary, blockquote, code, pre, th, td) {
    color: var(--md-default-fg-color, #0f172a) !important;
}

.anim-shell-modal__body[data-anim-contrast="force"] :where(a) {
    color: #146EEB !important;
}

body.anim-shell-modal-open {
    overflow: hidden;
}

[data-md-color-scheme="slate"] .anim-shell-modal__dialog {
    background: #0b1220;
    color: rgba(241, 245, 249, 0.95);
    border-color: rgba(148, 163, 184, 0.28);
}

[data-md-color-scheme="slate"] .anim-shell-modal__body {
    color-scheme: dark;
}

[data-md-color-scheme="slate"] .anim-shell-modal__body[data-anim-contrast="force"] :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, small, span, label, legend, summary, blockquote, code, pre, th, td) {
    color: rgba(241, 245, 249, 0.96) !important;
}

[data-md-color-scheme="slate"] .anim-shell-modal__body[data-anim-contrast="force"] :where(a) {
    color: #7CC7FF !important;
}

.anim-shell-modal__body>.anim-brand-shell {
    margin: 0;
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
}

.anim-shell-modal__body>.anim-brand-shell[data-anim-shell-live="modal"] {
    min-height: 0;
    height: auto;
    align-self: flex-start;
}

.anim-shell-modal__body>.anim-brand-shell[data-anim-shell-live="modal"] .anim-brand-shell__toolbar {
    display: none;
}

.anim-shell-modal__body>.anim-brand-shell[data-anim-shell-live="modal"] .anim-brand-shell__viewport {
    flex: 0 1 auto;
}

.anim-shell-modal__body>.anim-brand-shell .anim-brand-shell__viewport {
    flex: 1;
    min-height: 0;
    padding: clamp(8px, 1vw, 14px);
}

/* ─── Series index cards (series/index.md) ────────────────────────────────── */
/* Colors injected via CSS vars set by nav-gradient.js per series slug */

.si-grid {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.5rem 0;
}

.si-card {
    --series-accent: var(--sc, #324AB2);
    --series-ink: var(--series-accent);
    --series-glow: rgba(50, 74, 178, 0.18);
    position: relative;
    flex: 1;
    min-width: 220px;
    text-decoration: none;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--series-accent) 30%, transparent);
    padding: 1.25rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    color: inherit;
    overflow: hidden;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--series-accent) 10%, var(--md-default-bg-color)) 0%,
            color-mix(in srgb, var(--series-accent) 3%, var(--md-default-bg-color)) 100%);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--series-glow) 36%, transparent);
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.si-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg,
            color-mix(in srgb, var(--series-accent) 85%, white),
            var(--series-accent));
}

.si-card:hover {
    border-color: color-mix(in srgb, var(--series-accent) 55%, transparent);
    transform: translateY(-3px);
    box-shadow: 0 22px 44px color-mix(in srgb, var(--series-glow) 48%, transparent);
}

.si-label {
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--series-ink);
    font-weight: 700;
}

.si-title {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    color: color-mix(in srgb, var(--series-ink) 72%, var(--md-default-fg-color));
}

.si-desc {
    font-size: .88rem;
    color: color-mix(in srgb, var(--md-default-fg-color) 74%, transparent);
    line-height: 1.45;
}

.si-cta {
    margin-top: auto;
    padding-top: .5rem;
    font-size: .85rem;
    color: var(--series-ink);
    font-weight: 600;
}

[data-md-color-scheme="slate"] .si-card {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--series-accent) 16%, #0b1220) 0%,
            color-mix(in srgb, var(--series-accent) 6%, #0b1220) 100%);
}

.sc-card[data-series-slug],
.scat-card[data-series-slug] {
    --series-accent: #324AB2;
    --series-ink: var(--series-accent);
    --series-glow: rgba(50, 74, 178, 0.18);
    border-color: color-mix(in srgb, var(--series-accent) 22%, transparent);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--series-accent) 9%, var(--md-default-bg-color)) 0%,
            color-mix(in srgb, var(--series-accent) 2%, var(--md-default-bg-color)) 100%);
}

a.sc-card[data-series-slug]:hover,
a.scat-card[data-series-slug]:hover {
    box-shadow: 0 18px 34px color-mix(in srgb, var(--series-glow) 40%, transparent);
}

.sc-card[data-series-slug] .sc-bar,
.scat-card[data-series-slug] .scat-bar {
    background: linear-gradient(90deg,
            color-mix(in srgb, var(--series-accent) 85%, white),
            var(--series-accent)) !important;
}

.sc-card[data-series-slug] .sc-cta,
.scat-card[data-series-slug] .scat-cta {
    color: var(--series-ink) !important;
}

[data-md-color-scheme="slate"] .sc-card[data-series-slug],
[data-md-color-scheme="slate"] .scat-card[data-series-slug] {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--series-accent) 13%, #0b1220) 0%,
            color-mix(in srgb, var(--series-accent) 5%, #0b1220) 100%);
}

/* ─── Left navigation sidebar ─────────────────────────────────────────────── */

/* Sidebar ambient gradient */
.md-sidebar--primary .md-sidebar__scrollwrap {
    background-image:
        linear-gradient(180deg,
            color-mix(in srgb, var(--md-default-bg-color) 84%, rgba(50, 74, 178, 0.12)) 0%,
            color-mix(in srgb, var(--md-default-bg-color) 92%, rgba(38, 166, 154, 0.08)) 100%);
    border-right: 1px solid color-mix(in srgb, var(--md-default-fg-color) 8%, transparent);
}

/* Series section headers */
.md-nav--primary .md-nav[data-md-level='1'] > .md-nav__list > .md-nav__item--section[data-series-slug] {
    --series-accent: #324AB2;
    --series-ink: var(--series-accent);
    --series-glow: rgba(50, 74, 178, 0.18);
    margin: 0.1rem 0 0.45rem;
}

.md-nav--primary .md-nav[data-md-level='1'] > .md-nav__list > .md-nav__item--section[data-series-slug] > .md-nav__toggle {
    display: none;
}

.md-nav--primary .md-nav[data-md-level='1'] > .md-nav__list > .md-nav__item--section[data-series-slug] > .md-nav__link {
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.78rem 0.82rem 0.72rem;
    border: 1px solid color-mix(in srgb, var(--series-accent) 18%, transparent);
    border-radius: 12px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--series-accent) 14%, var(--md-default-bg-color)),
            color-mix(in srgb, var(--series-accent) 6%, var(--md-default-bg-color)));
    color: var(--series-ink) !important;
    box-shadow: none;
    opacity: 1 !important;
    pointer-events: auto;
    cursor: pointer;
}

.md-nav--primary .md-nav[data-md-level='1'] > .md-nav__list > .md-nav__item--section[data-series-slug] > .md-nav__link .md-ellipsis {
    color: inherit;
}

.md-nav--primary .md-nav[data-md-level='1'] > .md-nav__list > .md-nav__item--section[data-series-slug] > .md-nav__link .md-nav__icon {
    display: none;
}

.md-nav--primary .md-nav[data-md-level='1'] > .md-nav__list > .md-nav__item--section[data-series-slug] > .md-nav__toggle ~ .md-nav {
    display: grid;
    grid-template-rows: minmax(.4rem, 0fr);
    opacity: 0;
    visibility: collapse;
    transition: grid-template-rows .25s cubic-bezier(.86, 0, .07, 1), opacity .25s, visibility 0ms .25s;
    margin: 0.28rem 0 0 0.35rem;
    padding: 0.08rem 0 0.08rem 0.7rem;
    border-left: 1px solid color-mix(in srgb, var(--series-accent) 18%, transparent);
}

.md-nav--primary .md-nav[data-md-level='1'] > .md-nav__list > .md-nav__item--section[data-series-slug] > .md-nav__toggle ~ .md-nav > .md-nav__list {
    overflow: hidden;
}

.md-nav--primary .md-nav[data-md-level='1'] > .md-nav__list > .md-nav__item--section[data-series-slug] > .md-nav__toggle:checked ~ .md-nav {
    grid-template-rows: minmax(.4rem, 1fr);
    opacity: 1;
    visibility: visible;
    transition: grid-template-rows .25s cubic-bezier(.86, 0, .07, 1), opacity .15s .1s, visibility 0ms;
}

.md-nav--primary .md-nav[data-md-level='1'] > .md-nav__list > .md-nav__item--section[data-series-slug] > .md-nav__toggle:checked + .md-nav__link {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--series-accent) 22%, var(--md-default-bg-color)),
            color-mix(in srgb, var(--series-accent) 12%, var(--md-default-bg-color)));
    border-color: color-mix(in srgb, var(--series-accent) 42%, transparent);
}

/* Chapter links */
.md-nav--primary .md-nav[data-md-level='1'] > .md-nav__list > .md-nav__item--section[data-series-slug] .md-nav[data-md-level='2'] .md-nav__link {
    font-size: 0.76rem;
    margin: 0.05rem 0;
    padding: 0.36rem 0.64rem 0.36rem 0.88rem;
    border-left: 2px solid transparent;
    border-radius: 0 10px 10px 0;
    color: color-mix(in srgb, var(--md-default-fg-color) 64%, transparent);
    transition: border-color 0.15s, color 0.15s, background-color 0.15s, transform 0.15s;
}

.md-nav--primary .md-nav[data-md-level='1'] > .md-nav__list > .md-nav__item--section[data-series-slug] .md-nav[data-md-level='2'] .md-nav__link:hover {
    border-left-color: color-mix(in srgb, var(--series-accent) 52%, transparent);
    background: color-mix(in srgb, var(--series-accent) 8%, transparent);
    color: color-mix(in srgb, var(--series-ink) 82%, var(--md-default-fg-color));
    transform: translateX(1px);
}

/* Active chapter */
.md-nav--primary .md-nav[data-md-level='1'] > .md-nav__list > .md-nav__item--section[data-series-slug] .md-nav[data-md-level='2'] .md-nav__item--active > .md-nav__link {
    border-left-color: var(--series-accent);
    background: color-mix(in srgb, var(--series-accent) 14%, transparent);
    color: var(--series-ink) !important;
    font-weight: 600;
}

[data-md-color-scheme="default"] .md-sidebar--primary .md-sidebar__scrollwrap {
    background-image:
        linear-gradient(180deg,
            rgba(237, 242, 249, 0.98) 0%,
            rgba(245, 248, 252, 0.98) 100%);
}

[data-md-color-scheme="default"] .md-nav--primary .md-nav[data-md-level='1'] > .md-nav__list > .md-nav__item--section[data-series-slug] > .md-nav__link {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--series-accent) 14%, #ffffff),
            color-mix(in srgb, var(--series-accent) 5%, #ffffff));
}

[data-md-color-scheme="slate"] .md-sidebar--primary .md-sidebar__scrollwrap {
    background-image:
        linear-gradient(180deg,
            rgba(20, 27, 41, 0.98) 0%,
            rgba(21, 27, 40, 0.99) 100%);
}

[data-md-color-scheme="slate"] .md-nav--primary .md-nav[data-md-level='1'] > .md-nav__list > .md-nav__item--section[data-series-slug] > .md-nav__link {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--series-accent) 20%, #141a28),
            color-mix(in srgb, var(--series-accent) 10%, #141a28));
}

/* "SERIES" top-level eyebrow label */
.md-nav--primary > .md-nav__title {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--md-default-fg-color) 38%, transparent);
}

/* ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .anim-brand-shell {
        padding: 8px 8px 48px;
    }

    .anim-brand-shell::before {
        right: 104px;
    }

    .anim-brand-shell::after {
        width: 88px;
        height: 24px;
    }

    .anim-shell-modal {
        padding: 10px;
    }

    .anim-shell-modal__dialog {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
}

/* ─── Optional expandable blocks (series articles) ──────────────────────────── */
.s5-optional {
    margin: 1.5rem 0;
    border: 1px solid color-mix(in srgb, var(--md-default-fg-color) 11%, transparent);
    border-left: 3px solid var(--md-primary-fg-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--md-primary-fg-color) 4%, var(--md-default-bg-color));
    overflow: hidden;
}

.s5-optional > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.1rem;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--md-default-fg-color);
    user-select: none;
    transition: background 0.15s;
}

.s5-optional > summary::-webkit-details-marker { display: none; }

.s5-optional > summary::before {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--md-primary-fg-color) 14%, transparent);
    color: var(--md-primary-fg-color);
    font-size: 13px;
    font-weight: 800;
    transition: background 0.15s;
}

.s5-optional[open] > summary::before { content: "−"; }

.s5-optional > summary:hover {
    background: color-mix(in srgb, var(--md-primary-fg-color) 5%, transparent);
}

.s5-optional > summary:hover::before {
    background: color-mix(in srgb, var(--md-primary-fg-color) 22%, transparent);
}

.s5-optional__body {
    padding: 0 1.25rem 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--md-default-fg-color) 8%, transparent);
}

.s5-optional__body p {
    margin: 0.85rem 0;
    line-height: 1.7;
    font-size: 0.93rem;
}

.s5-optional__body pre {
    margin: 0.9rem 0;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    overflow-x: auto;
    background: color-mix(in srgb, var(--md-default-fg-color) 6%, var(--md-default-bg-color));
    border: 1px solid color-mix(in srgb, var(--md-default-fg-color) 10%, transparent);
}

.s5-optional__body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
}

/* ── Article / series video embed ───────────────────────────────────────────── */
.s5-video-embed {
    margin: 1.75rem 0 2.25rem;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    /* Subtle border visible on both light and dark themes */
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--md-default-fg-color) 12%, transparent),
                0 4px 20px color-mix(in srgb, var(--md-default-fg-color) 6%, transparent);
}

.s5-video-embed video {
    display: block;
    width: 100%;
    height: auto;
    /* Prevents any gap below the video element */
    vertical-align: bottom;
}

.s5-article-audio {
    margin: -0.75rem 0 2.25rem;
    padding: 1rem 1.1rem 1.15rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--md-default-fg-color) 4%, var(--md-default-bg-color));
    border: 1px solid color-mix(in srgb, var(--md-default-fg-color) 10%, transparent);
}

.s5-article-audio__meta {
    margin-bottom: 0.75rem;
}

.s5-article-audio__eyebrow,
.s5-article-audio__title,
.s5-article-audio__detail {
    margin: 0;
}

.s5-article-audio__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--md-primary-fg-color);
}

.s5-article-audio__title {
    margin-top: 0.2rem;
    font-size: 1rem;
    font-weight: 700;
}

.s5-article-audio__detail {
    margin-top: 0.18rem;
    font-size: 0.85rem;
    color: var(--md-default-fg-color--light);
}

.s5-article-audio__player {
    width: 100%;
}