.ring-wrap { position: relative; width: 240px; margin: 10px auto 18px; }
.ring { width: 240px; height: 240px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--border); stroke-width: 8; }
.ring-fg {
  fill: none; stroke: var(--primary); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 339.29; stroke-dashoffset: 0; transition: stroke-dashoffset 0.3s;
}
.time {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 2.6rem; font-weight: 700; color: var(--text);
}