/* Some pages in this repository were generated as claude.ai widgets and expect the chat
   host to supply these design tokens and base styles. Pages load this first, so anything a page
   defines itself still wins. */
:root {
  color-scheme: light dark;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --color-text-primary: #1f1e1d;
  --color-text-secondary: #5e5d59;
  --color-text-tertiary: #87867f;
  --color-text-info: #1d5fb8;
  --color-text-success: #2f6b2f;
  --color-text-warning: #8a5a00;
  --color-text-danger: #b3261e;
  --color-background-primary: #ffffff;
  --color-background-secondary: #f5f4ef;
  --color-background-tertiary: #ecebe5;
  --color-background-info: #e8f0fb;
  --color-background-success: #e9f4e9;
  --color-background-warning: #fbf1dc;
  --color-background-danger: #fbe9e7;
  --color-border-primary: rgba(31, 30, 29, .4);
  --color-border-secondary: rgba(31, 30, 29, .25);
  --color-border-tertiary: rgba(31, 30, 29, .14);
  --color-border-info: #9bbce8;
  --color-border-warning: #e5c07b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-text-primary: #f5f4ef;
    --color-text-secondary: #c2c0b6;
    --color-text-tertiary: #9a9893;
    --color-text-info: #8ab8f2;
    --color-text-success: #96d096;
    --color-text-warning: #e8b45a;
    --color-text-danger: #f2a09a;
    --color-background-primary: #262624;
    --color-background-secondary: #1f1e1d;
    --color-background-tertiary: #30302e;
    --color-background-info: #1c2a3d;
    --color-background-success: #1e2e1e;
    --color-background-warning: #3a2e16;
    --color-background-danger: #3d1f1c;
    --color-border-primary: rgba(245, 244, 239, .4);
    --color-border-secondary: rgba(245, 244, 239, .25);
    --color-border-tertiary: rgba(245, 244, 239, .14);
    --color-border-info: #3b5f8f;
    --color-border-warning: #7a5c1e;
  }
}
body { margin: 0; padding: 16px; font-family: var(--font-sans); color: var(--color-text-primary); background: var(--color-background-primary); line-height: 1.5; }
code, pre, kbd { font-family: var(--font-mono); }
button { font: inherit; font-size: 13px; color: var(--color-text-primary); background: var(--color-background-secondary); border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-md); padding: 6px 12px; cursor: pointer; }
button:hover { border-color: var(--color-border-primary); }
input[type="range"], input[type="checkbox"] { accent-color: #1d5fb8; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }