/* Quicker the Second Time. Light: the page of an 1885 monograph, iron-gall ink on rag paper, the reader's own
   marks in blue-black, corrections in red pencil. Dark: the same, read by lamplight. */
:root {
  --ground:#f1ece2; --ground-2:#e7e0d2; --ink:#1d1a17; --ink-soft:#5f574c; --rule:#cfc5b3; --rule-strong:#a99d87;
  --his:#7a4a24; --his-soft:rgba(122,74,36,.18); --you:#24508a; --recall:#2f7d5b; --red:#b3261e;
  --a:#7a4a24; --b:#c08a2a; --c:#4d6b8a; --m:#8a5aa6; --s:#2f7d5b; --d:#c45a2c;
  --night:rgba(36,40,70,.08); --mark:#f5e3b5; --link:#7a3a14;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#14120f; --ground-2:#1d1a16; --ink:#ece4d6; --ink-soft:#a99f8f; --rule:#2e2a25; --rule-strong:#4b453d;
    --his:#e2b07a; --his-soft:rgba(226,176,122,.2); --you:#8db7ef; --recall:#7fd0a8; --red:#ff7a6b;
    --a:#e2b07a; --b:#f0cf6a; --c:#9bb7d6; --m:#cfa2ea; --s:#7fd0a8; --d:#ff9a6b;
    --night:rgba(160,170,255,.08); --mark:#3d3317; --link:#f0c48e;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground:#14120f; --ground-2:#1d1a16; --ink:#ece4d6; --ink-soft:#a99f8f; --rule:#2e2a25; --rule-strong:#4b453d;
  --his:#e2b07a; --his-soft:rgba(226,176,122,.2); --you:#8db7ef; --recall:#7fd0a8; --red:#ff7a6b;
  --a:#e2b07a; --b:#f0cf6a; --c:#9bb7d6; --m:#cfa2ea; --s:#7fd0a8; --d:#ff9a6b;
  --night:rgba(160,170,255,.08); --mark:#3d3317; --link:#f0c48e;
  color-scheme: dark;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--ground); color:var(--ink); font-family:"Fraunces",Georgia,serif; line-height:1.62; font-size:1.06rem; }
