/* WebToolsZon — hero image section only (inset frame + raised image).
   Extracted from the removed wtz-neumorphism.css. Variables are scoped to
   .page-hero-media so nothing else on the page is affected. */
.page-hero-media{--h-bg:#e3e8ef;--h-hi:#ffffff;--h-lo:rgba(138,154,180,.62)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .page-hero-media{--h-bg:#262a32;--h-hi:rgba(255,255,255,.07);--h-lo:rgba(8,10,14,.62)}}
:root[data-theme="dark"] .page-hero-media{--h-bg:#262a32;--h-hi:rgba(255,255,255,.07);--h-lo:rgba(8,10,14,.62)}
:root:root:root .page-hero-media{
  --h-raise-s:4px 4px 9px var(--h-lo),-4px -4px 9px var(--h-hi);
  --h-in:inset 5px 5px 10px var(--h-lo),inset -5px -5px 10px var(--h-hi);
  box-sizing:border-box;border:0;border-radius:26px;padding:24px;background:var(--h-bg);box-shadow:var(--h-in);overflow:hidden}
:root:root:root .page-hero-media img{border-radius:18px;box-shadow:var(--h-raise-s)}
@media (max-width:680px){:root:root:root .page-hero-media{padding:16px;border-radius:20px}}