@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
    --azin-blue: #29b6f6;
    --azin-blue-bright: #38bdf8;
    --azin-blue-dim: rgba(41, 182, 246, 0.12);
    --azin-grid-width: 96%;
}

.md-main__inner {
    max-width: var(--azin-grid-width) !important;
    width: 100%;
}

.md-grid {
    width: 100%;
}

/* --------------------------------------------------------------------- */
/* Dark palette — "azin"                                                  */
/* --------------------------------------------------------------------- */
[data-md-color-scheme="azin"] {
    --azin-blue: #29b6f6;
    --azin-blue-bright: #38bdf8;
    --azin-blue-dim: rgba(41, 182, 246, 0.15);

    --azin-bg: #08080a;
    --azin-bg-elevated: #111114;
    --azin-header-bg: rgba(8, 8, 10, 0.75);
    --azin-border: rgba(255, 255, 255, 0.08);
    --azin-border-strong: rgba(255, 255, 255, 0.15);
    --azin-text-muted: #8e9aa8;
    --azin-hero-glow-color: rgba(41, 182, 246, 0.2);
    --azin-hero-glow: radial-gradient(
        ellipse at center,
        rgba(41, 182, 246, 0.2) 0%,
        rgba(41, 182, 246, 0.05) 45%,
        transparent 70%
    );
    --azin-badge-bg: rgba(255, 255, 255, 0.03);
    --azin-btn-secondary-bg: rgba(255, 255, 255, 0.05);
    --azin-btn-secondary-border: var(--azin-border);
    --azin-card-hover-bg: rgba(255, 255, 255, 0.02);
    --azin-accent-gradient: linear-gradient(
        135deg,
        var(--azin-blue) 0%,
        #00e5ff 100%
    );
    --azin-cta-gradient: radial-gradient(
        circle,
        rgba(41, 182, 246, 0.08) 0%,
        transparent 70%
    );
    --azin-cta-bg: linear-gradient(135deg, #0f1c22 0%, #0b1519 100%);
    --azin-cta-border: rgba(41, 182, 246, 0.15);
    --azin-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    --azin-card-shadow-hover: 0 12px 30px rgba(41, 182, 246, 0.18);

    --azin-tok-kw: var(--azin-blue);
    --azin-tok-type: #c792ea;
    --azin-tok-fn: #82e0aa;
    --azin-tok-num: #f2b35c;
    --azin-tok-str: #a5d6a7;

    --azin-btn-primary-bg: var(--azin-blue);
    --azin-btn-primary-text: #06141a;
    --azin-btn-primary-border: var(--azin-blue);
    --azin-btn-primary-hover-bg: var(--azin-blue-bright);
    --azin-btn-primary-hover-border: var(--azin-blue-bright);

    --azin-btn-secondary-bg: rgba(255, 255, 255, 0.04);
    --azin-btn-secondary-text: #ffffff;
    --azin-btn-secondary-border: rgba(255, 255, 255, 0.15);
    --azin-btn-secondary-hover-bg: rgba(41, 182, 246, 0.08);
    --azin-btn-secondary-hover-border: var(--azin-blue);
    --azin-btn-secondary-hover-text: var(--azin-blue);

    --md-default-bg-color: var(--azin-bg);
    --md-default-fg-color: #f5f5f5;
    --md-default-fg-color--light: #b8b8b8;
    --md-default-fg-color--lighter: #7a7a7a;
    --md-default-fg-color--lightest: #3a3a3a;

    --md-primary-fg-color: var(--azin-bg);
    --md-primary-bg-color: #ffffff;
    --md-primary-fg-color--light: var(--azin-bg);
    --md-primary-fg-color--dark: var(--azin-bg);

    --md-accent-fg-color: var(--azin-blue);
    --md-accent-fg-color--transparent: var(--azin-blue-dim);
    --md-accent-bg-color: #ffffff;

    --md-typeset-color: #e5e5e5;
    --md-typeset-a-color: var(--azin-blue);

    --md-code-bg-color: var(--azin-bg-elevated);
    --md-code-fg-color: #d8d8d8;
    --md-code-hl-color: var(--azin-blue-dim);
    --md-code-hl-keyword-color: var(--azin-tok-kw);
    --md-code-hl-function-color: var(--azin-tok-fn);
    --md-code-hl-number-color: var(--azin-tok-num);
    --md-code-hl-string-color: var(--azin-tok-str);
    --md-code-hl-constant-color: var(--azin-tok-type);
    --md-code-hl-name-color: var(--md-default-fg-color);
    --md-code-hl-operator-color: var(--md-default-fg-color--light);
    --md-code-hl-punctuation-color: var(--md-default-fg-color--light);
    --md-code-hl-comment-color: var(--md-default-fg-color--lighter);

    --md-footer-bg-color: #060608;
    --md-footer-bg-color--dark: #040405;
    --md-footer-fg-color: #c9c9c9;
    --md-footer-fg-color--light: #8a8a8a;

    --md-admonition-bg-color: var(--azin-bg-elevated);

    color-scheme: dark;
}

/* --------------------------------------------------------------------- */
/* Light palette — "azin-light"                                           */
/* --------------------------------------------------------------------- */
[data-md-color-scheme="azin-light"] {
    --azin-blue: #0288d1;
    --azin-blue-bright: #039be5;
    --azin-blue-dim: rgba(2, 136, 209, 0.1);

    --azin-bg: #ffffff; /* plain white background */
    --azin-bg-elevated: #ffffff; /* pure white for cards and elements */
    --azin-header-bg: rgba(255, 255, 255, 0.8); /* translucent white header */
    --azin-border: rgba(30, 41, 59, 0.15);
    --azin-border-strong: rgba(30, 41, 59, 0.3);
    --azin-text-muted: #475569;
    --azin-hero-glow-color: rgba(2, 136, 209, 0.45);
    --azin-hero-glow: radial-gradient(
        ellipse at center,
        rgba(2, 136, 209, 0.42) 0%,
        rgba(2, 136, 209, 0.15) 45%,
        transparent 70%
    );
    --azin-badge-bg: rgba(2, 136, 209, 0.06);
    --azin-btn-secondary-bg: rgba(2, 136, 209, 0.04);
    --azin-btn-secondary-border: rgba(2, 136, 209, 0.18);
    --azin-card-hover-bg: rgba(2, 136, 209, 0.02);
    --azin-accent-gradient: linear-gradient(135deg, #01579b 0%, #00838f 100%);
    --azin-cta-gradient: radial-gradient(
        circle,
        rgba(2, 136, 209, 0.08) 0%,
        transparent 70%
    );
    --azin-cta-bg: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    --azin-cta-border: rgba(2, 136, 209, 0.15);
    --azin-card-shadow: 0 4px 20px rgba(2, 136, 209, 0.04);
    --azin-card-shadow-hover: 0 12px 30px rgba(2, 136, 209, 0.12);

    --azin-tok-kw: #0288d1;
    --azin-tok-type: #7b1fa2;
    --azin-tok-fn: #2e7d32;
    --azin-tok-num: #e64a19;
    --azin-tok-str: #2e7d32;

    --azin-btn-primary-bg: var(--azin-blue);
    --azin-btn-primary-text: #ffffff;
    --azin-btn-primary-border: var(--azin-blue);
    --azin-btn-primary-hover-bg: var(--azin-blue-bright);
    --azin-btn-primary-hover-border: var(--azin-blue-bright);

    --azin-btn-secondary-bg: #ffffff;
    --azin-btn-secondary-text: #1e293b;
    --azin-btn-secondary-border: rgba(2, 136, 209, 0.25);
    --azin-btn-secondary-hover-bg: rgba(2, 136, 209, 0.06);
    --azin-btn-secondary-hover-border: var(--azin-blue);
    --azin-btn-secondary-hover-text: var(--azin-blue);

    --md-default-bg-color: var(--azin-bg);
    --md-default-fg-color: #1e293b;
    --md-default-fg-color--light: #475569;
    --md-default-fg-color--lighter: #64748b;
    --md-default-fg-color--lightest: #cbd5e1;

    --md-primary-fg-color: var(--azin-bg);
    --md-primary-bg-color: #1e293b;
    --md-primary-fg-color--light: var(--azin-bg);
    --md-primary-fg-color--dark: var(--azin-bg);

    --md-accent-fg-color: var(--azin-blue);
    --md-accent-fg-color--transparent: var(--azin-blue-dim);
    --md-accent-bg-color: #ffffff;

    --md-typeset-color: #1e293b;
    --md-typeset-a-color: var(--azin-blue);

    --md-code-bg-color: var(--azin-bg-elevated);
    --md-code-fg-color: #0f172a;
    --md-code-hl-color: rgba(2, 136, 209, 0.08);
    --md-code-hl-keyword-color: var(--azin-tok-kw);
    --md-code-hl-function-color: var(--azin-tok-fn);
    --md-code-hl-number-color: var(--azin-tok-num);
    --md-code-hl-string-color: var(--azin-tok-str);
    --md-code-hl-constant-color: var(--azin-tok-type);
    --md-code-hl-name-color: var(--md-default-fg-color);
    --md-code-hl-operator-color: var(--md-default-fg-color--light);
    --md-code-hl-punctuation-color: var(--md-default-fg-color--light);
    --md-code-hl-comment-color: var(--md-default-fg-color--lighter);

    --md-footer-bg-color: #cbd5e1;
    --md-footer-bg-color--dark: #94a3b8;
    --md-footer-fg-color: #1e293b;
    --md-footer-fg-color--light: #475569;

    --md-admonition-bg-color: var(--azin-bg-elevated);

    color-scheme: light;
}

/* --------------------------------------------------------------------- */
/* Typography                                                             */
/* --------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

body,
input {
    font-family:
        "Plus Jakarta Sans",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;
}

.md-content,
.azin-landing {
    overflow-x: hidden;
}

.md-typeset code,
.md-typeset kbd,
.md-typeset pre,
pre,
code {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.md-typeset h1 {
    font-weight: 800;
    font-size: 2.2rem;
    color: var(--md-default-fg-color);
}

.md-typeset h2 {
    font-size: 1.5rem;
    margin-top: 2.2em;
    padding-bottom: 0.4em;
    border-bottom: 1px solid var(--azin-border);
}

.azin-wordmark .azin-accent {
    color: var(--azin-blue);
}

/* --------------------------------------------------------------------- */
/* Header / nav                                                           */
/* --------------------------------------------------------------------- */
.md-header {
    background-color: var(--azin-header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--azin-border);
    box-shadow: none;
}

.md-header__title {
    font-weight: 800;
    letter-spacing: -0.01em;
}

.md-header__topic .md-ellipsis::first-letter {
    color: var(--azin-blue) !important;
}

.md-search,
.md-header__inner > label[for="__search"] {
    order: 10;
}

.md-header__source {
    order: 12;
    flex-shrink: 0;
}

@media screen and (min-width: 60em) {
    [data-md-toggle="search"]:checked ~ .md-header .md-header__source,
    .md-header[data-md-state="search"] .md-header__source {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        width: auto !important;
        overflow: visible !important;
        flex: none !important;
    }

    [data-md-toggle="search"]:checked ~ .md-header .md-header__option,
    .md-header[data-md-state="search"] .md-header__option {
        display: inline-flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    [data-md-toggle="search"]:checked
        ~ .md-header
        .md-header__option
        .md-header__button,
    .md-header[data-md-state="search"] .md-header__option .md-header__button {
        transition: none !important;
        transform: none !important;
    }
}

.azin-header-socials {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0 0.4rem;
}

.azin-header-socials .md-header__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}

.azin-header-socials .md-header__button.md-icon {
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    color: var(--md-default-fg-color--light);
    border-radius: 50%;
    transition:
        color 0.25s ease,
        background-color 0.25s ease;
    cursor: pointer;
}

.azin-header-socials .md-header__button.md-icon:not([hidden]) {
    display: inline-flex;
}

.azin-header-socials .md-header__button.md-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.azin-header-socials .md-header__button.md-icon:hover {
    color: var(--azin-blue);
    background-color: var(--azin-blue-dim);
}

.azin-header-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    color: var(--md-default-fg-color--light);
    border-radius: 50%;
    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        transform 0.2s ease;
}

.azin-header-social-link svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: currentColor;
}

.azin-header-social-link:hover {
    color: var(--azin-blue);
    background-color: var(--azin-blue-dim);
    transform: translateY(-1px);
}

.md-tabs {
    background-color: transparent;
}

.md-tabs__link {
    font-weight: 500;
    opacity: 0.75;
}

.md-tabs__link--active,
.md-tabs__link:hover {
    opacity: 1;
    color: var(--azin-blue);
}

.md-search__form {
    border: 1px solid transparent;
    border-radius: 8px !important;
    background-color: rgba(255, 255, 255, 0.06);
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.md-search__form:focus-within {
    border-color: var(--azin-blue) !important;
    box-shadow: 0 0 8px rgba(0, 162, 255, 0.25) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

[data-md-color-scheme="azin-light"] .md-search__form {
    background-color: rgba(2, 136, 209, 0.06);
    border: 1px solid rgba(2, 136, 209, 0.08);
}

[data-md-color-scheme="azin-light"] .md-search__form:focus-within {
    border-color: var(--azin-blue) !important;
    background-color: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 0 8px rgba(0, 162, 255, 0.15) !important;
}

.md-search__input {
    color: var(--md-default-fg-color) !important;
}

.md-search__input::placeholder {
    color: var(--md-default-fg-color--light) !important;
    opacity: 0.7 !important;
}

/* --------------------------------------------------------------------- */
/* Sidebar / nav                                                          */
/* --------------------------------------------------------------------- */
.md-nav__title {
    font-weight: 700;
    color: var(--md-default-fg-color);
}

.md-sidebar--secondary .md-nav__title {
    font-weight: 700 !important;
    color: var(--md-default-fg-color--light) !important;
    font-size: 0.85rem !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    padding: 0 !important;
    margin-bottom: 0.3rem !important;
    border-bottom: none !important;
}

.md-nav__link {
    font-weight: 450;
}

.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover {
    color: var(--azin-blue);
}

.md-nav__item .md-nav__link--active {
    font-weight: 600;
}

.md-nav--primary .md-nav__title[for="__drawer"] {
    background-color: var(--azin-bg);
}

.md-nav__item .md-nav__link--active {
    position: relative;
}

.md-nav__item--section > .md-nav__link {
    font-size: 0.85rem;
}

.md-nav__item--section
    > .md-nav
    > .md-nav__list
    > .md-nav__item
    > .md-nav__link {
    padding-left: 2rem;
}

.md-nav__item--section
    > .md-nav
    > .md-nav__list
    > .md-nav__item
    > .md-nav
    > .md-nav__list
    > .md-nav__item
    > .md-nav__link {
    padding-left: 2.6rem;
}

/* --------------------------------------------------------------------- */
/* Buttons (md-button) — solid pill primary / outlined secondary          */
/* --------------------------------------------------------------------- */
.md-typeset .md-button {
    border-radius: 8px;
    font-weight: 600;
    padding: 0.6em 1.4em;
    border: 1px solid var(--azin-btn-secondary-border);
    background-color: var(--azin-btn-secondary-bg);
    color: var(--azin-btn-secondary-text);
    transition:
        all 0.15s ease,
        transform 0.15s ease;
}

.md-typeset .md-button--primary {
    background-color: var(--azin-btn-primary-bg);
    color: var(--azin-btn-primary-text);
    border-color: var(--azin-btn-primary-border);
}

.md-typeset .md-button--primary:hover {
    background-color: var(--azin-btn-primary-hover-bg);
    border-color: var(--azin-btn-primary-hover-border);
    color: var(--azin-btn-primary-text);
    transform: translateY(-1px);
}

.md-typeset .md-button:not(.md-button--primary):hover {
    border-color: var(--azin-btn-secondary-hover-border);
    color: var(--azin-btn-secondary-hover-text);
    background-color: var(--azin-btn-secondary-hover-bg);
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------- */
/* Cards (grid cards) — matches the bordered card style on /links          */
/* --------------------------------------------------------------------- */
.md-typeset .grid.cards > ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > ol > li {
    border: 1px solid var(--azin-border);
    border-radius: 10px;
    background-color: var(--azin-bg-elevated);
    padding: 1.1rem 1.3rem;
    transition:
        border-color 0.15s ease,
        transform 0.15s ease;
}

.md-typeset .grid.cards > ul > li:hover {
    border-color: var(--azin-blue);
    transform: translateY(-2px);
}

.md-typeset .grid.cards > ul > li > p:first-child {
    margin-top: 0;
    font-weight: 600;
}

/* --------------------------------------------------------------------- */
/* Code blocks & inline code                                              */
/* --------------------------------------------------------------------- */
.md-typeset code {
    background-color: var(--md-code-bg-color);
    border: 1px solid var(--azin-border);
    border-radius: 6px;
    padding: 0.15em 0.5em;
    font-size: 0.82em;
}

.md-typeset pre > code {
    border: none;
    padding: 0;
}

.md-typeset .highlight {
    border: 1px solid var(--azin-border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border-left: 3px solid transparent;
    background-color: var(--md-code-bg-color);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    margin: 1rem 0 !important;
}

.md-typeset .highlight pre {
    padding: 0.7rem 1rem;
    line-height: 1.6;
    background: none;
    font-size: 0.95rem;
}

.md-typeset .highlight:hover {
    border-color: var(--azin-border-strong);
    border-left-color: var(--azin-blue);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

.md-clipboard {
    color: var(--azin-text-muted);
    border-radius: 6px;
    transition:
        color 0.15s ease,
        background-color 0.15s ease;
}

.md-clipboard:hover {
    color: var(--azin-blue);
    background-color: var(--azin-blue-dim);
}

/* --------------------------------------------------------------------- */
/* Admonitions (used for "under construction" notices, etc.)              */
/* --------------------------------------------------------------------- */
.md-typeset .admonition,
.md-typeset details {
    border: 1px solid var(--azin-border);
    border-left: 3px solid var(--azin-blue);
    border-radius: 8px;
    background-color: var(--azin-bg-elevated);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.md-typeset .admonition-title,
.md-typeset summary {
    background-color: transparent;
    font-weight: 600;
}

.md-typeset .admonition-title::before,
.md-typeset summary::before {
    background-color: var(--azin-blue);
}

.md-typeset .warning {
    border-color: var(--azin-border) !important;
    border-left-color: var(--azin-blue) !important;
    color: var(--md-default-fg-color);
}

.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
    background-color: var(--azin-blue-dim) !important;
    color: var(--md-default-fg-color);
}

.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before {
    background-color: var(--azin-blue) !important;
}

.md-typeset .warning > .admonition-title::after,
.md-typeset .warning > summary::after {
    color: var(--azin-blue) !important;
}

/* --------------------------------------------------------------------- */
/* Tables                                                                  */
/* --------------------------------------------------------------------- */
.md-typeset table:not([class]) {
    border: 1px solid var(--azin-border);
    border-radius: 10px;
    overflow: hidden;
}

.md-typeset table:not([class]) th {
    background-color: var(--azin-bg-elevated);
    font-weight: 700;
}

.md-typeset table:not([class]) tr:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

/* --------------------------------------------------------------------- */
/* Footer                                                                  */
/* --------------------------------------------------------------------- */
.md-footer {
    border-top: 1px solid var(--azin-border);
}

.md-footer-meta {
    background-color: var(--md-footer-bg-color--dark);
}

.md-footer__link:hover {
    opacity: 1;
}

/* --------------------------------------------------------------------- */
/* Hero block — used on the docs landing page                             */
/* --------------------------------------------------------------------- */
.azin-hero {
    text-align: center;
    padding: 3rem 1rem 2rem;
}

.azin-hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
}

.azin-hero .azin-accent {
    color: var(--azin-blue);
}

.azin-hero p.azin-subtitle {
    color: var(--azin-text-muted);
    font-size: 1.1rem;
    max-width: 36rem;
    margin: 0 auto;
}

/* --------------------------------------------------------------------- */
/* Misc polish                                                            */
/* --------------------------------------------------------------------- */
.md-typeset a {
    text-decoration: none;
}

.md-typeset a:hover {
    text-decoration: underline;
}

::selection {
    background-color: var(--azin-blue-dim);
    color: var(--azin-blue);
}

.md-typeset hr {
    border-color: var(--azin-border);
}

/* ==========================================================================
   Custom Homepage (overrides/home.html)
   ========================================================================== */

.md-content,
.md-sidebar {
}

/* --- Hero -------------------------------------------------------------- */
.azin-hero-section {
    position: relative;
    overflow: hidden;
    padding: 6.5rem 0 5.5rem;
    text-align: center;
    border-bottom: 1px solid var(--azin-border);
    background-color: var(--azin-bg);
    transition: background-color 0.3s ease;
}

.azin-hero-glow {
    position: absolute;
    top: -18rem;
    left: 50%;
    transform: translateX(-50%);
    width: 60rem;
    height: 36rem;
    background: var(--azin-hero-glow);
    pointer-events: none;
    animation: glowPulse 10s infinite alternate ease-in-out;
}

.azin-hero-inner {
    position: relative;
    max-width: 52rem;
    margin: 0 auto;
    padding: 0 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.azin-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    border: 1px solid var(--azin-border-strong);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--azin-text-muted);
    background-color: var(--azin-badge-bg);
    margin-bottom: 1.75rem;
    transition:
        border-color 0.3s ease,
        background-color 0.3s ease;
}

.azin-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--azin-blue);
    box-shadow: 0 0 0 3px var(--azin-blue-dim);
}

.azin-hero-logo {
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 0 24px rgba(41, 182, 246, 0.3));
}

