Analog Clock

<div class="nuda-analog" role="img" aria-label="Analog clock">
  <div class="nuda-analog__face">
    <span class="nuda-analog__tick" style="transform: rotate(0deg) translateY(-70px)"></span>
    <span class="nuda-analog__tick" style="transform: rotate(90deg) translateY(-70px)"></span>
    <span class="nuda-analog__tick" style="transform: rotate(180deg) translateY(-70px)"></span>
    <span class="nuda-analog__tick" style="transform: rotate(270deg) translateY(-70px)"></span>
    <div class="nuda-analog__hand nuda-analog__hand--hour"></div>
    <div class="nuda-analog__hand nuda-analog__hand--minute"></div>
    <div class="nuda-analog__hand nuda-analog__hand--second"></div>
    <div class="nuda-analog__center"></div>
  </div>
</div>

/* Analog Clock
   Three rotating hands at realistic speeds (12h / 1h / 60s).
   Customize: --bg, --ink, --accent */

.nuda-analog {
  --bg: #0c0c10;
  --ink: #fafafa;
  --accent: #e4ff54;
  --border: rgba(255, 255, 255, 0.1);
  display: inline-block;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
}

.nuda-analog__face {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #1a1a20, #09090b);
}

.nuda-analog__tick {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 8px;
  margin-left: -1px;
  background: var(--ink);
  transform-origin: center 70px;
  opacity: 0.7;
}

.nuda-analog__hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: bottom center;
  background: var(--ink);
  border-radius: 2px;
}

.nuda-analog__hand--hour {
  width: 4px;
  height: 42px;
  margin-left: -2px;
  animation: nuda-analog-hour 43200s linear infinite;
}

.nuda-analog__hand--minute {
  width: 3px;
  height: 58px;
  margin-left: -1.5px;
  animation: nuda-analog-minute 3600s linear infinite;
}

.nuda-analog__hand--second {
  width: 1.5px;
  height: 66px;
  margin-left: -0.75px;
  background: var(--accent);
  animation: nuda-analog-second 60s linear infinite;
}

.nuda-analog__center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

@keyframes nuda-analog-hour    { to { transform: rotate(360deg); } }
@keyframes nuda-analog-minute  { to { transform: rotate(360deg); } }
@keyframes nuda-analog-second  { to { transform: rotate(360deg); } }

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