:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  --sky-top: #07111f;
  --sky-mid: #17283d;
  --sky-low: #9a7252;
  --glow: rgba(255, 183, 100, 0.22);
  --cloud-opacity: 0.18;
  --rain-opacity: 0;
  --mist-opacity: 0.06;
  --wind-duration: 48s;
  --wind-near-duration: 33s;
  --wind-bank-duration: 60s;
  --sun-x: 50%;
  --sun-y: 42%;
  --solar-opacity: 0;
  --panel: rgba(7, 15, 25, 0.58);
  --panel-strong: rgba(7, 15, 25, 0.78);
  --line: rgba(255, 255, 255, 0.16);
  --muted: rgba(244, 248, 252, 0.68);
  --accent: #ffb75f;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: #07111f; }

body {
  position: relative;
  isolation: isolate;
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  overflow-x: hidden;
  color: #f8fbff;
  background: #07111f;
}

body[data-phase="dawn"] {
  --sky-top: #172544;
  --sky-mid: #7b5f72;
  --sky-low: #f0a86f;
  --glow: rgba(255, 176, 91, 0.5);
  --accent: #ffc27a;
}

body[data-phase="day"] {
  --sky-top: #2c6f9f;
  --sky-mid: #6ea2bd;
  --sky-low: #b8c8c5;
  --glow: rgba(220, 242, 255, 0.2);
  --accent: #c9edff;
}

body[data-phase="dusk"] {
  --sky-top: #172342;
  --sky-mid: #875764;
  --sky-low: #ee8e58;
  --glow: rgba(255, 127, 65, 0.48);
  --accent: #ffad72;
}

body[data-phase="night"] {
  --sky-top: #020711;
  --sky-mid: #0b1830;
  --sky-low: #263a4c;
  --glow: rgba(92, 153, 203, 0.14);
  --accent: #9fd6ff;
}

.scene,
.scene > div {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.scene { z-index: 0; overflow: hidden; background: var(--sky-top); }

.scene__image {
  background-image: url("./airfield-horizon.webp");
  background-position: center 60%;
  background-size: cover;
  filter: saturate(0.62) contrast(1.08) brightness(0.65);
  transform: scale(1.055);
  animation: airfield-breathe 34s ease-in-out infinite alternate;
}

[data-phase="day"] .scene__image { filter: saturate(0.72) contrast(1.02) brightness(0.92); }
[data-phase="dawn"] .scene__image,
[data-phase="dusk"] .scene__image { filter: sepia(0.15) saturate(0.8) contrast(1.06) brightness(0.72); }
[data-phase="night"] .scene__image { filter: saturate(0.45) contrast(1.14) brightness(0.38) hue-rotate(5deg); }

.scene__sky {
  background:
    radial-gradient(circle at 68% 72%, var(--glow), transparent 36%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 46%, var(--sky-low) 100%);
  mix-blend-mode: color;
  opacity: 0.9;
  transition: background 1.8s ease, opacity 1.8s ease;
}

.scene__solar-glow {
  left: var(--sun-x);
  top: var(--sun-y);
  right: auto;
  bottom: auto;
  width: min(46vw, 680px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: var(--solar-opacity);
  background: radial-gradient(circle, rgba(255, 236, 190, 0.5) 0, rgba(255, 169, 78, 0.2) 24%, transparent 68%);
  filter: blur(12px);
  transform: translate(-50%, -50%);
  animation: solar-pulse 7s ease-in-out infinite alternate;
  transition: left 2s linear, top 2s linear, opacity 1.6s ease;
}

.scene__stars {
  opacity: 0;
  background-image:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,0.82) 0 1px, transparent 1.6px),
    radial-gradient(circle at 72% 13%, rgba(207,229,255,0.72) 0 1px, transparent 1.5px),
    radial-gradient(circle at 43% 31%, rgba(255,255,255,0.58) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 88% 37%, rgba(255,255,255,0.62) 0 0.8px, transparent 1.4px);
  background-size: 290px 210px, 410px 300px, 340px 250px, 520px 370px;
  animation: star-shift 22s ease-in-out infinite alternate, star-twinkle 5s ease-in-out infinite alternate;
  transition: opacity 1.8s ease;
}

