:root {
  color-scheme: light;

  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Spline Sans", "Segoe UI", system-ui, sans-serif;
  --font-logo: "IBM Plex Mono", "SFMono-Regular", monospace;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --bg-page: oklch(95.16% 0.0205 81.78);
  --bg-page-alt: oklch(93.26% 0.0233 75.85);
  --bg-surface: oklch(99.45% 0.0057 84.57);
  --bg-surface-raised: oklch(98.21% 0.0141 74.43);
  --bg-surface-muted: oklch(95.49% 0.0193 80.12);
  --bg-header: oklch(93.47% 0.0319 82.77);
  --bg-toggle-active: oklch(90.84% 0.0309 72.16);
  --bg-menu-link-hover: oklch(96.52% 0.0250 69.44);
  --bg-inline-code: oklch(93.13% 0.0284 74.30);
  --bg-table-head: oklch(94.69% 0.0227 78.22);
  --bg-code-meta: oklch(94.55% 0.0238 73.61);
  --bg-code-copy-hover: oklch(89.35% 0.0338 73.17);
  --bg-code-copy-active: oklch(86.44% 0.0404 73.39);

  --text-primary: oklch(26.03% 0.0057 91.59);
  --text-secondary: oklch(47.01% 0.0128 76.50);
  --text-strong: oklch(26.40% 0.0371 54.78);
  --text-heading: oklch(25.32% 0.0339 55.76);
  --text-emphasis: oklch(30.10% 0.0346 60.42);
  --text-emphasis-alt: oklch(28.82% 0.0318 57.95);
  --text-subtle: oklch(40.68% 0.0242 64.59);
  --text-code-inline: oklch(35.29% 0.0568 50.04);
  --text-code-meta: oklch(45.79% 0.0290 71.00);
  --text-code-button: oklch(39.21% 0.0233 61.87);

  --border-subtle: oklch(90.76% 0.0303 73.88);
  --border-strong: oklch(87.72% 0.0381 71.18);
  --border-code-meta: var(--border-strong);
  /* --border-code-body: oklch(44.00% 0.0170 58.00); */
  --border-code-body: var(--border-strong);

  --brand-link: oklch(44.58% 0.0861 48.39);
  --brand-link-hover: oklch(36.26% 0.0757 43.79);
  --focus-ring: oklch(50.69% 0.1855 257.73);

  --radius-lg: 18px;
  --radius-md: 12px;
  --shadow-soft: 0 12px 35px oklch(28.47% 0.0370 63.71 / 0.1);
  --shadow-card: 0 10px 24px oklch(37.97% 0.0592 68.15 / 0.08);
}

/* [data-doc-theme="dark"] .ochre,
[data-doc-theme="dark"] .ochre span {
  --ochre: var(--ochre-dark);
  --ochre-bg: var(--ochre-dark-bg);
  color: var(--ochre);
  background-color: var(--ochre-bg);
}

[data-doc-theme="light"] .ochre,
[data-doc-theme="light"] .ochre span {
  --ochre: var(--ochre-light);
  --ochre-bg: var(--ochre-light-bg);
  color: var(--ochre);
  background-color: var(--ochre-bg);
}
 */

:root[data-doc-theme="dark"] {
  color-scheme: dark;

  --bg-page: oklch(26.50% 0.0180 58.00);
  --bg-page-alt: oklch(29.00% 0.0180 58.00);
  --bg-surface: oklch(31.00% 0.0200 57.00);
  --bg-surface-raised: oklch(34.00% 0.0220 56.00);
  --bg-surface-muted: oklch(32.40% 0.0200 57.00);
  --bg-header: oklch(27.80% 0.0200 58.00 / 0.90);
  --bg-toggle-active: oklch(38.50% 0.0300 54.00);
  --bg-menu-link-hover: oklch(36.50% 0.0260 56.00);
  --bg-inline-code: oklch(35.50% 0.0280 54.00);
  --bg-table-head: oklch(36.80% 0.0250 57.00);
  --bg-code-meta: oklch(34.70% 0.0220 58.00);
  --bg-code-copy-hover: oklch(41.00% 0.0330 52.00);
  --bg-code-copy-active: oklch(43.50% 0.0360 51.00);

  --text-primary: oklch(83.50% 0.0130 70.00);
  --text-secondary: oklch(69.00% 0.0120 72.00);
  --text-strong: oklch(87.00% 0.0150 70.00);
  --text-heading: oklch(85.50% 0.0160 68.00);
  --text-emphasis: oklch(88.00% 0.0170 66.00);
  --text-emphasis-alt: oklch(82.00% 0.0140 68.00);
  --text-subtle: oklch(73.50% 0.0120 70.00);
  --text-code-inline: oklch(79.00% 0.0200 63.00);
  --text-code-meta: oklch(71.00% 0.0120 72.00);
  --text-code-button: oklch(75.00% 0.0120 70.00);

  --border-subtle: oklch(44.00% 0.0170 58.00);
  --border-strong: oklch(49.00% 0.0210 56.00);

  --border-code-meta: var(--border-subtle);
  --border-code-body: #221C17;

  --brand-link: oklch(72.00% 0.0820 58.00);
  --brand-link-hover: oklch(77.00% 0.0950 57.00);
  --focus-ring: oklch(70.00% 0.1100 235.00);

  --shadow-soft: 0 12px 35px oklch(11.00% 0.0110 58.00 / 0.24);
  --shadow-card: 0 10px 24px oklch(10.00% 0.0100 58.00 / 0.20);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.67;
  background: var(--bg-page);
}

a {
  color: var(--brand-link);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  font-weight: 600;
}

a:hover {
  color: var(--brand-link-hover);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.site-header {
  position: static;
  z-index: 30;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-header);
}

.site-header__inner {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0.95rem 1rem 0.85rem;
}

.site-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-right: 2.45rem;
}

.site-branding {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
}

.site-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.theme-toggle {
  position: absolute;
  top: 0.95rem;
  right: 1rem;
  z-index: 2;
  width: 1.95rem;
  height: 1.95rem;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.14rem;
  border-radius: 999px;
  border: none;
  background: color-mix(in oklch, var(--bg-surface-raised) 88%, transparent);
  color: var(--text-secondary);
  cursor: pointer;
  opacity: 0.88;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    opacity 180ms ease;
}

.theme-toggle:hover {
  opacity: 1;
  color: var(--text-primary);
  background: var(--bg-surface-raised);
}

.theme-toggle__sun,
.theme-toggle__moon {
  font-size: 0.63rem;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 180ms ease;
  font-family: system-ui;
}

.theme-toggle[data-theme="light"] .theme-toggle__moon {
  display: none;
}

.theme-toggle[data-theme="dark"] .theme-toggle__sun {
  display: none;
}

.site-brand {
  display: inline-block;
  font-family: var(--font-logo);
  font-size: 1.48rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-strong);
  text-decoration: none;
}

.site-brand:hover {
  text-decoration: none;
}

.site-brand__github {
  border: 0;
  margin: 0;
  border-radius: 999px;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: transparent;
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease;
}

.site-brand__github-icon {
  width: 1.2rem;
  height: 1.2rem;
  display: block;
}

.site-brand__github-icon path {
  fill: currentColor;
}

.site-brand__github:hover {
  color: var(--text-primary);
  background: var(--bg-toggle-active);
  text-decoration: none;
}

.syntax-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  padding: 0.28rem;
}

.syntax-toggle button {
  border: 0;
  margin: 0;
  border-radius: 999px;
  min-width: 2.2rem;
  height: 2rem;
  padding: 0 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}

.syntax-toggle__icon {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

.syntax-toggle__label {
  display: inline-block;
  font-weight: 700;
}

.syntax-toggle button:hover {
  color: var(--text-primary);
}

.syntax-toggle button.is-active {
  color: var(--text-emphasis);
  background: var(--bg-toggle-active);
}

.site-menu {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
}

.site-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.45rem;
}

.site-menu__list li {
  flex: 1;
  min-width: fit-content;
}

.site-menu__link {
  display: block;
  text-align: center;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-raised);
  padding: 0.35rem 0.72rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--text-subtle);
  text-decoration: none;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.site-menu__link:hover {
  background: var(--bg-menu-link-hover);
  border-color: var(--border-subtle);
  color: var(--text-emphasis-alt);
  text-decoration: none;
}

.site-menu__link--active,
.site-menu__link[aria-current="page"] {
  color: var(--text-emphasis);
  border: 1px solid transparent;
  background: var(--bg-toggle-active);
}

.doc-main {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 1.35rem 1rem 2.25rem;
}

