:root{
color-scheme:dark;
--bg:#081a27;
--text:#eaf1ed;
--muted:#8ba5ad;
--line:#28424f;
--accent:#e4c289;
font-family:Inter,"Helvetica Neue",Arial,sans-serif;
font-size:clamp(12px,.92vw,64px)}

*{
box-sizing:border-box}
body{
margin:0;
background:var(--bg);
color:var(--text)}
button,input,summary{
font:inherit}
button,summary{
cursor:pointer}
button{
color:inherit;
border:1px solid transparent;
background:transparent;
border-radius:.4rem;
min-height:2.75rem;
padding:.55rem .95rem}
button:hover,summary:hover{
background:#ffffff0c}
button:focus-visible,summary:focus-visible,input:focus-visible,a:focus-visible{
outline:2px solid var(--accent);
outline-offset:4px}
button[aria-pressed=true]{
background:#29414c;
color:#fff}
button:disabled{
opacity:.5;
cursor:wait}
button,summary{
-webkit-tap-highlight-color:transparent}
a{
color:inherit;
text-decoration:none}
a:hover{
text-decoration:underline}
[hidden]{
display:none!important}

.app{
min-height:100vh;
min-height:100svh;
height:100vh;
height:var(--viewport-height,100vh);
display:flex;
flex-direction:column;
padding:max(1.7rem,env(safe-area-inset-top)) max(2.4rem,env(safe-area-inset-right)) max(1.1rem,env(safe-area-inset-bottom)) max(2.4rem,env(safe-area-inset-left));
gap:1.3rem;
overflow:visible}

.topbar,.top-actions,.brand,.readout,.secondary-readouts,.map-caption,.controls,.credits{
display:flex;
align-items:center;
justify-content:space-between}
.topbar{
flex:none}
.brand{
gap:.75rem}
.earth-icon{
font-size:2.65rem;
color:#dce6de;
line-height:1}
h1{
margin:0;
font-size:1.1rem;
font-weight:500;
letter-spacing:.13em;
text-transform:uppercase}
.brand p{
font-size:.72rem;
margin:.25rem 0 0;
text-transform:uppercase;
letter-spacing:.13em;
color:var(--muted)}
.top-actions{
gap:1rem}
.switch{
display:flex;
padding:.2rem;
border:1px solid var(--line);
border-radius:.55rem;
font-size:.85rem}
.switch button{
min-height:2.2rem;
padding:.4rem 1.2rem}
.icon-button{
font-size:1.55rem;
border:1px solid var(--line);
padding:.25rem .65rem}

.readout{
align-items:flex-start;
gap:2rem;
padding-top:.3rem;
flex:none}
.eyebrow{
color:var(--muted);
font-size:.7rem;
letter-spacing:.085em;
text-transform:uppercase;
margin-bottom:.5rem;
display:flex;
align-items:center;
gap:.55rem}
#timezone{
letter-spacing:0;
text-transform:none;
color:#b8cbcd;
border-left:1px solid var(--line);
padding-left:.7rem;
min-height:1.5rem;
text-align:left}
.local-clock time{
display:block;
font-size:4.7rem;
line-height:1.08;
font-weight:300;
letter-spacing:-.035em;
font-variant-numeric:tabular-nums}
.date{
font-size:.86rem;
color:var(--muted);
margin-top:.5rem;
font-variant-numeric:tabular-nums}
.secondary-readouts{
gap:4rem;
padding-top:.1rem;
align-items:flex-start}
.secondary-readouts time,#sun-coordinates{
font-size:1.7rem;
line-height:1.5;
font-weight:300;
font-variant-numeric:tabular-nums;
white-space:nowrap}
.sun-dot{
display:inline-block;
width:.45rem;
height:.45rem;
border-radius:50%;
background:var(--accent);
box-shadow:0 0 .6rem #edca8270}