body { background: pink; }
}
@font-face {
  font-family: 'DS-Digital';
  src: url('./fonts/DS-DIGI.woff2') format('woff2'),
       url('./fonts/DS-DIGI.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.lucky-clock-digits {
  font-family: 'DS-Digital', monospace, sans-serif;
}
.lucky-clock-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: hidden;
  margin-bottom: 1em;
}
.lucky-clock-container.dark-mode canvas,
.lucky-clock-container.dark-mode .lucky-image {
  filter: brightness(0.8) saturate(1.2);
}
.lucky-image {
  width: 100%;
  display: block;
  transition: transform 0.3s ease;
}
.lucky-clock-container.miauw .lucky-image {
  transform: scaleY(1.05) translateY(2px);
}
.lucky-clock-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.dark-toggle {
  display: inline-block;
  padding: 4px 10px;
  background: #222;
  color: #fff;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  margin-top: 4px;
  font-family: sans-serif;
}