:root {
  --bg: #ffffff;
  --ink: #3f3f3f;
  --beige: #c4a35a;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  display: grid;
  place-items: center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.wrap {
  width: min(86vw, 520px);
}

.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}

svg {
  width: 100%;
  height: 100%;
  display: block;
}

.title {
  margin: -160px 0 0;
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.title .chrono {
  color: var(--ink);
}

.title .mill {
  color: var(--beige);
}

.caption {
  margin-top: 8px;
  text-align: center;
  color: #444;
  font-size: 14px;
  line-height: 1.4;
}

.caption .tz {
  opacity: 0.8;
  font-size: 12px;
}

.hidden {
  visibility: hidden !important;
}