[data-phase="night"] .scene__stars { opacity: 0.42; }

.scene__clouds {
  inset: -5% -24% 16%;
  opacity: var(--cloud-opacity);
  background-image: url("./cloud-layer-v3.webp");
  background-repeat: repeat-x;
  background-position: 0 8%;
  background-size: auto 78%;
  filter: blur(1.2px) brightness(0.9);
  mix-blend-mode: screen;
  animation: cloud-texture-drift var(--wind-duration) linear infinite;
  transition: opacity 1.4s ease;
  will-change: background-position, opacity;
}

.scene__clouds--near {
  inset: 9% -30% 3%;
  opacity: calc(var(--cloud-opacity) - 0.06);
  background-position: 400px 34%;
  background-size: auto 96%;
  filter: blur(3.5px) brightness(0.72);
  mix-blend-mode: screen;
  animation-name: cloud-texture-drift-near;
  animation-duration: var(--wind-near-duration);
}

.scene__cloud-bank {
  inset: 26% -38% 15%;
  opacity: calc(var(--cloud-opacity) - 0.1);
  background-image: url("./cloud-layer-v3.webp");
  background-repeat: repeat-x;
  background-position: -650px 70%;
  background-size: auto 118%;
  filter: blur(7px) brightness(0.62);
  mix-blend-mode: soft-light;
  animation: cloud-bank-drift var(--wind-bank-duration) linear infinite;
  will-change: background-position, opacity;
}

[data-wind-flow="west"] .scene__clouds,
[data-wind-flow="west"] .scene__cloud-bank { animation-direction: reverse; }

.scene__rain {
  inset: -20%;
  opacity: var(--rain-opacity);
  background: repeating-linear-gradient(102deg, transparent 0 15px, rgba(210, 231, 246, 0.36) 16px 17px, transparent 18px 27px);
  background-size: 150% 150%;
  filter: blur(0.35px);
  transform: rotate(-3deg);
  animation: rain-fall 0.55s linear infinite;
  transition: opacity 1s ease;
}

.scene__mist {
  top: 48%;
  opacity: var(--mist-opacity);
  background: linear-gradient(180deg, transparent, rgba(226, 237, 242, 0.76), transparent 75%);
  filter: blur(34px);
  animation: mist-breathe 9s ease-in-out infinite alternate;
  transition: opacity 1.4s ease;
}

.scene__lightning { opacity: 0; background: rgba(220, 236, 255, 0.72); }
[data-weather="storm"] .scene__lightning { animation: lightning 8s steps(1, end) infinite; }

.scene__vignette {
  background:
    linear-gradient(180deg, rgba(2, 7, 15, 0.08), rgba(2, 7, 15, 0.55)),
    radial-gradient(circle at center, transparent 30%, rgba(1, 6, 12, 0.55) 115%);
}

.background-demo {
  display: none;
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: 14px;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 24px);
  padding: 7px;
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  background: rgba(3, 9, 17, 0.84);
  box-shadow: 0 14px 42px rgba(0,0,0,0.36);
  backdrop-filter: blur(18px) saturate(1.15);
  transform: translateX(-50%);
}

