:root { color-scheme: light; --ink: #292632; --quiet: #615d6a; --ground: #f4f4f6; --white: #ffffff; --lavender: #e5dff0; --link: #59416e; --soft: #ece9f0; }
body { color: var(--ink); background: var(--ground); }
body > header { border-bottom: 1px solid #d7d3dd; }
body > header p span, nav, main > header > p:first-child, .opening header > p:first-child { color: var(--quiet); }
a { color: var(--link); }
a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
button { color: var(--ink); background: var(--white); border: 1px solid #c6becd; border-radius: 99px; cursor: pointer; }
button:hover { background: var(--soft); }
button[aria-pressed="true"] { color: #fff; background: var(--link); border-color: var(--link); }
button:disabled { cursor: default; }
a:focus-visible, button:focus-visible, main:focus-visible { outline: 3px solid #6c4d87; outline-offset: 5px; }
main:focus:not(:focus-visible) { outline: none; }
.opening figure { background: var(--lavender); border-radius: 110px 110px 36px 36px; }
.opening img { color: var(--quiet); background: #ece8ec; border-radius: 90px 90px 26px 26px; }
.opening figcaption { color: #3f3150; background: #fff; border-radius: 26px 26px 26px 7px; box-shadow: 0 12px 32px #47334b0a; }
.start { color: #fff; background: var(--link); border-radius: 99px; }
.start:hover { color: #fff; background: #493358; }
.pathways a { color: var(--ink); background: var(--white); border-radius: 28px; transition: background-color .15s ease; }
.pathways li:nth-child(3n + 2) a { background: #e8e4ed; }
.pathways li:nth-child(3n) a { background: #e1e9e8; }
.pathways a:hover { background: #d8d0e2; text-decoration: none; }
.pathways a:hover strong { text-decoration: underline; text-underline-offset: .15em; }
.pathways span { color: #55505e; }
.pathways b { color: var(--link); }
.note { background: #e5eae7; border-radius: 30px 30px 30px 8px; }
.next { background: var(--lavender); border-radius: 30px; }
.next p { color: #544960; }
[data-word-help] { background: #fff; border: 1px dashed #a698b2; border-radius: 24px; }
[data-word-help] h2 { color: var(--link); }
.wide-photo img { color: var(--quiet); background: #e7e3ea; border-radius: 36px; }
.wide-photo figcaption, .sources li p { color: var(--quiet); }
.sources li + li { border-top: 1px solid #d7d3dd; }
body > footer { color: var(--quiet); border-top: 1px solid #d7d3dd; }
.skip { color: #fff; background: var(--link); border-radius: 16px; }
::selection { color: #24172b; background: #d6c7e6; }