main { max-width:46rem; margin:0 auto; padding:4.6rem 1rem 3rem; }
a { color:var(--link); text-underline-offset:2px; }
:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
p { margin:0 0 1rem; }
.kicker, label, button, select, .readout, .counts, figcaption, .note, .tags, .mono, summary { font-family:"Martian Mono",ui-monospace,monospace; }
.kicker { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 .9rem; }
h1 { font-size:clamp(2.6rem,10vw,4.6rem); line-height:.96; margin:0 0 1rem; letter-spacing:-.02em; font-weight:600; }
.dek { font-size:1.15rem; margin:0 0 2rem; }
h2 { font-size:1.6rem; line-height:1.2; margin:3.4rem 0 1rem; font-weight:600; letter-spacing:-.01em; }
h3 { font-size:1.08rem; margin:1.4rem 0 .5rem; }
.v { font-variant-numeric:lining-nums tabular-nums; }
var { font-style:italic; }
blockquote { margin:1.2rem 0 1.4rem; padding:.2rem 0 .2rem 1rem; border-left:3px solid var(--his-soft); }
blockquote p { margin:0 0 .4rem; }
blockquote footer { font-size:.86rem; color:var(--ink-soft); }
q { quotes:"\201C" "\201D" "\2018" "\2019"; }
.note { font-size:.76rem; line-height:1.65; color:var(--ink-soft); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#data-error { background:var(--mark); padding:.6rem .8rem; border-radius:4px; font-size:.9rem; }

/* instruments */
.instrument { margin:1.6rem -1rem 2.4rem; padding:1.1rem 1rem 1rem; background:var(--ground-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
@media (min-width:760px) { .instrument { margin-left:-5rem; margin-right:-5rem; padding:1.3rem 1.6rem 1.2rem; border:1px solid var(--rule); border-radius:6px; } }
.instrument h2 { margin-top:.2rem; }
.instrument .lede { font-size:.98rem; margin:0 0 1rem; }
label { font-size:.74rem; letter-spacing:.02em; color:var(--ink-soft); }
select, input[type=text] { font:inherit; font-size:.85rem; color:var(--ink); background:var(--ground); border:1px solid var(--rule-strong); border-radius:4px; padding:.35rem .45rem; }
input[type=text] { width:100%; font-size:1.05rem; letter-spacing:.06em; margin:.35rem 0 .5rem; }
button { font-size:.78rem; color:var(--ink); background:var(--ground); border:1px solid var(--rule-strong); border-radius:4px; padding:.45rem .8rem; cursor:pointer; }
button.primary { background:var(--his); color:var(--ground); border-color:var(--his); }
button.quiet { border-style:dashed; color:var(--ink-soft); }
button:hover { filter:brightness(1.06); }
.setup { display:flex; flex-wrap:wrap; gap:.7rem 1.1rem; align-items:flex-end; }
.setup label { display:flex; flex-direction:column; gap:.25rem; }
.check-row { display:inline-flex !important; flex-direction:row !important; align-items:center; gap:.4rem; }
.stage { margin-top:.6rem; }
.phase { font-family:"Martian Mono",ui-monospace,monospace; font-size:.82rem; min-height:1.4em; margin:.2rem 0 .6rem; }
.row { display:flex; flex-wrap:wrap; gap:.35rem; margin:.4rem 0 .8rem; min-height:2.6rem; }
.syl { font-family:"Martian Mono",ui-monospace,monospace; font-size:1.18rem; letter-spacing:.04em; padding:.25rem .45rem; border-radius:4px; border:1px solid var(--rule); background:var(--ground); min-width:3.6rem; text-align:center; transition:none; }
.syl.acc { border-bottom:3px solid var(--rule-strong); }
.syl.on { background:var(--his); color:var(--ground); border-color:var(--his); }
.syl.hid { color:transparent; background:repeating-linear-gradient(135deg,var(--ground),var(--ground) 6px,var(--ground-2) 6px,var(--ground-2) 12px); }
.syl.ok { color:var(--you); background:var(--ground); border-color:var(--you); }
.syl.rest { border-color:var(--red); }
.controls { display:flex; gap:.6rem; flex-wrap:wrap; margin:.4rem 0; }
.counts { font-size:.72rem; color:var(--ink-soft); margin:.4rem 0 0; }
.recite label, .recall label { display:block; }
.mine { margin-top:1.2rem; border-top:1px dashed var(--rule-strong); padding-top:.4rem; }
.mine ol { padding-left:1.2rem; font-size:.92rem; }
.mine li { margin:.3rem 0; }
.mine li button { margin-left:.4rem; padding:.2rem .5rem; }
details.how, details.more { margin-top:1rem; }
summary { cursor:pointer; font-size:.78rem; color:var(--ink-soft); }
details ul, details ol { font-size:.94rem; }
.finds li { margin:0 0 .7rem; }
.finds-all li { margin:0 0 .4rem; }
.retell li { margin:0 0 .6rem; }
.tags { display:block; font-size:.68rem; color:var(--ink-soft); }
.toggles { display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin:0 0 .6rem; }
.readout { font-size:.8rem; margin:.6rem 0 0; min-height:2.6em; }

/* charts */
.chart { margin:0; }
.chart svg { display:block; width:100%; height:auto; overflow:visible; font-family:"Martian Mono",ui-monospace,monospace; }
.chart figcaption { font-size:.72rem; line-height:1.6; color:var(--ink-soft); margin-top:.5rem; }
.grid { stroke:var(--rule); stroke-width:1; }
.grid.v { stroke-dasharray:2 4; }
.ax { fill:var(--ink-soft); font-size:11px; }
.dot { stroke:var(--ground-2); stroke-width:.8; cursor:pointer; opacity:.9; }
.dot.a { fill:var(--a); } .dot.b { fill:var(--b); } .dot.c { fill:var(--c); }
.dot.flag { stroke:var(--red); stroke-width:2.2; }
.mean-printed { stroke:var(--ink); stroke-width:2.4; }
.mean-rows { stroke:var(--red); stroke-width:2; stroke-dasharray:5 3; }
.formula-pt { fill:none; stroke:var(--ink-soft); stroke-width:1.4; }
.formula-line { fill:none; stroke:var(--ink-soft); stroke-width:1.2; stroke-dasharray:4 4; }
.exp-line { fill:none; stroke:var(--red); stroke-width:1.8; stroke-dasharray:1 4; stroke-linecap:round; }
.night { fill:var(--night); }
.line { fill:none; stroke-width:2; }
.pt { stroke:var(--ground-2); stroke-width:1; }
.line.e { stroke:var(--his); stroke-width:2.6; } .pt.e { fill:var(--his); }
.pt.e-printed { fill:var(--ground); stroke:var(--his); stroke-width:1.4; }
.line.m { stroke:var(--m); } .pt.m { fill:var(--m); }
.line.s { stroke:var(--s); } .pt.s { fill:var(--s); }
.line.d { stroke:var(--d); } .pt.d { fill:var(--d); }
.ebb-line { fill:none; stroke:var(--his); stroke-width:1.6; stroke-dasharray:5 4; opacity:.7; }
.pt-you { fill:var(--you); stroke:var(--ground); stroke-width:1.2; }
.pt-recall { fill:none; stroke:var(--recall); stroke-width:2; }
.key { padding:0 .2em; border-bottom:3px solid; }
.key.a { border-color:var(--a); } .key.b { border-color:var(--b); } .key.c { border-color:var(--c); }
.key.e { border-color:var(--his); } .key.m { border-color:var(--m); } .key.s { border-color:var(--s); } .key.d { border-color:var(--d); }
.key.you { border-color:var(--you); } .key.recall { border-color:var(--recall); }

/* the book: check and sources */
.book { margin-top:3rem; border-top:1px solid var(--rule); padding-top:.4rem; }
.book h2 { font-size:1.25rem; margin-top:1.8rem; }
.sources { font-size:.92rem; padding-left:1.2rem; }
.sources li { margin:0 0 .6rem; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto !important; } }