:root {
  color-scheme: dark;
  font-family: "Noto Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --accent: #ff6258;
  --accent-rgb: 255, 98, 88;
  --bg: transparent;
  --text: #f5f7fa;
}
* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background: var(--bg); color: var(--text); }
.clock-app { width: 100%; height: 100%; min-height: 100svh; display: grid; place-items: center; overflow: hidden; position: relative; isolation: isolate; background: #080b10; }
.clock-app[data-accent="ice"] { --accent: #66d7ff; --accent-rgb: 102, 215, 255; }
.clock-app[data-accent="amber"] { --accent: #ffbe62; --accent-rgb: 255, 190, 98; }
.clock-stage { width: 100%; height: 100%; display: grid; place-items: center; }
.clock-device { width: 100%; height: 100%; display: grid; place-items: center; }
.clock-face { --ring-size: min(78vmin, 760px); --ring-radius: calc(var(--ring-size) / 2 - 14px); width: var(--ring-size); height: var(--ring-size); max-width: 94vw; max-height: 94vh; position: relative; display: grid; place-items: center; }
.ring-track { position: absolute; inset: 14px; border: 1px solid rgba(169,185,204,.1); border-radius: 50%; }
.seconds-ring { position: absolute; inset: 0; border-radius: 50%; }
.second-led { position: absolute; left: 50%; top: 50%; width: 6px; height: clamp(12px, 1.5vmin, 18px); border-radius: 8px; background: rgba(190,202,218,.58); opacity: 1; transform: rotate(var(--angle)) translateY(calc(var(--ring-radius) * -1)); transform-origin: 0 0; transition: background-color .14s, opacity .14s; }
.second-led:nth-child(5n + 1) { width: 7px; height: 21px; background: rgba(222,230,240,.88); }
.second-led.is-past { background: rgba(var(--accent-rgb), .78); opacity: 1; }
.second-led.is-active { width: 8px; height: 24px; background: var(--accent); opacity: 1; }
.readout { z-index: 1; width: 90%; display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2.6vmin, 24px); text-align: center; }
.date-line { color: #aab5c2; font-size: clamp(13px, 2vmin, 18px); font-weight: 500; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; }
.time-line { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .08em; white-space: nowrap; font-size: clamp(68px, 15vmin, 164px); line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .015em; color: var(--text); }
.time-main { display: block; letter-spacing: .015em; }
.time-seconds { display: block; color: var(--accent); font-size: .45em; line-height: 1; letter-spacing: .015em; }
.clock-face[data-show-seconds="false"] .time-seconds { display: none; }
.clock-face[data-ring="off"] .seconds-ring, .clock-face[data-ring="off"] .ring-track { opacity: 0; }
@media (max-width: 500px) { .clock-face { --ring-size: min(88vw, 76vh); }.ring-track { inset: 10px; }.second-led { width: 4px; }.second-led:nth-child(5n + 1) { width: 5px; }.second-led.is-active { width: 6px; }.time-line { font-size: clamp(64px, 18vmin, 118px); } }
@media (max-height: 480px) { .clock-face { --ring-size: min(90vh, 84vw); }.time-line { font-size: min(16vh, 100px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }