/* The crew explainer: a sticky 3D stage (the outpost renderer, chrome hidden) with prose cards scrolling past it,
   callout boards pinned to parts of the robot by leader lines, and a section rail. Dark, like a game intro. */
:root {
  --xp-bg: #06090e;
  --xp-card: rgba(9, 13, 19, 0.8);
  --xp-card-edge: rgba(255, 255, 255, 0.09);
  --xp-text: #e8eef3;
  --xp-soft: #a9b6c2;
  --xp-accent: #7fe3ff;
  --xp-warm: #ffb46b;
  --xp-font: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
}
html { scroll-behavior: smooth; }
body.xp { margin: 0; background: var(--xp-bg); color: var(--xp-text); font: 16.5px/1.62 var(--xp-font); }

#xp-stage { position: fixed; inset: 0; z-index: 0; background: #0a0f16; }
#xp-host { position: absolute; inset: 0; height: 100%; min-height: 0; border: 0; border-radius: 0; pointer-events: none; }
#xp-host .crew-hud { display: none !important; }
/* the replay section shows the lens's own clock bar and event timeline (to look at: the stage takes no clicks); the rest of its HUD stays hidden */
body.xp-show-tl #xp-host .crew-hud { display: block !important; }
body.xp-show-tl #xp-host .crew-top, body.xp-show-tl #xp-host .crew-status, body.xp-show-tl #xp-host .crew-legend, body.xp-show-tl #xp-host .crew-tip,
body.xp-show-tl #xp-host .crew-doss, body.xp-show-tl #xp-host .crew-settings { display: none !important; }
/* the demo's own timeline is nearly empty (a scripted day); the replay section shows a fuller one from a longer record in its place, above the live clock bar */
body.xp-show-tl #xp-host .crew-tl { display: none !important; }
#xp-tlfig { position: fixed; left: 50%; bottom: 60px; transform: translateX(-50%); width: min(1160px, 94vw); z-index: 1; opacity: 0; transition: opacity 0.5s; pointer-events: none; }
#xp-tlfig img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); }
#xp-tlfig span { display: block; margin-top: 6px; font-size: 12px; color: var(--xp-soft); text-align: center; }
body.xp-show-tl #xp-tlfig { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #xp-tlfig { transition: none; } }
.xp-live-warp { font-size: 14px; color: var(--xp-accent); font-variant-numeric: tabular-nums; }
/* the stage stays hidden until the robot models are in (the lens builds its scene with stand-in figures while they load); the loader shows the lens's progress */
#xp-host .crew-loading { display: none; }
#xp-stage { opacity: 0; transition: opacity 0.9s; }
body.xp-ready #xp-stage { opacity: 1; }
#xp-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(6, 9, 14, 0.62) 0%, rgba(6, 9, 14, 0.18) 38%, rgba(6, 9, 14, 0) 60%); }

/* the opening: the record a crew leaves behind, as glass slabs of log lines drifting in 3D over a veiled stage (the outpost waits behind the veil
   until it is introduced, then the slabs fly past and the veil lifts). Plain DOM with CSS 3D: crisp text, nothing added to the renderer. */
#xp-logs { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; perspective: 900px; perspective-origin: 50% 46%; visibility: hidden; }
body.xp-logs-vis #xp-logs { visibility: visible; }
.xp-logs-veil { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s;
  background: radial-gradient(110% 85% at 64% 46%, rgba(9, 24, 32, 0.9) 0%, rgba(6, 9, 14, 0.97) 72%); }
body.xp-logs-on .xp-logs-veil { opacity: 1; }
.xp-logs-space { position: absolute; left: 50%; top: 46%; width: 0; height: 0; transform-style: preserve-3d; }
.xp-slab { position: absolute; left: -170px; top: -106px; width: 340px; height: 212px; transform-style: preserve-3d; will-change: transform; }
.xp-slab-face, .xp-slab-back { position: absolute; inset: 0; box-sizing: border-box; border-radius: 10px; opacity: 0; }
.xp-slab-back { transform: translateZ(-9px); background: rgba(3, 7, 11, 0.72); border: 1px solid rgba(127, 227, 255, 0.12); }
.xp-slab-face { overflow: hidden; padding: 9px 12px 0; background: rgba(10, 19, 27, 0.68); border: 1px solid rgba(127, 227, 255, 0.22);
  font: 10.5px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: rgba(150, 188, 202, 0.85); }
