.macros-hub-hero{position:relative;overflow:hidden}
.macros-hub-hero::before{content:"";position:absolute;inset:-20% 0 auto;height:420px;background:radial-gradient(ellipse 55% 90% at 50% 0%,rgba(255,128,0,.11),transparent 72%);pointer-events:none}
.macros-hub{padding:52px 0 76px}
.macros-hub-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:26px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.macros-hub-head h2{font-size:22px}.macros-hub-head span{color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}

/* ---- class-selector grid: a real card per class, not a re-skinned generic
   tile. Bigger icon in its own glowing badge, class-tinted background wash,
   a proper hover lift + intensified glow (same layered box-shadow formula
   used sitewide on real screenshots), so this reads as the front door to a
   whole tool, not one more list item. ---- */
.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.guide-tile{--tile:var(--cc);position:relative;display:flex;flex-direction:column;isolation:isolate;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--tile) 22%,var(--line));
  background:
    radial-gradient(ellipse 140% 90% at 50% -20%,color-mix(in srgb,var(--tile) 16%,transparent),transparent 62%),
    var(--surface);
  padding:32px 26px 28px;transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s ease,box-shadow .25s ease;
}
.guide-tile:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--tile) 70%,transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--tile) 55%,transparent),
    0 0 26px 2px color-mix(in srgb,var(--tile) 42%,transparent),
    0 0 70px 10px color-mix(in srgb,var(--tile) 22%,transparent),
    0 18px 40px -12px rgba(0,0,0,.6);
}
.guide-tile::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-60%;height:140%;z-index:-1;
  background:radial-gradient(ellipse 60% 60% at 50% 100%,color-mix(in srgb,var(--tile) 20%,transparent),transparent 70%);
  opacity:0;transition:opacity .3s ease;}
.guide-tile:hover::after{opacity:1}
.guide-tile .class-icon{width:56px;height:56px;border-radius:50%;margin-bottom:16px;padding:9px;background:color-mix(in srgb,var(--tile) 14%,var(--ink));
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--tile) 55%,transparent),0 0 0 5px color-mix(in srgb,var(--tile) 10%,transparent),0 0 24px 2px color-mix(in srgb,var(--tile) 30%,transparent);
  position:relative;transition:box-shadow .25s ease;}
.guide-tile:hover .class-icon{box-shadow:0 0 0 1.5px var(--tile),0 0 0 6px color-mix(in srgb,var(--tile) 18%,transparent),0 0 32px 6px color-mix(in srgb,var(--tile) 55%,transparent);}
.guide-tag{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--tile);margin-bottom:8px;position:relative;display:flex;align-items:center;gap:6px}
.guide-tag::before{content:"";width:5px;height:5px;background:var(--tile);box-shadow:0 0 8px var(--tile);flex:0 0 auto}
.guide-tile h3{font-size:23px;margin:0 0 10px;position:relative;font-family:"Russo One","Chakra Petch",sans-serif;letter-spacing:.01em;color:var(--text)}
.guide-tile p{color:var(--muted);font-size:13.5px;line-height:1.65;margin-bottom:22px;position:relative;flex:1}
.guide-tile .btn{align-self:flex-start;position:relative;width:100%;box-sizing:border-box;white-space:normal;text-align:left;font-size:11.5px;letter-spacing:.06em;padding:11px 18px;border-color:color-mix(in srgb,var(--tile) 60%,var(--line));color:var(--tile);transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}
.guide-tile .btn:hover{background:color-mix(in srgb,var(--tile) 18%,transparent);color:var(--tile);border-color:var(--tile);box-shadow:0 0 18px color-mix(in srgb,var(--tile) 45%,transparent)}
@media(prefers-reduced-motion:reduce){.guide-tile,.guide-tile:hover,.guide-tile .class-icon{transition:none;transform:none}}

.macro-reference{margin-top:52px;display:grid;gap:14px}
.macro-library{border:1px solid var(--line);background:var(--surface)}
.macro-library>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 22px;cursor:pointer;list-style:none;font-weight:700;color:var(--text);transition:background .15s ease}
.macro-library>summary:hover{background:rgba(255,128,0,.05)}
.macro-library>summary::-webkit-details-marker{display:none}.macro-library>summary span{color:var(--legendary-bright);font-size:11px;letter-spacing:.1em;text-transform:uppercase}.macro-library>summary::after{content:"+";color:var(--legendary-bright);font-size:21px}.macro-library[open]>summary::after{content:"−"}
.macro-library[open]>summary{border-bottom:1px solid var(--line-soft)}
.macro-library .macro-class{padding:28px 22px 34px}.macro-library .macro-class-title{margin-bottom:18px}
@media(max-width:760px){
  .guide-grid{grid-template-columns:1fr 1fr;gap:14px}
  .guide-tile{padding:24px 18px 20px}.guide-tile .class-icon{width:46px;height:46px;padding:7px}.guide-tile h3{font-size:18px}
  .macros-hub{padding-top:36px}.macros-hub-head{align-items:start;flex-direction:column;gap:6px}
  .macro-library .macro-class{padding:22px 14px 28px}
}
@media(max-width:460px){.guide-grid{grid-template-columns:1fr}}