:root {
  color-scheme: light;
  --ink: #183544;
  --muted: #475f6c;
  --link: #145779;
  --paper: #fff;
  --canvas: #f3f6f7;
  --line: #c4cfd5;
  --selected: #e2edf2;
  --focus: #874000;
  --measure: 74ch;
}
* { box-sizing: border-box; }
html { scroll-padding-block: 1rem; }
body { margin: 0; color: var(--ink); background: var(--canvas); font: 1rem/1.65 system-ui, sans-serif; }
a { color: var(--link); text-decoration-thickness: .075em; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .14em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
:target { scroll-margin-block: 1rem; }
::selection { background: #bfdce9; color: #183544; }
input { caret-color: var(--link); }
* { scrollbar-color: #6a7d88 var(--canvas); }
.skip-link { position: absolute; top: .5rem; left: 1rem; padding: .6rem 1rem; background: white; z-index: 2; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.site-header { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; padding: 1rem clamp(1rem, 3vw, 3rem); border-bottom: 1px solid var(--line); background: var(--paper); }
.site-brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem 1rem; color: var(--ink); text-decoration: none; }
.site-brand strong { font-size: 1.35rem; }
.site-brand span { color: var(--muted); }
.audience-label { padding: .15rem .65rem; background: var(--selected); font-size: .9rem; }
.search-link { margin-left: auto; padding: .5rem 0; min-height: 44px; }
.workspace { max-width: 112rem; margin: auto; display: grid; gap: 1.5rem; padding: 1rem; grid-template-columns: minmax(0, 1fr); }
summary { cursor: pointer; font-weight: 650; min-height: 44px; padding: .55rem .5rem; }
summary:hover { background: var(--selected); }
nav ul { list-style: none; margin: 0; padding: 0; }
nav li { min-width: 0; }
.section-navigation { align-self: start; }
.section-navigation nav a { display: block; padding: .55rem .65rem; min-height: 44px; line-height: 1.5; text-decoration: none; border-radius: .2rem; overflow-wrap: anywhere; }
.section-navigation nav a:hover { text-decoration: underline; background: var(--selected); }
.section-navigation [aria-current="page"] { background: var(--selected); color: var(--ink); font-weight: 700; text-decoration: underline; }
.section-navigation details ul { padding-left: .85rem; border-left: 1px solid var(--line); margin-left: .65rem; }
.section-navigation nav > ul > li { margin-bottom: .15rem; }
.page-outline { align-self: start; font-size: .95rem; }
.page-outline nav a { display: block; padding: .3rem .5rem; min-height: 32px; overflow-wrap: anywhere; text-decoration: none; }
.page-outline nav a:hover { text-decoration: underline; }
.page-outline nav ul ul { padding-left: .75rem; }
main { min-width: 0; background: var(--paper); padding: clamp(1rem, 3vw, 3rem); border: 1px solid var(--line); }
main:focus { outline: none; }
main:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .5rem; color: var(--muted); font-size: .9rem; margin-bottom: 1.5rem; }
h1, h2, h3, h4, h5, h6 { line-height: 1.3; text-wrap: balance; }
h1 { font-size: clamp(1.65rem, 2.5vw, 2.5rem); margin: 0 0 1.25rem; max-width: 36ch; letter-spacing: -.025em; }
h2 { font-size: 1.4rem; margin: 2.25rem 0 .75rem; }
h3 { font-size: 1.15rem; margin: 1.75rem 0 .5rem; }
p { margin: 0 0 1.1rem; }
.reading-content > p, .reading-content > ul, .reading-content > ol, .reading-content > blockquote { max-width: var(--measure); }
.reading-content li { margin-block: .25rem; }
.reading-content { overflow-wrap: anywhere; }
.reading-content img { max-width: 100%; height: auto; }
.reading-content .headerlink { margin-left: .4rem; font-size: .8em; text-decoration: none; }
.table-scroll { max-width: 100%; overflow-x: auto; margin-block: 1.5rem; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
th, td { padding: .65rem .85rem; text-align: left; vertical-align: top; border: 1px solid var(--line); overflow-wrap: normal; }
th { background: #eaf0f3; font-weight: 700; }
pre { max-width: 100%; overflow-x: auto; background: #edf2f5; padding: 1.15rem; border: 1px solid var(--line); line-height: 1.6; }
code { color: #8c2849; font-size: .92em; }
pre code { color: var(--ink); white-space: pre; }
blockquote { margin-inline: 0; padding: 1rem; background: var(--canvas); border-left: 1px solid var(--line); }
.task-directory { max-width: 60rem; margin-block: 1.75rem 2rem; border-top: 1px solid var(--line); }
.task-row { display: grid; gap: .25rem 1.5rem; grid-template-columns: 1fr; padding: 1rem .25rem; border-bottom: 1px solid var(--line); text-decoration: none; }
.task-row:hover { background: var(--canvas); }
.task-row strong { text-decoration: underline; text-underline-offset: .2em; }
.task-row span { color: var(--muted); }
footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.search-form { max-width: 48rem; margin-block: 1.5rem; }
.search-form label { display: block; font-weight: 650; margin-bottom: .35rem; }
.search-controls { display: flex; flex-wrap: wrap; gap: .65rem; }
input, button { font: inherit; min-height: 44px; border: 1px solid #637b88; border-radius: .2rem; padding: .5rem .8rem; }
input { min-width: 0; flex: 1 1 12rem; color: var(--ink); background: white; }
button { background: var(--link); color: white; cursor: pointer; }
button:hover { background: #0e405a; }
#search-help { margin-top: .5rem; color: var(--muted); }
#search-results article { padding-block: 1rem; border-top: 1px solid var(--line); max-width: var(--measure); }
#search-results h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
.search-error { color: #8c2849; }
@media (min-width: 55rem) {
  .workspace { grid-template-columns: 15.5rem minmax(0, 1fr); gap: 2rem; padding: 2rem; }
  .section-navigation { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; padding: .25rem; }
  .section-navigation > summary { display: none; }
  main { grid-column: 2; grid-row: 2; }
  .page-outline { grid-column: 2; grid-row: 1; }
  .workspace:not(:has(.page-outline)) main { grid-row: 1; }
  .task-row { grid-template-columns: minmax(12rem, 1fr) 2fr; }
}
@media (min-width: 85rem) {
  .workspace { grid-template-columns: 15.5rem minmax(0, 1fr) 13rem; }
  main { grid-column: 2; grid-row: 1; }
  .page-outline { grid-column: 3; grid-row: 1; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; padding: .25rem; }
}
@media (max-width: 35rem) {
  .site-brand { width: calc(100% - 5rem); display: block; }
  .site-brand span { display: block; font-size: .9rem; }
  .search-link { margin-left: 0; }
  .workspace { gap: 1rem; }
  main { padding: .75rem .25rem; border: 0; }
}
@media (prefers-reduced-motion: no-preference) { a, button { transition: background-color 120ms ease-out; } }
@media (forced-colors: active) { [aria-current="page"] { outline: 2px solid LinkText; } }
@media print {
  body { background: white; }
  .site-header, .section-navigation, .page-outline, .skip-link, .breadcrumbs, footer { display: none; }
  .workspace { display: block; max-width: none; padding: 0; }
  main { padding: 0; border: 0; }
  .reading-content > * { max-width: none; }
  .table-scroll, pre { overflow: visible; }
  pre code { white-space: pre-wrap; }
}
.language-switcher { display: flex; flex-wrap: wrap; gap: .25rem; }
.language-switcher a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .4rem .65rem; }
.language-switcher [aria-current] { font-weight: 700; text-decoration-thickness: .15em; }
.translation-notice { border-inline-start: .25rem solid #2563a0; padding: .75rem 1rem; background: #eef4fb; color: #17354f; max-width: 74ch; }
.browser-code {margin-block:1rem;padding:.7rem;border:1px solid #526477;border-radius:.25rem}
.browser-code summary {cursor:pointer;min-height:44px;font-weight:600}
.browser-code course-code-runner {margin-top:.7rem}

@media(min-width:85rem){.workspace-wide{grid-template-columns:15.5rem minmax(0,1fr)}}

/* Interactive surfaces use the workspace width; surrounding prose retains its reading measure. */

/* Course picker: top of the menu, above the home page link. */
.course-picker { margin: 0 0 .75rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.course-picker > summary { display: flex; flex-direction: column; gap: .1rem; min-height: 44px; padding: .45rem .7rem; cursor: pointer; list-style: none; }
.course-picker > summary::-webkit-details-marker { display: none; }
.course-picker > summary span { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.course-picker > summary strong::after { content: " ▾"; color: var(--muted); }
.course-picker[open] > summary strong::after { content: " ▴"; }
.section-navigation .course-picker ul { margin: 0; padding: 0 .4rem .4rem; list-style: none; border: 0; }
.section-navigation .course-picker a { display: flex; align-items: center; min-height: 44px; padding: .3rem .4rem; border-radius: 6px; }
.section-navigation .course-picker a:hover { background: var(--selected); }
.course-picker [aria-current] { color: var(--ink); font-weight: 700; }
.site-brand.has-logo { display: grid; grid-template-columns: auto 1fr; column-gap: .65rem; align-items: center; }
.site-brand.has-logo .site-logo { grid-row: span 2; width: 56px; height: 56px; }

/* Coloured static code (shell commands); the classes come from teaching/runtime/highlight.mjs. */
pre.hl .hl-k{color:#7a3fa8;font-weight:600}pre.hl .hl-s{color:#1d7a46}pre.hl .hl-m{color:#a1530b}pre.hl .hl-c{color:#6b7c88;font-style:italic}
pre.hl .hl-nb{color:#0f6f8f}pre.hl .hl-fn{color:#1b5bb5}pre.hl .hl-v{color:#a1306b}pre.hl .hl-f{color:#0f6f8f}pre.hl .hl-o{color:#b4442a;font-weight:600}pre.hl .hl-p{color:#6b7c88}

/* Check questions (practice.mjs) */
.quiz { margin: 1.5rem 0; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); overflow: hidden; }
.quiz header, .quiz footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1rem; background: var(--selected); }
.quiz footer { background: none; border-top: 1px solid var(--line); justify-content: flex-end; }
.quiz-score { color: var(--muted); font-size: .9rem; }
.quiz ol { margin: 0; padding: .4rem 1rem .4rem 2.6rem; }
.quiz-q { padding: .7rem 0; border-bottom: 1px solid #e3e9ec; }
.quiz-q:last-child { border-bottom: 0; }
.quiz-q > p { margin: 0 0 .5rem; font-weight: 600; }
.quiz-q pre { margin: .4rem 0 .6rem; }
.quiz-options { display: grid; gap: .4rem; }
.quiz button { min-height: 40px; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.quiz button:hover:not(:disabled) { border-color: var(--link); background: #f4f9fb; }
.quiz-opt:disabled { cursor: default; opacity: .75; }
.quiz-opt.right { opacity: 1; border-color: #17694a; background: #e3f4ea; }
.quiz-opt.chosen:not(.right) { opacity: 1; border-color: #a33a2a; background: #fbe9e6; }
.quiz-opt.right::before { content: "✓ "; color: #17694a; font-weight: 700; }
.quiz-opt.chosen:not(.right)::before { content: "✗ "; color: #a33a2a; font-weight: 700; }
.quiz textarea { display: block; width: 100%; margin-bottom: .4rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 7px; font: inherit; resize: vertical; }
.quiz-reveal { border-color: var(--link) !important; color: var(--link) !important; }
.quiz-feedback { margin-top: .5rem; padding: .55rem .8rem; border-left: 4px solid var(--link); background: #f1f6f8; animation: quiz-in .3s ease-out; }
.quiz-feedback.ok { border-color: #17694a; background: #eef8f2; }
.quiz-feedback.no { border-color: #a33a2a; background: #fcf1ef; }
@keyframes quiz-in { from { opacity: 0; transform: translateY(-4px); } }

/* Step-by-step concept figures (practice.mjs) */
.stepfig { margin: 1.5rem 0; padding: .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.stepfig svg { display: block; width: 100%; max-width: 760px; height: auto; max-height: 420px; margin: 0 auto; font-family: system-ui, sans-serif; }
.stepfig [data-step] { transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1); transform-box: fill-box; transform-origin: center; }
.stepfig .stepfig-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }
.stepfig .stepfig-now { animation: stepfig-glow 1.4s ease-out; }
.stepfig [data-tip] { cursor: pointer; }
.stepfig [data-tip]:hover, .stepfig [data-tip]:focus-visible, .stepfig .stepfig-picked { filter: drop-shadow(0 0 4px #145779aa); outline: none; }
.stepfig figcaption { margin-top: .6rem; }
.stepfig-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.stepfig-bar > button { min-height: 40px; padding: .4rem .8rem; border: 1px solid var(--link); border-radius: 7px; background: var(--paper); color: var(--link); font: inherit; cursor: pointer; }
.stepfig-bar > button:disabled { opacity: .4; cursor: default; }
.stepfig-dots { display: flex; gap: .3rem; }
.stepfig-dots button { width: 14px; height: 14px; min-height: 0; min-width: 0; padding: 0; flex: none; border: 2px solid var(--link); border-radius: 50%; background: var(--paper); cursor: pointer; }
.stepfig-dots button.on { background: var(--link); }
.stepfig-hint { margin-left: auto; color: var(--muted); font-size: .85rem; }
.stepfig-caption { min-height: 1.65em; margin: .5rem 0 0; }
@keyframes stepfig-glow { 0% { filter: drop-shadow(0 0 6px #e0a800); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { .stepfig *, .quiz * { animation: none !important; transition: none !important; } }
pre.hl .hl-nf{color:#1b5bb5}pre.hl .hl-nc,pre.hl .hl-nt{color:#a1306b}pre.hl .hl-d{color:#8a5300}