/* ==========================================================================
   Zeekr Insiders wiki theme
   Mirrors the main club site's styles and style guide so the
   wiki and the site read as one product: neutral greys, square corners, flat
   hairline panels, ink-coloured links, and orange kept for actions, the current
   nav underline, the home hero and the "On this page" marker.

   Material sets html to 125% (20px) and scales it up on wide screens, so the
   site's rem values are written here in px to keep them identical.

   Sections:
     1. Fonts                 7. Buttons            13. Code and images
     2. Tokens                8. Cards and stats    14. Masthead
     3. Colour schemes        9. Tables             15. Wiki bar and tabs
     4. Material mapping     10. Admonitions        16. Sidebars and ToC panel
     5. Base and type        11. Links              17. Footer and 404
     6. Heroes               12. Icons              18. Focus, motion, print
    19. On this page        20. Citations          21. Suggest an edit
    22. Glossary            23. Handover checklist
   ========================================================================== */

/* 1. Fonts: self-hosted, swap so text shows at once in a fallback face. ---- */
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../assets/fonts/space-grotesk-latin.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans Condensed";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../assets/fonts/ibm-plex-sans-condensed-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans Condensed";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../assets/fonts/ibm-plex-sans-condensed-latin-500-normal.woff2") format("woff2");
}

/* 600 also serves bold: the site ships no 700 for the body face either. */
@font-face {
    font-family: "IBM Plex Sans Condensed";
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url("../assets/fonts/ibm-plex-sans-condensed-latin-600-normal.woff2") format("woff2");
}

/* 2. Tokens: the club site's token names and values. --------------------- */
:root {
    --zeekr-orange: #FF5A00;
    --arctic-white: #F2F2F2;
    --carbon-grey: #1A1A1A;
    --zeekr-cream: #FFFBF3;
    --orange-ink-light: #B03C00;

    /* Masthead and heroes: true black in both themes (the badge has a #000 ground). */
    --night-bg: #000000;
    --night-raised: #141414;
    --night-ink: var(--arctic-white);
    --night-muted: #A6A6A6;
    --night-line: rgba(242, 242, 242, 0.16);
    --night-line-strong: rgba(242, 242, 242, 0.36);

    --font-display: "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
    --font-body: "IBM Plex Sans Condensed", "Arial Narrow", "Roboto Condensed", ui-sans-serif, system-ui, sans-serif;

    --fs-2xs: 11px;
    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 22px;
    --fs-h1: clamp(28px, 19.2px + 2.4vw, 46.4px);
    --lh-tight: 1.08;
    --lh-snug: 1.25;
    --lh-body: 1.45;
    --track-label: 0.14em;
    --track-tight: -0.02em;

    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --gutter: 16px;
    --page-max: 1440px;
    --measure: 736px;

    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-pill: 999px;
    --hairline: 1px;
    --rule: 2px;
    --tap: 44px;
    --src-edge: 4px;
    --badge-mast: 64px;

    --dur-fast: 160ms;
    --dur-med: 320ms;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 48rem) {
    :root {
        --gutter: 32px;
        --badge-mast: 80px;
    }
}

@media (min-width: 64rem) {
    :root {
        --fs-h1: clamp(32px, 16px + 1.6vw, 40px);
    }
}

@media (min-width: 80rem) {
    :root {
        --gutter: 48px;
        --badge-mast: 100px;
    }
}

/* 3. Colour schemes. Material puts the scheme on <body>; slate is dark. ---- */
[data-md-color-scheme="slate"] {
    color-scheme: dark;
    --bg: #121212;
    --bg-raised: #1A1A1A;
    --bg-sunk: #0C0C0C;
    --panel: #1E1E1E;
    --panel-border: #6E6E6E;
    --ink: var(--arctic-white);
    --ink-muted: #A6A6A6;
    --ink-faint: #7A7A7A;
    --line: rgba(242, 242, 242, 0.14);
    --line-strong: rgba(242, 242, 242, 0.32);
    --accent: var(--zeekr-orange);
    --accent-ink: var(--zeekr-orange);
    --on-accent: var(--carbon-grey);
    --focus: var(--ink);

    /* Secondary hues (style guide): Silver Gray is the wiki's own colour. */
    --hue-slate-solid: #9DA2A5;
    --hue-slate-on: #1A1A1A;
    --hue-slate-ink: #9DA2A5;
    --hue-plum-solid: #6F204A;
    --hue-plum-on: #FFFBF3;
    --hue-plum-ink: #DDA6C4;
    --hue-gold-solid: #E6B237;
    --hue-gold-on: #1A1A1A;
    --hue-gold-ink: #E4BA58;
    --hue-tint: 13%;

    /* Black line art on <img> icons becomes the ink colour (#F2F2F2 here). */
    --icon-filter: brightness(0) invert(95%);
}

[data-md-color-scheme="default"] {
    color-scheme: light;
    --bg: var(--arctic-white);
    --bg-raised: #E9E9E9;
    --bg-sunk: #FAFAFA;
    --panel: #FFFFFF;
    --panel-border: #7A7A7A;
    --ink: var(--carbon-grey);
    --ink-muted: #595959;
    --ink-faint: #6B6B6B;
    --line: rgba(26, 26, 26, 0.14);
    --line-strong: rgba(26, 26, 26, 0.36);
    --accent: var(--zeekr-orange);
    --accent-ink: var(--orange-ink-light);
    --on-accent: var(--carbon-grey);
    --focus: var(--ink);

    --hue-slate-solid: #4F5356;
    --hue-slate-on: #FFFBF3;
    --hue-slate-ink: #4F5356;
    --hue-plum-solid: #7C1D50;
    --hue-plum-on: #FFFBF3;
    --hue-plum-ink: #7C1D50;
    --hue-gold-solid: #E8AF2C;
    --hue-gold-on: #1A1A1A;
    --hue-gold-ink: #865809;
    --hue-tint: 9%;

    --icon-filter: brightness(0) invert(10%);
}

/* Regions that are always dark (masthead, heroes) take the night values, as .on-night does on the site. */
.on-night,
.hero-section,
.hero-container {
    --bg: var(--night-bg);
    --bg-raised: var(--night-raised);
    --ink: var(--night-ink);
    --ink-muted: var(--night-muted);
    --line: var(--night-line);
    --line-strong: var(--night-line-strong);
    --accent-ink: var(--zeekr-orange);
    --focus: var(--night-ink);
    --icon-filter: brightness(0) invert(95%);
    color: var(--ink);
}

