:root { color-scheme: light dark; font: 16px/1.65 system-ui, sans-serif; }
body { max-width: 960px; margin: 0 auto; padding: 24px; background: light-dark(#fafafa, #151515); color: light-dark(#171717, #eee); }
a { color: light-dark(#684000, #f5c769); }
nav { display: flex; flex-wrap: wrap; gap: 12px; }
h1 { line-height: 1.2; }
.notice { border-inline-start: 4px solid #be913d; padding: 12px; }
.reaction { border-bottom: 1px solid #8886; padding: 8px 0; overflow-wrap: anywhere; }
.color { display: inline-flex; align-items: center; gap: 6px; }
.color i { width: 18px; height: 18px; border: 1px solid #888; border-radius: 50%; }
figure { display: inline-block; margin: 12px; max-width: calc(100% - 24px); }
img { max-width: 100%; height: auto; object-fit: contain; }
figcaption { max-width: 480px; }
ul { padding-inline-start: 24px; }
section { margin-block: 32px; }
@media (prefers-color-scheme: dark) { body { background: #151515; color: #eee; } a { color: #f5c769; } }

.reaction-gradient { display: block; width: min(100%, 180px); height: 24px; border: 1px solid #888; border-radius: 6px; margin-block: 8px; }
.reaction-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 8px; }
.reaction-swatch { width: 18px; height: 18px; border: 1px solid #888; border-radius: 50%; }