/* A quiet key for the fixed-scale gravity arrows. Only its range accepts input. */
#vectorLegend{
  position:absolute;z-index:4;left:38px;top:365px;width:var(--vector-key-width,214px);
  color:#bdcddd;font-family:var(--sans,system-ui,sans-serif);pointer-events:none;
  text-shadow:0 2px 8px #02050b;user-select:none;
}
#vectorLegend[hidden]{display:none}
#vectorLegend.vector-key-split{box-sizing:border-box;padding:12px;border:1px solid #8cabb63a;border-radius:10px;background:#07111de8;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 24px #0004;text-shadow:none}
#vectorLegend.vector-key-phone.vector-key-split{padding:7px 9px;border-radius:7px}
.vector-key-title{margin:0 0 9px;font:500 9px/1.4 var(--mono,monospace);letter-spacing:.13em;text-transform:uppercase;color:#c6d6e2}
.vector-key-scale{height:6px;border-radius:3px;background:linear-gradient(90deg,#285edc 0%,#36cff5 25%,#f3e765 50%,#ff922d 75%,#f34432 100%);box-shadow:0 0 14px #31bdd21a}
.vector-key-labels{display:flex;justify-content:space-between;gap:12px;margin-top:5px;font:9px/1.4 var(--mono,monospace);color:#9eb4c6}
.vector-quick-control{display:flex;align-items:center;gap:8px;min-height:44px;margin-top:5px;pointer-events:auto}
.vector-quick-control[hidden]{display:none}
.vector-quick-control label{font-size:10px;color:#d0deea;cursor:pointer}
.vector-quick-control output{flex:none;min-width:38px;font:10px var(--mono,monospace);text-align:right;color:#efcc8f}
#vectorLegend input[type=range]{min-width:0;flex:1;width:100%;height:44px;padding:20px 0;background:linear-gradient(90deg,#285edc 0%,#36cff5 25%,#f3e765 50%,#ff922d 75%,#f34432 100%);background-clip:content-box;border-radius:0;touch-action:pan-y;cursor:ew-resize}
#vectorLegend input[type=range]::-webkit-slider-thumb{width:18px;height:18px;border-radius:50%;background:#edf5fa;border:2px solid #0b1520;box-shadow:0 0 0 1px #b9d5e5}
#vectorLegend input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#edf5fa;border:2px solid #0b1520;box-shadow:0 0 0 1px #b9d5e5}
#vectorLegend input[type=range]:focus-visible{outline:2px solid #f1c28a;outline-offset:2px;box-shadow:none}
.vector-key-help{margin:3px 0 0;font-size:11px;line-height:1.5;color:#c0d0dc}
.vector-key-units{margin:3px 0 0;font-size:9px;line-height:1.5;color:#7e99ad}
#vectorLegend.vector-key-condensed .vector-key-title,#vectorLegend.vector-key-condensed .vector-key-help,#vectorLegend.vector-key-condensed .vector-key-units{display:none}
#vectorLegend.vector-key-condensed .vector-key-scale{height:5px}
#vectorLegend.vector-key-condensed .vector-key-labels{font-size:8px}
.universe-mode #vectorLegend.vector-key-split .vector-key-units{display:block;font-size:8px;line-height:1.4;color:#9db3c6;margin-top:6px}
@media(max-width:780px),(max-width:900px) and (max-height:520px){
  #vectorLegend{left:18px;top:248px;width:var(--vector-key-width,208px)}
  .vector-key-title{display:none}
  .vector-key-scale{height:5px}.vector-key-labels{font-size:8px;margin-top:4px}
  .vector-key-help{font-size:9px;margin-top:2px}.vector-key-units{font-size:8px;margin-top:2px}
}
@media(max-width:900px) and (max-height:520px){
  #vectorLegend{width:var(--vector-key-width,190px)}
  .vector-key-title,.vector-key-help,.vector-key-units{display:none}
  .vector-key-scale{height:5px}.vector-key-labels{font-size:8px;margin-top:4px}
}
@media(max-width:360px){
  #vectorLegend.vector-key-phone .vector-quick-control label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}