/* 4. Material mapping ------------------------------------------------------ */
:root,
[data-md-color-scheme] {
    --md-text-font: "IBM Plex Sans Condensed";
    --md-primary-fg-color: var(--bg-raised, #1A1A1A);
    --md-primary-fg-color--light: var(--bg-raised, #1A1A1A);
    --md-primary-fg-color--dark: var(--bg-raised, #1A1A1A);
    --md-primary-bg-color: var(--ink, #F2F2F2);
    --md-primary-bg-color--light: var(--ink-muted, #A6A6A6);
}

[data-md-color-scheme] {
    --md-default-bg-color: var(--bg);
    --md-default-fg-color: var(--ink);
    --md-default-fg-color--light: var(--ink-muted);
    --md-default-fg-color--lighter: var(--ink-faint);
    --md-default-fg-color--lightest: var(--line);
    --md-typeset-color: var(--ink);
    --md-typeset-a-color: var(--ink);
    --md-accent-fg-color: var(--ink);
    --md-accent-fg-color--transparent: color-mix(in srgb, var(--ink) 8%, transparent);
    --md-accent-bg-color: var(--bg);
    --md-code-bg-color: var(--bg-raised);
    --md-code-fg-color: var(--ink);
    --md-typeset-table-color: var(--line);
    --md-typeset-mark-color: color-mix(in srgb, var(--hue-gold-solid) 35%, transparent);
    --md-admonition-fg-color: var(--ink);
    --md-admonition-bg-color: var(--panel);
    --md-shadow-z1: none;
    --md-shadow-z2: none;
    --md-shadow-z3: none;
}

/* 5. Base and type --------------------------------------------------------- */
body {
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.md-grid {
    max-width: var(--page-max);
}

.md-typeset {
    font-size: var(--fs-md);
    line-height: var(--lh-body);
}

.md-typeset p,
.md-typeset ul,
.md-typeset ol,
.md-typeset dl {
    line-height: 1.55;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
    font-family: var(--font-display);
    color: var(--ink);
    text-wrap: balance;
}

/* No lone word on a paragraph's or list item's last line, where supported. */
.md-typeset p,
.md-typeset li,
.md-typeset td.zi-td-long {
    text-wrap: pretty;
}

/* 600, as the front door's H1s are; h2 and h3 stay 700. */
.md-typeset h1 {
    font-size: var(--fs-h1);
    font-weight: 600;
    line-height: var(--lh-tight);
    letter-spacing: var(--track-tight);
    margin: 0 0 var(--sp-5);
}

.md-typeset h2 {
    font-size: 24px;
    font-weight: 700;
    line-height: var(--lh-snug);
    letter-spacing: -0.01em;
    margin: var(--sp-7) 0 var(--sp-3);
}

.md-typeset h3 {
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: var(--lh-snug);
    margin: var(--sp-6) 0 var(--sp-2);
}

.md-typeset h4 {
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: var(--lh-snug);
    margin: var(--sp-5) 0 var(--sp-2);
}

/* The site's label: Space Grotesk 11px, semibold, letterspaced capitals. */
.md-typeset h5,
.md-typeset h6,
.zi-label {
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--ink-muted);
}

.md-typeset hr {
    border-bottom: var(--hairline) solid var(--line);
}

.md-typeset .headerlink {
    color: var(--ink-faint);
}

/* Breadcrumbs (navigation.path) read as the site's label. */
.md-path {
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
}

.md-path__link {
    color: var(--ink-muted);
}

.md-path__link:hover {
    color: var(--ink);
}

/* 6. Heroes: an always-dark panel, square and flat. No orange: the wiki keeps
   orange to buttons, the current tab, reading progress, the ToC marker and
   citations. --------------------------------------------------------------- */
.hero-section,
.hero-container {
    position: relative;
    margin-bottom: var(--sp-6);
    background: var(--night-raised);
    border: var(--hairline) solid var(--night-line-strong);
    border-radius: var(--radius-md);
}

.hero-section {
    padding: clamp(32px, 6vw, 64px) clamp(20px, 5vw, 48px);
    text-align: center;
}

.hero-content {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(32px, 6vw, 56px) clamp(20px, 4vw, 40px);
    text-align: center;
}

/* Model overview heroes (7X, X, 7GT, 009): club banner artwork, decorative, so a
   CSS background with no alt. The banners put the car on the right and the
   scenery on the left, and these pages keep both sidebars, so at 1440 the
   hero is only about 840px wide: an overlay would put the title over the car.
   Instead the text keeps its solid night panel and the banner sits below it
   as a 3:1 band (a ::after sized by aspect-ratio, so it needs no height maths),
   its sky fading up into the panel. Phones get a 16:10 crop of the whole car.
   .hero-bg-club has no artwork yet and stays a plain panel. */
.hero-bg-7x,
.hero-bg-x,
.hero-bg-7gt,
.hero-bg-009,
.hero-bg-club {
    background: var(--night-raised);
}

.hero-bg-7x,
.hero-bg-x,
.hero-bg-7gt,
.hero-bg-009 {
    --hero-fade: linear-gradient(180deg, var(--night-raised) 0%, rgb(20 20 20 / 0) 30%);
    overflow: hidden;
}

.hero-bg-7x::after,
.hero-bg-x::after,
.hero-bg-7gt::after,
.hero-bg-009::after {
    content: "";
    display: block;
    aspect-ratio: 3 / 1;
    margin-top: calc(-1 * var(--sp-5));
    background-color: var(--night-raised);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-bg-7x::after {
    background-image: var(--hero-fade), url("../assets/images/models/7x-hero-1440.webp");
    background-image: var(--hero-fade), image-set(
        url("../assets/images/models/7x-hero-1440.avif") type("image/avif") 1x,
        url("../assets/images/models/7x-hero.avif") type("image/avif") 2x,
        url("../assets/images/models/7x-hero-1440.webp") type("image/webp") 1x,
        url("../assets/images/models/7x-hero.webp") type("image/webp") 2x
    );
}

.hero-bg-x::after {
    background-image: var(--hero-fade), url("../assets/images/models/x-hero-1440.webp");
    background-image: var(--hero-fade), image-set(
        url("../assets/images/models/x-hero-1440.avif") type("image/avif") 1x,
        url("../assets/images/models/x-hero.avif") type("image/avif") 2x,
        url("../assets/images/models/x-hero-1440.webp") type("image/webp") 1x,
        url("../assets/images/models/x-hero.webp") type("image/webp") 2x
    );
}

.hero-bg-7gt::after {
    background-image: var(--hero-fade), url("../assets/images/models/7gt-hero-1440.webp");
    background-image: var(--hero-fade), image-set(
        url("../assets/images/models/7gt-hero-1440.avif") type("image/avif") 1x,
        url("../assets/images/models/7gt-hero.avif") type("image/avif") 2x,
        url("../assets/images/models/7gt-hero-1440.webp") type("image/webp") 1x,
        url("../assets/images/models/7gt-hero.webp") type("image/webp") 2x
    );
}

.hero-bg-009::after {
    background-image: var(--hero-fade), url("../assets/images/models/009-hero-1440.webp");
    background-image: var(--hero-fade), image-set(
        url("../assets/images/models/009-hero-1440.avif") type("image/avif") 1x,
        url("../assets/images/models/009-hero.avif") type("image/avif") 2x,
        url("../assets/images/models/009-hero-1440.webp") type("image/webp") 1x,
        url("../assets/images/models/009-hero.webp") type("image/webp") 2x
    );
}

@media (max-width: 44.984375em) {
    .hero-bg-7x::after,
    .hero-bg-x::after,
    .hero-bg-7gt::after,
    .hero-bg-009::after {
        aspect-ratio: 1.6 / 1;
    }

    .hero-bg-7x::after {
        background-image: var(--hero-fade), url("../assets/images/models/7x-hero-mobile.webp");
        background-image: var(--hero-fade), image-set(
            url("../assets/images/models/7x-hero-mobile.avif") type("image/avif"),
            url("../assets/images/models/7x-hero-mobile.webp") type("image/webp")
        );
    }

    .hero-bg-x::after {
        background-image: var(--hero-fade), url("../assets/images/models/x-hero-mobile.webp");
        background-image: var(--hero-fade), image-set(
            url("../assets/images/models/x-hero-mobile.avif") type("image/avif"),
            url("../assets/images/models/x-hero-mobile.webp") type("image/webp")
        );
    }

    .hero-bg-7gt::after {
        background-image: var(--hero-fade), url("../assets/images/models/7gt-hero-mobile.webp");
        background-image: var(--hero-fade), image-set(
            url("../assets/images/models/7gt-hero-mobile.avif") type("image/avif"),
            url("../assets/images/models/7gt-hero-mobile.webp") type("image/webp")
        );
    }

    .hero-bg-009::after {
        background-image: var(--hero-fade), url("../assets/images/models/009-hero-mobile.webp");
        background-image: var(--hero-fade), image-set(
            url("../assets/images/models/009-hero-mobile.avif") type("image/avif"),
            url("../assets/images/models/009-hero-mobile.webp") type("image/webp")
        );
    }
}

.md-typeset .hero-title,
.hero-title {
    margin: 0 0 var(--sp-4);
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw + 12px, 56px);
    font-weight: 600;
    line-height: var(--lh-tight);
    letter-spacing: var(--track-tight);
    color: var(--night-ink);
}

.hero-subtitle {
    max-width: 560px;
    margin: 0 auto var(--sp-5);
    text-wrap: balance;
    font-size: var(--fs-lg);
    line-height: var(--lh-body);
    color: var(--night-muted);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: center;
}

.hero--landing {
    text-align: left;
}

/* The home hero's banner (club artwork, assets/images/hero/). Decorative, so
   it is a background with no alt. A dark wash runs from the left on wide
   screens, where the cars sit in the right two thirds; phones get their own
   wider crop under the text (below). Night ink keeps 4.5:1 or better
   over the wash (measured). AVIF first, WebP where AVIF is not supported. */
.hero--landing {
    --hero-wash: linear-gradient(90deg, rgb(0 0 0 / 0.92) 0%, rgb(0 0 0 / 0.84) 36%, rgb(0 0 0 / 0.35) 62%, rgb(0 0 0 / 0) 82%);
    background-color: var(--night-bg);
    background-image: var(--hero-wash), url("../assets/images/hero/home-hero-1440.webp");
    background-image: var(--hero-wash), image-set(
        url("../assets/images/hero/home-hero-1440.avif") type("image/avif") 1x,
        url("../assets/images/hero/home-hero.avif") type("image/avif") 2x,
        url("../assets/images/hero/home-hero-1440.webp") type("image/webp") 1x,
        url("../assets/images/hero/home-hero.webp") type("image/webp") 2x
    );
    background-position: center, right center;
    background-size: cover, cover;
    background-repeat: no-repeat;
}

/* Tablets: the text column is a bigger share of a narrower hero, so the wash
   holds dark across the column's width, not a share of the box. */
@media (min-width: 45em) and (max-width: 76.234375em) {
    .hero--landing {
        --hero-wash: linear-gradient(90deg, rgb(0 0 0 / 0.92) 0, rgb(0 0 0 / 0.86) 680px, rgb(0 0 0 / 0.3) 860px, rgb(0 0 0 / 0) 1000px);
    }
}

@media (max-width: 44.984375em) {
    /* Phones: the text sits on plain night black and the 16:10 crop (the whole
       7X, a hint of the 009) fills the bottom of the box, drawn a little wider
       than the box so the car reads larger, its sky fading up into the black.
       --hero-img-h is the crop's drawn height: the hero's width (viewport less
       the two 16px gutters) at 112%, times 10/16. */
    .hero--landing {
        --hero-img-h: calc((100vw - 2 * var(--sp-4)) * 1.12 * 0.625);
        --hero-wash: linear-gradient(180deg, var(--night-bg) calc(100% - var(--hero-img-h)), rgb(0 0 0 / 0) calc(100% - var(--hero-img-h) * 0.6));
        padding-bottom: calc(var(--hero-img-h) * 0.95);
        background-image: var(--hero-wash), url("../assets/images/hero/home-hero-mobile.webp");
        background-image: var(--hero-wash), image-set(
            url("../assets/images/hero/home-hero-mobile.avif") type("image/avif"),
            url("../assets/images/hero/home-hero-mobile.webp") type("image/webp")
        );
        background-position: center, center bottom;
        background-size: cover, auto var(--hero-img-h);
    }
}

.hero--landing .hero-subtitle {
    margin-left: 0;
}

.hero--landing .hero-actions {
    justify-content: flex-start;
}

/* Phones: once the two buttons stack, they share one width instead of two ragged ones. */
@media (max-width: 30em) {
    .hero--landing .hero-actions {
        display: grid;
        justify-content: start;
    }
}

.md-typeset .hero-eyebrow,
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--ink-muted);
}

.md-typeset .hero-title .accent,
.hero-title .accent {
    color: inherit;
}

/* 7. Buttons: 44px, square, hairline; primary is the orange fill with Carbon
   text (5.56:1). No glow and no lift. ------------------------------------- */
.md-typeset .btn,
.md-typeset .btn-hero,
.btn,
.btn-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--tap);
    padding: 0 var(--sp-4);
    border: var(--hairline) solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.md-typeset .btn:hover,
.md-typeset .btn-hero:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.md-typeset .btn-primary,
.md-typeset .btn-hero-primary,
.md-typeset .btn-primary:hover,
.md-typeset .btn-hero-primary:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

/* Hover and press are visible changes, not a 1px border swap, and never a
   lift. Outline buttons take the ink border and a faint ink tint that deepens
   on press. The orange button lightens and underlines its label on hover and
   darkens on press, keeping Carbon text at 4.5:1 or better (measured). */
:is(.btn, .btn-hero):not(.btn-primary, .btn-hero-primary):hover,
.md-typeset :is(.btn, .btn-hero):not(.btn-primary, .btn-hero-primary):hover,
.zi-mast .btn:not(.btn-primary):hover {
    border-color: var(--ink);
    background-color: color-mix(in srgb, var(--ink) 8%, transparent);
}

:is(.btn, .btn-hero):not(.btn-primary, .btn-hero-primary):active,
.md-typeset :is(.btn, .btn-hero):not(.btn-primary, .btn-hero-primary):active {
    background-color: color-mix(in srgb, var(--ink) 16%, transparent);
}

:is(.btn-primary, .btn-hero-primary):hover,
.md-typeset :is(.btn-primary, .btn-hero-primary):hover,
.zi-mast .btn-primary:hover {
    filter: brightness(1.08);
    text-decoration: underline;
    text-decoration-thickness: var(--hairline);
    text-underline-offset: 0.2em;
}

:is(.btn-primary, .btn-hero-primary):active,
.md-typeset :is(.btn-primary, .btn-hero-primary):active,
.zi-mast .btn-primary:active {
    filter: brightness(0.92);
}

/* Markdown buttons ({ .md-button }) take the same look. Material draws them in
   --md-primary-fg-color, which the custom palette leaves near the page colour,
   so unstyled they all but vanish. */
.md-typeset .md-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    margin: var(--sp-1) var(--sp-2) var(--sp-1) 0;
    padding: 0 var(--sp-4);
    border: var(--hairline) solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.md-typeset .md-button:is(:hover, :focus) {
    border-color: var(--ink);
    background-color: color-mix(in srgb, var(--ink) 8%, transparent);
    color: var(--ink);
}

.md-typeset .md-button:active {
    background-color: color-mix(in srgb, var(--ink) 16%, transparent);
}

.md-typeset .md-button--primary,
.md-typeset .md-button--primary:is(:hover, :focus) {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.md-typeset .md-button--primary:hover {
    filter: brightness(1.08);
    text-decoration: underline;
    text-decoration-thickness: var(--hairline);
    text-underline-offset: 0.2em;
}

/* 8. Cards and stats: flat panels with a visible border, no hover lift. ---- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-4);
    margin: var(--sp-5) 0;
}

/* Card grids are sized by the article column, not the window, and by how many
   cards they hold, so a row is always full: two, three or four across, never
   three and an orphan. auto-fit alone left a fourth card alone on its row
   whenever the column was a little under four (or three) cards wide. */
.md-content__inner {
    container: zi-article / inline-size;
}

@container zi-article (min-width: 480px) {
    .card-grid:has(> :nth-child(2):last-child),
    .card-grid:has(> :nth-child(4):last-child),
    .card-grid.model-lineup {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container zi-article (min-width: 600px) {
    .card-grid:has(> :nth-child(3):last-child) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container zi-article (min-width: 1080px) {
    .card-grid:has(> :nth-child(4):last-child),
    .card-grid.model-lineup {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@container zi-article (max-width: 479.98px) {
    .card-grid,
    .card-grid.model-lineup {
        grid-template-columns: minmax(0, 1fr);
    }
}

.z-card,
.md-typeset .grid.cards > ul > li {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--sp-5);
    background: var(--panel);
    border: var(--hairline) solid var(--panel-border);
    border-radius: var(--radius-md);
    box-shadow: none;
}

.md-typeset .grid.cards > ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-4);
    margin: 0;
    padding: 0;
}

.md-typeset .grid.cards > ul > li {
    margin: 0;
    list-style: none;
}

/* Emphasis is a Silver Gray source edge, the wiki's colour, never orange. */
.z-card.featured {
    border-left: var(--src-edge) solid var(--hue-slate-ink);
}

.z-card .badge {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    padding: 2px var(--sp-2);
    background: var(--hue-slate-solid);
    color: var(--hue-slate-on);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
}

.md-typeset .z-card h3,
.z-card h3 {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--ink);
}

.md-typeset .z-card.featured h3 {
    padding-right: 120px;
}

.md-typeset .z-card p,
.z-card p {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-md);
    color: var(--ink-muted);
}

.md-typeset .z-card p strong {
    color: var(--ink);
}

/* Section card icons: vendored Lucide (card_icon macro in main.py), drawn in
   ink at 28px with the same 1.5 stroke as the spec card icons. */
.zi-card-icon {
    display: block;
    flex: none;
    width: 28px;
    height: 28px;
    margin: 0 0 var(--sp-3);
    color: var(--ink);
    stroke-width: 1.5;
}

/* Click-to-load video (youtube macro, main.py): a 16:9 poster in a square,
   hairline frame with a play mark; the whole poster is the button. Orange is
   allowed here because it is a button. */
/* Material shrink-wraps a figure to its image; the video takes the column. */
.md-typeset .zi-video {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: var(--sp-5) 0;
}

.zi-video__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: var(--hairline) solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--night-bg);
}

.md-typeset .zi-video__frame img,
.zi-video__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.zi-video__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    background: rgb(0 0 0 / 0.15);
    cursor: pointer;
}

