/* NEW2 — Interactive Celestia data journey (home chapter in compact mode, /journey page in full mode).
   Observatory (dark) surface. Motion is transform/opacity only: the data token and the progress fill move, actors and
   nodes change opacity; under prefers-reduced-motion everything swaps instantly and nothing autoplays. */
.jn, .jn-page, .jn-modes {
  --jn-void: #0E1014; --jn-void-2: #151821; --jn-void-3: #1C202C; --jn-card: #171923; --jn-pill: #1B1B28;
  --jn-line: #2A2F3F; --jn-line-2: #3A3F52; --jn-pill-line: #625A80; --jn-text: #ECEAF6; --jn-muted: #A9A7BD;
  --jn-lilac: #B7A6FF; --jn-lilac-2: #C1B1FF; --jn-amethyst: #7C68F2; --jn-soft: #463C7A; --jn-ok: #46D195;
  --jn-ease: cubic-bezier(.2, .7, .2, 1);
  font-family: var(--n2-sans); color: var(--jn-text); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
.jn *, .jn *::before, .jn *::after { box-sizing: border-box; }
/* the shared v3 wrapper is light by default; the journey sits on the observatory surface */
.n2x[data-n2x=journey] { color: var(--n2-void-text); }
.n2x[data-n2x=journey] .n2x-loading { color: #A9A7BD; }
.n2x[data-n2x=journey] .n2x-loading span { border-color: #463C7A; border-top-color: #B7A6FF; }
.jn a { color: var(--jn-lilac-2); }
.jn button { font: inherit; color: inherit; }
.jn :focus-visible { outline: 2px solid var(--n2-indigo); outline-offset: 2px; border-radius: 4px; }
.jn .jn-mono, .jn code { font-family: var(--n2-mono); letter-spacing: 0; }
/* .n2i is the app-wide icon class (new2-icons.js); the box properties are restated here so a page-level rule on the same
   class name elsewhere cannot turn the journey's icons into layout boxes */
.jn .n2i, .jn-modes .n2i { display: inline-block; width: 16px; height: 16px; max-width: none; padding: 0; margin: 0; color: inherit; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.jn-glyph { display: block; width: 16px; height: 16px; color: inherit; }

/* ---------- mode control ---------- */
.jn-modes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--jn-void-2); border: 1px solid var(--jn-line); }
.jn-modes button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 9px; background: none; color: var(--jn-muted); font: 700 14px/1 var(--n2-sans); cursor: pointer; transition: background .12s var(--jn-ease), color .12s var(--jn-ease); }
.jn-modes button:hover { color: var(--jn-text); background: var(--jn-void-3); }
.jn-modes button[aria-pressed=true] { background: var(--jn-lilac); color: var(--jn-void); }
.jn-top { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.jn-top:empty { display: none; }

/* ---------- three columns ---------- */
/* 1440 spec: stage list 300 · scene 556 · details 400 at a 1296 content width; the page shell is narrower (1200), so the
   side columns give way first and the scene keeps the remainder */
.jn-grid { display: grid; grid-template-columns: minmax(236px, .54fr) minmax(0, 1fr) minmax(316px, .72fr); gap: 20px; align-items: start; }

/* stage list */
.jn-stages ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.jn-stage { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 14px; align-items: start; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; background: none; cursor: pointer; transition: background .12s var(--jn-ease), border-color .12s var(--jn-ease); }
.jn-stage:hover { background: var(--jn-void-2); }
.jn-stage[aria-selected=true] { background: var(--jn-pill); border-color: var(--jn-pill-line); }
.jn-stage .jn-glyph { width: 16px; height: 16px; margin-top: 3px; color: var(--jn-muted); }
.jn-stage[aria-selected=true] .jn-glyph { color: var(--jn-lilac-2); }
.jn-stage b { display: block; font: 600 13px/1.35 var(--n2-sans); color: var(--jn-text); }
.jn-stage[aria-selected=true] b { color: var(--jn-lilac-2); font-weight: 700; }
.jn-stage small { display: block; font: 500 11px/1.4 var(--n2-sans); color: var(--jn-muted); margin-top: 1px; }
.jn-stage .jn-num { display: none; }
.jn-alt { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--jn-line); border-radius: 12px; background: var(--jn-card); }
.jn-alt b { display: block; font: 500 11px/1.3 var(--n2-mono); letter-spacing: .04em; color: var(--jn-muted); margin-bottom: 6px; }
.jn-alt p { margin: 0; font: 500 12.5px/1.5 var(--n2-sans); color: var(--jn-text); }
.jn-alt button { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--jn-lilac-2); font: 700 12.5px/1.4 var(--n2-sans); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; }
.jn-alt button:hover { text-decoration: underline; text-underline-offset: 3px; }

