:root { color-scheme: light; --blue: #0d6efd; --ink: #223249; --muted: #566579; --line: #d8e1ec; }
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.65 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: #f5f7fb; }
a { color: #0759c8; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
button, input { font: inherit; }
button, summary, a, input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #e7a400; outline-offset: 4px; }
.site-header { background: var(--blue); color: white; }
.header-inner { max-width: 920px; margin: auto; padding: 25px 28px 38px; }
.home-link { color: white; font-size: .9rem; }
h1 { margin: 20px 0 0; font-size: 2.7rem; line-height: 1.15; }
.site-header p { margin: 10px 0 0; font-size: clamp(1.1rem, 3vw, 1.45rem); }
.page { max-width: 920px; margin: 30px auto 70px; padding: 0 28px; }
.page-intro { color: var(--muted); margin: 0 0 22px; }
.panel { background: white; border: 1px solid var(--line); border-radius: 13px; margin: 16px 0; overflow: clip; }
.panel > summary { display: flex; align-items: center; gap: 13px; min-height: 70px; padding: 17px 22px; cursor: pointer; list-style: none; background: #fff; }
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary:hover { background: #f0f6ff; }
.panel[open] > summary { background: #edf4ff; }
.panel-symbol { flex: 0 0 28px; height: 28px; display: grid; place-items: center; background: #dceaff; border-radius: 7px; color: #064fac; font-size: 1.35rem; line-height: 1; font-weight: 600; }
.panel-symbol::before { content: "+"; }
.panel[open] > summary > .panel-symbol::before { content: "\2212"; }
h2, h3 { font-size: 1.18rem; line-height: 1.4; margin: 0; }
.panel-hint { margin-left: auto; font-size: .85rem; color: var(--muted); }
.panel-inner { padding: 7px 23px 20px; }
.panel-content.animating { overflow: hidden; }
.nested { border-radius: 10px; margin-top: 20px; }
.nested > summary { min-height: 62px; padding: 15px 17px; }
.nested h3 { font-size: 1.06rem; }
.nested .panel-inner { padding: 6px 19px 15px; }
p { margin: 15px 0; }
.milestone { color: #445975; font-size: .9rem; font-weight: 600; }
.tweet { margin: 20px 0; }
.tweet img { display: block; width: 100%; max-width: 590px; height: auto; border-radius: 8px; }
figcaption, .source-links { font-size: .83rem; color: var(--muted); line-height: 1.55; }
figcaption { margin-top: 10px; max-width: 590px; }
.proposal-title { text-align: center; font-size: min(1em, 3.1vw); }
.historical-document { max-width: 590px; margin: 22px auto; }
.historical-document img { display: block; width: 100%; max-width: 590px; height: auto; border: 1px solid var(--line); border-radius: 8px; }
.opcode-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 22px 0 12px; font-size: .9rem; line-height: 1.5; }
.opcode-table caption { text-align: left; font-weight: 650; margin-bottom: 10px; }
.opcode-table th, .opcode-table td { text-align: left; vertical-align: top; padding: 2px 8px; border: 0; }
.opcode-table thead { background: transparent; }
.opcode-table code { white-space: nowrap; }
.opcode-table th:first-child { width: 18%; }
.opcode-table th:nth-child(2) { width: 19%; }
.revolution-heading { color: #0759c8; font-size: 1.2rem; font-weight: 650; line-height: 1.4; margin: 26px 0 12px; }
.example-question { font-weight: 650; color: #0759c8; }
.prediction-question { margin-inline-start: 1.5em; }
.generation-example { background: #f1f5fb; border-radius: 8px; padding: 16px; font-size: .9rem; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.generation-example code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.generation-in-progress code::after { content: " _"; color: #626f80; }
.footnote { font-size: .82rem; line-height: 1.6; color: var(--muted); margin-top: 22px; scroll-margin-top: 24px; }
#word-footnote-ref { scroll-margin-top: 24px; }
.footnote-mark { color: #0759c8; padding-left: 2px; }
.footnote-mark, .footnote-mark:hover, .footnote-backlink, .footnote-backlink:hover { text-decoration: none; }
.chat { border: 1px solid #cddbea; border-radius: 10px; padding: 18px; margin: 22px 0; background: #f8fafc; }
.chat-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
h4 { font-size: 1.1rem; margin: 0; }
.restart { background: white; color: #0759c8; border: 1px solid #b7c8de; border-radius: 6px; min-height: 44px; padding: 5px 12px; cursor: pointer; font-size: .85rem; }
.chat-note { font-size: .85rem; color: var(--muted); line-height: 1.5; margin: 10px 0 15px; }
#eliza ol > li + li { margin-block-start: .5lh; }
.language-list > li + li { margin-block-start: .5lh; }
.transcript { height: 310px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #dde5ee; background: white; border-radius: 8px; padding: 14px; scroll-behavior: auto; }
.message { max-width: 92%; width: fit-content; padding: 10px 14px; border-radius: 10px; margin: 0 0 12px; background: #edf3fb; overflow-wrap: anywhere; }
.message.user { margin-left: auto; background: #0b60d4; color: white; }
.message strong { display: block; font-size: .76rem; margin-bottom: 2px; }
.message p { margin: 0; line-height: 1.5; }
.chat-form label { display: block; font-size: .9rem; font-weight: 600; margin: 14px 0 6px; }
.input-row { display: flex; gap: 9px; }
.input-row input { min-width: 0; flex: 1; width: 100%; min-height: 48px; border: 1px solid #abbdd2; background: white; color: var(--ink); border-radius: 7px; padding: 9px 12px; font-size: 16px; }
.input-row button { color: white; background: #0b60d4; border: 0; border-radius: 7px; min-height: 48px; padding: 9px 18px; cursor: pointer; }
button:hover { filter: brightness(.96); }
button:disabled, input:disabled { opacity: .6; cursor: default; }
.chat-status { margin: 9px 0 0; font-size: .85rem; color: var(--muted); }
.chat-status:empty { display: none; }
@media (max-width: 560px) {
  body { font-size: 16px; }
  .header-inner { padding: 21px 20px 30px; }
  .page { padding: 0 12px; margin-top: 23px; }
  .panel > summary { padding: 15px; gap: 10px; }
  .panel-inner { padding: 5px 14px 15px; }
  .nested > summary { padding: 14px 12px; }
  .nested .panel-inner { padding: 4px 12px 12px; }
  .panel-hint { display: none; }
  .example-question { font-size: .95rem; }
  .generation-example { font-size: .75rem; padding: 10px; }
  .opcode-table { font-size: .8rem; }
  .opcode-table th:first-child, .opcode-table th:nth-child(2) { width: 26%; }
  .opcode-table th, .opcode-table td { padding: 2px 5px; }
  .chat { padding: 12px; }
  .transcript { height: 285px; padding: 10px; }
  .input-row { flex-wrap: wrap; }
  .input-row input { flex-basis: 100%; }
  .input-row button { width: 100%; }
  .message { max-width: 96%; }
}

/* Diagrams stay readable within the nested panels on phones and desktops. */
.neural-diagram { margin: 22px 0; }
.neural-diagram img { display: block; width: 100%; max-width: 420px; height: auto; }
.neural-diagram figcaption { max-width: 520px; }
.mnist-figure { margin: 22px 0; }
.mnist-examples { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; max-width: 480px; padding: 16px; background: #f1f5fb; border-radius: 10px; }
.mnist-digit { min-width: 0; text-align: center; }
.mnist-digit img { display: block; width: 100%; height: auto; image-rendering: pixelated; border-radius: 4px; }
.mnist-digit span { display: block; margin-top: 4px; font-size: .85rem; color: var(--muted); }
@media (max-width: 560px) {
  .mnist-examples { gap: 8px; padding: 10px; }
}

/* Keep the computer overview compact, including at phone widths. */
.computer-history-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .95rem; line-height: 1.5; }
.computer-history-table th, .computer-history-table td { padding: 5px 8px; text-align: left; vertical-align: top; }
.computer-history-table thead { border-bottom: 1px solid var(--line); }
.computer-history-table tbody th { font-weight: 500; }
.computer-history-table th:first-child { width: 40%; }
.computer-history-table th:nth-child(2) { width: 25%; }
.programming-detail { margin: 20px 0 12px; font-size: .9rem; }
.programming-detail > summary { color: #0759c8; font-weight: 600; cursor: pointer; padding-block: 8px; min-height: 44px; }
.programming-detail > .panel-content > .panel-inner { padding: 4px 12px 12px; }
@media (max-width: 560px) {
  .computer-history-table { font-size: .85rem; }
  .computer-history-table th, .computer-history-table td { padding: 5px 4px; }
  .programming-detail > .panel-content > .panel-inner { padding: 3px 8px 10px; }
  .programming-detail .opcode-table { font-size: .75rem; }
  .programming-detail .opcode-table th, .programming-detail .opcode-table td { padding: 2px 3px; }
}

/* Compare the two neurons side by side, then stack them on smaller screens. */
.neuron-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 22px 0; }
.neuron-comparison .neural-diagram { margin: 0; min-width: 0; }
.neuron-label { color: #0759c8; font-size: 1.1rem; line-height: 1.4; margin: 0 0 12px; }
.neuron-comparison img { aspect-ratio: 14 / 13; object-fit: contain; object-position: top; }
@media (max-width: 640px) {
  .neuron-comparison { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}