.xp-slab-face header { display: flex; justify-content: space-between; gap: 12px; font: 600 9.5px/1 var(--xp-font); letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(127, 227, 255, 0.75); padding-bottom: 7px; margin-bottom: 6px; border-bottom: 1px solid rgba(127, 227, 255, 0.14); }
.xp-slab-face pre { margin: 0; font: inherit; white-space: pre; }
.xp-slab.is-scroll pre { animation: xp-logscroll var(--dur, 70s) linear infinite; }
@keyframes xp-logscroll { to { transform: translateY(-50%); } }
.xp-slab .k { color: rgba(92, 132, 148, 0.95); }
.xp-slab .v { color: rgba(190, 220, 232, 0.95); }
.xp-slab.is-schema { left: -195px; top: -122px; width: 390px; height: 244px; }
.xp-slab.is-schema .xp-slab-face { background: rgba(9, 22, 31, 0.88); border-color: rgba(127, 227, 255, 0.66); box-shadow: 0 0 28px rgba(127, 227, 255, 0.18); color: rgba(210, 236, 244, 0.96); font-size: 11px; }
.xp-slab.is-schema .xp-slab-back { border-color: rgba(127, 227, 255, 0.3); }
.xp-slab.is-schema .c { color: #7fe3ff; }

/* the reels: the outpost trailer after the log opening and the space reel at the end, each over the stage while its step is on, muted until the reader turns the sound on */
.xp-reel { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; visibility: hidden; background: #04070c; transition: opacity 0.8s, visibility 0s 0.8s; }
.xp-reel.is-on { opacity: 1; visibility: visible; transition: opacity 0.8s; }
.xp-reel video { display: block; width: 100%; height: 100%; object-fit: cover; }
.xp-reel::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(6, 9, 14, 0.55) 0%, rgba(6, 9, 14, 0.12) 36%, rgba(6, 9, 14, 0) 55%); }
.xp-reel.has-controls { pointer-events: auto; }
#xp-sound { position: fixed; right: 52px; bottom: 28px; z-index: 5; font: 600 12.5px/1 var(--xp-font); color: var(--xp-text); background: rgba(8, 12, 18, 0.72);
  border: 1px solid rgba(127, 227, 255, 0.45); border-radius: 999px; padding: 9px 14px; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.4s; }
body.xp-reel-on #xp-sound { opacity: 1; visibility: visible; }
#xp-sound[aria-pressed="true"] { background: rgba(127, 227, 255, 0.2); }
#xp-sound:focus-visible { outline: 2px solid var(--xp-accent); outline-offset: 2px; }
.xp-step a { color: var(--xp-accent); }

/* the call to action at the end (Richard, 2026-09-24): a card with a glowing edge, an email box and a warm button */
.xp-step.xp-cta-card { border: 1px solid transparent;
  background: linear-gradient(rgba(9, 13, 19, 0.86), rgba(9, 13, 19, 0.86)) padding-box, linear-gradient(120deg, rgba(127, 227, 255, 0.95), rgba(255, 180, 107, 0.95)) border-box;
  box-shadow: 0 0 44px rgba(127, 227, 255, 0.18), 0 0 90px rgba(255, 180, 107, 0.12); }
