/* _content/AITranslationPlatform.Web/Components/Layout/LandingLayout.razor.rz.scp.css */
.landing-layout[b-5o6zbgjft9] {
    width: 100%;
    min-height: 100vh;
    background: var(--ui-page, #f7f3ec);
    color: var(--text, #28231d);
}
/* _content/AITranslationPlatform.Web/Components/Public/PublicFooter.razor.rz.scp.css */
.pub-footer[b-6aqizvhmp2] {
    margin-top: 40px;
    padding: 64px 0 28px;
    background:
        radial-gradient(65% 120% at 85% 0%, rgba(223, 169, 54, .11) 0%, transparent 64%),
        radial-gradient(55% 100% at 5% 100%, rgba(183, 121, 29, .07) 0%, transparent 68%),
        linear-gradient(145deg, #211b15 0%, #19140f 100%);
    color: #c9b99c;
}

.pub-footer__inner[b-6aqizvhmp2] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 36px;
    width: min(1180px, calc(100% - 32px));
    margin-inline: auto;
}

.pub-brand[b-6aqizvhmp2] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #f6ecd8;
    text-decoration: none;
}

.pub-brand__mark[b-6aqizvhmp2] {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(235, 184, 70, .26);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(240, 191, 75, .16), rgba(240, 191, 75, .04));
}

    .pub-brand__mark img[b-6aqizvhmp2] {
        width: 72%;
        height: 72%;
        object-fit: contain;
    }

.pub-brand__copy[b-6aqizvhmp2] {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

    .pub-brand__copy strong[b-6aqizvhmp2] {
        font-weight: 700;
    }

    .pub-brand__copy small[b-6aqizvhmp2] {
        color: #a99f91;
        font-size: .7rem;
        font-weight: 600;
    }

.pub-footer__brand p[b-6aqizvhmp2] {
    max-width: 380px;
    margin: 18px 0 0;
    line-height: 2;
    font-size: .9rem;
}

.pub-footer__col[b-6aqizvhmp2] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .pub-footer__col h2[b-6aqizvhmp2] {
        margin: 0 0 6px;
        color: #f0c85c;
        font-size: .86rem;
        font-weight: 700;
    }

    .pub-footer__col a[b-6aqizvhmp2] {
        color: #d8cab0;
        font-size: .9rem;
        text-decoration: none;
        transition: color .25s ease;
    }

        .pub-footer__col a:hover[b-6aqizvhmp2] {
            color: #f4cd58;
        }

/*
 * The studio's credit sits in the middle: the copyright and the seal get
 * equal columns on either side, so it is centred on the bar.
 */
.pub-footer__bottom[b-6aqizvhmp2] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    width: min(1180px, calc(100% - 32px));
    margin: 40px auto 0;
    padding-top: 22px;
    border-top: 1px solid rgba(235, 184, 70, .14);
    color: #8f8270;
    font-size: .8rem;
}

.pub-footer__credit[b-6aqizvhmp2] {
    white-space: nowrap;
}

    .pub-footer__credit a[b-6aqizvhmp2] {
        color: #d8cab0;
        text-decoration: none;
        transition: color .25s ease;
    }

        .pub-footer__credit a:hover[b-6aqizvhmp2],
        .pub-footer__credit a:focus-visible[b-6aqizvhmp2] {
            color: #f4cd58;
        }

.pub-footer__seal[b-6aqizvhmp2] {
    display: flex;
    justify-self: end;
}

