/* =========================================================================
   Skins — one visual language per era
   -------------------------------------------------------------------------
   Loaded after app.css (and after any page stylesheet) on the public site.
   A skin is switched on by `data-skin` on <html>; with no attribute the page
   is the standard Modern design and nothing in here applies except the
   picker and the cross-fade.

   How a skin is built, cheapest first:

     1. It re-points app.css's own tokens — ground, surfaces, text, lines,
        accent, radii, shadows. That alone restyles every component on the
        site, because every component is built from them.
     2. It sets a handful of --skin-* tokens that the generic layer below
        maps onto the page chrome: fonts, the page ground, the header, card
        and button fills. Gradients and textures live here, because a colour
        token cannot carry one.
     3. Only then does it add its own flourishes — title bars, bevels, gloss,
        LEDs — for the handful of components where the era is in the shape
        rather than the colour.

   Two rules held throughout, both inherited from app.css:

     - Text never gets `opacity`. Every muted colour is a solid token checked
       against the surfaces it lands on.
     - Only transform and opacity animate. Under prefers-reduced-motion
       app.css already stops every animation and transition; nothing here
       relies on motion to be readable.

   Token blocks are written `:is([data-skin=x], [data-skin=x] body.vip)` so a
   VIP page with a skin (a gated garage set to Aero) gets the skin's tokens on
   <body> too — vip.css re-points them there, and this file loads after it.
   ========================================================================= */

/* ---------- The picker ---------------------------------------------------- */

.appearance { position: relative; }

.appearance__button svg { width: 18px; height: 18px; }
.appearance__button[aria-expanded="true"] { color: var(--accent-text); border-color: var(--accent-line); }

.appearance__panel {
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-2));
    z-index: 120;
    width: min(380px, calc(100vw - 2rem));
    max-height: min(78vh, 640px);
    overflow-y: auto;
    padding: var(--space-4);
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-sans);
    animation: slide-down var(--normal) var(--ease-out);
}

.appearance__group { border: 0; padding: 0; margin: 0; min-width: 0; }
.appearance__group + .appearance__group {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}
.appearance__group[disabled] .appearance__modes { opacity: 0.55; }

