/* ===========================================================================
   Build & Train GPT-2 from Scratch in NumPy - research-paper stylesheet
   Classic paper serif. No gradients, no decoration. Restrained palette.
   =========================================================================== */

/* --- design tokens ------------------------------------------------------- */
:root {
  --paper: #ffffff;
  --ink: #1a1a1a;
  --muted: #565656;
  --faint: #828282;
  --rule: #e4e4e4;
  --rule-strong: #c7c7c7;
  --accent: #7a2e2e;
  --code-bg: #f6f6f6;
  --code-inline-bg: #f0f0f0;

  --serif: "Charter", "Bitstream Charter", "STIX Two Text", "Sorts Mill Goudy",
    Georgia, "Liberation Serif", "Times New Roman", serif;
  --mono: "JetBrains Mono", "DejaVu Sans Mono", "Liberation Mono", ui-monospace,
    "SFMono-Regular", Consolas, "Courier New", monospace;

  --measure: 46rem;
  --sidebar-w: 13rem;
  --gap: 2.5rem;
}

/* --- reset / base -------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  /* Reserve the scrollbar gutter on the right only. The content then centres
     within the visible area (the window minus the scrollbar), so the
     whitespace looks equal on both sides to the eye, which reads the
     scrollbar itself as the page edge. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.5;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
}
a:hover {
  text-decoration-thickness: 0.11em;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 0.4rem 0.8rem;
  text-decoration: none;
}

/* --- layout grid ---------------------------------------------------------
   The reading column is centred in the viewport. A ghost track on the right,
   equal in width to the sidebar, mirrors the sidebar on the left so the
   content sits dead-centre with equal space on both sides, instead of the
   sidebar pushing it off to the right. The content track is minmax(0, measure)
   so it narrows gracefully before the responsive breakpoint takes over.
   Hiding the sidebar leaves the content centred in place, with no jump. */
.layout {
  display: grid;
  grid-template-columns:
    var(--sidebar-w) minmax(0, var(--measure)) var(--sidebar-w);
  column-gap: var(--gap);
  justify-content: center;
  padding: 0 1.6rem;
}

.main {
  grid-column: 2;
  min-width: 0;
  padding: 2.5rem 0 4rem;
}

body.sidebar-hidden .layout {
  grid-template-columns: minmax(0, var(--measure));
}
body.sidebar-hidden .main {
  grid-column: 1;
}
body.sidebar-hidden .sidebar {
  display: none;
}

/* --- sidebar / table of contents ----------------------------------------
   Equal horizontal padding on both sides. scrollbar-gutter: stable both-edges
   reserves a matching gutter on the left too, so the scrollbar on the right
   no longer makes the column look lopsided, and the text never sits flush
   against the edge. scrollbar-width: thin keeps that reserved space small. */
.sidebar {
  grid-column: 1;
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-gutter: stable both-edges;
  padding: 2.2rem 0.8rem 2rem;
}
.sidebar-summary {
  display: none;
}
.sidebar-inner {
  display: block;
}
.sidebar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.55rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}
.sidebar-home {
  font-size: 0.82rem;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-decoration: none;
}
.sidebar-hide {
  font-family: var(--serif);
  font-size: 0.74rem;
  color: var(--faint);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
}
.sidebar-hide:hover {
  color: var(--ink);
}
.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc-item {
  margin: 0;
}
.toc-item a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.84rem;
  line-height: 1.32;
  padding: 0.16rem 0 0.16rem 0.7rem;
  border-left: 2px solid transparent;
}
.toc-l3 a {
  padding-left: 1.5rem;
  font-size: 0.79rem;
  color: var(--faint);
}
.toc-item a:hover {
  color: var(--ink);
}
.toc-item a.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
}

/* --- page header / abstract --------------------------------------------- */
.page-header {
  margin-bottom: 1.5rem;
}
.page-header h1 {
  font-size: 2rem;
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.45rem;
}
.byline {
  font-style: italic;
  color: var(--muted);
  margin: 0;
}
.author {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0.3rem 0 0;
}
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.tool-btn {
  font-family: var(--serif);
  font-size: 0.82rem;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 0.28rem 0.7rem;
  cursor: pointer;
}
.tool-btn:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.abstract {
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1.1rem 0;
  margin: 1.5rem 0 0;
}

/* --- getting started block ---------------------------------------------- */
.getting-started {
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: 1.6rem 0 1.8rem;
  margin: 2.2rem 0 2.5rem;
  scroll-margin-top: 1.5rem;
}
.getting-started h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  font-size: 1.45rem;
}
.getting-started > :last-child {
  margin-bottom: 0;
}

