.magic-dot-matrix{display:block;container-type:inline-size}.magic-dot-matrix svg{--mdm-gap:var(--magic-dot-matrix-gap,calc(100cqi/(var(--mdm-cols)*4 - 1)));--mdm-dot-size:calc((100cqi - (var(--mdm-cols) - 1)*var(--mdm-gap))/var(--mdm-cols));background:var(--magic-dot-matrix-background,transparent);height:calc(var(--mdm-rows)*var(--mdm-dot-size) + (var(--mdm-rows) - 1)*var(--mdm-gap));width:100cqi;display:block}.magic-dot-matrix__dot{fill:var(--magic-dot-matrix-inactive-color,color-mix(in srgb,currentColor 15%,transparent));height:var(--mdm-dot-size);rx:calc(var(--magic-dot-matrix-radius,.33)*var(--mdm-dot-size));transition:var(--magic-dot-matrix-transition,none);width:var(--mdm-dot-size);x:calc(var(--mdm-col)*(var(--mdm-dot-size) + var(--mdm-gap)));y:calc(var(--mdm-row)*(var(--mdm-dot-size) + var(--mdm-gap)))}.magic-dot-matrix__dot[data-active=true]{fill:var(--mdm-tone-color,var(--magic-dot-matrix-color,currentColor))}