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

:root {
  --paper: oklch(0.975 0.012 100);
  --card: oklch(0.99 0.008 100);

  --ink: oklch(0.30 0.025 170);
  --ink-soft: oklch(0.45 0.022 175);
  --ink-mute: oklch(0.60 0.018 180);
  --ink-faint: oklch(0.75 0.015 180);

  --line: oklch(0.88 0.015 150);
  --line-soft: oklch(0.93 0.012 150);

  --sage: oklch(0.78 0.06 150);
  --sage-deep: oklch(0.62 0.08 155);
  --sage-wash: oklch(0.94 0.035 150);
  --mist: oklch(0.80 0.045 210);
  --mist-deep: oklch(0.60 0.065 215);
  --mist-wash: oklch(0.94 0.028 215);
  --bloom: oklch(0.82 0.055 10);
  --bloom-deep: oklch(0.66 0.08 10);
  --bloom-wash: oklch(0.95 0.022 10);
  --sun: oklch(0.88 0.08 95);
  --sun-wash: oklch(0.96 0.035 95);

  --wait: oklch(0.58 0.10 80);
  --alert: oklch(0.68 0.10 25);

  --font-display: "Newsreader", Georgia, serif;
  --font-ui: "Inter Tight", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;

  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-base: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;

  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
}

html[data-palette="cherry"] {
  --paper: oklch(0.975 0.012 20);
  --card: oklch(0.99 0.008 20);
  --sage: oklch(0.80 0.06 155);
  --sage-deep: oklch(0.62 0.08 155);
  --sage-wash: oklch(0.95 0.030 155);
  --mist: oklch(0.82 0.055 220);
  --mist-deep: oklch(0.60 0.08 225);
  --mist-wash: oklch(0.94 0.025 220);
  --bloom: oklch(0.80 0.10 0);
  --bloom-deep: oklch(0.62 0.13 0);
  --bloom-wash: oklch(0.94 0.035 10);
  --ink: oklch(0.32 0.03 10);
  --ink-soft: oklch(0.48 0.028 15);
  --ink-mute: oklch(0.62 0.022 15);
}

html[data-serif="off"] .panel-title,
html[data-serif="off"] .display,
html[data-serif="off"] .brand-wordmark {
  font-family: var(--font-ui);
  font-style: normal;
}

html {
  font-size: 15px;
}

body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.005em;
  background-image:
    radial-gradient(1200px 600px at 85% -10%, var(--mist-wash) 0%, transparent 60%),
    radial-gradient(900px 500px at -5% 15%, var(--sage-wash) 0%, transparent 55%),
    radial-gradient(700px 400px at 50% 110%, var(--bloom-wash) 0%, transparent 60%);
  background-attachment: fixed;
}

#root {
  min-height: 100vh;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease,
    opacity 200ms ease;
  white-space: nowrap;
  text-decoration: none;
}

.btn:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--sage-deep) 50%, transparent);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-accent {
  background: var(--sage-deep);
  color: var(--card);
}

.btn-accent:hover:not(:disabled) {
  background: color-mix(in oklch, var(--sage-deep) 85%, var(--ink));
}

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
}

.btn-ghost:hover:not(:disabled) {
  color: var(--ink);
  border-color: var(--ink-faint);
}

.btn-lg {
  padding: var(--space-md) var(--space-2xl);
  font-size: var(--text-base);
}

.meta-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.inline-code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink);
  background: var(--sage-wash);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3xl);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.02),
    0 8px 24px -12px rgba(0, 0, 0, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}