/* learnc - bellard-style minimal CSS. Plain, dense, readable. */ :root { --fg: #111; --bg: #fdfdfd; --link: #0044aa; --link-visited: #6633aa; --muted: #666; --code-bg: #eaeaea; --code-border: #c8c8c8; --terminal-bg: #000; --terminal-fg: #0f0; --hl: #ffff77; --panel-bg: #f4f4f4; --panel-border: #ccc; --chip-on-bg: #e8f0ff; --chip-on-border: #b9d4f0; --chip-on-fg: #06c; --banner-bg: #eef6ff; --banner-border: #b9d4f0; --stub-bg: #fffae0; --stub-border: #e8d870; --accent: #0a7; --accent-fg: #fff; --accent-hover: #086; } /* Dark theme. Driven by a [data-theme="dark"] attribute on that the inline boot script in each HTML file sets based on (a) the user's saved preference in localStorage, or (b) prefers-color-scheme when no preference is saved. This means CSS never has to deal with the media query directly - it just reacts to the attribute. */ :root[data-theme="dark"] { --fg: #e5e5e5; --bg: #1a1a1a; --link: #6ab0ff; --link-visited: #b59cff; --muted: #9a9a9a; --code-bg: #2d2d2d; --code-border: #4a4a4a; --terminal-bg: #000; --terminal-fg: #5f5; --hl: #5a4500; --panel-bg: #232323; --panel-border: #3a3a3a; --chip-on-bg: #1e2c40; --chip-on-border: #2e4d80; --chip-on-fg: #8cb6ff; --banner-bg: #1a2536; --banner-border: #2e4d80; --stub-bg: #2a2618; --stub-border: #5a4a1a; --accent: #0c8; --accent-fg: #0a1a14; --accent-hover: #0fa; } :root[data-theme="dark"] hr { border-color: #333; } :root[data-theme="dark"] .site-header { border-bottom-color: #333; } :root[data-theme="dark"] .site-footer { border-top-color: #333; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Keyboard-accessible skip link: invisible until focused. */ .skip-link { position: absolute; left: -9999px; top: 0; padding: 0.4rem 0.8rem; background: var(--bg); color: var(--link); border: 1px solid var(--panel-border); text-decoration: underline; z-index: 100; } .skip-link:focus { left: 0; } body { font: 16px/1.55 Verdana, Geneva, sans-serif; color: var(--fg); background: var(--bg); max-width: 74ch; margin: 2rem auto; padding: 0 1rem 4rem; } /* Lesson pages use a wider canvas so the course TOC (left) and on-this-page TOC (right) can flank the readable centre column, FastAPI/MkDocs style. The body cap is lifted; the centre column keeps its own readable width. */ body.lesson-page { max-width: 84rem; } .lesson-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 14rem; gap: 2.5rem; align-items: start; } .lesson-layout > #main { min-width: 0; } /* Both sidebars stick alongside the scrolling article and scroll internally when their own content overflows the viewport. */ .course-toc, .page-toc { position: sticky; top: 1rem; align-self: start; max-height: calc(100vh - 2rem); overflow-y: auto; font-size: 0.82rem; line-height: 1.5; } .course-toc { border-right: 1px solid var(--panel-border); padding-right: 0.6rem; } .page-toc { border-left: 1px solid var(--panel-border); padding-left: 0.8rem; } .toc-title { font-weight: bold; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; } /* Left: whole-course outline as a collapsible tree */ .course-toc-group { margin-bottom: 0.15rem; } .course-toc-chapter { display: flex; align-items: baseline; gap: 0.35rem; width: 100%; margin: 0.55rem 0 0.2rem; padding: 0.1rem 0.2rem; font: inherit; font-weight: bold; text-align: left; color: var(--fg); background: none; border: none; border-radius: 3px; cursor: pointer; } .course-toc-group:first-of-type .course-toc-chapter { margin-top: 0; } .course-toc-chapter:hover { background: var(--hl); } .course-toc-caret { display: inline-block; font-size: 0.7em; color: var(--muted); transition: transform 0.12s ease; } .course-toc-group.collapsed .course-toc-caret { transform: rotate(-90deg); } .course-toc-group.current-chapter > .course-toc-chapter { color: var(--accent); } .course-toc-list { list-style: none; margin: 0 0 0.3rem; padding: 0; } .course-toc-group.collapsed .course-toc-list { display: none; } .course-toc-list li { margin: 0; } .course-toc-list a { display: block; padding: 0.12rem 0.4rem 0.12rem 0.95rem; color: var(--muted); text-decoration: none; border-left: 2px solid transparent; border-radius: 0 2px 2px 0; } .course-toc-list a:hover { background: var(--hl); color: var(--fg); } .course-toc-list a.current { color: var(--fg); font-weight: bold; border-left-color: var(--accent); background: var(--panel-bg); } /* Right: on-this-page anchors */ .page-toc-list { list-style: none; margin: 0; padding: 0; } .page-toc-list li { margin: 0; } .page-toc-list a { display: block; padding: 0.12rem 0.5rem; color: var(--muted); text-decoration: none; border-left: 2px solid var(--panel-border); } .page-toc-list .page-toc-h3 a { padding-left: 1.2rem; font-size: 0.95em; } .page-toc-list a:hover { color: var(--fg); background: var(--hl); } .page-toc-list a.active { color: var(--fg); border-left-color: var(--accent); font-weight: bold; } /* Header toggles that summon the sidebar drawers - hidden on desktop, shown at each breakpoint as its sidebar leaves the grid. */ .nav-toggle { display: none; align-items: center; justify-content: center; padding: 0.25rem; color: var(--fg); background: none; border: none; cursor: pointer; border-radius: 4px; } .nav-toggle:hover { background: var(--hl); } #toc-toggle { margin-right: 0.1rem; } /* Backdrop dims the page behind an open drawer. */ .toc-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.4); } /* Drop the right TOC first (it's the most optional), then the left one, collapsing back to the original single readable column on narrow screens. When a sidebar leaves the grid it can still be summoned as a drawer. */ @media (max-width: 1180px) { .lesson-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; } .page-toc { position: fixed; top: 0; right: 0; z-index: 50; width: 16rem; max-width: 80vw; height: 100vh; max-height: none; margin: 0; padding: 4rem 1rem 1rem; background: var(--bg); border-left: 1px solid var(--panel-border); box-shadow: -4px 0 16px rgba(0, 0, 0, 0.18); transform: translateX(100%); transition: transform 0.18s ease; } body.page-toc-open .page-toc { transform: translateX(0); } #page-toc-toggle { display: inline-flex; } } @media (max-width: 920px) { body.lesson-page { max-width: 74ch; } .lesson-layout { display: block; } .course-toc { position: fixed; top: 0; left: 0; z-index: 50; width: 18rem; max-width: 84vw; height: 100vh; max-height: none; margin: 0; padding: 4rem 1rem 1rem; background: var(--bg); border-right: 1px solid var(--panel-border); box-shadow: 4px 0 16px rgba(0, 0, 0, 0.18); transform: translateX(-100%); transition: transform 0.18s ease; } body.toc-open .course-toc { transform: translateX(0); } #toc-toggle { display: inline-flex; } } h1 { font-size: 1.6rem; margin: 0 0 0.3rem; } h2 { font-size: 1.25rem; margin: 1.8rem 0 0.4rem; } h3 { font-size: 1.05rem; margin: 1.4rem 0 0.3rem; } h1, h2, h3 { font-weight: bold; } /* Canonical MkDocs/Material-style permalinks (added by lesson.js addHeadingAnchors): a small `#` at the end of each heading that fades in on hover. Only the symbol is clickable. scroll-margin keeps a deep-linked heading from hiding under the top of the viewport. */ h2[id], h3[id], h4[id] { scroll-margin-top: 1rem; } .heading-anchor { margin-left: 0.5rem; color: var(--link); text-decoration: none; font-weight: normal; opacity: 0; transition: opacity 0.1s ease-in; } h2:hover .heading-anchor, h3:hover .heading-anchor, h4:hover .heading-anchor, .heading-anchor:focus { opacity: 0.5; } .heading-anchor:hover { opacity: 1; background: none; text-decoration: underline; } @media (hover: none) { .heading-anchor { opacity: 0.35; } } p { margin: 0.6rem 0; } a { color: var(--link); text-decoration: underline; } a:visited { color: var(--link-visited); } a:hover { background: var(--hl); } code, pre, kbd, samp { font-family: "Courier New", Courier, monospace; font-size: 0.95em; } code { background: var(--code-bg); padding: 1px 5px; border: 1px solid var(--code-border); border-radius: 2px; } pre { background: var(--code-bg); border: 1px solid var(--code-border); padding: 0.6rem 0.8rem; overflow-x: auto; line-height: 1.45; position: relative; } /* Reset the inline-code chrome inside 
. Without `border: 0` the
   inline  inside a 
 picks up the top/bottom border on every
   visual line fragment, drawing a separator between every code line. */
pre code { background: none; padding: 0; border: 0; border-radius: 0; }

/* lesson.js wraps every prose 
 in a .codeblock so the copy button
   lives in a small header strip ABOVE the 
 instead of overlaying
   its top-right corner. Earlier the button was a child of the 
 and
   long lines rendered behind it - overflow:auto clips at the padding-box
   edge, not the content-edge, so neither moving the button to a sibling
   nor adding padding-right kept text out from under it. The header strip
   is the only layout that actually removes the overlap. */
.codeblock { position: relative; margin: 1em 0; }
.codeblock > pre { margin: 0; }

/* Copy button on prose code blocks (the editor has its own buttons).
   Lives in a header row inside .codeblock, above the 
. The header
   is a tiny right-aligned strip so it adds minimal vertical chrome. */
.codeblock { display: flex; flex-direction: column; align-items: stretch; }
.codeblock-header {
  display: flex;
  justify-content: flex-end;
  min-height: 0;
  margin-bottom: -1px; /* let the header's button sit flush against the pre's top border */
}
.copy-btn {
  font-size: 0.72rem;
  padding: 0.05rem 0.45rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--panel-border);
  opacity: 0;
  transition: opacity 0.12s;
  font-family: Verdana, Geneva, sans-serif;
  cursor: pointer;
}
.codeblock:hover .copy-btn,
.copy-btn:focus { opacity: 1; }
@media (hover: none) { .copy-btn { opacity: 0.7; } }

