/* Fonts: self-hosted, with Latin (including Spanish accents) and Cyrillic from the same designs. */
@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(../fonts/literata-latin-wght-normal.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: 200 900; font-display: swap;
  src: url(../fonts/literata-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url(../fonts/literata-latin-wght-italic.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: italic; font-weight: 200 900; font-display: swap;
  src: url(../fonts/literata-cyrillic-wght-italic.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Commissioner"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/commissioner-latin-wght-normal.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: "Commissioner"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/commissioner-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url(../fonts/jetbrains-mono-latin-wght-normal.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: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url(../fonts/jetbrains-mono-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

/* Tokens. Light is warm paper and ink. Dark is a lamp-lit page, retuned rather than inverted. */
:root {
  color-scheme: light;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --paper: #f6f1e7;
  --paper-raised: #fcf9f2;
  --paper-sunk: #efe8d9;
  --bench: #e9e1cf;
  --bench-line: rgb(90 70 30 / 7%);
  --bench-raised: #f6f1e6;
  --ink: #23201b;
  --ink-2: #57504a;
  --ink-3: #6f675e;
  --rule: #d6ccb9;
  --rule-strong: #b7ab94;
  --shadow: 0 1px 2px rgb(60 45 20 / 12%), 0 6px 18px rgb(60 45 20 / 8%);

  /* One accent per part, with the same meaning throughout. */
  --p1: #b4412a; --p2: #1e6e6a; --p3: #8a5f0c; --p4: #2c5c94; --p5: #4c6e1f; --p6: #8c3a5e;
  --on-accent: #fffaf1;

  /* Tile tints: the book's motif, from the same six inks. */
  --t1: #f1cfc3; --t2: #bfe0da; --t3: #ecd9a8; --t4: #c9daf0; --t5: #d3e2b4; --t6: #efc9da;
  --t-ink: #2a2520;

  --good: #2f6b35; --good-bg: #dbe9cf;
  --warn: #875c08; --warn-bg: #f0e0b4;
  --bad: #a93a26;  --bad-bg: #f3d3c8;
  --term-bg: #1f1d19; --term-ink: #e8e2d4; --term-dim: #a59c8a; --term-acc: #d9b871; --term-ok: #a9c977; --term-bad: #e8886f;

  --bar-h: 3rem;
  --gutter: 1rem;
  --column: 40rem;
  --bench-width: 68rem;
  --radius: .5rem;
  --ease: cubic-bezier(.2,.7,.2,1);
  --accent: var(--ink);
  --accent-tint: var(--paper-sunk);
}
:root:not([data-theme="light"]) { --prefers-dark: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #1b1916; --paper-raised: #25221d; --paper-sunk: #16140f; --bench: #2a2620; --bench-line: rgb(255 240 200 / 5%); --bench-raised: #1f1c17;
    --ink: #ece5d6; --ink-2: #bdb4a3; --ink-3: #a59c8b; --rule: #3f3a30; --rule-strong: #5e5647;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 22px rgb(0 0 0 / 28%);
    --p1: #ec8f75; --p2: #6cc3bb; --p3: #dfb65f; --p4: #92b9e8; --p5: #aecd7c; --p6: #e09dbc;
    --on-accent: #1b1916;
    --t1: #5a2e22; --t2: #1f4a47; --t3: #57431a; --t4: #27405f; --t5: #3a4c1f; --t6: #562a3f; --t-ink: #f3ecdd;
    --good: #a9cf85; --good-bg: #2a3a20; --warn: #e2bd6a; --warn-bg: #43361a; --bad: #ee9a82; --bad-bg: #4a261d;
    --term-bg: #12100d;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #1b1916; --paper-raised: #25221d; --paper-sunk: #16140f; --bench: #2a2620; --bench-line: rgb(255 240 200 / 5%); --bench-raised: #1f1c17;
  --ink: #ece5d6; --ink-2: #bdb4a3; --ink-3: #a59c8b; --rule: #3f3a30; --rule-strong: #5e5647;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 22px rgb(0 0 0 / 28%);
  --p1: #ec8f75; --p2: #6cc3bb; --p3: #dfb65f; --p4: #92b9e8; --p5: #aecd7c; --p6: #e09dbc;
  --on-accent: #1b1916;
  --t1: #5a2e22; --t2: #1f4a47; --t3: #57431a; --t4: #27405f; --t5: #3a4c1f; --t6: #562a3f; --t-ink: #f3ecdd;
  --good: #a9cf85; --good-bg: #2a3a20; --warn: #e2bd6a; --warn-bg: #43361a; --bad: #ee9a82; --bad-bg: #4a261d;
  --term-bg: #12100d;
}
.p1 { --accent: var(--p1); --accent-tint: var(--t1); }
.p2 { --accent: var(--p2); --accent-tint: var(--t2); }
.p3 { --accent: var(--p3); --accent-tint: var(--t3); }
.p4 { --accent: var(--p4); --accent-tint: var(--t4); }
.p5 { --accent: var(--p5); --accent-tint: var(--t5); }
.p6 { --accent: var(--p6); --accent-tint: var(--t6); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 1rem); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: 1.0625rem; line-height: 1.62;
  font-optical-sizing: auto; font-kerning: normal; text-rendering: optimizeLegibility;
  overflow-wrap: break-word; -webkit-font-smoothing: antialiased;
}
@media (min-width: 40rem) { body { font-size: 1.125rem; } }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.2; text-wrap: balance; margin: 0; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration-color: var(--rule-strong); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--accent); }
strong, b { font-weight: 650; }
code { font-family: var(--mono); font-size: .86em; background: var(--paper-sunk); padding: .08em .3em; border-radius: .25em; overflow-wrap: anywhere; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.no-js { padding: 2rem; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.p0 :focus-visible, :root :focus-visible { outline-color: var(--accent, var(--ink)); }
::selection { background: var(--accent-tint, var(--t3)); color: var(--t-ink); }
.sans { font-family: var(--sans); }
.mono { font-family: var(--mono); }
.nums { font-variant-numeric: lining-nums tabular-nums; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Buttons */
.btn {
  font-family: var(--sans); font-weight: 550; font-size: .9375rem; line-height: 1.25;
  display: inline-flex; align-items: center; justify-content: center; gap: .45em; text-align: center;
  min-height: 2.75rem; padding: .55em 1em; max-width: 100%;
  background: var(--paper-raised); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  text-decoration: none; transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: .2em; }
.btn.quiet:hover:not(:disabled) { color: var(--ink); }
.btn.small { min-height: 2.25rem; font-size: .875rem; padding: .35em .7em; }
.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.icon { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.16em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Inputs */
.input, .textarea, .select {
  font-family: var(--sans); font-size: 1rem; width: 100%; min-height: 2.75rem;
  background: var(--paper-raised); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: .5em .7em; line-height: 1.4;
}
.textarea { resize: vertical; min-height: 5.5em; display: block; }
.field-label { display: block; font-family: var(--sans); font-size: .875rem; font-weight: 600; margin-bottom: .3em; }
.hint { font-family: var(--sans); font-size: .8125rem; color: var(--ink-2); margin: .3em 0 0; line-height: 1.4; }
input[type="range"] { width: 100%; accent-color: var(--accent); height: 2.25rem; margin: 0; }

/* Tiles: the book's motif. */
.tile {
  display: inline-block; font-family: var(--mono); font-size: .875em; line-height: 1.35; color: var(--t-ink);
  background: var(--t3); border-radius: .28em; padding: .14em .36em; white-space: pre-wrap; overflow-wrap: anywhere;
}
.tile.c1 { background: var(--t1); } .tile.c2 { background: var(--t2); } .tile.c3 { background: var(--t3); }
.tile.c4 { background: var(--t4); } .tile.c5 { background: var(--t5); } .tile.c6 { background: var(--t6); }
.tile .ws { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
}