matrix-display{--dot-size:5px;--dot-spacing:var(--matrix-dot-spacing,3px);--highlight-color:var(--color-accent);--default-color:var(--color-neutral-300);width:100%;display:block;overflow:hidden}.matrix-display__container{grid-template-columns:repeat(var(--matrix-cols), calc(var(--dot-size) + var(--dot-spacing)));grid-template-rows:repeat(var(--matrix-rows), calc(var(--dot-size) + var(--dot-spacing)));gap:var(--dot-spacing);place-content:center;width:min-content;display:grid;position:relative;overflow:hidden}.matrix-display__dot-container{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.matrix-display__dot{width:var(--dot-size);height:var(--dot-size);background-color:var(--default-color);border-radius:50%;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative}.matrix-display__dot--highlighted{background-color:var(--highlight-color);transform:scale(1.1)}.matrix-display__container--animating .matrix-display__dot--highlighted{transition:all .3s cubic-bezier(.4,0,.2,1)}.matrix-display__dot-container--clickable{cursor:pointer}.matrix-display__dot-container--clickable:hover .matrix-display__dot{background-color:var(--color-neutral-900);transition:all .15s cubic-bezier(.4,0,.2,1);transform:scale(1.2)}.matrix-display__dot-container--clickable:hover .matrix-display__dot--highlighted{background-color:var(--highlight-color);filter:brightness(1.1);transform:scale(1.3)}@media (prefers-reduced-motion:reduce){.matrix-display__dot{transition:background-color .2s}.matrix-display__dot--highlighted,.matrix-display__dot-container--clickable:hover .matrix-display__dot,.matrix-display__dot-container--clickable:hover .matrix-display__dot--highlighted{transform:none}}.block-type-matrix{display:flex}.block-type-matrix [data-alignment=left]{margin-right:auto}.block-type-matrix [data-alignment=center]{margin-inline:auto}.block-type-matrix [data-alignment=right]{margin-left:auto}