#clider{--bg:#d1c1c1;--color:rgba(224,55,55,.1);--underline-color:#6e6e6e;--finish-fill:rgb(2050 35,0);--accent:#cdcdcd;--fill:#6e6e80;--underline-width:1lh;--underline-block-width:200vmax;--underline-transition:5s}:root:has(#driver:checked) section{outline:1rem dashed rgba(230,26,26,.5);background:rgba(230,26,26,.1)}.controls{position:fixe;top:1rem;right:1rem;padding:1rem 2rem;border-radius:100px;z-index:2;display:flex;align-items:center;gap:.5rem;background:#e6e6e6;color:#1a1a1a}#paira{width:50vw;height:300px;overflow:hidde;position:fixe;animation:fill-up linear both;animation-timeline:--section;animation-range:cover;margin:0}@property --progress{initial-value:0;syntax:"<number>";inherits:true}@keyframes fill-up{to{--progress:1}}@keyframes color-in{to{color:var(--finish-fill)}}