/* Perdix pages: their own look on top of site.css (loaded only on Perdix pages, <html class="perdix">).
   Dark by default; the theme button switches to light. Colours come from the site.css variables, redefined here. */

/* Inter, served by the site (Google Fonts' variable latin file, preloaded by build.py). Until it arrives, the text is
   set in Arial scaled to Inter's metrics, so nothing moves when it swaps in. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2?v=1dc044f482") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica");
  size-adjust: 107.12%; ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%;
}

html.perdix {
  --bg: #0b0e13;
  --bg-alt: #10141b;
  --bg-raised: #161c26;
  --panel-bg: #121720;
  --line: #263041;
  --text: #e9edf3;
  --text-2: #c3cad6;
  --muted: #8b96a8;
  --focus: #4c8de0;
  --header-bg: rgba(11, 14, 19, .88);
  --hover-line: #3a475c;
  --ok: #8fe0a9;
  --err: #ffb4a8;
  --panel-shadow: none;
  --px-acc: #4c8de0;
  --px-fill: #2f6db0; /* filled buttons with white text: 5.4:1 */
  --px-cta: #f2a33a;
  --px-cta-hover: #ffb75a;
  --px-cta-ink: #1a1206;
  --px-glow: rgba(76, 141, 224, .22);
  --px-r: 6px; /* buttons, chips */
  --px-r1: var(--px-r); /* small boxes holding a picture: thumbnails, map tabs */
  --px-r2: calc(var(--px-r) * 2); /* panels and media */
  --px-head: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --px-body: var(--px-head);
  color-scheme: dark;
}
html.perdix[data-theme="light"] {
  --bg: #f3f5f8;
  --bg-alt: #e9edf3;
  --bg-raised: #ffffff;
  --panel-bg: #ffffff;
  --line: #dbe1ea;
  --text: #0f141b;
  --text-2: #2c3542;
  --muted: #586374;
  --focus: #2f6db0;
  --header-bg: rgba(243, 245, 248, .9);
  --hover-line: #b7c1cf;
  --ok: #1f7a45;
  --err: #b3261e;
  --panel-shadow: 0 1px 2px rgba(15, 20, 27, .05), 0 12px 32px rgba(15, 20, 27, .07);
  --px-acc: #2f6db0;
  --px-glow: rgba(47, 109, 176, .14);
  color-scheme: light;
}

html.perdix body { font-family: var(--px-body); font-size: 18px; }
html.perdix h1, html.perdix h2, html.perdix h3 { font-family: var(--px-head); font-weight: 700; letter-spacing: -.005em; }
html.perdix .site-header { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
html.perdix .subnav { background: var(--bg); }
html.perdix .subnav__title { font-family: var(--px-head); font-size: 22px; font-weight: 700; }

/* Buttons on Perdix pages */
html.perdix .btn { border-radius: var(--px-r); font-weight: 600; font-size: 16px; padding: 14px 24px; }
.px-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 26px; border: 0; border-radius: var(--px-r);
  font: 600 17px/1.1 var(--px-body); text-decoration: none; cursor: pointer;
  background: var(--px-cta); color: var(--px-cta-ink);
  transition: background .2s, box-shadow .2s, transform .2s;
}
.px-btn:hover { background: var(--px-cta-hover); }
.px-btn:active { transform: translateY(1px); }
.px-btn--ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--hover-line); }
.px-btn--ghost:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--text); }
.px-btn--quiet { background: transparent; color: var(--text); padding-left: 8px; padding-right: 8px; }
.px-btn--quiet:hover { background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.px-btn svg { width: 18px; height: 18px; flex: none; }

/* Live sign-up count */
.px-count { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 16px; }
.px-count strong { font: 700 24px/1 var(--px-head); color: var(--text); font-variant-numeric: tabular-nums; }
.px-live { width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; flex: none; animation: px-ping 2s infinite; }
@keyframes px-ping { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(61, 220, 132, 0); } }

/* Hero */
/* The hero is a game screen: dark in both themes. */
.px-hero {
  --bg: #0b0e13; --text: #e9edf3; --text-2: #c3cad6; --muted: #8b96a8; --hover-line: #3a475c;
  position: relative; min-height: calc(100svh - 137px); display: grid; align-items: end; overflow: hidden; background: #0b0e13; color: var(--text);
}
.px-hero > video, .px-hero__poster, .px-hero__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-hero > video { opacity: 0; transition: opacity 1s var(--ease); }
.px-hero.is-playing > video { opacity: 1; }
.px-hero__pause {
  position: absolute; z-index: 2; top: 16px; right: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: rgba(8, 10, 14, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: .75; transition: opacity .2s;
}
.px-hero__pause:hover, .px-hero__pause:focus-visible { opacity: 1; }
.px-hero__pause svg { width: 18px; height: 18px; }
.px-hero__i-play, .px-hero.is-paused .px-hero__i-pause { display: none; }
.px-hero.is-paused .px-hero__i-play { display: block; }
.px-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, #0b0e13 99%),
              linear-gradient(90deg, rgba(11, 14, 19, .72), transparent 68%);
}
.px-hero__text { width: 100%; position: relative; z-index: 1; padding-top: 120px; padding-bottom: 64px; }
.px-hero h1 { font-size: clamp(76px, 13vw, 184px); line-height: .88; margin-bottom: 18px; }
.px-hero__lead { max-width: 580px; font-size: clamp(19px, 2.1vw, 23px); line-height: 1.45; color: var(--text-2); margin-bottom: 30px; }
.px-hero__when { color: #8fb8ec; font-weight: 600; font-size: 17px; margin-bottom: 10px; max-width: 640px; }
.px-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }

/* What you fly: a row of clips, one large at a time, the neighbours showing at the edges */
.px-hl { padding-top: 64px; }
.px-hl__track {
  --side: calc((100vw - min(1040px, 80vw)) / 2);
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 var(--side); scroll-padding: 0 var(--side); -webkit-overflow-scrolling: touch;
}
.px-hl__track::-webkit-scrollbar { display: none; }
.px-hl__item { flex: 0 0 min(1040px, 80vw); margin: 0; scroll-snap-align: center; opacity: .4; transition: opacity .6s var(--ease); }
.px-hl__item.is-active { opacity: 1; }
.px-hl__media { position: relative; aspect-ratio: 16 / 9; border-radius: var(--px-r2); overflow: hidden; background: #0a0d12; }
.px-hl__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.px-hl__item figcaption { max-width: 700px; margin-top: 16px; color: var(--text-2); font-size: 18px; }
.px-hl__item figcaption strong { color: var(--text); font-weight: 600; }
.px-hl__item figcaption .link { white-space: nowrap; }
.px-hl__ctrl { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 22px; }
.px-hl__dots { display: flex; gap: 8px; }
.px-hl__dot { position: relative; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .4s var(--ease); }
.px-hl__dot::before, .px-hl__dot i { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 6px; border-radius: 3px; }
.px-hl__dot::before { background: var(--hover-line); }
.px-hl__dot i { background: var(--text); transform: scaleX(0); transform-origin: left; transition: transform .3s linear; }
.px-hl__dot[aria-pressed="true"] { width: 56px; }
.px-hl__play {
  width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: var(--bg-raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--line);
}
.px-hl__play svg { width: 16px; height: 16px; }
.px-hl__i-play, .px-hl__play.is-paused .px-hl__i-pause { display: none; }
.px-hl__play.is-paused .px-hl__i-play { display: block; }
@media (max-width: 700px) {
  .px-hl { padding-top: 48px; }
  .px-hl__track { --side: 16px; gap: 12px; }
  .px-hl__item { flex-basis: 80vw; }
  .px-hl__media { aspect-ratio: 3 / 4; }
  .px-hl__item figcaption { font-size: 16px; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .px-hl__item, .px-hl__dot, .px-hl__dot i { transition: none; } }

/* Full-frame moments: a clip edge to edge on black, one line of text over it */
.px-full { position: relative; margin-top: 112px; height: min(92svh, 56.25vw); min-height: 460px; overflow: hidden; background: #000; color: #f2f5f9; display: grid; align-items: end; }
.px-full > video, .px-full__poster, .px-full__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-full > video { opacity: 0; transition: opacity 1s var(--ease); }
.px-full.is-playing > video { opacity: 1; }
.px-full::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .78)); }
.px-full__text { position: relative; z-index: 1; width: 100%; padding-bottom: 56px; display: grid; gap: 12px; }
.px-full__text h2 { font-size: clamp(42px, 6vw, 72px); line-height: .98; color: #fff; }
.px-full__text p { max-width: 620px; color: #d5dbe4; font-size: 19px; }
@media (max-width: 700px) {
  .px-full { margin-top: 80px; height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .px-full__text { padding-bottom: 28px; }
  .px-full__text p { font-size: 16px; }
  .px-wide-only { display: none; }
}

/* From dawn to night: pinned while the scroll turns the day; a slider on phones */
.px-day { margin-top: 112px; }
.px-day.is-pinned { height: 180vh; }
.px-day__pin { position: relative; }
.px-day.is-pinned .px-day__pin { position: sticky; top: 137px; height: calc(100svh - 137px); overflow: hidden; }
.px-day__stack { position: relative; aspect-ratio: 16 / 9; background: #05070a; overflow: hidden; }
.px-day.is-pinned .px-day__stack { position: absolute; inset: 0; aspect-ratio: auto; }
.px-day__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-day__img + .px-day__img { opacity: 0; }
.px-day__text { display: grid; gap: 12px; padding-top: 24px; }
.px-day.is-pinned .px-day__text { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 48px; color: #f2f5f9; }
.px-day.is-pinned .px-day__pin::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .7)); pointer-events: none; }
.px-day.is-pinned .px-day__text { z-index: 1; }
.px-day__text h2 { font-size: clamp(42px, 6vw, 72px); line-height: .98; }
.px-day__text > p:not(.px-day__hour) { max-width: 640px; color: var(--muted); font-size: 19px; }
.px-day.is-pinned .px-day__text > p:not(.px-day__hour) { color: #d5dbe4; }
.px-day__hour { font: 600 22px/1.2 var(--px-head); color: var(--text); min-height: 1.2em; }
.px-day.is-pinned .px-day__hour { color: #fff; }
.px-day__slider input { width: min(100%, 420px); accent-color: var(--px-acc); }
.px-day.is-pinned .px-day__slider { display: none; }
@media (max-width: 900px) { .px-day { margin-top: 80px; } }

/* Figures strip */
.px-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.px-figs > div { padding: 30px 24px 30px 0; display: grid; gap: 6px; align-content: start; }
.px-figs > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.px-figs dd { margin: 0; order: -1; font: 700 clamp(46px, 6vw, 72px)/1 var(--px-head); color: var(--px-acc); font-variant-numeric: tabular-nums; }
.px-figs dt { color: var(--muted); font-size: 16px; line-height: 1.4; max-width: 230px; }

/* Sections */
.px-sec { padding-top: 112px; }
.px-sec__head { display: grid; gap: 14px; margin-bottom: 40px; max-width: 760px; }
.px-sec__head h2 { font-size: clamp(42px, 6vw, 72px); line-height: .98; }
.px-sec__head p { color: var(--muted); font-size: 19px; }
.px-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.px-split--rev > :first-child { order: 2; }
.px-split h2 { font-size: clamp(38px, 5vw, 60px); line-height: 1; margin-bottom: 18px; }
.px-split .prose { color: var(--text-2); }
.px-media { position: relative; border-radius: var(--px-r2); overflow: hidden; background: var(--bg-alt); aspect-ratio: 16 / 9; box-shadow: var(--panel-shadow); }
.px-media video, .px-media img { width: 100%; height: 100%; object-fit: cover; }
.px-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.px-pair img { border-radius: var(--px-r2); aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }

/* Teasers: hangar and maps */
.px-teasers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.px-teaser {
  position: relative; display: grid; align-content: end; min-height: 380px; padding: 30px;
  border-radius: var(--px-r2); overflow: hidden; text-decoration: none; color: #f2f5f9;
  background: #0b0e13; isolation: isolate;
}
.px-teaser img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.px-teaser::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(8, 10, 14, .9)); }
.px-teaser:hover img { transform: scale(1.04); }
.px-teaser h3 { font-size: clamp(34px, 4vw, 48px); line-height: 1; margin-bottom: 8px; }
.px-teaser p { color: #c9d1dc; max-width: 440px; margin-bottom: 18px; }
.px-teaser .px-btn--ghost { color: #f2f5f9; box-shadow: inset 0 0 0 1px rgba(242, 245, 249, .45); justify-self: start; }

/* Panels: vote and sign-up */
.px-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.px-duo:has(> .px-panel[hidden]) { grid-template-columns: minmax(0, 760px); }
.px-panel { border: 1px solid var(--line); border-radius: var(--px-r2); padding: 36px; background: var(--panel-bg); box-shadow: var(--panel-shadow); display: grid; align-content: start; gap: 16px; }
.px-panel h2 { font-size: clamp(32px, 3.6vw, 42px); line-height: 1.02; }
.px-panel > p { color: var(--muted); }
.px-big { font: 700 clamp(64px, 8vw, 96px)/.9 var(--px-head); color: var(--px-acc); font-variant-numeric: tabular-nums; }

.px-vote { display: grid; gap: 8px; margin-top: 6px; }
.px-opt {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%; padding: 15px 16px; border: 1px solid var(--line); border-radius: var(--px-r1);
  background: var(--bg-raised); color: var(--text); font: 500 17px/1.2 var(--px-body); text-align: left; cursor: pointer; overflow: hidden;
  transition: border-color .2s;
}
.px-opt:hover { border-color: var(--hover-line); }
.px-opt::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--px-glow); transition: width .9s var(--ease); }
.px-opt > * { position: relative; }
.px-opt b { font: 600 17px/1 var(--px-head); color: var(--muted); opacity: 0; transition: opacity .4s; font-variant-numeric: tabular-nums; }
.px-vote.is-done .px-opt { cursor: default; }
.px-vote.is-done .px-opt b { opacity: 1; }
.px-opt[aria-pressed="true"] { border-color: var(--px-acc); }
.px-opt[aria-pressed="true"] b { color: var(--px-acc); }
.px-vote__note { font-size: 15px; color: var(--muted); min-height: 1.4em; }

.px-signup { display: flex; flex-wrap: wrap; gap: 10px; }
.px-signup input[type="email"] {
  flex: 1 1 220px; min-width: 0; padding: 16px 18px; border-radius: var(--px-r);
  border: 1px solid var(--line); background: var(--bg); color: var(--text); font: 400 17px var(--px-body);
}
.px-signup input[type="email"]:focus { outline: none; border-color: var(--px-acc); }
.px-signup input[type="email"]:focus-visible { outline: 2px solid var(--px-acc); outline-offset: 2px; }
.px-signup .px-btn { flex: 0 0 auto; }
.px-small { font-size: 15px; color: var(--muted); }
.px-status { padding: 14px 16px; border-radius: var(--px-r); background: var(--bg-raised); font-size: 16px; }
.px-status--ok { color: var(--ok); }
.px-status--err { color: var(--err); }
.px-share { justify-self: start; }

/* Practical details: a plain list of facts */
.px-facts { max-width: none; }
.px-facts h2 { font-size: clamp(34px, 4vw, 48px); line-height: 1; margin-bottom: 22px; }
.px-facts dl { margin: 0; columns: 2; column-gap: 56px; }
.px-facts dl > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 6px 24px; padding: 14px 0; border-top: 1px solid var(--line); break-inside: avoid; }
.px-facts dt { color: var(--muted); }
.px-facts dd { margin: 0; color: var(--text); }
@media (max-width: 900px) { .px-facts dl { columns: 1; } }
@media (max-width: 720px) { .px-facts dl > div { grid-template-columns: 96px minmax(0, 1fr); gap: 2px 14px; padding: 11px 0; font-size: 16px; } }

/* Origin and AI transparency */
.px-note { max-width: 860px; display: grid; gap: 18px; color: var(--text-2); }
.px-note h2 { font-size: clamp(34px, 4vw, 48px); color: var(--text); }

/* Trailer */
.px-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(5, 7, 10, .9); }
.px-modal video { width: min(1280px, 100%); max-height: 86vh; border-radius: var(--px-r1); background: #000; }
.px-modal__close { position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; display: grid; place-items: center; }
.px-modal__close svg { width: 22px; height: 22px; }

/* Page head (hangar, maps) */
.px-head { padding-top: 40px; padding-bottom: 28px; display: grid; gap: 14px; }
.px-head h1 { font-size: clamp(48px, 5.4vw, 76px); line-height: .95; }
.px-head p { max-width: 1000px; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.5; color: var(--text-2); }

/* Hangar */
html.perdix .chip { border-radius: var(--px-r); font-family: var(--px-body); }
html.perdix .chip[aria-pressed="true"] { background: var(--px-fill); border-color: var(--px-fill); color: #fff; }
.hg { display: flex; flex-direction: column; }
.hg__head { padding-left: 0; padding-right: 0; padding-bottom: 12px; }
.hg__lead { max-width: 1000px; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.5; color: var(--text-2); margin-bottom: 22px; }
.hg .chips { margin-bottom: 20px; }
.hg__main {
  display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(300px, 1fr); grid-template-areas: "stage sheet" "thumbs thumbs"; scroll-margin-top: 64px;
  border: 1px solid var(--line); border-radius: var(--px-r2); overflow: hidden; background: var(--panel-bg); box-shadow: var(--panel-shadow);
}
.hg__stage {
  grid-area: stage; position: relative; min-height: max(480px, 60vh); overflow: hidden; touch-action: pan-y;
  /* A studio: a soft spot on the model and a floor that fades into the back wall, no horizon. */
  background: radial-gradient(ellipse 60% 45% at 50% 52%, var(--px-glow), transparent 70%),
              linear-gradient(180deg, var(--bg-alt) 0%, var(--bg-alt) 55%, color-mix(in srgb, var(--bg-alt) 70%, var(--text) 6%) 100%);
}
/* One finger turns the model sideways, an upward or downward swipe still scrolls the page, two fingers zoom. */
.hg__stage.is-3d, .hg__stage.is-3d canvas { touch-action: pan-y; }
html.perdix .relief__canvas { touch-action: pan-y; }
.hg__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hg__view, .hg__view canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.hg__view canvas { cursor: grab; }
.hg__view canvas:active { cursor: grabbing; }
.hg__load {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 16px; border-radius: var(--px-r);
  background: color-mix(in srgb, var(--bg) 80%, transparent); color: var(--muted); font-size: 15px;
}
.hg__seg { position: absolute; top: 14px; right: 14px; z-index: 2; }
html.perdix .seg { border-radius: var(--px-r); background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
html.perdix .seg__btn { border-radius: calc(var(--px-r) - 2px); color: var(--text); }
html.perdix .seg__btn[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.hg__nav {
  position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--text); cursor: pointer; display: grid; place-items: center; opacity: .8; transition: opacity .2s;
}
.hg__nav:hover { opacity: 1; }
.hg__nav svg { width: 20px; height: 20px; }
.hg__nav--prev { left: 12px; }
.hg__nav--next { right: 12px; }
.hg__parts { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.hg__part {
  padding: 10px 15px; border-radius: var(--px-r); cursor: pointer; font: 500 15px/1 var(--px-body); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
  background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .2s, border-color .2s, color .2s;
}
.hg__part:hover { border-color: var(--px-acc); }
.hg__part[aria-pressed="true"] { background: var(--px-fill); border-color: var(--px-fill); color: #fff; }
.hg__part.is-flash { animation: hg-flash 1.8s var(--ease); }
@keyframes hg-flash { 0%, 70% { border-color: var(--px-acc); box-shadow: 0 0 0 3px var(--px-glow); } 100% { box-shadow: none; } }
.hg__sticks { position: absolute; z-index: 2; right: 14px; bottom: 14px; }
.hg__parts { right: 120px; }
.hg__stage.is-sticks .hg__parts { display: none; }
.hg__stage.is-sticks .hg__pads { bottom: 64px; }
.hg__pads { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 66px; display: flex; justify-content: space-between; pointer-events: none; }
.hg__pad {
  pointer-events: auto; position: relative; width: 104px; height: 104px; border-radius: 50%; touch-action: none; cursor: grab;
  border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
  background: color-mix(in srgb, var(--bg) 60%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hg__pad span { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.hg__pad[data-pad="left"] span { transform: translate(0, 34px); }
.hg__radio { position: absolute; z-index: 2; left: 14px; top: 14px; padding: 7px 12px; border-radius: var(--px-r1); font-size: 14px; color: var(--text); background: color-mix(in srgb, var(--bg) 70%, transparent); }
.hg__none { font-size: 15px; color: var(--muted); padding: 8px 12px; border-radius: var(--px-r1); background: color-mix(in srgb, var(--bg) 70%, transparent); }

.hg__sheet { grid-area: sheet; padding: 30px 30px 26px; display: grid; align-content: start; gap: 14px; border-left: 1px solid var(--line); }
.hg__kind { color: var(--px-acc); font-weight: 600; font-size: 16px; }
.hg__name { font-size: clamp(34px, 3.4vw, 46px); line-height: 1; }
.hg__role { color: var(--text); font-size: 17px; font-weight: 500; margin-top: -6px; }
.hg__desc { color: var(--text-2); font-size: 17px; }
.hg__specs { margin: 6px 0 0; display: grid; gap: 16px; }
.hg__spec { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; font-size: 15px; }
.hg__spec dt { color: var(--muted); }
.hg__spec dd { margin: 0; font: 600 18px/1 var(--px-head); font-variant-numeric: tabular-nums; }
.hg__spec i { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--line); position: relative; overflow: hidden; }
.hg__spec i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v, 0%); background: var(--px-acc); border-radius: 4px; transition: width 1s var(--ease); }
.hg__power { display: grid; gap: 4px; font-size: 15px; padding-top: 4px; border-top: 1px solid var(--line); padding-top: 14px; }
.hg__power dt { color: var(--muted); }
.hg__power dd { margin: 0; color: var(--text); font-size: 16px; }
.hg__hint { font-size: 14px; color: var(--muted); }
.hg__listen { justify-self: start; padding: 11px 16px; font-size: 15px; }
.hg__listen[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--px-acc); color: var(--text); }
.hg__where, .tr__fly { font-size: 15px; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.hg__where > span, .tr__fly > span { color: var(--muted); flex-basis: 100%; }
.px-panel--end { max-width: 760px; }
.px-panel--end .px-actions { gap: 10px 24px; }

.hg__thumbs {
  grid-area: thumbs; list-style: none; margin: 0; padding: 14px 14px 12px; border-top: 1px solid var(--line); display: flex; gap: 10px; overflow-x: auto;
  scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.hg__thumbs li { flex: 0 0 150px; scroll-snap-align: start; }
.hg__thumb {
  width: 100%; padding: 0; border: 1px solid var(--line); border-radius: var(--px-r1); overflow: hidden; cursor: pointer;
  background: var(--panel-bg); color: var(--text); text-align: left; font: 500 14px/1.25 var(--px-body); transition: border-color .2s;
}
.hg__thumb img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
.hg__thumb span { display: block; padding: 8px 10px 10px; }
.hg__thumb:hover { border-color: var(--hover-line); }
.hg__thumb[aria-pressed="true"] { border-color: var(--px-acc); box-shadow: 0 0 0 1px var(--px-acc); }

html.perdix .bar[aria-pressed="true"] .bar__fill { background: var(--px-acc); }

@media (max-width: 900px) {
  .hg__main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "thumbs" "sheet"; }
  .hg__stage { min-height: 300px; height: min(52svh, 520px); }
  .hg__thumbs { border-top: 0; border-bottom: 1px solid var(--line); padding: 10px; }
  .hg .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 14px; padding: 0 16px; }
  .hg .chips::-webkit-scrollbar { display: none; }
  .hg .chip { flex: none; }
  .hg__lead { order: 5; margin: 28px 0 0; font-size: 17px; }
  .hg__head { padding-top: 32px; padding-bottom: 12px; }
  .hg__head h1 { font-size: 52px; }
  .hg__sheet { border-left: 0; border-top: 1px solid var(--line); padding: 22px 20px; }
  .hg__thumbs li { flex-basis: 128px; }
  .hg__nav { top: auto; bottom: auto; margin-top: 0; top: 14px; width: 40px; height: 40px; }
  .hg__nav--prev { left: 14px; }
  .hg__nav--next { left: 60px; right: auto; }
  .px-head { padding-top: 32px; padding-bottom: 24px; }
  .px-head h1 { font-size: 52px; }
  .px-head p { font-size: 17px; }
}

/* Maps */
.tr .tabs { margin-bottom: 20px; }
html.perdix .tab { border-radius: var(--px-r1); overflow: hidden; background: var(--panel-bg); }
html.perdix .tab[aria-pressed="true"] { border-color: var(--px-acc); box-shadow: 0 0 0 1px var(--px-acc); }
.tr__main {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); scroll-margin-top: 64px;
  border: 1px solid var(--line); border-radius: var(--px-r2); overflow: hidden; background: var(--panel-bg); box-shadow: var(--panel-shadow);
}
.tr__stage { position: relative; aspect-ratio: 4 / 3.3; background: #0a0d12; overflow: hidden; }
@media (min-width: 901px) {
  /* The sheet beside it is taller than the picture: the picture stays in view while it scrolls (overflow: clip on
     the panel, unlike hidden, keeps the sticky working). */
  .tr__main { align-items: start; overflow: clip; }
  .tr__stage { position: sticky; top: 64px; }
}
.tr__sky { position: absolute; inset: 0; display: grid; grid-template: 100% / 100%; }
.tr__sky-img, .tr__pins { grid-area: 1 / 1; height: 100%; aspect-ratio: 1; width: auto; max-width: 100%; justify-self: center; }
.tr__sky-img { object-fit: cover; transition: opacity .25s; }
.tr__sky-img.is-swapping { opacity: .4; }
.tr__pins { position: relative; }
.tr__pin {
  position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; padding: 0; border: 2px solid #fff; border-radius: 50%;
  background: var(--px-acc); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
  transition: transform .2s var(--ease), background .2s;
}
.tr__pin::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--px-acc); animation: tr-ring 2.4s infinite; pointer-events: none; }
@keyframes tr-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
.tr__pin svg { width: 17px; height: 17px; fill: currentColor; }
.tr__pin::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; } /* a 44 px target on phones */
.tr__pin--start { background: var(--px-cta); color: var(--px-cta-ink); }
.tr__pin--start::before { border-color: var(--px-cta); }
.tr__pin:hover { transform: scale(1.1); }
.tr__pin[aria-pressed="true"] { background: #fff; color: #0b0e13; transform: scale(1.12); }
.tr__pin[aria-pressed="true"]::before { border-color: #fff; }
.tr__pin-label {
  display: none; z-index: 1;
  position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  padding: 3px 8px; border-radius: 4px; background: rgba(8, 10, 14, .78); color: #fff; font: 500 13px/1.3 var(--px-body);
}
.tr__pin:hover .tr__pin-label, .tr__pin[aria-pressed="true"] .tr__pin-label, .tr__pin:focus-visible .tr__pin-label { display: block; }
.tr__pin[aria-pressed="true"] { z-index: 2; }
.tr__photos { position: absolute; inset: 0; }
.tr__flight { position: absolute; inset: 0; background: #0a0d12; }
.tr__flight video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr__info--head { padding-bottom: 6px; }
.tr__info--head + .tr__point { border-top: 1px solid var(--line); }
.tr__photos .mapview__img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.tr__stage .relief { position: absolute; inset: 0; aspect-ratio: auto; background: var(--bg-alt); }
.tr__seg { position: absolute; top: 14px; right: 14px; left: auto; z-index: 3; }
.tr__seg .seg__btn { white-space: nowrap; }
.tr__tools { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; padding: 10px 14px; border-radius: var(--px-r1); background: color-mix(in srgb, var(--bg) 75%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
html.perdix .relief__exag input { accent-color: var(--px-acc); }
.tr__tools .relief__exag { font-size: 14px; }
.tr__tools .relief__exag span { white-space: nowrap; }

.tr__side { display: grid; align-content: start; border-left: 1px solid var(--line); }
.tr__point { border-bottom: 1px solid var(--line); }
.tr__point-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: opacity .25s; }
.tr__point-img.is-swapping { opacity: .4; }
.tr__point-text { padding: 18px 24px 22px; display: grid; gap: 8px; }
.tr__point-name { font-size: 30px; line-height: 1.05; }
.tr__point-desc { color: var(--text-2); font-size: 16px; }
.tr__pano { justify-self: start; margin-top: 6px; padding: 12px 18px; font-size: 15px; }
.tr__plist { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.tr__info { padding: 22px 24px 26px; display: grid; gap: 12px; }
.tr__info .mapview__name { font-size: clamp(32px, 3vw, 42px); line-height: 1; }
.tr__info .mapview__desc { color: var(--text-2); font-size: 16px; }
.tr__facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tr__facts div { display: grid; gap: 2px; }
.tr__facts dt { color: var(--muted); font-size: 14px; }
.tr__facts dd { margin: 0; font-size: 15px; }
.tr__hint { font-size: 14px; color: var(--muted); }
.tr__note { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; margin: 0; padding: 10px 14px; border-radius: var(--px-r1); background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--text); font-size: 15px; }
html.perdix .features dd span { border-radius: var(--px-r1); }
html.perdix .area[aria-pressed="true"] { border-color: var(--px-acc); color: var(--text); }
/* At the same scale: the drawing, and beside it (under it on phones) the list of every map with its size. */
.areas-wrap { display: grid; grid-template-columns: minmax(0, 720px) minmax(220px, 420px); gap: 32px clamp(32px, 5vw, 80px); align-items: end; }
.areas-wrap .areas { margin-top: 30px; }
.area--small span { display: none; }
.area--top span { position: absolute; right: -1px; bottom: 100%; padding: 0 0 6px; }
.areas__legend { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.areas__legend li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--text-2); }
.areas__legend small { color: var(--muted); font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .areas-wrap { grid-template-columns: minmax(0, 1fr); } }

.tr__panobox { padding: 0; background: #000; }
.tr__panocanvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.tr__panocanvas:active { cursor: grabbing; }
.tr__panocap { position: absolute; left: 16px; bottom: 16px; right: 80px; color: #fff; font-size: 15px; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); pointer-events: none; }
.tr__panocap strong { font: 700 22px/1.1 var(--px-head); display: block; }

@media (max-width: 900px) {
  .tr__main { grid-template-columns: minmax(0, 1fr); }
  .tr__stage { aspect-ratio: 1; }
  .tr__side { border-left: 0; border-top: 1px solid var(--line); }
  html.perdix .tabs { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; }
  html.perdix .tabs li { flex: 0 0 132px; scroll-snap-align: start; }
  .tr__seg { left: 10px; right: 10px; top: 10px; justify-content: space-between; }
  .tr__seg .seg__btn { flex: 1; padding: 0 8px; font-size: 13px; }
  .tr__tools { left: 10px; right: 10px; bottom: 10px; padding: 4px 12px; }
  .tr__tools .relief__exag { font-size: 13px; gap: 10px; }
  .tr__pin { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
  .tr__pin svg { width: 14px; height: 14px; }
}

/* RC planes: four views */
.px-views { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--px-r2); overflow: hidden; background: var(--panel-bg); box-shadow: var(--panel-shadow); }
.px-views__media { position: relative; aspect-ratio: 16 / 9; background: #0a0d12; }
.px-views__pane { position: absolute; inset: 0; }
.px-views__pane img, .px-views__pane video { width: 100%; height: 100%; object-fit: cover; }
.px-views__look {
  position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--px-r);
  background: rgba(8, 10, 14, .72); color: #fff; font: 600 14px/1 var(--px-body); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.px-views__look svg { width: 18px; height: 18px; animation: px-look 3.2s var(--ease) infinite; }
@keyframes px-look { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-3px); } 65% { transform: translateX(3px); } }
.px-views__side { padding: 28px; display: grid; align-content: start; gap: 18px; border-left: 1px solid var(--line); }
.px-views__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.px-views__tab {
  padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--px-r); background: var(--bg-raised); color: var(--text);
  font: 600 16px/1.1 var(--px-body); cursor: pointer; text-align: left; transition: border-color .2s, background .2s, color .2s;
}
.px-views__tab:hover { border-color: var(--hover-line); }
.px-views__tab[aria-pressed="true"] { background: var(--px-fill); border-color: var(--px-fill); color: #fff; }
.px-views__text { color: var(--text-2); font-size: 17px; }
.px-views__free { display: flex; gap: 10px; align-items: flex-start; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.px-views__free svg { width: 20px; height: 20px; flex: none; color: var(--px-acc); margin-top: 1px; }
@media (max-width: 900px) {
  .px-views { grid-template-columns: minmax(0, 1fr); }
  .px-views__side { border-left: 0; border-top: 1px solid var(--line); padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { .px-views__look svg { animation: none; } }

/* With your transmitter */
.px-split--radio { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 64px; }
.px-split--radio > .px-media--photo { order: 2; }
.px-media--photo { aspect-ratio: 4 / 5; max-width: 380px; justify-self: end; }
.px-media--photo img { object-position: 48% 40%; }
@media (max-width: 900px) {
  .px-split--radio { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .px-split--radio > .px-media--photo { order: 0; aspect-ratio: 16 / 9; max-width: none; justify-self: stretch; }
  .px-media--photo img { object-position: 48% 30%; }
}
.px-radio { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 14px; }
.px-radio li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 14px; align-items: start; }
.px-radio__dot { width: 10px; height: 10px; margin-top: 9px; border-radius: 50%; background: var(--px-acc); }
.px-radio strong { color: var(--text); }

/* Footer: Perdix's accounts */
.px-social { display: flex; gap: 20px; margin: 0; }
.px-social a { color: var(--muted); text-decoration: none; }
.px-social a:hover { color: var(--text); }

.px-end { padding-bottom: 120px; }

@media (max-width: 900px) {
  .px-split, .px-teasers, .px-duo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .px-split--rev > :first-child { order: 0; }
  .px-teaser { min-height: 360px; padding: 24px; }
  .px-sec { padding-top: 80px; }
}
@media (max-width: 720px) {
  html.perdix .wrap { padding-left: 16px; padding-right: 16px; }
  .px-hero { min-height: calc(100svh - 130px); }
  .px-hero__text { padding-bottom: 28px; }
  .px-hero__when { font-size: 15px; }
  .px-actions .px-btn { flex: 1 1 100%; }
  .px-figs > div { padding: 22px 12px 22px 0; }
  .px-figs > div + div { padding-left: 12px; }
  .px-panel { padding: 24px 20px; }
  .px-signup .px-btn { flex: 1 1 100%; }
}
/* Portrait phones: the vertical clip, the name at the top and the buttons at the bottom, the aircraft between them. */
@media (max-aspect-ratio: 4/5) and (max-width: 720px) {
  .px-hero { align-items: stretch; }
  .px-hero__text { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding-top: 22px; }
  .px-hero h1 { margin-bottom: 0; }
  .px-hero__lead { font-size: 18px; margin-bottom: 18px; }
  .px-hero__pause { top: 50%; }
  .px-hero::after {
    background: linear-gradient(180deg, rgba(11, 14, 19, .78), transparent 34%, transparent 52%, rgba(11, 14, 19, .92) 80%, #0b0e13);
  }
}
@media (prefers-reduced-motion: reduce) {
  .px-live { animation: none; }
  .px-teaser img, .px-opt::before { transition: none; }
}