@media(min-aspect-ratio:21/9){
.app{
padding-inline:5vw}
.readout{
padding-top:0}
.local-clock time{
font-size:3.5rem}
}

@media(max-width:700px){
:root{
font-size:14px}
.app{
padding:1.2rem 1rem max(1rem,env(safe-area-inset-bottom));
gap:1.3rem;
min-height:650px}
.brand{
gap:.5rem}
.brand p{
font-size:.62rem}
.top-actions{
gap:.5rem}
.switch button{
padding:.4rem .8rem;
min-height:2.4rem}
.readout{
flex-direction:column;
gap:1.5rem}
.local-clock time{
font-size:4.4rem}
.eyebrow{
font-size:.65rem}
.secondary-readouts{
width:100%;
gap:1rem}
.secondary-readouts time,#sun-coordinates{
font-size:1.22rem}
.date{
font-size:.8rem}
.map-area{
min-height:160px;
margin-inline:-1rem}
.map-frame{
border-left:0;
border-right:0}
.ocean{
display:none}
.city-label{
font-size:40px}
.city-dot{
r:4}
.city-secondary{
display:none}
.map-caption{
font-size:.65rem;
gap:1rem}
.legend{
gap:.7rem}
.controls{
flex-wrap:wrap;
gap:.65rem;
padding:.85rem 0}
.speed-controls{
width:100%;
justify-content:space-between;
font-size:.8rem}
.speed-controls button{
padding:.55rem .65rem;
min-width:3rem}
.reset{
font-size:.8rem;
padding:.5rem .3rem}
summary{
padding:.65rem .7rem;
font-size:.8rem}
.credits{
font-size:.52rem;
line-height:1.7;
align-items:flex-start}
.credits>span:last-child{
text-align:right;
max-width:55%}
#date-form{
width:21rem}
.status{
max-width:48%;
text-align:right}
.status i{
flex:none}
}

@media(max-height:600px) and (min-width:701px){
:root{
font-size:11px}
.app{
min-height:420px;
gap:.6rem;
padding:1rem 2rem}
.local-clock time{
font-size:3rem}
.readout{
padding:0}
.controls{
padding:.6rem 0}
.map-caption{
margin-bottom:.6rem}
}

@media(prefers-reduced-motion:reduce){
*{
scroll-behavior:auto}
}

.sun-label{
position:absolute;
transform:translateX(-50%);
color:#ffe6a9;
background:#081a27e6;
border:1px solid #e4c28955;
border-radius:.25rem;
padding:.25rem .45rem;
font-size:.7rem;
white-space:nowrap;
pointer-events:none;
z-index:2}

@media(max-width:700px){
.sun-label{
font-size:.65rem}
.solar-readout .date{
font-size:.7rem}
}

.language-switch button{
padding:.4rem .65rem;
min-width:2.5rem}

@media(max-width:700px){
.topbar{
flex-wrap:wrap;
row-gap:.8rem}
.top-actions{
gap:.4rem;
flex-wrap:wrap}
.language-switch button{
padding:.4rem .55rem}
.readout{
gap:1.25rem}
html[lang=en] .secondary-readouts{
gap:.65rem}
html[lang=en] .solar-readout .date{
font-size:.65rem}
}