/* ============================================================================
   LINUX LAB — workbench shell + block pages + the three scene widgets
   ============================================================================

   Ported from the approved standalone demo (docs/linux-lab-demo.html).
   Everything is scoped under .llab so nothing leaks into site chrome.

   Tokens come from static/css/theme/tokens.css (body[data-theme="build"]):
   --c-paper/--c-cream/--c-ink/--c-muted, --c-indigo(-strong), --c-violet,
   --c-teal, --c-yellow, --c-red, the --c-ink-900..300 terminal scale, and the
   --font-display/--font-body/--font-mono stacks. Literal fallbacks mirror
   tokens.css values so the page also holds without a data-theme attribute.

   The site nav (.lw-nav) is sticky and 98px tall — the rail and sticky task
   card offset against that number (same convention as guides.css anchors).
   ========================================================================== */

.llab {
  /* local aliases so the rest of the file stays short */
  --ll-paper: var(--c-paper, #fffef7);
  --ll-cream: var(--c-cream, #faf8f5);
  --ll-ink: var(--c-ink, #1a1a2e);
  --ll-muted: var(--c-muted, #6b6b7b);
  --ll-indigo: var(--c-indigo, #6366f1);
  --ll-indigo-strong: var(--c-indigo-strong, #4f46e5);
  --ll-violet: var(--c-violet, #9b7cc4);
  --ll-teal: var(--c-teal, #4db8a8);
  --ll-yellow: var(--c-yellow, #f5d76e);
  --ll-red: var(--c-red, #ff6b6b);
  --t900: var(--c-ink-900, #0d1117);
  --t800: var(--c-ink-800, #161b22);
  --t700: var(--c-ink-700, #21262d);
  --t600: var(--c-ink-600, #30363d);
  --t400: var(--c-ink-400, #8b949e);
  --t300: var(--c-ink-300, #c9d1d9);
  --ll-line: rgba(26, 26, 46, .12);
  --ll-radius: 14px;
  --ll-radius-sm: 10px;
  --ll-shadow: 0 1px 2px rgba(26,26,46,.06), 0 8px 24px rgba(26,26,46,.08);
  --ll-shadow-sm: 0 1px 2px rgba(26,26,46,.06), 0 2px 8px rgba(26,26,46,.06);
  --ll-disp: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
  --ll-body: var(--font-body, 'Inter', system-ui, sans-serif);
  --ll-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  --ll-nav-h: 98px;

  display: flex;
  align-items: stretch;
  min-height: calc(100vh - var(--ll-nav-h));
  background: var(--ll-paper);
  color: var(--ll-ink);
  font-family: var(--ll-body);
  line-height: 1.65;

  /* Contained to the same width as the site nav (.lw-nav uses Tailwind
     max-w-7xl = 80rem) so the workbench lines up with the header. */
  max-width: 80rem;
  margin: 0 auto;
}
/* The rail's cream needs a visible left edge once the shell is contained. */
.llab .ll-rail { border-left: 1px solid var(--ll-line); }
@media (max-width: 900px) { .llab .ll-rail { border-left: 0; } }

.llab ::selection { background: rgba(99, 102, 241, .22); }

.llab button { font-family: inherit; cursor: pointer; }
.llab button:focus-visible,
.llab input:focus-visible,
.llab a:focus-visible {
  outline: 2px solid var(--ll-indigo);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Themed scrollbars ──
   Light surfaces: indigo pill on cream. Dark scene surfaces: ink scale. */
.llab * { scrollbar-width: thin; scrollbar-color: rgba(99,102,241,.45) rgba(26,26,46,.06); }
.llab ::-webkit-scrollbar { width: 10px; height: 10px; }
.llab ::-webkit-scrollbar-track { background: transparent; }
.llab ::-webkit-scrollbar-thumb {
  background: rgba(99,102,241,.35);
  border-radius: 999px;
  border: 2px solid var(--ll-paper);
}
.llab ::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,.6); }
.llab .ll-rail::-webkit-scrollbar-thumb { border-color: var(--ll-cream); }

.llab .term-body, .llab .proc-body, .llab .proc-log ul,
.llab .perm-lsline, .llab .p-run {
  scrollbar-color: var(--t600) var(--t800);
}
.llab .term-body::-webkit-scrollbar, .llab .proc-body::-webkit-scrollbar,
.llab .proc-log ul::-webkit-scrollbar, .llab .perm-lsline::-webkit-scrollbar,
.llab .p-run::-webkit-scrollbar { width: 8px; height: 8px; }
.llab .term-body::-webkit-scrollbar-thumb, .llab .proc-body::-webkit-scrollbar-thumb,
.llab .proc-log ul::-webkit-scrollbar-thumb, .llab .perm-lsline::-webkit-scrollbar-thumb,
.llab .p-run::-webkit-scrollbar-thumb {
  background: var(--t600);
  border-radius: 999px;
  border: 2px solid var(--t900);
}
.llab .term-body::-webkit-scrollbar-thumb:hover, .llab .proc-body::-webkit-scrollbar-thumb:hover,
.llab .proc-log ul::-webkit-scrollbar-thumb:hover, .llab .perm-lsline::-webkit-scrollbar-thumb:hover,
.llab .p-run::-webkit-scrollbar-thumb:hover { background: var(--t400); }

/* ══════════ Left rail ══════════ */
.ll-rail {
  width: 276px; flex: none;
  background: var(--ll-cream);
  border-right: 1px solid var(--ll-line);
  position: sticky; top: var(--ll-nav-h);
  height: calc(100vh - var(--ll-nav-h));
  /* The rail never scrolls as a whole: only .ll-rail-scroll does, which keeps
     the book CTA pinned to the bottom instead of hiding it below the fold
     (Hasan, CP2 2026-08-19). */
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: 24px 16px 18px;
}
/* The only scrolling region in the rail: the block list. */
.ll-rail-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Keep the scrollbar off the block titles. */
  padding-right: 5px; margin-right: -5px;
  border-bottom: 1px solid var(--ll-line);
}
.ll-brand { padding: 0 10px 18px; }
.ll-brand-name {
  font-family: var(--ll-disp); font-weight: 700; font-size: 1.5rem;
  letter-spacing: -.02em; line-height: 1.1;
  color: var(--ll-ink); text-decoration: none;
  display: inline-block;
}
.ll-brand-name span { color: var(--ll-indigo); }
.ll-brand-sub { font-size: .78rem; color: var(--ll-muted); margin-top: 4px; }

.ll-nav-label {
  font-family: var(--ll-mono); font-size: .64rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ll-muted);
  padding: 12px 10px 8px;
}
.ll-nav { display: flex; flex-direction: column; gap: 3px; }
.ll-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 8px 10px;
  border: 1px solid transparent; border-radius: var(--ll-radius-sm);
  background: transparent;
  font-family: var(--ll-disp); font-weight: 500; font-size: .87rem;
  color: var(--ll-ink);
  text-decoration: none;
}
.ll-item:hover:not(.ghost) { background: #fff; border-color: var(--ll-line); color: var(--ll-ink); }
.ll-item.active { background: #fff; border-color: var(--ll-indigo); box-shadow: var(--ll-shadow-sm); font-weight: 600; }
.ll-item .nn {
  flex: none;
  font-family: var(--ll-mono); font-size: .64rem; font-weight: 600;
  color: var(--ll-indigo); background: rgba(99,102,241,.1);
  border-radius: 6px; padding: 2px 7px;
  min-width: 26px; text-align: center;
}
.ll-item .nt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ll-item .np {
  flex: none;
  font-family: var(--ll-mono); font-size: .64rem; font-weight: 600;
  color: var(--ll-muted);
  font-variant-numeric: tabular-nums;
}
.ll-item.done .nn { background: var(--ll-teal); color: #fff; }
.ll-item.done .np { color: var(--ll-teal); }
.ll-item.ghost { color: var(--ll-muted); cursor: default; opacity: .7; font-weight: 400; }
.ll-item.ghost .nn { color: var(--ll-muted); background: rgba(26,26,46,.06); }
.ll-item.ghost .np { font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; }

.ll-book {
  flex: none;
  margin-top: 14px;
  background: var(--t900);
  border-radius: 12px;
  padding: 14px 15px;
  color: var(--t300);
}
.ll-book .bk-eyebrow {
  font-family: var(--ll-mono); font-size: .6rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ll-indigo);
  margin-bottom: 6px;
}
.ll-book .bk-title {
  font-family: var(--ll-disp); font-weight: 600; font-size: .88rem;
  color: #fff; line-height: 1.3; margin-bottom: 6px;
}
.ll-book p { font-size: .74rem; line-height: 1.5; color: var(--t400); margin-bottom: 10px; }
.ll-book .bk-btn {
  display: block; text-align: center;
  font-family: var(--ll-disp); font-weight: 600; font-size: .78rem;
  color: #fff; background: var(--ll-indigo);
  border: 0; border-radius: 8px; padding: 8px 10px;
  text-decoration: none;
}
.ll-book .bk-btn:hover { background: var(--ll-indigo-strong); color: #fff; }

/* ══════════ Stage ══════════ */
.ll-stage { flex: 1; min-width: 0; }
.ll-stage-inner { max-width: 960px; margin: 0 auto; padding: 26px 36px 90px; }

/* ══════════ Mobile: rail becomes a chip row ══════════ */
@media (max-width: 900px) {
  .llab { flex-direction: column; }
  .ll-rail {
    width: 100%; height: auto; position: static;
    flex-direction: row; align-items: center; gap: 8px;
    overflow-x: auto; overflow-y: hidden;
    padding: 10px 14px;
    border-right: 0; border-bottom: 1px solid var(--ll-line);
  }
  .ll-brand { padding: 0 8px 0 0; flex: none; }
  .ll-brand-sub { display: none; }
  .ll-brand-name { font-size: 1rem; white-space: nowrap; }
  .ll-nav-label, .ll-book { display: none; }
  /* The chip row has no pinned card, so the scroll wrapper dissolves and its
     navs become direct children of the row again. */
  .ll-rail-scroll {
    display: contents;
    border-bottom: 0;
  }
  .ll-nav { flex-direction: row; gap: 6px; }
  .ll-item { white-space: nowrap; padding: 6px 10px; }
  .ll-item .nt { overflow: visible; }
  .ll-stage-inner { padding: 26px 20px 70px; }
}

/* ══════════ Overview ══════════ */
.ll-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ll-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ll-indigo);
  background: rgba(99,102,241,.08);
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 999px; padding: 6px 14px;
  margin-bottom: 22px;
}
.ll-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ll-teal); flex: none; }
.ll-eyebrow.dark { background: rgba(99,102,241,.16); border-color: rgba(99,102,241,.45); }

.ll-home h1 {
  font-family: var(--ll-disp);
  font-size: clamp(2.6rem, 6vw, 3.9rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.02;
  text-wrap: balance;
  margin-bottom: 10px;
  color: var(--ll-ink);
}
.ll-home .tag {
  font-family: var(--ll-disp);
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  font-weight: 500; color: var(--ll-indigo-strong);
  margin-bottom: 20px;
}
.ll-home p.lede { max-width: 58ch; font-size: 1.04rem; margin-bottom: 8px; color: var(--ll-ink); }
.ll-home p.lede + p.lede { color: var(--ll-muted); }

/* The evidence claim: the one line that separates this hub from every other
   Linux tutorial, so it reads as a claim rather than as another lede. */
.ll-proof {
  max-width: 58ch; margin: 26px 0 4px;
  background: rgba(77,184,168,.1);
  border: 1px solid rgba(77,184,168,.45);
  border-left: 4px solid var(--ll-teal);
  border-radius: var(--ll-radius-sm);
  padding: 14px 18px;
  font-size: 1rem; line-height: 1.55; color: var(--ll-ink);
}
.ll-proof strong { font-weight: 700; color: #1d6d61; }

.ll-start-row { display: flex; align-items: center; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.ll-btn-primary {
  display: inline-block;
  font-family: var(--ll-disp); font-weight: 600; font-size: .95rem;
  color: #fff; background: var(--ll-indigo);
  border: 0; border-radius: 12px;
  padding: 13px 26px;
  text-decoration: none;
  transition: background .15s, transform .15s;
}
.ll-btn-primary:hover { background: var(--ll-indigo-strong); color: #fff; transform: translateY(-1px); }
.ll-start-note { font-family: var(--ll-mono); font-size: .7rem; color: var(--ll-muted); }

.ll-wrap { margin-top: 70px; }
.ll-cta-card {
  background: var(--t900);
  border-radius: 20px;
  padding: clamp(28px, 5vw, 52px);
  color: var(--t300);
  box-shadow: var(--ll-shadow);
}
.ll-cta-card h2 {
  font-family: var(--ll-disp); font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  letter-spacing: -.02em; line-height: 1.15; color: #fff;
  text-wrap: balance;
  max-width: 24ch;
  margin-bottom: 14px;
}
.ll-cta-card p { max-width: 56ch; font-size: .97rem; margin-bottom: 8px; }
.ll-cta-card p strong { color: #fff; }
.ll-cta-card p.dim { color: var(--t400); font-size: .88rem; }
.ll-cta-actions { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; align-items: center; }
/* Book cover beside the copy: the offer is a book, so show the book. */
.ll-cta-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 172px;
  gap: clamp(20px, 4vw, 44px); align-items: center;
}
.ll-cta-book { display: block; line-height: 0; }
.ll-cta-book img {
  width: 100%; height: auto; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  transform: rotate(2deg);
  transition: transform .2s;
}
.ll-cta-book:hover img { transform: rotate(0deg) translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .ll-cta-book img, .ll-cta-book:hover img { transition: none; transform: none; }
}
/* Below the two-column breakpoint the cover would eat the fold: drop it and
   let the copy run full width, same as the rail card does on phones. */
@media (max-width: 720px) {
  .ll-cta-grid { grid-template-columns: 1fr; }
  .ll-cta-book { display: none; }
}

/* ══════════ Block pages ══════════
   Compact header: the lab must sit above the fold. Eyebrow on its own line;
   number and title share one baseline. */
.ll-lecture .lec-eyebrow {
  font-family: var(--ll-mono); font-size: .64rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ll-indigo);
  margin-bottom: 8px;
}
.ll-lecture .lec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.ll-lecture .lec-num {
  font-family: var(--ll-disp); font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.1rem); line-height: 1;
  color: rgba(99,102,241,.28);
  letter-spacing: -.03em;
  flex: none;
}
.ll-lecture h1 {
  font-family: var(--ll-disp);
  font-size: clamp(1.35rem, 2.8vw, 1.7rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.12;
  text-wrap: balance;
  color: var(--ll-ink);
}
/* One-sentence definition under the H1: the liftable answer-engine unit and the
   sentence the meta description is built from. One line at 1440, ink not muted. */
.ll-lecture .lec-def {
  max-width: 74ch; color: var(--ll-ink); font-size: .93rem; line-height: 1.5;
  margin: 10px 0 0; font-weight: 500;
}
.ll-lecture .lec-hook {
  max-width: 74ch; color: var(--ll-muted); font-size: .93rem; line-height: 1.55;
  margin: 8px 0 16px;
}
.ll-lecture .lec-hook strong { color: var(--ll-ink); font-weight: 600; }
.ll-lecture .lec-hook code { font-family: var(--ll-mono); font-size: .88em; }

.ll-lecture .scene-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 252px;
  gap: 18px; align-items: start;
}
.ll-lecture .scene-main { min-width: 0; }

/* Task rail */
.ll-tasks {
  background: var(--ll-cream);
  border: 1px solid var(--ll-line);
  border-radius: var(--ll-radius);
  padding: 16px;
  position: sticky; top: calc(var(--ll-nav-h) + 18px);
}
.ll-tasks h2 {
  font-family: var(--ll-mono); font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ll-muted);
  margin-bottom: 12px;
  display: flex; justify-content: space-between; align-items: center;
}
.ll-tasks .count { color: var(--ll-indigo); }
.ll-tasks ol { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; }
.ll-tasks .task {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .85rem; line-height: 1.45; color: var(--ll-ink);
}
.ll-tasks .task .tick {
  flex: none; width: 19px; height: 19px; margin-top: 1px;
  border: 1.5px solid rgba(26,26,46,.3); border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; color: transparent;
  background: #fff;
  transition: background .2s, border-color .2s;
}
.ll-tasks .task.done .tick { background: var(--ll-teal); border-color: var(--ll-teal); color: #fff; }
.ll-tasks .task.done { color: var(--ll-muted); }
.ll-tasks .task code {
  font-family: var(--ll-mono); font-size: .78em;
  background: rgba(26,26,46,.06); border-radius: 5px; padding: 1px 5px;
  white-space: nowrap;
}
.ll-tasks .task.opt .tick { border-style: dashed; }
.ll-tasks .task .opt-tag {
  font-family: var(--ll-mono); font-size: .6rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ll-violet); display: block;
}
.ll-tasks .block-banner {
  display: none;
  margin-top: 14px; padding: 12px 14px;
  background: rgba(77,184,168,.12);
  border: 1px solid rgba(77,184,168,.5);
  border-radius: var(--ll-radius-sm);
  font-size: .84rem; line-height: 1.5;
}
.ll-tasks .block-banner.show { display: block; }
.ll-tasks .block-banner strong { color: #22766a; }

/* Phones: the task rail used to sit 800-1300px below the scene, so the reader
   met the lab with no stated goal. Under the rail breakpoint the grid is one
   column and the task card moves ABOVE the scene as a compact strip (same
   markup, same ticks and banner). Desktop is untouched. */
@media (max-width: 900px) {
  .ll-lecture .scene-grid { grid-template-columns: 1fr; gap: 12px; }
  .ll-tasks { order: -1; position: static; padding: 10px 14px 12px; }
  .ll-tasks h2 { margin-bottom: 6px; }
  .ll-tasks ol { gap: 4px; }
  .ll-tasks .task { font-size: .8rem; line-height: 1.4; }
  .ll-tasks .task .tick { width: 16px; height: 16px; font-size: .6rem; margin-top: 2px; }
  .ll-tasks .block-banner { margin-top: 10px; }
}

/* ── Terminal scene ── */
.llab .term-card {
  background: var(--t900);
  border-radius: var(--ll-radius);
  box-shadow: var(--ll-shadow);
  overflow: hidden;
  border: 1px solid var(--t700);
}
.llab .term-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--t800);
  border-bottom: 1px solid var(--t700);
  padding: 10px 14px;
}
.llab .term-bar .b { width: 11px; height: 11px; border-radius: 50%; }
.llab .term-bar .b1 { background: var(--ll-red); }
.llab .term-bar .b2 { background: var(--ll-yellow); }
.llab .term-bar .b3 { background: var(--ll-teal); }
.llab .term-bar .title { margin-left: 8px; font-family: var(--ll-mono); font-size: .72rem; color: var(--t400); }
.llab .term-body {
  padding: 14px 16px 16px;
  font-family: var(--ll-mono); font-size: .82rem; line-height: 1.6;
  color: var(--t300);
  height: 330px; overflow-y: auto; overflow-x: auto;
  cursor: text;
}
.llab .term-body .out { white-space: pre-wrap; word-break: break-word; }
.llab .term-body .prompt-user { color: var(--ll-teal); }
.llab .term-body .prompt-path { color: #7aa2f7; }
.llab .term-body .dir { color: #7aa2f7; font-weight: 600; }
.llab .term-body .err { color: var(--ll-red); }
.llab .term-body .cmt { color: var(--t400); }
.llab .term-body .hl { color: var(--ll-yellow); }
.llab .term-line { display: flex; flex-wrap: wrap; align-items: baseline; }
.llab .term-input {
  flex: 1; min-width: 120px;
  background: transparent; border: 0; color: var(--t300);
  font: inherit; caret-color: var(--ll-teal);
}
.llab .term-input:focus { outline: none; }
.llab .term-hint {
  background: var(--t800); border-top: 1px solid var(--t700);
  padding: 8px 16px;
  font-family: var(--ll-mono); font-size: .7rem; color: var(--t400);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.llab .term-hint b { color: var(--t300); font-weight: 600; }
/* The hint row is a set of one-click commands (the first interaction in the
   whole hub): pill buttons, the label dimmer than the chips, wrapping on
   phones. Locked by test_terminal_hint_chips_are_styled. */
.llab .th-label { color: var(--t400); margin-right: 2px; }
.llab .th-chip {
  font: inherit; line-height: 1.5; color: var(--t300);
  background: var(--t700); border: 1px solid var(--t600); border-radius: 6px;
  padding: 2px 8px; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.llab .th-chip:hover { border-color: var(--ll-indigo); color: #fff; }

/* ── Process tree scene ── */
.llab .proc-card {
  background: var(--t900);
  border: 1px solid var(--t700);
  border-radius: var(--ll-radius);
  box-shadow: var(--ll-shadow);
  overflow: hidden;
  position: relative;
}
.llab .proc-head {
  display: flex; align-items: center; gap: 10px;
  background: var(--t800); border-bottom: 1px solid var(--t700);
  padding: 10px 14px;
  font-family: var(--ll-mono); font-size: .72rem; color: var(--t400);
}
.llab .proc-head .reset {
  margin-left: auto;
  font-family: var(--ll-mono); font-size: .68rem; font-weight: 600;
  color: var(--t300); background: var(--t700);
  border: 1px solid var(--t600); border-radius: 7px;
  padding: 4px 10px;
}
.llab .proc-head .reset:hover { background: var(--t600); }
.llab .proc-body { padding: 16px; overflow-x: auto; }
.llab .ptree, .llab .ptree ul { list-style: none; margin: 0; }
.llab .ptree { padding: 0; }
.llab .ptree ul { padding-left: 26px; position: relative; }
.llab .ptree ul::before {
  content: ''; position: absolute; left: 11px; top: 0; bottom: 12px;
  border-left: 1px solid var(--t600);
}
.llab .ptree li { position: relative; padding: 3px 0; }
.llab .ptree ul li::before {
  content: ''; position: absolute; left: -15px; top: 16px; width: 12px;
  border-top: 1px solid var(--t600);
}
.llab .pnode {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ll-mono); font-size: .78rem;
  color: var(--t300);
  background: transparent;
  border: 1px solid transparent; border-radius: 8px;
  padding: 4px 10px;
  text-align: left;
}
.llab .pnode:hover { border-color: var(--t600); background: var(--t800); }
.llab .pnode.sel { border-color: var(--ll-indigo); background: rgba(99,102,241,.14); }
.llab .pnode .pid { color: var(--t400); }
.llab .pnode .uchip { font-size: .62rem; font-weight: 600; border-radius: 5px; padding: 1px 6px; }
.llab .uchip.root { background: rgba(255,107,107,.18); color: var(--ll-red); }
.llab .uchip.you { background: rgba(77,184,168,.18); color: var(--ll-teal); }
.llab .uchip.www { background: rgba(155,124,196,.22); color: #c4a7ea; }
.llab .pnode .portchip {
  font-size: .62rem; font-weight: 600;
  background: rgba(245,215,110,.15); color: var(--ll-yellow);
  border-radius: 5px; padding: 1px 6px;
}
.llab .pnode.born { animation: ll-born .6s; }
@keyframes ll-born {
  0% { background: rgba(77,184,168,.35); }
  100% { background: transparent; }
}
.llab .proc-lower {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--t700);
}
@media (max-width: 700px) { .llab .proc-lower { grid-template-columns: 1fr; } }
.llab .proc-inspect {
  padding: 14px 16px;
  border-right: 1px solid var(--t700);
  min-height: 150px;
}
@media (max-width: 700px) { .llab .proc-inspect { border-right: 0; border-bottom: 1px solid var(--t700); } }
.llab .proc-inspect .ph, .llab .proc-log .ph {
  font-family: var(--ll-mono); font-size: .66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--t400);
  margin-bottom: 10px;
}
.llab .proc-inspect .empty { font-size: .8rem; color: var(--t400); font-family: var(--ll-mono); }
.llab .ins-name { font-family: var(--ll-mono); font-size: .9rem; font-weight: 600; color: #fff; margin-bottom: 8px; }
.llab .ins-rows { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.llab .ins-row { display: flex; gap: 10px; font-family: var(--ll-mono); font-size: .74rem; }
.llab .ins-row .k { color: var(--t400); width: 64px; flex: none; }
.llab .ins-row .v { color: var(--t300); }
.llab .ins-desc { font-size: .8rem; color: var(--t300); line-height: 1.55; margin-bottom: 12px; }
.llab .kill-btn {
  font-family: var(--ll-mono); font-size: .74rem; font-weight: 600;
  color: #fff; background: rgba(255,107,107,.16);
  border: 1px solid var(--ll-red); border-radius: 8px;
  padding: 6px 14px;
}
.llab .kill-btn:hover { background: rgba(255,107,107,.3); }
.llab .proc-log { padding: 14px 16px; }
.llab .proc-log ul { list-style: none; display: flex; flex-direction: column; gap: 8px; max-height: 170px; overflow-y: auto; margin: 0; padding: 0; }
.llab .proc-log li {
  font-size: .78rem; line-height: 1.5; color: var(--t300);
  padding-left: 14px; position: relative;
}
.llab .proc-log li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--ll-indigo);
}
.llab .proc-log li.warn::before { background: var(--ll-yellow); }
.llab .proc-log li.dead::before { background: var(--ll-red); }
.llab .proc-log li.good::before { background: var(--ll-teal); }
.llab .ssh-overlay {
  position: absolute; inset: 0; z-index: 5;
  background: #05070a;
  display: none;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 30px;
}
.llab .ssh-overlay.show { display: flex; }
.llab .ssh-overlay .inner { font-family: var(--ll-mono); }
.llab .ssh-overlay .line1 { color: var(--t300); font-size: .85rem; margin-bottom: 6px; }
.llab .ssh-overlay .line2 { color: var(--t400); font-size: .75rem; margin-bottom: 22px; max-width: 44ch; line-height: 1.6; }
.llab .ssh-overlay button {
  font-family: var(--ll-mono); font-size: .75rem; font-weight: 600;
  color: var(--t900); background: var(--ll-teal);
  border: 0; border-radius: 8px; padding: 8px 18px;
}

/* ── Permission dial scene ── */
.llab .perm-card {
  background: #fff;
  border: 1px solid var(--ll-line);
  border-radius: var(--ll-radius);
  box-shadow: var(--ll-shadow);
  overflow: hidden;
}
.llab .perm-lsline {
  background: var(--t900);
  padding: 14px 18px;
  font-family: var(--ll-mono); font-size: .82rem;
  color: var(--t300);
  overflow-x: auto; white-space: nowrap;
}
.llab .perm-lsline .sym { color: var(--ll-yellow); font-weight: 600; letter-spacing: .06em; }
.llab .perm-lsline .own { color: var(--ll-teal); }
.llab .perm-lsline .grp { color: #7aa2f7; }
.llab .perm-lsline .oct { color: #fff; font-weight: 700; }
.llab .perm-lsline .cmt { color: var(--t400); }
/* Stacked layout: the dial row (switch grid + chmod controls) on top, the
   three persona cards as a responsive grid below. The old two-column
   dial|personas split overflowed the contained stage next to the task rail. */
.llab .perm-main { display: block; }
.llab .perm-dial {
  padding: 22px;
  display: flex; flex-wrap: wrap; gap: 22px 34px;
  align-items: flex-start;
}
.llab .perm-controls {
  display: flex; flex-direction: column; gap: 16px;
  flex: 1; min-width: 220px;
  padding-top: 26px; /* optically aligns with the dial's first switch row */
}
.llab .dial-grid {
  display: grid; grid-template-columns: auto repeat(3, 52px); gap: 8px;
  align-items: center;
}
.llab .dial-grid .ch {
  font-family: var(--ll-mono); font-size: .62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ll-muted);
  text-align: center;
}
.llab .dial-grid .rh {
  font-family: var(--ll-disp); font-weight: 600; font-size: .84rem;
  padding-right: 10px; white-space: nowrap;
  color: var(--ll-ink);
}
.llab .dial-grid .rh small { display: block; font-family: var(--ll-mono); font-weight: 400; font-size: .62rem; color: var(--ll-muted); }
.llab .bit {
  width: 52px; height: 42px;
  border: 1.5px solid var(--ll-line); border-radius: 9px;
  background: var(--ll-cream);
  font-family: var(--ll-mono); font-weight: 700; font-size: .9rem;
  color: rgba(26,26,46,.25);
  transition: background .15s, color .15s, border-color .15s;
}
.llab .bit[aria-pressed="true"] { background: var(--ll-indigo); border-color: var(--ll-indigo-strong); color: #fff; }
.llab .bit:hover { border-color: var(--ll-indigo); }
.llab .perm-chmod {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--ll-mono); font-size: .84rem;
}
.llab .perm-chmod .cm { color: var(--ll-muted); }
.llab .perm-chmod input {
  width: 68px;
  font-family: var(--ll-mono); font-size: .95rem; font-weight: 700;
  text-align: center; letter-spacing: .12em;
  color: var(--ll-ink);
  border: 1.5px solid var(--ll-line); border-radius: 8px;
  padding: 6px 4px; background: #fff;
  font-variant-numeric: tabular-nums;
}
.llab .perm-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.llab .preset {
  font-family: var(--ll-mono); font-size: .72rem; font-weight: 600;
  border: 1px solid var(--ll-line); border-radius: 999px;
  background: #fff; color: var(--ll-ink);
  padding: 5px 12px;
}
.llab .preset:hover { border-color: var(--ll-indigo); color: var(--ll-indigo); }
.llab .preset.danger { border-color: rgba(255,107,107,.5); color: var(--ll-red); }
.llab .perm-people {
  padding: 18px 22px 22px;
  border-top: 1px solid var(--ll-line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.llab .person { min-width: 0; }
.llab .person {
  border: 1px solid var(--ll-line); border-radius: var(--ll-radius-sm);
  background: var(--ll-cream);
  padding: 12px 14px;
}
.llab .person .p-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.llab .person .p-name { font-family: var(--ll-disp); font-weight: 600; font-size: .92rem; color: var(--ll-ink); }
.llab .person .p-why { font-family: var(--ll-mono); font-size: .66rem; color: var(--ll-muted); }
.llab .p-chips { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.llab .pchip { font-family: var(--ll-mono); font-size: .68rem; font-weight: 600; border-radius: 6px; padding: 2px 8px; }
.llab .pchip.on { background: rgba(77,184,168,.16); color: #22766a; }
.llab .pchip.off { background: rgba(26,26,46,.06); color: var(--ll-muted); text-decoration: line-through; }
.llab .p-run {
  font-family: var(--ll-mono); font-size: .74rem; line-height: 1.5;
  background: var(--t900); color: var(--t300);
  border-radius: 7px; padding: 6px 10px;
  /* wrap like a real terminal so the verdict is never clipped */
  white-space: normal; word-break: break-word;
}
.llab .p-run .ok { color: var(--ll-teal); }
.llab .p-run .no { color: var(--ll-red); }
.llab .perm-warning {
  display: none;
  margin: 0 22px 22px;
  padding: 12px 14px;
  border: 1px solid rgba(255,107,107,.5);
  background: rgba(255,107,107,.07);
  border-radius: var(--ll-radius-sm);
  font-size: .85rem; line-height: 1.55;
}
.llab .perm-warning.show { display: block; }
.llab .perm-warning strong { color: #c73e3e; }

/* ── Recap, tell-the-AI, bridge, pager ── */
.ll-recap { max-width: 62ch; margin-top: 36px; }
.ll-recap h2 { font-family: var(--ll-disp); font-weight: 600; font-size: 1.12rem; margin-bottom: 12px; color: var(--ll-ink); }
.ll-recap p { margin-bottom: 12px; font-size: .97rem; color: var(--ll-ink); }
.ll-recap code { font-family: var(--ll-mono); font-size: .85em; }
.ll-recap .analogy {
  border-left: 3px solid var(--ll-violet);
  background: var(--ll-cream);
  border-radius: 0 var(--ll-radius-sm) var(--ll-radius-sm) 0;
  padding: 12px 16px;
  font-size: .94rem;
  margin: 16px 0;
  color: var(--ll-ink);
}
.ll-recap .analogy code { font-size: .88em; }

.ll-tellai {
  margin: 26px 0 34px;
  border: 1px solid rgba(99,102,241,.35);
  background: rgba(99,102,241,.05);
  border-radius: var(--ll-radius);
  padding: 16px 18px;
  max-width: 680px;
}
.ll-tellai .t-label {
  font-family: var(--ll-mono); font-size: .66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ll-indigo);
  margin-bottom: 8px;
}
.ll-tellai .t-row { display: flex; gap: 12px; align-items: flex-start; }
.ll-tellai .t-text { font-family: var(--ll-mono); font-size: .83rem; line-height: 1.55; flex: 1; color: var(--ll-ink); }
.ll-tellai .copy {
  flex: none;
  font-family: var(--ll-mono); font-size: .7rem; font-weight: 600;
  color: var(--ll-indigo); background: #fff;
  border: 1px solid rgba(99,102,241,.4); border-radius: 8px;
  padding: 6px 12px;
}
.ll-tellai .copy:hover { background: rgba(99,102,241,.08); }
.ll-tellai .t-note { font-size: .77rem; color: var(--ll-muted); margin-top: 10px; }

/* "Seen on a real server": the captured strings as visible text. Dim monospace
   terms, plain-words notes; a reference box, not a lesson block. */
.ll-strings { max-width: 62ch; margin-top: 28px; }
.ll-strings h2 {
  font-family: var(--ll-mono); font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ll-muted);
  margin-bottom: 10px;
}
.ll-strings dl {
  margin: 0; border: 1px solid var(--ll-line); border-radius: var(--ll-radius-sm);
  background: var(--ll-cream); padding: 4px 14px;
}
.ll-strings dt { padding-top: 10px; }
.ll-strings dt code {
  font-family: var(--ll-mono); font-size: .78rem; color: var(--ll-ink);
  background: var(--t900); color: var(--t300); border-radius: 6px; padding: 3px 8px;
  display: inline-block; max-width: 100%; overflow-wrap: anywhere; white-space: pre-wrap;
}
.ll-strings dd {
  margin: 6px 0 10px; font-size: .86rem; line-height: 1.5; color: var(--ll-muted);
  border-bottom: 1px solid var(--ll-line); padding-bottom: 10px;
}
.ll-strings dd:last-child { border-bottom: 0; }

.ll-bridge {
  max-width: 62ch;
  font-size: .93rem; color: var(--ll-muted);
  font-style: italic;
  margin-bottom: 20px;
}
.ll-bridge b { color: var(--ll-indigo-strong); font-style: normal; }

.ll-pager {
  display: flex; justify-content: space-between; align-items: stretch; gap: 12px;
  border-top: 1px solid var(--ll-line);
  padding-top: 22px; margin-top: 10px;
}
.ll-pager .pbtn {
  display: flex; flex-direction: column; gap: 2px;
  border-radius: 12px; padding: 12px 18px;
  text-align: left; max-width: 46%;
  text-decoration: none;
}
.ll-pager .pbtn small {
  font-family: var(--ll-mono); font-size: .62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
}
.ll-pager .pbtn .pt { font-family: var(--ll-disp); font-weight: 600; font-size: .92rem; line-height: 1.3; }
.ll-pager .pbtn.prev { background: #fff; border: 1px solid var(--ll-line); color: var(--ll-ink); }
.ll-pager .pbtn.prev small { color: var(--ll-muted); }
.ll-pager .pbtn.prev:hover { border-color: var(--ll-indigo); color: var(--ll-ink); }
.ll-pager .pbtn.next { background: var(--ll-indigo); border: 0; color: #fff; margin-left: auto; text-align: right; align-items: flex-end; }
.ll-pager .pbtn.next small { color: rgba(255,255,255,.75); }
.ll-pager .pbtn.next:hover { background: var(--ll-indigo-strong); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .llab *, .llab *::before, .llab *::after { animation: none !important; transition: none !important; }
}

/* ══════════ Scene: Pipe Playground (block 04) ══════════
   Dark surfaces for anything that represents real command output; cream
   controls for the things the reader clicks. Every count shown in .pstage is
   computed by pipeline.js, never authored. */
.llab .pipe-card { display: flex; flex-direction: column; gap: 12px; }

.llab .pipe-src {
  background: var(--t900); border-radius: var(--ll-radius); overflow: hidden;
}
.llab .psrc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; background: var(--t800);
  font-family: var(--ll-mono); font-size: .7rem;
}
.llab .psrc-name { color: var(--t300); }
.llab .psrc-n { color: var(--ll-indigo); font-weight: 600; }
.llab .psrc-body { padding: 10px 14px 12px; }

.llab .pline {
  font-family: var(--ll-mono); font-size: .72rem; line-height: 1.7;
  color: var(--t300); white-space: pre; overflow-x: auto;
}
.llab .pline.more, .llab .pline.empty { color: var(--t400); font-style: italic; }

.llab .pipe-cmd {
  font-family: var(--ll-mono); font-size: .78rem; line-height: 1.9;
  background: var(--t800); color: var(--t300);
  border-radius: var(--ll-radius-sm); padding: 10px 14px;
  overflow-x: auto; white-space: nowrap;
}
.llab .pipe-cmd .pc { color: var(--ll-teal); }
.llab .pipe-cmd .ppipe { color: var(--ll-yellow); font-weight: 700; }
.llab .pipe-cmd .pcmd { color: #fff; font-weight: 600; }
.llab .pipe-cmd .parg { color: var(--ll-indigo); }

/* The flow: one chip per stage, line counts shrinking left to right. */
.llab .pipe-flow {
  display: flex; align-items: stretch; gap: 6px;
  overflow-x: auto; padding-bottom: 4px;
}
.llab .pflow-arrow { align-self: center; color: var(--ll-muted); font-size: .8rem; flex: none; }
.llab .pstage {
  flex: none; display: flex; flex-direction: column; gap: 2px;
  background: #fff; border: 1px solid var(--ll-line);
  border-radius: var(--ll-radius-sm); padding: 8px 12px;
  text-align: left; min-width: 96px;
}
.llab .pstage.on { border-color: var(--ll-indigo); box-shadow: var(--ll-shadow-sm); }
.llab .pstage .ps-cmd {
  font-family: var(--ll-mono); font-size: .66rem; color: var(--ll-muted);
  white-space: nowrap;
}
.llab .pstage .ps-n {
  font-family: var(--ll-disp); font-weight: 700; font-size: 1.05rem;
  color: var(--ll-ink); line-height: 1.1;
}
.llab .pstage .ps-n small { font-size: .6rem; font-weight: 500; color: var(--ll-muted); }
.llab .pstage .ps-drop {
  font-family: var(--ll-mono); font-size: .58rem; color: var(--ll-red);
}

.llab .pipe-out-wrap {
  background: var(--t900); border-radius: var(--ll-radius); overflow: hidden;
}
.llab .pout-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; background: var(--t800);
  font-family: var(--ll-mono); font-size: .68rem; color: var(--t400);
  text-transform: uppercase; letter-spacing: .06em;
}
.llab .pout-note { text-transform: none; letter-spacing: 0; color: var(--ll-indigo); }
.llab .pipe-out { padding: 10px 14px 14px; min-height: 92px; }

.llab .pipe-controls {
  background: var(--ll-cream); border: 1px solid var(--ll-line);
  border-radius: var(--ll-radius); padding: 12px 14px;
}
.llab .pctl-label {
  font-family: var(--ll-mono); font-size: .62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ll-muted);
  margin-bottom: 8px;
}
.llab .pctl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.llab .pchip-btn {
  display: flex; flex-direction: column; gap: 1px; text-align: left;
  background: #fff; border: 1px solid var(--ll-line);
  border-radius: var(--ll-radius-sm); padding: 7px 11px;
}
.llab .pchip-btn:hover { border-color: var(--ll-indigo); box-shadow: var(--ll-shadow-sm); }
.llab .pchip-btn .pb-cmd {
  font-family: var(--ll-mono); font-size: .74rem; font-weight: 600; color: var(--ll-ink);
  white-space: nowrap;
}
.llab .pchip-btn .pb-why { font-size: .65rem; color: var(--ll-muted); }
.llab .pctl-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.llab .pbtn-sm {
  font-family: var(--ll-disp); font-size: .72rem; font-weight: 600;
  background: transparent; border: 1px solid var(--ll-line);
  border-radius: 999px; padding: 5px 12px; color: var(--ll-muted);
}
.llab .pbtn-sm:hover { border-color: var(--ll-indigo); color: var(--ll-ink); }
.llab .pbtn-sm.recipe { border-style: dashed; color: var(--ll-indigo-strong); }

/* ══════════ Scene: Users & root (block 05) ══════════ */
.llab .who-card { display: flex; flex-direction: column; gap: 12px; }

.llab .who-top { display: grid; grid-template-columns: 1fr 260px; gap: 12px; }
@media (max-width: 720px) { .llab .who-top { grid-template-columns: 1fr; } }

.llab .who-pickers, .llab .who-idcard {
  background: var(--ll-cream); border: 1px solid var(--ll-line);
  border-radius: var(--ll-radius); padding: 12px 14px;
}
.llab .wp-label, .llab .wa-label {
  font-family: var(--ll-mono); font-size: .62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ll-muted);
  margin-bottom: 8px;
}
.llab .wp-row { display: flex; flex-wrap: wrap; gap: 6px; }
.llab .wp-btn {
  display: flex; flex-direction: column; gap: 1px; text-align: left;
  background: #fff; border: 1px solid var(--ll-line);
  border-radius: var(--ll-radius-sm); padding: 8px 12px; flex: 1 1 90px;
}
.llab .wp-btn:hover { border-color: var(--ll-indigo); }
.llab .wp-btn.on { border-color: var(--ll-indigo); box-shadow: var(--ll-shadow-sm); }
.llab .wp-btn .wp-name {
  font-family: var(--ll-mono); font-size: .82rem; font-weight: 600; color: var(--ll-ink);
}
.llab .wp-btn.on .wp-name { color: var(--ll-indigo-strong); }
.llab .wp-btn .wp-why { font-size: .65rem; color: var(--ll-muted); }

.llab .wi-head {
  font-family: var(--ll-mono); font-size: .7rem; color: var(--ll-muted); margin-bottom: 5px;
}
.llab .wi-out {
  font-family: var(--ll-mono); font-size: .68rem; line-height: 1.5;
  color: var(--ll-ink); overflow-wrap: anywhere; margin-bottom: 8px;
}
.llab .who-badge {
  display: inline-block; font-family: var(--ll-mono); font-size: .6rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  border-radius: 999px; padding: 3px 9px; margin-bottom: 9px;
}
.llab .who-badge.root { background: rgba(255,107,107,.14); color: #c2410c; }
.llab .who-badge.sudo { background: rgba(77,184,168,.16); color: #22766a; }
.llab .who-badge.plain { background: rgba(26,26,46,.07); color: var(--ll-muted); }
.llab .wi-promote {
  display: block; width: 100%;
  font-family: var(--ll-mono); font-size: .68rem; font-weight: 600;
  background: var(--ll-indigo); color: #fff; border: 0;
  border-radius: var(--ll-radius-sm); padding: 8px 10px;
}
.llab .wi-promote { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.llab .wi-promote .wi-why { font-family: var(--ll-body); font-size: .62rem; font-weight: 400; opacity: .85; }
.llab .wi-promote:hover:not(:disabled) { background: var(--ll-indigo-strong); }
.llab .wi-promote:disabled { background: rgba(26,26,46,.07); color: var(--ll-muted); cursor: default; }

.llab .who-term {
  background: var(--t900); border-radius: var(--ll-radius);
  padding: 12px 14px; min-height: 150px; max-height: 260px; overflow-y: auto;
  font-family: var(--ll-mono); font-size: .74rem; line-height: 1.7;
}
.llab .who-term .wline { color: var(--t300); }
.llab .who-term .wprompt { color: var(--ll-teal); }
.llab .who-term .wout { white-space: pre-wrap; margin-bottom: 8px; }
.llab .who-term .wout.ok { color: var(--t300); }
.llab .who-term .wout.err { color: var(--ll-red); }
.llab .who-term .wout.dim { color: var(--t400); font-style: italic; }
.llab .who-term .wout.ghost { color: var(--t400); opacity: .7; font-style: italic; }

.llab .who-actions {
  background: var(--ll-cream); border: 1px solid var(--ll-line);
  border-radius: var(--ll-radius); padding: 12px 14px;
}
.llab .wa-row { display: flex; flex-wrap: wrap; gap: 6px; }
.llab .wa-btn {
  display: flex; flex-direction: column; gap: 1px; text-align: left;
  background: #fff; border: 1px solid var(--ll-line);
  border-radius: var(--ll-radius-sm); padding: 7px 11px;
}
.llab .wa-btn:hover { border-color: var(--ll-indigo); box-shadow: var(--ll-shadow-sm); }
.llab .wa-btn.sudo { border-style: dashed; }
.llab .wa-btn .wa-cmd {
  font-family: var(--ll-mono); font-size: .74rem; font-weight: 600; color: var(--ll-ink);
  white-space: nowrap;
}
.llab .wa-btn .wa-why { font-size: .65rem; color: var(--ll-muted); }

.llab .who-authtoggle {
  font-family: var(--ll-disp); font-size: .72rem; font-weight: 600;
  background: transparent; border: 1px dashed var(--ll-line);
  border-radius: 999px; padding: 5px 12px; color: var(--ll-indigo-strong);
}
.llab .who-authtoggle:hover { border-color: var(--ll-indigo); }
.llab .who-auth, .llab .who-authnote { display: none; }
.llab .who-card.auth-open .who-auth {
  display: block; margin-top: 10px;
  background: var(--t900); border-radius: var(--ll-radius); padding: 12px 14px;
  max-height: 190px; overflow-y: auto;
}
.llab .who-card.auth-open .who-authnote {
  display: block; margin-top: 8px; font-size: .8rem; color: var(--ll-muted); max-width: 68ch;
}
.llab .who-auth .aline {
  font-family: var(--ll-mono); font-size: .68rem; line-height: 1.65;
  color: var(--t400); white-space: pre-wrap;
}
.llab .who-auth .aline.mine { color: var(--ll-yellow); }

/* ══════════ Scene: Ports & networking (block 06) ══════════ */
.llab .ports-card { display: flex; flex-direction: column; gap: 12px; }

.llab .ports-table-wrap { background: var(--t900); border-radius: var(--ll-radius); overflow: hidden; }
.llab .pt-head {
  padding: 9px 14px; background: var(--t800);
  font-family: var(--ll-mono); font-size: .72rem; color: var(--ll-teal);
}
.llab .ports-table { padding: 6px 14px 12px; overflow-x: auto; }
.llab .prow {
  display: grid; grid-template-columns: 46px 66px 150px 1fr; gap: 8px;
  font-family: var(--ll-mono); font-size: .7rem; line-height: 2;
  color: var(--t300); white-space: nowrap;
}
.llab .prow.head { color: var(--ll-muted); border-bottom: 1px solid var(--t700); }
.llab .prow.mine { color: #fff; }
.llab .prow.clash { color: var(--ll-red); }
.llab .prow .paddr b.pub { color: var(--ll-yellow); }
.llab .prow .paddr b.loc { color: var(--ll-teal); }
.llab .prow .pproc { color: var(--t400); overflow: hidden; text-overflow: ellipsis; }
/* Phones: the Process column ellipsized to "user..." and the program name, the
   point of the row, was never visible. Let the row wrap and the cell break. */
@media (max-width: 900px) {
  .llab .prow { grid-template-columns: 40px 56px minmax(0, 1fr); white-space: normal; }
  .llab .prow .pproc { grid-column: 1 / -1; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; padding-left: 8px; }
}

.llab .ports-controls-wrap, .llab .pprobe-btns {
  background: var(--ll-cream); border: 1px solid var(--ll-line);
  border-radius: var(--ll-radius); padding: 12px 14px;
}
.llab .ports-controls { display: flex; flex-wrap: wrap; gap: 10px; }
.llab .pctl {
  flex: 1 1 240px; background: #fff; border: 1px solid var(--ll-line);
  border-radius: var(--ll-radius-sm); padding: 10px 12px;
}
.llab .pctl-name {
  font-family: var(--ll-mono); font-size: .76rem; font-weight: 600;
  color: var(--ll-ink); margin-bottom: 7px;
}
.llab .pctl-name small { font-weight: 400; color: var(--ll-muted); font-family: var(--ll-body); }
.llab .pctl-binds { display: flex; gap: 5px; margin-bottom: 7px; }
.llab .pbind {
  flex: 1; font-family: var(--ll-mono); font-size: .68rem; font-weight: 600;
  background: transparent; border: 1px solid var(--ll-line);
  border-radius: 7px; padding: 5px 6px; color: var(--ll-muted);
}
.llab .pbind.on { border-color: var(--ll-indigo); background: rgba(99,102,241,.08); color: var(--ll-indigo-strong); }
.llab .pctl-port { font-family: var(--ll-mono); font-size: .68rem; color: var(--ll-muted); }
.llab .pctl-port input {
  width: 68px; font-family: var(--ll-mono); font-size: .72rem;
  border: 1px solid var(--ll-line); border-radius: 6px; padding: 3px 7px;
  background: #fff; color: var(--ll-ink);
}

.llab .pprobe-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.llab .pprobe-btns .pctl-label { margin-bottom: 0; }
.llab .ports-probe {
  background: var(--t900); border-radius: var(--ll-radius);
  padding: 12px 14px; margin-top: 10px; min-height: 84px;
}
.llab .pprobe-head {
  font-family: var(--ll-mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ll-muted); margin-bottom: 6px;
}
.llab .ports-probe .pline { font-family: var(--ll-mono); font-size: .72rem; line-height: 1.75; color: var(--t300); }
.llab .ports-probe .pline .pc { color: var(--ll-teal); }
.llab .ports-probe .pline.ok { color: var(--ll-teal); margin-bottom: 6px; }
.llab .ports-probe .pline.err { color: var(--ll-red); margin-bottom: 6px; white-space: pre-wrap; }
.llab .ports-probe .pline.dim { color: var(--t400); font-style: italic; }

.llab .pclash-box {
  background: rgba(255,107,107,.07); border: 1px solid rgba(255,107,107,.4);
  border-radius: var(--ll-radius); padding: 12px 14px;
}
.llab .pclash-box .pc-title {
  font-family: var(--ll-disp); font-weight: 700; font-size: .9rem;
  color: #c2410c; margin-bottom: 7px;
}
.llab .pclash-box pre {
  font-family: var(--ll-mono); font-size: .7rem; line-height: 1.7;
  color: var(--ll-ink); background: #fff; border-radius: 8px;
  padding: 9px 11px; overflow-x: auto; margin-bottom: 7px;
}
.llab .pclash-box .pc-note { font-size: .8rem; color: var(--ll-muted); }
.llab .pclash-box .pc-note code {
  font-family: var(--ll-mono); font-size: .74rem;
  background: rgba(26,26,46,.06); border-radius: 4px; padding: 1px 5px;
}

/* ══════════ Scene: Packages (block 07) ══════════ */
.llab .apt-card { display: flex; flex-direction: column; gap: 12px; }
.llab .apt-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;
  background: var(--ll-cream); border: 1px solid var(--ll-line);
  border-radius: var(--ll-radius); padding: 10px 14px;
}
.llab .apt-userpick { display: flex; align-items: center; gap: 6px; }
.llab .apt-userpick .pctl-label { margin-bottom: 0; }
.llab .apt-u {
  font-family: var(--ll-mono); font-size: .72rem; font-weight: 600;
  background: #fff; border: 1px solid var(--ll-line);
  border-radius: 999px; padding: 5px 13px; color: var(--ll-muted);
}
.llab .apt-u.on { border-color: var(--ll-indigo); color: var(--ll-indigo-strong); background: rgba(99,102,241,.08); }
.llab .apt-state {
  font-family: var(--ll-mono); font-size: .66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  border-radius: 999px; padding: 4px 11px;
}
.llab .apt-state.yes { background: rgba(77,184,168,.16); color: #22766a; }
.llab .apt-state.no { background: rgba(26,26,46,.07); color: var(--ll-muted); }

.llab .apt-out {
  background: var(--t900); border-radius: var(--ll-radius);
  padding: 12px 14px; min-height: 210px; max-height: 300px; overflow-y: auto;
}
.llab .apt-out .aline {
  font-family: var(--ll-mono); font-size: .71rem; line-height: 1.75;
  color: var(--t300); white-space: pre-wrap;
}
.llab .apt-out .aline.cmd { color: var(--ll-teal); margin-top: 6px; }
.llab .apt-out .aline.err { color: var(--ll-red); }
.llab .apt-out .aline.hl { color: #fff; font-weight: 600; }
.llab .apt-out .aline.dim { color: var(--t400); font-style: italic; }

.llab .apt-actions {
  background: var(--ll-cream); border: 1px solid var(--ll-line);
  border-radius: var(--ll-radius); padding: 12px 14px;
}
.llab .apt-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.llab .apt-btn {
  display: flex; flex-direction: column; gap: 1px; text-align: left;
  background: #fff; border: 1px solid var(--ll-line);
  border-radius: var(--ll-radius-sm); padding: 7px 11px;
}
.llab .apt-btn:hover { border-color: var(--ll-indigo); box-shadow: var(--ll-shadow-sm); }
.llab .apt-btn .apt-cmd {
  font-family: var(--ll-mono); font-size: .74rem; font-weight: 600;
  color: var(--ll-ink); white-space: nowrap;
}
.llab .apt-btn .apt-why { font-size: .65rem; color: var(--ll-muted); }

.llab .apt-filestoggle {
  font-family: var(--ll-disp); font-size: .74rem; font-weight: 600;
  background: transparent; border: 1px dashed var(--ll-line);
  border-radius: 999px; padding: 6px 14px; color: var(--ll-indigo-strong);
}
.llab .apt-filestoggle:hover { border-color: var(--ll-indigo); }
.llab .apt-card:not(.has-files) .apt-filestoggle { opacity: .5; }
/* Before the install the panel answers with one line and the five-paths note
   stays hidden (it would describe files the reader cannot see yet). */
.llab .apt-card:not(.has-files) .apt-files-wrap.open .apt-filesnote { display: none; }
.llab .afile.af-empty { color: var(--ll-muted); font-style: italic; font-size: .8rem; }
.llab .apt-files, .llab .apt-filesnote { display: none; }
.llab .apt-files-wrap.open .apt-files {
  display: block; margin-top: 10px;
  background: #fff; border: 1px solid var(--ll-line);
  border-radius: var(--ll-radius); padding: 6px 14px;
}
.llab .apt-files-wrap.open .apt-filesnote {
  display: block; margin-top: 8px; font-size: .82rem; color: var(--ll-muted); max-width: 70ch;
}
.llab .apt-filesnote code {
  font-family: var(--ll-mono); font-size: .74rem;
  background: rgba(26,26,46,.06); border-radius: 4px; padding: 1px 5px;
}
.llab .afile {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid var(--ll-line);
}
.llab .afile:last-child { border-bottom: 0; }
.llab .afile .af-path {
  font-family: var(--ll-mono); font-size: .72rem; color: var(--ll-ink); overflow-wrap: anywhere;
}
.llab .afile .af-why { font-size: .72rem; color: var(--ll-muted); }

/* ══════════ Scene: Services & systemd (block 08) ══════════ */
.llab .unit-card { display: flex; flex-direction: column; gap: 12px; }
.llab .unit-grid { display: grid; grid-template-columns: 1fr 220px; gap: 12px; }
@media (max-width: 720px) { .llab .unit-grid { grid-template-columns: 1fr; } }

.llab .unit-file-wrap { background: var(--t900); border-radius: var(--ll-radius); overflow: hidden; }
.llab .uf-head {
  padding: 9px 14px; background: var(--t800);
  font-family: var(--ll-mono); font-size: .7rem; color: var(--t400);
}
.llab .unit-file { padding: 10px 10px 6px; }
.llab .uline {
  display: block; width: 100%; text-align: left;
  font-family: var(--ll-mono); font-size: .74rem; line-height: 1.85;
  color: var(--t300); padding: 0 4px; border: 0; background: transparent;
  white-space: pre;
}
.llab .uline.static { min-height: 1.85em; }
.llab .uline.toggle {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border: 1px dashed var(--t600); border-radius: 7px;
  padding: 3px 8px; margin: 2px 0;
}
.llab .uline.toggle:hover { border-color: var(--ll-indigo); background: rgba(99,102,241,.08); }
.llab .uline.toggle.on .ul-text { color: var(--ll-teal); font-weight: 600; }
.llab .uline.toggle.off .ul-text { color: var(--t400); }
.llab .uline.toggle.danger { border-color: rgba(255,107,107,.6); }
.llab .uline.toggle.danger .ul-text { color: var(--ll-red); }
.llab .uline .ul-tag {
  font-family: var(--ll-body); font-size: .64rem; color: var(--t400); white-space: normal;
}
/* A static line with a tag lays out like a toggle: the tag is its own flex
   item, so it drops to its own line whole instead of breaking mid-sentence. */
.llab .uline.static.tagged { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.llab .uf-hint { padding: 4px 14px 12px; font-size: .7rem; color: var(--t400); }
.llab .us-hint { margin-top: -6px; padding: 0 6px; font-size: .76rem; color: var(--ll-muted); }

.llab .unit-side { display: flex; flex-direction: column; gap: 10px; }
.llab .unit-proc {
  background: var(--ll-cream); border: 1px solid var(--ll-line);
  border-radius: var(--ll-radius); padding: 12px 14px; text-align: center;
}
.llab .up-label {
  font-family: var(--ll-mono); font-size: .6rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ll-muted);
}
.llab .up-pid {
  font-family: var(--ll-disp); font-weight: 700; font-size: 1.9rem; line-height: 1.2;
  color: var(--ll-ink);
}
.llab .up-pid.failed, .llab .up-pid.stopped { color: rgba(26,26,46,.25); }
.llab .up-state {
  font-family: var(--ll-mono); font-size: .66rem; font-weight: 600;
  border-radius: 999px; padding: 3px 10px; display: inline-block; margin-bottom: 4px;
}
.llab .up-state.running { background: rgba(77,184,168,.16); color: #22766a; }
.llab .up-state.failed { background: rgba(255,107,107,.14); color: #c2410c; }
.llab .up-state.stopped { background: rgba(26,26,46,.07); color: var(--ll-muted); }
.llab .up-restarts { font-size: .66rem; color: var(--ll-indigo-strong); margin-bottom: 6px; }
.llab .up-kill {
  display: block; width: 100%; margin-top: 8px;
  font-family: var(--ll-mono); font-size: .72rem; font-weight: 600;
  background: var(--ll-red); color: #fff; border: 0;
  border-radius: var(--ll-radius-sm); padding: 8px 10px;
}
.llab .up-kill:disabled { background: rgba(26,26,46,.07); color: var(--ll-muted); cursor: default; }

.llab .unit-ctl { display: flex; flex-direction: column; gap: 5px; }
.llab .uc-btn {
  font-family: var(--ll-mono); font-size: .69rem; font-weight: 600;
  background: #fff; border: 1px solid var(--ll-line);
  border-radius: var(--ll-radius-sm); padding: 8px 10px; color: var(--ll-ink);
  text-align: left;
}
.llab .uc-btn:hover { border-color: var(--ll-indigo); }
.llab .uc-btn.go { background: var(--ll-indigo); border-color: var(--ll-indigo); color: #fff; }
.llab .uc-btn.go:hover { background: var(--ll-indigo-strong); }
.llab .uc-btn.needed { border-color: var(--ll-yellow); background: rgba(245,215,110,.18); }

.llab .unit-note { display: none; }
.llab .unit-note.show {
  display: block;
  background: rgba(245,215,110,.16); border: 1px solid rgba(245,215,110,.6);
  border-radius: var(--ll-radius-sm); padding: 9px 13px;
  font-size: .82rem; color: var(--ll-ink);
}
.llab .unit-note code {
  font-family: var(--ll-mono); font-size: .74rem;
  background: rgba(26,26,46,.07); border-radius: 4px; padding: 1px 5px;
}

.llab .unit-status { background: var(--t900); border-radius: var(--ll-radius); overflow: hidden; }
.llab .us-head {
  padding: 9px 14px; background: var(--t800);
  font-family: var(--ll-mono); font-size: .7rem; color: var(--ll-teal);
}
.llab .us-body {
  padding: 11px 14px; margin: 0;
  font-family: var(--ll-mono); font-size: .71rem; line-height: 1.75;
  color: var(--t300); overflow-x: auto; white-space: pre;
}
.llab .us-body.failed { color: #ffb4a2; }

.llab .unit-journal-wrap { background: var(--t900); border-radius: var(--ll-radius); overflow: hidden; }
.llab .uj-head {
  padding: 9px 14px; background: var(--t800);
  font-family: var(--ll-mono); font-size: .7rem; color: var(--ll-teal);
}
.llab .unit-journal { padding: 10px 14px 12px; max-height: 190px; overflow-y: auto; }
.llab .ujline {
  font-family: var(--ll-mono); font-size: .69rem; line-height: 1.7;
  color: var(--t400); white-space: pre-wrap;
}
.llab .ujline.dim { font-style: italic; }

/* ══════════ Scene: Logs (block 09) ══════════ */
.llab .logs-card { display: flex; flex-direction: column; gap: 12px; }
.llab .logs-filters {
  background: var(--ll-cream); border: 1px solid var(--ll-line);
  border-radius: var(--ll-radius); padding: 10px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.llab .lgf-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.llab .lgf-row .pctl-label { margin-bottom: 0; }
.llab .lgf-btn {
  font-family: var(--ll-mono); font-size: .71rem; font-weight: 600;
  background: #fff; border: 1px solid var(--ll-line);
  border-radius: 999px; padding: 4px 12px; color: var(--ll-muted);
}
.llab .lgf-btn.on { border-color: var(--ll-indigo); background: rgba(99,102,241,.08); color: var(--ll-indigo-strong); }
.llab .lgf-search {
  font-family: var(--ll-mono); font-size: .72rem;
  border: 1px solid var(--ll-line); border-radius: 999px;
  padding: 4px 12px; background: #fff; color: var(--ll-ink); min-width: 150px;
}

.llab .logs-stream-wrap { background: var(--t900); border-radius: var(--ll-radius); overflow: hidden; }
.llab .lgs-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; background: var(--t800);
  font-family: var(--ll-mono); font-size: .72rem; color: var(--t300);
}
.llab .lgs-head .pc { color: var(--ll-teal); }
.llab .lgs-count { color: var(--ll-indigo); font-weight: 600; flex: none; }
.llab .logs-stream { padding: 6px 8px 10px; max-height: 300px; overflow-y: auto; }
.llab .lgline {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 3px 6px;
  font-family: var(--ll-mono); font-size: .69rem; line-height: 1.6;
  color: var(--t300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Phones: a nowrap + ellipsis log line hid "Address already in use", the very
   line task 3 asks the reader to find. Wrap under the rail breakpoint. */
@media (max-width: 900px) {
  .llab .lgline { white-space: normal; overflow-wrap: anywhere; line-height: 1.45; padding: 5px 6px; }
}
.llab .lgline:hover { background: rgba(99,102,241,.16); }
.llab .lgline.err .lg-text { color: #ffb4a2; }
.llab .lgline.pinned { border-color: var(--ll-indigo); background: rgba(99,102,241,.2); }
.llab .lgline .lg-ts { color: var(--t400); }
.llab .lgline .lg-src { color: var(--ll-yellow); }
.llab .lgline.dim { color: var(--t400); font-style: italic; white-space: normal; }

.llab .logs-pin { display: none; }
.llab .logs-pin.show { display: block; }
.llab .lgpin-box {
  background: rgba(255,107,107,.07); border: 1px solid rgba(255,107,107,.4);
  border-radius: var(--ll-radius); padding: 11px 14px;
}
.llab .lgpin-box.right { background: rgba(77,184,168,.09); border-color: rgba(77,184,168,.5); }
.llab .lgp-title {
  font-family: var(--ll-disp); font-weight: 700; font-size: .9rem;
  color: #c2410c; margin-bottom: 5px;
}
.llab .lgpin-box.right .lgp-title { color: #22766a; }
.llab .lgp-why { font-size: .84rem; color: var(--ll-ink); max-width: 70ch; }
.llab .lgp-why code {
  font-family: var(--ll-mono); font-size: .76rem;
  background: rgba(26,26,46,.07); border-radius: 4px; padding: 1px 5px;
}
.llab .logs-note { font-size: .82rem; color: var(--ll-muted); max-width: 72ch; }

/* ══════════ Scene: When it breaks (block 10) ══════════ */
.llab .scen-card { display: flex; flex-direction: column; gap: 12px; }
.llab .scen-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;
}
.llab .scen-list { display: flex; flex-wrap: wrap; gap: 6px; }
.llab .scen-tab {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ll-disp); font-size: .76rem; font-weight: 600;
  background: #fff; border: 1px solid var(--ll-line);
  border-radius: 999px; padding: 6px 14px; color: var(--ll-muted);
}
.llab .scen-tab:hover { border-color: var(--ll-indigo); color: var(--ll-ink); }
.llab .scen-tab.on { border-color: var(--ll-indigo); background: rgba(99,102,241,.08); color: var(--ll-indigo-strong); }
.llab .scen-tab.done .st-tick { color: var(--ll-teal); font-weight: 700; }
.llab .scen-score {
  font-family: var(--ll-mono); font-size: .68rem; font-weight: 600;
  color: var(--ll-indigo); flex: none;
}

.llab .scen-symptom { background: var(--t900); border-radius: var(--ll-radius); overflow: hidden; }
.llab .scs-head {
  padding: 9px 14px; background: var(--t800);
  font-family: var(--ll-mono); font-size: .72rem; color: var(--ll-teal);
}
.llab .scs-body {
  margin: 0; padding: 12px 14px;
  font-family: var(--ll-mono); font-size: .72rem; line-height: 1.7;
  color: #ffb4a2; overflow-x: auto; white-space: pre;
}
.llab .scs-body.silent { color: var(--t400); font-style: italic; }

.llab .scen-quiz {
  background: var(--ll-cream); border: 1px solid var(--ll-line);
  border-radius: var(--ll-radius); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.llab .scen-opt {
  text-align: left; background: #fff; border: 1px solid var(--ll-line);
  border-radius: var(--ll-radius-sm); padding: 9px 13px;
  font-family: var(--ll-body); font-size: .86rem; color: var(--ll-ink);
}
.llab .scen-opt:hover:not(:disabled) { border-color: var(--ll-indigo); box-shadow: var(--ll-shadow-sm); }
.llab .scen-opt.right { border-color: var(--ll-teal); background: rgba(77,184,168,.1); }
.llab .scen-opt.wrong { border-color: var(--ll-red); background: rgba(255,107,107,.08); }

.llab .scen-answer { display: none; }
.llab .scen-answer.show { display: block; }
.llab .sca-box {
  background: rgba(255,107,107,.07); border: 1px solid rgba(255,107,107,.4);
  border-radius: var(--ll-radius); padding: 13px 15px;
}
.llab .sca-box.right { background: rgba(77,184,168,.09); border-color: rgba(77,184,168,.5); }
.llab .sca-title {
  font-family: var(--ll-disp); font-weight: 700; font-size: 1rem;
  color: #c2410c; margin-bottom: 6px;
}
.llab .sca-box.right .sca-title { color: #22766a; }
.llab .sca-why { font-size: .87rem; line-height: 1.6; color: var(--ll-ink); max-width: 72ch; }
.llab .sca-why code, .llab .sca-cmd code {
  font-family: var(--ll-mono); font-size: .78rem;
  background: rgba(26,26,46,.07); border-radius: 4px; padding: 1px 5px;
}
.llab .sca-label {
  display: block;
  font-family: var(--ll-mono); font-size: .6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ll-muted);
  margin-bottom: 4px;
}
.llab .sca-cmd { margin-top: 12px; }
.llab .sca-out pre {
  margin: 6px 0 0; padding: 9px 12px;
  background: var(--t900); border-radius: 8px;
  font-family: var(--ll-mono); font-size: .69rem; line-height: 1.65;
  color: var(--t300); overflow-x: auto; white-space: pre;
}
.llab .sca-ai {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ll-line);
  font-size: .87rem; color: var(--ll-ink); font-style: italic;
}

/* ══════════ Primer (optional per-block orientation card) ══════════
   Sits between the lab and the recap: the reader has already played, this
   names the furniture. Used by block 01 (what a terminal even is) and block
   04 (anatomy of a command). */
.llab .ll-primer {
  background: var(--ll-cream); border: 1px solid var(--ll-line);
  border-left: 3px solid var(--ll-indigo);
  border-radius: var(--ll-radius); padding: 16px 18px; margin-top: 26px;
}
.llab .ll-primer h2 {
  font-family: var(--ll-disp); font-weight: 700; font-size: 1rem;
  color: var(--ll-ink); margin-bottom: 10px;
}
.llab .pr-row {
  display: grid; grid-template-columns: 130px 1fr; gap: 12px;
  padding: 6px 0; border-top: 1px solid var(--ll-line);
}
.llab .pr-row:first-of-type { border-top: 0; }
@media (max-width: 620px) { .llab .pr-row { grid-template-columns: 1fr; gap: 2px; } }
.llab .pr-term {
  font-family: var(--ll-mono); font-size: .76rem; font-weight: 600;
  color: var(--ll-indigo-strong);
}
.llab .pr-def { font-size: .87rem; line-height: 1.6; color: var(--ll-ink); }
.llab .pr-def code {
  font-family: var(--ll-mono); font-size: .78rem;
  background: rgba(26,26,46,.06); border-radius: 4px; padding: 1px 5px;
}

.llab .pr-anatomy { margin-top: 14px; }
.llab .pra-line {
  background: var(--t900); border-radius: var(--ll-radius-sm);
  padding: 12px 14px; overflow-x: auto; white-space: nowrap;
  font-family: var(--ll-mono); font-size: .86rem;
}
.llab .pra-part { padding: 2px 0 4px; border-bottom: 2px solid transparent; }
.llab .pra-part.cmd { color: #fff; border-color: var(--ll-teal); }
.llab .pra-part.opt { color: var(--ll-yellow); border-color: var(--ll-yellow); }
.llab .pra-part.arg { color: var(--ll-indigo); border-color: var(--ll-indigo); }
.llab .pra-part.plain { color: var(--t400); }
.llab .pra-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 9px; }
.llab .pral { font-size: .74rem; color: var(--ll-muted); }
.llab .pral b { font-family: var(--ll-mono); font-size: .76rem; }
.llab .pral.cmd b { color: #22766a; }
.llab .pral.opt b { color: #a16207; }
.llab .pral.arg b { color: var(--ll-indigo-strong); }
.llab .pral.plain { display: none; }
.llab .pra-note { margin-top: 10px; font-size: .85rem; color: var(--ll-muted); max-width: 70ch; }
.llab .pra-note code {
  font-family: var(--ll-mono); font-size: .77rem;
  background: rgba(26,26,46,.06); border-radius: 4px; padding: 1px 5px;
}