/* ==========================================
   同心正方形点阵样式
   Square Dot Matrix Styles
   ========================================== */

/* Square dot matrix container */
.square-matrix-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.square-matrix-container .dot-matrix {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Layer styling - opacity from outer to inner */
.dot.square.layer-1 {
  opacity: 0.3;
}

.dot.square.layer-2 {
  opacity: 0.6;
}

.dot.square.layer-3 {
  opacity: 0.9;
}

/* Small screen layout adjustment */
@media (max-width: 480px) {
  .square-matrix-container .dot-matrix {
    transform: scale(0.85);
  }
}