:root {
  color-scheme: dark;
  --blue: #0784ff;
  --red: #ff2d3f;
  --text: #f5f8ff;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 13% 8%, rgba(0, 132, 255, 0.15), transparent 31%),
    radial-gradient(circle at 82% 20%, rgba(46, 219, 116, 0.07), transparent 27%),
    linear-gradient(135deg, #071622 0%, #06111b 48%, #071621 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://DG.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.app-shell {
  display: grid;
  justify-items: center;
  gap: clamp(33px, calc(3vh + 15px), 43px);
}

.clock {
  position: relative;
  width: min(76vw, calc(100dvh - 150px), 520px);
  aspect-ratio: 1;
  border: 1px solid rgba(120, 174, 214, 0.5);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(20, 52, 75, 0.92), rgba(5, 18, 29, 0.98) 58%, #020b12 100%);
  box-shadow:
    0 0 0 10px rgba(0, 132, 255, 0.035),
    0 0 0 11px rgba(120, 174, 214, 0.14),
    0 30px 65px rgba(0, 0, 0, 0.55),
    inset 0 0 45px rgba(0, 0, 0, 0.72),
    inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

.clock-glow {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 45%, rgba(0, 132, 255, 0.05) 70%, transparent 72%);
}

.tick {
  position: absolute;
  inset: 0;
  transform-origin: center;
}

.tick::before {
  content: "";
  position: absolute;
  top: 4%;
  left: 50%;
  width: 2px;
  height: 9px;
  border-radius: 2px;
  background: rgba(157, 170, 189, 0.58);
  transform: translateX(-50%);
}

.tick.hour-tick::before {
  width: 4px;
  height: 19px;
  background: var(--text);
  box-shadow: 0 0 8px rgba(7, 132, 255, 0.45);
}

.hand {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 99px;
  transform-origin: 0 50%;
  will-change: transform;
}

.hour {
  z-index: 6;
  width: 26%;
  height: 9px;
  margin-top: -4.5px;
  background: linear-gradient(90deg, #f5f8ff, #b7c7d8);
  box-shadow: 0 0 10px rgba(215, 222, 235, 0.15);
}

.minute {
  z-index: 7;
  width: 36%;
  height: 6px;
  margin-top: -3px;
  background: linear-gradient(90deg, #f5f8ff, #b7c7d8);
}

.second {
  z-index: 8;
  width: 39%;
  height: 2px;
  margin-top: -1px;
  background: var(--red);
  box-shadow: 0 0 9px rgba(255, 45, 63, 0.8);
}

.second::before {
  content: "";
  position: absolute;
  right: calc(100% - 4px);
  top: 0;
  width: 12%;
  height: 2px;
  background: var(--red);
}

.center {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 17px;
  border: 4px solid #06111b;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 1px rgba(103, 181, 255, 0.8), 0 0 14px rgba(7, 132, 255, 0.7);
  transform: translate(-50%, -50%);
}


.dial-day {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 20%;
  color: var(--text);
  font-size: clamp(24px, 7.2%, 36px);
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  line-height: 1;
  text-shadow: 0 0 10px rgba(7, 132, 255, 0.4);
  transform: translateX(-50%);
}

@media (max-width: 480px) {
  .app-shell { gap: 35px; }
  .clock { width: min(82vw, calc(100dvh - 135px)); }
  .tick::before { height: 7px; }
  .tick.hour-tick::before { height: 14px; }
  .hour { height: 7px; margin-top: -3.5px; }
  .minute { height: 5px; margin-top: -2.5px; }
}