*{box-sizing:border-box}body{margin:0;background:#f5f1e9;color:#302c24;font:15px system-ui,sans-serif}header,main{max-width:1280px;margin:auto;padding:28px 44px}header{border-bottom:1px solid #d8d0bf;display:flex;justify-content:space-between;align-items:center}header a{font-size:29px;letter-spacing:-.05em;font-weight:650;color:inherit;text-decoration:none}header a span{color:#ad4b26;margin-left:10px}header>span{font-size:10px;letter-spacing:.12em;color:#857c6c}.intro{display:flex;justify-content:space-between;align-items:end;padding:35px 0 50px}.intro div>p{font-size:10px;letter-spacing:.12em;color:#857c6c}h1{font:400 clamp(42px,5.5vw,72px)/1.04 Georgia,serif;letter-spacing:-.05em;margin:20px 0 0}.intro>p{font-size:14px;line-height:1.8;color:#857c6c}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}article{padding:32px;border-radius:5px}.percent{background:#e7d9b5}.change{background:#e1e8dc}.number{font-size:10px;letter-spacing:.12em;color:#736b58}h2{font-size:23px;font-weight:500;letter-spacing:-.035em;margin:20px 0 28px}h2 em{font-family:Georgia,serif;font-weight:400}.inputs,.ratio-inputs{display:flex;gap:20px}label{display:flex;flex-direction:column;gap:10px;font-size:11px;color:#736b58;flex:1;min-width:0}input{width:100%;background:transparent;color:#302c24;border:0;border-bottom:1px solid #a99c7d;font:26px system-ui;padding:10px 0;min-width:0}article>output{display:block;font-size:64px;letter-spacing:-.06em;margin-top:24px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}article>p{font-size:12px;min-height:20px;color:#736b58}.ratio{grid-column:1/-1;background:#2e382f;color:#eef1dc;display:grid;grid-template-columns:1.2fr 1fr;gap:40px}.ratio .number,.ratio label,.ratio>div>p{color:#bac2a4}.ratio input{color:inherit;border-color:#77816d}.ratio h2{font:36px/1.1 Georgia}.ratio-inputs{gap:16px}.ratio-inputs input{font-size:22px}.ratio>div>p{font-size:12px}.visual{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:240px}#shape{width:230px;max-width:100%;border:1px solid #cad5ac;background:repeating-linear-gradient(45deg,transparent,transparent 8px,#ffffff09 8px,#ffffff09 9px);display:flex;justify-content:center;align-items:center;min-height:25px}#dimensions{font-size:11px;padding:8px;overflow-wrap:anywhere;text-align:center}.visual>p{font-size:10px;letter-spacing:.1em;display:flex;align-items:center;gap:16px}.visual output{font-size:32px;letter-spacing:-.04em}footer{padding:30px 0;display:flex;justify-content:space-between;font-size:11px;color:#857c6c;gap:20px}:focus-visible{outline:2px solid #ad4b26;outline-offset:4px}@media(max-width:750px){header,main{padding:22px}header>span{display:none}.intro{display:block;padding:15px 0 25px}.intro>p{margin-top:24px}.grid{grid-template-columns:1fr}article{padding:24px}.ratio{grid-column:auto;grid-template-columns:1fr;gap:12px}.ratio-inputs{gap:12px}.ratio-inputs input{font-size:19px}.visual{min-height:200px}footer{display:block;line-height:1.7}footer span{display:block;margin-bottom:10px}}