/* Kurs-Stylesheet.

   Colours are tokens only — never hard-code a colour in a component, or the
   dark theme loses it. Containers come in four shapes and nothing else:

     .card          neutral panel        (notice, cost, icon card, placeholder)
     .card.accent   the same, tinted     (takeaway, done-when, resume)
     .fold          a disclosure         (why, details, levels)
     .code          monospace surface    (copy, sample, prompt)

   A new block type picks one of the four; it does not bring its own. */

:root {
  /* Zwei Markenfarben, die des Prompt Generators (main fork):
     Navy fuehrt, Lime heisst "erledigt / du bist dran".
     Lime ist zu hell fuer Text (1,98 : 1 auf Weiss) und traegt keine weisse
     Schrift. Deshalb: auf Lime steht Navy (6,3 : 1), und wo "erledigt" als
     Text erscheint, nimmt es das dunkle Oliv --lime-text. */
  --blue: #003468;        /* Prompt Generator --d */
  --blue-deep: #00264d;
  --orange: #a5c500;      /* Prompt Generator --p (Name aus der Vorlage) */
  --orange-text: #546400;

  --bg: #f8fafc;
  --surface: #ffffff;
  --ink: #1e293b;
  --ink-soft: #475569;
  --ink-faint: #5b6779;   /* dark enough for 4.5:1 on every light surface */
  --line: #e2e8f0;

  --accent: var(--blue);
  --accent-soft: #eef3f9;
  --accent-line: #c3d3e6;

  --done: var(--orange);
  --done-text: var(--orange-text);
  --done-soft: #f0f8d8;   /* Prompt Generator --selbg */
  --done-line: #cfe27a;

  /* Kopfzeile wie im Prompt Generator: Navy mit Lime-Linie */
  --bar-bg: var(--blue);
  --bar-ink: #ffffff;
  --bar-ink-soft: #c9d6e6;
  --bar-line: var(--orange);
  --bar-sub-end: #005a8e;
  --logo-ring: rgba(165, 197, 0, 0.6);
  --logo-bg: #ffffff;
  --heading: var(--blue);

  --warn-bg: #fdf3e3;
  --warn-line: #efd6a8;

  /* Ink that sits ON a filled accent/done surface. In dark mode the fills
     turn light, so this flips to a dark ink. */
  --on-accent: #ffffff;
  --on-done: #003468;
  --field-bg: #ffffff;
  --field-line: #bdb7ac;
  --code-bg: #f5f3ef;
  --code-hl: #fbeeb8;   /* eine hervorgehobene Stelle im Prompt */

  --radius: 14px;
  /* Der Prompt Generator setzt alles serifenlos. --serif heisst nur noch
     so, weil die Vorlage den Namen an vielen Stellen benutzt. */
  --serif: var(--sans);
  --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
}

a { color: var(--accent); }
p { margin: 0 0 12px; }

/* ---------- top bar ---------- */

.topbar {
  background: var(--bar-bg);
  position: sticky;
  top: -104px;
  z-index: 20;
}

.footer-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 20px;
}

.topbar-inner {
  max-width: 48rem;
  width: calc(100% - 48px);
  height: 104px;
  margin: 0 auto;
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  min-width: 0;
  color: var(--bar-ink);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}
.brand:hover { color: var(--bar-ink); }
.brand-logo {
  width: 72px; height: 72px; object-fit: cover; border-radius: 50%;
  border: 3px solid var(--logo-ring); background: var(--logo-bg); flex: none;
}
.topbar-sub {
  background: linear-gradient(135deg, var(--bar-bg), var(--bar-sub-end));
  border-bottom: 3px solid var(--bar-line);
}
.topbar-sub-inner {
  max-width: 48rem; min-height: 47px; margin: 0 auto; padding: 9px 0;
  width: calc(100% - 48px);
  display: flex;
  align-items: center; gap: 12px;
}
.course-title {
  color: var(--bar-ink); font-size: 13px; font-style: italic;
  line-height: 1.35; text-align: left; white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}

.lang-switch { display: flex; gap: 8px; font-size: 13px; margin-left: auto; flex: none; }
.lang-switch[hidden] { display: none; }
.lang-switch a { color: var(--bar-ink-soft); text-decoration: none; }
.lang-switch a:hover { color: var(--bar-ink); text-decoration: underline; }
.lang-switch a.current { color: var(--bar-ink); font-weight: 700; }

.lang-hint {
  max-width: 44rem; margin: 16px auto 0; padding: 10px 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); font-size: 14px; color: var(--ink-soft);
}

/* ---------- shared type ---------- */

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--done-text);   /* im Prompt Generator: die Lime-Vorzeile */
  margin: 0 0 12px;
}

h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 5.5vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--heading);
  margin: 0 0 14px;
}

.box-label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 6px;
}

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  padding: 11px 20px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
}
.btn:hover { filter: brightness(1.1); }

/* ---------- the four containers ---------- */

.card {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 18px;
}
.card > :last-child { margin-bottom: 0; }
.card.accent { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink); }

.fold {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.fold > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 16px;
  font-size: 15px; font-weight: 400; color: var(--ink);
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after {
  content: ""; margin-left: auto; flex: none;
  width: 8px; height: 8px; align-self: center;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s;
}
.fold[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.fold-body { padding: 0 16px 14px; }
.fold-body > :last-child { margin-bottom: 0; }
/* Alle Aufklapper sind gleich gewichtet (Entscheidung 06.10.2026): "why" und
   "details" sehen gleich aus. Die Klasse .quiet bleibt am Element, hat aber
   keine eigene Regel mehr. */

.code {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--code-bg);
}
.code pre {
  margin: 0; padding: 14px 16px; padding-right: 76px;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word; color: var(--ink);
}
.code.sample pre { padding-right: 16px; }
.code-hl {
  background: var(--code-hl); color: var(--ink);
  border-radius: 3px; box-shadow: 0 0 0 2px var(--code-hl);
}
.copy-btn {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  font: inherit; font-size: 12px; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); cursor: pointer; color: var(--ink);
}
.copy-btn:hover { border-color: var(--accent); color: var(--accent); }

/* A long block of copy-material is shown folded, so it does not bury a step. */
.code.is-clipped pre {
  max-height: 17em; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
  mask-image: linear-gradient(#000 72%, transparent);
}
.code-more {
  display: block; width: 100%;
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 9px 12px; cursor: pointer;
  border: 0; border-top: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  background: none; color: var(--accent);
}
.code-more:hover { background: var(--accent-soft); }

.placeholder {
  border-style: dashed;
  background: none;
  padding: 24px;
  color: var(--ink-faint);
  text-align: center;
  margin: 0 0 32px;
}

.notice {
  margin: 0 0 28px;
  font-size: 15px;
  color: var(--ink-soft);
}
.notice strong { color: var(--ink); }
.notice.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--ink); }

/* ---------- home ---------- */

.home {
  max-width: 48rem;
  width: calc(100% - 40px);
  margin: 28px auto 72px;
  padding: 0 52px 36px;
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--line), 0 4px 24px rgb(0 52 104 / 8%);
}

.hero { padding: 32px 0 28px; }
.lede { font-size: 19px; color: var(--ink-soft); }
.home > .card { background: var(--bg); }
/* "Brauchen Sie das Programm überhaupt?" – vor den Voraussetzungen */
.home > .card.before-start { margin: 0 0 16px; }

.chapter-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 36px;
  border-top: 1px solid var(--line);
}
.chapter-list li { border-bottom: 1px solid var(--line); }

.chapter-link {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 16px 4px;
  color: inherit;
  text-decoration: none;
}
.chapter-link:hover { background: var(--surface); }

.chapter-num, .path-nr {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-faint);
  min-width: 2em;
  font-variant-numeric: tabular-nums;
}

