/* Clock surfaces share the same ten designs in the main view and mini window. */
.clock-surface{--face:#173c35;--face-ink:#fff;--metal:#b58d4e;--dial:#f7ecd4;--dial-ink:#332d24;--number-font:'Segoe UI',sans-serif;background:var(--face);color:var(--face-ink);border:1px solid color-mix(in srgb,var(--metal),transparent 30%);box-shadow:0 12px 40px #173c3512}
[data-design=modern],[data-design-preview=modern]{--face:#20252c;--face-ink:#f6f7fb;--metal:#8b9aaa;--dial:#e8edf3;--dial-ink:#18212d}
[data-design=classic],[data-design-preview=classic]{--face:#eee7d8;--face-ink:#352f27;--metal:#a78e63;--dial:#fffaf0;--dial-ink:#352f27}
[data-design=midnight],[data-design-preview=midnight]{--face:#141925;--face-ink:#f1dca7;--metal:#c0a067;--dial:#202739;--dial-ink:#f3dfa9}
[data-design=forest],[data-design-preview=forest]{--face:#214737;--face-ink:#f2f6e6;--metal:#a5b879;--dial:#edf2dc;--dial-ink:#274d36}
[data-design=navy],[data-design-preview=navy]{--face:#173555;--face-ink:#eaf2fa;--metal:#a8bbc9;--dial:#eaf1f7;--dial-ink:#173555}
[data-design=copper],[data-design-preview=copper]{--face:#432e30;--face-ink:#ffe8dd;--metal:#d79b7d;--dial:#f9e8da;--dial-ink:#543430}
[data-design=minimal],[data-design-preview=minimal]{--face:#fff;--face-ink:#202b2c;--metal:#c9d1cf;--dial:#fff;--dial-ink:#202b2c}
[data-design=walnut],[data-design-preview=walnut]{--face:repeating-linear-gradient(92deg,#493323 0,#573e2b 6px,#493323 12px);--face-ink:#fff0d2;--metal:#b59155;--dial:#f2e1bf;--dial-ink:#493323}
[data-design=mono],[data-design-preview=mono]{--face:#101010;--face-ink:#fff;--metal:#aaa;--dial:#f5f5f5;--dial-ink:#111}
[data-font=classic]{--number-font:Georgia,'Times New Roman',serif}[data-font=elegant]{--number-font:'Times New Roman',serif}[data-font=mono]{--number-font:Consolas,'Courier New',monospace}[data-font=round]{--number-font:'Trebuchet MS',Verdana,sans-serif}
.clock-time,.clock-surface .roman{font-family:var(--number-font);font-variant-numeric:tabular-nums}.clock-time{display:flex;align-items:baseline;gap:0;white-space:nowrap}.main-time{font-size:clamp(64px,7.5vw,106px);font-weight:400;letter-spacing:-3px;line-height:1.2}.main-time .digits{font-size:1em;color:inherit}.main-time .clock-seconds{font-size:.52em;color:inherit;opacity:.8}.clock-time .period{font-size:18px;letter-spacing:0;margin-right:12px;align-self:center}.period:empty{display:none}.clock-surface .clock-meta,.clock-surface #main-date{color:var(--face-ink)}.clock-meta{font-size:17px}.clock-surface #zone,.clock-surface #sync-state{color:var(--face-ink);opacity:.78}.clock-surface .clock-actions button{border:1px solid color-mix(in srgb,var(--face-ink),transparent 60%);background:transparent;color:var(--face-ink);font-weight:600}.clock-surface .clock-actions button.primary{background:#e4c58f;color:#20352e;border-color:#e4c58f}.clock-layout{min-height:260px;align-items:center}.clock-surface .analog{background:linear-gradient(135deg,var(--metal),color-mix(in srgb,var(--metal),#fff 35%),var(--metal));border-color:var(--metal)}.clock-surface .dial{background:var(--dial);color:var(--dial-ink)}.clock-surface .hand.hour,.clock-surface .hand.minute,.clock-surface .pivot{background:var(--dial-ink)}.clock-surface .dial-brand{color:var(--dial-ink)}[data-design=modern] .analog,[data-design=minimal] .analog{border-width:3px;box-shadow:none}
.clock-surface[data-mode=digital] .clock-layout{grid-template-columns:1fr}.clock-surface[data-mode=analog] .clock-layout{grid-template-columns:1fr 1fr}.clock-surface[data-mode=analog] .analog{width:260px;height:260px;justify-self:center}.clock-surface [hidden]{display:none!important}
.city-card{border:1px solid #cbd7d1;box-shadow:0 2px 4px #173c3504}.city-card time{font-weight:600;color:var(--ink);font-size:32px}.city-note,.muted{color:#53665e}body.dark .muted,body.dark .city-note{color:#b6c8bd}.city-card.active{outline:2px solid #537b68;border-color:#537b68}.section-top h2{font-size:27px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #b68b4a;outline-offset:4px}nav a{font-weight:600}button{min-height:40px}
.clock-settings{width:min(580px,calc(100vw - 28px));max-height:calc(100dvh - 24px);padding:24px;border:1px solid #d4dcd5;border-radius:20px;background:#fafbf8;color:#22392f;box-shadow:0 24px 100px #0005;overflow:auto}.clock-settings::backdrop{background:#0b251c88;backdrop-filter:blur(3px)}.settings-heading{display:flex;align-items:center;justify-content:space-between}.settings-heading h2{margin:4px 0;font-size:27px}.settings-heading .eyebrow{margin:0;font-size:10px}.settings-close{font-size:20px;background:#e9eee7;border:none}.clock-settings label{display:block;font-weight:600;font-size:14px;margin:18px 0 8px}.clock-settings select{display:block;width:100%;margin-top:8px;background:#fff;color:#22392f;padding:11px;border:1px solid #bdcbbf;border-radius:8px;font-size:15px}.clock-settings fieldset{margin:20px 0 0;border:0;padding:0}.clock-settings legend{font-weight:600;font-size:14px}.design-options{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}.design-options button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 3px;font-size:11px;color:#304436;background:#fff;border:1px solid #d1dbd2;border-radius:10px;min-width:0}.design-options button[aria-pressed=true]{outline:2px solid #416753;background:#edf3ea}.design-face{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:3px solid var(--metal,#b58d4e);background:var(--face,#173c35);color:var(--face-ink,#fff);font-size:32px}.settings-checks{display:flex;gap:16px;flex-wrap:wrap}.settings-checks label{font-weight:400}.clock-settings input[type=range]{display:block;width:100%;accent-color:#416753;margin-top:14px}.clock-settings output{float:right}.settings-reset{background:#eaf0e6;border:1px solid #becbbb;color:#294634;width:100%;margin-top:12px}.clock-settings .muted{line-height:1.6}
.mini-body{display:block;height:100dvh;margin:0;overflow:hidden;background:#e7e9e4}.mini-shell.clock-surface{height:100%;width:100%;padding:0;border-radius:0;border:0;display:flex;flex-direction:column;overflow:hidden}.mini-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;color:var(--face-ink);font-size:10px;letter-spacing:2px;flex-shrink:0;border-bottom:1px solid color-mix(in srgb,var(--metal),transparent 50%)}.mini-settings{display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;background:color-mix(in srgb,var(--metal),transparent 70%);border:1px solid var(--metal);color:var(--face-ink);font-size:24px;cursor:pointer}.mini-artwork{flex:1;min-height:0;display:grid;place-items:center;padding:16px;position:relative;container-type:size}.mini-artwork::before{content:'';position:absolute;inset:10px;border:1px solid color-mix(in srgb,var(--metal),transparent 25%);border-radius:12px;box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--metal),transparent 90%)}.mini-clock{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;opacity:var(--clock-opacity,1)}.mini-clock .analog{width:min(68cqw,59cqh);height:min(68cqw,59cqh);flex-shrink:0}.mini-clock .clock-time{font-size:clamp(28px,12cqw,60px);font-weight:500;letter-spacing:-1px;justify-content:center}.mini-clock .clock-seconds{font-size:.55em;opacity:.8}.mini-clock .period{font-size:13px;margin-right:8px}.mini-clock .clock-date,.mini-clock .mini-name{font-size:12px;line-height:1.4;margin:0;color:var(--face-ink);opacity:.85}.mini-shell[data-mode=analog] .analog{width:min(80cqw,75cqh);height:min(80cqw,75cqh)}.mini-shell[data-mode=digital] .clock-time{font-size:clamp(30px,17cqw,86px)}.mini-shell[data-mode=digital] .mini-clock{gap:20px}.mini-body .clock-settings{padding:18px;width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}.mini-body .design-options{grid-template-columns:repeat(5,1fr);gap:5px}.mini-body .settings-checks{gap:8px}.mini-body .clock-settings label{margin-top:12px}.mini-body .design-face{width:34px;height:34px;font-size:25px}
@media(max-width:620px){.main-time{font-size:clamp(42px,10vw,68px);letter-spacing:-2px}.clock-time .period{font-size:13px;margin-right:6px}.clock-layout{grid-template-columns:1fr!important;gap:24px}.clock-surface .analog{display:block!important;justify-self:center;width:200px;height:200px}.clock-surface .analog[hidden]{display:none!important}.clock-surface{padding:22px}.clock-actions{flex-wrap:wrap}.clock-meta{font-size:14px;gap:10px;flex-wrap:wrap}.design-options{grid-template-columns:repeat(5,1fr)}.clock-surface:not(.mini-shell)[data-mode=analog] .clock-layout>div:first-child{order:2}.clock-surface:not(.mini-shell)[data-mode=analog] .analog{order:1}.mini-shell.clock-surface{padding:0}.mini-clock .analog{width:min(68cqw,59cqh);height:min(68cqw,59cqh)}.mini-shell[data-mode=analog] .analog{width:min(80cqw,75cqh);height:min(80cqw,75cqh)}}

/* Distinct bezel treatments, from a carved cabinet to a precise steel dial. */
[data-design=walnut] .analog{border-radius:22% 22% 12% 12%;padding:14px;border-width:6px;box-shadow:inset 0 0 0 3px #46301c,0 6px 18px #0005;background:repeating-linear-gradient(94deg,#7b5a36 0,#ad8755 5px,#80613e 9px)}
[data-design=classic] .analog{box-shadow:0 0 0 3px #fff8,0 0 0 5px var(--metal),0 8px 20px #0002}
[data-design=copper] .analog{background:conic-gradient(#9b5d48,#f1c1a5,#91553f,#f9d1bc,#9b5d48);border-color:#ac7159}
[data-design=midnight] .dial{box-shadow:inset 0 0 0 6px #202739,inset 0 0 0 7px #c0a067}
[data-design=navy] .dial{border:5px double #173555}
[data-design=forest] .analog{box-shadow:0 0 0 4px #254531,inset 0 0 0 2px #d9e4ba}
[data-design=mono] .analog{border:5px solid #aaa;background:#eee;padding:3px;box-shadow:none}
[data-design=minimal] .dial{border:1px solid #bfc8c3;box-shadow:none}
[data-design=modern] .dial{border:2px solid #5d6b7b;box-shadow:inset 0 0 0 7px #fff}
.clock-surface .dial::before{content:'';position:absolute;inset:6px;border-radius:50%;background:repeating-conic-gradient(from -1deg,var(--dial-ink) 0deg 1deg,transparent 1deg 30deg);mask:radial-gradient(transparent 0 93%,#000 94%);opacity:.5;pointer-events:none}
.mini-clock .roman{font-size:clamp(14px,5cqw,23px)}

.mini-settings{font-family:Arial,sans-serif;font-weight:400;line-height:1}

.mini-clock .clock-time{line-height:1.12}.mini-clock{gap:10px}
@container (max-height:240px){.mini-clock{gap:6px}.mini-clock .clock-time{font-size:clamp(22px,10cqw,42px)}.mini-clock .clock-date,.mini-clock .mini-name{font-size:10px}.mini-clock .analog{width:min(58cqw,48cqh);height:min(58cqw,48cqh)}}