.azin-hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin: 0 0 1.2rem;
    color: var(--md-default-fg-color);
}

.azin-accent {
    background: var(--azin-accent-gradient) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    display: inline !important;
}

.azin-hero-subtitle {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--azin-text-muted);
    max-width: 35rem;
    margin: 0 0 2.2rem;
    transition: color 0.3s ease;
}

.azin-hero-subtitle code {
    background-color: var(--azin-bg-elevated);
    border: 1px solid var(--azin-border);
    border-radius: 5px;
    padding: 0.1em 0.4em;
    font-size: 0.85em;
    transition: all 0.3s ease;
}

.azin-hero-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.azin-btn-icon {
    margin-right: 0.4em;
    vertical-align: -2px;
}

.azin-hero-code {
    margin-top: 3.5rem;
    width: 100%;
    max-width: 32rem;
}

/* --- Code window mock -------------------------------------------------- */
.azin-code-window {
    text-align: left;
    border: 1px solid var(--azin-border);
    border-radius: 12px;
    background-color: var(--azin-bg-elevated);
    overflow: hidden;
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.4);
    transition:
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease,
        border-color 0.3s ease,
        background-color 0.3s ease;
}

.azin-code-window:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 30px 70px -20px rgba(41, 182, 246, 0.2);
    border-color: var(--azin-border-strong);
}

