*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#eef2ff,#f8fafc);font-family:Inter,Segoe UI,sans-serif;min-height:100vh;padding:30px}.wrapper{background:#fff;border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.08);margin:0 auto;max-width:520px;padding:30px;transition:.3s;width:100%}.wrapper:hover{transform:translateY(-4px)}h1{color:#1e293b;font-size:28px;text-align:center}.row,h1{margin-bottom:25px}label{color:#475569;display:block;font-weight:600;margin-bottom:10px}input[type=range]{appearance:none;background:linear-gradient(90deg,#6366f1,#22c55e);border-radius:10px;height:6px;outline:none;width:100%}input[type=range]::-webkit-slider-thumb{appearance:none;background:#fff;border:3px solid #4f46e5;border-radius:50%;cursor:pointer;height:18px;transition:.2s;width:18px}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.row span{color:#4f46e5;display:inline-block;font-weight:600;margin-top:8px}.output{background:linear-gradient(135deg,#f1f5f9,#fff);border:1px solid #e2e8f0;border-radius:16px;margin-top:30px;padding:20px}.output p{align-items:center;color:#334155;display:flex;font-size:15px;justify-content:space-between;margin-bottom:14px}.result{color:#16a34a;font-size:16px;font-weight:700}.output p:not(:last-child){border-bottom:1px dashed #e2e8f0;padding-bottom:8px}.output span,label{align-items:center;display:flex;gap:8px}svg{flex-shrink:0}@media (max-width:600px){.wrapper{padding:20px}h1{font-size:22px}}