/**
 * Dewey Design Tokens
 *
 * Core design tokens using OKLCH color space for better perceptual uniformity.
 * These tokens are the single source of truth for the design system.
 *
 * Usage:
 *   Consumers can override any token in their own CSS:
 *
 *   :root {
 *     --dw-primary: oklch(0.6 0.2 145);  // Custom brand green
 *   }
 */

:root {
  /* ─── Radius ─────────────────────────────────────────────────────────── */
  --dw-radius-sm: 0.25rem;
  --dw-radius: 0.5rem;
  --dw-radius-md: 0.75rem;
  --dw-radius-lg: 1rem;
  --dw-radius-full: 9999px;

  /* ─── Spacing ────────────────────────────────────────────────────────── */
  --dw-header-height: 3.5rem;
  --dw-sidebar-width: 280px;
  --dw-toc-width: 220px;
  --dw-rail-width: 56px;
  --dw-content-max-width: 80ch;

  /* ─── Density ──────────────────────────────────────────────────────── */
  --dw-content-padding-y: 2rem;
  --dw-content-padding-x: 3rem;
  --dw-content-top-offset: 2.5rem;
  --dw-prose-line-height: 1.75;
  --dw-prose-paragraph-spacing: 1.25rem;
  --dw-heading-margin-top: 2.5rem;

  /* ─── Typography ─────────────────────────────────────────────────────── */
  --dw-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --dw-font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --dw-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Font sizes */
  --dw-text-xs: 0.75rem;
  --dw-text-sm: 0.875rem;
  --dw-text-base: 1rem;
  --dw-text-lg: 1.125rem;
  --dw-text-xl: 1.25rem;
  --dw-text-2xl: 1.5rem;
  --dw-text-3xl: 1.875rem;
  --dw-text-4xl: 2.25rem;

  /* ─── Transitions ────────────────────────────────────────────────────── */
  --dw-transition-fast: 150ms ease;
  --dw-transition-normal: 200ms ease;
  --dw-transition-slow: 300ms ease;

  /* ─── Shadows ────────────────────────────────────────────────────────── */
  --dw-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --dw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --dw-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --dw-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* ─── Semantic Colors (single contract) ──────────────────────────────────
   * Accessible defaults for info / warning / error / success. Every color
   * preset inherits these unless it overrides them, so the semantic contract
   * is defined once. Base components render semantic colors as TEXT on a soft
   * tint (see .dw-callout / .dw-badge), so each value meets WCAG AA (>=4.5:1)
   * as text on its mode's background. Light values are also dark enough that a
   * white foreground clears AA for solid fills.
   * ─────────────────────────────────────────────────────────────────────── */
  --dw-info: #2563eb;
  --dw-info-foreground: #ffffff;
  --dw-warning: #935408;
  --dw-warning-foreground: #ffffff;
  --dw-error: #c9211f;
  --dw-error-foreground: #ffffff;
  --dw-success: #157f3c;
  --dw-success-foreground: #ffffff;

  --color-dw-info: var(--dw-info);
  --color-dw-info-foreground: var(--dw-info-foreground);
  --color-dw-warning: var(--dw-warning);
  --color-dw-warning-foreground: var(--dw-warning-foreground);
  --color-dw-error: var(--dw-error);
  --color-dw-error-foreground: var(--dw-error-foreground);
  --color-dw-success: var(--dw-success);
  --color-dw-success-foreground: var(--dw-success-foreground);

  /* Syntax roles are semantic so themes and consumers can override them. */
  --dw-syntax-keyword: #70401f;
  --dw-syntax-string: #1f6338;
  --dw-syntax-number: #235f87;
  --dw-syntax-type: #60447a;
  --dw-syntax-function: #4d4d78;
  --dw-syntax-punctuation: #444b50;
  --dw-syntax-comment: #4f5959;
}

/* ─── Semantic Colors — dark mode floor ─────────────────────────────────────
 * On dark backgrounds semantic colors must be light to stay legible as text,
 * so the dark floor lifts each hue and flips the solid foreground dark. A
 * preset with its own .dark semantic values overrides these.
 * ─────────────────────────────────────────────────────────────────────────── */
.dark,
[data-theme="dark"] {
  --dw-info: #60a5fa;
  --dw-info-foreground: #0b1120;
  --dw-warning: #fbbf24;
  --dw-warning-foreground: #0b1120;
  --dw-error: #f87171;
  --dw-error-foreground: #0b1120;
  --dw-success: #4ade80;
  --dw-success-foreground: #0b1120;
  --dw-syntax-keyword: #f0b98c;
  --dw-syntax-string: #9ed5ad;
  --dw-syntax-number: #9bc8e5;
  --dw-syntax-type: #cdb4e8;
  --dw-syntax-function: #c4c4eb;
  --dw-syntax-punctuation: #d0d4d8;
  --dw-syntax-comment: #a7b0b0;
}

/**
 * Dewey Base Styles
 *
 * Core component styles using CSS variables.
 * All colors reference --dw-* tokens defined in color presets.
 */

/* ============================================
   Accessibility — focus & motion
   ============================================ */

/* Visible keyboard focus for every interactive element, in every theme.
   Uses the theme ring token (kept >=3:1 against the background) with an
   offset so the indicator reads on both the element and the surface.
   :where() keeps specificity at 0 so themes/consumers can still opt out. */
:where(
  a[href],
  button,
  input,
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid var(--dw-ring);
  outline-offset: 2px;
}

/* Only show the ring for keyboard focus, not mouse clicks. */
:where(a[href], button, summary):focus:not(:focus-visible) {
  outline: none;
}

/* Respect reduced-motion: neutralize Dewey transitions/animations/transforms
   without clobbering a consumer's own animations. */
@media (prefers-reduced-motion: reduce) {
  [class^="dw-"],
  [class*=" dw-"],
  [class^="dw-"]::before,
  [class*=" dw-"]::before,
  [class^="dw-"]::after,
  [class*=" dw-"]::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .dw-card:hover,
  .dw-card:hover .dw-card-arrow {
    transform: none !important;
  }
}

/* ============================================
   Header
   ============================================ */

.dw-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--dw-header-height, 3.5rem);
  background: var(--dw-header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--dw-header-border);
}

.dw-header-inner {
  height: 100%;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dw-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.dw-header-brand {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--dw-foreground);
  font-family: var(--dw-font-serif);
  font-weight: 600;
  font-size: 1.125rem;
}

.dw-header-brand:hover {
  opacity: 0.8;
}

.dw-header-brand-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--dw-radius-full, 9999px);
  background: var(--dw-primary);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--dw-primary) 20%, transparent);
}

.dw-header-brand-name {
  letter-spacing: -0.01em;
}

.dw-header-divider {
  width: 1px;
  height: 1.25rem;
  background: var(--dw-border);
}

.dw-header-back {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  text-decoration: none;
  color: var(--dw-muted-foreground);
  font-size: 0.625rem;
  font-weight: 700;
  font-family: var(--dw-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: color var(--dw-transition-fast, 150ms ease);
}

.dw-header-back:hover {
  color: var(--dw-foreground);
}

.dw-header-back-icon {
  width: 0.75rem;
  height: 0.75rem;
}

.dw-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dw-header-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--dw-radius, 0.375rem);
  background: transparent;
  border: none;
  color: var(--dw-muted-foreground);
  cursor: pointer;
  transition: background var(--dw-transition-fast, 150ms ease), color var(--dw-transition-fast, 150ms ease);
}

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

.dw-header-label {
  font-size: 0.625rem;
  font-weight: 700;
  font-family: var(--dw-font-mono);
  letter-spacing: 0.25em;
  color: var(--dw-foreground);
  text-transform: uppercase;
}

/* Minimal header variant — reduced chrome */
.dw-header-minimal {
  --dw-header-height: 2.75rem;
}

.dw-header-minimal .dw-header-back,
.dw-header-minimal .dw-header-divider,
.dw-header-minimal .dw-header-label,
.dw-header-minimal .dw-header-menu-btn {
  display: none;
}

/* ============================================
   Layout
   ============================================ */

.dw-layout {
  display: flex;
  min-height: 100vh;
  background: var(--dw-background);
  color: var(--dw-foreground);
  font-family: var(--dw-font-sans);
}

.dw-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dw-content {
  flex: 1;
  max-width: var(--dw-content-max-width, 80ch);
  margin: 0 auto;
  padding: var(--dw-content-padding-y, 2rem) var(--dw-content-padding-x, 3rem);
  padding-top: calc(var(--dw-header-height, 3.5rem) + var(--dw-content-top-offset, 2.5rem));
  width: 100%;
}

