:root {
  color-scheme: dark;
  font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  background: #050505;
  color: #eeeae1;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  margin: 0;
  background: #050505;
  overscroll-behavior: none;
}

html { min-height: 100%; }

body {
  min-height: calc(100dvh + 96px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

body::-webkit-scrollbar { display: none; }

body {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: pan-y;
}

.clock {
  position: fixed;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  height: 100dvh;
  place-items: center;
  padding: max(4vw, env(safe-area-inset-top)) max(4vw, env(safe-area-inset-right))
    max(4vw, env(safe-area-inset-bottom)) max(4vw, env(safe-area-inset-left));
  background:
    radial-gradient(ellipse at 50% 44%, #171715 0%, #090909 42%, #050505 72%);
}

time {
  display: grid;
  grid-template-columns: repeat(2, 1fr) 0.2fr repeat(2, 1fr);
  align-items: center;
  width: min(92vw, 148vh);
  gap: clamp(5px, 0.85vw, 18px);
}

.digit {
  position: relative;
  display: grid;
  aspect-ratio: 0.7;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 5%);
  border-radius: clamp(8px, 1.15vw, 20px);
  background:
    linear-gradient(to bottom, #171715 0%, #111110 49.45%, #050505 49.6%, #050505 50.4%, #151513 50.55%, #10100f 100%);
  box-shadow:
    0 1.8vw 4vw rgb(0 0 0 / 55%),
    inset 0 1px 0 rgb(255 255 255 / 4%),
    inset 0 -1px 0 rgb(0 0 0 / 85%);
  color: #eeeae1;
  font-size: min(29vw, 46vh);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-stretch: condensed;
  letter-spacing: -0.09em;
  line-height: 1;
  text-indent: -0.09em;
  text-shadow: 0 2px 1px #000, 0 0 0.18em rgb(255 247 225 / 4%);
}

.digit::before,
.digit::after {
  position: absolute;
  top: 50%;
  width: 3.5%;
  height: 3.2%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #050505;
  box-shadow: inset 0 1px 1px #000;
  content: "";
}

.digit::before { left: -1.6%; }
.digit::after { right: -1.6%; }

.colon {
  display: grid;
  height: 35%;
  align-content: space-between;
  justify-content: center;
}

.colon i {
  width: clamp(7px, 1.15vw, 18px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #d75b31;
  box-shadow: 0 0 1.2em rgb(215 91 49 / 26%);
}

.digit.flip { animation: settle 380ms cubic-bezier(.2,.8,.2,1); }

@keyframes settle {
  0% { transform: perspective(900px) rotateX(-9deg); filter: brightness(.65); }
  55% { transform: perspective(900px) rotateX(2deg); }
  100% { transform: perspective(900px) rotateX(0); filter: brightness(1); }
}

@media (orientation: portrait) {
  time {
    width: min(94vw, 76vh);
    gap: clamp(4px, 0.9vw, 10px);
  }

  .digit { font-size: min(29vw, 23vh); }
}

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