:root{--navy:#07152d;--navy2:#0e2345;--gold:#f5b719;--bg:#edf2f7;--card:#fff;--ink:#182235;--muted:#66748a;--line:#dce3ed;--accent:#0b7180}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
header{height:72px;background:var(--navy);color:#fff;display:flex;align-items:center;padding:0 5%;gap:32px;position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:10px;min-width:245px}.brand strong{display:block;font-size:18px}.brand small{display:block;color:#c6d0df;font-size:11px}.sun{font-size:30px;color:var(--gold)}nav{display:flex;gap:23px;flex:1;justify-content:center}nav a{color:#fff;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.05em}nav a:hover{color:var(--gold)}button,.iconBtn{border:1px solid #c6d0df;background:#fff;color:var(--ink);border-radius:9px;padding:10px 14px;font-weight:700;cursor:pointer}.iconBtn{background:transparent;color:white;border-color:#ffffff44;font-size:18px}
.hero{color:#fff;min-height:390px;background:linear-gradient(90deg,#06152eea,#07152d66),url("https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=1900&q=85") center/cover}.heroInner{max-width:1250px;margin:auto;padding:55px 20px;position:relative}.eyebrow{color:var(--gold);font-weight:900;letter-spacing:.13em;font-size:13px}.hero h1{font-size:clamp(52px,7vw,88px);line-height:.9;margin:13px 0 8px}.heroDate{font-size:31px;font-weight:800;color:var(--gold)}.season{font-size:31px;font-weight:700;margin:5px 0 22px;text-transform:capitalize}.heroFacts{display:flex;gap:25px;flex-wrap:wrap;font-size:14px}.heroFacts b{margin-left:5px}.clockCard{position:absolute;right:20px;top:68px;background:#07152de8;border:1px solid #ffffff22;border-radius:18px;padding:25px 30px;text-align:center;min-width:280px}.clockCard label{display:block;color:var(--gold);font-size:12px;font-weight:900}.clockCard #clock{font-size:47px;font-variant-numeric:tabular-nums;margin:7px 0}.clockCard small{color:#c7d1df}
.container{max-width:1250px;margin:-35px auto 60px;padding:0 18px;position:relative}.toolbar{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:14px 18px;display:flex;align-items:end;gap:12px;margin-bottom:15px;box-shadow:0 5px 20px #10204012}.toolbar label{display:block;font-size:11px;font-weight:900;color:var(--muted);margin-bottom:5px}.toolbar input{padding:10px;border:1px solid #cbd4df;border-radius:8px;font:inherit}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.card{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:22px;box-shadow:0 5px 20px #10204010}.wide{grid-column:span 2}.cardTitle{font-size:14px;font-weight:900;margin-bottom:16px;letter-spacing:.04em}.big{font-size:29px;font-weight:900}.card ul{padding-left:19px;line-height:1.9}.muted,.source{color:var(--muted)}.source{font-size:11px;margin-top:17px}.weatherMain{display:flex;align-items:center;gap:15px}.weatherMain span{font-size:42px}.weatherMain b{font-size:38px}.weatherGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px;font-size:13px}.event{border-left:4px solid var(--gold);padding:9px 12px;margin:9px 0;background:#f8fafc;border-radius:0 8px 8px 0}.event b{color:#a56e00}.person{padding:8px 0;border-bottom:1px solid var(--line)}.person:last-child{border:0}.person b{display:block}.loading{color:var(--muted);padding:10px 0}.numberList{display:grid;grid-template-columns:1fr 1fr;gap:12px}.numberList div{background:#f6f8fb;border-radius:10px;padding:11px}.numberList span{display:block;color:var(--muted);font-size:11px}.numberList b{font-size:22px}.timeButtons{display:flex;gap:7px;flex-wrap:wrap}.timeButtons button.active{background:var(--gold);border-color:var(--gold)}.about,.sources{margin-top:14px}.about h2{margin-top:0}.sources p{line-height:1.55}
footer{background:var(--navy);color:#d8e1ef;text-align:center;padding:30px 5%;font-size:13px}
body.dark{--bg:#07101f;--card:#0e1a2c;--ink:#eef3fa;--muted:#aab7c9;--line:#26364e}.dark .toolbar input,.dark button{background:#14243a;color:#eef3fa;border-color:#3b4d66}.dark .event,.dark .numberList div{background:#14243a}
@media(max-width:950px){nav{display:none}.clockCard{position:static;width:max-content;margin-top:28px}.grid{grid-template-columns:1fr 1fr}.wide{grid-column:span 2}}
@media(max-width:620px){.grid{grid-template-columns:1fr}.wide{grid-column:span 1}.toolbar{flex-wrap:wrap}.heroDate{font-size:23px}.heroFacts{gap:12px}.clockCard{width:100%}}