/* Sitewide Cambodian background (sitewide background task, 31 Oct 2026). Design: .agents/tasks/sitewide-kh-background-2026-10-31/design.md
   White & Blue mode only (the layout does not load this file in custom design mode). Loaded after kh-landscape.css and ds-nav.css.
   Art: luminance masks in /assets/kh/ painted with one theme colour; every layer sits below all page content (z-index -1 in the
   root stacking context, or inside its own empty in-flow band), aria-hidden, pointer-events none, no <img>. */

/* ── 1. Tokens (light in :root; dark under html[data-theme="dark"], screen only so print stays light) ── */
:root {
    --kh-site-ink: #99B4E7;       /* the one colour of the art; tones come from the masks */
    --kh-site-far: .55;               /* strength of the far plane */
    --kh-site-river: .8;              /* strength of the ripple lines */
    --kh-site-band-bg: var(--ds-bg-subtle, #F8FAFC);
}
@media screen {
    html[data-theme="dark"] {
        --kh-site-ink: #2E5289;
        --kh-site-far: .6;
        --kh-site-river: .9;
    }
}

/* ── 2. The old Angkor marks retire (kh-landscape.css §10; the rules stay there until the footer task is live) ── */
@media (min-width: 640px) { body[data-page="home"] :is(#premium-accounts, #all-games) > .ds-section-head::after { content: none; } }
@media (min-width: 768px) { body[data-page="premium.show"] .ds-breadcrumb::after { content: none; } }
@supports not (mask-mode: luminance) {
    @media (min-width: 1024px) { body[data-page="game.show"] #main-content .lg\:col-span-4:has(+ .lg\:col-span-8 #orderForm)::after { content: none; } }
}

@media screen {
@supports (mask-mode: luminance) {

/* ── 3. Scene element: an empty span; ::before = far plane, ::after = near plane ── */
.khs { position: absolute; z-index: -1; display: block; pointer-events: none; -webkit-user-select: none; user-select: none; }
.khs::before, .khs::after {
    content: ""; position: absolute; inset: 0; background-color: var(--kh-site-ink);
    mask-mode: luminance; mask-repeat: no-repeat; transition: opacity .5s ease;
}
.khs::before { opacity: var(--kh-site-far); }
.khs-host, .khs-host-rel { position: relative; }

/* below-the-fold art loads only when it is within 800 px (kh-site-bg.js adds .khs-near; without JS everything shows) */
html.khs-lazy .khs[data-khs-lazy]:not(.khs-near)::before, html.khs-lazy .khs[data-khs-lazy]:not(.khs-near)::after,
html.khs-lazy [data-khs-lazy]:not(.khs-near) .khs::before, html.khs-lazy [data-khs-lazy]:not(.khs-near) .khs::after,
html.khs-lazy [data-khs-lazy]:not(.khs-near)::after {
    mask-image: none; background-color: transparent; opacity: 0;
}

/* ── 4. Page-coloured wrappers become transparent, so the art below them shows (same colour as the page) ── */
body:is([data-page="game.show"], [data-page="terms"], [data-page="user.dashboard"], [data-page="user.settings"],
        [data-page="user.deposit"], [data-page="user.api-keys"], [data-page="deposit.invoice"]) #main-content > .min-h-screen,
body:is([data-page="login"], [data-page="register"]) .au-page {
    background-color: transparent !important; background-image: none !important;
}

/* ── 5. Rails: fixed in the side gutters from 1440 px, on the dense pages ── */
.khs-rails { display: none; }
@media (min-width: 1440px) {
    body:is([data-page="home"], [data-page="game.show"], [data-page="premium.show"], [data-page="premium.orders.show"],
            [data-page^="user."], [data-page="invoice.show"], [data-page="deposit.invoice"]) .khs-rails { display: block; }
    .khs-rails .khs { position: fixed; bottom: 0; width: min(240px, calc((100vw - 1280px) / 2 + 6px)); aspect-ratio: 160 / 300; }
    .khs-rails .khs--rail-l { left: 0; }
    .khs-rails .khs--rail-r { right: 0; }
}

/* ── 6. Pre-footer band: an empty in-flow strip between the page and the footer, opaque in the page colour ── */
/* flex: none matters: <body> is a viewport-high flex column (style.css: html, body { height: 100% }; body { display: flex;
   flex-direction: column }), so a shrinkable item between <main> (flex: 1 0 auto) and the footer (flex-shrink: 0) is
   squeezed to 0 px. That is why the band painted nothing in the first trials (design-log.md, round 1). */
.khs-band { position: relative; display: block; flex: none; height: 120px; background: var(--kh-site-band-bg); overflow: hidden; pointer-events: none; }
.khs-band::after {
    content: ""; position: absolute; left: 0; right: 0; top: 70%; height: 22px; background-color: var(--kh-site-ink);
    opacity: var(--kh-site-river); mask: url(/assets/kh/kh-river.svg) 0 0 / 480px 22px repeat-x; mask-mode: luminance;
}
.khs-band-in { position: relative; height: 100%; max-width: 1280px; margin-inline: auto; }
.khs-band .khs { z-index: auto; bottom: 0; height: 100%; }
.khs-band .khs--band-l { left: 16px; }
.khs-band .khs--band-r { right: 16px; }
@media (min-width: 640px) and (max-width: 1023.98px) { .khs-band { height: 104px; } }
@media (max-width: 639.98px) {
    .khs-band { height: 100px; }
    .khs-band::after { top: 72%; height: 18px; mask-size: 400px 18px; }
    .khs-band .khs--band-l { left: 8px; }
    .khs-band .khs--band-r { right: 8px; }
}
body:is([data-page="login"], [data-page="register"]) .khs-band { display: none; }
/* Opt-in clearance above the band (fix A, 31 Oct): a page whose last box ends flush with the band (a full-width
   docs panel, a sticky sidebar card) sets @section('khs-band-clear', '1'); kh-backdrop then adds this class, and the
   band keeps 16 px of page colour above it (8 px on phones), so its art stays the design's clearance from that box. */
.khs-band--clear { margin-top: 16px; }
@media (max-width: 639.98px) { .khs-band--clear { margin-top: 8px; } }

/* ── 7. Section-head vignettes (home: Premium Accounts, All Games, and popular / events when published; order lookup
   "Recent orders" below 760 px) ── */
/* Round 2 (review M2): a vignette rises at most --khs-rise above its head, so it keeps its distance from whatever
   sits above the head. A section ends 40 px (>= 1024 px) or 32 px above the next head (.ds-section margin-bottom);
   the banner image ends 32 px above the first head (its 8 px pagination strip, then mb-6 / mb-4).
   Rise 22 px leaves 18 px (desktop) and 10 px (phones); after the banner, rise 14 px leaves 18 px and 10 px. */
body:is([data-page="home"], [data-page="order-history"]) .ds-section-head { position: relative; }
.khs-at-head { --khs-rise: 22px; right: 0; bottom: 0; height: min(92px, calc(100% + var(--khs-rise))); }
.hero-slider-wrap + .ds-section > .ds-section-head > .khs-at-head { --khs-rise: 14px; }
@media (min-width: 760px) { .khs-only-narrow { display: none; } }
/* 820-1023 px: same as desktop, at most 72 px tall (the subtitle ends more than 30 px left of the vignette) */
@media (min-width: 820px) and (max-width: 1023.98px) {
    .khs-at-head { --khs-rise: 16px; height: min(72px, calc(100% + var(--khs-rise))); }
    .hero-slider-wrap + .ds-section > .ds-section-head > .khs-at-head { --khs-rise: 14px; }
}
/* 640-819 px: the subtitle can reach the right end of the head, so the vignette stands 16 px into the gap above the
   head and ends 26 px into the title row, 10 px above the subtitle */
@media (min-width: 640px) and (max-width: 819.98px) {
    .khs-at-head { top: -16px; bottom: auto; height: 42px; }
    .khs-at-head--notile { top: -24px; height: 41px; }
}
/* phones: from --khs-rise above the head to --khs-into into the title row (with the 32 px icon tile the subtitle
   starts 34 px down; a title without the tile, --notile, is one 25 px line, so its subtitle starts 27 px down) */
@media (max-width: 639.98px) {
    .khs-at-head { top: calc(-1 * var(--khs-rise)); bottom: auto; height: calc(var(--khs-rise) + var(--khs-into, 27px)); }
    .khs-at-head--long { display: none; }
    /* order lookup "Recent orders": 40 px above the head (mt-10), no icon tile */
    .khs-at-head--notile { --khs-rise: 28px; --khs-into: 18px; }
}

/* ── 8. Home grid interludes: a full row every 24 games ── */
.khs-interlude { grid-column: 1 / -1; position: relative; height: 72px; list-style: none; pointer-events: none; }
.khs-interlude::after {
    content: ""; position: absolute; left: 0; right: 0; top: 54px; height: 18px; background-color: var(--kh-site-ink);
    opacity: var(--kh-site-river); mask: url(/assets/kh/kh-river.svg) 0 0 / 400px 18px repeat-x; mask-mode: luminance;
}
.khs-interlude .khs { z-index: auto; left: 50%; top: 0; height: 100%; transform: translateX(-50%); }
@media (max-width: 639.98px) {
    .khs-interlude { height: 56px; }
    .khs-interlude::after { top: 40px; height: 16px; mask-size: 360px 16px; }
}

/* In-flow dividers (own height) in pages this task owns: terms (under the title, between sections) and the
   payment result pages below 1000 px (under the result card). Same drawing rules as the interludes. */
.khs-divider { position: relative; display: block; height: 72px; margin: 4px 0 20px; pointer-events: none; }
.khs-divider::after {
    content: ""; position: absolute; left: 0; right: 0; top: 54px; height: 18px; background-color: var(--kh-site-ink);
    opacity: var(--kh-site-river); mask: url(/assets/kh/kh-river.svg) 0 0 / 400px 18px repeat-x; mask-mode: luminance;
}
.khs-divider .khs { z-index: auto; left: 50%; top: 0; height: 100%; transform: translateX(-50%); }
.khs-divider--result { height: 120px; margin: 28px auto 0; max-width: 448px; }
.khs-divider--result::after { top: 95px; height: 16px; mask-size: 360px 16px; }
@media (min-width: 1000px) { .khs-divider--result { display: none; } }
@media (max-width: 639.98px) {
    .khs-divider { height: 56px; margin: 0 0 16px; }
    .khs-divider::after { top: 40px; height: 16px; mask-size: 360px 16px; }
    /* round 2: the result variant keeps its own size on phones (the rule above made it 56 px tall with no margin,
       6.5 px under the result card) */
    .khs-divider--result { height: 104px; margin: 24px auto 0; }
    .khs-divider--result::after { top: 83px; height: 14px; mask-size: 316px 14px; }
}
/* premium product page (round 2, review M4): a divider above "More Premium Accounts", at every width. Its -16 px
   bottom margin collapses with the section's 40 px top margin: 16 px above (12 on phones), 24 px below, 72 px tall */
.khs-divider--related { margin: 16px 0 -16px; }
@media (max-width: 639.98px) {
    .khs-divider--related { height: 72px; margin: 12px 0 -16px; }
    .khs-divider--related::after { top: 56px; height: 16px; mask-size: 360px 16px; }
}

/* ── 9. Flanks beside narrow content: order lookup, payment results, terms ── */
.khs-at-flank { top: 16px; width: min(300px, calc(50% - 312px)); }
.khs-at-flank--l { right: calc(50% + 312px); }
.khs-at-flank--r { left: calc(50% + 312px); }
/* 760-999 px: 18 px from the 576 px column (round 2: 12 px before, found once cards count as quiet zones) */
@media (min-width: 760px) and (max-width: 999.98px) {
    .khs-at-flank { top: 40px; width: min(120px, calc(50% - 306px)); }
    .khs-at-flank--l { right: calc(50% + 306px); }
    .khs-at-flank--r { left: calc(50% + 306px); }
}
@media (max-width: 759.98px) { .khs-at-flank { display: none; } }

.khs-at-low { top: 210px; width: min(280px, calc(50% - 296px)); }
.khs-at-low--l { left: 24px; }
.khs-at-low--r { right: 24px; }
@media (max-width: 999.98px) { .khs-at-low { display: none; } }

.khs-at-side { width: min(240px, calc(50% - 472px)); }
.khs-at-side--l { right: calc(50% + 472px); }
.khs-at-side--r { left: calc(50% + 472px); }
.khs-at-side--a { top: 48px; }
.khs-at-side--b { top: 40%; }
.khs-at-side--c { top: 72%; }
@media (max-width: 1199.98px) { .khs-at-side { display: none; } }

/* ── 10. Premium product page: breadcrumb accent (replaces the old mark) ── */
body[data-page="premium.show"] .ds-breadcrumb { position: relative; }
.khs-at-crumb { right: 0; bottom: -4px; height: 56px; }
/* 640-1023 px: the product image card is 16 px under the breadcrumb, so the accent ends 2 px above the breadcrumb's
   bottom (round 2: 12 px from the card before) and stays below the header */
@media (min-width: 640px) and (max-width: 1023.98px) { .khs-at-crumb { bottom: 2px; height: 42px; } }
@media (max-width: 639.98px) { .khs-at-crumb { bottom: -2px; height: 44px; } }

/* ── 11. Game page (CSS only; the view belongs to another task): the left-column panel, re-skinned ── */
@media (min-width: 1024px) {
    body[data-page="game.show"] #main-content .lg\:col-span-4:has(+ .lg\:col-span-8 #orderForm)::after {
        aspect-ratio: 300 / 210;
        margin-bottom: calc(-40px - 78% * 210 / 300);
        background: var(--kh-site-ink);
        -webkit-mask: none;
        display: block; mask-image: url(/assets/kh/kh-palm-c.svg), url(/assets/kh/kh-angkor.svg), url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-river.svg); mask-position: -1.12% 113.42%, 57.48% 98.98%, 101.53% 95.62%, 0% 84.84%; mask-size: 23.24% 86.57%, 82.17% 79.79%, 14.61% 77.09%, 160% 10.48%; mask-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
        mask-mode: luminance;
        mask-origin: content-box; mask-clip: content-box;
    }
}

/* Below 1024 px the page is one column of cards: one strip between the game card and step 1 (the column's ::after),
   in its own 64 px; the step cards stay untouched. The end of the form is marked by the pre-footer band (an extra
   strip there stood 96 px above the band, two strips in a row: dropped in round 1). */
@media (max-width: 1023.98px) {
    body[data-page="game.show"] #main-content .lg\:col-span-4:has(+ .lg\:col-span-8 #orderForm)::after {
        content: ""; display: block; height: 64px; margin: 10px 0 2px; pointer-events: none;
        background-color: var(--kh-site-ink); mask-mode: luminance; display: block; mask-image: url(/assets/kh/kh-palm-c.svg), url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-angkor.svg), url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-palm-b.svg), url(/assets/kh/kh-river.svg); mask-position: calc(50% + -149.9px) 0.0px, calc(50% + -112.0px) 10.0px, calc(50% + 0.0px) 6.0px, calc(50% + 104.0px) 8.0px, calc(50% + 147.5px) 12.0px, 0 49.5px; mask-size: 27.2px 71.0px, 15.4px 56.8px, 91.9px 62.5px, 16.1px 59.6px, 24.8px 54.0px, 305px 14px; mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat-x;
    }
}
/* 640-1023 px (round 3, design review round 2, LOW): 18 px under the game card, so the art keeps the 16 px tablet
   clearance (10 px left 11 px at 820 px; phones keep 10 px against their 8 px rule) */
@media (min-width: 640px) and (max-width: 1023.98px) {
    body[data-page="game.show"] #main-content .lg\:col-span-4:has(+ .lg\:col-span-8 #orderForm)::after { margin-top: 18px; }
}

/* The game page's temple never shares the screen with the footer's temple: the column's ::after (the panel from
   1024 px, the strip below) shows only while html.khs-far is set, i.e. while the pre-footer band is still below the
   view (kh-site-bg.js). It goes at once and comes back with a fade; without the script it stays hidden. */
body[data-page="game.show"] #main-content .lg\:col-span-4:has(+ .lg\:col-span-8 #orderForm)::after { opacity: 0; }
html.khs-far body[data-page="game.show"] #main-content .lg\:col-span-4:has(+ .lg\:col-span-8 #orderForm)::after { opacity: 1; transition: opacity .5s ease; }
@media (prefers-reduced-motion: reduce) { html.khs-far body[data-page="game.show"] #main-content .lg\:col-span-4:has(+ .lg\:col-span-8 #orderForm)::after { transition: none; } }

/* ── 12. Sign-in pages (auth task's markup; reached from this file only): quiet edge motifs ── */
body:is([data-page="login"], [data-page="register"]) .au-main { position: relative; }
body:is([data-page="login"], [data-page="register"]) .au-main::before,
body:is([data-page="login"], [data-page="register"]) .au-main::after {
    content: ""; position: absolute; z-index: -1; bottom: 0; pointer-events: none;
    background-color: var(--kh-site-ink); mask-mode: luminance; mask-repeat: no-repeat;
}
@media (max-width: 599.98px) {
    body:is([data-page="login"], [data-page="register"]) .au-main::before { left: 12px; width: 72px; aspect-ratio: 72 / 56; display: block; mask-image: url(/assets/kh/kh-palm-b.svg), url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-river.svg); mask-position: 31.25% -164.34%, 91.08% 0%, 0% 98.96%; mask-size: 38.13% 106.52%, 25.62% 121.72%, 242.42% 14.29%; mask-repeat: no-repeat, no-repeat, repeat-x; }
    body:is([data-page="login"], [data-page="register"]) .au-main::after { right: 12px; width: 72px; aspect-ratio: 72 / 56; display: block; mask-image: url(/assets/kh/kh-monument.svg), url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-river.svg); mask-position: 33% -1004.35%, 90.5% -21.45%, 0% 98.96%; mask-size: 34.63% 101.42%, 24.56% 116.65%, 242.42% 14.29%; mask-repeat: no-repeat, no-repeat, repeat-x; }
}
/* phones: one landmark at the right of the heading line, from 8 px under the top bar down to the heading's
   last line (the subtitle starts below it); z-index auto, because the phone card is opaque in the page colour */
