*, :before, :after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  font-family: var(--x-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

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

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

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

a {
  color: inherit;
  text-decoration: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

ul, ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

:root {
  --x-space-1: .25rem;
  --x-space-2: .5rem;
  --x-space-3: .75rem;
  --x-space-4: 1rem;
  --x-space-5: 1.5rem;
  --x-space-6: 2rem;
  --x-space-7: 3rem;
  --x-space-8: 4rem;
  --x-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --x-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;
  --x-text-h1: clamp(2rem, 5vw + 1rem, 3.5rem);
  --x-text-h2: clamp(1.5rem, 3vw + .75rem, 2.5rem);
  --x-text-h3: clamp(1.25rem, 2vw + .5rem, 2rem);
  --x-text-h4: clamp(1.125rem, 1vw + .5rem, 1.5rem);
  --x-text-h5: clamp(1rem, .5vw + .5rem, 1.25rem);
  --x-text-h6: clamp(.875rem, .25vw + .5rem, 1rem);
  --x-text-body: clamp(1rem, .5vw + .75rem, 1.125rem);
  --x-text-caption: .875rem;
  --x-text-label: .75rem;
  --x-leading-tight: 1.2;
  --x-leading-normal: 1.5;
  --x-leading-relaxed: 1.75;
  --x-tracking-tight: -.02em;
  --x-tracking-normal: 0;
  --x-tracking-wide: .05em;
  --x-radius-sm: .25rem;
  --x-radius-md: .5rem;
  --x-radius-lg: .75rem;
  --x-radius-full: 9999px;
  --x-transition-fast: .1s ease;
  --x-transition-normal: .15s ease;
  --x-transition-slow: .3s ease;
  --x-bp-sm: 640px;
  --x-bp-md: 768px;
  --x-bp-lg: 1024px;
  --x-bp-xl: 1280px;
  --x-z-base: 0;
  --x-z-dropdown: 100;
  --x-z-sticky: 200;
  --x-z-modal: 300;
  --x-z-tooltip: 400;
  --x-z-max: 9999;
}

:root, .x-theme-dark {
  --x-bg-base: #09090b;
  --x-bg-surface: #131316;
  --x-bg-elevated: #1d1d20;
  --x-bg-primary: #3c83f6;
  --x-bg-primary-hover: #0b64f4;
  --x-text-primary: #fafafa;
  --x-text-secondary: #a1a1aa;
  --x-text-muted: #71717a;
  --x-text-inverse: #09090b;
  --x-border-subtle: #27272a;
  --x-border-default: #404045;
  --x-border-strong: #58585f;
  --x-accent: #3c83f6;
  --x-accent-hover: #0b64f4;
  --x-accent-muted: #3c83f633;
  --x-success: #21c45d;
  --x-success-muted: #21c45d33;
  --x-warning: #f59f0a;
  --x-warning-muted: #f59f0a33;
  --x-error: #dc2828;
  --x-error-muted: #dc282833;
  --x-shadow-color: 240 10% 4%;
  --x-shadow-strength: .25;
  --x-focus-ring: 0 0 0 3px #3c83f666;
}

.x-theme-light {
  --x-bg-base: #fff;
  --x-bg-surface: #f4f4f5;
  --x-bg-elevated: #fff;
  --x-bg-primary: #0b64f4;
  --x-bg-primary-hover: #0950c3;
  --x-text-primary: #17171c;
  --x-text-secondary: #58585f;
  --x-text-muted: #888891;
  --x-text-inverse: #fafafa;
  --x-border-subtle: #e4e4e7;
  --x-border-default: #d4d4d8;
  --x-border-strong: #afafb6;
  --x-accent: #0b64f4;
  --x-accent-hover: #0950c3;
  --x-accent-muted: #0b64f426;
  --x-success: #1a9948;
  --x-success-muted: #21c45d26;
  --x-warning: #c47f08;
  --x-warning-muted: #f59f0a26;
  --x-error: #c52020;
  --x-error-muted: #dc282826;
  --x-shadow-color: 240 5% 30%;
  --x-shadow-strength: .08;
  --x-focus-ring: 0 0 0 3px #0b64f44d;
}

.x-theme-nvg {
  --x-bg-base: #000;
  --x-bg-surface: #000f00;
  --x-bg-elevated: #001f00;
  --x-bg-primary: #0f0;
  --x-bg-primary-hover: #0c0;
  --x-text-primary: #0f0;
  --x-text-secondary: #0c0;
  --x-text-muted: #090;
  --x-text-inverse: #000;
  --x-border-subtle: #030;
  --x-border-default: #005c00;
  --x-border-strong: green;
  --x-accent: #0f0;
  --x-accent-hover: #0c0;
  --x-accent-muted: #0f03;
  --x-success: #0f0;
  --x-success-muted: #0f03;
  --x-warning: #3c3;
  --x-warning-muted: #3c33;
  --x-error: #478547;
  --x-error-muted: #47854733;
  --x-shadow-color: 120 100% 25%;
  --x-shadow-strength: .3;
  --x-focus-ring: 0 0 0 3px #00ff0080;
}

.x-theme-high-contrast {
  --x-bg-base: #000;
  --x-bg-surface: #000;
  --x-bg-elevated: #1a1a1a;
  --x-bg-primary: #ff0;
  --x-bg-primary-hover: #cc0;
  --x-text-primary: #fff;
  --x-text-secondary: #fff;
  --x-text-muted: #ccc;
  --x-text-inverse: #000;
  --x-border-subtle: #fff;
  --x-border-default: #fff;
  --x-border-strong: #fff;
  --x-accent: #ff0;
  --x-accent-hover: #cc0;
  --x-accent-muted: #ffff004d;
  --x-success: #0f0;
  --x-success-muted: #00ff004d;
  --x-warning: #ff0;
  --x-warning-muted: #ffff004d;
  --x-error: red;
  --x-error-muted: #ff00004d;
  --x-shadow-color: 0 0% 100%;
  --x-shadow-strength: .5;
  --x-focus-ring: 0 0 0 4px #ff0;
}

.x-display {
  font-family: var(--x-font-sans);
  letter-spacing: var(--x-tracking-tight);
  color: var(--x-text-primary);
  font-size: clamp(2.5rem, 6vw + 1rem, 4.5rem);
  font-weight: 800;
  line-height: 1.1;
}

.x-h1 {
  font-family: var(--x-font-sans);
  font-size: var(--x-text-h1);
  font-weight: 700;
  line-height: var(--x-leading-tight);
  letter-spacing: var(--x-tracking-tight);
  color: var(--x-text-primary);
}

.x-h2 {
  font-family: var(--x-font-sans);
  font-size: var(--x-text-h2);
  font-weight: 600;
  line-height: var(--x-leading-tight);
  letter-spacing: var(--x-tracking-tight);
  color: var(--x-text-primary);
}

.x-h3 {
  font-family: var(--x-font-sans);
  font-size: var(--x-text-h3);
  font-weight: 600;
  line-height: var(--x-leading-tight);
  letter-spacing: var(--x-tracking-normal);
  color: var(--x-text-primary);
}

.x-h4 {
  font-family: var(--x-font-sans);
  font-size: var(--x-text-h4);
  font-weight: 600;
  line-height: var(--x-leading-tight);
  letter-spacing: var(--x-tracking-normal);
  color: var(--x-text-primary);
}

.x-h5 {
  font-family: var(--x-font-sans);
  font-size: var(--x-text-h5);
  font-weight: 500;
  line-height: var(--x-leading-tight);
  letter-spacing: var(--x-tracking-normal);
  color: var(--x-text-primary);
}

.x-h6 {
  font-family: var(--x-font-sans);
  font-size: var(--x-text-h6);
  font-weight: 500;
  line-height: var(--x-leading-tight);
  letter-spacing: var(--x-tracking-normal);
  color: var(--x-text-primary);
}

.x-lead {
  font-family: var(--x-font-sans);
  font-size: clamp(1.125rem, .75vw + .875rem, 1.375rem);
  font-weight: 400;
  line-height: var(--x-leading-relaxed);
  letter-spacing: var(--x-tracking-normal);
  color: var(--x-text-secondary);
}

.x-body {
  font-family: var(--x-font-sans);
  font-size: var(--x-text-body);
  font-weight: 400;
  line-height: var(--x-leading-normal);
  letter-spacing: var(--x-tracking-normal);
  color: var(--x-text-secondary);
}

.x-small {
  font-family: var(--x-font-sans);
  font-size: .8125rem;
  font-weight: 400;
  line-height: var(--x-leading-normal);
  letter-spacing: var(--x-tracking-normal);
  color: var(--x-text-muted);
}

.x-caption {
  font-family: var(--x-font-sans);
  font-size: var(--x-text-caption);
  font-weight: 400;
  line-height: var(--x-leading-normal);
  letter-spacing: var(--x-tracking-normal);
  color: var(--x-text-muted);
}

.x-label {
  font-family: var(--x-font-sans);
  font-size: var(--x-text-label);
  font-weight: 500;
  line-height: var(--x-leading-tight);
  letter-spacing: var(--x-tracking-wide);
  text-transform: uppercase;
  color: var(--x-text-secondary);
}

.x-mono {
  font-family: var(--x-font-mono);
  font-size: .9em;
  line-height: var(--x-leading-relaxed);
}

.x-stack {
  gap: var(--x-space-4);
  flex-direction: column;
  display: flex;
}

.x-row {
  gap: var(--x-space-4);
  flex-flow: wrap;
  align-items: center;
  display: flex;
}

.x-between {
  justify-content: space-between;
  align-items: center;
  gap: var(--x-space-4);
  display: flex;
  container-type: inline-size;
}

@container (width <= 400px) {
  .x-between {
    flex-direction: column;
    align-items: stretch;
  }
}

.x-center {
  justify-content: center;
  align-items: center;
  display: flex;
}

.x-block-1, .x-block-prose, .x-block-wide, .x-block-full, .x-block-2, .x-block-3, .x-block-4 {
  container-type: inline-size;
}

.x-block-1 {
  max-width: 1200px;
  padding-inline: var(--x-space-4);
  margin-inline: auto;
}

.x-block-prose {
  max-width: 65ch;
  padding-inline: var(--x-space-4);
  margin-inline: auto;
}

.x-block-wide {
  max-width: 1400px;
  padding-inline: var(--x-space-4);
  margin-inline: auto;
}

.x-block-full {
  width: 100%;
  padding-inline: var(--x-space-4);
}

.x-block-2 {
  gap: var(--x-space-4);
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

@container (width <= 500px) {
  .x-block-2 {
    grid-template-columns: 1fr;
  }
}

.x-block-3 {
  gap: var(--x-space-4);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

@container (width <= 768px) {
  .x-block-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container (width <= 500px) {
  .x-block-3 {
    grid-template-columns: 1fr;
  }
}

.x-block-4 {
  gap: var(--x-space-4);
  grid-template-columns: repeat(4, 1fr);
  display: grid;
}

@container (width <= 900px) {
  .x-block-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container (width <= 500px) {
  .x-block-4 {
    grid-template-columns: 1fr;
  }
}

.x-hidden {
  display: none;
}

.x-sr-only {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.x-pad-1 {
  padding: var(--x-space-1);
}

.x-pad-2 {
  padding: var(--x-space-2);
}

.x-pad-3 {
  padding: var(--x-space-3);
}

.x-pad-4 {
  padding: var(--x-space-4);
}

.x-pad-5 {
  padding: var(--x-space-5);
}

.x-pad-6 {
  padding: var(--x-space-6);
}

.x-gap-1 {
  gap: var(--x-space-1);
}

.x-gap-2 {
  gap: var(--x-space-2);
}

.x-gap-3 {
  gap: var(--x-space-3);
}

.x-gap-4 {
  gap: var(--x-space-4);
}

.x-gap-5 {
  gap: var(--x-space-5);
}

.x-gap-6 {
  gap: var(--x-space-6);
}

.x-mt-1 {
  margin-top: var(--x-space-1);
}

.x-mt-2 {
  margin-top: var(--x-space-2);
}

.x-mt-3 {
  margin-top: var(--x-space-3);
}

.x-mt-4 {
  margin-top: var(--x-space-4);
}

.x-mt-5 {
  margin-top: var(--x-space-5);
}

.x-mt-6 {
  margin-top: var(--x-space-6);
}

.x-mb-1 {
  margin-bottom: var(--x-space-1);
}

.x-mb-2 {
  margin-bottom: var(--x-space-2);
}

.x-mb-3 {
  margin-bottom: var(--x-space-3);
}

.x-mb-4 {
  margin-bottom: var(--x-space-4);
}

.x-mb-5 {
  margin-bottom: var(--x-space-5);
}

.x-mb-6 {
  margin-bottom: var(--x-space-6);
}

.x-dense {
  --x-space-1: .125rem;
  --x-space-2: .25rem;
  --x-space-3: .5rem;
  --x-space-4: .75rem;
  --x-space-5: 1rem;
  --x-space-6: 1.5rem;
}

.x-spacious {
  --x-space-1: .375rem;
  --x-space-2: .75rem;
  --x-space-3: 1rem;
  --x-space-4: 1.5rem;
  --x-space-5: 2rem;
  --x-space-6: 3rem;
}

.x-bg-base {
  background-color: var(--x-bg-base);
}

.x-bg-surface {
  background-color: var(--x-bg-surface);
}

.x-bg-elevated {
  background-color: var(--x-bg-elevated);
}

.x-bg-primary {
  background-color: var(--x-bg-primary);
}

.x-bg-success {
  background-color: var(--x-success-muted);
}

.x-bg-warning {
  background-color: var(--x-warning-muted);
}

.x-bg-error {
  background-color: var(--x-error-muted);
}

.x-text-primary {
  color: var(--x-text-primary);
}

.x-text-secondary {
  color: var(--x-text-secondary);
}

.x-text-muted {
  color: var(--x-text-muted);
}

.x-text-inverse {
  color: var(--x-text-inverse);
}

.x-text-success {
  color: var(--x-success);
}

.x-text-warning {
  color: var(--x-warning);
}

.x-text-error {
  color: var(--x-error);
}

.x-accent {
  color: var(--x-accent);
}

.x-border {
  border: 1px solid var(--x-border-default);
}

.x-border-subtle {
  border: 1px solid var(--x-border-subtle);
}

.x-border-strong {
  border: 1px solid var(--x-border-strong);
}

.x-round-sm {
  border-radius: var(--x-radius-sm);
}

.x-round-md {
  border-radius: var(--x-radius-md);
}

.x-round-lg {
  border-radius: var(--x-radius-lg);
}

.x-round-full {
  border-radius: var(--x-radius-full);
}

.x-shadow-sm {
  box-shadow: 0 1px 2px hsl(var(--x-shadow-color) / calc(var(--x-shadow-strength) * 1)),
    0 1px 3px hsl(var(--x-shadow-color) / calc(var(--x-shadow-strength) * .5));
}

.x-shadow-md {
  box-shadow: 0 4px 6px hsl(var(--x-shadow-color) / calc(var(--x-shadow-strength) * 1)),
    0 2px 4px hsl(var(--x-shadow-color) / calc(var(--x-shadow-strength) * .5));
}

.x-shadow-lg {
  box-shadow: 0 10px 15px hsl(var(--x-shadow-color) / calc(var(--x-shadow-strength) * 1)),
    0 4px 6px hsl(var(--x-shadow-color) / calc(var(--x-shadow-strength) * .5));
}

.x-overflow-auto {
  overflow: auto;
}

.x-btn {
  justify-content: center;
  align-items: center;
  gap: var(--x-space-2);
  padding: var(--x-space-2) var(--x-space-4);
  min-height: 2.5rem;
  font-family: var(--x-font-sans);
  font-size: var(--x-text-caption);
  color: var(--x-text-inverse);
  white-space: nowrap;
  background-color: var(--x-bg-primary);
  border-radius: var(--x-radius-md);
  cursor: pointer;
  transition: background-color var(--x-transition-normal),
    transform var(--x-transition-fast);
  border: none;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
}

.x-btn:hover {
  background-color: var(--x-bg-primary-hover);
}

.x-btn:active {
  transform: scale(.98);
}

.x-btn:focus-visible {
  box-shadow: var(--x-focus-ring);
  outline: none;
}

.x-btn:disabled, .x-btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.x-btn-ghost {
  justify-content: center;
  align-items: center;
  gap: var(--x-space-2);
  padding: var(--x-space-2) var(--x-space-4);
  min-height: 2.5rem;
  font-family: var(--x-font-sans);
  font-size: var(--x-text-caption);
  color: var(--x-text-primary);
  white-space: nowrap;
  border-radius: var(--x-radius-md);
  cursor: pointer;
  transition: background-color var(--x-transition-normal),
    transform var(--x-transition-fast);
  background-color: #0000;
  border: none;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
}

.x-btn-ghost:hover {
  background-color: var(--x-bg-elevated);
}

.x-btn-ghost:active {
  transform: scale(.98);
}

.x-btn-ghost:focus-visible {
  box-shadow: var(--x-focus-ring);
  outline: none;
}

.x-btn-outline {
  justify-content: center;
  align-items: center;
  gap: var(--x-space-2);
  padding: var(--x-space-2) var(--x-space-4);
  min-height: 2.5rem;
  font-family: var(--x-font-sans);
  font-size: var(--x-text-caption);
  color: var(--x-text-primary);
  white-space: nowrap;
  border: 1px solid var(--x-border-default);
  border-radius: var(--x-radius-md);
  cursor: pointer;
  transition: background-color var(--x-transition-normal),
    border-color var(--x-transition-normal),
    transform var(--x-transition-fast);
  background-color: #0000;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
}

.x-btn-outline:hover {
  background-color: var(--x-bg-elevated);
  border-color: var(--x-border-strong);
}

.x-btn-outline:active {
  transform: scale(.98);
}

.x-btn-outline:focus-visible {
  box-shadow: var(--x-focus-ring);
  outline: none;
}

.x-card {
  --_card-pad: var(--x-space-4);
  padding: var(--_card-pad);
  background-color: var(--x-bg-surface);
  border: 1px solid var(--x-border-subtle);
  border-radius: var(--x-radius-md);
  box-shadow: 0 1px 2px hsl(var(--x-shadow-color) / calc(var(--x-shadow-strength) * 1)),
    0 1px 3px hsl(var(--x-shadow-color) / calc(var(--x-shadow-strength) * .5));
  container-type: inline-size;
}

@container (width >= 400px) {
  .x-card {
    --_card-pad: var(--x-space-5);
  }
}

@container (width >= 600px) {
  .x-card {
    --_card-pad: var(--x-space-6);
  }
}

.x-card > header:not([class]) {
  font-family: var(--x-font-sans);
  font-size: var(--x-text-h4);
  font-weight: 600;
  line-height: var(--x-leading-tight);
  color: var(--x-text-primary);
  padding-bottom: var(--x-space-3);
  border-bottom: 1px solid var(--x-border-subtle);
  margin-bottom: var(--x-space-3);
}

.x-card > footer:not([class]) {
  font-size: var(--x-text-caption);
  color: var(--x-text-muted);
  padding-top: var(--x-space-3);
  border-top: 1px solid var(--x-border-subtle);
  margin-top: var(--x-space-3);
}

.x-card > img:first-child, .x-card > picture:first-child, .x-card > video:first-child {
  margin: calc(-1 * var(--_card-pad)) calc(-1 * var(--_card-pad)) 0;
  width: calc(100% + var(--_card-pad) * 2);
  border-radius: var(--x-radius-md) var(--x-radius-md) 0 0;
  object-fit: cover;
  max-width: none;
}

.x-card > p:not([class]) {
  font-size: var(--x-text-body);
  line-height: var(--x-leading-relaxed);
  color: var(--x-text-secondary);
}

.x-card > footer .x-btn, .x-card > footer .x-btn-ghost, .x-card > footer .x-btn-outline {
  min-height: 2rem;
  padding: var(--x-space-1) var(--x-space-3);
  font-size: var(--x-text-label);
}

.x-nav {
  align-items: center;
  gap: var(--x-space-1);
  display: flex;
}

.x-nav > a {
  font-family: var(--x-font-sans);
  font-size: var(--x-text-caption);
  color: var(--x-text-secondary);
  padding: var(--x-space-2) var(--x-space-3);
  border-radius: var(--x-radius-sm);
  transition: color var(--x-transition-normal), background-color var(--x-transition-normal);
  font-weight: 500;
  text-decoration: none;
}

.x-nav > a:hover {
  color: var(--x-text-primary);
  background-color: var(--x-bg-elevated);
}

.x-nav > a[aria-current="page"] {
  color: var(--x-accent);
  background-color: var(--x-accent-muted);
}

.x-h1 .x-badge, .x-h2 .x-badge {
  vertical-align: middle;
  font-size: .4em;
}

.x-h3 .x-badge, .x-h4 .x-badge {
  vertical-align: middle;
  font-size: .5em;
}

.x-badge > svg, .x-badge > img {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}

.x-input {
  width: 100%;
  padding: var(--x-space-2) var(--x-space-3);
  min-height: 2.5rem;
  font-family: var(--x-font-sans);
  font-size: var(--x-text-body);
  color: var(--x-text-primary);
  background-color: var(--x-bg-base);
  border: 1px solid var(--x-border-default);
  border-radius: var(--x-radius-sm);
  transition: border-color var(--x-transition-normal),
    box-shadow var(--x-transition-normal);
  display: block;
}

.x-input::placeholder {
  color: var(--x-text-muted);
}

.x-input:focus {
  border-color: var(--x-accent);
  box-shadow: var(--x-focus-ring);
  outline: none;
}

.x-input:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.x-input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 999px var(--x-bg-base);
  -webkit-text-fill-color: var(--x-text-primary);
  caret-color: var(--x-text-primary);
}

.x-input:invalid:not(:placeholder-shown) {
  border-color: var(--x-error);
}

.x-input:valid:not(:placeholder-shown) {
  border-color: var(--x-success);
}

.x-badge {
  align-items: center;
  gap: var(--x-space-1);
  padding: var(--x-space-1) var(--x-space-2);
  font-family: var(--x-font-sans);
  font-size: var(--x-text-label);
  background-color: var(--x-bg-elevated);
  border-radius: var(--x-radius-full);
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
}

.x-avatar {
  --avatar-size: clamp(2rem, 5vw, 3rem);
  width: var(--avatar-size);
  height: var(--avatar-size);
  font-family: var(--x-font-sans);
  font-size: calc(var(--avatar-size) * .4);
  color: var(--x-text-inverse);
  background-color: var(--x-accent);
  border-radius: var(--x-radius-full);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: inline-flex;
  overflow: hidden;
}

.x-avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.x-link {
  color: var(--x-accent);
  text-underline-offset: .2em;
  transition: color var(--x-transition-normal);
  text-decoration: underline;
}

.x-link:hover {
  color: var(--x-accent-hover);
}

.x-link:focus-visible {
  box-shadow: var(--x-focus-ring);
  border-radius: var(--x-radius-sm);
  outline: none;
}

.x-divider {
  background-color: var(--x-border-subtle);
  border: none;
  width: 100%;
  height: 1px;
}

.x-code {
  font-family: var(--x-font-mono);
  color: var(--x-accent);
  background-color: var(--x-accent-muted);
  border-radius: var(--x-radius-sm);
  padding: .15em .4em;
  font-size: .875em;
}

.x-pre {
  font-family: var(--x-font-mono);
  font-size: var(--x-text-caption);
  line-height: var(--x-leading-relaxed);
  color: var(--x-text-primary);
  background-color: var(--x-bg-base);
  border: 1px solid var(--x-border-subtle);
  border-radius: var(--x-radius-md);
  padding: var(--x-space-4);
  white-space: pre;
  tab-size: 2;
  overflow-x: auto;
}

[ns] {
  position: relative;
}

[ns]:before {
  content: "";
  background-color: var(--x-warning);
  pointer-events: none;
  width: 6px;
  height: 6px;
  z-index: var(--x-z-max);
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
}

.x-audit [ns] {
  outline-offset: 2px;
  outline: 2px dashed var(--x-warning) !important;
}

.x-audit [ns]:after {
  content: attr(data-ns);
  z-index: calc(var(--x-z-max) + 1);
  padding: var(--x-space-1) var(--x-space-2);
  max-width: 300px;
  font-family: var(--x-font-mono);
  color: #000;
  white-space: normal;
  background-color: var(--x-warning);
  border-radius: var(--x-radius-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--x-transition-fast), transform var(--x-transition-fast);
  font-size: 10px;
  line-height: 1.3;
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(4px);
}

.x-audit [ns]:hover:after {
  opacity: 1;
  transform: translateY(0);
}

[ns]:not([data-ns]):before {
  background-color: var(--x-error);
}

.x-audit [ns]:not([data-ns]) {
  outline-color: var(--x-error) !important;
}

.x-audit [ns]:not([data-ns]):after {
  content: "⚠ Missing data-ns explanation!";
  background-color: var(--x-error);
  color: #fff;
}

.x-audit [ns][data-ns-boundary]:after {
  content: "Third-party: " attr(data-ns);
  background-color: var(--x-accent);
}

.x-audit:before {
  content: "Audit Mode";
  top: var(--x-space-4);
  right: var(--x-space-4);
  z-index: calc(var(--x-z-max) + 2);
  padding: var(--x-space-2) var(--x-space-4);
  font-family: var(--x-font-mono);
  font-size: var(--x-text-label);
  color: #000;
  background-color: var(--x-warning);
  border-radius: var(--x-radius-full);
  pointer-events: none;
  font-weight: 600;
  position: fixed;
}