:root{--bg:#f7fafc;--card:#fff;--accent:#1f6feb;--muted:#6b7280}
*{box-sizing:border-box;font-family:Inter,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial}
body{margin:0;background:var(--bg);color:#111}
.container{max-width:820px;margin:36px auto;padding:24px}
h1{margin:0 0 18px;font-size:20px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
label{display:block;background:var(--card);padding:12px;border-radius:6px;border:1px solid #e6e9ee}
.range-row{display:flex;align-items:center;gap:8px}
input[type=range]{flex:1}
output{min-width:48px;text-align:right;font-weight:600}
.actions{grid-column:1/-1;display:flex;justify-content:flex-end}
button{background:var(--accent);color:white;border:0;padding:8px 12px;border-radius:6px;cursor:pointer}
.results{margin-top:18px;background:var(--card);padding:12px;border-radius:6px;border:1px solid #e6e9ee;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.results div{padding:6px}
footer{margin-top:12px;color:var(--muted)}
:root{--bg:#f7fafc;--card:#fff;--accent:#1f6feb;--muted:#6b7280}
*{box-sizing:border-box;font-family:Inter,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial}
body{margin:0;background:var(--bg);color:#111}
.container{max-width:820px;margin:36px auto;padding:24px}
h1{margin:0 0 18px;font-size:20px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
label{display:block;background:var(--card);padding:12px;border-radius:6px;border:1px solid #e6e9ee}
input{width:100%;border:0;font-size:16px;padding:6px 4px}
.actions{grid-column:1/-1;display:flex;justify-content:flex-end}
button{background:var(--accent);color:white;border:0;padding:8px 12px;border-radius:6px;cursor:pointer}
.results{margin-top:18px;background:var(--card);padding:12px;border-radius:6px;border:1px solid #e6e9ee;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.results div{padding:6px}
footer{margin-top:12px;color:var(--muted)}