@media (max-width: 860px) {
    .pub-footer__inner[b-6aqizvhmp2] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pub-footer__brand[b-6aqizvhmp2] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .pub-footer__inner[b-6aqizvhmp2] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* on a phone the credit takes its own line under the copyright and the seal */
@media (max-width: 640px) {
    .pub-footer__bottom[b-6aqizvhmp2] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .pub-footer__credit[b-6aqizvhmp2] {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}
/* _content/AITranslationPlatform.Web/Components/Public/PublicHeader.razor.rz.scp.css */
/* =========================================================
   The public pages' header. Every size and colour here is the
   home page header's, measured from it, so the two read as one;
   like the home page's, the header stays light in the dark theme.
   ========================================================= */

/*
 * Stays at the top while the page scrolls, on every width. It is glass:
 * whatever scrolls under it shows through, lightly blurred; once something
 * is under it (js/public-pages.js, "is-scrolled") it lifts off the page.
 * Over a dark section ("is-over-dark", same script) the glass frosts
 * over, or the menu would be grey on dark brown.
 */
.pub-header[b-fj4mfzm9cu] {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid rgba(177, 137, 65, .12);
    background: rgba(255, 253, 248, .4);
    -webkit-backdrop-filter: blur(10px) saturate(1.8);
    backdrop-filter: blur(10px) saturate(1.8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
    color: #28231d;
    transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

    .pub-header.is-scrolled[b-fj4mfzm9cu] {
        border-bottom-color: rgba(177, 137, 65, .2);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 14px 34px -22px rgba(45, 36, 25, .5);
    }

    .pub-header.is-over-dark[b-fj4mfzm9cu] {
        background: rgba(255, 253, 248, .8);
    }

.pub-header__inner[b-fj4mfzm9cu] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    width: min(1440px, calc(100% - 48px));
    min-height: 82px;
    margin-inline: auto;
    padding: 10px 0;
}

/* ---------- brand ---------- */

.pub-brand[b-fj4mfzm9cu] {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
    color: #292621;
    text-decoration: none;
}

.pub-brand__mark[b-fj4mfzm9cu] {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border: 1px solid rgba(189, 139, 43, .22);
    border-radius: 14px;
    background: linear-gradient(145deg, #fffdf8, #f5e8ca);
    box-shadow: 0 12px 26px rgba(252, 209, 102, .22);
    transition: transform .3s ease;
}

    .pub-brand__mark img[b-fj4mfzm9cu] {
        display: block;
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

.pub-brand:hover .pub-brand__mark[b-fj4mfzm9cu] {
    transform: rotate(-6deg);
}

.pub-brand__copy[b-fj4mfzm9cu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .pub-brand__copy strong[b-fj4mfzm9cu] {
        color: #292621;
        font-size: 18px;
        font-weight: 900;
    }

    .pub-brand__copy small[b-fj4mfzm9cu] {
        color: #958b7b;
        font-size: 9px;
        font-weight: 700;
        white-space: nowrap;
    }

/* ---------- navigation ---------- */

.pub-nav[b-fj4mfzm9cu] {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
}

    .pub-nav > a[b-fj4mfzm9cu],
    .pub-nav__trigger[b-fj4mfzm9cu] {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        min-height: 38px;
        padding: 0 12px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: #655d51;
        font: inherit;
        font-size: 16px;
        font-weight: 750;
        white-space: nowrap;
        text-decoration: none;
        cursor: pointer;
        transition: color .2s ease, background-color .2s ease;
    }

        .pub-nav > a:hover[b-fj4mfzm9cu],
        .pub-nav__group:hover .pub-nav__trigger[b-fj4mfzm9cu],
        .pub-nav__group:focus-within .pub-nav__trigger[b-fj4mfzm9cu] {
            color: #9a690b;
            background: rgba(216, 166, 52, .09);
        }

        .pub-nav > a.is-current[b-fj4mfzm9cu],
        .pub-nav__trigger.is-current[b-fj4mfzm9cu] {
            color: #9a690b;
            background: rgba(216, 166, 52, .14);
        }

.pub-nav__group[b-fj4mfzm9cu] {
    position: relative;
}

.pub-nav__trigger svg[b-fj4mfzm9cu] {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .3s ease;
}

.pub-nav__group:hover .pub-nav__trigger svg[b-fj4mfzm9cu],
.pub-nav__group:focus-within .pub-nav__trigger svg[b-fj4mfzm9cu] {
    transform: rotate(180deg);
}

.pub-nav__menu[b-fj4mfzm9cu] {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 40;
    display: grid;
    gap: 4px;
    min-width: 290px;
    margin-top: 10px;
    padding: 8px;
    border: 1px solid rgba(155, 125, 48, .22);
    border-radius: 18px;
    background: #fffdf8;
    box-shadow: 0 24px 50px rgba(59, 48, 23, .18);
    opacity: 0;
    visibility: hidden;
    translate: -50% 6px;
    transition: opacity .25s ease, translate .25s ease, visibility .25s;
}

    .pub-nav__menu[b-fj4mfzm9cu]::before {
        content: "";
        position: absolute;
        inset: -12px 0 auto;
        height: 12px;
    }

.pub-nav__group:hover .pub-nav__menu[b-fj4mfzm9cu],
.pub-nav__group:focus-within .pub-nav__menu[b-fj4mfzm9cu] {
    opacity: 1;
    visibility: visible;
    translate: -50% 0;
}

/* closed right after a choice, until the pointer leaves (public-pages.js) */
.pub-nav__group.is-closed .pub-nav__menu[b-fj4mfzm9cu] {
    opacity: 0;
    visibility: hidden;
    translate: -50% 6px;
}

.pub-nav__group.is-closed .pub-nav__trigger svg[b-fj4mfzm9cu] {
    transform: none;
}

.pub-nav__menu a[b-fj4mfzm9cu] {
    display: grid;
    gap: 2px;
    padding: 11px 14px;
    border-radius: 12px;
    text-decoration: none;
    transition: background-color .2s ease;
}

    .pub-nav__menu a:hover[b-fj4mfzm9cu] {
        background: rgba(242, 197, 79, .12);
    }

    .pub-nav__menu a strong[b-fj4mfzm9cu] {
        color: #221d18;
        font-size: 13px;
        font-weight: 750;
    }

    .pub-nav__menu a small[b-fj4mfzm9cu] {
        color: #958b7b;
        font-size: 11.5px;
        font-weight: 600;
    }

    .pub-nav__menu a.is-current strong[b-fj4mfzm9cu] {
        color: #9a690b;
    }

/* ---------- actions ---------- */

.pub-header__actions[b-fj4mfzm9cu] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.pub-lang[b-fj4mfzm9cu],
.pub-signin[b-fj4mfzm9cu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 13px;
    border: 1px solid rgba(188, 157, 99, .24);
    border-radius: 12px;
    background: rgba(255, 255, 255, .82);
    color: #625a4d;
    font-size: 11px;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.pub-cta[b-fj4mfzm9cu] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 13px;
    background: linear-gradient(180deg, #f2c951, #e5ad27);
    color: #553a04;
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 10px 22px rgba(214, 161, 32, .18);
    transition: transform .25s ease;
}

    .pub-cta:hover[b-fj4mfzm9cu] {
        transform: translateY(-2px);
    }

/* ---------- phone menu ---------- */

.pub-menu[b-fj4mfzm9cu],
.pub-mobilebar[b-fj4mfzm9cu] {
    display: none;
}

.pub-menu summary[b-fj4mfzm9cu] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(188, 157, 99, .24);
    border-radius: 12px;
    background: rgba(255, 255, 255, .82);
    color: #4f473b;
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .pub-menu summary[b-fj4mfzm9cu]::-webkit-details-marker {
        display: none;
    }

    .pub-menu summary svg[b-fj4mfzm9cu] {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
    }

.pub-menu .pub-menu__close[b-fj4mfzm9cu],
.pub-menu[open] .pub-menu__open[b-fj4mfzm9cu] {
    display: none;
}

.pub-menu[open] .pub-menu__close[b-fj4mfzm9cu] {
    display: block;
}

.pub-menu[open] summary[b-fj4mfzm9cu] {
    border-color: transparent;
    background: #3b2f23;
    color: #fcd166;
}

.pub-menu__panel[b-fj4mfzm9cu] {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 8px);
    z-index: 10;
    display: grid;
    gap: 12px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding: 10px;
    border: 1px solid rgba(177, 137, 65, .18);
    border-radius: 22px;
    background: #fffdf8;
    box-shadow: 0 24px 60px rgba(45, 36, 25, .18);
    animation: pub-menu-in-b-fj4mfzm9cu .32s cubic-bezier(.16, 1, .3, 1) both;
}

.pub-menu__links[b-fj4mfzm9cu] {
    display: grid;
    gap: 2px;
}

    .pub-menu__links a[b-fj4mfzm9cu],
    .pub-menu__actions a[b-fj4mfzm9cu] {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 0 14px;
        border-radius: 14px;
        color: #3d362c;
        font-size: .92rem;
        font-weight: 800;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

        .pub-menu__links a:active[b-fj4mfzm9cu] {
            background: rgba(216, 166, 52, .12);
        }

.pub-menu__group[b-fj4mfzm9cu] {
    display: block;
    margin-top: 8px;
    padding: 10px 14px 4px;
    border-top: 1px solid rgba(155, 125, 48, .18);
    color: #b78507;
    font-size: 12px;
    font-weight: 800;
}

.pub-menu__actions[b-fj4mfzm9cu] {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(177, 137, 65, .14);
}

    .pub-menu__actions a[b-fj4mfzm9cu] {
        justify-content: center;
        border: 1px solid rgba(188, 157, 99, .24);
        font-size: .82rem;
    }

    .pub-menu__actions .pub-menu__signin[b-fj4mfzm9cu] {
        border-color: transparent;
        background: #3b2f23;
        color: #fcd166;
    }

html[data-theme="dark"] .pub-menu__panel[b-fj4mfzm9cu] {
    border-color: rgba(255, 226, 178, .14);
    background: #17120c;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

    html[data-theme="dark"] .pub-menu__links a[b-fj4mfzm9cu],
    html[data-theme="dark"] .pub-menu__actions a[b-fj4mfzm9cu] {
        color: #f6f2e8;
    }

html[data-theme="dark"] .pub-menu__actions .pub-menu__signin[b-fj4mfzm9cu] {
    color: #fcd166;
}

/* ---------- the bar under the thumb ---------- */

.pub-mobilebar a[b-fj4mfzm9cu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 15px;
    font-size: .9rem;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.pub-mobilebar__secondary[b-fj4mfzm9cu] {
    border: 1px solid rgba(188, 157, 99, .28);
    background: #fff;
    color: #4f473b;
}

.pub-mobilebar__primary[b-fj4mfzm9cu] {
    background: linear-gradient(180deg, #f2c951, #e5ad27);
    color: #553a04;
    box-shadow: 0 10px 22px rgba(214, 161, 32, .25);
}

    .pub-mobilebar__primary svg[b-fj4mfzm9cu] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

[dir="rtl"] .pub-mobilebar__primary svg[b-fj4mfzm9cu] {
    transform: scaleX(-1);
}

html[data-theme="dark"] .pub-mobilebar[b-fj4mfzm9cu] {
    border-color: rgba(255, 226, 178, .14);
    background: rgba(24, 19, 12, .9);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}

html[data-theme="dark"] .pub-mobilebar__secondary[b-fj4mfzm9cu] {
    border-color: rgba(255, 226, 178, .18);
    background: rgba(255, 226, 178, .06);
    color: #f6f2e8;
}

@keyframes pub-menu-in-b-fj4mfzm9cu {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pub-bar-in-b-fj4mfzm9cu {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* the same breakpoints as the home page header */

@media (max-width: 900px) {
    /* as on the home page: it scrolls away on a desktop, stays on a phone */
    .pub-header[b-fj4mfzm9cu] {
        position: sticky;
        top: 0;
    }

    .pub-header__inner[b-fj4mfzm9cu] {
        width: calc(100% - 28px);
        min-height: 64px;
        padding: 8px 0;
        gap: 10px;
    }

    .pub-nav[b-fj4mfzm9cu],
    .pub-signin[b-fj4mfzm9cu],
    .pub-brand__copy small[b-fj4mfzm9cu] {
        display: none;
    }

    .pub-header__actions[b-fj4mfzm9cu] {
        margin-inline-start: auto;
    }

    .pub-brand__mark[b-fj4mfzm9cu] {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 13px;
    }

    .pub-lang[b-fj4mfzm9cu] {
        min-width: 44px;
    }

    .pub-menu[b-fj4mfzm9cu] {
        display: block;
        flex: none;
    }
}

@media (max-width: 720px) {
    .pub-cta[b-fj4mfzm9cu] {
        display: none;
    }

    .pub-mobilebar[b-fj4mfzm9cu] {
        position: fixed;
        inset-inline: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        z-index: 6000;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px;
        padding: 8px;
        border: 1px solid rgba(177, 137, 65, .2);
        border-radius: 22px;
        background: rgba(255, 253, 248, .9);
        -webkit-backdrop-filter: saturate(1.5) blur(20px);
        backdrop-filter: saturate(1.5) blur(20px);
        box-shadow: 0 16px 40px rgba(45, 36, 25, .18);
        animation: pub-bar-in-b-fj4mfzm9cu .5s .2s cubic-bezier(.16, 1, .3, 1) both;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pub-menu__panel[b-fj4mfzm9cu],
    .pub-mobilebar[b-fj4mfzm9cu] {
        animation: none;
    }
}
/* _content/AITranslationPlatform.Web/Components/Public/ServicePage.razor.rz.scp.css */
/* =========================================================
   Public service pages. The look follows the home page:
   warm paper, gold, rounded cards, the same type.
   Every colour is a token here, redefined for the dark theme.
   ========================================================= */

.pub-page[b-5c82jfh2nm] {
    --pub-bg: #f7f3ec;
    --pub-ink: #221d18;
    --pub-text: #655e53;
    --pub-muted: #958b7b;
    --pub-line: rgba(155, 125, 48, .22);
    --pub-line-strong: rgba(77, 63, 24, .32);
    --pub-card: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(252, 249, 243, .97));
    --pub-card-solid: #fffdf8;
    --pub-gold-1: #f4cd58;
    --pub-gold-2: #e6ad25;
    --pub-gold-ink: #b78507;
    --pub-gold-soft: rgba(242, 197, 79, .14);
    --pub-gold-text: linear-gradient(115deg, #b98800 0%, #ab7e00 22%, #cb9500 45%, #bf8d00 68%, #a77b00 100%);
    --pub-shadow: 0 18px 40px rgba(87, 64, 22, .08);
    --pub-shadow-lift: 0 26px 54px rgba(87, 64, 22, .14);
    --pub-dark: linear-gradient(145deg, #211b15 0%, #19140f 100%);
    --pub-dark-ink: #f6ecd8;
    --pub-dark-text: #c9b99c;

    min-height: 100vh;
    overflow-x: clip;
    background:
        radial-gradient(950px 600px at 7% 0%, rgba(252, 209, 102, .3), transparent 62%),
        radial-gradient(850px 560px at 98% 18%, rgba(252, 209, 102, .07), transparent 63%),
        var(--pub-bg);
    color: var(--pub-ink);
    font-family: IRANSansX, Tahoma, Arial, sans-serif;
}

    .pub-page[lang="en"][b-5c82jfh2nm] {
        font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    }

html[data-theme="dark"] .pub-page[b-5c82jfh2nm] {
    --pub-bg: #15110d;
    --pub-ink: #f4ead7;
    --pub-text: #c8b99f;
    --pub-muted: #9a8b72;
    --pub-line: rgba(226, 179, 63, .16);
    --pub-line-strong: rgba(226, 179, 63, .3);
    --pub-card: linear-gradient(180deg, rgba(38, 31, 24, .96), rgba(30, 24, 18, .96));
    --pub-card-solid: #241d16;
    --pub-gold-ink: #f0c85c;
    --pub-gold-soft: rgba(242, 197, 79, .12);
    --pub-gold-text: linear-gradient(115deg, #f6cf5f 0%, #e8b432 30%, #ffd977 52%, #e6ad25 76%, #f2c34a 100%);
    --pub-shadow: 0 18px 40px rgba(0, 0, 0, .3);
    --pub-shadow-lift: 0 26px 54px rgba(0, 0, 0, .42);
    --pub-dark: linear-gradient(145deg, #2b2219 0%, #1f1912 100%);

    background:
        radial-gradient(950px 600px at 7% 0%, rgba(214, 160, 40, .14), transparent 62%),
        var(--pub-bg);
}

.pub-container[b-5c82jfh2nm] {
    width: min(1180px, calc(100% - 32px));
    margin-inline: auto;
}

/* ---------- shared pieces ---------- */

.pub-kicker[b-5c82jfh2nm] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 14px;
    border: 1px solid rgba(226, 179, 63, .34);
    border-radius: 999px;
    background: var(--pub-gold-soft);
    color: var(--pub-gold-ink);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 0;
}

    .pub-page[lang="en"] .pub-kicker[b-5c82jfh2nm] {
        letter-spacing: .06em;
    }

.pub-button[b-5c82jfh2nm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 16px;
    font-weight: 700;
    font-size: .98rem;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.pub-button--primary[b-5c82jfh2nm] {
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
    color: #2b210d;
    box-shadow: 0 14px 32px rgba(214, 159, 34, .22), inset 0 1px 0 rgba(255, 255, 255, .4);
}

    .pub-button--primary:hover[b-5c82jfh2nm] {
        transform: translateY(-2px);
        box-shadow: 0 20px 40px rgba(214, 159, 34, .32), inset 0 1px 0 rgba(255, 255, 255, .4);
    }

.pub-button--ghost[b-5c82jfh2nm] {
    border: 1px solid var(--pub-line-strong);
    background: rgba(255, 255, 255, .62);
    color: var(--pub-ink);
}

    .pub-button--ghost:hover[b-5c82jfh2nm] {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, .9);
    }

    .pub-button--ghost i[b-5c82jfh2nm] {
        font-style: normal;
        font-size: .72rem;
        color: var(--pub-gold-ink);
    }

html[data-theme="dark"] .pub-button--ghost[b-5c82jfh2nm] {
    background: rgba(255, 255, 255, .05);
}

    html[data-theme="dark"] .pub-button--ghost:hover[b-5c82jfh2nm] {
        background: rgba(255, 255, 255, .1);
    }

.pub-button:focus-visible[b-5c82jfh2nm],
.pub-samples__labels label:focus-visible[b-5c82jfh2nm] {
    outline: 3px solid rgba(230, 173, 37, .55);
    outline-offset: 3px;
}

/* ---------- hero ---------- */

.pub-hero[b-5c82jfh2nm] {
    position: relative;
    padding: 44px 0 72px;
}

.pub-hero__glow[b-5c82jfh2nm] {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}

.pub-hero__glow--one[b-5c82jfh2nm] {
    inset-block-start: -60px;
    inset-inline-end: 8%;
    width: 380px;
    height: 380px;
    background: rgba(252, 209, 102, .32);
    animation: pub-drift-a-b-5c82jfh2nm 14s ease-in-out infinite alternate;
}

.pub-hero__glow--two[b-5c82jfh2nm] {
    inset-block-end: -40px;
    inset-inline-start: 4%;
    width: 300px;
    height: 300px;
    background: rgba(230, 173, 37, .16);
    animation: pub-drift-b-b-5c82jfh2nm 16s ease-in-out infinite alternate;
}

.pub-hero__layout[b-5c82jfh2nm] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: 48px;
    padding: 46px 48px;
    border: 1px solid rgba(77, 63, 24, .14);
    border-radius: 34px;
    background:
        radial-gradient(circle at 100% 0%, rgba(252, 209, 102, .18), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(250, 245, 234, .72));
    box-shadow: 0 30px 70px rgba(59, 48, 23, .08), inset 0 1px 0 rgba(255, 255, 255, .8);
}

html[data-theme="dark"] .pub-hero__layout[b-5c82jfh2nm] {
    background:
        radial-gradient(circle at 100% 0%, rgba(214, 160, 40, .12), transparent 42%),
        linear-gradient(180deg, rgba(40, 32, 24, .82), rgba(28, 22, 17, .82));
    border-color: var(--pub-line);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}

.pub-crumbs[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--pub-muted);
    font-size: .82rem;
    animation: pub-rise-b-5c82jfh2nm .7s cubic-bezier(.2, .8, .2, 1) both;
}

    .pub-crumbs a[b-5c82jfh2nm] {
        color: inherit;
        text-decoration: none;
    }

        .pub-crumbs a:hover[b-5c82jfh2nm] {
            color: var(--pub-gold-ink);
        }

.pub-hero__copy .pub-kicker[b-5c82jfh2nm] {
    animation: pub-rise-b-5c82jfh2nm .7s .05s cubic-bezier(.2, .8, .2, 1) both;
}

.pub-hero__title[b-5c82jfh2nm] {
    margin: 18px 0 18px;
    font-size: clamp(2.1rem, 4.2vw, 3.45rem);
    font-weight: 700;
    line-height: 1.22;
    color: var(--pub-ink);
    animation: pub-rise-b-5c82jfh2nm .8s .12s cubic-bezier(.2, .8, .2, 1) both;
}

    .pub-hero__title span[b-5c82jfh2nm] {
        display: block;
    }

    .pub-hero__title strong[b-5c82jfh2nm] {
        display: block;
        font-weight: 700;
        background:
            linear-gradient(105deg, transparent 0%, transparent 38%, rgba(255, 250, 210, .95) 50%, transparent 62%, transparent 100%),
            var(--pub-gold-text);
        background-size: 250% 100%, 100% 100%;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: pub-shine-b-5c82jfh2nm 6.5s ease-in-out 1.2s infinite;
    }

.pub-hero__lead[b-5c82jfh2nm] {
    max-width: 560px;
    margin: 0 0 30px;
    color: var(--pub-text);
    font-size: 1.04rem;
    line-height: 2;
    animation: pub-rise-b-5c82jfh2nm .8s .2s cubic-bezier(.2, .8, .2, 1) both;
}

.pub-page[lang="en"] .pub-hero__lead[b-5c82jfh2nm] {
    line-height: 1.75;
}

.pub-hero__actions[b-5c82jfh2nm] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    animation: pub-rise-b-5c82jfh2nm .8s .28s cubic-bezier(.2, .8, .2, 1) both;
}

/* the page that becomes its translation */

.pub-hero__stage[b-5c82jfh2nm] {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 460px;
    animation: pub-rise-b-5c82jfh2nm 1s .18s cubic-bezier(.2, .8, .2, 1) both;
}

.pub-stage__ring[b-5c82jfh2nm] {
    position: absolute;
    border-radius: 50%;
    border: 1.5px dashed rgba(201, 150, 26, .35);
}

.pub-stage__ring--one[b-5c82jfh2nm] {
    width: 430px;
    height: 430px;
    animation: pub-spin-b-5c82jfh2nm 60s linear infinite;
}

.pub-stage__ring--two[b-5c82jfh2nm] {
    width: 330px;
    height: 330px;
    border-style: solid;
    border-color: rgba(201, 150, 26, .18);
    animation: pub-spin-b-5c82jfh2nm 40s linear infinite reverse;
}

.pub-morph[b-5c82jfh2nm] {
    position: relative;
    width: min(330px, 100%);
    overflow: hidden;
    border: 1px solid rgba(77, 63, 24, .18);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 34px 70px rgba(59, 48, 23, .22), 0 2px 0 rgba(255, 255, 255, .7) inset;
    transform: rotate(-2.5deg);
    animation: pub-hover-b-5c82jfh2nm 7s ease-in-out infinite;
}

/* a landscape page (a poster, a slide) is as wide as the stage, not a portrait page's width */
.pub-morph--wide[b-5c82jfh2nm] {
    width: min(520px, 100%);
}

.pub-morph__page[b-5c82jfh2nm] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pub-morph__page--after[b-5c82jfh2nm] {
    position: absolute;
    inset: 0;
    clip-path: inset(0 100% 0 0);
    animation: pub-reveal-b-5c82jfh2nm 8s cubic-bezier(.6, 0, .3, 1) .6s infinite;
}

.pub-morph__scan[b-5c82jfh2nm] {
    position: absolute;
    inset-block: -4%;
    left: 0;
    width: 3px;
    background: linear-gradient(180deg, transparent, #f4cd58 18%, #fff3c4 50%, #f4cd58 82%, transparent);
    box-shadow: 0 0 22px 6px rgba(244, 205, 88, .55);
    opacity: 0;
    animation: pub-scan-b-5c82jfh2nm 8s cubic-bezier(.6, 0, .3, 1) .6s infinite;
}

.pub-chip[b-5c82jfh2nm] {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid rgba(226, 179, 63, .36);
    border-radius: 14px;
    background: var(--pub-card-solid);
    color: var(--pub-ink);
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 16px 34px rgba(59, 48, 23, .14);
    z-index: 2;
}

    .pub-chip svg[b-5c82jfh2nm] {
        width: 18px;
        height: 18px;
        padding: 3px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
        fill: none;
        stroke: #2b210d;
        stroke-width: 2.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.pub-chip--1[b-5c82jfh2nm] {
    inset-block-start: 16%;
    inset-inline-start: -2%;
    animation: pub-float-b-5c82jfh2nm 5.5s ease-in-out infinite;
}

.pub-chip--2[b-5c82jfh2nm] {
    inset-block-end: 20%;
    inset-inline-end: -4%;
    animation: pub-float-b-5c82jfh2nm 6.5s ease-in-out .8s infinite;
}

.pub-chip--3[b-5c82jfh2nm] {
    inset-block-end: 4%;
    inset-inline-start: 6%;
    animation: pub-float-b-5c82jfh2nm 6s ease-in-out 1.6s infinite;
}

/* ---------- sections ---------- */

.pub-page[b-5c82jfh2nm] {
    interpolate-size: allow-keywords;
}

.pub-section[b-5c82jfh2nm] {
    padding: 80px 0;
}

.pub-section__head[b-5c82jfh2nm] {
    max-width: 720px;
    margin: 0 auto 42px;
    text-align: center;
}

    .pub-section__head h2[b-5c82jfh2nm] {
        margin: 16px 0 12px;
        font-size: clamp(1.65rem, 3vw, 2.35rem);
        font-weight: 700;
        line-height: 1.35;
        color: var(--pub-ink);
    }

    .pub-section__head p[b-5c82jfh2nm] {
        margin: 0;
        color: var(--pub-text);
        line-height: 1.9;
    }

.pub-section__head--dark h2[b-5c82jfh2nm] {
    color: var(--pub-dark-ink);
}

.pub-section__head--dark p[b-5c82jfh2nm] {
    color: var(--pub-dark-text);
}

.pub-kicker--dark[b-5c82jfh2nm] {
    border-color: rgba(240, 200, 92, .34);
    background: rgba(240, 200, 92, .1);
    color: #f0c85c;
}

.pub-button--glass[b-5c82jfh2nm] {
    border: 1px solid rgba(255, 236, 190, .2);
    background: rgba(255, 255, 255, .06);
    color: var(--pub-dark-ink);
    backdrop-filter: blur(8px);
}

    .pub-button--glass:hover[b-5c82jfh2nm] {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, .12);
    }

/* ================= ribbon: what it is made for ================= */

.pub-ribbon[b-5c82jfh2nm] {
    padding: 0 0 12px;
    margin-top: -36px;
    position: relative;
    z-index: 2;
}

.pub-ribbon__inner[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 12px 12px 20px;
    border: 1px solid var(--pub-line);
    border-radius: 22px;
    background: var(--pub-card-solid);
    box-shadow: var(--pub-shadow);
}

.pub-page[dir="rtl"] .pub-ribbon__inner[b-5c82jfh2nm] {
    padding: 12px 20px 12px 12px;
}

.pub-ribbon__label[b-5c82jfh2nm] {
    flex: 0 0 auto;
    padding-inline-end: 18px;
    border-inline-end: 1px solid var(--pub-line);
    font-weight: 700;
    font-size: .95rem;
    white-space: nowrap;
    background: var(--pub-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pub-ribbon__viewport[b-5c82jfh2nm] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.pub-ribbon__track[b-5c82jfh2nm] {
    display: flex;
    width: max-content;
    animation: pub-marquee-b-5c82jfh2nm 36s linear infinite;
}

.pub-page[dir="rtl"] .pub-ribbon__track[b-5c82jfh2nm] {
    animation-name: pub-marquee-rtl-b-5c82jfh2nm;
}

.pub-ribbon:hover .pub-ribbon__track[b-5c82jfh2nm] {
    animation-play-state: paused;
}

.pub-ribbon ul[b-5c82jfh2nm] {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    padding-inline-end: 10px;
    list-style: none;
}

.pub-ribbon li[b-5c82jfh2nm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border: 1px solid var(--pub-line);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(250, 243, 228, .7));
    color: var(--pub-ink);
    font-size: .86rem;
    font-weight: 700;
    white-space: nowrap;
}

html[data-theme="dark"] .pub-ribbon li[b-5c82jfh2nm] {
    background: rgba(255, 255, 255, .04);
}

    .pub-ribbon li svg[b-5c82jfh2nm] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: var(--pub-gold-2);
        stroke-width: 1.8;
        stroke-linejoin: round;
        stroke-linecap: round;
    }

/* ================= showcase: real samples ================= */

.pub-showcase[b-5c82jfh2nm] {
    position: relative;
    width: min(1400px, calc(100% - 24px));
    margin: 56px auto 0;
    padding: 88px 0 96px;
    overflow: hidden;
    border-radius: 44px;
    background:
        radial-gradient(70% 55% at 50% 0%, rgba(240, 191, 75, .16), transparent 70%),
        linear-gradient(180deg, #211a14 0%, #15110d 100%);
    box-shadow: 0 40px 90px rgba(33, 27, 21, .28);
    isolation: isolate;
}

    .pub-showcase[b-5c82jfh2nm]::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image: radial-gradient(rgba(255, 225, 150, .1) 1px, transparent 1.2px);
        background-size: 26px 26px;
        -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 80%);
        mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 80%);
    }

.pub-showcase__glow[b-5c82jfh2nm] {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.pub-showcase__glow--one[b-5c82jfh2nm] {
    top: 22%;
    inset-inline-start: -8%;
    width: 420px;
    height: 420px;
    background: rgba(230, 173, 37, .18);
    animation: pub-drift-a-b-5c82jfh2nm 18s ease-in-out infinite alternate;
}

.pub-showcase__glow--two[b-5c82jfh2nm] {
    bottom: -12%;
    inset-inline-end: -6%;
    width: 480px;
    height: 480px;
    background: rgba(183, 121, 29, .16);
    animation: pub-drift-b-b-5c82jfh2nm 20s ease-in-out infinite alternate;
}

.pub-showcase__body[b-5c82jfh2nm] {
    position: relative;
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    align-items: start;
    gap: 28px;
}

.pub-showcase__radio[b-5c82jfh2nm] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* the rail of samples */

.pub-showcase__rail[b-5c82jfh2nm] {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pub-thumb[b-5c82jfh2nm] {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 14px;
    padding: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 236, 190, .1);
    border-radius: 18px;
    background: rgba(255, 255, 255, .035);
    color: var(--pub-dark-text);
    cursor: pointer;
    transition: border-color .3s ease, background-color .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}

    .pub-thumb:hover[b-5c82jfh2nm] {
        transform: translateX(0) translateY(-2px);
        border-color: rgba(240, 200, 92, .3);
        background: rgba(255, 255, 255, .06);
    }

.pub-thumb__img[b-5c82jfh2nm] {
    display: block;
    height: 72px;
    overflow: hidden;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
}

    .pub-thumb__img img[b-5c82jfh2nm] {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
        transition: transform .5s cubic-bezier(.2, .8, .2, 1);
    }

.pub-thumb__copy[b-5c82jfh2nm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .pub-thumb__copy small[b-5c82jfh2nm] {
        color: #9a8b72;
        font-size: .74rem;
        font-weight: 700;
    }

    .pub-thumb__copy strong[b-5c82jfh2nm] {
        color: var(--pub-dark-ink);
        font-size: .95rem;
        font-weight: 700;
    }

.pub-thumb__format[b-5c82jfh2nm] {
    display: inline-block;
    margin-inline-start: 6px;
    padding: 1px 7px;
    border-radius: 6px;
    background: rgba(226, 92, 70, .2);
    color: #f29a86;
    font-size: .68rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .02em;
    vertical-align: 1px;
}

.pub-thumb__format--docx[b-5c82jfh2nm] {
    background: rgba(77, 140, 230, .2);
    color: #8fb8f2;
}

.pub-thumb__format--pptx[b-5c82jfh2nm] {
    background: rgba(230, 120, 60, .2);
    color: #f2ad86;
}

/* a slide is wider than tall: its thumbnail shows the whole of it */
.pub-thumb__img--wide img[b-5c82jfh2nm] {
    object-fit: contain;
    object-position: center;
}

.pub-thumb__arrow[b-5c82jfh2nm] {
    display: grid;
    place-items: center;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity .3s ease, transform .3s ease;
}

.pub-page[dir="ltr"] .pub-thumb__arrow[b-5c82jfh2nm] {
    transform: translateX(-6px) scaleX(-1);
}

    .pub-thumb__arrow svg[b-5c82jfh2nm] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: #f0c85c;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.pub-showcase__radio:nth-of-type(1):checked ~ .pub-showcase__rail .pub-thumb:nth-child(1)[b-5c82jfh2nm],
.pub-showcase__radio:nth-of-type(2):checked ~ .pub-showcase__rail .pub-thumb:nth-child(2)[b-5c82jfh2nm],
.pub-showcase__radio:nth-of-type(3):checked ~ .pub-showcase__rail .pub-thumb:nth-child(3)[b-5c82jfh2nm],
.pub-showcase__radio:nth-of-type(4):checked ~ .pub-showcase__rail .pub-thumb:nth-child(4)[b-5c82jfh2nm],
.pub-showcase__radio:nth-of-type(5):checked ~ .pub-showcase__rail .pub-thumb:nth-child(5)[b-5c82jfh2nm] {
    border-color: rgba(240, 200, 92, .6);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(240, 191, 75, .22), transparent 60%),
        rgba(255, 255, 255, .06);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(240, 200, 92, .12);
}

    .pub-showcase__radio:nth-of-type(1):checked ~ .pub-showcase__rail .pub-thumb:nth-child(1) .pub-thumb__arrow[b-5c82jfh2nm],
    .pub-showcase__radio:nth-of-type(2):checked ~ .pub-showcase__rail .pub-thumb:nth-child(2) .pub-thumb__arrow[b-5c82jfh2nm],
    .pub-showcase__radio:nth-of-type(3):checked ~ .pub-showcase__rail .pub-thumb:nth-child(3) .pub-thumb__arrow[b-5c82jfh2nm],
    .pub-showcase__radio:nth-of-type(4):checked ~ .pub-showcase__rail .pub-thumb:nth-child(4) .pub-thumb__arrow[b-5c82jfh2nm],
    .pub-showcase__radio:nth-of-type(5):checked ~ .pub-showcase__rail .pub-thumb:nth-child(5) .pub-thumb__arrow[b-5c82jfh2nm] {
        opacity: 1;
        transform: none;
    }

.pub-page[dir="ltr"] .pub-showcase__radio:checked ~ .pub-showcase__rail .pub-thumb .pub-thumb__arrow[b-5c82jfh2nm] {
    transform: scaleX(-1);
}

    .pub-showcase__radio:nth-of-type(1):checked ~ .pub-showcase__rail .pub-thumb:nth-child(1) img[b-5c82jfh2nm],
    .pub-showcase__radio:nth-of-type(2):checked ~ .pub-showcase__rail .pub-thumb:nth-child(2) img[b-5c82jfh2nm],
    .pub-showcase__radio:nth-of-type(3):checked ~ .pub-showcase__rail .pub-thumb:nth-child(3) img[b-5c82jfh2nm],
    .pub-showcase__radio:nth-of-type(4):checked ~ .pub-showcase__rail .pub-thumb:nth-child(4) img[b-5c82jfh2nm],
    .pub-showcase__radio:nth-of-type(5):checked ~ .pub-showcase__rail .pub-thumb:nth-child(5) img[b-5c82jfh2nm] {
        transform: scale(1.12);
    }

.pub-showcase__radio:nth-of-type(1):focus-visible ~ .pub-showcase__rail .pub-thumb:nth-child(1)[b-5c82jfh2nm],
.pub-showcase__radio:nth-of-type(2):focus-visible ~ .pub-showcase__rail .pub-thumb:nth-child(2)[b-5c82jfh2nm],
.pub-showcase__radio:nth-of-type(3):focus-visible ~ .pub-showcase__rail .pub-thumb:nth-child(3)[b-5c82jfh2nm],
.pub-showcase__radio:nth-of-type(4):focus-visible ~ .pub-showcase__rail .pub-thumb:nth-child(4)[b-5c82jfh2nm],
.pub-showcase__radio:nth-of-type(5):focus-visible ~ .pub-showcase__rail .pub-thumb:nth-child(5)[b-5c82jfh2nm] {
    outline: 3px solid rgba(230, 173, 37, .6);
    outline-offset: 3px;
}

/* one sample: the viewer and its notes */

.pub-sample[b-5c82jfh2nm] {
    display: none;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 30px;
    margin: 0;
}

.pub-showcase__radio:nth-of-type(1):checked ~ .pub-showcase__panels .pub-sample:nth-child(1)[b-5c82jfh2nm],
.pub-showcase__radio:nth-of-type(2):checked ~ .pub-showcase__panels .pub-sample:nth-child(2)[b-5c82jfh2nm],
.pub-showcase__radio:nth-of-type(3):checked ~ .pub-showcase__panels .pub-sample:nth-child(3)[b-5c82jfh2nm],
.pub-showcase__radio:nth-of-type(4):checked ~ .pub-showcase__panels .pub-sample:nth-child(4)[b-5c82jfh2nm],
.pub-showcase__radio:nth-of-type(5):checked ~ .pub-showcase__panels .pub-sample:nth-child(5)[b-5c82jfh2nm] {
    display: grid;
    animation: pub-swap-b-5c82jfh2nm .6s cubic-bezier(.2, .8, .2, 1) both;
}

/* a slide beside the notes would be a strip; it takes the whole width
   and the notes go under it, two to a row */
.pub-sample--wide[b-5c82jfh2nm] {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
}

    .pub-sample--wide .pub-viewer[b-5c82jfh2nm] {
        width: 100%;
    }

    .pub-sample--wide .pub-notes[b-5c82jfh2nm] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pub-sample--wide .pub-switch[b-5c82jfh2nm] {
        max-width: 360px;
    }

.pub-viewer[b-5c82jfh2nm] {
    justify-self: center;
    width: min(540px, 100%);
    padding: 10px;
    border: 1px solid rgba(255, 236, 190, .12);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(58, 47, 36, .9), rgba(36, 29, 22, .9));
    box-shadow:
        0 50px 90px rgba(0, 0, 0, .5),
        0 0 0 1px rgba(0, 0, 0, .3),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

.pub-viewer__chrome[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 38px;
    padding: 0 6px 8px;
    color: #c9b99c;
    font-size: .78rem;
    font-weight: 700;
}

.pub-viewer__dots[b-5c82jfh2nm] {
    display: inline-flex;
    gap: 6px;
}

    .pub-viewer__dots i[b-5c82jfh2nm] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #5a4a38;
    }

        .pub-viewer__dots i:first-child[b-5c82jfh2nm] {
            background: #e0795f;
        }

        .pub-viewer__dots i:nth-child(2)[b-5c82jfh2nm] {
            background: #f0c85c;
        }

        .pub-viewer__dots i:nth-child(3)[b-5c82jfh2nm] {
            background: #7fc48a;
        }

.pub-viewer__file[b-5c82jfh2nm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline: auto;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .28);
    direction: ltr;
}

    .pub-viewer__file svg[b-5c82jfh2nm] {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: #f0c85c;
        stroke-width: 1.8;
        stroke-linejoin: round;
    }

.pub-viewer__live[b-5c82jfh2nm] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #f0c85c;
}

    .pub-viewer__live i[b-5c82jfh2nm] {
        position: relative;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #7fc48a;
    }

        .pub-viewer__live i[b-5c82jfh2nm]::after {
            content: "";
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            border: 1.5px solid #7fc48a;
            animation: pub-ping-b-5c82jfh2nm 2s ease-out infinite;
        }

/* the before / after slider */

.pub-compare[b-5c82jfh2nm] {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
    background: #fff;
    user-select: none;
    animation: pub-sweep-b-5c82jfh2nm 3.4s cubic-bezier(.65, 0, .35, 1) .7s 1;
}

    .pub-compare.is-touched[b-5c82jfh2nm] {
        animation: none;
    }

.pub-compare__img[b-5c82jfh2nm] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pub-compare__img--after[b-5c82jfh2nm],
.pub-compare__pins[b-5c82jfh2nm] {
    position: absolute;
    inset: 0;
    clip-path: inset(0 0 0 var(--pos));
}

.pub-compare__pins[b-5c82jfh2nm] {
    pointer-events: none;
}

.pub-pin[b-5c82jfh2nm] {
    position: absolute;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
    color: #2b210d;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 8px 20px rgba(120, 82, 6, .45);
    transform: translate(-50%, -50%);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), background .3s ease;
    animation: pub-pin-in-b-5c82jfh2nm .6s cubic-bezier(.3, 1.6, .5, 1) both;
    animation-delay: calc(1.2s + var(--d, 0) * .18s);
}

    .pub-pin[b-5c82jfh2nm]::after {
        content: "";
        position: absolute;
        inset: -6px;
        border: 2px solid rgba(240, 191, 75, .8);
        border-radius: 50%;
        animation: pub-ping-b-5c82jfh2nm 2.4s ease-out infinite;
        animation-delay: calc(var(--d, 0) * .5s);
    }

.pub-sample:has(.pub-notes li:nth-child(1):hover) .pub-pin:nth-child(1)[b-5c82jfh2nm],
.pub-sample:has(.pub-notes li:nth-child(2):hover) .pub-pin:nth-child(2)[b-5c82jfh2nm],
.pub-sample:has(.pub-notes li:nth-child(3):hover) .pub-pin:nth-child(3)[b-5c82jfh2nm],
.pub-sample:has(.pub-notes li:nth-child(4):hover) .pub-pin:nth-child(4)[b-5c82jfh2nm],
.pub-sample:has(.pub-notes li:nth-child(5):hover) .pub-pin:nth-child(5)[b-5c82jfh2nm] {
    transform: translate(-50%, -50%) scale(1.4);
    background: #fff;
}

.pub-compare__handle[b-5c82jfh2nm] {
    position: absolute;
    inset-block: 0;
    left: var(--pos);
    width: 2px;
    background: linear-gradient(180deg, var(--pub-gold-1), var(--pub-gold-2));
    box-shadow: 0 0 18px rgba(244, 205, 88, .7);
    transform: translateX(-1px);
    pointer-events: none;
}

    .pub-compare__handle span[b-5c82jfh2nm] {
        position: absolute;
        top: 50%;
        left: 50%;
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border: 3px solid #fff;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
        box-shadow: 0 10px 26px rgba(120, 82, 6, .45);
        transform: translate(-50%, -50%);
    }

    .pub-compare__handle svg[b-5c82jfh2nm] {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: #2b210d;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.pub-compare__tag[b-5c82jfh2nm] {
    position: absolute;
    inset-block-start: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(28, 23, 17, .8);
    color: #fff7e5;
    font-size: .74rem;
    font-weight: 700;
    pointer-events: none;
    backdrop-filter: blur(6px);
}

.pub-compare__tag--before[b-5c82jfh2nm] {
    left: 12px;
}

.pub-compare__tag--after[b-5c82jfh2nm] {
    right: 12px;
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
    color: #2b210d;
}

.pub-compare__range[b-5c82jfh2nm] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    appearance: none;
}

.pub-compare:has(.pub-compare__range:focus-visible)[b-5c82jfh2nm] {
    outline: 3px solid rgba(230, 173, 37, .6);
    outline-offset: 4px;
}

/* the notes beside the viewer */

.pub-sample__aside[b-5c82jfh2nm] {
    position: relative;
    padding: 28px 26px;
    border: 1px solid rgba(255, 236, 190, .12);
    border-radius: 26px;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(240, 191, 75, .12), transparent 60%),
        rgba(255, 255, 255, .04);
    color: var(--pub-dark-text);
    backdrop-filter: blur(10px);
}

.pub-sample__index[b-5c82jfh2nm] {
    color: #f0c85c;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
}

    .pub-sample__index i[b-5c82jfh2nm] {
        font-style: normal;
        opacity: .45;
        margin-inline: 2px;
    }

.pub-sample__aside h3[b-5c82jfh2nm] {
    margin: 10px 0 10px;
    color: var(--pub-dark-ink);
    font-size: 1.45rem;
    font-weight: 700;
}

.pub-sample__aside p[b-5c82jfh2nm] {
    margin: 0 0 20px;
    font-size: .93rem;
    line-height: 1.95;
}

.pub-notes[b-5c82jfh2nm] {
    display: grid;
    gap: 8px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

    .pub-notes li[b-5c82jfh2nm] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border: 1px solid rgba(255, 236, 190, .08);
        border-radius: 14px;
        background: rgba(0, 0, 0, .18);
        color: var(--pub-dark-ink);
        font-size: .88rem;
        font-weight: 600;
        cursor: default;
        transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
        animation: pub-note-in-b-5c82jfh2nm .5s cubic-bezier(.2, .8, .2, 1) both;
        animation-delay: calc(.25s + var(--d, 0) * .09s);
    }

        .pub-notes li:hover[b-5c82jfh2nm] {
            border-color: rgba(240, 200, 92, .45);
            background: rgba(240, 191, 75, .1);
            transform: translateX(-3px);
        }

.pub-page[dir="ltr"] .pub-notes li:hover[b-5c82jfh2nm] {
    transform: translateX(3px);
}

.pub-notes b[b-5c82jfh2nm] {
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
    color: #2b210d;
    font-size: .75rem;
}

.pub-switch[b-5c82jfh2nm] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(255, 236, 190, .12);
    border-radius: 14px;
    background: rgba(0, 0, 0, .25);
}

    .pub-switch button[b-5c82jfh2nm] {
        min-height: 36px;
        padding: 0 8px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--pub-dark-text);
        font: inherit;
        font-size: .84rem;
        font-weight: 700;
        cursor: pointer;
        transition: background-color .25s ease, color .25s ease;
    }

        .pub-switch button:hover[b-5c82jfh2nm] {
            color: var(--pub-dark-ink);
        }

        .pub-switch button.is-active[b-5c82jfh2nm] {
            background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
            color: #2b210d;
            box-shadow: 0 6px 16px rgba(214, 159, 34, .3);
        }

        .pub-switch button:focus-visible[b-5c82jfh2nm] {
            outline: 2px solid #f0c85c;
            outline-offset: 2px;
        }

/* ================= bento: what it does ================= */

.pub-bento[b-5c82jfh2nm] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 18px;
}

.pub-bento__card[b-5c82jfh2nm] {
    --mx: 50%;
    --my: 0%;
    position: relative;
    display: flex;
    flex-direction: column;
    grid-column: span 2;
    overflow: hidden;
    border: 1px solid var(--pub-line);
    border-radius: 28px;
    background: var(--pub-card);
    box-shadow: var(--pub-shadow);
    isolation: isolate;
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}

    .pub-bento__card[b-5c82jfh2nm]::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: radial-gradient(380px circle at var(--mx) var(--my), rgba(244, 205, 88, .16), transparent 45%);
        opacity: 0;
        transition: opacity .35s ease;
    }

    .pub-bento__card[b-5c82jfh2nm]::after {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1.5px;
        border-radius: inherit;
        background: radial-gradient(240px circle at var(--mx) var(--my), rgba(240, 191, 75, .95), transparent 60%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity .35s ease;
        pointer-events: none;
    }

    .pub-bento__card:hover[b-5c82jfh2nm] {
        transform: translateY(-5px);
        box-shadow: var(--pub-shadow-lift);
    }

        .pub-bento__card:hover[b-5c82jfh2nm]::before,
        .pub-bento__card:hover[b-5c82jfh2nm]::after {
            opacity: 1;
        }

    /* the first card is the big one */
    .pub-bento__card:nth-child(1)[b-5c82jfh2nm] {
        grid-column: span 3;
        grid-row: span 2;
        border-color: rgba(226, 179, 63, .2);
        background:
            radial-gradient(90% 70% at 100% 0%, rgba(240, 191, 75, .2), transparent 60%),
            var(--pub-dark);
    }

        .pub-bento__card:nth-child(1) h3[b-5c82jfh2nm] {
            color: var(--pub-dark-ink);
            font-size: 1.4rem;
        }

        .pub-bento__card:nth-child(1) p[b-5c82jfh2nm] {
            color: var(--pub-dark-text);
        }

        .pub-bento__card:nth-child(1) .pub-art[b-5c82jfh2nm] {
            flex: 1 1 auto;
            min-height: 300px;
            background:
                radial-gradient(60% 60% at 50% 50%, rgba(240, 191, 75, .14), transparent 70%),
                rgba(255, 255, 255, .03);
            border-color: rgba(255, 236, 190, .08);
        }

    /* the next two lie on their side */
    .pub-bento__card:nth-child(2)[b-5c82jfh2nm],
    .pub-bento__card:nth-child(3)[b-5c82jfh2nm] {
        grid-column: span 3;
        flex-direction: row;
        align-items: stretch;
    }

        .pub-bento__card:nth-child(2) .pub-art[b-5c82jfh2nm],
        .pub-bento__card:nth-child(3) .pub-art[b-5c82jfh2nm] {
            flex: 0 0 42%;
            margin: 10px;
            margin-inline-end: 0;
        }

        .pub-bento__card:nth-child(2) .pub-bento__copy[b-5c82jfh2nm],
        .pub-bento__card:nth-child(3) .pub-bento__copy[b-5c82jfh2nm] {
            align-self: center;
        }

.pub-bento__copy[b-5c82jfh2nm] {
    padding: 22px 26px 26px;
}

.pub-bento__icon[b-5c82jfh2nm] {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
    box-shadow: 0 10px 22px rgba(214, 159, 34, .25);
    transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}

    .pub-bento__icon[b-5c82jfh2nm]  svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: #2b210d;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.pub-bento__card:hover .pub-bento__icon[b-5c82jfh2nm] {
    transform: rotate(-8deg) scale(1.08);
}

.pub-bento__copy h3[b-5c82jfh2nm] {
    margin: 0 0 8px;
    color: var(--pub-ink);
    font-size: 1.12rem;
    font-weight: 700;
}

.pub-bento__copy p[b-5c82jfh2nm] {
    margin: 0;
    color: var(--pub-text);
    font-size: .93rem;
    line-height: 1.95;
}

/* ---------- the little moving pictures ---------- */

.pub-art[b-5c82jfh2nm] {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 168px;
    margin: 10px 10px 0;
    overflow: hidden;
    border: 1px solid var(--pub-line);
    border-radius: 20px;
    background:
        linear-gradient(rgba(155, 125, 48, .07) 1px, transparent 1px) 0 0 / 18px 18px,
        linear-gradient(90deg, rgba(155, 125, 48, .07) 1px, transparent 1px) 0 0 / 18px 18px,
        linear-gradient(180deg, rgba(255, 249, 235, .8), rgba(250, 242, 224, .6));
}

html[data-theme="dark"] .pub-art[b-5c82jfh2nm] {
    background:
        linear-gradient(rgba(240, 200, 92, .06) 1px, transparent 1px) 0 0 / 18px 18px,
        linear-gradient(90deg, rgba(240, 200, 92, .06) 1px, transparent 1px) 0 0 / 18px 18px,
        rgba(255, 255, 255, .03);
}

.art-icon[b-5c82jfh2nm]  svg {
    width: 56px;
    height: 56px;
    fill: none;
    stroke: var(--pub-gold-2);
    stroke-width: 1.4;
}

/* layout: a translation layer lands on the original page */

.pub-art--layout[b-5c82jfh2nm] {
    perspective: 900px;
}

.art-sheet[b-5c82jfh2nm] {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    width: 196px;
    height: 262px;
    padding: 14px;
    border-radius: 12px;
    translate: -50% -50%;
}

.art-sheet--base[b-5c82jfh2nm] {
    background: #fbf7ee;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}

.art-band[b-5c82jfh2nm] {
    align-self: stretch;
    height: 18px;
    border-radius: 5px;
    background: linear-gradient(90deg, #2c4a5a, #3d6d7e);
}

.art-block[b-5c82jfh2nm] {
    border-radius: 6px;
}

.art-block--photo[b-5c82jfh2nm] {
    width: 58%;
    height: 62px;
    background: linear-gradient(135deg, #7fb7c4, #3d6d7e);
}

.art-block--chart[b-5c82jfh2nm] {
    align-self: stretch;
    height: 46px;
    margin-top: auto;
    background:
        linear-gradient(0deg, #e6ad25 0 40%, transparent 40%) 10% 100% / 12% 100% no-repeat,
        linear-gradient(0deg, #e6ad25 0 70%, transparent 70%) 32% 100% / 12% 100% no-repeat,
        linear-gradient(0deg, #e6ad25 0 55%, transparent 55%) 54% 100% / 12% 100% no-repeat,
        linear-gradient(0deg, #e6ad25 0 85%, transparent 85%) 76% 100% / 12% 100% no-repeat,
        #f3ead6;
}

.art-line[b-5c82jfh2nm] {
    width: 100%;
    height: 7px;
    border-radius: 4px;
    background: #cfc5b3;
}

.art-line--s[b-5c82jfh2nm] {
    width: 72%;
}

.art-line--m[b-5c82jfh2nm] {
    width: 86%;
}

.art-sheet--base .art-line[b-5c82jfh2nm] {
    animation: pub-art-fade-b-5c82jfh2nm 6s ease-in-out infinite;
}

.art-sheet--layer[b-5c82jfh2nm] {
    padding-top: calc(14px + 18px + 7px + 62px + 7px);
    border: 1.5px dashed rgba(240, 191, 75, .8);
    background: rgba(240, 191, 75, .06);
    animation: pub-art-land-b-5c82jfh2nm 6s cubic-bezier(.3, .8, .2, 1) infinite;
}

    .art-sheet--layer .art-line[b-5c82jfh2nm] {
        background: linear-gradient(90deg, #e6ad25, #ffd977);
        box-shadow: 0 0 10px rgba(244, 205, 88, .5);
    }

.art-tag[b-5c82jfh2nm] {
    position: absolute;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .35);
}

.art-tag--one[b-5c82jfh2nm] {
    bottom: 12%;
    inset-inline-start: 7%;
    background: #fbf7ee;
    color: #3a2f22;
    animation: pub-float-b-5c82jfh2nm 5s ease-in-out infinite;
}

.art-tag--two[b-5c82jfh2nm] {
    top: 11%;
    inset-inline-end: 7%;
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
    color: #2b210d;
    animation: pub-float-b-5c82jfh2nm 6s ease-in-out .8s infinite;
}

/* mirror: the picture and the text change sides */

.art-mirror[b-5c82jfh2nm] {
    position: relative;
    width: 80%;
    max-width: 230px;
}

.art-mirror__page[b-5c82jfh2nm] {
    position: relative;
    display: block;
    height: 124px;
    border-radius: 12px;
    background: #fffdf8;
    box-shadow: 0 18px 36px rgba(87, 64, 22, .16);
}

.art-mirror__pic[b-5c82jfh2nm],
.art-mirror__text[b-5c82jfh2nm] {
    position: absolute;
    top: 14px;
    bottom: 14px;
    width: 38%;
    animation: pub-art-swap-b-5c82jfh2nm 5s cubic-bezier(.7, 0, .3, 1) infinite;
}

.art-mirror__pic[b-5c82jfh2nm] {
    left: 8%;
    border-radius: 8px;
    background: linear-gradient(135deg, #f4cd58, #d89a1c);
}

.art-mirror__text[b-5c82jfh2nm] {
    left: 54%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    animation-name: pub-art-swap-back-b-5c82jfh2nm;
}

    .art-mirror__text b[b-5c82jfh2nm] {
        display: block;
        height: 7px;
        border-radius: 4px;
        background: #cfc5b3;
    }

        .art-mirror__text b:nth-child(2)[b-5c82jfh2nm] {
            width: 70%;
        }

        .art-mirror__text b:nth-child(4)[b-5c82jfh2nm] {
            width: 82%;
        }

.art-mirror__axis[b-5c82jfh2nm] {
    position: absolute;
    inset-block: -14px;
    left: 50%;
    border-left: 1.5px dashed rgba(201, 150, 26, .7);
}

    .art-mirror__axis[b-5c82jfh2nm]::after {
        content: "⇄";
        position: absolute;
        bottom: -12px;
        left: 50%;
        display: grid;
        place-items: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
        color: #2b210d;
        font-size: .85rem;
        font-style: normal;
        font-weight: 700;
        transform: translateX(-50%);
        box-shadow: 0 6px 14px rgba(214, 159, 34, .35);
    }

/* scan: a beam reads the page */

.art-scan[b-5c82jfh2nm] {
    position: relative;
    width: 70%;
    max-width: 200px;
    height: 130px;
    padding: 16px;
    border-radius: 12px;
    background: #f5efe2;
    box-shadow: 0 18px 36px rgba(87, 64, 22, .16);
}

.art-scan__layer[b-5c82jfh2nm] {
    position: absolute;
    inset: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .art-scan__layer i[b-5c82jfh2nm] {
        display: block;
        height: 7px;
        border-radius: 4px;
    }

        .art-scan__layer i:nth-child(2n)[b-5c82jfh2nm] {
            width: 78%;
        }

.art-scan__layer--faint i[b-5c82jfh2nm] {
    background: repeating-linear-gradient(90deg, #cdbfa3 0 6px, transparent 6px 10px);
    opacity: .7;
}

.art-scan__layer--read[b-5c82jfh2nm] {
    clip-path: inset(0 0 100% 0);
    animation: pub-art-read-b-5c82jfh2nm 3.6s ease-in-out infinite;
}

    .art-scan__layer--read i[b-5c82jfh2nm] {
        background: #3a2f22;
    }

.art-scan__beam[b-5c82jfh2nm] {
    position: absolute;
    left: -6%;
    right: -6%;
    top: 18px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, #f4cd58 20%, #fff3c4 50%, #f4cd58 80%, transparent);
    box-shadow: 0 0 18px 5px rgba(244, 205, 88, .55);
    animation: pub-art-beam-b-5c82jfh2nm 3.6s ease-in-out infinite;
}

/* formula: table marks pop into their cells; the formula stays */

.pub-art--formula[b-5c82jfh2nm] {
    grid-auto-flow: column;
    gap: 18px;
}

.art-grid[b-5c82jfh2nm] {
    display: grid;
    grid-template-columns: repeat(4, 26px);
    gap: 5px;
    padding: 8px;
    border-radius: 10px;
    background: #fffdf8;
    box-shadow: 0 14px 30px rgba(87, 64, 22, .14);
}

    .art-grid i[b-5c82jfh2nm] {
        display: grid;
        place-items: center;
        height: 22px;
        border-radius: 5px;
        background: #f3ead6;
        color: #b78507;
        font-size: .72rem;
        font-style: normal;
        font-weight: 700;
        animation: pub-art-pop-b-5c82jfh2nm 4s ease-out infinite;
        animation-delay: calc(var(--c) * .1s);
    }

        .art-grid i:nth-child(4n + 2)[b-5c82jfh2nm] {
            color: #c4573d;
        }

.art-formula[b-5c82jfh2nm] {
    padding: 10px 14px;
    border: 1px solid rgba(226, 179, 63, .45);
    border-radius: 12px;
    background: var(--pub-card-solid);
    color: var(--pub-ink);
    font-family: "Cambria Math", "Times New Roman", serif;
    font-size: 1.05rem;
    font-style: italic;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(87, 64, 22, .12);
    animation: pub-float-b-5c82jfh2nm 5s ease-in-out infinite;
}

/* figure: the labels of a chart change language */

.art-flow[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    gap: 22px;
    direction: ltr;
}

.art-flow__node[b-5c82jfh2nm] {
    position: relative;
    display: grid;
    width: 70px;
    height: 36px;
    border: 1.5px solid rgba(226, 179, 63, .7);
    border-radius: 10px;
    background: var(--pub-card-solid);
    box-shadow: 0 10px 22px rgba(87, 64, 22, .12);
}

    .art-flow__node:not(:last-child)[b-5c82jfh2nm]::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 100%;
        width: 22px;
        height: 2px;
        background: linear-gradient(90deg, rgba(226, 179, 63, .7), #e6ad25);
    }

    .art-flow__node b[b-5c82jfh2nm] {
        grid-area: 1 / 1;
        place-self: center;
        font-size: .74rem;
        font-weight: 700;
        color: var(--pub-ink);
        animation: pub-art-lang-b-5c82jfh2nm 5s ease-in-out infinite;
        animation-delay: calc(var(--n) * .35s);
    }

    .art-flow__node .art-flow__fa[b-5c82jfh2nm] {
        font-family: IRANSansX, Tahoma, sans-serif;
        color: var(--pub-gold-ink);
        animation-name: pub-art-lang-in-b-5c82jfh2nm;
    }

/* check: a ring fills while each figure is ticked */

.art-check[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    gap: 22px;
}

.art-check__ring[b-5c82jfh2nm] {
    width: 70px;
    height: 70px;
    transform: rotate(-90deg);
}

    .art-check__ring circle[b-5c82jfh2nm] {
        fill: none;
        stroke: rgba(226, 179, 63, .2);
        stroke-width: 6;
    }

    .art-check__ring .art-check__arc[b-5c82jfh2nm] {
        stroke: #e6ad25;
        stroke-linecap: round;
        stroke-dasharray: 164;
        stroke-dashoffset: 164;
        animation: pub-art-ring-b-5c82jfh2nm 4s ease-in-out infinite;
    }

.art-check__rows[b-5c82jfh2nm] {
    display: grid;
    gap: 7px;
}

    .art-check__rows span[b-5c82jfh2nm] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .art-check__rows code[b-5c82jfh2nm] {
        min-width: 86px;
        padding: 5px 9px;
        border-radius: 8px;
        background: var(--pub-card-solid);
        color: var(--pub-ink);
        font-size: .74rem;
        box-shadow: 0 6px 14px rgba(87, 64, 22, .1);
    }

    .art-check__rows i[b-5c82jfh2nm] {
        display: grid;
        place-items: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #6fb57c;
        color: #fff;
        font-size: .7rem;
        font-style: normal;
        animation: pub-art-pop-b-5c82jfh2nm 4s ease-out infinite;
        animation-delay: calc(.6s + var(--r) * .5s);
    }

/* header: the header, a footnote and the footer light up in turn */

.art-doc[b-5c82jfh2nm] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 64%;
    max-width: 176px;
    padding: 10px;
    border-radius: 12px;
    background: #fffdf8;
    box-shadow: 0 18px 36px rgba(87, 64, 22, .16);
}

.art-doc__zone[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 7px;
    border: 1.5px dashed transparent;
    border-radius: 7px;
    animation: pub-art-focus-b-5c82jfh2nm 4.5s ease-in-out infinite;
    animation-delay: calc(var(--z) * 1.5s);
}

    .art-doc__zone b[b-5c82jfh2nm] {
        display: block;
        flex: 1;
        height: 6px;
        border-radius: 3px;
        background: #cfc5b3;
    }

.art-doc__zone--head[b-5c82jfh2nm] {
    background: #f3ead6;
}

    .art-doc__zone--head b[b-5c82jfh2nm] {
        flex: 0 0 46%;
        background: #3d6d7e;
    }

.art-doc__zone--note sup[b-5c82jfh2nm] {
    color: #b78507;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
}

.art-doc__zone--note b[b-5c82jfh2nm] {
    flex: 0 0 60%;
    height: 5px;
}

.art-doc__zone--foot[b-5c82jfh2nm] {
    border-top-color: rgba(155, 125, 48, .25);
}

    .art-doc__zone--foot b[b-5c82jfh2nm] {
        flex: 0 0 30%;
        margin-inline: auto;
        height: 5px;
    }

.art-doc__lines[b-5c82jfh2nm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 7px;
}

    .art-doc__lines b[b-5c82jfh2nm] {
        display: block;
        height: 6px;
        border-radius: 3px;
        background: #e3dac8;
    }

        .art-doc__lines b:nth-child(2n)[b-5c82jfh2nm] {
            width: 80%;
        }

/* runs: bold, italic and links keep their look in the new language */

.art-runs[b-5c82jfh2nm] {
    display: grid;
    gap: 12px;
    width: 82%;
    max-width: 240px;
}

.art-runs__line[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .art-runs__line > i[b-5c82jfh2nm] {
        display: block;
        flex: 1;
        height: 7px;
        border-radius: 4px;
        background: #d6ccb9;
    }

        .art-runs__line > i:last-child[b-5c82jfh2nm] {
            flex: .6;
        }

.art-runs__chip[b-5c82jfh2nm] {
    display: grid;
    min-width: 70px;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--pub-card-solid);
    box-shadow: 0 6px 14px rgba(87, 64, 22, .12);
}

    .art-runs__chip b[b-5c82jfh2nm] {
        grid-area: 1 / 1;
        place-self: center;
        color: var(--pub-ink);
        font-size: .78rem;
        font-weight: 400;
        animation: pub-art-lang-b-5c82jfh2nm 5s ease-in-out infinite;
        animation-delay: calc(var(--n) * .35s);
    }

    .art-runs__chip .art-runs__fa[b-5c82jfh2nm] {
        font-family: IRANSansX, Tahoma, sans-serif;
        animation-name: pub-art-lang-in-b-5c82jfh2nm;
    }

.art-runs__chip--bold b[b-5c82jfh2nm] {
    font-weight: 800;
}

.art-runs__chip--italic b[b-5c82jfh2nm] {
    font-style: italic;
}

.art-runs__chip--link b[b-5c82jfh2nm] {
    color: #2f6fb0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* memory: a sentence travels from an old document into the new one */

.art-memory[b-5c82jfh2nm] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 34px;
}

.art-memory__page[b-5c82jfh2nm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 76px;
    padding: 12px 10px;
    border-radius: 10px;
    background: #fffdf8;
    box-shadow: 0 14px 30px rgba(87, 64, 22, .15);
}

    .art-memory__page:first-child[b-5c82jfh2nm] {
        opacity: .75;
        transform: rotate(-4deg);
    }

    .art-memory__page b[b-5c82jfh2nm] {
        display: block;
        height: 6px;
        border-radius: 3px;
        background: #d6ccb9;
    }

        .art-memory__page b:nth-child(2n)[b-5c82jfh2nm] {
            width: 78%;
        }

.art-memory__hit[b-5c82jfh2nm] {
    background: linear-gradient(90deg, #e6ad25, #ffd977) !important;
}

.art-memory__slot[b-5c82jfh2nm] {
    animation: pub-art-fill-b-5c82jfh2nm 4s ease-in-out infinite;
}

.art-memory__fly[b-5c82jfh2nm] {
    position: absolute;
    top: 26px;
    left: 10px;
    width: 52px;
    height: 7px;
    border-radius: 4px;
    background: linear-gradient(90deg, #e6ad25, #ffd977);
    box-shadow: 0 0 12px rgba(244, 205, 88, .7);
    animation: pub-art-fly-b-5c82jfh2nm 4s cubic-bezier(.6, 0, .3, 1) infinite;
}

.art-memory__badge[b-5c82jfh2nm] {
    position: absolute;
    top: -26px;
    left: 50%;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
    color: #2b210d;
    font-family: IRANSansX, "Segoe UI", sans-serif;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
    translate: -50% 0;
    box-shadow: 0 8px 18px rgba(214, 159, 34, .3);
    animation: pub-float-b-5c82jfh2nm 4s ease-in-out infinite;
}

@keyframes pub-art-focus-b-5c82jfh2nm {
    0%, 4% {
        border-color: transparent;
        box-shadow: none;
    }

    10%, 28% {
        border-color: rgba(230, 173, 37, .9);
        box-shadow: 0 0 0 3px rgba(244, 205, 88, .22);
    }

    36%, 100% {
        border-color: transparent;
        box-shadow: none;
    }
}

@keyframes pub-art-fly-b-5c82jfh2nm {
    0%, 10% {
        opacity: 0;
        transform: translate(0, 0);
    }

    16% {
        opacity: 1;
    }

    52% {
        opacity: 1;
        transform: translate(112px, 0);
    }

    58%, 100% {
        opacity: 0;
        transform: translate(112px, 0);
    }
}

@keyframes pub-art-fill-b-5c82jfh2nm {
    0%, 50% {
        background: #d6ccb9;
    }

    56%, 90% {
        background: #f0c85c;
        box-shadow: 0 0 10px rgba(244, 205, 88, .6);
    }

    100% {
        background: #d6ccb9;
    }
}

/* ================= gallery: posters side by side ================= */

.pub-gallery[b-5c82jfh2nm] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: center;
    gap: 30px;
    max-width: 1060px;
    margin-inline: auto;
    padding-top: 20px;
}

.pub-poster[b-5c82jfh2nm] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
}

    .pub-poster:nth-child(3n + 2)[b-5c82jfh2nm] {
        translate: 0 -28px;
    }

.pub-poster__frame[b-5c82jfh2nm] {
    position: relative;
    padding: 9px;
    border: 1px solid rgba(255, 236, 190, .12);
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(58, 47, 36, .92), rgba(36, 29, 22, .92));
    box-shadow:
        0 44px 80px rgba(0, 0, 0, .5),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease;
}

    .pub-poster__frame[b-5c82jfh2nm]::after {
        content: "";
        position: absolute;
        inset: auto 12% -26px;
        z-index: -1;
        height: 60px;
        border-radius: 50%;
        background: rgba(240, 191, 75, .28);
        filter: blur(30px);
        opacity: .5;
        transition: opacity .5s ease;
    }

.pub-poster:hover .pub-poster__frame[b-5c82jfh2nm] {
    transform: translateY(-8px) rotate(-.6deg);
    box-shadow:
        0 56px 96px rgba(0, 0, 0, .55),
        0 0 0 1px rgba(240, 200, 92, .35),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

    .pub-poster:hover .pub-poster__frame[b-5c82jfh2nm]::after {
        opacity: 1;
    }

.pub-compare--poster[b-5c82jfh2nm] {
    border-radius: 18px;
    animation-delay: calc(.8s + var(--i, 0) * .7s);
}

.pub-poster__caption[b-5c82jfh2nm] {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 0 10px;
    text-align: center;
}

    .pub-poster__caption strong[b-5c82jfh2nm] {
        color: var(--pub-dark-ink);
        font-size: 1.12rem;
        font-weight: 700;
    }

    .pub-poster__caption p[b-5c82jfh2nm] {
        margin: 0;
        color: var(--pub-dark-text);
        font-size: .9rem;
        line-height: 1.9;
    }

.pub-poster__route[b-5c82jfh2nm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1px solid rgba(240, 200, 92, .3);
    border-radius: 999px;
    background: rgba(240, 191, 75, .08);
    color: #f0c85c;
    font-size: .74rem;
    letter-spacing: .08em;
}

    .pub-poster__route i[b-5c82jfh2nm] {
        position: relative;
        width: 34px;
        height: 2px;
        overflow: hidden;
        border-radius: 2px;
        background: rgba(240, 200, 92, .25);
    }

        .pub-poster__route i[b-5c82jfh2nm]::after {
            content: "";
            position: absolute;
            inset: 0;
            width: 50%;
            background: linear-gradient(90deg, transparent, #f4cd58);
            animation: pub-route-b-5c82jfh2nm 1.6s linear infinite;
        }

@keyframes pub-route-b-5c82jfh2nm {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(200%);
    }
}

@supports (animation-timeline: view()) {
    .pub-poster[b-5c82jfh2nm] {
        animation: pub-tilt-in-b-5c82jfh2nm linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }
}

@media (max-width: 900px) {
    .pub-gallery[b-5c82jfh2nm] {
        grid-auto-columns: min(78%, 340px);
        gap: 18px;
        overflow-x: auto;
        padding: 10px 4px 20px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .pub-poster[b-5c82jfh2nm] {
        scroll-snap-align: center;
    }

        .pub-poster:nth-child(3n + 2)[b-5c82jfh2nm] {
            translate: none;
        }
}

/* repaint: the words on a poster are wiped away and written again */

.art-poster[b-5c82jfh2nm] {
    position: relative;
    width: 216px;
    height: 286px;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(165deg, #2c3240, #14171e);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}

.art-poster__photo[b-5c82jfh2nm] {
    position: absolute;
    inset: 0 0 52%;
    background:
        linear-gradient(115deg, transparent 55%, rgba(155, 95, 210, .7) 55% 62%, transparent 62%),
        linear-gradient(115deg, transparent 66%, rgba(60, 160, 220, .6) 66% 71%, transparent 71%),
        linear-gradient(180deg, #d9dde3, #9aa2ad);
}

.art-poster__title[b-5c82jfh2nm] {
    position: absolute;
    top: 52%;
    left: 12px;
    right: 12px;
    display: grid;
    height: 34px;
    place-items: center;
}

    .art-poster__title b[b-5c82jfh2nm] {
        grid-area: 1 / 1;
        color: #3fa2e8;
        font-size: 1.25rem;
        font-weight: 800;
        white-space: nowrap;
    }

.art-poster__en[b-5c82jfh2nm] {
    font-family: "Segoe UI", Arial, sans-serif;
    animation: pub-art-old-b-5c82jfh2nm 6s ease-in-out infinite;
}

.art-poster__fa[b-5c82jfh2nm] {
    font-family: IRANSansX, Tahoma, sans-serif;
    animation: pub-art-new-b-5c82jfh2nm 6s ease-in-out infinite;
}

.art-poster__brush[b-5c82jfh2nm] {
    position: absolute;
    inset: 2px -4px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f4cd58, #ffe9a6, #e6ad25);
    box-shadow: 0 0 18px rgba(244, 205, 88, .6);
    transform-origin: left center;
    animation: pub-art-brush-b-5c82jfh2nm 6s cubic-bezier(.6, 0, .3, 1) infinite;
}

.art-poster__lines[b-5c82jfh2nm] {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    display: grid;
    gap: 9px;
}

    .art-poster__lines i[b-5c82jfh2nm] {
        display: block;
        height: 6px;
        border-radius: 3px;
        background: rgba(255, 255, 255, .35);
        justify-self: end;
        width: 100%;
    }

        .art-poster__lines i:nth-child(2n)[b-5c82jfh2nm] {
            width: 74%;
        }

/* textfile: the translated text also comes as a plain text file */

.art-txt[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.art-txt__img[b-5c82jfh2nm] {
    display: grid;
    align-content: end;
    gap: 6px;
    width: 64px;
    height: 92px;
    padding: 10px 8px;
    border-radius: 9px;
    background:
        linear-gradient(180deg, #9aa2ad 0 38%, transparent 38%),
        linear-gradient(165deg, #2c3240, #14171e);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .25);
}

    .art-txt__img i[b-5c82jfh2nm] {
        display: block;
        height: 5px;
        border-radius: 3px;
        background: rgba(255, 255, 255, .5);
    }

.art-txt__arrow[b-5c82jfh2nm] {
    position: relative;
    width: 40px;
    height: 2px;
    background: repeating-linear-gradient(90deg, #e6ad25 0 6px, transparent 6px 10px);
    background-size: 20px 2px;
    animation: pub-art-dash-b-5c82jfh2nm 1s linear infinite;
}

    .art-txt__arrow[b-5c82jfh2nm]::after {
        content: "";
        position: absolute;
        right: -2px;
        top: -4px;
        border: 5px solid transparent;
        border-left: 7px solid #e6ad25;
        border-right: 0;
    }

.art-txt__file[b-5c82jfh2nm] {
    position: relative;
    display: grid;
    align-content: start;
    gap: 7px;
    width: 76px;
    height: 96px;
    padding: 26px 10px 10px;
    border-radius: 9px;
    background: #fffdf8;
    box-shadow: 0 14px 28px rgba(87, 64, 22, .16);
}

    .art-txt__file em[b-5c82jfh2nm] {
        position: absolute;
        top: 7px;
        left: 8px;
        padding: 1px 6px;
        border-radius: 4px;
        background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
        color: #2b210d;
        font-size: .6rem;
        font-style: normal;
        font-weight: 800;
    }

    .art-txt__file b[b-5c82jfh2nm] {
        display: block;
        height: 5px;
        border-radius: 3px;
        background: #b9ad97;
        transform-origin: left center;
        animation: pub-art-type-b-5c82jfh2nm 4s ease-out infinite;
    }

        .art-txt__file b:nth-of-type(2)[b-5c82jfh2nm] {
            width: 80%;
            animation-delay: .35s;
        }

        .art-txt__file b:nth-of-type(3)[b-5c82jfh2nm] {
            animation-delay: .7s;
        }

        .art-txt__file b:nth-of-type(4)[b-5c82jfh2nm] {
            width: 60%;
            animation-delay: 1.05s;
        }

@keyframes pub-art-brush-b-5c82jfh2nm {
    0%, 18% {
        transform: scaleX(0);
        transform-origin: left center;
    }

    34% {
        transform: scaleX(1);
        transform-origin: left center;
    }

    35% {
        transform: scaleX(1);
        transform-origin: right center;
    }

    52%, 100% {
        transform: scaleX(0);
        transform-origin: right center;
    }
}

@keyframes pub-art-old-b-5c82jfh2nm {
    0%, 33% {
        opacity: 1;
    }

    34%, 92% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes pub-art-new-b-5c82jfh2nm {
    0%, 34% {
        opacity: 0;
    }

    36%, 90% {
        opacity: 1;
    }

    96%, 100% {
        opacity: 0;
    }
}

@keyframes pub-art-dash-b-5c82jfh2nm {
    to {
        background-position: 20px 0;
    }
}

@keyframes pub-art-type-b-5c82jfh2nm {
    0%, 8% {
        transform: scaleX(0);
    }

    24%, 86% {
        transform: scaleX(1);
    }

    100% {
        transform: scaleX(0);
    }
}

/* ================= marks: a term and its translation ================= */

.pub-mark[b-5c82jfh2nm] {
    --mark: 240, 191, 75;
    padding: 0 3px;
    border-radius: 5px;
    background:
        linear-gradient(rgba(var(--mark), .28), rgba(var(--mark), .28)) no-repeat left bottom / 100% 100%;
    box-shadow: inset 0 -2px 0 rgba(var(--mark), .9);
    color: inherit;
    transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.pub-mark--number[b-5c82jfh2nm] {
    --mark: 111, 196, 140;
}

.pub-mark--ref[b-5c82jfh2nm] {
    --mark: 96, 160, 240;
}

.pub-mark--name[b-5c82jfh2nm] {
    --mark: 186, 140, 245;
}

.pub-mark--hedge[b-5c82jfh2nm] {
    --mark: 240, 128, 160;
}

/* ================= hero: a live translation ================= */

.pub-live[b-5c82jfh2nm] {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    padding: 18px 20px 22px;
    border: 1px solid rgba(77, 63, 24, .16);
    border-radius: 22px;
    background: var(--pub-card-solid);
    box-shadow: 0 34px 70px rgba(59, 48, 23, .2), inset 0 1px 0 rgba(255, 255, 255, .7);
    transform: rotate(-1.5deg);
    animation: pub-hover-b-5c82jfh2nm 8s ease-in-out infinite;
}

.pub-live__head[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.pub-live__text[b-5c82jfh2nm] {
    margin: 0;
    color: var(--pub-ink);
    font-size: .92rem;
    line-height: 1.95;
}

.pub-live__text--source[b-5c82jfh2nm] {
    font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    color: var(--pub-text);
}

.pub-live__text--target[b-5c82jfh2nm] {
    clip-path: inset(0 0 0 100%);
    animation: pub-live-rtl-b-5c82jfh2nm 9s cubic-bezier(.6, 0, .3, 1) .8s infinite;
}

.pub-live__text--ltr[b-5c82jfh2nm] {
    clip-path: inset(0 100% 0 0);
    animation-name: pub-live-ltr-b-5c82jfh2nm;
}

.pub-live__divider[b-5c82jfh2nm] {
    position: relative;
    display: block;
    height: 2px;
    margin: 14px 0;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(226, 179, 63, .2);
}

    .pub-live__divider i[b-5c82jfh2nm] {
        position: absolute;
        inset: 0;
        width: 40%;
        background: linear-gradient(90deg, transparent, #f4cd58, transparent);
        animation: pub-route-b-5c82jfh2nm 2.2s linear infinite;
    }

.pub-live .pub-poster__route[b-5c82jfh2nm] {
    color: var(--pub-gold-ink);
}

@keyframes pub-live-rtl-b-5c82jfh2nm {
    0%, 10% {
        clip-path: inset(0 0 0 100%);
    }

    45%, 88% {
        clip-path: inset(0 0 0 0);
    }

    100% {
        clip-path: inset(0 0 0 100%);
    }
}

@keyframes pub-live-ltr-b-5c82jfh2nm {
    0%, 10% {
        clip-path: inset(0 100% 0 0);
    }

    45%, 88% {
        clip-path: inset(0 0 0 0);
    }

    100% {
        clip-path: inset(0 100% 0 0);
    }
}

/* ================= notice ================= */

.pub-notice[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
    padding: 16px 20px;
    border: 1px solid rgba(226, 92, 70, .28);
    border-radius: 18px;
    background: rgba(226, 92, 70, .07);
}

    .pub-notice p[b-5c82jfh2nm] {
        margin: 0;
        color: var(--pub-ink);
        font-size: .92rem;
        line-height: 1.9;
    }

.pub-notice__icon svg[b-5c82jfh2nm] {
    display: block;
    width: 26px;
    height: 26px;
    fill: none;
    stroke: #d2604b;
    stroke-width: 1.9;
    stroke-linecap: round;
}

/* ================= passages ================= */

.pub-legend[b-5c82jfh2nm] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
    margin: -18px 0 34px;
    padding: 0;
    list-style: none;
    color: var(--pub-dark-text);
    font-size: .84rem;
}

    .pub-legend li[b-5c82jfh2nm] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .pub-legend i[b-5c82jfh2nm] {
        display: inline-block;
        width: 22px;
        height: 12px;
        padding: 0;
    }

.pub-passages[b-5c82jfh2nm] {
    display: grid;
    gap: 22px;
    max-width: 1040px;
    margin-inline: auto;
}

.pub-passage[b-5c82jfh2nm] {
    position: relative;
    padding: 22px 26px 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 236, 190, .12);
    border-radius: 26px;
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(240, 191, 75, .1), transparent 60%),
        rgba(255, 255, 255, .04);
    backdrop-filter: blur(10px);
    transition: border-color .35s ease, transform .35s ease;
}

    .pub-passage:hover[b-5c82jfh2nm] {
        border-color: rgba(240, 200, 92, .35);
    }

.pub-passage__head[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.pub-passage__index[b-5c82jfh2nm] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
    color: #2b210d;
    font-weight: 800;
    font-size: .9rem;
}

.pub-passage__title[b-5c82jfh2nm] {
    display: grid;
    gap: 2px;
    margin-inline-end: auto;
}

    .pub-passage__title strong[b-5c82jfh2nm] {
        color: var(--pub-dark-ink);
        font-size: 1.05rem;
    }

    .pub-passage__title small[b-5c82jfh2nm] {
        color: #9a8b72;
        font-size: .8rem;
        font-weight: 600;
    }

.pub-passage__body[b-5c82jfh2nm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    align-items: stretch;
    gap: 14px;
}

.pub-passage__side[b-5c82jfh2nm] {
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(0, 0, 0, .22);
}

.pub-passage__side--target[b-5c82jfh2nm] {
    background: rgba(240, 191, 75, .07);
    box-shadow: inset 0 0 0 1px rgba(240, 191, 75, .16);
}

.pub-passage__lang[b-5c82jfh2nm] {
    display: block;
    margin-bottom: 8px;
    color: #9a8b72;
    font-size: .74rem;
    font-weight: 700;
}

.pub-passage__side--target .pub-passage__lang[b-5c82jfh2nm] {
    color: #f0c85c;
}

.pub-passage__text[b-5c82jfh2nm] {
    margin: 0;
    color: var(--pub-dark-ink);
    font-size: .95rem;
    line-height: 2.05;
}

    .pub-passage__text[dir="ltr"][b-5c82jfh2nm] {
        font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
        line-height: 1.85;
    }

.pub-passage__arrow[b-5c82jfh2nm] {
    position: relative;
    display: grid;
    place-items: center;
}

    .pub-passage__arrow i[b-5c82jfh2nm] {
        position: relative;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
        box-shadow: 0 0 0 6px rgba(240, 191, 75, .12), 0 10px 22px rgba(214, 159, 34, .3);
        animation: pub-pulse-b-5c82jfh2nm 2.6s ease-in-out infinite;
    }

        .pub-passage__arrow i[b-5c82jfh2nm]::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 9px;
            height: 9px;
            border-top: 2.4px solid #2b210d;
            border-right: 2.4px solid #2b210d;
            transform: translate(-65%, -50%) rotate(45deg);
        }

.pub-page[dir="rtl"] .pub-passage__arrow i[b-5c82jfh2nm]::after {
    transform: translate(-35%, -50%) rotate(-135deg);
}

.pub-passage__credit[b-5c82jfh2nm] {
    margin-top: 14px;
    color: #8f8270;
    font-size: .76rem;
}

.pub-passage .pub-mark[b-5c82jfh2nm] {
    cursor: default;
}

/* point at a term, and its pair lights up on the other side */
.pub-passage:has(.pub-mark[data-k="0"]:hover) .pub-mark[data-k="0"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="1"]:hover) .pub-mark[data-k="1"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="2"]:hover) .pub-mark[data-k="2"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="3"]:hover) .pub-mark[data-k="3"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="4"]:hover) .pub-mark[data-k="4"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="5"]:hover) .pub-mark[data-k="5"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="6"]:hover) .pub-mark[data-k="6"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="7"]:hover) .pub-mark[data-k="7"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="8"]:hover) .pub-mark[data-k="8"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="9"]:hover) .pub-mark[data-k="9"][b-5c82jfh2nm] {
    background-color: rgba(var(--mark), .55);
    box-shadow: inset 0 -2px 0 rgba(var(--mark), 1), 0 0 0 2px rgba(var(--mark), .9), 0 0 18px rgba(var(--mark), .6);
}

/* while some term is pointed at, the rest step back */
.pub-passage:has(.pub-mark:hover) .pub-mark[b-5c82jfh2nm] {
    opacity: .45;
}

.pub-passage:has(.pub-mark[data-k="0"]:hover) .pub-mark[data-k="0"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="1"]:hover) .pub-mark[data-k="1"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="2"]:hover) .pub-mark[data-k="2"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="3"]:hover) .pub-mark[data-k="3"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="4"]:hover) .pub-mark[data-k="4"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="5"]:hover) .pub-mark[data-k="5"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="6"]:hover) .pub-mark[data-k="6"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="7"]:hover) .pub-mark[data-k="7"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="8"]:hover) .pub-mark[data-k="8"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="9"]:hover) .pub-mark[data-k="9"][b-5c82jfh2nm] {
    opacity: 1;
}

/* the marks light up one by one as the passage scrolls in */
@supports (animation-timeline: view()) {
    .pub-passage .pub-mark[b-5c82jfh2nm] {
        animation: pub-mark-in-b-5c82jfh2nm linear both;
        animation-timeline: view();
        animation-range: entry calc(20% + var(--m, 0) * 6%) cover calc(30% + var(--m, 0) * 4%);
    }
}

@keyframes pub-mark-in-b-5c82jfh2nm {
    from {
        background-size: 0% 100%;
    }

    to {
        background-size: 100% 100%;
    }
}

@keyframes pub-pulse-b-5c82jfh2nm {
    0%, 100% {
        box-shadow: 0 0 0 6px rgba(240, 191, 75, .12), 0 10px 22px rgba(214, 159, 34, .3);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(240, 191, 75, .05), 0 10px 22px rgba(214, 159, 34, .3);
    }
}

/* ================= drawings: pairs and kept ================= */

.art-pairs[b-5c82jfh2nm] {
    display: grid;
    gap: 10px;
    width: min(90%, 340px);
}

.art-pairs__row[b-5c82jfh2nm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
}

    .art-pairs__row b[b-5c82jfh2nm] {
        padding: 7px 10px;
        overflow: hidden;
        border-radius: 10px;
        font-size: .8rem;
        font-weight: 700;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.art-pairs__from[b-5c82jfh2nm] {
    background: var(--pub-card-solid);
    color: var(--pub-text);
    font-family: "Segoe UI", Arial, sans-serif;
    box-shadow: 0 6px 14px rgba(87, 64, 22, .1);
}

.art-pairs__to[b-5c82jfh2nm] {
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
    color: #2b210d;
    box-shadow: 0 8px 18px rgba(214, 159, 34, .28);
    font-family: IRANSansX, Tahoma, sans-serif;
    animation: pub-pair-to-b-5c82jfh2nm 6s ease-out infinite;
    animation-delay: calc(var(--r) * .45s);
}

.art-pairs__row i[b-5c82jfh2nm] {
    position: relative;
    height: 2px;
    overflow: hidden;
    background: rgba(226, 179, 63, .3);
}

    .art-pairs__row i[b-5c82jfh2nm]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: #e6ad25;
        transform-origin: left center;
        animation: pub-pair-line-b-5c82jfh2nm 6s ease-out infinite;
        animation-delay: calc(var(--r) * .45s);
    }

.pub-page[dir="rtl"] .art-pairs__row[b-5c82jfh2nm] {
    direction: ltr;
}

.pub-bento__card:nth-child(1) .art-pairs__from[b-5c82jfh2nm] {
    background: rgba(255, 255, 255, .08);
    color: var(--pub-dark-text);
    box-shadow: inset 0 0 0 1px rgba(255, 236, 190, .12);
}

.art-kept[b-5c82jfh2nm] {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 10px 12px;
}

.art-kept__chip[b-5c82jfh2nm] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    overflow: hidden;
    border: 1px solid rgba(226, 179, 63, .4);
    border-radius: 11px;
    background: var(--pub-card-solid);
    box-shadow: 0 8px 18px rgba(87, 64, 22, .1);
}

    .art-kept__chip code[b-5c82jfh2nm] {
        color: var(--pub-ink);
        font-size: .8rem;
        font-weight: 700;
    }

    .art-kept__chip svg[b-5c82jfh2nm] {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: #b78507;
        stroke-width: 2;
        stroke-linecap: round;
        animation: pub-art-pop-b-5c82jfh2nm 4.5s ease-out infinite;
        animation-delay: calc(.4s + var(--r) * .35s);
    }

    .art-kept__chip[b-5c82jfh2nm]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(105deg, transparent 35%, rgba(244, 205, 88, .35) 50%, transparent 65%);
        background-size: 250% 100%;
        animation: pub-shine-b-5c82jfh2nm 4.5s ease-in-out infinite;
        animation-delay: calc(var(--r) * .35s);
    }

@keyframes pub-pair-to-b-5c82jfh2nm {
    0%, 12% {
        opacity: 0;
        transform: translateX(-10px) scale(.9);
    }

    24%, 86% {
        opacity: 1;
        transform: none;
    }

    100% {
        opacity: 0;
    }
}

@keyframes pub-pair-line-b-5c82jfh2nm {
    0%, 4% {
        transform: scaleX(0);
    }

    16%, 86% {
        transform: scaleX(1);
    }

    100% {
        transform: scaleX(0);
    }
}

@media (max-width: 760px) {
    .pub-passage[b-5c82jfh2nm] {
        padding: 18px 16px 20px;
    }

    .pub-passage__body[b-5c82jfh2nm] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pub-passage__arrow[b-5c82jfh2nm] {
        height: 34px;
    }

        .pub-passage__arrow i[b-5c82jfh2nm]::after,
        .pub-page[dir="rtl"] .pub-passage__arrow i[b-5c82jfh2nm]::after {
            transform: translate(-50%, -65%) rotate(135deg);
        }

    .pub-passage__head .pub-poster__route[b-5c82jfh2nm] {
        display: none;
    }
}

/* ================= pricing: the credit meter in the hero ================= */

.pub-meter[b-5c82jfh2nm] {
    position: relative;
    z-index: 1;
    width: min(400px, 100%);
    padding: 18px 20px 20px;
    border: 1px solid rgba(77, 63, 24, .16);
    border-radius: 22px;
    background: var(--pub-card-solid);
    box-shadow: 0 34px 70px rgba(59, 48, 23, .2), inset 0 1px 0 rgba(255, 255, 255, .7);
    transform: rotate(-1.5deg);
    animation: pub-hover-b-5c82jfh2nm 8s ease-in-out infinite;
}

