:root {
  font-family: Arial, Helvetica, sans-serif;
  background: #1f1f1f;
  color: #eee;
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
}
body {
  overflow: hidden;
}

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#mapPanel {
  --pip-top: 24px;
  --pip-left: 24px;
  --pip-width: min(34.2vw, 459px);
  --pip-height: min(19.2375vw, 258.1875px);
  --pip-border: 2px solid rgba(255, 255, 255, 0.8);

  position: absolute;
  inset: 0 260px 0 0;
  min-width: 0;
  overflow: hidden;
  background: #4f8b45;
}

.simulation-viewport {
  position: absolute;
  overflow: hidden;
}

.autopilot-input-notice {
  position: absolute;
  z-index: 30;
  width: max-content;
  max-width: calc(100% - 16px);
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid #9baab6;
  border-radius: 5px;
  background: #202327;
  color: #fff;
  font:
    bold 12px/1.3 Arial,
    Helvetica,
    sans-serif;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.autopilot-input-notice[hidden] {
  display: none;
}

#mapViewport {
  z-index: 0;
}

#view3dViewport {
  z-index: 5;
  background: linear-gradient(#6fa7f0 0%, #9dc8fb 58%, #d7ecff 100%);
}

#view3dViewport[hidden] {
  display: none;
}

#mapPanel:not(.view3d-primary) #mapViewport,
#mapPanel.view3d-primary #view3dViewport {
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  box-shadow: none;
}

#mapPanel:not(.view3d-primary) #view3dViewport,
#mapPanel.view3d-primary #mapViewport {
  top: var(--pip-top);
  left: var(--pip-left);
  right: auto;
  bottom: auto;
  width: var(--pip-width);
  height: var(--pip-height);
  border: var(--pip-border);
  border-radius: 8px;
  box-sizing: content-box;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

#mapPanel.view3d-primary #mapViewport {
  z-index: 9;
}

.vor-pip-direction {
  display: none;
}

#mapPanel.view3d-primary .vor-pip-direction:not([hidden]) {
  --pip-dot-halo: 1px;

  position: absolute;
  z-index: 10;
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #505050;
  box-shadow: 0 0 0 var(--pip-dot-halo) rgba(0, 0, 0, 0.65);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#mapPanel.view3d-primary #vor1PipDirection:not([hidden]) {
  --pip-dot-halo: 0px;

  background: #000;
  box-shadow: none;
}

#mapPanel.view3d-primary #vor2PipDirection:not([hidden]) {
  background: #cedfcb;
}

#mapPanel.view3d-primary.view2d-pip-hidden .vor-pip-direction {
  display: none;
}

#mapCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

#view3dCanvas,
#view3dOverlay,
#view3dHud {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  background: transparent;
  pointer-events: none;
}

#view3dCanvas {
  z-index: 1;
  background: linear-gradient(#6fa7f0 0%, #9dc8fb 58%, #d7ecff 100%);
  color-scheme: only light;
}

#view3dOverlay {
  z-index: 2;
  mix-blend-mode: multiply;
}
#view3dHud {
  z-index: 3;
}

#view3dCourseInstrument {
  position: absolute;
  top: auto;
  bottom: 2%;
  left: 65%;
  z-index: 14;
  width: 15%;
  height: auto;
  aspect-ratio: 1;
  pointer-events: auto;
}

/* No desktop, o CURSO sobre o 3D é somente visual. No mobile maximizado,
   a regra específica abaixo permite ajustar o curso pelo toque. */
html:not([data-mobile-viewport])
  #view3dCourseInstrument[data-course-environment='3d'],
#mapPanel.view3d-primary #view3dCourseInstrument[data-course-environment='3d'] {
  pointer-events: none;
}

/* O ambiente minimizado usa sua posição própria, mais alta que a escala,
   para não cobrir a indicação vermelha da radial. */
#mapPanel:not(.view3d-primary)
  #view3dCourseInstrument[data-course-environment='3d'] {
  top: calc(
    var(--pip-top) + var(--pip-height) - min(5.13vw, 68.85px) -
      min(0.684vw, 9.18px)
  );
  bottom: auto;
  left: calc(var(--pip-left) + min(22.23vw, 298.35px));
  width: min(5.13vw, 68.85px);
}

#view3dCourseInstrument[hidden] {
  display: none;
}

.declination-spinner-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: none;
  place-items: center;
  background: transparent;
  pointer-events: none;
}

#mapPanel.declination-processing #mapDeclinationSpinner,
#mapPanel.declination-processing
  #view3dCanvas:not([hidden])
  ~ #view3dDeclinationSpinner {
  display: grid;
}

.declination-countdown {
  width: clamp(56px, 14%, 108px);
  height: auto;
  aspect-ratio: 1;
  background: transparent;
  opacity: 1;
  pointer-events: none;
}

#viewSwapButton,
#fullscreenButton {
  position: absolute;
  top: calc(var(--pip-top) + 8px);
  left: calc(var(--pip-left) + var(--pip-width) - 42px);
  z-index: 13;
  width: 36px;
  height: 36px;
  padding: 5px;
  border: 0;
  border-radius: 6px;
  background: rgba(4, 4, 12, 0.57);
  color: #fff;
  opacity: 0.72;
  cursor: pointer;
}

html:not([data-mobile-viewport]) #viewSwapButton,
html:not([data-mobile-viewport]) #fullscreenButton {
  transform: scale(1.2);
  transform-origin: top right;
}

#viewSwapButton svg,
#fullscreenButton svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 6;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

#fullscreenButton {
  left: calc(var(--pip-left) + var(--pip-width) - 92px);
}

#viewSwapButton[hidden] + #fullscreenButton {
  left: calc(var(--pip-left) + 8px);
}

#fullscreenButton svg {
  stroke-width: 2;
}

#fullscreenButton:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

#fullscreenButton:disabled {
  opacity: 0.4;
  cursor: default;
}

#viewSwapButton[hidden],
#fullscreenButton[hidden],
#fullscreenButton[aria-pressed='false'] .fullscreen-exit,
#fullscreenButton[aria-pressed='true'] .fullscreen-enter {
  display: none;
}

#mapPanel.view3d-primary.view2d-pip-hidden #mapViewport {
  display: none;
}

#mapPanel.view3d-primary #mapCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  object-position: center;
}

#mapPanel.view3d-primary #view3dFromProjection {
  top: calc(100% - 22px);
  left: 50%;
}

#view3dFromProjection {
  position: absolute;
  top: calc(var(--pip-top) + var(--pip-height) + 4px);
  left: calc(var(--pip-left) + min(17.1vw, 229.5px) + 2px);
  z-index: 8;
  display: flex;
  transform: translateX(-50%) rotate(calc(-1 * var(--magnetic-declination)));
  flex-direction: column;
  align-items: center;
  gap: 1px;
  color: rgba(90, 165, 255, 0.48);
  font:
    bold 10px Arial,
    sans-serif;
  line-height: 10px;
  pointer-events: none;
}

.view3d-from-arrow {
  width: 0;
  height: 0;
  border-top: 9px solid currentColor;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

#view3dFromProjection[hidden] {
  display: none;
}

#view3dOverlapHeading {
  position: absolute;
  top: calc(var(--pip-top) + var(--pip-height) + 6px);
  left: calc(var(--pip-left) + min(17.1vw, 229.5px) + 2px);
  z-index: 8;
  transform: translateX(-50%);
  color: #ffd54a;
  font:
    700 16.5px/18px Arial,
    Helvetica,
    sans-serif;
  letter-spacing: 0.45px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.68);
  white-space: nowrap;
  pointer-events: none;
}

#view3dOverlapHeading[hidden],
#mapPanel.view3d-primary #view3dOverlapHeading {
  display: none;
}

#view3dCanvas[hidden],
#view3dOverlay[hidden],
#view3dHud[hidden] {
  display: none;
}
#view3dFallback {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border: 0;
  border-radius: inherit;
  background: rgba(17, 20, 24, 0.94);
  color: #d9dde1;
  text-align: center;
  font:
    700 12px/1.35 Arial,
    Helvetica,
    sans-serif;
  letter-spacing: 0.25px;
  pointer-events: none;
}
#view3dFallback[hidden] {
  display: none;
}
#edgeFlash {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(255, 235, 0, 0.58);
  opacity: 0;
  pointer-events: none;
}

#interfaceResetFlash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(255, 235, 0, 0.58);
  opacity: 0;
  pointer-events: none;
}

#interfaceResetFlash.is-active {
  animation: interface-reset-flash 280ms ease-out 1;
}

@keyframes interface-reset-flash {
  0% {
    opacity: 0;
  }
  24% {
    opacity: 0.86;
  }
  100% {
    opacity: 0;
  }
}

#interfaceResetDialog[hidden],
#interfaceResetNotice[hidden] {
  display: none;
}

#interfaceResetDialog {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  padding: 14px;
  background: rgb(0 0 0 / 42%);
}

.interface-reset-dialog-window {
  width: min(320px, calc(100vw - 40px));
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 9px;
  background: rgba(17, 20, 24, 0.97);
  color: #e7ebef;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

.interface-reset-dialog-window p {
  margin: 0 0 9px;
  color: #ffd54a;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.7px;
}

.interface-reset-dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.interface-reset-dialog-actions button {
  min-height: 0;
  height: 54px;
  padding: 6px 9px;
  border: 1px solid #59636c;
  border-radius: 5px;
  background: #252b31;
  color: #edf1f4;
  box-shadow: none;
  font:
    700 10px Arial,
    Helvetica,
    sans-serif;
}

html[data-mobile-viewport='landscape'] .interface-reset-dialog-actions button {
  height: 28px;
}

.interface-reset-dialog-actions button:is(:hover, :focus-visible) {
  border-color: #ffd54a;
  outline: none;
}

.interface-reset-dialog-actions button:active {
  background: #202327;
}

#interfaceResetNotice {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 10001;
  padding: 6px 9px;
  border: 1px solid #5a6169;
  border-radius: 5px;
  background: #252b31;
  color: #ffd54a;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  font:
    700 10px Arial,
    Helvetica,
    sans-serif;
  pointer-events: none;
  transform: translateX(-50%);
  animation: interface-reset-notice 180ms ease-out 1;
}

@keyframes interface-reset-notice {
  from {
    opacity: 0;
    transform: translate(-50%, 5px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

#status {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 7px 10px;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 7px;
  background: rgb(12 18 22 / 78%);
  font:
    12px/1.35 ui-monospace,
    Consolas,
    monospace;
  display: none;
  pointer-events: none;
}

#runtimeError {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 90;
  display: none;
  max-width: min(520px, calc(100% - 32px));
  padding: 10px 12px;
  border: 1px solid rgba(255, 130, 130, 0.75);
  border-radius: 8px;
  background: rgba(45, 12, 12, 0.94);
  color: #f7e7e7;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  font:
    12px/1.35 Arial,
    sans-serif;
  pointer-events: none;
}
#runtimeError.visible {
  display: block;
}
#runtimeError strong {
  display: block;
  margin-bottom: 3px;
  color: #ffb3b3;
  letter-spacing: 0.35px;
}
#runtimeErrorDetail {
  display: block;
  overflow-wrap: anywhere;
}

#northRose {
  --magnetic-declination: -24deg;
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 12;
  width: 72px;
  height: 82px;
  color: #202327;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  pointer-events: auto;
}

#mapPanel.view3d-primary #northRose {
  display: none;
}

#northRose .north-rose-rotor {
  position: relative;
  display: block;
  width: 85px;
  height: 85px;
  margin: 0 auto 1px;
  transform: rotate(var(--magnetic-declination));
  transform-origin: center;
  opacity: 1;
  filter: none;
  transition:
    transform 420ms cubic-bezier(0.22, 0.78, 0.24, 1),
    opacity 180ms ease;
}
#northRose .north-rose-graphic {
  display: block;
  width: 85px;
  height: 85px;
  overflow: visible;
}

.north-rose-declination {
  fill: currentColor;
  stroke: #4f8b45;
  stroke-width: 2;
  paint-order: stroke fill;
  font:
    700 13px Arial,
    Helvetica,
    sans-serif;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.north-label-axis {
  position: absolute;
  left: 42.5px;
  top: 42.5px;
  width: 0;
  height: 0;
  pointer-events: none;
  user-select: none;
}
.north-label {
  position: absolute;
  left: calc(-7px * 2 / 3);
  top: calc(-36px - (16px * 2 / 3));
  width: calc(14px * 2 / 3);
  height: calc(16px * 2 / 3);
  overflow: visible;
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: square;
  stroke-linejoin: round;
  pointer-events: none;
}
#northRose:hover .north-rose-rotor,
#northRose:focus-within .north-rose-rotor {
  transform: rotate(var(--magnetic-declination)) scale(1.045);
  opacity: 1;
}
#northRose:focus-visible .north-rose-rotor {
  outline: 2px solid #ffd858;
  outline-offset: 3px;
}

.north-rose-rotor::after,
.north-label-axis::after {
  content: '';
  position: absolute;
  z-index: 2;
  background: linear-gradient(
    135deg,
    transparent 34%,
    rgba(255, 255, 255, 0.03) 42%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.03) 58%,
    transparent 66%
  );
  background-position: 100% 0;
  background-size: 220% 100%;
  -webkit-mask: var(--shine-mask) center / 100% 100% no-repeat;
  mask: var(--shine-mask) center / 100% 100% no-repeat;
  pointer-events: none;
  opacity: 0;
}

