:root {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--ap-page-bg, #b9d3e6); color: #193247; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
#airport-sky { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

.ap-ui {
  --ap-ink: #183147;
  --ap-muted: #425b70;
  --ap-symbol: #5d7282;
  --ap-field: rgba(255, 255, 252, .98);
  --ap-panel: #fffefa;
  --ap-edge: rgba(31, 58, 78, .16);
  --ap-action: #183e59;
  --ap-action-hover: #245370;
  --ap-action-ink: #fff;
  --ap-disabled: #e2eaee;
  --ap-disabled-ink: #758995;
  --ap-focus: #426e8c;
  --ap-focus-halo: rgba(224, 239, 249, .6);
  --ap-hover: rgba(49, 77, 96, .07);
  --ap-field-shadow: 0 5px 18px rgba(16, 39, 58, .09), 0 1px 2px rgba(16, 39, 58, .06);
  --ap-panel-shadow: 0 12px 36px rgba(16, 34, 49, .17), 0 2px 6px rgba(16, 34, 49, .05);
  --ap-correct: #245a40;
  --ap-nav-shadow: 0 1px 8px rgba(248, 252, 255, .26);
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  color: var(--ap-ink);
}
.ap-ui[data-theme="night"] {
  --ap-ink: #eaf0f7;
  --ap-muted: #bdccda;
  --ap-symbol: #a4b5c5;
  --ap-field: rgba(17, 31, 50, .98);
  --ap-panel: #14243a;
  --ap-edge: rgba(217, 232, 250, .2);
  --ap-action: #e6eef6;
  --ap-action-hover: #fff;
  --ap-action-ink: #203a50;
  --ap-disabled: #27394d;
  --ap-disabled-ink: #8d9fae;
  --ap-focus: #b5cfdf;
  --ap-focus-halo: rgba(44, 69, 91, .66);
  --ap-hover: rgba(214, 235, 250, .08);
  --ap-field-shadow: 0 5px 20px rgba(0, 9, 24, .17), inset 0 1px rgba(255, 255, 255, .025);
  --ap-panel-shadow: 0 14px 40px rgba(0, 7, 20, .38);
  --ap-correct: #b1dfc6;
  --ap-nav-shadow: 0 1px 8px rgba(0, 8, 20, .6);
}
.ap-ui :is(button, a, input):focus-visible { outline: 2px solid var(--ap-focus); outline-offset: 3px; }
.ap-ui :is(button, a) { touch-action: manipulation; }

.ap-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: calc(10px + env(safe-area-inset-top)) 24px 10px;
  text-shadow: var(--ap-nav-shadow);
}
.ap-header a { pointer-events: auto; text-decoration: none; color: inherit; }
.ap-header h1 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -.025em; white-space: nowrap; text-align: center; }
.ap-more-games { display: flex; align-items: center; gap: 8px; justify-self: start; min-height: 44px; padding: 0 2px; font-size: 12px; font-weight: 550; white-space: nowrap; border-radius: 8px; }
.ap-more-games svg { width: 17px; height: 17px; }
.ap-account-nav { display: flex; align-items: center; justify-self: end; gap: 8px; }
.ap-premium { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 15px; font-size: 11px; font-weight: 550; white-space: nowrap; border-radius: 99px; }
.ap-premium::before { content: ""; position: absolute; inset: 5px 0; z-index: -1; border: 1px solid var(--ap-edge); border-radius: inherit; background: rgba(244, 250, 255, .08); transition: background .15s; }
.ap-premium-short { display: none; }
.ap-profile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.ap-profile svg { width: 19px; height: 19px; }
.ap-source-bar { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 3px 20px 8px; text-shadow: var(--ap-nav-shadow); }
.ap-airport-title { margin: 0; padding-left: .24em; font-size: 15px; line-height: 1.3; font-weight: 500; letter-spacing: .24em; color: var(--ap-ink); opacity: .9; }

