/* Fonts are the app's own (Literata for writing, Instrument Sans for everything around it),
   served from here so visiting the site doesn't ping anyone else. */
@font-face {
  font-family: 'Literata';
  src: url(fonts/literata-latin-opsz-normal.woff2) format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url(fonts/literata-latin-opsz-italic.woff2) format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url(fonts/instrument-sans-latin-wght-normal.woff2) format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* The page is monochrome paper. Color only shows up where it means what it means in the app:
   blue for characters, amber for places, the five chapter statuses, and red for a listening microphone. */
:root {
  --paper: #ffffff;
  --ink: #1b1b1b;
  --ink-2: #3a3a39;
  --quiet: #6e6e6b;
  --faint: #b9b9b6;
  --rule: #e6e6e4;
  --surface: #f5f5f4;
  --edge: rgba(0, 0, 0, 0.08);
  --lift: 0 1px 2px rgba(0, 0, 0, 0.04), 0 32px 80px -36px rgba(0, 0, 0, 0.3);
  --character: #5b8cc9;
  --place: #c8902c;
  --s-idea: #b9b9b6;
  --s-progress: #d9a441;
  --s-drafted: #6c9bd2;
  --s-revised: #9c7fd0;
  --s-done: #5aa874;
  --rec: #c2453b;
  --serif: 'Literata', Georgia, serif;
  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #171717;
    --ink: #ebebe9;
    --ink-2: #c4c4c1;
    --quiet: #9a9a97;
    --faint: #5b5b59;
    --rule: #2c2c2b;
    --surface: #1f1f1e;
    --edge: rgba(255, 255, 255, 0.09);
    --lift: 0 32px 80px -36px rgba(0, 0, 0, 0.85);
    --character: #6c9bd2;
    --place: #d9a441;
    --rec: #e0685e;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font: 400 19px/1.68 var(--serif);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
a:hover {
  text-decoration-color: currentColor;
}
button {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  max-width: 1184px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- top ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.top.stuck {
  border-bottom-color: var(--rule);
}
.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.36em;
  font-family: var(--sans);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark b {
  font-weight: 650;
}
.wordmark i {
  font-family: var(--serif);
  font-weight: 450;
  letter-spacing: -0.01em;
}
.wordmark svg {
  width: 0.95em;
  height: 0.95em;
}
.top nav {
  display: flex;
  align-items: center;
  gap: 22px;
}
.top nav a:not(.mini) {
  font: 500 15px var(--sans);
  color: var(--quiet);
  text-decoration: none;
}
.top nav a:not(.mini):hover {
  color: var(--ink);
}
/* The small download button only shows once the big one has scrolled away. */
.mini {
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font: 600 14px/1.2 var(--sans);
  text-decoration: none;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s var(--ease);
}
.top.stuck .mini {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ---------- hero ---------- */

/* The words line up with the rest of the page; the editor takes the remaining width and, on wide
   screens, runs a little past the page's right edge. */
.hero {
  display: grid;
  grid-template-columns: clamp(350px, 32vw, 470px) minmax(0, 1fr);
  column-gap: clamp(48px, 5vw, 80px);
  align-items: center;
  padding: clamp(32px, 6vh, 80px) max(32px, calc((100% - 1120px) / 2 - 96px)) 0 max(32px, calc((100% - 1120px) / 2));
}
h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 360;
  font-size: clamp(40px, 3.9vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--ink);
  text-wrap: balance;
}
.lede {
  max-width: 28em;
  margin: 28px 0 0;
  font-size: 20px;
  line-height: 1.6;
}
.hero .download {
  margin-top: 36px;
}

/* ---------- download ---------- */

.download {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--quiet);
}
.button {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font: 600 16px/1.2 var(--sans);
  letter-spacing: -0.005em;
  text-decoration: none;
}
.button:hover {
  opacity: 0.86;
}
.download p {
  margin: 14px 0 0;
}
.download .others a {
  color: var(--ink-2);
}
.first-run {
  margin-top: 10px;
  max-width: 34em;
}
.first-run summary {
  cursor: pointer;
  width: fit-content;
}
.first-run summary:hover {
  color: var(--ink);
}
.first-run p {
  margin: 8px 0 0;
  color: var(--ink-2);
}

/* ---------- the live editor ---------- */

.demo {
  min-width: 0;
  margin: 0;
}
.win {
  border-radius: 14px;
  background: var(--paper);
  box-shadow:
    0 0 0 1px var(--edge),
    var(--lift);
  overflow: hidden;
  font-family: var(--sans);
}
.win:has(textarea:focus-visible) {
  box-shadow:
    0 0 0 2px var(--ink),
    var(--lift);
}
.win-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 42px;
  padding: 0 16px;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  color: var(--quiet);
}
.lights {
  display: flex;
  gap: 8px;
}
.lights i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.14);
}
.lights i:nth-child(1) {
  background: #ff5f57;
}
.lights i:nth-child(2) {
  background: #febc2e;
}
.lights i:nth-child(3) {
  background: #28c840;
}
.crumbs {
  display: flex;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
}
.crumbs span + span::before {
  content: '›';
  margin-right: 10px;
  color: var(--faint);
}
.crumbs span:last-child {
  color: var(--ink);
}
.saved {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
/* The window keeps one size: the page scrolls inside it, the way it does in the app. */
.win-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  height: 412px;
}
.page {
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 28px clamp(22px, 2.6vw, 40px) 20px;
}
.kicker {
  font-size: 13px;
  color: var(--quiet);
}
.ch-title {
  margin: 0 0 14px;
  font: 650 clamp(24px, 2vw, 29px) / 1.08 var(--sans);
  letter-spacing: -0.035em;
  color: var(--ink);
}
/* The page is a plain textarea. Behind it, a copy of the same text in clear ink carries the
   gray name suggestion and, while the demo types, a caret. */
.editor {
  position: relative;
  max-width: 34em;
  font: 400 15.5px/1.7 var(--serif);
  color: var(--ink-2);
}
.editor textarea,
.shadow {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.shadow {
  color: transparent;
  pointer-events: none;
}
.editor textarea {
  position: absolute;
  inset: 0;
  z-index: 1;
  height: 100%;
  resize: none;
  overflow: hidden;
  background: transparent;
  color: inherit;
  caret-color: var(--ink);
  outline: none;
}
.shadow .ghost {
  color: var(--faint);
}
.shadow kbd {
  display: inline-block;
  margin-left: 0.6em;
  padding: 0 7px;
  border-radius: 5px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule);
  font: 500 11.5px/1.75 var(--sans);
  color: var(--quiet);
  vertical-align: 0.2em;
  transition:
    transform 0.12s,
    background 0.12s;
}
.shadow kbd.down {
  transform: translateY(1px) scale(0.94);
  background: var(--rule);
  color: var(--ink);
}
.shadow .caret {
  display: inline-block;
  width: 2px;
  height: 1.15em;
  margin-right: -2px;
  vertical-align: -0.22em;
  background: var(--ink);
}
.editor.idle .shadow .caret {
  animation: blink 1.05s steps(1) infinite;
}
.editor.live .shadow .caret {
  display: none;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}

.panel {
  overflow: hidden;
  padding: 6px 22px 24px;
  border-left: 1px solid var(--rule);
}
.tabs {
  display: flex;
  gap: 18px;
  height: 40px;
  align-items: center;
  font-size: 13.5px;
  color: var(--quiet);
}
.tabs .on {
  color: var(--ink);
  box-shadow: 0 13px 0 -11px var(--ink);
}
.panel-label {
  margin: 14px 0 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--quiet);
}
.itc {
  margin: 0;
  padding: 0;
  list-style: none;
}
.itc li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  column-gap: 11px;
  align-items: center;
  height: 30px;
  font-size: 14px;
  color: var(--ink);
}
.itc li::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--character);
}
.itc li.place::before {
  background: var(--place);
}
.itc .n {
  color: var(--quiet);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.itc li.new {
  animation: enter 0.5s var(--ease);
}
.itc .n.bump {
  animation: bump 0.5s var(--ease);
}
@keyframes enter {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
}
@keyframes bump {
  35% {
    color: var(--ink);
    transform: scale(1.3);
  }
}
.panel-hint {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--quiet);
}
.win-foot {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  color: var(--quiet);
  font-variant-numeric: tabular-nums;
}
.demo figcaption {
  display: flex;
  gap: 12px 32px;
  align-items: baseline;
  justify-content: space-between;
  max-width: none;
  margin-top: 20px;
  font: 400 15px/1.5 var(--sans);
  color: var(--quiet);
}
.demo figcaption p {
  max-width: 46em;
  margin: 0;
}
.linkish {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  font: 500 15px var(--sans);
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.22em;
  cursor: pointer;
}
.linkish:hover {
  text-decoration-color: currentColor;
}

/* ---------- sections ---------- */

.sec {
  margin-top: 176px;
}
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: 48px;
}
h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 9em;
}
.sec-head .body {
  max-width: 34em;
}
.sec-head .body p {
  margin: 0 0 1em;
}
.sec-head .body > :last-child {
  margin-bottom: 0;
}
h3 {
  margin: 0;
  font: 600 16px/1.4 var(--sans);
  color: var(--ink);
}
figcaption {
  max-width: 30em;
  margin-top: 18px;
  font: 400 14px/1.5 var(--sans);
  color: var(--quiet);
}

/* ---------- story bible ---------- */

.bible-fig {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  margin-top: 72px;
}
.bible-fig figure {
  margin: 0;
}