.north-rose-rotor::after {
  --shine-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='white' stroke='white' stroke-linejoin='round'%3E%3Cpath d='M50 18 L55 41 L50 36 L45 41 Z'/%3E%3Cpath d='M50 82 L45 59 L50 64 L55 59 Z'/%3E%3Cpath d='M18 50 L41 45 L36 50 L41 55 Z'/%3E%3Cpath d='M82 50 L59 55 L64 50 L59 45 Z'/%3E%3C/g%3E%3C/svg%3E");
  inset: 0;
}

.north-label-axis::after {
  --shine-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M2 15V1l10 14V1' fill='none' stroke='white' stroke-width='3.2'/%3E%3C/svg%3E");
  left: calc(-7px * 2 / 3);
  top: calc(-36px - (16px * 2 / 3));
  width: calc(14px * 2 / 3);
  height: calc(16px * 2 / 3);
}

#northRose.declination-hover-shine .north-rose-rotor::after,
#northRose.declination-hover-shine .north-label-axis::after {
  opacity: 1;
  animation: navigation-drag-shine 600ms linear infinite;
}
.magnetic-declination-editor {
  position: absolute;
  top: 88px;
  right: -6px;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 0s linear 180ms;
  pointer-events: none;
}
#northRose.declination-open .magnetic-declination-editor {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  pointer-events: auto;
}
#northRose.declination-pending .magnetic-declination-editor {
  transition: none;
}
#magneticDeclinationInput {
  width: calc(124px * 2 / 3);
  height: calc(54px * 4 / 3);
  padding: 5px 6px;
  border: 1px solid #777;
  border-radius: 5px 0 0 5px;
  background: #f4f4f4;
  color: #111;
  text-align: center;
  font:
    bold 16px Arial,
    Helvetica,
    sans-serif;
  outline: none;
}
#magneticDeclinationInput:focus {
  border-color: #ffd54a;
  box-shadow: 0 0 0 2px rgba(255, 213, 74, 0.22);
}
.magnetic-declination-input-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.magnetic-declination-spin-buttons {
  display: flex;
  flex-direction: column;
  width: 38px;
  height: calc(54px * 4 / 3);
}
.magnetic-declination-spin-button {
  flex: 1 1 50%;
  min-height: 0;
  padding: 0;
  border: 1px solid #777;
  border-left: 0;
  border-radius: 0;
  background: #d9dde1;
  color: #111;
  font:
    bold 18px/1 Arial,
    Helvetica,
    sans-serif;
  cursor: pointer;
  user-select: none;
}
.magnetic-declination-spin-button:first-child {
  border-radius: 0 5px 0 0;
  border-bottom: 0;
}
.magnetic-declination-spin-button:last-child {
  border-radius: 0 0 5px 0;
}
.magnetic-declination-spin-button:active {
  background: #c3c9cf;
}
.magnetic-declination-spin-button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid #fff3a8;
  outline-offset: -2px;
}

#radialEntry {
  --radial-spin-width: 38px;
  position: fixed;
  left: 50%;
  top: 28px;
  z-index: 60;
  display: none;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  padding: 8px 10px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  background: rgba(17, 20, 24, 0.94);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  color: #eee;
  font-size: 12px;
}

#radialEntry.visible {
  display: flex;
}

.cursor-animation-region-active,
.cursor-animation-region-active * {
  cursor: none !important;
}

#cursorContextHelp {
  position: absolute;
  left: var(--pip-left);
  bottom: 12px;
  z-index: 2147483646;
  display: flex;
  width: 432px;
  max-width: calc(100% - var(--pip-left) - 12px);
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 10px 34px 9px 10px;
  border-radius: 5px;
  background: #202327;
  color: #fff;
  font:
    12px/1.2 Arial,
    Helvetica,
    sans-serif;
  animation: none;
  transition: none;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

#cursorContextHelp[hidden] {
  display: none;
}

#cursorContextHelp.is-empty {
  width: max-content;
  background: rgba(32, 35, 39, 0.3333333333);
}

#cursorContextHelp.is-empty #cursorContextHelpIcons {
  min-height: 18px;
}

html:not([data-mobile-viewport])
  #cursorContextHelp.is-empty:not(.has-aircraft-overlap)
  #cursorContextHelpIcons::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 0;
  top: 50%;
  height: 2px;
  border-radius: 1px;
  background-color: #c5dfed;
  background-image:
    linear-gradient(
      90deg,
      transparent 18%,
      #9edcff 35%,
      #f3fcff 44%,
      #9debf1 49%,
      transparent 65%
    ),
    linear-gradient(
      90deg,
      transparent 15%,
      #d7c8ff 32%,
      #c7f4e3 44%,
      transparent 62%
    );
  background-size:
    240% 100%,
    190% 100%;
  background-repeat: no-repeat;
  opacity: 0.9;
  pointer-events: none;
  animation:
    cursor-context-help-line-flow 7.5s ease-in-out infinite alternate,
    cursor-context-help-line-color 20s ease-in-out infinite alternate;
}

@keyframes cursor-context-help-line-flow {
  from {
    background-position:
      0% 0,
      100% 0;
  }
  to {
    background-position:
      100% 0,
      0% 0;
  }
}

@keyframes cursor-context-help-line-color {
  from {
    filter: hue-rotate(-12deg);
  }
  to {
    filter: hue-rotate(18deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-mobile-viewport]) #cursorContextHelpIcons::after {
    animation: none;
  }
}

#cursorContextHelp.is-empty #cursorContextHelpClose {
  height: 24px;
}

#cursorContextHelp.is-empty .cursor-context-help-separator {
  visibility: hidden;
}

#cursorContextHelp.is-empty #cursorContextHelpGuide,
#cursorContextHelp.is-empty #cursorContextHelpClose {
  opacity: 0.6666666667;
}

#cursorContextHelp.has-aircraft-overlap {
  background: rgba(255, 255, 255, 0.3);
}

#cursorContextHelp.has-aircraft-overlap:not(.is-empty) {
  background: rgba(255, 255, 255, 0.1);
}

#cursorContextHelp.has-aircraft-overlap:not(.is-empty)
  .cursor-context-help-image {
  filter: url('#cursorContextHelpFillFilter');
}

#cursorContextHelp.has-aircraft-overlap:not(.is-empty) #cursorContextHelpGuide,
#cursorContextHelp.has-aircraft-overlap:not(.is-empty) #cursorContextHelpClose,
#cursorContextHelp.has-aircraft-overlap:not(.is-empty)
  .cursor-context-help-label {
  color: #202327;
}

#cursorContextHelp.has-aircraft-overlap:not(.is-empty)
  .cursor-context-help-separator {
  border-left-color: #46515a;
}

#cursorContextHelpMapOverlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  z-index: 3;
  pointer-events: none;
}

#cursorContextHelpClose {
  position: absolute;
  z-index: 2;
  top: 4px;
  right: 4px;
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

#cursorContextHelpClose svg {
  display: block;
  width: 20px;
  height: 20px;
  place-self: start end;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  pointer-events: none;
}

#cursorContextHelpClose path {
  vector-effect: non-scaling-stroke;
}

#cursorContextHelpIcons {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  max-width: 100%;
  grid-template-columns: repeat(
    var(--cursor-help-column-count),
    minmax(0, 1fr)
  );
  column-gap: 17px;
  align-items: start;
  min-height: 70px;
}

.cursor-context-help-item {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.cursor-context-help-label {
  max-width: 100%;
  color: #fff;
  font:
    600 11px/1.2 Arial,
    Helvetica,
    sans-serif;
  text-align: center;
  overflow-wrap: anywhere;
}

.cursor-context-help-image {
  display: block;
  width: 38.4px;
  max-width: 100%;
  height: 38.4px;
  flex: 0 0 38.4px;
  object-fit: contain;
  animation: none;
  transition: none;
  pointer-events: none;
}

html:not([data-mobile-viewport]) .cursor-context-help-image {
  animation: cursor-context-help-icon-in 100ms ease-out;
}

html:not([data-mobile-viewport])
  #cursorContextHelpIcons.is-fading-out
  .cursor-context-help-image {
  animation: cursor-context-help-icon-out 100ms ease-in forwards;
}

@keyframes cursor-context-help-icon-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes cursor-context-help-icon-out {
  from {
    opacity: var(--context-icon-start-opacity, 1);
  }
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-mobile-viewport]) .cursor-context-help-image,
  html:not([data-mobile-viewport])
    #cursorContextHelpIcons.is-fading-out
    .cursor-context-help-image {
    animation: none;
  }
}

.cursor-context-help-separator {
  position: absolute;
  top: 0;
  left: -9px;
  box-sizing: border-box;
  width: 1px;
  height: 40px;
  border-left: 1px solid #d9dde1;
  pointer-events: none;
}

#cursorContextHelpGuide {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin: 0;
  /* Compensa metade da diferença entre os paddings laterais (34 - 10). */
  transform: translateX(12px);
  white-space: nowrap;
}

#cursorContextHelpLink {
  color: inherit;
  text-decoration: underline;
}

#controlSchemeKeyboardRegion .keyboard-shell {
  pointer-events: all;
}

#radialPinButton {
  position: absolute;
  right: 8px;
  bottom: calc(100% - 1px);
  width: 29px;
  height: 25px;
  padding: 4px 5px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-bottom-color: rgba(17, 20, 24, 0.94);
  border-radius: 7px 7px 0 0;
  background: rgba(17, 20, 24, 0.94);
  color: #d9dde1;
  box-shadow: 0 -2px 7px rgba(0, 0, 0, 0.24);
  cursor: pointer;
}
.radial-vor-tabs {
  position: absolute;
  left: 10px;
  bottom: calc(100% - 1px);
  display: flex;
  height: 25px;
}
.radial-vor-tabs button {
  min-width: 58px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-bottom-color: rgba(17, 20, 24, 0.94);
  border-radius: 5px 5px 0 0;
  background: #202327;
  color: #d9dde1;
  font:
    bold 11px Arial,
    Helvetica,
    sans-serif;
  cursor: pointer;
}
.radial-vor-tabs button[aria-pressed='true'] {
  background: #9baab6;
  color: #111;
}
html:not([data-mobile-viewport]) .radial-vor-tabs button[aria-pressed='true'] {
  background: #ffd54a;
}
html[data-mobile-viewport] .radial-vor-tabs button[aria-pressed='true'] {
  background: #ffd54a;
}
.radial-vor-tabs button:focus-visible,
.radial-confirm-button:focus-visible {
  outline: 2px solid #ffd54a;
  outline-offset: 2px;
}
#radialPinButton svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  transition: transform 140ms ease;
}
#radialPinButton[aria-pressed='true'] {
  border-color: #ffd54a;
  border-bottom-color: #5a4d16;
  background: #ffd54a;
  color: #181818;
}
#radialPinButton[aria-pressed='true'] svg {
  transform: rotate(-34deg);
}
#radialPinButton:focus-visible {
  outline: 2px solid #fff3a8;
  outline-offset: 2px;
}
#radialEntry.pinned {
  cursor: move;
}
#radialEntry.dragging {
  user-select: none;
}
#radialEntry.pinned button,
#radialEntry.pinned input {
  cursor: initial;
}
#radialEntry.pinned button {
  cursor: pointer;
}
.radial-entry-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.radial-entry-group label {
  width: 100%;
  min-height: 22px;
  box-sizing: border-box;
  padding-right: var(--radial-spin-width);
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.3px;
}
.radial-entry-group.locked {
  opacity: 0.62;
}
.radial-input-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
}
.radial-confirm-button {
  width: 52px;
  height: 44px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid #9baab6;
  border-radius: 4px;
  background: #9baab6;
  color: #111;
  font:
    bold 14px Arial,
    Helvetica,
    sans-serif;
  cursor: pointer;
}
.radial-confirm-button[hidden] {
  display: none;
}
.radial-confirm-button:disabled {
  opacity: 0.5;
  cursor: default;
}
.radial-confirm-button.is-adjusting:disabled {
  opacity: 1;
}
.radial-input-wrap input {
  width: 124px;
  height: 54px;
  padding: 5px 6px;
  border: 1px solid #777;
  border-radius: 5px 0 0 5px;
  background: #f4f4f4;
  color: #111;
  text-align: center;
  font:
    bold 16px Arial,
    Helvetica,
    sans-serif;
  outline: none;
}
.radial-input-wrap input:not(:disabled):not([readonly]) {
  cursor: text;
}
.radial-input-wrap input:focus {
  border-color: #ffd54a;
  box-shadow: 0 0 0 2px rgba(255, 213, 74, 0.22);
}
#curveRadialGroup.locked #curveInput {
  background: #d9dde1;
  color: #555;
  cursor: not-allowed;
}
.radial-spin-buttons {
  display: flex;
  flex-direction: column;
  width: 38px;
  height: 54px;
}
.radial-spin-button {
  flex: 1 1 50%;
  min-height: 0;
  padding: 0;
  border: 1px solid #777;
  border-left: 0;
  border-radius: 0;
  background: #d9dde1;
  color: #111;
  font:
    bold 18px/1 Arial,
    Helvetica,
    sans-serif;
  cursor: pointer;
  user-select: none;
}
.radial-spin-button:first-child {
  border-radius: 0 5px 0 0;
  border-bottom: 0;
}
.radial-spin-button:last-child {
  border-radius: 0 0 5px 0;
}
.radial-spin-button:active {
  background: #c3c9cf;
}
#curveRadialGroup.locked .radial-spin-button {
  background: #c8ccd0;
  color: #666;
  cursor: not-allowed;
}
#curveRadialGroup.locked .radial-spin-button:active {
  background: #c8ccd0;
}
#radialEntry.error #curveInput,
#inboundInput.input-error,
.radial-input-wrap input.invalid {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.18);
}
.radial-entry-mouse-hint {
  width: 162px;
  flex: 0 0 auto;
  color: #d5d5d5;
  text-align: center;
}
#curveRadialGroup .radial-entry-mouse-hint {
  font-size: 11px;
  line-height: 1.1;
}
#inboundEntryGroup .radial-entry-mouse-hint {
  font-size: 10px;
  line-height: 1.08;
}
.radial-entry-mouse-hint .mouse-chord-icon {
  margin-bottom: 2px;
}

