/* Mixins for the `basic` theme. `basic` clones Pico, so it reuses
 * `mixins.default.css` with no overrides. *//* ============================================================
 * Theme-agnostic component mixins.
 *
 * Listed explicitly, not `@import-glob`. Other packages (e.g. the
 * docs site) import this transitively, and Vite's `postcss-import`
 * runs before our glob plugin and would drop `@import-glob` inside
 * packaged CSS.
 * ============================================================ *//* ============================================================
 * Element aliases. Each tag alias is a `@custom-selector` that expands to:
 *   1. native tag (`article`)
 *   2. role alias (`[role="article"]`)
 *   3. class alias (`.tag-article`)
 *
 * Only for elements that can be styled/behaved generically. `input`
 * cannot; `dialog` can (`[open]` ≡ `[aria-expanded="true"]`).
 *
 * - No aliases for inimitable natives (input, textarea, …).
 * - State like `[open]` must also use `:is(dialog)` so it hits the
 *   right element. Same for `:not()`.
 * - No `>` / `+`: these aliases get used inside `:not()`.
 * - State aliases: `:--{el}--{name}`. No class aliases for states
 *   (aria / data only). Nested under the element alias
 *   (`:--details { &:--details--open { } }`). Assert against the
 *   right element (`:not([aria-valuenow])` breaks native `progress`).
 * - No pseudo-elements: `postcss-custom-selectors` wraps in `:is()`,
 *   which breaks them. See `modal.css` backdrop.
 * - This file is tag synonyms only, exclusive to the `@custom-selector`.
 *   Mixin-style aliases (no clear element) live elsewhere.
 * ============================================================ */

/* No ARIA role: HTML AAM maps <details> to no corresponding role. ARIA 1.3 mentions "group" but adoption is inconsistent and would collide with :--group. */
/* No ARIA role: <summary>'s implicit role is "button" per HTML AAM, but exposing that here would collide with :--button. The disclosure state belongs on the parent <details>, not on summary. */
/* No native tag. Child of `:--dialog`, or next sibling of `content-drawer`. */

/* Popover is a global HTML attribute (Popover API), not a tag. */
/* No ARIA role: <label> maps to no corresponding role per HTML AAM. */

/* No ARIA role: <pre> maps to no corresponding role per HTML AAM. */
/* No ARIA role: <kbd> maps to no corresponding role per HTML AAM. */
/* No ARIA role: <samp> maps to no corresponding role per HTML AAM. */
/* No ARIA role: <tfoot> shares [role="rowgroup"] with thead/tbody and there is no positional/structural cue to disambiguate it (no equivalent of :--thead-th / :--tbody-th for footer cells). */
/* No ARIA role: <address> maps to no corresponding role per HTML AAM. */
/* No ARIA role: <dl> maps to no corresponding role per HTML AAM (the legacy "definitionlist" role was removed; "list" is in :--list and would lose dl-specific semantics). */
/* No ARIA role: <hgroup> maps to no corresponding role per HTML AAM. */
/* No ARIA role on the ul-/ol-specific aliases: their implicit role is "list", which is already exposed via :--list. Adding [role="list"] here would make any role="list" element match :--ul AND :--ol simultaneously, defeating the tag-specific intent (e.g. ul-only square markers). */
/* No ARIA role: <abbr> maps to no corresponding role per HTML AAM (the legacy "acronym" role was deprecated). */
/**
 * Document: border-box and responsive typography.
 * Reboot from normalize.css v8.0.1 (MIT) and sanitize.css v13.0.0 (CC0).
 */

/**
 * Landmarks
 *
 * Reboot from normalize.css v8.0.1 (MIT) and sanitize.css v13.0.0 (CC0).
 */

/**
 * Section
 */

/**
 * Container
 */

/**
 * Minimal auto-layout grid
 */

/**
 * Overflow utilities
 */

/**
 * abstract
 */

/**
 * Typography
 *
 * Reboot from normalize.css v8.0.1 (MIT) and sanitize.css v13.0.0 (CC0).
 */

/**
 * Link
 */

/**
 * Button
 *
 * Reboot from normalize.css v8.0.1 (MIT) and sanitize.css v13.0.0 (CC0).
 */

/**
 * Table
 *
 * Reboot from normalize.css v8.0.1 (MIT) and sanitize.css v13.0.0 (CC0).
 */

/**
 * Embedded content
 *
 * Reboot from normalize.css v8.0.1 (MIT) and sanitize.css v13.0.0 (CC0).
 */

/**
 * Code
 *
 * Reboot from normalize.css v8.0.1 (MIT) and sanitize.css v13.0.0 (CC0).
 */

/**
 * Figure
 */

/**
 * Misc
 *
 * Reboot from normalize.css v8.0.1 (MIT) and sanitize.css v13.0.0 (CC0).
 */

/**
 * Basic form elements.
 * Reboot from normalize.css v8.0.1 (MIT) and sanitize.css v13.0.0 (CC0).
 */

/**
 * Checkboxes, radios, and switches
 */

/**
 * `input[type="color"]`
 */

/**
 * Datetime inputs
 */

/**
 * `input[type="file"]`
 */

/**
 * `input[type="range"]`
 * Track: 0.375rem. Thumb: 1.25rem (2px border).
 */

/**
 * `input[type="search"]`
 */

/**
 * Accordion (<details>)
 */

/**
 * Card (<article>)
 */

/**
 * Dropdown (details.dropdown)
 */

/**
 * Dropdown menu — apply to `<details>` / `:--details`.
 * @cssclass dropdown
 */
/**
 * Group ([role="group"], [role="search"])
 */

/**
 * Loading ([aria-busy=true])
 */

/**
 * Modal (<dialog>)
 */

/**
 * Close control — `.close` or `:--button` / `:--link` with `rel="prev"`
 * Renders the theme close icon (empty content).
 * @cssclass close
 */

/**
 * Dimmer for `dialog::backdrop` and `:--dialog-backdrop-aliases`
 * (`[role="presentation"]` / `.tag-backdrop`): dialog child or drawer sibling.
 */

/**
 * Nav. Reboot from sanitize.css v13.0.0 (CC0).
 */

/**
 * Popover (`[popover]`).
 *
 * Override UA `position: fixed` centering with `position: absolute`,
 * tethered via `position-anchor: auto` (implicit anchor from
 * `popovertarget` / `showPopover({ source })`). `[data-placement]`
 * picks the side (default: top).
 *
 *   <button popovertarget="tip">...</button>
 *   <div id="tip" popover data-placement="bottom">Bubble content</div>
 */

/**
 * Progress
 *
 * Reboot from normalize.css v8.0.1 (MIT) and sanitize.css v13.0.0 (CC0).
 */

/**
 * Tooltip ([role="tooltip"])
 */

/**
 * Accessibility and user interaction.
 * Reboot from normalize.css v8.0.1 (MIT) and sanitize.css v13.0.0 (CC0).
 */

/* ============================================================
 * Theme-agnostic util mixins. No theme tokens: custom elements
 * import this file on their own.
 * ============================================================ */

/* ============================================================
 * Theme: basic. Pico-faithful default tokens.
 *
 *   - Global tokens (`:root`, `:host`)
 *   - Responsive font-size breakpoints
 *   - Element-level overrides (h1-h6, code, forms, ...)
 *   - Light scheme (default + `[data-scheme="light"]`)
 *   - Dark scheme (`prefers-color-scheme` or `[data-scheme="dark"]`)
 *
 * Values from Pico v2.1.1 compiled output; `--pico-*` renamed `--v-*`.
 * ============================================================ */

