@layer base {
  *, :before, :after, ::backdrop, ::file-selector-button {
    margin: 0;
    padding: 0;
    border: 0 solid;
  }

  html {
    tab-size: 4;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  a {
    text-decoration: inherit;
  }

  ol, ul, menu {
    list-style: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }
}

*, :before, :after {
  box-sizing: border-box;
}

:root {
  color-scheme: light;
  --zfb-hsp-xs: .25rem;
  --zfb-hsp-sm: .5rem;
  --zfb-hsp-md: 1rem;
  --zfb-hsp-lg: 1.5rem;
  --zfb-hsp-xl: 2rem;
  --zfb-vsp-2xs: .25rem;
  --zfb-vsp-xs: .5rem;
  --zfb-vsp-sm: .75rem;
  --zfb-vsp-md: 1rem;
  --zfb-vsp-lg: 1.75rem;
  --zfb-vsp-xl: 2.5rem;
  --zfb-vsp-2xl: 3.5rem;
  --zfb-scale-xs: .75rem;
  --zfb-scale-sm: .875rem;
  --zfb-scale-base: 1rem;
  --zfb-scale-md: 1.125rem;
  --zfb-scale-lg: 1.25rem;
  --zfb-scale-xl: 1.75rem;
  --zfb-scale-2xl: 2.5rem;
  --zfb-text-page-title: var(--zfb-scale-xl);
  --zfb-text-section-title: var(--zfb-scale-lg);
  --zfb-text-subsection-title: var(--zfb-scale-md);
  --zfb-text-body: var(--zfb-scale-base);
  --zfb-text-helper: var(--zfb-scale-sm);
  --zfb-text-annotation: var(--zfb-scale-xs);
  --zfb-leading-tight: 1.2;
  --zfb-leading-body: 1.6;
  --zfb-leading-relaxed: 1.8;
  --zfb-weight-body: 400;
  --zfb-weight-heading: 700;
  --zfb-font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --zfb-font-mono: ui-monospace, "Cascadia Code", Menlo, monospace;
  --zfb-radius-sm: .25rem;
  --zfb-radius-md: .5rem;
  --zfb-radius-lg: 1rem;
  --zfb-transition-fast: .12s;
  --zfb-transition-normal: .22s;
  --zfb-easing-standard: cubic-bezier(.2, 0, 0, 1);
  --zfb-easing-linear: linear;
  --zfb-palette-base-0: oklch(98.5% .003 264);
  --zfb-palette-base-1: oklch(95% .004 264);
  --zfb-palette-base-2: oklch(88% .006 264);
  --zfb-palette-base-3: oklch(62% .01 264);
  --zfb-palette-base-4: oklch(38% .012 264);
  --zfb-palette-base-5: oklch(22% .014 264);
  --zfb-palette-base-6: oklch(13% .012 264);
  --zfb-palette-brand-0: oklch(95% .03 250);
  --zfb-palette-brand-1: oklch(80% .1 250);
  --zfb-palette-brand-2: oklch(58% .19 250);
  --zfb-palette-brand-3: oklch(45% .16 250);
  --zfb-palette-brand-4: oklch(32% .11 250);
  --zfb-palette-accent-0: oklch(95% .035 50);
  --zfb-palette-accent-1: oklch(78% .12 50);
  --zfb-palette-accent-2: oklch(62% .15 50);
  --zfb-palette-accent-3: oklch(45% .12 50);
  --zfb-palette-state-0: oklch(64% .15 150);
  --zfb-palette-state-1: oklch(62% .19 25);
  --zfb-palette-state-2: oklch(76% .14 82);
  --zfb-palette-state-3: oklch(64% .14 245);
  --zfb-bg: light-dark(var(--zfb-palette-base-0), var(--zfb-palette-base-6));
  --zfb-fg: light-dark(var(--zfb-palette-base-6), var(--zfb-palette-base-0));
  --zfb-color-surface: light-dark(var(--zfb-palette-base-1), var(--zfb-palette-base-5));
  --zfb-color-border: light-dark(var(--zfb-palette-base-2), var(--zfb-palette-base-4));
  --zfb-color-muted: light-dark(var(--zfb-palette-base-4), var(--zfb-palette-base-2));
  --zfb-color-code-bg: light-dark(var(--zfb-palette-base-6), var(--zfb-palette-base-1));
  --zfb-color-code-fg: light-dark(var(--zfb-palette-base-0), var(--zfb-palette-base-6));
  --zfb-color-primary: light-dark(var(--zfb-palette-brand-3), var(--zfb-palette-brand-1));
  --zfb-color-primary-hover: light-dark(var(--zfb-palette-brand-4), var(--zfb-palette-brand-0));
  --zfb-color-primary-subtle: light-dark(var(--zfb-palette-brand-0), var(--zfb-palette-brand-4));
  --zfb-color-accent: light-dark(var(--zfb-palette-accent-3), var(--zfb-palette-accent-1));
  --zfb-color-success: var(--zfb-palette-state-0);
  --zfb-color-danger: var(--zfb-palette-state-1);
  --zfb-color-warning: var(--zfb-palette-state-2);
  --zfb-color-info: var(--zfb-palette-state-3);
}

:root[data-theme="light"] {
  color-scheme: light !important;
}

:root[data-theme="dark"] {
  color-scheme: dark !important;
}

html {
  background: var(--zfb-bg);
  color: var(--zfb-fg);
  font-family: var(--zfb-font-sans);
  font-size: var(--zfb-text-body);
  line-height: var(--zfb-leading-body);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--zfb-bg);
}

