/* Marvelous UI — 43 components vendored for the landing page. Generated by landing/tools/vendor.mjs */
/* tokens/tokens.css */
/*
 * Marvelous UI — design tokens
 *
 * Layer order. If your project uses Tailwind (or any layered CSS), declare the
 * order once, BEFORE importing anything, so your utilities can override us:
 *   @layer mv, theme, base, components, utilities;
 */
@layer mv.reset, mv.tokens, mv.base, mv.components, mv.utilities;

@layer mv.tokens {
  :root {
    color-scheme: light dark;

    /* ── Brand ─────────────────────────────────────────────────────────
       Change hue/chroma to re-theme everything; states are derived. */
    --mv-accent-h: 280;
    --mv-accent-c: 0.2;
    --mv-neutral-h: 270;
    --mv-neutral-c: 0.008;

    /* ── Neutral scale (surfaces, text, borders) ───────────────────── */
    --mv-gray-0:  oklch(1 0 none);
    --mv-gray-50: oklch(0.985 var(--mv-neutral-c) var(--mv-neutral-h));
    --mv-gray-100: oklch(0.967 var(--mv-neutral-c) var(--mv-neutral-h));
    --mv-gray-200: oklch(0.925 var(--mv-neutral-c) var(--mv-neutral-h));
    --mv-gray-300: oklch(0.87  var(--mv-neutral-c) var(--mv-neutral-h));
    --mv-gray-400: oklch(0.71  var(--mv-neutral-c) var(--mv-neutral-h));
    --mv-gray-500: oklch(0.556 var(--mv-neutral-c) var(--mv-neutral-h));
    --mv-gray-600: oklch(0.44  var(--mv-neutral-c) var(--mv-neutral-h));
    --mv-gray-700: oklch(0.37  var(--mv-neutral-c) var(--mv-neutral-h));
    --mv-gray-800: oklch(0.27  var(--mv-neutral-c) var(--mv-neutral-h));
    --mv-gray-900: oklch(0.205 var(--mv-neutral-c) var(--mv-neutral-h));
    --mv-gray-950: oklch(0.145 var(--mv-neutral-c) var(--mv-neutral-h));

    /* ── Semantic colors (light-dark aware) ─────────────────────────── */
    --mv-bg:            light-dark(var(--mv-gray-0),   var(--mv-gray-950));
    --mv-bg-subtle:     light-dark(var(--mv-gray-50),  oklch(0.175 var(--mv-neutral-c) var(--mv-neutral-h)));
    --mv-bg-muted:      light-dark(var(--mv-gray-100), var(--mv-gray-900));
    --mv-bg-emphasis:   light-dark(var(--mv-gray-200), var(--mv-gray-800));
    --mv-surface:       light-dark(var(--mv-gray-0),   oklch(0.18 var(--mv-neutral-c) var(--mv-neutral-h)));
    --mv-surface-raised: light-dark(var(--mv-gray-0),  oklch(0.22 var(--mv-neutral-c) var(--mv-neutral-h)));
    --mv-overlay:       light-dark(oklch(0.2 0.01 var(--mv-neutral-h) / 0.4), oklch(0 0 none / 0.6));

    --mv-fg:            light-dark(var(--mv-gray-950), var(--mv-gray-50));
    --mv-fg-muted:      light-dark(var(--mv-gray-600), var(--mv-gray-400));
    --mv-fg-subtle:     light-dark(var(--mv-gray-500), var(--mv-gray-500));
    --mv-fg-on-accent:  oklch(0.99 0 none);

    --mv-border:        light-dark(var(--mv-gray-200), oklch(1 0 none / 0.1));
    --mv-border-strong: light-dark(var(--mv-gray-300), oklch(1 0 none / 0.18));
    --mv-input:         light-dark(var(--mv-gray-300), oklch(1 0 none / 0.15));

    --mv-accent:        light-dark(oklch(0.55 var(--mv-accent-c) var(--mv-accent-h)), oklch(0.65 var(--mv-accent-c) var(--mv-accent-h)));
    --mv-accent-hover:  color-mix(in oklch, var(--mv-accent), light-dark(black, white) 12%);
    --mv-accent-active: color-mix(in oklch, var(--mv-accent), light-dark(black, white) 22%);
    --mv-accent-subtle: color-mix(in oklch, var(--mv-accent) 14%, transparent);
    --mv-accent-fg:     light-dark(oklch(0.45 var(--mv-accent-c) var(--mv-accent-h)), oklch(0.8 calc(var(--mv-accent-c) * 0.8) var(--mv-accent-h)));

    --mv-success: light-dark(oklch(0.6 0.15 150), oklch(0.72 0.17 150));
    --mv-warning: light-dark(oklch(0.7 0.16 70),  oklch(0.8 0.15 80));
    --mv-danger:  light-dark(oklch(0.58 0.22 27), oklch(0.68 0.2 25));
    --mv-info:    light-dark(oklch(0.6 0.15 240), oklch(0.72 0.14 240));

    --mv-ring: color-mix(in oklch, var(--mv-accent) 60%, transparent);
    --mv-selection: color-mix(in oklch, var(--mv-accent) 25%, transparent);

    /* ── Typography ─────────────────────────────────────────────────── */
    --mv-font-sans: "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mv-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, Consolas, monospace;
    --mv-font-display: var(--mv-font-sans);

    --mv-text-xs: 0.75rem;
    --mv-text-sm: 0.875rem;
    --mv-text-base: 1rem;
    --mv-text-lg: 1.125rem;
    --mv-text-xl: 1.25rem;
    --mv-text-2xl: 1.5rem;
    --mv-text-3xl: 1.875rem;
    --mv-text-4xl: clamp(2rem, 1.6rem + 1.6vw, 2.5rem);
    --mv-text-5xl: clamp(2.5rem, 1.8rem + 3vw, 3.75rem);
    --mv-text-6xl: clamp(3rem, 2rem + 4.5vw, 5rem);

    --mv-leading-tight: 1.15;
    --mv-leading-snug: 1.35;
    --mv-leading-normal: 1.55;
    --mv-tracking-tight: -0.02em;

    --mv-weight-normal: 400;
    --mv-weight-medium: 500;
    --mv-weight-semibold: 600;
    --mv-weight-bold: 700;

    /* ── Space (4px grid) ───────────────────────────────────────────── */
    --mv-space-0-5: 0.125rem;
    --mv-space-1: 0.25rem;
    --mv-space-1-5: 0.375rem;
    --mv-space-2: 0.5rem;
    --mv-space-3: 0.75rem;
    --mv-space-4: 1rem;
    --mv-space-5: 1.25rem;
    --mv-space-6: 1.5rem;
    --mv-space-8: 2rem;
    --mv-space-10: 2.5rem;
    --mv-space-12: 3rem;
    --mv-space-16: 4rem;
    --mv-space-24: 6rem;

    /* ── Sizes (controls) ───────────────────────────────────────────── */
    --mv-control-sm: 2rem;
    --mv-control-md: 2.25rem;
    --mv-control-lg: 2.75rem;

    /* ── Radius ─────────────────────────────────────────────────────── */
    --mv-radius-xs: 0.25rem;
    --mv-radius-sm: 0.375rem;
    --mv-radius-md: 0.5rem;
    --mv-radius-lg: 0.75rem;
    --mv-radius-xl: 1rem;
    --mv-radius-2xl: 1.5rem;
    --mv-radius-full: 9999px;

    /* ── Elevation ──────────────────────────────────────────────────── */
    --mv-shadow-color: light-dark(oklch(0.2 0.02 var(--mv-neutral-h) / 0.08), oklch(0 0 none / 0.4));
    --mv-shadow-xs: 0 1px 2px var(--mv-shadow-color);
    --mv-shadow-sm: 0 1px 3px var(--mv-shadow-color), 0 1px 2px -1px var(--mv-shadow-color);
    --mv-shadow-md: 0 4px 8px -2px var(--mv-shadow-color), 0 2px 4px -2px var(--mv-shadow-color);
    --mv-shadow-lg: 0 12px 24px -6px var(--mv-shadow-color), 0 4px 8px -4px var(--mv-shadow-color);
    --mv-shadow-xl: 0 24px 48px -12px light-dark(oklch(0.2 0.02 var(--mv-neutral-h) / 0.18), oklch(0 0 none / 0.6));

    --mv-z-dropdown: 1000;
    --mv-z-sticky: 1100;
    --mv-z-overlay: 1200;
    --mv-z-modal: 1300;
    --mv-z-toast: 1400;
    --mv-z-tooltip: 1500;
    --mv-z-cursor: 9999;

    /* ── Motion ─────────────────────────────────────────────────────────
       Durations collapse under reduced motion (see below), so any
       transition built on them becomes instant automatically. */
    --mv-duration-instant: 80ms;
    --mv-duration-fast: 150ms;
    --mv-duration-normal: 240ms;
    --mv-duration-slow: 400ms;
    --mv-duration-slower: 700ms;

    --mv-ease-out: cubic-bezier(0.22, 1, 0.36, 1);        /* default — decelerate */
    --mv-ease-in: cubic-bezier(0.55, 0, 1, 0.45);
    --mv-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --mv-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --mv-ease-linear: linear;
    /* Spring approximations via linear() */
    --mv-ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
    --mv-ease-bounce: linear(0, 0.063, 0.25, 0.563, 1 36.4%, 0.812, 0.75, 0.813, 1 72.7%, 0.953, 0.938, 0.953, 1 90.9%, 0.984, 1);
    --mv-ease-snappy: linear(0, 0.1 5%, 0.5 15%, 0.84 28%, 0.96 40%, 1.01 55%, 1);

    /* 1 = full motion, 0 = reduced; usable in calc() for amplitudes */
    --mv-motion: 1;

    /* ── Focus ─────────────────────────────────────────────────────── */
    --mv-focus-ring: 0 0 0 2px var(--mv-bg), 0 0 0 4px var(--mv-ring);
  }

  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }
  [data-theme="light"] { color-scheme: light; }
  [data-theme="dark"]  { color-scheme: dark; }

  @media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="full"]) {
      --mv-motion: 0;
      --mv-duration-instant: 1ms;
      --mv-duration-fast: 1ms;
      --mv-duration-normal: 1ms;
      --mv-duration-slow: 1ms;
      --mv-duration-slower: 1ms;
    }
  }
  :root[data-motion="reduce"] {
    --mv-motion: 0;
    --mv-duration-instant: 1ms;
    --mv-duration-fast: 1ms;
    --mv-duration-normal: 1ms;
    --mv-duration-slow: 1ms;
    --mv-duration-slower: 1ms;
  }
}

/* core/base.css */
/*
 * Marvelous UI — base layer (opt-in, light reset + shared helpers).
 * Requires tokens/tokens.css.
 */
@layer mv.reset {
  *, *::before, *::after { box-sizing: border-box; }
  :where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  :where(body) { margin: 0; }
  :where(img, svg, video, canvas) { display: block; max-width: 100%; }
  :where(button, input, select, textarea) { font: inherit; color: inherit; }
}

@layer mv.base {
  :where(html) {
    font-family: var(--mv-font-sans);
    line-height: var(--mv-leading-normal);
    color: var(--mv-fg);
    background: var(--mv-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  ::selection { background: var(--mv-selection); }

  /* Custom elements are inline by default — make the undefined state inert-ish. */
  :where(:not(:defined)[data-mv-cloak]) { visibility: hidden; }

}

@layer mv.utilities {
  .mv-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
  .mv-focus-ring:focus-visible { outline: none; box-shadow: var(--mv-focus-ring); }
}

/* components/button/button.css */
@layer mv.components {
  :where(.mv-button) {
    --_bg: var(--mv-accent);
    --_bg-hover: var(--mv-accent-hover);
    --_bg-active: var(--mv-accent-active);
    --_fg: var(--mv-fg-on-accent);
    --_border: transparent;
    --_h: var(--mv-control-md);
    --_px: var(--mv-space-4);
    --_fs: var(--mv-text-sm);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mv-space-2);
    height: var(--_h);
    padding: 0 var(--_px);
    border: 1px solid var(--_border);
    border-radius: var(--mv-button-radius, var(--mv-radius-md));
    background: var(--_bg);
    color: var(--_fg);
    font: var(--mv-weight-medium) var(--_fs) / 1 var(--mv-font-sans);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color var(--mv-duration-fast) var(--mv-ease-out),
      border-color var(--mv-duration-fast) var(--mv-ease-out),
      color var(--mv-duration-fast) var(--mv-ease-out),
      box-shadow var(--mv-duration-fast) var(--mv-ease-out),
      transform var(--mv-duration-instant) var(--mv-ease-out);
  }
  :where(.mv-button):hover { background: var(--_bg-hover); }
  :where(.mv-button):active:not(:disabled, [aria-disabled="true"]) { background: var(--_bg-active); transform: scale(0.98); }
  :where(.mv-button):focus-visible { outline: none; box-shadow: var(--mv-focus-ring); }
  :where(.mv-button):is(:disabled, [aria-disabled="true"]) { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
  :where(.mv-button) :where(svg) { width: 1em; height: 1em; flex-shrink: 0; font-size: 1.15em; }

  /* Variants */
  :where(.mv-button[data-variant="secondary"]) {
    --_bg: var(--mv-bg-muted); --_bg-hover: var(--mv-bg-emphasis);
    --_bg-active: color-mix(in oklch, var(--mv-bg-emphasis), var(--mv-fg) 8%); --_fg: var(--mv-fg);
  }
  :where(.mv-button[data-variant="outline"]) {
    --_bg: var(--mv-bg); --_bg-hover: var(--mv-bg-muted); --_bg-active: var(--mv-bg-emphasis);
    --_fg: var(--mv-fg); --_border: var(--mv-border-strong);
    box-shadow: var(--mv-shadow-xs);
  }
  :where(.mv-button[data-variant="ghost"]) {
    --_bg: transparent; --_bg-hover: var(--mv-bg-muted); --_bg-active: var(--mv-bg-emphasis); --_fg: var(--mv-fg);
  }
  :where(.mv-button[data-variant="destructive"]) {
    --_bg: var(--mv-danger); --_bg-hover: color-mix(in oklch, var(--mv-danger), black 12%);
    --_bg-active: color-mix(in oklch, var(--mv-danger), black 22%); --_fg: white;
  }
  :where(.mv-button[data-variant="link"]) {
    --_bg: transparent; --_bg-hover: transparent; --_bg-active: transparent; --_fg: var(--mv-accent-fg);
    height: auto; padding: 0; text-underline-offset: 4px;
  }
  :where(.mv-button[data-variant="link"]):hover { text-decoration: underline; }

  /* Sizes */
  :where(.mv-button[data-size="sm"]) { --_h: var(--mv-control-sm); --_px: var(--mv-space-3); --_fs: var(--mv-text-xs); gap: var(--mv-space-1-5); }
  :where(.mv-button[data-size="lg"]) { --_h: var(--mv-control-lg); --_px: var(--mv-space-6); --_fs: var(--mv-text-base); }
  :where(.mv-button[data-size="icon"]) { --_px: 0; width: var(--_h); }
  :where(.mv-button[data-size="icon"][data-shape="round"]), :where(.mv-button[data-shape="pill"]) { border-radius: var(--mv-radius-full); }

  /* Loading: aria-busy="true" swaps content for a spinner, keeps width */
  :where(.mv-button[aria-busy="true"]) { color: transparent; pointer-events: none; }
  :where(.mv-button[aria-busy="true"])::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.1em; height: 1.1em;
    border: 2px solid var(--_fg);
    border-right-color: transparent;
    border-radius: 50%;
    animation: mv-button-spin 0.7s linear infinite;
  }
  @keyframes mv-button-spin { to { transform: rotate(1turn); } }

  /* Group: <div class="mv-button-group"> */
  :where(.mv-button-group) { display: inline-flex; isolation: isolate; }
  :where(.mv-button-group) > :where(.mv-button) { border-radius: 0; }
  :where(.mv-button-group) > :where(.mv-button):first-child { border-start-start-radius: var(--mv-radius-md); border-end-start-radius: var(--mv-radius-md); }
  :where(.mv-button-group) > :where(.mv-button):last-child { border-start-end-radius: var(--mv-radius-md); border-end-end-radius: var(--mv-radius-md); }
  :where(.mv-button-group) > :where(.mv-button + .mv-button) { margin-inline-start: -1px; }
  :where(.mv-button-group) > :where(.mv-button):focus-visible { z-index: 1; }
}

/* components/badge/badge.css */
@layer mv.components {
  /* ── Badge ──────────────────────────────────────────────────────────
     Private knobs: --_bg / --_fg / --_bd colors, --_tone (semantic base
     color), --_h height, --_px inline padding, --_fs font size. */
  :where(.mv-badge) {
    --_tone: var(--mv-accent);
    --_bg: var(--mv-accent);
    --_bg-hover: var(--mv-accent-hover);
    --_fg: var(--mv-fg-on-accent);
    --_bd: transparent;
    --_h: 1.375rem;
    --_px: 0.5rem;
    --_fs: var(--mv-text-xs);
    --_radius: var(--mv-badge-radius, var(--mv-radius-sm));

    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3125rem;
    min-width: var(--_h);
    height: var(--_h);
    padding: 0 var(--_px);
    border: 1px solid var(--_bd);
    border-radius: var(--_radius);
    background: var(--_bg);
    color: var(--_fg);
    font: var(--mv-weight-medium) var(--_fs) / 1 var(--mv-font-sans);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    vertical-align: middle;
    text-decoration: none;
    transition:
      background-color var(--mv-duration-fast) var(--mv-ease-out),
      border-color var(--mv-duration-fast) var(--mv-ease-out),
      color var(--mv-duration-fast) var(--mv-ease-out),
      box-shadow var(--mv-duration-fast) var(--mv-ease-out);
  }
  :where(.mv-badge) :where(svg) { width: 0.75rem; height: 0.75rem; flex-shrink: 0; }
  :where(a.mv-badge, button.mv-badge) { cursor: pointer; }
  :where(a.mv-badge, button.mv-badge):hover { background: var(--_bg-hover); }
  :where(a.mv-badge, button.mv-badge):focus-visible { outline: none; box-shadow: var(--mv-focus-ring); }
  :where(button.mv-badge) { font-family: var(--mv-font-sans); }

  /* ── Variants ─────────────────────────────────────────────────────── */
  :where(.mv-badge[data-variant="secondary"]) {
    --_bg: var(--mv-bg-muted);
    --_bg-hover: var(--mv-bg-emphasis);
    --_fg: var(--mv-fg);
    --_bd: color-mix(in oklch, var(--mv-border) 60%, transparent);
  }
  :where(.mv-badge[data-variant="outline"]) {
    --_bg: transparent;
    --_bg-hover: var(--mv-bg-muted);
    --_fg: var(--mv-fg);
    --_bd: var(--mv-border-strong);
  }
  /* Semantic: soft tint by default, text shifted toward --mv-fg for contrast */
  :where(.mv-badge:is([data-variant="success"], [data-variant="warning"], [data-variant="danger"], [data-variant="info"])) {
    --_bg: color-mix(in oklch, var(--_tone) 13%, transparent);
    --_bg-hover: color-mix(in oklch, var(--_tone) 22%, transparent);
    --_fg: color-mix(in oklch, var(--_tone), var(--mv-fg) 28%);
    --_bd: color-mix(in oklch, var(--_tone) 24%, transparent);
  }
  :where(.mv-badge[data-variant="success"]) { --_tone: var(--mv-success); }
  :where(.mv-badge[data-variant="warning"]) { --_tone: var(--mv-warning); }
  :where(.mv-badge[data-variant="danger"]) { --_tone: var(--mv-danger); }
  :where(.mv-badge[data-variant="info"]) { --_tone: var(--mv-info); }
  :where(.mv-badge[data-variant="warning"]) { --_fg: color-mix(in oklch, var(--_tone), var(--mv-fg) 42%); }

  /* Solid semantic (counters, strong status) */
  :where(.mv-badge[data-appearance="solid"]) {
    --_bg: var(--_tone);
    --_bg-hover: color-mix(in oklch, var(--_tone), black 12%);
    --_fg: var(--mv-fg-on-accent);
    --_bd: transparent;
  }
  :where(.mv-badge[data-appearance="solid"][data-variant="warning"]) { --_fg: var(--mv-gray-950); }

  /* ── Shapes & sizes ──────────────────────────────────────────────── */
  :where(.mv-badge[data-shape="pill"]) { --_radius: var(--mv-radius-full); }
  :where(.mv-badge[data-shape="square"]) { --_radius: 0.125rem; }
  :where(.mv-badge[data-size="sm"]) { --_h: 1.125rem; --_px: 0.375rem; --_fs: 0.6875rem; gap: 0.25rem; }
  :where(.mv-badge[data-size="sm"]) :where(svg) { width: 0.625rem; height: 0.625rem; }
  :where(.mv-badge[data-size="lg"]) { --_h: 1.625rem; --_px: 0.625rem; --_fs: 0.8125rem; gap: 0.375rem; }
  :where(.mv-badge[data-size="lg"]) :where(svg) { width: 0.875rem; height: 0.875rem; }

  /* ── Parts ────────────────────────────────────────────────────────── */
  /* Status dot: inherits the semantic tone, or --mv-badge-dot */
  :where(.mv-badge-dot) {
    position: relative;
    flex-shrink: 0;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--mv-badge-dot, var(--_tone));
  }
  :where(.mv-badge:not([data-variant]), .mv-badge[data-appearance="solid"]) :where(.mv-badge-dot) { background: var(--mv-badge-dot, currentColor); }
  :where(.mv-badge[data-variant="secondary"], .mv-badge[data-variant="outline"]) :where(.mv-badge-dot) { background: var(--mv-badge-dot, var(--mv-fg-subtle)); }
  /* Live pulse */
  :where(.mv-badge-dot[data-pulse])::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    animation: mv-badge-pulse 1.6s var(--mv-ease-out) infinite;
  }
  @keyframes mv-badge-pulse {
    from { opacity: 0.7; scale: 1; }
    to { opacity: 0; scale: 2.8; }
  }
  @media (prefers-reduced-motion: reduce) { :where(.mv-badge-dot[data-pulse])::after { animation: none; } }
  :where([data-motion="reduce"]) :where(.mv-badge-dot[data-pulse])::after { animation: none; }

  /* Remove button inside a badge */
  :where(.mv-badge-remove) {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: calc(var(--_h) - 0.375rem);
    height: calc(var(--_h) - 0.375rem);
    margin-inline: -0.0625rem calc(0.1875rem - var(--_px));
    padding: 0;
    border: 0;
    border-radius: calc(var(--_radius) - 0.125rem);
    background: transparent;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    transition:
      opacity var(--mv-duration-fast) var(--mv-ease-out),
      background-color var(--mv-duration-fast) var(--mv-ease-out);
  }
  :where(.mv-badge-remove) :where(svg) { width: 0.625rem; height: 0.625rem; }
  :where(.mv-badge-remove):hover { opacity: 1; background: color-mix(in oklch, currentColor 14%, transparent); }
  :where(.mv-badge-remove):focus-visible { outline: none; opacity: 1; box-shadow: 0 0 0 2px var(--mv-ring); }

  /* ── Positioned counter on an avatar / icon corner ───────────────── */
  :where(.mv-badge-anchor) { position: relative; display: inline-flex; flex-shrink: 0; }
  :where(.mv-badge[data-position]) {
    --_h: 1.125rem;
    --_px: 0.3125rem;
    --_fs: 0.6875rem;
    --_radius: var(--mv-radius-full);
    --_o: var(--mv-badge-offset, 0px);
    position: absolute;
    z-index: 1;
    border: 0;
    box-shadow: 0 0 0 2px var(--mv-badge-ring, var(--mv-bg));
    pointer-events: none;
    transition:
      scale var(--mv-duration-normal) var(--mv-ease-spring),
      opacity var(--mv-duration-fast) var(--mv-ease-out);
  }
  @starting-style { :where(.mv-badge[data-position]) { scale: 0.4; opacity: 0; } }
  :where(.mv-badge[data-position="top-right"]) { top: var(--_o); inset-inline-end: var(--_o); translate: 45% -45%; }
  :where(.mv-badge[data-position="top-left"]) { top: var(--_o); inset-inline-start: var(--_o); translate: -45% -45%; }
  :where(.mv-badge[data-position="bottom-right"]) { bottom: var(--_o); inset-inline-end: var(--_o); translate: 45% 45%; }
  :where(.mv-badge[data-position="bottom-left"]) { bottom: var(--_o); inset-inline-start: var(--_o); translate: -45% 45%; }
  /* Empty positioned badge = dot indicator (unread, presence) */
  :where(.mv-badge[data-position]:empty) { --_h: 0.625rem; min-width: 0; width: var(--_h); padding: 0; }
  :where(.mv-badge[data-position="top-right"]:empty) { translate: 20% -20%; }
  :where(.mv-badge[data-position="top-left"]:empty) { translate: -20% -20%; }
  :where(.mv-badge[data-position^="bottom"]:empty) { translate: 0 0; }
}

/* components/card/card.css */
@layer mv.components {
  :where(.mv-card) {
    --_pad: var(--mv-card-padding, var(--mv-space-6));
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-card-radius, var(--mv-radius-xl));
    background: var(--mv-surface);
    color: var(--mv-fg);
    box-shadow: var(--mv-shadow-xs);
    overflow: clip;
  }
  :where(.mv-card[data-variant="elevated"]) { border-color: transparent; box-shadow: var(--mv-shadow-lg); }
  :where(.mv-card[data-variant="ghost"]) { border-color: transparent; background: transparent; box-shadow: none; }
  :where(.mv-card[data-variant="muted"]) { background: var(--mv-bg-subtle); box-shadow: none; }
  :where(.mv-card[data-size="sm"]) { --_pad: var(--mv-space-4); }

  /* Interactive: whole card clickable via a stretched link/button */
  :where(.mv-card[data-interactive]) {
    transition: transform var(--mv-duration-normal) var(--mv-ease-out), box-shadow var(--mv-duration-normal) var(--mv-ease-out), border-color var(--mv-duration-fast);
  }
  :where(.mv-card[data-interactive]):hover { transform: translateY(calc(-2px * var(--mv-motion))); box-shadow: var(--mv-shadow-lg); border-color: var(--mv-border-strong); }
  :where(.mv-card[data-interactive]):has(:focus-visible) { box-shadow: var(--mv-focus-ring); }
  :where(.mv-card-link)::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  :where(.mv-card-link) { color: inherit; text-decoration: none; outline: none; }

  :where(.mv-card-media) { margin: 0; aspect-ratio: var(--mv-card-media-ratio, 16 / 9); background: var(--mv-bg-muted); overflow: hidden; }
  :where(.mv-card-media) > :where(img, video) { width: 100%; height: 100%; object-fit: cover; }
  :where(.mv-card[data-interactive]) :where(.mv-card-media > img) { transition: scale var(--mv-duration-slow) var(--mv-ease-out); }
  :where(.mv-card[data-interactive]:hover) :where(.mv-card-media > img) { scale: calc(1 + 0.04 * var(--mv-motion)); }

  :where(.mv-card-header) { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: var(--mv-space-1) var(--mv-space-4); padding: var(--_pad) var(--_pad) 0; }
  :where(.mv-card-header):last-child { padding-bottom: var(--_pad); }
  :where(.mv-card-title) { grid-column: 1; margin: 0; font-size: var(--mv-text-base); font-weight: var(--mv-weight-semibold); letter-spacing: -0.01em; line-height: var(--mv-leading-snug); }
  :where(.mv-card-description) { grid-column: 1; margin: 0; font-size: var(--mv-text-sm); color: var(--mv-fg-muted); }
  :where(.mv-card-action) { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: relative; z-index: 2; }
  :where(.mv-card-content) { padding: var(--_pad); flex: 1; font-size: var(--mv-text-sm); }
  :where(.mv-card-header + .mv-card-content) { padding-top: var(--mv-space-4); }
  :where(.mv-card-footer) { display: flex; align-items: center; gap: var(--mv-space-2); padding: 0 var(--_pad) var(--_pad); position: relative; z-index: 2; }
  :where(.mv-card-footer[data-bordered]) { padding-top: var(--mv-space-4); border-top: 1px solid var(--mv-border); background: var(--mv-bg-subtle); }
  :where(.mv-card-content + .mv-card-footer[data-bordered]) { margin-top: 0; }

  /* Stat card helper */
  :where(.mv-card-stat) { font-size: var(--mv-text-3xl); font-weight: var(--mv-weight-semibold); letter-spacing: var(--mv-tracking-tight); line-height: 1.1; font-variant-numeric: tabular-nums; }
  :where(.mv-card-trend) { font-size: var(--mv-text-xs); font-weight: var(--mv-weight-medium); color: var(--mv-success); }
  :where(.mv-card-trend[data-direction="down"]) { color: var(--mv-danger); }
}

