*{box-sizing:border-box}body{margin:0;background:#fafafa;font:16px 'Open Sans',Arial,sans-serif;color:#555}header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 30px;background:white}header img{width:170px}header a{color:#333;text-decoration:none;font-size:13px}.banner{text-align:center;background:white;border-bottom:1px solid #ddd;padding:20px 0 0}.banner img{max-width:100%;height:auto}main{max-width:1000px;margin:auto;padding:20px}h1{text-align:center;font-size:50px;color:#db393d}h2{font-size:30px;color:black;margin:20px 0;padding:10px 15px}h3{background:#222;color:white;font-size:14px;font-weight:400;text-transform:uppercase;padding:10px 15px;margin:0 -15px 20px}h4{font-size:21px;font-weight:400;display:flex;gap:10px;align-items:center;margin:0}h4 img{width:70px;flex-shrink:0}.row{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:center;padding:10px 0}.row>label{font-size:21px;font-weight:700;color:black;padding:10px 15px}.sizes,.products{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:center}.sizes img{display:block;width:90%;margin:auto}.products img{max-width:100%}input[type=number]{padding:10px;width:200px;max-width:100%;font:27px 'Open Sans',sans-serif;text-align:center;border:1px solid #ddd;border-radius:3px}input[type=radio]{width:20px;height:20px;accent-color:#db393d}small{display:block;padding:10px;color:#777;font-size:14px}hr{border:0;border-top:1px solid #ddd}.output{margin:50px 0;border:1px solid #222;padding:0 15px 40px;border-radius:3px}.metric{padding:25px 0;border-bottom:1px solid #ddd}.metric:last-child{border:0}output{display:block;background:white;box-shadow:3px 3px #ddd;border:1px solid #ddd;font-size:clamp(28px,4vw,50px);font-weight:700;text-align:center;color:black;overflow-wrap:anywhere}.red h4,.red output{color:#db393d}.green h4{color:#15a004}.note{font-size:13px;color:#777;padding-left:80px}.actions{display:flex;justify-content:center;gap:12px;margin:20px 0;flex-wrap:wrap}button{font:16px 'Open Sans',sans-serif;padding:10px 16px;border:1px solid #ccc;border-radius:4px;background:white;color:#333;cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}.notice{text-align:center;font-size:13px;line-height:1.5}footer{text-align:center;padding:50px;font-size:14px}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #db393d;outline-offset:3px}@media(max-width:760px){header{padding:15px}header img{width:120px}.row{grid-template-columns:1fr}.sizes{max-width:320px;margin:auto}.row>div{text-align:center}.row>label{font-size:16px;text-align:center}h1{font-size:32px}h2{text-align:center;font-size:24px}h4{font-size:16px;text-align:left}h4 img{width:40px}.note{padding-left:50px;text-align:left}.metric{gap:12px}.output{margin:30px 0}}@media print{header>a:last-child,.actions,.notice{display:none}.banner img{max-height:110px}.row{grid-template-columns:2fr 1fr;padding:4px 0}.sizes{max-width:140px}.output{margin:15px 0;padding-bottom:10px}.metric{break-inside:avoid;padding:8px 0}h4{font-size:14px}h4 img{width:35px}output{font-size:26px}h2{font-size:18px}.row>label{font-size:14px}footer{padding:10px}main{padding:10px}input[type=number]{font-size:18px;padding:3px}}