.macro-class-page{--macro-accent:var(--legendary);padding-bottom:72px}
.macro-class-hero{position:relative;overflow:hidden;text-align:center;padding:68px 0 42px;border-bottom:1px solid color-mix(in srgb,var(--macro-accent) 25%,var(--line-soft))}
.macro-class-hero::before{content:"";position:absolute;inset:-30% 0 auto;height:440px;background:radial-gradient(ellipse 50% 90% at 50% 0%,color-mix(in srgb,var(--macro-accent) 18%,transparent),transparent 72%);pointer-events:none}
.macro-class-hero .class-icon{display:block;width:64px;height:64px;border-radius:50%;margin:0 auto 20px;padding:10px;position:relative;
  background:color-mix(in srgb,var(--macro-accent) 14%,var(--ink));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--macro-accent) 65%,transparent),0 0 0 7px color-mix(in srgb,var(--macro-accent) 12%,transparent),0 0 40px 4px color-mix(in srgb,var(--macro-accent) 35%,transparent);}
.macro-class-hero .eyebrow{color:var(--macro-accent)}
.macro-class-hero h1{font-size:clamp(36px,6vw,58px);margin-bottom:16px;position:relative}.macro-class-hero h1 em{font-style:normal;color:var(--macro-accent);text-shadow:0 0 26px color-mix(in srgb,var(--macro-accent) 55%,transparent)}
.macro-class-hero p{max-width:650px;margin:0 auto;color:var(--muted);font-size:15.5px;position:relative}
.macro-class-switch{display:flex;justify-content:center;gap:7px;overflow-x:auto;padding-top:12px;padding-bottom:12px;border-bottom:1px solid var(--line-soft);scrollbar-width:thin}
.macro-class-switch a{--switch:var(--muted);flex:0 0 auto;padding:7px 11px;border:1px solid var(--line);color:var(--switch);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;transition:color .15s ease,border-color .15s ease,background .15s ease}
.macro-class-switch a:hover,.macro-class-switch a[aria-current="page"]{border-color:var(--switch);background:color-mix(in srgb,var(--switch) 10%,transparent)}
.macro-class-content{padding-top:38px}.macro-class-content>.macro-note{border-left-color:var(--macro-accent);background:color-mix(in srgb,var(--macro-accent) 6%,transparent)}
.macro-class-page .macro-class{padding-top:30px;border-top-color:color-mix(in srgb,var(--macro-accent) 25%,var(--line-soft))}
.macro-class-page .macro-class-title span,.macro-class-page .macro-subhead{color:var(--macro-accent)}
.macro-class-page .macro-card{border-color:color-mix(in srgb,var(--macro-accent) 28%,var(--line))}
.macro-class-page .macro-card::before{background:linear-gradient(90deg,transparent,var(--macro-accent),transparent);box-shadow:0 0 13px color-mix(in srgb,var(--macro-accent) 65%,transparent)}
.macro-class-page .macro-card::after{color:color-mix(in srgb,var(--macro-accent) 18%,transparent)}
/* .macro-copy already reads --macro-accent directly (see macros-page-v1.css),
   which cascades down from .macro-class-page below — no override needed here.
   (An earlier override on :hover/.copied used a fixed near-black text color on
   a solid accent-colored fill, which was unreadable for the darker class
   colors like Death Knight and Shaman — removed rather than duplicated.) */
.macro-back{display:inline-flex;align-items:center;gap:7px;margin-top:30px;color:var(--macro-accent);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;transition:gap .15s ease}
.macro-back:hover{gap:11px}
@media(prefers-reduced-motion:reduce){.macro-back{transition:none}}
@media(max-width:760px){.macro-class-hero{padding:48px 0 34px}.macro-class-switch{justify-content:flex-start;padding-left:18px;padding-right:18px}.macro-class-content{padding-top:24px}}