/* Composed documentation shell (legacy DocsLayout API). */
.dw-docs-layout {
  min-height: 100vh;
  background: var(--dw-background);
  color: var(--dw-foreground);
  font-family: var(--dw-font-sans);
}
.dw-shell-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--dw-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  border-bottom: 1px solid var(--dw-header-border);
  background: var(--dw-header-bg);
  backdrop-filter: blur(12px);
}
.dw-shell-header-left,
.dw-shell-header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.dw-shell-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--dw-foreground);
  font-family: var(--dw-font-serif);
  font-size: var(--dw-text-lg);
  font-weight: 600;
  text-decoration: none;
}
.dw-shell-brand-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--dw-radius-full);
  background: var(--dw-primary);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--dw-primary) 20%, transparent);
}
.dw-shell-divider {
  width: 1px;
  height: 1rem;
  background: var(--dw-border);
}
.dw-shell-back {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--dw-muted-foreground);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}
.dw-shell-back:hover { color: var(--dw-foreground); }
.dw-shell-back svg,
.dw-shell-icon-button svg {
  width: 1rem;
  height: 1rem;
}
.dw-shell-icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--dw-radius);
  background: transparent;
  color: var(--dw-muted-foreground);
  cursor: pointer;
}
.dw-shell-icon-button:hover {
  background: var(--dw-accent);
  color: var(--dw-accent-foreground);
}
.dw-shell-menu-button { display: none; }
.dw-shell-label {
  color: var(--dw-foreground);
  font-family: var(--dw-font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.dw-shell-sidebar {
  position: fixed;
  top: var(--dw-header-height);
  bottom: 0;
  left: 0;
  z-index: 40;
  width: var(--dw-sidebar-width);
  padding: 1.5rem;
  overflow-y: auto;
  border-right: 1px solid var(--dw-sidebar-border);
  background: var(--dw-sidebar-bg);
}
.dw-shell-sidebar-home {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  color: var(--dw-muted-foreground);
  font-size: var(--dw-text-sm);
  font-weight: 500;
  text-decoration: none;
}
.dw-shell-sidebar-home:hover { color: var(--dw-foreground); }
.dw-shell-sidebar-home svg,
.dw-shell-nav-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.dw-shell-nav-group + .dw-shell-nav-group { margin-top: 2rem; }
.dw-shell-nav-title,
.dw-shell-toc-title {
  margin: 0 0 0.75rem;
  color: var(--dw-muted-foreground);
  font-family: var(--dw-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dw-shell-nav-list,
.dw-shell-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dw-shell-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--dw-radius);
  color: var(--dw-muted-foreground);
  font-size: var(--dw-text-sm);
  text-decoration: none;
}
.dw-shell-nav-link:hover {
  background: var(--dw-secondary);
  color: var(--dw-secondary-foreground);
}
.dw-shell-nav-link.active {
  background: var(--dw-sidebar-active-bg);
  color: var(--dw-sidebar-active);
  font-weight: 600;
}
.dw-shell-toc {
  position: fixed;
  top: var(--dw-header-height);
  right: 0;
  bottom: 0;
  width: var(--dw-toc-width);
  padding: 1.5rem 1.25rem;
  overflow-y: auto;
  border-left: 1px solid var(--dw-border);
  background: var(--dw-background);
}
.dw-shell-toc-list li + li { margin-top: 0.5rem; }
.dw-shell-toc-link {
  display: block;
  color: var(--dw-muted-foreground);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-decoration: none;
}
.dw-shell-toc-link[data-level="3"] { padding-left: 0.75rem; }
.dw-shell-toc-link:hover { color: var(--dw-foreground); }
.dw-shell-toc-link.active {
  color: var(--dw-primary);
  font-weight: 500;
}
.dw-shell-main {
  min-height: 100vh;
  padding-top: var(--dw-header-height);
  padding-left: var(--dw-sidebar-width);
  padding-right: var(--dw-toc-width);
}
.dw-shell-article {
  width: min(100%, var(--dw-content-max-width));
  margin: 0 auto;
  padding: 3rem var(--dw-content-padding-x);
}
.dw-shell-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.dw-shell-page-title {
  margin: 0.75rem 0 1rem;
  color: var(--dw-foreground);
  font-family: var(--dw-font-serif);
  font-size: var(--dw-text-4xl);
  line-height: 1.15;
}
.dw-shell-page-description {
  margin: 0;
  color: var(--dw-muted-foreground);
  font-size: var(--dw-text-lg);
  line-height: 1.625;
}
.dw-shell-page-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
}
.dw-shell-page-actions .dw-button { white-space: nowrap; }
.dw-shell-page-actions .dw-button svg {
  width: 0.875rem;
  height: 0.875rem;
}
.dw-prev-next-link > span {
  display: flex;
  flex-direction: column;
}
.dw-shell-overlay {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: none;
  width: 100%;
  border: 0;
  background: color-mix(in oklch, var(--dw-foreground) 45%, transparent);
}

@media (max-width: 1280px) {
  .dw-shell-toc { display: none; }
  .dw-shell-main { padding-right: 0; }
}

@media (max-width: 1024px) {
  .dw-shell-menu-button,
  .dw-shell-overlay { display: flex; }
  .dw-shell-sidebar {
    transform: translateX(-100%);
    transition: transform var(--dw-transition-normal);
  }
  .dw-shell-sidebar.open { transform: translateX(0); }
  .dw-shell-main { padding-left: 0; }
}

@media (max-width: 768px) {
  .dw-shell-divider,
  .dw-shell-back,
  .dw-shell-label { display: none; }
  .dw-shell-article { padding: 2rem 1rem; }
  .dw-shell-page-header { flex-direction: column; }
  .dw-shell-page-actions { flex-wrap: wrap; }
}

/* ============================================
   Breadcrumbs
   ============================================ */

.dw-breadcrumbs {
  margin-bottom: 1.5rem;
  font-size: var(--dw-text-xs, 0.75rem);
  color: var(--dw-muted-foreground);
}

.dw-breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.dw-breadcrumbs-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.dw-breadcrumbs-link {
  color: var(--dw-muted-foreground);
  text-decoration: none;
  transition: color var(--dw-transition-fast, 150ms ease);
}

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

.dw-breadcrumbs-label {
  color: var(--dw-muted-foreground);
}

.dw-breadcrumbs-separator {
  color: var(--dw-border);
  margin: 0 0.25rem;
}

/* ============================================
   Sidebar
   ============================================ */

.dw-sidebar {
  width: var(--dw-sidebar-width, 280px);
  flex-shrink: 0;
  background: var(--dw-sidebar-bg);
  border-right: 1px solid var(--dw-border);
  border-radius: 0;
  overflow-y: auto;
  position: sticky;
  top: var(--dw-header-height, 3.5rem);
  height: calc(100vh - var(--dw-header-height, 3.5rem));
  align-self: flex-start;
}

.dw-sidebar-header {
  padding: 1.5rem 1rem 1rem;
  border: none;
}

.dw-sidebar-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--dw-foreground);
}

.dw-sidebar-nav {
  padding: 0.5rem 1rem 1rem;
}

.dw-sidebar-group {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--dw-border);
}

.dw-sidebar-group:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.dw-sidebar-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 0.625rem;
  font-weight: 700;
  font-family: var(--dw-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dw-muted-foreground);
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.dw-sidebar-group-title:hover {
  color: var(--dw-foreground);
}

.dw-sidebar-group-title span {
  flex: 1;
}

.dw-sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  color: var(--dw-muted-foreground);
  text-decoration: none;
  font-size: 0.875rem;
  transition: background var(--dw-transition-fast, 150ms ease), color var(--dw-transition-fast, 150ms ease);
}

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

.dw-sidebar-item.active {
  background: var(--dw-primary);
  color: #ffffff;
  font-weight: 600;
}

.dw-sidebar-item-icon {
  width: 1rem;
  height: 1rem;
  opacity: 0.7;
}

.dw-sidebar-chevron {
  flex-shrink: 0;
  transition: transform var(--dw-transition-fast, 150ms ease);
}

.dw-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.dw-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--dw-foreground);
}

.dw-sidebar-close {
  display: none;
  padding: 0.25rem;
  margin-right: -0.25rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--dw-muted-foreground);
}

.dw-sidebar-close:hover {
  color: var(--dw-foreground);
}

@media (max-width: 1023px) {
  .dw-sidebar-close {
    display: block;
  }
}

.dw-sidebar-footer {
  margin-top: auto;
  padding: 1rem;
  border-top: 1px solid var(--dw-sidebar-border);
}

.dw-sidebar-separator {
  padding: 0.5rem 0;
}

.dw-sidebar-divider {
  border: none;
  border-top: 1px solid var(--dw-border);
  margin: 0;
}

.dw-sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 40;
}

@media (min-width: 1024px) {
  .dw-sidebar-overlay {
    display: none;
  }
}

/* ============================================
   Table of Contents
   ============================================ */

