/* Theme "book": a page from a nineteenth-century reprint, set in the Fell types, headings rubricated. */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=IM+Fell+English+SC&family=IM+Fell+Double+Pica:ital@0;1&display=swap');

:root {
  --paper: #f6f0e1;
  --paper-deep: #ebe2cc;
  --ink: #2a2118;
  --ink-soft: #5b4d3d;
  --rule: #8c7b62;
  --accent: #8a2b1d;
  --fell: "IM Fell English", "IM Fell Double Pica", Georgia, serif;
  --fell-sc: "IM Fell English SC", "IM Fell English", Georgia, serif;
  --fell-display: "IM Fell Double Pica", "IM Fell English", Georgia, serif;
}

* { box-sizing: border-box; }
html { background: #3a3128; }
body { margin: 0; padding: 1.2rem 0.75rem 3rem; color: var(--ink); font-family: var(--fell); font-size: 20px; line-height: 1.5; -webkit-font-smoothing: antialiased; }

.paper {
  max-width: 800px; margin: 0 auto; padding: 1.4rem 4rem 3rem;
  background: radial-gradient(ellipse at 15% 5%, rgba(160,120,60,0.10), transparent 45%), radial-gradient(ellipse at 90% 100%, rgba(160,120,60,0.14), transparent 50%), var(--paper);
  box-shadow: 0 1px 0 #d9cfb6, 0 12px 40px rgba(0,0,0,0.45);
}
a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }
a:hover { background: var(--paper-deep); }

/* Running head and folio, then the chapter opening */
.masthead { text-align: center; }
.ears { display: flex; justify-content: space-between; font-family: var(--fell-sc); font-size: 0.9rem; letter-spacing: 0.08em; border-bottom: 1px solid var(--rule); padding-bottom: 0.25rem; color: var(--ink-soft); }
.title { font-family: var(--fell-display); font-weight: 400; font-size: clamp(1.6rem, 4.4vw, 2.9rem); line-height: 1.1; margin: 1.8rem 0 0.3rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.dateline { display: flex; justify-content: center; gap: 0.6rem; flex-wrap: wrap; font-family: var(--fell); font-style: italic; font-size: 1rem; color: var(--ink-soft); padding: 0.2rem 0 0.8rem; }
.sep { color: var(--accent); font-style: normal; }

.notice p { text-align: center; font-size: 1rem; max-width: 40rem; margin: 0.6rem auto 0.4rem; }
.notice .load-status { font-family: var(--fell-sc); font-size: 0.85rem; letter-spacing: 0.06em; color: var(--accent); margin: 0.2rem auto 1.4rem; }
.notice .load-status::before { content: "\2766  "; }

/* Compose */
.compose { padding-top: 0.4rem; }
.copy-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.4rem 1rem; }
.copy-row .label { }
.label, .control label { display: block; font-family: var(--fell-sc); font-weight: 400; font-size: 0.9rem; letter-spacing: 0.06em; margin-bottom: 0.3rem; color: var(--ink-soft); }
.copy-row .picker-label { display: flex; align-items: baseline; gap: 0.5rem; margin-left: auto; margin-bottom: 0.4rem; flex: 1 1 18rem; min-width: 0; white-space: nowrap; }
select#picker { font-family: var(--fell); font-style: italic; font-size: 0.95rem; letter-spacing: 0; color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 0.1rem 0.3rem; flex: 1 1 8rem; max-width: 26rem; min-width: 0; cursor: pointer; }
select#picker:focus { outline: none; border-bottom-color: var(--accent); }

textarea { width: 100%; font-family: var(--fell); font-size: 1.45rem; line-height: 1.4; color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--rule); padding: 0.3rem 0 0.4rem; resize: none; overflow: hidden; outline: none; }
textarea:focus { border-bottom-color: var(--accent); }
textarea::placeholder { color: #9a8b72; font-style: italic; }

.controls { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1.2rem 2rem; align-items: end; margin: 1rem 0 1.2rem; }
@media (max-width: 960px) { .controls { grid-template-columns: 1fr 1fr; } .controls .buttons { grid-column: 1 / -1; justify-content: center; } }
@media (max-width: 560px) { .controls { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .controls { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1.2rem 2rem; align-items: end; margin: 1rem 0 1.2rem; } }
.control output { font-variant-numeric: tabular-nums; color: var(--accent); }
input[type="range"] { width: 100%; appearance: none; height: 1px; background: var(--rule); margin: 0.9rem 0 0.4rem; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 1px solid var(--ink); cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 1px solid var(--ink); cursor: pointer; }

.buttons { display: flex; gap: 0.8rem; }
.btn { font-family: var(--fell-sc); font-size: 1.05rem; letter-spacing: 0.08em; color: var(--ink); background: transparent; border: 1px solid var(--ink); padding: 0.5rem 1.2rem; cursor: pointer; box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--ink); }
.btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--accent); }
.btn:active:not(:disabled) { background: var(--paper-deep); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-secondary { color: var(--ink-soft); }

/* The printed text, as a chapter */
.rule-heavy { border: none; height: auto; margin: 0.8rem 0 0.4rem; text-align: center; }
.rule-heavy::before { content: "\2766"; color: var(--accent); font-size: 1.3rem; display: block; line-height: 1; }
.byline { text-align: center; font-family: var(--fell); font-style: italic; font-size: 1rem; color: var(--ink-soft); margin: 0.5rem 0 1.2rem; }
.body-copy { font-size: 1.3rem; line-height: 1.6; text-align: justify; hyphens: auto; }
.output { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 4rem; }
.output.has-copy::first-letter { font-family: var(--fell-display); font-size: 3.6em; float: left; line-height: 0.8; padding: 0.1em 0.12em 0 0; color: var(--accent); }
.out-prompt { font-family: var(--fell-sc); }
.caret { color: var(--accent); animation: blink 0.9s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.error { color: var(--accent); font-style: italic; }

.colophon { margin-top: 2.5rem; font-size: 0.9rem; color: var(--ink-soft); border-top: 1px solid var(--rule); padding-top: 0.8rem; }
.colophon .rule-heavy { display: none; }
.fine-print { font-size: 0.8rem; font-style: italic; }
@media (max-width: 600px) { body { font-size: 18px; padding: 0.5rem 0.25rem 2rem; } .paper { padding: 1.2rem 1.4rem 2rem; } .body-copy { font-size: 1.15rem; } }

/* Theme picker, centred between the two ears, kept quiet. */
.ears { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.ears .ear:first-child { text-align: left; }
.ear-right { text-align: right; }
.theme-pick { display: flex; align-items: center; justify-content: center; gap: 0.35rem; opacity: 0.5; font-size: 0.7rem; transition: opacity 120ms ease; }
.theme-pick:hover, .theme-pick:focus-within { opacity: 1; }
.theme-pick select { font: inherit; letter-spacing: 0.05em; text-transform: none; color: inherit; background: transparent; border: none; border-bottom: 1px solid currentColor; border-radius: 0; padding: 0 0.2rem; cursor: pointer; }

/* shown only when the wasm runtime ended up single-threaded */
.notice .speed-note { margin-top: -1rem; }
.notice .speed-note a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }