/* 📁НАЧАЛО ФАЙЛА css/style.css v2.1 */

@layer reset, base, layout, components, utilities;

@layer reset {
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    img, picture, video, canvas, svg { display: block; max-width: 100%; }
    input, button, textarea, select { font: inherit; }
    ul, ol { list-style: none; }
    html { scroll-behavior: smooth; }
    body { min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5; }
    a { text-decoration: none; color: inherit; } /* Базовый сброс для ссылок */
    table { border-collapse: collapse; border-spacing: 0; }
}

@layer base {
    :root {
        --color-primary: oklch(65% 0.25 260); 
        --color-secondary: oklch(75% 0.18 150);
        --color-accent: oklch(70% 0.22 30);
        --color-text: oklch(20% 0 0); 
        --color-text-muted: oklch(45% 0 0); 
        --color-background: oklch(98% 0 0); 
        --color-surface: oklch(100% 0 0); 
        --color-border: oklch(85% 0 0); 
        --color-focus-ring: oklch(70% 0.25 260 / 0.7);
        --color-primary-tint: oklch(from var(--color-primary) l c h / 0.1);
        --color-secondary-tint: oklch(from var(--color-secondary) l c h / 0.15);
        --color-accent-tint: oklch(from var(--color-accent) l c h / 0.1);
        --color-code-background: oklch(94% 0 0);
        --color-mark-background: oklch(90% 0.15 90);
        --color-success: oklch(65% 0.2 130);
        --color-warning: oklch(75% 0.2 60);
        --color-danger: oklch(60% 0.25 25);
        --color-info: oklch(70% 0.15 230);

        --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        --font-family-heading: var(--font-family-base); 
        --font-family-code: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
        --font-size-base: 1rem; 
        --font-size-sm: 0.875rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem;
        --font-size-h1: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); 
        --font-size-h2: clamp(1.75rem, 1.375rem + 1.875vw, 3rem);
        --font-size-h3: clamp(1.5rem, 1.25rem + 1.25vw, 2.5rem);
        --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-xxl: 3rem;
        --border-radius-sm: 0.25rem; --border-radius-md: 0.5rem; --border-radius-lg: 0.75rem;
        --transition-duration: 0.2s;
        --focus-ring-width: 2px; --focus-ring-offset: 2px;
        accent-color: var(--color-primary);
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --color-primary: oklch(70% 0.23 260); --color-secondary: oklch(65% 0.16 150); --color-accent: oklch(75% 0.2 30);
            --color-text: oklch(95% 0 0); --color-text-muted: oklch(65% 0 0);
            --color-background: oklch(15% 0 0); --color-surface: oklch(20% 0 0); --color-border: oklch(35% 0 0);
            --color-focus-ring: oklch(70% 0.23 260 / 0.7);
            --color-primary-tint: oklch(from var(--color-primary) l c h / 0.15);
            --color-secondary-tint: oklch(from var(--color-secondary) l c h / 0.2);
            --color-accent-tint: oklch(from var(--color-accent) l c h / 0.15);
            --color-code-background: oklch(25% 0 0);
            --color-mark-background: oklch(70% 0.15 90 / 0.7);
            --color-success: oklch(70% 0.18 130); --color-warning: oklch(80% 0.18 60); 
            --color-danger: oklch(65% 0.23 25); --color-info: oklch(75% 0.13 230);
        }
    }

    body { font-family: var(--font-family-base); font-size: var(--font-size-base); color: var(--color-text); background-color: var(--color-background); display: flex; flex-direction: column; }
    h1, h2, h3, h4, h5, h6 { 
        font-family: var(--font-family-heading); 
        line-height: 1.2; 
        margin-block: var(--spacing-lg) var(--spacing-md); 
        font-weight: 600;
        color: var(--color-text); /* Явное указание цвета для заголовков */
        text-decoration: none; /* Убираем возможное подчеркивание от наследования */
    }
    h1 { font-size: var(--font-size-h1); color: var(--color-primary); /* Главный H1 страницы может быть акцентным */ } 
    .page-header h1 { color: var(--color-primary); } /* Для заголовка в шапке */
    section.element-showcase > h2 { color: var(--color-text); } /* Заголовки секций обычным цветом текста */


    p { margin-block-end: var(--spacing-md); max-width: 75ch; }
    .example-content p:last-child, .element-note:last-child, .element-example > p:last-child { margin-block-end: 0; }
    
    /* Стили для ссылок */
    a { 
        color: var(--color-primary); 
        text-decoration: underline; 
        text-decoration-thickness: 1px; 
        text-underline-offset: 0.2em; 
        transition: color var(--transition-duration) ease, text-decoration-color var(--transition-duration) ease; 
    }
    a:hover, a:focus-visible { 
        color: var(--color-accent); 
        text-decoration-color: var(--color-accent); 
    }
    /* Если ссылка содержит только img, убираем подчеркивание */
    a:has(> img:only-child) {
        text-decoration: none;
    }


    :focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--border-radius-sm); }
    hr { border: 0; border-block-start: 1px solid var(--color-border); margin-block: var(--spacing-lg); }
    ::placeholder { color: var(--color-text-muted); opacity: 0.7; }
}

