@layer klods.reset, klods.tokens, klods.themes, klods.layout, klods.components, klods.utilities;
@layer klods.reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body {
    margin: 0;
    min-height: 100dvh;
    font-family: var(--klods-font-sans);
    font-size: var(--klods-font-size-base);
    line-height: var(--klods-line-height-base);
    color: var(--klods-color-fg);
    background: var(--klods-color-bg);
  }
  img,
  picture,
  svg,
  video {
    display: block;
    max-width: 100%;
  }
  pre,
  code {
    font-family: var(--klods-font-mono);
  }
  pre {
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }
  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }
  a {
    color: var(--klods-color-link);
  }
}
@layer klods.tokens {
  :root {
    --klods-color-bg: #ffffff;
    --klods-color-fg: #1a1a1a;
    --klods-color-muted: #6b7280;
    --klods-color-surface: #f5f5f7;
    --klods-color-surface-2: #ececef;
    --klods-color-border: #e5e7eb;
    --klods-color-accent: #5b5bd6;
    --klods-color-accent-fg: #ffffff;
    --klods-color-link: var(--klods-color-accent);
    --klods-color-danger: #d1335b;
    --klods-color-success: #2f9e44;
    --klods-color-warning: #d97706;
    --klods-color-info: #2563eb;
    --klods-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --klods-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --klods-font-size-base: 16px;
    --klods-font-size-sm: 0.875rem;
    --klods-font-size-lg: 1.125rem;
    --klods-font-size-xl: 1.5rem;
    --klods-font-size-2xl: 2rem;
    --klods-font-size-3xl: 2.5rem;
    --klods-line-height-base: 1.5;
    --klods-line-height-tight: 1.2;
    --klods-space-0: 0;
    --klods-space-1: 0.25rem;
    --klods-space-2: 0.5rem;
    --klods-space-3: 0.75rem;
    --klods-space-4: 1rem;
    --klods-space-5: 1.5rem;
    --klods-space-6: 2rem;
    --klods-space-7: 3rem;
    --klods-space-8: 4rem;
    --klods-radius-sm: 4px;
    --klods-radius-md: 8px;
    --klods-radius-lg: 16px;
    --klods-radius-pill: 999px;
    --klods-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --klods-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --klods-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.2);
    --klods-content-max: 72rem;
    --klods-content-narrow: 48rem;
    --klods-sidebar-width: 16rem;
    --klods-header-height: 4rem;
    --klods-footer-height: auto;
    --klods-gutter: var(--klods-space-5);
    --klods-transition: 150ms ease;
    --klods-tabs-active: var(--klods-color-accent);
    --klods-code-bg: #f6f8fa;
    --klods-code-fg: #24292f;
    --klods-code-keyword: #cf222e;
    --klods-code-string: #0a3069;
    --klods-code-comment: #6e7781;
    --klods-code-number: #0550ae;
    --klods-code-type: #953800;
    --klods-code-attr: #116329;
    --klods-code-tag: #116329;
    --klods-code-title: #8250df;
  }
  @media (max-width: 48rem) {
    :root {
      --klods-gutter: var(--klods-space-4);
    }
  }
}
@layer klods.themes {
  [data-theme=dark] {
    --klods-color-bg: #0f1115;
    --klods-color-fg: #ececef;
    --klods-color-muted: #9aa0aa;
    --klods-color-surface: #181b22;
    --klods-color-surface-2: #1f232c;
    --klods-color-border: #2a2f3a;
    --klods-color-accent: #8a8aff;
    --klods-color-accent-fg: #0f1115;
    --klods-color-info: #60a5fa;
    --klods-color-success: #4ade80;
    --klods-color-warning: #fbbf24;
    --klods-color-danger: #f87171;
    --klods-code-bg: #161b22;
    --klods-code-fg: #e6edf3;
    --klods-code-keyword: #ff7b72;
    --klods-code-string: #a5d6ff;
    --klods-code-comment: #8b949e;
    --klods-code-number: #79c0ff;
    --klods-code-type: #ffa657;
    --klods-code-attr: #7ee787;
    --klods-code-tag: #7ee787;
    --klods-code-title: #d2a8ff;
  }
  [data-theme=playful] {
    --klods-color-bg: #fff7fb;
    --klods-color-fg: #2a1a3a;
    --klods-color-surface: #ffe8f3;
    --klods-color-surface-2: #ffd6ea;
    --klods-color-border: #f4bfd9;
    --klods-color-accent: #e63990;
    --klods-color-accent-fg: #ffffff;
    --klods-color-info: #7c3aed;
    --klods-color-success: #0d9488;
    --klods-color-warning: #ff6b35;
    --klods-color-danger: #e63990;
    --klods-radius-sm: 8px;
    --klods-radius-md: 16px;
    --klods-radius-lg: 28px;
    --klods-font-sans: "Comic Sans MS", "Comic Sans", ui-rounded, system-ui, sans-serif;
    --klods-code-bg: #ffeef8;
    --klods-code-fg: #2a1a3a;
    --klods-code-keyword: #e63990;
    --klods-code-string: #7c3aed;
    --klods-code-comment: #b06090;
    --klods-code-number: #ff6b35;
    --klods-code-type: #ff8c00;
    --klods-code-attr: #0d9488;
    --klods-code-tag: #0d9488;
    --klods-code-title: #9333ea;
  }
  [data-theme=brutalist] {
    --klods-color-bg: #ffffff;
    --klods-color-fg: #000000;
    --klods-color-surface: #ffffff;
    --klods-color-surface-2: #f0f0f0;
    --klods-color-border: #000000;
    --klods-color-accent: #ffe600;
    --klods-color-accent-fg: #000000;
    --klods-color-link: #000000;
    --klods-color-info: #000000;
    --klods-color-success: #000000;
    --klods-color-warning: #000000;
    --klods-color-danger: #000000;
    --klods-radius-sm: 0;
    --klods-radius-md: 0;
    --klods-radius-lg: 0;
    --klods-radius-pill: 0;
    --klods-shadow-sm: 4px 4px 0 #000;
    --klods-shadow-md: 6px 6px 0 #000;
    --klods-shadow-lg: 10px 10px 0 #000;
    --klods-font-sans: "Courier New", ui-monospace, monospace;
    --klods-code-bg: #f0f0f0;
    --klods-code-fg: #000000;
    --klods-code-keyword: #000000;
    --klods-code-string: #333333;
    --klods-code-comment: #666666;
    --klods-code-number: #000000;
    --klods-code-type: #000000;
    --klods-code-attr: #000000;
    --klods-code-tag: #000000;
    --klods-code-title: #000000;
    --klods-tabs-active: var(--klods-color-fg);
    --klods-breadcrumb-link: var(--klods-color-fg);
  }
}
@layer klods.layout {
  .klods-page {
    display: grid;
    min-height: 100dvh;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "header" "content" "footer";
  }
  .klods-page--with-sidebar {
    grid-template-columns: var(--klods-sidebar-width) 1fr;
    grid-template-areas: "header  header" "sidebar content" "footer  footer";
  }
  .klods-page--with-sidebar.klods-page--sidebar-trailing {
    grid-template-columns: 1fr var(--klods-sidebar-width);
    grid-template-areas: "header  header" "content sidebar" "footer  footer";
  }
  .klods-header {
    grid-area: header;
    display: flex;
    align-items: center;
    gap: var(--klods-space-4);
    padding: 0 var(--klods-gutter);
    min-height: var(--klods-header-height);
    background: var(--klods-color-surface);
    border-bottom: 1px solid var(--klods-color-border);
  }
  .klods-page--sticky-header .klods-header {
    position: sticky;
    top: 0;
    z-index: 10;
  }
  html:has(.klods-page--sticky-header) {
    scroll-padding-top: var(--klods-header-height);
  }
  .klods-sidebar {
    grid-area: sidebar;
    padding: var(--klods-gutter);
    background: var(--klods-color-surface);
    border-right: 1px solid var(--klods-color-border);
  }
  .klods-sidebar > * {
    position: sticky;
    top: var(--klods-gutter);
    max-height: calc(100dvh - var(--klods-gutter) * 2);
    overflow-y: auto;
  }
  .klods-page--sticky-header .klods-sidebar > * {
    top: calc(var(--klods-header-height) + var(--klods-gutter));
    max-height: calc(100dvh - var(--klods-header-height) - var(--klods-gutter) * 2);
  }
  .klods-page--sidebar-trailing .klods-sidebar {
    border-right: none;
    border-left: 1px solid var(--klods-color-border);
  }
  .klods-content {
    grid-area: content;
    padding: var(--klods-gutter);
    min-width: 0;
    max-width: var(--klods-content-max);
    margin-inline: auto;
    width: 100%;
  }
  .klods-content--narrow {
    max-width: var(--klods-content-narrow);
    margin-inline: auto;
    width: 100%;
  }
  .klods-footer {
    grid-area: footer;
    padding: var(--klods-gutter);
    background: var(--klods-color-surface);
    border-top: 1px solid var(--klods-color-border);
    color: var(--klods-color-muted);
  }
  @media (max-width: 48rem) {
    .klods-page--with-sidebar,
    .klods-page--with-sidebar.klods-page--sidebar-trailing {
      grid-template-columns: 1fr;
      grid-template-areas: "header" "content" "footer";
    }
    .klods-page--with-sidebar > .klods-sidebar {
      display: none;
      position: fixed;
      inset-block: 0;
      inset-inline-start: 0;
      width: min(18rem, 85vw);
      z-index: 7;
      border-right: 1px solid var(--klods-color-border);
      border-bottom: none;
      overflow-y: auto;
      box-shadow: var(--klods-shadow-lg);
    }
    .klods-page[data-sidebar-open] > .klods-sidebar {
      display: block;
    }
    .klods-page[data-sidebar-open]::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 5;
      background: rgba(0, 0, 0, 0.4);
    }
    .klods-page--with-sidebar > .klods-header {
      isolation: isolate;
      z-index: 6;
    }
    .klods-page--with-sidebar > .klods-sidebar > * {
      position: static;
      max-height: none;
      overflow-y: visible;
    }
  }
  .klods-sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--klods-space-2);
    border-radius: var(--klods-radius-sm);
    background: transparent;
    border: 1px solid transparent;
    color: inherit;
    cursor: pointer;
    line-height: 1;
    transition: background var(--klods-transition);
  }
  .klods-sidebar-toggle::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,<svg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><rect y='3' width='20' height='2' rx='1'/><rect y='9' width='20' height='2' rx='1'/><rect y='15' width='20' height='2' rx='1'/></svg>");
    mask-repeat: no-repeat;
    mask-size: contain;
  }
  .klods-sidebar-toggle:hover, .klods-sidebar-toggle:focus-visible {
    background: var(--klods-color-surface-2);
  }
  .klods-sidebar-toggle:focus-visible {
    outline: 2px solid var(--klods-color-accent);
    outline-offset: 2px;
  }
  @media (max-width: 48rem) {
    .klods-sidebar-toggle {
      display: inline-flex;
    }
  }
  .klods-section {
    scroll-margin-top: var(--klods-space-5);
  }
  .klods-section + .klods-section {
    margin-block-start: var(--klods-space-7);
    padding-block-start: var(--klods-space-6);
    border-block-start: 1px solid var(--klods-color-border);
  }
}
@layer klods.components {
  .klods-nav {
    display: flex;
    align-items: center;
    gap: var(--klods-space-4);
  }
  .klods-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--klods-space-3);
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .klods-nav__link {
    display: inline-flex;
    align-items: center;
    padding: var(--klods-space-2) var(--klods-space-3);
    border-radius: var(--klods-radius-sm);
    color: inherit;
    text-decoration: none;
    transition: background var(--klods-transition);
  }
  .klods-nav__link:hover,
  .klods-nav__link:focus-visible {
    background: var(--klods-color-surface-2);
  }
  .klods-nav__link--active {
    background: var(--klods-color-accent);
    color: var(--klods-color-accent-fg);
  }
  .klods-nav__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--klods-space-2);
    border-radius: var(--klods-radius-sm);
    background: transparent;
    border: 1px solid transparent;
    color: inherit;
    cursor: pointer;
    line-height: 1;
    transition: background var(--klods-transition);
  }
  .klods-nav__toggle:hover, .klods-nav__toggle:focus-visible {
    background: var(--klods-color-surface-2);
  }
  .klods-nav__toggle:focus-visible {
    outline: 2px solid var(--klods-color-accent);
    outline-offset: 2px;
  }
  @media (max-width: 48rem) {
    .klods-nav--collapse {
      flex-wrap: wrap;
    }
    .klods-nav--collapse .klods-nav__toggle {
      display: inline-flex;
    }
    .klods-nav--collapse .klods-nav__list {
      display: none;
      width: 100%;
      flex-direction: column;
      align-items: stretch;
      gap: var(--klods-space-1);
      padding-block: var(--klods-space-2);
    }
    .klods-nav--collapse[data-nav-open] .klods-nav__list {
      display: flex;
    }
  }
  .klods-toc {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--klods-space-1);
  }
  .klods-toc a {
    display: block;
    padding: var(--klods-space-2) var(--klods-space-3);
    border-radius: var(--klods-radius-sm);
    color: inherit;
    text-decoration: none;
    transition: background var(--klods-transition);
  }
  .klods-toc a:hover {
    background: var(--klods-color-surface-2);
  }
  .klods-toc--sub {
    padding-inline-start: var(--klods-space-3);
    margin-top: var(--klods-space-1);
  }
  .klods-toc--sub a {
    font-size: var(--klods-font-size-sm);
    color: var(--klods-color-muted);
    padding: var(--klods-space-1) var(--klods-space-3);
  }
  .klods-toc--sub a:hover {
    color: var(--klods-color-fg);
  }
  .klods-card {
    display: flex;
    flex-direction: column;
    gap: var(--klods-space-3);
    padding: var(--klods-space-5);
    background: var(--klods-color-surface);
    border: 1px solid var(--klods-color-border);
    border-radius: var(--klods-radius-md);
  }
  .klods-card--elevated {
    border: none;
    box-shadow: var(--klods-shadow-lg);
  }
  .klods-card__title {
    margin: 0;
    font-size: var(--klods-font-size-lg);
    line-height: var(--klods-line-height-tight);
  }
  .klods-card__body {
    margin: 0;
  }
  .klods-card__footer {
    display: flex;
    gap: var(--klods-space-3);
    padding-top: var(--klods-space-3);
    border-top: 1px solid var(--klods-color-border);
  }
  .klods-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--klods-space-2);
    padding: var(--klods-space-2) var(--klods-space-4);
    font: inherit;
    font-weight: 600;
    color: var(--klods-color-fg);
    background: var(--klods-color-surface-2);
    border: 1px solid var(--klods-color-border);
    border-radius: var(--klods-radius-sm);
    cursor: pointer;
    transition: background var(--klods-transition), filter var(--klods-transition), transform var(--klods-transition);
  }
  .klods-button:hover {
    filter: brightness(0.95);
  }
  .klods-button:active {
    transform: translateY(1px);
  }
  .klods-button--primary {
    background: var(--klods-color-accent);
    color: var(--klods-color-accent-fg);
    border-color: transparent;
  }
  .klods-button--primary:hover {
    filter: brightness(0.95);
    background: var(--klods-color-accent);
  }
  .klods-button--danger {
    background: var(--klods-color-danger);
    color: #fff;
    border-color: transparent;
  }
  .klods-button--danger:hover {
    filter: brightness(0.9);
    background: var(--klods-color-danger);
  }
  .klods-button--ghost {
    background: transparent;
    border-color: transparent;
  }
  .klods-button--ghost:hover {
    background: var(--klods-color-surface-2);
    filter: none;
  }
  .klods-button-group {
    display: inline-flex;
    border: 1px solid var(--klods-color-border);
    border-radius: var(--klods-radius-pill);
  }
  .klods-button-group > .klods-button {
    border-radius: 0;
    border-color: transparent;
    position: relative;
  }
  .klods-button-group > .klods-button:not(:last-child) {
    border-inline-end: 1px solid var(--klods-color-border);
  }
  .klods-button-group > .klods-button:first-child {
    border-start-start-radius: var(--klods-radius-pill);
    border-end-start-radius: var(--klods-radius-pill);
  }
  .klods-button-group > .klods-button:last-child {
    border-start-end-radius: var(--klods-radius-pill);
    border-end-end-radius: var(--klods-radius-pill);
  }
  .klods-button-group > .klods-button:hover, .klods-button-group > .klods-button:focus-visible {
    z-index: 1;
  }
  .klods-button-group > .klods-button[aria-pressed=true] {
    background: var(--klods-color-accent);
    color: var(--klods-color-accent-fg);
    border-color: var(--klods-color-accent);
    z-index: 1;
  }
  .klods-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem var(--klods-space-2);
    font-size: var(--klods-font-size-sm);
    font-weight: 600;
    color: var(--klods-color-fg);
    background: var(--klods-color-surface-2);
    border-radius: var(--klods-radius-pill);
  }
  .klods-badge--accent {
    background: var(--klods-color-accent);
    color: var(--klods-color-accent-fg);
  }
  .klods-badge--success {
    background: var(--klods-color-success);
    color: #fff;
  }
  .klods-badge--danger {
    background: var(--klods-color-danger);
    color: #fff;
  }
  .klods-alert {
    padding: var(--klods-space-4);
    border-radius: var(--klods-radius-md);
    border: 1px solid var(--klods-color-border);
    background: var(--klods-color-surface);
  }
  .klods-alert--info {
    border-color: var(--klods-color-info);
    background: color-mix(in srgb, var(--klods-color-info) 12%, var(--klods-color-surface));
  }
  .klods-alert--success {
    border-color: var(--klods-color-success);
    background: color-mix(in srgb, var(--klods-color-success) 12%, var(--klods-color-surface));
  }
  .klods-alert--warning {
    border-color: var(--klods-color-warning);
    background: color-mix(in srgb, var(--klods-color-warning) 12%, var(--klods-color-surface));
  }
  .klods-alert--danger {
    border-color: var(--klods-color-danger);
    background: color-mix(in srgb, var(--klods-color-danger) 12%, var(--klods-color-surface));
  }
  .klods-prose > * + * {
    margin-block-start: var(--klods-space-4);
  }
  .klods-prose h1,
  .klods-prose h2,
  .klods-prose h3 {
    line-height: var(--klods-line-height-tight);
  }
  .klods-prose code {
    font-family: var(--klods-font-mono);
    font-size: 0.95em;
    padding: 0.1em 0.35em;
    background: var(--klods-color-surface-2);
    border-radius: var(--klods-radius-sm);
  }
  .klods-prose pre {
    font-family: var(--klods-font-mono);
    padding: var(--klods-space-4);
    overflow-x: auto;
    background: var(--klods-code-bg);
    color: var(--klods-code-fg);
    border-radius: var(--klods-radius-md);
  }
  .klods-prose pre code {
    padding: 0;
    background: transparent;
  }
  code {
    font-size: 0.9em;
    padding: 0.1em 0.35em;
    background: var(--klods-color-surface-2);
    border-radius: var(--klods-radius-sm);
  }
  pre {
    padding: var(--klods-space-4);
    background: var(--klods-code-bg);
    color: var(--klods-code-fg);
    border-radius: var(--klods-radius-md);
  }
  pre code {
    padding: 0;
    background: transparent;
    font-size: inherit;
    color: inherit;
  }
  .hljs-keyword,
  .hljs-operator,
  .hljs-selector-tag {
    color: var(--klods-code-keyword);
  }
  .hljs-string,
  .hljs-template-literal,
  .hljs-regexp {
    color: var(--klods-code-string);
  }
  .hljs-comment,
  .hljs-meta {
    color: var(--klods-code-comment);
    font-style: italic;
  }
  .hljs-number,
  .hljs-literal {
    color: var(--klods-code-number);
  }
  .hljs-title,
  .hljs-title.function_,
  .hljs-title.class_ {
    color: var(--klods-code-title);
  }
  .hljs-type,
  .hljs-built_in {
    color: var(--klods-code-type);
  }
  .hljs-attr,
  .hljs-attribute {
    color: var(--klods-code-attr);
  }
  .hljs-name,
  .hljs-tag {
    color: var(--klods-code-tag);
  }
  .klods-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .klods-table {
    width: 100%;
    border-collapse: collapse;
  }
  .klods-table th,
  .klods-table td {
    padding: var(--klods-space-3) var(--klods-space-4);
    text-align: left;
    border-bottom: 1px solid var(--klods-color-border);
  }
  .klods-table th {
    font-weight: 600;
    background: var(--klods-color-surface);
  }
  .klods-table--striped tbody tr:nth-child(even) td {
    background: var(--klods-color-surface);
  }
  .klods-table--dense th,
  .klods-table--dense td {
    padding: var(--klods-space-2) var(--klods-space-3);
  }
  .klods-box {
    padding: var(--klods-space-3);
    background: var(--klods-color-surface-2);
    border-radius: var(--klods-radius-sm);
    text-align: center;
  }
  .klods-muted {
    color: var(--klods-color-muted);
  }
  .klods-text-center {
    text-align: center;
  }
  .klods-lead {
    font-size: var(--klods-font-size-lg);
    color: var(--klods-color-muted);
  }
  .klods-form {
    display: flex;
    flex-direction: column;
    gap: var(--klods-space-5);
  }
  .klods-field {
    display: flex;
    flex-direction: column;
    gap: var(--klods-space-2);
  }
  .klods-label {
    font-size: var(--klods-font-size-sm);
    font-weight: 600;
    color: var(--klods-color-fg);
  }
  .klods-label--required::after {
    content: " *";
    color: var(--klods-color-danger);
    font-weight: 400;
  }
  .klods-input,
  .klods-select,
  .klods-textarea {
    display: block;
    width: 100%;
    padding: var(--klods-space-2) var(--klods-space-3);
    font: inherit;
    color: var(--klods-color-fg);
    background: var(--klods-color-bg);
    border: 1px solid var(--klods-color-border);
    border-radius: var(--klods-radius-sm);
    transition: border-color var(--klods-transition), box-shadow var(--klods-transition);
    appearance: none;
  }
  .klods-input::placeholder,
  .klods-textarea::placeholder {
    color: var(--klods-color-muted);
  }
  .klods-input:hover,
  .klods-select:hover,
  .klods-textarea:hover {
    border-color: var(--klods-color-muted);
  }
  .klods-input:focus,
  .klods-select:focus,
  .klods-textarea:focus {
    outline: none;
    border-color: var(--klods-color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--klods-color-accent) 20%, transparent);
  }
  .klods-input:disabled,
  .klods-select:disabled,
  .klods-textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--klods-color-surface-2);
  }
  .klods-input--sm {
    padding: var(--klods-space-1) var(--klods-space-2);
    font-size: var(--klods-font-size-sm);
  }
  .klods-input--lg {
    padding: var(--klods-space-3) var(--klods-space-4);
    font-size: var(--klods-font-size-lg);
  }
  .klods-input--range {
    display: flex;
    align-items: center;
    gap: var(--klods-space-3);
    cursor: default;
  }
  .klods-input--range input {
    flex: 1 1 auto;
    padding: 0;
    border: none;
    background: transparent;
    appearance: auto;
    accent-color: var(--klods-color-accent);
  }
  .klods-input--range output {
    min-width: 3ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .klods-input--color {
    display: flex;
    align-items: center;
    gap: var(--klods-space-3);
  }
  .klods-input--color input {
    width: 2rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    background: none;
    appearance: auto;
    cursor: pointer;
  }
  .klods-select-wrapper {
    position: relative;
    display: block;
  }
  .klods-select-wrapper::after {
    content: "";
    position: absolute;
    inset-inline-end: var(--klods-space-3);
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    background-color: var(--klods-color-muted);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
    pointer-events: none;
  }
  .klods-select-wrapper:has(.klods-select:disabled)::after {
    opacity: 0.5;
  }
  .klods-select {
    padding-inline-end: calc(var(--klods-space-3) * 2 + 1rem);
  }
  .klods-textarea {
    resize: vertical;
    min-height: 7rem;
  }
  .klods-help {
    font-size: var(--klods-font-size-sm);
    color: var(--klods-color-muted);
    margin-top: calc(var(--klods-space-1) - var(--klods-space-2));
  }
  .klods-error {
    font-size: var(--klods-font-size-sm);
    color: var(--klods-color-danger);
    display: none;
    margin-top: calc(var(--klods-space-1) - var(--klods-space-2));
  }
  .klods-field--invalid .klods-input,
  .klods-field--invalid .klods-select,
  .klods-field--invalid .klods-textarea {
    border-color: var(--klods-color-danger);
  }
  .klods-field--invalid .klods-input:focus,
  .klods-field--invalid .klods-select:focus,
  .klods-field--invalid .klods-textarea:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--klods-color-danger) 20%, transparent);
  }
  .klods-field--invalid .klods-error {
    display: block;
  }
  .klods-field--invalid .klods-help {
    display: none;
  }
  .klods-checkbox,
  .klods-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--klods-space-2);
    cursor: pointer;
    user-select: none;
  }
  .klods-checkbox input[type=checkbox],
  .klods-checkbox input[type=radio],
  .klods-radio input[type=checkbox],
  .klods-radio input[type=radio] {
    accent-color: var(--klods-color-accent);
    width: 1rem;
    height: 1rem;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
  }
  .klods-checkbox:has(input:disabled),
  .klods-radio:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .klods-checkbox:has(input:disabled) input,
  .klods-radio:has(input:disabled) input {
    cursor: not-allowed;
  }
  .klods-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--klods-space-3);
    cursor: pointer;
    user-select: none;
  }
  .klods-switch:has(.klods-switch__input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .klods-switch__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .klods-switch__track {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 2.5rem;
    height: 1.5rem;
    background: var(--klods-color-border);
    border-radius: var(--klods-radius-pill);
    transition: background var(--klods-transition);
  }
  .klods-switch__track::after {
    content: "";
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1.125rem;
    height: 1.125rem;
    background: var(--klods-color-bg);
    border-radius: 50%;
    box-shadow: var(--klods-shadow-sm);
    transition: transform var(--klods-transition);
  }
  .klods-switch__input:checked + .klods-switch__track {
    background: var(--klods-color-accent);
  }
  .klods-switch__input:checked + .klods-switch__track::after {
    transform: translateX(1rem);
  }
  .klods-switch__input:focus-visible + .klods-switch__track {
    outline: 2px solid var(--klods-color-accent);
    outline-offset: 2px;
  }
  .klods-switch__label {
    line-height: var(--klods-line-height-tight);
  }
  .klods-switch--reverse {
    display: flex;
    width: 100%;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  @media (max-width: 48rem) {
    .klods-input,
    .klods-select {
      min-height: 2.75rem;
    }
    .klods-checkbox,
    .klods-radio {
      min-height: 2.75rem;
    }
  }
  dialog.klods-modal {
    border: none;
    padding: 0;
    background: transparent;
    color: inherit;
    max-width: min(90vw, 32rem);
    width: 100%;
    margin: auto;
    opacity: 0;
    transform: translateY(-0.75rem) scale(0.97);
    transition: opacity var(--klods-transition), transform var(--klods-transition), overlay var(--klods-transition) allow-discrete, display var(--klods-transition) allow-discrete;
  }
  dialog.klods-modal[open] {
    opacity: 1;
    transform: none;
  }
  dialog.klods-modal::backdrop {
    background: oklch(0% 0 0deg / 0.69);
    backdrop-filter: blur(4px);
    transition: background var(--klods-transition), overlay var(--klods-transition) allow-discrete, display var(--klods-transition) allow-discrete;
  }
  @starting-style {
    dialog.klods-modal[open] {
      opacity: 0;
      transform: translateY(-0.75rem) scale(0.97);
    }
    dialog.klods-modal[open]::backdrop {
      background: oklch(0% 0 0deg / 0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    dialog.klods-modal {
      transition: none;
    }
  }
  .klods-modal__panel {
    background: var(--klods-color-surface);
    border: 1px solid var(--klods-color-border);
    border-radius: var(--klods-radius-lg);
    padding: var(--klods-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--klods-space-4);
  }
  .klods-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--klods-space-3);
  }
  .klods-modal__title {
    font-size: var(--klods-font-size-lg);
    font-weight: 600;
    margin: 0;
  }
  .klods-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--klods-space-1);
    border: 1px solid transparent;
    border-radius: var(--klods-radius-sm);
    background: transparent;
    color: var(--klods-color-muted);
    cursor: pointer;
    line-height: 1;
    transition: background var(--klods-transition), color var(--klods-transition);
    flex-shrink: 0;
  }
  .klods-modal__close::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='black' stroke-linecap='round' stroke-width='1.75' d='M4 4l8 8M12 4L4 12'/></svg>");
    mask-repeat: no-repeat;
    mask-size: contain;
  }
  .klods-modal__close:hover, .klods-modal__close:focus-visible {
    background: var(--klods-color-surface-2);
    color: inherit;
  }
  .klods-modal__close:focus-visible {
    outline: 2px solid var(--klods-color-accent);
    outline-offset: 2px;
  }
  .klods-modal__body {
    color: var(--klods-color-muted);
    line-height: var(--klods-line-height);
  }
  .klods-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--klods-space-3);
    justify-content: flex-end;
  }
  .klods-tabs {
    display: flex;
    flex-direction: column;
  }
  .klods-tabs__list {
    display: flex;
    border-bottom: 2px solid var(--klods-color-border);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .klods-tabs__list::-webkit-scrollbar {
    display: none;
  }
  .klods-tabs__tab {
    position: relative;
    padding: var(--klods-space-2) var(--klods-space-4);
    background: transparent;
    border: none;
    color: var(--klods-color-muted);
    font: inherit;
    font-size: var(--klods-font-size-sm);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--klods-transition);
  }
  .klods-tabs__tab::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    border-radius: var(--klods-radius-sm) var(--klods-radius-sm) 0 0;
    transition: background var(--klods-transition);
  }
  .klods-tabs__tab:hover {
    color: var(--klods-tabs-active);
  }
  .klods-tabs__tab:focus-visible {
    outline: 2px solid var(--klods-color-accent);
    outline-offset: -2px;
    border-radius: var(--klods-radius-sm);
  }
  .klods-tabs__tab--active {
    color: var(--klods-tabs-active);
  }
  .klods-tabs__tab--active::after {
    background: var(--klods-tabs-active);
  }
  .klods-tabs__panel {
    padding-top: var(--klods-space-4);
  }
  .klods-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--klods-font-size-sm);
  }
  .klods-breadcrumb__item {
    display: inline-flex;
    align-items: center;
  }
  .klods-breadcrumb__item:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    color: var(--klods-color-muted);
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M5 2l6 6-6 6'/></svg>");
    mask-repeat: no-repeat;
    mask-size: contain;
    flex-shrink: 0;
    margin-inline: var(--klods-space-2);
  }
  .klods-breadcrumb__link {
    color: var(--klods-breadcrumb-link, var(--klods-color-accent));
    text-decoration: none;
  }
  .klods-breadcrumb__link:hover {
    text-decoration: underline;
  }
  .klods-breadcrumb__link:focus-visible {
    outline: 2px solid var(--klods-breadcrumb-link, var(--klods-color-accent));
    outline-offset: 2px;
    border-radius: var(--klods-radius-sm);
  }
  .klods-breadcrumb__item[aria-current=page] {
    color: var(--klods-color-muted);
  }
  .klods-toast-region {
    position: fixed;
    bottom: var(--klods-space-5);
    right: var(--klods-space-5);
    z-index: 20;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--klods-space-2);
    width: min(100vw - var(--klods-space-5) * 2, 22rem);
    pointer-events: none;
  }
  @media (max-width: 30rem) {
    .klods-toast-region {
      right: var(--klods-space-3);
      bottom: var(--klods-space-3);
      width: calc(100vw - var(--klods-space-3) * 2);
    }
  }
  .klods-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--klods-space-3);
    padding: var(--klods-space-3) var(--klods-space-4);
    background: var(--klods-color-surface);
    border: 1px solid var(--klods-color-border);
    border-radius: var(--klods-radius-md);
    box-shadow: 0 4px 12px oklch(0% 0 0deg / 0.12), 0 1px 3px oklch(0% 0 0deg / 0.08);
    pointer-events: auto;
    font-size: var(--klods-font-size-sm);
    line-height: var(--klods-line-height);
    animation: klods-toast-in var(--klods-transition) both;
  }
  .klods-toast[data-dismissing] {
    animation: klods-toast-out var(--klods-transition) both;
  }
  @media (prefers-reduced-motion: reduce) {
    .klods-toast {
      animation: none;
    }
  }
  .klods-toast--info {
    border-left: 3px solid var(--klods-color-info);
  }
  .klods-toast--success {
    border-left: 3px solid var(--klods-color-success);
  }
  .klods-toast--warning {
    border-left: 3px solid var(--klods-color-warning);
  }
  .klods-toast--danger {
    border-left: 3px solid var(--klods-color-danger);
  }
  .klods-toast__body {
    flex: 1;
    min-width: 0;
    color: var(--klods-color-fg);
  }
  .klods-toast__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--klods-space-1);
    border: 1px solid transparent;
    border-radius: var(--klods-radius-sm);
    background: transparent;
    color: var(--klods-color-muted);
    cursor: pointer;
    line-height: 1;
    transition: background var(--klods-transition), color var(--klods-transition);
  }
  .klods-toast__close::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='black' stroke-linecap='round' stroke-width='1.75' d='M4 4l8 8M12 4L4 12'/></svg>");
    mask-repeat: no-repeat;
    mask-size: contain;
  }
  .klods-toast__close:hover, .klods-toast__close:focus-visible {
    background: var(--klods-color-surface-2);
    color: inherit;
  }
  .klods-toast__close:focus-visible {
    outline: 2px solid var(--klods-color-accent);
    outline-offset: 2px;
  }
  @keyframes klods-toast-in {
    from {
      opacity: 0;
      transform: translateY(0.5rem) scale(0.97);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes klods-toast-out {
    from {
      opacity: 1;
      transform: none;
    }
    to {
      opacity: 0;
      transform: translateY(0.5rem) scale(0.97);
    }
  }
}
@layer klods.utilities {
  .klods-stack {
    display: flex;
    flex-direction: column;
    gap: var(--klods-space-4);
  }
  .klods-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--klods-space-4);
  }
  .klods-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--klods-space-4);
  }
  .klods-grid {
    display: grid;
    gap: var(--klods-space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .klods-grid--cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .klods-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .klods-grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .klods-grid--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .klods-grid--cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .klods-grid--cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .klods-grid--fit {
    --klods-grid-min: 16rem;
    grid-template-columns: repeat(auto-fit, minmax(var(--klods-grid-min), 1fr));
  }
  .klods-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .klods-spread {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--klods-space-4);
  }
  .klods-push {
    margin-inline-start: auto;
  }
  .klods-fill {
    display: flex;
    align-items: center;
    gap: var(--klods-space-4);
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
  }
  .klods-stack--gap-0,
  .klods-cluster--gap-0,
  .klods-row--gap-0,
  .klods-grid--gap-0 {
    gap: var(--klods-space-0);
  }
  .klods-stack--gap-1,
  .klods-cluster--gap-1,
  .klods-row--gap-1,
  .klods-grid--gap-1 {
    gap: var(--klods-space-1);
  }
  .klods-stack--gap-2,
  .klods-cluster--gap-2,
  .klods-row--gap-2,
  .klods-grid--gap-2 {
    gap: var(--klods-space-2);
  }
  .klods-stack--gap-3,
  .klods-cluster--gap-3,
  .klods-row--gap-3,
  .klods-grid--gap-3 {
    gap: var(--klods-space-3);
  }
  .klods-stack--gap-4,
  .klods-cluster--gap-4,
  .klods-row--gap-4,
  .klods-grid--gap-4 {
    gap: var(--klods-space-4);
  }
  .klods-stack--gap-5,
  .klods-cluster--gap-5,
  .klods-row--gap-5,
  .klods-grid--gap-5 {
    gap: var(--klods-space-5);
  }
  .klods-stack--gap-6,
  .klods-cluster--gap-6,
  .klods-row--gap-6,
  .klods-grid--gap-6 {
    gap: var(--klods-space-6);
  }
  .klods-stack--gap-7,
  .klods-cluster--gap-7,
  .klods-row--gap-7,
  .klods-grid--gap-7 {
    gap: var(--klods-space-7);
  }
  .klods-stack--gap-8,
  .klods-cluster--gap-8,
  .klods-row--gap-8,
  .klods-grid--gap-8 {
    gap: var(--klods-space-8);
  }
  .klods-pad-0 {
    padding: var(--klods-space-0);
  }
  .klods-pad-1 {
    padding: var(--klods-space-1);
  }
  .klods-pad-2 {
    padding: var(--klods-space-2);
  }
  .klods-pad-3 {
    padding: var(--klods-space-3);
  }
  .klods-pad-4 {
    padding: var(--klods-space-4);
  }
  .klods-pad-5 {
    padding: var(--klods-space-5);
  }
  .klods-pad-6 {
    padding: var(--klods-space-6);
  }
  .klods-pad-7 {
    padding: var(--klods-space-7);
  }
  .klods-pad-8 {
    padding: var(--klods-space-8);
  }
  .klods-row--inline {
    display: inline-flex;
  }
  .klods-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  @media (max-width: 48rem) {
    .klods-grid--cols-3,
    .klods-grid--cols-4,
    .klods-grid--cols-5,
    .klods-grid--cols-6 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 30rem) {
    [class*=klods-grid--cols-] {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 30rem) {
    .klods-hide-mobile {
      display: none !important;
    }
  }
  @media (max-width: 48rem) {
    .klods-hide-tablet {
      display: none !important;
    }
  }
}/* Docs-specific styles. The docs site is otherwise built entirely from klods. */

/* Prevent the docs page itself from producing a horizontal scrollbar. */
.docs-shell {
  overflow-x: clip;
}

.docs-example {
  margin-block: var(--klods-space-5);
}

.docs-example__desc {
  margin: 0;
}

/* Prevent nested klods-page examples from escaping the preview box */
.docs-example__preview .klods-page {
  min-height: 20rem;
}

.docs-example__preview .klods-header {
  position: static;
  z-index: 0;
}

/* Undo mobile drawer treatment for sidebars inside example previews. */
.docs-example__preview .klods-sidebar {
  display: block !important;
  position: static !important;
  box-shadow: none !important;
  z-index: auto !important;
  width: 10rem !important;
}

/* Restore two-column grid inside previews regardless of viewport width.
   Use a narrower sidebar width so the preview doesn't clip content. */
.docs-example__preview .klods-page--with-sidebar {
  grid-template-columns: var(--klods-sidebar-width) 1fr !important;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer" !important;
}
.docs-example__preview .klods-page--with-sidebar.klods-page--sidebar-trailing {
  --klods-sidebar-width: 10rem;
  grid-template-columns: 1fr var(--klods-sidebar-width) !important;
  grid-template-areas:
    "header  header"
    "content sidebar"
    "footer  footer" !important;
}

.docs-example__body {
  display: flex;
  flex-direction: column;
  gap: var(--klods-space-4);
}

.docs-example__preview {
  padding: var(--klods-space-5);
  border: 1px dashed var(--klods-color-border);
  border-radius: var(--klods-radius-md);
  background: var(--klods-color-bg);
}

.docs-example__source {
  border: 1px solid var(--klods-color-border);
  border-radius: var(--klods-radius-md);
  background: var(--klods-color-surface-2);
}

.docs-example__source > summary {
  cursor: pointer;
  padding: var(--klods-space-2) var(--klods-space-4);
  font-weight: 600;
  user-select: none;
}

.docs-example__source pre {
  margin: 0;
  padding: var(--klods-space-4);
  overflow-x: auto;
  font-family: var(--klods-font-mono);
  font-size: 0.9em;
  line-height: 1.5;
  border-top: 1px solid var(--klods-color-border);
  background: var(--klods-code-bg);
  color: var(--klods-code-fg);
}