hr { border: 0; border-top: 1px solid var(--panel-border); margin: 1.5rem 0; }

blockquote {
  border-left: 3px solid #aaa;
  margin: 0.8rem 0;
  padding: 0.2rem 0 0.2rem 0.8rem;
  color: var(--muted);
}

table { border-collapse: collapse; margin: 0.8rem 0; }
th, td { border: 1px solid var(--panel-border); padding: 0.3rem 0.6rem; text-align: left; }
th { background: var(--panel-bg); }

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

.muted { color: var(--muted); }
.small { font-size: 0.9em; }

/* Header */
.site-header {
  border-bottom: 1px solid #ccc;
  margin-bottom: 1.5rem;
  padding-bottom: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1rem;
}
.site-header h1 { display: inline; font-size: 1.6rem; flex: 1; }
.site-header h1 a { color: inherit; text-decoration: none; }
.site-header nav { font-size: 0.9rem; display: flex; align-items: center; gap: 0.6rem; }
.site-header nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  color: var(--muted);
  text-decoration: none;
  border-radius: 3px;
}
.site-header nav a:hover { background: var(--hl); color: var(--fg); }
.site-header nav a:visited { color: var(--muted); }
.site-header nav .icon { display: block; }

/* Theme toggle lives at the end of the nav. Stays low-key - the eye should
   land on the icons, not the toggle. */
