@font-face {
  font-family: Cursor Gothic;
  src: url("assets/cursor-gothic.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Berkeley Mono;
  src: url("assets/berkeley-mono.woff2") format("woff2");
  font-display: swap;
}

/* Shared by the landing page and the product recreation. */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --page: #f7f7f4;
  --surface: #f2f1ed;
  --surface-raised: #eeede8;
  --surface-hover: #e9e8e2;
  --surface-selected: #e4e3dc;
  --ink: #26251e;
  --ink-secondary: #625f55;
  --ink-muted: #767267;
  --ink-faint: #898579;
  --border: #deddd6;
  --border-strong: #cccac0;
  --orange: #bd3d00;
  --positive: #28704e;
  --negative: #b33d50;
  --syntax-command: #94602c;
  --syntax-string: #8b4b83;
  --shadow: 0 16px 48px #26251e18;
  --preview-shadow: 0 24px 60px #26251e30;
  --bg-desktop: var(--surface-raised);
  --bg-sidebar: var(--surface);
  --bg-main: var(--page);
  --bg-bubble: var(--surface);
  --bg-hover: var(--surface-hover);
  --bg-selected: var(--surface-selected);
  --bg-chip: var(--surface-raised);
  --bg-plus: var(--surface-raised);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --text: var(--ink);
  --text-dim: var(--ink-secondary);
  --text-muted: var(--ink-muted);
  --text-faint: var(--ink-faint);
  --green: var(--positive);
  --red: var(--negative);
  --accent: var(--ink-secondary);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #14120b;
  --surface: #1b1913;
  --surface-raised: #201e18;
  --surface-hover: #26241e;
  --surface-selected: #302d26;
  --ink: #edecec;
  --ink-secondary: #b2afa5;
  --ink-muted: #a19d91;
  --ink-faint: #8c887c;
  --border: #302d25;
  --border-strong: #464238;
  --orange: #ff773d;
  --positive: #83c198;
  --negative: #e78a92;
  --syntax-command: #d4a574;
  --syntax-string: #d4a0d4;
  --shadow: 0 16px 48px #0005;
  --preview-shadow: 0 24px 60px #0006;
}
.theme-control {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 24px;
}
.theme-control button, .theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 29px;
  height: 27px;
  padding: 5px;
  border-radius: 50%;
  color: var(--ink-muted);
}
.theme-control button[aria-pressed="true"] {
  background: var(--surface-selected);
  color: var(--ink);
}
.theme-control svg, .theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle:hover { background: var(--surface-hover); color: var(--ink); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }