.bridge-screens {
  position: fixed;
  inset: 0;
  z-index: 8;
  opacity: var(--bridge-instruments-opacity, 0);
  pointer-events: none;
}
body.bridge-hidden .bridge-screens { visibility: hidden; }
.bridge-instruments-stage { position: absolute; width: 1600px; height: 900px; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--bridge-fit)); }
.bridge-instruments-world { position: absolute; inset: 0; transform: translate3d(var(--bridge-look-x), var(--bridge-look-y), 0) rotateX(var(--bridge-look-pitch)) rotateY(var(--bridge-look-yaw)); }
.screen-environment {
  position: absolute;
  right: 94px;
  bottom: 48px;
  width: 300px;
  height: 144px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  color: #91e5ef;
  transform-origin: 50% 65%;
  transform: perspective(800px) rotateY(-24deg) rotateX(9deg) rotateZ(3deg);
}
.holo-control {
  --control-position: 100%;
  --control-color: #91e5ef;
  --holo-grid: repeating-linear-gradient(0deg, color-mix(in srgb, currentColor 34%, transparent) 0 1px, transparent 1px 12px), repeating-linear-gradient(90deg, color-mix(in srgb, currentColor 28%, transparent) 0 1px, transparent 1px 9px);
  position: relative;
  display: block;
  width: 100%;
  height: 48px;
  flex: none;
  pointer-events: auto;
  cursor: ew-resize;
}
.holo-control input {
  position: absolute;
  inset: 0;
  z-index: 2;
  appearance: none;
  -webkit-appearance: none;
  writing-mode: horizontal-tb;
  direction: ltr;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  cursor: ew-resize;
  touch-action: none;
}
.holo-control input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 16px; height: 48px; }
.holo-control input::-moz-range-thumb { width: 16px; height: 48px; border: 0; }
.holo-rail {
  position: absolute;
  inset: 6px 8px;
  overflow: hidden;
  border: 1px solid rgba(160, 239, 255, .74);
  background-image: var(--holo-grid);
  color: #91e5ef;
  box-shadow: 0 0 8px rgba(95, 211, 237, .16), inset 0 0 8px rgba(95, 211, 237, .08);
  pointer-events: none;
}
.holo-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--control-position);
  color: var(--control-color);
  border-right: 1px solid #e0fcff;
  background-color: color-mix(in srgb, currentColor 22%, transparent);
  background-image: var(--holo-grid);
  box-shadow: 2px 0 8px color-mix(in srgb, currentColor 28%, transparent), inset 0 0 12px color-mix(in srgb, currentColor 16%, transparent);
}
.holo-hue { --control-position: 47.63%; }
.holo-control:hover .holo-rail, .holo-control:focus-within .holo-rail { border-color: #e0fcff; }
.bridge-screens[inert] .holo-control { pointer-events: none; }
@media (max-width: 800px) {
  .bridge-instruments-stage { inset: 0; width: auto; height: auto; transform: none; }
  .bridge-instruments-world { transform: none; }
  .screen-environment { right: 4vw; bottom: max(24px, env(safe-area-inset-bottom)); width: 40vw; height: 132px; gap: 18px; }
}