:root {
    color-scheme:light;
    --ink:#211d2d;
    --muted:#696274;
    --accent:#8b3dff;
    --accent-soft:#f2e9ff;
    --surface:#fff;
}

* { box-sizing:border-box; }

html {
    min-height:100%;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
}

html.promo-viewer-open { overflow:hidden; }

body {
    margin:0;
    min-height:100vh;
    overflow-x:hidden;
    font-family:Arial, sans-serif;
    color:var(--ink);
    background:
        radial-gradient(circle at 12% 20%, rgba(188, 138, 255, .14), transparent 28rem),
        radial-gradient(circle at 88% 68%, rgba(255, 148, 183, .11), transparent 26rem),
        #f8f7fc;
}

button { font:inherit; }

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.promo-header {
    height:68px;
    display:flex;
    align-items:center;
    background:rgba(255,255,255,.9);
    border-bottom:1px solid rgba(38, 28, 55, .06);
    backdrop-filter:blur(14px);
}

.promo-header-inner {
    width:calc(100% - 48px);
    margin:auto;
    display:flex;
    align-items:center;
}

.promo-logo {
    color:#7637c9;
    font-family:"Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
    font-size:23px;
    font-weight:450;
    letter-spacing:-.045em;
    display:flex;
    align-items:center;
    user-select:none;
}

.promo-logo span:last-child {
    color:inherit;
    font-weight:380;
    letter-spacing:-.025em;
}

.promo-main {
    width:min(1680px, 100%);
    margin:0 auto;
    padding:clamp(24px, 4vh, 46px) clamp(18px, 2.5vw, 44px) 42px;
}

.promo-page-loader {
    display:none;
    position:absolute;
    inset:72px 0 auto;
    z-index:2;
    min-height:60vh;
    place-items:center;
    color:#6f6578;
    font-size:18px;
}

.promo-loading .promo-page-loader { display:grid; }
.promo-loading .promo-main {
    visibility:hidden;
    pointer-events:none;
}

.promo-title {
    margin:0 0 12px;
    color:var(--accent);
    font-family:"Segoe UI", Arial, sans-serif;
    font-size:clamp(24px, 2.2vw, 34px);
    font-weight:300;
    line-height:1.2;
    letter-spacing:-.7px;
    text-align:center;
}

.promo-carousel {
    --promo-card-width:min(380px, 38vw);
    --promo-card-height:calc(var(--promo-card-width) * 1054 / 734);
    position:relative;
}

.promo-stage {
    position:relative;
    height:calc(var(--promo-card-height) + 24px);
    overflow:hidden;
    outline:none;
    touch-action:pan-y;
    cursor:grab;
}

.promo-stage:active { cursor:grabbing; }

.promo-stage:focus-visible {
    border-radius:28px;
    box-shadow:0 0 0 3px rgba(139, 61, 255, .22);
}

.promo-track { position:absolute; inset:0; }

.promo-card {
    position:absolute;
    top:50%;
    left:50%;
    width:var(--promo-card-width);
    height:auto;
    aspect-ratio:734 / 1054;
    overflow:visible;
    display:flex;
    flex-direction:column;
    border:1px solid rgba(46, 34, 67, .08);
    border-radius:24px;
    background:transparent;
    box-shadow:none;
    opacity:0;
    transform:translate(-50%, -50%) scale(.78);
    transition:transform .52s cubic-bezier(.22,.74,.24,1), opacity .4s ease, filter .45s ease, box-shadow .45s ease;
    pointer-events:none;
    will-change:transform, opacity, filter;
}

.promo-card[data-position="-2"] {
    z-index:1;
    opacity:.24;
    filter:blur(8px) saturate(.6);
    transform:translate(calc(-50% - 640px), -50%) scale(.68);
}

.promo-card[data-position="-1"] {
    z-index:2;
    opacity:.55;
    filter:blur(5px) saturate(.75);
    transform:translate(calc(-50% - 350px), -50%) scale(.82);
}

.promo-card[data-position="0"] {
    z-index:3;
    opacity:1;
    filter:none;
    transform:translate(-50%, -50%) scale(1);
    pointer-events:auto;
    cursor:zoom-in;
}

.promo-card[data-position="1"] {
    z-index:2;
    opacity:.55;
    filter:blur(5px) saturate(.75);
    transform:translate(calc(-50% + 350px), -50%) scale(.82);
}

.promo-card[data-position="2"] {
    z-index:1;
    opacity:.24;
    filter:blur(8px) saturate(.6);
    transform:translate(calc(-50% + 640px), -50%) scale(.68);
}

.promo-card-image {
    position:relative;
    height:100%;
    flex:1 1 auto;
    overflow:hidden;
    display:grid;
    place-items:center;
    background:#f2eff8;
    border-radius:24px;
    box-shadow:0 24px 60px rgba(55, 37, 81, .14);
}

.promo-card-image img {
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    -webkit-user-drag:none;
    user-select:none;
    pointer-events:none;
}

img.promo-card-image { pointer-events:none; }

@media print {
    .promo-main { display:none !important; }
    body::after {
        content:"Предварительный просмотр материалов недоступен для печати";
        display:block;
        padding:40px;
        font:20px/1.5 Arial, sans-serif;
        text-align:center;
    }
}

.promo-card-fallback { font-size:58px; }

.promo-card-image img[data-load-state]:not([data-load-state="ready"]),
.promo-viewer img[data-load-state]:not([data-load-state="ready"]) { visibility:hidden; }

