/* Alchemy system guide — isolated so it can be deployed without changing shared site styles. */
.alchemy-extra { gap: 22px; }
.alchemy-system-intro { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 18px; padding: 24px; border: 1px solid rgba(220, 174, 88, .34); background: radial-gradient(circle at 92% 8%, rgba(189, 120, 70, .15), transparent 38%), rgba(8, 6, 3, .88); }
.alchemy-system-intro > span { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(220, 174, 88, .6); border-radius: 50%; color: var(--gold); font-size: 23px; }
.alchemy-system-intro small { color: var(--gold); font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.alchemy-system-intro h3 { margin: 7px 0 6px; color: #f0d69c; font: 700 24px/1.22 var(--font-display); }
.alchemy-system-intro p { margin: 0; color: #b7aa93; font-size: 14px; line-height: 1.65; }

.alchemy-types-section,
.alchemy-degree-section,
.alchemy-ungraded-section { display: grid; gap: 17px; padding: 24px; border: 1px solid rgba(220, 174, 88, .22); background: rgba(7, 5, 3, .76); }
.alchemy-type-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.alchemy-type-grid article { min-height: 190px; padding: 20px 17px; border: 1px solid rgba(220, 174, 88, .24); background: radial-gradient(circle at 100% 0, rgba(220, 174, 88, .1), transparent 46%), rgba(8, 6, 3, .86); }
.alchemy-type-grid b { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 15px; border: 1px solid rgba(220, 174, 88, .45); border-radius: 50%; color: var(--gold); font-size: 18px; }
.alchemy-type-grid small { display: block; color: #9e8d70; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.alchemy-type-grid h4 { margin: 7px 0 8px; color: #ead09a; font: 700 18px/1.3 var(--font-display); }
.alchemy-type-grid p { margin: 0; color: #a99c86; font-size: 13px; line-height: 1.55; }

.alchemy-degree-intro,
.alchemy-ungraded-section > p { margin: -2px 0 0; color: #b3a68f; font-size: 14px; line-height: 1.65; }
.alchemy-degree-table-wrap { width: 100%; overflow-x: auto; border: 1px solid rgba(220, 174, 88, .22); background: rgba(5, 4, 2, .72); }
.alchemy-degree-table { width: 100%; min-width: 650px; border-collapse: collapse; }
.alchemy-degree-table th,
.alchemy-degree-table td { padding: 12px 14px; border-right: 1px solid rgba(220, 174, 88, .13); border-bottom: 1px solid rgba(220, 174, 88, .13); color: #b9ac96; font-size: 13px; text-align: left; }
.alchemy-degree-table th:last-child,
.alchemy-degree-table td:last-child { border-right: 0; }
.alchemy-degree-table tbody tr:last-child > * { border-bottom: 0; }
.alchemy-degree-table thead th { color: #ecd19a; background: rgba(220, 174, 88, .11); font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.alchemy-degree-table tbody th { color: #e5c98f; font-weight: 800; }
.alchemy-degree-table tbody tr:nth-child(even) { background: rgba(220, 174, 88, .035); }
.alchemy-drop-note { margin: 0; padding: 13px 15px; border-left: 3px solid rgba(220, 174, 88, .62); color: #a99c86; background: rgba(220, 174, 88, .06); font-size: 13px; line-height: 1.55; }
.alchemy-drop-note strong { color: #e0c58e; }

.alchemy-ungraded-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.alchemy-ungraded-grid > div { min-height: 128px; display: grid; align-content: start; gap: 7px; padding: 18px; border: 1px solid rgba(220, 174, 88, .2); background: rgba(8, 6, 3, .82); }
.alchemy-ungraded-grid b { color: var(--gold); font-size: 10px; letter-spacing: .12em; }
.alchemy-ungraded-grid strong { color: #e4ca92; font-size: 15px; }
.alchemy-ungraded-grid span { color: #a99c86; font-size: 13px; line-height: 1.5; }

body.site-light .alchemy-system-intro,
body.site-light .alchemy-types-section,
body.site-light .alchemy-degree-section,
body.site-light .alchemy-ungraded-section,
body.site-light .alchemy-type-grid article,
body.site-light .alchemy-ungraded-grid > div { border-color: var(--light-line); background: var(--light-paper-strong); color: var(--light-ink); box-shadow: 0 9px 24px rgba(68, 35, 13, .08); }
body.site-light .alchemy-system-intro > span,
body.site-light .alchemy-type-grid b { border-color: rgba(144, 55, 34, .38); color: var(--light-red); }
body.site-light .alchemy-system-intro small,
body.site-light .alchemy-type-grid small,
body.site-light .alchemy-ungraded-grid b { color: var(--light-red); }
body.site-light .alchemy-system-intro h3,
body.site-light .alchemy-type-grid h4,
body.site-light .alchemy-ungraded-grid strong { color: var(--light-ink); }
body.site-light .alchemy-system-intro p,
body.site-light .alchemy-type-grid p,
body.site-light .alchemy-degree-intro,
body.site-light .alchemy-ungraded-section > p,
body.site-light .alchemy-ungraded-grid span { color: var(--light-ink-soft); }
body.site-light .alchemy-degree-table-wrap { border-color: var(--light-line); background: rgba(255, 252, 244, .88); }
body.site-light .alchemy-degree-table th,
body.site-light .alchemy-degree-table td { border-color: rgba(132, 86, 36, .16); color: var(--light-ink-soft); }
body.site-light .alchemy-degree-table thead th { color: var(--light-red-deep); background: #ead5ad; }
body.site-light .alchemy-degree-table tbody th { color: var(--light-red-deep); }
body.site-light .alchemy-degree-table tbody tr:nth-child(even) { background: rgba(224, 193, 139, .16); }
body.site-light .alchemy-drop-note { border-left-color: var(--light-red); color: var(--light-ink-soft); background: rgba(239, 222, 190, .58); }
body.site-light .alchemy-drop-note strong { color: var(--light-red-deep); }
body.site-light .alchemy-safe-list { border-color: var(--light-line); background: rgba(239, 222, 190, .54); }
body.site-light .alchemy-safe-list strong { color: var(--light-red-deep); }
body.site-light .alchemy-safe-list span { border-color: rgba(144, 55, 34, .22); color: var(--light-ink-soft); background: rgba(255, 252, 244, .72); }

@media (max-width: 1180px) {
  .alchemy-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .alchemy-type-grid,
  .alchemy-ungraded-grid { grid-template-columns: 1fr; }
  .alchemy-system-intro { grid-template-columns: 46px minmax(0, 1fr); gap: 13px; padding: 18px 16px; }
  .alchemy-system-intro > span { width: 44px; height: 44px; font-size: 18px; }
  .alchemy-system-intro h3 { font-size: 20px; }
  .alchemy-types-section,
  .alchemy-degree-section,
  .alchemy-ungraded-section { padding: 18px 14px; }
}