.zi-video__mark {
    display: grid;
    place-items: center;
    width: 64px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--on-accent);
    transition: filter var(--dur-fast) var(--ease);
}

.zi-video__play:hover .zi-video__mark {
    filter: brightness(1.08);
}

.zi-video__play:focus-visible {
    outline: var(--rule) solid var(--focus);
    outline-offset: -4px;
}

.zi-video__icon {
    width: 22px;
    height: 22px;
    fill: currentColor;
    stroke-width: 1.5;
}

.md-typeset .zi-video figcaption {
    max-width: none;
    margin: var(--sp-2) 0 0;
    font-style: normal;
    color: var(--ink-muted);
    font-size: var(--fs-sm);
    text-align: left;
}

/* Captions and credits: 14px muted, no opacity (7:1 light, 6.8:1 dark). */
.md-typeset .image-credit,
.image-credit,
.md-typeset figcaption {
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--ink-muted);
}

/* The card's "more" label: the site's label in ink with an arrow. On a card
   that is one link (hooks/cards.py) it is a span, a cue for the heading link. */
.md-typeset .go,
.go {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    align-self: flex-start;
    min-height: var(--tap);
    margin-top: auto;
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: var(--hairline);
    text-underline-offset: 0.3em;
}

.md-typeset .go::after {
    content: "\2192";
    letter-spacing: 0;
}

.md-typeset a.go:hover {
    color: var(--ink);
    text-decoration-thickness: var(--rule);
}

/* Cards with one destination (hooks/cards.py): the heading links there and
   its ::after covers the card, as on the front door's Insider cards. Hover and
   keyboard focus take the border to ink, tint the surface faintly, underline
   the heading and nudge the arrow; flat and square, no lift or glow. */
.md-typeset .z-card.zi-card--link {
    transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.md-typeset .z-card a.zi-card__link {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
    text-underline-offset: 0.2em;
}

.md-typeset .z-card a.zi-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
}

/* Other links in the card stay clickable on their own, above the stretched link. */
.md-typeset .zi-card--link a:not(.zi-card__link) {
    position: relative;
    z-index: 1;
}

.md-typeset .z-card.zi-card--link:hover,
.md-typeset .z-card.zi-card--link:has(.zi-card__link:focus-visible) {
    border-color: var(--ink);
    background-color: color-mix(in srgb, var(--ink) 4%, var(--panel));
}

.md-typeset .z-card.featured.zi-card--link:hover,
.md-typeset .z-card.featured.zi-card--link:has(.zi-card__link:focus-visible) {
    border-left-color: var(--hue-slate-ink);
}

.md-typeset .zi-card--link:hover a.zi-card__link,
.md-typeset .z-card a.zi-card__link:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: var(--rule);
}

/* The ring goes round the whole card, the target the reader is choosing. */
.md-typeset .z-card a.zi-card__link:focus-visible {
    outline: none;
}

.md-typeset .z-card a.zi-card__link:focus-visible::after {
    outline: var(--rule) solid var(--focus);
    outline-offset: 2px;
}

.md-typeset .zi-card--link .go::after {
    transition: transform var(--dur-fast) var(--ease);
}

.md-typeset .zi-card--link:hover .go::after,
.md-typeset .zi-card--link:has(.zi-card__link:focus-visible) .go::after {
    transform: translateX(2px);
}

/* Touch has no hover, so the heading carries a hairline underline at rest to read as a link. */
@media (hover: none) {
    .md-typeset .z-card a.zi-card__link {
        text-decoration: underline;
        text-decoration-thickness: var(--hairline);
    }
}

@media (prefers-reduced-motion: reduce) {
    .md-typeset .zi-card--link:hover .go::after,
    .md-typeset .zi-card--link:has(.zi-card__link:focus-visible) .go::after {
        transform: none;
    }
}

.z-card .btn {
    align-self: stretch;
    margin-top: auto;
}

.z-card .price {
    margin-bottom: var(--sp-5);
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--track-tight);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.z-card .price sub {
    /* On the figure's baseline, not dropped below it as a subscript. */
    vertical-align: baseline;
    margin-left: var(--sp-1);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink-muted);
    white-space: nowrap;
}

.md-typeset ul.feature-list,
.feature-list {
    flex-grow: 1;
    margin: 0 0 var(--sp-5);
    padding: 0;
    list-style: none;
}

.md-typeset ul.feature-list li {
    margin: 0;
    padding: 10px 0;
    border-bottom: var(--hairline) solid var(--line);
    font-size: var(--fs-md);
    line-height: 1.4;
    list-style: none;
    color: var(--ink);
}

.md-typeset ul.feature-list li::marker {
    content: "";
}

.md-typeset ul.feature-list li:last-child {
    border-bottom: 0;
}

.feature-list li i {
    margin-right: 0.5em;
    font-style: normal;
    font-weight: 600;
    color: var(--hue-slate-ink);
}

/* Not included in this trim: struck through and muted (7:1 light, 6.8:1 dark); the faint token is under 4.5:1 on the dark panel. */
.md-typeset ul.feature-list li.muted {
    color: var(--ink-muted);
    text-decoration: line-through;
}

.stats-row {
    display: grid;
    gap: 1px;
    margin: var(--sp-5) 0;
    overflow: hidden;
    background: var(--line);
    border: var(--hairline) solid var(--panel-border);
    border-radius: var(--radius-md);
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.stat-box {
    background: var(--panel);
    padding: var(--sp-4);
    text-align: center;
}

/* Spec summary cards (the spec_card macro in main.py; README "Spec cards").
   Flat and square like the rest of the site: cells divided by 1px hairlines
   (the grid gap shows the line colour behind), a small Lucide icon, an
   eyebrow label, the value and an optional detail line. The grid always
   fills its row: as many columns as cards on wide screens (up to four), two
   on phones for an even count and one for an odd count, so no cell sits
   empty. */
.zi-spec-grid {
    --zi-spec-cols: 1;
    display: grid;
    grid-template-columns: repeat(var(--zi-spec-cols), minmax(0, 1fr));
    gap: 1px;
    margin: var(--sp-5) 0;
    overflow: hidden;
    background: var(--line);
    border: var(--hairline) solid var(--panel-border);
    border-radius: var(--radius-md);
}

.zi-spec-grid:has(> :nth-child(2):last-child),
.zi-spec-grid:has(> :nth-child(4):last-child) {
    --zi-spec-cols: 2;
}

/* Sized by the article column (see .card-grid), so four cards go 2 x 2 in a
   column too narrow for their detail lines rather than wrapping them. */
@container zi-article (min-width: 560px) {
    .zi-spec-grid:has(> :nth-child(3):last-child) {
        --zi-spec-cols: 3;
    }
}

@container zi-article (min-width: 740px) {
    .zi-spec-grid:has(> :nth-child(4):last-child) {
        --zi-spec-cols: 4;
    }
}

@container zi-article (min-width: 560px) {
    /* Five or more: as many as fit, never narrower than a value needs. */
    .zi-spec-grid:has(> :nth-child(5)) {
        grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    }
}

.zi-spec-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-4);
    background: var(--panel);
}

.zi-spec-card__icon {
    width: 20px;
    height: 20px;
    margin-bottom: var(--sp-2);
    color: var(--ink-muted);
    stroke-width: 1.5;
}

.zi-spec-card__label {
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: var(--track-label);
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* A value and its unit stay together on one line. */
.zi-spec-card__value {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--ink);
}

.zi-spec-card__detail {
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--ink-muted);
}

.stat-box .val,
.model-glance .glance-stats .val {
    display: block;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.stat-box .lbl,
.model-glance .glance-stats .lbl {
    display: block;
    margin-top: var(--sp-1);
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: var(--track-label);
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* Lineup card figures read as a spec sheet: one row per figure, label left in
   the body face and the figure right, hairlines between. Two or three rows
   leave no empty grid cell, and a long label such as "WLTP (Long Range,
   MY25/MY26)" has the card's width instead of half of it. */
.model-glance .glance-stats {
    display: flex;
    flex-direction: column;
    margin: var(--sp-3) 0 var(--sp-4);
    border-top: var(--hairline) solid var(--line);
}

.model-glance .glance-stats > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
    border-bottom: var(--hairline) solid var(--line);
}

.model-glance .glance-stats .val {
    order: 2;
    flex: none;
    font-size: var(--fs-md);
    white-space: nowrap;
}

.md-typeset .model-glance .glance-stats .lbl {
    order: 1;
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
    color: var(--ink-muted);
}


/* The status chip sits on the banner's top-right corner. */
.z-card.model-banner .badge {
    z-index: 1;
}

/* Models page banner cards: a 2:1 strip of each model's banner across the top
   of the card, edge to edge, sized by width and height attributes so nothing
   shifts while it loads. Not overflow: hidden on the card, which would clip
   the card's focus ring. */
.md-typeset .z-card.model-banner .model-banner__img {
    display: block;
    width: calc(100% + 2 * var(--sp-5));
    max-width: none;
    height: auto;
    aspect-ratio: 2 / 1;
    margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-4);
    object-fit: cover;
    border-radius: calc(var(--radius-md) - var(--hairline)) calc(var(--radius-md) - var(--hairline)) 0 0;
}

/* 9. Tables: hairline and flat; label-style headers; 14px body. The scroll
   wrapper is the one scroll container so the first column can stick. ------ */
.md-typeset__scrollwrap {
    -webkit-overflow-scrolling: touch;
}

.md-typeset table:not([class]) {
    display: table;
    overflow: visible;
    border: var(--hairline) solid var(--line-strong);
    border-radius: var(--radius-md);
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-sm);
    background: var(--panel);
}

.md-typeset table:not([class]) th {
    min-width: 72px;
    padding: var(--sp-3);
    white-space: nowrap;
    background: var(--bg-raised);
    border-bottom: var(--hairline) solid var(--line-strong);
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    text-align: left;
    vertical-align: bottom;
    color: var(--ink-muted);
}

.md-typeset table:not([class]) td {
    padding: var(--sp-3);
    white-space: nowrap;
    border-top: 0;
    border-bottom: var(--hairline) solid var(--line);
    background: var(--panel);
    font-variant-numeric: tabular-nums;
    vertical-align: top;
    color: var(--ink);
}

.md-typeset table:not([class]) tbody tr:last-child td {
    border-bottom: 0;
}

/* A sentence wraps at a readable width (hooks/tables.py marks it); every
   other cell stays on one line, and a table wider than the column scrolls in
   its wrapper rather than stacking figures and headers over several lines. */
.md-typeset table:not([class]) td.zi-td-long {
    min-width: 12em;
    max-width: 30em;
    white-space: normal;
}

/* A phrase in a wide table wraps only where the column is desktop width; on a
   phone the table scrolls anyway, so the phrase keeps its line. */
@container zi-article (min-width: 600px) {
    .md-typeset table:not([class]) td.zi-td-phrase {
        min-width: 8em;
        white-space: normal;
    }
}

/* Tables take the column's width, so a short one does not float in a gap. */
.md-typeset .md-typeset__table {
    display: block;
    min-width: 100%;
}

.md-typeset .md-typeset__table table:not([class]) {
    min-width: 100%;
}

/* Faint zebra rows and a firmer hover, both solid so the sticky column never shows through. */
.md-typeset table:not([class]) tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--ink) 3%, var(--panel));
}

.md-typeset table:not([class]) tbody tr:hover td {
    background: color-mix(in srgb, var(--ink) 7%, var(--panel));
    box-shadow: none;
}

.md-typeset table:not([class]) td:first-child,
.md-typeset table:not([class]) th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
}

.md-typeset table:not([class]) td:first-child {
    border-right: var(--hairline) solid var(--line);
}

/* Comparison pages: zeekr.js adds .zi-compare. Best in column is bold plus a
   marker, so the signal is never colour alone; ink, not orange. */
.zi-compare .md-typeset table:not([class]) td:first-child strong {
    font-family: var(--font-display);
    font-weight: 700;
    white-space: nowrap;
}

.zi-compare .md-typeset table:not([class]) td:not(:first-child) strong {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
}

.zi-compare .md-typeset table:not([class]) td:not(:first-child) strong::after {
    content: " \25B8";
    font-size: 0.7em;
    color: var(--hue-slate-ink);
}

/* A Zeekr row that leads somewhere gets the wiki's Silver Gray edge and a light tint (solid, for the sticky column). */
.zi-compare .md-typeset table:not([class]) tbody
    tr:has(> td:first-child > strong):has(> td:not(:first-child) strong) td {
    background: color-mix(in srgb, var(--hue-slate-ink) var(--hue-tint), var(--panel));
}

.zi-compare .md-typeset table:not([class]) tbody
    tr:has(> td:first-child > strong):has(> td:not(:first-child) strong) td:first-child {
    box-shadow: inset 3px 0 0 var(--hue-slate-ink);
}

@media (max-width: 48rem) {
    .md-typeset table:not([class]) th,
    .md-typeset table:not([class]) td {
        padding: 10px;
    }
}

/* 10. Admonitions: hairline panels, a 3px hue edge, the title names the type.
   No blues, greens or ambers: notes are Silver Gray, tips Dawn Gold, warnings
   Dusk Plum. The extra .md-content outranks Material's per-type rules. ----- */
/* Admonition and details glyphs: vendored Lucide outlines (overrides/.icons/lucide),
   the set the spec cards and section cards use, in place of Material's filled
   icons. A question mark for notes, as they mostly flag what is not yet confirmed. */
:root {
    --md-admonition-icon--note: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/><path d='M12 17h.01'/></svg>");
    --md-admonition-icon--abstract: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
    --md-admonition-icon--info: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
    --md-admonition-icon--tip: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/><path d='M9 18h6'/><path d='M10 22h4'/></svg>");
    --md-admonition-icon--success: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m16 9-5.5 5.5L8 12'/></svg>");
    --md-admonition-icon--question: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/><path d='M12 17h.01'/></svg>");
    --md-admonition-icon--warning: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>");
    --md-admonition-icon--failure: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 16h.01'/><path d='M12 8v4'/><path d='M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z'/></svg>");
    --md-admonition-icon--danger: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 16h.01'/><path d='M12 8v4'/><path d='M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z'/></svg>");
    --md-admonition-icon--bug: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 16h.01'/><path d='M12 8v4'/><path d='M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z'/></svg>");
    --md-admonition-icon--example: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
    --md-admonition-icon--quote: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
    --md-details-icon: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>");
}

.md-content .md-typeset :is(.admonition, details) {
    --adm: var(--hue-slate-ink);
    margin: var(--sp-5) 0;
    padding: 0 var(--sp-4);
    background: var(--panel);
    border: var(--hairline) solid var(--line-strong);
    border-left: 3px solid var(--adm);
    border-radius: var(--radius-md);
    box-shadow: none;
    font-size: var(--fs-md);
    color: var(--ink);
}

.md-content .md-typeset :is(.admonition, details):is(.tip, .hint, .success, .check, .done) {
    --adm: var(--hue-gold-ink);
}

.md-content .md-typeset :is(.admonition, details):is(.warning, .caution, .attention, .danger, .error, .failure, .fail, .missing, .bug) {
    --adm: var(--hue-plum-ink);
}

.md-content .md-typeset :is(.admonition, details) > :is(.admonition-title, summary) {
    margin: 0 calc(-1 * var(--sp-4));
    padding: var(--sp-2) var(--sp-4) var(--sp-2) 40px;
    background: color-mix(in srgb, var(--adm) var(--hue-tint), var(--panel));
    border: 0;
    border-bottom: var(--hairline) solid var(--line);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
}

.md-content .md-typeset :is(.admonition, details) > :is(.admonition-title, summary)::before {
    top: 50%;
    left: var(--sp-4);
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    background-color: var(--adm);
}

.md-content .md-typeset details:not([open]) > summary {
    border-bottom: 0;
}

.md-content .md-typeset :is(.admonition, details) > summary::after {
    top: 50%;
    transform: translateY(-50%) rotate(0);
}

.md-content .md-typeset details[open] > summary::after {
    transform: translateY(-50%) rotate(90deg);
}

.md-content .md-typeset :is(.admonition, details) > :is(p, ul, ol, table, div):last-child {
    margin-bottom: var(--sp-4);
}

/* 11. Links: the ink colour, underlined and semibold; hover thickens. ------ */
.md-typeset a:not(.btn, .btn-hero, .go, .headerlink, .md-button, .md-tag),
.md-typeset a:not(.btn, .btn-hero, .go, .headerlink, .md-button, .md-tag):hover {
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: var(--hairline);
    text-underline-offset: 0.2em;
}

.md-typeset a:not(.btn, .btn-hero, .go, .headerlink, .md-button, .md-tag):hover {
    text-decoration-thickness: var(--rule);
}

/* Link colour in every state, spelled out. Visited always matches unvisited,
   as on the front door. Material colours a:focus and a:hover with
   --md-accent-fg-color, which resolves once on <body>: in the light theme a
   focused button in the always-dark hero (the browser re-focuses the link you
   left by when you come Back) took the page's dark ink on a black ground, and
   in dark a focused orange button took light ink on orange. Each rule below
   resolves --ink where the link sits, so a link reads in its own region. */
/* Secondary navigation and permalinks are muted at rest, visited or not.
   :where keeps these below the ink states that follow. */
.md-nav__link:where(:link, :visited),
.md-tabs__link:where(:link, :visited),
.md-path__link:where(:link, :visited) {
    color: var(--ink-muted);
}

.md-typeset .headerlink:where(:link, :visited) {
    color: var(--ink-faint);
}

.md-typeset a:not(.btn, .btn-hero, .go, .headerlink, .md-button, .md-tag, .footnote-ref):is(:link, :visited, :hover, :active, :focus, :focus-visible),
.md-typeset a.go:is(:link, :visited, :hover, :active, :focus, :focus-visible),
.md-typeset a:is(.btn, .btn-hero):is(:link, :visited, :hover, :active, :focus, :focus-visible),
.zi-footer a:is(:link, :visited, :hover, :active, :focus, :focus-visible),
.md-nav__link:is(:hover, :active, :focus, :focus-visible),
.md-nav--primary .md-nav__link--active,
.md-tabs__link:is(:hover, :active, :focus, :focus-visible),
.md-tabs__item--active .md-tabs__link,
.md-path__link:is(:hover, :active, :focus, :focus-visible),
.md-typeset .headerlink:is(:hover, :active, :focus, :focus-visible) {
    color: var(--ink);
}

.md-typeset a:is(.btn-primary, .btn-hero-primary):is(:link, :visited, :hover, :active, :focus, :focus-visible) {
    color: var(--on-accent);
}

.md-typeset a.footnote-ref:is(:link, :visited, :hover, :active, :focus, :focus-visible) {
    color: var(--accent-ink);
}

/* 12. Icons: wiki line art (<img>) drawn in the ink colour, never orange. -- */
.zi-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.5em;
    vertical-align: middle;
}

img.zi-icon {
    filter: var(--icon-filter);
}

.zi-icon--sm { width: 1em; height: 1em; }
.zi-icon--lg { width: 2em; height: 2em; }
.zi-icon--xl { width: 48px; height: 48px; }
.zi-icon--standalone { margin-right: 0; }

.stat-box .zi-icon,
.stats-row .zi-icon {
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 auto var(--sp-2);
}

td .zi-icon,
th .zi-icon {
    width: 1.25em;
    height: 1.25em;
}

p .zi-icon,
li .zi-icon,
span .zi-icon {
    width: 1.1em;
    height: 1.1em;
    margin-right: 0.25em;
    vertical-align: text-bottom;
}

/* Inline SVGs from overrides/.icons/zi: stroke icons take currentColor. */
.zi-svg:not(.zi-svg--brand) {
    fill: none !important;
    stroke: currentColor;
}

/* 13. Code and images ------------------------------------------------------ */
.md-typeset code {
    padding: 0.1em 0.35em;
    background: var(--bg-raised);
    border-radius: var(--radius-sm);
    font-size: 0.875em;
}

.md-typeset pre > code {
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius-md);
}

.md-typeset img {
    border-radius: 0;
}

/* Inline diagrams (content/assets/diagrams, pulled in with snippets). Material
   sizes a figure to its content, which collapses an SVG set to width: 100%, so
   the figure takes the column instead. Each SVG caps itself at 600px; a wide
   and narrow pair (.zk-wide) uses the full column. */
.md-typeset figure.zi-diagram {
    display: block;
    width: 100%;
    max-width: 600px;
    margin: var(--sp-6) 0;
    text-align: left;
}

.md-typeset figure.zi-diagram:has(.zk-wide) {
    max-width: none;
}

.md-typeset figure.zi-diagram figcaption {
    max-width: none;
    margin: var(--sp-2) 0 0;
    font-style: normal;
    text-align: left;
}

/* 14. Masthead: the site's black band with the badge, the six club sections
   (Wiki current) and Join us, over a 2px orange rule. Not sticky, as on the
   site; the wiki bar below it sticks. ------------------------------------- */
.zi-mast {
    position: relative;
    z-index: 5;
    background: var(--night-bg);
    border-bottom: var(--rule) solid var(--zeekr-orange);
    font-family: var(--font-body);
}

.zi-wrap {
    width: 100%;
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.zi-mast__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--sp-3);
}

.zi-mast__brand {
    display: flex;
    align-items: center;
    margin-right: auto;
    padding-block: var(--sp-2);
}

.zi-mast__brand img {
    width: var(--badge-mast);
    height: auto;
}

.zi-mast__actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--sp-3);
}

.zi-mast .btn {
    padding: 0 var(--sp-3);
    white-space: nowrap;
}

