/* Rot Reader — the written pages.

   These are ordinary scrolling documents, and the app stylesheet is not one.
   styles.css pins html and body to 100% height and lays the whole page out as
   a flex column that never scrolls, which is right for a reader and wrong for
   an article. So these pages carry their own sheet instead of overriding a
   37KB one line by line.

   The tokens below are copied from styles.css on purpose and have to be kept
   in step with it by hand. That is the cost of not loading the app on a page
   that has no app on it. If a color changes there, change it here too. */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/literata-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --bg: #08090b;
  --bg-soft: #0e1015;
  --panel: #12151b;
  --panel-2: #171b23;
  --line: #232833;
  --line-soft: #1a1e26;
  --text: #edeff4;
  --text-2: #aab0bd;
  --dim: #767d8c;
  --accent: #ff4b4b;
  --accent-soft: rgba(255, 75, 75, 0.14);
  --ok: #3fc77f;
  --radius: 14px;
  --ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Literata", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --shadow-1: 0 1px 2px rgba(3, 4, 6, 0.4), 0 2px 8px rgba(3, 4, 6, 0.28);
  --shadow-2: 0 8px 26px rgba(3, 4, 6, 0.5), 0 2px 6px rgba(3, 4, 6, 0.35);
  --wrap: 760px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f7f5;
  --bg-soft: #ffffff;
  --panel: #ffffff;
  --panel-2: #f0f1f3;
  --line: #dcdee3;
  --line-soft: #e8eaee;
  --text: #14161a;
  --text-2: #4a505c;
  --dim: #767d8c;
  --accent: #d92020;
  --accent-soft: rgba(217, 32, 32, 0.1);
  --shadow-1: 0 1px 2px rgba(28, 26, 22, 0.06), 0 2px 8px rgba(28, 26, 22, 0.05);
  --shadow-2: 0 8px 26px rgba(28, 26, 22, 0.1), 0 2px 6px rgba(28, 26, 22, 0.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; }

a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: 20px;
}

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

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  font-size: 15px;
}

.brand .mark { width: 21px; height: 21px; flex: none; }
.brand .r { color: var(--accent); }

.top nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.top nav a,
.top nav button {
  font: inherit;
  font-size: 13.5px;
  color: var(--text-2);
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 9px;
  padding: 7px 10px;
  cursor: pointer;
}

.top nav a:hover,
.top nav button:hover { color: var(--text); background: var(--panel-2); }

.top nav a.cta {
  color: #fff;
  background: var(--accent);
  font-weight: 600;
  padding-inline: 13px;
}

:root[data-theme="light"] .top nav a.cta { color: #fff; }
.top nav a.cta:hover { filter: brightness(1.07); background: var(--accent); }

@media (max-width: 560px) {
  .top nav .hide-sm { display: none; }
}

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

.hero {
  position: relative;
  overflow: hidden;
  padding-block: 62px 34px;
  border-bottom: 1px solid var(--line-soft);
}

/* The wash is clipped by .hero above. An unclipped one gave the whole
   document 238px of horizontal scroll the first time it was drawn. */
.hero::before {
  content: "";
  position: absolute;
  inset: -40% 0 auto 0;
  height: 520px;
  background: radial-gradient(52% 60% at 50% 42%, var(--accent-soft), transparent 70%);
  pointer-events: none;
}

.hero > * { position: relative; }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(31px, 5.4vw, 50px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  text-wrap: balance;
}

.lede {
  font-size: clamp(17px, 2.2vw, 19.5px);
  line-height: 1.6;
  color: var(--text-2);
  margin: 0 0 26px;
  max-width: 62ch;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.btn {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-1);
}

.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }

.btn.ghost {
  background: var(--panel);
  color: var(--text);
  border-color: var(--line);
  box-shadow: none;
}

.btn.ghost:hover { background: var(--panel-2); filter: none; }

.note {
  font-size: 13px;
  color: var(--dim);
  margin-top: 14px;
}

/* ---------------------------------------------------- bite and snack */

.bite {
  font-family: var(--serif);
  font-size: clamp(19px, 2.6vw, 22px);
  line-height: 1.52;
  margin: 0 0 22px;
  color: var(--text);
}

.bite b { color: var(--accent); font-weight: 600; }

.snack {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 18px 20px 20px;
  margin: 0 0 34px;
  box-shadow: var(--shadow-1);
}

