*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#081e29;color:#fff;font-family:Arial,Helvetica,sans-serif}#stage{position:absolute;width:640px;height:1920px;transform-origin:top left;overflow:hidden;background:#164f68}canvas,.shade{position:absolute;inset:0;width:100%;height:100%}.shade{background:linear-gradient(180deg,rgba(4,23,40,.4),transparent 33%,transparent 52%,rgba(4,23,34,.75) 75%,#092631 100%)}header,.current,.landmark,.forecast,footer{position:absolute;left:44px;right:44px}header{top:54px}.eyebrow{font-size:13px;letter-spacing:2px;display:flex;align-items:center;gap:10px;font-weight:700}.eyebrow>span:last-child{margin-left:auto;font-size:11px;opacity:.65}.live{width:8px;height:8px;border-radius:50%;background:#c2f7b7;box-shadow:0 0 20px #d7ffaa}h1{font-size:56.35px;line-height:1.03;letter-spacing:-2px;font-weight:400;margin:36px 0 24px}h1 strong{font-weight:750}#date{text-transform:capitalize;font-size:21px;color:#e0eced}#clock{font-size:100px;font-weight:700;letter-spacing:-5px;margin-top:8px;font-variant-numeric:tabular-nums}#clock small{font-size:29px;letter-spacing:0;margin-left:12px;color:#c5dee2}.current{top:420px}.label{font-size:16px;letter-spacing:5px;opacity:.8}#temperature{font-size:196px;font-weight:700;line-height:1.15;letter-spacing:-12px}#temperature sup{font-size:96px;vertical-align:top;position:relative;top:19px;letter-spacing:0}#condition{font-size:32px;font-weight:700;line-height:1.15}#feels{font-size:20px;margin-top:15px;opacity:.8}.landmark{top:1185px;display:flex;align-items:center;gap:20px;font-size:11px;letter-spacing:3px;opacity:.85}.landmark i{flex:1;height:1px;background:#ffffff60}.forecast{top:1260px;border:1px solid #c1eeee38;background:linear-gradient(140deg,#3b7e8455,#0b34478c);border-radius:32px;padding:30px 28px;box-shadow:0 15px 50px #00131e33;backdrop-filter:blur(12px)}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.section-title h2{font-size:29px;letter-spacing:-1px;margin:0}.section-title>span{font-size:12px;letter-spacing:2px;color:#abd4d8}.hour{display:grid;grid-template-columns:110px 70px 1fr 90px;align-items:center;min-height:94px;border-bottom:1px solid #c3eced27;font-variant-numeric:tabular-nums}.hour:last-child{border:0}.hour time{font-size:27px}.hour .symbol{font-size:34px}.hour strong{font-size:37px}.hour .rain{color:#b8e5e9;font-size:23px;text-align:right}footer{top:1750px;font-size:14px;line-height:1.8;opacity:.8}footer a{color:inherit}#freshness{font-size:17px}#demo{color:#ffe2a8;font-size:18px;font-weight:bold}.progress{position:absolute;bottom:0;left:0;height:5px;background:#c8efdf;width:100%;transform-origin:left;animation:progress 15s linear infinite}body.paused *{animation-play-state:paused!important}@keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}@media(prefers-reduced-motion:reduce){.progress{animation:none}}

/* Interface simplificada: os textos auxiliares ficam fora da exibição. */
[hidden]{display:none!important}
header h1{margin-top:0}

/* Temperatura com ícone vetorial e unidade explícita. */
.temperature-line{display:flex;align-items:center;gap:18px;width:100%}
#currentIcon{width:144px;flex:0 0 144px;filter:drop-shadow(0 10px 20px #00172540)}
#currentIcon svg{display:block;width:100%;height:auto}
#temperature{font-size:164px;letter-spacing:-9px;white-space:nowrap;line-height:1.2}
#temperature sup{font-size:56px;top:26px;color:#bceaf4;letter-spacing:-2px}
@font-face{font-family:ClimaDisplay;src:url('fonts/DejaVuSans-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
.forecast{top:1110px;left:24px;right:24px;padding:30px 24px;border-radius:34px;background:linear-gradient(145deg,#173c58f2,#092b3aee);border:2px solid #61b8ca66;box-shadow:0 20px 70px #00111d66;font-family:ClimaDisplay,'Segoe UI',sans-serif;font-weight:700;min-height:724px}
.section-title{margin-bottom:20px;min-height:46px}
.section-title h2{font-size:35px;color:#8ee7e0;letter-spacing:-1.2px}
.section-title>span{font-size:17px;color:#8bd6f5;letter-spacing:1px}
.hour{grid-template-columns:124px 76px 1fr 110px;gap:8px;min-height:146px;border-bottom:1px solid #9fe6f02b}
.hour time{font-size:36px;letter-spacing:-1px;color:#e2eaf8}
.hour .symbol svg{display:block;width:72px;height:78px}
.hour strong{font-size:47px;letter-spacing:-2px;color:#ffd580;white-space:nowrap}
.hour strong small{font-size:22px;letter-spacing:-1px;margin-left:3px;vertical-align:top;position:relative;top:9px;color:#ffe6b5}
.hour .rain{color:#84ddff;font-size:30px;letter-spacing:-1px;background:#3698c51c;border-radius:16px;padding:12px 6px;text-align:center}
#hours{font-size:22px;color:#c7dce8}

/* V4: pequeno movimento no ícone; todos os números permanecem estáveis. */
#currentIcon{animation:weather-float 2.5s ease-in-out infinite}
@keyframes weather-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){#currentIcon{animation:none}}

/* Paisagem Ibituruna: preserva a vista entre os dados e a previsão. */
.shade{background:linear-gradient(180deg,rgba(2,12,30,.25),rgba(2,12,30,.08) 36%,transparent 42%,transparent 55%,rgba(3,20,35,.65) 76%,#061c2e 100%)}
header,.current{text-shadow:0 2px 14px #00132688}
#condition{font-size:29px;max-width:540px}
.forecast{background:linear-gradient(145deg,#15344bef,#082237f5)}
footer{top:1840px;font-size:12px;line-height:1.5}
#freshness{font-size:15px}

/* Data maior e remoção dos textos auxiliares solicitados. */
#condition,#freshness,footer>div:nth-child(2){display:none!important}
#date{font-size:32px;font-weight:700;line-height:1.25;color:#eef7ff;text-transform:none}

/* Ajustes de tipografia e espaço para a previsão. */
#clock { font-size: 143.0px; line-height: 1.05; white-space: nowrap; }
#clock small { font-size: 41.470px; }
#date { font-size: 29px; white-space: nowrap; }
.label { font-size: 20.80px; }
#temperature { font-size: 234.520px; }
#temperature sup { font-size: 80.080px; }
#feels { font-size: 26.00px; }
.section-title h2 { font-size: 50.050px; }
.section-title > span { font-size: 24.310px; }
.hour time { font-size: 51.480px; }
.hour strong { font-size: 67.210px; }
.hour strong small { font-size: 31.460px; }
.hour .rain { font-size: 42.900px; }
#hours { font-size: 31.460px; }

.section-title { flex-wrap: wrap; gap: 4px 12px; }
.forecast { padding-inline: 18px; }
.hour { grid-template-columns: 165px 64px minmax(0, 1fr) 132px; gap: 6px; }
.hour .symbol svg { width: 64px; }
.hour .rain { padding-inline: 4px; }
