@layer reset, tokens, themes, components;

@property --color-accent {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(95% 0.005 250);
}

@property --color-accent-foreground {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(18% 0.015 250);
}

@property --color-background {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(100% 0 0);
}

@property --color-border {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(90% 0.005 250);
}

@property --color-destructive {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(55% 0.22 25);
}

@property --color-destructive-foreground {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(100% 0 0);
}

@property --color-error {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(55% 0.22 25);
}

@property --color-foreground {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(18% 0.015 250);
}

@property --color-info-foreground {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(100% 0 0);
}

@property --color-muted {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(90% 0.005 250);
}

@property --color-muted-foreground {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(55% 0.005 250);
}

@property --color-popover {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(100% 0 0);
}

@property --color-popover-foreground {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(18% 0.015 250);
}

@property --color-primary-foreground {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(100% 0 0);
}

@property --color-secondary {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(55% 0.005 250);
}

@property --color-secondary-foreground {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(18% 0.015 250);
}

@property --color-success {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(55% 0.18 145);
}

@property --color-success-foreground {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(100% 0 0);
}

@property --color-surface {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(95% 0.005 250);
}

@property --color-text {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(18% 0.015 250);
}

@property --color-warning {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(75% 0.18 75);
}

@property --color-warning-foreground {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(18% 0.015 250);
}

@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { line-height: var(--leading-normal, 1.5); -webkit-text-size-adjust: 100%; }
  body { font-family: var(--font-family-sans, system-ui, sans-serif); background-color: var(--color-background); color: var(--color-foreground); }
  a { color: var(--color-link, inherit); }
  a:visited { color: var(--color-link-visited, var(--color-link, inherit)); }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  code, kbd, pre { font-family: var(--font-family-mono, ui-monospace, monospace); }
  hr { border-color: var(--color-border, currentColor); }
  table { border-collapse: collapse; }
}