@media (max-width: 599.98px) {
    body:is([data-page="login"], [data-page="register"]) .au-head { position: relative; }
    body:is([data-page="login"], [data-page="register"]) .au-head::after {
        content: ""; position: absolute; right: 0; top: calc(8px - var(--au-offset, 24px)); height: calc(var(--au-offset, 24px) + 22px);
        aspect-ratio: 84 / 60; pointer-events: none; background-color: var(--kh-site-ink); mask-mode: luminance; display: block; mask-image: url(/assets/kh/kh-bayon.svg), url(/assets/kh/kh-palm-a.svg); mask-position: 26.51% -263.16%, 98.02% -20.49%; mask-size: 59.46% 108.87%, 25.62% 132.54%; mask-repeat: no-repeat, no-repeat;
    }
}
/* register (round 2, review M1): "Create your account" is 249 px wide at a fixed 1.625rem, so below 375 px the Bayon
   would reach the title. 340-374 px: the narrower Independence Monument with a palm; below 340 px: no heading motif
   (less than 40 px free beside the title); the corner motifs stay. Gaps measured in design-log.md R2. */
@media (max-width: 374.98px) {
    body[data-page="register"] .au-head::after { aspect-ratio: 58 / 60; display: block; mask-image: url(/assets/kh/kh-monument.svg), url(/assets/kh/kh-palm-a.svg); mask-position: 26.13% -263.36%, 96.61% -20.49%; mask-size: 49.44% 108.86%, 37.11% 132.54%; mask-repeat: no-repeat, no-repeat; }
}
@media (max-width: 339.98px) {
    body[data-page="register"] .au-head::after { content: none; }
}
/* Tablet and desktop (round 3): every motif stays in the side gutter, at least 16 px from the 480 px card, whatever
   the page height. The card's box counts as a quiet zone since round 3, and the register card (743 px) reaches the
   bottom of the column on most screens, so a motif under the card would run beneath it. Gutter = 50% - 240px of
   .au-main; the motif is 16 px in from the outer edge, so its width is 50% - 272px. */
