:root {
  --bg: #f4ecdd;
  --racing-green: #004225;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg) center center / cover no-repeat;
  font-family: -apple-system, "Avenir Next", "Segoe UI", system-ui, sans-serif;
}

.hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.mole-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#mole {
  width: min(45vw, 340px);
  height: auto;
  display: block;
}

.digital-clock {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.8vw, 8px);
  margin-top: clamp(-24px, -3.5vw, -12px);
}

.digit-group {
  display: flex;
  gap: clamp(2px, 0.5vw, 5px);
}

.digit-svg {
  width: clamp(28px, 6.5vw, 56px);
  aspect-ratio: 40 / 70;
  display: block;
}

.digit-svg .seg {
  transition: fill 0.05s linear;
}

.digit-svg .seg.on {
  fill: var(--racing-green);
}

.digit-svg .seg.off {
  fill: transparent;
}

.colon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(6px, 1.6vw, 12px);
  padding: 0 clamp(1px, 0.4vw, 4px);
}

.colon-dot {
  width: clamp(6px, 1.3vw, 11px);
  height: clamp(6px, 1.3vw, 11px);
  border-radius: 50%;
  background: var(--racing-green);
}