.dw-toc {
  width: var(--dw-toc-width, 220px);
  flex-shrink: 0;
  position: sticky;
  top: var(--dw-header-height, 3.5rem);
  height: calc(100vh - var(--dw-header-height, 3.5rem));
  padding: 2.5rem 1.5rem;
  padding-left: 2rem;
  overflow-y: auto;
  align-self: flex-start;
  border-left: none;
}

.dw-toc-title {
  font-size: 0.625rem;
  font-weight: 700;
  font-family: var(--dw-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dw-foreground);
  margin-bottom: 1rem;
}

.dw-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dw-toc-item {
  margin-bottom: 0.25rem;
}

.dw-toc-link {
  display: block;
  padding: 0.375rem 0;
  font-size: 0.8125rem;
  color: var(--dw-muted-foreground);
  text-decoration: none;
  transition: color var(--dw-transition-fast, 150ms ease);
  border-left: 2px solid transparent;
  padding-left: 0.75rem;
  margin-left: -1px;
}

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

.dw-toc-link.active {
  color: var(--dw-primary);
  border-left-color: var(--dw-primary);
}

.dw-toc-link[data-level="3"] {
  padding-left: 1.5rem;
}

.dw-toc-link[data-level="4"] {
  padding-left: 2.25rem;
}

/* ============================================
   Prose / Markdown Content
   ============================================ */

.dw-prose {
  line-height: var(--dw-prose-line-height, 1.75);
  color: var(--dw-foreground);
}

.dw-prose h1,
.dw-prose h2,
.dw-prose h3,
.dw-prose h4,
.dw-prose h5,
.dw-prose h6 {
  font-family: var(--dw-font-serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--dw-foreground);
}

.dw-prose h1 {
  font-size: var(--dw-text-4xl, 2rem);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.dw-prose h2 {
  font-size: var(--dw-text-2xl, 1.5rem);
  margin-top: var(--dw-heading-margin-top, 2.5rem);
  margin-bottom: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--dw-border);
}

.dw-prose h2:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.dw-prose h3 {
  font-size: var(--dw-text-xl, 1.25rem);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.dw-prose h4 {
  font-size: var(--dw-text-base, 1rem);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.dw-prose p {
  margin-bottom: var(--dw-prose-paragraph-spacing, 1.25rem);
}

.dw-prose a {
  color: var(--dw-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dw-prose a:hover {
  opacity: 0.8;
}

.dw-prose strong {
  font-weight: 600;
}

.dw-prose ul,
.dw-prose ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.dw-prose li {
  margin-bottom: 0.5rem;
}

.dw-prose li::marker {
  color: var(--dw-muted-foreground);
}

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

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

/* Inline Code */
.dw-prose code {
  font-family: var(--dw-font-mono);
  font-size: 0.8125rem;
  background: var(--dw-code-bg);
  border-radius: var(--dw-radius-sm, 0.25rem);
  padding: 0.125rem 0.375rem;
  color: var(--dw-foreground);
}

/* Code Blocks */
.dw-prose pre {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.dw-prose pre code {
  display: block;
  padding: 1rem;
  font-family: var(--dw-font-mono);
  font-size: var(--dw-text-xs, 0.75rem);
  line-height: 1.7;
  color: var(--dw-foreground);
  background: transparent;
  border: none;
  border-radius: 0;
  overflow-x: auto;
}

/* Tables */
.dw-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: var(--dw-text-sm, 0.875rem);
}

.dw-prose th,
.dw-prose td {
  border: 1px solid var(--dw-border);
  padding: 0.75rem 1rem;
  text-align: left;
}

.dw-prose th {
  background: var(--dw-secondary);
  font-weight: 600;
}

.dw-prose tr:nth-child(even) {
  background: var(--dw-secondary);
}

/* ============================================
   Callout / Admonition
   ============================================ */

.dw-callout {
  border-radius: var(--dw-radius, 0.5rem);
  padding: 1rem;
  margin: 1.5rem 0;
  border: 1px solid;
}

.dw-callout-inner {
  display: flex;
  gap: 0.75rem;
}

.dw-callout-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.dw-callout-content { min-width: 0; }
.dw-callout-body { color: var(--dw-foreground); }

.dw-callout-info {
  background: var(--dw-background);
  border-color: var(--dw-info);
}

.dw-callout-warning {
  background: var(--dw-background);
  border-color: var(--dw-warning);
}

.dw-callout-error {
  background: var(--dw-background);
  border-color: var(--dw-error);
}

.dw-callout-success {
  background: var(--dw-background);
  border-color: var(--dw-success);
}

.dw-callout-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.dw-callout-info .dw-callout-title { color: var(--dw-info); }
.dw-callout-warning .dw-callout-title { color: var(--dw-warning); }
.dw-callout-error .dw-callout-title { color: var(--dw-error); }
.dw-callout-success .dw-callout-title { color: var(--dw-success); }
.dw-callout-info .dw-callout-icon { color: var(--dw-info); }
.dw-callout-warning .dw-callout-icon { color: var(--dw-warning); }
.dw-callout-error .dw-callout-icon { color: var(--dw-error); }
.dw-callout-success .dw-callout-icon { color: var(--dw-success); }

/* ============================================
   Cards
   ============================================ */

.dw-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--dw-background);
  border: 1px solid color-mix(in oklch, var(--dw-border) 60%, transparent);
  border-radius: var(--dw-radius-lg, 1rem);
  padding: 1rem;
  text-decoration: none;
  box-shadow: var(--dw-shadow);
  transition: transform var(--dw-transition-normal, 200ms ease), box-shadow var(--dw-transition-normal, 200ms ease);
}

.dw-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--dw-shadow-md);
}

.dw-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .dw-card-grid[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dw-card-grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dw-card-grid[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.dw-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.dw-card-icon-box {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dw-radius-md, 0.75rem);
  background: var(--dw-secondary);
  transition: background var(--dw-transition-normal, 200ms ease);
}

.dw-card-icon-box svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--dw-muted-foreground);
}

.dw-card-content {
  display: flex;
  flex-direction: column;
}

.dw-card-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--dw-foreground);
}

.dw-card-description {
  font-size: var(--dw-text-sm, 0.875rem);
  color: var(--dw-muted-foreground);
  margin-top: 0.125rem;
}

.dw-card-arrow {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--dw-muted-foreground);
  transition: transform var(--dw-transition-normal, 200ms ease), color var(--dw-transition-normal, 200ms ease);
}

.dw-card:hover .dw-card-arrow {
  color: var(--dw-foreground);
  transform: translateX(4px);
}

/* ============================================
   Docs Index / Landing
   ============================================ */

.dw-docs-index {
  padding-top: 0;
}

.dw-hero {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.dw-hero-icon-box {
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dw-radius-lg, 1rem);
  background: color-mix(in oklch, var(--dw-primary) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--dw-primary) 20%, transparent);
}

.dw-hero-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--dw-primary);
}

.dw-hero-title {
  font-family: var(--dw-font-serif);
  font-size: var(--dw-text-4xl, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
}

.dw-hero-tagline {
  margin: 0.5rem 0 0;
  font-size: var(--dw-text-lg, 1.125rem);
  color: var(--dw-muted-foreground);
  line-height: 1.5;
}

.dw-docs-description {
  margin: 0 0 2rem;
  color: var(--dw-muted-foreground);
  line-height: 1.65;
}

.dw-docs-section {
  margin-bottom: 2.5rem;
}

.dw-docs-section-title {
  font-family: var(--dw-font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dw-muted-foreground);
  margin: 0 0 1rem;
}

.dw-docs-section-cards {
  display: grid;
  gap: 0.875rem;
}

.dw-docs-sections-columns {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.dw-docs-quick-links {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--dw-border);
}

.dw-docs-quick-links-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.dw-docs-quick-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius-md, 0.75rem);
  font-size: var(--dw-text-sm, 0.875rem);
  font-weight: 500;
  color: var(--dw-foreground);
  text-decoration: none;
  transition: border-color var(--dw-transition-fast, 150ms ease), background var(--dw-transition-fast, 150ms ease);
}

.dw-docs-quick-link:hover {
  border-color: var(--dw-ring);
  background: var(--dw-accent);
}

.dw-docs-quick-link-primary {
  background: var(--dw-primary);
  border-color: var(--dw-primary);
  color: var(--dw-primary-foreground);
}

.dw-docs-quick-link-primary:hover {
  opacity: 0.92;
  background: var(--dw-primary);
}

.dw-quick-link-icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* ============================================
   Buttons
   ============================================ */

.dw-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: var(--dw-text-sm, 0.875rem);
  border-radius: var(--dw-radius, 0.375rem);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background var(--dw-transition-fast, 150ms ease), color var(--dw-transition-fast, 150ms ease), border-color var(--dw-transition-fast, 150ms ease);
  border: 1px solid transparent;
}

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