.chapter-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.chapter-title { font-weight: 600; letter-spacing: -0.01em; }
.chapter-outcome { font-size: 15px; color: var(--ink-soft); }
.chapter-meta { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.chapter-meta.complete, .path-status.complete { color: var(--done-text); }
.chapter-meta.progress, .path-status.progress { color: var(--accent); }

.home-start { margin: 0; }

.resume { margin-top: 8px; padding: 18px 20px; }
.resume p { font-size: 16px; color: var(--ink); }
.resume .box-label { color: var(--accent); }
.resume .btn { margin-top: 2px; }
.step.resume-here { box-shadow: 0 0 0 2px var(--accent); scroll-margin-top: 80px; }

/* ---------- system strip ---------- */

.system {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 0 18px;
  margin: 0 0 28px;
}

.system-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 12px;
}

.system-parts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.system-part {
  border-top: 3px solid var(--line);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.system-tag { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
/* Two lines reserved, so the tool names below stay level even when a role
   wraps ("Your head-up display" vs "Your fuel"). */
.system:not(.mini) .system-role {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600;
  line-height: 1.35; min-height: 2.7em;
}
.system-tool { font-family: var(--serif); font-size: 16px; line-height: 1.25; color: var(--ink-faint); overflow-wrap: anywhere; }

.system-part.done { border-top-color: var(--done); }
.system-part.done .system-tag { color: var(--done-text); }
.system-part.done .system-tool { color: var(--ink-soft); }
.system-part.now { border-top-color: var(--accent); }
.system-part.now .system-tag { color: var(--accent); font-weight: 600; }
.system-part.now .system-tool { color: var(--ink); }

.system-note { font-size: 14px; color: var(--ink-soft); margin: 12px 0 0; }

/* Chapter pages get the same five columns with their coloured rules — the
   rules are what make it readable — but without the tag and role lines. */
.system.mini { padding: 14px 0 16px; margin: 0 0 24px; }
.system.mini .system-label { margin-bottom: 10px; }
.system.mini .system-parts { gap: 14px; }
.system.mini .system-part { padding-top: 9px; gap: 2px; }
.system.mini .system-tool {
  font-family: var(--sans); font-size: 14px; line-height: 1.3; color: var(--ink-faint);
}
.system.mini .system-part.now .system-tool { color: var(--ink); font-weight: 600; }
.system.mini .system-role {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); min-height: 1.3em;
}
.system.mini .system-note { margin-top: 14px; }

/* ---------- chapter layout ---------- */

.layout {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 250px minmax(0, 48rem);
  gap: 56px;
  justify-content: center;
}

.path {
  position: sticky;
  top: 56px;
  align-self: start;
  padding: 36px 0;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
}

.path summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  cursor: pointer;
  padding-bottom: 12px;
}
.path summary::-webkit-details-marker { display: none; }
.path-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.path-count { font-size: 12px; color: var(--ink-faint); }

.path-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.path-list li { border-bottom: 1px solid var(--line); }
.path-list a {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 12px 10px 12px 12px;
  color: var(--ink-soft);
  text-decoration: none;
  border-left: 3px solid transparent;
}
.path-list a:hover { background: var(--surface); color: var(--ink); }
.path-list li.current a { border-left-color: var(--accent); color: var(--ink); background: var(--surface); }
.path-body { display: flex; flex-direction: column; }
.path-title { font-size: 15px; line-height: 1.35; }
.path-list li.current .path-title { font-weight: 600; }
.path-status { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-top: 3px; }

.chapter {
  min-width: 0;
  margin: 28px 0 72px;
  padding: 32px 32px 40px;
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--line), 0 4px 24px rgb(0 52 104 / 8%);
}
.chapter-head { margin-bottom: 22px; }
.chapter-subtitle { font-size: 19px; color: var(--ink-soft); margin: -4px 0 14px; }
/* The chapter opening: set off by a rule, not by a box. The first paragraph
   carries the weight, the rest steps back to normal reading size. */
.intro {
  color: var(--ink-soft);
  font-size: 18px;
  border-left: 3px solid var(--accent-line);
  padding-left: 22px;
  margin: 18px 0 0;
}
.intro > p:first-child { color: var(--ink); }
.intro > p:nth-child(n+3) { font-size: 17px; }
.intro > :last-child { margin-bottom: 0; }
.intro-blocks { display: grid; gap: 10px; margin-top: 20px; }