@layer {
  :host,
  :root {
    --v-font-family-emoji:
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --v-font-family-sans-serif:
    system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial,
    "Helvetica Neue", sans-serif, var(--v-font-family-emoji);
    --v-font-family-monospace:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
    monospace, var(--v-font-family-emoji);
    --v-font-family: var(--v-font-family-sans-serif);
    --v-line-height: 1.5;
    --v-font-weight: 400;
    --v-font-size: 100%;
    --v-text-underline-offset: 0.1rem;
    --v-border-radius: 0.25rem;
    --v-border-width: 0.0625rem;
    --v-outline-width: 0.125rem;
    /* transitions */
    --v-transition-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --v-transition-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --v-transition-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --v-transition-duration-fast: 0.15s;
    --v-transition-duration-standard: 0.25s;
    --v-transition-duration-slow: 0.4s;
    --v-transition: var(--v-transition-duration-standard)
    var(--v-transition-ease-out);
    --v-spacing: 1rem;
    --v-typography-spacing-vertical: 1rem;
    --v-block-spacing-vertical: var(--v-spacing);
    --v-block-spacing-horizontal: var(--v-spacing);
    --v-grid-column-gap: var(--v-spacing);
    --v-grid-row-gap: var(--v-spacing);
    --v-form-element-spacing-vertical: 0.75rem;
    --v-form-element-spacing-horizontal: 1rem;
    --v-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --v-group-box-shadow-focus-with-button: 0 0 0 var(--v-outline-width)
    var(--v-primary-focus);
    --v-group-box-shadow-focus-with-input: 0 0 0 0.0625rem
    var(--v-form-element-border-color);
    --v-modal-overlay-backdrop-filter: blur(0.375rem);
    --v-popover-max-width: 20rem;
    --v-nav-element-spacing-vertical: 1rem;
    --v-nav-element-spacing-horizontal: 0.5rem;
    --v-nav-link-spacing-vertical: 0.5rem;
    --v-nav-link-spacing-horizontal: 0.5rem;
    --v-nav-breadcrumb-divider: ">";
    --v-table-sticky-top: 0px;
    --v-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --v-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
    --v-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --v-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    --v-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
    --v-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    --v-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
    --v-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
  }

  /* Responsive root font size */
  @media (min-width: 576px) {
    :host,
    :root {
      --v-font-size: 106.25%;
    }
  }
  @media (min-width: 768px) {
    :host,
    :root {
      --v-font-size: 112.5%;
    }
  }
  @media (min-width: 1024px) {
    :host,
    :root {
      --v-font-size: 118.75%;
    }
  }
  @media (min-width: 1280px) {
    :host,
    :root {
      --v-font-size: 125%;
    }
  }
  @media (min-width: 1536px) {
    :host,
    :root {
      --v-font-size: 131.25%;
    }
  }
  /* Link */
  :is(a, [role="link"], .tag-link) {
    --v-text-decoration: underline;
  }
  :is(a, [role="link"], .tag-link).contrast,:is(a, [role="link"], .tag-link).secondary {
    --v-text-decoration: underline;
  }
  /* Typography */

  :is(button, [role="button"], [type="button"], .tag-button),
  [type="submit"],
  [type="reset"],
  [type="file"]::file-selector-button {
    --v-font-size: 1rem;
  }

  input,
  optgroup,
  select,
  textarea {
    --v-font-size: 1rem;
  }

  :is(pre, .tag-pre),:is(code, [role="code"], .tag-code),:is(kbd, .tag-kbd),:is(samp, .tag-samp),:is([popover], .tag-popover),
  [role="tooltip"] {
    --v-font-size: 0.75em;
  }

  :is(sub, .tag-sub),:is(sup, .tag-sup) {
    --v-font-size: 0.75em;
  }
  :is(small, .tag-small) {
    --v-font-size: 0.875em;
  }
  :is(h1, h2, h3, h4, h5, h6, [role="heading"], .tag-heading) {
    --v-font-weight: 700;
  }
  :is(h1, [role="heading"][aria-level="1"], .tag-h1) {
    --v-font-size: 2rem;
    --v-line-height: 1.125;
    --v-typography-spacing-top: 3rem;
  }
  :is(h2, [role="heading"][aria-level="2"], .tag-h2) {
    --v-font-size: 1.75rem;
    --v-line-height: 1.15;
    --v-typography-spacing-top: 2.625rem;
  }
  :is(h3, [role="heading"][aria-level="3"], .tag-h3) {
    --v-font-size: 1.5rem;
    --v-line-height: 1.175;
    --v-typography-spacing-top: 2.25rem;
  }
  :is(h4, [role="heading"][aria-level="4"], .tag-h4) {
    --v-font-size: 1.25rem;
    --v-line-height: 1.2;
    --v-typography-spacing-top: 1.874rem;
  }
  :is(h5, [role="heading"][aria-level="5"], .tag-h5) {
    --v-font-size: 1.125rem;
    --v-line-height: 1.225;
    --v-typography-spacing-top: 1.6875rem;
  }
  :is(h6, [role="heading"][aria-level="6"], .tag-h6) {
    --v-font-size: 1rem;
    --v-line-height: 1.25;
    --v-typography-spacing-top: 1.5rem;
  }

  /* Table */
  :is(tfoot, .tag-tfoot) :is(td, [role="cell"], [role="gridcell"], .tag-td),:is(tfoot, .tag-tfoot) :is(th, [role="columnheader"], [role="rowheader"], [scope="col"], [scope="row"], .tag-th),:is(thead, [role="rowgroup"]:has(:is(th:not([scope="row"]), [role="columnheader"], [scope="col"], .tag-th-col)), .tag-thead) :is(td, [role="cell"], [role="gridcell"], .tag-td),:is(thead, [role="rowgroup"]:has(:is(th:not([scope="row"]), [role="columnheader"], [scope="col"], .tag-th-col)), .tag-thead) :is(th, [role="columnheader"], [role="rowheader"], [scope="col"], [scope="row"], .tag-th) {
    --v-font-weight: 600;
    --v-border-width: 0.1875rem;
  }

  /* Code */
  :is(code, [role="code"], .tag-code),:is(kbd, .tag-kbd),:is(pre, .tag-pre),:is(samp, .tag-samp) {
    --v-font-family: var(--v-font-family-monospace);
  }
  :is(kbd, .tag-kbd) {
    --v-font-weight: bolder;
  }

  /* Inputs and Selects */
  :where(select, textarea),
  input:not(
    [type="submit"],
    [type="button"],
    [type="reset"],
    [type="checkbox"],
    [type="radio"],
    [type="file"]
  ) {
    --v-outline-width: 0.0625rem;
  }
  [type="search"] {
    --v-border-radius: 5rem;
  }

  /* Checkboxes, Radios and Switches */
  [type="checkbox"],
  [type="radio"] {
    --v-border-width: 0.125rem;
  }
  [type="checkbox"][role="switch"] {
    --v-border-width: 0.1875rem;
  }

  /* Dropdown */
  :is(details, .tag-details).dropdown :is(summary, .tag-summary):not([role="button"]) {
    --v-outline-width: 0.0625rem;
  }
  :is(nav, [role="navigation"], .tag-nav) :is(details, .tag-details).dropdown :is(summary, .tag-summary):focus-visible {
    --v-outline-width: 0.125rem;
  }

  /* Group / search */
  :is([role="search"], .tag-search) {
    --v-border-radius: 5rem;
  }
  :is([role="group"], .tag-group):has(:is(button, [role="button"], [type="button"], .tag-button).secondary:focus, [type="submit"].secondary:focus),:is([role="search"], .tag-search):has(:is(button, [role="button"], [type="button"], .tag-button).secondary:focus, [type="submit"].secondary:focus) {
    --v-group-box-shadow-focus-with-button: 0 0 0 var(--v-outline-width)
      var(--v-secondary-focus);
  }
  :is([role="group"], .tag-group):has(:is(button, [role="button"], [type="button"], .tag-button).contrast:focus, [type="submit"].contrast:focus),:is([role="search"], .tag-search):has(:is(button, [role="button"], [type="button"], .tag-button).contrast:focus, [type="submit"].contrast:focus) {
    --v-group-box-shadow-focus-with-button: 0 0 0 var(--v-outline-width)
      var(--v-contrast-focus);
  }
  :is([role="group"], .tag-group) :is(button, [role="button"], [type="button"], .tag-button),:is([role="group"], .tag-group) [type="submit"],:is([role="search"], .tag-search) :is(button, [role="button"], [type="button"], .tag-button),:is([role="search"], .tag-search) [type="submit"] {
    --v-form-element-spacing-horizontal: 2rem;
  }

  /* White chevron on accordion / dropdown buttons */
  :is(details, .tag-details) :is(summary, .tag-summary)[role="button"]:not(.outline)::after {
    filter: brightness(0) invert(1);
  }

  /* White loading icon on filled buttons */
  [aria-busy="true"]:not(input, select, textarea):is(:is(button, [role="button"], [type="button"], .tag-button),
      [type="submit"],
      [type="reset"]
    ):not(.outline)::before {
    filter: brightness(0) invert(1);
  }

  /* Light scheme (default; force with `[data-scheme="light"]`) */
  :host(:not([data-scheme="dark"])),
  :root:not([data-scheme="dark"]),
  [data-scheme="light"] {
    color-scheme: light;
    --v-background-color: #fff;
    --v-color: #373c44;
    --v-text-selection-color: rgba(2, 154, 232, 0.25);
    --v-muted-color: #646b79;
    --v-muted-border-color: rgb(231, 234, 239.5);
    --v-primary: #0172ad;
    --v-primary-background: #0172ad;
    --v-primary-border: var(--v-primary-background);
    --v-primary-underline: rgba(1, 114, 173, 0.5);
    --v-primary-hover: #015887;
    --v-primary-hover-background: #02659a;
    --v-primary-hover-border: var(--v-primary-hover-background);
    --v-primary-hover-underline: var(--v-primary-hover);
    --v-primary-focus: rgba(2, 154, 232, 0.5);
    --v-primary-inverse: #fff;
    --v-secondary: #5d6b89;
    --v-secondary-background: #525f7a;
    --v-secondary-border: var(--v-secondary-background);
    --v-secondary-underline: rgba(93, 107, 137, 0.5);
    --v-secondary-hover: #48536b;
    --v-secondary-hover-background: #48536b;
    --v-secondary-hover-border: var(--v-secondary-hover-background);
    --v-secondary-hover-underline: var(--v-secondary-hover);
    --v-secondary-focus: rgba(93, 107, 137, 0.25);
    --v-secondary-inverse: #fff;
    --v-contrast: #181c25;
    --v-contrast-background: #181c25;
    --v-contrast-border: var(--v-contrast-background);
    --v-contrast-underline: rgba(24, 28, 37, 0.5);
    --v-contrast-hover: #000;
    --v-contrast-hover-background: #000;
    --v-contrast-hover-border: var(--v-contrast-hover-background);
    --v-contrast-hover-underline: var(--v-secondary-hover);
    --v-contrast-focus: rgba(93, 107, 137, 0.25);
    --v-contrast-inverse: #fff;
    --v-box-shadow:
    0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698),
    0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024),
    0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03),
    0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036),
    0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302),
    0.5rem 1rem 6rem rgba(129, 145, 181, 0.06),
    0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
    --v-h1-color: #2d3138;
    --v-h2-color: #373c44;
    --v-h3-color: #424751;
    --v-h4-color: #4d535e;
    --v-h5-color: #5c6370;
    --v-h6-color: #646b79;
    --v-mark-background-color: rgb(252.5, 230.5, 191.5);
    --v-mark-color: #0f1114;
    --v-ins-color: rgb(28.5, 105.5, 84);
    --v-del-color: rgb(136, 56.5, 53);
    --v-blockquote-border-color: var(--v-muted-border-color);
    --v-blockquote-footer-color: var(--v-muted-color);
    --v-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --v-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --v-table-border-color: var(--v-muted-border-color);
    --v-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
    --v-code-background-color: rgb(243, 244.5, 246.75);
    --v-code-color: #646b79;
    --v-code-kbd-background-color: var(--v-color);
    --v-code-kbd-color: var(--v-background-color);
    --v-form-element-background-color: rgb(251, 251.5, 252.25);
    --v-form-element-selected-background-color: #dfe3eb;
    --v-form-element-border-color: #cfd5e2;
    --v-form-element-color: #23262c;
    --v-form-element-placeholder-color: var(--v-muted-color);
    --v-form-element-active-background-color: #fff;
    --v-form-element-active-border-color: var(--v-primary-border);
    --v-form-element-focus-color: var(--v-primary-border);
    --v-form-element-disabled-opacity: 0.5;
    --v-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
    --v-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
    --v-form-element-invalid-focus-color: var(
    --v-form-element-invalid-active-border-color
  );
    --v-form-element-valid-border-color: rgb(76, 154.5, 137.5);
    --v-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
    --v-form-element-valid-focus-color: var(
    --v-form-element-valid-active-border-color
  );
    --v-multiply-color-0: rgba(0, 0, 0, 0.02);
    --v-multiply-color-1: rgba(0, 0, 0, 0.04);
    --v-switch-background-color: #bfc7d9;
    --v-switch-checked-background-color: var(--v-primary-background);
    --v-switch-color: #fff;
    --v-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --v-range-border-color: #dfe3eb;
    --v-range-active-border-color: #bfc7d9;
    --v-range-thumb-border-color: var(--v-background-color);
    --v-range-thumb-color: var(--v-secondary-background);
    --v-range-thumb-active-color: var(--v-primary-background);
    --v-accordion-border-color: var(--v-muted-border-color);
    --v-accordion-active-summary-color: var(--v-primary-hover);
    --v-accordion-close-summary-color: var(--v-color);
    --v-accordion-open-summary-color: var(--v-muted-color);
    --v-card-background-color: var(--v-background-color);
    --v-card-border-color: var(--v-muted-border-color);
    --v-card-box-shadow: var(--v-box-shadow);
    --v-card-sectioning-background-color: rgb(251, 251.5, 252.25);
    --v-dropdown-background-color: #fff;
    --v-dropdown-border-color: #eff1f4;
    --v-dropdown-box-shadow: var(--v-box-shadow);
    --v-dropdown-color: var(--v-color);
    --v-dropdown-hover-background-color: #eff1f4;
    --v-loading-spinner-opacity: 0.5;
    --v-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
    --v-popover-background-color: #fff;
    --v-popover-border-color: #eff1f4;
    --v-popover-box-shadow: var(--v-box-shadow);
    --v-popover-color: var(--v-color);
    --v-progress-background-color: #dfe3eb;
    --v-progress-color: var(--v-primary-background);
    --v-tooltip-background-color: var(--v-contrast-background);
    --v-tooltip-color: var(--v-contrast-inverse);
    --v-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --v-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  }
  :host(:not([data-scheme="dark"]))
    input:is(
      [type="submit"],
      [type="button"],
      [type="reset"],
      [type="checkbox"],
      [type="radio"],
      [type="file"]
    ),
  :root:not([data-scheme="dark"])
    input:is(
      [type="submit"],
      [type="button"],
      [type="reset"],
      [type="checkbox"],
      [type="radio"],
      [type="file"]
    ),
  [data-scheme="light"]
    input:is(
      [type="submit"],
      [type="button"],
      [type="reset"],
      [type="checkbox"],
      [type="radio"],
      [type="file"]
    ) {
    --v-form-element-focus-color: var(--v-primary-focus);
  }

  /* Dark scheme (auto via `prefers-color-scheme: dark`) */
  @media only screen and (prefers-color-scheme: dark) {
    :host(:not([data-scheme])),
    :root:not([data-scheme]) {
      color-scheme: dark;
      --v-background-color: rgb(19, 22.5, 30.5);
      --v-color: #c2c7d0;
      --v-text-selection-color: rgba(1, 170, 255, 0.1875);
      --v-muted-color: #7b8495;
      --v-muted-border-color: #202632;
      --v-primary: #01aaff;
      --v-primary-background: #0172ad;
      --v-primary-border: var(--v-primary-background);
      --v-primary-underline: rgba(1, 170, 255, 0.5);
      --v-primary-hover: #79c0ff;
      --v-primary-hover-background: #017fc0;
      --v-primary-hover-border: var(--v-primary-hover-background);
      --v-primary-hover-underline: var(--v-primary-hover);
      --v-primary-focus: rgba(1, 170, 255, 0.375);
      --v-primary-inverse: #fff;
      --v-secondary: #969eaf;
      --v-secondary-background: #525f7a;
      --v-secondary-border: var(--v-secondary-background);
      --v-secondary-underline: rgba(150, 158, 175, 0.5);
      --v-secondary-hover: #b3b9c5;
      --v-secondary-hover-background: #5d6b89;
      --v-secondary-hover-border: var(--v-secondary-hover-background);
      --v-secondary-hover-underline: var(--v-secondary-hover);
      --v-secondary-focus: rgba(144, 158, 190, 0.25);
      --v-secondary-inverse: #fff;
      --v-contrast: #dfe3eb;
      --v-contrast-background: #eff1f4;
      --v-contrast-border: var(--v-contrast-background);
      --v-contrast-underline: rgba(223, 227, 235, 0.5);
      --v-contrast-hover: #fff;
      --v-contrast-hover-background: #fff;
      --v-contrast-hover-border: var(--v-contrast-hover-background);
      --v-contrast-hover-underline: var(--v-contrast-hover);
      --v-contrast-focus: rgba(207, 213, 226, 0.25);
      --v-contrast-inverse: #000;
      --v-box-shadow:
    0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698),
    0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024),
    0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03),
    0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036),
    0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302),
    0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06),
    0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
      --v-h1-color: #f0f1f3;
      --v-h2-color: #e0e3e7;
      --v-h3-color: #c2c7d0;
      --v-h4-color: #b3b9c5;
      --v-h5-color: #a4acba;
      --v-h6-color: #8891a4;
      --v-mark-background-color: #014063;
      --v-mark-color: #fff;
      --v-ins-color: #62af9a;
      --v-del-color: rgb(205.5, 126, 123);
      --v-blockquote-border-color: var(--v-muted-border-color);
      --v-blockquote-footer-color: var(--v-muted-color);
      --v-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
      --v-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
      --v-table-border-color: var(--v-muted-border-color);
      --v-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
      --v-code-background-color: rgb(26, 30.5, 40.25);
      --v-code-color: #8891a4;
      --v-code-kbd-background-color: var(--v-color);
      --v-code-kbd-color: var(--v-background-color);
      --v-form-element-background-color: rgb(28, 33, 43.5);
      --v-form-element-selected-background-color: #2a3140;
      --v-form-element-border-color: #2a3140;
      --v-form-element-color: #e0e3e7;
      --v-form-element-placeholder-color: #8891a4;
      --v-form-element-active-background-color: rgb(26, 30.5, 40.25);
      --v-form-element-active-border-color: var(--v-primary-border);
      --v-form-element-focus-color: var(--v-primary-border);
      --v-form-element-disabled-opacity: 0.5;
      --v-form-element-invalid-border-color: rgb(149.5, 74, 80);
      --v-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
      --v-form-element-invalid-focus-color: var(
    --v-form-element-invalid-active-border-color
  );
      --v-form-element-valid-border-color: #2a7b6f;
      --v-form-element-valid-active-border-color: rgb(22, 137, 105.5);
      --v-form-element-valid-focus-color: var(
    --v-form-element-valid-active-border-color
  );
      --v-multiply-color-0: rgba(255, 255, 255, 0.02);
      --v-multiply-color-1: rgba(255, 255, 255, 0.04);
      --v-switch-background-color: #333c4e;
      --v-switch-checked-background-color: var(--v-primary-background);
      --v-switch-color: #fff;
      --v-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
      --v-range-border-color: #202632;
      --v-range-active-border-color: #2a3140;
      --v-range-thumb-border-color: var(--v-background-color);
      --v-range-thumb-color: var(--v-secondary-background);
      --v-range-thumb-active-color: var(--v-primary-background);
      --v-accordion-border-color: var(--v-muted-border-color);
      --v-accordion-active-summary-color: var(--v-primary-hover);
      --v-accordion-close-summary-color: var(--v-color);
      --v-accordion-open-summary-color: var(--v-muted-color);
      --v-card-background-color: #181c25;
      --v-card-border-color: var(--v-card-background-color);
      --v-card-box-shadow: var(--v-box-shadow);
      --v-card-sectioning-background-color: rgb(26, 30.5, 40.25);
      --v-dropdown-background-color: #181c25;
      --v-dropdown-border-color: #202632;
      --v-dropdown-box-shadow: var(--v-box-shadow);
      --v-dropdown-color: var(--v-color);
      --v-dropdown-hover-background-color: #202632;
      --v-loading-spinner-opacity: 0.5;
      --v-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
      --v-popover-background-color: #181c25;
      --v-popover-border-color: #202632;
      --v-popover-box-shadow: var(--v-box-shadow);
      --v-popover-color: var(--v-color);
      --v-progress-background-color: #202632;
      --v-progress-color: var(--v-primary-background);
      --v-tooltip-background-color: var(--v-contrast-background);
      --v-tooltip-color: var(--v-contrast-inverse);
      --v-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
      --v-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
    }
    :host(:not([data-scheme]))
      input:is(
        [type="submit"],
        [type="button"],
        [type="reset"],
        [type="checkbox"],
        [type="radio"],
        [type="file"]
      ),
    :root:not([data-scheme])
      input:is(
        [type="submit"],
        [type="button"],
        [type="reset"],
        [type="checkbox"],
        [type="radio"],
        [type="file"]
      ) {
      --v-form-element-focus-color: var(--v-primary-focus);
    }
    :host(:not([data-scheme]))
      :is(details, .tag-details)
      :is(summary, .tag-summary)[role="button"].contrast:not(.outline)::after,
    :root:not([data-scheme])
      :is(details, .tag-details)
      :is(summary, .tag-summary)[role="button"].contrast:not(.outline)::after {
      filter: brightness(0);
    }
    :host(:not([data-scheme]))
      [aria-busy="true"]:not(input, select, textarea).contrast:is(:is(button, [role="button"], [type="button"], .tag-button),
        [type="submit"],
        [type="reset"]
      ):not(.outline)::before,
    :root:not([data-scheme])
      [aria-busy="true"]:not(input, select, textarea).contrast:is(:is(button, [role="button"], [type="button"], .tag-button),
        [type="submit"],
        [type="reset"]
      ):not(.outline)::before {
      filter: brightness(0);
    }
  }

  /* Dark scheme (force with `[data-scheme="dark"]`) */
  [data-scheme="dark"] {
    color-scheme: dark;
    --v-background-color: rgb(19, 22.5, 30.5);
    --v-color: #c2c7d0;
    --v-text-selection-color: rgba(1, 170, 255, 0.1875);
    --v-muted-color: #7b8495;
    --v-muted-border-color: #202632;
    --v-primary: #01aaff;
    --v-primary-background: #0172ad;
    --v-primary-border: var(--v-primary-background);
    --v-primary-underline: rgba(1, 170, 255, 0.5);
    --v-primary-hover: #79c0ff;
    --v-primary-hover-background: #017fc0;
    --v-primary-hover-border: var(--v-primary-hover-background);
    --v-primary-hover-underline: var(--v-primary-hover);
    --v-primary-focus: rgba(1, 170, 255, 0.375);
    --v-primary-inverse: #fff;
    --v-secondary: #969eaf;
    --v-secondary-background: #525f7a;
    --v-secondary-border: var(--v-secondary-background);
    --v-secondary-underline: rgba(150, 158, 175, 0.5);
    --v-secondary-hover: #b3b9c5;
    --v-secondary-hover-background: #5d6b89;
    --v-secondary-hover-border: var(--v-secondary-hover-background);
    --v-secondary-hover-underline: var(--v-secondary-hover);
    --v-secondary-focus: rgba(144, 158, 190, 0.25);
    --v-secondary-inverse: #fff;
    --v-contrast: #dfe3eb;
    --v-contrast-background: #eff1f4;
    --v-contrast-border: var(--v-contrast-background);
    --v-contrast-underline: rgba(223, 227, 235, 0.5);
    --v-contrast-hover: #fff;
    --v-contrast-hover-background: #fff;
    --v-contrast-hover-border: var(--v-contrast-hover-background);
    --v-contrast-hover-underline: var(--v-contrast-hover);
    --v-contrast-focus: rgba(207, 213, 226, 0.25);
    --v-contrast-inverse: #000;
    --v-box-shadow:
    0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698),
    0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024),
    0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03),
    0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036),
    0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302),
    0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06),
    0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
    --v-h1-color: #f0f1f3;
    --v-h2-color: #e0e3e7;
    --v-h3-color: #c2c7d0;
    --v-h4-color: #b3b9c5;
    --v-h5-color: #a4acba;
    --v-h6-color: #8891a4;
    --v-mark-background-color: #014063;
    --v-mark-color: #fff;
    --v-ins-color: #62af9a;
    --v-del-color: rgb(205.5, 126, 123);
    --v-blockquote-border-color: var(--v-muted-border-color);
    --v-blockquote-footer-color: var(--v-muted-color);
    --v-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --v-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --v-table-border-color: var(--v-muted-border-color);
    --v-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
    --v-code-background-color: rgb(26, 30.5, 40.25);
    --v-code-color: #8891a4;
    --v-code-kbd-background-color: var(--v-color);
    --v-code-kbd-color: var(--v-background-color);
    --v-form-element-background-color: rgb(28, 33, 43.5);
    --v-form-element-selected-background-color: #2a3140;
    --v-form-element-border-color: #2a3140;
    --v-form-element-color: #e0e3e7;
    --v-form-element-placeholder-color: #8891a4;
    --v-form-element-active-background-color: rgb(26, 30.5, 40.25);
    --v-form-element-active-border-color: var(--v-primary-border);
    --v-form-element-focus-color: var(--v-primary-border);
    --v-form-element-disabled-opacity: 0.5;
    --v-form-element-invalid-border-color: rgb(149.5, 74, 80);
    --v-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
    --v-form-element-invalid-focus-color: var(
    --v-form-element-invalid-active-border-color
  );
    --v-form-element-valid-border-color: #2a7b6f;
    --v-form-element-valid-active-border-color: rgb(22, 137, 105.5);
    --v-form-element-valid-focus-color: var(
    --v-form-element-valid-active-border-color
  );
    --v-multiply-color-0: rgba(255, 255, 255, 0.02);
    --v-multiply-color-1: rgba(255, 255, 255, 0.04);
    --v-switch-background-color: #333c4e;
    --v-switch-checked-background-color: var(--v-primary-background);
    --v-switch-color: #fff;
    --v-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --v-range-border-color: #202632;
    --v-range-active-border-color: #2a3140;
    --v-range-thumb-border-color: var(--v-background-color);
    --v-range-thumb-color: var(--v-secondary-background);
    --v-range-thumb-active-color: var(--v-primary-background);
    --v-accordion-border-color: var(--v-muted-border-color);
    --v-accordion-active-summary-color: var(--v-primary-hover);
    --v-accordion-close-summary-color: var(--v-color);
    --v-accordion-open-summary-color: var(--v-muted-color);
    --v-card-background-color: #181c25;
    --v-card-border-color: var(--v-card-background-color);
    --v-card-box-shadow: var(--v-box-shadow);
    --v-card-sectioning-background-color: rgb(26, 30.5, 40.25);
    --v-dropdown-background-color: #181c25;
    --v-dropdown-border-color: #202632;
    --v-dropdown-box-shadow: var(--v-box-shadow);
    --v-dropdown-color: var(--v-color);
    --v-dropdown-hover-background-color: #202632;
    --v-loading-spinner-opacity: 0.5;
    --v-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
    --v-popover-background-color: #181c25;
    --v-popover-border-color: #202632;
    --v-popover-box-shadow: var(--v-box-shadow);
    --v-popover-color: var(--v-color);
    --v-progress-background-color: #202632;
    --v-progress-color: var(--v-primary-background);
    --v-tooltip-background-color: var(--v-contrast-background);
    --v-tooltip-color: var(--v-contrast-inverse);
    --v-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --v-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  }
  [data-scheme="dark"]
    input:is(
      [type="submit"],
      [type="button"],
      [type="reset"],
      [type="checkbox"],
      [type="radio"],
      [type="file"]
    ) {
    --v-form-element-focus-color: var(--v-primary-focus);
  }
  [data-scheme="dark"]
    :is(details, .tag-details)
    :is(summary, .tag-summary)[role="button"].contrast:not(.outline)::after {
    filter: brightness(0);
  }
  [data-scheme="dark"]
    [aria-busy="true"]:not(input, select, textarea).contrast:is(:is(button, [role="button"], [type="button"], .tag-button),
      [type="submit"],
      [type="reset"]
    ):not(.outline)::before {
    filter: brightness(0);
  }

  /* Native accent color (from schemes.scss) */
  [type="checkbox"],
  [type="radio"],
  [type="range"],:is(progress, [role="progressbar"], .tag-progress) {
    accent-color: var(--v-primary);
  }

  /* Responsive spacing: landmarks / sections + cards */
  :is(section, [role="section"], .tag-section) {
    /* sm */
    @media (min-width: 576px) {
      --v-block-spacing-vertical: calc(var(--v-spacing) * 1.25);
    }
    /* md */
    @media (min-width: 768px) {
      --v-block-spacing-vertical: calc(var(--v-spacing) * 1.5);
    }
    /* lg */
    @media (min-width: 1024px) {
      --v-block-spacing-vertical: calc(var(--v-spacing) * 1.75);
    }
    /* xl */
    @media (min-width: 1280px) {
      --v-block-spacing-vertical: calc(var(--v-spacing) * 2);
    }
    /* xxl */
    @media (min-width: 1536px) {
      --v-block-spacing-vertical: calc(var(--v-spacing) * 2.25);
    }
  }
  body {
    /* Best donut-scoping option after trying the rest. */
    :where(&, & > .abstract, & > .abstract > .abstract) {
    /* `:where` keeps nested `.abstract` from winning on specificity */
      > :is(header, [role="header"], .tag-header),
      > :is(main, [role="main"], .tag-main),
      > :is(footer, [role="footer"], .tag-footer) {
        /* sm */
        @media (min-width: 576px) {
      --v-block-spacing-vertical: calc(var(--v-spacing) * 1.25);
    }
        /* md */
        @media (min-width: 768px) {
      --v-block-spacing-vertical: calc(var(--v-spacing) * 1.5);
    }
        /* lg */
        @media (min-width: 1024px) {
      --v-block-spacing-vertical: calc(var(--v-spacing) * 1.75);
    }
        /* xl */
        @media (min-width: 1280px) {
      --v-block-spacing-vertical: calc(var(--v-spacing) * 2);
    }
        /* xxl */
        @media (min-width: 1536px) {
      --v-block-spacing-vertical: calc(var(--v-spacing) * 2.25);
    }
      }
  }
  }

  :is(article, [role="article"], .tag-article) {
    @media (min-width: 576px) {
      --v-block-spacing-vertical: calc(var(--v-spacing) * 1.25);
      --v-block-spacing-horizontal: calc(var(--v-spacing) * 1.25);
    }
    @media (min-width: 768px) {
      --v-block-spacing-vertical: calc(var(--v-spacing) * 1.5);
      --v-block-spacing-horizontal: calc(var(--v-spacing) * 1.5);
    }
    @media (min-width: 1024px) {
      --v-block-spacing-vertical: calc(var(--v-spacing) * 1.75);
      --v-block-spacing-horizontal: calc(var(--v-spacing) * 1.75);
    }
    @media (min-width: 1280px) {
      --v-block-spacing-vertical: calc(var(--v-spacing) * 2);
      --v-block-spacing-horizontal: calc(var(--v-spacing) * 2);
    }
    @media (min-width: 1536px) {
      --v-block-spacing-vertical: calc(var(--v-spacing) * 2.25);
      --v-block-spacing-horizontal: calc(var(--v-spacing) * 2.25);
    }
  }
}

/* ============================================================
 * Apply every framework mixin.
 *
 * Mixins: `mixins.default.css`. Theme tokens: `<theme>-vars.css`.
 *
 * Element / alias styles sit in an anonymous `@layer` so consumer
 * and custom-element sheets can override them. Class-only utilities
 * stay unlayered: unlayered beats every `@layer` (including later
 * anonymous `@layer { }` from custom elements imported after Valence.css),
 * so `.grid` / `.abstract` still win at equal specificity.
 * ============================================================ */

