/* Full-screen focus mode for the clickable local clock. */
header button.flip-clock{-webkit-appearance:none;appearance:none;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:right;cursor:pointer}
header button.flip-clock:hover{filter:brightness(1.06)}
header button.flip-clock:focus-visible{outline:3px solid #29a5d0;outline-offset:5px;border-radius:7px}
.clock-focus-dialog{position:fixed;inset:0;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:clamp(14px,3vw,34px);border:0;overflow:auto;background:transparent;color:#fff;place-items:center}
.clock-focus-dialog:not([open]){display:none}
.clock-focus-dialog[open]{display:grid;animation:clock-focus-enter .62s cubic-bezier(.2,.78,.2,1) both}
.clock-focus-dialog::backdrop{background:rgba(3,13,23,.76);backdrop-filter:blur(13px) saturate(.7);-webkit-backdrop-filter:blur(13px) saturate(.7)}
.clock-focus-shell{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(22px,4vh,42px);width:min(1120px,100%);min-height:min(75vh,700px);padding:clamp(28px,7vw,78px) clamp(16px,5vw,58px);overflow:hidden;border:1px solid rgba(220,246,255,.2);border-radius:clamp(20px,3vw,34px);background:linear-gradient(145deg,rgba(204,236,251,.075),rgba(116,185,214,.025) 48%,rgba(255,255,255,.055));box-shadow:0 40px 120px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.14);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);text-align:center;transform:scale(.92);opacity:0;animation:clock-focus-shell-in .7s cubic-bezier(.18,.83,.23,1) .05s both}
.clock-focus-shell::before{content:"";position:absolute;z-index:-1;inset:-45%;pointer-events:none;background:radial-gradient(ellipse at 50% 38%,rgba(96,190,227,.16),transparent 48%),radial-gradient(ellipse at 50% 100%,rgba(26,101,144,.16),transparent 56%)}
.clock-focus-close{position:absolute;top:clamp(14px,2.2vw,25px);right:clamp(14px,2.2vw,25px);z-index:5;display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(225,246,255,.24);border-radius:50%;background:rgba(238,250,255,.08);color:#fff;font-size:27px;line-height:1;cursor:pointer;transition:background .24s ease,transform .24s ease,border-color .24s ease}
.clock-focus-close:hover,.clock-focus-close:focus-visible{transform:rotate(90deg);border-color:rgba(255,255,255,.55);background:rgba(238,250,255,.16);outline:2px solid rgba(208,240,255,.5);outline-offset:3px}
.clock-focus-caption{display:block;color:rgba(232,248,255,.74);font-size:clamp(11px,1.5vw,15px);font-weight:800;letter-spacing:.24em;text-transform:uppercase}
.clock-focus-time{display:block;color:#f7fdff;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:clamp(76px,19vw,218px);font-weight:760;line-height:.98;letter-spacing:.025em;font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(255,255,255,.8),0 2px 0 rgba(202,235,250,.54),0 5px 0 rgba(113,176,205,.22),0 12px 35px rgba(0,0,0,.33),0 0 46px rgba(145,219,247,.17);filter:drop-shadow(0 8px 16px rgba(0,0,0,.16));white-space:nowrap}
.clock-focus-message{position:relative;display:flex;flex-direction:column;gap:.17em;max-width:1020px;margin:0;color:transparent;background:linear-gradient(105deg,#eaf9ff 2%,#fff 18%,#c9edff 34%,#fff 47%,#d7f3ff 60%,#fff 73%,#d8f1ff 91%);background-size:230% 100%;background-position:0% 50%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:clamp(25px,5.5vw,65px);font-weight:880;line-height:1.09;letter-spacing:.025em;text-transform:uppercase;filter:drop-shadow(0 1px 0 rgba(255,255,255,.86)) drop-shadow(0 3px 0 rgba(125,190,219,.64)) drop-shadow(0 6px 0 rgba(29,83,111,.5)) drop-shadow(0 12px 24px rgba(0,0,0,.48));animation:clock-message-glass-sheen 8.2s cubic-bezier(.45,0,.25,1) infinite}
.clock-focus-message span{display:block}
.clock-focus-hint{margin:0;color:rgba(225,244,253,.62);font-size:12px;letter-spacing:.09em}
@keyframes clock-focus-enter{from{opacity:0}to{opacity:1}}
@keyframes clock-focus-shell-in{from{transform:scale(.88) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
@keyframes clock-message-glass-sheen{0%,18%{background-position:100% 50%;filter:drop-shadow(0 1px 0 rgba(255,255,255,.86)) drop-shadow(0 3px 0 rgba(125,190,219,.64)) drop-shadow(0 6px 0 rgba(29,83,111,.5)) drop-shadow(0 12px 24px rgba(0,0,0,.48))}57%,80%{background-position:0% 50%;filter:drop-shadow(0 1px 0 rgba(255,255,255,.96)) drop-shadow(0 3px 0 rgba(150,210,235,.7)) drop-shadow(0 6px 0 rgba(29,83,111,.52)) drop-shadow(0 12px 24px rgba(0,0,0,.48))}100%{background-position:-130% 50%;filter:drop-shadow(0 1px 0 rgba(255,255,255,.86)) drop-shadow(0 3px 0 rgba(125,190,219,.64)) drop-shadow(0 6px 0 rgba(29,83,111,.5)) drop-shadow(0 12px 24px rgba(0,0,0,.48))}}
@media(max-width:600px){.clock-focus-dialog{padding:10px}.clock-focus-shell{min-height:78vh;gap:28px;padding:68px 14px 28px;border-radius:22px}.clock-focus-time{font-size:clamp(62px,18vw,112px);letter-spacing:0}.clock-focus-message{font-size:clamp(23px,7vw,38px);line-height:1.12}.clock-focus-hint{font-size:10px}}
@media(prefers-reduced-motion:reduce){.clock-focus-dialog[open],.clock-focus-shell,.clock-focus-message{animation:none!important;transition:none!important}.clock-focus-shell{transform:none;opacity:1}.clock-focus-message{background-position:50% 50%}}