/*
Hallmark · macrostructure: Map / Diagram + Catalogue + Centered Reading · genre: modern-minimal · tone: austere technical · palette: cobalt on cool paper
Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
Hallmark · contrast: pass (40–41) · nav: N9 · footer: Ft4 · slop: pass (42–45)
Hallmark · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30)
Hallmark · mobile: pass (34, 49, 50–57)
THESIS: The product landing ends after proof, first run, and routes; documentation begins on its own page.
SIGNATURE: One inspectable SQLite row → ciphertext envelope → SQLite row data path.
MOTION: Cut by default; only the mobile documentation navigation changes position.
TYPE: Native system UI by explicit product requirement; system mono only for code and data.
*/
@import "tokens-6ecfc064af32.css";

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + var(--space-md));
  -webkit-text-size-adjust: 100%;
}

html,
body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.nav-open { overflow: hidden; }

a {
  color: var(--color-accent-2);
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:active {
  color: var(--color-accent-2);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.skip-link {
  position: fixed;
  inset-block-start: var(--space-xs);
  inset-inline-start: var(--space-xs);
  z-index: var(--z-modal);
  min-height: var(--control-h);
  padding: var(--space-2xs) var(--space-sm);
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 650;
  white-space: nowrap;
  transform: translateY(calc(-100% - var(--space-lg)));
}

.skip-link:focus { transform: translateY(0); }

/* Edge-aligned minimal navigation: the document, not the bar, carries the brand. */
.topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  height: var(--topbar-h);
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: var(--shadow-sticky);
}

.topbar-inner {
  width: min(100%, var(--shell-max));
  height: 100%;
  margin-inline: auto;
  padding-inline: clamp(var(--space-xs), 2vw, var(--space-lg));
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.brand-lockup {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

.brand {
  min-width: 0;
  min-height: var(--control-h);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-ink);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.brand-mark {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.65rem;
  height: 1.65rem;
  background: var(--color-accent-2);
  -webkit-mask: url("simplysync-mark-6ecfc064af32.svg") center / contain no-repeat;
  mask: url("simplysync-mark-6ecfc064af32.svg") center / contain no-repeat;
}

.brand-name {
  font-size: var(--text-base);
  font-weight: 720;
  letter-spacing: -0.025em;
}

.topbar-links {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-inline-start: auto;
}

.topbar-links a {
  min-height: var(--control-h);
  padding-inline: var(--space-xs);
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.topbar-links a { display: none; }
.topbar-links .topbar-showcase { display: inline-flex; }

.theme-toggle,
.menu-toggle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--control-h);
  height: var(--control-h);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink-2);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}

.theme-toggle { margin-inline-start: auto; }
.topbar-links + .theme-toggle { margin-inline-start: 0; }

.theme-toggle:active,
.menu-toggle:active { transform: translateY(1px); }

.theme-toggle:disabled,
.menu-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.theme-toggle svg,
.menu-toggle svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle .t-moon { display: none; }
[data-theme="dark"] .theme-toggle .t-sun { display: none; }
[data-theme="dark"] .theme-toggle .t-moon { display: block; }

/* The product landing is finite. The full overview starts at /docs. */
.landing-main {
  width: min(100%, var(--shell-max));
  margin-inline: auto;
  padding: 0 clamp(var(--space-sm), 4vw, var(--space-xl)) var(--space-2xl);
}

.landing-hero {
  padding-block: var(--space-xl) var(--space-2xl);
}

.landing-hero-copy {
  min-width: 0;
  max-width: 56rem;
}

.landing-hero h1 {
  min-width: 0;
  max-width: 18ch;
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 730;
  line-height: 1;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.landing-hero p {
  max-width: 58ch;
  margin: var(--space-md) 0 0;
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.6;
}

.landing-actions {
  margin-block-start: var(--space-md);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
}

.landing-actions a,
.landing-section-head > a,
.simple-actions a {
  min-height: var(--control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

.landing-primary {
  padding-inline: var(--space-sm);
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  text-decoration: none;
}

.landing-primary:active { color: var(--color-accent-ink); }
.landing-secondary { padding-inline: var(--space-xs); }

.landing-proof {
  min-width: 0;
  margin: 0;
  padding-block: var(--space-lg);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  border-top: 1px solid var(--color-rule-2);
  border-bottom: 1px solid var(--color-rule-2);
}

.flow-panel { min-width: 0; }

.flow-title {
  margin: 0 0 var(--space-xs);
  color: var(--color-ink-3);
  font-size: var(--text-xs);
  font-weight: 650;
  line-height: 1.35;
}

.flow-device table {
  width: 100%;
  border-collapse: collapse;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.flow-device th,
.flow-device td {
  padding: var(--space-2xs) var(--space-xs) var(--space-2xs) 0;
  border-bottom: 1px solid var(--color-rule);
  text-align: start;
  white-space: nowrap;
}

.flow-device th {
  color: var(--color-ink-3);
  font-weight: 560;
}

.flow-device td { color: var(--color-ink); }

.flow-relay {
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
}

.flow-relay .flow-title { color: var(--color-accent-2); }

.flow-relay pre {
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--color-accent-2);
  line-height: 1.55;
}

.flow-relay pre code {
  min-width: 0;
  padding: 0;
  background: transparent;
  color: var(--color-accent-2);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.flow-connector {
  min-height: var(--control-h);
  display: grid;
  place-items: center;
  color: var(--color-ink-3);
}

.flow-connector::before { content: "↓"; }

.landing-proof figcaption {
  margin: var(--space-md) 0 0;
  padding-block-start: var(--space-sm);
  border-top: 1px solid var(--color-rule);
  color: var(--color-ink-3);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.landing-quickstart,
.landing-directory {
  min-width: 0;
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-lg);
  border-top: 1px solid var(--color-rule-2);
}

.landing-section-head {
  margin-block-end: var(--space-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
}

.landing-section-head h2,
.landing-directory > h2 {
  min-width: 0;
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.landing-section-head p {
  max-width: 48ch;
  margin: var(--space-2xs) 0 0;
  color: var(--color-ink-3);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.landing-section-head > a { justify-self: start; }

.landing-quickstart > pre {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  overflow-x: auto;
}

.directory-grid {
  margin-block-start: var(--space-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}

.directory-group { min-width: 0; }

.directory-group h3 {
  margin: 0 0 var(--space-xs);
  color: var(--color-ink);
  font-size: var(--text-base);
  font-weight: 680;
  line-height: 1.35;
}

.directory-row {
  min-width: 0;
  padding-block: var(--space-3xs);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xs);
  border-top: 1px solid var(--color-rule);
}

.directory-row a {
  min-height: var(--control-h);
  display: inline-flex;
  align-items: center;
  color: var(--color-accent-2);
  font-size: var(--text-sm);
  font-weight: 650;
  white-space: nowrap;
}

.directory-row span {
  min-width: 0;
  color: var(--color-ink-3);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.home-footer {
  width: min(100%, var(--shell-max));
  margin-inline: auto;
  padding-inline: clamp(var(--space-sm), 4vw, var(--space-xl));
}

.home-footer .footer-colophon { max-width: none; }

/* A two-entry product ledger: factual relationships, no customer-logo wall. */
.showcase-main {
  width: min(100%, var(--shell-max));
  margin-inline: auto;
  padding: 0 clamp(var(--space-sm), 4vw, var(--space-xl)) var(--space-2xl);
}

.showcase-intro {
  max-width: 58rem;
  padding-block: var(--space-xl) var(--space-2xl);
}

.showcase-intro h1 {
  min-width: 0;
  max-width: 12ch;
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 730;
  line-height: 1;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}

.showcase-intro p {
  max-width: 62ch;
  margin: var(--space-md) 0 0;
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.6;
}

.showcase-list { border-bottom: 1px solid var(--color-rule-2); }

.showcase-entry {
  min-width: 0;
  padding-block: var(--space-xl);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  border-top: 1px solid var(--color-rule-2);
}

.showcase-product,
.showcase-detail { min-width: 0; }

.showcase-product h2 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.showcase-product p {
  margin: var(--space-2xs) 0 0;
  color: var(--color-ink-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.showcase-detail > p {
  max-width: 58ch;
  margin: 0;
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.65;
}

.showcase-action {
  margin-block-start: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-lg);
}

.showcase-action > span {
  color: var(--color-ink-3);
  font-size: var(--text-xs);
  font-weight: 620;
  line-height: 1.4;
}

.showcase-action a {
  min-height: var(--control-h);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-accent-2);
  font-size: var(--text-sm);
  font-weight: 650;
  white-space: nowrap;
}

.simple-main {
  width: min(100%, var(--content-max));
  min-height: min(52rem, 65svh);
  margin-inline: auto;
  padding: var(--space-3xl) var(--space-sm);
}

.simple-main h1 {
  min-width: 0;
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2.35rem, 1.9rem + 2vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}

.simple-main p {
  max-width: 52ch;
  margin: var(--space-md) 0 0;
  color: var(--color-ink-2);
}

.simple-actions {
  margin-block-start: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Two-column reading shell. The section index stays quiet; the TOC lives in the article. */
.shell {
  width: min(100%, var(--shell-max));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.sidebar {
  position: fixed;
  inset-block: var(--topbar-h) 0;
  inset-inline-start: 0;
  z-index: var(--z-modal);
  width: min(var(--sidebar-w), calc(100% - var(--space-xl)));
  padding: var(--space-lg) var(--space-sm) max(var(--space-lg), env(safe-area-inset-bottom));
  overflow-y: auto;
  border-inline-end: 1px solid var(--color-rule);
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: var(--shadow-drawer);
  transform: translateX(-102%);
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--dur-long) var(--ease-out);
}

body.nav-open .sidebar {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.nav-group { margin: 0; }

.nav-label {
  margin: 0 0 var(--space-2xs);
  padding-inline: var(--space-2xs);
  color: var(--color-ink-3);
  font-size: var(--text-xs);
  font-weight: 650;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.nav-link,
.nav-demo,
.nav-cloud {
  min-height: 2.5rem;
  padding: 0 var(--space-2xs);
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 520;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}

.nav-link.active {
  background: var(--color-accent-soft);
  color: var(--color-accent-2);
  font-weight: 650;
}

.nav-demo {
  color: var(--color-accent-2);
  font-weight: 650;
}

.nav-cloud {
  color: var(--color-ink-2);
  font-weight: 650;
}

.nav-scrim {
  position: fixed;
  inset: var(--topbar-h) 0 0;
  z-index: calc(var(--z-modal) - 1);
  width: 100%;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--color-scrim) 58%, transparent);
  color: var(--color-paper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-short) var(--ease-out);
}

body.nav-open .nav-scrim {
  opacity: 1;
  pointer-events: auto;
}

.content {
  min-width: 0;
  padding: var(--space-xl) var(--space-sm);
}

.prose {
  min-width: 0;
  max-width: var(--content-max);
  margin-inline: auto;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  min-width: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-style: normal;
  overflow-wrap: anywhere;
}

.prose h1 {
  max-width: 18ch;
  margin: 0 0 var(--space-md);
  font-size: clamp(2.35rem, 1.9rem + 2vw, 3.6rem);
  font-weight: 730;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.prose h2 {
  margin: var(--space-2xl) 0 var(--space-sm);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.prose h3 {
  margin: var(--space-xl) 0 var(--space-xs);
  font-size: var(--text-lg);
  font-weight: 680;
  line-height: 1.28;
  letter-spacing: -0.018em;
}

.prose h4 {
  margin: var(--space-lg) 0 var(--space-2xs);
  font-size: var(--text-base);
  font-weight: 700;
}

.prose p { margin: 0 0 var(--space-sm); }
.prose p,
.prose li { color: var(--color-ink); }
.prose strong { color: var(--color-ink); font-weight: 700; }

.prose h1 + p {
  max-width: 62ch;
  margin-block-start: 0;
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.65;
}

.anchor {
  margin-inline-start: calc(-1 * var(--space-sm));
  padding-inline-end: var(--space-3xs);
  color: var(--color-accent-2);
  font-family: var(--font-mono);
  font-size: 0.7em;
  font-weight: 500;
  opacity: 0;
  text-decoration: none;
}

.anchor:focus-visible { opacity: 1; }

.article-tools {
  margin: var(--space-lg) 0 var(--space-2xl);
}

.toc {
  min-width: 0;
  padding-block: var(--space-sm);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-lg);
  border-top: 1px solid var(--color-rule-2);
  border-bottom: 1px solid var(--color-rule-2);
}

.toc-title {
  margin: 0 0 var(--space-xs);
  color: var(--color-ink-3);
  font-size: var(--text-xs);
  font-weight: 650;
}

.toc a {
  min-width: 0;
  min-height: 2.25rem;
  padding-block: var(--space-3xs);
  display: flex;
  align-items: center;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.35;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toc a.current {
  color: var(--color-accent-2);
  font-weight: 650;
}

.toc-l3 { padding-inline-start: var(--space-sm); }

.lang-tabs {
  margin: 0 0 var(--space-md);
  display: flex;
  gap: var(--space-md);
  border-bottom: 1px solid var(--color-rule);
}

.lang-tab {
  min-height: var(--control-h);
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  color: var(--color-ink-3);
  font-size: var(--text-sm);
  font-weight: 620;
  text-decoration: none;
  white-space: nowrap;
}

.lang-tab.active {
  border-bottom-color: var(--color-accent);
  color: var(--color-ink);
}

code {
  padding: 0.12em 0.32em;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--code-inline-bg);
  color: var(--code-inline-ink);
  font-family: var(--font-mono);
  font-size: 0.86em;
}

pre {
  margin: var(--space-lg) 0;
  padding: var(--space-md) 0;
  overflow-x: auto;
  border-top: 1px solid var(--code-rule);
  border-bottom: 1px solid var(--code-rule);
  background: var(--code-bg);
  color: var(--code-ink);
  box-shadow: none;
  line-height: 1.65;
}

pre code {
  display: block;
  min-width: max-content;
  padding-inline: var(--space-md);
  border: 0;
  background: transparent;
  color: var(--code-ink);
  font-size: var(--text-sm);
}

blockquote {
  margin: var(--space-lg) 0;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-rule-2);
  border-bottom: 1px solid var(--color-rule-2);
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-size: var(--text-md);
}

.prose blockquote p {
  margin: 0;
  color: inherit;
}

.prose table {
  width: 100%;
  display: block;
  margin: var(--space-lg) 0;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.prose th,
.prose td {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--color-rule);
  text-align: start;
  vertical-align: top;
}

.prose th {
  border-bottom-color: var(--color-rule-2);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 700;
}

.prose td { color: var(--color-ink-2); }

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

.prose ul,
.prose ol { padding-inline-start: var(--space-lg); }

.prose li { margin-block: var(--space-2xs); }
.prose li::marker { color: var(--color-accent-2); }

.page-nav {
  margin-block-start: var(--space-xl);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-lg);
  border-top: 1px solid var(--color-rule-2);
}

.page-nav-link {
  min-height: 4.5rem;
  padding: var(--space-sm) 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-3xs);
  color: var(--color-ink);
  text-decoration: none;
}

.page-nav-link.next {
  align-items: flex-end;
  text-align: end;
}

.page-nav-direction {
  color: var(--color-ink-3);
  font-size: var(--text-xs);
  font-weight: 540;
  line-height: 1.3;
}

.page-nav-title {
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 680;
  line-height: 1.35;
}

.site-footer {
  grid-column: 1 / -1;
  padding: 0 var(--space-sm) max(var(--space-xl), env(safe-area-inset-bottom));
}

.footer-colophon {
  max-width: var(--content-max);
  margin: 0 auto;
}

.footer-statement {
  max-width: 58ch;
  margin: 0;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.footer-statement strong { color: var(--color-ink); }

.footer-meta {
  margin-block-start: var(--space-3xs);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0 var(--space-md);
  color: var(--color-ink-3);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.footer-links a {
  min-height: 1.5rem;
  display: inline-flex;
  align-items: center;
  color: var(--color-ink-2);
  white-space: nowrap;
}

.nav-link[aria-disabled="true"],
.nav-demo[aria-disabled="true"],
.lang-tab[aria-disabled="true"],
.page-nav-link[aria-disabled="true"],
.footer-links a[aria-disabled="true"],
.topbar-links a[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

@media (min-width: 40rem) {
  .topbar-links a { display: inline-flex; }
  .nav-cloud { display: none; }

  .landing-hero-copy {
    margin-inline: auto;
    text-align: center;
  }

  .landing-hero h1,
  .landing-hero p {
    margin-inline: auto;
  }

  .landing-actions {
    width: min(100%, 32rem);
    margin-inline: auto;
    justify-content: center;
  }

  .landing-section-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .landing-section-head > a { justify-self: end; }

  .showcase-entry {
    grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(var(--space-xl), 6vw, var(--space-2xl));
  }

  .directory-row {
    grid-template-columns: minmax(8rem, 0.55fr) minmax(0, 1fr);
    gap: var(--space-md);
  }

  .toc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toc-title { grid-column: 1 / -1; }

  .page-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-nav.only-next .next { grid-column: 2; }
  .page-nav.only-previous .previous { grid-column: 1; }
}

@media (min-width: 60rem) {
  body.nav-open { overflow: auto; }
  .menu-toggle { display: none; }

  .landing-proof {
    grid-template-columns:
      minmax(0, 1fr) var(--control-h)
      minmax(17rem, 0.92fr) var(--control-h)
      minmax(0, 1fr);
    column-gap: var(--space-sm);
  }

  .flow-connector::before { content: "→"; }
  .landing-proof figcaption { grid-column: 1 / -1; }

  .directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(var(--space-xl), 5vw, var(--space-2xl));
  }

  .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }

  .sidebar {
    position: relative;
    inset: auto;
    z-index: var(--z-base);
    width: auto;
    padding: var(--space-2xl) var(--space-sm) var(--space-3xl);
    overflow: visible;
    border-inline-end: 0;
    box-shadow: none;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }

  .nav {
    position: sticky;
    inset-block-start: calc(var(--topbar-h) + var(--space-xl));
  }

  .nav-scrim { display: none; }

  .content {
    padding: var(--space-2xl) clamp(var(--space-xl), 6vw, var(--space-3xl)) var(--space-xl);
  }

  .page-nav { margin-block-start: var(--space-2xl); }

  .site-footer {
    grid-column: 2;
    padding-inline: clamp(var(--space-xl), 6vw, var(--space-3xl));
  }

  .home-footer {
    grid-column: auto;
    padding-inline: clamp(var(--space-sm), 4vw, var(--space-xl));
  }
}

@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-color: currentColor; }

  .brand:hover { color: var(--color-accent-2); text-decoration: none; }

  .topbar-links a:hover,
  .theme-toggle:hover,
  .menu-toggle:hover {
    background: var(--color-paper-2);
    color: var(--color-ink);
  }

  .landing-primary:hover {
    background: color-mix(in srgb, var(--color-accent) 88%, var(--color-ink));
    color: var(--color-accent-ink);
    text-decoration: none;
  }

  .directory-row:has(a:hover) > span { color: var(--color-ink-2); }

  .nav-link:hover,
  .nav-demo:hover,
  .nav-cloud:hover {
    background: var(--color-paper-2);
    color: var(--color-ink);
    text-decoration: none;
  }

  .toc a:hover,
  .lang-tab:hover { color: var(--color-accent-2); }

  .page-nav-link:hover .page-nav-title { color: var(--color-accent-2); }

  .prose h2:hover .anchor,
  .prose h3:hover .anchor { opacity: 1; }
}

@media (pointer: coarse) {
  .nav-link,
  .nav-demo,
  .nav-cloud,
  .toc a,
  .directory-row a,
  .footer-links a { min-height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

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