/* components/kbd/kbd.css */
@layer mv.components {
  /* Keycap on <kbd>. Combos: <kbd class="mv-kbd-group"><kbd class="mv-kbd">⌘</kbd><kbd class="mv-kbd">K</kbd></kbd> */
  :where(.mv-kbd) {
    --_h: 1.25rem;
    --_fs: 0.6875rem;
    --_bg: var(--mv-kbd-bg, light-dark(var(--mv-gray-0), var(--mv-gray-800)));
    --_fg: var(--mv-kbd-fg, var(--mv-fg-muted));
    --_bd: var(--mv-kbd-border, light-dark(var(--mv-gray-200), oklch(1 0 0 / 0.1)));
    --_depth: var(--mv-kbd-depth, light-dark(var(--mv-gray-300), oklch(0 0 0 / 0.55)));

    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-width: var(--_h);
    height: var(--_h);
    padding: 0 0.3125rem;
    border: 1px solid var(--_bd);
    border-radius: var(--mv-kbd-radius, var(--mv-radius-xs));
    background: var(--_bg);
    color: var(--_fg);
    font: var(--mv-weight-medium) var(--_fs) / 1 var(--mv-font-sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    /* Subtle 3D: darker bottom edge + inner top highlight */
    box-shadow:
      inset 0 -1px 0 var(--_depth),
      inset 0 1px 0 light-dark(oklch(1 0 0 / 0.9), oklch(1 0 0 / 0.06)),
      0 1px 1px light-dark(oklch(0.2 0.02 var(--mv-neutral-h) / 0.06), oklch(0 0 0 / 0.3));
    padding-bottom: 1px;
  }
  :where(.mv-kbd) :where(svg) { width: 0.75rem; height: 0.75rem; flex-shrink: 0; }

  /* Sizes */
  :where(.mv-kbd[data-size="sm"]) { --_h: 1rem; --_fs: 0.625rem; padding-inline: 0.25rem; }
  :where(.mv-kbd[data-size="lg"]) { --_h: 1.75rem; --_fs: var(--mv-text-sm); padding-inline: 0.5rem; border-radius: var(--mv-kbd-radius, var(--mv-radius-sm)); }
  :where(.mv-kbd[data-size="lg"]) :where(svg) { width: 0.875rem; height: 0.875rem; }

  /* Flat: no depth, tinted — for dense UIs (menus, command palettes) */
  :where(.mv-kbd[data-variant="flat"]) {
    --_bg: var(--mv-bg-muted);
    --_bd: transparent;
    box-shadow: none;
    padding-bottom: 0;
  }

  /* Group: nested <kbd> keys, "+" or "then" text in between stays muted */
  :where(.mv-kbd-group) {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    color: var(--mv-fg-subtle);
    font: var(--mv-weight-normal) var(--mv-text-xs) / 1 var(--mv-font-sans);
    white-space: nowrap;
    vertical-align: middle;
  }

  /* Contextual: keys on inverted/colored surfaces (primary buttons, tooltips) */
  :where(.mv-button:not([data-variant]), .mv-button[data-variant="destructive"], .mv-tooltip) :where(.mv-kbd) {
    --_bg: oklch(1 0 0 / 0.16);
    --_fg: currentColor;
    --_bd: oklch(1 0 0 / 0.14);
    box-shadow: none;
    padding-bottom: 0;
  }
  :where(.mv-tooltip) :where(.mv-kbd) {
    --_bg: color-mix(in oklch, currentColor 14%, transparent);
    --_bd: color-mix(in oklch, currentColor 12%, transparent);
  }
  :where(.mv-button) :where(.mv-kbd, .mv-kbd-group) { margin-inline-start: var(--mv-space-1); color: inherit; }
  :where(.mv-button) :where(.mv-kbd-group) :where(.mv-kbd) { margin: 0; }
  :where(.mv-button[data-variant="outline"], .mv-button[data-variant="secondary"], .mv-button[data-variant="ghost"]) :where(.mv-kbd) { --_fg: var(--mv-fg-muted); }
}

/* components/separator/separator.css */
@layer mv.components {
  /* ── Separator ──────────────────────────────────────────────────────
     <hr class="mv-separator"> (horizontal) or
     <div class="mv-separator" role="separator" aria-orientation="vertical" data-orientation="vertical">.
     With text content it becomes a labelled divider: line — label — line. */
  :where(.mv-separator) {
    --_c: var(--mv-separator-color, var(--mv-border));
    --_t: var(--mv-separator-thickness, 1px);
    --_style: solid;

    box-sizing: border-box;
    flex-shrink: 0;
    align-self: stretch;
    width: auto;
    height: 0;
    margin: var(--mv-separator-spacing, 0) 0;
    padding: 0;
    border: 0;
    border-top: var(--_t) var(--_style) var(--_c);
    color: var(--mv-fg-subtle);
  }

  /* Vertical */
  :where(.mv-separator[data-orientation="vertical"]) {
    width: 0;
    height: auto;
    min-height: 1em;
    margin: 0 var(--mv-separator-spacing, 0);
    border-top: 0;
    border-inline-start: var(--_t) var(--_style) var(--_c);
  }

  /* Styles */
  :where(.mv-separator[data-variant="dashed"]) { --_style: dashed; }
  :where(.mv-separator[data-variant="dotted"]) { --_style: dotted; --_t: var(--mv-separator-thickness, 2px); }
  /* Fades out at both ends */
  :where(.mv-separator[data-variant="fade"]) {
    border: 0;
    height: var(--_t);
    background: linear-gradient(90deg, transparent, var(--_c) 20%, var(--_c) 80%, transparent);
  }
  :where(.mv-separator[data-variant="fade"][data-orientation="vertical"]) {
    width: var(--_t);
    height: auto;
    background: linear-gradient(180deg, transparent, var(--_c) 20%, var(--_c) 80%, transparent);
  }

  /* Labelled: any content (text, icon, badge) sits between two lines */
  :where(.mv-separator:not(:empty, hr)) {
    display: flex;
    align-items: center;
    gap: var(--mv-space-3);
    height: auto;
    border: 0;
    background: none;
    font: var(--mv-weight-medium) var(--mv-text-xs) / 1 var(--mv-font-sans);
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  :where(.mv-separator:not(:empty, hr))::before,
  :where(.mv-separator:not(:empty, hr))::after {
    content: "";
    flex: 1;
    min-width: var(--mv-space-4);
    border-top: var(--_t) var(--_style) var(--_c);
  }
  :where(.mv-separator:not(:empty, hr)[data-variant="fade"])::before { border: 0; height: var(--_t); background: linear-gradient(90deg, transparent, var(--_c)); }
  :where(.mv-separator:not(:empty, hr)[data-variant="fade"])::after { border: 0; height: var(--_t); background: linear-gradient(90deg, var(--_c), transparent); }
  :where(.mv-separator:not(:empty, hr)[data-align="start"])::before { flex: 0 0 var(--mv-space-4); }
  :where(.mv-separator:not(:empty, hr)[data-align="end"])::after { flex: 0 0 var(--mv-space-4); }
  :where(.mv-separator:not(:empty, hr)) :where(svg) { width: 0.875rem; height: 0.875rem; }

  /* Labelled vertical: lines above and below */
  :where(.mv-separator:not(:empty, hr)[data-orientation="vertical"]) {
    flex-direction: column;
    gap: var(--mv-space-2);
    width: auto;
    min-height: 4rem;
    border: 0;
  }
  :where(.mv-separator:not(:empty, hr)[data-orientation="vertical"])::before,
  :where(.mv-separator:not(:empty, hr)[data-orientation="vertical"])::after {
    min-width: 0;
    min-height: var(--mv-space-4);
    border-top: 0;
    border-inline-start: var(--_t) var(--_style) var(--_c);
  }
}

/* components/accordion/accordion.css */
@layer mv.components {
  /*
   * Accordion / Collapsible on native <details>.
   * Height animates with ::details-content + interpolate-size; browsers
   * without them simply open instantly.
   */
  :where(mv-accordion) { display: block; }

  :where(.mv-accordion) {
    --_px: 0px;
    display: flex;
    flex-direction: column;
    color: var(--mv-fg);
  }

  :where(.mv-accordion-item, .mv-collapsible) {
    interpolate-size: allow-keywords;
  }
  :where(.mv-accordion-item) {
    border-bottom: 1px solid var(--mv-border);
  }
  :where(.mv-accordion-item:last-child) { border-bottom: 0; }

  /* ── Trigger ─────────────────────────────────────────────── */
  :where(.mv-accordion-item) > :where(summary) {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--mv-space-3);
    padding: var(--mv-space-4) var(--_px, 0px);
    border-radius: var(--mv-radius-sm);
    font-size: var(--mv-text-sm);
    font-weight: var(--mv-weight-medium);
    line-height: var(--mv-leading-snug);
    list-style: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--mv-duration-fast) var(--mv-ease-out);
  }
  :where(.mv-accordion-item, .mv-collapsible) > :where(summary)::-webkit-details-marker { display: none; }
  :where(.mv-collapsible) > :where(summary) { list-style: none; cursor: pointer; width: fit-content; }
  :where(.mv-accordion-item) > :where(summary):hover { color: color-mix(in oklab, var(--mv-fg) 80%, var(--mv-accent)); }
  :where(.mv-accordion-item, .mv-collapsible) > :where(summary):focus-visible { outline: none; box-shadow: var(--mv-focus-ring); z-index: 1; }
  :where(.mv-accordion-item) > :where(summary) > :where(svg:not(.mv-accordion-chevron)) { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--mv-fg-muted); }

  /* Optional two-line header */
  :where(.mv-accordion-heading) { display: grid; gap: 2px; flex: 1; min-width: 0; }
  :where(.mv-accordion-subtitle) { color: var(--mv-fg-muted); font-weight: var(--mv-weight-normal); font-size: var(--mv-text-xs); }

  /* Chevron drawn by CSS (mask), pushed to the end */
  :where(.mv-accordion-item) > :where(summary)::after {
    content: "";
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-inline-start: auto;
    background: var(--mv-fg-muted);
    -webkit-mask: var(--_chevron) center / contain no-repeat;
    mask: var(--_chevron) center / contain no-repeat;
    transition: rotate var(--mv-duration-normal) var(--mv-ease-out), background-color var(--mv-duration-fast);
    --_chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
  :where(.mv-accordion-item[open]) > :where(summary)::after { rotate: 180deg; background: var(--mv-fg); }

  /* data-icon="plus" on the accordion (or item): plus that morphs into a minus */
  :where(.mv-accordion[data-icon="plus"] .mv-accordion-item, .mv-accordion-item[data-icon="plus"]) > :where(summary)::after {
    -webkit-mask: none;
    mask: none;
    background:
      linear-gradient(currentColor, currentColor) center / 0.75rem 1.5px no-repeat,
      linear-gradient(currentColor, currentColor) center / 1.5px 0.75rem no-repeat;
    color: var(--mv-fg-muted);
    transition: rotate var(--mv-duration-normal) var(--mv-ease-out), background-size var(--mv-duration-normal) var(--mv-ease-out), color var(--mv-duration-fast);
  }
  :where(.mv-accordion[data-icon="plus"] .mv-accordion-item[open], .mv-accordion-item[data-icon="plus"][open]) > :where(summary)::after {
    rotate: 180deg;
    background-size: 0.75rem 1.5px, 1.5px 0;
    background-color: transparent;
    color: var(--mv-fg);
  }
  /* data-icon="start": indicator before the label */
  :where(.mv-accordion[data-icon="start"] .mv-accordion-item) > :where(summary)::after { order: -1; margin-inline-start: 0; rotate: -90deg; }
  :where(.mv-accordion[data-icon="start"] .mv-accordion-item[open]) > :where(summary)::after { rotate: 0deg; }
  :where(.mv-accordion[data-icon="none"] .mv-accordion-item) > :where(summary)::after { display: none; }

  /* Chevron for collapsibles / custom triggers */
  :where(.mv-accordion-chevron) { width: 1rem; height: 1rem; flex-shrink: 0; transition: rotate var(--mv-duration-normal) var(--mv-ease-out); }
  :where(details[open]) > :where(summary) :where(.mv-accordion-chevron) { rotate: 180deg; }

  /* ── Panel ───────────────────────────────────────────────── */
  :where(.mv-accordion-content) {
    padding: 0 var(--_px, 0px) var(--mv-space-4);
    color: var(--mv-fg-muted);
    font-size: var(--mv-text-sm);
    line-height: var(--mv-leading-normal);
    transition:
      opacity var(--mv-duration-normal) var(--mv-ease-out),
      translate var(--mv-duration-normal) var(--mv-ease-out),
      filter var(--mv-duration-normal) var(--mv-ease-out);
  }
  :where(.mv-accordion-content) > :where(:first-child) { margin-top: 0; }
  :where(.mv-accordion-content) > :where(:last-child) { margin-bottom: 0; }
  :where(details:not([open])) > :where(.mv-accordion-content) {
    opacity: 0;
    translate: 0 calc(-4px * var(--mv-motion));
    filter: blur(2px);
  }
  @starting-style {
    :where(details[open]) > :where(.mv-accordion-content) {
      opacity: 0;
      translate: 0 calc(-4px * var(--mv-motion));
      filter: blur(2px);
    }
  }

  @supports selector(::details-content) {
    :where(.mv-accordion-item, .mv-collapsible)::details-content {
      block-size: 0;
      overflow-y: clip;
      transition:
        block-size var(--mv-duration-normal) var(--mv-ease-out),
        content-visibility var(--mv-duration-normal) allow-discrete;
    }
    :where(.mv-accordion-item[open], .mv-collapsible[open])::details-content { block-size: auto; }
  }

  /* ── Variant: bordered (one outlined box) ────────────────── */
  :where(.mv-accordion[data-variant="bordered"]) {
    --_px: var(--mv-space-4);
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius-lg);
    background: var(--mv-surface);
    overflow: clip;
    overflow-clip-margin: 4px;
  }
  :where(.mv-accordion[data-variant="bordered"]) :where(.mv-accordion-item) > :where(summary) { border-radius: 0; }
  :where(.mv-accordion[data-variant="bordered"]) :where(.mv-accordion-item) > :where(summary):hover { background: var(--mv-bg-subtle); color: var(--mv-fg); }
  :where(.mv-accordion[data-variant="bordered"]) :where(.mv-accordion-item) > :where(summary):focus-visible { box-shadow: inset 0 0 0 2px var(--mv-ring); }

  /* ── Variant: separated (individual outlined boxes) ─────── */
  :where(.mv-accordion[data-variant="separated"]) { --_px: var(--mv-space-4); gap: var(--mv-space-2); }
  :where(.mv-accordion[data-variant="separated"]) :where(.mv-accordion-item) {
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius-lg);
    background: var(--mv-surface);
    transition: border-color var(--mv-duration-fast) var(--mv-ease-out);
  }
  :where(.mv-accordion[data-variant="separated"]) :where(.mv-accordion-item) > :where(summary) { border-radius: calc(var(--mv-radius-lg) - 1px); }
  :where(.mv-accordion[data-variant="separated"]) :where(.mv-accordion-item[open]) { border-color: var(--mv-border-strong); }

  /* ── Variant: card (filled tiles, the open one lifts) ────── */
  :where(.mv-accordion[data-variant="card"]) { --_px: var(--mv-space-5); gap: var(--mv-space-2); }
  :where(.mv-accordion[data-variant="card"]) :where(.mv-accordion-item) {
    border: 1px solid transparent;
    border-radius: var(--mv-radius-xl);
    background: var(--mv-bg-muted);
    transition:
      background-color var(--mv-duration-normal) var(--mv-ease-out),
      border-color var(--mv-duration-normal) var(--mv-ease-out),
      box-shadow var(--mv-duration-normal) var(--mv-ease-out);
  }
  :where(.mv-accordion[data-variant="card"]) :where(.mv-accordion-item) > :where(summary) { border-radius: calc(var(--mv-radius-xl) - 1px); }
  :where(.mv-accordion[data-variant="card"]) :where(.mv-accordion-item[open]) {
    border-color: var(--mv-border);
    background: var(--mv-surface-raised);
    box-shadow: var(--mv-shadow-md);
  }
}

/* components/tabs/tabs.css */
@layer mv.components {
  /* ── Host: tab list on top (or left), panels stacked in one cell ── */
  :where(mv-tabs) {
    --_h: var(--mv-control-md);
    --_radius: var(--mv-tabs-radius, var(--mv-radius-md));
    --_pad: 3px;
    --_ind-bg: var(--mv-tabs-indicator, light-dark(var(--mv-bg), var(--mv-bg-emphasis)));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "list" "panels";
    align-content: start;
    gap: var(--mv-space-4);
  }
  :where(mv-tabs[orientation="vertical"]) {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "list panels";
    align-items: start;
    gap: var(--mv-space-6);
  }
  :where(mv-tabs[data-size="sm"]) { --_h: var(--mv-control-sm); }
  :where(mv-tabs[data-size="lg"]) { --_h: var(--mv-control-lg); }

  /* ── Tab list ─────────────────────────────────────────────── */
  :where(mv-tabs) > :where([role="tablist"]) {
    grid-area: list;
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-self: start;
    gap: 2px;
    max-width: 100%;
    min-height: var(--_h);
    padding: var(--_pad);
    border-radius: var(--_radius);
    background: var(--mv-bg-muted);
  }
  :where(mv-tabs[orientation="vertical"]) > :where([role="tablist"]) {
    flex-direction: column;
    align-items: stretch;
  }
  :where(mv-tabs[data-stretch]) > :where([role="tablist"]) { justify-self: stretch; }
  :where(mv-tabs[data-stretch]) > :where([role="tablist"]) > :where([role="tab"]) { flex: 1 1 0; }

  /* ── Tab ──────────────────────────────────────────────────── */
  :where(mv-tabs) > :where([role="tablist"]) > :where([role="tab"]) {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mv-space-2);
    height: calc(var(--_h) - var(--_pad) * 2);
    padding: 0 var(--mv-space-3);
    border: 0;
    border-radius: calc(var(--_radius) - var(--_pad));
    background: none;
    color: var(--mv-fg-muted);
    font: var(--mv-weight-medium) var(--mv-text-sm) / 1 var(--mv-font-sans);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--mv-duration-fast) var(--mv-ease-out), background-color var(--mv-duration-fast) var(--mv-ease-out), box-shadow var(--mv-duration-fast) var(--mv-ease-out);
  }
  :where(mv-tabs[orientation="vertical"]) > :where([role="tablist"]) > :where([role="tab"]) { justify-content: flex-start; }
  :where(mv-tabs) > :where([role="tablist"]) > :where([role="tab"]:not([aria-selected="true"], :disabled, [aria-disabled="true"])):hover { color: var(--mv-fg); }
  :where(mv-tabs) > :where([role="tablist"]) > :where([role="tab"][aria-selected="true"]) { color: var(--mv-fg); }
  :where(mv-tabs) > :where([role="tablist"]) > :where([role="tab"]):focus-visible { outline: none; box-shadow: var(--mv-focus-ring); z-index: 2; }
  :where(mv-tabs) > :where([role="tablist"]) > :where([role="tab"]):is(:disabled, [aria-disabled="true"]) { opacity: 0.45; cursor: not-allowed; }
  :where(mv-tabs) > :where([role="tablist"]) > :where([role="tab"]) :where(svg) { width: 1rem; height: 1rem; flex-shrink: 0; opacity: 0.85; }

  /* Count badge inside a tab */
  :where(.mv-tabs-count) {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 var(--mv-space-1-5);
    border-radius: var(--mv-radius-full);
    background: color-mix(in oklch, var(--mv-fg) 8%, transparent);
    color: var(--mv-fg-muted);
    font-size: 0.6875rem;
    font-weight: var(--mv-weight-semibold);
    font-variant-numeric: tabular-nums;
    transition: background-color var(--mv-duration-fast) var(--mv-ease-out), color var(--mv-duration-fast) var(--mv-ease-out);
  }
  :where([role="tab"][aria-selected="true"]) :where(.mv-tabs-count) { background: var(--mv-accent-subtle); color: var(--mv-accent-fg); }

  /* ── Sliding indicator (positioned by JS through CSS vars) ── */
  :where(.mv-tabs-indicator) {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: var(--mv-tabs-w, 0);
    height: var(--mv-tabs-h, 0);
    translate: var(--mv-tabs-x, 0) var(--mv-tabs-y, 0);
    border-radius: calc(var(--_radius) - var(--_pad));
    background: var(--_ind-bg);
    box-shadow: var(--mv-shadow-sm), 0 0 0 1px color-mix(in oklch, var(--mv-border) 70%, transparent);
    pointer-events: none;
    opacity: 0;
    transition:
      translate var(--mv-duration-normal) var(--mv-ease-out),
      width var(--mv-duration-normal) var(--mv-ease-out),
      height var(--mv-duration-normal) var(--mv-ease-out),
      opacity var(--mv-duration-fast) var(--mv-ease-out);
  }
  :where(.mv-tabs-indicator[data-ready]) { opacity: 1; }
  :where(.mv-tabs-indicator[data-instant]) { transition: none; }

  /* ── Variant: pill ────────────────────────────────────────── */
  :where(mv-tabs[data-variant="pill"]) {
    --_pad: 0px;
    --_radius: var(--mv-radius-full);
    --_ind-bg: var(--mv-tabs-indicator, var(--mv-accent-subtle));
  }
  :where(mv-tabs[data-variant="pill"]) > :where([role="tablist"]) { background: none; gap: var(--mv-space-1); }
  :where(mv-tabs[data-variant="pill"]) > :where([role="tablist"]) > :where([role="tab"]) { padding: 0 var(--mv-space-4); }
  :where(mv-tabs[data-variant="pill"]) > :where([role="tablist"]) > :where([role="tab"][aria-selected="true"]) { color: var(--mv-accent-fg); }
  :where(mv-tabs[data-variant="pill"]) > :where([role="tablist"]) > :where([role="tab"]:not([aria-selected="true"], :disabled, [aria-disabled="true"])):hover { background: var(--mv-bg-muted); }
  :where(mv-tabs[data-variant="pill"]) > :where([role="tablist"]) > :where(.mv-tabs-indicator) { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--mv-accent) 22%, transparent); }

  /* ── Variant: underline ───────────────────────────────────── */
  :where(mv-tabs[data-variant="underline"]) {
    --_pad: 0px;
    --_h: 2.5rem;
    --_ind-bg: var(--mv-tabs-indicator, var(--mv-accent));
    gap: var(--mv-space-5);
  }
  :where(mv-tabs[data-variant="underline"]) > :where([role="tablist"]) {
    justify-self: stretch;
    gap: var(--mv-space-1);
    border-radius: 0;
    background: none;
    box-shadow: inset 0 -1px 0 var(--mv-border);
  }
  :where(mv-tabs[data-variant="underline"]) > :where([role="tablist"]) > :where([role="tab"]) { padding: 0 var(--mv-space-3); border-radius: var(--mv-radius-sm); }
  :where(mv-tabs[data-variant="underline"]) > :where([role="tablist"]) > :where([role="tab"]):focus-visible { box-shadow: inset 0 0 0 2px var(--mv-ring); }
  :where(mv-tabs[data-variant="underline"]) > :where([role="tablist"]) > :where(.mv-tabs-indicator) {
    top: auto;
    bottom: 0;
    height: 2px;
    translate: var(--mv-tabs-x, 0) 0;
    border-radius: 2px 2px 0 0;
    box-shadow: none;
  }
  /* Vertical underline → rail on the inline-start edge */
  :where(mv-tabs[data-variant="underline"][orientation="vertical"]) > :where([role="tablist"]) { box-shadow: inset 1px 0 0 var(--mv-border); padding-inline-start: var(--mv-space-2); gap: 2px; }
  :where(mv-tabs[data-variant="underline"][orientation="vertical"]) > :where([role="tablist"]) > :where([role="tab"]) { height: var(--mv-control-md); }
  :where(mv-tabs[data-variant="underline"][orientation="vertical"]) > :where([role="tablist"]) > :where(.mv-tabs-indicator) {
    bottom: auto;
    width: 2px;
    height: var(--mv-tabs-h, 0);
    translate: 0 var(--mv-tabs-y, 0);
    border-radius: 0 2px 2px 0;
  }

  /* ── Panels: cross-fade (outgoing keeps display during its fade) ── */
  :where(mv-tabs) > :where([role="tabpanel"]) {
    grid-area: panels;
    min-width: 0;
    border-radius: var(--mv-radius-md);
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
    transition:
      opacity var(--mv-duration-normal) var(--mv-ease-out),
      translate var(--mv-duration-normal) var(--mv-ease-out),
      filter var(--mv-duration-normal) var(--mv-ease-out),
      display var(--mv-duration-normal) allow-discrete;
  }
  :where(mv-tabs) > :where([role="tabpanel"][hidden]) {
    display: none;
    opacity: 0;
    filter: blur(2px);
    pointer-events: none;
    transition-duration: var(--mv-duration-fast);
  }
  @starting-style {
    :where(mv-tabs) > :where([role="tabpanel"]:not([hidden])) {
      opacity: 0;
      translate: 0 calc(4px * var(--mv-motion));
      filter: blur(2px);
    }
  }
  :where(mv-tabs) > :where([role="tabpanel"]):focus-visible { outline: none; box-shadow: var(--mv-focus-ring); }

  /* Before upgrade, show only the first panel */
  :where(mv-tabs:not(:defined)) > :where([role="tabpanel"]:not(:nth-child(1 of [role="tabpanel"]))) { display: none; }
}

/* components/toast/toast.css */
@layer mv.components {
  :where(mv-toaster) { display: contents; }

  /* ── Region (top-layer popover pinned to a corner) ─────────── */
  :where(.mv-toaster) {
    --_w: var(--mv-toast-width, 22.25rem);
    --_edge: var(--mv-toaster-offset, 1.5rem);
    --_peek: var(--mv-toast-peek, 12px);
    --_lift: -1;
    --_dur: var(--mv-duration-slow);
    position: fixed;
    inset: auto;
    box-sizing: border-box;
    width: var(--_w);
    height: var(--_front-h, 0px);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mv-fg);
    font: var(--mv-weight-normal) var(--mv-text-sm) / 1.4 var(--mv-font-sans);
    overflow: visible;
    pointer-events: none;
    outline: none;
  }
  :where(.mv-toaster[data-y="bottom"]) { bottom: var(--_edge); }
  :where(.mv-toaster[data-y="top"]) { top: var(--_edge); --_lift: 1; }
  :where(.mv-toaster[data-x="right"]) { right: var(--_edge); }
  :where(.mv-toaster[data-x="left"]) { left: var(--_edge); }
  :where(.mv-toaster[data-x="center"]) { left: 0; right: 0; margin-inline: auto; }
  @media (max-width: 600px) {
    :where(.mv-toaster) { --_edge: 1rem; left: var(--_edge); right: var(--_edge); width: auto; margin-inline: 0; }
  }

  :where(.mv-toaster-list) {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* ── Toast card ────────────────────────────────────────────── */
  :where(.mv-toast) {
    /* Collapsed deck: each toast behind peeks out and shrinks by 5 %. */
    --_y: calc(var(--_lift) * var(--i, 0) * var(--_peek));
    --_s: calc(1 - var(--i, 0) * 0.05);
    --_tone: var(--mv-fg-muted);
    --_icon-fg: var(--mv-toast-bg, var(--mv-surface-raised));
    position: absolute;
    inset-inline: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--mv-space-3);
    height: var(--h, auto);
    padding: var(--mv-space-3-5, 0.875rem) var(--mv-space-4);
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-toast-radius, var(--mv-radius-lg));
    background: var(--mv-toast-bg, var(--mv-surface-raised));
    color: var(--mv-fg);
    box-shadow: var(--mv-shadow-lg);
    pointer-events: auto;
    outline: none;
    overflow-wrap: anywhere;
    touch-action: none;
    cursor: default;

    transform: translateY(var(--_y)) scale(var(--_s));
    translate: var(--swipe-x, 0px) var(--swipe-y, 0px);
    opacity: 1;
    transition:
      transform var(--_dur) var(--mv-ease-out),
      opacity var(--_dur) var(--mv-ease-out),
      height var(--_dur) var(--mv-ease-out),
      translate var(--mv-duration-normal) var(--mv-ease-out),
      box-shadow var(--mv-duration-fast) var(--mv-ease-out);
  }
  :where(.mv-toaster[data-y="bottom"] .mv-toast) { bottom: 0; transform-origin: 50% 0%; }
  :where(.mv-toaster[data-y="top"] .mv-toast) { top: 0; transform-origin: 50% 100%; }
  :where(.mv-toast):focus-visible { box-shadow: var(--mv-shadow-lg), var(--mv-focus-ring); }

  /* Bridge the gap between cards so hover survives the travel. */
  :where(.mv-toast)::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: calc(var(--_gap, 14px) + 2px);
  }
  :where(.mv-toaster[data-y="bottom"] .mv-toast)::after { bottom: 100%; }
  :where(.mv-toaster[data-y="top"] .mv-toast)::after { top: 100%; }

  /* Collapsed: cards behind take the front card's height and hide their content. */
  :where(.mv-toast) > * { transition: opacity var(--_dur) var(--mv-ease-out); }
  :where(.mv-toaster:not([data-expanded]) .mv-toast:not([data-front])) { height: var(--_front-h); }
  :where(.mv-toaster:not([data-expanded]) .mv-toast:not([data-front])) > * { opacity: 0; }

  /* Expanded (hover / focus / expand attribute): a real list. */
  :where(.mv-toaster[data-expanded] .mv-toast) { --_y: calc(var(--_lift) * var(--offset, 0px)); --_s: 1; }

  /* Beyond `max` */
  :where(.mv-toast[data-hidden]) { opacity: 0; pointer-events: none; }

  /* Enter: rise from the edge */
  :where(.mv-toast:not([data-mounted])) { --_y: calc(var(--_lift) * -100%); --_s: 1; opacity: 0; }

  /* Exit */
  :where(.mv-toast[data-removed]) { opacity: 0; pointer-events: none; }
  :where(.mv-toast[data-removed][data-front]) { --_y: calc(var(--_lift) * -100%); --_s: 1; }
  :where(.mv-toast[data-removed]:not([data-front])) { --_s: calc(1 - var(--i, 0) * 0.05 - 0.04); }
  :where(.mv-toast[data-removed="swipe"]) {
    --_y: calc(var(--_lift) * var(--offset, 0px));
    --_s: 1;
    transition-duration: var(--mv-duration-slow), var(--mv-duration-normal), var(--mv-duration-slow), var(--mv-duration-normal), var(--mv-duration-fast);
  }
  :where(.mv-toast[data-swiping]) {
    transition-property: transform, opacity, height, box-shadow;
    user-select: none;
    cursor: grabbing;
  }

  /* ── Parts ─────────────────────────────────────────────────── */
  :where(.mv-toast-icon) {
    display: flex;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
    color: var(--_tone);
  }
  :where(.mv-toast-icon) :where(svg) { width: 1rem; height: 1rem; }
  :where(.mv-toast-content) { display: grid; gap: 2px; flex: 1; min-width: 0; }
  :where(.mv-toast-title) { font-weight: var(--mv-weight-medium); line-height: 1.4; }
  :where(.mv-toast-description) { color: var(--mv-fg-muted); font-size: 0.8125rem; line-height: 1.45; }

  :where(.mv-toast-action, .mv-toast-cancel) {
    flex-shrink: 0;
    height: 1.75rem;
    padding: 0 var(--mv-space-2-5, 0.625rem);
    border: 0;
    border-radius: var(--mv-radius-sm);
    background: var(--mv-fg);
    color: var(--mv-bg);
    font: var(--mv-weight-medium) var(--mv-text-xs) / 1 var(--mv-font-sans);
    white-space: nowrap;
    cursor: pointer;
    transition: opacity var(--mv-duration-fast) var(--mv-ease-out), background-color var(--mv-duration-fast) var(--mv-ease-out);
  }
  :where(.mv-toast-action):hover { opacity: 0.88; }
  :where(.mv-toast-cancel) { background: var(--mv-bg-muted); color: var(--mv-fg); }
  :where(.mv-toast-cancel):hover { background: var(--mv-bg-emphasis); }
  :where(.mv-toast-action, .mv-toast-cancel):focus-visible { outline: none; box-shadow: var(--mv-focus-ring); }

  :where(.mv-toast-close) {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius-full);
    background: var(--mv-toast-bg, var(--mv-surface-raised));
    color: var(--mv-fg-muted);
    box-shadow: var(--mv-shadow-sm);
    translate: -35% -35%;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--mv-duration-fast) var(--mv-ease-out), color var(--mv-duration-fast), background-color var(--mv-duration-fast);
  }
  :where(.mv-toast-close) :where(svg) { width: 0.75rem; height: 0.75rem; }
  :where(.mv-toaster[data-x="left"] .mv-toast-close) { left: auto; right: 0; translate: 35% -35%; }
  :where(.mv-toast:is(:hover, :focus-within) .mv-toast-close) { opacity: 1; }
  :where(.mv-toast-close):hover { color: var(--mv-fg); background: var(--mv-bg-muted); }
  :where(.mv-toast-close):focus-visible { outline: none; opacity: 1; box-shadow: var(--mv-focus-ring); }
  @media (hover: none) { :where(.mv-toast-close) { opacity: 1; } }

  /* Loading spinner */
  :where(.mv-toast-spinner) {
    box-sizing: border-box;
    width: 1rem;
    height: 1rem;
    border: 2px solid color-mix(in oklab, var(--mv-fg) 18%, transparent);
    border-top-color: var(--mv-fg-muted);
    border-radius: 50%;
    animation: mv-toast-spin 0.75s linear infinite;
  }
  @keyframes mv-toast-spin { to { rotate: 1turn; } }
  @media (prefers-reduced-motion: reduce) { :where(.mv-toast-spinner) { animation: none; } }
  :where([data-motion="reduce"]) :where(.mv-toast-spinner) { animation: none; }

  /* ── Types ─────────────────────────────────────────────────── */
  :where(.mv-toast[data-type="success"]) { --_tone: var(--mv-success); }
  :where(.mv-toast[data-type="error"]) { --_tone: var(--mv-danger); }
  :where(.mv-toast[data-type="warning"]) { --_tone: var(--mv-warning); }
  :where(.mv-toast[data-type="info"]) { --_tone: var(--mv-info); }

  :where(.mv-toaster[data-rich-colors] .mv-toast:not([data-type="default"], [data-type="loading"])) {
    --_icon-fg: var(--mv-toast-bg, color-mix(in oklab, var(--_tone) 9%, var(--mv-surface-raised)));
    background: var(--mv-toast-bg, color-mix(in oklab, var(--_tone) 9%, var(--mv-surface-raised)));
    border-color: color-mix(in oklab, var(--_tone) 32%, var(--mv-border));
  }
  :where(.mv-toaster[data-rich-colors] .mv-toast:not([data-type="default"], [data-type="loading"])) :where(.mv-toast-title) {
    color: color-mix(in oklab, var(--_tone) 62%, var(--mv-fg));
  }
}

/* components/tooltip/tooltip.css */
@layer mv.components {
  :where(mv-tooltip) { display: contents; }

  :where(.mv-tooltip) {
    max-width: min(20rem, calc(100vw - 16px));
    padding: var(--mv-space-1-5) var(--mv-space-2-5, 0.625rem);
    border: 0;
    border-radius: var(--mv-radius-sm);
    background: var(--mv-tooltip-bg, light-dark(var(--mv-gray-950), var(--mv-gray-50)));
    color: var(--mv-tooltip-fg, light-dark(var(--mv-gray-50), var(--mv-gray-950)));
    font: var(--mv-weight-medium) var(--mv-text-xs) / 1.4 var(--mv-font-sans);
    box-shadow: var(--mv-shadow-md);
    pointer-events: none;
    transform-origin: var(--mv-origin, center);
    overflow: visible;

    opacity: 0;
    scale: 0.94;
    transition:
      opacity var(--mv-duration-fast) var(--mv-ease-out),
      scale var(--mv-duration-fast) var(--mv-ease-out),
      translate var(--mv-duration-fast) var(--mv-ease-out),
      display var(--mv-duration-fast) allow-discrete,
      overlay var(--mv-duration-fast) allow-discrete;
  }
  :where(.mv-tooltip):popover-open { opacity: 1; scale: 1; translate: 0 0; }
  @starting-style {
    :where(.mv-tooltip):popover-open { opacity: 0; scale: 0.94; }
    :where(.mv-tooltip[data-side="top"]):popover-open { translate: 0 3px; }
    :where(.mv-tooltip[data-side="bottom"]):popover-open { translate: 0 -3px; }
    :where(.mv-tooltip[data-side="left"]):popover-open { translate: 3px 0; }
    :where(.mv-tooltip[data-side="right"]):popover-open { translate: -3px 0; }
  }

  /* Arrow */
  :where(.mv-tooltip)::after {
    content: "";
    position: absolute;
    width: 8px; height: 8px;
    background: inherit;
    rotate: 45deg;
    border-radius: 1px;
  }
  :where(.mv-tooltip[data-side="top"])::after    { bottom: -4px; left: calc(var(--mv-arrow-x, 50%) - 4px); }
  :where(.mv-tooltip[data-side="bottom"])::after { top: -4px; left: calc(var(--mv-arrow-x, 50%) - 4px); }
  :where(.mv-tooltip[data-side="left"])::after   { right: -4px; top: calc(var(--mv-arrow-y, 50%) - 4px); }
  :where(.mv-tooltip[data-side="right"])::after  { left: -4px; top: calc(var(--mv-arrow-y, 50%) - 4px); }
  :where(.mv-tooltip[data-arrow="false"])::after { display: none; }
}

/* components/input/input.css */
@layer mv.components {
  /* ── Input ──────────────────────────────────────────────────────────
     Shared private knobs (also consumed by .mv-input-group):
       --_h   control height      --_px  inline padding
       --_fs  font size           --_bd  border color
       --_rc  focus ring color */
  :where(.mv-input, .mv-input-group) {
    --_h: var(--mv-control-md);
    --_px: var(--mv-space-3);
    --_fs: var(--mv-text-sm);
    --_bd: var(--mv-input);
    --_bd-hover: color-mix(in oklch, var(--mv-input), var(--mv-fg) 18%);
    --_bd-focus: var(--mv-accent);
    --_rc: color-mix(in oklch, var(--mv-accent) 22%, transparent);
    --_radius: var(--mv-input-radius, var(--mv-radius-md));
    --_bg: var(--mv-input-bg, light-dark(var(--mv-bg), color-mix(in oklch, var(--mv-bg-muted) 55%, transparent)));
  }

  :where(.mv-input) {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    height: var(--_h);
    margin: 0;
    padding: 0 var(--_px);
    border: 1px solid var(--_bd);
    border-radius: var(--_radius);
    background: var(--_bg);
    color: var(--mv-fg);
    font: var(--mv-weight-normal) var(--_fs) / 1.25 var(--mv-font-sans);
    box-shadow: var(--mv-shadow-xs);
    outline: none;
    transition:
      border-color var(--mv-duration-fast) var(--mv-ease-out),
      box-shadow var(--mv-duration-fast) var(--mv-ease-out),
      background-color var(--mv-duration-fast) var(--mv-ease-out);
  }
  :where(.mv-input)::placeholder { color: var(--mv-fg-subtle); opacity: 1; }
  :where(.mv-input):hover:not(:disabled, :focus-visible) { border-color: var(--_bd-hover); }
  :where(.mv-input):focus-visible {
    outline: none;
    border-color: var(--_bd-focus);
    box-shadow: var(--mv-shadow-xs), 0 0 0 3px var(--_rc);
  }

  /* Invalid: explicit aria-invalid, or native validation after user interaction */
  :where(.mv-input[aria-invalid="true"], .mv-input:user-invalid) {
    --_bd: var(--mv-danger);
    --_bd-hover: var(--mv-danger);
    --_bd-focus: var(--mv-danger);
    --_rc: color-mix(in oklch, var(--mv-danger) 20%, transparent);
  }

  :where(.mv-input):disabled {
    cursor: not-allowed;
    opacity: 0.5;
    box-shadow: none;
    background: var(--mv-bg-muted);
  }
  :where(.mv-input[readonly]) {
    --_bd-focus: var(--mv-border-strong);
    --_rc: color-mix(in oklch, var(--mv-fg) 8%, transparent);
    background: var(--mv-bg-subtle);
    box-shadow: none;
  }

  /* Sizes */
  :where(.mv-input[data-size="sm"], .mv-input-group[data-size="sm"]) {
    --_h: var(--mv-control-sm);
    --_px: 0.625rem;
  }
  :where(.mv-input[data-size="lg"], .mv-input-group[data-size="lg"]) {
    --_h: var(--mv-control-lg);
    --_px: var(--mv-space-4);
    --_fs: var(--mv-text-base);
  }

  /* Native search: restyle the WebKit clear button (zero-JS clear) */
  :where(.mv-input[type="search"])::-webkit-search-decoration { appearance: none; }
  :where(.mv-input[type="search"])::-webkit-search-cancel-button {
    appearance: none;
    width: 1rem;
    height: 1rem;
    margin-inline-start: var(--mv-space-2);
    background: var(--mv-fg-subtle);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm3.7 12.3a1 1 0 0 1-1.4 1.4L12 13.4l-2.3 2.3a1 1 0 0 1-1.4-1.4l2.3-2.3-2.3-2.3a1 1 0 0 1 1.4-1.4l2.3 2.3 2.3-2.3a1 1 0 0 1 1.4 1.4L13.4 12Z'/%3E%3C/svg%3E") center / contain no-repeat;
    cursor: pointer;
    transition: background-color var(--mv-duration-fast) var(--mv-ease-out);
  }
  :where(.mv-input[type="search"])::-webkit-search-cancel-button:hover { background: var(--mv-fg-muted); }

  /* File input: the selector button becomes a flush, muted segment */
  :where(.mv-input[type="file"]) {
    padding: 0 var(--_px) 0 0;
    color: var(--mv-fg-muted);
    line-height: calc(var(--_h) - 2px);
    cursor: pointer;
  }
  :where(.mv-input[type="file"])::file-selector-button {
    height: 100%;
    margin: 0 var(--_px) 0 0;
    padding: 0 var(--_px);
    border: 0;
    border-inline-end: 1px solid var(--_bd);
    background: var(--mv-bg-muted);
    color: var(--mv-fg);
    font: var(--mv-weight-medium) var(--_fs) / 1 var(--mv-font-sans);
    cursor: pointer;
    transition: background-color var(--mv-duration-fast) var(--mv-ease-out);
  }
  :where(.mv-input[type="file"]):hover::file-selector-button { background: var(--mv-bg-emphasis); }
  :where(.mv-input[type="file"]):disabled::file-selector-button { cursor: not-allowed; }

  /* ── Input group ─────────────────────────────────────────────────────
     The wrapper owns border, background and focus ring; the inner
     .mv-input becomes borderless and flexes. Addons sit before/after. */
  :where(.mv-input-group) {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    height: var(--_h);
    border: 1px solid var(--_bd);
    border-radius: var(--_radius);
    background: var(--_bg);
    color: var(--mv-fg);
    font-size: var(--_fs);
    box-shadow: var(--mv-shadow-xs);
    overflow: hidden;
    cursor: text;
    transition:
      border-color var(--mv-duration-fast) var(--mv-ease-out),
      box-shadow var(--mv-duration-fast) var(--mv-ease-out);
  }
  :where(.mv-input-group:hover:not(:has(.mv-input:disabled, .mv-input:focus-visible))) { border-color: var(--_bd-hover); }
  :where(.mv-input-group:has(.mv-input:focus-visible)) {
    border-color: var(--_bd-focus);
    box-shadow: var(--mv-shadow-xs), 0 0 0 3px var(--_rc);
  }
  :where(.mv-input-group:has(.mv-input[aria-invalid="true"], .mv-input:user-invalid)) {
    --_bd: var(--mv-danger);
    --_bd-hover: var(--mv-danger);
    --_bd-focus: var(--mv-danger);
    --_rc: color-mix(in oklch, var(--mv-danger) 20%, transparent);
  }
  :where(.mv-input-group:has(.mv-input:disabled)) { opacity: 0.5; cursor: not-allowed; background: var(--mv-bg-muted); box-shadow: none; }

  :where(.mv-input-group) > :where(.mv-input) {
    flex: 1;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  :where(.mv-input-group) > :where(.mv-input):focus-visible { box-shadow: none; }
  :where(.mv-input-group) > :where(.mv-input):disabled { background: transparent; }

  /* Addon: icon, text prefix/suffix, kbd hint, spinner… Use <label for> to focus the input on click. */
  :where(.mv-input-group-addon) {
    display: inline-flex;
    align-items: center;
    gap: var(--mv-space-1-5);
    flex-shrink: 0;
    height: 100%;
    padding-inline: var(--_px);
    color: var(--mv-fg-muted);
    font: var(--mv-weight-normal) var(--_fs) / 1 var(--mv-font-sans);
    white-space: nowrap;
    user-select: none;
    cursor: inherit;
  }
  :where(.mv-input-group-addon) :where(svg) { width: 1rem; height: 1rem; flex-shrink: 0; }
  :where(.mv-input-group[data-size="sm"]) :where(.mv-input-group-addon svg) { width: 0.875rem; height: 0.875rem; }
  :where(.mv-input-group-addon:first-child) { padding-inline-end: var(--mv-space-2); }
  :where(.mv-input-group-addon:last-child) { padding-inline-start: var(--mv-space-2); }
  :where(.mv-input-group-addon:not([data-variant="filled"])) + :where(.mv-input) { padding-inline-start: 0; }
  :where(.mv-input:has(+ .mv-input-group-addon:not([data-variant="filled"]))) { padding-inline-end: 0; }

  /* Filled addon: separated segment with muted background ("https://", ".com", "USD") */
  :where(.mv-input-group-addon[data-variant="filled"]) {
    padding-inline: var(--_px);
    background: var(--mv-bg-muted);
    color: var(--mv-fg-muted);
  }
  :where(.mv-input-group-addon[data-variant="filled"]:first-child) { border-inline-end: 1px solid var(--_bd); }
  :where(.mv-input-group-addon[data-variant="filled"]:last-child) { border-inline-start: 1px solid var(--_bd); }

  /* Inline buttons (mv-button or plain <button>) sit inset inside the group */
  :where(.mv-input-group) > :where(button, .mv-button) {
    flex-shrink: 0;
    height: calc(var(--_h) - 0.5rem);
    margin-inline: 0.1875rem;
    border-radius: calc(var(--_radius) - 0.1875rem);
  }
  :where(.mv-input-group) > :where(.mv-button[data-size="icon"]) { width: calc(var(--_h) - 0.5rem); }
  :where(.mv-input-group) > :where(.mv-button):focus-visible { box-shadow: 0 0 0 2px var(--mv-ring); }
  :where(.mv-input-group) > :where(.mv-input:has(+ button, + .mv-button)) { padding-inline-end: var(--mv-space-1); }

  /* Clear button: hidden while the input is empty (needs a placeholder, even " ") */
  :where(.mv-input-clear) {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0 var(--mv-space-1-5) 0 var(--mv-space-1);
    padding: 0;
    border: 0;
    border-radius: var(--mv-radius-sm);
    background: none;
    color: var(--mv-fg-subtle);
    cursor: pointer;
    transition:
      color var(--mv-duration-fast) var(--mv-ease-out),
      background-color var(--mv-duration-fast) var(--mv-ease-out),
      opacity var(--mv-duration-fast) var(--mv-ease-out),
      scale var(--mv-duration-fast) var(--mv-ease-out),
      visibility var(--mv-duration-fast) allow-discrete;
  }
  :where(.mv-input-clear) :where(svg) { width: 0.875rem; height: 0.875rem; }
  :where(.mv-input-clear):hover { color: var(--mv-fg); background: var(--mv-bg-muted); }
  :where(.mv-input-clear):focus-visible { outline: none; color: var(--mv-fg); box-shadow: 0 0 0 2px var(--mv-ring); }
  :where(.mv-input-group:has(.mv-input:placeholder-shown)) :where(.mv-input-clear) {
    visibility: hidden;
    opacity: 0;
    scale: 0.6;
  }
  :where(.mv-input-group) > :where(.mv-input-clear) { height: 1.5rem; margin-inline: var(--mv-space-1) var(--mv-space-1-5); }
}

/* components/field/field.css */
@layer mv.components {
  /* ── Field: label + control + description + error ─────────────────── */
  :where(.mv-field) {
    --_gap: var(--mv-space-2);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--_gap);
    min-width: 0;
    color: var(--mv-fg);
    font-size: var(--mv-text-sm);
  }
  /* Description and error hug the control a little tighter */
  :where(.mv-field) > :where(.mv-field-description, .mv-field-error) { margin-top: calc(var(--mv-space-1) - var(--_gap)); }
  :where(.mv-field) > :where(.mv-field-description + .mv-field-error) { margin-top: calc(var(--mv-space-0-5) - var(--_gap)); }

  /* ── Label ─────────────────────────────────────────────────────────── */
  :where(.mv-label) {
    display: inline-flex;
    align-items: center;
    gap: var(--mv-space-1);
    width: fit-content;
    color: var(--mv-fg);
    font: var(--mv-weight-medium) var(--mv-text-sm) / var(--mv-leading-snug) var(--mv-font-sans);
    user-select: none;
    cursor: default;
    transition: color var(--mv-duration-fast) var(--mv-ease-out);
  }
  :where(label.mv-label) { cursor: pointer; }
  /* Required asterisk: decorative (announce "required" through the control's `required`) */
  :where(.mv-label[data-required])::after {
    content: "*" / "";
    color: var(--mv-danger);
    font-weight: var(--mv-weight-medium);
  }
  /* Optional hint: <label data-optional="facultatif"> */
  :where(.mv-label[data-optional])::after {
    content: attr(data-optional);
    color: var(--mv-fg-subtle);
    font-weight: var(--mv-weight-normal);
    font-size: var(--mv-text-xs);
  }
  :where(.mv-label) :where(svg) { width: 0.875rem; height: 0.875rem; color: var(--mv-fg-muted); }

  /* Header row: label on the left, meta (link, counter) on the right */
  :where(.mv-field-header) { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mv-space-3); min-width: 0; }
  :where(.mv-field-header) :where(a) { color: var(--mv-fg-muted); font-size: var(--mv-text-xs); text-underline-offset: 3px; }
  :where(.mv-field-header) :where(a):hover { color: var(--mv-fg); }

  /* ── Description & error ───────────────────────────────────────────── */
  :where(.mv-field-description) {
    margin: 0;
    color: var(--mv-fg-muted);
    font-size: var(--mv-text-xs);
    line-height: var(--mv-leading-normal);
    text-wrap: pretty;
  }
  :where(.mv-field-description) :where(a) { color: inherit; text-underline-offset: 3px; }
  :where(.mv-field-description) :where(a):hover { color: var(--mv-fg); }

  :where(.mv-field-error) {
    display: none;
    align-items: flex-start;
    gap: var(--mv-space-1-5);
    margin: 0;
    color: color-mix(in oklch, var(--mv-danger), var(--mv-fg) 12%);
    font-size: var(--mv-text-xs);
    font-weight: var(--mv-weight-medium);
    line-height: var(--mv-leading-normal);
    opacity: 0;
    translate: 0 -2px;
    transition:
      opacity var(--mv-duration-fast) var(--mv-ease-out),
      translate var(--mv-duration-fast) var(--mv-ease-out),
      display var(--mv-duration-fast) allow-discrete;
  }
  :where(.mv-field-error)::before {
    content: "";
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    margin-top: 0.1em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5M12 16.25v.01'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* Invalid field: explicit (data-invalid on the field, aria-invalid on the control) or native after interaction */
  :where(.mv-field[data-invalid], .mv-field:has(:user-invalid, [aria-invalid="true"])) :where(.mv-field-error) {
    display: flex;
    opacity: 1;
    translate: 0 0;
  }
  :where(.mv-field[data-invalid], .mv-field:has(:user-invalid, [aria-invalid="true"])) :where(.mv-label) {
    color: color-mix(in oklch, var(--mv-danger), var(--mv-fg) 12%);
  }
  @starting-style {
    :where(.mv-field[data-invalid], .mv-field:has(:user-invalid, [aria-invalid="true"])) :where(.mv-field-error) { opacity: 0; translate: 0 -2px; }
  }
  /* An error with no text never shows (lets you keep an empty slot for server messages) */
  :where(.mv-field-error:empty) { display: none; }

  /* Disabled: dim labels and help text */
  :where(.mv-field[data-disabled], .mv-field:has(:is(input, textarea, select):disabled)) :where(.mv-label, .mv-field-description) {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* ── Orientations ──────────────────────────────────────────────────── */
  /* Horizontal: label column + control column; description/error under the control */
  :where(.mv-field[data-orientation="horizontal"]) {
    grid-template-columns: var(--mv-field-label-width, 11rem) minmax(0, 1fr);
    column-gap: var(--mv-space-6);
    align-items: start;
  }
  :where(.mv-field[data-orientation="horizontal"]) > :where(.mv-label, .mv-field-header, .mv-field-label-group) {
    grid-column: 1;
    grid-row: 1;
    min-height: var(--mv-control-md);
    align-self: start;
  }
  :where(.mv-field[data-orientation="horizontal"]) > :where(.mv-label) { display: flex; align-items: center; }
  :where(.mv-field[data-orientation="horizontal"]) > :where(:not(.mv-label, .mv-field-header, .mv-field-label-group)) { grid-column: 2; }
  /* Label + description stacked in the left column */
  :where(.mv-field-label-group) { display: grid; gap: var(--mv-space-1); align-content: start; padding-top: 0.5rem; }
  :where(.mv-field[data-orientation="horizontal"]) > :where(.mv-field-label-group) { min-height: 0; }

  /* Responsive: stacked until the container (a .mv-field-group or .mv-fieldset) is ≥ 36rem */
  @container mv-field (min-width: 36rem) {
    :where(.mv-field[data-orientation="responsive"]) {
      grid-template-columns: var(--mv-field-label-width, 11rem) minmax(0, 1fr);
      column-gap: var(--mv-space-6);
      align-items: start;
    }
    :where(.mv-field[data-orientation="responsive"]) > :where(.mv-label, .mv-field-header, .mv-field-label-group) {
      grid-column: 1;
      grid-row: 1;
      min-height: var(--mv-control-md);
    }
    :where(.mv-field[data-orientation="responsive"]) > :where(.mv-label) { display: flex; align-items: center; }
    :where(.mv-field[data-orientation="responsive"]) > :where(:not(.mv-label, .mv-field-header, .mv-field-label-group)) { grid-column: 2; }
  }

  /* Inline: checkbox / radio / switch first, label + description beside it */
  :where(.mv-field[data-orientation="inline"]) {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--mv-space-3);
    row-gap: var(--mv-space-1);
    align-items: start;
  }
  :where(.mv-field[data-orientation="inline"]) > :where(:first-child) { grid-row: 1; margin: 0.1rem 0 0; }
  :where(.mv-field[data-orientation="inline"]) > :where(:not(:first-child)) { grid-column: 2; margin-top: 0; }
  :where(.mv-field[data-orientation="inline"]) > :where(input[type="checkbox"], input[type="radio"]) {
    width: 1rem;
    height: 1rem;
    accent-color: var(--mv-accent);
  }
  /* Choice card: the whole inline field becomes a selectable card */
  :where(.mv-field[data-variant="card"]) {
    padding: var(--mv-space-4);
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius-lg);
    background: var(--mv-surface);
    cursor: pointer;
    transition:
      border-color var(--mv-duration-fast) var(--mv-ease-out),
      background-color var(--mv-duration-fast) var(--mv-ease-out),
      box-shadow var(--mv-duration-fast) var(--mv-ease-out);
  }
  :where(.mv-field[data-variant="card"]):hover { border-color: var(--mv-border-strong); }
  :where(.mv-field[data-variant="card"]:has(:checked)) {
    border-color: color-mix(in oklch, var(--mv-accent) 70%, transparent);
    background: color-mix(in srgb, var(--mv-accent) 5%, var(--mv-surface));
    box-shadow: 0 0 0 1px color-mix(in oklch, var(--mv-accent) 70%, transparent);
  }
  :where(.mv-field[data-variant="card"]:has(:focus-visible)) { box-shadow: var(--mv-focus-ring); }
  :where(.mv-field[data-variant="card"]) > :where(input):focus-visible { outline: none; }
  :where(.mv-field[data-variant="card"]) :where(.mv-label) { cursor: pointer; }

  /* ── Groups & fieldset ─────────────────────────────────────────────── */
  :where(.mv-field-group) {
    container: mv-field / inline-size;
    display: grid;
    gap: var(--mv-space-5);
    min-width: 0;
  }
  :where(.mv-field-row) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: var(--mv-space-4);
  }

  :where(.mv-fieldset) {
    container: mv-field / inline-size;
    display: grid;
    gap: var(--mv-space-5);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  /* Float the legend so it lays out like a normal block (no border notch) */
  :where(.mv-fieldset) > :where(legend, .mv-fieldset-legend) {
    float: inline-start;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--mv-fg);
    font: var(--mv-weight-semibold) var(--mv-text-base) / var(--mv-leading-snug) var(--mv-font-sans);
    letter-spacing: var(--mv-tracking-tight);
  }
  :where(.mv-fieldset) > :where(legend, .mv-fieldset-legend) + :where(*) { clear: both; }
  :where(.mv-fieldset) > :where(.mv-fieldset-description) {
    margin: calc(var(--mv-space-1) - var(--mv-space-5)) 0 0;
    color: var(--mv-fg-muted);
    font-size: var(--mv-text-sm);
    line-height: var(--mv-leading-normal);
  }
  :where(.mv-fieldset[data-variant="card"]) {
    padding: var(--mv-space-6);
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius-xl);
    background: var(--mv-surface);
    box-shadow: var(--mv-shadow-xs);
  }
  :where(.mv-fieldset):disabled :where(.mv-label, .mv-field-description, legend) { opacity: 0.5; }
  :where(.mv-fieldset-footer) {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--mv-space-2);
    margin-top: var(--mv-space-1);
  }
  :where(.mv-fieldset[data-variant="card"]) > :where(.mv-fieldset-footer) {
    margin: var(--mv-space-1) calc(-1 * var(--mv-space-6)) calc(-1 * var(--mv-space-6));
    padding: var(--mv-space-4) var(--mv-space-6);
    border-top: 1px solid var(--mv-border);
    border-radius: 0 0 var(--mv-radius-xl) var(--mv-radius-xl);
    background: var(--mv-bg-subtle);
  }
}

/* components/slider/slider.css */
@layer mv.components {
  /* ── Native: <input type="range" class="mv-slider"> ───────────────────────
     Fill ratio (0..1) comes from --mv-slider-fill, kept in sync by slider.js.
     Firefox paints the fill natively via ::-moz-range-progress. */
  :where(input[type="range"].mv-slider) {
    --_thumb: var(--mv-slider-thumb-size, 1.125rem);
    --_track: var(--mv-slider-track-size, 0.375rem);
    --_p: var(--mv-slider-fill, 0);
    --_stop: calc(var(--_thumb) / 2 + var(--_p) * (100% - var(--_thumb)));
    --_dir: to right;

    appearance: none;
    display: block;
    width: 100%;
    min-width: 6rem;
    height: var(--_thumb);
    margin: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  :where(input[type="range"].mv-slider):dir(rtl) { --_dir: to left; }
  :where(input[type="range"].mv-slider):focus-visible { outline: none; box-shadow: none; }
  :where(input[type="range"].mv-slider):disabled { opacity: 0.5; cursor: not-allowed; }
  :where(input[type="range"].mv-slider[data-size="sm"]) { --_thumb: 0.875rem; --_track: 0.25rem; }
  :where(input[type="range"].mv-slider[data-size="lg"]) { --_thumb: 1.375rem; --_track: 0.5rem; }

  /* WebKit / Blink */
  :where(input[type="range"].mv-slider)::-webkit-slider-runnable-track {
    height: var(--_track);
    border-radius: var(--mv-radius-full);
    background: linear-gradient(var(--_dir), var(--mv-accent) var(--_stop), var(--mv-bg-emphasis) var(--_stop));
  }
  :where(input[type="range"].mv-slider)::-webkit-slider-thumb {
    appearance: none;
    box-sizing: border-box;
    width: var(--_thumb);
    height: var(--_thumb);
    margin-top: calc((var(--_track) - var(--_thumb)) / 2);
    border: 2px solid var(--mv-accent);
    border-radius: 50%;
    background: var(--mv-fg-on-accent);
    box-shadow: var(--mv-shadow-sm);
    transition: box-shadow var(--mv-duration-fast) var(--mv-ease-out), scale var(--mv-duration-fast) var(--mv-ease-out);
  }
  :where(input[type="range"].mv-slider):hover::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in oklab, var(--mv-accent) 18%, transparent), var(--mv-shadow-sm); }
  :where(input[type="range"].mv-slider):active::-webkit-slider-thumb { box-shadow: 0 0 0 6px color-mix(in oklab, var(--mv-accent) 22%, transparent), var(--mv-shadow-sm); scale: 1.06; }
  :where(input[type="range"].mv-slider):focus-visible::-webkit-slider-thumb { box-shadow: var(--mv-focus-ring); }
  :where(input[type="range"].mv-slider):disabled::-webkit-slider-thumb { box-shadow: none; scale: 1; }

  /* Firefox */
  :where(input[type="range"].mv-slider)::-moz-range-track {
    height: var(--_track);
    border-radius: var(--mv-radius-full);
    background: var(--mv-bg-emphasis);
  }
  :where(input[type="range"].mv-slider)::-moz-range-progress {
    height: var(--_track);
    border-radius: var(--mv-radius-full);
    background: var(--mv-accent);
  }
  :where(input[type="range"].mv-slider)::-moz-range-thumb {
    box-sizing: border-box;
    width: var(--_thumb);
    height: var(--_thumb);
    border: 2px solid var(--mv-accent);
    border-radius: 50%;
    background: var(--mv-fg-on-accent);
    box-shadow: var(--mv-shadow-sm);
    transition: box-shadow var(--mv-duration-fast) var(--mv-ease-out);
  }
  :where(input[type="range"].mv-slider):hover::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in oklab, var(--mv-accent) 18%, transparent), var(--mv-shadow-sm); }
  :where(input[type="range"].mv-slider):focus-visible::-moz-range-thumb { box-shadow: var(--mv-focus-ring); }

  /* ── <mv-slider> ────────────────────────────────────────────────────── */
  :where(mv-slider) {
    --_thumb: var(--mv-slider-thumb-size, 1.125rem);
    --_track: var(--mv-slider-track-size, 0.375rem);
    --_dur: var(--mv-duration-fast);
    position: relative;
    display: block;
    min-width: 8rem;
    padding-inline: calc(var(--_thumb) / 2);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  :where(mv-slider[data-size="sm"]) { --_thumb: 0.875rem; --_track: 0.25rem; }
  :where(mv-slider[data-size="lg"]) { --_thumb: 1.375rem; --_track: 0.5rem; }
  :where(mv-slider[orientation="vertical"]) {
    display: inline-flex;
    gap: var(--mv-space-2);
    min-width: 0;
    padding: calc(var(--_thumb) / 2) 0;
  }
  /* Lift the active slider so its bubble paints over neighbours */
  :where(mv-slider):has(:where(.mv-slider-thumb):is(:hover, :focus-visible, [data-active])) { z-index: 3; }
  :where(mv-slider[data-disabled]) { opacity: 0.5; cursor: not-allowed; }
  :where(mv-slider[data-disabled]) :where(.mv-slider-control) { pointer-events: none; }

  :where(.mv-slider-control) {
    position: relative;
    height: var(--_thumb);
    touch-action: none;
    cursor: pointer;
  }
  :where(mv-slider[orientation="vertical"]) :where(.mv-slider-control) {
    width: var(--_thumb);
    height: var(--mv-slider-length, 10rem);
  }

  :where(.mv-slider-track) {
    position: absolute;
    inset-inline: 0;
    top: 50%;
    height: var(--_track);
    translate: 0 -50%;
    border-radius: var(--mv-radius-full);
    background: var(--mv-bg-emphasis);
    overflow: hidden;
  }
  :where(mv-slider[orientation="vertical"]) :where(.mv-slider-track) {
    inset: 0 auto;
    left: 50%;
    width: var(--_track);
    height: auto;
    translate: -50% 0;
  }

  :where(.mv-slider-range) {
    position: absolute;
    inset: 0;
    background: var(--mv-slider-fill-color, var(--mv-accent));
    clip-path: inset(0 calc((1 - var(--_p1)) * 100%) 0 calc(var(--_p0) * 100%));
    transition: clip-path var(--_dur) var(--mv-ease-out);
  }
  :where(mv-slider):dir(rtl) :where(.mv-slider-range) { clip-path: inset(0 calc(var(--_p0) * 100%) 0 calc((1 - var(--_p1)) * 100%)); }
  :where(mv-slider[orientation="vertical"]) :where(.mv-slider-range) { clip-path: inset(calc((1 - var(--_p1)) * 100%) 0 calc(var(--_p0) * 100%) 0); }

  /* Step ticks: small dots on the track */
  :where(.mv-slider-ticks) { position: absolute; inset: 0; pointer-events: none; }
  :where(.mv-slider-tick) {
    position: absolute;
    top: 50%;
    left: clamp(var(--_track) / 2, var(--_p) * 100%, 100% - var(--_track) / 2);
    width: calc(var(--_track) * 0.5);
    height: calc(var(--_track) * 0.5);
    translate: -50% -50%;
    border-radius: 50%;
    background: color-mix(in oklab, var(--mv-fg) 28%, transparent);
    transition: background-color var(--_dur) var(--mv-ease-out);
  }
  :where(.mv-slider-tick[data-in-range]) { background: color-mix(in oklab, var(--mv-fg-on-accent) 75%, transparent); }
  :where(mv-slider):dir(rtl) :where(.mv-slider-tick) { left: auto; right: clamp(var(--_track) / 2, var(--_p) * 100%, 100% - var(--_track) / 2); translate: 50% -50%; }
  :where(mv-slider[orientation="vertical"]) :where(.mv-slider-tick) {
    left: 50%;
    right: auto;
    top: clamp(var(--_track) / 2, (1 - var(--_p)) * 100%, 100% - var(--_track) / 2);
    translate: -50% -50%;
  }

  /* Thumbs: a full-size wrapper is translated so % = track length. */
  :where(.mv-slider-thumb-pos) {
    position: absolute;
    inset: 0;
    pointer-events: none;
    translate: calc(var(--_p) * 100%) 0;
    transition: translate var(--_dur) var(--mv-ease-out);
  }
  :where(mv-slider):dir(rtl) :where(.mv-slider-thumb-pos) { translate: calc(var(--_p) * -100%) 0; }
  :where(mv-slider[orientation="vertical"]) :where(.mv-slider-thumb-pos) { translate: 0 calc((1 - var(--_p)) * 100%); }
  :where(mv-slider[data-dragging]) :where(.mv-slider-thumb-pos, .mv-slider-range) { transition: none; }
  :where(.mv-slider-thumb-pos):has(:focus-visible) { z-index: 1; }
  :where(.mv-slider-thumb-pos):has([data-active]) { z-index: 2; }

  :where(.mv-slider-thumb) {
    position: absolute;
    top: 50%;
    left: 0;
    box-sizing: border-box;
    width: var(--_thumb);
    height: var(--_thumb);
    translate: -50% -50%;
    border: 2px solid var(--mv-accent);
    border-radius: 50%;
    background: var(--mv-fg-on-accent);
    box-shadow: var(--mv-shadow-sm);
    pointer-events: auto;
    cursor: grab;
    outline: none;
    transition: box-shadow var(--mv-duration-fast) var(--mv-ease-out), scale var(--mv-duration-fast) var(--mv-ease-out);
  }
  :where(mv-slider):dir(rtl) :where(.mv-slider-thumb) { left: auto; right: 0; translate: 50% -50%; }
  :where(mv-slider[orientation="vertical"]) :where(.mv-slider-thumb) { top: 0; left: 50%; right: auto; translate: -50% -50%; }
  :where(.mv-slider-thumb):hover { box-shadow: 0 0 0 4px color-mix(in oklab, var(--mv-accent) 18%, transparent), var(--mv-shadow-sm); }
  :where(.mv-slider-thumb[data-active]) {
    cursor: grabbing;
    scale: 1.06;
    box-shadow: 0 0 0 6px color-mix(in oklab, var(--mv-accent) 22%, transparent), var(--mv-shadow-sm);
  }
  :where(.mv-slider-thumb):focus-visible { box-shadow: var(--mv-focus-ring); }
  :where(mv-slider[data-dragging]) { cursor: grabbing; }

  /* Value bubble */
  :where(.mv-slider-bubble) {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    padding: 0.1875rem 0.4375rem;
    border-radius: var(--mv-radius-sm);
    background: var(--mv-slider-bubble-bg, light-dark(var(--mv-gray-950), var(--mv-gray-50)));
    color: var(--mv-slider-bubble-fg, light-dark(var(--mv-gray-50), var(--mv-gray-950)));
    font: var(--mv-weight-medium) var(--mv-text-xs) / 1.3 var(--mv-font-sans);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    box-shadow: var(--mv-shadow-md);
    pointer-events: none;
    opacity: 0;
    translate: -50% 4px;
    scale: 0.9;
    transform-origin: 50% 100%;
    transition:
      opacity var(--mv-duration-fast) var(--mv-ease-out),
      translate var(--mv-duration-fast) var(--mv-ease-out),
      scale var(--mv-duration-fast) var(--mv-ease-out);
  }
  :where(.mv-slider-bubble)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3px;
    width: 6px;
    height: 6px;
    translate: -50% 0;
    rotate: 45deg;
    border-radius: 1px;
    background: inherit;
  }
  :where(mv-slider[tooltip]) :where(.mv-slider-thumb):is(:hover, :focus-visible, [data-active]) :where(.mv-slider-bubble),
  :where(mv-slider[tooltip="always"]) :where(.mv-slider-bubble) {
    opacity: 1;
    translate: -50% 0;
    scale: 1;
  }
  :where(mv-slider):dir(rtl) :where(.mv-slider-bubble) { left: auto; right: 50%; translate: 50% 4px; }
  :where(mv-slider[tooltip]):dir(rtl) :where(.mv-slider-thumb):is(:hover, :focus-visible, [data-active]) :where(.mv-slider-bubble),
  :where(mv-slider[tooltip="always"]):dir(rtl) :where(.mv-slider-bubble) { translate: 50% 0; }
  :where(mv-slider[orientation="vertical"]) :where(.mv-slider-bubble) {
    bottom: auto;
    top: 50%;
    left: calc(100% + 8px);
    right: auto;
    translate: -4px -50%;
    transform-origin: 0 50%;
  }
  :where(mv-slider[orientation="vertical"]) :where(.mv-slider-bubble)::after { left: -3px; top: 50%; bottom: auto; translate: 0 -50%; }
  :where(mv-slider[orientation="vertical"][tooltip]) :where(.mv-slider-thumb):is(:hover, :focus-visible, [data-active]) :where(.mv-slider-bubble),
  :where(mv-slider[orientation="vertical"][tooltip="always"]) :where(.mv-slider-bubble) { translate: 0 -50%; }

  /* Labelled marks under the track */
  :where(.mv-slider-marks) {
    position: relative;
    height: 1rem;
    margin-top: var(--mv-space-2);
    color: var(--mv-fg-subtle);
    font: var(--mv-text-xs) / 1rem var(--mv-font-sans);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
  }
  :where(.mv-slider-marks[hidden]) { display: none; }
  :where(.mv-slider-mark) { position: absolute; left: calc(var(--_p) * 100%); translate: -50% 0; white-space: nowrap; transition: color var(--_dur) var(--mv-ease-out); }
  :where(.mv-slider-mark[data-in-range]) { color: var(--mv-fg-muted); }
  /* End labels align with the slider edges instead of overflowing */
  :where(.mv-slider-mark[data-edge="start"]) { translate: calc(var(--_thumb) / -2) 0; }
  :where(.mv-slider-mark[data-edge="end"]) { translate: calc(-100% + var(--_thumb) / 2) 0; }
  :where(mv-slider):dir(rtl) :where(.mv-slider-mark) { left: auto; right: calc(var(--_p) * 100%); translate: 50% 0; }
  :where(mv-slider):dir(rtl) :where(.mv-slider-mark[data-edge="start"]) { translate: calc(var(--_thumb) / 2) 0; }
  :where(mv-slider):dir(rtl) :where(.mv-slider-mark[data-edge="end"]) { translate: calc(100% - var(--_thumb) / 2) 0; }
  :where(mv-slider[orientation="vertical"]) :where(.mv-slider-marks) { width: var(--mv-slider-marks-width, 2.5rem); height: auto; margin: 0; }
  :where(mv-slider[orientation="vertical"]) :where(.mv-slider-mark) { left: 0; right: auto; top: calc((1 - var(--_p)) * 100%); translate: 0 -50%; }
  :where(mv-slider[orientation="vertical"]) :where(.mv-slider-mark[data-edge]) { translate: 0 -50%; }
}

/* components/border-beam/border-beam.css */
/* Registered so conic borders can rotate smoothly (angles are not interpolable otherwise). */
@property --mv-border-beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@layer mv.components {
  /*
   * Decorative layer placed as the LAST child of any positioned box (card, button…):
   *   <span class="mv-border-beam" aria-hidden="true"></span>
   * It covers the box, inherits its radius and is masked down to a thin ring.
   */
  :where(.mv-border-beam) {
    --_w: var(--mv-border-beam-width, 1.5px);
    --_size: var(--mv-border-beam-size, 5rem);
    --_dur: var(--mv-border-beam-duration, 6s);
    --_delay: var(--mv-border-beam-delay, 0s);
    --_from: var(--mv-border-beam-color-from, var(--mv-accent));
    --_via: var(--mv-border-beam-color-via, oklch(0.72 0.2 350));
    --_to: var(--mv-border-beam-color-to, oklch(0.84 0.15 75));

    position: absolute;
    inset: 0;
    z-index: var(--mv-border-beam-z, 3);
    display: block;
    padding: var(--_w);
    border-radius: inherit;
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }

  /* ── beam (default): a comet travelling the perimeter at constant speed ── */
  :where(.mv-border-beam)::before {
    content: "";
    position: absolute;
    width: var(--_size);
    aspect-ratio: 1;
    /* Fallback path, then the containing block's own rounded box where supported. */
    offset-path: inset(0 round var(--mv-border-beam-radius, var(--mv-radius-xl)));
    offset-path: border-box;
    offset-anchor: 100% 50%;
    offset-rotate: auto;
    offset-distance: var(--mv-border-beam-offset, 18%);
    background: linear-gradient(to right, transparent, var(--_from) 65%, var(--_to));
    animation: mv-border-beam-travel var(--_dur) linear infinite;
    animation-delay: calc(var(--_delay) - var(--_dur) * var(--mv-border-beam-start, 0));
  }
  :where(.mv-border-beam[data-reverse])::before {
    offset-rotate: auto 180deg;
    animation-direction: reverse;
  }
  @keyframes mv-border-beam-travel {
    from { offset-distance: 0%; }
    to { offset-distance: 100%; }
  }

  /* ── shine: two soft highlights rotating around the ring ── */
  :where(.mv-border-beam[data-variant="shine"]) {
    background: conic-gradient(
      from var(--mv-border-beam-angle),
      transparent 0%, var(--_from) 10%, var(--_to) 17%, transparent 30%,
      transparent 50%, var(--_via) 60%, var(--_from) 67%, transparent 80%
    );
    animation: mv-border-beam-spin var(--_dur) linear infinite;
  }

  /* ── gradient: the whole border is a slowly moving multi-hue gradient ── */
  :where(.mv-border-beam[data-variant="gradient"]) {
    --_w: var(--mv-border-beam-width, 2px);
    background: conic-gradient(from var(--mv-border-beam-angle), var(--_from), var(--_via), var(--_to), var(--_via), var(--_from));
    opacity: 0.85;
    animation: mv-border-beam-spin var(--_dur) linear infinite;
    transition: opacity var(--mv-duration-normal) var(--mv-ease-out);
  }
  @media (hover: hover) {
    :where(:hover > .mv-border-beam[data-variant="gradient"]) { opacity: 1; }
  }

  :where(.mv-border-beam:is([data-variant="shine"], [data-variant="gradient"], [data-variant="star"], [data-variant="electric"]))::before {
    offset-path: none;
    animation: none;
  }
  :where(.mv-border-beam:is([data-variant="shine"], [data-variant="gradient"]))::before { content: none; }

  @keyframes mv-border-beam-spin {
    to { --mv-border-beam-angle: 360deg; }
  }

  /* ── star: two glows sliding along the top and bottom edges in opposite directions ── */
  :where(.mv-border-beam[data-variant="star"]) { --_w: var(--mv-border-beam-width, 2px); }
  :where(.mv-border-beam[data-variant="star"])::before,
  :where(.mv-border-beam[data-variant="star"])::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    width: auto;
    height: 60%;
    aspect-ratio: auto;
    background: radial-gradient(closest-side, var(--_from), color-mix(in oklch, var(--_from) 40%, transparent) 45%, transparent) no-repeat;
    background-size: var(--_size) 200%;
    background-position: 72% 50%;
    animation: mv-border-beam-star var(--_dur) linear infinite alternate;
  }
  :where(.mv-border-beam[data-variant="star"])::before { top: auto; bottom: -30%; }
  :where(.mv-border-beam[data-variant="star"])::after {
    top: -30%;
    background-position: 28% 50%;
    background-image: radial-gradient(closest-side, var(--_to), color-mix(in oklch, var(--_to) 40%, transparent) 45%, transparent);
    animation-direction: alternate-reverse;
  }
  @keyframes mv-border-beam-star {
    0% { background-position: 130% 50%; opacity: 1; }
    70% { opacity: 1; }
    100% { background-position: -30% 50%; opacity: 0.2; }
  }

  /* ── electric: a crackling border; the jitter filter is injected by border-beam.js ── */
  :where(.mv-border-beam[data-variant="electric"]) {
    --_w: var(--mv-border-beam-width, 2px);
    padding: 0;
    -webkit-mask: none;
    mask: none;
  }
  :where(.mv-border-beam[data-variant="electric"])::before,
  :where(.mv-border-beam[data-variant="electric"])::after {
    content: "";
    position: absolute;
    inset: var(--mv-border-beam-inset, 3px);
    width: auto;
    aspect-ratio: auto;
    border: var(--_w) solid var(--_from);
    border-radius: inherit;
    background: none;
    filter: url(#mv-border-beam-electric);
  }
  :where(.mv-border-beam[data-variant="electric"])::after {
    border-color: color-mix(in oklch, var(--_from), white 35%);
    filter: url(#mv-border-beam-electric) blur(5px);
    opacity: 0.9;
  }

  /* Reduced motion: frozen but still decorated (beam parked on the top edge). */
  @media (prefers-reduced-motion: reduce) {
    :where(.mv-border-beam), :where(.mv-border-beam)::before, :where(.mv-border-beam)::after { animation: none; }
  }
  :where([data-motion="reduce"]) :where(.mv-border-beam),
  :where([data-motion="reduce"]) :where(.mv-border-beam)::before,
  :where([data-motion="reduce"]) :where(.mv-border-beam)::after { animation: none; }
}

/* components/spotlight-card/spotlight-card.css */
@layer mv.components {
  :where(mv-spotlight) { display: block; }

  /* Every item (card) of an <mv-spotlight> — class added by the element. */
  :where(.mv-spotlight-item) {
    --_size: var(--mv-spotlight-size, 22rem);
    --_bsize: var(--mv-spotlight-border-size, 16rem);
    --_bw: var(--mv-spotlight-border-width, 1px);
    --_fill: var(--mv-spotlight-color, light-dark(color-mix(in oklch, var(--mv-accent) 9%, transparent), color-mix(in oklch, var(--mv-accent) 16%, transparent)));
    --_edge: var(--mv-spotlight-border-color, color-mix(in oklch, var(--mv-accent), light-dark(transparent, white) 25%));
    --_x: var(--mv-px, -100rem);
    --_y: var(--mv-py, -100rem);
    position: relative;
    isolation: isolate;
  }

  /* Hover-capable pointers only: on touch nothing is drawn, nothing moves. */
  @media (hover: hover) {
    /* Inner spotlight: a soft light under the content, only in the hovered card. */
    :where(.mv-spotlight-item)::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      background: radial-gradient(circle var(--_size) at var(--_x) var(--_y), var(--_fill), transparent 72%);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--mv-duration-slow) var(--mv-ease-out);
    }
    :where(.mv-spotlight-item:hover)::before { opacity: 1; }

    /* Border reveal: a ring lit around the pointer. It is drawn on every item
       while the wrapper is hovered, so light spills onto neighbouring cards. */
    :where(.mv-spotlight-item)::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 3;
      padding: var(--_bw);
      border-radius: inherit;
      background: radial-gradient(circle var(--_bsize) at var(--_x) var(--_y), var(--_edge), transparent 100%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
      opacity: var(--mv-hover, 0);
      pointer-events: none;
      transition: opacity var(--mv-duration-slow) var(--mv-ease-out);
    }

    /* data-variant="glow": stronger, wider border light (Border Glow / Glowing Effect). */
    :where(mv-spotlight[data-variant="glow"]) :where(.mv-spotlight-item) {
      --_bw: var(--mv-spotlight-border-width, 1.5px);
      --_bsize: var(--mv-spotlight-border-size, 20rem);
    }
    :where(mv-spotlight[data-variant="glow"]) :where(.mv-spotlight-item)::after {
      background: radial-gradient(circle var(--_bsize) at var(--_x) var(--_y),
        var(--mv-spotlight-glow-1, oklch(0.78 0.16 75)),
        var(--mv-spotlight-glow-2, oklch(0.7 0.2 350)) 25%,
        var(--_edge) 50%,
        transparent 75%);
    }
  }

  /* Keyboard users get the border light too, centred on the focused card. */
  :where(.mv-spotlight-item:has(:focus-visible))::after {
    --_x: 50%;
    --_y: 0%;
    opacity: 1;
  }

  :where(mv-spotlight[disabled]) :where(.mv-spotlight-item)::before,
  :where(mv-spotlight[disabled]) :where(.mv-spotlight-item)::after { content: none; }
}

/* components/glow/glow.css */
@property --mv-glow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@layer mv.components {
  /*
   * .mv-glow — wrapper that puts a blurred gradient backlight BEHIND its child.
   * A wrapper (not a pseudo on the element itself) so the glow can sit under an
   * opaque surface without negative z-index escaping to the page.
   *   <div class="mv-glow"><article class="mv-card">…</article></div>
   */
  :where(.mv-glow) {
    --_c1: var(--mv-glow-color-1, var(--mv-accent));
    --_c2: var(--mv-glow-color-2, oklch(0.72 0.2 350));
    --_c3: var(--mv-glow-color-3, oklch(0.8 0.14 210));
    --_blur: var(--mv-glow-blur, 1.75rem);
    --_spread: var(--mv-glow-spread, 0.25rem);
    --_opacity: var(--mv-glow-opacity, 0.55);
    --_r: var(--mv-glow-radius, var(--mv-radius-xl));
    --_dur: var(--mv-glow-duration, 8s);

    position: relative;
    isolation: isolate;
    display: inline-grid;
    vertical-align: middle;
    border-radius: var(--_r);
  }

  /* Backlight */
  :where(.mv-glow)::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--_spread));
    z-index: -2;
    border-radius: inherit;
    background: conic-gradient(from var(--mv-glow-angle), var(--_c1), var(--_c2), var(--_c3), var(--_c1));
    filter: blur(var(--_blur));
    opacity: var(--_opacity);
    pointer-events: none;
    transition:
      opacity var(--mv-duration-slow) var(--mv-ease-out),
      scale var(--mv-duration-slow) var(--mv-ease-out);
  }
  @media (hover: hover) {
    :where(.mv-glow):hover::before { opacity: calc(var(--_opacity) + 0.3); scale: 1.04; }
  }
  :where(.mv-glow):focus-within::before { opacity: calc(var(--_opacity) + 0.3); }

  /* data-variant="soft": wide, gentle ambient halo (Backlight). */
  :where(.mv-glow[data-variant="soft"]) {
    --_blur: var(--mv-glow-blur, 3.5rem);
    --_spread: var(--mv-glow-spread, 0rem);
    --_opacity: var(--mv-glow-opacity, 0.8);
  }
  :where(.mv-glow[data-variant="soft"])::before { translate: 0 0.75rem; }

  /* data-variant="neon": gradient border ring + neon halo (Neon Gradient Card). */
  :where(.mv-glow[data-variant="neon"]) {
    --_c1: var(--mv-glow-color-1, oklch(0.7 0.25 345));
    --_c2: var(--mv-glow-color-2, oklch(0.85 0.15 195));
    --_c3: var(--mv-glow-color-3, oklch(0.7 0.25 345));
    --_border: var(--mv-glow-border, 2px);
    --_blur: var(--mv-glow-blur, 1.5rem);
    --_spread: var(--mv-glow-spread, 0px);
    --_opacity: var(--mv-glow-opacity, 0.7);
    padding: var(--_border);
  }
  :where(.mv-glow[data-variant="neon"])::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: conic-gradient(from var(--mv-glow-angle), var(--_c1), var(--_c2), var(--_c3), var(--_c2), var(--_c1));
    pointer-events: none;
  }
  :where(.mv-glow[data-variant="neon"]) > :where(*) {
    --mv-card-radius: calc(var(--_r) - var(--_border));
    border-radius: calc(var(--_r) - var(--_border));
    border-color: transparent;
  }

  /* data-animate: the gradient slowly rotates. */
  :where(.mv-glow[data-animate])::before,
  :where(.mv-glow[data-animate])::after { animation: mv-glow-spin var(--_dur) linear infinite; }
  @keyframes mv-glow-spin { to { --mv-glow-angle: 360deg; } }

  @media (prefers-reduced-motion: reduce) {
    :where(.mv-glow)::before, :where(.mv-glow)::after { animation: none; }
  }
  :where([data-motion="reduce"]) :where(.mv-glow)::before,
  :where([data-motion="reduce"]) :where(.mv-glow)::after { animation: none; }
}

