/* Generated from docs/design/workshop-guide/reference/guide.dc.html: one class per distinct inline
   style of the mock's content column, declarations unchanged (links keep the mock's inline colour on
   hover, as they did there). Hand-written rules follow the generated block. */

.gd-1 { padding:28px 12px 0; display:flex; flex-direction:column; gap:14px; }
.gd-2 { font:400 11px 'IBM Plex Mono'; letter-spacing:.18em; text-transform:uppercase; color:#e8962e; }
.gd-3 { margin:0; font:400 44px/1.05 'Peace Sans'; text-transform:uppercase; color:#f6efe0; text-wrap:balance; }
.gd-4 { margin:0; max-width:640px; font:400 16px/1.6 'IBM Plex Sans'; color:#bdb8ae; text-wrap:pretty; }
.gd-5 { display:flex; gap:10px; flex-wrap:wrap; font:400 12px 'IBM Plex Mono'; color:#8f8a80; }
.gd-6 { padding:6px 10px; background:#2b2c2c; }
.gd-7 { padding:56px 12px 0; display:flex; flex-direction:column; gap:18px; }
.gd-8 { margin:0; font:400 30px/1.1 'Peace Sans'; text-transform:uppercase; color:#f6efe0; }
.gd-9 { margin:0; font:400 18px/1.65 'IBM Plex Sans'; color:#e4dfd4; text-wrap:pretty; }
.gd-10 { margin:0; font:400 16px/1.7 'IBM Plex Sans'; color:#bdb8ae; text-wrap:pretty; }
.gd-11 { display:flex; flex-direction:column; gap:10px; font:400 16px/1.6 'IBM Plex Sans'; color:#d8d3c8; }
.gd-12 { display:flex; gap:12px; }
.gd-13 { color:#e8962e; flex:none; }
.gd-14 { display:flex; align-items:center; gap:14px; font:400 13px 'IBM Plex Mono'; color:#8f8a80; }
.gd-15 { width:36px; height:1px; background:#4a4744; }
.gd-16 { padding:64px 12px 0; display:flex; flex-direction:column; gap:18px; }
.gd-17 { margin:0; display:flex; gap:16px; align-items:baseline; font:400 34px/1.1 'Peace Sans'; text-transform:uppercase; color:#f6efe0; text-wrap:balance; }
.gd-18 { color:#e8962e; border-bottom:1px solid rgba(232,150,46,.4); }
.gd-19 { position:relative; margin:12px 0; display:flex; justify-content:center; padding:24px 0; }
.gd-20 { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:invert(1); opacity:.1; pointer-events:none; }
.gd-21 { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.4; pointer-events:none; }
.gd-22 { position:relative; width:min(100%,380px); filter:drop-shadow(0 24px 24px rgba(0,0,0,.6)); }
.gd-23 { width:100%; display:block; }
.gd-24 { position:absolute; inset:0; width:100%; display:block; }
.gd-25 { font:400 24px/1.25 'Peace Sans'; text-transform:uppercase; color:#f6efe0; text-align:center; text-wrap:balance; }
.gd-26 { margin:0; font:400 16px/1.7 'IBM Plex Sans'; color:#bdb8ae; }
.gd-27 { margin:16px 0 0; font:400 22px 'Peace Sans'; text-transform:uppercase; color:#f3efe6; }
.gd-28 { color:#f3efe6; font-weight:600; }
.gd-29 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px, 100%),1fr)); gap:14px; }
.gd-30 { padding:20px 22px; background:#232424; display:flex; flex-direction:column; gap:8px; }
.gd-31 { font:400 17px 'Peace Sans'; color:#f3efe6; }
.gd-32 { font:400 14px/1.6 'IBM Plex Sans'; color:#bdb8ae; }
.gd-33 { padding:36px 12px 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px, 100%),1fr)); gap:20px; align-items:end; }
.gd-34 { display:block; }
.gd-35 { position:relative; }
.gd-36 { padding:20px 12px 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px, 100%),1fr)); gap:20px; font:400 15px/1.6 'IBM Plex Sans'; color:#d8d3c8; }
.gd-37 { display:flex; flex-direction:column; gap:8px; }
.gd-38 { font:400 15px 'Peace Sans'; text-transform:uppercase; color:#e8962e; }
.gd-39 { font:400 15px 'Peace Sans'; text-transform:uppercase; color:#6e93ad; }
.gd-40 { font:400 15px 'Peace Sans'; text-transform:uppercase; color:#7fae5c; }
.gd-41 { padding:26px 12px 0; font:400 16px/1.7 'IBM Plex Sans'; color:#bdb8ae; text-wrap:pretty; }
.gd-42 { padding:72px 12px 0; display:flex; flex-direction:column; gap:18px; }
.gd-43 { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.gd-44 { width:200px; flex:none; position:relative; transform:rotate(-4deg); }
.gd-45 { flex:1 1 300px; display:flex; flex-direction:column; gap:10px; }
.gd-46 { font:400 12px 'IBM Plex Mono'; letter-spacing:.14em; text-transform:uppercase; color:#e8962e; }
.gd-47 { margin:0; display:flex; gap:16px; align-items:baseline; font:400 40px/1.05 'Peace Sans'; text-transform:uppercase; color:#f6efe0; }
.gd-48 { margin:22px 0 0; display:flex; gap:12px; align-items:baseline; font:400 22px 'Peace Sans'; text-transform:uppercase; color:#f3efe6; }
.gd-49 { font:400 12px 'IBM Plex Mono'; letter-spacing:.1em; color:#e8962e; }
.gd-50 { display:inline-flex; align-self:flex-start; align-items:center; gap:10px; padding:12px 16px; background:#2b2c2c; font:400 13px 'IBM Plex Mono'; color:#d8d3c8; }
.gd-51 { margin:10px 0 0; font:600 17px 'IBM Plex Sans'; color:#f3efe6; }
.gd-52 { display:flex; flex-direction:column; gap:12px; padding:22px 26px; background:#232424; }
.gd-53 { font:400 11px 'IBM Plex Mono'; letter-spacing:.14em; text-transform:uppercase; color:#e8962e; }
.gd-54 { display:flex; flex-direction:column; gap:9px; font:400 15px/1.55 'IBM Plex Sans'; color:#d8d3c8; }
.gd-55 { margin:26px 0 0; display:flex; gap:12px; align-items:baseline; font:400 22px 'Peace Sans'; text-transform:uppercase; color:#f3efe6; }
.gd-56 { display:flex; gap:10px; flex-wrap:wrap; }
.gd-57 { display:inline-flex; align-items:center; gap:10px; padding:12px 16px; background:#2b2c2c; font:400 13px 'IBM Plex Mono'; color:#d8d3c8; }
.gd-58 { margin:8px 0 0; font:400 17px/1.65 'IBM Plex Sans'; color:#e4dfd4; text-wrap:pretty; }
.gd-59 { width:200px; flex:none; position:relative; transform:rotate(3deg); }
.gd-60 { font:400 12px 'IBM Plex Mono'; letter-spacing:.14em; text-transform:uppercase; color:#6e93ad; }
.gd-61 { font:400 12px 'IBM Plex Mono'; letter-spacing:.1em; color:#6e93ad; }
.gd-62 { display:flex; flex-direction:column; gap:10px; padding:22px 26px; background:#232424; font:400 15px/1.6 'IBM Plex Sans'; color:#d8d3c8; }
.gd-63 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px, 100%),1fr)); gap:14px; margin-top:8px; }
.gd-64 { padding:22px; background:#232424; display:flex; flex-direction:column; gap:10px; }
.gd-65 { font:400 12px 'IBM Plex Mono'; color:#6e93ad; }
.gd-66 { font:400 20px 'Peace Sans'; text-transform:uppercase; color:#f3efe6; }
.gd-67 { margin:14px 0 0; font:600 17px 'IBM Plex Sans'; color:#f3efe6; }
.gd-68 { width:200px; flex:none; position:relative; transform:rotate(-3deg); }
.gd-69 { font:400 12px 'IBM Plex Mono'; letter-spacing:.14em; text-transform:uppercase; color:#7fae5c; }
.gd-70 { margin:22px 0 0; font:400 26px 'Peace Sans'; text-transform:uppercase; color:#f3efe6; }
.gd-71 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(160px, 100%),1fr)); gap:20px; margin:12px 0 4px; }
.gd-72 { display:flex; flex-direction:column; gap:12px; }
.gd-73 { position:relative; filter:drop-shadow(0 22px 18px rgba(0,0,0,.55)); }
.gd-74 { position:absolute; left:2%; width:96%; top:27.5%; height:71.3%; object-fit:contain; object-position:bottom; display:block; }
.gd-75 { position:absolute; left:0; right:0; top:4.5%; text-align:center; font:400 20px 'Peace Sans'; letter-spacing:.02em; color:#141311; }
.gd-76 { font:400 12px 'IBM Plex Mono'; letter-spacing:.1em; text-transform:uppercase; color:#7fae5c; }
.gd-77 { margin:16px 0 0; display:flex; gap:12px; align-items:baseline; font:400 20px 'Peace Sans'; text-transform:uppercase; color:#f3efe6; }
.gd-78 { font:400 12px 'IBM Plex Mono'; letter-spacing:.1em; color:#7fae5c; }
.gd-79 { display:flex; flex-direction:column; gap:9px; padding:22px 26px; background:#232424; font:400 15px/1.55 'IBM Plex Sans'; color:#d8d3c8; }
.gd-80 { color:#7fae5c; flex:none; }
.gd-81 { margin-top:8px; padding:24px 28px; background:#e8962e; color:#141311; display:flex; flex-direction:column; gap:10px; }
.gd-82 { font:400 22px 'Peace Sans'; text-transform:uppercase; }
.gd-83 { font:400 15px/1.6 'IBM Plex Sans'; text-wrap:pretty; }
.gd-84 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px, 100%),1fr)); gap:14px; }
.gd-85 { color:#7fae5c; font:400 13px/1.9 'IBM Plex Mono'; flex:none; width:52px; }
.gd-86 { margin:0; font:400 34px/1.1 'Peace Sans'; text-transform:uppercase; color:#f6efe0; }
.gd-87 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px, 100%),1fr)); gap:20px; margin-top:6px; }
.gd-88 { font:400 14px/1.6 'IBM Plex Sans'; color:#d8d3c8; }
.gd-89 { margin:0; font:400 17px/1.65 'IBM Plex Sans'; color:#e4dfd4; text-wrap:pretty; }
.gd-90 { margin:0; font:400 15px/1.6 'IBM Plex Sans'; color:#8f8a80; text-wrap:pretty; }
.gd-91 { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:6px; padding:20px 24px; background:#e8962e; color:#141311; font:400 18px 'Peace Sans'; text-transform:uppercase; }
.gd-92 { display:flex; align-items:center; gap:14px; margin-top:14px; font:400 13px 'IBM Plex Mono'; color:#8f8a80; }
.gd-93 { margin-top:30px; font:400 12px 'IBM Plex Mono'; color:#8f8a80; }
.gd-18:hover { color: #e8962e; }
.gd-50:hover { color: #d8d3c8; }
.gd-57:hover { color: #d8d3c8; }
.gd-91:hover { color: #141311; }

/* ---- hand-written ---- */

/* The mock's content column: flex:1 1 0;max-width:860px;min-width:0;display:flex;flex-direction:column */

.content.guide-main {
  gap: 0;
  padding-top: 0;
}

/* Sidebar table of contents with reading progress (values from the mock's sidebar). */
.toc--guide {
  gap: 8px;
  padding: 4px 0 6px 14px;
}
.toc__list {
  display: flex;
  flex-direction: column;
}
.toc--guide .toc__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  color: #bdb8ae;
}
.toc--guide .toc__item:hover {
  color: #bdb8ae;
}
.toc--guide .toc__bar {
  display: block;
  width: 2px;
  height: 14px;
  flex: none;
  background: #2b2c2c;
}
.toc--guide .toc__item.is-done .toc__bar {
  background: #5d574d;
}
.toc--guide .toc__item.is-active,
.toc--guide .toc__item.is-active:hover {
  color: #f3efe6;
}
.toc--guide .toc__item.is-active .toc__bar {
  background: #e8962e;
}
.toc__progress-label {
  font: 400 11px 'IBM Plex Mono';
  letter-spacing: .1em;
  color: #8f8a80;
}
.toc__progress {
  height: 2px;
  background: #2b2c2c;
}
.toc__progress-fill {
  height: 100%;
  width: 0;
  background: #e8962e;
}

/* No mobile mock: the head title takes the home page's mobile size, and a stage header's text column
   drops under its folder instead of forcing a 300px minimum. */
@media (max-width: 999.98px) {
  .gd-3 {
    font-size: 34px;
  }
  .gd-45 {
    flex-basis: 100%;
    min-width: 0;
  }
}