.mobile-radial-random {
  display: none;
}
#radialFeedback {
  width: 154px;
  min-height: 58px;
  display: flex;
  flex: 0 0 154px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}
html:not([data-mobile-viewport])
  #radialEntry:has(.radial-confirm-button:not([hidden])) {
  align-items: flex-start;
}
html:not([data-mobile-viewport])
  #radialFeedback:has(.radial-confirm-button:not([hidden])) {
  padding-top: calc(22px + 5px);
}
html:not([data-mobile-viewport]) .radial-confirm-button {
  height: 54px;
}
#radialCountdown {
  display: none;
  width: 52px;
  height: 52px;
}
#radialMessage {
  display: none;
  width: 154px;
  color: #ffd54a;
  font-size: 11px;
  line-height: 1.15;
  font-weight: bold;
}
#radialMessage .random-value {
  display: block;
  margin-top: 3px;
  color: #dc2828;
  font-size: 18px;
  letter-spacing: 0.5px;
}
.mouse-chord-icon {
  position: relative;
  width: 18.6px;
  height: 26.04px;
  margin: 0 auto 3.1px;
  border: 1.24px solid #d8d8d8;
  border-radius: 9.3px 9.3px 8.06px 8.06px;
  overflow: hidden;
}
.mouse-chord-icon::before,
.mouse-chord-icon::after {
  content: '';
  position: absolute;
  top: 0;
  width: 50%;
  height: 9.92px;
  border-bottom: 0.62px solid #d8d8d8;
  background: #ffd54a;
}
.mouse-chord-icon::before {
  left: 0;
  border-right: 0.62px solid #d8d8d8;
}
.mouse-chord-icon::after {
  right: 0;
}
.mouse-chord-wheel {
  position: absolute;
  left: 50%;
  top: 12.4px;
  width: 2.48px;
  height: 4.96px;
  transform: translateX(-50%);
  border-radius: 1.86px;
  background: #d8d8d8;
}
.mouse-right-icon::before,
.mouse-left-icon::after {
  background: rgba(255, 255, 255, 0.07);
}
#curveRadialGroup.locked .mouse-left-icon::before {
  background: rgba(255, 255, 255, 0.07);
}

#curveRadialGroup .mouse-left-icon {
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: url('../assets/icons/radial-curve-left.3963c2e37329.png') center /
    contain no-repeat;
}
#curveRadialGroup .mouse-left-icon::before,
#curveRadialGroup .mouse-left-icon::after,
#curveRadialGroup .mouse-left-icon .mouse-chord-wheel {
  display: none;
}

#inboundEntryGroup .mouse-right-icon {
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: url('../assets/icons/radial-inbound-right.b722fc25059b.png')
    center / contain no-repeat;
}
#inboundEntryGroup .mouse-right-icon::before,
#inboundEntryGroup .mouse-right-icon::after,
#inboundEntryGroup .mouse-right-icon .mouse-chord-wheel {
  display: none;
}

#diagnosticsPanel {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 120;
  display: none;
  width: min(720px, calc(100% - 40px));
  max-height: min(84vh, 720px);
  transform: translate(-50%, -50%);
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 9px;
  background: rgba(17, 20, 24, 0.97);
  color: #e7ebef;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  overflow: auto;
}
#diagnosticsBackdrop {
  position: absolute;
  inset: 0;
  z-index: 119;
  display: none;
  background: transparent;
}
#diagnosticsBackdrop.visible {
  display: block;
}
#diagnosticsPanel.visible {
  display: block;
}
.diagnostics-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 7px;
  color: #ffd54a;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.7px;
}
#diagnosticsText {
  margin: 0;
  color: #dce2e7;
  font:
    11px/1.42 Consolas,
    'Courier New',
    monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.diagnostics-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
}
#diagnosticsCopy {
  min-height: 0;
  height: auto;
  padding: 6px 9px;
  border: 1px solid #5a6169;
  border-radius: 5px;
  background: #252b31;
  color: #edf1f4;
  font:
    700 10px Arial,
    Helvetica,
    sans-serif;
  cursor: pointer;
}
#diagnosticsCopy:hover,
#diagnosticsCopy:focus-visible {
  border-color: #ffd54a;
  outline: none;
}
#diagnosticsCopyStatus {
  min-height: 14px;
  color: #b9c1c8;
  font-size: 10px;
}
#diagnosticsPrivacyNotice {
  flex: 1 1 auto;
  color: #b9c1c8;
  font:
    10px/1.35 Arial,
    Helvetica,
    sans-serif;
}

#instrumentPanel {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 14;
  width: 260px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 18px 14px;
  background: #202327;
  border-left: 1px solid #5a6169;
  border-bottom: 1px solid #5a6169;
  color: #eee;
}

#instrumentPanel > header {
  display: none;
}
header {
  text-align: center;
  margin-bottom: 10px;
}
header h1 {
  margin: 0;
  color: #ffd54a;
  font-size: 18px;
  letter-spacing: 1.5px;
}
header span {
  color: #8da0af;
  font-size: 10px;
}

.instrument {
  width: 225px;
  margin: 0;
  padding: 8px 10px 10px;
  border: 0;
  border-radius: 0;
  background: #111418;
  text-align: center;
}

/* CURSO e PROA acompanham o fundo padrão do painel. */
.instrument-course,
.instrument-heading {
  --instrument-dial-size: 205px;
  --instrument-toggle-radius: calc(var(--instrument-dial-size) / 2 + 8px);
  z-index: 110;
  flex: 0 0 auto;
  background: #202327;
}

.instrument-course {
  position: relative;
  padding-bottom: 2px;
}

#desktopVorToggle {
  position: absolute;
  top: calc(8px + var(--instrument-dial-size) / 2);
  left: calc(10px + var(--instrument-dial-size) / 2);
  z-index: 3;
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 2px solid #89939c;
  border-radius: 50%;
  background: linear-gradient(#2a3239, #181e23);
  color: #f0f2f4;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
  font:
    700 12px/1 Arial,
    Helvetica,
    sans-serif;
  cursor: pointer;
  transform: translate(-50%, -50%) rotate(45deg)
    translateX(var(--instrument-toggle-radius)) rotate(-45deg);
}

#desktopVorToggle:hover,
#desktopVorToggle:focus-visible {
  border-color: #c2c9cf;
  outline: none;
}

#desktopAirspeedToggle {
  position: absolute;
  top: calc(8px + var(--instrument-dial-size) / 2);
  left: calc(10px + var(--instrument-dial-size) / 2);
  z-index: 4;
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 2px solid #89939c;
  border-radius: 50%;
  background: linear-gradient(#2a3239, #181e23);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 2px 5px rgba(0, 0, 0, 0.46);
  cursor: pointer;
  transform: translate(-50%, -50%) rotate(45deg)
    translateX(var(--instrument-toggle-radius));
}

#desktopAirspeedToggle:hover,
#desktopAirspeedToggle:focus-visible {
  border-color: #c2c9cf;
  outline: none;
}

#desktopAirspeedToggle .desktop-airspeed-toggle-knob {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9baab6;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  transition: transform 80ms ease;
}

#desktopAirspeedToggle:active .desktop-airspeed-toggle-knob {
  transform: scale(0.82);
}

/* Só o alternador PROA/velocímetro fica em contorno quando seu mostrador está oculto. */
.instrument-heading.is-right-click-hidden #desktopAirspeedToggle,
.instrument-heading.is-mouse-hold-hidden #desktopAirspeedToggle {
  border-width: 1px;
  border-color: #5a6169;
  background: transparent;
  color: transparent;
  box-shadow: none;
}

.instrument-heading.is-right-click-hidden
  #desktopAirspeedToggle
  .desktop-airspeed-toggle-knob,
.instrument-heading.is-mouse-hold-hidden
  #desktopAirspeedToggle
  .desktop-airspeed-toggle-knob {
  opacity: 0;
}

.instrument-course::before {
  content: '';
  position: absolute;
  left: calc((225px - 260px) / 2 - 1px);
  top: 0;
  bottom: 0;
  width: calc(38px * 4 / 9);
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.03) 65%,
      transparent
    ),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.14) 0 2px,
      transparent 2px 7px
    );
  opacity: 0.65;
  pointer-events: none;
}

.instrument-course.has-been-hovered::before {
  opacity: 0;
}

/* Moldura externa do espaço do CURSO, afastada do mostrador circular. */
.instrument-course::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  pointer-events: none;
}

.instrument-course.is-mouse-hold-hidden::after,
.instrument-course.is-screen-moved::after,
.instrument-heading.is-mouse-hold-hidden::after {
  border-color: #5a6169;
}

.instrument-heading {
  position: relative;
  border: 1px solid transparent;
  border-radius: 12px;
  overflow: visible;
}

.instrument-heading::after {
  content: '';
  position: absolute;
  /* Recua somente as duas extremidades laterais da borda em 3 px,
     preservando o centro e as posições superior e inferior. */
  top: -1px;
  right: 2px;
  bottom: -1px;
  left: 2px;
  border: 1px solid transparent;
  border-radius: 12px;
  pointer-events: none;
}

.instrument-heading::before {
  content: '';
  position: absolute;
  /* Alinha a ranhura à borda esquerda do painel, como as demais,
     mantendo-a fora do círculo e do contorno visual do PROA. */
  left: calc((225px - 260px) / 2 - 1px);
  top: 0;
  bottom: 0;
  width: calc(38px * 4 / 9);
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.03) 65%,
      transparent
    ),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.14) 0 2px,
      transparent 2px 7px
    );
  opacity: 0;
  pointer-events: none;
}

.instrument-heading.is-right-click-hidden::before {
  opacity: 0.65;
}

.instrument-heading.is-right-click-hidden {
  border-color: transparent;
}

.instrument-heading.is-right-click-hidden::after {
  border-color: #5a6169;
}

.instrument h2 {
  margin: 0 0 2px;
  font-size: 14px;
  color: #eee;
  letter-spacing: 0.5px;
  opacity: 0;
  transition: opacity 180ms ease;
}
.instrument canvas {
  display: block;
  width: 205px;
  height: 205px;
  opacity: 0;
  transition: opacity 180ms ease;
}
html:not([data-mobile-viewport]) #headingCanvas {
  width: calc(
    var(--instrument-dial-size) * (268 + 2 * var(--heading-canvas-padding, 0)) /
      268
  );
  height: calc(
    var(--instrument-dial-size) * (268 + 2 * var(--heading-canvas-padding, 0)) /
      268
  );
  margin: calc(
    0px - var(--instrument-dial-size) * var(--heading-canvas-padding, 0) / 268
  );
}
.instrument canvas[hidden] {
  display: none;
}
.instrument-heading.is-speedometer h2 {
  visibility: hidden;
}
#mobileAirspeedToggle {
  display: none;
}
#mobileVorToggle {
  display: none;
}
.instrument:hover h2,
.instrument:hover canvas,
.instrument.is-revealed h2,
.instrument.is-revealed canvas {
  opacity: 1;
}

.instrument-heading.is-right-click-hidden h2,
.instrument-heading.is-right-click-hidden canvas {
  opacity: 0;
}

.instrument-course.is-mouse-hold-hidden h2,
.instrument-course.is-mouse-hold-hidden canvas,
.instrument-course.is-screen-moved h2,
.instrument-course.is-screen-moved canvas,
.instrument-heading.is-mouse-hold-hidden h2,
.instrument-heading.is-mouse-hold-hidden canvas {
  opacity: 0;
}

#controlScheme {
  position: absolute;
  right: 0;
  top: auto;
  /* bottom é definido por JS em positionControlSchemeBelowInstruments()
     para encostar a borda superior do teclado na borda inferior do
     instrumento HEADING, e a borda inferior dos botões 3D/2D na borda
     inferior do teclado. */
  z-index: 13;
  width: 260px;
  margin: 0;
  padding: 4px 6px 5px;
  border: 0;
  border-radius: 0;
  background: #202327;
  overflow: hidden;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  box-shadow: none;
  transition:
    width 220ms ease,
    box-shadow 220ms ease;
}
#controlScheme * {
  user-select: none;
  -webkit-user-select: none;
}
#controlScheme::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: calc(38px * 4 / 9);
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.03) 65%,
      transparent
    ),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.14) 0 2px,
      transparent 2px 7px
    );
  opacity: 0.65;
  transition: opacity 180ms ease;
}
#controlScheme.is-revealed::before {
  opacity: 0;
}
#controlScheme.is-hovered {
  width: min(310px, calc(100vw - 8px));
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
}

