• Updated 22 Oct, 10:10 UTC
  • Next run 23 Oct, 05:17 UTCNext 23 Oct 05:17
  • Last 7 days: 7 new models, 157 runs7 d: 7 models, 157 runs
Network offOpen alone (new tab)

Run details

Model
unbiased/pareto-26.10
Route
OpenRouter API, one user message
Served by
Unbiased
Reasoning
provider default
Limits
60 min · 131,072 output tokens
Date
22 Oct 2026
Time
2 min 22 s
Size
24 kB
Tokens
82 in, 8,605 out
List price
$0.028 ($0.8 in / $3.2 out per M)
Paid
$0.028

Raw files: output · meta.json

Exact prompt

Draw a mechanical wristwatch that shows the current local time, with a sweeping seconds hand and a date window. Make it look expensive.

It must be one complete, self-contained HTML file: inline all CSS and JavaScript, and make no network requests of any kind (no CDNs, web fonts or remote images). Reply with the file in a single ```html code block.

Source

24 kB 474 lines Raw

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#151614">
<title>VALE — Time, beautifully kept.</title>
<style>
  :root {
    color-scheme: dark;
    --background: #151614;
    --ivory: #eee9dc;
    --muted: #939387;
    --gold: #c5ae7b;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--background);
    color: var(--ivory);
    font-family: Arial, Helvetica, sans-serif;
    min-height: 100svh;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 67% 43%, #72644818, transparent 53%),
      linear-gradient(115deg, #ffffff03, transparent 40%, #00000030);
  }
  .page { max-width: 1600px; margin: auto; padding: 34px 5.2vw 25px; position: relative; }
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 27px;
    border-bottom: 1px solid #ffffff12;
  }
  .wordmark { font: 27px Georgia, serif; letter-spacing: .32em; }
  .wordmark small {
    display: block; font: 7px Arial, sans-serif;
    letter-spacing: .39em; color: var(--muted); margin-top: 7px;
  }
  .header-note { font-size: 9px; letter-spacing: .23em; color: #a6a698; }
  .header-note span { color: var(--gold); margin-right: 13px; }
  main {
    min-height: 680px;
    height: min(790px, calc(100svh - 185px));
    display: grid;
    grid-template-columns: 34% 66%;
    align-items: center;
    position: relative;
  }
  .intro { padding-bottom: 35px; z-index: 1; }
  .eyebrow {
    color: var(--gold); font-size: 9px; letter-spacing: .25em;
    text-transform: uppercase; display: flex; align-items: center; gap: 14px;
  }
  .eyebrow::before { content: ""; width: 29px; height: 1px; background: var(--gold); }
  h1 {
    font: normal clamp(46px, 4.7vw, 76px)/1.08 Georgia, "Times New Roman", serif;
    letter-spacing: -.045em;
    margin: 29px 0 25px;
  }
  h1 em { font-weight: normal; color: #c9c5b8; }
  .description {
    max-width: 255px; color: var(--muted); font-size: 12px;
    line-height: 1.95; letter-spacing: .015em;
  }
  button {
    margin-top: 35px; background: none; border: 1px solid #c5ae7b44;
    color: #d3c5a8; padding: 13px 17px; cursor: pointer;
    font: 9px Arial, sans-serif; letter-spacing: .15em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 12px; border-radius: 2px;
    transition: background .25s, border-color .25s;
  }
  button:hover { background: #c5ae7b0c; border-color: #c5ae7b99; }
  button:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
  button .dot { width: 6px; height: 6px; border: 1px solid #c5ae7b; border-radius: 50%; }
  button[aria-pressed="true"] .dot { background: #bdf5cd; box-shadow: 0 0 8px #bdf5cd; border-color: #bdf5cd; }
  .watch-stage {
    height: 100%; position: relative; display: flex; align-items: center; justify-content: center;
    min-width: 0;
  }
  .watch-stage::before {
    content: ""; position: absolute; width: 75%; aspect-ratio: 1;
    border-radius: 50%; background: #9b855b08; filter: blur(45px);
  }
  .watch { height: 100%; width: 100%; max-width: 710px; overflow: visible; position: relative; }
  .edition {
    position: absolute; right: -10px; top: 50%;
    writing-mode: vertical-rl; font-size: 8px; letter-spacing: .28em; color: #777a6d;
  }
  .lume { fill: #d9dbc5; transition: fill 1s, filter 1s; }
  .night .lume { fill: #bdf5cd; filter: url(#lume-glow); }
  .night #dial-shade { opacity: .5; }
  #dial-shade { opacity: 0; transition: opacity 1s; }
  footer {
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid #ffffff12; padding-top: 24px; gap: 25px;
  }
  .model { font: 16px Georgia, serif; letter-spacing: .025em; }
  .model span { display: block; margin-top: 7px; color: var(--muted); font: 8px Arial, sans-serif; letter-spacing: .19em; }
  .specs { display: flex; gap: 35px; }
  .spec { color: #c5c5b9; font-size: 10px; letter-spacing: .04em; }
  .spec span { display: block; font-size: 8px; letter-spacing: .15em; margin-bottom: 8px; color: #7f8376; }
  .live { text-align: right; }
  .live-time { font-size: 12px; letter-spacing: .13em; font-variant-numeric: tabular-nums; }
  .live-time::before { content: ""; display: inline-block; height: 4px; width: 4px; background: #b7c59a; border-radius: 50%; margin: 0 9px 2px 0; box-shadow: 0 0 7px #b7c59a33; }
  .zone { font-size: 8px; letter-spacing: .13em; margin-top: 8px; color: var(--muted); text-transform: uppercase; }
  @media (min-width: 1500px) { main { grid-template-columns: 38% 62%; } }
  @media (max-width: 800px) {
    .page { padding: 24px 6vw; }
    main { grid-template-columns: 30% 70%; min-height: 550px; height: 640px; }
    h1 { font-size: 42px; }
    .description { font-size: 11px; }
    .eyebrow { font-size: 8px; letter-spacing: .1em; }
    .eyebrow::before { width: 15px; }
    .edition { right: -6px; }
    .specs { gap: 20px; }
    .spec:last-child { display: none; }
  }
  @media (max-width: 580px) {
    header { padding-bottom: 20px; }
    .wordmark { font-size: 23px; }
    .header-note { font-size: 7px; letter-spacing: .12em; }
    main { display: flex; flex-direction: column; height: auto; min-height: 0; }
    .intro { text-align: center; padding: 37px 0 0; width: 100%; }
    .eyebrow { justify-content: center; font-size: 8px; letter-spacing: .2em; }
    .eyebrow::before { display: none; }
    h1 { font-size: 40px; margin: 15px 0 13px; }
    h1 br { display: none; }
    .description { max-width: 285px; margin: auto; font-size: 11px; line-height: 1.7; }
    button { margin-top: 20px; padding: 10px 13px; font-size: 8px; }
    .watch-stage { height: auto; width: calc(100% + 20px); aspect-ratio: 4 / 5; margin: -2px 0 5px; }
    .watch { height: 100%; }
    .edition { right: 0; font-size: 6px; }
    footer { flex-wrap: wrap; padding-top: 20px; gap: 23px; }
    .model { font-size: 15px; }
    .specs { order: 3; width: 100%; justify-content: space-between; padding-top: 18px; border-top: 1px solid #ffffff0c; }
    .spec:last-child { display: block; }
    .live-time { font-size: 10px; }
    .zone { font-size: 7px; max-width: 150px; line-height: 1.5; }
  }
</style>
</head>
<body>
<div class="page">
  <header>
    <div class="wordmark">VALE<small>INDEPENDENT HOROLOGY</small></div>
    <div class="header-note"><span>№ 01</span> THE PERPETUAL COLLECTION</div>
  </header>

  <main>
    <section class="intro">
      <div class="eyebrow">The art of passing time</div>
      <h1>Time,<br> <em>beautifully</em><br> kept.</h1>
      <p class="description">An open heart. An uninterrupted sweep.<br>A quiet expression of mechanical precision, set to your moment.</p>
      <button id="lume-button" type="button" aria-pressed="false"><span class="dot"></span><span id="lume-label">Illuminate dial</span></button>
    </section>

    <div class="watch-stage">
      <svg class="watch" viewBox="0 0 800 1000" role="img" aria-labelledby="watch-title watch-description">
        <title id="watch-title">VALE No. 01 automatic wristwatch</title>
        <desc id="watch-description">A champagne-gold mechanical wristwatch with a charcoal dial, exposed movement, sweeping seconds hand, and a local date window.</desc>
        <defs>
          <linearGradient id="leather" x1="0" x2="1">
            <stop stop-color="#100e0b"/><stop offset=".09" stop-color="#352c23"/>
            <stop offset=".3" stop-color="#29241d"/><stop offset=".6" stop-color="#211e19"/>
            <stop offset=".92" stop-color="#30281e"/><stop offset="1" stop-color="#0b0b09"/>
          </linearGradient>
          <pattern id="grain" width="40" height="33" patternUnits="userSpaceOnUse">
            <path d="M0 1Q20 7 40 1M0 32Q21 26 40 32M2 2Q8 15 2 32M38 2Q32 16 38 32" fill="none" stroke="#080806" stroke-width="1.8" opacity=".55"/>
            <path d="M4 4Q20 9 35 4M7 14l22 1M9 20l19 -1" fill="none" stroke="#8b7554" stroke-width=".6" opacity=".16"/>
          </pattern>
          <linearGradient id="metal" x1=".05" y1="0" x2=".95" y2="1">
            <stop stop-color="#5b4930"/><stop offset=".15" stop-color="#d0bc8f"/>
            <stop offset=".26" stop-color="#f5e4b7"/><stop offset=".37" stop-color="#a68b59"/>
            <stop offset=".53" stop-color="#625033"/><stop offset=".7" stop-color="#d4bd8a"/>
            <stop offset=".85" stop-color="#f6e7c1"/><stop offset="1" stop-color="#75603c"/>
          </linearGradient>
          <linearGradient id="bezel" x1="0" y1="0" x2="1" y2="1">
            <stop stop-color="#faf0d2"/><stop offset=".18" stop-color="#baa373"/>
            <stop offset=".42" stop-color="#77613b"/><stop offset=".6" stop-color="#e0cca0"/>
            <stop offset=".8" stop-color="#a88f5e"/><stop offset="1" stop-color="#eee0b8"/>
          </linearGradient>
          <linearGradient id="edge" x1="0" y1="0" x2="1" y2=".8">
            <stop stop-color="#8a724a"/><stop offset=".28" stop-color="#ffedc4"/>
            <stop offset=".5" stop-color="#4a3b26"/><stop offset=".77" stop-color="#c4a974"/><stop offset="1" stop-color="#635031"/>
          </linearGradient>
          <radialGradient id="dial" cx=".4" cy=".28" r=".85">
            <stop stop-color="#373b34"/><stop offset=".45" stop-color="#252a24"/>
            <stop offset=".8" stop-color="#171c18"/><stop offset="1" stop-color="#0d110e"/>
          </radialGradient>
          <radialGradient id="glass" cx=".3" cy=".12" r=".95">
            <stop stop-color="#ffffff" stop-opacity=".07"/><stop offset=".6" stop-color="#ffffff" stop-opacity="0"/><stop offset="1" stop-color="#000000" stop-opacity=".15"/>
          </radialGradient>
          <linearGradient id="hand" x1="0" y1="0" x2="1" y2="0">
            <stop stop-color="#6d5835"/><stop offset=".47" stop-color="#f6e6bc"/>
            <stop offset=".5" stop-color="#beaa7c"/><stop offset="1" stop-color="#8c744a"/>
          </linearGradient>
          <linearGradient id="date-frame" x1="0" y1="0" x2=".4" y2="1">
            <stop stop-color="#5b4e35"/><stop offset=".5" stop-color="#d1bd90"/><stop offset="1" stop-color="#f3e2b6"/>
          </linearGradient>
          <radialGradient id="opening">
            <stop stop-color="#272a23"/><stop offset=".8" stop-color="#121611"/><stop offset="1" stop-color="#030503"/>
          </radialGradient>
          <filter id="case-shadow" x="-40%" y="-30%" width="180%" height="170%">
            <feDropShadow dx="13" dy="25" stdDeviation="22" flood-color="#000" flood-opacity=".65"/>
          </filter>
          <filter id="hand-shadow" x="-100%" y="-40%" width="300%" height="200%">
            <feDropShadow dx="3" dy="5" stdDeviation="2.4" flood-opacity=".7"/>
          </filter>
          <filter id="lume-glow" x="-100%" y="-50%" width="300%" height="200%">
            <feGaussianBlur stdDeviation="2" result="blur"/>
            <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
          </filter>
          <clipPath id="heart-clip"><circle cx="400" cy="606" r="37"/></clipPath>
        </defs>

        <!-- Hand-stitched leather, with curved shoulders tucked into the case. -->
        <g filter="url(#case-shadow)">
          <path d="M306 -25H494L506 264H294Z M294 697H506L491 1030H309Z" fill="url(#leather)" stroke="#080907" stroke-width="3"/>
          <path d="M306 -25H494L506 264H294Z M294 697H506L491 1030H309Z" fill="url(#grain)"/>
          <g fill="none" stroke="#8a7350" stroke-width="1.7" stroke-dasharray="5 5" opacity=".5">
            <path d="M318 0L311 242M482 0L489 242M310 725L322 1000M490 725L478 1000"/>
          </g>
          <g fill="#090a08" stroke="#655039" stroke-width="1">
            <ellipse cx="400" cy="847" rx="4" ry="7"/><ellipse cx="400" cy="898" rx="4" ry="7"/><ellipse cx="400" cy="949" rx="4" ry="7"/>
          </g>

          <!-- Sculpted gold lugs. -->
          <g fill="url(#metal)" stroke="#665233" stroke-width="1.5">
            <path d="M278 317L288 223Q291 211 309 213L324 274Z"/>
            <path d="M476 274L491 213Q509 211 512 223L522 317Z"/>
            <path d="M278 643L288 737Q291 749 309 747L324 686Z"/>
            <path d="M476 686L491 747Q509 749 512 737L522 643Z"/>
          </g>
          <g fill="none" stroke="#f2dfb2" opacity=".5">
            <path d="M292 235L285 294M506 235L513 294M285 666L292 726M513 666L506 726"/>
          </g>

          <!-- Fluted winding crown. -->
          <rect x="632" y="461" width="26" height="38" rx="6" fill="url(#edge)"/>
          <rect x="650" y="453" width="30" height="54" rx="8" fill="url(#metal)" stroke="#6c5939" stroke-width="1.5"/>
          <g stroke="#4f3f27" stroke-width="2" opacity=".8">
            <path d="M657 456V504M662 454V506M667 454V506M672 456V504M677 460V500"/>
          </g>
          <circle cx="400" cy="480" r="245" fill="url(#edge)" stroke="#d0b887" stroke-width="1"/>
          <circle cx="400" cy="480" r="239" fill="url(#metal)" stroke="#433622" stroke-width="2"/>
          <circle cx="400" cy="480" r="228" fill="url(#bezel)" stroke="#f0ddb2" stroke-width="1"/>
          <circle cx="400" cy="480" r="217" fill="#0e120e" stroke="#54472f" stroke-width="3"/>
          <circle cx="400" cy="480" r="211" fill="url(#dial)" stroke="#d2bc8b" stroke-width="1"/>
        </g>

        <!-- Concentric dial machining and a fine outer chapter ring. -->
        <g fill="none" stroke="#d1c493" opacity=".045">
          <circle cx="400" cy="480" r="177"/><circle cx="400" cy="480" r="174"/>
          <circle cx="400" cy="480" r="171"/><circle cx="400" cy="480" r="168"/>
          <circle cx="400" cy="480" r="165"/><circle cx="400" cy="480" r="162"/>
          <circle cx="400" cy="480" r="159"/><circle cx="400" cy="480" r="156"/>
        </g>
        <circle id="dial-shade" cx="400" cy="480" r="210" fill="#000"/>
        <circle cx="400" cy="480" r="201" fill="none" stroke="#c9b984" stroke-width=".6" opacity=".35"/>
        <g id="minute-track"></g>
        <g id="hour-markers"></g>

        <g text-anchor="middle">
          <path d="M390 339L400 325L410 339L400 335Z" fill="none" stroke="#d2bd90" stroke-width="1.2"/>
          <text x="403" y="365" fill="#e5d5ae" font-family="Georgia,serif" font-size="24" letter-spacing="7">VALE</text>
          <text x="401" y="383" fill="#a9a68f" font-family="Arial,sans-serif" font-size="7" letter-spacing="3.2">AUTOMATIC</text>
          <text x="400" y="544" fill="#c4bd9f" font-family="Georgia,serif" font-size="12" font-style="italic" letter-spacing=".7">Open Heart</text>
          <text x="400" y="560" fill="#8f9580" font-family="Arial,sans-serif" font-size="6" letter-spacing="2">TWENTY-FOUR JEWELS</text>
        </g>

        <!-- Beveled instantaneous date aperture. -->
        <rect x="533" y="465" width="47" height="31" rx="1" fill="url(#date-frame)"/>
        <rect x="536" y="468" width="41" height="25" fill="#d9d4bf"/>
        <path d="M536 493V468H577" fill="none" stroke="#080c09" stroke-width="2.5"/>
        <text id="date-number" x="556.5" y="486.5" text-anchor="middle" font-family="Georgia,serif" font-size="18" fill="#25271f">1</text>

        <!-- An exposed, animated balance and gear train beneath the dial. -->
        <circle cx="400" cy="606" r="42" fill="url(#edge)" stroke="#1b1b13" stroke-width="1"/>
        <circle cx="400" cy="606" r="38" fill="url(#opening)" stroke="#d4be8c" stroke-width=".7"/>
        <g clip-path="url(#heart-clip)">
          <g id="gear-one"></g>
          <g id="gear-two"></g>
          <g id="balance">
            <circle cx="396" cy="611" r="25" fill="none" stroke="#bca169" stroke-width="3"/>
            <circle cx="396" cy="611" r="20" fill="none" stroke="#605a40" stroke-width="1"/>
            <g stroke="#ad9669" stroke-width="2">
              <path d="M396 586V636M371 611H421"/>
            </g>
            <g fill="none" stroke="#b8baa0" stroke-width=".65" opacity=".8">
              <circle cx="396" cy="611" r="15"/><circle cx="396" cy="611" r="12"/>
              <circle cx="396" cy="611" r="9"/><circle cx="396" cy="611" r="6"/>
            </g>
          </g>
          <path d="M363 590L386 596L421 631L434 625L401 590L367 581Z" fill="url(#metal)" stroke="#5b5036" stroke-width="1"/>
          <circle cx="397" cy="604" r="5.5" fill="#433d30" stroke="#decea7"/>
          <circle cx="397" cy="604" r="2.5" fill="#75304d" stroke="#c58d9d" stroke-width=".6"/>
          <g fill="#b4b7a7" stroke="#282c24">
            <circle cx="371" cy="587" r="3"/><circle cx="423" cy="626" r="3"/>
          </g>
          <path d="M369 587H373M421 626H425" stroke="#30392f" stroke-width="1"/>
        </g>
        <text x="400" y="658" text-anchor="middle" fill="#929580" font-family="Arial,sans-serif" font-size="5.5" letter-spacing="1.8">CALIBRE V · 01</text>
        <text x="400" y="679" text-anchor="middle" fill="#b0ad94" font-family="Arial,sans-serif" font-size="5" letter-spacing="1.3">PRECISION IN MOTION</text>

        <!-- Each hand rotates around the same central arbor. -->
        <g filter="url(#hand-shadow)">
          <g id="hour-hand">
            <path d="M395 501L390 459L394 385L400 354L406 385L410 459L405 501Z" fill="url(#hand)" stroke="#ead7a6" stroke-width=".65"/>
            <path class="lume" d="M397 444L397 387L400 371L403 387L403 444Z"/>
            <path d="M400 448V492" stroke="#6a5938" stroke-width=".7"/>
          </g>
          <g id="minute-hand">
            <path d="M396 506L393 455L396 329L400 299L404 329L407 455L404 506Z" fill="url(#hand)" stroke="#eedeb6" stroke-width=".6"/>
            <path class="lume" d="M398 439L398 332L400 316L402 332L402 439Z"/>
            <path d="M400 444V500" stroke="#6a5938" stroke-width=".6"/>
          </g>
        </g>
        <g id="second-hand">
          <path d="M399.2 521L399.35 298L400 282L400.65 298L400.8 521Z" fill="#e2c28a"/>
          <circle cx="400" cy="522" r="6" fill="none" stroke="#e2c28a" stroke-width="2"/>
          <path d="M400 529V540" stroke="#e2c28a" stroke-width="1.5"/>
        </g>
        <circle cx="400" cy="480" r="8" fill="url(#metal)" stroke="#e9d6ab" stroke-width=".6"/>
        <circle cx="400" cy="480" r="3" fill="#373629" stroke="#9f8d65" stroke-width=".6"/>

        <!-- Sapphire crystal: restrained highlights rather than a flat shine. -->
        <circle cx="400" cy="480" r="210" fill="url(#glass)" pointer-events="none"/>
        <path d="M219 378A207 207 0 0 1 463 283" fill="none" stroke="#ffffff" stroke-width="1.1" opacity=".13"/>
        <path d="M542 635A208 208 0 0 1 302 663" fill="none" stroke="#d9e1c6" stroke-width=".8" opacity=".07"/>
      </svg>
      <div class="edition">VALE ATELIER &nbsp; / &nbsp; NO. 01 &nbsp; / &nbsp; CHAMPAGNE GOLD</div>
    </div>
  </main>

  <footer>
    <div class="model">The Meridian <span>NO. 01 &nbsp; / &nbsp; OPEN HEART AUTOMATIC</span></div>
    <div class="specs">
      <div class="spec"><span>CASE</span>40 mm · Champagne gold</div>
      <div class="spec"><span>MOVEMENT</span>Calibre V–01</div>
      <div class="spec"><span>CHARACTER</span>Uninterrupted sweep</div>
    </div>
    <div class="live">
      <div class="live-time" id="local-time">LOCAL TIME</div>
      <div class="zone" id="timezone">Synchronized to your device</div>
    </div>
  </footer>
</div>

<script>
(() => {
  "use strict";
  const NS = "http://www.w3.org/2000/svg";
  const make = (name, attributes, parent) => {
    const element = document.createElementNS(NS, name);
    Object.entries(attributes).forEach(([key, value]) => element.setAttribute(key, value));
    if (parent) parent.appendChild(element);
    return element;
  };

  const track = document.getElementById("minute-track");
  for (let i = 0; i < 60; i++) {
    const major = i % 5 === 0;
    make("line", {
      x1: 400, y1: major ? 281 : 284,
      x2: 400, y2: major ? 292 : 290,
      stroke: major ? "#d1bf91" : "#8c947f",
      "stroke-width": major ? 1.5 : .8,
      transform: `rotate(${i * 6} 400 480)`
    }, track);
  }

  const markers = document.getElementById("hour-markers");
  for (let i = 0; i < 12; i++) {
    if (i === 3 || i === 6) continue;
    const group = make("g", { transform: `rotate(${i * 30} 400 480)` }, markers);
    const offsets = i === 0 ? [-6, 6] : [0];
    offsets.forEach(offset => {
      make("path", {
        d: `M${396 + offset} 300L${404 + offset} 300L${403 + offset} 329L${397 + offset} 329Z`,
        fill: "url(#hand)", stroke: "#c9b68a", "stroke-width": ".65"
      }, group);
      make("rect", {
        x: 398.5 + offset, y: 304, width: 3, height: 19, rx: .5, class: "lume"
      }, group);
    });
  }

  function gear(id, cx, cy, radius, teeth) {
    const group = document.getElementById(id);
    let path = "";
    for (let i = 0; i < teeth * 4; i++) {
      const angle = i * Math.PI * 2 / (teeth * 4);
      const r = i % 4 === 1 || i % 4 === 2 ? radius : radius - 2.8;
      path += `${i ? "L" : "M"}${cx + Math.cos(angle) * r} ${cy + Math.sin(angle) * r} `;
    }
    make("path", { d: path + "Z", fill: "#918053", stroke: "#d2bb80", "stroke-width": ".5" }, group);
    make("circle", { cx, cy, r: radius - 5, fill: "#141a13", stroke: "#bcaa76", "stroke-width": "1" }, group);
    for (let i = 0; i < 5; i++) {
      make("line", {
        x1: cx, y1: cy, x2: cx, y2: cy - radius + 4,
        stroke: "#ad9764", "stroke-width": 2.4,
        transform: `rotate(${i * 72} ${cx} ${cy})`
      }, group);
    }
    make("circle", { cx, cy, r: 3, fill: "#c4c4af", stroke: "#5a604f", "stroke-width": 1 }, group);
    return group;
  }

  const gearOne = gear("gear-one", 419, 587, 19, 18);
  const gearTwo = gear("gear-two", 376, 629, 16, 15);
  const hourHand = document.getElementById("hour-hand");
  const minuteHand = document.getElementById("minute-hand");
  const secondHand = document.getElementById("second-hand");
  const balance = document.getElementById("balance");
  const dateNumber = document.getElementById("date-number");
  const localTime = document.getElementById("local-time");
  const description = document.getElementById("watch-description");
  const timeFormat = new Intl.DateTimeFormat(undefined, {
    hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false
  });
  const dateFormat = new Intl.DateTimeFormat(undefined, { dateStyle: "full" });

  try {
    const zone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    document.getElementById("timezone").textContent = zone.replaceAll("_", " ").replaceAll("/", " / ");
  } catch (_) { /* The watch still uses device-local time. */ }

  let previousSecond = -1;
  function render() {
    const now = new Date();
    const seconds = now.getSeconds() + now.getMilliseconds() / 1000;
    const minutes = now.getMinutes() + seconds / 60;
    const hours = now.getHours() % 12 + minutes / 60;

    hourHand.setAttribute("transform", `rotate(${hours * 30} 400 480)`);
    minuteHand.setAttribute("transform", `rotate(${minutes * 6} 400 480)`);
    secondHand.setAttribute("transform", `rotate(${seconds * 6} 400 480)`);

    const elapsed = now.getTime() / 1000;
    gearOne.setAttribute("transform", `rotate(${(elapsed % 30) * 12} 419 587)`);
    gearTwo.setAttribute("transform", `rotate(${-(elapsed % 25) * 14.4} 376 629)`);
    balance.setAttribute("transform", `rotate(${Math.sin(elapsed * Math.PI * 5) * 28} 396 611)`);

    const wholeSecond = Math.floor(now.getTime() / 1000);
    if (wholeSecond !== previousSecond) {
      previousSecond = wholeSecond;
      const formatted = timeFormat.format(now);
      dateNumber.textContent = now.getDate();
      localTime.textContent = formatted;
      description.textContent = `VALE champagne-gold mechanical wristwatch. Local time: ${formatted}. ${dateFormat.format(now)}. A sweeping seconds hand and an exposed animated movement.`;
    }
    requestAnimationFrame(render);
  }

  const button = document.getElementById("lume-button");
  button.addEventListener("click", () => {
    const enabled = button.getAttribute("aria-pressed") !== "true";
    button.setAttribute("aria-pressed", String(enabled));
    document.body.classList.toggle("night", enabled);
    document.getElementById("lume-label").textContent = enabled ? "Restore daylight" : "Illuminate dial";
  });

  render();
})();
</script>
</body>
</html>

Compare with

Pareto 26.10: other attempts