.azin-code-titlebar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--azin-border);
    transition: border-color 0.3s ease;
}

.azin-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.azin-dot-red {
    background-color: #ff5f57;
}
.azin-dot-yellow {
    background-color: #febc2e;
}
.azin-dot-green {
    background-color: #28c840;
}

.azin-code-filename {
    margin-left: 0.5rem;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.75rem;
    color: var(--azin-text-muted);
}

.azin-code-body {
    margin: 0;
    padding: 1.2rem 1.4rem;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.82rem;
    line-height: 1.7;
    overflow-x: auto;
    background: transparent;
}

.azin-code-body code {
    background: transparent;
    border: none;
    padding: 0;
    font-size: inherit;
}

.azin-tok-kw {
    color: var(--azin-tok-kw);
}
.azin-tok-type {
    color: var(--azin-tok-type);
}
.azin-tok-fn {
    color: var(--azin-tok-fn);
}
.azin-tok-num {
    color: var(--azin-tok-num);
}
.azin-tok-str {
    color: var(--azin-tok-str);
}

/* --- Section scaffolding ------------------------------------------------ */
.azin-landing {
    background-color: var(--azin-bg);
    transition: background-color 0.3s ease;
}

.azin-section {
    padding: 5rem 0;
}

.azin-section .md-grid {
    max-width: 78rem;
}