/* ---------- video ---------- */

.video-wrap { margin: 0 0 28px; }
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #1d1c18 center / cover no-repeat;
  /* A hairline, so a poster from a white interface still has an edge
     against the white step card behind it. Invisible on dark stills. */
  box-shadow: inset 0 0 0 1px var(--line);
}
/* The tint lives on the poster button. Once the player is in, the button is
   gone — so nothing can sit on top of the iframe and swallow clicks. */
.video-poster {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  border: 0; padding: 0; cursor: pointer;
  background: transparent center / cover no-repeat;
}
/* Light enough that a screenshot poster still reads, dark enough to say
   "not playing yet". The play button brings its own shadow, so it stands
   out on a white interface shot as well as on a dark still. */
.video-poster::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(10, 9, 6, 0.12); transition: background 0.2s;
}
.video-poster:hover::after { background: rgba(10, 9, 6, 0.04); }
.video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 14px rgba(10, 9, 6, 0.35);
  display: grid; place-items: center;
}
.video-play::before {
  content: ""; margin-left: 4px;
  border-left: 18px solid #16212b;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-wrap figcaption {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 14px; color: var(--ink-faint); margin-top: 8px;
}
/* Der Hinweis steht einmal pro Seite, am ersten Video. Klein, aber nicht
   blasser: --ink-faint liegt auf dem Seitengrund bei 4.9:1, der Mindestwert
   ist 4.5. Eine Stufe heller faellt darunter. */
.video-notice {
  margin: 6px 0 0;
  font-size: 12px; line-height: 1.4; color: var(--ink-faint);
}
.video-notice a { color: var(--ink-faint); }

.video-duration { white-space: nowrap; letter-spacing: 0.06em; text-transform: uppercase; font-size: 12px; }

/* ---------- the chapter's own video ----------

   It opens the chapter, above the intro text, and carries an orange label.
   Orange is the course's "done / your turn" colour, so it reads as an
   invitation to act rather than as decoration. Everything here is scoped to
   .chapter-video; the videos inside a step are untouched. */

.chapter-video { margin: 0 0 24px; }
.chapter-video .video-wrap { margin-bottom: 0; }
/* Ein feiner Strich statt einer Beschriftung: er eroeffnet das Kapitel,
   ohne ein Wort zu kosten. Volle Breite, damit er zum Videorahmen gehoert
   und nicht als Zierde danebensteht. */
.chapter-video-rule {
  height: 1px; background: var(--done-line); margin: 0 0 14px;
}
/* A soft ring instead of the hairline, so the frame lifts off the page. */
.chapter-video .video {
  box-shadow: inset 0 0 0 1px var(--done-line), 0 0 0 4px var(--done-soft);
}
.chapter-video .video-play { background: var(--done); }
.chapter-video .video-play::before { border-left-color: var(--on-done); }

/* ---------- steps ---------- */

.steps-head { margin: 0 0 16px; }
.steps-count {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 10px;
}
.steps-count b { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.steps-aside { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
/* in the meta line the badge is small and quiet: it labels, it does not shout */
.steps-aside .dev-pill { font-size: 12px; padding: 2px 9px 2px 7px; }
.steps-aside .dev-pill.need { background: none; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); }
.steps-aside .dev-pill i { display: none; }
.steps-time { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.steps-hint { font-size: 14px; color: var(--ink-faint); margin: 0; }

.steps { list-style: none; padding: 0; margin: 0 0 32px; }

.step {
  scroll-margin-top: 80px; /* Direktlink #03-3: Kopf nicht unter der Kopfzeile */
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px 18px 16px;
  margin-bottom: 10px;
}
.step:not(.folded) { padding: 22px 24px 20px 18px; }
.step.done { background: var(--done-soft); border-color: var(--done-line); }

/* Folded: only the title row shows. That is the normal state for every step
   except the one the learner is on. */
.step.folded .step-collapse { display: none; }
.step.folded .step-title { margin-bottom: 0; }
.step.done .step-title { color: var(--ink-soft); }

.step-head {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  width: 100%; text-align: left; font: inherit; color: inherit;
  display: flex; align-items: baseline; gap: 12px; cursor: pointer;
}
.step-head:hover .step-title { color: var(--accent); }
.step-chev {
  margin-left: auto; flex: none; align-self: center;
  width: 8px; height: 8px;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s;
}
.step:not(.folded) .step-chev { transform: translateY(2px) rotate(-135deg); }

/* The round mark is also the quickest way to tick a step off. */
.step-mark {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 16px; color: var(--ink-faint);
  background: var(--bg); cursor: pointer; padding: 0;
}
.step-mark:hover { border-color: var(--done); color: var(--done-text); }
.step-mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.step.done .step-mark {
  background: var(--done); border-color: var(--done); color: var(--on-done);
  font-family: var(--sans); font-size: 15px;
}

.step-title { font-family: var(--serif); font-size: 21px; line-height: 1.25; font-weight: 800; color: var(--heading); margin: 3px 0 4px; letter-spacing: -0.01em; }
.step-sub { color: var(--ink-faint); margin: 0 0 10px; }
.step-body { color: var(--ink-soft); }
.step-body > * { margin-bottom: 12px; }
.prose > :last-child { margin-bottom: 0; }

.step-check {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 6px; cursor: pointer; font-weight: 600; color: var(--ink);
}
.step-check input {
  appearance: none; margin: 0; flex: none;
  width: 22px; height: 22px; border: 1.5px solid var(--field-line); border-radius: 5px;
  background: var(--field-bg); cursor: pointer; display: grid; place-items: center;
}
.step-check input:checked { background: var(--done); border-color: var(--done); }
.step.done .step-check-label { color: var(--done-text); }
.step-check input:checked::after {
  content: ""; width: 6px; height: 11px;
  border: solid var(--on-done); border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.step-check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- blocks ---------- */

/* screenshots, with a full-size view for phones */
.shot { margin: 0 0 14px; }
.shot-open {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
}
.shot-open img { max-width: 100%; display: block; border: 1px solid var(--line); border-radius: 8px; }
.shot figcaption { font-size: 14px; color: var(--ink-faint); margin-top: 6px; }
.step-body .video-wrap { margin-bottom: 14px; }

.lightbox {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(8, 12, 16, 0.92);
  display: grid; place-items: center; padding: 24px;
}
.lightbox img { max-width: 100%; max-height: 92vh; border-radius: 8px; display: block; }
.lightbox-close {
  position: absolute; top: 10px; right: 14px;
  font: inherit; font-size: 30px; line-height: 1;
  background: none; border: 0; color: #fff; cursor: pointer; padding: 6px 10px;
}

/* fill-in prompt */
.prompt-block { margin: 18px 0; }
.prompt-fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 18px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 10px 10px 0 0; border-bottom: 0;
}
.pf { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.pf input {
  font: inherit; font-size: 15px; padding: 7px 10px; min-width: 0;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--field-bg); color: var(--ink);
}
.pf input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.pick-row { display: flex; gap: 6px; flex-wrap: wrap; }
.pick {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-faint);
}
.pick:hover { color: var(--ink); }
.pick.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.prompt-copy { border-radius: 0 0 10px 10px; }

/* drawn interface icons, so a button can be shown without a screenshot */
.icon-note {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin: 18px 0;
}
.icon-card { margin: 0; display: flex; align-items: center; gap: 14px; }
.icon-art {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 8px; background: var(--accent); color: var(--on-accent);
}
.icon-art svg { width: 24px; height: 24px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-card figcaption { display: flex; flex-direction: column; gap: 2px; line-height: 1.45; }
.icon-card figcaption b { font-size: 15px; }
.icon-card figcaption span { font-size: 14px; color: var(--ink-faint); }

/* chapter extras: material that belongs to the chapter, not to one step */
.extras { margin: 34px 0 6px; }
.extras > :first-child { margin-top: 0; }

/* what to watch, by level — folds in a list, not as separate cards */
.levels { margin: 14px 0 0; }
.levels .level { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.levels .level:first-child { border-top: 1px solid var(--line); }
.levels .level > summary { padding: 13px 4px; font-weight: 400; }
.levels .level > summary:hover .level-name { color: var(--ink); }
.level-tag { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--accent); min-width: 28px; }
.level-name { color: var(--ink-faint); font-size: 16px; }
.level[open] .level-name { color: var(--ink); }
.levels .level-body { padding: 0 4px 16px 40px; }
.level-body > :first-child { margin-top: 0; }
.level-empty { color: var(--ink-faint); font-style: italic; }
.levels-note { margin-top: 16px; font-size: 14px; color: var(--ink-faint); }

@media (max-width: 560px) { .levels .level-body { padding-left: 4px; } }

/* platform tabs (Windows / Mac) — the choice is remembered across chapters */
.tabs { margin: 18px 0; }
.tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--ink-faint);
  padding: 8px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tab-panel { padding-top: 12px; }
.tab-panel > :first-child { margin-top: 0; }
.tab-panel > * + * { margin-top: 12px; }

/* lists and sub-headings inside a step */
.step-list { margin: 12px 0; padding-left: 22px; }
.step-list li { margin: 6px 0; line-height: 1.6; }
.step-list li::marker { color: var(--ink-faint); }
.step-h { font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink); margin: 24px 0 8px; font-weight: 700; }