/* No desktop, a expansão temporária do miniteclado precisa permanecer
   visível mesmo quando o redimensionamento aproxima sua área do PROA. */
html:not([data-mobile-viewport]) #controlScheme.is-hovered {
  z-index: 111;
}
#controlSchemeDiagramFrame {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 112px;
  overflow: hidden;
  transition: height 220ms ease;
}
#controlScheme.is-hovered #controlSchemeDiagramFrame {
  height: 196px;
}
#controlSchemeDiagram {
  position: relative;
  z-index: 1;
  display: block;
  width: 236px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  transform: translateY(-19px);
  transform-origin: center top;
  transition:
    width 220ms ease,
    transform 220ms ease;
}
#controlScheme.is-hovered #controlSchemeDiagram {
  pointer-events: auto;
}
#controlScheme.is-hovered #controlSchemeDiagram {
  width: 100%;
  transform: translateY(0);
}
#controlSchemeCanvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 180ms ease;
}
#controlScheme.is-hovered #controlSchemeCanvas {
  opacity: 1;
}

#navigationLayerHover {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  z-index: 0;
  pointer-events: auto;
}

/* Indicador visual à esquerda dos botões 3D/2D. A faixa repete a
   largura, o eixo e o padrão da faixa lateral do teclado sem ocupar
   o espaço dos botões e de suas legendas. O `bottom` é definido por
   JS para acompanhar exatamente a linha dos controles. */
#navigationLayerHint {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(38px * 4 / 9);
  height: 38px;
  z-index: 88;
  pointer-events: auto;
  border-radius: 4px;
  background: none;
  opacity: 0;
  transition: opacity 180ms ease;
}

#navigationLayerHint.is-revealed {
  opacity: 0;
  pointer-events: none;
}

/* Remove apenas as antigas ranhuras visuais da borda do painel. */
.instrument-course::before,
.instrument-heading::before,
#controlScheme::before {
  content: none;
}

#navigationLayerControls {
  --antenna-toggle-width: 28px;
  --antenna-toggle-gap: 8px;
  position: absolute;
  left: 44px;
  top: auto;
  /* bottom é definido por JS em positionControlSchemeBelowInstruments(). */
  z-index: 89;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 24px;
  gap: 3px;
  width: min(198px, calc(100% - 24px));
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  touch-action: none;
  user-select: none;
  transform: none;
  pointer-events: auto;
  opacity: 1;
}

html:not([data-mobile-viewport]) #navigationLayerControls {
  left: calc(
    50% + (var(--antenna-toggle-width) + var(--antenna-toggle-gap)) / 2
  );
  transform: translateX(-50%);
}

#navigationLayerControls::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid #5a6169;
  border-radius: 4px;
  box-sizing: border-box;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.18s ease;
}

#navigationLayerControls::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 4px;
  background: linear-gradient(
    135deg,
    transparent 34%,
    rgba(255, 255, 255, 0.03) 42%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.03) 58%,
    transparent 66%
  );
  background-position: 100% 0;
  background-size: 220% 100%;
  pointer-events: none;
  opacity: 0;
}

#navigationLayerControls.is-drag-painting::after {
  opacity: 1;
  animation: navigation-drag-shine 600ms linear infinite;
}

@keyframes navigation-drag-shine {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #navigationLayerControls.is-drag-painting::after,
  #northRose.declination-hover-shine .north-rose-rotor::after,
  #northRose.declination-hover-shine .north-label-axis::after,
  #aacdDonationLink:hover::after,
  #aacdDonationLink:focus-visible::after,
  #graaccDonationLink:hover::after,
  #graaccDonationLink:focus-visible::after {
    opacity: 0;
    animation: none;
  }
}

#navigationLayerControls > .navigation-layer-column,
#navigationLayerControls > #navigationVisibilityToggle,
#navigationLayerControls > #antennaVisibilityToggle {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

#navigationLayerHover:hover
  ~ #navigationLayerControls
  > .navigation-layer-column,
#navigationLayerHover:hover
  ~ #navigationLayerControls
  > #navigationVisibilityToggle,
#navigationLayerHover:hover
  ~ #navigationLayerControls
  > #antennaVisibilityToggle,
#navigationLayerHint:hover
  ~ #navigationLayerControls
  > .navigation-layer-column,
#navigationLayerHint:hover
  ~ #navigationLayerControls
  > #navigationVisibilityToggle,
#navigationLayerHint:hover
  ~ #navigationLayerControls
  > #antennaVisibilityToggle,
#navigationLayerControls:hover > .navigation-layer-column,
#navigationLayerControls:hover > #navigationVisibilityToggle,
#navigationLayerControls:hover > #antennaVisibilityToggle {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#navigationLayerControls.is-pinned-visible > .navigation-layer-column,
#navigationLayerControls.is-pinned-visible > #navigationVisibilityToggle,
#navigationLayerControls.is-pinned-visible > #antennaVisibilityToggle {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#navigationLayerControls.is-chord-hidden > .navigation-layer-column,
#navigationLayerControls.is-chord-hidden > #navigationVisibilityToggle,
#navigationLayerControls.is-chord-hidden > #antennaVisibilityToggle {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

.navigation-layer-column {
  --layer-color: #e02e2e;
  display: grid;
  grid-template-rows: repeat(2, 18px);
  gap: 2px;
}

/* Indicação central apenas nas três áreas ocultas do painel desktop. */
.panel-hidden-hint {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 48px;
  height: auto;
  max-width: calc(100% - 16px);
  max-height: calc(100% - 8px);
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

html:not([data-mobile-viewport])
  .instrument-heading:is(.is-right-click-hidden, .is-mouse-hold-hidden)
  > .panel-hidden-hint,
html:not([data-mobile-viewport])
  .instrument-heading:not(.is-revealed):not(:hover)
  > .panel-hidden-hint,
html:not([data-mobile-viewport])
  #controlScheme:not(.is-mini):not(.is-hovered)
  > .panel-hidden-hint,
html:not([data-mobile-viewport]) #navigationLayerControls > .panel-hidden-hint {
  display: block;
}

html:not([data-mobile-viewport])
  :is(#navigationLayerHover, #navigationLayerHint):hover
  ~ #navigationLayerControls:not(.is-chord-hidden)
  > .panel-hidden-hint,
html:not([data-mobile-viewport])
  #navigationLayerControls:not(.is-chord-hidden):is(:hover, .is-pinned-visible)
  > .panel-hidden-hint {
  display: none;
}

.navigation-layer-column.layer-blue {
  --layer-color: #5aa5ff;
}

.navigation-layer-column.layer-white {
  --layer-color: #fff;
}

.navigation-layer-column button {
  display: grid;
  grid-template-columns: 16px 12.777px 5px;
  column-gap: 2px;
  justify-content: center;
  align-items: center;
  min-width: 0;
  height: 18px;
  padding: 0 2px;
  border: 1px solid #5a6169;
  border-radius: 3px;
  background: rgba(9, 11, 13, 0.9);
  color: #dfe4e8;
  cursor: pointer;
}

.navigation-layer-column button::after {
  content: '';
  justify-self: end;
  width: 5px;
  height: 5px;
  transform: translateX(-4px);
  border-radius: 50%;
  background: transparent;
}

.navigation-layer-column button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: saturate(0.4);
}

.navigation-layer-column button[aria-pressed='true'] {
  border-color: #5a6169;
  background: rgba(24, 28, 32, 0.96);
  color: #eef2f5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.navigation-layer-column button[aria-pressed='true']::after {
  background: #ffd54a;
  box-shadow: 0 0 4px rgba(255, 213, 74, 0.85);
}

.navigation-layer-column button.is-view-hidden {
  --layer-color: #46515c;
  border-color: #46515c;
  background: rgba(9, 11, 13, 0.9);
  color: #46515c;
  box-shadow: none;
  filter: none;
}

.navigation-layer-column button.is-view-hidden .layer-line {
  box-shadow: none;
}

.navigation-layer-column button.is-view-hidden .layer-line-3d::before,
.navigation-layer-column button.is-view-hidden .layer-line-3d::after {
  filter: none;
}

.navigation-layer-column button:focus-visible {
  outline: 1px solid #ffd54a;
  outline-offset: 1px;
}

.layer-dimension {
  transform: translateX(-4px);
  font:
    700 8px/1 Arial,
    sans-serif;
  letter-spacing: 0.1px;
}

.layer-line {
  position: relative;
  display: block;
  /* O traço cresce 1/3 para a direita; a coluna reserva os 3 px do
     volume 3D para manter texto, linha e indicador visualmente justificados. */
  width: 9.777px;
  margin: 0;
  transform: translateX(-4px);
  justify-self: start;
  background: var(--layer-color);
}

#navigationVisibilityToggle,
#antennaVisibilityToggle {
  width: 24px;
  height: 38px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid #5a6169;
  border-radius: 4px;
  background: rgba(9, 11, 13, 0.9);
  color: #eef2f5;
  cursor: pointer;
}

#navigationVisibilityToggle:hover,
#navigationVisibilityToggle:focus-visible {
  border-color: #5a6169;
  color: #fff;
  outline: none;
}

#navigationVisibilityToggle[aria-pressed='true'] {
  border-color: #5a6169;
  background: rgba(24, 28, 32, 0.96);
}

#navigationVisibilityToggle:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

#antennaVisibilityToggle {
  position: absolute;
  top: 0;
  right: calc(100% + var(--antenna-toggle-gap));
  width: var(--antenna-toggle-width);
}

#antennaVisibilityToggle[hidden] {
  display: none;
}

#antennaVisibilityToggle img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  pointer-events: none;
}

#antennaVisibilityToggle[aria-pressed='true'] {
  border-color: #9baab6;
  background: #181c20;
}

#antennaVisibilityToggle[aria-pressed='false'] {
  border-color: #46515c;
  background: #252d35;
}

#antennaVisibilityToggle[aria-pressed='false'] img {
  opacity: 0.3;
}

#antennaVisibilityToggle:focus-visible {
  outline: 1px solid #ffd54a;
  outline-offset: 1px;
}

html:not([data-mobile-viewport]) #navigationLayerControls button:focus {
  outline: none;
}

.navigation-eye-icon {
  width: 19px;
  height: 19px;
  overflow: visible;
  fill: currentColor;
}

.navigation-eye-visible > path,
.navigation-eye-hidden > path:not(.navigation-eye-slash) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.navigation-eye-visible > circle {
  fill: currentColor;
}

.navigation-eye-hidden {
  display: none;
}

.navigation-eye-slash {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
}

#navigationVisibilityToggle[aria-pressed='false'] .navigation-eye-visible {
  display: none;
}

#navigationVisibilityToggle[aria-pressed='false'] .navigation-eye-hidden {
  display: block;
}

#sidebarChartLinks {
  position: absolute;
  left: 42px;
  /* Referências externas cedem sempre aos instrumentos e controles. */
  z-index: 1;
  display: flex;
  width: 32px;
  flex-direction: column;
  gap: 9px;
}

.sidebar-chart-label-row {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  display: flex;
  width: max-content;
  gap: 5px;
}

.sidebar-chart-label-link {
  display: flex;
  width: 62px;
  height: 22px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid #5a6169;
  border-radius: 3px;
  background: transparent;
  color: #5a6169;
  font:
    700 9px/1 Arial,
    Helvetica,
    sans-serif;
  letter-spacing: 0.45px;
  text-decoration: none;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease;
}

.sidebar-chart-label-link:hover,
.sidebar-chart-label-link:focus-visible {
  border-color: #ffd54a;
  outline: 0;
  background: #ffd54a;
  color: #151719;
}

html:not([data-mobile-viewport]) .sidebar-chart-label-row {
  align-items: center;
}

html:not([data-mobile-viewport]) #insigniaChartsLink {
  transform: translateX(10%);
}

html:not([data-mobile-viewport]) #faaChartsLink {
  position: relative;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

#faaChartsLink img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

#faaChartsLink .chart-state-hover,
#faaChartsLink:is(:hover, :focus-visible) .chart-state-outline {
  opacity: 0;
}

#faaChartsLink:is(:hover, :focus-visible) .chart-state-hover {
  opacity: 1;
}

html:not([data-mobile-viewport]) #faaChartsLink:focus-visible {
  outline: 1px solid #ffd54a;
  outline-offset: 2px;
}

.sidebar-chart-link {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  line-height: 0;
}

.sidebar-chart-link img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  opacity: 1;
}

.mobile-chart-label {
  display: none;
}

#mobileFaaChartsLink,
#mobileInsigniaChartsLink {
  display: none;
}

.sidebar-chart-link .chart-state-yellow {
  opacity: 0;
}

#aiswebChartsLink img {
  transform: translateY(3px) scale(1.5);
  transform-origin: center;
  filter: none;
}

#navigraphChartsLink img {
  transform: translate(3px, -3px);
  filter: none;
}