@layer {
  /* 1. Border-box (opinionated)
     2. No background-repeat (opinionated) */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    background-repeat: no-repeat;
  }
  /* 1. Inherit text-decoration (opinionated)
     2. Inherit vertical-align (opinionated) */
  ::before,
  ::after {
    text-decoration: inherit;
    vertical-align: inherit;
  }
  /* 1. Line-height (opinionated)
     2. Break words to avoid overflow (opinionated)
     3. 4-space tabs (opinionated)
     4. No iOS tap highlight (opinionated)
     5. Don't resize text after iOS orientation change */
  :where(:root),
  :where(:host) {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
         text-size-adjust: 100%;
    background-color: var(--v-background-color);
    color: var(--v-color);
    font-weight: var(--v-font-weight);
    font-size: var(--v-font-size);
    line-height: var(--v-line-height);
    font-family: var(--v-font-family);
    text-underline-offset: var(--v-text-underline-offset);
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
    -moz-tab-size: 4;
      -o-tab-size: 4;
         tab-size: 4;
  }
  /* 1. Drop body margin (opinionated) */
  body {
    width: 100%;
    margin: 0;
  }
  /* Landmark aliases: match native HTML display (custom elements / role) */
  :is(header, [role="header"], .tag-header),:is(main, [role="main"], .tag-main),:is(footer, [role="footer"], .tag-footer) {
    display: block;
  }
  /* `<header>`, `<main>`, `<footer>` as semantic containers */
  body {
    /* Best donut-scoping option after trying the rest. */
    :where(&, & > .abstract, & > .abstract > .abstract) {
    /* `:where` keeps nested `.abstract` from winning on specificity */
      > :is(header, [role="header"], .tag-header),
      > :is(main, [role="main"], .tag-main),
      > :is(footer, [role="footer"], .tag-footer) {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding: var(--v-block-spacing-vertical)
          var(--v-block-spacing-horizontal);

        /* sm: also drop horizontal padding (first breakpoint) */
        @media (min-width: 576px) {
          max-width: 510px;
          padding-right: 0;
          padding-left: 0;
        }
        @media (min-width: 768px) {
          max-width: 700px;
        }
        @media (min-width: 1024px) {
          max-width: 950px;
        }
        @media (min-width: 1280px) {
          max-width: 1200px;
        }
        @media (min-width: 1536px) {
          max-width: 1450px;
        }
      }
  }
  }
  :is(section, [role="section"], .tag-section) {
    display: block;
    margin-bottom: var(--v-block-spacing-vertical);
  }

  /* Inline text primitives as bare tags (custom elements rarely emit these) */

  /* Correct font-weight in Chrome, Edge, Safari */

  :is(b, .tag-b),:is(strong, .tag-strong) {
    display: inline;
    font-weight: bolder;
  }

  /* Keep `sub` / `sup` from changing line-height */

  :is(sub, .tag-sub),:is(sup, .tag-sup) {
    display: inline;
    position: relative;
    font-size: var(--v-font-size);
    line-height: 0;
    vertical-align: baseline;
  }

  :is(sub, .tag-sub) {
    bottom: -0.25em;
  }

  :is(sup, .tag-sup) {
    top: -0.5em;
  }

  :is(small, .tag-small) {
    display: inline;
    font-size: var(--v-font-size);
    &:is([role="note"], .tag-note) {
      display: block;
      width: 100%;
      margin: var(--v-spacing) 0;
      color: var(--v-muted-color);
    }
  }

  :is(address, .tag-address),:is(blockquote, [role="blockquote"], .tag-blockquote),:is(dl, .tag-dl),:is(form, [role="form"], .tag-form),:is(ul, ol, [role="list"], .tag-list),:is(p, [role="paragraph"], .tag-p),:is(pre, .tag-pre) {
    display: block;
  }

  :is(address, .tag-address),:is(blockquote, [role="blockquote"], .tag-blockquote),:is(dl, .tag-dl),:is(ul, ol, [role="list"], .tag-list),:is(p, [role="paragraph"], .tag-p),:is(pre, .tag-pre),:is(table, [role="table"], .tag-table) {
    margin-top: 0;
    margin-bottom: var(--v-typography-spacing-vertical);
    color: var(--v-color);
    font-style: normal;
    font-weight: var(--v-font-weight);
  }

  /* Headings */

  :is(h1, h2, h3, h4, h5, h6, [role="heading"], .tag-heading) {
    display: block;
    margin-top: 0;
    margin-bottom: var(--v-typography-spacing-vertical);
    color: var(--v-color);
    font-weight: var(--v-font-weight);
    font-size: var(--v-font-size);
    line-height: var(--v-line-height);
    font-family: var(--v-font-family);
  }

  :is(h1, [role="heading"][aria-level="1"], .tag-h1) {
    --v-color: var(--v-h1-color);
  }

  :is(h2, [role="heading"][aria-level="2"], .tag-h2) {
    --v-color: var(--v-h2-color);
  }

  :is(h3, [role="heading"][aria-level="3"], .tag-h3) {
    --v-color: var(--v-h3-color);
  }

  :is(h4, [role="heading"][aria-level="4"], .tag-h4) {
    --v-color: var(--v-h4-color);
  }

  :is(h5, [role="heading"][aria-level="5"], .tag-h5) {
    --v-color: var(--v-h5-color);
  }

  :is(h6, [role="heading"][aria-level="6"], .tag-h6) {
    --v-color: var(--v-h6-color);
  }

  /* Margin-top for headings after a block */

  :where(:is(article, [role="article"], .tag-article),:is(address, .tag-address),:is(blockquote, [role="blockquote"], .tag-blockquote),:is(dl, .tag-dl),:is(figure, [role="figure"], .tag-figure),:is(form, [role="form"], .tag-form),:is(ul, ol, [role="list"], .tag-list),:is(p, [role="paragraph"], .tag-p),:is(pre, .tag-pre),:is(table, [role="table"], .tag-table)) {
    ~ :is(h1, h2, h3, h4, h5, h6, [role="heading"], .tag-heading) {
      margin-top: var(--v-typography-spacing-top);
    }
  }

  /* Paragraphs */

  :is(p, [role="paragraph"], .tag-p) {
    margin-bottom: var(--v-typography-spacing-vertical);
  }

  /* Heading group */

  :is(hgroup, .tag-hgroup) {
    display: block;
    margin-bottom: var(--v-typography-spacing-vertical);

    > * {
      margin-top: 0;
      margin-bottom: 0;
    }

    > *:not(:first-child):last-child {
      --v-color: var(--v-muted-color);
      --v-font-weight: unset;
      font-size: 1rem;
    }
  }

  /* Lists */

  :is(li, [role="listitem"], .tag-li) {
    display: list-item;
  }

  :where(:is(ul, ol, [role="list"], .tag-list)) {
    :is(li, [role="listitem"], .tag-li) {
      margin-bottom: calc(var(--v-typography-spacing-vertical) * 0.25);
    }
  }

  /* Nested-list spacing
     1. Drop nested-list margin in Chrome, Edge, IE, Safari */

  :where(:is(dl, .tag-dl),:is(ul, ol, [role="list"], .tag-list)) :where(:is(dl, .tag-dl),:is(ul, ol, [role="list"], .tag-list)) {
    margin: 0; /* 1 */
    margin-top: calc(var(--v-typography-spacing-vertical) * 0.25);
  }

  /* Tag-specific list aliases (`.tag-ul` / `.tag-ol` aren't in `:--list`) */

  :is(ul, .tag-ul),:is(ol, .tag-ol) {
    display: block;
  }

  /* Square markers only on `ul`-flavored lists (not generic `:--list`). */

  :is(ul, .tag-ul) :is(li, [role="listitem"], .tag-li) {
    list-style: square;
  }

  /* Highlighted text */

  :is(mark, [role="mark"], .tag-mark) {
    display: inline;
    padding: 0.125rem 0.25rem;
    background-color: var(--v-mark-background-color);
    color: var(--v-mark-color);
    vertical-align: baseline;
  }

  /* Blockquote */

  :is(blockquote, [role="blockquote"], .tag-blockquote) {
    margin: var(--v-typography-spacing-vertical) 0;
    padding: var(--v-spacing);
    border-right: none;
    border-left: 0.25rem solid var(--v-blockquote-border-color);
    border-inline-start: 0.25rem solid var(--v-blockquote-border-color);
    border-inline-end: none;

    :is(footer, [role="footer"], .tag-footer) {
      margin-top: calc(var(--v-typography-spacing-vertical) * 0.5);
      color: var(--v-blockquote-footer-color);
    }
  }

  /* Abbreviations
     1. Drop underline in Chrome, Edge, IE, Opera, Safari */

  :is(abbr, .tag-abbr) {
    display: inline;
  }

  :is(abbr, .tag-abbr)[title] {
    border-bottom: 1px dotted;
    text-decoration: none; /* 1 */
    cursor: help;
  }

  /* Ins */

  :is(ins, [role="insertion"], .tag-ins) {
    display: inline;
    color: var(--v-ins-color);
    text-decoration: none;
  }

  /* Del */

  :is(del, [role="deletion"], .tag-del) {
    display: inline;
    color: var(--v-del-color);
  }

  /* Selection */

  ::-moz-selection {
    background-color: var(--v-text-selection-color);
  }

  ::selection {
    background-color: var(--v-text-selection-color);
  }
  :where(:is(a, [role="link"], .tag-link):not(:is(button, [role="button"], [type="button"], .tag-button))) {
    --v-color: var(--v-primary);
    --v-background-color: transparent;
    --v-underline: var(--v-primary-underline);
    display: inline;
    outline: none;
    background-color: transparent;
    background-color: var(--v-background-color); /* 1 */
    color: var(--v-color);
    -webkit-text-decoration: var(--v-text-decoration);
            text-decoration: var(--v-text-decoration);
    text-decoration-color: var(--v-underline);
    text-underline-offset: 0.125em;

    transition:
      background-color var(--v-transition),
      color var(--v-transition),
      box-shadow var(--v-transition),
      -webkit-text-decoration var(--v-transition);

    transition:
      background-color var(--v-transition),
      color var(--v-transition),
      text-decoration var(--v-transition),
      box-shadow var(--v-transition);

    transition:
      background-color var(--v-transition),
      color var(--v-transition),
      text-decoration var(--v-transition),
      box-shadow var(--v-transition),
      -webkit-text-decoration var(--v-transition);

    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
      --v-color: var(--v-primary-hover);
      --v-underline: var(--v-primary-hover-underline);
      --v-text-decoration: underline;
    }

    &:focus-visible {
      box-shadow: 0 0 0 var(--v-outline-width) var(--v-primary-focus);
    }

    /* Secondary */
    /**
     * Muted / secondary link flavor.
     * @cssclass secondary
     */
    &.secondary {
      --v-color: var(--v-secondary);
      --v-underline: var(--v-secondary-underline);

      &:is(
        [aria-current]:not([aria-current="false"]),
        :hover,
        :active,
        :focus
      ) {
        --v-color: var(--v-secondary-hover);
        --v-underline: var(--v-secondary-hover-underline);
      }
    }

    /* Contrast */
    /**
     * High-contrast link flavor.
     * @cssclass contrast
     */
    &.contrast {
      --v-color: var(--v-contrast);
      --v-underline: var(--v-contrast-underline);

      &:is(
        [aria-current]:not([aria-current="false"]),
        :hover,
        :active,
        :focus
      ) {
        --v-color: var(--v-contrast-hover);
        --v-underline: var(--v-contrast-hover-underline);
      }
    }
  }
  /* Anchor-as-button needs block-like layout */
  a:is(button, [role="button"], [type="button"], .tag-button) {
    display: inline-block;
  }
  :is(:is(button, [role="button"], [type="button"], .tag-button)) {
    /* 1. Font styles (all browsers)
       2. Drop Safari control margin
       3. Show overflow in Edge */
    margin: 0; /* 2 */
    overflow: visible; /* 3 */
    font-family: inherit; /* 1 */
    text-transform: none; /* 1 */
    /* Aliases must use `button` UA styles */
    padding-block: 1px;
    padding-inline: 6px;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    letter-spacing: normal;
    text-rendering: auto;
  }
  /* Style buttons in iOS / Safari */
  button,
  [type="submit"],
  [type="reset"],
  [type="button"] {
    -webkit-appearance: button;
  }
  :is(button, [role="button"], [type="button"], .tag-button),
  [type="submit"],
  [type="reset"],
  [type="file"]::file-selector-button {
    --v-background-color: var(--v-primary-background);
    --v-border-color: var(--v-primary-border);
    --v-color: var(--v-primary-inverse);
    --v-box-shadow: var(--v-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
    padding: var(--v-form-element-spacing-vertical)
      var(--v-form-element-spacing-horizontal);
    border: var(--v-border-width) solid #0172ad;
    border: var(--v-border-width) solid var(--v-border-color);
    border-radius: var(--v-border-radius);
    outline: none;
    background-color: #0172ad;
    background-color: var(--v-background-color);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: var(--v-box-shadow);
    color: var(--v-color);
    font-weight: var(--v-font-weight);
    font-size: var(--v-font-size);
    line-height: var(--v-line-height);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;

    transition:
      background-color var(--v-transition),
      border-color var(--v-transition),
      color var(--v-transition),
      box-shadow var(--v-transition);

    &:is([aria-current]:not([aria-current="false"])),
    &:is(:hover, :active, :focus) {
      --v-background-color: var(--v-primary-hover-background);
      --v-border-color: var(--v-primary-hover-border);
      --v-box-shadow: var(--v-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
      --v-color: var(--v-primary-inverse);
    }

    &:focus,
    &:is([aria-current]:not([aria-current="false"])):focus {
      --v-box-shadow:
        var(--v-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
        0 0 0 var(--v-outline-width) var(--v-primary-focus);
    }
  }
  [type="submit"],
  [type="reset"],
  [type="button"] {
    margin-bottom: var(--v-spacing);
  }
  /**
   * Secondary button / submit flavor.
   * @cssclass secondary
   */
  /* Secondary */
  :is(:is(button, [role="button"], [type="button"], .tag-button), [type="submit"]).secondary,
  [type="reset"],
  [type="file"]::file-selector-button {
    --v-background-color: var(--v-secondary-background);
    --v-border-color: var(--v-secondary-border);
    --v-color: var(--v-secondary-inverse);
    cursor: pointer;

    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
      --v-background-color: var(--v-secondary-hover-background);
      --v-border-color: var(--v-secondary-hover-border);
      --v-color: var(--v-secondary-inverse);
    }

    &:focus,
    &:is([aria-current]:not([aria-current="false"])):focus {
      --v-box-shadow:
        var(--v-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
        0 0 0 var(--v-outline-width) var(--v-secondary-focus);
    }
  }
  /**
   * High-contrast button / submit flavor.
   * @cssclass contrast
   */
  /* Contrast */
  :is(:is(button, [role="button"], [type="button"], .tag-button), [type="submit"]).contrast {
    --v-background-color: var(--v-contrast-background);
    --v-border-color: var(--v-contrast-border);
    --v-color: var(--v-contrast-inverse);

    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
      --v-background-color: var(--v-contrast-hover-background);
      --v-border-color: var(--v-contrast-hover-border);
      --v-color: var(--v-contrast-inverse);
    }

    &:focus,
    &:is([aria-current]:not([aria-current="false"])):focus {
      --v-box-shadow:
        var(--v-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
        0 0 0 var(--v-outline-width) var(--v-contrast-focus);
    }
  }
  /**
   * Outline (ghost) button flavor — pair with `.secondary` / `.contrast`.
   * @cssclass outline
   */
  /* Outline (primary) */
  :is(:is(button, [role="button"], [type="button"], .tag-button), [type="submit"]).outline,
  [type="reset"].outline {
    --v-background-color: transparent;
    --v-color: var(--v-primary);
    --v-border-color: var(--v-primary);

    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
      --v-background-color: transparent;
      --v-color: var(--v-primary-hover);
      --v-border-color: var(--v-primary-hover);
    }
  }
  /* Outline (secondary) */
  :is(:is(button, [role="button"], [type="button"], .tag-button), [type="submit"]).outline.secondary,
  [type="reset"].outline {
    --v-color: var(--v-secondary);
    --v-border-color: var(--v-secondary);

    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
      --v-color: var(--v-secondary-hover);
      --v-border-color: var(--v-secondary-hover);
    }
  }
  /* Outline (contrast) */
  :is(:is(button, [role="button"], [type="button"], .tag-button), [type="submit"]).outline.contrast {
    --v-color: var(--v-contrast);
    --v-border-color: var(--v-contrast);

    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
      --v-color: var(--v-contrast-hover);
      --v-border-color: var(--v-contrast-hover);
    }
  }
  /* Button [disabled] */
  :where(:is(button, [role="button"], [type="button"], .tag-button), [type="submit"], [type="reset"]):is([disabled], [aria-disabled="true"]),
  :where(fieldset[disabled]) :is(:is(button, [role="button"], [type="button"], .tag-button), [type="submit"], [type="reset"]) {
    opacity: 0.5;
    pointer-events: none;
  }
  /* 1. Collapse border-spacing (opinionated)
     2. Drop table text-indent in Chrome, Edge, Safari */
  :where(:is(table, [role="table"], .tag-table)) {
    width: 100%;
    border-collapse: collapse; /* 1 */
    border-spacing: 0;
    text-indent: 0; /* 2 */
  }
  :is(table, [role="table"], .tag-table) {
    display: table;
    margin-bottom: var(--v-typography-spacing-vertical);

    :is(thead, [role="rowgroup"]:has(:is(th:not([scope="row"]), [role="columnheader"], [scope="col"], .tag-th-col)), .tag-thead) {
      display: table-header-group;
    }

    :is(th, [role="columnheader"], [role="rowheader"], [scope="col"], [scope="row"], .tag-th) {
      &:is(:is([aria-sort])) {
        cursor: pointer;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
        &::after {
          white-space: pre-wrap;
          content: "▲\A▼";
          font-size: 0.6em;
          opacity: 0.5;
          margin-left: calc(var(--v-spacing) * 0.5);
          display: inline-block;
          vertical-align: text-bottom;
          text-align: center;
          width: 20px;
          line-height: 1em;
        }
      }
      &:is(:is([aria-sort="ascending"]))::after {
        content: "▲";
        font-size: 0.85em;
        vertical-align: baseline;
      }
      &:is(:is([aria-sort="descending"]))::after {
        content: "▼";
        font-size: 0.85em;
        vertical-align: baseline;
      }
    }

    :is(tbody, [role="rowgroup"]:has(:is(th:not([scope="col"]), [role="rowheader"], [scope="row"], .tag-th-row),:is(td, [role="cell"], [role="gridcell"], .tag-td)), .tag-tbody) {
      display: table-row-group;
    }

    :is(tfoot, .tag-tfoot) {
      display: table-footer-group;
    }

    :is(tr, [role="row"], .tag-tr) {
      display: table-row;
    }

    :is(th, [role="columnheader"], [role="rowheader"], [scope="col"], [scope="row"], .tag-th),:is(td, [role="cell"], [role="gridcell"], .tag-td) {
      display: table-cell;
    }

    /* Corner cell radii */
    :is(tr, [role="row"], .tag-tr):first-of-type:not(:is(:is(thead, [role="rowgroup"]:has(:is(th:not([scope="row"]), [role="columnheader"], [scope="col"], .tag-th-col)), .tag-thead) ~ *,:is(tbody, [role="rowgroup"]:has(:is(th:not([scope="col"]), [role="rowheader"], [scope="row"], .tag-th-row),:is(td, [role="cell"], [role="gridcell"], .tag-td)), .tag-tbody) ~ *) > :is(tr, [role="row"], .tag-tr)) {
      > :first-child {
        border-top-left-radius: var(--v-border-radius);
      }
      > :last-child {
        border-top-right-radius: var(--v-border-radius);
      }
    }
    :is(tr, [role="row"], .tag-tr):last-of-type:not(*:has(~ :is(tfoot, .tag-tfoot), ~ :is(tbody, [role="rowgroup"]:has(:is(th:not([scope="col"]), [role="rowheader"], [scope="row"], .tag-th-row),:is(td, [role="cell"], [role="gridcell"], .tag-td)), .tag-tbody)) > :is(tr, [role="row"], .tag-tr)) {
      > * {
        border-bottom-width: 0;
      }
      > :first-child {
        border-bottom-left-radius: var(--v-border-radius);
      }
      > :last-child {
        border-bottom-right-radius: var(--v-border-radius);
      }
    }
    /* Cells */
    :is(th, [role="columnheader"], [role="rowheader"], [scope="col"], [scope="row"], .tag-th),:is(td, [role="cell"], [role="gridcell"], .tag-td) {
      padding: calc(var(--v-spacing) / 2) var(--v-spacing);
      border-bottom: var(--v-border-width) solid var(--v-table-border-color);
      background-color: var(--v-background-color);
      color: var(--v-color);
      font-weight: var(--v-font-weight);
      text-align: left;
      text-align: start;
    }

    /* Header */
    :is(thead, [role="rowgroup"]:has(:is(th:not([scope="row"]), [role="columnheader"], [scope="col"], .tag-th-col)), .tag-thead) {
      :is(th, [role="columnheader"], [role="rowheader"], [scope="col"], [scope="row"], .tag-th),:is(td, [role="cell"], [role="gridcell"], .tag-td) {
        border-bottom: var(--v-border-width) solid var(--v-table-border-color);
        border-top: 0;
      }
      /**
       * Sticky table header row.
       * @cssclass sticky
       */
      &.sticky :is(th, [role="columnheader"], [role="rowheader"], [scope="col"], [scope="row"], .tag-th) {
        position: sticky;
        z-index: 2;
        top: var(--v-table-sticky-top);
      }
    }

    /* Footer */
    :is(tfoot, .tag-tfoot) {
      :is(th, [role="columnheader"], [role="rowheader"], [scope="col"], [scope="row"], .tag-th),:is(td, [role="cell"], [role="gridcell"], .tag-td) {
        border-top: var(--v-border-width) solid var(--v-table-border-color);
        border-bottom: 0;
      }
    }

    /**
     * Alternating row background.
     * @cssclass striped
     */
    /* Striped */
    &.striped {
      :is(tbody, [role="rowgroup"]:has(:is(th:not([scope="col"]), [role="rowheader"], [scope="row"], .tag-th-row),:is(td, [role="cell"], [role="gridcell"], .tag-td)), .tag-tbody) :is(tr, [role="row"], .tag-tr):nth-child(odd) :is(th, [role="columnheader"], [role="rowheader"], [scope="col"], [scope="row"], .tag-th),:is(tbody, [role="rowgroup"]:has(:is(th:not([scope="col"]), [role="rowheader"], [scope="row"], .tag-th-row),:is(td, [role="cell"], [role="gridcell"], .tag-td)), .tag-tbody) :is(tr, [role="row"], .tag-tr):nth-child(odd) :is(td, [role="cell"], [role="gridcell"], .tag-td) {
        background-color: var(--v-table-row-stripped-background-color);
      }
    }
  }
  /* Middle-align media (opinionated) */
  :where(audio, canvas, iframe,:is(img, [role="img"], .tag-img), svg, video) {
    vertical-align: middle;
  }
  /* IE 9- display */
  audio,
  video {
    display: inline-block;
  }
  /* iOS 4-7 display */
  audio:not([controls]) {
    display: none;
    height: 0;
  }
  /* No iframe border (opinionated) */
  :where(iframe) {
    border-style: none;
  }
  /* 1. No border on linked images in IE 10
     2. Responsive by default */
  :is(img, [role="img"], .tag-img) {
    display: inline;
    max-width: 100%; /* 2 */
    height: auto; /* 2 */
    border-style: none; /* 1 */
  }
  /* SVG fill matches text color (opinionated) */
  :where(svg:not([fill])) {
    fill: currentColor;
  }
  /* Hide overflow in IE */
  svg:not(:root),
  svg:not(:host) {
    overflow: hidden;
  }
  /* 1. Inherit / scale font-size
     2. Fix odd `em` sizing */
  :is(pre, .tag-pre),:is(code, [role="code"], .tag-code),:is(kbd, .tag-kbd),:is(samp, .tag-samp) {
    font-size: var(--v-font-size); /* 2 */
    font-family: var(--v-font-family); /* 1 */
  }
  :is(pre, .tag-pre) :is(code, [role="code"], .tag-code),:is(pre, .tag-pre) :is(samp, .tag-samp) {
    font-size: inherit;
    font-family: inherit;
  }
  /* Don't overflow the container (opinionated) */
  :is(pre, .tag-pre) {
    -ms-overflow-style: scrollbar;
    overflow: auto;
  }
  :is(pre, .tag-pre),:is(code, [role="code"], .tag-code),:is(kbd, .tag-kbd),:is(samp, .tag-samp) {
    border-radius: var(--v-border-radius);
    background: var(--v-code-background-color);
    color: var(--v-code-color);
    font-weight: var(--v-font-weight);
    line-height: normal;
    line-height: initial;
  }
  :is(code, [role="code"], .tag-code),:is(kbd, .tag-kbd),:is(samp, .tag-samp) {
    display: inline-block;
    padding: 0.12rem 0.25rem;
  }
  :is(pre, .tag-pre) {
    display: block;
    margin-bottom: var(--v-spacing);
    overflow-x: auto;

    > :is(code, [role="code"], .tag-code),
    > :is(samp, .tag-samp) {
      display: block;
      padding: var(--v-spacing);
      background: none;
      line-height: var(--v-line-height);
    }
  }
  /* kbd */
  :is(kbd, .tag-kbd) {
    background-color: var(--v-code-kbd-background-color);
    color: var(--v-code-kbd-color);
    vertical-align: baseline;
  }
  :is(figure, [role="figure"], .tag-figure) {
    display: block;
    margin: 0;
    padding: 0;

    :is(figcaption, [role="caption"]:is(figure *, [role="figure"] *), .tag-figcaption) {
      display: block;
      padding: calc(var(--v-spacing) * 0.5) 0;
      color: var(--v-muted-color);
    }
  }
  /* 1. Inherit border-color in Firefox
     2. Box-sizing in Firefox */
  :is(hr, [role="separator"], .tag-hr) {
    display: block;
    height: 0; /* 2 */
    margin: var(--v-typography-spacing-vertical) 0;
    border: 0;
    border-top: 1px solid var(--v-muted-border-color);
    color: inherit; /* 1 */
  }
  /* IE 10+ display */
  [hidden],
  template {
    display: none !important;
  }
  /* Add the correct display in IE 9- */
  canvas {
    display: inline-block;
  }

  /* 1. Font styles (all browsers)
     2. Drop Firefox / Safari margin */

  input,
  optgroup,
  select,
  textarea {
    margin: 0; /* 2 */
    font-size: var(--v-font-size); /* 1 */
    line-height: var(--v-line-height); /* 1 */
    font-family: inherit; /* 1 */
    letter-spacing: inherit; /* 2 */
  }

  /* Show overflow in IE */

  input {
    overflow: visible;
  }

  /* Don't inherit `text-transform` in Edge, Firefox, IE */

  select {
    text-transform: none;
  }

  /* 1. Wrap text in Edge / IE
     2. Inherit color from `fieldset` in IE
     3. No padding, so zeroing `fieldset` isn't a surprise */

  legend {
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    color: inherit; /* 2 */
    white-space: normal; /* 1 */
  }

  /* 1. Drop IE's default vertical scrollbar */

  textarea {
    overflow: auto; /* 1 */
  }

  /* Drop IE 10 padding */

  [type="checkbox"],
  [type="radio"] {
    padding: 0;
  }

  /* Safari spinner cursor */

  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }

  /* 1. Chrome / Safari search appearance
     2. Safari outline */

  [type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }

  /* Drop Chrome / Safari macOS inner padding */

  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  /* 1. Style clickable types in iOS / Safari
     2. Inherit font in Safari */

  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }

  /* Drop Firefox focus inner border / padding */

  ::-moz-focus-inner {
    padding: 0;
    border-style: none;
  }

  /* Drop Firefox focus outline */

  :-moz-focusring {
    outline: none;
  }

  /* Drop Firefox extra `:invalid` styles */

  :-moz-ui-invalid {
    box-shadow: none;
  }

  /* Hide IE's inconsistent expand control (opinionated) */

  ::-ms-expand {
    display: none;
  }

  /* No border / padding (opinionated) */

  [type="file"],
  [type="range"] {
    padding: 0;
    border-width: 0;
  }

  /* Force height on non-checkbox / radio / range inputs */

  input:not([type="checkbox"], [type="radio"], [type="range"]) {
    height: calc(
      (1rem * var(--v-line-height)) +
        (var(--v-form-element-spacing-vertical) * 2) +
        (var(--v-border-width) * 2)
    );
  }

  /* Fieldset */

  fieldset {
    width: 100%;
    margin: 0;
    margin-bottom: var(--v-spacing);
    padding: 0;
    border: 0;
  }

  /* Label & legend */

  :is(label, [role="label"], .tag-label),
  fieldset legend {
    display: block;
    margin-bottom: calc(var(--v-spacing) * 0.375);
    color: var(--v-color);
    font-weight: var(--v-form-label-font-weight, var(--v-font-weight));
  }

  fieldset legend {
    margin-bottom: calc(var(--v-spacing) * 0.5);
  }

  /* Blocks, 100% */

  input:not([type="checkbox"], [type="radio"]),
  button[type="submit"],
  select,
  textarea {
    width: 100%;
  }

  /* Reset appearance (not checkbox, radio, range, file) */

  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
  select,
  textarea {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    padding: var(--v-form-element-spacing-vertical)
      var(--v-form-element-spacing-horizontal);
  }

  /* Common styles */

  input,
  select,
  textarea {
    --v-background-color: var(--v-form-element-background-color);
    --v-border-color: var(--v-form-element-border-color);
    --v-color: var(--v-form-element-color);
    --v-box-shadow: none;
    border: var(--v-border-width) solid var(--v-border-color);
    border-radius: var(--v-border-radius);
    outline: none;
    background-color: var(--v-background-color);
    box-shadow: none;
    box-shadow: var(--v-box-shadow);
    color: var(--v-color);
    font-weight: var(--v-font-weight);

    transition:
      background-color var(--v-transition),
      border-color var(--v-transition),
      color var(--v-transition),
      box-shadow var(--v-transition);
  }

  /* Active & Focus, background */

  input:not(
    [type="submit"],
    [type="button"],
    [type="reset"],
    [type="checkbox"],
    [type="radio"],
    [readonly]
  ),
  :where(select, textarea):not([readonly]) {
    &:is(:active, :focus) {
      --v-background-color: var(--v-form-element-active-background-color);
    }
  }

  /* Active & Focus, border */

  input:not(
    [type="submit"],
    [type="button"],
    [type="reset"],
    [role="switch"],
    [readonly]
  ),
  :where(select, textarea):not([readonly]) {
    &:is(:active, :focus) {
      --v-border-color: var(--v-form-element-active-border-color);
    }
  }

  /* Focus, box-shadow */

  input:not(
    [type="submit"],
    [type="button"],
    [type="reset"],
    [type="range"],
    [type="file"],
    [readonly]
  ),
  :where(select, textarea):not([readonly]) {
    &:focus {
      --v-box-shadow: 0 0 0 var(--v-outline-width)
        var(--v-form-element-focus-color);
    }
  }

  /* Disabled */

  input:not([type="submit"], [type="button"], [type="reset"])[disabled],
  select[disabled],
  textarea[disabled],:is(label, [role="label"], .tag-label)[aria-disabled="true"],
  :where(fieldset[disabled])
    :is(
      input:not([type="submit"], [type="button"], [type="reset"]),
      select,
      textarea
    ) {
    opacity: var(--v-form-element-disabled-opacity);
    pointer-events: none;
  }

  :is(label, [role="label"], .tag-label)[aria-disabled="true"] input[disabled] {
    opacity: 1;
  }

  /* Aria-invalid */

  :where(input, select, textarea) {
    &:not(
      [type="checkbox"],
      [type="radio"],
      [type="date"],
      [type="datetime-local"],
      [type="month"],
      [type="time"],
      [type="week"],
      [type="range"]
    ) {
      &[aria-invalid] {
        padding-right: calc(
          var(--v-form-element-spacing-horizontal) + 1.5rem
        ) !important;
        padding-left: var(--v-form-element-spacing-horizontal);
        padding-inline-start: var(
          --v-form-element-spacing-horizontal
        ) !important;
        padding-inline-end: calc(
          var(--v-form-element-spacing-horizontal) + 1.5rem
        ) !important;
        background-position: center right 0.75rem;
        background-size: 1rem auto;
        background-repeat: no-repeat;
      }

      &[aria-invalid="false"]:not(select) {
        background-image: var(--v-icon-valid);
      }

      &[aria-invalid="true"]:not(select) {
        background-image: var(--v-icon-invalid);
      }
    }

    &[aria-invalid="false"] {
      --v-border-color: var(--v-form-element-valid-border-color);

      &:is(:active, :focus) {
        --v-border-color: var(
          --v-form-element-valid-active-border-color
        ) !important;

        &:not([type="checkbox"], [type="radio"]) {
          --v-box-shadow: 0 0 0 var(--v-outline-width)
            var(--v-form-element-valid-focus-color) !important;
        }
      }
    }

    &[aria-invalid="true"] {
      --v-border-color: var(--v-form-element-invalid-border-color);

      &:is(:active, :focus) {
        --v-border-color: var(
          --v-form-element-invalid-active-border-color
        ) !important;

        &:not([type="checkbox"], [type="radio"]) {
          --v-box-shadow: 0 0 0 var(--v-outline-width)
            var(--v-form-element-invalid-focus-color) !important;
        }
      }
    }
  }

  [dir="rtl"] {
    :where(input, select, textarea) {
      &:not([type="checkbox"], [type="radio"]) {
        &:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
          background-position: center left 0.75rem;
        }
      }
    }
  }

  /* Placeholder */

  input::placeholder,
  input::-webkit-input-placeholder,
  textarea::placeholder,
  textarea::-webkit-input-placeholder,
  select:invalid {
    color: var(--v-form-element-placeholder-color);
    opacity: 1;
  }

  /* Margin bottom (Not Checkboxes and Radios) */

  input:not([type="checkbox"], [type="radio"]),
  select,
  textarea {
    margin-bottom: var(--v-spacing);
  }

  /* Select */

  select {
    /* Unstyle the IE10+ `<select>` caret */
    &::-ms-expand {
      border: 0;
      background-color: transparent;
    }

    &:not([multiple], [size]) {
      padding-right: calc(var(--v-form-element-spacing-horizontal) + 1.5rem);
      padding-left: var(--v-form-element-spacing-horizontal);
      padding-inline-start: var(--v-form-element-spacing-horizontal);
      padding-inline-end: calc(
        var(--v-form-element-spacing-horizontal) + 1.5rem
      );
      background-image: var(--v-icon-chevron);
      background-position: center right 0.75rem;
      background-size: 1rem auto;
      background-repeat: no-repeat;
    }

    &[multiple] {
      option {
        &:checked {
          background: var(--v-form-element-selected-background-color);
          color: var(--v-form-element-color);
        }
      }
    }
  }

  [dir="rtl"] {
    select {
      &:not([multiple], [size]) {
        background-position: center left 0.75rem;
      }
    }
  }

  /* Textarea */

  textarea {
    display: block;
    resize: vertical;

    &[aria-invalid] {
      --v-icon-height: calc(
        (1rem * var(--v-line-height)) +
          (var(--v-form-element-spacing-vertical) * 2) +
          (var(--v-border-width) * 2)
      );
      background-position: top right 0.75rem !important;
      background-size: 1rem var(--v-icon-height) !important;
    }
  }

  /* Helper text under inputs (`small` siblings) */

  :where(input, select, textarea, fieldset, .grid) {
    + :is(small, .tag-small) {
      display: block;
      width: 100%;
      margin: var(--v-spacing) 0;
      color: var(--v-muted-color);
      margin-top: calc(var(--v-spacing) * -0.75);
    }
    &[aria-invalid="false"] {
      + :is(small, .tag-small) {
        color: var(--v-ins-color);
      }
    }
    &[aria-invalid="true"] {
      + :is(small, .tag-small) {
        color: var(--v-del-color);
      }
    }
  }

  /* Input inside a label */

  :is(label, [role="label"], .tag-label) {
    /* Best donut-scoping option after trying the rest. */
    :where(&, & > .abstract, & > .abstract > .abstract) {
    /* `:where` keeps nested `.abstract` from winning on specificity */
      > :where(input, select, textarea) {
        margin-top: calc(var(--v-spacing) * 0.25);
      }
  }
  }
  /* Labels. Firefox lacks `:has()`, so this misses there. */
  :is(label, [role="label"], .tag-label) {
    &:has([type="checkbox"], [type="radio"]) {
      width: -moz-fit-content;
      width: fit-content;
      cursor: pointer;
    }
  }
  [type="checkbox"],
  [type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 1.25em;
    height: 1.25em;
    margin-top: -0.125em;
    margin-inline-end: 0.5em;
    border-width: var(--v-border-width);
    vertical-align: middle;
    cursor: pointer;

    &::-ms-check {
      display: none; /* Unstyle IE checkboxes */
    }

    &:checked,
    &:checked:active,
    &:checked:focus {
      --v-background-color: var(--v-primary-background);
      --v-border-color: var(--v-primary-border);
      background-image: var(--v-icon-checkbox);
      background-position: center;
      background-size: 0.75em auto;
      background-repeat: no-repeat;
    }

    & ~ :is(label, [role="label"], .tag-label) {
      display: inline-block;
      margin-bottom: 0;
      cursor: pointer;

      &:not(:last-of-type) {
        margin-inline-end: 1em;
      }
    }
  }
  /* Checkboxes */
  [type="checkbox"] {
    &:indeterminate {
      --v-background-color: var(--v-primary-background);
      --v-border-color: var(--v-primary-border);
      background-image: var(--v-icon-minus);
      background-position: center;
      background-size: 0.75em auto;
      background-repeat: no-repeat;
    }
  }
  /* Radios */
  [type="radio"] {
    border-radius: 50%;

    &:checked,
    &:checked:active,
    &:checked:focus {
      --v-background-color: var(--v-primary-inverse);
      border-width: 0.35em;
      background-image: none;
    }
  }
  /* Switches */
  [type="checkbox"][role="switch"] {
    --v-background-color: var(--v-switch-background-color);
    --v-color: var(--v-switch-color);

    width: 2.25em;
    height: 1.25em;
    border: var(--v-border-width) solid var(--v-border-color);
    border-radius: 1.25em;
    background-color: var(--v-background-color);
    line-height: 1.25em;

    &:not([aria-invalid]) {
      --v-border-color: var(--v-switch-background-color);
    }

    &::before {
      display: block;
      aspect-ratio: 1;
      height: 100%;
      border-radius: 50%;
      background-color: var(--v-color);
      box-shadow: var(--v-switch-thumb-box-shadow);
      content: "";

      transition: margin 0.1s ease-in-out;
    }

    &:focus {
      --v-background-color: var(--v-switch-background-color);
      --v-border-color: var(--v-switch-background-color);
    }

    &:checked {
      --v-background-color: var(--v-switch-checked-background-color);
      --v-border-color: var(--v-switch-checked-background-color);
      background-image: none;

      &::before {
        margin-inline-start: calc(2.25em - 1.25em);
      }
    }

    &[disabled] {
      --v-background-color: var(--v-border-color);
    }
  }
  /* Aria-invalid */
  [type="checkbox"],
  [type="checkbox"][role="switch"] {
    &[aria-invalid="false"] {
      &:checked,
      &:checked:active,
      &:checked:focus {
        --v-background-color: var(--v-form-element-valid-border-color);
      }
    }
    &:checked,
    &:checked:active,
    &:checked:focus {
      &[aria-invalid="true"] {
        --v-background-color: var(--v-form-element-invalid-border-color);
      }
    }
  }
  [type="checkbox"],
  [type="radio"],
  [type="checkbox"][role="switch"] {
    &[aria-invalid="false"] {
      &:checked,
      &:checked:active,
      &:checked:focus {
        --v-border-color: var(--v-form-element-valid-border-color);
      }
    }
    &:checked,
    &:checked:active,
    &:checked:focus {
      &[aria-invalid="true"] {
        --v-border-color: var(--v-form-element-invalid-border-color);
      }
    }
  }
  [type="color"] {
    /* Wrapper */
    &::-webkit-color-swatch-wrapper {
      padding: 0;
    }

    &::-moz-focus-inner {
      padding: 0;
    }

    /* Swatch */
    &::-webkit-color-swatch {
      border: 0;
      border-radius: calc(var(--v-border-radius) * 0.5);
    }

    &::-moz-color-swatch {
      border: 0;
      border-radius: calc(var(--v-border-radius) * 0.5);
    }
  }
  /* `:not()` for specificity, so padding needs no `!important` */
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
    &:is(
      [type="date"],
      [type="datetime-local"],
      [type="month"],
      [type="time"],
      [type="week"]
    ) {
      --v-icon-position: 0.75rem;
      --v-icon-width: 1rem;
      padding-right: calc(1rem + 0.75rem);
      padding-right: calc(var(--v-icon-width) + var(--v-icon-position));
      background-image: var(--v-icon-date);
      background-position: center right 0.75rem;
      background-position: center right var(--v-icon-position);
      background-size: 1rem auto;
      background-size: var(--v-icon-width) auto;
      background-repeat: no-repeat;
    }

    /* Time */
    &[type="time"] {
      background-image: var(--v-icon-time);
    }
  }
  /* Calendar picker */
  [type="date"],
  [type="datetime-local"],
  [type="month"],
  [type="time"],
  [type="week"] {
    &::-webkit-calendar-picker-indicator {
      width: var(--v-icon-width);
      margin-right: calc(var(--v-icon-width) * -1);
      margin-left: var(--v-icon-position);
      opacity: 0;
    }
  }
  /* Firefox hides calendar icons */
  @-moz-document url-prefix() {
    [type="date"],
    [type="datetime-local"],
    [type="month"],
    [type="time"],
    [type="week"] {
      padding-right: var(--v-form-element-spacing-horizontal) !important;
      background-image: none !important;
    }
  }
  [dir="rtl"]
    :is(
      [type="date"],
      [type="datetime-local"],
      [type="month"],
      [type="time"],
      [type="week"]
    ) {
    text-align: right;
  }
  /* 1. Show the focused file-button outline despite overflow: hidden */
  [type="file"] {
    --v-color: var(--v-muted-color);
    margin-left: calc(var(--v-outline-width) * -1); /* 1 */
    padding: calc(var(--v-form-element-spacing-vertical) * 0.5) 0;
    padding-left: var(--v-outline-width); /* 1 */
    border: 0;
    border-radius: 0;
    background: none;

    &::file-selector-button {
      margin-right: calc(var(--v-spacing) / 2);
      padding: calc(var(--v-form-element-spacing-vertical) * 0.5)
        var(--v-form-element-spacing-horizontal);
    }

    &:is(:hover, :active, :focus) {
      &::file-selector-button {
        --v-background-color: var(--v-secondary-hover-background);
        --v-border-color: var(--v-secondary-hover-border);
      }
    }

    &:focus {
      &::file-selector-button {
        --v-box-shadow:
          var(--v-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
          0 0 0 var(--v-outline-width) var(--v-secondary-focus);
      }
    }
  }
  [type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 1.25rem;
    background: none;

    /* Slider Track */
    &::-webkit-slider-runnable-track {
      width: 100%;
      height: 0.375rem;
      border-radius: var(--v-border-radius);
      background-color: var(--v-range-border-color);
      -webkit-transition:
        background-color var(--v-transition),
        box-shadow var(--v-transition);
      transition:
        background-color var(--v-transition),
        box-shadow var(--v-transition);
    }

    &::-moz-range-track {
      width: 100%;
      height: 0.375rem;
      border-radius: var(--v-border-radius);
      background-color: var(--v-range-border-color);
      -moz-transition:
        background-color var(--v-transition),
        box-shadow var(--v-transition);
      transition:
        background-color var(--v-transition),
        box-shadow var(--v-transition);
    }

    &::-ms-track {
      width: 100%;
      height: 0.375rem;
      border-radius: var(--v-border-radius);
      background-color: var(--v-range-border-color);
      -ms-transition:
        background-color var(--v-transition),
        box-shadow var(--v-transition);
      transition:
        background-color var(--v-transition),
        box-shadow var(--v-transition);
    }

    /* Slider Thumb */
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 1.25rem;
      height: 1.25rem;
      margin-top: -0.4375rem;
      border: 2px solid var(--v-range-thumb-border-color);
      border-radius: 50%;
      background-color: var(--v-range-thumb-color);
      cursor: pointer;
      -webkit-transition:
        background-color var(--v-transition),
        transform var(--v-transition);
      transition:
        background-color var(--v-transition),
        transform var(--v-transition);
    }

    &::-moz-range-thumb {
      -webkit-appearance: none;
      width: 1.25rem;
      height: 1.25rem;
      margin-top: -0.4375rem;
      border: 2px solid var(--v-range-thumb-border-color);
      border-radius: 50%;
      background-color: var(--v-range-thumb-color);
      cursor: pointer;
      -moz-transition:
        background-color var(--v-transition),
        transform var(--v-transition);
      transition:
        background-color var(--v-transition),
        transform var(--v-transition);
    }

    &::-ms-thumb {
      -webkit-appearance: none;
      width: 1.25rem;
      height: 1.25rem;
      margin-top: -0.4375rem;
      border: 2px solid var(--v-range-thumb-border-color);
      border-radius: 50%;
      background-color: var(--v-range-thumb-color);
      cursor: pointer;
      -ms-transition:
        background-color var(--v-transition),
        transform var(--v-transition);
      transition:
        background-color var(--v-transition),
        transform var(--v-transition);
    }

    &:active,
    &:focus-within {
      --v-range-border-color: var(--v-range-active-border-color);
      --v-range-thumb-color: var(--v-range-thumb-active-color);
    }

    &:active {
      &::-webkit-slider-thumb {
        transform: scale(1.25);
      }

      &::-moz-range-thumb {
        transform: scale(1.25);
      }

      &::-ms-thumb {
        transform: scale(1.25);
      }
    }
  }
  /* `:not()` for specificity, so padding needs no `!important` */
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
    &[type="search"] {
      padding-inline-start: calc(
        var(--v-form-element-spacing-horizontal) + 1.75rem
      );
      background-image: var(--v-icon-search);
      background-position: center left
        calc(var(--v-form-element-spacing-horizontal) + 0.125rem);
      background-size: 1rem auto;
      background-repeat: no-repeat;

      &[aria-invalid] {
        padding-inline-start: calc(
          var(--v-form-element-spacing-horizontal) + 1.75rem
        ) !important;
        background-position:
          center left 1.125rem,
          center right 0.75rem;
      }

      &[aria-invalid="false"] {
        background-image: var(--v-icon-search), var(--v-icon-valid);
      }

      &[aria-invalid="true"] {
        background-image: var(--v-icon-search), var(--v-icon-invalid);
      }
    }
  }
  [dir="rtl"] {
    :where(input) {
      &:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
        &[type="search"] {
          background-position: center right 1.125rem;

          &[aria-invalid] {
            background-position:
              center right 1.125rem,
              center left 0.75rem;
          }
        }
      }
    }
  }

  :is(details, .tag-details) {
    display: block;
    margin-bottom: var(--v-spacing);
    overflow: clip;
    /* Best donut-scoping option after trying the rest. */
    :where(&, & > .abstract, & > .abstract > .abstract) {
    /* `:where` keeps nested `.abstract` from winning on specificity */
      > :is(summary, .tag-summary) {
        display: list-item;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
        line-height: 1rem;
        list-style-type: none;
        cursor: pointer;
        position: relative;
        padding: calc(var(--v-nav-element-spacing-vertical) * 0.25) 0;

        transition: color var(--v-transition);

        &:not(:is(button, [role="button"], [type="button"], .tag-button)) {
          color: var(--v-accordion-close-summary-color);
        }

        /* Reset marker */
        &::-webkit-details-marker {
          display: none;
        }

        &::marker {
          display: none;
        }

        &::-moz-list-bullet {
          list-style-type: none;
        }

        /* Marker */
        &::after {
          display: block;
          width: 1rem;
          height: 1rem;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%) rotate(-90deg);
          background-image: var(--v-icon-chevron);
          background-position: right center;
          background-size: 1rem auto;
          background-repeat: no-repeat;
          content: "";

          transition: transform var(--v-transition);
        }

        &:focus {
          outline: none;

          &:not(:is(button, [role="button"], [type="button"], .tag-button)) {
            color: var(--v-accordion-active-summary-color);
          }
        }

        &:focus-visible {
          &:not(:is(button, [role="button"], [type="button"], .tag-button)) {
            outline: var(--v-outline-width) solid var(--v-primary-focus);
            outline-offset: calc(1rem * 0.5);
            outline-offset: calc(var(--v-spacing, 1rem) * 0.5);
            color: var(--v-primary);
          }
        }

        /* Type button */
        &:is(button, [role="button"], [type="button"], .tag-button) {
          width: 100%;
          text-align: left;

          /* Marker */
          &::after {
            height: calc(1rem * 1.5);
            height: calc(1rem * var(--v-line-height, 1.5));
          }
        }
      }
  }
    /* Open */
    &::details-content {
      interpolate-size: allow-keywords;
      height: 0;
      opacity: 0;
      display: flow-root;
      transition-property: height, opacity, content-visibility;
      transition-duration: var(--v-transition-duration-standard);
      transition-timing-function: var(--v-transition-ease-out);
      transition-behavior: allow-discrete;
    }
    &:is([open], [aria-expanded="true"]) {
      /* Best donut-scoping option after trying the rest. */
      :where(&, & > .abstract, & > .abstract > .abstract) {
    /* `:where` keeps nested `.abstract` from winning on specificity */
        > :is(summary, .tag-summary) {
          &:not(:is(button, [role="button"], [type="button"], .tag-button)):not(:focus) {
            color: var(--v-accordion-open-summary-color);
          }

          &::after {
            transform: translateY(-50%) rotate(0);
          }
        }
  }

      &::details-content {
        height: auto;
        opacity: 1;
      }
    }
  }

  [dir="rtl"] {
    :is(details, .tag-details) {
      /* Best donut-scoping option after trying the rest. */
      :where(&, & > .abstract, & > .abstract > .abstract) {
    /* `:where` keeps nested `.abstract` from winning on specificity */
        > :is(summary, .tag-summary) {
          text-align: right;

          &::after {
            float: left;
            background-position: left center;
          }
        }
  }
    }
  }
  :is(article, [role="article"], .tag-article) {
    display: block;
    margin-bottom: var(--v-block-spacing-vertical);
    padding: var(--v-block-spacing-vertical) var(--v-block-spacing-horizontal);
    border-radius: var(--v-border-radius);
    background: var(--v-card-background-color);
    box-shadow: var(--v-card-box-shadow);
    /**
     * Nested card — quieter border / shadow inside another card.
     * @cssclass nested
     */
    &.nested {
      /* Best donut-scoping option after trying the rest. */
      :where(&, & > .abstract, & > .abstract > .abstract) {
    /* `:where` keeps nested `.abstract` from winning on specificity */
        &,
        > :is(header, [role="header"], .tag-header),
        > :is(footer, [role="footer"], .tag-footer) {
          &:not(.reset-colors) {
    background-color: var(--v-multiply-color-0);
    border-color: var(--v-multiply-color-1);
    background-clip: padding-box;
  }
        }
  }
    }

    /* Best donut-scoping option after trying the rest. */

    :where(&, & > .abstract, & > .abstract > .abstract) {
    /* `:where` keeps nested `.abstract` from winning on specificity */
      > :is(header, [role="header"], .tag-header),
      > :is(footer, [role="footer"], .tag-footer) {
        margin-right: calc(var(--v-block-spacing-horizontal) * -1);
        margin-left: calc(var(--v-block-spacing-horizontal) * -1);
        padding: calc(var(--v-block-spacing-vertical) * 0.66)
          var(--v-block-spacing-horizontal);
        background-color: var(--v-card-sectioning-background-color);
      }

      > :is(header, [role="header"], .tag-header) {
        margin-top: calc(var(--v-block-spacing-vertical) * -1);
        margin-bottom: var(--v-block-spacing-vertical);
        border-bottom: var(--v-border-width) solid var(--v-card-border-color);
        border-top-right-radius: var(--v-border-radius);
        border-top-left-radius: var(--v-border-radius);
      }

      > :is(footer, [role="footer"], .tag-footer) {
        margin-top: var(--v-block-spacing-vertical);
        margin-bottom: calc(var(--v-block-spacing-vertical) * -1);
        border-top: var(--v-border-width) solid var(--v-card-border-color);
        border-bottom-right-radius: var(--v-border-radius);
        border-bottom-left-radius: var(--v-border-radius);
      }
  }
  }
  /* Container */
  :is(details, .tag-details).dropdown {
    position: relative;
    border-bottom: none;

    /* Marker */
    > :is(summary, .tag-summary),
    > :is(button, [role="button"], [type="button"], .tag-button),
    > :is(a, [role="link"], .tag-link) {
      &::after {
        display: block;
        width: 1rem;
        height: calc(1rem * 1.5);
        height: calc(1rem * var(--v-line-height, 1.5));
        margin-inline-start: 0.25rem;
        float: right;
        /* TODO: why 0.2rem? Needed to align the marker with a regular select */
        transform: rotate(0deg) translateX(0.2rem);
        background-image: var(--v-icon-chevron);
        background-position: right center;
        background-size: 1rem auto;
        background-repeat: no-repeat;
        content: "";
      }
    }
  }
  /* Accordion-style dropdown inside a nav */
  :is(nav, [role="navigation"], .tag-nav) :is(details, .tag-details).dropdown {
    margin-bottom: 0;
  }
  /* Select-style summary inside an accordion dropdown */
  :is(details, .tag-details).dropdown > :is(summary, .tag-summary):not(:is(button, [role="button"], [type="button"], .tag-button)) {
    height: calc(
      1rem * var(--v-line-height) + var(--v-form-element-spacing-vertical) * 2 +
        var(--v-border-width) * 2
    );
    padding: var(--v-form-element-spacing-vertical)
      var(--v-form-element-spacing-horizontal);
    border: var(--v-border-width) solid var(--v-form-element-border-color);
    border-radius: var(--v-border-radius);
    background-color: var(--v-form-element-background-color);
    color: var(--v-form-element-placeholder-color);
    line-height: inherit;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;

    transition:
      background-color var(--v-transition),
      border-color var(--v-transition),
      color var(--v-transition),
      box-shadow var(--v-transition);

    &:active,
    &:focus {
      border-color: var(--v-form-element-active-border-color);
      background-color: var(--v-form-element-active-background-color);
    }

    &:focus {
      box-shadow: 0 0 0 var(--v-outline-width) var(--v-form-element-focus-color);
    }

    /* Undo accordion's `:focus-visible` */
    &:focus-visible {
      outline: none;
    }

    /* Aria-invalid */
    &[aria-invalid="false"] {
      --v-form-element-border-color: var(--v-form-element-valid-border-color);
      --v-form-element-active-border-color: var(
        --v-form-element-valid-focus-color
      );
      --v-form-element-focus-color: var(--v-form-element-valid-focus-color);
    }

    &[aria-invalid="true"] {
      --v-form-element-border-color: var(--v-form-element-invalid-border-color);
      --v-form-element-active-border-color: var(
        --v-form-element-invalid-focus-color
      );
      --v-form-element-focus-color: var(--v-form-element-invalid-focus-color);
    }
  }
  /* Dropdown inside a nav */
  :is(nav, [role="navigation"], .tag-nav) :is(details, .tag-details).dropdown {
    display: inline;
    margin: calc(var(--v-nav-element-spacing-vertical) * -1) 0;

    > :is(summary, .tag-summary) {
      &::after {
        transform: rotate(0deg) translateX(0rem);
      }

      &:not(:is(button, [role="button"], [type="button"], .tag-button)) {
        height: calc(
          (1rem * var(--v-line-height)) +
            (var(--v-nav-link-spacing-vertical) * 2)
        );
        padding: calc(
            var(--v-nav-link-spacing-vertical) - (var(--v-border-width) * 2)
          )
          var(--v-nav-link-spacing-horizontal);

        &:focus-visible {
          box-shadow: 0 0 0 var(--v-outline-width) var(--v-primary-focus);
        }
      }
    }
  }
  /* Submenu */
  :is(details, .tag-details).dropdown > :is(summary, .tag-summary) + :is(ul, ol, [role="list"], .tag-list) {
    display: flex;
    z-index: 99;
    position: absolute;
    left: 0;
    flex-direction: column;
    width: 100%;
    min-width: -moz-fit-content;
    min-width: fit-content;
    margin: 0;
    margin-top: var(--v-outline-width);
    padding: 0;
    border: var(--v-border-width) solid var(--v-dropdown-border-color);
    border-radius: var(--v-border-radius);
    background-color: var(--v-dropdown-background-color);
    box-shadow: var(--v-dropdown-box-shadow);
    color: var(--v-dropdown-color);
    white-space: nowrap;
    opacity: 0;

    transition:
      opacity var(--v-transition),
      transform 0s ease-in-out 1s;

    &[dir="rtl"] {
      right: 0;
      left: auto;
    }

    :is(li, [role="listitem"], .tag-li) {
      width: 100%;
      margin-bottom: 0;
      padding: calc(var(--v-form-element-spacing-vertical) * 0.5)
        var(--v-form-element-spacing-horizontal);
      list-style: none;

      &:first-of-type {
        margin-top: calc(var(--v-form-element-spacing-vertical) * 0.5);
      }

      &:last-of-type {
        margin-bottom: calc(var(--v-form-element-spacing-vertical) * 0.5);
      }

      :is(a, [role="link"], .tag-link) {
        display: block;
        margin: calc(var(--v-form-element-spacing-vertical) * -0.5)
          calc(var(--v-form-element-spacing-horizontal) * -1);
        padding: calc(var(--v-form-element-spacing-vertical) * 0.5)
          var(--v-form-element-spacing-horizontal);
        overflow: hidden;
        border-radius: 0;
        color: var(--v-dropdown-color);
        text-decoration: none;
        text-overflow: ellipsis;

        &:hover,
        &:focus,
        &:active,
        &:focus-visible,
        &[aria-current]:not([aria-current="false"]) {
          background-color: var(--v-dropdown-hover-background-color);
        }
      }

      :is(label, [role="label"], .tag-label) {
        width: 100%;
      }

      /* Firefox lacks `:has()`, so this misses there */
      &:has(:is(label, [role="label"], .tag-label)):hover {
        background-color: var(--v-dropdown-hover-background-color);
      }
    }
  }
  /* Open summary inside an accordion dropdown */
  :is(details, .tag-details).dropdown:is([open], [aria-expanded="true"]) > :is(summary, .tag-summary) {
    margin-bottom: 0;
  }
  /* Open menu inside an accordion dropdown */
  :is(details, .tag-details).dropdown:is([open], [aria-expanded="true"]) > :is(summary, .tag-summary) {
    + :is(ul, ol, [role="list"], .tag-list) {
      transform: scaleY(1);
      opacity: 1;

      transition:
        opacity var(--v-transition),
        transform 0s ease-in-out 0s;
    }
  }
  /* Close control inside an accordion dropdown */
  :is(details, .tag-details).dropdown:is([open], [aria-expanded="true"]) > :is(summary, .tag-summary) {
    &::before {
      display: block;
      z-index: 1;
      position: fixed;
      width: 100vw;
      height: 100vh;
      inset: 0;
      background: none;
      content: "";
      cursor: default;
    }
  }
  /* Label */
  :is(label, [role="label"], .tag-label) > :is(details, .tag-details).dropdown {
    margin-top: calc(var(--v-spacing) * 0.25);
  }
  :is([role="group"], .tag-group),:is([role="search"], .tag-search) {
    display: inline-flex;
    position: relative;
    width: 100%;
    margin-bottom: var(--v-spacing);
    border-radius: var(--v-border-radius);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: var(--v-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
    vertical-align: middle;
    transition: box-shadow var(--v-transition);

    > *,
    input:not([type="checkbox"], [type="radio"]),
    select,
    textarea {
      position: relative;
      flex: 1 1 auto;
      margin-bottom: 0;

      &:not(:first-child) {
        margin-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }

      &:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }

      &:focus {
        z-index: 2;
      }
    }

    :is(label, [role="label"], .tag-label):has(input[role="switch"]) {
      background-color: var(--v-form-element-background-color);
      border: var(--v-border-width) solid var(--v-form-element-border-color);
      border-left: none;
      border-top-right-radius: var(--v-border-radius);
      border-bottom-right-radius: var(--v-border-radius);
      padding: var(--v-form-element-spacing-vertical)
        var(--v-form-element-spacing-horizontal);
      white-space: nowrap;
      input {
        margin-left: calc(var(--v-spacing) * 0.5);
        margin-right: calc(var(--v-spacing) * 0.5);
      }
    }

    :is(button, [role="button"], [type="button"], .tag-button),
    [type="submit"],
    [type="reset"],
    input:not([type="checkbox"], [type="radio"]),
    select {
      &:not(:first-child) {
        margin-left: calc(var(--v-border-width) * -1);
      }
    }

    :is(button, [role="button"], [type="button"], .tag-button),
    [type="submit"],
    [type="reset"] {
      width: auto;
    }

    /* Group box shadow when a button is focused */
    &:has(:is(button, [role="button"], [type="button"], .tag-button), [type="submit"]:focus) {
      --v-group-box-shadow: var(--v-group-box-shadow-focus-with-button);

      input:not([type="checkbox"], [type="radio"]),
      select {
        border-color: transparent;
      }
    }

    /* Group box shadow when an input is focused */
    &:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
      --v-group-box-shadow: var(--v-group-box-shadow-focus-with-input);

      /* Adapt box shadow for buttons */
      :is(button, [role="button"], [type="button"], .tag-button),
      [type="submit"] {
        --v-button-box-shadow: 0 0 0 var(--v-border-width)
          var(--v-primary-border);
        --v-button-hover-box-shadow: 0 0 0 var(--v-border-width)
          var(--v-primary-hover-border);
      }
    }

    /* Remove button box shadow if we have a group box shadow */
    :is(button, [role="button"], [type="button"], .tag-button),
    [type="submit"],
    [type="reset"] {
      &:focus {
        box-shadow: none;
      }
    }
  }
  :is([role="search"], .tag-search) {
    > * {
      &:first-child {
        border-top-left-radius: 5rem;
        border-bottom-left-radius: 5rem;
      }

      &:last-child {
        border-top-right-radius: 5rem;
        border-bottom-right-radius: 5rem;
      }
    }
  }
  /* Everything except form elements */
  [aria-busy="true"]:not(input, select, textarea, html, form) {
    white-space: nowrap;

    &::before {
      display: inline-block;
      width: 1em;
      height: 1em;
      background-image: var(--v-icon-loading);
      background-size: 1em auto;
      background-repeat: no-repeat;
      content: "";
      vertical-align: -0.125em; /* Visual alignment */
    }

    &:not(:empty) {
      &::before {
        margin-inline-end: calc(var(--v-spacing) * 0.5);
      }
    }

    &:empty {
      text-align: center;
    }
  }
  /* Buttons and links */
  :is(button, [role="button"], [type="button"], .tag-button),
  [type="submit"],
  [type="reset"],:is(a, [role="link"], .tag-link) {
    &[aria-busy="true"] {
      pointer-events: none;
    }
  }
  :root,
  :host {
    --v-scrollbar-width: 0px;
  }
  :where(:has(> :is(dialog, [role="dialog"], .tag-dialog).absolute)) {
    /* Lowest specificity */
    position: relative;
    height: 600px;
    width: 600px;
    background-color: red;
  }
  :is(dialog, [role="dialog"], .tag-dialog).absolute {
    position: absolute;
  }
  :is(dialog)::backdrop,:is(dialog, [role="dialog"], .tag-dialog) > :is([role="presentation"], .tag-backdrop) {
    display: block;
    backdrop-filter: var(--v-modal-overlay-backdrop-filter);
    background-color: var(--v-modal-overlay-background-color);
    pointer-events: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    position: fixed;
    overscroll-behavior: contain;
    &:is(.absolute::backdrop),
    &:is(.absolute > :is([role="presentation"], .tag-backdrop)) {
      position: absolute;
    }
  }
  :is(dialog:modal),:is(dialog, [role="dialog"], .tag-dialog):has(> :is([role="presentation"], .tag-backdrop)) {
    /* Dialog scroll stays in the dialog, not the page behind it */
    overscroll-behavior: contain;
  }
  :is(dialog, [role="dialog"], .tag-dialog) {
    display: flex;
    z-index: 999;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: inherit;
    min-width: 100%;
    height: inherit;
    min-height: 100%;
    padding: 0;
    border: 0;
    color: var(--v-color);
    background-color: transparent;
    pointer-events: none;
    > * {
      pointer-events: auto;
    }

    /* Content */
    /* Best donut-scoping option after trying the rest. */
    :where(&, & > .abstract, & > .abstract > .abstract) {
    /* `:where` keeps nested `.abstract` from winning on specificity */
      > :is(article, [role="article"], .tag-article) {
        width: 100%;
        max-height: calc(100vh - var(--v-spacing) * 2);
        /* mobile browsers: the visible viewport, not the one under the URL bar */
        max-height: calc(100dvh - var(--v-spacing) * 2);
        margin: var(--v-spacing);
        overflow: auto;
        @media (min-width: 576px) {
    max-width: 510px;
  }
        @media (min-width: 768px) {
    max-width: 700px;
  }
        /* Best donut-scoping option after trying the rest. */
        :where(&, & > .abstract, & > .abstract > .abstract) {
    /* `:where` keeps nested `.abstract` from winning on specificity */
    > :is(header, [role="header"], .tag-header) {
      > * {
        margin-bottom: 0;
      }

      > :is(.close, :is(:is(a, [role="link"], .tag-link),:is(button, [role="button"], [type="button"], .tag-button))[rel="prev"]) {
        --v-modal-close-icon-size: calc(1rem * var(--v-line-height));
        display: block;
        float: right;
        width: var(--v-modal-close-icon-size);
        height: var(--v-modal-close-icon-size);
        margin: calc(var(--v-spacing) * -1) 0 var(--v-spacing) auto;
        padding: 0;
        border: none;
        background-image: var(--v-icon-close);
        background-position: center;
        /* Scale icon to line-height, cap at 1.25rem */
        background-size: auto min(var(--v-modal-close-icon-size), 1.25rem);
        background-repeat: no-repeat;
        background-color: transparent;
        opacity: 0.5;
        transition: opacity var(--v-transition);
        &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
    opacity: 1;
  }
        margin: 0;
        margin-left: var(--v-spacing);
        padding: 0;
        float: right;
      }
    }

    > :is(footer, [role="footer"], .tag-footer) {
      text-align: right;

      :is(button, [role="button"], [type="button"], .tag-button) {
        margin-bottom: 0;

        &:not(:first-of-type) {
          margin-left: calc(var(--v-spacing) * 0.5);
        }
      }
    }
  }
        /* Best donut-scoping option after trying the rest. */
        :where(&, & > .abstract, & > .abstract > .abstract) {
    /* `:where` keeps nested `.abstract` from winning on specificity */
    > :is(.close, :is(:is(a, [role="link"], .tag-link),:is(button, [role="button"], [type="button"], .tag-button))[rel="prev"]) {
      --v-modal-close-icon-size: calc(1rem * var(--v-line-height));
      display: block;
      float: right;
      width: var(--v-modal-close-icon-size);
      height: var(--v-modal-close-icon-size);
      margin: calc(var(--v-spacing) * -1) 0 var(--v-spacing) auto;
      padding: 0;
      border: none;
      background-image: var(--v-icon-close);
      background-position: center;
      /* Scale icon to line-height, cap at 1.25rem */
      background-size: auto min(var(--v-modal-close-icon-size), 1.25rem);
      background-repeat: no-repeat;
      background-color: transparent;
      opacity: 0.5;
      transition: opacity var(--v-transition);
      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
    opacity: 1;
  }
    }
  }
      }
  }

    /* Closed state */
    &:not(:is(:is(dialog)[open], [aria-expanded="true"])) {
      display: none;
    }
  }
  /* TODO: modal animations */
  /* Keep VoiceOver list semantics in Safari (opinionated) */
  :where(:is(nav, [role="navigation"], .tag-nav) :is(li, [role="listitem"], .tag-li))::before {
    float: left;
    content: "\200B";
  }
  :is(nav, [role="navigation"], .tag-nav) {
    justify-content: space-between;
    overflow: visible;
    &,:is(ul, ol, [role="list"], .tag-list) {
      display: flex;
    }
    :is(ul, ol, [role="list"], .tag-list) {
      align-items: center;
      margin-bottom: 0;
      padding: 0;
      list-style: none;

      &:first-of-type {
        margin-left: calc(var(--v-nav-element-spacing-horizontal) * -1);
      }
      &:last-of-type {
        margin-right: calc(var(--v-nav-element-spacing-horizontal) * -1);
      }
    }

    :is(li, [role="listitem"], .tag-li) {
      display: inline-block;
      margin: 0;
      padding: var(--v-nav-element-spacing-vertical)
        var(--v-nav-element-spacing-horizontal);

      :where(:is(a, [role="link"], .tag-link)) {
        display: inline-block;
        margin: calc(var(--v-nav-link-spacing-vertical) * -1)
          calc(var(--v-nav-link-spacing-horizontal) * -1);
        padding: var(--v-nav-link-spacing-vertical)
          var(--v-nav-link-spacing-horizontal);
        border-radius: var(--v-border-radius);

        &:not(:hover) {
          text-decoration: none;
        }
      }

      /* Minimal support for buttons and form elements */
      :is(button, [role="button"], [type="button"], .tag-button),
      input:not(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="file"]
      ),
      select {
        height: auto;
        margin-right: inherit;
        margin-bottom: 0;
        margin-left: inherit;
        padding: calc(
            var(--v-nav-link-spacing-vertical) - (var(--v-border-width) * 2)
          )
          var(--v-nav-link-spacing-horizontal);
      }
    }

    /* Breadcrumb */
    &[aria-label="breadcrumb"] {
      align-items: center;
      justify-content: start;

      & :is(ul, ol, [role="list"], .tag-list) :is(li, [role="listitem"], .tag-li) {
        &:not(:first-child) {
          margin-inline-start: var(--v-nav-link-spacing-horizontal);
        }

        :is(a, [role="link"], .tag-link) {
          margin: calc(var(--v-nav-link-spacing-vertical) * -1) 0;
          margin-inline-start: calc(var(--v-nav-link-spacing-horizontal) * -1);
        }

        &:not(:last-child) {
          &::after {
            display: inline-block;
            position: absolute;
            width: calc(var(--v-nav-link-spacing-horizontal) * 4);
            margin: 0 calc(var(--v-nav-link-spacing-horizontal) * -1);
            content: var(--v-nav-breadcrumb-divider);
            color: var(--v-muted-color);
            text-align: center;
            text-decoration: none;
            white-space: nowrap;
          }
        }
      }

      /* Minimal support for aria-current */
      & :is(a, [role="link"], .tag-link)[aria-current]:not([aria-current="false"]) {
        background-color: transparent;
        color: inherit;
        text-decoration: none;
        pointer-events: none;
      }
    }
  }
  /* Vertical Nav */
  :is(aside, [role="complementary"], .tag-aside) {
    display: block;

    :is(nav, [role="navigation"], .tag-nav),:is(ul, ol, [role="list"], .tag-list),:is(li, [role="listitem"], .tag-li) {
      display: block;
    }

    :is(li, [role="listitem"], .tag-li) {
      padding: calc(var(--v-nav-element-spacing-vertical) * 0.5)
        var(--v-nav-element-spacing-horizontal);

      :is(a, [role="link"], .tag-link) {
        display: block;
      }

      /* Minimal support for links as buttons */
      :is(button, [role="button"], [type="button"], .tag-button) {
        margin: inherit;
      }
    }
  }
  /* Tree. Should be placed on list elements. */
  :is(ul, ol, [role="list"], .tag-list):is([role="tree"], .tag-tree) {
    border-left: var(--v-border-width) solid var(--v-muted-border-color);
    margin: 0 !important;
    padding: 0 !important;
    :is(li, [role="listitem"], .tag-li) {
      margin: 0 !important;
      padding: calc(var(--v-nav-element-spacing-vertical) * 0.25) 0 !important;
      :is(ul, ol, [role="list"], .tag-list):is([role="tree"], .tag-tree) {
        /* sub-tree margin */
        margin-left: calc(
          var(--v-nav-element-spacing-horizontal) * 1.5
        ) !important;
      }
    }
    :is(a, [role="link"], .tag-link),:is(details, .tag-details) :is(summary, .tag-summary) {
      margin: 0;
      padding: 0;
      margin-left: calc(var(--v-border-width) * -1);
      padding-left: calc(var(--v-nav-element-spacing-horizontal) * 1.5);
    }
    :is(a, [role="link"], .tag-link) {
      border-left: var(--v-border-width) solid transparent;
      border-radius: 0;
      font-weight: 400;
      transition:
        background-color var(--v-transition),
        color var(--v-transition),
        box-shadow var(--v-transition),
        border-color var(--v-transition),
        font-weight var(--v-transition),
        -webkit-text-decoration var(--v-transition);
      &:hover {
        border-color: var(--v-secondary-underline);
      }
      &[aria-current] {
        border-color: var(--v-primary);
        color: var(--v-primary-hover);
        font-weight: 600;
        &:hover {
          text-decoration: none;
        }
      }
    }
  }
  /* Breadcrumb RTL */
  [dir="rtl"] {
    :is(nav, [role="navigation"], .tag-nav) {
      &[aria-label="breadcrumb"] {
        & :is(ul, ol, [role="list"], .tag-list) :is(li, [role="listitem"], .tag-li) {
          &:not(:last-child) {
            ::after {
              content: "\\";
            }
          }
        }
      }
    }
  }
  *:has(> :is([popover], .tag-popover)) {
    anchor-scope: --v-popover-anchor;
    anchor-name: --v-popover-anchor;
  }
  :is([popover], .tag-popover) {
    /* Override UA: position: fixed; inset: 0; margin: auto; */
    position: absolute;
    inset: auto;
    margin: 0;
    position-anchor: --v-popover-anchor;

    z-index: 1;
    max-width: min(
      var(--v-popover-max-width),
      calc(100vw - var(--v-spacing) * 2)
    );
    padding: var(--v-spacing);
    border: 1px solid var(--v-popover-border-color);
    border-radius: var(--v-border-radius);
    background: var(--v-popover-background-color);
    color: var(--v-popover-color);
    box-shadow: var(--v-popover-box-shadow);
    font-size: var(--v-font-size);
    font-weight: normal;
    text-wrap: pretty;
    overflow-wrap: break-word;
    opacity: 0;

    transition:
      display var(--v-transition) allow-discrete,
      overlay var(--v-transition) allow-discrete,
      opacity var(--v-transition);

    &:is(:popover-open, [aria-expanded="true"]) {
      opacity: 1;
    }

    @starting-style {
      &:is(:popover-open, [aria-expanded="true"]) {
        opacity: 0;
      }
    }

    &::backdrop {
      display: none;
    }

    /* Default + explicit top */
    &:not([data-placement]),
    &[data-placement="top"] {
      position-area: top;
      margin-bottom: calc(var(--v-spacing) * 0.5);
    }

    &[data-placement="bottom"] {
      position-area: bottom;
      margin-top: calc(var(--v-spacing) * 0.5);
    }

    &[data-placement="left"] {
      position-area: left;
      margin-right: calc(var(--v-spacing) * 0.5);
    }

    &[data-placement="right"] {
      position-area: right;
      margin-left: calc(var(--v-spacing) * 0.5);
    }
  }
  /* 1. Display in Edge 18- / IE
     2. Vertical-align in Chrome, Edge, Firefox */
  :is(progress, [role="progressbar"], .tag-progress) {
    display: inline-block; /* 1 */
    vertical-align: baseline; /* 2 */
  }
  :is(progress, [role="progressbar"], .tag-progress) {
    -webkit-appearance: none;
    -moz-appearance: none;

    display: inline-block;
    appearance: none;
    width: 100%;
    height: 0.5rem;
    margin-bottom: calc(var(--v-spacing) * 0.5);
    overflow: hidden;

    border: 0;
    border-radius: var(--v-border-radius);
    background-color: var(--v-progress-background-color);

    /* IE10 uses `color` to set the bar background-color */
    color: var(--v-progress-color);

    &::-webkit-progress-bar {
      border-radius: var(--v-border-radius);
      background: none;
    }

    /* Indeterminate state */
    @media (prefers-reduced-motion: no-preference) {
      &:is(:is(progress):indeterminate, :is([role="progressbar"], .tag-progress):not(:is([value], [aria-valuenow]))) {
        background: var(--v-progress-background-color)
          linear-gradient(
            to right,
            var(--v-progress-color) 30%,
            var(--v-progress-background-color) 30%
          )
          top left / 150% 150% no-repeat;
        animation: progress-indeterminate 1s linear infinite;

        &:--progress-bar {
          background-color: transparent;
        }
      }
    }
  }
  /* PSEUDO ELEMENTS NOT COMPATIBLE WITH CUSTOM SELECTORS. */
  :is(progress):is([value], [aria-valuenow])::-webkit-progress-value,
  :is(progress):is([value], [aria-valuenow])::-moz-progress-bar,
  :is(:is([role="progressbar"], .tag-progress)):is([value], [aria-valuenow])::before {
    background-color: var(--v-progress-color);
    -webkit-transition: inline-size var(--v-transition);
    -moz-transition: inline-size var(--v-transition);
    transition: inline-size var(--v-transition);
  }
  @media (prefers-reduced-motion: no-preference) {
    :is(progress):indeterminate::-webkit-progress-value,
    :is(progress):indeterminate::-moz-progress-bar,
    :is(:is([role="progressbar"], .tag-progress)):not(:is([value], [aria-valuenow]))::before {
      background-color: transparent;
    }
  }
  [dir="rtl"] {
    @media (prefers-reduced-motion: no-preference) {
      :is(:is(progress):indeterminate, :is([role="progressbar"], .tag-progress):not(:is([value], [aria-valuenow]))) {
        animation-direction: reverse;
      }
    }
  }
  @keyframes progress-indeterminate {
    0% {
      background-position: 200% 0;
    }

    100% {
      background-position: -200% 0;
    }
  }
  [role="tooltip"] {
    position: relative;

    &:not(:is(a, [role="link"], .tag-link),:is(button, [role="button"], [type="button"], .tag-button), input) {
      border-bottom: 1px dotted;
      text-decoration: none;
      cursor: help;
    }

    &[data-placement="top"]::before,
    &[data-placement="top"]::after,
    &::before,
    &::after {
      display: block;
      z-index: 99;
      position: absolute;
      bottom: 100%;
      left: 50%;
      padding: 0.25rem 0.5rem;
      overflow: hidden;
      transform: translate(-50%, -0.25rem);
      border-radius: var(--v-border-radius);
      background: var(--v-tooltip-background-color);
      content: attr(aria-description);
      color: var(--v-tooltip-color);
      font-style: normal;
      font-weight: var(--v-font-weight);
      font-size: var(--v-font-size);
      text-decoration: none;
      text-overflow: ellipsis;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
    }

    /* Caret */
    &[data-placement="top"]::after,
    &::after {
      padding: 0;
      transform: translate(-50%, 0rem);
      border-top: 0.3rem solid;
      border-right: 0.3rem solid transparent;
      border-left: 0.3rem solid transparent;
      border-radius: 0;
      background-color: transparent;
      content: "";
      color: var(--v-tooltip-background-color);
    }

    &[data-placement="bottom"] {
      &::before,
      &::after {
        top: 100%;
        bottom: auto;
        transform: translate(-50%, 0.25rem);
      }

      &:after {
        transform: translate(-50%, -0.3rem);
        border: 0.3rem solid transparent;
        border-bottom: 0.3rem solid;
      }
    }

    &[data-placement="left"] {
      &::before,
      &::after {
        top: 50%;
        right: 100%;
        bottom: auto;
        left: auto;
        transform: translate(-0.25rem, -50%);
      }

      &:after {
        transform: translate(0.3rem, -50%);
        border: 0.3rem solid transparent;
        border-left: 0.3rem solid;
      }
    }

    &[data-placement="right"] {
      &::before,
      &::after {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 100%;
        transform: translate(0.25rem, -50%);
      }

      &:after {
        transform: translate(-0.3rem, -50%);
        border: 0.3rem solid transparent;
        border-right: 0.3rem solid;
      }
    }

    /* Display */
    &:focus,
    &:hover {
      &::before,
      &::after {
        opacity: 1;
      }
    }

    /* Animations, excluding touch devices */
    @media (hover: hover) and (pointer: fine) {
      /* Default (top) */
      &:focus,
      &:hover {
        &::before,
        &::after {
          --v-tooltip-slide-to: translate(-50%, -0.25rem);
          transform: translate(-50%, 0.75rem);
          animation-duration: 0.2s;
          animation-fill-mode: forwards;
          animation-name: tooltip-slide;
          opacity: 0;
        }

        &::after {
          --v-tooltip-caret-slide-to: translate(-50%, 0rem);
          transform: translate(-50%, -0.25rem);
          animation-name: tooltip-caret-slide;
        }
      }

      /* Bottom */
      &[data-placement="bottom"] {
        &:focus,
        &:hover {
          &::before,
          &::after {
            --v-tooltip-slide-to: translate(-50%, 0.25rem);
            transform: translate(-50%, -0.75rem);
            animation-name: tooltip-slide;
          }

          &::after {
            --v-tooltip-caret-slide-to: translate(-50%, -0.3rem);
            transform: translate(-50%, -0.5rem);
            animation-name: tooltip-caret-slide;
          }
        }
      }

      /* Left */
      &[data-placement="left"] {
        &:focus,
        &:hover {
          &::before,
          &::after {
            --v-tooltip-slide-to: translate(-0.25rem, -50%);
            transform: translate(0.75rem, -50%);
            animation-name: tooltip-slide;
          }

          &::after {
            --v-tooltip-caret-slide-to: translate(0.3rem, -50%);
            transform: translate(0.05rem, -50%);
            animation-name: tooltip-caret-slide;
          }
        }
      }

      /* Right */
      &[data-placement="right"] {
        &:focus,
        &:hover {
          &::before,
          &::after {
            --v-tooltip-slide-to: translate(0.25rem, -50%);
            transform: translate(-0.75rem, -50%);
            animation-name: tooltip-slide;
          }

          &::after {
            --v-tooltip-caret-slide-to: translate(-0.3rem, -50%);
            transform: translate(-0.05rem, -50%);
            animation-name: tooltip-caret-slide;
          }
        }
      }
    }
  }
  @keyframes tooltip-slide {
    to {
      transform: var(--v-tooltip-slide-to);
      opacity: 1;
    }
  }
  @keyframes tooltip-caret-slide {
    50% {
      opacity: 0;
    }
    to {
      transform: var(--v-tooltip-caret-slide-to);
      opacity: 1;
    }
  }

  /* Pointer cursor on controls (opinionated) */

  [aria-controls] {
    cursor: pointer;
  }

  /* Not-allowed cursor on disabled / inoperable controls (opinionated) */

  [aria-disabled="true"],
  [disabled] {
    cursor: not-allowed;
  }

  /* Show visually-hidden accessible elements (opinionated) */

  [aria-hidden="false"][hidden] {
    display: inline;
    display: initial;
  }

  [aria-hidden="false"][hidden]:not(:focus) {
    clip: rect(0, 0, 0, 0);
    position: absolute;
  }

  /* Kill IE 10 tap delay */

  a,
  area,
  button,
  input,
  label,
  select,
  summary,
  textarea,
  [tabindex] {
    -ms-touch-action: manipulation;
  }

  [dir="rtl"] {
    direction: rtl;
  }

  /**
   * Reduced motion (opinionated):
   * 1. Kill animations
   * 2. Unfix background-attachment
   * 3. Instant scroll
   * 4. Kill transitions
   */

  @media (prefers-reduced-motion: reduce) {
    *:not([aria-busy="true"]),
    :not([aria-busy="true"])::before,
    :not([aria-busy="true"])::after {
      background-attachment: scroll !important;
      background-attachment: initial !important;
      /* 2 */
      animation-duration: 1ms !important;
      /* 1 */
      animation-delay: -1ms !important;
      /* 1 */
      animation-iteration-count: 1 !important;
      /* 1 */
      scroll-behavior: auto !important;
      /* 3 */
      transition-delay: 0s !important;
      /* 4 */
      transition-duration: 0s !important;
      /* 4 */
    }
  }
}

/* Class-only utilities. Unlayered, so they beat layered CE styles. */
.abstract {
    display: contents;
  }
/**
   * Centered page column with responsive max-width.
   * @cssclass container
   */
.container,
  /**
   * Full-width fluid column (padding only, no max-width).
   * @cssclass container-fluid
   */
  .container-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--v-spacing);
    padding-left: var(--v-spacing);
  }
.container {
    /* sm: also drop horizontal padding (first breakpoint) */
    @media (min-width: 576px) {
      max-width: 510px;
      padding-right: 0;
      padding-left: 0;
    }
    @media (min-width: 768px) {
      max-width: 700px;
    }
    @media (min-width: 1024px) {
      max-width: 950px;
    }
    @media (min-width: 1280px) {
      max-width: 1200px;
    }
    @media (min-width: 1536px) {
      max-width: 1450px;
    }
  }
/**
   * Auto-fit responsive columns.
   * @cssclass grid
   */
.grid {
    grid-column-gap: var(--v-grid-column-gap);
    grid-row-gap: var(--v-grid-row-gap);
    display: grid;
    grid-template-columns: 1fr;

    @media (min-width: 768px) {
      grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
    }

    & > * {
      min-width: 0; /* HACK for children in overflow */
    }
  }
/**
   * Scrollable overflow container.
   * @cssclass overflow-auto
   */
