/* Gruvbox, light and dark, matching nathanspelts.com. The OS picks the theme unless data-theme on overrides it (the site's page sets it to follow its own toggle). */ :root { --bg: #fbf1c7; --bg-soft: #f2e5bc; --fg: #3c3836; --fg-soft: #504945; --muted: #7c6f64; --faint: #d5c4a1; --accent: #af3a03; --mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #1d2021; --bg-soft: #282828; --fg: #ebdbb2; --fg-soft: #d5c4a1; --muted: #a89984; --faint: #3c3836; --accent: #fe8019; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #1d2021; --bg-soft: #282828; --fg: #ebdbb2; --fg-soft: #d5c4a1; --muted: #a89984; --faint: #3c3836; --accent: #fe8019; color-scheme: dark; } body { margin: 0; padding: 0.75rem; background: var(--bg-soft); color: var(--fg); font-family: var(--mono); font-size: 0.78rem; line-height: 1.5; } .toolbar { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.75rem; } button { padding: 0.25rem 0.6rem; border: 1px solid var(--faint); border-radius: 4px; background: var(--bg); color: var(--fg-soft); font: inherit; cursor: pointer; } button:hover { border-color: var(--accent); color: var(--accent); } button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } canvas { display: block; border-radius: 4px; background: #1d2021; touch-action: none; } .status { margin: 0.6rem 0 0; color: var(--muted); }