/* components/button-effects/button-effects.css */
@property --mv-button-shimmer-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@layer mv.components {
  /*
   * Extensions of .mv-button through data-effect. They only touch the private
   * --_bg/--_fg vars of button.css, pseudo-elements and composited properties.
   * ::after is left alone on busy buttons (aria-busy uses it for the spinner).
   */

  /* ── shimmer: a spark orbits the edge of a dark button ── */
  :where(.mv-button[data-effect="shimmer"]) {
    --_bg: var(--mv-button-shimmer-bg, oklch(0.2 0.03 var(--mv-accent-h)));
    --_bg-hover: color-mix(in oklch, var(--mv-button-shimmer-bg, oklch(0.2 0.03 var(--mv-accent-h))), white 8%);
    --_bg-active: color-mix(in oklch, var(--mv-button-shimmer-bg, oklch(0.2 0.03 var(--mv-accent-h))), white 14%);
    --_fg: oklch(0.99 0 0);
    --_border: oklch(1 0 0 / 0.12);
    isolation: isolate;
    overflow: hidden;
    box-shadow: inset 0 -0.5em 0.75em oklch(1 0 0 / 0.1);
  }
  :where(.mv-button[data-effect="shimmer"])::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -2;
    border-radius: inherit;
    background: conic-gradient(
      from var(--mv-button-shimmer-angle),
      transparent 0 62%,
      color-mix(in oklch, var(--mv-button-shimmer-color, white) 60%, transparent) 78%,
      var(--mv-button-shimmer-color, white) 84%,
      transparent 90%
    );
    animation: mv-button-effects-spin var(--mv-button-shimmer-duration, 3s) linear infinite;
  }
  :where(.mv-button[data-effect="shimmer"]:not([aria-busy="true"]))::after {
    content: "";
    position: absolute;
    inset: var(--mv-button-shimmer-size, 1.5px);
    z-index: -1;
    border-radius: inherit;
    background: inherit;
    box-shadow: inherit;
  }
  @keyframes mv-button-effects-spin { to { --mv-button-shimmer-angle: 360deg; } }

  /* ── rainbow: flowing multi-hue border around an inverted fill, glow beneath ── */
  :where(.mv-button[data-effect="rainbow"]) {
    --_rb: var(--mv-button-rainbow, linear-gradient(90deg,
      oklch(0.72 0.22 20), oklch(0.82 0.16 75), oklch(0.8 0.19 145),
      oklch(0.74 0.15 225), oklch(0.66 0.24 300), oklch(0.72 0.22 20)));
    --_fill: var(--mv-button-rainbow-fill, var(--mv-fg));
    --_bg: linear-gradient(var(--_fill), var(--_fill)) padding-box, var(--_rb) 0 0 / 200% 100% border-box;
    --_bg-hover: linear-gradient(color-mix(in oklch, var(--_fill), var(--mv-bg) 12%), color-mix(in oklch, var(--_fill), var(--mv-bg) 12%)) padding-box, var(--_rb) 0 0 / 200% 100% border-box;
    --_bg-active: var(--_bg-hover);
    --_fg: var(--mv-bg);
    --_border: transparent;
    border-width: 2px;
    isolation: isolate;
    animation: mv-button-effects-rainbow var(--mv-button-rainbow-duration, 3s) linear infinite;
  }
  :where(.mv-button[data-effect="rainbow"])::before {
    content: "";
    position: absolute;
    /* Starts at the bottom edge; clip-path (applied after the blur) keeps it off the fill. */
    inset: 100% 10% auto 10%;
    height: 30%;
    clip-path: inset(0 -50% -300% -50%);
    z-index: -1;
    background: var(--_rb) 0 0 / 200% 100%;
    filter: blur(0.6rem);
    opacity: 0.9;
    animation: mv-button-effects-rainbow-glow var(--mv-button-rainbow-duration, 3s) linear infinite;
  }
  @keyframes mv-button-effects-rainbow { to { background-position: 0 0, -200% 0; } }
  @keyframes mv-button-effects-rainbow-glow { to { background-position: -200% 0; } }

  /* ── pulse: expanding, fading ring ── */
  :where(.mv-button[data-effect="pulse"]) { isolation: isolate; }
  :where(.mv-button[data-effect="pulse"])::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    animation: mv-button-effects-pulse var(--mv-button-pulse-duration, 1.8s) var(--mv-ease-out) infinite;
    pointer-events: none;
  }
  @keyframes mv-button-effects-pulse {
    from { box-shadow: 0 0 0 0 color-mix(in oklch, var(--mv-button-pulse-color, var(--mv-accent)) 55%, transparent); }
    to { box-shadow: 0 0 0 var(--mv-button-pulse-size, 0.8rem) transparent; }
  }

  /* ── push: 3D pushable key (lifts on hover, sinks on press) ── */
  :where(.mv-button[data-effect="push"]) {
    --_edge: var(--mv-button-edge, color-mix(in oklch, var(--_bg), black 32%));
    --_lift: var(--mv-button-lift, 4px);
    translate: 0 0;
    box-shadow: 0 var(--_lift) 0 var(--_edge), 0 calc(var(--_lift) + 6px) 14px -6px var(--mv-shadow-color);
    transition:
      background-color var(--mv-duration-fast) var(--mv-ease-out),
      color var(--mv-duration-fast) var(--mv-ease-out),
      translate var(--mv-duration-slow) var(--mv-ease-spring),
      box-shadow var(--mv-duration-slow) var(--mv-ease-spring),
      transform var(--mv-duration-instant) var(--mv-ease-out);
  }
  :where(.mv-button[data-effect="push"]:is([data-variant="outline"], [data-variant="secondary"], [data-variant="ghost"])) {
    --_edge: var(--mv-button-edge, var(--mv-border-strong));
  }
  @media (hover: hover) {
    :where(.mv-button[data-effect="push"]):hover {
      translate: 0 calc(-2px * var(--mv-motion));
      box-shadow: 0 calc(var(--_lift) + 2px) 0 var(--_edge), 0 calc(var(--_lift) + 10px) 18px -6px var(--mv-shadow-color);
    }
  }
  :where(.mv-button[data-effect="push"]):focus-visible {
    box-shadow: 0 var(--_lift) 0 var(--_edge), var(--mv-focus-ring);
  }
  :where(.mv-button[data-effect="push"]):active:not(:disabled) {
    translate: 0 var(--_lift);
    box-shadow: 0 0 0 var(--_edge), 0 2px 4px -2px var(--mv-shadow-color);
    transition-duration: var(--mv-duration-instant);
  }

  /* ── shine: a light band sweeps across on hover / keyboard focus ── */
  :where(.mv-button[data-effect="shine"]) { isolation: isolate; overflow: hidden; }
  :where(.mv-button[data-effect="shine"])::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, var(--mv-button-shine-color, oklch(1 0 0 / 0.5)) 50%, transparent 70%);
    translate: -110% 0;
    pointer-events: none;
  }
  :where(.mv-button[data-effect="shine"]):is(:hover, :focus-visible)::before {
    translate: 110% 0;
    transition: translate var(--mv-duration-slower) var(--mv-ease-in-out);
  }

  /* ── arrow: a dot floods the button, the label slides, an arrow appears.
        Markup: <button class="mv-button" data-effect="arrow"><span>Label</span></button> ── */
  :where(.mv-button[data-effect="arrow"]) {
    --_flood: var(--mv-button-flood, var(--mv-accent));
    isolation: isolate;
    overflow: hidden;
    padding-inline: calc(var(--_px) + 1em);
  }
  :where(.mv-button[data-effect="arrow"]:not([data-variant])) { --_flood: var(--mv-button-flood, var(--mv-accent-active)); }
  :where(.mv-button[data-effect="arrow"])::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--_px) + 0.1em);
    top: 50%;
    width: 0.5em;
    height: 0.5em;
    margin-top: -0.25em;
    z-index: -1;
    border-radius: 50%;
    background: var(--_flood);
    transition: scale var(--mv-duration-slower) var(--mv-ease-out);
  }
  :where(.mv-button[data-effect="arrow"]) > :where(span) {
    transition: translate var(--mv-duration-slow) var(--mv-ease-out);
  }
  :where(.mv-button[data-effect="arrow"]:not([aria-busy="true"]))::after {
    content: "";
    position: absolute;
    inset-inline-end: var(--_px);
    top: 50%;
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0;
    translate: -0.6em 0;
    transition:
      opacity var(--mv-duration-normal) var(--mv-ease-out),
      translate var(--mv-duration-slow) var(--mv-ease-out);
  }
  :where(.mv-button[data-effect="arrow"]):is(:hover, :focus-visible) { --_fg: var(--mv-fg-on-accent); }
  :where(.mv-button[data-effect="arrow"]):is(:hover, :focus-visible)::before { scale: 80; }
  :where(.mv-button[data-effect="arrow"]):is(:hover, :focus-visible) > :where(span) { translate: -0.7em 0; }
  :where(.mv-button[data-effect="arrow"]):is(:hover, :focus-visible)::after { opacity: 1; translate: 0 0; }

  /* ── glow: coloured halo that intensifies on hover ── */
  :where(.mv-button[data-effect="glow"]) {
    --_glow: var(--mv-button-glow-color, var(--mv-accent));
    box-shadow:
      0 0 0 1px color-mix(in oklch, var(--_glow) 35%, transparent),
      0 4px 18px -4px color-mix(in oklch, var(--_glow) 60%, transparent),
      inset 0 1px 0 oklch(1 0 0 / 0.22);
  }
  :where(.mv-button[data-effect="glow"]):hover {
    box-shadow:
      0 0 0 1px color-mix(in oklch, var(--_glow) 55%, transparent),
      0 6px 30px 0 color-mix(in oklch, var(--_glow) 70%, transparent),
      inset 0 1px 0 oklch(1 0 0 / 0.3);
  }
  :where(.mv-button[data-effect="glow"]):focus-visible {
    box-shadow: 0 6px 30px 0 color-mix(in oklch, var(--_glow) 70%, transparent), var(--mv-focus-ring);
  }

  /* Reduced motion: continuous loops stop (the spark and rainbow stay, frozen). */
  @media (prefers-reduced-motion: reduce) {
    :where(.mv-button[data-effect]), :where(.mv-button[data-effect])::before { animation: none; }
  }
  :where([data-motion="reduce"]) :where(.mv-button[data-effect]),
  :where([data-motion="reduce"]) :where(.mv-button[data-effect])::before { animation: none; }
}