.pub-meter__head[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    color: var(--pub-muted);
    font-size: .78rem;
    font-weight: 700;
}

.pub-meter__bar[b-5c82jfh2nm] {
    position: relative;
    height: 12px;
    margin-bottom: 18px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(226, 179, 63, .14);
}

.pub-meter__reserved[b-5c82jfh2nm],
.pub-meter__used[b-5c82jfh2nm] {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    border-radius: 999px;
}

.pub-meter__reserved[b-5c82jfh2nm] {
    width: 82%;
    background: repeating-linear-gradient(45deg, rgba(230, 173, 37, .35) 0 6px, rgba(230, 173, 37, .18) 6px 12px);
    transform-origin: right center;
    animation: pub-meter-reserve-b-5c82jfh2nm 8s ease-in-out infinite;
}

.pub-page[dir="ltr"] .pub-meter__reserved[b-5c82jfh2nm] {
    transform-origin: left center;
}

.pub-meter__used[b-5c82jfh2nm] {
    width: 74.5%;
    background: linear-gradient(90deg, var(--pub-gold-1), var(--pub-gold-2));
    box-shadow: 0 0 12px rgba(244, 205, 88, .6);
    transform-origin: right center;
    animation: pub-meter-use-b-5c82jfh2nm 8s ease-in-out infinite;
}

