/* Real radio inputs, with a single moving selection surface. */
.veyflux-app .direction-picker{border:0;padding:0;margin:25px 0 19px;min-width:0}
.veyflux-app .direction-picker legend{width:100%;display:flex;justify-content:space-between;gap:15px;font-size:14px;margin-bottom:12px;color:#e2e1d7}
.veyflux-app .direction-picker legend>span{font-size:11px;color:#86867d;align-self:center}
.veyflux-app .direction-track{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px;background:#0c0c0b;border:1px solid #383831;border-radius:10px;position:relative;isolation:isolate}
.veyflux-app .direction-selection{position:absolute;z-index:-1;left:6px;top:6px;bottom:6px;width:calc(50% - 9px);border-radius:5px;background:#deded0;box-shadow:0 1px 4px #0005;transition:transform .4s cubic-bezier(.2,.8,.2,1),background .3s;pointer-events:none}
.veyflux-app .direction-track:has(input[value=short]:checked) .direction-selection{transform:translateX(calc(100% + 6px))}
.veyflux-app .direction-option{position:relative;display:flex;flex-direction:column;padding:21px 22px 17px;cursor:pointer;min-width:0;color:#8b8b80;transition:color .25s}
.veyflux-app .direction-option input{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0}
.veyflux-app .direction-name{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:24px;font-weight:500;letter-spacing:-.7px;line-height:1.2}
.veyflux-app .direction-arrow{font-size:28px;font-weight:300;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.veyflux-app .direction-option>small{font-size:11px;margin-top:7px;opacity:.8}
.veyflux-app .direction-option svg{width:100%;max-width:190px;height:43px;margin-top:24px;overflow:visible}
.veyflux-app .direction-baseline{stroke:currentColor;stroke-width:1;opacity:.14}
.veyflux-app .direction-line{stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.55}
.veyflux-app .direction-option:has(input:checked){color:#151610}
.veyflux-app .direction-option:has(input:checked) .direction-line{opacity:1;animation:direction-draw .7s cubic-bezier(.22,.7,.25,1) both}
.veyflux-app .direction-option:has(input[value=long]:checked) .direction-arrow{transform:translate(2px,-2px)}
.veyflux-app .direction-option:has(input[value=short]:checked) .direction-arrow{transform:translate(2px,2px)}
.veyflux-app .direction-option:has(input:focus-visible){outline:2px solid #b4c998;outline-offset:2px;border-radius:4px}
.veyflux-app .direction-option:not(:has(input:checked)):hover{color:#deded0}
.veyflux-app .direction-note{font-size:10px;line-height:1.6;color:#85857c;margin:9px 0 0}
@keyframes direction-draw{from{stroke-dasharray:100;stroke-dashoffset:100}to{stroke-dasharray:100;stroke-dashoffset:0}}
@media(max-width:500px){.veyflux-app .direction-option{padding:17px 15px 14px}.veyflux-app .direction-name{font-size:23px}.veyflux-app .direction-picker legend>span{font-size:10px}.veyflux-app .direction-option svg{margin-top:19px;height:34px}}
@media(prefers-reduced-motion:reduce){.veyflux-app .direction-selection,.veyflux-app .direction-option,.veyflux-app .direction-arrow{transition:none}.veyflux-app .direction-option:has(input:checked) .direction-line{animation:none}}