.dw-button-primary:hover {
  opacity: 0.9;
}

.dw-button-success {
  background: var(--dw-success);
  color: var(--dw-success-foreground);
}

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

.dw-button-outline:hover {
  background: var(--dw-accent);
}

.dw-button-ghost {
  background: transparent;
  color: var(--dw-foreground);
}

.dw-button-ghost:hover {
  background: var(--dw-accent);
}

/* ============================================
   Code Block
   ============================================ */

.dw-code-block {
  position: relative;
  margin: 1.5rem 0;
}

.dw-code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background: var(--dw-secondary);
  border: 1px solid var(--dw-code-border);
  border-bottom: none;
  border-radius: 0.5rem 0.5rem 0 0;
  font-size: 0.625rem;
  font-family: var(--dw-font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dw-muted-foreground);
}

.dw-code-block-header + pre {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.dw-copy-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.375rem;
  background: var(--dw-secondary);
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius-sm, 0.25rem);
  color: var(--dw-muted-foreground);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dw-transition-fast, 150ms ease);
}

.dw-code-block:hover .dw-copy-button {
  opacity: 1;
}

.dw-copy-button:hover {
  color: var(--dw-foreground);
}

.dw-inline-code {
  padding: 0.125rem 0.375rem;
  border-radius: var(--dw-radius-sm);
  background: var(--dw-code-bg);
  color: var(--dw-foreground);
  font-family: var(--dw-font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
}

.dw-code-block-frame {
  overflow: hidden;
  border: 1px solid var(--dw-code-border);
  border-radius: var(--dw-radius);
  background: var(--dw-code-bg);
}
.dw-code-block-scroll {
  position: relative;
  overflow-x: auto;
}
.dw-code-block-language {
  position: absolute;
  top: 0.5rem;
  left: 0.75rem;
  color: var(--dw-muted-foreground);
  font-family: var(--dw-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}
.dw-code-block-copy {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius);
  background: var(--dw-secondary);
  color: var(--dw-muted-foreground);
  cursor: pointer;
  opacity: 0;
  transition: color var(--dw-transition-fast), opacity var(--dw-transition-fast);
}
.dw-code-block:hover .dw-code-block-copy,
.dw-code-block-copy:focus-visible { opacity: 1; }
.dw-code-block-copy:hover { color: var(--dw-foreground); }
.dw-code-block-copy svg {
  width: 0.875rem;
  height: 0.875rem;
}
.dw-prose .dw-code-block-pre,
.dw-code-block-pre {
  margin: 0;
  padding: 2rem 1rem 1rem;
  overflow: visible;
  background: transparent;
  border: 0;
}
.dw-prose .dw-code-block-pre .dw-code-block-code,
.dw-code-block-code {
  display: block;
  padding: 0;
  overflow: visible;
  background: transparent;
  color: var(--dw-foreground);
  font-family: var(--dw-font-mono);
  font-size: 0.8125rem;
  line-height: 1.625;
}

/* ============================================
   Badge
   ============================================ */

.dw-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: var(--dw-text-xs, 0.75rem);
  font-weight: 500;
  border-radius: var(--dw-radius-full, 9999px);
  background: var(--dw-secondary);
  color: var(--dw-secondary-foreground);
}

.dw-badge-info {
  background: var(--dw-info);
  color: var(--dw-info-foreground);
}

.dw-badge-success {
  background: var(--dw-success);
  color: var(--dw-success-foreground);
}

.dw-badge-warning {
  background: var(--dw-warning);
  color: var(--dw-warning-foreground);
}

.dw-badge-error {
  background: var(--dw-error);
  color: var(--dw-error-foreground);
}

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

.dw-badge-md { padding: 0.25rem 0.625rem; }

/* ============================================
   Tabs
   ============================================ */

.dw-tabs { margin: 1.25rem 0; }
.dw-tabs-list {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: var(--dw-radius-md);
  background: var(--dw-secondary);
}
.dw-tabs-trigger {
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: var(--dw-radius);
  background: transparent;
  color: var(--dw-muted-foreground);
  font: inherit;
  font-size: var(--dw-text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dw-transition-fast), color var(--dw-transition-fast);
}
.dw-tabs-trigger.active {
  background: var(--dw-background);
  color: var(--dw-foreground);
  box-shadow: var(--dw-shadow-sm);
}
.dw-tabs-content { margin-top: 0.75rem; color: var(--dw-foreground); }

/* ============================================
   API Table
   ============================================ */

.dw-api-table {
  margin: 1.25rem 0;
  overflow: hidden;
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius-lg);
  background: var(--dw-background);
}

.dw-api-table-title {
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--dw-border);
  background: var(--dw-secondary);
  color: var(--dw-secondary-foreground);
  font-size: 0.8125rem;
  font-weight: 600;
}

.dw-api-table-scroll { overflow-x: auto; }
.dw-api-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.dw-api-table th,
.dw-api-table td {
  padding: 0.625rem 1rem;
  text-align: left;
  vertical-align: top;
}

.dw-api-table th {
  border-bottom: 1px solid var(--dw-border);
  background: var(--dw-secondary);
  color: var(--dw-secondary-foreground);
  font-weight: 600;
}

.dw-api-table tbody tr:not(:last-child) { border-bottom: 1px solid var(--dw-border); }
.dw-api-table code {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  border-radius: var(--dw-radius-sm);
  font-family: var(--dw-font-mono);
  font-size: var(--dw-text-xs);
}

.dw-api-table-name { color: var(--dw-primary); }
.dw-api-table-required {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0.125rem 0.375rem;
  border-radius: var(--dw-radius-sm);
  background: var(--dw-error);
  color: var(--dw-error-foreground);
  font-size: 0.625rem;
  font-weight: 600;
}
.dw-api-table-type {
  background: var(--dw-secondary);
  color: var(--dw-secondary-foreground);
}
.dw-api-table-default { color: var(--dw-muted-foreground); }
.dw-api-table-default code {
  background: var(--dw-code-bg);
  color: var(--dw-foreground);
}
.dw-api-table-description { color: var(--dw-muted-foreground); }

/* ============================================
   Steps
   ============================================ */

.dw-steps { margin: 1.5rem 0; }
.dw-step {
  display: flex;
  gap: 1rem;
  padding-bottom: 1.5rem;
}
.dw-step:last-child { padding-bottom: 0; }
.dw-step-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dw-step-number {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--dw-radius-full);
  background: var(--dw-primary);
  color: var(--dw-primary-foreground);
  font-size: var(--dw-text-sm);
  font-weight: 600;
}
.dw-step-line {
  width: 2px;
  flex: 1;
  margin-top: 0.5rem;
  background: var(--dw-border);
}
.dw-step-content {
  min-width: 0;
  flex: 1;
  padding-top: 0.25rem;
}
.dw-step-title {
  margin: 0 0 0.5rem;
  color: var(--dw-foreground);
  font-size: 0.9375rem;
  font-weight: 600;
}
.dw-step-body {
  color: var(--dw-muted-foreground);
  font-size: var(--dw-text-sm);
  line-height: 1.625;
}

/* ============================================
   File Tree
   ============================================ */