/* Who appears where: one square per chapter, deeper for more mentions. */
.cast {
  --name: 128px;
  --cell: 16px;
  --gap: 3px;
  max-width: 620px;
  font-family: var(--sans);
}
.cast .row {
  display: grid;
  grid-template-columns: var(--name) repeat(22, var(--cell)) minmax(0, 1fr);
  column-gap: var(--gap);
  align-items: center;
  height: 30px;
  border-radius: 5px;
  transition: opacity 0.2s;
}
.cast .row.c {
  --hue: var(--character);
}
.cast .row.p {
  --hue: var(--place);
}
.cast .row[tabindex] {
  cursor: default;
}
.cast .row:focus-visible {
  outline-offset: 2px;
}
.cast .head {
  height: 22px;
  font-size: 11px;
  color: var(--quiet);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cast .group {
  margin: 14px 0 2px;
  font-size: 13px;
  color: var(--quiet);
}
.cast .name {
  overflow: hidden;
  font-size: 14px;
  font-weight: 550;
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cast .n {
  text-align: right;
  font-size: 13px;
  color: var(--quiet);
  font-variant-numeric: tabular-nums;
}
.cast i {
  display: block;
  height: 22px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 7%, var(--paper));
}
.cast i.l1 {
  background: color-mix(in srgb, var(--hue) 28%, var(--paper));
}
.cast i.l2 {
  background: color-mix(in srgb, var(--hue) 52%, var(--paper));
}
.cast i.l3 {
  background: color-mix(in srgb, var(--hue) 76%, var(--paper));
}
.cast i.l4 {
  background: var(--hue);
}
.cast .gone {
  padding-left: 8px;
  font: italic 400 13.5px/1 var(--serif);
  color: var(--quiet);
  white-space: nowrap;
}
.cast .short {
  display: none;
}

/* Relationship map */
.map {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.map line {
  stroke: var(--quiet);
  stroke-opacity: 0.55;
  stroke-width: 1.25;
  transition:
    opacity 0.2s,
    stroke 0.2s;
}
.map .suggested {
  stroke-dasharray: 4 5;
}
.map circle {
  fill: var(--character);
}
.map text {
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 7px;
  stroke-linejoin: round;
}
.map .who {
  font: 600 14px var(--sans);
  fill: var(--ink);
}
.map .rel {
  font: italic 400 13.5px var(--serif);
  fill: var(--quiet);
  transition: opacity 0.2s;
}
.map .node {
  transition: opacity 0.2s;
}

/* Pointing at someone in either figure lights up them and whoever they're linked to. */
.bible-fig.focusing .cast .row:not(.head):not(.on),
.bible-fig.focusing .map .node:not(.on) {
  opacity: 0.25;
}
.bible-fig.focusing .map line:not(.on),
.bible-fig.focusing .map .rel:not(.on) {
  opacity: 0.1;
}
.bible-fig.focusing .map line.on {
  stroke: var(--ink);
  stroke-opacity: 1;
}
.bible-fig.focusing .map .rel.on {
  fill: var(--ink-2);
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 48px;
  margin-top: 88px;
}
.facts p {
  margin: 8px 0 0;
  font-size: 17px;
  line-height: 1.62;
}

/* ---------- whole book ---------- */

.shot {
  margin: 72px 0 0;
}
.frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--edge),
    var(--lift);
}
.frame img {
  display: block;
  width: 100%;
  height: auto;
}
.frame svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.shot figcaption {
  display: flex;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
  max-width: none;
}
.shot figcaption p {
  max-width: 40em;
  margin: 0;
}

.seg {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 3px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  font-family: var(--sans);
}
.seg button {
  padding: 5px 11px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--quiet);
  cursor: pointer;
  white-space: nowrap;
}
.seg button:hover {
  color: var(--ink);
}
.seg button[aria-pressed='true'] {
  background: var(--paper);
  color: var(--ink);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 0 0 1px var(--edge);
}

.specimens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 64px 32px;
  margin-top: 104px;
}
.spec.wide {
  grid-column: span 2;
}
.spec-fig {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  padding: 28px;
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  font-family: var(--sans);
}
.spec h3 {
  margin-top: 22px;
}
.spec > p {
  max-width: 30em;
  margin: 6px 0 0;
  font-size: 17px;
  line-height: 1.62;
}

/* folders, chapters and their statuses */
.tree {
  align-self: flex-start;
  width: 100%;
  max-width: 320px;
  margin-top: 6px;
}
.fold {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.fold svg {
  flex: none;
  color: var(--quiet);
}
.fold .chev {
  width: 12px;
  height: 12px;
  transition: transform 0.25s var(--ease);
}
.folder:not(.open) .chev {
  transform: rotate(-90deg);
}
.fold .ico {
  width: 15px;
  height: 15px;
}
.tag {
  margin-left: auto;
  padding: 0 6px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px var(--rule);
  font-size: 11.5px;
  line-height: 19px;
  font-weight: 500;
  color: var(--quiet);
}
.kids {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s var(--ease);
}
.folder:not(.open) .kids {
  grid-template-rows: 0fr;
}
.chapters {
  min-height: 0;
  margin: 0;
  padding: 0 0 0 20px;
  overflow: hidden;
  list-style: none;
}
.chapters li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: center;
  height: 36px;
  font-size: 14.5px;
  color: var(--ink);
}
.chapters .num {
  color: var(--quiet);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.chapters .t {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-size: 13px;
  color: var(--quiet);
  cursor: pointer;
}
.status:hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
}
.status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot);
  transition: background 0.25s;
}
.status[data-s='idea'] {
  --dot: var(--s-idea);
}
.status[data-s='progress'] {
  --dot: var(--s-progress);
}
.status[data-s='drafted'] {
  --dot: var(--s-drafted);
}
.status[data-s='revised'] {
  --dot: var(--s-revised);
}
.status[data-s='done'] {
  --dot: var(--s-done);
}

/* story structures */
.struct {
  align-self: stretch;
  width: 100%;
}
.acts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
}
.act b {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.act b svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--quiet);
}
.act ol {
  margin: 8px 0 0 7px;
  padding: 0 0 0 15px;
  border-left: 1px solid var(--rule);
  list-style: none;
}
.act li {
  font-size: 13.5px;
  line-height: 25px;
  color: var(--ink-2);
}
.acts.swap {
  animation: swap 0.35s var(--ease);
}
@keyframes swap {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* drafts */
.branch {
  width: 100%;
  max-width: 300px;
  overflow: visible;
}
.branch path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}
.branch .d1 {
  stroke: var(--faint);
}
.branch .d2 {
  stroke: var(--ink);
}
.branch circle.d1 {
  fill: var(--surface);
  stroke-width: 2;
}
.branch circle.d2 {
  fill: var(--ink);
  stroke: none;
}
.branch text {
  font: 500 13px var(--sans);
  fill: var(--quiet);
}
.branch text.on {
  fill: var(--ink);
  font-weight: 600;
}
.branch text.why {
  font: italic 400 13px var(--serif);
}