.overflow-auto {
    overflow: auto;
  }
/**
   * Always show a styled vertical scrollbar.
   * @cssclass show-scrollbar
   */
.show-scrollbar {
    overflow-y: scroll;
    &::-webkit-scrollbar {
      -webkit-appearance: none;
      width: 8px;
      height: 8px;
    }
    &::-webkit-scrollbar-track {
      background: transparent;
    }
    &::-webkit-scrollbar-thumb {
      background: var(--v-muted-color);
      border-radius: 4px;
    }
  }
/**
   * Opt out of Valence.css styles on one element.
   * @cssclass unstyled
   */
.unstyled,
  /**
   * Opt out of Valence.css styles on an element and all descendants.
   * @cssclass unstyled-all
   */
  .unstyled-all,
  .unstyled-all * {
    /* `revert`, not `revert-layer`. Utilities are unlayered; the rest of
       Valence.css is layered. `revert-layer` would only peel the unlayered
       slice and leave alias / element `@layer` styles intact. */
    all: revert !important;
  }
/**
   * Disable transitions / animations on one element.
   * @cssclass unanimated
   */
.unanimated,
  /**
   * Disable transitions / animations on an element and all descendants.
   * @cssclass unanimated-all
   */
  .unanimated-all,
  .unanimated-all * {
    background-attachment: scroll !important;
    background-attachment: initial !important;
    /* 2 */
    animation-duration: 1ms !important;
    /* 1 */
    animation-delay: -1ms !important;
    /* 1 */
    animation-iteration-count: 1 !important;
    /* 1 */
    scroll-behavior: auto !important;
    /* 3 */
    transition-delay: 0s !important;
    /* 4 */
    transition-duration: 0s !important;
    /* 4 */
  }
