/*!
 * Vitre CSS v1.4.0
 * Classless CSS with a high-end finish.
 * MIT License
 */

@layer vitre.reset, vitre.theme, vitre.light, vitre.dark, vitre.base, vitre.elements;

@layer vitre.reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  button,
  input,
  textarea,
  select {
    font: inherit;
  }
}

@layer vitre.theme {
  :root {
    color-scheme: light dark;

    --vitre-font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Ubuntu", "Cantarell", "Noto Sans", "Roboto", ui-sans-serif, system-ui, sans-serif;
    --vitre-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --vitre-font-weight: 400;
    --vitre-leading: 1.65;
    --vitre-measure: 72ch;

    --vitre-step--1: clamp(0.88rem, 0.85rem + 0.12vw, 0.94rem);
    --vitre-step-0: clamp(1rem, 0.97rem + 0.18vw, 1.1rem);
    --vitre-step-1: clamp(1.2rem, 1.1rem + 0.48vw, 1.48rem);
    --vitre-step-2: clamp(1.44rem, 1.25rem + 0.88vw, 1.98rem);
    --vitre-step-3: clamp(1.73rem, 1.42rem + 1.48vw, 2.65rem);
    --vitre-step-4: clamp(2.07rem, 1.56rem + 2.45vw, 3.52rem);

    --vitre-space-1: 0.25rem;
    --vitre-space-2: 0.5rem;
    --vitre-space-3: 0.75rem;
    --vitre-space-4: 1rem;
    --vitre-space-5: 1.5rem;
    --vitre-space-6: 2rem;
    --vitre-space-7: 3rem;
    --vitre-nav-gap: var(--vitre-space-5);

    --vitre-radius-sm: 0.45rem;
    --vitre-radius: 0.75rem;
    --vitre-radius-lg: 1rem;
    --vitre-border-width: 1px;

    --vitre-hue: 214;
    --vitre-primary: hsl(var(--vitre-hue) 88% 56%);
    --vitre-primary-ink: hsl(0 0% 100%);
    --vitre-danger: hsl(356 72% 52%);
    --vitre-success: hsl(152 58% 38%);
    --vitre-warning: hsl(38 92% 48%);
    --vitre-inserted: var(--vitre-success);
    --vitre-inserted-bg: color-mix(in oklab, var(--vitre-success), transparent 86%);
    --vitre-deleted: var(--vitre-danger);
    --vitre-deleted-bg: color-mix(in oklab, var(--vitre-danger), transparent 88%);
    --vitre-alert: var(--vitre-danger);
    --vitre-alert-bg: color-mix(in oklab, var(--vitre-danger), transparent 88%);
    --vitre-status: var(--vitre-success);
    --vitre-status-bg: color-mix(in oklab, var(--vitre-success), transparent 88%);
    --vitre-note: var(--vitre-warning);
    --vitre-note-bg: color-mix(in oklab, var(--vitre-warning), transparent 86%);
    --vitre-busy-color: currentColor;
    --vitre-busy-size: 1em;
    --vitre-busy-border-width: 2px;

    --vitre-focus-color: color-mix(in oklab, var(--vitre-primary), transparent 70%);
    --vitre-focus: 0 0 0 3px var(--vitre-focus-color);
    --vitre-backdrop-blur: blur(18px) saturate(160%);

    --vitre-page-glow: color-mix(in oklab, var(--vitre-primary), transparent 78%);
    --vitre-page-tint: color-mix(in oklab, var(--vitre-bg), var(--vitre-primary) 5%);
    --vitre-link-decoration: color-mix(in oklab, var(--vitre-primary), transparent 55%);
    --vitre-abbr-decoration: color-mix(in oklab, var(--vitre-primary), transparent 35%);
    --vitre-kbd-shadow: color-mix(in oklab, var(--vitre-border), transparent 20%);
    --vitre-code-bg-end: color-mix(in oklab, var(--vitre-code-bg), black 3%);
    --vitre-invalid-focus: color-mix(in oklab, var(--vitre-danger), transparent 78%);
    --vitre-valid-border: color-mix(in oklab, var(--vitre-success), var(--vitre-border) 35%);
    --vitre-button-border: color-mix(in oklab, var(--vitre-primary), var(--vitre-border) 45%);
    --vitre-button-bg: var(--vitre-primary);
    --vitre-button-bg-start: color-mix(in oklab, var(--vitre-primary), white 24%);
    --vitre-button-bg-end: color-mix(in oklab, var(--vitre-primary), black 8%);
    --vitre-button-bg-angle: 180deg;
    --vitre-button-bg-image: linear-gradient(var(--vitre-button-bg-angle), var(--vitre-button-bg-start), var(--vitre-button-bg-end));
    --vitre-button-hover-border: color-mix(in oklab, var(--vitre-primary), white 26%);
    --vitre-button-hover-glow: color-mix(in oklab, var(--vitre-primary), transparent 70%);
    --vitre-button-hover-glow-shadow: 0 6px 20px var(--vitre-button-hover-glow);
    --vitre-button-hover-drop-shadow: 0 3px 10px hsl(0 0% 0% / 0.16);
    --vitre-button-hover-shadow: var(--vitre-button-hover-glow-shadow), var(--vitre-button-hover-drop-shadow);
    --vitre-busy-border: color-mix(in oklab, var(--vitre-busy-color), transparent 70%);
    --vitre-table-foot-bg: color-mix(in oklab, var(--vitre-surface-soft), var(--vitre-primary) 4%);
    --vitre-table-row-hover: color-mix(in oklab, var(--vitre-primary), transparent 94%);
    --vitre-alert-border: color-mix(in oklab, var(--vitre-alert), var(--vitre-border) 45%);
    --vitre-status-border: color-mix(in oklab, var(--vitre-status), var(--vitre-border) 45%);
    --vitre-note-border: color-mix(in oklab, var(--vitre-note), var(--vitre-border) 45%);
    --vitre-alert-accent-width: 0.32rem;

    --vitre-control-bg: var(--vitre-surface-strong);
    --vitre-control-border: var(--vitre-border);
    --vitre-control-text: var(--vitre-text);
    --vitre-control-placeholder: var(--vitre-subtle);
    --vitre-control-height: 2.75rem;
    --vitre-button-height: 36px;
    --vitre-button-font-size: 14px;
    --vitre-button-padding-inline: 1rem;

  }
}

