.ruler-container{text-align:center;user-select:none;box-sizing:border-box;background:#f5efe6;border-radius:16px;width:100%;max-width:100%;margin:0 auto;padding:20px 15px;font-family:Arial,sans-serif;box-shadow:0 0 5px #e5e5e5}@media (width>=480px){.ruler-container{padding:30px}}.ruler-container *{user-select:none}.unit-toggle{border:1px solid #ddd;border-radius:999px;margin:10px auto 20px;display:inline-flex;overflow:hidden}.unit-toggle div{cursor:pointer;color:#f58a06;text-align:center;background:#fff;min-width:60px;padding:8px 20px;font-size:16px;font-weight:700}.unit-toggle .active{color:#fff;background:#f58a06}.weight-display{color:#333;margin:10px 0;font-size:36px;font-weight:700}@media (width>=480px){.weight-display{font-size:48px}}.weight-display span{color:#666;margin-left:4px;font-size:24px}.ruler-wrapper{margin:20px 0;position:relative}.ruler-scroll{cursor:grab;-ms-overflow-style:none;scrollbar-width:none;touch-action:none;width:calc(100% + 20px);margin:0 -10px;padding:15px 10px;display:flex;position:relative;left:-10px;overflow-x:auto}.ruler-scroll::-webkit-scrollbar{display:none}.ruler-scroll.grabbing{cursor:grabbing}.ruler-mark{flex-direction:column;flex-shrink:0;align-items:center;width:5px;display:flex}.tick{background-color:#999;width:2px;height:10px}.tick.big{background-color:#f58a06;height:20px}.tick-label{display:none}.ruler-pointer{z-index:2;pointer-events:none;border-top:8px solid #f58a06;border-left:6px solid #0000;border-right:6px solid #0000;width:0;height:0;position:absolute;bottom:-6px;left:50%;transform:translate(-50%)}.instruction{color:#666;margin-top:12px;font-size:14px}.continue-button{color:#fff;cursor:pointer;background:#f58a06;border:none;border-radius:8px;margin-top:20px;padding:14px 32px;font-size:16px;transition:background .3s}.continue-button:hover{background:#e06500}