:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #0e1114; color: #f2f5f7; }
body { margin: 0; background: #0e1114; }
a { color: #88c7f0; text-decoration: none; }
a:hover { text-decoration: underline; }
.seo-header { display: flex; gap: 16px; justify-content: space-between; align-items: center; padding: 14px 16px; background: #151a1f; border-bottom: 1px solid #2a333c; }
.brand { color: #f2f5f7; font-weight: 700; }
.seo-header nav { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.seo-main { max-width: 1180px; margin: 0 auto; padding: 22px 16px 48px; }
.eyebrow { color: #9fb0ba; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0; }
h1 { margin: 4px 0 8px; font-size: clamp(24px, 3vw, 36px); letter-spacing: 0; }
.summary { color: #c5d0d7; max-width: 760px; line-height: 1.5; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 18px; }
.tile, .spell-link { border: 1px solid #29323a; border-radius: 6px; background: #0c0f12; padding: 12px; }
.tile strong, .spell-link strong { color: #f2f5f7; display: block; overflow-wrap: anywhere; }
.tile span, .spell-link span { color: #9fb0ba; display: block; margin-top: 4px; font-size: 12px; }
.landing-section { margin-top: 22px; }
.landing-section h2 { margin: 0 0 10px; font-size: 18px; letter-spacing: 0; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.guide-card { border: 1px solid #29323a; border-radius: 6px; background: #10151a; padding: 14px; }
.guide-card strong { color: #f2f5f7; display: block; }
.guide-card span { color: #b8c6cf; display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; }
.action-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.action-link { display: inline-block; border: 1px solid #3d6077; border-radius: 6px; background: #10202b; color: #bfe2f7; padding: 9px 12px; font-weight: 700; }
.sample-heading { margin: 26px 0 0; font-size: 20px; letter-spacing: 0; }
.spell-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 18px; }
.spell-link img { display: block; width: 112px; height: 172px; object-fit: contain; margin: 0 auto 8px; }
.spell-page { display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 1fr); gap: 22px; align-items: start; }
.spell-image { border: 1px solid #29323a; border-radius: 6px; background: #0c0f12; padding: 14px; text-align: center; }
.spell-image img { max-width: 100%; height: auto; }
.meta-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.meta-table th, .meta-table td { border-bottom: 1px solid #29323a; padding: 8px 0; text-align: left; vertical-align: top; }
.meta-table th { color: #8fbfe0; width: 150px; }
.meta-table a { font-weight: 700; }
.spell-description { margin-top: 16px; }
.spell-description h2 { margin: 0 0 8px; font-size: 16px; letter-spacing: 0; }
.spell-description p { margin: 0; padding: 12px; border: 1px solid #29323a; border-radius: 6px; background: #090c0f; color: #d9e2e8; line-height: 1.5; overflow-wrap: anywhere; }
.related-section { margin-top: 18px; }
.related-section h2 { margin: 0 0 10px; font-size: 16px; letter-spacing: 0; }
.related-list { display: flex; flex-wrap: wrap; gap: 8px; }
.related-list a { border: 1px solid #33414c; border-radius: 999px; background: #101820; color: #c7e7f8; padding: 7px 10px; font-size: 12px; font-weight: 700; text-decoration: none; }
.related-list a:hover { background: #173044; text-decoration: none; }
.viewer-link { display: inline-block; margin-top: 14px; background: #2b6f9f; color: #fff; border-radius: 6px; padding: 9px 12px; font-weight: 700; }
.about-section { display: grid; gap: 14px; margin-top: 18px; max-width: 880px; }
.about-panel { border: 1px solid #29323a; border-radius: 6px; background: #0c0f12; padding: 14px; }
.about-panel h2 { margin: 0 0 8px; font-size: 18px; letter-spacing: 0; }
.about-panel p { margin: 0; color: #d9e2e8; line-height: 1.55; }
.about-panel ul { margin: 0; padding-left: 18px; color: #d9e2e8; line-height: 1.55; }
.about-panel li { margin: 6px 0; }
@media (max-width: 720px) { .seo-header { align-items: flex-start; flex-direction: column; } .spell-page { grid-template-columns: 1fr; } }