.zi-mast .btn-primary,
.zi-mast .btn-primary:hover {
    background: var(--accent, var(--zeekr-orange));
    border-color: var(--zeekr-orange);
    color: var(--carbon-grey);
}


/* Material's palette toggle restyled as the site's square theme button. */
.zi-mast .md-header__option {
    display: flex;
    margin: 0;
    max-width: none;
    opacity: 1;
}

.zi-mast .md-header__option > .md-header__button.md-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap);
    height: var(--tap);
    margin: 0;
    padding: 0;
    border: var(--hairline) solid var(--night-line-strong);
    border-radius: var(--radius-sm);
    color: var(--night-ink);
    cursor: pointer;
}

.zi-mast .md-header__option > .md-header__button.md-icon[hidden] {
    display: none;
}

.zi-mast .md-header__option > .md-header__button.md-icon:hover {
    border-color: var(--night-ink);
    opacity: 1;
}

.zi-mast .md-header__option > .md-header__button.md-icon svg {
    width: 18px;
    height: 18px;
}

/* Focus sits on one of Material's 0x0 radios, and not always the one just
   before the visible label, so the ring goes on whichever label is showing. */
.zi-mast .md-header__option:has(> input:focus-visible) > label:not([hidden]) {
    outline: var(--rule) solid var(--night-ink);
    outline-offset: 2px;
}

.zi-rail {
    order: 5;
    flex: 1 0 100%;
    margin-inline: calc(-1 * var(--gutter));
    border-top: var(--hairline) solid var(--night-line);
}

.zi-rail ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.zi-rail li {
    margin: 0;
    border-bottom: var(--hairline) solid var(--night-line);
}

.zi-rail li:nth-child(n + 5) {
    border-bottom: 0;
}

.zi-rail li:nth-child(odd) {
    border-right: var(--hairline) solid var(--night-line);
}

.zi-rail a {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: calc(var(--tap) + var(--sp-2));
    padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--gutter);
    color: var(--night-ink);
    text-decoration: none;
}

.zi-rail li:nth-child(even) a {
    padding-left: var(--sp-3);
}

.zi-rail a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: calc(-1 * var(--hairline));
    left: 0;
    height: var(--rule);
    background: var(--zeekr-orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-med) var(--ease);
}

.zi-rail a:hover::after,
.zi-rail a:focus-visible::after,
.zi-rail a[aria-current]::after {
    transform: scaleX(1);
}

.zi-rail svg {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--night-muted);
}

.zi-rail__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.zi-rail__text .zi-label {
    color: var(--night-muted);
    white-space: nowrap;
}

.zi-rail a[aria-current] .zi-label {
    color: var(--night-ink);
}

.zi-rail__text strong {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: var(--lh-snug);
    white-space: nowrap;
}

.zi-rail .zi-ext {
    display: flex;
}

.zi-rail .zi-ext svg {
    width: 14px;
    height: 14px;
}

.zi-vh {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (min-width: 48rem) {
    .zi-rail ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .zi-rail li,
    .zi-rail li:nth-child(odd) {
        border-right: var(--hairline) solid var(--night-line);
        border-bottom: var(--hairline) solid var(--night-line);
    }

    .zi-rail li:nth-child(3n) {
        border-right: 0;
    }

    .zi-rail li:nth-child(n + 4) {
        border-bottom: 0;
    }

    .zi-rail a,
    .zi-rail li:nth-child(even) a {
        padding: var(--sp-2) var(--sp-3);
    }

    .zi-rail li:nth-child(3n + 1) a {
        padding-left: var(--gutter);
    }
}

@media (min-width: 72rem) {
    .zi-rail ul {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .zi-rail li,
    .zi-rail li:nth-child(odd),
    .zi-rail li:nth-child(3n) {
        border-right: var(--hairline) solid var(--night-line);
        border-bottom: 0;
    }

    .zi-rail li:last-child {
        border-right: 0;
    }

    .zi-rail li:nth-child(3n + 1) a {
        padding-left: var(--sp-3);
    }

    .zi-rail li:first-child a {
        padding-left: var(--gutter);
    }
}

@media (min-width: 100rem) {
    .zi-mast__bar {
        flex-wrap: nowrap;
        align-items: stretch;
    }

    .zi-mast__brand {
        margin-right: 0;
        padding-block: var(--sp-3);
    }

    .zi-rail {
        display: flex;
        flex: 1 1 0;
        order: 0;
        align-items: center;
        min-width: 0;
        margin-inline: var(--sp-5) var(--sp-4);
        border-top: 0;
    }

    .zi-rail ul {
        flex: 1;
    }

    .zi-rail li,
    .zi-rail li:nth-child(odd),
    .zi-rail li:nth-child(3n),
    .zi-rail li:nth-child(n + 4) {
        border-right: 0;
        border-bottom: 0;
        border-left: var(--hairline) solid var(--night-line);
    }

    .zi-rail a,
    .zi-rail li:nth-child(3n + 1) a,
    .zi-rail li:first-child a {
        padding: var(--sp-2) var(--sp-3);
    }

    .zi-mast__actions {
        align-self: flex-start;
        padding-top: var(--sp-3);
    }
}

/* 15. Wiki bar and tabs: the site's sub-bar (raised surface, hairline under,
   muted tabs, current tab in ink with the orange underline). ------------- */
.md-header {
    background: var(--bg-raised);
    color: var(--ink);
    border-bottom: var(--hairline) solid var(--line);
    box-shadow: none;
}

/* Header, tabs and page content all start on the site's gutter, under the masthead's badge. */
.md-header__inner {
    padding-inline: calc(var(--gutter) - 8px);
}

[dir] .md-header__title {
    margin-left: 8px;
    font-family: var(--font-display);
    font-weight: 600;
}

.md-main__inner.md-grid {
    padding-inline: calc(var(--gutter) - 16px);
}

.md-header__topic:first-child {
    font-weight: 700;
}

.md-header__button.md-icon svg {
    width: 20px;
    height: 20px;
}

/* Touch targets: the wiki bar's menu and search buttons are 44px (Material's
   are 36px), by padding only, since Material shows and hides them per
   breakpoint with display. The small glyphs below grow an invisible hit area
   to at least 24px, leaving what you see unchanged. */
.md-header .md-header__button.md-icon {
    margin: var(--hairline) 0;
    padding: calc((var(--tap) - 20px) / 2);
    line-height: 0;
}

.md-search__icon::after {
    content: "";
    position: absolute;
    inset: calc((var(--tap) - 1.2rem) / -2);
}

.md-typeset .headerlink {
    position: relative;
}

.md-typeset .headerlink::after {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-3)) calc(-1 * var(--sp-2)) calc(-1 * var(--sp-1));
}

.md-tabs {
    background: var(--bg-raised);
    color: var(--ink);
    border-top: var(--hairline) solid var(--line);
}

[dir] .md-tabs__list {
    margin-left: calc(var(--gutter) - var(--sp-3));
}

.md-tabs__item {
    height: auto;
    padding: 0;
}

.md-tabs__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    margin: 0;
    padding: 0 var(--sp-3);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-muted);
    opacity: 1;
}

.md-tabs__link::after {
    content: "";
    position: absolute;
    inset: auto var(--sp-3) 0;
    height: var(--rule);
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-med) var(--ease);
}

.md-tabs__link:hover,
.md-tabs__item--active .md-tabs__link {
    color: var(--ink);
}

.md-tabs__link:hover::after,
.md-tabs__item--active .md-tabs__link::after {
    transform: scaleX(1);
}

/* Search: square, hairline, on the page colour. */
:root {
    --md-clipboard-icon: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='14' height='14' x='8' y='8' rx='2' ry='2'/><path d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/></svg>");
    --md-search-result-icon: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/><path d='M14 2v5a1 1 0 0 0 1 1h5'/><path d='M10 9H8'/><path d='M16 13H8'/><path d='M16 17H8'/></svg>");
}

/* Lucide outlines in Material's icon slots: stroked, never filled. */
.md-icon svg.lucide {
    fill: none;
    stroke: currentColor;
}

@media screen and (min-width: 60em) {
    .md-search__form {
        height: 36px;
        background: var(--bg);
        border: var(--hairline) solid var(--line-strong);
        border-radius: var(--radius-md);
    }

    .md-search__form:hover {
        background: var(--bg);
        border-color: var(--ink);
    }

    .md-search__input {
        background: transparent;
        color: var(--ink);
        font-family: var(--font-body);
        font-size: var(--fs-md);
    }

    .md-search__input::placeholder,
    .md-search__icon {
        color: var(--ink-muted);
    }

    [data-md-toggle="search"]:checked ~ .md-header .md-search__form {
        border-radius: var(--radius-md) var(--radius-md) 0 0;
    }

    [data-md-toggle="search"]:checked ~ .md-header .md-search__input + .md-search__icon {
        color: var(--ink);
    }
}

.md-search__output,
.md-search-result__meta {
    background: var(--panel);
}

.md-search-result__meta {
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--ink-muted);
}

.md-search-result mark {
    color: var(--ink);
    text-decoration: underline;
}

/* 16. Sidebars ------------------------------------------------------------- */
.md-nav {
    font-size: var(--fs-sm);
}

.md-nav__title {
    font-family: var(--font-display);
}

.md-nav__link {
    color: var(--ink-muted);
}

.md-nav__link:hover,
.md-nav__link:focus {
    color: var(--ink);
}

/* Hover adds an underline as well as ink, so the cue is not colour alone. */
.md-sidebar--primary a.md-nav__link:hover,
.md-sidebar--primary .md-nav__container:hover > a.md-nav__link {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: var(--hairline);
    text-underline-offset: 0.2em;
}

/* Current page: ink and semibold with the wiki's Silver Gray marker. */
.md-nav--primary .md-nav__link--active {
    position: relative;
    color: var(--ink);
    font-weight: 600;
}

@media screen and (min-width: 76.25em) {
    .md-nav--primary .md-nav__link--active::before {
        content: "";
        position: absolute;
        top: 2px;
        bottom: 2px;
        left: -10px;
        width: 3px;
        background: var(--hue-slate-ink);
    }

    .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
        font-family: var(--font-display);
        font-size: var(--fs-2xs);
        font-weight: 600;
        letter-spacing: var(--track-label);
        text-transform: uppercase;
        color: var(--ink-muted);
        box-shadow: none;
    }
}

/* Drawer (phones): the title bar on the raised surface, not a colour fill. */
.md-nav--primary .md-nav__title[for="__drawer"] {
    background: var(--bg-raised);
    color: var(--ink);
}