/* --- typographic flow ---------------------------------------------------- */
.content,
.getting-started {
  font-size: 1rem;
}
.content > :first-child {
  margin-top: 0;
}

h2,
h3,
h4 {
  font-weight: 600;
  line-height: 1.25;
  scroll-margin-top: 1.5rem;
}
/* Spacing is deliberately non-uniform: large rhythm at Part boundaries,
   moderate at sections, tight within prose. */
.content h2 {
  font-size: 1.55rem;
  margin: 4rem 0 1.1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule-strong);
  letter-spacing: -0.005em;
}
.content > h2:first-child {
  margin-top: 1rem;
}
.content h3 {
  font-size: 1.2rem;
  margin: 2rem 0 0.55rem;
}
.content h4 {
  font-size: 1.03rem;
  margin: 1.3rem 0 0.4rem;
  font-style: italic;
  font-weight: 600;
}

p {
  margin: 0 0 0.65rem;
}

ul,
ol {
  margin: 0 0 0.7rem;
  padding-left: 1.4rem;
}
li {
  margin: 0.15rem 0;
}
li > ul,
li > ol {
  margin: 0.15rem 0;
}

strong {
  font-weight: 600;
}
hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 2rem 0;
}

/* anchored headings: reveal the permalink on hover */
.header-anchor {
  margin-left: 0.4rem;
  color: var(--faint);
  text-decoration: none;
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.1s ease;
}
h2:hover .header-anchor,
h3:hover .header-anchor,
h4:hover .header-anchor,
.header-anchor:focus {
  opacity: 1;
}

/* --- code ---------------------------------------------------------------- */
code {
  font-family: var(--mono);
  font-size: 0.86em;
}
:not(pre) > code {
  background: var(--code-inline-bg);
  border: 1px solid #e6e6e6;
  padding: 0.05em 0.34em;
  border-radius: 3px;
  word-break: break-word;
}
pre {
  position: relative;
  background: #f7f7f8;
  border: 1px solid #e3e3e6;
  border-radius: 4px;
  padding: 0.95rem 1.1rem;
  margin: 1.15rem 0;
  overflow-x: auto;
  line-height: 1.55;
  tab-size: 4;
}
pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.82rem;
  color: #2b2b2b;
}
.copy-btn {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  color: var(--muted);
  padding: 0.14rem 0.5rem;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
}
pre:hover .copy-btn,
.copy-btn:focus {
  opacity: 1;
}
.copy-btn:hover {
  color: var(--ink);
  border-color: var(--ink);
}
/* touch devices never hover, so keep the copy button visible there */
@media (hover: none) {
  .copy-btn {
    opacity: 0.75;
  }
  .header-anchor {
    opacity: 0.4;
  }
}

/* highlight.js tokens: a quiet, desaturated palette (six colors max) */
.hljs-comment,
.hljs-quote {
  color: #8a857c;
  font-style: italic;
}
.hljs-keyword,
.hljs-built_in,
.hljs-literal {
  color: #7a2e2e;
}
.hljs-string,
.hljs-meta-string {
  color: #4a6b4a;
}
.hljs-number,
.hljs-symbol {
  color: #3a5778;
}
.hljs-title,
.hljs-title.function_,
.hljs-section {
  color: #1a1a1a;
  font-weight: 600;
}
.hljs-params,
.hljs-variable,
.hljs-attr,
.hljs-property {
  color: #1a1a1a;
}
.hljs-meta {
  color: #8a857c;
}

/* --- blockquotes (the few that are not callouts) ------------------------- */
.content blockquote {
  margin: 1rem 0;
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 3px solid var(--rule-strong);
  color: var(--muted);
}
.content blockquote p:last-child {
  margin-bottom: 0;
}

/* --- callouts ------------------------------------------------------------ */
.callout {
  margin: 1.1rem 0;
  padding: 0.7rem 1rem;
  border-left: 3px solid var(--rule-strong);
  background: #f7f7f7;
  border-radius: 0 2px 2px 0;
  font-size: 0.96rem;
}
.callout-label {
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 0.3rem;
}
.callout p:last-child {
  margin-bottom: 0;
}
.callout-intuition {
  border-left-color: #a59c83;
  background: #f8f7f3;
}
.callout-thinking {
  border-left-color: #7e98a2;
  background: #f3f6f7;
}
.callout-gotcha {
  border-left-color: #c0855a;
  background: #faf4ef;
}
.callout-checkpoint {
  border-left-color: #6f9a6f;
  background: #f2f7f2;
}
.callout-yourturn {
  border-left-color: var(--accent);
  background: #f9f2f3;
}