.snack h2 {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 12px;
}

.snack ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }

.snack li {
  position: relative;
  padding-left: 24px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--text-2);
}

.snack li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------------------------------------------------------------- prose */

main { padding-block: 40px 20px; }

section { margin-bottom: 44px; }

h2 {
  font-family: var(--serif);
  font-size: clamp(23px, 3.2vw, 28px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  text-wrap: balance;
}

h3 {
  font-size: 16.5px;
  font-weight: 650;
  margin: 26px 0 8px;
  letter-spacing: -0.005em;
}

p { margin: 0 0 16px; color: var(--text-2); }
p strong, li strong { color: var(--text); font-weight: 600; }

main ul, main ol { margin: 0 0 18px; padding-left: 22px; color: var(--text-2); }
main li { margin-bottom: 8px; }

.steps { list-style: none; padding: 0; counter-reset: s; }

.steps li {
  counter-increment: s;
  position: relative;
  padding-left: 42px;
  margin-bottom: 16px;
}

.steps li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: 1px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--line);
}

.pull {
  border-left: 2px solid var(--accent);
  padding: 2px 0 2px 18px;
  margin: 0 0 20px;
  font-family: var(--serif);
  font-size: 18.5px;
  line-height: 1.5;
  color: var(--text);
}

/* Tables scroll on their own so the document body never does. */
.tablewrap { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; min-width: 420px; font-size: 15px; }
th, td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line-soft); }
th { font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--dim); font-weight: 700; background: var(--panel); }
td { color: var(--text-2); }
td:first-child { color: var(--text); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------------ faq */

.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  margin-bottom: 9px;
  overflow: hidden;
}

.faq summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 600;
  font-size: 15.5px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 1.7px solid var(--dim);
  border-bottom: 1.7px solid var(--dim);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.16s ease;
  flex: none;
}

.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq .a { padding: 0 18px 16px; }
.faq .a p { margin: 0 0 12px; font-size: 15.5px; }
.faq .a p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- end panel */

.end {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 18px;
  padding: 30px 26px;
  text-align: center;
  box-shadow: var(--shadow-2);
  margin-bottom: 44px;
}

.end h2 { margin-bottom: 10px; }
.end p { max-width: 46ch; margin-inline: auto; }
.end .cta-row { justify-content: center; margin-top: 20px; }

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

footer {
  border-top: 1px solid var(--line-soft);
  padding-block: 26px 40px;
  font-size: 13.5px;
  color: var(--dim);
}

footer .links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px; }
footer a { color: var(--text-2); text-decoration: none; }
footer a:hover { color: var(--text); text-decoration: underline; }

/* ----------------------------------------------------------- live demo */

.demo {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--bg-soft));
  border-radius: 18px;
  padding: 20px;
  margin: 0 0 34px;
  box-shadow: var(--shadow-2);
}

.demo-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 150px;
  padding: 6px 4px 10px;
}

.demo-guide { height: 1px; background: var(--line); position: relative; }
.demo-guide::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 10px;
  background: var(--line);
  transform: translateX(-50%);
}
.demo-guide.t::after { top: 0; }
.demo-guide.b::after { bottom: 0; }

.demo-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  font-family: var(--serif);
  font-size: clamp(26px, 6.4vw, 46px);
  line-height: 1.3;
  min-height: 1.3em;
  white-space: pre;
  overflow: hidden;
  padding-block: 12px;
}

.demo-row .pre { text-align: right; overflow: hidden; }
.demo-row .post { text-align: left; overflow: hidden; }
.demo-row .orp { color: var(--accent); text-align: center; }

.demo[data-chunk="sentence"] .demo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.5;
  min-height: 4.4em;
  text-align: center;
}

.demo[data-chunk="sentence"] .demo-row .orp { color: inherit; max-width: 100%; text-wrap: pretty; }
.demo[data-chunk="sentence"] .demo-guide::after { opacity: 0; }

.demo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.demo-bar .lab {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
}

.seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 2px; gap: 2px; }

.seg button {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 5px 11px;
  cursor: pointer;
  white-space: nowrap;
}

.seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.seg button:not([aria-pressed="true"]):hover { color: var(--text); }

.demo-play {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 14px;
  cursor: pointer;
  margin-left: auto;
}

.demo-play:hover { background: var(--line-soft); }
.demo-wpm { font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}