@layer tokens {
  :root {
    --brand-amber-500: oklch(75% 0.18 75);
    --brand-amber-600: oklch(68% 0.16 75);
    --brand-blue-400: oklch(65% 0.19 250);
    --brand-blue-500: oklch(55% 0.20 250);
    --brand-blue-600: oklch(48% 0.18 250);
    --brand-blue-700: oklch(42% 0.15 250);
    --brand-gray-100: oklch(95% 0.005 250);
    --brand-gray-200: oklch(90% 0.005 250);
    --brand-gray-500: oklch(55% 0.005 250);
    --brand-gray-900: oklch(18% 0.015 250);
    --brand-green-500: oklch(55% 0.18 145);
    --brand-green-600: oklch(48% 0.16 145);
    --brand-indigo-500: oklch(55% 0.22 260);
    --brand-indigo-600: oklch(48% 0.20 260);
    --brand-red-500: oklch(55% 0.22 25);
    --brand-red-600: oklch(48% 0.20 25);
    --brand-white: oklch(100% 0 0);
    --brand-yellow-400: oklch(85% 0.19 90);
    --brand-yellow-500: oklch(80% 0.18 90);
    --color-accent: oklch(95% 0.005 250);
    --color-accent-foreground: oklch(18% 0.015 250);
    --color-backdrop: rgba(0, 0, 0, 0.5);
    --color-background: oklch(100% 0 0);
    --color-border: oklch(90% 0.005 250);
    --color-destructive: oklch(55% 0.22 25);
    --color-destructive-foreground: oklch(100% 0 0);
    --color-destructive-hover: color-mix(in oklch, var(--color-destructive) 85%, black);
    --color-error: oklch(55% 0.22 25);
    --color-error-alpha: color-mix(in srgb, var(--color-error) 20%, transparent);
    --color-error-subtle: oklch(95% 0.03 25);
    --color-foreground: oklch(18% 0.015 250);
    --color-info: oklch(55% 0.22 260);
    --color-info-foreground: oklch(100% 0 0);
    --color-info-hover: color-mix(in oklch, var(--color-info) 85%, black);
    --color-info-subtle: oklch(95% 0.03 250);
    --color-link: oklch(55% 0.22 260);
    --color-link-visited: oklch(55% 0.22 260);
    --color-muted: oklch(90% 0.005 250);
    --color-muted-foreground: oklch(55% 0.005 250);
    --color-popover: oklch(100% 0 0);
    --color-popover-foreground: oklch(18% 0.015 250);
    --color-primary: oklch(55% 0.22 260);
    --color-primary-foreground: oklch(100% 0 0);
    --color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
    --color-ring: oklch(55% 0.22 260);
    --color-ring-alpha: color-mix(in srgb, var(--brand-indigo-500) 30%, transparent);
    --color-secondary: oklch(55% 0.005 250);
    --color-secondary-content: oklch(18% 0.015 250);
    --color-secondary-foreground: oklch(18% 0.015 250);
    --color-secondary-hover: oklch(18% 0.015 250);
    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-success: oklch(55% 0.18 145);
    --color-success-foreground: oklch(100% 0 0);
    --color-success-hover: color-mix(in oklch, var(--color-success) 85%, black);
    --color-success-subtle: oklch(95% 0.05 145);
    --color-surface: oklch(95% 0.005 250);
    --color-surface-hover: oklch(90% 0.005 250);
    --color-text: oklch(18% 0.015 250);
    --color-warning: oklch(75% 0.18 75);
    --color-warning-content: oklch(18% 0.015 250);
    --color-warning-foreground: oklch(18% 0.015 250);
    --color-warning-hover: color-mix(in oklch, var(--color-warning) 85%, black);
    --color-warning-subtle: oklch(95% 0.05 75);
    --font-family-mono: ui-monospace, SFMono-Regular, monospace;
    --font-family-sans: system-ui, -apple-system, sans-serif;
    --font-leading-none: 1;
    --font-leading-normal: 1.5;
    --font-leading-relaxed: 1.625;
    --font-leading-snug: 1.375;
    --font-leading-tight: 1.25;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: clamp(1.75rem, 1.375rem + 1.17vw, 2.5rem);
    --font-size-5xl: clamp(2rem, 1.5rem + 1.56vw, 3rem);
    --font-size-base: 1rem;
    --font-size-h1: clamp(1.5rem, 1.25rem + 0.78vw, 2rem);
    --font-size-h2: clamp(1.25rem, 1.1rem + 0.52vw, 1.5rem);
    --font-size-h3: clamp(1.125rem, 1.05rem + 0.39vw, 1.25rem);
    --font-size-h4: clamp(1rem, 0.95rem + 0.26vw, 1.125rem);
    --font-size-lg: 1.125rem;
    --font-size-sm: 0.875rem;
    --font-size-xl: 1.25rem;
    --font-size-xs: 0.75rem;
    --font-tracking-normal: 0em;
    --font-tracking-snug: -0.02em;
    --font-tracking-tight: -0.025em;
    --font-tracking-wide: 0.025em;
    --font-tracking-wider: 0.05em;
    --font-weight-bold: 700;
    --font-weight-medium: 500;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --layout-max-width: 72rem;
    --layout-max-width-lg: 90rem;
    --layout-max-width-sm: 40rem;
    --layout-padding-x: 1rem;
    --layout-section-gap: 4rem;
    --layout-section-gap-lg: 6rem;
    --layout-section-gap-sm: 2rem;
    --navbar-actions-display: none;
    --navbar-menu-display: none;
    --navbar-mobile-toggle-display: flex;
    --radius-lg: 0.5rem;
    --radius-md: 0.375rem;
    --radius-sm: 0.125rem;
    --scale-font-family-mono: ui-monospace, SFMono-Regular, monospace;
    --scale-font-family-sans: system-ui, -apple-system, sans-serif;
    --scale-font-size-2xl: 1.5rem;
    --scale-font-size-3xl: 2rem;
    --scale-font-size-4xl: 2.5rem;
    --scale-font-size-5xl: 3rem;
    --scale-font-size-base: 1rem;
    --scale-font-size-lg: 1.125rem;
    --scale-font-size-sm: 0.875rem;
    --scale-font-size-xl: 1.25rem;
    --scale-font-size-xs: 0.75rem;
    --scale-font-weight-bold: 700;
    --scale-font-weight-medium: 500;
    --scale-font-weight-normal: 400;
    --scale-font-weight-semibold: 600;
    --scale-letter-spacing-normal: 0em;
    --scale-letter-spacing-snug: -0.02em;
    --scale-letter-spacing-tight: -0.025em;
    --scale-letter-spacing-wide: 0.025em;
    --scale-letter-spacing-wider: 0.05em;
    --scale-line-height-none: 1;
    --scale-line-height-normal: 1.5;
    --scale-line-height-relaxed: 1.625;
    --scale-line-height-snug: 1.375;
    --scale-line-height-tight: 1.25;
    --scale-radius-lg: 0.5rem;
    --scale-radius-md: 0.375rem;
    --scale-radius-sm: 0.125rem;
    --scale-spacing-1: 0.25rem;
    --scale-spacing-2: 0.5rem;
    --scale-spacing-3: 0.75rem;
    --scale-spacing-4: 1rem;
    --scale-spacing-6: 1.5rem;
    --scale-spacing-8: 2rem;
    --scale-transition-fast: 150ms;
    --showcase-grid-columns: 1fr;
    --showcase-grid-columns-media-narrow: 1fr;
    --showcase-grid-columns-media-wide: 1fr;
    --spacing-lg: 1.5rem;
    --spacing-md: 1rem;
    --spacing-sm: 0.5rem;
    --spacing-xl: 2rem;
    --spacing-xs: 0.25rem;
    --transition-fast: 150ms;
  }
}

@layer themes {
  [data-theme="dark"] {
    --color-accent: oklch(30% 0.01 250);
    --color-accent-foreground: oklch(95% 0.005 250);
    --color-backdrop: rgba(0, 0, 0, 0.7);
    --color-background: oklch(18% 0.015 250);
    --color-border: oklch(35% 0.01 250);
    --color-foreground: oklch(95% 0.005 250);
    --color-muted: oklch(30% 0.01 250);
    --color-muted-foreground: oklch(65% 0.005 250);
    --color-popover: oklch(22% 0.01 250);
    --color-popover-foreground: oklch(95% 0.005 250);
    --color-secondary: oklch(90% 0.005 250);
    --color-secondary-hover: oklch(95% 0.005 250);
    --color-surface: oklch(25% 0.01 250);
    --color-surface-hover: oklch(30% 0.01 250);
    --color-text: oklch(95% 0.005 250);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      --color-accent: oklch(30% 0.01 250);
      --color-accent-foreground: oklch(95% 0.005 250);
      --color-backdrop: rgba(0, 0, 0, 0.7);
      --color-background: oklch(18% 0.015 250);
      --color-border: oklch(35% 0.01 250);
      --color-foreground: oklch(95% 0.005 250);
      --color-muted: oklch(30% 0.01 250);
      --color-muted-foreground: oklch(65% 0.005 250);
      --color-popover: oklch(22% 0.01 250);
      --color-popover-foreground: oklch(95% 0.005 250);
      --color-secondary: oklch(90% 0.005 250);
      --color-secondary-hover: oklch(95% 0.005 250);
      --color-surface: oklch(25% 0.01 250);
      --color-surface-hover: oklch(30% 0.01 250);
      --color-text: oklch(95% 0.005 250);
    }
  }
}

