:root { color-scheme:dark; --ink:#f2f6fb; --muted:#a4b0be; --line:rgba(255,255,255,.11); --accent:#7ad6b6; --panel:rgba(18,25,34,.76); --base:#10151c; --glow-b:#4b0082; --soft:#0e141c; --font-light:Tahoma,Arial,sans-serif; --font-regular:Tahoma,Arial,sans-serif; --font-bold:Tahoma,Arial,sans-serif; }
    :root[data-theme="light"] { color-scheme:light; --ink:#15202b; --muted:#536171; --line:rgba(29,48,66,.14); --accent:#087d67; --panel:rgba(255,255,255,.78); --base:#edf3f5; --glow-b:#dacbff; --soft:#f7fafb; }
    * { box-sizing:border-box; }
    body { margin:0; min-width:320px; min-height:100vh; color:var(--ink); font:400 16px/1.45 var(--font-light); background:radial-gradient(900px 520px at 105% 105%,var(--glow-b) 0%,transparent 61%),var(--base); }
    .page { width:min(1120px,calc(100% - 40px)); min-height:100vh; display:flex; flex-direction:column; margin:auto; padding:52px 0 36px; }
    header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:36px; }
    nav { display:flex; gap:16px; }
    nav a { color:var(--muted); font-size:14px; font-weight:400; text-decoration:none; }
    nav a:hover { color:var(--ink); }
    h1 { margin:0; font-family:var(--font-bold); font-size:clamp(32px,5vw,54px); font-weight:700; letter-spacing:-.055em; line-height:1.02; }
    .tools { display:flex; align-items:flex-start; }
    .theme-toggle { margin-top:6px; min-height:54px; padding:0 14px; border:1px solid var(--line); border-radius:14px; background:var(--soft); color:var(--ink); cursor:pointer; font:400 13px/1 var(--font-light); }
    .theme-toggle:hover { border-color:var(--accent); }
    .theme-toggle:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent); outline-offset:3px; }
    .grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
    .clock { display:grid; grid-template-columns:1fr auto; grid-template-rows:auto 1fr auto; min-height:202px; padding:22px; border:1px solid var(--line); border-radius:20px; background:var(--panel); box-shadow:0 12px 28px rgba(0,0,0,.13); }
    .city { margin:0; color:var(--muted); font-family:var(--font-regular); font-size:14px; font-weight:400; }
    .time { grid-column:1 / -1; align-self:center; margin:0; font-family:var(--font-bold); text-align:center; font-size:clamp(38px,4.1vw,56px); font-weight:700; letter-spacing:-.07em; line-height:1; font-variant-numeric:tabular-nums; }
    .date { grid-column:1 / -1; margin:0; color:var(--muted); text-align:center; font-size:14px; font-weight:400; text-transform:capitalize; }
    .zone { position:static; justify-self:end; color:var(--accent); font-family:var(--font-regular); font-size:12px; font-weight:400; }
    footer { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:auto; padding-top:42px; border-top:1px solid var(--line); color:#7e8b9a; font-size:13px; font-weight:400; }
    footer nav { flex-wrap:wrap; }
    @media (max-width:760px) { .page{width:min(100% - 28px,620px);padding-top:30px} header{display:block;margin-bottom:24px}.tools{margin-top:18px}.theme-toggle{margin-top:0}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.clock{min-height:174px;padding:18px}.time{margin-top:24px} }
    @media (max-width:440px) { .grid{grid-template-columns:1fr}.clock{min-height:153px}.time{font-size:47px} footer{display:block} footer span+span{display:block;margin-top:6px} }