.pub-page[dir="ltr"] .pub-meter__used[b-5c82jfh2nm] {
    transform-origin: left center;
}

.pub-meter__rows[b-5c82jfh2nm] {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .pub-meter__rows li[b-5c82jfh2nm] {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        border-radius: 13px;
        background: rgba(226, 179, 63, .07);
        color: var(--pub-text);
        font-size: .86rem;
        font-weight: 600;
        animation: pub-meter-row-b-5c82jfh2nm 8s ease-in-out infinite;
        animation-delay: calc(var(--r) * .9s);
    }

        .pub-meter__rows li b[b-5c82jfh2nm] {
            color: var(--pub-ink);
            font-size: 1rem;
        }

.pub-meter__back[b-5c82jfh2nm] {
    background: rgba(111, 196, 140, .14) !important;
}

    .pub-meter__back b[b-5c82jfh2nm] {
        color: #3f9a5c !important;
    }

.pub-meter__icon[b-5c82jfh2nm] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
}

    .pub-meter__icon[b-5c82jfh2nm]  svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: #2b210d;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

@keyframes pub-meter-reserve-b-5c82jfh2nm {
    0%, 12% {
        transform: scaleX(0);
    }

    26%, 90% {
        transform: scaleX(1);
    }

    100% {
        transform: scaleX(0);
    }
}

