/* Deep Space map, "C and B in one 3D map" (preview, 26 Oct 2026): the Cinematic look (lit planets, the Sun's glare, the
   heliosphere, the stars, the real Earth, the escape paths) with the 3D Explorer's tools (views, trails, planned paths,
   badges, legend, network beams, card). Site fonts on every piece of text: Orbitron 700 = titles, labels, figures, units,
   badges, buttons; JetBrains Mono = running text and data. Every role selector has its nested twin (the site sheet sets
   JetBrains Mono on .or-lib-wrap *). */
.dsx-cinematic { position: relative; width: 100%; background: #03050c; color: #fff; }
.dsx-cinematic .cin-stage { position: relative; width: 100%; height: clamp(480px, 68vh, 820px); overflow: hidden; background: #03050c; touch-action: pan-y;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.dsx-cinematic[data-page="voyager-1"] .cin-stage, .dsx-cinematic[data-page="jwst"] .cin-stage { height: clamp(360px, 52vh, 600px); }
.dsx-cinematic canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dsx-cinematic .cin-fx { pointer-events: none; }
.dsx-cinematic .cin-gl { cursor: grab; }
.dsx-cinematic .cin-gl:active { cursor: grabbing; }
.dsx-cinematic .cin-vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 85% 75% at 50% 50%, rgba(3,5,12,0) 55%, rgba(3,5,12,.55) 100%),
              linear-gradient(to bottom, rgba(3,5,12,.35) 0%, rgba(3,5,12,0) 14%, rgba(3,5,12,0) 72%, rgba(3,5,12,.6) 100%); }

