/* Preserve the original section grid, typography and spacing. */
@property --dx-border-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.dx-ecosystem{scroll-margin-top:96px}
.dx-eco-stage{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:12px}
.dx-eco-panel{position:absolute;inset:0;border-radius:inherit;overflow:hidden;opacity:0;transition:opacity .5s ease;pointer-events:none}
.dx-eco-panel[data-active=true]{opacity:1;z-index:1}
.dx-eco-panel img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* A masked highlight follows only the image perimeter. */
.dx-eco-stage::after{content:"";position:absolute;z-index:2;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;background:conic-gradient(from var(--dx-border-angle),transparent 0deg,transparent 230deg,rgba(255,255,255,.2) 280deg,#fff 330deg,transparent 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;transition:opacity .25s ease}
@keyframes dx-border-orbit{to{--dx-border-angle:360deg}}
@media(hover:hover) and (pointer:fine){.dx-eco-stage:hover::after{opacity:1;animation:dx-border-orbit 2.8s linear infinite}}
.dx-eco-tab{color:hsl(var(--primary));opacity:.55;cursor:pointer;background:transparent;border:0}
.dx-eco-tab:hover{opacity:1}
.dx-eco-tab[aria-selected=true]{opacity:1;background:color-mix(in srgb,hsl(var(--primary)) 7%,hsl(var(--background)))}
.dx-eco-tab:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.dx-eco-panel,.dx-eco-stage::after{transition:none}.dx-eco-stage:hover::after{animation:none}}