/* The opening lives inside its own dialog; the existing paper-white site stays untouched. */
#journey {
  --j-accent: #a7f7df;
  --j-soft: #78b3db;
  --j-ink: #f6f8ff;
  --j-muted: #c2c9df;
  --j-line: rgba(216, 229, 255, .2);
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #080d20;
  color: var(--j-ink);
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  isolation: isolate;
}

#journey::backdrop { background: #080d20; }
#journey[open] { display: block; }
#journey [hidden] { display: none !important; }
#journey *, #journey *::before, #journey *::after { box-sizing: border-box; }
#journey :focus-visible { outline: 2px solid var(--j-accent); outline-offset: 4px; }
#journey ::selection { background: var(--j-accent); color: #10172c; }
#journey button, #journey a { color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
#journey button { cursor: pointer; }
#journey button:disabled { cursor: default; opacity: .3; }
#journey a { text-decoration: none; }
#journey button { border: 0; }
#journey svg { display: block; max-width: 100%; }
#journey img { display: block; width: 100%; max-width: 100%; height: auto; }
#journey h2, #journey p, #journey figure { margin: 0; }
#journey:has(.j-scene[data-palette="lilac"]:not([hidden])) { --j-accent: #dac1ff; --j-soft: #a79ce7; }
#journey:has(.j-scene[data-palette="amber"]:not([hidden])) { --j-accent: #ffd89b; --j-soft: #d9a1a8; }
#journey:has(.j-scene[data-palette="blue"]:not([hidden])) { --j-accent: #9fd4ff; --j-soft: #7caaef; }