@media (min-width: 600px) and (max-width: 655.98px) {
    body:is([data-page="login"], [data-page="register"]) .au-main::before,
    body:is([data-page="login"], [data-page="register"]) .au-main::after { display: none; }   /* gutter under 88 px */
}
@media (min-width: 656px) and (max-width: 1023.98px) {
    body:is([data-page="login"], [data-page="register"]) .au-main::before { left: 16px; bottom: 24px; width: min(200px, calc(50% - 272px)); aspect-ratio: 1; display: block; mask-image: url(/assets/kh/kh-palm-b.svg), url(/assets/kh/kh-palm-c.svg), url(/assets/kh/kh-river.svg); mask-position: 119.45% 116.25%, 44.95% -36.72%, 0% 94.17%; mask-size: 52.29% 68.17%, 72.62% 113.62%, 363.64% 10%; mask-repeat: no-repeat, no-repeat, repeat-x; }
    body:is([data-page="login"], [data-page="register"]) .au-main::after { right: 16px; bottom: 24px; width: min(200px, calc(50% - 272px)); aspect-ratio: 1; display: block; mask-image: url(/assets/kh/kh-monument.svg), url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-river.svg); mask-position: 55.68% 493.34%, 120.57% -153.65%, 0% 94.17%; mask-size: 70.65% 96.55%, 48.04% 106.51%, 363.64% 10%; mask-repeat: no-repeat, no-repeat, repeat-x; }
}
/* desktop: the form column is 52 % of the screen (at most 832 px), so the gutter motif is at least 56 px wide from
   1264 px; a narrow, tall scene (the Independence Monument with a palm) fits the gutter */
