World Clock Card

<div class="nuda-world" role="img" aria-label="Tokyo 04:18 AM">
  <div class="nuda-world__row">
    <span class="nuda-world__flag" aria-hidden="true">🇯🇵</span>
    <div class="nuda-world__meta">
      <span class="nuda-world__city">Tokyo</span>
      <span class="nuda-world__zone">JST · UTC+9</span>
    </div>
    <div class="nuda-world__time">
      <span>04:18</span><em>AM</em>
    </div>
  </div>
  <div class="nuda-world__bar"><div class="nuda-world__sun"></div></div>
  <div class="nuda-world__foot">
    <span>·</span><span>Night</span>
    <span>·</span><span>Sunrise 5:42</span>
  </div>
</div>

/* World Clock Card
   City + flag + local time, with a day/night bar and sun marker. */

.nuda-world {
  --bg: #0c0c10;
  --accent: #62b6ff;
  width: 260px;
  padding: 16px;
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  color: #fafafa;
  font-family: system-ui, sans-serif;
}

.nuda-world__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nuda-world__flag { font-size: 24px; line-height: 1; }

.nuda-world__meta {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.nuda-world__city { font-weight: 600; font-size: 15px; }
.nuda-world__zone {
  font-size: 11px;
  color: #63636e;
  letter-spacing: 0.5px;
}

.nuda-world__time {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font: 600 22px ui-monospace, Menlo, monospace;
}

.nuda-world__time em {
  font-style: normal;
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 1px;
}

.nuda-world__bar {
  position: relative;
  margin-top: 14px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    #1a1a20 0%,
    #1a1a20 25%,
    #332b1a 50%,
    #1a1a20 75%,
    #1a1a20 100%
  );
}

.nuda-world__sun {
  position: absolute;
  top: -3px;
  left: 18%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: nuda-world-glow 3s ease-in-out infinite;
}

.nuda-world__foot {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  font-size: 10px;
  color: #63636e;
  letter-spacing: 0.5px;
}

@keyframes nuda-world-glow {
  50% { opacity: 0.6; transform: scale(0.85); }
}

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