.map-area{
flex:1;
min-height:0;
display:flex;
align-items:center;
justify-content:center;
position:relative}
.map-frame{
position:relative;
flex:none;
overflow:hidden;
background:#173d52;
border:1px solid #305061;
box-shadow:0 1.5rem 4rem #0002;
isolation:isolate}
.map-layer{
position:absolute;
inset:0;
width:100%;
height:100%;
pointer-events:none}
.graticule{
stroke:#bed6df;
stroke-opacity:.13;
stroke-width:.65;
fill:none}
.graticule .equator{
stroke-opacity:.3;
stroke-dasharray:5 7}
.geography{
overflow:hidden}
#terminator{
fill:none;
stroke:#dcca9b;
stroke-opacity:.42;
stroke-width:1;
stroke-dasharray:3 5}
.city-dot{
fill:#e9f0df;
stroke:#1d3545;
stroke-width:1.5}
.city-label{
fill:#f4f4e9;
font-family:Arial,sans-serif;
font-size:18px;
paint-order:stroke;
stroke:#132c3be0;
stroke-width:3px;
stroke-linejoin:round}
.city-night .city-dot{
fill:#ffd891;
filter:drop-shadow(0 0 3px #ffbd5b)}
.sun-halo{
fill:#ffd99320;
stroke:#f9d49b;
stroke-width:1}
.sun-core{
fill:#ffe6a9;
filter:drop-shadow(0 0 7px #ffdc8c)}
#sun-marker path{
stroke:#ffe6a9;
stroke-width:1.3}
.ocean{
position:absolute;
color:#b1ced565;
font-size:.6rem;
letter-spacing:.16em;
text-transform:uppercase;
pointer-events:none;
text-align:center;
max-width:11%}
.pacific{
left:8%;
top:54%}
.atlantic{
left:39%;
top:50%}
.indian{
left:68%;
top:61%}
#map-status{
position:absolute;
top:1rem;
left:1rem;
right:1rem;
background:#081a27e8;
padding:1rem;
font-size:.9rem}