button, input, select, textarea {
  color: inherit;
  font: inherit;
}

a {
  color: var(--zfb-color-primary);
}

a:hover {
  color: var(--zfb-color-primary-hover);
}

code, pre {
  font-family: var(--zfb-font-mono);
}

.zfb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zfb-hsp-md);
  min-height: calc(var(--zfb-vsp-xl) + var(--zfb-vsp-md));
  padding: var(--zfb-vsp-sm) var(--zfb-hsp-xl);
  background: var(--zfb-color-surface);
  border-bottom: 1px solid var(--zfb-color-border);
}

.zfb-brand {
  color: var(--zfb-fg);
  font-size: var(--zfb-text-section-title);
  font-weight: var(--zfb-weight-heading);
  text-decoration: none;
}

.zfb-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--zfb-hsp-sm);
}

.zfb-layout {
  display: grid;
  grid-template-columns: minmax(calc(var(--zfb-hsp-xl) * 6), calc(var(--zfb-hsp-xl) * 8)) minmax(0, 1fr);
  min-height: calc(100vh - var(--zfb-vsp-2xl));
}

.zfb-nav {
  display: flex;
  flex-direction: column;
  gap: var(--zfb-vsp-xs);
  padding: var(--zfb-vsp-lg) var(--zfb-hsp-md);
  background: var(--zfb-color-surface);
  border-right: 1px solid var(--zfb-color-border);
}

.zfb-nav__link {
  padding: var(--zfb-vsp-xs) var(--zfb-hsp-sm);
  color: var(--zfb-color-muted);
  border-radius: var(--zfb-radius-md);
  text-decoration: none;
  transition: color var(--zfb-transition-fast) var(--zfb-easing-standard), background var(--zfb-transition-fast) var(--zfb-easing-standard);
}

.zfb-nav__link:hover, .zfb-nav__link.is-active {
  color: var(--zfb-fg);
  background: var(--zfb-color-primary-subtle);
}

.zfb-nav__manifest {
  display: flex;
  flex-direction: column;
  gap: var(--zfb-vsp-xs);
  margin-top: var(--zfb-vsp-md);
  padding-top: var(--zfb-vsp-md);
  border-top: 1px solid var(--zfb-color-border);
}

.zfb-nav__note {
  margin: 0;
  padding-inline: var(--zfb-hsp-sm);
  color: var(--zfb-color-muted);
  font-size: var(--zfb-text-annotation);
  line-height: var(--zfb-leading-body);
}

.zfb-main {
  min-width: 0;
  padding: var(--zfb-vsp-xl) var(--zfb-hsp-xl);
}

.zfb-stack {
  display: flex;
  flex-direction: column;
  gap: var(--zfb-vsp-xl);
  max-width: calc(var(--zfb-hsp-xl) * 34);
  margin-inline: auto;
}

.zfb-hero, .zfb-card {
  padding: var(--zfb-vsp-lg) var(--zfb-hsp-lg);
  background: var(--zfb-color-surface);
  border: 1px solid var(--zfb-color-border);
  border-radius: var(--zfb-radius-lg);
}

.zfb-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zfb-hsp-lg);
}

.zfb-page-title, .zfb-section-title, .zfb-eyebrow, .zfb-lede, .zfb-card p {
  margin-block: 0;
}

.zfb-page-title {
  margin-top: var(--zfb-vsp-sm);
  font-size: var(--zfb-text-page-title);
  line-height: var(--zfb-leading-tight);
  font-weight: var(--zfb-weight-heading);
}

.zfb-section-title {
  margin-top: var(--zfb-vsp-xs);
  font-size: var(--zfb-text-section-title);
  line-height: var(--zfb-leading-tight);
  font-weight: var(--zfb-weight-heading);
}

.zfb-lede, .zfb-section-title + p, .zfb-card p + p {
  margin-top: var(--zfb-vsp-md);
}

.zfb-eyebrow, .zfb-meta {
  color: var(--zfb-color-muted);
  font-size: var(--zfb-text-annotation);
  font-weight: var(--zfb-weight-heading);
}

.zfb-button {
  padding: var(--zfb-vsp-xs) var(--zfb-hsp-md);
  color: var(--zfb-bg);
  background: var(--zfb-color-primary);
  border: 1px solid var(--zfb-color-primary);
  border-radius: var(--zfb-radius-md);
  cursor: pointer;
  transition: transform var(--zfb-transition-fast) var(--zfb-easing-standard);
}

.zfb-button:hover {
  color: var(--zfb-bg);
  background: var(--zfb-color-primary-hover);
  border-color: var(--zfb-color-primary-hover);
  transform: translateY(calc(var(--zfb-vsp-2xs) * -.5));
}

.zfb-button--quiet {
  color: var(--zfb-fg);
  background: var(--zfb-color-surface);
  border-color: var(--zfb-color-border);
}

.zfb-button--quiet:hover {
  color: var(--zfb-fg);
  background: var(--zfb-color-primary-subtle);
  border-color: var(--zfb-color-border);
}

.zfb-palette {
  display: grid;
  gap: var(--zfb-vsp-lg);
  margin-top: var(--zfb-vsp-lg);
  overflow-x: auto;
}

.zfb-palette__row {
  display: grid;
  grid-template-columns: 5rem minmax(28rem, 1fr);
  align-items: start;
  gap: var(--zfb-hsp-md);
}

.zfb-palette__label {
  margin: 0;
  font-size: var(--zfb-text-helper);
  font-weight: var(--zfb-weight-heading);
}

.zfb-swatches {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--zfb-hsp-sm);
}

.zfb-swatch {
  display: grid;
  gap: var(--zfb-vsp-2xs);
  color: var(--zfb-fg);
  font-size: var(--zfb-text-annotation);
  text-align: center;
}

.zfb-swatch__chip {
  display: block;
  aspect-ratio: 1;
  background: var(--swatch-color);
  border: 1px solid var(--zfb-color-border);
  border-radius: var(--zfb-radius-md);
}

.zfb-prose {
  max-width: calc(var(--zfb-hsp-xl) * 25);
  margin-inline: auto;
  color: var(--zfb-fg);
  font-size: var(--zfb-text-body);
  line-height: var(--zfb-leading-relaxed);
}

.zfb-prose > * + * {
  margin-block-start: var(--zfb-vsp-md);
}

.zfb-prose :where(h1, h2, h3) {
  color: var(--zfb-color-primary);
  line-height: var(--zfb-leading-tight);
  font-weight: var(--zfb-weight-heading);
}

.zfb-prose :where(h1) {
  font-size: var(--zfb-text-page-title);
}

.zfb-prose :where(h2) {
  margin-top: var(--zfb-vsp-xl);
  font-size: var(--zfb-text-section-title);
}

.zfb-prose :where(h3) {
  margin-top: var(--zfb-vsp-lg);
  font-size: var(--zfb-text-subsection-title);
}

.zfb-prose :where(a) {
  color: var(--zfb-color-primary);
}

.zfb-prose :where(a:hover) {
  color: var(--zfb-color-primary-hover);
}

.zfb-prose :where(blockquote) {
  margin-inline: 0;
  padding-left: var(--zfb-hsp-md);
  color: var(--zfb-color-muted);
  border-left: var(--zfb-hsp-xs) solid var(--zfb-color-accent);
}

.zfb-prose :where(pre) {
  overflow-x: auto;
  padding: var(--zfb-vsp-sm) var(--zfb-hsp-md);
  color: var(--zfb-color-code-fg);
  background: var(--zfb-color-code-bg);
  border-radius: var(--zfb-radius-md);
}

@media (width <= 48rem) {
  .zfb-topbar, .zfb-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .zfb-layout, .zfb-grid {
    grid-template-columns: 1fr;
  }

  .zfb-nav {
    border-right: 0;
    border-bottom: 1px solid var(--zfb-color-border);
  }
}