/* a note on the text */
.noted {
  max-width: 300px;
  font: 400 16px/1.75 var(--serif);
  color: var(--ink-2);
}
.noted p {
  margin: 0;
}
.noted u {
  text-decoration: underline dotted var(--quiet);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.3em;
}
.pop {
  width: fit-content;
  max-width: 240px;
  margin: 10px 0 0 34px;
  padding: 10px 13px;
  border-radius: 9px;
  background: var(--paper);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.1),
    0 0 0 1px var(--edge);
  font: 400 13.5px/1.45 var(--sans);
  color: var(--ink);
}

/* punctuation */
.punct {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 36px;
  align-items: baseline;
  margin: 0;
}
.punct dt {
  justify-self: end;
  font: 500 15px var(--sans);
  color: var(--quiet);
}
.punct dd {
  margin: 0;
  font: 400 25px/1.4 var(--serif);
  color: var(--ink);
}

/* export: drawn at twice its size and scaled down as a whole, so browsers with a minimum
   font size (Safari) don't blow up the tiny manuscript type. 40px to the inch throughout. */
.exports-box {
  --s: 0.5;
  width: calc(1136px * var(--s));
  height: calc(482px * var(--s));
}
.exports {
  display: flex;
  gap: 40px;
  align-items: flex-end;
  width: 1136px;
  height: 482px;
  transform: scale(var(--s));
  transform-origin: 0 0;
}
.ex {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.ex-l {
  font: 500 24px/28px var(--sans);
  color: var(--quiet);
  white-space: nowrap;
}
.sheet {
  position: relative;
  flex: none;
  width: 340px;
  height: 440px;
  padding: 30px;
  overflow: hidden;
  background: #fdfdfc;
  color: #1b1b1b;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 28px 60px -28px rgba(0, 0, 0, 0.25);
  font: 400 11.2px/2 'Courier Prime', 'Courier New', Courier, monospace;
}
.sheet .tl {
  position: absolute;
  top: 30px;
  left: 30px;
  line-height: 1.3;
}
.sheet .tr {
  position: absolute;
  top: 30px;
  right: 30px;
}
.sheet .mid {
  position: absolute;
  top: 44%;
  left: 0;
  right: 0;
  text-align: center;
}
/* the book PDF at 6 x 9 in, laid out as the export sets it (11/15.5pt, 0.875in gutter,
   0.625in outside), drawn at 80px to the inch and halved so its small type keeps its shapes */
.book {
  position: relative;
  flex: none;
  width: 480px;
  height: 360px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.07),
    0 28px 60px -28px rgba(0, 0, 0, 0.3);
}
.book::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 43%,
    rgba(0, 0, 0, 0.07) 49.6%,
    rgba(0, 0, 0, 0.12) 50%,
    rgba(0, 0, 0, 0.06) 50.6%,
    transparent 57%
  );
}
.bk {
  position: relative;
  display: flex;
  width: 960px;
  height: 720px;
  overflow: hidden;
  transform: scale(0.5);
  transform-origin: 0 0;
  color: #1a1a1a;
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
}
.bk .pg {
  position: relative;
  width: 480px;
  background: #fbf9f3;
}
.bk .rh,
.bk .fo {
  position: absolute;
  left: 70px;
  right: 50px;
  text-align: center;
  line-height: 1;
}
.bk .rh {
  top: 32px;
  font-size: 9.2px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.bk .fo {
  top: 666px;
  font-size: 10.4px;
}
/* one text flow across both pages, the way the PDF breaks it */
.bk .flow {
  position: absolute;
  top: 60px;
  left: 50px;
  width: 860px;
  height: 585px;
  column-count: 2;
  column-gap: 140px;
  column-fill: auto;
  font-size: 12.2px;
  line-height: 17.2px;
  text-align: justify;
  hyphens: auto;
}
.bk h4 {
  margin: 0 0 39px;
  padding-top: 180px;
  font-size: 19.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}
.bk p {
  margin: 0;
  text-indent: 1.5em;
}
.bk h4 + p {
  text-indent: 0;
}
.cover {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: space-between;
  width: 236px;
  height: 354px;
  padding: 28px 24px;
  border-radius: 6px 12px 12px 6px;
  background: #23324a;
  color: #f2efe8;
  box-shadow:
    inset 8px 0 0 rgba(0, 0, 0, 0.18),
    0 28px 60px -28px rgba(0, 0, 0, 0.4);
}
.cover b {
  font: 450 34px/1.1 var(--serif);
  letter-spacing: -0.01em;
}
.cover span {
  font: 500 18px var(--sans);
  opacity: 0.8;
}

/* series */
.series {
  display: grid;
  justify-items: center;
  gap: 44px;
  width: 100%;
}
.rel-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.rel-line i {
  height: 1px;
  background: var(--quiet);
}
.rel-line .who::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--character);
}
.rel-line em {
  font: italic 400 16px var(--serif);
  color: var(--ink-2);
}