@keyframes pub-meter-use-b-5c82jfh2nm {
    0%, 30% {
        transform: scaleX(0);
    }

    55%, 90% {
        transform: scaleX(1);
    }

    100% {
        transform: scaleX(0);
    }
}

@keyframes pub-meter-row-b-5c82jfh2nm {
    0%, 4% {
        opacity: .35;
        transform: translateY(4px);
    }

    12%, 92% {
        opacity: 1;
        transform: none;
    }

    100% {
        opacity: .35;
    }
}

/* ================= pricing: the packages ================= */

.pub-packs[b-5c82jfh2nm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: stretch;
    gap: 20px;
}

.pub-pack[b-5c82jfh2nm] {
    --mx: 50%;
    --my: 0%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 26px 22px 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 236, 190, .12);
    border-radius: 26px;
    background:
        radial-gradient(260px circle at var(--mx) var(--my), rgba(244, 205, 88, .12), transparent 55%),
        rgba(255, 255, 255, .04);
    color: var(--pub-dark-text);
    isolation: isolate;
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-color .4s ease;
}

    .pub-pack:hover[b-5c82jfh2nm] {
        transform: translateY(-6px);
        border-color: rgba(240, 200, 92, .35);
    }

    .pub-pack.is-featured[b-5c82jfh2nm] {
        border-color: transparent;
        background:
            radial-gradient(90% 70% at 100% 0%, rgba(240, 191, 75, .22), transparent 60%),
            radial-gradient(260px circle at var(--mx) var(--my), rgba(244, 205, 88, .16), transparent 55%),
            rgba(255, 255, 255, .07);
        box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
        transform: translateY(-10px);
    }

        .pub-pack.is-featured:hover[b-5c82jfh2nm] {
            transform: translateY(-16px);
        }

.pub-pack__border[b-5c82jfh2nm] {
    position: absolute;
    inset: 0;
    z-index: -1;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--pub-angle), rgba(244, 205, 88, .25) 0 55%, rgba(244, 205, 88, 1) 78%, rgba(244, 205, 88, .25) 96%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: pub-rotate-b-5c82jfh2nm 6s linear infinite;
    pointer-events: none;
}

.pub-pack__ribbon[b-5c82jfh2nm] {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    padding: 5px 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
    color: #2b210d;
    font-size: .72rem;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(214, 159, 34, .35);
}

.pub-pack__head h3[b-5c82jfh2nm] {
    margin: 0 0 6px;
    padding-inline-end: 90px;
    color: var(--pub-dark-ink);
    font-size: 1.2rem;
    font-weight: 700;
}

.pub-pack:not(.is-featured) .pub-pack__head h3[b-5c82jfh2nm] {
    padding-inline-end: 0;
}

.pub-pack__head p[b-5c82jfh2nm] {
    margin: 0;
    font-size: .86rem;
    line-height: 1.85;
}

.pub-pack__credits[b-5c82jfh2nm] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
}

    .pub-pack__credits strong[b-5c82jfh2nm] {
        background: linear-gradient(115deg, #f6cf5f, #e8b432 40%, #ffd977 60%, #e6ad25);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-size: 2.3rem;
        font-weight: 800;
        line-height: 1.1;
    }

    .pub-pack__credits span[b-5c82jfh2nm] {
        color: var(--pub-dark-text);
        font-weight: 700;
    }

    .pub-pack__credits em[b-5c82jfh2nm] {
        padding: 3px 9px;
        border-radius: 999px;
        background: rgba(111, 196, 140, .16);
        color: #8fd6a6;
        font-size: .78rem;
        font-style: normal;
        font-weight: 700;
    }

.pub-pack__price[b-5c82jfh2nm] {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(0, 0, 0, .22);
}

    .pub-pack__price strong[b-5c82jfh2nm] {
        color: var(--pub-dark-ink);
        font-size: 1.25rem;
        font-weight: 800;
    }

        .pub-pack__price strong small[b-5c82jfh2nm] {
            color: var(--pub-dark-text);
            font-size: .78rem;
            font-weight: 600;
        }

    .pub-pack__price span[b-5c82jfh2nm] {
        color: #9a8b72;
        font-size: .78rem;
    }

.pub-pack__group[b-5c82jfh2nm] {
    display: grid;
    gap: 8px;
}

.pub-pack__label[b-5c82jfh2nm] {
    color: #9a8b72;
    font-size: .74rem;
    font-weight: 700;
}

.pub-pack__levels[b-5c82jfh2nm],
.pub-pack__formats[b-5c82jfh2nm] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .pub-pack__levels li[b-5c82jfh2nm] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 10px;
        border-radius: 10px;
        font-size: .78rem;
        font-weight: 700;
    }

        .pub-pack__levels li i[b-5c82jfh2nm] {
            font-style: normal;
        }

        .pub-pack__levels li.is-on[b-5c82jfh2nm] {
            background: rgba(240, 191, 75, .14);
            color: #f0c85c;
        }

        .pub-pack__levels li.is-off[b-5c82jfh2nm] {
            background: rgba(255, 255, 255, .03);
            color: #6f6556;
            text-decoration: line-through;
        }

    .pub-pack__formats li[b-5c82jfh2nm] {
        padding: 4px 9px;
        border: 1px solid rgba(255, 236, 190, .12);
        border-radius: 8px;
        color: var(--pub-dark-text);
        font-size: .74rem;
        font-weight: 700;
    }

.pub-pack__limit[b-5c82jfh2nm] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 236, 190, .14);
    font-size: .82rem;
}

    .pub-pack__limit b[b-5c82jfh2nm] {
        color: var(--pub-dark-ink);
    }

.pub-pack .pub-button[b-5c82jfh2nm] {
    margin-top: auto;
}

.pub-button--pack[b-5c82jfh2nm] {
    border: 1px solid rgba(255, 236, 190, .2);
    background: rgba(255, 255, 255, .06);
    color: var(--pub-dark-ink);
}

    .pub-button--pack:hover[b-5c82jfh2nm] {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, .12);
    }

.pub-packs__state[b-5c82jfh2nm] {
    max-width: 560px;
    margin: 0 auto;
    padding: 22px;
    border: 1px solid rgba(255, 236, 190, .14);
    border-radius: 18px;
    color: var(--pub-dark-text);
    text-align: center;
}

/* ================= pricing: the quality levels ================= */

.pub-levels[b-5c82jfh2nm] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.pub-level[b-5c82jfh2nm] {
    --mx: 50%;
    --my: 0%;
    position: relative;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 26px;
    overflow: hidden;
    border: 1px solid var(--pub-line);
    border-radius: 26px;
    background:
        radial-gradient(300px circle at var(--mx) var(--my), rgba(244, 205, 88, .14), transparent 50%),
        var(--pub-card);
    box-shadow: var(--pub-shadow);
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}

    .pub-level:hover[b-5c82jfh2nm] {
        transform: translateY(-5px);
        box-shadow: var(--pub-shadow-lift);
    }

    .pub-level h3[b-5c82jfh2nm] {
        margin: 0;
        color: var(--pub-ink);
        font-size: 1.2rem;
        font-weight: 700;
    }

    .pub-level p[b-5c82jfh2nm] {
        margin: 0;
        color: var(--pub-text);
        line-height: 1.95;
    }

.pub-level__bars[b-5c82jfh2nm] {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 34px;
    margin-bottom: 6px;
}

    .pub-level__bars i[b-5c82jfh2nm] {
        width: 12px;
        border-radius: 4px;
        background: rgba(226, 179, 63, .18);
    }

        .pub-level__bars i:nth-child(1)[b-5c82jfh2nm] {
            height: 40%;
        }

        .pub-level__bars i:nth-child(2)[b-5c82jfh2nm] {
            height: 70%;
        }

        .pub-level__bars i:nth-child(3)[b-5c82jfh2nm] {
            height: 100%;
        }

        .pub-level__bars i.is-on[b-5c82jfh2nm] {
            background: linear-gradient(180deg, var(--pub-gold-1), var(--pub-gold-2));
            box-shadow: 0 6px 14px rgba(214, 159, 34, .3);
            animation: pub-bar-grow-b-5c82jfh2nm .8s cubic-bezier(.2, .8, .2, 1) both;
        }

.pub-level__fit[b-5c82jfh2nm] {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px dashed var(--pub-line);
    color: var(--pub-gold-ink);
    font-size: .84rem;
    font-weight: 700;
}

.pub-closing__card--solo[b-5c82jfh2nm] {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    text-align: center;
}

    .pub-closing__card--solo .pub-closing__copy p[b-5c82jfh2nm] {
        margin-inline: auto;
    }

    .pub-closing__card--solo .pub-closing__actions[b-5c82jfh2nm] {
        justify-content: center;
    }

@keyframes pub-bar-grow-b-5c82jfh2nm {
    from {
        transform: scaleY(0);
        transform-origin: bottom;
    }

    to {
        transform: scaleY(1);
        transform-origin: bottom;
    }
}

@media (max-width: 900px) {
    .pub-levels[b-5c82jfh2nm] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pub-pack.is-featured[b-5c82jfh2nm],
    .pub-pack.is-featured:hover[b-5c82jfh2nm] {
        transform: none;
    }
}

/* ================= flow: four steps ================= */

.pub-flow__body[b-5c82jfh2nm] {
    position: relative;
}

.pub-flow__track[b-5c82jfh2nm] {
    position: absolute;
    top: 38px;
    inset-inline: 12.5%;
    height: 2px;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(226, 179, 63, .15), rgba(226, 179, 63, .5), rgba(226, 179, 63, .15));
}

.pub-flow__comet[b-5c82jfh2nm] {
    position: absolute;
    top: 0;
    inset-inline-start: -90px;
    width: 90px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f4cd58);
    box-shadow: 0 0 12px 2px rgba(244, 205, 88, .7);
    animation: pub-comet-b-5c82jfh2nm 6s linear infinite;
}

.pub-page[dir="rtl"] .pub-flow__comet[b-5c82jfh2nm] {
    background: linear-gradient(270deg, transparent, #f4cd58);
}

.pub-flow__list[b-5c82jfh2nm] {
    display: grid;
    grid-template-columns: repeat(var(--count, 4), minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pub-flow__step[b-5c82jfh2nm] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px 26px;
    text-align: center;
    isolation: isolate;
}

    .pub-flow__step[b-5c82jfh2nm]::before {
        content: "";
        position: absolute;
        inset: 38px 0 0;
        z-index: -1;
        border: 1px solid var(--pub-line);
        border-radius: 26px;
        background: var(--pub-card);
        box-shadow: var(--pub-shadow);
        transition: border-color .35s ease, transform .35s ease;
    }

    .pub-flow__step:hover[b-5c82jfh2nm]::before {
        border-color: rgba(226, 179, 63, .55);
        transform: translateY(-4px);
    }

.pub-flow__node[b-5c82jfh2nm] {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-bottom: 14px;
    border: 1px solid rgba(226, 179, 63, .5);
    border-radius: 24px;
    background: var(--pub-card-solid);
    color: var(--pub-gold-ink);
    box-shadow: 0 0 0 8px var(--pub-bg), var(--pub-shadow);
    /* one step lit at a time, however many steps the list has (--count) */
    animation: pub-step-active-b-5c82jfh2nm calc(var(--count, 4) * 1.5s) ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 1.5s);
}

    .pub-flow__node[b-5c82jfh2nm]  svg {
        width: 32px;
        height: 32px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.pub-flow__num[b-5c82jfh2nm] {
    margin-bottom: 8px;
    color: var(--pub-gold-ink);
    font-size: .78rem;
    font-weight: 700;
}

.pub-flow__step h3[b-5c82jfh2nm] {
    margin: 0 0 8px;
    color: var(--pub-ink);
    font-size: 1.05rem;
    font-weight: 700;
}

.pub-flow__step p[b-5c82jfh2nm] {
    margin: 0;
    color: var(--pub-text);
    font-size: .9rem;
    line-height: 1.85;
}

/* ================= faq ================= */

.pub-faq__layout[b-5c82jfh2nm] {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 48px;
}

.pub-faq__side[b-5c82jfh2nm] {
    position: sticky;
    top: 100px;
}

    .pub-faq__side h2[b-5c82jfh2nm] {
        margin: 16px 0 12px;
        color: var(--pub-ink);
        font-size: clamp(1.7rem, 3vw, 2.4rem);
        font-weight: 700;
        line-height: 1.35;
    }

    .pub-faq__side > p[b-5c82jfh2nm] {
        margin: 0 0 26px;
        color: var(--pub-text);
        line-height: 1.9;
    }

.pub-faq__help[b-5c82jfh2nm] {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 26px;
    overflow: hidden;
    border-radius: 26px;
    background:
        radial-gradient(80% 90% at 100% 0%, rgba(240, 191, 75, .22), transparent 60%),
        var(--pub-dark);
    color: var(--pub-dark-text);
    font-size: .92rem;
    line-height: 1.85;
    box-shadow: 0 26px 54px rgba(33, 27, 21, .22);
}

    .pub-faq__help strong[b-5c82jfh2nm] {
        color: var(--pub-dark-ink);
        font-size: 1.1rem;
    }

    .pub-faq__help a[b-5c82jfh2nm] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        width: fit-content;
        margin-top: 6px;
        color: #f4cd58;
        font-weight: 700;
        text-decoration: none;
    }

        .pub-faq__help a span[b-5c82jfh2nm] {
            transition: transform .25s ease;
        }

        .pub-faq__help a:hover span[b-5c82jfh2nm] {
            transform: translateX(-4px);
        }

.pub-page[dir="ltr"] .pub-faq__help a:hover span[b-5c82jfh2nm] {
    transform: translateX(4px);
}

.pub-faq__help-icon[b-5c82jfh2nm] {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
    box-shadow: 0 12px 26px rgba(214, 159, 34, .3);
}

    .pub-faq__help-icon svg[b-5c82jfh2nm] {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: #2b210d;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.pub-faq__list[b-5c82jfh2nm] {
    display: grid;
    gap: 12px;
}

.pub-faq__item[b-5c82jfh2nm] {
    border: 1px solid var(--pub-line);
    border-radius: 22px;
    background: var(--pub-card);
    box-shadow: var(--pub-shadow);
    transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}

    .pub-faq__item:hover[b-5c82jfh2nm] {
        border-color: rgba(226, 179, 63, .4);
    }

    .pub-faq__item[open][b-5c82jfh2nm] {
        border-color: rgba(226, 179, 63, .6);
        box-shadow: var(--pub-shadow-lift);
    }

    .pub-faq__item summary[b-5c82jfh2nm] {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) 30px;
        align-items: center;
        gap: 14px;
        padding: 20px 22px;
        color: var(--pub-ink);
        font-weight: 700;
        cursor: pointer;
        list-style: none;
    }

        .pub-faq__item summary[b-5c82jfh2nm]::-webkit-details-marker {
            display: none;
        }

        .pub-faq__item summary em[b-5c82jfh2nm] {
            color: var(--pub-muted);
            font-size: .85rem;
            font-style: normal;
            transition: color .3s ease;
        }

    .pub-faq__item[open] summary em[b-5c82jfh2nm] {
        color: var(--pub-gold-ink);
    }

    .pub-faq__item summary i[b-5c82jfh2nm] {
        position: relative;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--pub-gold-soft);
        transition: transform .4s cubic-bezier(.2, .8, .2, 1), background-color .3s ease;
    }

        .pub-faq__item summary i[b-5c82jfh2nm]::before,
        .pub-faq__item summary i[b-5c82jfh2nm]::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 12px;
            height: 2px;
            border-radius: 2px;
            background: var(--pub-gold-ink);
            transform: translate(-50%, -50%);
        }

        .pub-faq__item summary i[b-5c82jfh2nm]::after {
            transform: translate(-50%, -50%) rotate(90deg);
            transition: transform .4s cubic-bezier(.2, .8, .2, 1);
        }

    .pub-faq__item[open] summary i[b-5c82jfh2nm] {
        transform: rotate(180deg);
        background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
    }

        .pub-faq__item[open] summary i[b-5c82jfh2nm]::before,
        .pub-faq__item[open] summary i[b-5c82jfh2nm]::after {
            background: #2b210d;
        }

        .pub-faq__item[open] summary i[b-5c82jfh2nm]::after {
            transform: translate(-50%, -50%) rotate(0deg);
        }

    .pub-faq__item[b-5c82jfh2nm]::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size .45s cubic-bezier(.2, .8, .2, 1), content-visibility .45s allow-discrete;
    }

    .pub-faq__item[open][b-5c82jfh2nm]::details-content {
        block-size: auto;
    }

.pub-faq__answer p[b-5c82jfh2nm] {
    margin: 0;
    padding: 0 22px 22px;
    padding-inline-start: calc(22px + 34px + 14px);
    color: var(--pub-text);
    line-height: 2;
}

/* ================= closing ================= */

.pub-closing[b-5c82jfh2nm] {
    padding-top: 30px;
}

