/* The homepage's Undo section (#versions-fx, /home-versions.js): one
 * paragraph on the Sepia page (the .pm kit, /home-page.css), and the
 * paragraph's versions map docked under it from the first frame — a branch
 * map like the app's Versions (src/lib/ui/versions-modal).
 */
.vs { position: relative; width: 100%; max-width: 520px; margin: 0 auto; }
.vs-page .pm-para { margin-bottom: 0; }
.vs-page .pm-text { transition: opacity 0.35s, filter 0.35s; }
.vs-page .pm-text.is-swap { opacity: 0; filter: blur(5px); }
.vs-page .pm-text.is-back { animation: vs-back 1.2s ease-out; }
@keyframes vs-back { from { background: rgba(167, 139, 250, 0.22); box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.22); } }
.vs-page .pm-text { border-radius: 4px; }
/* Undo and Versions on the margin: the app's icons, violet once there. */
.vs-page .pm-btn.is-new { animation: vs-pop 0.5s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes vs-pop { from { transform: scale(0.4); opacity: 0; } }

/* The Versions map, docked under the paragraph from the first frame. */
.vs-panel {
  margin-top: 16px;
  padding: 12px 14px 8px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--pm-face);
  box-shadow: inset 0 1px 0 #fffaf0, 0 12px 26px -18px rgba(60, 40, 20, 0.5);
}
.vs-head { display: flex; align-items: center; gap: 8px; }
.vs-head svg { width: 15px; height: 15px; fill: none; stroke: var(--spark-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vs-head b { font-size: calc(12.5px / var(--tz, 1)); font-weight: 700; color: var(--fg-2); }
.vs-node em { font-style: normal; font-size: calc(9px / var(--tz, 1)); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); margin-left: 2px; }
.vs-map { position: relative; height: 128px; margin: 6px 10px 0; }
.vs-map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vs-line { fill: none; stroke: rgba(80, 60, 30, 0.28); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.vs-node {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 5px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fffaf0;
  box-shadow: 0 6px 14px -10px rgba(60, 40, 20, 0.6);
  white-space: nowrap;
  transition: background 0.3s, border-color 0.3s, transform 0.2s;
}
.vs-node i { width: 9px; height: 9px; border-radius: 50%; background: rgba(80, 60, 30, 0.3); transition: background 0.3s, box-shadow 0.3s; }
.vs-node b { font-size: calc(11.5px / var(--tz, 1)); font-weight: 600; color: var(--fg-2); }
.vs-node.current { border-color: var(--accent-border); background: #fde9f1; }
.vs-node.current i { background: var(--accent); box-shadow: 0 0 0 3px rgba(240, 106, 155, 0.22); }
.vs-node.current b { color: var(--accent-text); }
.vs-node.picked { border-color: rgba(106, 63, 196, 0.45); background: #efe8fb; }
.vs-node.picked i { background: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22); }
.vs-node.picked b { color: var(--spark-text); }
.vs-node.is-press { transform: translate(-50%, -50%) scale(0.92); }

@media (max-width: 720px) {
  .vs-panel { padding: 10px 8px 6px; }
  .vs-node b { font-size: calc(10.5px / var(--tz, 1)); }
  .vs-node { padding: 2px 8px 2px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .vs-page .pm-text { transition: none; }
}