#aiswebChartsLink:hover .chart-state-outline,
#aiswebChartsLink:focus-visible .chart-state-outline,
#navigraphChartsLink:hover .chart-state-outline,
#navigraphChartsLink:focus-visible .chart-state-outline {
  opacity: 0;
}

#aiswebChartsLink:hover .chart-state-yellow,
#aiswebChartsLink:focus-visible .chart-state-yellow {
  opacity: 1;
  filter: none;
}

#navigraphChartsLink:hover .chart-state-yellow,
#navigraphChartsLink:focus-visible .chart-state-yellow {
  opacity: 1;
  filter: none;
}

.sidebar-chart-link:focus-visible {
  border-radius: 3px;
  outline: 1px solid #ffd54a;
  outline-offset: 2px;
}

#aacdDonationLink {
  position: absolute;
  left: calc(50% - 1px);
  z-index: 1;
  display: block;
  width: 34px;
  height: 34px;
  transform: translateX(-50%);
  border: 0;
  background: transparent;
  color: inherit;
  line-height: 0;
  box-shadow: none;
  filter: none;
}

#aacdDonationLink[hidden] {
  display: none;
}

#aacdDonationLink img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  opacity: 0;
  filter: none;
  transition: opacity 180ms ease;
}

#aacdDonationLink::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    135deg,
    transparent 34%,
    rgba(255, 255, 255, 0.03) 42%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.03) 58%,
    transparent 66%
  );
  background-position: 100% 0;
  background-size: 220% 100%;
  -webkit-mask: url('../assets/doacao-premiada-aacd.f603360faf3b.webp') center / contain
    no-repeat;
  mask: url('../assets/doacao-premiada-aacd.f603360faf3b.webp') center / contain no-repeat;
  pointer-events: none;
  opacity: 0;
}

#aacdDonationLink:hover,
#aacdDonationLink:focus-visible {
  outline: none;
}

#aacdDonationLink:hover img,
#aacdDonationLink:focus-visible img {
  opacity: 1;
  filter: none;
}

#aacdDonationLink:hover::after,
#aacdDonationLink:focus-visible::after {
  opacity: 1;
  animation: navigation-drag-shine 600ms linear infinite;
}

#graaccDonationLink {
  position: absolute;
  left: calc(50% + 41px);
  z-index: 1;
  display: block;
  width: 64.9px;
  height: 37.8px;
  transform: none;
  border: 0;
  background: transparent;
  color: inherit;
  line-height: 0;
  box-shadow: none;
  filter: none;
}

#graaccDonationLink[hidden] {
  display: none;
}

#graaccDonationLink img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  opacity: 0;
  filter: none;
  transition: opacity 180ms ease;
}

#graaccDonationLink::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    135deg,
    transparent 34%,
    rgba(255, 255, 255, 0.03) 42%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.03) 58%,
    transparent 66%
  );
  background-position: 100% 0;
  background-size: 220% 100%;
  -webkit-mask: url('../assets/graac.cab9c4a6e345.webp') center / contain no-repeat;
  mask: url('../assets/graac.cab9c4a6e345.webp') center / contain no-repeat;
  pointer-events: none;
  opacity: 0;
}

#graaccDonationLink:hover,
#graaccDonationLink:focus-visible {
  outline: none;
}

#graaccDonationLink:hover img,
#graaccDonationLink:focus-visible img {
  opacity: 1;
  filter: none;
}

#graaccDonationLink:hover::after,
#graaccDonationLink:focus-visible::after {
  opacity: 1;
  animation: navigation-drag-shine 600ms linear infinite;
}

.layer-line-2d {
  height: 2px;
  box-shadow: 0 0 2px color-mix(in srgb, var(--layer-color) 72%, transparent);
}

.layer-line-3d {
  height: 5px;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.24),
    inset 0 -1px rgba(0, 0, 0, 0.28);
}

.layer-line-3d::before,
.layer-line-3d::after {
  content: '';
  position: absolute;
  background: var(--layer-color);
}

.layer-line-3d::before {
  left: 2px;
  right: -2px;
  top: -2px;
  height: 2px;
  transform: skewX(-42deg);
  filter: brightness(1.28);
}

.layer-line-3d::after {
  top: -1px;
  right: -3px;
  width: 3px;
  height: 5px;
  transform: skewY(-42deg);
  filter: brightness(0.62);
}
#controlSchemeDiagram .keyboard-shell,
#controlSchemeDiagram .mouse-shell {
  fill: transparent;
  stroke: #5a6169;
  stroke-width: 1;
  transition:
    fill 180ms ease,
    stroke 180ms ease;
}
/* Mantém o mesmo 1 px dos contornos do painel e do ícone Navigraph,
   inclusive quando o SVG do miniteclado é reduzido ou expandido. */
html:not([data-mobile-viewport])
  #controlSchemeDiagram
  :is(.keyboard-shell, .mouse-shell, .mouse-divider, .mouse-wheel) {
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
#controlScheme.is-hovered #controlSchemeDiagram .keyboard-shell,
#controlScheme.is-hovered #controlSchemeDiagram .mouse-shell,
#controlScheme.is-mini #controlSchemeDiagram .keyboard-shell,
#controlScheme.is-mini #controlSchemeDiagram .mouse-shell {
  fill: #111418;
  stroke: #5a6169;
}
#controlSchemeDiagram .key {
  fill: #1b2025;
  stroke: #5a6169;
  stroke-width: 1;
}
#controlSchemeDiagram .key:not(.mouse-wheel),
#controlSchemeDiagram .key-label {
  opacity: 0;
  transition: opacity 180ms ease;
}
#controlScheme.is-hovered #controlSchemeDiagram .key,
#controlScheme.is-hovered #controlSchemeDiagram .key-label,
#controlScheme.is-mini #controlSchemeDiagram .key,
#controlScheme.is-mini #controlSchemeDiagram .key-label {
  opacity: 1;
}
#controlSchemeDiagram .mouse-wheel {
  fill: transparent;
  stroke: #5a6169;
  opacity: 1;
  transition:
    fill 180ms ease,
    stroke 180ms ease;
}
#controlScheme.is-hovered #controlSchemeDiagram .mouse-wheel,
#controlScheme.is-mini #controlSchemeDiagram .mouse-wheel {
  fill: #6d93ba;
  stroke: #5a6169;
}
#controlSchemeDiagram .key.active {
  fill: #6d93ba;
}
#controlSchemeDiagram .key.active.state-on {
  fill: #ffd54a;
}
#controlSchemeDiagram
  [data-scheme-command='interface-reset'].is-interface-reset-confirmed {
  animation: interface-reset-key-flash 520ms ease-in-out 1;
}
@keyframes interface-reset-key-flash {
  0%,
  100% {
    fill: #6d93ba;
  }
  30%,
  70% {
    fill: #ffd54a;
  }
}
html:not([data-mobile-viewport])
  #controlSchemeKeyboardRegion
  .key.active.is-primary-pressed {
  fill: #ffd54a;
}
html:not([data-mobile-viewport])
  #controlSchemeKeyboardRegion
  .key.active.is-primary-pressed
  + .key-label {
  fill: #111;
  stroke: #111;
}
#controlScheme #controlSchemeDiagram [data-scheme-mouse].state-on {
  opacity: 1;
  fill: #ffd54a;
  stroke: #ffd54a;
  transition: none;
}
#controlScheme.is-hovered #controlSchemeDiagram [data-scheme-command],
#controlScheme.is-hovered #controlSchemeHelpLink {
  cursor: pointer;
  pointer-events: auto;
}
.mini-declination-toggle {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  outline: none;
}
#controlScheme.is-hovered .mini-declination-toggle {
  opacity: 1;
  visibility: visible;
  cursor: pointer;
  pointer-events: auto;
}
.mini-declination-hit-area {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}
.mini-declination-rotor {
  transform: rotate(var(--magnetic-declination));
  transform-box: fill-box;
  transform-origin: center;
}
.mini-declination-points {
  fill: #6d93ba;
  stroke: #6d93ba;
  stroke-linejoin: round;
  stroke-width: 0.8;
}
.mini-declination-center {
  fill: #6d93ba;
}
.mini-declination-north {
  fill: #edf1f4;
  stroke: #edf1f4;
  stroke-width: 0.35px;
  paint-order: stroke fill;
  font:
    700 9px Arial,
    sans-serif;
  text-anchor: middle;
  pointer-events: none;
}
.mini-declination-toggle:hover .mini-declination-points {
  fill: #ffd54a;
  stroke: #ffd54a;
}
.mini-declination-toggle.is-active .mini-declination-points,
.mini-declination-toggle.is-active .mini-declination-center {
  fill: #ffd54a;
  stroke: #ffd54a;
}
#controlSchemeDiagram .key-label {
  fill: #f2f4f7;
  stroke: #f2f4f7;
  stroke-width: 0.3px;
  paint-order: stroke fill;
  font:
    700 10px Arial,
    sans-serif;
  text-anchor: middle;
  dominant-baseline: middle;
  letter-spacing: 0.55px;
  pointer-events: none;
}
#controlSchemeDiagram .key-label.small {
  font-size: 8.7px;
}
#controlSchemeDiagram .key-label.key-label-active {
  fill: #111;
  stroke: #111;
}
#controlSchemeDiagram .callout-text {
  fill: #edf1f4;
  stroke: #edf1f4;
  stroke-width: 0.5px;
  paint-order: stroke fill;
  font:
    700 10px Arial,
    sans-serif;
  text-anchor: middle;
  dominant-baseline: middle;
  letter-spacing: 1.15px;
}
#controlSchemeDiagram .callout-text.callout-italic {
  font-style: italic;
}
#controlSchemeDiagram .radial-angle-callout {
  font-size: 14px;
}
#controlSchemeDiagram .leader-line {
  fill: none;
  stroke: #edf1f4;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#controlSchemeDiagram .mouse-divider {
  stroke: #5a6169;
  stroke-width: 1;
  transition: stroke 180ms ease;
}
#controlScheme.is-hovered #controlSchemeDiagram .mouse-divider {
  stroke: #5a6169;
}
#controlSchemeDiagram .leader-dot {
  fill: #edf1f4;
}
#controlSchemeDiagram .callout-text,
#controlSchemeDiagram .leader-line:not(.mouse-divider),
#controlSchemeDiagram .leader-dot {
  opacity: 0;
  transition: opacity 180ms ease;
}
#controlScheme.is-hovered #controlSchemeDiagram .callout-text,
#controlScheme.is-hovered
  #controlSchemeDiagram
  .leader-line:not(.mouse-divider),
#controlScheme.is-hovered #controlSchemeDiagram .leader-dot {
  opacity: 1;
}
#diagnosticsToggleSlot {
  position: absolute;
  right: 4px;
  bottom: 4px;
  left: auto;
  top: auto;
  z-index: 88;
  box-sizing: border-box;
  width: 52px;
  height: 22px;
  margin: 0;
  padding: 2px 4px 1px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  pointer-events: none;
}
#diagnosticsToggle {
  position: static;
  min-width: 44px;
  min-height: 18px;
  height: 18px;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 5px;
  background: rgba(17, 20, 24, 0.82);
  color: #e8edf2;
  font:
    700 8.2px Arial,
    Helvetica,
    sans-serif;
  letter-spacing: 0.6px;
  cursor: pointer;
  opacity: 0.58;
  pointer-events: auto;
}
#diagnosticsToggle:hover,
#diagnosticsToggle:focus-visible {
  opacity: 1;
  outline: none;
}

#controls {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
#mobileGraaccDonationLink {
  display: none;
}
#controls button {
  min-height: 38px;
  border: 1px solid #46515c;
  border-radius: 7px;
  background: #252d35;
  color: #f5f7fa;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
#controls button[data-command='view3d']::after {
  content: 'VISÃO 3D';
}
#controls button:hover {
  background: #303b45;
}
#controls button:active {
  transform: translateY(1px);
}
#controls button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
#controls button.state-on,
#controls button[aria-pressed='true'] {
  border-color: #ffd54a;
  background: #4b431d;
  color: #fff1a6;
  box-shadow: inset 0 0 0 1px rgb(255 213 74 / 35%);
}
#controls button.state-busy {
  border-color: #58a6ff;
  background: #20384d;
  color: #c9e5ff;
}

#help {
  display: none;
}

#authorCredit {
  position: fixed;
  right: 46px;
  bottom: 8px;
  /* Créditos permanecem no plano inferior do painel lateral. */
  z-index: 1;
  width: 186px;
  text-align: left;
  font:
    500 10px/1.35 Arial,
    Helvetica,
    sans-serif;
  color: #5a6169;
  letter-spacing: 0.18px;
}

#authorCreditLink,
#consultingCreditLink {
  display: block;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
}

#consultingCreditLink {
  margin-top: 1px;
  padding-top: 2px;
  border-top: 1px solid #5a6169;
}

