/* The notebook reader shares the colours and fonts in style.css. */
[hidden] { display: none !important; }
.notebook-wrap { width: min(100% - 4rem, 820px); margin: 44px auto 80px; }
.back-link { font-size: 14px; text-decoration: none; color: var(--green); }
.notebook-heading { padding-block: 35px 30px; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.notebook-heading h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.18; letter-spacing: -.035em; margin: 18px 0; }
.notebook-description { color: var(--muted); font-size: 16px; max-width: 640px; }
.notebook-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.download-button, .notebook-toolbar button { border: 1px solid var(--line); border-radius: 4px; padding: 9px 15px; font-size: 14px; text-decoration: none; cursor: pointer; background: transparent; color: var(--green); line-height: 1.6; }
.download-button { background: var(--green); color: white; border-color: var(--green); }
.download-button:hover { color: white; background: #194a33; }
.notebook-toolbar button:hover { background: var(--tint); }
.download-button span { margin-left: 12px; }
.notebook-status { color: var(--muted); }
.notebook-content { overflow-wrap: anywhere; }
.notebook-cell { margin-block: 24px; min-width: 0; }
.notebook-content h1 { font-size: 32px; line-height: 1.3; margin: 25px 0 18px; }
.notebook-content h2 { font-size: 28px; line-height: 1.4; margin: 36px 0 18px; }
.notebook-content h3 { font-size: 23px; line-height: 1.4; margin: 25px 0 15px; }
.notebook-content h4 { margin: 20px 0 12px; }
.notebook-content p { margin-block: 14px; }
.notebook-content a { color: var(--green); }
.notebook-content ul, .notebook-content ol { padding-left: 26px; }
.notebook-content li { margin-block: 6px; }
.notebook-content blockquote { margin: 22px 0; padding: 2px 0 2px 20px; border-left: 2px solid #b4c7b5; color: var(--muted); }
.notebook-content pre { max-width: 100%; overflow-x: auto; background: #f0f3ee; border: 1px solid var(--line); border-radius: 4px; padding: 18px 20px; font-size: 14px; line-height: 1.7; white-space: pre; tab-size: 4; overflow-wrap: normal; }
.notebook-content code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; font-size: .88em; }
.notebook-content pre code { font-size: inherit; }
.notebook-content :not(pre) > code { padding: 2px 5px; background: var(--tint); border-radius: 3px; }
.cell-label { color: var(--muted); font: 12px ui-monospace, monospace; display: block; margin-bottom: 8px; }
.cell-input pre { margin-top: 0; }
.cell-output { margin-block: 14px; overflow-x: auto; }
.cell-output pre { background: transparent; border: 0; padding: 10px 0; }
.cell-output img { display: block; max-width: 100%; height: auto; margin: 20px auto; }
.notebook-content video { display: block; width: 100%; max-width: 100%; height: auto; max-height: 75vh; background: #19241f; border-radius: 4px; margin: 20px auto; }
.saved-animation { margin-block: 20px; }
.animation-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.animation-controls button { min-width: 76px; min-height: 44px; border: 1px solid var(--line); background: var(--paper); color: var(--green); border-radius: 4px; cursor: pointer; }
.animation-controls input { flex: 1; min-width: 80px; height: 44px; accent-color: var(--green); }
.animation-controls output { color: var(--muted); font: 13px ui-monospace, monospace; }
.output-note { font-size: 14px; color: var(--muted); }
.table-scroll { overflow-x: auto; }
.notebook-content table { border-collapse: collapse; font-size: 14px; margin-block: 18px; width: 100%; }
.notebook-content th, .notebook-content td { border-bottom: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.notebook-content hr { border: 0; border-top: 1px solid var(--line); margin-block: 30px; }
.math-display { display: block; overflow-x: auto; overflow-y: hidden; padding-block: 8px; }
.math-inline { overflow-wrap: normal; }
.katex { font-size: 1.08em; }
.code-hidden .cell-input { display: none; }
@media (max-width: 600px) {
  .notebook-wrap { width: calc(100% - 2.5rem); margin-top: 30px; }
  .notebook-content pre { padding: 14px; }
  .notebook-content h2 { font-size: 25px; }
}
@media print {
  .notebook-wrap { width: 100%; margin: 0; }
  .notebook-toolbar, .back-link { display: none; }
  .notebook-content pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  .notebook-heading { padding-top: 0; }
  .cell-output img { max-height: 650px; }
}