/* The watch: a stack of one HTML disc (sunburst dial), one ring (bezel) and four SVG layers. */
.watch {
  position: relative;
  width: min(92vw, 56vh, 640px);
  aspect-ratio: 10 / 11;
  margin: 0 auto;
  --lume: #EDE8D0;
  --lume-glow: rgba(190, 236, 190, 0);
  --steel-hi: #F8F8F8;
  --steel-mid: #BCBFC2;
  --steel-lo: #72767A;
  --steel-deep: #35383C;
  --dial-hi: #F7F7F5;
  --dial-mid: #DBDCD9;
  --dial-lo: #B4B6B4;
  --dial-text: #2A2D31;
  --rehaut-a: #464A50;
  --rehaut-b: #1D2024;
  --rehaut-text: #E9E8E3;
  --date-disc: #F7F7F4;
  --date-text: #1E2124;
  --sec-hand: #2B2E32;
  --watch-shadow: rgba(20, 22, 26, 0.32);
  --sheen: 0.30;
}
[data-theme="dark"] .watch {
  --lume: #E9E4CB;
  --lume-glow: rgba(180, 236, 190, 0.55);
  --steel-hi: #E4E5E7;
  --steel-mid: #9EA2A6;
  --steel-lo: #585C61;
  --steel-deep: #1F2124;
  --dial-hi: #4E5157;
  --dial-mid: #2C2F33;
  --dial-lo: #16181B;
  --dial-text: #E8E6E1;
  --rehaut-a: #33373C;
  --rehaut-b: #0F1113;
  --rehaut-text: #E3E2DD;
  --date-disc: #0F1113;
  --date-text: #E8E6E1;
  --sec-hand: #ECEDEF;
  --watch-shadow: rgba(0, 0, 0, 0.72);
  --sheen: 0.24;
}

.w-layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.watch-shadow {
  position: absolute; left: 7%; top: 8%; width: 86%; height: 84%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, var(--watch-shadow) 0%, rgba(0, 0, 0, 0) 68%);
  filter: blur(10px);
  transform: translate(2.5%, 4%);
}
/* Bezel: circular brushing catches light in lobes along the light direction (upper left, lower right) */
.w-bezel {
  position: absolute; left: 10%; top: 13.6364%; width: 80%; height: 72.7273%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle closest-side at 50% 50%, rgba(255, 255, 255, 0.05) 0 0.5%, rgba(0, 0, 0, 0.05) 0.5% 1%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, 0.2) 100%),
    conic-gradient(from 0deg at 50% 50%, var(--steel-mid) 0deg, var(--steel-lo) 45deg, var(--steel-mid) 95deg, var(--steel-hi) 135deg, var(--steel-mid) 180deg, var(--steel-lo) 225deg, var(--steel-mid) 275deg, var(--steel-hi) 315deg, var(--steel-mid) 360deg);
  -webkit-mask: radial-gradient(circle closest-side at 50% 50%, transparent 0 88.2%, #000 88.7%);
  mask: radial-gradient(circle closest-side at 50% 50%, transparent 0 88.2%, #000 88.7%);
}
/* Dial: radial (sunburst) brushing catches light in lobes across the light direction */
.w-dial {
  position: absolute; left: 17%; top: 20%; width: 66%; height: 60%;
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side at 50% 50%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 58%, rgba(0, 0, 0, 0.16) 100%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 100%),
    conic-gradient(from 0deg at 50% 50%, var(--dial-mid) 0deg, var(--dial-hi) 45deg, var(--dial-mid) 95deg, var(--dial-lo) 135deg, var(--dial-mid) 180deg, var(--dial-hi) 225deg, var(--dial-mid) 275deg, var(--dial-lo) 315deg, var(--dial-mid) 360deg);
}

/* Gradient stops and fills that follow the theme */
.s-steel-hi { stop-color: var(--steel-hi); }
.s-steel-mid { stop-color: var(--steel-mid); }
.s-steel-lo { stop-color: var(--steel-lo); }
.s-steel-deep { stop-color: var(--steel-deep); }
.s-rehaut-a { stop-color: var(--rehaut-a); }
.s-rehaut-b { stop-color: var(--rehaut-b); }
.lume { fill: var(--lume); }
.lume-glow { fill: var(--lume-glow); }
.tick { fill: var(--dial-text); fill-opacity: 0.88; }
.gmt-num { font: 600 21px var(--sans); fill: var(--rehaut-text); }
.gmt-dot { fill: var(--rehaut-text); }
.w-wordmark { font: 500 33px var(--display); letter-spacing: 0.08em; fill: var(--dial-text); }
.date-disc { fill: var(--date-disc); }
.date-text { font: 600 40px var(--sans); fill: var(--date-text); }
.sec { fill: var(--sec-hand); }
.sec-hub { fill: var(--sec-hand); }
.gmt-head { fill: var(--signal); stroke: rgba(0, 0, 0, 0.35); stroke-width: 1.5; }
.sheen { opacity: var(--sheen); }
.is-hidden { display: none; }
.watch.is-syncing .sheen { animation: shimmer 2.4s ease-in-out infinite; }
@keyframes shimmer { 0%, 100% { opacity: var(--sheen); } 50% { opacity: calc(var(--sheen) * 0.55); } }
@media (prefers-reduced-motion: reduce) { .watch.is-syncing .sheen { animation: none; } }