:root {
  --amt-bg: #f4f2ec;
  --amt-frame: #101012;
  --amt-face: #ffffff;
  --amt-hand: #101012;
  --amt-face-ring: rgba(0, 0, 0, 0.1);
}
body[data-theme="dark"] {
  --amt-bg: #0b0b0c;
  --amt-frame: #f0efe9;
  --amt-face: #17171a;
  --amt-hand: #f0efe9;
  --amt-face-ring: rgba(255, 255, 255, 0.12);
}
body[data-frame="none"]  #container { border-color: transparent; }
body[data-frame="thin"]  #container { border-width: 2px; }

html, body {
  margin: 0;
  min-height: 100vh;
  background: var(--amt-bg);
  transition: background .4s;
}

#container {
  position: relative;
  width: 983px;
  height: 368px;
  margin: 40px auto;
  border: 8px solid var(--amt-frame);
  transition: border-color .4s, border-width .3s;
  max-width: calc(100vw - 24px);
}

svg {
  position: absolute;
  width: 40px;
  height: 40px;
  fill: var(--amt-face);
  stroke: var(--amt-hand);
  stroke-width: 1;
  transform: rotate(-90deg);
  transition: fill .4s, stroke .4s;
}
svg circle {
  stroke: var(--amt-face-ring);
}
svg .minute,
svg .hour {
  stroke-width: 2;
  transform: translate(20px, 20px) rotate(0deg);
  -webkit-transition: transform 3.5s ease-in-out;
  transition: transform 3.5s ease-in-out;
}
svg .minute { transform: translate(20px, 20px) rotate(-90deg); }
svg .hour   { transform: translate(20px, 20px) rotate(90deg); }

/* ===== settings ===== */
#amt-settings {
  position: fixed;
  top: 14px; right: 14px;
  display: flex; gap: 8px;
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  z-index: 10;
}
#amt-settings button {
  padding: 7px 12px;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  font-family: inherit;
  background: transparent;
  color: var(--amt-frame);
  border: 1px solid var(--amt-frame);
  cursor: pointer;
  opacity: .55;
  transition: opacity .2s, background .2s, color .2s;
}
#amt-settings button:hover { opacity: 1; }
#amt-settings button.on {
  opacity: 1;
  background: var(--amt-frame);
  color: var(--amt-bg);
}