body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  color: #333;
  margin: 30px;
}

header {
  background-color: #333;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: calc(100vh - 60px); /* Adjust for body margin */
  position: fixed;
  left: 0;
  top: 30px; /* Adjust for body margin */
  width: 170px;
  overflow-y: auto; /* Add scrollbar when content overflows */
  box-sizing: border-box;
}

.brand {
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 14px;
}

nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

nav a {
  text-decoration: none;
  text-align: center;
  display: block;
  position: relative;
  background-color: #4c6ef5;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
}

/* Excel-style corner triangle marking a tab that fans out to children. */
nav a.has-children::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 10px solid #e03131;
  border-right: 10px solid transparent;
  border-top-left-radius: 4px;
}

nav a:hover {
  background-color: #3b5bdb;
}

nav a.active {
  background-color: #1c2333;
  box-shadow: inset 0 0 0 2px #4c6ef5;
}

nav a.back {
  background-color: #e03131;
}

nav a.back:hover {
  background-color: #c92a2a;
}

/* Update Documentation tab, once we know its source file has uncommitted
   changes (see /api/git-status in server.py). */
nav a.tab-dirty {
  box-shadow: inset 0 0 0 2px #e03131;
}

.update-doc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.update-doc-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #e03131;
  color: white;
  font-size: 14px;
  cursor: pointer;
}

.update-doc-btn:disabled {
  background-color: #ced4da;
  color: #868e96;
  cursor: default;
}

.update-doc-log {
  flex-basis: 100%;
  max-height: 220px;
  overflow-y: auto;
  background-color: #1c2333;
  color: #d4d4d4;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 16px;
}

