Weather Clock

<div class="nuda-wx" role="img" aria-label="Weather clock 14:25 sunny">
  <svg class="nuda-wx__arc" viewBox="0 0 220 110">
    <path d="M10 100 A100 100 0 0 1 210 100" class="nuda-wx__path" />
    <circle cx="135" cy="36" r="6" class="nuda-wx__sun" />
  </svg>
  <div class="nuda-wx__time">14:25</div>
  <div class="nuda-wx__meta">
    <span class="nuda-wx__temp">21°</span>
    <span class="nuda-wx__cond">Sunny · Madrid</span>
  </div>
  <div class="nuda-wx__edges">
    <span>06:14</span>
    <span>20:48</span>
  </div>
</div>

/* Weather Clock
   Sun arc shows daylight progress; the sun marker indicates current time
   between sunrise (left) and sunset (right). */

.nuda-wx {
  --bg: #0c0c10;
  --sun: #ffb45e;
  width: 240px;
  padding: 16px;
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  color: #fafafa;
  font-family: system-ui;
}

.nuda-wx__arc {
  width: 100%;
  height: auto;
  display: block;
}

.nuda-wx__path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.nuda-wx__sun {
  fill: var(--sun);
  filter: drop-shadow(0 0 6px var(--sun));
  animation: nuda-wx-sun 6s ease-in-out infinite;
}

.nuda-wx__time {
  font: 600 28px ui-monospace, Menlo, monospace;
  letter-spacing: -1px;
  margin-top: -4px;
}

.nuda-wx__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}

.nuda-wx__temp {
  font-size: 18px;
  font-weight: 600;
  color: var(--sun);
}

.nuda-wx__cond {
  font-size: 12px;
  color: #a0a0a8;
}

.nuda-wx__edges {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 1px;
  color: #63636e;
}

@keyframes nuda-wx-sun {
  0%, 100% { transform: translateX(0) scale(1); }
  50%      { transform: translateX(-2px) scale(1.1); }
}

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