/* dictation: what was said, and the bar in the app that writes it down */
.dictate {
  display: flex;
  align-items: center;
  gap: 36px;
  width: 100%;
  max-width: 900px;
}
.said {
  flex: 1 1 0;
  min-width: 0;
}
.said p:last-child {
  margin: 0;
  font: italic 400 17px/1.7 var(--serif);
  color: var(--quiet);
}
.said .cmd {
  font: 500 12px/1 var(--sans);
  font-style: normal;
  letter-spacing: 0.02em;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--surface);
  color: var(--ink-2);
  white-space: nowrap;
}
.dictate-arrow {
  flex: none;
  font: 400 22px var(--sans);
  color: var(--faint);
}
.dbar {
  flex: 1.25 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 14px 12px 16px;
  border-radius: 14px;
  background: var(--paper);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.1),
    0 0 0 1px var(--edge);
}
.dbar-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.dbar-mic {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--rec);
  background: color-mix(in srgb, var(--rec) 12%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rec) 10%, transparent);
}
.dbar-mic svg {
  width: 15px;
  height: 15px;
}
.dbar-text {
  padding-top: 4px;
  font: 400 15.5px/1.55 var(--serif);
  color: var(--ink);
}
.dbar-text p {
  margin: 0;
}
.dbar-text p + p {
  margin-top: 0.45em;
}
.dbar-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.btnish.primary {
  background: var(--ink);
  color: var(--paper);
}

/* journals and notebooks */
.spec.full {
  grid-column: 1 / -1;
}
.kinds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 260px));
  justify-content: center;
  align-items: start;
  gap: 72px;
  width: 100%;
}
.kind-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--quiet);
}
.journal-list,
.note-tree {
  margin: 0;
  padding: 0;
  list-style: none;
}
.journal-list .month {
  display: block;
  height: auto;
  padding: 10px 0 2px;
  font-size: 13px;
  color: var(--quiet);
}
.journal-list li,
.note-tree li {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  font-size: 14.5px;
  color: var(--ink);
  white-space: nowrap;
}
.day {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  width: 26px;
  font-size: 10px;
  line-height: 1.15;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--quiet);
}
.day b {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
}
.note-tree li {
  gap: 9px;
  height: 34px;
}
.note-tree li.in {
  padding-left: 22px;
}
.note-tree svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--quiet);
}

/* ---------- one file ---------- */

.file-sec {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  column-gap: 72px;
  align-items: start;
}
.file-sec .body {
  max-width: 30em;
}
.file-sec .body p {
  margin: 28px 0 0;
}
.file-sec .body p + p {
  margin-top: 1em;
}
.file-name {
  font-family: var(--sans);
  font-size: 0.92em;
  font-weight: 500;
  color: var(--ink);
}
.file {
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.file-bar {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--rule);
  font: 500 14px var(--sans);
  color: var(--ink);
}
.file-bar svg {
  width: 16px;
  height: 16px;
  color: var(--quiet);
}
.file-bar span {
  margin-left: auto;
  font-weight: 400;
  color: var(--quiet);
}
.file pre {
  margin: 0;
  padding: 20px 22px 26px;
  font: 13px/1.75 var(--mono);
  color: var(--quiet);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.file pre b {
  font-weight: 400;
  color: var(--ink);
}

/* ---------- privacy ---------- */

.statement .big {
  max-width: 12em;
  margin: 0;
  font: 360 clamp(38px, 6vw, 80px) / 1.04 var(--serif);
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}
.statement .small {
  max-width: 32em;
  margin: 32px 0 0;
}

.download.end {
  margin-top: 36px;
}

/* ---------- footer ---------- */

footer {
  margin-top: 160px;
  border-top: 1px solid var(--rule);
}
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
  padding-bottom: 48px;
  font: 400 14px var(--sans);
  color: var(--quiet);
}
footer .wordmark {
  font-size: 17px;
}
footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
footer nav a {
  text-decoration: none;
}
footer nav a:hover {
  color: var(--ink);
}

/* ---------- smaller screens ---------- */