#boundarySplash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 14px;
  background: rgb(0 0 0 / 42%);
}
#boundarySplash[hidden] {
  display: none;
}
.boundary-splash-window {
  position: relative;
  width: min(46vw, calc(44vh * 1.5988), 600px);
  max-height: 44vh;
  aspect-ratio: 1586 / 992;
  overflow: hidden;
  border: 0;
  background: #fff;
  color: #050505;
  filter: drop-shadow(0 12px 26px rgb(0 0 0 / 55%));
  user-select: none;
}
.boundary-splash-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.boundary-splash-mobile-art {
  display: none;
}
#boundarySplashOk {
  position: absolute;
  left: 45.65%;
  top: 84.58%;
  width: 15.9%;
  height: 9.28%;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  box-shadow: none;
  font-size: 0;
  cursor: pointer;
  touch-action: manipulation;
}
#boundarySplashOk:focus-visible {
  outline: 2px dotted #111;
  outline-offset: -6px;
}
#boundarySplashOk:active,
#boundarySplashOk.is-pressed {
  padding: 0;
  box-shadow: none;
}

html[data-mobile-viewport='landscape'] .boundary-splash-window {
  overflow: visible;
}

html[data-mobile-viewport='landscape']
  .boundary-splash-art:not(.boundary-splash-mobile-art) {
  display: none;
}
html[data-mobile-viewport='landscape'] .boundary-splash-mobile-art {
  display: block;
}

html[data-mobile-viewport='landscape'] #boundarySplashOk {
  left: 53.6%;
  top: 89.22%;
  width: max(15.9%, 48px);
  height: max(9.28%, 44px);
  transform: translate(-50%, -50%);
}

#mobileOrientationNotice {
  display: none;
}

#mobileOrientationNotice[hidden] {
  display: none;
}

html[data-mobile-viewport='portrait'] body {
  background: #111418;
}

html[data-mobile-viewport='portrait'] #app,
html[data-mobile-viewport='portrait'] #boundarySplash {
  visibility: hidden;
  pointer-events: none;
}

html[data-mobile-viewport='portrait'] #mobileOrientationNotice {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top, 0px))
    max(24px, env(safe-area-inset-right, 0px))
    max(24px, env(safe-area-inset-bottom, 0px))
    max(24px, env(safe-area-inset-left, 0px));
  background: #111418;
  color: #f4f6f8;
  text-align: center;
  font:
    700 clamp(18px, 5vw, 26px) / 1.35 Arial,
    Helvetica,
    sans-serif;
  letter-spacing: 0.25px;
}

html[data-mobile-viewport='portrait'] .mobile-orientation-content {
  display: grid;
  justify-items: center;
  gap: 14px;
  max-width: 100%;
}

html[data-mobile-viewport='portrait'] .mobile-orientation-content p {
  margin: 0;
}

html[data-mobile-platform='iphone'][data-mobile-viewport='portrait']
  #mobileOrientationNotice {
  font-style: italic;
}

html[data-mobile-viewport='portrait'] #mobileRotateButton {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #697780;
  border-radius: 12px;
  background: #28343d;
  color: #f4f6f8;
  font:
    700 15px/1.25 Arial,
    Helvetica,
    sans-serif;
  cursor: pointer;
}

html[data-mobile-viewport='portrait'] #mobileRotateButton:disabled {
  opacity: 0.6;
}

html[data-mobile-viewport='portrait'] #mobileRotateFeedback {
  color: #cbd5dc;
  font:
    400 14px/1.4 Arial,
    Helvetica,
    sans-serif;
}

#mobileRotateButton[hidden],
#mobileRotateFeedback[hidden] {
  display: none;
}

html[data-mobile-viewport='landscape'] {
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --mobile-safe-right: env(safe-area-inset-right, 0px);
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-safe-left: env(safe-area-inset-left, 0px);
  --mobile-instrument-width: clamp(212px, 28vw, 272px);
  --mobile-instrument-size: calc(
    min(
        calc(var(--mobile-instrument-width) / 2 + 12px),
        calc(
          (
              100dvh - var(--mobile-safe-top) - var(--mobile-safe-bottom) -
                101px
            ) /
            2
        )
      ) -
      8px
  );
  --mobile-control-height: clamp(30px, 8dvh, 36px);
  --mobile-curve-height: clamp(58px, 18dvh, 76px);
  --mobile-curve-art-size: clamp(45px, 13.333125dvh, 58.333125px);
  --mobile-boost-art-size: clamp(38.25px, 11.33315625dvh, 49.58315625px);
  --mobile-inner-knob-diameter: 8px;
  --mobile-panel-soft-blue: #9baab6;
  --mobile-3d-width: clamp(150px, 26vw, 220px);
  --mobile-3d-height: clamp(84.375px, 14.625vw, 123.75px);
  --mobile-3d-center-x: clamp(75px, 13vw, 110px);
}

html[data-mobile-viewport='landscape'],
html[data-mobile-viewport='landscape'] body {
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

html[data-mobile-viewport='landscape'] #app {
  width: var(--mobile-viewport-width, 100vw);
  height: var(--mobile-viewport-height, 100dvh);
  min-height: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

html[data-mobile-viewport='landscape'] #app:has(#radialEntry.visible) {
  cursor: auto;
}

html[data-mobile-viewport='landscape'] #mapPanel {
  top: var(--mobile-safe-top);
  right: calc(var(--mobile-safe-right) + var(--mobile-instrument-width));
  bottom: var(--mobile-safe-bottom);
  left: var(--mobile-safe-left);
}

html[data-mobile-viewport='landscape'] #instrumentPanel {
  top: var(--mobile-safe-top);
  right: var(--mobile-safe-right);
  bottom: var(--mobile-safe-bottom);
  width: var(--mobile-instrument-width);
  height: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: normal;
  align-items: start;
  gap: 4px;
  padding: 4px 5px 3px;
  border-left: 0;
  box-sizing: border-box;
  overflow: visible;
  pointer-events: none;
}

html[data-mobile-viewport='landscape'] #instrumentPanel .instrument {
  display: flex;
  width: auto;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: #202327;
}

/* The unified markup also carries desktop-only copies of these controls.
   Mobile uses the dedicated switches positioned beside each instrument. */
html[data-mobile-viewport='landscape'] #desktopVorToggle,
html[data-mobile-viewport='landscape'] #desktopAirspeedToggle,
html[data-mobile-viewport='landscape'] #controls button[data-command='vor'] {
  display: none;
}

html[data-mobile-viewport='landscape'] #instrumentPanel .instrument-course {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  left: 4px;
}

html[data-mobile-viewport='landscape']
  #instrumentPanel
  .instrument-course.is-screen-moved {
  opacity: 0;
  pointer-events: none;
}

html[data-mobile-viewport='landscape'] #instrumentPanel .instrument-heading {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  left: 4px;
  z-index: 1;
}

html[data-mobile-viewport='landscape'] #mobileVorToggle {
  position: absolute;
  top: calc(4px + (var(--mobile-instrument-size) + 8px) / 2 - 18px);
  left: calc(var(--mobile-instrument-size) + 19px);
  z-index: 120;
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  transform-origin: calc(0px - var(--mobile-instrument-size) / 2 - 6px) 18px;
  transform: rotate(-28deg);
  pointer-events: auto;
  touch-action: manipulation;
}

html[data-mobile-viewport='landscape'] #mobileVorToggle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--mobile-curve-art-size) / 2);
  height: calc(var(--mobile-curve-art-size) / 2);
  transform: translate(-50%, -50%);
  border: 2px solid #89939c;
  border-radius: 50%;
  background: linear-gradient(#2a3239, #181e23);
  box-sizing: border-box;
}

html[data-mobile-viewport='landscape']
  #mobileVorToggle
  .mobile-vor-toggle-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: var(--mobile-boost-art-size);
  height: var(--mobile-boost-art-size);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

html[data-mobile-viewport='landscape'] #mobileVorToggle::after {
  content: '2';
  position: relative;
  z-index: 2;
  color: #f0f2f4;
  font:
    700 11px/1 Arial,
    Helvetica,
    sans-serif;
  transform: rotate(28deg);
  pointer-events: none;
}

html[data-mobile-viewport='landscape']
  #mobileVorToggle:not([aria-pressed='true'])::after {
  color: var(--mobile-panel-soft-blue);
}

html[data-mobile-viewport='landscape']
  #mobileVorToggle[aria-pressed='true']::after {
  content: '1';
}

html[data-mobile-viewport='landscape'] #mobileVorToggle:focus-visible {
  outline: 2px solid #ffd54a;
  outline-offset: 2px;
}

html[data-mobile-viewport='landscape'] #instrumentPanel .instrument::before,
html[data-mobile-viewport='landscape'] #instrumentPanel .instrument::after {
  content: none;
}

html[data-mobile-viewport='landscape'] #instrumentPanel .instrument h2 {
  display: none;
}

html[data-mobile-viewport='landscape']
  #instrumentPanel
  .instrument-heading.is-speedometer
  h2 {
  visibility: hidden;
}

html[data-mobile-viewport='landscape'] #mobileAirspeedToggle {
  position: absolute;
  top: calc((var(--mobile-instrument-size) + 8px) / 2 - 18px);
  left: calc(var(--mobile-instrument-size) + 10px);
  z-index: 2;
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  transform-origin: calc(0px - var(--mobile-instrument-size) / 2 - 6px) 18px;
  transform: rotate(30deg);
  pointer-events: auto;
  touch-action: manipulation;
}

html[data-mobile-viewport='landscape'] #mobileAirspeedToggle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--mobile-curve-art-size) / 2);
  height: calc(var(--mobile-curve-art-size) / 2);
  transform: translate(-50%, -50%);
  border: 2px solid #89939c;
  border-radius: 50%;
  background: linear-gradient(#2a3239, #181e23);
  box-sizing: border-box;
}

html[data-mobile-viewport='landscape']
  #mobileAirspeedToggle
  .mobile-airspeed-toggle-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  width: var(--mobile-boost-art-size);
  height: var(--mobile-boost-art-size);
  place-items: center;
  border: 2px solid transparent;
  box-sizing: border-box;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

html[data-mobile-viewport='landscape'] #instrumentPanel .instrument canvas,
html[data-mobile-viewport='landscape']
  #instrumentPanel
  .instrument-heading.is-right-click-hidden
  canvas,
html[data-mobile-viewport='landscape']
  #instrumentPanel
  .instrument-course.is-mouse-hold-hidden
  canvas,
html[data-mobile-viewport='landscape']
  #instrumentPanel
  .instrument-course.is-screen-moved
  canvas,
html[data-mobile-viewport='landscape']
  #instrumentPanel
  .instrument-heading.is-mouse-hold-hidden
  canvas {
  width: var(--mobile-instrument-size);
  height: var(--mobile-instrument-size);
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  opacity: 1;
}

html[data-mobile-viewport='landscape'] #instrumentPanel .instrument #vorCanvas,
html[data-mobile-viewport='landscape']
  #instrumentPanel
  .instrument
  #headingCanvas,
html[data-mobile-viewport='landscape']
  #instrumentPanel
  .instrument
  #airspeedCanvas {
  width: calc(var(--mobile-instrument-size) + 8px);
  height: calc(var(--mobile-instrument-size) + 8px);
  max-width: none;
  max-height: none;
  pointer-events: auto;
  touch-action: manipulation;
}

html[data-mobile-viewport='landscape']
  #instrumentPanel
  .instrument-course
  #vorCanvas {
  margin: 0 auto 0 0;
}

html[data-mobile-viewport='landscape']
  #instrumentPanel
  .instrument-heading
  #headingCanvas,
html[data-mobile-viewport='landscape']
  #instrumentPanel
  .instrument-heading
  #airspeedCanvas {
  margin: 0 auto 0 0;
}

html[data-mobile-viewport='landscape']
  #instrumentPanel
  .instrument-heading
  #headingCanvas {
  --heading-mobile-padding: calc(
    (var(--mobile-instrument-size) + 8px) * var(--heading-canvas-padding, 0) /
      268
  );
  width: calc(
    var(--mobile-instrument-size) + 8px + 2 * var(--heading-mobile-padding)
  );
  height: calc(
    var(--mobile-instrument-size) + 8px + 2 * var(--heading-mobile-padding)
  );
  margin: calc(0px - var(--heading-mobile-padding)) auto
    calc(0px - var(--heading-mobile-padding))
    calc(0px - var(--heading-mobile-padding));
}

html[data-mobile-viewport='landscape']
  #instrumentPanel
  .instrument-heading
  #airspeedCanvas {
  touch-action: none;
}

html[data-mobile-viewport='landscape'] #controls {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: center;
  display: flex !important;
  width: 100%;
  flex-direction: column;
  gap: 0;
  padding: 0;
  pointer-events: auto;
}

html[data-mobile-viewport='landscape'] #controls .mobile-primary-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: var(--mobile-curve-height);
  height: calc(
    var(--mobile-curve-height) + 2 * var(--mobile-control-height) + 6px
  );
  column-gap: 3px;
  row-gap: 2px;
}

#mobileHelpButton,
#controls .mobile-boost-trigger {
  display: none;
}

html[data-mobile-viewport='landscape'] #controls .mobile-curve-control {
  position: absolute;
  left: calc(75% + 1.5px);
  top: calc(4px + (var(--mobile-instrument-size) + 8px) / 2);
  z-index: 120;
  width: var(--mobile-boost-art-size);
  height: var(--mobile-boost-art-size);
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

html[data-mobile-viewport='landscape'] #controls .mobile-curve-art {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  width: var(--mobile-boost-art-size);
  height: var(--mobile-boost-art-size);
  transform: translate(-50%, -50%);
  place-items: center;
  border: 2px solid #89939c;
  border-radius: 50%;
  box-sizing: border-box;
  background: linear-gradient(#2a3239, #181e23);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 2px 5px rgba(0, 0, 0, 0.46);
  pointer-events: none;
  opacity: 1;
}

