:root {
  color-scheme: dark light;
}
body { font-family: 'Segoe UI', Arial, sans-serif; background: #181818; color: #f0f0f0; margin: 0; }
.container { max-width: 1100px; margin: 32px auto; background: #232323; border-radius: 12px; box-shadow: 0 2px 16px #0008; padding: 32px; }
h1, h2, h3 { color: #ffe066; margin-top: 0; }
.intro p { font-size: 1.15em; color: #e0e0e0; }
.abbr-table { width: 100%; border-collapse: collapse; margin-bottom: 32px; }
.abbr-table th, .abbr-table td { border: 1px solid #444; padding: 8px 12px; text-align: left; }
.abbr-table th { background: #333; color: #ffe066; }
.abbr-table td { background: #222; }
.recipes { margin-top: 32px; }
.recipe-group { margin-bottom: 36px; }
.recipes-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.recipes-table th, .recipes-table td { border: 1px solid #444; padding: 8px 10px; }
.recipes-table th { background: #333; color: #ffe066; }
.recipes-table td { background: #232323; }
.poison h3, .recipes-table.poison th { color: #98e065; }
.cold h3, .recipes-table.cold th { color: #7fd6e8; }
.lightning h3, .recipes-table.lightning th { color: #ffe066; }
.fire h3, .recipes-table.fire th { color: #ff7f50; }
.physical h3, .recipes-table.physical th { color: #b48de3; }
.magic h3, .recipes-table.magic th { color: #e0b0ff; }
.special h3, .recipes-table.special th { color: #f0a500; }

/* Shared styles for affix table to match */
.affix-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.affix-table th, .affix-table td { border: 1px solid #444; padding: 8px 10px; white-space: nowrap; }
.affix-table th { background: #333; color: #ffe066; }
.affix-table td { background: #232323; }

@media (max-width: 800px) {
    .container { padding: 10px; }
    .abbr-table, .recipes-table, .affix-table { font-size: 0.95em; }
}