@layer vitre.light {
  :root,
  html[data-theme="light"] {
    color-scheme: light;
    --vitre-bg: hsl(210 32% 98%);
    --vitre-surface: hsl(0 0% 100% / 0.78);
    --vitre-surface-strong: hsl(0 0% 100% / 0.94);
    --vitre-surface-soft: hsl(214 50% 96% / 0.72);
    --vitre-text: hsl(222 38% 14%);
    --vitre-muted: hsl(218 16% 43%);
    --vitre-subtle: hsl(215 18% 58%);
    --vitre-border: hsl(218 28% 82% / 0.82);
    --vitre-border-strong: hsl(217 25% 72% / 0.95);
    --vitre-glass: hsl(0 0% 100% / 0.58);
    --vitre-glass-border: hsl(0 0% 100% / 0.6);
    --vitre-mark: hsl(48 100% 77% / 0.72);
    --vitre-shadow: 0 18px 48px hsl(222 35% 18% / 0.1);
    --vitre-shadow-sm: 0 8px 24px hsl(222 35% 18% / 0.08);
    --vitre-code-bg: hsl(220 33% 95%);
    --vitre-code-text: hsl(224 48% 22%);
    --vitre-code-border: hsl(218 28% 82% / 0.72);
  }
}

@layer vitre.dark {
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --vitre-bg: hsl(224 26% 8%);
      --vitre-surface: hsl(224 20% 14% / 0.76);
      --vitre-surface-strong: hsl(224 20% 16% / 0.94);
      --vitre-surface-soft: hsl(220 24% 18% / 0.72);
      --vitre-text: hsl(210 35% 94%);
      --vitre-muted: hsl(216 16% 70%);
      --vitre-subtle: hsl(216 13% 58%);
      --vitre-border: hsl(216 18% 32% / 0.82);
      --vitre-border-strong: hsl(216 20% 43% / 0.92);
      --vitre-glass: hsl(224 20% 20% / 0.52);
      --vitre-glass-border: hsl(0 0% 100% / 0.14);
      --vitre-mark: hsl(48 100% 60% / 0.22);
      --vitre-shadow: 0 18px 54px hsl(0 0% 0% / 0.36);
      --vitre-shadow-sm: 0 8px 28px hsl(0 0% 0% / 0.28);
      --vitre-code-bg: hsl(224 24% 12%);
      --vitre-code-text: hsl(210 35% 92%);
      --vitre-code-border: hsl(216 18% 32% / 0.85);
    }
  }

  html[data-theme="dark"] {
    color-scheme: dark;
    --vitre-bg: hsl(224 26% 8%);
    --vitre-surface: hsl(224 20% 14% / 0.76);
    --vitre-surface-strong: hsl(224 20% 16% / 0.94);
    --vitre-surface-soft: hsl(220 24% 18% / 0.72);
    --vitre-text: hsl(210 35% 94%);
    --vitre-muted: hsl(216 16% 70%);
    --vitre-subtle: hsl(216 13% 58%);
    --vitre-border: hsl(216 18% 32% / 0.82);
    --vitre-border-strong: hsl(216 20% 43% / 0.92);
    --vitre-glass: hsl(224 20% 20% / 0.52);
    --vitre-glass-border: hsl(0 0% 100% / 0.14);
    --vitre-mark: hsl(48 100% 60% / 0.22);
    --vitre-shadow: 0 18px 54px hsl(0 0% 0% / 0.36);
    --vitre-shadow-sm: 0 8px 28px hsl(0 0% 0% / 0.28);
    --vitre-code-bg: hsl(224 24% 12%);
    --vitre-code-text: hsl(210 35% 92%);
    --vitre-code-border: hsl(216 18% 32% / 0.85);
  }
}

@layer vitre.base {
  html {
    min-block-size: 100%;
    accent-color: var(--vitre-primary);
    background:
      radial-gradient(circle at top left, var(--vitre-page-glow), transparent 34rem),
      linear-gradient(135deg, var(--vitre-bg), var(--vitre-page-tint));
  }

  body {
    min-block-size: 100%;
    color: var(--vitre-text);
    font-family: var(--vitre-font-sans);
    font-size: var(--vitre-step-0);
    font-weight: var(--vitre-font-weight);
    line-height: var(--vitre-leading);
    text-rendering: optimizeLegibility;
  }

  body > :where(header, main, footer),
  body > :where(article, section, aside, nav) {
    inline-size: min(100% - 2rem, var(--vitre-measure));
    margin-inline: auto;
  }

  body > header {
    padding-block-start: var(--vitre-space-6);
  }

  body > :where(main, footer) {
    padding-block: var(--vitre-space-6);
  }

  body > :where(main, article, section, aside) {
    display: flow-root;
  }

  :where(main, article, aside, nav, search, form, fieldset, blockquote, table, pre, details, dialog, [role="dialog"], [role="alert"], [role="status"], [role="note"]) {
    margin-block: var(--vitre-space-5);
  }

  :where(h1, h2, h3, h4, h5, h6, hgroup, p, ul, ol, menu, dl, figure, blockquote, pre, table, form, search, details, [role="alert"], [role="status"], [role="note"]) + :where(h1, h2, h3, h4, h5, h6, hgroup, p, ul, ol, menu, dl, figure, blockquote, pre, table, form, search, details, [role="alert"], [role="status"], [role="note"]) {
    margin-block-start: var(--vitre-space-4);
  }

  :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--vitre-focus);
  }

  nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vitre-nav-gap);
  }

  :target {
    scroll-margin-block: var(--vitre-space-7);
  }

  ::selection {
    color: var(--vitre-primary-ink);
    background: var(--vitre-primary);
  }
}

