/* Isolate decoration without clipping card layers or their 3D hover. */
.design-card-region { position:relative;isolation:isolate; }
.design-dotgrid { position:absolute;inset:-24px -24px -40px;z-index:-1;overflow:hidden;pointer-events:none; }
.design-dotgrid[hidden] { display:none; }
.design-dotgrid-canvas { display:block;width:100%;height:100%; }
.design-dotgrid.is-static { background-image:radial-gradient(circle at center,var(--dot-color) 0 calc(var(--dot-size) / 2),transparent calc(var(--dot-size) / 2 + .4px));background-size:var(--dot-pitch) var(--dot-pitch);opacity:var(--dot-opacity); }
.page.has-design-background .design-card-page { background:var(--bg); }
.page.has-design-background .design-intro,
.page.has-design-background .design-sidebar { background:var(--bg); }
.page.has-design-background .design-sidebar { z-index:2; }
@media(min-width:1200px){
 .is-sidebar-design .design-dotgrid { inset:-40px -32px -64px; }
}
@media(max-width:700px),(hover:none) and (pointer:coarse){
 .design-dotgrid { inset:-20px -24px -40px; }
}
@media(min-width:1200px){
 .is-sidebar-design .design-card-region { min-height:calc(100svh - 104px); }
}

/* Continue the dots through the space after the cards, ending at the ticker. */
.design-card-region { padding-bottom:88px; }
.design-dotgrid { bottom:0; }
@media(min-width:1200px) { .is-sidebar-design .design-dotgrid { bottom:0; } }
@media(max-width:700px),(hover:none) and (pointer:coarse) { .design-dotgrid { bottom:0; } }
@media(max-width:700px) { .design-card-region { padding-bottom:56px; } }