/* css.slopped.site exhibit: A clock that can’t tell the time. From css/exhibits/clock.mjs. */
.x-clock .clock { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 30px 44px; }
.x-clock .face { position: relative; width: min(260px, 70vw); aspect-ratio: 1; border-radius: 50%; border: 8px solid #b88a2e;
  background: radial-gradient(circle, transparent 0 63%, var(--ink) 63.5% 65%, transparent 65.5%),
    repeating-conic-gradient(var(--ink) 0 .6deg, transparent .6deg 6deg) content-box,
    radial-gradient(circle, #fbf9f3 0 70%, #e9e2cf); box-shadow: inset 0 0 0 3px #6b4e14, 0 10px 30px rgb(0 0 0 / .2); }
.x-clock .face::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: repeating-conic-gradient(var(--ink) 0 1.6deg, transparent 1.6deg 30deg); mask: radial-gradient(circle, transparent 0 86%, #000 86.5%); }
.x-clock .hand { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; border-radius: 4px; background: #171815; translate: -50% 0; }
.x-clock .hh { width: 8px; height: 26%; }
.x-clock .mm { width: 5px; height: 38%; }
.x-clock .ss { width: 2px; height: 42%; background: #b0301a; }
.x-clock .pin { position: absolute; inset: calc(50% - 7px); border-radius: 50%; background: #b88a2e; }
.x-clock .digital { margin: 0; font: 1000 clamp(40px, 7vw, 64px)/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -2px; }
.x-clock .caption { max-width: 30ch; margin: 10px 0 16px; color: var(--muted); }
.x-clock .toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; cursor: pointer; }
.x-clock .toggle input { width: 22px; height: 22px; accent-color: var(--ink); }
.x-clock .why { color: var(--muted); font-weight: 400; font-size: 14px; }
.x-clock .go { display: none; }
/* key */
@property --h { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --m { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --s { syntax: "<integer>"; inherits: true; initial-value: 0; }
@keyframes hours { to { --h: 24; } }
@keyframes minutes { to { --m: 60; } }
@keyframes seconds { to { --s: 60; } }

.x-clock .clock {
  animation: hours 86400s steps(24) infinite, minutes 3600s steps(60) infinite, seconds 60s steps(60) infinite;
}
/* the hands turn by the numbers */
.x-clock .hh { rotate: calc(var(--h) * 30deg + var(--m) * .5deg); }
.x-clock .mm { rotate: calc(var(--m) * 6deg + var(--s) * .1deg); }
.x-clock .ss { rotate: calc(var(--s) * 6deg); }
/* and counters write them out */
.x-clock .digital { counter-reset: h var(--h) m var(--m) s var(--s); }
.x-clock .digital::after {
  content: counter(h, decimal-leading-zero) ":" counter(m, decimal-leading-zero) ":" counter(s, decimal-leading-zero);
}
/* stopping it is a checkbox */
.x-clock .clock:has(#clock-stop:checked) { animation-play-state: paused; }
/* /key */
@media (prefers-reduced-motion: reduce) {
  .x-clock .clock { animation-play-state: paused; }
  .x-clock .clock:has(#clock-go:checked) { animation-play-state: running; }
  .x-clock .stop { display: none; }
  .x-clock .go { display: flex; }
}

/* live support notes (built from css/exhibits.js) */
.sup-counters .sup-no { display: none; }
@supports not (counter-increment: a) { .sup-counters .sup-yes { display: none; } .sup-counters .sup-no { display: inline; } .sup-counters { --sup: var(--no); } }