[data-md-color-scheme="savee"] {

    /* ─── Brand ─────────────────────────────────────────────
       #FAF274  primary brand yellow
       Shades derived by darkening/lightening in HSL space   */
    --savee-brand:              #FAF274;   /* base yellow            */
    --savee-brand--dark:        #C8BC2E;   /* pressed / active       */
    --savee-brand--darker:      #8A8120;   /* deep accent            */
    --savee-brand--subtle:      #FDF9B8;   /* very light tint        */
    --savee-brand--glow:        #FAF27433; /* transparent highlight  */

    /* ─── Neutrals ──────────────────────────────────────────
       Built from #1A1A1A (BG) → #CCCCCC (text)             */
    --savee-bg:                 #1A1A1A;
    --savee-bg--raised:         #222222;   /* cards, nav             */
    --savee-bg--elevated:       #2C2C2C;   /* code blocks, tables    */
    --savee-bg--border:         #383838;   /* dividers, borders      */
    --savee-bg--muted:          #4D4D4D;   /* disabled surfaces      */
    --savee-bg--tooltip:        #505050;   /* tooltip background     */
    --savee-bg--light:          #B2B2B2;   /* light-mode background  */

    --savee-text:               #FFFFFF;
    --savee-text--soft:         #AAAAAA;   /* secondary text         */
    --savee-text--muted:        #707070;   /* placeholder / hint     */
    --savee-text--faint:        #3D3D3D;   /* nearly-invisible text  */

    /* ═══════════════════════════════════════════════════════
       ZENSICAL / MATERIAL VARIABLES
       ═══════════════════════════════════════════════════════ */

    /* Primary — navigation bar, header background */
    --md-primary-fg-color:              var(--savee-bg--raised);
    --md-primary-fg-color--light:       var(--savee-bg--elevated);
    --md-primary-fg-color--dark:        var(--savee-bg);
    --md-primary-bg-color:              var(--savee-text);
    --md-primary-bg-color--light:       #CCCCCCB3;

    /* Accent — hover states, interactive highlights, links */
    --md-accent-fg-color:               var(--savee-brand);
    --md-accent-fg-color--transparent:  var(--savee-brand--glow);
    --md-accent-bg-color:               var(--savee-bg--raised);
    --md-accent-bg-color--light:        var(--savee-bg--elevated);

    /* Default — page background, body text, subtle surfaces */
    --md-default-fg-color:              var(--savee-text);
    --md-default-fg-color--light:       var(--savee-text--soft);
    --md-default-fg-color--lighter:     var(--savee-text--muted);
    --md-default-fg-color--lightest:    var(--savee-text--faint);
    --md-default-bg-color:              var(--savee-bg);
    --md-default-bg-color--light:       var(--savee-bg--raised);
    --md-default-bg-color--lighter:     var(--savee-bg--elevated);
    --md-default-bg-color--lightest:    var(--savee-bg--border);

    /* ─── Code blocks ───────────────────────────────────── */
    --md-code-fg-color:                 var(--savee-text);
    --md-code-bg-color:                 var(--savee-bg--elevated);
    --md-code-bg-color--light:          var(--savee-bg--raised);
    --md-code-bg-color--lighter:        var(--savee-bg);

    --md-code-hl-color:                 #FAF27422;
    --md-code-hl-color--light:          #FAF27411;

    /* Syntax highlighting */
    --md-code-hl-number-color:          #A68AFA;   /* purple   */
    --md-code-hl-special-color:         #E87D3E;   /* orange   */
    --md-code-hl-function-color:        #B4D273;   /* green    */
    --md-code-hl-constant-color:        #63D7E0;   /* cyan     */
    --md-code-hl-keyword-color:         #E54772;   /* pink-red */
    --md-code-hl-string-color:          #E5CA4D;   /* gold     */
    --md-code-hl-name-color:            var(--savee-text);
    --md-code-hl-operator-color:        #E54772;
    --md-code-hl-punctuation-color:     var(--savee-text--soft);
    --md-code-hl-comment-color:         var(--savee-text--muted);
    --md-code-hl-generic-color:         var(--savee-text);
    --md-code-hl-variable-color:        var(--savee-text);

    /* ─── Typography ────────────────────────────────────── */
    --md-typeset-color:                 var(--savee-text);
    --md-typeset-a-color:               var(--savee-brand);

    --md-typeset-mark-color:            #FAF27466; /* highlight bg   */
    --md-typeset-del-color:             #E5474733; /* red tint       */
    --md-typeset-ins-color:             #B4D27333; /* green tint     */

    --md-typeset-kbd-color:             var(--savee-bg--elevated);
    --md-typeset-kbd-accent-color:      var(--savee-text--soft);
    --md-typeset-kbd-border-color:      var(--savee-bg--border);

    --md-typeset-table-color:           var(--savee-bg--elevated);
    --md-typeset-table-color--light:    var(--savee-bg--raised);

    /* ─── Admonitions ───────────────────────────────────── */
    --md-admonition-fg-color:           var(--savee-text);
    --md-admonition-bg-color:           var(--savee-bg--elevated);

    /* ─── Warnings ──────────────────────────────────────── */
    --md-warning-fg-color:              #1A1A1A;
    --md-warning-bg-color:              var(--savee-brand);

    /* ─── Tooltips ──────────────────────────────────────── */
    --md-tooltip-bg-color:              var(--savee-bg--tooltip);

    /* ─── Footer ────────────────────────────────────────── */
    --md-footer-bg-color:               #111111;
    --md-footer-bg-color--dark:         #0D0D0D;
    --md-footer-fg-color:               var(--savee-brand);
    --md-footer-fg-color--light:        var(--savee-text);
    --md-footer-fg-color--lighter:      var(--savee-text--muted);
}

