.av-altimeter-lab {
  --av-alt-ink: #163147;
  --av-alt-muted: #52697a;
  --av-alt-blue: #1c638c;
  --av-alt-teal: #087f82;
  box-sizing: border-box;
  width: 100%;
  margin: 1.8em 0;
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid #c9dce7;
  border-radius: 20px;
  background: #f3f8fb;
  color: var(--av-alt-ink);
  font: 16px/1.65 system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.av-altimeter-lab *, .av-altimeter-lab *::before, .av-altimeter-lab *::after { box-sizing: border-box; }
.av-altimeter-lab h3, .av-altimeter-lab p { margin: 0; }
.av-altimeter-lab__intro { margin-bottom: 18px; }
.av-altimeter-lab__eyebrow { color: var(--av-alt-teal); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.av-altimeter-lab__intro h3 { margin: 3px 0 7px; color: var(--av-alt-ink); font-size: clamp(20px, 2.8vw, 26px); line-height: 1.35; }
.av-altimeter-lab__intro p:last-child { color: var(--av-alt-muted); }
.av-altimeter-lab__airports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.av-altimeter-lab__airports button { display: grid; gap: 1px; min-width: 0; border: 2px solid #c6dce7; border-radius: 12px; padding: 11px 14px; background: #fff; color: var(--av-alt-ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.av-altimeter-lab__airports button strong { font-size: 16px; }
.av-altimeter-lab__airports button[aria-pressed=true] { border-color: #087f82; background: #e3f5f2; }
.av-altimeter-lab__scene-note { margin: 8px 0 14px !important; color: var(--av-alt-muted); font-size: 12px; }
.av-altimeter-lab__display { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.av-altimeter-lab__position, .av-altimeter-lab__instrument { min-width: 0; padding: 16px; border: 1px solid #d7e5ed; border-radius: 16px; background: #fff; text-align: center; }
.av-altimeter-lab__label { min-height: 42px; font-weight: 800; }
.av-altimeter-lab__label small { display: block; color: var(--av-alt-muted); font-size: 11px; font-weight: 500; }
.av-altimeter-lab__sky { position: relative; height: 220px; margin: 9px auto 5px; overflow: hidden; border: 1px solid #b6d8e9; border-radius: 12px; background: linear-gradient(#cdeafa 0%, #eaf6fc 73%, #b4d5b4 74%, #86b385 90%, #5d94ad 91%); }
.av-altimeter-lab__sky::after { position: absolute; right: 0; bottom: var(--ground-bottom, 13%); left: 0; height: 2px; background: #375f6c; content: ''; }
.av-altimeter-lab__plane { position: absolute; z-index: 2; left: 50%; bottom: 13%; width: 42px; margin-left: -21px; color: #133c58; font-size: 34px; line-height: 1; text-shadow: 0 1px 2px #fff; transform: rotate(-4deg); transition: bottom .18s ease; }
.av-altimeter-lab__boundary { position: absolute; right: 0; bottom: 63.1%; left: 0; z-index: 1; border-top: 2px dashed #b85f14; }
.av-altimeter-lab__boundary span { position: absolute; top: -27px; left: 7px; border-radius: 4px; padding: 1px 5px; background: #fff5e7; color: #8c450b; font-size: 10px; font-weight: 800; }
.av-altimeter-lab__airport, .av-altimeter-lab__sea { position: absolute; left: 8px; z-index: 1; border-radius: 5px; padding: 1px 5px; background: #ffffffde; color: #244653; font-size: 11px; font-weight: 700; }
.av-altimeter-lab__airport { bottom: calc(var(--ground-bottom, 13%) + 2%); }
.av-altimeter-lab__sea { bottom: 1%; }
.av-altimeter-lab__physical, .av-altimeter-lab__reading { display: block; color: var(--av-alt-ink); font-size: clamp(24px, 3.5vw, 34px); font-variant-numeric: tabular-nums; line-height: 1.25; }
.av-altimeter-lab__dial { width: min(220px, 100%); height: 220px; margin: 9px auto 5px; }
.av-altimeter-lab__dial svg { display: block; width: 100%; height: 100%; }
.av-altimeter-lab__dial-face { fill: #183347; stroke: #082234; stroke-width: 3; }
.av-altimeter-lab__dial-ring { fill: none; stroke: #83a4b7; stroke-width: 2; }
.av-altimeter-lab__dial text { fill: #e7f3f9; font-size: 13px; font-weight: 700; }
.av-altimeter-lab__needle { stroke: #ffb96d; stroke-width: 4; stroke-linecap: round; }
.av-altimeter-lab__hub { fill: #ffb96d; }
.av-altimeter-lab__mode { display: inline-block; margin-top: 6px; border-radius: 20px; padding: 2px 10px; background: #ddf1ed; color: #12625d; font-size: 12px; font-weight: 800; }
.av-altimeter-lab__dial-note { margin-top: 5px !important; color: var(--av-alt-muted); font-size: 11px; }
.av-altimeter-lab__controls { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.av-altimeter-lab__control { min-width: 0; padding: 15px; border: 1px solid #d7e5ed; border-radius: 14px; background: #fff; }
.av-altimeter-lab__control label { display: block; color: var(--av-alt-ink); font-size: 14px; font-weight: 800; }
.av-altimeter-lab__control output { float: right; color: var(--av-alt-blue); font-variant-numeric: tabular-nums; }
.av-altimeter-lab__control input[type=range] { display: block; width: 100%; margin: 14px 0 12px; accent-color: var(--av-alt-teal); cursor: pointer; }
.av-altimeter-lab__control p { color: var(--av-alt-muted); font-size: 12px; }
.av-altimeter-lab__weather { grid-column: 1 / -1; border-color: #a6d6d3; background: #eef9f6; }
.av-altimeter-lab__weather-entry { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px; margin: 3px 0 8px; font-size: 12px !important; }
.av-altimeter-lab__weather-entry input { width: 110px; border: 1px solid #96bcc9; border-radius: 6px; padding: 5px 7px; color: var(--av-alt-ink); font: inherit; font-variant-numeric: tabular-nums; }
.av-altimeter-lab__buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.av-altimeter-lab__buttons button { border: 1px solid #96bcc9; border-radius: 8px; padding: 6px 9px; background: #fff; color: #164960; font: inherit; font-size: 12px; font-weight: 750; line-height: 1.35; cursor: pointer; }
.av-altimeter-lab__buttons button span { font-weight: 500; }
.av-altimeter-lab__buttons button[aria-pressed=true] { border-color: #126c73; background: #ddf2ef; color: #075357; }
.av-altimeter-lab__buttons button:focus-visible, .av-altimeter-lab__airports button:focus-visible, .av-altimeter-lab__control input:focus-visible { outline: 3px solid #ffb96d; outline-offset: 2px; }
.av-altimeter-lab__altitude-buttons { margin-top: 10px; }
.av-altimeter-lab__explain { margin-top: 14px !important; border-left: 4px solid #15908e; border-radius: 0 8px 8px 0; padding: 11px 14px; background: #e3f5f2; font-weight: 700; }
.av-altimeter-lab__rule { margin-top: 10px !important; border-left: 4px solid #b85f14; border-radius: 0 8px 8px 0; padding: 9px 14px; background: #fff3e5; color: #713d13; font-size: 13px; font-weight: 700; }
.av-altimeter-lab__facts { margin-top: 11px; border-radius: 10px; padding: 10px 13px; background: #eaf2f7; color: var(--av-alt-ink); font-size: 13px; }
.av-altimeter-lab__facts p + p { margin-top: 3px; }
.av-altimeter-lab__facts output { font-weight: 800; font-variant-numeric: tabular-nums; }
.av-altimeter-lab__caution { margin-top: 12px !important; color: var(--av-alt-muted); font-size: 12px; }

@media (max-width: 640px) {
  .av-altimeter-lab__display, .av-altimeter-lab__controls, .av-altimeter-lab__airports { grid-template-columns: 1fr; }
  .av-altimeter-lab__position, .av-altimeter-lab__instrument { padding: 13px; }
  .av-altimeter-lab__sky { height: 150px; }
  .av-altimeter-lab__dial { height: 180px; }
  .av-altimeter-lab__plane { font-size: 30px; }
  .av-altimeter-lab__boundary span { top: -25px; font-size: 9px; }
  .av-altimeter-lab__control output { float: none; display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .av-altimeter-lab__plane { transition: none; }
}