.matrix-scene {
  position: relative;
  block-size: 100%;
  overflow: hidden;
  border-radius: clamp(1rem, 2vw, 1.5rem);
  background: #03050a;
  display: grid;
  place-items: center;
}

.matrix-canvas {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.matrix-time {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: clamp(0.4rem, 1vw, 0.8rem);
  padding: clamp(0.8rem, 2vw, 1.4rem) clamp(1.4rem, 3vw, 2.2rem);
  border-radius: 0.8rem;
  background: rgba(3, 10, 5, 0.45);
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.matrix-time-text {
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 700;
  font-size: clamp(3.5rem, 11vw, 8.5rem);
  letter-spacing: 0.05em;
  color: #baffcf;
  text-shadow: 0 0 18px rgba(34, 197, 94, 0.65);
  font-variant-numeric: tabular-nums;
}

.matrix-meridiem {
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 700;
  font-size: clamp(1rem, 2.5vw, 1.6rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(186, 255, 207, 0.75);
}

.matrix-meridiem:empty {
  display: none;
}