/* Back to top: square, hairline, the site's up arrow. */
.md-top {
    padding: 0 var(--sp-4);
    min-height: var(--tap);
    background: var(--panel);
    color: var(--ink);
    border: var(--hairline) solid var(--line-strong);
    border-radius: var(--radius-md);
    box-shadow: none;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.md-top:hover,
.md-top:focus {
    background: var(--panel);
    color: var(--ink);
    border-color: var(--ink);
}

.md-top svg {
    width: 16px;
    height: 16px;
}

/* The club's sections at the top of the phone drawer (partials/nav.html):
   the masthead that carries them has scrolled away by the time the drawer
   opens. Hidden while the nav is a sidebar, where the masthead is on screen. */
.zi-drawer-club {
    display: none;
}

@media screen and (max-width: 76.234375em) {
    /* Material lays the drawer's nav absolutely over the whole sidebar; a flex
       column puts it under the club block instead, and its nested panels
       (absolute, 100% high) then cover only the nav, not the club links. */
    .md-sidebar--primary .md-sidebar__inner {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .md-sidebar--primary .md-nav--primary {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
    }

    .zi-drawer-club {
        flex: none;
        display: grid;
        gap: var(--sp-3);
        padding: var(--sp-4) var(--sp-4) var(--sp-5);
        border-bottom: var(--hairline) solid var(--line);
    }

    .zi-drawer-club h2.zi-label {
        margin: 0;
    }

    .zi-drawer-club ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 var(--sp-3);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .zi-drawer-club a:not(.btn) {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        min-height: var(--tap);
        color: var(--ink);
        /* The drawer's own nav text size, so the two lists read as one menu. */
        font-size: var(--fs-md);
        font-weight: 600;
        text-decoration: none;
    }

    .zi-drawer-club a:not(.btn):is(:hover, :focus-visible) {
        text-decoration: underline;
        text-decoration-thickness: var(--rule);
        text-underline-offset: 0.2em;
    }

    .zi-drawer-club a:not(.btn) > svg {
        flex: none;
        width: 18px;
        height: 18px;
    }

    .zi-drawer-club .zi-ext svg {
        width: 12px;
        height: 12px;
    }

    /* The chevron that opens a nav group is a 20x24 label; its hit area grows to 44px. */
    .md-nav--primary label.md-nav__link {
        position: relative;
    }

    .md-nav--primary .md-nav__container > label.md-nav__link::after {
        content: "";
        position: absolute;
        inset: calc((var(--tap) - var(--sp-5)) / -2);
    }

    .zi-drawer-club .btn-primary {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--on-accent);
    }
}

/* 17. Footer and 404 ------------------------------------------------------- */
.zi-footer {
    padding-block: var(--sp-6);
    border-top: var(--hairline) solid var(--line);
    background: var(--bg);
    color: var(--ink);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

.zi-footer a {
    color: var(--ink);
}

/* A link inside a sentence needs more than colour to stand out (WCAG 1.4.1). */
.zi-footer p a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.zi-keep {
    display: grid;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
    padding: var(--sp-5);
    background: var(--panel);
    border: var(--hairline) solid var(--panel-border);
    border-radius: var(--radius-md);
}

@media (min-width: 48rem) {
    .zi-keep {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
}

.zi-keep h2 {
    margin: 0 0 var(--sp-1);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
}

.zi-keep p {
    margin: 0;
    color: var(--ink-muted);
}

.zi-footer__grid {
    display: grid;
    gap: var(--sp-5);
}

@media (min-width: 48rem) {
    .zi-footer__grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    }
}

.zi-footer h2.zi-label {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-2xs);
}

.zi-footer p {
    margin: 0;
}

.zi-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.zi-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    text-decoration: none;
}

.zi-footer__links a:hover {
    text-decoration: underline;
}

.zi-socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3) !important;
}

.zi-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap);
    height: var(--tap);
    border: var(--hairline) solid var(--line-strong);
    border-radius: var(--radius-sm);
}

.zi-socials a:hover {
    background: var(--bg-raised);
    border-color: var(--ink);
}

.zi-socials svg {
    width: 20px;
    height: 20px;
}

.zi-footer__legal {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: var(--hairline) solid var(--line);
    color: var(--ink-muted);
}

.zi-footer__legal p + p {
    margin-top: var(--sp-1);
}

.md-typeset .zi-oops {
    display: grid;
    justify-items: start;
    gap: var(--sp-3);
    max-width: 640px;
    padding-block: var(--sp-6);
}

.md-typeset .zi-oops h1 {
    margin: 0;
}

.md-typeset .zi-oops p {
    margin: 0;
}

.md-typeset .zi-oops ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

[dir] .md-typeset .zi-oops li {
    margin: 0;
}

/* 18. Focus, motion and print --------------------------------------------- */
:focus-visible,
.md-typeset :focus-visible,
.md-nav__link:focus-visible,
.md-tabs__link:focus-visible {
    outline: var(--rule) solid var(--focus, currentColor);
    outline-offset: 2px;
}

.md-typeset__scrollwrap:focus-visible {
    outline: var(--rule) solid var(--focus);
    outline-offset: 2px;
}

/* Content tabs: focus is on a hidden radio, so the ring goes on its label.
   Ten covers the longest tab set the wiki is likely to have. */
.md-typeset .tabbed-set > input:nth-child(1):focus-visible ~ .tabbed-labels > label:nth-child(1),
.md-typeset .tabbed-set > input:nth-child(2):focus-visible ~ .tabbed-labels > label:nth-child(2),
.md-typeset .tabbed-set > input:nth-child(3):focus-visible ~ .tabbed-labels > label:nth-child(3),
.md-typeset .tabbed-set > input:nth-child(4):focus-visible ~ .tabbed-labels > label:nth-child(4),
.md-typeset .tabbed-set > input:nth-child(5):focus-visible ~ .tabbed-labels > label:nth-child(5),
.md-typeset .tabbed-set > input:nth-child(6):focus-visible ~ .tabbed-labels > label:nth-child(6),
.md-typeset .tabbed-set > input:nth-child(7):focus-visible ~ .tabbed-labels > label:nth-child(7),
.md-typeset .tabbed-set > input:nth-child(8):focus-visible ~ .tabbed-labels > label:nth-child(8),
.md-typeset .tabbed-set > input:nth-child(9):focus-visible ~ .tabbed-labels > label:nth-child(9),
.md-typeset .tabbed-set > input:nth-child(10):focus-visible ~ .tabbed-labels > label:nth-child(10) {
    outline: var(--rule) solid var(--focus);
    outline-offset: -2px;
}

/* Closed search keeps its results panel in the DOM at zero height, and
   Material makes it a tab stop; hiding it takes it out of the tab order. */
#__search:not(:checked) ~ .md-header .md-search__scrollwrap {
    visibility: hidden;
}

/* On phones open search is a full-screen layer inside the header, whose
   stacking sits under the masthead (z-index 5): lift the header while search
   is open, or the masthead covers the search field. */
#__search:checked ~ .md-header {
    z-index: 6;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ink-faint);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .zi-mast,
    .zi-footer {
        display: none;
    }

    .hero-section,
    .hero-container {
        background: #FFFFFF !important;
        border-color: #7A7A7A;
    }

    .hero-title,
    .hero-subtitle {
        color: #000000 !important;
    }
}

/* 19. "On this page" panel (as on the club site), wide screens
   only, where Material shows the right-hand sidebar. Orange here is the
   site's deliberate exception: the accent ink token, so #FF5A00 on dark and
   #B03C00 on light (4.95:1 on the panel). ------------------------------- */
.zi-toc__track,
.zi-toc__pct,
.zi-toc__top {
    display: none;
}

@media screen and (min-width: 76.25em) {
    /* Compact: the panel never outgrows the window (viewport less the sticky
       wiki bar and tabs, and a gutter); its list scrolls inside it, so the
       heading, progress and Back to top stay in view on long pages. */
    /* Material sizes the scroll area to the part of the sidebar in view, which
       at the top of a page is less than the window. The panel fits that, so
       its foot and Back to top never fall below the fold, cut mid-row. */
    .md-sidebar--secondary .md-sidebar__inner {
        height: 100%;
    }

    .md-sidebar--secondary .md-sidebar__inner > .zi-toc--panel {
        max-height: min(100%, calc(100vh - 9rem));
    }

    .md-sidebar--secondary .zi-toc--panel {
        position: relative;
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 9rem);
        box-sizing: border-box;
        overflow: hidden;
        margin: 0;
        padding: var(--sp-3) var(--sp-2) 0;
        background: var(--bg-raised);
        border: var(--hairline) solid var(--line-strong);
        border-radius: var(--radius-md);
        font-size: 15px;
        line-height: 1.3;
    }

    .zi-toc__track {
        display: block;
        position: absolute;
        inset: 0 0 auto 0;
        height: 3px;
        background: var(--line);
    }

    .zi-toc__track i {
        display: block;
        height: 100%;
        background: var(--accent-ink);
        transform: scaleX(0);
        transform-origin: left;
    }

    .zi-toc__head {
        flex: none;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--sp-3);
        margin: var(--sp-1) var(--sp-2) var(--sp-2);
    }

    .md-sidebar--secondary .zi-toc .md-nav__title {
        position: static;
        margin: 0;
        padding: 0;
        background: none;
        box-shadow: none;
        font-family: var(--font-display);
        font-size: var(--fs-2xs);
        font-weight: 600;
        letter-spacing: var(--track-label);
        text-transform: uppercase;
        color: var(--ink);
    }

    .zi-toc__pct {
        display: block;
        margin: 0;
        font-family: var(--font-display);
        font-size: var(--fs-sm);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: var(--accent-ink);
    }

    [dir] .md-sidebar--secondary .zi-toc .md-nav__list {
        display: grid;
        gap: 1px;
        margin: 0;
        padding: 0;
    }

    /* The top-level list is the scroller, with the site's thin scrollbar. */
    .md-sidebar--secondary .zi-toc > .md-nav__list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--line-strong) transparent;
    }

    .md-sidebar--secondary .zi-toc > .md-nav__list {
        counter-reset: zi-toc;
    }

    .md-sidebar--secondary .zi-toc .md-nav__item {
        padding: 0;
    }

    /* h4 and deeper stay out of the panel, as on the site. */
    .md-sidebar--secondary .zi-toc .md-nav .md-nav {
        display: none;
    }

    [dir] .md-sidebar--secondary .zi-toc .md-nav__link {
        display: grid;
        grid-template-columns: 26px minmax(0, 1fr);
        align-items: baseline;
        margin: 0;
        padding: calc(var(--sp-1) * 1.5) var(--sp-2);
        border-left: 3px solid transparent;
        border-radius: var(--radius-sm);
        font-weight: 500;
        color: var(--ink-muted);
        overflow-wrap: anywhere;
        scroll-snap-align: none;
    }

    .md-sidebar--secondary .zi-toc .md-nav__link .md-ellipsis {
        grid-column: 2;
        white-space: normal;
    }

    .md-sidebar--secondary .zi-toc > .md-nav__list > .md-nav__item {
        counter-increment: zi-toc;
    }

    .md-sidebar--secondary .zi-toc > .md-nav__list > .md-nav__item > .md-nav__link::before {
        content: counter(zi-toc, decimal-leading-zero);
        grid-column: 1;
        font-family: var(--font-display);
        font-size: var(--fs-xs);
        font-weight: 600;
        letter-spacing: 0.04em;
        font-variant-numeric: tabular-nums;
    }

    /* h3 rows: no number, text aligned with its h2's text; smaller, muted,
       regular weight carries the hierarchy, not an indent. */
    [dir] .md-sidebar--secondary .zi-toc .md-nav .md-nav__link {
        padding-block: var(--sp-1);
        font-size: calc(var(--fs-sm) - 1px);
        font-weight: 400;
    }

    .md-sidebar--secondary .zi-toc .md-nav__link:hover {
        background: var(--bg-sunk);
        color: var(--ink);
    }

    [dir] .md-sidebar--secondary .zi-toc .md-nav__link--active,
    [dir] .md-sidebar--secondary .zi-toc .md-nav__link--active:hover {
        border-left-color: var(--accent-ink);
        background: color-mix(in srgb, var(--accent-ink) 12%, transparent);
        font-weight: 600;
        color: var(--ink);
    }

    .md-sidebar--secondary .zi-toc .md-nav__link--active::before {
        color: var(--accent-ink);
    }

    .md-sidebar--secondary .zi-toc .md-nav__link:focus-visible {
        outline: var(--rule) solid var(--ink);
        outline-offset: -2px;
    }

    .zi-toc__top {
        flex: none;
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        margin: var(--sp-2) calc(-1 * var(--sp-2)) 0;
        padding: var(--sp-2) var(--sp-3);
        border-top: var(--hairline) solid var(--line-strong);
        font-family: var(--font-display);
        font-size: var(--fs-sm);
        font-weight: 600;
        color: var(--ink);
        text-decoration: none;
    }

    .zi-toc__top:hover {
        background: var(--bg-sunk);
        color: var(--ink);
    }

    .zi-toc__top svg {
        width: 16px;
        height: 16px;
    }

    /* The panel has its own Back to top row, so the floating one is for pages without it. */
    body:has(.md-sidebar--secondary:not([hidden]) .zi-toc__top) .md-top {
        display: none;
    }
}

/* The page list on the left needs less room than the panel on the right, whose
   section titles are longer: give the panel some of it so fewer titles wrap. */
@media screen and (min-width: 76.25em) {
    .md-sidebar--primary {
        width: 10.4rem;
    }

    .md-sidebar--secondary {
        width: 13.8rem;
    }

    [dir] .md-sidebar--secondary .md-sidebar__inner {
        padding-right: 0;
    }
}

/* Wide screens have room to spare: a wider panel (Material's is 12.1rem) so
   fewer titles wrap, while the article keeps a comfortable measure (about
   800px at 1440). Below this width the column would get too narrow. */
@media screen and (min-width: 87.5em) {
    .md-sidebar--secondary {
        width: 15rem;
    }

    /* Material caps the sidebar's content at 11.5rem with padding; let the panel use the width. */
    [dir] .md-sidebar--secondary .md-sidebar__inner {
        padding-right: 0;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .md-sidebar--secondary .zi-toc .md-nav__link,
    .zi-toc__top {
        transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
    }
}

/* 20. Citations (hooks/citations.py, javascripts/zeekr.js): small orange
   superscripts linked to the Sources list. Orange is the accent ink token, as
   on the "On this page" marker: #B03C00 on light (5.4:1 on the page) and
   #FF5A00 on dark (6.0:1). The superscript is lifted with relative
   positioning rather than vertical-align, and its hit area grows with a
   pseudo-element, so neither inflates the line height. -------------------- */
.md-typeset sup[id^="fnref"] {
    position: relative;
    top: -0.5em;
    vertical-align: baseline;
    font-size: 0.75em;
    line-height: 0;
}

/* Brackets, as the source writes "[1]", tell a citation from a footnote or a
   power by shape as well as colour, and keep "[1][2]" from reading as "12".
   The alt text after "/" is empty, so screen readers hear only the link's
   aria-label. */
.md-typeset sup[id^="fnref"]::before {
    content: "[";
    content: "[" / "";
}

.md-typeset sup[id^="fnref"]::after {
    content: "]";
    content: "]" / "";
}

.md-typeset sup[id^="fnref"]::before,
.md-typeset sup[id^="fnref"]::after {
    color: var(--accent-ink);
    font-weight: 700;
}

.md-typeset a.footnote-ref {
    position: relative;
    padding-inline: 0.1em;
    border-radius: var(--radius-sm);
    color: var(--accent-ink);
    font-size: inherit;
    font-weight: 700;
    text-decoration: none;
}

/* At least 24px square (WCAG 2.5.8), centred on the number. */
.md-typeset a.footnote-ref::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, var(--sp-5));
    height: max(100%, var(--sp-5));
    transform: translate(-50%, -50%);
}

.md-typeset a.footnote-ref:hover {
    color: var(--accent-ink);
    text-decoration: underline;
    text-decoration-thickness: var(--rule);
    text-underline-offset: 0.15em;
}

.md-typeset a.footnote-ref:focus-visible {
    outline: var(--rule) solid var(--focus);
    outline-offset: 2px;
}

/* The Sources panel (hooks/citations.py): a closed <details> at the foot of
   the page that reads as a footer, not more article. It sits after a hairline
   divider and extra space, on its own raised surface with a hairline border,
   and its type is small: an eyebrow label like "On this page" ("SOURCES · 6"),
   a 12px muted note and 12px entries. The extra .md-content and summary class
   outrank the admonition styling in section 10, which would otherwise dress
   it as a callout. */
.md-typeset .zi-sources-wrap {
    margin-top: var(--sp-7);
    padding-top: var(--sp-5);
    border-top: var(--hairline) solid var(--line);
}

.md-content .md-typeset details.zi-sources {
    margin: 0;
    padding: 0 var(--sp-3);
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg-raised);
    box-shadow: none;
    color: var(--ink-muted);
    font-size: var(--fs-xs);
    line-height: 1.5;
}

.md-content .md-typeset details.zi-sources:focus-within {
    box-shadow: none;
}

/* Label and note on the left; the Show/Hide toggle on the right, centred on
   both lines. */
.md-content .md-typeset details.zi-sources > summary.zi-sources__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--sp-3);
    row-gap: var(--sp-1);
    margin: 0 calc(-1 * var(--sp-3));
    padding: var(--sp-2) var(--sp-3);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--ink-muted);
    font-family: var(--font-body, inherit);
    font-size: var(--fs-xs);
    font-weight: 400;
    cursor: pointer;
}

.md-content .md-typeset details.zi-sources[open] > summary.zi-sources__summary {
    border-bottom: var(--hairline) solid var(--line);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Material draws an admonition icon before a summary; the panel needs only the chevron. */
.md-content .md-typeset details.zi-sources > summary.zi-sources__summary::before {
    display: none;
}

/* Material's corner chevron gives way to the toggle below. */
.md-content .md-typeset details.zi-sources > summary.zi-sources__summary::after {
    display: none;
}

.zi-sources__label,
.zi-sources__note {
    grid-column: 1;
}

/* The toggle: Show/Hide in the eyebrow style beside a 16px chevron, in a
   28px square target with a hairline border, square like the site's buttons. */
.zi-sources__toggle {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--ink-muted);
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
}

.zi-sources__chevron {
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    padding: 5px;
    border: var(--hairline) solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--ink);
    stroke-width: 1.75;
    transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.zi-sources[open] .zi-sources__chevron {
    transform: rotate(180deg);
}

.zi-sources__hide,
.zi-sources[open] .zi-sources__show {
    display: none;
}

.zi-sources[open] .zi-sources__hide {
    display: inline;
}

.md-content .md-typeset details.zi-sources > summary.zi-sources__summary:is(:hover, :focus-visible) .zi-sources__chevron {
    border-color: var(--ink);
}

.md-content .md-typeset details.zi-sources > summary.zi-sources__summary:is(:hover, :focus-visible) .zi-sources__toggle {
    color: var(--ink);
}

.md-content .md-typeset details.zi-sources > summary.zi-sources__summary:is(:hover, :focus-visible) .zi-sources__label {
    text-decoration: underline;
    text-decoration-thickness: var(--hairline);
    text-underline-offset: 0.25em;
}

.md-content .md-typeset details.zi-sources > summary.zi-sources__summary:focus-visible {
    outline: var(--rule) solid var(--focus);
    outline-offset: 2px;
}

/* The "On this page" eyebrow: display face, uppercase, tracked. */
.zi-sources__label {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--ink);
}

.zi-sources__count {
    color: var(--ink-muted);
}

.zi-sources__note {
    color: var(--ink-muted);
}

.md-content .md-typeset details.zi-sources .footnote > ol {
    margin-block: var(--sp-3);
}

.md-content .md-typeset details.zi-sources > :last-child {
    margin-bottom: var(--sp-2);
}

/* Inside the panel the list takes the panel's small muted text. */
.md-typeset .footnote {
    color: inherit;
    font-size: inherit;
}

.md-typeset .footnote > hr {
    display: none;
}

.md-typeset .footnote > ol > li {
    border-radius: var(--radius-sm);
}

.md-typeset .footnote > ol > li:target {
    color: inherit;
    animation: zi-cite-flash 2s var(--ease) both;
}

@keyframes zi-cite-flash {
    from {
        background-color: color-mix(in srgb, var(--accent-ink) 22%, transparent);
        box-shadow: 0 0 0 var(--sp-1) color-mix(in srgb, var(--accent-ink) 22%, transparent);
    }
    to {
        background-color: transparent;
        box-shadow: 0 0 0 var(--sp-1) transparent;
    }
}

/* Section 18 switches animations off under reduced motion, so the entry keeps a still tint instead. */
@media (prefers-reduced-motion: reduce) {
    .md-typeset .footnote > ol > li:target {
        background-color: color-mix(in srgb, var(--accent-ink) 12%, transparent);
        box-shadow: 0 0 0 var(--sp-1) color-mix(in srgb, var(--accent-ink) 12%, transparent);
    }
}

/* One shared tooltip, placed by zeekr.js. It never takes the pointer, so it cannot trap hover. */
.zi-cite-tip {
    position: fixed;
    z-index: 5;
    max-width: min(20rem, calc(100vw - 2 * var(--sp-4)));
    padding: var(--sp-2) var(--sp-3);
    border: var(--hairline) solid var(--panel-border);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--ink);
    font-size: var(--fs-sm);
    line-height: 1.4;
    pointer-events: none;
}

.zi-cite-tip[hidden] {
    display: none;
}

.zi-cite-tip small {
    display: block;
    margin-top: var(--sp-1);
    color: var(--ink-muted);
    font-size: var(--fs-xs);
}

/* 21. "Suggest an edit" (partials/zi-contribute.html): the card's "more"
   link style, under a hairline that closes the article. ---------------- */
.md-typeset .zi-contribute {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--sp-4);
    margin-top: var(--sp-7);
    padding-top: var(--sp-3);
    border-top: var(--hairline) solid var(--line);
}

.md-typeset .zi-contribute p {
    margin: 0;
    color: var(--ink-muted);
    font-size: var(--fs-sm);
}

/* 22. Glossary (the glossary() macro, javascripts/glossary.js). The filter,
   chips and copy buttons ship hidden and the script reveals them, so without
   JS the page is the plain list. On wide screens the search and the letters
   stick under the header; on phones nothing sticks, to leave room to read.
   Matches and the landed-on term use the wiki's ink and Silver Gray, never
   orange. ------------------------------------------------------------------ */
.md-typeset .zi-gloss {
    --zi-gloss-top: 0px;
    --zi-gloss-bar-h: 0px;
}

.md-typeset .zi-gloss-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: var(--sp-4) 0 0;
}

.md-typeset .zi-chip {
    min-height: var(--tap);
    padding: 0 var(--sp-4);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
    background: var(--panel);
    border: var(--hairline) solid var(--panel-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.md-typeset .zi-chip:hover {
    border-color: var(--ink);
}

.md-typeset .zi-chip[aria-pressed="true"] {
    color: var(--bg);
    background: var(--ink);
    border-color: var(--ink);
}

.md-typeset .zi-chip:focus-visible,
.md-typeset .zi-gloss-clear:focus-visible,
.md-typeset .zi-gloss-reset:focus-visible,
.md-typeset .zi-term__copy:focus-visible,
.md-typeset .zi-gloss-az a:focus-visible {
    outline: var(--rule) solid var(--focus);
    outline-offset: 2px;
}

.md-typeset .zi-gloss-bar {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-4);
    padding: var(--sp-3) 0 var(--sp-2);
    background: var(--bg);
    border-bottom: var(--hairline) solid var(--line);
}

@media screen and (min-width: 60em) {
    .md-typeset .zi-gloss-bar {
        position: sticky;
        top: var(--zi-gloss-top);
        z-index: 2;
    }
}

.md-typeset .zi-gloss-search__label {
    display: block;
    margin-bottom: var(--sp-1);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
}

/* Announced to screen readers only ("Link copied"). */
.md-typeset .zi-gloss-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.md-typeset .zi-gloss-search__field {
    position: relative;
    display: flex;
    align-items: center;
}

.md-typeset .zi-gloss-search__icon {
    position: absolute;
    left: var(--sp-3);
    width: 18px;
    height: 18px;
    color: var(--ink-muted);
    pointer-events: none;
}

.md-typeset .zi-gloss-search__input {
    width: 100%;
    min-height: 48px;
    padding: 0 104px 0 40px;
    font: inherit;
    font-size: var(--fs-md);
    color: var(--ink);
    background: var(--panel);
    border: var(--hairline) solid var(--panel-border);
    border-radius: var(--radius-sm);
}

.md-typeset .zi-gloss-search__input:placeholder-shown {
    padding-right: var(--sp-3);
}

.md-typeset .zi-gloss-search__input::placeholder {
    color: var(--ink-muted);
}

.md-typeset .zi-gloss-search__input:focus-visible {
    outline: var(--rule) solid var(--focus);
    outline-offset: 0;
}

.md-typeset .zi-gloss-search__input::-webkit-search-cancel-button {
    display: none;
}

.md-typeset .zi-gloss-clear {
    position: absolute;
    right: 2px;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: var(--tap);
    padding: 0 var(--sp-3);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.md-typeset .zi-gloss-clear[hidden] {
    display: none;
}

.md-typeset .zi-gloss-clear__icon {
    width: 16px;
    height: 16px;
}

.md-typeset .zi-gloss-az-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-1) var(--sp-3);
}

