:root {
  --bg1: #6ee7f9;
  /* aqua */
  --bg2: #9b8cfe;
  /* periwinkle */
  --bg3: #ff8bd1;
  /* pink */
  --bg4: #6df9b7;
  /* mint */
  --glass: rgba(255, 255, 255, .14);
  --stroke: rgba(255, 255, 255, .62);
  --text: #ffffff;
  --shadow: rgba(0, 0, 0, .25);
}

/* Full-screen animated gradient background */
/*
body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  color: var(--text);
  background: linear-gradient(130deg, var(--bg1), var(--bg2), var(--bg3), var(--bg4));
  background-size: 200% 200%;
  animation: gradientShift 18s ease-in-out infinite;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
*/

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.wrap {
  /* width: min(540px, 92vw);*/
  width: 100%;
  display: grid;
  gap: 8px;
  text-align: center;
  color: var(--text);
  background: linear-gradient(130deg, var(--bg1), var(--bg2), var(--bg3), var(--bg4));
  background-size: 100% 100%;
  animation: gradientShift 18s ease-in-out infinite;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  padding: 24px;
}

h1.caption {
  margin: 0;
  font-weight: 800;
  line-height: 0.75;
  letter-spacing: .2px;
  font-size: clamp(1.4rem, 1.5vw + 1rem, 2.75rem);
  text-shadow: 0 4px 18px var(--shadow);
}

.clock {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 14px);
}

.unit {
  position: relative;
  padding: clamp(7px, 0.8vw, 11px);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08));
  box-shadow: 0 10px 30px var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, .25);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  isolation: isolate;
}

.ring {
  --size: clamp(75px, 12vw, 110px);
  width: var(--size);
  height: var(--size);
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* Progress ring using conic gradient; var(--p) is 0..1 */
  background: conic-gradient(rgba(255, 255, 255, .9) calc(var(--p) * 1turn), rgba(255, 255, 255, .18) 0);
  position: relative;
}

.ring::before {
  /* Inner glass circle */
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, .35), rgba(255, 255, 255, .12) 48%, rgba(255, 255, 255, .08) 52%, rgba(255, 255, 255, .04) 70%, rgba(0, 0, 0, .08) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

.value {
  position: relative;
  z-index: 1;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  font-size: 24pt; /*clamp(2.8rem, 6.5vw, 5rem);*/
  line-height: 1;
  text-shadow: 0 2px 10px var(--shadow);
  transition: transform .22s ease, filter .22s ease;
}

.label {
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .82rem;
  opacity: .92;
}

@keyframes blink {
  50% {
    opacity: .25;
  }
}

/* Tick animation when values change */
.tick {
  animation: pop .28s ease;
}

@keyframes pop {
  0% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }

  45% {
    transform: translateY(-4px) scale(1.06);
    filter: brightness(1.1);
  }

  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
  }

  .value {
    transition: none;
  }

  .tick {
    animation: none;
  }
}

/* Footer note */
.note {
  font-size: .92rem;
  opacity: .9;
}

/* Layout helpers for the central colon separators */
.clock {
  align-items: center;
}

.sep {
  display: grid;
  place-items: center;
}

/* Responsive tweak: stack on very small screens */
@media (max-width: 320px) {
  .clock {
    grid-template-columns: 1fr;
  }

  .sep {
    display: none;
  }
}