:root{color-scheme:dark;font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;color:#f4f7fb;background:#101923;font-size:14px}*{box-sizing:border-box}body{margin:0}main{max-width:640px;margin:auto;padding:18px;display:grid;gap:14px}header{text-align:center}.location{color:#a9dace;font-weight:700;letter-spacing:.15em;font-size:13px}.location span{letter-spacing:0;font-size:11px;margin-left:6px}#date{margin-top:12px;font-size:16px}.clock{font-size:clamp(52px,16vw,86px);font-weight:650;letter-spacing:-.045em;line-height:1.17;font-variant-numeric:tabular-nums}.muted,small,footer{color:#b6c2d0}.muted{font-size:12px}.weather,.astronomy{background:#1a2837;border:1px solid #304255;border-radius:16px;padding:16px}.current{display:flex;align-items:center;gap:14px}#weather-icon{font-size:44px;color:#ffda8b}#temperature{font-size:42px;line-height:1.2;font-variant-numeric:tabular-nums}.eyebrow{display:block;color:#bdcbd9;font-size:12px}.description{margin-left:auto;text-align:right}.description small{display:block;font-size:11px;margin-top:6px}.forecast-heading{display:flex;align-items:center;justify-content:space-between;margin-top:10px}h1{font-size:13px;margin:0}.controls{display:flex;gap:6px}button{font:inherit;font-size:23px;width:40px;min-height:36px;border:1px solid #617b94;border-radius:8px;background:#223448;color:#fff;cursor:pointer}button:disabled{opacity:.3;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #ffda8b;outline-offset:3px}.hours{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:10px 0}.hour{display:flex;flex-direction:column;align-items:center;padding:8px 3px;background:#223448;border-radius:9px;gap:3px;font-variant-numeric:tabular-nums}.hour-time{font-size:13px}.hour-zone{font-size:9px;color:#bac9d8}.hour-icon{font-size:25px;color:#ffda8b}.hour-temp{font-size:21px;font-weight:650}.rain{color:#a8d9ff;font-size:12px}.hint{text-align:center;font-size:10px}.astronomy{display:grid;grid-template-columns:1fr 1fr;gap:15px}.sun{display:flex;gap:18px}.sun strong{display:block;font-size:25px;margin-top:5px}.moon{display:flex;gap:10px;align-items:center;border-left:1px solid #40536a;padding-left:14px}#moon-icon{font-size:35px}.moon b{font-size:13px}.moon strong{font-size:22px}.moon small{font-size:10px}footer{font-size:10px;line-height:1.7;text-align:center}a{color:#a9dace}.warning{color:#ffce86}@media(max-width:390px){main{padding:10px;gap:10px}.weather,.astronomy{padding:12px}.current{gap:8px}#temperature{font-size:36px}.sun{gap:10px}.sun strong{font-size:21px}.moon{padding-left:10px;gap:6px}#moon-icon{font-size:27px}.astronomy{gap:8px}.eyebrow{font-size:10px}}@media(orientation:landscape) and (min-width:600px){main{max-width:960px;grid-template-columns:.9fr 1.3fr;align-items:center;padding:12px;gap:12px}.weather{grid-column:2;grid-row:1 / 3}header{grid-column:1}.astronomy{grid-column:1;grid-template-columns:1fr;padding:10px;gap:8px}.sun{justify-content:space-around}.moon{border-left:0;border-top:1px solid #40536a;padding:7px 0 0;justify-content:center}footer{grid-column:1 / -1}.clock{font-size:clamp(48px,9vw,78px)}#date{margin-top:8px}}@media(max-height:500px) and (orientation:landscape){main{gap:6px}.weather{padding:10px}.clock{font-size:52px}.astronomy{gap:4px}.sun strong{font-size:21px}.moon strong{font-size:18px}#moon-icon{font-size:26px}.hour{padding:5px 3px}}

/* Seconds stay below half the size of hours and minutes. */
.clock{white-space:nowrap}.clock-seconds{font-size:.42em;letter-spacing:0;margin-left:.08em}
.daily-forecast{border-top:1px solid #40536a;margin-top:14px;padding-top:12px}
.daily-forecast h2{font-size:13px;margin:0 0 10px}.days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.day{display:flex;flex-direction:column;align-items:center;gap:4px;background:#223448;border-radius:9px;padding:9px 4px;font-variant-numeric:tabular-nums}
.day-date{font-size:12px;font-weight:650}.day-icon{font-size:26px;color:#ffda8b}.day-label{font-size:11px;text-align:center}.day-high{font-size:15px;color:#ffda8b}.day-low{font-size:13px;color:#b9dfff}
@media(orientation:landscape) and (min-width:600px){
.astronomy{min-height:240px;padding:20px 14px;gap:16px;align-content:space-around}
.sun strong{font-size:32px;margin-top:10px}.sun .eyebrow{font-size:13px}
.moon{padding-top:16px;gap:14px}.moon b{font-size:16px}.moon strong{font-size:30px}#moon-icon{font-size:46px}
}
@media(max-height:500px) and (orientation:landscape) and (min-width:600px){
.astronomy{min-height:210px;padding:16px 12px;gap:10px}.sun strong{font-size:30px}.moon strong{font-size:28px}#moon-icon{font-size:42px}
}