:root {
  --theme-background: #14233c;
  --theme-top: #080f23;
  --theme-bottom: #0c172c;
  --theme-glow: 20, 32, 43;
  --theme-accent: 181, 168, 141;
  --text-primary: rgba(250, 252, 255, 0.96);
  --text-secondary: #e1e9f2;
  --text-muted: #bdccdd;
  --daylight: 0;
  --sun-opacity: 0;
  --moon-opacity: 1;
  --sun-core: 255, 248, 200;
  --sun-edge: 255, 232, 154;
  --sun-motion: paused;
  color-scheme: dark;
  font-family: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  color: var(--text-primary);
  background: var(--theme-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 280px; min-height: 100%; }
body {
  position: relative;
  margin: 0;
  min-width: 280px;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 92% 9%, rgba(var(--theme-glow), 0.07), transparent 26%),
    linear-gradient(180deg, var(--theme-top) 0%, var(--theme-background) 46%, var(--theme-bottom) 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 35%, #02030755 100%);
  opacity: calc(0.3 * (1 - var(--daylight)));
}
#starfield { position: fixed; inset: 0; display: block; width: 100%; height: 100%; }
.sun {
  position: fixed;
  z-index: 1;
  top: max(54px, 6vh);
  right: max(28px, 6vw);
  width: clamp(56px, 5.3vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: var(--sun-opacity);
  background: radial-gradient(circle at 44% 40%, rgb(var(--sun-core)) 0%, rgb(var(--sun-edge)) 52%, rgba(var(--sun-edge), 0.86) 65%, rgba(var(--sun-edge), 0.32) 72%, rgba(var(--sun-edge), 0) 78%);
}
.sun::before {
  content: "";
  position: absolute;
  inset: -230%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--sun-edge), 0.2) 0%, rgba(var(--sun-edge), 0.1) 22%, rgba(var(--sun-edge), 0.035) 44%, rgba(var(--sun-edge), 0) 70%);
  animation: sunlight-breathe 10s ease-in-out infinite;
  animation-play-state: var(--sun-motion);
}
.sun::after {
  content: "";
  position: absolute;
  inset: -65%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 12% 34% at 44% 26%, rgba(var(--sun-core), 0.3), transparent),
    radial-gradient(ellipse 30% 10% at 73% 46%, rgba(var(--sun-core), 0.24), transparent),
    radial-gradient(ellipse 14% 27% at 56% 74%, rgba(var(--sun-core), 0.22), transparent),
    radial-gradient(ellipse 23% 13% at 24% 60%, rgba(var(--sun-core), 0.18), transparent),
    radial-gradient(ellipse 18% 21% at 71% 29%, rgba(var(--sun-core), 0.16), transparent);
  mask-image: radial-gradient(circle, transparent 20%, #000 33%, #0008 48%, transparent 70%);
  filter: blur(5px);
  opacity: 0.4;
  animation: sunlight-turn 80s linear infinite;
  animation-play-state: var(--sun-motion);
}
.moon {
  position: fixed;
  z-index: 1;
  top: max(54px, 6vh);
  right: max(28px, 6vw);
  width: clamp(46px, 4.3vw, 62px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: var(--moon-opacity);
  background: radial-gradient(circle at 38% 32%, #f3f4e9, #cad6e5 62%, #a3b6ce);
  box-shadow: 0 0 30px #c5dcff1f, 0 0 90px #b3d0ff0d;
}
.moon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 65% 64%, #718bad22 0 9%, transparent 13%), radial-gradient(circle at 32% 47%, #718bad18 0 13%, transparent 18%), radial-gradient(circle at 58% 26%, #718bad14 0 7%, transparent 11%);
}
.page-header {
  position: absolute;
  z-index: 2;
  top: max(32px, env(safe-area-inset-top));
  left: max(40px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 10px;
  letter-spacing: 0.24em;
  pointer-events: none;
}
.brand-mark { color: rgb(var(--theme-accent)); font-size: 24px; line-height: 1; }
.page-shell {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  padding: max(100px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(120px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  pointer-events: none;
}
.clock-panel {
  width: 100%;
  max-width: 900px;
  text-align: center;
  animation: panel-enter 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.clock-label {
  margin: 0 0 clamp(28px, 5vw, 48px);
  color: rgb(var(--theme-accent));
  font-size: clamp(8px, 1.8vw, 10px);
  font-weight: 400;
  letter-spacing: 0.34em;
  opacity: 0.76;
}
.clock-time {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(18px, 3.4vw, 40px);
  font-size: clamp(64px, 16vw, 160px);
  font-weight: 200;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.055em;
  white-space: nowrap;
  text-shadow: 0 0 60px #c9dfff0c;
}
.seconds-group {
  display: inline-flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  align-self: flex-end;
  padding-bottom: 0.12em;
  color: var(--text-secondary);
  font-size: 0.235em;
  opacity: 0.82;
  font-weight: 300;
  letter-spacing: 0.02em;
}
.seconds-label { color: rgb(var(--theme-accent)); font-size: 8px; letter-spacing: 0.18em; }
.clock-divider { width: 40px; height: 1px; margin: clamp(30px, 5vw, 46px) auto 24px; background: rgba(var(--theme-accent), 0.4); }
.clock-date { color: var(--text-secondary); font-size: clamp(12px, 2vw, 14px); line-height: 1.8; letter-spacing: 0.16em; }
.clock-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.16em;
}
.zone-dot { width: 4px; height: 4px; border-radius: 50%; background: rgb(var(--theme-accent)); box-shadow: 0 0 8px rgba(var(--theme-accent), 0.2); }
.page-footer {
  position: absolute;
  z-index: 2;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(30px, env(safe-area-inset-bottom));
  left: max(24px, env(safe-area-inset-left));
  color: var(--text-muted);
  font-size: 10px;
  opacity: 0.65;
  line-height: 1.8;
  letter-spacing: 0.08em;
  text-align: center;
  pointer-events: none;
  animation: footer-enter 2s ease-out both;
}
.noscript-message { position: fixed; z-index: 5; top: 70px; left: 50%; width: min(90vw, 520px); transform: translateX(-50%); padding: 12px; color: #dbe8f8; background: #101923; font-size: 12px; text-align: center; }
@keyframes panel-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes footer-enter { from { opacity: 0; } to { opacity: 0.65; } }
@keyframes sunlight-breathe {
  0%, 100% { transform: scale(0.92); opacity: 0.65; }
  50% { transform: scale(1.12); opacity: 1; }
}
@keyframes sunlight-turn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (max-width: 520px) {
  .page-header { top: max(24px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left)); font-size: 9px; }
  .clock-date { letter-spacing: 0.09em; }
  .seconds-group { gap: 8px; }
  .seconds-label { font-size: 7px; }
  .page-footer { font-size: 9px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .sun { top: 28px; right: 7vw; width: 48px; }
  .moon { top: 28px; right: 7vw; width: 42px; }
  .page-shell { padding-top: 75px; padding-bottom: 70px; }
  .clock-label { margin-bottom: 18px; }
  .clock-time { font-size: clamp(60px, 20vh, 100px); }
  .clock-divider { margin: 20px auto 12px; }
  .clock-zone { margin-top: 8px; }
  .page-footer { bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .clock-panel, .page-footer, .sun::before, .sun::after { animation: none; }
}