@layer vitre.elements {
  :where(h1, h2, h3, h4, h5, h6) {
    color: var(--vitre-text);
    font-weight: 760;
    line-height: 1.1;
    text-wrap: balance;
  }

  h1 {
    font-size: var(--vitre-step-4);
    letter-spacing: -0.015em;
  }

  h2 {
    font-size: var(--vitre-step-3);
  }

  h3 {
    font-size: var(--vitre-step-2);
  }

  h4 {
    font-size: var(--vitre-step-1);
  }

  :where(h5, h6) {
    color: var(--vitre-muted);
    font-size: var(--vitre-step-0);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  hgroup > :where(h1, h2, h3, h4, h5, h6, p) {
    margin-block: 0;
  }

  hgroup > :where(p, time) {
    display: block;
    margin-block-start: var(--vitre-space-2);
    color: var(--vitre-subtle);
    font-size: var(--vitre-step--1);
  }

  p {
    color: var(--vitre-muted);
  }

  a {
    color: var(--vitre-primary);
    text-decoration-color: var(--vitre-link-decoration);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
  }

  a:hover {
    text-decoration-color: currentColor;
  }

  :where(strong, b) {
    color: var(--vitre-text);
    font-weight: 720;
  }

  :where(small, figcaption, caption, time) {
    color: var(--vitre-subtle);
    font-size: var(--vitre-step--1);
  }

  address {
    color: var(--vitre-muted);
    font-style: normal;
  }

  abbr[title] {
    cursor: help;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--vitre-abbr-decoration);
    text-underline-offset: 0.16em;
  }

  :where(del, ins) {
    border-radius: var(--vitre-radius-sm);
    padding-inline: 0.18em;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.14em;
  }

  del {
    color: var(--vitre-deleted);
    background: var(--vitre-deleted-bg);
  }

  ins {
    color: var(--vitre-inserted);
    background: var(--vitre-inserted-bg);
    text-decoration-line: underline;
  }

  :where(sub, sup) {
    position: relative;
    font-size: 0.75em;
    line-height: 0;
    vertical-align: baseline;
  }

  sub {
    inset-block-end: -0.25em;
  }

  sup {
    inset-block-start: -0.5em;
  }

  dt {
    color: var(--vitre-text);
    font-weight: 720;
  }

  dd {
    color: var(--vitre-muted);
  }

  dd + dt {
    margin-block-start: var(--vitre-space-3);
  }

  mark {
    border-radius: var(--vitre-radius-sm);
    padding: 0.08em 0.22em;
    color: inherit;
    background: var(--vitre-mark);
  }

  mark[data-token] {
    display: inline-block;
    inline-size: 7rem;
    block-size: 2rem;
    border: var(--vitre-border-width) solid var(--vitre-border);
    padding: 0;
    vertical-align: middle;
    box-shadow: inset 0 0 0 1px hsl(0 0% 100% / 0.18);
  }

  mark[data-token="primary"] {
    background: var(--vitre-primary);
  }

  mark[data-token="bg"] {
    background: var(--vitre-bg);
  }

  mark[data-token="surface"] {
    background: var(--vitre-surface);
  }

  mark[data-token="text"] {
    background: var(--vitre-text);
  }

  mark[data-token="muted"] {
    background: var(--vitre-muted);
  }

  mark[data-token="border"] {
    background: var(--vitre-border);
  }

  mark[data-token="code-bg"] {
    background: var(--vitre-code-bg);
  }

  hr {
    border: 0;
    border-block-start: var(--vitre-border-width) solid var(--vitre-border);
    margin-block: var(--vitre-space-6);
  }

  :where(ul, ol, menu) {
    padding-inline-start: 1.35em;
  }

  :where(li + li) {
    margin-block-start: var(--vitre-space-1);
  }

  blockquote {
    border: var(--vitre-border-width) solid var(--vitre-border);
    border-inline-start: 0.32rem solid var(--vitre-primary);
    border-radius: var(--vitre-radius-lg);
    padding: var(--vitre-space-5);
    color: var(--vitre-muted);
    background: var(--vitre-glass);
    box-shadow: var(--vitre-shadow-sm);
    backdrop-filter: var(--vitre-backdrop-blur);
  }

  :where(code, kbd, samp) {
    border: var(--vitre-border-width) solid var(--vitre-code-border);
    border-radius: var(--vitre-radius-sm);
    padding: 0.12em 0.34em;
    color: var(--vitre-code-text);
    font-family: var(--vitre-font-mono);
    font-size: 0.9em;
    background: var(--vitre-code-bg);
  }

  kbd {
    box-shadow: inset 0 -0.12em 0 var(--vitre-kbd-shadow);
  }

  pre {
    overflow: auto;
    border: var(--vitre-border-width) solid var(--vitre-code-border);
    border-radius: var(--vitre-radius-lg);
    padding: var(--vitre-space-5);
    color: var(--vitre-code-text);
    background: linear-gradient(145deg, var(--vitre-code-bg), var(--vitre-code-bg-end));
    box-shadow: var(--vitre-shadow-sm);
  }

  pre code {
    border: 0;
    padding: 0;
    background: transparent;
  }

  :where(button, input, textarea, select, output) {
    color: var(--vitre-control-text);
  }

  :where(button, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) {
    border: var(--vitre-border-width) solid var(--vitre-control-border);
    border-radius: var(--vitre-radius);
    background: var(--vitre-control-bg);
    box-shadow: var(--vitre-shadow-sm);
  }

  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select) {
    min-block-size: var(--vitre-control-height);
    padding-inline: var(--vitre-space-4);
    font-weight: 400;
  }

  textarea {
    min-block-size: 8rem;
    padding: var(--vitre-space-3) var(--vitre-space-4);
    font-weight: 400;
    resize: vertical;
  }

  :where(input, textarea)::placeholder {
    color: var(--vitre-control-placeholder);
  }

  label {
    display: inline-grid;
    gap: var(--vitre-space-2);
    color: var(--vitre-muted);
    font-size: var(--vitre-step--1);
    font-weight: 650;
  }

  label:has(:where(input[type="checkbox"], input[type="radio"])) {
    display: inline-flex;
    align-items: center;
    inline-size: auto;
  }

  label:has(:where(input:not([type="checkbox"]):not([type="radio"]), textarea, select, output, progress, meter)) {
    inline-size: 100%;
  }

  output {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--vitre-control-height);
    border: var(--vitre-border-width) solid var(--vitre-border);
    border-radius: var(--vitre-radius);
    padding-inline: var(--vitre-space-4);
    color: var(--vitre-text);
    font-weight: 650;
    background: var(--vitre-surface-soft);
  }

  :where(input, textarea, select):disabled,
  button:disabled {
    cursor: not-allowed;
    opacity: 0.58;
  }

  :where(input, textarea, select):user-invalid {
    border-color: var(--vitre-danger);
    box-shadow: 0 0 0 3px var(--vitre-invalid-focus);
  }

  :where(input, textarea, select):user-valid {
    border-color: var(--vitre-valid-border);
  }

  button,
  :where(input[type="button"], input[type="reset"], input[type="submit"]) {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vitre-space-2);
    min-block-size: var(--vitre-button-height);
    block-size: var(--vitre-button-height);
    border-color: var(--vitre-button-border);
    padding: 0 var(--vitre-button-padding-inline);
    color: var(--vitre-primary-ink);
    font-size: var(--vitre-button-font-size);
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    background-color: var(--vitre-button-bg);
    background-image: var(--vitre-button-bg-image);
    cursor: pointer;
    transition:
      transform 140ms ease,
      border-color 140ms ease,
      box-shadow 140ms ease,
      background-color 140ms ease;
  }

  button:not(:disabled):hover,
  :where(input[type="button"], input[type="reset"], input[type="submit"]):not(:disabled):hover {
    border-color: var(--vitre-button-hover-border);
    transform: translateY(-2px) scale(1.035);
    box-shadow: var(--vitre-button-hover-shadow);
  }

  button:not(:disabled):active,
  :where(input[type="button"], input[type="reset"], input[type="submit"]):not(:disabled):active {
    transform: translateY(0) scale(1.01);
  }

  :where(button, input[type="button"], input[type="reset"], input[type="submit"])[data-variant="flat"] {
    background-image: none;
  }

  :where(button, input[type="button"], input[type="reset"], input[type="submit"])[data-variant="outline"] {
    color: var(--vitre-primary);
    background-color: transparent;
    background-image: none;
  }

  :where(button, input[type="button"], input[type="reset"], input[type="submit"])[data-variant="ghost"],
  :where(button, input[type="button"], input[type="reset"], input[type="submit"])[data-variant="plain"] {
    border-color: transparent;
    color: var(--vitre-primary);
    background-color: transparent;
    background-image: none;
    --vitre-button-hover-glow-shadow: 0 0 0 hsl(0 0% 0% / 0);
    --vitre-button-hover-shadow: 0 0 0 hsl(0 0% 0% / 0);
  }

  :where(button, input[type="button"], input[type="reset"], input[type="submit"])[data-variant="plain"] {
    border-width: 0;
    color: currentColor;
  }

  :where(button, input[type="button"], input[type="reset"], input[type="submit"])[data-variant="ghost"]:not(:disabled):hover {
    background-color: color-mix(in oklab, currentColor, transparent 92%);
  }

  :where(button, input[type="button"], input[type="reset"], input[type="submit"])[data-variant="plain"]:not(:disabled):hover {
    border-color: transparent;
    transform: none;
    background-color: transparent;
    box-shadow: none;
  }

  :where(button, input[type="button"], input[type="reset"], input[type="submit"])[aria-busy="true"] {
    cursor: progress;
    opacity: 0.84;
  }

  button[aria-busy="true"]::before {
    content: "";
    inline-size: var(--vitre-busy-size);
    block-size: var(--vitre-busy-size);
    border: var(--vitre-busy-border-width) solid var(--vitre-busy-border);
    border-block-start-color: var(--vitre-busy-color);
    border-radius: 999px;
    animation: vitre-spin 720ms linear infinite;
  }

  :where(button, input[type="button"], input[type="reset"], input[type="submit"]) + :where(button, input[type="button"], input[type="reset"], input[type="submit"]) {
    margin-inline-start: var(--vitre-space-2);
  }

  :where(input[type="checkbox"], input[type="radio"]) {
    inline-size: 1.05em;
    block-size: 1.05em;
  }

  input[type="range"] {
    inline-size: 100%;
  }

  input[type="color"] {
    inline-size: 3rem;
    block-size: var(--vitre-control-height);
    padding: 0.25rem;
  }

  fieldset {
    border: var(--vitre-border-width) solid var(--vitre-border);
    border-radius: var(--vitre-radius-lg);
    padding: var(--vitre-space-5);
    background: var(--vitre-glass);
    box-shadow: var(--vitre-shadow-sm);
    backdrop-filter: var(--vitre-backdrop-blur);
  }

  legend {
    padding-inline: var(--vitre-space-2);
    color: var(--vitre-text);
    font-weight: 760;
  }

  form {
    display: grid;
    gap: var(--vitre-space-4);
  }

  search {
    display: block;
  }

  search form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--vitre-space-3);
  }

  search label {
    flex: 1 1 16rem;
  }

  form[role="group"] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--vitre-space-6);
  }

  form[role="group"] label {
    inline-size: auto;
  }

  fieldset > p:has(:where(input[type="checkbox"], input[type="radio"])) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vitre-space-4);
  }

  table {
    inline-size: 100%;
    border-collapse: collapse;
    overflow: clip;
    border: var(--vitre-border-width) solid var(--vitre-border);
    border-radius: var(--vitre-radius-lg);
    background: var(--vitre-surface);
    box-shadow: var(--vitre-shadow-sm);
  }

  caption {
    caption-side: bottom;
    padding-block-start: var(--vitre-space-3);
    text-align: start;
  }

  :where(th, td) {
    border-block-end: var(--vitre-border-width) solid var(--vitre-border);
    padding: 0.78rem 0.9rem;
    text-align: start;
    vertical-align: top;
  }

  th {
    color: var(--vitre-text);
    font-size: var(--vitre-step--1);
    font-weight: 760;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    background: var(--vitre-surface-soft);
  }

  thead {
    background: var(--vitre-surface-soft);
  }

  tfoot {
    color: var(--vitre-text);
    font-weight: 650;
    background: var(--vitre-table-foot-bg);
  }

  tfoot :where(th, td) {
    border-block-start: var(--vitre-border-width) solid var(--vitre-border-strong);
  }

  tr:last-child :where(th, td) {
    border-block-end: 0;
  }

  tbody tr:hover {
    background: var(--vitre-table-row-hover);
  }

  details {
    border: var(--vitre-border-width) solid var(--vitre-border);
    border-radius: var(--vitre-radius-lg);
    padding: var(--vitre-space-4);
    background: var(--vitre-glass);
    box-shadow: var(--vitre-shadow-sm);
    backdrop-filter: var(--vitre-backdrop-blur);
  }

  summary {
    color: var(--vitre-text);
    font-weight: 720;
    cursor: pointer;
  }

  details[open] summary {
    margin-block-end: var(--vitre-space-3);
  }

  :where(dialog, [role="dialog"]) {
    max-inline-size: min(42rem, calc(100% - 2rem));
    border: var(--vitre-border-width) solid var(--vitre-border);
    border-radius: var(--vitre-radius-lg);
    padding: var(--vitre-space-6);
    color: var(--vitre-text);
    background: var(--vitre-surface-strong);
    box-shadow: var(--vitre-shadow);
    backdrop-filter: var(--vitre-backdrop-blur);
  }

  dialog::backdrop {
    background: hsl(222 36% 8% / 0.5);
    backdrop-filter: blur(4px);
  }

  progress,
  meter {
    inline-size: 100%;
    block-size: 1rem;
    accent-color: var(--vitre-primary);
  }

  progress {
    border: 0;
    border-radius: 999px;
    background: var(--vitre-surface-soft);
    overflow: hidden;
  }

  progress::-webkit-progress-bar {
    background: var(--vitre-surface-soft);
  }

  progress::-webkit-progress-value {
    background: var(--vitre-primary);
  }

  progress::-moz-progress-bar {
    background: var(--vitre-primary);
  }

  meter {
    border-radius: 999px;
  }

  img,
  video,
  audio,
  embed,
  object,
  iframe {
    border-radius: var(--vitre-radius-lg);
  }

  audio {
    display: block;
    inline-size: 100%;
  }

  :where(embed, object) {
    display: block;
    max-inline-size: 100%;
    border: var(--vitre-border-width) solid var(--vitre-border);
    background: var(--vitre-surface);
  }

  iframe {
    border: var(--vitre-border-width) solid var(--vitre-border);
  }

  ruby {
    ruby-position: over;
  }

  rt {
    color: var(--vitre-subtle);
    font-size: 0.62em;
    font-weight: 650;
  }

  rp {
    color: var(--vitre-subtle);
  }

  main > :where(article, section, aside),
  :where(main, section) > article,
  body > article {
    border: var(--vitre-border-width) solid var(--vitre-glass-border);
    border-radius: var(--vitre-radius-lg);
    padding: clamp(1rem, 3vw, 2rem);
    background: var(--vitre-glass);
    box-shadow: var(--vitre-shadow);
    backdrop-filter: var(--vitre-backdrop-blur);
  }

  main > :where(article, section, aside) + :where(article, section, aside),
  section > article + article,
  body > article + article {
    margin-block-start: var(--vitre-space-6);
  }

  :where(article, section, aside) > header {
    margin-block-end: var(--vitre-space-5);
  }

  :where(article, section, aside) > header > :where(h1, h2, h3, h4, h5, h6, p, time) {
    margin-block: 0;
  }

  :where(article, section, aside) > header > :where(p, time) {
    display: block;
    margin-block-start: var(--vitre-space-2);
    color: var(--vitre-subtle);
    font-size: var(--vitre-step--1);
  }

  :where(article, section, aside) > footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vitre-space-3);
    margin-block-start: var(--vitre-space-5);
    border-block-start: var(--vitre-border-width) solid var(--vitre-border);
    padding-block-start: var(--vitre-space-4);
  }

  dialog > article {
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  :where(article, section) > aside {
    border: var(--vitre-border-width) solid var(--vitre-border);
    border-inline-start: 0.32rem solid var(--vitre-primary);
    border-radius: var(--vitre-radius-lg);
    padding: var(--vitre-space-4);
    color: var(--vitre-muted);
    background: var(--vitre-surface-soft);
  }

  :where([role="alert"], [role="status"], [role="note"]) {
    display: block;
    border: var(--vitre-border-width) solid var(--vitre-border);
    border-inline-start-width: var(--vitre-alert-accent-width);
    border-radius: var(--vitre-radius-lg);
    padding: var(--vitre-space-2) var(--vitre-space-4);
    color: var(--vitre-text);
  }

  [role="alert"] {
    border-color: var(--vitre-alert-border);
    border-inline-start-color: var(--vitre-alert);
    background: var(--vitre-alert-bg);
  }

  [role="status"] {
    border-color: var(--vitre-status-border);
    border-inline-start-color: var(--vitre-status);
    background: var(--vitre-status-bg);
  }

  [role="note"] {
    border-color: var(--vitre-note-border);
    border-inline-start-color: var(--vitre-note);
    background: var(--vitre-note-bg);
  }

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

  @keyframes vitre-spin {
    to {
      rotate: 1turn;
    }
  }
}