:root[data-design="compact-analog"] {
  --page-background: linear-gradient(180deg, var(--bg), var(--bg-deep));
  --screen-glow-background: radial-gradient(circle at 50% 45%, transparent 42%, oklch(0.09 0.01 calc(50 + var(--bg-hue-shift)) / 0.62) 100%);
}

.compact-analog {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  block-size: 100%;
  min-block-size: 0;
}

.compact-analog-card {
  position: relative;
  inline-size: min(96vw, 96vh);
  inline-size: min(100cqi, 100cqb);
  max-inline-size: 46rem;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--accent-dim) 22%, transparent);
  border-radius: clamp(1.2rem, 3.6cqi, 2.3rem);
  background: linear-gradient(
    145deg,
    oklch(calc(0.205 * (1 - var(--bg-black))) 0.012 calc(60 + var(--bg-hue-shift))),
    oklch(calc(0.175 * (1 - var(--bg-black))) 0.009 calc(56 + var(--bg-hue-shift)))
  );
  box-shadow:
    0 0 0 1px var(--accent-glow),
    0 0 1.8rem var(--accent-glow),
    0 1.2rem 2.8rem oklch(0.025 0.006 58 / 0.42),
    inset 0 1px 0 oklch(0.9 0.02 75 / 0.035),
    inset 0 -1px 0 oklch(0.08 0.004 55 / 0.5);
}

.compact-analog-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 1.4rem var(--accent-glow);
}

.compact-analog-face {
  position: absolute;
  top: 5.5%;
  left: 5.5%;
  inline-size: 89%;
  block-size: 89%;
  overflow: visible;
}

.compact-analog-tick {
  stroke: oklch(0.72 0.012 72 / 0.38);
  stroke-linecap: round;
  stroke-width: 1.25;
}

.compact-analog-tick.is-hour {
  stroke: oklch(0.85 0.018 75 / 0.86);
  stroke-width: 2.1;
}

.compact-analog-hand {
  stroke-linecap: round;
  filter: drop-shadow(0 2px 1px oklch(0.02 0.004 54 / 0.8));
}

.compact-analog-hour {
  stroke: oklch(0.9 0.012 73);
  stroke-width: 7.5;
}

.compact-analog-minute {
  stroke: oklch(0.94 0.012 74);
  stroke-width: 6.5;
}

.compact-analog-second {
  stroke: var(--accent);
  stroke-width: 2.4;
}

.compact-analog-pivot {
  fill: var(--accent);
  stroke: oklch(0.25 0.02 48);
  stroke-width: 1.5;
}

.compact-analog-readout {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(3rem, 9cqi, 5rem);
  inline-size: 72%;
  margin: 0;
  overflow: hidden;
  color: oklch(0.87 0.014 75 / 0.95);
  font-family: var(--font-copy);
  font-size: clamp(0.64rem, 2.2cqi, 1.15rem);
  font-weight: 650;
  letter-spacing: 0.06em;
  line-height: 1;
  text-shadow: 0 1px 2px oklch(0.04 0.003 55 / 0.9);
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

#compactAnalogDay {
  text-align: end;
}

#compactAnalogTime {
  text-align: start;
}

.compact-analog-readout-divider {
  display: none;
}

.compact-analog-location {
  display: none;
  position: absolute;
  z-index: 1;
  right: 12%;
  bottom: 5%;
  left: 12%;
  margin: 0;
  overflow: hidden;
  color: oklch(0.88 0.016 76 / 0.96);
  font-family: var(--font-copy);
  font-size: clamp(0.8rem, 2.7cqi, 1.35rem);
  font-weight: 560;
  letter-spacing: 0.015em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@container clock-stage (max-width: 23rem) {
  .compact-analog-card {
    inline-size: min(94cqi, 94cqb);
  }

  .compact-analog-readout {
    font-size: clamp(0.58rem, 3.35cqi, 0.82rem);
  }

  .compact-analog-location {
    font-size: clamp(0.7rem, 3.9cqi, 0.92rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .compact-analog-hand {
    filter: none;
  }
}