html[data-mobile-viewport='landscape'] #controls .mobile-curve-knob,
html[data-mobile-viewport='landscape']
  #mobileAirspeedToggle
  .mobile-airspeed-toggle-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--mobile-inner-knob-diameter);
  height: var(--mobile-inner-knob-diameter);
  border-radius: 50%;
  background: var(--mobile-panel-soft-blue);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  transition: transform 80ms ease;
  transform: translate(-50%, -50%);
}

html[data-mobile-viewport='landscape']
  #mobileAirspeedToggle
  .mobile-airspeed-toggle-knob {
  width: calc(var(--mobile-inner-knob-diameter) - 2px);
  height: calc(var(--mobile-inner-knob-diameter) - 2px);
}

html[data-mobile-viewport='landscape']
  #controls
  .mobile-curve-control
  > button[data-command='left'],
html[data-mobile-viewport='landscape']
  #controls
  .mobile-curve-control
  > button[data-command='right'] {
  display: none !important;
}

html[data-mobile-viewport='landscape']
  #controls
  .mobile-curve-control
  > button.mobile-boost-trigger {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  display: block !important;
  width: 100%;
  height: var(--mobile-boost-art-size);
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: transparent;
  opacity: 0;
  pointer-events: auto;
  touch-action: none;
  transform: translateY(-50%);
}

html[data-mobile-viewport='landscape']
  #controls
  .mobile-curve-control
  > button.mobile-boost-trigger:active {
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  box-shadow: none;
}

html[data-mobile-viewport='landscape'] #controls .mobile-utility-controls {
  position: absolute;
  right: 5px;
  bottom: 23px;
  /* Borda do olho (fim do painel de linhas) + intervalo de 8px. */
  left: calc(66.6667% - 7.333px);
  width: auto;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

html[data-mobile-viewport='landscape'] #navigationLayerControls {
  position: absolute;
  left: 5px;
  right: calc(33.3333% + 20px);
  top: auto;
  bottom: 23px !important;
  z-index: 90;
  display: grid !important;
  width: auto;
  grid-template-columns: calc(50% - 19px) minmax(0, 1fr) 20px;
  grid-template-rows: repeat(3, 18px);
  gap: 8px;
  pointer-events: auto;
}

html[data-mobile-viewport='landscape']
  #navigationLayerControls
  > .navigation-layer-column {
  display: contents;
}

html[data-mobile-viewport='landscape'] #navigationLayerControls::before {
  content: none;
}

html[data-mobile-viewport='landscape']
  #navigationLayerControls
  button[data-navigation-layer='red3d'] {
  grid-column: 1;
  grid-row: 1;
}

html[data-mobile-viewport='landscape']
  #navigationLayerControls
  button[data-navigation-layer='red2d'] {
  grid-column: 2;
  grid-row: 1;
}

html[data-mobile-viewport='landscape']
  #navigationLayerControls
  button[data-navigation-layer='blue3d'] {
  grid-column: 1;
  grid-row: 2;
}

html[data-mobile-viewport='landscape']
  #navigationLayerControls
  button[data-navigation-layer='blue2d'] {
  grid-column: 2;
  grid-row: 2;
}

html[data-mobile-viewport='landscape']
  #navigationLayerControls
  button[data-navigation-layer$='2d'] {
  width: calc(100% - 2px);
  justify-self: start;
}

html[data-mobile-viewport='landscape']
  #navigationLayerControls
  button[data-navigation-layer='white3d'] {
  grid-column: 1;
  grid-row: 3;
}

html[data-mobile-viewport='landscape']
  #navigationLayerControls
  button[data-navigation-layer='white2d'] {
  grid-column: 2;
  grid-row: 3;
}

html[data-mobile-viewport='landscape']
  #navigationLayerControls
  > .navigation-layer-column,
html[data-mobile-viewport='landscape']
  #navigationLayerControls
  > #navigationVisibilityToggle,
html[data-mobile-viewport='landscape']
  #navigationLayerControls
  > #antennaVisibilityToggle {
  opacity: 1;
  transform: none;
  transition: none;
  pointer-events: auto;
}

html[data-mobile-viewport='landscape']
  #navigationLayerControls
  .navigation-layer-column
  button {
  grid-template-columns: 12px minmax(7px, 1fr) 4px;
  column-gap: 1px;
  padding: 0 1px;
}

html[data-mobile-viewport='landscape']
  #navigationLayerControls
  .navigation-layer-column
  button::after {
  width: 4px;
  height: 4px;
  transform: none;
}

html[data-mobile-viewport='landscape']
  #navigationLayerControls
  .layer-dimension {
  transform: scaleY(1.1);
  transform-origin: center;
  font-size: 7px;
}

html[data-mobile-viewport='landscape'] #navigationLayerControls .layer-line {
  width: 8px;
  transform: none;
}

html[data-mobile-viewport='landscape']
  #navigationLayerControls
  > .layer-red
  .layer-line,
html[data-mobile-viewport='landscape']
  #navigationLayerControls
  button[data-navigation-layer='white2d']
  .layer-line {
  width: calc(50% + 7px);
}

html[data-mobile-viewport='landscape']
  #navigationLayerControls
  > .layer-blue
  .layer-line,
html[data-mobile-viewport='landscape']
  #navigationLayerControls
  button[data-navigation-layer='white3d']
  .layer-line {
  width: calc(50% + 7px);
}

html[data-mobile-viewport='landscape']
  #navigationLayerControls
  > .layer-red
  button::after,
html[data-mobile-viewport='landscape']
  #navigationLayerControls
  button[data-navigation-layer='white2d']::after {
  transform: none;
}

html[data-mobile-viewport='landscape']
  #navigationLayerControls
  > .layer-blue
  button::after,
html[data-mobile-viewport='landscape']
  #navigationLayerControls
  button[data-navigation-layer='white3d']::after {
  transform: none;
}

html[data-mobile-viewport='landscape']
  #navigationLayerControls
  button[data-navigation-layer$='2d']::after {
  transform: translateX(-4px);
}

html[data-mobile-viewport='landscape']
  #navigationLayerControls
  button[data-navigation-layer$='3d']::after {
  transform: translateX(-4px);
}

html[data-mobile-viewport='landscape'] #navigationVisibilityToggle {
  width: 26.667px;
  height: 44px;
  grid-column: 3;
  grid-row: 1 / 4;
  align-self: end;
}

html[data-mobile-viewport='landscape'] #antennaVisibilityToggle {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  top: auto;
  right: auto;
  width: 26.667px;
  height: 27px;
  grid-column: 3;
  grid-row: 1 / 4;
  align-self: start;
  border: 1px solid #5a6169;
  box-shadow: none;
}

html[data-mobile-viewport='landscape']
  #navigationLayerControls
  .navigation-layer-column
  button[aria-pressed='true'],
html[data-mobile-viewport='landscape']
  #navigationVisibilityToggle[aria-pressed='true'] {
  -webkit-appearance: none;
  appearance: none;
  background: #181c20;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

html[data-mobile-viewport='landscape']
  #navigationLayerControls
  > #navigationVisibilityToggle,
html[data-mobile-viewport='landscape']
  #navigationLayerControls
  > #antennaVisibilityToggle {
  transform: translateX(-2px);
}

html[data-mobile-viewport='landscape']
  #navigationVisibilityToggle
  .navigation-eye-icon {
  transform: none;
}

html[data-mobile-viewport='landscape'] #controls button {
  min-width: 0;
  min-height: var(--mobile-control-height);
  height: var(--mobile-control-height);
  padding: 0 5px;
  border: 1px solid #66727d;
  border-radius: 999px;
  background: linear-gradient(#2a3239, #181e23);
  color: #f5f7fa;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 2px 3px rgba(0, 0, 0, 0.42);
  font-size: 0;
  line-height: 1;
  pointer-events: auto;
  touch-action: manipulation;
}

html[data-mobile-viewport='landscape'] #controls button::after {
  content: attr(data-mobile-label);
  display: inline-block;
  font:
    700 clamp(8px, 2.05dvh, 11px) / 1 Arial,
    Helvetica,
    sans-serif;
  letter-spacing: 0.15px;
  white-space: nowrap;
  transform: scaleY(1.1);
  transform-origin: center;
}

html[data-mobile-viewport='landscape'] #controls .mobile-primary-controls {
  --mobile-button-stack-bottom: calc(23px + var(--mobile-control-height) + 4px);
  --mobile-button-stack-step: calc(var(--mobile-control-height) + 4px);
}

html[data-mobile-viewport='landscape']
  #controls
  .mobile-primary-controls
  > button {
  position: absolute;
  right: 5px;
  width: max-content;
  max-width: 100%;
  margin-right: 0.5px;
  border-radius: 0;
  transform-origin: right center;
}

html[data-mobile-viewport='landscape'] #controls button[data-command='marker'] {
  bottom: calc(
    var(--mobile-button-stack-bottom) + var(--mobile-button-stack-step) +
      var(--mobile-button-stack-step)
  );
}

html[data-mobile-viewport='landscape'] #mobileGraaccDonationLink {
  position: absolute;
  right: 5px;
  bottom: calc(var(--mobile-button-stack-bottom) + 0.5px);
  display: block;
  width: auto;
  height: var(--mobile-control-height);
  aspect-ratio: 1417 / 547;
  line-height: 0;
  transform: scale(0.94);
  transform-origin: center right;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

html[data-mobile-viewport='landscape'] #mobileGraaccDonationLink img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

html[data-mobile-viewport='landscape'] #mobileGraaccDonationLink::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 34%,
    rgba(255, 255, 255, 0.03) 42%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.03) 58%,
    transparent 66%
  );
  background-position: 100% 0;
  background-size: 220% 100%;
  -webkit-mask: url('../assets/graacc-mobile.efeffdc9e026.svg') center / contain no-repeat;
  mask: url('../assets/graacc-mobile.efeffdc9e026.svg') center / contain no-repeat;
  pointer-events: none;
  opacity: 0;
  animation: mobile-graacc-shine 40s linear 40s infinite;
}

@keyframes mobile-graacc-shine {
  0% {
    opacity: 1;
    background-position: 100% 0;
  }
  1.5% {
    opacity: 1;
    background-position: -100% 0;
  }
  1.6%,
  100% {
    opacity: 0;
    background-position: 100% 0;
  }
}

html[data-mobile-viewport='landscape']
  #controls
  button[data-command='marker']::before {
  content: '';
  position: absolute;
  inset: 1px;
  background: url('../assets/icons/mobile-marker-plane-circle.3e3ecd23569d.png') center /
    contain no-repeat;
  pointer-events: none;
}

html[data-mobile-viewport='landscape']
  #controls
  button[data-command='marker']::after {
  content: '';
  width: calc(5.8ch + 0.75px);
}

html[data-mobile-viewport='landscape']
  #controls
  button[data-command='autopilot'] {
  bottom: calc(
    var(--mobile-button-stack-bottom) + var(--mobile-button-stack-step) +
      var(--mobile-button-stack-step) + var(--mobile-button-stack-step)
  );
  text-align: center;
  color: #66727d;
}

html[data-mobile-viewport='landscape']
  #controls
  button[data-command='autopilot']::after {
  font-size: clamp(9.6px, 2.46dvh, 13.2px);
  color: inherit;
}

html[data-mobile-viewport='landscape'] #controls #mobileHelpButton {
  display: block;
  bottom: calc(
    var(--mobile-button-stack-bottom) + 4 * var(--mobile-button-stack-step)
  );
  text-align: center;
  color: #66727d;
}

html[data-mobile-viewport='landscape'] #controls #mobileHelpButton::after {
  font-size: clamp(9.6px, 2.46dvh, 13.2px);
  color: inherit;
}

html[data-mobile-viewport='landscape']
  #controls
  button[data-command='autopilot']:is(:active, .state-on, [aria-pressed='true']),
html[data-mobile-viewport='landscape']
  #controls
  #mobileHelpButton:is(:active, .state-on, [aria-pressed='true']) {
  color: #ffd54a;
}

html[data-mobile-viewport='landscape']
  #controls
  button[data-command='exercise'] {
  bottom: calc(
    var(--mobile-button-stack-bottom) + var(--mobile-button-stack-step)
  );
}

html[data-mobile-viewport='landscape']
  #controls
  button[data-command='exercise']::after,
html[data-mobile-viewport='landscape']
  #controls
  button[data-command='view3d']::after {
  content: '';
  width: calc(7.4ch + 1px);
}

html[data-mobile-viewport='landscape']
  #controls
  button[data-command='exercise']::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/icons/mobile-radials-button.78448d520d8c.svg') center / contain
    no-repeat;
  pointer-events: none;
}

html[data-mobile-viewport='landscape'] #controls button[data-command='view3d'] {
  top: calc(var(--mobile-instrument-size) / 2 + 1px);
  right: auto;
  bottom: auto;
  left: calc(var(--mobile-instrument-size) + 33px);
  translate: 25% 0;
}

html[data-mobile-viewport='landscape']
  #controls
  button[data-command='view3d']::after {
  visibility: hidden;
}

