/* Skin: paper, moss, clay, and soft shapes. */
:root { color-scheme: light; --paper: #f5f1e8; --ink: #283d32; --moss: #304b38; --clay: #915033; --muted: #536050; --line: #b3b6a3; --leaf: #dfe5d4; --sand: #e8decb; }
html { background: var(--paper); color: var(--ink); }
body { background: var(--paper); }
::selection { background: #d6dcb7; color: var(--ink); }
a { color: var(--moss); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--clay); }
:focus-visible { outline: 3px solid var(--clay); outline-offset: 5px; }
main:focus { outline: none; }
.mast { border-bottom: 1px solid var(--line); }
.mark span, .cap { color: var(--muted); }
.accent { color: var(--clay); }
.sec { border-top: 1px solid var(--line); }
.skip { color: var(--paper); background: var(--moss); border-radius: .5rem; }
.skip:hover { color: var(--paper); background: #253c2d; }
.map { background: var(--sand); border-radius: 8rem 8rem 1rem 1rem; }
.seed { background: var(--moss); color: var(--paper); border: 1px solid var(--moss); border-radius: 47% 53% 43% 57% / 51% 43% 57% 49%; box-shadow: 0 0 0 9px var(--sand), 0 0 0 10px #87927b; }
.fork::before, .leaf:nth-child(2)::before { border-left: 1px solid #5b6b52; }
.fork::after { border: 1px solid #5b6b52; border-bottom: 0; border-radius: 1.5rem 1.5rem 0 0; }
.leaf { background: var(--paper); border: 1px solid #bac2ae; border-radius: 2.4rem .55rem 2.4rem .55rem; }
.leaf:nth-child(2) { background: var(--leaf); border-radius: 2.2rem 2.2rem .55rem .55rem; }
.map figcaption { color: var(--muted); }
.sum { border-radius: 3rem .75rem 3rem .75rem; background: var(--leaf); }
.sr + .sr { border-top: 1px solid #aab59c; }
.orb { background: var(--clay); border-radius: 42% 58% 56% 44%; }
.plus { color: var(--clay); }
.trail { background: var(--sand); border-radius: .75rem 4rem .75rem 4rem; }
.dot { border: 2px solid var(--moss); border-radius: 50%; background: var(--paper); }
.tn:nth-child(2) .dot { background: var(--clay); border-color: var(--clay); }
.tn:not(:nth-child(3))::after { border-left: 1px solid #697b61; }
.myth { background: var(--leaf); border: 1px solid #b5bea8; border-radius: .5rem 2rem .5rem 2rem; }
.myth:nth-child(2) { background: var(--sand); border-color: #c5b99f; }
.reveal { background: var(--moss); color: var(--paper); border: 1px solid var(--moss); border-radius: 2rem; }
.reveal:hover { background: #253c2d; }
.reveal:focus-visible { outline-offset: 4px; }
.next { border: 1px solid #9ba68c; background: var(--leaf); border-radius: .75rem 2.75rem .75rem .75rem; text-decoration: none; }
.next:nth-child(2) { background: var(--sand); border-color: #b5a688; border-radius: .75rem .75rem .75rem 2.75rem; }
.next:hover { border-color: var(--clay); color: var(--clay); }
.foot { background: var(--moss); color: var(--paper); }
.foot .domain { color: #e0e5d2; }
.back { text-decoration-thickness: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .reveal, .next, .ref { transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media print {
  body, .foot { background: white; color: black; }
  .map, .myth, .next { background: white; }
  .foot .domain { color: black; }
}