.ap-dock { position: relative; width: min(560px, 100%); margin: auto auto var(--ap-keyboard-inset, 0px); padding: 0 20px max(20px, env(safe-area-inset-bottom)); pointer-events: none; }
.ap-attempts { display: flex; align-items: center; justify-content: center; gap: 8px; height: 8px; margin: 0 0 14px; }
.ap-attempts span { width: 5px; height: 5px; border-radius: 50%; background: var(--ap-muted); opacity: .24; transition: opacity .18s, transform .18s; }
.ap-attempts span.is-past { opacity: .55; }
.ap-attempts span.is-current { opacity: 1; transform: scale(1.15); }
.ap-entry-row { display: flex; align-items: center; pointer-events: auto; }
.ap-guess-form { position: relative; display: flex; align-items: stretch; gap: 8px; min-width: 0; flex: 1; margin: 0; }
.ap-input-wrap { position: relative; flex: 1; min-width: 0; }
.ap-input-pill { position: relative; display: flex; align-items: center; gap: 10px; height: 54px; min-width: 0; padding: 0 4px 0 16px; border: 1px solid var(--ap-edge); border-radius: 15px; background: var(--ap-field); box-shadow: var(--ap-field-shadow); transition: border-color .15s, box-shadow .15s; }
.ap-input-pill:focus-within { border-color: var(--ap-focus); box-shadow: 0 0 0 3px var(--ap-focus-halo), var(--ap-field-shadow); }
.ap-input-pill.is-selected { border-color: var(--ap-focus); }
.ap-field-icon { display: flex; align-items: center; color: var(--ap-symbol); flex-shrink: 0; }
.ap-field-icon svg { width: 17px; height: 17px; }
.ap-input-pill input { min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; outline: 0 !important; background: none; color: var(--ap-ink); font-size: 16px; font-weight: 450; line-height: 1.3; text-overflow: ellipsis; caret-color: var(--ap-ink); }
.ap-input-pill.is-selected input { font-weight: 550; }
.ap-input-pill input::placeholder { color: var(--ap-symbol); opacity: 1; }
.ap-input-pill input:disabled { opacity: .75; -webkit-text-fill-color: currentColor; }
.ap-clear-button { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 11px; background: none; color: var(--ap-symbol); }
.ap-clear-button svg { width: 17px; height: 17px; }
.ap-clear-button:disabled { opacity: .3; }
.ap-guess-button { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 100px; height: 54px; padding: 0 12px; border: 1px solid transparent; border-radius: 15px; background: var(--ap-action); color: var(--ap-action-ink); box-shadow: 0 3px 9px rgba(12, 35, 51, .08); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .15s, transform .1s, box-shadow .15s; }
.ap-guess-button:disabled { box-shadow: none; background: var(--ap-disabled); color: var(--ap-disabled-ink); border-color: var(--ap-edge); }
.ap-guess-button:active:not(:disabled) { transform: translateY(1px); }
.ap-submit-arrow { display: flex; align-items: center; }
.ap-submit-arrow svg { width: 16px; height: 16px; }
.ap-submit-spinner { display: none; flex: 0 0 13px; width: 13px; height: 13px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ap-spin .8s linear infinite; }
.ap-guess-form[aria-busy="true"] .ap-submit-arrow { display: none; }
.ap-guess-form[aria-busy="true"] .ap-submit-spinner { display: block; }
.ap-field-progress { position: absolute; left: 14px; right: 14px; bottom: 1px; height: 2px; overflow: hidden; border-radius: 2px; background: var(--ap-hover); }
.ap-field-progress > span { display: block; width: 100%; height: 100%; background: var(--ap-focus); transform-origin: left; transition: transform .12s linear; }
.ap-suggestions { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 25; width: 100%; padding: 5px; border: 1px solid var(--ap-edge); border-radius: 15px; background: var(--ap-panel); box-shadow: var(--ap-panel-shadow); pointer-events: auto; overflow: hidden; }
.ap-suggestions ul { list-style: none; margin: 0; padding: 0; max-height: min(320px, 38dvh, var(--ap-menu-height, 320px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ap-symbol) transparent; }
.ap-option { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: 9px; color: var(--ap-ink); font-size: 14px; line-height: 1.35; cursor: pointer; }
.ap-option[aria-selected="true"] { background: var(--ap-hover); font-weight: 550; }
.ap-no-options { font-size: 13px; color: var(--ap-muted); padding: 12px; margin: 0; }
.ap-guess-result { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 12px; color: var(--ap-ink); font-size: 12px; font-weight: 550; line-height: 1.4; text-shadow: var(--ap-nav-shadow); animation: ap-result-in .2s ease-out; }
.ap-guess-form[data-complete="true"] .ap-field-icon { display:none; }
.ap-guess-result.is-correct { color: var(--ap-ink); }
.ap-guess-result > span:first-child svg { display: block; height: 16px; width: 16px; }
.ap-status { margin: 7px 0 0; color: var(--ap-muted); font-size: 12px; line-height: 1.5; text-align: center; text-shadow: var(--ap-nav-shadow); }
.ap-status.is-loading, .ap-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@keyframes ap-result-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ap-spin { to { transform: rotate(360deg); } }
@media (hover: hover) {
  .ap-more-games:hover, .ap-profile:hover { color: var(--ap-muted); }
  .ap-premium:hover::before { background: var(--ap-hover); }
  .ap-option:hover, .ap-clear-button:hover:not(:disabled) { background: var(--ap-hover); }
  .ap-guess-button:hover:not(:disabled) { background: var(--ap-action-hover); box-shadow: 0 4px 12px rgba(12, 35, 51, .12); }
}
@media (min-width: 1000px) {
  .ap-header { padding-left: 30px; padding-right: 30px; padding-top: calc(13px + env(safe-area-inset-top)); padding-bottom: 13px; }
  .ap-dock { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
}
@media (max-width: 680px) {
  .ap-header { gap: 8px; min-height: 60px; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; }
  .ap-header h1 { font-size: 16px; }
  .ap-more-games { font-size: 12px; gap: 6px; }
  .ap-more-games svg { width: 16px; height: 16px; }
  .ap-account-nav { gap: 2px; }
  .ap-premium { font-size: 10px; padding: 0 10px; }
  .ap-source-bar { min-height: 34px; padding: 0 16px 7px; }
  .ap-airport-title { font-size: 14px; }
  .ap-dock { padding: 0 16px max(16px, env(safe-area-inset-bottom)); }
  .ap-guess-button { flex-basis: 92px; font-size: 12px; padding: 0 9px; }
  .ap-input-pill { padding-left: 13px; gap: 8px; }
  .ap-guess-result { font-size: 12px; }
}
@media (max-width: 480px) {
  .ap-header { padding-left: 12px; padding-right: 12px; }
  .ap-header h1 { font-size: 15px; }
  .ap-more-games { font-size: 11px; padding: 0; }
  .ap-more-games svg, .ap-field-icon { display: none; }
  .ap-account-nav { gap: 0; }
  .ap-premium { padding: 0 8px; }
  .ap-profile svg { width: 18px; height: 18px; }
  .ap-source-bar { padding-bottom: 6px; }
  .ap-input-pill { gap: 3px; }
}
@media (max-width: 360px) {
  .ap-header h1 { font-size: 13.5px; }
  .ap-premium-long { display: none; }
  .ap-premium-short { display: inline; }
  .ap-premium { padding: 0 6px; }
  .ap-dock { padding-left: 12px; padding-right: 12px; }
  .ap-guess-button { flex-basis: 84px; gap: 5px; padding: 0 7px; }
  .ap-input-pill { padding-left: 11px; }
  .ap-option { padding-left: 9px; padding-right: 9px; font-size: 13px; }
}
.ap-ui[data-keyboard="open"] .ap-dock { padding-bottom: 8px; }
@media (max-height: 600px) {
  .ap-source-bar { padding-top: 0; }
  .ap-dock { padding-bottom: max(5px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}