/* labels (DOM, placed every frame with transforms; never over each other) */
.dsx-cinematic .cin-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dsx-cinematic .cin-lab { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; transition: opacity .35s ease; opacity: 0; }
.dsx-cinematic .cin-lab.on { opacity: 1; }
.dsx-cinematic .cin-lab.tap.on { pointer-events: auto; cursor: pointer; }
.dsx-cinematic .cin-lab.tap.on:hover .n { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.dsx-cinematic .cin-lab .n { display: block; font-family: Orbitron, "JetBrains Mono", monospace; font-weight: 700; letter-spacing: .6px; text-shadow: 0 0 6px rgba(3,5,12,.95), 0 0 2px rgba(3,5,12,1); }
.dsx-cinematic .cin-lab .s { display: block; font-family: "JetBrains Mono", monospace; font-weight: 400; font-size: 10.5px; color: rgba(255,255,255,.66); margin-top: 2px; text-shadow: 0 0 6px rgba(3,5,12,.95); }
.dsx-cinematic .cin-lab.craft .n { font-size: 12px; }
.dsx-cinematic .cin-lab.craft.hero .n { font-size: 14px; letter-spacing: .8px; }
.dsx-cinematic .cin-lab.planet .n { font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(232,236,246,.62); }
.dsx-cinematic .cin-lab.land .n { font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; }
.dsx-cinematic .cin-lab.mile .n { font-size: 10px; letter-spacing: .8px; color: #ffe060; }
.dsx-cinematic .cin-lab.mile.done .n { color: rgba(255,255,255,.82); }
.dsx-cinematic .cin-lab.ring .n { font-size: 8.5px; letter-spacing: 1.3px; color: rgba(96,234,254,.68); }
/* badges: a count of craft too close together to draw one by one (the Earth one opens the Earth and L2 view) */
.dsx-cinematic .cin-lab.clu { padding: 4px 9px 5px; border-radius: 8px; background: rgba(7,10,24,.82); border: 1px solid rgba(96,234,254,.34); }
.dsx-cinematic .cin-lab.clu .n { font-size: 10.5px; color: #60eafe; text-shadow: none; letter-spacing: .4px; }
.dsx-cinematic .cin-lab.clu .s { font-size: 10px; margin-top: 1px; text-shadow: none; }
.dsx-cinematic .cin-lab.clu.tap.on:hover { border-color: #ffe060; }
.dsx-cinematic .cin-lab .n *, .dsx-cinematic .cin-lab .s * { font-family: inherit; font-weight: inherit; }
/* a label left of its point hugs it; one above or below is centred on it */
.dsx-cinematic .cin-lab.lft { text-align: right; }
.dsx-cinematic .cin-lab.ctr { text-align: center; }
/* side characters dim while the tour is on one story */
.dsx-cinematic .cin-lab.dim.on { opacity: .5; }

/* the toolbar: Tour, the four views, Trails and Network (always there, top left) */
.dsx-cinematic .cmb-bar { position: absolute; z-index: 4; top: 14px; left: clamp(14px, 2.2vw, 32px); display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  padding: 4px; max-width: calc(100% - 400px); border-radius: 12px; background: rgba(7,10,24,.7); border: 1px solid rgba(255,224,96,.2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.dsx-cinematic .cmb-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 9px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; font-family: Orbitron, "JetBrains Mono", monospace; font-weight: 700; font-size: 10.5px; letter-spacing: .5px; white-space: nowrap;
  color: rgba(255,255,255,.82); transition: background .2s, color .2s; }
.dsx-cinematic .cmb-btn * { font-family: inherit; font-weight: inherit; }
.dsx-cinematic .cmb-btn svg { flex: none; width: 14px; height: 14px; }
.dsx-cinematic .cmb-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.dsx-cinematic .cmb-btn:focus-visible { outline: 2px solid #ffe060; outline-offset: 1px; }
.dsx-cinematic .cmb-tour { color: #ffe060; }
.dsx-cinematic .cmb-tour.on { background: rgba(255,224,96,.15); }
.dsx-cinematic .cmb-band.on, .dsx-cinematic .cmb-band.on:hover { background: #ffe060; color: #070a18; }
.dsx-cinematic .cmb-tog { color: rgba(255,255,255,.45); }
.dsx-cinematic .cmb-tog.on { color: #60eafe; }
.dsx-cinematic .cmb-sep { flex: none; width: 1px; height: 18px; margin: 0 5px; background: rgba(255,255,255,.14); }

/* the lower-third caption (tour); on the mission pages a smaller title card that can be closed */
.dsx-cinematic .cin-cap { position: absolute; z-index: 3; left: clamp(16px, 3vw, 40px); bottom: clamp(16px, 4vh, 40px); width: min(460px, calc(100% - 32px));
  padding: 16px 18px 14px 20px; border-radius: 14px; background: linear-gradient(135deg, rgba(7,10,24,.82), rgba(7,10,24,.62));
  border: 1px solid rgba(255,224,96,.22); box-shadow: 0 18px 60px rgba(0,0,0,.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: opacity .6s ease, transform .6s ease; }
.dsx-cinematic .cin-cap::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: linear-gradient(#ffe060, rgba(255,224,96,.15)); }
.dsx-cinematic .cin-cap.out { opacity: 0; transform: translateY(8px); pointer-events: none; }
.dsx-cinematic .cin-kick { font-family: Orbitron, "JetBrains Mono", monospace; font-weight: 700; font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; color: rgba(96,234,254,.85); display: flex; align-items: center; gap: 8px; }
.dsx-cinematic .cin-kick .dot { width: 6px; height: 6px; border-radius: 50%; background: #60eafe; box-shadow: 0 0 8px #60eafe; flex: none; }
.dsx-cinematic .cin-title { font-family: Orbitron, "JetBrains Mono", monospace; font-weight: 700; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.25; color: #ffe060; margin: 7px 0 7px; letter-spacing: .3px; }
.dsx-cinematic .cin-line { font-family: "JetBrains Mono", monospace; font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.82); margin: 0; }
.dsx-cinematic .cin-figs { display: flex; gap: 18px; margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.08); flex-wrap: wrap; }
.dsx-cinematic .cin-fig { min-width: 0; }
.dsx-cinematic .cin-fig .v { font-family: Orbitron, "JetBrains Mono", monospace; font-weight: 700; font-size: 14px; color: #60eafe; white-space: nowrap; letter-spacing: .3px; }
.dsx-cinematic .cin-fig .k { font-family: Orbitron, "JetBrains Mono", monospace; font-weight: 700; font-size: 8.5px; letter-spacing: 1.3px; text-transform: uppercase; color: rgba(255,255,255,.45); margin-top: 4px; white-space: nowrap; }
.dsx-cinematic .cin-kick *, .dsx-cinematic .cin-title *, .dsx-cinematic .cin-fig .v *, .dsx-cinematic .cin-fig .k * { font-family: inherit; font-weight: inherit; }
/* the tour's five stories: progress bars in the caption's top line (each one jumps to its story) */
.dsx-cinematic .cin-kick .cin-dots { margin-left: auto; display: flex; gap: 4px; }
.dsx-cinematic .cin-dots button { position: relative; width: 24px; height: 16px; border: 0; padding: 0; background: transparent; cursor: pointer; }
.dsx-cinematic .cin-dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.18); }
.dsx-cinematic .cin-dots button i { position: absolute; left: 0; top: 6px; height: 4px; width: 0; border-radius: 3px; background: #ffe060; }
.dsx-cinematic .cin-dots button.done i { width: 100%; background: rgba(255,224,96,.55); }
.dsx-cinematic .cin-dots button:focus-visible { outline: 2px solid #ffe060; outline-offset: 2px; }
.dsx-cinematic .cin-cap .cin-x { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: transparent; color: rgba(255,255,255,.55); cursor: pointer; }
.dsx-cinematic .cin-cap .cin-x:hover { color: #fff; background: rgba(255,255,255,.08); }
.dsx-cinematic .cin-cap .cin-x:focus-visible { outline: 2px solid #ffe060; outline-offset: 1px; }

/* the selected craft's card (Explore) */
.dsx-cinematic .cin-card { position: absolute; z-index: 3; right: clamp(14px, 2.2vw, 32px); top: 14px; width: 320px; transition: opacity .4s ease; }
.dsx-cinematic .cin-card.out { opacity: 0; pointer-events: none; }

/* the legend and the scale note (Explore): bottom left; on the mission pages and phones, under the picture */
.dsx-cinematic .cmb-legend { position: absolute; z-index: 3; left: clamp(14px, 2.2vw, 32px); bottom: 14px; max-width: min(780px, calc(100% - 400px)); pointer-events: none; transition: opacity .4s ease; }
.dsx-cinematic .cmb-legend.out { opacity: 0; }
.dsx-cinematic .cmb-lg { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-bottom: 7px; }
.dsx-cinematic .cmb-lgi { display: inline-flex; align-items: center; gap: 7px; font-family: Orbitron, "JetBrains Mono", monospace; font-weight: 700; font-size: 8.5px;
  letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.64); white-space: nowrap; }
.dsx-cinematic .cmb-lgi * { font-family: inherit; font-weight: inherit; }
.dsx-cinematic .cmb-sw { display: inline-block; flex: none; }
.dsx-cinematic .cmb-sw.dot { width: 8px; height: 8px; border-radius: 50%; }
.dsx-cinematic .cmb-sw.a { background: #60eafe; box-shadow: 0 0 8px #60eafe; }
.dsx-cinematic .cmb-sw.c { background: #ffe060; box-shadow: 0 0 8px #ffe060; }
.dsx-cinematic .cmb-sw.e { background: #9aa4b8; box-shadow: 0 0 6px rgba(154,164,184,.8); }
.dsx-cinematic .cmb-sw.ln { width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.92)); }
.dsx-cinematic .cmb-sw.ln.v1 { background: linear-gradient(90deg, rgba(255,224,96,.25), #ffe060); box-shadow: 0 0 6px rgba(255,224,96,.6); }
.dsx-cinematic .cmb-sw.ln.esc { background: linear-gradient(90deg, #60eafe, #c9a2ff 60%, #a9b6d0); }
.dsx-cinematic .cmb-sw.dash { width: 22px; height: 0; border-top: 2px dashed rgba(255,255,255,.62); }
.dsx-cinematic .cmb-sw.beam { width: 22px; height: 0; border-top: 1.5px dashed #60eafe; box-shadow: 0 0 6px rgba(96,234,254,.8); }
.dsx-cinematic .cmb-sw.ring { width: 22px; height: 2px; border-radius: 2px; background: #ffd23f; box-shadow: 0 0 6px rgba(255,210,63,.7); }
.dsx-cinematic .cmb-scale { font-family: "JetBrains Mono", monospace; font-size: 11px; line-height: 1.5; color: rgba(255,255,255,.58); }
.dsx-cinematic .cmb-scale b { font-family: Orbitron, "JetBrains Mono", monospace; font-weight: 700; font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(96,234,254,.85); margin-right: 7px; }
.dsx-cinematic .cmb-scale b * { font-family: inherit; font-weight: inherit; }

/* the hint (first seconds of Explore) and the note / time stamp (bottom right) */
.dsx-cinematic .cin-hint { position: absolute; z-index: 3; left: clamp(14px, 2.2vw, 32px); top: 62px; font-family: "JetBrains Mono", monospace; font-size: 11px; color: rgba(255,255,255,.6);
  background: rgba(7,10,24,.62); padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.08); pointer-events: none; transition: opacity .5s; }
.dsx-cinematic .cin-hint.out { opacity: 0; }
.dsx-cinematic .cin-note { position: absolute; z-index: 3; right: clamp(14px, 2.2vw, 32px); bottom: 14px; max-width: 40%; text-align: right; font-family: "JetBrains Mono", monospace;
  font-size: 10.5px; color: rgba(255,255,255,.45); pointer-events: none; }
.dsx-cinematic .cin-below { display: none; }

/* mission pages: a compact title card (the live figures are already above the map); the legend in a strip under the map */
.dsx-cinematic.cin-compact .cin-cap { width: min(380px, calc(100% - 32px)); padding: 13px 40px 12px 18px; }
.dsx-cinematic.cin-compact .cin-figs { display: none; }
.dsx-cinematic.cin-compact .cin-title { font-size: clamp(15px, 1.3vw, 18px); margin: 6px 0 6px; }
.dsx-cinematic.cin-compact .cin-line { font-size: 12px; line-height: 1.55; }
.dsx-cinematic.cin-compact .cin-below { display: block; padding: 11px clamp(14px, 2.2vw, 32px) 12px; background: #03050c; border-top: 1px solid rgba(255,255,255,.05); }
.dsx-cinematic .cin-below .cmb-legend { position: relative; left: auto; bottom: auto; max-width: none; }
.dsx-cinematic.cin-compact .cin-below .cmb-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; }
.dsx-cinematic.cin-compact .cin-below .cmb-lg { margin: 0; }

/* phones: the caption, the card and the legend go under the picture, so nothing covers it; the toolbar scrolls */
@media (max-width: 600px) {
  .dsx-cinematic .cin-stage { height: clamp(420px, 62vh, 600px); }
  .dsx-cinematic[data-page="voyager-1"] .cin-stage, .dsx-cinematic[data-page="jwst"] .cin-stage { height: clamp(380px, 56vh, 540px); }
  .dsx-cinematic .cin-below, .dsx-cinematic.cin-compact .cin-below { display: block; padding: 14px 16px 8px; background: linear-gradient(#03050c, #050812); border-top: 0; }
  .dsx-cinematic .cin-below .out { display: none; }
  .dsx-cinematic .cin-below .cin-cap { position: relative; left: auto; bottom: auto; width: auto; margin-bottom: 12px; }
  .dsx-cinematic .cin-below .cin-card { position: relative; right: auto; top: auto; width: auto; margin-bottom: 14px; }
  .dsx-cinematic.cin-compact .cin-below .cmb-legend { display: block; }
  .dsx-cinematic .cin-below .cmb-lg { margin-bottom: 8px; }
  .dsx-cinematic .cmb-bar { left: 8px; right: 8px; top: 8px; max-width: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .dsx-cinematic .cmb-bar::-webkit-scrollbar { display: none; }
  .dsx-cinematic .cmb-bar:not(.end) { -webkit-mask-image: linear-gradient(to right, #000 82%, rgba(0,0,0,.15)); mask-image: linear-gradient(to right, #000 82%, rgba(0,0,0,.15)); }
  .dsx-cinematic .cmb-btn { height: 32px; padding: 0 10px 0 8px; }
  .dsx-cinematic .cin-dots button { width: 20px; }
  .dsx-cinematic .cin-title { font-size: 17px; }
  .dsx-cinematic .cin-figs { gap: 14px; }
  .dsx-cinematic .cin-note { display: none; }
  .dsx-cinematic .cin-hint { left: 8px; top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .dsx-cinematic .cin-cap, .dsx-cinematic .cin-lab, .dsx-cinematic .cin-card, .dsx-cinematic .cmb-legend, .dsx-cinematic .cmb-btn { transition: none; }
}

.dsx-card{font-family:"JetBrains Mono",monospace;color:rgba(255,255,255,.86);background:rgba(7,10,24,.86);border:1px solid rgba(255,224,96,.28);border-radius:12px;padding:14px 16px 12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 40px rgba(0,0,0,.45)}
.dsx-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.dsx-card-name{font-family:Orbitron,"JetBrains Mono",monospace;font-weight:700;font-size:15px;color:#ffe060;letter-spacing:.4px}
.dsx-chip{font-family:Orbitron,"JetBrains Mono",monospace;font-weight:700;font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;border:1px solid;border-radius:999px;padding:3px 9px;white-space:nowrap}
.dsx-row{display:flex;justify-content:space-between;gap:14px;padding:5px 0;border-top:1px solid rgba(255,255,255,.06);font-size:12px;line-height:1.45}
.dsx-k{font-family:Orbitron,"JetBrains Mono",monospace;font-weight:700;font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.5);padding-top:2px;white-space:nowrap}
.dsx-v{text-align:right;color:#fff}
.dsx-card-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-family:Orbitron,"JetBrains Mono",monospace;font-weight:700;font-size:11px;letter-spacing:.5px;color:#60eafe;text-decoration:none}
.dsx-card-link:hover{color:#ffe060}
.dsx-card-link svg{flex:none}
.dsx-card-name *,.dsx-chip *,.dsx-k *,.dsx-card-link *{font-family:inherit;font-weight:inherit}
.or-dsn-cc{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:22px;padding:0 6px;border-radius:7px;border:1px solid var(--sc,#60eafe);color:var(--sc,#60eafe);font:700 10px Orbitron,'JetBrains Mono',monospace;letter-spacing:.8px;background:rgba(255,255,255,.03)}
.or-dsn-chip-dir svg,.or-dsn-signal-dir svg,.or-dsn-beam-arrow svg,.or-dsn-signal-delay svg{display:inline-block;vertical-align:-2px}
.or-dsn-signal-delay svg{margin-right:4px}.or-dsn-chip-dish .or-dsn-cc{margin-right:6px}
.dsx-dsn-band{position:relative}.dsx-dsn-band .or-ds-dsn-strip{position:static}
.dsx-wait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 13px 'JetBrains Mono',monospace;color:rgba(255,255,255,.55);pointer-events:none}
.dsx-off .cmb-bar,.dsx-off .cin-note{display:none}