.azin-section-alt {
    background-color: transparent;
    border: none;
}

.azin-section-title {
    font-size: 2.1rem;
    font-weight: 850;
    letter-spacing: -0.03em;
    margin: 0 0 0.5rem;
    text-align: center;
    border: none;
    padding: 0;
    color: var(--md-default-fg-color);
}

.azin-section-subtitle {
    text-align: center;
    color: var(--azin-text-muted);
    margin: 0 0 3rem;
    font-size: 1.05rem;
    transition: color 0.3s ease;
}

/* --- Explore cards ------------------------------------------------------ */
.azin-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: 1.25rem;
}

.azin-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--azin-border);
    border-radius: 12px;
    background-color: var(--azin-bg-elevated);
    padding: 1.6rem;
    text-decoration: none !important;
    color: inherit;
    transition:
        border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.25s ease;
    box-shadow: var(--azin-card-shadow);
}

.azin-card:hover {
    border-color: var(--azin-blue);
    transform: translateY(-4px);
    box-shadow: var(--azin-card-shadow-hover);
}

.azin-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--azin-blue-dim);
    color: var(--azin-blue);
    margin-bottom: 1.2rem;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.azin-card:hover .azin-card-icon {
    transform: scale(1.1) rotate(3deg);
}

.azin-card h3 {
    font-size: 1.1rem;
    font-weight: 750;
    margin: 0 0 0.5rem;
    color: var(--md-default-fg-color);
}