[data-md-color-scheme="savee"] .md-code__nav {
    background-color: transparent;
}

[data-md-color-scheme="savee"] .md-code__nav:hover {
    background-color: transparent;
}

[data-md-color-scheme="savee"] .md-code__button {
    color: var(--savee-text--muted);
}

[data-md-color-scheme="savee"] .md-code__button:hover,
[data-md-color-scheme="savee"] .md-code__button:focus {
    color: var(--savee-brand);
}

[data-md-color-scheme="savee"] .md-tooltip,
[data-md-color-scheme="savee"] .md-tooltip2__inner {
    background-color: var(--savee-bg--tooltip) !important;
}

[data-md-color-scheme="savee"] .md-tooltip2__inner::before,
[data-md-color-scheme="savee"] .md-tooltip2__inner::after {
    background: var(--savee-bg--tooltip) !important;
}

[data-md-color-scheme="savee"] .md-tooltip2--top::before {
    border-top-color: var(--savee-bg--tooltip) !important;
}

[data-md-color-scheme="savee"] .md-tooltip2--bottom::before {
    border-bottom-color: var(--savee-bg--tooltip) !important;
}

/* ─── Search component (Shadow DOM — RGB channels, no hex) ── */
/* Component uses rgb(var(--color-*)) so values must be "R G B" */
[data-md-color-scheme="savee"] {
    --color-background:          44 44 44;    /* #2C2C2C elevated  */
    --color-background-subtle:   34 34 34;    /* #222222 raised    */
    --color-backdrop:            26 26 26;    /* #1A1A1A base bg   */
    --color-foreground:          255 255 255; /* #FFFFFF text      */
    --color-highlight:           250 242 116; /* #FAF274 brand     */
    --color-highlight-transparent: 250 242 116; /* same, used at 0 alpha */
    --alpha-light:               1;
    --alpha-lighter:             1;
    --alpha-lightest:            0.08;
}

[data-md-color-scheme="savee"] .md-header__source {
    display: none;
}

.md-tabs__list > .md-tabs__item:first-child {
    display: none;
}

/* ─── Hero Section ───────────────────────────────────────────────────────── */

/*
 * Layout:
 *   - .md-hero is the full-width container (position: relative)
 *   - .md-hero__text  is exactly 50% wide, sits in normal flow (z-index: 2)
 *   - .md-hero__media is position: absolute, right-anchored, 75% wide (z-index: 1)
 *     so it extends from the 25% mark to the right edge, overlapping the
 *     right half of the text column — but the mask fades it to transparent
 *     on its left edge so it never visually overlaps the text.
 */

.md-hero {
    display: flex;
    position: relative;
    flex-grow: 1;
    min-height: 420px;
    background: var(--savee-bg--light);
    overflow: hidden;
}

/* ── Left: text column — exactly 50% wide at all sizes ── */
.md-hero__text {
    display: flex;
    position: relative;
    z-index: 2;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(3rem, 7vh, 6rem) clamp(1rem, 3vw, 4rem) clamp(1.5rem, 4vh, 3.5rem) clamp(1rem, 6vw, 7rem);
}

.md-hero__text-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Eyebrow label */
.md-hero__eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--savee-brand);
    text-shadow: rgba(0, 0, 0, 0.1) 0px 2px 6px;
    margin: 0 0 1.2rem;
}

/* Main title */
.md-hero__title {
    font-size: clamp(1.6rem, 4vw, 5rem);
    font-weight: 700;
    line-height: 1.0;
    color: #FFFFFF;
    text-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    margin: 0 0 clamp(0.75rem, 2vh, 1.4rem);
    letter-spacing: -0.03em;
}

/* Subtitle */
.md-hero__subtitle {
    font-size: clamp(0.75rem, 1.3vw, 1.1rem);
    font-weight: 500;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: rgba(0, 0, 0, 0.1) 0px 2px 6px;
    margin: 0 0 clamp(1.2rem, 3vh, 2.5rem);
}

/* Buttons container */
.md-hero__buttons {
    display: flex;
    flex-direction: column;
    max-width: fit-content;
}