/* Nucleus Kit element CSS. */
/**
 * Styles for `<content-carousel>`.
 * @element content-carousel
 */

/* Aliases */

@layer {
  :root {
    /**
     * Length of the slide / fade transition.
     * @cssproperty
     * @syntax <time>
     * @default 0.25s
     */
    --content-carousel-slide-animation-duration: var(
      --v-transition-duration-standard,
      0.25s
    );
    /**
     * Easing used for the fade transition.
     * @cssproperty
     * @syntax <easing-function>
     * @default ease-out
     */
    --content-carousel-transition-ease: var(--v-transition-ease-out, ease-out);
    /**
     * Min-width of the nav buttons.
     * @cssproperty
     * @syntax <length>
     * @default 25px
     */
    --content-carousel-button-size: 25px;
  }
  :is(content-carousel, .tag-content-carousel) {
    /**
     * `slide-animation="track"` only: how far the track is dragged, in slide
     * widths — `1` shows the next slide, `-1` the previous. While
     * `is-scrubbing` it follows a wrapping `<gesture-handler>`'s inherited
     * `--gesture-progress` unless set explicitly — swipeable carousels.
     * @cssproperty
     * @syntax <number>
     * @default 0
     */
    --content-carousel-progress: 0;
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
    white-space: nowrap;

    > [rel="prev"],
    .tag-content-carousel-prev,
    > [rel="next"],
    .tag-content-carousel-next {
      position: absolute;
      top: calc(50% - calc(var(--content-carousel-button-size) / 2));
      min-width: var(--content-carousel-button-size);
      z-index: 3;
      text-align: center;
      cursor: pointer;
    }

    /**
     * Positions a direct child with `rel="prev"` (or
     * `.tag-content-carousel-prev`) as the "previous slide" nav control.
     * @cssclass tag-content-carousel-prev
     */
    > [rel="prev"],
    .tag-content-carousel-prev {
      left: 0;
    }
    /**
     * Positions a direct child with `rel="next"` (or
     * `.tag-content-carousel-next`) as the "next slide" nav control.
     * @cssclass tag-content-carousel-next
     */
    > [rel="next"],
    .tag-content-carousel-next {
      right: 0;
    }

    :is(content-carousel-slide, .tag-content-carousel-slide) {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      display: block;
    }

    /* slide / default */
    &:not(:is([slide-animation], [data-slide-animation])),
    &:is([slide-animation="slide"], [data-slide-animation="slide"]) {
      :is(content-carousel-slide, .tag-content-carousel-slide) {
        animation-duration: var(--content-carousel-slide-animation-duration);
        animation-fill-mode: forwards;
        z-index: -1;
      }
      /* Initial state. No animation. */
      &:not(:is([last-move], [data-last-move])) :is(content-carousel-slide, .tag-content-carousel-slide) {
        &:is([is-active], [aria-current]) {
          transform: translateX(0);
          z-index: 2;
        }
        &:not(:is([is-active], [aria-current])) {
          opacity: 0;
          z-index: 1;
        }
      }
      &:is([last-move="forward"], [data-last-move="forward"]) :is(content-carousel-slide, .tag-content-carousel-slide) {
        &:is([is-active], [aria-current]) {
          animation-name: right-to-center;
          z-index: 2;
        }
        &:not(:is([is-active], [aria-current])):has(
            + :is([is-active], [aria-current])),
        &:first-of-type:is([is-active], [aria-current]) ~ :last-of-type {
          animation-name: center-to-left;
          z-index: 1;
        }
      }
      &:is([last-move="back"], [data-last-move="back"]) :is(content-carousel-slide, .tag-content-carousel-slide) {
        &:is([is-active], [aria-current]) {
          animation-name: left-to-center;
          z-index: 2;
        }
        &:is([is-active], [aria-current])
          + :not(:is([is-active], [aria-current])),
        &:first-of-type:not(:is([is-active], [aria-current])):has(
            ~ :last-of-type:is([is-active], [aria-current])) {
          animation-name: center-to-right;
          z-index: 1;
        }
      }
    }

    /* fade */
    &:is([slide-animation="fade"], [data-slide-animation="fade"]) {
      :is(content-carousel-slide, .tag-content-carousel-slide) {
        opacity: 0;
        z-index: 1;
        transition: opacity var(--content-carousel-transition-ease);
        transition-duration: var(--content-carousel-slide-animation-duration);
        &:is([is-active], [aria-current]) {
          opacity: 1;
          z-index: 2;
        }
        &:not(:is([is-active], [aria-current])) {
          opacity: 0;
          z-index: 1;
        }
      }
    }

    /* track: the active slide sits at 0, neighbours at ±100%, all shifted by
       `--content-carousel-progress`. Transitions animate a slide change;
       none while `is-scrubbing`, when a finger drives the offset. */
    &:is([slide-animation="track"], [data-slide-animation="track"]) {
      :is(content-carousel-slide, .tag-content-carousel-slide) {
        --content-carousel-slot: 1;
        transform: translateX(
          calc(
            (1 - var(--content-carousel-progress)) *
              100%
          )
        );
        transform: translateX(
          calc(
            (var(--content-carousel-slot) - var(--content-carousel-progress)) *
              100%
          )
        );
        transition: transform var(--content-carousel-slide-animation-duration)
          var(--content-carousel-transition-ease);
        &:is([is-active], [aria-current]) {
          --content-carousel-slot: 0;
          z-index: 2;
        }
        &:has(~ :is([is-active], [aria-current])) {
          --content-carousel-slot: -1;
        }
        &:is(&:is([is-active], [aria-current]) + & + &),
        &:has(+ & + &:is([is-active], [aria-current])) {
          /* hide slides that are two slides away */
          display: none !important;
        }
      }
      &:is([is-scrubbing], [data-scrubbing]) {
        --content-carousel-progress: var(--gesture-progress, 0);
        :is(content-carousel-slide, .tag-content-carousel-slide) {
          transition: none;
        }
      }
    }
  }
  @keyframes right-to-center {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0);
    }
  }
  @keyframes center-to-left {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  @keyframes left-to-center {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }
  @keyframes center-to-right {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(100%);
    }
  }
}

/**
 * Styles for `<content-drawer>`.
 * @element content-drawer
 */

/* Aliases */
/* Doubled so a scrub outranks the `is-open` + `open-stage` rules */