/* Takeaway and Done-when are meant to be grasped at a glance: a coloured
   label, short lines, and list markers in the accent colour. */
.takeaway, .done-when { padding: 16px 18px; }
.card.accent .box-label { color: var(--accent); font-weight: 700; }
.card.accent .step-list {
  margin: 0; padding-left: 20px;
}
.card.accent .step-list li { margin: 5px 0; line-height: 1.5; }
.card.accent .step-list li:first-child { margin-top: 0; }
.card.accent .step-list li:last-child { margin-bottom: 0; }
.card.accent .step-list li::marker { color: var(--accent); }
.card.accent p + p,
.card.accent .step-list + p { margin-top: 10px; }

/* ---------- device badge ---------- */

.dev-badge { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dev-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: 13px; line-height: 1.4; white-space: nowrap;
}
.dev-pill svg { width: 15px; height: 15px; flex: none; fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; stroke: currentColor; }
.dev-pill.need { background: var(--accent); color: var(--on-accent); }
.dev-pill.extra { background: transparent; color: var(--ink-faint); box-shadow: inset 0 0 0 1px var(--line); }
.dev-pill i { font-style: normal; opacity: .75; }

.chapter-aside { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.dev-badge.compact { gap: 4px; }
.dev-badge.compact .dev-pill { padding: 2px 4px; background: none; box-shadow: none; color: var(--ink-faint); }
.dev-badge.compact .dev-pill span { display: none; }
.dev-badge.compact .dev-pill svg { width: 16px; height: 16px; }
.dev-badge.compact .dev-pill.need { color: var(--accent); }
.dev-badge.compact .dev-pill.extra { color: var(--ink-faint); opacity: .55; }

.device-warn { margin-bottom: 20px; }

@media (max-width: 560px) { .chapter-aside .dev-badge { display: none; } }

/* ---------- closing boxes ---------- */

.boxes { display: grid; gap: 14px; margin: 0 0 36px; }
/* Free path and Upgrade: two halves with a rule between them, so it is
   clear at a glance which side costs money. The free side carries the
   normal ink, the upgrade side steps back — the free path is the default. */
.cost {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0; padding: 0; font-size: 15px; color: var(--ink-soft);
  overflow: hidden;
}
.cost > div { padding: 16px 20px; min-width: 0; }
.cost > div + div { border-left: 1px solid var(--line); }
.cost > div:first-child { color: var(--ink); }
.cost p:last-child { margin: 0; }
.done-when { font-size: 17px; }
.done-when p:last-child { margin: 0; }

.chapter-nav {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border-top: 1px solid var(--line); padding-top: 24px; font-size: 15px;
}
.chapter-nav a:not(.btn) { text-decoration: none; }

/* ---------- download ---------- */

.download { display: grid; gap: 8px; justify-items: start; }
.download-file { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.download-name { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.download-size { font-size: 13px; color: var(--ink-faint); }
.download-text { color: var(--ink-soft); }
.download-text > :last-child { margin-bottom: 0; }
.download-status { display: inline-block; padding: 11px 20px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-faint); font-weight: 700; }

/* ---------- footer ---------- */

footer { border-top: 1px solid var(--line); padding: 22px 0; font-size: 13px; color: var(--ink-faint); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 6px 18px; }
footer a { color: var(--ink-faint); }

/* ---------- phones ---------- */

@media (max-width: 760px) {
  .topbar-inner, .topbar-sub-inner { max-width: none; width: auto; padding-inline: 24px; }
  .home {
    max-width: none;
    width: auto;
    margin: 20px 20px 36px;
    padding: 0 32px 32px;
  }
  .hero { padding-top: 28px; }
  .layout { display: block; padding: 0; }
  .path {
    position: static; max-height: none; overflow: visible;
    padding: 16px 20px 0;
  }
  .path-details {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); padding: 12px 14px 4px;
  }
  .path summary::after { content: attr(data-show); font-size: 12px; color: var(--accent); margin-left: 8px; }
  .path details[open] summary::after { content: attr(data-hide); }
  .path summary { padding-bottom: 8px; }
  .path-list { margin-bottom: 8px; }
  .chapter {
    margin: 20px 20px 36px;
    padding: 24px 32px 40px;
  }

  .system-parts { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .system.mini .system-parts { row-gap: 12px; }
  .intro { padding-left: 16px; font-size: 17px; }
  .cost { grid-template-columns: 1fr; }
  .cost > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .step { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 14px 16px; }
  .step:not(.folded) { padding: 16px 16px 18px; }
  .step-mark { width: 28px; height: 28px; font-size: 14px; }
  .step-title { font-size: 20px; }
  .chapter-nav { flex-direction: column-reverse; align-items: stretch; text-align: center; }
  .video-wrap figcaption { flex-direction: column; gap: 2px; }
  .steps-count { flex-wrap: wrap; }
}

@media (max-width: 600px) {
  .topbar-inner, .topbar-sub-inner { padding-inline: 16px; }
  .home { margin-inline: 12px; padding-inline: 18px; }
  .path { padding-inline: 12px; }
  .chapter { margin-inline: 12px; padding-inline: 18px; }
}

@media (max-width: 560px) {
  .topbar { top: -96px; }
  .topbar-inner { height: 96px; padding: 12px 16px; gap: 10px; }
  .brand { font-size: 18px; }
  .topbar-sub-inner { padding: 7px 16px; }
  .course-title { font-size: 12px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --blue: #8db8e8; --blue-deep: #b3d0f0; --orange: #b5d42a; --orange-text: #c2de4a;
    --bg: #0b1622; --surface: #12202f; --ink: #e6edf5; --ink-soft: #b0bfce; --ink-faint: #8a9bad;
    --line: #22344a;
    --accent: var(--blue); --accent-soft: #14273d; --accent-line: #2a4562;
    --done: var(--orange); --done-text: var(--orange-text); --done-soft: #1d2a12; --done-line: #3f5214;
    --warn-bg: #2b2418; --warn-line: #5a4a2c;
    --on-accent: #0b1622; --on-done: #0b1622;
    --bar-bg: #001e3d; --bar-ink: #ffffff; --bar-ink-soft: #b9c9dc; --bar-line: var(--orange);
    --bar-sub-end: #004775;
    --heading: #dbe8f7;
    --field-bg: #1d2932; --field-line: #3b4a57; --code-bg: #1d2932; --code-hl: #3a3320;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}