@xaroth.nl/design 0.1.0

package/dist/themes/xaroth.css

@@ -0,0 +1,1974 @@
+@import '@fontsource-variable/cinzel/index.css';
+@import '@fontsource/spectral/400.css';
+@import '@fontsource/spectral/400-italic.css';
+@import '@fontsource/spectral/600.css';
+@import '@fontsource/ibm-plex-mono/400.css';
+@import '@fontsource-variable/manrope/index.css';
+@layer x.reset, x.core, x.theme, x.utility;
+@font-face {
+  font-family: "xaroth numerals";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("@fontsource/spectral/files/spectral-latin-400-normal.woff2") format("woff2");
+  unicode-range: U+0030-0039;
+}
+@font-face {
+  font-family: "xaroth numerals";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("@fontsource/spectral/files/spectral-latin-600-normal.woff2") format("woff2");
+  unicode-range: U+0030-0039;
+}
+@layer x.reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  * {
+    margin: 0;
+  }
+  img,
+  svg,
+  video {
+    display: block;
+    max-width: 100%;
+  }
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+    color: inherit;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      transition-duration: 0.01ms !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+    }
+  }
+}
+@layer x.core {
+  :root {
+    --x-page: 75rem;
+    --x-gutter: 16px;
+    --x-gap: 16px;
+    --x-prose: 68ch;
+    --x-space-1: 4px;
+    --x-space-2: 8px;
+    --x-space-3: 12px;
+    --x-space-4: 16px;
+    --x-space-5: 24px;
+    --x-space-6: 32px;
+    --x-space-7: 48px;
+    --x-space-8: 64px;
+    --x-space-9: 96px;
+    --x-space-10: 128px;
+    --x-section: 80px;
+    --x-fs-display: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);
+    --x-fs-h1: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
+    --x-fs-h2: clamp(1.5rem, 1.3rem + 0.7vw, 2rem);
+    --x-fs-h3: 1.25rem;
+    --x-fs-lead: 1.25rem;
+    --x-fs-body: 1.0625rem;
+    --x-fs-ui: 1rem;
+    --x-fs-small: 0.875rem;
+    --x-fs-label: 0.8125rem;
+    --x-control-sm: 36px;
+    --x-control-md: 44px;
+    --x-control-lg: 52px;
+    --x-row: 48px;
+    --x-focus-width: 2px;
+    --x-focus-offset: 2px;
+    --x-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
+    --x-duration: 150ms;
+  }
+  @media (min-width: 640px) {
+    :root {
+      --x-gap: 24px;
+      --x-gutter: 24px;
+      --x-section: 128px;
+    }
+  }
+  @media (min-width: 1024px) {
+    :root {
+      --x-gutter: 32px;
+    }
+  }
+  :root {
+    scrollbar-gutter: stable;
+  }
+  :root,
+  [data-x-theme] {
+    color-scheme: dark;
+    font-family: var(--x-font-body);
+    line-height: 1.65;
+    color: var(--x-color-text);
+    background: var(--x-color-bg);
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizelegibility;
+  }
+  body,
+  [data-x-theme]:not(:root) {
+    font-size: var(--x-fs-body);
+  }
+  h1,
+  h2,
+  h3,
+  h4 {
+    font-family: var(--x-font-heading);
+    font-weight: 600;
+    letter-spacing: var(--x-track-heading);
+    text-wrap: balance;
+    color: var(--x-color-text);
+  }
+  h1 {
+    font-size: var(--x-fs-h1);
+    line-height: 1.15;
+  }
+  h2 {
+    font-size: var(--x-fs-h2);
+    line-height: 1.2;
+  }
+  h3 {
+    font-size: var(--x-fs-h3);
+    line-height: 1.3;
+  }
+  h4 {
+    font-size: var(--x-fs-ui);
+    line-height: 1.4;
+  }
+  p {
+    text-wrap: pretty;
+  }
+  a {
+    color: var(--x-color-accent);
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.2em;
+  }
+  a:where(:hover) {
+    color: var(--x-color-accent-strong);
+  }
+  small {
+    font-size: var(--x-fs-small);
+  }
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: var(--x-font-mono);
+    font-size: 0.9em;
+  }
+  hr {
+    border: 0;
+    border-top: 1px solid var(--x-color-line);
+  }
+  ::selection {
+    color: var(--x-color-on-accent);
+    background: var(--x-color-accent);
+  }
+  :focus-visible {
+    outline: var(--x-focus-width) solid var(--x-color-focus);
+    outline-offset: var(--x-focus-offset);
+  }
+  .x-display {
+    font-family: var(--x-font-display);
+    font-size: var(--x-fs-display);
+    font-weight: 600;
+    line-height: 1.1;
+    letter-spacing: var(--x-track-display);
+    text-wrap: balance;
+  }
+  .x-lead {
+    font-size: var(--x-fs-lead);
+    line-height: 1.55;
+    color: var(--x-color-text-muted);
+  }
+  .x-small {
+    font-size: var(--x-fs-small);
+    line-height: 1.5;
+  }
+  .x-label {
+    font-family: var(--x-font-ui);
+    font-size: var(--x-fs-label);
+    font-weight: 600;
+    line-height: 1.3;
+    letter-spacing: var(--x-track-label);
+    text-transform: uppercase;
+  }
+  .x-muted {
+    color: var(--x-color-text-muted);
+  }
+}
+@layer x.theme {
+  :where(:root:not([data-x-theme])),
+  [data-x-theme=xaroth] {
+    --x-font-display: 'xaroth numerals', 'Cinzel Variable', 'Cinzel', 'Times New Roman', serif;
+    --x-font-heading: var(--x-font-display);
+    --x-font-body: 'Spectral', Georgia, serif;
+    --x-font-ui: 'Manrope Variable', 'Manrope', system-ui, sans-serif;
+    --x-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
+    --x-fs-body: 1.125rem;
+    --x-track-display: 0.06em;
+    --x-track-heading: 0.02em;
+    --x-track-label: 0.12em;
+    --x-track-caps: 0.2em;
+    --x-color-bg: #0b0806;
+    --x-color-bg-sunk: #080604;
+    --x-color-surface: #15100b;
+    --x-color-surface-2: #1d1610;
+    --x-color-surface-3: #2a2117;
+    --x-color-glass: rgb(34 26 17 / 58%);
+    --x-color-glass-edge: rgb(228 197 135 / 14%);
+    --x-color-line: #2e251a;
+    --x-color-line-strong: #3b2f21;
+    --x-color-field-edge: #7a6342;
+    --x-color-rule: #8a6d42;
+    --x-color-text: #e6d8bc;
+    --x-color-text-muted: #b3a283;
+    --x-color-text-faint: #968669;
+    --x-color-accent: #c9a45c;
+    --x-color-accent-strong: #e4c587;
+    --x-color-accent-edge: #7a6342;
+    --x-color-accent-wash: rgb(201 164 92 / 10%);
+    --x-color-on-accent: #0b0806;
+    --x-color-focus: #e4c587;
+    --x-color-info: #9db3bd;
+    --x-color-on-info: #0b0806;
+    --x-color-info-wash: rgb(157 179 189 / 7%);
+    --x-color-success: #a9b673;
+    --x-color-on-success: #0b0806;
+    --x-color-success-wash: rgb(169 182 115 / 7%);
+    --x-color-warning: #dcaa4a;
+    --x-color-on-warning: #0b0806;
+    --x-color-warning-wash: rgb(220 170 74 / 7%);
+    --x-color-danger: #e0735a;
+    --x-color-on-danger: #0b0806;
+    --x-color-danger-wash: rgb(224 115 90 / 8%);
+    --x-color-sand: #d8c29a;
+    --x-color-bronze: #a37b49;
+    --x-color-spice: #e57a32;
+    --x-color-dawn: #fff0d4;
+    --x-radius: 2px;
+    --x-cut-sm: 0px;
+    --x-cut-md: 0px;
+    --x-cut-lg: 0px;
+    --x-blur: blur(16px) saturate(130%);
+    --x-shadow: inset 0 1px 0 rgb(228 197 135 / 10%), 0 30px 60px -30px rgb(0 0 0 / 80%);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-alert {
+    --x-alert-gap: var(--x-space-4);
+    --x-alert-glyph-width: 1.5;
+    --x-alert-title-weight: 700;
+    --x-alert-fs: var(--x-fs-ui);
+    --x-alert-lh: 1.55;
+    padding: var(--x-space-4) var(--x-space-5);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-alert__icon {
+    stroke-linecap: square;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-alert__frame--facet {
+    display: none;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-alert__frame--round {
+    display: inline;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-alert--framed {
+    border: 1px solid color-mix(in srgb, var(--x-alert-tone) 30%, var(--x-color-line-strong));
+    border-left: 2px solid var(--x-alert-tone);
+    outline: 1px solid var(--x-color-line);
+    outline-offset: -5px;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-alert--framed .x-alert__title {
+    font-family: var(--x-font-display);
+    font-size: var(--x-fs-label);
+    font-weight: 600;
+    line-height: 1.3;
+    letter-spacing: var(--x-track-caps);
+    text-transform: uppercase;
+    color: var(--x-alert-tone);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-alert--framed.x-alert--info {
+    --x-alert-tone: var(--x-color-accent);
+    --x-alert-wash: var(--x-color-accent-wash);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-avatar {
+    --x-avatar-scale: 0.4375;
+    --x-avatar-weight: 500;
+    color: var(--x-color-sand);
+    background: radial-gradient(circle at 50% 30%, var(--x-color-surface-3), var(--x-color-surface) 70%);
+    border: 1px solid var(--x-color-rule);
+    border-radius: 50%;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-avatar--image::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border: 1px solid color-mix(in srgb, var(--x-color-accent) 40%, transparent);
+    border-radius: inherit;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-badge {
+    --x-badge-gap: 0.5em;
+    --x-badge-edge-mix: 55%;
+    padding: 0.3rem 0.6rem 0.3rem 0.5rem;
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    background: var(--x-color-bg-sunk);
+    border-radius: var(--x-radius);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-badge::before {
+    width: 0.4rem;
+    height: 0.4rem;
+    transform: rotate(45deg);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-badge:not(.x-badge--info, .x-badge--success, .x-badge--warning, .x-badge--danger)::before {
+    background: transparent;
+    border: 1px solid currentcolor;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-breadcrumbs {
+    --x-breadcrumbs-gap: var(--x-space-3);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-breadcrumbs__list {
+    row-gap: var(--x-space-2);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-breadcrumbs__item {
+    font-family: var(--x-font-display);
+    font-size: var(--x-fs-label);
+    font-weight: 600;
+    line-height: 1.3;
+    letter-spacing: var(--x-track-caps);
+    text-transform: uppercase;
+    color: var(--x-color-text-muted);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-breadcrumbs__item + .x-breadcrumbs__item::before {
+    content: "";
+    width: 0.3rem;
+    height: 0.3rem;
+    background: var(--x-color-bronze);
+    transform: rotate(45deg);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-breadcrumbs__link:hover {
+    color: var(--x-color-accent-strong);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-breadcrumbs__current {
+    color: var(--x-color-sand);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button {
+    --x-button-font: var(--x-font-display);
+    --x-button-tracking: var(--x-track-caps);
+    --x-button-tone-hi: color-mix(in oklab, var(--x-button-tone) 70%, var(--x-color-dawn));
+    --x-button-text: var(--x-button-tone);
+    --x-button-text-hi: var(--x-button-tone-hi);
+    --x-button-edge: var(--x-button-tone);
+    --x-button-line: color-mix(in oklab, var(--x-button-tone) 65%, var(--x-color-bg));
+    --x-button-wash: color-mix(in oklab, var(--x-button-tone) 8%, transparent);
+    --x-button-hover-bg: var(--x-button-tone);
+    --x-button-hover-fg: var(--x-button-on-tone);
+    gap: var(--x-space-3);
+    border-radius: 0;
+    transition: background var(--x-duration) var(--x-ease), color var(--x-duration) var(--x-ease), border-color var(--x-duration) var(--x-ease), box-shadow var(--x-duration) var(--x-ease);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button:not(.x-button--danger, .x-button--warning, .x-button--success) {
+    --x-button-tone-hi: var(--x-color-accent-strong);
+    --x-button-text: var(--x-color-accent-strong);
+    --x-button-text-hi: var(--x-color-sand);
+    --x-button-edge: var(--x-color-rule);
+    --x-button-line: var(--x-color-bronze);
+    --x-button-wash: transparent;
+    --x-button-hover-bg: var(--x-color-surface-2);
+    --x-button-hover-fg: var(--x-color-sand);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button--primary {
+    --x-button-border: var(--x-button-bg);
+    box-shadow: inset 0 0 0 3px var(--x-button-bg), inset 0 0 0 4px rgba(13, 10, 7, 0.45);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button--primary:hover:not(:disabled, [aria-disabled=true]) {
+    --x-button-bg: var(--x-button-tone-hi);
+    filter: none;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button--secondary {
+    --x-button-fg: var(--x-button-text);
+    --x-button-bg: var(--x-button-wash);
+    --x-button-border: var(--x-button-edge);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button--secondary:hover:not(:disabled, [aria-disabled=true]) {
+    --x-button-fg: var(--x-button-hover-fg);
+    --x-button-bg: var(--x-button-hover-bg);
+    --x-button-border: var(--x-button-tone);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button--tertiary {
+    --x-button-fg: var(--x-button-text);
+    --x-button-bg: transparent;
+    padding: 0 var(--x-space-2);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button--tertiary::after {
+    content: "";
+    position: absolute;
+    inset: auto var(--x-space-2) 0.55rem;
+    height: 1px;
+    background: var(--x-button-line);
+    transition: background var(--x-duration) var(--x-ease);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button--tertiary:hover:not(:disabled, [aria-disabled=true]) {
+    --x-button-fg: var(--x-button-text-hi);
+    --x-button-bg: transparent;
+    --x-button-line: var(--x-button-tone);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button--lg {
+    --x-button-fs: 0.9375rem;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button:disabled,
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button[aria-disabled=true]:not(.x-button--loading) {
+    --x-button-fg: var(--x-color-text-faint);
+    --x-button-bg: var(--x-color-surface);
+    --x-button-border: var(--x-color-line-strong);
+    box-shadow: none;
+    opacity: 1;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button--tertiary:disabled,
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button--tertiary[aria-disabled=true]:not(.x-button--loading) {
+    --x-button-bg: transparent;
+    --x-button-border: transparent;
+    --x-button-line: var(--x-color-line-strong);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card {
+    --x-card-gap: var(--x-space-4);
+    --x-card-glass-hover: rgb(48 37 24 / 66%);
+    --x-card-edge-hover: var(--x-color-rule);
+    --x-card-line: var(--x-color-accent);
+    --x-card-index-style: upper-roman;
+    background: linear-gradient(180deg, rgba(228, 197, 135, 0.05), transparent 40%) var(--x-color-glass);
+    backdrop-filter: var(--x-blur);
+    border: 1px solid var(--x-color-glass-edge);
+    box-shadow: var(--x-shadow);
+    transition: border-color var(--x-duration) var(--x-ease), background-color var(--x-duration) var(--x-ease), transform var(--x-duration) var(--x-ease);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card::before {
+    content: "";
+    position: absolute;
+    top: -1px;
+    right: 22%;
+    left: 22%;
+    height: 1px;
+    pointer-events: none;
+    background: linear-gradient(90deg, transparent, var(--x-card-line), transparent);
+    transition: left var(--x-duration) var(--x-ease), right var(--x-duration) var(--x-ease);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card--link:hover {
+    background-color: var(--x-card-glass-hover);
+    --x-card-line: var(--x-color-accent-strong);
+    border-color: var(--x-card-edge-hover);
+    transform: translateY(-2px);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card--link:hover::before {
+    right: 0;
+    left: 0;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card--link:hover .x-card__title {
+    color: var(--x-color-accent-strong);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card--link:hover {
+      transform: none;
+    }
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card--featured {
+    border-color: var(--x-color-accent-edge);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card--featured::before {
+    right: 0;
+    left: 0;
+    height: 2px;
+    background: linear-gradient(90deg, var(--x-color-bronze), var(--x-color-accent-strong) 50%, var(--x-color-bronze));
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card--featured::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 0.75rem;
+    height: 0.75rem;
+    pointer-events: none;
+    background: var(--x-color-spice);
+    box-shadow: 0 0 0 4px var(--x-color-bg);
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card__index {
+    font-family: var(--x-font-display);
+    font-weight: 600;
+    letter-spacing: var(--x-track-caps);
+    color: var(--x-color-bronze);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card__title {
+    font-weight: 500;
+    letter-spacing: 0.06em;
+    color: var(--x-color-sand);
+    transition: color var(--x-duration) var(--x-ease);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card__foot {
+    padding-top: var(--x-space-4);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card__foot-start, :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card__foot-end {
+    font-family: var(--x-font-display);
+    font-size: var(--x-fs-label);
+    font-weight: 600;
+    line-height: 1.3;
+    letter-spacing: var(--x-track-caps);
+    text-transform: uppercase;
+    color: var(--x-color-text-muted);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card__foot-end {
+    color: var(--x-color-accent-strong);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-description-list {
+    --x-description-list-term-width: 6rem;
+    --x-description-list-line: var(--x-color-line-strong);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-description-list a {
+    color: var(--x-color-accent-strong);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-description-list--columns .x-description-list__item {
+    grid-template-columns: var(--x-description-list-term-width) minmax(0, 1fr);
+    gap: var(--x-space-3);
+    align-items: baseline;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-divider--ornament,
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-divider--label {
+    --x-divider-line: var(--x-color-rule);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-divider--ornament::before, :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-divider--ornament::after,
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-divider--label::before,
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-divider--label::after {
+    max-width: 16rem;
+    background: linear-gradient(to right, transparent, var(--x-divider-line));
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-divider--ornament::after,
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-divider--label::after {
+    background: linear-gradient(to left, transparent, var(--x-divider-line));
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-divider__mark {
+    width: 2.5rem;
+    height: 0.875rem;
+    background: var(--x-color-accent);
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='24 0 40 14' fill='none' stroke='%23000'%3E%3Cpath d='M28 7l4-4 4 4-4 4zM52 7l4-4 4 4-4 4z' fill='%23000' stroke='none'/%3E%3Ccircle cx='44' cy='7' r='5.5'/%3E%3Ccircle cx='44' cy='7' r='1.8' fill='%23000' stroke='none'/%3E%3Cellipse cx='44' cy='7' rx='8.5' ry='2.2' stroke-width='.6' transform='rotate(-14 44 7)'/%3E%3C/svg%3E") center/contain no-repeat;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-divider__label {
+    display: inline-flex;
+    gap: var(--x-space-3);
+    align-items: center;
+    font-family: var(--x-font-display);
+    letter-spacing: var(--x-track-caps);
+    color: var(--x-color-accent);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-divider__label::before, :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-divider__label::after {
+    content: "";
+    flex: none;
+    width: 5px;
+    height: 5px;
+    background: currentcolor;
+    rotate: 45deg;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-empty-state {
+    --x-empty-state-icon: 2.5rem;
+    --x-empty-state-measure: 30rem;
+    border: 1px dashed var(--x-color-accent-edge);
+    border-radius: var(--x-radius);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-empty-state__icon {
+    color: var(--x-color-bronze);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-empty-state__title {
+    font-weight: 500;
+    color: var(--x-color-sand);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-field,
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-choice-group,
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-input,
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-input-wrap,
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-textarea,
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-select,
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-checkbox,
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-radio,
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-switch {
+    --x-field-bg: color-mix(in srgb, var(--x-color-bg-sunk) 62%, transparent);
+    --x-field-bg-focus: color-mix(in srgb, var(--x-color-bg-sunk) 80%, transparent);
+    --x-field-bg-disabled: color-mix(in srgb, var(--x-color-surface) 50%, transparent);
+    --x-field-edge-hover: var(--x-color-rule);
+    --x-field-glow: 0 0 24px -6px color-mix(in srgb, var(--x-color-accent) 45%, transparent);
+    --x-field-help-fs: var(--x-fs-small);
+    --x-input-icon: var(--x-color-accent);
+    --x-check-size: 20px;
+    --x-check-mark: 8px;
+    --x-check-edge: var(--x-color-rule);
+    --x-switch-width: 44px;
+    --x-switch-height: 22px;
+    --x-switch-knob: 10px;
+    --x-switch-knob-off: var(--x-color-text-muted);
+    --x-check-on-bg: color-mix(in srgb, var(--x-color-accent) 14%, transparent);
+    --x-check-ink: var(--x-color-accent-strong);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-switch {
+    --x-check-on-bg: color-mix(in srgb, var(--x-color-accent) 22%, transparent);
+    --x-check-on-glow: 0 0 14px -4px color-mix(in srgb, var(--x-color-accent) 50%, transparent);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-input[readonly],
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-textarea[readonly] {
+    border-color: transparent transparent var(--x-field-edge-readonly);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-input:disabled,
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-textarea:disabled,
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-select:disabled {
+    border-style: dashed;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-select {
+    background-image: linear-gradient(45deg, transparent 50%, var(--x-field-arrow) 50%), linear-gradient(135deg, var(--x-field-arrow) 50%, transparent 50%);
+    background-position: calc(100% - 1.25rem) 55%, calc(100% - 0.9rem) 55%;
+    background-size: 0.35rem 0.35rem;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-checkbox__input:disabled,
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-radio__input:disabled,
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-switch__input:disabled {
+    border-color: var(--x-color-field-edge);
+    border-style: dashed;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-checkbox__input::before {
+    opacity: 1;
+    transform: scale(0) rotate(45deg);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-checkbox__input:checked::before {
+    transform: scale(1) rotate(45deg);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-radio__input::before {
+    opacity: 1;
+    transform: scale(0);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-radio__input:checked::before {
+    transform: scale(1);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-checkbox__input:disabled::before,
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-radio__input:disabled::before {
+    background: var(--x-color-text-faint);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-switch__input::before {
+    margin-left: 5px;
+    background: transparent;
+    box-shadow: inset 0 0 0 1.5px var(--x-switch-knob-off);
+    transform: rotate(45deg);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-switch__input:checked::before {
+    background: var(--x-check-ink);
+    box-shadow: none;
+    transform: translateX(calc(var(--x-switch-width) - 2px - 10px - var(--x-switch-knob))) rotate(45deg);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-switch__input:disabled::before {
+    --x-switch-knob-off: var(--x-color-field-edge);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-switch__input:disabled:checked::before {
+    background: var(--x-color-field-edge);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-filters {
+    --x-filters-switch-weight: 700;
+    --x-filters-switch-tracking: 0.14em;
+    --x-filters-count-color: var(--x-color-accent-strong);
+    --x-filters-option-hover: var(--x-color-sand);
+    --x-filters-option-on-color: var(--x-color-on-accent);
+    --x-filters-option-on-bg: var(--x-color-sand);
+  }
+  @media (min-width: 1024px) {
+    :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-filters--top .x-filter-panel > .x-choice-group {
+      flex-basis: calc(100% - 14rem);
+    }
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-footer {
+    padding-block: var(--x-space-7) var(--x-space-8);
+    border-top: 1px solid var(--x-color-line);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-footer__brand {
+    font-family: var(--x-font-display);
+    font-size: 1rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    color: var(--x-color-sand);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-footer__brand:hover {
+    color: var(--x-color-accent-strong);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-footer__brand svg {
+    color: var(--x-color-accent);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-footer__note {
+    color: var(--x-color-text-faint);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-footer__title {
+    font-family: var(--x-font-display);
+    font-weight: 600;
+    letter-spacing: var(--x-track-caps);
+    text-transform: uppercase;
+    color: var(--x-color-text-faint);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-footer__link {
+    font-family: var(--x-font-ui);
+    font-size: var(--x-fs-small);
+    color: var(--x-color-text-muted);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-footer__link:hover {
+    color: var(--x-color-accent-strong);
+    text-decoration: none;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-footer--columns .x-footer__link {
+    font-size: var(--x-fs-ui);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header {
+    --x-header-brand-gap: var(--x-space-4);
+    --x-header-mark: 2.25rem;
+    border-bottom: 1px solid var(--x-color-line);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header::after {
+    content: "";
+    position: absolute;
+    bottom: -1px;
+    left: 50%;
+    width: min(28rem, 60%);
+    height: 1px;
+    background: linear-gradient(90deg, transparent, var(--x-color-accent), transparent);
+    transform: translateX(-50%);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__brand {
+    font-family: var(--x-font-display);
+    font-size: 1.125rem;
+    font-weight: 600;
+    letter-spacing: var(--x-track-caps);
+    text-transform: uppercase;
+    color: var(--x-color-sand);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__brand svg {
+    color: var(--x-color-accent);
+    transition: color var(--x-duration) var(--x-ease);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__brand:hover {
+    color: var(--x-color-sand);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__brand:hover svg {
+    color: var(--x-color-accent-strong);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__link {
+    padding: var(--x-space-4) 0;
+    font-family: var(--x-font-display);
+    font-size: var(--x-fs-label);
+    font-weight: 600;
+    line-height: 1.3;
+    letter-spacing: var(--x-track-caps);
+    text-transform: uppercase;
+    color: var(--x-color-text-muted);
+    transition: color var(--x-duration) var(--x-ease);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__link:hover {
+    color: var(--x-color-sand);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__link[aria-current=page] {
+    color: var(--x-color-accent-strong);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__nav .x-header__list {
+    gap: 0 var(--x-space-6);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__nav .x-header__item {
+    gap: var(--x-space-6);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__nav .x-header__item + .x-header__item::before {
+    content: "";
+    width: 3px;
+    height: 3px;
+    background: var(--x-color-bronze);
+    transform: rotate(45deg);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__nav .x-header__link[aria-current=page]::after {
+    content: "";
+    position: absolute;
+    bottom: -1px;
+    left: 50%;
+    width: 7px;
+    height: 7px;
+    background: var(--x-color-accent);
+    transform: translate(-50%, 50%) rotate(45deg);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header--inline .x-header__nav .x-header__link {
+    min-height: var(--x-header-height);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header--inline .x-header__panel {
+    background: var(--x-color-surface-2);
+    border: 1px solid var(--x-color-line-strong);
+    box-shadow: var(--x-shadow);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__panel .x-header__link {
+    gap: var(--x-space-3);
+    padding: var(--x-space-3) var(--x-space-4);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__panel .x-header__link[aria-current=page]::before {
+    content: "";
+    width: 5px;
+    height: 5px;
+    background: var(--x-color-accent);
+    transform: rotate(45deg);
+  }
+  @media (width < 640px) {
+    :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header {
+      --x-header-mark: 1.75rem;
+    }
+    :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__brand {
+      font-size: 0.9375rem;
+      letter-spacing: 0.14em;
+    }
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-icon {
+    --x-icon-cap: square;
+    --x-icon-join: miter;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-section-head {
+    flex-direction: column;
+    gap: var(--x-space-4);
+    align-items: center;
+    text-align: center;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-section-head__titles {
+    gap: var(--x-space-4);
+    justify-items: center;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-section-head__eyebrow {
+    display: inline-flex;
+    gap: var(--x-space-3);
+    align-items: center;
+    letter-spacing: var(--x-track-caps);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-section-head__eyebrow::before, :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-section-head__eyebrow::after {
+    content: "";
+    width: 0.4rem;
+    height: 0.4rem;
+    border: 1px solid currentcolor;
+    transform: rotate(45deg);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-section-head__title {
+    font-weight: 500;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--x-color-sand);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-section-head__sub {
+    max-width: 34rem;
+    font-style: italic;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-page-head__titles {
+    gap: var(--x-space-4);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-page-head__eyebrow {
+    display: inline-flex;
+    gap: var(--x-space-3);
+    align-items: center;
+    letter-spacing: var(--x-track-caps);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-page-head__eyebrow::before, :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-page-head__eyebrow::after {
+    content: "";
+    width: 0.4rem;
+    height: 0.4rem;
+    border: 1px solid currentcolor;
+    transform: rotate(45deg);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-page-head__eyebrow::after {
+    display: none;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-page-head__title {
+    font-weight: 500;
+    letter-spacing: var(--x-track-display);
+    color: var(--x-color-sand);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-page-head__lead {
+    font-style: italic;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-page-head--center .x-page-head__eyebrow::after {
+    display: block;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-page-head--center .x-page-head__lead {
+    max-width: 40rem;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-pagination__link,
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-pagination__gap,
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-pagination__summary {
+    font-family: var(--x-font-ui);
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-pagination__link:where(a):not([aria-current=page]):hover {
+    color: var(--x-color-sand);
+    border-color: var(--x-color-rule);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-pagination__link--edge {
+    font-family: var(--x-font-display);
+    letter-spacing: var(--x-track-caps);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-panel {
+    --x-panel-line: var(--x-color-accent);
+    --x-panel-line-inset: 22%;
+    background: var(--x-color-glass);
+    backdrop-filter: var(--x-blur);
+    border: 1px solid var(--x-color-glass-edge);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-panel--raised, :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-panel--accent {
+    background: linear-gradient(180deg, var(--x-color-surface-3), var(--x-color-surface-2) 70%);
+    border-color: var(--x-color-line-strong);
+    box-shadow: var(--x-shadow);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-panel--accent {
+    --x-panel-line: var(--x-color-accent-strong);
+    --x-panel-line-inset: 8%;
+    border-color: var(--x-color-accent-edge);
+    border-top-color: var(--x-color-accent);
+    box-shadow: inset 0 1px 0 var(--x-color-accent), var(--x-shadow);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-panel--marks::before {
+    content: "";
+    position: absolute;
+    top: -1px;
+    right: var(--x-panel-line-inset);
+    left: var(--x-panel-line-inset);
+    height: 1px;
+    pointer-events: none;
+    background: linear-gradient(90deg, transparent, var(--x-panel-line), transparent);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-panel--callout {
+    --x-color-text: #0b0806;
+    --x-color-text-muted: #3d2e1a;
+    --x-color-text-faint: #3d2e1a;
+    --x-color-sand: #0b0806;
+    --x-color-accent: #0b0806;
+    --x-color-accent-strong: #2a2117;
+    --x-color-on-accent: #d8c29a;
+    --x-color-bronze: #0b0806;
+    --x-color-rule: #0b0806;
+    --x-color-line: rgb(13 10 7 / 25%);
+    --x-color-line-strong: rgb(13 10 7 / 35%);
+    --x-color-focus: #0b0806;
+    color: var(--x-color-text);
+    background: repeating-linear-gradient(90deg, transparent 0 3px, rgba(13, 10, 7, 0.03) 3px 4px), linear-gradient(160deg, #e4c587, #d8c29a 45%, #c9a45c);
+    backdrop-filter: none;
+    border: 0;
+    box-shadow: inset 0 0 0 6px #d8c29a, inset 0 0 0 7px rgba(13, 10, 7, 0.35);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-panel--callout.x-panel--marks::before {
+    top: 0;
+    right: auto;
+    left: 50%;
+    width: 1.25rem;
+    height: 1.25rem;
+    background: var(--x-color-spice);
+    box-shadow: 0 0 0 6px var(--x-color-bg);
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-progress {
+    --x-progress-md: 7px;
+    --x-progress-sm: 3px;
+    --x-progress-inset: -1px;
+    --x-progress-default: var(--x-color-accent);
+    --x-progress-head: var(--x-progress-tone);
+    --x-progress-diamond: 11px;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-progress--sm {
+    --x-progress-diamond: 6px;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-progress:not(.x-progress--done,
+  .x-progress--info,
+  .x-progress--success,
+  .x-progress--warning,
+  .x-progress--danger) {
+    --x-progress-head: var(--x-color-accent-strong);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-progress--gradient {
+    --x-progress-head: var(--x-progress-end);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-progress__track {
+    border-radius: var(--x-radius);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-progress:not(.x-progress--gradient) .x-progress__fill {
+    background: linear-gradient(90deg, color-mix(in oklab, var(--x-progress-tone) 70%, var(--x-color-bronze)), var(--x-progress-tone));
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-progress__fill::after {
+    content: "";
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: calc(var(--x-progress-diamond) / -2);
+    width: var(--x-progress-diamond);
+    height: var(--x-progress-diamond);
+    background: var(--x-progress-head);
+    transform: translateY(-50%) rotate(45deg);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-progress--empty .x-progress__fill::after {
+    display: none;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-progress--indeterminate .x-progress__fill::after {
+      display: none;
+    }
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose {
+    --x-prose-block: 1.5em;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose > :is(h2, h3, h4) {
+    font-weight: 500;
+    color: var(--x-color-sand);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose > :is(h3, h4) {
+    font-family: var(--x-font-body);
+    font-weight: 600;
+    letter-spacing: 0;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(a) {
+    color: var(--x-color-accent-strong);
+    text-decoration-color: var(--x-color-bronze);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(a):hover {
+    color: var(--x-color-sand);
+    text-decoration-color: var(--x-color-accent);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(strong) {
+    color: var(--x-color-sand);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(li)::marker {
+    color: var(--x-color-accent);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(ol) > :where(li)::marker {
+    font-family: var(--x-font-ui);
+    font-size: 0.9em;
+    font-weight: 600;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(blockquote) {
+    padding-left: var(--x-space-5);
+    border-left: 2px solid var(--x-color-accent);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(blockquote) > :not(footer, cite) {
+    font-size: var(--x-fs-lead);
+    font-style: italic;
+    line-height: 1.55;
+    color: var(--x-color-sand);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(blockquote) > :is(footer, cite) {
+    margin-top: var(--x-space-2);
+    font-family: var(--x-font-ui);
+    font-size: var(--x-fs-small);
+    color: var(--x-color-text-muted);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(:not(pre)) > :where(code) {
+    color: var(--x-color-accent-strong);
+    background: var(--x-color-surface-2);
+    border-radius: var(--x-radius);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(hr) {
+    position: relative;
+    height: 9px;
+    overflow: visible;
+    background: linear-gradient(90deg, transparent, var(--x-color-rule) 30%, var(--x-color-rule) 70%, transparent) 0 50%/100% 1px no-repeat;
+    border: 0;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(hr)::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 7px;
+    height: 7px;
+    background: var(--x-color-bg);
+    border: 1px solid var(--x-color-accent);
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(figure:not(.x-code)) > :is(img, svg, video, picture) {
+    padding: var(--x-space-4);
+    background: var(--x-color-bg-sunk);
+    border-radius: var(--x-radius);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(table:not(.x-table)) {
+    background: var(--x-color-glass);
+    backdrop-filter: var(--x-blur);
+    border: 1px solid var(--x-color-glass-edge);
+    border-top-color: var(--x-color-rule);
+    --x-table-hover: var(--x-color-accent-wash);
+    --x-table-stripe: color-mix(in srgb, var(--x-color-sand) 4%, transparent);
+    font-family: var(--x-font-ui);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(table:not(.x-table)) :where(caption) {
+    font-family: var(--x-font-body);
+    font-style: italic;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(table:not(.x-table)) :where(thead th) {
+    font-weight: 700;
+    letter-spacing: var(--x-track-label);
+    text-transform: uppercase;
+    color: var(--x-color-accent);
+    background: var(--x-color-bg-sunk);
+    box-shadow: inset 0 -1px 0 var(--x-color-rule);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(table:not(.x-table)) :where(tbody th) {
+    font-weight: 600;
+    color: var(--x-color-sand);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-code {
+    --x-code-bg: var(--x-color-bg-sunk);
+    color: var(--x-color-text);
+    background: var(--x-code-bg);
+    border: 1px solid var(--x-color-line-strong);
+    border-radius: var(--x-radius);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-code__bar {
+    font-family: var(--x-font-mono);
+    color: var(--x-color-text-muted);
+    border-bottom: 1px solid var(--x-color-line-strong);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-code__pre {
+    font-size: 0.9375rem;
+    line-height: 1.65;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-code__line::before {
+    color: var(--x-color-text-faint);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-code__kw, :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-code__str, :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-code__num, :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-code__fn, :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-code__com {
+    color: inherit;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-stat {
+    --x-stat-value: var(--x-color-sand);
+    --x-stat-inner-gap: var(--x-space-1);
+    text-align: center;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-stat__value {
+    order: -1;
+    font-family: var(--x-font-body);
+    font-size: var(--x-fs-h2);
+    font-weight: 400;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-stat__label {
+    font-family: var(--x-font-display);
+    font-size: var(--x-fs-label);
+    font-weight: 600;
+    line-height: 1.3;
+    letter-spacing: var(--x-track-caps);
+    text-transform: uppercase;
+    color: var(--x-color-text-muted);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-stat--muted {
+    --x-stat-value: var(--x-color-text-muted);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-stat--success {
+    --x-stat-value: var(--x-color-success);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-stat--warning {
+    --x-stat-value: var(--x-color-warning);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-stat--danger {
+    --x-stat-value: var(--x-color-danger);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-stat-group--framed {
+    --x-stat-gap: 0;
+    overflow: hidden;
+    background: var(--x-color-glass);
+    backdrop-filter: var(--x-blur);
+    border: 1px solid var(--x-color-glass-edge);
+    border-block-color: var(--x-color-rule);
+    box-shadow: var(--x-shadow);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-stat-group--framed .x-stat {
+    --x-stat-pad: var(--x-space-6) var(--x-space-5);
+    --x-stat-inner-gap: var(--x-space-2);
+    box-shadow: -1px 0 0 var(--x-color-line-strong), 0 -1px 0 var(--x-color-line-strong);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-stat-group--framed .x-stat__value {
+    letter-spacing: 0.04em;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-table-wrap {
+    background: var(--x-color-glass);
+    backdrop-filter: var(--x-blur);
+    border: 1px solid var(--x-color-glass-edge);
+    border-top-color: var(--x-color-rule);
+    --x-table-cover: color-mix(in srgb, var(--x-color-surface-2) 30%, var(--x-color-surface));
+    --x-table-edge: color-mix(in srgb, var(--x-color-accent) 34%, transparent);
+    background: var(--x-table-hint), var(--x-color-glass);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-table {
+    --x-table-hover: var(--x-color-accent-wash);
+    --x-table-stripe: color-mix(in srgb, var(--x-color-sand) 4%, transparent);
+    font-family: var(--x-font-ui);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-table :where(caption) {
+    font-family: var(--x-font-body);
+    font-style: italic;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-table :where(thead th) {
+    font-weight: 700;
+    letter-spacing: var(--x-track-label);
+    text-transform: uppercase;
+    color: var(--x-color-accent);
+    background: var(--x-color-bg-sunk);
+    box-shadow: inset 0 -1px 0 var(--x-color-rule);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-table :where(tbody th) {
+    font-weight: 600;
+    color: var(--x-color-sand);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tabs__list {
+    gap: var(--x-space-5);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tabs__list::after {
+    margin-left: calc(-1 * var(--x-space-5));
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tabs__link {
+    font-family: var(--x-font-ui);
+    font-size: var(--x-fs-ui);
+    font-weight: 600;
+    line-height: 1.4;
+    box-shadow: inset 0 -2px 0 transparent;
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tabs__link:hover {
+    color: var(--x-color-sand);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tabs__link[aria-current=page] {
+    color: var(--x-color-accent-strong);
+    box-shadow: inset 0 -2px 0 var(--x-color-accent);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tabs__link[aria-current=page] .x-tabs__count {
+    color: var(--x-color-accent-strong);
+    border-color: var(--x-color-accent-edge);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tabs__count {
+    background: var(--x-color-surface);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tag {
+    min-height: 0;
+    padding: 0.125rem var(--x-space-2);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    background: var(--x-color-surface);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tag:where(a) {
+    min-height: var(--x-control-sm);
+    padding-inline: var(--x-space-3);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tag:where(a):hover {
+    color: var(--x-color-sand);
+    border-color: var(--x-color-rule);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tag--active, :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tag--active:where(a):hover {
+    color: var(--x-color-on-accent);
+    background: var(--x-color-sand);
+    border-color: var(--x-color-sand);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-timeline {
+    --x-timeline-gap: var(--x-space-6);
+    --x-timeline-rail: 12px;
+    --x-timeline-node: 0.6rem;
+    --x-timeline-date-fs: var(--x-fs-h3);
+    --x-timeline-spine: var(--x-color-rule);
+    --x-timeline-columns: [date-start] max-content [date-end rail-start] var(--x-timeline-rail) [rail-end body-start] minmax(0, 1fr) [body-end];
+  }
+  @media (min-width: 640px) {
+    :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-timeline {
+      --x-timeline-column-gap: var(--x-space-5);
+    }
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-timeline__item--current::after {
+    background: var(--x-color-spice);
+    border-color: var(--x-color-spice);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-timeline__date {
+    font-family: var(--x-font-display);
+    font-weight: 500;
+    color: var(--x-color-accent);
+  }
+  @media (min-width: 640px) {
+    :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-timeline__date {
+      text-align: right;
+    }
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-timeline__title {
+    font-size: 1.1875rem;
+    font-weight: 500;
+    letter-spacing: var(--x-track-display);
+    color: var(--x-color-sand);
+  }
+  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tooltip {
+    --x-tooltip-edge: var(--x-color-surface-3);
+  }
+}
+@layer x.utility {
+  .x-p-none {
+    padding: 0;
+  }
+  .x-p-2xs {
+    padding: var(--x-space-1);
+  }
+  .x-p-xs {
+    padding: var(--x-space-2);
+  }
+  .x-p-sm {
+    padding: var(--x-space-3);
+  }
+  .x-p-md {
+    padding: var(--x-space-4);
+  }
+  .x-p-lg {
+    padding: var(--x-space-5);
+  }
+  .x-p-xl {
+    padding: var(--x-space-6);
+  }
+  .x-p-2xl {
+    padding: var(--x-space-7);
+  }
+  .x-p-3xl {
+    padding: var(--x-space-8);
+  }
+  .x-p-4xl {
+    padding: var(--x-space-9);
+  }
+  .x-px-none {
+    padding-inline: 0;
+  }
+  .x-px-2xs {
+    padding-inline: var(--x-space-1);
+  }
+  .x-px-xs {
+    padding-inline: var(--x-space-2);
+  }
+  .x-px-sm {
+    padding-inline: var(--x-space-3);
+  }
+  .x-px-md {
+    padding-inline: var(--x-space-4);
+  }
+  .x-px-lg {
+    padding-inline: var(--x-space-5);
+  }
+  .x-px-xl {
+    padding-inline: var(--x-space-6);
+  }
+  .x-px-2xl {
+    padding-inline: var(--x-space-7);
+  }
+  .x-px-3xl {
+    padding-inline: var(--x-space-8);
+  }
+  .x-px-4xl {
+    padding-inline: var(--x-space-9);
+  }
+  .x-py-none {
+    padding-block: 0;
+  }
+  .x-py-2xs {
+    padding-block: var(--x-space-1);
+  }
+  .x-py-xs {
+    padding-block: var(--x-space-2);
+  }
+  .x-py-sm {
+    padding-block: var(--x-space-3);
+  }
+  .x-py-md {
+    padding-block: var(--x-space-4);
+  }
+  .x-py-lg {
+    padding-block: var(--x-space-5);
+  }
+  .x-py-xl {
+    padding-block: var(--x-space-6);
+  }
+  .x-py-2xl {
+    padding-block: var(--x-space-7);
+  }
+  .x-py-3xl {
+    padding-block: var(--x-space-8);
+  }
+  .x-py-4xl {
+    padding-block: var(--x-space-9);
+  }
+  .x-pt-none {
+    padding-top: 0;
+  }
+  .x-pt-2xs {
+    padding-top: var(--x-space-1);
+  }
+  .x-pt-xs {
+    padding-top: var(--x-space-2);
+  }
+  .x-pt-sm {
+    padding-top: var(--x-space-3);
+  }
+  .x-pt-md {
+    padding-top: var(--x-space-4);
+  }
+  .x-pt-lg {
+    padding-top: var(--x-space-5);
+  }
+  .x-pt-xl {
+    padding-top: var(--x-space-6);
+  }
+  .x-pt-2xl {
+    padding-top: var(--x-space-7);
+  }
+  .x-pt-3xl {
+    padding-top: var(--x-space-8);
+  }
+  .x-pt-4xl {
+    padding-top: var(--x-space-9);
+  }
+  .x-pr-none {
+    padding-right: 0;
+  }
+  .x-pr-2xs {
+    padding-right: var(--x-space-1);
+  }
+  .x-pr-xs {
+    padding-right: var(--x-space-2);
+  }
+  .x-pr-sm {
+    padding-right: var(--x-space-3);
+  }
+  .x-pr-md {
+    padding-right: var(--x-space-4);
+  }
+  .x-pr-lg {
+    padding-right: var(--x-space-5);
+  }
+  .x-pr-xl {
+    padding-right: var(--x-space-6);
+  }
+  .x-pr-2xl {
+    padding-right: var(--x-space-7);
+  }
+  .x-pr-3xl {
+    padding-right: var(--x-space-8);
+  }
+  .x-pr-4xl {
+    padding-right: var(--x-space-9);
+  }
+  .x-pb-none {
+    padding-bottom: 0;
+  }
+  .x-pb-2xs {
+    padding-bottom: var(--x-space-1);
+  }
+  .x-pb-xs {
+    padding-bottom: var(--x-space-2);
+  }
+  .x-pb-sm {
+    padding-bottom: var(--x-space-3);
+  }
+  .x-pb-md {
+    padding-bottom: var(--x-space-4);
+  }
+  .x-pb-lg {
+    padding-bottom: var(--x-space-5);
+  }
+  .x-pb-xl {
+    padding-bottom: var(--x-space-6);
+  }
+  .x-pb-2xl {
+    padding-bottom: var(--x-space-7);
+  }
+  .x-pb-3xl {
+    padding-bottom: var(--x-space-8);
+  }
+  .x-pb-4xl {
+    padding-bottom: var(--x-space-9);
+  }
+  .x-pl-none {
+    padding-left: 0;
+  }
+  .x-pl-2xs {
+    padding-left: var(--x-space-1);
+  }
+  .x-pl-xs {
+    padding-left: var(--x-space-2);
+  }
+  .x-pl-sm {
+    padding-left: var(--x-space-3);
+  }
+  .x-pl-md {
+    padding-left: var(--x-space-4);
+  }
+  .x-pl-lg {
+    padding-left: var(--x-space-5);
+  }
+  .x-pl-xl {
+    padding-left: var(--x-space-6);
+  }
+  .x-pl-2xl {
+    padding-left: var(--x-space-7);
+  }
+  .x-pl-3xl {
+    padding-left: var(--x-space-8);
+  }
+  .x-pl-4xl {
+    padding-left: var(--x-space-9);
+  }
+  .x-m-none {
+    margin: 0;
+  }
+  .x-m-2xs {
+    margin: var(--x-space-1);
+  }
+  .x-m-xs {
+    margin: var(--x-space-2);
+  }
+  .x-m-sm {
+    margin: var(--x-space-3);
+  }
+  .x-m-md {
+    margin: var(--x-space-4);
+  }
+  .x-m-lg {
+    margin: var(--x-space-5);
+  }
+  .x-m-xl {
+    margin: var(--x-space-6);
+  }
+  .x-m-2xl {
+    margin: var(--x-space-7);
+  }
+  .x-m-3xl {
+    margin: var(--x-space-8);
+  }
+  .x-m-4xl {
+    margin: var(--x-space-9);
+  }
+  .x-m-section {
+    margin: var(--x-section);
+  }
+  .x-m-auto {
+    margin: auto;
+  }
+  .x-mx-none {
+    margin-inline: 0;
+  }
+  .x-mx-2xs {
+    margin-inline: var(--x-space-1);
+  }
+  .x-mx-xs {
+    margin-inline: var(--x-space-2);
+  }
+  .x-mx-sm {
+    margin-inline: var(--x-space-3);
+  }
+  .x-mx-md {
+    margin-inline: var(--x-space-4);
+  }
+  .x-mx-lg {
+    margin-inline: var(--x-space-5);
+  }
+  .x-mx-xl {
+    margin-inline: var(--x-space-6);
+  }
+  .x-mx-2xl {
+    margin-inline: var(--x-space-7);
+  }
+  .x-mx-3xl {
+    margin-inline: var(--x-space-8);
+  }
+  .x-mx-4xl {
+    margin-inline: var(--x-space-9);
+  }
+  .x-mx-section {
+    margin-inline: var(--x-section);
+  }
+  .x-mx-auto {
+    margin-inline: auto;
+  }
+  .x-my-none {
+    margin-block: 0;
+  }
+  .x-my-2xs {
+    margin-block: var(--x-space-1);
+  }
+  .x-my-xs {
+    margin-block: var(--x-space-2);
+  }
+  .x-my-sm {
+    margin-block: var(--x-space-3);
+  }
+  .x-my-md {
+    margin-block: var(--x-space-4);
+  }
+  .x-my-lg {
+    margin-block: var(--x-space-5);
+  }
+  .x-my-xl {
+    margin-block: var(--x-space-6);
+  }
+  .x-my-2xl {
+    margin-block: var(--x-space-7);
+  }
+  .x-my-3xl {
+    margin-block: var(--x-space-8);
+  }
+  .x-my-4xl {
+    margin-block: var(--x-space-9);
+  }
+  .x-my-section {
+    margin-block: var(--x-section);
+  }
+  .x-my-auto {
+    margin-block: auto;
+  }
+  .x-mt-none {
+    margin-top: 0;
+  }
+  .x-mt-2xs {
+    margin-top: var(--x-space-1);
+  }
+  .x-mt-xs {
+    margin-top: var(--x-space-2);
+  }
+  .x-mt-sm {
+    margin-top: var(--x-space-3);
+  }
+  .x-mt-md {
+    margin-top: var(--x-space-4);
+  }
+  .x-mt-lg {
+    margin-top: var(--x-space-5);
+  }
+  .x-mt-xl {
+    margin-top: var(--x-space-6);
+  }
+  .x-mt-2xl {
+    margin-top: var(--x-space-7);
+  }
+  .x-mt-3xl {
+    margin-top: var(--x-space-8);
+  }
+  .x-mt-4xl {
+    margin-top: var(--x-space-9);
+  }
+  .x-mt-section {
+    margin-top: var(--x-section);
+  }
+  .x-mt-auto {
+    margin-top: auto;
+  }
+  .x-mr-none {
+    margin-right: 0;
+  }
+  .x-mr-2xs {
+    margin-right: var(--x-space-1);
+  }
+  .x-mr-xs {
+    margin-right: var(--x-space-2);
+  }
+  .x-mr-sm {
+    margin-right: var(--x-space-3);
+  }
+  .x-mr-md {
+    margin-right: var(--x-space-4);
+  }
+  .x-mr-lg {
+    margin-right: var(--x-space-5);
+  }
+  .x-mr-xl {
+    margin-right: var(--x-space-6);
+  }
+  .x-mr-2xl {
+    margin-right: var(--x-space-7);
+  }
+  .x-mr-3xl {
+    margin-right: var(--x-space-8);
+  }
+  .x-mr-4xl {
+    margin-right: var(--x-space-9);
+  }
+  .x-mr-section {
+    margin-right: var(--x-section);
+  }
+  .x-mr-auto {
+    margin-right: auto;
+  }
+  .x-mb-none {
+    margin-bottom: 0;
+  }
+  .x-mb-2xs {
+    margin-bottom: var(--x-space-1);
+  }
+  .x-mb-xs {
+    margin-bottom: var(--x-space-2);
+  }
+  .x-mb-sm {
+    margin-bottom: var(--x-space-3);
+  }
+  .x-mb-md {
+    margin-bottom: var(--x-space-4);
+  }
+  .x-mb-lg {
+    margin-bottom: var(--x-space-5);
+  }
+  .x-mb-xl {
+    margin-bottom: var(--x-space-6);
+  }
+  .x-mb-2xl {
+    margin-bottom: var(--x-space-7);
+  }
+  .x-mb-3xl {
+    margin-bottom: var(--x-space-8);
+  }
+  .x-mb-4xl {
+    margin-bottom: var(--x-space-9);
+  }
+  .x-mb-section {
+    margin-bottom: var(--x-section);
+  }
+  .x-mb-auto {
+    margin-bottom: auto;
+  }
+  .x-ml-none {
+    margin-left: 0;
+  }
+  .x-ml-2xs {
+    margin-left: var(--x-space-1);
+  }
+  .x-ml-xs {
+    margin-left: var(--x-space-2);
+  }
+  .x-ml-sm {
+    margin-left: var(--x-space-3);
+  }
+  .x-ml-md {
+    margin-left: var(--x-space-4);
+  }
+  .x-ml-lg {
+    margin-left: var(--x-space-5);
+  }
+  .x-ml-xl {
+    margin-left: var(--x-space-6);
+  }
+  .x-ml-2xl {
+    margin-left: var(--x-space-7);
+  }
+  .x-ml-3xl {
+    margin-left: var(--x-space-8);
+  }
+  .x-ml-4xl {
+    margin-left: var(--x-space-9);
+  }
+  .x-ml-section {
+    margin-left: var(--x-section);
+  }
+  .x-ml-auto {
+    margin-left: auto;
+  }
+  .x-gap-none {
+    gap: 0;
+  }
+  .x-gap-x-none {
+    column-gap: 0;
+  }
+  .x-gap-y-none {
+    row-gap: 0;
+  }
+  .x-gap-2xs {
+    gap: var(--x-space-1);
+  }
+  .x-gap-x-2xs {
+    column-gap: var(--x-space-1);
+  }
+  .x-gap-y-2xs {
+    row-gap: var(--x-space-1);
+  }
+  .x-gap-xs {
+    gap: var(--x-space-2);
+  }
+  .x-gap-x-xs {
+    column-gap: var(--x-space-2);
+  }
+  .x-gap-y-xs {
+    row-gap: var(--x-space-2);
+  }
+  .x-gap-sm {
+    gap: var(--x-space-3);
+  }
+  .x-gap-x-sm {
+    column-gap: var(--x-space-3);
+  }
+  .x-gap-y-sm {
+    row-gap: var(--x-space-3);
+  }
+  .x-gap-md {
+    gap: var(--x-space-4);
+  }
+  .x-gap-x-md {
+    column-gap: var(--x-space-4);
+  }
+  .x-gap-y-md {
+    row-gap: var(--x-space-4);
+  }
+  .x-gap-lg {
+    gap: var(--x-space-5);
+  }
+  .x-gap-x-lg {
+    column-gap: var(--x-space-5);
+  }
+  .x-gap-y-lg {
+    row-gap: var(--x-space-5);
+  }
+  .x-gap-xl {
+    gap: var(--x-space-6);
+  }
+  .x-gap-x-xl {
+    column-gap: var(--x-space-6);
+  }
+  .x-gap-y-xl {
+    row-gap: var(--x-space-6);
+  }
+  .x-gap-2xl {
+    gap: var(--x-space-7);
+  }
+  .x-gap-x-2xl {
+    column-gap: var(--x-space-7);
+  }
+  .x-gap-y-2xl {
+    row-gap: var(--x-space-7);
+  }
+  .x-gap-3xl {
+    gap: var(--x-space-8);
+  }
+  .x-gap-x-3xl {
+    column-gap: var(--x-space-8);
+  }
+  .x-gap-y-3xl {
+    row-gap: var(--x-space-8);
+  }
+  .x-gap-4xl {
+    gap: var(--x-space-9);
+  }
+  .x-gap-x-4xl {
+    column-gap: var(--x-space-9);
+  }
+  .x-gap-y-4xl {
+    row-gap: var(--x-space-9);
+  }
+  .x-stack-none {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+  .x-cluster-none {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0;
+    align-items: center;
+  }
+  .x-stack-2xs {
+    display: flex;
+    flex-direction: column;
+    gap: var(--x-space-1);
+  }
+  .x-cluster-2xs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--x-space-1);
+    align-items: center;
+  }
+  .x-stack-xs {
+    display: flex;
+    flex-direction: column;
+    gap: var(--x-space-2);
+  }
+  .x-cluster-xs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--x-space-2);
+    align-items: center;
+  }
+  .x-stack-sm {
+    display: flex;
+    flex-direction: column;
+    gap: var(--x-space-3);
+  }
+  .x-cluster-sm {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--x-space-3);
+    align-items: center;
+  }
+  .x-stack-md {
+    display: flex;
+    flex-direction: column;
+    gap: var(--x-space-4);
+  }
+  .x-cluster-md {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--x-space-4);
+    align-items: center;
+  }
+  .x-stack-lg {
+    display: flex;
+    flex-direction: column;
+    gap: var(--x-space-5);
+  }
+  .x-cluster-lg {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--x-space-5);
+    align-items: center;
+  }
+  .x-stack-xl {
+    display: flex;
+    flex-direction: column;
+    gap: var(--x-space-6);
+  }
+  .x-cluster-xl {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--x-space-6);
+    align-items: center;
+  }
+  .x-stack-2xl {
+    display: flex;
+    flex-direction: column;
+    gap: var(--x-space-7);
+  }
+  .x-cluster-2xl {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--x-space-7);
+    align-items: center;
+  }
+  .x-stack-3xl {
+    display: flex;
+    flex-direction: column;
+    gap: var(--x-space-8);
+  }
+  .x-cluster-3xl {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--x-space-8);
+    align-items: center;
+  }
+  .x-stack-4xl {
+    display: flex;
+    flex-direction: column;
+    gap: var(--x-space-9);
+  }
+  .x-cluster-4xl {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--x-space-9);
+    align-items: center;
+  }
+  .x-visually-hidden:not(:focus-within, :active) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    white-space: nowrap;
+    border: 0;
+    clip-path: inset(50%);
+  }
+}