@layer {
  :root {
    /**
     * Slide transition duration.
     * @cssproperty
     * @syntax <time>
     * @default 0.25s
     */
    --content-drawer-transition-duration: var(
      --v-transition-duration-standard,
      0.25s
    );
    /**
     * Slide transition easing.
     * @cssproperty
     * @syntax <easing-function>
     * @default ease-out
     */
    --content-drawer-transition-ease: var(--v-transition-ease-out, ease-out);
    /**
     * Off-screen translate amount (closed).
     * @cssproperty
     * @syntax <percentage>
     * @default 101%
     */
    --content-drawer-closed: 101%;
    /**
     * Full-open translate (`open-stage` unset or `0`).
     * @cssproperty
     * @syntax <percentage>
     * @default 0%
     */
    --content-drawer-open-full: 0%;
    /**
     * Half-open translate (`open-stage="1"`).
     * @cssproperty
     * @syntax <percentage>
     * @default 50%
     */
    --content-drawer-open-half: 50%;
    /**
     * Peek translate (`open-stage="2"`).
     * @cssproperty
     * @syntax <percentage>
     * @default 75%
     */
    --content-drawer-open-peek: 75%;
    /**
     * Max width when open in `.relative` mode, used unless
     * `--content-drawer-max-width` is set.
     * @cssproperty
     * @syntax <length>
     * @default 200px
     */
    --content-drawer-relative-max-width: 200px;
    /**
     * Stack order for the drawer panel.
     * @cssproperty
     * @syntax <integer>
     * @default 3
     */
    --content-drawer-z-index: 3;
    /**
     * Stack order for the sibling backdrop (`:--dialog-backdrop-aliases`).
     * @cssproperty
     * @syntax <integer>
     * @default 2
     */
    --content-drawer-overlay-z-index: 2;
  }
  *:has(> :is(content-drawer, .tag-content-drawer)) {
    position: relative;
    overflow: hidden;
  }
  :is(content-drawer, .tag-content-drawer) {
    /**
     * How far open the drawer is while `is-scrubbing`: `0` closed, `1`
     * full. Declared on the drawer (not `:root`) so it follows a wrapping
     * `<gesture-handler>`'s inherited `--gesture-progress` unless set
     * explicitly — a swipe-to-open / drag-to-close bottom sheet.
     * @cssproperty
     * @syntax <number>
     * @default var(--gesture-progress, 0)
     */
    --content-drawer-open-progress: var(--gesture-progress, 0);
  }
  :is(content-drawer, .tag-content-drawer):not(.relative) {
    /* Not `display: none` when closed. Child intersection observers must
       keep working, and a discrete display transition would animate a
       drawer that starts `[is-open]` on first paint. */
    display: block;
    position: fixed;
    z-index: var(--content-drawer-z-index);
    /* Needed for an accurate height */
    box-sizing: border-box;
    background-color: #f7f7f7;
    background-color: var(--v-card-background-color, #f7f7f7);
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.08);
    overscroll-behavior-y: contain;
    transition: transform var(--content-drawer-transition-duration)
      var(--content-drawer-transition-ease);
    /* A finger drives the position: no easing between frames */
    &:is([is-scrubbing][is-scrubbing],
  [data-scrubbing][data-scrubbing]) {
      transition: none;
    }

    /**
     * Close control — empty `.close` / `[rel="prev"]`
     * button or link (theme close icon).
     * @cssclass close
     */
    width: 100%;
    max-height: calc(100vh - var(--v-spacing) * 2);
    /* mobile browsers: the visible viewport, not the one under the URL bar */
    max-height: calc(100dvh - var(--v-spacing) * 2);
    margin: var(--v-spacing);
    overflow: auto;
    @media (min-width: 576px) {
    max-width: 510px;
  }
    @media (min-width: 768px) {
    max-width: 700px;
  }
    /* Best donut-scoping option after trying the rest. */
    :where(&, & > .abstract, & > .abstract > .abstract) {
    /* `:where` keeps nested `.abstract` from winning on specificity */
    > :is(header, [role="header"], .tag-header) {
      > * {
        margin-bottom: 0;
      }

      > :is(.close, :is(:is(a, [role="link"], .tag-link),:is(button, [role="button"], [type="button"], .tag-button))[rel="prev"]) {
        --v-modal-close-icon-size: calc(1rem * var(--v-line-height));
        display: block;
        float: right;
        width: var(--v-modal-close-icon-size);
        height: var(--v-modal-close-icon-size);
        margin: calc(var(--v-spacing) * -1) 0 var(--v-spacing) auto;
        padding: 0;
        border: none;
        background-image: var(--v-icon-close);
        background-position: center;
        /* Scale icon to line-height, cap at 1.25rem */
        background-size: auto min(var(--v-modal-close-icon-size), 1.25rem);
        background-repeat: no-repeat;
        background-color: transparent;
        opacity: 0.5;
        transition: opacity var(--v-transition);
        &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
    opacity: 1;
  }
        margin: 0;
        margin-left: var(--v-spacing);
        padding: 0;
        float: right;
      }
    }

    > :is(footer, [role="footer"], .tag-footer) {
      text-align: right;

      :is(button, [role="button"], [type="button"], .tag-button) {
        margin-bottom: 0;

        &:not(:first-of-type) {
          margin-left: calc(var(--v-spacing) * 0.5);
        }
      }
    }
  }
    /* Best donut-scoping option after trying the rest. */
    :where(&, & > .abstract, & > .abstract > .abstract) {
    /* `:where` keeps nested `.abstract` from winning on specificity */
    > :is(.close, :is(:is(a, [role="link"], .tag-link),:is(button, [role="button"], [type="button"], .tag-button))[rel="prev"]) {
      --v-modal-close-icon-size: calc(1rem * var(--v-line-height));
      display: block;
      float: right;
      width: var(--v-modal-close-icon-size);
      height: var(--v-modal-close-icon-size);
      margin: calc(var(--v-spacing) * -1) 0 var(--v-spacing) auto;
      padding: 0;
      border: none;
      background-image: var(--v-icon-close);
      background-position: center;
      /* Scale icon to line-height, cap at 1.25rem */
      background-size: auto min(var(--v-modal-close-icon-size), 1.25rem);
      background-repeat: no-repeat;
      background-color: transparent;
      opacity: 0.5;
      transition: opacity var(--v-transition);
      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
    opacity: 1;
  }
    }
  }
    overflow-y: scroll;
    margin: 0;
    padding: var(--v-spacing);

    /**
     * `position: sticky` instead of the default `absolute` placement.
     * @cssclass
     */
    &.sticky {
      position: sticky;
    }
    /**
     * `position: absolute` instead of the default `fixed` placement —
     * a sheet inside its (`position: relative`) parent.
     * @cssclass
     */
    &.absolute {
      position: absolute;
    }

    /* bottom (default) */
    &:not(:is([from-side], [data-placement])),
    &:is([from-side="bottom"],
  [data-placement="bottom"]) {
      border-radius: 10px 10px
        0px 0px;
      border-radius: var(--v-border-radius, 10px) var(--v-border-radius, 10px)
        0px 0px;
      transform: translateY(var(--content-drawer-closed));
      left: 0;
      right: 0;
      bottom: 0;
      &:is([is-open], [aria-expanded="true"]) {
        transform: translateY(var(--content-drawer-open-full));
      }
      &:is([is-open], [aria-expanded="true"]):is([open-stage="1"],
  [data-open="1"]) {
        transform: translateY(var(--content-drawer-open-half));
      }
      &:is([is-open], [aria-expanded="true"]):is([open-stage="2"],
  [data-open="2"]) {
        transform: translateY(var(--content-drawer-open-peek));
      }
      &:is([is-scrubbing][is-scrubbing],
  [data-scrubbing][data-scrubbing]) {
        transform: translateY(
          calc(
            var(--content-drawer-closed) *
              (1 - var(--content-drawer-open-progress))
          )
        );
      }
    }

    /* top */
    &:is([from-side="top"],
  [data-placement="top"]) {
      border-radius: 0px 0px 10px
        10px;
      border-radius: 0px 0px var(--v-border-radius, 10px)
        var(--v-border-radius, 10px);
      transform: translateY(calc(var(--content-drawer-closed) * -1));
      left: 0;
      right: 0;
      top: 0;
      &:is([is-open], [aria-expanded="true"]) {
        transform: translateY(calc(var(--content-drawer-open-full) * -1));
      }
      &:is([is-open], [aria-expanded="true"]):is([open-stage="1"],
  [data-open="1"]) {
        transform: translateY(calc(var(--content-drawer-open-half) * -1));
      }
      &:is([is-open], [aria-expanded="true"]):is([open-stage="2"],
  [data-open="2"]) {
        transform: translateY(calc(var(--content-drawer-open-peek) * -1));
      }
      &:is([is-scrubbing][is-scrubbing],
  [data-scrubbing][data-scrubbing]) {
        transform: translateY(
          calc(
            var(--content-drawer-closed) *
              (var(--content-drawer-open-progress) - 1)
          )
        );
      }
    }

    /* left */
    &:is([from-side="left"],
  [data-placement="left"]) {
      border-radius: 0px 10px
        10px 0px;
      border-radius: 0px var(--v-border-radius, 10px)
        var(--v-border-radius, 10px) 0px;
      transform: translateX(calc(var(--content-drawer-closed) * -1));
      top: 0;
      bottom: 0;
      left: 0;
      &:is([is-open], [aria-expanded="true"]) {
        transform: translateX(calc(var(--content-drawer-open-full) * -1));
      }
      &:is([is-open], [aria-expanded="true"]):is([open-stage="1"],
  [data-open="1"]) {
        transform: translateX(calc(var(--content-drawer-open-half) * -1));
      }
      &:is([is-open], [aria-expanded="true"]):is([open-stage="2"],
  [data-open="2"]) {
        transform: translateX(calc(var(--content-drawer-open-peek) * -1));
      }
      &:is([is-scrubbing][is-scrubbing],
  [data-scrubbing][data-scrubbing]) {
        transform: translateX(
          calc(
            var(--content-drawer-closed) *
              (var(--content-drawer-open-progress) - 1)
          )
        );
      }
    }

    /* right */
    &:is([from-side="right"],
  [data-placement="right"]) {
      border-radius: 10px 0px 0px
        10px;
      border-radius: var(--v-border-radius, 10px) 0px 0px
        var(--v-border-radius, 10px);
      transform: translateX(var(--content-drawer-closed));
      top: 0;
      bottom: 0;
      right: 0;
      &:is([is-open], [aria-expanded="true"]) {
        transform: translateX(var(--content-drawer-open-full));
      }
      &:is([is-open], [aria-expanded="true"]):is([open-stage="1"],
  [data-open="1"]) {
        transform: translateX(var(--content-drawer-open-half));
      }
      &:is([is-open], [aria-expanded="true"]):is([open-stage="2"],
  [data-open="2"]) {
        transform: translateX(var(--content-drawer-open-peek));
      }
      &:is([is-scrubbing][is-scrubbing],
  [data-scrubbing][data-scrubbing]) {
        transform: translateX(
          calc(
            var(--content-drawer-closed) *
              (1 - var(--content-drawer-open-progress))
          )
        );
      }
    }

    /**
     * Sibling dimmer: Valence.css `:--dialog-backdrop-aliases`
     * (`[role="presentation"]` / `.tag-backdrop`). Place as the immediate
     * next sibling; click-to-close is `<event-handler>` / `<dismiss-watcher>`.
     */
    & + :is([role="presentation"], .tag-backdrop) {
      display: block;
      backdrop-filter: var(--v-modal-overlay-backdrop-filter);
      background-color: var(--v-modal-overlay-background-color);
      pointer-events: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      position: fixed;
      overscroll-behavior: contain;
      display: none;
      position: fixed;
      z-index: var(--content-drawer-overlay-z-index);
      opacity: 0;
      transition:
        opacity var(--content-drawer-transition-duration)
          var(--content-drawer-transition-ease),
        display var(--content-drawer-transition-duration) allow-discrete;
      &.sticky {
        position: sticky;
      }
      &.absolute {
        position: absolute;
      }
    }

    &:is([is-open], [aria-expanded="true"]) + :is([role="presentation"], .tag-backdrop) {
      display: block;
      opacity: 1;
      @starting-style {
        opacity: 0;
      }
    }
  }
  /**
   * In-flow mode: the drawer participates in layout and animates
   * `max-width` instead of overlaying via `position`, pushing sibling
   * content aside as it opens. Currently only affects
   * `from-side="left"`.
   * @cssclass
   */
  :is(content-drawer, .tag-content-drawer).relative {
    display: block;
    position: relative;
    overflow: hidden;

    &:is([from-side="left"],
  [data-placement="left"]) {
      height: 100%;
      max-width: 0;
      width: 100%;
      transition: max-width var(--content-drawer-transition-duration)
        var(--content-drawer-transition-ease);
      &:is([is-open], [aria-expanded="true"]) {
        /**
         * Overrides `--content-drawer-relative-max-width` for this
         * drawer only.
         * @cssproperty --content-drawer-max-width
         * @syntax <length>
         */
        max-width: var(
          --content-drawer-max-width,
          var(--content-drawer-relative-max-width)
        );
      }
    }
  }
}

/**
 * Styles for `<content-tabs>`, `<content-tabs-header>`, and
 * `<content-tabs-body>`. Primary layout lives on the `content-tabs`
 * mixin; headers / bodies are styled via nested selectors.
 * @element content-tabs
 */

/* Aliases */

@layer {
  :root {
    /**
     * Border color for `.file-tabs` headers / bodies.
     * @cssproperty
     * @syntax <color>
     */
    --content-tabs-border-color: var(--v-muted-border-color, currentColor);
    /**
     * Border width for `.file-tabs` headers / bodies.
     * @cssproperty
     * @syntax <length>
     */
    --content-tabs-border-width: var(--v-border-width, 2px);
    /**
     * Text color for the active header in `.underline`.
     * @cssproperty
     * @syntax <color>
     */
    --content-tabs-color-active: var(--v-color-primary, inherit);
    /**
     * Padding for each header.
     * @cssproperty
     * @syntax <length>{1,4}
     */
    --content-tabs-header-padding: 10px 15px;
    /**
     * Padding for each body in `.file-tabs`.
     * @cssproperty
     * @syntax <length>{1,4}
     */
    --content-tabs-body-padding: var(--v-spacing, 15px);
    /**
     * Height of the `.file-tabs` active-tab accent bar.
     * @cssproperty
     * @syntax <length>
     */
    --content-tabs-active-indicator-height: 2px;
  }
  :is(content-tabs, .tag-content-tabs) {
    :is(content-tabs-header, .tag-content-tabs-header) {
      cursor: pointer;
      position: relative;
      -webkit-user-select: none;
         -moz-user-select: none;
              user-select: none;
    }
    :is(content-tabs-body, .tag-content-tabs-body) {
      display: none;
    }
    :is(content-tabs-body, .tag-content-tabs-body):is([is-open], [aria-selected="true"]) {
      display: block;
    }

    /**
     * File-explorer look — headers render as bordered folder tabs joined
     * to the active body.
     * @cssclass
     */
    &.file-tabs {
      > :is(content-tabs-header, .tag-content-tabs-header) {
        /* compensate for lack of flexbox */
        margin-right: -5px;
      }
      :is(content-tabs-header, .tag-content-tabs-header) {
        border: var(--content-tabs-border-width) solid
          var(--content-tabs-border-color);
        border-bottom: 0;
        padding: var(--content-tabs-header-padding);
        display: inline-block;

        &:not(:last-of-type) {
          border-right: 0;
        }
        :is(content-tabs-body, .tag-content-tabs-body) {
          margin-top: -1px;
        }
      }
      &:not(:has(:is(content-tabs-header, .tag-content-tabs-header):is([is-open], [aria-selected="true"])))
        :is(content-tabs-header, .tag-content-tabs-header):first-of-type,:is(content-tabs-header, .tag-content-tabs-header):is([is-open], [aria-selected="true"]) {
        &:not(.reset-colors) {
    background-color: var(--v-multiply-color-0);
    border-color: var(--v-multiply-color-1);
    background-clip: padding-box;
  }
        color: var(--v-primary);

        &::after {
          content: "";
          position: absolute;
          bottom: calc(var(--content-tabs-border-width) * -1);
          left: 0;
          width: 100%;
          height: var(--content-tabs-active-indicator-height);
          &:not(.reset-colors) {
    background-color: var(--v-multiply-color-0);
    border-color: var(--v-multiply-color-1);
    background-clip: padding-box;
  }
        }
      }
      &:not(:has(:is(content-tabs-body, .tag-content-tabs-body):is([is-open], [aria-selected="true"])))
        :is(content-tabs-body, .tag-content-tabs-body):first-of-type,:is(content-tabs-body, .tag-content-tabs-body):is([is-open], [aria-selected="true"]) {
        border: var(--content-tabs-border-width) solid
          var(--content-tabs-border-color);
        padding: var(--content-tabs-body-padding);
        &:not(.reset-colors) {
    background-color: var(--v-multiply-color-0);
    border-color: var(--v-multiply-color-1);
    background-clip: padding-box;
  }
      }
    }
    /**
     * Paper / underline look — the active header gets a bottom accent
     * border instead of a bordered card.
     * @cssclass
     */
    &.underline {
      :is(content-tabs-header, .tag-content-tabs-header) {
        border-bottom: 2px solid transparent;
        padding: var(--content-tabs-header-padding);
        &:is([is-open], [aria-selected="true"]) {
          color: var(--v-primary);
          border-color: var(--v-primary-border);
        }
      }
      :is(content-tabs-body, .tag-content-tabs-body):is([is-open], [aria-selected="true"]) {
        margin-top: 8px;
      }
    }
  }
}

/* @import "@excom/provider-fetch/index.css"; */

/**
 * Styles for `<data-table>` and the plain structural tags that make up a
 * table: `<data-thead>`, `<data-tbody>`, `<data-tr>`, `<data-th>`,
 * `<data-td>`, `<data-tfoot>`, `<data-tf>`. Only `<data-table>` and
 * `<data-th>` are registered Neutron elements — the rest are inert custom
 * tags styled here so markup reads like a real `<table>`. Use the
 * `.tag-data-*` classes to apply the same styling to other elements
 * (e.g. a real `<table>` / `<tr>` / `<td>`).
 * @element data-table
 */

/* Aliases */
/* NOOP: we treat every `<data-th>` as sortable */

@layer {
  /* 1. Collapse border-spacing (opinionated)
     2. Drop table text-indent in Chrome, Edge, Safari */
  :where(:is(data-table, .tag-data-table)) {
    width: 100%;
    border-collapse: collapse; /* 1 */
    border-spacing: 0;
    text-indent: 0; /* 2 */
  }
  :is(data-table, .tag-data-table) {
    display: table;
    margin-bottom: var(--v-typography-spacing-vertical);

    :is(data-thead, .tag-data-thead) {
      display: table-header-group;
    }

    :is(data-th, .tag-data-th) {
      &:is(:is(:is(:is(data-th, .tag-data-th)))) {
        cursor: pointer;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
        &::after {
          white-space: pre-wrap;
          content: "▲\A▼";
          font-size: 0.6em;
          opacity: 0.5;
          margin-left: calc(var(--v-spacing) * 0.5);
          display: inline-block;
          vertical-align: text-bottom;
          text-align: center;
          width: 20px;
          line-height: 1em;
        }
      }
      &:is(:is([sort-direction="asc"], [aria-sort="ascending"]))::after {
        content: "▲";
        font-size: 0.85em;
        vertical-align: baseline;
      }
      &:is(:is([sort-direction="desc"], [aria-sort="descending"]))::after {
        content: "▼";
        font-size: 0.85em;
        vertical-align: baseline;
      }
    }

    :is(data-tbody, .tag-data-tbody) {
      display: table-row-group;
    }

    :is(data-tfoot, .tag-data-tfoot) {
      display: table-footer-group;
    }

    :is(data-tr, .tag-data-tr) {
      display: table-row;
    }

    :is(data-th, .tag-data-th),:is(data-td, .tag-data-td) {
      display: table-cell;
    }

    /* Corner cell radii */
    :is(data-tr, .tag-data-tr):first-of-type:not(:is(:is(data-thead, .tag-data-thead) ~ *,:is(data-tbody, .tag-data-tbody) ~ *) > :is(data-tr, .tag-data-tr)) {
      > :first-child {
        border-top-left-radius: var(--v-border-radius);
      }
      > :last-child {
        border-top-right-radius: var(--v-border-radius);
      }
    }
    :is(data-tr, .tag-data-tr):last-of-type:not(*:has(~ :is(data-tfoot, .tag-data-tfoot), ~ :is(data-tbody, .tag-data-tbody)) > :is(data-tr, .tag-data-tr)) {
      > * {
        border-bottom-width: 0;
      }
      > :first-child {
        border-bottom-left-radius: var(--v-border-radius);
      }
      > :last-child {
        border-bottom-right-radius: var(--v-border-radius);
      }
    }
    /* Cells */
    :is(data-th, .tag-data-th),:is(data-td, .tag-data-td) {
      padding: calc(var(--v-spacing) / 2) var(--v-spacing);
      border-bottom: var(--v-border-width) solid var(--v-table-border-color);
      background-color: var(--v-background-color);
      color: var(--v-color);
      font-weight: var(--v-font-weight);
      text-align: left;
      text-align: start;
    }

    /* Header */
    :is(data-thead, .tag-data-thead) {
      :is(data-th, .tag-data-th),:is(data-td, .tag-data-td) {
        border-bottom: var(--v-border-width) solid var(--v-table-border-color);
        border-top: 0;
      }
      /**
       * Sticky table header row.
       * @cssclass sticky
       */
      &.sticky :is(data-th, .tag-data-th) {
        position: sticky;
        z-index: 2;
        top: var(--v-table-sticky-top);
      }
    }

    /* Footer */
    :is(data-tfoot, .tag-data-tfoot) {
      :is(data-th, .tag-data-th),:is(data-td, .tag-data-td) {
        border-top: var(--v-border-width) solid var(--v-table-border-color);
        border-bottom: 0;
      }
    }

    /**
     * Alternating row background.
     * @cssclass striped
     */
    /* Striped */
    &.striped {
      :is(data-tbody, .tag-data-tbody) :is(data-tr, .tag-data-tr):nth-child(odd) :is(data-th, .tag-data-th),:is(data-tbody, .tag-data-tbody) :is(data-tr, .tag-data-tr):nth-child(odd) :is(data-td, .tag-data-td) {
        background-color: var(--v-table-row-stripped-background-color);
      }
    }
  }
  :is(data-table, .tag-data-table) {
    display: grid;
    /**
     * Column count for shared subgrid tracks. Auto-detected from the
     * widest row; set on the host to override.
     * @cssproperty --data-table-cols
     * @syntax <integer>
     */
    --data-table-cols-detected: 1;
    /* Leading columns hug content; last takes leftover so the table
       stays `width: 100%`. `1fr` on every track would equalize. */
    grid-template-columns:
      repeat(
        calc(1 - 1),
        auto
      )
      minmax(min-content, 1fr);
    grid-template-columns:
      repeat(
        calc(var(--data-table-cols, var(--data-table-cols-detected)) - 1),
        auto
      )
      minmax(min-content, 1fr);

    /* Widest row wins (later rules override). Author `--data-table-cols` wins. */
    &:has(:is(data-tr, .tag-data-tr) > :nth-child(2)) {
    --data-table-cols-detected: 2;
  }
    &:has(:is(data-tr, .tag-data-tr) > :nth-child(3)) {
    --data-table-cols-detected: 3;
  }
    &:has(:is(data-tr, .tag-data-tr) > :nth-child(4)) {
    --data-table-cols-detected: 4;
  }
    &:has(:is(data-tr, .tag-data-tr) > :nth-child(5)) {
    --data-table-cols-detected: 5;
  }
    &:has(:is(data-tr, .tag-data-tr) > :nth-child(6)) {
    --data-table-cols-detected: 6;
  }
    &:has(:is(data-tr, .tag-data-tr) > :nth-child(7)) {
    --data-table-cols-detected: 7;
  }
    &:has(:is(data-tr, .tag-data-tr) > :nth-child(8)) {
    --data-table-cols-detected: 8;
  }
    &:has(:is(data-tr, .tag-data-tr) > :nth-child(9)) {
    --data-table-cols-detected: 9;
  }
    &:has(:is(data-tr, .tag-data-tr) > :nth-child(10)) {
    --data-table-cols-detected: 10;
  }
    &:has(:is(data-tr, .tag-data-tr) > :nth-child(11)) {
    --data-table-cols-detected: 11;
  }
    &:has(:is(data-tr, .tag-data-tr) > :nth-child(12)) {
    --data-table-cols-detected: 12;
  }
    &:has(:is(data-tr, .tag-data-tr) > :nth-child(13)) {
    --data-table-cols-detected: 13;
  }
    &:has(:is(data-tr, .tag-data-tr) > :nth-child(14)) {
    --data-table-cols-detected: 14;
  }
    &:has(:is(data-tr, .tag-data-tr) > :nth-child(15)) {
    --data-table-cols-detected: 15;
  }
    &:has(:is(data-tr, .tag-data-tr) > :nth-child(16)) {
    --data-table-cols-detected: 16;
  }

    :is(data-thead, .tag-data-thead) > :is(data-tr, .tag-data-tr) {
      order: 0;
    }
    :is(data-tbody, .tag-data-tbody) > :is(data-tr, .tag-data-tr) {
      /**
       * Visual row order (1-based). Set by `<data-table>` on sort —
       * not meant to be set by hand.
       * @cssproperty
       * @syntax <integer>
       */
      order: var(--data-tr-order);
    }
    :is(data-tfoot, .tag-data-tfoot) > :is(data-tr, .tag-data-tr) {
      order: 9999;
    }

    :is(data-thead, .tag-data-thead),:is(data-tbody, .tag-data-tbody),:is(data-tfoot, .tag-data-tfoot) {
      display: contents;
    }
    :is(data-tr, .tag-data-tr) {
      /**
       * Row display. `<data-table>` sets `none` to hide filtered-out
       * rows — not meant to be set by hand.
       * @cssproperty
       * @syntax none | grid
       * @default grid
       */
      display: grid;
      display: var(--data-tr-display, grid);
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
      :is(data-th, .tag-data-th),:is(data-td, .tag-data-td),:is(data-tf, .tag-data-tf) {
        display: block;
        /* Borders via `:nth-of-type`; `order` only changes visual layout */
        border-bottom: var(--v-border-width) solid var(--v-table-border-color) !important;
        border-radius: 0 !important;
      }
    }
    &:not(:has(:is(data-tbody, .tag-data-tbody) :is(data-tr, .tag-data-tr) + :is(data-tr, .tag-data-tr))) {
      /* One row or none: don't look sortable */
      :is(data-th, .tag-data-th) {
        cursor: default;
        &::after {
          content: "";
        }
      }
    }
  }
}

