body{margin:0;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#111;color:#fff;font-family:Segoe UI,Arial,sans-serif}
#title{font-size:4vw;margin-bottom:1vw;min-height:1em}
#clock{display:flex;align-items:flex-start;font-size:18vw;font-variant-numeric:tabular-nums;font-weight:700;line-height:1}
.unit{display:flex;flex-direction:column;align-items:center}
.lbl{font-size:2vw;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:#aaa;margin-top:.5vw}
.green{color:#2ecc71}.yellow{color:#f1c40f}.red{color:#e74c3c}
.row{margin-top:2vw;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center}
input,button{font-size:18px;padding:8px 12px;border-radius:6px;border:1px solid #555;background:#222;color:#fff}
input.n{width:70px}button{cursor:pointer}button:hover{background:#333}
#status{position:fixed;bottom:8px;right:12px;font-size:13px;color:#888}
.hidden{display:none!important}

body.loading #clock,body.loading #title{visibility:hidden}
body.loading #status{position:static;font-size:2.5vw;color:#777;margin-top:2vw;text-align:center;max-width:90vw}
#msg{font-size:3.5vw;margin-top:2vw;color:#ddd;text-align:center;max-width:90vw;min-height:1em}
body.loading #msg{visibility:hidden}