/* Small reading scenes; all motion is a finite response to an explicit choice. */
.rs-scene {
  --rs-bg: #0a0f1e;
  --rs-blue: #5b8cff;
  --rs-blue-ink: #abc2ff;
  --rs-human: #f2d9a2;
  --rs-world: #7dd4c2;
  --rs-ink: #dce5f7;
  --rs-muted: #9eacc7;
  --rs-line: rgba(161, 184, 225, .19);
  margin: 30px 0 38px;
  border: 1px solid var(--rs-line);
  border-radius: 13px;
  background: radial-gradient(ellipse at 50% 12%, rgba(55, 84, 142, .13), transparent 75%), var(--rs-bg);
  color: var(--rs-ink);
  font-family: var(--font, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  isolation: isolate;
  scroll-margin-top: 100px;
}
.rs-scene *, .rs-scene *::before, .rs-scene *::after { box-sizing: border-box; }
.rs-panel { padding: 16px 20px 11px; }
.rs-scene .rs-heading { margin: 0; font-family: var(--serif, "Songti SC", serif); font-size: 18px; font-weight: 400; line-height: 1.4; color: var(--rs-human); }
.rs-visual { position: relative; height: 86px; margin: 8px 0 4px; user-select: none; }
.rs-visual svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rs-route { fill: none; stroke: var(--rs-blue); stroke-width: 1.6; vector-effect: non-scaling-stroke; opacity: .25; }
.rs-node { fill: var(--rs-blue); stroke: none; }
.rs-node--human { fill: var(--rs-human); }
.rs-ring { fill: none; stroke: var(--rs-human); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; }
.rs-label { position: absolute; display: block; font-size: 11px; line-height: 1.4; letter-spacing: 0; color: var(--rs-muted); text-align: center; }
.rs-label--left { left: 1%; bottom: 0; width: 26%; color: var(--rs-human); }
.rs-label--right { right: 1%; bottom: 0; width: 26%; color: var(--rs-blue-ink); }
.rs-label--center { left: 30%; bottom: 7%; width: 40%; }
.rs-label--top { top: 0; bottom: auto; }
.rs-label--bottom { left: 25%; bottom: -2%; width: 50%; color: var(--rs-world); }
.rs-scene .rs-text { min-height: 42px; margin: 0; font-size: 13px; line-height: 1.6; color: var(--rs-ink); }
.rs-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 8px; }
.rs-controls[hidden] { display: none; }
.rs-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--rs-line);
  border-radius: 24px;
  background: rgba(20, 34, 59, .25);
  color: var(--rs-ink);
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rs-controls button[aria-pressed="true"] { border-color: rgba(171, 194, 255, .65); background: rgba(91, 140, 255, .13); color: #cad9ff; }
.rs-controls button:hover { border-color: var(--rs-blue-ink); }
.rs-scene :is(button, summary):focus-visible { outline: 2px solid var(--rs-human); outline-offset: 4px; }
.rs-reading { margin: 0 20px; border-top: 1px solid rgba(161, 184, 225, .1); }
.rs-reading > summary { width: fit-content; min-height: 34px; padding: 7px 0 8px; color: var(--rs-muted); font-size: 11px; line-height: 1.6; cursor: pointer; }
.rs-reading-body { padding: 0 0 16px; }
.rs-reading-body article { margin: 0; padding: 13px 0; border-top: 1px solid rgba(161, 184, 225, .1); }
.rs-reading-body article:first-child { border: 0; }
.rs-scene .rs-reading-body h5 { margin: 0 0 5px; color: var(--rs-human); font-family: var(--serif, "Songti SC", serif); font-size: 14px; font-weight: 400; line-height: 1.6; }
.rs-scene .rs-reading-body p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--rs-ink); }

/* Question: two trajectories can become a question neither began with. */
.rs-question-human { stroke: var(--rs-human); }
.rs-question-meet { fill: var(--rs-world); opacity: .35; }
.rs-question-next { stroke: var(--rs-world); opacity: 0; stroke-dasharray: 3 5; }
.rs-scene--question[data-rs-state="human"] .rs-question-human,
.rs-scene--question[data-rs-state="ai"] .rs-question-ai,
.rs-scene--question[data-rs-state="joint"] :is(.rs-question-human, .rs-question-ai, .rs-question-meet, .rs-question-next, .rs-question-ring) { opacity: 1; }
.rs-scene--question[data-rs-state="joint"] .rs-label--center { color: var(--rs-world); }

