*{margin:0;padding:0;box-sizing:border-box}body{font-family:Montserrat,sans-serif;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#f5f5f5}h1{text-align:center;margin-bottom:30px;color:#333}.container{width:100%;max-width:900px;margin:0 auto;position:relative}.ruler-container{margin-bottom:40px;position:relative}.axis-label{font-weight:700;margin-bottom:5px}.ruler{height:40px;background-color:#e0e0e0;position:relative;border-radius:5px}.ruler:before{content:"";position:absolute;height:100%;width:2px;background-color:#333}.ruler:before{left:0}.ruler:after{right:0}.mark{background-color:#000;width:2px;position:absolute;top:0;bottom:0}.label{position:absolute;top:45px;transform:translate(-50%);text-align:center;white-space:nowrap}#void-ratio .mark,#porosity .mark,#solid-fraction .mark{height:100%}.vertical-line{position:absolute;top:23px;left:0;height:calc(100% - 62px);width:2px;background-color:red;z-index:10;pointer-events:none;display:none}.marker{position:absolute;top:40px;font-size:12px;margin-left:10px}.arrow-container{margin-top:20px;text-align:center}.arrow-container .label{position:static;display:inline-block;margin:0 20px;font-weight:700;transform:none}.double-arrow{display:inline-block;width:100px;height:2px;background-color:#333;position:relative;margin:0 10px}.double-arrow:before,.double-arrow:after{content:"";position:absolute;width:0;height:0;border-style:solid;top:50%;transform:translateY(-50%)}.double-arrow:before{left:-5px;border-width:5px 5px 5px 0;border-color:transparent #333 transparent transparent}.double-arrow:after{right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent #333}