@layer components {
  .accordion {
    width: 100%;
  }

  .accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 200ms ease-out;
  }

  .accordion-content-inner {
    overflow: hidden;
  }

  .accordion-content-open {
    grid-template-rows: 1fr;
  }

  .accordion-item {
    border-bottom: 1px solid var(--color-border);
  }

  .accordion-trigger {
    align-items: center;
    background: none;
    border: none;
    color: var(--color-foreground);
    cursor: pointer;
    display: flex;
    font-weight: var(--font-weight-medium);
    justify-content: space-between;
    padding: var(--spacing-md) 0;
    transition: color 150ms ease;
    user-select: none;
    width: 100%;
  }

  .accordion-trigger:focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 2px;
  }

  .accordion-trigger:hover {
    color: var(--color-muted-foreground);
  }

  .accordion-trigger-icon {
    flex-shrink: 0;
    height: 1rem;
    transition: transform 200ms ease;
    width: 1rem;
  }

  .accordion-trigger-icon-open {
    transform: rotate(180deg);
  }

  .aspect-ratio {
    position: relative;
    width: 100%;
  }

  .aspect-ratio-content {
    inset: 0;
    position: absolute;
  }

  .badge {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    display: inline-flex;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    gap: 0.25rem;
    justify-content: center;
    line-height: var(--font-leading-none);
    padding: 0.125rem var(--spacing-sm);
    transition: color var(--transition-fast) ease, background-color var(--transition-fast) ease;
    white-space: nowrap;
    width: fit-content;
  }

  .badge-destructive {
    background: var(--color-destructive);
    border-color: transparent;
    color: var(--color-destructive-foreground);
  }

  .badge-outline {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-foreground);
  }

  .badge-primary {
    background: var(--color-primary);
    border-color: transparent;
    color: var(--color-primary-foreground);
  }

  .badge-secondary {
    background: var(--color-muted);
    border-color: transparent;
    color: var(--color-foreground);
  }

  .badge-link {
    cursor: pointer;
    text-decoration: none;
  }

  .badge-link:focus-visible {
    box-shadow: 0 0 0 2px var(--color-ring-alpha);
    outline: none;
  }

  .badge-link:hover {
    opacity: 0.8;
  }

  .breadcrumb {
    display: flex;
  }

  .breadcrumb-item {
    align-items: center;
    display: flex;
  }

  .breadcrumb-link {
    align-items: center;
    color: var(--color-muted-foreground);
    display: flex;
    gap: 0.375rem;
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .breadcrumb-list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
    gap: var(--spacing-xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .breadcrumb-page {
    align-items: center;
    color: var(--color-foreground);
    display: flex;
    font-weight: var(--font-weight-medium);
    gap: 0.375rem;
  }

  .breadcrumb-separator {
    color: var(--color-muted-foreground);
    margin-left: var(--spacing-sm);
    margin-right: var(--spacing-sm);
  }

  .btn {
    align-items: center;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-md);
    transition: background-color var(--transition-fast) ease;
  }

  .btn-destructive {
    background: var(--color-destructive);
    color: var(--color-destructive-foreground);
  }

  .btn-destructive:hover {
    background: var(--color-destructive-hover);
  }

  .btn-ghost {
    background: transparent;
    color: var(--color-text);
  }

  .btn-ghost:hover {
    background: var(--color-surface-hover);
  }

  .btn-primary {
    background: var(--color-primary);
    color: var(--color-primary-foreground);
  }

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

  .btn-secondary {
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
  }

  .btn-secondary:hover {
    background: var(--color-primary);
    color: var(--color-primary-foreground);
  }

  .btn-lg {
    font-size: var(--font-size-lg);
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .btn-sm {
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .card {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .card-content {
    padding: var(--spacing-md);
  }

  .card-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-md);
  }

  .card-header {
    border-bottom: 1px solid var(--color-border);
    color: var(--color-foreground);
    padding: var(--spacing-md);
  }

  .collapsible {
    width: 100%;
  }

  .collapsible-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 200ms ease-out;
  }

  .collapsible-content-inner {
    overflow: hidden;
  }

  .collapsible-content-open {
    grid-template-rows: 1fr;
  }

  .collapsible-trigger {
    cursor: pointer;
    user-select: none;
  }

  .device-frame {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 24px var(--color-shadow);
    overflow: hidden;
  }

  .device-frame-browser {
  }

  .device-frame-dot {
    border-radius: 50%;
    height: 12px;
    width: 12px;
  }

  .device-frame-dot-close {
    background: #ff5f57;
  }

  .device-frame-dot-maximize {
    background: #28c840;
  }

  .device-frame-dot-minimize {
    background: #febc2e;
  }

  .device-frame-dots {
    align-items: center;
    display: flex;
    gap: 6px;
  }

  .device-frame-home-indicator {
    background: var(--color-muted-foreground);
    border-radius: 3px;
    height: 5px;
    margin: var(--spacing-xs) auto;
    width: 134px;
  }

  .device-frame-ios {
    border-radius: 2rem;
    border-width: 3px;
  }

  .device-frame-macos {
  }

  .device-frame-mobile {
    border-radius: 1.5rem;
    border-width: 2px;
    max-width: 375px;
  }

  .device-frame-notch {
    background: var(--color-foreground);
    border-radius: 0 0 1rem 1rem;
    height: 24px;
    margin: 0 auto;
    width: 120px;
  }

  .device-frame-plain {
  }

  .device-frame-spacer {
    flex-shrink: 0;
    width: 54px;
  }

  .device-frame-terminal {
  }

  .device-frame-title {
    color: var(--color-muted-foreground);
    flex: 1;
    font-size: var(--font-size-sm);
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .device-frame-titlebar {
    align-items: center;
    background: var(--color-accent);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    padding: var(--spacing-sm) var(--spacing-md);
    user-select: none;
  }

  .device-frame-ios .device-frame-titlebar {
    justify-content: center;
    padding: var(--spacing-xs) var(--spacing-md);
  }

  .device-frame-terminal .device-frame-titlebar {
    background: var(--color-surface);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
  }

  .device-frame-viewport {
    line-height: 0;
    overflow: hidden;
  }

  .device-frame-viewport > svg {
    display: block;
    height: auto;
    width: 100%;
  }

  .doc-body {
  }

  .doc-body h2, & h3, & h4 {
    scroll-margin-top: calc(4rem + var(--spacing-md));
  }

  .doc-card-grid {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fill, minmax(var(--doc-card-min-width, 17.5rem), 1fr));
  }

  .doc-card-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .doc-card-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
  }

  .doc-card-summary {
    color: var(--color-muted-foreground);
    font-size: var(--font-size-sm);
  }

  .doc-index-header {
    margin-bottom: var(--spacing-xl);
    text-align: center;
  }

  .doc-index-intro {
    color: var(--color-muted-foreground);
    margin-left: auto;
    margin-right: auto;
    max-width: var(--layout-max-width-sm);
  }

  .doc-layout {
    container-name: doc-layout;
    container-type: inline-size;
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: var(--doc-sidebar-width, 15rem) 1fr var(--doc-toc-width, 12.5rem);
    margin-left: auto;
    margin-right: auto;
    max-width: var(--layout-max-width-lg);
    padding: var(--spacing-lg);
  }

  .doc-layout-main {
    min-width: 0;
    overflow-wrap: break-word;
  }

  .doc-layout-sidebar {
    align-self: start;
    max-height: calc(100vh - 4rem - var(--spacing-xl));
    overflow-y: auto;
    position: sticky;
    top: calc(4rem + var(--spacing-lg));
  }

  .doc-layout-toc {
    align-self: start;
    position: sticky;
    top: calc(4rem + var(--spacing-lg));
  }

  .doc-meta {
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
  }

  .doc-related {
    margin-top: var(--spacing-lg);
  }

  .doc-related-grid {
    display: grid;
    gap: var(--spacing-sm);
    grid-template-columns: repeat(auto-fill, minmax(var(--doc-related-min-width, 13.75rem), 1fr));
    margin-top: var(--spacing-sm);
  }

  .doc-related-sep {
    margin-top: var(--spacing-xl);
  }

  .doc-section-group {
    margin-bottom: var(--spacing-xl);
  }

  .doc-section-heading {
    margin-bottom: var(--spacing-md);
  }

  .faq-wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--layout-max-width-sm);
  }

  .feature-grid {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .feature-grid-2col {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  }

  .feature-grid-4col {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  .feature-grid-item-title {
    color: var(--color-foreground);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--spacing-xs) 0;
  }

  .footer {
    background: var(--color-background);
    border-top: 1px solid var(--color-border);
    padding-bottom: var(--layout-section-gap);
    padding-top: var(--layout-section-gap);
    width: 100%;
  }

  .footer-bottom {
    align-items: center;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    justify-content: space-between;
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
  }

  .footer-bottom-links {
    align-items: center;
    display: flex;
    gap: var(--spacing-md);
  }

  .footer-brand-description {
    color: var(--color-muted-foreground);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--spacing-md) 0;
  }

  .footer-brand-name {
    color: var(--color-foreground);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--spacing-xs) 0;
  }

  .footer-copyright {
    color: var(--color-muted-foreground);
    font-size: var(--font-size-sm);
    margin: 0;
  }

  .footer-grid {
    display: grid;
    gap: var(--layout-section-gap-sm);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .footer-link {
    color: var(--color-muted-foreground);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: color var(--transition-fast) ease;
  }

  .footer-link:hover {
    color: var(--color-foreground);
  }

  .footer-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .footer-section-inline {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .footer-section-inline > .footer-link + .footer-link::before {
    color: var(--color-muted-foreground);
    content: "|";
    margin-right: var(--spacing-sm);
  }

  .footer-section-title {
    color: var(--color-foreground);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--spacing-xs) 0;
  }

  .hero {
    text-align: center;
    width: 100%;
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: center;
  }

  .hero-content {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--layout-max-width-sm);
  }

  .hero-description {
    color: var(--color-muted-foreground);
    font-size: var(--font-size-lg);
    line-height: var(--font-leading-relaxed);
    margin: 0 0 var(--spacing-lg) 0;
  }

  .hero-headline {
    color: var(--color-foreground);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--font-tracking-tight);
    line-height: var(--font-leading-tight);
    margin: 0 0 var(--spacing-md) 0;
  }

  .hero-padded {
    padding-bottom: var(--layout-section-gap);
    padding-top: var(--layout-section-gap);
  }

  .hero-padded-lg {
    padding-bottom: var(--layout-section-gap-lg);
    padding-top: var(--layout-section-gap-lg);
  }

  .hero-padded-sm {
    padding-bottom: var(--layout-section-gap-sm);
    padding-top: var(--layout-section-gap-sm);
  }

  .interactive-fade {
    transition: opacity var(--transition-fast) ease;
  }

  .interactive-fade:hover {
    opacity: 0.8;
  }

  .interactive-lift {
    transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
  }

  .interactive-lift:hover {
    box-shadow: 0 8px 25px var(--color-shadow);
    transform: translateY(-2px);
  }

  .interactive-press {
    transition: transform var(--transition-fast) ease;
  }

  .interactive-press:active {
    transform: scale(0.97);
  }

  .layout-container {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--layout-max-width);
    padding-left: var(--layout-padding-x);
    padding-right: var(--layout-padding-x);
    width: 100%;
  }

  .layout-container-lg {
    max-width: var(--layout-max-width-lg);
  }

  .layout-container-sm {
    max-width: var(--layout-max-width-sm);
  }

  .layout-grid {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .layout-grid-lg {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }

  .layout-grid-sm {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .media-grid {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .media-grid-2col {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  }

  .media-grid-3col {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .media-grid-4col {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  .media-grid-caption {
    color: var(--color-muted-foreground);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
    text-align: center;
  }

  .media-grid-gap-lg {
    gap: var(--spacing-lg);
  }

  .media-grid-gap-md {
    gap: var(--spacing-md);
  }

  .media-grid-gap-sm {
    gap: var(--spacing-sm);
  }

  .media-grid-item {
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .media-image {
    border-radius: var(--radius-md);
    display: block;
    height: auto;
    max-width: 100%;
    object-fit: cover;
  }

  .media-video {
    display: block;
    height: auto;
    max-width: 100%;
  }

  .navbar {
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    width: 100%;
  }

  .navbar-actions {
    align-items: center;
    display: var(--navbar-actions-display);
    gap: var(--spacing-sm);
    margin-left: var(--spacing-sm);
  }

  .navbar-brand {
    color: var(--color-foreground);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-right: auto;
    text-decoration: none;
    white-space: nowrap;
  }

  .navbar-brand:hover {
    color: var(--color-foreground);
  }

  .navbar-container {
    align-items: center;
    display: flex;
    gap: var(--spacing-sm);
    height: 4rem;
    margin: 0 auto;
    max-width: var(--layout-max-width);
    padding: 0 var(--layout-padding-x);
  }

  .navbar-item {
    align-items: center;
    border-radius: var(--radius-md);
    color: var(--color-muted-foreground);
    display: inline-flex;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    transition: color var(--transition-fast) ease, background var(--transition-fast) ease;
    white-space: nowrap;
  }

  .navbar-item:hover {
    background: var(--color-accent);
    color: var(--color-foreground);
  }

  .navbar-item-active {
    color: var(--color-foreground);
    font-weight: var(--font-weight-semibold);
  }

  .navbar-menu {
    align-items: center;
    display: var(--navbar-menu-display);
    gap: var(--spacing-xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .navbar-mobile-brand {
    border-bottom: 1px solid var(--color-border);
    color: var(--color-foreground);
    display: block;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    text-decoration: none;
  }

  .navbar-mobile-item {
    border-radius: var(--radius-md);
    color: var(--color-muted-foreground);
    cursor: pointer;
    display: block;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    transition: color var(--transition-fast) ease, background var(--transition-fast) ease;
  }

  .navbar-mobile-item:hover {
    background: var(--color-accent);
    color: var(--color-foreground);
  }

  .navbar-mobile-item-active {
    background: var(--color-accent);
    color: var(--color-foreground);
    font-weight: var(--font-weight-semibold);
  }

  .navbar-mobile-menu {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .navbar-mobile-toggle {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-foreground);
    cursor: pointer;
    display: var(--navbar-mobile-toggle-display);
    flex-shrink: 0;
    height: 2.25rem;
    justify-content: center;
    padding: 0;
    width: 2.25rem;
  }

  .navbar-mobile-toggle:hover {
    background: var(--color-accent);
  }

  .navbar-sticky {
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 40;
  }

  .pricing-card-actions {
    text-align: center;
  }

  .pricing-card-amount {
    color: var(--color-foreground);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    margin: var(--spacing-md) 0 var(--spacing-xs) 0;
  }

  .pricing-card-description {
    color: var(--color-muted-foreground);
    margin: 0;
  }

  .pricing-card-feature-item {
    padding-left: 1.5rem;
    position: relative;
  }

  .pricing-card-feature-item::before {
    color: var(--color-primary);
    content: "\2713";
    font-weight: var(--font-weight-bold);
    left: 0;
    position: absolute;
  }

  .pricing-card-features {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .pricing-card-header {
    text-align: center;
  }

  .pricing-card-wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
  }

  .privacy-indicator {
    border-top: 1px solid var(--color-border);
    color: var(--color-muted-foreground);
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) 0;
  }

  .privacy-indicator-new {
    color: var(--color-foreground);
  }

  .privacy-indicator-detail {
    max-width: 36rem;
    padding: var(--spacing-sm) 0;
  }

  .privacy-indicator-detail a {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .privacy-indicator-detail p {
    margin: 0 0 var(--spacing-xs) 0;
  }

  .privacy-indicator-trigger {
    align-items: center;
    display: inline-flex;
    gap: var(--spacing-xs);
  }

  .prose {
    color: var(--color-foreground);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    line-height: var(--font-leading-relaxed);
  }

  .prose > :first-child {
    margin-top: 0;
  }

  .prose > :last-child {
    margin-bottom: 0;
  }

  .prose > section {
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg) var(--spacing-xl);
  }

  .prose > section > :first-child {
    margin-top: 0;
  }

  .prose > section > :last-child {
    margin-bottom: 0;
  }

  .prose > section:nth-of-type(even) {
    background: var(--color-surface);
  }

  .prose a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }

  .prose a:hover {
    text-decoration-thickness: 2px;
  }

  .prose a:visited {
    color: var(--color-link-visited);
  }

  .prose blockquote {
    border-left: 3px solid var(--color-border);
    color: var(--color-muted-foreground);
    font-style: italic;
    margin: 0 0 1rem 0;
    padding-left: 1em;
  }

  .prose code {
    background: var(--color-accent);
    border-radius: var(--radius-sm);
    font-size: 0.875em;
    padding: 0.15em 0.35em;
  }

  .prose h1 {
    color: var(--color-foreground);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--font-tracking-tight);
    line-height: var(--font-leading-tight);
    margin: 2.5rem 0 1rem 0;
  }

  .prose h2 {
    color: var(--color-foreground);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--font-tracking-snug);
    line-height: var(--font-leading-snug);
    margin: 2rem 0 0.75rem 0;
  }

  .prose h3 {
    color: var(--color-foreground);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-leading-snug);
    margin: 1.5rem 0 0.5rem 0;
  }

  .prose h4 {
    color: var(--color-foreground);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    margin: 1.25rem 0 0.5rem 0;
  }

  .prose hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 2rem 0;
  }

  .prose img {
    border-radius: var(--radius-md);
    height: auto;
    max-width: 100%;
  }

  .prose li {
    margin-bottom: 0.25em;
  }

  .prose li > ol {
    margin-bottom: 0;
    margin-top: 0.25em;
  }

  .prose li > ul {
    margin-bottom: 0;
    margin-top: 0.25em;
  }

  .prose ol {
    list-style-type: decimal;
    margin: 0 0 1rem 0;
    padding-left: 1.5em;
  }

  .prose p {
    margin: 0 0 1rem 0;
  }

  .prose pre {
    background: var(--color-accent);
    border-radius: var(--radius-md);
    margin: 0 0 1rem 0;
    overflow-x: auto;
    padding: 1rem;
  }

  .prose pre code {
    background: none;
    font-size: 0.875em;
    padding: 0;
  }

  .prose strong {
    color: var(--color-foreground);
    font-weight: var(--font-weight-semibold);
  }

  .prose ul {
    list-style-type: disc;
    margin: 0 0 1rem 0;
    padding-left: 1.5em;
  }

  .section {
    width: 100%;
  }

  .section-heading {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--font-tracking-snug);
    line-height: var(--font-leading-tight);
    margin: 0 0 var(--spacing-md) 0;
  }

  .section-muted {
    background: var(--color-accent);
  }

  .section-padded {
    padding-bottom: var(--layout-section-gap);
    padding-top: var(--layout-section-gap);
  }

  .section-padded-lg {
    padding-bottom: var(--layout-section-gap-lg);
    padding-top: var(--layout-section-gap-lg);
  }

  .section-padded-sm {
    padding-bottom: var(--layout-section-gap-sm);
    padding-top: var(--layout-section-gap-sm);
  }

  .section-primary {
    background: var(--color-primary);
    color: var(--color-primary-foreground);
  }

  .section-subheading {
    color: var(--color-muted-foreground);
    font-size: var(--font-size-lg);
    line-height: var(--font-leading-relaxed);
    margin: 0 0 var(--spacing-lg) 0;
  }

  .section-surface {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
  }

  .separator {
    background: var(--color-border);
    flex-shrink: 0;
  }

  .separator-horizontal {
    height: 1px;
    width: 100%;
  }

  .separator-vertical {
    height: 100%;
    width: 1px;
  }

  .sheet-backdrop {
    background: var(--color-backdrop);
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity 300ms ease;
    z-index: 50;
  }

  .sheet-backdrop-open {
    opacity: 1;
    pointer-events: auto;
  }

  .sheet-close {
    cursor: pointer;
    display: contents;
  }

  .sheet-close-button {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-muted-foreground);
    cursor: pointer;
    display: inline-flex;
    height: 1.5rem;
    justify-content: center;
    opacity: 0.7;
    position: absolute;
    right: var(--spacing-md);
    top: var(--spacing-md);
    transition: opacity 150ms ease, background 150ms ease;
    width: 1.5rem;
  }

  .sheet-close-button:focus {
    box-shadow: 0 0 0 2px var(--color-ring-alpha);
    outline: none;
  }

  .sheet-close-button:hover {
    background: var(--color-accent);
    opacity: 1;
  }

  .sheet-content {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    box-shadow: 0 25px 50px -12px var(--color-shadow);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    overflow-y: auto;
    padding: var(--spacing-lg);
    position: fixed;
    transition: transform 300ms ease;
    z-index: 50;
  }

  .sheet-content-bottom {
    border-bottom: none;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    bottom: 0;
    height: auto;
    left: 0;
    max-height: 75%;
    right: 0;
    transform: translateY(100%);
  }

  .sheet-content-left {
    border-bottom-right-radius: var(--radius-lg);
    border-left: none;
    border-top-right-radius: var(--radius-lg);
    bottom: 0;
    left: 0;
    max-width: 24rem;
    top: 0;
    transform: translateX(-100%);
    width: 75%;
  }

  .sheet-content-open {
    transform: translate(0);
  }

  .sheet-content-right {
    border-bottom-left-radius: var(--radius-lg);
    border-right: none;
    border-top-left-radius: var(--radius-lg);
    bottom: 0;
    max-width: 24rem;
    right: 0;
    top: 0;
    transform: translateX(100%);
    width: 75%;
  }

  .sheet-content-top {
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    border-top: none;
    height: auto;
    left: 0;
    max-height: 75%;
    right: 0;
    top: 0;
    transform: translateY(-100%);
  }

  .sheet-description {
    color: var(--color-muted-foreground);
    font-size: var(--font-size-sm);
    margin: 0;
  }

  .sheet-footer {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-sm);
    justify-content: flex-end;
    margin-top: auto;
  }

  .sheet-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .sheet-title {
    color: var(--color-foreground);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-leading-tight);
    margin: 0;
  }

  .sheet-trigger {
    display: contents;
  }

  .showcase {
    align-items: center;
    display: grid;
    gap: var(--spacing-xl);
    grid-template-columns: var(--showcase-grid-columns);
  }

  .showcase-align-bottom {
    align-items: end;
  }

  .showcase-align-top {
    align-items: start;
  }

  .showcase-content {
  }

  .showcase-content-reversed {
    order: 2;
  }

  .showcase-media {
  }

  .showcase-media-narrow {
    grid-template-columns: var(--showcase-grid-columns-media-narrow);
  }

  .showcase-media-reversed {
    order: 1;
  }

  .showcase-media-wide {
    grid-template-columns: var(--showcase-grid-columns-media-wide);
  }

  .sidebar {
    background: var(--color-background);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: width 300ms ease, transform 300ms ease;
    width: var(--sidebar-width, 16rem);
  }

  .sidebar-backdrop {
    background: var(--color-backdrop);
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity 300ms ease;
    z-index: 40;
  }

  .sidebar-backdrop-open {
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar-collapsed {
    width: var(--sidebar-collapsed-width, 4rem);
  }

  .sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-sm);
  }

  .sidebar-footer {
    align-items: center;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-shrink: 0;
    gap: var(--spacing-sm);
    margin-top: auto;
    padding: var(--spacing-md);
  }

  .sidebar-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) 0;
  }

  .sidebar-group-label {
    color: var(--color-muted-foreground);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--font-tracking-wider);
    margin-bottom: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    text-transform: uppercase;
  }

  .sidebar-header {
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-shrink: 0;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
  }

  .sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .sidebar-menu-badge {
    background: var(--color-primary);
    border-radius: var(--radius-full);
    color: var(--color-primary-foreground);
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: 0.125rem var(--spacing-sm);
  }

  .sidebar-menu-button {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-foreground);
    cursor: pointer;
    display: flex;
    font-size: var(--font-size-sm);
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
    width: 100%;
  }

  .sidebar-menu-button:focus {
    box-shadow: 0 0 0 2px var(--color-ring-alpha);
    outline: none;
  }

  .sidebar-menu-button:hover {
    background: var(--color-accent);
    color: var(--color-accent-foreground);
  }

  .sidebar-menu-button-active {
    background: var(--color-accent);
    color: var(--color-accent-foreground);
    font-weight: var(--font-weight-medium);
  }

  .sidebar-menu-icon {
    flex-shrink: 0;
    height: 1.25rem;
    width: 1.25rem;
  }

  .sidebar-menu-item {
    display: block;
  }

  .sidebar-menu-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-menu-label-collapsed {
    display: none;
  }

  .sidebar-mobile {
    bottom: 0;
    left: 0;
    position: fixed;
    top: 0;
    transform: translateX(-100%);
    z-index: 50;
  }

  .sidebar-mobile-open {
    transform: translateX(0);
  }

  .sidebar-separator {
    background: var(--color-border);
    height: 1px;
    margin: var(--spacing-sm) 0;
  }

  .sidebar-trigger {
    align-items: center;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-foreground);
    cursor: pointer;
    display: inline-flex;
    height: 2.5rem;
    justify-content: center;
    transition: background 150ms ease, color 150ms ease;
    width: 2.5rem;
  }

  .sidebar-trigger:focus {
    box-shadow: 0 0 0 2px var(--color-ring-alpha);
    outline: none;
  }

  .sidebar-trigger:hover {
    background: var(--color-accent);
    color: var(--color-accent-foreground);
  }

  .testimonial-author {
    color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
    margin-top: var(--spacing-sm);
  }

  .testimonial-grid {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  .testimonial-quote {
    color: var(--color-muted-foreground);
    font-size: var(--font-size-lg);
    font-style: italic;
    line-height: var(--font-leading-relaxed);
    margin: 0;
  }

  .testimonial-role {
    color: var(--color-muted-foreground);
    font-size: var(--font-size-sm);
  }

  .theme-toggle {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-foreground);
    cursor: pointer;
    display: inline-flex;
    height: 2.25rem;
    justify-content: center;
    transition: background var(--transition-fast) ease, color var(--transition-fast) ease;
    width: 2.25rem;
  }

  .theme-toggle:focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 2px;
  }

  .theme-toggle:hover {
    background: var(--color-accent);
  }

  .theme-toggle-icon {
    height: 1.25rem;
    width: 1.25rem;
  }

  .theme-toggle-moon {
    display: block;
  }

  .theme-toggle-sun {
    display: none;
  }

  .toast {
    max-width: 26rem;
    opacity: 0;
    padding: var(--spacing-md);
    pointer-events: auto;
    position: fixed;
    transform: translateY(1rem);
    transition: opacity 300ms ease-out, transform 300ms ease-out;
    width: 100%;
    z-index: 50;
  }

  .toast-bottom-center {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .toast-bottom-left {
    bottom: 0;
    left: 0;
  }

  .toast-bottom-right {
    bottom: 0;
    right: 0;
  }

  .toast-top-center {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }

  .toast-top-left {
    left: 0;
    top: 0;
  }

  .toast-top-right {
    right: 0;
    top: 0;
  }

  .toast-card {
    align-items: center;
    background: var(--color-popover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px var(--color-shadow);
    color: var(--color-popover-foreground);
    display: flex;
    overflow: hidden;
    padding: 1.25rem var(--spacing-md) var(--spacing-md);
    position: relative;
    width: 100%;
  }

  .toast-close {
    flex-shrink: 0;
    margin-left: 0.5rem;
  }

  .toast-content {
    flex: 1;
    min-width: 0;
  }

  .toast-description {
    font-size: var(--font-size-sm);
    margin: 0.25rem 0 0 0;
    opacity: 0.9;
  }

  .toast-hidden {
    opacity: 0;
    transform: translateY(1rem);
  }

  .toast-icon {
    flex-shrink: 0;
    margin-right: 0.75rem;
  }

  .toast-icon-error {
    color: var(--color-error);
  }

  .toast-icon-info {
    color: var(--color-info);
  }

  .toast-icon-success {
    color: var(--color-success);
  }

  .toast-icon-warning {
    color: var(--color-warning);
  }

  .toast-progress {
    height: 0.25rem;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
  }

  .toast-progress-bar {
    background: var(--color-muted-foreground);
    height: 100%;
    transform-origin: left;
    transition: transform linear;
    width: 100%;
  }

  .toast-progress-default {
    background: var(--color-muted-foreground);
  }

  .toast-progress-error {
    background: var(--color-error);
  }

  .toast-progress-info {
    background: var(--color-info);
  }

  .toast-progress-success {
    background: var(--color-success);
  }

  .toast-progress-warning {
    background: var(--color-warning);
  }

  .toast-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .toast-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .toc {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-sm);
    gap: var(--spacing-sm);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }

  .toc-item {
    display: block;
  }

  .toc-item-h3 {
    padding-left: var(--spacing-sm);
  }

  .toc-item-h4 {
    padding-left: var(--spacing-md);
  }

  .toc-link {
    border-left: 2px solid transparent;
    color: var(--color-muted-foreground);
    display: block;
    line-height: var(--font-leading-snug);
    margin-left: -1px;
    padding: var(--spacing-xs) var(--spacing-sm);
    text-decoration: none;
    transition: color var(--transition-fast), border-color var(--transition-fast);
  }

  .toc-link:focus-visible {
    box-shadow: 0 0 0 2px var(--color-ring-alpha);
    color: var(--color-foreground);
    outline: none;
  }

  .toc-link:hover {
    color: var(--color-foreground);
  }

  .toc-link-active {
    border-left-color: var(--color-link);
    color: var(--color-link);
    font-weight: var(--font-weight-medium);
  }

  .toc-list {
    border-left: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .toc-sticky {
    position: sticky;
    top: var(--spacing-lg);
  }

  .toc-title {
    color: var(--color-foreground);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    padding: 0 0 var(--spacing-xs) 0;
  }

}

@media (min-width: 768px) {
  :root {
    --navbar-actions-display: flex;
    --navbar-menu-display: flex;
    --navbar-mobile-toggle-display: none;
    --showcase-grid-columns: 1fr 1fr;
    --showcase-grid-columns-media-narrow: 3fr 2fr;
    --showcase-grid-columns-media-wide: 2fr 3fr;
  }
}


@container doc-layout (max-width: 1024px) {
  .doc-layout {
    grid-template-columns: 1fr;
  }
  .doc-layout-sidebar {
    display: none;
  }
  .doc-layout-toc {
    display: none;
  }
}