/* scene */
.jn-scene-card { background: var(--jn-card); border: 1px solid var(--jn-line); border-radius: 16px; overflow: hidden; }
.jn-scene { position: relative; aspect-ratio: 556 / 300; min-height: 180px; outline-offset: -2px; }
.jn-full .jn-scene { aspect-ratio: 540 / 360; }
.jn-scene svg { display: block; width: 100%; height: 100%; overflow: visible; }
.jn-scene text { font-family: var(--n2-mono); font-size: 10.5px; fill: var(--jn-muted); }
.jn-rail { stroke: var(--jn-line-2); stroke-width: 2; stroke-linecap: round; }
.jn-prog { fill: var(--jn-lilac); transition: transform .6s var(--jn-ease); }
.jn-node { cursor: pointer; }
.jn-node .jn-hit { fill: transparent; }
.jn-dot { fill: var(--jn-pill-line); transition: fill .3s var(--jn-ease), opacity .3s var(--jn-ease); }
.jn-node.is-past .jn-dot { fill: var(--jn-lilac-2); }
.jn-node.is-sel .jn-dot { opacity: 0; }
.jn-sel { opacity: 0; transition: opacity .3s var(--jn-ease); }
.jn-node.is-sel .jn-sel { opacity: 1; }
.jn-sel circle { fill: var(--jn-lilac); }
.jn-sel .jn-glyph-svg { color: var(--jn-void); }
.jn-lbl { text-anchor: middle; transition: fill .3s var(--jn-ease); }
.jn-lbl.is-sel { fill: var(--jn-lilac-2); font-weight: 700; }
.jn-token { fill: var(--jn-lilac); transition: transform .6s var(--jn-ease), opacity .25s var(--jn-ease); }
.jn-token.is-jump { transition: none; }
.jn-token .jn-ns { fill: var(--jn-void); opacity: .55; }
.jn-actor { transition: opacity .3s var(--jn-ease), color .3s var(--jn-ease); color: var(--jn-muted); opacity: .42; }
.jn-actor.is-past { color: var(--jn-lilac); opacity: .72; }
.jn-actor.is-sel { color: var(--jn-lilac-2); opacity: 1; }
.jn-ring { fill: var(--jn-pill); stroke: var(--jn-pill-line); stroke-width: 1; opacity: 0; transition: opacity .3s var(--jn-ease); }
.jn-actor.is-sel .jn-ring { opacity: 1; }
.jn-tick { stroke: var(--jn-line-2); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; transition: opacity .3s var(--jn-ease); }
.jn-actor.is-sel .jn-tick { opacity: 1; }
.jn-ghost { cursor: pointer; }
.jn-ghost line { stroke: var(--jn-pill-line); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: .75; }
.jn-ghost circle { fill: var(--jn-line-2); stroke: var(--jn-pill-line); stroke-width: 1; }
.jn-ghost text { fill: var(--jn-muted); opacity: .85; text-anchor: middle; font-size: 10px; }
.jn-ghost:hover line, .jn-ghost:hover circle { stroke: var(--jn-lilac-2); }
.jn-ghost .jn-cap { font-size: 10.5px; fill: var(--jn-muted); text-anchor: start; opacity: 1; }
.jn-ghost .jn-cap.is-end { text-anchor: end; }
.jn-badge { position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 16px); padding: 5px 10px; border: 1px solid var(--jn-pill-line); border-radius: 8px; background: var(--jn-pill); font: 500 11px/1.3 var(--n2-mono); color: var(--jn-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform .6s var(--jn-ease), opacity .25s var(--jn-ease); pointer-events: none; }
.jn-badge b { font-weight: 700; color: var(--jn-lilac-2); }
.jn-badge span { color: var(--jn-muted); overflow: hidden; text-overflow: ellipsis; }
.jn-badge[hidden] { display: none; }
.jn-ctl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px 14px; }
.jn-play { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 1px solid var(--jn-pill-line); border-radius: 9px; background: var(--jn-pill); color: var(--jn-text); font: 700 13px/1 var(--n2-sans); cursor: pointer; }
.jn-play:hover { border-color: var(--jn-lilac-2); }
.jn-play .n2i { width: 14px; height: 14px; }
.jn-motion { font: 500 11px/1.4 var(--n2-mono); color: var(--jn-muted); }
.jn-rm .jn-play { display: none; }
.jn-rm .jn-motion::before { content: '⏸'; margin-right: 8px; opacity: .8; }

