*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-color:#02343f;--text-color:#f0edcc;--accent-color:#f4a261;--muted-color:#5f8a8b;--dropdown-bg:#0d5060}:root.light{--bg-color:#f0edcc;--text-color:#02343f;--muted-color:#3a7a7b;--dropdown-bg:#dbd8b8}body{background:var(--bg-color);min-height:100dvh;color:var(--text-color);flex-direction:column;justify-content:center;align-items:center;font-family:system-ui,sans-serif;display:flex}h1{margin-bottom:1.5rem;font-size:2rem}#box{flex-wrap:wrap;justify-content:center;align-items:center;gap:.3rem;font-size:1.1rem;font-weight:600;line-height:2.5;display:flex}#distance-wrap{display:inline-block;position:relative}#theme-toggle{border:1.5px solid var(--muted-color);cursor:pointer;color:var(--text-color);background:0 0;border-radius:6px;padding:.3rem .5rem;font-size:1rem;line-height:1;position:fixed;top:1rem;right:1rem}#theme-toggle:hover{border-color:var(--accent-color)}#distance-dropdown{background:var(--dropdown-bg);border:1.5px solid var(--muted-color);z-index:10;border-radius:6px;flex-direction:column;gap:.15rem;min-width:140px;padding:.25rem;display:none;position:absolute;top:calc(100% + 4px);left:50%;transform:translate(-50%)}#distance-dropdown.open{display:flex}#distance-dropdown button{text-align:left;cursor:pointer;white-space:nowrap;color:var(--text-color);background:0 0;border:none;border-radius:4px;padding:.3rem .6rem;font-size:.9rem;font-weight:600}#distance-dropdown button:hover{background:var(--accent-color);color:var(--bg-color)}.num-input,.time-box input{text-align:center;border:none;border-bottom:2px solid var(--muted-color);color:var(--text-color);background:0 0;outline:none;padding:.1rem .2rem;font-family:ui-monospace,monospace;font-size:1.1rem;font-weight:700}.num-input{width:6ch}.num-input:focus,.time-box input:focus{border-bottom-color:var(--accent-color);color:var(--accent-color)}.time-box{align-items:center;gap:1px;display:inline-flex}.time-box input{width:3ch}.sep{margin-bottom:2px;font-weight:700;line-height:1}#unit-box{height:1.4em;line-height:1.4;display:inline-block}#unit{color:var(--muted-color);flex-direction:column;font-size:1rem;font-weight:700;line-height:1.4;transition:transform .3s cubic-bezier(.34,1.56,.64,1);display:flex}#unit.mi-selected{transform:translateY(-1.4em)}#unit>div{cursor:pointer;-webkit-user-select:none;user-select:none;height:1.4em;padding:0 .2rem;transition:color .15s}#unit>div:hover,#unit>div.active{color:var(--accent-color)}