.clock{--clock-bg:#f8fafc;--clock-fg:#0f172a;--clock-muted:#64748b;--clock-control:#e2e8f0;background:var(--clock-bg);width:100%;min-height:100dvh;color:var(--clock-fg);color-scheme:light;flex-direction:column;padding:clamp(1rem,3vw,3rem);display:flex}:root.dark .clock:not([data-theme=light]),.clock[data-theme=dark]{--clock-bg:#090d16;--clock-fg:#f1f5f9;--clock-muted:#94a3b8;--clock-control:#1e293b;color-scheme:dark}.clock--expanded{z-index:100;height:100dvh;position:fixed;inset:0;overflow:auto}.clock:fullscreen{height:100dvh;overflow:auto}.clock-toolbar{grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;display:grid}.clock-title{font-size:1rem;font-weight:600}.clock-actions{justify-content:flex-end;gap:.5rem;display:flex}.clock-control{border:1px solid var(--clock-control);min-width:44px;min-height:44px;color:var(--clock-fg);cursor:pointer;background:0 0;border-radius:.75rem;justify-content:center;align-items:center;gap:.5rem;padding:.625rem;text-decoration:none;display:inline-flex}.clock-control:hover{background:var(--clock-control)}.clock-control:focus-visible{outline-offset:4px;outline:3px solid #818cf8}.clock-control:disabled{cursor:wait;opacity:.5}.clock-back{justify-self:start;font-size:.875rem}.clock-face{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:2rem 0;display:flex}.clock-eyebrow{color:var(--clock-muted);letter-spacing:.2em;text-transform:uppercase;margin:0 0 1.5rem;font-size:.75rem;font-weight:600}.clock-time{font-variant-numeric:tabular-nums;letter-spacing:-.055em;white-space:nowrap;font-size:clamp(2.5rem,17vw,20rem);font-weight:500;line-height:1.1}.clock-date{color:var(--clock-muted);margin:1.5rem 0 0;font-size:clamp(.875rem,2vw,1.5rem);line-height:1.5}.clock-footer{color:var(--clock-muted);text-align:center;font-size:.75rem;line-height:1.5}.clock-footer p{margin:0}.clock-footer [role=alert]{color:var(--clock-fg);margin-top:.5rem}.clock-footer nav{justify-content:center;margin-top:1rem}.clock-footer nav a,.clock-footer nav span{color:var(--clock-muted);font-size:.75rem}.clock-footer nav a:hover{color:var(--clock-fg)}@media (width<=480px){.clock-back span{display:none}}@media (height<=480px) and (width>=481px){.clock-time{font-size:min(17vw,38dvh)}.clock-face{padding:1rem 0}.clock-eyebrow{margin-bottom:.5rem}.clock-date{margin-top:.5rem}}