/* reduced motion: no transitions anywhere, every node drawn solid, no progress fill */
.jn-rm *, .jn-rm *::before, .jn-rm *::after { transition: none !important; animation: none !important; }
.jn-rm .jn-prog { display: none; }
.jn-rm .jn-dot { fill: var(--jn-lilac-2); }
@media (prefers-reduced-motion: reduce) { .jn *, .jn *::before, .jn *::after { transition: none !important; animation: none !important; } }

/* details */
.jn-details { background: var(--jn-card); border: 1px solid var(--jn-line); border-radius: 16px; padding: 22px 24px 20px; }
.jn-dhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.jn-kicker { margin: 0; font: 700 11px/1.3 var(--n2-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--jn-lilac); }
.jn-depth { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--jn-void-2); border: 1px solid var(--jn-line); }
.jn-depth button { border: 0; background: none; color: var(--jn-muted); font: 700 11px/1 var(--n2-sans); padding: 0 10px; min-height: 30px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.jn-depth button[aria-pressed=true] { background: var(--jn-void-3); color: var(--jn-text); }
.jn-details h3 { margin: 0 0 10px; font: 600 21px/1.25 var(--n2-display); letter-spacing: -.01em; color: var(--jn-text); }
.jn-full .jn-details h3 { font-size: 19px; }
.jn-details .jn-p { margin: 0 0 14px; font: 400 14.5px/1.55 var(--n2-sans); color: var(--jn-text); }
.jn-ex { border: 1px solid var(--jn-line); background: var(--jn-void-2); border-radius: 10px; padding: 12px 14px 10px; margin-bottom: 12px; }
.jn-ex > b { display: block; font: 500 11px/1.3 var(--n2-mono); letter-spacing: .03em; color: var(--jn-muted); margin-bottom: 8px; }
.jn-ex dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 6px; }
.jn-ex dt { font: 500 12px/1.4 var(--n2-sans); color: var(--jn-muted); }
.jn-ex dd { margin: 0; font: 500 12.5px/1.4 var(--n2-mono); color: var(--jn-text); text-align: right; overflow-wrap: anywhere; }
.jn-ex dd a { color: var(--jn-lilac-2); text-decoration: none; }
.jn-ex dd a:hover { text-decoration: underline; text-underline-offset: 3px; }
.jn-ex .jn-src { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--jn-line); font: 500 11.5px/1.45 var(--n2-sans); color: var(--jn-muted); }
.jn-ex .jn-src code { font-size: 11px; color: var(--jn-text); }
.jn-ex.is-missing { border-style: dashed; }
.jn-ex.is-missing p { margin: 0; font: 500 12.5px/1.5 var(--n2-sans); color: var(--jn-muted); }
.jn-not { margin: 0 0 12px; font: 500 12.5px/1.5 var(--n2-sans); color: var(--jn-muted); }
.jn-not b { color: var(--jn-text); font-weight: 600; }
.jn-obs { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 4px; }
.jn-obs li { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 10px; font: 500 12.5px/1.5 var(--n2-sans); color: var(--jn-muted); }
.jn-obs li b { font: 700 10.5px/1.6 var(--n2-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--jn-lilac); }
.jn-obs li.is-no b { color: var(--jn-muted); }
.jn-nav { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.jn-nav button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 6px; border: 0; background: none; color: var(--jn-muted); font: 600 13px/1.2 var(--n2-sans); cursor: pointer; border-radius: 8px; text-align: left; }
.jn-nav button:hover { color: var(--jn-lilac-2); }
.jn-nav button.next { text-align: right; margin-left: auto; color: var(--jn-lilac-2); }
.jn-nav button .n2i { width: 14px; height: 14px; }
.jn-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.jn-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; font: 700 14px/1.2 var(--n2-sans); color: var(--jn-lilac-2); text-decoration: none; }
.jn-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.jn-links a .n2i { width: 15px; height: 15px; }
.jn-mocha { margin: 0 0 12px; padding: 9px 12px; border-radius: 8px; background: var(--jn-void-2); border: 1px solid var(--jn-line); font: 500 12px/1.5 var(--n2-sans); color: var(--jn-muted); }
.jn-mocha b { color: var(--jn-text); font-weight: 600; }
.jn-wait, .jn-fail { font: 600 13px/1.5 var(--n2-sans); color: var(--jn-muted); padding: 14px 0; }
.jn-fail { color: #F07078; }

/* ---------- full page extras: sources panel, the mixed-up note, footer meta ---------- */
.jn-page { padding: 6px 0 0; }
.jn-crumbs { margin: 0 0 18px; font: 500 13px/1.4 var(--n2-sans); color: var(--jn-muted); }
.jn-crumbs a { color: var(--jn-muted); text-decoration: none; } .jn-crumbs a:hover { color: var(--jn-text); }
.jn-crumbs span { color: var(--jn-text); }
.jn-crumbs i { font-style: normal; margin: 0 8px; opacity: .6; }
.jn-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: end; margin-bottom: 28px; }
.jn-head h1 { grid-column: 1; margin: 0 0 10px; font: 600 clamp(28px, 2.4vw, 34px)/1.12 var(--n2-display); letter-spacing: -.02em; color: var(--jn-text); max-width: 26ch; }
.jn-head .jn-disclaimer { grid-column: 1; margin: 0; font: 400 16px/1.5 var(--n2-sans); color: var(--jn-muted); max-width: 78ch; }
.jn-head .jn-slot { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
.jn-head .jn-crumbs { grid-column: 1; }
.jn-below { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; align-items: start; }
.jn-below > *, .jn-grid > * { min-width: 0; }
.jn-tbl { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.jn-sources, .jn-note { background: var(--jn-card); border: 1px solid var(--jn-line); border-radius: 16px; padding: 20px 24px; }
.jn-sources h2, .jn-note h2 { margin: 0 0 6px; font: 600 17px/1.3 var(--n2-display); letter-spacing: -.01em; color: var(--jn-text); }
.jn-sources > p, .jn-note p { margin: 0 0 12px; font: 400 13.5px/1.55 var(--n2-sans); color: var(--jn-muted); }
.jn-note p b { color: var(--jn-text); font-weight: 600; }
.jn-sources table { width: 100%; border-collapse: collapse; font: 500 12.5px/1.45 var(--n2-sans); }
.jn-sources th, .jn-sources td { text-align: left; padding: 7px 10px 7px 0; border-top: 1px solid var(--jn-line); vertical-align: top; }
.jn-sources th { font: 700 10.5px/1.4 var(--n2-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--jn-muted); border-top: 0; white-space: nowrap; }
.jn-sources td:first-child { min-width: 140px; }
.jn-sources td code { font-size: 11.5px; color: var(--jn-text); overflow-wrap: normal; }
.jn-sources td .jn-kind { white-space: nowrap; }
.jn-sources td.jn-when { white-space: normal; min-width: 150px; }
.jn-sources td.jn-when span { white-space: nowrap; }
.jn-sources td.jn-dim { min-width: 140px; }
.jn-sources td.jn-when { font-family: var(--n2-mono); font-size: 11.5px; color: var(--jn-text); }
.jn-sources td .jn-kind { display: inline-block; font: 700 10px/1 var(--n2-sans); letter-spacing: .06em; text-transform: uppercase; padding: 3px 6px; border-radius: 999px; border: 1px solid var(--jn-pill-line); color: var(--jn-lilac-2); background: var(--jn-pill); }
.jn-sources td .jn-kind.snap { color: var(--jn-muted); border-color: var(--jn-line-2); background: transparent; }
.jn-sources td.jn-dim { color: var(--jn-muted); }
.jn-sources tr.is-off td { opacity: .55; }
.jn-note ul { margin: 0; padding-left: 18px; font: 400 13.5px/1.55 var(--n2-sans); color: var(--jn-muted); display: grid; gap: 6px; }
.jn-note li b { color: var(--jn-text); font-weight: 600; }
.jn-note .jn-links { margin-top: 14px; }
.jn-meta { margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 11.5px/1.5 var(--n2-mono); color: var(--jn-muted); }
.jn-meta a { color: var(--jn-muted); } .jn-meta a:hover { color: var(--jn-lilac-2); }

/* ---------- breakpoints ---------- */
@media (max-width: 1180px) {
  .jn-grid, .jn-full .jn-grid { grid-template-columns: 256px minmax(0, 1fr); }
  .jn-details { grid-column: 1 / -1; }
  .jn-below { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .jn-grid, .jn-full .jn-grid { grid-template-columns: 220px minmax(0, 1fr); gap: 16px; }
  .jn-head { grid-template-columns: 1fr; }
  .jn-head .jn-slot { grid-column: 1; grid-row: auto; justify-self: start; }
}
@media (max-width: 600px) {
  .jn-top { justify-content: stretch; margin-bottom: 16px; }
  .jn-modes { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .jn-modes button { justify-content: center; min-height: 44px; }
  .jn-grid, .jn-full .jn-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .jn-stages ol { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
  .jn-stages ol::-webkit-scrollbar { display: none; }
  .jn-stages li { flex: none; }
  .jn-stage { grid-template-columns: auto auto; column-gap: 6px; align-items: center; min-height: 40px; min-width: 52px; padding: 0 12px; border-color: var(--jn-line); border-radius: 10px; }
  .jn-stage .jn-glyph { margin-top: 0; }
  .jn-stage .jn-stage-text { display: none; }
  .jn-stage .jn-num { display: block; font: 700 12.5px/1 var(--n2-mono); color: var(--jn-text); }
  .jn-stage[aria-selected=true] .jn-num { color: var(--jn-lilac-2); }
  .jn-alt { display: none; }
  .jn-scene, .jn-full .jn-scene { aspect-ratio: 358 / 230; min-height: 200px; }
  .jn-scene text { font-size: 10px; }
  .jn-ctl { padding: 8px 12px 12px; }
  .jn-details { padding: 18px 16px 16px; }
  .jn-ex dl { grid-template-columns: 1fr; row-gap: 2px; }
  .jn-ex dt { margin-top: 6px; } .jn-ex dt:first-child { margin-top: 0; }
  .jn-ex dd { text-align: left; }
  .jn-obs li { grid-template-columns: 1fr; }
  .jn-sources, .jn-note { padding: 16px; }
  .jn-sources td:first-child, .jn-sources td.jn-when, .jn-sources td.jn-dim { min-width: 0; }
  .jn-depth button { min-height: 40px; padding: 0 12px; }
  .jn-ex dd a, .jn-meta a, .jn-crumbs a { display: inline-block; min-width: 44px; padding: 8px 4px; margin: 0 -4px; }
  .jn-hint { margin: 12px 0 0; font: 500 12.5px/1.5 var(--n2-sans); color: var(--jn-muted); }
}
@media (min-width: 601px) { .jn-hint { display: none; } }