@charset "utf-8";

/* Отдельная прокручиваемая поверхность; рабочие страницы не подключают этот файл. */
.scroll-page {
    height: auto;
    min-height: 100%;
    background: var(--clr-back-dark);
    color: var(--clr-text-light);
    line-height: 1.6;
}
.scroll-page header { line-height: normal; }
.scroll-page h1, .scroll-page h2, .scroll-page h3 { color: var(--clr-text-light2); }
.scroll-page main { height: auto; }
.scroll-page a:focus-visible { outline: 2px solid #9fc4e8; outline-offset: 5px; }

/* Ограничение ширины и адаптивные композиции. Flex-утилиты взяты из livepy.css. */
.width-bounded { max-width: 1160px; margin-inline: auto; box-sizing: border-box; }
.text-bounded { max-width: 700px; }
.split-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.equal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.three-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.section-space { padding-block: 4.5rem; }
.centered-screen { min-height: 100svh; justify-content: center; padding-block: 2rem; box-sizing: border-box; }
.centered-screen > p { text-align: center; }
.overflow-auto { overflow: auto; }

/* Крупная и поясняющая типографика. */
.text-display { font-size: clamp(2.4rem, 4.3vw, 3.7rem); line-height: 1.1; letter-spacing: -1px; }
.text-heading { font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.2; letter-spacing: -0.5px; }
.text-lead { font-size: 1.1rem; color: var(--clr-text); max-width: 650px; }
.text-eyebrow { font-size: 0.8rem; letter-spacing: 0.8px; color: var(--clr-text-mid); }
.text-accent { color: #9fc4e8; }
.text-blue { color: #a9c8e5; }
.text-purple { color: #bcc6d4; }
.text-green { color: #b0c7dd; }
.text-muted { color: var(--clr-text-mid); }
.text-list { padding-left: 1.2rem; }
.text-list li + li { margin-top: 0.5rem; }

/* Рамки, разделители и цветные поверхности. */
.border-top { border-top: 1px solid var(--clr-border); }
.border-bottom { border-bottom: 1px solid var(--clr-border); }
.rounded-frame { border: 1px solid var(--clr-border-light); border-radius: 12px; background: var(--clr-back); overflow: hidden; }
.raised { box-shadow: 0 20px 60px #181b20; }
.soft-fill { background: #2b3440; }
.inset-line { background: #2c3540; border-radius: 6px; padding: 0.6rem 0.8rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #9fc4e8; }

/* Крупные ссылки и кнопки. */
.scroll-page :is(main, footer) a.btn { padding: 0.8rem 1.1rem; gap: 0.6rem; border-radius: 6px; line-height: 1.3; }
.scroll-page a.accent-fill { color: #172331; background: #9fc4e8; box-shadow: none; font-weight: bold; }
.scroll-page a.accent-fill:hover { background: #bfd8ef; }
.scroll-page a.outlined { background: transparent; box-shadow: 0 0 0 1px var(--clr-border-focus); }
.scroll-page a.text-link { text-decoration-style: solid; text-underline-offset: 0.3em; }

/* Текстовые иллюстрации с кодом и табличными результатами. */
.code-lines { font: 0.9rem / 1.9 ui-monospace, SFMono-Regular, Consolas, monospace; margin: 0; overflow: auto; }
.lined-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.lined-table caption { text-align: left; padding-bottom: 0.8rem; }
.lined-table th, .lined-table td { text-align: center; padding: 0.7rem 0.5rem; border-bottom: 1px solid var(--clr-border); }
.lined-table th:first-child { text-align: left; white-space: nowrap; }
.lined-table thead { background: #303844; }

@media (max-width: 800px) {
    .split-grid, .three-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .section-space { padding-block: 3rem; }
}
@media (max-width: 420px) {
    .text-display { font-size: 2.3rem; }
    .scroll-page .pad2 { padding: 1.2rem; }
    .code-lines { font-size: 0.8rem; }
}