/**
 * Pointer affordance when listening for click / mouse (or default click).
 * @element noop-tag
 */

/**
 * Styles for `<dialog-anchor>`.
 * @element dialog-anchor
 */

/* Aliases */

/**
 * Skip the pointer cursor from the listenable mixin.
 * @cssclass unstyled
 */
@layer {
  :is(dialog-anchor, .tag-dialog-anchor):not(.unstyled) {
    &[listen-for*="click"],
  &[listen-for*="mouse"],
  &:not([listen-for]):not([listen-for-lifecycle]) {
    cursor: pointer;
  }
  }
}
/**
 * Styles for `<event-handler>`.
 * @element event-handler
 */

/* Aliases */

/**
 * Skip the pointer cursor from the listenable mixin.
 * @cssclass unstyled
 */
@layer {
  :is(event-handler, .tag-event-handler):not(.unstyled) {
    &[listen-for*="click"],
  &[listen-for*="mouse"],
  &:not([listen-for]):not([listen-for-lifecycle]) {
    cursor: pointer;
  }
  }
}
/**
 * Styles for `<gesture-handler>`.
 * @element gesture-handler
 */

/* Aliases */

@layer {
  /* Registered so it interpolates: the settle after release is a transition
     on this property, not a script animating it frame by frame. */
  @property --gesture-progress {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  /**
   * The gesture surface. `touch-action` follows `gesture-types` so the
   * browser keeps the scrolling the element does not claim: `pan-x` leaves
   * vertical scroll native, `pan-y` horizontal, free `pan` / `pinch` /
   * `rotate` take everything. Override it in your own CSS when needed.
   */
  :is(gesture-handler, .tag-gesture-handler) {
    /**
     * Pointer centroid inside the element (px), horizontal — spotlight / parallax effects. Written every frame of a gesture; this is the resting value.
     * @cssproperty
     * @syntax <length>
     * @default 0px
     */
    --gesture-x: 0px;
    /**
     * Pointer centroid inside the element (px), vertical.
     * @cssproperty
     * @syntax <length>
     * @default 0px
     */
    --gesture-y: 0px;
    /**
     * Horizontal travel since the gesture started (px) — drag-to-move, swipe-to-dismiss.
     * @cssproperty
     * @syntax <length>
     * @default 0px
     */
    --gesture-dx: 0px;
    /**
     * Vertical travel since the gesture started (px).
     * @cssproperty
     * @syntax <length>
     * @default 0px
     */
    --gesture-dy: 0px;
    /**
     * Horizontal velocity over the last ~100 ms (px/ms).
     * @cssproperty
     * @syntax <number>
     * @default 0
     */
    --gesture-vx: 0;
    /**
     * Vertical velocity over the last ~100 ms (px/ms).
     * @cssproperty
     * @syntax <number>
     * @default 0
     */
    --gesture-vy: 0;
    /**
     * Travel along `progress-axis` as a fraction of the range, clamped to `progress-min`..`progress-max` — the value a scrubbable sheet, carousel or slider follows. Persists after release until the next gesture.
     * @cssproperty
     * @syntax <number>
     * @default 0
     */
    --gesture-progress: 0;
    /**
     * The measured range (`range-ref` size along the axis, or `range-px`). Written once, when the gesture starts.
     * @cssproperty
     * @syntax <length>
     * @default 0px
     */
    --gesture-range-px: 0px;
    /**
     * The element's own width, measured when the gesture starts.
     * @cssproperty
     * @syntax <length>
     * @default 0px
     */
    --gesture-width: 0px;
    /**
     * The element's own height, measured when the gesture starts.
     * @cssproperty
     * @syntax <length>
     * @default 0px
     */
    --gesture-height: 0px;
    /**
     * Two-finger pinch ratio (`1` = unchanged) — pinch-to-zoom.
     * @cssproperty
     * @syntax <number>
     * @default 1
     */
    --gesture-scale: 1;
    /**
     * Two-finger rotation — rotate-to-adjust.
     * @cssproperty
     * @syntax <angle>
     * @default 0deg
     */
    --gesture-rotate: 0deg;
    /**
     * Pointers currently down.
     * @cssproperty
     * @syntax <integer>
     * @default 0
     */
    --gesture-pointers: 0;

    /**
     * Length of the travel (px). Computed from `--gesture-dx` / `--gesture-dy`.
     * @cssproperty
     * @syntax <length>
     * @default hypot(var(--gesture-dx), var(--gesture-dy))
     */
    --gesture-distance: hypot(var(--gesture-dx), var(--gesture-dy));
    /**
     * Direction of the travel: `0deg` right, `90deg` down. Computed from `--gesture-dx` / `--gesture-dy`.
     * @cssproperty
     * @syntax <angle>
     * @default atan2(var(--gesture-dy), var(--gesture-dx))
     */
    --gesture-angle: atan2(var(--gesture-dy), var(--gesture-dx));
    /**
     * `--gesture-progress` in px. Computed from `--gesture-progress` and `--gesture-range-px`.
     * @cssproperty
     * @syntax <length>
     * @default calc(var(--gesture-progress) * var(--gesture-range-px))
     */
    --gesture-progress-px: calc(
      var(--gesture-progress) * var(--gesture-range-px)
    );
    /* `tan(atan2(a, b))` is `a / b`: dividing a length by a length is not
       portable in `calc()`, the trig functions are. */
    /**
     * `--gesture-x` as a 0..1 fraction of the element's width. Computed from `--gesture-x` and `--gesture-width`.
     * @cssproperty
     * @syntax <number>
     * @default tan(atan2(var(--gesture-x), var(--gesture-width)))
     */
    --gesture-x-ratio: tan(atan2(var(--gesture-x), var(--gesture-width)));
    /**
     * `--gesture-y` as a 0..1 fraction of the element's height. Computed from `--gesture-y` and `--gesture-height`.
     * @cssproperty
     * @syntax <number>
     * @default tan(atan2(var(--gesture-y), var(--gesture-height)))
     */
    --gesture-y-ratio: tan(atan2(var(--gesture-y), var(--gesture-height)));

    /**
     * How long `--gesture-progress` takes to settle on its snap point after release.
     * @cssproperty
     * @syntax <time>
     * @default 200ms
     */
    --gesture-snap-duration: 200ms;
    /**
     * Easing of that settle.
     * @cssproperty
     * @syntax <easing-function>
     * @default ease-out
     */
    --gesture-snap-ease: ease-out;

    display: block;
    touch-action: pan-x pan-y pinch-zoom;
    /* The release settles here, not in script; `gesture-handler-snap` fires
       when this transition finishes. */
    transition: --gesture-progress 200ms
      ease-out;
    transition: --gesture-progress var(--gesture-snap-duration)
      var(--gesture-snap-ease);

    &[gesture-types~="pan-x"] {
      touch-action: pan-y;
    }
    &[gesture-types~="pan-y"] {
      touch-action: pan-x;
    }
    &:not([gesture-types]),
    &[gesture-types~="pan"],
    &[gesture-types~="pinch"],
    &[gesture-types~="rotate"] {
      touch-action: none;
    }
    /* `handoff-ref` needs its containers to scroll natively until they run
       out — the element cancels the touch itself the moment the overscroll
       hands over, so `touch-action` stays out of the way here. Give a
       `from-ref` handle `touch-action: none` of its own. */
    &[handoff-ref] {
      touch-action: auto;
    }
    /* No text selection / image drag while a gesture is tracked, and never
       ease the finger: the transition is only for the release. */
    &:is([is-active], [data-active]) {
      -webkit-user-select: none;
         -moz-user-select: none;
              user-select: none;
      -webkit-user-drag: none;
      transition: none;
    }
  }
}

/**
 * Shared styles for `RenderableElement` hosts. Hide while
 * `delaying-ready` (waiting on `ready-on`).
 */

/**
 * Styles for `<include-content>`.
 * @element include-content
 */

/* Aliases */

@layer {
  :root {
    /**
     * Fade-in duration.
     * @cssproperty
     * @syntax <time>
     * @default 0.15s
     */
    --include-content-transition-duration: var(
      --v-transition-duration-fast,
      0.15s
    );
    /**
     * Fade-in easing.
     * @cssproperty
     * @syntax *
     * @default ease-in
     */
    --include-content-transition-ease: var(--v-transition-ease-out, ease-in);
  }
  :is(include-content, .tag-include-content) {
    display: block;

    &:is([lazy-load], [data-lazy-load]),
    &:is([lazy-unload], [data-lazy-unload]) {
      min-height: 10px;
      min-width: 10px;
    }

    /**
     * Skip the built-in fade — bring your own animation / view transition.
     * Also opts-out if the element is portalling content elsewhere ([host-ref])
     * @cssclass instant
     */
    &:not(.instant):not([host-ref]) {
      opacity: 0;
      transition: opacity var(--include-content-transition-duration)
        var(--include-content-transition-ease);

      &:is([did-load], [data-did-load]):is([is-active], [aria-current]) {
        &:is([host-ref="shadow"], [data-host-ref="shadow"]),
        &:has(> *:not(template)) {
          opacity: 1;
        }
      }
    }

    &[delaying-ready] {
    /* Always hide, even against later display rules */
    display: none !important;
  }
  }
}

/* @import "@excom/mapbox-view/index.css"; */

/* Selector aliases. */

@layer {
  :is(quark-sheet, .tag-quark-sheet) {
    display: none;
  }
}

/**
 * Styles for `<scroll-into-view>`.
 * @element scroll-into-view
 */

/* Aliases */
/**
 * Apply `<scroll-into-view>` host styles (positioning + the inherited
 * pointer cursor when clickable) to any element, without registering the
 * custom element — e.g. server-rendered markup.
 * @cssalias
 */

@layer {
  :is(scroll-into-view, .tag-scroll-into-view) {
    display: block;
    position: relative;
    &[listen-for*="click"],
  &[listen-for*="mouse"],
  &:not([listen-for]):not([listen-for-lifecycle]) {
    cursor: pointer;
  }
  }
}

/**
 * Styles for `<spa-route>` and `<spa-a>`.
 * @element spa-route
 */

/* Aliases */

@layer {
  :is(spa-route, .tag-spa-route) {
    display: block;
    &:not([is-active][was-active]) {
      /* Don't hide the route that's being re-activated */
      &[delaying-ready] {
    /* Always hide, even against later display rules */
    display: none !important;
  }
    }
  }
  :is(spa-a, .tag-spa-a) {
    &[listen-for*="click"],
  &[listen-for*="mouse"],
  &:not([listen-for]):not([listen-for-lifecycle]) {
    cursor: pointer;
  }
  }
}

/* @import "@excom/super-form/index.css"; */
/* @import "@excom/super-img/index.css"; */
/**
 * Styles for `<super-input>`.
 * @element super-input
 */

/* Aliases */

@layer {
  :root {
    /**
     * Foreground / label color.
     * @cssproperty
     * @syntax <color>
     */
    --super-input-color: var(--v-color, inherit);
    /**
     * Surface background behind the control (and raised-label mask).
     * @cssproperty
     * @syntax <color>
     */
    --super-input-bg: var(--v-form-element-background-color, transparent);
    /**
     * Default border color for raised inputs.
     * @cssproperty
     * @syntax <color>
     */
    --super-input-border-color: var(
      --v-form-element-border-color,
      currentColor
    );
    /**
     * Focus ring / focus border color.
     * @cssproperty
     * @syntax <color>
     */
    --super-input-focus-color: var(
      --v-form-element-focus-color,
      var(--super-input-border-color)
    );
    /**
     * Corner radius for raised inputs.
     * @cssproperty
     * @syntax <length>
     */
    --super-input-border-radius: var(--v-border-radius, 4px);
    /**
     * Border width for raised inputs.
     * @cssproperty
     * @syntax <length>
     */
    --super-input-border-width: var(--v-border-width, 1px);
    /**
     * Duration for border / label transitions.
     * @cssproperty
     * @syntax <time>
     */
    --super-input-transition-duration: var(--v-transition-duration-fast, 0.15s);
    /**
     * Easing for border / label transitions.
     * @cssproperty
     * @syntax *
     */
    --super-input-transition-ease: var(--v-transition-ease-out, ease-out);
    /**
     * Accent color (range fill, thumb border, focus chrome).
     * @cssproperty
     * @syntax <color>
     */
    --super-input-primary: var(--v-primary, blue);
    /**
     * Gap between a floating label and the control.
     * @cssproperty
     * @syntax <length>
     */
    --super-input-label-margin-bottom: calc(21px * 0.375);
    /**
     * Base font size for the control and value readout.
     * @cssproperty
     * @syntax <length>
     */
    --super-input-font-size: 16px;
    /**
     * Computed label line box height (used when a `<label>` is present).
     * @cssproperty
     * @syntax <length>
     */
    --super-input-label-height: calc(
      var(--v-line-height, 1.5) * var(--super-input-font-size)
    );
  }
  :is(super-input, .tag-super-input) {
    &:has(input[type="range"]) {
      /**
       * Host height for range layout (thumb + value readout).
       * @cssproperty
       * @syntax <length>
       */
      --super-input-height: calc(var(--super-input-thumb-size) + 36px);
      /**
       * Host width for range layout.
       * @cssproperty
       * @syntax <length> | <percentage>
       */
      --super-input-width: 100%;
      /**
       * Range minimum. Prefer setting on the host (or via CSS): CSS cannot
       * read the child input's `min` attribute from the parent.
       * @cssproperty
       * @syntax <number>
       */
      --super-input-min: 0;
      /**
       * Range maximum. Prefer setting on the host (or via CSS).
       * @cssproperty
       * @syntax <number>
       */
      --super-input-max: 100;
      /**
       * Current range value used for fill / readout positioning. With
       * `reflect-value`, may be driven from `attr(current-value)` where
       * typed `attr()` is supported.
       * @cssproperty
       * @syntax <number>
       */
      --super-input-value: 50;
      /* START this will not work in safari or firefox yet */
      --super-input-value: attr(current-value type(<number>));
      /* END */
      /** @internal */
      --super-input-zero: calc(
        var(--super-input-value) - var(--super-input-min, 0)
      );
      /** @internal */
      --super-input-range: calc(
        var(--super-input-max, 100) - var(--super-input-min, 0)
      );
      /** @internal */
      --super-input-number-raw: calc(
        calc(var(--super-input-zero) / var(--super-input-range)) *
          calc(var(--super-input-width) - var(--super-input-thumb-size))
      );
      /** @internal Fill / readout progress position along the track. */
      --super-input-progress: calc(
        var(--super-input-number-raw) + calc(var(--super-input-thumb-size) / 2)
      );
      /**
       * Diameter of the range thumb.
       * @cssproperty
       * @syntax <length>
       */
      --super-input-thumb-size: 44px;
      /**
       * Range thumb fill color.
       * @cssproperty
       * @syntax <color>
       */
      --super-input-thumb-color: var(
        --v-range-thumb-color,
        var(--super-input-bg)
      );
      /**
       * Active track / accent color for the range fill.
       * @cssproperty
       * @syntax <color>
       */
      --super-input-accent: var(--super-input-primary, blue);

      /**
       * Height of the range track.
       * @cssproperty
       * @syntax <length>
       */
      --super-input-track-height: 2px;

      /** @internal */
      --super-input-value-content: attr(current-value);
      /** @internal */
      --super-input-value-bottom: var(--super-input-thumb-size);
      /** @internal */
      --super-input-value-transform: translate(-50%, 0);

      display: block;
      position: relative;
      box-sizing: border-box;
      font-size: var(--super-input-font-size);
      /**
       * Font weight for the range value readout.
       * @cssproperty --super-input-font-weight
       * @syntax <number> | <integer>
       * @default 700
       */
      font-weight: 700;
      font-weight: var(--super-input-font-weight, 700);
      height: calc(44px + 36px);
      height: var(--super-input-height, 100%);
      width: 100%;
      width: var(--super-input-width, 100%);
      &:has(label) {
        padding-top: calc(
          var(--super-input-label-height) + 100%
        );
        padding-top: calc(
          var(--super-input-label-height) + var(--super-input-height, 100%)
        );
        label {
          position: absolute;
          margin: 0;
          top: 0;
          left: 0;
        }
      }

      input,
      &::before {
        position: absolute;
        bottom: calc(var(--super-input-thumb-size) / 2);
      }
      &::before {
        position: absolute;
        display: block;
        box-sizing: border-box;
        text-align: center;
        padding-bottom: var(--super-input-label-margin-bottom);
        bottom: var(--super-input-value-bottom);
        left: var(--super-input-progress);
        content: var(--super-input-value-content);
        transform: var(--super-input-value-transform);
      }
      input {
        box-sizing: border-box;
        margin: 0;
        width: 100%;
        background: var(--super-input-bg);
        height: var(--super-input-track-height);
        outline: none;
        z-index: 2;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        /* Don't combine webkit + moz selectors; identical blocks still break WebKit. */
        &::-webkit-slider-runnable-track {
          height: var(--super-input-track-height);
          line-height: normal;
          background: linear-gradient(
    to right,
    var(--super-input-accent) 0%,
    var(--super-input-accent) 50%,
    transparent 50%,
    transparent 100%
  );
          background: linear-gradient(
    to right,
    var(--super-input-accent) 0%,
    var(--super-input-accent) var(--super-input-progress, 50%),
    transparent var(--super-input-progress, 50%),
    transparent 100%
  );
        }
        &::-moz-range-track {
          height: var(--super-input-track-height);
          line-height: normal;
          background: linear-gradient(
    to right,
    var(--super-input-accent) 0%,
    var(--super-input-accent) 50%,
    transparent 50%,
    transparent 100%
  );
          background: linear-gradient(
    to right,
    var(--super-input-accent) 0%,
    var(--super-input-accent) var(--super-input-progress, 50%),
    transparent var(--super-input-progress, 50%),
    transparent 100%
  );
        }
        &::-webkit-slider-thumb {
          margin: calc(
      calc(var(--super-input-thumb-size) * -0.5) +
        var(--super-input-track-height)
    )
    0 0 0;
          box-sizing: border-box;
          cursor: grab;
          width: var(--super-input-thumb-size);
          height: var(--super-input-thumb-size);
          background: var(--super-input-thumb-color);
          border-radius: 100%;
          border-radius: var(--super-input-thumb-radius, 100%);
          border: var(
    --super-input-thumb-border,
    var(--super-input-border-width) solid var(--super-input-primary)
  );
          -webkit-appearance: none;
          appearance: none;
        }
        &::-moz-range-thumb {
          margin: calc(
      calc(var(--super-input-thumb-size) * -0.5) +
        var(--super-input-track-height)
    )
    0 0 0;
          box-sizing: border-box;
          cursor: grab;
          width: var(--super-input-thumb-size);
          height: var(--super-input-thumb-size);
          background: var(--super-input-thumb-color);
          border-radius: 100%;
          border-radius: var(--super-input-thumb-radius, 100%);
          border: var(
    --super-input-thumb-border,
    var(--super-input-border-width) solid var(--super-input-primary)
  );
          -webkit-appearance: none;
          -moz-appearance: none;
               appearance: none;
        }
      }
    }

    /**
     * Raised / floating-label text field appearance. Apply as
     * `class="raised"` on `<super-input>` wrapping a text-like `<input>`.
     * @cssclass
     */
    &.raised {
      display: block;
      position: relative;
      margin-top: 8px;

      input {
        &:not(.reset-colors) {
    background-color: var(--v-multiply-color-0);
    border-color: var(--v-multiply-color-1);
    background-clip: padding-box;
  }
        font-size: 1rem;
        padding: 0 10px 0 10px;
        outline: none;
        border-radius: var(--super-input-border-radius);
        color: var(--super-input-color);
        border: var(--super-input-border-width) solid
          var(--super-input-border-color);
        transition: border-color var(--super-input-transition-duration)
          var(--super-input-transition-ease);
        &:focus {
          border-color: var(--super-input-focus-color) !important;
        }
        &::-moz-placeholder {
          -moz-transition: color var(--super-input-transition-duration)
            var(--super-input-transition-ease);
          transition: color var(--super-input-transition-duration)
            var(--super-input-transition-ease);
        }
        &::placeholder {
          transition: color var(--super-input-transition-duration)
            var(--super-input-transition-ease);
        }
      }
      label {
        position: absolute;
        margin: 0;
        font-size: 0.9rem;
        line-height: 16px;
        line-height: var(--v-line-height, 16px);
        top: -14px;
        left: 10px;
        background: transparent;
        color: var(--super-input-color);
        padding: 0 3px;
        pointer-events: none;
        z-index: 1;
        transition:
          top var(--super-input-transition-duration)
            var(--super-input-transition-ease),
          font-size var(--super-input-transition-duration)
            var(--super-input-transition-ease);
        &::after {
          /* a line to hide input border behind label */
          content: "";
          position: absolute;
          top: 12px;
          left: 0;
          width: 100%;
          height: 4px;
          z-index: -1;
          background-color: var(--super-input-bg);
        }
      }

      /* `[reflect-value]`: raised label even with no placeholder */
      &:not(:is([reflect-value],
  [data-reflect-value])):has(input:-moz-placeholder):not(
          :has(input:focus)
        ) {
        label {
          font-size: 1rem;
          top: 16px;
          &::after {
            content: none;
          }
        }
        input::placeholder {
          color: transparent;
        }
      }
      &:is([reflect-value],
  [data-reflect-value]):not(:is([current-value],
  [data-current-value])):not(
          :has(input:focus)
        ),
      
      &:not(:is([reflect-value],
  [data-reflect-value])):has(input:placeholder-shown):not(
          :has(input:focus)
        ) {
        label {
          font-size: 1rem;
          top: 16px;
          &::after {
            content: none;
          }
        }
        input::-moz-placeholder {
          color: transparent;
        }
        input::placeholder {
          color: transparent;
        }
      }
    }
  }
}

/* @import "@excom/detect-features/index.css"; */