Tactile form controls

<form><span class="eyebrow">MAKE IT FEEL LIKE YOU</span><h1>A few small preferences.</h1><fieldset><legend>Your creative rhythm</legend><label class="option"><input type="radio" name="rhythm" value="calm" checked><span>☾ <b>Slow & steady</b><small>A little room to think.</small></span></label><label class="option"><input type="radio" name="rhythm" value="bold"><span>ϟ <b>Full of energy</b><small>Follow every spark.</small></span></label></fieldset><label class="range-label" for="intensity">A little more atmosphere <output id="level">60%</output></label><input id="intensity" type="range" min="0" max="100" value="60"><button>Save my space <span>→</span></button><output id="saved" aria-live="polite"></output></form>

*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;font-family:system-ui,sans-serif;background:#0b1020;color:#eaf0ff;padding:35px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #63dbea;outline-offset:4px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}body{background:#111b27}form{width:340px;max-width:100%;padding:28px;background:#172330;border:1px solid #304151;border-radius:17px}.eyebrow{font-size:7px;letter-spacing:2px;color:#89afa9}h1{font-size:23px;font-weight:500;letter-spacing:-.7px;margin:12px 0 24px}fieldset{border:0;margin:0;padding:0}legend{font-size:9px;color:#99adbc;margin-bottom:12px}.option{display:block;margin-bottom:10px;position:relative}.option>input{position:absolute;right:14px;top:20px;accent-color:#8cbcb0}.option>span{display:block;border:1px solid #344652;padding:13px 15px;border-radius:8px;font-size:16px;color:#99bdba;cursor:pointer}.option b{font-size:10px;font-weight:400;margin-left:8px;color:#d9e7e7}.option small{display:block;font-size:8px;color:#809ba6;margin:4px 0 0 25px}.option:has(input:checked)>span{background:#75aa9920;border-color:#7eb4a870}.range-label{display:flex;justify-content:space-between;font-size:9px;color:#9db5ba;margin:25px 0 12px}input[type=range]{width:100%;accent-color:#8fc4b1;height:4px}button{display:flex;justify-content:space-between;background:#8fbdae;color:#163b34;border:0;border-radius:7px;padding:12px 14px;width:100%;margin-top:26px;font-size:10px}#saved{display:block;color:#98d2bb;font-size:9px;margin-top:12px}

document.getElementById("intensity").addEventListener("input",e=>document.getElementById("level").textContent=e.target.value+"%");document.querySelector("form").addEventListener("submit",e=>{e.preventDefault();document.getElementById("saved").textContent="Your demo preferences are set ✓"});