@media (min-width: 1024px) and (max-width: 1263.98px) {
    body:is([data-page="login"], [data-page="register"]) .au-main::before { display: none; }
}
@media (min-width: 1264px) {
    body:is([data-page="login"], [data-page="register"]) .au-main::before { left: 16px; bottom: 8px; width: min(120px, calc(50% - 272px)); aspect-ratio: 120 / 200; display: block; mask-image: url(/assets/kh/kh-monument.svg), url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-river.svg); mask-position: 55.68% 493.34%, 120.57% -153.65%, 0% 94.17%; mask-size: 70.65% 96.55%, 48.04% 106.51%, 363.64% 10%; mask-repeat: no-repeat, no-repeat, repeat-x; }
}

/* ── 13. Error pages (errors/ds-layout.blade.php): a horizon of landmarks below the error card ── */
/* Round 3 (design review round 2, MEDIUM): the horizon is in normal flow, the last item of the layout's <body>, a
   viewport-high flex column (min-height 100vh / 100dvh, padding 24px) in which the card has margin-block: auto. So the
   horizon reserves its own height: the card centres in the space above it, the horizon stands on the bottom of the
   screen, and when the card is taller than that space the page scrolls and the horizon follows the card, 24 px
   below it (16 px on phones). It can never lie under the card. The negative margins take it through the body's
   24 px padding to the screen edges. (Round 2 had it position: fixed to the screen bottom, under a card centred in
   the whole screen, so on short screens the card covered it.) */
.khs-err { position: relative; display: block; flex: none; align-self: stretch; height: clamp(180px, 34vh, 300px);
           margin: 24px -24px -24px; overflow: hidden; pointer-events: none; }
.khs-err::after {
    content: ""; position: absolute; left: 0; right: 0; top: 83.3%; height: 26px; background-color: var(--kh-site-ink);
    opacity: var(--kh-site-river); mask: url(/assets/kh/kh-river.svg) 0 0 / 480px 22px repeat-x; mask-mode: luminance;
}
.khs-err .khs { z-index: auto; bottom: 0; height: 100%; }
.khs-err .khs-err-l { left: 2%; }
.khs-err .khs-err-r { right: 2%; }
.khs-err .khs-err-c { left: 50%; transform: translateX(-50%); }
/* the centre scene needs 1240 px: below that its box would meet the side scenes' boxes at the 300 px height (the card
   is above the horizon now, so the screen height no longer matters) */
@media (max-width: 1239.98px) { .khs-err .khs-err-c { display: none; } }
@media (max-width: 639.98px) {
    .khs-err { height: 150px; margin-top: 16px; }
}

/* ── 14. Payment windows open: no art anywhere behind them ── */
/* The guard is html.khs-pay from kh-site-bg.js: it is set while any payment window or sheet has a rendered box, so it
   covers every way a page opens one. The game page opens Bakong with style.display = 'block' and keeps the "hidden"
   class (game-show.js), and the ABA PayWay sheet stays in the DOM while closed, so neither can be read by a class
   selector. The :has(...:not(.hidden)) rule below is only a no-JS backup for pages that toggle the class. */