@layer layout {
    .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--spacing-md); }
    .page-header { background-color: var(--color-surface); padding-block: var(--spacing-lg); border-block-end: 1px solid var(--color-border); box-shadow: 0 2px 4px oklch(0% 0 0 / 0.05); }
    /* .page-header h1 уже стилизован в @layer base */
    .page-header .tagline { font-size: var(--font-size-lg); color: var(--color-text-muted); margin-block: var(--spacing-xs) 0; }
    .main-content { padding-block: var(--spacing-xl); flex-grow: 1; }
    .main-content section.element-showcase { margin-block-end: var(--spacing-xxl); padding: var(--spacing-lg); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--border-radius-md); }
    .main-content section.element-showcase:last-of-type { margin-block-end: 0; }
    .main-content section.element-showcase > h2:first-child { margin-block-start: 0; }
    .page-footer { background-color: var(--color-text); color: var(--color-background); padding-block: var(--spacing-lg); text-align: center; font-size: var(--font-size-sm); }
    .page-footer p { margin-block-end: var(--spacing-xs); max-width: none; } .page-footer p:last-child { margin-block-end: 0; }
    .page-footer a { color: var(--color-accent); } .page-footer a:hover, .page-footer a:focus-visible { color: oklch(from var(--color-accent) l c h / 0.8); }
}

@layer components {
    /* Общие стили для демонстрации */
    .skip-link { position: absolute; top: -9999px; left: 0; background-color: var(--color-accent); color: var(--color-text); padding: var(--spacing-sm) var(--spacing-md); z-index: 9999; text-decoration: none; border-radius: 0 0 var(--border-radius-sm) 0; }
    .skip-link:focus { top: 0; }
    @media (prefers-color-scheme: dark) { .skip-link { color: var(--color-background); } }

    .section-description { font-size: var(--font-size-lg); color: var(--color-text-muted); margin-block: var(--spacing-xs) var(--spacing-lg); max-width: 80ch; }
    .element-example { background-color: var(--color-background); padding: var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); margin-block-end: var(--spacing-lg); }
    .element-example:last-of-type { margin-block-end: 0; }
    
    .element-title { /* Это h3 внутри .element-example */
        font-size: var(--font-size-xl); 
        color: var(--color-primary); /* Явный цвет для .element-title */
        text-decoration: none; /* Убираем возможное подчеркивание */
        margin-block: 0 var(--spacing-md); 
        font-weight: 500; 
    }

    .example-content { padding: var(--spacing-md); border: 1px dashed var(--color-border); border-radius: var(--border-radius-sm); margin-block-end: var(--spacing-md); }
    .element-example .example-content:last-child { margin-block-end: 0; }
    .example-content:has(> p:only-child), .example-content:has(> div:only-child > p:only-child) { padding: 0; border: none; }
    .example-content:has(> h1:first-child) > h1, .example-content:has(> h1:first-child) > h2, .example-content:has(> h1:first-child) > h3, .example-content:has(> h1:first-child) > h4, .example-content:has(> h1:first-child) > h5, .example-content:has(> h1:first-child) > h6 { margin-block-start: 0; }
    .element-note { font-size: var(--font-size-sm); color: var(--color-text-muted); background-color: var(--color-surface); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--border-radius-sm); border-inline-start: 3px solid var(--color-secondary); margin-block-start: var(--spacing-md); }
    .element-note code { font-size: inherit; } /* Код внутри примечаний */
    .centered-content { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); }

    /* Структурные элементы и текст */
    .demo-div-span .demo-div { border: 1px solid var(--color-primary); padding: var(--spacing-sm); margin-block-end: var(--spacing-sm); background-color: var(--color-primary-tint); }
    .demo-div-span .demo-span { border: 1px solid var(--color-secondary); padding: 0 var(--spacing-xs); background-color: var(--color-secondary-tint); border-radius: var(--border-radius-sm); }
    .semantic-layout-demo { display: grid; grid-template-areas: "header" "nav" "main-aside" "footer"; gap: var(--spacing-sm); border: 2px solid var(--color-accent); padding: var(--spacing-sm); border-radius: var(--border-radius-sm); background-color: var(--color-accent-tint); }
    .semantic-layout-demo > * { border: 1px dashed var(--color-text-muted); padding: var(--spacing-sm); border-radius: var(--border-radius-sm); background-color: var(--color-surface); color: var(--color-text); font-size: var(--font-size-sm); text-align: center; }
    .semantic-layout-demo .demo-header { grid-area: header; } .semantic-layout-demo .demo-nav { grid-area: nav; }
    .semantic-layout-demo .demo-main-aside-wrapper { grid-area: main-aside; display: grid; grid-template-columns: 3fr 1fr; gap: var(--spacing-sm); padding: 0; border: none; background: none; }
    .semantic-layout-demo .demo-footer { grid-area: footer; }
    
    /* Текстовое форматирование */
    /* Базовый стиль для code, если он не является частью ссылки */
    :not(a) > code, :not(a) > * > code { 
        background-color: var(--color-code-background); 
        padding: 0.1em 0.3em; 
        border-radius: var(--border-radius-sm); 
        font-family: var(--font-family-code); 
        font-size: 0.9em; 
        color: var(--color-accent); /* Основной цвет для code */
        text-decoration: none; /* Убираем возможное подчеркивание */
    }
    /* Если code внутри ссылки, он наследует цвет и подчеркивание от ссылки (стандартное поведение) */
    /* a code { ... стили не нужны, наследует от <a> ... } */


    .code-block, pre[class*="language-"] { background-color: var(--color-code-background); font-family: var(--font-family-code); padding: var(--spacing-md); border-radius: var(--border-radius-sm); overflow-x: auto; font-size: 0.9em; line-height: 1.4; border: 1px solid var(--color-border); }
    .code-block code, pre[class*="language-"] code { 
        background-color: transparent; /* Код внутри pre не должен иметь свой фон */
        padding: 0; 
        font-size: inherit; 
        color: inherit; /* Наследует цвет от pre, который может быть --color-text */
        text-decoration: none;
    }
    pre.code-block { color: var(--color-text); /* Явный цвет текста для pre блоков */ }


    mark, .mark { background-color: var(--color-mark-background); padding: 0.1em 0.2em; border-radius: var(--border-radius-sm); color: var(--color-text); }
    blockquote { margin-inline-start: var(--spacing-md); padding-inline-start: var(--spacing-md); border-inline-start: 3px solid var(--color-primary); color: var(--color-text-muted); font-style: italic; }
    blockquote footer { margin-block-start: var(--spacing-sm); font-style: normal; font-size: var(--font-size-sm); }
    blockquote cite { font-style: normal; }
    abbr[title] { text-decoration: underline dotted; cursor: help; }
    del { text-decoration: line-through; color: var(--color-text-muted); background-color: oklch(80% 0.05 0 / 0.2); }
    ins { text-decoration: none; background-color: oklch(80% 0.1 140 / 0.2); padding: 0.1em 0.2em; border-radius: var(--border-radius-sm); }

    /* Ссылки и навигация */
    .button-link { display: inline-block; padding: var(--spacing-sm) var(--spacing-md); background-color: var(--color-primary); color: var(--color-surface) !important; /* Важно для переопределения цвета текста */ text-decoration: none !important; /* Важно для переопределения подчеркивания */ border-radius: var(--border-radius-sm); transition: background-color var(--transition-duration); }
    .button-link:hover, .button-link:focus-visible { background-color: oklch(from var(--color-primary) calc(l - 0.1) c h); color: var(--color-surface) !important; }
    .demo-main-nav ul, .breadcrumbs ol { display: flex; gap: var(--spacing-md); padding-inline-start: 0; }
    .demo-main-nav a[aria-current="page"] { font-weight: bold; color: var(--color-accent); }
    .breadcrumbs { font-size: var(--font-size-sm); }
    .breadcrumbs li:not(:last-child)::after { content: "/"; margin-inline: var(--spacing-xs); color: var(--color-text-muted); }
    .breadcrumbs a { text-decoration: underline; }
    .breadcrumbs [aria-current="page"] { color: var(--color-text-muted); text-decoration: none; }

    /* Списки */
    .example-content ul, .example-content ol { margin-inline-start: var(--spacing-md); }
    .example-content ul { list-style-type: disc; } .example-content ul ul { list-style-type: circle; }
    .example-content ol { list-style-type: decimal; } 
    .example-content dl dt { font-weight: bold; margin-block-start: var(--spacing-sm); }
    .example-content dl dd { margin-inline-start: var(--spacing-md); }

    /* Формы */
    .demo-form { display: flex; flex-direction: column; gap: var(--spacing-lg); }
    .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: var(--spacing-md); }
    .demo-form label { display: block; margin-block-end: var(--spacing-xs); font-weight: 500; color: var(--color-text); text-decoration: none; /* Защита для label */ }
    .demo-form label code { /* Код внутри label, не являющийся ссылкой */
        color: var(--color-accent); 
        background-color: var(--color-code-background);
        font-family: var(--font-family-code);
        font-size: 0.9em;
        padding: 0.1em 0.3em;
        border-radius: var(--border-radius-sm);
        text-decoration: none; /* Явно убираем подчеркивание */
    }

    .demo-form input[type="text"], .demo-form input[type="password"], .demo-form input[type="email"],
    .demo-form input[type="number"], .demo-form input[type="tel"], .demo-form input[type="url"],
    .demo-form input[type="search"], .demo-form input[type="date"], .demo-form input[type="datetime-local"],
    .demo-form input[type="month"], .demo-form input[type="week"], .demo-form input[type="time"],
    .demo-form textarea, .demo-form select, .demo-form input[list] {
        width: 100%; padding: var(--spacing-sm); border: 1px solid var(--color-border); border-radius: var(--border-radius-sm);
        background-color: var(--color-surface); color: var(--color-text);
        transition: border-color var(--transition-duration), box-shadow var(--transition-duration);
    }
    .demo-form input:focus, .demo-form textarea:focus, .demo-form select:focus {
        border-color: var(--color-primary); box-shadow: 0 0 0 var(--focus-ring-offset) var(--color-focus-ring); outline: none;
    }
    .demo-form input[type="color"] { padding: 0; height: calc(var(--font-size-base) * 1.5 + var(--spacing-sm) * 2 + 2px); min-width: 50px; } 
    .demo-form input[type="range"] { padding: 0; vertical-align: middle; }
    .demo-form output { display: inline-block; vertical-align: middle; margin-inline-start: var(--spacing-xs); font-weight: bold; }
    .form-fieldset { border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); padding: var(--spacing-md); }
    .form-fieldset legend { font-weight: bold; padding-inline: var(--spacing-xs); color: var(--color-primary); }
    .form-fieldset label { font-weight: normal; margin-block-end: var(--spacing-xs); display: flex; align-items: center; gap: var(--spacing-xs); }
    .demo-form input[type="radio"], .demo-form input[type="checkbox"] { margin-inline-end: var(--spacing-xs); width: auto; }
    .form-buttons { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-block-start: var(--spacing-md); }
    .form-buttons button, .form-buttons input[type="submit"] {
        padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-primary); background-color: var(--color-primary);
        color: var(--color-surface); border-radius: var(--border-radius-sm); cursor: pointer; transition: background-color var(--transition-duration);
    }
    .form-buttons button:hover, .form-buttons input[type="submit"]:hover,
    .form-buttons button:focus-visible, .form-buttons input[type="submit"]:focus-visible { background-color: oklch(from var(--color-primary) calc(l - 0.1) c h); }
    .form-buttons button[type="reset"], .form-buttons input[type="reset"] { background-color: var(--color-text-muted); border-color: var(--color-text-muted); }
    .form-buttons button[type="reset"]:hover, .form-buttons button[type="reset"]:focus-visible { background-color: oklch(from var(--color-text-muted) calc(l - 0.1) c h); }
    .form-buttons button[disabled], .form-buttons input[disabled] { background-color: var(--color-border); border-color: var(--color-border); color: var(--color-text-muted); cursor: not-allowed; }
    .demo-form progress, .demo-form meter { width: 100%; height: 1.5em; vertical-align: middle; }

    /* Медиа */
    figure { margin: 0; }
    figure figcaption { font-size: var(--font-size-sm); color: var(--color-text-muted); text-align: center; margin-block-start: var(--spacing-xs); }
    video, audio { max-width: 100%; }

    /* Таблицы */
    .demo-table { width: 100%; border: 1px solid var(--color-border); margin-block-start: var(--spacing-md); }
    .demo-table caption { font-size: var(--font-size-lg); font-weight: bold; padding: var(--spacing-sm); color: var(--color-primary); caption-side: bottom; margin-block-start: var(--spacing-sm); }
    .demo-table th, .demo-table td { border: 1px solid var(--color-border); padding: var(--spacing-sm); text-align: left; vertical-align: top; }
    .demo-table th { background-color: var(--color-surface); font-weight: bold; }
    .demo-table tbody tr:nth-child(odd) { background-color: oklch(from var(--color-background) calc(l - 0.02) c h); } 
    .demo-table tfoot td { font-weight: bold; background-color: var(--color-surface); }

    /* Интерактивные элементы и UI паттерны */
    details { border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); margin-block-end: var(--spacing-sm); }
    details summary { cursor: pointer; padding: var(--spacing-sm) var(--spacing-md); font-weight: 500; background-color: var(--color-surface); border-radius: var(--border-radius-sm); list-style-position: inside; } 
    details summary:hover { background-color: var(--color-primary-tint); }
    details[open] summary { border-bottom: 1px solid var(--color-border); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    details > :not(summary) { padding: var(--spacing-md); }
    
    dialog { border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); padding: var(--spacing-lg); box-shadow: 0 5px 15px oklch(0% 0 0 / 0.1); min-width: min(90vw, 400px); }
    dialog::backdrop { background-color: oklch(0% 0 0 / 0.3); backdrop-filter: blur(2px); }
    dialog h3 { margin-block-start: 0; }
    .dialog-menu { display: flex; justify-content: flex-end; gap: var(--spacing-sm); padding: 0; margin-block-start: var(--spacing-lg); }
    .dialog-menu button { padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--border-radius-sm); border: 1px solid transparent; cursor: pointer; }
    .dialog-menu button[value="cancel"] { background-color: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
    .dialog-menu button[value="cancel"]:hover { background-color: var(--color-border); }
    .dialog-menu button.button-primary { background-color: var(--color-primary); color: var(--color-surface); }
    .dialog-menu button.button-primary:hover { background-color: oklch(from var(--color-primary) calc(l - 0.1) c h); }

    .cards-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--spacing-lg); }
    .card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--border-radius-md); overflow: hidden; display: flex; flex-direction: column; }
    .card-image { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
    .card-content { padding: var(--spacing-md); flex-grow: 1; display: flex; flex-direction: column; }
    .card-title { font-size: var(--font-size-lg); margin-block: 0 var(--spacing-sm); color: var(--color-text); text-decoration: none; } /* Явный цвет и сброс для заголовка карточки */
    .card-text { font-size: var(--font-size-base); margin-block-end: var(--spacing-md); flex-grow: 1; }
    .card-action { margin-top: auto; }

    .alerts-container { display: flex; flex-direction: column; gap: var(--spacing-md); }
    .alert { padding: var(--spacing-md); border-radius: var(--border-radius-sm); border: 1px solid transparent; }
    .alert strong { font-weight: 600; }
    .alert-info { background-color: oklch(from var(--color-info) l c h / 0.15); border-color: var(--color-info); color: oklch(from var(--color-info) calc(l - 0.3) c h); }
    .alert-success { background-color: oklch(from var(--color-success) l c h / 0.15); border-color: var(--color-success); color: oklch(from var(--color-success) calc(l - 0.3) c h); }
    .alert-warning { background-color: oklch(from var(--color-warning) l c h / 0.15); border-color: var(--color-warning); color: oklch(from var(--color-warning) calc(l - 0.4) c h); }
    .alert-danger { background-color: oklch(from var(--color-danger) l c h / 0.15); border-color: var(--color-danger); color: oklch(from var(--color-danger) calc(l - 0.2) c h); }
    @media(prefers-color-scheme: dark) {
        .alert-info { color: oklch(from var(--color-info) calc(l + 0.2) c h); }
        .alert-success { color: oklch(from var(--color-success) calc(l + 0.2) c h); }
        .alert-warning { color: oklch(from var(--color-warning) calc(l + 0.2) c h); }
        .alert-danger { color: oklch(from var(--color-danger) calc(l + 0.3) c h); }
    }

    .badges-container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm); }
    .badge { display: inline-block; padding: var(--spacing-xs) var(--spacing-sm); font-size: var(--font-size-sm); font-weight: bold; line-height: 1; color: var(--color-surface); background-color: var(--color-text-muted); border-radius: var(--border-radius-lg); text-align: center; }
    .badge-primary { background-color: var(--color-primary); }
    .tag { display: inline-block; padding: var(--spacing-xs) var(--spacing-sm); font-size: var(--font-size-sm); background-color: var(--color-border); border-radius: var(--border-radius-sm); }
    .tag-highlight { background-color: var(--color-accent); color: var(--color-surface); }

    .loaders-container { display: flex; gap: var(--spacing-xl); align-items: center; justify-content: center; min-height: 50px; }
    .loader-spinner { width: 3em; height: 3em; border: 0.3em solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 1s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .loader-dots div { width: 0.8em; height: 0.8em; background-color: var(--color-primary); border-radius: 50%; display: inline-block; animation: bounce 1.4s infinite ease-in-out both; }
    .loader-dots div:nth-child(1) { animation-delay: -0.32s; } .loader-dots div:nth-child(2) { animation-delay: -0.16s; }
    @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } }

    .pagination ol { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); padding-inline-start:0; }
    .pagination .page-link { display: inline-block; min-width: 2.5em; height: 2.5em; padding: 0 var(--spacing-sm); line-height: 2.5em; text-align: center; text-decoration: none; border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); background-color: var(--color-surface); }
    .pagination .page-link:hover, .pagination .page-link:focus-visible { background-color: var(--color-primary-tint); border-color: var(--color-primary); }
    .pagination .page-link.active { background-color: var(--color-primary); color: var(--color-surface); border-color: var(--color-primary); }
    .pagination .page-ellipsis { color: var(--color-text-muted); padding: 0 var(--spacing-sm); line-height: 2.5em; }

    /* CSS Демонстрации */
    .aspect-ratio-box { width: clamp(150px, 50%, 300px); background-color: var(--color-primary-tint); aspect-ratio: var(--aspect-ratio, 16/9); display: flex; align-items: center; justify-content: center; font-weight: bold; border: 1px solid var(--color-primary); margin-block-end: var(--spacing-sm); }
    .scroll-snap-container { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; width: 100%; max-width: 500px; height: 150px; border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); }
    .scroll-snap-item { flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-lg); font-weight: bold; color: var(--color-text); }
    .logical-props-demo { background-color: var(--color-accent-tint); padding-block: var(--spacing-md); padding-inline: var(--spacing-lg); margin-block-start: var(--spacing-sm); border: 2px dashed var(--color-accent); border-inline-start: 5px solid var(--color-accent); border-radius: var(--border-radius-sm); }
}

@layer utilities {
    .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
}
/* 📁КОНЕЦ ФАЙЛА css/style.css v2.1 */