.pub-closing__card[b-5c82jfh2nm] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: center;
    gap: 30px;
    min-height: 380px;
    padding: 56px 60px;
    overflow: hidden;
    border-radius: 38px;
    background:
        radial-gradient(65% 120% at 85% 0%, rgba(223, 169, 54, .24) 0%, transparent 64%),
        radial-gradient(55% 100% at 5% 100%, rgba(183, 121, 29, .14) 0%, transparent 68%),
        var(--pub-dark);
    box-shadow: 0 40px 80px rgba(33, 27, 21, .28);
    isolation: isolate;
}

.pub-closing__border[b-5c82jfh2nm] {
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--pub-angle), transparent 0 62%, rgba(244, 205, 88, .95) 80%, transparent 96%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: pub-rotate-b-5c82jfh2nm 7s linear infinite;
    pointer-events: none;
}

.pub-closing__shine[b-5c82jfh2nm] {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 223, 140, .1) 50%, transparent 65%);
    background-size: 250% 100%;
    animation: pub-shine-b-5c82jfh2nm 7s ease-in-out infinite;
    pointer-events: none;
}

.pub-closing__copy h2[b-5c82jfh2nm] {
    margin: 16px 0 12px;
    color: var(--pub-dark-ink);
    font-size: clamp(1.7rem, 3.2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.35;
}

.pub-closing__copy p[b-5c82jfh2nm] {
    margin: 0 0 28px;
    max-width: 480px;
    color: var(--pub-dark-text);
    line-height: 1.95;
}

.pub-closing__actions[b-5c82jfh2nm] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pub-closing__fan[b-5c82jfh2nm] {
    position: relative;
    height: 290px;
}

    .pub-closing__fan img[b-5c82jfh2nm] {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44%;
        height: auto;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
        translate: -50% -50%;
        transition: rotate .5s cubic-bezier(.2, .8, .2, 1), translate .5s cubic-bezier(.2, .8, .2, 1);
        animation: pub-float-b-5c82jfh2nm 7s ease-in-out infinite;
    }

        .pub-closing__fan img:nth-child(1)[b-5c82jfh2nm] {
            rotate: -13deg;
            translate: -102% -46%;
            animation-delay: .6s;
        }

        .pub-closing__fan img:nth-child(2)[b-5c82jfh2nm] {
            z-index: 2;
            rotate: 2deg;
            translate: -50% -54%;
        }

        .pub-closing__fan img:nth-child(3)[b-5c82jfh2nm] {
            rotate: 14deg;
            translate: 2% -46%;
            animation-delay: 1.2s;
        }

.pub-closing__card:hover .pub-closing__fan img:nth-child(1)[b-5c82jfh2nm] {
    rotate: -18deg;
    translate: -112% -44%;
}

.pub-closing__card:hover .pub-closing__fan img:nth-child(3)[b-5c82jfh2nm] {
    rotate: 19deg;
    translate: 12% -44%;
}

/* not found */

.pub-missing[b-5c82jfh2nm] {
    display: grid;
    place-items: center;
    gap: 24px;
    min-height: 50vh;
    padding: 80px 16px;
    text-align: center;
}

/* ---------- reveal on scroll ----------
   Driven by the scroll position itself where the browser can
   (no script, nothing to fail); elsewhere everything is simply shown. */

@supports (animation-timeline: view()) {
    .pub-reveal[b-5c82jfh2nm] {
        animation: pub-rise-b-5c82jfh2nm linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 60%;
    }

    .pub-viewer[b-5c82jfh2nm] {
        animation: pub-tilt-in-b-5c82jfh2nm linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }
}

/* ---------- keyframes ---------- */

@property --pos {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 50%;
}

@property --pub-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes pub-rise-b-5c82jfh2nm {
    from {
        opacity: 0;
        translate: 0 26px;
    }

    to {
        opacity: 1;
        translate: none;
    }
}

@keyframes pub-swap-b-5c82jfh2nm {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pub-tilt-in-b-5c82jfh2nm {
    from {
        opacity: .2;
        transform: perspective(1400px) rotateX(16deg) translateY(40px) scale(.94);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pub-sweep-b-5c82jfh2nm {
    0% {
        --pos: 50%;
    }

    30% {
        --pos: 6%;
    }

    66% {
        --pos: 94%;
    }

    100% {
        --pos: 50%;
    }
}

@keyframes pub-pin-in-b-5c82jfh2nm {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes pub-note-in-b-5c82jfh2nm {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pub-shine-b-5c82jfh2nm {
    0%, 30% {
        background-position: 120% 0, 0 0;
    }

    70%, 100% {
        background-position: -120% 0, 0 0;
    }
}

@keyframes pub-reveal-b-5c82jfh2nm {
    0%, 12% {
        clip-path: inset(0 100% 0 0);
    }

    44%, 78% {
        clip-path: inset(0 0 0 0);
    }

    92%, 100% {
        clip-path: inset(0 100% 0 0);
    }
}

@keyframes pub-scan-b-5c82jfh2nm {
    0%, 12% {
        left: 0;
        opacity: 0;
    }

    14% {
        opacity: 1;
    }

    42% {
        opacity: 1;
    }

    44%, 100% {
        left: 100%;
        opacity: 0;
    }
}

@keyframes pub-float-b-5c82jfh2nm {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes pub-hover-b-5c82jfh2nm {
    0%, 100% {
        transform: rotate(-2.5deg) translateY(0);
    }

    50% {
        transform: rotate(-1.5deg) translateY(-10px);
    }
}

@keyframes pub-spin-b-5c82jfh2nm {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pub-rotate-b-5c82jfh2nm {
    to {
        --pub-angle: 360deg;
    }
}

@keyframes pub-drift-a-b-5c82jfh2nm {
    to {
        transform: translate(-40px, 30px) scale(1.08);
    }
}

@keyframes pub-drift-b-b-5c82jfh2nm {
    to {
        transform: translate(40px, -20px) scale(1.1);
    }
}

@keyframes pub-ping-b-5c82jfh2nm {
    0% {
        opacity: .9;
        transform: scale(.9);
    }

    70%, 100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

@keyframes pub-marquee-b-5c82jfh2nm {
    to {
        transform: translateX(-50%);
    }
}

@keyframes pub-marquee-rtl-b-5c82jfh2nm {
    to {
        transform: translateX(50%);
    }
}

@keyframes pub-comet-b-5c82jfh2nm {
    0% {
        inset-inline-start: -90px;
    }

    75%, 100% {
        inset-inline-start: 100%;
    }
}

@keyframes pub-step-active-b-5c82jfh2nm {
    0%, 22% {
        border-color: #e6ad25;
        background-color: #f2c34a;
        color: #2b210d;
        transform: translateY(-4px) scale(1.06);
        box-shadow: 0 0 0 8px var(--pub-bg), 0 16px 34px rgba(214, 159, 34, .38);
    }

    32%, 100% {
        transform: none;
    }
}

@keyframes pub-art-land-b-5c82jfh2nm {
    0% {
        opacity: 0;
        transform: translate(46px, -56px) rotateX(18deg) rotateZ(7deg);
    }

    34%, 82% {
        opacity: 1;
        transform: none;
    }

    100% {
        opacity: 0;
        transform: translate(-30px, 40px) rotateZ(-4deg);
    }
}

@keyframes pub-art-fade-b-5c82jfh2nm {
    0%, 30% {
        opacity: 1;
    }

    40%, 82% {
        opacity: .12;
    }

    95%, 100% {
        opacity: 1;
    }
}

@keyframes pub-art-swap-b-5c82jfh2nm {
    0%, 30% {
        left: 8%;
    }

    50%, 80% {
        left: 54%;
    }

    100% {
        left: 8%;
    }
}

@keyframes pub-art-swap-back-b-5c82jfh2nm {
    0%, 30% {
        left: 54%;
    }

    50%, 80% {
        left: 8%;
    }

    100% {
        left: 54%;
    }
}

@keyframes pub-art-read-b-5c82jfh2nm {
    0%, 8% {
        clip-path: inset(0 0 100% 0);
    }

    70%, 88% {
        clip-path: inset(0 0 0 0);
    }

    100% {
        clip-path: inset(0 0 100% 0);
    }
}

@keyframes pub-art-beam-b-5c82jfh2nm {
    0%, 8% {
        top: 18px;
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    70% {
        top: calc(100% - 20px);
        opacity: 1;
    }

    78%, 100% {
        top: calc(100% - 20px);
        opacity: 0;
    }
}

@keyframes pub-art-pop-b-5c82jfh2nm {
    0%, 6% {
        opacity: 0;
        transform: scale(.3);
    }

    16%, 86% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(.8);
    }
}

@keyframes pub-art-lang-b-5c82jfh2nm {
    0%, 40% {
        opacity: 1;
        transform: none;
    }

    50%, 90% {
        opacity: 0;
        transform: translateY(-8px);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes pub-art-lang-in-b-5c82jfh2nm {
    0%, 40% {
        opacity: 0;
        transform: translateY(8px);
    }

    50%, 90% {
        opacity: 1;
        transform: none;
    }

    100% {
        opacity: 0;
        transform: translateY(8px);
    }
}

@keyframes pub-art-ring-b-5c82jfh2nm {
    0%, 10% {
        stroke-dashoffset: 164;
    }

    60%, 88% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 164;
    }
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
    .pub-showcase__body[b-5c82jfh2nm] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pub-showcase__rail[b-5c82jfh2nm] {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .pub-thumb[b-5c82jfh2nm] {
        flex: 1 0 210px;
    }
}

@media (max-width: 1020px) {
    .pub-hero__layout[b-5c82jfh2nm] {
        grid-template-columns: minmax(0, 1fr);
        padding: 34px 26px;
    }

    .pub-hero__stage[b-5c82jfh2nm] {
        min-height: 400px;
    }

    .pub-bento[b-5c82jfh2nm] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pub-bento__card[b-5c82jfh2nm],
    .pub-bento__card:nth-child(1)[b-5c82jfh2nm],
    .pub-bento__card:nth-child(2)[b-5c82jfh2nm],
    .pub-bento__card:nth-child(3)[b-5c82jfh2nm] {
        grid-column: span 1;
        grid-row: auto;
    }

        .pub-bento__card:nth-child(1)[b-5c82jfh2nm],
        .pub-bento__card:nth-child(2)[b-5c82jfh2nm],
        .pub-bento__card:nth-child(3)[b-5c82jfh2nm] {
            grid-column: span 2;
        }

    .pub-flow__list[b-5c82jfh2nm] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 22px;
    }

    .pub-flow__track[b-5c82jfh2nm] {
        display: none;
    }

    .pub-faq__layout[b-5c82jfh2nm] {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .pub-faq__side[b-5c82jfh2nm] {
        position: static;
    }

    .pub-closing__card[b-5c82jfh2nm] {
        grid-template-columns: minmax(0, 1fr);
        padding: 48px 34px 20px;
        text-align: center;
    }

    .pub-closing__copy p[b-5c82jfh2nm] {
        margin-inline: auto;
    }

    .pub-closing__actions[b-5c82jfh2nm] {
        justify-content: center;
    }
}

@media (max-width: 860px) {
    .pub-sample[b-5c82jfh2nm] {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .pub-sample--wide .pub-notes[b-5c82jfh2nm] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .pub-hero[b-5c82jfh2nm] {
        padding: 18px 0 40px;
    }

    .pub-hero__layout[b-5c82jfh2nm] {
        padding: 26px 18px;
        border-radius: 26px;
        gap: 28px;
    }

    .pub-hero__actions .pub-button[b-5c82jfh2nm] {
        flex: 1 1 100%;
    }

    .pub-hero__stage[b-5c82jfh2nm] {
        min-height: 340px;
    }

    .pub-stage__ring--one[b-5c82jfh2nm] {
        width: 320px;
        height: 320px;
    }

    .pub-stage__ring--two[b-5c82jfh2nm] {
        width: 250px;
        height: 250px;
    }

    .pub-morph[b-5c82jfh2nm] {
        width: min(240px, 70%);
    }

    .pub-morph--wide[b-5c82jfh2nm] {
        width: 100%;
    }

    .pub-chip[b-5c82jfh2nm] {
        font-size: .74rem;
        padding: 8px 11px;
    }

    .pub-chip--1[b-5c82jfh2nm] {
        inset-inline-start: 0;
    }

    .pub-chip--2[b-5c82jfh2nm] {
        inset-inline-end: 0;
    }

    .pub-ribbon[b-5c82jfh2nm] {
        margin-top: -20px;
    }

    .pub-ribbon__inner[b-5c82jfh2nm] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .pub-ribbon__label[b-5c82jfh2nm] {
        padding: 0;
        border: 0;
        text-align: center;
    }

    .pub-section[b-5c82jfh2nm] {
        padding: 60px 0;
    }

    .pub-showcase[b-5c82jfh2nm] {
        width: calc(100% - 12px);
        padding: 56px 0 60px;
        border-radius: 28px;
    }

    .pub-thumb[b-5c82jfh2nm] {
        flex-basis: 170px;
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .pub-thumb__img[b-5c82jfh2nm] {
        height: 54px;
    }

    .pub-thumb__arrow[b-5c82jfh2nm] {
        display: none;
    }

    .pub-viewer[b-5c82jfh2nm] {
        padding: 7px;
        border-radius: 18px;
    }

    .pub-viewer__live[b-5c82jfh2nm] {
        display: none;
    }

    .pub-compare__tag[b-5c82jfh2nm] {
        inset-block-start: 8px;
        padding: 4px 9px;
        font-size: .64rem;
    }

    .pub-compare__tag--before[b-5c82jfh2nm] {
        left: 8px;
    }

    .pub-compare__tag--after[b-5c82jfh2nm] {
        right: 8px;
    }

    .pub-pin[b-5c82jfh2nm] {
        width: 22px;
        height: 22px;
        font-size: .68rem;
    }

    .pub-bento[b-5c82jfh2nm] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pub-bento__card[b-5c82jfh2nm],
    .pub-bento__card:nth-child(1)[b-5c82jfh2nm],
    .pub-bento__card:nth-child(2)[b-5c82jfh2nm],
    .pub-bento__card:nth-child(3)[b-5c82jfh2nm] {
        grid-column: span 1;
    }

        .pub-bento__card:nth-child(2)[b-5c82jfh2nm],
        .pub-bento__card:nth-child(3)[b-5c82jfh2nm] {
            flex-direction: column;
        }

            .pub-bento__card:nth-child(2) .pub-art[b-5c82jfh2nm],
            .pub-bento__card:nth-child(3) .pub-art[b-5c82jfh2nm] {
                flex-basis: auto;
                margin: 10px 10px 0;
            }

    .pub-flow__list[b-5c82jfh2nm] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pub-faq__item summary[b-5c82jfh2nm] {
        grid-template-columns: 26px minmax(0, 1fr) 28px;
        gap: 10px;
        padding: 18px;
    }

    .pub-faq__answer p[b-5c82jfh2nm] {
        padding: 0 18px 20px;
        padding-inline-start: calc(18px + 26px + 10px);
    }

    .pub-closing__card[b-5c82jfh2nm] {
        padding: 40px 20px 10px;
        border-radius: 28px;
    }

    .pub-closing__fan[b-5c82jfh2nm] {
        height: 220px;
    }
}

/* ================= against traditional translation ================= */

.pub-versus[b-5c82jfh2nm] {
    padding-top: 24px;
}

.pub-versus__table[b-5c82jfh2nm] {
    max-width: 1040px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--pub-line);
    border-radius: 28px;
    background: var(--pub-card);
    box-shadow: var(--pub-shadow);
}

.pub-versus__row[b-5c82jfh2nm] {
    display: grid;
    grid-template-columns: minmax(150px, .72fr) 1fr 1fr;
    border-top: 1px solid var(--pub-line);
}

    .pub-versus__row:first-child[b-5c82jfh2nm] {
        border-top: 0;
    }

.pub-versus__row--head[b-5c82jfh2nm] {
    font-size: .92rem;
    font-weight: 700;
}

.pub-versus__aspect[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    color: var(--pub-ink);
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.7;
}

.pub-versus__cell[b-5c82jfh2nm] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 22px;
    color: var(--pub-text);
    font-size: .94rem;
    line-height: 1.9;
}

.pub-versus__cell--new[b-5c82jfh2nm] {
    background: var(--pub-gold-soft);
    color: var(--pub-ink);
}

.pub-versus__row--head .pub-versus__cell[b-5c82jfh2nm] {
    align-items: center;
    padding-block: 16px;
    color: var(--pub-muted);
}

.pub-versus__row--head .pub-versus__cell--new[b-5c82jfh2nm] {
    gap: 8px;
    color: var(--pub-gold-ink);
}

    .pub-versus__row--head .pub-versus__cell--new img[b-5c82jfh2nm] {
        display: block;
        width: 20px;
        height: 20px;
    }

.pub-versus__mark[b-5c82jfh2nm] {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-top: 3px;
    border-radius: 50%;
    background: rgba(149, 139, 123, .14);
    font-style: normal;
}

    .pub-versus__mark[b-5c82jfh2nm]  svg {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: var(--pub-muted);
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.pub-versus__cell--new .pub-versus__mark[b-5c82jfh2nm] {
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
}

    .pub-versus__cell--new .pub-versus__mark[b-5c82jfh2nm]  svg {
        stroke: #2b2010;
    }

/* the one row where a translation office is the right answer */
.pub-versus__row--theirs .pub-versus__cell--old .pub-versus__mark[b-5c82jfh2nm] {
    background: rgba(62, 150, 98, .16);
}

    .pub-versus__row--theirs .pub-versus__cell--old .pub-versus__mark[b-5c82jfh2nm]  svg {
        stroke: #2f8a57;
    }

.pub-versus__row--theirs .pub-versus__cell--new .pub-versus__mark[b-5c82jfh2nm] {
    background: rgba(149, 139, 123, .14);
}

    .pub-versus__row--theirs .pub-versus__cell--new .pub-versus__mark[b-5c82jfh2nm]  svg {
        stroke: var(--pub-muted);
    }

/* a third column, a free online translator, on the smart translation page */
.pub-versus__table--three[b-5c82jfh2nm] {
    max-width: 1180px;
}

    .pub-versus__table--three .pub-versus__row[b-5c82jfh2nm] {
        grid-template-columns: minmax(120px, .56fr) 1fr 1fr 1fr;
    }

    .pub-versus__table--three .pub-versus__aspect[b-5c82jfh2nm] {
        padding-inline: 20px;
    }

    .pub-versus__table--three .pub-versus__cell[b-5c82jfh2nm] {
        padding-inline: 18px;
        font-size: .9rem;
    }

/* under a service page's table: on to the page that compares all three */
.pub-versus__more[b-5c82jfh2nm] {
    margin: 22px 0 0;
    text-align: center;
}

    .pub-versus__more a[b-5c82jfh2nm] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--pub-gold-ink);
        font-size: .94rem;
        font-weight: 700;
        text-decoration: none;
        transition: gap .25s ease;
    }

        .pub-versus__more a:hover[b-5c82jfh2nm],
        .pub-versus__more a:focus-visible[b-5c82jfh2nm] {
            gap: 12px;
            text-decoration: underline;
            text-underline-offset: 5px;
        }

/* said only where the columns stack, so each cell still names its side */
.pub-versus__who[b-5c82jfh2nm] {
    display: none;
}

@media (max-width: 760px) {
    .pub-versus__row[b-5c82jfh2nm] {
        grid-template-columns: 1fr;
    }

    .pub-versus__row--head[b-5c82jfh2nm] {
        display: none;
    }

    .pub-versus__row:nth-child(2)[b-5c82jfh2nm] {
        border-top: 0;
    }

    .pub-versus__aspect[b-5c82jfh2nm] {
        padding: 18px 18px 6px;
    }

    .pub-versus__cell[b-5c82jfh2nm] {
        padding: 10px 18px;
    }

    .pub-versus__cell--new[b-5c82jfh2nm] {
        margin: 4px 12px 16px;
        border-radius: 16px;
        padding: 12px 14px;
    }

    .pub-versus__who[b-5c82jfh2nm] {
        display: block;
        margin-bottom: 2px;
        color: var(--pub-muted);
        font-size: .78rem;
        font-style: normal;
        font-weight: 700;
    }

    .pub-versus__cell--new .pub-versus__who[b-5c82jfh2nm] {
        color: var(--pub-gold-ink);
    }
}

/* ================= a link under an answer (the languages page) ================= */

.pub-faq__answer .pub-faq__more[b-5c82jfh2nm] {
    margin-top: -10px;
}

    .pub-faq__more a[b-5c82jfh2nm] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--pub-gold-ink);
        font-size: .9rem;
        font-weight: 700;
        text-decoration: none;
        transition: gap .25s ease;
    }

        .pub-faq__more a:hover[b-5c82jfh2nm],
        .pub-faq__more a:focus-visible[b-5c82jfh2nm] {
            gap: 12px;
            text-decoration: underline;
            text-underline-offset: 5px;
        }

/* ================= languages page: one card per language ================= */

.pub-langs[b-5c82jfh2nm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}

.pub-lang[b-5c82jfh2nm] {
    --mx: 50%;
    --my: 0%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px 22px;
    overflow: hidden;
    border: 1px solid var(--pub-line);
    border-radius: 24px;
    background:
        radial-gradient(260px circle at var(--mx) var(--my), rgba(244, 205, 88, .14), transparent 50%),
        var(--pub-card);
    box-shadow: var(--pub-shadow);
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}

    .pub-lang:hover[b-5c82jfh2nm] {
        transform: translateY(-5px);
        box-shadow: var(--pub-shadow-lift);
    }

    .pub-lang h3[b-5c82jfh2nm] {
        margin: 0;
        color: var(--pub-ink);
        font-size: 1.12rem;
        font-weight: 700;
    }

    .pub-lang p[b-5c82jfh2nm] {
        margin: 2px 0 0;
        color: var(--pub-text);
        font-size: .88rem;
        line-height: 1.85;
    }

.pub-lang__head[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.pub-lang__code[b-5c82jfh2nm] {
    display: inline-grid;
    place-items: center;
    min-width: 46px;
    height: 34px;
    padding: 0 10px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
    box-shadow: 0 8px 18px rgba(214, 159, 34, .22);
    color: #2b210d;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.pub-lang__dir[b-5c82jfh2nm],
.pub-lang__ways[b-5c82jfh2nm] {
    color: var(--pub-muted);
    font-size: .76rem;
    font-weight: 700;
}

/* the name in its own script keeps its own direction but sits at the card's start, like the rest */
.pub-lang__native[b-5c82jfh2nm] {
    align-self: flex-start;
    color: var(--pub-gold-ink);
    font-size: .95rem;
    font-weight: 600;
}

.pub-lang__ways[b-5c82jfh2nm] {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px dashed var(--pub-line);
}

/* the route badge was made for the dark showcase; on a light card it takes the ink colour */
.pub-level--direction .pub-poster__route[b-5c82jfh2nm] {
    justify-self: start;
    color: var(--pub-gold-ink);
}

@media (max-width: 560px) {
    .pub-langs[b-5c82jfh2nm] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .pub-lang[b-5c82jfh2nm] {
        padding: 16px 16px 18px;
        border-radius: 20px;
    }
}

/* three columns need more room: they stack sooner */
@media (max-width: 900px) {
    .pub-versus__table--three .pub-versus__row[b-5c82jfh2nm] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pub-versus__table--three .pub-versus__row--head[b-5c82jfh2nm] {
        display: none;
    }

    .pub-versus__table--three .pub-versus__row:nth-child(2)[b-5c82jfh2nm] {
        border-top: 0;
    }

    .pub-versus__table--three .pub-versus__aspect[b-5c82jfh2nm] {
        padding: 18px 18px 6px;
    }

    .pub-versus__table--three .pub-versus__cell[b-5c82jfh2nm] {
        padding: 10px 18px;
    }

    .pub-versus__table--three .pub-versus__cell--new[b-5c82jfh2nm] {
        margin: 4px 12px 16px;
        border-radius: 16px;
        padding: 12px 14px;
    }

    .pub-versus__table--three .pub-versus__who[b-5c82jfh2nm] {
        display: block;
        margin-bottom: 2px;
        color: var(--pub-muted);
        font-size: .78rem;
        font-style: normal;
        font-weight: 700;
    }

    .pub-versus__table--three .pub-versus__cell--new .pub-versus__who[b-5c82jfh2nm] {
        color: var(--pub-gold-ink);
    }
}

/* room for the bar under the thumb (PublicHeader) */
@media (max-width: 720px) {
    .pub-page[b-5c82jfh2nm] {
        padding-bottom: calc(84px + env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    .pub-page *[b-5c82jfh2nm],
    .pub-page *[b-5c82jfh2nm]::before,
    .pub-page *[b-5c82jfh2nm]::after {
        animation: none !important;
        transition: none !important;
    }

    .pub-morph__page--after[b-5c82jfh2nm] {
        clip-path: inset(0 0 0 50%);
    }
}

/* =========================================================
   Subtitle page: the player in the hero, the subtitle file
   in the showcase, and the timing and wrapping drawings.
   ========================================================= */

/* ---------- hero: a subtitle on the video, turning into its translation ---------- */

.pub-player[b-5c82jfh2nm] {
    position: relative;
    z-index: 1;
    width: min(470px, 100%);
    padding: 10px;
    border: 1px solid rgba(240, 200, 92, .22);
    border-radius: 24px;
    background: linear-gradient(160deg, #2a2119, #161210);
    box-shadow: 0 34px 70px rgba(59, 48, 23, .28), inset 0 1px 0 rgba(255, 236, 190, .1);
    transform: rotate(-1.5deg);
    animation: pub-hover-b-5c82jfh2nm 8s ease-in-out infinite;
}

.pub-player__screen[b-5c82jfh2nm] {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 16px;
    background:
        radial-gradient(60% 70% at 30% 20%, rgba(240, 191, 75, .16), transparent 70%),
        radial-gradient(50% 60% at 85% 90%, rgba(183, 121, 29, .2), transparent 70%),
        #0f0c09;
}

/* the lecture slide the video is showing, behind the subtitle */
.pub-player__slide[b-5c82jfh2nm] {
    position: absolute;
    inset: 13% 17% 34%;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 16px 18px;
    border-radius: 10px;
    background: rgba(255, 248, 230, .07);
    box-shadow: inset 0 0 0 1px rgba(255, 236, 190, .08);
}

    .pub-player__slide i[b-5c82jfh2nm] {
        display: block;
        height: 6px;
        border-radius: 3px;
        background: rgba(255, 236, 190, .14);
    }

    .pub-player__slide .pub-player__slide-title[b-5c82jfh2nm] {
        width: 55%;
        height: 9px;
        margin-bottom: 4px;
        background: linear-gradient(90deg, rgba(244, 205, 88, .55), rgba(230, 173, 37, .3));
    }

    .pub-player__slide .pub-player__slide-short[b-5c82jfh2nm] {
        width: 62%;
    }

/* at the screen's far side from the first chip, so the chip never hides the timing it speaks of */
.pub-player__time[b-5c82jfh2nm] {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 9px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .5);
    color: #f0c85c;
    font: 600 .68rem/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.pub-page[dir="rtl"] .pub-player__time[b-5c82jfh2nm] {
    right: auto;
    left: 10px;
}

.pub-player__subs[b-5c82jfh2nm] {
    position: absolute;
    inset-inline: 6%;
    bottom: 8%;
    display: grid;
    justify-items: center;
}

.pub-player__cue[b-5c82jfh2nm] {
    grid-area: 1 / 1;
    align-self: end;
    max-width: 100%;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .66);
    color: #fff;
    font-size: .9rem;
    line-height: 1.7;
    text-align: center;
    white-space: pre-line;
    animation: pub-art-lang-b-5c82jfh2nm 9s ease-in-out infinite;
}

.pub-player__cue--source[b-5c82jfh2nm] {
    font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
}

.pub-player__cue--target[b-5c82jfh2nm] {
    font-family: IRANSansX, Tahoma, sans-serif;
    animation-name: pub-art-lang-in-b-5c82jfh2nm;
}

/* the second chip sits beside the slide, clear of the subtitle and the player's controls */
.pub-hero__stage--player .pub-chip--2[b-5c82jfh2nm] {
    inset-block-end: 60%;
}

/* on a phone the screen is too small to lay a chip on: it joins the third one under the player */
@media (max-width: 640px) {
    .pub-hero__stage--player .pub-chip--2[b-5c82jfh2nm] {
        inset-block-end: 4%;
    }

    .pub-player__cue[b-5c82jfh2nm] {
        font-size: .76rem;
    }
}

.pub-player__bar[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 8px 4px;
}

.pub-player__play[b-5c82jfh2nm] {
    flex: none;
    width: 0;
    height: 0;
    border-block: 6px solid transparent;
    border-left: 10px solid #f0c85c;
}

.pub-player__track[b-5c82jfh2nm] {
    position: relative;
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 236, 190, .14);
}

    /* the subtitle shows at 2:51 of a 20-minute video */
    .pub-player__track i[b-5c82jfh2nm] {
        position: absolute;
        inset-block: 0;
        left: 0;
        width: 14%;
        border-radius: inherit;
        background: linear-gradient(90deg, #e6ad25, #f4cd58);
    }

        .pub-player__track i[b-5c82jfh2nm]::after {
            content: "";
            position: absolute;
            top: 50%;
            right: -5px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #fff3c4;
            box-shadow: 0 0 0 4px rgba(244, 205, 88, .25);
            transform: translateY(-50%);
            animation: pub-pulse-dot-b-5c82jfh2nm 2.2s ease-in-out infinite;
        }

@keyframes pub-pulse-dot-b-5c82jfh2nm {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(244, 205, 88, .25);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(244, 205, 88, .08);
    }
}

/* ---------- showcase: the subtitle file, side by side ---------- */

.pub-cuestats[b-5c82jfh2nm] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 1040px;
    margin: -12px auto 28px;
    padding: 0;
    list-style: none;
}

    .pub-cuestats li[b-5c82jfh2nm] {
        display: grid;
        align-content: start;
        gap: 4px;
        padding: 16px 20px;
        border: 1px solid rgba(255, 236, 190, .12);
        border-radius: 20px;
        background: rgba(255, 255, 255, .04);
    }

    .pub-cuestats strong[b-5c82jfh2nm] {
        color: var(--pub-dark-ink);
        font-size: 1.7rem;
        font-weight: 800;
        line-height: 1.25;
        white-space: nowrap;
    }

        .pub-cuestats strong i[b-5c82jfh2nm] {
            margin-inline: 2px;
            color: #9a8b72;
            font-style: normal;
            font-weight: 600;
        }

    .pub-cuestats span[b-5c82jfh2nm] {
        color: var(--pub-dark-text);
        font-size: .84rem;
        line-height: 1.75;
    }

.pub-showcase--cues .pub-legend[b-5c82jfh2nm] {
    margin-top: 0;
}

.pub-srt[b-5c82jfh2nm] {
    display: grid;
    gap: 2px;
}

.pub-srt__meta[b-5c82jfh2nm] {
    display: block;
    color: #9a8b72;
    font: 600 .78rem/1.8 ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.pub-srt__time[b-5c82jfh2nm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: #c9b99c;
    font-family: inherit;
}

    .pub-srt__time bdi[b-5c82jfh2nm] {
        font: 600 .78rem/1.8 ui-monospace, "Cascadia Mono", Consolas, monospace;
    }

.pub-srt__same[b-5c82jfh2nm] {
    display: inline-flex;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(111, 196, 140, .16);
    color: #8fd6a6;
    font-size: .7rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.8;
}

/* each line of the file is marked off, so a line the screen has to wrap still reads as one */
.pub-srt__line[b-5c82jfh2nm] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 6px;
    padding-inline-start: 10px;
    border-inline-start: 2px solid rgba(255, 236, 190, .14);
}

.pub-passage__side--target .pub-srt__line[b-5c82jfh2nm] {
    border-inline-start-color: rgba(240, 191, 75, .4);
}

.pub-srt__text[b-5c82jfh2nm] {
    flex: 1;
    min-width: 0;
    color: var(--pub-dark-ink);
    font-size: .95rem;
    line-height: 1.95;
}

.pub-srt[dir="ltr"] .pub-srt__text[b-5c82jfh2nm] {
    font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    line-height: 1.8;
}

.pub-srt__count[b-5c82jfh2nm] {
    flex: none;
    min-width: 32px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(111, 196, 140, .14);
    color: #8fd6a6;
    font-size: .72rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.8;
    text-align: center;
}

    .pub-srt__count.is-over[b-5c82jfh2nm] {
        background: rgba(240, 128, 96, .14);
        color: #f0a088;
    }

.pub-legend .pub-srt__count--key[b-5c82jfh2nm] {
    width: auto;
    height: auto;
    padding: 0 7px;
}

/* a marked term never breaks across the box's edge ("250 A" is one thing) */
.pub-srt .pub-mark[b-5c82jfh2nm] {
    white-space: nowrap;
}

/* a translated line is a line of the file, and is shown as one */
.pub-passage__side--target .pub-srt__text[b-5c82jfh2nm] {
    white-space: nowrap;
}

/* the two files side by side need the room of a wide screen */
@media (max-width: 1000px) {
    .pub-passage--cue .pub-passage__body[b-5c82jfh2nm] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pub-passage--cue .pub-passage__arrow[b-5c82jfh2nm] {
        height: 34px;
    }

        .pub-passage--cue .pub-passage__arrow i[b-5c82jfh2nm]::after,
        .pub-page[dir="rtl"] .pub-passage--cue .pub-passage__arrow i[b-5c82jfh2nm]::after {
            transform: translate(-50%, -65%) rotate(135deg);
        }
}

/* a phone is narrower than a 42-character line: it wraps there, inside its mark */
@media (max-width: 560px) {
    .pub-srt__text[b-5c82jfh2nm] {
        font-size: .86rem;
    }

    .pub-passage__side--target .pub-srt__text[b-5c82jfh2nm] {
        white-space: normal;
    }
}

@media (max-width: 760px) {
    .pub-cuestats[b-5c82jfh2nm] {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

        .pub-cuestats li[b-5c82jfh2nm] {
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center;
            gap: 14px;
            padding: 12px 16px;
        }

        .pub-cuestats strong[b-5c82jfh2nm] {
            font-size: 1.35rem;
        }
}

/* ---------- drawing: the text changes, the time beside it doesn't ---------- */

.art-cues[b-5c82jfh2nm] {
    display: grid;
    gap: 12px;
    width: 86%;
    max-width: 330px;
}

.art-cues__row[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.art-cues__time[b-5c82jfh2nm] {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border: 1px solid rgba(226, 179, 63, .4);
    border-radius: 9px;
    background: rgba(240, 191, 75, .1);
    color: var(--pub-gold-ink);
    font: 700 .72rem/1 ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.pub-bento__card:nth-child(1) .art-cues__time[b-5c82jfh2nm] {
    color: #f0c85c;
}

    .art-cues__time svg[b-5c82jfh2nm] {
        width: 12px;
        height: 12px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
    }

.art-cues__chip[b-5c82jfh2nm] {
    display: grid;
    flex: 1;
    min-width: 0;
    padding: 7px 12px;
    border-radius: 9px;
    background: var(--pub-card-solid);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .16);
}

    .art-cues__chip b[b-5c82jfh2nm] {
        grid-area: 1 / 1;
        place-self: center;
        color: var(--pub-ink);
        font-size: .8rem;
        font-weight: 600;
        white-space: nowrap;
        animation: pub-art-lang-b-5c82jfh2nm 5s ease-in-out infinite;
        animation-delay: calc(var(--n) * .35s);
    }

    .art-cues__chip .art-cues__fa[b-5c82jfh2nm] {
        font-family: IRANSansX, Tahoma, sans-serif;
        animation-name: pub-art-lang-in-b-5c82jfh2nm;
    }

/* ---------- drawing: a line too long for the screen becomes two that fit ---------- */

.art-wrap[b-5c82jfh2nm] {
    position: relative;
    display: block;
    width: min(200px, 86%);
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 12px;
    background:
        radial-gradient(70% 60% at 30% 25%, rgba(240, 191, 75, .2), transparent 70%),
        #16120e;
    box-shadow: 0 14px 30px rgba(87, 64, 22, .2);
}

.art-wrap__ruler[b-5c82jfh2nm] {
    position: absolute;
    inset: 22px 18% 8px;
    border-inline: 1.5px dashed rgba(240, 200, 92, .55);
}

    .art-wrap__ruler em[b-5c82jfh2nm] {
        position: absolute;
        top: -16px;
        left: 50%;
        padding: 1px 6px;
        border-radius: 6px;
        background: #f0c85c;
        color: #2b210d;
        font: 800 .62rem/1.4 ui-monospace, Consolas, monospace;
        font-style: normal;
        translate: -50% 0;
    }

.art-wrap__lines[b-5c82jfh2nm] {
    position: absolute;
    inset-inline: 0;
    bottom: 16px;
    display: grid;
    justify-items: center;
    gap: 6px;
}

    .art-wrap__lines b[b-5c82jfh2nm] {
        display: block;
        height: 8px;
        border-radius: 4px;
        background: rgba(255, 255, 255, .88);
        box-shadow: 0 0 0 3px rgba(0, 0, 0, .45);
    }

.art-wrap__lines--long[b-5c82jfh2nm] {
    animation: pub-art-lang-b-5c82jfh2nm 5s ease-in-out infinite;
}

    .art-wrap__lines--long b[b-5c82jfh2nm] {
        width: 94%;
        background: #f0a088;
    }

.art-wrap__lines--even[b-5c82jfh2nm] {
    animation: pub-art-lang-in-b-5c82jfh2nm 5s ease-in-out infinite;
}

    .art-wrap__lines--even b:first-child[b-5c82jfh2nm] {
        width: 60%;
    }

    .art-wrap__lines--even b:last-child[b-5c82jfh2nm] {
        width: 56%;
    }

/* without motion: the translation, not two texts on top of each other */
@media (prefers-reduced-motion: reduce) {
    .pub-player__cue--source[b-5c82jfh2nm],
    .art-cues__en[b-5c82jfh2nm],
    .art-wrap__lines--long[b-5c82jfh2nm] {
        visibility: hidden;
    }
}
/* _content/AITranslationPlatform.Web/Components/Public/TrustSeal.razor.rz.scp.css */
/* The seal is drawn for a light page; on the dark footers it sits on its own
   card, which wwwroot/js/trust-seal.js shows only once the image has loaded. */
.trust-seal[b-gr7ou0huf7] {
    display: inline-flex;
    flex: none;
    border-radius: 12px;
    line-height: 0;
}

    .trust-seal.is-loaded[b-gr7ou0huf7] {
        padding: 6px;
        background: #fff;
    }

    .trust-seal[b-gr7ou0huf7]  a {
        display: block;
    }

    .trust-seal[b-gr7ou0huf7]  img {
        display: block;
        width: 72px;
        height: auto;
    }