.azin-card p {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--azin-text-muted);
    margin: 0;
    transition: color 0.3s ease;
}

.azin-card code {
    font-size: 0.85em;
}

/* --- Split feature/code section ----------------------------------------- */
.azin-split {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem;
    align-items: center;
}

.azin-split > * {
    min-width: 0;
}

.azin-split-text .azin-section-title,
.azin-split-text .azin-section-subtitle {
    text-align: left;
    margin-left: 0;
}

.azin-feature-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.5rem 0 2rem 0;
}

.azin-feature-card {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background-color: var(--azin-bg-elevated);
    border: 1px solid var(--azin-border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    transition:
        all 0.25s ease,
        transform 0.25s ease;
    position: relative;
    overflow: hidden;
    box-shadow: var(--azin-card-shadow);
}

.azin-feature-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--azin-accent-gradient);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.azin-feature-card:hover {
    transform: translateX(4px);
    border-color: var(--azin-blue);
    box-shadow: var(--azin-card-shadow-hover);
}

.azin-feature-card:hover::before {
    opacity: 1;
}

.azin-feature-icon {
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 8px;
    background-color: var(--azin-blue-dim);
    color: var(--azin-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.azin-feature-card:hover .azin-feature-icon {
    transform: scale(1.08) rotate(3deg);
    background-color: var(--azin-blue);
    color: #ffffff;
}

.azin-feature-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.azin-feature-content strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--md-default-fg-color);
}