[data-background-demo] .background-demo { display: flex; }
.background-demo span,
.background-demo a { flex: 0 0 auto; }
.background-demo span { padding: 0 8px; color: rgba(255,255,255,0.66); font-size: 0.72rem; font-weight: 750; }
.background-demo a { padding: 7px 9px; border-radius: 8px; color: rgba(255,255,255,0.84); font-size: 0.72rem; font-weight: 750; text-decoration: none; }
.background-demo a:hover { color: #fff; background: rgba(255,255,255,0.1); }
.background-demo a[href="./"] { color: #07131e; background: var(--accent); }

[data-background-demo="sunrise"] .background-demo a[href="?background=sunrise"],
[data-background-demo="daylight"] .background-demo a[href="?background=daylight"],
[data-background-demo="cloudy"] .background-demo a[href="?background=cloudy"],
[data-background-demo="sunset"] .background-demo a[href="?background=sunset"],
[data-background-demo="rain"] .background-demo a[href="?background=rain"],
[data-background-demo="storm"] .background-demo a[href="?background=storm"] {
  color: #07131e;
  background: #fff;
}

[data-background-demo="cloudy"] .scene__clouds,
[data-background-demo="rain"] .scene__clouds,
[data-background-demo="storm"] .scene__clouds { filter: blur(0.7px) brightness(0.86) contrast(1.12); }

.app-shell {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 40px));
  min-height: 100svh;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 48px) 0 24px;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: clamp(18px, 3vw, 32px);
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }

.brand__mark {
  width: 12px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 45%, transparent);
  transition: background 1.6s ease;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }

h1 {
  margin-bottom: 0;
  font-size: clamp(1.45rem, 3.5vw, 2.3rem);
  line-height: 1;
  letter-spacing: -0.035em;
}

.conditions {
  width: min(460px, 52vw);
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(18px) saturate(1.1);
}

.conditions__primary { display: flex; align-items: center; gap: 12px; }
.weather-symbol { width: 32px; color: var(--accent); font-size: 1.6rem; text-align: center; }
.conditions__primary strong { display: block; font-size: 1rem; }
.conditions__primary span:last-child { display: block; margin-top: 2px; color: var(--muted); font-size: 0.78rem; }

.conditions__details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.conditions__details div { min-width: 0; }
.conditions dt { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em; }
.conditions dd { margin: 3px 0 0; font-size: 0.92rem; font-weight: 700; white-space: nowrap; }

.clock-panel {
  align-self: center;
  padding: clamp(36px, 8vw, 96px) 0;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.35);
}

#clock {
  display: block;
  margin-left: -0.06em;
  font-size: clamp(4rem, 14vw, 10.5rem);
  font-weight: 720;
  line-height: 0.88;
  letter-spacing: -0.08em;
  font-variant-numeric: tabular-nums;
}

#date { margin: 18px 0 0; color: rgba(255,255,255,0.86); font-size: clamp(1rem, 2vw, 1.25rem); }

.base-activity {
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(7, 15, 25, 0.7);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(20px) saturate(1.08);
}