main {
  max-width: 1000px;
  margin: 20px auto 20px calc(170px + 40px);
  padding: 24px 30px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

main pre {
  background-color: #f5f5f5;
  padding: 12px;
  border-radius: 4px;
  overflow-x: auto;
}

main code {
  background-color: #f5f5f5;
  padding: 1px 4px;
  border-radius: 3px;
}

/* The main dashboard owns the sidebar when this SPA is embedded. app.js still
   builds #nav normally so the parent can mirror its current drill-down level. */
body.embedded {
  margin: 0;
}

body.embedded header {
  display: none;
}

body.embedded main {
  max-width: none;
  min-height: 100vh;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

main pre code {
  background-color: transparent;
  padding: 0;
}

h1, h2, p {
  margin: 0 0 16px;
}

.placeholder {
  color: #888;
  font-style: italic;
}

/* Construction Status pages can expose a nested task definition to the
   sidebar. Only the selected task is rendered in the content pane. */
.construction-plan-intro {
  max-width: 760px;
}

.construction-task-focus {
  max-width: 760px;
  margin-top: 24px;
}

.construction-task-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: #fff;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.construction-task-focus .construction-task-row {
  border-color: #4c6ef5;
  box-shadow: 0 0 0 3px rgba(76, 110, 245, 0.16);
}

.construction-task-focus[data-task-status="current"] .construction-task-row {
  border-left: 4px solid #4c6ef5;
}

.construction-task-focus[data-task-status="done"] .construction-task-row {
  background: #f1f3f5;
}

.construction-task-box {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border: 2px solid #868e96;
  border-radius: 2px;
  box-sizing: border-box;
}

.construction-task-focus[data-task-status="done"] .construction-task-box {
  border-color: #2b8a3e;
  background: #2b8a3e;
  box-shadow: inset 0 0 0 2px #fff;
}

.construction-task-copy strong,
.construction-task-copy small {
  display: block;
}

.construction-task-copy small {
  margin-top: 4px;
  color: #6c757d;
  line-height: 1.4;
}

.construction-task-status {
  padding: 3px 7px;
  border-radius: 999px;
  background: #e9ecef;
  color: #495057;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  white-space: nowrap;
}

.construction-task-focus[data-task-status="current"] .construction-task-status {
  background: #dbe4ff;
  color: #364fc7;
}

.construction-task-focus-label {
  margin-bottom: 8px;
  color: #6c757d;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.construction-task-focus-hint {
  margin-top: 14px;
}

/* Shared university-textbook presentation for dynamic Construction Status. */
.construction-textbook-page,
.construction-lesson {
  --status-ink: #172033;
  --status-muted: #5f6b7a;
  --status-navy: #17365d;
  --status-gold: #b58b36;
  --status-line: #d9dee7;
  max-width: 960px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #d7dce4;
  border-radius: 12px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 45px rgba(17, 32, 52, .12);
  color: var(--status-ink);
  font: 17px/1.72 Georgia, "Times New Roman", serif;
}

.construction-plan-intro.construction-textbook-intro,
.construction-task-focus.construction-textbook-focus {
  max-width: 960px;
  margin: 0 auto;
}

.construction-textbook-page *,
.construction-lesson * { box-sizing: border-box; }

.construction-status-masthead,
.construction-lesson-masthead {
  display: block;
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  overflow: visible;
  padding: 52px 62px 46px;
  background: linear-gradient(135deg, #122a4b 0%, #1b4678 68%, #295f9e 100%);
  color: #fff;
}

.construction-status-masthead::after,
.construction-lesson-masthead::after {
  content: "";
  position: absolute;
  bottom: 26px;
  left: 62px;
  width: 110px;
  height: 4px;
  background: var(--status-gold);
}

.construction-status-kicker,
.construction-lesson-kicker {
  margin: 0 0 12px;
  opacity: .8;
  font: .76rem/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.construction-status-badge,
.construction-lesson-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--status-gold);
  color: #fff;
  font: 700 .72rem/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.construction-lesson-badge.status-current { background: #4c6ef5; }
.construction-lesson-badge.status-done { background: #2b8a3e; }

.construction-status-masthead h1,
.construction-lesson-masthead h1 {
  margin: 0 0 10px;
  border: 0;
  color: #fff;
  font-size: clamp(2.1rem, 6vw, 3.8rem);
  line-height: 1.06;
  letter-spacing: -.025em;
}

/* The full path to index.html, under the title -- click to copy it to the
   clipboard. Georgia 13pt as authored; break-all so a long path never widens
   the masthead on a narrow screen. It's a <button>, not an <a>, since it has
   no href to navigate to -- only a click-to-copy action. */
.construction-lesson-path {
  display: block;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: none;
  opacity: .85;
  color: #fff;
  font: 13pt/1.45 Georgia, "Times New Roman", serif;
  text-align: left;
  text-decoration: underline dotted;
  word-break: break-all;
  cursor: pointer;
}

.construction-lesson-path:hover,
.construction-lesson-path:focus-visible {
  opacity: 1;
}

.construction-status-edition,
.construction-lesson-edition {
  margin: 0;
  opacity: .9;
  font-size: 1.15rem;
}

.construction-status-body,
.construction-lesson-body { padding: 40px 62px 56px; }

.construction-textbook-page h2,
.construction-lesson h2 {
  margin: 2.1em 0 .75em;
  padding-bottom: .38em;
  border-bottom: 2px solid var(--status-navy);
  color: var(--status-navy);
  font: 700 1.75rem/1.2 Georgia, "Times New Roman", serif;
}

.construction-textbook-page h2:first-child,
.construction-lesson h2:first-child { margin-top: 0; }

.construction-status-callout,
.construction-lesson-callout {
  margin: 1.5em 0;
  padding: 20px 24px;
  border-left: 5px solid var(--status-navy);
  border-radius: 0 8px 8px 0;
  background: #eaf2fb;
  font-size: 1.05rem;
}

.construction-status-callout.principle,
.construction-lesson-callout.principle {
  border-left-color: var(--status-gold);
  background: #f8f2e4;
}

.construction-status-callout-label,
.construction-lesson-callout-label {
  display: block;
  margin-bottom: 5px;
  color: var(--status-muted);
  font: 700 .72rem/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.construction-status-metrics,
.construction-lesson-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 1.4em 0;
}

.construction-lesson-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.construction-status-metrics > div,
.construction-lesson-metrics > div {
  padding: 15px 10px;
  border: 1px solid var(--status-line);
  border-radius: 8px;
  background: #f8fafc;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

.construction-status-metrics strong,
.construction-lesson-metrics strong {
  display: block;
  color: var(--status-navy);
  font-size: 1.7rem;
  line-height: 1.1;
}

.construction-status-metrics span,
.construction-lesson-metrics span {
  display: block;
  margin-top: 5px;
  color: var(--status-muted);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.construction-progress-track {
  height: 12px;
  margin: 1em 0 .4em;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e9ef;
}

.construction-progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--status-gold), #d8ad4c);
}

.construction-progress-caption {
  color: var(--status-muted);
  font: .8rem/1.4 Arial, Helvetica, sans-serif;
}

.construction-status-table-wrap {
  margin: 1.35em 0 1.8em;
  overflow-x: auto;
  border: 1px solid var(--status-line);
  border-radius: 8px;
}

.construction-status-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  font: .9rem/1.5 Arial, Helvetica, sans-serif;
}

.construction-status-table th {
  padding: 11px 13px;
  background: var(--status-navy);
  color: white;
  text-align: left;
}

.construction-status-table td {
  padding: 11px 13px;
  border-top: 1px solid var(--status-line);
  vertical-align: top;
}

.construction-status-table tbody tr:nth-child(even) {
  background: #f8fafc;
}

.construction-lesson-trail {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .25);
  opacity: .85;
  font: .78rem/1.5 Arial, Helvetica, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.construction-status-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: #e5e9ef;
  color: #46525f;
  font: 700 .72rem/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.construction-status-chip.status-current {
  background: #dbe4ff;
  color: #2b3fa0;
}

.construction-status-chip.status-done {
  background: #d3f9d8;
  color: #22703a;
}

.construction-lesson-evidence {
  margin: 1.1em 0;
  padding-left: 1.3em;
}

.construction-lesson-evidence li {
  margin: .4em 0;
}

.construction-lesson code {
  padding: 1px 5px;
  border-radius: 4px;
  background: #eef1f6;
  font-size: .88em;
}

/* Short inline listing. Replaces the full VS Code editor chrome where the
   point is the shape of the code, not a screenshot of an editor. */
.construction-lesson pre.lesson-snippet {
  margin: 18px 0;
  padding: 16px 18px;
  overflow-x: auto;
  border: 1px solid #24354f;
  border-radius: 8px;
  background: #1e1e1e;
  color: #d4d4d4;
  font-size: .82rem;
  line-height: 1.55;
}

.construction-lesson pre.lesson-snippet code {
  padding: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

.construction-status-footer,
.construction-lesson-footer {
  padding: 23px 32px 30px;
  border-top: 1px solid var(--status-line);
  background: #fafbfc;
  color: var(--status-muted);
  font: .8rem/1.4 Arial, Helvetica, sans-serif;
  text-align: center;
}

@media ( max-width: 700px ) {
  .construction-status-metrics,
  .construction-lesson-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .construction-status-masthead,
  .construction-lesson-masthead,
  .construction-status-body,
  .construction-lesson-body { padding-left: 24px; padding-right: 24px; }
  .construction-status-masthead::after,
  .construction-lesson-masthead::after { left: 24px; }
}

/* Mobile: the fixed 170px left sidebar (built for desktop) leaves almost no
   room for content on a phone-width viewport. Below this width, header
   becomes a normal-flow top bar with the nav as a horizontally scrolling
   strip instead of a fixed vertical column, and main drops the sidebar
   offset entirely. */
@media ( max-width: 720px ) {
  body {
    margin: 0;
  }

  header {
    position: static;
    width: auto;
    height: auto;
    max-height: none;
    overflow-y: visible;
    padding: 12px;
  }

  .brand {
    margin-bottom: 10px;
  }

  nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 4px;
  }

  nav a {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 12px 16px;
    box-sizing: border-box;
    /* Apple/Google's ~44px minimum touch-target guidance. */
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  main {
    max-width: 100%;
    margin: 0;
    padding: 16px;
    border-radius: 0;
    box-shadow: none;
  }

  .update-doc-bar {
    flex-wrap: wrap;
  }
}

/* ---- Textbook lesson figures: VS Code source panels and pannable Mermaid
   diagrams inside a Construction Status lesson. Adapted from the Turn
   documentation page so lesson pages share its visual language. ---- */
.construction-lesson .subtitle {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--status-muted);
  font-size: .95rem;
}
.construction-lesson blockquote {
  margin: 1.5em 0;
  padding: 20px 24px;
  border-left: 5px solid var(--status-blue);
  background: #eef3f8;
  border-radius: 0 8px 8px 0;
  font-size: 1.08rem;
}
.construction-lesson blockquote.key-idea {
  background: #eaf2fb;
  border-left-color: var(--status-navy);
}
.construction-lesson blockquote.principle {
  background: #f8f2e4;
  border-left-color: var(--status-gold);
}
.construction-lesson .callout-label {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .14em;
  font-size: .72rem;
  color: var(--status-muted);
  margin-bottom: 5px;
}
.construction-lesson .table-wrap {
  overflow-x: auto;
  margin: 1.35em 0 1.8em;
  border: 1px solid var(--status-line);
  border-radius: 8px;
}
.construction-lesson table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: .93rem;
}
.construction-lesson tbody tr:nth-child(even) {
  background: #f8fafc;
}
.construction-lesson th {
  text-align: left;
  background: var(--status-navy);
  color: white;
  padding: 12px 14px;
}
.construction-lesson td {
  padding: 12px 14px;
  border-top: 1px solid var(--status-line);
  vertical-align: top;
}
.construction-lesson tbody tr:nth-child(even) {
  background: #f8fafc;
}
.construction-lesson p code,
.construction-lesson li code,
.construction-lesson td code {
  color: #163d68;
  background: #edf3f8;
  padding: .08em .3em;
  border-radius: 4px;
}
.construction-lesson .section-rule {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--status-gold), transparent);
  margin: 2.6em 0;
}
.construction-lesson .diagram-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--status-line);
  background: linear-gradient(180deg, #fbfcfe 0%, #f3f6fa 100%);
  font-family: Arial, Helvetica, sans-serif;
  color: var(--status-muted);
  font-size: .78rem;
}
.construction-lesson .diagram-title {
  font-weight: 700;
  color: var(--status-navy);
  letter-spacing: .02em;
}
.construction-lesson .diagram-hint { text-align: center; flex: 1;
}
.construction-lesson .diagram-controls { display: flex; gap: 6px;
}
.construction-lesson .diagram-controls button {
  min-width: 32px;
  height: 28px;
  padding: 0 9px;
  border: 1px solid #c8d1dc;
  border-radius: 5px;
  background: white;
  color: var(--status-navy);
  font: 700 13px/1 Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.construction-lesson .diagram-controls button:hover { background: #eef3f8;
}
.construction-lesson .run-tests-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  min-height: 42px;
  padding: 10px 20px;
  border: 1px solid #0d2744;
  border-radius: 6px;
  background: #17365d;
  color: #ffffff;
  font: 700 .9rem/1 Arial, Helvetica, sans-serif;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba( 23, 54, 93, .2 );
}
.construction-lesson .run-tests-button:hover { background: #244f7f;
}
.construction-lesson .run-tests-button:focus-visible {
  outline: 3px solid rgba( 181, 139, 54, .45 );
  outline-offset: 3px;
}
.construction-lesson .run-tests-button:disabled {
  cursor: wait;
  opacity: .72;
}
.construction-lesson .project-terminal-control {
  margin: 0 0 10px;
}
.construction-lesson .open-project-terminal-button {
  min-width: 0;
  min-height: 22px;
  padding: 3px 11px;
  font-size: .75rem;
  box-shadow: 0 1px 3px rgba( 23, 54, 93, .2 );
}
.construction-lesson .project-terminal-status {
  margin: 6px 0 0;
  color: #ffffff;
  font: italic .78rem/1.35 Arial, Helvetica, sans-serif;
}
.construction-lesson .run-tests-status {
  margin: 10px 0 0;
  color: var(--status-muted);
  font: italic .86rem/1.45 Arial, Helvetica, sans-serif;
}
.construction-lesson .mermaid-viewport {
  position: relative;
  height: 440px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(23,54,93,.035) 1px, transparent 1px),
    linear-gradient(rgba(23,54,93,.025) 1px, transparent 1px),
    #fbfaf7;
  background-size: 24px 24px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.construction-lesson .mermaid-viewport.dragging { cursor: grabbing;
}
.construction-lesson .mermaid-canvas {
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* No will-change here: keeping the SVG in its own compositor layer
     rasterizes it and makes Mermaid text blurry while zoomed. */
  transform-origin: 0 0;
}
/* Mermaid sizes label boxes from a text measurement taken with its own
   font stack. When that font is not installed the rendered glyphs are
   taller than the measurement, and the label's foreignObject clips the
   descenders. Letting labels overflow their measured box is harmless and
   keeps text readable whatever fonts the viewer happens to have. */