/* World: new information replaces a premature direct connection. */
.rs-world-old { stroke: var(--rs-human); stroke-dasharray: 4 5; opacity: .75; }
.rs-world-new { stroke: var(--rs-world); opacity: 0; }
.rs-world-info { fill: var(--rs-world); opacity: .2; }
.rs-world-question { fill: none; stroke: var(--rs-human); stroke-width: 1.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rs-scene--world[data-rs-state="new"] .rs-world-old { opacity: .12; }
.rs-scene--world[data-rs-state="new"] :is(.rs-world-new, .rs-world-info) { opacity: 1; }
.rs-scene--world[data-rs-state="new"] .rs-world-question { opacity: 0; }
.rs-scene--world .rs-label--bottom { bottom: -7%; }

/* Agency: all three choices start from the same visible human position. */
.rs-agency-pause { stroke: var(--rs-human); opacity: .12; }
.rs-agency-continue, .rs-agency-change { stroke: var(--rs-human); opacity: .2; }
.rs-agency-arrow { fill: none; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.rs-agency-stop { fill: none; stroke: var(--rs-human); stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: 0; }
.rs-agency-label { bottom: 9%; }
.rs-agency-forward { right: 2%; top: -3%; width: 22%; }
.rs-agency-turn { right: 2%; bottom: -3%; width: 22%; }
.rs-scene--agency .rs-label--center { bottom: 0; }
.rs-scene--agency[data-rs-state="continue"] .rs-agency-continue,
.rs-scene--agency[data-rs-state="change"] .rs-agency-change,
.rs-scene--agency[data-rs-state="pause"] :is(.rs-agency-pause, .rs-agency-stop, .rs-agency-rest) { opacity: 1; }
.rs-scene--agency[data-rs-state="continue"] .rs-agency-forward,
.rs-scene--agency[data-rs-state="change"] .rs-agency-turn,
.rs-scene--agency[data-rs-state="pause"] .rs-label--center { color: var(--rs-human); }

/* Memory: keep an older trace while adding a correction and a changed relation. */
.rs-memory-old { stroke: var(--rs-blue-ink); opacity: .7; }
.rs-memory-record { fill: var(--rs-blue-ink); opacity: .7; }
.rs-memory-current { stroke: var(--rs-world); opacity: .12; }
.rs-memory-revision { fill: var(--rs-world); opacity: .15; }
.rs-memory-ring { stroke: var(--rs-world); }
.rs-scene--memory .rs-label--left, .rs-scene--memory .rs-label--right { bottom: 16%; }
.rs-scene--memory .rs-label--center { bottom: -8%; }
.rs-scene--memory[data-rs-state="after"] :is(.rs-memory-current, .rs-memory-revision, .rs-memory-ring) { opacity: 1; }
.rs-scene--memory[data-rs-state="after"] :is(.rs-memory-old, .rs-memory-record) { opacity: .23; }
.rs-scene--memory[data-rs-state="after"] .rs-memory-old { stroke-dasharray: 3 5; }
.rs-scene--memory[data-rs-state="after"] .rs-label--center { color: var(--rs-world); }

.rs-scene[data-rs-motion="on"] :is(.rs-route, .rs-node, .rs-ring, .rs-world-question, .rs-agency-arrow, .rs-agency-stop, .rs-label) { transition: opacity 460ms ease, color 360ms ease; }
.rs-scene[data-rs-motion="off"] *, html[data-reading="static"] .rs-scene * { animation: none !important; transition: none !important; }
@media (max-width: 480px) {
  .rs-panel { padding: 14px 12px 10px; }
  .rs-scene .rs-heading { font-size: 16px; }
  .rs-visual { height: 76px; margin-top: 7px; margin-bottom: 8px; }
  .rs-scene .rs-text { min-height: 63px; font-size: 12px; line-height: 1.75; }
  .rs-controls { gap: 5px; margin-top: 7px; }
  .rs-controls button { padding: 8px 9px; min-height: 40px; font-size: 11px; }
  .rs-reading { margin-inline: 12px; }
  .rs-label { font-size: 10px; }
  .rs-label--left, .rs-label--right { width: 30%; }
  .rs-label--left { left: -2%; }
  .rs-label--right { right: -2%; }
  .rs-scene--world .rs-label--bottom { width: 62%; left: 19%; }
  .rs-scene--agency .rs-label--center { left: 26%; width: 48%; bottom: -5%; }
  .rs-scene--memory .rs-label--center { width: 54%; left: 23%; }
}
@media (prefers-reduced-motion: reduce) { .rs-scene *, .rs-scene *::before, .rs-scene *::after { animation: none !important; transition: none !important; } }

/* Specific source material stays visible while the reader changes the resulting sentence. */
.rs-targeted .rs-task { margin: 6px 0 0; color: var(--rs-muted); font-size: 11px; line-height: 1.65; }
.rs-targeted .rs-task a { color: var(--rs-blue-ink); text-underline-offset: 3px; }
.rs-targeted .rs-task q { color: #c7d3ea; }
.rs-targeted .rs-visual { height: 58px; padding-bottom: 18px; margin: 6px 0; }
.rs-targeted .rs-visual svg { height: 100%; }
.rs-targeted .rs-label { top: auto; bottom: 0; font-size: 10px; }
.rs-targeted .rs-label--left { left: 0; width: 28%; }
.rs-targeted .rs-label--right { right: 0; width: 28%; }
.rs-targeted .rs-label--center { left: 29%; bottom: 0; width: 42%; }
.rs-targeted .rs-world-old { stroke-dasharray: none; }
.rs-targeted .rs-text { padding: 7px 10px; min-height: 56px; border-left: 2px solid rgba(125, 212, 194, .48); background: rgba(43, 79, 90, .09); font-size: 12px; line-height: 1.7; }
@media (max-width: 480px) {
  .rs-targeted .rs-visual { height: 46px; padding-bottom: 17px; margin-top: 5px; margin-bottom: 5px; }
  .rs-targeted .rs-text { min-height: 70px; padding: 5px 7px; font-size: 12px; line-height: 1.65; }
  .rs-targeted .rs-task { margin-top: 5px; }
  .rs-targeted .rs-label--left, .rs-targeted .rs-label--right { width: 28%; }
  .rs-targeted .rs-label--center { left: 28%; width: 44%; }
}