/* Generated from docs/design/workshop-guide/reference/script.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. */

.sd-1 { display: flex; flex-direction: column; gap: 12px; }
.sd-2 { font: 400 11px "IBM Plex Mono"; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(232, 150, 46); }
.sd-3 { margin: 0px; font: 400 56px / 1 "Peace Sans"; text-transform: uppercase; color: rgb(246, 239, 224); }
.sd-4 { font: 400 18px / 1.4 "IBM Plex Sans"; color: rgb(216, 211, 200); }
.sd-5 { align-self: flex-start; font: 400 12px "IBM Plex Mono"; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(189, 184, 174); background: rgb(43, 44, 44); padding: 7px 12px; }
.sd-6 { filter: drop-shadow(rgba(0, 0, 0, 0.6) 0px 28px 22px); }
.sd-7 { width: 100%; max-height: 300px; object-fit: cover; object-position: center 30%; display: block; }
.sd-8 { display: flex; flex-direction: column; gap: 14px; }
.sd-9 { display: flex; flex-direction: column; }
.sd-10 { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: rgb(35, 36, 36); border-left: 3px solid rgb(110, 147, 173); color: rgb(243, 239, 230); cursor: pointer; }
.sd-11 { font: 400 22px "Peace Sans"; text-transform: uppercase; letter-spacing: 0.02em; }
.sd-12 { font: 400 12px "IBM Plex Mono"; color: rgb(143, 138, 128); }
.sd-13 { margin-left: auto; font: 400 16px "IBM Plex Mono"; color: rgb(143, 138, 128); transform: rotate(90deg); transition: transform 0.2s; }
.sd-14 { padding: 20px 0px 8px; display: flex; flex-direction: column; gap: 16px; }
.sd-15 { padding: 22px 26px; background: rgb(35, 36, 36); display: flex; flex-direction: column; gap: 12px; }
.sd-16 { font: 400 11px "IBM Plex Mono"; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(232, 150, 46); }
.sd-17 { font: 400 15px / 1.7 "IBM Plex Sans"; color: rgb(216, 211, 200); text-wrap: pretty; }
.sd-18 { color: rgb(243, 239, 230); font-weight: 600; }
.sd-19 { display: flex; flex-direction: column; gap: 8px; font: 400 14.5px / 1.6 "IBM Plex Sans"; color: rgb(216, 211, 200); }
.sd-20 { display: flex; gap: 12px; }
.sd-21 { color: rgb(127, 174, 92); flex: 0 0 auto; }
.sd-22 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 14px; }
.sd-23 { background: rgb(35, 36, 36); display: flex; flex-direction: column; }
.sd-24 { background: rgb(30, 31, 31); padding: 16px 12px 0px; display: flex; align-items: flex-end; justify-content: center; height: 200px; }
.sd-25 { max-width: 100%; max-height: 184px; object-fit: contain; display: block; }
.sd-26 { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.sd-27 { font: 400 18px "Peace Sans"; color: rgb(243, 239, 230); }
.sd-28 { font: 400 12.5px / 1.55 "IBM Plex Sans"; color: rgb(143, 138, 128); }
.sd-29 { padding: 18px 22px; background: rgb(35, 36, 36); border-left: 3px solid rgb(232, 150, 46); font: 400 13.5px / 1.7 "IBM Plex Sans"; color: rgb(189, 184, 174); text-wrap: pretty; }
.sd-30 { color: rgb(216, 211, 200); font-weight: 600; }
.sd-31 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.sd-32 { padding: 20px 24px; background: rgb(35, 36, 36); display: flex; flex-direction: column; gap: 10px; }
.sd-33 { font: 400 14px / 1.65 "IBM Plex Sans"; color: rgb(216, 211, 200); }
.sd-34 { display: flex; flex-direction: column; gap: 6px; font: 400 14px / 1.6 "IBM Plex Sans"; color: rgb(216, 211, 200); }
.sd-35 { display: flex; gap: 10px; }
.sd-36 { color: rgb(127, 174, 92); }
.sd-37 { background: rgb(35, 36, 36); overflow-x: auto; }
.sd-38 { display: grid; grid-template-columns: 1.1fr 1.3fr 1.8fr 1.5fr 1fr; min-width: 900px; }
.sd-39 { padding: 14px 16px 10px; font: 500 10.5px "IBM Plex Mono"; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(232, 150, 46); border-bottom: 1px solid rgb(58, 58, 58); }
.sd-40 { display: contents; }
.sd-41 { padding: 14px 16px; border-bottom: 1px solid rgb(43, 44, 44); }
.sd-42 { font: 400 15px "Peace Sans"; color: rgb(110, 147, 173); }
.sd-43 { margin-top: 3px; font: 400 10.5px "IBM Plex Mono"; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(143, 138, 128); }
.sd-44 { padding: 14px 16px; border-bottom: 1px solid rgb(43, 44, 44); font: 400 13px / 1.6 "IBM Plex Sans"; color: rgb(216, 211, 200); }
.sd-45 { padding: 14px 16px; border-bottom: 1px solid rgb(43, 44, 44); display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.sd-46 { font: 500 11px "IBM Plex Sans"; color: rgb(189, 184, 174); background: rgb(43, 44, 44); padding: 3px 9px; white-space: nowrap; }
.sd-47 { padding: 26px 28px; background: rgb(35, 36, 36); display: flex; flex-direction: column; gap: 16px; }
.sd-48 { display: flex; align-items: flex-start; gap: 16px; }
.sd-49 { flex: 0 0 auto; min-width: 36px; height: 34px; display: grid; place-items: center; background: rgb(110, 147, 173); color: rgb(20, 19, 17); font: 400 18px "Peace Sans"; }
.sd-50 { display: flex; flex-direction: column; gap: 3px; }
.sd-51 { font: 400 22px / 1.15 "Peace Sans"; text-transform: uppercase; color: rgb(110, 147, 173); }
.sd-52 { font: 400 11px "IBM Plex Mono"; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(143, 138, 128); }
.sd-53 { font: 400 14.5px / 1.7 "IBM Plex Sans"; color: rgb(216, 211, 200); text-wrap: pretty; }
.sd-54 { border-left: 2px solid rgb(74, 71, 68); padding: 4px 0px 4px 18px; display: flex; flex-direction: column; gap: 4px; }
.sd-55 { font: italic 400 14px / 1.6 "IBM Plex Sans"; color: rgb(189, 199, 222); }
.sd-56 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.sd-57 { display: block; aspect-ratio: 16 / 10; background: url("../assets/script/img06.webp") center center / cover rgb(30, 31, 31); cursor: zoom-in; }
.sd-58 { display: block; aspect-ratio: 16 / 10; background: url("../assets/script/img07.webp") center center / cover rgb(30, 31, 31); cursor: zoom-in; }
.sd-59 { display: block; aspect-ratio: 16 / 10; background: url("../assets/script/img08.webp") center center / cover rgb(30, 31, 31); cursor: zoom-in; }
.sd-60 { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-61 { font: 500 11.5px "IBM Plex Sans"; color: rgb(189, 184, 174); background: rgb(43, 44, 44); padding: 5px 12px; }
.sd-62 { padding: 12px 18px; text-align: center; font: 400 14px "Peace Sans"; letter-spacing: 0.04em; color: rgb(232, 150, 46); border: 1px solid rgba(232, 150, 46, 0.4); background: rgba(232, 150, 46, 0.08); }
.sd-63 { padding: 12px 18px; text-align: center; font: 400 14px "Peace Sans"; letter-spacing: 0.04em; color: rgb(243, 239, 230); border: 1px solid rgba(110, 147, 173, 0.4); background: rgba(110, 147, 173, 0.1); }
.sd-64 { display: block; aspect-ratio: 16 / 10; background: url("../assets/script/img09.webp") center center / cover rgb(30, 31, 31); cursor: zoom-in; }
.sd-65 { display: block; aspect-ratio: 16 / 10; background: url("../assets/script/img10.webp") center center / cover rgb(30, 31, 31); cursor: zoom-in; }
.sd-66 { display: block; aspect-ratio: 16 / 10; background: url("../assets/script/img11.webp") center center / cover rgb(30, 31, 31); cursor: zoom-in; }
.sd-67 { display: block; aspect-ratio: 16 / 10; background: url("../assets/script/img12.webp") center center / cover rgb(30, 31, 31); cursor: zoom-in; }
.sd-68 { display: block; aspect-ratio: 16 / 10; background: url("../assets/script/img13.webp") center center / cover rgb(30, 31, 31); cursor: zoom-in; }
.sd-69 { display: block; aspect-ratio: 16 / 10; background: url("../assets/script/img14.webp") center center / cover rgb(30, 31, 31); cursor: zoom-in; }
.sd-70 { display: block; aspect-ratio: 16 / 10; background: url("../assets/script/img15.webp") center center / cover rgb(30, 31, 31); cursor: zoom-in; }
.sd-71 { display: block; aspect-ratio: 16 / 10; background: url("../assets/script/img16.webp") center center / cover rgb(30, 31, 31); cursor: zoom-in; }
.sd-72 { display: block; aspect-ratio: 16 / 10; background: url("../assets/script/img17.webp") center center / cover rgb(30, 31, 31); cursor: zoom-in; }
.sd-73 { display: block; aspect-ratio: 16 / 10; background: url("../assets/script/img18.webp") center center / cover rgb(30, 31, 31); cursor: zoom-in; }
.sd-74 { display: block; aspect-ratio: 16 / 10; background: url("../assets/script/img19.webp") center center / cover rgb(30, 31, 31); cursor: zoom-in; }
.sd-75 { display: block; aspect-ratio: 16 / 10; background: url("../assets/script/img20.webp") center center / cover rgb(30, 31, 31); cursor: zoom-in; }
.sd-76 { display: block; aspect-ratio: 16 / 10; background: url("../assets/script/img21.webp") center center / cover rgb(30, 31, 31); cursor: zoom-in; }
.sd-77 { display: block; aspect-ratio: 16 / 10; background: url("../assets/script/img22.webp") center center / cover rgb(30, 31, 31); cursor: zoom-in; }
.sd-78 { display: block; aspect-ratio: 16 / 10; background: url("../assets/script/img23.webp") center center / cover rgb(30, 31, 31); cursor: zoom-in; }
.sd-79 { display: block; aspect-ratio: 16 / 10; background: url("../assets/script/img24.webp") center center / cover rgb(30, 31, 31); cursor: zoom-in; }
.sd-80 { display: block; aspect-ratio: 16 / 10; background: url("../assets/script/img25.webp") center center / cover rgb(30, 31, 31); cursor: zoom-in; }
.sd-81 { display: block; aspect-ratio: 16 / 10; background: url("../assets/script/img26.webp") center center / cover rgb(30, 31, 31); cursor: zoom-in; }
.sd-82 { margin-top: 30px; padding: 36px 0px 0px; border-top: 1px solid rgb(43, 44, 44); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.sd-83 { font: 400 32px "Peace Sans"; text-transform: uppercase; color: rgb(110, 147, 173); }
.sd-84 { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 24px; background: rgb(232, 150, 46); color: rgb(20, 19, 17); font: 400 18px "Peace Sans"; text-transform: uppercase; }
.sd-5:hover { color: rgb(189, 184, 174); }
.sd-10:hover { color: rgb(243, 239, 230); }
.sd-84:hover { color: rgb(20, 19, 17); }

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

/* The mock's content column: flex: 1 1 0px; max-width: 1100px; min-width: 0px; display: flex; flex-direction: column; gap: 28px; padding-top: 28px; */

/* Collapsible sections. The mock was captured with every section open; the closed state is these rules. */
.doc-section__body[hidden] {
  display: none;
}
.doc-section__head {
  width: 100%;
  text-align: left;
}
.doc-section__head[aria-expanded="false"] .doc-section__chev {
  transform: rotate(0deg);
}

/* Sidebar table of contents. Like the guide's, it follows the reading position (pages/script.js):
   the current section is highlighted, the ones above it keep a dark bar. Colours from the mock's
   sidebar; its links keep their colour on hover. */
.toc--script {
  gap: 6px;
  padding: 4px 0 6px 14px;
}
.toc--script .toc__item,
.toc--script .toc__item:hover {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  color: #bdb8ae;
}
.toc--script .toc__bar {
  display: block;
  width: 2px;
  height: 14px;
  background: #3a3a3a;
}
.toc--script .toc__item.is-done .toc__bar {
  background: #5d574d;
}
.toc--script .toc__item.is-active,
.toc--script .toc__item.is-active:hover {
  color: #f3efe6;
}
.toc--script .toc__item.is-active .toc__bar {
  background: #6e93ad;
}

/* Шапка секции на телефоне складывается в две строки: заголовок своей, чипсы и шеврон под ним.
   Под 1000px `.content` несёт `overflow-wrap: anywhere` (site.css) — правило нарочное, без него
   длинное русское слово раздувает плитку на 320-пиксельном экране, — но в одной flex-строке с
   чипсами оно рвало заголовок ПОСЕРЕДИНЕ слова: «ВВОДН / ЫЕ». Замерено с телефона 22.09.2026.
   Селекторы структурные: имена sd-NN печатает генератор из мока и перенумеровывает при сборке. */
@media (max-width: 999.98px) {
  .doc-section__head {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .doc-section__head > span:first-child {
    flex: 1 0 100%;
    /* Заголовок из одного слова переносить нечем и незачем: он получил всю ширину строки. */
    overflow-wrap: normal;
  }
}