h1{text-align:center;font-size:20px;margin-bottom:20px;margin-top:30px}.box{max-width:500px;background:#fff;padding:15px;margin:auto;border:1px solid #ddd;border-radius:6px}@media (max-width:767px){.box{max-width:90%}}label{display:block;margin:15px 0 5px;font-size:14px}input[type="range"]{width:100%}.display-value{text-align:right;font-weight:700;font-size:14px;margin-top:3px}button{width:100%;margin-top:20px;padding:10px;background:#008c5f;color:#fff;border:none;font-size:16px;border-radius:4px;cursor:pointer}.results{margin-top:25px;border-top:1px solid #ccc;padding-top:15px}.results div{display:flex;justify-content:space-between;margin-bottom:10px}.results span{font-weight:700}ul{padding-left:20px}table{width:100%;border-collapse:collapse;margin-top:15px}table,th,td{border:1px solid #ccc}th,td{padding:10px;text-align:left}th{background-color:#f0f0f0}