.md-typeset .zi-gloss-az {
    display: flex;
    flex-wrap: wrap;
}

.md-typeset .zi-gloss-az a,
.md-typeset .zi-gloss-az span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 36px;
    padding: 0 2px;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
}

.md-typeset .zi-gloss-az a {
    color: var(--ink);
}

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

/* No terms under it: greyed and inert, never coloured alone (it is also unlinked or aria-disabled). */
.md-typeset .zi-gloss-az .is-empty {
    color: var(--ink-faint);
    opacity: 0.55;
    pointer-events: none;
}

.md-typeset .zi-gloss-count {
    margin: 0;
    color: var(--ink-muted);
    font-size: var(--fs-sm);
}

.md-typeset .zi-gloss-empty {
    padding: var(--sp-5) 0;
    color: var(--ink-muted);
}

.md-typeset .zi-gloss-reset {
    min-height: var(--tap);
    padding: 0 var(--sp-2);
    font: inherit;
    font-weight: 600;
    color: var(--ink);
    text-decoration: underline;
    background: none;
    border: 0;
    cursor: pointer;
}

.md-typeset .zi-gloss-letter {
    margin: var(--sp-6) 0 0;
    padding-bottom: var(--sp-1);
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    border-bottom: var(--rule) solid var(--ink);
    scroll-margin-top: calc(var(--zi-gloss-top) + var(--zi-gloss-bar-h) + var(--sp-3));
}

.md-typeset .zi-term {
    padding: var(--sp-4) var(--sp-3);
    margin: 0 calc(-1 * var(--sp-3));
    border-bottom: var(--hairline) solid var(--line);
}

.md-typeset .zi-term h2 {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-1);
    font-size: var(--fs-lg);
    scroll-margin-top: calc(var(--zi-gloss-top) + var(--zi-gloss-bar-h) + var(--sp-5));
}

/* The copy button stands in for Material's permalink here. */
.md-typeset .zi-term h2 .headerlink {
    display: none;
}

.md-typeset .zi-term__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--ink-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms ease;
}

.md-typeset .zi-term:hover .zi-term__copy,
.md-typeset .zi-term__copy:focus-visible,
.md-typeset .zi-term__copy.is-copied,
.md-typeset .zi-term.is-target .zi-term__copy {
    opacity: 1;
}

/* No hover on touch screens, so the button always shows there. */
@media (hover: none) {
    .md-typeset .zi-term__copy {
        opacity: 1;
    }
}

.md-typeset .zi-term__copy:hover,
.md-typeset .zi-term__copy.is-copied {
    color: var(--ink);
}

.md-typeset .zi-term__copy-icon {
    width: 16px;
    height: 16px;
}

.md-typeset .zi-term p {
    margin: 0 0 var(--sp-2);
}

.md-typeset .zi-term .zi-term__meta {
    color: var(--ink-muted);
    font-size: var(--fs-sm);
}

.md-typeset .zi-term__cat {
    display: inline-block;
    margin-right: var(--sp-1);
    padding: 0 var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
    border: var(--hairline) solid var(--line-strong);
    border-radius: var(--radius-sm);
}

.md-typeset .zi-term .zi-term__see {
    margin: 0;
    font-size: var(--fs-sm);
}

.md-typeset .zi-term mark {
    color: inherit;
    background: color-mix(in srgb, var(--hue-gold-solid) 40%, transparent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

/* While a query is in, the terms show as one ranked list (glossary.js sets each
   term's order): the letter groups step aside and the letters go quiet. */
.md-typeset .zi-gloss.is-ranked {
    display: flex;
    flex-direction: column;
}

.md-typeset .zi-gloss.is-ranked > .zi-gloss-chips {
    order: -3;
}

.md-typeset .zi-gloss.is-ranked > .zi-gloss-bar {
    order: -2;
}

.md-typeset .zi-gloss.is-ranked > .zi-gloss-empty {
    order: -1;
}

.md-typeset .zi-gloss.is-ranked .zi-gloss-group {
    display: contents;
}

.md-typeset .zi-gloss.is-ranked .zi-gloss-letter {
    display: none;
}

/* The term a #link landed on: a Silver Gray edge and a light tint. */
.md-typeset .zi-term.is-target {
    background: color-mix(in srgb, var(--hue-slate-solid) var(--hue-tint), transparent);
    box-shadow: inset 3px 0 0 var(--hue-slate-solid);
}

/* Hidden text that names an icon-only control for screen readers. */
.zi-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* The drawer's real button (zeekr.js), shown where Material shows the menu label. */
.zi-drawer-button {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
}

@media screen and (min-width: 76.25em) {
    .md-header .zi-drawer-button {
        display: none;
    }
}

/* 23. Handover checklist (the handover_checklist() macro, javascripts/handover.js).
   Phone first: whole rows are 44px+ tap targets, sections fold, and each
   phase's progress bar sticks under the header while you are in that phase.
   The tools and progress ship hidden until the script runs; print shows the
   plain list with its boxes. ---------------------------------------------- */
.md-typeset .zi-hc {
    --zi-hc-top: 0px;
}

.md-typeset .zi-hc-tools {
    display: grid;
    gap: var(--sp-3);
    margin: var(--sp-5) 0;
    padding: var(--sp-4);
    background: var(--panel);
    border: var(--hairline) solid var(--panel-border);
    border-radius: var(--radius-md);
}

.md-typeset .zi-hc-tools[hidden],
.md-typeset .zi-hc-progress[hidden] {
    display: none;
}

.md-typeset .zi-hc-models {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

.md-typeset .zi-hc-tools__label {
    flex-basis: 100%;
    font-size: var(--fs-sm);
    font-weight: 600;
}

.md-typeset .zi-hc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.md-typeset .zi-hc-button {
    min-height: var(--tap);
    padding: 0 var(--sp-4);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
    background: var(--bg);
    border: var(--hairline) solid var(--panel-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.md-typeset .zi-hc-button:hover {
    border-color: var(--ink);
}

.md-typeset .zi-hc-button:focus-visible {
    outline: var(--rule) solid var(--focus);
    outline-offset: 2px;
}

.md-typeset .zi-hc-status {
    margin: 0;
    min-height: 1.2em;
    color: var(--ink-muted);
    font-size: var(--fs-sm);
}

.md-typeset .zi-hc-phase > h2 {
    margin-top: var(--sp-7);
}

.md-typeset .zi-hc-progress {
    position: sticky;
    top: var(--zi-hc-top);
    z-index: 2;
    margin: 0 0 var(--sp-3);
    padding: var(--sp-2) 0;
    background: var(--bg);
    border-bottom: var(--hairline) solid var(--line);
}

.md-typeset .zi-hc-progress__text {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.md-typeset .zi-hc-progress__overall {
    color: var(--ink-muted);
    font-weight: 400;
}

.md-typeset .zi-hc-progress__track {
    height: 6px;
    margin-top: var(--sp-1);
    background: var(--line);
}

/* Reading progress is one of orange's jobs. */
.md-typeset .zi-hc-progress__track i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--zeekr-orange);
    transition: width 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .md-typeset .zi-hc-progress__track i {
        transition: none;
    }
}

.md-content .md-typeset details.zi-hc-section {
    margin: 0 0 var(--sp-3);
    padding: 0;
    font-size: inherit;
    background: var(--panel);
    border: var(--hairline) solid var(--panel-border);
    border-radius: var(--radius-md);
    box-shadow: none;
    overflow: visible;
}

/* Not an admonition: drop Material's details icon and tint. */
.md-content .md-typeset details.zi-hc-section > summary.zi-hc-section__summary::before {
    display: none;
}

.md-content .md-typeset details.zi-hc-section > summary.zi-hc-section__summary {
    background: none;
    border: 0;
    border-radius: var(--radius-md);
}

.md-content .md-typeset details.zi-hc-section > summary.zi-hc-section__summary {
    position: relative;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: 52px;
    padding: var(--sp-2) 48px var(--sp-2) var(--sp-4);
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.md-content .md-typeset details.zi-hc-section > summary.zi-hc-section__summary::-webkit-details-marker {
    display: none;
}

.md-content .md-typeset details.zi-hc-section > summary.zi-hc-section__summary:focus-visible {
    outline: var(--rule) solid var(--focus);
    outline-offset: -2px;
}

.md-typeset .zi-hc-section__title {
    flex: 1;
}

.md-typeset .zi-hc-section__count {
    color: var(--ink-muted);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 400;
    white-space: nowrap;
}

/* A finished section says so in words as well as weight. */
.md-content .md-typeset details.zi-hc-section.is-done .zi-hc-section__count::before {
    content: "Done: ";
    color: var(--ink);
    font-weight: 600;
}

.md-typeset .zi-hc-item {
    padding: 0 var(--sp-4) var(--sp-2);
    border-top: var(--hairline) solid var(--line);
}

.md-typeset .zi-hc-check {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    min-height: var(--tap);
    padding-top: var(--sp-3);
    cursor: pointer;
}

.md-typeset .zi-hc-check input {
    flex: none;
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--ink);
    cursor: pointer;
}

.md-typeset .zi-hc-check input:focus-visible {
    outline: var(--rule) solid var(--focus);
    outline-offset: 2px;
}

.md-typeset .zi-hc-check input:checked + .zi-hc-text {
    color: var(--ink-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.md-typeset .zi-hc-tag {
    display: inline-block;
    margin-right: var(--sp-2);
    padding: 0 var(--sp-1);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 1px;
    border: var(--hairline) solid var(--line-strong);
    border-radius: var(--radius-sm);
}

.md-typeset .zi-hc-hint {
    margin: var(--sp-1) 0 var(--sp-1) 36px;
    color: var(--ink-muted);
    font-size: var(--fs-sm);
}

@media print {
    .md-typeset .zi-hc-tools,
    .md-typeset .zi-hc-progress,
    .md-typeset .zi-video,
    .md-content .md-typeset details.zi-hc-section > summary.zi-hc-section__summary::after,
    .zi-contribute {
        display: none !important;
    }

    .md-content .md-typeset details.zi-hc-section {
        border: 0;
        break-inside: auto;
    }

    .md-content .md-typeset details.zi-hc-section > summary.zi-hc-section__summary {
        min-height: 0;
        padding: var(--sp-3) 0 var(--sp-1);
    }

    .md-typeset .zi-hc-item {
        padding: 0;
        border: 0;
        break-inside: avoid;
    }

    .md-typeset .zi-hc-check {
        min-height: 0;
        padding-top: var(--sp-1);
    }

    .md-typeset .zi-hc-check input {
        width: 14px;
        height: 14px;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .md-typeset .zi-hc-hint {
        margin-left: 26px;
    }
}