.dw-file-tree {
  margin: 1.25rem 0;
  padding: 0.5rem 0;
  overflow: hidden;
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius-lg);
  background: var(--dw-background);
  color: var(--dw-foreground);
  font-family: var(--dw-font-mono);
  font-size: var(--dw-text-sm);
}
.dw-file-tree-row {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.375rem;
  padding-top: 0.25rem;
  padding-right: 0.5rem;
  padding-bottom: 0.25rem;
  border: 0;
  border-radius: var(--dw-radius-sm);
  background: transparent;
  color: var(--dw-foreground);
  font: inherit;
  text-align: left;
  transition: background var(--dw-transition-fast), color var(--dw-transition-fast);
}
button.dw-file-tree-row { cursor: pointer; }
.dw-file-tree-row:hover { background: var(--dw-secondary); }
.dw-file-tree-row.is-highlighted {
  background: var(--dw-accent);
  color: var(--dw-accent-foreground);
  font-weight: 500;
}
.dw-file-tree-chevron {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  color: var(--dw-muted-foreground);
  transition: transform var(--dw-transition-fast);
}
.dw-file-tree-chevron[data-open="true"] { transform: rotate(90deg); }
.dw-file-tree-folder,
.dw-file-tree-file {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.dw-file-tree-folder { color: var(--dw-primary); }
.dw-file-tree-file { color: var(--dw-muted-foreground); }
.dw-file-tree-row.is-highlighted .dw-file-tree-chevron,
.dw-file-tree-row.is-highlighted .dw-file-tree-folder,
.dw-file-tree-row.is-highlighted .dw-file-tree-file { color: currentColor; }
.dw-file-tree-spacer { width: 0.875rem; }
.dw-file-tree-name { font-size: 0.8125rem; }

/* ============================================
   Heading permalinks
   ============================================ */

.dw-heading-link {
  margin-left: 0.5rem;
  color: var(--dw-muted-foreground);
  opacity: 0;
  transition: color var(--dw-transition-fast), opacity var(--dw-transition-fast);
}
.group:hover .dw-heading-link,
.dw-heading-link:focus-visible { opacity: 1; }
.dw-heading-link:hover {
  color: var(--dw-foreground);
  opacity: 1;
}

/* ============================================
   Agent Context
   ============================================ */

.dw-agent-context {
  margin: 1.5rem 0;
  overflow: hidden;
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius-md);
  background: var(--dw-muted);
}
.dw-agent-context-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 0;
  background: transparent;
  color: var(--dw-foreground);
  cursor: pointer;
}
.dw-agent-context-toggle > svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.dw-agent-context-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
}
.dw-agent-context-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--dw-primary);
}
.dw-agent-context-title {
  color: var(--dw-foreground);
  font-size: var(--dw-text-sm);
  font-weight: 600;
}
.dw-agent-context-hint {
  color: var(--dw-muted-foreground);
  font-size: var(--dw-text-xs);
}
.dw-agent-context-content { border-top: 1px solid var(--dw-border); }
.dw-agent-context-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem 1rem;
  background: var(--dw-background);
}
.dw-agent-context-copy {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius);
  background: var(--dw-background);
  color: var(--dw-muted-foreground);
  font: inherit;
  font-size: var(--dw-text-xs);
  font-weight: 500;
  cursor: pointer;
}
.dw-agent-context-copy:hover { color: var(--dw-foreground); }
.dw-agent-context-copy svg {
  width: 0.75rem;
  height: 0.75rem;
}
.dw-agent-context-pre {
  max-height: 25rem;
  margin: 0;
  padding: 1rem;
  overflow: auto;
  background: var(--dw-background);
  color: var(--dw-foreground);
  font-family: var(--dw-font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* ============================================
   Copy controls
   ============================================ */

.dw-copy-buttons { position: relative; }
.dw-copy-buttons-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dw-copy-buttons-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius);
  background: var(--dw-background);
  color: var(--dw-muted-foreground);
  font: inherit;
  font-size: var(--dw-text-xs);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dw-transition-fast), color var(--dw-transition-fast);
}
.dw-copy-buttons-button:hover {
  background: var(--dw-secondary);
  color: var(--dw-foreground);
}
.dw-copy-buttons-button > svg {
  width: 0.875rem;
  height: 0.875rem;
}
.dw-copy-buttons-success { color: var(--dw-success); }
.dw-copy-buttons-chevron { margin-left: -0.125rem; }
.dw-copy-buttons-menu-wrap { position: relative; }
.dw-copy-buttons-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  z-index: 50;
  min-width: 8.75rem;
  overflow: hidden;
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius);
  background: var(--dw-background);
  box-shadow: var(--dw-shadow-md);
}
.dw-copy-buttons-menu-item {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: transparent;
  color: var(--dw-foreground);
  font: inherit;
  font-size: 0.8125rem;
  text-align: right;
  cursor: pointer;
}
.dw-copy-buttons-menu-item:hover { background: var(--dw-secondary); }
.dw-copy-buttons-feedback {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 50;
  width: min(20rem, calc(100vw - 2rem));
  overflow: hidden;
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius-md);
  background: var(--dw-background);
  box-shadow: var(--dw-shadow-lg);
  animation: dw-slide-down var(--dw-transition-fast);
}
.dw-copy-buttons-feedback-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--dw-border);
  background: var(--dw-secondary);
}
.dw-copy-buttons-feedback-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--dw-foreground);
  font-size: 0.8125rem;
  font-weight: 600;
}
.dw-copy-buttons-feedback-heading svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--dw-success);
}
.dw-copy-buttons-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--dw-radius-sm);
  background: transparent;
  color: var(--dw-muted-foreground);
  cursor: pointer;
}
.dw-copy-buttons-dismiss:hover {
  background: var(--dw-accent);
  color: var(--dw-accent-foreground);
}
.dw-copy-buttons-dismiss svg {
  width: 0.75rem;
  height: 0.75rem;
}
.dw-copy-buttons-feedback-body { padding: 0.75rem 0.875rem; }
.dw-copy-buttons-preview {
  max-height: 4.5rem;
  padding: 0.5rem 0.625rem;
  overflow: hidden;
  border-radius: var(--dw-radius);
  background: var(--dw-code-bg);
  color: var(--dw-muted-foreground);
  font-family: var(--dw-font-mono);
  font-size: var(--dw-text-xs);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.dw-copy-buttons-count {
  margin-top: 0.5rem;
  color: var(--dw-muted-foreground);
  font-size: 0.6875rem;
}
@keyframes dw-slide-down {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   Prompt slideout
   ============================================ */

.dw-prompt-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.dw-prompt-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: color-mix(in oklch, var(--dw-foreground) 45%, transparent);
  backdrop-filter: blur(8px);
  animation: dw-prompt-fade var(--dw-transition-normal);
}
.dw-prompt-slideout {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  width: 45rem;
  max-width: 90vw;
  flex-direction: column;
  border-left: 1px solid var(--dw-border);
  background: var(--dw-background);
  color: var(--dw-foreground);
  box-shadow: var(--dw-shadow-lg);
  animation: dw-prompt-enter var(--dw-transition-slow);
}
.dw-prompt-resize {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  display: flex;
  width: 0.75rem;
  align-items: center;
  justify-content: center;
  color: var(--dw-muted-foreground);
  cursor: ew-resize;
}
.dw-prompt-resize:hover { background: var(--dw-secondary); }
.dw-prompt-resize svg {
  width: 0.75rem;
  height: 0.75rem;
}
.dw-prompt-header,
.dw-prompt-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem 1rem 2rem;
  border-color: var(--dw-border);
}
.dw-prompt-header { border-bottom: 1px solid var(--dw-border); }
.dw-prompt-footer {
  border-top: 1px solid var(--dw-border);
  background: var(--dw-muted);
}
.dw-prompt-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
}
.dw-prompt-heading-icon {
  display: flex;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--dw-radius-md);
  background: var(--dw-secondary);
  color: var(--dw-primary);
}
.dw-prompt-heading-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}
.dw-prompt-heading h2 {
  margin: 0;
  color: var(--dw-foreground);
  font-family: var(--dw-font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
}
.dw-prompt-heading p,
.dw-prompt-footer p {
  margin: 0.125rem 0 0;
  color: var(--dw-muted-foreground);
  font-size: var(--dw-text-xs);
}
.dw-prompt-close {
  display: flex;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--dw-radius);
  background: transparent;
  color: var(--dw-muted-foreground);
  cursor: pointer;
}
.dw-prompt-close:hover {
  background: var(--dw-accent);
  color: var(--dw-accent-foreground);
}
.dw-prompt-close svg {
  width: 1.125rem;
  height: 1.125rem;
}
.dw-prompt-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem 1.5rem 1.5rem 2rem;
  overflow: auto;
}
.dw-prompt-info {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--dw-info);
  border-radius: var(--dw-radius-md);
  background: var(--dw-background);
  color: var(--dw-foreground);
}
.dw-prompt-info svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--dw-info);
}
.dw-prompt-info p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.dw-prompt-section-title {
  margin: 0 0 0.75rem;
  color: var(--dw-muted-foreground);
  font-family: var(--dw-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dw-prompt-section-hint {
  margin: -0.375rem 0 0.75rem;
  color: var(--dw-muted-foreground);
  font-size: var(--dw-text-xs);
}
.dw-prompt-params {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0.875rem 1rem;
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius);
  background: var(--dw-muted);
}
.dw-prompt-param {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
}
.dw-prompt-param dt,
.dw-prompt-param dd { margin: 0; }
.dw-prompt-param code {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: var(--dw-radius);
  background: var(--dw-primary);
  color: var(--dw-primary-foreground);
  font-family: var(--dw-font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.dw-prompt-param dd {
  color: var(--dw-foreground);
  font-size: var(--dw-text-sm);
  line-height: 1.5;
}
.dw-prompt-param dd span { color: var(--dw-muted-foreground); }
.dw-prompt-textarea {
  width: 100%;
  min-height: 13.75rem;
  padding: 1rem;
  resize: vertical;
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius-md);
  background: var(--dw-background);
  color: var(--dw-foreground);
  caret-color: var(--dw-foreground);
  font-family: var(--dw-font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.dw-prompt-context-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  color: var(--dw-muted-foreground);
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.dw-prompt-context-toggle svg {
  width: 0.875rem;
  height: 0.875rem;
}
.dw-prompt-context-summary {
  margin: 0.5rem 0 0;
  padding: 0.875rem 1rem;
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius);
  background: var(--dw-muted);
  color: var(--dw-muted-foreground);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.dw-prompt-context-blocks {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.75rem;
}
.dw-prompt-code-block {
  overflow: hidden;
  border: 1px solid var(--dw-code-border);
  border-radius: var(--dw-radius-md);
  background: var(--dw-code-bg);
}
.dw-prompt-code-header {
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--dw-code-border);
  background: var(--dw-secondary);
  color: var(--dw-muted-foreground);
  font-size: 0.6875rem;
  font-weight: 500;
}
.dw-prompt-code-block pre {
  max-height: 17.5rem;
  margin: 0;
  padding: 1rem;
  overflow: auto;
}
.dw-prompt-code-block code {
  color: var(--dw-foreground);
  font-family: var(--dw-font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.dw-prompt-footer .dw-button svg {
  width: 1rem;
  height: 1rem;
}
@keyframes dw-prompt-enter {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes dw-prompt-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 640px) {
  .dw-prompt-slideout { width: 100% !important; max-width: none; }
  .dw-prompt-resize { display: none; }
  .dw-prompt-header,
  .dw-prompt-footer,
  .dw-prompt-content { padding-left: 1rem; padding-right: 1rem; }
  .dw-prompt-footer { align-items: stretch; flex-direction: column; }
}

/* ============================================
   Markdown renderer additions
   ============================================ */

.dw-markdown-heading {
  display: flex;
  align-items: center;
}
.dw-markdown-blockquote { border-left-color: var(--dw-primary); }
.dw-markdown-link { font-weight: 500; }
.dw-markdown-external {
  margin-left: 0.25rem;
  font-size: var(--dw-text-xs);
}
.dw-markdown-table-scroll {
  margin-bottom: 1rem;
  overflow-x: auto;
}
.dw-markdown-image {
  max-width: 100%;
  margin: 1rem 0;
  border-radius: var(--dw-radius);
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 1024px) {
  .dw-toc {
    display: none;
  }
}

@media (max-width: 768px) {
  .dw-agent-context-hint { display: none; }

  .dw-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--dw-transition-normal, 200ms ease);
  }

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

  .dw-content {
    padding: 1rem;
    padding-top: calc(var(--dw-header-height, 3.5rem) + 1rem);
  }
}

/* ============================================
   Prev/Next Navigation
   ============================================ */

.dw-prev-next {
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--dw-border);
}

.dw-prev-next-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--dw-radius-lg, 0.5rem);
  border: 1px solid var(--dw-border);
  color: var(--dw-muted-foreground);
  text-decoration: none;
  transition: color var(--dw-transition-fast, 150ms ease), border-color var(--dw-transition-fast, 150ms ease);
}