/* Below this the editor would get too narrow beside the words, so it moves under them. */
@media (max-width: 1080px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 64px;
  }
  h1 {
    font-size: clamp(44px, 8vw, 84px);
  }
}
/* The chart needs about 580px; below this the map moves under it. */
@media (max-width: 1100px) {
  .bible-fig {
    grid-template-columns: minmax(0, 1fr);
  }
  .bible-fig figure:last-child {
    max-width: 480px;
  }
}
@media (max-width: 1060px) {
  .specimens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 899px) {
  h1 br {
    display: none;
  }
  .sec {
    margin-top: 120px;
  }
  .sec-head,
  .file-sec {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
  }
  h2 {
    max-width: none;
  }
  .file-sec {
    row-gap: 40px;
  }
  .bible-fig {
    margin-top: 48px;
  }
  /* The panel goes under the page as a single row, so finding more names doesn't make the window taller. */
  .win-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 340px auto;
    height: auto;
  }
  .panel {
    padding: 14px 22px 16px;
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .panel .tabs {
    display: none;
  }
  .panel-label {
    margin: 0 0 2px;
  }
  .itc {
    display: flex;
    gap: 24px;
    min-height: 30px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .itc li {
    flex: none;
    grid-template-columns: 8px auto auto;
  }
  .panel-hint {
    margin-top: 4px;
  }
  footer {
    margin-top: 120px;
  }
}
@media (max-width: 640px) {
  .wrap {
    padding: 0 16px;
  }
  body {
    font-size: 18px;
  }
  .top .wrap {
    height: 64px;
  }
  .top nav {
    gap: 16px;
  }
  .hero {
    padding-left: 16px;
    padding-right: 16px;
    row-gap: 48px;
  }
  .lede {
    font-size: 19px;
  }
  .win {
    border-radius: 10px;
  }
  .win-bar {
    gap: 14px;
    padding: 0 14px;
  }
  .crumbs span:first-child,
  .crumbs span + span::before {
    display: none;
  }
  .struct .seg {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .win-body {
    grid-template-rows: 320px auto;
  }
  .page {
    padding: 24px 20px 16px;
  }
  .panel {
    padding: 12px 20px 14px;
  }
  .demo figcaption,
  .shot figcaption {
    flex-direction: column;
    align-items: flex-start;
  }
  .frame {
    border-radius: 8px;
  }
  .facts,
  .specimens {
    grid-template-columns: minmax(0, 1fr);
  }
  .spec.wide {
    grid-column: auto;
  }
  .dictate {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .dictate-arrow {
    align-self: center;
    transform: rotate(90deg);
  }
  .spec-fig {
    height: auto;
    min-height: 240px;
    padding: 24px 20px;
  }
  .kinds {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .acts {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .exports-box {
    --s: 0.26;
    height: calc(440px * var(--s));
  }
  .exports {
    height: 440px;
  }
  .ex-l {
    display: none;
  }
  .cast {
    --name: 92px;
    --cell: 9px;
    --gap: 2px;
  }
  .cast .row {
    grid-template-columns: var(--name) repeat(22, var(--cell));
    height: 24px;
  }
  .cast .head {
    height: 18px;
    font-size: 10px;
    overflow: visible;
  }
  /* Hidden, not removed, so the remaining numbers stay over their columns. */
  .cast .head .minor {
    visibility: hidden;
  }
  .cast .n,
  .cast .head span:last-child {
    display: none;
  }
  .cast .name {
    font-size: 12.5px;
  }
  .cast i {
    height: 18px;
    border-radius: 2px;
  }
  .cast .gone {
    padding-left: 6px;
    font-size: 12.5px;
  }
  .cast .long {
    display: none;
  }
  .cast .short {
    display: inline;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}


/* ======================================================================
   Several pages: the header's page links, page openings, the home page's
   tour, and the Versions, Story bible, Export and Download pages.
   ====================================================================== */

:root {
  --del: #a5502a;
  --del-bg: rgba(217, 119, 87, 0.1);
  --del-hl: rgba(217, 119, 87, 0.26);
  --ins: #3f6fa8;
  --ins-bg: rgba(108, 155, 210, 0.18);
  --ins-hl: rgba(108, 155, 210, 0.4);
  --ins-line: #6c9bd2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --del: #e0946f;
    --del-bg: rgba(224, 148, 111, 0.12);
    --del-hl: rgba(224, 148, 111, 0.28);
    --ins: #8fb6e3;
    --ins-bg: rgba(108, 155, 210, 0.22);
    --ins-hl: rgba(108, 155, 210, 0.45);
  }
}

/* ---------- header ---------- */

.top .pages {
  margin-left: auto;
}
.top .pages a {
  white-space: nowrap;
}
.top .pages a[aria-current='page'] {
  color: var(--ink);
}
.top .mini {
  margin-left: 24px;
}
.mini.always {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ---------- a page's opening ---------- */

.page-hero {
  padding-top: clamp(48px, 9vh, 112px);
}
.eyebrow {
  margin: 0 0 18px;
  font: 500 14px/1.4 var(--sans);
  color: var(--quiet);
}
.page-hero h1 {
  max-width: 13em;
  font-size: clamp(40px, 5vw, 66px);
}
.page-hero .lede {
  max-width: 32em;
}
.page-hero .download {
  margin-top: 36px;
}
.sec.first {
  margin-top: 96px;
}

/* the way on to the next page */
.next {
  margin-top: 168px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.next a {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
}
.next .label {
  font: 500 14px var(--sans);
  color: var(--quiet);
}
.next .title {
  font: 400 clamp(28px, 3vw, 36px) / 1.15 var(--serif);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.next a:hover .title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
.sub footer {
  margin-top: 72px;
}

/* ---------- home: a card for each part of the app ---------- */

.tour {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px 32px;
  margin-top: 72px;
}
.tour .card {
  display: block;
  color: inherit;
  text-decoration: none;
}
.tour .spec-fig {
  height: 280px;
  transition: background-color 0.2s;
}
.tour .card:hover .spec-fig {
  background: color-mix(in srgb, var(--ink) 5%, var(--surface));
}
.tour h3 {
  margin-top: 22px;
}
.tour p {
  max-width: 30em;
  margin: 6px 0 0;
  font-size: 17px;
  line-height: 1.62;
}
.tour .more {
  display: inline-block;
  margin-top: 10px;
  font: 500 15px var(--sans);
  color: var(--ink);
}
.tour .card:hover .more {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}
.tour .tree {
  align-self: center;
  margin-top: 0;
}

/* ---------- portraits ---------- */

.faces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px 26px;
  font-family: var(--sans);
}
.face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.face img {
  display: block;
  width: 84px;
  height: 84px;
  margin-bottom: 8px;
  border-radius: 50%;
}
.face small {
  font-size: 12px;
  font-weight: 400;
  color: var(--quiet);
}
.tour .face img {
  width: 72px;
  height: 72px;
}

/* ---------- export formats, small ---------- */

.formats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
}
.formats {
  gap: 6px;
}
.formats li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 14px;
  line-height: 1.35;
  border-radius: 9px;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--edge);
}
.formats .ext {
  flex: none;
  width: 44px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--quiet);
}
.formats b {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.formats span:not(.ext) {
  font-size: 12.5px;
  color: var(--quiet);
}

/* ---------- versions: what changed ---------- */

.del {
  color: var(--del);
  background: var(--del-bg);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.del.pair {
  margin-right: 2px;
}
.ins {
  color: var(--ink);
  background: var(--ins-bg);
  text-decoration: underline;
  text-decoration-color: var(--ins-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.26em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.del.hl {
  background: var(--del-hl);
}
.ins.hl {
  background: var(--ins-hl);
}
.back {
  text-decoration: underline dotted var(--faint);
  text-underline-offset: 0.3em;
}

.cmp-demo {
  margin: 72px 0 0;
}
.cmp {
  padding: 22px 28px 24px;
  font-family: var(--sans);
}
.cmp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: 13.5px;
  color: var(--quiet);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
}
.chip span {
  font-weight: 400;
  color: var(--quiet);
}
.cmp-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.cmp-summary {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
}
.cmp-summary .plus {
  font-weight: 600;
  color: var(--ins);
}
.cmp-summary .minus {
  margin-left: 4px;
  font-weight: 600;
  color: var(--del);
}
.cmp-body {
  padding-top: 22px;
}
.cmp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 0 32px;
}
.cmp-body p {
  margin: 0 0 1em;
  font: 400 17px/1.75 var(--serif);
  color: var(--ink-2);
}
.cmp-margin {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 3px;
  margin-bottom: 1em;
}
.cmp-card {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 4px 4px 10px;
  border-radius: 8px;
  background: var(--surface);
  font-size: 13px;
}
.cmp-card.hl {
  background: color-mix(in srgb, var(--ink) 6%, var(--surface));
}
.cmp-quote {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--serif);
}
.cmp-quote .arrow {
  margin: 0 5px;
  color: var(--quiet);
}
.cmp-card button {
  flex: none;
  height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--edge);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
}
.cmp-card button:hover {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--quiet);
}
.cmp-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 36px;
}
.cmp-body.side p {
  font-size: 16px;
}
.cmp-side .cut {
  align-self: start;
  padding: 8px 12px;
  border: 1px dashed var(--faint);
  border-radius: 8px;
  font: 13px/1.5 var(--sans);
  color: var(--quiet);
}
.cmp-side-head {
  margin-bottom: 12px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--quiet);
}
.cmp-demo figcaption {
  display: flex;
  gap: 8px 24px;
  align-items: baseline;
  justify-content: space-between;
  max-width: none;
}
.cmp-demo figcaption p {
  max-width: 44em;
  margin: 0;
}

