:root{color-scheme:light;--bg:#f7f9fa;--panel:#fff;--line:#d6e0e4;--text:#22343c;--muted:#5b6d75;--accent:#24666f}
body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
*{letter-spacing:0}
header{max-width:1280px;min-height:88px;padding:20px 32px;border-bottom:1px solid var(--line);background:#fff;gap:24px}
header .brand{font-size:21px;font-weight:650}
header .brand img{border-radius:8px}
header .research{font-size:13px}
#clock{display:grid;grid-template-columns:minmax(0,1fr);column-gap:28px;max-width:1280px;padding:36px 32px 48px;align-items:start}
#clock>.intro{grid-column:1/-1;text-align:left;padding:0 0 24px}
#clock .intro h1{font-size:30px;font-weight:600;margin:8px 0 4px;line-height:1.25}
#clock .intro .eyebrow{font-size:13px;color:var(--muted)}
#clock>.clock-face{grid-column:1;grid-row:2;min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:36px 22px;background:#193039;color:#f4f9fa;border:0;border-radius:8px 8px 0 0}
#clock .clock-face .eyebrow,#clock .clock-face #date{color:#c3d4d9;font-size:13px;margin:0}
#display-time{font-size:112px;font-weight:450;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap;color:#f2f8f9}
#clock>.actions{grid-column:1;grid-row:3;margin:0;padding:0 24px 30px;min-height:80px;background:#193039;border-radius:0 0 8px 8px;align-self:start;align-items:flex-start;align-content:start}
#clock>.actions button,#clock>.actions a{background:#deeee9;color:#163c39;border-color:#deeee9;font-size:13px;min-height:46px;border-radius:6px}
#clock>.actions .secondary,#clock>.actions .app-download{background:transparent;color:#e5f0f2;border-color:#70858d}
#clock>.s7-bottom-disclosures{grid-column:2;grid-row:2/4;align-self:start;margin:0;padding:0 0 0 24px;border-left:1px solid var(--line);min-width:0}
#clock .s7-bottom-label{font-size:12px;color:var(--muted)}
#clock .s7-bottom-disclosures .s7-disclosure,#clock .s7-bottom-disclosures .s7-disclosure[open]{background:#fff!important;color:var(--text)!important;border:1px solid var(--line)!important;border-radius:8px!important;margin-top:14px}
#clock .s7-bottom-disclosures .s7-disclosure>summary{color:var(--text);font-size:14px;min-height:48px}
#clock .s7-bottom-disclosures .s7-disclosure>summary:hover{background:#eef4f4}
#clock .s7-bottom-disclosures p{color:var(--muted);font-size:13px;line-height:1.65;overflow-wrap:anywhere}
#clock .s7-bottom-disclosures form{padding-top:4px}
fieldset{margin:20px 0;padding:0;min-width:0}
legend{font-size:14px;color:var(--text)}
label{font-size:13px;color:var(--muted);margin:14px 0}
input,select{background:#fff;color:var(--text);border:1px solid #bacbd2;border-radius:6px;min-height:44px;font-size:14px;min-width:0}
button{background:var(--accent);color:#fff;border-color:var(--accent);border-radius:6px;min-height:44px;font-size:13px;white-space:normal}
button.secondary{background:#fff;color:var(--text);border-color:#bcccd1}
button.text-button{background:transparent;border:0;color:var(--accent)}
.pair{gap:12px;grid-template-columns:1fr}
.actions{gap:10px}
#status{font-size:13px;text-align:left;color:#24666f}
#clock .s7-disclosure #wallpaper-preview{border-radius:8px;background:#193039}
#wallpaper-time{color:#f2f8f9;font-size:26px}
footer{max-width:1280px;padding:22px 32px;border-top:1px solid var(--line);font-size:12px}
button:focus-visible,summary:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #448b9f;outline-offset:3px}
#clock:fullscreen{display:flex;max-width:none;background:#193039;color:#f2f8f9;padding:32px;gap:0;justify-content:center}
#clock:fullscreen>.intro{text-align:center}
#clock:fullscreen .intro h1,#clock:fullscreen .intro .eyebrow{color:#c3d4d9}
#clock:fullscreen>.clock-face{min-height:300px;width:100%;border-radius:0;padding:24px 0}
#clock:fullscreen>.actions{width:100%;border-radius:0}
#clock:fullscreen>.s7-bottom-disclosures{width:min(680px,100%);margin:24px auto 0;padding:0;border:0}
@media(max-width:1000px){#clock{grid-template-columns:minmax(0,1fr) 290px;column-gap:20px}#clock>.s7-bottom-disclosures{padding-left:18px}#display-time{font-size:86px}}
@media(max-width:760px){header{padding:18px;gap:14px;min-height:80px}header .research{width:auto;margin-left:0;font-size:12px}#clock{display:block;padding:24px 18px 36px}#clock>.intro{padding-bottom:20px}#clock .intro h1{font-size:26px}#clock>.clock-face{min-height:300px;padding:30px 14px;gap:22px}#display-time{font-size:72px}#clock>.actions{padding:0 14px 26px;gap:10px}#clock>.actions button,#clock>.actions a{font-size:12px;padding:10px 12px}#clock>.s7-bottom-disclosures{border:0;padding:0;margin-top:28px}footer{padding:20px 18px}#clock:fullscreen{padding:20px 18px}#clock:fullscreen>.clock-face{min-height:260px}#clock:fullscreen #display-time{font-size:72px}}
@media(max-width:360px){#display-time,#clock:fullscreen #display-time{font-size:62px}#clock>.clock-face{min-height:270px}}

/* Menu panels scroll independently and never participate in clock grid sizing. */
header{position:relative;flex-wrap:nowrap}
header .brand{min-width:0}
header .s7-menu{padding:0;margin:0;position:relative;flex:none;z-index:30}
header .s7-menu>summary{border-radius:6px;width:44px;height:44px;min-height:44px}
header .s7-menu>nav{width:min(380px,calc(100vw - 36px));top:54px;left:0;max-height:calc(100dvh - 110px);border-radius:8px;text-transform:none;padding:16px}
#timely-menu-panel>details{margin:0 0 12px;padding:12px 0;border-top:0;border-bottom:1px solid var(--line)}
#timely-menu-panel summary{font-size:14px;min-height:44px;display:flex;align-items:center}
#timely-menu-panel>details{margin:0;padding:0;border:0}
#timely-menu-panel>a,#timely-menu-panel>details>summary{font:500 16px/1.4 system-ui;color:inherit;letter-spacing:0;text-transform:none;padding:12px 14px;border-radius:6px;min-height:46px;box-sizing:border-box;display:flex;align-items:center}
#timely-menu-panel>details>summary:hover,#timely-menu-panel>details>summary:focus-visible{background:#edf1ff;color:#254bc7}
#timely-menu-panel p{font-size:13px;overflow-wrap:anywhere}
#timely-menu-panel .actions{align-items:flex-start}
#clock{grid-template-columns:minmax(0,1fr)}
#clock>.actions button,#clock>.actions a{height:46px;min-height:46px;flex:none;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:760px){header{gap:12px}header .brand{font-size:19px;gap:8px}#clock>.actions .app-download{flex-basis:100%;max-width:220px}}

/* Keep the clock exception while framing settings as one clean menu surface. */
#timely-menu-panel{background:#fff;color:var(--text)}
#timely-menu-panel>details>form,#timely-menu-panel .clock-details{padding:0 14px}