/* Mirrors the.webapp.agency tokens, so the widget looks here as it does there. Theme: OS setting, or ?theme=light|dark. */
:root { color-scheme: light dark; --accent: #7852ee; --ground: #ebebeb; --card: #fcfcfc; --line: #d4d4d4; --text: #222; --heading: #111; --muted: #5a5a5a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { --ground: #121212; --card: #1e1e1e; --line: #363636; --text: #dadada; --heading: #f5f5f5; --muted: #9a9a9a; }
}
:root[data-theme='dark'] { color-scheme: dark; --ground: #121212; --card: #1e1e1e; --line: #363636; --text: #dadada; --heading: #f5f5f5; --muted: #9a9a9a; }
:root[data-theme='light'] { color-scheme: light; }
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; background: var(--ground); color: var(--text); }
main { max-width: 1040px; margin: 0 auto; padding: 24px 16px; }
h1 { margin: 0 0 4px; color: var(--heading); }
header p { color: var(--muted); margin: 0 0 16px; }
a { color: var(--accent); }
@media print { :root { color-scheme: light; --ground: #fff; --card: #fff; --line: #ccc; --text: #222; --heading: #111; --muted: #5a5a5a; } .noprint { display: none; } main { padding: 0; } }