/* takes of a chapter */
.takes {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  width: 100%;
}
.take-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.take {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  background: var(--paper);
  text-align: left;
  cursor: pointer;
}
.take b {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.take .where {
  font-size: 12.5px;
  color: var(--quiet);
}
.take[aria-pressed='true'] {
  box-shadow: inset 0 0 0 1.5px var(--ink-2);
}
.take-put {
  margin-top: 4px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.take-page {
  min-height: 170px;
  padding: 16px 18px;
  border-radius: 9px;
  background: var(--paper);
  font: 400 15px/1.7 var(--serif);
  color: var(--ink-2);
}
.take-page p {
  margin: 0;
}

/* saved versions, newest first */
.timeline {
  width: 100%;
  max-width: 290px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1.5px solid var(--faint);
  font-family: var(--sans);
}
.timeline li {
  position: relative;
  padding: 6px 0 9px 18px;
  line-height: 1.4;
}
.timeline li::before {
  content: '';
  position: absolute;
  left: -5.75px;
  top: 11px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--ink-2);
}
.timeline li.auto::before {
  left: -4.25px;
  top: 12.5px;
  width: 7px;
  height: 7px;
  background: var(--faint);
  box-shadow: none;
}
.timeline li.now::before {
  background: var(--ink);
  box-shadow: none;
}
.timeline b {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.timeline span {
  font-size: 12.5px;
  color: var(--quiet);
}

/* ---------- download page ---------- */

.builds {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 72px;
}
.build {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 22px 20px;
  border-radius: 12px;
  background: var(--surface);
  color: inherit;
  font-family: var(--sans);
  text-decoration: none;
}
.build:hover {
  background: color-mix(in srgb, var(--ink) 6%, var(--surface));
}
.build.you {
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.build b {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.build .for {
  font-size: 14px;
  color: var(--quiet);
}
.build .file {
  margin-top: 14px;
  font: 12.5px/1.5 var(--mono);
  color: var(--quiet);
  overflow-wrap: anywhere;
}
.build .get {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.build .get [data-size]:not(:empty)::before {
  content: '· ';
  font-weight: 400;
  color: var(--quiet);
}
.build .get [data-size] {
  font-weight: 400;
  color: var(--quiet);
}

/* ---------- smaller screens ---------- */

@media (max-width: 1060px) {
  .builds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 899px) {
  .tour {
    grid-template-columns: minmax(0, 1fr);
  }
  .next {
    margin-top: 120px;
  }
}
/* The page links take a row of their own under the wordmark. */
@media (max-width: 760px) {
  .top .wrap {
    flex-wrap: wrap;
    height: auto;
    padding-top: 12px;
    padding-bottom: 6px;
    row-gap: 2px;
  }
  .top .wordmark {
    height: 40px;
  }
  .top .pages {
    order: 3;
    flex-basis: 100%;
    gap: 20px;
    margin-left: 0;
    padding: 6px 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .top .mini {
    margin-left: auto;
  }
  .cmp {
    padding: 18px 16px 20px;
  }
  .cmp-row,
  .cmp-side {
    grid-template-columns: minmax(0, 1fr);
  }
  .cmp-margin {
    margin: -4px 0 1.5em;
  }
  .cmp-bar .seg,
  .cmp-side-head {
    display: none;
  }
  .takes {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .builds {
    grid-template-columns: minmax(0, 1fr);
  }
  .tour .spec-fig {
    height: auto;
    min-height: 240px;
  }
  .cmp-demo figcaption {
    flex-direction: column;
  }
}

/* ---------- small pieces for the tour and specimens ---------- */

.mini-cmp {
  width: 100%;
  max-width: 420px;
}
.mini-cmp p {
  margin: 0 0 18px;
  font: 400 17px/1.75 var(--serif);
  color: var(--ink-2);
}
.mini-cmp .cmp-card {
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--edge);
}
.btnish {
  flex: none;
  height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--surface);
  font: 500 12.5px/26px var(--sans);
  color: var(--ink-2);
}

.toast-demo {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 440px;
  padding: 12px 12px 12px 18px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font: 400 14px/1.45 var(--sans);
  box-shadow: var(--lift);
}
.toast-demo b {
  flex: none;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
}

.scene-list {
  width: 100%;
  max-width: 320px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 13.5px/1.4 var(--sans);
  color: var(--ink-2);
}
.scene-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}
.scene-list li:last-child {
  border-bottom: 0;
}
.scene-list .num,
.scene-list .w {
  color: var(--quiet);
}
.scene-list .t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the export page shows the three exports large */
.export-fig {
  margin: 0;
}
.export-fig .spec-fig {
  height: auto;
  padding: 56px 40px 48px;
}
.export-fig .exports-box {
  --s: 0.8;
}
@media (max-width: 1100px) {
  .export-fig .exports-box {
    --s: 0.6;
  }
}
@media (max-width: 899px) {
  .export-fig .exports-box {
    --s: 0.44;
  }
}
@media (max-width: 640px) {
  .export-fig .spec-fig {
    padding: 32px 16px;
  }
  .export-fig .exports-box {
    --s: 0.27;
  }
}

/* ---------- changelog ---------- */

/* One release per row: its version stays in view beside notes as long as they run. */
.releases {
  margin-top: 96px;
  min-height: 50vh;
}
.releases-note {
  font: 400 15px/1.5 var(--sans);
  color: var(--quiet);
}
.release {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: 48px;
  padding: 56px 0 72px;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 48px;
}
.release.quiet {
  padding-bottom: 48px;
}
.release-head {
  align-self: start;
  position: sticky;
  top: 104px;
}
.release h2 {
  font-weight: 360;
  font-size: clamp(36px, 3.8vw, 50px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: lining-nums;
}
.release h2 a {
  text-decoration: none;
}
.release h2 span {
  display: block;
  margin-bottom: 10px;
  font: 500 14px/1.4 var(--sans);
  letter-spacing: 0;
  color: var(--quiet);
}
.release-date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 14px 0 0;
  font: 400 14px/1.5 var(--sans);
  color: var(--quiet);
}
.pill {
  padding: 1px 9px;
  border-radius: 99px;
  background: var(--ink);
  color: var(--paper);
  font: 600 12px/1.6 var(--sans);
}
.pill.pre {
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.notes {
  max-width: 34em;
}
.notes > :first-child {
  margin-top: 0;
}
.notes h3 {
  margin: 0 0 18px;
  font: 400 clamp(27px, 2.7vw, 34px) / 1.15 var(--serif);
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}
.notes * + h3 {
  margin-top: 64px;
}
.notes h4 {
  margin: 40px 0 12px;
}
.notes p {
  margin: 0 0 1em;
}
.notes ul,
.notes ol {
  margin: 1.5em 0;
  padding: 0;
  list-style: none;
}
.notes li {
  position: relative;
  padding-left: 28px;
}
.notes li + li {
  margin-top: 0.85em;
}
.notes ul > li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.82em;
  width: 10px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--faint);
}
.notes ol {
  counter-reset: item;
}
.notes ol > li::before {
  counter-increment: item;
  content: counter(item);
  position: absolute;
  left: 2px;
  font: 500 14px/2.1 var(--sans);
  color: var(--quiet);
}
.notes li ul,
.notes li ol {
  margin: 0.6em 0 0;
}
.notes strong {
  font-weight: 600;
  color: var(--ink);
}
.notes code {
  padding: 0.1em 0.35em;
  border-radius: 5px;
  background: var(--surface);
  font: 0.8em var(--mono);
  color: var(--ink);
}
.notes kbd {
  display: inline-block;
  min-width: 1.9em;
  padding: 0 0.45em;
  border-radius: 6px;
  background: var(--surface);
  box-shadow:
    inset 0 0 0 1px var(--rule),
    inset 0 -1.5px 0 var(--rule);
  font: 500 0.74em/1.75 var(--sans);
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--ink);
  vertical-align: 0.1em;
}
.notes img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
.notes .none {
  font-style: italic;
  color: var(--quiet);
}
.notes .release-more {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 36px 0 0;
  font: 500 14px/1.5 var(--sans);
  color: var(--quiet);
}
.release-more a {
  color: var(--ink-2);
}

@media (max-width: 899px) {
  .releases {
    margin-top: 64px;
  }
  .release {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
    padding: 40px 0 56px;
    scroll-margin-top: 72px;
  }
  .release-head {
    position: static;
  }
  .notes * + h3 {
    margin-top: 48px;
  }
}