.analog-clock {
  display: inline-block;
  user-select: none;
  touch-action: none;
}

.analog-clock-face {
  fill: #f7f4ef;
  stroke: #2c2a26;
  stroke-width: 3;
}

.analog-tick {
  stroke: #6b6560;
  stroke-width: 1;
}

.analog-tick--major {
  stroke: #2c2a26;
  stroke-width: 2.5;
}

.analog-num {
  fill: #2c2a26;
  font-size: 14px;
  font-weight: 600;
  font-family: "Segoe UI", system-ui, sans-serif;
}

.analog-hand {
  stroke-linecap: round;
}

.analog-hand--hour {
  stroke: #2c2a26;
  stroke-width: 5;
}

.analog-hand--minute {
  stroke: #0b6e99;
  stroke-width: 3.5;
}

.analog-hub {
  fill: #2c2a26;
}

.analog-clock:not(.is-readonly) .analog-hand {
  cursor: grab;
}

.analog-clock:not(.is-readonly) .analog-hand:active {
  cursor: grabbing;
}

.clock-digital-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.35rem 0 0.25rem;
}

.clock-digital-slot[hidden],
.clock-stage[hidden] {
  display: none !important;
  margin: 0;
}

.clock-digital-big {
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  text-align: center;
  margin: 0;
}

.clock-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.25rem 0 0.75rem;
}

#clock-stage-mount {
  display: flex;
  justify-content: center;
}

.clock-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}

.clock-choice-card {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.5rem;
}

.clock-choice-card input {
  margin-bottom: 0.35rem;
}

.clock-thumb {
  pointer-events: none;
}