:root {
  --bg: #F6F5F1;
  --surface: #FFFFFF;
  --border: #DDDAD2;
  --border-strong: #CFCBC1;
  --text: #1A1A18;
  --text-2: #33332F;
  --muted: #5A5A55;
  --pill-text: #4A4A45;
  --track: #ECEAE4;
  --accent: #0F766E;
  --link: #0F766E;
  --link-hover: #0B5A54;
  --frame: #2A2A27;
  --do-bg: #E6F2F0; --do-border: #B9DAD5; --do-title: #0B5A54; --do-text: #0B3D39;
  --hist-bg: #F6F1E6; --hist-border: #E5D8B8; --hist-title: #6B4E10; --hist-text: #4A360B;
  --warn-bg: #FFF4E0; --warn-border: #F2C98A; --warn-title: #8A4B00; --warn-text: #5C3300;
  --oops-bg: #FDECEC; --oops-border: #F1B5B5; --oops-title: #9B1C1C; --oops-text: #6B1414;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* the hidden attribute must win over display: flex etc. */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
a { color: var(--link); }
a:hover { color: var(--link-hover); }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.display { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 600; }
.wrap { max-width: 1360px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }

/* Header */
.site-header { border-bottom: 1px solid var(--border); background: var(--surface); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-size: 20px; }
.brand svg { stroke: var(--link); }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; font-size: 15px; }
.site-nav a { color: var(--text); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--link); font-weight: 600; }
.btn {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 16px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: var(--link); background: var(--track); color: var(--text); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #FFFFFF; font-weight: 600; }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #FFFFFF; filter: brightness(1.2); }
/* Hover feedback on everything else you can click: menu links, pills, filter chips, the lesson step list */
.site-nav a:hover, .brand:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.pill:hover, .tl-chip:hover { border-color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.step-list button:hover { background: var(--track); color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  .btn, .pill, .tl-chip { transition: background-color .15s, border-color .15s, filter .15s; }
}
.btn-pill { border-radius: 999px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Timeline pills */
.timeline { display: flex; gap: 8px; overflow-x: auto; padding: 24px 0 8px; }
.pill {
  flex: none; text-decoration: none; padding: 8px 14px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface); color: var(--pill-text); font-size: 14px;
}
.pill[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #FFFFFF; font-weight: 600; }

/* Lesson page */
.lesson-head { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.eyebrow { margin: 0; font-size: 14px; color: var(--muted); }
h1 { margin: 4px 0 0; font-size: 40px; line-height: 1.15; }
@media (max-width: 600px) { h1 { font-size: 30px; } }
.lesson-main { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; padding-top: 24px; padding-bottom: 48px; }
.machine { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.monitor { background: var(--frame); border-radius: 14px; padding: 18px; }
.screen {
  position: relative; width: 100%; aspect-ratio: 4 / 3; background: #000; border-radius: 4px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.screen:focus { outline: 3px solid var(--accent); outline-offset: 3px; }
#screen_container { display: flex; align-items: center; justify-content: center; }
#screen_container > div { white-space: pre; font: 14px/16px "IBM Plex Mono", monospace; color: #fff; }
#screen_container canvas { display: none; image-rendering: pixelated; }
.power-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: #0000AA; color: #FFFFFF; text-align: center; padding: 24px; font-family: "IBM Plex Mono", monospace;
}
.power-overlay[hidden] { display: none; }
.power-overlay p { margin: 0; max-width: 460px; }
.power-overlay .note { font-size: 13px; color: #CFCFFF; }
.machine-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.machine-bar .group { display: flex; flex-wrap: wrap; gap: 8px; }
.status { margin: 0; font-size: 14px; color: var(--muted); }

.guide { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.progress-meta { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }
.progress { height: 8px; background: var(--track); border-radius: 4px; overflow: hidden; }
.progress > div { height: 100%; background: var(--accent); border-radius: 4px; transition: width .25s; }
.step-title { margin: 0; font-size: 26px; line-height: 1.2; }
.step-explain { margin: 0; color: var(--text-2); }
.callout { border-radius: 10px; padding: 14px 16px; }
.callout p { margin: 0; }
.callout .label { font-size: 13px; font-weight: 600; }
.callout .body { margin-top: 4px; }
.callout.do { background: var(--do-bg); border: 1px solid var(--do-border); }
.callout.do .label { color: var(--do-title); } .callout.do .body { color: var(--do-text); }
.callout.hist { background: var(--hist-bg); border: 1px solid var(--hist-border); }
.callout.hist .label { color: var(--hist-title); } .callout.hist .body { color: var(--hist-text); }
ol.body { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.callout.warn { background: var(--warn-bg); border: 1px solid var(--warn-border); }
.callout.warn .label { color: var(--warn-title); } .callout.warn .body { color: var(--warn-text); }
.callout.oops { background: var(--oops-bg); border: 1px solid var(--oops-border); display: flex; flex-direction: column; gap: 10px; }
.callout.oops .label { color: var(--oops-title); } .callout.oops .body { color: var(--oops-text); margin: 0; }
.callout.oops .btn, .callout.wait .btn { align-self: flex-start; }
.callout.wait { background: var(--track); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.callout.wait .label { color: var(--muted); } .callout.wait .body { margin: 0; color: var(--text-2); }
.callout.wait .fact { font-weight: 500; color: var(--text); }
ul.body { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.field select, .field input[type="file"] {
  font: inherit; font-weight: 400; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px; max-width: 100%;
}
.field-note { margin: 0; font-size: 13px; color: var(--muted); }
.label-strong { margin: 0; font-weight: 600; }
.swap { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
/* Bring your own: the drop box is a label around a real file input (click or Enter opens the picker) */
.drop {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px;
  text-align: center; border: 2px dashed var(--border-strong); border-radius: 12px; background: var(--surface); cursor: pointer;
}
.drop:hover, .drop.over { border-color: var(--link); background: var(--track); }
.drop:focus-within { outline: 2px solid var(--link); outline-offset: 2px; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-title { font-weight: 600; color: var(--text); }
.drop-sub { font-size: 13px; color: var(--muted); }
.disk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--text-2); }
.disk-list:empty { display: none; }
.disk-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; overflow-wrap: anywhere; }
.disk-list b { color: var(--text); }
.disk-list .btn { margin-left: auto; min-height: 32px; padding: 0 12px; font-size: 13px; }
kbd {
  display: inline-block; min-width: 1.8em; padding: 1px 6px; margin: 0 1px; text-align: center;
  font: 600 13px/1.4 "IBM Plex Mono", ui-monospace, monospace; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); border-bottom-width: 3px; border-radius: 6px;
}
.chip {
  display: inline; padding: 1px 6px; border-radius: 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  font: 600 13px/1.6 "IBM Plex Mono", ui-monospace, monospace; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong);
}
/* An app's real icon next to its name, so visitors know what to look for on the virtual screen. */
.chip.has-icon { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; padding: 2px 7px 2px 3px; }
.chip img { width: 24px; height: 24px; object-fit: scale-down; flex: none; } /* box reserved before it loads; small icons stay sharp */
.card.flash { animation: flash 1.2s ease-out; }
@keyframes flash { from { box-shadow: 0 0 0 4px var(--accent); } to { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .card.flash { animation: none; } }
.nav-buttons { display: flex; gap: 12px; }
.nav-buttons .btn { flex: 1; }
.nav-buttons .btn-primary { flex: 2; }
.step-list { list-style: none; margin: 0; padding: 12px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.step-list button {
  width: 100%; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 0; border-radius: 8px;
  text-align: left; font: inherit; font-size: 15px; cursor: pointer; background: transparent; color: var(--muted);
}
.step-list button.done { color: var(--text-2); }
.step-list button[aria-current="step"] { background: var(--track); color: var(--text); font-weight: 600; }
.dot {
  flex: none; width: 26px; height: 26px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; background: var(--surface); color: var(--muted); border: 1px solid var(--border-strong);
}
.done .dot, [aria-current="step"] .dot { background: var(--accent); color: #FFFFFF; border-color: var(--accent); }

/* Home */
/* Home: the time machine (built by scripts/build_site.py render_hero, driven by js/timemachine.js).
   One stop per system; the section takes on the look of the stop's era: data-era = the era's first year
   in content/eras.json. An era without a look below keeps the base look. */
.tm { --tm-bg: #1b1d22; --tm-fg: #f4f1ea; --tm-muted: #b9b2a3; --tm-accent: #ffd34d; --tm-accent-fg: #111;
  --tm-frame: 0 0 0 1px #ffffff22; --tm-year-font: "Fraunces", Georgia, serif;
  margin: 24px 0 32px; border-radius: 18px; overflow: hidden; background: var(--tm-bg); color: var(--tm-fg); }
.tm-title { margin: 0; padding: 18px 28px 0; font: 600 14px/1.4 "IBM Plex Mono", monospace; letter-spacing: .03em; color: var(--tm-muted); }
/* All stops share one grid cell, so the list is as tall as the tallest stop and the dial below never jumps.
   Hidden stops keep their space but aren't shown or read out (beats the global [hidden] rule on purpose). */
.tm-stops { list-style: none; margin: 0; padding: 0; display: grid; }
.tm-stop { grid-area: 1 / 1; display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: center; align-content: center; padding: 18px 28px 22px; min-height: 360px; }
.tm-stop[hidden] { display: grid !important; visibility: hidden; }
.tm-dial[hidden] { display: none; }
.tm .tm-year { margin: 0; font-family: var(--tm-year-font); font-weight: 800; font-size: clamp(72px, 12vw, 132px); line-height: .85; letter-spacing: -.04em; }
.tm-era { display: inline-block; margin: 14px 0 6px; padding: 4px 10px; font-size: 13px; background: var(--tm-accent); color: var(--tm-accent-fg); }
.tm .tm-name { margin: 6px 0; font-size: 30px; }
.tm-hook { margin: 0 0 16px; font-size: 17px; max-width: 46ch; }
.tm-hook sup a { color: inherit; }
.tm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.tm .btn { background: transparent; color: var(--tm-fg); border-color: currentColor; }
.tm .btn:hover, .tm-step:hover { background: var(--tm-accent); border-color: var(--tm-accent); color: var(--tm-accent-fg); }
.tm .tm-boot { background: var(--tm-accent); color: var(--tm-accent-fg); border-color: var(--tm-accent); font-weight: 700; }
.tm-screen { margin: 0; }
.tm-screen img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #000; box-shadow: var(--tm-frame); }
.tm-screen figcaption { margin-top: 8px; font-size: 12px; color: var(--tm-muted); }
.tm-dial { display: flex; align-items: center; gap: 12px; padding: 12px 28px 16px; background: color-mix(in srgb, var(--tm-fg) 8%, transparent); }
.tm-step { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; background: transparent; color: var(--tm-fg); font-size: 15px; cursor: pointer; }
.tm-track { position: relative; flex: 1; min-width: 0; }
.tm-range { position: relative; z-index: 1; display: block; width: 100%; height: 44px; margin: 0; background: transparent; accent-color: var(--tm-accent); cursor: pointer; }
/* ticks sit under the native slider (it takes the clicks); 8px insets line them up with the thumb's travel */
.tm-ticks { position: absolute; left: 8px; right: 8px; top: 0; height: 44px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.tm-tick { width: 2px; height: 12px; background: var(--tm-muted); opacity: .7; }
.tm-tick.play { width: 3px; height: 22px; background: var(--tm-accent); opacity: 1; }
.tm-ends { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--tm-muted); }
.tm-more { margin: 20px 0 56px; text-align: center; }
@media (max-width: 760px) {
  .tm-stop { grid-template-columns: 1fr; gap: 16px; padding: 14px 18px 18px; min-height: 0; }
  .tm-title, .tm-dial { padding-left: 18px; padding-right: 18px; }
  .tm-ends span:nth-child(2) { display: none; }
}
/* 1969–1980: a green-screen terminal */
.tm[data-era="1969"] { --tm-bg: #050805; --tm-fg: #7dff8a; --tm-muted: #52c45f; --tm-accent: #7dff8a; --tm-accent-fg: #021a05;
  --tm-frame: 0 0 0 2px #2b6b33, 0 0 30px #1aff3a33; --tm-year-font: "VT323", monospace; font-family: "IBM Plex Mono", monospace; }
.tm[data-era="1969"] .tm-year { font-weight: 400; font-size: clamp(96px, 15vw, 170px); text-shadow: 0 0 18px #2cff4a88; }
.tm[data-era="1969"] .tm-name { font-family: "VT323", monospace; font-weight: 400; font-size: 38px; }
/* 1981–1989: the beige PC */
.tm[data-era="1981"] { --tm-bg: #e9dfc7; --tm-fg: #2a2620; --tm-muted: #5e5544; --tm-accent: #1f3a8a; --tm-accent-fg: #f1ead6;
  --tm-frame: 0 0 0 14px #cfc3a5, 0 10px 0 14px #b9ab88; --tm-year-font: "IBM Plex Mono", monospace; font-family: "IBM Plex Mono", monospace; }
.tm[data-era="1981"] .tm-year { color: #1f3a8a; }
.tm[data-era="1981"] .tm-screen img { border-radius: 6px; }
/* 1990–1999: the teal desktop */
.tm[data-era="1990"] { --tm-bg: #008080; --tm-fg: #ffffff; --tm-muted: #c7eded; --tm-accent: #ffe066; --tm-accent-fg: #111;
  --tm-frame: 0 0 0 4px #c0c0c0, 0 14px 26px #0006; }
.tm[data-era="1990"] .tm-year { text-shadow: 5px 5px 0 #004c4c; }
.tm[data-era="1990"] .btn { border-radius: 0; box-shadow: inset -2px -2px 0 #0005, inset 2px 2px 0 #fff8; }
/* 2000–2006: glossy */
.tm[data-era="2000"] { --tm-bg: linear-gradient(180deg, #eef6ff 0%, #b8d6ff 60%, #8ab4f0 100%); --tm-fg: #0b2a5c; --tm-muted: #2c4f86;
  --tm-accent: #2f9e2f; --tm-accent-fg: #ffffff; --tm-frame: 0 0 0 6px #ffffffaa, 0 16px 30px #0b2a5c55; }
.tm[data-era="2000"] .tm-year { background: linear-gradient(180deg, #ffffff 0%, #6fa8ff 50%, #1d5fd1 51%, #5fa0ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 2px #0b2a5c55); }
.tm[data-era="2000"] .tm-era, .tm[data-era="2000"] .btn { border-radius: 999px; }
.tm[data-era="2000"] .tm-boot { background: linear-gradient(#7ee07e, #2f9e2f); }
.tm[data-era="2000"] .tm-screen img { border-radius: 12px; }
/* 2007–today: computers in your pocket */
.tm[data-era="2007"] { --tm-bg: #fbfbfd; --tm-fg: #111111; --tm-muted: #5c5c63; --tm-accent: #111111; --tm-accent-fg: #ffffff;
  --tm-frame: 0 0 0 10px #111111, 0 18px 34px #0003; }
.tm[data-era="2007"] .tm-era, .tm[data-era="2007"] .btn { border-radius: 999px; }
.tm[data-era="2007"] .tm-screen img { border-radius: 22px; }
/* Era themes for the whole site. <html data-era="…"> is written by the build on OS and lesson pages, set by
   js/timemachine.js on the home page and by js/era-follow.js as you scroll the timeline and the version pages.
   Each era sets every colour token itself, and tests/test_contrast.py checks each text/background pair for WCAG AA (4.5:1). Only colours change here, no fonts
   or sizes, so nothing moves when the era changes. Without JavaScript the timeline and version pages keep the normal look. */
html[data-era] .site-header { background: var(--hd-bg); border-bottom-color: var(--hd-line); }
html[data-era] .brand, html[data-era] .site-nav a, html[data-era] .site-nav a[aria-current="page"] { color: var(--hd-fg); }
html[data-era] .site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
html[data-era] .brand svg { stroke: var(--hd-accent); }
html[data-era] .site-nav a:focus-visible, html[data-era] .brand:focus-visible { outline-color: var(--hd-fg); }
@media (prefers-reduced-motion: no-preference) {
  html[data-era] body, html[data-era] .site-header, html[data-era] .site-nav a, html[data-era] .tl-card,
  html[data-era] .glance-item { transition: background-color .35s, color .35s, border-color .35s; }
}
/* boxes (do, history, careful, oops): the light set on light eras, the dark set on dark ones */
html[data-era="1981"], html[data-era="2000"], html[data-era="2007"] {
  --do-bg: #E6F2F0; --do-border: #B9DAD5; --do-title: #0B5A54; --do-text: #0B3D39;
  --hist-bg: #F6F1E6; --hist-border: #E5D8B8; --hist-title: #6B4E10; --hist-text: #4A360B;
  --warn-bg: #FFF4E0; --warn-border: #F2C98A; --warn-title: #8A4B00; --warn-text: #5C3300;
  --oops-bg: #FDECEC; --oops-border: #F1B5B5; --oops-title: #9B1C1C; --oops-text: #6B1414; color-scheme: light; }
html[data-era="1969"], html[data-era="1990"] {
  --do-bg: #0E2E2B; --do-border: #1F4C47; --do-title: #7FD8CB; --do-text: #C9EDE7;
  --hist-bg: #2B2414; --hist-border: #4D3F1E; --hist-title: #E9C46A; --hist-text: #F0E2C0;
  --warn-bg: #2E2210; --warn-border: #5A4218; --warn-title: #F5B85C; --warn-text: #F6E3C2;
  --oops-bg: #2E1414; --oops-border: #5C2626; --oops-title: #F59A9A; --oops-text: #F6D3D3; color-scheme: dark; }
/* 1969–1980: green-screen terminal */
html[data-era="1969"] { --bg: #000000; --surface: #061006; --border: #1e4d24; --border-strong: #2f7a38; --text: #8dff98;
  --text-2: #7af286; --muted: #5fd36c; --pill-text: #8dff98; --track: #0d220f; --accent: #1a7a26; --link: #b6ffbd;
  --link-hover: #e0ffe3; --frame: #0b1f0d; --hd-bg: #000000; --hd-fg: #8dff98; --hd-accent: #8dff98; --hd-line: #1e4d24; }
/* 1981–1989: the beige PC */
html[data-era="1981"] { --bg: #d6cab0; --surface: #f3edde; --border: #b9ab88; --border-strong: #9c8c66; --text: #1e1b16;
  --text-2: #2a2620; --muted: #4f4738; --pill-text: #3a3428; --track: #e4dac2; --accent: #1f3a8a; --link: #1f3a8a;
  --link-hover: #142a6a; --frame: #2a2620; --hd-bg: #cfc3a5; --hd-fg: #2a2620; --hd-accent: #1f3a8a; --hd-line: #a99a75; }
/* 1990–1999: the teal desktop, with a gray menu bar */
html[data-era="1990"] { --bg: #006767; --surface: #004c4c; --border: #2f8a8a; --border-strong: #5fb0b0; --text: #ffffff;
  --text-2: #eafafa; --muted: #c7eded; --pill-text: #eafafa; --track: #005858; --accent: #000080; --link: #ffe066;
  --link-hover: #fff0a8; --frame: #003333; --hd-bg: #c0c0c0; --hd-fg: #000000; --hd-accent: #000080; --hd-line: #404040;
  --hist-title: #ffe9a8; }
html[data-era="1990"] .site-header { box-shadow: inset 0 2px 0 #fff, inset 0 -2px 0 #808080; }
/* 2000–2006: glossy */
html[data-era="2000"] { --bg: #dce9fb; --surface: #ffffff; --border: #a9c4ec; --border-strong: #7fa6dd; --text: #0b2a5c;
  --text-2: #12356f; --muted: #2c4f86; --pill-text: #1d3f75; --track: #e6effc; --accent: #237a23; --link: #1d5fd1;
  --link-hover: #1647a3; --frame: #0b2a5c; --hd-bg: linear-gradient(180deg, #2468c8, #1d5fd1 55%, #1a4fb0);
  --hd-fg: #ffffff; --hd-accent: #ffffff; --hd-line: #0f3a8a; }
/* 2007–today: computers in your pocket */
html[data-era="2007"] { --bg: #f2f2f7; --surface: #ffffff; --border: #d2d2d7; --border-strong: #b7b7bd; --text: #111111;
  --text-2: #2c2c2e; --muted: #5c5c63; --pill-text: #3a3a3c; --track: #e8e8ed; --accent: #111111; --link: #0060df;
  --link-hover: #0049aa; --frame: #111111; --hd-bg: #ffffff; --hd-fg: #111111; --hd-accent: #111111; --hd-line: #d2d2d7; }
.tag { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--track); color: var(--muted); }
.tag.live { background: var(--do-bg); color: var(--do-title); }
.site-footer { border-top: 1px solid var(--border); padding: 24px 0; color: var(--muted); font-size: 14px; }
/* Navigation: the same footer links on every page, back to the timeline, earlier/later systems, Try an OS */
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 10px; font-size: 15px; }
.foot-note { margin: 0; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.back-link { margin: 20px 0 0; font-size: 15px; }
.lesson-story { margin: 6px 0 0; font-size: 15px; }
.os-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); }
.os-pager a { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); text-decoration: none; }
.os-pager a:hover { border-color: var(--link); background: var(--track); }
.os-pager a[rel="next"] { margin-left: auto; text-align: right; }
.os-pager span { font-size: 13px; color: var(--muted); }
.play-grid { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.play-card { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.play-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #000; }
.play-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.play-body h2 { margin: 0; font-size: 22px; }
.play-body p { margin: 0; }
.play-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: auto !important; padding-top: 10px; }
.play-byo { border-style: dashed; border-width: 2px; }
.tm-more .btn + .btn { margin-left: 8px; }

/* OS pages (site/os/*.html) */
.os-page { max-width: 820px; padding-bottom: 56px; }
.os-head { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.os-head h1 { margin: 0; }
.os-badge, .os-logo { flex: none; width: 64px; height: 64px; border-radius: 14px; }
.os-badge { display: grid; place-items: center; color: #FFFFFF; font: 600 28px/1 "Space Grotesk", sans-serif; }
.os-logo { object-fit: contain; }
.os-summary { font-size: 18px; color: var(--text-2); margin: 16px 0; }
.os-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 24px; }
.os-actions .tag { align-self: center; font-size: 14px; padding: 6px 12px; }
.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 8px; }
.glance-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.glance-item dt { font-size: 12px; color: var(--muted); }
.glance-item dd { margin: 4px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.os-section h2 { font-size: 24px; margin: 32px 0 8px; }
.os-section p { margin: 0 0 12px; }
.os-fig { margin: 16px 0; }
.os-fig img { display: block; max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.os-fig figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
.pic-label { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-title); font-size: 12px; }
.moments { list-style: none; margin: 0; padding: 0; }
.moments li { padding: 8px 0; border-top: 1px solid var(--border); }
.moments .mono { display: inline-block; min-width: 3.5em; color: var(--muted); }
.os-dyk { margin-top: 32px; color: var(--hist-text); }
.os-dyk strong { color: var(--hist-title); }
.sources { padding-left: 24px; }
.sources li { margin-bottom: 10px; overflow-wrap: anywhere; }
.sources li:target { background: var(--hist-bg); }
/* a citation lands with room above, so the system's heading on sources.html stays in view */
.sources li { scroll-margin-top: 96px; }

/* Home timeline: scroll story. One column, line on the left; wide screens alternate around a centre line. */
/* one row that scrolls sideways when the chips don't fit, so the sticky bar stays one chip tall on phones;
   the 6px side padding keeps focus rings inside the scroll box */
.tl-bar { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; overflow-x: auto; scroll-padding-inline: 6px; padding: 12px 6px; margin: 16px -6px 0; background: var(--bg); border-bottom: 1px solid var(--border); }
/* jump targets land below the sticky bar (69px tall) */
.tl-card, .tl-mw, .tl-era, .tl-sources li { scroll-margin-top: 88px; }
.tl-chip { flex: none; white-space: nowrap; min-height: 44px; padding: 0 14px;border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--pill-text); font: inherit; font-size: 14px; cursor: pointer; }
.tl-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #FFFFFF; font-weight: 600; }
.tl-tracker { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.tl { position: relative; list-style: none; margin: 24px 0 8px; padding: 0 0 0 32px; }
.tl::before { content: ""; position: absolute; top: 0; bottom: 0; left: 8px; width: 2px; background: var(--border-strong); }
.tl-era { margin: 32px 0 16px; }
.tl-era h3 { margin: 2px 0 4px; font-size: 24px; }
.tl-era p { margin: 0; max-width: 60ch; color: var(--text-2); }
.tl-era .mono { font-size: 14px; color: var(--muted); }
.tl-card { position: relative; margin: 0 0 20px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tl-card::before { content: ""; position: absolute; top: 24px; left: -31px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }
.tl-card[data-status="info"]::before { background: var(--border-strong); }
.tl-card .os-badge, .tl-card .os-logo { width: 44px; height: 44px; border-radius: 10px; font-size: 20px; }
.tl-card h2, .tl-card h3 { margin: 0; font-size: 22px; }
.tl-card p { margin: 0; color: var(--text-2); }
.tl-year { font-size: 14px; color: var(--muted); }
.tl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tl-mw { margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: var(--hist-bg); border: 1px solid var(--hist-border); color: var(--hist-text); font-size: 14px; }
.tl-mw .mono { color: var(--hist-title); }
.tl-sources { padding-left: 24px; font-size: 14px; }
.tl-sources li { margin-bottom: 8px; overflow-wrap: anywhere; }
.tl-sources li:target { background: var(--hist-bg); }
.wing-fig { margin: 0; max-width: 100%; }
.wing-fig img { display: block; width: 100%; max-width: 220px; height: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.wing-fig figcaption { margin-top: 6px; font-size: 13px; color: var(--muted); }
@media (max-width: 600px) { .wing-fig img { max-width: 100%; } }
@media (min-width: 900px) {
  .tl { padding: 0; }
  .tl::before { left: 50%; margin-left: -1px; }
  .tl-era { text-align: center; position: relative; margin: 40px 0 20px; padding: 8px 0; background: var(--bg); }
  .tl-era p { margin: 0 auto; }
  .tl-card { width: calc(50% - 32px); margin-bottom: 24px; }
  .tl-card::before { left: auto; right: -39px; }
  /* no-JS fallback: only cards JS has not placed (no data-side) alternate by DOM position */
  .tl-card:not([data-side]):nth-child(even of .tl-card) { margin-left: calc(50% + 32px); }
  .tl-card:not([data-side]):nth-child(even of .tl-card)::before { right: auto; left: -39px; }
  /* JS sets data-side on the visible cards so filtering keeps left/right balanced */
  .tl-card[data-side="left"] { margin-left: 0; }
  .tl-card[data-side="left"]::before { left: auto; right: -39px; }
  .tl-card[data-side="right"] { margin-left: calc(50% + 32px); }
  .tl-card[data-side="right"]::before { right: auto; left: -39px; }
}
/* wing pages: one column, line and dots on the left at every width (the 820px page column is too narrow for a zigzag) */
@media (min-width: 900px) {
  ol.tl.tl-wing { padding: 0 0 0 32px; }
  ol.tl.tl-wing::before { left: 8px; margin-left: 0; }
  ol.tl.tl-wing > li.tl-card:nth-child(n) { width: auto; margin-left: 0; margin-bottom: 20px; }
  ol.tl.tl-wing > li.tl-card:nth-child(n)::before { left: -31px; right: auto; }
}
.tl-card[hidden], .tl-era[hidden] { display: none; }
.tl-chip:focus-visible, .tl-play:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tl-card.done { border-color: var(--accent); }
.tl-done { font-size: 14px; font-weight: 600; color: var(--link); }
.tl-anim .tl-card { opacity: 0; transform: translateY(16px); transition: opacity .4s, transform .4s; }
.tl-anim .tl-card.in { opacity: 1; transform: none; }
@media print { .tl-anim .tl-card { opacity: 1; transform: none; } }