.j-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.j-top {
  display: flex;
  min-width: 0;
  min-height: 80px;
  align-items: center;
  gap: 24px;
  margin: 0 3.6vw;
  border-bottom: 1px solid rgba(224, 231, 255, .13);
}
.j-brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; font-size: 15px; font-weight: 650; letter-spacing: .06em; }
.j-brand svg { width: 25px; height: 25px; color: var(--j-accent); }
.j-top-note { margin-right: auto; color: #abb7d0; font-size: 12px; letter-spacing: .12em; }
.j-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.j-tools button, .j-tools a {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #d5def0;
  font-size: 12px;
  line-height: 1.4;
  transition: border-color .2s, background-color .2s;
}
.j-tools button:hover, .j-tools a:hover { border-color: var(--j-line); background: rgba(234, 242, 255, .06); }
.j-tools #jSkip { border-color: var(--j-line); padding-inline: 17px; }
.j-reading {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #5d6d89 transparent;
  scroll-behavior: smooth;
  touch-action: pan-y;
}
.j-scene {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: center;
  padding: 38px max(5vw, 24px) 24px;
  animation: j-arrive .65s cubic-bezier(.2, .75, .25, 1) both;
}
.j-layout {
  display: grid;
  width: min(1160px, 100%);
  margin: auto;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(30px, 5.4vw, 86px);
}
.j-copy { position: relative; z-index: 1; min-width: 0; }
.j-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; color: var(--j-accent); font-size: 12px; font-weight: 650; line-height: 1.5; letter-spacing: .18em; text-transform: uppercase; }
.j-kicker::before { width: 26px; height: 1px; background: var(--j-accent); content: ""; }
.j-date { margin-bottom: 12px; color: #b3c0d5; font-size: 13px; letter-spacing: .04em; }
#journey .j-title { max-width: 12em; margin: 0 0 23px; color: var(--j-ink); font-size: clamp(36px, 4.5vw, 65px); font-weight: 650; line-height: 1.17; letter-spacing: -.045em; text-wrap: balance; }
#journey .j-title em { color: var(--j-accent); font-style: normal; }
.j-body { max-width: 35em; color: #d1d9eb; font-size: 16px; line-height: 1.9; text-wrap: pretty; }
.j-body p + p { margin-top: 12px !important; }
.j-body strong { color: #f2f6ff; font-weight: 650; }
.j-note { max-width: 39em; margin-top: 18px !important; padding-left: 14px; border-left: 1px solid var(--j-accent); color: #b5c1d9; font-size: 13px; line-height: 1.75; }
.j-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; }
.j-links a, .j-small-link { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; color: var(--j-accent) !important; font-size: 14px !important; text-decoration: underline !important; text-decoration-color: color-mix(in srgb, var(--j-accent), transparent 65%) !important; text-underline-offset: 6px; }
.j-links a:hover, .j-small-link:hover { text-decoration-color: currentColor !important; }
.j-links svg, .j-small-link svg { width: 15px; height: 15px; }
.j-tail { width: min(1160px, 100%); min-height: 22px; margin: 22px auto 0; color: #9baac5; font-size: 11px; line-height: 1.65; letter-spacing: .025em; }
.j-visual { position: relative; min-width: 0; }
.j-visual > svg { width: 100%; height: auto; max-height: 470px; overflow: visible; }
.j-shot { position: relative; overflow: hidden; border: 1px solid rgba(211, 226, 255, .25); border-radius: 14px; background: #f5f6fa; box-shadow: 0 30px 90px #0007, 0 0 70px color-mix(in srgb, var(--j-accent), transparent 91%); transform: rotate(-1deg); }
.j-shot img { object-fit: contain; }
.j-shot-caption { padding: 11px 14px; border-top: 1px solid #cdd5e5; background: #eaf0fa; color: #354461; font-size: 11px; line-height: 1.65; }
.j-demo-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 15px; }
.j-demo-controls button { min-width: 44px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--j-line) !important; border-radius: 999px; background: rgba(22, 36, 62, .65); color: #d8e3f4; font-size: 13px !important; }
.j-demo-controls button[aria-pressed="true"], .j-demo-controls button:hover { border-color: var(--j-accent) !important; background: color-mix(in srgb, var(--j-accent), #152038 88%); color: var(--j-accent); }
.j-chip, .j-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--j-line); border-radius: 999px; color: var(--j-accent); font-size: 11px; line-height: 1.4; letter-spacing: .04em; }
.j-equation { margin-top: 16px; color: var(--j-accent); font-family: ui-monospace, Consolas, monospace; font-size: clamp(13px, 1.4vw, 19px); line-height: 1.8; overflow-wrap: anywhere; }
.j-large-number { color: var(--j-accent); font-size: clamp(56px, 9vw, 124px); font-weight: 350; line-height: 1; letter-spacing: -.07em; }

/* A persistent light field links the scenes; their palettes change the atmosphere. */
.j-cosmos { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 81% 32%, #192549 0, transparent 57%), linear-gradient(130deg, #0b1126, #080c1c 65%); }
.j-cosmos::before { position: absolute; inset: 0; opacity: .45; background-image: radial-gradient(circle, #e1edff 0 1px, transparent 1.5px), radial-gradient(circle, #c1ddff 0 .7px, transparent 1.3px); background-position: 16px 25px, 74px 67px; background-size: 127px 137px, 181px 193px; content: ""; }
.j-nebula { position: absolute; top: -25%; right: -12%; width: 85vw; height: 110%; opacity: .4; filter: blur(75px); background: radial-gradient(ellipse at 55% 45%, color-mix(in srgb, var(--j-accent), transparent 15%), transparent 54%), radial-gradient(ellipse at 35% 80%, var(--j-soft), transparent 45%); transform: rotate(-27deg); animation: j-drift 22s ease-in-out infinite alternate; transition: background 1s; }
.j-constellation { position: absolute; inset: 20% 5% 12% 40%; opacity: .15; border: 1px solid var(--j-accent); border-radius: 50%; transform: rotate(-26deg) scaleY(.57); }
.j-constellation::after { position: absolute; inset: -25%; border: 1px solid var(--j-accent); border-radius: 50%; content: ""; }
.j-welcome .j-title { font-size: clamp(44px, 5.6vw, 82px) !important; }
.j-orbital { position: relative; width: 100%; aspect-ratio: 1; max-height: 440px; border: 1px solid #b5dce126; border-radius: 50%; background: radial-gradient(circle at 47% 47%, #dbfff7 0 1%, #a7f7dfb0 2%, #71cecf3c 12%, #376e9029 27%, transparent 53%); box-shadow: inset 0 0 90px #a7f7df08; }
.j-orbital::before { position: absolute; inset: 15% -10%; border: 1px solid #b8e9e780; border-radius: 50%; box-shadow: 0 0 18px #a7f7df12, inset 0 0 15px #a7f7df12; transform: rotate(-28deg) scaleY(.52); content: ""; }
.j-orbital::after { position: absolute; top: 25%; right: 8%; width: 9px; height: 9px; border-radius: 50%; background: #e8fff7; box-shadow: 0 0 30px 6px #b8fbe49c; content: ""; }
.j-orbital svg { position: relative; width: 100%; height: 100%; }
.j-last .j-layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.j-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
#journey .j-choice { display: grid; min-width: 0; min-height: 142px; align-content: start; gap: 8px; padding: 22px; border: 1px solid var(--j-line); border-radius: 13px; background: linear-gradient(145deg, #d9eaff0b, #d9eaff03); transition: background .2s, border-color .2s, transform .2s; }
#journey .j-choice:hover { border-color: var(--j-accent); background: #c3e5ff12; transform: translateY(-3px); }
.j-choice svg { width: 22px; height: 22px; margin-bottom: 4px; color: var(--j-accent); }
.j-choice strong { color: #f0f5ff; font-size: 17px; font-weight: 600; }
.j-choice span { color: #acbcd4; font-size: 12px; line-height: 1.65; }

/* This is a real grid row, never a fixed layer over the reading surface. */
.j-bottom { position: relative; display: flex; min-width: 0; min-height: 87px; align-items: center; gap: 18px; margin: 0 3.6vw; padding: 14px 0 12px; border-top: 1px solid var(--j-line); background: #0a1023ba; }
.j-progress { position: absolute; top: -1px; left: 0; width: 100%; height: 2px; overflow: hidden; background: transparent; }
.j-progress i { display: block; width: 0; height: 100%; background: var(--j-accent); box-shadow: 0 0 12px var(--j-accent); transition: width .4s ease; }
.j-index { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.j-index strong { color: var(--j-accent); font-size: 22px; font-weight: 450; }
.j-index span { color: #8392af; font-size: 12px; }
.j-page-name { min-width: 0; max-width: 27%; overflow: hidden; color: #c2cee4; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.j-dots { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.j-dots button { position: relative; width: 27px; height: 44px; padding: 0; background: transparent; }
.j-dots button::before { position: absolute; top: 19px; left: 10px; width: 6px; height: 6px; border: 1px solid #a1b1ce99; border-radius: 50%; content: ""; transition: background .2s, transform .2s; }
.j-dots button[aria-current="step"]::before { border-color: var(--j-accent); background: var(--j-accent); box-shadow: 0 0 10px #cfffe455; transform: scale(1.35); }
.j-dots button:hover::before { background: #d0ddf5; }
.j-arrows { display: flex; flex-shrink: 0; gap: 8px; }
.j-arrows button { display: grid; width: 46px; height: 46px; padding: 12px; border: 1px solid var(--j-line) !important; border-radius: 50%; background: #c8ddff08; place-items: center; transition: background .2s; }
.j-arrows button:hover:not(:disabled) { background: #c8ddff20; }
.j-arrows svg { width: 18px; height: 18px; }
.j-scroll-hint { max-width: 15em; color: #9baccc; font-size: 11px; line-height: 1.5; }
.j-replay { display: inline-flex; min-height: 44px; align-items: center; gap: 7px; padding: 0; border: 0; background: transparent; color: var(--link); font: inherit; font-size: 14px; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px; cursor: pointer; }
.j-replay:hover { color: var(--link-hover); }
.j-replay svg { width: 15px; height: 15px; }

@keyframes j-arrive { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: translateY(0); } }
@keyframes j-drift { from { transform: rotate(-27deg) translate3d(0, 0, 0) scale(1); } to { transform: rotate(-23deg) translate3d(-3%, 4%, 0) scale(1.07); } }

@media (max-height: 700px) and (min-width: 761px) {
  .j-top { min-height: 64px; }
  .j-bottom { min-height: 74px; }
  .j-scene { padding-block: 24px 17px; }
  #journey .j-title { margin-bottom: 16px; font-size: clamp(35px, 3.8vw, 53px); }
  .j-welcome .j-title { font-size: clamp(43px, 5vw, 65px) !important; }
  .j-visual > svg { max-height: 335px; }
  .j-orbital { max-height: 330px; aspect-ratio: 1.2; }
  .j-shot { max-width: 485px; margin-inline: auto; }
  .j-body { font-size: 15px; line-height: 1.8; }
  .j-tail { margin-top: 16px; }
}
@media (max-width: 1050px) {
  .j-layout { gap: 32px; }
  .j-top-note { display: none; }
  .j-scroll-hint { display: none; }
  .j-bottom { gap: 13px; }
  .j-choice { padding: 17px !important; }
}
@media (max-width: 760px) {
  .j-top { min-height: 65px; gap: 10px; margin-inline: 18px; }
  .j-brand { gap: 8px; font-size: 13px; }
  .j-brand svg { width: 20px; height: 20px; }
  .j-tools { gap: 0; }
  .j-tools button, .j-tools a { padding-inline: 9px; font-size: 11px; }
  .j-tools #jSkip { padding-inline: 12px; }
  .j-scene { justify-content: flex-start; padding: 30px 24px 20px; }
  .j-layout, .j-last .j-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-block: 0; }
  .j-copy { order: 0; }
  .j-visual, .j-choices { order: 1; }
  .j-kicker { margin-bottom: 10px; font-size: 11px; }
  .j-date { margin-bottom: 10px; font-size: 12px; }
  #journey .j-title { max-width: 12em; margin-bottom: 18px; font-size: clamp(33px, 8.6vw, 48px); line-height: 1.2; letter-spacing: -.04em; }
  .j-welcome .j-title { font-size: clamp(40px, 10.6vw, 57px) !important; }
  .j-body { font-size: 15px; line-height: 1.85; }
  .j-note { margin-top: 15px !important; font-size: 12px; }
  .j-links { margin-top: 13px; }
  .j-visual { width: min(100%, 500px); margin-inline: auto; }
  .j-visual > svg { max-height: 340px; }
  .j-orbital { width: 85%; max-height: 300px; margin-inline: auto; }
  .j-shot { transform: none; border-radius: 10px; }
  .j-tail { margin-top: 20px; font-size: 11px; }
  .j-choices { gap: 10px; }
  #journey .j-choice { min-height: 133px; padding: 16px !important; }
  .j-choice strong { font-size: 15px; }
  .j-choice span { font-size: 11px; }
  .j-bottom { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 13px; min-height: 87px; margin-inline: 18px; padding-block: 10px 9px; }
  .j-index { grid-column: 1; grid-row: 1; }
  .j-index strong { font-size: 20px; }
  .j-page-name { grid-column: 2; grid-row: 1; max-width: none; font-size: 11px; }
  .j-dots { grid-column: 1 / 3; grid-row: 2; justify-content: flex-start; margin: -5px 0 -8px -5px; }
  .j-dots button { width: 24px; height: 32px; }
  .j-dots button::before { top: 13px; left: 10px; width: 5px; height: 5px; }
  .j-arrows { grid-column: 3; grid-row: 1 / 3; align-self: center; gap: 7px; }
  .j-arrows button { width: 44px; height: 44px; }
  .j-nebula { top: -5%; right: -90%; width: 180vw; opacity: .33; }
  .j-constellation { inset: 25% -50% 8% 15%; }
}
@media (max-width: 360px) {
  .j-top { margin-inline: 12px; gap: 5px; }
  .j-brand { gap: 5px; font-size: 12px; }
  .j-brand svg { width: 17px; height: 17px; }
  .j-tools button, .j-tools a { min-width: 40px; padding-inline: 7px; }
  .j-tools #jSkip { padding-inline: 9px; }
  .j-scene { padding-inline: 19px; padding-top: 25px; }
  .j-bottom { margin-inline: 12px; gap: 0 8px; }
  .j-dots { gap: 0; }
  .j-dots button { width: 19px; }
  .j-dots button::before { left: 7px; }
  .j-arrows { gap: 5px; }
  #journey .j-title { font-size: 32px; }
}
@media (max-height: 450px) and (min-width: 600px) {
  .j-top { min-height: 56px; }
  .j-bottom { min-height: 65px; padding-block: 8px; }
  .j-scene { min-height: 100%; padding-top: 20px; }
  .j-layout, .j-last .j-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }
  #journey .j-title { font-size: 34px; }
  .j-welcome .j-title { font-size: 42px !important; }
  .j-visual > svg { max-height: 280px; }
  .j-orbital { max-height: 250px; }
  .j-body { font-size: 14px; }
  .j-tail { margin-top: 15px; }
}
#journey[data-quiet="true"] *, #journey[data-quiet="true"] *::before, #journey[data-quiet="true"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  #journey *, #journey *::before, #journey *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

#journey{--journey-ready:1}#journey .j-title span{color:var(--j-accent)}#journey .j-kicker{margin-bottom:16px}#journey .j-date{margin-bottom:16px}#journey .j-tools button,#journey .j-tools a{font-size:12px}#journey .j-top-note{font-size:12px}#journey .j-tail{display:flex;justify-content:space-between;align-items:center;gap:20px}#journey .j-tail .j-links{margin-top:0;flex-shrink:0}#journey .j-primary{display:inline-flex;align-items:center;justify-content:center;min-height:50px;margin-top:25px;padding:12px 23px;border-radius:30px;background:#ebf2f5;color:#152132;font-size:14px;border:1px solid #e6eaf477;box-shadow:0 0 35px #d7d4f31c}#journey .j-primary:hover{background:#fff}#journey .j-chip-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}#journey .j-demo-result{font-size:12px;line-height:1.85;color:#bcc9df;text-align:center;min-height:45px;margin-top:14px}#journey .j-data-route{display:flex;justify-content:center;gap:19px;align-items:center;margin-top:19px;color:#9badc1;font:12px Consolas,monospace}#journey .j-data-route span{border:1px solid #a9dcce44;padding:7px 12px;border-radius:4px}#journey .j-data-route i{font-style:normal}#journey .j-data-route .j-route-active{background:#a4e8ce22;color:#ccffe6;border-color:#b4edd2}#journey .j-game-window{border:1px solid #d4d5f344;border-radius:15px;background:#151a35bd;box-shadow:0 35px 100px #08091788;overflow:hidden}#journey .j-window-top{display:flex;align-items:center;gap:6px;border-bottom:1px solid #ddd4f329;padding:18px 22px;font:10px Consolas,monospace;color:#c7b9dd;letter-spacing:.07em}#journey .j-window-top i{height:5px;width:5px;border-radius:50%;background:#c5a9d5}#journey .j-window-top span{margin-left:12px}#journey .j-mini-board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(280px,80%);margin:32px auto 22px}#journey .j-mini-board>span,#journey .j-mini-board button{display:grid;place-items:center;aspect-ratio:1;border:1px solid #cecee64d;border-radius:9px;background:#232a4b;color:#bdeadd;font:26px Consolas,monospace}#journey .j-mini-board button{color:#f6debb;background:#73609055;box-shadow:0 0 30px #b58ad944}#journey .j-mini-board button[aria-pressed=true]{background:#c7a4c944;transform:rotate(-3deg)}#journey .j-game-window .j-demo-result{padding:0 24px 22px}#journey .j-learning-stack{display:grid;gap:14px;transform:rotate(-2deg)}#journey .j-learning-card{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:7px 18px;padding:23px 26px;border:1px solid #f4d0a53d;background:linear-gradient(110deg,#684d3f44,#27304744);border-radius:8px;box-shadow:0 17px 60px #0002}#journey .j-learning-card:nth-child(2){margin-left:25px}#journey .j-learning-card:nth-child(3){margin-left:50px}#journey .j-file-mark{grid-row:1/3;font:22px Consolas,monospace;color:#f0cb9c}#journey .j-learning-card strong{font-size:16px;font-weight:500;color:#f6e9d7}#journey .j-learning-card p{font-size:12px;color:#c9b7b0}#journey .j-choice-number{font:11px Consolas,monospace}#journey .j-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.journey-active{overflow:hidden}
@media(max-width:760px){#journey .j-tail{display:block}#journey .j-tail .j-links{margin-top:10px}#journey .j-tools button,#journey .j-tools a{font-size:11px}#journey .j-primary{margin-top:20px}#journey .j-kicker{margin-bottom:12px}#journey .j-date{margin-bottom:13px}#journey .j-learning-card{padding:19px 17px;gap:6px 12px;grid-template-columns:32px 1fr}#journey .j-learning-card:nth-child(2){margin-left:12px}#journey .j-learning-card:nth-child(3){margin-left:24px}}
@media(max-width:480px){#journey .j-dots{display:none}#journey .j-bottom{min-height:74px}#journey .j-arrows{grid-row:1}#journey .j-tools #jSkip{max-width:120px}}
.j-replay[hidden]{display:none!important}
#journey .j-title{font-size:clamp(36px,4.05vw,58px)}#journey .j-archive-shot{margin-top:20px;border-top:1px solid #c7dfed33}#journey .j-archive-shot summary{cursor:pointer;min-height:44px;padding:12px 0;color:var(--j-accent);font-size:12px}#journey .j-archive-shot .j-shot{transform:none;margin-top:10px}#journey .j-image-failed{min-height:160px;display:grid;place-items:center;background:#1a2848}#journey .j-image-failed .j-shot-caption{color:#d1e5f5;background:transparent;border:0}#journey .j-image-failed img{display:none}
@media(max-width:760px){#journey .j-title{font-size:clamp(33px,8.6vw,48px)}}