/* Generated by tools/build_presets.py from api/app/design/*.json -- edit the data, not this file. */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/source-serif-4/source-serif-4-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/source-serif-4/source-serif-4-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-sans/ibm-plex-sans-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-sans/ibm-plex-sans-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-sans/ibm-plex-sans-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono/ibm-plex-mono-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono/ibm-plex-mono-latin-600.woff2") format("woff2");
}
:root {
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 40px;
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --border-w: 1px;
  --focus-w: 2px;
  --content-max: 1000px;
  --tap: 44px;
  --control-h: 32px;
  --thumb-ratio: 4 / 3;
  --font-display: "Source Serif 4", Georgia, serif;
  --font-ui: "IBM Plex Sans", system-ui, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --stripe-h: 0px;
  --stripe-image: none;
  --flash: none;
  --flash-w: 0px;
  --flash-inset: 0px;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #f0f1f3;
  --surface-hover: #e3e5e9;
  --band: #e6e8eb;
  --band-text: #1a1c20;
  --band-muted: #4f5866;
  --text: #1a1c20;
  --text-muted: #5b6472;
  --line: #e3e6eb;
  --line-strong: #868e9c;
  --accent: #3538a8;
  --accent-fill: #3538a8;
  --on-accent: #ffffff;
  --accent-track: #dcddf3;
  --focus: #3538a8;
  --danger: #a34a00;
  --danger-line: #b86a2c;
  --danger-wash: #f8eadd;
  --warning: #7a5200;
  --warning-wash: #fbf0d5;
  --success: #166534;
  --success-wash: #e3f3e8;
  --scrim: #000000d8;
  --on-scrim: #ffffff;
  --on-scrim-muted: #c4c4c8;
  --on-scrim-danger: #ffb37a;
  --stripe-1: #e3e6eb;
  --stripe-2: #e3e6eb;
  --stripe-3: #e3e6eb;
  --stripe-4: #e3e6eb;
  --stripe-5: #e3e6eb;
  --shadow-pop: 0 10px 30px #00000026;
}
:root[data-theme="dark"] {
  --surface: #15171c;
  --surface-raised: #1b1e24;
  --surface-sunken: #292b30;
  --surface-hover: #33363c;
  --band: #383a3e;
  --band-text: #e6e8ec;
  --band-muted: #b4bcc8;
  --text: #e6e8ec;
  --text-muted: #9aa4b2;
  --line: #2b303b;
  --line-strong: #6b7485;
  --accent: #a9b1ff;
  --accent-fill: #a9b1ff;
  --on-accent: #14152e;
  --accent-track: #26284a;
  --focus: #a9b1ff;
  --danger: #ffb37a;
  --danger-line: #a8703f;
  --danger-wash: #3a2a1c;
  --warning: #f2cc6b;
  --warning-wash: #332b14;
  --success: #7dd69b;
  --success-wash: #1a2e22;
  --scrim: #000000d8;
  --on-scrim: #ffffff;
  --on-scrim-muted: #c4c4c8;
  --on-scrim-danger: #ffb37a;
  --stripe-1: #2b303b;
  --stripe-2: #2b303b;
  --stripe-3: #2b303b;
  --stripe-4: #2b303b;
  --stripe-5: #2b303b;
  --shadow-pop: 0 10px 30px #00000080;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --surface: #15171c;
    --surface-raised: #1b1e24;
    --surface-sunken: #292b30;
    --surface-hover: #33363c;
    --band: #383a3e;
    --band-text: #e6e8ec;
    --band-muted: #b4bcc8;
    --text: #e6e8ec;
    --text-muted: #9aa4b2;
    --line: #2b303b;
    --line-strong: #6b7485;
    --accent: #a9b1ff;
    --accent-fill: #a9b1ff;
    --on-accent: #14152e;
    --accent-track: #26284a;
    --focus: #a9b1ff;
    --danger: #ffb37a;
    --danger-line: #a8703f;
    --danger-wash: #3a2a1c;
    --warning: #f2cc6b;
    --warning-wash: #332b14;
    --success: #7dd69b;
    --success-wash: #1a2e22;
    --scrim: #000000d8;
    --on-scrim: #ffffff;
    --on-scrim-muted: #c4c4c8;
    --on-scrim-danger: #ffb37a;
    --stripe-1: #2b303b;
    --stripe-2: #2b303b;
    --stripe-3: #2b303b;
    --stripe-4: #2b303b;
    --stripe-5: #2b303b;
    --shadow-pop: 0 10px 30px #00000080;
  }
}
/* The preset picker's faces: each half in the colours of the preset it offers. */
.mini [data-preset="default"][data-theme="light"] {
  --surface: #ffffff;
  --band: #e6e8eb;
  --text: #1a1c20;
  --text-muted: #5b6472;
  --accent-fill: #3538a8;
  --radius-xs: 3px;
}
.mini [data-preset="default"][data-theme="dark"] {
  --surface: #15171c;
  --band: #383a3e;
  --text: #e6e8ec;
  --text-muted: #9aa4b2;
  --accent-fill: #a9b1ff;
  --radius-xs: 3px;
}
.mini [data-preset="breadbin"][data-theme="light"] {
  --surface: #e9e1cf;
  --band: #4a3f2f;
  --text: #2a2418;
  --text-muted: #5c5340;
  --accent-fill: #40318d;
  --radius-xs: 0px;
}
.mini [data-preset="breadbin"][data-theme="dark"] {
  --surface: #1f1a4d;
  --band: #9d92e3;
  --text: #dedaff;
  --text-muted: #b3abf0;
  --accent-fill: #a5e6ee;
  --radius-xs: 0px;
}
.mini [data-preset="rubberkey"][data-theme="light"] {
  --surface: #d8d8d8;
  --band: #000000;
  --text: #0a0a0a;
  --text-muted: #505050;
  --accent-fill: #0000cd;
  --radius-xs: 1px;
}
.mini [data-preset="rubberkey"][data-theme="dark"] {
  --surface: #0c0c0e;
  --band: #26272b;
  --text: #ededf0;
  --text-muted: #a3a5ad;
  --accent-fill: #5ad1e6;
  --radius-xs: 1px;
}
.mini [data-preset="phosphor"][data-theme="light"] {
  --surface: #f7f9f3;
  --band: #d3e8d2;
  --text: #14251a;
  --text-muted: #4a6152;
  --accent-fill: #0b6b3a;
  --radius-xs: 0px;
}
.mini [data-preset="phosphor"][data-theme="dark"] {
  --surface: #07110a;
  --band: #1a3a26;
  --text: #9df2b1;
  --text-muted: #6cc485;
  --accent-fill: #ffc04d;
  --radius-xs: 0px;
}
.mini [data-preset="amber"][data-theme="light"] {
  --surface: #f6efe0;
  --band: #3a2410;
  --text: #2a1a08;
  --text-muted: #6b5535;
  --accent-fill: #8a4b00;
  --radius-xs: 1px;
}
.mini [data-preset="amber"][data-theme="dark"] {
  --surface: #1a0e04;
  --band: #4a2c10;
  --text: #ffb84d;
  --text-muted: #d0913f;
  --accent-fill: #ffb000;
  --radius-xs: 1px;
}
.mini [data-preset="bigbox"][data-theme="light"] {
  --surface: #e8e4d6;
  --band: #cec8b6;
  --text: #23221e;
  --text-muted: #57524a;
  --accent-fill: #0a5f66;
  --radius-xs: 1px;
}
.mini [data-preset="bigbox"][data-theme="dark"] {
  --surface: #1b1a17;
  --band: #45423a;
  --text: #e8e4d8;
  --text-muted: #a8a393;
  --accent-fill: #5fd38a;
  --radius-xs: 1px;
}
.mini [data-preset="ninetyfive"][data-theme="light"] {
  --surface: #c0c0c0;
  --band: #000080;
  --text: #0a0a0a;
  --text-muted: #404040;
  --accent-fill: #000080;
  --radius-xs: 0px;
}
.mini [data-preset="ninetyfive"][data-theme="dark"] {
  --surface: #2a2a2a;
  --band: #15158f;
  --text: #ececec;
  --text-muted: #ababab;
  --accent-fill: #a9b8ff;
  --radius-xs: 0px;
}