.dw-prev-next-link:hover {
  color: var(--dw-foreground);
  border-color: var(--dw-ring);
}

.dw-prev-next-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.dw-prev-next-icon-next {
  transform: rotate(180deg);
}

.dw-prev-next-label {
  font-size: 0.625rem;
  font-family: var(--dw-font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.6;
}

.dw-prev-next-title {
  font-size: 0.875rem;
  font-weight: 500;
}

/* ============================================
   Syntax Highlighting — semantic theme tokens
   ============================================ */

.hljs-keyword { color: var(--dw-syntax-keyword); font-weight: 500; }
.hljs-string { color: var(--dw-syntax-string); }
.hljs-number { color: var(--dw-syntax-number); }
.hljs-property { color: var(--dw-syntax-type); }
.hljs-comment { color: var(--dw-syntax-comment); font-style: italic; }
.hljs-type,
.hljs-title { color: var(--dw-syntax-type); }
.hljs-title.function_,
.hljs-function { color: var(--dw-syntax-function); }
.hljs-punctuation,
.hljs-params { color: var(--dw-syntax-punctuation); }
.hljs-attr,
.hljs-name,
.hljs-tag,
.hljs-selector-tag { color: var(--dw-syntax-string); }
.hljs-built_in,
.hljs-variable { color: var(--dw-syntax-keyword); }
.hljs-literal { color: var(--dw-syntax-number); }
.hljs-meta { color: var(--dw-syntax-comment); }
.hljs-selector-class { color: var(--dw-syntax-type); }

/* ============================================
   Rail navigation (nav: 'rail')
   ============================================ */

.dw-rail {
  width: var(--dw-rail-width, 56px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: calc(var(--dw-header-height, 3.5rem) + 1rem) 0.5rem 1rem;
  border-right: 1px solid var(--dw-border);
  background: var(--dw-sidebar-bg);
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: flex-start;
  overflow-y: auto;
}
.dw-rail-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.75rem;
  border-radius: 0.5rem;
  color: var(--dw-primary);
  text-decoration: none;
}
.dw-rail-items {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}
.dw-rail-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 0.625rem;
  background: transparent;
  color: var(--dw-muted-foreground);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.dw-rail-item:hover { background: var(--dw-sidebar-active-bg); color: var(--dw-foreground); }
.dw-rail-item-active {
  background: var(--dw-sidebar-active-bg);
  color: var(--dw-sidebar-active);
}
.dw-rail-icon { width: 1.125rem; height: 1.125rem; }
.dw-rail-glyph {
  font-family: var(--dw-font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
}
.dw-rail-tip {
  position: absolute;
  left: calc(100% + 0.75rem);
  top: 50%;
  transform: translateY(-50%);
  padding: 0.3rem 0.6rem;
  border-radius: 0.375rem;
  border: 1px solid var(--dw-border);
  background: var(--dw-foreground);
  color: var(--dw-background);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 60;
}
.dw-rail-item:hover .dw-rail-tip { opacity: 1; }
.dw-rail-foot { margin-top: auto; }
@media (max-width: 768px) {
  .dw-rail { width: 48px; }
  .dw-rail-tip { display: none; }
}

/* ============================================
   Command palette (nav: 'command')
   ============================================ */

.dw-header-center {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 0 1rem;
  min-width: 0;
}
.dw-cmd-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: min(100%, 28rem);
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--dw-border);
  border-radius: 0.5rem;
  background: var(--dw-muted);
  color: var(--dw-muted-foreground);
  font-family: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color 0.15s;
}
.dw-cmd-trigger:hover { border-color: var(--dw-foreground); }
.dw-cmd-trigger-icon { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
.dw-cmd-trigger-text {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dw-cmd-kbd {
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--dw-border);
  border-radius: 0.25rem;
  background: var(--dw-background);
  font-family: var(--dw-font-mono);
  font-size: 0.6875rem;
  color: var(--dw-muted-foreground);
}
.dw-cmd-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18vh;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}
.dw-cmd-palette {
  width: min(92vw, 34rem);
  border: 1px solid var(--dw-border);
  border-radius: 0.75rem;
  background: var(--dw-background);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}
.dw-cmd-input-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--dw-border);
}
.dw-cmd-input-icon { width: 1rem; height: 1rem; color: var(--dw-muted-foreground); flex-shrink: 0; }
.dw-cmd-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--dw-foreground);
  font-family: inherit;
  font-size: 0.9375rem;
  outline: none;
}
.dw-cmd-results {
  max-height: 22rem;
  overflow-y: auto;
  padding: 0.375rem;
}
.dw-cmd-result {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  color: var(--dw-foreground);
  font-size: 0.875rem;
  text-decoration: none;
}
.dw-cmd-result:hover { background: var(--dw-muted); }
.dw-cmd-result-icon { width: 0.9375rem; height: 0.9375rem; color: var(--dw-muted-foreground); flex-shrink: 0; }
.dw-cmd-result-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-cmd-result-meta {
  font-family: var(--dw-font-mono);
  font-size: 0.6875rem;
  color: var(--dw-muted-foreground);
}
.dw-cmd-result-enter { width: 0.8125rem; height: 0.8125rem; color: var(--dw-muted-foreground); }
.dw-cmd-empty {
  padding: 1.5rem 1rem;
  margin: 0;
  text-align: center;
  color: var(--dw-muted-foreground);
  font-size: 0.8125rem;
}

/* ============================================
   Floating TOC (toc: 'floating')
   ============================================ */