.construction-lesson .mermaid-canvas foreignObject,
.construction-lesson .mermaid-canvas foreignObject div,
.construction-lesson .mermaid-canvas .label {
  overflow: visible;
}
.construction-lesson .mermaid-canvas svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: none !important;
}
/* No font-family override here. Mermaid measures label boxes with the font
   it was initialized with; forcing a different one in CSS leaves the boxes
   sized for the old metrics and clips SVG text in class diagrams. */
.construction-lesson .mermaid-viewport .edgeLabel {
  background: #fbfaf7 !important;
  color: var(--status-ink) !important;
}
.diagram-step-tooltip {
  position: fixed;
  z-index: 10000;
  box-sizing: border-box;
  width: 260px;
  max-width: calc( 100vw - 24px );
  padding: 8px 10px;
  border: 1px solid #8794a3;
  border-radius: 4px;
  background: #fffbea;
  color: #172033;
  box-shadow: 0 4px 12px rgba( 17, 32, 51, .22 );
  font: 13px/1.45 Arial, Helvetica, sans-serif;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
}
@media (max-width: 700px) {
  .construction-lesson .mermaid-viewport { height: 360px;
  }
  .construction-lesson .diagram-hint { display: none;
  }
}
@media print {
  .construction-lesson .diagram-toolbar { display: none;
  }
  .construction-lesson .mermaid-viewport {
    height: auto;
    overflow: visible;
    background: white;
  }
  .construction-lesson .mermaid-canvas { transform: none !important;
  }
  .construction-lesson .mermaid-figure { break-inside: avoid; box-shadow: none;
  }
}
.construction-lesson .vscode-titlebar {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 12px;
  background: #181818;
  color: #cccccc;
  border-bottom: 1px solid #2b2b2b;
  font: 12px/1.2 "Segoe UI", Arial, sans-serif;
}
.construction-lesson .vscode-app {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c8c8c8;
}
.construction-lesson .vscode-logo {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border-radius: 3px;
  background: #007acc;
  color: white;
  font: 700 8px/1 "Segoe UI", Arial, sans-serif;
  letter-spacing: -.03em;
}
.construction-lesson .vscode-window-controls {
  display: flex;
  gap: 14px;
  color: #999;
  font-size: 11px;
  letter-spacing: .02em;
}
.construction-lesson .vscode-tabs {
  height: 36px;
  display: flex;
  align-items: stretch;
  background: #252526;
  border-bottom: 1px solid #191919;
}
.construction-lesson .vscode-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 170px;
  padding: 0 14px;
  background: #1e1e1e;
  border-top: 1px solid #007acc;
  color: #d7d7d7;
  font: 12.5px/1 "Segoe UI", Arial, sans-serif;
}
.construction-lesson .vscode-python-badge {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: linear-gradient(135deg, #3776ab 0 52%, #ffd343 52% 100%);
  color: #fff;
  font: 800 7px/1 Arial, sans-serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
}
.construction-lesson .vscode-ts-badge {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: #3178c6;
  color: #fff;
  font: 800 7px/1 Arial, sans-serif;
}
.construction-lesson .vscode-text-badge {
  width: 16px;
  color: #9cdcfe;
  font: 700 10px/1 Consolas, monospace;
}
.construction-lesson .vscode-editor pre.vscode-code {
  margin: 0;
  padding: 10px 0 12px;
  overflow-x: auto;
  background: #1e1e1e;
  color: #d4d4d4;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  line-height: 1.25;
  font-size: 13.5px;
  tab-size: 4;
  white-space: normal;
}
.construction-lesson .vscode-editor code {
  font-family: Consolas, "Cascadia Code", "Courier New", monospace;
  font-size: 1em;
}
.construction-lesson .vscode-code-line {
  display: grid;
  line-height: 1.25;
  grid-template-columns: 52px max-content;
  min-width: 100%;
  width: max-content;
  min-height: 17px;
  margin: 0;
  padding: 0;
}
.construction-lesson .vscode-code-line:hover {
  background: rgba(255,255,255,.025);
}
.construction-lesson .vscode-line-number {
  padding: 0 14px 0 0;
  line-height: 1.25;
  color: #858585;
  text-align: right;
  user-select: none;
  border-right: 1px solid rgba(255,255,255,.035);
}
/* An excerpt panel skips lines; this row marks the gap without faking a number. */
.construction-lesson .vscode-code-elision .vscode-line-number,
.construction-lesson .vscode-code-elision .vscode-line-text {
  color: #6a6a6a;
}
.construction-lesson .vscode-code-elision:hover {
  background: none;
}
.construction-lesson .vscode-line-text {
  display: block;
  line-height: 1.25;
  padding: 0 18px 0 16px;
  white-space: pre;
  color: #d4d4d4;
}
.construction-lesson .vscode-statusbar {
  min-height: 23px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 0 10px;
  background: #007acc;
  color: white;
  font: 11px/1.2 "Segoe UI", Arial, sans-serif;
}
.construction-lesson .vscode-status-left, .construction-lesson .vscode-status-right {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}
.construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .c, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .ch, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .cm, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .cp, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .cpf, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .c1, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .cs { color: #6a9955;
}
.construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .k, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .kc, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .kd, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .kn, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .kp, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .kr, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .kt { color: #c586c0;
}
.construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .o, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .ow { color: #d4d4d4;
}
.construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .n { color: #9cdcfe;
}
.construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .na { color: #9cdcfe;
}
.construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .nb { color: #4ec9b0;
}
.construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .nc { color: #4ec9b0;
}
.construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .nd { color: #dcdcaa;
}
.construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .ne { color: #4ec9b0;
}
.construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .nf { color: #dcdcaa;
}
.construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .ni { color: #d4d4d4;
}
.construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .nl { color: #9cdcfe;
}
.construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .nn { color: #4ec9b0;
}
.construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .nt { color: #569cd6;
}
.construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .nv, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .vc, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .vg, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .vi { color: #9cdcfe;
}
.construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .m, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .mb, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .mf, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .mh, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .mi, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .mo, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .il { color: #b5cea8;
}
.construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .s, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .sa, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .sb, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .sc, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .dl, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .sd, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .s2, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .se, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .sh, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .si, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .sx, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .sr, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .s1, .construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .ss { color: #ce9178;
}
.construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .bp { color: #569cd6;
}
.construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .fm { color: #dcdcaa;
}
.construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .err { color: #f44747; background: transparent;
}
.construction-lesson :is( .vscode-editor, pre.lesson-snippet ) .w { color: #d4d4d4;
}
@media (max-width: 700px) {
  .construction-lesson .vscode-window-controls { display: none;
  }
  .construction-lesson .vscode-tab { min-width: 145px;
  }
  .construction-lesson .vscode-editor pre.vscode-code { font-size: 12.5px;
  }
  .construction-lesson .vscode-code-line { grid-template-columns: 42px max-content;
  }
  .construction-lesson .vscode-line-number { padding-right: 10px;
  }
  .construction-lesson .vscode-line-text { padding-left: 12px;
  }
  .construction-lesson .vscode-status-left { display: none;
  }
}
@media print {
  .construction-lesson .vscode-titlebar, .construction-lesson .vscode-tabs, .construction-lesson .vscode-statusbar { display: none;
  }
  .construction-lesson .vscode-editor {
    border: 1px solid #444;
    box-shadow: none;
    break-inside: avoid;
  }
  .construction-lesson .vscode-editor pre.vscode-code {
    white-space: pre-wrap;
    background: #1e1e1e !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}