html[data-mobile-viewport='landscape']
  #controls
  button[data-command='view3d']::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/icons/PIP_botao.14a72c3007e7.png') left center / auto 100%
    no-repeat;
  pointer-events: none;
}

html[data-mobile-viewport='landscape']
  #controls
  button[data-command='view3d'][data-pip-environment='2d']::before {
  background-image: url('../assets/icons/PIP_botao_2D.5a3802d41b51.webp');
  background-position: -3px center;
}

html[data-mobile-viewport='landscape'] #controls button[data-command='boost'] {
  display: none;
}

html[data-mobile-viewport='landscape']
  #controls
  .mobile-utility-controls
  button {
  border-radius: 0;
  border-color: #59636c;
  background: linear-gradient(#2a3239, #181e23);
  color: #d6dde3;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 2px 4px rgba(0, 0, 0, 0.38);
}

html[data-mobile-viewport='landscape']
  #controls
  .mobile-utility-controls
  button:first-child {
  border-radius: 0;
}

html[data-mobile-viewport='landscape']
  #controls
  .mobile-utility-controls
  button:last-child {
  margin-left: -1px;
  border-radius: 0;
}

html[data-mobile-viewport='landscape']
  #controls
  .mobile-utility-controls
  .mobile-reset-button {
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
}

html[data-mobile-viewport='landscape']
  #controls
  .mobile-utility-controls
  .mobile-reset-button::before {
  content: '';
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 9px;
  height: 9px;
  background: #d6dde3;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

html[data-mobile-viewport='landscape']
  #controls
  .mobile-utility-controls
  .mobile-reset-button.is-interface-reset-holding::before {
  background: #ffd54a;
}

html[data-mobile-viewport='landscape']
  #controls
  .mobile-utility-controls
  .mobile-reset-button.is-interface-reset-confirmed {
  animation: interface-reset-mobile-key-flash 520ms ease-in-out 1;
}

@keyframes interface-reset-mobile-key-flash {
  0%,
  100% {
    border-color: #59636c;
    background: linear-gradient(#2a3239, #181e23);
    color: #d6dde3;
  }
  30%,
  70% {
    border-color: #ffd54a;
    background: linear-gradient(#5d5426, #373114);
    color: #fff1a6;
  }
}

html[data-mobile-viewport='landscape'] #controls button:active,
html[data-mobile-viewport='landscape'] #controls button.state-on,
html[data-mobile-viewport='landscape'] #controls button[aria-pressed='true'] {
  transform: translateY(1px) scale(0.97);
  border-color: #ffd54a;
  background: linear-gradient(#5d5426, #373114);
  color: #fff1a6;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5);
}

html[data-mobile-viewport='landscape']
  #controls
  .mobile-primary-controls
  > button:active,
html[data-mobile-viewport='landscape']
  #controls
  .mobile-primary-controls
  > button.state-on,
html[data-mobile-viewport='landscape']
  #controls
  .mobile-primary-controls
  > button[aria-pressed='true'] {
  transform: none;
}

html[data-mobile-viewport='landscape']
  #controls
  .mobile-primary-controls
  > button[data-command='view3d']:is(:active, .state-on, [aria-pressed='true']),
html[data-mobile-viewport='landscape']
  #controls
  .mobile-primary-controls
  > button[data-command='marker']:is(
    :active,
    .state-on,
    [aria-pressed='true']
  ) {
  border-color: #66727d;
  background: linear-gradient(#2a3239, #181e23);
  color: #f5f7fa;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 2px 3px rgba(0, 0, 0, 0.42);
}

html[data-mobile-viewport='landscape'] #sidebarChartLinks {
  position: static;
  grid-column: 1 / -1;
  grid-row: 3;
  z-index: auto;
  display: flex !important;
  width: 100%;
  height: 18px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: min(16px, 6%);
  pointer-events: auto;
}

html[data-mobile-viewport='landscape'] .sidebar-chart-label-row {
  display: none;
}

html[data-mobile-viewport='landscape'] .sidebar-chart-link {
  display: inline-flex;
  width: auto;
  height: 18px;
  align-items: center;
  color: #cdd8e2;
  font:
    700 9px/18px Arial,
    Helvetica,
    sans-serif;
  letter-spacing: 0.45px;
  line-height: 18px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

html[data-mobile-viewport='landscape'] #mobileFaaChartsLink,
html[data-mobile-viewport='landscape'] #mobileInsigniaChartsLink {
  display: inline-flex;
}

html[data-mobile-viewport='landscape'] .sidebar-chart-link img {
  display: none;
}

html[data-mobile-viewport='landscape'] .mobile-chart-label {
  display: inline-block;
  font-style: italic;
  transform: skewX(-8deg);
}

html[data-mobile-viewport='landscape'] #radialEntry.visible {
  --radial-spin-width: 32px;
  left: calc(
    (
        100vw - var(--mobile-safe-left) - var(--mobile-safe-right) -
          var(--mobile-instrument-width)
      ) /
      2 + var(--mobile-safe-left)
  );
  top: max(34px, calc(var(--mobile-safe-top) + 28px));
  display: flex !important;
  max-width: calc(
    100vw - var(--mobile-safe-left) - var(--mobile-safe-right) -
      var(--mobile-instrument-width) - 16px
  );
  padding: 6px 8px;
  gap: 7px;
  box-sizing: border-box;
  cursor: auto;
  pointer-events: auto;
}

html[data-mobile-viewport='landscape'] #radialEntry.visible:not(.pinned) {
  left: calc(var(--mobile-safe-left) + 12px + var(--mobile-3d-width) + 24px);
  transform: none;
}

html[data-mobile-viewport] #radialEntry {
  touch-action: none;
}

html[data-mobile-viewport] #radialEntry.dragging input {
  -webkit-user-select: none;
  user-select: none;
}

html[data-mobile-viewport] #radialEntry button:disabled {
  pointer-events: none;
}

html[data-mobile-viewport='landscape'] #radialEntry .radial-entry-mouse-hint {
  display: none;
}

html[data-mobile-viewport='landscape'] #radialEntry .mobile-radial-random {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid #59636c;
  border-radius: 4px;
  background: linear-gradient(#2a3239, #181e23);
  color: #eee;
  font:
    700 10px/1 Arial,
    Helvetica,
    sans-serif;
  touch-action: manipulation;
}

html[data-mobile-viewport='landscape']
  #radialEntry
  .mobile-radial-random:disabled {
  opacity: 0.5;
}

html[data-mobile-viewport='landscape'] #radialEntry .mobile-radial-random img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: invert(1);
  pointer-events: none;
}

html[data-mobile-viewport='landscape'] #radialEntry #radialFeedback {
  width: 64px;
  flex-basis: 64px;
}

html[data-mobile-viewport='landscape'] #radialEntry #radialMessage {
  width: 64px;
  font-size: 9px;
  overflow-wrap: anywhere;
}

html[data-mobile-viewport='landscape'] #radialEntry .radial-input-wrap input {
  width: clamp(50.667px, 9.333vw, 73.333px);
  height: 28px;
  padding: 2px 4px;
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}

html[data-mobile-viewport='landscape'] #radialEntry .radial-spin-buttons {
  width: 32px;
  height: 28px;
}

html[data-mobile-viewport='landscape'] #diagnosticsBackdrop.visible {
  position: fixed;
  inset: 0;
  display: block !important;
  pointer-events: auto;
}

html[data-mobile-viewport='landscape'] #diagnosticsPanel.visible {
  position: fixed;
  display: block !important;
  width: calc(
    100vw - var(--mobile-safe-left) - var(--mobile-safe-right) - 20px
  );
  max-height: calc(
    100dvh - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 20px
  );
  padding: 8px;
  box-sizing: border-box;
  pointer-events: auto;
}

html[data-mobile-viewport='landscape']
  #app:has(#diagnosticsPanel.visible)
  #instrumentPanel {
  z-index: auto;
}

html[data-mobile-viewport='landscape']
  #app:has(#diagnosticsPanel.visible)
  #controls
  button[data-command='diagnostics'] {
  position: relative;
  z-index: 121;
}

html[data-mobile-viewport='landscape'] #diagnosticsPanel #diagnosticsText {
  font-size: 9px;
  line-height: 1.3;
}

html[data-mobile-viewport='landscape']
  #mapPanel:not(.view3d-primary)
  #view3dViewport {
  top: 12px;
  left: 12px;
  right: auto;
  bottom: auto;
  width: var(--mobile-3d-width);
  height: var(--mobile-3d-height);
  border-width: 1px;
  border-radius: 6px;
}

html[data-mobile-viewport='landscape'] #view3dCanvas,
html[data-mobile-viewport='landscape'] #view3dOverlay,
html[data-mobile-viewport='landscape'] #view3dHud {
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: inherit;
}

html[data-mobile-viewport='landscape'] #mapPanel.view3d-primary #mapViewport {
  top: 12px;
  left: 12px;
  width: var(--mobile-3d-width);
  height: var(--mobile-3d-height);
  border-width: 1px;
  border-radius: 6px;
  background: #4f8b45;
}

.mobile-vor-pip-direction {
  display: none;
}

html[data-mobile-viewport='landscape']
  #mapPanel.view3d-primary
  .mobile-vor-pip-direction:not([hidden]) {
  --mobile-pip-dot-halo: 1px;
  display: block;
  position: absolute;
  z-index: 10;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #505050;
  box-shadow: 0 0 0 var(--mobile-pip-dot-halo) rgba(0, 0, 0, 0.65);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

html[data-mobile-viewport='landscape']
  #mapPanel.view3d-primary
  #mobileVor1PipDirection:not([hidden]) {
  --mobile-pip-dot-halo: 0px;
  background: #000;
  box-shadow: none;
}

html[data-mobile-viewport='landscape']
  #mapPanel.view3d-primary
  #mobileVor2PipDirection:not([hidden]) {
  background: #cedfcb;
}

html[data-mobile-viewport='landscape']
  #mapPanel.view3d-primary.view2d-pip-hidden
  .mobile-vor-pip-direction {
  display: none;
}

html[data-mobile-viewport='landscape'] #mapViewport {
  pointer-events: auto;
  touch-action: none;
}

html[data-mobile-viewport='landscape'] #view3dDeclinationSpinner {
  inset: 0;
  width: 100%;
  height: 100%;
}

html[data-mobile-viewport='landscape'] #view3dFromProjection {
  top: calc(14px + var(--mobile-3d-height));
  left: calc(12px + var(--mobile-3d-center-x));
}

html[data-mobile-viewport='landscape'] #view3dOverlapHeading {
  top: calc(var(--mobile-3d-height) - 4px);
  left: calc(12px + var(--mobile-3d-center-x));
}

html[data-mobile-viewport='landscape'] #northRose {
  top: 8px;
  right: 8px;
  transform: scale(0.86);
  transform-origin: top right;
  pointer-events: auto;
  touch-action: manipulation;
}

html[data-mobile-viewport='landscape'] #northRose .north-rose-rotor {
  opacity: 1;
}

html[data-mobile-viewport='landscape'] #northRose .north-rose-graphic circle {
  display: none;
}

html[data-mobile-viewport='landscape'] #northRose .north-rose-declination {
  display: block;
  fill: currentColor;
  stroke: #4f8b45;
  stroke-width: 2;
  paint-order: stroke fill;
  font:
    700 13px Arial,
    Helvetica,
    sans-serif;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

html[data-mobile-viewport='landscape']
  #mapPanel.view3d-primary
  #northRose
  .north-rose-rotor {
  display: none;
}

html[data-mobile-viewport='landscape']
  #mapPanel.view3d-primary
  #northRose:not(.declination-open) {
  pointer-events: none;
}

html[data-mobile-viewport='landscape'] #viewSwapButton,
html[data-mobile-viewport='landscape'] #fullscreenButton {
  top: 16px;
  left: calc(12px + var(--mobile-3d-width) - 32px);
  width: 28px;
  height: 28px;
  padding: 4px;
  border-radius: 5px;
  pointer-events: auto;
  touch-action: manipulation;
}

html[data-mobile-viewport='landscape'] #fullscreenButton {
  left: calc(12px + var(--mobile-3d-width) - 64px);
}

html[data-mobile-viewport='landscape']
  #viewSwapButton[hidden]
  + #fullscreenButton {
  left: 16px;
}

html[data-mobile-viewport='landscape'] #controlScheme,
html[data-mobile-viewport='landscape'] #navigationLayerHover,
html[data-mobile-viewport='landscape'] #navigationLayerHint,
html[data-mobile-viewport='landscape'] #aacdDonationLink,
html[data-mobile-viewport='landscape'] #graaccDonationLink,
html[data-mobile-viewport='landscape'] #diagnosticsToggleSlot,
html[data-mobile-viewport='landscape'] #help,
html[data-mobile-viewport='landscape'] #authorCredit {
  display: none !important;
}

html[data-mobile-viewport='landscape']
  #mapPanel:not(.view3d-primary)
  #view3dCourseInstrument {
  display: none;
}

html[data-mobile-viewport='landscape']
  #mapPanel.view3d-primary
  #view3dCourseInstrument[data-course-environment='3d']:not([hidden]) {
  left: auto;
  right: 6px;
  width: calc(var(--mobile-instrument-size) + 8px);
  pointer-events: auto;
  touch-action: none;
  clip-path: circle(47% at 50% 50%);
}