.theme-toggle {
  font-size: 0.85rem;
  padding: 0.1rem 0.5rem;
  background: transparent;
  border: 1px solid var(--panel-border);
  border-radius: 3px;
  color: var(--muted);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--fg); filter: none; }

/* Footer */
.site-footer {
  border-top: 1px solid #ccc;
  margin-top: 3rem;
  padding-top: 0.8rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.site-footer a { color: var(--muted); }
.site-footer .build-stamp {
  /* version stamp written by bin/stamp - inline, so the footer is one row */
  opacity: 0.7;
}
.site-footer .build-stamp time { font-variant-numeric: tabular-nums; }

/* Lesson index */
.progress-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  margin: 0 0 1.2rem;
}
.progress-summary {
  font-size: 0.95rem;
  color: var(--muted);
}
.progress-summary strong { color: var(--fg); }
.chapter { margin-bottom: 1.5rem; }
.chapter-head { margin: 0 0 0.4rem; font-size: 1.1rem; }
.lesson-list { list-style: none; padding-left: 0; margin: 0; }
.lesson-list li { padding: 0.15rem 0; }
.lesson-list .lbl {
  display: inline-block;
  min-width: 4em;
  padding-right: 0.6em;
  color: var(--muted);
  font-family: "Courier New", monospace;
}
.lesson-list .status {
  font-size: 0.78em;
  margin-left: 0.4em;
  color: var(--muted);
}
.lesson-list .status.done { color: #096; }
.lesson-list .status.draft { color: #c80; }

/* Nested exercise list under each section. The outer wrapper 
  •  has no
   padding so the nested 
       sits flush with the section item above; the
   inner items are indented and tagged with a subtle left guide rule so
   eye-scanning a long chapter still groups exercises with their parent. */
.lesson-list-children { padding: 0 !important; }
.lesson-list--nested {
  margin: 0.1rem 0 0.3rem;
  padding-left: 1.4rem;
  border-left: 2px solid var(--panel-border);
  margin-left: 0.4rem;
}
.lesson-list--nested li { padding: 0.1rem 0; }
.lesson-list--nested .lbl { min-width: 3.5em; font-size: 0.92em; }

/* Filter chips - sit in the progress row. */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.chip {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.15rem 0.6rem;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
}
.chip.on {
  background: var(--chip-on-bg);
  border-color: var(--chip-on-border);
  color: var(--chip-on-fg);
}
.chip:hover { border-color: #888; }

/* Filter classes - set on #lesson-index by the chip handlers. */
#lesson-index.lesson-list--hide-done li.status-done { display: none; }
#lesson-index.lesson-list--hide-draft li.status-draft { display: none; }
#lesson-index.lesson-list--hide-stub li.status-stub { display: none; }

/* Lesson view */
.crumbs { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.5rem; visibility: hidden; }
.crumbs.ready { visibility: visible; }
/* Title is hidden until lesson.js drops the class, so the page never flashes
   "Loading…" before the real h1 lands. */
.lesson-title-empty { visibility: hidden; }
.crumbs a { color: var(--muted); }

.runner {
  margin: 1rem 0;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
}
.runner-bar {
  background: #eee;
  border-bottom: 1px solid #ccc;
  padding: 0.3rem 0.5rem;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.9rem;
}
.runner-bar .title {
  flex: 1;
  color: var(--muted);
  font-family: "Courier New", monospace;
}
button {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--fg);
  cursor: pointer;
}
button:hover { filter: brightness(0.96); }
button:active { filter: brightness(0.9); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Primary action (the Run button). The rest of the runner toolbar (reset,
   share) stays tertiary so the eye lands here first. */
button.primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
  padding: 0.25rem 1rem;
  font-weight: bold;
}
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); filter: none; }
button.primary:active { filter: brightness(0.92); }

