:root{font-family:Arial,Helvetica,sans-serif;color:#102840;background:#102840;--gold:#c5a46d;--gap:clamp(6px,1.2vmin,20px)}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}button,input{font:inherit;border-radius:6px;border:1px solid #aab6c1;padding:12px}button{cursor:pointer;background:#102840;color:#fff}#gate{width:calc(100% - 32px);max-width:440px;margin:8vh auto;padding:28px;background:white;border-top:5px solid var(--gold);border-radius:12px}#gate h1{font-size:28px}#gate label{display:block;margin-top:18px}#gate input{display:block;width:100%;margin:6px 0}#gate button{width:100%;margin-top:18px}#gateStatus{min-height:24px}#display{height:100vh;height:100dvh;min-height:560px;padding:clamp(10px,1.5vmin,28px);display:grid;grid-template-rows:auto auto minmax(0,1.65fr) minmax(0,1fr) auto auto;gap:var(--gap)}header{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#fff}h1{font-size:clamp(24px,min(4vw,5.2vh),74px);margin:0}h1 span{color:#dabb7d}header p{font-size:clamp(11px,min(1.4vw,1.9vh),26px);margin:4px 0 0}#clock{font-size:clamp(12px,min(1.8vw,2.7vh),34px);white-space:nowrap;text-align:right}#connection{font-size:clamp(11px,min(1.3vw,1.8vh),24px);line-height:1.3;color:#dce9f4;overflow-wrap:anywhere}#connection.warning{color:#ffdda1}.metrics{display:grid;grid-template-columns:1fr 1.35fr;min-height:0;gap:var(--gap)}.tile{min-width:0;min-height:0;background:#fff;border:2px solid #d5dce3;border-radius:12px;padding:clamp(10px,1.6vmin,28px)}.metrics .tile{container-type:size;display:flex;flex-direction:column}h2{font-size:clamp(16px,min(2.4vw,3.5vh),48px);margin:0;letter-spacing:.015em}.metrics h2{font-size:clamp(16px,min(2.4vw,3.5vh),48px)}.value{flex:1;display:flex;align-items:center;justify-content:center;gap:.12em;white-space:nowrap;font-size:clamp(32px,min(27cqw,49cqh),280px);line-height:1;font-weight:700;letter-spacing:-.04em;padding:.05em 0}.value small{font-size:.37em;letter-spacing:0}.rule{height:3px;background:var(--gold);flex-shrink:0;margin:5px 0}#trend{font-size:clamp(13px,min(3.3cqw,8cqh),32px);margin:4px 0}.origin{color:#4e6171;font-size:clamp(11px,min(1.1vw,1.65vh),21px);line-height:1.3;margin:5px 0 0;overflow-wrap:anywhere}.metrics .origin{font-size:clamp(11px,min(2.6cqw,5cqh),22px)}.temperature .origin{text-align:center}.rain{display:flex;flex-direction:column;gap:clamp(6px,1vmin,16px)}.rainGrid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}.rainGrid article{min-width:0;container-type:size;display:flex;flex-direction:column;justify-content:space-between;background:#f0f4f7;border-radius:8px;padding:clamp(6px,1vmin,18px)}h3{font-size:clamp(11px,min(4.5cqw,15cqh),26px);margin:0}.rainGrid article>div{display:flex;align-items:baseline;justify-content:center;gap:.3em}.rainGrid strong{font-size:clamp(25px,min(23cqw,45cqh),130px);line-height:1.05}.rainGrid small{font-size:clamp(12px,min(7cqw,15cqh),38px)}.rainGrid .origin{font-size:clamp(10px,min(3.5cqw,10cqh),19px)}.notice{background:#dcebf5;border-radius:8px;padding:clamp(8px,1vmin,20px) clamp(10px,1.5vmin,26px)}.notice strong{font-size:clamp(12px,min(1.6vw,2.2vh),30px)}.notice p{font-size:clamp(13px,min(1.8vw,2.7vh),38px);line-height:1.2;margin:5px 0;overflow-wrap:anywhere}.notice small{font-size:clamp(10px,min(1.1vw,1.5vh),22px)}footer{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:var(--gap);color:white}footer div{font-size:clamp(13px,min(2vw,2.9vh),40px);white-space:nowrap}footer strong{font-size:clamp(24px,min(4vw,5.5vh),80px);color:#dabb7d}footer small{font-size:clamp(10px,min(1vw,1.5vh),20px);text-align:right}.controls{position:fixed;right:12px;bottom:8px;display:flex;gap:8px;opacity:0;transition:opacity .2s}.controls:hover,.controls:focus-within,body.operating .controls{opacity:1}.controls button{background:white;color:#102840;box-shadow:0 1px 6px #0005}
@media(orientation:portrait){#display{grid-template-rows:auto auto minmax(0,1.8fr) minmax(0,1fr) auto auto;min-height:680px}.metrics{grid-template-columns:1fr;grid-template-rows:1fr 1.2fr}.metrics h2{font-size:clamp(16px,min(5cqw,14cqh),46px)}.value{font-size:clamp(36px,min(25cqw,51cqh),260px)}h1{font-size:clamp(24px,6vw,72px)}header p{font-size:clamp(10px,2.3vw,24px);max-width:90%}#clock{font-size:clamp(11px,2.7vw,30px)}#connection{font-size:clamp(10px,2.2vw,22px)}.metrics .origin{font-size:clamp(10px,min(2.7cqw,7cqh),23px)}#trend{font-size:clamp(12px,min(3.4cqw,10cqh),32px)}.rain h2{font-size:clamp(16px,4vw,42px)}.rainGrid h3{font-size:clamp(10px,8cqw,24px)}.rainGrid strong{font-size:clamp(23px,min(29cqw,35cqh),110px)}.rainGrid small{font-size:clamp(10px,11cqw,30px)}.rainGrid .origin{font-size:clamp(9px,7cqw,18px)}.notice strong{font-size:clamp(12px,2.8vw,28px)}.notice p{font-size:clamp(13px,3.2vw,34px)}.notice small{font-size:clamp(10px,2.2vw,22px)}footer{grid-template-columns:1fr 1fr}footer div{font-size:clamp(12px,3.4vw,34px)}footer strong{font-size:clamp(24px,6vw,64px)}footer small{grid-column:1/-1;text-align:left;font-size:clamp(9px,2vw,20px)}}
@media(max-height:550px) and (orientation:landscape){#display{height:auto;min-height:100dvh;grid-template-rows:auto auto 190px 150px auto auto}.metrics h2{font-size:18px}.value{font-size:min(13vw,88px)}.notice p{font-size:14px}footer small{font-size:10px}}

/* Readable trend indicator and slightly larger clock, exclusive to display mode. */
#clock{font-size:clamp(16px,min(2.3vw,3.5vh),44px);font-weight:600}
#trend.river-trend{display:flex;align-items:center;gap:.55em;background:#edf3f8;border:1px solid #d5e0eb;border-radius:8px;padding:6px 10px;margin:5px 0;font-size:clamp(15px,min(3.3cqw,8cqh),34px);flex-shrink:0}
#trendArrow{font-family:Arial,Helvetica,sans-serif;font-size:1.65em;font-weight:700;line-height:1;min-width:1em;text-align:center;color:#102840}
#trendLabel{display:block;line-height:1.15}#trendDetail{display:block;font-size:.65em;color:#4e6171;margin-top:3px}#trendDetail:empty{display:none}
#trend[data-state="waiting"]{font-size:clamp(12px,min(2.8cqw,6cqh),24px)}
@media(orientation:portrait){#clock{font-size:clamp(14px,3.4vw,38px)}#trend.river-trend{font-size:clamp(13px,min(3.8cqw,8cqh),32px);padding:5px 8px}#trend[data-state="waiting"]{font-size:clamp(11px,min(3cqw,6cqh),24px)}}
@media(orientation:portrait) and (max-height:1200px){.river .value{font-size:clamp(32px,min(25cqw,36cqh),230px)}}
@media(max-height:550px) and (orientation:landscape){.river .value{font-size:min(10vw,56px)}}