html.khs-pay :is(.khs, .khs-band, .khs-interlude, .khs-divider, #orderForm, .lg\:col-span-4, .au-main, .au-head)::after, html.khs-pay :is(.khs, .au-main)::before,
body:has(#bakongModal:not(.hidden), #joykneaModal:not(.hidden)) :is(.khs, .khs-band, .khs-interlude, .khs-divider, #orderForm, .lg\:col-span-4)::after,
body:has(#bakongModal:not(.hidden), #joykneaModal:not(.hidden)) .khs::before { visibility: hidden; }

/* ── 15. Motion and contrast preferences ── */
@media (prefers-reduced-motion: reduce) { .khs::before, .khs::after { transition: none; } }
@media (forced-colors: active) { .khs, .khs-rails, .khs-err, .khs-interlude::after, .khs-band::after, .au-head::after { display: none; } }

/* ── 16. Scene compositions (generated by art/build_css.py from art/scenes.py) ── */
.khs--head-palace { aspect-ratio: 330 / 92; }
.khs--head-palace::after { display: block; mask-image: url(/assets/kh/kh-palm-c.svg), url(/assets/kh/kh-palace.svg), url(/assets/kh/kh-palm-a.svg); mask-position: 25.6% -12.13%, 66.35% -29.32%, 93.66% -74.59%; mask-size: 14.52% 135.85%, 35.14% 129.66%, 9.08% 120.4%; mask-repeat: no-repeat, no-repeat, no-repeat; }
.khs--head-palace::before { display: block; mask-image: url(/assets/kh/kh-palm-b.svg); mask-position: 5.93% 353.25%; mask-size: 11.49% 89.54%; mask-repeat: no-repeat; }
.khs--head-bayon { aspect-ratio: 250 / 92; }
.khs--head-bayon::after { display: block; mask-image: url(/assets/kh/kh-bayon.svg), url(/assets/kh/kh-palm-a.svg); mask-position: 64.93% -100.5%, 94.55% -29.32%; mask-size: 33.01% 117.3%, 12.91% 129.66%; mask-repeat: no-repeat, no-repeat; }
.khs--head-bayon::before { display: block; mask-image: url(/assets/kh/kh-palm-c.svg); mask-position: 19.7% -1499.39%; mask-size: 14.38% 101.88%; mask-repeat: no-repeat; }
.khs--head-temple { aspect-ratio: 360 / 92; }
.khs--head-temple::after { display: block; mask-image: url(/assets/kh/kh-palm-c.svg), url(/assets/kh/kh-angkor.svg), url(/assets/kh/kh-palm-a.svg); mask-position: 14.81% -12.13%, 60.37% -55.54%, 95.56% -55.53%; mask-size: 13.31% 135.85%, 46.43% 123.48%, 8.54% 123.49%; mask-repeat: no-repeat, no-repeat, no-repeat; }
.khs--head-temple::before { display: block; mask-image: url(/assets/kh/kh-palm-b.svg); mask-position: 2.16% 220.43%; mask-size: 9.44% 80.28%; mask-repeat: no-repeat; }
.khs--head-monument { aspect-ratio: 200 / 92; }
.khs--head-monument::after { display: block; mask-image: url(/assets/kh/kh-monument.svg), url(/assets/kh/kh-palm-a.svg); mask-position: 60.75% -40.93%, 90.18% -55.53%; mask-size: 25.56% 126.56%, 15.37% 123.49%; mask-repeat: no-repeat, no-repeat; }
.khs--head-monument::before { display: block; mask-image: url(/assets/kh/kh-palm-c.svg); mask-position: 20.63% -524.65%; mask-size: 18.52% 104.97%; mask-repeat: no-repeat; }
.khs--rail-l { aspect-ratio: 160 / 300; }
.khs--rail-l::after { display: block; mask-image: url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-monument.svg); mask-position: -26.37% -20.49%, 101.7% 247.53%; mask-size: 67.26% 132.54%, 68.57% 83.3%; mask-repeat: no-repeat, no-repeat; }
.khs--rail-l::before { display: block; mask-image: url(/assets/kh/kh-palm-c.svg); mask-position: 67.05% -419.25%; mask-size: 76.26% 106.04%; mask-repeat: no-repeat; }
.khs--rail-r { aspect-ratio: 160 / 300; }
.khs--rail-r::after { display: block; mask-image: url(/assets/kh/kh-bayon.svg), url(/assets/kh/kh-palm-a.svg); mask-position: 36.22% 151.29%, 163.58% -11.01%; mask-size: 90.93% 63.43%, 69.18% 136.33%; mask-repeat: no-repeat, no-repeat; }
.khs--rail-r::before { display: block; mask-image: url(/assets/kh/kh-palm-b.svg); mask-position: -85.55% 364.84%; mask-size: 77.61% 89.95%; mask-repeat: no-repeat; }
.khs--band-l { aspect-ratio: 420 / 120; }
.khs--band-l::after { display: block; mask-image: url(/assets/kh/kh-palm-c.svg), url(/assets/kh/kh-monument.svg), url(/assets/kh/kh-palm-a.svg); mask-position: 3.95% 65.05%, 25.02% 67.94%, 41.4% 68.7%; mask-size: 10.12% 92.31%, 10.39% 82.83%, 5.86% 75.74%; mask-repeat: no-repeat, no-repeat, no-repeat; }
.khs--band-l::before { display: block; mask-image: url(/assets/kh/kh-palm-b.svg); mask-position: 59.18% 69.51%; mask-size: 7.16% 54.44%; mask-repeat: no-repeat; }
.khs--band-r { aspect-ratio: 420 / 120; }
.khs--band-r::after { display: block; mask-image: url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-palace.svg), url(/assets/kh/kh-palm-c.svg); mask-position: 56.59% 68.51%, 84.09% 68.84%, 99.31% 65.05%; mask-size: 6.04% 78.11%, 20.38% 73.37%, 10.12% 92.31%; mask-repeat: no-repeat, no-repeat, no-repeat; }
.khs--band-r::before { display: block; mask-image: url(/assets/kh/kh-bayon.svg); mask-position: 37.78% 69.62%; mask-size: 10.34% 47.33%; mask-repeat: no-repeat; }
.khs--inter-a { aspect-ratio: 520 / 72; }
.khs--inter-a::after { display: block; mask-image: url(/assets/kh/kh-palm-c.svg), url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-bayon.svg), url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-palm-c.svg); mask-position: 7.81% 404.3%, 28.17% 97.12%, 50% 142.86%, 72.26% 105.1%, 92.73% -108.05%; mask-size: 5.24% 98.63%, 3.1% 82.84%, 9.92% 93.68%, 3.25% 86.78%, 5.45% 102.57%; mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; }
.khs--inter-a::before { display: block; mask-image: url(/assets/kh/kh-palm-b.svg), url(/assets/kh/kh-palm-b.svg); mask-position: 19.06% 81.65%, 82.21% 81.65%; mask-size: 3.77% 59.18%, 3.77% 59.18%; mask-repeat: no-repeat, no-repeat; }
.khs--inter-b { aspect-ratio: 520 / 72; }
.khs--inter-b::after { display: block; mask-image: url(/assets/kh/kh-palm-c.svg), url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-monument.svg), url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-palm-c.svg); mask-position: 7.81% 404.3%, 28.17% 97.12%, 50% -58.93%, 72.26% 105.1%, 92.73% -108.05%; mask-size: 5.24% 98.63%, 3.1% 82.84%, 6.29% 103.54%, 3.25% 86.78%, 5.45% 102.57%; mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; }
.khs--inter-b::before { display: block; mask-image: url(/assets/kh/kh-palm-b.svg), url(/assets/kh/kh-palm-b.svg); mask-position: 19.06% 81.65%, 82.21% 81.65%; mask-size: 3.77% 59.18%, 3.77% 59.18%; mask-repeat: no-repeat, no-repeat; }
.khs--inter-c { aspect-ratio: 520 / 72; }
.khs--inter-c::after { display: block; mask-image: url(/assets/kh/kh-palm-c.svg), url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-palace.svg), url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-palm-c.svg); mask-position: 7.81% 404.3%, 28.17% 97.12%, 50% 111.13%, 72.26% 105.1%, 92.73% -108.05%; mask-size: 5.24% 98.63%, 3.1% 82.84%, 11.95% 88.75%, 3.25% 86.78%, 5.45% 102.57%; mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; }
.khs--inter-c::before { display: block; mask-image: url(/assets/kh/kh-palm-b.svg), url(/assets/kh/kh-palm-b.svg); mask-position: 19.06% 81.65%, 82.21% 81.65%; mask-size: 3.77% 59.18%, 3.77% 59.18%; mask-repeat: no-repeat, no-repeat; }
.khs--related { aspect-ratio: 520 / 72; }
.khs--related::after { display: block; mask-image: url(/assets/kh/kh-palm-c.svg), url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-bayon.svg), url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-palm-c.svg); mask-position: 7.81% 404.3%, 28.17% 97.12%, 50% 142.86%, 72.26% 105.1%, 92.73% -108.05%; mask-size: 5.24% 98.63%, 3.1% 82.84%, 9.92% 93.68%, 3.25% 86.78%, 5.45% 102.57%; mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; }
.khs--related::before { display: block; mask-image: url(/assets/kh/kh-palm-b.svg), url(/assets/kh/kh-palm-b.svg); mask-position: 19.06% 81.65%, 82.21% 81.65%; mask-size: 3.77% 59.18%, 3.77% 59.18%; mask-repeat: no-repeat, no-repeat; }
.khs--flank-bayon { aspect-ratio: 300 / 280; }
.khs--flank-bayon::after { display: block; mask-image: url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-bayon.svg), url(/assets/kh/kh-river.svg); mask-position: -1.99% -12.87%, 65.03% 158.08%, 0% 93.45%; mask-size: 29.47% 116.65%, 60.08% 84.19%, 203.64% 10%; mask-repeat: no-repeat, no-repeat, repeat-x; }
.khs--flank-bayon::before { display: block; mask-image: url(/assets/kh/kh-palm-b.svg); mask-position: 115.3% 128.43%; mask-size: 32.68% 76.09%; mask-repeat: no-repeat; }
.khs--flank-monument { aspect-ratio: 300 / 280; }
.khs--flank-monument::after { display: block; mask-image: url(/assets/kh/kh-monument.svg), url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-river.svg); mask-position: 40.61% -182.51%, 95.87% 0%, 0% 93.45%; mask-size: 43.22% 105.48%, 30.24% 119.7%, 203.64% 10%; mask-repeat: no-repeat, no-repeat, repeat-x; }
.khs--flank-monument::before { display: block; mask-image: url(/assets/kh/kh-palm-c.svg); mask-position: -0.23% 179.15%; mask-size: 31.23% 87.24%; mask-repeat: no-repeat; }
.khs--flank-palace { aspect-ratio: 300 / 260; }
.khs--flank-palace::after { display: block; mask-image: url(/assets/kh/kh-palace.svg), url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-river.svg); mask-position: 50% 162.76%, 104.12% -141.92%, 0% 92.09%; mask-size: 72.7% 86.29%, 24.86% 105.96%, 189.09% 10%; mask-repeat: no-repeat, no-repeat, repeat-x; }
.khs--flank-palace::before { display: block; mask-image: url(/assets/kh/kh-palm-b.svg); mask-position: -0.64% 114.11%; mask-size: 28.32% 71.01%; mask-repeat: no-repeat; }
.khs--flank-temple { aspect-ratio: 460 / 252; }
.khs--flank-temple::after { display: block; mask-image: url(/assets/kh/kh-palm-c.svg), url(/assets/kh/kh-angkor.svg), url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-river.svg); mask-position: -1.46% 313.33%, 50% 148.22%, 98.4% 168.15%, 0% 92.7%; mask-size: 19.89% 94.68%, 67.22% 83.4%, 12.87% 86.78%, 123.32% 10.32%; mask-repeat: no-repeat, no-repeat, no-repeat, repeat-x; }
.khs--flank-temple::before { display: none; mask-image: none; }
.khs--crumb { aspect-ratio: 132 / 56; }
.khs--crumb::after { display: block; mask-image: url(/assets/kh/kh-monument.svg), url(/assets/kh/kh-palm-a.svg); mask-position: 68.08% -22.43%, 96.74% -9.67%; mask-size: 24.56% 131.85%, 15.72% 136.94%; mask-repeat: no-repeat, no-repeat; }
.khs--crumb::before { display: block; mask-image: url(/assets/kh/kh-palm-b.svg); mask-position: 27.33% 410.63%; mask-size: 17.83% 91.3%; mask-repeat: no-repeat; }
.khs--result { aspect-ratio: 330 / 120; }
.khs--result::after { display: block; mask-image: url(/assets/kh/kh-palm-c.svg), url(/assets/kh/kh-palace.svg), url(/assets/kh/kh-monument.svg), url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-river.svg); mask-position: 3.98% 1709.09%, 39.29% 126.23%, 78.41% 135.09%, 96.57% 394.27%, 0% 91.83%; mask-size: 13.86% 99.41%, 29.28% 82.84%, 13.6% 85.19%, 9.55% 97.04%, 105.79% 13.33%; mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x; }
.khs--result::before { display: block; mask-image: url(/assets/kh/kh-palm-b.svg); mask-position: 60.72% 88.62%; mask-size: 7.92% 47.34%; mask-repeat: no-repeat; }
@media (min-width: 760px) and (max-width: 999.98px) {
.khs--flank-bayon { aspect-ratio: 120 / 200; }
.khs--flank-bayon::after { display: block; mask-image: url(/assets/kh/kh-palm-c.svg), url(/assets/kh/kh-river.svg); mask-position: 44.95% -36.72%, 0% 94.17%; mask-size: 72.62% 113.62%, 363.64% 10%; mask-repeat: no-repeat, repeat-x; }
.khs--flank-bayon::before { display: block; mask-image: url(/assets/kh/kh-palm-b.svg); mask-position: 119.45% 116.25%; mask-size: 52.29% 68.17%; mask-repeat: no-repeat; }
.khs--flank-monument { aspect-ratio: 120 / 200; }
.khs--flank-monument::after { display: block; mask-image: url(/assets/kh/kh-monument.svg), url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-river.svg); mask-position: 55.68% 493.34%, 120.57% -153.65%, 0% 94.17%; mask-size: 70.65% 96.55%, 48.04% 106.51%, 363.64% 10%; mask-repeat: no-repeat, no-repeat, repeat-x; }
.khs--flank-monument::before { display: none; mask-image: none; }
}
@media (min-width: 640px) and (max-width: 819.98px) {
.khs--head-temple { aspect-ratio: 360 / 92; }
.khs--head-temple::after { display: block; mask-image: url(/assets/kh/kh-palm-c.svg), url(/assets/kh/kh-angkor.svg), url(/assets/kh/kh-palm-a.svg); mask-position: 12.25% -12.13%, 61.35% -12.13%, 97.38% -55.53%; mask-size: 13.31% 135.85%, 51.07% 135.83%, 8.54% 123.49%; mask-repeat: no-repeat, no-repeat, no-repeat; }
.khs--head-temple::before { display: block; mask-image: url(/assets/kh/kh-palm-b.svg); mask-position: 0.93% 220.43%; mask-size: 9.44% 80.28%; mask-repeat: no-repeat; }
}
@media (max-width: 639.98px) {
.khs--head-palace { aspect-ratio: 124 / 60; }
.khs--head-palace::after { display: block; mask-image: url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-palace.svg); mask-position: 3.51% -35.96%, 75.47% -90.9%; mask-size: 16.74% 127.81%, 55.66% 118.34%; mask-repeat: no-repeat, no-repeat; }
.khs--head-palace::before { display: none; mask-image: none; }
.khs--head-bayon { aspect-ratio: 124 / 60; }
.khs--head-bayon::after { display: block; mask-image: url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-bayon.svg); mask-position: 5.11% -20.49%, 72.26% -147.06%; mask-size: 17.36% 132.54%, 42.03% 113.6%; mask-repeat: no-repeat, no-repeat; }
.khs--head-bayon::before { display: none; mask-image: none; }
.khs--head-temple { aspect-ratio: 132 / 60; }
.khs--head-temple::after { display: block; mask-image: url(/assets/kh/kh-angkor.svg), url(/assets/kh/kh-palm-a.svg); mask-position: 50% -147%, 101.43% -90.86%; mask-size: 75.97% 113.61%, 14.56% 118.34%; mask-repeat: no-repeat, no-repeat; }
.khs--head-temple::before { display: none; mask-image: none; }
.khs--head-monument { aspect-ratio: 100 / 60; }
.khs--head-monument::after { display: block; mask-image: url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-monument.svg); mask-position: 24.76% -35.96%, 82.55% -57.82%; mask-size: 20.76% 127.81%, 32.42% 123.06%; mask-repeat: no-repeat, no-repeat; }
.khs--head-monument::before { display: none; mask-image: none; }
.khs--band-l { aspect-ratio: 170 / 100; }
.khs--band-l::after { display: block; mask-image: url(/assets/kh/kh-palm-c.svg), url(/assets/kh/kh-bayon.svg); mask-position: 9.08% 95.76%, 67.06% 77.19%; mask-size: 21.15% 93.73%, 34.49% 76.68%; mask-repeat: no-repeat, no-repeat; }
.khs--band-l::before { display: block; mask-image: url(/assets/kh/kh-palm-a.svg); mask-position: 96.38% 74.64%; mask-size: 9.95% 62.48%; mask-repeat: no-repeat; }
.khs--band-r { aspect-ratio: 160 / 100; }
.khs--band-r::after { display: block; mask-image: url(/assets/kh/kh-monument.svg), url(/assets/kh/kh-palm-a.svg); mask-position: 36.82% 83.57%, 85.86% 116.54%; mask-size: 24.16% 88.03%, 16.34% 96.57%; mask-repeat: no-repeat, no-repeat; }
.khs--band-r::before { display: block; mask-image: url(/assets/kh/kh-palm-b.svg); mask-position: 4.85% 74.09%; mask-size: 16.34% 56.81%; mask-repeat: no-repeat; }
.khs--inter-a { aspect-ratio: 200 / 56; }
.khs--inter-a::after { display: block; mask-image: url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-bayon.svg), url(/assets/kh/kh-palm-b.svg); mask-position: 21.11% 77.76%, 50% 74.81%, 81.7% 74.67%; mask-size: 6.53% 86.22%, 16.5% 77.09%, 9.8% 76.09%; mask-repeat: no-repeat, no-repeat, no-repeat; }
.khs--inter-a::before { display: none; mask-image: none; }
.khs--inter-b { aspect-ratio: 200 / 56; }
.khs--inter-b::after { display: block; mask-image: url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-monument.svg), url(/assets/kh/kh-palm-b.svg); mask-position: 21.11% 77.76%, 50% 77.19%, 81.7% 74.67%; mask-size: 6.53% 86.22%, 10.47% 85.19%, 9.8% 76.09%; mask-repeat: no-repeat, no-repeat, no-repeat; }
.khs--inter-b::before { display: none; mask-image: none; }
.khs--inter-c { aspect-ratio: 200 / 56; }
.khs--inter-c::after { display: block; mask-image: url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-palace.svg), url(/assets/kh/kh-palm-b.svg); mask-position: 21.11% 77.76%, 50% 74.16%, 81.7% 74.67%; mask-size: 6.53% 86.22%, 19.88% 73.03%, 9.8% 76.09%; mask-repeat: no-repeat, no-repeat, no-repeat; }
.khs--inter-c::before { display: none; mask-image: none; }
.khs--related { aspect-ratio: 220 / 72; }
.khs--related::after { display: block; mask-image: url(/assets/kh/kh-palm-c.svg), url(/assets/kh/kh-bayon.svg), url(/assets/kh/kh-palm-a.svg); mask-position: 8.08% -42.63%, 51.21% 600%, 89.84% 603.37%; mask-size: 13.37% 106.52%, 24.68% 98.61%, 8.74% 98.62%; mask-repeat: no-repeat, no-repeat, no-repeat; }
.khs--related::before { display: block; mask-image: url(/assets/kh/kh-palm-b.svg), url(/assets/kh/kh-palm-b.svg); mask-position: 28.63% 88.46%, 74.34% 86.87%; mask-size: 8.91% 59.18%, 8.32% 55.23%; mask-repeat: no-repeat, no-repeat; }
.khs--flank-bayon { aspect-ratio: 120 / 200; }
.khs--flank-bayon::after { display: block; mask-image: url(/assets/kh/kh-palm-c.svg), url(/assets/kh/kh-river.svg); mask-position: 44.95% -36.72%, 0% 94.17%; mask-size: 72.62% 113.62%, 363.64% 10%; mask-repeat: no-repeat, repeat-x; }
.khs--flank-bayon::before { display: block; mask-image: url(/assets/kh/kh-palm-b.svg); mask-position: 119.45% 116.25%; mask-size: 52.29% 68.17%; mask-repeat: no-repeat; }
.khs--flank-monument { aspect-ratio: 120 / 200; }
.khs--flank-monument::after { display: block; mask-image: url(/assets/kh/kh-monument.svg), url(/assets/kh/kh-palm-a.svg), url(/assets/kh/kh-river.svg); mask-position: 55.68% 493.34%, 120.57% -153.65%, 0% 94.17%; mask-size: 70.65% 96.55%, 48.04% 106.51%, 363.64% 10%; mask-repeat: no-repeat, no-repeat, repeat-x; }
.khs--flank-monument::before { display: none; mask-image: none; }
}