/* Tertiary toolbar actions (reset, share) - compact and quiet. */
.runner-bar button.ghost { padding: 0.2rem 0.6rem; color: var(--muted); }
.runner-bar button.ghost:hover { color: var(--fg); }

/* Read-only stdin panel for runnable blocks that pipe input to the program. */
.runner-stdin {
  border-top: 1px solid var(--panel-border);
  background: var(--panel-bg);
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
}
.runner-stdin-label {
  display: inline-block;
  color: var(--muted);
  font-family: "Courier New", monospace;
  margin-right: 0.5rem;
}
.runner-stdin pre {
  display: inline;
  margin: 0;
  font-family: "Courier New", monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Editor: light mode falls through to CodeMirror's default white; in dark
   mode the oneDark extension applies its own background. */
.editor { min-height: 8em; }

.terminal {
  background: var(--terminal-bg);
  color: var(--terminal-fg);
  font-family: "Courier New", monospace;
  font-size: 0.9rem;
  padding: 0.5rem 0.7rem;
  min-height: 3em;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
.terminal-empty { color: #ddd; font-style: italic; }
.terminal-error { color: #f66; }

.diff-badge { padding: 0.2rem 0.7rem; font-size: 0.85rem; background: #fafafa; border-top: 1px solid #eee; }
/* Collapse the badge when there's no diff result yet - otherwise a thin
   light strip sits under the terminal on first paint and looks like a bug. */
.diff-badge:empty { display: none; }
.diff-ok { color: #0a0; }
.diff-bad { color: #c00; }

/* Inline runnable blocks embedded in lesson prose. They reuse the .runner
   chrome but sit closer in the text flow and cap the editor height so a long
   program scrolls instead of pushing the prose far down the page. */
.runnable { margin: 1.1rem 0; }
.runnable .editor { max-height: 22em; overflow: auto; }
.runnable .terminal { min-height: 2.2em; }

/* Keyboard shortcut help overlay. Hidden by default; revealed by pressing `?`.
   `[hidden]` from the HTML attribute does the heavy lifting; the rest is just
   layout for the modal centered above a dim backdrop. */
.shortcut-help {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.shortcut-help[hidden] { display: none; }
.shortcut-help-panel {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 1rem 1.4rem 1.2rem;
  max-width: 28rem;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
.shortcut-help-panel h2 { margin: 0 0 0.6rem; font-size: 1.1rem; }
.shortcut-help-panel dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  margin: 0 0 0.6rem;
}
.shortcut-help-panel dt { margin: 0; text-align: right; }
.shortcut-help-panel dd { margin: 0; color: var(--muted); }
.shortcut-help-panel .kbd-sep { color: var(--muted); }
.shortcut-help-hint {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

.lesson-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  font-size: 0.95rem;
  gap: 1rem;
}
.lesson-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.lesson-nav a .icon { display: block; }
.lesson-nav a.disabled { color: #aaa; pointer-events: none; text-decoration: none; }
.kbd-hint { color: var(--muted); font-size: 0.8rem; }
.kbd-hint kbd {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 0 0.3em;
  font-family: inherit;
  font-size: 0.9em;
}

.stub-notice {
  background: var(--stub-bg);
  border: 1px solid var(--stub-border);
  padding: 0.8rem 1rem;
  margin: 1rem 0;
}

.shared-banner {
  background: var(--banner-bg);
  border: 1px solid var(--banner-border);
  padding: 0.5rem 0.7rem;
  /* sits flush on top of the runner toolbar - they read as one panel */
  margin: 0;
  border-bottom: 0;
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.shared-banner .dismiss { margin-left: auto; }
.linklike {
  background: none;
  border: 0;
  padding: 0;
  color: var(--link, #06c);
  cursor: pointer;
  text-decoration: underline;
  font: inherit;
}
.linklike:hover { color: #03a; }

/* Responsive */
@media (max-width: 600px) {
  body { font-size: 15px; margin: 1rem auto; }
  h1 { font-size: 1.3rem; }
  .lesson-list .lbl { min-width: 3.5em; }
}

/* CodeMirror tweaks */
.cm-editor { font-size: 0.9rem; }
.cm-editor .cm-scroller { font-family: "Courier New", Courier, monospace; line-height: 1.45; }
.cm-focused { outline: 1px solid #888 !important; }