/* components/gradient-text/gradient-text.css */
@layer mv.components {
  /* Multi-stop gradient clipped to the glyphs. Colors are a comma list so any
     number of stops works: --mv-gradient-text-colors: #22d3ee, #a78bfa, #f472b6 */
  :where(.mv-gradient-text) {
    --_colors: var(--mv-gradient-text-colors, var(--mv-accent), color-mix(in oklch, var(--mv-accent), var(--mv-danger)), var(--mv-warning));
    --_angle: var(--mv-gradient-text-angle, 90deg);
    --_duration: var(--mv-gradient-text-duration, 6s);

    color: var(--mv-accent-fg); /* fallback without background-clip:text */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  @supports (background-clip: text) or (-webkit-background-clip: text) {
    :where(.mv-gradient-text) {
      background-image: linear-gradient(var(--_angle), var(--_colors));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  /* Animated: an oversized gradient pans back and forth (yoyo = seamless for any list). */
  :where(.mv-gradient-text[data-animate]) {
    background-size: 300% 100%;
    animation: mv-gradient-text-pan var(--_duration) var(--mv-ease-in-out) infinite alternate;
  }
  :where(.mv-gradient-text[data-animate="y"]) {
    --_angle: var(--mv-gradient-text-angle, 180deg);
    background-size: 100% 300%;
    animation-name: mv-gradient-text-pan-y;
  }
  :where(.mv-gradient-text[data-animate="hover"]) { animation-play-state: paused; }
  :where(.mv-gradient-text[data-animate="hover"]:hover, :hover > .mv-gradient-text[data-animate="hover"], :focus-visible > .mv-gradient-text[data-animate="hover"]) {
    animation-play-state: running;
  }

  /* Fade: editorial heading that fades from the text color toward transparent. */
  :where(.mv-gradient-text[data-variant="fade"]) {
    --_colors: var(--mv-gradient-text-colors, var(--mv-fg) 35%, color-mix(in oklch, var(--mv-fg) 42%, transparent));
    --_angle: var(--mv-gradient-text-angle, 180deg);
  }

  /* Aurora: soft color blobs drifting inside the letters. */
  :where(.mv-gradient-text[data-variant="aurora"]) {
    --_c1: var(--mv-gradient-text-c1, var(--mv-accent));
    --_c2: var(--mv-gradient-text-c2, color-mix(in oklch, var(--mv-accent), var(--mv-danger)));
    --_c3: var(--mv-gradient-text-c3, var(--mv-warning));
    --_c4: var(--mv-gradient-text-c4, var(--mv-info));
    --_duration: var(--mv-gradient-text-duration, 10s);
  }
  @supports (background-clip: text) or (-webkit-background-clip: text) {
    :where(.mv-gradient-text[data-variant="aurora"]) {
      background-image:
        radial-gradient(closest-side, var(--_c1) 25%, transparent),
        radial-gradient(closest-side, var(--_c2) 25%, transparent),
        radial-gradient(closest-side, var(--_c3) 25%, transparent),
        radial-gradient(closest-side, var(--_c4) 25%, transparent),
        linear-gradient(var(--_angle), var(--_c1), var(--_c2), var(--_c1));
      background-size: 55% 220%, 50% 240%, 45% 220%, 55% 230%, 100% 100%;
      background-repeat: no-repeat;
      background-position: 0% 0%, 40% 100%, 80% 20%, 100% 90%, 0 0;
      animation: mv-gradient-text-aurora var(--_duration) var(--mv-ease-in-out) infinite alternate;
    }
  }

  /* Optional glow that follows the glyphs (drop-shadow of the clipped paint). */
  :where(.mv-gradient-text[data-glow]) {
    filter: drop-shadow(0 0 0.3em color-mix(in oklch, var(--mv-gradient-text-glow, var(--mv-accent)) 40%, transparent));
  }

  @keyframes mv-gradient-text-pan {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
  }
  @keyframes mv-gradient-text-pan-y {
    from { background-position: 50% 0%; }
    to { background-position: 50% 100%; }
  }
  @keyframes mv-gradient-text-aurora {
    0% { background-position: 0% 0%, 40% 100%, 80% 20%, 100% 90%, 0 0; }
    33% { background-position: 45% 90%, 100% 10%, 20% 60%, 60% 0%, 0 0; }
    66% { background-position: 100% 30%, 10% 40%, 60% 100%, 0% 50%, 0 0; }
    100% { background-position: 30% 100%, 70% 0%, 0% 10%, 90% 60%, 0 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    :where(html:not([data-motion="full"])) :where(.mv-gradient-text) { animation: none; }
  }
  :where([data-motion="reduce"]) :where(.mv-gradient-text) { animation: none; }
}

/* components/shimmer-text/shimmer-text.css */
@layer mv.components {
  /* A bright band sweeps across muted text: two background layers clipped to
     the glyphs — a narrow moving highlight over a solid base color. */
  :where(.mv-shimmer-text) {
    --_base: var(--mv-shimmer-text-color, var(--mv-fg-muted));
    --_shine: var(--mv-shimmer-text-highlight, var(--mv-fg));
    --_width: var(--mv-shimmer-text-width, 5em);
    --_angle: var(--mv-shimmer-text-angle, 100deg);
    --_duration: var(--mv-shimmer-text-duration, 2.4s);
    --_delay: var(--mv-shimmer-text-delay, 0s);

    color: var(--_base);
  }

  @supports (background-clip: text) or (-webkit-background-clip: text) {
    :where(.mv-shimmer-text:not([data-variant="pulse"])) {
      background:
        linear-gradient(var(--_angle), transparent 0%, var(--_shine) 50%, transparent 100%) no-repeat,
        linear-gradient(var(--_base), var(--_base));
      background-size: var(--_width) 100%, 100% 100%;
      background-position: calc(-1 * var(--_width)) 0, 0 0;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: mv-shimmer-text-sweep var(--_duration) var(--mv-ease-in-out) var(--_delay) infinite;
    }
  }

  :where(.mv-shimmer-text[data-direction="reverse"]) { animation-direction: reverse; }

  /* Only sweep while hovered / focused (the host or its interactive parent). */
  :where(.mv-shimmer-text[data-trigger="hover"]) { animation-play-state: paused; }
  :where(.mv-shimmer-text[data-trigger="hover"]:hover, :hover > .mv-shimmer-text[data-trigger="hover"], :focus-visible > .mv-shimmer-text[data-trigger="hover"]) {
    animation-play-state: running;
  }

  /* Pulse: the whole label breathes between the base and highlight colors. */
  :where(.mv-shimmer-text[data-variant="pulse"]) {
    animation: mv-shimmer-text-pulse var(--_duration) var(--mv-ease-in-out) var(--_delay) infinite;
  }

  /* Thinking dots: three dots revealed one by one after the label. */
  :where(.mv-shimmer-text[data-dots])::after {
    content: "";
    display: inline-block;
    width: 0.9em;
    height: 0.3em;
    margin-inline-start: 0.08em;
    background: radial-gradient(circle closest-side, var(--_base) 55%, transparent 70%) 0 0 / 0.3em 0.3em repeat-x;
    -webkit-mask: linear-gradient(#000 0 0) 0 0 / 0% 100% no-repeat;
    mask: linear-gradient(#000 0 0) 0 0 / 0% 100% no-repeat;
    animation: mv-shimmer-text-dots 1.6s steps(4, jump-none) infinite;
  }

  @keyframes mv-shimmer-text-sweep {
    0% { background-position: calc(-1 * var(--_width)) 0; }
    72%, 100% { background-position: calc(100% + var(--_width)) 0; }
  }
  @keyframes mv-shimmer-text-pulse {
    0%, 100% { color: var(--_base); }
    50% { color: var(--_shine); }
  }
  @keyframes mv-shimmer-text-dots {
    to { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
  }

  /* Reduced motion: plain readable label, all dots visible. */
  @media (prefers-reduced-motion: reduce) {
    :where(html:not([data-motion="full"])) :where(.mv-shimmer-text),
    :where(html:not([data-motion="full"])) :where(.mv-shimmer-text)::after { animation: none; }
    :where(html:not([data-motion="full"])) :where(.mv-shimmer-text[data-dots])::after { -webkit-mask: none; mask: none; }
  }
  :where([data-motion="reduce"]) :where(.mv-shimmer-text),
  :where([data-motion="reduce"]) :where(.mv-shimmer-text)::after { animation: none; }
  :where([data-motion="reduce"]) :where(.mv-shimmer-text[data-dots])::after { -webkit-mask: none; mask: none; }
}

/* components/text-reveal/text-reveal.css */
@layer mv.components {
  :where(mv-text-reveal) {
    --_dur: var(--mv-text-reveal-duration, 700ms);
    --_ease: var(--mv-text-reveal-easing, var(--mv-ease-out));
    --_delay: var(--mv-text-reveal-delay, 0ms);
    --_stagger: var(--mv-text-reveal-stagger, 70ms);
    /* "from" state of the preset; the "to" state is the natural layout */
    --_o: 0;
    --_t: translateY(0.45em);
    --_f: none;
    --_origin: 50% 100%;
  }
  :where(mv-text-reveal[by="chars"]) { --_stagger: var(--mv-text-reveal-stagger, 28ms); }
  :where(mv-text-reveal[by="lines"]) { --_stagger: var(--mv-text-reveal-stagger, 160ms); }

  :where(mv-text-reveal[effect="blur"]) { --_t: translateY(0.15em); --_f: blur(0.3em); }
  :where(mv-text-reveal[effect="slide"]) { --_t: translateX(-0.55em); --_f: blur(0.04em); }
  :where(mv-text-reveal[effect="rotate"]) { --_t: perspective(6em) rotateX(-85deg) translateY(0.2em); --_origin: 50% 0%; }
  :where(mv-text-reveal[effect="scale"]) { --_t: scale(0.35); --_f: blur(0.06em); --_origin: 50% 70%; }
  :where(mv-text-reveal[effect="mask"]) {
    --_o: 1;
    --_t: translateY(118%);
    --_dur: var(--mv-text-reveal-duration, 900ms);
    --_ease: var(--mv-text-reveal-easing, var(--mv-ease-emphasized));
  }

  :where(.mv-text-reveal-sr) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  :where(.mv-text-reveal-word) { display: inline-block; white-space: nowrap; }
  :where(.mv-text-reveal-piece) { display: inline-block; transform-origin: var(--_origin); }

  :where(mv-text-reveal[data-state="idle"]) :where(.mv-text-reveal-piece) {
    opacity: var(--_o);
    transform: var(--_t);
    filter: var(--_f);
  }
  :where(mv-text-reveal[data-state="play"]) :where(.mv-text-reveal-piece) {
    animation: mv-text-reveal-in var(--_dur) var(--_ease) calc(var(--_delay) + var(--mv-i, 0) * var(--_stagger)) both;
    will-change: transform, opacity;
  }
  /* mask: each word becomes a clipping window the pieces rise through */
  :where(mv-text-reveal[effect="mask"]:is([data-state="idle"], [data-state="play"])) :where(.mv-text-reveal-word) {
    clip-path: inset(-0.4em -0.2em -0.14em);
  }

  @keyframes mv-text-reveal-in {
    from { opacity: var(--_o); transform: var(--_t); filter: var(--_f); }
  }

  @media (prefers-reduced-motion: reduce) {
    :where(mv-text-reveal:not([data-motion="full"] *)) :where(.mv-text-reveal-piece) {
      animation: none;
      opacity: 1;
      transform: none;
      filter: none;
    }
  }
  :where([data-motion="reduce"]) :where(.mv-text-reveal-piece) {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* components/morphing-text/morphing-text.css */
@layer mv.components {
  :where(mv-morphing-text) {
    display: inline-block;
  }

  :where(.mv-morphing-text-sr) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  :where(.mv-morphing-text-defs) { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

  /* Every word is stacked in one grid cell: the box is sized by the longest word, so nothing reflows. */
  :where(.mv-morphing-text-visual),
  :where(.mv-morphing-text-sizers),
  :where(.mv-morphing-text-stage) {
    display: inline-grid;
    justify-items: var(--mv-morphing-text-align, center);
    align-items: center;
  }
  :where(.mv-morphing-text-visual) > *,
  :where(.mv-morphing-text-sizers) > *,
  :where(.mv-morphing-text-stage) > * {
    grid-area: 1 / 1;
    white-space: nowrap;
  }
  :where(.mv-morphing-text-sizers) { visibility: hidden; }
  :where(.mv-morphing-text-stage) { pointer-events: none; user-select: none; }
  :where(.mv-morphing-text-stage[data-morphing]) { filter: var(--_filter); }
  :where(.mv-morphing-text-a, .mv-morphing-text-b) { will-change: filter, opacity; }
}

/* components/number-ticker/number-ticker.css */
@layer mv.components {
  :where(mv-number-ticker) {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  :where(.mv-number-ticker-sr) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* count: live text stacked over invisible start/end sizers → fixed width */
  :where(.mv-number-ticker-count) {
    display: inline-grid;
    justify-items: var(--mv-number-ticker-align, end);
  }
  :where(.mv-number-ticker-count) > * { grid-area: 1 / 1; }
  :where(.mv-number-ticker-count) > :where(.mv-number-ticker-sizer) { visibility: hidden; }

  /* roll: each digit is a reel clipped to one line */
  :where(.mv-number-ticker-col) {
    --_pad: var(--mv-number-ticker-fade, 0.14em);
    position: relative;
    display: inline-block;
    padding-block: var(--_pad);
    margin-block: calc(-1 * var(--_pad));
    /* mask (not overflow) keeps the inline-block baseline on the sizer digit */
    -webkit-mask-image: linear-gradient(to bottom, transparent var(--_pad), #000 calc(var(--_pad) + 0.1em), #000 calc(100% - var(--_pad) - 0.1em), transparent calc(100% - var(--_pad)));
    mask-image: linear-gradient(to bottom, transparent var(--_pad), #000 calc(var(--_pad) + 0.1em), #000 calc(100% - var(--_pad) - 0.1em), transparent calc(100% - var(--_pad)));
  }
  :where(.mv-number-ticker-col) > :where(.mv-number-ticker-sizer) { visibility: hidden; }
  :where(.mv-number-ticker-strip) {
    position: absolute;
    inset: var(--_pad) 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(calc(var(--_pos, 10) * -100% / 30));
    transition: transform var(--_dur, 1400ms) var(--_ease, var(--mv-ease-out))
      calc(var(--_delay, 0ms) + var(--mv-i, 0) * var(--_stagger, 60ms));
  }
  :where(.mv-number-ticker-strip) > * { display: block; }
  :where(.mv-number-ticker-visual[data-instant]) :where(.mv-number-ticker-strip) { transition: none; }

  /* a whisper of motion blur while a reel spins */
  :where(.mv-number-ticker-col[data-moving]) :where(.mv-number-ticker-strip) {
    animation: mv-number-ticker-blur var(--_dur, 1400ms) var(--mv-ease-out)
      calc(var(--_delay, 0ms) + var(--mv-i, 0) * var(--_stagger, 60ms)) both;
  }
  @keyframes mv-number-ticker-blur {
    0% { filter: blur(0); }
    18% { filter: blur(0.045em); }
    60%, 100% { filter: blur(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.mv-number-ticker-strip) { transition: none; animation: none; }
  }
  :where([data-motion="reduce"]) :where(.mv-number-ticker-strip) { transition: none; animation: none; }
}

/* components/marquee/marquee.css */
@layer mv.components {
  :where(mv-marquee) {
    --_gap: var(--mv-marquee-gap, var(--mv-space-4));
    --_fade: var(--mv-marquee-fade, 12%);
    position: relative;
    display: flex;
    gap: var(--_gap);
    width: 100%;
    min-width: 0;
    /* The track is max-content wide: never let it size the host or its parents. */
    contain: inline-size;
    overflow: clip;
    overflow-clip-margin: var(--mv-marquee-clip-margin, 0px);
    padding-block: var(--mv-marquee-padding, 0);
    outline: none;
  }
  :where(mv-marquee[vertical]) {
    flex-direction: column;
    height: var(--mv-marquee-height, 20rem);
  }
  :where(mv-marquee) > :where(.mv-marquee-lane) { flex: 1 1 auto; min-width: 0; min-height: 0; }

  :where(.mv-marquee-track) {
    display: flex;
    width: max-content;
    will-change: transform;
  }
  :where(.mv-marquee-group) {
    display: flex;
    flex: none;
    align-items: var(--mv-marquee-align, center);
    gap: var(--_gap);
    padding-inline-end: var(--_gap);
  }
  :where(.mv-marquee-group) > :where(*) { flex: none; }

  :where(mv-marquee[vertical]) :where(.mv-marquee-track) { flex-direction: column; width: auto; }
  :where(mv-marquee[vertical]) :where(.mv-marquee-group) {
    flex-direction: column;
    align-items: stretch;
    padding-inline-end: 0;
    padding-block-end: var(--_gap);
  }

  /* Edge fade */
  :where(mv-marquee[fade]) {
    mask-image: linear-gradient(to right, transparent, #000 var(--_fade), #000 calc(100% - var(--_fade)), transparent);
  }
  :where(mv-marquee[fade][vertical]) {
    mask-image: linear-gradient(to bottom, transparent, #000 var(--_fade), #000 calc(100% - var(--_fade)), transparent);
  }

  /* Draggable */
  :where(mv-marquee[drag]:not([data-static])) { cursor: grab; touch-action: pan-y; }
  :where(mv-marquee[drag][vertical]:not([data-static])) { touch-action: pan-x; }
  :where(mv-marquee[data-dragging]) { cursor: grabbing; user-select: none; }
  :where(mv-marquee[data-dragging]) :where(*) { pointer-events: none; }
  :where(mv-marquee[drag]):focus-visible { box-shadow: inset 0 0 0 2px var(--mv-ring); border-radius: var(--mv-radius-md); }

  /* Reduced motion: a static, natively scrollable row */
  :where(mv-marquee[data-static]:not([data-variant="3d"])) {
    overflow: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }
  :where(mv-marquee[data-static][vertical]) { scroll-snap-type: y proximity; }
  :where(mv-marquee[fade][data-static]:not([data-variant="3d"])) {
    mask-image: linear-gradient(to right, #000 calc(100% - var(--_fade)), transparent);
  }
  :where(mv-marquee[fade][data-static][vertical]) {
    mask-image: linear-gradient(to bottom, #000 calc(100% - var(--_fade)), transparent);
  }
  :where(mv-marquee[data-static]:not([data-variant="3d"])) :where(.mv-marquee-group > *) { scroll-snap-align: start; }
  :where(mv-marquee[data-static]:not([data-variant="3d"])) :where(.mv-marquee-copy) { display: none; }

  /* ── 3D variant: tilted plane of vertical lanes ─────────────── */
  :where(mv-marquee[data-variant="3d"]) {
    --_gap: var(--mv-marquee-gap, var(--mv-space-5));
    display: block;
    height: var(--mv-marquee-height, 28rem);
    container-type: size;
    border-radius: var(--mv-marquee-radius, var(--mv-radius-2xl));
    perspective: var(--mv-marquee-perspective, 2400px);
  }
  :where(mv-marquee[data-variant="3d"][fade]) {
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent 100%);
  }
  :where(.mv-marquee-plane) {
    --_size: calc((100cqw + 100cqh / 0.57) * 0.72);
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    grid-template-columns: repeat(var(--_cols, 4), minmax(0, 1fr));
    gap: var(--_gap);
    width: var(--_size);
    height: var(--_size);
    transform: translate(-50%, -50%) rotateX(var(--mv-marquee-tilt-x, 52deg)) rotateZ(var(--mv-marquee-tilt-z, -42deg));
    transform-origin: 50% 50%;
  }
  :where(.mv-marquee-plane) > :where(.mv-marquee-lane) { position: relative; min-height: 0; }
  /* Decorative grid lines between lanes */
  :where(.mv-marquee-plane) > :where(.mv-marquee-lane + .mv-marquee-lane)::before {
    content: "";
    position: absolute;
    inset: -100% auto -100% calc(var(--_gap) / -2);
    border-inline-start: 1px dashed color-mix(in oklch, var(--mv-fg) 12%, transparent);
    pointer-events: none;
  }
  :where(.mv-marquee-plane) :where(.mv-marquee-track) { width: 100%; flex-direction: column; }
  :where(.mv-marquee-plane) :where(.mv-marquee-group) {
    flex-direction: column;
    align-items: stretch;
    padding-inline-end: 0;
    padding-block-end: var(--_gap);
  }
  :where(.mv-marquee-plane) :where(.mv-marquee-group > *) {
    border-radius: var(--mv-radius-lg);
    box-shadow: var(--mv-shadow-lg);
    transition: translate var(--mv-duration-slow) var(--mv-ease-out), box-shadow var(--mv-duration-slow) var(--mv-ease-out);
  }
  :where(.mv-marquee-plane) :where(.mv-marquee-group > *):hover {
    translate: calc(-6px * var(--mv-motion)) calc(-10px * var(--mv-motion));
    box-shadow: var(--mv-shadow-xl);
  }
}

/* components/bento-grid/bento-grid.css */
@layer mv.components {
  /*
   * 12 sub-columns: a card's span is (width × unit). Cards read the grid's own
   * container size, so the layout adapts to where it is placed, not to the viewport.
   */
  :where(.mv-bento) {
    --_unit: 4; /* 12 / 3 columns */
    container: mv-bento / inline-size;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: var(--mv-bento-row, 17rem);
    grid-auto-flow: row dense;
    gap: var(--mv-bento-gap, var(--mv-space-4));
    width: 100%;
  }
  :where(.mv-bento[data-columns="4"]) { --_unit: 3; }
  :where(.mv-bento[data-columns="2"]) { --_unit: 6; }

  :where(.mv-bento-card) {
    --_w: 1;
    --_h: 1;
    --_pad: var(--mv-bento-padding, var(--mv-space-5));
    --_bg: var(--mv-bento-bg, var(--mv-surface));
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    grid-column: span calc(var(--_w) * var(--_unit));
    grid-row: span var(--_h);
    min-width: 0;
    overflow: clip;
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-bento-radius, var(--mv-radius-2xl));
    background: var(--_bg);
    color: var(--mv-fg);
    box-shadow: var(--mv-shadow-xs), inset 0 1px 0 color-mix(in oklch, white 6%, transparent);
    transition:
      box-shadow var(--mv-duration-slow) var(--mv-ease-out),
      border-color var(--mv-duration-normal) var(--mv-ease-out),
      translate var(--mv-duration-slow) var(--mv-ease-out);
  }
  :where(.mv-bento-card[data-span="2x1"]) { --_w: 2; }
  :where(.mv-bento-card[data-span="3x1"]) { --_w: 3; }
  :where(.mv-bento-card[data-span="4x1"]) { --_w: 4; }
  :where(.mv-bento-card[data-span="1x2"]) { --_h: 2; }
  :where(.mv-bento-card[data-span="2x2"]) { --_w: 2; --_h: 2; }
  :where(.mv-bento-card[data-span="3x2"]) { --_w: 3; --_h: 2; }
  :where(.mv-bento-card[data-span="1x3"]) { --_h: 3; }

  /* Hover layer: soft wash that deepens the card */
  :where(.mv-bento-card)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(120% 80% at 50% 0%, color-mix(in oklch, var(--mv-accent) 7%, transparent), transparent 70%);
    opacity: 0;
    transition: opacity var(--mv-duration-slow) var(--mv-ease-out);
    pointer-events: none;
  }

  /* Visual area: fills the card, fades into the surface behind the text */
  :where(.mv-bento-visual) {
    position: absolute;
    inset: 0 0 auto;
    height: var(--mv-bento-visual-height, 70%);
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, #000 50%, transparent);
    transition: scale var(--mv-duration-slower) var(--mv-ease-out), translate var(--mv-duration-slower) var(--mv-ease-out);
    transform-origin: 50% 30%;
  }
  :where(.mv-bento-visual) > :where(img, video, svg) { width: 100%; height: 100%; object-fit: cover; }

  :where(.mv-bento-body) {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--mv-space-1);
    padding: var(--_pad);
    transition: translate var(--mv-duration-slow) var(--mv-ease-out);
  }
  /* Scrim so text stays legible over the visual */
  :where(.mv-bento-body)::before {
    content: "";
    position: absolute;
    inset: -1.25rem 0 -3rem;
    z-index: -1;
    background: linear-gradient(to bottom, transparent, color-mix(in oklch, var(--_bg) 85%, transparent) 2.5rem);
    pointer-events: none;
  }
  :where(.mv-bento-icon) {
    width: 1.75rem;
    height: 1.75rem;
    margin-bottom: var(--mv-space-2);
    color: var(--mv-fg-muted);
    transform-origin: left center;
    transition: scale var(--mv-duration-slow) var(--mv-ease-out), color var(--mv-duration-slow) var(--mv-ease-out);
  }
  :where(.mv-bento-title) {
    margin: 0;
    font-size: var(--mv-text-lg);
    font-weight: var(--mv-weight-semibold);
    letter-spacing: var(--mv-tracking-tight);
    line-height: var(--mv-leading-snug);
    text-wrap: balance;
  }
  :where(.mv-bento-description) {
    margin: 0;
    max-width: 38ch;
    color: var(--mv-fg-muted);
    font-size: var(--mv-text-sm);
    line-height: var(--mv-leading-normal);
    text-wrap: pretty;
  }

  /* CTA: hidden below the fold of the card, slides in on hover / focus */
  :where(.mv-bento-cta) {
    position: absolute;
    inset: auto var(--_pad) var(--_pad) var(--_pad);
    display: inline-flex;
    align-items: center;
    gap: var(--mv-space-1-5);
    width: fit-content;
    color: var(--mv-accent-fg);
    font-size: var(--mv-text-sm);
    font-weight: var(--mv-weight-medium);
    text-decoration: none;
    opacity: 0;
    translate: 0 calc(0.75rem * var(--mv-motion));
    transition: opacity var(--mv-duration-normal) var(--mv-ease-out), translate var(--mv-duration-slow) var(--mv-ease-out);
    outline: none;
  }
  :where(.mv-bento-cta) :where(svg) { width: 1em; height: 1em; transition: translate var(--mv-duration-normal) var(--mv-ease-out); }
  :where(.mv-bento-cta):hover :where(svg) { translate: calc(3px * var(--mv-motion)) 0; }
  /* Whole card clickable through the CTA */
  :where(.mv-bento-cta)::before { content: ""; position: absolute; inset: -100vmax; }
  :where(.mv-bento-card):has(.mv-bento-cta) { cursor: pointer; }

  /* ── Hover / focus reveal ─────────────────────────────────── */
  :where(.mv-bento-card):is(:hover, :focus-within) {
    border-color: var(--mv-border-strong);
    box-shadow: var(--mv-shadow-lg), inset 0 1px 0 color-mix(in oklch, white 6%, transparent);
  }
  :where(.mv-bento-card):is(:hover, :focus-within)::after { opacity: 1; }
  :where(.mv-bento-card):is(:hover, :focus-within) :where(.mv-bento-visual) { scale: calc(1 + 0.03 * var(--mv-motion)); }
  :where(.mv-bento-card):has(.mv-bento-cta):is(:hover, :focus-within) :where(.mv-bento-body) { translate: 0 calc(-2.25rem); }
  :where(.mv-bento-card):is(:hover, :focus-within) :where(.mv-bento-icon) { scale: 0.8; color: var(--mv-accent-fg); }
  :where(.mv-bento-card):is(:hover, :focus-within) :where(.mv-bento-cta) { opacity: 1; translate: 0 0; }
  :where(.mv-bento-card):has(.mv-bento-cta:focus-visible) { box-shadow: var(--mv-focus-ring); }

  /* Touch screens: no hover, so everything is shown up front */
  @media (hover: none) {
    :where(.mv-bento-card):has(.mv-bento-cta) :where(.mv-bento-body) { translate: 0 -2.25rem; }
    :where(.mv-bento-cta) { opacity: 1; translate: 0 0; }
  }

  /* Variants */
  :where(.mv-bento-card[data-variant="accent"]) {
    background: linear-gradient(160deg, color-mix(in oklch, var(--mv-accent) 16%, var(--_bg)), var(--_bg) 60%);
  }
  :where(.mv-bento-card[data-variant="muted"]) { --_bg: var(--mv-bento-bg, var(--mv-bg-subtle)); box-shadow: none; }

  /* ── Responsive (container size, not viewport) ───────────── */
  @container mv-bento (max-width: 52rem) {
    :where(.mv-bento-card) { grid-column: span calc(min(var(--_w), 2) * 6); }
  }
  @container mv-bento (max-width: 34rem) {
    :where(.mv-bento-card) { grid-column: 1 / -1; grid-row: span min(var(--_h), 2); }
  }
}

/* components/orbiting-circles/orbiting-circles.css */
@layer mv.components {
  :where(mv-orbit) {
    position: relative;
    display: block;
    flex: none;
    width: var(--mv-orbit-size, var(--_auto-size, 20rem));
    max-width: 100%;
    aspect-ratio: 1;
    isolation: isolate;
  }

  :where(mv-orbit) > :where([data-center]) {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    translate: -50% -50%;
  }

  :where(.mv-orbit-ring) {
    --_radius: var(--mv-orbit-radius, var(--_r, 120px));
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  /* Orbit path */
  :where(mv-orbit[path]) :where(.mv-orbit-ring)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: calc(var(--_radius) * 2);
    aspect-ratio: 1;
    border: 1px var(--mv-orbit-path-style, solid) var(--mv-orbit-path-color, color-mix(in oklch, var(--mv-fg) 12%, transparent));
    border-radius: 50%;
    translate: -50% -50%;
  }
  :where(mv-orbit[path]) :where(.mv-orbit-ring[data-path="dashed"])::before { border-style: dashed; }
  :where(mv-orbit[path]) :where(.mv-orbit-ring[data-path="none"])::before { content: none; }

  :where(.mv-orbit-item) {
    --_a: calc(360deg / var(--_n, 1) * var(--_i, 0) + var(--mv-orbit-offset, 0deg));
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: var(--mv-orbit-item-size, 2.75rem);
    height: var(--mv-orbit-item-size, 2.75rem);
    pointer-events: auto;
    translate: -50% -50%;
    transform: rotate(var(--_a)) translateX(var(--_radius)) rotate(calc(-1 * var(--_a)));
    animation: mv-orbit-spin var(--_dur, 20s) linear infinite;
    will-change: transform;
  }
  :where(.mv-orbit-ring[data-reverse]) :where(.mv-orbit-item) { animation-direction: reverse; }
  :where(mv-orbit[data-paused]) :where(.mv-orbit-item),
  :where(mv-orbit[paused]) :where(.mv-orbit-item) { animation-play-state: paused; }

  @keyframes mv-orbit-spin {
    from { transform: rotate(var(--_a)) translateX(var(--_radius)) rotate(calc(-1 * var(--_a))); }
    to { transform: rotate(calc(var(--_a) + 360deg)) translateX(var(--_radius)) rotate(calc(-1 * var(--_a) - 360deg)); }
  }

  /* Reduced motion: a still constellation */
  @media (prefers-reduced-motion: reduce) {
    :where(html:not([data-motion="full"])) :where(.mv-orbit-item) { animation: none; }
  }
  :where([data-motion="reduce"]) :where(.mv-orbit-item) { animation: none; }
}

/* components/animated-beam/animated-beam.css */
@layer mv.components {
  /* Covers its positioned container; put the nodes above it (z-index) */
  :where(mv-animated-beam) {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
    overflow: visible;
  }
  :where(.mv-animated-beam-svg) { position: absolute; inset: 0; overflow: visible; }

  :where(.mv-animated-beam-track) {
    stroke: var(--mv-beam-path-color, color-mix(in oklch, var(--mv-fg) 14%, transparent));
    stroke-width: var(--mv-beam-path-width, 2px);
    stroke-linecap: round;
  }
  :where(.mv-animated-beam-pulse) {
    stroke-width: var(--mv-beam-width, 2px);
    stroke-linecap: round;
  }
  :where(.mv-animated-beam-stop-a0) { stop-color: var(--mv-beam-from, var(--mv-accent)); stop-opacity: 0; }
  :where(.mv-animated-beam-stop-a1) { stop-color: var(--mv-beam-from, var(--mv-accent)); stop-opacity: 1; }
  :where(.mv-animated-beam-stop-b1) { stop-color: var(--mv-beam-to, oklch(0.75 0.16 calc(var(--mv-accent-h) - 80))); stop-opacity: 1; }
  :where(.mv-animated-beam-stop-b0) { stop-color: var(--mv-beam-to, oklch(0.75 0.16 calc(var(--mv-accent-h) - 80))); stop-opacity: 0; }

  /* Reduced motion: no traveling pulse, a slightly stronger static link instead */
  :where(mv-animated-beam[data-static]) :where(.mv-animated-beam-pulse) { display: none; }
  :where(mv-animated-beam[data-static]) :where(.mv-animated-beam-track) {
    stroke: var(--mv-beam-path-color, color-mix(in oklch, var(--mv-accent) 45%, transparent));
  }
}

/* components/scroll-reveal/scroll-reveal.css */
@layer mv.components {
  /* ── Effect presets (shared by <mv-reveal> and the CSS-only classes) ──
     --_x / --_y: start offset, --_s: start scale, --_b: start blur. */
  :where(mv-reveal, .mv-reveal, .mv-reveal-group) {
    --_d: var(--mv-reveal-distance, 1.5rem);
    --_x: 0px;
    --_y: var(--_d);
    --_s: 1;
    --_b: 0px;
  }
  :where(mv-reveal, .mv-reveal, .mv-reveal-group):where([effect="fade"], [data-effect="fade"]) { --_y: 0px; }
  :where(mv-reveal, .mv-reveal, .mv-reveal-group):where([effect="fade-down"], [data-effect="fade-down"]) { --_y: calc(var(--_d) * -1); }
  :where(mv-reveal, .mv-reveal, .mv-reveal-group):where([effect="blur"], [data-effect="blur"]) {
    --_y: calc(var(--_d) * 0.4);
    --_b: var(--mv-reveal-blur, 12px);
  }
  :where(mv-reveal, .mv-reveal, .mv-reveal-group):where([effect="scale"], [data-effect="scale"]) {
    --_y: calc(var(--_d) * 0.5);
    --_s: 0.9;
    --_b: 4px;
  }
  :where(mv-reveal, .mv-reveal, .mv-reveal-group):where([effect="slide-left"], [data-effect="slide-left"]) { --_x: calc(var(--_d) * -2); --_y: 0px; }
  :where(mv-reveal, .mv-reveal, .mv-reveal-group):where([effect="slide-right"], [data-effect="slide-right"]) { --_x: calc(var(--_d) * 2); --_y: 0px; }

  /* ── <mv-reveal>: IntersectionObserver-triggered, staggered transitions ── */
  :where(mv-reveal) {
    display: block;
    --_dur: var(--mv-reveal-duration, var(--mv-duration-slower));
    --_ease: var(--mv-reveal-easing, var(--mv-ease-out));
  }
  :where(mv-reveal) > * {
    transition-property: opacity, translate, scale, filter;
    transition-duration: var(--_dur);
    transition-timing-function: var(--_ease);
    /* Stagger collapses to 0 under reduced motion (--mv-motion: 0). */
    transition-delay: calc((var(--mv-reveal-delay, 0ms) + var(--mv-reveal-i, 0) * var(--mv-reveal-stagger, 90ms)) * var(--mv-motion));
  }
  :where(mv-reveal[data-state="hidden"]) > * {
    opacity: 0;
    translate: calc(var(--_x) * var(--mv-motion)) calc(var(--_y) * var(--mv-motion));
    scale: calc(1 - (1 - var(--_s)) * var(--mv-motion));
    filter: blur(calc(var(--_b) * var(--mv-motion)));
    transition-duration: calc(var(--_dur) * 0.5);
    transition-delay: 0s;
  }

  /* ── .mv-reveal / .mv-reveal-group: CSS-only, scrubbed by a view timeline ──
     Browsers without scroll-driven animations simply show the content. */
  @supports (animation-timeline: view()) {
    :where(.mv-reveal, .mv-reveal-group > *) {
      animation: mv-reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }
    /* Items side by side share the same scroll position: offset their ranges. */
    :where(.mv-reveal-group > *) {
      animation-range: entry calc((sibling-index() - 1) * 5%) cover calc(25% + (sibling-index() - 1) * 5%);
    }
  }
  @keyframes mv-reveal-in {
    from {
      /* Fully visible under reduced motion: opacity goes 0 → 1 only when --mv-motion is 1. */
      opacity: calc(1 - var(--mv-motion));
      translate: calc(var(--_x) * var(--mv-motion)) calc(var(--_y) * var(--mv-motion));
      scale: calc(1 - (1 - var(--_s)) * var(--mv-motion));
      filter: blur(calc(var(--_b) * var(--mv-motion)));
    }
  }

  @media print {
    :where(mv-reveal) > * { opacity: 1 !important; translate: none !important; scale: none !important; filter: none !important; }
  }
}

/* components/scroll-progress/scroll-progress.css */
@layer mv.components {
  @property --mv-scroll-progress { syntax: "<number>"; inherits: true; initial-value: 0; }
  @property --_mv-sp-pct { syntax: "<integer>"; inherits: true; initial-value: 0; }

  :where(.mv-scroll-progress, mv-scroll-progress) {
    --_fill: var(--mv-scroll-progress-color, linear-gradient(90deg, var(--mv-accent), oklch(0.72 0.17 calc(var(--mv-accent-h) + 50))));
    --_size: var(--mv-scroll-progress-size, 3px);
    pointer-events: none;
  }

  /* ── .mv-scroll-progress — CSS-only page (or container) bar ───────── */
  :where(.mv-scroll-progress) {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--mv-z-sticky);
    display: block;
    height: var(--_size);
    background: var(--_fill);
    transform-origin: 0 50%;
    scale: 0 1;
  }
  /* Inside a scroll container: sticks to its top edge and follows it. */
  :where(.mv-scroll-progress[data-scope="nearest"]) { position: sticky; top: 0; }

  @supports (animation-timeline: scroll()) {
    :where(.mv-scroll-progress) {
      animation: mv-scroll-progress-grow linear both;
      animation-timeline: scroll(root block);
    }
    :where(.mv-scroll-progress[data-scope="nearest"]) { animation-timeline: scroll(nearest block); }
  }
  @keyframes mv-scroll-progress-grow { to { scale: 1 1; } }

  /* ── <mv-scroll-progress> ─────────────────────────────────────────── */
  @supports (animation-timeline: scroll()) {
    :where(mv-scroll-progress:not([data-js], [scroller], [fallback])) {
      animation: mv-scroll-progress-value linear both;
      animation-timeline: scroll(nearest block);
    }
  }
  @keyframes mv-scroll-progress-value {
    from { --mv-scroll-progress: 0; --_mv-sp-pct: 0; }
    to { --mv-scroll-progress: 1; --_mv-sp-pct: 100; }
  }

  :where(mv-scroll-progress) {
    display: block;
    height: var(--_size);
    border-radius: var(--mv-radius-full);
    background: var(--mv-scroll-progress-track, transparent);
    overflow: hidden;
  }
  :where(mv-scroll-progress[fixed]) {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--mv-z-sticky);
    border-radius: 0;
  }
  :where(.mv-scroll-progress-fill) {
    display: block;
    height: 100%;
    background: var(--_fill);
    transform-origin: 0 50%;
    scale: var(--mv-scroll-progress) 1;
    border-radius: inherit;
  }

  /* Circle: ring + percentage */
  :where(mv-scroll-progress[variant="circle"]) {
    --_size: var(--mv-scroll-progress-size, 3rem);
    --_stroke: var(--mv-scroll-progress-stroke, 3);
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--_size);
    height: auto;
    aspect-ratio: 1;
    overflow: visible;
    background: none;
    color: var(--mv-fg);
  }
  :where(mv-scroll-progress[variant="circle"][fixed]) { inset: auto var(--mv-space-6) var(--mv-space-6) auto; }
  :where(.mv-scroll-progress-svg) {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    rotate: -90deg;
    overflow: visible;
  }
  :where(.mv-scroll-progress-track, .mv-scroll-progress-ring) {
    fill: none;
    stroke-width: var(--_stroke);
  }
  :where(.mv-scroll-progress-track) { stroke: var(--mv-scroll-progress-track, var(--mv-border)); }
  :where(.mv-scroll-progress-ring) {
    stroke: var(--mv-scroll-progress-ring, var(--mv-accent));
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--mv-scroll-progress) * 100);
    /* Hide the round cap "dot" at 0 %. */
    opacity: clamp(0, var(--mv-scroll-progress) * 60, 1);
    filter: drop-shadow(0 0 3px color-mix(in oklch, var(--mv-accent) 45%, transparent));
  }
  :where(.mv-scroll-progress-value) {
    grid-area: 1 / 1;
    font-size: calc(var(--_size) * 0.27);
    font-weight: var(--mv-weight-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    counter-reset: mv-sp var(--_mv-sp-pct);
  }
  :where(.mv-scroll-progress-value)::before { content: counter(mv-sp); }
  :where(.mv-scroll-progress-value)::after { content: "%"; font-size: 0.7em; opacity: 0.7; margin-left: 0.05em; }
}

/* components/grid-pattern/grid-pattern.css */
@layer mv.components {
  /* ── Shared tokens (CSS class + custom element) ─────────────────────── */
  :where(.mv-grid-pattern, mv-grid-pattern) {
    --mv-grid-pattern-size: 40px;
    --mv-grid-pattern-stroke: 1px;
    --mv-grid-pattern-color: color-mix(in oklch, var(--mv-fg) 11%, transparent);
    --mv-grid-pattern-cell: color-mix(in oklch, var(--mv-accent) 18%, transparent);
    --mv-grid-pattern-dash: 4px;
    --mv-grid-pattern-x: 0px;
    --mv-grid-pattern-y: 0px;
    --mv-grid-pattern-mask: radial-gradient(ellipse at 50% 45%, #000 15%, transparent 72%);

    display: block;
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  :where(.mv-grid-pattern[data-fill], mv-grid-pattern[data-fill]) {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  /* Fade presets */
  :where(.mv-grid-pattern, mv-grid-pattern):where([data-fade="top"]) { --mv-grid-pattern-mask: linear-gradient(to bottom, #000 10%, transparent 90%); }
  :where(.mv-grid-pattern, mv-grid-pattern):where([data-fade="bottom"]) { --mv-grid-pattern-mask: linear-gradient(to top, #000 10%, transparent 90%); }
  :where(.mv-grid-pattern, mv-grid-pattern):where([data-fade="edges"]) { --mv-grid-pattern-mask: radial-gradient(ellipse 100% 100% at 50% 50%, #000 55%, transparent 100%); }
  :where(.mv-grid-pattern, mv-grid-pattern):where([data-fade="none"]) { --mv-grid-pattern-mask: none; }

  /* ── Lines: vertical in ::before, horizontal in ::after ─────────────── */
  :where(.mv-grid-pattern, mv-grid-pattern:not([variant="flicker"], [variant="interactive"], [variant="retro"]))::before,
  :where(.mv-grid-pattern, mv-grid-pattern:not([variant="flicker"], [variant="interactive"], [variant="retro"]))::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-size: var(--mv-grid-pattern-size) var(--mv-grid-pattern-size);
    background-position: var(--mv-grid-pattern-x) var(--mv-grid-pattern-y);
    mask-image: var(--mv-grid-pattern-mask);
  }
  :where(.mv-grid-pattern, mv-grid-pattern)::before {
    background-image: linear-gradient(to right, var(--mv-grid-pattern-color) var(--mv-grid-pattern-stroke), transparent var(--mv-grid-pattern-stroke));
  }
  :where(.mv-grid-pattern, mv-grid-pattern)::after {
    background-image: linear-gradient(to bottom, var(--mv-grid-pattern-color) var(--mv-grid-pattern-stroke), transparent var(--mv-grid-pattern-stroke));
  }

  /* Dashed lines: each direction gets its own dash mask, intersected with the fade. */
  :where(.mv-grid-pattern, mv-grid-pattern):where([data-variant="dashed"])::before {
    mask-image: var(--mv-grid-pattern-mask), repeating-linear-gradient(to bottom, #000 0 var(--mv-grid-pattern-dash), transparent var(--mv-grid-pattern-dash) calc(var(--mv-grid-pattern-dash) * 2));
    mask-composite: intersect;
  }
  :where(.mv-grid-pattern, mv-grid-pattern):where([data-variant="dashed"])::after {
    mask-image: var(--mv-grid-pattern-mask), repeating-linear-gradient(to right, #000 0 var(--mv-grid-pattern-dash), transparent var(--mv-grid-pattern-dash) calc(var(--mv-grid-pattern-dash) * 2));
    mask-composite: intersect;
  }
  :where(.mv-grid-pattern, mv-grid-pattern):where([data-fade="none"][data-variant="dashed"])::before {
    mask-image: repeating-linear-gradient(to bottom, #000 0 var(--mv-grid-pattern-dash), transparent var(--mv-grid-pattern-dash) calc(var(--mv-grid-pattern-dash) * 2));
  }
  :where(.mv-grid-pattern, mv-grid-pattern):where([data-fade="none"][data-variant="dashed"])::after {
    mask-image: repeating-linear-gradient(to right, #000 0 var(--mv-grid-pattern-dash), transparent var(--mv-grid-pattern-dash) calc(var(--mv-grid-pattern-dash) * 2));
  }

  /* Content placed inside the pattern sits above it */
  :where(.mv-grid-pattern, mv-grid-pattern) > :where(:not(.mv-grid-pattern-cells, canvas)) { position: relative; }

  /* ── Highlighted cells ──────────────────────────────────────────────── */
  :where(.mv-grid-pattern-cells) {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    mask-image: var(--mv-grid-pattern-mask);
  }
  :where(.mv-grid-pattern-cells) > :where(*) {
    position: absolute;
    left: calc(var(--mv-grid-pattern-x) + var(--x, 0) * var(--mv-grid-pattern-size) + var(--mv-grid-pattern-stroke));
    top: calc(var(--mv-grid-pattern-y) + var(--y, 0) * var(--mv-grid-pattern-size) + var(--mv-grid-pattern-stroke));
    width: calc(var(--mv-grid-pattern-size) - var(--mv-grid-pattern-stroke));
    height: calc(var(--mv-grid-pattern-size) - var(--mv-grid-pattern-stroke));
    background: var(--mv-grid-pattern-cell);
  }
  :where(.mv-grid-pattern[data-animate], mv-grid-pattern[squares]) :where(.mv-grid-pattern-cells) > :where(*) {
    opacity: 0;
    animation: mv-grid-pattern-pulse var(--d, 4s) var(--mv-ease-in-out) var(--delay, 0s) infinite;
  }
  :where(.mv-grid-pattern[data-animate]) :where(.mv-grid-pattern-cells) > :where(:nth-child(3n + 1)) { --d: 4.2s; --delay: -0.4s; }
  :where(.mv-grid-pattern[data-animate]) :where(.mv-grid-pattern-cells) > :where(:nth-child(3n + 2)) { --d: 5.1s; --delay: -2.1s; }
  :where(.mv-grid-pattern[data-animate]) :where(.mv-grid-pattern-cells) > :where(:nth-child(3n)) { --d: 3.6s; --delay: -1.3s; }
  @keyframes mv-grid-pattern-pulse {
    0%, 100% { opacity: 0; }
    45%, 60% { opacity: 1; }
  }

  /* ── <mv-grid-pattern> canvas variants ──────────────────────────────── */
  :where(.mv-grid-pattern-canvas) { mask-image: var(--mv-grid-pattern-mask); z-index: -1; }
  :where(mv-grid-pattern[variant="flicker"]:not([data-fade])) { --mv-grid-pattern-mask: radial-gradient(ellipse at 50% 50%, #000 25%, transparent 75%); }

  /* ── Retro: perspective floor moving toward the viewer ─────────────── */
  :where(mv-grid-pattern[variant="retro"]) {
    --mv-grid-pattern-size: 44px;
    --mv-grid-pattern-color: light-dark(color-mix(in oklch, var(--mv-accent) 45%, transparent), color-mix(in oklch, var(--mv-accent) 60%, transparent));
    --mv-grid-pattern-angle: 68deg;
    --mv-grid-pattern-speed: 1.4s;
    perspective: 280px;
    perspective-origin: 50% 0%;
  }
  :where(mv-grid-pattern[variant="retro"])::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -150%;
    width: 400%;
    top: 38%;
    height: 240%;
    pointer-events: none;
    transform-origin: 50% 0;
    transform: rotateX(var(--mv-grid-pattern-angle));
    background-image:
      linear-gradient(to right, var(--mv-grid-pattern-color) var(--mv-grid-pattern-stroke), transparent var(--mv-grid-pattern-stroke)),
      linear-gradient(to bottom, var(--mv-grid-pattern-color) var(--mv-grid-pattern-stroke), transparent var(--mv-grid-pattern-stroke));
    background-size: var(--mv-grid-pattern-size) var(--mv-grid-pattern-size);
    background-position: 50% 0;
    mask-image: linear-gradient(to bottom, transparent, #000 22%);
    animation: mv-grid-pattern-retro var(--mv-grid-pattern-speed) linear infinite;
    will-change: transform;
  }
  /* Horizon glow */
  :where(mv-grid-pattern[variant="retro"])::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(60% 18% at 50% 38%, light-dark(color-mix(in oklch, var(--mv-accent) 22%, transparent), color-mix(in oklch, var(--mv-accent) 40%, transparent)), transparent 70%),
      linear-gradient(to bottom, transparent 30%, color-mix(in oklch, var(--mv-accent) 8%, transparent) 38%, transparent 60%);
  }
  @keyframes mv-grid-pattern-retro {
    to { transform: rotateX(var(--mv-grid-pattern-angle)) translateY(var(--mv-grid-pattern-size)); }
  }

  @media (prefers-reduced-motion: reduce) {
    :where(mv-grid-pattern[variant="retro"])::before { animation: none; }
    :where(.mv-grid-pattern[data-animate], mv-grid-pattern[squares]) :where(.mv-grid-pattern-cells) > :where(*) { animation: none; opacity: var(--o, 0.8); }
  }
  :where([data-motion="reduce"]) :where(mv-grid-pattern[variant="retro"])::before { animation: none; }
  :where([data-motion="reduce"]) :where(.mv-grid-pattern[data-animate], mv-grid-pattern[squares]) :where(.mv-grid-pattern-cells) > :where(*) { animation: none; opacity: var(--o, 0.8); }
}

/* components/dot-pattern/dot-pattern.css */
@layer mv.components {
  :where(.mv-dot-pattern, mv-dot-pattern) {
    --mv-dot-pattern-gap: 18px;
    --mv-dot-pattern-radius: 1px;
    --mv-dot-pattern-color: color-mix(in oklch, var(--mv-fg) 24%, transparent);
    --mv-dot-pattern-x: 0px;
    --mv-dot-pattern-y: 0px;
    --mv-dot-pattern-mask: radial-gradient(ellipse at 50% 45%, #000 15%, transparent 72%);

    display: block;
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  :where(.mv-dot-pattern[data-fill], mv-dot-pattern[data-fill]) {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  :where(.mv-dot-pattern, mv-dot-pattern):where([data-fade="top"]) { --mv-dot-pattern-mask: linear-gradient(to bottom, #000 10%, transparent 90%); }
  :where(.mv-dot-pattern, mv-dot-pattern):where([data-fade="bottom"]) { --mv-dot-pattern-mask: linear-gradient(to top, #000 10%, transparent 90%); }
  :where(.mv-dot-pattern, mv-dot-pattern):where([data-fade="edges"]) { --mv-dot-pattern-mask: radial-gradient(ellipse 100% 100% at 50% 50%, #000 55%, transparent 100%); }
  :where(.mv-dot-pattern, mv-dot-pattern):where([data-fade="none"]) { --mv-dot-pattern-mask: none; }

  /* CSS dots (class, or element without a canvas variant) */
  :where(.mv-dot-pattern, mv-dot-pattern:not([variant="glow"], [variant="wave"]))::before {
    --_dot: radial-gradient(circle at center, var(--mv-dot-pattern-color) var(--mv-dot-pattern-radius), transparent calc(var(--mv-dot-pattern-radius) + 0.75px));
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--_dot);
    background-size: var(--mv-dot-pattern-gap) var(--mv-dot-pattern-gap);
    background-position: var(--mv-dot-pattern-x) var(--mv-dot-pattern-y);
    mask-image: var(--mv-dot-pattern-mask);
  }
  /* Staggered rows (hexagonal feel) */
  :where(.mv-dot-pattern, mv-dot-pattern):where([data-variant="staggered"])::before {
    background-image: var(--_dot), var(--_dot);
    background-size: var(--mv-dot-pattern-gap) var(--mv-dot-pattern-gap);
    background-position:
      var(--mv-dot-pattern-x) var(--mv-dot-pattern-y),
      calc(var(--mv-dot-pattern-x) + var(--mv-dot-pattern-gap) / 2) calc(var(--mv-dot-pattern-y) + var(--mv-dot-pattern-gap) / 2);
  }

  :where(.mv-dot-pattern, mv-dot-pattern) > :where(:not(canvas)) { position: relative; }
  :where(.mv-dot-pattern-canvas) { mask-image: var(--mv-dot-pattern-mask); z-index: -1; }
  :where(mv-dot-pattern[variant]:not([data-fade])) { --mv-dot-pattern-mask: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%); }
}

/* components/particles/particles.css */
@layer mv.components {
  :where(mv-particles) {
    --mv-particles-color: color-mix(in oklch, var(--mv-fg) 75%, transparent);
    --mv-particles-link: color-mix(in oklch, var(--mv-accent) 70%, transparent);

    display: block;
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  :where(mv-particles[data-fill]) { position: absolute; inset: 0; pointer-events: none; }
  :where(mv-particles) > :where(:not(canvas)) { position: relative; }
  :where(.mv-particles-canvas) { z-index: -1; }
}

/* components/light-rays/light-rays.css */
@layer mv.components {
  /*
   * .mv-light-rays — god rays falling from the top. Decorative layer: use it
   * with data-fill behind your content (the fade mask applies to the layer).
   */
  :where(.mv-light-rays) {
    --mv-light-rays-color: light-dark(oklch(0.6 0.17 var(--mv-accent-h) / 0.42), oklch(0.9 0.07 var(--mv-accent-h) / 0.5));
    --mv-light-rays-glow: light-dark(oklch(0.65 0.17 var(--mv-accent-h) / 0.28), oklch(0.8 0.12 var(--mv-accent-h) / 0.3));
    --mv-light-rays-intensity: 1;
    --mv-light-rays-blur: 6px;
    --mv-light-rays-speed: 16s;
    --mv-light-rays-x: 50%;
    --mv-light-rays-length: 90%;
    --mv-light-rays-spread: 44%;
    --_tilt: 0deg;

    display: block;
    position: relative;
    overflow: hidden;
    pointer-events: none;
    opacity: var(--mv-light-rays-intensity);
    background: radial-gradient(ellipse 45% 38% at var(--mv-light-rays-x) 0%, var(--mv-light-rays-glow), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 0.6) calc(var(--mv-light-rays-length) * 0.55), transparent var(--mv-light-rays-length));
    isolation: isolate;
  }
  :where(.mv-light-rays[data-fill]) { position: absolute; inset: 0; }
  :where(.mv-light-rays[data-origin="left"]) { --mv-light-rays-x: 18%; --_tilt: -22deg; }
  :where(.mv-light-rays[data-origin="right"]) { --mv-light-rays-x: 82%; --_tilt: 22deg; }

  /* Two ray fans with incommensurate periods → irregular, organic spacing. */
  :where(.mv-light-rays)::before,
  :where(.mv-light-rays)::after {
    content: "";
    position: absolute;
    top: -14%;
    left: calc(var(--mv-light-rays-x) - 110%);
    width: 220%;
    height: 170%;
    transform-origin: 50% 0;
    filter: blur(var(--mv-light-rays-blur));
    /* Limit the fan's opening and length around the apex */
    mask-image: radial-gradient(ellipse var(--mv-light-rays-spread) 100% at 50% 0%, #000 12%, rgb(0 0 0 / 0.5) 45%, transparent 72%);
    will-change: transform;
  }
  :where(.mv-light-rays)::before {
    background:
      repeating-conic-gradient(from 177deg at 50% 0%, transparent 0deg, var(--mv-light-rays-color) 1.6deg, transparent 4.2deg, transparent 9.1deg),
      repeating-conic-gradient(from 183deg at 50% 0%, transparent 0deg, color-mix(in oklch, var(--mv-light-rays-color) 75%, transparent) 2.2deg, transparent 5.4deg, transparent 14.3deg);
    transform: rotate(var(--_tilt));
    animation: mv-light-rays-sway var(--mv-light-rays-speed) var(--mv-ease-in-out) infinite alternate;
  }
  :where(.mv-light-rays)::after {
    background:
      repeating-conic-gradient(from 172deg at 50% 0%, transparent 0deg, var(--mv-light-rays-color) 2deg, transparent 5deg, transparent 12.7deg);
    opacity: 0.75;
    transform: rotate(var(--_tilt));
    animation: mv-light-rays-sway-back calc(var(--mv-light-rays-speed) * 1.37) var(--mv-ease-in-out) infinite alternate;
  }
  @keyframes mv-light-rays-sway {
    from { transform: rotate(calc(var(--_tilt) - 3.5deg)); }
    to { transform: rotate(calc(var(--_tilt) + 3.5deg)); }
  }
  @keyframes mv-light-rays-sway-back {
    0% { transform: rotate(calc(var(--_tilt) + 4deg)); opacity: 0.45; }
    50% { opacity: 0.85; }
    100% { transform: rotate(calc(var(--_tilt) - 3deg)); opacity: 0.55; }
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.mv-light-rays)::before,
    :where(.mv-light-rays)::after { animation: none; }
  }
  :where([data-motion="reduce"]) :where(.mv-light-rays)::before,
  :where([data-motion="reduce"]) :where(.mv-light-rays)::after { animation: none; }
}

/* components/noise/noise.css */
@layer mv.components {
  /*
   * .mv-noise — film grain over a surface (gradients, heroes, cards).
   * The grain is ::after, between the element's background and its content
   * (data-layer="over" puts it above everything). No image request: the
   * texture is an SVG feTurbulence data URI.
   */
  :where(.mv-noise) {
    --_grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.6' intercept='-.3'/%3E%3CfeFuncG type='linear' slope='1.6' intercept='-.3'/%3E%3CfeFuncB type='linear' slope='1.6' intercept='-.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    position: relative;
    isolation: isolate;
  }
  :where(.mv-noise[data-grain="coarse"]) {
    --_grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncG type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncB type='linear' slope='1.8' intercept='-.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  :where(.mv-noise)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--_grain) 0 0 / var(--mv-noise-size, 200px) repeat;
    opacity: var(--mv-noise-opacity, 0.22);
    mix-blend-mode: var(--mv-noise-blend, overlay);
    pointer-events: none;
  }
  :where(.mv-noise[data-layer="over"])::after { z-index: var(--mv-noise-z, 10); }

  /* Animated grain: jumps between offsets at ~12 fps, like film. */
  :where(.mv-noise[data-animate])::after {
    animation: mv-noise-shift var(--mv-noise-speed, 0.9s) steps(1) infinite;
  }
  @keyframes mv-noise-shift {
    0% { background-position: 0 0; }
    10% { background-position: -37px 21px; }
    20% { background-position: 53px -61px; }
    30% { background-position: -89px -13px; }
    40% { background-position: 17px 77px; }
    50% { background-position: -61px 43px; }
    60% { background-position: 97px 9px; }
    70% { background-position: -23px -83px; }
    80% { background-position: 71px 59px; }
    90% { background-position: -47px -29px; }
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.mv-noise)::after { animation: none; }
  }
  :where([data-motion="reduce"]) :where(.mv-noise)::after { animation: none; }
}

/* components/meteors/meteors.css */
@layer mv.components {
  :where(mv-meteors) {
    --mv-meteors-color: light-dark(var(--mv-gray-500), var(--mv-gray-200));
    --mv-meteors-tail: 5rem;
    --mv-meteors-size: 2px;
    --mv-meteors-angle: 215deg;
    --mv-meteors-travel: 900px;

    display: block;
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  :where(mv-meteors[data-fill]) { position: absolute; inset: 0; pointer-events: none; }
  :where(mv-meteors) > :where(:not(.mv-meteor)) { position: relative; }

  :where(.mv-meteor) {
    position: absolute;
    z-index: -1;
    left: var(--x, 50%);
    top: var(--y, -10px);
    width: var(--mv-meteors-size);
    height: var(--mv-meteors-size);
    border-radius: 50%;
    background: var(--mv-meteors-color);
    box-shadow:
      0 0 0 1px color-mix(in oklch, var(--mv-meteors-color) 12%, transparent),
      0 0 8px 1px color-mix(in oklch, var(--mv-meteors-color) 55%, transparent);
    pointer-events: none;
    opacity: 0;
    transform: rotate(var(--mv-meteors-angle)) translateX(0);
    animation: mv-meteors-fall var(--dur, 6s) linear var(--delay, 0s) infinite;
    will-change: transform, opacity;
  }
  /* Tail: trails behind the head along the direction of travel */
  :where(.mv-meteor)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--mv-meteors-tail) * var(--k, 1));
    height: 1px;
    translate: 0 -50%;
    background: linear-gradient(to right, var(--mv-meteors-color), transparent);
  }
  @keyframes mv-meteors-fall {
    0% { transform: rotate(var(--mv-meteors-angle)) translateX(0); opacity: 0; }
    4% { opacity: 1; }
    48% { opacity: 1; }
    62%, 100% { transform: rotate(var(--mv-meteors-angle)) translateX(calc(-1 * var(--mv-meteors-travel))); opacity: 0; }
  }

  /* Reduced motion: meteors frozen mid-flight */
  @media (prefers-reduced-motion: reduce) {
    :where(.mv-meteor) {
      animation: none;
      opacity: var(--o, 0.6);
      transform: rotate(var(--mv-meteors-angle)) translateX(calc(-1 * var(--mv-meteors-travel) * var(--p, 0.4)));
    }
  }
  :where([data-motion="reduce"]) :where(.mv-meteor) {
    animation: none;
    opacity: var(--o, 0.6);
    transform: rotate(var(--mv-meteors-angle)) translateX(calc(-1 * var(--mv-meteors-travel) * var(--p, 0.4)));
  }
}

/* components/theme-toggle/theme-toggle.css */
@layer mv.components {
  :where(mv-theme-toggle) { display: inline-flex; vertical-align: middle; }

  :where(.mv-theme-toggle-button) {
    --_size: var(--mv-theme-toggle-size, var(--mv-control-md));
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--_size);
    height: var(--_size);
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--mv-radius-full);
    background: transparent;
    color: var(--mv-fg);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color var(--mv-duration-fast) var(--mv-ease-out),
      border-color var(--mv-duration-fast) var(--mv-ease-out),
      scale var(--mv-duration-instant) var(--mv-ease-out);
  }
  :where(.mv-theme-toggle-button):hover { background: var(--mv-bg-muted); }
  :where(.mv-theme-toggle-button):active { scale: 0.94; }
  :where(.mv-theme-toggle-button):focus-visible { outline: none; box-shadow: var(--mv-focus-ring); }
  :where(mv-theme-toggle[data-variant="outline"]) :where(.mv-theme-toggle-button) {
    border-color: var(--mv-border-strong);
    background: var(--mv-bg);
    box-shadow: var(--mv-shadow-xs);
  }
  :where(mv-theme-toggle[data-variant="outline"]) :where(.mv-theme-toggle-button):hover { background: var(--mv-bg-muted); }
  :where(mv-theme-toggle[data-size="sm"]) { --mv-theme-toggle-size: var(--mv-control-sm); }
  :where(mv-theme-toggle[data-size="lg"]) { --mv-theme-toggle-size: var(--mv-control-lg); }

  /* ── Sun ↔ moon morph (state from aria-pressed on the button) ───────── */
  :where(.mv-theme-toggle-icon) {
    width: 55%;
    height: 55%;
    overflow: visible;
    transition: rotate var(--mv-duration-slower) var(--mv-ease-emphasized);
  }
  :where(.mv-theme-toggle-core) {
    transform-box: fill-box;
    transform-origin: center;
    transition: scale var(--mv-duration-slow) var(--mv-ease-spring);
  }
  :where(.mv-theme-toggle-bite) {
    transition: translate var(--mv-duration-slow) var(--mv-ease-out);
  }
  :where(.mv-theme-toggle-rays) :where(line) {
    transform-origin: 12px 12px;
    transition:
      scale var(--mv-duration-normal) var(--mv-ease-out) calc(var(--i) * 20ms),
      opacity var(--mv-duration-normal) var(--mv-ease-out) calc(var(--i) * 20ms);
  }

  :where(mv-theme-toggle [aria-pressed="true"]) > :where(.mv-theme-toggle-icon) { rotate: 360deg; }
  :where(mv-theme-toggle [aria-pressed="true"]) :where(.mv-theme-toggle-core) { scale: 1.75; }
  :where(mv-theme-toggle [aria-pressed="true"]) :where(.mv-theme-toggle-bite) { translate: -12px 12px; }
  :where(mv-theme-toggle [aria-pressed="true"]) :where(.mv-theme-toggle-rays) :where(line) {
    scale: 0.3;
    opacity: 0;
    transition-delay: 0ms;
  }

  /* ── Circular reveal: disable the default cross-fade only for our transition ─ */
  :where(:root[data-mv-theme-transition])::view-transition-old(root),
  :where(:root[data-mv-theme-transition])::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }
  :where(:root[data-mv-theme-transition])::view-transition-new(root) { z-index: 1; }
}

/* components/text-highlight/text-highlight.css */
@layer mv.components {
  :where(mv-text-highlight) {
    --_color: var(--mv-text-highlight-color, var(--mv-accent));
    --_dur: 800ms;
    --_delay: 0ms;
    --_ease: var(--mv-text-highlight-easing, var(--mv-ease-in-out));
    position: relative;
  }

  /* Marker: a translucent ink swept behind the words. With the default
     box-decoration-break (slice) the sweep runs across wrapped lines in order. */
  :where(mv-text-highlight[data-effect="marker"]) {
    --_ink: light-dark(
      color-mix(in oklch, var(--_color) 28%, transparent),
      color-mix(in oklch, var(--_color) 45%, transparent)
    );
    padding-inline: 0.14em;
    margin-inline: -0.14em;
    border-radius: 0.3em 0.55em 0.35em 0.5em / 0.5em 0.3em 0.55em 0.35em;
    background-image: linear-gradient(100deg,
      color-mix(in oklch, var(--mv-text-highlight-marker, var(--_ink)), transparent 25%),
      var(--mv-text-highlight-marker, var(--_ink)) 8% 92%,
      color-mix(in oklch, var(--mv-text-highlight-marker, var(--_ink)), transparent 35%));
    background-repeat: no-repeat;
    background-position: 0 var(--mv-text-highlight-offset, 70%);
    background-size: 0% var(--mv-text-highlight-size, 78%);
    transition: background-size var(--_dur) var(--_ease) var(--_delay);
  }
  :where(mv-text-highlight[data-effect="marker"][data-state="on"]) {
    background-size: 100% var(--mv-text-highlight-size, 78%);
  }

  /* SVG annotations: the host becomes a box so the drawing can wrap it. */
  :where(mv-text-highlight:is([data-effect="underline"], [data-effect="circle"], [data-effect="box"], [data-effect="strike"])) {
    display: inline-block;
    white-space: nowrap;
  }
  :where(.mv-text-highlight-svg) {
    position: absolute;
    display: block;
    max-width: none;
    overflow: visible;
    pointer-events: none;
    fill: none;
    stroke: var(--_color);
    stroke-width: var(--mv-text-highlight-stroke, 0.085em);
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  :where(mv-text-highlight[data-effect="strike"]) :where(.mv-text-highlight-svg) {
    stroke-width: var(--mv-text-highlight-stroke, 0.07em);
  }
  :where(.mv-text-highlight-svg path) {
    stroke-dasharray: 1 2;
    stroke-dashoffset: 1;
    opacity: 0;
    transition:
      stroke-dashoffset calc(var(--_dur) * var(--_len, 1)) var(--_ease) calc(var(--_delay) + var(--_dur) * var(--_at, 0)),
      opacity 1ms linear calc(var(--_delay) + var(--_dur) * var(--_at, 0));
  }
  :where(mv-text-highlight[data-state="on"]) :where(.mv-text-highlight-svg path) {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  /* Erasing is quicker and simultaneous. */
  :where(mv-text-highlight:not([data-state="on"])) :where(.mv-text-highlight-svg path) {
    transition-duration: calc(var(--_dur) * 0.4), 1ms;
    transition-delay: 0ms, calc(var(--_dur) * 0.4);
  }
  :where(mv-text-highlight[data-effect="marker"]:not([data-state="on"])) {
    transition-duration: calc(var(--_dur) * 0.5);
    transition-delay: 0ms;
  }

  :where(mv-text-highlight[data-snap]),
  :where(mv-text-highlight[data-snap]) :where(.mv-text-highlight-svg path) { transition: none; }

  @media (prefers-reduced-motion: reduce) {
    :where(html:not([data-motion="full"])) :where(mv-text-highlight),
    :where(html:not([data-motion="full"])) :where(.mv-text-highlight-svg path) { transition-duration: 0s; transition-delay: 0s; }
  }
  :where([data-motion="reduce"]) :where(mv-text-highlight),
  :where([data-motion="reduce"]) :where(.mv-text-highlight-svg path) { transition-duration: 0s; transition-delay: 0s; }
}

/* components/thinking-orb/thinking-orb.css */
@layer mv.components {
  :where(mv-thinking-orb) {
    --mv-thinking-orb-size: 10rem;
    --mv-thinking-orb-1: var(--mv-accent);
    --mv-thinking-orb-2: oklch(0.74 0.14 225);
    --mv-thinking-orb-3: oklch(0.76 0.15 345);

    display: inline-block;
    position: relative;
    width: var(--mv-thinking-orb-size);
    aspect-ratio: 1;
    flex: none;
    vertical-align: middle;
  }

  /* Push-to-talk toggle (with the `mic` attribute): a round hit area over the orb. */
  :where(.mv-thinking-orb-button) {
    position: absolute;
    inset: 22%;
    border: 0;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  :where(.mv-thinking-orb-button:focus-visible) { outline: none; box-shadow: var(--mv-focus-ring); }
}

/* components/sparkles-text/sparkles-text.css */
@layer mv.components {
  :where(mv-sparkles-text) {
    position: relative;
    display: inline-block;
  }
  :where(.mv-sparkles-text-layer) {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  :where(.mv-sparkles-text-spark) {
    position: absolute;
    display: block;
    max-width: none;
    width: calc(var(--mv-sparkles-text-size, max(0.6em, 12px)) * var(--_s, 1));
    height: auto;
    aspect-ratio: 1;
    translate: -50% -50%;
    fill: currentColor;
    filter: drop-shadow(0 0 0.12em color-mix(in oklch, currentColor 60%, transparent));
    scale: 0;
    opacity: 0;
    animation: mv-sparkles-text-pop 1.3s var(--mv-ease-in-out) infinite both;
  }
  :where(.mv-sparkles-text-spark[data-idle]),
  :where(mv-sparkles-text[data-offscreen]) :where(.mv-sparkles-text-spark) {
    animation-play-state: paused;
  }

  @keyframes mv-sparkles-text-pop {
    0% { scale: 0; opacity: 0; rotate: var(--_r, 0deg); }
    45% { scale: 1; opacity: 1; }
    100% { scale: 0; opacity: 0; rotate: calc(var(--_r, 0deg) + 150deg); }
  }

  /* Reduced motion: a few still sparkles (JS places them). */
  @media (prefers-reduced-motion: reduce) {
    :where(html:not([data-motion="full"])) :where(.mv-sparkles-text-spark) { animation: none; scale: 1; opacity: 1; }
  }
  :where([data-motion="reduce"]) :where(.mv-sparkles-text-spark) { animation: none; scale: 1; opacity: 1; }
}

/* components/progressive-blur/progressive-blur.css */
@layer mv.components {
  /*
   * Edge blur that ramps up toward one side, built from stacked backdrop-filter
   * layers, each masked to its own slice of the band. Layers MUST be siblings:
   * a masked/filtered ancestor would become a backdrop root and see nothing.
   *   <div class="mv-progressive-blur" data-side="bottom" aria-hidden="true">
   *     <i></i><i></i><i></i><i></i><i></i><i></i>
   *   </div>
   * Without children, ::before/::after give a lighter 2-layer version.
   */
  :where(.mv-progressive-blur) {
    --_size: var(--mv-progressive-blur-size, 35%);
    --_s: var(--mv-progressive-blur-strength, 16px);
    --_dir: to bottom;
    --_n: 2;
    position: absolute;
    inset: auto 0 0 0;
    height: var(--_size);
    z-index: var(--mv-progressive-blur-z, 2);
    border-radius: inherit;
    pointer-events: none;
  }
  :where(.mv-progressive-blur[data-side="top"]) { inset: 0 0 auto 0; --_dir: to top; }
  :where(.mv-progressive-blur[data-side="left"]) { inset: 0 auto 0 0; width: var(--_size); height: auto; --_dir: to left; }
  :where(.mv-progressive-blur[data-side="right"]) { inset: 0 0 0 auto; width: var(--_size); height: auto; --_dir: to right; }

  /* Optional fade toward the page colour for extra legibility. */
  :where(.mv-progressive-blur[data-fade]) {
    background: linear-gradient(var(--_dir), transparent, color-mix(in oklch, var(--mv-progressive-blur-fade, var(--mv-bg)) 85%, transparent));
  }

  /* Layer count, for 1 to 8 children. */
  :where(.mv-progressive-blur:has(> :nth-child(1):last-child)) { --_n: 1; }
  :where(.mv-progressive-blur:has(> :nth-child(3):last-child)) { --_n: 3; }
  :where(.mv-progressive-blur:has(> :nth-child(4):last-child)) { --_n: 4; }
  :where(.mv-progressive-blur:has(> :nth-child(5):last-child)) { --_n: 5; }
  :where(.mv-progressive-blur:has(> :nth-child(6):last-child)) { --_n: 6; }
  :where(.mv-progressive-blur:has(> :nth-child(7):last-child)) { --_n: 7; }
  :where(.mv-progressive-blur:has(> :nth-child(8):last-child)) { --_n: 8; }

  :where(.mv-progressive-blur) > :where(*),
  :where(.mv-progressive-blur:not(:has(> *)))::before,
  :where(.mv-progressive-blur:not(:has(> *)))::after {
    --_i: 0;
    /* Layer i blurs strength × 2^(i+1−n) and is fully opaque from (i+1)/n onward. */
    --_b: calc(var(--_s) * pow(2, calc(var(--_i) + 1 - var(--_n))));
    content: "";
    position: absolute;
    inset: 0;
    display: block;
    border-radius: inherit;
    -webkit-backdrop-filter: blur(var(--_b));
    backdrop-filter: blur(var(--_b));
    -webkit-mask-image: linear-gradient(var(--_dir), transparent calc(var(--_i) / var(--_n) * 100%), #000 calc((var(--_i) + 1) / var(--_n) * 100%));
    mask-image: linear-gradient(var(--_dir), transparent calc(var(--_i) / var(--_n) * 100%), #000 calc((var(--_i) + 1) / var(--_n) * 100%));
  }
  :where(.mv-progressive-blur) > :where(:nth-child(2)),
  :where(.mv-progressive-blur:not(:has(> *)))::after { --_i: 1; }
  :where(.mv-progressive-blur) > :where(:nth-child(3)) { --_i: 2; }
  :where(.mv-progressive-blur) > :where(:nth-child(4)) { --_i: 3; }
  :where(.mv-progressive-blur) > :where(:nth-child(5)) { --_i: 4; }
  :where(.mv-progressive-blur) > :where(:nth-child(6)) { --_i: 5; }
  :where(.mv-progressive-blur) > :where(:nth-child(7)) { --_i: 6; }
  :where(.mv-progressive-blur) > :where(:nth-child(8)) { --_i: 7; }
}

/* components/avatar/avatar.css */
@layer mv.components {
  /* ── Avatar ────────────────────────────────────────────────────────────
     <span class="mv-avatar">
       <img src="…" alt="Ada Lovelace">
       <span class="mv-avatar-fallback" aria-hidden="true">AL</span>
     </span>
     The image sits above the initials; if it is missing, loading or broken
     the initials show through (avatar.js marks load/error states). */
  :where(.mv-avatar, .mv-avatar-more) {
    --_size: var(--mv-avatar-size, 2.5rem);
    --_ring: var(--mv-avatar-ring, var(--mv-bg));
    position: relative;
    display: inline-grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    flex-shrink: 0;
    width: var(--_size);
    height: var(--_size);
    border-radius: var(--mv-avatar-radius, 50%);
    vertical-align: middle;
    font-size: calc(var(--_size) * 0.38);
    line-height: 1;
  }
  /* Hairline so light photos don't melt into the page */
  :where(.mv-avatar)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mv-fg) 8%, transparent);
    pointer-events: none;
  }

  :where(.mv-avatar) > :where(img, .mv-avatar-fallback) {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border-radius: inherit;
  }
  :where(.mv-avatar) > :where(img) {
    z-index: 1;
    display: block;
    object-fit: cover;
    overflow: hidden;
    color: transparent; /* hide alt text of a broken image */
    transition: opacity var(--mv-duration-normal) var(--mv-ease-out);
  }
  /* Kept in the accessibility tree (alt still announced), only made invisible. */
  :where(.mv-avatar) > :where(img[data-mv-state="loading"], img[data-mv-state="error"], img:not([src]), img[src=""]) { opacity: 0; }

  :where(.mv-avatar-fallback) {
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--mv-avatar-bg, var(--mv-bg-emphasis));
    color: var(--mv-avatar-fg, var(--mv-fg-muted));
    font-family: var(--mv-font-sans);
    font-weight: var(--mv-weight-medium);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    user-select: none;
  }
  :where(.mv-avatar-fallback) > :where(svg) { width: 55%; height: 55%; }

  /* Tinted initials, hue from --mv-avatar-hue (defaults to the accent hue) */
  :where(.mv-avatar[data-variant="tinted"]) {
    --_hue: var(--mv-avatar-hue, var(--mv-accent-h));
    --mv-avatar-bg: light-dark(oklch(0.93 0.045 var(--_hue)), oklch(0.33 0.07 var(--_hue)));
    --mv-avatar-fg: light-dark(oklch(0.45 0.13 var(--_hue)), oklch(0.86 0.08 var(--_hue)));
  }

  /* Shape & sizes */
  :where(.mv-avatar[data-shape="square"], .mv-avatar-more[data-shape="square"]) { --mv-avatar-radius: calc(var(--_size) * 0.24); }
  :where(.mv-avatar, .mv-avatar-more):where([data-size="xs"]) { --_size: 1.5rem; }
  :where(.mv-avatar, .mv-avatar-more):where([data-size="sm"]) { --_size: 2rem; }
  :where(.mv-avatar, .mv-avatar-more):where([data-size="lg"]) { --_size: 3rem; }
  :where(.mv-avatar, .mv-avatar-more):where([data-size="xl"]) { --_size: 4rem; }
  :where(.mv-avatar, .mv-avatar-more):where([data-size="2xl"]) { --_size: 5rem; }
  :where(.mv-avatar[data-ring]) { box-shadow: 0 0 0 2px var(--_ring), 0 0 0 4px var(--mv-accent); }

  /* ── Status dot ─────────────────────────────────────────────────────── */
  :where(.mv-avatar-status) {
    --_dot: max(0.5rem, calc(var(--_size) * 0.27));
    --_c: var(--mv-success);
    position: absolute;
    z-index: 3;
    inset-block-end: 0;
    inset-inline-end: 0;
    width: var(--_dot);
    height: var(--_dot);
    border-radius: 50%;
    background: var(--_c);
    box-shadow: 0 0 0 max(2px, calc(var(--_size) * 0.04)) var(--_ring);
  }
  :where(.mv-avatar-status[data-status="away"]) { --_c: var(--mv-warning); }
  :where(.mv-avatar-status[data-status="busy"]) { --_c: var(--mv-danger); }
  :where(.mv-avatar-status[data-status="offline"]) { --_c: var(--mv-fg-subtle); }
  :where(.mv-avatar-status[data-side="top"]) { inset-block: 0 auto; }
  :where(.mv-avatar[data-shape="square"]) > :where(.mv-avatar-status) { inset-block-end: calc(var(--_dot) * -0.25); inset-inline-end: calc(var(--_dot) * -0.25); }
  :where(.mv-avatar[data-shape="square"]) > :where(.mv-avatar-status[data-side="top"]) { inset-block: calc(var(--_dot) * -0.25) auto; }

  /* Optional live pulse on the dot */
  :where(.mv-avatar-status[data-pulse])::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    animation: mv-avatar-pulse 2s var(--mv-ease-out) infinite;
  }
  @keyframes mv-avatar-pulse { 0% { scale: 1; opacity: 0.6; } 70%, 100% { scale: 2.4; opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { :where(.mv-avatar-status[data-pulse])::before { animation: none; display: none; } }
  :where([data-motion="reduce"]) :where(.mv-avatar-status[data-pulse])::before { animation: none; display: none; }

  /* Notification count in the top corner */
  :where(.mv-avatar-badge) {
    position: absolute;
    z-index: 3;
    inset-block-start: calc(var(--_size) * -0.06);
    inset-inline-end: calc(var(--_size) * -0.12);
    display: grid;
    place-items: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3125rem;
    border-radius: var(--mv-radius-full);
    background: var(--mv-danger);
    color: var(--mv-fg-on-accent);
    font: var(--mv-weight-semibold) 0.625rem / 1 var(--mv-font-sans);
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px var(--_ring);
  }

  /* ── Group: overlapping stack, spreads on hover ─────────────────────── */
  :where(.mv-avatar-group) {
    --_overlap: var(--mv-avatar-overlap, -0.28);
    display: inline-flex;
    align-items: center;
    isolation: isolate;
  }
  :where(.mv-avatar-group[data-size="xs"]) { --mv-avatar-size: 1.5rem; }
  :where(.mv-avatar-group[data-size="sm"]) { --mv-avatar-size: 2rem; }
  :where(.mv-avatar-group[data-size="lg"]) { --mv-avatar-size: 3rem; }
  :where(.mv-avatar-group[data-size="xl"]) { --mv-avatar-size: 4rem; }
  :where(.mv-avatar-group:not([data-spread="false"])):hover { --_overlap: var(--mv-avatar-overlap-hover, -0.1); }

  :where(.mv-avatar-group) > :where(.mv-avatar, .mv-avatar-more) {
    box-shadow: 0 0 0 2px var(--_ring);
    /* leaving: spring back with overshoot */
    transition:
      margin var(--mv-duration-slow) var(--mv-ease-spring),
      translate var(--mv-duration-slow) var(--mv-ease-spring),
      scale var(--mv-duration-slow) var(--mv-ease-spring);
  }
  :where(.mv-avatar-group) > :where(.mv-avatar, .mv-avatar-more) + :where(.mv-avatar, .mv-avatar-more) {
    margin-inline-start: calc(var(--_size) * var(--_overlap));
  }
  :where(.mv-avatar-group:hover) > :where(.mv-avatar, .mv-avatar-more) {
    transition:
      margin var(--mv-duration-normal) var(--mv-ease-out),
      translate var(--mv-duration-normal) var(--mv-ease-out),
      scale var(--mv-duration-normal) var(--mv-ease-out);
  }
  /* Lift with distance falloff: hovered item, then its direct neighbours */
  :where(.mv-avatar-group:not([data-spread="false"])) > :where(.mv-avatar, .mv-avatar-more):hover {
    z-index: 1;
    translate: 0 calc(-4px * var(--mv-motion));
    scale: calc(1 + 0.05 * var(--mv-motion));
  }
  :where(.mv-avatar-group:not([data-spread="false"])) > :where(.mv-avatar, .mv-avatar-more):has(+ :hover),
  :where(.mv-avatar-group:not([data-spread="false"])) > :where(:hover + .mv-avatar, :hover + .mv-avatar-more) {
    translate: 0 calc(-1.8px * var(--mv-motion));
  }

  /* "+3" overflow chip (span or button) */
  :where(.mv-avatar-more) {
    place-items: center;
    padding: 0;
    border: 0;
    background: var(--mv-bg-emphasis);
    color: var(--mv-fg);
    font-family: var(--mv-font-sans);
    font-size: calc(var(--_size) * 0.32);
    font-weight: var(--mv-weight-medium);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }
  :where(button.mv-avatar-more) { cursor: pointer; transition: background-color var(--mv-duration-fast) var(--mv-ease-out), color var(--mv-duration-fast) var(--mv-ease-out); }
  :where(button.mv-avatar-more):hover { background: color-mix(in oklab, var(--mv-bg-emphasis), var(--mv-fg) 10%); }
  :where(button.mv-avatar-more):focus-visible { outline: none; box-shadow: 0 0 0 2px var(--_ring), 0 0 0 4px var(--mv-ring); }
}

/* components/dialog/dialog.css */
@layer mv.components {
  :where(mv-dialog) { display: contents; }

  /* Lock page scroll while a modal is open */
  :where(html:has(dialog.mv-dialog[open])) { overflow: hidden; scrollbar-gutter: stable; }

  :where(dialog.mv-dialog) {
    --_dur: var(--mv-duration-normal);
    box-sizing: border-box;
    width: min(calc(100vw - 2rem), var(--mv-dialog-width, 30rem));
    max-height: calc(100dvh - 2rem);
    padding: var(--mv-space-6);
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-dialog-radius, var(--mv-radius-xl));
    background: var(--mv-surface-raised);
    color: var(--mv-fg);
    box-shadow: var(--mv-shadow-xl);
    overflow: auto;
    overscroll-behavior: contain;

    opacity: 0;
    scale: 0.96;
    translate: 0 8px;
    transition:
      opacity var(--_dur) var(--mv-ease-out),
      scale var(--_dur) var(--mv-ease-out),
      translate var(--_dur) var(--mv-ease-out),
      display var(--_dur) allow-discrete,
      overlay var(--_dur) allow-discrete;
  }
  :where(dialog.mv-dialog[open]) { opacity: 1; scale: 1; translate: 0 0; }
  @starting-style {
    :where(dialog.mv-dialog[open]) { opacity: 0; scale: 0.96; translate: 0 8px; }
  }
  :where(dialog.mv-dialog)::backdrop {
    background: var(--mv-overlay);
    backdrop-filter: blur(var(--mv-dialog-backdrop-blur, 3px));
    opacity: 0;
    transition: opacity var(--mv-duration-normal) var(--mv-ease-out), display var(--mv-duration-normal) allow-discrete, overlay var(--mv-duration-normal) allow-discrete;
  }
  :where(dialog.mv-dialog[open])::backdrop { opacity: 1; }
  @starting-style { :where(dialog.mv-dialog[open])::backdrop { opacity: 0; } }
  :where(dialog.mv-dialog[data-dragging]) { transition: none; user-select: none; }

  /* ── Sheet / drawer ───────────────────────────────────────── */
  :where(dialog.mv-dialog[data-variant="sheet"]) {
    --_dur: var(--mv-duration-slow);
    margin: 0;
    max-width: none;
    max-height: none;
    border-radius: 0;
    scale: 1;
    opacity: 1;
    inset: 0 0 0 auto;
    width: min(100vw, var(--mv-dialog-width, 24rem));
    height: 100dvh;
    translate: 100% 0;
    border-width: 0 0 0 1px;
  }
  :where(dialog.mv-dialog[data-variant="sheet"][data-side="left"]) { inset: 0 auto 0 0; translate: -100% 0; border-width: 0 1px 0 0; }
  :where(dialog.mv-dialog[data-variant="sheet"]:is([data-side="top"], [data-side="bottom"])) {
    width: auto; height: auto; max-height: min(90dvh, var(--mv-dialog-height, 90dvh));
  }
  :where(dialog.mv-dialog[data-variant="sheet"][data-side="top"]) { inset: 0 0 auto 0; translate: 0 -100%; border-width: 0 0 1px; border-radius: 0 0 var(--mv-radius-2xl) var(--mv-radius-2xl); }
  :where(dialog.mv-dialog[data-variant="sheet"][data-side="bottom"]) { inset: auto 0 0 0; translate: 0 100%; border-width: 1px 0 0; border-radius: var(--mv-radius-2xl) var(--mv-radius-2xl) 0 0; padding-top: var(--mv-space-8); }
  :where(dialog.mv-dialog[data-variant="sheet"][open]) { translate: 0 0; }
  @starting-style {
    :where(dialog.mv-dialog[data-variant="sheet"][open]) { translate: 100% 0; }
    :where(dialog.mv-dialog[data-variant="sheet"][data-side="left"][open]) { translate: -100% 0; }
    :where(dialog.mv-dialog[data-variant="sheet"][data-side="top"][open]) { translate: 0 -100%; }
    :where(dialog.mv-dialog[data-variant="sheet"][data-side="bottom"][open]) { translate: 0 100%; }
  }
  /* Grab handle for bottom drawers */
  :where(dialog.mv-dialog[data-variant="sheet"][data-side="bottom"])::before {
    content: "";
    position: absolute;
    top: 10px; left: 50%;
    width: 2.5rem; height: 4px;
    translate: -50% 0;
    border-radius: 99px;
    background: var(--mv-border-strong);
  }

  /* ── Content helpers ──────────────────────────────────────── */
  :where(.mv-dialog-header) { display: flex; flex-direction: column; gap: var(--mv-space-1-5); margin-bottom: var(--mv-space-5); padding-right: var(--mv-space-6); }
  :where(.mv-dialog-title) { margin: 0; font-size: var(--mv-text-lg); font-weight: var(--mv-weight-semibold); letter-spacing: var(--mv-tracking-tight); line-height: var(--mv-leading-snug); }
  :where(.mv-dialog-description) { margin: 0; color: var(--mv-fg-muted); font-size: var(--mv-text-sm); }
  :where(.mv-dialog-footer) { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--mv-space-2); margin-top: var(--mv-space-6); }
  :where(.mv-dialog-close) {
    position: absolute; top: var(--mv-space-4); right: var(--mv-space-4);
    display: grid; place-items: center;
    width: 1.75rem; height: 1.75rem; padding: 0;
    border: 0; border-radius: var(--mv-radius-sm);
    background: none; color: var(--mv-fg-muted); cursor: pointer;
    transition: background var(--mv-duration-fast), color var(--mv-duration-fast);
  }
  :where(.mv-dialog-close):hover { background: var(--mv-bg-muted); color: var(--mv-fg); }
  :where(.mv-dialog-close):focus-visible { outline: none; box-shadow: var(--mv-focus-ring); }
}

/* components/textarea/textarea.css */
@layer mv.components {
  /* ── Textarea ───────────────────────────────────────────────────────
     Auto-grows with its content (field-sizing: content) between
     --mv-textarea-min-rows and --mv-textarea-max-rows, then scrolls.
     Browsers without field-sizing keep the min height and scroll. */
  :where(.mv-textarea, .mv-textarea-group) {
    --_px: var(--mv-space-3);
    --_py: var(--mv-space-2);
    --_fs: var(--mv-text-sm);
    --_bd: var(--mv-input);
    --_bd-hover: color-mix(in oklch, var(--mv-input), var(--mv-fg) 18%);
    --_bd-focus: var(--mv-accent);
    --_rc: color-mix(in oklch, var(--mv-accent) 22%, transparent);
    --_radius: var(--mv-textarea-radius, var(--mv-radius-md));
    --_bg: var(--mv-textarea-bg, light-dark(var(--mv-bg), color-mix(in oklch, var(--mv-bg-muted) 55%, transparent)));
  }

  :where(.mv-textarea) {
    --_min: var(--mv-textarea-min-rows, 3);
    --_max: var(--mv-textarea-max-rows, 12);
    --_lh: 1.5;

    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    field-sizing: content;
    min-height: calc(var(--_min) * var(--_lh) * 1em + 2 * var(--_py) + 2px);
    max-height: calc(var(--_max) * var(--_lh) * 1em + 2 * var(--_py) + 2px);
    margin: 0;
    padding: var(--_py) var(--_px);
    border: 1px solid var(--_bd);
    border-radius: var(--_radius);
    background: var(--_bg);
    color: var(--mv-fg);
    font: var(--mv-weight-normal) var(--_fs) / var(--_lh) var(--mv-font-sans);
    box-shadow: var(--mv-shadow-xs);
    outline: none;
    resize: none;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--mv-border-strong) transparent;
    transition:
      border-color var(--mv-duration-fast) var(--mv-ease-out),
      box-shadow var(--mv-duration-fast) var(--mv-ease-out),
      background-color var(--mv-duration-fast) var(--mv-ease-out);
  }
  :where(.mv-textarea)::placeholder { color: var(--mv-fg-subtle); opacity: 1; }
  :where(.mv-textarea):hover:not(:disabled, :focus-visible) { border-color: var(--_bd-hover); }
  :where(.mv-textarea):focus-visible {
    outline: none;
    border-color: var(--_bd-focus);
    box-shadow: var(--mv-shadow-xs), 0 0 0 3px var(--_rc);
  }

  :where(.mv-textarea[aria-invalid="true"], .mv-textarea:user-invalid) {
    --_bd: var(--mv-danger);
    --_bd-hover: var(--mv-danger);
    --_bd-focus: var(--mv-danger);
    --_rc: color-mix(in oklch, var(--mv-danger) 20%, transparent);
  }
  :where(.mv-textarea):disabled { cursor: not-allowed; opacity: 0.5; box-shadow: none; background: var(--mv-bg-muted); }
  :where(.mv-textarea[readonly]) {
    --_bd-focus: var(--mv-border-strong);
    --_rc: color-mix(in oklch, var(--mv-fg) 8%, transparent);
    background: var(--mv-bg-subtle);
    box-shadow: none;
  }

  /* Resize handle (auto-grow still applies until the user drags) */
  :where(.mv-textarea[data-resize="vertical"]) { resize: vertical; }
  :where(.mv-textarea[data-resize="both"]) { resize: both; }
  /* Fixed height: opt out of auto-grow, honour the rows attribute */
  :where(.mv-textarea[data-autosize="false"]) { field-sizing: fixed; min-height: 0; max-height: none; }

  /* Sizes */
  :where(.mv-textarea[data-size="sm"], .mv-textarea-group[data-size="sm"]) { --_px: 0.625rem; --_py: 0.375rem; }
  :where(.mv-textarea[data-size="lg"], .mv-textarea-group[data-size="lg"]) { --_px: var(--mv-space-4); --_py: var(--mv-space-3); --_fs: var(--mv-text-base); }

  /* ── Group: textarea + toolbar sharing one border (composer, comment box) */
  :where(.mv-textarea-group) {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    border: 1px solid var(--_bd);
    border-radius: var(--mv-textarea-radius, var(--mv-radius-lg));
    background: var(--_bg);
    box-shadow: var(--mv-shadow-xs);
    overflow: hidden;
    cursor: text;
    transition:
      border-color var(--mv-duration-fast) var(--mv-ease-out),
      box-shadow var(--mv-duration-fast) var(--mv-ease-out);
  }
  :where(.mv-textarea-group:hover:not(:has(.mv-textarea:disabled, .mv-textarea:focus-visible))) { border-color: var(--_bd-hover); }
  :where(.mv-textarea-group:has(.mv-textarea:focus-visible)) { border-color: var(--_bd-focus); box-shadow: var(--mv-shadow-xs), 0 0 0 3px var(--_rc); }
  :where(.mv-textarea-group:has(.mv-textarea[aria-invalid="true"], .mv-textarea:user-invalid, mv-char-count[data-state="over"])) {
    --_bd: var(--mv-danger);
    --_bd-hover: var(--mv-danger);
    --_bd-focus: var(--mv-danger);
    --_rc: color-mix(in oklch, var(--mv-danger) 20%, transparent);
  }
  :where(.mv-textarea-group:has(.mv-textarea:disabled)) { opacity: 0.5; cursor: not-allowed; background: var(--mv-bg-muted); }
  :where(.mv-textarea-group) > :where(.mv-textarea) {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding-block: calc(var(--_py) + 0.25rem) var(--_py);
  }
  :where(.mv-textarea-group) > :where(.mv-textarea):focus-visible { box-shadow: none; }

  :where(.mv-textarea-toolbar) {
    display: flex;
    align-items: center;
    gap: var(--mv-space-1);
    padding: var(--mv-space-1-5);
    padding-inline-start: calc(var(--_px) - var(--mv-space-1-5));
    cursor: default;
  }
  :where(.mv-textarea-toolbar[data-divider]) { border-top: 1px solid var(--mv-border); background: var(--mv-bg-subtle); }
  :where(.mv-textarea-toolbar-spacer) { flex: 1; }
  /* Compact buttons inside the toolbar (component CSS loads after button.css) */
  :where(.mv-textarea-toolbar) > :where(.mv-button, button) { height: 1.75rem; }
  :where(.mv-textarea-toolbar) > :where(.mv-button[data-size="icon"]) { width: 1.75rem; }
  :where(.mv-textarea-toolbar) > :where(.mv-button[data-variant="ghost"]) { color: var(--mv-fg-muted); }
  :where(.mv-textarea-toolbar) > :where(.mv-button[data-variant="ghost"]):hover { color: var(--mv-fg); }

  /* ── Character counter <mv-char-count> ─────────────────────────────── */
  :where(mv-char-count) {
    --_c: var(--mv-fg-subtle);
    display: inline-flex;
    align-items: center;
    gap: var(--mv-space-1-5);
    color: var(--_c);
    font: var(--mv-weight-normal) var(--mv-text-xs) / 1 var(--mv-font-sans);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: color var(--mv-duration-fast) var(--mv-ease-out);
  }
  :where(mv-char-count[data-state="near"]) { --_c: color-mix(in oklch, var(--mv-warning), var(--mv-fg) 30%); }
  :where(mv-char-count[data-state="over"]) { --_c: var(--mv-danger); font-weight: var(--mv-weight-medium); }

  /* Ring variant: circular gauge before the number */
  :where(mv-char-count[data-variant="ring"])::before {
    content: "";
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: conic-gradient(
      var(--_ring, var(--mv-accent)) calc(var(--mv-char-progress, 0) * 1turn),
      var(--mv-bg-emphasis) 0
    );
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    transition: scale var(--mv-duration-fast) var(--mv-ease-spring);
  }
  :where(mv-char-count[data-variant="ring"][data-state="near"]) { --_ring: var(--mv-warning); }
  :where(mv-char-count[data-variant="ring"][data-state="over"]) { --_ring: var(--mv-danger); }
  :where(mv-char-count[data-variant="ring"][data-state="over"])::before { scale: 1.15; }
  :where(mv-char-count[data-variant="ring"]:not([data-state])) :where([data-part="value"]) { display: none; }
}

/* components/copy-button/copy-button.css */
@layer mv.components {
  :where(mv-copy-button) {
    --_ok: var(--mv-copy-button-success, var(--mv-success));
    --_ko: var(--mv-copy-button-error, var(--mv-danger));
    --_tone: var(--_ok);
    --_is: 1.1em;            /* icon window */
    --_gap: 0.5em;           /* space between reel icons (hides overshoot) */
    --_slot: 1;              /* 0 error · 1 copy · 2 check */
    --_roll: var(--mv-duration-slow) var(--mv-ease-spring);
    position: relative;
    display: inline-flex;
    vertical-align: middle;
  }
  :where(mv-copy-button[data-state="copied"]) { --_slot: 2; }
  :where(mv-copy-button[data-state="error"]) { --_slot: 0; --_tone: var(--_ko); }

  /* Any trigger (default or your own <button>) hosts the wash layer. */
  :where(mv-copy-button) > :where(button) {
    position: relative;
    isolation: isolate;
    overflow: clip;
  }

  /* ── Default trigger ─────────────────────────────────────────────── */
  :where(.mv-copy-button-trigger) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mv-space-2);
    height: var(--mv-control-sm);
    min-width: var(--mv-control-sm);
    padding: 0 var(--mv-space-3);
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius-full);
    background: var(--mv-surface);
    color: var(--mv-fg-muted);
    font: var(--mv-weight-medium) var(--mv-text-xs) / 1 var(--mv-font-sans);
    box-shadow: var(--mv-shadow-xs);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color var(--mv-duration-fast) var(--mv-ease-out),
      color var(--mv-duration-normal) var(--mv-ease-out),
      border-color var(--mv-duration-normal) var(--mv-ease-out),
      translate var(--mv-duration-instant) var(--mv-ease-out);
  }
  :where(.mv-copy-button-trigger):hover { background: var(--mv-bg-muted); color: var(--mv-fg); }
  :where(.mv-copy-button-trigger):active { translate: 0 1px; }
  :where(.mv-copy-button-trigger):focus-visible { outline: none; box-shadow: var(--mv-focus-ring); }
  :where(.mv-copy-button-trigger):disabled { opacity: 0.5; pointer-events: none; }
  :where(mv-copy-button[data-icon-only]) :where(.mv-copy-button-trigger) { padding: 0; width: var(--mv-control-sm); border-radius: var(--mv-radius-md); }
  :where(mv-copy-button[data-variant="ghost"]) :where(.mv-copy-button-trigger) { border-color: transparent; background: transparent; box-shadow: none; }
  :where(mv-copy-button[data-variant="ghost"]) :where(.mv-copy-button-trigger):hover { background: var(--mv-bg-muted); }
  :where(mv-copy-button:not([data-state="idle"])) :where(.mv-copy-button-trigger) {
    color: var(--_tone);
    border-color: color-mix(in srgb, var(--_tone) 45%, var(--mv-border));
  }

  /* ── Wash: fills, then drains over the timeout (animated from JS) ── */
  :where(.mv-copy-button-wash) {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in oklch, var(--_tone) 16%, transparent);
    transform: scaleX(0);
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    :where(mv-copy-button:not([data-state="idle"])) :where(.mv-copy-button-wash) { transform: none; }
  }
  :where([data-motion="reduce"]) :where(mv-copy-button:not([data-state="idle"])) :where(.mv-copy-button-wash) { transform: none; }

  /* ── Icon reel: three icons in a column behind a one-icon window ─── */
  :where(.mv-copy-button-icons) {
    display: inline-block;
    flex-shrink: 0;
    width: var(--_is);
    height: var(--_is);
    overflow: clip;
    font-size: var(--mv-copy-button-icon-size, 1.2em);
  }
  :where(mv-copy-button[data-icon-only]) :where(.mv-copy-button-icons) { font-size: var(--mv-copy-button-icon-size, 1.3em); }
  :where(.mv-copy-button-reel) {
    display: flex;
    flex-direction: column;
    gap: var(--_gap);
    translate: 0 calc(var(--_slot) * -1 * (var(--_is) + var(--_gap)));
    transition: translate var(--_roll);
  }
  :where(.mv-copy-button-slot) { display: grid; place-items: center; flex: none; width: var(--_is); height: var(--_is); }
  :where(.mv-copy-button-icon) { width: 100%; height: 100%; }
  :where(.mv-copy-button-icon[data-icon="check"]) { stroke-width: 2.4; color: var(--_ok); }
  :where(.mv-copy-button-icon[data-icon="error"]) { color: var(--_ko); }

  /* ── Label window: success rolls up from below, failure drops from above ── */
  :where(.mv-copy-button-label) {
    display: inline-grid;
    line-height: 1.35;
    overflow: clip;
    overflow-clip-margin: 0.1em;
    text-align: start;
  }
  :where(.mv-copy-button-text) {
    grid-area: 1 / 1;
    white-space: nowrap;
    transition: translate var(--_roll), opacity var(--mv-duration-normal) var(--mv-ease-out);
  }
  :where(.mv-copy-button-text[data-state="copied"]) { translate: 0 115%; opacity: 0; }
  :where(.mv-copy-button-text[data-state="error"]) { translate: 0 -115%; opacity: 0; }
  :where(mv-copy-button[data-state="copied"]) :where(.mv-copy-button-text[data-state="idle"]) { translate: 0 -115%; opacity: 0; }
  :where(mv-copy-button[data-state="error"]) :where(.mv-copy-button-text[data-state="idle"]) { translate: 0 115%; opacity: 0; }
  :where(mv-copy-button[data-state="copied"]) :where(.mv-copy-button-text[data-state="copied"]),
  :where(mv-copy-button[data-state="error"]) :where(.mv-copy-button-text[data-state="error"]) { translate: 0 0; opacity: 1; }

  /* ── Bubble (icon-only): a tag with a caret, rising from the button ── */
  :where(.mv-copy-button-bubble) {
    --_bg: light-dark(var(--mv-gray-900), var(--mv-gray-100));
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.3rem 0.55rem;
    border-radius: var(--mv-radius-full);
    background: var(--_bg);
    color: light-dark(var(--mv-gray-50), var(--mv-gray-950));
    font: var(--mv-weight-medium) var(--mv-text-xs) / 1.2 var(--mv-font-sans);
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--mv-shadow-md);
    opacity: 0;
    translate: -50% calc(6px * var(--mv-motion));
    transition:
      opacity var(--mv-duration-fast) var(--mv-ease-out),
      translate var(--mv-duration-slow) var(--mv-ease-spring);
  }
  :where(.mv-copy-button-bubble)::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: var(--mv-radius-full);
    background: var(--_tone);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--_tone) 30%, transparent);
  }
  :where(.mv-copy-button-bubble)::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border: 5px solid transparent;
    border-top-color: var(--_bg);
    translate: -50% 0;
  }
  :where(mv-copy-button:not([data-state="idle"])) :where(.mv-copy-button-bubble) { opacity: 1; translate: -50% 0; }
  :where(mv-copy-button[data-bubble="bottom"]) :where(.mv-copy-button-bubble) {
    bottom: auto;
    top: calc(100% + 8px);
    translate: -50% calc(-6px * var(--mv-motion));
  }
  :where(mv-copy-button[data-bubble="bottom"]:not([data-state="idle"])) :where(.mv-copy-button-bubble) { translate: -50% 0; }
  :where(mv-copy-button[data-bubble="bottom"]) :where(.mv-copy-button-bubble)::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--_bg);
  }
}