.xp-cta-card h2 { font-size: 31px; background: linear-gradient(90deg, #ffffff, #bff3ff 45%, #ffd3a3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xp-cta { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 10px; }
.xp-cta input { flex: 1 1 190px; min-width: 0; box-sizing: border-box; font: 500 15px/1.2 var(--xp-font); color: var(--xp-text); background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(127, 227, 255, 0.45); border-radius: 999px; padding: 12px 16px; outline: none; }
.xp-cta input::placeholder { color: rgba(169, 182, 194, 0.7); }
.xp-cta input:focus { border-color: var(--xp-accent); box-shadow: 0 0 0 3px rgba(127, 227, 255, 0.25); }
.xp-cta button { font: 700 15px/1 var(--xp-font); color: #1c0f03; background: linear-gradient(135deg, #ffd690, #ff9a3c); border: 0; border-radius: 999px;
  padding: 12px 22px; cursor: pointer; box-shadow: 0 6px 22px rgba(255, 154, 60, 0.45); animation: xp-cta-pulse 2.4s ease-in-out infinite; }
.xp-cta button:hover { filter: brightness(1.08); }
.xp-cta button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes xp-cta-pulse { 0%, 100% { box-shadow: 0 6px 22px rgba(255, 154, 60, 0.45); } 50% { box-shadow: 0 6px 36px rgba(255, 154, 60, 0.8); } }
.xp-cta-note { font-size: 13.5px; color: var(--xp-soft); }
.xp-cta-note a { color: var(--xp-accent); }
.xp-cta-card.is-done .xp-cta { display: none; }
.xp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#xp-loading { position: fixed; left: 50%; bottom: 8vh; transform: translateX(-50%); z-index: 6; color: var(--xp-soft);
  font-size: 14px; letter-spacing: 0.04em; transition: opacity 0.6s; }
body.xp-ready #xp-loading { opacity: 0; pointer-events: none; }
/* while the log slabs are up they are the page (the robots load behind them): the loader shows only if the reader reaches the outpost first */
body.xp-logs-on #xp-loading { opacity: 0; }
#xp-loading { text-align: center; }
.xp-load-bar { display: block; width: 180px; height: 3px; margin: 10px auto 0; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.xp-load-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #2e9bff, #7fe3ff); box-shadow: 0 0 8px rgba(127, 227, 255, 0.8); transition: width 0.3s; }
@media (prefers-reduced-motion: reduce) { #xp-stage, .xp-load-bar i { transition: none; } }

.xp-story { position: relative; z-index: 2; width: min(460px, calc(100vw - 32px)); margin-left: clamp(16px, 5vw, 76px); padding: 18vh 0 30vh; }
.xp-step { box-sizing: border-box; padding: 26px 26px 24px; margin: 0 0 8vh; background: var(--xp-card); border: 1px solid var(--xp-card-edge);
  border-radius: 16px; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); opacity: 0.42; transform: translateY(8px);
  transition: opacity 0.45s, transform 0.45s; }
.xp-step + .xp-step { margin-top: 48vh; }
.xp-sec + .xp-sec .xp-step:first-child { margin-top: 48vh; }
.xp-step.is-on { opacity: 1; transform: none; }
.xp-hero-card { margin-top: 8vh; }
.xp-step h1 { font-size: clamp(34px, 5vw, 50px); line-height: 1.05; margin: 0 0 14px; letter-spacing: -0.01em; }
.xp-step h2 { font-size: 28px; line-height: 1.15; margin: 0 0 12px; }
.xp-step h3 { font-size: 20px; line-height: 1.25; margin: 0 0 10px; color: #fff; }
.xp-step p { margin: 0 0 12px; }
.xp-step p:last-child { margin-bottom: 0; }
.xp-kicker { text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; color: var(--xp-accent); margin: 0 0 8px !important; }
.xp-lead { font-size: 19px; color: #f3f7fa; }
.xp-hint, .xp-try { color: var(--xp-soft); font-size: 14.5px; }
.xp-try::before { content: "▸ "; color: var(--xp-warm); }
.xp-note { color: var(--xp-soft); font-size: 13.5px; border-top: 1px solid var(--xp-card-edge); padding-top: 12px; margin-top: 16px !important; }

.xp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.xp-chips button { font: 600 12px/1 var(--xp-font); color: var(--xp-text); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px; padding: 7px 11px; cursor: pointer; }
.xp-chips button.is-on { background: rgba(127, 227, 255, 0.22); border-color: rgba(127, 227, 255, 0.6); }

/* callout boards and their leader lines */
#xp-leaders { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
#xp-leaders line { stroke: rgba(210, 244, 255, 0.78); stroke-width: 1.4; }
#xp-leaders circle.dot { fill: #fff; }
#xp-leaders circle.ring { fill: none; stroke: rgba(127, 227, 255, 0.85); stroke-width: 1.4; }
#xp-callouts { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.xp-call { position: absolute; width: 262px; box-sizing: border-box; padding: 12px 14px 13px; background: rgba(8, 12, 18, 0.88); border: 1px solid rgba(127, 227, 255, 0.42);
  border-radius: 12px; color: var(--xp-text); font-size: 13.5px; line-height: 1.45; pointer-events: auto; opacity: 0; transform: translateY(6px) scale(0.98);
  transition: opacity 0.35s, transform 0.35s; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); }
.xp-call.is-on { opacity: 1; transform: none; }
.xp-call h4 { margin: 0 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--xp-accent); }
.xp-call p { margin: 0 0 8px; color: #d6dee5; }
.xp-call p:last-child { margin-bottom: 0; }
.xp-call .xp-live { font-variant-numeric: tabular-nums; color: #fff; font-weight: 600; }
.xp-picks { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 8px; }
.xp-picks:last-child { margin-bottom: 0; }
.xp-picks button { font: 600 12px/1 var(--xp-font); color: var(--xp-text); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px; padding: 6px 10px; cursor: pointer; }
.xp-picks button .sw { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.xp-picks button.is-on { border-color: #fff; background: rgba(255, 255, 255, 0.18); }
.xp-picks button:focus-visible, .xp-chips button:focus-visible { outline: 2px solid var(--xp-accent); outline-offset: 2px; }

/* the section rail */
#xp-rail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 5; display: flex; flex-direction: column; gap: 10px; }
#xp-rail a { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); display: block; position: relative; }
#xp-rail a.is-on { background: var(--xp-accent); box-shadow: 0 0 10px rgba(127, 227, 255, 0.7); }
#xp-rail a span { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 12px; color: var(--xp-soft); opacity: 0; transition: opacity 0.2s; }
#xp-rail a:hover span, #xp-rail a:focus-visible span { opacity: 1; }

@media (max-width: 760px) {
  body.xp { font-size: 15.5px; }
  .xp-story { margin: 0 auto; width: calc(100vw - 24px); padding: 52vh 0 30vh; }
  .xp-step { padding: 18px 18px 16px; }
  .xp-step + .xp-step, .xp-sec + .xp-sec .xp-step:first-child { margin-top: 70vh; }
  #xp-stage::after { background: linear-gradient(0deg, rgba(6, 9, 14, 0.7) 0%, rgba(6, 9, 14, 0) 45%); }
  .xp-call { width: 210px; font-size: 12.5px; padding: 10px 11px; }
  #xp-rail { right: 8px; }
  .xp-logs-space { top: 34%; }
  .xp-slab { left: -125px; top: -80px; width: 250px; height: 160px; }
  .xp-slab-face { font-size: 8.5px; padding: 7px 9px 0; }
  .xp-slab-face header { font-size: 8px; padding-bottom: 5px; margin-bottom: 4px; }
  .xp-slab.is-schema { left: -140px; top: -92px; width: 280px; height: 184px; }
  .xp-slab.is-schema .xp-slab-face { font-size: 8.5px; }
  .xp-reel video { position: absolute; top: 0; height: auto; object-fit: contain; }
  .xp-reel::after { display: none; }
  #xp-sound { right: 12px; bottom: auto; top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .xp-step, .xp-call, .xp-logs-veil, .xp-reel { transition: none; }
  .xp-slab.is-scroll pre { animation: none; }
  .xp-cta button { animation: none; }
}

/* the dashboards (2026-09-24): stills of the lens's stats window, crew board and work board from a real record, beside their steps over a dimmed stage;
   a click enlarges one to the whole screen, a second click or Esc puts it back */
#xp-dash { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.7s, visibility 0s 0.7s;
  background: radial-gradient(85% 70% at 68% 50%, rgba(22, 36, 50, 0.92), rgba(6, 9, 14, 0.98) 72%); }
#xp-dash.is-on { opacity: 1; visibility: visible; transition: opacity 0.7s; }
#xp-dash figure { position: absolute; margin: 0; top: 50%; left: calc(clamp(16px, 5vw, 76px) + 460px + 40px); right: 48px; display: flex; justify-content: center;
  opacity: 0; transform: translateY(-50%) scale(0.97); transition: opacity 0.5s, transform 0.5s; pointer-events: none; }
#xp-dash figure.is-on { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
#xp-dash button { display: block; max-width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 14px; }
#xp-dash button:focus-visible { outline: 2px solid var(--xp-accent); outline-offset: 4px; }
#xp-dash img { display: block; width: auto; height: auto; max-width: 100%; max-height: 82vh; border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 70px rgba(127, 227, 255, 0.08); }
#xp-dash.is-zoom { z-index: 7; pointer-events: auto; cursor: zoom-out; background: rgba(4, 7, 12, 0.95); }
#xp-dash.is-zoom figure.is-on { left: 2vw; right: 2vw; }
#xp-dash.is-zoom img { max-height: 95vh; }
#xp-dash.is-zoom button { cursor: zoom-out; }
@media (max-width: 760px) {
  #xp-dash figure { top: 56px; left: 10px; right: 10px; transform: scale(0.97); }
  #xp-dash figure.is-on { transform: none; }
  #xp-dash img { max-height: 44vh; }
  #xp-dash.is-zoom figure.is-on { top: 50%; transform: translateY(-50%); }
  #xp-dash.is-zoom img { max-height: 92vh; }
}
@media (prefers-reduced-motion: reduce) { #xp-dash, #xp-dash figure { transition: none; } }