.dw-toc-floating {
  position: fixed;
  top: calc(var(--dw-header-height, 3.5rem) + 3rem);
  right: 1.5rem;
  width: 13rem;
  height: auto;
  max-height: 60vh;
  padding: 0.875rem 1rem;
  border: 1px solid var(--dw-border);
  border-radius: 0.75rem;
  background: var(--dw-background);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
@media (max-width: 1280px) {
  .dw-toc-floating { display: none; }
}

/* ============================================
   Numbered sidebar (numbered: true)
   ============================================ */

/* Counter lives on the sidebar root so numbering runs across groups */
.dw-sidebar-numbered .dw-sidebar-nav { counter-reset: dw-item; }
.dw-sidebar-numbered .dw-sidebar-item { counter-increment: dw-item; }
.dw-sidebar-numbered .dw-sidebar-item::before {
  content: counter(dw-item, decimal-leading-zero);
  margin-right: 0.625rem;
  font-family: var(--dw-font-mono);
  font-size: 0.6875rem;
  color: var(--dw-muted-foreground);
  flex-shrink: 0;
}
.dw-sidebar-numbered .dw-sidebar-item.active::before { color: var(--dw-sidebar-active); }

/* ============================================
   Split code rail (measure: 'split')
   ============================================ */

.dw-split-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: 2rem;
  align-items: start;
}
.dw-split-section + .dw-split-section {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--dw-border);
}
.dw-split-main { min-width: 0; }
.dw-split-rail {
  min-width: 0;
  position: sticky;
  top: calc(var(--dw-header-height, 3.5rem) + 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Always-dark code surface — re-scope the code tokens to dark values */
  --dw-code-bg: #1c1c1a;
  --dw-code-border: rgba(255, 255, 255, 0.1);
  --dw-secondary: #2a2a27;
  --dw-border: rgba(255, 255, 255, 0.1);
  --dw-foreground: #e8e8e3;
  --dw-muted-foreground: #9b9b94;
  --dw-syntax-keyword: #f0b98c;
  --dw-syntax-string: #9ed5ad;
  --dw-syntax-number: #9bc8e5;
  --dw-syntax-type: #cdb4e8;
  --dw-syntax-function: #c4c4eb;
  --dw-syntax-punctuation: #d0d4d8;
  --dw-syntax-comment: #a7b0b0;
}
.dw-split-rail .dw-code-block {
  margin: 0;
}
.dw-split-rail .dw-code-block-frame {
  border-radius: 0.625rem;
}
@media (max-width: 1024px) {
  .dw-split-section { grid-template-columns: 1fr; }
  .dw-split-rail { position: static; }
}


:root{--dw-font-serif:var(--dw-font-sans);--dw-header-height:3.5rem;--dw-hair:color-mix(in srgb,var(--dw-foreground) 9%,transparent)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{margin:0;font-family:var(--dw-font-sans);background:var(--dw-background);color:var(--dw-foreground);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"ss01","cv11"}
*{box-sizing:border-box}
::selection{background:color-mix(in srgb,var(--dw-primary) 24%,transparent)}
button,select,input{font:inherit}
.dw-fresh-skip{position:fixed;left:1rem;top:-5rem;z-index:100}
.dw-fresh-skip:focus{top:1rem;background:var(--dw-background);padding:.5rem}

/* Header: a hairline bar, square brand mark, quiet tools. */
.dw-header{background:var(--dw-header-bg);border-bottom:1px solid var(--dw-hair);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
.dw-header-inner{padding-inline:1.25rem}
.dw-header-brand{gap:.6rem;font-size:.9375rem;font-weight:600;letter-spacing:-.015em;color:var(--dw-foreground);text-decoration:none}
.dw-header-brand-dot{width:.625rem;height:.625rem;border-radius:2px;background:var(--dw-foreground);box-shadow:3px 3px 0 var(--dw-primary)}
.dw-fresh-tools{display:flex;align-items:center;gap:.5rem}
.dw-fresh-tools .dw-cmd-trigger{width:16rem;margin:0;height:2rem;border:1px solid var(--dw-hair);border-radius:.5rem;background:color-mix(in srgb,var(--dw-foreground) 3%,transparent);color:var(--dw-muted-foreground);font-size:.8125rem;transition:border-color .15s,color .15s}
.dw-fresh-tools .dw-cmd-trigger:hover{border-color:color-mix(in srgb,var(--dw-foreground) 22%,transparent);color:var(--dw-foreground)}
.dw-cmd-kbd{font-family:var(--dw-font-mono);font-size:.6875rem;letter-spacing:.02em;border:1px solid var(--dw-hair);border-radius:.3rem;background:none;padding:.05rem .35rem;color:var(--dw-muted-foreground)}
.dw-fresh-theme{height:2rem;padding:0 1.4rem 0 .5rem;border:0;border-radius:.5rem;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23888' stroke-width='1.5'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E") no-repeat right .4rem center;color:var(--dw-muted-foreground);font-family:var(--dw-font-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;-webkit-appearance:none;appearance:none;field-sizing:content}
.dw-fresh-theme:hover,.dw-fresh-theme:focus-visible{color:var(--dw-foreground)}
.dw-fresh-theme option{text-transform:none;font-family:var(--dw-font-sans);background:var(--dw-background);color:var(--dw-foreground)}
.dw-header-theme-toggle{color:var(--dw-muted-foreground);border-radius:.5rem}
.dw-header-theme-toggle:hover{color:var(--dw-foreground);background:color-mix(in srgb,var(--dw-foreground) 5%,transparent)}

/* Sidebar: transparent, mono group labels, a hairline rail with the active page marked on it. */
.dw-sidebar{background:transparent;border-right:1px solid var(--dw-hair)}
.dw-sidebar-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.dw-sidebar-nav{padding-inline:1.25rem}
.dw-sidebar-group{margin-top:2rem;padding-top:0;border-top:0}
.dw-sidebar-group:first-child{margin-top:0}
.dw-sidebar-group-title{margin-bottom:.75rem;padding:0;font-family:var(--dw-font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--dw-muted-foreground)}
.dw-sidebar-group-title svg{opacity:.5}
.dw-sidebar-group>.dw-sidebar-list{border-left:1px solid var(--dw-hair);margin-left:.1rem}
.dw-sidebar-item{position:relative;display:block;margin-left:-1px;padding:.32rem .9rem;border-left:1px solid transparent;border-radius:0;font-size:.875rem;line-height:1.45;color:var(--dw-muted-foreground);text-decoration:none;transition:color .15s,border-color .15s}
.dw-sidebar-item:hover{color:var(--dw-foreground);background:none;border-left-color:color-mix(in srgb,var(--dw-foreground) 30%,transparent)}
.dw-sidebar-item.active{background:none;color:var(--dw-foreground);font-weight:550;border-left:2px solid var(--dw-primary);padding-left:calc(.9rem - 1px)}
.dw-agent-paths{margin-top:2rem}
.dw-agent-paths-title{margin:0 0 .75rem;font-family:var(--dw-font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--dw-muted-foreground)}
.dw-agent-paths-list{list-style:none;margin:0 0 0 .1rem;padding:0;border-left:1px solid var(--dw-hair)}
.dw-agent-path{display:block;margin-left:-1px;padding:.28rem .9rem;border-left:1px solid transparent;font-family:var(--dw-font-mono);font-size:.78rem;color:var(--dw-muted-foreground);text-decoration:none}
.dw-agent-path:hover{color:var(--dw-foreground);border-left-color:color-mix(in srgb,var(--dw-foreground) 30%,transparent)}
@media(min-width:1024px){.dw-sidebar-header{display:none}.dw-sidebar-nav{padding-top:3rem}}

/* Page head: a mono eyebrow, then a big tight title and a softer lede. */
.dw-content{--dw-content-top-offset:3rem;max-width:46rem;padding-bottom:6rem}
.dw-breadcrumbs{margin-bottom:1.1rem}
.dw-breadcrumbs-list{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding:0;font-family:var(--dw-font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dw-muted-foreground)}
.dw-breadcrumbs-item{display:flex;align-items:center}
.dw-breadcrumbs-item:last-child{display:none}
.dw-breadcrumbs-item:nth-last-child(2) .dw-breadcrumbs-separator{display:none}
.dw-breadcrumbs-separator{margin:0 .6em;font-size:0}
.dw-breadcrumbs-separator::before{content:"·";font-size:.6875rem}
.dw-breadcrumbs-item:first-child .dw-breadcrumbs-label{color:var(--dw-primary)}

.dw-prose{font-size:1rem;line-height:1.72;color:color-mix(in srgb,var(--dw-foreground) 86%,var(--dw-background))}
.dw-prose strong{color:var(--dw-foreground);font-weight:600}
.dw-prose h1,.dw-prose h2,.dw-prose h3,.dw-prose h4{color:var(--dw-foreground);font-family:var(--dw-font-sans)}
.dw-shell-page-title,.dw-prose h1{font-size:clamp(2.1rem,4.2vw,2.85rem);line-height:1.06;font-weight:600;letter-spacing:-.04em;margin:0 0 1.25rem;text-wrap:balance}
.dw-page-path{display:none}
.dw-page-head+.dw-prose>p:first-child{font-size:1.1875rem;line-height:1.6;letter-spacing:-.008em;color:var(--dw-muted-foreground);margin-bottom:2.5rem;text-wrap:pretty}
.dw-page-head+.dw-prose>p:first-child strong,.dw-page-head+.dw-prose>p:first-child a{color:var(--dw-foreground)}
.dw-prose>.dw-prose{counter-reset:dw-section}
.dw-prose h2{flex-wrap:wrap;column-gap:.75rem;margin:3.5rem 0 1rem;padding-top:1.5rem;border-top:1px solid var(--dw-hair);font-size:1.5rem;line-height:1.2;font-weight:600;letter-spacing:-.028em;counter-increment:dw-section}
.dw-prose h2::before{content:"§" counter(dw-section,decimal-leading-zero);flex-basis:100%;margin-bottom:.55rem;font-family:var(--dw-font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.12em;color:var(--dw-muted-foreground)}
.dw-prose h3{margin:2.25rem 0 .6rem;font-size:1.125rem;font-weight:600;letter-spacing:-.018em}
.dw-prose h4{margin:1.75rem 0 .5rem;font-family:var(--dw-font-mono);font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--dw-muted-foreground)}
.dw-heading-link{color:var(--dw-muted-foreground)}
.dw-prose p,.dw-prose ul,.dw-prose ol{margin:0 0 1.15rem}
.dw-prose li{margin:.35rem 0}
.dw-prose li::marker{color:var(--dw-muted-foreground)}
.dw-prose hr{border:0;border-top:1px solid var(--dw-hair);margin:3rem 0}

/* Links: ink with a hairline underline; the accent shows on hover. */
.dw-prose a:not(.dw-heading-link){color:var(--dw-foreground);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--dw-foreground) 28%,transparent);text-decoration-thickness:1px;text-underline-offset:.22em;transition:color .15s,text-decoration-color .15s}
.dw-prose a:not(.dw-heading-link):hover{color:var(--dw-primary);text-decoration-color:var(--dw-primary)}

/* Code. */
.dw-prose .dw-code-block{margin:1.5rem 0}
.dw-prose .dw-code-block-frame{border:1px solid var(--dw-code-border);border-radius:.65rem;background:var(--dw-code-bg);box-shadow:none}
.dw-prose .dw-code-block-language{top:.7rem;left:1.15rem;font-family:var(--dw-font-mono);font-size:.625rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--dw-muted-foreground);background:none}
.dw-prose .dw-code-block-pre{padding:1rem 3rem 1rem 1.15rem;font-size:.8125rem;line-height:1.7}
.dw-prose .dw-code-block-language~.dw-code-block-pre{padding-top:2.1rem}
.dw-prose .dw-inline-code,.dw-prose :not(pre)>code{padding:.08em .38em;font-family:var(--dw-font-mono);font-size:.84em;font-weight:450;color:var(--dw-foreground);background:color-mix(in srgb,var(--dw-foreground) 4.5%,transparent);border:1px solid var(--dw-hair);border-radius:.3rem}
.dw-prose a .dw-inline-code{color:inherit}

/* Without JavaScript these controls would do nothing, so they are not shown. */
html:not(.js) .dw-fresh-tools,html:not(.js) .dw-header-theme-toggle,html:not(.js) .dw-header-menu-btn{display:none!important}

/* Tables: hairline rules, mono column labels. */
.dw-markdown-table-scroll{margin:1.5rem 0 2rem;border:0;border-top:1px solid var(--dw-foreground);border-radius:0}
.dw-prose .dw-markdown-table-scroll table{margin:0;font-size:.875rem;width:100%}
.dw-prose th,.dw-prose td{border:0;border-bottom:1px solid var(--dw-hair);padding:.7rem 1rem .7rem 0;vertical-align:top;line-height:1.55;text-align:left}
.dw-prose th{background:none;color:var(--dw-muted-foreground);font-family:var(--dw-font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.dw-prose tr:nth-child(even){background:none}

/* On this page. */
.dw-toc{padding-top:3rem}
.dw-toc-title{margin:0 0 .75rem;font-family:var(--dw-font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--dw-muted-foreground)}
.dw-toc-link{font-size:.8125rem;line-height:1.45;color:var(--dw-muted-foreground);text-decoration:none;transition:color .15s}
.dw-toc-link:hover{color:var(--dw-foreground)}
.dw-toc-link.active{color:var(--dw-foreground);border-left-color:var(--dw-primary)}

/* Previous / next. */
.dw-prev-next{margin-top:4.5rem;padding-top:0;border-top:0;gap:1rem}
.dw-prev-next-link{border:1px solid var(--dw-hair);border-radius:.65rem;padding:1rem 1.15rem;background:none;text-decoration:none;transition:border-color .15s}
.dw-prev-next-link:hover{border-color:color-mix(in srgb,var(--dw-foreground) 30%,transparent);background:none}
.dw-prev-next-label{font-family:var(--dw-font-mono);font-size:.625rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--dw-muted-foreground)}
.dw-prev-next-title{font-size:.9375rem;font-weight:600;letter-spacing:-.012em;color:var(--dw-foreground)}

@media(max-width:1000px){.dw-fresh-tools .dw-cmd-trigger{width:11rem}}
@media(max-width:768px){
  .dw-header-inner{padding-inline:.75rem}
  .dw-header-menu-btn{display:flex!important;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;background:none;border:0;border-radius:var(--dw-radius);color:var(--dw-foreground);cursor:pointer}
  .dw-header-left{gap:.5rem}
  .dw-header-right{gap:.25rem}
  .dw-fresh-tools{gap:.25rem}
  .dw-fresh-tools .dw-cmd-trigger{width:2.25rem;height:2.25rem;padding:0;justify-content:center;border:0;background:none;color:var(--dw-foreground)}
  .dw-fresh-tools .dw-cmd-trigger-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .dw-fresh-tools .dw-cmd-kbd{display:none}
  .dw-fresh-tools .dw-cmd-trigger-icon{width:1rem;height:1rem}
  .dw-fresh-theme{padding-right:1.2rem;background-position:right .25rem center}
  .dw-sidebar{background:var(--dw-background)}
  .dw-content{padding-top:calc(var(--dw-header-height) + 1.75rem)}
  .dw-page-head+.dw-prose>p:first-child{font-size:1.0625rem}
  .dw-prose h2{margin-top:2.75rem}
}

.dw-cmd-palette{border:1px solid var(--dw-hair);border-radius:.85rem;background:var(--dw-background);box-shadow:0 24px 70px -20px rgba(0,0,0,.45)}
.dw-cmd-result{text-decoration:none}
.dw-cmd-result[aria-selected=true]{background:color-mix(in srgb,var(--dw-foreground) 5%,transparent)}
.dw-cmd-result-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.dw-cmd-result-body .dw-cmd-result-title{flex:none}
.dw-cmd-result-heading{color:var(--dw-muted-foreground);font-weight:400}
.dw-cmd-result-snippet{font-size:.75rem;line-height:1.4;color:var(--dw-muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dw-cmd-result-snippet mark{background:color-mix(in srgb,var(--dw-primary) 22%,transparent);color:var(--dw-foreground);border-radius:2px;padding:0 1px}
.dw-cmd-result-meta{font-family:var(--dw-font-mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase}
/* Raw HTML from READMEs: centered heroes and full-width images. */
.dw-prose [align=center]{text-align:center}
.dw-prose [align=center] img{margin-inline:auto}
.dw-prose [align=center] .dw-markdown-heading{justify-content:center}
.dw-prose [align=center] h1+p,.dw-prose [align=center]+p{margin-inline:auto}
.dw-prose img{max-width:100%;height:auto;border-radius:.75rem}
.dw-prose a:has(> img){display:inline-block;text-decoration:none}
/* GitHub alerts: [!NOTE], [!TIP], [!IMPORTANT], [!WARNING], [!CAUTION]. */
.dw-prose .dw-markdown-alert{--dw-alert:var(--dw-primary);margin:1.75rem 0;font-style:normal;color:var(--dw-foreground);border:1px solid var(--dw-hair);border-left:2px solid var(--dw-alert);background:color-mix(in srgb,var(--dw-foreground) 2.5%,transparent);border-radius:0 .5rem .5rem 0;padding:.9rem 1.15rem}
.dw-prose .dw-markdown-alert>p{margin:.25rem 0}
.dw-prose .dw-markdown-alert-title{font-family:var(--dw-font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--dw-alert)}
.dw-prose .dw-markdown-alert-warning{--dw-alert:#d97706}
.dw-prose .dw-markdown-alert-caution{--dw-alert:#dc2626}
.dw-prose blockquote:not(.dw-markdown-alert){border-left:2px solid var(--dw-hair);padding-left:1.15rem;color:var(--dw-muted-foreground);font-style:normal}