@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Kanit:wght@400;500;600;700&display=swap');
:root{--ink:#092938;--sea:#007a8a;--paper:#e8f1ee;--foam:#f7fcf8;--lime:#d8fb68;--line:#b8ccca}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Kanit,sans-serif}.shell{width:min(1080px,calc(100% - 40px));margin:auto;padding:30px 0 70px}nav{display:flex;justify-content:space-between;align-items:center}.brand{color:var(--ink);text-decoration:none;font:500 19px 'DM Mono',monospace;letter-spacing:-1px}.brand span{color:var(--sea)}nav p,.eyebrow,.card>p,.updated,footer{font:500 11px 'DM Mono',monospace;letter-spacing:1.1px}nav p{color:#507078}header{padding:90px 0 42px}.eyebrow{margin:0 0 14px;color:#097e85}h1{margin:0;font-size:clamp(55px,9vw,106px);line-height:.91;letter-spacing:-5px}em{font-style:normal;color:var(--sea)}.intro{max-width:510px;margin:27px 0 0;color:#46636c;font-size:18px;line-height:1.7}.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.card{min-height:270px;padding:32px;border:1px solid var(--ink);background:var(--foam)}.card>p{margin:0;color:#3a6266}.score{background:var(--ink);color:var(--foam);box-shadow:10px 10px 0 var(--lime)}.score .card>p,.score p{color:#b3d5d3}.score-number{display:flex;align-items:baseline;gap:7px;margin:16px 0 0}.score-number b{font-size:80px;line-height:.9;letter-spacing:-4px}.score-number span{font:14px 'DM Mono',monospace}.score h2{margin:18px 0 13px;color:var(--lime);font-size:24px}.bar{width:100%;height:8px;background:#33515a}.bar i{display:block;width:5%;height:100%;background:var(--lime);transition:width .5s}.score small{display:block;margin-top:18px;color:#a7c2c2;font-size:12px}.temp{display:flex;flex-direction:column;margin:27px 0 13px}.temp b{font-size:78px;line-height:.9;letter-spacing:-4px}.temp span{margin-top:13px;color:var(--sea);font-size:20px}.weather small{color:#51696f}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:55px;border:1px solid var(--line);background:var(--line)}.metrics article{min-height:150px;padding:21px;background:var(--paper)}.metrics span{display:block;color:#54747a;font-size:15px}.metrics b{display:block;margin:12px 0 5px;font:500 28px 'DM Mono',monospace;letter-spacing:-2px}.metrics small{color:#668087;font-size:12px}.tips{display:grid;grid-template-columns:1fr 1.25fr;gap:60px;margin-top:85px;padding-top:30px;border-top:1px solid var(--line)}.tips h2{margin:0;font-size:clamp(29px,4vw,50px);line-height:1.12;letter-spacing:-2px}.tips ul{margin:0;padding:0;list-style:none}.tips li{display:grid;grid-template-columns:200px 1fr;gap:15px;padding:15px 0;border-top:1px solid var(--line)}.tips li:last-child{border-bottom:1px solid var(--line)}.tips li span{color:#537078;font-size:14px}.updated{margin:50px 0 0;color:#5a777d}footer{padding:24px calc((100% - min(1080px,calc(100% - 40px)))/2);color:#41636a;border-top:1px solid var(--line)}@media(max-width:650px){.shell{width:min(100% - 32px,1080px)}nav p{display:none}header{padding:65px 0 35px}h1{letter-spacing:-3px}.grid{grid-template-columns:1fr}.card{min-height:220px;padding:25px}.score{box-shadow:7px 7px 0 var(--lime)}.metrics{grid-template-columns:1fr 1fr;margin-top:50px}.tips{grid-template-columns:1fr;gap:28px;margin-top:60px}.tips li{grid-template-columns:1fr;gap:4px}.score-number b,.temp b{font-size:68px}}