/* Floated, so a fieldset's legend sits inside it rather than on its border. */
.appearance__title {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.appearance__skins {
    clear: both;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.appearance__skin {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.appearance__skin:hover { background: var(--surface-hover); }
.appearance__skin input { position: absolute; opacity: 0; pointer-events: none; }
.appearance__skin:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.appearance__skin:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Three stripes of the skin's own colours: a thumbnail of the look, drawn
   from the registry rather than screenshots that would go stale. */
.appearance__swatch {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: conic-gradient(var(--swatch-1) 0 50%, var(--swatch-2) 0 80%, var(--swatch-3) 0);
}

.appearance__name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.25;
}
.appearance__name small {
    font-size: 0.6875rem;
    font-weight: 450;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appearance__modes { clear: both; display: flex; gap: var(--space-1); }
.appearance__mode { flex: 1; cursor: pointer; }
.appearance__mode input { position: absolute; opacity: 0; pointer-events: none; }
.appearance__mode span {
    display: block;
    padding: var(--space-2);
    text-align: center;
    font-size: var(--text-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.appearance__mode input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.appearance__mode input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.appearance__prefs { display: grid; gap: var(--space-3); }
.appearance__prefs .switch__text { font-size: var(--text-sm); }

@media (max-width: 520px) {
    .appearance__panel { position: fixed; left: 1rem; right: 1rem; top: calc(var(--header-height) + 0.5rem); width: auto; }
}

/* ---------- Moving between skins ------------------------------------------ */

/* One cross-fade of the whole page — text and backgrounds together, on the
   GPU — via the View Transitions API (appearance.js). Long enough to read as
   a dissolve between eras, short enough not to blur a page being scrolled. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.55s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
}

/* ---------- The generic layer --------------------------------------------- */

/* Defaults every skin starts from; each overrides what it needs. */
[data-skin] {
    --skin-font: var(--font-sans);
    --skin-heading-font: var(--skin-font);
    --skin-heading-weight: 650;
    --skin-heading-transform: none;
    --skin-heading-spacing: -0.02em;
    --skin-page: var(--bg);
    --skin-backdrop: none;
    --skin-header: var(--bg-elevated);
    --skin-header-ink: var(--text);
    --skin-header-border: 1px solid var(--border);
    --skin-header-shadow: none;
    --skin-footer: var(--surface-sunken);
    --skin-card: var(--surface);
    --skin-card-border: 1px solid var(--border);
    --skin-card-shadow: none;
    --skin-btn: var(--surface);
    --skin-btn-ink: var(--text);
    --skin-btn-border: 1px solid var(--border-strong);
    --skin-btn-shadow: none;
    --skin-primary: var(--accent-fill);
    --skin-primary-ink: var(--accent-ink);
    --skin-field: var(--bg-elevated);
    /* For a header darker than the page under it: the nav links and the
       header's own buttons read from these instead of the page's text. */
    --skin-nav-ink: var(--text-muted);
    --skin-nav-panel: var(--bg-elevated);
}

/* The page ground stays a flat colour; textures and gradients go on the fixed
   backdrop layer (app.css's body::before), so a sky is a sky the height of
   the window rather than stretched down a ten-thousand-pixel page, and
   scrolling never repaints it. */
[data-skin] body {
    font-family: var(--skin-font);
    background: var(--skin-page);
}

[data-skin] body::before {
    content: "";
    background: var(--skin-backdrop);
    opacity: 1;
}

/* The generic layer uses :where() throughout, so it weighs no more than a
   single attribute: any skin's own rule, however plain, overrides it. */
[data-skin] :where(h1, h2, h3, h4, .hero__title) {
    font-family: var(--skin-heading-font);
    font-weight: var(--skin-heading-weight);
    text-transform: var(--skin-heading-transform);
    letter-spacing: var(--skin-heading-spacing);
}

/* A decade is "1950s" in every era; an uppercase skin would make it 1950S. */
[data-skin] .tl-decade__title { text-transform: none; }

[data-skin] :where(.site-header, .vip-header) {
    background: var(--skin-header);
    color: var(--skin-header-ink);
    border-bottom: var(--skin-header-border);
    box-shadow: var(--skin-header-shadow);
}
[data-skin] .vip-header::after { content: none; }

/* The members' area writes in its own ink, made for true black. A page in
   there wearing a skin (a gated garage set to Aero) writes in the skin's. */
[data-skin] body.vip {
    --vip-ink: var(--text);
    --vip-ink-dim: var(--text-muted);
    --vip-line: var(--border);
    color: var(--text);
}
[data-skin] .vip-header { color: var(--skin-header-ink); }
[data-skin] .vip-brand__name { color: var(--skin-header-ink); }

[data-skin] :where(.site-nav__link, .vip-nav__link):not(:hover, [aria-current="page"], .is-current),
[data-skin] :where(.site-header .btn--ghost):not(:hover) { color: var(--skin-nav-ink); }

@media (max-width: 820px) {
    [data-skin] .site-nav { background: var(--skin-nav-panel); border-color: var(--border); }
}

[data-skin] :where(.site-footer, .vip-footer) { background: var(--skin-footer); }

[data-skin] :where(.card, .panel, .filter-bar, .table-wrap, .marque-hero, .launch-panel,
                   .directory-controls, .manage-row, .trim-rail__item, .tl-card,
                   .block--hero, .block-stat, .block--code, .tl-decade__head) {
    background: var(--skin-card);
    border: var(--skin-card-border);
    box-shadow: var(--skin-card-shadow);
}

[data-skin] :where(.btn:not(.btn--ghost, .btn--primary, .btn--danger, .btn--vip)) {
    background: var(--skin-btn);
    color: var(--skin-btn-ink);
    border: var(--skin-btn-border);
    box-shadow: var(--skin-btn-shadow);
}

[data-skin] :where(.btn--primary) {
    background: var(--skin-primary);
    color: var(--skin-primary-ink);
}

[data-skin] :where(.input, .select, .textarea) { background-color: var(--skin-field); }

/* The hover line across the top of a tool card is the Modern skin's own
   flourish; period skins have theirs. */
[data-skin] .tool-card::after { content: none; }

/* =========================================================================
   Old paper — 1940s and earlier
   Typewriter ink on foxed paper. Index cards, rubber stamps, a newspaper
   masthead, and photographs in sepia until you look closer.
   ========================================================================= */

:is([data-skin="paper"], [data-skin="paper"] body.vip) {
    --bg: #ece0c3;
    --bg-elevated: #f5ecd6;
    --surface: #f7f0dc;
    --surface-hover: #efe4c8;
    --surface-sunken: #e4d6b5;
    --overlay: rgb(47 37 25 / 0.82);
    --text: #2b2117;
    --text-muted: #4e3f2d;
    --text-dim: #5f4e39;
    --border: #cbb78e;
    --border-strong: #a8916a;

    --accent-h: 8; --accent-s: 66%; --accent-l: 36%;
    --accent: #9b2c1f;
    --accent-strong: #7d2016;
    --accent-text: #8a2618;
    --accent-soft: rgb(155 44 31 / 0.1);
    --accent-line: rgb(155 44 31 / 0.4);
    --accent-glow: rgb(155 44 31 / 0.12);
    --accent-fill: #9b2c1f;
    --accent-fill-strong: #7d2016;
    --accent-ink: #fbf3e0;

    --ok-text: #2f5a2a; --warn-text: #7a4d06; --danger-text: #8a2618; --info-text: #23466e; --neutral-text: #4e3f2d;
    --ok-soft: rgb(47 90 42 / 0.12); --warn-soft: rgb(160 110 20 / 0.14); --danger-soft: rgb(155 44 31 / 0.1);
    --info-soft: rgb(35 70 110 / 0.1); --neutral-soft: rgb(78 63 45 / 0.1);

    --radius-sm: 2px; --radius: 2px; --radius-md: 3px; --radius-lg: 4px; --radius-xl: 4px;
    --shadow-sm: 0 1px 1px rgb(60 40 15 / 0.18);
    --shadow: 0 2px 6px rgb(60 40 15 / 0.18);
    --shadow-md: 0 6px 14px -4px rgb(60 40 15 / 0.28);
    --shadow-lg: 0 14px 30px -10px rgb(60 40 15 / 0.35);

    --font-mono: "American Typewriter", "Courier Prime", "Courier New", Courier, monospace;
    --skin-font: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
    --skin-heading-font: "Bodoni 72", Didot, "Bodoni MT", "Didot LT STD", Georgia, serif;
    --skin-heading-weight: 700;
    --skin-heading-spacing: 0;
    --skin-page: #ece0c3;
    /* Fibre grain from an SVG noise filter, under a vignette that browns the
       edges the way old paper goes. */
    --skin-backdrop:
        radial-gradient(ellipse at 50% 40%, transparent 55%, rgb(110 70 20 / 0.22) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --skin-header: #f2e8cf;
    --skin-header-border: 4px double #2b2117;
    --skin-footer: #e4d6b5;
    --skin-card: #f7f0dc;
    --skin-card-border: 1px solid #cbb78e;
    --skin-card-shadow: 0 1px 0 #fff8 inset, 0 3px 10px -4px rgb(60 40 15 / 0.35);
    --skin-btn: transparent;
    --skin-btn-ink: #2b2117;
    --skin-btn-border: 2px solid #2b2117;
    --skin-primary: #9b2c1f;
    --skin-primary-ink: #fbf3e0;
    --skin-field: #fbf6e8;
}

/* A masthead: the brand sits on a ruled band like a newspaper's. */
[data-skin="paper"] :is(.site-header, .vip-header) { backdrop-filter: none; }
[data-skin="paper"] .site-nav__link { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--text-sm); }
[data-skin="paper"] .site-nav__link[aria-current="page"] { background: none; text-decoration: underline 2px; text-underline-offset: 0.35em; }

[data-skin="paper"] h1 { font-style: italic; }
[data-skin="paper"] :is(.eyebrow, .chip, .badge-version, .model-card__years, .marque-card__facts dt, .stat__label, .label, .breadcrumb) {
    font-family: var(--font-mono);
    letter-spacing: 0.08em;
}

/* Index cards: a red rule across the top, blue ruling underneath, each
   pinned at a slightly different angle until you pick it up. */
[data-skin="paper"] :is(.card, .tl-card) {
    background:
        linear-gradient(#b8432f, #b8432f) 0 0 / 100% 2px no-repeat,
        repeating-linear-gradient(transparent 0 27px, rgb(35 70 110 / 0.09) 27px 28px),
        #f7f0dc;
    rotate: -0.35deg;
    transition: rotate var(--normal) var(--ease), transform var(--normal) var(--ease), box-shadow var(--normal) var(--ease);
}
[data-skin="paper"] :is(.card, .tl-card):nth-child(even) { rotate: 0.4deg; }
[data-skin="paper"] :is(.card, .tl-card):nth-child(3n) { rotate: -0.15deg; }
[data-skin="paper"] :is(.card, .tl-card):hover { rotate: 0deg; }

/* Photographs develop in sepia and come into colour when you look closer. */
[data-skin="paper"] :is(.vehicle-card__media, .marque-card__media, .model-card__media, .trim-card__media,
                        .vehicle-hero__media, .model-hero__media, .gallery__lead, .tl-card__media, .block-image) img {
    filter: sepia(0.7) contrast(1.08) brightness(0.96);
    transition: filter var(--slow) var(--ease);
}
[data-skin="paper"] :is(.card, .tl-card, .block-image):hover img { filter: none; }

/* Status chips are rubber stamps. */
[data-skin="paper"] .chip {
    background: transparent;
    border: 2px solid currentColor;
    border-radius: 3px;
    text-transform: uppercase;
    rotate: -2deg;
}
[data-skin="paper"] .vehicle-card__status { background-color: #f7f0dc; backdrop-filter: none; }
[data-skin="paper"] .vehicle-card__status.chip--ok,
[data-skin="paper"] .vehicle-card__status.chip--green { color: #2f5a2a; }
[data-skin="paper"] .vehicle-card__status.chip--danger,
[data-skin="paper"] .vehicle-card__status.chip--red { color: #8a2618; }
[data-skin="paper"] .vehicle-card__status.chip--warn,
[data-skin="paper"] .vehicle-card__status.chip--amber { color: #7a4d06; }
[data-skin="paper"] .vehicle-card__status.chip--info,
[data-skin="paper"] .vehicle-card__status.chip--blue { color: #23466e; }
[data-skin="paper"] .vehicle-card__status:is(.chip--grey, .chip--violet, :not([class*="chip--"])) { color: #4e3f2d; }

[data-skin="paper"] .btn { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
[data-skin="paper"] .btn--primary { box-shadow: 2px 2px 0 #2b2117; }
[data-skin="paper"] .btn--primary:hover { background: #7d2016; color: #fbf3e0; }

[data-skin="paper"] .table thead th { background: #e9dcbc; font-family: var(--font-mono); color: #4e3f2d; }
[data-skin="paper"] .prose { color: var(--text); }
[data-skin="paper"] .hero__title em,
[data-skin="paper"] .hero--workbench .hero__title em { color: #8a2618; background: none; -webkit-text-fill-color: currentColor; }

/* Cards settle onto the desk rather than gliding up. */
@keyframes paper-settle {
    from { opacity: 0; transform: translateY(-10px) scale(1.02); }
    to   { opacity: 1; transform: none; }
}
[data-skin="paper"].reveal-ready .reveal.is-visible { animation-name: paper-settle; }

/* =========================================================================
   Googie — the 1950s Atomic Age
   Boomerang panels, starbursts, chrome trim, diner-sign script. Panels swing
   open from a hinge like a roadside sign, and the section marks orbit.
   ========================================================================= */

:is([data-skin="googie"], [data-skin="googie"] body.vip) {
    --bg: #fbf3df;
    --bg-elevated: #fffaf0;
    --surface: #fffaf0;
    --surface-hover: #fff3dc;
    --surface-sunken: #f3e6c6;
    --overlay: rgb(31 50 52 / 0.82);
    --text: #23292a;
    --text-muted: #3f4a4b;
    --text-dim: #4f5a5b;
    --border: #e3cfa3;
    --border-strong: #c7ad78;

    --accent-h: 13; --accent-s: 80%; --accent-l: 55%;
    --accent: #e8562f;
    --accent-strong: #c4431f;
    --accent-text: #b13a17;
    --accent-soft: rgb(232 86 47 / 0.12);
    --accent-line: rgb(232 86 47 / 0.45);
    --accent-glow: rgb(232 86 47 / 0.2);
    /* The display orange is too light under white text; fills use the burnt
       shade, which clears 5:1. */
    --accent-fill: #c4431f;
    --accent-fill-strong: #a93815;
    --accent-ink: #fffaf0;

    --teal: #1f6f73;
    --mustard: #f2b134;
    --turquoise: #3fb8af;

    --ok-text: #1b5e45; --warn-text: #7f4d00; --danger-text: #a3301a; --info-text: #165a5e; --neutral-text: #3f4a4b;

    --radius-sm: 999px; --radius: 14px; --radius-md: 22px; --radius-lg: 30px; --radius-xl: 36px;
    --shadow: 0 6px 16px -6px rgb(31 111 115 / 0.35);
    --shadow-md: 0 14px 30px -12px rgb(31 111 115 / 0.4);
    --shadow-lg: 0 24px 50px -18px rgb(31 111 115 / 0.45);

    --skin-font: Futura, "Futura PT", "Century Gothic", "Avenir Next", "Trebuchet MS", sans-serif;
    --skin-heading-font: Futura, "Futura PT", "Century Gothic", "Trebuchet MS", sans-serif;
    --skin-heading-weight: 800;
    --skin-heading-transform: uppercase;
    --skin-heading-spacing: 0.04em;
    --skin-page: #fbf3df;
    --skin-backdrop:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M58 38v34M41 55h34M46 43l24 24M70 43 46 67' stroke='%23e8562f' stroke-width='2.5' opacity='.45'/%3E%3Cpath d='M250 210v22M239 221h22' stroke='%231f6f73' stroke-width='2' opacity='.4'/%3E%3C/g%3E%3Cpath d='M210 70l7-22 7 22 22 7-22 7-7 22-7-22-22-7z' fill='%23f2b134' opacity='.45'/%3E%3Cpath d='M30 230q46-62 104-18-48-20-104 18z' fill='%233fb8af' opacity='.28'/%3E%3Cpath d='M180 290q40-40 92-10-44-12-92 10z' fill='%23e8562f' opacity='.18'/%3E%3Cg fill='%231f6f73' opacity='.3'%3E%3Ccircle cx='130' cy='120' r='3'/%3E%3Ccircle cx='290' cy='40' r='2.5'/%3E%3Ccircle cx='96' cy='300' r='2.5'/%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(900px 500px at 85% -10%, rgb(63 184 175 / 0.18), transparent 60%);
    --skin-header: #1f6f73;
    --skin-header-ink: #fffaf0;
    --skin-nav-ink: #e7f3f2;
    --skin-nav-panel: #1f6f73;
    --skin-header-border: 4px solid #f2b134;
    --skin-header-shadow: 0 6px 0 -2px #e8562f;
    --skin-footer: #f3e6c6;
    --skin-card: #fffaf0;
    --skin-card-border: 3px solid transparent;
    --skin-card-shadow: 0 10px 24px -12px rgb(31 111 115 / 0.45);
    --skin-btn: #fffaf0;
    --skin-btn-ink: #1f6f73;
    --skin-btn-border: 2px solid #1f6f73;
    --skin-primary: linear-gradient(180deg, #cf4a22, #b03a16);
    --skin-primary-ink: #fff;
    --skin-field: #fff;
}

/* The header is the diner's fascia: teal, with a mustard and an orange stripe. */
[data-skin="googie"] :is(.site-header, .vip-header) { backdrop-filter: none; }
[data-skin="googie"] :is(.site-nav__link, .vip-nav__link) { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
[data-skin="googie"] :is(.site-nav__link:hover, .site-nav__link[aria-current="page"]) { color: #23292a; background: #f2b134; }
[data-skin="googie"] .site-header .theme-toggle { background: #fffaf0; color: #1f6f73; border-color: #f2b134; }
[data-skin="googie"] .badge-version { background: #f2b134; color: #23292a; border-color: #f2b134; }

/* A sign in script, outlined and drop-shadowed like neon tubing on a fascia. */
[data-skin="googie"] h1 {
    font-family: "Brush Script MT", "Lucida Handwriting", "Segoe Script", cursive;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: calc(var(--text-3xl) * 1.25);
    color: #e8562f;
    text-shadow: 2px 2px 0 #fffaf0, 4px 4px 0 #1f6f73;
}

/* Boomerang panels in a chrome frame: the asymmetric corners are the kidney
   shape, the border is a polished strip of the bumper. */
[data-skin="googie"] :is(.card, .panel, .tl-card, .marque-hero) {
    border-radius: 34px 10px 34px 10px;
    background:
        linear-gradient(#fffaf0, #fffaf0) padding-box,
        linear-gradient(135deg, #ffffff, #9aa1a6 22%, #f4f6f7 45%, #7b8287 70%, #e9ecee) border-box;
}
[data-skin="googie"] :is(.card, .tl-card):nth-child(even) { border-radius: 10px 34px 10px 34px; }

/* Section marks orbit: a nucleus with an electron going round it. */
[data-skin="googie"] .eyebrow::before {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #1f6f73;
    background: radial-gradient(circle, #e8562f 0 2.5px, transparent 3px);
    animation: googie-orbit 3s linear infinite;
    box-shadow: 6px -6px 0 -4px #f2b134;
}
@keyframes googie-orbit { to { transform: rotate(360deg); } }
[data-skin="googie"] .eyebrow { color: #165a5e; }

[data-skin="googie"] .btn { border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; }
[data-skin="googie"] .btn--primary { box-shadow: 0 0 0 3px #fffaf0, 0 0 0 5px #9aa1a6, 0 8px 16px -6px rgb(232 86 47 / 0.6); }
[data-skin="googie"] .btn:hover { animation: googie-sway 0.6s var(--ease); }
@keyframes googie-sway {
    25% { transform: rotate(-3deg); }
    60% { transform: rotate(2deg); }
}

[data-skin="googie"] .chip { border-radius: 999px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
[data-skin="googie"] .filter-chip[aria-pressed="true"] { background: #1f6f73; color: #fffaf0; border-color: #1f6f73; }
[data-skin="googie"] .table thead th { background: #1f6f73; color: #fffaf0; }
[data-skin="googie"] .hero__title em,
[data-skin="googie"] .hero--workbench .hero__title em { color: #b13a17; }

/* Panels swing down off a top hinge, like a sign being hung. */
@keyframes googie-swing {
    from { opacity: 0; transform: perspective(700px) rotateX(-65deg); }
    60%  { opacity: 1; transform: perspective(700px) rotateX(8deg); }
    to   { opacity: 1; transform: none; }
}
[data-skin="googie"].reveal-ready .reveal { transform-origin: 50% 0; }
[data-skin="googie"].reveal-ready .reveal.is-visible { animation-name: googie-swing; animation-duration: 0.7s; }

/* =========================================================================
   Space Age — the 1960s
   White moulded plastic, capsule shapes and the control panel: big lit
   push-buttons, indicator lamps, things that slide into place on rails.
   ========================================================================= */

:is([data-skin="spaceage"], [data-skin="spaceage"] body.vip) {
    --bg: #ecebe6;
    --bg-elevated: #ffffff;
    --surface: #fbfbf8;
    --surface-hover: #f2f1ec;
    --surface-sunken: #e2e1db;
    --overlay: rgb(29 42 58 / 0.84);
    --text: #17212e;
    --text-muted: #36414f;
    --text-dim: #4a5562;
    --border: #d4d2c9;
    --border-strong: #b5b2a7;

    --accent-h: 16; --accent-s: 87%; --accent-l: 55%;
    --accent: #f05a28;
    --accent-strong: #d24514;
    /* #b13a0f measured 4.45:1 on its own soft tint; one shade darker clears it. */
    --accent-text: #9f3307;
    --accent-soft: rgb(240 90 40 / 0.12);
    --accent-line: rgb(240 90 40 / 0.45);
    --accent-glow: rgb(240 90 40 / 0.3);
    --accent-fill: #c8410f;
    --accent-fill-strong: #a83508;
    --accent-ink: #fff;

    --ok-text: #1d6b3a; --warn-text: #845200; --danger-text: #b3261e; --info-text: #1f4f8a; --neutral-text: #36414f;

    --radius-sm: 12px; --radius: 18px; --radius-md: 26px; --radius-lg: 36px; --radius-xl: 48px;
    --shadow-sm: 0 1px 2px rgb(23 33 46 / 0.12);
    --shadow: 0 6px 14px -6px rgb(23 33 46 / 0.22);
    --shadow-md: 0 14px 30px -14px rgb(23 33 46 / 0.3);
    --shadow-lg: 0 28px 60px -20px rgb(23 33 46 / 0.35);

    --skin-font: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --skin-heading-font: Eurostile, "Microgramma", "Bank Gothic", "Avenir Next", "Segoe UI", sans-serif;
    --skin-heading-weight: 700;
    --skin-heading-transform: uppercase;
    --skin-heading-spacing: 0.08em;
    --skin-page: #ecebe6;
    /* Panel seams and a faint radar sweep across the top of the console. */
    --skin-backdrop:
        radial-gradient(circle at 50% -40%, transparent 0 38%, rgb(23 33 46 / 0.05) 38.2% 38.6%, transparent 38.8% 48%, rgb(23 33 46 / 0.04) 48.2% 48.6%, transparent 48.8%),
        linear-gradient(90deg, transparent calc(50% - 1px), rgb(23 33 46 / 0.04) 0 calc(50% + 1px), transparent 0) 0 0 / 240px 240px,
        linear-gradient(180deg, #f6f5f1, #e6e5df);
    --skin-header: linear-gradient(180deg, #ffffff, #f0efea);
    --skin-header-border: 1px solid #d4d2c9;
    --skin-header-shadow: 0 6px 18px -10px rgb(23 33 46 / 0.35);
    --skin-footer: #1d2a3a;
    --skin-card: linear-gradient(180deg, #ffffff 0%, #f7f6f2 100%);
    --skin-card-border: 1px solid #dddbd2;
    /* Moulded: a highlight along the top lip and a soft drop under it. */
    --skin-card-shadow: inset 0 2px 0 #fff, inset 0 -3px 0 rgb(23 33 46 / 0.05), 0 14px 28px -16px rgb(23 33 46 / 0.4);
    --skin-btn: linear-gradient(180deg, #ffffff, #e9e8e2);
    --skin-btn-ink: #17212e;
    --skin-btn-border: 1px solid #c9c6bb;
    --skin-btn-shadow: inset 0 1px 0 #fff, 0 3px 0 #c9c6bb;
    --skin-primary: radial-gradient(120% 140% at 50% 0%, #db5a26, #c8410f 55%, #a33307);
    --skin-primary-ink: #fff;
    --skin-field: #fff;
}

[data-skin="spaceage"] .site-footer { color: #e9edf2; }
[data-skin="spaceage"] .site-footer :is(.site-footer__meta, .site-footer__links a) { color: #c3ccd6; }
[data-skin="spaceage"] .site-footer__links a:hover { color: #ffb08a; }

/* Illuminated push-buttons: they sit proud, light up when touched and go
   down a couple of millimetres when pressed. */
[data-skin="spaceage"] .btn { border-radius: 999px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
[data-skin="spaceage"] .btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #fff, 0 1px 0 #c9c6bb; }
[data-skin="spaceage"] .btn--primary { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 3px 0 #9c330c, 0 0 18px -2px rgb(240 90 40 / 0.55); text-shadow: 0 1px 0 rgb(0 0 0 / 0.25); }
[data-skin="spaceage"] .btn--primary:hover { background: radial-gradient(120% 140% at 50% 0%, #e2622c, #cf4712 55%, #ab3609); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 3px 0 #9c330c, 0 0 28px 0 rgb(240 90 40 / 0.7); }

/* Indicator lamps: the eyebrow carries one, lit, with a slow glow. */
[data-skin="spaceage"] .eyebrow::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff 0 15%, #ffcf3f 40%, #e09a00);
    box-shadow: 0 0 10px 2px rgb(255 190 40 / 0.65);
    animation: spaceage-lamp 2.4s ease-in-out infinite;
}
@keyframes spaceage-lamp { 50% { opacity: 0.55; } }

/* Capsules: pills for chips and the year rail, portholes for icons. */
[data-skin="spaceage"] :is(.chip, .filter-chip, .year-rail__item) { border-radius: 999px; text-transform: uppercase; letter-spacing: 0.08em; }
[data-skin="spaceage"] .filter-chip[aria-pressed="true"] { background: #17212e; color: #fff; border-color: #17212e; box-shadow: 0 0 0 3px rgb(240 90 40 / 0.35); }
[data-skin="spaceage"] .tool-card__icon { border-radius: 50%; box-shadow: inset 0 3px 6px rgb(23 33 46 / 0.2); }
[data-skin="spaceage"] .table thead th { background: #17212e; color: #e9edf2; }
[data-skin="spaceage"] .hero__title em,
[data-skin="spaceage"] .hero--workbench .hero__title em { color: #9f3307; }

/* Gauges: range sliders become a dial track with a lit pointer. */
[data-skin="spaceage"] .range::-webkit-slider-runnable-track { height: 8px; background: linear-gradient(90deg, #36c46b, #ffcf3f 60%, #f05a28); border: 0; }
[data-skin="spaceage"] .range::-moz-range-track { height: 8px; background: linear-gradient(90deg, #36c46b, #ffcf3f 60%, #f05a28); border: 0; }
[data-skin="spaceage"] .range::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -7px; background: radial-gradient(circle at 35% 30%, #fff, #e2e1db); border: 2px solid #17212e; }

/* Everything arrives on rails: a mechanical slide with a little overshoot. */
@keyframes spaceage-slide {
    from { opacity: 0; transform: translateX(-28px); }
    to   { opacity: 1; transform: none; }
}
[data-skin="spaceage"].reveal-ready .reveal.is-visible {
    animation-name: spaceage-slide;
    animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1.35);
}

/* =========================================================================
   Hi-Fi — the 1970s
   A stereo stack: dark brushed aluminium, walnut cheeks, engraved labels,
   amber LEDs, and VU meters where the sliders were.
   ========================================================================= */

:is([data-skin="hifi"], [data-skin="hifi"] body.vip) {
    --bg: #171512;
    --bg-elevated: #23211d;
    --surface: #2a2824;
    --surface-hover: #33302b;
    --surface-sunken: #12110f;
    --overlay: rgb(10 9 8 / 0.85);
    --text: #ece6d8;
    --text-muted: #c4bcab;
    --text-dim: #aca390;
    --border: #45413a;
    --border-strong: #5e584e;

    --accent-h: 41; --accent-s: 100%; --accent-l: 50%;
    --accent: #ffb000;
    --accent-strong: #e09a00;
    --accent-text: #ffbf33;
    --accent-soft: rgb(255 176 0 / 0.12);
    --accent-line: rgb(255 176 0 / 0.4);
    --accent-glow: rgb(255 176 0 / 0.25);
    --accent-fill: #ffb000;
    --accent-fill-strong: #ffc23d;
    --accent-ink: #1d1400;

    --ok-text: #8fdc6a; --warn-text: #ffbf33; --danger-text: #ff8a6b; --info-text: #8ec5ff; --neutral-text: #c4bcab;

    --radius-sm: 3px; --radius: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px;

    --walnut: repeating-linear-gradient(97deg, #5a371c 0 3px, #6b4426 3px 7px, #4c2e17 7px 9px, #613c20 9px 14px);
    --brushed: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 3px);

    --skin-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --skin-heading-font: "Avant Garde", "ITC Avant Garde Gothic", "Century Gothic", Futura, "Helvetica Neue", sans-serif;
    --skin-heading-weight: 600;
    --skin-heading-spacing: 0.01em;
    --skin-page: #171512;
    --skin-backdrop:
        radial-gradient(1200px 500px at 50% -15%, rgb(255 176 0 / 0.08), transparent 60%),
        linear-gradient(180deg, #1d1b18, #121110);
    --skin-header: var(--brushed), linear-gradient(180deg, #3a3732, #24221e);
    --skin-header-border: 1px solid #0b0a09;
    --skin-header-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 4px 0 -1px #4c2e17;
    --skin-footer: var(--walnut);
    --skin-card: var(--brushed), linear-gradient(180deg, #312e29, #25231f);
    --skin-card-border: 1px solid #0c0b0a;
    --skin-card-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 8px 18px -10px #000;
    /* Aluminium keys with a hard edge underneath. */
    --skin-btn: var(--brushed), linear-gradient(180deg, #d8d4cb, #a9a499);
    --skin-btn-ink: #1a1815;
    --skin-btn-border: 1px solid #0c0b0a;
    --skin-btn-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0 3px 0 #0c0b0a;
    --skin-primary: linear-gradient(180deg, #ffc23d, #ff9f00);
    --skin-primary-ink: #1d1400;
    --skin-field: #12110f;
}

[data-skin="hifi"] .site-footer { color: #f3e7d4; border-top: 1px solid #0c0b0a; }
[data-skin="hifi"] .site-footer :is(.site-footer__meta, .site-footer__links a) { color: #ecd9bd; }

/* Engraved faceplate labels. */
[data-skin="hifi"] :is(.eyebrow, .label, .marque-card__facts dt, .spec-list dt, .stat__label, .readout__label, .table thead th, .trim-card__label) {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.6875rem;
    text-shadow: 0 -1px 0 #000;
}

/* Stereo components: walnut cheeks either side of the aluminium. */
[data-skin="hifi"] :is(.card, .panel, .tl-card, .marque-hero) {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    background:
        var(--brushed) padding-box,
        linear-gradient(180deg, #312e29, #25231f) padding-box,
        var(--walnut) border-box;
}

/* An amber LED in front of each section, lit. */
[data-skin="hifi"] .eyebrow { color: #ffbf33; }
[data-skin="hifi"] .eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffb000;
    box-shadow: 0 0 8px 2px rgb(255 176 0 / 0.7), inset 0 -1px 1px rgb(0 0 0 / 0.3);
}
[data-skin="hifi"] :is(h1, .readout__value, .stat__value, .range-value, .model-card__years) {
    text-shadow: 0 0 12px rgb(255 176 0 / 0.25);
}
[data-skin="hifi"] :is(.readout__value, .stat__value, .range-value) { color: #ffbf33; font-family: var(--font-mono); }

/* Keys go down when pressed. */
[data-skin="hifi"] .btn { text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--text-sm); }
[data-skin="hifi"] .btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 1px 0 #0c0b0a; }
[data-skin="hifi"] .btn--primary { box-shadow: 0 3px 0 #7a5200, 0 0 16px rgb(255 176 0 / 0.35); }
[data-skin="hifi"] .btn--primary:hover { background: linear-gradient(180deg, #ffd06a, #ffb000); color: #1d1400; }
[data-skin="hifi"] .filter-chip[aria-pressed="true"] { background: rgb(255 176 0 / 0.14); color: #ffbf33; border-color: #ffb000; box-shadow: 0 0 10px rgb(255 176 0 / 0.3); }

/* Sliders are VU meters: a segmented LED bar, green to amber to red. */
[data-skin="hifi"] .range::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 2px;
    border: 1px solid #000;
    background:
        repeating-linear-gradient(90deg, transparent 0 6px, #12110f 6px 8px),
        linear-gradient(90deg, #5fd35f 0 60%, #ffb000 60% 82%, #ff4d2e 82%);
}
[data-skin="hifi"] .range::-moz-range-track {
    height: 10px;
    border-radius: 2px;
    border: 1px solid #000;
    background:
        repeating-linear-gradient(90deg, transparent 0 6px, #12110f 6px 8px),
        linear-gradient(90deg, #5fd35f 0 60%, #ffb000 60% 82%, #ff4d2e 82%);
}
[data-skin="hifi"] .range::-webkit-slider-thumb {
    width: 14px; height: 24px; margin-top: -8px; border-radius: 3px;
    background: linear-gradient(90deg, #8b867c, #e8e4dc 45%, #8b867c);
    border: 1px solid #000;
}

/* Section heads carry a little VU meter whose needle-bars dance. */
[data-skin="hifi"] .section-head { position: relative; }
[data-skin="hifi"] .section-head::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    width: 46px;
    height: 14px;
    background: repeating-linear-gradient(90deg, #ffb000 0 4px, transparent 4px 7px);
    transform-origin: 0 100%;
    animation: hifi-vu 1.1s steps(4, end) infinite alternate;
}
@keyframes hifi-vu {
    0%   { transform: scaleX(0.35); }
    40%  { transform: scaleX(0.8); }
    100% { transform: scaleX(0.55); }
}

[data-skin="hifi"] .table thead th { background: #12110f; color: #c4bcab; }
[data-skin="hifi"] .hero__title em,
[data-skin="hifi"] .hero--workbench .hero__title em { color: #ffbf33; }
[data-skin="hifi"] img:not(.brand__logo) { filter: saturate(0.9) sepia(0.12); }

/* =========================================================================
   Memphis CRT — the 1980s
   Phosphor text on a black grid, Memphis squiggles and offset blocks of
   neon, scanlines over everything — and the year read off an F-91W's LCD.
   Windows snap into place, headings type themselves, and the glow blooms
   when you touch something.
   ========================================================================= */

:is([data-skin="crt"], [data-skin="crt"] body.vip) {
    --bg: #05060a;
    --bg-elevated: #0b0d14;
    --surface: #090b11;
    --surface-hover: #10131c;
    --surface-sunken: #030407;
    --overlay: rgb(0 0 0 / 0.85);
    --text: #d9ffe8;
    --text-muted: #9ee8bd;
    --text-dim: #86d3a6;
    --border: #1d4a33;
    --border-strong: #2f7a53;

    --accent-h: 140; --accent-s: 100%; --accent-l: 61%;
    --accent: #39ff88;
    --accent-strong: #1fe070;
    --accent-text: #39ff88;
    --accent-soft: rgb(57 255 136 / 0.1);
    --accent-line: rgb(57 255 136 / 0.45);
    --accent-glow: rgb(57 255 136 / 0.3);
    --accent-fill: #39ff88;
    --accent-fill-strong: #7dffb0;
    --accent-ink: #001a0a;

    --memphis-pink: #ff3fa4;
    --memphis-cyan: #22d3ee;
    --memphis-yellow: #ffe14d;

    --ok-text: #39ff88; --warn-text: #ffe14d; --danger-text: #ff6b9d; --info-text: #5ce1ff; --neutral-text: #9ee8bd;

    --radius-sm: 0; --radius: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0;
    --font-mono: "Lucida Console", "Courier New", ui-monospace, monospace;

    --skin-font: "Lucida Console", Monaco, "Courier New", ui-monospace, monospace;
    --skin-heading-font: "Lucida Console", Monaco, "Courier New", ui-monospace, monospace;
    --skin-heading-weight: 700;
    --skin-heading-transform: uppercase;
    --skin-heading-spacing: 0.04em;
    --skin-page: #05060a;
    /* A neon floor grid receding into the dark, Memphis confetti on top. */
    --skin-backdrop:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='none' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 60q15-18 30 0t30 0 30 0' stroke='%23ff3fa4' opacity='.35'/%3E%3Cpath d='M250 40l26 44h-52z' stroke='%2322d3ee' opacity='.32'/%3E%3Cpath d='M280 250q15-18 30 0t30 0' stroke='%23ffe14d' opacity='.28'/%3E%3Ccircle cx='90' cy='270' r='18' stroke='%2322d3ee' opacity='.25'/%3E%3C/g%3E%3Cg fill='%23ff3fa4' opacity='.3'%3E%3Crect x='170' y='160' width='14' height='14' transform='rotate(20 177 167)'/%3E%3Ccircle cx='330' cy='150' r='4'/%3E%3Ccircle cx='40' cy='180' r='3'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(180deg, transparent 55%, rgb(255 63 164 / 0.1)),
        repeating-linear-gradient(90deg, rgb(34 211 238 / 0.07) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(0deg, rgb(255 63 164 / 0.06) 0 1px, transparent 1px 48px),
        #05060a;
    --skin-header: #05060a;
    --skin-header-border: 2px solid #39ff88;
    --skin-header-shadow: 0 0 18px rgb(57 255 136 / 0.35);
    --skin-footer: #030407;
    --skin-card: #07090e;
    --skin-card-border: 1px solid #2f7a53;
    /* The Memphis offset block, in a different colour per card. */
    --skin-card-shadow: 6px 6px 0 var(--memphis-pink), 0 0 16px rgb(57 255 136 / 0.12);
    --skin-btn: #05060a;
    --skin-btn-ink: #39ff88;
    --skin-btn-border: 2px solid #39ff88;
    --skin-btn-shadow: 4px 4px 0 var(--memphis-cyan);
    --skin-primary: #ff3fa4;
    --skin-primary-ink: #05060a;
    --skin-field: #030407;
}

/* Scanlines and a little vignette, over the whole tube. */
[data-skin="crt"] body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 400;
    pointer-events: none;
    background:
        repeating-linear-gradient(180deg, rgb(0 0 0 / 0.22) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at center, transparent 62%, rgb(0 0 0 / 0.45) 100%);
}

[data-skin="crt"] :is(h1, h2, h3) { color: #39ff88; text-shadow: 0 0 6px rgb(57 255 136 / 0.7), 0 0 18px rgb(57 255 136 / 0.35); }
[data-skin="crt"] .eyebrow { color: var(--memphis-yellow); }
[data-skin="crt"] .eyebrow::before { content: ">"; color: var(--memphis-pink); }

/* The page heading types itself out, with the cursor left blinking. */
[data-skin="crt"] main h1:first-of-type { animation: crt-type 1.4s steps(28, end) both; }
[data-skin="crt"] main h1:first-of-type::after {
    content: "█";
    margin-left: 0.15em;
    color: #39ff88;
    animation: crt-blink 1s steps(1) infinite;
}
@keyframes crt-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes crt-blink { 50% { opacity: 0; } }

[data-skin="crt"] :is(.card, .tl-card):nth-child(3n + 2) { --skin-card-shadow: 6px 6px 0 var(--memphis-cyan), 0 0 16px rgb(57 255 136 / 0.12); }
[data-skin="crt"] :is(.card, .tl-card):nth-child(3n) { --skin-card-shadow: 6px 6px 0 var(--memphis-yellow), 0 0 16px rgb(57 255 136 / 0.12); }
[data-skin="crt"] :is(.card, .tl-card) { box-shadow: var(--skin-card-shadow); }

/* Bloom: touching something makes the phosphor flare. */
[data-skin="crt"] :is(.card, .tl-card):hover {
    border-color: #39ff88;
    box-shadow: 6px 6px 0 var(--memphis-pink), 0 0 26px rgb(57 255 136 / 0.45), inset 0 0 18px rgb(57 255 136 / 0.12);
}
[data-skin="crt"] .card--interactive:hover { transform: translate(-2px, -2px); }
[data-skin="crt"] img:not(.brand__logo) { filter: saturate(1.25) contrast(1.1); }

[data-skin="crt"] .btn { text-transform: uppercase; letter-spacing: 0.08em; }
[data-skin="crt"] .btn:hover { text-shadow: 0 0 8px currentColor; }
[data-skin="crt"] .btn:active { transform: translate(4px, 4px); box-shadow: none; }
[data-skin="crt"] .btn--primary { box-shadow: 4px 4px 0 var(--memphis-yellow); font-weight: 700; }
[data-skin="crt"] .btn--primary:hover { background: #ff6fbb; color: #05060a; }
[data-skin="crt"] :is(.chip, .filter-chip) { border-radius: 0; text-transform: uppercase; }
[data-skin="crt"] .filter-chip[aria-pressed="true"] { background: #39ff88; color: #001a0a; border-color: #39ff88; }
[data-skin="crt"] .vehicle-card__status { background-color: #05060a; border: 1px solid currentColor; }
[data-skin="crt"] .table thead th { background: #030407; color: var(--memphis-yellow); }
[data-skin="crt"] .hero__title em,
[data-skin="crt"] .hero--workbench .hero__title em { color: var(--memphis-pink); text-shadow: 0 0 10px rgb(255 63 164 / 0.6); }

/* Windows snap to the grid in a few hard steps rather than gliding. */
@keyframes crt-snap {
    from { opacity: 0; transform: translate(24px, 24px); }
    to   { opacity: 1; transform: none; }
}
[data-skin="crt"].reveal-ready .reveal.is-visible { animation: crt-snap 0.32s steps(4, end) forwards; }

/* The F-91W: a grey-green LCD with the unlit segments faintly visible, set
   in a black resin bezel. Years and readouts are read off it. */
[data-skin="crt"] :is(.readout__value, .stat__value, .range-value, .model-card__years, .lcd) {
    font-family: var(--font-mono);
    color: #1b2216;
    background: linear-gradient(180deg, #b1bb9f, #98a386);
    border: 3px solid #111;
    box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.35), 0 0 0 1px #3a3a3a;
    padding: 0 0.4em;
    text-shadow: none;
    letter-spacing: 0.06em;
}
[data-skin="crt"] .lcd { position: relative; isolation: isolate; border-radius: 2px; }
/* The unlit segments, faintly visible behind the lit ones. */
[data-skin="crt"] .lcd[data-ghost]::before {
    content: attr(data-ghost);
    position: absolute;
    inset: 0 0.4em;
    z-index: -1;
    color: rgb(27 34 22 / 0.12);
    pointer-events: none;
}
[data-skin="crt"] .tl-year__number { padding: 0.15rem 0.5rem; font-size: 1.35rem; }
[data-skin="crt"] .tl-year__number::after {
    content: "ALARM CHRONOGRAPH";
    position: absolute;
    left: 50%;
    top: calc(100% + 4px);
    transform: translateX(-50%);
    color: #c9a74a;
    font-size: 0.45rem;
    letter-spacing: 0.18em;
    white-space: nowrap;
}
[data-skin="crt"] .readout { background: #07090e; }
[data-skin="crt"] .model-card__years { backdrop-filter: none; border-radius: 0; }

/* =========================================================================
   Windows 95 — the 1990s
   Grey bevels on a teal desktop. Every card is a window with a title bar,
   buttons physically press in, menus unfold instantly, and the header is
   the taskbar.
   ========================================================================= */

:is([data-skin="win95"], [data-skin="win95"] body.vip) {
    --bg: #008080;
    --bg-elevated: #c0c0c0;
    --surface: #c0c0c0;
    --surface-hover: #cfcfcf;
    --surface-sunken: #ffffff;
    --overlay: rgb(0 0 0 / 0.6);
    --text: #000000;
    --text-muted: #1f1f1f;
    --text-dim: #333333;
    --border: #808080;
    --border-strong: #404040;

    --accent-h: 240; --accent-s: 100%; --accent-l: 25%;
    --accent: #000080;
    --accent-strong: #00005a;
    --accent-text: #000080;
    --accent-soft: rgb(0 0 128 / 0.12);
    --accent-line: #000080;
    --accent-glow: transparent;
    --accent-fill: #000080;
    --accent-fill-strong: #1084d0;
    --accent-ink: #ffffff;

    --ok-text: #005a00; --warn-text: #5c4100; --danger-text: #8b0000; --info-text: #000080; --neutral-text: #1f1f1f;
    --ok-soft: #d4e8d4; --warn-soft: #ece2c0; --danger-soft: #ecd0d0; --info-soft: #d0d0ec; --neutral-soft: #d4d4d4;

    --radius-sm: 0; --radius: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-full: 0;
    --shadow-sm: none; --shadow: none; --shadow-md: none; --shadow-lg: 2px 2px 0 #000;
    --fast: 0ms; --normal: 0ms;

    /* The four-line bevel, raised and sunken. */
    --raised: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
    --sunken: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
    /* Minimise, maximise, close. */
    --win95-caption: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='14'%3E%3Cg fill='none'%3E%3Crect width='16' height='14' fill='%23c0c0c0'/%3E%3Cpath d='M0 13.5h16M15.5 0v14' stroke='%23000'/%3E%3Cpath d='M.5 13V.5H15' stroke='%23fff'/%3E%3Cpath d='M4 10h6' stroke='%23000' stroke-width='2'/%3E%3C/g%3E%3Cg fill='none' transform='translate(16)'%3E%3Crect width='16' height='14' fill='%23c0c0c0'/%3E%3Cpath d='M0 13.5h16M15.5 0v14' stroke='%23000'/%3E%3Cpath d='M.5 13V.5H15' stroke='%23fff'/%3E%3Crect x='3.5' y='2.5' width='8' height='7' fill='none' stroke='%23000'/%3E%3Cpath d='M3.5 3.5h8' stroke='%23000'/%3E%3C/g%3E%3Cg fill='none' transform='translate(36)'%3E%3Crect width='16' height='14' fill='%23c0c0c0'/%3E%3Cpath d='M0 13.5h16M15.5 0v14' stroke='%23000'/%3E%3Cpath d='M.5 13V.5H15' stroke='%23fff'/%3E%3Cpath d='M4.5 3.5l6 6M10.5 3.5l-6 6' stroke='%23000' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E");

    --skin-font: "MS Sans Serif", "Microsoft Sans Serif", "Pixelated MS Sans Serif", Tahoma, Geneva, Verdana, sans-serif;
    --skin-heading-font: var(--skin-font);
    --skin-heading-weight: 700;
    --skin-heading-spacing: 0;
    --skin-page: #008080;
    --skin-backdrop: none;
    --skin-header: #c0c0c0;
    --skin-header-border: 0;
    --skin-header-shadow: inset 0 -1px #808080, inset 0 1px #ffffff, 0 1px #0a0a0a;
    --skin-footer: #c0c0c0;
    --skin-card: #c0c0c0;
    --skin-card-border: 0;
    --skin-card-shadow: var(--raised);
    --skin-btn: #c0c0c0;
    --skin-btn-ink: #000;
    --skin-btn-border: 0;
    --skin-btn-shadow: var(--raised);
    --skin-primary: #c0c0c0;
    --skin-primary-ink: #000;
    --skin-field: #ffffff;
    --skin-nav-ink: #000;
    --skin-nav-panel: #c0c0c0;
}

[data-skin="win95"] body { -webkit-font-smoothing: none; font-size: 0.875rem; }
[data-skin="win95"] ::selection { background: #000080; color: #fff; }
[data-skin="win95"] a { color: #0000ee; }
[data-skin="win95"] a:visited { color: #551a8b; }

/* Black text straight on the teal measures 4.4:1, under AA, so nothing
   sits on the desktop: every section of a page is a window on it, and the
   cards inside are windows within that. Peak stacking. */
[data-skin="win95"] :is(.site-main, .vip-main) > section > .container {
    width: calc(100% - 1rem);
    padding-block: 0 var(--space-5);
    background: #c0c0c0;
    box-shadow: var(--raised), 3px 3px 0 rgb(0 0 0 / 0.5);
}
[data-skin="win95"] :is(.site-main, .vip-main) > section > .container::before {
    content: "";
    display: block;
    height: 20px;
    margin: 0 calc(-1 * clamp(var(--space-4), 4vw, var(--space-6))) var(--space-4);
    border: 3px solid #c0c0c0;
    border-bottom-width: 1px;
    background: var(--win95-caption) right 3px center / 52px 14px no-repeat, linear-gradient(90deg, #000080, #1084d0);
}
[data-skin="win95"] :is(.site-main, .vip-main) > section { padding-block: var(--space-5); }

/* The taskbar. */
[data-skin="win95"] :is(.site-header, .vip-header) { backdrop-filter: none; }
[data-skin="win95"] :is(.site-nav__link, .vip-nav__link) {
    color: #000;
    border-radius: 0;
    box-shadow: var(--raised);
    background: #c0c0c0;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
}
[data-skin="win95"] :is(.site-nav__link, .vip-nav__link):is(:hover) { background: #c0c0c0; color: #000; }
[data-skin="win95"] :is(.site-nav__link[aria-current="page"], .vip-nav__link.is-current) {
    box-shadow: var(--sunken);
    background: repeating-conic-gradient(#c0c0c0 0 25%, #ffffff 0 50%) 0 0 / 2px 2px;
}
[data-skin="win95"] .brand {
    padding: 0.2rem 0.6rem;
    box-shadow: var(--raised);
    background: #c0c0c0;
}
[data-skin="win95"] .brand:active { box-shadow: var(--sunken); }

/* Every card is a window: a navy title bar with the three caption buttons. */
[data-skin="win95"] :is(.card, .tl-card) { padding: 3px; }
[data-skin="win95"] :is(.card, .tl-card)::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    height: 18px;
    margin-bottom: 2px;
    background:
        var(--win95-caption) right 2px center / 52px 14px no-repeat,
        linear-gradient(90deg, #000080, #1084d0);
}
[data-skin="win95"] :is(.card, .tl-card) :is(.card__body, .tl-card__body) { background: #c0c0c0; }
[data-skin="win95"] :is(.vehicle-card__media, .marque-card__media, .model-card__media, .trim-card__media, .tl-card__media) { box-shadow: var(--sunken); border: 2px solid transparent; }
[data-skin="win95"] .card--interactive:hover { transform: none; box-shadow: var(--raised), 2px 2px 0 #000; }
[data-skin="win95"] .panel__head {
    background: linear-gradient(90deg, #000080, #1084d0);
    color: #fff;
    padding: 0.2rem 0.5rem;
    border: 0;
}
[data-skin="win95"] .panel__head :is(.panel__title, .dim, .muted, small) { color: #fff; }

/* Buttons press in: the bevel inverts and the label moves a pixel. */
[data-skin="win95"] .btn { font-weight: 400; min-height: 28px; padding: 0.25rem 1rem; }
[data-skin="win95"] .btn:hover { background: #c0c0c0; color: #000; }
[data-skin="win95"] .btn:active { box-shadow: var(--sunken); transform: translate(1px, 1px); }
[data-skin="win95"] .btn--primary { box-shadow: 0 0 0 1px #000, var(--raised); font-weight: 700; }
[data-skin="win95"] .btn--primary:hover { background: #c0c0c0; color: #000; box-shadow: 0 0 0 1px #000, var(--raised); }
[data-skin="win95"] .btn:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
[data-skin="win95"] .btn--ghost { color: #000; }
[data-skin="win95"] :is(.theme-toggle, .nav-toggle) { background: #c0c0c0; color: #000; border: 0; box-shadow: var(--raised); }
[data-skin="win95"] :is(.theme-toggle, .nav-toggle):active { box-shadow: var(--sunken); }

/* A tool card's own hue, darkened until it reads on the grey. */
[data-skin="win95"] .tool-card { --accent-text: hsl(var(--accent-h) var(--accent-s) 18%); }
[data-skin="win95"] :is(.input, .select, .textarea) { border: 0; box-shadow: var(--sunken); }
[data-skin="win95"] :is(.input, .select, .textarea):focus { box-shadow: var(--sunken); border: 0; outline: 1px dotted #000; outline-offset: -4px; }
[data-skin="win95"] :is(.chip, .filter-chip, .year-rail__item) { border: 0; box-shadow: var(--raised); background: #c0c0c0; }
[data-skin="win95"] :is(.filter-chip[aria-pressed="true"], .year-rail__item.is-current) { box-shadow: var(--sunken); background: #fff; color: #000; }
[data-skin="win95"] .vehicle-card__status { background-color: #c0c0c0; backdrop-filter: none; color: #000 !important; }
[data-skin="win95"] .model-card__years { background: #ffffe1; color: #000; box-shadow: 0 0 0 1px #000; backdrop-filter: none; }
[data-skin="win95"] .table-wrap { box-shadow: var(--sunken); background: #fff; }
[data-skin="win95"] .table thead th { background: #c0c0c0; color: #000; box-shadow: var(--raised); }
[data-skin="win95"] .table tbody tr:hover { background: #000080; color: #fff; }
[data-skin="win95"] .table tbody tr:hover :is(td, th) { color: #fff; }
[data-skin="win95"] .hero__title em,
[data-skin="win95"] .hero--workbench .hero__title em { color: #000080; }
[data-skin="win95"] .appearance__panel { box-shadow: var(--raised), 2px 2px 0 #000; border: 0; animation: none; background: #c0c0c0; }
[data-skin="win95"] .appearance__skin:has(input:checked) { background: #000080; color: #fff; }
[data-skin="win95"] .appearance__skin:has(input:checked) small { color: #fff; }

/* The timeline's decade strip sits inside the window, not on the desktop. */
[data-skin="win95"] .tl-rail { background: #c0c0c0; }
[data-skin="win95"] .tl-rail__item.is-current { background: #000080; color: #fff; }

/* The scrollbar, too. */
[data-skin="win95"] ::-webkit-scrollbar { width: 16px; height: 16px; background: repeating-conic-gradient(#c0c0c0 0 25%, #ffffff 0 50%) 0 0 / 2px 2px; }
[data-skin="win95"] ::-webkit-scrollbar-thumb { background: #c0c0c0; border: 0; border-radius: 0; box-shadow: var(--raised); }

/* A window opens as an outline zooming out from its corner. */
@keyframes win95-open {
    from { opacity: 0; transform: scale(0.2); }
    to   { opacity: 1; transform: none; }
}
[data-skin="win95"].reveal-ready .reveal { transform-origin: 0 0; }
[data-skin="win95"].reveal-ready .reveal.is-visible { animation: win95-open 0.24s steps(5, end) forwards; }

/* =========================================================================
   Aqua — 2000 to 2006
   Mac OS X: pinstripes, brushed metal, windows with traffic lights and gel
   buttons you want to lick. The default button breathes; pressed, a button
   bulges.
   ========================================================================= */

:is([data-skin="aqua"], [data-skin="aqua"] body.vip) {
    --bg: #ececec;
    --bg-elevated: #ffffff;
    --surface: #ffffff;
    --surface-hover: #f2f6fb;
    --surface-sunken: #f4f4f4;
    --overlay: rgb(30 30 30 / 0.7);
    --text: #111111;
    --text-muted: #3c3c3c;
    --text-dim: #535353;
    --border: #c3c3c3;
    --border-strong: #9a9a9a;

    --accent-h: 212; --accent-s: 79%; --accent-l: 57%;
    --accent: #3a8fe8;
    --accent-strong: #1f6fcf;
    --accent-text: #0b5cc2;
    --accent-soft: rgb(58 143 232 / 0.14);
    --accent-line: rgb(58 143 232 / 0.5);
    --accent-glow: rgb(58 143 232 / 0.35);
    --accent-fill: #3a8fe8;
    --accent-fill-strong: #1f6fcf;
    --accent-ink: #ffffff;

    --radius-sm: 6px; --radius: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 14px;
    --shadow: 0 6px 16px rgb(0 0 0 / 0.22);
    --shadow-md: 0 14px 34px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 24px 60px rgb(0 0 0 / 0.38);

    /* The label sits across the middle of the gel, so that band stays light
       enough for dark ink to clear 4.5:1. */
    --gel: linear-gradient(180deg, #ddf0ff 0%, #a9d5fc 46%, #6db6f6 50%, #8cc8fa 78%, #c8e8ff 100%);
    --gel-graphite: linear-gradient(180deg, #fdfdfd 0%, #e3e3e3 46%, #cfcfcf 50%, #dedede 78%, #f6f6f6 100%);
    --brushed-metal: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.18) 0 1px, rgb(0 0 0 / 0.025) 1px 2px, transparent 2px 4px);

    --skin-font: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    --skin-heading-font: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, sans-serif;
    --skin-heading-weight: 700;
    --skin-heading-spacing: -0.01em;
    --skin-page: #ececec;
    --skin-backdrop: repeating-linear-gradient(180deg, #f3f3f3 0 2px, #e7e7e7 2px 4px);
    --skin-header: var(--brushed-metal), linear-gradient(180deg, #e3e3e3, #b9b9b9);
    --skin-header-border: 1px solid #7d7d7d;
    --skin-header-shadow: inset 0 1px 0 #ffffff, 0 2px 6px rgb(0 0 0 / 0.2);
    --skin-footer: var(--brushed-metal), linear-gradient(180deg, #d9d9d9, #c4c4c4);
    --skin-card: #ffffff;
    --skin-card-border: 1px solid #a9a9a9;
    --skin-card-shadow: 0 10px 28px -8px rgb(0 0 0 / 0.35);
    --skin-btn: var(--gel-graphite);
    --skin-btn-ink: #111;
    --skin-btn-border: 1px solid #8d8d8d;
    --skin-btn-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 1px 2px rgb(0 0 0 / 0.25);
    --skin-primary: var(--gel);
    --skin-primary-ink: #0a2a52;
    --skin-field: #ffffff;
}

[data-skin="aqua"] :is(.site-header, .vip-header) { backdrop-filter: none; }
[data-skin="aqua"] :is(.site-nav__link[aria-current="page"], .vip-nav__link.is-current) {
    background: linear-gradient(180deg, #a9a9a9, #c9c9c9);
    color: #111;
    box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.35);
}

/* Windows with traffic lights in the title bar: close, minimise, zoom. */
[data-skin="aqua"] :is(.card, .tl-card, .panel) { overflow: hidden; }
[data-skin="aqua"] :is(.card, .tl-card)::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    height: 22px;
    border-bottom: 1px solid #a9a9a9;
    background:
        radial-gradient(circle at 13px 11px, rgb(255 255 255 / 0.85) 0 1.6px, transparent 2.4px),
        radial-gradient(circle at 12px 11px, #ff7b6f 0 4.5px, #c8382c 5.5px, transparent 6.2px),
        radial-gradient(circle at 33px 11px, rgb(255 255 255 / 0.85) 0 1.6px, transparent 2.4px),
        radial-gradient(circle at 32px 11px, #ffd25c 0 4.5px, #c58d0f 5.5px, transparent 6.2px),
        radial-gradient(circle at 53px 11px, rgb(255 255 255 / 0.85) 0 1.6px, transparent 2.4px),
        radial-gradient(circle at 52px 11px, #7fdb6a 0 4.5px, #2f9a28 5.5px, transparent 6.2px),
        repeating-linear-gradient(180deg, #f1f1f1 0 2px, #e2e2e2 2px 4px);
}
[data-skin="aqua"] .panel__head { background: repeating-linear-gradient(180deg, #f1f1f1 0 2px, #e2e2e2 2px 4px); }

/* Gel buttons: a pill, a highlight across the top half, a bulge when pressed. */
/* Both layers sit under the label (z-index -1 inside an isolated button), so
   the gloss never washes the text out. */
[data-skin="aqua"] .btn { border-radius: 999px; position: relative; overflow: hidden; isolation: isolate; text-shadow: 0 1px 0 rgb(255 255 255 / 0.6); }
[data-skin="aqua"] .btn::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 1px 8px 52% 8px;
    border-radius: 999px 999px 40% 40%;
    background: linear-gradient(180deg, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.15));
    pointer-events: none;
}
[data-skin="aqua"] .btn:active { transform: scale(1.04); }
[data-skin="aqua"] .btn--primary { border: 1px solid #1d5ea8; box-shadow: 0 2px 6px rgb(31 111 207 / 0.45); font-weight: 700; }
/* The default button breathes, the way it did on every Aqua dialog. */
[data-skin="aqua"] .btn--primary::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, #eef8ff, #b9defd 50%, #86c3f8 51%, #d4edff);
    animation: aqua-throb 1.6s ease-in-out infinite alternate;
    pointer-events: none;
}
[data-skin="aqua"] .btn--primary:hover { background: var(--gel); color: #0a2a52; }
@keyframes aqua-throb { from { opacity: 0; } to { opacity: 0.75; } }

[data-skin="aqua"] :is(.chip, .filter-chip, .year-rail__item) { border-radius: 999px; }
[data-skin="aqua"] :is(.filter-chip[aria-pressed="true"], .year-rail__item.is-current) { background: var(--gel); color: #0a2a52; border-color: #1d5ea8; }
[data-skin="aqua"] .search-field .input,
[data-skin="aqua"] input[type="search"] { border-radius: 999px; box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.3); }
[data-skin="aqua"] .table thead th { background: linear-gradient(180deg, #fafafa, #dcdcdc); color: #111; }
[data-skin="aqua"] .table tbody tr:nth-child(even) { background: #edf3fe; }
[data-skin="aqua"] .hero__title em,
[data-skin="aqua"] .hero--workbench .hero__title em { color: #0b5cc2; }

/* Gel scroll thumbs. */
[data-skin="aqua"] ::-webkit-scrollbar-thumb { background: var(--gel); border: 3px solid #ececec; }

/* The Genie: windows arrive with a little scale, the way they left the Dock. */
@keyframes aqua-genie {
    from { opacity: 0; transform: scale(0.92) translateY(18px); }
    to   { opacity: 1; transform: none; }
}
[data-skin="aqua"].reveal-ready .reveal.is-visible { animation-name: aqua-genie; }

/* =========================================================================
   Windows Aero — 2007 to 2009, Frutiger Aero
   Glass over a sky full of light: a dark glass taskbar, frosted windows with
   a reflection across the top, glossy buttons that glow and bulge, and
   bubbles drifting up behind it all.
   ========================================================================= */

:is([data-skin="aero"], [data-skin="aero"] body.vip) {
    --bg: #dff2fc;
    --bg-elevated: #f7fcff;
    --surface: rgb(255 255 255 / 0.82);
    --surface-hover: rgb(255 255 255 / 0.95);
    --surface-sunken: rgb(232 244 252 / 0.9);
    --overlay: rgb(8 40 70 / 0.72);
    --text: #0c2238;
    --text-muted: #24425f;
    --text-dim: #34536f;
    --border: rgb(120 165 200 / 0.55);
    --border-strong: rgb(70 120 165 / 0.7);

    --accent-h: 207; --accent-s: 78%; --accent-l: 44%;
    --accent: #1979ca;
    --accent-strong: #0f5fa8;
    --accent-text: #0b5394;
    --accent-soft: rgb(25 121 202 / 0.13);
    --accent-line: rgb(25 121 202 / 0.45);
    --accent-glow: rgb(60 170 255 / 0.4);
    --accent-fill: #1979ca;
    --accent-fill-strong: #0f5fa8;
    --accent-ink: #ffffff;

    --aero-green: #4cc35a;

    --ok-text: #16612a; --warn-text: #7a4a00; --danger-text: #a3241c; --info-text: #0b5394; --neutral-text: #24425f;

    --radius-sm: 4px; --radius: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px;
    --shadow: 0 4px 14px rgb(10 50 90 / 0.25);
    --shadow-md: 0 10px 28px rgb(10 50 90 / 0.3);
    --shadow-lg: 0 20px 50px rgb(10 50 90 / 0.38);

    --skin-font: "Segoe UI", "Frutiger", "Frutiger Linotype", "Myriad Pro", Tahoma, "Helvetica Neue", sans-serif;
    --skin-heading-font: "Segoe UI", "Frutiger", "Frutiger Linotype", "Myriad Pro", Tahoma, sans-serif;
    --skin-heading-weight: 400;
    --skin-heading-spacing: 0;
    --skin-page: #dff2fc;
    /* A Vista sky: light pouring in from the top, a swoosh of aurora across
       it, and green hills at the bottom — Frutiger Aero's whole brief. */
    --skin-backdrop:
        radial-gradient(60% 50% at 18% 0%, rgb(255 255 255 / 0.9), transparent 70%),
        radial-gradient(130% 40% at 50% 26%, transparent 46%, rgb(255 255 255 / 0.55) 50%, transparent 55%),
        radial-gradient(130% 40% at 60% 34%, transparent 46%, rgb(120 210 255 / 0.35) 50%, transparent 56%),
        radial-gradient(120% 60% at 30% 120%, #9ddc6b 0 38%, transparent 39%),
        radial-gradient(120% 60% at 90% 125%, #6cc24f 0 40%, transparent 41%),
        linear-gradient(180deg, #8fd0f5 0%, #c9ecfd 40%, #eaf8ff 72%, #f4fbff 100%);
    /* The Windows 7 taskbar. */
    --skin-header: linear-gradient(180deg, rgb(32 82 128 / 0.62), rgb(10 40 72 / 0.78));
    --skin-header-ink: #ffffff;
    --skin-header-border: 1px solid rgb(255 255 255 / 0.35);
    --skin-header-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 4px 18px rgb(10 50 90 / 0.3);
    --skin-nav-ink: #eaf6ff;
    --skin-nav-panel: #134a7a;
    --skin-footer: linear-gradient(180deg, rgb(255 255 255 / 0.4), rgb(255 255 255 / 0.75));
    /* The reflection is a background layer — the hard edge part-way down is
       the Aero glass line — so it lies under the text rather than over it. */
    --skin-card:
        linear-gradient(180deg, rgb(255 255 255 / 0.75) 0%, rgb(255 255 255 / 0.3) 44%, rgb(255 255 255 / 0) 44.5%),
        linear-gradient(180deg, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.8));
    --skin-card-border: 1px solid rgb(255 255 255 / 0.95);
    --skin-card-shadow: 0 0 0 1px rgb(30 80 130 / 0.35), inset 0 1px 0 #ffffff, 0 10px 30px -8px rgb(10 50 90 / 0.4);
    /* Windows 7's grey glossy button: two halves, the lower one darker. */
    --skin-btn: linear-gradient(180deg, #f6f6f6 0 49%, #e1e1e1 50%, #d3d3d3 100%);
    --skin-btn-ink: #0c2238;
    --skin-btn-border: 1px solid #707070;
    --skin-btn-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.75);
    --skin-primary: linear-gradient(180deg, #4aa6ea 0%, #1f7fcf 49%, #0e5ba3 50%, #2b8ad6 100%);
    --skin-primary-ink: #ffffff;
    --skin-field: #ffffff;
}

[data-skin="aero"] :is(.site-header, .vip-header) {
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
}
[data-skin="aero"] :is(.site-nav__link:hover, .site-nav__link[aria-current="page"], .vip-nav__link.is-current) {
    color: #fff;
    background: linear-gradient(180deg, rgb(255 255 255 / 0.35), rgb(255 255 255 / 0.08));
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.5), 0 0 14px rgb(120 200 255 / 0.6);
}
[data-skin="aero"] .site-header .theme-toggle,
[data-skin="aero"] .site-header .nav-toggle { background: rgb(255 255 255 / 0.15); color: #fff; border-color: rgb(255 255 255 / 0.45); }
[data-skin="aero"] .site-header .btn--ghost:hover { color: #fff; background: rgb(255 255 255 / 0.2); }
[data-skin="aero"] .badge-version { background: rgb(255 255 255 / 0.18); color: #fff; border-color: rgb(255 255 255 / 0.5); }

/* Glass: frosted where it is cheap to frost. Cards are translucent rather
   than blurred — thirty backdrop filters on one page is how a laptop's fans
   find out — and the sky behind them is smooth enough not to need it. */
[data-skin="aero"] :is(.panel, .filter-bar, .directory-controls, .marque-hero, .appearance__panel) {
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}
[data-skin="aero"] .card--interactive:hover { box-shadow: 0 0 0 1px rgb(25 121 202 / 0.6), 0 0 22px rgb(80 180 255 / 0.55), 0 14px 34px -10px rgb(10 50 90 / 0.45); }

/* Glossy buttons that glow blue on hover and bulge when pressed. */
[data-skin="aero"] .btn { border-radius: 4px; }
[data-skin="aero"] .btn:not(.btn--primary, .btn--ghost, .btn--danger):hover {
    background: linear-gradient(180deg, #eaf6fd 0 49%, #d9f0fc 50%, #bee6fd 100%);
    border-color: #3c7fb1;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.7), 0 0 8px rgb(80 180 255 / 0.6);
}
[data-skin="aero"] .btn--primary { border: 1px solid #0b4f8f; text-shadow: 0 1px 1px rgb(0 0 0 / 0.45); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), 0 2px 8px rgb(18 104 184 / 0.45); }
[data-skin="aero"] .btn--primary:hover { background: linear-gradient(180deg, #5ab2ef 0%, #2687d6 49%, #1062ad 50%, #3594dc 100%); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0 0 18px rgb(80 180 255 / 0.75); }
[data-skin="aero"] .btn:active { transform: scale(1.035); }

[data-skin="aero"] :is(.filter-chip[aria-pressed="true"], .year-rail__item.is-current) {
    background: linear-gradient(180deg, #4aa6ea 0%, #1f7fcf 49%, #0e5ba3 50%, #2b8ad6 100%);
    color: #fff;
    border-color: #0b4f8f;
    text-shadow: 0 1px 1px rgb(0 0 0 / 0.4);
}
[data-skin="aero"] .table thead th { background: linear-gradient(180deg, #ffffff, #e3eef8); color: #24425f; }
[data-skin="aero"] .hero__title em,
[data-skin="aero"] .hero--workbench .hero__title em { color: #0b5394; }
[data-skin="aero"] .eyebrow { color: #0b5394; }
[data-skin="aero"] .eyebrow::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff 0 18%, #8fe08a 40%, #2d9a3a);
    box-shadow: 0 0 8px rgb(76 195 90 / 0.7);
}

/* Bubbles, rising behind everything. skin-effects.js adds a few that drift
   and dodge the pointer; these are the ones that are always there. */
[data-skin="aero"] body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 78%, rgb(255 255 255 / 0.55) 0 1.5%, transparent 1.6%),
        radial-gradient(circle at 12% 78%, transparent 0 2.4%, rgb(255 255 255 / 0.7) 2.5% 2.7%, transparent 2.8%),
        radial-gradient(circle at 86% 62%, transparent 0 3.6%, rgb(255 255 255 / 0.6) 3.7% 3.9%, transparent 4%),
        radial-gradient(circle at 72% 88%, transparent 0 1.6%, rgb(255 255 255 / 0.65) 1.7% 1.85%, transparent 1.95%),
        radial-gradient(circle at 30% 40%, transparent 0 1.1%, rgb(255 255 255 / 0.5) 1.2% 1.3%, transparent 1.4%);
}

/* Windows ripple open: a quick scale with a soft overshoot. */
@keyframes aero-open {
    from { opacity: 0; transform: scale(0.94); }
    70%  { opacity: 1; transform: scale(1.01); }
    to   { opacity: 1; transform: none; }
}
[data-skin="aero"].reveal-ready .reveal.is-visible { animation-name: aero-open; }

/* =========================================================================
   Metro — the 2010s
   Flat. Huge light type, lowercase section names, solid tiles of colour,
   no shadows, no gradients, no corners — and panels that slide in from the
   side as if the page were a long strip you are moving along.
   ========================================================================= */

:is([data-skin="metro"], [data-skin="metro"] body.vip) {
    --bg: #111111;
    --bg-elevated: #1f1f1f;
    --surface: #262626;
    --surface-hover: #303030;
    --surface-sunken: #0b0b0b;
    --overlay: rgb(0 0 0 / 0.85);
    --text: #ffffff;
    --text-muted: #d6d6d6;
    --text-dim: #b8b8b8;
    --border: #3a3a3a;
    --border-strong: #5a5a5a;

    --accent-h: 207; --accent-s: 100%; --accent-l: 42%;
    --accent: #0078d7;
    --accent-strong: #005a9e;
    --accent-text: #4cb2ff;
    --accent-soft: rgb(0 120 215 / 0.2);
    --accent-line: #0078d7;
    --accent-glow: transparent;
    /* #0078d7 under white measures 4.49:1 — a hair under AA — so fills use
       the next shade down. */
    --accent-fill: #0067c0;
    --accent-fill-strong: #005ba8;
    --accent-ink: #ffffff;

    --ok-text: #6ee66e; --warn-text: #ffc83d; --danger-text: #ff8a80; --info-text: #4cb2ff; --neutral-text: #d6d6d6;

    --radius-sm: 0; --radius: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-full: 0;
    --shadow-sm: none; --shadow: none; --shadow-md: none; --shadow-lg: 0 0 0 1px #3a3a3a;

    --skin-font: "Segoe UI", "Selawik", "Segoe WP", "Open Sans", "Helvetica Neue", Arial, sans-serif;
    --skin-heading-font: "Segoe UI Light", "Segoe UI", "Selawik Light", "Open Sans", "Helvetica Neue", sans-serif;
    --skin-heading-weight: 300;
    --skin-heading-spacing: -0.02em;
    --skin-page: #111111;
    --skin-backdrop: none;
    --skin-header: #111111;
    --skin-header-border: 0;
    --skin-footer: #0b0b0b;
    --skin-card: #262626;
    --skin-card-border: 0;
    --skin-card-shadow: none;
    --skin-btn: transparent;
    --skin-btn-ink: #ffffff;
    --skin-btn-border: 2px solid #ffffff;
    --skin-primary: #0067c0;
    --skin-primary-ink: #ffffff;
    --skin-field: #ffffff;
}

[data-skin="metro"] :is(.site-header, .vip-header) { backdrop-filter: none; }
[data-skin="metro"] h1 { font-size: clamp(2.5rem, 1.6rem + 4.5vw, 5rem); line-height: 1.02; }
[data-skin="metro"] :is(.section-head h2, .section-title, .year-heading, .tl-decade__title) { text-transform: lowercase; font-size: var(--text-3xl); }
[data-skin="metro"] .site-nav__link { text-transform: lowercase; font-size: var(--text-lg); font-weight: 300; }
[data-skin="metro"] .site-nav__link[aria-current="page"] { background: none; color: #fff; font-weight: 600; }
[data-skin="metro"] :is(.input, .select, .textarea) { color: #000; border: 2px solid #d6d6d6; }
[data-skin="metro"] :is(.input, .select, .textarea):focus { border-color: #0078d7; box-shadow: none; }
[data-skin="metro"] :is(.input, .textarea)::placeholder { color: #595959; }
[data-skin="metro"] .search-field svg { color: #595959; }

/* Tiles: each card a solid block of colour, white on top. The colours are the
   darker Metro shades, chosen so white text clears 4.5:1 on every one. */
[data-skin="metro"] :is(.vehicle-card, .marque-card, .model-card, .trim-card, .tl-card, .tool-card) {
    --tile: #0063b1;
    --text: #ffffff;
    --text-muted: #f2f2f2;
    --text-dim: #f2f2f2;
    --accent-text: #ffffff;
    --border: rgb(255 255 255 / 0.35);
}
[data-skin="metro"] :is(.vehicle-card, .marque-card, .model-card, .trim-card, .tl-card) .card__body,
[data-skin="metro"] .tl-card__body,
[data-skin="metro"] .tool-card { background: var(--tile); }
[data-skin="metro"] :is(.card, .tl-card):nth-child(7n + 2) { --tile: #b4009e; }
[data-skin="metro"] :is(.card, .tl-card):nth-child(7n + 3) { --tile: #107c10; }
[data-skin="metro"] :is(.card, .tl-card):nth-child(7n + 4) { --tile: #5c2d91; }
[data-skin="metro"] :is(.card, .tl-card):nth-child(7n + 5) { --tile: #006f69; }
[data-skin="metro"] :is(.card, .tl-card):nth-child(7n + 6) { --tile: #c30052; }
[data-skin="metro"] :is(.card, .tl-card):nth-child(7n) { --tile: #a33f0a; }
/* A marque's own accent picks its tile, on the timeline and the catalog. */
[data-skin="metro"] :is(.tl-card, .marque-card)[data-accent="cyan"]   { --tile: #006f69; }
[data-skin="metro"] :is(.tl-card, .marque-card)[data-accent="violet"] { --tile: #5c2d91; }
[data-skin="metro"] :is(.tl-card, .marque-card)[data-accent="amber"]  { --tile: #a33f0a; }
[data-skin="metro"] :is(.tl-card, .marque-card)[data-accent="lime"]   { --tile: #107c10; }
[data-skin="metro"] :is(.tl-card, .marque-card)[data-accent="rose"]   { --tile: #b4009e; }
[data-skin="metro"] .tool-card[data-accent="cyan"]   { --tile: #006f69; }
[data-skin="metro"] .tool-card[data-accent="violet"] { --tile: #5c2d91; }
[data-skin="metro"] .tool-card[data-accent="amber"]  { --tile: #a33f0a; }
[data-skin="metro"] .tool-card[data-accent="lime"]   { --tile: #107c10; }
[data-skin="metro"] .tool-card[data-accent="rose"]   { --tile: #b4009e; }
[data-skin="metro"] .tool-card :is(.tool-card__icon) { background: rgb(0 0 0 / 0.2); border-color: transparent; color: #fff; }
[data-skin="metro"] .tool-card .chip { background: rgb(0 0 0 / 0.3); color: #fff; }
[data-skin="metro"] .tool-save { color: #fff; }

/* Tiles tilt toward the finger that presses them. */
[data-skin="metro"] .card--interactive:hover { transform: none; box-shadow: 0 0 0 3px rgb(255 255 255 / 0.55); }
[data-skin="metro"] .card--interactive:active { transform: perspective(700px) rotateX(5deg) scale(0.97); }

[data-skin="metro"] .btn { text-transform: lowercase; font-weight: 600; }
[data-skin="metro"] .btn:hover { background: #ffffff; color: #111; }
[data-skin="metro"] .btn--primary:hover { background: #005ba8; color: #fff; }
[data-skin="metro"] .btn--ghost { color: #fff; }
[data-skin="metro"] :is(.chip, .filter-chip, .year-rail__item) { border-radius: 0; }
[data-skin="metro"] :is(.filter-chip[aria-pressed="true"], .year-rail__item.is-current) { background: #0067c0; color: #fff; border-color: #0067c0; }
[data-skin="metro"] .vehicle-card__status { background-color: #111; backdrop-filter: none; border: 0; }
[data-skin="metro"] .model-card__years { background: #111; backdrop-filter: none; }
[data-skin="metro"] .table thead th { background: #0b0b0b; }
[data-skin="metro"] .hero__title em,
[data-skin="metro"] .hero--workbench .hero__title em { color: #4cb2ff; }

/* Panels slide continuously through space, in from the right. */
@keyframes metro-slide {
    from { opacity: 0; transform: translateX(80px); }
    to   { opacity: 1; transform: none; }
}
[data-skin="metro"].reveal-ready .reveal.is-visible { animation: metro-slide 0.55s cubic-bezier(0.1, 0.9, 0.2, 1) forwards; }
[data-skin="metro"] main h1:first-of-type { animation: metro-slide 0.7s cubic-bezier(0.1, 0.9, 0.2, 1) both; }

/* =========================================================================
   Glass — the 2020s
   Frosted panels floating over slow colour. Depth instead of decoration:
   surfaces sit at different distances, light follows the pointer across
   them, and a card leans toward you when you reach for it.
   ========================================================================= */

:is([data-skin="glass"], [data-skin="glass"] body.vip) {
    --bg: #0b0d1a;
    --bg-elevated: #161a2e;
    --surface: rgb(255 255 255 / 0.06);
    --surface-hover: rgb(255 255 255 / 0.1);
    --surface-sunken: rgb(0 0 0 / 0.25);
    --overlay: rgb(6 8 18 / 0.75);
    --text: #f1f2ff;
    --text-muted: #c4c7e4;
    --text-dim: #a9adcf;
    --border: rgb(255 255 255 / 0.14);
    --border-strong: rgb(255 255 255 / 0.26);

    --accent-h: 246; --accent-s: 100%; --accent-l: 75%;
    --accent: #8a7dff;
    --accent-strong: #7262ff;
    --accent-text: #b8afff;
    --accent-soft: rgb(138 125 255 / 0.16);
    --accent-line: rgb(138 125 255 / 0.5);
    --accent-glow: rgb(138 125 255 / 0.35);
    --accent-fill: #a59bff;
    --accent-fill-strong: #bdb5ff;
    --accent-ink: #110d33;

    --ok-text: #7cf0b2; --warn-text: #ffd27a; --danger-text: #ff9db0; --info-text: #8fd8ff; --neutral-text: #c4c7e4;

    --radius-sm: 12px; --radius: 16px; --radius-md: 22px; --radius-lg: 28px; --radius-xl: 34px;
    --shadow: 0 10px 30px -12px rgb(0 0 0 / 0.6);
    --shadow-md: 0 24px 50px -20px rgb(0 0 0 / 0.7);
    --shadow-lg: 0 40px 80px -24px rgb(0 0 0 / 0.75);

    --skin-font: "Inter", "SF Pro Text", -apple-system, system-ui, "Segoe UI Variable", "Segoe UI", Roboto, sans-serif;
    --skin-heading-font: "Inter", "SF Pro Display", -apple-system, system-ui, "Segoe UI Variable Display", sans-serif;
    --skin-heading-weight: 650;
    --skin-heading-spacing: -0.03em;
    --skin-page: #0b0d1a;
    --skin-backdrop:
        radial-gradient(38% 42% at 18% 22%, rgb(138 125 255 / 0.55), transparent 70%),
        radial-gradient(34% 40% at 82% 18%, rgb(75 225 236 / 0.4), transparent 70%),
        radial-gradient(40% 46% at 70% 82%, rgb(255 110 180 / 0.35), transparent 70%),
        radial-gradient(30% 34% at 22% 88%, rgb(70 120 255 / 0.4), transparent 70%),
        #0b0d1a;
    --skin-header: rgb(11 13 26 / 0.55);
    --skin-header-border: 1px solid rgb(255 255 255 / 0.1);
    --skin-footer: rgb(0 0 0 / 0.25);
    /* --mx/--my are set by skin-effects.js as the pointer crosses a card. */
    --skin-card:
        radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), rgb(255 255 255 / 0.12), transparent 45%),
        linear-gradient(160deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.03));
    --skin-card-border: 1px solid rgb(255 255 255 / 0.14);
    --skin-card-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 24px 50px -24px rgb(0 0 0 / 0.75);
    --skin-btn: rgb(255 255 255 / 0.08);
    --skin-btn-ink: #f1f2ff;
    --skin-btn-border: 1px solid rgb(255 255 255 / 0.2);
    --skin-btn-shadow: inset 0 1px 0 rgb(255 255 255 / 0.15);
    --skin-primary: linear-gradient(135deg, #b3a9ff, #8a7dff 50%, #6fd6ef);
    --skin-primary-ink: #110d33;
    --skin-field: rgb(255 255 255 / 0.06);
}

/* The colour drifts: one large layer turning slowly, which the compositor
   can do without repainting anything. */
[data-skin="glass"] body::before {
    inset: -20%;
    animation: glass-drift 40s ease-in-out infinite alternate;
}
@keyframes glass-drift {
    from { transform: rotate(0deg) scale(1); }
    to   { transform: rotate(14deg) scale(1.12); }
}

[data-skin="glass"] :is(.site-header, .vip-header, .panel, .filter-bar, .directory-controls, .marque-hero, .appearance__panel) {
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
}
[data-skin="glass"] .appearance__panel { background: rgb(22 26 46 / 0.78); }
[data-skin="glass"] :is(.select) option { background: #161a2e; color: #f1f2ff; }

/* Depth: a card leans toward the pointer (skin-effects.js) and lifts. */
[data-skin="glass"] :is(.card, .tl-card) { transform-style: preserve-3d; will-change: transform; }
[data-skin="glass"] .card--interactive:hover {
    border-color: rgb(255 255 255 / 0.3);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 40px 70px -30px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(138 125 255 / 0.25);
}

[data-skin="glass"] .btn { border-radius: 999px; backdrop-filter: blur(10px); }
[data-skin="glass"] .btn--primary { box-shadow: 0 10px 30px -10px rgb(138 125 255 / 0.8), inset 0 1px 0 rgb(255 255 255 / 0.5); }
[data-skin="glass"] .btn--primary:hover { background: linear-gradient(135deg, #c8c1ff, #a59bff 50%, #8fe3f5); color: #110d33; }
[data-skin="glass"] :is(.chip, .filter-chip, .year-rail__item) { border-radius: 999px; }
[data-skin="glass"] :is(.filter-chip[aria-pressed="true"], .year-rail__item.is-current) { background: rgb(138 125 255 / 0.25); color: #fff; border-color: rgb(184 175 255 / 0.6); }
[data-skin="glass"] .table thead th { background: rgb(0 0 0 / 0.3); }
[data-skin="glass"] .hero__title em,
[data-skin="glass"] .hero--workbench .hero__title em {
    background: linear-gradient(120deg, #b8afff, #6fd6ef);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Things rise out of the depth rather than slide. */
@keyframes glass-rise {
    from { opacity: 0; transform: translateY(26px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}
[data-skin="glass"].reveal-ready .reveal.is-visible { animation: glass-rise 0.7s var(--ease-out) forwards; }

/* =========================================================================
   Ambient — the 2030s
   The interface steps back. Surfaces are soft and borderless and morph as
   you reach for them; the menu surfaces when you arrive, recedes while you
   read, and comes back when you scroll up or reach for it; the secondary
   details on a card appear when you show interest in it.
   ========================================================================= */

:is([data-skin="ambient"], [data-skin="ambient"] body.vip) {
    --bg: #f3f1ee;
    --bg-elevated: #fbfaf8;
    --surface: #fbfaf8;
    --surface-hover: #ffffff;
    --surface-sunken: #ebe8e3;
    --overlay: rgb(44 42 51 / 0.6);
    --text: #25232c;
    --text-muted: #4b4856;
    --text-dim: #5d5a68;
    --border: rgb(44 42 51 / 0.1);
    --border-strong: rgb(44 42 51 / 0.2);

    --accent-h: 247; --accent-s: 88%; --accent-l: 69%;
    --accent: #7b6cf6;
    --accent-strong: #6151ee;
    --accent-text: #4f3fd0;
    --accent-soft: rgb(123 108 246 / 0.12);
    --accent-line: rgb(123 108 246 / 0.35);
    --accent-glow: rgb(123 108 246 / 0.25);
    --accent-fill: #a99ff9;
    --accent-fill-strong: #9284f7;
    --accent-ink: #1a1440;

    --radius-sm: 14px; --radius: 18px; --radius-md: 26px; --radius-lg: 34px; --radius-xl: 42px;
    --shadow: 0 10px 30px -14px rgb(44 42 51 / 0.25);
    --shadow-md: 0 22px 50px -24px rgb(44 42 51 / 0.3);
    --shadow-lg: 0 40px 80px -30px rgb(44 42 51 / 0.35);

    --skin-font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, sans-serif;
    --skin-heading-font: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
    --skin-heading-weight: 600;
    --skin-heading-spacing: -0.02em;
    --skin-page: #f3f1ee;
    --skin-backdrop:
        radial-gradient(30% 36% at 20% 30%, rgb(123 108 246 / 0.16), transparent 70%),
        radial-gradient(34% 30% at 78% 24%, rgb(255 170 140 / 0.18), transparent 70%),
        radial-gradient(36% 34% at 60% 80%, rgb(110 210 190 / 0.16), transparent 70%),
        #f3f1ee;
    --skin-header: transparent;
    --skin-header-border: 0;
    --skin-footer: transparent;
    --skin-card: #fbfaf8;
    --skin-card-border: 1px solid transparent;
    --skin-card-shadow: 0 1px 2px rgb(44 42 51 / 0.05), 0 18px 40px -26px rgb(44 42 51 / 0.35);
    --skin-btn: #ffffff;
    --skin-btn-ink: #25232c;
    --skin-btn-border: 1px solid transparent;
    --skin-btn-shadow: 0 6px 18px -10px rgb(44 42 51 / 0.4);
    --skin-primary: #a99ff9;
    --skin-primary-ink: #1a1440;
    --skin-field: #ffffff;
}

[data-skin="ambient"] body::before {
    inset: -15%;
    animation: ambient-breathe 30s ease-in-out infinite alternate;
}
@keyframes ambient-breathe {
    from { transform: rotate(-6deg) scale(1); }
    to   { transform: rotate(8deg) scale(1.1); }
}
[data-skin="ambient"] :is(.site-header, .vip-header) { backdrop-filter: none; }
[data-skin="ambient"] .site-header.is-stuck { background: rgb(243 241 238 / 0.85); backdrop-filter: blur(16px); }
[data-skin="ambient"] .site-footer { border-top: 0; }

/* Surfaces morph toward you: rounder at rest, firmer when touched. */
[data-skin="ambient"] :is(.card, .tl-card) { transition: border-radius var(--slow) var(--ease), transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease); }
[data-skin="ambient"] .card--interactive:hover { border-radius: 18px; transform: translateY(-4px) scale(1.01); box-shadow: 0 30px 60px -30px rgb(44 42 51 / 0.45); }

/* Controls emerge only when relevant — on screens with a pointer. On touch
   there is no "reaching for", so everything simply stays. */
@media (hover: hover) and (min-width: 821px) {
    [data-skin="ambient"] .site-nav { transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
    [data-skin="ambient"]:not(.ambient-awake) .site-header:not(:hover, :focus-within) .site-nav {
        opacity: 0;
        transform: translateY(-6px);
    }

    [data-skin="ambient"] :is(.tool-card__bottom, .model-card__trims, .trim-card__tail) {
        transition: opacity var(--normal) var(--ease), transform var(--normal) var(--ease);
    }
    [data-skin="ambient"] :is(.card, .tl-card):not(:hover, :focus-within) :is(.tool-card__bottom, .model-card__trims, .trim-card__tail) {
        opacity: 0;
        transform: translateY(4px);
    }

    [data-skin="ambient"] .filter-bar:not(:hover, :focus-within) { box-shadow: none; background: transparent; }
}

[data-skin="ambient"] .btn { border-radius: 999px; }
[data-skin="ambient"] .btn--primary:hover { background: #9284f7; color: #1a1440; }
[data-skin="ambient"] :is(.chip, .filter-chip, .year-rail__item) { border-radius: 999px; border-color: transparent; }
[data-skin="ambient"] :is(.filter-chip, .year-rail__item) { background: #fbfaf8; }
[data-skin="ambient"] :is(.filter-chip[aria-pressed="true"], .year-rail__item.is-current) { background: #25232c; color: #fbfaf8; }
[data-skin="ambient"] .table thead th { background: #ebe8e3; }
[data-skin="ambient"] .section-head { border-bottom: 0; }
[data-skin="ambient"] .hero__title em,
[data-skin="ambient"] .hero--workbench .hero__title em { color: #4f3fd0; }

@keyframes ambient-emerge {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: none; }
}
[data-skin="ambient"].reveal-ready .reveal.is-visible { animation: ambient-emerge 0.9s var(--ease-out) forwards; }

/* ---------- Effects the scripts add --------------------------------------- */

/* A ripple where Aqua or Aero was pressed. */
[data-skin="aero"] .btn { position: relative; overflow: hidden; }
.skin-ripple {
    position: absolute;
    z-index: 2;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.65);
    pointer-events: none;
    animation: skin-ripple 0.6s ease-out forwards;
}
@keyframes skin-ripple { to { transform: scale(26); opacity: 0; } }

/* Aero's drifting bubbles. The layer shifts a little against the pointer. */
.aero-bubbles {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    transform: translate(calc(var(--px, 0) * -24px), calc(var(--py, 0) * -14px));
    transition: transform 1.4s var(--ease-out);
}
.aero-bubbles span {
    position: absolute;
    left: var(--x);
    bottom: -80px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.95) 0 9%, rgb(255 255 255 / 0.12) 32%,
                rgb(170 225 255 / 0.12) 62%, rgb(255 255 255 / 0.6) 72%, transparent 74%);
    animation: aero-rise var(--dur) linear var(--delay) infinite;
}
@keyframes aero-rise {
    from { transform: translate(0, 0); }
    50%  { transform: translate(var(--sway), -58vh); }
    to   { transform: translate(0, -118vh); }
}
:not([data-skin="aero"]) > body > .aero-bubbles { display: none; }