/* Layout controls belong to the module annotation, not the specimen content. */
.reference-hero-views{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto;padding-left:16px}
body .reference-hero-views a{padding:5px 9px;border:1px solid #3e855e!important;color:#24553c!important;font:12px/1.4 Arial,sans-serif;text-decoration:none;white-space:nowrap}
body .reference-hero-views a[aria-current]{background:#24553c!important;color:#fff!important}
.reference-hero-views a:focus-visible{outline:2px solid #24553c;outline-offset:3px}
@media(max-width:700px){.reference-hero-views{flex-basis:100%;margin-top:8px;padding-left:0}}

/* Neutral background composition: the text sits over the image specimen. */
html[data-scheme=wireframe][data-hero=background] body #reference-content-details .reference-hero-pin .home-masthead{display:block;position:relative;isolation:isolate;min-height:460px;padding:44px 24px 115px;border:1px solid;margin-top:18px}
html[data-scheme=wireframe][data-hero=background] body #reference-content-details .home-masthead>.home-heading{position:relative;z-index:2;width:58%;margin:0;padding:20px;background:#fff!important}
html[data-scheme=wireframe][data-hero=background] body #reference-content-details .home-masthead>.home-hero{position:absolute;inset:0;width:100%;max-width:none;margin:0;padding:0;border:0}
html[data-scheme=wireframe][data-hero=background] body #reference-content-details .hero-stage{position:absolute;inset:0;height:auto;overflow:hidden}
html[data-scheme=wireframe][data-hero=background] body #reference-content-details .hero-slide{height:100%}
html[data-scheme=wireframe][data-hero=background] body #reference-content-details .hero-slide .reference-image{height:100%;min-height:0;aspect-ratio:auto;align-items:flex-start;justify-content:flex-end;padding:12px}
html[data-scheme=wireframe][data-hero=background] body #reference-content-details .hero-toolbar{position:absolute;bottom:12px;left:24px;right:24px;z-index:3;background:#fff!important;padding:12px;border:1px solid}
@media(max-width:700px){
 html[data-scheme=wireframe][data-hero=background] body #reference-content-details .reference-hero-pin .home-masthead{padding:64px 16px 210px}
 html[data-scheme=wireframe][data-hero=background] body #reference-content-details .home-masthead>.home-heading{width:100%;padding:16px}
 html[data-scheme=wireframe][data-hero=background] body #reference-content-details .hero-toolbar{left:16px;right:16px}
}