/* --- figures ------------------------------------------------------------- */
figure {
  margin: 1.5rem 0;
  text-align: center;
}
figure img {
  border: 1px solid var(--rule);
  background: #fff;
}
figure.illustration img {
  max-width: 100%;
}
figcaption {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 0.6rem;
  text-align: left;
}
.figure-label {
  color: var(--accent);
  font-weight: 600;
}

/* --- tables (booktabs style) -------------------------------------------- */
.table-wrap {
  margin: 1.2rem 0;
  overflow-x: auto; /* scroll instead of overflowing on narrow screens */
}
.content table {
  border-collapse: collapse;
  width: 100%;
  margin: 0;
  font-size: 0.9rem;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.content th,
.content td {
  padding: 0.42rem 0.7rem;
  text-align: left;
  vertical-align: top;
}
.content thead th {
  border-bottom: 1.25px solid var(--ink);
  font-weight: 600;
}
.content tbody tr {
  border-bottom: 1px solid var(--rule);
}
.content tbody tr:last-child {
  border-bottom: none;
}

/* --- math ---------------------------------------------------------------- */
.katex {
  font-size: 1.04em;
}
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.3rem 0;
  margin: 0.9rem 0;
}

/* --- footer -------------------------------------------------------------- */
.page-footer {
  margin-top: 4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--faint);
}

/* --- toast: confirmation feedback for toolbar actions ------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%) translateY(0.8rem);
  background: var(--ink);
  color: #fff;
  font-size: 0.82rem;
  line-height: 1.4;
  padding: 0.55rem 1.05rem;
  border-radius: 4px;
  max-width: min(90vw, 28rem);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 50;
}
.toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* --- responsive: once the centred block no longer fits, collapse to a
   single column and turn the sidebar into a disclosure at the top. -------- */
@media (max-width: 66rem) {
  .layout {
    display: block;
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 1.4rem;
  }
  .sidebar {
    grid-column: auto;
    width: auto;
    position: static;
    max-height: none;
    overflow: visible;
    padding: 1.5rem 0 0;
    border-bottom: 1px solid var(--rule);
  }
  .sidebar-summary {
    display: block;
    cursor: pointer;
    font-variant: small-caps;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
    color: var(--muted);
    padding: 0.3rem 0;
  }
  .sidebar-inner {
    display: none;
    padding: 0.6rem 0 1rem;
  }
  .sidebar[open] .sidebar-inner {
    display: block;
  }
  .sidebar-head {
    display: none;
  }
  .main {
    grid-column: auto;
    width: auto;
    padding: 1.6rem 0 3rem;
  }
}

@media (max-width: 44rem) {
  html {
    font-size: 15px;
  }
}

@media (max-width: 32rem) {
  html {
    font-size: 14px;
  }
  .layout {
    padding: 0 1rem;
  }
  .page-header h1 {
    font-size: 1.8rem;
  }
}

/* --- print: lay the page out as a book ----------------------------------- */
@media print {
  :root {
    --paper: #fff;
  }
  @page {
    margin: 2cm 2.2cm;
  }
  @page :first {
    margin-top: 4.5cm;
  }
  html {
    font-size: 11pt;
  }
  body {
    line-height: 1.5;
  }
  .layout {
    display: block;
    padding: 0;
  }
  .sidebar,
  .copy-btn,
  .header-anchor,
  .skip-link,
  .toolbar,
  .toast {
    display: none;
  }
  .main {
    padding: 0;
    max-width: none;
  }
  /* title page */
  .page-header {
    text-align: center;
    margin: 0 0 50vh;
  }
  .page-header h1 {
    font-size: 26pt;
    margin-bottom: 0.6rem;
  }
  .byline {
    font-size: 12pt;
  }
  .abstract,
  .getting-started {
    break-inside: avoid;
  }
  .getting-started {
    break-after: page;
  }
  /* each Part opens on a fresh page */
  .content h2 {
    break-before: page;
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    font-size: 17pt;
  }
  .content > h2:first-child {
    break-before: avoid;
  }
  h2,
  h3,
  h4 {
    break-after: avoid;
  }
  pre,
  figure,
  .callout,
  table,
  blockquote {
    break-inside: avoid;
  }
  figure img {
    max-width: 100% !important;
  }
  a {
    color: var(--ink);
    text-decoration: none;
  }
  .content a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #555;
    word-break: break-all;
  }
  .page-footer {
    break-before: page;
  }
}