Alarm Clock

<div class="nuda-alarm" role="img" aria-label="Alarm 06:30 AM ringing">
  <div class="nuda-alarm__bell nuda-alarm__bell--l"></div>
  <div class="nuda-alarm__bell nuda-alarm__bell--r"></div>
  <div class="nuda-alarm__body">
    <span class="nuda-alarm__time">06:30</span>
    <span class="nuda-alarm__label">WAKE UP</span>
  </div>
  <div class="nuda-alarm__foot nuda-alarm__foot--l"></div>
  <div class="nuda-alarm__foot nuda-alarm__foot--r"></div>
</div>

/* Alarm Clock
   Bells on top, feet on the bottom. The whole clock shakes when ringing.
   Toggle the .ringing class in production to start/stop the shake. */

.nuda-alarm {
  --bg: #0c0c10;
  --accent: #ffb45e;
  position: relative;
  display: inline-block;
  padding: 28px 24px 18px;
  animation: nuda-alarm-shake 1.2s ease-in-out infinite;
}

.nuda-alarm__body {
  position: relative;
  width: 130px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #1a1a20, #09090b);
  border: 2px solid #1a1a20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: inset 0 0 0 4px #0c0c10;
}

.nuda-alarm__time {
  font: 700 28px ui-monospace, Menlo, monospace;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(255, 180, 94, 0.35);
}

.nuda-alarm__label {
  font: 500 9px system-ui;
  letter-spacing: 2px;
  color: #a0a0a8;
}

.nuda-alarm__bell {
  position: absolute;
  top: 8px;
  width: 24px;
  height: 18px;
  background: #1a1a20;
  border: 2px solid #2a2a30;
  border-radius: 50% 50% 6px 6px;
}
.nuda-alarm__bell--l { left: 22px; transform: rotate(-25deg); }
.nuda-alarm__bell--r { right: 22px; transform: rotate(25deg); }

.nuda-alarm__foot {
  position: absolute;
  bottom: 6px;
  width: 14px;
  height: 10px;
  background: #1a1a20;
  border: 1px solid #2a2a30;
  border-radius: 3px 3px 0 0;
}
.nuda-alarm__foot--l { left: 34px; transform: skewX(-15deg); }
.nuda-alarm__foot--r { right: 34px; transform: skewX(15deg); }

@keyframes nuda-alarm-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px) rotate(-2deg); }
  20%, 40%, 60%, 80%      { transform: translateX(2px) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-alarm { animation: none; }
}