.promo-image-placeholder {
    position:absolute;
    inset:0;
    display:grid;
    place-content:center;
    padding:24px;
    text-align:center;
    color:var(--muted);
    font-size:15px;
    line-height:1.5;
}
.promo-image-placeholder[hidden], .promo-media-feedback[hidden] { display:none; }
.promo-viewer .promo-image-placeholder { color:#fff; pointer-events:none; }
.promo-media-feedback {
    position:absolute;
    z-index:8;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:min(300px, 74%);
    padding:18px;
    border:1px solid rgba(139,61,255,.18);
    border-radius:16px;
    background:rgba(255,255,255,.97);
    color:var(--ink);
    text-align:center;
    box-shadow:0 8px 22px rgba(61,37,91,.09);
}
.promo-media-feedback p { margin:0 0 12px; font-size:15px; line-height:1.45; }
.promo-media-retry {
    min-height:44px;
    padding:8px 20px;
    border:1px solid var(--accent);
    border-radius:10px;
    background:var(--surface);
    color:var(--accent);
    cursor:pointer;
}
.promo-media-retry:hover { background:var(--accent-soft); }
.promo-media-retry:focus-visible { outline:3px solid rgba(139,61,255,.3); outline-offset:3px; }

.promo-arrow {
    position:absolute;
    z-index:5;
    top:50%;
    width:52px;
    height:52px;
    padding:0;
    border:1px solid rgba(139,61,255,.18);
    border-radius:50%;
    color:var(--accent);
    background:#fff;
    box-shadow:0 10px 26px rgba(61, 37, 91, .09);
    cursor:pointer;
    transform:translateY(-50%);
    transition:color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.promo-arrow:hover {
    color:#fff;
    background:var(--accent);
    transform:translateY(calc(-50% - 2px)) scale(1.04);
    box-shadow:0 14px 30px rgba(61, 37, 91, .14);
}

.promo-arrow:active { transform:translateY(-50%); }

.promo-arrow-prev { left:0; }
.promo-arrow-next { right:0; }

.promo-arrow:focus-visible {
    outline:3px solid rgba(139,61,255,.24);
    outline-offset:3px;
}

.promo-arrow svg,
.promo-viewer-close svg {
    width:25px;
    height:25px;
    display:block;
    margin:auto;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.promo-dots {
    min-height:24px;
    margin:10px 0 0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}

.promo-viewer[hidden] { display:none; }

.promo-actions {
    display:flex;
    justify-content:center;
    margin-top:20px;
}

.promo-material-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:280px;
    min-height:44px;
    max-width:100%;
    padding:10px 28px;
    border:1px solid var(--accent);
    border-radius:12px;
    background:var(--surface);
    color:var(--accent);
    font-size:16px;
    font-weight:400;
    line-height:1.25;
    text-align:center;
    text-decoration:none;
    box-shadow:0 8px 22px rgba(139,61,255,.09);
    cursor:pointer;
}

.promo-material-button:disabled { cursor:default; }
.promo-material-button:not(:disabled):hover { background:var(--accent-soft); }
.promo-material-button:focus-visible {
    outline:3px solid rgba(139,61,255,.24);
    outline-offset:3px;
}

.promo-viewer {
    position:fixed;
    z-index:50;
    inset:0;
    height:100vh;
    height:100dvh;
    padding:max(78px, calc(env(safe-area-inset-top) + 64px)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    display:grid;
    /* The image must shrink to the padded viewport, not its intrinsic size. */
    grid-template-columns:minmax(0, 1fr);
    grid-template-rows:minmax(0, 1fr);
    place-items:center;
    overflow:hidden;
    overscroll-behavior:contain;
    background:rgba(19, 15, 27, .88);
    backdrop-filter:blur(18px);
}

.promo-viewer img {
    width:auto;
    max-width:100%;
    height:auto;
    max-height:100%;
    min-width:0;
    min-height:0;
    display:block;
    object-fit:contain;
    border-radius:18px;
    box-shadow:0 30px 90px rgba(0,0,0,.38);
    -webkit-user-drag:none;
    user-select:none;
}

.promo-viewer-close {
    position:absolute;
    z-index:2;
    top:max(18px, env(safe-area-inset-top));
    right:max(18px, env(safe-area-inset-right));
    width:48px;
    height:48px;
    padding:0;
    border:1px solid rgba(255,255,255,.24);
    border-radius:50%;
    color:#fff;
    background:rgba(255,255,255,.1);
    cursor:pointer;
}

.promo-dot {
    width:7px;
    height:7px;
    padding:0;
    border:0;
    border-radius:999px;
    background:#d9d1e4;
    cursor:pointer;
    transition:width .25s ease, background .25s ease;
}

.promo-dot[aria-current="true"] {
    width:22px;
    background:var(--accent);
}

.promo-main > section + section {
    margin-top:clamp(42px, 8vh, 84px);
}

.promo-feed-math .promo-carousel {
    --promo-card-width:min(640px, 60vw);
    --promo-card-height:calc(var(--promo-card-width) * 7 / 10);
}

.promo-feed-math .promo-card {
    aspect-ratio:10 / 7;
}

.promo-feed-math .promo-card[data-position="-2"] {
    transform:translate(calc(-50% - 680px), -50%) scale(.58);
}

.promo-feed-math .promo-card[data-position="-1"] {
    transform:translate(calc(-50% - 430px), -50%) scale(.76);
}

.promo-feed-math .promo-card[data-position="1"] {
    transform:translate(calc(-50% + 430px), -50%) scale(.76);
}

.promo-feed-math .promo-card[data-position="2"] {
    transform:translate(calc(-50% + 680px), -50%) scale(.58);
}

.promo-feed-math .promo-dots {
    max-width:760px;
    margin-inline:auto;
}

.promo-empty {
    position:absolute;
    top:50%;
    left:50%;
    width:min(520px, calc(100% - 48px));
    margin:0;
    color:var(--muted);
    font-size:18px;
    line-height:1.5;
    text-align:center;
    transform:translate(-50%, -50%);
}

@media (max-width:1400px) {
    .promo-card[data-position="-2"] { transform:translate(calc(-50% - 600px), -50%) scale(.68); }
    .promo-card[data-position="2"] { transform:translate(calc(-50% + 600px), -50%) scale(.68); }
    .promo-feed-math .promo-card[data-position="-2"] { transform:translate(calc(-50% - 570px), -50%) scale(.54); }
    .promo-feed-math .promo-card[data-position="-1"] { transform:translate(calc(-50% - 370px), -50%) scale(.72); }
    .promo-feed-math .promo-card[data-position="1"] { transform:translate(calc(-50% + 370px), -50%) scale(.72); }
    .promo-feed-math .promo-card[data-position="2"] { transform:translate(calc(-50% + 570px), -50%) scale(.54); }
}

@media (max-width:760px) {
    .promo-header-inner { width:calc(100% - 40px); }
    .promo-main { padding:24px 12px 32px; }
    .promo-title {
        margin-bottom:8px;
        font-size:clamp(22px, 7vw, 28px);
    }
    .promo-carousel {
        --promo-card-width:min(84vw, 380px);
        position:relative;
        display:block;
        padding-bottom:54px;
    }
    .promo-card {
        height:auto;
        border-radius:20px;
    }
    .promo-card[data-position="-2"] { opacity:0; transform:translate(calc(-50% - 86vw), -50%) scale(.72); }
    .promo-card[data-position="-1"] { transform:translate(calc(-50% - 68vw), -50%) scale(.82); }
    .promo-card[data-position="1"] { transform:translate(calc(-50% + 68vw), -50%) scale(.82); }
    .promo-card[data-position="2"] { opacity:0; transform:translate(calc(-50% + 86vw), -50%) scale(.72); }
    .promo-feed-math .promo-carousel {
        --promo-card-width:min(92vw, 580px);
    }
    .promo-feed-math .promo-card {
        aspect-ratio:10 / 7;
    }
    .promo-feed-math .promo-card[data-position="-2"] { opacity:0; transform:translate(calc(-50% - 94vw), -50%) scale(.7); }
    .promo-feed-math .promo-card[data-position="-1"] { transform:translate(calc(-50% - 76vw), -50%) scale(.78); }
    .promo-feed-math .promo-card[data-position="1"] { transform:translate(calc(-50% + 76vw), -50%) scale(.78); }
    .promo-feed-math .promo-card[data-position="2"] { opacity:0; transform:translate(calc(-50% + 94vw), -50%) scale(.7); }
    .promo-arrow {
        position:absolute;
        top:auto;
        bottom:0;
        transform:none;
        width:46px;
        height:46px;
    }
    .promo-arrow-prev { left:calc(50% - 54px); }
    .promo-arrow-next { right:calc(50% - 54px); }
    .promo-arrow:hover { transform:none; }
    .promo-dots { gap:4px; }
    .promo-dot {
        width:5px;
        height:5px;
    }
    .promo-dot[aria-current="true"] { width:18px; }
}

@media (prefers-reduced-motion:reduce) {
    .promo-card,
    .promo-arrow,
    .promo-dot { transition:none; }
}

.promo-material-button.is-purchased {
    border-color:#2f9f68;
    background:#ffffff;
    color:#237b51;
    box-shadow:0 10px 24px rgba(35,123,81,.12);
}

.promo-purchase-modal {
    position:fixed;
    z-index:5100;
    inset:0;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(25,20,31,.7);
    backdrop-filter:blur(10px);
}

.promo-purchase-modal[hidden] { display:none; }

.promo-purchase-dialog {
    position:relative;
    width:min(720px,100%);
    max-height:calc(100dvh - 48px);
    overflow:auto;
    padding:28px;
    border:1px solid rgba(255,255,255,.8);
    border-radius:14px;
    outline:0;
    background:#fff;
    box-shadow:0 30px 90px rgba(24,16,30,.34);
}

.promo-purchase-close {
    position:absolute;
    top:18px;
    right:18px;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    padding:0 0 2px;
    border:1px solid #e5ddea;
    border-radius:50%;
    background:#fff;
    color:#655e69;
    font-size:23px;
    cursor:pointer;
}

.promo-purchase-heading { padding-right:48px; }
.promo-purchase-heading h2 { margin:6px 0; color:#211827; font-size:28px; line-height:1.16; }
.promo-purchase-heading p { margin:0 0 20px; color:#746d78; font-size:14px; line-height:1.45; }
.promo-purchase-safe { color:#2a8b5b; font-size:13px; font-weight:700; }

.promo-purchase-summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:15px 16px;
    border:1px solid #e7dfeb;
    border-radius:10px;
    background:#faf8fc;
}

.promo-purchase-summary > div { display:grid; gap:4px; }
.promo-purchase-summary span { color:#7a7280; font-size:12px; }
.promo-purchase-summary strong { color:#28202d; font-size:16px; line-height:1.3; }
.promo-purchase-total { min-width:95px; justify-items:end; padding-left:18px; border-left:1px solid #ddd2e4; }
.promo-purchase-total strong { color:var(--accent); font-size:20px; white-space:nowrap; }

.promo-purchase-contents { margin:16px 0; }
.promo-purchase-contents-heading { display:flex; justify-content:space-between; gap:16px; margin-bottom:9px; }
.promo-purchase-contents-heading strong { color:#39303e; font-size:13px; }
.promo-purchase-contents-heading span { color:#89818e; font-size:11px; text-align:right; }
.promo-purchase-thumbnails { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:7px; }
.promo-purchase-thumbnail { position:relative; min-width:0; aspect-ratio:1; overflow:hidden; border:1px solid #e5dce9; border-radius:8px; background:#f4eff7; }
.promo-purchase-thumbnail img { width:100%; height:100%; display:block; object-fit:cover; }
.promo-purchase-thumbnail span { position:absolute; inset:auto 0 0; overflow:hidden; padding:16px 4px 4px; color:#fff; background:linear-gradient(transparent,rgba(25,19,29,.8)); font-size:8px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }

.promo-purchase-email { display:grid; gap:6px; margin:0 0 14px; }
.promo-purchase-email > span { color:#3b343f; font-size:12px; font-weight:700; }
.promo-purchase-email input { min-height:48px; box-sizing:border-box; padding:0 14px; border:1px solid #d9d0df; border-radius:9px; outline:0; color:#28202d; background:#fff; font:inherit; font-size:15px; }
.promo-purchase-email input:focus { border-color:#aa78dc; box-shadow:0 0 0 3px rgba(142,62,220,.12); }
.promo-purchase-email small { color:#827986; font-size:11px; text-align:center; }

.promo-purchase-consent { position:relative; display:grid; grid-template-columns:22px minmax(0,1fr); align-items:start; gap:11px; margin-bottom:16px; padding:13px 14px; border:1px solid #e3dae7; border-radius:9px; background:#faf8fb; color:#514956; font-size:11px; line-height:1.4; cursor:pointer; }
.promo-purchase-consent input { position:absolute; width:1px; height:1px; opacity:0; }
.promo-purchase-check { width:22px; height:22px; display:grid; place-items:center; box-sizing:border-box; border:1px solid #bdb2c2; border-radius:6px; color:transparent; background:#fff; font-size:14px; font-weight:900; }
.promo-purchase-consent input:checked + .promo-purchase-check { border-color:#3a263f; color:#fff; background:#3a263f; }
.promo-purchase-consent input:focus-visible + .promo-purchase-check,
.promo-purchase-close:focus-visible,
.promo-purchase-confirm:focus-visible { outline:3px solid rgba(142,62,220,.22); outline-offset:3px; }

.promo-purchase-confirm { width:100%; min-height:52px; border:1px solid #2e2034; border-radius:10px; color:#fff; background:#2e2034; font:inherit; font-size:15px; font-weight:800; cursor:pointer; box-shadow:0 12px 28px rgba(46,32,52,.2); }
.promo-purchase-confirm:disabled { border-color:#e3dde6; color:#a59da8; background:#ece8ee; box-shadow:none; cursor:not-allowed; }
.promo-purchase-security { margin:10px 4px 0; color:#7c7481; font-size:11px; line-height:1.4; text-align:center; }

.promo-purchase-notice { position:fixed; z-index:5200; right:22px; bottom:22px; max-width:min(420px,calc(100% - 32px)); padding:13px 16px; border:1px solid #cde7d8; border-radius:10px; color:#276044; background:#f2fbf6; box-shadow:0 16px 44px rgba(27,35,30,.18); font-size:13px; line-height:1.4; }
.promo-purchase-notice.is-error { border-color:#efd0d5; color:#8d3442; background:#fff6f7; }
.promo-purchase-open { overflow:hidden; }

@media (max-width:660px) {
    .promo-purchase-modal { align-items:end; padding:0; }
    .promo-purchase-dialog { width:100%; max-height:calc(100dvh - 10px); box-sizing:border-box; padding:22px 16px calc(16px + env(safe-area-inset-bottom)); border-radius:14px 14px 0 0; }
    .promo-purchase-heading h2 { font-size:23px; }
    .promo-purchase-summary { align-items:flex-start; gap:12px; }
    .promo-purchase-summary strong { font-size:14px; }
    .promo-purchase-total strong { font-size:17px; }
    .promo-purchase-thumbnails { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .promo-purchase-contents-heading { display:grid; gap:3px; }
    .promo-purchase-contents-heading span { text-align:left; }
    .promo-purchase-notice { right:16px; bottom:16px; }
}

@media (prefers-reduced-motion:reduce) {
    .promo-purchase-modal { backdrop-filter:none; }
}