.base-activity[hidden] { display: none; }
.base-activity__marker { background: var(--accent); box-shadow: 0 0 26px color-mix(in srgb, var(--accent) 52%, transparent); }
.base-activity[data-status="night-flying"] .base-activity__marker { background: #a9b7ff; }
.base-activity[data-status="weekend"] .base-activity__marker,
.base-activity[data-status="limited"] .base-activity__marker,
.base-activity[data-status="unknown"] .base-activity__marker { background: #aeb8c2; }
.base-activity__content { padding: clamp(18px, 3vw, 24px); }
.base-activity__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.base-activity h2 { margin: 0; font-size: clamp(1.2rem, 2.5vw, 1.7rem); letter-spacing: -0.025em; }
.base-activity__status { flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; color: rgba(255,255,255,0.88); background: rgba(255,255,255,0.08); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; }
.base-activity__summary { max-width: 920px; margin: 14px 0 0; color: rgba(255,255,255,0.88); font-size: 1rem; line-height: 1.55; }
.base-activity__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; color: var(--muted); font-size: 0.78rem; line-height: 1.45; }
.base-activity__meta span:first-child::before { content: "◷"; margin-right: 7px; color: var(--accent); }
.base-activity__meta a { color: inherit; text-underline-offset: 3px; }
.base-activity__meta a:hover { color: #fff; }

.flight-board {
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel-strong);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(22px) saturate(1.08);
}

.flight-board__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.flight-board h2 {
  margin-bottom: 8px;
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  letter-spacing: -0.035em;
}

.flight-board__updated {
  margin: 10px 0 22px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.flight-board__status {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  color: rgba(255,255,255,0.76);
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
}

.flight-board__status > span:first-child { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #e3a34f; box-shadow: 0 0 16px rgba(227,163,79,0.52); }
.flight-board__status[data-state="current"] > span:first-child { background: #74d69a; box-shadow: 0 0 16px rgba(116,214,154,0.52); }
.flight-board__status[data-state="stale"] > span:first-child { background: #e3a34f; box-shadow: 0 0 16px rgba(227,163,79,0.52); }
.flight-board__status[data-state="live"] > span:first-child { background: #ff756d; box-shadow: 0 0 18px rgba(255,117,109,0.65); animation: status-pulse 1.8s ease-in-out infinite; }
.flight-board__status[data-state="error"] > span:first-child { background: #ff9b72; box-shadow: 0 0 16px rgba(255,155,114,0.5); }

.flight-list { display: grid; gap: 14px; }

.feed-message {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 112px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  background: rgba(255,255,255,0.055);
}

.feed-message h3 { margin: 0 0 5px; font-size: 1rem; }
.feed-message p { margin: 0; color: var(--muted); line-height: 1.55; }
.feed-message__pulse,
.feed-message__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; }
.feed-message__pulse { background: rgba(255,255,255,0.14); animation: feed-pulse 1.5s ease-in-out infinite; }
.feed-message__icon { color: #06110b; background: #7de0a2; font-weight: 900; }
.feed-message--error .feed-message__icon { color: #1b0804; background: #ff9b72; }

.flight-card {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  background: rgba(4,11,19,0.44);
}

.flight-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.045);
}

.flight-card__time span { display: block; font-size: 1.12rem; font-weight: 780; font-variant-numeric: tabular-nums; }
.flight-card__time small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }
.flight-card__badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.status-badge,
.confidence-badge { padding: 6px 9px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.07em; }
.status-badge { color: #07131e; background: var(--accent); }
.confidence-badge { color: rgba(255,255,255,0.82); border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.07); }
.flight-card[data-status="live"] .status-badge { color: #1a0604; background: #ff756d; }
.flight-card[data-status="cancelled"] .status-badge { color: #fff; background: #9e4b4b; }
.flight-card[data-status="completed"] .status-badge { color: #fff; background: #5b6875; }

.flight-card__body { padding: clamp(18px, 3vw, 24px); }
.flight-card__activity { margin: 0 0 7px; color: var(--accent); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.flight-card h3 { margin: 0; font-size: clamp(1.25rem, 2.5vw, 1.75rem); letter-spacing: -0.025em; }
.flight-card__identity { margin: 5px 0 0; color: var(--muted); font-size: 0.84rem; }
.flight-card__summary { max-width: 850px; margin: 15px 0 0; font-size: 1rem; line-height: 1.6; }

.flight-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 0;
}

.flight-detail { min-width: 0; padding: 13px 14px; border-radius: 13px; background: rgba(255,255,255,0.055); }
.flight-detail dt { color: var(--muted); font-size: 0.7rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.flight-detail dd { margin: 5px 0 0; overflow-wrap: anywhere; font-size: 0.9rem; line-height: 1.5; }
.flight-card__caveat { margin: 16px 0 0; padding-left: 12px; border-left: 2px solid rgba(255,183,95,0.7); color: var(--muted); font-size: 0.84rem; line-height: 1.55; }
.flight-card__caveat strong { color: rgba(255,255,255,0.9); }
.flight-sources { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 17px; }
.flight-sources a { padding: 8px 11px; border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; color: rgba(255,255,255,0.86); font-size: 0.79rem; font-weight: 700; text-decoration: none; }
.flight-sources a:hover { border-color: rgba(255,255,255,0.34); background: rgba(255,255,255,0.07); }

.latest-post {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 20px;
  background: linear-gradient(120deg, rgba(8,17,28,0.82), rgba(15,31,47,0.66));
  box-shadow: 0 22px 58px rgba(0,0,0,0.22);
  backdrop-filter: blur(20px) saturate(1.08);
}

.latest-post[hidden] { display: none; }
.latest-post__icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; color: #07111c; background: var(--accent); box-shadow: 0 0 28px color-mix(in srgb, var(--accent) 38%, transparent); font-size: 0.9rem; }
.latest-post__copy { min-width: 0; }
.latest-post__copy .eyebrow { margin-bottom: 5px; }
.latest-post h2 { margin: 0; font-size: clamp(1.1rem, 2.2vw, 1.45rem); letter-spacing: -0.02em; }
.latest-post__copy > p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 0.82rem; }
.latest-post__link { padding: 10px 13px; border: 1px solid rgba(255,255,255,0.2); border-radius: 11px; color: rgba(255,255,255,0.9); font-size: 0.8rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.latest-post__link:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.08); }

footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: rgba(255,255,255,0.54);
  font-size: 0.76rem;
  line-height: 1.45;
}

footer p { margin-bottom: 0; }
footer a { color: inherit; text-underline-offset: 3px; white-space: nowrap; }
footer a:hover { color: #fff; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; }

@keyframes airfield-breathe { to { transform: scale(1.085) translate3d(-0.45%, -0.3%, 0); } }
@keyframes solar-pulse { to { transform: translate(-50%, -50%) scale(1.08); filter: blur(18px); } }
@keyframes star-shift { to { transform: translate3d(0.7%, 0.35%, 0); } }
@keyframes star-twinkle { 45% { filter: brightness(0.68); } 100% { filter: brightness(1.24); } }
@keyframes cloud-texture-drift { to { background-position: 1774px 8%; } }
@keyframes cloud-texture-drift-near { to { background-position: -1374px 34%; } }
@keyframes cloud-bank-drift { to { background-position: 1124px 70%; } }
@keyframes rain-fall { from { background-position: 0 -180px; } to { background-position: -40px 180px; } }
@keyframes mist-breathe { to { transform: translate3d(4%, -2%, 0) scale(1.08); } }
@keyframes lightning { 0%, 90%, 93%, 100% { opacity: 0; } 91%, 92% { opacity: 0.7; } }
@keyframes status-pulse { 50% { transform: scale(0.74); opacity: 0.58; } }
@keyframes feed-pulse { 50% { transform: scale(0.82); opacity: 0.42; } }

@media (max-width: 720px) {
  .app-shell { width: min(100% - 28px, 620px); padding-top: 18px; gap: 16px; }
  .topbar { display: grid; grid-template-columns: 1fr; }
  .conditions { width: 100%; }
  .clock-panel { padding: clamp(26px, 8vh, 56px) 0; }
  #clock { font-size: clamp(3.45rem, 20vw, 7rem); }
  .flight-board__header { display: grid; gap: 15px; }
  .flight-board__status { width: 100%; padding-top: 15px; border-top: 1px solid var(--line); }
  .flight-board__updated { margin-top: 8px; }
  .base-activity__heading { display: grid; gap: 12px; }
  .base-activity__status { justify-self: start; }
  .flight-details { grid-template-columns: 1fr; gap: 8px; }
  .latest-post { grid-template-columns: auto minmax(0, 1fr); }
  .latest-post__link { grid-column: 1 / -1; text-align: center; }
  footer { display: grid; gap: 6px; }
  .footer__links { justify-content: flex-start; }
}

@media (max-width: 420px) {
  .eyebrow { font-size: 0.69rem; }
  .conditions { padding: 13px 14px; border-radius: 16px; }
  .conditions__details { gap: 6px; }
  .conditions dd { font-size: 0.82rem; }
  .flight-board { padding: 20px; border-radius: 20px; }
  .flight-card__top { align-items: flex-start; padding: 14px; }
  .flight-card__badges { max-width: 52%; }
  .status-badge, .confidence-badge { font-size: 0.62rem; }
  .flight-card__body { padding: 17px 15px; }
  .feed-message { align-items: flex-start; padding: 17px 15px; }
  .background-demo { left: 7px; right: 7px; bottom: 7px; max-width: none; transform: none; }
  .background-demo span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}