.azin-feature-content p {
    margin: 0 !important;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--azin-text-muted);
}

.azin-inline-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-weight: 600;
    color: var(--azin-blue);
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.azin-inline-link:hover {
    color: var(--azin-blue-bright);
    transform: translateX(3px);
    text-decoration: none !important;
}

/* --- CTA band ------------------------------------------------------------ */
.azin-cta-band {
    text-align: center;
    border: 1px solid var(--azin-cta-border);
    border-radius: 16px;
    background: var(--azin-cta-bg);
    padding: 4.5rem 2rem;
    box-shadow: var(--azin-card-shadow);
    position: relative;
    overflow: hidden;
    transition:
        border-color 0.3s ease,
        background-color 0.3s ease;
}

.azin-cta-band::before {
    content: "";
    position: absolute;
    top: -12rem;
    right: -12rem;
    width: 24rem;
    height: 24rem;
    background: var(--azin-cta-gradient);
    pointer-events: none;
}

.azin-cta-band h2 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 0.8rem;
    color: var(--md-default-fg-color);
}

.azin-cta-band p {
    color: var(--azin-text-muted);
    margin: 0 0 2rem;
    transition: color 0.3s ease;
}

/* --- Animations & Responsive ---------------------------------------------- */
@keyframes glowPulse {
    0% {
        opacity: 0.7;
        transform: translateX(-50%) scale(1);
    }
    100% {
        opacity: 1.1;
        transform: translateX(-50%) scale(1.08);
    }
}

.azin-hero-inner > * {
    animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    min-width: 0;
}
.azin-badge {
    animation-delay: 0.1s;
}
.azin-hero-logo {
    animation-delay: 0.18s;
}
.azin-hero-title {
    animation-delay: 0.26s;
}
.azin-hero-subtitle {
    animation-delay: 0.34s;
}
.azin-hero-actions {
    animation-delay: 0.42s;
}
.azin-hero-code {
    animation-delay: 0.5s;
}

