*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
body{font-family:Arial,Helvetica,sans-serif;background:#fff;color:#111;transition:background .35s ease,color .35s ease}
body.night{background:#111;color:#f4f4f4}
.wrapper{width:min(1280px,100%);margin:0 auto;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:30px}
.top{text-align:center}
.location{display:flex;justify-content:center;align-items:center;color:#666;font-size:1rem;margin-bottom:20px}
body.night .location{color:#ccc}
.clock{font-size:clamp(6rem,16vw,14rem);font-weight:700;line-height:.9;letter-spacing:-.08em}
.date{margin-top:20px;font-size:clamp(1.2rem,2vw,2rem);font-weight:600}
.timezone{margin-top:10px;color:#777;font-size:1rem}
body.night .timezone{color:#ccc}
.cities{margin-top:55px;border-top:1px solid #e6e6e6;display:grid;grid-template-columns:repeat(7,1fr)}
body.night .cities{border-top:1px solid #333}
.city{padding:22px 10px;text-align:center;border-right:1px solid #ececec;border-bottom:none}
.city:last-child{border-right:none}
body.night .city{border-right:1px solid #333}
body.night .city:last-child{border-right:none}
.city-name{font-size:.9rem;color:#777;margin-bottom:7px}
body.night .city-name{color:#b8b8b8}
.city-time{font-size:1.4rem;font-weight:700}
.city-date{margin-top:5px;font-size:.78rem;color:#888}
body.night .city-date{color:#aaa}
.content{max-width:980px;margin:58px auto 0;border-top:1px solid #eee;padding-top:32px;color:#333;line-height:1.65}
body.night .content{border-top-color:#333;color:#ddd}
.content h1,.content h2{font-size:1.35rem;margin:0 0 12px}
.content h3{font-size:1.05rem;margin:24px 0 8px}
.content p{margin:0 0 12px}
.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.links a{color:inherit;text-decoration:none;border:1px solid #ddd;border-radius:999px;padding:7px 11px;font-size:.9rem}
body.night .links a{border-color:#333;color:#eee}
.hidden-seo{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:980px){.cities{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.wrapper{padding:20px}.clock{font-size:clamp(4.5rem,22vw,8rem)}.cities{grid-template-columns:1fr;margin-top:40px}.city{border-right:none!important}}