.doc-prose {
  width: 100%;
  padding: 0;
}

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

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

.doc-prose h1,
.doc-prose h2,
.doc-prose h3,
.doc-prose h4 {
  font-family: var(--font-head);
  line-height: 1.24;
  color: var(--text-heading);
  max-width: 30em;
}

.doc-prose h1 {
  margin-bottom: 0.95rem;
  font-size: clamp(2rem, 4vw, 2.72rem);
}

.doc-prose h2 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  padding-top: 1.28rem;
  font-size: clamp(1.4rem, 3vw, 1.86rem);
}

.doc-prose--guide h2 {
  font-size: clamp(2rem, 4vw, 2.72rem);
}

.doc-prose h3,
.doc-prose h4 {
  margin-top: 1.6rem;
  margin-bottom: 0.55rem;
}

.doc-prose p,
.doc-prose ul,
.doc-prose ol,
.doc-prose blockquote,
.doc-prose table {
  max-width: 72ch;
}

.doc-prose p,
.doc-prose li,
.doc-prose td,
.doc-prose th {
  color: var(--text-primary);
}

.doc-prose ul,
.doc-prose ol {
  padding-left: 1.2rem;
}

.doc-prose li+li {
  margin-top: 0.35rem;
}

.doc-prose :not(pre)>code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  font-weight: 600;
  color: var(--text-code-inline);
  background: var(--bg-inline-code);
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  padding: 0.1rem 0.34rem;
}

.doc-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.1rem 0;
}

.doc-prose th,
.doc-prose td {
  border: 1px solid var(--border-subtle);
  padding: 0.55rem 0.6rem;
  text-align: left;
}

.doc-prose th {
  background: var(--bg-table-head);
  font-weight: 600;
}

.doc-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.doc-prose pre {
  overflow: auto;
  margin: 0;
}

.doc-code {
  margin: 1rem 0 2rem;
  overflow: hidden;
}

.doc-code__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin: 0;
  padding: 0.42rem 0.72rem;
  border: 1px solid var(--border-code-meta);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--bg-code-meta);
  color: var(--text-code-meta);
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-size: 0.73rem;
  letter-spacing: 0.06em;
}

.doc-code__lang {
  font-weight: 600;
}

.doc-code__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--bg-code-meta);
  color: var(--text-code-button);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.22rem 0.5rem;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.doc-code__copy-icon {
  width: 0.86rem;
  height: 0.86rem;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.doc-code__copy:hover {
  background: var(--bg-code-copy-hover);
  color: var(--text-emphasis);
}

.doc-code__copy:active {
  background: var(--bg-code-copy-active);
  color: var(--text-emphasis);
}

.doc-code__copy.is-copied {
  background: var(--bg-code-copy-active);
  color: var(--text-emphasis);
}

.doc-code .doc-code__pre {
  margin: 0;
  padding: 0.95rem 1rem;
  border: 1px solid var(--border-code-body);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.doc-code .ochre code,
.doc-code__code {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.5;
}

.doc-code .line {
  display: inline-block;
  line-height: 2;
}

.doc-code-pair .doc-code[data-syntax] {
  display: none;
}

html[data-doc-syntax="reason"] .doc-code-pair .doc-code[data-syntax="reason"] {
  display: block;
}

html[data-doc-syntax="mlx"] .doc-code-pair .doc-code[data-syntax="mlx"] {
  display: block;
}

@media (max-width: 980px) {
  .site-header__top {
    align-items: flex-start;
    flex-direction: column;
    padding-right: 2.35rem;
  }

  .site-controls {
    width: 100%;
    justify-content: space-between;
  }

  .site-menu {
    overflow-x: auto;
    padding-bottom: 0.3rem;
  }

  .site-menu__list {
    width: max-content;
    flex-wrap: nowrap;
    padding-right: 0.5rem;
  }
}

@media (max-width: 640px) {
  .site-header__inner {
    padding-top: 0.82rem;
  }

  .theme-toggle {
    top: 0.82rem;
    right: 0.75rem;
  }

  .site-brand {
    font-size: 1.32rem;
  }

  .site-controls {
    width: 100%;
    justify-content: flex-end;
    gap: 0.45rem;
  }

  .syntax-toggle {
    margin-left: auto;
  }

  .doc-main {
    margin-top: 1rem;
    padding: 1rem 0.75rem 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}