.md-content__inner > * {
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.md-content__inner > :nth-child(1) {
    animation-delay: 0.05s;
}
.md-content__inner > :nth-child(2) {
    animation-delay: 0.1s;
}
.md-content__inner > :nth-child(3) {
    animation-delay: 0.15s;
}
.md-content__inner > :nth-child(4) {
    animation-delay: 0.2s;
}
.md-content__inner > :nth-child(5) {
    animation-delay: 0.25s;
}
.md-content__inner > :nth-child(6) {
    animation-delay: 0.3s;
}
.md-content__inner > :nth-child(7) {
    animation-delay: 0.35s;
}
.md-content__inner > :nth-child(8) {
    animation-delay: 0.4s;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width: 76.1875em) {
    .azin-split {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .azin-split-text .azin-section-title,
    .azin-split-text .azin-section-subtitle {
        text-align: center;
    }
    .azin-feature-list {
        text-align: left;
        max-width: 36rem;
        margin: 2rem auto;
    }
}

@media screen and (max-width: 44.9375em) {
    .azin-hero-title {
        font-size: 2.4rem;
    }
    .azin-hero-subtitle {
        font-size: 0.95rem;
        margin-bottom: 1.75rem;
    }
    .azin-hero-logo {
        width: 70px;
        height: 70px;
        margin-bottom: 1rem;
    }
    .azin-hero-section {
        padding: 4rem 0 3rem;
    }
    .azin-section {
        padding: 3rem 0;
    }
    .azin-hero-code {
        margin-top: 2.5rem;
    }
    .azin-code-body {
        padding: 0.9rem 1.1rem;
        font-size: 0.78rem;
    }
    .azin-table-container {
        margin-top: 1.5rem;
    }
    .azin-support-table th,
    .azin-support-table td {
        padding: 0.8rem 1rem;
    }
    .azin-card {
        padding: 1.25rem;
    }
    .azin-split {
        gap: 2rem;
    }
}

@media screen and (max-width: 30em) {
    .azin-hero-title {
        font-size: 2rem;
        letter-spacing: -0.03em;
    }
    .azin-section-title {
        font-size: 1.75rem;
    }
    .azin-hero-actions {
        flex-direction: column;
        width: 100%;
        max-width: 20rem;
        margin: 0 auto;
    }
    .azin-hero-actions .md-button {
        width: 100%;
        text-align: center;
        margin: 0;
    }
    .azin-table-container {
        border-radius: 8px;
    }
    .azin-support-table th,
    .azin-support-table td {
        padding: 0.7rem 0.8rem;
        font-size: 0.8rem;
    }
    .azin-badge {
        padding: 0.3rem 0.75rem;
        font-size: 0.7rem;
    }
    .azin-card-grid {
        grid-template-columns: 1fr !important;
    }
    .azin-table-container,
    .azin-code-window {
        max-width: 100% !important;
    }
}

/* ==========================================================================
   Light Mode Layout Enhancements (Soft Contrast & Cards)
   ========================================================================== */

/* No floating card container for content in light mode */

/* Light mode specific search form styling */
[data-md-color-scheme="azin-light"] .md-search__form {
    background-color: #ffffff !important;
    border: 1px solid var(--azin-border-strong) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

[data-md-color-scheme="azin-light"] .md-typeset .highlight {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

/* Active navigation item sidebar visual highlight */
[data-md-color-scheme="azin-light"] .md-nav__link--active {
    color: var(--azin-blue) !important;
    font-weight: 700 !important;
}

[data-md-color-scheme="azin-light"]
    .md-sidebar--secondary
    .md-nav__link--active {
    border-left: 2px solid var(--azin-blue) !important;
    padding-left: 0.5rem !important;
}

/* Clean, soft shadowing on admonition alerts */
[data-md-color-scheme="azin-light"] .md-admonition {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    border-radius: 8px !important;
}

/* --- Support Table -------------------------------------------------------- */
.azin-table-container {
    border-radius: 12px;
    overflow-x: auto;
    border: 1px solid var(--azin-border);
    background-color: var(--azin-bg-elevated);
    box-shadow: var(--azin-card-shadow);
    margin-top: 2rem;
    transition:
        border-color 0.3s ease,
        background-color 0.3s ease;
}

.azin-support-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.9rem;
}

.azin-support-table th {
    background-color: var(--azin-bg-elevated);
    border-bottom: 2px solid var(--azin-border);
    padding: 1rem 1.5rem;
    font-weight: 700;
    color: var(--md-default-fg-color);
    letter-spacing: -0.01em;
}

.azin-support-table td {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--azin-border);
    color: var(--md-default-fg-color);
    vertical-align: middle;
}

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

.azin-support-table tr {
    transition: background-color 0.2s ease;
}

.azin-support-table tr:hover {
    background-color: var(--azin-card-hover-bg);
}

.azin-platform-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.azin-platform-icon {
    font-size: 1.25rem;
}

.azin-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Light mode badges */
[data-md-color-scheme="azin-light"] .azin-badge-active {
    background-color: #e8f5e9;
    color: #2e7d32;
}

[data-md-color-scheme="azin-light"] .azin-badge-experimental {
    background-color: #e0f2fe;
    color: #0288d1;
}

/* Dark mode badges */
[data-md-color-scheme="azin"] .azin-badge-active {
    background-color: rgba(46, 125, 50, 0.15);
    color: #81c784;
}

[data-md-color-scheme="azin"] .azin-badge-experimental {
    background-color: rgba(41, 182, 246, 0.15);
    color: #29b6f6;
}

.azin-text-center {
    text-align: center !important;
}

/* ==========================================================================
   Smooth Theme Switch Animation (View Transitions API)
   ========================================================================== */

/* Disable default cross-fade animations on the root view transition */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

/* Circular clip-path reveal animation for the new theme snapshot */
::view-transition-new(root) {
    animation: 450ms cubic-bezier(0.4, 0, 0.2, 1) both reveal-theme;
}

@keyframes reveal-theme {
    from {
        clip-path: circle(0% at var(--click-x, 50%) var(--click-y, 50%));
    }
    to {
        clip-path: circle(150% at var(--click-x, 50%) var(--click-y, 50%));
    }
}

/* Rotate and scale animation for theme toggle icon when switching */
.md-header__button.md-icon[for^="__palette_"] {
    animation: toggleScaleRotate 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
}

@keyframes toggleScaleRotate {
    0% {
        transform: scale(0.4) rotate(-120deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}