/* CTA buttons */
.md-hero__actions {
    display: flex;
    width: fit-content;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.md-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.72rem 1.6rem;
    flex: 1 1 1;
    font-size: 0.85rem;
    font-weight: 600;
    text-wrap: nowrap;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.2s, box-shadow 0.2s;
}

.md-hero__btn--primary {
    background: var(--savee-brand);
    box-shadow: 0 0 20px var(--savee-brand),0 4px 4px #00000040,inset 0 0 20px var(--savee-bg--light);
    border: 1px solid var(--savee-text);
    color: #1A1A1A;
}

.md-hero__btn--primary:hover {
    border: 1px solid var(--savee-brand);
    box-shadow: 0 0 10px var(--savee-brand),0 4px 4px #00000040;
}

.md-hero__btn--secondary {
    background: transparent;
    color: var(--savee-text);
    text-shadow: rgba(0, 0, 0, 0.1) 0px 2px 6px;
    border: 1px solid var(--savee-text);
}

.md-hero__btn--secondary:hover {
    background: #FFFFFF33;
}

/* Changelog teaser */
.md-hero__changelog {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    margin-top: 1.4rem;
    padding: .4rem .8rem;
    background: transparent;
    border: 1px solid var(--savee-text);
    text-shadow: rgba(0, 0, 0, 0.1) 0px 2px 6px;
    transition: background 0.2s;
}

.md-hero__changelog:hover {
    background: #FFFFFF33;
}

.md-hero__changelog-badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--savee-brand);
    /* background: var(--savee-brand); */
    padding: 0.4rem 0;
    border-radius: 2px;
    white-space: nowrap;
}

.md-hero__changelog-text {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--savee-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 28ch;
}

/* ── Right: video — 75% wide, right-anchored, behind text (z-index: 1) ── */
.md-hero__media {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    justify-content: center;
    align-items: center;
    z-index: 1;
    overflow: hidden;
}

.md-hero__video {
    width: 100%;
    height: 80%;
    object-fit: cover;
    object-position: center;

    /*
     * The video is 75% wide, starting at the 25% mark of the screen.
     * Its left edge overlaps the right quarter of the text column.
     * Fade transparent → opaque over the first ~34% of the video width
     * (= 25% of screen / 75% video width ≈ 33%), clearing the text area.
     * Also fade top & bottom to blend into the page background.
     */
    -webkit-mask-image:
        linear-gradient(to right,  transparent 0%, black 34%),
        linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right,  transparent 0%, black 34%),
        linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
    mask-composite: intersect;
}

/* ── Mobile: video as full-cover background behind text ── */
@media (max-width: 1219px) {
    .md-hero__media {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .md-hero__video {
        width: 100%;
        height: 100%;
        opacity: 0.15;
        -webkit-mask-image:
            linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
        mask-image:
            linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
        -webkit-mask-composite: unset;
        mask-composite: unset;
    }

    .md-hero__text {
        width: 100%;
        padding: clamp(2rem, 5vh, 4rem) clamp(1.25rem, 5vw, 3rem) clamp(1.5rem, 4vh, 3rem);
    }

    .md-hero__text-inner {
        max-width: 100%;
    }
}

/* ── Content area below hero ── */
.md-main__inner {
    margin-top: 0;
}

[data-md-component="content"] .md-content__inner {
    padding-top: 2.4rem;
}

/* ── Device parameter tables — stretch to full admonition width ── */
.md-typeset__table {
    width: 100% !important;

    table {
        display: table !important;
    }
}

/* ── Downloads page ────────────────────────────────────────────── */
.downloads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 2rem;
}

.download-card {
    background: var(--savee-bg--raised);
    border: 1px solid var(--savee-bg--border);
    border-radius: .4rem;
    padding: 1.4rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.download-card__header {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--savee-text);
    letter-spacing: .01em;
}

.download-card__header svg {
    width: 1.4rem;
    height: 1.4rem;
    fill: var(--savee-brand);
    display: block;
    flex-shrink: 0;
}

.download-card__desc {
    font-size: .7rem;
    color: var(--savee-text--soft);
    line-height: 1.6;
    flex: 1;
}

.download-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .25rem;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1.1rem;
    background: transparent;
    color: var(--savee-text) !important;
    text-decoration: none !important;
    border: 1px solid var(--savee-bg--border);
    font-size: .7rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: .25rem;
    transition: background .2s, color .2s, border .2s !important;
    letter-spacing: .02em;
    white-space: nowrap;
}

.download-btn:hover {
    border-color: var(--savee-bg--tooltip);
    color: var(--savee-brand) !important;
    background: var(--savee-bg--elevated);
}

.quote .md-button {
    color: var(--savee-text) !important;
    border-radius: .25rem;
    border: 1px solid var(--savee-bg--border) !important;
    background: transparent;
    transition: background .2s, color .2s, border .2s !important;

    &:hover {
        color: var(--savee-brand) !important;
        background: var(--savee-bg--elevated);
        border-color: var(--savee-bg--tooltip) !important;
        opacity: 1;
    }
}