.relatio-clock {
  --relatio-size: 560px;
  --relatio-hour: #ffe4bf;
  --relatio-minute: #e8b475;
  --relatio-second: #dceeff;
  --relatio-light: 1;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: var(--relatio-size);
  margin: 24px auto;
  isolation: isolate;
  line-height: 1;
}
.relatio-clock[data-palette="mono"] {
  --relatio-hour: #edf2f8;
  --relatio-minute: #dbe5f0;
  --relatio-second: #edf2f8;
}
.relatio-clock .relatio-clock__body {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(ellipse at 34% 18%, #262a30 0%, #1b1e24 35%, #12151a 74%, #101318 100%);
  border: 1px solid #353b44;
  box-shadow: inset 0 1px 2px #ffffff15, inset 0 -3px 7px #000000b3, 0 20px 60px #00000040, 0 4px 12px #00000033;
}
.relatio-clock .relatio-clock__body::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid #ffffff05;
  border-radius: inherit;
  pointer-events: none;
}
.relatio-clock .relatio-clock__body::after {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #ffc98d05, transparent 65%);
  pointer-events: none;
}
.relatio-clock svg.relatio-clock__dial {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  border-radius: inherit;
  opacity: var(--relatio-light);
  transition: opacity 800ms ease;
}
.relatio-clock .relatio-dot {
  fill: #697482;
  opacity: .23;
  transition: opacity 180ms ease, fill 180ms ease;
}
.relatio-clock .relatio-dot--hour.is-on {
  fill: var(--relatio-hour);
  opacity: 1;
  filter: drop-shadow(0 0 3px #ffe4bf50);
}
.relatio-clock .relatio-dot--minute.is-past {
  fill: var(--relatio-minute);
  opacity: .33;
}
.relatio-clock .relatio-dot--minute.is-current {
  fill: var(--relatio-minute);
  opacity: 1;
  filter: drop-shadow(0 0 4px #e8b47566);
}
.relatio-clock .relatio-dot--second {
  opacity: .19;
  transition: opacity 120ms ease, fill 120ms ease;
}
.relatio-clock .relatio-dot--second.is-current {
  fill: var(--relatio-second);
  opacity: 1;
  filter: drop-shadow(0 0 4px #dceeff88);
}
.relatio-clock .relatio-dot--second.is-trail-1 { fill: var(--relatio-second); opacity: .35; }
.relatio-clock .relatio-dot--second.is-trail-2 { fill: var(--relatio-second); opacity: .12; }
.relatio-clock .relatio-dot--second.is-trail-3 { fill: var(--relatio-second); opacity: .04; }
.relatio-clock[data-seconds="false"] .relatio-seconds { visibility: hidden; }
.relatio-clock .relatio-clock__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--relatio-hour);
  font: 300 clamp(20px, 5vw, 48px)/1 ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}
@media (prefers-reduced-motion: reduce) {
  .relatio-clock .relatio-dot,
  .relatio-clock svg.relatio-clock__dial { transition: none; }
}