/* ── 17. Breadcrumb accent never behind the trail (live visual review 20261031-O, 31 Oct) ──
   The accent becomes the last flex item of the breadcrumb: it fills only the room left after the current-page name
   (margin -6px cancels the flex gap, so its box starts where the trail ends) and is a size container. Its drawing is
   the same box as before (same size and corner, so the masks are unchanged), anchored to the right end, and it shows
   only when that room holds the drawing plus the clearance: 8 px below 640 px, 16 px from 640 px (the drawing's first
   ink is 22.5 % into its box, so room >= 77.5 % of its width + clearance). Long names or narrow phones: no accent.
   Browsers without container queries never show it. */
body[data-page="premium.show"] .ds-breadcrumb > .khs--crumb { position: relative; right: auto; bottom: auto; height: auto; aspect-ratio: auto; flex: 1 1 0; min-width: 0;
    align-self: stretch; margin-left: -6px; container-type: inline-size; }
/* the empty box itself is invisible, so it is no layout-shift source when the trail reflows (font swap); its drawings stay visible */
body[data-page="premium.show"] .ds-breadcrumb > .khs--crumb { visibility: hidden; }
html:not(.khs-pay) body[data-page="premium.show"] .ds-breadcrumb > .khs--crumb::before, html:not(.khs-pay) body[data-page="premium.show"] .ds-breadcrumb > .khs--crumb::after { visibility: visible; }
body[data-page="premium.show"] .ds-breadcrumb > .khs--crumb::before, body[data-page="premium.show"] .ds-breadcrumb > .khs--crumb::after { inset: auto 0 -4px auto; width: 132px; height: 56px; display: none; }
@media (min-width: 640px) and (max-width: 1023.98px) { body[data-page="premium.show"] .ds-breadcrumb > .khs--crumb::before, body[data-page="premium.show"] .ds-breadcrumb > .khs--crumb::after { bottom: 2px; width: 99px; height: 42px; } }
@media (max-width: 639.98px) { body[data-page="premium.show"] .ds-breadcrumb > .khs--crumb::before, body[data-page="premium.show"] .ds-breadcrumb > .khs--crumb::after { bottom: -2px; width: 103.71px; height: 44px; } }
@container (min-width: 120px) { @media (min-width: 1024px) { body[data-page="premium.show"] .ds-breadcrumb > .khs--crumb::before, body[data-page="premium.show"] .ds-breadcrumb > .khs--crumb::after { display: block; } } }
@container (min-width: 96px) { @media (min-width: 640px) and (max-width: 1023.98px) { body[data-page="premium.show"] .ds-breadcrumb > .khs--crumb::before, body[data-page="premium.show"] .ds-breadcrumb > .khs--crumb::after { display: block; } } }
@container (min-width: 90px) { @media (max-width: 639.98px) { body[data-page="premium.show"] .ds-breadcrumb > .khs--crumb::before, body[data-page="premium.show"] .ds-breadcrumb > .khs--crumb::after { display: block; } } }

}
}

/* Browsers without luminance masks (Chrome < 120, Safari < 15.4) and print: no art, and the empty strips collapse */
@supports not (mask-mode: luminance) { .khs, .khs-rails, .khs-band, .khs-interlude, .khs-divider, .khs-err { display: none; } }
@media print { .khs, .khs-rails, .khs-band, .khs-interlude, .khs-divider, .khs-err { display: none !important; } }