/* Chat Computer look: black text on a white background and nothing else. The font is Atkinson Hyperlegible Next
   (by the Braille Institute, made so that letters that are easy to confuse look different), and code is in
   Atkinson Hyperlegible Mono. Both come with Chat Computer (fonts/, SIL Open Font License 1.1). Characters they
   don't have (Chinese, Japanese, Korean, Greek, Cyrillic, emoji) come from the system's fonts.
   Full white and full black give the most contrast a screen can show (21:1). Off-whites from #FAFAFA to
   #F0F0F0 are only 4-13% dimmer, so greying the background would cost contrast without making the screen
   much less bright; to dim it, turn down the screen's brightness. No dark mode, and no grey text but one: the
   empty message box's hint, dimmed (--dim), with the send button grey in the same shade until there's
   something to send, as in ChatGPT. The other colour is the light grey of your messages' bubbles (black on it
   is still 18:1), which sets your words apart from Claude's the way chat apps do. Sizes are in rem. The screen sets the root size for this
   monitor and viewing distance (chatcomputer/ui/layout.py), so the letters' x-height covers 0.3 degrees of
   view and lines hold about 70 characters. */
@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800;
  src: url("fonts/AtkinsonHyperlegibleNext.ttf") format("truetype");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-style: italic; font-weight: 200 800;
  src: url("fonts/AtkinsonHyperlegibleNext-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 200 800;
  src: url("fonts/AtkinsonHyperlegibleMono.ttf") format("truetype");
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono"; font-style: italic; font-weight: 200 800;
  src: url("fonts/AtkinsonHyperlegibleMono-Italic.ttf") format("truetype");
}
:root {
  --ground: #FFFFFF;
  --ink: #000000;
  --bubble: #EDEDED;
  --dim: #9A9A9A;
  --sans: "Atkinson Hyperlegible Next", sans-serif;
  --mono: "Atkinson Hyperlegible Mono", monospace;
}
* { box-sizing: border-box; }
html { font-size: var(--co-size, 24px); }
html, body { margin: 0; height: 100%; background: var(--ground); color: var(--ink); }
body { font-family: var(--sans); font-size: 1rem; line-height: 1.5; }
/* Selected text (to copy it) is shown the other way round: white on black. */
::selection { background: var(--ink); color: var(--ground); }

/* Claude's words as written (Markdown), in the same font and size as everything else. */
.md p { margin: 0 0 1em; }
.md p:last-child { margin-bottom: 0; }
.md h1 { font-size: 1.5rem; }
.md h2 { font-size: 1.25rem; }
.md h3, .md h4 { font-size: 1rem; }
.md h1, .md h2, .md h3, .md h4 { font-weight: bold; line-height: 1.3; margin: 1.2em 0 0.5em; }
.md > :first-child { margin-top: 0; }
.md ul, .md ol { margin: 0 0 1em; padding-left: 1.5em; }
.md li { margin: 0.25em 0; }
.md li.task { list-style: none; margin-left: -1.5em; }
.md li.task::before { content: "\2610\00a0 "; }
.md li.task.done::before { content: "\2611\00a0 "; }
.md li.task.done { text-decoration: line-through; }
/* Code: the mono font at the same size as the words around it (its letters are the same height). Blocks of
   code get a thin black frame. */
.md code, .md pre { font-family: var(--mono); font-size: 1em; }
.md pre { margin: 0 0 1em; padding: 0.75em 1em; border: 1px solid var(--ink); white-space: pre-wrap; }
.md blockquote { margin: 0 0 1em; padding-left: 1em; border-left: 2px solid var(--ink); }
.md table { border-collapse: collapse; margin: 0 0 1em; }
.md th, .md td { text-align: left; padding: 0.4em 1em 0.4em 0; border-bottom: 1px solid var(--ink); vertical-align: top; }
.md th { font-weight: bold; }
.md hr { border: 0; border-top: 1px solid var(--ink); margin: 1.2em 0; }
.md .link { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }