/* === SIMME EXPLORE SYMSOUL V2.57 — PERSISTENT SEE YOUR JOURNEY ACCESS === */
/* 21 AUGUST 2026 — built directly on V2.56. */
/* === SIMME EXPLORE SYMSOUL V2.55 CRITICAL FIRST-LOAD LOCK — SINGLE JOURNEY SCROLL SURFACE === */
/* =========================================================
   SIMME EXPLORE SYMSOUL V2.55
   21 AUGUST 2026

   Corrects the large-screen My SymSoul Journey crop caused by the saved
   category list retaining its old nested-scroll cap (390px desktop / 300px
   compact desktop). On high-density / scaled displays this appears as a hard
   horizontal cut through the list with unused Journey space below it.

   Locked behaviour restored here:
   - the Journey panel is the ONE vertical scroll surface
   - the saved-category list expands naturally to its full content height
   - no inner Journey list scrollbar / crop
   - toolbar remains sticky via the existing Journey toolbar rules
   - no card, value, PDF, heart, navigation or mobile behaviour is changed
   ========================================================= */
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel .ssjx__journey-list[data-ssjx-journey-list],
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel .ssjx__journey-list[data-ssjx-journey-list]:not([hidden]) {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scrollbar-width: auto !important;
}

/* The panel, not the list, owns Journey scrolling. */
html body.ssjx-has-modal .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}
/* === END V2.55 CRITICAL FIRST-LOAD LOCK === */

/* === SIMME EXPLORE SYMSOUL V2.54 CRITICAL FIRST-LOAD LOCK — DETAIL NAV + SINGLE READING CONTROL === */
/*
   21 AUGUST 2026

   This block is deliberately placed at the FRONT of the master stylesheet and
   at the END of the shortcode's own critical stylesheet.

   Why:
   - the Simme master CSS is very large and the existing code already documents
     that a CSS manager may truncate its tail;
   - WordPress/theme button rules exist later in the cascade;
   - the duplicate Reading Surface card must never reappear even if stale markup
     is briefly served.

   Locked result:
   - only the top-toolbar Dark / Light selector remains;
   - Detail and Journey Back to categories controls use one SymSoul route-node
     component with category-aware / Journey-aware colour;
   - hover/focus/active never alter width, height, scale or position.
*/

/* Defensive guard only. V2.54 PHP no longer emits this card. */
html body .ssjx.ssjx .ssjx__detail-side > .ssjx__detail-side-card.ssjx__detail-side-card--reading,
html body .ssjx.ssjx .ssjx__detail-side > .ssjx__detail-side-card.ssjx__detail-side-card--reading * {
    display: none !important;
}

/* Shared fixed geometry. Deliberately high-specificity to beat legacy !important rules. */
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"],
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"]:hover,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"]:focus,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"]:focus-visible,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"]:active,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"],
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"]:hover,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"]:focus,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"]:focus-visible,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"]:active {
    all: unset !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: inline-flex !important;
    flex: 0 0 226px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 226px !important;
    min-width: 226px !important;
    max-width: 226px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    margin: 0 !important;
    padding: 0 12px 0 9px !important;
    gap: 10px !important;
    overflow: hidden !important;
    isolation: isolate !important;
    border: 1px solid transparent !important;
    border-radius: 17px !important;
    outline: 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    font-style: normal !important;
    line-height: 1 !important;
    letter-spacing: .005em !important;
    text-align: left !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    opacity: 1 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    filter: none !important;
    transition: color 180ms ease, background 220ms ease, box-shadow 220ms ease !important;
}

/* Detail = current category family colour. */
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"],
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"]:focus,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"]:active {
    color: #e2ecfb !important;
    background:
        radial-gradient(circle at 15% 50%, rgba(var(--ssjx-detail-rgb,108,174,255),.18), transparent 31%) padding-box,
        linear-gradient(145deg, rgba(16,27,47,.99), rgba(5,11,23,.998)) padding-box,
        linear-gradient(108deg, rgba(var(--ssjx-detail-rgb,108,174,255),.78), rgba(201,226,255,.20) 50%, rgba(var(--ssjx-detail-rgb,108,174,255),.40)) border-box !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.065), 0 6px 18px rgba(0,0,0,.24), 0 0 18px rgba(var(--ssjx-detail-rgb,108,174,255),.09) !important;
}

html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"]:hover,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"]:focus-visible {
    color: #fff !important;
    background:
        radial-gradient(circle at 15% 50%, rgba(var(--ssjx-detail-rgb,108,174,255),.29), transparent 34%) padding-box,
        linear-gradient(145deg, rgba(22,40,67,.995), rgba(7,16,31,.999)) padding-box,
        linear-gradient(108deg, rgba(var(--ssjx-detail-rgb,108,174,255),.98), rgba(229,241,255,.34) 50%, rgba(var(--ssjx-detail-rgb,108,174,255),.67)) border-box !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 6px 18px rgba(0,0,0,.25), 0 0 24px rgba(var(--ssjx-detail-rgb,108,174,255),.19) !important;
}

/* Journey = route green. */
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"],
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"]:focus,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"]:active {
    color: #e8f7e5 !important;
    background:
        radial-gradient(circle at 15% 50%, rgba(103,255,82,.13), transparent 31%) padding-box,
        linear-gradient(145deg, rgba(15,31,26,.99), rgba(5,15,17,.998)) padding-box,
        linear-gradient(108deg, rgba(103,255,82,.64), rgba(220,255,214,.18) 50%, rgba(103,255,82,.34)) border-box !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.24), 0 0 17px rgba(103,255,82,.075) !important;
}

html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"]:hover,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"]:focus-visible {
    color: #fff !important;
    background:
        radial-gradient(circle at 15% 50%, rgba(103,255,82,.22), transparent 34%) padding-box,
        linear-gradient(145deg, rgba(22,46,34,.995), rgba(6,20,19,.999)) padding-box,
        linear-gradient(108deg, rgba(128,255,109,.90), rgba(226,255,220,.28) 50%, rgba(103,255,82,.58)) border-box !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 6px 18px rgba(0,0,0,.25), 0 0 23px rgba(103,255,82,.15) !important;
}

/* Circular route-node arrow, fixed in every state. */
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"] svg,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"]:hover svg,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"]:focus svg,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"]:focus-visible svg,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"]:active svg,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"] svg,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"]:hover svg,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"]:focus svg,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"]:focus-visible svg,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"]:active svg {
    all: unset !important;
    box-sizing: border-box !important;
    display: block !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
    padding: 6px !important;
    overflow: visible !important;
    border-radius: 999px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    opacity: 1 !important;
    transform: rotate(180deg) !important;
    translate: none !important;
    scale: 1 !important;
}

html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"] svg {
    color: #f2f8ff !important;
    background: rgba(var(--ssjx-detail-rgb,108,174,255),.10) !important;
    border: 1px solid rgba(var(--ssjx-detail-rgb,108,174,255),.53) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 13px rgba(var(--ssjx-detail-rgb,108,174,255),.16) !important;
}

html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"] svg {
    color: #eaffea !important;
    background: rgba(103,255,82,.075) !important;
    border: 1px solid rgba(103,255,82,.43) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 12px rgba(103,255,82,.11) !important;
}

/* Small glowing destination node after the label. */
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"]::after,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"]::after {
    box-sizing: border-box !important;
    position: static !important;
    display: block !important;
    flex: 0 0 6px !important;
    width: 6px !important;
    min-width: 6px !important;
    max-width: 6px !important;
    height: 6px !important;
    min-height: 6px !important;
    max-height: 6px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    content: "" !important;
    border: 0 !important;
    border-radius: 999px !important;
    pointer-events: none !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
}

html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"]::after {
    background: rgb(var(--ssjx-detail-rgb,108,174,255)) !important;
    box-shadow: 0 0 8px rgba(var(--ssjx-detail-rgb,108,174,255),.62) !important;
}

html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"]::after {
    background: #79ff68 !important;
    box-shadow: 0 0 8px rgba(103,255,82,.52) !important;
}

html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"] > span,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"] > span {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font: inherit !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Light detail canvas: retain the node language on a pale surface. */
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas[data-ssjx-reading="light"] header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"],
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas[data-ssjx-reading="light"] header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"]:hover,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas[data-ssjx-reading="light"] header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"]:focus,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas[data-ssjx-reading="light"] header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"]:focus-visible,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas[data-ssjx-reading="light"] header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"]:active {
    color: #243b59 !important;
    background:
        radial-gradient(circle at 15% 50%, rgba(var(--ssjx-detail-rgb,108,174,255),.12), transparent 31%) padding-box,
        linear-gradient(145deg, rgba(255,255,255,.997), rgba(237,244,252,.997)) padding-box,
        linear-gradient(108deg, rgba(var(--ssjx-detail-rgb,108,174,255),.70), rgba(105,136,173,.18) 50%, rgba(var(--ssjx-detail-rgb,108,174,255),.38)) border-box !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 6px 16px rgba(31,52,78,.10), 0 0 16px rgba(var(--ssjx-detail-rgb,108,174,255),.08) !important;
}

/* Pressed state changes depth only. Geometry is explicitly locked again. */
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"]:active,
html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"]:active {
    width: 226px !important;
    min-width: 226px !important;
    max-width: 226px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
}

@media (max-width: 720px) {
    html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"],
    html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"]:hover,
    html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"]:focus,
    html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"]:focus-visible,
    html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"]:active,
    html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"],
    html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"]:hover,
    html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"]:focus,
    html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"]:focus-visible,
    html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"]:active {
        flex: 0 0 46px !important;
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        padding: 0 !important;
        justify-content: center !important;
        gap: 0 !important;
        border-radius: 14px !important;
    }

    html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"] > span,
    html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"] > span,
    html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"]::after,
    html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"]::after {
        display: none !important;
    }

    html body .ssjx.ssjx .ssjx__modal.ssjx__modal--detail article.ssjx__detail-canvas header.ssjx__detail-toolbar > button.ssjx__detail-back.ssjx__detail-back[data-ssjx-action="close-detail"] svg,
    html body .ssjx.ssjx .ssjx__modal.ssjx__modal--journey article.ssjx__journey-panel header.ssjx__journey-toolbar > button.ssjx__journey-back.ssjx__journey-back[data-ssjx-action="close-journey"] svg {
        flex-basis: 30px !important;
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        padding: 5px !important;
    }
}
/* === END V2.54 CRITICAL FIRST-LOAD LOCK === */

/* === SIMME EXPLORE SYMSOUL V2.51 CRITICAL ADDITIONS — RESTORED LOCKED PINK HEART STATES === */
/* =========================================================
   SIMME EXPLORE SYMSOUL V2.51
   21 AUGUST 2026

   Restores the locked saved-heart language across the complete Explore /
   My SymSoul Journey interface.

   V2.47's handover explicitly locks activated/saved hearts and Journey count
   hearts to pink, but the inherited master still contained older V2.27 lime
   count-heart rules, V2.11 red saved-heart rules, and category-colour preview
   rules. A complete CSS replacement therefore allowed those legacy colours
   to reappear.

   This canonical top-level override makes the locked behaviour explicit:
   - every saved category heart is solid pink
   - preview and detail saved hearts are solid pink
   - toolbar saved hearts are pink
   - Journey count heart badges are pink
   - inactive hearts remain unchanged
   - no card sizing, Journey logic, PDF, hover or responsive behaviour changes
   ========================================================= */

/* One canonical saved-heart colour for the whole SymSoul Explore system. */
html body .ssjx {
    --ssjx-saved-heart-pink: #ed76d5;
    --ssjx-saved-heart-pink-rgb: 237, 118, 213;
}

/* Category-card favourites: saved state only. */
html body .ssjx .ssjx__card-save.is-saved,
html body .ssjx .ssjx__card-save[aria-pressed="true"] {
    color: var(--ssjx-saved-heart-pink) !important;
    background: rgba(var(--ssjx-saved-heart-pink-rgb), .14) !important;
    border-color: rgba(var(--ssjx-saved-heart-pink-rgb), .84) !important;
    box-shadow:
        inset 0 0 11px rgba(var(--ssjx-saved-heart-pink-rgb), .09),
        0 0 15px rgba(var(--ssjx-saved-heart-pink-rgb), .20) !important;
    opacity: 1 !important;
}

html body .ssjx .ssjx__card-save.is-saved svg,
html body .ssjx .ssjx__card-save[aria-pressed="true"] svg,
html body .ssjx .ssjx__card-save.is-saved svg path,
html body .ssjx .ssjx__card-save[aria-pressed="true"] svg path {
    color: var(--ssjx-saved-heart-pink) !important;
    fill: var(--ssjx-saved-heart-pink) !important;
    stroke: var(--ssjx-saved-heart-pink) !important;
    filter: drop-shadow(0 0 5px rgba(var(--ssjx-saved-heart-pink-rgb), .34)) !important;
}

/* Preview + detail save controls.  The surrounding button can retain its
   category styling; the saved-heart symbol itself always becomes pink. */
html body .ssjx [data-ssjx-action="preview-save"].is-saved svg,
html body .ssjx [data-ssjx-action="preview-save"][data-saved="true"] svg,
html body .ssjx [data-ssjx-action="preview-save"][aria-pressed="true"] svg,
html body .ssjx [data-ssjx-action="detail-save"].is-saved svg,
html body .ssjx [data-ssjx-action="detail-save"][data-saved="true"] svg,
html body .ssjx [data-ssjx-action="detail-save"][aria-pressed="true"] svg,
html body .ssjx [data-ssjx-action="preview-save"].is-saved svg path,
html body .ssjx [data-ssjx-action="preview-save"][data-saved="true"] svg path,
html body .ssjx [data-ssjx-action="preview-save"][aria-pressed="true"] svg path,
html body .ssjx [data-ssjx-action="detail-save"].is-saved svg path,
html body .ssjx [data-ssjx-action="detail-save"][data-saved="true"] svg path,
html body .ssjx [data-ssjx-action="detail-save"][aria-pressed="true"] svg path {
    color: var(--ssjx-saved-heart-pink) !important;
    fill: var(--ssjx-saved-heart-pink) !important;
    stroke: var(--ssjx-saved-heart-pink) !important;
    filter: drop-shadow(0 0 6px rgba(var(--ssjx-saved-heart-pink-rgb), .40)) !important;
}

/* The compact heart button in the detail toolbar also adopts the pink saved
   border/glow, while its unsaved state stays exactly as before. */
html body .ssjx .ssjx__detail-toolbar [data-ssjx-action="detail-save"].is-saved,
html body .ssjx .ssjx__detail-toolbar [data-ssjx-action="detail-save"][data-saved="true"],
html body .ssjx .ssjx__detail-toolbar [data-ssjx-action="detail-save"][aria-pressed="true"] {
    color: var(--ssjx-saved-heart-pink) !important;
    border-color: rgba(var(--ssjx-saved-heart-pink-rgb), .72) !important;
    background: rgba(var(--ssjx-saved-heart-pink-rgb), .075) !important;
    box-shadow: 0 0 15px rgba(var(--ssjx-saved-heart-pink-rgb), .13) !important;
    opacity: 1 !important;
}

/* Journey saved-count badges: override the inherited V2.27 lime heart. */
html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] > button > b[data-ssjx-mobile-count]::before,
html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] > button > b[data-ssjx-mobile-count]::before {
    background: linear-gradient(145deg, #ffd8f3 0%, #f493df 38%, var(--ssjx-saved-heart-pink) 100%) !important;
    filter:
        drop-shadow(0 0 1px rgba(255, 235, 249, .92))
        drop-shadow(0 0 9px rgba(var(--ssjx-saved-heart-pink-rgb), .43)) !important;
}

html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] > button > b[data-ssjx-mobile-count],
html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] > button > b[data-ssjx-mobile-count] {
    color: #25061d !important;
}

/* Legacy Journey-count class retained defensively for any existing rendered
   instance, keeping it in the same pink language. */
html body .ssjx .ssjx__journey-count {
    color: #25061d !important;
    background: linear-gradient(145deg, #ffd8f3 0%, #f493df 38%, var(--ssjx-saved-heart-pink) 100%) !important;
    border-color: rgba(255, 216, 243, .74) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .50),
        0 0 18px rgba(var(--ssjx-saved-heart-pink-rgb), .31) !important;
}

/* === SIMME EXPLORE SYMSOUL V2.50 CRITICAL ADDITIONS — MATCHED EXPLORE CARD GEOMETRY === */
/* =========================================================
   SIMME EXPLORE SYMSOUL V2.50
   20 AUGUST 2026

   Corrects the remaining desktop mismatch between the purple Creative /
   Personal cards and the blue Where SymSoul Helps cards.

   Root cause addressed here:
   the professional-side titles can require four lines at the three-column
   and compact four-column widths. Reserving only the height of the shorter
   titles lets that grid acquire taller intrinsic rows.

   V2.50 therefore sizes the DESKTOP GRID ROWS themselves, not just the card:
   - every standard card row is 184px on BOTH sides
   - every standard title receives a 62px four-line text slot
   - 921-1180px: four equal standard rows + one 84px full-width final row
   - 1181px+: three equal standard rows + one 84px full-width final row
   - <=920px remains untouched
   - no hover/favourite/icon/arrow/Journey/PDF behaviour changes
   ========================================================= */

@media (min-width: 921px) {
    html body .ssjx .ssjx__groups {
        align-items: stretch !important;
    }

    html body .ssjx .ssjx__group {
        align-self: stretch !important;
    }

    /* Standard cards fill the fixed row assigned by the category grid. */
    html body .ssjx .ssjx__card:not(.ssjx__card--last) {
        box-sizing: border-box !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        align-self: stretch !important;
    }

    html body .ssjx .ssjx__card:not(.ssjx__card--last) .ssjx__card-main {
        box-sizing: border-box !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        grid-template-rows: 48px 62px 28px !important;
        align-content: center !important;
    }

    /*
     * Four-line title reserve shared by every standard card.
     * At the current desktop title sizes this is slightly more than four
     * complete lines, so the longest professional titles fit without asking
     * their grid row to become taller than the Creative / Personal row.
     */
    html body .ssjx .ssjx__card:not(.ssjx__card--last) .ssjx__card-title {
        box-sizing: border-box !important;
        display: block !important;
        width: 100% !important;
        height: 62px !important;
        min-height: 62px !important;
        max-height: 62px !important;
        align-self: start !important;
        overflow: visible !important;
    }

    /* Preserve the deliberately compact full-width final card on both sides. */
    html body .ssjx .ssjx__card--last,
    html body .ssjx .ssjx__card--last .ssjx__card-main {
        box-sizing: border-box !important;
        height: 84px !important;
        min-height: 84px !important;
        max-height: 84px !important;
    }
}

/* 3 columns per family: 12 standard cards = four equal rows, then final card. */
@media (min-width: 921px) and (max-width: 1180px) {
    html body .ssjx .ssjx__grid {
        grid-template-rows: repeat(4, 184px) 84px !important;
    }
}

/* 4 columns per family: 12 standard cards = three equal rows, then final card. */
@media (min-width: 1181px) {
    html body .ssjx .ssjx__grid {
        grid-template-rows: repeat(3, 184px) 84px !important;
    }
}

/* === SIMME EXPLORE SYMSOUL V2.47 CRITICAL ADDITIONS — COMBINED SYMSOUL COVER LOGO === */
/* =========================================================
   SIMME EXPLORE SYMSOUL V2.47
   20 AUGUST 2026

   Replaces the separate Simme character + live SymSoul wordmark in the
   miniature PDF preview with the supplied combined transparent SymSoul logo.
   The combined logo is deliberately larger than the previous brand row.
   ========================================================= */

html body .ssjx .ssjx__journey-pdf-brand {
    top: 10px !important;
    left: 13px !important;
    display: block !important;
    width: 62px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body .ssjx .ssjx__journey-pdf-brand > img {
    display: block !important;
    width: 62px !important;
    height: auto !important;
    min-width: 62px !important;
    max-width: 62px !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 5px rgba(25,191,255,.16)) !important;
}

html body .ssjx .ssjx__journey-pdf-brand > span {
    display: none !important;
}
/* === SIMME EXPLORE SYMSOUL V2.46 CRITICAL ADDITIONS — TIMED DESTRUCTIVE GATE === */
/* =========================================================
   SIMME EXPLORE SYMSOUL V2.46
   20 AUGUST 2026

   Restores the protected Clear Journey interaction:
   - clearly visible caution styling in its normal state
   - first click arms a five-second "Are you sure?" gate
   - second click inside that window performs the destructive action
   - the gate automatically cancels when the timer expires or focus moves away
   ========================================================= */

html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"],
html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"]:hover,
html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"]:focus,
html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"]:focus-visible,
html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"]:active {
    position: relative !important;
    isolation: isolate !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 122px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    overflow: hidden !important;
    color: #ffc4d7 !important;
    background: linear-gradient(180deg, rgba(77,24,47,.54), rgba(35,15,29,.76)) !important;
    border: 1px solid rgba(255,104,157,.60) !important;
    border-radius: 12px !important;
    outline: 0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 0 15px rgba(255,83,145,.08) !important;
    font-size: 11px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    transition:
        color 160ms ease,
        background 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease !important;
}

html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"]:hover,
html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"]:focus-visible {
    color: #ffe6ef !important;
    background: linear-gradient(180deg, rgba(98,28,58,.66), rgba(45,17,36,.86)) !important;
    border-color: rgba(255,126,171,.88) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 0 18px rgba(255,83,145,.15) !important;
}

html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"].is-confirming,
html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"][data-ssjx-confirming="true"] {
    color: #fff5f8 !important;
    background: linear-gradient(180deg, rgba(198,43,93,.94), rgba(127,24,65,.96)) !important;
    border-color: rgba(255,154,187,.98) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 0 0 2px rgba(255,85,143,.08),
        0 0 22px rgba(255,62,127,.24) !important;
}

html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"].is-confirming::after,
html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"][data-ssjx-confirming="true"]::after {
    position: absolute !important;
    z-index: 2 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 3px !important;
    content: "" !important;
    background: linear-gradient(90deg, #ffd5e4, #ff83b0, #ff4f8d) !important;
    transform-origin: left center !important;
    animation: ssjx-clear-gate-v246 5s linear forwards !important;
    pointer-events: none !important;
}

html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"]:disabled {
    color: #6f7586 !important;
    background: rgba(24,27,38,.52) !important;
    border-color: rgba(151,161,194,.18) !important;
    box-shadow: none !important;
    cursor: default !important;
    opacity: .62 !important;
}

@keyframes ssjx-clear-gate-v246 {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

@media (max-width: 520px) {
    html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"],
    html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"]:hover,
    html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"]:focus,
    html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"]:active {
        min-width: 112px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 0 12px !important;
        font-size: 10.5px !important;
    }
}


/* === SIMME EXPLORE SYMSOUL V2.45 CRITICAL ADDITIONS — REMOVE OBSOLETE PROGRESS STRIPS === */
/* The old four-step Discover / Explore / Save / Build strips no longer map to real application state. */
html body .ssjx .ssjx__progress-line,
html body .ssjx .ssjx__journey-progress {
    display: none !important;
}

/* === SIMME EXPLORE SYMSOUL V2.44 CRITICAL ADDITIONS — PDF COVER BRAND ALIGNMENT === */
/* =========================================================
   SIMME EXPLORE SYMSOUL V2.44
   20 AUGUST 2026

   Keeps the website preview aligned with the revised downloadable PDF:
   - slightly larger Simme character beside the white SymSoul wordmark
   - lighter-weight SymSoul wordmark
   - vertical centring between the character and the SymSoul wordmark
   - no change to the clean Journey-Cover-2 background asset
   ========================================================= */

html body .ssjx .ssjx__journey-pdf-brand > img {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    background: transparent !important;
}

html body .ssjx .ssjx__journey-pdf-brand > span {
    font-size: 7.3px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

html body .ssjx .ssjx__journey-pdf-title {
    top: 63px !important;
    left: 13px !important;
    font-size: 20px !important;
    line-height: .95 !important;
    letter-spacing: -.045em !important;
}

html body .ssjx .ssjx__journey-pdf-cover > small {
    top: 123px !important;
    left: 14px !important;
    font-size: 5.2px !important;
    line-height: 1.34 !important;
}
/* === SIMME EXPLORE SYMSOUL V2.32 CRITICAL ADDITIONS — LOCKED GOLD VALUE THEME === */
/* =========================================================
   SIMME EXPLORE SYMSOUL V2.32
   20 AUGUST 2026

   High-specificity value-panel skin. The data-ssjx-value-panel attribute is
   deliberately part of every selector so the older V2.29 green !important
   rules cannot win the cascade later in the master stylesheet.
   Visual direction: approved SymSoul Value pitch — gold + charcoal + navy.
   ========================================================= */

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] {
    --ssjx-value-gold: #f4cf66;
    --ssjx-value-gold-bright: #ffdf78;
    --ssjx-value-gold-soft: #ffe8a6;
    --ssjx-value-gold-deep: #b98a22;
    --ssjx-value-gold-rgb: 244,207,102;
    --ssjx-value-ice: #d9e9fb;
    border: 1px solid rgba(244,207,102,.72) !important;
    background:
        radial-gradient(circle at 12% 4%, rgba(244,207,102,.20), transparent 33%),
        radial-gradient(circle at 82% 18%, rgba(61,111,192,.18), transparent 34%),
        linear-gradient(112deg, rgba(62,64,64,.96) 0%, rgba(40,43,48,.97) 35%, rgba(21,31,48,.985) 66%, rgba(9,24,51,.995) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 0 0 1px rgba(255,219,120,.045),
        0 0 0 1px rgba(172,120,14,.16),
        0 14px 34px rgba(2,7,15,.34),
        0 0 26px rgba(244,207,102,.13) !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__journey-value-head {
    display: grid !important;
    grid-template-columns: 88px minmax(0,1fr) !important;
    align-items: center !important;
    gap: 18px !important;
    margin: 0 !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__journey-value-head > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 9px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__journey-value-icon,
html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__journey-value-icon--coin {
    display: block !important;
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    padding: 0 !important;
    overflow: visible !important;
    color: transparent !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__journey-value-icon img,
html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__journey-value-icon--coin img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    filter:
        drop-shadow(0 2px 0 rgba(255,255,255,.16))
        drop-shadow(0 7px 12px rgba(0,0,0,.24))
        drop-shadow(0 0 16px rgba(244,207,102,.30)) !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__journey-value-head > div > span {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ssjx-value-gold-bright) !important;
    font-size: 9.2px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 10px rgba(244,207,102,.12) !important;
    white-space: normal !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__journey-value-head > div > strong {
    display: block !important;
    width: 100% !important;
    max-width: 25ch !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff8e7 !important;
    font-size: clamp(19px,2vw,25px) !important;
    font-weight: 850 !important;
    line-height: 1.14 !important;
    letter-spacing: -.02em !important;
    text-wrap: balance !important;
    white-space: normal !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__journey-value-copy {
    margin: 15px 0 !important;
    color: #d2dae7 !important;
    font-size: 10px !important;
    line-height: 1.6 !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-hero {
    position: relative !important;
    min-height: 126px !important;
    padding: 18px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 15% 4%, rgba(255,222,118,.19), transparent 34%),
        radial-gradient(circle at 86% 10%, rgba(71,128,217,.18), transparent 34%),
        linear-gradient(112deg, rgba(82,82,77,.78) 0%, rgba(47,48,48,.84) 38%, rgba(24,33,47,.92) 68%, rgba(11,27,57,.98) 100%) !important;
    border: 1px solid rgba(255,215,98,.86) !important;
    border-radius: 18px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 0 24px rgba(244,207,102,.025),
        0 0 20px rgba(244,207,102,.10) !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-hero > span {
    color: var(--ssjx-value-ice) !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-hero > strong {
    margin: 10px 0 6px !important;
    color: var(--ssjx-value-gold-bright) !important;
    font-size: clamp(32px,3.5vw,46px) !important;
    font-weight: 900 !important;
    line-height: .98 !important;
    letter-spacing: -.04em !important;
    text-shadow: 0 0 18px rgba(244,207,102,.17) !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-hero > small {
    color: #d4dbe7 !important;
    font-size: 8.6px !important;
    line-height: 1.38 !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-time-grid,
html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-value-grid {
    gap: 10px !important;
    margin-top: 10px !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-time-grid > div,
html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-value-grid > div {
    min-height: 84px !important;
    padding: 13px !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(244,207,102,.10), transparent 36%),
        linear-gradient(112deg, rgba(67,69,69,.62) 0%, rgba(33,37,43,.78) 48%, rgba(12,26,53,.94) 100%) !important;
    border: 1px solid rgba(244,207,102,.62) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 0 14px rgba(244,207,102,.045) !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-time-grid span,
html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-value-grid span,
html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-time-grid small,
html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-value-grid small {
    display: block !important;
    color: #d8e2ef !important;
    font-size: 8.2px !important;
    line-height: 1.35 !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-time-grid strong {
    display: block !important;
    margin: 8px 0 4px !important;
    color: var(--ssjx-value-gold-bright) !important;
    font-size: clamp(19px,2vw,27px) !important;
    font-weight: 880 !important;
    line-height: 1 !important;
    letter-spacing: -.03em !important;
    text-shadow: 0 0 12px rgba(244,207,102,.10) !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-value-grid strong {
    display: block !important;
    margin: 8px 0 4px !important;
    color: #fff7df !important;
    font-size: clamp(17px,1.85vw,25px) !important;
    font-weight: 880 !important;
    line-height: 1 !important;
    letter-spacing: -.03em !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-breakdown {
    margin-top: 11px !important;
    padding: 13px !important;
    background:
        linear-gradient(112deg, rgba(64,66,66,.48) 0%, rgba(29,33,39,.68) 48%, rgba(10,23,48,.88) 100%) !important;
    border: 1px solid rgba(244,207,102,.42) !important;
    border-radius: 15px !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-breakdown-head > span {
    color: var(--ssjx-value-gold-soft) !important;
    font-size: 8.5px !important;
    font-weight: 850 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-breakdown-head > small,
html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-breakdown-empty,
html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-breakdown-row > span {
    color: #cbd5e3 !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-breakdown-row > strong {
    color: var(--ssjx-value-gold-bright) !important;
    font-size: 8.7px !important;
    font-weight: 850 !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-breakdown-bar {
    background: rgba(244,207,102,.13) !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-breakdown-bar > i {
    background: linear-gradient(90deg,#a97813 0%,#d9ad38 34%,#f6d570 70%,#fff0b7 100%) !important;
    box-shadow: 0 0 8px rgba(244,207,102,.30) !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-rate {
    gap: 8px !important;
    margin-top: 12px !important;
    padding: 13px !important;
    background:
        linear-gradient(112deg, rgba(61,63,63,.46) 0%, rgba(27,31,38,.72) 52%, rgba(10,23,48,.90) 100%) !important;
    border: 1px solid rgba(244,207,102,.55) !important;
    border-radius: 15px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-rate > span {
    color: #fff3ce !important;
    font-size: 10.3px !important;
    font-weight: 780 !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-rate > small {
    color: #cbd5e3 !important;
    font-size: 8.1px !important;
    line-height: 1.38 !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-rate-control {
    min-height: 48px !important;
    padding: 0 13px !important;
    gap: 8px !important;
    background: linear-gradient(180deg, rgba(10,15,22,.98), rgba(5,10,17,.99)) !important;
    border: 1px solid rgba(244,207,102,.75) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 0 0 1px rgba(255,230,160,.05), 0 0 12px rgba(244,207,102,.05) !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-rate-control:focus-within {
    border-color: rgba(255,224,121,.98) !important;
    box-shadow: 0 0 0 2px rgba(244,207,102,.11), 0 0 18px rgba(244,207,102,.15) !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-rate-control > b,
html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-rate-control > small {
    color: #e8cf87 !important;
    font-weight: 750 !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-rate-control > input,
html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-rate-control > input:hover,
html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-rate-control > input:focus,
html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-rate-control > input:active {
    color: #fff7df !important;
}

html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__estimate-note {
    margin-top: 10px !important;
    padding: 11px 12px !important;
    color: #d0dae7 !important;
    background: linear-gradient(112deg, rgba(62,63,61,.34), rgba(14,21,31,.67) 55%, rgba(8,20,43,.82)) !important;
    border-left: 3px solid rgba(244,207,102,.82) !important;
    font-size: 8px !important;
    line-height: 1.48 !important;
}

@media (max-width: 720px) {
    html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__journey-value-head {
        grid-template-columns: 70px minmax(0,1fr) !important;
        gap: 14px !important;
    }
    html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__journey-value-icon,
    html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__journey-value-icon--coin {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
    }
    html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__journey-value-head > div > strong {
        font-size: clamp(17px,5vw,22px) !important;
    }
}

@media (max-width: 480px) {
    html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__journey-value-head {
        grid-template-columns: 58px minmax(0,1fr) !important;
        gap: 12px !important;
    }
    html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__journey-value-icon,
    html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__journey-value-icon--coin {
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
    }
    html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__journey-value-head > div {
        gap: 7px !important;
    }
    html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__journey-value-head > div > span {
        font-size: 8px !important;
        letter-spacing: .105em !important;
    }
    html body .ssjx .ssjx__journey-value[data-ssjx-value-panel] .ssjx__journey-value-head > div > strong {
        font-size: clamp(16px,5.4vw,20px) !important;
        line-height: 1.16 !important;
    }
}
/* === SIMME EXPLORE SYMSOUL V2.31 CRITICAL ADDITIONS — GOLD VALUE THEME === */
/* =========================================================
   SIMME EXPLORE SYMSOUL V2.31
   20 AUGUST 2026

   Gives the Journey value section the SymSoul Value Coin identity and a
   gold-accented visual language inspired by the approved app pitch.
   ========================================================= */

html body .ssjx .ssjx__journey-value {
    --ssjx-value-gold: #f0cf72;
    --ssjx-value-gold-2: #ffd96f;
    --ssjx-value-gold-soft: #ffe6a6;
    --ssjx-value-gold-rgb: 240,207,114;
    border-color: rgba(240,207,114,.42) !important;
    background:
        radial-gradient(circle at 16% 0%, rgba(240,207,114,.18), transparent 34%),
        radial-gradient(circle at 86% 22%, rgba(101,147,255,.12), transparent 28%),
        linear-gradient(112deg, rgba(58,62,67,.82) 0%, rgba(28,34,45,.86) 42%, rgba(11,24,53,.93) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 0 1px rgba(240,207,114,.12),
        0 14px 34px rgba(2,7,15,.32),
        0 0 24px rgba(240,207,114,.09) !important;
}

html body .ssjx .ssjx__journey-value-head {
    grid-template-columns: 86px minmax(0,1fr) !important;
    gap: 16px !important;
    align-items: center !important;
}

html body .ssjx .ssjx__journey-value-head > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 8px !important;
}

html body .ssjx .ssjx__journey-value-head > div > span,
html body .ssjx .ssjx__journey-value-head > div > strong {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    white-space: normal !important;
}

html body .ssjx .ssjx__journey-value-icon,
html body .ssjx .ssjx__journey-value-icon--coin {
    width: 74px !important;
    height: 74px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html body .ssjx .ssjx__journey-value-icon img,
html body .ssjx .ssjx__journey-value-icon--coin img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 0 rgba(255,255,255,.12)) drop-shadow(0 10px 18px rgba(240,207,114,.18)) !important;
}

html body .ssjx .ssjx__journey-value-head > div > span {
    color: #d8e6f8 !important;
    font-size: 8.8px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

html body .ssjx .ssjx__journey-value-head > div > strong {
    max-width: 24ch !important;
    color: #fff6dc !important;
    font-size: clamp(18px,2vw,24px) !important;
    font-weight: 820 !important;
    line-height: 1.14 !important;
    letter-spacing: -.018em !important;
    text-wrap: balance !important;
}

html body .ssjx .ssjx__journey-value-copy {
    margin: 14px 0 14px !important;
    color: #c6cddd !important;
    font-size: 10px !important;
    line-height: 1.58 !important;
}

html body .ssjx .ssjx__estimate-hero {
    min-height: 122px !important;
    padding: 16px 17px !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(240,207,114,.12), transparent 36%),
        radial-gradient(circle at 90% 24%, rgba(103,163,255,.10), transparent 30%),
        linear-gradient(112deg, rgba(74,76,79,.56) 0%, rgba(33,39,49,.72) 45%, rgba(12,25,55,.90) 100%) !important;
    border: 1px solid rgba(240,207,114,.46) !important;
    border-radius: 18px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 20px rgba(240,207,114,.08) !important;
}

html body .ssjx .ssjx__estimate-hero > span {
    color: #d8e5f4 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .11em !important;
    text-transform: uppercase !important;
}

html body .ssjx .ssjx__estimate-hero > strong {
    margin: 9px 0 6px !important;
    color: var(--ssjx-value-gold) !important;
    font-size: clamp(31px,3.3vw,45px) !important;
    font-weight: 850 !important;
    line-height: .98 !important;
    letter-spacing: -.04em !important;
    text-shadow: 0 0 18px rgba(240,207,114,.13) !important;
}

html body .ssjx .ssjx__estimate-hero > small {
    color: #c7cfe0 !important;
    font-size: 8.5px !important;
    line-height: 1.35 !important;
}

html body .ssjx .ssjx__estimate-time-grid,
html body .ssjx .ssjx__estimate-value-grid {
    gap: 10px !important;
    margin-top: 10px !important;
}

html body .ssjx .ssjx__estimate-time-grid > div,
html body .ssjx .ssjx__estimate-value-grid > div {
    min-height: 84px !important;
    padding: 13px 13px 12px !important;
    background:
        linear-gradient(112deg, rgba(72,74,77,.42) 0%, rgba(24,30,39,.74) 48%, rgba(11,24,49,.90) 100%) !important;
    border: 1px solid rgba(240,207,114,.42) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}

html body .ssjx .ssjx__estimate-time-grid span,
html body .ssjx .ssjx__estimate-value-grid span,
html body .ssjx .ssjx__estimate-time-grid small,
html body .ssjx .ssjx__estimate-value-grid small {
    color: #d7e0ee !important;
    font-size: 8.3px !important;
    line-height: 1.35 !important;
}

html body .ssjx .ssjx__estimate-time-grid strong {
    margin: 8px 0 4px !important;
    color: var(--ssjx-value-gold-2) !important;
    font-size: clamp(18px,1.95vw,26px) !important;
    font-weight: 830 !important;
    line-height: 1 !important;
    letter-spacing: -.03em !important;
}

html body .ssjx .ssjx__estimate-value-grid strong {
    margin: 8px 0 4px !important;
    color: #fff7e1 !important;
    font-size: clamp(17px,1.8vw,24px) !important;
    font-weight: 840 !important;
    line-height: 1 !important;
    letter-spacing: -.03em !important;
}

html body .ssjx .ssjx__estimate-breakdown {
    margin-top: 11px !important;
    padding: 12px 13px !important;
    background: linear-gradient(112deg, rgba(70,72,75,.28) 0%, rgba(17,23,31,.56) 55%, rgba(8,19,40,.78) 100%) !important;
    border: 1px solid rgba(240,207,114,.24) !important;
    border-radius: 14px !important;
}

html body .ssjx .ssjx__estimate-breakdown-head > span {
    color: #d8e5f5 !important;
    font-size: 8.4px !important;
    font-weight: 800 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
}

html body .ssjx .ssjx__estimate-breakdown-head > small,
html body .ssjx .ssjx__estimate-breakdown-empty,
html body .ssjx .ssjx__estimate-breakdown-row > span {
    color: #c0cadb !important;
}

html body .ssjx .ssjx__estimate-breakdown-row > strong {
    color: #ffe29a !important;
    font-size: 8.6px !important;
    font-weight: 800 !important;
}

html body .ssjx .ssjx__estimate-breakdown-bar {
    background: rgba(240,207,114,.12) !important;
}

html body .ssjx .ssjx__estimate-breakdown-bar > i {
    background: linear-gradient(90deg,#d4ad43,#f3d77d,#ffebaf) !important;
    box-shadow: 0 0 8px rgba(240,207,114,.26) !important;
}

html body .ssjx .ssjx__estimate-rate {
    gap: 8px !important;
    margin-top: 12px !important;
    padding: 13px !important;
    background: linear-gradient(112deg, rgba(70,72,75,.26) 0%, rgba(17,23,31,.60) 55%, rgba(8,19,40,.84) 100%) !important;
    border: 1px solid rgba(240,207,114,.32) !important;
    border-radius: 15px !important;
}

html body .ssjx .ssjx__estimate-rate > span {
    color: #fff2cd !important;
    font-size: 10.3px !important;
    font-weight: 760 !important;
}

html body .ssjx .ssjx__estimate-rate > small {
    color: #c8d0df !important;
    font-size: 8.1px !important;
    line-height: 1.38 !important;
}

html body .ssjx .ssjx__estimate-rate-control {
    min-height: 48px !important;
    padding: 0 13px !important;
    gap: 8px !important;
    background: rgba(7,12,18,.92) !important;
    border: 1px solid rgba(240,207,114,.56) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 0 0 1px rgba(255,221,143,.05) !important;
}

html body .ssjx .ssjx__estimate-rate-control:focus-within {
    border-color: rgba(255,223,122,.92) !important;
    box-shadow: 0 0 0 2px rgba(240,207,114,.10), 0 0 16px rgba(240,207,114,.12) !important;
}

html body .ssjx .ssjx__estimate-rate-control > b,
html body .ssjx .ssjx__estimate-rate-control > small {
    color: #e0ca8a !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

html body .ssjx .ssjx__estimate-rate-control > input,
html body .ssjx .ssjx__estimate-rate-control > input:hover,
html body .ssjx .ssjx__estimate-rate-control > input:focus,
html body .ssjx .ssjx__estimate-rate-control > input:active {
    color: #fff6dd !important;
}

html body .ssjx .ssjx__estimate-note {
    margin-top: 10px !important;
    padding: 11px 12px !important;
    color: #d0d8e8 !important;
    background: linear-gradient(112deg, rgba(70,72,75,.20) 0%, rgba(14,20,28,.58) 55%, rgba(8,19,40,.78) 100%) !important;
    border-left: 2px solid rgba(240,207,114,.64) !important;
    font-size: 8px !important;
    line-height: 1.48 !important;
}

@media (max-width: 720px) {
    html body .ssjx .ssjx__journey-value-head {
        grid-template-columns: 70px minmax(0,1fr) !important;
        gap: 14px !important;
    }
    html body .ssjx .ssjx__journey-value-icon,
    html body .ssjx .ssjx__journey-value-icon--coin {
        width: 60px !important;
        height: 60px !important;
    }
    html body .ssjx .ssjx__journey-value-head > div > strong {
        font-size: clamp(17px,5vw,22px) !important;
    }
}

@media (max-width: 480px) {
    html body .ssjx .ssjx__journey-value-head {
        grid-template-columns: 56px minmax(0,1fr) !important;
        gap: 12px !important;
    }
    html body .ssjx .ssjx__journey-value-icon,
    html body .ssjx .ssjx__journey-value-icon--coin {
        width: 52px !important;
        height: 52px !important;
    }
    html body .ssjx .ssjx__journey-value-head > div {
        gap: 7px !important;
    }
    html body .ssjx .ssjx__journey-value-head > div > span {
        font-size: 8px !important;
        letter-spacing: .1em !important;
    }
    html body .ssjx .ssjx__journey-value-head > div > strong {
        font-size: clamp(16px,5.4vw,20px) !important;
        line-height: 1.16 !important;
    }
}

/* === SIMME EXPLORE SYMSOUL V2.30 CRITICAL ADDITIONS — VALUE HEADING SEPARATION === */
/* =========================================================
   SIMME EXPLORE SYMSOUL V2.30
   20 AUGUST 2026

   Keeps the Journey Value Estimate eyebrow and its main title as two
   deliberately separate rows. This prevents the small uppercase label and
   the larger heading from running together at any viewport width.
   ========================================================= */

html body .ssjx .ssjx__journey-value-head > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    align-content: center !important;
    justify-items: start !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 7px !important;
}

html body .ssjx .ssjx__journey-value-head > div > span {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.15 !important;
    white-space: normal !important;
}

html body .ssjx .ssjx__journey-value-head > div > strong {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.28 !important;
    white-space: normal !important;
}

@media (max-width: 720px) {
    html body .ssjx .ssjx__journey-value-head > div {
        gap: 6px !important;
    }
}

/* === SIMME EXPLORE SYMSOUL V2.29 CRITICAL ADDITIONS — JOURNEY-DRIVEN VALUE MODEL === */
/* =========================================================
   SIMME EXPLORE SYMSOUL V2.29 — JOURNEY-DRIVEN VALUE MODEL
   20 AUGUST 2026

   The user never guesses time saved. The Journey itself supplies a
   conservative planning estimate; the only user-entered variable is the
   value of one hour of their time.
   ========================================================= */

html body .ssjx .ssjx__journey-value {
    --ssjx-value-green: #79ff68;
    --ssjx-value-green-rgb: 121,255,104;
    border-color: rgba(103,255,82,.28) !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(103,255,82,.075), transparent 31%),
        linear-gradient(145deg, rgba(12,22,23,.96), rgba(8,12,20,.97) 58%, rgba(8,11,18,.98)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 0 26px rgba(103,255,82,.045) !important;
}

html body .ssjx .ssjx__journey-value-head {
    grid-template-columns: 48px minmax(0,1fr) !important;
    gap: 13px !important;
}

html body .ssjx .ssjx__journey-value-icon {
    width: 48px !important;
    height: 48px !important;
    color: #b5ffa9 !important;
    background: rgba(103,255,82,.055) !important;
    border-color: rgba(103,255,82,.38) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 14px rgba(103,255,82,.07) !important;
}

html body .ssjx .ssjx__journey-value-head > div > span {
    color: #a9ff9b !important;
}

html body .ssjx .ssjx__journey-value-head > div > strong {
    color: #f3f8f3 !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
}

html body .ssjx .ssjx__journey-value-copy {
    margin: 13px 0 13px !important;
    color: #9ba9a0 !important;
    font-size: 10px !important;
    line-height: 1.52 !important;
}

html body .ssjx .ssjx__estimate-hero {
    position: relative !important;
    display: grid !important;
    min-height: 122px !important;
    padding: 16px 17px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 84% 8%, rgba(103,255,82,.14), transparent 35%),
        linear-gradient(145deg, rgba(103,255,82,.075), rgba(5,12,13,.91) 62%) !important;
    border: 1px solid rgba(103,255,82,.34) !important;
    border-radius: 15px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 0 20px rgba(103,255,82,.045) !important;
}

html body .ssjx .ssjx__estimate-hero > span {
    color: #9ec69d !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

html body .ssjx .ssjx__estimate-hero > strong {
    margin: 8px 0 5px !important;
    color: var(--ssjx-value-green) !important;
    font-size: clamp(31px,3.3vw,44px) !important;
    font-weight: 850 !important;
    line-height: .96 !important;
    letter-spacing: -.035em !important;
    text-shadow: 0 0 17px rgba(103,255,82,.11) !important;
}

html body .ssjx .ssjx__estimate-hero > small {
    color: #7f9184 !important;
    font-size: 8.5px !important;
    line-height: 1.35 !important;
}

html body .ssjx .ssjx__estimate-time-grid,
html body .ssjx .ssjx__estimate-value-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

html body .ssjx .ssjx__estimate-value-grid {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
}

html body .ssjx .ssjx__estimate-time-grid > div,
html body .ssjx .ssjx__estimate-value-grid > div {
    min-width: 0 !important;
    min-height: 76px !important;
    padding: 11px !important;
    background: rgba(5,10,14,.70) !important;
    border: 1px solid rgba(103,255,82,.18) !important;
    border-radius: 12px !important;
}

html body .ssjx .ssjx__estimate-time-grid span,
html body .ssjx .ssjx__estimate-value-grid span,
html body .ssjx .ssjx__estimate-time-grid small,
html body .ssjx .ssjx__estimate-value-grid small {
    display: block !important;
    color: #74847a !important;
    font-size: 8px !important;
    line-height: 1.3 !important;
}

html body .ssjx .ssjx__estimate-time-grid strong,
html body .ssjx .ssjx__estimate-value-grid strong {
    display: block !important;
    margin: 7px 0 3px !important;
    color: #a7ff98 !important;
    font-size: clamp(18px,1.9vw,25px) !important;
    font-weight: 820 !important;
    line-height: 1 !important;
    letter-spacing: -.025em !important;
}

html body .ssjx .ssjx__estimate-value-grid strong {
    color: #d9ffd2 !important;
    font-size: clamp(16px,1.6vw,22px) !important;
}

html body .ssjx .ssjx__estimate-breakdown {
    margin-top: 10px !important;
    padding: 11px 12px !important;
    background: rgba(4,9,12,.58) !important;
    border: 1px solid rgba(103,255,82,.13) !important;
    border-radius: 12px !important;
}

html body .ssjx .ssjx__estimate-breakdown-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
}

html body .ssjx .ssjx__estimate-breakdown-head > span {
    color: #a8c7a8 !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

html body .ssjx .ssjx__estimate-breakdown-head > small {
    color: #64736a !important;
    font-size: 7.5px !important;
}

html body .ssjx .ssjx__estimate-breakdown-list {
    display: grid !important;
    gap: 7px !important;
}

html body .ssjx .ssjx__estimate-breakdown-row {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 5px 9px !important;
}

html body .ssjx .ssjx__estimate-breakdown-row > span {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #8d9d92 !important;
    font-size: 8.5px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body .ssjx .ssjx__estimate-breakdown-row > strong {
    color: #b8ffad !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

html body .ssjx .ssjx__estimate-breakdown-bar {
    grid-column: 1 / -1 !important;
    display: block !important;
    height: 3px !important;
    overflow: hidden !important;
    background: rgba(103,255,82,.08) !important;
    border-radius: 999px !important;
}

html body .ssjx .ssjx__estimate-breakdown-bar > i {
    display: block !important;
    width: var(--ssjx-breakdown-width,0%) !important;
    height: 100% !important;
    background: linear-gradient(90deg,#67ff52,#9dff84) !important;
    border-radius: inherit !important;
    box-shadow: 0 0 7px rgba(103,255,82,.20) !important;
}

html body .ssjx .ssjx__estimate-breakdown-empty {
    color: #748178 !important;
    font-size: 8.5px !important;
    line-height: 1.4 !important;
}

html body .ssjx .ssjx__estimate-rate {
    display: grid !important;
    gap: 7px !important;
    margin-top: 11px !important;
    padding: 12px !important;
    background: rgba(7,12,16,.76) !important;
    border: 1px solid rgba(103,255,82,.22) !important;
    border-radius: 13px !important;
}

html body .ssjx .ssjx__estimate-rate > span {
    color: #dbe7dc !important;
    font-size: 10px !important;
    font-weight: 720 !important;
}

html body .ssjx .ssjx__estimate-rate > small {
    color: #75847a !important;
    font-size: 8px !important;
    line-height: 1.35 !important;
}

html body .ssjx .ssjx__estimate-rate-control {
    display: flex !important;
    align-items: center !important;
    min-height: 46px !important;
    margin-top: 2px !important;
    padding: 0 12px !important;
    gap: 7px !important;
    background: #080d12 !important;
    border: 1px solid rgba(103,255,82,.34) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 0 0 1px rgba(103,255,82,.025) !important;
}

html body .ssjx .ssjx__estimate-rate-control:focus-within {
    border-color: rgba(103,255,82,.78) !important;
    box-shadow: 0 0 0 2px rgba(103,255,82,.08), 0 0 14px rgba(103,255,82,.08) !important;
}

html body .ssjx .ssjx__estimate-rate-control > b,
html body .ssjx .ssjx__estimate-rate-control > small {
    flex: 0 0 auto !important;
    color: #819086 !important;
    font-size: 10px !important;
    font-weight: 650 !important;
}

html body .ssjx .ssjx__estimate-rate-control > input,
html body .ssjx .ssjx__estimate-rate-control > input:hover,
html body .ssjx .ssjx__estimate-rate-control > input:focus,
html body .ssjx .ssjx__estimate-rate-control > input:active {
    all: unset !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    color: #f3f8f3 !important;
    font-family: Arial,Helvetica,sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 42px !important;
    -moz-appearance: textfield !important;
}

html body .ssjx .ssjx__estimate-rate-control > input::-webkit-outer-spin-button,
html body .ssjx .ssjx__estimate-rate-control > input::-webkit-inner-spin-button {
    margin: 0 !important;
    -webkit-appearance: none !important;
}

html body .ssjx .ssjx__estimate-note {
    margin-top: 9px !important;
    padding: 10px 11px !important;
    color: #6f7f74 !important;
    background: rgba(103,255,82,.018) !important;
    border-left: 2px solid rgba(103,255,82,.42) !important;
    font-size: 8px !important;
    line-height: 1.45 !important;
}

@media (max-width: 720px) {
    html body .ssjx .ssjx__estimate-value-grid {
        grid-template-columns: repeat(3,minmax(0,1fr)) !important;
        gap: 6px !important;
    }
    html body .ssjx .ssjx__estimate-value-grid > div,
    html body .ssjx .ssjx__estimate-time-grid > div {
        min-height: 68px !important;
        padding: 9px !important;
    }
    html body .ssjx .ssjx__estimate-value-grid strong {
        font-size: clamp(15px,4.3vw,19px) !important;
    }
}

@media (max-width: 420px) {
    html body .ssjx .ssjx__estimate-hero { min-height: 112px !important; padding: 14px !important; }
    html body .ssjx .ssjx__estimate-value-grid { grid-template-columns: 1fr !important; }
    html body .ssjx .ssjx__estimate-value-grid > div { min-height: 62px !important; }
}


/* === SIMME EXPLORE SYMSOUL V2.28 CRITICAL ADDITIONS — CLEAR CLOSE BUTTONS === */
/* =========================================================
   SIMME EXPLORE SYMSOUL V2.28
   19 AUGUST 2026

   Makes Preview, Detail and Journey close controls immediately legible:
   - larger 46px target on desktop
   - solid navy plate rather than near-transparent ghost button
   - bright near-white X with stronger stroke
   - clearer blue edge and restrained glow
   - stronger hover/focus state without movement or resizing
   - compact 42px version on smaller screens
   ========================================================= */

html body .ssjx .ssjx__preview .ssjx__preview-close[data-ssjx-action="close-preview"],
html body .ssjx .ssjx__preview .ssjx__preview-close[data-ssjx-action="close-preview"]:hover,
html body .ssjx .ssjx__preview .ssjx__preview-close[data-ssjx-action="close-preview"]:focus,
html body .ssjx .ssjx__preview .ssjx__preview-close[data-ssjx-action="close-preview"]:focus-visible,
html body .ssjx .ssjx__preview .ssjx__preview-close[data-ssjx-action="close-preview"]:active,
html body .ssjx .ssjx__detail-toolbar > .ssjx__icon-button[data-ssjx-action="close-detail"],
html body .ssjx .ssjx__detail-toolbar > .ssjx__icon-button[data-ssjx-action="close-detail"]:hover,
html body .ssjx .ssjx__detail-toolbar > .ssjx__icon-button[data-ssjx-action="close-detail"]:focus,
html body .ssjx .ssjx__detail-toolbar > .ssjx__icon-button[data-ssjx-action="close-detail"]:focus-visible,
html body .ssjx .ssjx__detail-toolbar > .ssjx__icon-button[data-ssjx-action="close-detail"]:active,
html body .ssjx .ssjx__journey-toolbar .ssjx__journey-toolbar-actions > .ssjx__icon-button[data-ssjx-action="close-journey"],
html body .ssjx .ssjx__journey-toolbar .ssjx__journey-toolbar-actions > .ssjx__icon-button[data-ssjx-action="close-journey"]:hover,
html body .ssjx .ssjx__journey-toolbar .ssjx__journey-toolbar-actions > .ssjx__icon-button[data-ssjx-action="close-journey"]:focus,
html body .ssjx .ssjx__journey-toolbar .ssjx__journey-toolbar-actions > .ssjx__icon-button[data-ssjx-action="close-journey"]:focus-visible,
html body .ssjx .ssjx__journey-toolbar .ssjx__journey-toolbar-actions > .ssjx__icon-button[data-ssjx-action="close-journey"]:active {
    all: unset !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #f3f8ff !important;
    background:
        radial-gradient(circle at 34% 24%, rgba(255,255,255,.085), transparent 34%),
        linear-gradient(145deg, rgba(20,31,49,.985), rgba(7,13,25,.995)) !important;
    border: 1px solid rgba(166, 196, 235, .62) !important;
    border-radius: 13px !important;
    outline: 0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.075),
        inset 0 -1px 0 rgba(0,0,0,.40),
        0 0 0 1px rgba(88,153,230,.055),
        0 5px 14px rgba(0,0,0,.24),
        0 0 16px rgba(82,158,255,.08) !important;
    opacity: 1 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    filter: none !important;
    transition:
        color 180ms ease,
        background 200ms ease,
        border-color 180ms ease,
        box-shadow 200ms ease !important;
}

/* Context-aware edge colour while preserving the same close-button component. */
html body .ssjx .ssjx__preview .ssjx__preview-close[data-ssjx-action="close-preview"] {
    border-color: rgba(var(--ssjx-preview-rgb, 108, 174, 255), .64) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.075),
        0 5px 14px rgba(0,0,0,.24),
        0 0 16px rgba(var(--ssjx-preview-rgb, 108, 174, 255), .10) !important;
}

html body .ssjx .ssjx__detail-toolbar > .ssjx__icon-button[data-ssjx-action="close-detail"] {
    border-color: rgba(var(--ssjx-detail-rgb, 108, 174, 255), .64) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.075),
        0 5px 14px rgba(0,0,0,.24),
        0 0 16px rgba(var(--ssjx-detail-rgb, 108, 174, 255), .10) !important;
}

html body .ssjx .ssjx__journey-toolbar .ssjx__journey-toolbar-actions > .ssjx__icon-button[data-ssjx-action="close-journey"] {
    border-color: rgba(103, 255, 82, .52) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.075),
        0 5px 14px rgba(0,0,0,.24),
        0 0 16px rgba(103,255,82,.075) !important;
}

html body .ssjx .ssjx__preview .ssjx__preview-close[data-ssjx-action="close-preview"]:hover,
html body .ssjx .ssjx__preview .ssjx__preview-close[data-ssjx-action="close-preview"]:focus-visible,
html body .ssjx .ssjx__detail-toolbar > .ssjx__icon-button[data-ssjx-action="close-detail"]:hover,
html body .ssjx .ssjx__detail-toolbar > .ssjx__icon-button[data-ssjx-action="close-detail"]:focus-visible {
    color: #ffffff !important;
    background:
        radial-gradient(circle at 34% 24%, rgba(255,255,255,.12), transparent 36%),
        linear-gradient(145deg, rgba(27,49,77,.995), rgba(9,19,35,.995)) !important;
    border-color: rgba(112, 204, 255, .92) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.11),
        0 5px 15px rgba(0,0,0,.26),
        0 0 0 1px rgba(112,204,255,.08),
        0 0 22px rgba(89,182,255,.20) !important;
}

html body .ssjx .ssjx__journey-toolbar .ssjx__journey-toolbar-actions > .ssjx__icon-button[data-ssjx-action="close-journey"]:hover,
html body .ssjx .ssjx__journey-toolbar .ssjx__journey-toolbar-actions > .ssjx__icon-button[data-ssjx-action="close-journey"]:focus-visible {
    color: #ffffff !important;
    background:
        radial-gradient(circle at 34% 24%, rgba(255,255,255,.10), transparent 36%),
        linear-gradient(145deg, rgba(24,54,34,.995), rgba(8,20,15,.995)) !important;
    border-color: rgba(129, 255, 110, .88) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 5px 15px rgba(0,0,0,.26),
        0 0 0 1px rgba(103,255,82,.06),
        0 0 20px rgba(103,255,82,.16) !important;
}

html body .ssjx .ssjx__preview .ssjx__preview-close[data-ssjx-action="close-preview"] svg,
html body .ssjx .ssjx__detail-toolbar > .ssjx__icon-button[data-ssjx-action="close-detail"] svg,
html body .ssjx .ssjx__journey-toolbar .ssjx__journey-toolbar-actions > .ssjx__icon-button[data-ssjx-action="close-journey"] svg {
    display: block !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: currentColor !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.35 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 4px rgba(157,210,255,.18)) !important;
    transform: none !important;
}

html body .ssjx .ssjx__preview .ssjx__preview-close[data-ssjx-action="close-preview"]:active,
html body .ssjx .ssjx__detail-toolbar > .ssjx__icon-button[data-ssjx-action="close-detail"]:active,
html body .ssjx .ssjx__journey-toolbar .ssjx__journey-toolbar-actions > .ssjx__icon-button[data-ssjx-action="close-journey"]:active {
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    filter: brightness(.94) !important;
}

@media (max-width: 720px) {
    html body .ssjx .ssjx__preview .ssjx__preview-close[data-ssjx-action="close-preview"],
    html body .ssjx .ssjx__preview .ssjx__preview-close[data-ssjx-action="close-preview"]:hover,
    html body .ssjx .ssjx__preview .ssjx__preview-close[data-ssjx-action="close-preview"]:focus,
    html body .ssjx .ssjx__preview .ssjx__preview-close[data-ssjx-action="close-preview"]:focus-visible,
    html body .ssjx .ssjx__preview .ssjx__preview-close[data-ssjx-action="close-preview"]:active,
    html body .ssjx .ssjx__detail-toolbar > .ssjx__icon-button[data-ssjx-action="close-detail"],
    html body .ssjx .ssjx__detail-toolbar > .ssjx__icon-button[data-ssjx-action="close-detail"]:hover,
    html body .ssjx .ssjx__detail-toolbar > .ssjx__icon-button[data-ssjx-action="close-detail"]:focus,
    html body .ssjx .ssjx__detail-toolbar > .ssjx__icon-button[data-ssjx-action="close-detail"]:focus-visible,
    html body .ssjx .ssjx__detail-toolbar > .ssjx__icon-button[data-ssjx-action="close-detail"]:active,
    html body .ssjx .ssjx__journey-toolbar .ssjx__journey-toolbar-actions > .ssjx__icon-button[data-ssjx-action="close-journey"],
    html body .ssjx .ssjx__journey-toolbar .ssjx__journey-toolbar-actions > .ssjx__icon-button[data-ssjx-action="close-journey"]:hover,
    html body .ssjx .ssjx__journey-toolbar .ssjx__journey-toolbar-actions > .ssjx__icon-button[data-ssjx-action="close-journey"]:focus,
    html body .ssjx .ssjx__journey-toolbar .ssjx__journey-toolbar-actions > .ssjx__icon-button[data-ssjx-action="close-journey"]:focus-visible,
    html body .ssjx .ssjx__journey-toolbar .ssjx__journey-toolbar-actions > .ssjx__icon-button[data-ssjx-action="close-journey"]:active {
        flex-basis: 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        border-radius: 12px !important;
    }

    html body .ssjx .ssjx__preview .ssjx__preview-close[data-ssjx-action="close-preview"] svg,
    html body .ssjx .ssjx__detail-toolbar > .ssjx__icon-button[data-ssjx-action="close-detail"] svg,
    html body .ssjx .ssjx__journey-toolbar .ssjx__journey-toolbar-actions > .ssjx__icon-button[data-ssjx-action="close-journey"] svg {
        width: 19px !important;
        min-width: 19px !important;
        max-width: 19px !important;
        height: 19px !important;
        min-height: 19px !important;
        max-height: 19px !important;
    }
}

/* === SIMME EXPLORE SYMSOUL V2.27 CRITICAL ADDITIONS — SECTION BOUNDARY + HEART COUNT + EYEBROW SHIMMER === */
/* =========================================================
   SIMME EXPLORE SYMSOUL V2.27
   19 AUGUST 2026

   - The floating Your Journey dock now fades before its footprint crosses
     the bottom edge of Explore SymSoul (behaviour is enforced in PHP/JS).
   - Saved-count circles become generous lime heart badges with the number
     optically centred inside the heart.
   - The actual EXPLORE SYMSOUL eyebrow loses its decorative line, becomes
     slightly larger, and receives the requested blue/violet/pink shimmer.
   ========================================================= */

/* ---------- Actual EXPLORE SYMSOUL eyebrow ---------- */
html body .ssjx .ssjx__intro .ssjx__eyebrow {
    display: inline-block !important;
    align-items: initial !important;
    gap: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    color: #79d8ff !important;
    font-size: clamp(14px, 1.05vw, 17px) !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    background-image: linear-gradient(
        100deg,
        #5ed8ff 0%,
        #68bfff 16%,
        #8a83ff 33%,
        #c06cff 48%,
        #ff72cf 62%,
        #b66fff 77%,
        #67c9ff 92%,
        #5ed8ff 100%
    ) !important;
    background-size: 300% 100% !important;
    background-position: 0% 50% !important;
    background-repeat: no-repeat !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    filter:
        drop-shadow(0 0 5px rgba(93, 211, 255, .18))
        drop-shadow(0 0 9px rgba(201, 103, 255, .08)) !important;
    animation: ssjx-explore-eyebrow-shimmer-v227 8.4s ease-in-out infinite !important;
}

html body .ssjx .ssjx__intro .ssjx__eyebrow::before,
html body .ssjx .ssjx__intro .ssjx__eyebrow::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

@keyframes ssjx-explore-eyebrow-shimmer-v227 {
    0%   { background-position: 0% 50%; filter: drop-shadow(0 0 5px rgba(93,211,255,.16)) drop-shadow(0 0 8px rgba(201,103,255,.06)); }
    50%  { background-position: 100% 50%; filter: drop-shadow(0 0 7px rgba(255,114,207,.18)) drop-shadow(0 0 10px rgba(138,131,255,.10)); }
    100% { background-position: 0% 50%; filter: drop-shadow(0 0 5px rgba(93,211,255,.16)) drop-shadow(0 0 8px rgba(201,103,255,.06)); }
}

/* ---------- Saved-count heart badge: shared geometry ---------- */
html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] > button > b[data-ssjx-mobile-count],
html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] > button > b[data-ssjx-mobile-count] {
    position: absolute !important;
    display: grid !important;
    place-items: center !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 3px !important;
    color: #061108 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums !important;
    isolation: isolate !important;
    overflow: visible !important;
}

html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] > button > b[data-ssjx-mobile-count]::before,
html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] > button > b[data-ssjx-mobile-count]::before {
    position: absolute !important;
    z-index: -1 !important;
    inset: 0 !important;
    content: "" !important;
    display: block !important;
    background: linear-gradient(145deg, #e4ffd8 0%, #9dff84 40%, #67ff52 100%) !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 21.25S2.2 15.72 2.2 8.78C2.2 5.18 4.72 3 7.38 3c1.94 0 3.66 1.05 4.62 2.62C12.96 4.05 14.68 3 16.62 3c2.66 0 5.18 2.18 5.18 5.78 0 6.94-9.8 12.47-9.8 12.47Z'/%3E%3C/svg%3E") !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    -webkit-mask-size: contain !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 21.25S2.2 15.72 2.2 8.78C2.2 5.18 4.72 3 7.38 3c1.94 0 3.66 1.05 4.62 2.62C12.96 4.05 14.68 3 16.62 3c2.66 0 5.18 2.18 5.18 5.78 0 6.94-9.8 12.47-9.8 12.47Z'/%3E%3C/svg%3E") !important;
    mask-repeat: no-repeat !important;
    mask-position: center !important;
    mask-size: contain !important;
    filter:
        drop-shadow(0 0 1px rgba(239,255,231,.9))
        drop-shadow(0 0 8px rgba(103,255,82,.40)) !important;
    pointer-events: none !important;
}

/* Floating dock heart: deliberately generous for one/two digit totals. */
html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] > button > b[data-ssjx-mobile-count] {
    top: 5px !important;
    right: 7px !important;
    width: 36px !important;
    max-width: 36px !important;
    height: 33px !important;
    min-height: 33px !important;
    max-height: 33px !important;
    font-size: 10.5px !important;
}

/* Integrated information-panel heart. */
html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] > button > b[data-ssjx-mobile-count] {
    top: 5px !important;
    right: 7px !important;
    width: 32px !important;
    max-width: 32px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    font-size: 9.5px !important;
}

@media (max-width: 720px) {
    html body .ssjx .ssjx__intro .ssjx__eyebrow {
        font-size: clamp(13px, 3.8vw, 15px) !important;
        letter-spacing: .165em !important;
    }

    html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] > button > b[data-ssjx-mobile-count] {
        top: 4px !important;
        right: 5px !important;
        width: 32px !important;
        max-width: 32px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        font-size: 9.5px !important;
        padding-bottom: 3px !important;
    }

    html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] > button > b[data-ssjx-mobile-count] {
        top: 4px !important;
        right: 5px !important;
        width: 29px !important;
        max-width: 29px !important;
        height: 27px !important;
        min-height: 27px !important;
        max-height: 27px !important;
        font-size: 8.6px !important;
        padding-bottom: 2px !important;
    }
}

@media (max-width: 380px) {
    html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] > button > b[data-ssjx-mobile-count] {
        width: 30px !important;
        max-width: 30px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        font-size: 9px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .ssjx .ssjx__intro .ssjx__eyebrow {
        animation: none !important;
        background-position: 48% 50% !important;
    }
}

/* === SIMME EXPLORE SYMSOUL V2.26 CRITICAL ADDITIONS — JOURNEY ONLY + MAGICAL SHIMMER === */
/* =========================================================
   SIMME EXPLORE SYMSOUL V2.26 — JOURNEY-ONLY DOCK + MAGICAL COPY SHIMMER
   19 AUGUST 2026

   1. Removes the redundant Explore half while the user is already browsing
      Explore SymSoul. Both the floating dock and the in-panel dock become one
      compact Your Journey action with the existing route artwork and count.
   2. Applies a slow blue → violet → pink → violet → blue shimmer to the
      “A living map of your AI environment…” copy when that exact copy exists
      on the page. Its decorative line is removed and the type is slightly
      larger. The text match makes this safe even when the copy lives in a
      Themify/HTML module outside this shortcode.
   ========================================================= */

/* ---------- Journey-only integrated Preview control ---------- */
html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] {
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(100%, 330px) !important;
    max-width: 330px !important;
    padding: 5px !important;
    gap: 0 !important;
    border-radius: 22px !important;
}

html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] > button,
html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] > button:hover,
html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] > button:focus,
html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] > button:focus-visible,
html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] > button:active {
    grid-template-columns: 50px minmax(0, auto) !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    padding: 6px 34px 6px 12px !important;
    gap: 11px !important;
    color: #e8ffe3 !important;
    background: linear-gradient(145deg, rgba(103,255,82,.115), rgba(103,255,82,.032)) !important;
    border: 1px solid rgba(103,255,82,.34) !important;
    border-radius: 17px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 15px rgba(103,255,82,.06) !important;
}

html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] > button:hover,
html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] > button:focus-visible {
    background: linear-gradient(145deg, rgba(103,255,82,.155), rgba(103,255,82,.045)) !important;
    border-color: rgba(103,255,82,.58) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 18px rgba(103,255,82,.10) !important;
}

html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] .ssjx__preview-journey-art {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
}

html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] .ssjx__preview-journey-label > strong {
    font-size: 15.5px !important;
}

html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] > button > b {
    top: 6px !important;
    right: 8px !important;
}

/* ---------- Journey-only floating control ---------- */
html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] {
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(330px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    max-width: 330px !important;
    padding: 8px !important;
    gap: 0 !important;
    border-radius: 24px !important;
}

html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] > button,
html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] > button:hover,
html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] > button:focus,
html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] > button:focus-visible,
html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] > button:active {
    grid-template-columns: 58px minmax(0, auto) !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 72px !important;
    height: 72px !important;
    max-height: 72px !important;
    padding: 7px 38px 7px 12px !important;
    gap: 12px !important;
    border-radius: 18px !important;
}

html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] .ssjx__mobile-bar-art,
html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] button .ssjx__mobile-bar-art {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
}

html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] .ssjx__mobile-bar-art img,
html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] button .ssjx__mobile-bar-art img {
    width: 56px !important;
    height: 56px !important;
}

html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] small {
    font-size: 13px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
}

@media (max-width: 720px) {
    html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] {
        width: min(100%, 290px) !important;
        max-width: 290px !important;
        padding: 4px !important;
        border-radius: 19px !important;
    }

    html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] > button,
    html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] > button:hover,
    html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] > button:focus,
    html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] > button:focus-visible,
    html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] > button:active {
        grid-template-columns: 42px minmax(0, auto) !important;
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
        padding: 5px 31px 5px 9px !important;
        gap: 8px !important;
        border-radius: 15px !important;
    }

    html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] .ssjx__preview-journey-art {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
    }

    html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] .ssjx__preview-journey-label > strong {
        font-size: 13px !important;
    }

    html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] {
        width: min(292px, calc(100vw - 20px)) !important;
        max-width: 292px !important;
        padding: 7px !important;
        border-radius: 21px !important;
    }

    html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] > button,
    html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] > button:hover,
    html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] > button:focus,
    html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] > button:focus-visible,
    html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] > button:active {
        grid-template-columns: 48px minmax(0, auto) !important;
        min-height: 62px !important;
        height: 62px !important;
        max-height: 62px !important;
        padding: 6px 34px 6px 10px !important;
        gap: 9px !important;
        border-radius: 16px !important;
    }

    html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] .ssjx__mobile-bar-art,
    html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] button .ssjx__mobile-bar-art {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }

    html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] .ssjx__mobile-bar-art img,
    html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] button .ssjx__mobile-bar-art img {
        width: 46px !important;
        height: 46px !important;
    }

    html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] small {
        font-size: 12px !important;
    }
}

@media (max-width: 380px) {
    html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] {
        width: min(266px, calc(100vw - 14px)) !important;
        max-width: 266px !important;
        padding: 6px !important;
        border-radius: 19px !important;
    }

    html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] > button,
    html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] > button:hover,
    html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] > button:focus,
    html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] > button:focus-visible,
    html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] > button:active {
        grid-template-columns: 42px minmax(0, auto) !important;
        min-height: 56px !important;
        height: 56px !important;
        max-height: 56px !important;
        padding: 5px 30px 5px 8px !important;
        gap: 8px !important;
        border-radius: 15px !important;
    }

    html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] .ssjx__mobile-bar-art,
    html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] button .ssjx__mobile-bar-art {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
    }

    html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] .ssjx__mobile-bar-art img,
    html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] button .ssjx__mobile-bar-art img {
        width: 40px !important;
        height: 40px !important;
    }

    html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] small {
        font-size: 11.2px !important;
    }
}

/* ---------- Magical cycling copy ---------- */
.simme-ai-map-shimmer-copy {
    position: relative !important;
    display: block !important;
    max-width: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: 0 !important;
    border-top: 0 !important;
    outline: 0 !important;
    color: #83d7ff !important;
    font-size: clamp(21px, 1.55vw, 27px) !important;
    font-weight: 620 !important;
    line-height: 1.34 !important;
    letter-spacing: -.012em !important;
    background-image: linear-gradient(
        105deg,
        #73d9ff 0%,
        #70bfff 18%,
        #a877ff 38%,
        #ff79d1 58%,
        #c477ff 77%,
        #73d9ff 100%
    ) !important;
    background-size: 240% 100% !important;
    background-position: 0% 50% !important;
    background-repeat: no-repeat !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    filter: drop-shadow(0 0 7px rgba(100,190,255,.12)) !important;
    animation: simme-ai-map-shimmer-v226 9s ease-in-out infinite !important;
}

.simme-ai-map-shimmer-copy::before,
.simme-ai-map-shimmer-copy::after,
.simme-ai-map-shimmer-host::before,
.simme-ai-map-shimmer-host::after {
    content: none !important;
    display: none !important;
}

.simme-ai-map-shimmer-line {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

@keyframes simme-ai-map-shimmer-v226 {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@media (max-width: 720px) {
    .simme-ai-map-shimmer-copy {
        font-size: clamp(19px, 5.2vw, 23px) !important;
        line-height: 1.36 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .simme-ai-map-shimmer-copy {
        animation: none !important;
        background-position: 50% 50% !important;
    }
}

/* =========================================================
   SIMME EXPLORE SYMSOUL V2.24 — COMPACT IN-PANEL EXPLORE/JOURNEY DOCK
   18 AUGUST 2026

   The integrated Preview footer intentionally mirrors the approved floating
   Explore / Journey dock, but at a smaller scale. The high-specificity reset
   prevents WordPress/theme button rules from turning these controls cyan or
   removing their supplied artwork.
   ========================================================= */

html body .ssjx .ssjx__preview-journey-footer {
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 4 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 10px !important;
    overflow: hidden !important;
}

html body .ssjx .ssjx__preview-journey-footer.is-preparing,
html body .ssjx .ssjx__preview-journey-footer.is-visible,
html body .ssjx .ssjx__preview-journey-footer.is-leaving {
    max-height: 150px !important;
    margin-top: 14px !important;
    padding: 12px 0 2px !important;
    border-top: 1px solid rgba(103, 255, 82, .22) !important;
    background: linear-gradient(90deg,
        rgba(103,255,82,0) 0%,
        rgba(103,255,82,.018) 22%,
        rgba(103,255,82,.035) 50%,
        rgba(103,255,82,.018) 78%,
        rgba(103,255,82,0) 100%) !important;
}

html body .ssjx .ssjx__preview-journey-heading {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 2px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body .ssjx .ssjx__preview-journey-heading > span {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #bfffb0 !important;
    background: transparent !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}

html body .ssjx .ssjx__preview-journey-heading > small {
    display: block !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    color: #a7b6ab !important;
    background: transparent !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

html body .ssjx .ssjx__preview-journey-actions {
    box-sizing: border-box !important;
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-self: center !important;
    width: min(100%, 560px) !important;
    min-width: 0 !important;
    max-width: 560px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 5px !important;
    gap: 5px !important;
    overflow: hidden !important;
    color: #d8ffd0 !important;
    background:
        radial-gradient(circle at 50% 125%, rgba(103,255,82,.10), transparent 58%),
        rgba(4, 11, 12, .96) !important;
    border: 1px solid rgba(103, 255, 82, .42) !important;
    border-radius: 22px !important;
    outline: 0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        inset 0 0 0 1px rgba(103,255,82,.035),
        0 8px 22px rgba(0,0,0,.24),
        0 0 20px rgba(103,255,82,.085) !important;
    backdrop-filter: blur(14px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
}

html body .ssjx .ssjx__preview-journey-actions > button,
html body .ssjx .ssjx__preview-journey-actions > button:hover,
html body .ssjx .ssjx__preview-journey-actions > button:focus,
html body .ssjx .ssjx__preview-journey-actions > button:focus-visible,
html body .ssjx .ssjx__preview-journey-actions > button:active {
    all: unset !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, auto) !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    margin: 0 !important;
    padding: 6px 18px 6px 10px !important;
    gap: 10px !important;
    overflow: hidden !important;
    color: #baf7ab !important;
    background: rgba(103,255,82,.018) !important;
    border: 1px solid transparent !important;
    border-radius: 17px !important;
    outline: 0 !important;
    box-shadow: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 820 !important;
    font-style: normal !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
}

html body .ssjx .ssjx__preview-journey-actions > button:first-child {
    color: #e5ffdf !important;
    background: linear-gradient(145deg, rgba(103,255,82,.12), rgba(103,255,82,.035)) !important;
    border-color: rgba(103,255,82,.32) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 14px rgba(103,255,82,.055) !important;
}

html body .ssjx .ssjx__preview-journey-actions > button:hover,
html body .ssjx .ssjx__preview-journey-actions > button:focus-visible {
    color: #ecffe8 !important;
    background: linear-gradient(145deg, rgba(103,255,82,.14), rgba(103,255,82,.04)) !important;
    border-color: rgba(103,255,82,.52) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 0 14px rgba(103,255,82,.075) !important;
}

html body .ssjx .ssjx__preview-journey-actions > button:active {
    transform: translateY(1px) !important;
}

html body .ssjx .ssjx__preview-journey-actions > button::before,
html body .ssjx .ssjx__preview-journey-actions > button::after {
    content: none !important;
    display: none !important;
}

html body .ssjx .ssjx__preview-journey-art {
    box-sizing: border-box !important;
    position: relative !important;
    display: block !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 6px rgba(103,255,82,.36)) drop-shadow(0 0 14px rgba(103,255,82,.12)) !important;
    transform: none !important;
}

html body .ssjx .ssjx__preview-journey-label {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: left !important;
    white-space: nowrap !important;
}

html body .ssjx .ssjx__preview-journey-label > strong {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
}

/* The full descriptive line already sits immediately above the compact dock,
   so the duplicated micro-copy inside each half is hidden just like the
   approved floating control. No functionality or category information is lost. */
html body .ssjx .ssjx__preview-journey-label > small {
    display: none !important;
}

html body .ssjx .ssjx__preview-journey-actions > button > b {
    box-sizing: border-box !important;
    position: absolute !important;
    top: 5px !important;
    right: 7px !important;
    display: grid !important;
    place-items: center !important;
    width: 23px !important;
    min-width: 23px !important;
    max-width: 23px !important;
    height: 23px !important;
    min-height: 23px !important;
    max-height: 23px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #061006 !important;
    background: linear-gradient(145deg, #d9ffcf, #67ff52) !important;
    border: 1px solid rgba(239,255,233,.82) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 10px rgba(103,255,82,.34) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
}

@media (max-width: 720px) {
    html body .ssjx .ssjx__preview-journey-footer.is-preparing,
    html body .ssjx .ssjx__preview-journey-footer.is-visible,
    html body .ssjx .ssjx__preview-journey-footer.is-leaving {
        max-height: 132px !important;
        margin-top: 10px !important;
        padding: 9px 0 2px !important;
    }

    html body .ssjx .ssjx__preview-journey-heading > small {
        font-size: 9.5px !important;
    }

    html body .ssjx .ssjx__preview-journey-actions {
        width: 100% !important;
        max-width: none !important;
        padding: 4px !important;
        gap: 4px !important;
        border-radius: 18px !important;
    }

    html body .ssjx .ssjx__preview-journey-actions > button,
    html body .ssjx .ssjx__preview-journey-actions > button:hover,
    html body .ssjx .ssjx__preview-journey-actions > button:focus,
    html body .ssjx .ssjx__preview-journey-actions > button:focus-visible,
    html body .ssjx .ssjx__preview-journey-actions > button:active {
        grid-template-columns: 38px minmax(0, auto) !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        padding: 5px 10px 5px 7px !important;
        gap: 7px !important;
        border-radius: 14px !important;
    }

    html body .ssjx .ssjx__preview-journey-art {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
    }

    html body .ssjx .ssjx__preview-journey-label > strong {
        font-size: 12px !important;
    }

    html body .ssjx .ssjx__preview-journey-actions > button > b {
        top: 4px !important;
        right: 4px !important;
        width: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        height: 18px !important;
        min-height: 18px !important;
        max-height: 18px !important;
        font-size: 8px !important;
    }
}



/* =========================================================
   SIMME EXPLORE SYMSOUL V2.25 — RESPONSIVE DOCK SPACING + YOUR JOURNEY
   18 AUGUST 2026

   Keeps the approved green Explore / Journey visual language, but protects
   breathing room between the two actions on tablet and phone widths. The
   portalled floating dock and the compact in-panel dock use matching spacing,
   while artwork, labels and the saved-count badge scale down together.
   ========================================================= */

/* ---------- Compact dock inside the Preview information panel ---------- */
@media (max-width: 900px) {
    html body .ssjx .ssjx__preview-journey-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: min(100%, 520px) !important;
        max-width: 520px !important;
        padding: 7px !important;
        gap: 10px !important;
        border-radius: 20px !important;
    }

    html body .ssjx .ssjx__preview-journey-actions > button,
    html body .ssjx .ssjx__preview-journey-actions > button:hover,
    html body .ssjx .ssjx__preview-journey-actions > button:focus,
    html body .ssjx .ssjx__preview-journey-actions > button:focus-visible,
    html body .ssjx .ssjx__preview-journey-actions > button:active {
        grid-template-columns: 40px minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
        padding: 6px 11px 6px 8px !important;
        gap: 8px !important;
        border-radius: 15px !important;
    }

    html body .ssjx .ssjx__preview-journey-actions > button:last-child {
        padding-right: 29px !important;
    }

    html body .ssjx .ssjx__preview-journey-art {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }

    html body .ssjx .ssjx__preview-journey-label > strong {
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    html body .ssjx .ssjx__preview-journey-actions > button > b {
        top: 5px !important;
        right: 6px !important;
        width: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        height: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
        font-size: 8.5px !important;
    }
}

@media (max-width: 520px) {
    html body .ssjx .ssjx__preview-journey-footer.is-preparing,
    html body .ssjx .ssjx__preview-journey-footer.is-visible,
    html body .ssjx .ssjx__preview-journey-footer.is-leaving {
        max-height: 126px !important;
        padding-top: 8px !important;
    }

    html body .ssjx .ssjx__preview-journey-actions {
        width: 100% !important;
        max-width: none !important;
        padding: 6px !important;
        gap: 9px !important;
        border-radius: 18px !important;
    }

    html body .ssjx .ssjx__preview-journey-actions > button,
    html body .ssjx .ssjx__preview-journey-actions > button:hover,
    html body .ssjx .ssjx__preview-journey-actions > button:focus,
    html body .ssjx .ssjx__preview-journey-actions > button:focus-visible,
    html body .ssjx .ssjx__preview-journey-actions > button:active {
        grid-template-columns: 34px minmax(0, 1fr) !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        padding: 5px 8px 5px 7px !important;
        gap: 6px !important;
        border-radius: 14px !important;
    }

    html body .ssjx .ssjx__preview-journey-actions > button:last-child {
        padding-right: 25px !important;
    }

    html body .ssjx .ssjx__preview-journey-art {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
    }

    html body .ssjx .ssjx__preview-journey-label > strong {
        font-size: 10.8px !important;
    }

    html body .ssjx .ssjx__preview-journey-actions > button > b {
        top: 4px !important;
        right: 5px !important;
        width: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        height: 18px !important;
        min-height: 18px !important;
        max-height: 18px !important;
        font-size: 8px !important;
    }
}

@media (max-width: 380px) {
    html body .ssjx .ssjx__preview-journey-actions {
        padding: 6px !important;
        gap: 8px !important;
    }

    html body .ssjx .ssjx__preview-journey-actions > button,
    html body .ssjx .ssjx__preview-journey-actions > button:hover,
    html body .ssjx .ssjx__preview-journey-actions > button:focus,
    html body .ssjx .ssjx__preview-journey-actions > button:focus-visible,
    html body .ssjx .ssjx__preview-journey-actions > button:active {
        grid-template-columns: 30px minmax(0, 1fr) !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        padding: 5px 6px !important;
        gap: 5px !important;
    }

    html body .ssjx .ssjx__preview-journey-actions > button:last-child {
        padding-right: 22px !important;
    }

    html body .ssjx .ssjx__preview-journey-art {
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
    }

    html body .ssjx .ssjx__preview-journey-label > strong {
        font-size: 9.8px !important;
    }

    html body .ssjx .ssjx__preview-journey-actions > button > b {
        width: 16px !important;
        min-width: 16px !important;
        max-width: 16px !important;
        height: 16px !important;
        min-height: 16px !important;
        max-height: 16px !important;
        font-size: 7.5px !important;
    }
}

/* ---------- Portalled floating Explore / Your Journey dock ---------- */
@media (max-width: 900px) {
    html body > .ssjx__mobile-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: min(500px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        padding: 8px !important;
        gap: 10px !important;
        border-radius: 22px !important;
    }

    html body > .ssjx__mobile-bar > button,
    html body > .ssjx__mobile-bar > button:hover,
    html body > .ssjx__mobile-bar > button:focus,
    html body > .ssjx__mobile-bar > button:focus-visible,
    html body > .ssjx__mobile-bar > button:active {
        grid-template-columns: 40px minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 58px !important;
        height: 58px !important;
        max-height: 58px !important;
        padding: 7px 12px 7px 9px !important;
        gap: 8px !important;
        border-radius: 16px !important;
    }

    html body > .ssjx__mobile-bar > button:last-child {
        padding-right: 30px !important;
    }

    html body > .ssjx__mobile-bar .ssjx__mobile-bar-art,
    html body > .ssjx__mobile-bar button .ssjx__mobile-bar-art {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }

    html body > .ssjx__mobile-bar .ssjx__mobile-bar-art img,
    html body > .ssjx__mobile-bar button .ssjx__mobile-bar-art img {
        width: 39px !important;
        height: 39px !important;
    }

    html body > .ssjx__mobile-bar small {
        min-width: 0 !important;
        font-size: 11.2px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    html body > .ssjx__mobile-bar b,
    html body > .ssjx__mobile-bar button b {
        top: 5px !important;
        right: 6px !important;
        width: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        height: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
        font-size: 8.5px !important;
    }
}

@media (max-width: 520px) {
    html body > .ssjx__mobile-bar {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        padding: 7px !important;
        gap: 9px !important;
        border-radius: 20px !important;
    }

    html body > .ssjx__mobile-bar > button,
    html body > .ssjx__mobile-bar > button:hover,
    html body > .ssjx__mobile-bar > button:focus,
    html body > .ssjx__mobile-bar > button:focus-visible,
    html body > .ssjx__mobile-bar > button:active {
        grid-template-columns: 34px minmax(0, 1fr) !important;
        min-height: 52px !important;
        height: 52px !important;
        max-height: 52px !important;
        padding: 6px 8px 6px 7px !important;
        gap: 6px !important;
        border-radius: 15px !important;
    }

    html body > .ssjx__mobile-bar > button:last-child {
        padding-right: 25px !important;
    }

    html body > .ssjx__mobile-bar .ssjx__mobile-bar-art,
    html body > .ssjx__mobile-bar button .ssjx__mobile-bar-art {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
    }

    html body > .ssjx__mobile-bar .ssjx__mobile-bar-art img,
    html body > .ssjx__mobile-bar button .ssjx__mobile-bar-art img {
        width: 33px !important;
        height: 33px !important;
    }

    html body > .ssjx__mobile-bar small {
        font-size: 10.5px !important;
    }

    html body > .ssjx__mobile-bar b,
    html body > .ssjx__mobile-bar button b {
        top: 4px !important;
        right: 5px !important;
        width: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        height: 18px !important;
        min-height: 18px !important;
        max-height: 18px !important;
        font-size: 8px !important;
    }
}

@media (max-width: 380px) {
    html body > .ssjx__mobile-bar {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        padding: 6px !important;
        gap: 8px !important;
        border-radius: 18px !important;
    }

    html body > .ssjx__mobile-bar > button,
    html body > .ssjx__mobile-bar > button:hover,
    html body > .ssjx__mobile-bar > button:focus,
    html body > .ssjx__mobile-bar > button:focus-visible,
    html body > .ssjx__mobile-bar > button:active {
        grid-template-columns: 30px minmax(0, 1fr) !important;
        min-height: 48px !important;
        height: 48px !important;
        max-height: 48px !important;
        padding: 5px 6px !important;
        gap: 5px !important;
        border-radius: 14px !important;
    }

    html body > .ssjx__mobile-bar > button:last-child {
        padding-right: 22px !important;
    }

    html body > .ssjx__mobile-bar .ssjx__mobile-bar-art,
    html body > .ssjx__mobile-bar button .ssjx__mobile-bar-art {
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
    }

    html body > .ssjx__mobile-bar .ssjx__mobile-bar-art img,
    html body > .ssjx__mobile-bar button .ssjx__mobile-bar-art img {
        width: 29px !important;
        height: 29px !important;
    }

    html body > .ssjx__mobile-bar small {
        font-size: 9.8px !important;
    }

    html body > .ssjx__mobile-bar b,
    html body > .ssjx__mobile-bar button b {
        width: 16px !important;
        min-width: 16px !important;
        max-width: 16px !important;
        height: 16px !important;
        min-height: 16px !important;
        max-height: 16px !important;
        font-size: 7.5px !important;
    }
}

/* =========================================================
   SIMME EXPLORE SYMSOUL V2.23 — JOURNEY TOOLBAR HARD RESET
   18 AUGUST 2026

   The Journey surface can outlive late master-CSS rules when a CSS manager
   truncates a very large stylesheet, allowing WordPress/theme button styling
   to inflate the toolbar controls. This block is intentionally self-contained,
   high-specificity and safe to duplicate in the PHP critical CSS.
   ========================================================= */

html body .ssjx .ssjx__journey-toolbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 120 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 64px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px clamp(14px, 2.2vw, 28px) !important;
    gap: 12px !important;
    overflow: visible !important;
    color: #dce7dd !important;
    background: rgba(7, 12, 16, .975) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(103, 255, 82, .22) !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 9px 24px rgba(0, 0, 0, .20) !important;
    backdrop-filter: blur(14px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
    box-sizing: border-box !important;
}

html body .ssjx .ssjx__journey-toolbar-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body .ssjx .ssjx__journey-toolbar > .ssjx__journey-back,
html body .ssjx .ssjx__journey-toolbar > .ssjx__journey-back:hover,
html body .ssjx .ssjx__journey-toolbar > .ssjx__journey-back:focus,
html body .ssjx .ssjx__journey-toolbar > .ssjx__journey-back:focus-visible,
html body .ssjx .ssjx__journey-toolbar > .ssjx__journey-back:active,
html body .ssjx .ssjx__journey-toolbar-actions > .ssjx__journey-toolbar-pdf,
html body .ssjx .ssjx__journey-toolbar-actions > .ssjx__journey-toolbar-pdf:hover,
html body .ssjx .ssjx__journey-toolbar-actions > .ssjx__journey-toolbar-pdf:focus,
html body .ssjx .ssjx__journey-toolbar-actions > .ssjx__journey-toolbar-pdf:focus-visible,
html body .ssjx .ssjx__journey-toolbar-actions > .ssjx__journey-toolbar-pdf:active,
html body .ssjx .ssjx__journey-toolbar-actions > .ssjx__icon-button,
html body .ssjx .ssjx__journey-toolbar-actions > .ssjx__icon-button:hover,
html body .ssjx .ssjx__journey-toolbar-actions > .ssjx__icon-button:focus,
html body .ssjx .ssjx__journey-toolbar-actions > .ssjx__icon-button:focus-visible,
html body .ssjx .ssjx__journey-toolbar-actions > .ssjx__icon-button:active {
    all: unset !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    gap: 8px !important;
    overflow: hidden !important;
    color: #dce7dd !important;
    background: rgba(9, 15, 20, .90) !important;
    border: 1px solid rgba(103, 255, 82, .34) !important;
    border-radius: 11px !important;
    outline: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 720 !important;
    font-style: normal !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
}

html body .ssjx .ssjx__journey-toolbar-actions > .ssjx__icon-button,
html body .ssjx .ssjx__journey-toolbar-actions > .ssjx__icon-button:hover,
html body .ssjx .ssjx__journey-toolbar-actions > .ssjx__icon-button:focus,
html body .ssjx .ssjx__journey-toolbar-actions > .ssjx__icon-button:focus-visible,
html body .ssjx .ssjx__journey-toolbar-actions > .ssjx__icon-button:active {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    padding: 0 !important;
    color: #c8ffbf !important;
}

html body .ssjx .ssjx__journey-toolbar > .ssjx__journey-back:hover,
html body .ssjx .ssjx__journey-toolbar > .ssjx__journey-back:focus-visible,
html body .ssjx .ssjx__journey-toolbar-actions > .ssjx__journey-toolbar-pdf:hover,
html body .ssjx .ssjx__journey-toolbar-actions > .ssjx__journey-toolbar-pdf:focus-visible,
html body .ssjx .ssjx__journey-toolbar-actions > .ssjx__icon-button:hover,
html body .ssjx .ssjx__journey-toolbar-actions > .ssjx__icon-button:focus-visible {
    color: #ffffff !important;
    background: rgba(103, 255, 82, .075) !important;
    border-color: rgba(103, 255, 82, .70) !important;
    box-shadow: 0 0 16px rgba(103, 255, 82, .09), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

html body .ssjx .ssjx__journey-toolbar > .ssjx__journey-back:active,
html body .ssjx .ssjx__journey-toolbar-actions > .ssjx__journey-toolbar-pdf:active,
html body .ssjx .ssjx__journey-toolbar-actions > .ssjx__icon-button:active {
    transform: translateY(1px) !important;
}

html body .ssjx .ssjx__journey-toolbar button::before,
html body .ssjx .ssjx__journey-toolbar button::after {
    content: none !important;
    display: none !important;
}

html body .ssjx .ssjx__journey-toolbar svg {
    display: block !important;
    flex: 0 0 17px !important;
    width: 17px !important;
    min-width: 17px !important;
    max-width: 17px !important;
    height: 17px !important;
    min-height: 17px !important;
    max-height: 17px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: currentColor !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    stroke: currentColor !important;
    transform: none !important;
}

html body .ssjx .ssjx__journey-toolbar > .ssjx__journey-back svg {
    transform: rotate(180deg) !important;
}

html body .ssjx .ssjx__journey-toolbar span {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font: inherit !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
}

@media (max-width: 720px) {
    html body .ssjx .ssjx__journey-toolbar {
        min-height: 56px !important;
        padding: 7px 9px !important;
        gap: 7px !important;
        border-radius: 19px 19px 0 0 !important;
    }

    html body .ssjx .ssjx__journey-toolbar > .ssjx__journey-back,
    html body .ssjx .ssjx__journey-toolbar-actions > .ssjx__journey-toolbar-pdf {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding: 0 10px !important;
        gap: 6px !important;
        font-size: 11px !important;
    }

    html body .ssjx .ssjx__journey-toolbar-actions > .ssjx__icon-button {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }

    html body .ssjx .ssjx__journey-toolbar-actions > .ssjx__journey-toolbar-pdf span {
        display: none !important;
    }
}

@media (max-width: 420px) {
    html body .ssjx .ssjx__journey-toolbar > .ssjx__journey-back {
        padding: 0 8px !important;
    }

    html body .ssjx .ssjx__journey-toolbar > .ssjx__journey-back span {
        font-size: 10.5px !important;
    }
}


/* =========================================================
   SIMME EXPLORE SYMSOUL V2.21 — GLOBAL HEADER CLEARANCE FIX
   18 AUGUST 2026

   Keeps the genuine shared Simme header completely separate from Detail and
   Journey. The focused surface begins below the measured header with a clear
   visual gap, and its own toolbar remains the first visible row.
   ========================================================= */

html body.ssjx-has-modal .ssjx {
    --ssjx-modal-header-gap: clamp(18px, 1.25vw, 24px);
    --ssjx-modal-edge: clamp(12px, 2vw, 26px);
}

html body.ssjx-has-modal .ssjx .ssjx__modal {
    top: var(--ssjx-site-header-offset, 0px) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: var(--ssjx-modal-header-gap) var(--ssjx-modal-edge) var(--ssjx-modal-edge) !important;
    place-items: start center !important;
}

html body.ssjx-has-modal .ssjx .ssjx__detail-canvas,
html body.ssjx-has-modal .ssjx .ssjx__journey-panel {
    max-height: calc(100dvh - var(--ssjx-site-header-offset, 0px) - var(--ssjx-modal-header-gap) - var(--ssjx-modal-edge)) !important;
}

html body.ssjx-has-modal .ssjx .ssjx__detail-toolbar,
html body.ssjx-has-modal .ssjx .ssjx__journey-toolbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
}

@media (max-width: 720px) {
    html body.ssjx-has-modal .ssjx {
        --ssjx-modal-header-gap: 12px;
        --ssjx-modal-edge: 7px;
    }
}

/* ========================================================================== 
   V2.20 — COMPACT ADAPTIVE READING MODE CONTROL + MODAL HEADER PORTAL
   - Keeps the approved Node-style segmented control.
   - Reduces its desktop footprint without changing its interaction model.
   - Gives Light mode its own pale control skin while Dark remains deep navy.
   - Keeps the genuine Simme global header above Detail/Journey by mounting
     the existing header directly under <body> while a focused surface is open.
   ========================================================================== */

html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"],
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] *,
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] *::before,
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] *::after {
    box-sizing: border-box !important;
}

html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] {
    --rm220-blue: 72, 188, 255;
    --rm220-blue-soft: 164, 236, 255;
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 3px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 6px !important;
    overflow: hidden !important;
    isolation: isolate !important;
    color: #b7c4d8 !important;
    background:
        radial-gradient(circle at 50% 118%, rgba(var(--rm220-blue), .055), transparent 54%),
        linear-gradient(180deg, #071426 0%, #030b18 100%) !important;
    border: 1px solid rgba(128, 165, 209, .34) !important;
    border-radius: 23px !important;
    outline: 0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        inset 0 0 22px rgba(51,120,184,.03),
        0 8px 22px rgba(0,0,0,.24) !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    transition:
        color 200ms ease,
        background 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease !important;
}

html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"]::before {
    content: "" !important;
    position: absolute !important;
    inset: 5px !important;
    z-index: 0 !important;
    display: block !important;
    pointer-events: none !important;
    border: 1px dotted rgba(127, 172, 220, .32) !important;
    border-radius: 17px !important;
    background: transparent !important;
    transition: border-color 220ms ease !important;
}

html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] > .ssjx-rmode2__segment,
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] > .ssjx-rmode2__segment:hover,
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] > .ssjx-rmode2__segment:focus,
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] > .ssjx-rmode2__segment:focus-visible,
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] > .ssjx-rmode2__segment:active {
    all: unset !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    overflow: hidden !important;
    color: #aebbd0 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 16px !important;
    outline: 0 !important;
    box-shadow: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    transition:
        color 180ms ease,
        background 200ms ease,
        border-color 200ms ease,
        box-shadow 200ms ease !important;
}

html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] > .ssjx-rmode2__segment::before,
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] > .ssjx-rmode2__segment::after {
    content: none !important;
    display: none !important;
}

/* DARK selected state */
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] > .ssjx-rmode2__segment.is-active,
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] > .ssjx-rmode2__segment[aria-pressed="true"],
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] > .ssjx-rmode2__segment.is-active:hover,
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] > .ssjx-rmode2__segment[aria-pressed="true"]:hover,
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] > .ssjx-rmode2__segment.is-active:focus-visible,
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] > .ssjx-rmode2__segment[aria-pressed="true"]:focus-visible {
    color: #f7faff !important;
    background:
        radial-gradient(circle at 24% 28%, rgba(var(--rm220-blue-soft), .17), transparent 42%),
        linear-gradient(145deg, rgba(15, 55, 93, .98), rgba(7, 27, 52, .995)) !important;
    border-color: rgba(var(--rm220-blue), .95) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 0 17px rgba(var(--rm220-blue), .05),
        0 0 0 1px rgba(var(--rm220-blue), .06),
        0 0 17px rgba(var(--rm220-blue), .19) !important;
}

html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] > .ssjx-rmode2__segment:not(.is-active):not([aria-pressed="true"]):hover,
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] > .ssjx-rmode2__segment:not(.is-active):not([aria-pressed="true"]):focus-visible {
    color: #e4edf9 !important;
    background: rgba(var(--rm220-blue), .035) !important;
    border-color: rgba(var(--rm220-blue), .12) !important;
}

html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] .ssjx-rmode2__glyph {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 22px !important;
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: currentColor !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 22px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow: none !important;
    transform: none !important;
}

html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] .ssjx-rmode2__glyph--sun {
    font-size: 22px !important;
}

html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] > .ssjx-rmode2__segment.is-active .ssjx-rmode2__glyph,
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] > .ssjx-rmode2__segment[aria-pressed="true"] .ssjx-rmode2__glyph {
    color: #aaf1ff !important;
    text-shadow: 0 0 9px rgba(113, 223, 255, .36) !important;
}

html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] .ssjx-rmode2__label {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-block !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

/* LIGHT MODE: the control itself becomes a pale version of the same component. */
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"][data-ssjx-current="light"] {
    color: #617086 !important;
    background:
        radial-gradient(circle at 76% 20%, rgba(var(--rm220-blue-soft), .22), transparent 38%),
        linear-gradient(180deg, rgba(253,254,255,.995), rgba(237,244,251,.995)) !important;
    border-color: rgba(115, 143, 173, .42) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.98),
        inset 0 0 18px rgba(64,126,178,.035),
        0 8px 20px rgba(25,57,88,.11) !important;
}

html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"][data-ssjx-current="light"]::before {
    border-color: rgba(103, 138, 173, .34) !important;
}

html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"][data-ssjx-current="light"] > .ssjx-rmode2__segment,
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"][data-ssjx-current="light"] > .ssjx-rmode2__segment:hover,
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"][data-ssjx-current="light"] > .ssjx-rmode2__segment:focus,
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"][data-ssjx-current="light"] > .ssjx-rmode2__segment:focus-visible,
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"][data-ssjx-current="light"] > .ssjx-rmode2__segment:active {
    color: #69788d !important;
}

html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"][data-ssjx-current="light"] > .ssjx-rmode2__segment.is-active,
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"][data-ssjx-current="light"] > .ssjx-rmode2__segment[aria-pressed="true"],
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"][data-ssjx-current="light"] > .ssjx-rmode2__segment.is-active:hover,
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"][data-ssjx-current="light"] > .ssjx-rmode2__segment[aria-pressed="true"]:hover,
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"][data-ssjx-current="light"] > .ssjx-rmode2__segment.is-active:focus-visible,
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"][data-ssjx-current="light"] > .ssjx-rmode2__segment[aria-pressed="true"]:focus-visible {
    color: #152235 !important;
    background:
        radial-gradient(circle at 30% 26%, rgba(119, 222, 255, .30), transparent 42%),
        linear-gradient(145deg, rgba(255,255,255,.995), rgba(226,243,254,.995)) !important;
    border-color: rgba(55, 178, 239, .88) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 0 15px rgba(56,177,233,.06),
        0 0 0 1px rgba(49,169,228,.06),
        0 0 14px rgba(50,172,231,.16) !important;
}

html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"][data-ssjx-current="light"] > .ssjx-rmode2__segment.is-active .ssjx-rmode2__glyph,
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"][data-ssjx-current="light"] > .ssjx-rmode2__segment[aria-pressed="true"] .ssjx-rmode2__glyph {
    color: #159fd9 !important;
    text-shadow: 0 0 8px rgba(70,190,238,.23) !important;
}

html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"][data-ssjx-current="light"] > .ssjx-rmode2__segment:not(.is-active):not([aria-pressed="true"]):hover,
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"][data-ssjx-current="light"] > .ssjx-rmode2__segment:not(.is-active):not([aria-pressed="true"]):focus-visible {
    color: #35465d !important;
    background: rgba(74, 169, 218, .055) !important;
    border-color: rgba(70, 161, 207, .13) !important;
}

/* Compact desktop toolbar. */
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"].ssjx-rmode2--toolbar {
    width: 272px !important;
    min-width: 272px !important;
    max-width: 272px !important;
    flex: 0 0 272px !important;
}

html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"].ssjx-rmode2--toolbar > .ssjx-rmode2__segment {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 12px !important;
    gap: 7px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
}

html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"].ssjx-rmode2--toolbar .ssjx-rmode2__glyph {
    flex-basis: 20px !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    font-size: 22px !important;
    line-height: 20px !important;
}

html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"].ssjx-rmode2--toolbar .ssjx-rmode2__glyph--sun {
    font-size: 21px !important;
}

/* Reading-surface card version: still broad enough to feel intentional,
   but no longer fills an oversized card edge-to-edge on wide sidebars. */
html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"].ssjx-rmode2--panel {
    width: min(100%, 284px) !important;
    max-width: 284px !important;
    margin-top: 10px !important;
}

@media (max-width: 980px) {
    html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"].ssjx-rmode2--toolbar {
        width: 232px !important;
        min-width: 232px !important;
        max-width: 232px !important;
        flex-basis: 232px !important;
        padding: 6px !important;
        border-radius: 21px !important;
    }

    html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"].ssjx-rmode2--toolbar::before {
        inset: 5px !important;
        border-radius: 15px !important;
    }

    html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"].ssjx-rmode2--toolbar > .ssjx-rmode2__segment {
        height: 43px !important;
        min-height: 43px !important;
        max-height: 43px !important;
        padding: 0 9px !important;
        gap: 6px !important;
        border-radius: 13px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 780px) {
    html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"].ssjx-rmode2--toolbar {
        width: 194px !important;
        min-width: 194px !important;
        max-width: 194px !important;
        flex: 0 0 194px !important;
        padding: 5px !important;
        gap: 3px !important;
        border-radius: 18px !important;
    }

    html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"].ssjx-rmode2--toolbar::before,
    html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"].ssjx-rmode2--panel::before {
        inset: 4px !important;
        border-radius: 13px !important;
    }

    html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] > .ssjx-rmode2__segment,
    html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"].ssjx-rmode2--panel > .ssjx-rmode2__segment {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding: 0 8px !important;
        gap: 6px !important;
        border-radius: 13px !important;
        font-size: 13px !important;
    }

    html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"].ssjx-rmode2--toolbar > .ssjx-rmode2__segment {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding: 0 6px !important;
        gap: 4px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
    }

    html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] .ssjx-rmode2__glyph {
        flex-basis: 19px !important;
        width: 19px !important;
        min-width: 19px !important;
        max-width: 19px !important;
        height: 19px !important;
        min-height: 19px !important;
        max-height: 19px !important;
        font-size: 21px !important;
        line-height: 19px !important;
    }

    html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"] .ssjx-rmode2__glyph--sun {
        font-size: 20px !important;
    }

    html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"].ssjx-rmode2--panel {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 420px) {
    html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"].ssjx-rmode2--toolbar {
        width: 176px !important;
        min-width: 176px !important;
        max-width: 176px !important;
        flex-basis: 176px !important;
        padding: 4px !important;
    }

    html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"].ssjx-rmode2--toolbar > .ssjx-rmode2__segment {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        padding: 0 4px !important;
        gap: 4px !important;
        font-size: 11.5px !important;
    }

    html body .ssjx .ssjx-rmode2[data-ssjx-rmode="v220"].ssjx-rmode2--toolbar .ssjx-rmode2__glyph {
        flex-basis: 17px !important;
        width: 17px !important;
        min-width: 17px !important;
        max-width: 17px !important;
        height: 17px !important;
        min-height: 17px !important;
        max-height: 17px !important;
        font-size: 19px !important;
        line-height: 17px !important;
    }
}

/* --------------------------------------------------------------------------
   V2.20 — GUARANTEED GLOBAL HEADER ABOVE DETAIL / JOURNEY
   JS temporarily portals the genuine header to be a direct child of <body>.
   This removes any Themify stacking-context ancestor from the equation.
   -------------------------------------------------------------------------- */
.ssjx-modal-header-reserve[hidden] {
    display: none !important;
}

body > .simme-global-header.ssjx-modal-header-mounted,
body > .simme-global-header.ssjx-modal-header-mounted:hover {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 2147483646 !important;
    display: block !important;
    width: 100vw !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
}

body.admin-bar > .simme-global-header.ssjx-modal-header-mounted {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar > .simme-global-header.ssjx-modal-header-mounted {
        top: 46px !important;
    }
}

body.ssjx-has-modal > .simme-global-header.ssjx-modal-header-mounted .simme-global-header__menu {
    z-index: 2147483647 !important;
}


/* === SIMME CSS MANAGER :: START :: LORD_DANCER_CORE :: Lord Dancer — Core / Entrance / Gallery / Cookies === */
/* =========================================================
   LORD DANCER – PYRAMID MUSIC GALLERY ENTRANCE
   Final responsive replacement stylesheet – responsive desktop and portrait-phone galleries
   Shortcode: [lord_dancer_entrance_demo]

   This file replaces the entire previous Lord Dancer CSS.
   Do not keep any of the older guide-character patch blocks.
   ========================================================= */

/* =========================================================
   1. COMPONENT RESET AND DESIGN TOKENS
   ========================================================= */

.ld-entrance-demo,
.ld-entrance-demo *,
.ld-entrance-demo *::before,
.ld-entrance-demo *::after {
	box-sizing: border-box;
}

.ld-entrance-demo {
	--ld-black: #101010;
	--ld-deep-black: #050505;
	--ld-cream: #f4efe4;
	--ld-warm-white: #fffaf0;
	--ld-yellow: #ffc928;
	--ld-yellow-light: #ffe68a;
	--ld-gold: #dcae37;
	--ld-blue: #1647c8;

	--ld-guide-arrival-time: 2.9s;
	--ld-follow-time: 2.5s;
	--ld-follow-ease: cubic-bezier(.16, .72, .18, 1);

	/*
	 * The PHP supplies both image URLs on the component root.
	 * Desktop is the default; a portrait-phone media query swaps
	 * this active token to the dedicated mobile composition.
	 */
	--ld-gallery-image-active: var(--ld-gallery-image-desktop);

	/* Responsive gallery framing and singer scale. */
	--ld-gallery-size: 108% auto;
	--ld-gallery-position: 50% center;
	--ld-gallery-follow-size: 126% auto;
	--ld-gallery-follow-position: 76% center;
	--ld-guide-width: min(38vw, 60dvh, 600px);
	--ld-guide-min-width: 320px;

	position: relative;
	isolation: isolate;
	width: 100%;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	color: var(--ld-black);
	background: var(--ld-cream);
	font-family: Arial, Helvetica, sans-serif;
}

.ld-entrance-demo button,
.ld-entrance-demo img {
	-webkit-tap-highlight-color: transparent;
}

.ld-entrance-demo img {
	max-width: 100%;
}

.ld-entrance-transition,
.ld-gallery-arrival,
.ld-entrance-demo__eyebrow,
.ld-gallery-preview__status,
.ld-gallery-preview__replay,
.ld-guide-layer__caption {
	display: none !important;
}


/* =========================================================
   2. ENTRANCE BACKGROUND
   ========================================================= */

.ld-entrance-demo__background {
	position: absolute;
	inset: 0;
	z-index: -3;
	overflow: hidden;
	background:
		radial-gradient(
			circle at 65% 25%,
			rgba(255, 224, 128, .28),
			transparent 34%
		),
		linear-gradient(
			135deg,
			#fffdf7 0%,
			#eee6d7 52%,
			#f8f2e7 100%
		);
}

.ld-entrance-demo__background::before {
	position: absolute;
	inset: 0;
	content: "";
	background:
		linear-gradient(
			90deg,
			transparent 0%,
			rgba(255, 255, 255, .3) 50%,
			transparent 100%
		);
	transform: translateX(-110%);
	animation: ld-background-sheen 10s ease-in-out infinite;
}

.ld-entrance-demo__light {
	position: absolute;
	width: 42vw;
	height: 42vw;
	border-radius: 50%;
	filter: blur(80px);
	opacity: .18;
	pointer-events: none;
}

.ld-entrance-demo__light--one {
	top: -16vw;
	left: -18vw;
	background: var(--ld-blue);
}

.ld-entrance-demo__light--two {
	right: -12vw;
	bottom: -20vw;
	background: var(--ld-yellow);
}

.ld-entrance-demo__grain {
	position: absolute;
	inset: 0;
	opacity: .2;
	pointer-events: none;
	background-image:
		url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
}


/* =========================================================
   3. ENTRANCE SCENE
   ========================================================= */

.ld-entrance-demo__scene {
	position: relative;
	display: grid;
	grid-template-columns:
		minmax(220px, .72fr)
		minmax(480px, 1.35fr)
		minmax(160px, .48fr);
	align-items: center;
	width: min(1600px, 100%);
	min-height: 100vh;
	min-height: 100svh;
	margin: 0 auto;
	padding:
		clamp(24px, 4vw, 70px)
		clamp(20px, 4vw, 68px);
	gap: clamp(20px, 3vw, 52px);
	transition:
		opacity 1.8s ease,
		filter 1.8s ease,
		transform 2.2s ease,
		visibility 0s linear 0s;
}

.ld-entrance-demo__header {
	position: relative;
	z-index: 20;
	align-self: start;
	padding-top: clamp(8px, 2vh, 28px);
}

.ld-entrance-demo__symbol {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Legacy-safe fallback: modern browsers override the first width below. */
	width: 72px;
	max-width: 88px;
	width: clamp(58px, 5.6vw, 88px);
	height: auto;
	margin-bottom: 16px;
}

.ld-entrance-demo__symbol img {
	display: block;
	width: 100%;
	max-width: 88px;
	height: auto;
	object-fit: contain;
}

.ld-entrance-demo__symbol svg,
.ld-entrance-demo__symbol path {
	display: none !important;
}

.ld-entrance-demo__title {
	margin: 0;
	font-size: clamp(38px, 4.3vw, 76px);
	font-weight: 800;
	line-height: .92;
	letter-spacing: -.055em;
	text-transform: uppercase;
}

.ld-entrance-demo__intro {
	max-width: 320px;
	margin: 27px 0 0;
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 1.65;
}

.ld-entrance-demo__quote {
	position: relative;
	z-index: 20;
	align-self: end;
	padding-bottom: clamp(40px, 10vh, 130px);
}

.ld-entrance-demo__quote-line {
	display: block;
	width: 78px;
	height: 5px;
	margin-bottom: 19px;
	background: var(--ld-yellow);
}

.ld-entrance-demo__quote p {
	margin: 0;
	font-size: clamp(14px, 1.3vw, 18px);
	line-height: 1.45;
	text-transform: uppercase;
}

.ld-entrance-demo__quote strong {
	display: block;
	margin-top: 5px;
	font-size: 1.15em;
}


/* =========================================================
   4. ENTRANCE PERFORMER
   ========================================================= */

.ld-entrance-demo__performer-wrap {
	position: absolute;
	z-index: 30;
	left: clamp(17%, 23vw, 29%);
	bottom: 0;
	width: clamp(180px, 24vw, 390px);
	height: min(83vh, 820px);
	pointer-events: none;
	transform-origin: 50% 100%;
	animation: ld-performer-float 5s ease-in-out infinite;
}

.ld-entrance-demo__performer {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 50% 100%;
	filter: drop-shadow(0 25px 28px rgba(0, 0, 0, .24));
}


/* =========================================================
   5. PYRAMID ENTRANCE
   ========================================================= */

.ld-pyramid-entrance {
	--ld-pyramid-top: 4.5%;
	--ld-pyramid-side: 4%;

	position: relative;
	z-index: 8;
	isolation: isolate;
	grid-column: 2;
	width: min(54vw, 790px);
	max-width: 100%;
	aspect-ratio: 1.08;
	margin-inline: auto;
	overflow: visible;
	transform-origin: 50% 48%;
	filter: drop-shadow(0 28px 35px rgba(0, 0, 0, .2));
	will-change: transform, filter;
	transition:
		transform 5.2s cubic-bezier(.18, .71, .22, 1),
		filter 4s ease;
}

.ld-pyramid-entrance::after {
	display: none !important;
	content: none !important;
}

.ld-pyramid-entrance__shadow {
	position: absolute;
	z-index: 0;
	left: 50%;
	bottom: -5%;
	width: 83%;
	height: 15%;
	border-radius: 50%;
	background: rgba(0, 0, 0, .24);
	filter: blur(22px);
	transform: translateX(-50%);
}

.ld-pyramid-entrance__gallery {
	position: absolute;
	z-index: 1;
	inset: 3.5% 4% 3%;
	overflow: hidden;
	background:
		linear-gradient(180deg, #17130b, #050505);
	background-image: var(--ld-gallery-image-active);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	-webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
	transform: scale(.94);
}

.ld-pyramid-entrance__gallery-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			180deg,
			rgba(5, 5, 5, .1),
			rgba(5, 5, 5, .08) 45%,
			rgba(5, 5, 5, .45)
		),
		radial-gradient(
			circle at 50% 42%,
			rgba(255, 202, 51, .34),
			transparent 36%
		);
}

.ld-pyramid-entrance__gallery-depth {
	position: absolute;
	inset: 0;
	opacity: .65;
}

.ld-pyramid-entrance__gallery-line {
	position: absolute;
	top: 20%;
	bottom: -5%;
	width: 2px;
	background:
		linear-gradient(
			to bottom,
			transparent,
			var(--ld-yellow-light),
			transparent
		);
	transform-origin: 50% 100%;
}

.ld-pyramid-entrance__gallery-line--one {
	left: 31%;
	transform: rotate(10deg);
}

.ld-pyramid-entrance__gallery-line--two {
	left: 50%;
}

.ld-pyramid-entrance__gallery-line--three {
	right: 31%;
	transform: rotate(-10deg);
}


/* =========================================================
   6. WORDING INSIDE THE CORRIDOR
   ========================================================= */

.ld-pyramid-entrance__destination {
	position: absolute;
	z-index: 3;
	left: 50%;
	top: 48%;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(82%, 520px);
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	opacity: 0;
	transform: translate3d(-50%, -50%, 0) scale(.72);
	transform-origin: 50% 50%;
	will-change: transform, opacity;
}

.ld-pyramid-entrance__destination span {
	margin-bottom: 6px;
	font-size: clamp(9px, 1.1vw, 15px);
	letter-spacing: .34em;
}

.ld-pyramid-entrance__destination strong {
	font-size: clamp(21px, 3.4vw, 48px);
	line-height: .94;
	letter-spacing: .05em;
}


/* =========================================================
   7. PYRAMID DOORS
   ========================================================= */

.ld-pyramid-entrance__door {
	position: absolute;
	z-index: 7;
	top: var(--ld-pyramid-top);
	bottom: 3.5%;
	width: 46%;
	overflow: hidden;
	backface-visibility: hidden;
	will-change: transform;
	transition:
		transform 2.35s cubic-bezier(.55, .02, .18, 1),
		filter 700ms ease;
}

.ld-pyramid-entrance__door--left {
	left: var(--ld-pyramid-side);
	right: auto;
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
	transform-origin: 100% 50%;
}

.ld-pyramid-entrance__door--right {
	right: var(--ld-pyramid-side);
	left: auto;
	clip-path: polygon(0 0, 100% 100%, 0 100%);
	-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
	transform-origin: 0 50%;
}

.ld-pyramid-entrance__door-surface {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background:
		linear-gradient(
			110deg,
			#090909 0%,
			#292929 34%,
			#0b0b0b 68%,
			#202020 100%
		);
}

.ld-pyramid-entrance__door--left .ld-pyramid-entrance__door-surface {
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.ld-pyramid-entrance__door--right .ld-pyramid-entrance__door-surface {
	clip-path: polygon(0 0, 100% 100%, 0 100%);
	-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.ld-pyramid-entrance__door-surface::before {
	position: absolute;
	inset: 0;
	content: "";
	opacity: .45;
	background:
		repeating-linear-gradient(
			118deg,
			transparent 0,
			transparent 29px,
			rgba(255, 255, 255, .04) 30px,
			transparent 31px
		);
}

.ld-pyramid-entrance__door-surface::after {
	position: absolute;
	inset: 0;
	content: "";
	background:
		radial-gradient(
			circle at 50% 100%,
			rgba(255, 201, 40, .12),
			transparent 45%
		);
}


/* =========================================================
   8. PYRAMID LIGHTING AND MIST
   ========================================================= */

.ld-pyramid-entrance__outline {
	position: absolute;
	z-index: 9;
	inset: 0;
	pointer-events: none;
}

.ld-pyramid-entrance__outline svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.ld-pyramid-entrance__outline path {
	fill: none;
	stroke: var(--ld-yellow);
	stroke-width: 12;
	stroke-linejoin: round;
	filter:
		drop-shadow(0 0 5px rgba(255, 201, 40, .95))
		drop-shadow(0 0 17px rgba(255, 201, 40, .48));
	transition:
		stroke-width 500ms ease,
		filter 700ms ease;
}

.ld-pyramid-entrance__seam {
	position: absolute;
	z-index: 8;
	left: 50%;
	top: 6%;
	bottom: 5%;
	width: 2px;
	background:
		linear-gradient(
			to bottom,
			transparent,
			rgba(255, 230, 138, .75),
			rgba(255, 230, 138, .2),
			transparent
		);
	box-shadow: 0 0 14px rgba(255, 201, 40, .7);
	transform: translateX(-50%);
	transition: opacity 300ms ease;
}

.ld-pyramid-entrance__mist {
	position: absolute;
	z-index: 6;
	left: 9%;
	right: 9%;
	bottom: 4%;
	height: 25%;
	overflow: hidden;
	clip-path: polygon(11% 100%, 89% 100%, 75% 0, 25% 0);
	-webkit-clip-path: polygon(11% 100%, 89% 100%, 75% 0, 25% 0);
	pointer-events: none;
	transition:
		opacity 1.8s ease,
		transform 2.2s ease;
}

.ld-pyramid-entrance__mist span {
	position: absolute;
	bottom: -55%;
	width: 58%;
	height: 120%;
	border-radius: 50%;
	background: rgba(255, 255, 255, .44);
	filter: blur(27px);
	animation: ld-mist-move 7s ease-in-out infinite;
}

.ld-pyramid-entrance__mist span:nth-child(1) {
	left: -8%;
}

.ld-pyramid-entrance__mist span:nth-child(2) {
	left: 29%;
	animation-delay: -2.3s;
}

.ld-pyramid-entrance__mist span:nth-child(3) {
	right: -10%;
	animation-delay: -4.6s;
}


/* =========================================================
   9. TEARING GOLDEN TICKET
   ========================================================= */

/*
 * The normal ticket floats down as one image. On click,
 * JavaScript locks its current centre and width to the
 * viewport. The split artwork then tears from top to bottom
 * and both paper pieces fall independently of the pyramid.
 */
.ld-admit-ticket,
.ld-admit-ticket:hover,
.ld-admit-ticket:focus,
.ld-admit-ticket:active,
.ld-admit-ticket:visited {
	--ld-ticket-perforation: 79.1%;

	position: absolute !important;
	z-index: 15 !important;
	left: 50% !important;
	top: 59% !important;
	display: block !important;
	width: clamp(230px, 29vw, 340px) !important;
	height: auto !important;
	aspect-ratio: 800 / 371;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	color: transparent !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font: inherit !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transform: translate3d(-50%, -50%, 0) !important;
	transform-origin: 50% 50% !important;
	translate: 0 0;
	rotate: -5deg;
	scale: 1;
	opacity: 1;
	filter:
		drop-shadow(0 15px 13px rgba(0, 0, 0, .28))
		drop-shadow(0 3px 4px rgba(0, 0, 0, .16)) !important;
	cursor: pointer !important;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-webkit-tap-highlight-color: transparent !important;
	will-change: translate, rotate;
}

.ld-admit-ticket {
	animation:
		ld-ticket-silky-descent
		7.2s
		linear
		.25s
		1
		both !important;
}

.ld-admit-ticket__whole,
.ld-admit-ticket__split,
.ld-admit-ticket__tear {
	position: absolute;
	pointer-events: none;
}

.ld-admit-ticket__whole {
	z-index: 2;
	inset: 0;
	display: block;
	opacity: 1;
}

.ld-admit-ticket__image {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	object-fit: contain !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	transform: none !important;
	animation: none !important;
	opacity: 1 !important;
	pointer-events: none !important;
	user-select: none !important;
	-webkit-user-drag: none !important;
}

/*
 * The two supplied split files total 842 × 400:
 * left 672px (79.81%), right 170px (20.19%).
 * Their combined aspect ratio is slightly narrower than the
 * original 800 × 371 ticket, hence the 97.65% split width.
 */
.ld-admit-ticket__split {
	z-index: 3;
	left: 50%;
	top: 50%;
	display: block;
	width: 97.65%;
	height: 100%;
	overflow: visible;
	opacity: 0;
	clip-path: inset(0 0 100% 0);
	-webkit-clip-path: inset(0 0 100% 0);
	transform:
		translate3d(-50%, -50%, 0);
	transform-style: preserve-3d;
	perspective: 1400px;
	will-change: clip-path, opacity;
}

.ld-admit-ticket__piece {
	position: absolute;
	top: 0;
	display: block;
	height: 100%;
	overflow: visible;
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transform-style: preserve-3d;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	will-change: transform, opacity, filter;
}

.ld-admit-ticket__piece--left {
	left: 0;
	width: 79.81%;
	transform-origin: 100% 0%;
}

.ld-admit-ticket__piece--right {
	right: 0;
	width: 20.19%;
	transform-origin: 0% 0%;
}

.ld-admit-ticket__piece img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: fill;
	border: 0;
	outline: 0;
	box-shadow: none;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

.ld-admit-ticket__tear {
	z-index: 5;
	left: var(--ld-ticket-perforation);
	top: 4%;
	width: 2px;
	height: 92%;
	opacity: 0;

	/*
	 * A narrow dark-gold fibres line replaces the previous bright
	 * cream strip. The old strip was the white area visible between
	 * the two ticket sections while the tear travelled downwards.
	 */
	background:
		linear-gradient(
			to right,
			rgba(83, 49, 3, .82),
			rgba(229, 174, 47, .74)
		);
	box-shadow:
		0 0 2px rgba(71, 40, 0, .56),
		0 0 5px rgba(236, 184, 54, .34);
	mix-blend-mode: multiply;
	filter: none;
	transform:
		translateX(-50%)
		scaleY(0);
	transform-origin: 50% 0%;
	will-change: transform, opacity;
}

.ld-entrance-demo:not(.is-ticket-tearing)
.ld-admit-ticket:hover {
	translate: 0 -6px;
	rotate: -3.5deg;
	scale: 1.015;
	filter:
		drop-shadow(0 20px 16px rgba(0, 0, 0, .33))
		drop-shadow(0 4px 6px rgba(0, 0, 0, .18))
		brightness(1.03) !important;
}

.ld-admit-ticket:focus {
	outline: none !important;
}

.ld-admit-ticket:focus-visible {
	outline: 3px solid rgba(255, 222, 126, .95) !important;
	outline-offset: 6px !important;
	border-radius: 12px !important;
	box-shadow:
		0 0 0 3px rgba(125, 84, 10, .28),
		0 0 28px rgba(255, 202, 53, .52) !important;
}

.ld-admit-ticket:disabled {
	cursor: default !important;
}

/*
 * Fix the ticket to the exact viewport position captured by
 * JavaScript. JavaScript first moves the button out of the
 * filtered pyramid so position:fixed remains viewport based
 * and cannot jump sideways when the tear state begins.
 *
 * Layer order during the tear:
 *   pyramid and opening gallery preview = below the ticket
 *   falling ticket pieces               = z-index 29
 *   entrance performer                  = z-index 30
 *
 * This keeps the paper in front of the black pyramid/gallery
 * layers while allowing the performer to remain in front of it.
 */
.ld-entrance-demo.is-ticket-tearing
.ld-admit-ticket {
	position: fixed !important;
	z-index: 29 !important;
	left: var(--ld-ticket-fixed-x, 50vw) !important;
	top: var(--ld-ticket-fixed-y, 58vh) !important;
	width: var(--ld-ticket-fixed-width, clamp(230px, 29vw, 340px)) !important;
	animation: none !important;
	transform:
		translate3d(-50%, -50%, 0)
		rotate(var(--ld-ticket-fixed-rotate, -5deg))
		scale(var(--ld-ticket-fixed-scale, 1)) !important;
	transform-origin: 50% 50% !important;
	translate: none !important;
	rotate: none !important;
	scale: none !important;
	filter: none !important;
	pointer-events: none !important;
}

.ld-entrance-demo.is-ticket-tearing
.ld-admit-ticket:focus-visible {
	outline: 0 !important;
	box-shadow: none !important;
}

.ld-entrance-demo.is-ticket-tearing
.ld-admit-ticket__whole {
	/*
	 * Keep the intact artwork visible underneath the split artwork
	 * until the top-to-bottom reveal has completely reached the
	 * bottom edge. This prevents the black pyramid from showing
	 * through the unrevealed section during the tear.
	 */
	animation:
		ld-ticket-whole-release
		.74s
		steps(1, end)
		forwards;
}

.ld-entrance-demo.is-ticket-tearing
.ld-admit-ticket__split {
	animation:
		ld-ticket-split-reveal
		.72s
		cubic-bezier(.18, .78, .2, 1)
		forwards;
}


/*
 * Once the top-to-bottom reveal is complete, remove the clip-path
 * from the split wrapper entirely. Keeping clip-path: inset(0)
 * would still clip its transformed children to the original ticket
 * rectangle, making the falling pieces appear to pass behind a
 * sharp black panel.
 */
.ld-entrance-demo.is-ticket-pieces-free
.ld-admit-ticket__split {
	animation: none !important;
	opacity: 1 !important;
	clip-path: none !important;
	-webkit-clip-path: none !important;
	overflow: visible !important;
}

.ld-entrance-demo.is-ticket-tearing
.ld-admit-ticket__tear {
	animation:
		ld-ticket-tear-down
		.7s
		cubic-bezier(.18, .78, .22, 1)
		forwards;
}

.ld-entrance-demo.is-ticket-tearing
.ld-admit-ticket__piece--left {
	/*
	 * Keep the split artwork exactly aligned with the intact ticket while the
	 * top-to-bottom reveal completes. The fall begins only after the intact
	 * artwork has been removed, preventing two visible tickets at once.
	 * The shorter active duration preserves the original overall timing.
	 */
	animation:
		ld-ticket-left-tear-and-drop
		2.21s
		linear
		.74s
		forwards;
}

.ld-entrance-demo.is-ticket-tearing
.ld-admit-ticket__piece--right {
	animation:
		ld-ticket-right-tear-and-drop
		2.31s
		linear
		.74s
		forwards;
}

.ld-entrance-demo.is-ticket-tearing
.ld-pyramid-entrance__instruction {
	opacity: 0;
	transform: translate3d(-50%, 14px, 0);
}

@keyframes ld-ticket-whole-release {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes ld-ticket-split-reveal {
	0% {
		opacity: 0;
		clip-path: inset(0 0 100% 0);
		-webkit-clip-path: inset(0 0 100% 0);
	}

	6% {
		opacity: 1;
	}

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

@keyframes ld-ticket-tear-down {
	0% {
		opacity: 0;
		transform:
			translateX(-50%)
			scaleY(0);
	}

	12% {
		opacity: 1;
	}

	82% {
		opacity: .95;
		transform:
			translateX(-50%)
			scaleY(1);
	}

	100% {
		opacity: 0;
		transform:
			translateX(-50%)
			scaleY(1);
	}
}

/*
 * Both halves remain almost aligned while the split reveal
 * moves downward. They then pivot at the perforation and
 * accelerate naturally towards the bottom of the viewport.
 */
@keyframes ld-ticket-left-tear-and-drop {
	0%,
	8% {
		opacity: 1;
		transform:
			translate3d(0, 0, 0)
			rotateZ(0)
			rotateY(0);
	}

	22% {
		opacity: 1;
		transform:
			translate3d(-4px, 3px, 0)
			rotateZ(-5deg)
			rotateY(-5deg);
	}

	32% {
		opacity: 1;
		transform:
			translate3d(-11px, 11px, 0)
			rotateZ(-8deg)
			rotateY(-9deg);
	}

	44% {
		opacity: 1;
		transform:
			translate3d(-1.8vw, 7vh, 0)
			rotateZ(-4deg)
			rotateY(-11deg);
	}

	58% {
		opacity: 1;
		transform:
			translate3d(-.8vw, 22vh, 0)
			rotateZ(-13deg)
			rotateY(-7deg);
	}

	72% {
		opacity: .98;
		transform:
			translate3d(-3.4vw, 45vh, 0)
			rotateZ(-7deg)
			rotateY(-12deg);
	}

	86% {
		opacity: .72;
		transform:
			translate3d(-4.8vw, 76vh, 0)
			rotateZ(-17deg)
			rotateY(-9deg);
	}

	100% {
		opacity: 0;
		transform:
			translate3d(-7vw, 116vh, 0)
			rotateZ(-26deg)
			rotateY(-14deg);
	}
}

@keyframes ld-ticket-right-tear-and-drop {
	0%,
	8% {
		opacity: 1;
		transform:
			translate3d(0, 0, 0)
			rotateZ(0)
			rotateY(0);
	}

	22% {
		opacity: 1;
		transform:
			translate3d(4px, 4px, 0)
			rotateZ(9deg)
			rotateY(10deg);
	}

	32% {
		opacity: 1;
		transform:
			translate3d(9px, 12px, 0)
			rotateZ(14deg)
			rotateY(16deg);
	}

	45% {
		opacity: 1;
		transform:
			translate3d(1.6vw, 8vh, 0)
			rotateZ(8deg)
			rotateY(18deg);
	}

	59% {
		opacity: 1;
		transform:
			translate3d(2.8vw, 24vh, 0)
			rotateZ(20deg)
			rotateY(13deg);
	}

	73% {
		opacity: .97;
		transform:
			translate3d(4.2vw, 48vh, 0)
			rotateZ(13deg)
			rotateY(19deg);
	}

	87% {
		opacity: .68;
		transform:
			translate3d(6.4vw, 80vh, 0)
			rotateZ(28deg)
			rotateY(15deg);
	}

	100% {
		opacity: 0;
		transform:
			translate3d(9vw, 120vh, 0)
			rotateZ(39deg)
			rotateY(21deg);
	}
}


.ld-pyramid-entrance__instruction {
	position: absolute;
	z-index: 10;
	left: 50%;
	bottom: 5.5%;
	margin: 0;
	color: rgba(255, 255, 255, .82);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
	transform: translateX(-50%);
	transition:
		opacity 700ms ease,
		transform 900ms ease;
}

.ld-pyramid-entrance__instruction-mobile {
	display: none;
}


/* =========================================================
   10. OPENING AND WALK-IN STATES
   ========================================================= */

.ld-entrance-demo.is-opening .ld-pyramid-entrance__door--left {
	transform: translate3d(-113%, 0, 0);
}

.ld-entrance-demo.is-opening .ld-pyramid-entrance__door--right {
	transform: translate3d(113%, 0, 0);
}

.ld-entrance-demo.is-opening .ld-pyramid-entrance__seam {
	opacity: 0;
}

.ld-entrance-demo.is-opening .ld-pyramid-entrance__outline path {
	stroke-width: 17;
	filter:
		drop-shadow(0 0 8px rgba(255, 238, 179, 1))
		drop-shadow(0 0 25px rgba(255, 201, 40, .9))
		drop-shadow(0 0 52px rgba(255, 201, 40, .42));
}

.ld-entrance-demo.is-opening .ld-pyramid-entrance__mist {
	opacity: 0;
	transform: translate3d(0, 38px, 0) scale(1.25);
}

.ld-entrance-demo.is-opening:not(.is-ticket-tearing) .ld-admit-ticket {
	animation: none !important;
	opacity: 0 !important;
	translate: 0 42px !important;
	rotate: -8deg !important;
	scale: .82 !important;
	filter:
		drop-shadow(0 8px 8px rgba(0, 0, 0, .12))
		blur(3px) !important;
	transition:
		opacity 850ms ease,
		translate 1.2s ease,
		rotate 1.2s ease,
		scale 1.2s ease,
		filter 850ms ease;
	pointer-events: none;
}

.ld-entrance-demo.is-opening .ld-pyramid-entrance__instruction {
	opacity: 0;
	transform: translate3d(-50%, 14px, 0);
}

.ld-entrance-demo.is-opening .ld-pyramid-entrance__destination {
	opacity: 1;
	transform: translate3d(-50%, -50%, 0) scale(1);
	transition:
		opacity 1.4s ease 550ms,
		transform 1.8s ease 550ms;
}

.ld-entrance-demo.is-entering .ld-pyramid-entrance {
	transform: scale(3.75);
	filter: drop-shadow(0 48px 90px rgba(0, 0, 0, .26));
}

.ld-entrance-demo.is-entering .ld-entrance-demo__header,
.ld-entrance-demo.is-entering .ld-entrance-demo__performer-wrap,
.ld-entrance-demo.is-entering .ld-entrance-demo__quote {
	opacity: 0;
	filter: blur(8px);
}

.ld-entrance-demo.is-passing-words .ld-pyramid-entrance__destination {
	animation:
		ld-gallery-words-pass
		4.2s
		cubic-bezier(.17, .68, .18, 1)
		forwards;
}


/* =========================================================
   11. FULL-SCREEN GALLERY PREVIEW
   ========================================================= */

.ld-gallery-preview {
	position: absolute;
	z-index: 24;
	inset: 0;
	width: 100%;
	min-height: 100vh;
	min-height: 100svh;
	padding: 0;
	overflow: hidden;
	background-image: var(--ld-gallery-image-active);
	background-position: var(--ld-gallery-position);
	background-repeat: no-repeat;
	background-size: var(--ld-gallery-size);
	opacity: 0;
	clip-path: polygon(50% 7%, 80% 86%, 20% 86%);
	-webkit-clip-path: polygon(50% 7%, 80% 86%, 20% 86%);
	transform: translate3d(0, 0, 0) scale(.78);
	transform-origin: 50% 48%;
	pointer-events: none;
	will-change: transform, opacity, clip-path;
}

.ld-gallery-preview__light,
.ld-gallery-preview__vignette {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ld-gallery-preview__light {
	z-index: 1;
	opacity: .7;
	background:
		radial-gradient(
			circle at 50% 48%,
			rgba(255, 212, 92, .16),
			transparent 36%
		);
	transition:
		opacity var(--ld-follow-time) ease,
		background var(--ld-follow-time) ease;
}

.ld-gallery-preview__vignette {
	z-index: 2;
	background:
		linear-gradient(
			180deg,
			rgba(0, 0, 0, .06),
			transparent 28%,
			transparent 70%,
			rgba(0, 0, 0, .28)
		);
}

.ld-entrance-demo.is-entering .ld-gallery-preview {
	opacity: 1;
	animation:
		ld-gallery-entry
		4.6s
		cubic-bezier(.16, .72, .2, 1)
		forwards;
}

.ld-entrance-demo.is-inside-gallery .ld-gallery-preview {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	min-height: 0;
	margin: 0;
	padding: 0;
	opacity: 1;
	clip-path: inset(0);
	-webkit-clip-path: inset(0);
	transform: none;
	background-position: var(--ld-gallery-position);
	background-size: var(--ld-gallery-size);
	overflow: hidden;
	pointer-events: auto;
	z-index: 999999;
	animation: none;
	transition:
		background-position var(--ld-follow-time) var(--ld-follow-ease),
		background-size var(--ld-follow-time) var(--ld-follow-ease);
}

.ld-entrance-demo.is-inside-gallery .ld-entrance-demo__scene {
	opacity: 0;
	visibility: hidden;
	filter: blur(8px);
	transition:
		opacity 700ms ease,
		filter 700ms ease,
		visibility 0s linear 700ms;
}


/* =========================================================
   12. GUIDE CHARACTER – LD.png SINGER + STAGE LIGHTS + RESPONSIVE SCALE
   ========================================================= */

.ld-guide-layer {
	position: absolute;
	inset: 0;
	z-index: 12;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 500ms ease;
}

.ld-entrance-demo.is-guide-visible .ld-guide-layer {
	opacity: 1;
}

/*
 * Fixed focus layer. The blur value never changes; the layer
 * fades away when FOLLOW is clicked, revealing the already
 * sharp gallery beneath it.
 */
.ld-guide-layer::before {
	position: absolute;
	inset: 0;
	z-index: 1;
	content: "";
	background: rgba(7, 4, 0, .025);
	backdrop-filter: blur(5px) brightness(.92);
	-webkit-backdrop-filter: blur(5px) brightness(.92);
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.35s cubic-bezier(.2, .72, .2, 1);
	will-change: opacity;
}

.ld-entrance-demo.is-guide-visible:not(.is-following-guide)
.ld-guide-layer::before {
	opacity: 1;
}

.ld-entrance-demo.is-following-guide
.ld-guide-layer::before {
	opacity: 0;
}

/*
 * Stage-light wash behind the singer.
 * Red comes from the left, green from the right, while a
 * narrow warm-white spot briefly sweeps across him.
 */
.ld-guide-layer::after {
	position: absolute;
	z-index: 2;
	inset: -10%;
	content: "";
	background-image:
		radial-gradient(
			circle,
			rgba(255, 252, 229, .42) 0%,
			rgba(255, 243, 197, .2) 10%,
			transparent 24%
		),
		radial-gradient(
			ellipse,
			rgba(255, 37, 49, .34) 0%,
			rgba(210, 10, 28, .17) 42%,
			transparent 72%
		),
		radial-gradient(
			ellipse,
			rgba(22, 255, 105, .31) 0%,
			rgba(0, 158, 75, .16) 42%,
			transparent 72%
		),
		radial-gradient(
			ellipse,
			rgba(255, 203, 62, .16) 0%,
			transparent 70%
		);
	background-repeat: no-repeat;
	background-size:
		42% 42%,
		58% 88%,
		58% 88%,
		70% 82%;
	background-position:
		50% -70%,
		12% 48%,
		88% 48%,
		50% 52%;
	mix-blend-mode: screen;
	filter: blur(7px) brightness(.92);
	opacity: 0;
	transform: translate3d(0, 0, 0) scale(.98);
	pointer-events: none;
	transition: opacity 850ms ease;
	will-change: background-position, filter, transform, opacity;
}

.ld-entrance-demo.is-guide-visible:not(.is-following-guide)
.ld-guide-layer::after {
	opacity: .9;
	animation:
		ld-guide-stage-light-sweep
		8.4s
		ease-in-out
		infinite;
}

.ld-entrance-demo.is-following-guide
.ld-guide-layer::after {
	opacity: 0;
}

/*
 * LD.png terminates at the waist. Its image edge is therefore
 * anchored directly to the bottom of the viewport on every
 * device, so it feels like the singer continues below screen.
 */
.ld-guide,
.ld-guide:hover,
.ld-guide:focus,
.ld-guide:active,
.ld-guide:visited {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: 0;
	display: block;
	width: var(--ld-guide-width);
	min-width: min(var(--ld-guide-min-width), 88vw);
	height: auto;
	margin: 0;
	padding: 0;
	overflow: visible;
	isolation: isolate;
	color: transparent;
	background: transparent;
	background-color: transparent;
	background-image: none;
	border: 0;
	border-radius: 0;
	outline: 0;
	outline-offset: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	touch-action: manipulation;
	opacity: 0;
	transform:
		translate3d(-50%, 46px, 0)
		scale(.78);
	transform-origin: 50% 100%;
	filter:
		brightness(1.65)
		blur(20px)
		drop-shadow(-14px 0 24px rgba(255, 38, 49, 0))
		drop-shadow(14px 0 24px rgba(20, 255, 105, 0))
		drop-shadow(0 0 0 rgba(255, 214, 104, 0));
	pointer-events: none;
	transition:
		transform var(--ld-guide-arrival-time) cubic-bezier(.16, .72, .18, 1),
		filter var(--ld-guide-arrival-time) cubic-bezier(.16, .72, .18, 1),
		opacity 2.45s ease .22s;
	will-change: transform, filter, opacity;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/*
 * Pulsating coloured glow around the cut-out itself.
 * The left is red, the right is green, with a warm centre.
 */
.ld-guide::before {
	position: absolute;
	z-index: 0;
	left: 50%;
	top: 45%;
	width: 112%;
	height: 92%;
	content: "";
	border-radius: 50%;
	background-image:
		radial-gradient(
			ellipse at 29% 50%,
			rgba(255, 33, 46, .52) 0%,
			rgba(218, 7, 31, .24) 37%,
			transparent 68%
		),
		radial-gradient(
			ellipse at 71% 50%,
			rgba(24, 255, 111, .48) 0%,
			rgba(0, 166, 77, .22) 37%,
			transparent 68%
		),
		radial-gradient(
			ellipse at 50% 47%,
			rgba(255, 224, 132, .38) 0%,
			rgba(255, 190, 37, .14) 44%,
			transparent 72%
		);
	background-position: center;
	background-repeat: no-repeat;
	background-size:
		94% 94%,
		94% 94%,
		100% 100%;
	filter: blur(25px);
	opacity: 0;
	transform:
		translate(-50%, -50%)
		scale(.38);
	pointer-events: none;
	transition:
		opacity 1.45s ease,
		transform 1.9s cubic-bezier(.18, .72, .18, 1),
		filter 1.9s ease;
	will-change: background-size, opacity, transform, filter;
}

/* Gentle floor/contact shadow at the browser edge. */
.ld-guide::after {
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: .5%;
	width: 44%;
	height: 4%;
	content: "";
	border-radius: 50%;
	background:
		radial-gradient(
			ellipse at center,
			rgba(0, 0, 0, .28) 0%,
			rgba(0, 0, 0, .14) 48%,
			transparent 100%
		);
	filter: blur(9px);
	opacity: 0;
	transform:
		translateX(-50%)
		scaleX(.35);
	pointer-events: none;
	transition:
		opacity 1.5s ease .25s,
		transform 1.8s ease .25s;
}

.ld-guide__image {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	object-fit: contain;
	object-position: center bottom;
	border: 0;
	outline: 0;
	box-shadow: none;
	transform: none;
	filter: none;
	opacity: 1;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Mysterious arrival: glow forms first, then the singer clears. */
.ld-entrance-demo.is-guide-visible:not(.is-following-guide)
.ld-guide {
	opacity: 1;
	transform:
		translate3d(-50%, 0, 0)
		scale(1);
	filter:
		brightness(1.04)
		blur(0)
		drop-shadow(-16px 0 22px rgba(255, 38, 49, .38))
		drop-shadow(16px 0 22px rgba(20, 255, 105, .34))
		drop-shadow(0 0 18px rgba(255, 214, 104, .42));
	pointer-events: auto;
}

.ld-entrance-demo.is-guide-visible:not(.is-following-guide)
.ld-guide::before {
	opacity: .86;
	transform:
		translate(-50%, -50%)
		scale(1);
	filter: blur(23px);
	animation:
		ld-guide-colour-glow-pulse
		4.8s
		ease-in-out
		infinite;
}

.ld-entrance-demo.is-guide-visible:not(.is-following-guide)
.ld-guide::after {
	opacity: .28;
	transform:
		translateX(-50%)
		scaleX(1);
}

.ld-guide:focus-visible {
	outline: 3px solid rgba(255, 226, 145, .94);
	outline-offset: 7px;
	border-radius: 16px;
}

.ld-entrance-demo.is-following-guide
.ld-guide-layer {
	pointer-events: none;
}

/*
 * One smooth pass to the left. The singer stays visible for
 * most of the move, grows as the viewer approaches, becomes
 * increasingly blurred, then fades only near the edge.
 */
.ld-entrance-demo.is-following-guide
.ld-guide {
	opacity: 0;
	transform:
		translate3d(
			calc(-50% - 88vw),
			1.5vh,
			0
		)
		scale(1.78);
	filter:
		brightness(1.12)
		blur(14px)
		drop-shadow(-20px 0 30px rgba(255, 38, 49, .32))
		drop-shadow(20px 0 30px rgba(20, 255, 105, .28))
		drop-shadow(0 0 38px rgba(255, 207, 72, .4));
	pointer-events: none;
	transition:
		transform var(--ld-follow-time) var(--ld-follow-ease),
		filter var(--ld-follow-time) cubic-bezier(.2, .64, .2, 1),
		opacity .68s ease 1.72s;
}

.ld-entrance-demo.is-following-guide
.ld-guide::before {
	opacity: 0;
	transform:
		translate(-50%, -50%)
		scale(1.55);
	filter: blur(34px);
	transition:
		opacity 1.35s ease,
		transform 1.9s ease,
		filter 1.9s ease;
}

.ld-entrance-demo.is-following-guide
.ld-guide::after {
	opacity: 0;
	transform:
		translateX(-50%)
		scaleX(1.4);
	transition:
		opacity 1s ease,
		transform 1.45s ease;
}

/*
 * The untouched gallery stays sharp. Only the temporary focus
 * layer fades while the artwork pans and enlarges rightward.
 */
.ld-entrance-demo.is-following-guide
.ld-gallery-preview {
	background-position: var(--ld-gallery-follow-position);
	background-size: var(--ld-gallery-follow-size);
	filter: none;
}

.ld-entrance-demo.is-following-guide
.ld-gallery-preview__light {
	opacity: .84;
	background:
		radial-gradient(
			circle at 76% 48%,
			rgba(255, 218, 125, .22),
			rgba(255, 185, 34, .06) 38%,
			transparent 68%
		);
}

.ld-entrance-demo.is-following-guide
.ld-gallery-preview__vignette {
	filter: none;
}

.ld-gallery-preview::after {
	position: absolute;
	z-index: 40;
	inset: -8%;
	content: "";
	opacity: 0;
	pointer-events: none;
	background:
		radial-gradient(
			circle at 78% 48%,
			rgba(255, 235, 177, .78) 0%,
			rgba(255, 194, 54, .4) 22%,
			rgba(36, 20, 5, .86) 76%,
			#090603 100%
		);
	transition: opacity 780ms ease;
}

.ld-entrance-demo.is-blending-out .ld-gallery-preview::after {
	opacity: 1;
}


/* =========================================================
   13. RESET
   ========================================================= */

.ld-entrance-demo.is-resetting .ld-gallery-preview {
	animation: none;
	opacity: 0;
	clip-path: polygon(50% 7%, 80% 86%, 20% 86%);
	-webkit-clip-path: polygon(50% 7%, 80% 86%, 20% 86%);
	transform: scale(.78);
	transition:
		opacity 700ms ease,
		transform 800ms ease;
}

.ld-entrance-demo.is-resetting .ld-admit-ticket,
.ld-entrance-demo.is-resetting .ld-admit-ticket__piece,
.ld-entrance-demo.is-resetting .ld-guide {
	animation: none;
}


/* =========================================================
   14. ANIMATIONS
   ========================================================= */

@keyframes ld-background-sheen {
	0%,
	58% {
		transform: translateX(-110%);
	}

	78%,
	100% {
		transform: translateX(110%);
	}
}

@keyframes ld-performer-float {
	0%,
	100% {
		transform: translateY(0);
	}

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

@keyframes ld-mist-move {
	0%,
	100% {
		opacity: .32;
		transform: translateX(-8%) scale(1);
	}

	50% {
		opacity: .58;
		transform: translateX(12%) scale(1.22);
	}
}

@keyframes ld-ticket-silky-descent {
	0% {
		opacity: 1;
		translate: -2px -112vh;
		rotate: -8deg;
	}

	10% {
		translate: 7px -92vh;
		rotate: -6.5deg;
	}

	20% {
		translate: 10px -74vh;
		rotate: -4.5deg;
	}

	30% {
		translate: 5px -58vh;
		rotate: -3deg;
	}

	40% {
		translate: -4px -44vh;
		rotate: -3.5deg;
	}

	50% {
		translate: -9px -32vh;
		rotate: -5.5deg;
	}

	60% {
		translate: -7px -22vh;
		rotate: -6.5deg;
	}

	70% {
		translate: 0 -14vh;
		rotate: -6deg;
	}

	80% {
		translate: 5px -7vh;
		rotate: -5deg;
	}

	90% {
		translate: 2px -2.5vh;
		rotate: -4.7deg;
	}

	100% {
		opacity: 1;
		translate: 0 0;
		rotate: -5deg;
	}
}

@keyframes ld-gallery-words-pass {
	0% {
		opacity: 1;
		transform: translate3d(-50%, -50%, 0) scale(1);
	}

	42% {
		opacity: 1;
		transform: translate3d(-50%, -54%, 0) scale(2.2);
	}

	74% {
		opacity: .6;
		transform: translate3d(-50%, -64%, 0) scale(4.4);
	}

	100% {
		opacity: 0;
		transform: translate3d(-50%, -76%, 0) scale(7.8);
	}
}

@keyframes ld-gallery-entry {
	0% {
		opacity: 0;
		clip-path: polygon(50% 7%, 80% 86%, 20% 86%);
		-webkit-clip-path: polygon(50% 7%, 80% 86%, 20% 86%);
		transform: translate3d(0, 0, 0) scale(.78);
	}

	18% {
		opacity: .35;
	}

	48% {
		opacity: .9;
		clip-path: polygon(50% -15%, 108% 108%, -8% 108%);
		-webkit-clip-path: polygon(50% -15%, 108% 108%, -8% 108%);
		transform: translate3d(0, 0, 0) scale(.94);
	}

	78% {
		opacity: 1;
		clip-path: inset(0);
		-webkit-clip-path: inset(0);
		transform: translate3d(0, 0, 0) scale(1);
	}

	100% {
		opacity: 1;
		clip-path: inset(0);
		-webkit-clip-path: inset(0);
		transform: none;
	}
}



@keyframes ld-guide-colour-glow-pulse {
	0%,
	100% {
		background-size:
			92% 92%,
			92% 92%,
			100% 100%;
	}

	50% {
		background-size:
			108% 108%,
			108% 108%,
			114% 114%;
	}
}

@keyframes ld-guide-stage-light-sweep {
	0%,
	18%,
	34%,
	58%,
	74%,
	100% {
		background-position:
			50% -70%,
			12% 48%,
			88% 48%,
			50% 52%;
		filter: blur(7px) brightness(.9);
		transform: translate3d(0, 0, 0) scale(.98);
	}

	22%,
	27% {
		background-position:
			47% 4%,
			10% 45%,
			90% 46%,
			50% 50%;
		filter: blur(5px) brightness(1.15);
		transform: translate3d(-.7%, 0, 0) scale(1.01);
	}

	63%,
	68% {
		background-position:
			56% 7%,
			14% 46%,
			86% 44%,
			50% 50%;
		filter: blur(5px) brightness(1.12);
		transform: translate3d(.8%, 0, 0) scale(1.015);
	}
}


/* =========================================================
   15. TABLET
   ========================================================= */

@media (max-width: 1100px) {
	.ld-entrance-demo {
		--ld-gallery-size: 108% 100%;
		--ld-gallery-follow-size: 122% 106%;
		--ld-gallery-follow-position: 72% center;
		--ld-guide-width: min(45vw, 58dvh, 500px);
		--ld-guide-min-width: 280px;
	}

	.ld-entrance-demo__scene {
		grid-template-columns:
			minmax(190px, .7fr)
			minmax(420px, 1.3fr);
		gap: 14px;
	}

	.ld-entrance-demo__quote {
		display: none;
	}

	.ld-entrance-demo__symbol {
		width: clamp(54px, 6vw, 76px);
	}

	.ld-pyramid-entrance {
		grid-column: 2;
		width: min(64vw, 680px);
	}

	.ld-entrance-demo__performer-wrap {
		left: 16%;
		width: clamp(160px, 26vw, 310px);
	}

	.ld-admit-ticket {
		top: 59.5% !important;
		width: clamp(220px, 33vw, 310px) !important;
	}

}


/* =========================================================
   16. MOBILE
   ========================================================= */

@media (max-width: 767px) {
	.ld-entrance-demo {
		--ld-guide-arrival-time: 2.6s;
		--ld-follow-time: 2.35s;
		--ld-gallery-size: 100% 100%;
		--ld-gallery-position: 50% center;
		--ld-gallery-follow-size: 116% 106%;
		--ld-gallery-follow-position: 70% center;
		--ld-guide-width: min(72vw, 54dvh, 380px);
		--ld-guide-min-width: 220px;
	}

	.ld-entrance-demo,
	.ld-entrance-demo__scene {
		min-height: 100vh;
		min-height: 100svh;
	}

	.ld-entrance-demo__scene {
		display: block;
		padding: 22px 14px 18px;
	}

	.ld-entrance-demo__header {
		width: 100%;
		padding: 0 8px;
		text-align: center;
	}

	.ld-entrance-demo__symbol {
		width: 58px;
		margin-bottom: 12px;
	}

	.ld-entrance-demo__title {
		font-size: clamp(38px, 13vw, 59px);
		line-height: .9;
	}

	.ld-entrance-demo__intro {
		max-width: 320px;
		margin: 16px auto 0;
		font-size: 13px;
		line-height: 1.45;
	}

	.ld-pyramid-entrance {
		position: absolute;
		left: 50%;
		bottom: max(30px, env(safe-area-inset-bottom));
		width: min(96vw, 600px);
		transform: translateX(-50%);
	}

	.ld-entrance-demo__performer-wrap {
		left: -3%;
		bottom: 0;
		width: 43vw;
		max-width: 220px;
		height: 51vh;
		min-height: 360px;
	}

	.ld-admit-ticket {
		top: 60.5% !important;
		width: min(62vw, 270px) !important;
	}

	.ld-pyramid-entrance__instruction {
		bottom: 3.5%;
		font-size: 8px;
	}

	.ld-pyramid-entrance__instruction-desktop {
		display: none;
	}

	.ld-pyramid-entrance__instruction-mobile {
		display: inline;
	}

	.ld-entrance-demo.is-entering .ld-pyramid-entrance {
		transform: translateX(-50%) scale(4.35);
	}

	.ld-pyramid-entrance__destination {
		width: 74%;
	}

	.ld-pyramid-entrance__destination strong {
		font-size: clamp(18px, 6vw, 32px);
	}


	.ld-guide-layer::before {
		backdrop-filter: blur(4px) brightness(.94);
		-webkit-backdrop-filter: blur(4px) brightness(.94);
	}


	.ld-entrance-demo.is-following-guide .ld-guide {
		transform:
			translate3d(
				calc(-50% - 94vw),
				1vh,
				0
			)
			scale(1.64);
		filter:
			brightness(1.1)
			blur(11px)
			drop-shadow(-15px 0 24px rgba(255, 38, 49, .28))
			drop-shadow(15px 0 24px rgba(20, 255, 105, .24))
			drop-shadow(0 0 28px rgba(255, 207, 72, .38));
		transition:
			transform var(--ld-follow-time) var(--ld-follow-ease),
			filter var(--ld-follow-time) cubic-bezier(.2, .64, .2, 1),
			opacity .62s ease 1.6s;
	}

}


/* =========================================================
   17. SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {
	.ld-entrance-demo {
		--ld-gallery-follow-size: 112% 104%;
		--ld-gallery-follow-position: 67% center;
		--ld-guide-width: min(76vw, 50dvh, 330px);
		--ld-guide-min-width: 200px;
	}

	.ld-entrance-demo__intro {
		max-width: 280px;
	}

	.ld-pyramid-entrance {
		bottom: 5px;
		width: 108vw;
	}

	.ld-entrance-demo__performer-wrap {
		left: -7%;
		width: 47vw;
	}

	.ld-admit-ticket {
		top: 58.5% !important;
		width: min(60vw, 235px) !important;
	}

}


/* =========================================================
   19. PORTRAIT / SQUARER VIEWPORT BACKGROUND COVERAGE
   ========================================================= */

@media (max-aspect-ratio: 3 / 2) {
	.ld-entrance-demo {
		/* Show more of the gallery on squarer and portrait screens. */
		--ld-gallery-size: 102% 100%;
		--ld-gallery-follow-size: 118% 106%;
		--ld-gallery-follow-position: 70% center;
	}
}


/* =========================================================
   20. PORTRAIT PHONE GALLERY ARTWORK
   ========================================================= */

@media (max-width: 767px) and (orientation: portrait) {
	.ld-entrance-demo {
		--ld-gallery-image-active: var(--ld-gallery-image-mobile);

		/*
		 * The mobile artwork is intentionally wider than a portrait screen.
		 * It is centred at the entrance, with substantial image area held
		 * outside both viewport edges. The same image then enlarges and pans
		 * left to reveal the right-hand gallery wall when the guide is clicked.
		 * Keeping both states numeric allows a continuous camera movement.
		 */
		--ld-follow-time: 2.5s;
		--ld-gallery-size: auto 108%;
		--ld-gallery-position: 42% 50%;
		--ld-gallery-follow-size: auto 138%;
		--ld-gallery-follow-position: 77% 50%;

		/* Never expose the pale page background during the mobile pan. */
		background-color: #050505;
	}

	.ld-gallery-preview,
	.ld-pyramid-entrance__gallery {
		background-color: #050505;
	}
}


/* =========================================================
   21. SHORT / LANDSCAPE PHONE TUNING
   ========================================================= */

@media (max-height: 620px) and (orientation: landscape) {
	.ld-entrance-demo {
		--ld-gallery-size: 104% 100%;
		--ld-gallery-follow-size: 118% 104%;
		--ld-gallery-follow-position: 72% center;
		--ld-guide-width: min(34vw, 57dvh, 360px);
		--ld-guide-min-width: 210px;
	}
}


/* =========================================================
   22. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.ld-entrance-demo.is-ticket-tearing
	.ld-admit-ticket__piece--left,
	.ld-entrance-demo.is-ticket-tearing
	.ld-admit-ticket__piece--right {
		opacity: 0 !important;
		transform: translate3d(0, 110vh, 0) !important;
	}

	.ld-entrance-demo *,
	.ld-entrance-demo *::before,
	.ld-entrance-demo *::after {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.ld-admit-ticket {
		opacity: 1;
		translate: 0 0;
		rotate: -5deg;
	}

	.ld-entrance-demo.is-guide-visible:not(.is-following-guide)
	.ld-guide {
		opacity: 1;
		transform:
			translate3d(-50%, 0, 0)
			scale(1);
		filter:
			drop-shadow(0 0 16px rgba(255, 214, 104, .48));
	}

	.ld-entrance-demo.is-following-guide
	.ld-guide {
		opacity: 0;
		transform:
			translate3d(-80vw, 0, 0)
			scale(1.1);
		filter: none;
	}

	.ld-entrance-demo.is-entering .ld-gallery-preview {
		opacity: 1;
		clip-path: inset(0);
		-webkit-clip-path: inset(0);
		transform: none;
	}
}


/* =========================================================
   23. COMPACT BLACK-HOLE AUDIO CONSOLE
   ========================================================= */

.ld-audio-console-shell {
	position: fixed;
	z-index: 1000002;
	top: 10px;
	top: max(10px, env(safe-area-inset-top));
	isolation: isolate;
	perspective: 950px;
	transform-style: preserve-3d;
	left: 50%;
	width: min(680px, calc(100vw - 24px));
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(-50%, -120%, 0);
	transition:
		opacity 320ms ease,
		visibility 0s linear 900ms;
}

.ld-entrance-demo:not(.is-gallery-entry-complete) .ld-audio-console-shell {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transform: translate3d(-50%, -130%, 0) !important;
	animation: none !important;
}

.ld-audio-console-shell::before,
.ld-audio-console-shell::after {
	position: absolute;
	left: 50%;
	content: "";
	pointer-events: none;
	opacity: 0;
	transition: opacity 420ms ease;
}

.ld-audio-console-shell::before {
	top: -12px;
	width: min(70%, 420px);
	height: 28px;
	transform: translateX(-50%);
	border-radius: 0 0 26px 26px;
	background:
		linear-gradient(180deg, rgba(255, 248, 222, .18), rgba(255, 210, 78, .08) 36%, rgba(75, 198, 255, .08) 68%, transparent 100%),
		radial-gradient(ellipse at center, rgba(255, 214, 92, .28), rgba(255, 214, 92, .08) 54%, transparent 78%);
	filter: blur(4px) drop-shadow(0 0 12px rgba(255, 209, 88, .18));
}

.ld-audio-console-shell::after {
	top: -3px;
	width: min(58%, 350px);
	height: 3px;
	transform: translateX(-50%);
	border-radius: 999px;
	background: linear-gradient(90deg, transparent, rgba(164, 233, 255, .75) 18%, rgba(255, 225, 136, .95) 50%, rgba(164, 233, 255, .75) 82%, transparent);
	box-shadow: 0 0 14px rgba(164, 233, 255, .32), 0 0 18px rgba(255, 204, 77, .26);
}

.ld-entrance-demo.is-audio-console-visible.is-gallery-entry-complete .ld-audio-console-shell {
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
	animation:
		ld-audio-console-arrive 1.05s cubic-bezier(.16, .78, .22, 1) both,
		ld-audio-console-float 5.8s ease-in-out 1.05s infinite;
}

.ld-entrance-demo.is-audio-console-visible.is-gallery-entry-complete .ld-audio-console-shell::before,
.ld-entrance-demo.is-audio-console-visible.is-gallery-entry-complete .ld-audio-console-shell::after {
	opacity: 1;
}

.ld-audio-console {
	--ld-audio-gold: #f3c654;
	--ld-audio-gold-light: #fff0aa;
	--ld-audio-gold-deep: #9d6514;
	--ld-audio-progress: 0%;
	--ld-volume: 60%;

	position: relative;
	z-index: 10;
	display: grid;
	grid-template-columns: 76px auto minmax(190px, 1fr) 118px;
	align-items: center;
	width: 100%;
	min-height: 58px;
	padding: 7px 34px 7px 9px;
	gap: 9px;
	isolation: isolate;
	overflow: hidden;
	color: var(--ld-audio-gold-light);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .105), transparent 28%),
		radial-gradient(circle at 52% -58%, rgba(255, 214, 92, .15), transparent 48%),
		linear-gradient(135deg, rgba(25, 25, 25, .975), rgba(1, 1, 1, .99) 57%, rgba(18, 12, 3, .985));
	border: 1px solid rgba(255, 217, 109, .72);
	border-radius: 18px;
	box-shadow:
		0 0 0 1px rgba(92, 52, 3, .96),
		0 0 0 3px rgba(255, 203, 68, .13),
		inset 0 1px 0 rgba(255, 249, 220, .22),
		inset 0 -1px 0 rgba(255, 183, 39, .16),
		0 11px 28px rgba(0, 0, 0, .46),
		0 0 24px rgba(255, 190, 38, .11);
	transform-origin: 50% -12px;
	transition:
		opacity 440ms ease,
		transform 600ms cubic-bezier(.14, .82, .19, 1),
		filter 500ms ease,
		box-shadow 320ms ease;
	backdrop-filter: blur(16px) saturate(1.22);
	-webkit-backdrop-filter: blur(16px) saturate(1.22);
}

.ld-audio-console::before,
.ld-audio-console::after {
	position: absolute;
	content: "";
	pointer-events: none;
}

.ld-audio-console::before {
	z-index: -1;
	inset: 3px;
	border: 1px solid rgba(255, 215, 102, .19);
	border-radius: 14px;
}

.ld-audio-console::after {
	z-index: 7;
	top: 0;
	left: -42%;
	width: 28%;
	height: 100%;
	background: linear-gradient(
		100deg,
		transparent,
		rgba(255, 255, 255, .05) 38%,
		rgba(255, 229, 152, .19) 50%,
		rgba(255, 255, 255, .04) 63%,
		transparent
	);
	transform: skewX(-18deg);
	opacity: 0;
}

.ld-entrance-demo.is-audio-playing .ld-audio-console {
	box-shadow:
		0 0 0 1px rgba(92, 52, 3, .96),
		0 0 0 3px rgba(255, 203, 68, .18),
		inset 0 1px 0 rgba(255, 249, 220, .26),
		inset 0 -1px 0 rgba(255, 183, 39, .18),
		0 12px 31px rgba(0, 0, 0, .48),
		0 0 30px rgba(255, 190, 38, .2);
}

.ld-entrance-demo.is-audio-playing .ld-audio-console::after {
	opacity: 1;
	animation: ld-audio-console-sheen 6.8s ease-in-out infinite;
}

.ld-audio-console__shine {
	position: absolute;
	z-index: -1;
	inset: 0;
	background:
		radial-gradient(circle at 18% 0%, rgba(255, 243, 196, .1), transparent 27%),
		radial-gradient(circle at 82% 100%, rgba(255, 188, 35, .07), transparent 31%);
	pointer-events: none;
}

/*
 * Central plug-hole transition.
 * The complete controller compresses towards its own centre, spirals into
 * the dark portal and only then reveals the compact speaker tab.
 */
.ld-entrance-demo.is-audio-console-collapsing .ld-audio-console {
	pointer-events: none;
	animation: ld-audio-console-plughole-drain 780ms cubic-bezier(.5, .02, .2, 1) both;
}

.ld-entrance-demo.is-audio-console-collapsed .ld-audio-console {
	opacity: 0;
	pointer-events: none;
	filter: blur(7px) brightness(1.45) saturate(1.35);
	clip-path: circle(.1% at 50% 50%);
	-webkit-clip-path: circle(.1% at 50% 50%);
	transform: translate3d(0, 29px, 0) scale(.02) rotate(190deg);
}

.ld-entrance-demo.is-audio-console-expanding .ld-audio-console {
	animation: ld-audio-console-plughole-return 780ms cubic-bezier(.12, .84, .2, 1) both;
}

.ld-audio-console__suction-hole {
	position: absolute;
	z-index: 30;
	top: 50%;
	left: 50%;
	display: block;
	width: 74px;
	height: 25px;
	opacity: 0;
	pointer-events: none;
	filter: blur(.2px);
	transform: translate(-50%, -50%) scale(.15);
	transform-origin: 50% 50%;
}

.ld-audio-console__suction-orbit,
.ld-audio-console__suction-core {
	position: absolute;
	inset: 0;
	display: block;
	border-radius: 50%;
}

.ld-audio-console__suction-orbit {
	background:
		radial-gradient(ellipse at center, transparent 0 26%, rgba(255, 193, 66, .7) 31%, transparent 48%),
		conic-gradient(from 0deg, #2a0c00, #ff9f22 15%, #fff0a4 27%, #b83906 43%, #120300 56%, #ffc955 72%, #6c1d00 89%, #2a0c00);
	box-shadow:
		0 0 10px rgba(255, 135, 20, .65),
		0 0 24px rgba(255, 198, 68, .35);
}

.ld-audio-console__suction-core {
	inset: 6px 18px;
	background: radial-gradient(ellipse at center, #000 0 66%, #090300 82%, transparent 86%);
	box-shadow: inset 0 0 9px #000, 0 0 8px rgba(255, 173, 28, .25);
}

.ld-entrance-demo.is-audio-console-collapsing .ld-audio-console__suction-hole {
	animation: ld-audio-plughole-open 780ms ease-out both;
}

.ld-entrance-demo.is-audio-console-expanding .ld-audio-console__suction-hole {
	animation: ld-audio-plughole-close 780ms ease-out both;
}

.ld-entrance-demo.is-audio-console-collapsing .ld-audio-console__suction-orbit,
.ld-entrance-demo.is-audio-console-expanding .ld-audio-console__suction-orbit {
	animation: ld-blackhole-spin 420ms linear infinite;
}

.ld-audio-console__brand {
	display: grid;
	grid-template-rows: 24px auto;
	place-items: center;
	row-gap: 10px;
	min-width: 0;
	padding: 0 9px 0 2px;
	border-right: 1px solid rgba(255, 207, 76, .16);
}

/*
 * Use the official raster Lord Dancer logo, but recolour the black linework
 * into the same rich metallic gold family used across the transport panel.
 * Removing the old screen-blend approach keeps the mark bright, crisp and
 * consistently gold against the smoked-black console background.
 */
.ld-audio-console__logo {
	display: block;
	width: 30px;
	height: 24px;
	object-fit: contain;
	object-position: center;
	opacity: 1;
	mix-blend-mode: normal;
	filter:
		brightness(0)
		saturate(100%)
		invert(81%)
		sepia(61%)
		saturate(1163%)
		hue-rotate(356deg)
		brightness(101%)
		contrast(102%)
		drop-shadow(0 0 1px rgba(255, 240, 179, .95))
		drop-shadow(0 0 5px rgba(255, 196, 58, .42));
}

.ld-audio-console__album-button,
.ld-audio-console__album-button:hover,
.ld-audio-console__album-button:focus,
.ld-audio-console__album-button:active {
	min-width: 0;
	margin: 0;
	margin-top: 2px;
	padding: 1px 3px 0;
	color: rgba(255, 232, 166, .76);
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(255, 201, 56, .36) !important;
	border-radius: 0;
	box-shadow: none !important;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 6.5px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color 180ms ease, border-color 180ms ease, text-shadow 180ms ease;
}

.ld-audio-console__album-button:hover,
.ld-audio-console__album-button:focus-visible,
.ld-entrance-demo.is-audio-album-open .ld-audio-console__album-button {
	color: #fff4bd;
	border-bottom-color: #f5c64c !important;
	text-shadow: 0 0 8px rgba(255, 195, 40, .52);
	outline: 0;
}

.ld-audio-console__transport,
.ld-audio-console__volume {
	display: flex;
	align-items: center;
	gap: 5px;
}

.ld-audio-console__volume {
	justify-content: flex-end;
	min-width: 0;
	padding: 3px 2px 3px 8px;
	border-left: 1px solid rgba(255, 207, 76, .14);
	border-radius: 0 12px 12px 0;
	background: linear-gradient(90deg, rgba(255, 202, 54, .025), rgba(255, 202, 54, .055));
}

.ld-audio-console__button,
.ld-audio-console__button:hover,
.ld-audio-console__button:focus,
.ld-audio-console__button:active,
.ld-audio-console__button:visited {
	position: relative;
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	color: var(--ld-audio-gold-light);
	background:
		radial-gradient(circle at 38% 25%, rgba(255, 255, 255, .13), transparent 31%),
		linear-gradient(145deg, #181818, #020202 64%, #231300);
	border: 1px solid rgba(255, 207, 79, .74);
	border-radius: 50%;
	box-shadow:
		0 0 0 1px rgba(52, 29, 0, .9),
		inset 0 1px 1px rgba(255, 242, 196, .16),
		inset 0 -3px 7px rgba(0, 0, 0, .72),
		0 3px 8px rgba(0, 0, 0, .32),
		0 0 8px rgba(255, 186, 32, .1);
	outline: 0;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transform: translateZ(0);
	transition:
		transform 170ms ease,
		border-color 180ms ease,
		box-shadow 200ms ease,
		color 180ms ease;
}

.ld-audio-console__button--play,
.ld-audio-console__button--play:hover,
.ld-audio-console__button--play:focus,
.ld-audio-console__button--play:active {
	width: 36px;
	height: 36px;
	color: #120b02;
	background:
		radial-gradient(circle at 38% 24%, rgba(255, 255, 255, .24), transparent 29%),
		linear-gradient(145deg, #f4ce69, #b97917 56%, #623804);
	border-color: #ffe69a;
	box-shadow:
		0 0 0 1px rgba(59, 32, 0, .96),
		0 0 0 2px rgba(255, 213, 94, .4),
		inset 0 1px 1px rgba(255, 255, 255, .52),
		inset 0 -5px 9px rgba(83, 40, 0, .35),
		0 4px 10px rgba(0, 0, 0, .38),
		0 0 13px rgba(255, 190, 31, .23);
}

.ld-audio-console__button:hover {
	color: #fff7d3;
	border-color: #fff0a8;
	box-shadow:
		0 0 0 1px rgba(52, 29, 0, .9),
		inset 0 1px 1px rgba(255, 242, 196, .22),
		inset 0 -3px 7px rgba(0, 0, 0, .68),
		0 4px 11px rgba(0, 0, 0, .38),
		0 0 13px rgba(255, 194, 38, .27);
	transform: translateY(-1px) scale(1.035);
}

.ld-audio-console__button--play:hover {
	color: #080501;
}

.ld-audio-console__button:active {
	transform: translateY(1px) scale(.96);
}

.ld-audio-console__button:focus-visible,
.ld-audio-console__collapse:focus-visible,
.ld-audio-blackhole-tab:focus-visible,
.ld-audio-album-card__close:focus-visible {
	outline: 2px solid #fff2b2;
	outline-offset: 3px;
}

.ld-audio-console__button svg {
	position: absolute;
	inset: 50% auto auto 50%;
	width: 16px;
	height: 16px;
	fill: currentColor;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	transform: translate(-50%, -50%);
	filter: drop-shadow(0 0 4px rgba(255, 210, 91, .25));
	pointer-events: none;
}

.ld-audio-console__button--play svg {
	width: 19px;
	height: 19px;
}

.ld-audio-console__icon-pause,
.ld-audio-console__icon-muted {
	display: none;
}

.ld-entrance-demo.is-audio-playing .ld-audio-console__icon-play {
	display: none;
}

.ld-entrance-demo.is-audio-playing .ld-audio-console__icon-pause,
.ld-entrance-demo.is-audio-muted .ld-audio-console__icon-muted {
	display: block;
}

.ld-entrance-demo.is-audio-muted .ld-audio-console__icon-volume {
	display: none;
}

.ld-audio-console__sound-wave {
	fill: none;
}

.ld-audio-console__display {
	position: relative;
	display: grid;
	grid-template-rows: 25px 14px;
	align-items: center;
	min-width: 0;
	padding: 2px 8px 0;
	border-right: 1px solid rgba(255, 207, 76, .12);
	border-left: 1px solid rgba(255, 207, 76, .12);
	background:
		linear-gradient(180deg, rgba(255, 216, 109, .025), transparent),
		linear-gradient(90deg, transparent, rgba(255, 201, 63, .04), transparent);
}

.ld-audio-console__waveform {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	gap: 3px;
	overflow: hidden;
}

.ld-audio-console__waveform::before,
.ld-audio-console__waveform::after {
	position: absolute;
	content: "";
	pointer-events: none;
}

.ld-audio-console__waveform::before {
	z-index: -1;
	left: 7%;
	right: 7%;
	top: 50%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 208, 80, .31), transparent);
	box-shadow: 0 0 8px rgba(255, 190, 33, .16);
}

.ld-audio-console__waveform::after {
	top: 0;
	bottom: 0;
	left: -20%;
	width: 18%;
	background: linear-gradient(90deg, transparent, rgba(255, 242, 194, .32), transparent);
	opacity: 0;
}

.ld-entrance-demo.is-audio-playing .ld-audio-console__waveform::after {
	opacity: 1;
	animation: ld-audio-wave-scan 3.4s linear infinite;
}

.ld-audio-console__waveform span {
	--ld-audio-level: .25;
	--ld-audio-glow: .25;
	position: relative;
	z-index: 1;
	display: block;
	flex: 1 1 0;
	width: 3px;
	max-width: 4px;
	height: 22px;
	min-height: 3px;
	border-radius: 999px;
	background: linear-gradient(180deg, #fff6c4 0%, #f6cb59 26%, #d9911e 70%, #7e4205 100%);
	box-shadow:
		0 0 calc(2px + (7px * var(--ld-audio-glow))) rgba(255, 193, 38, calc(.18 + (.5 * var(--ld-audio-glow)))),
		inset 0 1px 0 rgba(255, 255, 255, .56);
	transform: scaleY(var(--ld-audio-level));
	transform-origin: 50% 50%;
	transition: transform 70ms linear, box-shadow 90ms linear;
	will-change: transform, box-shadow;
}

.ld-audio-console__timeline {
	display: grid;
	grid-template-columns: 30px minmax(84px, 1fr) 30px;
	align-items: center;
	gap: 5px;
	min-width: 0;
}

.ld-audio-console__timeline time {
	color: rgba(255, 231, 166, .8);
	font-family: "Courier New", Courier, monospace;
	font-size: 8px;
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
	text-align: center;
	white-space: nowrap;
}

/* Strong browser/theme reset: no white slider wells. */
.ld-audio-console input[type="range"].ld-audio-console__range,
.ld-audio-console input[type="range"].ld-audio-console__range:hover,
.ld-audio-console input[type="range"].ld-audio-console__range:focus,
.ld-audio-console input[type="range"].ld-audio-console__range:active {
	position: relative;
	display: block;
	width: 100%;
	height: 16px;
	min-height: 0;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: 0;
	-webkit-appearance: none !important;
	appearance: none !important;
	cursor: pointer;
}

.ld-audio-console__range::-webkit-slider-runnable-track {
	height: 3px;
	border: 0;
	border-radius: 999px;
	background:
		linear-gradient(
			90deg,
			var(--ld-audio-gold-light) 0%,
			var(--ld-audio-gold) var(--ld-range-fill, 0%),
			rgba(91, 64, 20, .9) var(--ld-range-fill, 0%),
			rgba(28, 22, 12, .96) 100%
		) !important;
	box-shadow:
		inset 0 1px 2px rgba(0, 0, 0, .95),
		0 0 5px rgba(255, 189, 31, .14);
}

.ld-audio-console__range::-moz-range-track {
	height: 3px;
	border: 0;
	border-radius: 999px;
	background: rgba(28, 22, 12, .96) !important;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .95);
}

.ld-audio-console__range::-moz-range-progress {
	height: 3px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--ld-audio-gold-light), var(--ld-audio-gold));
	box-shadow: 0 0 5px rgba(255, 189, 31, .2);
}

.ld-audio-console__range::-webkit-slider-thumb {
	width: 10px;
	height: 10px;
	margin-top: -3.5px;
	border: 1px solid #fff0ad;
	border-radius: 50%;
	background: radial-gradient(circle at 38% 32%, #fff9d5, #e3a52e 56%, #7e4304 100%);
	box-shadow: 0 0 0 2px rgba(67, 35, 0, .72), 0 0 7px rgba(255, 194, 37, .5);
	-webkit-appearance: none;
	appearance: none;
}

.ld-audio-console__range::-moz-range-thumb {
	width: 10px;
	height: 10px;
	border: 1px solid #fff0ad;
	border-radius: 50%;
	background: radial-gradient(circle at 38% 32%, #fff9d5, #e3a52e 56%, #7e4304 100%);
	box-shadow: 0 0 0 2px rgba(67, 35, 0, .72), 0 0 7px rgba(255, 194, 37, .5);
}

.ld-audio-console__range:focus-visible {
	outline: 2px solid #fff0a7 !important;
	outline-offset: 2px;
	border-radius: 999px !important;
}

.ld-audio-console__range--progress {
	--ld-range-fill: var(--ld-progress);
}

.ld-audio-console input[type="range"].ld-audio-console__range--volume {
	--ld-range-fill: var(--ld-volume);
	flex: 1 1 auto;
	width: 72px;
	min-width: 50px;
	max-width: 76px;
}

.ld-audio-console__button--volume {
	width: 29px;
	height: 29px;
}

.ld-audio-console__button--volume svg {
	width: 16px;
	height: 16px;
}

/*
 * Keep the original compact black-hole collapse control in the top-right of
 * the bar. The small gold chevron hangs immediately beneath it as a visual
 * hint without replacing the control itself.
 */
.ld-audio-console__collapse,
.ld-audio-console__collapse:hover,
.ld-audio-console__collapse:focus,
.ld-audio-console__collapse:active {
	position: absolute;
	z-index: 35;
	top: 5px;
	right: 6px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	color: #f6ce63;
	background:
		radial-gradient(circle at 50% 50%, #010101 0 28%, transparent 30%),
		conic-gradient(from 10deg, #7d4306, #ffe08a, #9a5607, #fff0ab, #7d4306);
	border: 1px solid rgba(255, 224, 137, .72);
	border-radius: 50%;
	box-shadow:
		0 0 0 1px #311b02,
		0 0 8px rgba(255, 190, 39, .23);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	overflow: visible;
	transform: translateZ(0);
	transition: transform 180ms ease, box-shadow 180ms ease, opacity 160ms ease;
}

.ld-audio-console__collapse::before,
.ld-audio-console__collapse::after {
	position: absolute;
	content: "";
	pointer-events: none;
}

.ld-audio-console__collapse::before {
	inset: 3px;
	border: 1px solid rgba(255, 226, 145, .72);
	border-right-color: transparent;
	border-bottom-color: rgba(119, 65, 5, .85);
	border-radius: 50%;
	animation: ld-blackhole-spin 2.3s linear infinite;
}

.ld-audio-console__collapse::after {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #000;
	box-shadow: 0 0 5px 2px rgba(255, 187, 35, .25);
}

.ld-audio-console__collapse-arrow {
	position: absolute;
	top: calc(100% + 4px);
	left: 50%;
	display: block;
	width: 11px;
	height: 8px;
	pointer-events: none;
	transform: translateX(-50%);
	animation: ld-audio-collapse-arrow-nudge 1.65s ease-in-out infinite;
}

.ld-audio-console__collapse-arrow svg {
	display: block;
	width: 11px;
	height: 8px;
	fill: none;
	stroke: #f7cf61;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 4px rgba(255, 197, 43, .72));
}

.ld-audio-console__collapse:hover,
.ld-audio-console__collapse:focus-visible {
	transform: scale(1.09);
	box-shadow:
		0 0 0 1px #311b02,
		0 0 13px rgba(255, 190, 39, .44);
}

.ld-audio-console__collapse:active {
	transform: scale(.95);
}

.ld-entrance-demo.is-audio-console-collapsing .ld-audio-console__collapse {
	opacity: 0;
	transform: translateY(8px) scale(.35);
	transition: opacity 160ms ease, transform 260ms ease;
}

/*
 * Chained album-art panel.
 * The panel begins hidden behind the transport bar, drops on two small gold
 * chains, settles into a gentle suspended swing and reverses back behind the
 * controls when it is closed.
 */
.ld-audio-album-card {
	--ld-album-x: 0%;

	position: absolute;
	z-index: 2;
	top: calc(100% + 12px);
	left: 0;
	display: grid;
	grid-template-columns: 102px minmax(82px, 1fr);
	align-items: center;
	width: 220px;
	padding: 8px;
	gap: 9px;
	isolation: isolate;
	color: #fff0b0;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 25%),
		linear-gradient(135deg, rgba(20, 20, 20, .98), rgba(2, 2, 2, .99));
	border: 1px solid rgba(255, 209, 76, .68);
	border-radius: 15px;
	box-shadow:
		0 0 0 1px rgba(75, 42, 3, .94),
		0 15px 32px rgba(0, 0, 0, .5),
		0 0 25px rgba(255, 185, 29, .14);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform:
		translateX(var(--ld-album-x))
		translateY(-136px)
		rotateZ(-10deg)
		rotateX(-24deg)
		scale(.91);
	transform-origin: 50% -42px;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	will-change: transform, opacity;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* Two longer metallic necklace-style chain runs, tucked partly behind the
 * transport bar so the album card appears to swing from it naturally. */
.ld-audio-album-card::before,
.ld-audio-album-card::after {
	position: absolute;
	z-index: 3;
	top: -50px;
	width: 12px;
	height: 56px;
	content: "";
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='14' viewBox='0 0 12 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cellipse cx='6' cy='3.9' rx='3.15' ry='3.5' stroke='%23f3c654' stroke-width='1.15'/%3E%3Cellipse cx='6' cy='9.9' rx='3.15' ry='3.5' stroke='%23fff0aa' stroke-width='1.0'/%3E%3Cpath d='M6 6.9V6.95' stroke='%23d19a2a' stroke-width='1.0'/%3E%3C/g%3E%3C/svg%3E");
	background-position: center top;
	background-repeat: repeat-y;
	background-size: 12px 14px;
	filter:
		drop-shadow(0 1px 1px rgba(0, 0, 0, .78))
		drop-shadow(0 0 4px rgba(255, 190, 39, .36));
	pointer-events: none;
}

.ld-audio-album-card::before {
	left: 22px;
}

.ld-audio-album-card::after {
	right: 22px;
}

.ld-entrance-demo.is-audio-album-open .ld-audio-album-card {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	animation:
		ld-audio-album-swing-down
		920ms
		cubic-bezier(.16, .82, .24, 1)
		both,
		ld-audio-album-gentle-swing
		4.8s
		ease-in-out
		920ms
		infinite;
}

.ld-entrance-demo.is-audio-album-closing .ld-audio-album-card {
	opacity: 1;
	visibility: visible;
	pointer-events: none;
	animation:
		ld-audio-album-swing-up
		780ms
		cubic-bezier(.55, .02, .3, 1)
		both;
}

.ld-audio-album-card__art {
	position: relative;
	z-index: 2;
	width: 102px;
	aspect-ratio: 1;
	overflow: hidden;
	border: 1px solid rgba(255, 220, 111, .66);
	border-radius: 11px;
	box-shadow: 0 0 0 2px rgba(68, 38, 3, .9), 0 7px 18px rgba(0, 0, 0, .42);
}

.ld-audio-album-card__art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ld-audio-album-card__copy {
	position: relative;
	z-index: 2;
	display: grid;
	align-content: center;
	min-width: 0;
}

.ld-audio-album-card__copy span {
	color: rgba(255, 226, 143, .6);
	font-size: 7px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.ld-audio-album-card__copy strong {
	margin-top: 5px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	line-height: 1;
	text-shadow: 0 0 12px rgba(255, 190, 35, .35);
}

.ld-audio-album-card__copy small {
	margin-top: 5px;
	color: rgba(255, 238, 190, .72);
	font-size: 9px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ld-audio-album-card__close,
.ld-audio-album-card__close:hover,
.ld-audio-album-card__close:focus,
.ld-audio-album-card__close:active {
	position: absolute;
	z-index: 5;
	top: 4px;
	right: 4px;
	display: grid;
	place-items: center;
	width: 23px;
	height: 23px;
	margin: 0;
	padding: 0;
	color: #fff0b0;
	background: rgba(4, 4, 4, .87);
	border: 1px solid rgba(255, 209, 76, .62);
	border-radius: 50%;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .34);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

@keyframes ld-audio-album-swing-down {
	0% {
		opacity: 0;
		transform:
			translateX(var(--ld-album-x))
			translateY(-136px)
			rotateZ(-10deg)
			rotateX(-24deg)
			scale(.91);
	}

	24% {
		opacity: 1;
	}

	43% {
		transform:
			translateX(var(--ld-album-x))
			translateY(9px)
			rotateZ(8deg)
			rotateX(1deg)
			scale(1);
	}

	60% {
		transform:
			translateX(var(--ld-album-x))
			translateY(-4px)
			rotateZ(-5deg)
			rotateX(0deg)
			scale(1);
	}

	74% {
		transform:
			translateX(var(--ld-album-x))
			translateY(2px)
			rotateZ(3deg)
			rotateX(0deg)
			scale(1);
	}

	87% {
		transform:
			translateX(var(--ld-album-x))
			translateY(-1px)
			rotateZ(-1.5deg)
			rotateX(0deg)
			scale(1);
	}

	100% {
		opacity: 1;
		transform:
			translateX(var(--ld-album-x))
			translateY(0)
			rotateZ(0deg)
			rotateX(0deg)
			scale(1);
	}
}

@keyframes ld-audio-album-gentle-swing {
	0%, 100% {
		transform:
			translateX(var(--ld-album-x))
			translateY(0)
			rotateZ(-1.15deg)
			rotateX(0deg)
			scale(1);
	}

	50% {
		transform:
			translateX(var(--ld-album-x))
			translateY(1.5px)
			rotateZ(1.25deg)
			rotateX(.35deg)
			scale(1);
	}
}

@keyframes ld-audio-album-swing-up {
	0% {
		opacity: 1;
		transform:
			translateX(var(--ld-album-x))
			translateY(0)
			rotateZ(0deg)
			rotateX(0deg)
			scale(1);
	}

	20% {
		transform:
			translateX(var(--ld-album-x))
			translateY(3px)
			rotateZ(4deg)
			rotateX(0deg)
			scale(1);
	}

	43% {
		transform:
			translateX(var(--ld-album-x))
			translateY(-16px)
			rotateZ(-6deg)
			rotateX(-3deg)
			scale(.99);
	}

	74% {
		opacity: 1;
		transform:
			translateX(var(--ld-album-x))
			translateY(-105px)
			rotateZ(8deg)
			rotateX(-16deg)
			scale(.95);
	}

	100% {
		opacity: 0;
		transform:
			translateX(var(--ld-album-x))
			translateY(-136px)
			rotateZ(-10deg)
			rotateX(-24deg)
			scale(.91);
	}
}

/* Collapsed black-hole speaker tab hanging from the page top. */
.ld-audio-blackhole-tab,
.ld-audio-blackhole-tab:hover,
.ld-audio-blackhole-tab:focus,
.ld-audio-blackhole-tab:active {
	position: fixed;
	z-index: 1000003;
	top: -7px;
	left: 50%;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	color: #ffe392;
	background: transparent;
	border: 0;
	border-radius: 0 0 50% 50%;
	box-shadow: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate3d(-50%, -22px, 0) scale(.28) rotate(-80deg);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition:
		opacity 260ms ease 180ms,
		transform 480ms cubic-bezier(.15, .82, .22, 1) 130ms,
		visibility 0s linear 520ms;
}

.ld-entrance-demo.is-audio-console-visible.is-audio-console-collapsed .ld-audio-blackhole-tab {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate3d(-50%, 0, 0) scale(1) rotate(0deg);
	transition-delay: 0s;
}

.ld-audio-blackhole-tab::before {
	position: absolute;
	z-index: -3;
	top: 0;
	left: 50%;
	width: 18px;
	height: 12px;
	content: "";
	background: linear-gradient(180deg, #b97b18, #4e2b03);
	border-right: 1px solid #f7cf68;
	border-left: 1px solid #f7cf68;
	transform: translateX(-50%);
}

.ld-audio-blackhole-tab__orbit,
.ld-audio-blackhole-tab__core {
	position: absolute;
	inset: 8px 3px 1px;
	border-radius: 50%;
	pointer-events: none;
}

.ld-audio-blackhole-tab__orbit {
	background:
		radial-gradient(ellipse at center, transparent 0 27%, rgba(255, 153, 38, .55) 31%, transparent 48%),
		conic-gradient(from 0deg, #3b1700, #ffb13a 18%, #fff4c1 29%, #b73d08 42%, #1a0500 55%, #ffcc62 73%, #5d1800 88%, #3b1700);
	box-shadow: 0 0 14px rgba(255, 135, 19, .55), 0 0 24px rgba(255, 196, 64, .25);
	animation: ld-blackhole-spin 2.2s linear infinite;
}

.ld-audio-blackhole-tab__core {
	inset: 15px 10px 8px;
	background: radial-gradient(circle at 46% 44%, #090909, #000 68%);
	box-shadow: inset 0 0 8px #000, 0 0 7px 2px rgba(255, 175, 37, .18);
}

.ld-audio-blackhole-tab svg {
	position: relative;
	z-index: 2;
	width: 18px;
	height: 18px;
	margin-top: 7px;
	fill: currentColor;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 4px rgba(255, 209, 93, .75));
}

.ld-audio-blackhole-tab svg path:last-child {
	fill: none;
}

.ld-audio-blackhole-tab:hover {
	filter: brightness(1.18);
	transform: translate3d(-50%, 1px, 0) scale(1.08) rotate(0deg) !important;
}

@keyframes ld-audio-console-arrive {
	0% {
		opacity: 0;
		transform: translate3d(-50%, -120%, 0);
	}

	68% {
		opacity: 1;
		transform: translate3d(-50%, 8px, 0);
	}

	100% {
		opacity: 1;
		transform: translate3d(-50%, 0, 0);
	}
}

@keyframes ld-audio-console-float {
	0%,
	100% {
		transform: translate3d(-50%, 0, 0);
	}

	50% {
		transform: translate3d(-50%, 4px, 0);
	}
}

@keyframes ld-audio-console-sheen {
	0%, 56% { left: -42%; }
	78%, 100% { left: 118%; }
}

@keyframes ld-audio-wave-scan {
	0% { left: -20%; }
	100% { left: 105%; }
}

@keyframes ld-blackhole-spin {
	to { transform: rotate(360deg); }
}

@keyframes ld-audio-collapse-arrow-nudge {
	0%, 100% { opacity: .62; transform: translateX(-50%) translateY(0); }
	50% { opacity: 1; transform: translateX(-50%) translateY(3px); }
}

@keyframes ld-audio-console-plughole-drain {
	0% {
		opacity: 1;
		filter: none;
		clip-path: inset(0 round 18px);
		-webkit-clip-path: inset(0 round 18px);
		transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
	}
	24% {
		opacity: 1;
		filter: brightness(1.08) saturate(1.08);
		clip-path: inset(4% 4% round 23px);
		-webkit-clip-path: inset(4% 4% round 23px);
		transform: translate3d(0, 5px, 0) scale(.96, .88) rotate(0deg);
	}
	52% {
		opacity: .96;
		filter: blur(.45px) brightness(1.22) saturate(1.18);
		clip-path: inset(13% 24% round 48%);
		-webkit-clip-path: inset(13% 24% round 48%);
		transform: translate3d(0, 15px, 0) scale(.72, .62) rotate(8deg);
	}
	74% {
		opacity: .72;
		filter: blur(2px) brightness(1.5) saturate(1.35);
		clip-path: inset(34% 43% round 50%);
		-webkit-clip-path: inset(34% 43% round 50%);
		transform: translate3d(0, 25px, 0) scale(.28, .28) rotate(92deg);
	}
	100% {
		opacity: 0;
		filter: blur(7px) brightness(1.45) saturate(1.35);
		clip-path: circle(.1% at 50% 50%);
		-webkit-clip-path: circle(.1% at 50% 50%);
		transform: translate3d(0, 29px, 0) scale(.02) rotate(190deg);
	}
}

@keyframes ld-audio-console-plughole-return {
	0% {
		opacity: 0;
		filter: blur(7px) brightness(1.45) saturate(1.35);
		clip-path: circle(.1% at 50% 50%);
		-webkit-clip-path: circle(.1% at 50% 50%);
		transform: translate3d(0, 29px, 0) scale(.02) rotate(-190deg);
	}
	36% {
		opacity: .72;
		filter: blur(2px) brightness(1.42) saturate(1.3);
		clip-path: inset(34% 43% round 50%);
		-webkit-clip-path: inset(34% 43% round 50%);
		transform: translate3d(0, 24px, 0) scale(.3) rotate(-86deg);
	}
	72% {
		opacity: 1;
		filter: blur(0) brightness(1.08) saturate(1.08);
		clip-path: inset(4% 4% round 23px);
		-webkit-clip-path: inset(4% 4% round 23px);
		transform: translate3d(0, 3px, 0) scale(1.015, .96) rotate(0deg);
	}
	100% {
		opacity: 1;
		filter: none;
		clip-path: inset(0 round 18px);
		-webkit-clip-path: inset(0 round 18px);
		transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
	}
}

@keyframes ld-audio-plughole-open {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(.12); }
	24% { opacity: .2; transform: translate(-50%, -50%) scale(.42); }
	58% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
	82% { opacity: 1; transform: translate(-50%, -50%) scale(.82); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(.28); }
}

@keyframes ld-audio-plughole-close {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(.28); }
	22% { opacity: 1; transform: translate(-50%, -50%) scale(.82); }
	54% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
	82% { opacity: .25; transform: translate(-50%, -50%) scale(.42); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(.12); }
}


/* =========================================================
   24. AUDIO CONSOLE – TABLET AND MOBILE
   ========================================================= */

@media (max-width: 760px) {
	.ld-audio-console-shell {
		top: 7px;
		top: max(7px, env(safe-area-inset-top));
		width: min(600px, calc(100vw - 14px));
	}

	.ld-audio-console {
		grid-template-columns: 58px auto minmax(120px, 1fr) 94px;
		min-height: 54px;
		padding: 6px 31px 6px 7px;
		gap: 6px;
		border-radius: 16px;
	}

	.ld-audio-console__brand {
		grid-template-rows: 25px auto;
		row-gap: 6px;
		padding-right: 4px;
	}

	.ld-audio-console__logo {
		width: 31px;
		height: 25px;
	}

	.ld-audio-console__album-button,
	.ld-audio-console__album-button:hover,
	.ld-audio-console__album-button:focus,
	.ld-audio-console__album-button:active {
		font-size: 5.7px;
		letter-spacing: .08em;
	}

	.ld-audio-console__button,
	.ld-audio-console__button:hover,
	.ld-audio-console__button:focus,
	.ld-audio-console__button:active {
		width: 27px;
		height: 27px;
	}

	.ld-audio-console__button--play,
	.ld-audio-console__button--play:hover,
	.ld-audio-console__button--play:focus,
	.ld-audio-console__button--play:active {
		width: 32px;
		height: 32px;
	}

	.ld-audio-console__button svg {
		width: 14px;
		height: 14px;
	}

	.ld-audio-console__button--play svg {
		width: 17px;
		height: 17px;
	}

	.ld-audio-console__display {
		grid-template-rows: 22px 13px;
		padding-right: 5px;
		padding-left: 5px;
	}

	.ld-audio-console__waveform {
		height: 21px;
		gap: 2px;
	}

	.ld-audio-console__waveform span {
		height: 19px;
	}

	.ld-audio-console__timeline {
		grid-template-columns: 25px minmax(48px, 1fr) 25px;
		gap: 3px;
	}

	.ld-audio-console__timeline time {
		font-size: 7px;
	}

	.ld-audio-console input[type="range"].ld-audio-console__range--volume {
		width: 51px;
		min-width: 38px;
	}

	.ld-audio-album-card {
		left: 0;
		width: 205px;
		grid-template-columns: 92px 1fr;
	}

	.ld-audio-album-card__art {
		width: 92px;
	}
}

@media (max-width: 520px) {
	.ld-audio-console-shell {
		width: calc(100vw - 10px);
	}

	.ld-audio-console {
		grid-template-columns: 48px auto minmax(74px, 1fr) 73px;
		padding: 5px 27px 5px 5px;
		gap: 4px;
	}

	.ld-audio-console__brand {
		grid-template-rows: 22px auto;
		row-gap: 5px;
		padding: 0 3px 0 0;
	}

	.ld-audio-console__logo {
		width: 28px;
		height: 22px;
	}

	.ld-audio-console__album-button,
	.ld-audio-console__album-button:hover,
	.ld-audio-console__album-button:focus,
	.ld-audio-console__album-button:active {
		font-size: 5px;
		letter-spacing: .04em;
	}

	.ld-audio-console__transport,
	.ld-audio-console__volume {
		gap: 3px;
	}

	.ld-audio-console__button,
	.ld-audio-console__button:hover,
	.ld-audio-console__button:focus,
	.ld-audio-console__button:active {
		width: 24px;
		height: 24px;
	}

	.ld-audio-console__button--play,
	.ld-audio-console__button--play:hover,
	.ld-audio-console__button--play:focus,
	.ld-audio-console__button--play:active {
		width: 29px;
		height: 29px;
	}

	.ld-audio-console__button svg {
		width: 12px;
		height: 12px;
	}

	.ld-audio-console__button--play svg {
		width: 15px;
		height: 15px;
	}

	.ld-audio-console__display {
		grid-template-rows: 20px 12px;
		padding-right: 3px;
		padding-left: 3px;
	}

	.ld-audio-console__waveform {
		height: 19px;
		gap: 1.5px;
	}

	.ld-audio-console__waveform span {
		height: 17px;
		max-width: 3px;
	}

	.ld-audio-console__waveform span:nth-child(2n) {
		display: none;
	}

	.ld-audio-console__timeline {
		grid-template-columns: 22px minmax(34px, 1fr) 22px;
		gap: 2px;
	}

	.ld-audio-console__timeline time {
		font-size: 6px;
	}

	.ld-audio-console__volume {
		padding-left: 4px;
	}

	.ld-audio-console__button--volume {
		width: 23px;
		height: 23px;
	}

	.ld-audio-console input[type="range"].ld-audio-console__range--volume {
		width: 37px;
		min-width: 28px;
	}

	.ld-audio-console__collapse,
	.ld-audio-console__collapse:hover,
	.ld-audio-console__collapse:focus,
	.ld-audio-console__collapse:active {
		top: 4px;
		right: 5px;
		width: 20px;
		height: 20px;
	}

	.ld-audio-console__collapse-arrow {
		top: calc(100% + 3px);
		width: 9px;
		height: 7px;
	}

	.ld-audio-console__collapse-arrow svg {
		width: 9px;
		height: 7px;
	}

	.ld-audio-album-card {
		--ld-album-x: -50%;

		left: 50%;
		grid-template-columns: 86px 1fr;
		width: 194px;
	}

	.ld-audio-album-card__art {
		width: 86px;
	}

	.ld-audio-album-card::before {
		left: 18px;
	}

	.ld-audio-album-card::after {
		right: 18px;
	}
}

@media (max-width: 380px) {
	.ld-audio-console {
		grid-template-columns: 43px auto minmax(60px, 1fr) 64px;
		gap: 3px;
	}

	.ld-audio-console__button,
	.ld-audio-console__button:hover,
	.ld-audio-console__button:focus,
	.ld-audio-console__button:active {
		width: 22px;
		height: 22px;
	}

	.ld-audio-console__button--play,
	.ld-audio-console__button--play:hover,
	.ld-audio-console__button--play:focus,
	.ld-audio-console__button--play:active {
		width: 27px;
		height: 27px;
	}

	.ld-audio-console__timeline time {
		display: none;
	}

	.ld-audio-console__timeline {
		grid-template-columns: 1fr;
	}

	.ld-audio-console input[type="range"].ld-audio-console__range--volume {
		width: 32px;
		min-width: 25px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ld-audio-console-shell,
	.ld-audio-console,
	.ld-audio-console::after,
	.ld-audio-console__waveform::after,
	.ld-audio-console__waveform span,
	.ld-audio-console__suction-hole,
	.ld-audio-console__suction-orbit,
	.ld-audio-blackhole-tab,
	.ld-audio-blackhole-tab__orbit,
	.ld-audio-album-card {
		animation: none !important;
		transition-duration: .01ms !important;
	}
}


/* =========================================================
   26. INTERACTIVE GALLERY ARTWORK HOTSPOTS
   ========================================================= */

/*
 * These transparent buttons sit precisely over interactive framed artwork.
 * JavaScript calculates their dimensions from the same source-image ratios,
 * background sizing and background positioning used by the gallery scene.
 * This keeps the click target aligned while the camera pans and zooms.
 */
.ld-gallery-track-hotspot,
.ld-gallery-track-hotspot:hover,
.ld-gallery-track-hotspot:focus,
.ld-gallery-track-hotspot:active,
.ld-gallery-track-hotspot:visited {
	position: absolute;
	z-index: 80;
	display: block;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: visible;
	color: #ffe9a1;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 2px;
	outline: 0;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	clip-path: polygon(4% 1%, 96% 6%, 96% 93%, 4% 100%);
	-webkit-clip-path: polygon(4% 1%, 96% 6%, 96% 93%, 4% 100%);
	transition:
		opacity 420ms ease,
		filter 260ms ease;
	will-change: left, top, width, height;
}

.ld-entrance-demo.is-entering .ld-gallery-preview,
.ld-entrance-demo.is-inside-gallery .ld-gallery-preview {
	pointer-events: auto;
}

.ld-entrance-demo.is-entering .ld-gallery-track-hotspot,
.ld-entrance-demo.is-passing-words .ld-gallery-track-hotspot,
.ld-entrance-demo.is-inside-gallery .ld-gallery-track-hotspot,
.ld-entrance-demo.is-inside-gallery.is-following-guide .ld-gallery-track-hotspot,
.ld-entrance-demo.is-inside-gallery.is-gallery-ready .ld-gallery-track-hotspot {
	opacity: 1;
	visibility: visible;
	pointer-events: auto !important;
}

/* Keep the artwork interactive throughout the live gallery pan and zoom.
 * JavaScript follows the rendered background every frame, while this high
 * layer prevents the guide and decorative foreground from stealing taps. */

.ld-gallery-track-hotspot::before {
	position: absolute;
	inset: -2px;
	content: "";
	border: 1px solid rgba(255, 213, 91, .72);
	border-radius: 4px;
	box-shadow:
		inset 0 0 0 1px rgba(52, 29, 2, .45),
		0 0 10px rgba(255, 186, 28, .18),
		0 0 26px rgba(255, 169, 11, .10);
	opacity: 0;
	transform: scale(.992);
	transition: opacity 220ms ease, transform 260ms ease, box-shadow 280ms ease;
	pointer-events: none;
}

.ld-gallery-track-hotspot:hover::before,
.ld-gallery-track-hotspot:focus-visible::before {
	opacity: .18;
	transform: scale(1);
}

.ld-gallery-track-hotspot.is-active-track::before,
.ld-gallery-track-hotspot.is-smoke-triggered::before {
	opacity: .62;
	transform: scale(1.003);
	animation: ld-gallery-active-frame-pulse 2.35s ease-in-out infinite;
}

.ld-gallery-track-hotspot__label,
.ld-gallery-track-hotspot__play {
	display: none !important;
}

.ld-gallery-track-hotspot::after {
	position: absolute;
	left: 50%;
	top: 42%;
	content: attr(data-track-title);
	padding: 0;
	color: rgba(255, 242, 210, 0);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(14px, 1.4vw, 20px);
	font-style: italic;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: none;
	white-space: nowrap;
	text-shadow:
		0 0 10px rgba(255, 229, 176, 0),
		0 0 22px rgba(255, 194, 94, 0);
	filter: blur(1px);
	opacity: 0;
	transform: translate(-50%, 0) scale(.94);
	pointer-events: none;
	mix-blend-mode: screen;
}

.ld-gallery-track-hotspot.is-smoke-triggered::after {
	animation: ld-gallery-smoke-word 1.85s ease-out forwards;
}

.ld-gallery-track-hotspot:focus-visible {
	outline: 2px solid rgba(255, 224, 128, .96) !important;
	outline-offset: 4px;
}

@keyframes ld-gallery-smoke-word {
	0% {
		opacity: 0;
		color: rgba(255, 242, 210, 0);
		text-shadow: 0 0 0 rgba(255, 229, 176, 0), 0 0 0 rgba(255, 194, 94, 0);
		filter: blur(3px);
		transform: translate(-50%, 6px) scale(.88);
	}

	18% {
		opacity: .92;
		color: rgba(255, 244, 219, .95);
		text-shadow: 0 0 12px rgba(255, 229, 176, .32), 0 0 24px rgba(255, 194, 94, .18);
		filter: blur(1.5px);
		transform: translate(-50%, -2px) scale(1);
	}

	60% {
		opacity: .72;
		color: rgba(255, 244, 219, .62);
		text-shadow: 0 0 14px rgba(255, 229, 176, .26), 0 0 28px rgba(255, 194, 94, .12);
		filter: blur(2.4px);
		transform: translate(-50%, -24px) scale(1.08);
	}

	100% {
		opacity: 0;
		color: rgba(255, 244, 219, 0);
		text-shadow: 0 0 16px rgba(255, 229, 176, 0), 0 0 34px rgba(255, 194, 94, 0);
		filter: blur(4px);
		transform: translate(-50%, -42px) scale(1.12);
	}
}

@keyframes ld-gallery-active-frame-pulse {
	0%, 100% {
		filter: brightness(.88);
		box-shadow:
			inset 0 0 0 1px rgba(52, 29, 2, .55),
			0 0 9px rgba(255, 186, 28, .22),
			0 0 20px rgba(255, 169, 11, .12);
	}
	50% {
		filter: brightness(1.15);
		box-shadow:
			inset 0 0 0 1px rgba(52, 29, 2, .55),
			0 0 16px rgba(255, 201, 63, .42),
			0 0 34px rgba(255, 169, 11, .23);
	}
}

@media (max-width: 767px) and (orientation: portrait) {
	.ld-gallery-track-hotspot::after {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ld-gallery-track-hotspot,
	.ld-gallery-track-hotspot::before,
	.ld-gallery-track-hotspot::after {
		transition-duration: 1ms !important;
		animation: none !important;
	}
}


/* Final hotspot interaction lock: invisible click target, hand cursor only. */
.ld-gallery-track-hotspot,
.ld-gallery-track-hotspot:hover,
.ld-gallery-track-hotspot:focus,
.ld-gallery-track-hotspot:active {
	cursor: pointer !important;
	touch-action: manipulation;
}

.ld-gallery-track-hotspot__label,
.ld-gallery-track-hotspot__play {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* =========================================================
   27. FINAL SMALL-SCREEN ENTRANCE TEXT SAFETY

   Keeps the title and introductory wording physically separate
   from the pyramid on compact portrait and short landscape screens.
   ========================================================= */

@media (max-width: 1100px) {
	.ld-entrance-demo__header,
	.ld-entrance-demo__title,
	.ld-entrance-demo__intro {
		max-width: 100%;
		min-width: 0;
	}

	.ld-entrance-demo__title,
	.ld-entrance-demo__intro {
		text-wrap: balance;
	}
}

@media (max-width: 767px) {
	.ld-entrance-demo__scene {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr);
		align-items: stretch;
		width: 100%;
		min-height: 100vh;
		min-height: 100svh;
		padding:
			max(10px, env(safe-area-inset-top))
			10px
			max(8px, env(safe-area-inset-bottom));
		gap: clamp(6px, 1.6svh, 14px);
	}

	.ld-entrance-demo__header {
		position: relative;
		z-index: 40;
		grid-column: 1;
		grid-row: 1;
		align-self: start;
		width: 100%;
		margin: 0;
		padding: 0 4px;
		text-align: center;
	}

	.ld-entrance-demo__symbol {
		width: clamp(38px, 10vw, 52px);
		margin-bottom: clamp(4px, 1svh, 8px);
	}

	.ld-entrance-demo__title {
		width: 100%;
		margin: 0;
		font-size: clamp(30px, 10.8vw, 50px);
		line-height: .9;
		letter-spacing: -.055em;
		white-space: nowrap;
	}

	.ld-entrance-demo__intro {
		width: auto;
		max-width: min(88vw, 320px);
		margin: clamp(6px, 1.3svh, 11px) auto 0;
		font-size: clamp(11px, 3.15vw, 13px);
		line-height: 1.35;
	}

	.ld-pyramid-entrance {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		grid-column: 1;
		grid-row: 2;
		align-self: end;
		justify-self: center;
		width: min(98vw, calc(100vh - 150px), 600px);
		width: min(98vw, calc(100svh - 150px), 600px);
		max-width: 100%;
		margin: 0;
		transform: none;
	}

	.ld-entrance-demo.is-entering .ld-pyramid-entrance {
		transform: scale(4.35);
	}

	.ld-entrance-demo__performer-wrap {
		left: -2%;
		bottom: 0;
		width: min(39vw, 180px);
		max-width: 180px;
		height: min(47vh, 340px);
		height: min(47svh, 340px);
		min-height: 0;
	}
}

@media (max-width: 360px) and (orientation: portrait) {
	.ld-entrance-demo__scene {
		padding:
			max(8px, env(safe-area-inset-top))
			7px
			max(5px, env(safe-area-inset-bottom));
		gap: 4px;
	}

	.ld-entrance-demo__symbol {
		width: 36px;
		margin-bottom: 3px;
	}

	.ld-entrance-demo__title {
		font-size: clamp(28px, 10.2vw, 36px);
	}

	.ld-entrance-demo__intro {
		max-width: 270px;
		margin-top: 5px;
		font-size: 10.5px;
		line-height: 1.3;
	}

	.ld-pyramid-entrance {
		width: min(100vw, calc(100vh - 128px), 480px);
		width: min(100vw, calc(100svh - 128px), 480px);
	}

	.ld-entrance-demo__performer-wrap {
		left: -3%;
		width: 34vw;
		height: 38vh;
		height: 38svh;
		min-height: 0;
	}
}

@media
	(max-width: 1100px)
	and (max-height: 620px)
	and (orientation: landscape) {

	.ld-entrance-demo__scene {
		display: grid;
		grid-template-columns: minmax(155px, .72fr) minmax(0, 1.28fr);
		grid-template-rows: minmax(0, 1fr);
		align-items: center;
		width: 100%;
		min-height: 100vh;
		min-height: 100svh;
		padding:
			max(10px, env(safe-area-inset-top))
			clamp(12px, 3vw, 34px)
			max(10px, env(safe-area-inset-bottom));
		gap: clamp(10px, 2.5vw, 30px);
	}

	.ld-entrance-demo__header {
		position: relative;
		z-index: 40;
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		width: 100%;
		max-width: 360px;
		margin: 0;
		padding: 0;
		text-align: left;
	}

	.ld-entrance-demo__symbol {
		width: clamp(34px, 6.5vh, 48px);
		margin-bottom: clamp(4px, 1.2vh, 7px);
	}

	.ld-entrance-demo__title {
		width: 100%;
		margin: 0;
		font-size: clamp(30px, 7.8vh, 48px);
		line-height: .88;
		white-space: normal;
	}

	.ld-entrance-demo__intro {
		width: 100%;
		max-width: 320px;
		margin: clamp(7px, 2vh, 12px) 0 0;
		font-size: clamp(10px, 2.5vh, 13px);
		line-height: 1.35;
	}

	.ld-pyramid-entrance {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		grid-column: 2;
		grid-row: 1;
		align-self: center;
		justify-self: center;
		width: min(55vw, calc(100vh - 24px), 560px);
		width: min(55vw, calc(100svh - 24px), 560px);
		max-width: 100%;
		margin: 0;
		transform: none;
	}

	.ld-entrance-demo.is-entering .ld-pyramid-entrance {
		transform: scale(3.75);
	}

	.ld-entrance-demo__performer-wrap {
		left: 36%;
		bottom: 0;
		width: min(18vw, 160px);
		height: min(68vh, 340px);
		height: min(68svh, 340px);
		min-height: 0;
	}
}


/* =========================================================
   28. GALLERY SIGN AND RIGHT-SIDE CONTINUE AREA

   The singer remains visual only. The larger sign and the clear
   right-hand side of the gallery both start the same transition.
   The sign slides in once, settles on the floor and stays still.
   ========================================================= */

/* The guide character is deliberately non-interactive. */
.ld-guide,
.ld-guide:hover,
.ld-guide:focus,
.ld-guide:active,
.ld-guide:visited {
	left: 43%;
	cursor: default;
	pointer-events: none !important;
	user-select: none;
}

.ld-guide:focus-visible {
	outline: 0;
}

/*
 * Invisible pointer target over the open right-hand side of the scene.
 * It sits below the visible sign so the sign remains the obvious control.
 */
.ld-gallery-right-trigger,
.ld-gallery-right-trigger:hover,
.ld-gallery-right-trigger:focus,
.ld-gallery-right-trigger:active {
	position: absolute;
	z-index: 4;
	top: 0;
	right: 0;
	bottom: 0;
	display: block;
	width: 38%;
	min-width: 220px;
	margin: 0;
	padding: 0;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	outline: 0;
	opacity: 0;
	visibility: hidden;
	cursor: pointer;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.ld-entrance-demo.is-guide-visible:not(.is-following-guide)
.ld-gallery-right-trigger {
	visibility: visible;
	pointer-events: auto;
}

.ld-entrance-demo.is-following-guide
.ld-gallery-right-trigger {
	visibility: hidden;
	pointer-events: none;
}

.ld-take-my-hand,
.ld-take-my-hand:hover,
.ld-take-my-hand:focus,
.ld-take-my-hand:active,
.ld-take-my-hand:visited {
	position: absolute;
	z-index: 5;
	right: -18px;
	right: max(-1.8vw, -18px);
	bottom: -7px;
	bottom: max(-1vh, calc(env(safe-area-inset-bottom) - 7px));
	display: block;
	width: min(clamp(300px, 34vw, 560px), 58dvh);
	height: auto;
	aspect-ratio: 1000 / 1077;
	margin: 0;
	padding: 0;
	overflow: visible;
	color: transparent;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	outline: 0;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	touch-action: manipulation;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(116%, 0, 0) scale(.97);
	transform-origin: 100% 82%;
	filter:
		drop-shadow(0 22px 30px rgba(0, 0, 0, .48))
		drop-shadow(0 0 0 rgba(255, 207, 72, 0));
	pointer-events: none;
	animation: none !important;
	transition:
		transform 1.15s cubic-bezier(.16, .78, .2, 1),
		opacity .72s ease,
		visibility 0s linear 1.15s,
		filter .26s ease;
	will-change: transform, opacity, filter;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.ld-take-my-hand__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: contain;
	object-position: right bottom;
	border: 0;
	outline: 0;
	box-shadow: none;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

/* Slide in from the right, stop with the sleeve naturally crossing the edge. */
.ld-entrance-demo.is-guide-visible:not(.is-following-guide)
.ld-take-my-hand {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 0, 0) scale(1);
	filter:
		drop-shadow(0 22px 30px rgba(0, 0, 0, .48))
		drop-shadow(0 0 18px rgba(255, 202, 53, .24));
	pointer-events: auto;
	animation: none !important;
	transition-delay: .75s, .75s, 0s, 0s;
}

/* Hover strengthens the invitation without making the hand float or wobble. */
.ld-entrance-demo.is-guide-visible:not(.is-following-guide)
.ld-take-my-hand:hover {
	transform: translate3d(0, 0, 0) scale(1);
	filter:
		drop-shadow(0 24px 34px rgba(0, 0, 0, .52))
		drop-shadow(0 0 28px rgba(255, 211, 86, .48));
}

.ld-take-my-hand:focus-visible {
	outline: 3px solid rgba(255, 232, 157, .96);
	outline-offset: 6px;
	transform: translate3d(0, 0, 0) scale(1);
	filter:
		drop-shadow(0 24px 34px rgba(0, 0, 0, .52))
		drop-shadow(0 0 30px rgba(255, 211, 86, .56));
}

.ld-take-my-hand:active {
	transform: translate3d(0, 0, 0) scale(.985) !important;
}

.ld-take-my-hand:disabled {
	cursor: default;
}

/* The hand begins retracting immediately. The camera blend starts while this
 * movement is still visible, so the ending feels like one joined motion. */
.ld-entrance-demo.is-following-guide
.ld-take-my-hand {
	opacity: 0;
	visibility: visible;
	transform: translate3d(122%, 0, 0) scale(.985);
	filter:
		brightness(1.03)
		blur(5px)
		drop-shadow(0 20px 28px rgba(0, 0, 0, .4));
	pointer-events: none;
	animation: none !important;
	transition:
		transform 1.25s cubic-bezier(.2, .64, .2, 1),
		filter 1.25s cubic-bezier(.2, .64, .2, 1),
		opacity .5s ease .7s,
		visibility 0s linear 1.25s;
}

/* =========================================================
   29. ENTRANCE-TO-GALLERY PAGE BLEND

   The hand-off now uses two stacked background layers:
   1. an exact frozen copy of the current entrance frame;
   2. the matching turned-gallery frame.

   The layers overlap through a .9-second motion-blurred
   cross-dissolve, followed immediately by another 1.05 seconds
   of gentle zooming and rightward movement. There is no hard
   image replacement between the two camera moves.
   ========================================================= */

.ld-gallery-transition-stage {
	--ld-turn-blend-position: 61% 50%;
	--ld-turn-blend-size: 118% auto;
	--ld-turn-mid-position: 63.5% 50%;
	--ld-turn-mid-size: 121% auto;
	--ld-turn-final-position: 66% 50%;
	--ld-turn-final-size: 126% auto;
	--ld-turn-wait-position: 68% 50%;
	--ld-turn-wait-size: 129% auto;

	position: absolute;
	z-index: 10;
	inset: 0;
	display: block;
	overflow: hidden;
	background: #050301;
	opacity: 0;
	pointer-events: none;
	transition: opacity 120ms linear;
	will-change: opacity;
}

.ld-gallery-transition-stage::before,
.ld-gallery-transition-stage::after {
	position: absolute;
	inset: 0;
	content: "";
	background-color: #050301;
	background-position:
		var(--ld-transition-outgoing-position, var(--ld-gallery-follow-position));
	background-repeat: no-repeat;
	background-size:
		var(--ld-transition-outgoing-size, var(--ld-gallery-follow-size));
	transform-origin: 58% 50%;
	pointer-events: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	will-change:
		opacity,
		transform,
		filter,
		background-position,
		background-size;
}

/* Exact outgoing frame captured by JavaScript at hand-off time. */
.ld-gallery-transition-stage::before {
	z-index: 1;
	background-image: var(--ld-gallery-image-active);
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
	filter: blur(0) brightness(1) saturate(1);
}

/* Incoming turned-gallery frame starts hidden beneath the outgoing copy. */
.ld-gallery-transition-stage::after {
	z-index: 2;
	background-image: var(--ld-gallery-turn-image-desktop);
	opacity: 0;
	transform: translate3d(.35%, 0, 0) scale(1.018);
	filter: blur(16px) brightness(.9) saturate(.92);
}

/* The stage can appear almost instantly because its first visible layer is
 * a pixel-matched copy of the live background underneath it. */
.ld-entrance-demo.is-gallery-transitioning
.ld-gallery-transition-stage {
	opacity: 1;
}

.ld-entrance-demo.is-gallery-transitioning
.ld-gallery-transition-stage::before {
	animation:
		ld-gallery-outgoing-frame-dissolve
		.9s
		cubic-bezier(.22, .62, .2, 1)
		forwards;
}

/* One continuous 1.95-second camera move:
 * 0–.9s   = blurred cross-dissolve;
 * .9–1.95s = continued zoom and turn. */
.ld-entrance-demo.is-gallery-transitioning
.ld-gallery-transition-stage::after {
	animation:
		ld-gallery-incoming-frame-flow
		1.95s
		linear
		forwards;
}

.ld-entrance-demo.is-gallery-final-move
.ld-gallery-transition-stage::before {
	opacity: 0;
}

/* Disable entrance artwork controls as soon as travel begins. */
.ld-entrance-demo.is-following-guide
.ld-gallery-track-hotspot {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* On a slow connection the completed turned frame continues a nearly
 * imperceptible drift instead of freezing while the remaining assets load. */
.ld-entrance-demo.is-waiting-for-gallery-assets
.ld-gallery-transition-stage::after {
	opacity: 1;
	filter: blur(0) brightness(1.025) saturate(1.055);
	animation:
		ld-gallery-assets-wait-drift
		8s
		ease-in-out
		infinite
		alternate;
}

.ld-entrance-demo.is-gallery-ready
.ld-gallery-transition-stage::after {
	opacity: 1;
	background-position: var(--ld-turn-final-position);
	background-size: var(--ld-turn-final-size);
	transform: translate3d(-1.2%, 0, 0) scale(1.055);
	filter: blur(0) brightness(1.03) saturate(1.06);
}

@keyframes ld-gallery-outgoing-frame-dissolve {
	0%,
	12% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
		filter: blur(0) brightness(1) saturate(1);
	}

	48% {
		opacity: .84;
		transform: translate3d(-.25%, 0, 0) scale(1.012);
		filter: blur(1.5px) brightness(.995) saturate(1.01);
	}

	78% {
		opacity: .28;
		transform: translate3d(-.7%, 0, 0) scale(1.03);
		filter: blur(5px) brightness(.97) saturate(.98);
	}

	100% {
		opacity: 0;
		transform: translate3d(-1%, 0, 0) scale(1.045);
		filter: blur(9px) brightness(.94) saturate(.94);
	}
}

@keyframes ld-gallery-incoming-frame-flow {
	0% {
		opacity: 0;
		background-position:
			var(--ld-transition-outgoing-position, var(--ld-gallery-follow-position));
		background-size:
			var(--ld-transition-outgoing-size, var(--ld-gallery-follow-size));
		transform: translate3d(.35%, 0, 0) scale(1.018);
		filter: blur(16px) brightness(.9) saturate(.92);
	}

	8% {
		opacity: .06;
	}

	24% {
		opacity: .32;
		filter: blur(10px) brightness(.94) saturate(.97);
	}

	39% {
		opacity: .76;
		filter: blur(4px) brightness(.985) saturate(1.025);
	}

	46.154% {
		opacity: 1;
		background-position: var(--ld-turn-blend-position);
		background-size: var(--ld-turn-blend-size);
		transform: translate3d(0, 0, 0) scale(1.025);
		filter: blur(0) brightness(1) saturate(1.04);
	}

	72% {
		opacity: 1;
		background-position: var(--ld-turn-mid-position);
		background-size: var(--ld-turn-mid-size);
		transform: translate3d(-.55%, 0, 0) scale(1.038);
		filter: blur(0) brightness(1.015) saturate(1.05);
	}

	100% {
		opacity: 1;
		background-position: var(--ld-turn-final-position);
		background-size: var(--ld-turn-final-size);
		transform: translate3d(-1.2%, 0, 0) scale(1.055);
		filter: blur(0) brightness(1.025) saturate(1.055);
	}
}

@keyframes ld-gallery-assets-wait-drift {
	from {
		background-position: var(--ld-turn-final-position);
		background-size: var(--ld-turn-final-size);
		transform: translate3d(-1.2%, 0, 0) scale(1.055);
	}

	to {
		background-position: var(--ld-turn-wait-position);
		background-size: var(--ld-turn-wait-size);
		transform: translate3d(-1.7%, -.2%, 0) scale(1.07);
	}
}


/* The Take My Hand artwork is deliberately restrained so it remains an
 * invitation rather than covering the gallery scene. Its size now steps down
 * progressively on tablets, portrait phones, very small phones and short
 * landscape screens while preserving a generous clickable area. */

/* =========================================================
   30. RESPONSIVE HAND AND TRANSITION TUNING
   ========================================================= */

@media (max-width: 1100px) {
	.ld-guide,
	.ld-guide:hover,
	.ld-guide:focus,
	.ld-guide:active,
	.ld-guide:visited {
		left: 41%;
	}

	.ld-gallery-right-trigger,
	.ld-gallery-right-trigger:hover,
	.ld-gallery-right-trigger:focus,
	.ld-gallery-right-trigger:active {
		width: 40%;
		min-width: 190px;
	}

	.ld-take-my-hand,
	.ld-take-my-hand:hover,
	.ld-take-my-hand:focus,
	.ld-take-my-hand:active,
	.ld-take-my-hand:visited {
		right: max(-2.4vw, -20px);
		width: min(clamp(270px, 40vw, 500px), 56dvh);
	}
}

@media (max-width: 767px) {
	.ld-guide,
	.ld-guide:hover,
	.ld-guide:focus,
	.ld-guide:active,
	.ld-guide:visited {
		left: 38%;
	}

	.ld-gallery-right-trigger,
	.ld-gallery-right-trigger:hover,
	.ld-gallery-right-trigger:focus,
	.ld-gallery-right-trigger:active {
		width: 30%;
		min-width: 0;
	}

	.ld-take-my-hand,
	.ld-take-my-hand:hover,
	.ld-take-my-hand:focus,
	.ld-take-my-hand:active,
	.ld-take-my-hand:visited {
		right: max(-5vw, -22px);
		bottom: max(-.65vh, calc(env(safe-area-inset-bottom) - 5px));
		width: min(clamp(190px, 60vw, 360px), 48dvh);
	}

	.ld-entrance-demo.is-following-guide
	.ld-take-my-hand {
		transform: translate3d(124%, 0, 0) scale(.985);
		filter: none;
		transition:
			transform 1.15s cubic-bezier(.2, .64, .2, 1),
			opacity .46s ease .62s,
			visibility 0s linear 1.15s;
	}

	.ld-gallery-transition-stage {
		--ld-turn-blend-position: 60% 50%;
		--ld-turn-blend-size: auto 128%;
		--ld-turn-mid-position: 64% 50%;
		--ld-turn-mid-size: auto 135%;
		--ld-turn-final-position: 68% 50%;
		--ld-turn-final-size: auto 142%;
		--ld-turn-wait-position: 70% 50%;
		--ld-turn-wait-size: auto 145%;
	}

	.ld-gallery-transition-stage::after {
		background-image: var(--ld-gallery-turn-image-mobile);
		transform-origin: 66% 50%;
	}
}

@media (max-width: 420px) {
	.ld-guide,
	.ld-guide:hover,
	.ld-guide:focus,
	.ld-guide:active,
	.ld-guide:visited {
		left: 36%;
	}

	.ld-take-my-hand,
	.ld-take-my-hand:hover,
	.ld-take-my-hand:focus,
	.ld-take-my-hand:active,
	.ld-take-my-hand:visited {
		right: max(-5.5vw, -22px);
		width: min(clamp(170px, 56vw, 245px), 44dvh);
	}
}

@media (max-height: 620px) and (orientation: landscape) {
	.ld-guide,
	.ld-guide:hover,
	.ld-guide:focus,
	.ld-guide:active,
	.ld-guide:visited {
		left: 42%;
	}

	.ld-gallery-right-trigger,
	.ld-gallery-right-trigger:hover,
	.ld-gallery-right-trigger:focus,
	.ld-gallery-right-trigger:active {
		width: 38%;
	}

	.ld-take-my-hand,
	.ld-take-my-hand:hover,
	.ld-take-my-hand:focus,
	.ld-take-my-hand:active,
	.ld-take-my-hand:visited {
		right: max(-2.5vw, -18px);
		width: min(clamp(210px, 34vw, 390px), 65dvh);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ld-take-my-hand,
	.ld-take-my-hand:hover,
	.ld-take-my-hand:focus,
	.ld-take-my-hand:active,
	.ld-gallery-transition-stage,
	.ld-gallery-transition-stage::before,
	.ld-gallery-transition-stage::after {
		animation: none !important;
		transition-duration: .01ms !important;
	}

	.ld-entrance-demo.is-following-guide
	.ld-take-my-hand {
		opacity: 0;
		transform: translate3d(122%, 0, 0) scale(.985);
		filter: none;
	}

	.ld-entrance-demo.is-gallery-transitioning
	.ld-gallery-transition-stage {
		opacity: 1;
	}

	.ld-entrance-demo.is-gallery-transitioning
	.ld-gallery-transition-stage::before,
	.ld-entrance-demo.is-gallery-final-move
	.ld-gallery-transition-stage::before {
		opacity: 0;
	}

	.ld-entrance-demo.is-gallery-transitioning
	.ld-gallery-transition-stage::after,
	.ld-entrance-demo.is-gallery-final-move
	.ld-gallery-transition-stage::after {
		opacity: 1;
		background-position: var(--ld-turn-final-position);
		background-size: var(--ld-turn-final-size);
		transform: none;
		filter: none;
	}
}

/* =========================================================
   31. ADAPTIVE PERFORMANCE AND OLDER-PHONE PROTECTION

   JavaScript adds .is-performance-lite only when the browser reports
   constrained memory/CPU, Save-Data, reduced motion, or a dense small
   viewport. The full design remains on capable devices.

   Test overrides:
   ?ld_performance=lite
   ?ld_performance=full
   ========================================================= */

/*
 * Persistent will-change declarations keep large compositor surfaces alive.
 * Allocate them only while the relevant movement is actually taking place.
 */
.ld-pyramid-entrance,
.ld-pyramid-entrance__door,
.ld-pyramid-entrance__destination,
.ld-gallery-preview,
.ld-guide-layer::before,
.ld-guide-layer::after,
.ld-guide,
.ld-guide::before,
.ld-take-my-hand,
.ld-gallery-transition-stage,
.ld-gallery-transition-stage::before,
.ld-gallery-transition-stage::after,
.ld-audio-console__waveform span {
	will-change: auto !important;
}

.ld-entrance-demo.is-opening .ld-pyramid-entrance__door,
.ld-entrance-demo.is-entering .ld-pyramid-entrance,
.ld-entrance-demo.is-entering .ld-gallery-preview,
.ld-entrance-demo.is-guide-visible .ld-guide,
.ld-entrance-demo.is-guide-visible .ld-take-my-hand,
.ld-entrance-demo.is-following-guide .ld-guide,
.ld-entrance-demo.is-following-guide .ld-take-my-hand,
.ld-entrance-demo.is-audio-playing .ld-audio-console__waveform span {
	will-change: transform, opacity, filter !important;
}

.ld-entrance-demo.is-guide-visible .ld-guide-layer::before {
	will-change: opacity !important;
}

.ld-entrance-demo.is-guide-visible .ld-guide-layer::after {
	will-change: background-position, transform, opacity, filter !important;
}

.ld-entrance-demo.is-following-guide .ld-gallery-preview {
	will-change: background-position, background-size !important;
}

.ld-entrance-demo.is-gallery-transitioning .ld-gallery-transition-stage {
	will-change: opacity !important;
}

.ld-entrance-demo.is-gallery-transitioning .ld-gallery-transition-stage::before,
.ld-entrance-demo.is-gallery-transitioning .ld-gallery-transition-stage::after {
	will-change:
		opacity,
		transform,
		filter,
		background-position,
		background-size !important;
}

.ld-entrance-demo.is-performance-lite.is-gallery-transitioning
.ld-gallery-transition-stage::before,
.ld-entrance-demo.is-performance-lite.is-gallery-transitioning
.ld-gallery-transition-stage::after {
	will-change: opacity, transform !important;
}

/*
 * Mobile browsers have a much smaller compositor budget. The visual result
 * stays the same, but full-screen backdrop blur and animated blur are removed.
 */
@media (max-width: 767px) {
	.ld-guide-layer::before {
		background: rgba(7, 4, 0, .13);
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}

	.ld-audio-console,
	.ld-audio-album-card {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}

	.ld-entrance-demo.is-entering .ld-pyramid-entrance {
		filter: none !important;
	}

	.ld-entrance-demo.is-entering .ld-entrance-demo__header,
	.ld-entrance-demo.is-entering .ld-entrance-demo__performer-wrap,
	.ld-entrance-demo.is-entering .ld-entrance-demo__quote {
		filter: none !important;
	}

	.ld-gallery-transition-stage::before,
	.ld-gallery-transition-stage::after,
	.ld-entrance-demo.is-gallery-transitioning
	.ld-gallery-transition-stage::before,
	.ld-entrance-demo.is-gallery-transitioning
	.ld-gallery-transition-stage::after,
	.ld-entrance-demo.is-waiting-for-gallery-assets
	.ld-gallery-transition-stage::after {
		filter: none !important;
	}

	.ld-entrance-demo.is-following-guide .ld-guide,
	.ld-entrance-demo.is-following-guide .ld-take-my-hand {
		filter: none !important;
	}
}

/* Constrained-device mode: preserve the story, remove decorative GPU load. */
.ld-entrance-demo.is-performance-lite .ld-entrance-demo__background::before,
.ld-entrance-demo.is-performance-lite .ld-entrance-demo__performer-wrap,
.ld-entrance-demo.is-performance-lite .ld-pyramid-entrance__mist span,
.ld-entrance-demo.is-performance-lite .ld-guide-layer::after,
.ld-entrance-demo.is-performance-lite .ld-guide::before,
.ld-entrance-demo.is-performance-lite .ld-audio-console-shell,
.ld-entrance-demo.is-performance-lite .ld-audio-console::after,
.ld-entrance-demo.is-performance-lite .ld-audio-console__waveform::after,
.ld-entrance-demo.is-performance-lite .ld-audio-console__collapse::before,
.ld-entrance-demo.is-performance-lite .ld-audio-blackhole-tab__orbit {
	animation: none !important;
}

.ld-entrance-demo.is-performance-lite .ld-entrance-demo__light {
	filter: blur(35px);
	opacity: .12;
}

.ld-entrance-demo.is-performance-lite .ld-entrance-demo__grain {
	display: none;
}

.ld-entrance-demo.is-performance-lite .ld-pyramid-entrance,
.ld-entrance-demo.is-performance-lite .ld-pyramid-entrance__outline path,
.ld-entrance-demo.is-performance-lite .ld-pyramid-entrance__shadow,
.ld-entrance-demo.is-performance-lite .ld-guide-layer::after,
.ld-entrance-demo.is-performance-lite .ld-guide,
.ld-entrance-demo.is-performance-lite .ld-guide::before,
.ld-entrance-demo.is-performance-lite .ld-guide::after,
.ld-entrance-demo.is-performance-lite .ld-take-my-hand,
.ld-entrance-demo.is-performance-lite .ld-gallery-transition-stage::before,
.ld-entrance-demo.is-performance-lite .ld-gallery-transition-stage::after {
	filter: none !important;
}

.ld-entrance-demo.is-performance-lite .ld-guide-layer::before {
	background: rgba(7, 4, 0, .17);
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

.ld-entrance-demo.is-performance-lite .ld-audio-console,
.ld-entrance-demo.is-performance-lite .ld-audio-album-card {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* A simple opacity/scale entry avoids animating a full-screen clip-path. */
.ld-entrance-demo.is-performance-lite.is-entering .ld-gallery-preview {
	clip-path: inset(0);
	-webkit-clip-path: inset(0);
	animation:
		ld-gallery-entry-performance-lite
		3.9s
		cubic-bezier(.18, .7, .2, 1)
		forwards !important;
}

@keyframes ld-gallery-entry-performance-lite {
	0% {
		opacity: 0;
		transform: translate3d(0, 0, 0) scale(.9);
	}

	38% {
		opacity: .5;
		transform: translate3d(0, 0, 0) scale(.955);
	}

	76% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(.995);
	}

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

/*
 * Lightweight final hand-off. It keeps the .9s dissolve and 1.05s continued
 * movement, but moves compositor layers instead of blurring and resizing a
 * full-screen background every frame.
 */
.ld-entrance-demo.is-performance-lite.is-gallery-transitioning
.ld-gallery-transition-stage::before {
	animation:
		ld-gallery-outgoing-performance-lite
		.9s
		ease
		forwards !important;
}

.ld-entrance-demo.is-performance-lite.is-gallery-transitioning
.ld-gallery-transition-stage::after {
	background-position: var(--ld-turn-final-position) !important;
	background-size: var(--ld-turn-final-size) !important;
	animation:
		ld-gallery-incoming-performance-lite
		1.95s
		cubic-bezier(.18, .66, .2, 1)
		forwards !important;
}

.ld-entrance-demo.is-performance-lite.is-waiting-for-gallery-assets
.ld-gallery-transition-stage::after {
	opacity: 1;
	background-position: var(--ld-turn-final-position);
	background-size: var(--ld-turn-final-size);
	transform: translate3d(-1%, 0, 0) scale(1.045);
	animation: none !important;
}

@keyframes ld-gallery-outgoing-performance-lite {
	0%,
	14% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}

	100% {
		opacity: 0;
		transform: translate3d(-.8%, 0, 0) scale(1.035);
	}
}

@keyframes ld-gallery-incoming-performance-lite {
	0% {
		opacity: 0;
		transform: translate3d(.5%, 0, 0) scale(1.015);
	}

	46.154% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1.028);
	}

	100% {
		opacity: 1;
		transform: translate3d(-1%, 0, 0) scale(1.055);
	}
}

/* Keep the audio controls stable rather than continuously floating. */
.ld-entrance-demo.is-performance-lite.is-audio-console-visible.is-gallery-entry-complete
.ld-audio-console-shell {
	animation:
		ld-audio-console-arrive
		.82s
		cubic-bezier(.16, .78, .22, 1)
		both !important;
}

/* Static waveform on constrained devices; JavaScript also stops updating it. */
.ld-entrance-demo.is-performance-lite .ld-audio-console__waveform span {
	transition: none;
	box-shadow:
		0 0 3px rgba(255, 193, 38, .2),
		inset 0 1px 0 rgba(255, 255, 255, .45);
}

/*
 * Compatibility fallback for browsers that predate the individual
 * translate/rotate/scale properties used by the ticket.
 */
@supports not (translate: 1px 1px) {
	.ld-admit-ticket {
		animation:
			ld-ticket-transform-fallback
			7.2s
			linear
			.25s
			1
			both !important;
	}

	@keyframes ld-ticket-transform-fallback {
		0% {
			opacity: 1;
			transform:
				translate3d(-50%, calc(-50% - 112vh), 0)
				rotate(-8deg);
		}

		50% {
			transform:
				translate3d(calc(-50% - 9px), calc(-50% - 32vh), 0)
				rotate(-5.5deg);
		}

		80% {
			transform:
				translate3d(calc(-50% + 5px), calc(-50% - 7vh), 0)
				rotate(-5deg);
		}

		100% {
			opacity: 1;
			transform:
				translate3d(-50%, -50%, 0)
				rotate(-5deg);
		}
	}
}

/* Stop decorative work when the tab is not visible. */
@media (prefers-reduced-data: reduce) {
	.ld-entrance-demo .ld-entrance-demo__background::before,
	.ld-entrance-demo .ld-entrance-demo__performer-wrap,
	.ld-entrance-demo .ld-pyramid-entrance__mist span,
	.ld-entrance-demo .ld-guide-layer::after {
		animation: none !important;
	}
}

/* =========================================================
   32. OPTIONAL RESPONSIVE ASSET PACK

   If the optimised files supplied with this package are uploaded to the
   July 2026 media folder, PHP detects them automatically. These rules use
   the smaller tablet and phone backgrounds without changing the design.
   ========================================================= */

@media (max-width: 1600px) {
	.ld-entrance-demo {
		--ld-gallery-image-active: var(
			--ld-gallery-image-tablet,
			var(--ld-gallery-image-desktop)
		);
	}

	.ld-gallery-transition-stage::after {
		background-image: var(
			--ld-gallery-turn-image-tablet,
			var(--ld-gallery-turn-image-desktop)
		);
	}
}

@media (max-width: 767px) and (orientation: portrait) {
	.ld-entrance-demo {
		--ld-gallery-image-active: var(
			--ld-gallery-image-mobile,
			var(--ld-gallery-image-tablet)
		);
	}

	.ld-gallery-transition-stage::after {
		background-image: var(
			--ld-gallery-turn-image-mobile,
			var(--ld-gallery-turn-image-tablet)
		);
	}
}



/* =========================================================
   33. LEGACY SAFARI / OLDER MAC LAYOUT SAFETY

   Modern browsers keep the existing responsive design exactly as authored.
   These rules only activate where Safari/WebKit does not understand one of
   the newer sizing/transform primitives used by the entrance.

   The hard logo cap also protects the page if a browser drops a clamp()
   declaration: LD-Logo can never expand to its 1200px intrinsic width.
   ========================================================= */

/* clamp() arrived later than the rest of this layout. Older Safari receives
 * stable, breakpoint-aware values instead of discarding the declaration. */
@supports not (width: clamp(10px, 2vw, 20px)) {
	.ld-entrance-demo__scene {
		width: 100%;
		padding: 48px 52px;
		gap: 32px;
	}

	.ld-entrance-demo__header {
		padding-top: 18px;
	}

	.ld-entrance-demo__symbol {
		width: 72px;
		max-width: 88px;
	}

	.ld-entrance-demo__title {
		font-size: 56px;
	}

	.ld-entrance-demo__intro {
		font-size: 16px;
	}

	.ld-entrance-demo__quote {
		padding-bottom: 80px;
	}

	.ld-entrance-demo__quote p {
		font-size: 16px;
	}

	.ld-entrance-demo__performer-wrap {
		left: 23%;
		width: 24vw;
		max-width: 390px;
	}

	.ld-pyramid-entrance__destination span {
		font-size: 12px;
	}

	.ld-pyramid-entrance__destination strong {
		font-size: 36px;
	}

	.ld-admit-ticket,
	.ld-admit-ticket:hover,
	.ld-admit-ticket:focus,
	.ld-admit-ticket:active,
	.ld-admit-ticket:visited {
		width: 300px !important;
		max-width: 340px !important;
	}

	.ld-gallery-track-hotspot::after {
		font-size: 17px;
	}

	.ld-take-my-hand,
	.ld-take-my-hand:hover,
	.ld-take-my-hand:focus,
	.ld-take-my-hand:active,
	.ld-take-my-hand:visited {
		width: 460px;
		max-width: 560px;
	}

	@media (max-width: 1100px) {
		.ld-entrance-demo__symbol {
			width: 64px;
		}

		.ld-entrance-demo__performer-wrap {
			width: 26vw;
			max-width: 310px;
		}

		.ld-admit-ticket,
		.ld-admit-ticket:hover,
		.ld-admit-ticket:focus,
		.ld-admit-ticket:active,
		.ld-admit-ticket:visited {
			width: 280px !important;
			max-width: 310px !important;
		}

		.ld-take-my-hand,
		.ld-take-my-hand:hover,
		.ld-take-my-hand:focus,
		.ld-take-my-hand:active,
		.ld-take-my-hand:visited {
			width: 420px;
			max-width: 500px;
		}
	}

	@media (max-width: 767px) {
		.ld-entrance-demo__scene {
			padding: 10px 10px 8px;
			gap: 10px;
		}

		.ld-entrance-demo__symbol {
			width: 46px;
			margin-bottom: 6px;
		}

		.ld-entrance-demo__title {
			font-size: 42px;
		}

		.ld-entrance-demo__intro {
			max-width: 320px;
			margin: 8px auto 0;
			font-size: 12px;
		}

		.ld-pyramid-entrance__destination strong {
			font-size: 25px;
		}

		.ld-admit-ticket,
		.ld-admit-ticket:hover,
		.ld-admit-ticket:focus,
		.ld-admit-ticket:active,
		.ld-admit-ticket:visited {
			width: 62vw !important;
			max-width: 270px !important;
		}

		.ld-take-my-hand,
		.ld-take-my-hand:hover,
		.ld-take-my-hand:focus,
		.ld-take-my-hand:active,
		.ld-take-my-hand:visited {
			width: 60vw;
			max-width: 360px;
		}
	}

	@media (max-width: 420px) {
		.ld-entrance-demo__symbol {
			width: 40px;
		}

		.ld-entrance-demo__title {
			font-size: 34px;
		}

		.ld-admit-ticket,
		.ld-admit-ticket:hover,
		.ld-admit-ticket:focus,
		.ld-admit-ticket:active,
		.ld-admit-ticket:visited {
			width: 60vw !important;
			max-width: 235px !important;
		}

		.ld-take-my-hand,
		.ld-take-my-hand:hover,
		.ld-take-my-hand:focus,
		.ld-take-my-hand:active,
		.ld-take-my-hand:visited {
			width: 56vw;
			max-width: 245px;
		}
	}

	@media
		(max-width: 1100px)
		and (max-height: 620px)
		and (orientation: landscape) {

		.ld-entrance-demo__scene {
			padding: 10px 24px;
			gap: 20px;
		}

		.ld-entrance-demo__symbol {
			width: 42px;
			margin-bottom: 6px;
		}

		.ld-entrance-demo__title {
			font-size: 40px;
		}

		.ld-entrance-demo__intro {
			margin-top: 9px;
			font-size: 12px;
		}

		.ld-take-my-hand,
		.ld-take-my-hand:hover,
		.ld-take-my-hand:focus,
		.ld-take-my-hand:active,
		.ld-take-my-hand:visited {
			width: 34vw;
			max-width: 390px;
		}
	}
}

/* min()/max() function fallbacks. These use ordinary vw/px sizing and retain
 * the same upper bounds, so the entrance remains usable even on older WebKit. */
@supports not (width: min(10px, 20px)) {
	.ld-entrance-demo {
		--ld-guide-width: 38vw;
	}

	.ld-pyramid-entrance {
		width: 54vw;
		max-width: 790px;
	}

	.ld-pyramid-entrance__destination {
		width: 82%;
		max-width: 520px;
	}

	.ld-guide,
	.ld-guide:hover,
	.ld-guide:focus,
	.ld-guide:active,
	.ld-guide:visited {
		width: 38vw;
		max-width: 600px;
		min-width: 320px;
	}

	.ld-audio-console-shell {
		width: calc(100vw - 24px);
		max-width: 680px;
	}

	@media (max-width: 1100px) {
		.ld-entrance-demo {
			--ld-guide-width: 45vw;
		}

		.ld-pyramid-entrance {
			width: 64vw;
			max-width: 680px;
		}

		.ld-guide,
		.ld-guide:hover,
		.ld-guide:focus,
		.ld-guide:active,
		.ld-guide:visited {
			width: 45vw;
			max-width: 500px;
			min-width: 280px;
		}
	}

	@media (max-width: 767px) {
		.ld-entrance-demo {
			--ld-guide-width: 72vw;
		}

		.ld-pyramid-entrance {
			width: 98vw;
			max-width: 600px;
		}

		.ld-guide,
		.ld-guide:hover,
		.ld-guide:focus,
		.ld-guide:active,
		.ld-guide:visited {
			width: 72vw;
			max-width: 380px;
			min-width: 220px;
		}

		.ld-entrance-demo__performer-wrap {
			width: 39vw;
			max-width: 180px;
			height: 47vh;
			max-height: 340px;
		}
	}

	@media (max-width: 420px) {
		.ld-entrance-demo {
			--ld-guide-width: 76vw;
		}

		.ld-guide,
		.ld-guide:hover,
		.ld-guide:focus,
		.ld-guide:active,
		.ld-guide:visited {
			width: 76vw;
			max-width: 330px;
			min-width: 200px;
		}
	}

	@media (max-width: 360px) and (orientation: portrait) {
		.ld-pyramid-entrance {
			width: 100vw;
			max-width: 480px;
		}

		.ld-entrance-demo__performer-wrap {
			width: 34vw;
			height: 38vh;
		}
	}

	@media (max-height: 620px) and (orientation: landscape) {
		.ld-entrance-demo {
			--ld-guide-width: 34vw;
		}

		.ld-guide,
		.ld-guide:hover,
		.ld-guide:focus,
		.ld-guide:active,
		.ld-guide:visited {
			width: 34vw;
			max-width: 360px;
			min-width: 210px;
		}
	}
}

/* aspect-ratio is essential here because the pyramid/ticket/hand wrappers
 * contain absolutely sized artwork. The padding technique recreates the exact
 * ratio on Safari versions that predate the property. */
@supports not (aspect-ratio: 1 / 1) {
	.ld-pyramid-entrance {
		height: auto !important;
		aspect-ratio: auto !important;
	}

	.ld-pyramid-entrance::before {
		display: block !important;
		width: 100% !important;
		padding-top: 92.592593% !important; /* 1 / 1.08 */
		content: "" !important;
		pointer-events: none !important;
	}

	.ld-admit-ticket,
	.ld-admit-ticket:hover,
	.ld-admit-ticket:focus,
	.ld-admit-ticket:active,
	.ld-admit-ticket:visited {
		height: auto !important;
		aspect-ratio: auto !important;
	}

	.ld-admit-ticket::before {
		display: block !important;
		width: 100% !important;
		padding-top: 46.375% !important; /* 371 / 800 */
		content: "" !important;
		pointer-events: none !important;
	}

	.ld-take-my-hand,
	.ld-take-my-hand:hover,
	.ld-take-my-hand:focus,
	.ld-take-my-hand:active,
	.ld-take-my-hand:visited {
		height: auto !important;
		aspect-ratio: auto !important;
	}

	.ld-take-my-hand::before {
		display: block !important;
		width: 100% !important;
		padding-top: 107.7% !important; /* 1077 / 1000 */
		content: "" !important;
		pointer-events: none !important;
	}

	.ld-take-my-hand__image {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
	}

	.ld-audio-album-card__art {
		height: auto !important;
		aspect-ratio: auto !important;
	}

	.ld-audio-album-card__art::before {
		display: block !important;
		width: 100% !important;
		padding-top: 100% !important;
		content: "" !important;
		pointer-events: none !important;
	}

	.ld-audio-album-card__art img {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
	}
}

/* Older WebKit ignores the individual translate/rotate/scale properties.
 * The existing legacy ticket keyframes cover arrival; these overrides also
 * preserve hover and opening-state movement. */
@supports not (translate: 1px 1px) {
	.ld-entrance-demo:not(.is-ticket-tearing) .ld-admit-ticket:hover {
		transform:
			translate3d(-50%, calc(-50% - 6px), 0)
			rotate(-3.5deg)
			scale(1.015) !important;
	}

	.ld-entrance-demo.is-opening:not(.is-ticket-tearing) .ld-admit-ticket {
		transform:
			translate3d(-50%, calc(-50% + 42px), 0)
			rotate(-8deg)
			scale(.82) !important;
		transition:
			opacity 850ms ease,
			transform 1.2s ease,
			filter 850ms ease !important;
	}

	@media (prefers-reduced-motion: reduce) {
		.ld-admit-ticket {
			transform:
				translate3d(-50%, -50%, 0)
				rotate(-5deg) !important;
		}
	}
}

/* If max() is unavailable, preserve the ordinary edge offsets rather than
 * dropping the entire declaration and leaving controls unpositioned. */
@supports not (top: max(1px, 2px)) {
	.ld-audio-console-shell {
		top: 10px;
	}

	.ld-take-my-hand,
	.ld-take-my-hand:hover,
	.ld-take-my-hand:focus,
	.ld-take-my-hand:active,
	.ld-take-my-hand:visited {
		right: -18px;
		bottom: -7px;
	}

	@media (max-width: 1100px) {
		.ld-take-my-hand,
		.ld-take-my-hand:hover,
		.ld-take-my-hand:focus,
		.ld-take-my-hand:active,
		.ld-take-my-hand:visited {
			right: -20px;
		}
	}

	@media (max-width: 767px) {
		.ld-take-my-hand,
		.ld-take-my-hand:hover,
		.ld-take-my-hand:focus,
		.ld-take-my-hand:active,
		.ld-take-my-hand:visited {
			right: -22px;
			bottom: -5px;
		}
	}

	@media (max-width: 420px) {
		.ld-take-my-hand,
		.ld-take-my-hand:hover,
		.ld-take-my-hand:focus,
		.ld-take-my-hand:active,
		.ld-take-my-hand:visited {
			right: -22px;
		}
	}

	@media (max-height: 620px) and (orientation: landscape) {
		.ld-take-my-hand,
		.ld-take-my-hand:hover,
		.ld-take-my-hand:focus,
		.ld-take-my-hand:active,
		.ld-take-my-hand:visited {
			right: -18px;
		}
	}
}


/* =========================================================
   LORD DANCER – GALLERY ONE V142
   Standalone horizontal gallery stylesheet
   Shortcode: [lord_dancer_gallery_one]

   This is a NEW isolated component. It does not replace or edit
   the Lord Dancer entrance CSS.
   ========================================================= */


/* =========================================================
   1. PAGE LOCK AND COMPONENT RESET
   ========================================================= */

body.ldg1-page-lock {
	overflow: hidden !important;
	overscroll-behavior: none;
}

.ldg1,
.ldg1 *,
.ldg1 *::before,
.ldg1 *::after {
	box-sizing: border-box;
}

.ldg1 {
	--ldg1-join-shift: 0px;
	--ldg1-album-shift: 0px;
	--ldg1-seam-blend: clamp(34px, 3.6vw, 68px);
	--ldg1-seam-half: clamp(17px, 1.8vw, 34px);
	--ldg1-black: #050403;
	--ldg1-panel: rgba(9, 7, 4, .88);
	--ldg1-gold: #e2aa2f;
	--ldg1-gold-bright: #ffe59a;
	--ldg1-cream: #fff4ce;

	/* Gallery-1.jpg is 2400 × 1029: width is 233.236% of height. */
	--ldg1-room-width: max(100vw, 233.236vh);
	--ldg1-room-width: max(100vw, 233.236svh);

	/* Live Studio-Entrance-Background.jpg is 2401 × 1030; the 2048 × 878 reference remains the design-coordinate canvas. */
	--ldg1-studio-room-width: max(100vw, 228.765792vh);
	--ldg1-studio-room-width: max(100vw, 228.765792svh);

	position: fixed;
	z-index: 999990;
	inset: 0;
	isolation: isolate;
	width: 100vw;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	color: var(--ldg1-cream);
	background: #030201;
	font-family: Arial, Helvetica, sans-serif;
}

.ldg1 button,
.ldg1 a,
.ldg1 img {
	-webkit-tap-highlight-color: transparent;
}

.ldg1 button {
	font: inherit;
}

.ldg1__ambient {
	position: absolute;
	z-index: -1;
	inset: 0;
	background:
		radial-gradient(circle at 50% -10%, rgba(255, 192, 54, .14), transparent 36%),
		linear-gradient(180deg, #100b04, #020201 74%);
	pointer-events: none;
}


/* =========================================================
   2. HORIZONTAL VIEWPORT
   ========================================================= */

.ldg1__viewport {
	position: absolute;
	z-index: 1;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	overscroll-behavior-y: none;
	scroll-behavior: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	outline: 0;
	cursor: grab;
}

.ldg1__viewport::-webkit-scrollbar {
	display: none;
}

.ldg1__viewport.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	user-select: none;
}

.ldg1__viewport:focus-visible {
	outline: 1px solid rgba(255, 223, 128, .54);
	outline-offset: -3px;
}

.ldg1__track {
	position: relative;
	height: 100%;
}


/* =========================================================
   3. CONTINUOUS FOUR-ROOM TRACK
   Rooms 1–3 retain Gallery-1.jpg; Room 4 uses Studio-Entrance-Background.jpg.
   ========================================================= */

.ldg1__track--desktop {
	display: flex;
	align-items: stretch;
	width: max-content;
	padding-right: var(--ldg1-seam-blend);
}

.ldg1__room {
	position: relative;
	flex: 0 0 var(--ldg1-room-width);
	width: var(--ldg1-room-width);
	height: 100%;
	overflow: hidden;
	background-color: #080502;
	background-image: var(--ldg1-background-image);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: calc(100% + 2px) 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translateZ(0);
}

/*
 * ROOM 4 STUDIO COORDINATE LOCK
 * Live source file: 2354 × 1029 px.
 * Placement reference canvas: 2354 × 1029 px.
 * X/Y placement is stored as percentages of the agreed 2354 × 1029 reference,
 * so those green-dot coordinates map proportionally onto the live source
 * without stretching the studio background.
 */
.ldg1__room--four {
	flex: 0 0 var(--ldg1-studio-room-width);
	width: var(--ldg1-studio-room-width);
	background-image: var(--ldg1-studio-background-image, var(--ldg1-background-image));
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.ldg1__room::before {
	position: absolute;
	z-index: 0;
	inset: 0;
	content: "";
	background:
		linear-gradient(90deg, rgba(0, 0, 0, .12), transparent 5%, transparent 95%, rgba(0, 0, 0, .12)),
		linear-gradient(180deg, rgba(0, 0, 0, .03), transparent 64%, rgba(0, 0, 0, .12));
	pointer-events: none;
}

.ldg1__room + .ldg1__room {
	/*
	 * Every subsequent room overlaps and feathers into the room before it.
	 * The same treatment feathers every room join, including the transition
	 * from Gallery-1.jpg in Room 3 into Studio-Entrance-Background.jpg in Room 4.
	 */
	margin-left: calc(-1 * var(--ldg1-seam-blend));
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0,
		rgba(0, 0, 0, .18) 18px,
		rgba(0, 0, 0, .72) calc(var(--ldg1-seam-blend) * .68),
		#000 var(--ldg1-seam-blend),
		#000 100%
	);
	mask-image: linear-gradient(
		90deg,
		transparent 0,
		rgba(0, 0, 0, .18) 18px,
		rgba(0, 0, 0, .72) calc(var(--ldg1-seam-blend) * .68),
		#000 var(--ldg1-seam-blend),
		#000 100%
	);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}




/* =========================================================
   3A. SEATED LORD DANCER CHARACTER
   Anchored to the first room itself rather than the viewport.
   Because the room and background scale together, the character
   remains seated on the same bench position on every screen size.
   ========================================================= */

.ldg1__seated-character {
	position: absolute;
	z-index: 2;
	left: 33.35%;
	bottom: 15.5%;
	display: block;
	height: 42.5%;
	width: auto;
	pointer-events: none;
	user-select: none;
	transform: translateX(-50%);
	transform-origin: 50% 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	will-change: transform;
}

.ldg1__seated-character-img {
	display: block;
	width: auto;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	object-fit: contain;
	object-position: 50% 100%;
	opacity: 1;
	filter:
		drop-shadow(0 12px 11px rgba(0, 0, 0, .44))
		drop-shadow(0 0 9px rgba(255, 175, 28, .10));
	transform: translateZ(0);
	pointer-events: none;
	-webkit-user-drag: none;
}

/*
 * The room always retains the gallery-background coordinate system on
 * phones and tablets, so no separate viewport-based positioning is used.
 * The tiny adjustments below only compensate for browser safe-height
 * differences without detaching the character from the bench.
 */
@media (max-width: 991px) {
	.ldg1__seated-character {
		left: 33.35%;
		bottom: 15.5%;
		height: 42.5%;
	}
}

@media (max-width: 767px) and (orientation: portrait) {
	.ldg1__seated-character {
		left: 33.35%;
		bottom: 15.5%;
		height: 42.5%;
	}
}



/* Keep every framed artwork and its controls visibly in front of the seated character. */
.ldg1__room .ldg1__exhibit,
.ldg1__room .ldg1__exhibit:hover,
.ldg1__room .ldg1__exhibit:focus,
.ldg1__room .ldg1__exhibit:active {
	z-index: 20 !important;
}

.ldg1__room .ldg1__artwork-shell,
.ldg1__room .ldg1__caption {
	position: relative;
	z-index: 21;
}

.ldg1__room .ldg1__play-trigger {
	position: absolute;
	z-index: 22;
}


/* =========================================================
   4. DESKTOP EXHIBIT POSITIONING
   Coordinates match the three recessed square areas in Gallery-1.jpg.
   ========================================================= */

.ldg1__exhibit,
.ldg1__exhibit:hover,
.ldg1__exhibit:focus,
.ldg1__exhibit:active {
	position: absolute;
	z-index: 20;
	display: block;
	margin: 0;
	padding: 0;
	overflow: visible;
	color: inherit;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	outline: 0;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.ldg1__exhibit--slot-1 {
	left: 13.35%;
	top: 28.45%;
	width: 13.85%;
	height: 32.15%;
}

.ldg1__exhibit--slot-2 {
	left: 42.45%;
	top: 28.45%;
	width: 15.05%;
	height: 32.15%;
}

.ldg1__exhibit--slot-3 {
	left: 72.75%;
	top: 28.45%;
	width: 14.10%;
	height: 32.15%;
}


/* =========================================================
   5. ARTWORK, GLASS AND ACTIVE STATES
   ========================================================= */

.ldg1__artwork-shell {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #080604;
	box-shadow:
		inset 0 0 0 1px rgba(255, 218, 108, .16),
		0 7px 22px rgba(0, 0, 0, .42);
	transform: none;
	transition:
		filter 420ms ease,
		box-shadow 420ms ease;
}

.ldg1__artwork {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: none;
	transition: filter 500ms ease;
}


.ldg1__inside-artwork {
	position: absolute;
	z-index: 1;
	left: 15.3%;
	top: 15.2%;
	width: 69.5%;
	height: 69.7%;
	object-fit: cover;
	object-position: center;
	background: #050505;
	box-shadow:
		inset 0 0 14px rgba(0, 0, 0, .7),
		0 0 9px rgba(255, 62, 202, .22),
		0 0 12px rgba(51, 170, 255, .24);
	transform: scale(1.018);
	filter: brightness(.94) saturate(1.04);
}

.ldg1__artwork-glass {
	position: absolute;
	z-index: 3;
	inset: 0;
	background:
		linear-gradient(115deg, rgba(255, 255, 255, .16), transparent 16%, transparent 63%, rgba(255, 226, 152, .06)),
		linear-gradient(180deg, transparent 72%, rgba(0, 0, 0, .18));
	mix-blend-mode: screen;
	opacity: .34;
	pointer-events: none;
}


/* ---------------------------------------------------------
   Transparent gallery-frame objects with environmental backlighting
   --------------------------------------------------------- */
.ldg1__artwork-shell.has-gallery-frame {
	isolation: isolate;
	overflow: visible;
	background: transparent;
	box-shadow: none;
	transform: none;
}

.ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__artwork-shell.has-gallery-frame::after {
	position: absolute;
	content: "";
	pointer-events: none;
}

.ldg1__artwork-shell.has-gallery-frame::before {
	z-index: 0;
	inset: -9%;
	border-radius: 9%;
	background: radial-gradient(
		ellipse at center,
		transparent 43%,
		var(--ldg1-frame-glow-soft, rgba(255, 188, 45, .2)) 55%,
		var(--ldg1-frame-glow, rgba(255, 188, 45, .42)) 68%,
		transparent 82%
	);
	filter: blur(10px);
	opacity: .86;
	mix-blend-mode: screen;
	animation: ldg1-frame-backlight-breathe 4.8s ease-in-out infinite;
}

.ldg1__artwork-shell.has-gallery-frame::after {
	z-index: 1;
	inset: -1.5%;
	border: 1px solid var(--ldg1-frame-edge, rgba(255, 218, 119, .45));
	border-radius: 4%;
	box-shadow:
		0 0 6px var(--ldg1-frame-glow, rgba(255, 188, 45, .36)),
		0 0 16px var(--ldg1-frame-glow-soft, rgba(255, 188, 45, .18)),
		inset 0 0 8px rgba(255, 237, 184, .07);
	opacity: .78;
	animation: ldg1-frame-edge-breathe 4.8s ease-in-out infinite;
}

.ldg1__artwork-shell.has-gallery-frame .ldg1__artwork {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform: scale(1.025);
	filter:
		drop-shadow(0 2px 2px rgba(0, 0, 0, .72))
		drop-shadow(0 8px 15px rgba(0, 0, 0, .48))
		drop-shadow(0 0 5px var(--ldg1-frame-glow, rgba(255, 188, 45, .34)));
}

.ldg1__artwork-shell.has-gallery-frame .ldg1__artwork-glass {
	z-index: 4;
	inset: 8%;
	border-radius: 2%;
	background:
		linear-gradient(118deg, rgba(255, 255, 255, .13), transparent 17%, transparent 66%, rgba(255, 222, 143, .05)),
		linear-gradient(180deg, transparent 73%, rgba(0, 0, 0, .14));
	opacity: .24;
}

.ldg1__artwork-shell--neon-dance {
	--ldg1-frame-edge: rgba(255, 211, 250, .56);
	--ldg1-frame-glow: rgba(196, 71, 255, .54);
	--ldg1-frame-glow-soft: rgba(54, 178, 255, .26);
}

.ldg1__artwork-shell--neon-dance::before {
	background:
		radial-gradient(ellipse at 23% 52%, transparent 38%, rgba(255, 37, 195, .36) 58%, transparent 78%),
		radial-gradient(ellipse at 78% 50%, transparent 38%, rgba(57, 164, 255, .42) 58%, transparent 78%),
		radial-gradient(ellipse at center, transparent 44%, rgba(177, 68, 255, .22) 62%, transparent 82%);
}

.ldg1__artwork-shell--neon-dance .ldg1__artwork {
	filter:
		drop-shadow(-3px 0 5px rgba(255, 49, 196, .42))
		drop-shadow(3px 0 5px rgba(66, 174, 255, .48))
		drop-shadow(0 9px 16px rgba(0, 0, 0, .55));
}

.ldg1__artwork-shell--graphiti {
	--ldg1-frame-edge: rgba(255, 222, 130, .52);
	--ldg1-frame-glow: rgba(228, 164, 45, .48);
	--ldg1-frame-glow-soft: rgba(255, 201, 91, .2);
}

.ldg1__artwork-shell--graphiti .ldg1__artwork {
	transform: scale(1.012);
	filter:
		drop-shadow(0 0 4px rgba(255, 205, 99, .3))
		drop-shadow(0 9px 17px rgba(0, 0, 0, .58));
}

.ldg1__artwork-shell--industrial-mesh {
	--ldg1-frame-edge: rgba(255, 214, 123, .56);
	--ldg1-frame-glow: rgba(255, 182, 44, .46);
	--ldg1-frame-glow-soft: rgba(255, 207, 117, .22);
}

.ldg1__artwork-shell--industrial-mesh .ldg1__artwork {
	transform: scale(1.006);
	filter:
		drop-shadow(0 0 4px rgba(255, 214, 134, .28))
		drop-shadow(0 8px 16px rgba(0, 0, 0, .58));
}

.ldg1__artwork-shell--angles {
	--ldg1-frame-edge: rgba(255, 218, 92, .6);
	--ldg1-frame-glow: rgba(255, 179, 20, .5);
	--ldg1-frame-glow-soft: rgba(255, 211, 85, .24);
}

.ldg1__artwork-shell--angles .ldg1__artwork {
	transform: none;
	filter:
		drop-shadow(0 0 4px rgba(255, 219, 100, .3))
		drop-shadow(0 9px 17px rgba(0, 0, 0, .6));
}

.ldg1__artwork-shell--crystal {
	--ldg1-frame-edge: rgba(179, 214, 255, .64);
	--ldg1-frame-glow: rgba(131, 170, 255, .54);
	--ldg1-frame-glow-soft: rgba(207, 151, 255, .22);
}

.ldg1__artwork-shell--crystal .ldg1__artwork {
	transform: none;
	filter:
		drop-shadow(0 0 5px rgba(176, 214, 255, .30))
		drop-shadow(0 9px 18px rgba(0, 0, 0, .60));
}

.ldg1__artwork-shell--pink-drip {
	--ldg1-frame-edge: rgba(255, 166, 228, .62);
	--ldg1-frame-glow: rgba(255, 86, 198, .54);
	--ldg1-frame-glow-soft: rgba(255, 147, 225, .24);
}

.ldg1__artwork-shell--pink-drip .ldg1__artwork {
	transform: none;
	filter:
		drop-shadow(0 0 5px rgba(255, 166, 228, .34))
		drop-shadow(0 9px 18px rgba(0, 0, 0, .60));
}

.ldg1__artwork-shell--heavy-gold {
	--ldg1-frame-edge: rgba(255, 235, 164, .68);
	--ldg1-frame-glow: rgba(255, 184, 34, .58);
	--ldg1-frame-glow-soft: rgba(255, 214, 92, .28);
}

.ldg1__artwork-shell--heavy-gold .ldg1__artwork {
	transform: none;
	filter:
		drop-shadow(0 0 5px rgba(255, 225, 143, .48))
		drop-shadow(0 0 11px rgba(255, 172, 24, .24))
		drop-shadow(0 10px 18px rgba(0, 0, 0, .58));
}

@keyframes ldg1-frame-backlight-breathe {
	0%, 100% {
		opacity: .74;
		transform: scale(.99);
	}

	50% {
		opacity: 1;
		transform: scale(1.022);
	}
}

@keyframes ldg1-frame-edge-breathe {
	0%, 100% {
		opacity: .72;
		box-shadow:
			0 0 6px var(--ldg1-frame-glow, rgba(255, 188, 45, .36)),
			0 0 16px var(--ldg1-frame-glow-soft, rgba(255, 188, 45, .18)),
			inset 0 0 8px rgba(255, 237, 184, .07);
	}

	50% {
		opacity: .95;
		box-shadow:
			0 0 10px var(--ldg1-frame-glow, rgba(255, 188, 45, .46)),
			0 0 24px var(--ldg1-frame-glow-soft, rgba(255, 188, 45, .24)),
			inset 0 0 11px rgba(255, 237, 184, .12);
	}
}

.ldg1__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: clamp(5px, 1vh, 12px);
	background:
		radial-gradient(circle at 50% 35%, rgba(255, 195, 48, .10), transparent 38%),
		linear-gradient(145deg, rgba(20, 14, 6, .92), rgba(3, 3, 3, .98));
	color: rgba(255, 226, 145, .48);
	text-transform: uppercase;
}

.ldg1__placeholder strong {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(26px, 3.1vw, 70px);
	font-weight: 400;
	letter-spacing: .06em;
	line-height: 1;
}

.ldg1__placeholder small {
	font-size: clamp(8px, .72vw, 13px);
	font-weight: 700;
	letter-spacing: .18em;
}

.ldg1__caption {
	position: absolute;
	z-index: 6;
	left: 50%;
	bottom: -54px;
	display: grid;
	justify-items: center;
	min-width: 130px;
	padding: 7px 13px 8px;
	gap: 2px;
	color: var(--ldg1-cream);
	background: linear-gradient(180deg, rgba(19, 14, 7, .93), rgba(4, 3, 2, .96));
	border: 1px solid rgba(226, 170, 47, .54);
	border-radius: 999px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .42), 0 0 18px rgba(226, 170, 47, .11);
	opacity: 0;
	transform: translate(-50%, 8px) scale(.92);
	transition: opacity 260ms ease, transform 360ms cubic-bezier(.16, .78, .22, 1);
	pointer-events: none;
	white-space: nowrap;
}

.ldg1__caption strong {
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ldg1__caption small {
	color: rgba(255, 232, 175, .6);
	font-size: 8px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ldg1__exhibit:hover .ldg1__artwork-shell,
.ldg1__exhibit:focus-visible .ldg1__artwork-shell,
.ldg1__exhibit.is-current .ldg1__artwork-shell,
.ldg1__mobile-exhibit:hover .ldg1__artwork-shell,
.ldg1__mobile-exhibit:focus-visible .ldg1__artwork-shell,
.ldg1__mobile-exhibit.is-current .ldg1__artwork-shell {
	filter: brightness(1.08) saturate(1.05);
	box-shadow:
		inset 0 0 0 1px rgba(255, 234, 166, .56),
		0 0 12px rgba(255, 205, 74, .34),
		0 0 34px rgba(255, 174, 25, .24),
		0 10px 28px rgba(0, 0, 0, .48);
	transform: none;
}

.ldg1__exhibit:hover .ldg1__artwork,
.ldg1__exhibit:focus-visible .ldg1__artwork,
.ldg1__mobile-exhibit:hover .ldg1__artwork,
.ldg1__mobile-exhibit:focus-visible .ldg1__artwork {
	transform: none;
}


.ldg1__exhibit:hover .ldg1__artwork-shell.has-gallery-frame,
.ldg1__exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame,
.ldg1__exhibit.is-current .ldg1__artwork-shell.has-gallery-frame,
.ldg1__mobile-exhibit:hover .ldg1__artwork-shell.has-gallery-frame,
.ldg1__mobile-exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame,
.ldg1__mobile-exhibit.is-current .ldg1__artwork-shell.has-gallery-frame {
	filter: brightness(1.04) saturate(1.06);
	box-shadow: none;
	transform: none;
}

.ldg1__exhibit:hover .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__exhibit.is-current .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__mobile-exhibit:hover .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__mobile-exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__mobile-exhibit.is-current .ldg1__artwork-shell.has-gallery-frame::before {
	opacity: 1;
	filter: blur(12px) brightness(1.12);
}

.ldg1__exhibit:hover .ldg1__artwork-shell.has-gallery-frame .ldg1__artwork,
.ldg1__exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame .ldg1__artwork,
.ldg1__mobile-exhibit:hover .ldg1__artwork-shell.has-gallery-frame .ldg1__artwork,
.ldg1__mobile-exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame .ldg1__artwork {
	transform: none;
}

.ldg1__exhibit:hover .ldg1__artwork-shell--heavy-gold .ldg1__artwork,
.ldg1__exhibit:focus-visible .ldg1__artwork-shell--heavy-gold .ldg1__artwork,
.ldg1__mobile-exhibit:hover .ldg1__artwork-shell--heavy-gold .ldg1__artwork,
.ldg1__mobile-exhibit:focus-visible .ldg1__artwork-shell--heavy-gold .ldg1__artwork {
	transform: none;
}


.ldg1__exhibit:hover .ldg1__artwork-shell.has-gallery-frame,
.ldg1__exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame,
.ldg1__exhibit.is-current .ldg1__artwork-shell.has-gallery-frame,
.ldg1__mobile-exhibit:hover .ldg1__artwork-shell.has-gallery-frame,
.ldg1__mobile-exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame,
.ldg1__mobile-exhibit.is-current .ldg1__artwork-shell.has-gallery-frame {
	filter: brightness(1.01) saturate(1.03);
	box-shadow: none;
	transform: none;
}

.ldg1__exhibit:hover .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__exhibit.is-current .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__mobile-exhibit:hover .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__mobile-exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__mobile-exhibit.is-current .ldg1__artwork-shell.has-gallery-frame::before {
	opacity: .86;
	filter: blur(10px) brightness(1.04);
}

.ldg1__exhibit:hover .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__exhibit.is-current .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__mobile-exhibit:hover .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__mobile-exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__mobile-exhibit.is-current .ldg1__artwork-shell.has-gallery-frame::after {
	opacity: .78;
}

.ldg1__exhibit:hover .ldg1__caption,
.ldg1__exhibit:focus-visible .ldg1__caption {
	opacity: 1;
	transform: translate(-50%, 0) scale(1);
}

.ldg1__exhibit:focus-visible,
.ldg1__mobile-exhibit:focus-visible {
	outline: 2px solid rgba(255, 229, 147, .94) !important;
	outline-offset: 7px;
}


/* =========================================================
   6. PORTRAIT PHONE SIX-SLIDE VIEW
   ========================================================= */

.ldg1__track--mobile {
	display: none;
}

.ldg1__mobile-slide {
	--ldg1-crop-x: 50%;

	position: relative;
	flex: 0 0 84vw;
	width: 84vw;
	height: 100%;
	overflow: hidden;
	background-color: #080502;
	background-image: var(--ldg1-background-image);
	background-position: var(--ldg1-crop-x) center;
	background-repeat: no-repeat;
	background-size: auto 100%;
	border-radius: 0;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

.ldg1__mobile-slide--crop-1 {
	--ldg1-crop-x: 19.95%;
}

.ldg1__mobile-slide--crop-2 {
	--ldg1-crop-x: 50%;
}

.ldg1__mobile-slide--crop-3 {
	--ldg1-crop-x: 80.15%;
}

.ldg1__mobile-slide::before,
.ldg1__mobile-slide::after {
	position: absolute;
	z-index: 1;
	inset: 0;
	content: "";
	pointer-events: none;
}

.ldg1__mobile-slide::before {
	background: linear-gradient(90deg, rgba(0, 0, 0, .24), transparent 12%, transparent 88%, rgba(0, 0, 0, .24));
}

.ldg1__mobile-slide::after {
	background: linear-gradient(180deg, rgba(0, 0, 0, .04), transparent 62%, rgba(0, 0, 0, .18));
}

.ldg1__mobile-exhibit,
.ldg1__mobile-exhibit:hover,
.ldg1__mobile-exhibit:focus,
.ldg1__mobile-exhibit:active {
	position: absolute;
	z-index: 3;
	left: 50%;
	top: 44.45%;
	display: block;
	width: min(80%, 33svh);
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	color: inherit;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: 0;
	transform: translate(-50%, -50%);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.ldg1__mobile-exhibit .ldg1__caption {
	bottom: -62px;
}


/* =========================================================
   7. IMMERSIVE GALLERY PATH CONTROLS
   ========================================================= */

/*
 * The navigation is deliberately not presented as a conventional web
 * toolbar. The arrows behave like illuminated direction markers within the
 * gallery, while the progress track reads as a fine recessed floor light.
 */
.ldg1__hud {
	position: absolute;
	z-index: 30;
	left: 0;
	right: 0;
	bottom: max(18px, env(safe-area-inset-bottom));
	display: block;
	width: 100%;
	height: 62px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transform: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	pointer-events: none;
}

.ldg1__hud::before {
	position: absolute;
	left: 50%;
	bottom: 10px;
	width: min(300px, 38vw);
	height: 22px;
	content: "";
	background:
		radial-gradient(
			ellipse at center,
			rgba(255, 205, 74, .12) 0%,
			rgba(255, 205, 74, .045) 43%,
			transparent 74%
		);
	filter: blur(7px);
	transform: translateX(-50%) perspective(180px) rotateX(66deg);
	pointer-events: none;
}

.ldg1__nav,
.ldg1__nav:hover,
.ldg1__nav:focus,
.ldg1__nav:active {
	position: absolute;
	bottom: 0;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin: 0;
	padding: 0;
	color: rgba(255, 226, 143, .88);
	background: transparent !important;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	outline: 0;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	pointer-events: auto;
	transition:
		color 240ms ease,
		filter 240ms ease,
		transform 240ms ease,
		opacity 220ms ease;
}

.ldg1__nav--previous {
	left: clamp(12px, 3vw, 42px);
}

.ldg1__nav--next {
	right: clamp(12px, 3vw, 42px);
}

.ldg1__nav::before {
	position: absolute;
	inset: 8px;
	content: "";
	border: 1px solid rgba(228, 177, 54, .25);
	box-shadow:
		inset 0 0 14px rgba(255, 198, 49, .04),
		0 0 11px rgba(255, 189, 34, .05);
	transform: rotate(45deg) scale(.72);
	transition:
		border-color 240ms ease,
		box-shadow 240ms ease,
		transform 240ms ease,
		opacity 240ms ease;
	opacity: .72;
	pointer-events: none;
}

.ldg1__nav svg {
	position: relative;
	z-index: 2;
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter:
		drop-shadow(0 0 4px rgba(255, 210, 91, .26))
		drop-shadow(0 0 12px rgba(255, 184, 24, .12));
	transition: transform 240ms ease;
}

.ldg1__nav:hover,
.ldg1__nav:focus-visible {
	color: #fff0b1;
	filter: brightness(1.18);
}

.ldg1__nav:hover::before,
.ldg1__nav:focus-visible::before {
	border-color: rgba(255, 218, 111, .68);
	box-shadow:
		inset 0 0 18px rgba(255, 204, 62, .11),
		0 0 18px rgba(255, 187, 27, .18);
	transform: rotate(45deg) scale(.82);
	opacity: 1;
}

.ldg1__nav--previous:hover svg,
.ldg1__nav--previous:focus-visible svg {
	transform: translateX(-3px);
}

.ldg1__nav--next:hover svg,
.ldg1__nav--next:focus-visible svg {
	transform: translateX(3px);
}

.ldg1__nav:active {
	transform: scale(.92);
}

.ldg1__nav:disabled {
	cursor: default;
	opacity: .18;
	filter: none;
	transform: none;
}

.ldg1__nav:disabled::before {
	opacity: .24;
}

.ldg1__progress {
	position: absolute;
	left: 50%;
	bottom: 10px;
	width: min(260px, 34vw);
	height: 2px;
	overflow: visible;
	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(255, 222, 135, .12) 10%,
			rgba(255, 222, 135, .18) 50%,
			rgba(255, 222, 135, .12) 90%,
			transparent
		);
	border-radius: 999px;
	box-shadow:
		0 0 5px rgba(255, 194, 42, .12),
		0 0 14px rgba(255, 176, 14, .05);
	transform: translateX(-50%);
	pointer-events: none;
}

.ldg1__progress::before {
	position: absolute;
	inset: -5px 0;
	content: "";
	background:
		radial-gradient(
			circle,
			rgba(255, 224, 144, .55) 0 1.2px,
			transparent 1.8px
		)
		0 50% / 20% 100% repeat-x;
	opacity: .46;
	pointer-events: none;
}

.ldg1__progress-fill {
	position: relative;
	display: block;
	width: 16.6667%;
	height: 100%;
	background:
		linear-gradient(90deg, rgba(173, 110, 14, .9), #ffe69a 72%, #d49a20);
	border-radius: inherit;
	box-shadow:
		0 0 5px rgba(255, 216, 108, .7),
		0 0 15px rgba(255, 185, 24, .28);
	transition: width 520ms cubic-bezier(.16, .78, .22, 1);
}

.ldg1__progress-fill::after {
	position: absolute;
	right: -3px;
	top: 50%;
	width: 6px;
	height: 6px;
	content: "";
	background: #ffe69a;
	border-radius: 50%;
	box-shadow:
		0 0 7px rgba(255, 229, 154, .9),
		0 0 18px rgba(255, 183, 21, .46);
	transform: translateY(-50%);
}

.ldg1__counter {
	position: absolute;
	left: 50%;
	bottom: 22px;
	display: inline-flex;
	align-items: baseline;
	margin: 0;
	gap: 4px;
	color: rgba(255, 228, 157, .5);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 10px;
	letter-spacing: .08em;
	white-space: nowrap;
	text-shadow:
		0 0 8px rgba(255, 204, 67, .16),
		0 1px 2px rgba(0, 0, 0, .88);
	transform: translateX(-50%);
	pointer-events: none;
}

.ldg1__counter [data-ldg1-current] {
	color: rgba(255, 237, 185, .92);
	font-size: 18px;
	text-shadow:
		0 0 9px rgba(255, 213, 102, .24),
		0 1px 2px rgba(0, 0, 0, .9);
}


/* =========================================================
   8. INSTRUCTION, PAGE LINKS AND SELECTION TOAST
   ========================================================= */

.ldg1__instruction {
	position: absolute;
	z-index: 20;
	left: 50%;
	bottom: max(74px, calc(env(safe-area-inset-bottom) + 74px));
	margin: 0;
	color: rgba(255, 229, 166, .42);
	font-size: 8px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	text-shadow:
		0 0 8px rgba(255, 207, 80, .16),
		0 1px 2px rgba(0, 0, 0, .9);
	transform: translateX(-50%) perspective(180px) rotateX(10deg);
	white-space: nowrap;
	animation: ldg1-instruction-fade 7s ease forwards;
	pointer-events: none;
}

.ldg1__instruction-mobile {
	display: none;
}

.ldg1__page-link {
	position: absolute;
	z-index: 40;
	top: max(20px, env(safe-area-inset-top));
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 3px 4px;
	gap: 7px;
	color: rgba(255, 231, 171, .68);
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(226, 170, 47, .3);
	border-radius: 0;
	box-shadow: none;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .16em;
	text-decoration: none;
	text-transform: uppercase;
	text-shadow: 0 0 8px rgba(255, 199, 50, .12);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition:
		color 220ms ease,
		border-color 220ms ease,
		text-shadow 220ms ease,
		transform 220ms ease;
}

.ldg1__page-link--back {
	left: 22px;
}

.ldg1__page-link--next {
	right: 22px;
}

.ldg1__page-link:hover,
.ldg1__page-link:focus-visible {
	color: #fff0b1;
	border-color: rgba(255, 214, 104, .72);
	text-shadow: 0 0 12px rgba(255, 199, 50, .28);
	transform: translateY(-1px);
}

.ldg1__selection {
	position: absolute;
	z-index: 35;
	left: 50%;
	top: 15%;
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	padding: 0;
	gap: 10px;
	color: rgba(255, 239, 197, .82);
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 0;
	filter: blur(3px);
	transform: translate(-50%, 12px) scale(.94);
	transition:
		opacity 420ms ease,
		filter 520ms ease,
		transform 720ms cubic-bezier(.16, .78, .22, 1);
	pointer-events: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.ldg1__selection.is-visible {
	opacity: 1;
	filter: blur(0);
	transform: translate(-50%, 0) scale(1);
}

.ldg1__selection span {
	color: var(--ldg1-gold-bright);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 20px;
	text-shadow:
		0 0 10px rgba(255, 210, 84, .3),
		0 1px 2px rgba(0, 0, 0, .9);
}

.ldg1__selection strong {
	font-size: 8px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-shadow:
		0 0 8px rgba(255, 210, 84, .16),
		0 1px 2px rgba(0, 0, 0, .9);
}

@keyframes ldg1-instruction-fade {
	0%, 60% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}


/* =========================================================
   9. PORTRAIT MOBILE LAYOUT
   ========================================================= */

@media (max-width: 768px) and (orientation: portrait) {
	.ldg1__viewport {
		scroll-snap-type: x mandatory;
		cursor: default;
	}

	.ldg1__track--desktop {
		display: none;
	}

	.ldg1__track--mobile {
		display: flex;
		align-items: stretch;
		width: max-content;
		height: 100%;
		padding-inline: 8vw;
		gap: 3vw;
	}

	.ldg1__hud {
		bottom: max(12px, env(safe-area-inset-bottom));
		height: 56px;
	}

	.ldg1__nav,
	.ldg1__nav:hover,
	.ldg1__nav:focus,
	.ldg1__nav:active {
		width: 46px;
		height: 46px;
	}

	.ldg1__nav--previous {
		left: 4px;
	}

	.ldg1__nav--next {
		right: 4px;
	}

	.ldg1__nav svg {
		width: 22px;
		height: 22px;
	}

	.ldg1__progress {
		bottom: 8px;
		width: 50vw;
	}

	.ldg1__counter {
		bottom: 20px;
	}

	.ldg1__instruction-desktop {
		display: none;
	}

	.ldg1__instruction-mobile {
		display: inline;
	}

	.ldg1__caption {
		opacity: 1;
		transform: translate(-50%, 0) scale(1);
	}

	.ldg1__selection {
		top: 12%;
	}

	.ldg1__page-link {
		min-height: 34px;
		padding-inline: 11px;
		font-size: 8px;
	}
}


/* =========================================================
   10. SHORT VIEWPORTS AND WORDPRESS ADMIN BAR
   ========================================================= */

@media (max-height: 640px) {
	.ldg1__hud {
		bottom: max(8px, env(safe-area-inset-bottom));
	}

	.ldg1__instruction {
		display: none;
	}

	.ldg1__caption {
		bottom: -43px;
	}
}

body.admin-bar .ldg1 {
	top: 32px;
	height: calc(100vh - 32px);
	height: calc(100svh - 32px);
}

@media (max-width: 782px) {
	body.admin-bar .ldg1 {
		top: 46px;
		height: calc(100vh - 46px);
		height: calc(100svh - 46px);
	}
}


/* =========================================================
   11. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.ldg1__artwork-shell.has-gallery-frame::before {
		animation: none !important;
	}

	.ldg1__viewport {
		scroll-behavior: auto !important;
	}

	.ldg1 *,
	.ldg1 *::before,
	.ldg1 *::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}
}


/* =========================================================
   GALLERY ONE – STATIC FRAMES + IMMEDIATE INTERACTION STOP
   ========================================================= */

/* Frames and artwork never move or zoom when hovered, focused or selected. */
.ldg1__exhibit:hover .ldg1__artwork-shell,
.ldg1__exhibit:focus-visible .ldg1__artwork-shell,
.ldg1__exhibit.is-current .ldg1__artwork-shell,
.ldg1__mobile-exhibit:hover .ldg1__artwork-shell,
.ldg1__mobile-exhibit:focus-visible .ldg1__artwork-shell,
.ldg1__mobile-exhibit.is-current .ldg1__artwork-shell,
.ldg1__exhibit:hover .ldg1__artwork,
.ldg1__exhibit:focus-visible .ldg1__artwork,
.ldg1__mobile-exhibit:hover .ldg1__artwork,
.ldg1__mobile-exhibit:focus-visible .ldg1__artwork {
	transform: none !important;
}

/* The supplied transparent frame assets keep their original fitted scale. */
.ldg1__artwork-shell.has-gallery-frame .ldg1__artwork,
.ldg1__exhibit:hover .ldg1__artwork-shell.has-gallery-frame .ldg1__artwork,
.ldg1__exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame .ldg1__artwork,
.ldg1__mobile-exhibit:hover .ldg1__artwork-shell.has-gallery-frame .ldg1__artwork,
.ldg1__mobile-exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame .ldg1__artwork {
	transform: scale(1.025) !important;
}

.ldg1__artwork-shell--graphiti .ldg1__artwork,
.ldg1__exhibit:hover .ldg1__artwork-shell--graphiti .ldg1__artwork,
.ldg1__mobile-exhibit:hover .ldg1__artwork-shell--graphiti .ldg1__artwork {
	transform: scale(1.012) !important;
}

.ldg1__artwork-shell--heavy-gold .ldg1__artwork,
.ldg1__exhibit:hover .ldg1__artwork-shell--heavy-gold .ldg1__artwork,
.ldg1__mobile-exhibit:hover .ldg1__artwork-shell--heavy-gold .ldg1__artwork {
	transform: scale(1.055) !important;
}

/* No titles, captions or selected-exhibit wording appear over the gallery. */
.ldg1__caption,
.ldg1__selection {
	display: none !important;
}

/* Once a person touches, drags, wheels or presses a navigation key, any
   component-driven movement is forced into a stopped state immediately. */
.ldg1.has-user-interacted .ldg1__track,
.ldg1.has-user-interacted .ldg1__viewport {
	animation-play-state: paused !important;
}


/* =========================================================
   GALLERY ONE – LATLEY WALK-IN FOCUS + ENTRANCE-STYLE AUDIO
   ========================================================= */

.ldg1 {
	--ldg1-focus-x: 50%;
	--ldg1-focus-y: 46%;
}

.ldg1__viewport {
	transform: translateZ(0) scale(1);
	transform-origin: var(--ldg1-focus-x) var(--ldg1-focus-y);
	transition: filter 1.4s ease;
	will-change: transform, filter;
}

.ldg1::after {
	position: absolute;
	z-index: 24;
	inset: 0;
	content: "";
	background:
		radial-gradient(circle at var(--ldg1-focus-x) var(--ldg1-focus-y), transparent 0%, transparent 28%, rgba(0, 0, 0, .18) 62%, rgba(0, 0, 0, .48) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .15));
	opacity: 0;
	transition: opacity 1.25s ease;
	pointer-events: none;
}

.ldg1.is-walking-to-artwork .ldg1__viewport {
	filter: saturate(1.05) contrast(1.025);
}

.ldg1.is-walking-to-artwork::after {
	opacity: 1;
}


.ldg1.is-walking-to-artwork .ldg1__hud,
.ldg1.is-walking-to-artwork .ldg1__instruction,
.ldg1.is-walking-to-artwork .ldg1__page-link {
	opacity: 0;
	pointer-events: none;
	transition: opacity 480ms ease;
}

.ldg1__soundtrack {
	display: none;
}

/* =========================================================
   23. COMPACT BLACK-HOLE AUDIO CONSOLE
   ========================================================= */

.ld-audio-console-shell {
	position: fixed;
	z-index: 1000002;
	top: max(10px, env(safe-area-inset-top));
	isolation: isolate;
	perspective: 950px;
	transform-style: preserve-3d;
	left: 50%;
	width: min(680px, calc(100vw - 24px));
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(-50%, -120%, 0);
	transition:
		opacity 320ms ease,
		visibility 0s linear 900ms;
}

.ldg1:not(.is-audio-console-visible) .ld-audio-console-shell {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transform: translate3d(-50%, -130%, 0) !important;
	animation: none !important;
}

.ld-audio-console-shell::before,
.ld-audio-console-shell::after {
	position: absolute;
	left: 50%;
	content: "";
	pointer-events: none;
	opacity: 0;
	transition: opacity 420ms ease;
}

.ld-audio-console-shell::before {
	top: -12px;
	width: min(70%, 420px);
	height: 28px;
	transform: translateX(-50%);
	border-radius: 0 0 26px 26px;
	background:
		linear-gradient(180deg, rgba(255, 248, 222, .18), rgba(255, 210, 78, .08) 36%, rgba(75, 198, 255, .08) 68%, transparent 100%),
		radial-gradient(ellipse at center, rgba(255, 214, 92, .28), rgba(255, 214, 92, .08) 54%, transparent 78%);
	filter: blur(4px) drop-shadow(0 0 12px rgba(255, 209, 88, .18));
}

.ld-audio-console-shell::after {
	top: -3px;
	width: min(58%, 350px);
	height: 3px;
	transform: translateX(-50%);
	border-radius: 999px;
	background: linear-gradient(90deg, transparent, rgba(164, 233, 255, .75) 18%, rgba(255, 225, 136, .95) 50%, rgba(164, 233, 255, .75) 82%, transparent);
	box-shadow: 0 0 14px rgba(164, 233, 255, .32), 0 0 18px rgba(255, 204, 77, .26);
}

.ldg1.is-audio-console-visible .ld-audio-console-shell {
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
	animation:
		ld-audio-console-arrive 1.05s cubic-bezier(.16, .78, .22, 1) both,
		ld-audio-console-float 5.8s ease-in-out 1.05s infinite;
}

.ldg1.is-audio-console-visible .ld-audio-console-shell::before,
.ldg1.is-audio-console-visible .ld-audio-console-shell::after {
	opacity: 1;
}

.ld-audio-console {
	--ld-audio-gold: #f3c654;
	--ld-audio-gold-light: #fff0aa;
	--ld-audio-gold-deep: #9d6514;
	--ld-audio-progress: 0%;
	--ld-volume: 60%;

	position: relative;
	z-index: 10;
	display: grid;
	grid-template-columns: 76px auto minmax(190px, 1fr) 118px;
	align-items: center;
	width: 100%;
	min-height: 58px;
	padding: 7px 34px 7px 9px;
	gap: 9px;
	isolation: isolate;
	overflow: hidden;
	color: var(--ld-audio-gold-light);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .105), transparent 28%),
		radial-gradient(circle at 52% -58%, rgba(255, 214, 92, .15), transparent 48%),
		linear-gradient(135deg, rgba(25, 25, 25, .975), rgba(1, 1, 1, .99) 57%, rgba(18, 12, 3, .985));
	border: 1px solid rgba(255, 217, 109, .72);
	border-radius: 18px;
	box-shadow:
		0 0 0 1px rgba(92, 52, 3, .96),
		0 0 0 3px rgba(255, 203, 68, .13),
		inset 0 1px 0 rgba(255, 249, 220, .22),
		inset 0 -1px 0 rgba(255, 183, 39, .16),
		0 11px 28px rgba(0, 0, 0, .46),
		0 0 24px rgba(255, 190, 38, .11);
	transform-origin: 50% -12px;
	transition:
		opacity 440ms ease,
		transform 600ms cubic-bezier(.14, .82, .19, 1),
		filter 500ms ease,
		box-shadow 320ms ease;
	backdrop-filter: blur(16px) saturate(1.22);
	-webkit-backdrop-filter: blur(16px) saturate(1.22);
}

.ld-audio-console::before,
.ld-audio-console::after {
	position: absolute;
	content: "";
	pointer-events: none;
}

.ld-audio-console::before {
	z-index: -1;
	inset: 3px;
	border: 1px solid rgba(255, 215, 102, .19);
	border-radius: 14px;
}

.ld-audio-console::after {
	z-index: 7;
	top: 0;
	left: -42%;
	width: 28%;
	height: 100%;
	background: linear-gradient(
		100deg,
		transparent,
		rgba(255, 255, 255, .05) 38%,
		rgba(255, 229, 152, .19) 50%,
		rgba(255, 255, 255, .04) 63%,
		transparent
	);
	transform: skewX(-18deg);
	opacity: 0;
}

.ldg1.is-audio-playing .ld-audio-console {
	box-shadow:
		0 0 0 1px rgba(92, 52, 3, .96),
		0 0 0 3px rgba(255, 203, 68, .18),
		inset 0 1px 0 rgba(255, 249, 220, .26),
		inset 0 -1px 0 rgba(255, 183, 39, .18),
		0 12px 31px rgba(0, 0, 0, .48),
		0 0 30px rgba(255, 190, 38, .2);
}

.ldg1.is-audio-playing .ld-audio-console::after {
	opacity: 1;
	animation: ld-audio-console-sheen 6.8s ease-in-out infinite;
}

.ld-audio-console__shine {
	position: absolute;
	z-index: -1;
	inset: 0;
	background:
		radial-gradient(circle at 18% 0%, rgba(255, 243, 196, .1), transparent 27%),
		radial-gradient(circle at 82% 100%, rgba(255, 188, 35, .07), transparent 31%);
	pointer-events: none;
}

/*
 * Central plug-hole transition.
 * The complete controller compresses towards its own centre, spirals into
 * the dark portal and only then reveals the compact speaker tab.
 */
.ldg1.is-audio-console-collapsing .ld-audio-console {
	pointer-events: none;
	animation: ld-audio-console-plughole-drain 780ms cubic-bezier(.5, .02, .2, 1) both;
}

.ldg1.is-audio-console-collapsed .ld-audio-console {
	opacity: 0;
	pointer-events: none;
	filter: blur(7px) brightness(1.45) saturate(1.35);
	clip-path: circle(.1% at 50% 50%);
	-webkit-clip-path: circle(.1% at 50% 50%);
	transform: translate3d(0, 29px, 0) scale(.02) rotate(190deg);
}

.ldg1.is-audio-console-expanding .ld-audio-console {
	animation: ld-audio-console-plughole-return 780ms cubic-bezier(.12, .84, .2, 1) both;
}

.ld-audio-console__suction-hole {
	position: absolute;
	z-index: 30;
	top: 50%;
	left: 50%;
	display: block;
	width: 74px;
	height: 25px;
	opacity: 0;
	pointer-events: none;
	filter: blur(.2px);
	transform: translate(-50%, -50%) scale(.15);
	transform-origin: 50% 50%;
}

.ld-audio-console__suction-orbit,
.ld-audio-console__suction-core {
	position: absolute;
	inset: 0;
	display: block;
	border-radius: 50%;
}

.ld-audio-console__suction-orbit {
	background:
		radial-gradient(ellipse at center, transparent 0 26%, rgba(255, 193, 66, .7) 31%, transparent 48%),
		conic-gradient(from 0deg, #2a0c00, #ff9f22 15%, #fff0a4 27%, #b83906 43%, #120300 56%, #ffc955 72%, #6c1d00 89%, #2a0c00);
	box-shadow:
		0 0 10px rgba(255, 135, 20, .65),
		0 0 24px rgba(255, 198, 68, .35);
}

.ld-audio-console__suction-core {
	inset: 6px 18px;
	background: radial-gradient(ellipse at center, #000 0 66%, #090300 82%, transparent 86%);
	box-shadow: inset 0 0 9px #000, 0 0 8px rgba(255, 173, 28, .25);
}

.ldg1.is-audio-console-collapsing .ld-audio-console__suction-hole {
	animation: ld-audio-plughole-open 780ms ease-out both;
}

.ldg1.is-audio-console-expanding .ld-audio-console__suction-hole {
	animation: ld-audio-plughole-close 780ms ease-out both;
}

.ldg1.is-audio-console-collapsing .ld-audio-console__suction-orbit,
.ldg1.is-audio-console-expanding .ld-audio-console__suction-orbit {
	animation: ld-blackhole-spin 420ms linear infinite;
}

.ld-audio-console__brand {
	display: grid;
	grid-template-rows: 24px auto;
	place-items: center;
	row-gap: 10px;
	min-width: 0;
	padding: 0 9px 0 2px;
	border-right: 1px solid rgba(255, 207, 76, .16);
}

/*
 * Use the official raster Lord Dancer logo, but recolour the black linework
 * into the same rich metallic gold family used across the transport panel.
 * Removing the old screen-blend approach keeps the mark bright, crisp and
 * consistently gold against the smoked-black console background.
 */
.ld-audio-console__logo {
	display: block;
	width: 30px;
	height: 24px;
	object-fit: contain;
	object-position: center;
	opacity: 1;
	mix-blend-mode: normal;
	filter:
		brightness(0)
		saturate(100%)
		invert(81%)
		sepia(61%)
		saturate(1163%)
		hue-rotate(356deg)
		brightness(101%)
		contrast(102%)
		drop-shadow(0 0 1px rgba(255, 240, 179, .95))
		drop-shadow(0 0 5px rgba(255, 196, 58, .42));
}

.ld-audio-console__album-button,
.ld-audio-console__album-button:hover,
.ld-audio-console__album-button:focus,
.ld-audio-console__album-button:active {
	min-width: 0;
	margin: 0;
	margin-top: 2px;
	padding: 1px 3px 0;
	color: rgba(255, 232, 166, .76);
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(255, 201, 56, .36) !important;
	border-radius: 0;
	box-shadow: none !important;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 6.5px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color 180ms ease, border-color 180ms ease, text-shadow 180ms ease;
}

.ld-audio-console__album-button:hover,
.ld-audio-console__album-button:focus-visible,
.ldg1.is-audio-album-open .ld-audio-console__album-button {
	color: #fff4bd;
	border-bottom-color: #f5c64c !important;
	text-shadow: 0 0 8px rgba(255, 195, 40, .52);
	outline: 0;
}

.ld-audio-console__transport,
.ld-audio-console__volume {
	display: flex;
	align-items: center;
	gap: 5px;
}

.ld-audio-console__volume {
	justify-content: flex-end;
	min-width: 0;
	padding: 3px 2px 3px 8px;
	border-left: 1px solid rgba(255, 207, 76, .14);
	border-radius: 0 12px 12px 0;
	background: linear-gradient(90deg, rgba(255, 202, 54, .025), rgba(255, 202, 54, .055));
}

.ld-audio-console__button,
.ld-audio-console__button:hover,
.ld-audio-console__button:focus,
.ld-audio-console__button:active,
.ld-audio-console__button:visited {
	position: relative;
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	color: var(--ld-audio-gold-light);
	background:
		radial-gradient(circle at 38% 25%, rgba(255, 255, 255, .13), transparent 31%),
		linear-gradient(145deg, #181818, #020202 64%, #231300);
	border: 1px solid rgba(255, 207, 79, .74);
	border-radius: 50%;
	box-shadow:
		0 0 0 1px rgba(52, 29, 0, .9),
		inset 0 1px 1px rgba(255, 242, 196, .16),
		inset 0 -3px 7px rgba(0, 0, 0, .72),
		0 3px 8px rgba(0, 0, 0, .32),
		0 0 8px rgba(255, 186, 32, .1);
	outline: 0;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transform: translateZ(0);
	transition:
		transform 170ms ease,
		border-color 180ms ease,
		box-shadow 200ms ease,
		color 180ms ease;
}

.ld-audio-console__button--play,
.ld-audio-console__button--play:hover,
.ld-audio-console__button--play:focus,
.ld-audio-console__button--play:active {
	width: 36px;
	height: 36px;
	color: #120b02;
	background:
		radial-gradient(circle at 38% 24%, rgba(255, 255, 255, .24), transparent 29%),
		linear-gradient(145deg, #f4ce69, #b97917 56%, #623804);
	border-color: #ffe69a;
	box-shadow:
		0 0 0 1px rgba(59, 32, 0, .96),
		0 0 0 2px rgba(255, 213, 94, .4),
		inset 0 1px 1px rgba(255, 255, 255, .52),
		inset 0 -5px 9px rgba(83, 40, 0, .35),
		0 4px 10px rgba(0, 0, 0, .38),
		0 0 13px rgba(255, 190, 31, .23);
}

.ld-audio-console__button:hover {
	color: #fff7d3;
	border-color: #fff0a8;
	box-shadow:
		0 0 0 1px rgba(52, 29, 0, .9),
		inset 0 1px 1px rgba(255, 242, 196, .22),
		inset 0 -3px 7px rgba(0, 0, 0, .68),
		0 4px 11px rgba(0, 0, 0, .38),
		0 0 13px rgba(255, 194, 38, .27);
	transform: translateY(-1px) scale(1.035);
}

.ld-audio-console__button--play:hover {
	color: #080501;
}

.ld-audio-console__button:active {
	transform: translateY(1px) scale(.96);
}

.ld-audio-console__button:focus-visible,
.ld-audio-console__collapse:focus-visible,
.ld-audio-blackhole-tab:focus-visible,
.ld-audio-album-card__close:focus-visible {
	outline: 2px solid #fff2b2;
	outline-offset: 3px;
}

.ld-audio-console__button svg {
	position: absolute;
	inset: 50% auto auto 50%;
	width: 16px;
	height: 16px;
	fill: currentColor;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	transform: translate(-50%, -50%);
	filter: drop-shadow(0 0 4px rgba(255, 210, 91, .25));
	pointer-events: none;
}

.ld-audio-console__button--play svg {
	width: 19px;
	height: 19px;
}

.ld-audio-console__icon-pause,
.ld-audio-console__icon-muted {
	display: none;
}

.ldg1.is-audio-playing .ld-audio-console__icon-play {
	display: none;
}

.ldg1.is-audio-playing .ld-audio-console__icon-pause,
.ldg1.is-audio-muted .ld-audio-console__icon-muted {
	display: block;
}

.ldg1.is-audio-muted .ld-audio-console__icon-volume {
	display: none;
}

.ld-audio-console__sound-wave {
	fill: none;
}

.ld-audio-console__display {
	position: relative;
	display: grid;
	grid-template-rows: 25px 14px;
	align-items: center;
	min-width: 0;
	padding: 2px 8px 0;
	border-right: 1px solid rgba(255, 207, 76, .12);
	border-left: 1px solid rgba(255, 207, 76, .12);
	background:
		linear-gradient(180deg, rgba(255, 216, 109, .025), transparent),
		linear-gradient(90deg, transparent, rgba(255, 201, 63, .04), transparent);
}

.ld-audio-console__waveform {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	gap: 3px;
	overflow: hidden;
}

.ld-audio-console__waveform::before,
.ld-audio-console__waveform::after {
	position: absolute;
	content: "";
	pointer-events: none;
}

.ld-audio-console__waveform::before {
	z-index: -1;
	left: 7%;
	right: 7%;
	top: 50%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 208, 80, .31), transparent);
	box-shadow: 0 0 8px rgba(255, 190, 33, .16);
}

.ld-audio-console__waveform::after {
	top: 0;
	bottom: 0;
	left: -20%;
	width: 18%;
	background: linear-gradient(90deg, transparent, rgba(255, 242, 194, .32), transparent);
	opacity: 0;
}

.ldg1.is-audio-playing .ld-audio-console__waveform::after {
	opacity: 1;
	animation: ld-audio-wave-scan 3.4s linear infinite;
}

.ld-audio-console__waveform span {
	--ld-audio-level: .25;
	--ld-audio-glow: .25;
	position: relative;
	z-index: 1;
	display: block;
	flex: 1 1 0;
	width: 3px;
	max-width: 4px;
	height: 22px;
	min-height: 3px;
	border-radius: 999px;
	background: linear-gradient(180deg, #fff6c4 0%, #f6cb59 26%, #d9911e 70%, #7e4205 100%);
	box-shadow:
		0 0 calc(2px + (7px * var(--ld-audio-glow))) rgba(255, 193, 38, calc(.18 + (.5 * var(--ld-audio-glow)))),
		inset 0 1px 0 rgba(255, 255, 255, .56);
	transform: scaleY(var(--ld-audio-level));
	transform-origin: 50% 50%;
	transition: transform 70ms linear, box-shadow 90ms linear;
	will-change: transform, box-shadow;
}

.ld-audio-console__timeline {
	display: grid;
	grid-template-columns: 30px minmax(84px, 1fr) 30px;
	align-items: center;
	gap: 5px;
	min-width: 0;
}

.ld-audio-console__timeline time {
	color: rgba(255, 231, 166, .8);
	font-family: "Courier New", Courier, monospace;
	font-size: 8px;
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
	text-align: center;
	white-space: nowrap;
}

/* Strong browser/theme reset: no white slider wells. */
.ld-audio-console input[type="range"].ld-audio-console__range,
.ld-audio-console input[type="range"].ld-audio-console__range:hover,
.ld-audio-console input[type="range"].ld-audio-console__range:focus,
.ld-audio-console input[type="range"].ld-audio-console__range:active {
	position: relative;
	display: block;
	width: 100%;
	height: 16px;
	min-height: 0;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: 0;
	-webkit-appearance: none !important;
	appearance: none !important;
	cursor: pointer;
}

.ld-audio-console__range::-webkit-slider-runnable-track {
	height: 3px;
	border: 0;
	border-radius: 999px;
	background:
		linear-gradient(
			90deg,
			var(--ld-audio-gold-light) 0%,
			var(--ld-audio-gold) var(--ld-range-fill, 0%),
			rgba(91, 64, 20, .9) var(--ld-range-fill, 0%),
			rgba(28, 22, 12, .96) 100%
		) !important;
	box-shadow:
		inset 0 1px 2px rgba(0, 0, 0, .95),
		0 0 5px rgba(255, 189, 31, .14);
}

.ld-audio-console__range::-moz-range-track {
	height: 3px;
	border: 0;
	border-radius: 999px;
	background: rgba(28, 22, 12, .96) !important;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .95);
}

.ld-audio-console__range::-moz-range-progress {
	height: 3px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--ld-audio-gold-light), var(--ld-audio-gold));
	box-shadow: 0 0 5px rgba(255, 189, 31, .2);
}

.ld-audio-console__range::-webkit-slider-thumb {
	width: 10px;
	height: 10px;
	margin-top: -3.5px;
	border: 1px solid #fff0ad;
	border-radius: 50%;
	background: radial-gradient(circle at 38% 32%, #fff9d5, #e3a52e 56%, #7e4304 100%);
	box-shadow: 0 0 0 2px rgba(67, 35, 0, .72), 0 0 7px rgba(255, 194, 37, .5);
	-webkit-appearance: none;
	appearance: none;
}

.ld-audio-console__range::-moz-range-thumb {
	width: 10px;
	height: 10px;
	border: 1px solid #fff0ad;
	border-radius: 50%;
	background: radial-gradient(circle at 38% 32%, #fff9d5, #e3a52e 56%, #7e4304 100%);
	box-shadow: 0 0 0 2px rgba(67, 35, 0, .72), 0 0 7px rgba(255, 194, 37, .5);
}

.ld-audio-console__range:focus-visible {
	outline: 2px solid #fff0a7 !important;
	outline-offset: 2px;
	border-radius: 999px !important;
}

.ld-audio-console__range--progress {
	--ld-range-fill: var(--ld-progress);
}

.ld-audio-console input[type="range"].ld-audio-console__range--volume {
	--ld-range-fill: var(--ld-volume);
	flex: 1 1 auto;
	width: 72px;
	min-width: 50px;
	max-width: 76px;
}

.ld-audio-console__button--volume {
	width: 29px;
	height: 29px;
}

.ld-audio-console__button--volume svg {
	width: 16px;
	height: 16px;
}

/*
 * Keep the original compact black-hole collapse control in the top-right of
 * the bar. The small gold chevron hangs immediately beneath it as a visual
 * hint without replacing the control itself.
 */
.ld-audio-console__collapse,
.ld-audio-console__collapse:hover,
.ld-audio-console__collapse:focus,
.ld-audio-console__collapse:active {
	position: absolute;
	z-index: 35;
	top: 5px;
	right: 6px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	color: #f6ce63;
	background:
		radial-gradient(circle at 50% 50%, #010101 0 28%, transparent 30%),
		conic-gradient(from 10deg, #7d4306, #ffe08a, #9a5607, #fff0ab, #7d4306);
	border: 1px solid rgba(255, 224, 137, .72);
	border-radius: 50%;
	box-shadow:
		0 0 0 1px #311b02,
		0 0 8px rgba(255, 190, 39, .23);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	overflow: visible;
	transform: translateZ(0);
	transition: transform 180ms ease, box-shadow 180ms ease, opacity 160ms ease;
}

.ld-audio-console__collapse::before,
.ld-audio-console__collapse::after {
	position: absolute;
	content: "";
	pointer-events: none;
}

.ld-audio-console__collapse::before {
	inset: 3px;
	border: 1px solid rgba(255, 226, 145, .72);
	border-right-color: transparent;
	border-bottom-color: rgba(119, 65, 5, .85);
	border-radius: 50%;
	animation: ld-blackhole-spin 2.3s linear infinite;
}

.ld-audio-console__collapse::after {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #000;
	box-shadow: 0 0 5px 2px rgba(255, 187, 35, .25);
}

.ld-audio-console__collapse-arrow {
	position: absolute;
	top: calc(100% + 4px);
	left: 50%;
	display: block;
	width: 11px;
	height: 8px;
	pointer-events: none;
	transform: translateX(-50%);
	animation: ld-audio-collapse-arrow-nudge 1.65s ease-in-out infinite;
}

.ld-audio-console__collapse-arrow svg {
	display: block;
	width: 11px;
	height: 8px;
	fill: none;
	stroke: #f7cf61;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 4px rgba(255, 197, 43, .72));
}

.ld-audio-console__collapse:hover,
.ld-audio-console__collapse:focus-visible {
	transform: scale(1.09);
	box-shadow:
		0 0 0 1px #311b02,
		0 0 13px rgba(255, 190, 39, .44);
}

.ld-audio-console__collapse:active {
	transform: scale(.95);
}

.ldg1.is-audio-console-collapsing .ld-audio-console__collapse {
	opacity: 0;
	transform: translateY(8px) scale(.35);
	transition: opacity 160ms ease, transform 260ms ease;
}

/*
 * Chained album-art panel.
 * The panel begins hidden behind the transport bar, drops on two small gold
 * chains, settles into a gentle suspended swing and reverses back behind the
 * controls when it is closed.
 */
.ld-audio-album-card {
	--ld-album-x: 0%;

	position: absolute;
	z-index: 2;
	top: calc(100% + 12px);
	left: 0;
	display: grid;
	grid-template-columns: 102px minmax(82px, 1fr);
	align-items: center;
	width: 220px;
	padding: 8px;
	gap: 9px;
	isolation: isolate;
	color: #fff0b0;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 25%),
		linear-gradient(135deg, rgba(20, 20, 20, .98), rgba(2, 2, 2, .99));
	border: 1px solid rgba(255, 209, 76, .68);
	border-radius: 15px;
	box-shadow:
		0 0 0 1px rgba(75, 42, 3, .94),
		0 15px 32px rgba(0, 0, 0, .5),
		0 0 25px rgba(255, 185, 29, .14);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform:
		translateX(var(--ld-album-x))
		translateY(-136px)
		rotateZ(-10deg)
		rotateX(-24deg)
		scale(.91);
	transform-origin: 50% -42px;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	will-change: transform, opacity;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* Two longer metallic necklace-style chain runs, tucked partly behind the
 * transport bar so the album card appears to swing from it naturally. */
.ld-audio-album-card::before,
.ld-audio-album-card::after {
	position: absolute;
	z-index: 3;
	top: -50px;
	width: 12px;
	height: 56px;
	content: "";
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='14' viewBox='0 0 12 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cellipse cx='6' cy='3.9' rx='3.15' ry='3.5' stroke='%23f3c654' stroke-width='1.15'/%3E%3Cellipse cx='6' cy='9.9' rx='3.15' ry='3.5' stroke='%23fff0aa' stroke-width='1.0'/%3E%3Cpath d='M6 6.9V7.95' stroke='%23d19a2a' stroke-width='1.0'/%3E%3C/g%3E%3C/svg%3E");
	background-position: center top;
	background-repeat: repeat-y;
	background-size: 12px 14px;
	filter:
		drop-shadow(0 1px 1px rgba(0, 0, 0, .78))
		drop-shadow(0 0 4px rgba(255, 190, 39, .36));
	pointer-events: none;
}

.ld-audio-album-card::before {
	left: 22px;
}

.ld-audio-album-card::after {
	right: 22px;
}

.ldg1.is-audio-album-open .ld-audio-album-card {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	animation:
		ld-audio-album-swing-down
		920ms
		cubic-bezier(.16, .82, .24, 1)
		both,
		ld-audio-album-gentle-swing
		4.8s
		ease-in-out
		920ms
		infinite;
}

.ldg1.is-audio-album-closing .ld-audio-album-card {
	opacity: 1;
	visibility: visible;
	pointer-events: none;
	animation:
		ld-audio-album-swing-up
		780ms
		cubic-bezier(.55, .02, .3, 1)
		both;
}

.ld-audio-album-card__art {
	position: relative;
	z-index: 2;
	width: 102px;
	aspect-ratio: 1;
	overflow: hidden;
	border: 1px solid rgba(255, 220, 111, .66);
	border-radius: 11px;
	box-shadow: 0 0 0 2px rgba(68, 38, 3, .9), 0 7px 18px rgba(0, 0, 0, .42);
}

.ld-audio-album-card__art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ld-audio-album-card__copy {
	position: relative;
	z-index: 2;
	display: grid;
	align-content: center;
	min-width: 0;
}

.ld-audio-album-card__copy span {
	color: rgba(255, 226, 143, .6);
	font-size: 7px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.ld-audio-album-card__copy strong {
	margin-top: 5px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	line-height: 1;
	text-shadow: 0 0 12px rgba(255, 190, 35, .35);
}

.ld-audio-album-card__copy small {
	margin-top: 5px;
	color: rgba(255, 238, 190, .72);
	font-size: 9px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ld-audio-album-card__close,
.ld-audio-album-card__close:hover,
.ld-audio-album-card__close:focus,
.ld-audio-album-card__close:active {
	position: absolute;
	z-index: 5;
	top: 4px;
	right: 4px;
	display: grid;
	place-items: center;
	width: 23px;
	height: 23px;
	margin: 0;
	padding: 0;
	color: #fff0b0;
	background: rgba(4, 4, 4, .87);
	border: 1px solid rgba(255, 209, 76, .62);
	border-radius: 50%;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .34);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

@keyframes ld-audio-album-swing-down {
	0% {
		opacity: 0;
		transform:
			translateX(var(--ld-album-x))
			translateY(-136px)
			rotateZ(-10deg)
			rotateX(-24deg)
			scale(.91);
	}

	24% {
		opacity: 1;
	}

	43% {
		transform:
			translateX(var(--ld-album-x))
			translateY(9px)
			rotateZ(8deg)
			rotateX(1deg)
			scale(1);
	}

	60% {
		transform:
			translateX(var(--ld-album-x))
			translateY(-4px)
			rotateZ(-5deg)
			rotateX(0deg)
			scale(1);
	}

	74% {
		transform:
			translateX(var(--ld-album-x))
			translateY(2px)
			rotateZ(3deg)
			rotateX(0deg)
			scale(1);
	}

	87% {
		transform:
			translateX(var(--ld-album-x))
			translateY(-1px)
			rotateZ(-1.5deg)
			rotateX(0deg)
			scale(1);
	}

	100% {
		opacity: 1;
		transform:
			translateX(var(--ld-album-x))
			translateY(0)
			rotateZ(0deg)
			rotateX(0deg)
			scale(1);
	}
}

@keyframes ld-audio-album-gentle-swing {
	0%, 100% {
		transform:
			translateX(var(--ld-album-x))
			translateY(0)
			rotateZ(-1.15deg)
			rotateX(0deg)
			scale(1);
	}

	50% {
		transform:
			translateX(var(--ld-album-x))
			translateY(1.5px)
			rotateZ(1.25deg)
			rotateX(.35deg)
			scale(1);
	}
}

@keyframes ld-audio-album-swing-up {
	0% {
		opacity: 1;
		transform:
			translateX(var(--ld-album-x))
			translateY(0)
			rotateZ(0deg)
			rotateX(0deg)
			scale(1);
	}

	20% {
		transform:
			translateX(var(--ld-album-x))
			translateY(3px)
			rotateZ(4deg)
			rotateX(0deg)
			scale(1);
	}

	43% {
		transform:
			translateX(var(--ld-album-x))
			translateY(-16px)
			rotateZ(-6deg)
			rotateX(-3deg)
			scale(.99);
	}

	74% {
		opacity: 1;
		transform:
			translateX(var(--ld-album-x))
			translateY(-105px)
			rotateZ(8deg)
			rotateX(-16deg)
			scale(.95);
	}

	100% {
		opacity: 0;
		transform:
			translateX(var(--ld-album-x))
			translateY(-136px)
			rotateZ(-10deg)
			rotateX(-24deg)
			scale(.91);
	}
}

/* Collapsed black-hole speaker tab hanging from the page top. */
.ld-audio-blackhole-tab,
.ld-audio-blackhole-tab:hover,
.ld-audio-blackhole-tab:focus,
.ld-audio-blackhole-tab:active {
	position: fixed;
	z-index: 1000003;
	top: -7px;
	left: 50%;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	color: #ffe392;
	background: transparent;
	border: 0;
	border-radius: 0 0 50% 50%;
	box-shadow: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate3d(-50%, -22px, 0) scale(.28) rotate(-80deg);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition:
		opacity 260ms ease 180ms,
		transform 480ms cubic-bezier(.15, .82, .22, 1) 130ms,
		visibility 0s linear 520ms;
}

.ldg1.is-audio-console-visible.is-audio-console-collapsed .ld-audio-blackhole-tab {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate3d(-50%, 0, 0) scale(1) rotate(0deg);
	transition-delay: 0s;
}

.ld-audio-blackhole-tab::before {
	position: absolute;
	z-index: -3;
	top: 0;
	left: 50%;
	width: 18px;
	height: 12px;
	content: "";
	background: linear-gradient(180deg, #b97b18, #4e2b03);
	border-right: 1px solid #f7cf68;
	border-left: 1px solid #f7cf68;
	transform: translateX(-50%);
}

.ld-audio-blackhole-tab__orbit,
.ld-audio-blackhole-tab__core {
	position: absolute;
	inset: 8px 3px 1px;
	border-radius: 50%;
	pointer-events: none;
}

.ld-audio-blackhole-tab__orbit {
	background:
		radial-gradient(ellipse at center, transparent 0 27%, rgba(255, 153, 38, .55) 31%, transparent 48%),
		conic-gradient(from 0deg, #3b1700, #ffb13a 18%, #fff4c1 29%, #b73d08 42%, #1a0500 55%, #ffcc62 73%, #5d1800 88%, #3b1700);
	box-shadow: 0 0 14px rgba(255, 135, 19, .55), 0 0 24px rgba(255, 196, 64, .25);
	animation: ld-blackhole-spin 2.2s linear infinite;
}

.ld-audio-blackhole-tab__core {
	inset: 15px 10px 8px;
	background: radial-gradient(circle at 46% 44%, #090909, #000 68%);
	box-shadow: inset 0 0 8px #000, 0 0 7px 2px rgba(255, 175, 37, .18);
}

.ld-audio-blackhole-tab svg {
	position: relative;
	z-index: 2;
	width: 18px;
	height: 18px;
	margin-top: 7px;
	fill: currentColor;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 4px rgba(255, 209, 93, .75));
}

.ld-audio-blackhole-tab svg path:last-child {
	fill: none;
}

.ld-audio-blackhole-tab:hover {
	filter: brightness(1.18);
	transform: translate3d(-50%, 1px, 0) scale(1.08) rotate(0deg) !important;
}

@keyframes ld-audio-console-arrive {
	0% {
		opacity: 0;
		transform: translate3d(-50%, -120%, 0);
	}

	68% {
		opacity: 1;
		transform: translate3d(-50%, 8px, 0);
	}

	100% {
		opacity: 1;
		transform: translate3d(-50%, 0, 0);
	}
}

@keyframes ld-audio-console-float {
	0%,
	100% {
		transform: translate3d(-50%, 0, 0);
	}

	50% {
		transform: translate3d(-50%, 4px, 0);
	}
}

@keyframes ld-audio-console-sheen {
	0%, 56% { left: -42%; }
	78%, 100% { left: 118%; }
}

@keyframes ld-audio-wave-scan {
	0% { left: -20%; }
	100% { left: 105%; }
}

@keyframes ld-blackhole-spin {
	to { transform: rotate(360deg); }
}

@keyframes ld-audio-collapse-arrow-nudge {
	0%, 100% { opacity: .62; transform: translateX(-50%) translateY(0); }
	50% { opacity: 1; transform: translateX(-50%) translateY(3px); }
}

@keyframes ld-audio-console-plughole-drain {
	0% {
		opacity: 1;
		filter: none;
		clip-path: inset(0 round 18px);
		-webkit-clip-path: inset(0 round 18px);
		transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
	}
	24% {
		opacity: 1;
		filter: brightness(1.08) saturate(1.08);
		clip-path: inset(4% 4% round 23px);
		-webkit-clip-path: inset(4% 4% round 23px);
		transform: translate3d(0, 5px, 0) scale(.96, .88) rotate(0deg);
	}
	52% {
		opacity: 1 !important;
		filter: blur(.45px) brightness(1.22) saturate(1.18);
		clip-path: inset(13% 24% round 48%);
		-webkit-clip-path: inset(13% 24% round 48%);
		transform: translate3d(0, 15px, 0) scale(.72, .62) rotate(8deg);
	}
	74% {
		opacity: .72;
		filter: blur(2px) brightness(1.5) saturate(1.35);
		clip-path: inset(34% 43% round 50%);
		-webkit-clip-path: inset(34% 43% round 50%);
		transform: translate3d(0, 25px, 0) scale(.28, .28) rotate(92deg);
	}
	100% {
		opacity: 0;
		filter: blur(7px) brightness(1.45) saturate(1.35);
		clip-path: circle(.1% at 50% 50%);
		-webkit-clip-path: circle(.1% at 50% 50%);
		transform: translate3d(0, 29px, 0) scale(.02) rotate(190deg);
	}
}

@keyframes ld-audio-console-plughole-return {
	0% {
		opacity: 0;
		filter: blur(7px) brightness(1.45) saturate(1.35);
		clip-path: circle(.1% at 50% 50%);
		-webkit-clip-path: circle(.1% at 50% 50%);
		transform: translate3d(0, 29px, 0) scale(.02) rotate(-190deg);
	}
	36% {
		opacity: .72;
		filter: blur(2px) brightness(1.42) saturate(1.3);
		clip-path: inset(34% 43% round 50%);
		-webkit-clip-path: inset(34% 43% round 50%);
		transform: translate3d(0, 24px, 0) scale(.3) rotate(-86deg);
	}
	72% {
		opacity: 1;
		filter: blur(0) brightness(1.08) saturate(1.08);
		clip-path: inset(4% 4% round 23px);
		-webkit-clip-path: inset(4% 4% round 23px);
		transform: translate3d(0, 3px, 0) scale(1.015, .96) rotate(0deg);
	}
	100% {
		opacity: 1;
		filter: none;
		clip-path: inset(0 round 18px);
		-webkit-clip-path: inset(0 round 18px);
		transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
	}
}

@keyframes ld-audio-plughole-open {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(.12); }
	24% { opacity: .2; transform: translate(-50%, -50%) scale(.42); }
	58% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
	82% { opacity: 1; transform: translate(-50%, -50%) scale(.82); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(.28); }
}

@keyframes ld-audio-plughole-close {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(.28); }
	22% { opacity: 1; transform: translate(-50%, -50%) scale(.82); }
	54% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
	82% { opacity: .25; transform: translate(-50%, -50%) scale(.42); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(.12); }
}


/* =========================================================
   24. AUDIO CONSOLE – TABLET AND MOBILE
   ========================================================= */

@media (max-width: 760px) {
	.ld-audio-console-shell {
		top: max(7px, env(safe-area-inset-top));
		width: min(600px, calc(100vw - 14px));
	}

	.ld-audio-console {
		grid-template-columns: 58px auto minmax(120px, 1fr) 94px;
		min-height: 54px;
		padding: 6px 31px 6px 7px;
		gap: 6px;
		border-radius: 16px;
	}

	.ld-audio-console__brand {
		grid-template-rows: 25px auto;
		row-gap: 6px;
		padding-right: 4px;
	}

	.ld-audio-console__logo {
		width: 31px;
		height: 25px;
	}

	.ld-audio-console__album-button,
	.ld-audio-console__album-button:hover,
	.ld-audio-console__album-button:focus,
	.ld-audio-console__album-button:active {
		font-size: 5.7px;
		letter-spacing: .08em;
	}

	.ld-audio-console__button,
	.ld-audio-console__button:hover,
	.ld-audio-console__button:focus,
	.ld-audio-console__button:active {
		width: 27px;
		height: 27px;
	}

	.ld-audio-console__button--play,
	.ld-audio-console__button--play:hover,
	.ld-audio-console__button--play:focus,
	.ld-audio-console__button--play:active {
		width: 32px;
		height: 32px;
	}

	.ld-audio-console__button svg {
		width: 14px;
		height: 14px;
	}

	.ld-audio-console__button--play svg {
		width: 17px;
		height: 17px;
	}

	.ld-audio-console__display {
		grid-template-rows: 22px 13px;
		padding-right: 5px;
		padding-left: 5px;
	}

	.ld-audio-console__waveform {
		height: 21px;
		gap: 2px;
	}

	.ld-audio-console__waveform span {
		height: 19px;
	}

	.ld-audio-console__timeline {
		grid-template-columns: 25px minmax(48px, 1fr) 25px;
		gap: 3px;
	}

	.ld-audio-console__timeline time {
		font-size: 7px;
	}

	.ld-audio-console input[type="range"].ld-audio-console__range--volume {
		width: 51px;
		min-width: 38px;
	}

	.ld-audio-album-card {
		left: 0;
		width: 205px;
		grid-template-columns: 92px 1fr;
	}

	.ld-audio-album-card__art {
		width: 92px;
	}
}

@media (max-width: 520px) {
	.ld-audio-console-shell {
		width: calc(100vw - 10px);
	}

	.ld-audio-console {
		grid-template-columns: 48px auto minmax(74px, 1fr) 73px;
		padding: 5px 27px 5px 5px;
		gap: 4px;
	}

	.ld-audio-console__brand {
		grid-template-rows: 22px auto;
		row-gap: 5px;
		padding: 0 3px 0 0;
	}

	.ld-audio-console__logo {
		width: 28px;
		height: 22px;
	}

	.ld-audio-console__album-button,
	.ld-audio-console__album-button:hover,
	.ld-audio-console__album-button:focus,
	.ld-audio-console__album-button:active {
		font-size: 5px;
		letter-spacing: .04em;
	}

	.ld-audio-console__transport,
	.ld-audio-console__volume {
		gap: 3px;
	}

	.ld-audio-console__button,
	.ld-audio-console__button:hover,
	.ld-audio-console__button:focus,
	.ld-audio-console__button:active {
		width: 24px;
		height: 24px;
	}

	.ld-audio-console__button--play,
	.ld-audio-console__button--play:hover,
	.ld-audio-console__button--play:focus,
	.ld-audio-console__button--play:active {
		width: 29px;
		height: 29px;
	}

	.ld-audio-console__button svg {
		width: 12px;
		height: 12px;
	}

	.ld-audio-console__button--play svg {
		width: 15px;
		height: 15px;
	}

	.ld-audio-console__display {
		grid-template-rows: 20px 12px;
		padding-right: 3px;
		padding-left: 3px;
	}

	.ld-audio-console__waveform {
		height: 19px;
		gap: 1.5px;
	}

	.ld-audio-console__waveform span {
		height: 17px;
		max-width: 3px;
	}

	.ld-audio-console__waveform span:nth-child(2n) {
		display: none;
	}

	.ld-audio-console__timeline {
		grid-template-columns: 22px minmax(34px, 1fr) 22px;
		gap: 2px;
	}

	.ld-audio-console__timeline time {
		font-size: 6px;
	}

	.ld-audio-console__volume {
		padding-left: 4px;
	}

	.ld-audio-console__button--volume {
		width: 23px;
		height: 23px;
	}

	.ld-audio-console input[type="range"].ld-audio-console__range--volume {
		width: 37px;
		min-width: 28px;
	}

	.ld-audio-console__collapse,
	.ld-audio-console__collapse:hover,
	.ld-audio-console__collapse:focus,
	.ld-audio-console__collapse:active {
		top: 4px;
		right: 5px;
		width: 20px;
		height: 20px;
	}

	.ld-audio-console__collapse-arrow {
		top: calc(100% + 3px);
		width: 9px;
		height: 7px;
	}

	.ld-audio-console__collapse-arrow svg {
		width: 9px;
		height: 7px;
	}

	.ld-audio-album-card {
		--ld-album-x: -50%;

		left: 50%;
		grid-template-columns: 86px 1fr;
		width: 194px;
	}

	.ld-audio-album-card__art {
		width: 86px;
	}

	.ld-audio-album-card::before {
		left: 18px;
	}

	.ld-audio-album-card::after {
		right: 18px;
	}
}

@media (max-width: 380px) {
	.ld-audio-console {
		grid-template-columns: 43px auto minmax(60px, 1fr) 64px;
		gap: 3px;
	}

	.ld-audio-console__button,
	.ld-audio-console__button:hover,
	.ld-audio-console__button:focus,
	.ld-audio-console__button:active {
		width: 22px;
		height: 22px;
	}

	.ld-audio-console__button--play,
	.ld-audio-console__button--play:hover,
	.ld-audio-console__button--play:focus,
	.ld-audio-console__button--play:active {
		width: 27px;
		height: 27px;
	}

	.ld-audio-console__timeline time {
		display: none;
	}

	.ld-audio-console__timeline {
		grid-template-columns: 1fr;
	}

	.ld-audio-console input[type="range"].ld-audio-console__range--volume {
		width: 32px;
		min-width: 25px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ld-audio-console-shell,
	.ld-audio-console,
	.ld-audio-console::after,
	.ld-audio-console__waveform::after,
	.ld-audio-console__waveform span,
	.ld-audio-console__suction-hole,
	.ld-audio-console__suction-orbit,
	.ld-audio-blackhole-tab,
	.ld-audio-blackhole-tab__orbit,
	.ld-audio-album-card {
		animation: none !important;
		transition-duration: .01ms !important;
	}
}

/* =========================================================
   GALLERY ONE – EXACT ENTRANCE PLAYER INTEGRATION
   Only root-state selectors differ from the entrance page.
   Every player element, size, spacing, gradient, border, shadow,
   animation and responsive breakpoint is copied from the entrance.
   ========================================================= */

.ldg1 .ld-audio-console-shell,
.ldg1 .ld-audio-blackhole-tab {
	font-family: Arial, Helvetica, sans-serif;
}

.ldg1.is-walking-to-artwork .ld-audio-console-shell,
.ldg1.is-walking-to-artwork .ld-audio-blackhole-tab {
	transform-origin: initial;
}

/* The player is fixed to the viewport and never participates in camera movement. */
.ldg1__viewport .ld-audio-console-shell,
.ldg1__viewport .ld-audio-blackhole-tab {
	display: none !important;
}

/* =========================================================
   25. EXACT ENTRANCE PLAYER – THEME/CASCADE LAYOUT LOCK

   This does not redesign the player. It repeats the Entrance master's
   structural grid values with Gallery One specificity so Themify/global
   flex, grid, button and input rules cannot rearrange the controls.
   ========================================================= */

.ldg1 .ld-audio-console-shell {
	left: 50% !important;
	width: min(680px, calc(100vw - 24px)) !important;
	max-width: none !important;
	margin: 0 !important;
}

.ldg1 .ld-audio-console {
	display: grid !important;
	grid-template-columns: 76px auto minmax(190px, 1fr) 118px !important;
	grid-template-rows: auto !important;
	grid-auto-flow: row !important;
	align-items: center !important;
	width: 100% !important;
	max-width: none !important;
	min-height: 58px !important;
	margin: 0 !important;
	padding: 7px 34px 7px 9px !important;
	gap: 9px !important;
	flex: none !important;
	flex-wrap: nowrap !important;
}

.ldg1 .ld-audio-console > * {
	min-width: 0;
}

.ldg1 .ld-audio-console__brand {
	display: grid !important;
	grid-template-columns: 1fr !important;
	grid-template-rows: 24px auto !important;
	place-items: center !important;
	row-gap: 10px !important;
	min-width: 0 !important;
	padding: 0 9px 0 2px !important;
}

.ldg1 .ld-audio-console__transport,
.ldg1 .ld-audio-console__volume {
	display: flex !important;
	flex-flow: row nowrap !important;
	align-items: center !important;
	gap: 5px !important;
}

.ldg1 .ld-audio-console__display {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	grid-template-rows: 25px 14px !important;
	align-items: center !important;
	min-width: 0 !important;
	padding: 2px 8px 0 !important;
}

.ldg1 .ld-audio-console__timeline {
	display: grid !important;
	grid-template-columns: 30px minmax(84px, 1fr) 30px !important;
	align-items: center !important;
	gap: 5px !important;
	min-width: 0 !important;
}

.ldg1 .ld-audio-console__button,
.ldg1 .ld-audio-console__button:hover,
.ldg1 .ld-audio-console__button:focus,
.ldg1 .ld-audio-console__button:active,
.ldg1 .ld-audio-console__button:visited {
	flex: 0 0 auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ldg1 .ld-audio-console input[type="range"].ld-audio-console__range {
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

@media (max-width: 760px) {
	.ldg1 .ld-audio-console-shell {
		width: min(600px, calc(100vw - 14px)) !important;
	}

	.ldg1 .ld-audio-console {
		grid-template-columns: 58px auto minmax(120px, 1fr) 94px !important;
		min-height: 54px !important;
		padding: 6px 31px 6px 7px !important;
		gap: 6px !important;
	}

	.ldg1 .ld-audio-console__brand {
		grid-template-rows: 25px auto !important;
		row-gap: 6px !important;
		padding-right: 4px !important;
	}

	.ldg1 .ld-audio-console__display {
		grid-template-rows: 22px 13px !important;
		padding-right: 5px !important;
		padding-left: 5px !important;
	}

	.ldg1 .ld-audio-console__timeline {
		grid-template-columns: 25px minmax(48px, 1fr) 25px !important;
		gap: 3px !important;
	}
}

@media (max-width: 520px) {
	.ldg1 .ld-audio-console-shell {
		width: calc(100vw - 10px) !important;
	}

	.ldg1 .ld-audio-console {
		grid-template-columns: 48px auto minmax(74px, 1fr) 73px !important;
		padding: 5px 27px 5px 5px !important;
		gap: 4px !important;
	}

	.ldg1 .ld-audio-console__brand {
		grid-template-rows: 22px auto !important;
		row-gap: 5px !important;
		padding: 0 3px 0 0 !important;
	}

	.ldg1 .ld-audio-console__transport,
	.ldg1 .ld-audio-console__volume {
		gap: 3px !important;
	}

	.ldg1 .ld-audio-console__display {
		grid-template-rows: 20px 12px !important;
		padding-right: 3px !important;
		padding-left: 3px !important;
	}

	.ldg1 .ld-audio-console__timeline {
		grid-template-columns: 22px minmax(34px, 1fr) 22px !important;
		gap: 2px !important;
	}
}

@media (max-width: 380px) {
	.ldg1 .ld-audio-console {
		grid-template-columns: 43px auto minmax(60px, 1fr) 64px !important;
		gap: 3px !important;
	}

	.ldg1 .ld-audio-console__timeline {
		grid-template-columns: 1fr !important;
	}
}



/* =========================================================
   26. ITEM 1 – STATIC ARTWORK / MP4 CYCLE

   Latley.jpg is the default content inside the transparent neon frame.
   The video slot is completely transparent and hidden before a click, so it
   cannot cover the still image with a black rectangle. During playback the
   MP4 crossfades over the still. When playback ends, JavaScript removes the
   active state and the still image becomes visible again.

   The framed video is display-only. It accepts no pointer interaction and
   exposes no native controls; the separate gold player panel controls it.
   ========================================================= */

.ldg1__media-parking {
	display: none !important;
}

/* Always show the supplied still artwork before playback. */
.ldg1__inside-artwork {
	position: absolute;
	z-index: 1;
	display: block !important;
	opacity: 1;
	visibility: visible;
	pointer-events: none;
	transition: opacity 280ms ease, visibility 0s linear 0s;
}

/* The inactive slot must not paint a background over Latley.jpg. */
.ldg1__video-slot {
	position: absolute;
	z-index: 2;
	left: 15.3%;
	top: 15.2%;
	display: block;
	width: 69.5%;
	height: 69.7%;
	overflow: hidden;
	background: transparent;
	box-shadow: none;
	opacity: 0;
	visibility: hidden;
	transform: scale(1.018);
	transition: opacity 280ms ease, visibility 0s linear 280ms;
	pointer-events: none !important;
}

.ldg1__video-slot .ldg1__frame-video,
.ldg1__video-slot .ldg1__soundtrack {
	position: absolute;
	z-index: 1;
	inset: 0;
	display: block !important;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	object-fit: cover;
	object-position: center;
	background: #050505;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: translateZ(0);
	pointer-events: none !important;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

/* Clicking Item 1 switches only the content inside the frame opening. */
.ldg1__exhibit.is-video-active .ldg1__video-slot,
.ldg1__mobile-exhibit.is-video-active .ldg1__video-slot {
	background: #050505;
	box-shadow:
		inset 0 0 14px rgba(0, 0, 0, .7),
		0 0 9px rgba(255, 62, 202, .22),
		0 0 12px rgba(51, 170, 255, .24);
	opacity: 1;
	visibility: visible;
	transition: opacity 280ms ease, visibility 0s linear 0s;
}

.ldg1__exhibit.is-video-active .ldg1__inside-artwork,
.ldg1__mobile-exhibit.is-video-active .ldg1__inside-artwork {
	opacity: 0;
	visibility: hidden;
	transition: opacity 280ms ease, visibility 0s linear 280ms;
}

/* The transparent neon frame and its glass stay above both media layers. */
.ldg1__artwork-shell.has-gallery-frame .ldg1__artwork {
	z-index: 3;
}

.ldg1__artwork-shell.has-gallery-frame .ldg1__artwork-glass {
	z-index: 4;
}

/* Defence-in-depth: no browser-native video control may appear in the frame. */
.ldg1__frame-video::-webkit-media-controls,
.ldg1__frame-video::-webkit-media-controls-enclosure,
.ldg1__frame-video::-webkit-media-controls-panel,
.ldg1__frame-video::-webkit-media-controls-overlay-play-button,
.ldg1__frame-video::-webkit-media-controls-play-button,
.ldg1__frame-video::-webkit-media-controls-start-playback-button,
.ldg1__frame-video::-webkit-media-controls-timeline,
.ldg1__frame-video::-webkit-media-controls-current-time-display,
.ldg1__frame-video::-webkit-media-controls-time-remaining-display,
.ldg1__frame-video::-webkit-media-controls-mute-button,
.ldg1__frame-video::-webkit-media-controls-volume-slider,
.ldg1__frame-video::-webkit-media-controls-fullscreen-button,
.ldg1__frame-video::-webkit-media-controls-picture-in-picture-button {
	display: none !important;
	opacity: 0 !important;
	-webkit-appearance: none !important;
}

/* =========================================================
   27. EXACT CLOSE-UP CENTRING
   JavaScript applies a measured pixel correction on both axes, so Item 1 can
   reach the true screen centre even though the gallery cannot scroll left of 0.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.ldg1__video-slot .ldg1__frame-video,
	.ldg1__inside-artwork { transition-duration: .01ms !important; }
}

/* =========================================================
   28. V7 – RELIABLE PLAYER REVEAL + CINEMATIC CAMERA RETURN

   The player is anchored to the full-screen Gallery stage rather than the
   browser through a transformed Themify ancestor. Its direct shell state is
   controlled by Gallery JavaScript, so the reveal cannot depend on Entrance
   page state classes or an arbitrary reveal timer.
   ========================================================= */

.ldg1 > .ld-audio-console-shell {
	position: absolute !important;
	z-index: 1000006 !important;
	top: max(10px, env(safe-area-inset-top)) !important;
	left: 50% !important;
	display: block !important;
	max-width: none !important;
	margin: 0 !important;
}

.ldg1 > .ld-audio-console-shell:not(.is-ldg1-console-visible):not(.is-ldg1-console-leaving) {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transform: translate3d(-50%, -135%, 0) !important;
	animation: none !important;
}

.ldg1 > .ld-audio-console-shell.is-ldg1-console-visible {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	animation:
		ld-audio-console-arrive 1.05s cubic-bezier(.16, .78, .22, 1) both,
		ld-audio-console-float 5.8s ease-in-out 1.05s infinite !important;
}

.ldg1 > .ld-audio-console-shell.is-ldg1-console-visible::before,
.ldg1 > .ld-audio-console-shell.is-ldg1-console-visible::after {
	opacity: 1 !important;
}

.ldg1 > .ld-audio-console-shell.is-ldg1-console-leaving {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none !important;
	animation: ldg1-audio-console-depart 680ms cubic-bezier(.55, .02, .78, .34) both !important;
}

@keyframes ldg1-audio-console-depart {
	0% {
		opacity: 1;
		transform: translate3d(-50%, 0, 0);
	}
	38% {
		opacity: 1;
		transform: translate3d(-50%, 5px, 0);
	}
	100% {
		opacity: 0;
		transform: translate3d(-50%, -135%, 0);
	}
}

/* Keep the close-up environmental treatment active after the approach ends. */
.ldg1.is-artwork-focused .ldg1__viewport {
	filter: saturate(1.05) contrast(1.025);
}

.ldg1.is-artwork-focused::after {
	opacity: 1;
}

/* The first exit gesture performs the backward walk. It must not also drag or
   horizontally scroll the room during that return journey. */
.ldg1.is-returning-from-artwork .ldg1__viewport {
	cursor: default;
	pointer-events: none;
	filter: saturate(1.025) contrast(1.012);
}

.ldg1.is-returning-from-artwork::after {
	opacity: .22;
	transition: opacity 1.75s ease;
}

.ldg1.is-walking-to-artwork .ldg1__hud,
.ldg1.is-walking-to-artwork .ldg1__instruction,
.ldg1.is-walking-to-artwork .ldg1__page-link,
.ldg1.is-artwork-focused .ldg1__hud,
.ldg1.is-artwork-focused .ldg1__instruction,
.ldg1.is-artwork-focused .ldg1__page-link,
.ldg1.is-returning-from-artwork .ldg1__hud,
.ldg1.is-returning-from-artwork .ldg1__instruction,
.ldg1.is-returning-from-artwork .ldg1__page-link {
	opacity: 0 !important;
	pointer-events: none !important;
}

.ldg1 > .ld-audio-blackhole-tab {
	position: absolute !important;
	z-index: 1000007 !important;
}

@media (prefers-reduced-motion: reduce) {
	.ldg1 > .ld-audio-console-shell.is-ldg1-console-visible,
	.ldg1 > .ld-audio-console-shell.is-ldg1-console-leaving {
		animation-duration: 1ms !important;
	}
}


/* =========================================================
   29. V7 – CANVAS VIDEO OUTPUT, CLOSER CAMERA AND PLAYER LOCK

   The actual MP4 element is permanently parked outside the visible viewport.
   Its decoded picture is copied into a canvas inside Item 1. Browser-native
   media controls therefore have no visible video element to attach to.
   ========================================================= */

/* Keep the source video decoding, but make it physically impossible to see or
   interact with. Do not use display:none because some Safari versions stop
   producing video frames for hidden media. */
.ldg1 .ldg1__media-parking {
	position: absolute !important;
	z-index: -100 !important;
	top: -20px !important;
	left: -20px !important;
	display: block !important;
	width: 2px !important;
	height: 2px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	visibility: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(100%) !important;
	pointer-events: none !important;
}

.ldg1 .ldg1__media-parking .ldg1__soundtrack,
.ldg1 .ldg1__media-parking video[data-ldg1-audio] {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 2px !important;
	height: 2px !important;
	max-width: 2px !important;
	max-height: 2px !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.ldg1__video-canvas {
	position: absolute;
	z-index: 1;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	background: #050505;
	border: 0;
	box-shadow: none;
	object-fit: cover;
	pointer-events: none !important;
	user-select: none;
	-webkit-user-select: none;
}

/* The JPG stays visible until JavaScript has successfully painted a decoded
   MP4 frame. This prevents a black flash while playback starts. */
.ldg1__exhibit.is-video-active:not(.is-video-frame-ready) .ldg1__video-slot,
.ldg1__mobile-exhibit.is-video-active:not(.is-video-frame-ready) .ldg1__video-slot {
	background: transparent !important;
	box-shadow: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
}

.ldg1__exhibit.is-video-frame-ready .ldg1__video-slot,
.ldg1__mobile-exhibit.is-video-frame-ready .ldg1__video-slot {
	background: #050505 !important;
	box-shadow:
		inset 0 0 14px rgba(0, 0, 0, .7),
		0 0 9px rgba(255, 62, 202, .22),
		0 0 12px rgba(51, 170, 255, .24) !important;
	opacity: 1 !important;
	visibility: visible !important;
	transition: opacity 220ms ease, visibility 0s linear 0s !important;
}

.ldg1__exhibit.is-video-active:not(.is-video-frame-ready) .ldg1__inside-artwork,
.ldg1__mobile-exhibit.is-video-active:not(.is-video-frame-ready) .ldg1__inside-artwork {
	opacity: 1 !important;
	visibility: visible !important;
}

.ldg1__exhibit.is-video-frame-ready .ldg1__inside-artwork,
.ldg1__mobile-exhibit.is-video-frame-ready .ldg1__inside-artwork {
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity 220ms ease, visibility 0s linear 220ms !important;
}

/* Player geometry is locked in every interaction state. Themify/global button
   typography cannot enlarge Album Art, wrap it or change the panel height. */
.ldg1 > .ld-audio-console-shell {
	width: min(680px, calc(100vw - 24px)) !important;
	height: 58px !important;
	min-height: 58px !important;
	max-height: 58px !important;
	contain: layout style !important;
}

.ldg1 > .ld-audio-console-shell .ld-audio-console,
.ldg1 > .ld-audio-console-shell .ld-audio-console:hover,
.ldg1 > .ld-audio-console-shell .ld-audio-console:focus-within {
	display: grid !important;
	grid-template-columns: 76px auto minmax(190px, 1fr) 118px !important;
	grid-template-rows: 44px !important;
	align-items: center !important;
	width: 100% !important;
	height: 58px !important;
	min-height: 58px !important;
	max-height: 58px !important;
	margin: 0 !important;
	padding: 7px 34px 7px 9px !important;
	gap: 9px !important;
	overflow: hidden !important;
}

.ldg1 > .ld-audio-console-shell .ld-audio-console__brand {
	display: grid !important;
	grid-template-columns: 1fr !important;
	grid-template-rows: 24px 10px !important;
	place-items: center !important;
	align-content: center !important;
	row-gap: 5px !important;
	width: 76px !important;
	min-width: 76px !important;
	max-width: 76px !important;
	height: 44px !important;
	min-height: 44px !important;
	max-height: 44px !important;
	margin: 0 !important;
	padding: 0 9px 0 2px !important;
	overflow: hidden !important;
}

.ldg1 > .ld-audio-console-shell .ld-audio-console__album-button,
.ldg1 > .ld-audio-console-shell .ld-audio-console__album-button:hover,
.ldg1 > .ld-audio-console-shell .ld-audio-console__album-button:focus,
.ldg1 > .ld-audio-console-shell .ld-audio-console__album-button:focus-visible,
.ldg1 > .ld-audio-console-shell .ld-audio-console__album-button:active,
.ldg1 > .ld-audio-console-shell .ld-audio-console__album-button:visited {
	display: block !important;
	box-sizing: border-box !important;
	width: 64px !important;
	min-width: 64px !important;
	max-width: 64px !important;
	height: 10px !important;
	min-height: 10px !important;
	max-height: 10px !important;
	margin: 0 !important;
	padding: 0 2px 1px !important;
	overflow: hidden !important;
	color: rgba(255, 232, 166, .76) !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(255, 201, 56, .36) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 6.5px !important;
	font-style: normal !important;
	font-weight: 800 !important;
	line-height: 8px !important;
	letter-spacing: .14em !important;
	text-align: center !important;
	text-indent: 0 !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
	writing-mode: horizontal-tb !important;
	transform: none !important;
	transition: color 180ms ease, border-color 180ms ease, text-shadow 180ms ease !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.ldg1 > .ld-audio-console-shell .ld-audio-console__album-button::before,
.ldg1 > .ld-audio-console-shell .ld-audio-console__album-button::after {
	display: none !important;
	content: none !important;
}

.ldg1 > .ld-audio-console-shell .ld-audio-console__album-button:hover,
.ldg1 > .ld-audio-console-shell .ld-audio-console__album-button:focus-visible,
.ldg1.is-audio-album-open > .ld-audio-console-shell .ld-audio-console__album-button {
	color: #fff4bd !important;
	border-bottom-color: #f5c64c !important;
	text-shadow: 0 0 8px rgba(255, 195, 40, .52) !important;
}

@media (max-width: 760px) {
	.ldg1 > .ld-audio-console-shell {
		width: min(600px, calc(100vw - 14px)) !important;
		height: 54px !important;
		min-height: 54px !important;
		max-height: 54px !important;
	}

	.ldg1 > .ld-audio-console-shell .ld-audio-console,
	.ldg1 > .ld-audio-console-shell .ld-audio-console:hover,
	.ldg1 > .ld-audio-console-shell .ld-audio-console:focus-within {
		grid-template-columns: 58px auto minmax(120px, 1fr) 94px !important;
		grid-template-rows: 42px !important;
		height: 54px !important;
		min-height: 54px !important;
		max-height: 54px !important;
		padding: 6px 31px 6px 7px !important;
		gap: 6px !important;
	}

	.ldg1 > .ld-audio-console-shell .ld-audio-console__brand {
		grid-template-rows: 25px 9px !important;
		row-gap: 4px !important;
		width: 58px !important;
		min-width: 58px !important;
		max-width: 58px !important;
		height: 42px !important;
		min-height: 42px !important;
		max-height: 42px !important;
		padding: 0 4px 0 0 !important;
	}

	.ldg1 > .ld-audio-console-shell .ld-audio-console__album-button,
	.ldg1 > .ld-audio-console-shell .ld-audio-console__album-button:hover,
	.ldg1 > .ld-audio-console-shell .ld-audio-console__album-button:focus,
	.ldg1 > .ld-audio-console-shell .ld-audio-console__album-button:active {
		width: 52px !important;
		min-width: 52px !important;
		max-width: 52px !important;
		height: 9px !important;
		min-height: 9px !important;
		max-height: 9px !important;
		font-size: 5.7px !important;
		line-height: 7px !important;
		letter-spacing: .08em !important;
	}
}

@media (max-width: 520px) {
	.ldg1 > .ld-audio-console-shell .ld-audio-console,
	.ldg1 > .ld-audio-console-shell .ld-audio-console:hover,
	.ldg1 > .ld-audio-console-shell .ld-audio-console:focus-within {
		grid-template-columns: 48px auto minmax(74px, 1fr) 73px !important;
	}

	.ldg1 > .ld-audio-console-shell .ld-audio-console__brand {
		width: 48px !important;
		min-width: 48px !important;
		max-width: 48px !important;
		padding: 0 3px 0 0 !important;
	}

	.ldg1 > .ld-audio-console-shell .ld-audio-console__album-button,
	.ldg1 > .ld-audio-console-shell .ld-audio-console__album-button:hover,
	.ldg1 > .ld-audio-console-shell .ld-audio-console__album-button:focus,
	.ldg1 > .ld-audio-console-shell .ld-audio-console__album-button:active {
		width: 43px !important;
		min-width: 43px !important;
		max-width: 43px !important;
		font-size: 5px !important;
		line-height: 7px !important;
		letter-spacing: .04em !important;
	}
}



/* =========================================================
   27. V9 MOBILE / SMALL-SCREEN CONTINUOUS WALL FIX
   =========================================================

   The earlier portrait layout used six separate cropped slides. Because each
   slide carried its own background crop while the frame was independently
   centred, the wall appeared static and the frame could drift away from the
   recessed square in the room image.

   V9 uses the exact same continuous two-room track at every screen size. The
   wall and the exhibits therefore share one coordinate system and always move
   together. The legacy mobile-card track remains in the PHP only for safe
   backwards compatibility and is permanently hidden here.
   ========================================================= */

.ldg1__viewport {
	touch-action: pan-x pinch-zoom;
}

.ldg1__track--mobile {
	display: none !important;
}

@media (max-width: 768px) and (orientation: portrait) {
	.ldg1 {
		/* Preserve the exact source-image ratios for both gallery environments. */
		--ldg1-room-width: max(100vw, 233.236svh);
		--ldg1-studio-room-width: max(100vw, 228.765792svh);
	}

	@supports (height: 100dvh) {
		.ldg1 {
			height: 100dvh;
			--ldg1-room-width: max(100vw, 233.236dvh);
			--ldg1-studio-room-width: max(100vw, 228.765792dvh);
		}
	}

	.ldg1__viewport {
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 50vw;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-x pinch-zoom;
		cursor: default;
	}

	.ldg1__track--desktop {
		display: flex !important;
		align-items: stretch;
		width: max-content;
		height: 100%;
		min-height: 100%;
	}

	.ldg1__track--mobile,
	.ldg1__mobile-slide,
	.ldg1__mobile-exhibit {
		display: none !important;
	}

	.ldg1__room {
		flex: 0 0 var(--ldg1-room-width);
		width: var(--ldg1-room-width);
		height: 100%;
		background-position: center center;
		background-size: calc(100% + 2px) 100%;
	}

	/* Room 4 preserves the 2048 × 878 design-coordinate mapping on portrait phones. */
	.ldg1__room--four {
		flex: 0 0 var(--ldg1-studio-room-width);
		width: var(--ldg1-studio-room-width);
		background-image: var(--ldg1-studio-background-image, var(--ldg1-background-image));
		background-position: 50% 50%;
		background-size: 100% 100%;
	}

	.ldg1__exhibit,
	.ldg1__exhibit:hover,
	.ldg1__exhibit:focus,
	.ldg1__exhibit:active {
		scroll-snap-align: center;
		scroll-snap-stop: always;
		touch-action: pan-x;
	}

	/* Keep captions out of the way on the smaller resting view. */
	.ldg1__exhibit .ldg1__caption {
		bottom: -48px;
	}
}

@media (max-width: 420px) and (orientation: portrait) {
	.ldg1__nav--previous {
		left: max(2px, env(safe-area-inset-left));
	}

	.ldg1__nav--next {
		right: max(2px, env(safe-area-inset-right));
	}

	.ldg1__progress {
		width: 46vw;
	}
}


/* =========================================================
   V13 — CONTROLLED COLD-START NEON INTERACTION
   The resting glow remains unchanged. Hover gives one shorter ignition.
   A clicked frame stays fully and steadily illuminated while media plays.
   Returning to the gallery restores the normal resting glow.
   ========================================================= */

.ldg1__exhibit .ldg1__artwork-shell.has-gallery-frame,
.ldg1__mobile-exhibit .ldg1__artwork-shell.has-gallery-frame {
	transition: filter 220ms ease;
}

/* Shorter cold-start with only two small falters before the light catches. */
.ldg1__exhibit.is-neon-starting .ldg1__artwork-shell.has-gallery-frame,
.ldg1__mobile-exhibit.is-neon-starting .ldg1__artwork-shell.has-gallery-frame {
	animation: ldg1-neon-shell-cold-start var(--ldg1-neon-ignition-duration, .72s) steps(1, end) both !important;
}

.ldg1__exhibit.is-neon-starting .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__mobile-exhibit.is-neon-starting .ldg1__artwork-shell.has-gallery-frame::before {
	animation: ldg1-neon-backlight-cold-start var(--ldg1-neon-ignition-duration, .72s) steps(1, end) both !important;
}

.ldg1__exhibit.is-neon-starting .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__mobile-exhibit.is-neon-starting .ldg1__artwork-shell.has-gallery-frame::after {
	animation: ldg1-neon-edge-cold-start var(--ldg1-neon-ignition-duration, .72s) steps(1, end) both !important;
}

/* Hover/focus remains gently illuminated only before the frame is selected. */
.ldg1__exhibit:hover:not(.is-neon-starting):not(.is-neon-engaged):not(.is-neon-cooldown) .ldg1__artwork-shell.has-gallery-frame,
.ldg1__exhibit:focus-visible:not(.is-neon-starting):not(.is-neon-engaged):not(.is-neon-cooldown) .ldg1__artwork-shell.has-gallery-frame,
.ldg1__mobile-exhibit:hover:not(.is-neon-starting):not(.is-neon-engaged):not(.is-neon-cooldown) .ldg1__artwork-shell.has-gallery-frame,
.ldg1__mobile-exhibit:focus-visible:not(.is-neon-starting):not(.is-neon-engaged):not(.is-neon-cooldown) .ldg1__artwork-shell.has-gallery-frame {
	filter: brightness(1.15) saturate(1.14) !important;
	box-shadow: none !important;
	transform: none !important;
}

.ldg1__exhibit:hover:not(.is-neon-starting):not(.is-neon-engaged):not(.is-neon-cooldown) .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__exhibit:focus-visible:not(.is-neon-starting):not(.is-neon-engaged):not(.is-neon-cooldown) .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__mobile-exhibit:hover:not(.is-neon-starting):not(.is-neon-engaged):not(.is-neon-cooldown) .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__mobile-exhibit:focus-visible:not(.is-neon-starting):not(.is-neon-engaged):not(.is-neon-cooldown) .ldg1__artwork-shell.has-gallery-frame::before {
	animation: ldg1-neon-backlight-hot 4.2s ease-in-out infinite !important;
	mix-blend-mode: screen;
}

.ldg1__exhibit:hover:not(.is-neon-starting):not(.is-neon-engaged):not(.is-neon-cooldown) .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__exhibit:focus-visible:not(.is-neon-starting):not(.is-neon-engaged):not(.is-neon-cooldown) .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__mobile-exhibit:hover:not(.is-neon-starting):not(.is-neon-engaged):not(.is-neon-cooldown) .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__mobile-exhibit:focus-visible:not(.is-neon-starting):not(.is-neon-engaged):not(.is-neon-cooldown) .ldg1__artwork-shell.has-gallery-frame::after {
	animation: ldg1-neon-edge-hot 4.2s ease-in-out infinite !important;
}

/* Selected/listening state: fully on and steady with no repeated flicker. */
.ldg1__exhibit.is-neon-engaged:not(.is-neon-starting) .ldg1__artwork-shell.has-gallery-frame,
.ldg1__mobile-exhibit.is-neon-engaged:not(.is-neon-starting) .ldg1__artwork-shell.has-gallery-frame {
	filter: brightness(1.15) saturate(1.14) !important;
	box-shadow: none !important;
	transform: none !important;
}

.ldg1__exhibit.is-neon-engaged:not(.is-neon-starting) .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__mobile-exhibit.is-neon-engaged:not(.is-neon-starting) .ldg1__artwork-shell.has-gallery-frame::before {
	animation: none !important;
	opacity: .98 !important;
	filter: blur(15px) brightness(1.38) saturate(1.18) !important;
	transform: scale(1.055) !important;
	mix-blend-mode: screen;
}

.ldg1__exhibit.is-neon-engaged:not(.is-neon-starting) .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__mobile-exhibit.is-neon-engaged:not(.is-neon-starting) .ldg1__artwork-shell.has-gallery-frame::after {
	animation: none !important;
	opacity: .98 !important;
	box-shadow:
		0 0 13px var(--ldg1-frame-glow, rgba(255, 188, 45, .58)),
		0 0 36px var(--ldg1-frame-glow-soft, rgba(255, 188, 45, .34)),
		0 0 56px var(--ldg1-frame-glow-soft, rgba(255, 188, 45, .22)),
		inset 0 0 15px rgba(255, 247, 217, .17) !important;
}

/* Returning to the gallery restores the normal resting glow immediately. */
.ldg1__exhibit.is-neon-cooldown .ldg1__artwork-shell.has-gallery-frame,
.ldg1__mobile-exhibit.is-neon-cooldown .ldg1__artwork-shell.has-gallery-frame {
	filter: none !important;
	box-shadow: none !important;
	transform: none !important;
}

.ldg1__exhibit.is-neon-cooldown .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__mobile-exhibit.is-neon-cooldown .ldg1__artwork-shell.has-gallery-frame::before {
	animation: ldg1-frame-backlight-breathe 4.8s ease-in-out infinite !important;
	opacity: .86 !important;
	filter: blur(10px) !important;
	transform: none !important;
}

.ldg1__exhibit.is-neon-cooldown .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__mobile-exhibit.is-neon-cooldown .ldg1__artwork-shell.has-gallery-frame::after {
	animation: ldg1-frame-edge-breathe 4.8s ease-in-out infinite !important;
	opacity: .78 !important;
	box-shadow:
		0 0 6px var(--ldg1-frame-glow, rgba(255, 188, 45, .36)),
		0 0 16px var(--ldg1-frame-glow-soft, rgba(255, 188, 45, .18)),
		inset 0 0 8px rgba(255, 237, 184, .07) !important;
}

@keyframes ldg1-neon-shell-cold-start {
	0%   { filter: brightness(1.02) saturate(1.04); }
	14%  { filter: brightness(1.22) saturate(1.17); }
	27%  { filter: brightness(.93) saturate(.98); }
	43%  { filter: brightness(1.25) saturate(1.20); }
	58%  { filter: brightness(1.02) saturate(1.04); }
	76%  { filter: brightness(1.18) saturate(1.15); }
	100% { filter: brightness(1.15) saturate(1.14); }
}

@keyframes ldg1-neon-backlight-cold-start {
	0% { opacity: .86; filter: blur(10px) brightness(1.04); transform: scale(1); }
	14% { opacity: 1; filter: blur(15px) brightness(1.46) saturate(1.18); transform: scale(1.055); }
	27% { opacity: .54; filter: blur(9px) brightness(.94); transform: scale(1.008); }
	43% { opacity: 1; filter: blur(16px) brightness(1.52) saturate(1.22); transform: scale(1.065); }
	58% { opacity: .76; filter: blur(12px) brightness(1.10); transform: scale(1.028); }
	76%, 100% { opacity: .98; filter: blur(15px) brightness(1.38) saturate(1.18); transform: scale(1.055); }
}

@keyframes ldg1-neon-edge-cold-start {
	0% { opacity: .78; box-shadow: 0 0 6px var(--ldg1-frame-glow, rgba(255, 188, 45, .36)), 0 0 16px var(--ldg1-frame-glow-soft, rgba(255, 188, 45, .18)), inset 0 0 8px rgba(255, 237, 184, .07); }
	14% { opacity: 1; box-shadow: 0 0 13px var(--ldg1-frame-glow, rgba(255, 188, 45, .56)), 0 0 34px var(--ldg1-frame-glow-soft, rgba(255, 188, 45, .34)), 0 0 52px var(--ldg1-frame-glow-soft, rgba(255, 188, 45, .22)), inset 0 0 15px rgba(255, 244, 205, .17); }
	27% { opacity: .52; box-shadow: 0 0 5px var(--ldg1-frame-glow, rgba(255, 188, 45, .34)), 0 0 13px var(--ldg1-frame-glow-soft, rgba(255, 188, 45, .15)), inset 0 0 7px rgba(255, 237, 184, .06); }
	43% { opacity: 1; box-shadow: 0 0 15px var(--ldg1-frame-glow, rgba(255, 188, 45, .62)), 0 0 40px var(--ldg1-frame-glow-soft, rgba(255, 188, 45, .38)), 0 0 60px var(--ldg1-frame-glow-soft, rgba(255, 188, 45, .24)), inset 0 0 17px rgba(255, 247, 217, .20); }
	58% { opacity: .74; box-shadow: 0 0 8px var(--ldg1-frame-glow, rgba(255, 188, 45, .42)), 0 0 22px var(--ldg1-frame-glow-soft, rgba(255, 188, 45, .22)), inset 0 0 10px rgba(255, 244, 205, .10); }
	76%, 100% { opacity: .98; box-shadow: 0 0 13px var(--ldg1-frame-glow, rgba(255, 188, 45, .58)), 0 0 36px var(--ldg1-frame-glow-soft, rgba(255, 188, 45, .34)), 0 0 56px var(--ldg1-frame-glow-soft, rgba(255, 188, 45, .22)), inset 0 0 15px rgba(255, 247, 217, .17); }
}

@keyframes ldg1-neon-backlight-hot {
	0%, 100% { opacity: .94; filter: blur(14px) brightness(1.26) saturate(1.13); transform: scale(1.045); }
	50% { opacity: 1; filter: blur(16px) brightness(1.40) saturate(1.19); transform: scale(1.065); }
}

@keyframes ldg1-neon-edge-hot {
	0%, 100% { opacity: .92; box-shadow: 0 0 11px var(--ldg1-frame-glow, rgba(255, 188, 45, .52)), 0 0 30px var(--ldg1-frame-glow-soft, rgba(255, 188, 45, .28)), 0 0 46px var(--ldg1-frame-glow-soft, rgba(255, 188, 45, .18)), inset 0 0 13px rgba(255, 244, 205, .14); }
	50% { opacity: .98; box-shadow: 0 0 14px var(--ldg1-frame-glow, rgba(255, 188, 45, .59)), 0 0 38px var(--ldg1-frame-glow-soft, rgba(255, 188, 45, .34)), 0 0 58px var(--ldg1-frame-glow-soft, rgba(255, 188, 45, .22)), inset 0 0 16px rgba(255, 247, 217, .18); }
}

@media (prefers-reduced-motion: reduce) {
	.ldg1__exhibit.is-neon-starting .ldg1__artwork-shell.has-gallery-frame,
	.ldg1__mobile-exhibit.is-neon-starting .ldg1__artwork-shell.has-gallery-frame {
		animation: none !important;
		filter: brightness(1.15) saturate(1.14) !important;
	}

	.ldg1__exhibit.is-neon-starting .ldg1__artwork-shell.has-gallery-frame::before,
	.ldg1__mobile-exhibit.is-neon-starting .ldg1__artwork-shell.has-gallery-frame::before {
		animation: none !important;
		opacity: .98;
		filter: blur(15px) brightness(1.38) saturate(1.18);
		transform: scale(1.055);
	}

	.ldg1__exhibit.is-neon-starting .ldg1__artwork-shell.has-gallery-frame::after,
	.ldg1__mobile-exhibit.is-neon-starting .ldg1__artwork-shell.has-gallery-frame::after {
		animation: none !important;
		opacity: .98;
		box-shadow: 0 0 13px var(--ldg1-frame-glow, rgba(255, 188, 45, .58)), 0 0 36px var(--ldg1-frame-glow-soft, rgba(255, 188, 45, .34)), 0 0 56px var(--ldg1-frame-glow-soft, rgba(255, 188, 45, .22)), inset 0 0 15px rgba(255, 247, 217, .17);
	}
}

/* =========================================================
   V15 — SOFTER MOVING WATER-LIGHT PLAY BUTTONS
   The light is deliberately less bright, but the coloured shimmer
   now moves clearly and continuously behind the full glass button.
   ========================================================= */

.ldg1__play-trigger {
	position: absolute;
	z-index: 22;
	left: 50%;
	bottom: -48px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	transform: translateX(-50%);
	pointer-events: auto;
	cursor: pointer;
	touch-action: manipulation;
	isolation: isolate;
}

/* No circular outer halo. */
.ldg1__play-trigger::before,
.ldg1__play-trigger::after {
	content: none;
}

/* Full-button moving colour field behind the translucent artwork. */
.ldg1__play-trigger-fx {
	position: absolute;
	pointer-events: none;
	inset: 0;
	overflow: hidden;
	border-radius: 11px;
	z-index: 1;
	opacity: .72;
	mix-blend-mode: screen;
	filter: blur(1.1px) saturate(1.18) brightness(.90);
	background:
		radial-gradient(circle at 12% 18%, rgba(255, 86, 212, .28) 0%, rgba(255, 86, 212, 0) 30%),
		radial-gradient(circle at 88% 16%, rgba(78, 202, 255, .27) 0%, rgba(78, 202, 255, 0) 30%),
		radial-gradient(circle at 18% 86%, rgba(170, 111, 255, .22) 0%, rgba(170, 111, 255, 0) 31%),
		radial-gradient(circle at 86% 82%, rgba(111, 255, 237, .20) 0%, rgba(111, 255, 237, 0) 32%),
		radial-gradient(circle at 50% 50%, rgba(255, 222, 136, .46) 0%, rgba(255, 198, 104, .26) 25%, rgba(255, 176, 71, .08) 50%, rgba(255, 176, 71, 0) 72%);
	background-size:
		92% 92%,
		96% 96%,
		94% 94%,
		98% 98%,
		120% 120%;
	background-repeat: no-repeat;
	animation: ldg1-play-water-drift 6.8s cubic-bezier(.45,.05,.55,.95) infinite alternate;
	will-change: transform, background-position, opacity;
}

.ldg1__play-trigger-fx::before,
.ldg1__play-trigger-fx::after {
	content: "";
	position: absolute;
	inset: -22%;
	border-radius: inherit;
	pointer-events: none;
	mix-blend-mode: screen;
	will-change: transform, opacity;
}

/* Slow translucent light ribbon that visibly travels across the button. */
.ldg1__play-trigger-fx::before {
	background:
		linear-gradient(
			112deg,
			rgba(255,255,255,0) 0%,
			rgba(90,210,255,.08) 18%,
			rgba(255,255,255,.13) 34%,
			rgba(255,208,134,.06) 48%,
			rgba(255,95,212,.09) 64%,
			rgba(255,255,255,0) 82%
		);
	filter: blur(2.4px);
	opacity: .64;
	transform: translate3d(-24%, -10%, 0) rotate(-7deg) scale(1.2);
	animation: ldg1-play-water-ribbon 7.4s ease-in-out infinite;
}

/* Separate pools drift at a different rate to avoid a static appearance. */
.ldg1__play-trigger-fx::after {
	background:
		radial-gradient(ellipse at 24% 34%, rgba(255,110,220,.13) 0%, rgba(255,110,220,0) 25%),
		radial-gradient(ellipse at 70% 28%, rgba(82,210,255,.14) 0%, rgba(82,210,255,0) 26%),
		radial-gradient(ellipse at 38% 76%, rgba(255,219,126,.12) 0%, rgba(255,219,126,0) 28%),
		radial-gradient(ellipse at 78% 74%, rgba(123,255,235,.10) 0%, rgba(123,255,235,0) 28%);
	filter: blur(2px);
	opacity: .72;
	transform: translate3d(0, 0, 0) scale(1.08);
	animation: ldg1-play-colour-pools 9.2s ease-in-out infinite alternate;
}

.ldg1__play-trigger-img {
	position: relative;
	pointer-events: none;
	z-index: 2;
	display: block;
	width: 100%;
	height: auto;
	max-width: 44px;
	opacity: .86;
	mix-blend-mode: screen;
	filter:
		drop-shadow(0 0 2px rgba(255, 214, 126, .12))
		drop-shadow(0 0 6px rgba(255, 165, 30, .07));
	transform: translateZ(0) scale(1);
	transition: transform .22s ease, filter .22s ease, opacity .22s ease;
}

/* Small, infrequent sparkles. */
.ldg1__play-spark {
	position: absolute;
	pointer-events: none;
	width: 2.5px;
	height: 2.5px;
	border-radius: 50%;
	opacity: 0;
	filter: blur(.3px);
	mix-blend-mode: screen;
	animation: ldg1-play-soft-sparkle 6.4s ease-in-out infinite;
}

.ldg1__play-spark.s1 { left: 20%; top: 26%; background: #ff58d0; animation-delay: .4s; }
.ldg1__play-spark.s2 { left: 72%; top: 22%; background: #50ccff; animation-delay: 1.7s; }
.ldg1__play-spark.s3 { left: 52%; top: 50%; background: #ffd34f; animation-delay: 3.0s; }
.ldg1__play-spark.s4 { left: 34%; top: 72%; background: #a86cff; animation-delay: 4.2s; }
.ldg1__play-spark.s5 { left: 70%; top: 68%; background: #73fff3; animation-delay: 5.3s; }

/* Interaction makes the motion slightly richer, not dramatically brighter. */
.ldg1__exhibit:hover .ldg1__play-trigger-fx,
.ldg1__exhibit:focus-visible .ldg1__play-trigger-fx,
.ldg1__exhibit.is-current .ldg1__play-trigger-fx,
.ldg1__exhibit.is-neon-engaged .ldg1__play-trigger-fx,
.ldg1__mobile-exhibit:hover .ldg1__play-trigger-fx,
.ldg1__mobile-exhibit:focus-visible .ldg1__play-trigger-fx,
.ldg1__mobile-exhibit.is-current .ldg1__play-trigger-fx,
.ldg1__mobile-exhibit.is-neon-engaged .ldg1__play-trigger-fx {
	opacity: .82;
	filter: blur(1.15px) saturate(1.26) brightness(.98);
	animation-duration: 5.6s;
}

.ldg1__exhibit:hover .ldg1__play-trigger-img,
.ldg1__exhibit:focus-visible .ldg1__play-trigger-img,
.ldg1__exhibit.is-current .ldg1__play-trigger-img,
.ldg1__exhibit.is-neon-engaged .ldg1__play-trigger-img,
.ldg1__mobile-exhibit:hover .ldg1__play-trigger-img,
.ldg1__mobile-exhibit:focus-visible .ldg1__play-trigger-img,
.ldg1__mobile-exhibit.is-current .ldg1__play-trigger-img,
.ldg1__mobile-exhibit.is-neon-engaged .ldg1__play-trigger-img {
	transform: translateZ(0) scale(1.025);
	opacity: .90;
	filter:
		drop-shadow(0 0 3px rgba(255, 219, 140, .15))
		drop-shadow(0 0 7px rgba(255, 165, 30, .08));
}

.ldg1__mobile-exhibit .ldg1__play-trigger {
	bottom: -44px;
	width: 40px;
	height: 40px;
}

.ldg1__mobile-exhibit .ldg1__play-trigger-img {
	max-width: 40px;
}

@media (max-width: 991px) {
	.ldg1__play-trigger {
		bottom: -45px;
		width: 41px;
		height: 41px;
	}

	.ldg1__play-trigger-img {
		max-width: 41px;
	}
}

@media (max-width: 767px) {
	.ldg1__play-trigger {
		bottom: -42px;
		width: 38px;
		height: 38px;
	}

	.ldg1__play-trigger-img {
		max-width: 38px;
	}
}

@keyframes ldg1-play-water-drift {
	0% {
		background-position:
			-18% -12%,
			112% -10%,
			-14% 112%,
			110% 108%,
			48% 52%;
		transform: translate3d(-2px, 1px, 0) scale(1.02);
		opacity: .66;
	}
	25% {
		background-position:
			8% 18%,
			84% 10%,
			16% 88%,
			88% 78%,
			56% 44%;
		transform: translate3d(2px, -2px, 0) scale(1.06);
		opacity: .74;
	}
	50% {
		background-position:
			28% 40%,
			64% 26%,
			32% 68%,
			70% 58%,
			42% 58%;
		transform: translate3d(-1px, -1px, 0) scale(1.04);
		opacity: .69;
	}
	75% {
		background-position:
			48% 18%,
			44% 54%,
			52% 54%,
			50% 72%,
			60% 48%;
		transform: translate3d(2px, 2px, 0) scale(1.08);
		opacity: .76;
	}
	100% {
		background-position:
			78% 8%,
			18% 74%,
			82% 30%,
			22% 48%,
			46% 54%;
		transform: translate3d(-2px, 1px, 0) scale(1.03);
		opacity: .68;
	}
}

@keyframes ldg1-play-water-ribbon {
	0% {
		transform: translate3d(-32%, -12%, 0) rotate(-9deg) scale(1.20);
		opacity: .46;
	}
	35% {
		transform: translate3d(-4%, 6%, 0) rotate(-2deg) scale(1.24);
		opacity: .68;
	}
	70% {
		transform: translate3d(18%, -3%, 0) rotate(5deg) scale(1.22);
		opacity: .58;
	}
	100% {
		transform: translate3d(34%, 10%, 0) rotate(9deg) scale(1.18);
		opacity: .48;
	}
}

@keyframes ldg1-play-colour-pools {
	0% {
		transform: translate3d(-6%, -4%, 0) scale(1.06) rotate(-3deg);
		opacity: .62;
	}
	33% {
		transform: translate3d(4%, -1%, 0) scale(1.13) rotate(2deg);
		opacity: .78;
	}
	66% {
		transform: translate3d(-2%, 5%, 0) scale(1.09) rotate(-1deg);
		opacity: .68;
	}
	100% {
		transform: translate3d(6%, 3%, 0) scale(1.14) rotate(4deg);
		opacity: .75;
	}
}

@keyframes ldg1-play-soft-sparkle {
	0%, 100% {
		transform: scale(.2);
		opacity: 0;
	}
	14% {
		transform: scale(.7);
		opacity: .18;
	}
	24% {
		transform: scale(1);
		opacity: .46;
	}
	38% {
		transform: scale(.55);
		opacity: .10;
	}
	55% {
		opacity: 0;
	}
}

/* =========================================================
   V19 — FIXED FRAME AND PLAY-BUTTON GEOMETRY
   The frame and button never move, scale or nudge on hover/click.
   The button sits fully below the frame and its light is clipped
   inside the button area so no colour passes in front of the frame.
   ========================================================= */

/* Keep each whole exhibit physically fixed while interacting. */
.ldg1__exhibit,
.ldg1__exhibit:hover,
.ldg1__exhibit:focus,
.ldg1__exhibit:focus-visible,
.ldg1__exhibit:active,
.ldg1__mobile-exhibit,
.ldg1__mobile-exhibit:hover,
.ldg1__mobile-exhibit:focus,
.ldg1__mobile-exhibit:focus-visible,
.ldg1__mobile-exhibit:active {
	transform: none !important;
}

/* The frame shell and its illuminated layers may change brightness,
   but they are not allowed to scale or shift. */
.ldg1__artwork-shell.has-gallery-frame,
.ldg1__exhibit:hover .ldg1__artwork-shell.has-gallery-frame,
.ldg1__exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame,
.ldg1__exhibit:active .ldg1__artwork-shell.has-gallery-frame,
.ldg1__exhibit.is-current .ldg1__artwork-shell.has-gallery-frame,
.ldg1__exhibit.is-neon-starting .ldg1__artwork-shell.has-gallery-frame,
.ldg1__exhibit.is-neon-engaged .ldg1__artwork-shell.has-gallery-frame,
.ldg1__exhibit.is-neon-cooldown .ldg1__artwork-shell.has-gallery-frame,
.ldg1__mobile-exhibit:hover .ldg1__artwork-shell.has-gallery-frame,
.ldg1__mobile-exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame,
.ldg1__mobile-exhibit:active .ldg1__artwork-shell.has-gallery-frame,
.ldg1__mobile-exhibit.is-current .ldg1__artwork-shell.has-gallery-frame,
.ldg1__mobile-exhibit.is-neon-starting .ldg1__artwork-shell.has-gallery-frame,
.ldg1__mobile-exhibit.is-neon-engaged .ldg1__artwork-shell.has-gallery-frame,
.ldg1__mobile-exhibit.is-neon-cooldown .ldg1__artwork-shell.has-gallery-frame {
	transform: none !important;
}

.ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__exhibit:hover .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__exhibit:hover .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__exhibit:active .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__exhibit:active .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__exhibit.is-current .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__exhibit.is-current .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__exhibit.is-neon-starting .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__exhibit.is-neon-starting .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__exhibit.is-neon-engaged .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__exhibit.is-neon-engaged .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__exhibit.is-neon-cooldown .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__exhibit.is-neon-cooldown .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__mobile-exhibit:hover .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__mobile-exhibit:hover .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__mobile-exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__mobile-exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__mobile-exhibit:active .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__mobile-exhibit:active .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__mobile-exhibit.is-current .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__mobile-exhibit.is-current .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__mobile-exhibit.is-neon-starting .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__mobile-exhibit.is-neon-starting .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__mobile-exhibit.is-neon-engaged .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__mobile-exhibit.is-neon-engaged .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__mobile-exhibit.is-neon-cooldown .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__mobile-exhibit.is-neon-cooldown .ldg1__artwork-shell.has-gallery-frame::after {
	transform: none !important;
}

/* Preserve each frame's intended static fit in every state. */
.ldg1__artwork-shell.has-gallery-frame .ldg1__artwork,
.ldg1__exhibit:hover .ldg1__artwork-shell.has-gallery-frame .ldg1__artwork,
.ldg1__exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame .ldg1__artwork,
.ldg1__exhibit:active .ldg1__artwork-shell.has-gallery-frame .ldg1__artwork,
.ldg1__exhibit.is-current .ldg1__artwork-shell.has-gallery-frame .ldg1__artwork,
.ldg1__exhibit.is-neon-starting .ldg1__artwork-shell.has-gallery-frame .ldg1__artwork,
.ldg1__exhibit.is-neon-engaged .ldg1__artwork-shell.has-gallery-frame .ldg1__artwork,
.ldg1__mobile-exhibit:hover .ldg1__artwork-shell.has-gallery-frame .ldg1__artwork,
.ldg1__mobile-exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame .ldg1__artwork,
.ldg1__mobile-exhibit:active .ldg1__artwork-shell.has-gallery-frame .ldg1__artwork,
.ldg1__mobile-exhibit.is-current .ldg1__artwork-shell.has-gallery-frame .ldg1__artwork,
.ldg1__mobile-exhibit.is-neon-starting .ldg1__artwork-shell.has-gallery-frame .ldg1__artwork,
.ldg1__mobile-exhibit.is-neon-engaged .ldg1__artwork-shell.has-gallery-frame .ldg1__artwork {
	transform: scale(1.025) !important;
	transition-property: filter, opacity !important;
}

.ldg1__artwork-shell--graphiti .ldg1__artwork,
.ldg1__exhibit:hover .ldg1__artwork-shell--graphiti .ldg1__artwork,
.ldg1__exhibit:focus-visible .ldg1__artwork-shell--graphiti .ldg1__artwork,
.ldg1__exhibit:active .ldg1__artwork-shell--graphiti .ldg1__artwork,
.ldg1__exhibit.is-current .ldg1__artwork-shell--graphiti .ldg1__artwork,
.ldg1__exhibit.is-neon-starting .ldg1__artwork-shell--graphiti .ldg1__artwork,
.ldg1__exhibit.is-neon-engaged .ldg1__artwork-shell--graphiti .ldg1__artwork {
	transform: scale(1.012) !important;
}

.ldg1__artwork-shell--heavy-gold .ldg1__artwork,
.ldg1__exhibit:hover .ldg1__artwork-shell--heavy-gold .ldg1__artwork,
.ldg1__exhibit:focus-visible .ldg1__artwork-shell--heavy-gold .ldg1__artwork,
.ldg1__exhibit:active .ldg1__artwork-shell--heavy-gold .ldg1__artwork,
.ldg1__exhibit.is-current .ldg1__artwork-shell--heavy-gold .ldg1__artwork,
.ldg1__exhibit.is-neon-starting .ldg1__artwork-shell--heavy-gold .ldg1__artwork,
.ldg1__exhibit.is-neon-engaged .ldg1__artwork-shell--heavy-gold .ldg1__artwork {
	transform: none !important;
}

/* Frame always sits above the play button. */
.ldg1__room .ldg1__artwork-shell {
	z-index: 21 !important;
}

/* Play button is fully below the frame with a clean gap. */
.ldg1__room .ldg1__play-trigger,
.ldg1__play-trigger {
	position: absolute !important;
	z-index: 8 !important;
	left: 50% !important;
	bottom: -58px !important;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border-radius: 11px;
	transform: translateX(-50%) !important;
	transition: none !important;
}

/* The button artwork itself never grows, shifts or presses down. */
.ldg1__play-trigger-img,
.ldg1__exhibit:hover .ldg1__play-trigger-img,
.ldg1__exhibit:focus-visible .ldg1__play-trigger-img,
.ldg1__exhibit:active .ldg1__play-trigger-img,
.ldg1__exhibit.is-current .ldg1__play-trigger-img,
.ldg1__exhibit.is-neon-starting .ldg1__play-trigger-img,
.ldg1__exhibit.is-neon-engaged .ldg1__play-trigger-img,
.ldg1__mobile-exhibit:hover .ldg1__play-trigger-img,
.ldg1__mobile-exhibit:focus-visible .ldg1__play-trigger-img,
.ldg1__mobile-exhibit:active .ldg1__play-trigger-img,
.ldg1__mobile-exhibit.is-current .ldg1__play-trigger-img,
.ldg1__mobile-exhibit.is-neon-starting .ldg1__play-trigger-img,
.ldg1__mobile-exhibit.is-neon-engaged .ldg1__play-trigger-img {
	transform: translateZ(0) scale(1) !important;
	transition-property: filter, opacity !important;
}

/* The magical light remains behind the button and is clipped to its shape. */
.ldg1__play-trigger-fx {
	inset: 0 !important;
	overflow: hidden !important;
	border-radius: inherit !important;
}

@media (max-width: 991px) {
	.ldg1__room .ldg1__play-trigger,
	.ldg1__play-trigger {
		bottom: -54px !important;
		width: 41px;
		height: 41px;
	}
}

@media (max-width: 767px) {
	.ldg1__room .ldg1__play-trigger,
	.ldg1__play-trigger {
		bottom: -50px !important;
		width: 38px;
		height: 38px;
	}
}

/* =========================================================
   V21 — SEATED CHARACTER DEPTH OF FIELD
   The character remains sharp in the normal gallery view. As the
   visitor walks towards an artwork, he gradually falls out of focus,
   reinforcing that he is a separate foreground object in the room.
   He becomes sharp again during the backward walk.
   ========================================================= */

.ldg1__seated-character {
	opacity: 1;
	filter: blur(0) brightness(1) saturate(1);
	transition:
		filter 1850ms cubic-bezier(.20,.62,.24,1),
		opacity 1650ms ease;
	will-change: transform, filter, opacity;
}

.ldg1.is-walking-to-artwork .ldg1__seated-character,
.ldg1.is-artwork-focused .ldg1__seated-character {
	opacity: .78;
	filter: blur(5.5px) brightness(.82) saturate(.88);
}

/* Start restoring focus as soon as the visitor walks backwards. */
.ldg1.is-returning-from-artwork .ldg1__seated-character {
	opacity: 1;
	filter: blur(0) brightness(1) saturate(1);
	transition-duration: 1750ms, 1600ms;
}

@media (max-width: 767px) {
	.ldg1.is-walking-to-artwork .ldg1__seated-character,
	.ldg1.is-artwork-focused .ldg1__seated-character {
		opacity: .80;
		filter: blur(4.2px) brightness(.84) saturate(.90);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1__seated-character {
		transition-duration: 1ms !important;
	}
}


/* =========================================================
   V22 — CHARACTER BLUR WITHOUT TRANSPARENCY
   The character remains fully opaque in every gallery state.
   Only focus/blur changes as the visitor moves towards or away
   from the artwork.
   ========================================================= */

.ldg1__seated-character,
.ldg1__seated-character-img,
.ldg1.is-walking-to-artwork .ldg1__seated-character,
.ldg1.is-walking-to-artwork .ldg1__seated-character-img,
.ldg1.is-artwork-focused .ldg1__seated-character,
.ldg1.is-artwork-focused .ldg1__seated-character-img,
.ldg1.is-returning-from-artwork .ldg1__seated-character,
.ldg1.is-returning-from-artwork .ldg1__seated-character-img {
	opacity: 1 !important;
}

/* =========================================================
   V23 — CHARACTER SEAT POSITION + SUBTLE PERSPECTIVE SHIFT
   Move the character slightly upward so he sits more naturally on
   the bench, while keeping his size unchanged. As the visitor scrolls
   right, the character drifts very slightly left on the seat, and
   vice versa, to create a subtle perspective effect.
   ========================================================= */

.ldg1 {
	--ldg1-seat-shift: 0px;
}

.ldg1__seated-character,
.ldg1__room .ldg1__seated-character {
	bottom: 17.4% !important;
	height: 42.5% !important;
	transform: translateX(calc(-50% + var(--ldg1-seat-shift, 0px))) !important;
	transition:
		transform 280ms ease-out,
		filter 1850ms cubic-bezier(.20,.62,.24,1) !important;
	will-change: transform, filter !important;
}

@media (max-width: 991px) {
	.ldg1__seated-character,
	.ldg1__room .ldg1__seated-character {
		bottom: 17.4% !important;
		height: 42.5% !important;
	}
}

@media (max-width: 767px) and (orientation: portrait) {
	.ldg1__seated-character,
	.ldg1__room .ldg1__seated-character {
		bottom: 17.4% !important;
		height: 42.5% !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1__seated-character,
	.ldg1__room .ldg1__seated-character {
		transition: filter 1ms linear !important;
	}
}

/* =========================================================
   V24 — FRAME 2 CHILL FRAME
   Exhibit 2 becomes a tall non-square frame that uses the full
   central wall area up towards the first ceiling break.
   ========================================================= */

.ldg1__artwork-shell--chill-frame {
	--ldg1-frame-edge: rgba(255, 226, 156, .68);
	--ldg1-frame-glow: rgba(255, 190, 54, .52);
	--ldg1-frame-glow-soft: rgba(181, 90, 255, .22);
}

.ldg1__artwork-shell--chill-frame::before {
	background:
		radial-gradient(ellipse at 50% 18%, rgba(255, 198, 72, .28) 0%, rgba(255, 198, 72, .18) 18%, transparent 58%),
		radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(182, 82, 255, .18) 62%, transparent 84%),
		radial-gradient(ellipse at 50% 82%, rgba(255, 171, 45, .18) 0%, transparent 40%);
	filter: blur(11px);
	opacity: .88;
}

.ldg1__artwork-shell--chill-frame .ldg1__artwork {
	filter:
		drop-shadow(0 0 6px rgba(255, 215, 122, .34))
		drop-shadow(0 0 14px rgba(255, 180, 48, .16))
		drop-shadow(0 10px 18px rgba(0, 0, 0, .56));
}

.ldg1__artwork-shell--chill-frame .ldg1__inside-artwork {
	left: 16.8%;
	top: 14.1%;
	width: 66.4%;
	height: 72.5%;
	object-fit: cover;
	object-position: center;
	transform: none;
	box-shadow:
		inset 0 0 15px rgba(0, 0, 0, .72),
		0 0 10px rgba(255, 180, 54, .18),
		0 0 14px rgba(173, 92, 255, .14);
	filter: brightness(.96) saturate(1.02);
}

.ldg1__artwork-shell--chill-frame .ldg1__artwork-glass {
	inset: 7.2% 7.6% 7.8%;
	border-radius: 2.2%;
	background:
		linear-gradient(112deg, rgba(255, 255, 255, .12), transparent 20%, transparent 68%, rgba(255, 223, 154, .04)),
		linear-gradient(180deg, transparent 72%, rgba(0, 0, 0, .15));
	opacity: .21;
}

/* Only Exhibit 2 uses the tall wall-filling placement. */
.ldg1__room [data-index="1"].ldg1__exhibit {
	left: 42.15% !important;
	top: 11.2% !important;
	width: 15.8% !important;
	height: 49.6% !important;
}

.ldg1__room [data-index="1"].ldg1__exhibit .ldg1__caption {
	bottom: -50px;
}

.ldg1__room [data-index="1"].ldg1__exhibit .ldg1__play-trigger {
	bottom: -54px !important;
}

@media (max-width: 991px) {
	.ldg1__room [data-index="1"].ldg1__exhibit {
		left: 42.25% !important;
		top: 12.0% !important;
		width: 15.6% !important;
		height: 47.8% !important;
	}
}

@media (max-width: 767px) {
	.ldg1__room [data-index="1"].ldg1__exhibit {
		left: 42.35% !important;
		top: 12.8% !important;
		width: 15.4% !important;
		height: 45.8% !important;
	}

	.ldg1__room [data-index="1"].ldg1__exhibit .ldg1__caption {
		bottom: -48px;
	}

	.ldg1__room [data-index="1"].ldg1__exhibit .ldg1__play-trigger {
		bottom: -50px !important;
	}
}

/* =========================================================
   V25 — CHILL FRAME 2 + CHARACTER DEPTH/PARALLAX REFINEMENT
   ========================================================= */

/*
 * Frame 2 is smaller and lower than V24. Its lower edge remains in
 * approximately the same wall position, while the top is moved down
 * away from the ceiling.
 */
.ldg1__room [data-index="1"].ldg1__exhibit {
	left: 42.90% !important;
	top: 17.0% !important;
	width: 14.20% !important;
	height: 43.80% !important;
}

/* Keep the tall Chill frame entirely visible and stationary. */
.ldg1__room [data-index="1"] .ldg1__artwork-shell--chill-frame {
	width: 100% !important;
	height: 100% !important;
	overflow: visible !important;
	transform: none !important;
}

/* Chill still image opening. */
.ldg1__artwork-shell--chill-frame .ldg1__inside-artwork {
	left: 16.8% !important;
	top: 14.1% !important;
	width: 66.4% !important;
	height: 72.5% !important;
	object-fit: cover !important;
	object-position: center !important;
	transform: none !important;
	opacity: 1;
	visibility: visible;
}

/* Chill MP4 canvas uses exactly the same frame opening as Chill.jpg. */
.ldg1__artwork-shell--chill-frame .ldg1__video-slot {
	left: 16.8% !important;
	top: 14.1% !important;
	width: 66.4% !important;
	height: 72.5% !important;
	transform: none !important;
}

/* The transparent frame skin must remain visibly above the still/video. */
.ldg1__artwork-shell--chill-frame .ldg1__artwork {
	position: relative !important;
	z-index: 3 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

/* Keep the play button underneath the lower edge of the shorter frame. */
.ldg1__room [data-index="1"].ldg1__exhibit .ldg1__play-trigger {
	bottom: -52px !important;
}

.ldg1__room [data-index="1"].ldg1__exhibit .ldg1__caption {
	bottom: -50px !important;
}

/*
 * Smooth opposite-direction seat parallax. The JavaScript changes only
 * --ldg1-seat-shift; the asset remains attached to the bench coordinates.
 */
.ldg1__seated-character,
.ldg1__room .ldg1__seated-character {
	transform: translate3d(calc(-50% + var(--ldg1-seat-shift, 0px)), 0, 0) !important;
	transition:
		transform 360ms cubic-bezier(.22,.61,.36,1),
		filter 2100ms cubic-bezier(.20,.62,.24,1) !important;
}

/*
 * Fully opaque depth-of-field effect. Blur builds gradually during the
 * forward walk and reaches its maximum only at the close viewing position.
 */
.ldg1__seated-character,
.ldg1__seated-character-img {
	opacity: 1 !important;
}

.ldg1.is-walking-to-artwork .ldg1__seated-character {
	opacity: 1 !important;
	filter: blur(3.5px) brightness(.93) saturate(.95) !important;
}

.ldg1.is-artwork-focused .ldg1__seated-character {
	opacity: 1 !important;
	filter: blur(7px) brightness(.88) saturate(.91) !important;
}

.ldg1.is-returning-from-artwork .ldg1__seated-character {
	opacity: 1 !important;
	filter: blur(1.5px) brightness(.97) saturate(.98) !important;
	transition-duration: 1650ms, 1650ms !important;
}

@media (max-width: 991px) {
	.ldg1__room [data-index="1"].ldg1__exhibit {
		left: 42.95% !important;
		top: 17.6% !important;
		width: 14.10% !important;
		height: 43.20% !important;
	}
}

@media (max-width: 767px) {
	.ldg1__room [data-index="1"].ldg1__exhibit {
		left: 43.0% !important;
		top: 18.2% !important;
		width: 14.0% !important;
		height: 42.6% !important;
	}

	.ldg1__room [data-index="1"].ldg1__exhibit .ldg1__play-trigger {
		bottom: -48px !important;
	}

	.ldg1.is-walking-to-artwork .ldg1__seated-character {
		filter: blur(2.8px) brightness(.94) saturate(.96) !important;
	}

	.ldg1.is-artwork-focused .ldg1__seated-character {
		filter: blur(5.5px) brightness(.90) saturate(.93) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1__seated-character,
	.ldg1__room .ldg1__seated-character {
		transition-duration: 1ms !important;
	}
}

/* =========================================================
   V26 — CHILL FRAME BACKING + REMOVE THIN FRAME LINES
   Adds the tall recessed wall backing behind Frame 2 and removes the
   thin generic outline line that was visible around all gallery frames.
   ========================================================= */

/* Remove the thin line around every frame. Keep glow only. */
.ldg1__artwork-shell.has-gallery-frame::after {
	border: 0 !important;
	outline: 0 !important;
	box-shadow:
		0 0 6px var(--ldg1-frame-glow, rgba(255, 188, 45, .36)),
		0 0 16px var(--ldg1-frame-glow-soft, rgba(255, 188, 45, .18)),
		inset 0 0 8px rgba(255, 237, 184, .07) !important;
}

/*
 * Frame 2: make the frame a touch smaller and lower so it sits like the
 * bottom reference, further away from the ceiling. Then place the long
 * backing image behind the full frame/content stack so the recess fills
 * the extra height.
 */
.ldg1__room [data-index="1"].ldg1__exhibit {
	left: 42.95% !important;
	top: 18.9% !important;
	width: 13.7% !important;
	height: 41.9% !important;
	overflow: visible !important;
}

.ldg1__room [data-index="1"].ldg1__exhibit::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: 50%;
	top: -12.5%;
	width: 132%;
	height: 148%;
	transform: translateX(-50%);
	background:
		linear-gradient(transparent, transparent)
		center center / 100% 100% no-repeat;
	pointer-events: none;
	opacity: 1;
	filter:
		drop-shadow(0 0 14px rgba(255, 189, 58, .18))
		drop-shadow(0 0 32px rgba(255, 180, 42, .10));
}

/* Ensure the frame/content/button sit above the new backing. */
.ldg1__room [data-index="1"] .ldg1__artwork-shell--chill-frame,
.ldg1__room [data-index="1"] .ldg1__caption,
.ldg1__room [data-index="1"] .ldg1__play-trigger {
	position: relative;
	z-index: 2;
}

.ldg1__room [data-index="1"] .ldg1__artwork-shell--chill-frame {
	width: 100% !important;
	height: 100% !important;
	overflow: visible !important;
	transform: none !important;
}

.ldg1__artwork-shell--chill-frame .ldg1__inside-artwork,
.ldg1__artwork-shell--chill-frame .ldg1__video-slot {
	left: 16.8% !important;
	top: 14.1% !important;
	width: 66.4% !important;
	height: 72.5% !important;
	transform: none !important;
}

.ldg1__room [data-index="1"].ldg1__exhibit .ldg1__caption {
	bottom: -48px !important;
}

.ldg1__room [data-index="1"].ldg1__exhibit .ldg1__play-trigger {
	bottom: -50px !important;
}

@media (max-width: 991px) {
	.ldg1__room [data-index="1"].ldg1__exhibit {
		left: 43.0% !important;
		top: 19.2% !important;
		width: 13.7% !important;
		height: 41.4% !important;
	}

	.ldg1__room [data-index="1"].ldg1__exhibit::before {
		top: -12.8%;
		width: 133%;
		height: 149%;
	}
}

@media (max-width: 767px) {
	.ldg1__room [data-index="1"].ldg1__exhibit {
		left: 43.05% !important;
		top: 19.6% !important;
		width: 13.9% !important;
		height: 40.8% !important;
	}

	.ldg1__room [data-index="1"].ldg1__exhibit::before {
		top: -12.8%;
		width: 135%;
		height: 150%;
	}

	.ldg1__room [data-index="1"].ldg1__exhibit .ldg1__caption {
		bottom: -46px !important;
	}

	.ldg1__room [data-index="1"].ldg1__exhibit .ldg1__play-trigger {
		bottom: -46px !important;
	}
}

/* =========================================================
   V27 — VISIBLE HORIZONTAL CHARACTER PARALLAX
   The character now moves clearly but gently in the opposite direction
   to the gallery scroll. JavaScript supplies a smoothed pixel offset;
   CSS applies it without an additional transform delay.
   ========================================================= */

.ldg1__seated-character,
.ldg1__room .ldg1__seated-character {
	transform:
		translate3d(
			calc(-50% + var(--ldg1-seat-shift, 0px)),
			0,
			0
		) !important;
	transition:
		filter 2100ms cubic-bezier(.20,.62,.24,1) !important;
	will-change: transform, filter !important;
}

/* =========================================================
   V28 — SLIGHTLY STRONGER CHARACTER PARALLAX
   The seated character now drifts a little further across the bench
   to make the horizontal parallax read more clearly while staying subtle.
   ========================================================= */

/* =========================================================
   V29 — FRAME 2 BACKING WIDTH + INTERACTIVE BIO TERMINAL
   ========================================================= */

/*
 * Frame 2 backing is now exactly the width of the Chill media frame.
 * It extends upwards to conceal the old square recess but ends at the
 * lower edge of the frame, so the play button remains outside it.
 */
.ldg1__room [data-index="1"].ldg1__exhibit::before {
	left: 50% !important;
	top: -12.8% !important;
	right: auto !important;
	bottom: 0 !important;
	width: 100% !important;
	height: auto !important;
	transform: translateX(-50%) !important;
	background:
		linear-gradient(transparent, transparent)
		center center / 100% 100% no-repeat !important;
}

/* Keep the frame and its content above the backing. */
.ldg1__room [data-index="1"] .ldg1__artwork-shell--chill-frame {
	position: relative !important;
	z-index: 3 !important;
}

/* The play button stays clearly below and outside the backing. */
.ldg1__room [data-index="1"] .ldg1__play-trigger {
	position: absolute !important;
	z-index: 5 !important;
	bottom: -50px !important;
}


/* ---------------------------------------------------------
   Clickable BIO / BIO-Push character
   --------------------------------------------------------- */

button.ldg1__seated-character,
button.ldg1__seated-character:hover,
button.ldg1__seated-character:focus,
button.ldg1__seated-character:focus-visible,
button.ldg1__seated-character:active {
	margin: 0;
	padding: 0;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	outline: 0;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: auto;
	cursor: pointer;
}

.ldg1__seated-character-visual {
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
}

.ldg1__seated-character-img {
	position: absolute !important;
	left: 50%;
	bottom: 0;
	display: block;
	width: auto !important;
	height: 100% !important;
	max-width: none !important;
	opacity: 1;
	transform: translate3d(-50%, 0, 0) !important;
	transition:
		opacity 520ms cubic-bezier(.22,.61,.36,1),
		filter 300ms ease !important;
	pointer-events: none;
	-webkit-user-drag: none;
}

.ldg1__seated-character-img--lead {
	z-index: 1;
	opacity: 1;
}

.ldg1__seated-character-img--push {
	z-index: 2;
	opacity: 0;
}

/* Hover/focus communicates interactivity without moving the character. */
button.ldg1__seated-character:hover .ldg1__seated-character-img--lead,
button.ldg1__seated-character:focus-visible .ldg1__seated-character-img--lead {
	filter:
		brightness(1.05)
		saturate(1.04)
		drop-shadow(0 0 8px rgba(255, 191, 55, .18));
}

button.ldg1__seated-character:focus-visible {
	outline: 1px solid rgba(116, 255, 141, .72) !important;
	outline-offset: 6px;
}

/* Character cross-fade while the BIO terminal is open. */
.ldg1.is-bio-open .ldg1__seated-character-img--lead {
	opacity: 0;
}

.ldg1.is-bio-open .ldg1__seated-character-img--push {
	opacity: 1;
}


/* ---------------------------------------------------------
   Retro narrow CRT BIO panel
   --------------------------------------------------------- */

.ldg1__bio-layer {
	position: absolute;
	z-index: 1000012;
	inset: 0;
	visibility: hidden;
	pointer-events: none;
}

.ldg1.is-bio-open .ldg1__bio-layer {
	visibility: visible;
	pointer-events: auto;
}

.ldg1__bio-backdrop,
.ldg1__bio-backdrop:hover,
.ldg1__bio-backdrop:focus,
.ldg1__bio-backdrop:active {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background:
		radial-gradient(circle at 50% 78%, rgba(57, 122, 67, .12), transparent 34%),
		rgba(0, 0, 0, .54) !important;
	border: 0 !important;
	box-shadow: none !important;
	opacity: 0;
	appearance: none;
	-webkit-appearance: none;
	cursor: default;
	transition: opacity 460ms ease;
}

.ldg1.is-bio-open .ldg1__bio-backdrop {
	opacity: 1;
}

.ldg1__bio-panel {
	position: absolute;
	left: 50%;
	bottom: max(18px, env(safe-area-inset-bottom));
	width: min(680px, calc(100vw - 32px));
	max-width: 92vw;
	margin: 0;
	opacity: 0;
	transform: translate3d(-50%, calc(100% + 90px), 0);
	transition:
		transform 680ms cubic-bezier(.16,.82,.24,1),
		opacity 420ms ease;
	will-change: transform, opacity;
	outline: 0;
}

.ldg1.is-bio-open .ldg1__bio-panel {
	opacity: 1;
	transform: translate3d(-50%, 0, 0);
}

.ldg1__bio-chassis {
	position: relative;
	padding: 9px;
	overflow: hidden;
	background:
		linear-gradient(145deg, rgba(58, 47, 24, .98), rgba(10, 10, 8, .99) 36%, rgba(38, 30, 15, .98));
	border: 1px solid rgba(238, 185, 69, .62);
	border-radius: 18px;
	box-shadow:
		0 24px 70px rgba(0, 0, 0, .72),
		0 0 0 2px rgba(58, 40, 9, .92),
		0 0 30px rgba(255, 184, 42, .14),
		inset 0 1px 0 rgba(255, 224, 148, .20);
}

.ldg1__bio-chassis::before {
	position: absolute;
	inset: 4px;
	content: "";
	border: 1px solid rgba(255, 210, 109, .16);
	border-radius: 14px;
	pointer-events: none;
}

.ldg1__bio-header {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	min-height: 34px;
	padding: 0 9px 7px;
	gap: 8px;
	color: rgba(132, 255, 150, .78);
	font-family: "Courier New", Courier, monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ldg1__bio-status {
	width: 7px;
	height: 7px;
	background: #79ff8e;
	border-radius: 50%;
	box-shadow:
		0 0 5px rgba(121, 255, 142, .92),
		0 0 12px rgba(121, 255, 142, .40);
	animation: ldg1-bio-status-pulse 2.6s ease-in-out infinite;
}

.ldg1__bio-terminal-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ldg1__bio-close,
.ldg1__bio-close:hover,
.ldg1__bio-close:focus,
.ldg1__bio-close:active {
	min-width: 0;
	margin: 0;
	padding: 4px 5px;
	color: rgba(138, 255, 156, .76);
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	font: inherit;
	letter-spacing: .08em;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: color 180ms ease, text-shadow 180ms ease;
}

.ldg1__bio-close:hover,
.ldg1__bio-close:focus-visible {
	color: #b6ffc0;
	text-shadow:
		0 0 6px rgba(113, 255, 134, .72),
		0 0 14px rgba(113, 255, 134, .28);
	outline: 0;
}

.ldg1__bio-screen {
	position: relative;
	height: min(58svh, 530px);
	min-height: 300px;
	overflow: hidden;
	background:
		radial-gradient(ellipse at center, rgba(15, 58, 27, .30), transparent 72%),
		linear-gradient(180deg, #021007, #010a04 56%, #020d05);
	border: 1px solid rgba(105, 233, 126, .35);
	border-radius: 38px / 20px;
	box-shadow:
		inset 0 0 24px rgba(0, 0, 0, .94),
		inset 0 0 70px rgba(34, 126, 52, .16),
		0 0 10px rgba(98, 255, 123, .10);
}

.ldg1__bio-screen::before {
	position: absolute;
	z-index: 1;
	inset: 0;
	content: "";
	background:
		linear-gradient(90deg, rgba(104, 255, 128, .035), transparent 10%, transparent 90%, rgba(104, 255, 128, .035)),
		radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, .62));
	border-radius: inherit;
	pointer-events: none;
}

.ldg1__bio-scanlines {
	position: absolute;
	z-index: 3;
	inset: 0;
	background:
		repeating-linear-gradient(
			180deg,
			rgba(0, 0, 0, 0) 0,
			rgba(0, 0, 0, 0) 3px,
			rgba(0, 0, 0, .18) 4px
		);
	opacity: .60;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.ldg1__bio-copy {
	position: relative;
	z-index: 2;
	height: 100%;
	overflow-y: auto;
	padding: clamp(22px, 4vw, 38px) clamp(22px, 4.8vw, 48px) 34px;
	color: #8dffa1;
	font-family: "Courier New", Courier, monospace;
	font-size: clamp(12px, 1.25vw, 15px);
	line-height: 1.72;
	letter-spacing: .018em;
	text-shadow:
		0 0 4px rgba(112, 255, 133, .52),
		0 0 11px rgba(112, 255, 133, .18);
	scrollbar-width: thin;
	scrollbar-color: rgba(106, 255, 129, .45) rgba(0, 0, 0, .28);
}

.ldg1__bio-copy::-webkit-scrollbar {
	width: 7px;
}

.ldg1__bio-copy::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, .26);
}

.ldg1__bio-copy::-webkit-scrollbar-thumb {
	background: rgba(106, 255, 129, .42);
	border-radius: 99px;
}

.ldg1__bio-copy h2 {
	margin: 0 0 5px;
	color: #b0ffbc;
	font-family: inherit;
	font-size: clamp(24px, 4.2vw, 42px);
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.05;
	text-shadow:
		0 0 5px rgba(118, 255, 138, .76),
		0 0 18px rgba(118, 255, 138, .26);
}

.ldg1__bio-copy p {
	margin: 0 0 1.25em;
}

.ldg1__bio-kicker {
	margin-bottom: 10px !important;
	color: rgba(136, 255, 153, .66);
	font-size: .78em;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ldg1__bio-rule {
	overflow: hidden;
	margin-bottom: 1.5em !important;
	color: rgba(116, 255, 137, .40);
	white-space: nowrap;
}

.ldg1__bio-end {
	margin-top: 1.8em !important;
	margin-bottom: 0 !important;
	color: rgba(161, 255, 174, .72);
	font-weight: 700;
	letter-spacing: .08em;
}

.ldg1__bio-end span {
	display: inline-block;
	width: .64em;
	height: 1em;
	margin-left: 4px;
	background: #9affad;
	box-shadow: 0 0 8px rgba(119, 255, 140, .72);
	vertical-align: -.12em;
	animation: ldg1-bio-cursor 1.05s steps(1, end) infinite;
}

@keyframes ldg1-bio-status-pulse {
	0%, 100% { opacity: .55; }
	50% { opacity: 1; }
}

@keyframes ldg1-bio-cursor {
	0%, 48% { opacity: 1; }
	49%, 100% { opacity: 0; }
}

@media (max-width: 767px) {
	.ldg1__room [data-index="1"].ldg1__exhibit::before {
		top: -12.5% !important;
		width: 100% !important;
		bottom: 0 !important;
	}

	.ldg1__bio-panel {
		bottom: max(10px, env(safe-area-inset-bottom));
		width: calc(100vw - 18px);
		max-width: none;
	}

	.ldg1__bio-chassis {
		padding: 7px;
		border-radius: 15px;
	}

	.ldg1__bio-header {
		min-height: 30px;
		padding: 0 6px 5px;
		font-size: 8px;
	}

	.ldg1__bio-screen {
		height: min(64svh, 560px);
		min-height: 280px;
		border-radius: 26px / 16px;
	}

	.ldg1__bio-copy {
		padding: 22px 20px 28px;
		font-size: 12px;
		line-height: 1.62;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1__bio-panel,
	.ldg1__bio-backdrop,
	.ldg1__seated-character-img {
		transition-duration: 1ms !important;
	}

	.ldg1__bio-status,
	.ldg1__bio-end span {
		animation: none !important;
	}
}

/* =========================================================
   V30 — FULL RECESS COVER FOR CHILL FRAME
   The Long-Frame-Backing now covers the complete square recess that
   is baked into the gallery background. The Chill media frame is
   slightly wider and sits neatly inside the new backing.
   ========================================================= */

/* Widen Frame 2 while keeping it centred in the same wall section. */
.ldg1__room [data-index="1"].ldg1__exhibit {
	left: 42.30% !important;
	top: 18.45% !important;
	width: 15.40% !important;
	height: 42.35% !important;
	overflow: visible !important;
}

/*
 * Cover the complete original square recess:
 * - much wider than the media frame
 * - extends upwards to the top edge of the baked-in square
 * - extends only slightly below the media frame
 * - stops before the separate play button begins
 */
.ldg1__room [data-index="1"].ldg1__exhibit::before {
	position: absolute !important;
	z-index: 0 !important;
	left: 50% !important;
	top: -34% !important;
	right: auto !important;
	bottom: -6% !important;
	width: 145% !important;
	height: auto !important;
	transform: translateX(-50%) !important;
	background:
		linear-gradient(transparent, transparent)
		center center / 100% 100% no-repeat !important;
	opacity: 1 !important;
	pointer-events: none !important;
}

/* Media frame, still and MP4 remain above the recess-cover image. */
.ldg1__room [data-index="1"] .ldg1__artwork-shell--chill-frame {
	position: relative !important;
	z-index: 3 !important;
	width: 100% !important;
	height: 100% !important;
	overflow: visible !important;
	transform: none !important;
}

/* Keep the transparent Chill frame fully visible at the wider size. */
.ldg1__artwork-shell--chill-frame .ldg1__artwork {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: center !important;
	transform: none !important;
}

/* The still and video continue to fill the transparent frame opening. */
.ldg1__artwork-shell--chill-frame .ldg1__inside-artwork,
.ldg1__artwork-shell--chill-frame .ldg1__video-slot {
	left: 16.4% !important;
	top: 13.8% !important;
	width: 67.2% !important;
	height: 73.0% !important;
	transform: none !important;
}

/* Play button remains completely outside the new backing. */
.ldg1__room [data-index="1"] .ldg1__play-trigger {
	position: absolute !important;
	z-index: 5 !important;
	bottom: -60px !important;
}

/* Caption also stays outside the backing. */
.ldg1__room [data-index="1"] .ldg1__caption {
	bottom: -56px !important;
}

@media (max-width: 991px) {
	.ldg1__room [data-index="1"].ldg1__exhibit {
		left: 42.35% !important;
		top: 18.85% !important;
		width: 15.30% !important;
		height: 41.95% !important;
	}

	.ldg1__room [data-index="1"].ldg1__exhibit::before {
		top: -34.5% !important;
		bottom: -6% !important;
		width: 146% !important;
	}
}

@media (max-width: 767px) {
	.ldg1__room [data-index="1"].ldg1__exhibit {
		left: 42.35% !important;
		top: 19.20% !important;
		width: 15.30% !important;
		height: 41.55% !important;
	}

	.ldg1__room [data-index="1"].ldg1__exhibit::before {
		top: -35% !important;
		bottom: -5.5% !important;
		width: 148% !important;
	}

	.ldg1__room [data-index="1"] .ldg1__play-trigger {
		bottom: -52px !important;
	}

	.ldg1__room [data-index="1"] .ldg1__caption {
		bottom: -50px !important;
	}
}

/* =========================================================
   V31 — WORKING BIO CHARACTER CROSSFADE + CRT PANEL
   Fixes the zero-width character click target and overrides the older
   opacity safeguard that was forcing both character images to display.
   ========================================================= */

button.ldg1__seated-character,
button.ldg1__seated-character:hover,
button.ldg1__seated-character:focus,
button.ldg1__seated-character:focus-visible,
button.ldg1__seated-character:active {
	z-index: 18 !important;
	display: block !important;
	width: 35.66vh !important;
	width: 35.66svh !important;
	height: 42.5% !important;
	overflow: visible !important;
	pointer-events: auto !important;
	cursor: pointer !important;
	touch-action: manipulation;
}

.ldg1__seated-character-visual {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	pointer-events: none !important;
}

.ldg1__seated-character-img,
.ldg1__seated-character-img--lead,
.ldg1__seated-character-img--push {
	position: absolute !important;
	z-index: 1;
	inset: 0 !important;
	left: 0 !important;
	bottom: auto !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: contain !important;
	object-position: 50% 100% !important;
	transform: none !important;
	pointer-events: none !important;
	-webkit-user-drag: none;
	transition:
		opacity 720ms cubic-bezier(.22,.61,.36,1),
		filter 300ms ease !important;
}

.ldg1__seated-character-img--lead {
	z-index: 1 !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.ldg1__seated-character-img--push {
	z-index: 2 !important;
	opacity: 0 !important;
	visibility: visible !important;
}

.ldg1.is-bio-open .ldg1__seated-character-img--lead,
.ldg1__seated-character.is-bio-pushed .ldg1__seated-character-img--lead {
	opacity: 0 !important;
}

.ldg1.is-bio-open .ldg1__seated-character-img--push,
.ldg1__seated-character.is-bio-pushed .ldg1__seated-character-img--push {
	opacity: 1 !important;
}

.ldg1__seated-character::after {
	position: absolute;
	inset: 0;
	content: "";
	pointer-events: auto;
	background: transparent;
}

.ldg1__room:first-child .ldg1__seated-character {
	pointer-events: auto !important;
}

/* BIO layer and slow bottom-up reveal. */
.ldg1__bio-layer {
	z-index: 1000040 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.ldg1.is-bio-open .ldg1__bio-layer {
	visibility: visible !important;
	pointer-events: auto !important;
}

.ldg1__bio-panel {
	opacity: 0 !important;
	transform: translate3d(-50%, calc(100% + 150px), 0) !important;
	transition:
		transform 980ms cubic-bezier(.14,.86,.22,1),
		opacity 520ms ease !important;
}

.ldg1.is-bio-open .ldg1__bio-panel {
	opacity: 1 !important;
	transform: translate3d(-50%, 0, 0) !important;
}

.ldg1__bio-backdrop {
	opacity: 0 !important;
	transition: opacity 700ms ease !important;
}

.ldg1.is-bio-open .ldg1__bio-backdrop {
	opacity: 1 !important;
}

.ldg1__bio-panel,
.ldg1__bio-panel *,
.ldg1__bio-close,
.ldg1__bio-backdrop {
	pointer-events: auto;
}

@media (max-width: 991px) {
	button.ldg1__seated-character,
	button.ldg1__seated-character:hover,
	button.ldg1__seated-character:focus,
	button.ldg1__seated-character:focus-visible,
	button.ldg1__seated-character:active {
		width: 35.66vh !important;
		width: 35.66svh !important;
		height: 42.5% !important;
	}
}

@media (max-width: 767px) and (orientation: portrait) {
	button.ldg1__seated-character,
	button.ldg1__seated-character:hover,
	button.ldg1__seated-character:focus,
	button.ldg1__seated-character:focus-visible,
	button.ldg1__seated-character:active {
		width: 35.66vh !important;
		width: 35.66svh !important;
		height: 42.5% !important;
	}

	.ldg1__bio-panel {
		transform: translate3d(-50%, calc(100% + 110px), 0) !important;
	}

	.ldg1.is-bio-open .ldg1__bio-panel {
		transform: translate3d(-50%, 0, 0) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1__seated-character-img,
	.ldg1__bio-panel,
	.ldg1__bio-backdrop {
		transition-duration: 1ms !important;
	}
}

/* =========================================================
   V32 — DELAYED BIO TERMINAL + RELIABLE INTERNAL SCROLL
   BIO transforms into BIO-Push first. The terminal waits 2.3 seconds,
   then slowly slides up. All biography copy scrolls inside the CRT.
   ========================================================= */

/* Give the character transformation time to be seen clearly. */
.ldg1__seated-character-img {
	transition:
		opacity 1100ms cubic-bezier(.22,.61,.36,1),
		filter 300ms ease !important;
}

/*
 * During the character morph the terminal layer stays fully hidden.
 * During closing it remains mounted long enough to slide off-screen.
 */
.ldg1__bio-layer {
	visibility: hidden !important;
	pointer-events: none !important;
}

.ldg1.is-bio-open .ldg1__bio-layer,
.ldg1.is-bio-closing .ldg1__bio-layer {
	visibility: visible !important;
}

.ldg1.is-bio-open .ldg1__bio-layer {
	pointer-events: auto !important;
}

.ldg1.is-bio-closing .ldg1__bio-layer {
	pointer-events: none !important;
}

/* Panel appears only after JavaScript adds is-bio-open. */
.ldg1__bio-panel {
	opacity: 0 !important;
	transform: translate3d(-50%, calc(100% + 170px), 0) !important;
	transition:
		transform 1050ms cubic-bezier(.14,.86,.22,1),
		opacity 600ms ease !important;
}

.ldg1.is-bio-open .ldg1__bio-panel {
	opacity: 1 !important;
	transform: translate3d(-50%, 0, 0) !important;
}

.ldg1.is-bio-closing .ldg1__bio-panel {
	opacity: 0 !important;
	transform: translate3d(-50%, calc(100% + 170px), 0) !important;
}

/* Backdrop follows the delayed panel reveal. */
.ldg1__bio-backdrop {
	opacity: 0 !important;
	transition: opacity 760ms ease !important;
}

.ldg1.is-bio-open .ldg1__bio-backdrop {
	opacity: 1 !important;
}

.ldg1.is-bio-closing .ldg1__bio-backdrop {
	opacity: 0 !important;
}

/*
 * Create a proper fixed-height internal scrolling region.
 * min-height: 0 is essential for scrolling inside nested flex containers.
 */
.ldg1__bio-chassis {
	display: flex !important;
	flex-direction: column !important;
	max-height: calc(100svh - 36px) !important;
	overflow: hidden !important;
}

.ldg1__bio-header {
	flex: 0 0 auto !important;
}

.ldg1__bio-screen {
	display: flex !important;
	flex: 1 1 auto !important;
	height: min(58svh, 530px) !important;
	min-height: 0 !important;
	max-height: min(58svh, 530px) !important;
	overflow: hidden !important;
}

.ldg1__bio-copy {
	position: relative !important;
	z-index: 4 !important;
	flex: 1 1 auto !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: 100% !important;
	overflow-x: hidden !important;
	overflow-y: scroll !important;
	overscroll-behavior: contain !important;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
	scrollbar-gutter: stable;
	padding-bottom: 48px !important;
	pointer-events: auto !important;
}

/* Make the internal scrollbar clearly visible without losing the CRT style. */
.ldg1__bio-copy {
	scrollbar-width: thin;
	scrollbar-color: rgba(114, 255, 136, .68) rgba(2, 24, 8, .72);
}

.ldg1__bio-copy::-webkit-scrollbar {
	width: 9px !important;
}

.ldg1__bio-copy::-webkit-scrollbar-track {
	background: rgba(1, 19, 6, .84) !important;
	border-left: 1px solid rgba(105, 255, 128, .10);
}

.ldg1__bio-copy::-webkit-scrollbar-thumb {
	background:
		linear-gradient(
			180deg,
			rgba(142, 255, 158, .78),
			rgba(78, 210, 98, .54)
		) !important;
	border: 2px solid rgba(1, 21, 7, .88);
	border-radius: 999px !important;
	box-shadow: 0 0 7px rgba(105, 255, 128, .26);
}

/* Scanlines remain visual only and never block scrolling. */
.ldg1__bio-scanlines,
.ldg1__bio-screen::before {
	pointer-events: none !important;
}

@media (max-width: 767px) {
	.ldg1__bio-chassis {
		max-height: calc(100svh - 20px) !important;
	}

	.ldg1__bio-screen {
		height: min(64svh, 560px) !important;
		max-height: min(64svh, 560px) !important;
	}

	.ldg1__bio-panel,
	.ldg1.is-bio-closing .ldg1__bio-panel {
		transform: translate3d(-50%, calc(100% + 125px), 0) !important;
	}

	.ldg1.is-bio-open .ldg1__bio-panel {
		transform: translate3d(-50%, 0, 0) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1__seated-character-img,
	.ldg1__bio-panel,
	.ldg1__bio-backdrop {
		transition-duration: 1ms !important;
	}
}

/* =========================================================
   V33 — RATIO-CORRECT BACKING AND CHILL FRAME ALIGNMENT
   Backing.webp is displayed at its original 800 × 984 ratio.
   Chill-Frame.webp is displayed at its original 716 × 1000 ratio.
   Their bottom edges share the same wall coordinate, allowing the
   backing artwork to conceal the baked-in square recess precisely.
   ========================================================= */

/*
 * Frame 2 is centred in the middle wall position. Width defines its
 * natural size; aspect-ratio preserves the Chill frame without stretching.
 * The bottom stays aligned with the lower edge of the original wall frame.
 */
.ldg1__room [data-index="1"].ldg1__exhibit {
	left: 42.35% !important;
	right: auto !important;
	top: auto !important;
	bottom: 39.20% !important;
	width: 15.30% !important;
	height: auto !important;
	aspect-ratio: 716 / 1000 !important;
	overflow: visible !important;
}

/*
 * Backing.webp is designed to cover the square frame integrated into
 * Gallery-1.jpg. It is not stretched: width plus aspect-ratio determines
 * its height. Its bottom is aligned with the background frame's bottom.
 */
.ldg1__room [data-index="1"].ldg1__exhibit::before {
	content: "" !important;
	position: absolute !important;
	z-index: 0 !important;
	left: 50% !important;
	right: auto !important;
	top: auto !important;
	bottom: 0 !important;
	width: 132% !important;
	height: auto !important;
	aspect-ratio: 800 / 984 !important;
	transform: translateX(-50%) !important;
	background-color: transparent !important;
	background-image:
		linear-gradient(transparent, transparent) !important;
	background-position: center bottom !important;
	background-repeat: no-repeat !important;
	background-size: contain !important;
	opacity: 1 !important;
	filter: none !important;
	pointer-events: none !important;
}

/*
 * The Chill media frame remains above the backing and preserves its own
 * original ratio. It can now use more of the backing's inner opening.
 */
.ldg1__room [data-index="1"] .ldg1__artwork-shell--chill-frame {
	position: relative !important;
	z-index: 3 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: 716 / 1000 !important;
	overflow: visible !important;
	transform: none !important;
}

/* Never distort the transparent frame artwork. */
.ldg1__artwork-shell--chill-frame .ldg1__artwork {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: contain !important;
	object-position: 50% 100% !important;
	transform: none !important;
}

/*
 * Chill.jpg and Chill.mp4 share the exact same aperture inside the frame.
 * These percentages are tied to Chill-Frame.webp, not the background.
 */
.ldg1__artwork-shell--chill-frame .ldg1__inside-artwork,
.ldg1__artwork-shell--chill-frame .ldg1__video-slot {
	left: 16.40% !important;
	top: 13.80% !important;
	width: 67.20% !important;
	height: 73.00% !important;
	transform: none !important;
}

/* Keep all media layers behind the transparent frame skin. */
.ldg1__artwork-shell--chill-frame .ldg1__inside-artwork,
.ldg1__artwork-shell--chill-frame .ldg1__video-slot {
	z-index: 1 !important;
}

.ldg1__artwork-shell--chill-frame .ldg1__artwork {
	z-index: 3 !important;
}

/*
 * The play button is below both the Chill frame and Backing.webp;
 * it cannot sit inside the replacement wall backing.
 */
.ldg1__room [data-index="1"] .ldg1__play-trigger {
	position: absolute !important;
	z-index: 6 !important;
	bottom: -58px !important;
}

/* The backing is decorative only; no thin edge is added around it. */
.ldg1__room [data-index="1"].ldg1__exhibit::after {
	content: none !important;
}

@media (max-width: 991px) {
	.ldg1__room [data-index="1"].ldg1__exhibit {
		left: 42.35% !important;
		bottom: 39.20% !important;
		width: 15.30% !important;
		height: auto !important;
		aspect-ratio: 716 / 1000 !important;
	}

	.ldg1__room [data-index="1"].ldg1__exhibit::before {
		bottom: 0 !important;
		width: 132% !important;
		height: auto !important;
		aspect-ratio: 800 / 984 !important;
	}
}

@media (max-width: 767px) {
	.ldg1__room [data-index="1"].ldg1__exhibit {
		left: 42.35% !important;
		bottom: 39.20% !important;
		width: 15.30% !important;
		height: auto !important;
		aspect-ratio: 716 / 1000 !important;
	}

	.ldg1__room [data-index="1"].ldg1__exhibit::before {
		bottom: 0 !important;
		width: 132% !important;
		height: auto !important;
		aspect-ratio: 800 / 984 !important;
	}

	.ldg1__room [data-index="1"] .ldg1__play-trigger {
		bottom: -50px !important;
	}
}

/* =========================================================
   V34 — SINGLE-IMAGE BIO CHARACTER + GUARANTEED PANEL CONTROL
   Only one character image exists in the DOM. BIO fades out, its source
   changes to BIO-Push while invisible, then it fades back in. The reverse
   happens after the CRT panel closes.
   ========================================================= */

/* Real, high-layer click target covering the complete seated character. */
button.ldg1__bio-character-v34,
button.ldg1__bio-character-v34:hover,
button.ldg1__bio-character-v34:focus,
button.ldg1__bio-character-v34:focus-visible,
button.ldg1__bio-character-v34:active {
	z-index: 40 !important;
	display: block !important;
	width: 35.66svh !important;
	height: 42.5% !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	pointer-events: auto !important;
	cursor: pointer !important;
	touch-action: manipulation !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

/* Remove the old pseudo click layer; the button itself is now the hotspot. */
button.ldg1__bio-character-v34::after {
	content: none !important;
	pointer-events: none !important;
}

.ldg1__bio-character-v34 .ldg1__seated-character-visual {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	pointer-events: none !important;
}

.ldg1__bio-character-image-v34 {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: contain !important;
	object-position: 50% 100% !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	pointer-events: none !important;
	transition:
		opacity 720ms cubic-bezier(.22,.61,.36,1),
		filter 300ms ease !important;
}

/*
 * Neutralise all obsolete lead/push selectors from earlier versions.
 * Those elements no longer exist, so they cannot accidentally appear.
 */
.ldg1__seated-character-img--lead,
.ldg1__seated-character-img--push {
	display: none !important;
}

/* New BIO panel states are independent of the old controller. */
.ldg1__bio-layer {
	z-index: 1000060 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.ldg1.is-bio-v34-open .ldg1__bio-layer,
.ldg1.is-bio-v34-closing .ldg1__bio-layer {
	visibility: visible !important;
}

.ldg1.is-bio-v34-open .ldg1__bio-layer {
	pointer-events: auto !important;
}

.ldg1.is-bio-v34-closing .ldg1__bio-layer {
	pointer-events: none !important;
}

/* Panel stays completely below the page while BIO changes into BIO-Push. */
.ldg1__bio-panel {
	opacity: 0 !important;
	transform: translate3d(-50%, calc(100% + 180px), 0) !important;
	transition:
		transform 1050ms cubic-bezier(.14,.86,.22,1),
		opacity 600ms ease !important;
}

.ldg1.is-bio-v34-open .ldg1__bio-panel {
	opacity: 1 !important;
	transform: translate3d(-50%, 0, 0) !important;
}

.ldg1.is-bio-v34-closing .ldg1__bio-panel {
	opacity: 0 !important;
	transform: translate3d(-50%, calc(100% + 180px), 0) !important;
}

.ldg1__bio-backdrop {
	opacity: 0 !important;
	transition: opacity 760ms ease !important;
}

.ldg1.is-bio-v34-open .ldg1__bio-backdrop {
	opacity: 1 !important;
}

.ldg1.is-bio-v34-closing .ldg1__bio-backdrop {
	opacity: 0 !important;
}

/* Keep biography scrolling contained inside the CRT. */
.ldg1__bio-chassis {
	display: flex !important;
	flex-direction: column !important;
	max-height: calc(100svh - 36px) !important;
	overflow: hidden !important;
}

.ldg1__bio-screen {
	display: flex !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
	overflow: hidden !important;
}

.ldg1__bio-copy {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	height: auto !important;
	max-height: 100% !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	overscroll-behavior: contain !important;
	-webkit-overflow-scrolling: touch !important;
	touch-action: pan-y !important;
	pointer-events: auto !important;
}

@media (max-width: 767px) {
	button.ldg1__bio-character-v34,
	button.ldg1__bio-character-v34:hover,
	button.ldg1__bio-character-v34:focus,
	button.ldg1__bio-character-v34:focus-visible,
	button.ldg1__bio-character-v34:active {
		width: 35.66svh !important;
		height: 42.5% !important;
	}

	.ldg1__bio-panel,
	.ldg1.is-bio-v34-closing .ldg1__bio-panel {
		transform: translate3d(-50%, calc(100% + 130px), 0) !important;
	}

	.ldg1.is-bio-v34-open .ldg1__bio-panel {
		transform: translate3d(-50%, 0, 0) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1__bio-character-image-v34,
	.ldg1__bio-panel,
	.ldg1__bio-backdrop {
		transition-duration: 1ms !important;
	}
}

/* =========================================================
   V35 — NATIVE BIO TOGGLE, NO BLUE BUTTON, REAL LOVE FRAME 3
   The character uses a label + checkbox instead of a WordPress button.
   This removes the blue button skin and makes the interaction work without
   relying on the larger gallery JavaScript.
   ========================================================= */

/* Hidden native controller. */
.ldg1__bio-toggle-v35 {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Character hotspot — no button background or pseudo-elements. */
.ldg1__bio-character-v35,
.ldg1__bio-character-v35:hover,
.ldg1__bio-character-v35:focus,
.ldg1__bio-character-v35:focus-visible,
.ldg1__bio-character-v35:active {
	z-index: 40 !important;
	display: block !important;
	width: 35.66svh !important;
	height: 42.5% !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: 0;
	pointer-events: auto !important;
	cursor: pointer !important;
	touch-action: manipulation !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.ldg1__bio-character-v35::before,
.ldg1__bio-character-v35::after {
	content: none !important;
	display: none !important;
	background: none !important;
	box-shadow: none !important;
}

.ldg1__bio-character-v35:focus-visible {
	outline: 1px solid rgba(120, 255, 141, .70) !important;
	outline-offset: 7px;
}

.ldg1__bio-character-v35 .ldg1__seated-character-visual {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	background: transparent !important;
	border-radius: 0 !important;
	pointer-events: none !important;
}

/* Both assets occupy the exact same physical canvas. */
.ldg1__bio-character-image-v35 {
	position: absolute !important;
	inset: 0 !important;
	left: 0 !important;
	bottom: auto !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: contain !important;
	object-position: 50% 100% !important;
	transform: none !important;
	visibility: visible !important;
	pointer-events: none !important;
	-webkit-user-drag: none;
	transition:
		opacity 1100ms cubic-bezier(.22,.61,.36,1),
		filter 300ms ease !important;
}

/*
 * Resting state: exactly one character is visible.
 * These rules deliberately override the older V22 opacity safeguard.
 */
.ldg1__bio-toggle-v35:not(:checked) ~ .ldg1__viewport .ldg1__bio-lead-v35 {
	opacity: 1 !important;
	transition-delay: 1050ms, 0ms !important;
}

.ldg1__bio-toggle-v35:not(:checked) ~ .ldg1__viewport .ldg1__bio-push-v35 {
	opacity: 0 !important;
	transition-delay: 1050ms, 0ms !important;
}

/* Clicked state: BIO smoothly blends into BIO-Push in the same space. */
.ldg1__bio-toggle-v35:checked ~ .ldg1__viewport .ldg1__bio-lead-v35 {
	opacity: 0 !important;
	transition-delay: 0ms !important;
}

.ldg1__bio-toggle-v35:checked ~ .ldg1__viewport .ldg1__bio-push-v35 {
	opacity: 1 !important;
	transition-delay: 0ms !important;
}

/* Neutralise obsolete V34 single-image styling. */
.ldg1__bio-character-image-v34,
.ldg1__bio-character-v34 {
	display: none !important;
}


/* ---------------------------------------------------------
   Delayed retro CRT panel
   --------------------------------------------------------- */

.ldg1__bio-layer-v35 {
	z-index: 1000080 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Mount immediately, but keep the panel below the page during the blend. */
.ldg1__bio-toggle-v35:checked ~ .ldg1__bio-layer-v35 {
	visibility: visible !important;
	pointer-events: auto !important;
}

.ldg1__bio-layer-v35 .ldg1__bio-panel {
	opacity: 0 !important;
	transform: translate3d(-50%, calc(100% + 180px), 0) !important;
	transition:
		transform 1050ms cubic-bezier(.14,.86,.22,1),
		opacity 600ms ease !important;
	transition-delay: 0ms !important;
}

/*
 * Wait 2.25 seconds: BIO has time to blend into BIO-Push and remain visible
 * briefly before the terminal starts rising.
 */
.ldg1__bio-toggle-v35:checked ~ .ldg1__bio-layer-v35 .ldg1__bio-panel {
	opacity: 1 !important;
	transform: translate3d(-50%, 0, 0) !important;
	transition-delay: 2250ms, 2250ms !important;
}

.ldg1__bio-layer-v35 .ldg1__bio-backdrop {
	display: block !important;
	opacity: 0 !important;
	background:
		radial-gradient(circle at 50% 78%, rgba(57, 122, 67, .12), transparent 34%),
		rgba(0, 0, 0, .54) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: default;
	pointer-events: auto !important;
	transition: opacity 760ms ease !important;
	transition-delay: 0ms !important;
}

.ldg1__bio-toggle-v35:checked ~ .ldg1__bio-layer-v35 .ldg1__bio-backdrop {
	opacity: 1 !important;
	transition-delay: 2150ms !important;
}

/* Closing is immediate: panel slides down, then character fades back. */
.ldg1__bio-toggle-v35:not(:checked) ~ .ldg1__bio-layer-v35 .ldg1__bio-panel,
.ldg1__bio-toggle-v35:not(:checked) ~ .ldg1__bio-layer-v35 .ldg1__bio-backdrop {
	transition-delay: 0ms !important;
}

/* Ensure the supplied full biography scrolls within the CRT. */
.ldg1__bio-layer-v35 .ldg1__bio-chassis {
	display: flex !important;
	flex-direction: column !important;
	max-height: calc(100svh - 36px) !important;
	overflow: hidden !important;
}

.ldg1__bio-layer-v35 .ldg1__bio-header {
	flex: 0 0 auto !important;
}

.ldg1__bio-layer-v35 .ldg1__bio-screen {
	display: flex !important;
	flex: 1 1 auto !important;
	height: min(58svh, 530px) !important;
	min-height: 0 !important;
	max-height: min(58svh, 530px) !important;
	overflow: hidden !important;
}

.ldg1__bio-layer-v35 .ldg1__bio-copy {
	position: relative !important;
	z-index: 4 !important;
	flex: 1 1 auto !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: 100% !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	overscroll-behavior: contain !important;
	-webkit-overflow-scrolling: touch !important;
	touch-action: pan-y !important;
	pointer-events: auto !important;
	scrollbar-gutter: stable;
	padding-bottom: 48px !important;
}

/* Close labels retain the existing CRT styling and are clickable. */
.ldg1__bio-layer-v35 .ldg1__bio-close {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer !important;
	pointer-events: auto !important;
}

/* Frame 3 Real Love uses the Heavy Gold frame opening. */
.ldg1__artwork-shell--heavy-gold .ldg1__inside-artwork,
.ldg1__artwork-shell--heavy-gold .ldg1__video-slot {
	left: 14.7% !important;
	top: 14.6% !important;
	width: 70.6% !important;
	height: 70.8% !important;
	object-fit: cover !important;
	object-position: center !important;
	transform: none !important;
}

@media (max-width: 767px) {
	.ldg1__bio-character-v35,
	.ldg1__bio-character-v35:hover,
	.ldg1__bio-character-v35:focus,
	.ldg1__bio-character-v35:focus-visible,
	.ldg1__bio-character-v35:active {
		width: 35.66svh !important;
		height: 42.5% !important;
	}

	.ldg1__bio-layer-v35 .ldg1__bio-panel {
		transform: translate3d(-50%, calc(100% + 130px), 0) !important;
	}

	.ldg1__bio-toggle-v35:checked ~ .ldg1__bio-layer-v35 .ldg1__bio-panel {
		transform: translate3d(-50%, 0, 0) !important;
	}

	.ldg1__bio-layer-v35 .ldg1__bio-screen {
		height: min(64svh, 560px) !important;
		max-height: min(64svh, 560px) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1__bio-character-image-v35,
	.ldg1__bio-layer-v35 .ldg1__bio-panel,
	.ldg1__bio-layer-v35 .ldg1__bio-backdrop {
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
	}
}

/* =========================================================
   V43 — SEAM-FREE CHARACTER + ASSET-READY REVEAL

   One clean WebP is drawn for each pose. The duplicated filtered image clones
   used for the rim lighting have been removed because Chromium/Edge could
   rasterise the transparent WebP in two tiles and expose a line down its centre.
   The warm rear light is now made with silhouette-following drop shadows and a
   soft halo behind the figure. The whole unit remains hidden until the default
   figure and reflection have loaded and decoded, so no temporary blurred blob
   can appear while the remote character files are still arriving.
   ========================================================= */

/* Covers both repeated-room joins without moving with parallax. */
.ldg1__gallery-join-seam-concealer {
	position: absolute;
	z-index: 14;
	top: 0;
	bottom: 0;
	display: block;
	width: clamp(8px, .72vw, 15px);
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(9, 5, 2, .48) 22%,
		rgba(8, 4, 1, .88) 50%,
		rgba(9, 5, 2, .48) 78%,
		transparent 100%
	);
	filter: blur(3px);
	opacity: .78;
	transform: translateX(-50%);
	pointer-events: none;
	user-select: none;
}

.ldg1__gallery-join-seam-concealer--one {
	left: calc(var(--ldg1-room-width) - var(--ldg1-seam-half));
}

.ldg1__gallery-join-seam-concealer--two {
	left: calc(
		var(--ldg1-room-width) + var(--ldg1-room-width)
		- var(--ldg1-seam-blend) - var(--ldg1-seam-half)
	);
}

.ldg1__gallery-join-seam-concealer--three {
	left: calc(
		var(--ldg1-room-width) + var(--ldg1-room-width) + var(--ldg1-room-width)
		- var(--ldg1-seam-blend) - var(--ldg1-seam-blend) - var(--ldg1-seam-half)
	);
}

.ldg1__gallery-join-character {
	position: absolute;
	z-index: 15;
	left: calc(var(--ldg1-room-width) - clamp(17px, 1.8vw, 34px));
	bottom: 18%;
	display: block;
	width: 28.48vh;
	width: 28.48svh;
	height: 52%;
	margin: 0;
	padding: 0;
	overflow: visible;
	pointer-events: none;
	user-select: none;
	isolation: isolate;
	opacity: 0;
	visibility: hidden;
	transform:
		translate3d(
			calc(-50% + var(--ldg1-join-shift, 0px)),
			0,
			0
		);
	transform-origin: 50% 100%;
	filter: none;
	transition:
		opacity 190ms cubic-bezier(.22,.61,.36,1),
		filter 1750ms cubic-bezier(.20,.62,.24,1);
	backface-visibility: visible;
	-webkit-backface-visibility: visible;
	will-change: transform;
}

/* Nothing—halo, shadow, figure or reflection—is painted before the main assets are ready. */
.ldg1__gallery-join-character.is-default-ready {
	opacity: 1;
	visibility: visible;
}

.ldg1__gallery-join-figure {
	position: absolute;
	z-index: 3;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Warm light spill from the two real vertical bars, behind rather than over the person. */
.ldg1__gallery-join-figure::before {
	position: absolute;
	z-index: 1;
	inset: 3% -16% -1%;
	content: "";
	background:
		radial-gradient(
			ellipse at 50% 54%,
			rgba(255, 188, 79, .25) 0%,
			rgba(255, 149, 31, .14) 34%,
			rgba(255, 126, 15, .05) 55%,
			transparent 75%
		),
		linear-gradient(
			90deg,
			rgba(255, 164, 38, .16) 0%,
			transparent 21%,
			transparent 79%,
			rgba(255, 164, 38, .16) 100%
		);
	filter: blur(13px);
	mix-blend-mode: screen;
	opacity: .90;
	transform: scale(.96, .98);
	transform-origin: 50% 56%;
	pointer-events: none;
}

.ldg1__gallery-join-pose {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
	backface-visibility: visible;
	-webkit-backface-visibility: visible;
	/* One filter operation over one complete image prevents the old tiled centre seam. */
	filter:
		brightness(.80)
		contrast(1.10)
		saturate(.92)
		sepia(.10)
		drop-shadow(0 12px 12px rgba(0, 0, 0, .52))
		drop-shadow(-5px 0 7px rgba(255, 157, 30, .28))
		drop-shadow(5px 0 7px rgba(255, 157, 30, .28))
		drop-shadow(0 0 10px rgba(255, 178, 55, .12));
}

/* Fade-through timing: the outgoing pose clears before the incoming pose begins. */
.ldg1__gallery-join-pose--default {
	opacity: 1;
	transition: opacity 95ms cubic-bezier(.55,.06,.68,.19) 0ms;
}

.ldg1__gallery-join-pose--guide {
	z-index: 3;
	opacity: 0;
	transition: opacity 105ms cubic-bezier(.22,.61,.36,1) 105ms;
}

.ldg1__gallery-join-character.is-guide-pose.is-guide-ready .ldg1__gallery-join-pose--default {
	opacity: 0;
	transition-delay: 0ms;
}

.ldg1__gallery-join-character.is-guide-pose.is-guide-ready .ldg1__gallery-join-pose--guide {
	opacity: 1;
	transition-delay: 105ms;
}

/* On the return, the guide clears before the default pose fades back in. */
.ldg1__gallery-join-character:not(.is-guide-pose) .ldg1__gallery-join-pose--default {
	transition: opacity 105ms cubic-bezier(.22,.61,.36,1) 105ms;
}

.ldg1__gallery-join-character:not(.is-guide-pose) .ldg1__gallery-join-pose--guide {
	transition: opacity 95ms cubic-bezier(.55,.06,.68,.19) 0ms;
}

.ldg1__gallery-join-character-img {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	object-fit: contain;
	object-position: 50% 100%;
	filter: none !important;
	transform: none !important;
	backface-visibility: visible !important;
	-webkit-backface-visibility: visible !important;
	image-rendering: auto;
	pointer-events: none;
	-webkit-user-drag: none;
}

.ldg1__gallery-join-contact-shadow {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: -.15%;
	display: block;
	width: 46%;
	height: 3.4%;
	background: radial-gradient(
		ellipse at center,
		rgba(0, 0, 0, .78) 0%,
		rgba(0, 0, 0, .43) 46%,
		transparent 77%
	);
	filter: blur(2.6px);
	transform: translateX(-50%);
	pointer-events: none;
}

.ldg1__gallery-join-reflection {
	position: absolute;
	z-index: 1;
	left: -3%;
	top: calc(100% - 1px);
	display: block;
	width: 106%;
	height: 38%;
	overflow: hidden;
	pointer-events: none;
	opacity: .72;
	transform: perspective(560px) rotateX(3deg) scaleX(.94);
	transform-origin: 50% 0;
	-webkit-mask-image: linear-gradient(
		to bottom,
		rgba(0, 0, 0, .94) 0%,
		rgba(0, 0, 0, .73) 38%,
		rgba(0, 0, 0, .34) 72%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		rgba(0, 0, 0, .94) 0%,
		rgba(0, 0, 0, .73) 38%,
		rgba(0, 0, 0, .34) 72%,
		transparent 100%
	);
}

.ldg1__gallery-join-reflection-pose {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
	backface-visibility: visible;
	-webkit-backface-visibility: visible;
	filter:
		brightness(.56)
		contrast(1.12)
		saturate(.74)
		sepia(.26)
		blur(.58px)
		drop-shadow(0 0 5px rgba(255, 160, 37, .14));
}

.ldg1__gallery-join-reflection-pose--default {
	opacity: 1;
	transition: opacity 95ms cubic-bezier(.55,.06,.68,.19) 0ms;
}

.ldg1__gallery-join-reflection-pose--guide {
	opacity: 0;
	transition: opacity 105ms cubic-bezier(.22,.61,.36,1) 105ms;
}

.ldg1__gallery-join-character.is-guide-pose.is-guide-ready .ldg1__gallery-join-reflection-pose--default {
	opacity: 0;
	transition-delay: 0ms;
}

.ldg1__gallery-join-character.is-guide-pose.is-guide-ready .ldg1__gallery-join-reflection-pose--guide {
	opacity: 1;
	transition-delay: 105ms;
}

.ldg1__gallery-join-character:not(.is-guide-pose) .ldg1__gallery-join-reflection-pose--default {
	transition: opacity 105ms cubic-bezier(.22,.61,.36,1) 105ms;
}

.ldg1__gallery-join-character:not(.is-guide-pose) .ldg1__gallery-join-reflection-pose--guide {
	transition: opacity 95ms cubic-bezier(.55,.06,.68,.19) 0ms;
}

.ldg1__gallery-join-reflection-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	object-fit: fill;
	object-position: 50% 50%;
	opacity: .90;
	mix-blend-mode: normal !important;
	filter: none !important;
	transform: scaleY(-1);
	transform-origin: 50% 50%;
	backface-visibility: visible !important;
	-webkit-backface-visibility: visible !important;
	image-rendering: auto;
	pointer-events: none;
	-webkit-user-drag: none;
}

/* Existing camera-depth treatment is only allowed after the default figure is ready. */
.ldg1.is-walking-to-artwork .ldg1__gallery-join-character.is-default-ready,
.ldg1.is-artwork-focused .ldg1__gallery-join-character.is-default-ready {
	filter: blur(4.7px) brightness(.84) saturate(.92);
}

.ldg1.is-returning-from-artwork .ldg1__gallery-join-character.is-default-ready {
	filter: none;
	transition-duration: 1650ms;
}

@supports (height: 100dvh) {
	.ldg1__gallery-join-character {
		width: 28.48dvh;
	}
}

@media (max-width: 767px) and (orientation: portrait) {
	.ldg1.is-walking-to-artwork .ldg1__gallery-join-character.is-default-ready,
	.ldg1.is-artwork-focused .ldg1__gallery-join-character.is-default-ready {
		filter: blur(3.8px) brightness(.86) saturate(.93);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1__gallery-join-character,
	.ldg1__gallery-join-pose,
	.ldg1__gallery-join-reflection-pose {
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
	}
}

/* =========================================================
   V43 — SILHOUETTE-ONLY BIO CHARACTER CLICK TARGET
   The BIO artwork sits inside a rectangular transparent image canvas.
   The old label made that entire rectangle clickable and intercepted
   Frame 1. The label now ignores pointer input; only this closely
   traced transparent hotspot accepts clicks. Areas around the visible
   character pass directly through to the gallery beneath it.
   ========================================================= */

.ldg1__bio-character-v35,
.ldg1__bio-character-v35:hover,
.ldg1__bio-character-v35:focus,
.ldg1__bio-character-v35:focus-visible,
.ldg1__bio-character-v35:active {
	pointer-events: none !important;
	cursor: default !important;
}

.ldg1__bio-character-hit-v43 {
	position: absolute;
	z-index: 20;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	pointer-events: auto;
	cursor: pointer;
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	clip-path: polygon(
		51.00% 1.26%,
		49.00% 2.24%,
		24.50% 28.11%,
		24.67% 29.51%,
		36.33% 30.63%,
		33.17% 34.55%,
		22.33% 38.46%,
		18.33% 41.12%,
		12.67% 54.13%,
		4.67% 65.45%,
		5.50% 72.03%,
		2.17% 74.41%,
		0.50% 78.18%,
		0.50% 82.94%,
		5.50% 88.11%,
		7.50% 88.67%,
		10.67% 91.61%,
		16.00% 94.55%,
		28.67% 98.74%,
		64.17% 99.16%,
		71.33% 98.32%,
		80.83% 94.69%,
		92.33% 88.67%,
		96.83% 85.03%,
		98.50% 82.52%,
		98.50% 79.16%,
		96.83% 75.10%,
		92.17% 72.31%,
		92.50% 64.76%,
		89.83% 62.38%,
		85.00% 55.24%,
		78.17% 42.10%,
		73.50% 38.32%,
		63.67% 35.24%,
		60.50% 31.05%,
		71.17% 30.49%,
		71.17% 29.65%,
		56.50% 7.97%
	);
	-webkit-clip-path: polygon(
		51.00% 1.26%,
		49.00% 2.24%,
		24.50% 28.11%,
		24.67% 29.51%,
		36.33% 30.63%,
		33.17% 34.55%,
		22.33% 38.46%,
		18.33% 41.12%,
		12.67% 54.13%,
		4.67% 65.45%,
		5.50% 72.03%,
		2.17% 74.41%,
		0.50% 78.18%,
		0.50% 82.94%,
		5.50% 88.11%,
		7.50% 88.67%,
		10.67% 91.61%,
		16.00% 94.55%,
		28.67% 98.74%,
		64.17% 99.16%,
		71.33% 98.32%,
		80.83% 94.69%,
		92.33% 88.67%,
		96.83% 85.03%,
		98.50% 82.52%,
		98.50% 79.16%,
		96.83% 75.10%,
		92.17% 72.31%,
		92.50% 64.76%,
		89.83% 62.38%,
		85.00% 55.24%,
		78.17% 42.10%,
		73.50% 38.32%,
		63.67% 35.24%,
		60.50% 31.05%,
		71.17% 30.49%,
		71.17% 29.65%,
		56.50% 7.97%
	);
}

/* Keyboard users still receive a clear character-shaped focus cue. */
.ldg1__bio-character-v35:focus-visible {
	outline: 0 !important;
}

.ldg1__bio-character-v35:focus-visible .ldg1__bio-character-image-v35 {
	filter:
		brightness(1.06)
		saturate(1.05)
		drop-shadow(0 0 9px rgba(120, 255, 141, .34)) !important;
}


/* =========================================================
   V47 — BIO TERMINAL HANDS SCOPED TO BIO PANEL ONLY
   The BIO terminal should feel as though the viewer is holding it.
   Two supplied transparent WebPs are mounted as non-interactive
   overlays, slightly wrapping over the left and right chassis edges.
   Their lower portions intentionally fall below the bottom of the
   viewport while the terminal rises from the page edge.
   ========================================================= */

.ldg1__bio-layer-v35 .ldg1__bio-panel {
	overflow: visible !important;
}

/*
 * Hard scope: the hand overlay can only exist as a direct child of the BIO
 * panel. Even if matching markup were accidentally added elsewhere, these
 * rules would not display or position it.
 */
.ldg1__bio-layer-v35 .ldg1__bio-panel > .ldg1__bio-hands {
	position: absolute;
	z-index: 6;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0;
	pointer-events: none !important;
	user-select: none;
	-webkit-user-select: none;
}

.ldg1__bio-layer-v35 .ldg1__bio-panel > .ldg1__bio-hands .ldg1__bio-hand {
	position: absolute;
	display: block;
	width: clamp(210px, 21.8vw, 338px);
	height: auto;
	max-width: 48%;
	margin: 0;
	padding: 0;
	pointer-events: none !important;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	filter:
		drop-shadow(0 18px 30px rgba(0, 0, 0, .50))
		drop-shadow(0 4px 12px rgba(255, 170, 66, .08));
	transform-origin: 50% 100%;
}

.ldg1__bio-layer-v35 .ldg1__bio-panel > .ldg1__bio-hands .ldg1__bio-hand--left {
	left: clamp(-118px, -8.8vw, -64px);
	bottom: calc(-1 * clamp(78px, 6.6vw, 108px));
	transform: rotate(-2.6deg);
}

.ldg1__bio-layer-v35 .ldg1__bio-panel > .ldg1__bio-hands .ldg1__bio-hand--right {
	right: clamp(-122px, -9.1vw, -66px);
	bottom: calc(-1 * clamp(78px, 6.6vw, 108px));
	transform: rotate(2.6deg);
}

/* The soundtrack album-information card must never display BIO hands. */
.ldg1 .ld-audio-album-card .ldg1__bio-hands {
	display: none !important;
}

@media (max-width: 1100px) {
	.ldg1__bio-layer-v35 .ldg1__bio-panel > .ldg1__bio-hands .ldg1__bio-hand {
		width: clamp(194px, 24vw, 286px);
		max-width: 49%;
	}

	.ldg1__bio-layer-v35 .ldg1__bio-panel > .ldg1__bio-hands .ldg1__bio-hand--left {
		left: clamp(-102px, -10vw, -48px);
		bottom: calc(-1 * clamp(70px, 7.4vw, 98px));
	}

	.ldg1__bio-layer-v35 .ldg1__bio-panel > .ldg1__bio-hands .ldg1__bio-hand--right {
		right: clamp(-106px, -10.4vw, -50px);
		bottom: calc(-1 * clamp(70px, 7.4vw, 98px));
	}
}

@media (max-width: 767px) {
	.ldg1__bio-layer-v35 .ldg1__bio-panel > .ldg1__bio-hands .ldg1__bio-hand {
		width: clamp(168px, 29vw, 220px);
		max-width: 50%;
		filter:
			drop-shadow(0 14px 24px rgba(0, 0, 0, .48))
			drop-shadow(0 3px 10px rgba(255, 170, 66, .08));
	}

	.ldg1__bio-layer-v35 .ldg1__bio-panel > .ldg1__bio-hands .ldg1__bio-hand--left {
		left: clamp(-84px, -9.8vw, -36px);
		bottom: calc(-1 * clamp(58px, 8.2vw, 84px));
		transform: rotate(-2deg);
	}

	.ldg1__bio-layer-v35 .ldg1__bio-panel > .ldg1__bio-hands .ldg1__bio-hand--right {
		right: clamp(-88px, -10.2vw, -38px);
		bottom: calc(-1 * clamp(58px, 8.2vw, 84px));
		transform: rotate(2deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1__bio-layer-v35 .ldg1__bio-panel > .ldg1__bio-hands .ldg1__bio-hand {
		transform: none !important;
	}
}

/* =========================================================
   V48 — NARROWER BIO SCREEN + CLEAR HAND / TEXT SEPARATION
   The hands should sit on the frame edges and never intrude into the
   readable green text area. The visible BIO screen is narrowed and
   the hands are pushed farther outward across desktop, tablet and mobile.
   ========================================================= */

.ldg1__bio-layer-v35 .ldg1__bio-panel {
	width: min(640px, calc(100vw - 24px)) !important;
	max-width: 92vw !important;
}

.ldg1__bio-layer-v35 .ldg1__bio-chassis {
	padding-left: 10px !important;
	padding-right: 10px !important;
}

.ldg1__bio-layer-v35 .ldg1__bio-screen {
	width: calc(100% - 134px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.ldg1__bio-layer-v35 .ldg1__bio-copy {
	padding-left: clamp(18px, 3.4vw, 30px) !important;
	padding-right: clamp(18px, 3.4vw, 30px) !important;
}

.ldg1__bio-layer-v35 .ldg1__bio-panel > .ldg1__bio-hands .ldg1__bio-hand {
	width: clamp(206px, 21.2vw, 328px) !important;
	max-width: 46% !important;
}

.ldg1__bio-layer-v35 .ldg1__bio-panel > .ldg1__bio-hands .ldg1__bio-hand--left {
	left: clamp(-174px, -13.2vw, -118px) !important;
	bottom: calc(-1 * clamp(82px, 6.9vw, 112px)) !important;
	transform: rotate(-2.6deg);
}

.ldg1__bio-layer-v35 .ldg1__bio-panel > .ldg1__bio-hands .ldg1__bio-hand--right {
	right: clamp(-178px, -13.5vw, -120px) !important;
	bottom: calc(-1 * clamp(82px, 6.9vw, 112px)) !important;
	transform: rotate(2.6deg);
}

@media (max-width: 1100px) {
	.ldg1__bio-layer-v35 .ldg1__bio-panel {
		width: min(590px, calc(100vw - 18px)) !important;
		max-width: 94vw !important;
	}

	.ldg1__bio-layer-v35 .ldg1__bio-screen {
		width: calc(100% - 118px) !important;
	}

	.ldg1__bio-layer-v35 .ldg1__bio-panel > .ldg1__bio-hands .ldg1__bio-hand {
		width: clamp(188px, 23vw, 278px) !important;
		max-width: 47% !important;
	}

	.ldg1__bio-layer-v35 .ldg1__bio-panel > .ldg1__bio-hands .ldg1__bio-hand--left {
		left: clamp(-152px, -14.2vw, -94px) !important;
		bottom: calc(-1 * clamp(72px, 7.5vw, 98px)) !important;
	}

	.ldg1__bio-layer-v35 .ldg1__bio-panel > .ldg1__bio-hands .ldg1__bio-hand--right {
		right: clamp(-156px, -14.6vw, -96px) !important;
		bottom: calc(-1 * clamp(72px, 7.5vw, 98px)) !important;
	}
}

@media (max-width: 767px) {
	.ldg1__bio-layer-v35 .ldg1__bio-panel {
		width: min(520px, calc(100vw - 12px)) !important;
		max-width: calc(100vw - 12px) !important;
	}

	.ldg1__bio-layer-v35 .ldg1__bio-screen {
		width: calc(100% - 92px) !important;
	}

	.ldg1__bio-layer-v35 .ldg1__bio-copy {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	.ldg1__bio-layer-v35 .ldg1__bio-panel > .ldg1__bio-hands .ldg1__bio-hand {
		width: clamp(156px, 27vw, 210px) !important;
		max-width: 48% !important;
		filter:
			drop-shadow(0 14px 24px rgba(0, 0, 0, .48))
			drop-shadow(0 3px 10px rgba(255, 170, 66, .08)) !important;
	}

	.ldg1__bio-layer-v35 .ldg1__bio-panel > .ldg1__bio-hands .ldg1__bio-hand--left {
		left: clamp(-122px, -13vw, -72px) !important;
		bottom: calc(-1 * clamp(60px, 8.4vw, 84px)) !important;
		transform: rotate(-2deg);
	}

	.ldg1__bio-layer-v35 .ldg1__bio-panel > .ldg1__bio-hands .ldg1__bio-hand--right {
		right: clamp(-126px, -13.5vw, -74px) !important;
		bottom: calc(-1 * clamp(60px, 8.4vw, 84px)) !important;
		transform: rotate(2deg);
	}
}

/* =========================================================
   V49 — TWO-SECOND BIO CLOSE + OLD GREEN CRT SHUTDOWN
   The unchecked native toggle previously hid the whole layer instantly.
   JavaScript now adds is-bio-v49-closing before the browser repaints,
   keeping the complete pad and hands mounted for a full two-second slide.
   ========================================================= */

.ldg1.is-bio-v49-closing .ldg1__bio-layer-v35 {
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: none !important;
}

.ldg1.is-bio-v49-closing .ldg1__bio-layer-v35 .ldg1__bio-panel {
	opacity: 0 !important;
	transform: translate3d(-50%, calc(100% + 280px), 0) !important;
	transition:
		transform 2000ms cubic-bezier(.22,.61,.36,1),
		opacity 360ms ease 1640ms !important;
	transition-delay: 0ms !important;
}

.ldg1.is-bio-v49-closing .ldg1__bio-layer-v35 .ldg1__bio-backdrop {
	opacity: 0 !important;
	transition: opacity 900ms ease !important;
	transition-delay: 0ms !important;
}

/* Keep BIO-Push visible until the pad has completely left the screen. */
.ldg1.is-bio-v49-closing .ldg1__bio-lead-v35 {
	opacity: 0 !important;
	transition-delay: 0ms !important;
}

.ldg1.is-bio-v49-closing .ldg1__bio-push-v35 {
	opacity: 1 !important;
	transition-delay: 0ms !important;
}

/* Once the two-second slide is complete, restore the resting BIO pose. */
.ldg1.is-bio-v49-restoring .ldg1__bio-lead-v35 {
	opacity: 1 !important;
	transition-delay: 0ms !important;
}

.ldg1.is-bio-v49-restoring .ldg1__bio-push-v35 {
	opacity: 0 !important;
	transition-delay: 0ms !important;
}

.ldg1__bio-screen.is-crt-shutting-down-v49 {
	transform-origin: 50% 50%;
	animation: ldg1-bio-crt-shutdown-v49 820ms steps(1, end) forwards !important;
	will-change: opacity, transform, filter;
}

.ldg1__bio-screen.is-crt-shutting-down-v49::after {
	position: absolute;
	z-index: 8;
	left: 6%;
	right: 6%;
	top: 50%;
	height: 2px;
	content: "";
	background: rgba(175, 255, 187, .96);
	box-shadow:
		0 0 5px rgba(126, 255, 145, .94),
		0 0 16px rgba(126, 255, 145, .72),
		0 0 34px rgba(126, 255, 145, .34);
	opacity: 0;
	pointer-events: none;
	animation: ldg1-bio-crt-line-v49 820ms linear forwards;
}

@keyframes ldg1-bio-crt-shutdown-v49 {
	0% {
		opacity: 1;
		transform: scaleY(1);
		filter: brightness(1) contrast(1);
	}
	8% {
		opacity: .28;
		filter: brightness(2.5) contrast(1.35);
	}
	13% {
		opacity: 1;
		filter: brightness(1.2) contrast(1.08);
	}
	21% {
		opacity: .12;
		filter: brightness(2.8) contrast(1.45);
	}
	27% {
		opacity: .92;
		filter: brightness(.88) contrast(1.18);
	}
	36% {
		opacity: .24;
		filter: brightness(2.2) contrast(1.4);
	}
	44% {
		opacity: 1;
		transform: scaleY(1);
		filter: brightness(1.25) contrast(1.15);
	}
	55% {
		opacity: .18;
		filter: brightness(3) contrast(1.55);
	}
	63% {
		opacity: .92;
		transform: scaleY(1);
		filter: brightness(1.35) contrast(1.25);
	}
	72% {
		opacity: 1;
		transform: scaleY(.075);
		filter: brightness(3.2) contrast(1.6) saturate(.45);
	}
	84% {
		opacity: .86;
		transform: scaleY(.012);
		filter: brightness(4) contrast(1.8) saturate(.2);
	}
	100% {
		opacity: 0;
		transform: scaleY(.002);
		filter: brightness(0) contrast(2) saturate(0);
	}
}

@keyframes ldg1-bio-crt-line-v49 {
	0%, 58% {
		opacity: 0;
		transform: scaleX(.25);
	}
	70% {
		opacity: 1;
		transform: scaleX(1);
	}
	84% {
		opacity: .82;
		transform: scaleX(.48);
	}
	100% {
		opacity: 0;
		transform: scaleX(.04);
	}
}

/* =========================================================
   V49 — INDEPENDENT, SUBTLE HAND MOVEMENT
   The movement is deliberately small so the hands remain gripping the
   same edges. Different timings prevent them moving as a mirrored pair.
   ========================================================= */

.ldg1__bio-layer-v35 .ldg1__bio-panel > .ldg1__bio-hands .ldg1__bio-hand--left {
	animation: ldg1-bio-hand-left-v49 5.2s ease-in-out -1.1s infinite;
}

.ldg1__bio-layer-v35 .ldg1__bio-panel > .ldg1__bio-hands .ldg1__bio-hand--right {
	animation: ldg1-bio-hand-right-v49 6.1s ease-in-out -3.4s infinite;
}

@keyframes ldg1-bio-hand-left-v49 {
	0%, 100% {
		transform: translate3d(0, 0, 0) rotate(-2.6deg);
	}
	28% {
		transform: translate3d(0, -5px, 0) rotate(-2.25deg);
	}
	61% {
		transform: translate3d(0, 2px, 0) rotate(-2.8deg);
	}
	82% {
		transform: translate3d(0, -2px, 0) rotate(-2.5deg);
	}
}

@keyframes ldg1-bio-hand-right-v49 {
	0%, 100% {
		transform: translate3d(0, 1px, 0) rotate(2.6deg);
	}
	34% {
		transform: translate3d(0, -4px, 0) rotate(2.9deg);
	}
	67% {
		transform: translate3d(0, 3px, 0) rotate(2.3deg);
	}
	86% {
		transform: translate3d(0, -1px, 0) rotate(2.7deg);
	}
}

@media (max-width: 767px) {
	@keyframes ldg1-bio-hand-left-v49 {
		0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
		28% { transform: translate3d(0, -4px, 0) rotate(-1.7deg); }
		61% { transform: translate3d(0, 2px, 0) rotate(-2.2deg); }
		82% { transform: translate3d(0, -1px, 0) rotate(-1.9deg); }
	}

	@keyframes ldg1-bio-hand-right-v49 {
		0%, 100% { transform: translate3d(0, 1px, 0) rotate(2deg); }
		34% { transform: translate3d(0, -3px, 0) rotate(2.25deg); }
		67% { transform: translate3d(0, 2px, 0) rotate(1.8deg); }
		86% { transform: translate3d(0, -1px, 0) rotate(2.1deg); }
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1.is-bio-v49-closing .ldg1__bio-layer-v35 .ldg1__bio-panel {
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
	}

	.ldg1__bio-screen.is-crt-shutting-down-v49,
	.ldg1__bio-screen.is-crt-shutting-down-v49::after,
	.ldg1__bio-layer-v35 .ldg1__bio-panel > .ldg1__bio-hands .ldg1__bio-hand {
		animation: none !important;
	}
}

/* =========================================================
   V50 — FAR-RIGHT TV HEAD CHARACTER + ANIMATED SMILE SCREENS
   Added between the plants and the final frame on the far-right wall.
   The figure is non-interactive, lit by the gallery, and reflected on
   the polished floor. Four smile screens loop on the TV face, each held
   for four seconds before fading to the next.
   ========================================================= */

.ldg1__tv-head-character {
	position: absolute;
	z-index: 18;
	left: 67.55%;
	bottom: 17.4%;
	display: block;
	width: 19.8vh;
	width: 19.8svh;
	height: 39.5%;
	margin: 0;
	padding: 0;
	overflow: visible;
	pointer-events: none;
	user-select: none;
	isolation: isolate;
	transform: translateX(-50%);
	transform-origin: 50% 100%;
	backface-visibility: visible;
	-webkit-backface-visibility: visible;
	will-change: transform;
}

@supports (height: 100dvh) {
	.ldg1__tv-head-character {
		width: 19.8dvh;
	}
}

.ldg1__tv-head-figure,
.ldg1__tv-head-reflection-figure {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.ldg1__tv-head-figure::before {
	position: absolute;
	z-index: 1;
	inset: 1% -10% 0;
	content: "";
	background:
		radial-gradient(ellipse at 50% 46%, rgba(255, 188, 79, .23) 0%, rgba(255, 149, 31, .12) 36%, rgba(255, 126, 15, .04) 58%, transparent 78%),
		linear-gradient(90deg, rgba(255, 164, 38, .11) 0%, transparent 18%, transparent 82%, rgba(255, 164, 38, .11) 100%);
	filter: blur(10px);
	mix-blend-mode: screen;
	opacity: .88;
	pointer-events: none;
}

.ldg1__tv-head-character-img,
.ldg1__tv-head-reflection-img {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	object-fit: contain;
	object-position: 50% 100%;
	pointer-events: none;
	-webkit-user-drag: none;
	backface-visibility: visible !important;
	-webkit-backface-visibility: visible !important;
}

.ldg1__tv-head-character-img {
	filter:
		brightness(.88)
		contrast(1.06)
		saturate(.94)
		sepia(.06)
		drop-shadow(0 12px 12px rgba(0, 0, 0, .52))
		drop-shadow(-4px 0 6px rgba(255, 157, 30, .20))
		drop-shadow(4px 0 6px rgba(255, 157, 30, .20));
}

.ldg1__tv-head-screen {
	position: absolute;
	z-index: 3;
	left: 34.2%;
	top: 10.6%;
	width: 30.8%;
	height: 15.1%;
	overflow: hidden;
	border-radius: 8% / 10%;
	background: rgba(1, 9, 9, .42);
	box-shadow:
		0 0 8px rgba(94, 255, 197, .16),
		inset 0 0 6px rgba(117, 255, 214, .10);
	pointer-events: none;
}

.ldg1__tv-head-screen::before {
	position: absolute;
	z-index: 4;
	inset: 0;
	content: "";
	background:
		linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 26%, rgba(0,0,0,0) 74%, rgba(0,0,0,.10) 100%),
		repeating-linear-gradient(180deg, rgba(0, 0, 0, .10) 0px, rgba(0, 0, 0, .10) 1px, transparent 1px, transparent 3px);
	mix-blend-mode: screen;
	opacity: .42;
	pointer-events: none;
}

.ldg1__tv-head-screen--reflection {
	left: 34.2%;
	top: 10.6%;
	width: 30.8%;
	height: 15.1%;
	transform: scaleY(-1);
	transform-origin: 50% 50%;
	box-shadow: none;
	opacity: .74;
}

.ldg1__tv-head-screen-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
	opacity: 0;
	filter:
		brightness(1.02)
		contrast(1.05)
		saturate(1.04)
		drop-shadow(0 0 5px rgba(107, 255, 218, .26));
	animation-duration: 16s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	pointer-events: none;
	-webkit-user-drag: none;
}

.ldg1__tv-head-screen-img--1 { animation-name: ldg1-tv-smile-1; }
.ldg1__tv-head-screen-img--2 { animation-name: ldg1-tv-smile-2; }
.ldg1__tv-head-screen-img--3 { animation-name: ldg1-tv-smile-3; }
.ldg1__tv-head-screen-img--4 { animation-name: ldg1-tv-smile-4; }

@keyframes ldg1-tv-smile-1 {
	0%, 21% { opacity: 1; }
	24%, 100% { opacity: 0; }
}

@keyframes ldg1-tv-smile-2 {
	0%, 22% { opacity: 0; }
	25%, 46% { opacity: 1; }
	49%, 100% { opacity: 0; }
}

@keyframes ldg1-tv-smile-3 {
	0%, 47% { opacity: 0; }
	50%, 71% { opacity: 1; }
	74%, 100% { opacity: 0; }
}

@keyframes ldg1-tv-smile-4 {
	0%, 72% { opacity: 0; }
	75%, 96% { opacity: 1; }
	100% { opacity: 0; }
}

.ldg1__tv-head-contact-shadow {
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: -.3%;
	display: block;
	width: 46%;
	height: 3.1%;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .40) 48%, transparent 77%);
	filter: blur(2.5px);
	transform: translateX(-50%);
	pointer-events: none;
}

.ldg1__tv-head-reflection {
	position: absolute;
	z-index: 0;
	left: -3%;
	top: calc(100% - 1px);
	display: block;
	width: 106%;
	height: 32%;
	overflow: hidden;
	pointer-events: none;
	opacity: .64;
	transform: perspective(560px) rotateX(3deg) scaleX(.95);
	transform-origin: 50% 0;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .70) 35%, rgba(0, 0, 0, .28) 72%, transparent 100%);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .70) 35%, rgba(0, 0, 0, .28) 72%, transparent 100%);
}

.ldg1__tv-head-reflection-figure {
	filter:
		brightness(.52)
		contrast(1.06)
		saturate(.72)
		sepia(.18)
		blur(.52px)
		drop-shadow(0 0 5px rgba(255, 160, 37, .12));
}

.ldg1__tv-head-reflection-img {
	opacity: .92;
	transform: scaleY(-1);
	transform-origin: 50% 50%;
	filter: none !important;
}

.ldg1__tv-head-screen--reflection::before {
	opacity: .28;
}

.ldg1.is-walking-to-artwork .ldg1__tv-head-character,
.ldg1.is-artwork-focused .ldg1__tv-head-character {
	filter: blur(4.3px) brightness(.84) saturate(.92);
}

.ldg1.is-returning-from-artwork .ldg1__tv-head-character {
	filter: none;
	transition: filter 1650ms cubic-bezier(.20,.62,.24,1);
}

@media (max-width: 991px) {
	.ldg1__tv-head-character {
		left: 67.3%;
		bottom: 17.2%;
		height: 38.6%;
	}
}

@media (max-width: 767px) and (orientation: portrait) {
	.ldg1__tv-head-character {
		left: 67.15%;
		bottom: 17.15%;
		height: 37.9%;
	}

	.ldg1__tv-head-screen,
	.ldg1__tv-head-screen--reflection {
		left: 34%;
		top: 10.9%;
		width: 31%;
		height: 15.2%;
	}

	.ldg1.is-walking-to-artwork .ldg1__tv-head-character,
	.ldg1.is-artwork-focused .ldg1__tv-head-character {
		filter: blur(3.5px) brightness(.86) saturate(.93);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1__tv-head-screen-img {
		animation-duration: 1ms !important;
	}
}

/* =========================================================
   V51 — TV HEAD SCALE + SCREEN FIT CORRECTION
   The TV Head must sit at the far-right end at a larger scale, with the
   smile images confined to the TV screen area only.
   ========================================================= */

.ldg1__tv-head-character {
	left: 69.4% !important;
	bottom: 14.8% !important;
	height: 50.8% !important;
	width: 25.8vh !important;
	width: 25.8svh !important;
}

@supports (height: 100dvh) {
	.ldg1__tv-head-character {
		width: 25.8dvh !important;
	}
}

.ldg1__tv-head-character-img {
	filter:
		brightness(.90)
		contrast(1.06)
		saturate(.94)
		sepia(.06)
		drop-shadow(0 14px 14px rgba(0, 0, 0, .54))
		drop-shadow(-4px 0 7px rgba(255, 157, 30, .22))
		drop-shadow(4px 0 7px rgba(255, 157, 30, .22)) !important;
}

.ldg1__tv-head-screen,
.ldg1__tv-head-screen--reflection {
	left: 31.8% !important;
	top: 1.6% !important;
	width: 36.6% !important;
	height: 10.4% !important;
	border-radius: 7% / 10% !important;
	background: rgba(2, 8, 8, .14) !important;
	overflow: hidden !important;
}

.ldg1__tv-head-screen::before {
	opacity: .30 !important;
}

.ldg1__tv-head-screen-img {
	object-fit: contain !important;
	object-position: center center !important;
	filter:
		brightness(1.02)
		contrast(1.04)
		saturate(1.02)
		drop-shadow(0 0 4px rgba(107, 255, 218, .22)) !important;
}

.ldg1__tv-head-reflection {
	height: 36% !important;
	opacity: .68 !important;
}

@media (max-width: 991px) {
	.ldg1__tv-head-character {
		left: 69.1% !important;
		bottom: 14.7% !important;
		height: 49.8% !important;
	}
}

@media (max-width: 767px) and (orientation: portrait) {
	.ldg1__tv-head-character {
		left: 68.9% !important;
		bottom: 14.55% !important;
		height: 48.8% !important;
	}

	.ldg1__tv-head-screen,
	.ldg1__tv-head-screen--reflection {
		left: 31.6% !important;
		top: 1.8% !important;
		width: 36.9% !important;
		height: 10.6% !important;
	}
}

/* =========================================================
   V52 — TV HEAD REPOSITIONED INTO THE END BAY ON THE FLOOR
   Move the figure into the visible space between the right-side plants
   and the final frame, increase scale, and strengthen the correctly
   proportioned floor reflection so the character reads as standing on
   the polished gallery floor.
   ========================================================= */

.ldg1__tv-head-character {
	left: 57.8% !important;
	bottom: 12.2% !important;
	height: 57.5% !important;
	width: 29.2vh !important;
	width: 29.2svh !important;
}

@supports (height: 100dvh) {
	.ldg1__tv-head-character {
		width: 29.2dvh !important;
	}
}

.ldg1__tv-head-contact-shadow {
	width: 52% !important;
	height: 3.8% !important;
	bottom: -.45% !important;
	filter: blur(2.8px) !important;
}

.ldg1__tv-head-reflection {
	left: -4% !important;
	width: 108% !important;
	height: 40% !important;
	opacity: .76 !important;
	transform: perspective(560px) rotateX(3deg) scaleX(.96) !important;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .76) 34%, rgba(0, 0, 0, .40) 70%, transparent 100%) !important;
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .76) 34%, rgba(0, 0, 0, .40) 70%, transparent 100%) !important;
}

.ldg1__tv-head-reflection-figure {
	filter:
		brightness(.58)
		contrast(1.08)
		saturate(.76)
		sepia(.18)
		blur(.5px)
		drop-shadow(0 0 6px rgba(255, 160, 37, .14)) !important;
}

@media (max-width: 991px) {
	.ldg1__tv-head-character {
		left: 57.4% !important;
		bottom: 12.0% !important;
		height: 56.4% !important;
	}

	.ldg1__tv-head-reflection {
		height: 39% !important;
	}
}

@media (max-width: 767px) and (orientation: portrait) {
	.ldg1__tv-head-character {
		left: 57.0% !important;
		bottom: 11.85% !important;
		height: 55.4% !important;
	}

	.ldg1__tv-head-reflection {
		height: 38% !important;
		opacity: .74 !important;
	}
}

/* =========================================================
   V53 — TV SCREEN ANIMATION FILLS THE WHOLE TV SCREEN
   Expand the TV-head screen mask and force the smile assets to fill the
   whole visible TV screen area.
   ========================================================= */

.ldg1__tv-head-screen,
.ldg1__tv-head-screen--reflection {
	left: 29.4% !important;
	top: 0.5% !important;
	width: 41.4% !important;
	height: 12.8% !important;
	border-radius: 6% / 9% !important;
	background: rgba(2, 8, 8, .06) !important;
}

.ldg1__tv-head-screen-img {
	object-fit: fill !important;
	object-position: center center !important;
	width: 100% !important;
	height: 100% !important;
}

.ldg1__tv-head-screen::before {
	opacity: .22 !important;
}

@media (max-width: 991px) {
	.ldg1__tv-head-screen,
	.ldg1__tv-head-screen--reflection {
		left: 29.2% !important;
		top: 0.55% !important;
		width: 41.7% !important;
		height: 12.95% !important;
	}
}

@media (max-width: 767px) and (orientation: portrait) {
	.ldg1__tv-head-screen,
	.ldg1__tv-head-screen--reflection {
		left: 29.0% !important;
		top: 0.7% !important;
		width: 42.0% !important;
		height: 13.1% !important;
	}
}

/* =========================================================
   V54 — TV HEAD MOVED RIGHT OF THE LAST FRAME + FULL SCREEN FILL
   Place the TV Head clearly to the right of the last frame and enlarge
   the smile overlays so they occupy the full visible TV screen.
   ========================================================= */

.ldg1__tv-head-character {
	left: 70.9% !important;
	bottom: 12.15% !important;
	height: 55.8% !important;
	width: 28.3vh !important;
	width: 28.3svh !important;
}

@supports (height: 100dvh) {
	.ldg1__tv-head-character {
		width: 28.3dvh !important;
	}
}

.ldg1__tv-head-screen,
.ldg1__tv-head-screen--reflection {
	left: 27.4% !important;
	top: 0.2% !important;
	width: 46.6% !important;
	height: 15.4% !important;
	border-radius: 5.5% / 8.5% !important;
	background: rgba(0, 0, 0, .04) !important;
}

.ldg1__tv-head-screen-img {
	object-fit: cover !important;
	object-position: center center !important;
	transform: scale(1.42) !important;
	transform-origin: 50% 50% !important;
}

.ldg1__tv-head-screen::before {
	opacity: .18 !important;
}

@media (max-width: 991px) {
	.ldg1__tv-head-character {
		left: 70.5% !important;
		bottom: 12.0% !important;
		height: 54.8% !important;
	}

	.ldg1__tv-head-screen,
	.ldg1__tv-head-screen--reflection {
		left: 27.2% !important;
		top: 0.25% !important;
		width: 46.9% !important;
		height: 15.55% !important;
	}
}

@media (max-width: 767px) and (orientation: portrait) {
	.ldg1__tv-head-character {
		left: 70.2% !important;
		bottom: 11.85% !important;
		height: 53.9% !important;
	}

	.ldg1__tv-head-screen,
	.ldg1__tv-head-screen--reflection {
		left: 27.0% !important;
		top: 0.3% !important;
		width: 47.2% !important;
		height: 15.7% !important;
	}

	.ldg1__tv-head-screen-img {
		transform: scale(1.46) !important;
	}
}

/* =========================================================
   V55 — TV HEAD FULLY RIGHT OF LAST FRAME + FORCED FRONT STACKING
   The character must sit to the right of the last frame, slightly farther
   back on the floor, and always render in front of the frame and its glow.
   The smile animation is also expanded again to occupy the full TV screen.
   ========================================================= */

.ldg1__tv-head-character {
	z-index: 30 !important;
	left: 90.6% !important;
	bottom: 13.35% !important;
	height: 47.6% !important;
	width: 24.4vh !important;
	width: 24.4svh !important;
}

@supports (height: 100dvh) {
	.ldg1__tv-head-character {
		width: 24.4dvh !important;
	}
}

.ldg1__tv-head-character-img {
	filter:
		brightness(.91)
		contrast(1.07)
		saturate(.95)
		sepia(.05)
		drop-shadow(0 14px 16px rgba(0, 0, 0, .56))
		drop-shadow(-4px 0 7px rgba(255, 157, 30, .22))
		drop-shadow(4px 0 7px rgba(255, 157, 30, .22)) !important;
}

.ldg1__tv-head-screen,
.ldg1__tv-head-screen--reflection {
	left: 24.8% !important;
	top: -0.2% !important;
	width: 50.8% !important;
	height: 16.8% !important;
	border-radius: 5% / 8% !important;
	background: rgba(0, 0, 0, .02) !important;
}

.ldg1__tv-head-screen-img {
	object-fit: cover !important;
	object-position: center center !important;
	width: 100% !important;
	height: 100% !important;
	transform: scale(1.62) !important;
	transform-origin: 50% 50% !important;
}

.ldg1__tv-head-screen::before {
	opacity: .14 !important;
}

.ldg1__tv-head-contact-shadow {
	width: 48% !important;
	height: 3.5% !important;
	bottom: -.38% !important;
}

.ldg1__tv-head-reflection {
	left: -3% !important;
	width: 106% !important;
	height: 34% !important;
	opacity: .70 !important;
	transform: perspective(560px) rotateX(3deg) scaleX(.95) !important;
}

@media (max-width: 991px) {
	.ldg1__tv-head-character {
		left: 90.1% !important;
		bottom: 13.2% !important;
		height: 46.8% !important;
	}

	.ldg1__tv-head-screen,
	.ldg1__tv-head-screen--reflection {
		left: 24.6% !important;
		top: -0.1% !important;
		width: 51.0% !important;
		height: 16.95% !important;
	}
}

@media (max-width: 767px) and (orientation: portrait) {
	.ldg1__tv-head-character {
		left: 89.8% !important;
		bottom: 13.05% !important;
		height: 46.1% !important;
	}

	.ldg1__tv-head-screen,
	.ldg1__tv-head-screen--reflection {
		left: 24.4% !important;
		top: 0% !important;
		width: 51.3% !important;
		height: 17.15% !important;
	}

	.ldg1__tv-head-screen-img {
		transform: scale(1.66) !important;
	}
}

/* =========================================================
   V56 — HIDE STANDING CHARACTER UNTIL FULL WEBP DECODE
   Prevent any low-resolution/LQIP block from appearing before the real
   standing character and reflection have fully loaded and decoded.
   ========================================================= */

.ldg1__gallery-join-character:not(.is-default-ready) {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.ldg1__gallery-join-character.is-default-ready {
	opacity: 1 !important;
	visibility: visible !important;
	transition:
		opacity 320ms cubic-bezier(.22,.61,.36,1),
		filter 1750ms cubic-bezier(.20,.62,.24,1) !important;
}

.ldg1__gallery-join-character-img,
.ldg1__gallery-join-reflection-img {
	background: transparent !important;
}

/* =========================================================
   V57 — TV HEAD MATCHED TO MAIN STANDING CHARACTER HEIGHT
   Make the TV Head the same on-screen height as the main standing
   character, place its feet on the same floor level, and add a slight
   horizontal parallax movement so it responds subtly to scrolling.
   ========================================================= */

.ldg1__tv-head-character {
	z-index: 30 !important;
	left: calc(100% - clamp(16px, 1.6vw, 28px)) !important;
	bottom: 18% !important;
	width: 28.48vh !important;
	width: 28.48svh !important;
	height: 52% !important;
	transform: translate3d(calc(-50% + var(--ldg1-tv-shift, 0px)), 0, 0) !important;
	transform-origin: 50% 100% !important;
	will-change: transform !important;
}

@supports (height: 100dvh) {
	.ldg1__tv-head-character {
		width: 28.48dvh !important;
	}
}

.ldg1__tv-head-contact-shadow {
	left: 50% !important;
	bottom: -.15% !important;
	width: 46% !important;
	height: 3.4% !important;
	filter: blur(2.6px) !important;
	transform: translateX(-50%) !important;
}

.ldg1__tv-head-reflection {
	left: -3% !important;
	top: calc(100% - 1px) !important;
	width: 106% !important;
	height: 38% !important;
	opacity: .72 !important;
	transform: perspective(560px) rotateX(3deg) scaleX(.94) !important;
	transform-origin: 50% 0 !important;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .73) 38%, rgba(0, 0, 0, .34) 72%, transparent 100%) !important;
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .73) 38%, rgba(0, 0, 0, .34) 72%, transparent 100%) !important;
}

.ldg1__tv-head-reflection-figure {
	filter:
		brightness(.56)
		contrast(1.12)
		saturate(.74)
		sepia(.26)
		blur(.58px)
		drop-shadow(0 0 5px rgba(255, 160, 37, .14)) !important;
}

@media (max-width: 991px) {
	.ldg1__tv-head-character {
		left: calc(100% - clamp(14px, 1.8vw, 24px)) !important;
	}
}

@media (max-width: 767px) and (orientation: portrait) {
	.ldg1__tv-head-character {
		left: calc(100% - clamp(12px, 2vw, 20px)) !important;
	}
}

/* =========================================================
   V58 — TV HEAD FULLY ON SCREEN + SMILE OVERLAY INSIDE INNER TV DISPLAY
   Bring the TV Head fully onto the right side of the viewer's screen while
   preserving height/floor level, and constrain the smile animation to the
   true inner display area of the TV rather than the whole TV casing.
   ========================================================= */

.ldg1__tv-head-character {
	left: 77.2% !important;
	bottom: 18% !important;
	width: 28.48vh !important;
	width: 28.48svh !important;
	height: 52% !important;
	transform: translate3d(calc(-50% + var(--ldg1-tv-shift, 0px)), 0, 0) !important;
}

@supports (height: 100dvh) {
	.ldg1__tv-head-character {
		width: 28.48dvh !important;
	}
}

/* Inner green-screen area reference supplied by the user. */
.ldg1__tv-head-screen,
.ldg1__tv-head-screen--reflection {
	left: 17.4% !important;
	top: 1.9% !important;
	width: 43.2% !important;
	height: 11.7% !important;
	border-radius: 4.8% / 11.5% !important;
	background: rgba(0, 0, 0, .03) !important;
	overflow: hidden !important;
}

.ldg1__tv-head-screen-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: fill !important;
	object-position: center center !important;
	transform: none !important;
	transform-origin: 50% 50% !important;
}

.ldg1__tv-head-screen::before {
	opacity: .10 !important;
}

@media (max-width: 991px) {
	.ldg1__tv-head-character {
		left: 76.9% !important;
	}

	.ldg1__tv-head-screen,
	.ldg1__tv-head-screen--reflection {
		left: 17.2% !important;
		top: 2.0% !important;
		width: 43.5% !important;
		height: 11.85% !important;
	}
}

@media (max-width: 767px) and (orientation: portrait) {
	.ldg1__tv-head-character {
		left: 76.6% !important;
	}

	.ldg1__tv-head-screen,
	.ldg1__tv-head-screen--reflection {
		left: 17.0% !important;
		top: 2.05% !important;
		width: 43.8% !important;
		height: 12.0% !important;
	}
}

/* =========================================================
   V59 — TV HEAD POSITION AND TV SCREEN TAKEN FROM USER MOCK-UP
   Use the user's supplied placement image as the source of truth:
   - character sits to the right of the final frame and fully on screen
   - TV screen animation fills only the inner green-screen display area
   ========================================================= */

.ldg1__tv-head-character {
	left: 80.0% !important;
	bottom: 18.1% !important;
	width: 28.48vh !important;
	width: 28.48svh !important;
	height: 52% !important;
	transform: translate3d(calc(-50% + var(--ldg1-tv-shift, 0px)), 0, 0) !important;
}

@supports (height: 100dvh) {
	.ldg1__tv-head-character {
		width: 28.48dvh !important;
	}
}

/* Exact inner display area based on the user's green-screen TV reference. */
.ldg1__tv-head-screen,
.ldg1__tv-head-screen--reflection {
	left: 17.8% !important;
	top: 4.6% !important;
	width: 51.9% !important;
	height: 13.3% !important;
	border-radius: 4.6% / 10.8% !important;
	background: rgba(0, 0, 0, .02) !important;
	overflow: hidden !important;
}

.ldg1__tv-head-screen-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: fill !important;
	object-position: center center !important;
	transform: none !important;
	transform-origin: 50% 50% !important;
}

.ldg1__tv-head-screen::before {
	opacity: .08 !important;
}

@media (max-width: 991px) {
	.ldg1__tv-head-character {
		left: 79.7% !important;
	}

	.ldg1__tv-head-screen,
	.ldg1__tv-head-screen--reflection {
		left: 17.6% !important;
		top: 4.65% !important;
		width: 52.1% !important;
		height: 13.45% !important;
	}
}

@media (max-width: 767px) and (orientation: portrait) {
	.ldg1__tv-head-character {
		left: 79.4% !important;
	}

	.ldg1__tv-head-screen,
	.ldg1__tv-head-screen--reflection {
		left: 17.4% !important;
		top: 4.7% !important;
		width: 52.3% !important;
		height: 13.6% !important;
	}
}

/* =========================================================
   V61 — FULLY VISIBLE 2.5-SECOND BIO CLOSE
   The pad and hands remain opaque while the complete unit slides below
   the viewport. The CRT shuts down at the beginning; only the green
   display goes dark. The physical terminal and hands never fade away.
   ========================================================= */

.ldg1.is-bio-v61-closing .ldg1__bio-layer-v35 {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: none !important;
}

.ldg1.is-bio-v61-closing .ldg1__bio-layer-v35 .ldg1__bio-panel {
	visibility: visible !important;
	opacity: 1 !important;
	transform: translate3d(-50%, calc(100% + 360px), 0) !important;
	transition-property: transform !important;
	transition-duration: 2500ms !important;
	transition-timing-function: cubic-bezier(.22,.74,.20,1) !important;
	transition-delay: 0ms !important;
}

/* Never fade the terminal chassis or the hands during the downward travel. */
.ldg1.is-bio-v61-closing .ldg1__bio-chassis,
.ldg1.is-bio-v61-closing .ldg1__bio-hands,
.ldg1.is-bio-v61-closing .ldg1__bio-hand {
	visibility: visible !important;
	opacity: 1 !important;
}

/* The gallery dimmer may recede, but it does not control the pad opacity. */
.ldg1.is-bio-v61-closing .ldg1__bio-layer-v35 .ldg1__bio-backdrop {
	visibility: visible !important;
	opacity: 0 !important;
	transition: opacity 950ms ease !important;
	transition-delay: 0ms !important;
}

/* Stronger, clearly visible CRT shutdown before the panel has left view. */
.ldg1.is-bio-v61-closing .ldg1__bio-screen.is-crt-shutting-down-v49 {
	animation: ldg1-bio-crt-shutdown-v61 920ms steps(1, end) forwards !important;
	transform-origin: 50% 50% !important;
	will-change: opacity, transform, filter !important;
}

.ldg1.is-bio-v61-closing .ldg1__bio-screen.is-crt-shutting-down-v49::after {
	animation: ldg1-bio-crt-line-v61 920ms linear forwards !important;
}

@keyframes ldg1-bio-crt-shutdown-v61 {
	0% {
		opacity: 1;
		transform: scaleY(1);
		filter: brightness(1) contrast(1) saturate(1);
	}
	7% {
		opacity: .18;
		filter: brightness(3.4) contrast(1.55) saturate(1.2);
	}
	12% {
		opacity: 1;
		filter: brightness(1.05) contrast(1.1) saturate(.95);
	}
	20% {
		opacity: .08;
		filter: brightness(3.8) contrast(1.7) saturate(1.25);
	}
	27% {
		opacity: .94;
		filter: brightness(.86) contrast(1.2) saturate(.9);
	}
	35% {
		opacity: .22;
		filter: brightness(3.1) contrast(1.5) saturate(1.15);
	}
	43% {
		opacity: 1;
		transform: scaleY(1);
		filter: brightness(1.2) contrast(1.18) saturate(.9);
	}
	53% {
		opacity: .10;
		filter: brightness(4) contrast(1.8) saturate(1.3);
	}
	62% {
		opacity: .95;
		transform: scaleY(1);
		filter: brightness(1.3) contrast(1.3) saturate(.75);
	}
	72% {
		opacity: 1;
		transform: scaleY(.075);
		filter: brightness(3.6) contrast(1.8) saturate(.35);
	}
	84% {
		opacity: .9;
		transform: scaleY(.012);
		filter: brightness(4.4) contrast(2) saturate(.12);
	}
	100% {
		opacity: 0;
		transform: scaleY(.002);
		filter: brightness(0) contrast(2.2) saturate(0);
	}
}

@keyframes ldg1-bio-crt-line-v61 {
	0%, 58% {
		opacity: 0;
		transform: scaleX(.2);
	}
	69% {
		opacity: 1;
		transform: scaleX(1);
	}
	83% {
		opacity: .9;
		transform: scaleX(.46);
	}
	100% {
		opacity: 0;
		transform: scaleX(.025);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1.is-bio-v61-closing .ldg1__bio-layer-v35 .ldg1__bio-panel {
		transition-duration: 2500ms !important;
	}

	.ldg1.is-bio-v61-closing .ldg1__bio-screen.is-crt-shutting-down-v49,
	.ldg1.is-bio-v61-closing .ldg1__bio-screen.is-crt-shutting-down-v49::after {
		animation: none !important;
	}
}

/* =========================================================
   V62 — BIO CHARACTER COORDINATE LOCK
   Reference grid: 2458 × 989
   Bottom-left anchor:  X 628, Y 812
   Bottom-right anchor: X 939, Y 812

   The label remains centre-anchored so the existing horizontal parallax
   continues to work. Both BIO.webp and BIO-Push.png fill this identical
   canvas, keeping the resting and active poses perfectly aligned.
   ========================================================= */

.ldg1__room:first-child > .ldg1__bio-character-v35 {
	/* Centre between X 628 and X 939. */
	left: 31.875509% !important;

	/* Y 812 on a 989-high reference leaves 177 units below the image. */
	bottom: 17.896866% !important;

	/* 311 reference units wide on a 2458-wide gallery background. */
	width: 12.652563% !important;

	/* Preserve the established BIO artwork canvas ratio: 35.66 / 42.5. */
	height: 35.170755% !important;
}

/* Explicitly keep both poses and the silhouette hit area on the same canvas. */
.ldg1__room:first-child > .ldg1__bio-character-v35 .ldg1__seated-character-visual,
.ldg1__room:first-child > .ldg1__bio-character-v35 .ldg1__bio-character-image-v35,
.ldg1__room:first-child > .ldg1__bio-character-v35 .ldg1__bio-character-hit-v43 {
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
}


/* =========================================================
   V63 — HARD-LOCKED BIO CHARACTER COORDINATES

   V62 supplied the intended coordinate percentages, but the live result
   remained on the earlier cumulative seated-character geometry. V63 locks
   the same values directly to the rendered BIO label in PHP and repeats
   them here with a dedicated room class and data attribute.

   Reference overlay: 2458 × 989
   Bottom-left:  X 628, Y 812
   Bottom-right: X 939, Y 812
   Centre X:     783.5

   These values apply to the shared canvas containing BIO.webp and
   BIO-Push.png, so both states occupy exactly the same position and scale.
   ========================================================= */

.ldg1 .ldg1__track--desktop > .ldg1__room--one >
.ldg1__bio-character-v35[data-ldg1-bio-coordinate-lock-v63],
.ldg1 .ldg1__track--desktop > .ldg1__room--one >
.ldg1__bio-character-v35[data-ldg1-bio-coordinate-lock-v63]:hover,
.ldg1 .ldg1__track--desktop > .ldg1__room--one >
.ldg1__bio-character-v35[data-ldg1-bio-coordinate-lock-v63]:focus,
.ldg1 .ldg1__track--desktop > .ldg1__room--one >
.ldg1__bio-character-v35[data-ldg1-bio-coordinate-lock-v63]:focus-visible,
.ldg1 .ldg1__track--desktop > .ldg1__room--one >
.ldg1__bio-character-v35[data-ldg1-bio-coordinate-lock-v63]:active {
	position: absolute !important;
	left: 31.875509% !important;
	right: auto !important;
	top: auto !important;
	bottom: 17.896866% !important;
	width: 12.652563% !important;
	height: 35.170755% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	aspect-ratio: auto !important;
	transform: translate3d(
		calc(-50% + var(--ldg1-seat-shift, 0px)),
		0,
		0
	) !important;
	transform-origin: 50% 100% !important;
}

.ldg1 .ldg1__room--one >
.ldg1__bio-character-v35[data-ldg1-bio-coordinate-lock-v63]
.ldg1__seated-character-visual,
.ldg1 .ldg1__room--one >
.ldg1__bio-character-v35[data-ldg1-bio-coordinate-lock-v63]
.ldg1__bio-character-image-v35,
.ldg1 .ldg1__room--one >
.ldg1__bio-character-v35[data-ldg1-bio-coordinate-lock-v63]
.ldg1__bio-character-hit-v43 {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
}

.ldg1 .ldg1__room--one >
.ldg1__bio-character-v35[data-ldg1-bio-coordinate-lock-v63]
.ldg1__bio-character-image-v35 {
	object-fit: contain !important;
	object-position: 50% 100% !important;
	transform: none !important;
}

/* =========================================================
   V64 — EXACT-GRID BIO CHARACTER PLACEMENT

   Corrected source grid: 2048 × 878, drawn mathematically over the
   unchanged Gallery-1 background.

   Green-dot centres read from the supplied marked screenshot:
   Bottom-left:  X 583.603, Y 691.098
   Bottom-right: X 848.593, Y 691.098
   Centre X:     716.098
   Display width: 264.990

   Percentage conversion used by the live room coordinate system:
   Centre X: 34.965715%
   Bottom:   21.287268%
   Width:    12.938958%
   Height:   35.970157%

   The label stays centre-anchored because the existing horizontal
   parallax adds --ldg1-seat-shift around that centre point. BIO.webp
   and BIO-Push.png continue to fill one identical shared canvas.
   ========================================================= */

.ldg1 .ldg1__track--desktop > .ldg1__room--one >
.ldg1__bio-character-v35[data-ldg1-bio-coordinate-lock-v64],
.ldg1 .ldg1__track--desktop > .ldg1__room--one >
.ldg1__bio-character-v35[data-ldg1-bio-coordinate-lock-v64]:hover,
.ldg1 .ldg1__track--desktop > .ldg1__room--one >
.ldg1__bio-character-v35[data-ldg1-bio-coordinate-lock-v64]:focus,
.ldg1 .ldg1__track--desktop > .ldg1__room--one >
.ldg1__bio-character-v35[data-ldg1-bio-coordinate-lock-v64]:focus-visible,
.ldg1 .ldg1__track--desktop > .ldg1__room--one >
.ldg1__bio-character-v35[data-ldg1-bio-coordinate-lock-v64]:active {
	position: absolute !important;
	left: 34.965715% !important;
	right: auto !important;
	top: auto !important;
	bottom: 21.287268% !important;
	width: 12.938958% !important;
	height: 35.970157% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	aspect-ratio: auto !important;
	transform: translate3d(
		calc(-50% + var(--ldg1-seat-shift, 0px)),
		0,
		0
	) !important;
	transform-origin: 50% 100% !important;
}

/* Default and active BIO images are forced onto precisely the same canvas. */
.ldg1 .ldg1__room--one >
.ldg1__bio-character-v35[data-ldg1-bio-coordinate-lock-v64]
.ldg1__seated-character-visual,
.ldg1 .ldg1__room--one >
.ldg1__bio-character-v35[data-ldg1-bio-coordinate-lock-v64]
.ldg1__bio-character-image-v35,
.ldg1 .ldg1__room--one >
.ldg1__bio-character-v35[data-ldg1-bio-coordinate-lock-v64]
.ldg1__bio-character-hit-v43 {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
}

.ldg1 .ldg1__room--one >
.ldg1__bio-character-v35[data-ldg1-bio-coordinate-lock-v64]
.ldg1__bio-character-image-v35 {
	object-fit: contain !important;
	object-position: 50% 100% !important;
	transform: none !important;
}

/* =========================================================
   V65 — EXHIBIT 1 EXACT FRAME + MEDIA COORDINATE LOCK

   Corrected source grid: 2048 × 878.
   The four supplied green-dot centres define the OUTER displayed edge of
   Neon-Dance.webp, not merely the wall recess or an oversized shell.

   Top-left:     X 269.040, Y 252.451
   Top-right:    X 559.699, Y 252.451
   Bottom-left:  X 269.040, Y 542.156
   Bottom-right: X 559.699, Y 542.156

   Live room percentages:
   Left:   13.136713%
   Top:    28.752956%
   Width:  14.192331%
   Height: 32.996036%

   The still image and decoded MP4 canvas use the same inner aperture. They
   slightly overlap beneath the inner frame trim, preventing hairline gaps
   while remaining completely inside the visible Neon Dance opening.
   ========================================================= */

/* Exact outer frame box — applies only to Exhibit 1 in Gallery Room One. */
.ldg1 .ldg1__track--desktop > .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97],
.ldg1 .ldg1__track--desktop > .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97]:hover,
.ldg1 .ldg1__track--desktop > .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97]:focus,
.ldg1 .ldg1__track--desktop > .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97]:focus-visible,
.ldg1 .ldg1__track--desktop > .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97]:active {
	position: absolute !important;
	left: 13.136713% !important;
	right: auto !important;
	top: 28.752956% !important;
	bottom: auto !important;
	width: 14.192331% !important;
	height: 32.996036% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: none !important;
	transform-origin: 50% 50% !important;
	overflow: visible !important;
}

/* Shell fills the exact four-corner box. */
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97]
.ldg1__artwork-shell--neon-dance {
	position: relative !important;
	inset: auto !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	transform: none !important;
	transform-origin: 50% 50% !important;
}

/* The green dots describe the frame image itself, therefore remove the old
   1.025 enlargement that previously pushed the visible frame beyond them. */
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97]
.ldg1__artwork-shell--neon-dance > .ldg1__artwork,
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97]:hover
.ldg1__artwork-shell--neon-dance > .ldg1__artwork,
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97]:focus-visible
.ldg1__artwork-shell--neon-dance > .ldg1__artwork,
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97].is-current
.ldg1__artwork-shell--neon-dance > .ldg1__artwork,
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97].is-neon-starting
.ldg1__artwork-shell--neon-dance > .ldg1__artwork,
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97].is-neon-engaged
.ldg1__artwork-shell--neon-dance > .ldg1__artwork {
	position: absolute !important;
	z-index: 3 !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: contain !important;
	object-position: 50% 50% !important;
	transform: none !important;
	transform-origin: 50% 50% !important;
}

/* One shared aperture for Lately.jpg and every painted MP4 frame. */
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97]
.ldg1__artwork-shell--neon-dance > .ldg1__inside-artwork,
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97]
.ldg1__artwork-shell--neon-dance > .ldg1__video-slot {
	position: absolute !important;
	left: 15.3% !important;
	right: auto !important;
	top: 15.2% !important;
	bottom: auto !important;
	width: 69.5% !important;
	height: 69.7% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	object-fit: cover !important;
	object-position: 50% 50% !important;
	transform: scale(1.018) !important;
	transform-origin: 50% 50% !important;
}

/* The decoded MP4 canvas fills the video aperture exactly. */
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97]
.ldg1__video-canvas {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: 50% 50% !important;
}

/* Keep the glass highlight inside the media opening rather than washing over
   the newly measured outer frame. */
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97]
.ldg1__artwork-shell--neon-dance > .ldg1__artwork-glass {
	inset: auto !important;
	left: 15.3% !important;
	right: auto !important;
	top: 15.2% !important;
	bottom: auto !important;
	width: 69.5% !important;
	height: 69.7% !important;
	border-radius: 1.5% !important;
}

/* The play control remains centred on the new frame and follows it on every
   screen size because it is positioned from the exact Exhibit 1 box. */
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97]
.ldg1__play-trigger {
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
}

/* =========================================================
   V66 — STAGED OLD-CRT SHUTDOWN + SLOWER PAD EXIT

   Stage 1: the terminal remains completely stationary while the green
   CRT visibly flickers, flashes, collapses to a bright horizontal line,
   and switches fully off.

   Stage 2: the dark screen is held briefly before movement starts.

   Stage 3: the complete opaque terminal, chassis and both hands travel
   smoothly below the viewport over 3.3 seconds.
   ========================================================= */

/* Keep the unchecked BIO layer mounted throughout the complete sequence. */
.ldg1.is-bio-v66-closing .ldg1__bio-layer-v35 {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: none !important;
}

/* Stage 1 and the dark-screen hold: absolutely no panel movement. */
.ldg1.is-bio-v66-closing .ldg1__bio-layer-v35 .ldg1__bio-panel {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	transform: translate3d(-50%, 0, 0) !important;
	transition: none !important;
	transition-delay: 0ms !important;
	will-change: transform;
}

/* Stage 3: begin only after JavaScript adds the exiting class. */
.ldg1.is-bio-v66-closing.is-bio-v66-exiting
.ldg1__bio-layer-v35 .ldg1__bio-panel {
	transform: translate3d(-50%, calc(100% + 420px), 0) !important;
	transition-property: transform !important;
	transition-duration: 3300ms !important;
	transition-timing-function: cubic-bezier(.20,.62,.24,1) !important;
	transition-delay: 0ms !important;
}

/* The physical pad and hands never fade during shutdown or travel. */
.ldg1.is-bio-v66-closing .ldg1__bio-chassis,
.ldg1.is-bio-v66-closing .ldg1__bio-hands,
.ldg1.is-bio-v66-closing .ldg1__bio-hand {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Freeze the tiny independent hand motion at its current position so the
   hands remain visibly locked to the terminal during the exit. */
.ldg1.is-bio-v66-closing .ldg1__bio-hand {
	animation-play-state: paused !important;
}

/* Keep the gallery dimmer in place while the CRT shuts down. */
.ldg1.is-bio-v66-closing .ldg1__bio-layer-v35 .ldg1__bio-backdrop {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	transition: none !important;
}

/* Let the dimmer recede gently only after the physical pad starts moving. */
.ldg1.is-bio-v66-closing.is-bio-v66-exiting
.ldg1__bio-layer-v35 .ldg1__bio-backdrop {
	opacity: 0 !important;
	transition: opacity 1750ms ease 350ms !important;
}

/* BIO-Push remains visible until the complete pad has left the viewport. */
.ldg1.is-bio-v66-closing .ldg1__bio-lead-v35 {
	opacity: 0 !important;
	transition-delay: 0ms !important;
}

.ldg1.is-bio-v66-closing .ldg1__bio-push-v35 {
	opacity: 1 !important;
	transition-delay: 0ms !important;
}

/* Old television shutdown: irregular hard flickers followed by a smoother
   vertical collapse. The full effect finishes before the exit begins. */
.ldg1.is-bio-v66-closing
.ldg1__bio-screen.is-crt-shutting-down-v49 {
	animation: ldg1-bio-crt-shutdown-v66 1750ms linear forwards !important;
	transform-origin: 50% 50% !important;
	will-change: opacity, transform, filter !important;
}

.ldg1.is-bio-v66-closing
.ldg1__bio-screen.is-crt-shutting-down-v49::after {
	animation: ldg1-bio-crt-line-v66 1750ms linear forwards !important;
}

@keyframes ldg1-bio-crt-shutdown-v66 {
	0% {
		opacity: 1;
		transform: scaleY(1);
		filter: brightness(1) contrast(1) saturate(1);
		animation-timing-function: steps(1, end);
	}
	5% {
		opacity: .16;
		filter: brightness(3.8) contrast(1.65) saturate(1.25);
	}
	9% {
		opacity: 1;
		filter: brightness(1.05) contrast(1.12) saturate(.95);
	}
	15% {
		opacity: .34;
		filter: brightness(2.9) contrast(1.5) saturate(1.15);
	}
	19% {
		opacity: .98;
		filter: brightness(.88) contrast(1.25) saturate(.9);
	}
	25% {
		opacity: .08;
		filter: brightness(4.4) contrast(1.9) saturate(1.35);
	}
	30% {
		opacity: 1;
		filter: brightness(1.2) contrast(1.18) saturate(.95);
	}
	36% {
		opacity: .22;
		filter: brightness(3.6) contrast(1.7) saturate(1.2);
	}
	40% {
		opacity: .92;
		filter: brightness(.8) contrast(1.32) saturate(.82);
	}
	47% {
		opacity: .12;
		filter: brightness(4.2) contrast(1.95) saturate(1.25);
	}
	51% {
		opacity: 1;
		filter: brightness(1.32) contrast(1.28) saturate(.85);
	}
	57% {
		opacity: .28;
		filter: brightness(3.25) contrast(1.62) saturate(1.05);
	}
	61% {
		opacity: 1;
		transform: scaleY(1);
		filter: brightness(1.4) contrast(1.35) saturate(.72);
		animation-timing-function: cubic-bezier(.55,0,.86,.42);
	}
	70% {
		opacity: 1;
		transform: scaleY(.34);
		filter: brightness(2.2) contrast(1.55) saturate(.55);
	}
	78% {
		opacity: 1;
		transform: scaleY(.075);
		filter: brightness(3.8) contrast(1.9) saturate(.28);
	}
	86% {
		opacity: 1;
		transform: scaleY(.014);
		filter: brightness(5) contrast(2.2) saturate(.1);
	}
	93% {
		opacity: .96;
		transform: scaleY(.0035);
		filter: brightness(5.6) contrast(2.4) saturate(0);
	}
	100% {
		opacity: 0;
		transform: scaleY(.001);
		filter: brightness(0) contrast(2.4) saturate(0);
	}
}

@keyframes ldg1-bio-crt-line-v66 {
	0%, 60% {
		opacity: 0;
		transform: scaleX(.16);
	}
	68% {
		opacity: 1;
		transform: scaleX(1);
	}
	78% {
		opacity: 1;
		transform: scaleX(.92);
	}
	87% {
		opacity: .94;
		transform: scaleX(.48);
	}
	94% {
		opacity: .72;
		transform: scaleX(.12);
	}
	100% {
		opacity: 0;
		transform: scaleX(.018);
	}
}

/* On smaller screens retain the same visible shutdown sequence while the
   exit distance remains sufficient to clear the mobile viewport. */
@media (max-width: 767px) {
	.ldg1.is-bio-v66-closing.is-bio-v66-exiting
	.ldg1__bio-layer-v35 .ldg1__bio-panel {
		transform: translate3d(-50%, calc(100% + 320px), 0) !important;
		transition-duration: 3300ms !important;
	}
}

/* =========================================================
   V67 — EXHIBIT 3 / REAL LOVE / HEAVY GOLD
   EXACT FRAME + CONTENT COORDINATE LOCK

   Exact 2048 × 878 grid coordinates supplied by the four green dots:
   top-left     X 1501.356 / Y 245.513
   top-right    X 1770.087 / Y 245.513
   bottom-left  X 1501.356 / Y 539.198
   bottom-right X 1770.087 / Y 539.198

   The coordinates describe the outside edge of the Heavy-Gold.webp image.
   The still, video canvas and glass remain in the transparent inner opening.
   ========================================================= */

/* Lock the complete Exhibit 3 button to the measured outer frame rectangle. */
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-heavy-gold-coordinate-lock-v67],
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-heavy-gold-coordinate-lock-v67]:hover,
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-heavy-gold-coordinate-lock-v67]:focus,
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-heavy-gold-coordinate-lock-v67]:focus-visible,
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-heavy-gold-coordinate-lock-v67]:active {
	left: 73.308377% !important;
	top: 27.962808% !important;
	width: 13.121657% !important;
	height: 33.449215% !important;
	transform: none !important;
}

/* The shell uses the whole measured rectangle. */
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-heavy-gold-coordinate-lock-v67]
.ldg1__artwork-shell--heavy-gold {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	overflow: visible !important;
	transform: none !important;
}

/* The transparent Heavy Gold frame touches all four measured green-dot edges. */
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-heavy-gold-coordinate-lock-v67]
.ldg1__artwork-shell--heavy-gold > .ldg1__artwork,
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-heavy-gold-coordinate-lock-v67]:hover
.ldg1__artwork-shell--heavy-gold > .ldg1__artwork,
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-heavy-gold-coordinate-lock-v67]:focus-visible
.ldg1__artwork-shell--heavy-gold > .ldg1__artwork,
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-heavy-gold-coordinate-lock-v67].is-current
.ldg1__artwork-shell--heavy-gold > .ldg1__artwork,
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-heavy-gold-coordinate-lock-v67].is-neon-starting
.ldg1__artwork-shell--heavy-gold > .ldg1__artwork,
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-heavy-gold-coordinate-lock-v67].is-neon-engaged
.ldg1__artwork-shell--heavy-gold > .ldg1__artwork {
	position: absolute !important;
	z-index: 3 !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: fill !important;
	object-position: 50% 50% !important;
	transform: none !important;
	transform-origin: 50% 50% !important;
}

/* Real Love still and video share the same aperture beneath the transparent
   frame. The small overscan keeps every rounded inner edge filled without a
   visible gap when the frame is scaled responsively. */
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-heavy-gold-coordinate-lock-v67]
.ldg1__artwork-shell--heavy-gold > .ldg1__inside-artwork,
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-heavy-gold-coordinate-lock-v67]
.ldg1__artwork-shell--heavy-gold > .ldg1__video-slot {
	position: absolute !important;
	left: 14.7% !important;
	right: auto !important;
	top: 14.6% !important;
	bottom: auto !important;
	width: 70.6% !important;
	height: 70.8% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	border-radius: 11% !important;
	object-fit: cover !important;
	object-position: 50% 50% !important;
	transform: none !important;
	transform-origin: 50% 50% !important;
}

/* Ensure the decoded MP4 canvas fills the exact same inner opening. */
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-heavy-gold-coordinate-lock-v67]
.ldg1__video-canvas {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: cover !important;
	object-position: 50% 50% !important;
	transform: none !important;
}

/* Keep the glass highlight over the visible inner opening, not over the
   complete ornate frame image. */
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-heavy-gold-coordinate-lock-v67]
.ldg1__artwork-shell--heavy-gold > .ldg1__artwork-glass {
	inset: auto !important;
	left: 14.7% !important;
	right: auto !important;
	top: 14.6% !important;
	bottom: auto !important;
	width: 70.6% !important;
	height: 70.8% !important;
	border-radius: 11% !important;
}

/* The existing Glass Play 3 control remains centred beneath the newly placed
   frame and follows its exact scale on every viewport. */
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-heavy-gold-coordinate-lock-v67]
.ldg1__play-trigger {
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
}

/* =========================================================
   V68 — RESTORE HORIZONTAL GALLERY NAVIGATION ON BIO CLOSE

   The backdrop carries pointer-events:auto !important in older BIO rules.
   During the deliberately long V66 shutdown it could remain the full-screen
   wheel/pointer target even though the parent layer had pointer-events:none.

   V68 releases every BIO hit layer immediately when CLOSE is pressed while
   leaving the CRT shutdown, dark-screen hold and 3.3-second physical exit
   visually unchanged.
   ========================================================= */

.ldg1.is-bio-v68-scroll-released .ldg1__bio-layer-v35,
.ldg1.is-bio-v68-scroll-released .ldg1__bio-layer-v35 .ldg1__bio-panel,
.ldg1.is-bio-v68-scroll-released .ldg1__bio-layer-v35 .ldg1__bio-backdrop,
.ldg1.is-bio-v68-scroll-released .ldg1__bio-layer-v35 .ldg1__bio-chassis,
.ldg1.is-bio-v68-scroll-released .ldg1__bio-layer-v35 .ldg1__bio-screen,
.ldg1.is-bio-v68-scroll-released .ldg1__bio-layer-v35 .ldg1__bio-hands,
.ldg1.is-bio-v68-scroll-released .ldg1__bio-layer-v35 .ldg1__bio-hand {
	pointer-events: none !important;
}

.ldg1.is-bio-v68-scroll-released .ldg1__viewport {
	pointer-events: auto !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	touch-action: pan-x pinch-zoom !important;
	-webkit-overflow-scrolling: touch !important;
	cursor: grab !important;
}

.ldg1.is-bio-v68-scroll-released .ldg1__viewport.is-dragging {
	cursor: grabbing !important;
}



/* =========================================================
   V69 — REDUCED CENTRAL STANDING-CHARACTER PARALLAX

   The parallax distances are calculated in the embedded JavaScript.
   No geometry, reflection, lighting or pose CSS has been changed.
   Desktop travel is reduced from 90px to 68px, tablet from 66px to
   50px, and mobile from 46px to 35px.
   ========================================================= */

/* =========================================================
   V71 — TV HEAD SCREEN INNER-DISPLAY LOCK

   The outer TV Head character position from V70 remains unchanged.
   The user then marked the exact inner-screen opening with four green dots
   on the positioned second-room background. The Smile-1.webp through
   Smile-4.webp assets are designed to fit that exact inner display area.

   Outer TV Head position remains:
   bottom-left  X 1774.582 / Y 746.197
   bottom-right X 1970.060 / Y 746.197
   centre       X 1872.321 / Y 746.197
   image width  195.478

   Inner screen green-dot corners read from the supplied room-grid screenshot:
   top-left     X 1819.121 / Y 293.881
   top-right    X 1913.968 / Y 293.881
   bottom-left  X 1819.121 / Y 358.279
   bottom-right X 1913.968 / Y 358.279

   Converted relative to the full TV-Head.webp character canvas:
   left   22.717867%
   top     2.047957%
   width  48.509601%
   height 13.415641%

   These values lock the smile animation to the exact visible inner screen
   while preserving the V70 character position, natural image ratio, floor
   shadow and reflection.
   ========================================================= */

.ldg1 .ldg1__room--two >
.ldg1__tv-head-character[data-ldg1-tv-head-coordinate-lock-v73] {
	left: 91.421918% !important;
	bottom: 15.011771% !important;
	width: 9.544820% !important;
	height: auto !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: translate3d(calc(-50% + var(--ldg1-tv-shift, 0px)), 0, 0) !important;
	transform-origin: 50% 100% !important;
	overflow: visible !important;
	z-index: 30 !important;
}

.ldg1 .ldg1__room--two >
.ldg1__tv-head-character[data-ldg1-tv-head-coordinate-lock-v73]
.ldg1__tv-head-figure {
	position: relative !important;
	inset: auto !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ldg1 .ldg1__room--two >
.ldg1__tv-head-character[data-ldg1-tv-head-coordinate-lock-v73]
.ldg1__tv-head-character-img {
	position: relative !important;
	inset: auto !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: contain !important;
	object-position: 50% 100% !important;
}

.ldg1 .ldg1__room--two >
.ldg1__tv-head-character[data-ldg1-tv-head-coordinate-lock-v73]
.ldg1__tv-head-screen,
.ldg1 .ldg1__room--two >
.ldg1__tv-head-character[data-ldg1-tv-head-coordinate-lock-v73]
.ldg1__tv-head-screen--reflection {
	left: 22.717867% !important;
	top: 2.047957% !important;
	width: 48.509601% !important;
	height: 13.415641% !important;
	border-radius: 4.6% / 10.8% !important;
	overflow: hidden !important;
}

.ldg1 .ldg1__room--two >
.ldg1__tv-head-character[data-ldg1-tv-head-coordinate-lock-v73]
.ldg1__tv-head-screen-img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: fill !important;
	object-position: 50% 50% !important;
	transform: none !important;
	transform-origin: 50% 50% !important;
}

.ldg1 .ldg1__room--two >
.ldg1__tv-head-character[data-ldg1-tv-head-coordinate-lock-v73]
.ldg1__tv-head-contact-shadow {
	left: 50% !important;
	bottom: -.15% !important;
	width: 46% !important;
	height: 3.4% !important;
	transform: translateX(-50%) !important;
}

.ldg1 .ldg1__room--two >
.ldg1__tv-head-character[data-ldg1-tv-head-coordinate-lock-v73]
.ldg1__tv-head-reflection {
	left: -3% !important;
	top: calc(100% - 1px) !important;
	width: 106% !important;
	height: 38% !important;
	transform: perspective(560px) rotateX(3deg) scaleX(.94) !important;
	transform-origin: 50% 0 !important;
}




/* =========================================================
   V72 — TV HEAD PARALLAX MATCHED TO JOIN CHARACTER

   The TV Head now uses the same horizontal parallax shift value as the
   central standing/join character. Because the Smile screen, contact shadow
   and reflection are all nested inside the same transformed wrapper, they
   automatically track the full movement as one unit. No geometry values have
   been changed from V71; only the parallax multiplier in the embedded
   JavaScript has been increased from 0.28× to 1.0×.
   ========================================================= */


/* =========================================================
   V73 — INDEPENDENT TV HEAD PARALLAX + CORRECT SCREEN CANVAS

   V72 reused the central join character's already-clamped parallax value.
   At the far-right TV Head location this remained at a constant extreme, so
   no local parallax movement was visible. V73 calculates TV Head movement
   from TV Head's own centre using the same maximum travel and smoothing as
   the central standing character.

   The inner screen is recalculated against the exact 367 × 900 source image
   canvas and the four user-marked room-grid points. Smile-1 through Smile-4,
   the reflected screen and the TV body now remain one tracked moving unit.
   ========================================================= */


/* =========================================================
   V74 — BIO CLOSE INTERACTION REPAIR

   The BIO terminal could be revealed by the native checkbox while its
   full-screen layer still retained the HTML inert attribute from the previous
   closed state. That made the visible CLOSE control and backdrop unable to
   receive input. The repair is implemented in the complete PHP/JavaScript:
   inert is removed on every open and both close targets have an explicit
   checkbox-close controller. No visual BIO, frame, character or parallax
   geometry has been changed in this version.
   ========================================================= */


/* =========================================================
   V75 — BIO CRT LINE-TO-POINT SHUTDOWN

   The terminal remains stationary while the green CRT performs this sequence:
   1. irregular old-screen flicker;
   2. vertical collapse into a narrow green horizontal line;
   3. the line contracts from both sides into the centre;
   4. a bright green point remains briefly in the middle;
   5. the point extinguishes and the display stays fully dark;
   6. only then does the terminal-and-hands unit begin its slower exit.

   The physical chassis and hands remain fully opaque throughout.
   ========================================================= */

.ldg1.is-bio-v66-closing
.ldg1__bio-screen.is-crt-shutting-down-v49 {
	animation: ldg1-bio-crt-shutdown-v75 2200ms linear forwards !important;
	transform-origin: 50% 50% !important;
	will-change: opacity, transform, filter !important;
}

.ldg1.is-bio-v66-closing
.ldg1__bio-screen.is-crt-shutting-down-v49::after {
	left: 50% !important;
	right: auto !important;
	top: 50% !important;
	width: 88% !important;
	height: 2px !important;
	margin: 0 !important;
	border-radius: 999px !important;
	background: rgb(157, 255, 174) !important;
	box-shadow:
		0 0 5px rgba(126, 255, 145, .98),
		0 0 15px rgba(126, 255, 145, .82),
		0 0 34px rgba(126, 255, 145, .48) !important;
	transform: translate3d(-50%, -50%, 0) scaleX(.12) !important;
	transform-origin: 50% 50% !important;
	animation: ldg1-bio-crt-line-to-point-v75 2200ms linear forwards !important;
	will-change: opacity, transform, height, filter, box-shadow !important;
}

@keyframes ldg1-bio-crt-shutdown-v75 {
	0% {
		opacity: 1;
		transform: scaleY(1);
		filter: brightness(1) contrast(1) saturate(1);
		animation-timing-function: steps(1, end);
	}
	5% {
		opacity: .15;
		filter: brightness(3.9) contrast(1.68) saturate(1.22);
	}
	9% {
		opacity: 1;
		filter: brightness(1.04) contrast(1.12) saturate(.95);
	}
	15% {
		opacity: .30;
		filter: brightness(3.05) contrast(1.55) saturate(1.12);
	}
	19% {
		opacity: .98;
		filter: brightness(.86) contrast(1.28) saturate(.9);
	}
	25% {
		opacity: .07;
		filter: brightness(4.5) contrast(1.92) saturate(1.3);
	}
	30% {
		opacity: 1;
		filter: brightness(1.18) contrast(1.2) saturate(.94);
	}
	36% {
		opacity: .20;
		filter: brightness(3.7) contrast(1.72) saturate(1.18);
	}
	40% {
		opacity: .92;
		filter: brightness(.78) contrast(1.34) saturate(.82);
	}
	46% {
		opacity: .11;
		filter: brightness(4.25) contrast(1.98) saturate(1.22);
	}
	50% {
		opacity: 1;
		transform: scaleY(1);
		filter: brightness(1.35) contrast(1.3) saturate(.85);
		animation-timing-function: cubic-bezier(.55, 0, .86, .42);
	}
	60% {
		opacity: 1;
		transform: scaleY(.38);
		filter: brightness(2.15) contrast(1.55) saturate(.56);
	}
	68% {
		opacity: 1;
		transform: scaleY(.09);
		filter: brightness(3.5) contrast(1.86) saturate(.3);
	}
	74% {
		opacity: 1;
		transform: scaleY(.018);
		filter: brightness(5.1) contrast(2.18) saturate(.12);
	}
	79% {
		opacity: .96;
		transform: scaleY(.004);
		filter: brightness(5.8) contrast(2.45) saturate(.03);
	}
	82% {
		opacity: 0;
		transform: scaleY(.001);
		filter: brightness(0) contrast(2.5) saturate(0);
	}
	100% {
		opacity: 0;
		transform: scaleY(.001);
		filter: brightness(0) contrast(2.5) saturate(0);
	}
}

@keyframes ldg1-bio-crt-line-to-point-v75 {
	0%, 51% {
		opacity: 0;
		height: 2px;
		transform: translate3d(-50%, -50%, 0) scaleX(.12);
		filter: brightness(1);
	}
	58% {
		opacity: .55;
		height: 2px;
		transform: translate3d(-50%, -50%, 0) scaleX(.55);
		filter: brightness(1.8);
	}
	66% {
		opacity: 1;
		height: 2px;
		transform: translate3d(-50%, -50%, 0) scaleX(1);
		filter: brightness(2.25);
	}
	75% {
		opacity: 1;
		height: 2px;
		transform: translate3d(-50%, -50%, 0) scaleX(.98);
		filter: brightness(2.7);
	}
	82% {
		opacity: 1;
		height: 2px;
		transform: translate3d(-50%, -50%, 0) scaleX(.62);
		filter: brightness(3.1);
	}
	88% {
		opacity: 1;
		height: 3px;
		transform: translate3d(-50%, -50%, 0) scaleX(.24);
		filter: brightness(3.8);
	}
	93% {
		opacity: 1;
		height: 5px;
		transform: translate3d(-50%, -50%, 0) scaleX(.045);
		filter: brightness(5.1);
		box-shadow:
			0 0 7px rgba(145, 255, 162, 1),
			0 0 24px rgba(126, 255, 145, .96),
			0 0 54px rgba(126, 255, 145, .68) !important;
	}
	96.5% {
		opacity: 1;
		height: 7px;
		transform: translate3d(-50%, -50%, 0) scaleX(.014);
		filter: brightness(6.2);
		box-shadow:
			0 0 8px rgba(174, 255, 188, 1),
			0 0 28px rgba(126, 255, 145, 1),
			0 0 70px rgba(126, 255, 145, .74) !important;
	}
	98% {
		opacity: .92;
		height: 7px;
		transform: translate3d(-50%, -50%, 0) scaleX(.010);
		filter: brightness(6.6);
	}
	100% {
		opacity: 0;
		height: 1px;
		transform: translate3d(-50%, -50%, 0) scaleX(.002);
		filter: brightness(0);
		box-shadow: none !important;
	}
}


/* =========================================================
   V76 — FRAME CONTROL PANEL WITH LCD DETAILS SCREEN
   ========================================================= */

.ldg1__play-spark {
	display: none !important;
}

.ldg1__room .ldg1__play-trigger,
.ldg1__play-trigger {
	position: absolute !important;
	left: 50% !important;
	top: calc(100% + 2.4%) !important;
	width: 42.5% !important;
	height: auto !important;
	aspect-ratio: 1024 / 358 !important;
	transform: translateX(-50%) !important;
	z-index: 14 !important;
	pointer-events: auto !important;
	filter: drop-shadow(0 0 12px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(214, 170, 77, .16)) !important;
}

.ldg1__room [data-index="0"] .ldg1__play-trigger,
.ldg1__room [data-index="1"] .ldg1__play-trigger,
.ldg1__room [data-index="2"] .ldg1__play-trigger,
.ldg1__room [data-index="3"] .ldg1__play-trigger,
.ldg1__room [data-index="4"] .ldg1__play-trigger,
.ldg1__room [data-index="5"] .ldg1__play-trigger {
	left: 50% !important;
}

.ldg1__play-trigger-fx {
	position: absolute !important;
	inset: 2% 1.5% 3% !important;
	border-radius: 1.1em !important;
	background: radial-gradient(circle at 72% 42%, rgba(155, 255, 170, .12), transparent 30%), radial-gradient(circle at 24% 52%, rgba(212, 165, 77, .22), transparent 28%) !important;
	opacity: .9 !important;
	transform: none !important;
}

.ldg1__play-trigger-img,
.ldg1__exhibit:hover .ldg1__play-trigger-img,
.ldg1__exhibit:focus-visible .ldg1__play-trigger-img,
.ldg1__exhibit:active .ldg1__play-trigger-img,
.ldg1__exhibit.is-current .ldg1__play-trigger-img,
.ldg1__mobile-exhibit:hover .ldg1__play-trigger-img,
.ldg1__mobile-exhibit:focus-visible .ldg1__play-trigger-img,
.ldg1__mobile-exhibit:active .ldg1__play-trigger-img,
.ldg1__mobile-exhibit.is-current .ldg1__play-trigger-img {
	position: relative !important;
	width: 100% !important;
	height: auto !important;
	display: block !important;
	transform: none !important;
	opacity: 1 !important;
	filter: none !important;
}

.ldg1__play-panel-screen {
	position: absolute !important;
	left: 39.2% !important;
	top: 17.5% !important;
	width: 48.8% !important;
	height: 60.2% !important;
	padding: 4.2% 5.2% !important;
	border-radius: .45em !important;
	background: linear-gradient(180deg, #dfe4de 0%, #cfd4ce 46%, #bfc4be 100%) !important;
	box-shadow: inset 0 0 0 1px rgba(14,14,14,.55), inset 0 0 0 3px rgba(78, 101, 79, .22), inset 0 0 18px rgba(0,0,0,.11), 0 0 12px rgba(120, 255, 140, .08) !important;
	overflow: hidden !important;
	cursor: zoom-in !important;
	pointer-events: auto !important;
}

.ldg1__play-panel-screen::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 1px, rgba(0,0,0,.025) 1px 3px);
	mix-blend-mode: multiply;
	pointer-events: none;
}

.ldg1__play-panel-screen-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .16em;
	width: 100%;
	height: 100%;
	font-family: "Courier New", Courier, monospace;
	font-weight: 700;
	letter-spacing: .015em;
	color: #181c18;
	text-align: left;
}

.ldg1__play-panel-lcd-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .4em;
	font-size: clamp(3px, .48vw, 8px);
	text-transform: uppercase;
	white-space: nowrap;
}

.ldg1__play-panel-lcd-status,
.ldg1__play-panel-lcd-tag,
.ldg1__play-panel-lcd-title,
.ldg1__play-panel-lcd-mix,
.ldg1__play-panel-lcd-meta {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ldg1__play-panel-lcd-title {
	font-size: clamp(6px, .88vw, 15px);
	line-height: 1.05;
	margin-top: .08em;
}

.ldg1__play-panel-lcd-mix {
	font-size: clamp(4px, .62vw, 10px);
	line-height: 1.1;
}

.ldg1__play-panel-lcd-meta {
	margin-top: auto;
	font-size: clamp(3.6px, .55vw, 9px);
	line-height: 1;
}

.ldg1__exhibit.is-current .ldg1__play-panel-screen,
.ldg1__mobile-exhibit.is-current .ldg1__play-panel-screen,
.ldg1__exhibit:hover .ldg1__play-panel-screen {
	box-shadow: inset 0 0 0 1px rgba(14,14,14,.62), inset 0 0 0 3px rgba(78, 101, 79, .24), inset 0 0 24px rgba(0,0,0,.14), 0 0 14px rgba(182, 231, 189, .22) !important;
}

.ldg1__lcd-layer {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(18px, 3vw, 38px);
}

.ldg1__lcd-backdrop {
	position: absolute;
	inset: 0;
	border: 0;
	background: rgba(5, 7, 8, .74);
	backdrop-filter: blur(8px);
	cursor: pointer;
}

.ldg1__lcd-dialog {
	position: relative;
	width: min(980px, 92vw);
	max-width: 980px;
	z-index: 1;
	outline: none;
}

.ldg1__lcd-close {
	position: absolute;
	right: 0;
	top: -2.4rem;
	border: 1px solid rgba(212, 170, 77, .48);
	background: rgba(12, 14, 15, .92);
	color: #d9dbc9;
	padding: .52rem .82rem;
	border-radius: .65rem;
	font: 700 12px/1 "Courier New", monospace;
	letter-spacing: .18em;
	cursor: pointer;
}

.ldg1__lcd-device {
	position: relative;
	filter: drop-shadow(0 18px 30px rgba(0,0,0,.45)) drop-shadow(0 0 28px rgba(214,170,77,.14));
}

.ldg1__lcd-device-img {
	display: block;
	width: 100%;
	height: auto;
}

.ldg1__lcd-screen-viewport {
	position: absolute;
	left: 39.2%;
	top: 17.5%;
	width: 48.8%;
	height: 60.2%;
	border-radius: .9rem;
	overflow: hidden;
	background: linear-gradient(180deg, #dfe4de 0%, #cfd4ce 46%, #bfc4be 100%);
	box-shadow: inset 0 0 0 2px rgba(15,15,15,.58), inset 0 0 0 7px rgba(78, 101, 79, .2), inset 0 0 34px rgba(0,0,0,.13);
}

.ldg1__lcd-screen-viewport::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 2px, rgba(0,0,0,.025) 2px 5px);
	mix-blend-mode: multiply;
	pointer-events: none;
}

.ldg1__lcd-screen-scroll {
	position: absolute;
	inset: 0;
	overflow: auto;
	padding: clamp(16px, 2vw, 26px);
	font-family: "Courier New", Courier, monospace;
	color: #181c18;
	outline: none;
}

.ldg1__lcd-screen-topline,
.ldg1__lcd-screen-meta-row,
.ldg1__lcd-screen-footer {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: clamp(11px, 1.3vw, 20px);
	text-transform: uppercase;
	white-space: nowrap;
}

.ldg1__lcd-screen-head h3 {
	margin: .28em 0 .16em;
	font: 700 clamp(32px, 4.4vw, 66px)/1 "Courier New", monospace;
	letter-spacing: .025em;
}

.ldg1__lcd-screen-mix {
	margin: 0 0 .45em;
	font-size: clamp(18px, 2.1vw, 36px);
}

.ldg1__lcd-screen-rule {
	height: 2px;
	background: rgba(20, 24, 20, .84);
	margin: .8rem 0 1rem;
}

.ldg1__lcd-screen-body p {
	margin: 0 0 1em;
	font-size: clamp(14px, 1.55vw, 25px);
	line-height: 1.45;
}

.ldg1__lcd-screen-footer {
	margin-top: 1.2rem;
	padding-top: .9rem;
	border-top: 2px solid rgba(20, 24, 20, .68);
	font-size: clamp(12px, 1.25vw, 19px);
}

.ldg1.is-lcd-open .ldg1__viewport {
	pointer-events: none;
}

.ldg1.is-lcd-open .ldg1__hud,
.ldg1.is-lcd-open .ld-audio-console-shell,
.ldg1.is-lcd-open .ld-audio-blackhole-tab,
.ldg1.is-lcd-open .ldg1__selection,
.ldg1.is-lcd-open .ldg1__instruction {
	opacity: .25;
	pointer-events: none;
}

@media (max-width: 980px) {
	.ldg1__room .ldg1__play-trigger,
	.ldg1__play-trigger {
		width: 46% !important;
		top: calc(100% + 2.1%) !important;
	}
	.ldg1__lcd-dialog {
		width: min(92vw, 860px);
	}
}

@media (max-width: 768px) {
	.ldg1__room .ldg1__play-trigger,
	.ldg1__play-trigger {
		width: 34vw !important;
		max-width: 210px !important;
		min-width: 114px !important;
		top: calc(100% + 12px) !important;
	}
	.ldg1__play-panel-screen {
		padding: 5% 5.8% !important;
	}
	.ldg1__lcd-layer {
		padding: 14px;
	}
	.ldg1__lcd-close {
		top: -2.1rem;
		font-size: 11px;
		letter-spacing: .12em;
	}
	.ldg1__lcd-dialog {
		width: 96vw;
	}
	.ldg1__lcd-screen-scroll {
		padding: 12px;
	}
	.ldg1__lcd-screen-head h3 {
		font-size: clamp(22px, 6vw, 32px);
	}
	.ldg1__lcd-screen-mix {
		font-size: clamp(14px, 3.8vw, 20px);
	}
	.ldg1__lcd-screen-topline,
	.ldg1__lcd-screen-meta-row,
	.ldg1__lcd-screen-footer {
		font-size: clamp(10px, 2.6vw, 14px);
	}
	.ldg1__lcd-screen-body p {
		font-size: clamp(12px, 3vw, 15px);
	}
}


/* =========================================================
   V77 — LCD LAYER INITIAL-STATE AND CLOSE REPAIR

   V76 set .ldg1__lcd-layer to display:flex, which overrode the browser's
   native [hidden] rule. The layer therefore appeared on page load while
   still carrying inert, making it visible but impossible to close.
   ========================================================= */

.ldg1__lcd-layer[hidden],
.ldg1__lcd-layer[aria-hidden="true"] {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.ldg1__lcd-layer:not([hidden])[aria-hidden="false"] {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

.ldg1__lcd-layer:not([hidden]) .ldg1__lcd-backdrop,
.ldg1__lcd-layer:not([hidden]) .ldg1__lcd-dialog,
.ldg1__lcd-layer:not([hidden]) .ldg1__lcd-close,
.ldg1__lcd-layer:not([hidden]) .ldg1__lcd-screen-scroll {
	pointer-events: auto !important;
}


/* =========================================================
   V78 — PLAY PANEL SCALE, LCD CLARITY, AND INTERNAL CLOSE CONTROL
   ========================================================= */

/* Hard guarantee: the zoomed LCD panel must stay hidden until explicitly opened. */
.ldg1__lcd-layer[hidden] {
	display: none !important;
}

.ldg1__lcd-layer:not([hidden]) {
	display: flex !important;
}

/* Remove the old glow / atmospheric effect behind the new play panel. */
.ldg1__play-trigger-fx,
.ldg1__play-spark,
.ldg1__play-trigger::before,
.ldg1__play-trigger::after {
	display: none !important;
	content: none !important;
	background: none !important;
	box-shadow: none !important;
	filter: none !important;
}

/* Match the new panel more closely to the user grid references. */
.ldg1__room .ldg1__play-trigger,
.ldg1__play-trigger {
	left: 50% !important;
	top: calc(100% + 1.65%) !important;
	width: 44.6% !important;
	height: auto !important;
	aspect-ratio: 1024 / 358 !important;
	transform: translateX(-50%) !important;
	z-index: 16 !important;
	pointer-events: auto !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .32)) !important;
}

@media (max-width: 980px) {
	.ldg1__room .ldg1__play-trigger,
	.ldg1__play-trigger {
		width: 45.2% !important;
		top: calc(100% + 1.5%) !important;
	}
}

@media (max-width: 768px) {
	.ldg1__room .ldg1__play-trigger,
	.ldg1__play-trigger {
		width: 34vw !important;
		max-width: 226px !important;
		min-width: 122px !important;
		top: calc(100% + 10px) !important;
	}
}

.ldg1__play-trigger-img,
.ldg1__exhibit:hover .ldg1__play-trigger-img,
.ldg1__exhibit:focus-visible .ldg1__play-trigger-img,
.ldg1__exhibit:active .ldg1__play-trigger-img,
.ldg1__exhibit.is-current .ldg1__play-trigger-img,
.ldg1__mobile-exhibit:hover .ldg1__play-trigger-img,
.ldg1__mobile-exhibit:focus-visible .ldg1__play-trigger-img,
.ldg1__mobile-exhibit:active .ldg1__play-trigger-img,
.ldg1__mobile-exhibit.is-current .ldg1__play-trigger-img {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	transform: none !important;
	opacity: 1 !important;
	filter: none !important;
	image-rendering: auto !important;
}

/* On-panel LCD preview: crisp, no blur, no green-glow look. */
.ldg1__play-panel-screen {
	position: absolute !important;
	left: 39.05% !important;
	top: 18.1% !important;
	width: 48.9% !important;
	height: 58.7% !important;
	padding: 3.25% 4.5% 3.7% !important;
	border-radius: .42em !important;
	background: linear-gradient(180deg, #e1e3dd 0%, #d7d9d2 48%, #c9cbc6 100%) !important;
	box-shadow: inset 0 0 0 1px rgba(30, 31, 31, .58), inset 0 0 0 2px rgba(128, 133, 127, .22) !important;
	overflow: hidden !important;
	cursor: zoom-in !important;
	pointer-events: auto !important;
	backdrop-filter: none !important;
	filter: none !important;
}

.ldg1__play-panel-screen::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	background: repeating-linear-gradient(180deg, rgba(255,255,255,.022) 0 1px, rgba(0,0,0,.018) 1px 3px) !important;
	pointer-events: none !important;
	mix-blend-mode: multiply !important;
}

.ldg1__play-panel-screen-inner {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	gap: .12em !important;
	width: 100% !important;
	height: 100% !important;
	font-family: "Courier New", Courier, monospace !important;
	font-weight: 400 !important;
	letter-spacing: .01em !important;
	color: #171a17 !important;
	text-align: left !important;
	text-shadow: none !important;
	transform: translateZ(0) !important;
}

.ldg1__play-panel-lcd-top {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: .35em !important;
	font-size: clamp(3.6px, .52vw, 8px) !important;
	line-height: 1.05 !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
}

.ldg1__play-panel-lcd-status,
.ldg1__play-panel-lcd-tag,
.ldg1__play-panel-lcd-title,
.ldg1__play-panel-lcd-mix,
.ldg1__play-panel-lcd-meta {
	display: block !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	text-shadow: none !important;
}

.ldg1__play-panel-lcd-title {
	font-size: clamp(7px, .98vw, 14px) !important;
	font-weight: 700 !important;
	line-height: .98 !important;
	margin-top: .18em !important;
}

.ldg1__play-panel-lcd-mix {
	font-size: clamp(4.9px, .68vw, 10px) !important;
	line-height: 1.04 !important;
	margin-top: .04em !important;
}

.ldg1__play-panel-lcd-meta {
	margin-top: auto !important;
	font-size: clamp(4px, .58vw, 8px) !important;
	line-height: 1 !important;
}

.ldg1__exhibit.is-current .ldg1__play-panel-screen,
.ldg1__mobile-exhibit.is-current .ldg1__play-panel-screen,
.ldg1__exhibit:hover .ldg1__play-panel-screen {
	box-shadow: inset 0 0 0 1px rgba(30, 31, 31, .6), inset 0 0 0 2px rgba(128, 133, 127, .28) !important;
}

/* Zoomed panel: no backdrop blur, tighter scale, close control inside top-right of the panel. */
.ldg1__lcd-layer {
	position: fixed !important;
	inset: 0 !important;
	z-index: 120 !important;
	align-items: center !important;
	justify-content: center !important;
	padding: clamp(18px, 3vw, 34px) !important;
}

.ldg1__lcd-backdrop {
	position: absolute !important;
	inset: 0 !important;
	border: 0 !important;
	background: rgba(5, 7, 8, .72) !important;
	backdrop-filter: none !important;
	cursor: pointer !important;
}

.ldg1__lcd-dialog {
	position: relative !important;
	width: min(760px, 82vw) !important;
	max-width: 760px !important;
	z-index: 1 !important;
	outline: none !important;
}

@media (max-width: 768px) {
	.ldg1__lcd-dialog {
		width: min(94vw, 620px) !important;
	}
}

.ldg1__lcd-device {
	position: relative !important;
	filter: drop-shadow(0 14px 26px rgba(0,0,0,.42)) !important;
}

.ldg1__lcd-device-img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
}

.ldg1__lcd-close {
	position: absolute !important;
	right: 3.2% !important;
	top: 8% !important;
	z-index: 5 !important;
	border: 1px solid rgba(204, 172, 92, .4) !important;
	background: rgba(13, 14, 15, .78) !important;
	color: #e8e2d1 !important;
	padding: .44rem .72rem !important;
	border-radius: .55rem !important;
	font: 700 clamp(10px, 1vw, 12px)/1 "Courier New", monospace !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset !important;
	transition: box-shadow .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease !important;
}

.ldg1__lcd-close:hover,
.ldg1__lcd-close:focus-visible,
.ldg1__lcd-close:active {
	background: rgba(255, 255, 255, .15) !important;
	border-color: rgba(255,255,255,.58) !important;
	color: #fff9ef !important;
	box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 0 16px rgba(255,255,255,.20) !important;
	outline: none !important;
	transform: translateY(-1px) !important;
}

.ldg1__lcd-screen-viewport {
	position: absolute !important;
	left: 39.05% !important;
	top: 18.1% !important;
	width: 48.9% !important;
	height: 58.7% !important;
	border-radius: .72rem !important;
	overflow: hidden !important;
	background: linear-gradient(180deg, #e1e3dd 0%, #d7d9d2 48%, #c9cbc6 100%) !important;
	box-shadow: inset 0 0 0 2px rgba(26, 27, 28, .64), inset 0 0 0 6px rgba(123, 129, 123, .18) !important;
}

.ldg1__lcd-screen-viewport::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	background: repeating-linear-gradient(180deg, rgba(255,255,255,.026) 0 2px, rgba(0,0,0,.018) 2px 5px) !important;
	pointer-events: none !important;
	mix-blend-mode: multiply !important;
}

.ldg1__lcd-screen-scroll {
	position: absolute !important;
	inset: 0 !important;
	overflow: auto !important;
	padding: clamp(16px, 2vw, 24px) !important;
	font-family: "Courier New", Courier, monospace !important;
	color: #191c19 !important;
	background: transparent !important;
	outline: none !important;
}

.ldg1__lcd-screen-topline,
.ldg1__lcd-screen-meta-row,
.ldg1__lcd-screen-footer {
	display: flex !important;
	justify-content: space-between !important;
	gap: 1rem !important;
	font-size: clamp(9px, 1vw, 16px) !important;
	line-height: 1.05 !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
}

.ldg1__lcd-screen-head h3 {
	margin: .28em 0 .12em !important;
	font: 700 clamp(24px, 4vw, 54px)/.98 "Courier New", monospace !important;
	letter-spacing: .01em !important;
	color: #121512 !important;
}

.ldg1__lcd-screen-mix {
	margin: 0 0 .42em !important;
	font-size: clamp(16px, 1.9vw, 31px) !important;
	line-height: 1.08 !important;
	color: #2b2f2b !important;
}

.ldg1__lcd-screen-rule {
	height: 2px !important;
	background: rgba(23, 26, 23, .86) !important;
	margin: .7rem 0 .85rem !important;
}

.ldg1__lcd-screen-body p {
	margin: 0 0 .9em !important;
	font-size: clamp(12px, 1.35vw, 21px) !important;
	line-height: 1.42 !important;
	color: #1f231f !important;
}

.ldg1__lcd-screen-footer {
	margin-top: 1rem !important;
	padding-top: .8rem !important;
	border-top: 2px solid rgba(23, 26, 23, .68) !important;
	font-size: clamp(10px, 1vw, 15px) !important;
}


/* =========================================================
   V79 — EXACT FRAME-CONTROL GEOMETRY, SHARP LCD, LARGER PANEL

   FRAME-Control.webp natural dimensions: 1000 × 318.
   Its transparent inner screen opening is:
   X 348–939 / Y 61–273 on the source image.

   Exact percentage geometry used for both the resting and enlarged panels:
   left: 34.8%; top: 19.18239%; width: 59.2%; height: 66.98113%.
   The LCD is painted behind the WebP, so the transparent opening itself is
   the final clipping mask and none of the LCD can cover the metal bezel.
   ========================================================= */

:root {
	--ldg1-frame-control-ratio: 1000 / 318;
	--ldg1-frame-control-screen-left: 34.8%;
	--ldg1-frame-control-screen-top: 19.18239%;
	--ldg1-frame-control-screen-width: 59.2%;
	--ldg1-frame-control-screen-height: 66.98113%;
}

/* Larger resting panel, based on the green-dot reference widths rather than
   the earlier undersized 44–45% implementation. */
.ldg1__room .ldg1__play-trigger,
.ldg1__play-trigger {
	position: absolute !important;
	left: 50% !important;
	top: calc(100% + 1.5%) !important;
	width: 82% !important;
	height: auto !important;
	aspect-ratio: var(--ldg1-frame-control-ratio) !important;
	transform: translateX(-50%) !important;
	transform-origin: 50% 0 !important;
	z-index: 22 !important;
	isolation: isolate !important;
	overflow: visible !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	filter: none !important;
	backdrop-filter: none !important;
}

/* Frame 1 and Frame 3 have exact outer-frame coordinates and need slightly
   different panel-to-frame ratios to match the user's panel width marks. */
.ldg1__room [data-index="0"] .ldg1__play-trigger {
	width: 79.25% !important;
}

.ldg1__room [data-index="2"] .ldg1__play-trigger {
	width: 85.5% !important;
}

@media (max-width: 980px) {
	.ldg1__room .ldg1__play-trigger,
	.ldg1__play-trigger {
		width: 82% !important;
		top: calc(100% + 1.35%) !important;
	}

	.ldg1__room [data-index="0"] .ldg1__play-trigger {
		width: 79.25% !important;
	}

	.ldg1__room [data-index="2"] .ldg1__play-trigger {
		width: 85.5% !important;
	}
}

@media (max-width: 768px) {
	.ldg1__room .ldg1__play-trigger,
	.ldg1__play-trigger {
		width: min(82%, 270px) !important;
		max-width: none !important;
		min-width: 150px !important;
		top: calc(100% + 9px) !important;
	}
}

/* Eliminate all legacy lighting behind the play panel. */
.ldg1__play-trigger-fx,
.ldg1__play-spark,
.ldg1__play-trigger::before,
.ldg1__play-trigger::after {
	display: none !important;
	content: none !important;
	opacity: 0 !important;
	background: none !important;
	box-shadow: none !important;
	filter: none !important;
}

/* The source WebP is the visible top layer and therefore provides the exact
   transparent-window mask for the LCD underneath it. */
.ldg1__play-trigger-img,
.ldg1__exhibit:hover .ldg1__play-trigger-img,
.ldg1__exhibit:focus-visible .ldg1__play-trigger-img,
.ldg1__exhibit:active .ldg1__play-trigger-img,
.ldg1__exhibit.is-current .ldg1__play-trigger-img,
.ldg1__exhibit.is-neon-starting .ldg1__play-trigger-img,
.ldg1__exhibit.is-neon-engaged .ldg1__play-trigger-img,
.ldg1__mobile-exhibit:hover .ldg1__play-trigger-img,
.ldg1__mobile-exhibit:focus-visible .ldg1__play-trigger-img,
.ldg1__mobile-exhibit:active .ldg1__play-trigger-img,
.ldg1__mobile-exhibit.is-current .ldg1__play-trigger-img {
	position: relative !important;
	z-index: 3 !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: var(--ldg1-frame-control-ratio) !important;
	object-fit: contain !important;
	transform: none !important;
	opacity: 1 !important;
	filter: none !important;
	image-rendering: auto !important;
	backface-visibility: hidden !important;
}

/* Exact source-image LCD opening. The layer is below the WebP and cannot
   spill over the metal frame, buttons or bezel. */
.ldg1__play-panel-screen {
	position: absolute !important;
	z-index: 2 !important;
	left: var(--ldg1-frame-control-screen-left) !important;
	top: var(--ldg1-frame-control-screen-top) !important;
	width: var(--ldg1-frame-control-screen-width) !important;
	height: var(--ldg1-frame-control-screen-height) !important;
	box-sizing: border-box !important;
	padding: 4.6% 5.4% 4.8% !important;
	border: 0 !important;
	border-radius: 1.35% / 4.8% !important;
	background: linear-gradient(180deg, #e4e6e0 0%, #d9dcd5 47%, #cdd0ca 100%) !important;
	box-shadow: none !important;
	overflow: hidden !important;
	cursor: zoom-in !important;
	pointer-events: auto !important;
	filter: none !important;
	backdrop-filter: none !important;
	transform: none !important;
}

.ldg1__play-panel-screen::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	background: repeating-linear-gradient(
		180deg,
		rgba(255,255,255,.018) 0 1px,
		rgba(0,0,0,.014) 1px 3px
	) !important;
	mix-blend-mode: multiply !important;
	pointer-events: none !important;
}

.ldg1__play-panel-screen-inner {
	position: relative !important;
	z-index: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: .08em !important;
	width: 100% !important;
	height: 100% !important;
	font-family: "Courier New", Courier, monospace !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	color: #171a17 !important;
	text-align: left !important;
	text-shadow: none !important;
	filter: none !important;
	transform: none !important;
}

.ldg1__play-panel-lcd-top {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: .3em !important;
	font-size: clamp(4px, .53vw, 8px) !important;
	line-height: 1 !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
}

.ldg1__play-panel-lcd-status,
.ldg1__play-panel-lcd-tag,
.ldg1__play-panel-lcd-title,
.ldg1__play-panel-lcd-mix,
.ldg1__play-panel-lcd-meta {
	display: block !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	text-shadow: none !important;
}

.ldg1__play-panel-lcd-title {
	font-size: clamp(7px, 1vw, 15px) !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	margin-top: .16em !important;
}

.ldg1__play-panel-lcd-mix {
	font-size: clamp(5px, .7vw, 10px) !important;
	line-height: 1 !important;
	margin-top: .02em !important;
}

.ldg1__play-panel-lcd-meta {
	margin-top: auto !important;
	font-size: clamp(4px, .58vw, 9px) !important;
	line-height: 1 !important;
}

/* Reduce the frame lighting only towards the bottom edge so it no longer
   washes over the play panel. The upper and side illumination is retained. */
.ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__exhibit:hover .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__exhibit:hover .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__exhibit.is-neon-starting .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__exhibit.is-neon-starting .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__exhibit.is-neon-engaged .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__exhibit.is-neon-engaged .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__mobile-exhibit .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__mobile-exhibit .ldg1__artwork-shell.has-gallery-frame::after {
	-webkit-mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 68%,
		rgba(0,0,0,.82) 77%,
		rgba(0,0,0,.36) 89%,
		transparent 100%
	) !important;
	mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 68%,
		rgba(0,0,0,.82) 77%,
		rgba(0,0,0,.36) 89%,
		transparent 100%
	) !important;
}

/* The zoomed panel uses exactly the same image geometry and stacking order. */
.ldg1__lcd-dialog {
	position: relative !important;
	width: min(900px, 88vw) !important;
	max-width: 900px !important;
	aspect-ratio: var(--ldg1-frame-control-ratio) !important;
	z-index: 1 !important;
	outline: none !important;
}

.ldg1__lcd-device {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: var(--ldg1-frame-control-ratio) !important;
	isolation: isolate !important;
	filter: none !important;
}

.ldg1__lcd-device-img {
	position: relative !important;
	z-index: 3 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: var(--ldg1-frame-control-ratio) !important;
	object-fit: contain !important;
	filter: none !important;
	image-rendering: auto !important;
	backface-visibility: hidden !important;
}

.ldg1__lcd-screen-viewport {
	position: absolute !important;
	z-index: 2 !important;
	left: var(--ldg1-frame-control-screen-left) !important;
	top: var(--ldg1-frame-control-screen-top) !important;
	width: var(--ldg1-frame-control-screen-width) !important;
	height: var(--ldg1-frame-control-screen-height) !important;
	box-sizing: border-box !important;
	border: 0 !important;
	border-radius: 1.35% / 4.8% !important;
	overflow: hidden !important;
	background: linear-gradient(180deg, #e4e6e0 0%, #d9dcd5 47%, #cdd0ca 100%) !important;
	box-shadow: none !important;
	filter: none !important;
}

.ldg1__lcd-screen-viewport::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	background: repeating-linear-gradient(
		180deg,
		rgba(255,255,255,.018) 0 2px,
		rgba(0,0,0,.014) 2px 5px
	) !important;
	mix-blend-mode: multiply !important;
	pointer-events: none !important;
}

.ldg1__lcd-screen-scroll {
	position: absolute !important;
	z-index: 1 !important;
	inset: 0 !important;
	overflow: auto !important;
	box-sizing: border-box !important;
	padding: clamp(14px, 2vw, 25px) !important;
	font-family: "Courier New", Courier, monospace !important;
	color: #191c19 !important;
	background: transparent !important;
	outline: none !important;
	filter: none !important;
}

/* Close control sits on the metal top-right of the control panel rather than
   floating outside or tinting green. */
.ldg1__lcd-close {
	position: absolute !important;
	z-index: 5 !important;
	right: 2.1% !important;
	top: 2.8% !important;
	border: 1px solid rgba(198, 166, 84, .5) !important;
	background: rgba(12, 13, 14, .88) !important;
	color: #e9e3d2 !important;
	padding: .42rem .68rem !important;
	border-radius: .48rem !important;
	font: 700 clamp(9px, .9vw, 12px)/1 "Courier New", monospace !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.035) !important;
	filter: none !important;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease !important;
}

.ldg1__lcd-close:hover,
.ldg1__lcd-close:focus-visible,
.ldg1__lcd-close:active {
	background: rgba(255,255,255,.17) !important;
	border-color: rgba(255,245,211,.9) !important;
	color: #fffdf5 !important;
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,.22),
		0 0 9px rgba(255,249,226,.48),
		0 0 19px rgba(226,190,95,.28) !important;
	outline: none !important;
	transform: translateY(-1px) !important;
}

@media (max-width: 768px) {
	.ldg1__lcd-dialog {
		width: 96vw !important;
		max-width: 96vw !important;
	}

	.ldg1__lcd-close {
		right: 2% !important;
		top: 2.2% !important;
		padding: .34rem .48rem !important;
		font-size: 9px !important;
		letter-spacing: .08em !important;
	}

	.ldg1__lcd-screen-scroll {
		padding: 11px !important;
	}
}


/* =========================================================
   V80 — RESTORE LCD PANEL SCROLLING

   FRAME-Control.webp must remain visually above the LCD content so its
   transparent opening acts as the bezel/mask. The image element previously
   intercepted all pointer and wheel input over that opening. V80 leaves the
   visual stacking intact but makes the metal image input-transparent, then
   gives the LCD viewport full wheel, touch and keyboard scrolling ownership.
   ========================================================= */

.ldg1__lcd-device-img {
	pointer-events: none !important;
	user-select: none !important;
	-webkit-user-drag: none !important;
}

.ldg1__lcd-screen-viewport {
	pointer-events: auto !important;
	touch-action: pan-y !important;
	overscroll-behavior: contain !important;
}

.ldg1__lcd-screen-scroll {
	pointer-events: auto !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	touch-action: pan-y !important;
	overscroll-behavior-y: contain !important;
	-webkit-overflow-scrolling: touch !important;
	scroll-behavior: auto !important;
	scrollbar-gutter: stable !important;
	cursor: ns-resize !important;
}

.ldg1__lcd-screen-scroll:focus-visible {
	outline: 1px solid rgba(50, 54, 50, .42) !important;
	outline-offset: -3px !important;
}

.ldg1__lcd-screen-scroll::-webkit-scrollbar {
	width: 10px !important;
}

.ldg1__lcd-screen-scroll::-webkit-scrollbar-track {
	background: rgba(34, 38, 34, .09) !important;
}

.ldg1__lcd-screen-scroll::-webkit-scrollbar-thumb {
	background: rgba(38, 43, 38, .48) !important;
	border: 2px solid rgba(220, 223, 216, .72) !important;
	border-radius: 999px !important;
}

.ldg1__lcd-screen-scroll {
	scrollbar-width: thin !important;
	scrollbar-color: rgba(38, 43, 38, .48) rgba(34, 38, 34, .09) !important;
}


/* =========================================================
   V81 — FRAME-CONTROL-SMALL, EXACT FIRST-FRAME POSITION,
   AND FOCUS-ONLY LCD POPUP HOTSPOT

   Source image:
   FRAME-Control-Small.webp = 500 × 159 pixels (same ratio as 1000 × 318).

   User green-dot centres on the exact 2048 × 878 Gallery-1 room grid:
   bottom-left  X 348.429319 / Y 601.832461
   bottom-right X 480.740464 / Y 601.832461
   width        132.311144
   natural height from 500:159 ratio = 42.074944
   top          Y 559.757517

   Relative to the exact V65 Frame 1 canvas:
   centre X     50.074156%
   top          106.075613%
   width        45.521099%
   height       follows the source image ratio

   The visible LCD artwork is now part of FRAME-Control-Small.webp itself.
   No separate live LCD text layer is painted on the gallery wall. The retained
   screen element is an invisible hotspot that receives pointer input only when
   the viewer is fully focused on that exact exhibit.
   ========================================================= */

:root {
	--ldg1-frame-control-small-ratio: 500 / 159;
	--ldg1-frame-control-small-width: 45.521099%;
	--ldg1-frame-control-small-top: 106.075613%;
}

/* Remove every historical glow, spark, blur and generated layer behind the
   under-frame control. Only the source WebP is visible on the wall. */
.ldg1__play-trigger-fx,
.ldg1__play-spark,
.ldg1__play-trigger::before,
.ldg1__play-trigger::after {
	display: none !important;
	content: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	background: none !important;
	box-shadow: none !important;
	filter: none !important;
}

/* One consistent relative geometry under every frame. For Frame 1 these
   values reproduce the supplied green-dot position precisely. */
.ldg1__room .ldg1__play-trigger,
.ldg1__play-trigger,
.ldg1__room [data-index="0"] .ldg1__play-trigger,
.ldg1__room [data-index="1"] .ldg1__play-trigger,
.ldg1__room [data-index="2"] .ldg1__play-trigger,
.ldg1__room [data-index="3"] .ldg1__play-trigger,
.ldg1__room [data-index="4"] .ldg1__play-trigger,
.ldg1__room [data-index="5"] .ldg1__play-trigger {
	position: absolute !important;
	left: 50.074156% !important;
	right: auto !important;
	top: var(--ldg1-frame-control-small-top) !important;
	bottom: auto !important;
	width: var(--ldg1-frame-control-small-width) !important;
	height: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	aspect-ratio: var(--ldg1-frame-control-small-ratio) !important;
	transform: translateX(-50%) !important;
	transform-origin: 50% 0 !important;
	z-index: 22 !important;
	isolation: isolate !important;
	overflow: visible !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	filter: none !important;
	backdrop-filter: none !important;
	pointer-events: auto !important;
}

.ldg1__play-trigger-img,
.ldg1__exhibit:hover .ldg1__play-trigger-img,
.ldg1__exhibit:focus-visible .ldg1__play-trigger-img,
.ldg1__exhibit:active .ldg1__play-trigger-img,
.ldg1__exhibit.is-current .ldg1__play-trigger-img,
.ldg1__exhibit.is-neon-starting .ldg1__play-trigger-img,
.ldg1__exhibit.is-neon-engaged .ldg1__play-trigger-img,
.ldg1__mobile-exhibit:hover .ldg1__play-trigger-img,
.ldg1__mobile-exhibit:focus-visible .ldg1__play-trigger-img,
.ldg1__mobile-exhibit:active .ldg1__play-trigger-img,
.ldg1__mobile-exhibit.is-current .ldg1__play-trigger-img {
	position: relative !important;
	z-index: 3 !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	aspect-ratio: var(--ldg1-frame-control-small-ratio) !important;
	object-fit: contain !important;
	transform: none !important;
	opacity: 1 !important;
	filter: none !important;
	box-shadow: none !important;
	image-rendering: auto !important;
	backface-visibility: hidden !important;
	user-select: none !important;
	-webkit-user-drag: none !important;
}

/* No HTML LCD is drawn on the wall. This element is now only the invisible
   screen-area hotspot. It is deliberately non-interactive during normal
   gallery scrolling and becomes active only after the camera reaches the
   focused exhibit state. */
.ldg1__play-panel-screen {
	position: absolute !important;
	z-index: 5 !important;
	left: 34.8% !important;
	top: 19.18239% !important;
	width: 59.2% !important;
	height: 66.98113% !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 1.35% / 4.8% !important;
	background: transparent !important;
	box-shadow: none !important;
	filter: none !important;
	backdrop-filter: none !important;
	overflow: hidden !important;
	opacity: 0 !important;
	visibility: visible !important;
	cursor: pointer !important;
	pointer-events: none !important;
}

.ldg1__play-panel-screen::before,
.ldg1__play-panel-screen::after,
.ldg1__play-panel-screen-inner,
.ldg1__play-panel-lcd-top,
.ldg1__play-panel-lcd-status,
.ldg1__play-panel-lcd-tag,
.ldg1__play-panel-lcd-title,
.ldg1__play-panel-lcd-mix,
.ldg1__play-panel-lcd-meta {
	display: none !important;
	content: none !important;
}

/* Only the LCD aperture becomes a popup trigger after the exact exhibit has
   finished its walk-in and the root enters is-artwork-focused. */
.ldg1.is-artwork-focused .ldg1__exhibit.is-current .ldg1__play-panel-screen,
.ldg1.is-artwork-focused .ldg1__mobile-exhibit.is-current .ldg1__play-panel-screen {
	opacity: 1 !important;
	pointer-events: auto !important;
	cursor: zoom-in !important;
}

/* Keep the wall panel crisp during hover/current states. Do not add colour,
   blur or scaling that would soften the pre-rendered LCD artwork. */
.ldg1__exhibit:hover .ldg1__play-trigger,
.ldg1__exhibit:focus-visible .ldg1__play-trigger,
.ldg1__exhibit.is-current .ldg1__play-trigger,
.ldg1__exhibit.is-neon-engaged .ldg1__play-trigger,
.ldg1__mobile-exhibit:hover .ldg1__play-trigger,
.ldg1__mobile-exhibit:focus-visible .ldg1__play-trigger,
.ldg1__mobile-exhibit.is-current .ldg1__play-trigger {
	transform: translateX(-50%) !important;
	filter: none !important;
}

/* Continue suppressing the frame illumination towards the lower edge so it
   cannot wash out the small control panel beneath the frame. */
.ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__exhibit:hover .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__exhibit:hover .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__exhibit:focus-visible .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__exhibit.is-neon-starting .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__exhibit.is-neon-starting .ldg1__artwork-shell.has-gallery-frame::after,
.ldg1__exhibit.is-neon-engaged .ldg1__artwork-shell.has-gallery-frame::before,
.ldg1__exhibit.is-neon-engaged .ldg1__artwork-shell.has-gallery-frame::after {
	-webkit-mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 64%,
		rgba(0,0,0,.72) 75%,
		rgba(0,0,0,.22) 87%,
		transparent 98%
	) !important;
	mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 64%,
		rgba(0,0,0,.72) 75%,
		rgba(0,0,0,.22) 87%,
		transparent 98%
	) !important;
}

@media (max-width: 768px) {
	.ldg1__room .ldg1__play-trigger,
	.ldg1__play-trigger,
	.ldg1__room [data-index="0"] .ldg1__play-trigger,
	.ldg1__room [data-index="1"] .ldg1__play-trigger,
	.ldg1__room [data-index="2"] .ldg1__play-trigger,
	.ldg1__room [data-index="3"] .ldg1__play-trigger,
	.ldg1__room [data-index="4"] .ldg1__play-trigger,
	.ldg1__room [data-index="5"] .ldg1__play-trigger {
		left: 50.074156% !important;
		top: var(--ldg1-frame-control-small-top) !important;
		width: var(--ldg1-frame-control-small-width) !important;
		min-width: 0 !important;
		max-width: none !important;
	}
}


/* =========================================================
   V84 — COMPACT BOTTOM-LEFT SOCIAL TICKET
   Repairs live WordPress/theme button styling that painted the
   transparent areas green. The desktop resting size remains as
   approved; mobile is smaller. Each ticket face now flips
   independently for more reliable Safari/mobile rendering.
   ========================================================= */

.ldg1__social-ticket-layer,
.ldg1__social-ticket-layer *,
.ldg1__social-ticket-layer *::before,
.ldg1__social-ticket-layer *::after {
	box-sizing: border-box;
}

.ldg1__social-ticket-layer {
	position: fixed;
	z-index: 360;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	pointer-events: none;
	perspective: 1400px;
	isolation: isolate;
}

/*
 * Neutral click-away area. This is deliberately a DIV rather than a
 * BUTTON so WordPress/Theme button colours can never cover the viewport.
 */
.ldg1__social-ticket-backdrop {
	position: absolute;
	z-index: 0;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	filter: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	cursor: default;
	transition: visibility 0s linear 480ms;
}

.ldg1__social-ticket-backdrop::before,
.ldg1__social-ticket-backdrop::after {
	display: none !important;
	content: none !important;
}

.ldg1__social-ticket-shell {
	/* Approved desktop size. The visible amount keeps the share icon present. */
	--ldg1-social-rest-width: clamp(190px, 16vw, 260px);
	--ldg1-social-open-width: clamp(330px, 31vw, 430px);
	--ldg1-social-visible-stub: 65%;

	position: absolute;
	z-index: 2;
	left: max(0px, env(safe-area-inset-left));
	bottom: max(8px, env(safe-area-inset-bottom));
	width: var(--ldg1-social-rest-width);
	aspect-ratio: 800 / 367;
	margin: 0;
	padding: 0;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	transform: translate3d(calc(-100% + var(--ldg1-social-visible-stub)), 0, 0);
	transform-origin: 0 100%;
	pointer-events: auto;
	transition:
		width 560ms cubic-bezier(.22, .86, .24, 1),
		transform 560ms cubic-bezier(.22, .86, .24, 1),
		filter 240ms ease;
	will-change: width, transform;
	container-type: inline-size;
	container-name: ldg1-social-ticket;
}

@media (hover: hover) and (pointer: fine) {
	.ldg1__social-ticket-shell:hover,
	.ldg1__social-ticket-shell:focus-within {
		transform: translate3d(0, 0, 0);
		filter: drop-shadow(0 9px 13px rgba(0, 0, 0, .42));
	}
}

.ldg1__social-ticket-bob {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform-origin: 18% 100%;
	animation: ldg1-social-ticket-bob-v84 4.9s cubic-bezier(.45, 0, .55, 1) infinite;
	will-change: transform;
}

.ldg1__social-ticket-shell:hover .ldg1__social-ticket-bob,
.ldg1__social-ticket-shell:focus-within .ldg1__social-ticket-bob,
.ldg1__social-ticket-layer.is-open .ldg1__social-ticket-bob {
	animation-play-state: paused;
	transform: translate3d(0, 0, 0) rotate(0deg);
}

@keyframes ldg1-social-ticket-bob-v84 {
	0%,
	100% {
		transform: translate3d(0, 0, 0) rotate(0deg);
	}
	22% {
		transform: translate3d(0, -2px, 0) rotate(-.25deg);
	}
	46% {
		transform: translate3d(0, -5px, 0) rotate(.34deg);
	}
	68% {
		transform: translate3d(0, -2px, 0) rotate(-.18deg);
	}
	84% {
		transform: translate3d(0, -4px, 0) rotate(.2deg);
	}
}

.ldg1__social-ticket-card {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	perspective: 1200px;
	-webkit-perspective: 1200px;
	transform: translateZ(0);
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	will-change: transform;
}

.ldg1__social-ticket-face {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: 0;
	appearance: none !important;
	-webkit-appearance: none !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	font: inherit;
	color: inherit;
	overflow: visible;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform-origin: 0 50%;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-webkit-tap-highlight-color: transparent;
	transition:
		transform 680ms cubic-bezier(.2, .78, .18, 1),
		opacity 220ms ease,
		visibility 0s linear;
	will-change: transform, opacity;
}

/* Defeat theme hover/active/focus button paint, including pseudo-elements. */
.ldg1__social-ticket-face:hover,
.ldg1__social-ticket-face:focus,
.ldg1__social-ticket-face:focus-visible,
.ldg1__social-ticket-face:active,
.ldg1__social-ticket-close:hover,
.ldg1__social-ticket-close:focus,
.ldg1__social-ticket-close:focus-visible,
.ldg1__social-ticket-close:active {
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

.ldg1__social-ticket-face::before,
.ldg1__social-ticket-face::after,
.ldg1__social-ticket-close::before,
.ldg1__social-ticket-close::after {
	display: none !important;
	content: none !important;
	background: none !important;
}

.ldg1__social-ticket-face--front {
	z-index: 2;
	cursor: pointer;
	opacity: 1;
	visibility: visible;
	transform: rotateY(0deg) translateZ(1px);
	pointer-events: auto;
	transition-delay: 0s, 0s, 0s;
}

.ldg1__social-ticket-face--back {
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	transform: rotateY(180deg) translateZ(1px);
	pointer-events: none;
	transition-delay: 0s, 160ms, 680ms;
}

.ldg1__social-ticket-face > img,
.ldg1__social-ticket-back-image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	object-fit: contain;
	object-position: 50% 50%;
	filter:
		drop-shadow(0 9px 12px rgba(0, 0, 0, .46))
		drop-shadow(0 0 5px rgba(255, 196, 52, .14));
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

.ldg1__social-ticket-face--front:focus-visible {
	outline: 2px solid rgba(255, 231, 151, .96);
	outline-offset: 3px;
}

.ldg1__social-ticket-heading {
	position: absolute;
	z-index: 5;
	left: 20%;
	right: 20%;
	top: 14.5%;
	margin: 0;
	padding: 0;
	/* Darker antique gold creates a stamped/embossed impression on bright foil. */
	color: #8b570d;
	-webkit-text-fill-color: #8b570d;
	-webkit-text-stroke: .25px rgba(76, 35, 0, .46);
	font-family: "Cinzel", "Trajan Pro", "Palatino Linotype", "Book Antiqua", Georgia, serif;
	font-size: clamp(12px, 1.34vw, 18px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .065em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	text-shadow:
		0 -1px 0 rgba(255, 226, 139, .82),
		0 1px 0 rgba(66, 27, 0, .96),
		0 2px 2px rgba(71, 30, 0, .42),
		1px 0 0 rgba(111, 59, 5, .34),
		-1px 0 0 rgba(255, 211, 102, .22);
	filter: drop-shadow(0 1px 1px rgba(66, 29, 0, .2));
	transform: translateZ(5px);
	pointer-events: none;
}

.ldg1__social-ticket-links {
	position: absolute;
	z-index: 5;
	/* Slightly wider and taller grid area keeps larger controls inside the inset panel. */
	left: 28%;
	right: 28%;
	top: 31.5%;
	bottom: 12.5%;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	place-items: center;
	/* Compact spacing preserves a clear 2x2 layout without crowding the embossing. */
	gap: 4px 16px;
	row-gap: clamp(3px, 1.35cqw, 6px);
	column-gap: clamp(12px, 5cqw, 23px);
	margin: 0;
	padding: 0;
	background: none !important;
	transform: translateZ(5px);
}

.ldg1__social-ticket-link {
	position: relative;
	display: block;
	/* Larger than V87 for easy recognition, still governed by the ticket container. */
	width: min(100%, 52px);
	width: clamp(29px, 12cqw, 52px);
	max-width: 100%;
	aspect-ratio: 1 / 1;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: clamp(5px, .75vw, 10px);
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: 0 5px 9px rgba(0, 0, 0, .24) !important;
	overflow: visible;
	transform: translate3d(0, 0, 0) scale(1);
	transition:
		transform 180ms ease,
		filter 180ms ease;
	-webkit-tap-highlight-color: transparent;
}

.ldg1__social-ticket-link::before {
	display: none !important;
	content: none !important;
}

.ldg1__social-ticket-link::after {
	position: absolute;
	inset: 8%;
	display: block !important;
	content: "" !important;
	border-radius: inherit;
	background: none !important;
	box-shadow: 0 0 0 rgba(255, 204, 73, 0);
	pointer-events: none;
	transition: box-shadow 180ms ease;
}

.ldg1__social-ticket-link img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

.ldg1__social-ticket-link:hover,
.ldg1__social-ticket-link:focus-visible {
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	filter: brightness(1.13) saturate(1.08);
	transform: translate3d(0, -3%, 0) scale(1.07);
	outline: 0;
}

.ldg1__social-ticket-link:hover::after,
.ldg1__social-ticket-link:focus-visible::after {
	box-shadow: 0 0 13px rgba(255, 204, 73, .56);
}

.ldg1__social-ticket-link:active {
	background: none !important;
	transform: translate3d(0, 0, 0) scale(.97);
}

.ldg1__social-ticket-close {
	position: absolute;
	z-index: 6;
	top: 50%;
	right: 6.5%;
	display: block;
	width: 8.4%;
	aspect-ratio: 1 / 1;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50%;
	appearance: none !important;
	-webkit-appearance: none !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	cursor: pointer;
	transform: translate3d(0, -50%, 6px) scale(1);
	transition:
		transform 180ms ease,
		filter 180ms ease;
	-webkit-tap-highlight-color: transparent;
}

.ldg1__social-ticket-close img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

.ldg1__social-ticket-close:hover,
.ldg1__social-ticket-close:focus-visible {
	filter: brightness(1.14) saturate(1.08);
	transform: translate3d(0, -50%, 6px) scale(1.1) rotate(5deg);
	outline: 2px solid rgba(255, 231, 151, .9);
	outline-offset: 2px;
}

.ldg1__social-ticket-close:active {
	transform: translate3d(0, -50%, 6px) scale(.96);
}

.ldg1__social-ticket-layer.is-open {
	pointer-events: auto;
}

.ldg1__social-ticket-layer.is-open .ldg1__social-ticket-backdrop {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: visibility 0s linear 0s;
}

/* Open state stays attached to the lower-left and grows only modestly. */
.ldg1__social-ticket-layer.is-open .ldg1__social-ticket-shell {
	left: max(6px, env(safe-area-inset-left));
	bottom: max(8px, env(safe-area-inset-bottom));
	width: var(--ldg1-social-open-width);
	transform: translate3d(0, 0, 0);
	filter:
		drop-shadow(0 15px 20px rgba(0, 0, 0, .54))
		drop-shadow(0 0 12px rgba(255, 190, 30, .1));
}

/* Independent faces avoid the mobile/Safari blank-card failure. */
.ldg1__social-ticket-layer.is-open .ldg1__social-ticket-face--front {
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	transform: rotateY(-180deg) translateZ(1px);
	pointer-events: none;
	transition-delay: 0s, 300ms, 680ms;
}

.ldg1__social-ticket-layer.is-open .ldg1__social-ticket-face--back {
	z-index: 2;
	opacity: 1;
	visibility: visible;
	transform: rotateY(0deg) translateZ(1px);
	pointer-events: auto;
	transition-delay: 0s, 250ms, 0s;
}

/* Gallery remains fully visible; only interaction is paused behind the open ticket. */
.ldg1.is-social-ticket-open .ldg1__viewport,
.ldg1.is-social-ticket-open .ldg1__hud,
.ldg1.is-social-ticket-open .ld-audio-console-shell,
.ldg1.is-social-ticket-open .ld-audio-blackhole-tab,
.ldg1.is-social-ticket-open .ldg1__selection,
.ldg1.is-social-ticket-open .ldg1__instruction,
.ldg1.is-social-ticket-open .ldg1__page-link {
	pointer-events: none !important;
}

@media (max-width: 767px) {
	.ldg1__social-ticket-shell {
		/* Roughly 25–30% smaller than V83 on phones. */
		--ldg1-social-rest-width: clamp(118px, 35vw, 150px);
		--ldg1-social-open-width: min(82vw, 320px);
		--ldg1-social-visible-stub: 69%;
		bottom: max(6px, env(safe-area-inset-bottom));
	}

	.ldg1__social-ticket-heading {
		top: 14%;
		font-size: clamp(10px, 2.9vw, 14px);
		font-weight: 700;
		letter-spacing: .045em;
	}

	.ldg1__social-ticket-links {
		left: 27.5%;
		right: 27.5%;
		top: 31%;
		bottom: 12%;
		gap: 3px 12px;
		row-gap: clamp(3px, 1.25cqw, 5px);
		column-gap: clamp(9px, 4.5cqw, 15px);
	}

	.ldg1__social-ticket-link {
		width: min(100%, 42px);
		width: clamp(29px, 12cqw, 42px);
		border-radius: clamp(4px, 1.25vw, 8px);
	}

	.ldg1__social-ticket-close {
		right: 6.2%;
		width: 9%;
	}
}

@media (max-height: 520px) and (orientation: landscape) {
	.ldg1__social-ticket-shell {
		--ldg1-social-rest-width: clamp(120px, 17vw, 165px);
		--ldg1-social-open-width: min(52vw, 315px);
		--ldg1-social-visible-stub: 69%;
		bottom: max(5px, env(safe-area-inset-bottom));
	}
}

@media (hover: none), (pointer: coarse) {
	/* Prevent sticky mobile hover/focus from leaving the complete front exposed. */
	.ldg1__social-ticket-layer:not(.is-open) .ldg1__social-ticket-shell:hover,
	.ldg1__social-ticket-layer:not(.is-open) .ldg1__social-ticket-shell:focus-within {
		transform: translate3d(calc(-100% + var(--ldg1-social-visible-stub)), 0, 0);
		filter: none;
	}

	.ldg1__social-ticket-link:hover {
		filter: none;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1__social-ticket-bob {
		animation: none !important;
	}

	.ldg1__social-ticket-shell,
	.ldg1__social-ticket-face,
	.ldg1__social-ticket-backdrop,
	.ldg1__social-ticket-link,
	.ldg1__social-ticket-close {
		transition-duration: 1ms !important;
		transition-delay: 0s !important;
	}
}



/* =========================================================
   V88 — SOCIAL CONTROL VISIBILITY / EMBOSSED HEADING
   The four controls are enlarged enough for clear recognition while retaining
   container-relative scaling and the approved 2x2 central-panel arrangement.
   The heading uses darker antique-gold colouring, highlight and recessed shadow
   layers to read as embossed lettering against the bright foil ticket artwork.
   ========================================================= */

/* =========================================================
   V86 — NEON IGNITION SOUND / MEDIA HAND-OFF
   Keep the original still artwork visible while the selected MP4 is silently
   primed under the user's click. The video and music become active only after
   the chosen neon-bulb effect has finished.
   ========================================================= */

.ldg1__exhibit.is-neon-audio-pending .ldg1__video-slot,
.ldg1__mobile-exhibit.is-neon-audio-pending .ldg1__video-slot {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.ldg1__exhibit.is-neon-audio-pending .ldg1__inside-artwork,
.ldg1__mobile-exhibit.is-neon-audio-pending .ldg1__inside-artwork {
	opacity: 1 !important;
	visibility: visible !important;
}

.ldg1__neon-frame-audio {
	display: none !important;
}

/* =========================================================
   V142 — FRAME 2 EXACT-GRID GRAFFITI-SQUARE REPLACEMENT

   Coordinate source: the supplied 2048 × 878 Gallery One grid screenshot.
   Green-dot centres mark the new outer frame bottom corners:
   bottom-left  X 873.867192 / Y 544.330750
   bottom-right X 1175.557467 / Y 544.330750

   Graffiti-Frame-Final-1.webp is 800 × 802. Its natural ratio gives:
   top-left     X 873.867192 / Y 241.886249
   width        301.690275
   height       302.444501

   CSS lock:
   left   42.669296%
   top    27.549687%
   width  14.730970%
   height 34.446982%

   The obsolete Backing.webp layer is disabled completely. The neon pulse and
   steady backlight now use the square artwork shell itself, so every glow layer
   follows the new frame's outer dimensions on desktop, tablet and mobile.
   ========================================================= */

/* Exact outer-frame lock. Repeated interaction selectors prevent any old
   Frame 2 rules or theme button states from changing the grid geometry. */
.ldg1__room .ldg1__exhibit[data-index="1"][data-ldg1-graffiti-square-coordinate-lock-v97],
.ldg1__room .ldg1__exhibit[data-index="1"][data-ldg1-graffiti-square-coordinate-lock-v97]:hover,
.ldg1__room .ldg1__exhibit[data-index="1"][data-ldg1-graffiti-square-coordinate-lock-v97]:focus,
.ldg1__room .ldg1__exhibit[data-index="1"][data-ldg1-graffiti-square-coordinate-lock-v97]:focus-visible,
.ldg1__room .ldg1__exhibit[data-index="1"][data-ldg1-graffiti-square-coordinate-lock-v97]:active {
	left: 42.669296% !important;
	right: auto !important;
	top: 27.549687% !important;
	bottom: auto !important;
	width: 14.730970% !important;
	height: 34.446982% !important;
	aspect-ratio: 800 / 802 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	transform: none !important;
}

/* Remove the historical recess-cover pseudo-elements from Frame 2. */
.ldg1__room .ldg1__exhibit[data-index="1"][data-ldg1-graffiti-square-coordinate-lock-v97]::before,
.ldg1__room .ldg1__exhibit[data-index="1"][data-ldg1-graffiti-square-coordinate-lock-v97]::after {
	display: none !important;
	content: none !important;
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
	filter: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
}

/* The shell is the exact square frame canvas. Its own ::before and ::after
   elements remain available for the existing classic neon pulse/backlight. */
.ldg1__room [data-index="1"] .ldg1__artwork-shell--graffiti-square {
	--ldg1-frame-edge: rgba(255, 224, 137, .66);
	--ldg1-frame-glow: rgba(255, 178, 31, .56);
	--ldg1-frame-glow-soft: rgba(255, 209, 93, .24);
	position: relative !important;
	z-index: 3 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: 800 / 802 !important;
	overflow: visible !important;
	background: transparent !important;
	box-shadow: none !important;
	transform: none !important;
}

/* Make the pulsing backlight follow the new square silhouette instead of the
   former tall Chill/backing dimensions. */
.ldg1__artwork-shell--graffiti-square::before {
	inset: -7.5% !important;
	border-radius: 4% !important;
	background:
		radial-gradient(ellipse at center,
			transparent 42%,
			rgba(255, 205, 91, .20) 54%,
			rgba(255, 174, 27, .48) 68%,
			transparent 83%) !important;
	filter: blur(10px) !important;
}

.ldg1__artwork-shell--graffiti-square::after {
	inset: -1.25% !important;
	border: 0 !important;
	border-radius: 2.5% !important;
	box-shadow:
		0 0 7px rgba(255, 193, 62, .48),
		0 0 18px rgba(255, 176, 31, .24),
		inset 0 0 8px rgba(255, 235, 172, .08) !important;
}

/* Natural 800 × 802 outer-frame asset: no stretch, scale or crop. */
.ldg1__artwork-shell--graffiti-square .ldg1__artwork,
.ldg1__exhibit[data-index="1"]:hover .ldg1__artwork-shell--graffiti-square .ldg1__artwork,
.ldg1__exhibit[data-index="1"]:focus-visible .ldg1__artwork-shell--graffiti-square .ldg1__artwork,
.ldg1__exhibit[data-index="1"].is-current .ldg1__artwork-shell--graffiti-square .ldg1__artwork,
.ldg1__exhibit[data-index="1"].is-neon-starting .ldg1__artwork-shell--graffiti-square .ldg1__artwork,
.ldg1__exhibit[data-index="1"].is-neon-engaged .ldg1__artwork-shell--graffiti-square .ldg1__artwork {
	position: relative !important;
	z-index: 3 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain !important;
	object-position: 50% 50% !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	filter:
		drop-shadow(0 0 4px rgba(255, 205, 99, .28))
		drop-shadow(0 9px 17px rgba(0, 0, 0, .58)) !important;
}

/* Aperture measured directly from the transparent centre of the 800 × 802
   WebP. The square JPG and the MP4 canvas share this exact opening. */
.ldg1__artwork-shell--graffiti-square .ldg1__inside-artwork,
.ldg1__artwork-shell--graffiti-square .ldg1__video-slot {
	position: absolute !important;
	z-index: 1 !important;
	left: 17.500000% !important;
	top: 16.458853% !important;
	width: 64.750000% !important;
	height: 66.458853% !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	object-fit: cover !important;
	object-position: 50% 50% !important;
	background: #030303 !important;
	border: 0 !important;
	border-radius: 0 !important;
	transform: none !important;
	filter: none !important;
	box-shadow: inset 0 0 12px rgba(0, 0, 0, .72) !important;
}

.ldg1__artwork-shell--graffiti-square .ldg1__video-canvas {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: 50% 50% !important;
	background: #030303 !important;
}

/* Glass is clipped to the media aperture, not laid across the graffiti frame. */
.ldg1__artwork-shell--graffiti-square .ldg1__artwork-glass {
	z-index: 4 !important;
	inset: auto !important;
	left: 17.500000% !important;
	top: 16.458853% !important;
	width: 64.750000% !important;
	height: 66.458853% !important;
	border-radius: 0 !important;
	opacity: .18 !important;
}

/* The existing relative FRAME-Control-Small rule remains active. It now sits
   under the square Frame 2 geometry rather than the removed backing image. */
.ldg1__room [data-index="1"] .ldg1__play-trigger {
	z-index: 6 !important;
}

@media (max-width: 991px) {
	.ldg1__room .ldg1__exhibit[data-index="1"][data-ldg1-graffiti-square-coordinate-lock-v97] {
		left: 42.669296% !important;
		top: 27.549687% !important;
		width: 14.730970% !important;
		height: 34.446982% !important;
		aspect-ratio: 800 / 802 !important;
	}
}

@media (max-width: 767px) {
	.ldg1__room .ldg1__exhibit[data-index="1"][data-ldg1-graffiti-square-coordinate-lock-v97] {
		left: 42.669296% !important;
		top: 27.549687% !important;
		width: 14.730970% !important;
		height: 34.446982% !important;
		aspect-ratio: 800 / 802 !important;
	}
}



/* =========================================================
   V142 FINAL ACTIVATION LOCK — FRAME 2

   This block is intentionally last. It is scoped to the V142 root marker and
   therefore proves that the new PHP handler is active. It also outranks every
   historical Chill/Backing rule retained earlier in the full stylesheet.
   ========================================================= */

.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="1"],
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="1"]:hover,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="1"]:focus,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="1"]:focus-visible,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="1"]:active,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="1"].is-current,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="1"].is-neon-starting,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="1"].is-neon-engaged {
	left: 42.669296% !important;
	right: auto !important;
	top: 27.549687% !important;
	bottom: auto !important;
	width: 14.730970% !important;
	height: 34.446982% !important;
	aspect-ratio: 800 / 802 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
}

.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="1"]::before,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="1"]::after {
	display: none !important;
	content: none !important;
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
	filter: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
}

.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="1"] .ldg1__artwork-shell--graffiti-square {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: 800 / 802 !important;
	background: transparent !important;
	overflow: visible !important;
}

.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="1"] .ldg1__artwork-shell--graffiti-square .ldg1__artwork {
	position: relative !important;
	z-index: 3 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain !important;
	object-position: 50% 50% !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="1"] .ldg1__artwork-shell--graffiti-square .ldg1__inside-artwork,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="1"] .ldg1__artwork-shell--graffiti-square .ldg1__video-slot {
	position: absolute !important;
	z-index: 1 !important;
	left: 17.5% !important;
	top: 16.458853% !important;
	width: 64.75% !important;
	height: 66.458853% !important;
	object-fit: cover !important;
	object-position: 50% 50% !important;
	overflow: hidden !important;
	background: #030303 !important;
	border: 0 !important;
	border-radius: 0 !important;
	transform: none !important;
}

.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="1"] .ldg1__artwork-shell--graffiti-square .ldg1__artwork-glass {
	z-index: 4 !important;
	inset: auto !important;
	left: 17.5% !important;
	top: 16.458853% !important;
	width: 64.75% !important;
	height: 66.458853% !important;
}


/* =========================================================
   V142 — FRAME 1 REPLACED WITH NEON-FRAME-FINAL-1.WEBP
   Exact 2048 × 878 grid lock from user-supplied green dots.
   Bottom-left ≈ X260.82 / Y544.10
   Bottom-right ≈ X545.62 / Y544.10
   ========================================================= */
.ldg1 .ldg1__track--desktop > .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97],
.ldg1 .ldg1__track--desktop > .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97]:hover,
.ldg1 .ldg1__track--desktop > .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97]:focus,
.ldg1 .ldg1__track--desktop > .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97]:focus-visible,
.ldg1 .ldg1__track--desktop > .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97]:active {
	left: 12.735352% !important;
	top: 29.534624% !important;
	width: 13.906250% !important;
	height: 32.437358% !important;
}

.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97]
.ldg1__artwork-shell--neon-dance,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="0"] .ldg1__artwork-shell--neon-dance {
	width: 100% !important;
	height: 100% !important;
	transform: none !important;
}

.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97]
.ldg1__artwork-shell--neon-dance > .ldg1__artwork,
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97] .ldg1__artwork-shell--neon-dance > .ldg1__artwork,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="0"] .ldg1__artwork-shell--neon-dance .ldg1__artwork {
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: 50% 50% !important;
	transform: none !important;
}

.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97]
.ldg1__artwork-shell--neon-dance > .ldg1__inside-artwork,
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97]
.ldg1__artwork-shell--neon-dance > .ldg1__video-slot,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="0"] .ldg1__artwork-shell--neon-dance .ldg1__inside-artwork,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="0"] .ldg1__artwork-shell--neon-dance .ldg1__video-slot {
	left: 18.2% !important;
	top: 18.0% !important;
	width: 63.6% !important;
	height: 63.6% !important;
	object-fit: cover !important;
	object-position: 50% 50% !important;
	transform: scale(1.01) !important;
	transform-origin: 50% 50% !important;
}

.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="0"][data-ldg1-neon-square-coordinate-lock-v97]
.ldg1__artwork-shell--neon-dance > .ldg1__artwork-glass,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="0"] .ldg1__artwork-shell--neon-dance .ldg1__artwork-glass {
	left: 18.2% !important;
	top: 18.0% !important;
	width: 63.6% !important;
	height: 63.6% !important;
	border-radius: 2% !important;
}


/* =========================================================
   V142 — FRAME 3 REPLACED WITH LIQUID-GOLD-FINAL-1.WEBP
   Exact 2048 × 878 grid lock from user-supplied green-dot base corners.
   Bottom-left ≈ X1481.50 / Y543.80
   Bottom-right ≈ X1782.83 / Y543.80
   ========================================================= */
.ldg1 .ldg1__track--desktop > .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-liquid-gold-coordinate-lock-v97],
.ldg1 .ldg1__track--desktop > .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-liquid-gold-coordinate-lock-v97]:hover,
.ldg1 .ldg1__track--desktop > .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-liquid-gold-coordinate-lock-v97]:focus,
.ldg1 .ldg1__track--desktop > .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-liquid-gold-coordinate-lock-v97]:focus-visible,
.ldg1 .ldg1__track--desktop > .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-liquid-gold-coordinate-lock-v97]:active {
	position: absolute !important;
	left: 72.338867% !important;
	top: 27.324601% !important;
	width: 14.697266% !important;
	height: 34.658315% !important;
}

.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-liquid-gold-coordinate-lock-v97]
.ldg1__artwork-shell--liquid-gold,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="2"] .ldg1__artwork-shell--liquid-gold {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	transform: none !important;
}

.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-liquid-gold-coordinate-lock-v97]
.ldg1__artwork-shell--liquid-gold > .ldg1__artwork,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="2"] .ldg1__artwork-shell--liquid-gold .ldg1__artwork {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: 50% 50% !important;
	transform: none !important;
}

.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-liquid-gold-coordinate-lock-v97]
.ldg1__artwork-shell--liquid-gold > .ldg1__inside-artwork,
.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-liquid-gold-coordinate-lock-v97]
.ldg1__artwork-shell--liquid-gold > .ldg1__video-slot,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="2"] .ldg1__artwork-shell--liquid-gold .ldg1__inside-artwork,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="2"] .ldg1__artwork-shell--liquid-gold .ldg1__video-slot {
	position: absolute !important;
	left: 17.2% !important;
	top: 17.6% !important;
	width: 65.8% !important;
	height: 65.6% !important;
	overflow: hidden !important;
	border-radius: 10.2% !important;
	object-fit: cover !important;
	object-position: 50% 50% !important;
	transform: none !important;
}

.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-liquid-gold-coordinate-lock-v97]
.ldg1__video-canvas {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: 50% 50% !important;
}

.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-liquid-gold-coordinate-lock-v97]
.ldg1__artwork-shell--liquid-gold > .ldg1__artwork-glass,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="2"] .ldg1__artwork-shell--liquid-gold .ldg1__artwork-glass {
	left: 17.2% !important;
	top: 17.6% !important;
	width: 65.8% !important;
	height: 65.6% !important;
	border-radius: 10.2% !important;
}

.ldg1 .ldg1__room--one >
.ldg1__exhibit[data-index="2"][data-ldg1-liquid-gold-coordinate-lock-v97]
.ldg1__play-trigger {
	left: 50% !important;
	transform: translateX(-50%) !important;
}


/* =========================================================
   V142 — FRAME 4 ADDED TO SECOND ROOM (LIGHT CHANNEL FINAL)
   Exact 2048 × 878 room grid using the user-supplied green-dot base corners.
   Approx bottom-left ≈ X265.00 / Y542.84
   Approx bottom-right ≈ X555.00 / Y542.84
   ========================================================= */
.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="3"][data-ldg1-light-channel-coordinate-lock-v97],
.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="3"][data-ldg1-light-channel-coordinate-lock-v97]:hover,
.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="3"][data-ldg1-light-channel-coordinate-lock-v97]:focus,
.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="3"][data-ldg1-light-channel-coordinate-lock-v97]:focus-visible,
.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="3"][data-ldg1-light-channel-coordinate-lock-v97]:active {
	position: absolute !important;
	left: 12.939453% !important;
	top: 28.815490% !important;
	width: 14.160156% !important;
	height: 33.029613% !important;
}

.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="3"][data-ldg1-light-channel-coordinate-lock-v97]
.ldg1__artwork-shell--light-channel,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="3"] .ldg1__artwork-shell--light-channel {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	transform: none !important;
}

.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="3"][data-ldg1-light-channel-coordinate-lock-v97]
.ldg1__artwork-shell--light-channel > .ldg1__artwork,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="3"] .ldg1__artwork-shell--light-channel .ldg1__artwork {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: 50% 50% !important;
	transform: none !important;
}

.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="3"][data-ldg1-light-channel-coordinate-lock-v97]
.ldg1__artwork-shell--light-channel > .ldg1__inside-artwork,
.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="3"][data-ldg1-light-channel-coordinate-lock-v97]
.ldg1__artwork-shell--light-channel > .ldg1__video-slot,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="3"] .ldg1__artwork-shell--light-channel .ldg1__inside-artwork,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="3"] .ldg1__artwork-shell--light-channel .ldg1__video-slot {
	position: absolute !important;
	left: 14.8% !important;
	top: 15.6% !important;
	width: 70.4% !important;
	height: 70.8% !important;
	overflow: hidden !important;
	border-radius: 4.6% !important;
	object-fit: cover !important;
	object-position: 50% 50% !important;
	transform: none !important;
}

.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="3"][data-ldg1-light-channel-coordinate-lock-v97]
.ldg1__video-canvas {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: 50% 50% !important;
}

.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="3"][data-ldg1-light-channel-coordinate-lock-v97]
.ldg1__artwork-shell--light-channel > .ldg1__artwork-glass,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="3"] .ldg1__artwork-shell--light-channel .ldg1__artwork-glass {
	left: 14.8% !important;
	top: 15.6% !important;
	width: 70.4% !important;
	height: 70.8% !important;
	border-radius: 4.6% !important;
}

.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="3"][data-ldg1-light-channel-coordinate-lock-v97]
.ldg1__play-trigger {
	left: 50% !important;
	transform: translateX(-50%) !important;
}


/* =========================================================
   V142 — FRAME 5 ADDED TO SECOND ROOM (INDUSTRIAL MESH FINAL)
   Exact 2048 × 878 room grid using the user-supplied green-dot base corners.
   Approx bottom-left ≈ X871.00 / Y549.00
   Approx bottom-right ≈ X1180.00 / Y549.00
   ========================================================= */
.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="4"][data-ldg1-industrial-mesh-coordinate-lock-v100],
.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="4"][data-ldg1-industrial-mesh-coordinate-lock-v100]:hover,
.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="4"][data-ldg1-industrial-mesh-coordinate-lock-v100]:focus,
.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="4"][data-ldg1-industrial-mesh-coordinate-lock-v100]:focus-visible,
.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="4"][data-ldg1-industrial-mesh-coordinate-lock-v100]:active {
	position: absolute !important;
	left: 42.529297% !important;
	top: 27.334852% !important;
	width: 15.087891% !important;
	height: 35.193622% !important;
}

.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="4"][data-ldg1-industrial-mesh-coordinate-lock-v100]
.ldg1__artwork-shell--industrial-mesh,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="4"] .ldg1__artwork-shell--industrial-mesh {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	transform: none !important;
}

.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="4"][data-ldg1-industrial-mesh-coordinate-lock-v100]
.ldg1__artwork-shell--industrial-mesh > .ldg1__artwork,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="4"] .ldg1__artwork-shell--industrial-mesh .ldg1__artwork {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: 50% 50% !important;
	transform: none !important;
}

.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="4"][data-ldg1-industrial-mesh-coordinate-lock-v100]
.ldg1__artwork-shell--industrial-mesh > .ldg1__inside-artwork,
.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="4"][data-ldg1-industrial-mesh-coordinate-lock-v100]
.ldg1__artwork-shell--industrial-mesh > .ldg1__video-slot,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="4"] .ldg1__artwork-shell--industrial-mesh .ldg1__inside-artwork,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="4"] .ldg1__artwork-shell--industrial-mesh .ldg1__video-slot {
	position: absolute !important;
	left: 14.3% !important;
	top: 13.1% !important;
	width: 71.2% !important;
	height: 71.6% !important;
	overflow: hidden !important;
	border-radius: 2.8% !important;
	object-fit: cover !important;
	object-position: 50% 50% !important;
	transform: none !important;
}

.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="4"][data-ldg1-industrial-mesh-coordinate-lock-v100]
.ldg1__video-canvas {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: 50% 50% !important;
}

.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="4"][data-ldg1-industrial-mesh-coordinate-lock-v100]
.ldg1__artwork-shell--industrial-mesh > .ldg1__artwork-glass,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="4"] .ldg1__artwork-shell--industrial-mesh .ldg1__artwork-glass {
	left: 14.3% !important;
	top: 13.1% !important;
	width: 71.2% !important;
	height: 71.6% !important;
	border-radius: 2.8% !important;
}

.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="4"][data-ldg1-industrial-mesh-coordinate-lock-v100]
.ldg1__play-trigger {
	left: 50% !important;
	transform: translateX(-50%) !important;
}


/* =========================================================
   V142 — FRAME 6 ADDED TO SECOND ROOM (ANGLES FINAL / GRITTY)
   Exact 2048 × 878 room grid using the user-supplied green-dot base corners.
   Bottom-left ≈ X1482.95 / Y543.84
   Bottom-right ≈ X1784.09 / Y543.84
   ========================================================= */
.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="5"][data-ldg1-angles-coordinate-lock-v100],
.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="5"][data-ldg1-angles-coordinate-lock-v100]:hover,
.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="5"][data-ldg1-angles-coordinate-lock-v100]:focus,
.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="5"][data-ldg1-angles-coordinate-lock-v100]:focus-visible,
.ldg1 .ldg1__room--two >
.ldg1__exhibit[data-index="5"][data-ldg1-angles-coordinate-lock-v100]:active {
	position: absolute !important;
	left: 72.409890% !important;
	top: 27.643318% !important;
	width: 14.703924% !important;
	height: 34.297991% !important;
}
.ldg1 .ldg1__room--two > .ldg1__exhibit[data-index="5"][data-ldg1-angles-coordinate-lock-v100] .ldg1__artwork-shell--angles,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="5"] .ldg1__artwork-shell--angles {
	position: relative !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; transform: none !important;
}
.ldg1 .ldg1__room--two > .ldg1__exhibit[data-index="5"][data-ldg1-angles-coordinate-lock-v100] .ldg1__artwork-shell--angles > .ldg1__artwork,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="5"] .ldg1__artwork-shell--angles .ldg1__artwork {
	position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: 50% 50% !important; transform: none !important;
}
.ldg1 .ldg1__room--two > .ldg1__exhibit[data-index="5"][data-ldg1-angles-coordinate-lock-v100] .ldg1__artwork-shell--angles > .ldg1__inside-artwork,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="5"] .ldg1__artwork-shell--angles .ldg1__inside-artwork {
	position: absolute !important; left: 19.5% !important; top: 15.8% !important; width: 61.0% !important; height: 64.6% !important; overflow: hidden !important; border-radius: 1.8% !important; object-fit: cover !important; object-position: 50% 50% !important; transform: none !important;
}
.ldg1 .ldg1__room--two > .ldg1__exhibit[data-index="5"][data-ldg1-angles-coordinate-lock-v100] .ldg1__artwork-shell--angles > .ldg1__artwork-glass,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="5"] .ldg1__artwork-shell--angles .ldg1__artwork-glass {
	left: 19.5% !important; top: 15.8% !important; width: 61.0% !important; height: 64.6% !important; border-radius: 1.8% !important;
}
.ldg1 .ldg1__room--two > .ldg1__exhibit[data-index="5"][data-ldg1-angles-coordinate-lock-v100] .ldg1__play-trigger { left: 50% !important; transform: translateX(-50%) !important; }


/* =========================================================
   V142 — THIRD BACKGROUND ROOM + SECOND SEAM HARDENING
   ========================================================= */
.ldg1[data-ldg1-build="V142"] .ldg1__room--three {
	background-image: var(--ldg1-background-image) !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: calc(100% + 2px) 100% !important;
}

.ldg1[data-ldg1-build="V142"] .ldg1__room--two,
.ldg1[data-ldg1-build="V142"] .ldg1__room--three {
	margin-left: calc(-1 * var(--ldg1-seam-blend)) !important;
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0,
		rgba(0, 0, 0, .18) 18px,
		rgba(0, 0, 0, .72) calc(var(--ldg1-seam-blend) * .68),
		#000 var(--ldg1-seam-blend),
		#000 100%
	) !important;
	mask-image: linear-gradient(
		90deg,
		transparent 0,
		rgba(0, 0, 0, .18) 18px,
		rgba(0, 0, 0, .72) calc(var(--ldg1-seam-blend) * .68),
		#000 var(--ldg1-seam-blend),
		#000 100%
	) !important;
	-webkit-mask-repeat: no-repeat !important;
	mask-repeat: no-repeat !important;
}




/* =========================================================
   V142 — FRAME 7 ADDED TO THIRD ROOM (CRYSTAL FINAL / LATELY ORIGINAL)
   Exact 2048 × 878 room grid using the user-supplied green-dot base corners.
   Bottom-left ≈ X264.00 / Y543.00
   Bottom-right ≈ X577.00 / Y543.00
   ========================================================= */
.ldg1 .ldg1__room--three >
.ldg1__exhibit[data-index="6"][data-ldg1-crystal-coordinate-lock-v101],
.ldg1 .ldg1__room--three >
.ldg1__exhibit[data-index="6"][data-ldg1-crystal-coordinate-lock-v101]:hover,
.ldg1 .ldg1__room--three >
.ldg1__exhibit[data-index="6"][data-ldg1-crystal-coordinate-lock-v101]:focus,
.ldg1 .ldg1__room--three >
.ldg1__exhibit[data-index="6"][data-ldg1-crystal-coordinate-lock-v101]:focus-visible,
.ldg1 .ldg1__room--three >
.ldg1__exhibit[data-index="6"][data-ldg1-crystal-coordinate-lock-v101]:active {
	position: absolute !important;
	left: 12.890625% !important;
	top: 27.334852% !important;
	width: 15.283203% !important;
	height: 34.851936% !important;
}
.ldg1 .ldg1__room--three > .ldg1__exhibit[data-index="6"][data-ldg1-crystal-coordinate-lock-v101] .ldg1__artwork-shell--crystal,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="6"] .ldg1__artwork-shell--crystal {
	position: relative !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; transform: none !important;
}
.ldg1 .ldg1__room--three > .ldg1__exhibit[data-index="6"][data-ldg1-crystal-coordinate-lock-v101] .ldg1__artwork-shell--crystal > .ldg1__artwork,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="6"] .ldg1__artwork-shell--crystal .ldg1__artwork {
	position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: 50% 50% !important; transform: none !important;
}
.ldg1 .ldg1__room--three > .ldg1__exhibit[data-index="6"][data-ldg1-crystal-coordinate-lock-v101] .ldg1__artwork-shell--crystal > .ldg1__inside-artwork,
.ldg1 .ldg1__room--three > .ldg1__exhibit[data-index="6"][data-ldg1-crystal-coordinate-lock-v101] .ldg1__artwork-shell--crystal > .ldg1__video-slot,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="6"] .ldg1__artwork-shell--crystal .ldg1__inside-artwork,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="6"] .ldg1__artwork-shell--crystal .ldg1__video-slot {
	position: absolute !important; left: 24.8% !important; top: 16.2% !important; width: 50.8% !important; height: 61.0% !important; overflow: hidden !important; border-radius: 1.8% !important; object-fit: cover !important; object-position: 50% 50% !important; transform: none !important;
}
.ldg1 .ldg1__room--three > .ldg1__exhibit[data-index="6"][data-ldg1-crystal-coordinate-lock-v101] .ldg1__video-canvas {
	position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 50% 50% !important;
}
.ldg1 .ldg1__room--three > .ldg1__exhibit[data-index="6"][data-ldg1-crystal-coordinate-lock-v101] .ldg1__artwork-shell--crystal > .ldg1__artwork-glass,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="6"] .ldg1__artwork-shell--crystal .ldg1__artwork-glass {
	left: 24.8% !important; top: 16.2% !important; width: 50.8% !important; height: 61.0% !important; border-radius: 1.8% !important;
}
.ldg1 .ldg1__room--three > .ldg1__exhibit[data-index="6"][data-ldg1-crystal-coordinate-lock-v101] .ldg1__play-trigger { left: 50% !important; transform: translateX(-50%) !important; }


/* =========================================================
   V142 — FRAME 8 ADDED TO THIRD ROOM (PINK DRIP FINAL / BACK 2 BACK)
   Exact 2048 × 878 room grid using the user-supplied green-dot base corners.
   Bottom-left ≈ X865.00 / Y543.00
   Bottom-right ≈ X1181.00 / Y543.00
   ========================================================= */
.ldg1 .ldg1__room--three >
.ldg1__exhibit[data-index="7"][data-ldg1-pink-drip-coordinate-lock-v104],
.ldg1 .ldg1__room--three >
.ldg1__exhibit[data-index="7"][data-ldg1-pink-drip-coordinate-lock-v104]:hover,
.ldg1 .ldg1__room--three >
.ldg1__exhibit[data-index="7"][data-ldg1-pink-drip-coordinate-lock-v104]:focus,
.ldg1 .ldg1__room--three >
.ldg1__exhibit[data-index="7"][data-ldg1-pink-drip-coordinate-lock-v104]:focus-visible,
.ldg1 .ldg1__room--three >
.ldg1__exhibit[data-index="7"][data-ldg1-pink-drip-coordinate-lock-v104]:active {
	position: absolute !important;
	left: 42.236328% !important;
	top: 27.106309% !important;
	width: 15.429688% !important;
	height: 34.851936% !important;
}
.ldg1 .ldg1__room--three > .ldg1__exhibit[data-index="7"][data-ldg1-pink-drip-coordinate-lock-v104] .ldg1__artwork-shell--pink-drip,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="7"] .ldg1__artwork-shell--pink-drip {
	position: relative !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; transform: none !important;
}
.ldg1 .ldg1__room--three > .ldg1__exhibit[data-index="7"][data-ldg1-pink-drip-coordinate-lock-v104] .ldg1__artwork-shell--pink-drip > .ldg1__artwork,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="7"] .ldg1__artwork-shell--pink-drip .ldg1__artwork {
	position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: 50% 50% !important; transform: none !important;
}
.ldg1 .ldg1__room--three > .ldg1__exhibit[data-index="7"][data-ldg1-pink-drip-coordinate-lock-v104] .ldg1__artwork-shell--pink-drip > .ldg1__inside-artwork,
.ldg1 .ldg1__room--three > .ldg1__exhibit[data-index="7"][data-ldg1-pink-drip-coordinate-lock-v104] .ldg1__artwork-shell--pink-drip > .ldg1__video-slot,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="7"] .ldg1__artwork-shell--pink-drip .ldg1__inside-artwork,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="7"] .ldg1__artwork-shell--pink-drip .ldg1__video-slot {
	position: absolute !important; left: 19.2% !important; top: 15.6% !important; width: 61.6% !important; height: 63.6% !important; overflow: hidden !important; border-radius: 1.6% !important; object-fit: cover !important; object-position: 50% 50% !important; transform: none !important;
}
.ldg1 .ldg1__room--three > .ldg1__exhibit[data-index="7"][data-ldg1-pink-drip-coordinate-lock-v104] .ldg1__video-canvas {
	position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 50% 50% !important;
}
.ldg1 .ldg1__room--three > .ldg1__exhibit[data-index="7"][data-ldg1-pink-drip-coordinate-lock-v104] .ldg1__artwork-shell--pink-drip > .ldg1__artwork-glass,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="7"] .ldg1__artwork-shell--pink-drip .ldg1__artwork-glass {
	left: 19.2% !important; top: 15.6% !important; width: 61.6% !important; height: 63.6% !important; border-radius: 1.6% !important;
}
.ldg1 .ldg1__room--three > .ldg1__exhibit[data-index="7"][data-ldg1-pink-drip-coordinate-lock-v104] .ldg1__play-trigger { left: 50% !important; transform: translateX(-50%) !important; }

/* =========================================================
   V142 — TOP PLAYER ALBUM ART: HARD PER-EXHIBIT SYNC
   The wrapper background is the visible source of truth. The image node
   remains as an accessibility/fallback asset but cannot visually retain
   an earlier track after WordPress/lazy-load scripts intervene.
   ========================================================= */
.ldg1[data-ldg1-build="V142"] .ld-audio-album-card__art {
	background-position: 50% 50% !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-color: #070707 !important;
}

.ldg1[data-ldg1-build="V142"] .ld-audio-album-card__art > img[data-ld-album-image] {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}


/* =========================================================
   V142 - SECOND BACKGROUND BENCH HOLOGRAM CHARACTER
   Adds the seated hologram figure between Frames 4 and 5 on room two.
   Position grounded from the user-supplied grid image:
   left green dot ~= X525 / Y1211
   right green dot ~= X1156 / Y1211
   source image size 1498 x 1536.
   ========================================================= */
.ldg1__hologram-character {
	position: absolute;
	z-index: 26;
	left: 39.062500%;
	bottom: 19.401709%;
	width: 19.531250%;
	height: 39.250000%;
	opacity: 1 !important;
	visibility: visible !important;
	display: block;
	margin: 0;
	padding: 0;
	overflow: visible;
	pointer-events: none;
	user-select: none;
	isolation: isolate;
	transform: translate3d(calc(-50% + var(--ldg1-hologram-shift, 0px)), 0, 0) !important;
	transform-origin: 50% 100%;
	filter: none;
	transition: filter 1650ms cubic-bezier(.20,.62,.24,1);
	will-change: transform;
}

.ldg1 .ldg1__room--two > .ldg1__hologram-character[data-ldg1-hologram-coordinate-lock-v107] {
	left: 56.074766% !important;
	bottom: 18.684896% !important;
	width: 42.122830% !important;
	height: 48.111979% !important;
}

.ldg1__hologram-figure {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.ldg1__hologram-figure::before {
	position: absolute;
	z-index: 1;
	inset: 4% -8% 2%;
	content: "";
	background:
		radial-gradient(ellipse at 50% 38%, rgba(92, 182, 255, .18) 0%, rgba(66, 148, 255, .10) 34%, rgba(66, 148, 255, 0) 70%),
		radial-gradient(ellipse at 50% 62%, rgba(255, 190, 129, .18) 0%, rgba(255, 154, 47, .10) 38%, rgba(255, 154, 47, 0) 72%);
	filter: blur(16px);
	mix-blend-mode: screen;
	opacity: .9;
	pointer-events: none;
}

.ldg1__hologram-character-img {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	object-fit: contain;
	object-position: 50% 100%;
	filter:
		brightness(.98)
		contrast(1.02)
		drop-shadow(0 10px 16px rgba(0, 0, 0, .36))
		drop-shadow(0 0 14px rgba(95, 170, 255, .14));
	backface-visibility: visible !important;
	-webkit-backface-visibility: visible !important;
	image-rendering: auto;
	pointer-events: none;
	-webkit-user-drag: none;
}

.ldg1__hologram-contact-shadow {
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: 1.8%;
	display: block;
	width: 52%;
	height: 6.4%;
	background: radial-gradient(ellipse at center, rgba(0,0,0,.70) 0%, rgba(0,0,0,.34) 48%, transparent 78%);
	filter: blur(4px);
	transform: translateX(-50%);
	pointer-events: none;
}

.ldg1.is-walking-to-artwork .ldg1__hologram-character,
.ldg1.is-artwork-focused .ldg1__hologram-character {
	filter: blur(4.2px) brightness(.86) saturate(.93);
}

.ldg1.is-returning-from-artwork .ldg1__hologram-character {
	filter: none;
}

@media (max-width: 991px) {
	.ldg1__hologram-character,
	.ldg1 .ldg1__room--two > .ldg1__hologram-character[data-ldg1-hologram-coordinate-lock-v107] {
		left: 39.1% !important;
		bottom: 18.9% !important;
		width: 20.2% !important;
		height: 39.8% !important;
	}
}

@media (max-width: 767px) {
	.ldg1__hologram-character,
	.ldg1 .ldg1__room--two > .ldg1__hologram-character[data-ldg1-hologram-coordinate-lock-v107] {
		left: 39.1% !important;
		bottom: 18.6% !important;
		width: 22.0% !important;
		height: 41.2% !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1__hologram-character {
		transition-duration: 1ms !important;
	}
}


/* =========================================================
   V142 HOTFIX — FORCE SECOND-BACKGROUND HOLOGRAM VISIBILITY
   V105 could fail to appear live if an older shortcode function namespace
   was still active. This rule block also hard-locks the position/size.
   ========================================================= */
.ldg1__room--two .ldg1__hologram-character[data-ldg1-hologram-coordinate-lock-v107] {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	z-index: 26 !important;
	left: 39.062500% !important;
	bottom: 19.401709% !important;
	width: 19.531250% !important;
	height: 39.250000% !important;
}

.ldg1__room--two .ldg1__hologram-character[data-ldg1-hologram-coordinate-lock-v107] .ldg1__hologram-character-img {
	opacity: 1 !important;
	visibility: visible !important;
}


/* =========================================================
   V142 FINAL HOLOGRAM LOCK
   The prior package configured the asset but failed to assign its URL to
   $hologram_character_url, so the PHP conditional never rendered the markup.
   This final lock centres the seated figure at approximately X800 on the
   2048-wide second-room coordinate system, between Frames 4 and 5.
   ========================================================= */
.ldg1[data-ldg1-build="V142"] .ldg1__room--two >
.ldg1__hologram-character[data-ldg1-hologram-coordinate-lock-v107] {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	z-index: 26 !important;
	left: 39.062500% !important;
	bottom: 19.401709% !important;
	width: 19.531250% !important;
	height: 39.250000% !important;
	transform: translate3d(calc(-50% + var(--ldg1-hologram-shift, 0px)), 0, 0) !important;
}

.ldg1[data-ldg1-build="V142"] .ldg1__room--two >
.ldg1__hologram-character[data-ldg1-hologram-coordinate-lock-v107]
.ldg1__hologram-character-img {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: 50% 100% !important;
}

/* =========================================================
   V108 — TV HEAD FLOOR REFLECTION RESTORE

   The TV Head figure on Room Two was visible, but its floor reflection was
   effectively collapsing away. Under the V73 coordinate-lock rules the
   character wrapper used width + auto height, while the reflection wrapper
   still relied on percentage height. Because that percentage height was not
   guaranteed to resolve from a definite containing-block height, the
   reflection box could collapse and disappear.

   Fix:
   - give the coordinate-locked TV Head wrapper a definite aspect ratio that
     matches the source figure (367 × 900)
   - keep the reflection directly under the feet
   - slightly strengthen visibility so it reads clearly on the polished floor
   - do not alter the character's placed X/Y coordinates or screen mapping
   ========================================================= */

.ldg1 .ldg1__room--two >
.ldg1__tv-head-character[data-ldg1-tv-head-coordinate-lock-v73] {
	aspect-ratio: 367 / 900 !important;
	height: auto !important;
	overflow: visible !important;
}

.ldg1 .ldg1__room--two >
.ldg1__tv-head-character[data-ldg1-tv-head-coordinate-lock-v73]
.ldg1__tv-head-reflection {
	left: -4% !important;
	top: calc(100% - 2px) !important;
	width: 108% !important;
	height: 39% !important;
	display: block !important;
	overflow: hidden !important;
	opacity: .82 !important;
	transform: perspective(560px) rotateX(3deg) scaleX(.95) !important;
	transform-origin: 50% 0 !important;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .98) 0%, rgba(0, 0, 0, .78) 34%, rgba(0, 0, 0, .40) 72%, transparent 100%) !important;
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .98) 0%, rgba(0, 0, 0, .78) 34%, rgba(0, 0, 0, .40) 72%, transparent 100%) !important;
}

.ldg1 .ldg1__room--two >
.ldg1__tv-head-character[data-ldg1-tv-head-coordinate-lock-v73]
.ldg1__tv-head-reflection-figure {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	filter:
		brightness(.58)
		contrast(1.10)
		saturate(.74)
		sepia(.18)
		blur(.55px)
		drop-shadow(0 0 5px rgba(255, 160, 37, .16)) !important;
}

.ldg1 .ldg1__room--two >
.ldg1__tv-head-character[data-ldg1-tv-head-coordinate-lock-v73]
.ldg1__tv-head-reflection-img {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: 50% 0 !important;
	opacity: .92 !important;
	transform: scaleY(-1) !important;
	transform-origin: 50% 50% !important;
}

.ldg1 .ldg1__room--two >
.ldg1__tv-head-character[data-ldg1-tv-head-coordinate-lock-v73]
.ldg1__tv-head-screen--reflection {
	opacity: .74 !important;
}

@media (max-width: 991px) {
	.ldg1 .ldg1__room--two >
	.ldg1__tv-head-character[data-ldg1-tv-head-coordinate-lock-v73]
	.ldg1__tv-head-reflection {
		height: 38% !important;
		opacity: .80 !important;
	}
}

@media (max-width: 767px) and (orientation: portrait) {
	.ldg1 .ldg1__room--two >
	.ldg1__tv-head-character[data-ldg1-tv-head-coordinate-lock-v73]
	.ldg1__tv-head-reflection {
		height: 37% !important;
		opacity: .78 !important;
	}
}


/* =========================================================
   V142 — FRAME 9 CHROMA CORE + 16+ ADVISORY GATE
   - Adds the final third-room frame (index 8 / Frame 9)
   - Adds a floating parental-advisory panel with YES / NO actions
   - Keeps styling aligned with the Lord Dancer gallery gold / black look
   ========================================================= */

.ldg1 .ldg1__room--three > .ldg1__exhibit[data-index="8"][data-ldg1-chroma-core-coordinate-lock-v142] .ldg1__artwork-shell--chroma-core,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="8"] .ldg1__artwork-shell--chroma-core {
	isolation: isolate;
}

.ldg1 .ldg1__room--three > .ldg1__exhibit[data-index="8"][data-ldg1-chroma-core-coordinate-lock-v142] .ldg1__artwork-shell--chroma-core > .ldg1__artwork,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="8"] .ldg1__artwork-shell--chroma-core .ldg1__artwork {
	position: relative;
	z-index: 2;
}

.ldg1 .ldg1__room--three > .ldg1__exhibit[data-index="8"][data-ldg1-chroma-core-coordinate-lock-v142] .ldg1__artwork-shell--chroma-core > .ldg1__inside-artwork,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="8"] .ldg1__artwork-shell--chroma-core .ldg1__inside-artwork {
	position: absolute;
	left: 16.1%;
	top: 16.15%;
	width: 67.9%;
	height: 67.6%;
	border-radius: 3.4%;
	object-fit: cover;
	z-index: 1;
}

.ldg1 .ldg1__room--three > .ldg1__exhibit[data-index="8"][data-ldg1-chroma-core-coordinate-lock-v142] .ldg1__artwork-shell--chroma-core > .ldg1__artwork-glass,
.ldg1[data-ldg1-build="V142"] .ldg1__room .ldg1__exhibit[data-index="8"] .ldg1__artwork-shell--chroma-core .ldg1__artwork-glass {
	z-index: 4;
}

.ldg1__age-gate {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 76%;
	max-width: 24rem;
	transform: translate(-50%, -50%);
	z-index: 5;
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
	transition: opacity .28s ease, visibility .28s ease, transform .28s ease;
}

.ldg1__age-gate-float {
	position: absolute;
	inset: -6% -4%;
	border-radius: 1.3rem;
	background: radial-gradient(circle at 50% 50%, rgba(255, 208, 92, .20), rgba(255, 208, 92, .06) 48%, transparent 74%);
	filter: blur(8px);
	animation: ldg1AgeGateGlow 4.4s ease-in-out infinite;
}

.ldg1__age-gate-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .7rem;
	padding: .8rem .85rem .95rem;
	border-radius: 1.25rem;
	border: 1px solid rgba(247, 212, 124, .78);
	background:
		linear-gradient(180deg, rgba(22, 18, 14, .88), rgba(8, 8, 10, .92)),
		radial-gradient(circle at 50% 0%, rgba(255, 226, 136, .16), transparent 62%);
	box-shadow:
		0 .55rem 1.8rem rgba(0, 0, 0, .34),
		0 0 0 .12rem rgba(255, 213, 117, .28),
		0 0 1.6rem rgba(243, 179, 66, .24);
	backdrop-filter: blur(5px);
	animation: ldg1AgeGateFloat 4.8s ease-in-out infinite;
}

.ldg1__age-gate-title {
	display: block;
	font-size: clamp(.92rem, 1.1vw, 1.16rem);
	font-weight: 800;
	letter-spacing: .16em;
	line-height: 1.1;
	color: #f7e0a2;
	text-align: center;
	text-shadow: 0 0 .85rem rgba(255, 220, 130, .28);
}

.ldg1__age-gate-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	width: 100%;
}

.ldg1__age-gate-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 4.8rem;
	padding: .52rem .95rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 214, 124, .84);
	background: linear-gradient(180deg, rgba(38, 34, 28, .96), rgba(12, 11, 14, .96));
	color: #f8e6b0;
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .14em;
	line-height: 1;
	box-shadow: 0 0 0 .08rem rgba(255, 215, 128, .20), 0 .35rem 1.05rem rgba(0, 0, 0, .28);
	cursor: pointer;
	user-select: none;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.ldg1__age-gate-action:hover,
.ldg1__age-gate-action:focus-visible {
	transform: translateY(-1px) scale(1.02);
	box-shadow: 0 0 0 .11rem rgba(255, 221, 139, .26), 0 .4rem 1.15rem rgba(245, 181, 72, .20);
	outline: none;
}

.ldg1__age-gate-action--yes:hover,
.ldg1__age-gate-action--yes:focus-visible {
	background: linear-gradient(180deg, rgba(109, 91, 31, .96), rgba(32, 24, 10, .96));
}

.ldg1__age-gate-action--no:hover,
.ldg1__age-gate-action--no:focus-visible {
	background: linear-gradient(180deg, rgba(56, 28, 32, .96), rgba(21, 10, 12, .96));
}

.ldg1__age-gate-image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 11.5rem;
	border-radius: .8rem;
	border: 1px solid rgba(255, 215, 130, .34);
	box-shadow: 0 .45rem 1.2rem rgba(0, 0, 0, .34);
}

.ldg1__exhibit.is-age-gate-accepted .ldg1__age-gate {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(-50%, -48%) scale(.96);
}

.ldg1__exhibit.is-age-gate-visible .ldg1__age-gate-card {
	box-shadow:
		0 .55rem 1.8rem rgba(0, 0, 0, .34),
		0 0 0 .12rem rgba(255, 213, 117, .30),
		0 0 2rem rgba(243, 179, 66, .28);
}

@keyframes ldg1AgeGateFloat {
	0%, 100% { transform: translateY(0px); }
	50% { transform: translateY(-7px); }
}

@keyframes ldg1AgeGateGlow {
	0%, 100% { opacity: .55; transform: scale(1); }
	50% { opacity: .92; transform: scale(1.03); }
}

@media (max-width: 991px) {
	.ldg1__age-gate {
		width: 82%;
	}

	.ldg1__age-gate-card {
		padding: .75rem .72rem .86rem;
		gap: .62rem;
	}

	.ldg1__age-gate-image {
		max-width: 10.4rem;
	}
}

@media (max-width: 767px) {
	.ldg1__age-gate {
		width: 80%;
	}

	.ldg1__age-gate-title {
		font-size: .9rem;
		letter-spacing: .13em;
	}

	.ldg1__age-gate-action {
		min-width: 4.2rem;
		padding: .5rem .82rem;
		font-size: .76rem;
	}

	.ldg1__age-gate-image {
		max-width: 9.6rem;
	}
}


/* =========================================================
   V142 — FRAME 9 HARD ACTIVATION FIX

   V109 correctly added the Chroma Core assets and age gate, but retained the
   earlier "reserved Frame 9" CSS block. That legacy block set index 8 to
   pointer-events:none and hid its artwork shell/caption with opacity:0 and
   visibility:hidden. The bare wall and control plaque therefore remained.

   These final rules explicitly activate the completed ninth exhibit.
   ========================================================= */
.ldg1[data-ldg1-build="V142"] [data-ldg1-exhibit][data-index="8"],
.ldg1[data-ldg1-build="V142"] [data-ldg1-exhibit][data-index="8"]:hover,
.ldg1[data-ldg1-build="V142"] [data-ldg1-exhibit][data-index="8"]:focus,
.ldg1[data-ldg1-build="V142"] [data-ldg1-exhibit][data-index="8"]:active {
	display: block !important;
	cursor: pointer !important;
	pointer-events: auto !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.ldg1[data-ldg1-build="V142"] [data-ldg1-exhibit][data-index="8"] .ldg1__artwork-shell,
.ldg1[data-ldg1-build="V142"] [data-ldg1-exhibit][data-index="8"] .ldg1__caption,
.ldg1[data-ldg1-build="V142"] [data-ldg1-exhibit][data-index="8"] .ldg1__artwork,
.ldg1[data-ldg1-build="V142"] [data-ldg1-exhibit][data-index="8"] .ldg1__inside-artwork,
.ldg1[data-ldg1-build="V142"] [data-ldg1-exhibit][data-index="8"] .ldg1__age-gate {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.ldg1[data-ldg1-build="V142"] [data-ldg1-exhibit][data-index="8"].is-age-gate-accepted .ldg1__age-gate {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* =========================================================
   V142 — FRAME 9 CAPTION REMOVAL + HOLOGRAM ALIGNMENT REFINE

   1) Removes the rounded title pill/caption under the last frame (Frame 9)
      so the final exhibit only shows the gallery frame and control plaque.
   2) Refines the seated hologram character placement on room two so it sits
      more accurately on the bench and centres better between Frames 4 and 5,
      matching the latest user-supplied grid references.
   ========================================================= */
.ldg1[data-ldg1-build="V142"] [data-ldg1-exhibit][data-index="8"] .ldg1__caption {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.ldg1[data-ldg1-build="V142"] .ldg1__room--two >
.ldg1__hologram-character[data-ldg1-hologram-coordinate-lock-v107] {
	left: 37.109375% !important;
	bottom: 19.205000% !important;
	width: 18.359375% !important;
	height: 38.350000% !important;
	transform: translate3d(calc(-50% + var(--ldg1-hologram-shift, 0px)), 0, 0) !important;
}

.ldg1[data-ldg1-build="V142"] .ldg1__room--two >
.ldg1__hologram-character[data-ldg1-hologram-coordinate-lock-v107] .ldg1__hologram-character-img {
	object-position: 50% 100% !important;
}

@media (max-width: 991px) {
	.ldg1[data-ldg1-build="V142"] .ldg1__room--two >
	.ldg1__hologram-character[data-ldg1-hologram-coordinate-lock-v107] {
		left: 37.0% !important;
		bottom: 19.0% !important;
		width: 18.7% !important;
		height: 38.6% !important;
	}
}

@media (max-width: 767px) {
	.ldg1[data-ldg1-build="V142"] .ldg1__room--two >
	.ldg1__hologram-character[data-ldg1-hologram-coordinate-lock-v107] {
		left: 36.9% !important;
		bottom: 18.85% !important;
		width: 19.5% !important;
		height: 39.0% !important;
	}
}

/* =========================================================
   V142 — FRAME 9 AGE GATE: FULL-ZOOM ONLY

   The age gate must not be visible while the visitor is horizontally
   scrolling through the gallery or while the camera is walking towards the
   final frame. It is revealed only after the camera reaches the fully focused
   artwork state.
   ========================================================= */

/* Hidden during normal gallery scrolling, approach and camera return. */
.ldg1[data-ldg1-build="V142"] [data-ldg1-exhibit][data-index="8"] .ldg1__age-gate,
.ldg1[data-ldg1-build="V142"].is-walking-to-artwork [data-ldg1-exhibit][data-index="8"] .ldg1__age-gate,
.ldg1[data-ldg1-build="V142"].is-returning-from-artwork [data-ldg1-exhibit][data-index="8"] .ldg1__age-gate {
	display: block !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transform: translate(-50%, -47%) scale(.94) !important;
}

/* Revealed only once the last frame is fully zoomed/focused. */
.ldg1[data-ldg1-build="V142"].is-artwork-focused
[data-ldg1-exhibit][data-index="8"].is-age-gate-visible:not(.is-age-gate-accepted)
.ldg1__age-gate {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: translate(-50%, -50%) scale(1) !important;
}

/* Once YES is selected, the gate remains hidden while the track plays. */
.ldg1[data-ldg1-build="V142"].is-artwork-focused
[data-ldg1-exhibit][data-index="8"].is-age-gate-accepted
.ldg1__age-gate {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}


/* =========================================================
   V142 STABLE RECOVERY — NON-FRAGILE PERFORMANCE SAFEGUARDS
   ========================================================= */

/* LiteSpeed/QUIC.cloud placeholders must never be shown inside the immersive
   gallery. The mandatory URI exclusion in V142-INSTALLATION prevents them from
   being generated; these selectors are a final visual safety net for stale
   cached HTML. The normal gallery wall remains visible underneath. */
.ldg1-no-lqip-zone img[data-lazyloaded]:not(.litespeed-loaded),
.ldg1-no-lqip-zone img[src^="data:image/svg+xml"],
.ldg1-no-lqip-zone img[src^="data:image/gif"] {
	opacity: 0 !important;
	visibility: hidden !important;
}

/* Once LiteSpeed has supplied the real file, restore the exact V112 image
   styling without a blur-up transition. */
.ldg1-no-lqip-zone img.litespeed-loaded,
.ldg1-no-lqip-zone img:not([data-lazyloaded]) {
	visibility: visible;
}

/* Pause continuous decorative work when the page is not visible. This cannot
   hide or defer any artwork and therefore fails open in every browser. */
.ldg1.is-v142-page-hidden *,
.ldg1.is-v142-page-hidden *::before,
.ldg1.is-v142-page-hidden *::after {
	animation-play-state: paused !important;
}

/* V113–V115 readiness/fallback artefacts can never appear if stale cached CSS
   survives during installation. */
.ldg1__room-readiness-cover,
.ldg1__immersive-loader,
.ldg1__asset-fallback,
.ldg1__play-control-fallback {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* =========================================================
   V142 FINAL LOCK — FRAME 9 COMPACT ACTIVE ADVISORY PANEL

   Requested visual correction:
   - keeps the existing Frame 9 full-focus-only age-gate behaviour;
   - reduces the active gate to approximately half its former visual footprint;
   - keeps the complete Parental Advisory artwork visible;
   - removes the rounded clipping that cut the advisory image corners;
   - preserves the existing YES / NO interaction and session approval logic.
   ========================================================= */

.ldg1[data-ldg1-build="V142"].is-artwork-focused
[data-ldg1-exhibit][data-index="8"].is-age-gate-visible:not(.is-age-gate-accepted)
.ldg1__age-gate[data-ldg1-age-gate-compact-v142="true"] {
	left: 50% !important;
	top: 50% !important;
	width: 50% !important;
	max-width: 15rem !important;
	transform: translate(-50%, -50%) scale(1) !important;
}

.ldg1[data-ldg1-build="V142"]
[data-ldg1-exhibit][data-index="8"]
.ldg1__age-gate[data-ldg1-age-gate-compact-v142="true"] .ldg1__age-gate-float {
	inset: -5% -4% !important;
	border-radius: 1rem !important;
	filter: blur(6px) !important;
	opacity: .72;
}

.ldg1[data-ldg1-build="V142"]
[data-ldg1-exhibit][data-index="8"]
.ldg1__age-gate[data-ldg1-age-gate-compact-v142="true"] .ldg1__age-gate-card {
	box-sizing: border-box !important;
	width: 100% !important;
	gap: .5rem !important;
	padding: .62rem .66rem .72rem !important;
	border: 1px solid rgba(247, 212, 124, .88) !important;
	border-radius: .92rem !important;
	overflow: visible !important;
	background:
		linear-gradient(180deg, rgba(21, 18, 14, .95), rgba(7, 7, 9, .97)),
		radial-gradient(circle at 50% 0%, rgba(255, 226, 136, .14), transparent 64%) !important;
	box-shadow:
		0 .42rem 1.35rem rgba(0, 0, 0, .42),
		0 0 0 .09rem rgba(255, 213, 117, .25),
		0 0 1.15rem rgba(243, 179, 66, .20) !important;
	backdrop-filter: blur(4px) !important;
	-webkit-backdrop-filter: blur(4px) !important;
	animation: ldg1V142AgeGateFloat 5.2s ease-in-out infinite !important;
}

.ldg1[data-ldg1-build="V142"]
[data-ldg1-exhibit][data-index="8"]
.ldg1__age-gate[data-ldg1-age-gate-compact-v142="true"] .ldg1__age-gate-title {
	font-size: clamp(.72rem, .86vw, .94rem) !important;
	font-weight: 800 !important;
	letter-spacing: .145em !important;
	line-height: 1.08 !important;
	white-space: nowrap !important;
}

.ldg1[data-ldg1-build="V142"]
[data-ldg1-exhibit][data-index="8"]
.ldg1__age-gate[data-ldg1-age-gate-compact-v142="true"] .ldg1__age-gate-actions {
	gap: .44rem !important;
	width: 100% !important;
}

.ldg1[data-ldg1-build="V142"]
[data-ldg1-exhibit][data-index="8"]
.ldg1__age-gate[data-ldg1-age-gate-compact-v142="true"] .ldg1__age-gate-action {
	box-sizing: border-box !important;
	flex: 1 1 0 !important;
	min-width: 0 !important;
	max-width: 6.5rem !important;
	padding: .4rem .5rem !important;
	border-width: 1px !important;
	font-size: .69rem !important;
	letter-spacing: .13em !important;
	box-shadow:
		0 0 0 .06rem rgba(255, 215, 128, .18),
		0 .25rem .72rem rgba(0, 0, 0, .32) !important;
}

.ldg1[data-ldg1-build="V142"]
[data-ldg1-exhibit][data-index="8"]
.ldg1__age-gate[data-ldg1-age-gate-compact-v142="true"] .ldg1__age-gate-image {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	clip-path: none !important;
	-webkit-clip-path: none !important;
	mask-image: none !important;
	-webkit-mask-image: none !important;
	object-fit: contain !important;
	object-position: 50% 50% !important;
	overflow: visible !important;
	box-shadow: 0 .34rem .92rem rgba(0, 0, 0, .34) !important;
}

@keyframes ldg1V142AgeGateFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-3px); }
}

@media (max-width: 991px) {
	.ldg1[data-ldg1-build="V142"].is-artwork-focused
	[data-ldg1-exhibit][data-index="8"].is-age-gate-visible:not(.is-age-gate-accepted)
	.ldg1__age-gate[data-ldg1-age-gate-compact-v142="true"] {
		width: 52% !important;
		max-width: 14.25rem !important;
	}
}

@media (max-width: 767px) {
	.ldg1[data-ldg1-build="V142"].is-artwork-focused
	[data-ldg1-exhibit][data-index="8"].is-age-gate-visible:not(.is-age-gate-accepted)
	.ldg1__age-gate[data-ldg1-age-gate-compact-v142="true"] {
		width: 56% !important;
		max-width: 13.25rem !important;
	}

	.ldg1[data-ldg1-build="V142"]
	[data-ldg1-exhibit][data-index="8"]
	.ldg1__age-gate[data-ldg1-age-gate-compact-v142="true"] .ldg1__age-gate-card {
		gap: .38rem !important;
		padding: .48rem .5rem .56rem !important;
		border-radius: .76rem !important;
	}

	.ldg1[data-ldg1-build="V142"]
	[data-ldg1-exhibit][data-index="8"]
	.ldg1__age-gate[data-ldg1-age-gate-compact-v142="true"] .ldg1__age-gate-title {
		font-size: .68rem !important;
		letter-spacing: .12em !important;
	}

	.ldg1[data-ldg1-build="V142"]
	[data-ldg1-exhibit][data-index="8"]
	.ldg1__age-gate[data-ldg1-age-gate-compact-v142="true"] .ldg1__age-gate-actions {
		gap: .34rem !important;
	}

	.ldg1[data-ldg1-build="V142"]
	[data-ldg1-exhibit][data-index="8"]
	.ldg1__age-gate[data-ldg1-age-gate-compact-v142="true"] .ldg1__age-gate-action {
		padding: .34rem .38rem !important;
		font-size: .62rem !important;
		letter-spacing: .11em !important;
	}
}

@media (max-height: 620px) and (orientation: landscape) {
	.ldg1[data-ldg1-build="V142"].is-artwork-focused
	[data-ldg1-exhibit][data-index="8"].is-age-gate-visible:not(.is-age-gate-accepted)
	.ldg1__age-gate[data-ldg1-age-gate-compact-v142="true"] {
		width: 44% !important;
		max-width: 12.5rem !important;
	}

	.ldg1[data-ldg1-build="V142"]
	[data-ldg1-exhibit][data-index="8"]
	.ldg1__age-gate[data-ldg1-age-gate-compact-v142="true"] .ldg1__age-gate-card {
		gap: .3rem !important;
		padding: .4rem .44rem .48rem !important;
	}
}



/* =========================================================
   V142 FINAL LOCK — SOCIAL TICKET HEADING + BUTTON FIT
   The back-of-ticket heading is now kept cleanly inside the
   central foil panel, clear of the internal vertical divider
   lines, with more deliberate spacing. The four social buttons
   are enlarged and rebalanced so they occupy the available
   space confidently instead of appearing lost on the ticket.
   ========================================================= */
.ldg1[data-ldg1-build="V142"] .ldg1__social-ticket-heading {
	left: 22.25%;
	right: 22.25%;
	top: 13.6%;
	font-size: clamp(11px, 1.12vw, 15px);
	letter-spacing: .052em;
	line-height: 1.04;
}

.ldg1[data-ldg1-build="V142"] .ldg1__social-ticket-links {
	left: 24.25%;
	right: 24.25%;
	top: 29.6%;
	bottom: 10.75%;
	row-gap: clamp(4px, 1.55cqw, 8px);
	column-gap: clamp(10px, 4.25cqw, 18px);
}

.ldg1[data-ldg1-build="V142"] .ldg1__social-ticket-link {
	width: clamp(34px, 14.5cqw, 62px);
	border-radius: clamp(6px, .82vw, 11px);
}

.ldg1[data-ldg1-build="V142"] .ldg1__social-ticket-close {
	right: 5.8%;
	width: 8.2%;
}

@media (max-width: 767px) {
	.ldg1[data-ldg1-build="V142"] .ldg1__social-ticket-heading {
		left: 21.5%;
		right: 21.5%;
		top: 13.4%;
		font-size: clamp(9px, 2.35vw, 12px);
		letter-spacing: .038em;
	}

	.ldg1[data-ldg1-build="V142"] .ldg1__social-ticket-links {
		left: 23.5%;
		right: 23.5%;
		top: 29.4%;
		bottom: 10.5%;
		row-gap: clamp(4px, 1.45cqw, 6px);
		column-gap: clamp(8px, 4cqw, 14px);
	}

	.ldg1[data-ldg1-build="V142"] .ldg1__social-ticket-link {
		width: clamp(30px, 14.5cqw, 48px);
	}

	.ldg1[data-ldg1-build="V142"] .ldg1__social-ticket-close {
		right: 5.9%;
		width: 8.8%;
	}
}

@media (max-height: 520px) and (orientation: landscape) {
	.ldg1[data-ldg1-build="V142"] .ldg1__social-ticket-heading {
		font-size: clamp(10px, 1.4vw, 13px);
	}

	.ldg1[data-ldg1-build="V142"] .ldg1__social-ticket-link {
		width: clamp(30px, 13.25cqw, 46px);
	}
}


/* =========================================================
   V142 FINAL LOCK — ROOM TWO CV CHARACTER REPLACEMENT
   Replaces HologramD.webp with CV.webp and hard-locks the seated
   character between Frames 4 and 5 using the latest grid reference.
   The bottom-left and bottom-right edges of the visible character art
   are aligned to the supplied green dots on the bench, while preserving
   the existing hologram/character parallax system.

   Grid reference used
   - source image size: 1614 x 1536
   - left green dot centre: 645 / 1223
   - right green dot centre: 1134 / 1223
   - target image bottom span: 489px
   ========================================================= */
.ldg1[data-ldg1-build="V142"] .ldg1__room--two >
.ldg1__hologram-character[data-ldg1-hologram-coordinate-lock-v107] {
	left: 55.111524% !important;
	bottom: 20.377604% !important;
	width: 30.297398% !important;
	height: 47.395833% !important;
	transform: translate3d(calc(-50% + var(--ldg1-hologram-shift, 0px)), 0, 0) !important;
	z-index: 26 !important;
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.ldg1[data-ldg1-build="V142"] .ldg1__room--two >
.ldg1__hologram-character[data-ldg1-hologram-coordinate-lock-v107] .ldg1__hologram-character-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: 50% 100% !important;
	filter:
		brightness(.98)
		contrast(1.02)
		drop-shadow(0 10px 16px rgba(0, 0, 0, .36))
		drop-shadow(0 0 14px rgba(95, 170, 255, .14)) !important;
}

.ldg1[data-ldg1-build="V142"] .ldg1__room--two >
.ldg1__hologram-character[data-ldg1-hologram-coordinate-lock-v107] .ldg1__hologram-contact-shadow {
	left: 50% !important;
	bottom: 1.8% !important;
	width: 52% !important;
}

@media (max-width: 991px) {
	.ldg1[data-ldg1-build="V142"] .ldg1__room--two >
	.ldg1__hologram-character[data-ldg1-hologram-coordinate-lock-v107] {
		left: 55.111524% !important;
		bottom: 20.377604% !important;
		width: 30.297398% !important;
		height: 47.395833% !important;
	}
}

@media (max-width: 767px) {
	.ldg1[data-ldg1-build="V142"] .ldg1__room--two >
	.ldg1__hologram-character[data-ldg1-hologram-coordinate-lock-v107] {
		left: 55.111524% !important;
		bottom: 20.377604% !important;
		width: 30.297398% !important;
		height: 47.395833% !important;
	}
}


/* =========================================================
   V142 FINAL LOCK — CV CHARACTER SWAP + HELD CV READER
   The room-two CV character now behaves like the BIO trigger.
   - Resting state uses CV-Forward.webp
   - Pressed/open state uses CV-Back.webp
   - Clicking the character launches the custom held-PDF reader
     instead of the BIO information panel
   ========================================================= */


.ldg1[data-ldg1-build="V142"] .ldg1__cv-character {
	pointer-events: auto !important;
	cursor: pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-character .ldg1__hologram-figure {
	position: absolute;
	inset: 0;
	overflow: visible;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-character-img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: 50% 100% !important;
	transition:
		opacity 520ms cubic-bezier(.2, .82, .2, 1),
		transform 520ms cubic-bezier(.2, .82, .2, 1),
		filter 520ms cubic-bezier(.2, .82, .2, 1);
	will-change: opacity, transform;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-character-img--forward {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-character-img--back {
	opacity: 0;
	transform: translate3d(.35%, 0, 0) scale(.992);
}

.ldg1[data-ldg1-build="V142"].is-cv-character-pushed .ldg1__cv-character-img--forward,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ldg1__cv-character-img--forward {
	opacity: 0;
	transform: translate3d(-.5%, 0, 0) scale(.992);
}

.ldg1[data-ldg1-build="V142"].is-cv-character-pushed .ldg1__cv-character-img--back,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ldg1__cv-character-img--back {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1.002);
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-character-prompt {
	position: absolute;
	left: 50%;
	bottom: 101%;
	display: inline-flex;
	align-items: center;
	gap: .42rem;
	padding: .42rem .72rem;
	border: 1px solid rgba(255, 214, 120, .42);
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(18, 14, 24, .90), rgba(6, 5, 10, .86));
	box-shadow: 0 10px 18px rgba(0,0,0,.28), 0 0 14px rgba(255, 199, 90, .12);
	color: #f6d48f;
	font: 700 clamp(10px, .72vw, 13px) / 1.1 Inter, system-ui, sans-serif;
	letter-spacing: .12em;
	transform: translate(-50%, 0);
	opacity: .95;
	white-space: nowrap;
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-character-prompt-dot {
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fff6c7 0%, #ffd36e 30%, #ff9b38 62%, #c96311 100%);
	box-shadow: 0 0 8px rgba(255, 180, 58, .7);
	animation: ldg1CvPromptPulse 1.8s ease-in-out infinite;
}



.ldg1[data-ldg1-build="V142"] .ldg1__cv-character:hover .ldg1__cv-character-prompt,
.ldg1[data-ldg1-build="V142"] .ldg1__cv-character:focus-visible .ldg1__cv-character-prompt {
	transform: translate(-50%, -3px);
}

.ldg1[data-ldg1-build="V142"].is-cv-character-pushed .ldg1__cv-character-prompt,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ldg1__cv-character-prompt {
	opacity: 0;
	transform: translate(-50%, 2px);
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-character:focus-visible {
	filter: drop-shadow(0 0 18px rgba(255, 196, 63, .26));
}





























.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-icon-sheet { fill: rgba(255, 246, 230, .08); stroke: currentColor; }
.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-icon-fold { fill: none; stroke: currentColor; }
.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-icon-arrow { fill: none; stroke: currentColor; }















































.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ldg1__viewport,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ldg1__hud,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ld-audio-console-shell,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ld-audio-blackhole-tab,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ldg1__selection,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ldg1__instruction,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ldg1__page-link {
	pointer-events: none !important;
}






/* =========================================================
   V142 FINAL LOCK — CV CHARACTER SWAP FIX
   Fixes the room-two CV character so only one image is ever shown:
   - resting state = CV-Forward.webp
   - pressed/open state = CV-Back.webp
   The old OPEN CV prompt is removed. The interaction remains BIO-style,
   but launches the CV reader instead of the BIO information panel.
   ========================================================= */
.ldg1[data-ldg1-build="V142"] .ldg1__cv-character-prompt {
	display: none !important;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-character .ldg1__hologram-figure {
	position: absolute;
	inset: 0;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-character-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: 50% 100% !important;
	opacity: 1 !important;
	transform: translate3d(0, 0, 0) scale(1) !important;
	transition: filter 220ms ease, transform 220ms ease;
}

.ldg1[data-ldg1-build="V142"].is-cv-character-pushed .ldg1__cv-character-img,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ldg1__cv-character-img,
.ldg1[data-ldg1-build="V142"].is-cv-reader-opening .ldg1__cv-character-img {
	opacity: 1 !important;
	transform: translate3d(0, 0, 0) scale(1.002) !important;
	filter:
		brightness(1)
		contrast(1.02)
		drop-shadow(0 10px 16px rgba(0, 0, 0, .36))
		drop-shadow(0 0 14px rgba(95, 170, 255, .14)) !important;
}


/* =========================================================
   V142 FINAL LOCK — CV TRIGGER CLICK / LAUNCH FIX
   The CV character is now a real button and uses capture-phase
   interception, matching the proven BIO interaction so the gallery's
   horizontal drag system cannot consume the activation.
   ========================================================= */
.ldg1[data-ldg1-build="V142"] button.ldg1__cv-character,
.ldg1[data-ldg1-build="V142"] button.ldg1__cv-character:hover,
.ldg1[data-ldg1-build="V142"] button.ldg1__cv-character:focus,
.ldg1[data-ldg1-build="V142"] button.ldg1__cv-character:focus-visible,
.ldg1[data-ldg1-build="V142"] button.ldg1__cv-character:active {
	appearance: none !important;
	-webkit-appearance: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	font: inherit !important;
	color: inherit !important;
	overflow: visible !important;
	pointer-events: auto !important;
	cursor: pointer !important;
	-webkit-tap-highlight-color: transparent;
}

.ldg1[data-ldg1-build="V142"] button.ldg1__cv-character:focus-visible {
	outline: 2px solid rgba(255, 217, 132, .86) !important;
	outline-offset: 5px !important;
}

.ldg1[data-ldg1-build="V142"] button.ldg1__cv-character > * {
	pointer-events: none !important;
}


/* =========================================================
   V142 FINAL LOCK — CV CHARACTER SWAP + READER REDESIGN
   - Fix the room-two CV character so only one artwork state is visible
     at a time and the forward image visibly swaps to the back image
     before the reader opens.
   - Redesign the CV reader to sit more like the BIO panel: a tighter
     portrait reader, no oversized outer frame, correctly oriented hands
     gripping the page sides, gentle hand motion, refined controls above
     the page, and a Close button in the top-right corner of the viewer.
   ========================================================= */

.ldg1[data-ldg1-build="V142"] .ldg1__cv-character {
	cursor: pointer;
	background: transparent;
	border: 0;
	padding: 0;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-character .ldg1__hologram-figure {
	position: absolute;
	inset: 0;
	overflow: visible;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-character-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: 50% 100% !important;
	will-change: opacity, transform;
	transition: opacity 240ms ease, transform 340ms cubic-bezier(.2,.82,.2,1), filter 280ms ease;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-character-img--forward {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-character-img--back {
	opacity: 0;
	transform: translate3d(0, 4px, 0) scale(.988);
}

.ldg1[data-ldg1-build="V142"].is-cv-character-pushed .ldg1__cv-character-img--forward,
.ldg1[data-ldg1-build="V142"].is-cv-reader-opening .ldg1__cv-character-img--forward,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ldg1__cv-character-img--forward {
	opacity: 0;
	transform: translate3d(0, -2px, 0) scale(.992);
}

.ldg1[data-ldg1-build="V142"].is-cv-character-pushed .ldg1__cv-character-img--back,
.ldg1[data-ldg1-build="V142"].is-cv-reader-opening .ldg1__cv-character-img--back,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ldg1__cv-character-img--back {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-character-prompt {
	display: none !important;
}

























































































.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ldg1__viewport,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ldg1__hud,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ld-audio-console-shell,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ld-audio-blackhole-tab,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ldg1__selection,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ldg1__instruction,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ldg1__page-link {
	pointer-events: none !important;
}








/* =========================================================
   V142 FINAL LOCK — CV CHARACTER USES THE WORKING BIO PATTERN

   V125 still changed the forward image source in JavaScript while also
   revealing the separately rendered back image. That could place two copies
   of CV-Back on screen at once. V142 removes source swapping completely and
   follows the proven BIO implementation instead:

   - both transparent assets share the same exact physical canvas
   - the forward/lead asset is the only visible resting image
   - clicking adds is-cv-pushed to the character trigger
   - that class crossfades lead out and push in
   - closing the CV reader removes the class and restores the lead asset

   These rules are deliberately final, highly scoped and !important so no
   earlier CV safeguards can force both images visible.
   ========================================================= */

.ldg1[data-ldg1-build="V142"] .ldg1__cv-character .ldg1__hologram-figure {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	overflow: visible !important;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-character .ldg1__cv-character-img {
	position: absolute !important;
	inset: 0 !important;
	left: 0 !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain !important;
	object-position: 50% 100% !important;
	visibility: visible !important;
	pointer-events: none !important;
	transform: none !important;
	transition:
		opacity 760ms cubic-bezier(.22,.61,.36,1),
		filter 280ms ease !important;
}

/* Resting state: Forward only. */
.ldg1[data-ldg1-build="V142"] .ldg1__cv-character:not(.is-cv-pushed) .ldg1__cv-lead-v142 {
	z-index: 2 !important;
	opacity: 1 !important;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-character:not(.is-cv-pushed) .ldg1__cv-push-v142 {
	z-index: 1 !important;
	opacity: 0 !important;
}

/* Active/open state: Back only. */
.ldg1[data-ldg1-build="V142"] .ldg1__cv-character.is-cv-pushed .ldg1__cv-lead-v142 {
	z-index: 1 !important;
	opacity: 0 !important;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-character.is-cv-pushed .ldg1__cv-push-v142 {
	z-index: 2 !important;
	opacity: 1 !important;
}

/* Keep Back visible for the entire time the PDF reader is open. */
.ldg1[data-ldg1-build="V142"].is-cv-reader-opening
.ldg1__cv-character .ldg1__cv-lead-v142,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open
.ldg1__cv-character .ldg1__cv-lead-v142 {
	z-index: 1 !important;
	opacity: 0 !important;
}

.ldg1[data-ldg1-build="V142"].is-cv-reader-opening
.ldg1__cv-character .ldg1__cv-push-v142,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open
.ldg1__cv-character .ldg1__cv-push-v142 {
	z-index: 2 !important;
	opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
	.ldg1[data-ldg1-build="V142"] .ldg1__cv-character .ldg1__cv-character-img {
		transition-duration: 1ms !important;
	}
}


/* =========================================================
   V142 ABSOLUTE FINAL LOCK — ONE CV CHARACTER IMAGE ONLY

   V126 still rendered two physical image layers. V142 removes the second
   layer completely and changes one image source between CV-Forward and
   CV-Back. The Back pose is held for 1.5 seconds before the reader appears.
   ========================================================= */
.ldg1[data-ldg1-build="V142"] .ldg1__cv-character .ldg1__hologram-figure {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	overflow: visible !important;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-character .ldg1__cv-single-image-v142 {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain !important;
	object-position: 50% 100% !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	pointer-events: none !important;
	transition: filter 280ms ease !important;
}

/* Defensive cache guard for stale two-layer markup. */
.ldg1[data-ldg1-build="V142"] .ldg1__cv-character .ldg1__cv-character-img--back,
.ldg1[data-ldg1-build="V142"] .ldg1__cv-character .ldg1__cv-push-v142 {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
}

.ldg1[data-ldg1-build="V142"].is-cv-reader-opening .ldg1__cv-single-image-v142,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ldg1__cv-single-image-v142,
.ldg1[data-ldg1-build="V142"] .ldg1__cv-character.is-cv-pushed .ldg1__cv-single-image-v142 {
	opacity: 1 !important;
	visibility: visible !important;
}


/* =========================================================
   V142 FINAL LOCK — CV READER LAYOUT REFINEMENT
   - Move the hands further away from the PDF edges and slightly lower
   - Pull the top controls into a tighter cluster
   - Move the Close control so it sits outside the page and appears to
     emerge from behind the top-right edge instead of covering content
   - The backdrop click-to-close behaviour remains active
   ========================================================= */




































/* =========================================================
   V142 ABSOLUTE FINAL LOCK — EXACT CV CHARACTER SEQUENCE

   The sequence is intentionally driven by one physical image element:
   1. Forward is the only resting pose.
   2. A 1.5s fade-through transition changes Forward to Back.
   3. Back remains fully visible for 1.5s before the CV panel opens.
   4. Back remains unchanged for the entire time the panel is open.
   5. After the panel has fully closed, Back remains for 1.5s.
   6. A 1.5s fade-through transition restores Forward.

   A CSS custom property controlled by the V142 state machine is used so
   older opacity rules cannot stop the transition or reveal a duplicate.
   ========================================================= */
.ldg1[data-ldg1-build="V142"] .ldg1__cv-character .ldg1__cv-single-image-v142 {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain !important;
	object-position: 50% 100% !important;
	opacity: var(--ldg1-cv-pose-opacity, 1) !important;
	visibility: visible !important;
	pointer-events: none !important;
	transform: none !important;
	transition: opacity 750ms cubic-bezier(.22,.61,.36,1) !important;
	will-change: opacity;
}

/* Any stale two-layer markup from an old cache must never be visible. */
.ldg1[data-ldg1-build="V142"] .ldg1__cv-character .ldg1__cv-character-img--back,
.ldg1[data-ldg1-build="V142"] .ldg1__cv-character .ldg1__cv-push-v142,
.ldg1[data-ldg1-build="V142"] .ldg1__cv-character img:not(.ldg1__cv-single-image-v142) {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
}

.ldg1[data-ldg1-build="V142"].is-cv-sequence-locked .ldg1__cv-character {
	pointer-events: none !important;
	cursor: default !important;
}

.ldg1[data-ldg1-build="V142"].is-cv-opening-hold .ldg1__cv-single-image-v142,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ldg1__cv-single-image-v142,
.ldg1[data-ldg1-build="V142"].is-cv-reader-closing .ldg1__cv-single-image-v142,
.ldg1[data-ldg1-build="V142"].is-cv-reader-return-hold .ldg1__cv-single-image-v142 {
	opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
	.ldg1[data-ldg1-build="V142"] .ldg1__cv-character .ldg1__cv-single-image-v142 {
		transition-duration: 1ms !important;
	}
}


/* =========================================================
   V142 ABSOLUTE FINAL LOCK — BIO-PATTERN CV POSE SEQUENCE

   This deliberately mirrors the working BIO character implementation:
   two images occupy the same physical canvas and only their opacity changes.
   JavaScript never rewrites either image source.

   Visual states:
   - forward: only CV-Forward is visible
   - to-back: 1.5s Forward -> Back crossfade
   - back-hold / panel-open / panel-closing / back-after-close:
     only CV-Back is visible
   - to-forward: 1.5s Back -> Forward crossfade
   ========================================================= */
.ldg1[data-ldg1-build="V142"] .ldg1__room--two >
button.ldg1__cv-character[data-ldg1-cv-open] .ldg1__cv-character-visual-v142 {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	pointer-events: none !important;
}

.ldg1[data-ldg1-build="V142"] .ldg1__room--two >
button.ldg1__cv-character[data-ldg1-cv-open] .ldg1__cv-character-visual-v142 >
img.ldg1__cv-forward-v142,
.ldg1[data-ldg1-build="V142"] .ldg1__room--two >
button.ldg1__cv-character[data-ldg1-cv-open] .ldg1__cv-character-visual-v142 >
img.ldg1__cv-back-v142 {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain !important;
	object-position: 50% 100% !important;
	pointer-events: none !important;
	transform: none !important;
	filter:
		brightness(.98)
		contrast(1.02)
		drop-shadow(0 10px 16px rgba(0, 0, 0, .36))
		drop-shadow(0 0 14px rgba(95, 170, 255, .14)) !important;
	transition: opacity 1500ms cubic-bezier(.22,.61,.36,1) !important;
	will-change: opacity;
}

/* Resting state: Forward only. */
.ldg1[data-ldg1-build="V142"][data-ldg1-cv-sequence="forward"] .ldg1__room--two >
button.ldg1__cv-character[data-ldg1-cv-open] .ldg1__cv-character-visual-v142 >
img.ldg1__cv-forward-v142 {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	z-index: 3 !important;
}

.ldg1[data-ldg1-build="V142"][data-ldg1-cv-sequence="forward"] .ldg1__room--two >
button.ldg1__cv-character[data-ldg1-cv-open] .ldg1__cv-character-visual-v142 >
img.ldg1__cv-back-v142 {
	display: block !important;
	opacity: 0 !important;
	visibility: hidden !important;
	z-index: 2 !important;
}

/* 1.5 second Forward -> Back transition. */
.ldg1[data-ldg1-build="V142"][data-ldg1-cv-sequence="to-back"] .ldg1__room--two >
button.ldg1__cv-character[data-ldg1-cv-open] .ldg1__cv-character-visual-v142 >
img.ldg1__cv-forward-v142 {
	display: block !important;
	opacity: 0 !important;
	visibility: visible !important;
	z-index: 3 !important;
}

.ldg1[data-ldg1-build="V142"][data-ldg1-cv-sequence="to-back"] .ldg1__room--two >
button.ldg1__cv-character[data-ldg1-cv-open] .ldg1__cv-character-visual-v142 >
img.ldg1__cv-back-v142 {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	z-index: 4 !important;
}

/* All settled Back states: Back only. */
.ldg1[data-ldg1-build="V142"][data-ldg1-cv-sequence="back-hold"] .ldg1__cv-forward-v142,
.ldg1[data-ldg1-build="V142"][data-ldg1-cv-sequence="panel-open"] .ldg1__cv-forward-v142,
.ldg1[data-ldg1-build="V142"][data-ldg1-cv-sequence="panel-closing"] .ldg1__cv-forward-v142,
.ldg1[data-ldg1-build="V142"][data-ldg1-cv-sequence="back-after-close"] .ldg1__cv-forward-v142 {
	display: block !important;
	opacity: 0 !important;
	visibility: hidden !important;
	z-index: 2 !important;
}

.ldg1[data-ldg1-build="V142"][data-ldg1-cv-sequence="back-hold"] .ldg1__cv-back-v142,
.ldg1[data-ldg1-build="V142"][data-ldg1-cv-sequence="panel-open"] .ldg1__cv-back-v142,
.ldg1[data-ldg1-build="V142"][data-ldg1-cv-sequence="panel-closing"] .ldg1__cv-back-v142,
.ldg1[data-ldg1-build="V142"][data-ldg1-cv-sequence="back-after-close"] .ldg1__cv-back-v142 {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	z-index: 4 !important;
}

/* 1.5 second Back -> Forward transition. */
.ldg1[data-ldg1-build="V142"][data-ldg1-cv-sequence="to-forward"] .ldg1__room--two >
button.ldg1__cv-character[data-ldg1-cv-open] .ldg1__cv-character-visual-v142 >
img.ldg1__cv-forward-v142 {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	z-index: 4 !important;
}

.ldg1[data-ldg1-build="V142"][data-ldg1-cv-sequence="to-forward"] .ldg1__room--two >
button.ldg1__cv-character[data-ldg1-cv-open] .ldg1__cv-character-visual-v142 >
img.ldg1__cv-back-v142 {
	display: block !important;
	opacity: 0 !important;
	visibility: visible !important;
	z-index: 3 !important;
}

.ldg1[data-ldg1-build="V142"].is-cv-sequence-locked .ldg1__cv-character {
	pointer-events: none !important;
	cursor: default !important;
}

@media (prefers-reduced-motion: reduce) {
	.ldg1[data-ldg1-build="V142"] .ldg1__room--two >
	button.ldg1__cv-character[data-ldg1-cv-open] .ldg1__cv-character-visual-v142 >
	img.ldg1__cv-forward-v142,
	.ldg1[data-ldg1-build="V142"] .ldg1__room--two >
	button.ldg1__cv-character[data-ldg1-cv-open] .ldg1__cv-character-visual-v142 >
	img.ldg1__cv-back-v142 {
		transition-duration: 1ms !important;
	}
}


/* =========================================================
   V142 ABSOLUTE FINAL LOCK — PANEL-LAUNCH FORWARD GHOST FIX

   The supplied screen recording shows the Forward pose reappearing for a
   fraction of a second while the CV panel/backdrop is being composited.
   V142 removes the inactive pose from layout after each 1.5-second crossfade.
   These rules isolate each transparent image into its own compositor layer;
   JavaScript controls display:block/none with inline !important once a pose
   has settled, so the backdrop cannot sample the inactive Forward artwork.
   ========================================================= */
.ldg1[data-ldg1-build="V142"] .ldg1__cv-character-visual-v142 {
	isolation: isolate !important;
	contain: layout paint style !important;
	transform: translateZ(0) !important;
	backface-visibility: hidden !important;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-character-visual-v142 >
img.ldg1__cv-forward-v142,
.ldg1[data-ldg1-build="V142"] .ldg1__cv-character-visual-v142 >
img.ldg1__cv-back-v142 {
	backface-visibility: hidden !important;
	-webkit-backface-visibility: hidden !important;
	transform: translateZ(0) !important;
	-webkit-transform: translateZ(0) !important;
}

/* Settled Back states must never revive Forward during panel composition. */
.ldg1[data-ldg1-build="V142"][data-ldg1-cv-sequence="back-hold"] .ldg1__cv-forward-v142,
.ldg1[data-ldg1-build="V142"][data-ldg1-cv-sequence="panel-open"] .ldg1__cv-forward-v142,
.ldg1[data-ldg1-build="V142"][data-ldg1-cv-sequence="panel-closing"] .ldg1__cv-forward-v142,
.ldg1[data-ldg1-build="V142"][data-ldg1-cv-sequence="back-after-close"] .ldg1__cv-forward-v142 {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
}

.ldg1[data-ldg1-build="V142"][data-ldg1-cv-sequence="back-hold"] .ldg1__cv-back-v142,
.ldg1[data-ldg1-build="V142"][data-ldg1-cv-sequence="panel-open"] .ldg1__cv-back-v142,
.ldg1[data-ldg1-build="V142"][data-ldg1-cv-sequence="panel-closing"] .ldg1__cv-back-v142,
.ldg1[data-ldg1-build="V142"][data-ldg1-cv-sequence="back-after-close"] .ldg1__cv-back-v142 {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
}


/* =========================================================
   V142 ABSOLUTE FINAL LOCK — ONE PHYSICAL CV POSE SURFACE

   This is the decisive fix for the recurring double-character fault.
   The character artwork is no longer rendered by two overlapping images.
   One background surface displays either Forward or Back and fades through
   transparent while its artwork changes. Therefore Forward cannot appear
   underneath Back at the end of the turn or when the CV panel is composited.
   ========================================================= */
.ldg1[data-ldg1-build="V142"] .ldg1__room--two >
button.ldg1__cv-character[data-ldg1-cv-open] .ldg1__cv-character-visual-v142 {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	overflow: visible !important;
	isolation: isolate !important;
	contain: layout paint style !important;
	pointer-events: none !important;
}

.ldg1[data-ldg1-build="V142"] .ldg1__room--two >
button.ldg1__cv-character[data-ldg1-cv-open] .ldg1__cv-pose-surface-v142 {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	background-repeat: no-repeat !important;
	background-position: 50% 100% !important;
	background-size: contain !important;
	opacity: var(--ldg1-cv-pose-opacity, 1) !important;
	visibility: visible !important;
	pointer-events: none !important;
	transform: translateZ(0) !important;
	backface-visibility: hidden !important;
	-webkit-backface-visibility: hidden !important;
	filter:
		brightness(.98)
		contrast(1.02)
		drop-shadow(0 10px 16px rgba(0, 0, 0, .36))
		drop-shadow(0 0 14px rgba(95, 170, 255, .14)) !important;
	transition: opacity var(--ldg1-cv-pose-duration, 0ms) cubic-bezier(.22,.61,.36,1) !important;
	will-change: opacity;
}

/* No image pose layer is allowed inside the V142 CV character. */
.ldg1[data-ldg1-build="V142"] .ldg1__room--two >
button.ldg1__cv-character[data-ldg1-cv-open] .ldg1__cv-character-visual-v142 > img {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
}

.ldg1[data-ldg1-build="V142"].is-cv-sequence-locked .ldg1__cv-character {
	pointer-events: none !important;
	cursor: default !important;
}

@media (prefers-reduced-motion: reduce) {
	.ldg1[data-ldg1-build="V142"] .ldg1__cv-pose-surface-v142 {
		transition-duration: 1ms !important;
	}
}


/* =========================================================
   V142 ABSOLUTE FINAL LOCK — INSTANT CV TURN
   No fade is used between CV-Forward and CV-Back. The single pose
   surface changes artwork immediately in either direction.
   ========================================================= */
.ldg1[data-ldg1-build="V142"] .ldg1__room--two >
button.ldg1__cv-character[data-ldg1-cv-open] .ldg1__cv-pose-surface-v142 {
	opacity: 1 !important;
	transition: none !important;
	animation: none !important;
	will-change: auto !important;
}


/* =========================================================
   V142 FINAL LOCK — CV PANEL DIMENSIONS + HAND PLACEMENT
   Match the CV reader footprint and hand placement more closely to the
   working BIO panel so the hands sit on the outer page edges rather than
   floating too far inside the brochure.
   ========================================================= */

/* =========================================================
   V142 AUTHORITATIVE FINAL — FUTURISTIC CV CONTROLS

   One consolidated control and reader-layout system. Earlier CV reader,
   toolbar, close-button, page-shell and hand-placement declarations have
   been removed from this complete replacement stylesheet. The character
   launch/return sequence and all unrelated gallery styling remain intact.
   ========================================================= */

html.ldg1-cv-reader-document-open,
body.ldg1-cv-reader-document-open {
	overflow: hidden !important;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-layer {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(8px, 1.6vw, 20px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 320ms ease, visibility 0s linear 320ms;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-layer.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background:
		radial-gradient(circle at 50% 34%, rgba(255, 42, 126, .13), transparent 36%),
		radial-gradient(circle at 50% 78%, rgba(255, 176, 72, .07), transparent 38%),
		rgba(0, 0, 0, .80);
	backdrop-filter: blur(9px) saturate(1.04);
	-webkit-backdrop-filter: blur(9px) saturate(1.04);
	cursor: pointer;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-dialog {
	position: relative;
	z-index: 2;
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
	outline: none;
	opacity: 0;
	transform: translate3d(0, 18px, 0) scale(.985);
	transition: opacity 300ms ease, transform 360ms cubic-bezier(.2,.82,.2,1);
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-layer.is-open .ldg1__cv-dialog {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-archive-mark,
.ldg1[data-ldg1-build="V142"] .ldg1__cv-footer,
.ldg1[data-ldg1-build="V142"] .ldg1__cv-footer-code {
	display: none !important;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-reader-stage {
	--ldg1-cv-stage-width: min(640px, calc(100vw - 24px));
	--ldg1-cv-side-gutter: 67px;
	--ldg1-cv-gutter-total: 134px;
	--ldg1-cv-page-width: max(170px, min(
		calc(var(--ldg1-cv-stage-width) - var(--ldg1-cv-gutter-total)),
		calc(70.7vh - 110px)
	));
	--ldg1-cv-toolbar-width: min(560px, calc(100vw - 28px));
	--ldg1-cv-toolbar-height: 62px;
	--ldg1-cv-close-size: 72px;
	--ldg1-cv-close-overhang: -27px;
	--ldg1-cv-hand-width: clamp(206px, 21.2vw, 328px);
	--ldg1-cv-hand-shift-left: -64%;
	--ldg1-cv-hand-shift-right: 64%;
	--ldg1-cv-hand-bottom: clamp(-112px, -6.9vw, -82px);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	width: var(--ldg1-cv-stage-width);
	max-width: calc(100vw - 12px);
	min-width: 0;
	overflow: visible;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-sr-title,
.ldg1[data-ldg1-build="V142"] .ldg1__cv-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Connected manufactured control assembly. */
.ldg1[data-ldg1-build="V142"] .ldg1__cv-toolbar {
	position: relative;
	z-index: 50;
	display: grid;
	grid-template-columns: 30fr 40fr 30fr;
	align-items: stretch;
	width: var(--ldg1-cv-toolbar-width);
	height: var(--ldg1-cv-toolbar-height);
	min-height: 44px;
	margin: 0;
	padding: 3px;
	gap: 0;
	isolation: isolate;
	filter:
		drop-shadow(0 13px 24px rgba(0, 0, 0, .56))
		drop-shadow(0 0 10px rgba(255, 43, 132, .12));
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-toolbar::before,
.ldg1[data-ldg1-build="V142"] .ldg1__cv-toolbar::after {
	content: '';
	position: absolute;
	pointer-events: none;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-toolbar::before {
	z-index: -2;
	inset: 0;
	clip-path: polygon(17px 0, calc(100% - 17px) 0, 100% 17px, 100% calc(100% - 17px), calc(100% - 17px) 100%, 17px 100%, 0 calc(100% - 17px), 0 17px);
	background:
		linear-gradient(90deg, #84672e 0 2px, transparent 2px calc(100% - 2px), #84672e calc(100% - 2px)),
		linear-gradient(180deg, #e5e7eb 0%, #5c6068 9%, #161922 18%, #07080d 78%, #707680 91%, #ddd7c9 100%);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, .15) inset,
		0 0 0 3px rgba(5, 6, 10, .88) inset;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-toolbar::after {
	z-index: -1;
	inset: 5px;
	clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
	background: linear-gradient(180deg, rgba(24, 26, 34, .98), rgba(5, 6, 10, .99));
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .08) inset,
		0 -1px 0 rgba(255, 61, 143, .14) inset;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-control,
.ldg1[data-ldg1-build="V142"] .ldg1__cv-download {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: clamp(6px, .7vw, 10px);
	min-width: 0;
	min-height: 44px;
	margin: 0;
	padding: 0 clamp(10px, 1.45vw, 20px);
	border: 0;
	border-radius: 0;
	outline: none;
	background: linear-gradient(180deg, rgba(21, 23, 31, .96), rgba(5, 6, 10, .98));
	box-shadow:
		0 1px 0 rgba(255,255,255,.06) inset,
		0 -1px 0 rgba(0,0,0,.8) inset;
	color: #f5f0e7;
	font: 700 clamp(11px, .95vw, 15px) / 1 Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: .11em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform 180ms ease, filter 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-control::before,
.ldg1[data-ldg1-build="V142"] .ldg1__cv-download::before,
.ldg1[data-ldg1-build="V142"] .ldg1__cv-download::after {
	content: '';
	position: absolute;
	pointer-events: none;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-control::before {
	inset: 2px 0;
	background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 45%, rgba(255, 42, 130, .035));
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-control--previous {
	z-index: 2;
	clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
	border-right: 1px solid rgba(193, 198, 208, .20);
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-control--next {
	z-index: 2;
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
	border-left: 1px solid rgba(193, 198, 208, .20);
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-download {
	z-index: 6;
	align-self: center;
	height: calc(100% + 10px);
	margin-inline: -10px;
	padding-inline: clamp(13px, 2vw, 28px);
	clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%);
	background:
		linear-gradient(180deg, rgba(73, 15, 45, .98), rgba(18, 5, 15, .99)),
		linear-gradient(90deg, transparent, rgba(255, 63, 151, .10), transparent);
	box-shadow:
		0 0 0 1px rgba(255, 92, 165, .78) inset,
		0 0 0 4px rgba(44, 10, 29, .88) inset,
		0 0 18px rgba(255, 37, 132, .26),
		0 1px 0 rgba(255,255,255,.10) inset;
	color: #ffb9da;
	letter-spacing: .075em;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-download::before {
	inset: 4px 9px;
	clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
	border: 1px solid rgba(255, 77, 157, .45);
	box-shadow: 0 0 9px rgba(255, 46, 142, .15) inset;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-download::after {
	left: 18%;
	right: 18%;
	bottom: 5px;
	height: 1px;
	background: linear-gradient(90deg, transparent, #ff4b9e, transparent);
	box-shadow: 0 0 7px #ff3b94;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-control-icon {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	width: clamp(16px, 1.4vw, 21px);
	height: clamp(16px, 1.4vw, 21px);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-control > span,
.ldg1[data-ldg1-build="V142"] .ldg1__cv-download > span {
	position: relative;
	z-index: 2;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-control:not(:disabled):hover,
.ldg1[data-ldg1-build="V142"] .ldg1__cv-download:hover {
	transform: translateY(-1px);
	filter: brightness(1.10);
	color: #fff;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-control:not(:disabled):active,
.ldg1[data-ldg1-build="V142"] .ldg1__cv-download:active {
	transform: translateY(1px);
	filter: brightness(.94);
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-control:focus-visible,
.ldg1[data-ldg1-build="V142"] .ldg1__cv-download:focus-visible {
	box-shadow:
		0 0 0 2px #fff inset,
		0 0 0 4px #ff3e98 inset,
		0 0 16px rgba(255, 56, 149, .55);
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-control:disabled {
	opacity: .38;
	filter: grayscale(.35) saturate(.55);
	cursor: not-allowed;
	transform: none !important;
	box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
}

/* Page, hand and close stacking are all tied to the same page width. */
.ldg1[data-ldg1-build="V142"] .ldg1__cv-viewer {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ldg1-cv-stage-width);
	max-width: 100%;
	min-width: 0;
	padding: 0;
	overflow: visible;
	isolation: isolate;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-shell {
	position: relative;
	z-index: 10;
	width: var(--ldg1-cv-page-width);
	max-width: 100%;
	aspect-ratio: 1000 / 1414;
	perspective: 1600px;
	--ldg1-cv-tilt-x: 0deg;
	--ldg1-cv-tilt-y: 0deg;
	transform: rotateX(var(--ldg1-cv-tilt-x)) rotateY(var(--ldg1-cv-tilt-y));
	transform-origin: 50% 50%;
	transition: transform 140ms ease;
	overflow: visible;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-aura {
	position: absolute;
	z-index: -1;
	inset: 6% -8% -3%;
	background: radial-gradient(circle at 50% 45%, rgba(255, 48, 145, .16), rgba(255, 178, 77, .05) 38%, transparent 70%);
	filter: blur(24px);
	pointer-events: none;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-turner {
	position: relative;
	width: 100%;
	height: 100%;
	border: 2px solid rgba(194, 199, 209, .58);
	border-radius: 8px;
	background: #05060a;
	box-shadow:
		0 24px 52px rgba(0,0,0,.52),
		0 0 0 3px rgba(7,8,12,.90),
		0 0 0 4px rgba(255, 57, 147, .20),
		0 1px 0 rgba(255,255,255,.18) inset;
	overflow: hidden;
	transform-style: preserve-3d;
	will-change: transform;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-image {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	background: #030408;
	user-select: none;
	-webkit-user-drag: none;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-glass {
	position: absolute;
	z-index: 2;
	inset: 0;
	background: linear-gradient(118deg, rgba(255,255,255,.08), transparent 20%, transparent 68%, rgba(255,62,150,.035));
	mix-blend-mode: screen;
	pointer-events: none;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-edge {
	position: absolute;
	z-index: 3;
	top: 0;
	bottom: 0;
	width: 12px;
	pointer-events: none;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-edge--left {
	left: 0;
	background: linear-gradient(90deg, rgba(0,0,0,.22), transparent);
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-edge--right {
	right: 0;
	background: linear-gradient(270deg, rgba(0,0,0,.22), transparent);
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-turner.is-turning-next {
	animation: ldg1CvTurnNextV142 470ms cubic-bezier(.2,.75,.2,1);
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-turner.is-turning-previous {
	animation: ldg1CvTurnPreviousV142 470ms cubic-bezier(.2,.75,.2,1);
}

@keyframes ldg1CvTurnNextV142 {
	0% { transform: rotateY(0deg) translateX(0); }
	45% { transform: rotateY(-11deg) translateX(5px); }
	100% { transform: rotateY(0deg) translateX(0); }
}

@keyframes ldg1CvTurnPreviousV142 {
	0% { transform: rotateY(0deg) translateX(0); }
	45% { transform: rotateY(11deg) translateX(-5px); }
	100% { transform: rotateY(0deg) translateX(0); }
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-hands {
	position: absolute;
	z-index: 20;
	left: 50%;
	bottom: 0;
	width: var(--ldg1-cv-page-width);
	height: 0;
	transform: translateX(-50%);
	pointer-events: none;
	user-select: none;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-hand {
	position: absolute;
	display: block;
	bottom: var(--ldg1-cv-hand-bottom);
	width: var(--ldg1-cv-hand-width);
	height: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	filter:
		drop-shadow(0 18px 30px rgba(0,0,0,.52))
		drop-shadow(0 4px 12px rgba(255, 58, 143, .07));
	transform-origin: 50% 100%;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-hand--left {
	left: 0;
	animation: ldg1CvHandLeftV142 5.2s ease-in-out -1.1s infinite;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-hand--right {
	right: 0;
	animation: ldg1CvHandRightV142 6.1s ease-in-out -3.4s infinite;
}

@keyframes ldg1CvHandLeftV142 {
	0%,100% { transform: translate3d(var(--ldg1-cv-hand-shift-left),0,0) rotate(-2.6deg); }
	28% { transform: translate3d(var(--ldg1-cv-hand-shift-left),-5px,0) rotate(-2.25deg); }
	61% { transform: translate3d(var(--ldg1-cv-hand-shift-left),2px,0) rotate(-2.8deg); }
	82% { transform: translate3d(var(--ldg1-cv-hand-shift-left),-2px,0) rotate(-2.5deg); }
}

@keyframes ldg1CvHandRightV142 {
	0%,100% { transform: translate3d(var(--ldg1-cv-hand-shift-right),1px,0) rotate(2.6deg); }
	34% { transform: translate3d(var(--ldg1-cv-hand-shift-right),-4px,0) rotate(2.9deg); }
	67% { transform: translate3d(var(--ldg1-cv-hand-shift-right),3px,0) rotate(2.3deg); }
	86% { transform: translate3d(var(--ldg1-cv-hand-shift-right),-1px,0) rotate(2.7deg); }
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-close-layer {
	position: absolute;
	z-index: 40;
	top: 0;
	left: 50%;
	width: var(--ldg1-cv-page-width);
	height: 0;
	transform: translateX(-50%);
	pointer-events: none;
	overflow: visible;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-close--floating {
	position: absolute;
	top: -18px;
	right: var(--ldg1-cv-close-overhang);
	display: grid;
	place-items: center;
	width: var(--ldg1-cv-close-size);
	height: var(--ldg1-cv-close-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	outline: none;
	background:
		radial-gradient(circle at 38% 32%, rgba(77, 31, 55, .92), rgba(8, 7, 12, .98) 57%, #020308 100%);
	box-shadow:
		0 0 0 2px rgba(224, 229, 236, .90),
		0 0 0 5px rgba(66, 67, 75, .95),
		0 0 0 7px rgba(255, 53, 145, .88),
		0 0 0 10px rgba(13, 14, 20, .94),
		0 0 22px rgba(255, 41, 137, .48),
		0 12px 24px rgba(0,0,0,.44),
		0 0 16px rgba(255, 53, 145, .16) inset;
	color: #ffe8f3;
	cursor: pointer;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
	transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-close--floating::before,
.ldg1[data-ldg1-build="V142"] .ldg1__cv-close--floating::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-close--floating::before {
	inset: 7px;
	border: 1px solid rgba(255, 91, 166, .55);
	box-shadow: 0 0 10px rgba(255, 44, 141, .34) inset;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-close--floating::after {
	inset: 2px;
	border: 1px solid rgba(255,255,255,.16);
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-close--floating svg {
	position: relative;
	z-index: 2;
	width: 54%;
	height: 54%;
	fill: none;
	stroke: currentColor;
	stroke-width: 3;
	stroke-linecap: round;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-close--floating:hover {
	transform: translateY(-1px);
	filter: brightness(1.10);
	box-shadow:
		0 0 0 2px #fff,
		0 0 0 5px rgba(79, 81, 91, .98),
		0 0 0 7px #ff4197,
		0 0 0 10px rgba(13,14,20,.96),
		0 0 28px rgba(255, 45, 143, .62),
		0 12px 24px rgba(0,0,0,.44);
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-close--floating:active {
	transform: translateY(1px);
	filter: brightness(.94);
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-close--floating:focus-visible {
	box-shadow:
		0 0 0 2px #fff,
		0 0 0 5px #161922,
		0 0 0 8px #ff3f98,
		0 0 0 11px rgba(255,255,255,.70),
		0 0 28px rgba(255, 45, 143, .65);
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-layer.is-open .ldg1__cv-close--floating {
	animation: ldg1CvCloseRevealV142 360ms cubic-bezier(.2,.82,.2,1) both;
}

@keyframes ldg1CvCloseRevealV142 {
	0% { opacity: 0; transform: translate3d(-10px, 10px, 0) scale(.88); }
	100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-meta {
	position: relative;
	z-index: 25;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: -8px;
	pointer-events: none;
}

.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: .48rem .84rem;
	border: 1px solid rgba(255, 78, 156, .22);
	border-radius: 999px;
	background: rgba(8, 7, 13, .72);
	box-shadow: 0 8px 18px rgba(0,0,0,.24);
	color: rgba(255, 220, 238, .82);
	font: 700 10px/1 Inter, system-ui, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ldg1__viewport,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ldg1__hud,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ld-audio-console-shell,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ld-audio-blackhole-tab,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ldg1__selection,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ldg1__instruction,
.ldg1[data-ldg1-build="V142"].is-cv-reader-open .ldg1__page-link {
	pointer-events: none !important;
}

@media (max-width: 1100px) {
	.ldg1[data-ldg1-build="V142"] .ldg1__cv-reader-stage {
		--ldg1-cv-stage-width: min(590px, calc(100vw - 18px));
		--ldg1-cv-side-gutter: 59px;
		--ldg1-cv-gutter-total: 118px;
		--ldg1-cv-toolbar-width: min(540px, calc(100vw - 24px));
		--ldg1-cv-close-size: 66px;
		--ldg1-cv-close-overhang: -23px;
		--ldg1-cv-hand-width: clamp(188px, 23vw, 278px);
		--ldg1-cv-hand-shift-left: -63%;
		--ldg1-cv-hand-shift-right: 63%;
		--ldg1-cv-hand-bottom: clamp(-98px, -7.5vw, -72px);
	}
}

@media (max-width: 767px) {
	.ldg1[data-ldg1-build="V142"] .ldg1__cv-layer {
		padding: 6px;
	}

	.ldg1[data-ldg1-build="V142"] .ldg1__cv-reader-stage {
		--ldg1-cv-stage-width: min(520px, calc(100vw - 12px));
		--ldg1-cv-side-gutter: 46px;
		--ldg1-cv-gutter-total: 92px;
		--ldg1-cv-toolbar-width: calc(100vw - 12px);
		--ldg1-cv-toolbar-height: 50px;
		--ldg1-cv-close-size: 54px;
		--ldg1-cv-close-overhang: -17px;
		--ldg1-cv-hand-width: clamp(156px, 27vw, 210px);
		--ldg1-cv-hand-shift-left: -60%;
		--ldg1-cv-hand-shift-right: 60%;
		--ldg1-cv-hand-bottom: clamp(-84px, -8.4vw, -60px);
		gap: 18px;
	}

	.ldg1[data-ldg1-build="V142"] .ldg1__cv-toolbar {
		grid-template-columns: 29fr 42fr 29fr;
		padding: 2px;
	}

	.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-control,
	.ldg1[data-ldg1-build="V142"] .ldg1__cv-download {
		gap: 5px;
		min-height: 44px;
		padding-inline: clamp(5px, 2.5vw, 11px);
		font-size: clamp(9px, 3vw, 12px);
		letter-spacing: .065em;
	}

	.ldg1[data-ldg1-build="V142"] .ldg1__cv-download {
		height: calc(100% + 7px);
		margin-inline: -6px;
		padding-inline: clamp(8px, 2.6vw, 13px);
		letter-spacing: .035em;
	}

	.ldg1[data-ldg1-build="V142"] .ldg1__cv-control-icon {
		width: 16px;
		height: 16px;
	}

	.ldg1[data-ldg1-build="V142"] .ldg1__cv-close--floating {
		top: -12px;
	}

	.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-label {
		min-height: 25px;
		padding: .40rem .68rem;
		font-size: 9px;
	}
}

@media (max-width: 380px) {
	.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-control,
	.ldg1[data-ldg1-build="V142"] .ldg1__cv-download {
		gap: 3px;
		padding-inline: 4px;
		font-size: 9px;
		letter-spacing: .035em;
	}

	.ldg1[data-ldg1-build="V142"] .ldg1__cv-download {
		padding-inline: 6px;
	}

	.ldg1[data-ldg1-build="V142"] .ldg1__cv-control-icon {
		width: 14px;
		height: 14px;
	}
}

@media (max-height: 520px) and (orientation: landscape) {
	.ldg1[data-ldg1-build="V142"] .ldg1__cv-reader-stage {
		--ldg1-cv-toolbar-height: 46px;
		--ldg1-cv-close-size: 50px;
		--ldg1-cv-close-overhang: -15px;
		gap: 12px;
	}

	.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-control,
	.ldg1[data-ldg1-build="V142"] .ldg1__cv-download {
		min-height: 42px;
		font-size: 10px;
	}

	.ldg1[data-ldg1-build="V142"] .ldg1__cv-close--floating {
		top: -8px;
	}

	.ldg1[data-ldg1-build="V142"] .ldg1__cv-meta {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1[data-ldg1-build="V142"] .ldg1__cv-layer,
	.ldg1[data-ldg1-build="V142"] .ldg1__cv-dialog,
	.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-control,
	.ldg1[data-ldg1-build="V142"] .ldg1__cv-download,
	.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-shell,
	.ldg1[data-ldg1-build="V142"] .ldg1__cv-page-turner,
	.ldg1[data-ldg1-build="V142"] .ldg1__cv-close--floating,
	.ldg1[data-ldg1-build="V142"] .ldg1__cv-hand {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
	}
}


/* =========================================================
   V142 FINAL LOCK — THIRD-ROOM ALBUM CHARACTER

   Coordinate method
   - The supplied green dots represent the TOP-left and TOP-right corners
     of the complete 581 × 900 Album-Character.webp canvas.
   - The character is therefore positioned from top/left, never bottom.
   - The native portrait ratio is preserved and the room clips the small
     intentional lower overhang at the bottom of the viewport.
   - Placement scales with Gallery-1.jpg because the room and character
     use the same percentage coordinate system.
   ========================================================= */

.ldg1[data-ldg1-build="V142"] .ldg1__room--three >
.ldg1__album-character[data-ldg1-album-character-coordinate-lock-v142] {
	position: absolute;
	z-index: 18;
	display: block;
	left: 27.964203% !important;
	top: 42.698318% !important;
	bottom: auto !important;
	width: 15.491257% !important;
	height: auto !important;
	margin: 0;
	padding: 0;
	border: 0;
	line-height: 0;
	pointer-events: none !important;
	user-select: none;
	-webkit-user-select: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translate3d(var(--ldg1-album-shift, 0px), 0, 0);
	transform-origin: 50% 0;
	will-change: transform;
}

.ldg1[data-ldg1-build="V142"] .ldg1__room--three >
.ldg1__album-character[data-ldg1-album-character-coordinate-lock-v142] .ldg1__album-character-img {
	position: relative;
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0;
	padding: 0;
	border: 0;
	object-fit: contain;
	object-position: 50% 0;
	pointer-events: none !important;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	filter:
		drop-shadow(0 14px 18px rgba(0, 0, 0, .34))
		drop-shadow(0 0 10px rgba(255, 191, 37, .08));
}

/* Framed artwork and its controls must always remain above the character. */
.ldg1[data-ldg1-build="V142"] .ldg1__room--three .ldg1__exhibit,
.ldg1[data-ldg1-build="V142"] .ldg1__room--three .ldg1__exhibit:hover,
.ldg1[data-ldg1-build="V142"] .ldg1__room--three .ldg1__exhibit:focus,
.ldg1[data-ldg1-build="V142"] .ldg1__room--three .ldg1__exhibit:focus-visible,
.ldg1[data-ldg1-build="V142"] .ldg1__room--three .ldg1__exhibit:active {
	z-index: 20 !important;
}

@media (prefers-reduced-motion: reduce) {
	.ldg1[data-ldg1-build="V142"] .ldg1__album-character {
		transition: none !important;
	}
}


/* =========================================================
   V142 FINAL LOCK — INTERACTIVE THIRD-ROOM ALBUM CHARACTER

   Behaviour
   - Album-Character.webp is the only resting artwork.
   - Clicking/tapping changes the same physical image element instantly to
     Album-Character-Look.webp, so no duplicate pose can appear.
   - The link opens the Who Am I EP page in a separate browser tab using a
     real target=_blank anchor, preserving browser popup reliability.
   - The original Album character returns when this gallery tab regains focus,
     becomes visible again, or after a short fallback interval.

   Placement
   - The V137 top-left/top-right green-dot coordinate lock is unchanged.
   - Both assets use the exact same element, dimensions and top-based position.
   ========================================================= */

.ldg1[data-ldg1-build="V142"] .ldg1__room--three >
.ldg1__album-character[data-ldg1-album-character-coordinate-lock-v142] {
	pointer-events: auto !important;
	cursor: pointer;
	text-decoration: none !important;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.ldg1[data-ldg1-build="V142"] .ldg1__room--three >
.ldg1__album-character[data-ldg1-album-character-coordinate-lock-v142] .ldg1__album-character-img {
	pointer-events: none !important;
	transition: filter 180ms ease, transform 180ms ease;
	transform: translate3d(0, 0, 0);
}

.ldg1[data-ldg1-build="V142"] .ldg1__room--three >
.ldg1__album-character[data-ldg1-album-character-coordinate-lock-v142]:hover .ldg1__album-character-img,
.ldg1[data-ldg1-build="V142"] .ldg1__room--three >
.ldg1__album-character[data-ldg1-album-character-coordinate-lock-v142]:focus-visible .ldg1__album-character-img {
	filter:
		drop-shadow(0 14px 18px rgba(0, 0, 0, .34))
		drop-shadow(0 0 14px rgba(255, 191, 37, .18));
}

.ldg1[data-ldg1-build="V142"] .ldg1__room--three >
.ldg1__album-character[data-ldg1-album-character-coordinate-lock-v142]:focus-visible {
	filter: drop-shadow(0 0 9px rgba(255, 211, 95, .32));
}

.ldg1[data-ldg1-build="V142"] .ldg1__room--three >
.ldg1__album-character[data-ldg1-album-character-coordinate-lock-v142]:active .ldg1__album-character-img,
.ldg1[data-ldg1-build="V142"] .ldg1__room--three >
.ldg1__album-character[data-ldg1-album-character-coordinate-lock-v142].is-album-looking .ldg1__album-character-img {
	transform: translate3d(0, 0, 0) scale(1.002);
}

@media (prefers-reduced-motion: reduce) {
	.ldg1[data-ldg1-build="V142"] .ldg1__album-character,
	.ldg1[data-ldg1-build="V142"] .ldg1__album-character-img {
		transition: none !important;
	}
}


/* =========================================================
   LORD DANCER — SCOPED COOKIEYES DESIGN
   Active only on body.ld-cookie-theme--lord-dancer
   Dual-theme build: August 2026
   ========================================================= */


/* =========================================================
   1. DESIGN VARIABLES
   ========================================================= */

body.ld-cookie-theme--lord-dancer {
	--ld-cookie-black: #060605;
	--ld-cookie-black-soft: #11100c;
	--ld-cookie-panel: rgba(10, 9, 7, 0.975);
	--ld-cookie-panel-light: rgba(28, 24, 15, 0.96);

	--ld-cookie-gold: #d3a72d;
	--ld-cookie-gold-light: #f5d76e;
	--ld-cookie-gold-bright: #fff0aa;
	--ld-cookie-gold-dark: #8e6811;

	--ld-cookie-cream: #fff9e9;
	--ld-cookie-text: #ded6c2;
	--ld-cookie-muted: #c9c0aa;

	--ld-cookie-line: rgba(211, 167, 45, 0.52);
	--ld-cookie-line-soft: rgba(211, 167, 45, 0.22);

	--ld-cookie-logo:
		url("https://www.simme.co.uk/wp-content/uploads/2026/07/Gold-logo.webp");
}


/* =========================================================
   2. GLOBAL COOKIEYES BOX SIZING
   Prevents buttons and panels overflowing
   ========================================================= */

body.ld-cookie-theme--lord-dancer .cky-consent-container,
body.ld-cookie-theme--lord-dancer .cky-consent-container *,
body.ld-cookie-theme--lord-dancer .cky-consent-container *::before,
body.ld-cookie-theme--lord-dancer .cky-consent-container *::after,
body.ld-cookie-theme--lord-dancer .cky-preference-center,
body.ld-cookie-theme--lord-dancer .cky-preference-center *,
body.ld-cookie-theme--lord-dancer .cky-preference-center *::before,
body.ld-cookie-theme--lord-dancer .cky-preference-center *::after,
body.ld-cookie-theme--lord-dancer .cky-btn-revisit-wrapper,
body.ld-cookie-theme--lord-dancer .cky-btn-revisit-wrapper *,
body.ld-cookie-theme--lord-dancer .cky-btn-revisit-wrapper *::before,
body.ld-cookie-theme--lord-dancer .cky-btn-revisit-wrapper *::after {
	box-sizing: border-box !important;
}


/* =========================================================
   3. PAGE OVERLAY
   ========================================================= */

body.ld-cookie-theme--lord-dancer .cky-overlay {
	background:
		radial-gradient(
			circle at 50% 65%,
			rgba(211, 167, 45, 0.08) 0%,
			rgba(0, 0, 0, 0.52) 42%,
			rgba(0, 0, 0, 0.78) 100%
		) !important;

	backdrop-filter: blur(5px) !important;
	-webkit-backdrop-filter: blur(5px) !important;
}


/* =========================================================
   4. MAIN COOKIE BANNER POSITION
   ========================================================= */

body.ld-cookie-theme--lord-dancer .cky-consent-container {
	position: fixed !important;

	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;

	width: min(760px, calc(100vw - 40px)) !important;
	max-width: 760px !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;

	transform: translate(-50%, -50%) !important;

	z-index: 2147483646 !important;

	font-family: inherit !important;
}


/* =========================================================
   5. MAIN COOKIE BANNER PANEL
   ========================================================= */

body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-consent-bar {
	position: relative !important;

	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;

	padding:
		clamp(27px, 4vw, 43px)
		clamp(23px, 4vw, 42px)
		clamp(24px, 4vw, 38px) !important;

	overflow: hidden !important;

	background:
		linear-gradient(
			145deg,
			rgba(30, 26, 16, 0.98) 0%,
			rgba(8, 8, 7, 0.985) 52%,
			rgba(17, 14, 8, 0.985) 100%
		) !important;

	border: 1px solid rgba(211, 167, 45, 0.86) !important;
	border-radius: 18px !important;

	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.9),
		0 0 25px rgba(211, 167, 45, 0.17),
		0 20px 70px rgba(0, 0, 0, 0.82),
		inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;

	font-family: inherit !important;
}


/* Illuminated gold line across the top */

body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-consent-bar::before {
	content: "" !important;

	position: absolute !important;
	top: 0 !important;
	left: 8% !important;

	width: 84% !important;
	height: 2px !important;

	background:
		linear-gradient(
			90deg,
			transparent 0%,
			var(--ld-cookie-gold) 20%,
			var(--ld-cookie-gold-bright) 50%,
			var(--ld-cookie-gold) 80%,
			transparent 100%
		) !important;

	box-shadow:
		0 0 7px rgba(211, 167, 45, 0.85),
		0 0 17px rgba(211, 167, 45, 0.48) !important;

	pointer-events: none !important;
}


/* Subtle gallery spotlight */

body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-consent-bar::after {
	content: "" !important;

	position: absolute !important;
	top: -130px !important;
	left: 50% !important;

	width: 480px !important;
	height: 270px !important;

	transform: translateX(-50%) !important;

	background:
		radial-gradient(
			ellipse,
			rgba(211, 167, 45, 0.12) 0%,
			rgba(211, 167, 45, 0.035) 43%,
			transparent 73%
		) !important;

	pointer-events: none !important;
}


/* Keep banner content above decorative effects */

body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-notice,
body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-notice-group {
	position: relative !important;
	z-index: 2 !important;

	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}


/* =========================================================
   6. MAIN COOKIE TITLE AND LOGO
   ========================================================= */

body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-title {
	position: relative !important;

	display: flex !important;
	align-items: center !important;

	width: 100% !important;
	min-height: 54px !important;

	margin: 0 0 23px !important;
	padding: 0 0 0 68px !important;

	color: var(--ld-cookie-cream) !important;

	font-family: inherit !important;
	font-size: clamp(28px, 4.4vw, 42px) !important;
	font-weight: 800 !important;
	line-height: 1.08 !important;
	letter-spacing: -0.025em !important;

	text-shadow:
		0 3px 3px rgba(0, 0, 0, 0.92),
		0 0 18px rgba(211, 167, 45, 0.1) !important;
}


/* White Lord Dancer logo */

body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-title::before {
	content: "" !important;

	position: absolute !important;
	top: 50% !important;
	left: 0 !important;

	width: 52px !important;
	height: 52px !important;

	transform: translateY(-50%) !important;

	background-color: var(--ld-cookie-cream) !important;

	-webkit-mask-image: var(--ld-cookie-logo) !important;
	mask-image: var(--ld-cookie-logo) !important;

	-webkit-mask-repeat: no-repeat !important;
	mask-repeat: no-repeat !important;

	-webkit-mask-position: center !important;
	mask-position: center !important;

	-webkit-mask-size: contain !important;
	mask-size: contain !important;

	filter:
		drop-shadow(0 0 5px rgba(255, 255, 255, 0.2))
		drop-shadow(0 0 10px rgba(211, 167, 45, 0.2)) !important;

	pointer-events: none !important;
}


/* Gold line under the title text */

body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-title::after {
	content: "" !important;

	position: absolute !important;
	left: 68px !important;
	bottom: -12px !important;

	width: 72px !important;
	height: 3px !important;

	margin: 0 !important;

	background:
		linear-gradient(
			90deg,
			var(--ld-cookie-gold-light),
			rgba(211, 167, 45, 0.1)
		) !important;

	box-shadow:
		0 0 8px rgba(211, 167, 45, 0.45) !important;

	pointer-events: none !important;
}


/* =========================================================
   7. MAIN COOKIE DESCRIPTION
   ========================================================= */

body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-notice-des {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;
}

body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-notice-des,
body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-notice-des p {
	color: var(--ld-cookie-text) !important;

	font-family: inherit !important;
	font-size: clamp(15px, 2vw, 18px) !important;
	font-weight: 400 !important;
	line-height: 1.68 !important;
	letter-spacing: 0.005em !important;
}

body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-notice-des p {
	margin: 0 !important;
}

body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-notice-des a {
	color: var(--ld-cookie-gold-light) !important;

	text-decoration-color: rgba(211, 167, 45, 0.58) !important;
	text-underline-offset: 3px !important;
}

body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-notice-des a:hover {
	color: var(--ld-cookie-gold-bright) !important;
}


/* =========================================================
   8. MAIN BANNER BUTTON LAYOUT
   ========================================================= */

body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-notice-btn-wrapper {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 13px !important;

	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;

	margin: 28px 0 0 !important;
	padding: 0 !important;
}


/* All main banner buttons */

body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-notice-btn-wrapper .cky-btn,
body.ld-cookie-theme--lord-dancer .cky-consent-container [data-cky-tag="customize-button"],
body.ld-cookie-theme--lord-dancer .cky-consent-container [data-cky-tag="reject-button"],
body.ld-cookie-theme--lord-dancer .cky-consent-container [data-cky-tag="accept-button"] {
	position: relative !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	min-height: 55px !important;

	margin: 0 !important;
	padding: 12px 14px !important;

	border-radius: 8px !important;

	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.025em !important;

	white-space: normal !important;
	overflow-wrap: break-word !important;
	word-break: normal !important;

	cursor: pointer !important;

	transition:
		transform 200ms ease,
		background 200ms ease,
		color 200ms ease,
		border-color 200ms ease,
		box-shadow 200ms ease !important;
}


/* Customise button */

body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-btn-customize,
body.ld-cookie-theme--lord-dancer .cky-consent-container [data-cky-tag="customize-button"] {
	color: var(--ld-cookie-cream) !important;

	background:
		linear-gradient(
			180deg,
			rgba(211, 167, 45, 0.08),
			rgba(6, 6, 5, 0.84)
		) !important;

	border: 1px solid rgba(211, 167, 45, 0.78) !important;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 6px 18px rgba(0, 0, 0, 0.3) !important;
}


/* Reject button */

body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-btn-reject,
body.ld-cookie-theme--lord-dancer .cky-consent-container [data-cky-tag="reject-button"] {
	color: var(--ld-cookie-cream) !important;

	background:
		linear-gradient(
			180deg,
			rgba(211, 167, 45, 0.075),
			rgba(6, 6, 5, 0.9)
		) !important;

	border: 1px solid rgba(211, 167, 45, 0.78) !important;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 6px 18px rgba(0, 0, 0, 0.3) !important;
}


/* Accept button */

body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-btn-accept,
body.ld-cookie-theme--lord-dancer .cky-consent-container [data-cky-tag="accept-button"] {
	color: #080705 !important;

	background:
		linear-gradient(
			115deg,
			#fff0a5 0%,
			#f5d66d 30%,
			#d2a522 66%,
			#fff0a5 100%
		) !important;

	border: 1px solid var(--ld-cookie-gold-bright) !important;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.7),
		0 0 16px rgba(211, 167, 45, 0.24),
		0 8px 21px rgba(0, 0, 0, 0.38) !important;

	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.28) !important;
}


/* Main button hover effects */

body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-btn-customize:hover,
body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-btn-reject:hover,
body.ld-cookie-theme--lord-dancer .cky-consent-container [data-cky-tag="customize-button"]:hover,
body.ld-cookie-theme--lord-dancer .cky-consent-container [data-cky-tag="reject-button"]:hover {
	color: #080705 !important;

	background:
		linear-gradient(
			115deg,
			#fff0a5,
			#d3a72d 48%,
			#9e7414
		) !important;

	border-color: var(--ld-cookie-gold-bright) !important;

	box-shadow:
		0 0 18px rgba(211, 167, 45, 0.31),
		0 9px 24px rgba(0, 0, 0, 0.42) !important;

	transform: translateY(-2px) !important;
}

body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-btn-accept:hover,
body.ld-cookie-theme--lord-dancer .cky-consent-container [data-cky-tag="accept-button"]:hover {
	background:
		linear-gradient(
			115deg,
			#fff8d5 0%,
			#ffe58a 30%,
			#dfb52f 68%,
			#fff4bd 100%
		) !important;

	border-color: #fff7d1 !important;

	box-shadow:
		0 0 24px rgba(211, 167, 45, 0.47),
		0 10px 27px rgba(0, 0, 0, 0.47) !important;

	transform: translateY(-2px) !important;
}


/* =========================================================
   9. PREFERENCE CENTRE PANEL
   ========================================================= */

body.ld-cookie-theme--lord-dancer .cky-preference-center {
	overflow: hidden !important;

	width: min(820px, calc(100vw - 32px)) !important;
	max-width: 820px !important;
	min-width: 0 !important;

	max-height: min(850px, calc(100vh - 28px)) !important;

	background:
		linear-gradient(
			145deg,
			rgba(25, 22, 14, 0.995),
			rgba(7, 7, 6, 0.995) 53%,
			rgba(17, 14, 8, 0.995)
		) !important;

	border: 1px solid rgba(211, 167, 45, 0.85) !important;
	border-radius: 17px !important;

	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.92),
		0 0 29px rgba(211, 167, 45, 0.18),
		0 26px 85px rgba(0, 0, 0, 0.88) !important;

	font-family: inherit !important;
}


/* =========================================================
   10. PREFERENCE CENTRE HEADER
   ========================================================= */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-preference-header {
	position: relative !important;

	width: 100% !important;
	max-width: 100% !important;

	padding: 24px 28px !important;

	background:
		linear-gradient(
			180deg,
			rgba(211, 167, 45, 0.09),
			rgba(0, 0, 0, 0)
		) !important;

	border-bottom: 1px solid var(--ld-cookie-line) !important;
}


/* Preference centre title */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-preference-title {
	position: relative !important;

	display: flex !important;
	align-items: center !important;

	width: 100% !important;
	min-height: 50px !important;

	margin: 0 !important;
	padding:
		0
		65px
		0
		64px !important;

	color: var(--ld-cookie-cream) !important;

	font-family: inherit !important;
	font-size: clamp(24px, 3.4vw, 34px) !important;
	font-weight: 800 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.02em !important;

	text-shadow:
		0 2px 3px rgba(0, 0, 0, 0.82) !important;
}


/* White logo beside preference title */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-preference-title::before {
	content: "" !important;

	position: absolute !important;
	top: 50% !important;
	left: 0 !important;

	width: 48px !important;
	height: 48px !important;

	transform: translateY(-50%) !important;

	background-color: var(--ld-cookie-cream) !important;

	-webkit-mask-image: var(--ld-cookie-logo) !important;
	mask-image: var(--ld-cookie-logo) !important;

	-webkit-mask-repeat: no-repeat !important;
	mask-repeat: no-repeat !important;

	-webkit-mask-position: center !important;
	mask-position: center !important;

	-webkit-mask-size: contain !important;
	mask-size: contain !important;

	filter:
		drop-shadow(0 0 5px rgba(255, 255, 255, 0.18))
		drop-shadow(0 0 10px rgba(211, 167, 45, 0.2)) !important;

	pointer-events: none !important;
}


/* Close button */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-btn-close {
	position: absolute !important;
	top: 50% !important;
	right: 24px !important;

	width: 42px !important;
	height: 42px !important;

	margin: 0 !important;
	padding: 10px !important;

	transform: translateY(-50%) !important;

	background:
		linear-gradient(
			145deg,
			rgba(211, 167, 45, 0.12),
			rgba(7, 7, 6, 0.88)
		) !important;

	border: 1px solid rgba(211, 167, 45, 0.74) !important;
	border-radius: 50% !important;

	box-shadow:
		0 4px 13px rgba(0, 0, 0, 0.35) !important;

	transition:
		background 200ms ease,
		border-color 200ms ease,
		box-shadow 200ms ease,
		transform 200ms ease !important;
}

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-btn-close:hover {
	background:
		linear-gradient(
			145deg,
			#e0b73f,
			#9e7414
		) !important;

	border-color: var(--ld-cookie-gold-bright) !important;

	box-shadow:
		0 0 14px rgba(211, 167, 45, 0.38),
		0 6px 15px rgba(0, 0, 0, 0.42) !important;

	transform:
		translateY(-50%)
		rotate(90deg) !important;
}

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-btn-close img,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-btn-close svg {
	filter:
		brightness(0)
		invert(95%)
		sepia(14%)
		saturate(491%)
		hue-rotate(335deg)
		brightness(107%)
		contrast(103%) !important;
}


/* =========================================================
   11. PREFERENCE CENTRE BODY
   ========================================================= */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-preference-body-wrapper {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;

	background: transparent !important;
	overflow-x: hidden !important;
}

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-preference-content-wrapper {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;

	padding: 24px 28px !important;
}

body.ld-cookie-theme--lord-dancer .cky-preference-center p,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-preference-content-wrapper,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-header-des,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-header-des p {
	color: var(--ld-cookie-text) !important;

	font-family: inherit !important;
	font-size: 15px !important;
	line-height: 1.65 !important;
}

body.ld-cookie-theme--lord-dancer .cky-preference-center a,
body.ld-cookie-theme--lord-dancer .cky-preference-center a:link,
body.ld-cookie-theme--lord-dancer .cky-preference-center a:visited {
	color: var(--ld-cookie-gold-light) !important;

	text-decoration-color: rgba(211, 167, 45, 0.55) !important;
	text-underline-offset: 3px !important;
}

body.ld-cookie-theme--lord-dancer .cky-preference-center a:hover {
	color: var(--ld-cookie-gold-bright) !important;
}


/* Show more / show less */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-show-desc-btn,
body.ld-cookie-theme--lord-dancer .cky-preference-center button.cky-show-desc-btn,
body.ld-cookie-theme--lord-dancer .cky-preference-center [data-cky-tag="detail-more-button"],
body.ld-cookie-theme--lord-dancer .cky-preference-center [data-cky-tag="detail-less-button"] {
	color: var(--ld-cookie-gold-light) !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;

	font-family: inherit !important;
	font-weight: 800 !important;

	text-decoration: none !important;
	text-shadow:
		0 0 8px rgba(211, 167, 45, 0.22) !important;
}

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-show-desc-btn:hover,
body.ld-cookie-theme--lord-dancer .cky-preference-center [data-cky-tag="detail-more-button"]:hover,
body.ld-cookie-theme--lord-dancer .cky-preference-center [data-cky-tag="detail-less-button"]:hover {
	color: var(--ld-cookie-gold-bright) !important;

	text-decoration: underline !important;
	text-decoration-color: rgba(211, 167, 45, 0.65) !important;
	text-underline-offset: 4px !important;
}


/* =========================================================
   12. COOKIE CATEGORY ACCORDIONS
   ========================================================= */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-wrapper {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 28px 24px !important;
}

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-item {
	position: relative !important;

	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;

	margin: 0 0 13px !important;

	overflow: hidden !important;

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.04),
			rgba(211, 167, 45, 0.024)
		) !important;

	border: 1px solid rgba(211, 167, 45, 0.42) !important;
	border-radius: 12px !important;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.025),
		0 6px 18px rgba(0, 0, 0, 0.16) !important;

	transition:
		border-color 200ms ease,
		box-shadow 200ms ease !important;
}

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-item:hover {
	border-color: rgba(211, 167, 45, 0.75) !important;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.04),
		0 0 15px rgba(211, 167, 45, 0.08),
		0 7px 20px rgba(0, 0, 0, 0.2) !important;
}


/* Accordion header */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-header {
	position: relative !important;

	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;

	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	min-height: 74px !important;

	margin: 0 !important;

	padding:
		18px
		22px
		18px
		80px !important;

	background: transparent !important;
}


/* Accordion category title */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-btn {
	position: relative !important;

	width: auto !important;
	max-width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;

	color: var(--ld-cookie-cream) !important;
	background: transparent !important;

	border: 0 !important;
	border-radius: 0 !important;

	box-shadow: none !important;

	font-family: inherit !important;
	font-size: 17px !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;

	text-align: left !important;
}


/* Always active label */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-always-active {
	flex-shrink: 0 !important;

	margin-left: auto !important;
	padding-left: 18px !important;

	color: var(--ld-cookie-gold-light) !important;

	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 800 !important;

	white-space: nowrap !important;
}


/* Accordion description */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-header-des {
	position: relative !important;

	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;

	padding:
		4px
		22px
		24px
		22px !important;
}

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-header-des p {
	width: 100% !important;
	max-width: 100% !important;

	margin: 0 !important;

	color: var(--ld-cookie-text) !important;
}


/* =========================================================
   13. ACCORDION ARROW CONTROLS
   Dark bronze/gold rather than bright yellow
   ========================================================= */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-chevron {
	position: absolute !important;

	top: 18px !important;
	left: 21px !important;
	right: auto !important;
	bottom: auto !important;

	display: block !important;

	width: 40px !important;
	height: 40px !important;

	margin: 0 !important;
	padding: 0 !important;

	background:
		linear-gradient(
			145deg,
			#352b16 0%,
			#18140c 50%,
			#070706 100%
		) !important;

	border: 1px solid #b98b1c !important;
	border-radius: 10px !important;

	box-shadow:
		inset 0 1px 0 rgba(255, 244, 190, 0.12),
		inset 0 -1px 0 rgba(0, 0, 0, 0.72),
		0 0 0 1px rgba(0, 0, 0, 0.72),
		0 0 10px rgba(185, 139, 28, 0.18),
		0 5px 14px rgba(0, 0, 0, 0.42) !important;

	transform: rotate(0deg) !important;
	transform-origin: center center !important;

	overflow: visible !important;

	z-index: 5 !important;

	pointer-events: none !important;

	transition:
		transform 220ms ease,
		background 220ms ease,
		border-color 220ms ease,
		box-shadow 220ms ease !important;
}


/* Hide CookieYes's original arrow */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-chevron i,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-chevron img,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-chevron svg,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-chevron span,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-chevron .cky-chevron-right {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
}


/* Draw the upper and lower chevron lines */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-chevron::before,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-chevron::after {
	content: "" !important;

	position: absolute !important;
	left: 50% !important;

	display: block !important;

	width: 12px !important;
	height: 3px !important;

	margin: 0 !important;

	background:
		linear-gradient(
			90deg,
			#b98819 0%,
			#f5d76e 50%,
			#c89a24 100%
		) !important;

	border: 0 !important;
	border-radius: 5px !important;

	box-shadow:
		0 0 4px rgba(211, 167, 45, 0.45) !important;

	opacity: 1 !important;
	visibility: visible !important;

	transform-origin: center center !important;
}


/* Top chevron stroke */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-chevron::before {
	top: 14px !important;

	transform:
		translateX(-57%)
		rotate(45deg) !important;
}


/* Bottom chevron stroke */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-chevron::after {
	top: 22px !important;

	transform:
		translateX(-57%)
		rotate(-45deg) !important;
}


/* Accordion control hover */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-item:hover
.cky-accordion-chevron {
	background:
		linear-gradient(
			145deg,
			#493917 0%,
			#241b0b 49%,
			#090806 100%
		) !important;

	border-color: #d3a72d !important;

	box-shadow:
		inset 0 1px 0 rgba(255, 244, 190, 0.17),
		inset 0 -1px 0 rgba(0, 0, 0, 0.72),
		0 0 0 1px rgba(0, 0, 0, 0.72),
		0 0 14px rgba(211, 167, 45, 0.28),
		0 6px 16px rgba(0, 0, 0, 0.46) !important;
}

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-item:hover
.cky-accordion-chevron::before,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-item:hover
.cky-accordion-chevron::after {
	background:
		linear-gradient(
			90deg,
			#c99c28,
			#fff0aa 50%,
			#d6aa37
		) !important;

	box-shadow:
		0 0 6px rgba(211, 167, 45, 0.62) !important;
}


/* Open accordion states */

body.ld-cookie-theme--lord-dancer .cky-preference-center
.cky-accordion-item.cky-accordion-active
.cky-accordion-chevron,
body.ld-cookie-theme--lord-dancer .cky-preference-center
.cky-accordion-item.active
.cky-accordion-chevron,
body.ld-cookie-theme--lord-dancer .cky-preference-center
.cky-accordion-item:has(
	.cky-accordion-btn[aria-expanded="true"]
)
.cky-accordion-chevron,
body.ld-cookie-theme--lord-dancer .cky-preference-center
.cky-accordion-header[aria-expanded="true"]
.cky-accordion-chevron {
	transform: rotate(90deg) !important;

	background:
		linear-gradient(
			145deg,
			#4c3b18 0%,
			#281e0b 50%,
			#0a0805 100%
		) !important;

	border-color: #d3a72d !important;

	box-shadow:
		inset 0 1px 0 rgba(255, 244, 190, 0.18),
		0 0 0 1px rgba(0, 0, 0, 0.72),
		0 0 15px rgba(211, 167, 45, 0.3),
		0 6px 16px rgba(0, 0, 0, 0.44) !important;
}


/* =========================================================
   14. COOKIE SWITCHES
   ========================================================= */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-switch {
	flex-shrink: 0 !important;
}

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-switch input[type="checkbox"] {
	background-color: #39362d !important;
	border-color: rgba(255, 255, 255, 0.16) !important;

	box-shadow:
		inset 0 2px 5px rgba(0, 0, 0, 0.45) !important;
}

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-switch input[type="checkbox"]:checked {
	background-color: var(--ld-cookie-gold) !important;
	border-color: var(--ld-cookie-gold-light) !important;

	box-shadow:
		inset 0 1px 2px rgba(255, 255, 255, 0.22),
		0 0 9px rgba(211, 167, 45, 0.24) !important;
}

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-switch input[type="checkbox"]::before {
	background-color: #ffffff !important;

	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.34) !important;
}


/* =========================================================
   15. COOKIE DETAIL TABLES
   ========================================================= */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-audit-table,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-cookie-des-table {
	width: 100% !important;
	max-width: 100% !important;

	overflow: hidden !important;

	background: rgba(0, 0, 0, 0.28) !important;

	border: 1px solid rgba(211, 167, 45, 0.2) !important;
	border-radius: 8px !important;
}

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-audit-table th,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-cookie-des-table th {
	color: var(--ld-cookie-cream) !important;
	background: rgba(211, 167, 45, 0.08) !important;

	border-color: rgba(211, 167, 45, 0.18) !important;
}

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-audit-table td,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-cookie-des-table td {
	color: var(--ld-cookie-text) !important;
	background: transparent !important;

	border-color: rgba(211, 167, 45, 0.12) !important;
}


/* =========================================================
   16. PREFERENCE CENTRE FOOTER
   ========================================================= */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-footer-shadow {
	box-shadow:
		0 -10px 28px rgba(0, 0, 0, 0.52) !important;
}

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-footer-wrapper {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 19px 28px !important;

	overflow-x: hidden !important;

	background: rgba(5, 5, 4, 0.985) !important;

	border-top: 1px solid var(--ld-cookie-line) !important;
}


/* Footer button layout */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-prefrence-btn-wrapper,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-preference-btn-wrapper {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 14px !important;

	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;
}


/* All preference footer buttons */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-prefrence-btn-wrapper .cky-btn,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-preference-btn-wrapper .cky-btn,
body.ld-cookie-theme--lord-dancer .cky-preference-center [data-cky-tag="reject-button"],
body.ld-cookie-theme--lord-dancer .cky-preference-center [data-cky-tag="accept-button"],
body.ld-cookie-theme--lord-dancer .cky-preference-center [data-cky-tag="save-button"] {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	min-height: 55px !important;

	margin: 0 !important;
	padding: 12px 14px !important;

	border-radius: 8px !important;

	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.02em !important;

	white-space: normal !important;
	overflow-wrap: break-word !important;
	word-break: normal !important;

	cursor: pointer !important;

	transition:
		transform 200ms ease,
		color 200ms ease,
		background 200ms ease,
		border-color 200ms ease,
		box-shadow 200ms ease !important;
}


/* Preference Reject All */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-btn-reject,
body.ld-cookie-theme--lord-dancer .cky-preference-center button.cky-btn-reject,
body.ld-cookie-theme--lord-dancer .cky-preference-center [data-cky-tag="reject-button"] {
	color: var(--ld-cookie-cream) !important;

	background:
		linear-gradient(
			180deg,
			rgba(211, 167, 45, 0.07),
			rgba(6, 6, 5, 0.96)
		) !important;

	border: 1px solid rgba(211, 167, 45, 0.8) !important;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.045),
		0 0 0 1px rgba(0, 0, 0, 0.5),
		0 6px 18px rgba(0, 0, 0, 0.36) !important;
}


/* Save My Preferences */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-btn-preferences,
body.ld-cookie-theme--lord-dancer .cky-preference-center button.cky-btn-preferences,
body.ld-cookie-theme--lord-dancer .cky-preference-center [data-cky-tag="save-button"] {
	color: #080705 !important;

	background:
		linear-gradient(
			115deg,
			#fff0a5 0%,
			#f5d66d 29%,
			#d2a522 66%,
			#fff0a5 100%
		) !important;

	border: 1px solid var(--ld-cookie-gold-bright) !important;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.72),
		0 0 18px rgba(211, 167, 45, 0.27),
		0 8px 22px rgba(0, 0, 0, 0.42) !important;

	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.25) !important;
}


/* Preference Accept All */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-btn-accept,
body.ld-cookie-theme--lord-dancer .cky-preference-center button.cky-btn-accept,
body.ld-cookie-theme--lord-dancer .cky-preference-center [data-cky-tag="accept-button"] {
	color: #080705 !important;

	background:
		linear-gradient(
			115deg,
			#fff0a5 0%,
			#f5d66d 30%,
			#d2a522 66%,
			#fff0a5 100%
		) !important;

	border: 1px solid var(--ld-cookie-gold-bright) !important;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.7),
		0 0 16px rgba(211, 167, 45, 0.24),
		0 8px 21px rgba(0, 0, 0, 0.38) !important;

	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.28) !important;
}


/* Preference button hover effects */

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-btn-reject:hover,
body.ld-cookie-theme--lord-dancer .cky-preference-center [data-cky-tag="reject-button"]:hover {
	color: #080705 !important;

	background:
		linear-gradient(
			115deg,
			#fff0a5,
			#d3a72d 48%,
			#9e7414
		) !important;

	border-color: var(--ld-cookie-gold-bright) !important;

	box-shadow:
		0 0 18px rgba(211, 167, 45, 0.34),
		0 9px 24px rgba(0, 0, 0, 0.42) !important;

	transform: translateY(-2px) !important;
}

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-btn-preferences:hover,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-btn-accept:hover,
body.ld-cookie-theme--lord-dancer .cky-preference-center [data-cky-tag="save-button"]:hover,
body.ld-cookie-theme--lord-dancer .cky-preference-center [data-cky-tag="accept-button"]:hover {
	color: #050504 !important;

	background:
		linear-gradient(
			115deg,
			#fff8d5 0%,
			#ffe58a 30%,
			#dfb52f 68%,
			#fff4bd 100%
		) !important;

	border-color: #fff7d1 !important;

	box-shadow:
		0 0 25px rgba(211, 167, 45, 0.46),
		0 10px 27px rgba(0, 0, 0, 0.47) !important;

	transform: translateY(-2px) !important;
}


/* =========================================================
   17. ACCESSIBLE FOCUS STATES
   Removes CookieYes blue focus styling
   ========================================================= */

body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-btn:focus,
body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-btn:focus-visible,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-btn:focus,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-btn:focus-visible,
body.ld-cookie-theme--lord-dancer .cky-preference-center button:focus-visible {
	outline: 2px solid var(--ld-cookie-gold-bright) !important;
	outline-offset: 3px !important;

	border-color: var(--ld-cookie-gold-bright) !important;

	box-shadow:
		0 0 0 2px rgba(0, 0, 0, 0.95),
		0 0 0 4px rgba(211, 167, 45, 0.78),
		0 0 17px rgba(211, 167, 45, 0.38) !important;
}

body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-btn:focus,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-btn:focus-visible {
	outline: none !important;
}


/* =========================================================
   18. REVISIT COOKIE SETTINGS BUTTON
   ========================================================= */

body.ld-cookie-theme--lord-dancer .cky-btn-revisit-wrapper {
	width: 46px !important;
	height: 46px !important;

	background:
		linear-gradient(
			145deg,
			#2a2212,
			#070706
		) !important;

	border: 1px solid rgba(211, 167, 45, 0.86) !important;
	border-radius: 50% !important;

	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.75),
		0 0 14px rgba(211, 167, 45, 0.23),
		0 6px 20px rgba(0, 0, 0, 0.46) !important;

	transition:
		transform 200ms ease,
		box-shadow 200ms ease !important;
}

body.ld-cookie-theme--lord-dancer .cky-btn-revisit-wrapper:hover {
	transform:
		translateY(-3px)
		scale(1.05) !important;

	box-shadow:
		0 0 20px rgba(211, 167, 45, 0.44),
		0 9px 24px rgba(0, 0, 0, 0.56) !important;
}

body.ld-cookie-theme--lord-dancer .cky-btn-revisit-wrapper img,
body.ld-cookie-theme--lord-dancer .cky-btn-revisit-wrapper svg {
	filter:
		brightness(0)
		invert(89%)
		sepia(45%)
		saturate(847%)
		hue-rotate(351deg)
		brightness(101%)
		contrast(94%) !important;
}


/* =========================================================
   19. CUSTOM SCROLLBARS
   ========================================================= */

body.ld-cookie-theme--lord-dancer .cky-preference-center * {
	scrollbar-width: thin;
	scrollbar-color:
		rgba(211, 167, 45, 0.72)
		rgba(255, 255, 255, 0.04);
}

body.ld-cookie-theme--lord-dancer .cky-preference-center *::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

body.ld-cookie-theme--lord-dancer .cky-preference-center *::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.035);
}

body.ld-cookie-theme--lord-dancer .cky-preference-center *::-webkit-scrollbar-thumb {
	background:
		linear-gradient(
			180deg,
			var(--ld-cookie-gold-light),
			var(--ld-cookie-gold-dark)
		);

	border: 2px solid rgba(8, 8, 7, 0.92);
	border-radius: 20px;
}


/* =========================================================
   20. TABLET AND MOBILE
   ========================================================= */

@media screen and (max-width: 700px) {

	/* -----------------------------------------
	   Main cookie panel
	   ----------------------------------------- */

	body.ld-cookie-theme--lord-dancer .cky-consent-container {
		top: auto !important;
		left: 12px !important;
		right: 12px !important;
		bottom: 12px !important;

		width: auto !important;
		max-width: none !important;

		margin: 0 !important;

		transform: none !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-consent-bar {
		width: 100% !important;
		max-width: 100% !important;

		max-height: calc(100vh - 24px) !important;

		padding: 25px 20px 20px !important;

		border-radius: 14px !important;

		overflow-x: hidden !important;
		overflow-y: auto !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-title {
		min-height: 44px !important;

		margin-bottom: 22px !important;
		padding-left: 56px !important;

		font-size: clamp(24px, 7.7vw, 32px) !important;
		line-height: 1.1 !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-title::before {
		width: 42px !important;
		height: 42px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-title::after {
		left: 56px !important;
		bottom: -11px !important;

		width: 62px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-notice-des,
body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-notice-des p {
		font-size: 15px !important;
		line-height: 1.55 !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-notice-btn-wrapper {
		grid-template-columns:
			minmax(0, 1fr)
			minmax(0, 1fr) !important;

		gap: 10px !important;

		margin-top: 21px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-notice-btn-wrapper .cky-btn {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;

		min-height: 50px !important;

		margin: 0 !important;
		padding: 11px 8px !important;

		font-size: 14px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-btn-customize,
body.ld-cookie-theme--lord-dancer .cky-consent-container [data-cky-tag="customize-button"] {
		grid-column: 1 !important;
		grid-row: 1 !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-btn-reject,
body.ld-cookie-theme--lord-dancer .cky-consent-container [data-cky-tag="reject-button"] {
		grid-column: 2 !important;
		grid-row: 1 !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-btn-accept,
body.ld-cookie-theme--lord-dancer .cky-consent-container [data-cky-tag="accept-button"] {
		grid-column: 1 / -1 !important;
		grid-row: 2 !important;
	}


	/* -----------------------------------------
	   Preference centre
	   ----------------------------------------- */

	body.ld-cookie-theme--lord-dancer .cky-preference-center {
		width: calc(100vw - 20px) !important;
		max-width: calc(100vw - 20px) !important;

		max-height: calc(100vh - 20px) !important;

		margin-left: 0 !important;
		margin-right: 0 !important;

		border-radius: 13px !important;

		overflow-x: hidden !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-preference-header {
		padding: 20px 18px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-preference-title {
		min-height: 42px !important;

		padding:
			0
			52px
			0
			53px !important;

		font-size: clamp(22px, 6.5vw, 27px) !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-preference-title::before {
		width: 40px !important;
		height: 40px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-btn-close {
		right: 16px !important;

		width: 38px !important;
		height: 38px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-preference-content-wrapper {
		padding: 19px 18px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-wrapper {
		padding:
			0
			18px
			18px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-header {
		min-height: 68px !important;

		padding:
			16px
			16px
			16px
			68px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-chevron {
		top: 16px !important;
		left: 15px !important;

		width: 36px !important;
		height: 36px !important;

		border-radius: 9px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-chevron::before {
		top: 13px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-chevron::after {
		top: 20px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-header-des {
		padding:
			4px
			16px
			21px
			16px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-always-active {
		padding-left: 12px !important;

		font-size: 13px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-footer-wrapper {
		padding: 15px 18px 18px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-prefrence-btn-wrapper,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-preference-btn-wrapper {
		grid-template-columns:
			minmax(0, 1fr)
			minmax(0, 1fr) !important;

		gap: 10px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-prefrence-btn-wrapper .cky-btn,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-preference-btn-wrapper .cky-btn {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;

		min-height: 50px !important;

		margin: 0 !important;
		padding:
			11px
			9px !important;

		font-size: 14px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-btn-preferences,
body.ld-cookie-theme--lord-dancer .cky-preference-center [data-cky-tag="save-button"] {
		grid-column: 1 / -1 !important;
		grid-row: 1 !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-btn-reject,
body.ld-cookie-theme--lord-dancer .cky-preference-center [data-cky-tag="reject-button"] {
		grid-column: 1 !important;
		grid-row: 2 !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-btn-accept,
body.ld-cookie-theme--lord-dancer .cky-preference-center [data-cky-tag="accept-button"] {
		grid-column: 2 !important;
		grid-row: 2 !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-btn-revisit-wrapper {
		width: 42px !important;
		height: 42px !important;
	}
}


/* =========================================================
   21. VERY SMALL MOBILE SCREENS
   ========================================================= */

@media screen and (max-width: 420px) {

	/* -----------------------------------------
	   Main cookie panel
	   ----------------------------------------- */

	body.ld-cookie-theme--lord-dancer .cky-consent-container {
		left: 8px !important;
		right: 8px !important;
		bottom: 8px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-consent-bar {
		max-height: calc(100vh - 16px) !important;

		padding: 22px 16px 16px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-title {
		min-height: 38px !important;

		padding-left: 47px !important;

		font-size: clamp(22px, 7.5vw, 28px) !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-title::before {
		width: 35px !important;
		height: 35px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-title::after {
		left: 47px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-notice-btn-wrapper {
		grid-template-columns: 1fr !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-btn-customize,
body.ld-cookie-theme--lord-dancer .cky-consent-container [data-cky-tag="customize-button"] {
		grid-column: 1 !important;
		grid-row: 1 !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-btn-reject,
body.ld-cookie-theme--lord-dancer .cky-consent-container [data-cky-tag="reject-button"] {
		grid-column: 1 !important;
		grid-row: 2 !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-consent-container .cky-btn-accept,
body.ld-cookie-theme--lord-dancer .cky-consent-container [data-cky-tag="accept-button"] {
		grid-column: 1 !important;
		grid-row: 3 !important;
	}


	/* -----------------------------------------
	   Preference centre
	   ----------------------------------------- */

	body.ld-cookie-theme--lord-dancer .cky-preference-center {
		width: calc(100vw - 12px) !important;
		max-width: calc(100vw - 12px) !important;

		max-height: calc(100vh - 12px) !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-preference-header {
		padding:
			18px
			14px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-preference-title {
		min-height: 38px !important;

		padding:
			0
			47px
			0
			47px !important;

		font-size: 21px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-preference-title::before {
		width: 35px !important;
		height: 35px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-btn-close {
		right: 12px !important;

		width: 35px !important;
		height: 35px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-preference-content-wrapper {
		padding:
			17px
			14px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-wrapper {
		padding:
			0
			14px
			14px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-header {
		align-items: flex-start !important;

		min-height: 64px !important;

		padding:
			15px
			13px
			15px
			61px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-chevron {
		top: 14px !important;
		left: 12px !important;

		width: 34px !important;
		height: 34px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-chevron::before,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-chevron::after {
		width: 10px !important;
		height: 2px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-chevron::before {
		top: 12px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-chevron::after {
		top: 19px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-btn {
		font-size: 16px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-always-active {
		padding-left: 9px !important;

		font-size: 12px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-header-des {
		padding:
			2px
			14px
			19px
			14px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-footer-wrapper {
		padding: 14px !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-prefrence-btn-wrapper,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-preference-btn-wrapper {
		grid-template-columns: 1fr !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-btn-preferences,
body.ld-cookie-theme--lord-dancer .cky-preference-center [data-cky-tag="save-button"] {
		grid-column: 1 !important;
		grid-row: 1 !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-btn-accept,
body.ld-cookie-theme--lord-dancer .cky-preference-center [data-cky-tag="accept-button"] {
		grid-column: 1 !important;
		grid-row: 2 !important;
	}

	body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-btn-reject,
body.ld-cookie-theme--lord-dancer .cky-preference-center [data-cky-tag="reject-button"] {
		grid-column: 1 !important;
		grid-row: 3 !important;
	}
}


/* =========================================================
   22. REDUCED MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	body.ld-cookie-theme--lord-dancer .cky-consent-container *,
body.ld-cookie-theme--lord-dancer .cky-preference-center *,
body.ld-cookie-theme--lord-dancer .cky-btn-revisit-wrapper {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
}






/* =========================================================
   LORD DANCER — REMOVE THIN LINE ABOVE COOKIE PANELS
   ========================================================= */

/* Remove the separator line above the cookie category panels */
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-wrapper {
	border-top: 0 !important;
	box-shadow: none !important;
	margin-top: 0 !important;
	padding-top: 8px !important;
}

/* Remove any top line added by CookieYes pseudo elements */
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-wrapper::before,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-wrapper::after,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-preference-content-wrapper::before,
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-preference-content-wrapper::after {
	content: none !important;
	display: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Make sure the first panel has a bit of breathing room */
body.ld-cookie-theme--lord-dancer .cky-preference-center .cky-accordion-item:first-child {
	margin-top: 0 !important;
}


/* ========================================================= */
/* === SIMME CSS MANAGER :: END :: LORD_DANCER_CORE === */

/* === SIMME CSS MANAGER :: START :: SIMME_COOKIEYES :: Simme — CookieYes === */
/* =========================================================
   SIMME SOUL — COOKIEYES DESIGN
   Active only on body.ld-cookie-theme--simme
   Logo: https://www.simme.co.uk/wp-content/uploads/2026/06/Simme-Soul.png
   Purpose: lightweight Simme-branded consent UI while Lord Dancer keeps its
   existing immersive black/gold treatment on Lord Dancer pages.
   ========================================================= */

body.ld-cookie-theme--simme {
	--simme-cookie-navy: #021b2b;
	--simme-cookie-navy-deep: #00121d;
	--simme-cookie-panel: rgba(2, 23, 36, .985);
	--simme-cookie-panel-2: rgba(0, 14, 24, .99);
	--simme-cookie-cyan: #07c7f4;
	--simme-cookie-cyan-bright: #5ee7ff;
	--simme-cookie-blue: #315ff4;
	--simme-cookie-white: #f6fbff;
	--simme-cookie-text: #d6e6ef;
	--simme-cookie-muted: #9db9c8;
	--simme-cookie-line: rgba(7, 199, 244, .42);
	--simme-cookie-line-soft: rgba(7, 199, 244, .18);
	--simme-cookie-logo: url("https://www.simme.co.uk/wp-content/uploads/2026/06/Simme-Soul.png");
}

body.ld-cookie-theme--simme .cky-consent-container,
body.ld-cookie-theme--simme .cky-consent-container *,
body.ld-cookie-theme--simme .cky-consent-container *::before,
body.ld-cookie-theme--simme .cky-consent-container *::after,
body.ld-cookie-theme--simme .cky-preference-center,
body.ld-cookie-theme--simme .cky-preference-center *,
body.ld-cookie-theme--simme .cky-preference-center *::before,
body.ld-cookie-theme--simme .cky-preference-center *::after,
body.ld-cookie-theme--simme .cky-btn-revisit-wrapper,
body.ld-cookie-theme--simme .cky-btn-revisit-wrapper *,
body.ld-cookie-theme--simme .cky-btn-revisit-wrapper *::before,
body.ld-cookie-theme--simme .cky-btn-revisit-wrapper *::after {
	box-sizing: border-box !important;
}

body.ld-cookie-theme--simme .cky-overlay {
	background: rgba(0, 10, 17, .64) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* ---------- Main banner ---------- */
body.ld-cookie-theme--simme .cky-consent-container {
	position: fixed !important;
	top: auto !important;
	left: 50% !important;
	right: auto !important;
	bottom: max(18px, env(safe-area-inset-bottom)) !important;
	width: min(780px, calc(100vw - 28px)) !important;
	max-width: 780px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: translateX(-50%) !important;
	z-index: 2147483646 !important;
	font-family: Arial, Helvetica, sans-serif !important;
}

body.ld-cookie-theme--simme .cky-consent-container .cky-consent-bar {
	position: relative !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 22px 24px 20px !important;
	overflow: hidden !important;
	background:
		linear-gradient(145deg, var(--simme-cookie-panel) 0%, var(--simme-cookie-panel-2) 100%) !important;
	border: 1px solid var(--simme-cookie-line) !important;
	border-radius: 20px !important;
	box-shadow:
		0 16px 44px rgba(0, 0, 0, .48),
		0 0 0 1px rgba(49, 95, 244, .08),
		inset 0 1px 0 rgba(255, 255, 255, .05) !important;
	font-family: Arial, Helvetica, sans-serif !important;
}

body.ld-cookie-theme--simme .cky-consent-container .cky-consent-bar::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 3px !important;
	background: linear-gradient(90deg, var(--simme-cookie-blue), var(--simme-cookie-cyan), var(--simme-cookie-blue)) !important;
	box-shadow: 0 0 12px rgba(7, 199, 244, .28) !important;
	pointer-events: none !important;
}

body.ld-cookie-theme--simme .cky-consent-container .cky-consent-bar::after {
	content: none !important;
	display: none !important;
}

body.ld-cookie-theme--simme .cky-consent-container .cky-notice,
body.ld-cookie-theme--simme .cky-consent-container .cky-notice-group {
	position: relative !important;
	z-index: 2 !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

body.ld-cookie-theme--simme .cky-consent-container .cky-title {
	position: relative !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
	color: var(--simme-cookie-white) !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: clamp(24px, 3vw, 34px) !important;
	font-weight: 800 !important;
	line-height: 1.08 !important;
	letter-spacing: -.025em !important;
	text-align: left !important;
}

body.ld-cookie-theme--simme .cky-consent-container .cky-title::before {
	content: "" !important;
	display: block !important;
	width: 154px !important;
	height: 48px !important;
	margin: 0 0 13px !important;
	background-image: var(--simme-cookie-logo) !important;
	background-position: left center !important;
	background-repeat: no-repeat !important;
	background-size: contain !important;
	filter: none !important;
}

body.ld-cookie-theme--simme .cky-consent-container .cky-title::after {
	content: none !important;
	display: none !important;
}

body.ld-cookie-theme--simme .cky-consent-container .cky-notice-des,
body.ld-cookie-theme--simme .cky-consent-container .cky-notice-des p,
body.ld-cookie-theme--simme .cky-consent-container .cky-notice-des * {
	color: var(--simme-cookie-text) !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
}

body.ld-cookie-theme--simme .cky-consent-container .cky-notice-des {
	max-width: 700px !important;
	margin: 0 0 17px !important;
	padding: 0 !important;
}

body.ld-cookie-theme--simme .cky-consent-container .cky-notice-des a {
	color: var(--simme-cookie-cyan-bright) !important;
	text-decoration-color: rgba(94, 231, 255, .5) !important;
}

body.ld-cookie-theme--simme .cky-consent-container .cky-notice-btn-wrapper {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: 10px !important;
}

body.ld-cookie-theme--simme .cky-consent-container .cky-btn,
body.ld-cookie-theme--simme .cky-consent-container .cky-btn:hover,
body.ld-cookie-theme--simme .cky-consent-container .cky-btn:focus,
body.ld-cookie-theme--simme .cky-consent-container .cky-btn:active {
	min-width: 0 !important;
	min-height: 48px !important;
	margin: 0 !important;
	padding: 11px 14px !important;
	color: var(--simme-cookie-white) !important;
	background: rgba(0, 9, 16, .64) !important;
	border: 1px solid rgba(94, 231, 255, .38) !important;
	border-radius: 12px !important;
	box-shadow: none !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	line-height: 1.15 !important;
	letter-spacing: .015em !important;
	text-transform: none !important;
	transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease !important;
}

body.ld-cookie-theme--simme .cky-consent-container .cky-btn:hover,
body.ld-cookie-theme--simme .cky-consent-container .cky-btn:focus-visible {
	background: rgba(7, 199, 244, .10) !important;
	border-color: rgba(94, 231, 255, .82) !important;
	box-shadow: 0 0 14px rgba(7, 199, 244, .12) !important;
	transform: translateY(-1px) !important;
}

body.ld-cookie-theme--simme .cky-consent-container .cky-btn-accept,
body.ld-cookie-theme--simme .cky-consent-container .cky-btn-accept:hover,
body.ld-cookie-theme--simme .cky-consent-container .cky-btn-accept:focus,
body.ld-cookie-theme--simme .cky-consent-container .cky-btn-accept:active {
	color: #00121d !important;
	background: linear-gradient(120deg, var(--simme-cookie-cyan-bright), var(--simme-cookie-cyan) 58%, #31a9ff) !important;
	border-color: rgba(163, 242, 255, .92) !important;
	box-shadow: 0 6px 18px rgba(7, 199, 244, .16) !important;
}

body.ld-cookie-theme--simme .cky-consent-container .cky-btn-accept:hover,
body.ld-cookie-theme--simme .cky-consent-container .cky-btn-accept:focus-visible {
	background: linear-gradient(120deg, #a7f6ff, #28d3fa 58%, #4f7dff) !important;
	box-shadow: 0 8px 22px rgba(7, 199, 244, .24) !important;
}

/* ---------- Preference centre ---------- */
body.ld-cookie-theme--simme .cky-preference-center {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	width: min(720px, calc(100vw - 28px)) !important;
	max-width: 720px !important;
	max-height: min(760px, calc(100vh - 28px)) !important;
	max-height: min(760px, calc(100dvh - 28px)) !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	color: var(--simme-cookie-text) !important;
	background: linear-gradient(145deg, #031d2d, #00121d 72%) !important;
	border: 1px solid var(--simme-cookie-line) !important;
	border-radius: 20px !important;
	box-shadow: 0 22px 70px rgba(0, 0, 0, .68) !important;
	transform: translate(-50%, -50%) !important;
	font-family: Arial, Helvetica, sans-serif !important;
}

body.ld-cookie-theme--simme .cky-preference-center .cky-preference-header {
	position: relative !important;
	min-height: 84px !important;
	padding: 20px 58px 15px 22px !important;
	background: rgba(0, 13, 22, .72) !important;
	border-bottom: 1px solid var(--simme-cookie-line-soft) !important;
}

body.ld-cookie-theme--simme .cky-preference-center .cky-preference-header::before {
	content: "" !important;
	display: block !important;
	width: 145px !important;
	height: 42px !important;
	margin: 0 0 8px !important;
	background-image: var(--simme-cookie-logo) !important;
	background-position: left center !important;
	background-repeat: no-repeat !important;
	background-size: contain !important;
}

body.ld-cookie-theme--simme .cky-preference-center .cky-preference-title {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--simme-cookie-white) !important;
	font-size: 20px !important;
	font-weight: 800 !important;
	line-height: 1.15 !important;
}

body.ld-cookie-theme--simme .cky-preference-center .cky-btn-close,
body.ld-cookie-theme--simme .cky-preference-center .cky-btn-close:hover,
body.ld-cookie-theme--simme .cky-preference-center .cky-btn-close:focus,
body.ld-cookie-theme--simme .cky-preference-center .cky-btn-close:active {
	top: 18px !important;
	right: 18px !important;
	width: 34px !important;
	height: 34px !important;
	padding: 7px !important;
	background: rgba(7, 199, 244, .08) !important;
	border: 1px solid rgba(94, 231, 255, .38) !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	filter: none !important;
}

body.ld-cookie-theme--simme .cky-preference-center .cky-btn-close img,
body.ld-cookie-theme--simme .cky-preference-center .cky-btn-close svg {
	filter: brightness(0) invert(1) !important;
}

body.ld-cookie-theme--simme .cky-preference-center .cky-preference-body-wrapper,
body.ld-cookie-theme--simme .cky-preference-center .cky-preference-content-wrapper {
	background: transparent !important;
	color: var(--simme-cookie-text) !important;
}

body.ld-cookie-theme--simme .cky-preference-center .cky-preference-body-wrapper {
	overflow-y: auto !important;
	scrollbar-color: rgba(7, 199, 244, .55) rgba(255,255,255,.04);
}

body.ld-cookie-theme--simme .cky-preference-center .cky-preference-content-wrapper {
	padding: 18px 20px !important;
}

body.ld-cookie-theme--simme .cky-preference-center p,
body.ld-cookie-theme--simme .cky-preference-center .cky-preference-content-wrapper,
body.ld-cookie-theme--simme .cky-preference-center .cky-accordion-header-des,
body.ld-cookie-theme--simme .cky-preference-center .cky-accordion-header-des * {
	color: var(--simme-cookie-text) !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

body.ld-cookie-theme--simme .cky-preference-center a {
	color: var(--simme-cookie-cyan-bright) !important;
}

body.ld-cookie-theme--simme .cky-preference-center .cky-accordion-wrapper {
	margin: 12px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
}

body.ld-cookie-theme--simme .cky-preference-center .cky-accordion-item {
	margin: 0 0 9px !important;
	padding: 0 !important;
	background: rgba(255,255,255,.025) !important;
	border: 1px solid rgba(7, 199, 244, .16) !important;
	border-radius: 12px !important;
	box-shadow: none !important;
	overflow: hidden !important;
}

body.ld-cookie-theme--simme .cky-preference-center .cky-accordion-header {
	min-height: 52px !important;
	padding: 12px 14px !important;
	background: rgba(7, 199, 244, .025) !important;
	border: 0 !important;
}

body.ld-cookie-theme--simme .cky-preference-center .cky-accordion-btn,
body.ld-cookie-theme--simme .cky-preference-center .cky-accordion-btn:hover,
body.ld-cookie-theme--simme .cky-preference-center .cky-accordion-btn:focus {
	color: var(--simme-cookie-white) !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	font-size: 14px !important;
	font-weight: 800 !important;
}

body.ld-cookie-theme--simme .cky-preference-center .cky-accordion-header-des {
	padding: 0 14px 12px !important;
}

body.ld-cookie-theme--simme .cky-preference-center .cky-accordion-body {
	padding: 0 14px 14px !important;
	background: rgba(0, 8, 14, .32) !important;
	border-top: 1px solid rgba(7, 199, 244, .10) !important;
}

body.ld-cookie-theme--simme .cky-preference-center .cky-always-active {
	color: var(--simme-cookie-cyan-bright) !important;
	font-weight: 800 !important;
}

/* Switches */
body.ld-cookie-theme--simme .cky-preference-center .cky-switch input[type="checkbox"] + .cky-slider {
	background: #243946 !important;
	border: 1px solid rgba(255,255,255,.10) !important;
	box-shadow: none !important;
}

body.ld-cookie-theme--simme .cky-preference-center .cky-switch input[type="checkbox"]:checked + .cky-slider {
	background: linear-gradient(90deg, var(--simme-cookie-blue), var(--simme-cookie-cyan)) !important;
	border-color: rgba(94, 231, 255, .56) !important;
	box-shadow: 0 0 9px rgba(7, 199, 244, .16) !important;
}

body.ld-cookie-theme--simme .cky-preference-center .cky-switch .cky-slider::before {
	background: #fff !important;
	box-shadow: 0 1px 4px rgba(0,0,0,.38) !important;
}

/* Cookie tables/details */
body.ld-cookie-theme--simme .cky-preference-center table,
body.ld-cookie-theme--simme .cky-preference-center th,
body.ld-cookie-theme--simme .cky-preference-center td {
	color: var(--simme-cookie-text) !important;
	background: transparent !important;
	border-color: rgba(7, 199, 244, .14) !important;
}

body.ld-cookie-theme--simme .cky-preference-center th {
	color: var(--simme-cookie-cyan-bright) !important;
	font-weight: 800 !important;
}

/* Footer controls */
body.ld-cookie-theme--simme .cky-preference-center .cky-footer-wrapper,
body.ld-cookie-theme--simme .cky-preference-center .cky-prefrence-btn-wrapper,
body.ld-cookie-theme--simme .cky-preference-center .cky-preference-footer {
	background: rgba(0, 10, 17, .88) !important;
	border-top: 1px solid var(--simme-cookie-line-soft) !important;
}

body.ld-cookie-theme--simme .cky-preference-center .cky-prefrence-btn-wrapper,
body.ld-cookie-theme--simme .cky-preference-center .cky-preference-footer {
	display: flex !important;
	flex-wrap: wrap !important;
	padding: 14px 18px !important;
	gap: 9px !important;
}

body.ld-cookie-theme--simme .cky-preference-center .cky-btn,
body.ld-cookie-theme--simme .cky-preference-center .cky-btn:hover,
body.ld-cookie-theme--simme .cky-preference-center .cky-btn:focus,
body.ld-cookie-theme--simme .cky-preference-center .cky-btn:active {
	flex: 1 1 150px !important;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 10px 13px !important;
	color: var(--simme-cookie-white) !important;
	background: rgba(255,255,255,.025) !important;
	border: 1px solid rgba(94, 231, 255, .30) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	font-size: 12px !important;
	font-weight: 800 !important;
}

body.ld-cookie-theme--simme .cky-preference-center .cky-btn-accept,
body.ld-cookie-theme--simme .cky-preference-center .cky-btn-accept:hover,
body.ld-cookie-theme--simme .cky-preference-center .cky-btn-accept:focus {
	color: #00121d !important;
	background: linear-gradient(120deg, var(--simme-cookie-cyan-bright), var(--simme-cookie-cyan), #31a9ff) !important;
	border-color: rgba(163, 242, 255, .88) !important;
}

body.ld-cookie-theme--simme .cky-consent-container .cky-btn:focus-visible,
body.ld-cookie-theme--simme .cky-preference-center .cky-btn:focus-visible,
body.ld-cookie-theme--simme .cky-preference-center button:focus-visible,
body.ld-cookie-theme--simme .cky-btn-revisit-wrapper:focus-visible {
	outline: 2px solid var(--simme-cookie-cyan-bright) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px rgba(0,18,29,.9), 0 0 0 5px rgba(7,199,244,.48) !important;
}

/* ---------- Revisit button ---------- */
body.ld-cookie-theme--simme .cky-btn-revisit-wrapper,
body.ld-cookie-theme--simme .cky-btn-revisit-wrapper:hover,
body.ld-cookie-theme--simme .cky-btn-revisit-wrapper:focus,
body.ld-cookie-theme--simme .cky-btn-revisit-wrapper:active {
	width: 42px !important;
	height: 42px !important;
	background: linear-gradient(145deg, #04324b, #00121d) !important;
	border: 1px solid rgba(94, 231, 255, .64) !important;
	border-radius: 50% !important;
	box-shadow: 0 6px 18px rgba(0,0,0,.34), 0 0 11px rgba(7,199,244,.12) !important;
	transition: transform 160ms ease, border-color 160ms ease !important;
}

body.ld-cookie-theme--simme .cky-btn-revisit-wrapper:hover {
	transform: translateY(-1px) scale(1.035) !important;
	border-color: var(--simme-cookie-cyan-bright) !important;
}

body.ld-cookie-theme--simme .cky-btn-revisit-wrapper img,
body.ld-cookie-theme--simme .cky-btn-revisit-wrapper svg {
	filter: brightness(0) invert(1) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
	body.ld-cookie-theme--simme .cky-consent-container {
		bottom: max(8px, env(safe-area-inset-bottom)) !important;
		width: calc(100vw - 16px) !important;
	}

	body.ld-cookie-theme--simme .cky-consent-container .cky-consent-bar {
		padding: 18px 17px 16px !important;
		border-radius: 16px !important;
	}

	body.ld-cookie-theme--simme .cky-consent-container .cky-title {
		font-size: 24px !important;
	}

	body.ld-cookie-theme--simme .cky-consent-container .cky-title::before {
		width: 132px !important;
		height: 40px !important;
		margin-bottom: 10px !important;
	}

	body.ld-cookie-theme--simme .cky-consent-container .cky-notice-des,
	body.ld-cookie-theme--simme .cky-consent-container .cky-notice-des p,
	body.ld-cookie-theme--simme .cky-consent-container .cky-notice-des * {
		font-size: 12.5px !important;
		line-height: 1.45 !important;
	}

	body.ld-cookie-theme--simme .cky-consent-container .cky-notice-btn-wrapper {
		grid-template-columns: 1fr !important;
		gap: 8px !important;
	}

	body.ld-cookie-theme--simme .cky-consent-container .cky-btn {
		min-height: 44px !important;
	}

	body.ld-cookie-theme--simme .cky-preference-center {
		width: calc(100vw - 16px) !important;
		max-height: calc(100vh - 16px) !important;
		max-height: calc(100dvh - 16px) !important;
		border-radius: 16px !important;
	}

	body.ld-cookie-theme--simme .cky-preference-center .cky-preference-header {
		padding: 16px 52px 13px 16px !important;
	}

	body.ld-cookie-theme--simme .cky-preference-center .cky-preference-header::before {
		width: 126px !important;
		height: 36px !important;
	}

	body.ld-cookie-theme--simme .cky-preference-center .cky-preference-content-wrapper {
		padding: 14px 13px !important;
	}

	body.ld-cookie-theme--simme .cky-preference-center .cky-prefrence-btn-wrapper,
	body.ld-cookie-theme--simme .cky-preference-center .cky-preference-footer {
		padding: 11px 12px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.ld-cookie-theme--simme .cky-consent-container *,
	body.ld-cookie-theme--simme .cky-preference-center *,
	body.ld-cookie-theme--simme .cky-btn-revisit-wrapper {
		animation: none !important;
		transition-duration: .01ms !important;
	}
}

/* ========================================================= */

/* =========================================================
   SIMME COOKIEYES V2.0 — OPAQUE SHELL + ROUTER HARDENING
   21 AUGUST 2026

   The approved Simme CookieYes skin is intentionally opaque.
   This block gives the shell literal colour fallbacks and also accepts the
   mirrored HTML-level route class supplied by Cookie Theme Router V2.0.

   Lord Dancer is deliberately NOT included in these selectors.
   ========================================================= */

/* Explicit route variables on both supported routing hooks. */
html.ld-cookie-theme--simme,
body.ld-cookie-theme--simme {
	--simme-cookie-navy: #021b2b;
	--simme-cookie-navy-deep: #00121d;
	--simme-cookie-panel: rgba(2, 23, 36, .992);
	--simme-cookie-panel-2: rgba(0, 14, 24, .996);
	--simme-cookie-cyan: #07c7f4;
	--simme-cookie-cyan-bright: #5ee7ff;
	--simme-cookie-blue: #315ff4;
	--simme-cookie-white: #f6fbff;
	--simme-cookie-text: #d6e6ef;
	--simme-cookie-muted: #9db9c8;
	--simme-cookie-line: rgba(7, 199, 244, .52);
	--simme-cookie-line-soft: rgba(7, 199, 244, .18);
}

/* The main consent surface must never inherit a transparent CookieYes/theme
   background. Literal fallbacks mean it remains opaque even if a CSS custom
   property is temporarily unavailable during first paint. */
body.ld-cookie-theme--simme .cky-consent-container .cky-consent-bar,
html.ld-cookie-theme--simme body .cky-consent-container .cky-consent-bar {
	opacity: 1 !important;
	background-color: #00121d !important;
	background-image:
		linear-gradient(
			145deg,
			var(--simme-cookie-panel, rgba(2, 23, 36, .992)) 0%,
			var(--simme-cookie-panel-2, rgba(0, 14, 24, .996)) 100%
		) !important;
	border-color: var(--simme-cookie-line, rgba(7, 199, 244, .52)) !important;
	isolation: isolate !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* Keep content fully opaque above CookieYes animation/decorative layers. */
body.ld-cookie-theme--simme .cky-consent-container .cky-notice,
body.ld-cookie-theme--simme .cky-consent-container .cky-notice-group,
html.ld-cookie-theme--simme body .cky-consent-container .cky-notice,
html.ld-cookie-theme--simme body .cky-consent-container .cky-notice-group {
	position: relative !important;
	z-index: 2 !important;
	opacity: 1 !important;
	background: transparent !important;
}

/* Critical typography fallback. */
body.ld-cookie-theme--simme .cky-consent-container .cky-title,
html.ld-cookie-theme--simme body .cky-consent-container .cky-title {
	color: var(--simme-cookie-white, #f6fbff) !important;
	opacity: 1 !important;
}

body.ld-cookie-theme--simme .cky-consent-container .cky-notice-des,
body.ld-cookie-theme--simme .cky-consent-container .cky-notice-des p,
body.ld-cookie-theme--simme .cky-consent-container .cky-notice-des *,
html.ld-cookie-theme--simme body .cky-consent-container .cky-notice-des,
html.ld-cookie-theme--simme body .cky-consent-container .cky-notice-des p,
html.ld-cookie-theme--simme body .cky-consent-container .cky-notice-des * {
	color: var(--simme-cookie-text, #d6e6ef) !important;
	opacity: 1 !important;
}

/* Critical button fallback, including a visibly filled primary action. */
body.ld-cookie-theme--simme .cky-consent-container .cky-btn,
html.ld-cookie-theme--simme body .cky-consent-container .cky-btn {
	color: var(--simme-cookie-white, #f6fbff) !important;
	background-color: rgba(0, 9, 16, .92) !important;
	border-color: rgba(94, 231, 255, .46) !important;
	opacity: 1 !important;
}

body.ld-cookie-theme--simme .cky-consent-container .cky-btn-accept,
html.ld-cookie-theme--simme body .cky-consent-container .cky-btn-accept {
	color: #00121d !important;
	background-color: #07c7f4 !important;
	background-image:
		linear-gradient(
			120deg,
			var(--simme-cookie-cyan-bright, #5ee7ff),
			var(--simme-cookie-cyan, #07c7f4) 58%,
			#31a9ff
		) !important;
	border-color: rgba(163, 242, 255, .92) !important;
	opacity: 1 !important;
}

/* The preference centre receives the same no-transparency guarantee. */
body.ld-cookie-theme--simme .cky-preference-center,
html.ld-cookie-theme--simme body .cky-preference-center {
	opacity: 1 !important;
	background-color: #00121d !important;
	background-image: linear-gradient(145deg, #031d2d, #00121d 72%) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}


/* === SIMME CSS MANAGER :: END :: SIMME_COOKIEYES === */

/* === SIMME CSS MANAGER :: START :: LORD_DANCER_EP :: Lord Dancer — EP / Late Gallery Updates === */
/* =========================================================
   LORD DANCER – WHO AM I EP PLAYER V14 – SIX TRACK EP
   Full replacement CSS – performance and compatibility build
   ========================================================= */

:root {
    --ldep-pink: #ff42c6;
    --ldep-pink-soft: #ff82df;
    --ldep-blue: #35c8ff;
    --ldep-gold: #e9bd52;
    --ldep-green: #87ff9f;
    --ldep-black: #020207;
    --ldep-panel: rgba(2, 5, 12, 0.94);
    --ldep-stage-bg: none;
}

/* Dedicated page canvas */
html.ld-ep-page-active,
body.ld-ep-page-active {
    width: 100%;
    min-height: 100%;
    margin: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
}

body.ld-ep-page-active #headerwrap,
body.ld-ep-page-active #footerwrap,
body.ld-ep-page-active #pagewrap > header,
body.ld-ep-page-active #pagewrap > footer,
body.ld-ep-page-active .page-title,
body.ld-ep-page-active .post-title,
body.ld-ep-page-active .sidebar-none #content::before,
body.ld-ep-page-active .back-top,
body.ld-ep-page-active .tf_sticky_buy {
    display: none !important;
}

body.ld-ep-page-active #pagewrap,
body.ld-ep-page-active #body,
body.ld-ep-page-active #layout,
body.ld-ep-page-active #content,
body.ld-ep-page-active .pagewidth,
body.ld-ep-page-active .module,
body.ld-ep-page-active .module_row,
body.ld-ep-page-active .row_inner,
body.ld-ep-page-active .tb-column,
body.ld-ep-page-active .tb-column-inner {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ldep-app,
.ldep-app *,
.ldep-app *::before,
.ldep-app *::after {
    box-sizing: border-box;
}

.ldep-app {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    color: #fff;
    background: #000;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    line-height: 1.4;
    isolation: isolate;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.admin-bar .ldep-app {
    top: 32px;
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
}

.ldep-app button,
.ldep-app input,
.ldep-app a {
    font: inherit;
}

.ldep-app button,
.ldep-app a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.ldep-app button {
    appearance: none;
    -webkit-appearance: none;
}

.ldep-app img {
    max-width: 100%;
    image-rendering: auto;
}

.ldep-app [hidden] {
    display: none !important;
}

.ldep-app .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---------------------------------------------------------
   Shared corner navigation
   --------------------------------------------------------- */
.ldep-corner-nav {
    position: absolute;
    z-index: 40;
    top: max(14px, env(safe-area-inset-top));
    left: max(14px, env(safe-area-inset-left));
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    color: #fff !important;
    background: rgba(3, 5, 11, 0.82);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.42), 0 0 14px rgba(255, 66, 198, 0.14);
    text-decoration: none !important;
    letter-spacing: 0.07em;
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.ldep-corner-nav svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ldep-corner-nav:hover,
.ldep-corner-nav:focus-visible {
    border-color: var(--ldep-pink-soft);
    background: rgba(8, 6, 15, 0.94);
    box-shadow: 0 0 18px rgba(255, 66, 198, 0.32), 0 0 16px rgba(53, 200, 255, 0.15);
    outline: 0;
}

/* ---------------------------------------------------------
   Album-cover intro
   --------------------------------------------------------- */
.ldep-intro {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #000;
    opacity: 1;
    visibility: visible;
    transition: opacity 620ms ease, visibility 620ms ease;
    contain: layout paint style;
}

.ldep-intro.is-fading {
    opacity: 0;
    pointer-events: none;
}

.ldep-intro.is-hidden {
    visibility: hidden;
}

.ldep-cover {
    display: block;
    width: auto;
    height: auto;
    max-width: min(94vw, calc(100vh - 32px));
    max-height: 94vh;
    object-fit: contain;
    contain: layout paint;
}

.ldep-entry-sign {
    position: absolute !important;
    z-index: 24;
    left: 50% !important;
    right: auto !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    min-width: min(88vw, 440px);
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 22px;
    color: #fff;
    background: transparent !important;
    box-shadow: none !important;
    transform: translate3d(-50%, 0, 0) !important;
    cursor: pointer;
    outline: 0;
}

.ldep-entry-sign:disabled {
    cursor: wait;
}

.ldep-entry-sign__inner {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 94px;
    padding: 10px 24px 10px 10px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 22px;
    background: rgba(3, 17, 8, 0.92);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.64), 0 0 20px rgba(255, 66, 198, 0.3), 0 0 14px rgba(53, 200, 255, 0.18);
    text-align: left;
    transform: translate3d(0, 0, 0);
    animation: ldep-entry-float 4.8s ease-in-out infinite;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 150ms ease;
}

.ldep-entry-sign__inner img {
    display: block;
    width: 68px;
    height: 68px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 10px;
    object-fit: cover;
}

.ldep-entry-sign__inner > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ldep-entry-sign strong {
    color: #ffd66d;
    font-size: clamp(15px, 1.4vw, 23px);
    letter-spacing: 0.12em;
}

.ldep-entry-sign small {
    color: #ff9ae3;
    font-size: clamp(11px, 1vw, 16px);
    letter-spacing: 0.2em;
}

.ldep-entry-sign:hover .ldep-entry-sign__inner,
.ldep-entry-sign:focus-visible .ldep-entry-sign__inner {
    border-color: var(--ldep-pink-soft);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.66), 0 0 28px rgba(255, 66, 198, 0.48), 0 0 22px rgba(53, 200, 255, 0.3);
    animation-play-state: paused;
    transform: translate3d(0, -3px, 0);
}

.ldep-entry-sign:active .ldep-entry-sign__inner {
    animation-play-state: paused;
    transform: translate3d(0, 1px, 0);
}

@keyframes ldep-entry-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -7px, 0); }
}

/* ---------------------------------------------------------
   Password panel
   --------------------------------------------------------- */
.ldep-password-overlay {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: end center;
    padding: 14px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: rgba(0, 0, 0, 0.72);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 320ms ease, visibility 320ms ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.ldep-password-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ldep-password-panel {
    position: relative;
    width: min(94vw, 800px);
    aspect-ratio: 800 / 552;
    background-image: var(--ldep-panel-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translate3d(0, 112%, 0);
    transition: transform 760ms cubic-bezier(.2,.8,.16,1);
    contain: layout paint;
}

.ldep-password-overlay.is-open .ldep-password-panel {
    transform: translate3d(0, 0, 0);
}

.ldep-password-form {
    position: absolute;
    inset: 0;
}

.ldep-password-screen {
    position: absolute;
    left: 14.4%;
    top: 22.6%;
    width: 71.2%;
    height: 49.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.4% 4% 2%;
    overflow: hidden;
    border-radius: 12%;
    color: var(--ldep-green);
    background: radial-gradient(circle at 50% 48%, rgba(13, 45, 22, 0.46), rgba(0, 8, 4, 0.92) 75%);
    box-shadow: inset 0 0 32px rgba(88, 255, 120, 0.14);
    font-family: "Courier New", ui-monospace, monospace;
    text-align: center;
    text-shadow: 0 0 7px rgba(98, 255, 126, 0.7);
}

.ldep-password-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px);
    mix-blend-mode: screen;
}

.ldep-crt-title,
.ldep-crt-copy,
.ldep-crt-label {
    position: relative;
    z-index: 2;
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.08em;
}

.ldep-crt-title { font-size: clamp(10px, 2vw, 22px); }
.ldep-crt-copy { margin-top: 4%; font-size: clamp(9px, 1.72vw, 19px); }
.ldep-crt-label { margin-top: 4%; font-size: clamp(9px, 1.6vw, 18px); }

.ldep-password-input-wrap {
    position: relative;
    z-index: 3;
    width: 84%;
    margin-top: 5%;
}

.ldep-password-input {
    width: 100%;
    height: clamp(42px, 7.4vw, 64px);
    margin: 0;
    padding: 0 clamp(48px, 7vw, 70px) 0 18px;
    border: 2px solid rgba(117, 255, 143, 0.82);
    border-radius: 15px;
    outline: 0;
    color: #d9ffe0;
    background: rgba(0, 11, 5, 0.82);
    box-shadow: inset 0 0 20px rgba(80, 255, 111, 0.1), 0 0 12px rgba(77, 255, 108, 0.32);
    font-family: "Courier New", ui-monospace, monospace;
    font-size: clamp(17px, 2.5vw, 25px);
    letter-spacing: 0.18em;
    caret-color: #a9ffb9;
}

.ldep-password-input:focus {
    border-color: #c5ffd0;
    box-shadow: inset 0 0 20px rgba(80, 255, 111, 0.14), 0 0 18px rgba(77, 255, 108, 0.5);
}

.ldep-password-reveal {
    position: absolute;
    z-index: 4;
    top: 50%;
    right: 7px;
    display: grid;
    place-items: center;
    width: clamp(34px, 5.6vw, 46px);
    height: clamp(34px, 5.6vw, 46px);
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(134, 255, 155, 0.52) !important;
    border-radius: 9px;
    color: #98ffab;
    background: linear-gradient(180deg, rgba(16, 51, 26, 0.95), rgba(2, 21, 9, 0.96)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -4px 8px rgba(0,0,0,.38), 0 0 10px rgba(83,255,114,.22) !important;
    transform: translate3d(0, -50%, 0) !important;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.ldep-password-reveal:hover,
.ldep-password-reveal:focus-visible,
.ldep-password-reveal.is-revealed {
    border-color: #d5ffdc !important;
    color: #effff2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -4px 8px rgba(0,0,0,.38), 0 0 15px rgba(83,255,114,.48) !important;
    outline: 0;
}

.ldep-password-reveal:active {
    transform: translate3d(0, -50%, 0) !important;
    box-shadow: inset 0 4px 10px rgba(0,0,0,.56), 0 0 8px rgba(83,255,114,.25) !important;
}

.ldep-eye-icon {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ldep-eye-icon--hide { display: none; }
.ldep-password-reveal.is-revealed .ldep-eye-icon--show { display: none; }
.ldep-password-reveal.is-revealed .ldep-eye-icon--hide { display: block; }

.ldep-password-status {
    position: relative;
    z-index: 3;
    min-height: 1.3em;
    margin-top: 2%;
    color: #caffd4;
    font-size: clamp(8px, 1.2vw, 13px);
    letter-spacing: 0.07em;
}

.ldep-password-overlay.is-error .ldep-password-screen {
    color: #ff8ea6;
    text-shadow: 0 0 8px rgba(255, 70, 110, 0.75);
    animation: ldep-panel-error 300ms ease;
}

.ldep-password-overlay.is-success .ldep-password-screen {
    color: #d6ffde;
    box-shadow: inset 0 0 36px rgba(83, 255, 114, 0.25), 0 0 24px rgba(83, 255, 114, 0.2);
}

@keyframes ldep-panel-error {
    0%, 100% { transform: translateX(0); }
    30% { transform: translateX(-5px); }
    65% { transform: translateX(5px); }
}

.ldep-password-submit {
    position: absolute;
    left: 39.4%;
    bottom: 4.1%;
    width: 21.2%;
    height: 11.2%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 18px;
    color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    outline: 0;
}

.ldep-password-submit span { display: none; }

.ldep-password-submit:hover,
.ldep-password-submit:focus-visible {
    box-shadow: 0 0 18px rgba(255, 65, 196, 0.52) !important;
}

.ldep-password-submit:active {
    transform: none !important;
}

.ldep-password-close {
    position: absolute;
    z-index: 8;
    top: 4.2%;
    right: 4.6%;
    display: grid;
    place-items: center;
    width: clamp(28px, 5vw, 42px);
    height: clamp(28px, 5vw, 42px);
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50%;
    color: #ff9ee3;
    background: transparent !important;
    box-shadow: none !important;
    font-size: clamp(20px, 3vw, 30px);
    line-height: 1;
    cursor: pointer;
    text-shadow: 0 0 8px rgba(255, 66, 198, 0.78);
}

.ldep-password-close:hover,
.ldep-password-close:focus-visible {
    color: #fff;
    outline: 0;
}

/* ---------------------------------------------------------
   Player stage
   --------------------------------------------------------- */
.ldep-player-stage {
    position: absolute;
    inset: 0;
    z-index: 12;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    background-color: #03050a;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.46)), var(--ldep-stage-bg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    transition: opacity 620ms ease;
    scrollbar-color: rgba(255, 66, 198, 0.65) rgba(0, 0, 0, 0.35);
    scrollbar-width: thin;
}

.ldep-player-stage.is-visible { opacity: 1; }

.ldep-stage-inner {
    width: min(100%, 1560px);
    margin: 0 auto;
    padding: clamp(10px, 1.5vw, 24px);
}

.ldep-hero-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(270px, 36%) minmax(0, 64%);
    grid-template-areas:
        "brand ticket"
        "player player";
    align-items: center;
    gap: clamp(12px, 2vw, 30px);
    width: 100%;
    min-height: clamp(650px, 68vw, 920px);
    padding: clamp(62px, 5vw, 82px) clamp(15px, 2.2vw, 34px) clamp(16px, 2vw, 28px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    background: linear-gradient(125deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.12) 52%, rgba(0, 0, 0, 0.32));
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.48), inset 0 0 0 1px rgba(255, 66, 198, 0.08);
    contain: layout paint style;
}

.ldep-brand-block {
    grid-area: brand;
    align-self: center;
    width: 100%;
    max-width: 560px;
    min-width: 0;
}

.ldep-brand-logo,
.ldep-brand-who,
.ldep-brand-ep,
.ldep-signature {
    display: block;
    height: auto;
    object-fit: contain;
}

.ldep-brand-logo {
    width: 96%;
    filter: drop-shadow(0 8px 13px rgba(0, 0, 0, 0.45));
}

.ldep-brand-who {
    width: 70%;
    margin: 1% 0 0 6%;
    filter: drop-shadow(0 0 10px rgba(255, 66, 198, 0.42));
}

.ldep-brand-ep {
    width: 39%;
    margin: 1.8% 0 0 19%;
    filter: drop-shadow(0 0 8px rgba(255, 66, 198, 0.32));
}

.ldep-intro-copy {
    width: 68%;
    margin: 6% 0 0 9%;
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(11px, 1.05vw, 17px);
    line-height: 1.55;
    text-shadow: 0 2px 7px rgba(0, 0, 0, 0.72);
}

.ldep-intro-copy strong { color: var(--ldep-gold); }

.ldep-signature {
    width: 49%;
    margin: 4.5% 0 0 11%;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55));
}

.ldep-advisory {
    position: absolute;
    z-index: 9;
    top: 2.3%;
    right: 1.8%;
    width: clamp(72px, 8vw, 128px);
}

.ldep-advisory img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55));
}

/* Ticket geometry uses a shared rendered height because both source files are 701px tall. */
.ldep-ticket-cluster {
    grid-area: ticket;
    position: relative;
    width: 100%;
    aspect-ratio: 2.52 / 1;
    min-width: 0;
    overflow: visible;
    pointer-events: none;
}

.ldep-ticket-position {
    position: absolute;
    top: 0;
    height: 100%;
    width: auto;
    overflow: visible;
    pointer-events: none;
}

.ldep-ticket-position--left {
    left: 0;
    aspect-ratio: 648 / 701;
    transform: rotate(-4.4deg);
    transform-origin: 54% 52%;
}

.ldep-ticket-position--right {
    right: 0;
    aspect-ratio: 1090 / 701;
    transform: rotate(-3.7deg);
    transform-origin: 49% 52%;
    pointer-events: auto;
}

.ldep-ticket-float,
.ldep-ticket-float img {
    width: 100%;
    height: 100%;
}

.ldep-ticket-float {
    position: relative;
    pointer-events: none;
}

.ldep-ticket-float img {
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.54));
}

.ldep-ticket-float--left { animation: ldep-ticket-left 7.4s ease-in-out infinite; }
.ldep-ticket-float--right { animation: ldep-ticket-right 8.35s ease-in-out -1.7s infinite; }

@keyframes ldep-ticket-left {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
    48% { transform: translate3d(2px, -7px, 0) rotate(.3deg); }
}

@keyframes ldep-ticket-right {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
    52% { transform: translate3d(-2px, -5px, 0) rotate(-.22deg); }
}

.ldep-ticket-position--right .ldep-ticket-float { pointer-events: auto; }

.ldep-ticket-track {
    position: absolute;
    z-index: 8;
    left: 13.1%;
    width: 57.2%;
    /*
     * V169 six-track ticket lock.
     * Right-side-of-ticket-2.webp remains 1090 × 701, so horizontal
     * geometry is unchanged. The six vertical hit areas below were
     * recalculated against the actual printed rows in the new artwork.
     */
    height: 11.8%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 13px;
    outline: 0;
    color: transparent;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    mix-blend-mode: screen;
}

.ldep-ticket-track--1 { top: 8.8%; }
.ldep-ticket-track--2 { top: 21.7%; }
.ldep-ticket-track--3 { top: 35.8%; }
.ldep-ticket-track--4 { top: 49.0%; }
.ldep-ticket-track--5 { top: 61.6%; }
.ldep-ticket-track--6 { top: 76.2%; }

.ldep-ticket-track::before,
.ldep-ticket-track::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms ease;
}

.ldep-ticket-track::before {
    inset: 6% 0;
    border: 1px solid rgba(255, 170, 232, 0.88);
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(255, 34, 186, 0.46), rgba(255, 99, 214, 0.28) 50%, rgba(56, 191, 255, 0.32));
    box-shadow: inset 0 0 14px rgba(255,255,255,.16), -5px 0 22px rgba(255, 35, 186, 0.72), 8px 0 24px rgba(53, 200, 255, 0.62);
}

.ldep-ticket-track::after {
    inset: 17% 4%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 38, 190, 0.98), rgba(255, 75, 204, 0.72) 58%, rgba(53, 200, 255, 0.98));
    filter: blur(13px);
}

.ldep-ticket-track:hover::before,
.ldep-ticket-track:hover::after,
.ldep-ticket-track:focus-visible::before,
.ldep-ticket-track:focus-visible::after {
    opacity: 1;
}

.ldep-ticket-track:focus-visible { outline: 2px solid rgba(255,255,255,.75); outline-offset: 2px; }
.ldep-ticket-track.is-selected::before { opacity: .72; }
.ldep-ticket-track.is-selected::after { opacity: .68; animation: ldep-ticket-glow 2.5s ease-in-out infinite; }

@keyframes ldep-ticket-glow {
    0%, 100% { filter: blur(12px) brightness(.95); }
    50% { filter: blur(15px) brightness(1.2); }
}

/* ---------------------------------------------------------
   Compact player
   --------------------------------------------------------- */
.ldep-player-dock {
    grid-area: player;
    position: relative;
    display: grid;
    grid-template-areas: "art body volume";
    grid-template-columns: clamp(126px, 10.5vw, 164px) minmax(0, 1fr) clamp(150px, 14vw, 220px);
    align-items: center;
    gap: clamp(10px, 1.2vw, 18px);
    width: 100%;
    min-height: clamp(154px, 12vw, 190px);
    padding: clamp(10px, 1.1vw, 16px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 17px;
    background: linear-gradient(120deg, rgba(255,255,255,.03), transparent 36%), var(--ldep-panel);
    box-shadow: inset 0 0 0 1px rgba(255, 66, 198, 0.12), -2px 0 18px rgba(53, 200, 255, 0.18), 2px 0 18px rgba(255, 66, 198, 0.2), 0 16px 36px rgba(0,0,0,.54);
    contain: layout paint;
}

.ldep-player-dock::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(53, 200, 255, 0.1), transparent 17%, transparent 82%, rgba(255, 66, 198, 0.11));
}

.ldep-audio { display: none; }

.ldep-now-art {
    grid-area: art;
    position: relative;
    z-index: 2;
    display: block;
    width: clamp(126px, 10.5vw, 164px);
    height: clamp(126px, 10.5vw, 164px);
    min-width: clamp(126px, 10.5vw, 164px);
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 9px;
    background: #080a0f;
    box-shadow: 0 0 0 1px rgba(53, 200, 255, 0.22), 0 0 20px rgba(53, 200, 255, 0.14), 0 9px 20px rgba(0,0,0,.5);
    aspect-ratio: 1 / 1;
}

.ldep-now-art::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(1,2,5,.9), rgba(1,2,5,.56) 24%, transparent 56%);
}

.ldep-now-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 180ms ease, transform 600ms ease;
}

.ldep-now-art img.is-changing { opacity: 0; transform: scale(1.025); }

.ldep-now-art figcaption {
    position: absolute;
    z-index: 3;
    left: 10px;
    right: 10px;
    bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-shadow: 0 2px 7px #000;
}

.ldep-now-art figcaption span {
    color: var(--ldep-pink-soft);
    font-size: clamp(11px, .92vw, 15px);
    font-weight: 700;
    letter-spacing: .08em;
}

.ldep-now-art figcaption strong {
    font-size: clamp(9px, .8vw, 13px);
    letter-spacing: .04em;
}

.ldep-player-centre {
    grid-area: body;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: minmax(66px, 1fr) 30px 30px;
    gap: 3px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.ldep-player-topline {
    display: grid;
    grid-template-columns: minmax(150px, .6fr) minmax(300px, 1.4fr);
    align-items: center;
    gap: clamp(8px, 1.4vw, 22px);
    min-width: 0;
}

.ldep-now-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ldep-now-meta span {
    color: var(--ldep-pink);
    font-size: clamp(9px, .75vw, 12px);
    font-weight: 700;
    letter-spacing: .09em;
}

.ldep-now-meta strong {
    max-width: 100%;
    margin-top: 3px;
    overflow: hidden;
    color: #fff;
    font-size: clamp(17px, 1.35vw, 23px);
    font-weight: 500;
    letter-spacing: .04em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ldep-now-meta small {
    margin-top: 2px;
    color: rgba(255,255,255,.64);
    font-size: clamp(8px, .67vw, 10px);
    letter-spacing: .08em;
}

.ldep-transport {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, .75vw, 12px);
    min-width: 0;
    overflow: visible;
}

.ldep-control-button,
.ldep-play-button,
.ldep-volume-button {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    color: rgba(255,255,255,.86);
    background: transparent;
    cursor: pointer;
    outline: 0;
    transition: color 150ms ease, filter 150ms ease, background 150ms ease;
}

.ldep-control-button {
    width: 34px;
    height: 34px;
    border-radius: 50%;
}

.ldep-control-icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ldep-icon-fill { fill: currentColor; stroke: none; }

.ldep-control-button:hover,
.ldep-control-button:focus-visible,
.ldep-volume-button:hover,
.ldep-volume-button:focus-visible,
.ldep-control-button.is-active {
    color: #fff;
    background: rgba(255,255,255,.07);
    filter: drop-shadow(0 0 7px rgba(255,66,198,.65));
}

.ldep-play-button {
    width: clamp(62px, 5vw, 76px);
    height: clamp(62px, 5vw, 76px);
    border: 2px solid transparent;
    border-radius: 50%;
    background: linear-gradient(#05070c, #05070c) padding-box, linear-gradient(120deg, var(--ldep-pink), #d84bff 48%, var(--ldep-blue)) border-box;
    box-shadow: -6px 0 18px rgba(255,66,198,.34), 6px 0 18px rgba(53,200,255,.34), inset 0 0 20px rgba(255,255,255,.035);
}

.ldep-play-button:hover,
.ldep-play-button:focus-visible {
    box-shadow: -8px 0 25px rgba(255,66,198,.48), 8px 0 25px rgba(53,200,255,.48), inset 0 0 24px rgba(255,255,255,.06);
}

.ldep-play-button:active { transform: scale(.98); }

.ldep-play-icon {
    width: 30px;
    height: 30px;
    fill: #fff;
    filter: drop-shadow(0 0 5px rgba(255,255,255,.45));
}

.ldep-play-icon--pause { display: none; }
.ldep-app.is-playing .ldep-play-icon--play { display: none; }
.ldep-app.is-playing .ldep-play-icon--pause { display: block; }
.ldep-app.is-playing .ldep-play-button { animation: ldep-play-pulse 2.6s ease-in-out infinite; }

@keyframes ldep-play-pulse {
    0%, 100% { box-shadow: -6px 0 18px rgba(255,66,198,.34), 6px 0 18px rgba(53,200,255,.34); }
    50% { box-shadow: -8px 0 27px rgba(255,66,198,.54), 8px 0 27px rgba(53,200,255,.54); }
}

.ldep-repeat-one {
    position: absolute;
    right: 2px;
    bottom: 1px;
    display: none;
    min-width: 13px;
    height: 13px;
    padding: 0 2px;
    border-radius: 999px;
    color: #070811;
    background: #fff;
    font: 800 9px/13px Arial, sans-serif;
    text-align: center;
}

.ldep-repeat-button[data-repeat-mode="2"] .ldep-repeat-one { display: block; }

.ldep-visualiser {
    display: block;
    width: 100%;
    height: 30px;
    opacity: .95;
}

.ldep-timeline {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ldep-timeline time {
    color: rgba(255,255,255,.82);
    font-size: clamp(9px, .7vw, 11px);
    font-variant-numeric: tabular-nums;
}

.ldep-timeline time:last-child { text-align: right; }

.ldep-timeline input,
.ldep-volume-panel input {
    width: 100%;
    height: 24px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
}

.ldep-timeline input::-webkit-slider-runnable-track,
.ldep-volume-panel input::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ldep-pink), #d54dff 56%, var(--ldep-blue));
    box-shadow: 0 0 8px rgba(255,66,198,.3);
}

.ldep-timeline input::-webkit-slider-thumb,
.ldep-volume-panel input::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    margin-top: -5px;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid rgba(255,255,255,.75);
    border-radius: 50%;
    background: #ff7bd9;
    box-shadow: 0 0 12px rgba(255,66,198,.88);
}

.ldep-timeline input::-moz-range-track,
.ldep-volume-panel input::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ldep-pink), #d54dff 56%, var(--ldep-blue));
}

.ldep-timeline input::-moz-range-thumb,
.ldep-volume-panel input::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.75);
    border-radius: 50%;
    background: #ff7bd9;
    box-shadow: 0 0 12px rgba(255,66,198,.88);
}

.ldep-volume-panel {
    grid-area: volume;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    height: 100%;
    padding-left: clamp(10px, 1vw, 16px);
    border-left: 1px solid rgba(255,255,255,.16);
}

.ldep-volume-button {
    width: 40px;
    min-width: 40px;
    height: 36px;
    border-radius: 50%;
}

.ldep-volume-icon {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ldep-volume-muted { display: none; }
.ldep-volume-button.is-muted .ldep-volume-wave { display: none; }
.ldep-volume-button.is-muted .ldep-volume-muted { display: block; }

/* ---------------------------------------------------------
   Track list
   --------------------------------------------------------- */
.ldep-track-panel {
    margin-top: clamp(10px, 1.2vw, 20px);
    padding: clamp(13px, 1.35vw, 21px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 16px;
    background: linear-gradient(110deg, rgba(255,66,198,.035), transparent 35%, rgba(53,200,255,.035)), rgba(2,4,8,.93);
    box-shadow: 0 15px 40px rgba(0,0,0,.46);
    content-visibility: auto;
    contain-intrinsic-size: 300px;
}

.ldep-track-panel h2 {
    margin: 0 0 12px;
    color: var(--ldep-pink);
    font-size: clamp(14px, 1.3vw, 20px);
    font-weight: 600;
    letter-spacing: .05em;
    text-shadow: 0 0 12px rgba(255,66,198,.45);
}

.ldep-track-cards {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(9px, 1.1vw, 18px);
}

.ldep-track-card {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto auto auto;
    justify-items: start;
    gap: 4px;
    padding: clamp(8px, .8vw, 12px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 11px;
    color: #fff;
    background: rgba(3,5,9,.94);
    box-shadow: 0 9px 22px rgba(0,0,0,.34);
    cursor: pointer;
    text-align: left;
    transition: border-color 180ms ease, box-shadow 200ms ease, background 180ms ease;
}

.ldep-track-card:hover,
.ldep-track-card:focus-visible,
.ldep-track-card.is-selected {
    border-color: var(--ldep-pink-soft);
    background: rgba(8,5,13,.97);
    box-shadow: 0 0 0 1px rgba(255,66,198,.25), 0 0 22px rgba(255,66,198,.28), 0 11px 25px rgba(0,0,0,.5);
    outline: 0;
}

.ldep-card-art {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255,66,198,.08), rgba(53,200,255,.06)), #080a0f;
}

.ldep-card-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 200ms ease, filter 220ms ease;
}

.ldep-card-art img[src] { opacity: 1; }
.ldep-track-card:hover .ldep-card-art img,
.ldep-track-card.is-selected .ldep-card-art img { filter: brightness(1.1) saturate(1.08); }

.ldep-card-number {
    margin-top: 4px;
    color: var(--ldep-pink-soft);
    font-size: clamp(13px, 1.05vw, 17px);
    font-weight: 700;
}

.ldep-track-card strong {
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(10px, .9vw, 14px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ldep-track-card time {
    color: rgba(255,255,255,.62);
    font-size: clamp(9px, .78vw, 12px);
    font-variant-numeric: tabular-nums;
}

.ldep-card-playing {
    position: absolute;
    right: 8px;
    bottom: 7px;
    display: none;
    align-items: end;
    gap: 2px;
    height: 18px;
}

.ldep-card-playing i {
    display: block;
    width: 3px;
    height: 7px;
    border-radius: 2px;
    background: linear-gradient(var(--ldep-pink), var(--ldep-blue));
    animation: ldep-mini-bars .7s ease-in-out infinite alternate;
}

.ldep-card-playing i:nth-child(2) { animation-delay: .12s; }
.ldep-card-playing i:nth-child(3) { animation-delay: .24s; }
.ldep-card-playing i:nth-child(4) { animation-delay: .36s; }
.ldep-app.is-playing .ldep-track-card.is-selected .ldep-card-playing { display: flex; }

@keyframes ldep-mini-bars { to { height: 18px; } }

/* ---------------------------------------------------------
   Toast
   --------------------------------------------------------- */
.ldep-toast {
    position: absolute;
    z-index: 100;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    max-width: min(90vw, 520px);
    padding: 10px 16px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    color: #fff;
    background: rgba(3,5,11,.94);
    box-shadow: 0 0 20px rgba(255,66,198,.25);
    font-size: 12px;
    letter-spacing: .05em;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%, 12px, 0);
    transition: opacity 180ms ease, transform 180ms ease;
}

.ldep-toast.is-visible { opacity: 1; transform: translate3d(-50%, 0, 0); }

/* ---------------------------------------------------------
   Medium layouts
   --------------------------------------------------------- */
@media (max-width: 1100px) {
    .ldep-hero-panel {
        grid-template-columns: minmax(240px, 38%) minmax(0, 62%);
        min-height: clamp(650px, 82vw, 860px);
        padding-top: 66px;
    }

    .ldep-brand-logo { width: 100%; }
    .ldep-intro-copy { width: 78%; }

    .ldep-player-dock {
        grid-template-areas:
            "art body"
            "volume volume";
        grid-template-columns: 132px minmax(0, 1fr);
        grid-template-rows: minmax(142px, auto) 44px;
        min-height: 204px;
        gap: 9px 13px;
        padding: 12px;
    }

    .ldep-now-art {
        width: 132px;
        height: 132px;
        min-width: 132px;
    }

    .ldep-player-centre {
        height: 142px;
        grid-template-rows: minmax(78px, 1fr) 28px 28px;
    }

    .ldep-player-topline {
        grid-template-columns: minmax(128px, .5fr) minmax(260px, 1.5fr);
        gap: 8px;
    }

    .ldep-volume-panel {
        height: 44px;
        padding: 2px 11% 0;
        border-top: 1px solid rgba(255,255,255,.14);
        border-left: 0;
    }

    .ldep-track-cards {
        grid-template-columns: repeat(6, minmax(150px, 1fr));
        overflow-x: auto;
        padding: 3px 2px 10px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .ldep-track-card { scroll-snap-align: start; }
}

/* Keep ticket on the right on landscape phones/tablets and useful medium widths. */
@media (min-width: 560px) and (orientation: landscape),
       (min-width: 760px) {
    .ldep-hero-panel {
        grid-template-areas:
            "brand ticket"
            "player player";
    }
}

/* Narrow portrait layout */
@media (max-width: 759px) and (orientation: portrait) {
    .ldep-stage-inner { padding: 8px; }

    .ldep-hero-panel {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "brand"
            "ticket"
            "player";
        min-height: 0;
        gap: 14px;
        padding: 54px 10px 12px;
        border-radius: 14px;
    }

    .ldep-brand-block {
        width: min(92%, 560px);
        margin: 0 auto;
        text-align: center;
    }

    .ldep-brand-logo { width: 94%; margin: 0 auto; }
    .ldep-brand-who { width: 68%; margin: -1% auto 0; }
    .ldep-brand-ep { width: 42%; margin: 2% auto 0; }
    .ldep-intro-copy { width: 86%; margin: 5% auto 0; align-items: center; text-align: center; }
    .ldep-signature { width: 50%; margin: 4% auto 0; }

    .ldep-ticket-cluster {
        width: min(106%, 900px);
        margin: 0 -3%;
    }

    .ldep-advisory {
        top: 10px;
        right: 10px;
        width: 68px;
    }
}

/* ---------------------------------------------------------
   Phones – controls and visualiser never overlap
   --------------------------------------------------------- */
@media (max-width: 700px) {
    body.admin-bar .ldep-app {
        top: 0;
        height: 100vh;
        height: 100dvh;
    }

    .ldep-corner-nav {
        top: max(8px, env(safe-area-inset-top));
        left: max(8px, env(safe-area-inset-left));
        min-height: 34px;
        padding: 6px 9px;
        font-size: 9px;
    }

    .ldep-cover {
        max-width: 96vw;
        max-height: calc(100vh - 80px);
        max-height: calc(100dvh - 80px);
    }

    .ldep-entry-sign {
        min-width: min(92vw, 360px);
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }

    .ldep-entry-sign__inner {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 12px;
        min-height: 68px;
        padding: 8px 15px 8px 8px;
        border-radius: 18px;
    }

    .ldep-entry-sign__inner img { width: 52px; height: 52px; border-radius: 8px; }
    .ldep-entry-sign strong { font-size: 14px; }
    .ldep-entry-sign small { font-size: 10px; }

    .ldep-password-overlay { padding-inline: 4px; }
    .ldep-password-panel { width: 100vw; }
    .ldep-password-input-wrap { width: 88%; margin-top: 4%; }
    .ldep-password-input { height: 42px; padding-right: 48px; font-size: 17px; }
    .ldep-password-reveal { right: 5px; width: 34px; height: 34px; border-radius: 7px; }
    .ldep-eye-icon { width: 19px; height: 19px; }

    .ldep-player-dock {
        grid-template-areas:
            "art body"
            "volume volume";
        grid-template-columns: 88px minmax(0, 1fr);
        grid-template-rows: minmax(196px, auto) 42px;
        min-height: 246px;
        gap: 8px;
        padding: 9px;
        border-radius: 14px;
    }

    .ldep-now-art {
        width: 88px;
        height: 88px;
        min-width: 88px;
        align-self: start;
    }

    .ldep-now-art figcaption { left: 7px; right: 7px; bottom: 6px; }
    .ldep-now-art figcaption span { font-size: 11px; }
    .ldep-now-art figcaption strong { font-size: 8px; }

    .ldep-player-centre {
        height: 196px;
        grid-template-rows: minmax(140px, auto) 16px 24px;
        gap: 7px;
        align-content: start;
        overflow: hidden;
    }

    .ldep-player-topline {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: start;
        gap: 9px;
    }

    .ldep-now-meta span { font-size: 8px; }
    .ldep-now-meta strong { font-size: 14px; }
    .ldep-now-meta small { font-size: 8px; }

    .ldep-transport {
        justify-content: flex-start;
        gap: 4px;
        min-height: 44px;
        padding-bottom: 2px;
    }

    .ldep-control-button {
        width: 27px;
        height: 27px;
    }

    .ldep-control-icon { width: 17px; height: 17px; }

    .ldep-play-button {
        width: 44px;
        height: 44px;
    }

    .ldep-play-icon { width: 24px; height: 24px; }

    .ldep-visualiser {
        width: 100%;
        height: 16px;
        margin-top: 1px;
    }

    .ldep-timeline {
        grid-template-columns: 32px minmax(0, 1fr) 32px;
        gap: 4px;
    }

    .ldep-timeline time { font-size: 8px; }

    .ldep-volume-panel {
        height: 42px;
        padding: 2px 10px 0;
    }

    .ldep-volume-button { width: 38px; min-width: 38px; height: 32px; }

    .ldep-track-panel { margin-top: 8px; padding: 11px 9px; border-radius: 12px; }
    .ldep-track-panel h2 { margin-left: 3px; font-size: 14px; }
    .ldep-track-cards { grid-template-columns: repeat(6, 146px); gap: 9px; padding-bottom: 10px; }
    .ldep-track-card { padding: 8px; }
}

@media (max-width: 430px) {
    .ldep-player-dock {
        grid-template-columns: 76px minmax(0, 1fr);
        grid-template-rows: minmax(190px, auto) 40px;
        min-height: 236px;
        gap: 7px;
        padding: 8px;
    }

    .ldep-now-art { width: 76px; height: 76px; min-width: 76px; }

    .ldep-player-centre {
        height: 190px;
        grid-template-rows: minmax(136px, auto) 14px 22px;
        gap: 6px;
    }

    .ldep-now-meta strong { font-size: 13px; }
    .ldep-transport { gap: 3px; min-height: 42px; }
    .ldep-control-button { width: 25px; height: 25px; }
    .ldep-control-icon { width: 16px; height: 16px; }
    .ldep-play-button { width: 40px; height: 40px; }
    .ldep-play-icon { width: 22px; height: 22px; }
    .ldep-visualiser { height: 14px; }
    .ldep-timeline { grid-template-columns: 30px minmax(0, 1fr) 30px; }
    .ldep-ticket-cluster { width: 108%; margin-inline: -4%; }
}

/* Landscape phones: retain right-side ticket and reduce vertical footprint. */
@media (max-height: 560px) and (orientation: landscape) {
    .ldep-stage-inner { padding: 6px; }

    .ldep-hero-panel {
        grid-template-columns: minmax(210px, 35%) minmax(0, 65%);
        min-height: 620px;
        padding: 48px 10px 10px;
        gap: 8px;
    }

    .ldep-brand-logo { width: 88%; }
    .ldep-brand-who { width: 62%; }
    .ldep-brand-ep { width: 34%; }
    .ldep-intro-copy { width: 78%; margin-top: 3%; font-size: 10px; }
    .ldep-signature { width: 40%; margin-top: 2%; }
    .ldep-advisory { width: 62px; }
}

/* ---------------------------------------------------------
   Expensive visual effects: use only where supported/useful
   --------------------------------------------------------- */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .ldep-corner-nav,
    .ldep-password-overlay { background-color: rgba(2, 4, 9, 0.96); }
}

@media (hover: none), (pointer: coarse) {
    .ldep-corner-nav,
    .ldep-player-dock,
    .ldep-track-panel {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .ldep-ticket-track:hover::before,
    .ldep-ticket-track:hover::after { opacity: 0; }
}

.ldep-app.is-page-hidden .ldep-ticket-float,
.ldep-app.is-page-hidden .ldep-entry-sign__inner,
.ldep-app.is-page-hidden .ldep-card-playing i {
    animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
    .ldep-app *,
    .ldep-app *::before,
    .ldep-app *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* iPhone/iPad Safari keeps media volume under the device's physical controls. */
.ldep-app.is-ios .ldep-volume-panel input {
    display: none;
}

.ldep-app.is-ios .ldep-volume-panel::after {
    content: "USE DEVICE VOLUME";
    color: rgba(255,255,255,.62);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    white-space: nowrap;
}

/* =========================================================
   PLAY / PAUSE BUTTON – FINAL THEME-SAFE HOVER SWIRL
   ========================================================= */
.ldep-app button,
.ldep-app input[type="button"],
.ldep-app input[type="submit"] {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.ldep-app .ldep-play-button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #fff !important;
    background: linear-gradient(#05070c, #05070c) padding-box,
                linear-gradient(120deg, var(--ldep-pink), #d84bff 48%, var(--ldep-blue)) border-box !important;
    background-color: #05070c !important;
    border: 2px solid transparent !important;
    outline: 0 !important;
}

.ldep-app .ldep-play-button::before,
.ldep-app .ldep-play-button::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    contain: paint;
}

.ldep-app .ldep-play-button::before {
    inset: 5px;
    z-index: 0;
    background: radial-gradient(circle at 50% 45%, rgba(18,22,36,.95) 0%, rgba(8,10,18,.97) 48%, rgba(3,5,10,.99) 100%);
    box-shadow: inset 0 0 18px rgba(255,255,255,.035), inset 0 -10px 20px rgba(0,0,0,.35);
}

.ldep-app .ldep-play-button::after {
    inset: 7px;
    z-index: 0;
    opacity: 0;
    background: conic-gradient(from 0deg,
        rgba(255,66,198,0) 0deg,
        rgba(255,66,198,.75) 50deg,
        rgba(216,75,255,.45) 95deg,
        rgba(53,200,255,.78) 180deg,
        rgba(53,200,255,.22) 235deg,
        rgba(255,66,198,.62) 315deg,
        rgba(255,66,198,0) 360deg);
    filter: blur(8px) saturate(118%);
    mix-blend-mode: screen;
    transform: scale(1) rotate(0deg);
}

.ldep-app .ldep-play-button > * {
    position: relative;
    z-index: 2;
}

.ldep-app .ldep-play-button:hover,
.ldep-app .ldep-play-button:focus,
.ldep-app .ldep-play-button:focus-visible,
.ldep-app .ldep-play-button:active {
    color: #fff !important;
    background: linear-gradient(#05070c, #05070c) padding-box,
                linear-gradient(120deg, var(--ldep-pink), #d84bff 48%, var(--ldep-blue)) border-box !important;
    background-color: #05070c !important;
    border: 2px solid transparent !important;
    outline: 0 !important;
    filter: none !important;
}

.ldep-app .ldep-play-button:hover,
.ldep-app .ldep-play-button:focus-visible {
    box-shadow: -8px 0 25px rgba(255,66,198,.48),
                 8px 0 25px rgba(53,200,255,.48),
                 inset 0 0 24px rgba(255,255,255,.06) !important;
}

.ldep-app .ldep-play-button:hover::after,
.ldep-app .ldep-play-button:focus-visible::after {
    opacity: .92;
    animation: ldep-play-swirl 2.2s linear infinite;
    will-change: transform, filter;
}

.ldep-app .ldep-play-button:active {
    transform: scale(.98);
    box-shadow: -6px 0 18px rgba(255,66,198,.38),
                 6px 0 18px rgba(53,200,255,.38),
                 inset 0 0 20px rgba(255,255,255,.05) !important;
}

.ldep-app .ldep-play-button:active::after {
    opacity: .98;
    animation-duration: 1.2s;
}

.ldep-app .ldep-play-icon,
.ldep-app .ldep-play-icon--play,
.ldep-app .ldep-play-icon--pause {
    color: #fff !important;
    fill: currentColor !important;
    stroke: none !important;
}

@keyframes ldep-play-swirl {
    0% { transform: scale(1) rotate(0deg); filter: blur(8px) saturate(118%); }
    50% { transform: scale(1.05) rotate(180deg); filter: blur(10px) saturate(128%); }
    100% { transform: scale(1) rotate(360deg); filter: blur(8px) saturate(118%); }
}

/* Canvas and below-fold containment without layout or visual changes. */
.ldep-visualiser {
    pointer-events: none;
    contain: strict;
}

.ldep-track-panel {
    contain-intrinsic-size: auto 300px;
}

/* Pause every decorative animation while the tab is hidden. */
.ldep-app.is-page-hidden .ldep-play-button,
.ldep-app.is-page-hidden .ldep-play-button::after,
.ldep-app.is-page-hidden .ldep-ticket-track.is-selected::after {
    animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
    .ldep-app .ldep-play-button:hover::after,
    .ldep-app .ldep-play-button:focus-visible::after,
    .ldep-app .ldep-play-button:active::after {
        animation: none !important;
        opacity: .85;
        will-change: auto;
    }
}


/* =========================================================
   V142 FINAL LOCK — ALBUM LOOK STATE, PARALLAX + 2-SECOND LINK

   Reliability change
   - The Album character no longer depends on rewriting an <img> src.
   - One CSS background surface displays the resting or looking-down asset.
   - This prevents LiteSpeed/lazy-loading/browser image rewriting from forcing
     Album-Character.webp back over Album-Character-Look.webp.

   Sequence
   - Resting: Album-Character.webp.
   - Click: Album-Character-Look.webp appears immediately.
   - Hold: looking-down artwork remains visible for exactly 2 seconds.
   - Link: Who Am I EP opens in a new browser tab only.
   - Return: the unchanged gallery is already restored to the resting artwork.

   Placement/parallax
   - V137 top-left/top-right green-dot alignment remains unchanged.
   - The small intentional bottom overhang remains unchanged.
   - The same --ldg1-album-shift parallax value used in V139 is retained.
   ========================================================= */

.ldg1[data-ldg1-build="V142"] .ldg1__room--three >
.ldg1__album-character[data-ldg1-album-character-coordinate-lock-v142] {
	position: absolute;
	z-index: 18;
	display: block;
	left: 27.964203% !important;
	top: 42.698318% !important;
	bottom: auto !important;
	width: 15.491257% !important;
	height: auto !important;
	aspect-ratio: 581 / 900;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	line-height: 0;
	text-decoration: none !important;
	outline: none;
	cursor: pointer;
	pointer-events: auto !important;
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translate3d(var(--ldg1-album-shift, 0px), 0, 0) !important;
	transform-origin: 50% 0;
	will-change: transform;
}

.ldg1[data-ldg1-build="V142"] .ldg1__album-character-surface {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-color: transparent;
	background-image: var(--ldg1-album-default-image);
	background-position: 50% 0;
	background-repeat: no-repeat;
	background-size: contain;
	filter:
		drop-shadow(0 14px 18px rgba(0, 0, 0, .34))
		drop-shadow(0 0 10px rgba(255, 191, 37, .08));
	transform: translate3d(0, 0, 0);
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transition: filter 180ms ease, transform 180ms ease;
}

/* Immediate and authoritative looking-down state. */
.ldg1[data-ldg1-build="V142"] .ldg1__album-character.is-album-looking
.ldg1__album-character-surface {
	background-image: var(--ldg1-album-look-image) !important;
	transform: translate3d(0, 0, 0) scale(1.002);
	filter:
		drop-shadow(0 14px 18px rgba(0, 0, 0, .34))
		drop-shadow(0 0 14px rgba(255, 191, 37, .16));
}

.ldg1[data-ldg1-build="V142"] .ldg1__album-character:hover
.ldg1__album-character-surface,
.ldg1[data-ldg1-build="V142"] .ldg1__album-character:focus-visible
.ldg1__album-character-surface {
	filter:
		drop-shadow(0 14px 18px rgba(0, 0, 0, .34))
		drop-shadow(0 0 14px rgba(255, 191, 37, .18));
}

.ldg1[data-ldg1-build="V142"] .ldg1__album-character:focus-visible {
	filter: drop-shadow(0 0 9px rgba(255, 211, 95, .32));
}

.ldg1[data-ldg1-build="V142"] .ldg1__album-character.is-album-link-pending {
	cursor: wait;
}

/* Framed artwork and its controls remain above the character. */
.ldg1[data-ldg1-build="V142"] .ldg1__room--three .ldg1__exhibit,
.ldg1[data-ldg1-build="V142"] .ldg1__room--three .ldg1__exhibit:hover,
.ldg1[data-ldg1-build="V142"] .ldg1__room--three .ldg1__exhibit:focus,
.ldg1[data-ldg1-build="V142"] .ldg1__room--three .ldg1__exhibit:focus-visible,
.ldg1[data-ldg1-build="V142"] .ldg1__room--three .ldg1__exhibit:active {
	z-index: 20 !important;
}

@media (prefers-reduced-motion: reduce) {
	.ldg1[data-ldg1-build="V142"] .ldg1__room--three >
	.ldg1__album-character[data-ldg1-album-character-coordinate-lock-v142] {
		transform: translate3d(var(--ldg1-album-shift, 0px), 0, 0) !important;
	}

	.ldg1[data-ldg1-build="V142"] .ldg1__album-character-surface {
		transition: none !important;
	}
}


/* =========================================================
   V141 CSS-ONLY — ALBUM CHARACTER DEPTH OF FIELD

   This applies the same walk-to-frame depth-of-field treatment used by
   the BIO character to the Album character in room three.

   Behaviour
   - Normal gallery view: Album character remains completely sharp.
   - Walking towards a selected frame: character progressively blurs,
     darkens slightly and loses a small amount of saturation.
   - Focused on the frame: the out-of-focus state is held.
   - Walking backwards: focus is restored immediately and smoothly.

   No placement, dimensions, top-corner alignment, parallax, Look pose,
   two-second link delay, gallery behaviour or other Lord Dancer CSS has
   been altered by this block.
   ========================================================= */

.ldg1 .ldg1__album-character {
	filter: none;
	transition:
		filter 1650ms cubic-bezier(.20, .62, .24, 1);
	will-change: transform, filter;
}

.ldg1.is-walking-to-artwork .ldg1__album-character,
.ldg1.is-artwork-focused .ldg1__album-character {
	filter: blur(4.2px) brightness(.86) saturate(.93) !important;
}

.ldg1.is-returning-from-artwork .ldg1__album-character {
	filter: none !important;
	transition-duration: 1650ms;
}

@media (max-width: 767px) {
	.ldg1.is-walking-to-artwork .ldg1__album-character,
	.ldg1.is-artwork-focused .ldg1__album-character {
		filter: blur(3.6px) brightness(.88) saturate(.94) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1 .ldg1__album-character {
		transition-duration: 1ms !important;
	}
}

/* =========================================================
   V142 FINAL — PRECISE ALBUM HIT AREA + CALMER FRAME FOCUS

   The Album link still occupies the original 581 × 900 coordinate canvas so
   its top-corner lock, parallax and lower overhang remain exact. JavaScript now
   alpha-tests the cut-out artwork, so only visible character pixels activate.
   The cursor mirrors that exact hit result rather than implying the transparent
   canvas is clickable.

   Frame-walk sensitivity is handled in the V142 PHP controller. Tiny Magic
   Mouse/trackpad wheel noise is ignored; a deliberate wheel gesture or a click
   outside the focused artwork still walks the viewer back out naturally.
   ========================================================= */

.ldg1[data-ldg1-build="V142"] .ldg1__album-character {
	cursor: default !important;
}

.ldg1[data-ldg1-build="V142"] .ldg1__album-character.is-album-hit-target,
.ldg1[data-ldg1-build="V142"] .ldg1__album-character:focus-visible {
	cursor: pointer !important;
}

.ldg1[data-ldg1-build="V142"] .ldg1__album-character.is-album-link-pending {
	cursor: wait !important;
}

/* =========================================================
   ROOM 4 STUDIO — INITIAL ENVIRONMENT INSTALL

   Source background:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Studio-Entrance-Background.jpg

   Locked design-coordinate system for Room 4 assets:
   X = 0–2354, Y = 0–1029, origin (0,0) = exact top-left of Room 4.
   The live JPEG and placement grid now use the same native 2354 × 1029 canvas.

   Room 4 intentionally contains no exhibits or interactive assets yet.
   The existing nine exhibits, HUD count, BIO/CV/Album characters, Frame 9
   age gate, playback and all V142 protection blocks remain unchanged.
   ========================================================= */


/* =========================================================
   V144 — ROOM 4 STUDIO NAVIGATION + COMPATIBILITY SAFETY

   Room 4 remains an environment rather than Exhibit 10. The PHP/JS adds
   its centre as the navigation stop after Frame 9. These rules make the
   studio settle reliably on touch/portrait browsers without changing the
   exact 2048 × 878 background coordinate mapping.
   ========================================================= */

.ldg1__room--four {
	background-color: #050403;
}

@media (max-width: 768px) and (orientation: portrait) {
	.ldg1__room--four {
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}
}

/* =========================================================
   V144 FINAL FAIL-SAFE — THEME-PROOF CV + ALBUM VISIBILITY

   The Gallery's accumulated protection stack intentionally remains scoped to
   data-ldg1-build="V142". V144 keeps that compatibility marker. These two
   small unversioned guards prevent WordPress/Themify button styling or a future
   release-label change from ever turning the CV character into a themed button
   or hiding the Album character canvas again.
   ========================================================= */

.ldg1 button.ldg1__cv-character[data-ldg1-cv-open],
.ldg1 button.ldg1__cv-character[data-ldg1-cv-open]:hover,
.ldg1 button.ldg1__cv-character[data-ldg1-cv-open]:focus,
.ldg1 button.ldg1__cv-character[data-ldg1-cv-open]:focus-visible,
.ldg1 button.ldg1__cv-character[data-ldg1-cv-open]:active {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	min-width: 0 !important;
	min-height: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.ldg1 .ldg1__room--three >
.ldg1__album-character[data-ldg1-album-character-coordinate-lock-v142] {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* =========================================================
   V146 — EXACT ROOM 3 → ROOM 4 IMAGE JOIN

   Purpose-built Room 4 background:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Studio-Entrance-Background.jpg

   Native source size: 2354 × 1029 px.
   The artwork itself now contains the intended visual continuation from the
   right edge of Room 3. Therefore the third boundary must be a true image
   edge, not the generic overlap/mask used between the repeated Gallery-1.jpg
   rooms.

   Rooms 1 → 2 and 2 → 3 retain their established seam feathering.
   Room 3 → 4:
   • no negative overlap;
   • no mask/crossfade;
   • no third seam-concealer;
   • no border, outline or shadow;
   • Room 4 remains fully opaque and uses the native 2354 × 1029 X/Y
     placement system for future assets.
   ========================================================= */

.ldg1 {
    --ldg1-studio-room-width: max(100vw, 228.765792vh);
    --ldg1-studio-room-width: max(100vw, 228.765792svh);
}

@supports (height: 100dvh) {
    .ldg1 {
        --ldg1-studio-room-width: max(100vw, 228.765792dvh);
    }
}

.ldg1 .ldg1__room--three + .ldg1__room--four {
    margin-left: 0 !important;

    -webkit-mask-image: none !important;
    mask-image: none !important;
    -webkit-mask: none !important;
    mask: none !important;

    border-left: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    background-image: var(--ldg1-studio-background-image) !important;
    background-position: 50% 50% !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;

    opacity: 1 !important;
}

/* The new artwork is the seam. Do not draw another seam on top of it. */
.ldg1 .ldg1__gallery-join-seam-concealer--three {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Keep portrait/touch Room 4 navigation behaviour from V144. */
@media (max-width: 768px) and (orientation: portrait) {
    .ldg1 .ldg1__room--four {
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }
}

/* =========================================================
   V147 — ROOM 4 BENCH ASSET

   Real asset:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Bench.webp

   New Room 4 coordinate reference: 2354 × 1029 px.

   Green-dot anchors read from the supplied placement screenshot:
   top-left  ≈ X 547,  Y 750
   top-right ≈ X 1807, Y 750

   Therefore:
   left  = 547 / 2354  = 23.237043%
   top   = 750 / 1029  = 72.886297%
   width = 1260 / 2354 = 53.525913%

   This is a standalone transparent image layer, NOT baked into the room
   background. It can therefore be moved, hidden, animated or interacted with
   independently later.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-bench {
	position: absolute;
	z-index: 6;
	left: 23.237043% !important;
	top: 72.886297% !important;
	display: block;
	width: 53.525913% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	object-fit: contain;
	object-position: left top;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* =========================================================
   V148 — ROOM 4 RIGHT PLANT ASSET

   Real asset:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Right-Plant.webp

   Native asset: 300 × 513 px.
   Room 4 coordinate reference: 2354 × 1029 px.

   Green-dot anchors from the supplied placement screenshot:
   top-left  ≈ X 1413, Y 366
   top-right ≈ X 1682, Y 366

   Target display width = 269px.
   Aspect ratio is preserved automatically.

   The plant is deliberately one layer behind the bench so the pot can sit
   naturally behind the foreground seating when the two assets overlap.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-right-plant {
	position: absolute;
	z-index: 5;
	left: 60.025489% !important;
	top: 35.568513% !important;
	display: block;
	width: 11.427358% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	object-fit: contain;
	object-position: left top;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* =========================================================
   V149 — ROOM 4 LEFT PLANT ASSET

   Real asset:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Left-Palnt.webp

   Room 4 coordinate reference: 2354 × 1029 px.

   Green-dot anchors from the supplied placement screenshot:
   top-left  ≈ X 663, Y 376
   top-right ≈ X 950, Y 376

   Target display width = 287px.
   Aspect ratio is preserved automatically.

   The plant is placed behind the bench, matching the right plant's layering.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-left-plant {
	position: absolute;
	z-index: 5;
	left: 28.164826% !important;
	top: 36.540330% !important;
	display: block;
	width: 12.192014% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	object-fit: contain;
	object-position: left top;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* =========================================================
   V150 — ROOM 4 LEFT DOOR ASSET

   Real asset:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Left-door-NEW.webp

   Room 4 coordinate reference: 2354 × 1029 px.

   Green-dot anchors from the supplied placement screenshot:
   top-left  ≈ X 995, Y 285
   top-right ≈ X 1177, Y 285

   Target display width = 182px.
   Aspect ratio is preserved automatically.

   The door is placed inside the central studio entrance opening and kept
   behind the foreground bench/plants so the later opening-door sequence can
   build on this placement cleanly.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-left-door {
	position: absolute;
	z-index: 4;
	left: 42.268479% !important;
	top: 27.696793% !important;
	display: block;
	width: 7.731521% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	object-fit: contain;
	object-position: left top;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* =========================================================
   V151 — ROOM 4 RIGHT DOOR ASSET

   Real asset:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Right-door-NEW.webp

   Room 4 coordinate reference: 2354 × 1029 px.

   Green-dot anchors from the supplied placement screenshot:
   top-left  ≈ X 1177, Y 285
   top-right ≈ X 1358, Y 285

   Target display width = 181px.
   Aspect ratio is preserved automatically.

   This is aligned intentionally with the left door:
   - same top Y (285)
   - same width family
   - the right door begins exactly where the left door ends, allowing the two
     leaves to meet cleanly in the centre for the future door-opening sequence.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-right-door {
	position: absolute;
	z-index: 4;
	left: 50.000000% !important;
	top: 27.696793% !important;
	display: block;
	width: 7.689040% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	object-fit: contain;
	object-position: left top;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* =========================================================
   V152 — ROOM 4 RECORDING SIGN LOOP

   Real assets:
   OFF: https://www.simme.co.uk/wp-content/uploads/2026/08/Off.webp
   ON : https://www.simme.co.uk/wp-content/uploads/2026/08/On.webp

   Room 4 coordinate reference: 2354 × 1029 px.

   Green-dot anchors from the supplied placement screenshot:
   top-left  ≈ X 1117, Y 109
   top-right ≈ X 1237, Y 109

   Target display width = 120px.

   Behaviour:
   - OFF image sits in front of ON image initially.
   - For the first 5 seconds: OFF visible, glow off.
   - For the next 5 seconds: OFF hidden, ON visible, red glow on.
   - Then the cycle repeats infinitely.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-recording-sign {
	position: absolute;
	z-index: 9;
	left: 47.451147% !important;
	top: 10.592809% !important;
	display: block;
	width: 5.097706% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	contain: layout paint style;
}

.ldg1 .ldg1__room--four > .ldg1__room-four-recording-sign > .ldg1__room-four-recording-sign-glow {
	position: absolute;
	z-index: 0;
	left: 50%;
	top: 50%;
	width: 150%;
	height: 180%;
	transform: translate(-50%, -52%);
	border-radius: 18px;
	background:
		radial-gradient(ellipse at center,
			rgba(255, 42, 42, 0.92) 0%,
			rgba(255, 38, 38, 0.68) 22%,
			rgba(225, 18, 18, 0.40) 44%,
			rgba(170, 0, 0, 0.16) 66%,
			rgba(120, 0, 0, 0.00) 100%);
	filter: blur(18px);
	opacity: 0;
	animation: ldg1-room4-recording-glow 10s linear infinite;
	pointer-events: none;
}

.ldg1 .ldg1__room--four > .ldg1__room-four-recording-sign img {
	position: relative;
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	object-fit: contain;
	object-position: left top;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.ldg1 .ldg1__room--four > .ldg1__room-four-recording-sign > .ldg1__room-four-recording-sign-on {
	z-index: 1;
}

.ldg1 .ldg1__room--four > .ldg1__room-four-recording-sign > .ldg1__room-four-recording-sign-off {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	animation: ldg1-room4-recording-off 10s linear infinite;
}

@keyframes ldg1-room4-recording-off {
	0%, 49.999% {
		opacity: 1;
		visibility: visible;
	}
	50%, 100% {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes ldg1-room4-recording-glow {
	0%, 49.999% {
		opacity: 0;
	}
	50%, 100% {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1 .ldg1__room--four > .ldg1__room-four-recording-sign > .ldg1__room-four-recording-sign-off,
	.ldg1 .ldg1__room--four > .ldg1__room-four-recording-sign > .ldg1__room-four-recording-sign-glow {
		animation: none !important;
	}

	/* Reduced-motion fallback: keep the OFF state visible and the glow off. */
	.ldg1 .ldg1__room--four > .ldg1__room-four-recording-sign > .ldg1__room-four-recording-sign-off {
		opacity: 1 !important;
		visibility: visible !important;
	}

	.ldg1 .ldg1__room--four > .ldg1__room-four-recording-sign > .ldg1__room-four-recording-sign-glow {
		opacity: 0 !important;
	}
}

/* =========================================================
   V153 — ROOM 4 COMING SOON SIGN

   Real asset:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Coming-soon.webp

   Room 4 coordinate reference: 2354 × 1029 px.

   Green-dot anchors from the supplied placement screenshot:
   top-left  ≈ X 1079, Y 479
   top-right ≈ X 1275, Y 479

   Target display width = 196px.
   Aspect ratio is preserved automatically.

   The sign sits on the central doorway, above the door leaves and below the
   animated recording sign.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-coming-soon {
	position: absolute;
	z-index: 8;
	left: 45.836873% !important;
	top: 46.550049% !important;
	display: block;
	width: 8.326253% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	object-fit: contain;
	object-position: left top;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* =========================================================
   V154 — ROOM 4 COMING SOON SIGN NEON GLOW UPGRADE

   The Coming Soon sign keeps the same Room 4 placement from V153.
   This override makes the sign read clearly inside the dark doorway by
   adding a strong layered neon aura in blue and pink.

   Intent:
   • obvious, readable glow;
   • blue and pink both visible;
   • glow appears behind/around the sign, not as a position change.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-coming-soon {
	filter:
		drop-shadow(0 0 4px rgba(255,255,255,.22))
		drop-shadow(0 0 10px rgba(79, 228, 255, .98))
		drop-shadow(0 0 22px rgba(79, 228, 255, .92))
		drop-shadow(0 0 38px rgba(79, 228, 255, .78))
		drop-shadow(0 0 10px rgba(255, 64, 214, .98))
		drop-shadow(0 0 24px rgba(255, 64, 214, .90))
		drop-shadow(0 0 42px rgba(255, 64, 214, .72)) !important;
	animation: ldg1-room4-coming-soon-neon 3.8s ease-in-out infinite;
	will-change: filter, opacity;
}

@keyframes ldg1-room4-coming-soon-neon {
	0%,
	100% {
		filter:
			drop-shadow(0 0 4px rgba(255,255,255,.20))
			drop-shadow(-2px 0 10px rgba(79, 228, 255, .92))
			drop-shadow(-2px 0 20px rgba(79, 228, 255, .84))
			drop-shadow(-2px 0 34px rgba(79, 228, 255, .66))
			drop-shadow(2px 0 10px rgba(255, 64, 214, .92))
			drop-shadow(2px 0 22px rgba(255, 64, 214, .84))
			drop-shadow(2px 0 36px rgba(255, 64, 214, .66));
		opacity: .96;
	}
	50% {
		filter:
			drop-shadow(0 0 6px rgba(255,255,255,.28))
			drop-shadow(-2px 0 14px rgba(79, 228, 255, 1))
			drop-shadow(-2px 0 28px rgba(79, 228, 255, .96))
			drop-shadow(-2px 0 48px rgba(79, 228, 255, .84))
			drop-shadow(2px 0 14px rgba(255, 64, 214, 1))
			drop-shadow(2px 0 30px rgba(255, 64, 214, .96))
			drop-shadow(2px 0 52px rgba(255, 64, 214, .84));
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1 .ldg1__room--four > .ldg1__room-four-coming-soon {
		animation: none !important;
		filter:
			drop-shadow(0 0 4px rgba(255,255,255,.20))
			drop-shadow(-2px 0 12px rgba(79, 228, 255, .96))
			drop-shadow(-2px 0 24px rgba(79, 228, 255, .86))
			drop-shadow(2px 0 12px rgba(255, 64, 214, .96))
			drop-shadow(2px 0 24px rgba(255, 64, 214, .86)) !important;
	}
}

/* =========================================================
   V155 — ROOM 4 COMING SOON SIGN GENTLE NEON FLICKER

   Replaces the stronger V154 neon bloom with a subtler, more believable
   neon treatment:
   • reduced glow strength;
   • gentle pulse;
   • slight intermittent flicker;
   • blue/pink still visible, but less overpowering.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-coming-soon {
	filter:
		drop-shadow(0 0 2px rgba(255,255,255,.14))
		drop-shadow(-1px 0 6px rgba(79, 228, 255, .72))
		drop-shadow(-1px 0 14px rgba(79, 228, 255, .50))
		drop-shadow(1px 0 6px rgba(255, 64, 214, .72))
		drop-shadow(1px 0 14px rgba(255, 64, 214, .50)) !important;
	animation: ldg1-room4-coming-soon-neon-soft 6.8s linear infinite;
	will-change: filter, opacity;
}

@keyframes ldg1-room4-coming-soon-neon-soft {
	0%,
	7%,
	14%,
	26%,
	39%,
	52%,
	66%,
	79%,
	92%,
	100% {
		filter:
			drop-shadow(0 0 2px rgba(255,255,255,.14))
			drop-shadow(-1px 0 6px rgba(79, 228, 255, .68))
			drop-shadow(-1px 0 13px rgba(79, 228, 255, .46))
			drop-shadow(1px 0 6px rgba(255, 64, 214, .68))
			drop-shadow(1px 0 13px rgba(255, 64, 214, .46));
		opacity: .95;
	}
	10%,
	33%,
	58%,
	84% {
		filter:
			drop-shadow(0 0 3px rgba(255,255,255,.18))
			drop-shadow(-1px 0 8px rgba(79, 228, 255, .82))
			drop-shadow(-1px 0 17px rgba(79, 228, 255, .58))
			drop-shadow(1px 0 8px rgba(255, 64, 214, .82))
			drop-shadow(1px 0 17px rgba(255, 64, 214, .58));
		opacity: 1;
	}
	18%,
	19.2%,
	60.2%,
	61.4%,
	86.2%,
	87.1% {
		filter:
			drop-shadow(0 0 1px rgba(255,255,255,.08))
			drop-shadow(-1px 0 3px rgba(79, 228, 255, .34))
			drop-shadow(-1px 0 8px rgba(79, 228, 255, .22))
			drop-shadow(1px 0 3px rgba(255, 64, 214, .34))
			drop-shadow(1px 0 8px rgba(255, 64, 214, .22));
		opacity: .88;
	}
	20.4%,
	21.2%,
	62.6%,
	63.3%,
	88.4%,
	89.0% {
		filter:
			drop-shadow(0 0 2px rgba(255,255,255,.16))
			drop-shadow(-1px 0 7px rgba(79, 228, 255, .76))
			drop-shadow(-1px 0 15px rgba(79, 228, 255, .54))
			drop-shadow(1px 0 7px rgba(255, 64, 214, .76))
			drop-shadow(1px 0 15px rgba(255, 64, 214, .54));
		opacity: .98;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1 .ldg1__room--four > .ldg1__room-four-coming-soon {
		animation: none !important;
		filter:
			drop-shadow(0 0 2px rgba(255,255,255,.12))
			drop-shadow(-1px 0 6px rgba(79, 228, 255, .62))
			drop-shadow(-1px 0 12px rgba(79, 228, 255, .42))
			drop-shadow(1px 0 6px rgba(255, 64, 214, .62))
			drop-shadow(1px 0 12px rgba(255, 64, 214, .42)) !important;
		opacity: .96 !important;
	}
}

/* =========================================================
   V156 — PORTRAIT MOBILE ROOM 4 SNAP-TRAP FIX

   Symptom:
   some portrait phones could initialise / restore the horizontal viewport
   directly inside Studio Room 4 and mandatory snapping could then keep the
   visitor there, making Rooms 1–3 appear unavailable.

   Fix:
   • use proximity rather than mandatory snapping on portrait phones;
   • keep the nine exhibits as the actual snap areas;
   • remove Room 4 itself as a CSS snap magnet;
   • temporarily disable snapping while V156 establishes Exhibit 1 on startup;
   • keep the desktop/landscape gallery and JS Room 4 navigation unchanged.
   ========================================================= */

@media (max-width: 768px) and (orientation: portrait) {
	.ldg1 .ldg1__viewport {
		scroll-snap-type: x proximity !important;
		scroll-padding-inline: 50vw;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
	}

	/*
	 * Room 4 remains reachable by ordinary horizontal movement and by the
	 * Frame 9 Next control, but the very wide room itself is no longer a snap
	 * area that can capture the initial mobile scroll position.
	 */
	.ldg1 .ldg1__room--four {
		scroll-snap-align: none !important;
		scroll-snap-stop: normal !important;
	}

	/*
	 * The desktop continuous track is the production mobile track in the
	 * current gallery architecture. Reassert this at the end of the combined
	 * stylesheet so older portrait rules cannot win through cache/order issues.
	 */
	.ldg1 .ldg1__track--desktop {
		display: flex !important;
	}

	.ldg1 .ldg1__track--mobile,
	.ldg1 .ldg1__mobile-slide,
	.ldg1 .ldg1__mobile-exhibit {
		display: none !important;
	}

	/* Startup only: JS removes this class after Exhibit 1 is established. */
	.ldg1.is-mobile-starting-v156 .ldg1__viewport {
		scroll-snap-type: none !important;
		scroll-behavior: auto !important;
		overflow-x: auto !important;
	}
}

/* =========================================================
   V159 — ROOM 4 LORD D STATUE — REVISED PLACEMENT

   Real transparent asset:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Lord-D-Statue.webp

   Source canvas: 400 × 1406 px.
   Room 4 coordinate reference: 2354 × 1029 px.

   Green-dot anchors from the supplied placement screenshot:
   top-left  = X 365, Y 259
   top-right = X 577, Y 259

   Target display width = 212px.

   The complete transparent canvas is preserved, including the floor
   reflection. The statue sits behind the foreground bench so the room keeps
   natural depth if the two assets overlap slightly.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-lord-d-statue {
	position: absolute;
	z-index: 5;
	left: 15.505523% !important;
	top: 25.170068% !important;
	display: block;
	width: 9.005947% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	object-fit: contain;
	object-position: left top;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* =========================================================
   V160 — ROOM 4 LORD D STATUE 2

   Real transparent asset:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Lord-D-Statue-2.webp

   Room 4 coordinate reference: 2354 × 1029 px.

   Green-dot anchors from the supplied placement screenshot:
   top-left  = X 1764, Y 259
   top-right = X 1983, Y 259

   Target display width = 219px.

   This is a second independent transparent statue layer. Statue 1 remains
   exactly at its V159 placement. Both statues share the same room-depth layer.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-lord-d-statue-2 {
	position: absolute;
	z-index: 5;
	left: 74.936279% !important;
	top: 25.170068% !important;
	display: block;
	width: 9.303314% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	object-fit: contain;
	object-position: left top;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* =========================================================
   V161 — ROOM 4 LEFT-PLANT WARM GLOW

   A soft warm amber/orange uplight placed behind the left plant.
   The supplied pink dot is treated as the light-source origin
   on the locked 2354 × 1029 Room 4 grid.

   Anchor point:
   X = 823
   Y = 690

   The element is intentionally kept as a real CSS glow layer so it can be
   tuned later without changing the background image.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-left-plant-glow {
	position: absolute;
	z-index: 2;
	left: 34.961767% !important;
	top: 67.055394% !important;
	width: 10.705183% !important;   /* ≈ 252px on the 2354 grid */
	height: 31.098154% !important;  /* ≈ 320px on the 1029 grid */
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	pointer-events: none;
	transform: translate(-50%, -100%);
	opacity: 0.92;
	mix-blend-mode: screen;
	filter: blur(10px);
	background:
		radial-gradient(ellipse at 50% 100%,
			rgba(255, 236, 170, 0.90) 0%,
			rgba(255, 197, 92, 0.78) 12%,
			rgba(255, 153, 56, 0.58) 28%,
			rgba(245, 117, 32, 0.34) 45%,
			rgba(199, 82, 15, 0.16) 62%,
			rgba(140, 45, 0, 0.00) 86%),
		linear-gradient(to top,
			rgba(255, 190, 86, 0.38) 0%,
			rgba(255, 160, 62, 0.20) 24%,
			rgba(255, 132, 39, 0.10) 45%,
			rgba(255, 118, 22, 0.00) 100%);
}

@media (prefers-reduced-motion: reduce) {
	.ldg1 .ldg1__room--four > .ldg1__room-four-left-plant-glow {
		filter: blur(10px);
	}
}

/* =========================================================
   V162 — ROOM 4 RIGHT-PLANT WARM GLOW

   A soft warm amber/orange uplight placed behind the right plant.
   The supplied pink dot is treated as the light-source origin
   on the locked 2354 × 1029 Room 4 grid.

   Anchor point:
   X = 1499
   Y = 689

   The element is intentionally kept as a real CSS glow layer so it can be
   tuned later without changing the background image.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-right-plant-glow {
	position: absolute;
	z-index: 2;
	left: 63.678845% !important;
	top: 66.958212% !important;
	width: 10.705183% !important;   /* ≈ 252px on the 2354 grid */
	height: 31.098154% !important;  /* ≈ 320px on the 1029 grid */
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	pointer-events: none;
	transform: translate(-50%, -100%);
	opacity: 0.92;
	mix-blend-mode: screen;
	filter: blur(10px);
	background:
		radial-gradient(ellipse at 50% 100%,
			rgba(255, 236, 170, 0.90) 0%,
			rgba(255, 197, 92, 0.78) 12%,
			rgba(255, 153, 56, 0.58) 28%,
			rgba(245, 117, 32, 0.34) 45%,
			rgba(199, 82, 15, 0.16) 62%,
			rgba(140, 45, 0, 0.00) 86%),
		linear-gradient(to top,
			rgba(255, 190, 86, 0.38) 0%,
			rgba(255, 160, 62, 0.20) 24%,
			rgba(255, 132, 39, 0.10) 45%,
			rgba(255, 118, 22, 0.00) 100%);
}

@media (prefers-reduced-motion: reduce) {
	.ldg1 .ldg1__room--four > .ldg1__room-four-right-plant-glow {
		filter: blur(10px);
	}
}

/* =========================================================
   V163 — ROOM 4 PLANT GLOWS ANIMATED

   Enhances both plant uplights so they are visibly alive but still elegant:
   • gentle pulse;
   • subtle warm colour drift;
   • slight independent timing offset between left and right sides.

   Existing positions and layers are preserved.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-left-plant-glow,
.ldg1 .ldg1__room--four > .ldg1__room-four-right-plant-glow {
	opacity: 0.88;
	filter: blur(10px);
	will-change: opacity, filter, transform, background;
	animation: ldg1-room4-plant-glow-gentle 8.6s ease-in-out infinite;
}

.ldg1 .ldg1__room--four > .ldg1__room-four-right-plant-glow {
	animation-delay: 1.9s;
}

@keyframes ldg1-room4-plant-glow-gentle {
	0%,
	100% {
		opacity: 0.78;
		filter: blur(10px);
		background:
			radial-gradient(ellipse at 50% 100%,
				rgba(255, 236, 170, 0.82) 0%,
				rgba(255, 198, 92, 0.70) 12%,
				rgba(255, 154, 56, 0.48) 28%,
				rgba(242, 118, 34, 0.28) 45%,
				rgba(186, 78, 18, 0.13) 62%,
				rgba(140, 45, 0, 0.00) 86%),
			linear-gradient(to top,
				rgba(255, 191, 86, 0.28) 0%,
				rgba(255, 160, 62, 0.16) 24%,
				rgba(255, 132, 39, 0.08) 45%,
				rgba(255, 118, 22, 0.00) 100%);
	}
	24% {
		opacity: 0.94;
		filter: blur(11px);
		background:
			radial-gradient(ellipse at 50% 100%,
				rgba(255, 242, 181, 0.90) 0%,
				rgba(255, 209, 106, 0.78) 12%,
				rgba(255, 170, 70, 0.56) 28%,
				rgba(248, 126, 41, 0.34) 45%,
				rgba(196, 88, 25, 0.15) 62%,
				rgba(140, 45, 0, 0.00) 86%),
			linear-gradient(to top,
				rgba(255, 204, 103, 0.36) 0%,
				rgba(255, 172, 72, 0.22) 24%,
				rgba(255, 141, 49, 0.12) 45%,
				rgba(255, 118, 22, 0.00) 100%);
	}
	50% {
		opacity: 0.90;
		filter: blur(10px);
		background:
			radial-gradient(ellipse at 50% 100%,
				rgba(255, 228, 176, 0.84) 0%,
				rgba(255, 188, 118, 0.72) 12%,
				rgba(255, 151, 101, 0.52) 28%,
				rgba(242, 120, 72, 0.32) 45%,
				rgba(188, 82, 44, 0.14) 62%,
				rgba(140, 45, 0, 0.00) 86%),
			linear-gradient(to top,
				rgba(255, 186, 122, 0.32) 0%,
				rgba(255, 152, 95, 0.19) 24%,
				rgba(255, 130, 100, 0.10) 45%,
				rgba(255, 118, 22, 0.00) 100%);
	}
	74% {
		opacity: 0.96;
		filter: blur(12px);
		background:
			radial-gradient(ellipse at 50% 100%,
				rgba(255, 235, 184, 0.92) 0%,
				rgba(255, 200, 110, 0.80) 12%,
				rgba(255, 161, 78, 0.58) 28%,
				rgba(245, 121, 48, 0.36) 45%,
				rgba(198, 92, 28, 0.16) 62%,
				rgba(140, 45, 0, 0.00) 86%),
			linear-gradient(to top,
				rgba(255, 200, 97, 0.38) 0%,
				rgba(255, 167, 68, 0.24) 24%,
				rgba(255, 138, 50, 0.13) 45%,
				rgba(255, 118, 22, 0.00) 100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1 .ldg1__room--four > .ldg1__room-four-left-plant-glow,
	.ldg1 .ldg1__room--four > .ldg1__room-four-right-plant-glow {
		animation: none !important;
		opacity: 0.90;
		filter: blur(10px);
	}
}

/* =========================================================
   V164 — ROOM 4 PLANT GLOWS SMOOTH COLOUR TRANSITION

   Refines the V163 plant-light animation so the colour movement feels
   fluid and continuous rather than stepping between states.

   Intent:
   • smoother drift between warm amber / gold / peach;
   • softer opacity movement;
   • elegant continuous transition;
   • preserve all existing positions and layering.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-left-plant-glow,
.ldg1 .ldg1__room--four > .ldg1__room-four-right-plant-glow {
	opacity: 0.88;
	filter: blur(10px);
	will-change: opacity, filter, background;
	animation: ldg1-room4-plant-glow-smooth 10.5s ease-in-out infinite !important;
}

.ldg1 .ldg1__room--four > .ldg1__room-four-right-plant-glow {
	animation-delay: 2.2s !important;
}

@keyframes ldg1-room4-plant-glow-smooth {
	0%,
	100% {
		opacity: 0.80;
		filter: blur(10px);
		background:
			radial-gradient(ellipse at 50% 100%,
				rgba(255, 234, 176, 0.84) 0%,
				rgba(255, 198, 96, 0.72) 12%,
				rgba(255, 157, 62, 0.50) 28%,
				rgba(243, 119, 38, 0.30) 46%,
				rgba(190, 80, 18, 0.13) 64%,
				rgba(140, 45, 0, 0.00) 88%),
			linear-gradient(to top,
				rgba(255, 192, 88, 0.30) 0%,
				rgba(255, 161, 64, 0.17) 25%,
				rgba(255, 135, 42, 0.08) 48%,
				rgba(255, 118, 22, 0.00) 100%);
	}
	20% {
		opacity: 0.87;
		filter: blur(10.5px);
		background:
			radial-gradient(ellipse at 50% 100%,
				rgba(255, 239, 182, 0.88) 0%,
				rgba(255, 205, 104, 0.76) 12%,
				rgba(255, 166, 72, 0.55) 28%,
				rgba(246, 124, 45, 0.34) 46%,
				rgba(195, 86, 23, 0.14) 64%,
				rgba(140, 45, 0, 0.00) 88%),
			linear-gradient(to top,
				rgba(255, 198, 96, 0.33) 0%,
				rgba(255, 169, 70, 0.20) 25%,
				rgba(255, 141, 49, 0.10) 48%,
				rgba(255, 118, 22, 0.00) 100%);
	}
	40% {
		opacity: 0.92;
		filter: blur(11px);
		background:
			radial-gradient(ellipse at 50% 100%,
				rgba(255, 242, 188, 0.91) 0%,
				rgba(255, 211, 118, 0.79) 12%,
				rgba(255, 177, 88, 0.58) 28%,
				rgba(248, 132, 56, 0.36) 46%,
				rgba(198, 92, 30, 0.15) 64%,
				rgba(140, 45, 0, 0.00) 88%),
			linear-gradient(to top,
				rgba(255, 203, 104, 0.36) 0%,
				rgba(255, 176, 81, 0.22) 25%,
				rgba(255, 150, 62, 0.11) 48%,
				rgba(255, 118, 22, 0.00) 100%);
	}
	60% {
		opacity: 0.90;
		filter: blur(11px);
		background:
			radial-gradient(ellipse at 50% 100%,
				rgba(255, 235, 190, 0.90) 0%,
				rgba(255, 199, 128, 0.78) 12%,
				rgba(255, 165, 101, 0.57) 28%,
				rgba(244, 129, 76, 0.35) 46%,
				rgba(194, 90, 47, 0.15) 64%,
				rgba(140, 45, 0, 0.00) 88%),
			linear-gradient(to top,
				rgba(255, 192, 118, 0.35) 0%,
				rgba(255, 163, 96, 0.21) 25%,
				rgba(255, 141, 101, 0.10) 48%,
				rgba(255, 118, 22, 0.00) 100%);
	}
	80% {
		opacity: 0.85;
		filter: blur(10.5px);
		background:
			radial-gradient(ellipse at 50% 100%,
				rgba(255, 231, 182, 0.86) 0%,
				rgba(255, 194, 109, 0.75) 12%,
				rgba(255, 159, 80, 0.53) 28%,
				rgba(243, 123, 52, 0.32) 46%,
				rgba(192, 86, 28, 0.14) 64%,
				rgba(140, 45, 0, 0.00) 88%),
			linear-gradient(to top,
				rgba(255, 194, 97, 0.32) 0%,
				rgba(255, 166, 72, 0.19) 25%,
				rgba(255, 141, 52, 0.09) 48%,
				rgba(255, 118, 22, 0.00) 100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1 .ldg1__room--four > .ldg1__room-four-left-plant-glow,
	.ldg1 .ldg1__room--four > .ldg1__room-four-right-plant-glow {
		animation: none !important;
		opacity: 0.88;
		filter: blur(10px);
	}
}

/* =========================================================
   V165 — ROOM 4 LEFT / RIGHT BLACK COVER PANELS

   Asset:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Black-Cover.webp

   The same image is placed twice:
   • left wall recess;
   • right wall recess.

   Grid reference: 2354 × 1029 px.
   Left cover:
   top-left X = 306, Y = 290, width = 415px
   Right cover:
   top-left X = 1642, Y = 290, width = 415px

   Both panels sit behind all other Room 4 assets.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-black-cover {
	position: absolute;
	z-index: 1;
	top: 28.182702% !important;
	display: block;
	width: 17.629567% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	object-fit: contain;
	object-position: left top;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.ldg1 .ldg1__room--four > .ldg1__room-four-black-cover--left {
	left: 12.999150% !important;
}

.ldg1 .ldg1__room--four > .ldg1__room-four-black-cover--right {
	left: 69.753611% !important;
}

/* =========================================================
   V166 — ROOM 4 LEFT BLACK COVER CORRECTION

   Asset updated:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Black-Cover.webp

   LEFT black cover corrected from the supplied green-dot reference:
   top-left X = 223, Y = 249
   top-right X = 690, Y = 249
   width = 467px

   RIGHT black cover is intentionally left at its previous placement for now.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-black-cover--left {
	left: 9.473237% !important;
	top: 24.198251% !important;
	width: 19.838573% !important;
}

.ldg1 .ldg1__room--four > .ldg1__room-four-black-cover--right {
	left: 69.753611% !important;
	top: 24.198251% !important;
	width: 17.629567% !important;
}

/* =========================================================
   V167 — ROOM 4 RIGHT BLACK COVER CORRECTION

   Asset:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Black-Cover.webp

   LEFT black cover preserved:
   top-left X = 223, Y = 249
   width = 467px

   RIGHT black cover corrected:
   top-left X = 1664, Y = 249
   width = 467px

   Both black covers are now matched in size and alignment.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-black-cover--left {
	left: 9.473237% !important;
	top: 24.198251% !important;
	width: 19.838573% !important;
}

.ldg1 .ldg1__room--four > .ldg1__room-four-black-cover--right {
	left: 70.688190% !important;
	top: 24.198251% !important;
	width: 19.838573% !important;
}

/* =========================================================
   V168 — ROOM 4 STUDIO-DOOR PROXIMITY AMBIENCE

   No CSS visual changes are required for V168.

   The full V167 visual baseline remains intact. V168 is implemented in the
   Gallery PHP/embedded JavaScript and adds Studio-Doors-2.mp3 as a hidden,
   looping environmental source whose volume follows the viewer's horizontal
   distance from the locked centre of the Room 4 double doors.
   ========================================================= */


/* =========================================================
   V169 — WHO AM I EP TRACK 6: SLIDE

   EP-only update:
   - Six-card track list.
   - Six precisely aligned ticket hotspots for Right-side-of-ticket-2.webp.
   - No Gallery One / Room 4 / V168 visual or operational rules changed.
   ========================================================= */

/* =========================================================
   V169 — GALLERY AUDIO LOOP + PROACTIVE ASSET PRELOAD

   Gallery-only operational update. No visual placement CSS changed.
   The latest user-supplied EP V14 / six-track CSS above is preserved.

   PHP/embedded JavaScript now:
   - prebuffers Studio-Doors-2.mp3 from page load;
   - keeps native loop plus explicit ended/pause recovery;
   - restores studio playback after tab/browser suspension;
   - begins the proximity fade earlier on the Room 3 approach;
   - eagerly queues exhibit artwork at controlled fetch priorities;
   - starts critical Room 4 background/door assets early;
   - proactively warms remaining Room 4 images before arrival.
   ========================================================= */


/* ========================================================= */
/* === SIMME CSS MANAGER :: END :: LORD_DANCER_EP === */

/* === SIMME CSS MANAGER :: START :: SIMME_SITE :: Simme — Homepage / Node Atlas / Global Header === */
/* =========================================================
   SIMME HOMEPAGE — SYMSOUL COVERFLOW MODULE V11
   Shortcode: [symsoul_coverflow]

   PRODUCTION HARDENING ONLY:
   - existing visual design intentionally preserved
   - interaction hot paths reduced
   - reflection decode priority lowered
   - wheel deltas normalised across browser engines
   - CSS fallbacks added for decorative features
   - existing site / AI compatibility CSS remains untouched
   ========================================================= */

/* =========================================================
   SIMME / SYMSOUL HOMEPAGE COVERFLOW V11 — PRODUCTION HARDENED
   Shortcode: [symsoul_coverflow]

   Performance / compatibility pass only:
   - no intended visual redesign
   - cross-browser fallbacks for reflections / 3D / aspect ratio
   - touch and horizontal-gesture containment
   - reduced unnecessary paint work on smaller devices
   ========================================================= */

.sscf,
.sscf *,
.sscf *::before,
.sscf *::after {
    box-sizing: border-box;
}

.sscf {
    --sscf-card-width: clamp(190px, 16vw, 250px);
    --sscf-step: clamp(128px, 13.2vw, 202px);
    --sscf-radius: clamp(22px, 2.2vw, 32px);
    --sscf-ease: cubic-bezier(.2, .72, .18, 1);
    --sscf-current-accent: #ff8a00;
    --sscf-current-accent-rgb: 255,138,0;

    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 1540px;
    margin: 0 auto;
    color: #f6f8fb;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

.sscf button,
.sscf a,
.sscf img {
    -webkit-tap-highlight-color: transparent;
}

.sscf__surface {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 610px;
    overflow: hidden;
    padding: clamp(18px, 2.4vw, 34px) clamp(8px, 2vw, 28px) 28px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* No overhead spotlight: the cards, reflections and their own accent glows
 * provide the depth while the module remains visually part of the black page. */
.sscf__surface::before {
    content: none;
}

.sscf__surface::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

/* Subtle floor plane that supports the per-card reflections. */
.sscf__surface::after {
    z-index: 0;
    left: 4%;
    right: 4%;
    bottom: 72px;
    height: 28%;
    opacity: .34;
    background:
        linear-gradient(180deg, rgba(84, 145, 200, .07), transparent 40%),
        repeating-linear-gradient(90deg, rgba(145, 183, 219, .05) 0 1px, transparent 1px 74px);
    transform: perspective(380px) rotateX(67deg);
    transform-origin: 50% 100%;
    filter: blur(.2px);
    mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}

.sscf__ambient {
    position: absolute;
    z-index: 0;
    top: 18%;
    width: 28%;
    height: 54%;
    border-radius: 50%;
    opacity: .07;
    filter: blur(70px);
    pointer-events: none;
}

.sscf__ambient--left {
    left: -12%;
    background: #00aeff;
}

.sscf__ambient--right {
    right: -12%;
    background: #659fe0;
}

.sscf__stage {
    position: relative;
    z-index: 2;
    width: 100%;
    height: clamp(520px, 42vw, 590px);
    margin: 0 auto;
    perspective: 1500px;
    perspective-origin: 50% 48%;
    transform-style: preserve-3d;
    --sscf-drag-x: 0px;
    touch-action: pan-y pinch-zoom;
    overscroll-behavior-x: contain;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.sscf__stage.is-dragging {
    cursor: grabbing;
}

.sscf__stage.is-dragging .sscf__card,
.sscf__stage.is-dragging .sscf__card:hover,
.sscf__stage.is-dragging .sscf__card:focus,
.sscf__stage.is-dragging .sscf__card:active {
    cursor: grabbing !important;
    transition-duration: .22s !important;
}

.sscf__card,
.sscf__card:hover,
.sscf__card:focus,
.sscf__card:active,
.sscf__card:visited {
    --sscf-x: 0px;
    --sscf-z: 0px;
    --sscf-rotate: 0deg;
    --sscf-scale: 1;
    --sscf-opacity: 1;

    position: absolute !important;
    z-index: 2;
    left: 50% !important;
    top: 43% !important;
    display: grid !important;
    grid-template-rows: auto 1fr auto;
    width: var(--sscf-card-width) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 13px 11px 10px !important;
    overflow: visible !important;
    color: #f7f9fc !important;
    text-decoration: none !important;
    text-align: center !important;
    background:
        linear-gradient(180deg, rgba(23, 34, 46, .94), rgba(5, 10, 16, .965)) !important;
    background-color: #070d14 !important;
    border: 1px solid rgba(var(--sscf-accent-rgb), .38) !important;
    border-radius: 22px !important;
    outline: 0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .09),
        inset 0 -1px 0 rgba(var(--sscf-accent-rgb), .09),
        0 18px 38px rgba(0, 0, 0, .38),
        0 0 18px rgba(var(--sscf-accent-rgb), .08) !important;
    opacity: var(--sscf-opacity);
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transform:
        translate3d(calc(-50% + var(--sscf-x) + var(--sscf-drag-x, 0px)), -50%, var(--sscf-z))
        rotateY(var(--sscf-rotate))
        scale(var(--sscf-scale)) !important;
    transform-origin: 50% 52%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition:
        transform .62s var(--sscf-ease),
        opacity .42s ease,
        border-color .34s ease,
        box-shadow .38s ease,
        filter .34s ease !important;
}

.sscf__card::before,
.sscf__card::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.sscf__card::before {
    z-index: -1;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(var(--sscf-accent-rgb), .15), transparent 28%);
    opacity: .42;
}

.sscf__card::after {
    z-index: -2;
    left: 18%;
    right: 18%;
    bottom: -13px;
    height: 13px;
    border-radius: 50%;
    background: rgba(var(--sscf-accent-rgb), .28);
    filter: blur(12px);
    opacity: .24;
    transform: scaleX(.82);
    transition: opacity .4s ease, transform .5s var(--sscf-ease);
}

.sscf__card.is-active {
    z-index: 20;
    border-color: rgba(var(--sscf-accent-rgb), .92) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        inset 0 0 42px rgba(var(--sscf-accent-rgb), .08),
        0 24px 50px rgba(0, 0, 0, .46),
        0 0 24px rgba(var(--sscf-accent-rgb), .54),
        0 0 76px rgba(var(--sscf-accent-rgb), .30) !important;
}

.sscf__card.is-active::after {
    opacity: .72;
    transform: scaleX(1.14);
}

.sscf__card.is-active:hover {
    filter: brightness(1.045);
}

.sscf__card:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 5px !important;
    box-shadow:
        0 0 0 3px rgba(var(--sscf-accent-rgb), .48),
        0 24px 50px rgba(0, 0, 0, .46),
        0 0 34px rgba(var(--sscf-accent-rgb), .25) !important;
}

.sscf__card[data-pos="0"] {
    --sscf-x: 0px;
    --sscf-z: 94px;
    --sscf-rotate: 0deg;
    --sscf-scale: 1.08;
    --sscf-opacity: 1;
}

.sscf__card[data-pos="-1"] {
    --sscf-x: calc(var(--sscf-step) * -1);
    --sscf-z: 24px;
    --sscf-rotate: 19deg;
    --sscf-scale: .94;
    --sscf-opacity: .96;
    z-index: 15;
}

.sscf__card[data-pos="1"] {
    --sscf-x: var(--sscf-step);
    --sscf-z: 24px;
    --sscf-rotate: -19deg;
    --sscf-scale: .94;
    --sscf-opacity: .96;
    z-index: 15;
}

.sscf__card[data-pos="-2"] {
    --sscf-x: calc(var(--sscf-step) * -2);
    --sscf-z: -58px;
    --sscf-rotate: 30deg;
    --sscf-scale: .84;
    --sscf-opacity: .82;
    z-index: 8;
}

.sscf__card[data-pos="2"] {
    --sscf-x: calc(var(--sscf-step) * 2);
    --sscf-z: -58px;
    --sscf-rotate: -30deg;
    --sscf-scale: .84;
    --sscf-opacity: .82;
    z-index: 8;
}

.sscf__card[data-pos="-3"],
.sscf__card[data-pos="3"] {
    --sscf-z: -126px;
    --sscf-scale: .76;
    --sscf-opacity: .62;
    z-index: 3;
}

.sscf__card[data-pos="-3"] {
    --sscf-x: calc(var(--sscf-step) * -2.88);
    --sscf-rotate: 38deg;
}

.sscf__card[data-pos="3"] {
    --sscf-x: calc(var(--sscf-step) * 2.88);
    --sscf-rotate: -38deg;
}

.sscf__card-top {
    position: relative;
    z-index: 3;
    display: grid;
    align-content: center;
    min-height: 66px;
    padding: 2px 4px 10px;
}

.sscf__card-title {
    display: block;
    margin: 0;
    color: var(--sscf-accent);
    font-size: clamp(20px, 1.72vw, 28px);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.025em;
    text-shadow: 0 0 14px rgba(var(--sscf-accent-rgb), .24);
}

.sscf__card-subtitle {
    display: block;
    margin-top: 8px;
    color: rgba(var(--sscf-accent-rgb), .92);
    font-size: clamp(9px, .72vw, 11px);
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: .025em;
}

.sscf__media {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 600 / 746;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(207, 224, 240, .14);
    border-radius: 16px;
    background: #e9e9e9;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .15),
        0 8px 20px rgba(0, 0, 0, .28);
}

.sscf__media::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255, 255, 255, .09), transparent 18%, transparent 76%, rgba(var(--sscf-accent-rgb), .07));
}

.sscf__media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    transform: translateZ(0);
    user-select: none;
    image-rendering: auto;
    -webkit-user-drag: none;
}

.sscf__card-foot {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    min-height: 43px;
    padding-top: 8px;
}

.sscf__open-cue {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--sscf-accent);
    background:
        radial-gradient(circle at 38% 30%, rgba(255,255,255,.11), transparent 34%),
        rgba(5, 11, 18, .9);
    border: 1px solid rgba(var(--sscf-accent-rgb), .66);
    border-radius: 50%;
    box-shadow:
        inset 0 0 11px rgba(var(--sscf-accent-rgb), .06),
        0 0 10px rgba(var(--sscf-accent-rgb), .18);
    opacity: .72;
    transform: scale(.88);
    transition: opacity .3s ease, transform .38s var(--sscf-ease), box-shadow .3s ease;
}

.sscf__open-cue svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sscf__card.is-active .sscf__open-cue {
    opacity: 1;
    transform: scale(1);
    box-shadow:
        inset 0 0 13px rgba(var(--sscf-accent-rgb), .08),
        0 0 14px rgba(var(--sscf-accent-rgb), .32);
}

.sscf__card--no-link.is-active .sscf__open-cue {
    opacity: .38;
}

.sscf__card-reflection {
    position: absolute;
    z-index: 1;
    left: 0;
    top: calc(100% + 4px);
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 100%;
    height: 100%;
    padding: 13px 11px 10px;
    overflow: hidden;
    color: #f7f9fc;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(23, 34, 46, .88), rgba(5, 10, 16, .94));
    border: 1px solid rgba(var(--sscf-accent-rgb), .30);
    border-radius: 22px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 18px rgba(var(--sscf-accent-rgb), .07);
    opacity: .22;
    pointer-events: none;
    transform: scaleY(-1) scaleX(.988);
    transform-origin: 50% 50%;
    filter: blur(.45px) brightness(.82) saturate(.9);
    mask-image: linear-gradient(
        to bottom,
        transparent 52%,
        rgba(0,0,0,.08) 66%,
        rgba(0,0,0,.28) 82%,
        rgba(0,0,0,.62) 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 52%,
        rgba(0,0,0,.08) 66%,
        rgba(0,0,0,.28) 82%,
        rgba(0,0,0,.62) 100%
    );
    transition:
        opacity .38s ease,
        filter .38s ease,
        transform .48s var(--sscf-ease);
}

.sscf__reflection-top {
    display: grid;
    align-content: center;
    min-height: 66px;
    padding: 2px 4px 10px;
}

.sscf__reflection-title {
    display: block;
    color: var(--sscf-accent);
    font-size: clamp(20px, 1.72vw, 28px);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.025em;
}

.sscf__reflection-subtitle {
    display: block;
    margin-top: 8px;
    color: rgba(var(--sscf-accent-rgb), .88);
    font-size: clamp(9px, .72vw, 11px);
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: .025em;
}

.sscf__reflection-media {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 600 / 746;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(207,224,240,.10);
    border-radius: 16px;
    background: #dfe3e7;
}

.sscf__reflection-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: .90;
}

.sscf__reflection-foot {
    display: grid;
    place-items: center;
    min-height: 43px;
    padding-top: 8px;
}

.sscf__reflection-cue {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--sscf-accent);
    background: rgba(5,11,18,.82);
    border: 1px solid rgba(var(--sscf-accent-rgb), .50);
    border-radius: 50%;
}

.sscf__reflection-cue svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sscf__card[data-pos="0"] .sscf__card-reflection {
    opacity: .56;
    filter: blur(.35px) brightness(.9) saturate(.96);
    transform: scaleY(-1) scaleX(1.015);
}

.sscf__card[data-pos="-1"] .sscf__card-reflection,
.sscf__card[data-pos="1"] .sscf__card-reflection {
    opacity: .32;
}

.sscf__card[data-pos="-2"] .sscf__card-reflection,
.sscf__card[data-pos="2"] .sscf__card-reflection {
    opacity: .18;
}

.sscf__card[data-pos="-3"] .sscf__card-reflection,
.sscf__card[data-pos="3"] .sscf__card-reflection {
    opacity: .07;
}

.sscf__nav,
.sscf__nav:hover,
.sscf__nav:focus,
.sscf__nav:active {
    position: absolute !important;
    z-index: 40;
    top: 48% !important;
    display: grid !important;
    place-items: center;
    width: 48px !important;
    height: 48px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #dcecff !important;
    background: rgba(4, 11, 19, .78) !important;
    border: 1px solid rgba(177, 211, 243, .42) !important;
    border-radius: 50% !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 6px 20px rgba(0,0,0,.32),
        0 0 12px rgba(74, 163, 241, .08) !important;
    outline: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    transform: translateY(-50%);
    transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease !important;
}

.sscf__nav--prev {
    left: clamp(10px, 2.2vw, 32px) !important;
}

.sscf__nav--next {
    right: clamp(10px, 2.2vw, 32px) !important;
}

.sscf__nav svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sscf__nav:hover,
.sscf__nav:focus-visible {
    color: #fff !important;
    background: rgba(8, 22, 35, .96) !important;
    border-color: rgba(152, 211, 255, .78) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.1),
        0 7px 22px rgba(0,0,0,.36),
        0 0 18px rgba(68, 164, 244, .2) !important;
}

.sscf__nav:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 3px !important;
}

.sscf__nav:active {
    transform: translateY(-50%) scale(.93) !important;
}

.sscf__controls {
    position: relative;
    z-index: 45;
    display: grid;
    justify-items: center;
    margin-top: -14px;
}

.sscf__dots {
    display: flex;
    position: relative;
    z-index: 46;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 10px 5px;
    gap: 10px;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.sscf__dot,
.sscf__dot:hover,
.sscf__dot:focus,
.sscf__dot:active {
    display: block !important;
    width: 9px !important;
    height: 9px !important;
    min-width: 9px !important;
    min-height: 9px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(232, 239, 246, .68) !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    outline: 0 !important;
    opacity: .55;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transform: scale(1);
    transition: transform .25s ease, opacity .25s ease, background .25s ease, box-shadow .25s ease !important;
}

.sscf__dot.is-active {
    background: var(--sscf-current-accent) !important;
    opacity: 1;
    transform: scale(1.28);
    box-shadow: 0 0 0 3px rgba(var(--sscf-current-accent-rgb), .18), 0 0 12px rgba(var(--sscf-current-accent-rgb), .42) !important;
}

.sscf__dot:hover,
.sscf__dot:focus-visible {
    opacity: 1;
    transform: scale(1.18);
}

.sscf__dot:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 3px !important;
}

.sscf__hint {
    margin: 2px 0 0 !important;
    color: rgba(214, 225, 236, .64) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    letter-spacing: .02em !important;
    text-align: center !important;
}

.sscf__hint-touch {
    display: none;
}

/* =========================================================
   LAPTOP / TABLET LANDSCAPE
   ========================================================= */


/* =========================================================
   COMING-SOON SLIDE-UP PANEL
   Used only by centred cards that do not yet have a live URL.
   ========================================================= */

.sscf__coming-soon {
    --sscf-coming-accent: #5fb7ff;
    --sscf-coming-accent-rgb: 95,183,255;

    position: absolute;
    z-index: 80;
    left: 50%;
    bottom: 18px;
    width: min(640px, calc(100% - 56px));
    min-height: 138px;
    padding: 20px 62px 20px 24px;
    overflow: hidden;
    color: #f5f9fd;
    background: linear-gradient(180deg, rgba(22, 31, 42, .97), rgba(5, 10, 16, .985));
    border: 1px solid rgba(var(--sscf-coming-accent-rgb), .48);
    border-radius: 19px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 -1px 0 rgba(var(--sscf-coming-accent-rgb), .12),
        0 18px 44px rgba(0,0,0,.55),
        0 0 24px rgba(var(--sscf-coming-accent-rgb), .12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(-50%, 48px, 0) scale(.93) rotateX(-8deg);
    transform-origin: 50% 100%;
    transition:
        opacity .3s ease,
        visibility 0s linear .48s,
        transform .52s cubic-bezier(.16,.82,.22,1),
        border-color .3s ease,
        box-shadow .3s ease;
}

.sscf__coming-soon::before,
.sscf__coming-soon::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.sscf__coming-soon::before {
    top: 0;
    left: 18px;
    right: 18px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--sscf-coming-accent-rgb), .42) 12%, var(--sscf-coming-accent) 50%, rgba(var(--sscf-coming-accent-rgb), .42) 88%, transparent);
    box-shadow: 0 0 14px rgba(var(--sscf-coming-accent-rgb), .42);
}

.sscf__coming-soon::after {
    right: -50px;
    bottom: -76px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--sscf-coming-accent-rgb), .17), transparent 68%);
    filter: blur(8px);
}

.sscf__coming-soon.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(-50%, 0, 0) scale(1) rotateX(0deg);
    transition-delay: 0s;
}

.sscf__coming-soon-beam {
    position: absolute;
    z-index: 0;
    top: -52px;
    left: 50%;
    width: 72%;
    height: 92px;
    opacity: .52;
    background: radial-gradient(ellipse at 50% 100%, rgba(var(--sscf-coming-accent-rgb), .34), rgba(var(--sscf-coming-accent-rgb), .10) 42%, transparent 72%);
    filter: blur(13px);
    transform: translateX(-50%);
    pointer-events: none;
}

.sscf__coming-soon-kicker,
.sscf__coming-soon-title,
.sscf__coming-soon-copy,
.sscf__coming-soon-progress,
.sscf__coming-soon-close {
    position: relative;
    z-index: 2;
}

.sscf__coming-soon-kicker {
    display: block;
    margin: 0 0 7px;
    color: var(--sscf-coming-accent);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(var(--sscf-coming-accent-rgb), .32);
}

.sscf__coming-soon-title {
    display: block;
    margin: 0;
    color: #fff;
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.025em;
}

.sscf__coming-soon-copy {
    max-width: 470px;
    margin: 8px 0 0 !important;
    color: rgba(229, 238, 246, .78) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}

.sscf__coming-soon-progress {
    display: flex;
    align-items: flex-end;
    width: 94px;
    height: 14px;
    margin-top: 13px;
    gap: 5px;
}

.sscf__coming-soon-progress span {
    display: block;
    flex: 1 1 0;
    height: 3px;
    border-radius: 999px;
    background: rgba(var(--sscf-coming-accent-rgb), .32);
    box-shadow: 0 0 7px rgba(var(--sscf-coming-accent-rgb), .13);
    transform-origin: 50% 100%;
}

.sscf__coming-soon.is-open .sscf__coming-soon-progress span {
    animation: sscf-coming-pulse 1.25s ease-in-out infinite;
}

.sscf__coming-soon-progress span:nth-child(2) { animation-delay: .12s !important; }
.sscf__coming-soon-progress span:nth-child(3) { animation-delay: .24s !important; }
.sscf__coming-soon-progress span:nth-child(4) { animation-delay: .36s !important; }
.sscf__coming-soon-progress span:nth-child(5) { animation-delay: .48s !important; }

.sscf__coming-soon-close,
.sscf__coming-soon-close:hover,
.sscf__coming-soon-close:focus,
.sscf__coming-soon-close:active {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    display: grid !important;
    place-items: center;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(239, 247, 255, .82) !important;
    background: rgba(2, 7, 12, .58) !important;
    border: 1px solid rgba(var(--sscf-coming-accent-rgb), .32) !important;
    border-radius: 50% !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
    outline: 0 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: transform .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease !important;
}

.sscf__coming-soon-close svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.sscf__coming-soon-close:hover,
.sscf__coming-soon-close:focus-visible {
    color: #fff !important;
    border-color: rgba(var(--sscf-coming-accent-rgb), .72) !important;
    box-shadow: 0 0 13px rgba(var(--sscf-coming-accent-rgb), .20) !important;
    transform: scale(1.07);
}

.sscf__coming-soon-close:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 3px !important;
}

@keyframes sscf-coming-pulse {
    0%, 100% { height: 3px; opacity: .35; }
    50% {
        height: 12px;
        opacity: 1;
        background: var(--sscf-coming-accent);
        box-shadow: 0 0 9px rgba(var(--sscf-coming-accent-rgb), .42);
    }
}

@media (max-width: 1180px) {
    .sscf {
        --sscf-card-width: clamp(178px, 19vw, 224px);
        --sscf-step: clamp(120px, 15.5vw, 178px);
    }

    .sscf__surface {
        min-height: 570px;
    }

    .sscf__stage {
        height: 510px;
    }

    .sscf__card[data-pos="-3"],
    .sscf__card[data-pos="3"] {
        --sscf-opacity: .42;
    }
}

/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 860px) {
    .sscf {
        --sscf-card-width: clamp(185px, 27vw, 226px);
        --sscf-step: clamp(118px, 22vw, 166px);
    }

    .sscf__surface {
        min-height: 575px;
        padding-right: 4px;
        padding-left: 4px;
    }

    .sscf__stage {
        height: 520px;
    }

    .sscf__card[data-pos="-3"],
    .sscf__card[data-pos="3"] {
        opacity: 0;
        pointer-events: none;
    }

    .sscf__nav {
        width: 44px !important;
        height: 44px !important;
    }
}

/* =========================================================
   PHONE / PORTRAIT TABLET
   Active card is fully front-facing; adjacent choices deliberately peek in.
   ========================================================= */

@media (max-width: 640px) {
    .sscf {
        --sscf-card-width: min(72vw, 280px);
        --sscf-step: min(68vw, 260px);
        --sscf-radius: 20px;
    }

    .sscf__surface {
        min-height: 0;
        padding: 24px 0 20px;
        overflow: hidden;
        border-radius: 0;
    }

    .sscf__surface::after {
        bottom: 82px;
        height: 20%;
        opacity: .22;
    }

    .sscf__ambient {
        display: none;
    }

    .sscf__stage {
        height: clamp(570px, 138vw, 610px);
        perspective: 1180px;
        perspective-origin: 50% 42%;
    }

    .sscf__card,
    .sscf__card:hover,
    .sscf__card:focus,
    .sscf__card:active,
    .sscf__card:visited {
        top: 42% !important;
        padding: 10px 9px 8px !important;
        border-radius: 19px !important;
    }

    .sscf__card[data-pos="0"] {
        --sscf-z: 68px;
        --sscf-scale: 1;
    }

    .sscf__card[data-pos="-1"] {
        --sscf-x: calc(var(--sscf-step) * -1);
        --sscf-z: -18px;
        --sscf-rotate: 23deg;
        --sscf-scale: .82;
        --sscf-opacity: .68;
    }

    .sscf__card[data-pos="1"] {
        --sscf-x: var(--sscf-step);
        --sscf-z: -18px;
        --sscf-rotate: -23deg;
        --sscf-scale: .82;
        --sscf-opacity: .68;
    }

    .sscf__card[data-pos="-2"],
    .sscf__card[data-pos="2"],
    .sscf__card[data-pos="-3"],
    .sscf__card[data-pos="3"] {
        --sscf-opacity: 0;
        pointer-events: none;
    }

    .sscf__card-top,
    .sscf__reflection-top {
        min-height: 58px;
        padding: 1px 3px 7px;
    }

    .sscf__card-title,
    .sscf__reflection-title {
        font-size: clamp(21px, 6.8vw, 27px);
    }

    .sscf__card-subtitle,
    .sscf__reflection-subtitle {
        margin-top: 6px;
        font-size: clamp(8px, 2.7vw, 10px);
    }

    .sscf__media,
    .sscf__reflection-media {
        border-radius: 14px;
    }

    .sscf__card-foot,
    .sscf__reflection-foot {
        min-height: 36px;
        padding-top: 5px;
    }

    .sscf__open-cue,
    .sscf__reflection-cue {
        width: 31px;
        height: 31px;
    }

    .sscf__card-reflection {
        top: calc(100% + 5px);
        padding: 10px 9px 8px;
        border-radius: 19px;
        opacity: .12;
        mask-image: linear-gradient(
            to bottom,
            transparent 57%,
            rgba(0,0,0,.07) 70%,
            rgba(0,0,0,.24) 84%,
            rgba(0,0,0,.56) 100%
        );
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 57%,
            rgba(0,0,0,.07) 70%,
            rgba(0,0,0,.24) 84%,
            rgba(0,0,0,.56) 100%
        );
    }

    .sscf__card[data-pos="0"] .sscf__card-reflection {
        opacity: .46;
        filter: blur(.4px) brightness(.88) saturate(.94);
    }

    .sscf__card[data-pos="-1"] .sscf__card-reflection,
    .sscf__card[data-pos="1"] .sscf__card-reflection {
        opacity: .24;
    }

    .sscf__nav,
    .sscf__nav:hover,
    .sscf__nav:focus,
    .sscf__nav:active {
        top: 41% !important;
        bottom: auto !important;
        width: 42px !important;
        height: 42px !important;
        transform: translateY(-50%);
    }

    .sscf__nav--prev {
        left: 10px !important;
    }

    .sscf__nav--next {
        right: 10px !important;
    }

    .sscf__nav:active {
        transform: translateY(-50%) scale(.93) !important;
    }

    .sscf__controls {
        margin-top: -10px;
        padding-bottom: 2px;
    }

    .sscf__dots {
        gap: 9px;
    }

    .sscf__hint {
        margin-top: 3px !important;
    }

    .sscf__hint-desktop {
        display: none;
    }

    .sscf__hint-touch {
        display: inline;
    }

    .sscf__coming-soon {
        bottom: 12px;
        width: calc(100% - 22px);
        min-height: 0;
        padding: 17px 52px 16px 17px;
        border-radius: 16px;
    }

    .sscf__coming-soon-title {
        font-size: 22px;
    }

    .sscf__coming-soon-copy {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    .sscf__coming-soon-close,
    .sscf__coming-soon-close:hover,
    .sscf__coming-soon-close:focus,
    .sscf__coming-soon-close:active {
        top: 10px !important;
        right: 10px !important;
        width: 31px !important;
        height: 31px !important;
        min-width: 31px !important;
        min-height: 31px !important;
    }
}

@media (max-width: 380px) {
    .sscf {
        --sscf-card-width: min(73vw, 268px);
        --sscf-step: min(69vw, 246px);
    }

    .sscf__surface {
        padding-top: 20px;
    }

    .sscf__stage {
        height: 560px;
    }

    .sscf__card,
    .sscf__card:hover,
    .sscf__card:focus,
    .sscf__card:active,
    .sscf__card:visited {
        top: 41% !important;
    }

    .sscf__card-top,
    .sscf__reflection-top {
        min-height: 54px;
    }

    .sscf__card-title,
    .sscf__reflection-title {
        font-size: clamp(20px, 6.7vw, 25px);
    }

    .sscf__card-foot,
    .sscf__reflection-foot {
        min-height: 34px;
        padding-top: 4px;
    }

    .sscf__open-cue,
    .sscf__reflection-cue {
        width: 29px;
        height: 29px;
    }
}

/* =========================================================
   FEATURE FALLBACKS
   Keep the component usable and tidy if a browser lacks one of the
   decorative capabilities. Modern Chrome/Edge/Firefox/Safari use the
   full design; these rules are only safety nets.
   ========================================================= */

@supports not ((mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent))) {
    .sscf__card-reflection {
        display: none !important;
    }

    .sscf__controls {
        margin-top: 6px;
    }
}

@supports not (aspect-ratio: 1 / 1) {
    .sscf__media,
    .sscf__reflection-media {
        height: calc(var(--sscf-card-width) * 1.243333);
    }
}

/* =========================================================
   INPUT MODES / ACCESSIBILITY
   ========================================================= */

@media (hover: none), (pointer: coarse) {
    .sscf__card.is-active:hover {
        filter: none;
    }

    .sscf__hint-desktop {
        display: none;
    }

    .sscf__hint-touch {
        display: inline;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sscf *,
    .sscf *::before,
    .sscf *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition-duration: .01ms !important;
    }

    .sscf__card {
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
    }
}

/* Conservative fallback for engines without 3D transform preservation. */
@supports not (transform-style: preserve-3d) {
    .sscf__stage {
        perspective: none;
    }

    .sscf__card,
    .sscf__card:hover,
    .sscf__card:focus,
    .sscf__card:active,
    .sscf__card:visited {
        transform:
            translate3d(calc(-50% + var(--sscf-x) + var(--sscf-drag-x, 0px)), -50%, 0)
            scale(var(--sscf-scale)) !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — AI COMPATIBILITY RUNWAY V7
   Shortcode: [simme_ai_compatibility]

   ISOLATION RULE:
   - Appended after the existing site CSS and existing SymSoul coverflow CSS.
   - Every rule remains scoped to .saic / .saic-* only.
   - Existing Simme, Themify, Lord Dancer, Gallery, EP and coverflow CSS above
     is preserved unchanged.
   - This V7 removes the residual glow behind the logo panels so each
     logo sits cleanly on pure black with no coloured bloom inside or
     directly behind the panel.
   ========================================================= */

/* =========================================================
   SIMME HOMEPAGE — AI COMPATIBILITY RUNWAY V6
   Shortcode: [simme_ai_compatibility]

   ISOLATION RULE:
   - Every selector is scoped to .saic / .saic-* only.
   - No body, html, Themify row/module or unrelated Simme rules.
   - Low-profile open runway with no arrow controls or helper text; drag, swipe, wheel and keyboard navigation remain available.
   ========================================================= */

.saic,
.saic *,
.saic *::before,
.saic *::after {
    box-sizing: border-box;
}

.saic {
    --saic-blue: #18baff;
    --saic-blue-rgb: 24,186,255;
    --saic-gap: clamp(46px, 4.9vw, 82px);
    --saic-rail-height: clamp(96px, 7.8vw, 116px);

    position: relative;
    isolation: isolate;
    width: 100%;
    margin: 0 auto;
    color: #eef7ff;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

.saic button,
.saic img {
    -webkit-tap-highlight-color: transparent;
}

.saic__intro {
    position: relative;
    width: min(1120px, calc(100% - 28px));
    margin: 0 auto clamp(7px, .7vw, 11px);
    text-align: center;
}

.saic__title {
    margin: 0 !important;
    color: #dcecff !important;
    font-size: clamp(25px, 2.35vw, 38px) !important;
    font-weight: 500 !important;
    line-height: 1.05 !important;
    letter-spacing: -.025em !important;
    text-transform: uppercase;
    text-wrap: balance;
}

.saic__title span {
    color: #dcecff;
}

.saic__title strong {
    color: #24bfff;
    font-weight: 700;
    text-shadow: 0 0 22px rgba(36, 191, 255, .12);
}

.saic__subtitle {
    width: min(760px, 100%);
    margin: 9px auto 0 !important;
    color: rgba(203, 222, 241, .78) !important;
    font-size: clamp(13px, 1.05vw, 17px) !important;
    font-weight: 400 !important;
    line-height: 1.42 !important;
    letter-spacing: .003em !important;
    text-wrap: balance;
}

.saic__brand-divider {
    display: grid;
    grid-template-columns: minmax(28px, 1fr) 5px auto 5px minmax(28px, 1fr);
    align-items: center;
    width: min(1040px, 96%);
    margin: clamp(10px, 1vw, 15px) auto 0;
    column-gap: 12px;
}

.saic__brand-line {
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(26, 173, 247, .72));
    box-shadow: 0 0 7px rgba(26, 173, 247, .16);
}

.saic__brand-line--right {
    background: linear-gradient(90deg, rgba(26, 173, 247, .72), transparent);
}

.saic__brand-dot {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #21bfff;
    box-shadow: 0 0 8px rgba(33, 191, 255, .7);
}

.saic__brand-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(54px, 4.5vw, 68px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 44%, rgba(17, 91, 142, .17), rgba(0, 0, 0, .10) 68%, transparent 70%);
    border: 1px solid rgba(44, 192, 255, .58);
    box-shadow:
        inset 0 0 16px rgba(42, 184, 245, .08),
        0 0 16px rgba(20, 162, 232, .13);
}

.saic__brand-mark img {
    display: block !important;
    width: 72% !important;
    height: 72% !important;
    max-width: none !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0 5px rgba(52, 193, 255, .16));
}

.saic__rail {
    position: relative;
    isolation: isolate;
    width: min(1680px, calc(100% - clamp(8px, 1.2vw, 24px)));
    height: var(--saic-rail-height);
    margin: 0 auto;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(16, 104, 162, .055), transparent 31%),
        linear-gradient(180deg, rgba(2, 6, 10, .42), rgba(0, 0, 0, 0));
    border: 0;
    border-radius: 0;
    box-shadow: none;
}


.saic__centre-glow {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 12%;
    bottom: 12%;
    width: clamp(250px, 23vw, 380px);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(50, 183, 255, .12) 0%, rgba(21, 106, 164, .05) 42%, transparent 74%);
    filter: blur(14px);
    opacity: .9;
    transform: translateX(-50%);
    pointer-events: none;
}

.saic__viewport {
    position: absolute;
    z-index: 3;
    inset: 0 clamp(8px, 1.2vw, 18px);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    cursor: grab;
    outline: 0;
    mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}

.saic__viewport::-webkit-scrollbar {
    display: none;
}

.saic.is-dragging .saic__viewport {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}

.saic__viewport:focus-visible {
    outline: 2px solid rgba(139, 218, 255, .85);
    outline-offset: -4px;
    border-radius: 999px;
}

.saic__track {
    display: flex;
    align-items: stretch;
    width: max-content;
    min-width: 100%;
    height: 100%;
}

.saic__set {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: 100%;
    padding-right: var(--saic-gap);
    gap: var(--saic-gap);
}

.saic__item,
.saic__item:hover,
.saic__item:focus,
.saic__item:active {
    position: relative;
    display: grid !important;
    place-items: center;
    flex: 0 0 auto;
    width: clamp(194px, 14.6vw, 266px) !important;
    height: calc(var(--saic-rail-height) - 14px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    opacity: .74;
    filter: brightness(.84) saturate(.88);
    transform: translateZ(0) scale(.955);
    transform-origin: 50% 50%;
    transition:
        opacity .35s ease,
        filter .38s ease,
        transform .44s cubic-bezier(.18,.72,.2,1) !important;
}

.saic__item::before {
    display: none;
    content: none;
}

.saic__item::after {
    position: absolute;
    top: 50%;
    right: calc((var(--saic-gap) / -2) - 2px);
    width: 4px;
    height: 4px;
    content: "";
    border-radius: 50%;
    background: rgba(var(--saic-blue-rgb), .66);
    box-shadow: 0 0 8px rgba(var(--saic-blue-rgb), .42);
    transform: translateY(-50%);
    pointer-events: none;
}

.saic__logo-shell {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: calc(100% - 14px);
    padding: 5px 8px;
    overflow: hidden;
    background: #000 !important;
    border: 1px solid rgba(122, 160, 190, .12) !important;
    border-radius: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        inset 0 -1px 0 rgba(255,255,255,.02),
        0 0 0 1px rgba(0,0,0,.48);
    isolation: isolate;
}

.saic__item img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(100%, 244px) !important;
    max-height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.saic__item.is-near {
    opacity: .88;
    filter: brightness(.96) saturate(.95);
    transform: translateZ(0) scale(.99);
}

.saic__item.is-active {
    z-index: 4;
    opacity: 1;
    filter: brightness(1.06) saturate(1.01);
    transform: translateZ(0) scale(1.028);
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.saic__item.is-active::before {
    opacity: 0;
    transform: none;
}

.saic__item.is-active img {
    filter: none;
}

.saic__item:hover,
.saic__item:focus-visible {
    opacity: 1;
    filter: brightness(1.08) saturate(1.02);
}

.saic__item:focus-visible {
    border-color: transparent !important;
    outline: 2px solid rgba(228, 248, 255, .78) !important;
    outline-offset: 3px !important;
}










@media (max-width: 900px) {
    .saic {
        --saic-gap: clamp(34px, 5vw, 56px);
        --saic-rail-height: 100px;
    }

    .saic__rail {
        width: calc(100% - 18px);
    }

    .saic__item,
    .saic__item:hover,
    .saic__item:focus,
    .saic__item:active {
        width: clamp(176px, 23vw, 232px) !important;
    }

    .saic__logo-shell {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: calc(100% - 14px);
    padding: 5px 8px;
    overflow: hidden;
    background: #000 !important;
    border: 1px solid rgba(122, 160, 190, .12) !important;
    border-radius: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        inset 0 -1px 0 rgba(255,255,255,.02),
        0 0 0 1px rgba(0,0,0,.48);
    isolation: isolate;
}

.saic__item img {
        max-width: 220px !important;
        max-height: 56px !important;
    }
}

@media (max-width: 640px) {
    .saic {
        --saic-gap: 28px;
        --saic-rail-height: 84px;
    }

    .saic__intro {
        width: calc(100% - 22px);
        margin-bottom: 6px;
    }

    .saic__title {
        font-size: clamp(21px, 6.6vw, 29px) !important;
    }

    .saic__subtitle {
        width: min(440px, 100%);
        margin-top: 7px !important;
        font-size: 12.5px !important;
        line-height: 1.38 !important;
    }

    .saic__brand-divider {
        grid-template-columns: minmax(18px, 1fr) 4px auto 4px minmax(18px, 1fr);
        width: 96%;
        margin-top: 9px;
        column-gap: 8px;
    }

    .saic__brand-mark {
        width: 48px;
    }

    .saic__rail {
        width: calc(100% - 4px);
        border-radius: 0;
    }

    .saic__viewport {
        left: 4px;
        right: 4px;
        mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    }

    .saic__item,
    .saic__item:hover,
    .saic__item:focus,
    .saic__item:active {
        width: clamp(164px, 48vw, 196px) !important;
        height: 70px !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    .saic__logo-shell {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: calc(100% - 14px);
    padding: 5px 8px;
    overflow: hidden;
    background: #000 !important;
    border: 1px solid rgba(122, 160, 190, .12) !important;
    border-radius: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        inset 0 -1px 0 rgba(255,255,255,.02),
        0 0 0 1px rgba(0,0,0,.48);
    isolation: isolate;
}

.saic__item img {
        max-width: 188px !important;
        max-height: 50px !important;
    }

    .saic__item.is-active {
        transform: translateZ(0) scale(1.02);
    }

    .saic__centre-glow {
        width: 220px;
    }

    .saic__rail::before,
    .saic__rail::after {
        display: none;
    }
}


@media (prefers-reduced-motion: reduce) {
    .saic *,
    .saic *::before,
    .saic *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================
   SIMME HOMEPAGE — AI COMPATIBILITY RUNWAY V8 OVERRIDE
   Clean intro treatment: no mascot-divider row, calmer mixed-case
   heading, and typography aligned more closely with the homepage feel.
   ========================================================= */

.saic__intro {
    width: min(1120px, calc(100% - 28px));
    margin: 0 auto clamp(14px, 1.2vw, 20px);
}

.saic__title {
    color: #e6f1ff !important;
    font-size: clamp(29px, 2.65vw, 46px) !important;
    font-weight: 700 !important;
    line-height: 1.04 !important;
    letter-spacing: -.045em !important;
    text-transform: none !important;
}

.saic__title span {
    color: inherit !important;
}

.saic__title strong {
    color: #8dd7ff !important;
    font-weight: 700 !important;
    text-shadow: 0 0 18px rgba(36, 191, 255, .10) !important;
}

.saic__subtitle {
    margin: 12px auto 0 !important;
    color: rgba(203, 222, 241, .82) !important;
    font-size: clamp(14px, 1.06vw, 17px) !important;
    line-height: 1.48 !important;
    letter-spacing: .002em !important;
}

.saic__brand-divider {
    display: none !important;
}

@media (max-width: 640px) {
    .saic__intro {
        width: calc(100% - 18px);
        margin-bottom: 10px;
    }

    .saic__title {
        font-size: clamp(24px, 7.6vw, 33px) !important;
        line-height: 1.08 !important;
        letter-spacing: -.04em !important;
    }

    .saic__subtitle {
        margin-top: 10px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
}

@media (max-width: 480px) {
    .saic__intro {
        width: calc(100% - 12px);
        margin-bottom: 12px;
    }

    .saic__title {
        font-size: clamp(22px, 8.6vw, 29px) !important;
    }
}

/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V5
   Shortcode: [simme_comparison_rail]

   V5 UPDATES
   - Topic buttons always above comparison panels.
   - All topic buttons visible at once on all devices.
   - Supplied ON/OFF topic icons used.
   - Supplied VS asset used and kept between the panels.
   - Active topic shows a small down-arrow indicator.
   ========================================================= */

.sscr,
.sscr *,
.sscr *::before,
.sscr *::after {
    box-sizing: border-box;
}

.sscr {
    --sscr-panel: rgba(3, 8, 16, .96);
    --sscr-panel-2: rgba(4, 10, 19, .94);
    --sscr-text: #dbe7ff;
    --sscr-muted: #96a9c8;
    --sscr-blue: #37b7ff;
    --sscr-blue-rgb: 55, 183, 255;
    --sscr-green: #7CFF3D;
    --sscr-green-rgb: 124, 255, 61;
    --sscr-red: #ff4337;
    --sscr-red-rgb: 255, 67, 55;
    position: relative;
    width: min(100%, 1320px);
    margin: 0 auto;
    padding: clamp(18px, 2.2vw, 30px);
    color: var(--sscr-text);
    background:
        radial-gradient(circle at top center, rgba(var(--sscr-blue-rgb), .05), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,0)),
        transparent;
    font-family: inherit;
}

.sscr__intro {
    max-width: 900px;
    margin: 0 auto clamp(18px, 2vw, 24px);
    text-align: center;
}

.sscr__headline {
    margin: 0;
    color: #e1edfa;
    font-size: clamp(2rem, 4vw, 3.55rem);
    font-weight: 800;
    line-height: .98;
}

.sscr__summary {
    max-width: 860px;
    margin: 14px auto 0;
    color: #b5c9eb;
    font-size: clamp(1rem, 1.4vw, 1.28rem);
    line-height: 1.5;
}

.sscr__shell {
    display: block;
}

.sscr__rail,
.sscr__stage,
.sscr__principles {
    border: 1px solid rgba(104, 154, 205, .14);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(17, 28, 49, .30), rgba(5, 11, 21, .90)),
        var(--sscr-panel-2);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 0 1px rgba(0, 0, 0, .28),
        0 16px 48px rgba(0, 0, 0, .28);
}

.sscr__rail {
    margin-bottom: clamp(14px, 1.8vw, 20px);
    padding: 16px 16px 18px;
}

.sscr__rail-label {
    margin: 0 0 12px;
    color: #92a9cb;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sscr__rail-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(8px, .9vw, 14px);
}

.sscr__topic {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 88px;
    padding: 10px 8px 12px;
    border: 1px solid rgba(92, 129, 169, .20);
    border-radius: 18px;
    background: rgba(4, 9, 17, .72);
    color: #d8e5fb;
    text-align: center;
    font: inherit;
    cursor: pointer;
    transition: transform .22s ease, border-color .22s ease, box-shadow .28s ease, background .22s ease;
}

.sscr__topic:hover,
.sscr__topic:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(var(--sscr-blue-rgb), .34);
    box-shadow: 0 0 0 3px rgba(var(--sscr-blue-rgb), .08), 0 0 18px rgba(var(--sscr-blue-rgb), .10);
    outline: none;
}

.sscr__topic.is-active {
    border-color: rgba(var(--sscr-blue-rgb), .58);
    background: linear-gradient(180deg, rgba(18, 31, 59, .88), rgba(5, 10, 19, .88));
    box-shadow: 0 0 0 3px rgba(var(--sscr-blue-rgb), .10), 0 0 22px rgba(var(--sscr-blue-rgb), .12);
}

.sscr__topic::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 0;
    height: 0;
    margin-left: -11px;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 11px solid rgba(159, 196, 255, .92);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .22s ease, transform .22s ease;
    filter: drop-shadow(0 0 10px rgba(var(--sscr-blue-rgb), .28));
}

.sscr__topic.is-active::after {
    opacity: 1;
    transform: translateY(0);
}

.sscr__topic-visual {
    position: relative;
    width: clamp(28px, 3vw, 44px);
    height: clamp(28px, 3vw, 44px);
    flex: 0 0 auto;
}

.sscr__topic-icon-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity .2s ease;
}

.sscr__topic-icon-img--on {
    opacity: 0;
}

.sscr__topic.is-active .sscr__topic-icon-img--on {
    opacity: 1;
}

.sscr__topic.is-active .sscr__topic-icon-img--off {
    opacity: 0;
}

.sscr__topic-text {
    display: block;
    min-width: 0;
    font-size: clamp(.88rem, 1.2vw, 1.03rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -.01em;
    text-wrap: balance;
}

.sscr__stage {
    position: relative;
    padding: clamp(18px, 2vw, 26px);
    overflow: hidden;
}

.sscr__panel[hidden] {
    display: none !important;
}

.sscr__panel-head {
    margin-bottom: clamp(18px, 2vw, 24px);
}

.sscr__chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid rgba(100, 149, 219, .20);
    border-radius: 999px;
    background: rgba(4, 10, 18, .78);
    color: #b9d0f6;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sscr__panel-title {
    margin: 14px 0 8px;
    color: #f0f6ff;
    font-size: clamp(1.8rem, 2.8vw, 2.65rem);
    line-height: 1.02;
}

.sscr__panel-intro {
    margin: 0;
    color: #b8cae7;
    font-size: clamp(1rem, 1.35vw, 1.22rem);
}

.sscr__compare {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(72px, 8vw, 112px) minmax(0, 1fr);
    gap: 0;
    align-items: center;
}

.sscr__card {
    position: relative;
    min-width: 0;
    padding: clamp(22px, 2.2vw, 30px);
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)), var(--sscr-panel);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 16px 38px rgba(0,0,0,.28);
    overflow: hidden;
}

.sscr__card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sscr__card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 28%);
}

.sscr__card--with {
    border-color: rgba(var(--sscr-green-rgb), .34);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(0,0,0,.26), 0 0 26px rgba(var(--sscr-green-rgb), .08), 0 16px 38px rgba(0,0,0,.30);
}

.sscr__card--with::before {
    background:
        radial-gradient(circle at 8% 10%, rgba(var(--sscr-green-rgb), .18), transparent 28%),
        radial-gradient(circle at 18% 50%, rgba(var(--sscr-green-rgb), .10), transparent 42%),
        linear-gradient(90deg, rgba(var(--sscr-green-rgb), .15), rgba(var(--sscr-green-rgb), .06) 30%, rgba(var(--sscr-green-rgb), 0) 64%),
        linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0));
}

.sscr__card--without {
    border-color: rgba(var(--sscr-red-rgb), .34);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(0,0,0,.26), 0 0 26px rgba(var(--sscr-red-rgb), .08), 0 16px 38px rgba(0,0,0,.30);
}

.sscr__card--without::before {
    background:
        radial-gradient(circle at 8% 10%, rgba(var(--sscr-red-rgb), .18), transparent 28%),
        radial-gradient(circle at 18% 50%, rgba(var(--sscr-red-rgb), .10), transparent 42%),
        linear-gradient(90deg, rgba(var(--sscr-red-rgb), .15), rgba(var(--sscr-red-rgb), .06) 30%, rgba(var(--sscr-red-rgb), 0) 64%),
        linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0));
}

.sscr__card-top,
.sscr__points {
    position: relative;
    z-index: 1;
}

.sscr__card-top {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 18px;
}

.sscr__badge {
    width: 96px;
    height: 96px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 96px;
    border-radius: 50%;
    overflow: hidden;
    background: transparent;
}

.sscr__badge img {
    width: 100%;
    height: auto;
    display: block;
}

.sscr__label {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 8px 13px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.sscr__card--with .sscr__label {
    background: rgba(var(--sscr-green-rgb), .11);
    color: #95ff6c;
    border: 1px solid rgba(var(--sscr-green-rgb), .18);
}

.sscr__card--without .sscr__label {
    background: rgba(var(--sscr-red-rgb), .11);
    color: #ff8a82;
    border: 1px solid rgba(var(--sscr-red-rgb), .18);
}

.sscr__card-title {
    margin: 0;
    color: #f4f7ff;
    font-size: clamp(1.28rem, 1.9vw, 1.78rem);
    line-height: 1.14;
}

.sscr__points {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sscr__points li {
    position: relative;
    padding-left: 28px;
    color: #d5e1f5;
    font-size: 1.03rem;
    line-height: 1.45;
}

.sscr__points li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: .02em;
    color: var(--sscr-green);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 0 10px rgba(var(--sscr-green-rgb), .18);
}

.sscr__points--negative li::before {
    content: "✕";
    color: var(--sscr-red);
    text-shadow: 0 0 10px rgba(var(--sscr-red-rgb), .18);
}

.sscr__vs {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 100%;
    min-height: 100%;
    padding: 0 6px;
}

.sscr__vs img {
    display: block;
    width: clamp(72px, 7vw, 100px);
    height: auto;
    filter: drop-shadow(0 0 16px rgba(var(--sscr-blue-rgb), .14));
}

.sscr__principles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: clamp(18px, 2vw, 28px);
    padding: 18px;
}

.sscr__principle {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    padding: 14px;
    border-radius: 18px;
    background: rgba(4, 9, 17, .52);
}

.sscr__principle-mark {
    width: 14px;
    height: 14px;
    margin-top: 5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.9), rgba(var(--sscr-blue-rgb), .9) 40%, rgba(7,16,28,1) 72%);
    box-shadow: 0 0 14px rgba(var(--sscr-blue-rgb), .20);
}

.sscr__principle h4 {
    margin: 0 0 6px;
    color: #edf5ff;
    font-size: 1rem;
    font-weight: 700;
}

.sscr__principle p {
    margin: 0;
    color: #9fb2d0;
    font-size: .95rem;
    line-height: 1.45;
}

@media (max-width: 1100px) {
    .sscr__stage {
        padding: 18px;
    }

    .sscr__card {
        padding: 20px;
    }

    .sscr__card-top {
        grid-template-columns: 84px 1fr;
    }

    .sscr__badge {
        width: 84px;
        height: 84px;
        flex-basis: 84px;
    }

    .sscr__card-title {
        font-size: clamp(1.18rem, 2vw, 1.55rem);
    }

    .sscr__points li {
        font-size: .98rem;
    }

    .sscr__principles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .sscr {
        padding: 16px;
    }

    .sscr__rail {
        padding: 12px 12px 16px;
    }

    .sscr__rail-list {
        gap: 8px;
    }

    .sscr__topic {
        min-height: 82px;
        padding: 9px 6px 11px;
        border-radius: 16px;
    }

    .sscr__topic::after {
        bottom: -9px;
        margin-left: -9px;
        border-left-width: 9px;
        border-right-width: 9px;
        border-top-width: 9px;
    }

    .sscr__topic-text {
        font-size: .92rem;
    }

    .sscr__compare {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .sscr__vs {
        order: 2;
        min-height: 0;
        padding: 0;
        margin: -2px 0;
    }

    .sscr__vs img {
        width: 84px;
    }

    .sscr__card--with {
        order: 1;
    }

    .sscr__card--without {
        order: 3;
    }

    .sscr__principles {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .sscr__headline {
        font-size: clamp(1.82rem, 11vw, 2.45rem);
    }

    .sscr__summary {
        font-size: 1rem;
    }

    .sscr__rail-label {
        margin-bottom: 10px;
        font-size: .7rem;
    }

    .sscr__topic {
        min-height: 74px;
        gap: 6px;
        padding: 8px 4px 10px;
        border-radius: 14px;
    }

    .sscr__topic-text {
        font-size: .84rem;
        line-height: 1.06;
    }

    .sscr__panel-title {
        font-size: 1.9rem;
    }

    .sscr__card-top {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .sscr__badge {
        width: 78px;
        height: 78px;
        flex-basis: 78px;
    }

    .sscr__card-title {
        font-size: 1.18rem;
    }

    .sscr__points li {
        font-size: .96rem;
    }
}

@media (max-width: 480px) {
    .sscr__topic {
        min-height: 68px;
        padding: 7px 3px 10px;
        border-radius: 12px;
    }

    .sscr__topic-visual {
        width: 26px;
        height: 26px;
    }

    .sscr__topic-text {
        font-size: .76rem;
    }

    .sscr__panel-head {
        margin-bottom: 16px;
    }

    .sscr__panel-title {
        font-size: 1.72rem;
    }

    .sscr__panel-intro {
        font-size: .98rem;
    }

    .sscr__card {
        padding: 18px 16px;
        border-radius: 20px;
    }

    .sscr__label {
        font-size: .72rem;
    }
}

@media (max-width: 360px) {
    .sscr__topic {
        min-height: 64px;
    }

    .sscr__topic-visual {
        width: 22px;
        height: 22px;
    }

    .sscr__topic-text {
        font-size: .71rem;
    }

    .sscr__card-title {
        font-size: 1.08rem;
    }

    .sscr__points li {
        font-size: .92rem;
    }
}

@media (hover: none) {
    .sscr__topic:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sscr__topic,
    .sscr__topic-icon-img {
        transition: none !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V6 OVERRIDE
   - Prevents theme/button active states from filling topic buttons green.
   - Overlays the supplied VS asset across the panel edges without
     covering comparison content.
   - Matches the comparison heading/subheading sizing to the typography
     used above the AI compatibility runway.
   ========================================================= */

/* Match the compatibility-runway intro typography. */
.sscr__intro {
    max-width: 1120px !important;
    margin: 0 auto clamp(14px, 1.2vw, 20px) !important;
}

.sscr__headline {
    margin: 0 !important;
    color: #e1edfa !important;
    font-size: clamp(29px, 2.65vw, 46px) !important;
    font-weight: 700 !important;
    line-height: 1.04 !important;
    letter-spacing: -.045em !important;
    text-transform: none !important;
}

.sscr__summary {
    max-width: 760px !important;
    margin: 12px auto 0 !important;
    color: rgba(203, 222, 241, .82) !important;
    font-size: clamp(14px, 1.06vw, 17px) !important;
    font-weight: 400 !important;
    line-height: 1.48 !important;
    letter-spacing: .002em !important;
}

/* Keep every topic button dark even if Themify/theme button rules use
   green backgrounds for hover/focus/active states. */
.sscr__topic,
.sscr__topic:hover,
.sscr__topic:focus,
.sscr__topic:focus-visible,
.sscr__topic:active {
    background-color: #050a12 !important;
    background-image: linear-gradient(180deg, rgba(13, 23, 40, .84), rgba(3, 7, 13, .96)) !important;
    color: #d8e5fb !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.sscr__topic.is-active,
.sscr__topic.is-active:hover,
.sscr__topic.is-active:focus,
.sscr__topic.is-active:focus-visible,
.sscr__topic.is-active:active {
    background-color: #07101e !important;
    background-image: linear-gradient(180deg, rgba(15, 32, 58, .96), rgba(4, 10, 19, .96)) !important;
    border-color: rgba(var(--sscr-blue-rgb), .60) !important;
    color: #eff7ff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 0 0 2px rgba(var(--sscr-blue-rgb), .08),
        0 0 20px rgba(var(--sscr-blue-rgb), .12) !important;
}

/* Desktop / landscape comparison: VS overlaps both inner panel edges.
   Extra inner-side padding protects text and icons from the overlap. */
@media (min-width: 861px) {
    .sscr__compare {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: clamp(18px, 1.8vw, 26px) !important;
        align-items: stretch !important;
    }

    .sscr__card--with {
        padding-right: clamp(52px, 5vw, 70px) !important;
    }

    .sscr__card--without {
        padding-left: clamp(52px, 5vw, 70px) !important;
    }

    .sscr__vs {
        position: absolute !important;
        z-index: 6 !important;
        left: 50% !important;
        top: 50% !important;
        width: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
        pointer-events: none !important;
    }

    .sscr__vs img {
        width: clamp(80px, 7vw, 102px) !important;
        height: auto !important;
    }
}

/* Tablet/phone: VS straddles the bottom edge of With and the top edge
   of Without. Extra vertical padding keeps it away from card content. */
@media (max-width: 860px) {
    .sscr__compare {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
    }

    .sscr__card--with {
        order: 1 !important;
        padding-bottom: 54px !important;
    }

    .sscr__vs {
        position: relative !important;
        z-index: 6 !important;
        order: 2 !important;
        left: auto !important;
        top: auto !important;
        width: max-content !important;
        min-height: 0 !important;
        margin: -38px auto !important;
        padding: 0 !important;
        transform: none !important;
        pointer-events: none !important;
    }

    .sscr__vs img {
        width: 82px !important;
        height: auto !important;
    }

    .sscr__card--without {
        order: 3 !important;
        padding-top: 54px !important;
    }
}

@media (max-width: 640px) {
    .sscr__headline {
        font-size: clamp(24px, 7.6vw, 33px) !important;
        line-height: 1.08 !important;
        letter-spacing: -.04em !important;
    }

    .sscr__summary {
        margin-top: 10px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .sscr__card--with {
        padding-bottom: 50px !important;
    }

    .sscr__card--without {
        padding-top: 50px !important;
    }

    .sscr__vs {
        margin: -34px auto !important;
    }

    .sscr__vs img {
        width: 74px !important;
    }
}

@media (max-width: 480px) {
    .sscr__headline {
        font-size: clamp(22px, 8.6vw, 29px) !important;
    }
}



/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V7 SPACING POLISH
   Tightens the vertical rhythm without making the module cramped.
   ========================================================= */

.sscr__intro {
    margin-bottom: clamp(10px, .9vw, 14px) !important;
}

.sscr__rail {
    margin-bottom: clamp(8px, .8vw, 11px) !important;
    padding: 10px 12px 12px !important;
}

.sscr__rail-label {
    margin-bottom: 7px !important;
    font-size: .72rem !important;
}

.sscr__rail-list {
    gap: clamp(6px, .65vw, 10px) !important;
}

.sscr__topic,
.sscr__topic:hover,
.sscr__topic:focus,
.sscr__topic:focus-visible,
.sscr__topic:active {
    min-height: 66px !important;
    gap: 5px !important;
    padding: 7px 6px 8px !important;
    border-radius: 15px !important;
}

.sscr__topic-visual {
    width: clamp(25px, 2.35vw, 34px) !important;
    height: clamp(25px, 2.35vw, 34px) !important;
}

.sscr__topic-text {
    font-size: clamp(.82rem, 1vw, .96rem) !important;
    line-height: 1.06 !important;
}

.sscr__topic::after {
    bottom: -8px !important;
    margin-left: -8px !important;
    border-left-width: 8px !important;
    border-right-width: 8px !important;
    border-top-width: 8px !important;
}

.sscr__stage {
    padding: clamp(13px, 1.3vw, 17px) !important;
}

.sscr__panel-head {
    margin-bottom: clamp(12px, 1.2vw, 16px) !important;
}

.sscr__chip {
    padding: 6px 11px !important;
    font-size: .72rem !important;
}

.sscr__panel-title {
    margin-top: 9px !important;
    margin-bottom: 5px !important;
}

.sscr__panel-intro {
    margin-bottom: 0 !important;
}

@media (max-width: 860px) {
    .sscr__rail {
        padding: 9px 9px 11px !important;
        margin-bottom: 8px !important;
    }

    .sscr__topic,
    .sscr__topic:hover,
    .sscr__topic:focus,
    .sscr__topic:focus-visible,
    .sscr__topic:active {
        min-height: 60px !important;
        padding: 6px 4px 7px !important;
        border-radius: 13px !important;
    }

    .sscr__topic-visual {
        width: 26px !important;
        height: 26px !important;
    }

    .sscr__topic-text {
        font-size: .80rem !important;
    }

    .sscr__stage {
        padding: 12px !important;
    }

    .sscr__panel-head {
        margin-bottom: 12px !important;
    }
}

@media (max-width: 640px) {
    .sscr__rail-label {
        margin-bottom: 6px !important;
        font-size: .66rem !important;
    }

    .sscr__topic,
    .sscr__topic:hover,
    .sscr__topic:focus,
    .sscr__topic:focus-visible,
    .sscr__topic:active {
        min-height: 56px !important;
        gap: 4px !important;
        padding: 5px 3px 7px !important;
        border-radius: 12px !important;
    }

    .sscr__topic-visual {
        width: 23px !important;
        height: 23px !important;
    }

    .sscr__topic-text {
        font-size: .74rem !important;
    }

    .sscr__stage {
        padding: 11px !important;
    }
}

@media (max-width: 420px) {
    .sscr__rail {
        padding: 8px 7px 10px !important;
    }

    .sscr__rail-list {
        gap: 5px !important;
    }

    .sscr__topic,
    .sscr__topic:hover,
    .sscr__topic:focus,
    .sscr__topic:focus-visible,
    .sscr__topic:active {
        min-height: 52px !important;
        padding: 4px 2px 6px !important;
        border-radius: 11px !important;
    }

    .sscr__topic-visual {
        width: 21px !important;
        height: 21px !important;
    }

    .sscr__topic-text {
        font-size: .68rem !important;
        letter-spacing: -.015em !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V8 TIGHT STRUCTURE
   - Removes the redundant topic repeat area above the cards.
   - Keeps a deliberate VS gap between the panels at every width.
   - Removes inherited/fixed empty height beneath the cards.
   - Pulls the comparison cards closer to the topic buttons.
   ========================================================= */

.sscr__rail {
    margin-bottom: 6px !important;
}

.sscr__stage {
    min-height: 0 !important;
    height: auto !important;
    padding: clamp(10px, 1vw, 14px) !important;
    overflow: visible !important;
}

.sscr__panel,
.sscr__panel.is-active {
    min-height: 0 !important;
    height: auto !important;
}

.sscr__panel-head,
.sscr__chip,
.sscr__panel-title,
.sscr__panel-intro {
    display: none !important;
}

.sscr__compare {
    grid-template-columns: minmax(0, 1fr) clamp(38px, 4.2vw, 54px) minmax(0, 1fr) !important;
    gap: 0 !important;
    align-items: stretch !important;
    min-height: 0 !important;
}

.sscr__vs {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
}

.sscr__vs img {
    width: clamp(76px, 6.5vw, 94px) !important;
    max-width: none !important;
}

.sscr__principles {
    margin-top: 10px !important;
}

@media (max-width: 860px) {
    .sscr__rail {
        margin-bottom: 6px !important;
    }

    .sscr__stage {
        padding: 10px !important;
    }

    .sscr__compare {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 34px auto !important;
        gap: 0 !important;
        align-items: stretch !important;
    }

    .sscr__card--with {
        grid-row: 1 !important;
        padding-bottom: 30px !important;
    }

    .sscr__vs {
        grid-row: 2 !important;
        align-self: center !important;
        justify-self: stretch !important;
        margin: 0 !important;
        min-height: 34px !important;
        height: 34px !important;
        z-index: 5 !important;
    }

    .sscr__vs img {
        width: 80px !important;
    }

    .sscr__card--without {
        grid-row: 3 !important;
        padding-top: 30px !important;
    }

    .sscr__principles {
        margin-top: 8px !important;
    }
}

@media (max-width: 640px) {
    .sscr__stage {
        padding: 8px !important;
    }

    .sscr__compare {
        grid-template-rows: auto 32px auto !important;
    }

    .sscr__vs {
        height: 32px !important;
        min-height: 32px !important;
    }

    .sscr__vs img {
        width: 74px !important;
    }

    .sscr__card--with {
        padding-bottom: 28px !important;
    }

    .sscr__card--without {
        padding-top: 28px !important;
    }
}

@media (max-width: 420px) {
    .sscr__stage {
        padding: 7px !important;
    }

    .sscr__compare {
        grid-template-rows: auto 30px auto !important;
    }

    .sscr__vs {
        height: 30px !important;
        min-height: 30px !important;
    }

    .sscr__vs img {
        width: 70px !important;
    }
}



/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V9 GRID FIX
   Corrects a legacy desktop absolute-position rule that pulled the
   VS asset out of the 3-column grid and caused the red card to collapse
   into the narrow centre track.
   ========================================================= */

@media (min-width: 861px) {
    .sscr__compare {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) clamp(44px, 4.6vw, 60px) minmax(0, 1fr) !important;
        gap: 0 !important;
        align-items: stretch !important;
    }

    .sscr__card--with {
        grid-column: 1 !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .sscr__vs {
        grid-column: 2 !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        align-self: stretch !important;
        justify-self: stretch !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        pointer-events: none !important;
    }

    .sscr__vs img {
        position: relative !important;
        z-index: 7 !important;
        flex: 0 0 auto !important;
        width: clamp(78px, 6.3vw, 96px) !important;
        max-width: none !important;
        height: auto !important;
    }

    .sscr__card--without {
        grid-column: 3 !important;
        width: auto !important;
        min-width: 0 !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V10 MOBILE VS CENTRING
   Forces the supplied VS asset to remain exactly centred between the
   stacked comparison panels on tablet and mobile layouts.
   ========================================================= */

@media (max-width: 860px) {
    .sscr__vs {
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
        justify-self: stretch !important;
        align-self: center !important;
        display: grid !important;
        place-items: center !important;
    }

    .sscr__vs img {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transform: none !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V11 MOBILE VS OVERLAP
   Makes the supplied VS asset sit over the lower edge of the green card
   and the upper edge of the red card on tablet/mobile while staying
   centred and preserving a clean visible gap between the two panels.
   ========================================================= */

@media (max-width: 860px) {
    .sscr__compare {
        row-gap: 0 !important;
    }

    .sscr__card--with {
        margin-bottom: 46px !important;
    }

    .sscr__vs {
        position: relative !important;
        z-index: 8 !important;
        width: 100% !important;
        min-height: 0 !important;
        height: 0 !important;
        margin: -44px 0 -44px !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        overflow: visible !important;
        pointer-events: none !important;
    }

    .sscr__vs img {
        position: relative !important;
        z-index: 9 !important;
        width: clamp(82px, 18vw, 108px) !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .sscr__card--without {
        margin-top: 46px !important;
    }
}

@media (max-width: 640px) {
    .sscr__card--with {
        margin-bottom: 42px !important;
    }

    .sscr__vs {
        margin: -40px 0 -40px !important;
    }

    .sscr__vs img {
        width: clamp(78px, 24vw, 98px) !important;
    }

    .sscr__card--without {
        margin-top: 42px !important;
    }
}

@media (max-width: 480px) {
    .sscr__card--with {
        margin-bottom: 38px !important;
    }

    .sscr__vs {
        margin: -36px 0 -36px !important;
    }

    .sscr__vs img {
        width: clamp(74px, 28vw, 92px) !important;
    }

    .sscr__card--without {
        margin-top: 38px !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V12 MOBILE VS BALANCE
   Reduces the mobile/tablet VS size and tightens the gap so the
   supplied VS asset overlaps both panel edges without opening up a
   large empty channel between the cards.
   ========================================================= */

@media (max-width: 860px) {
    .sscr__card--with {
        margin-bottom: 22px !important;
    }

    .sscr__vs {
        margin: -22px 0 -22px !important;
    }

    .sscr__vs img {
        width: clamp(68px, 14vw, 84px) !important;
    }

    .sscr__card--without {
        margin-top: 22px !important;
    }
}

@media (max-width: 640px) {
    .sscr__card--with {
        margin-bottom: 18px !important;
    }

    .sscr__vs {
        margin: -18px 0 -18px !important;
    }

    .sscr__vs img {
        width: clamp(66px, 20vw, 80px) !important;
    }

    .sscr__card--without {
        margin-top: 18px !important;
    }
}

@media (max-width: 480px) {
    .sscr__card--with {
        margin-bottom: 14px !important;
    }

    .sscr__vs {
        margin: -14px 0 -14px !important;
    }

    .sscr__vs img {
        width: clamp(62px, 24vw, 74px) !important;
    }

    .sscr__card--without {
        margin-top: 14px !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V13 MOBILE VS LOCK
   Keeps the stacked cards close together and places a smaller VS asset
   directly across the shared gap between their edges.
   ========================================================= */

@media (max-width: 860px) {
    .sscr__compare {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        row-gap: 0 !important;
    }

    .sscr__card--with {
        margin: 0 0 8px !important;
    }

    .sscr__vs {
        position: relative !important;
        z-index: 10 !important;
        width: 100% !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        overflow: visible !important;
        pointer-events: none !important;
    }

    .sscr__vs img {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: clamp(64px, 12vw, 78px) !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
        display: block !important;
    }

    .sscr__card--without {
        margin: 8px 0 0 !important;
    }
}

@media (max-width: 640px) {
    .sscr__card--with {
        margin-bottom: 7px !important;
    }

    .sscr__card--without {
        margin-top: 7px !important;
    }

    .sscr__vs img {
        width: clamp(62px, 17vw, 74px) !important;
    }
}

@media (max-width: 480px) {
    .sscr__card--with {
        margin-bottom: 6px !important;
    }

    .sscr__card--without {
        margin-top: 6px !important;
    }

    .sscr__vs img {
        width: clamp(60px, 20vw, 70px) !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — AI COMPATIBILITY RUNWAY V9
   Gentle neon glow for the main heading text.
   ========================================================= */

.saic__title {
    text-shadow:
        0 0 8px rgba(160, 218, 255, .10),
        0 0 18px rgba(36, 191, 255, .06) !important;
}

.saic__title span {
    text-shadow:
        0 0 8px rgba(160, 218, 255, .10),
        0 0 18px rgba(36, 191, 255, .06) !important;
}

.saic__title strong {
    text-shadow:
        0 0 10px rgba(77, 203, 255, .28),
        0 0 22px rgba(36, 191, 255, .18),
        0 0 34px rgba(36, 191, 255, .08) !important;
}


/* =========================================================
   SIMME HOMEPAGE — AI COMPATIBILITY RUNWAY V10
   Stronger visible neon glow for the heading highlight.
   ========================================================= */

.saic__title {
    color: #eef7ff !important;
    text-shadow:
        0 0 6px rgba(255, 255, 255, .10),
        0 0 14px rgba(120, 205, 255, .10) !important;
}

.saic__title span {
    color: #eef7ff !important;
    text-shadow:
        0 0 6px rgba(255, 255, 255, .10),
        0 0 14px rgba(120, 205, 255, .10) !important;
}

.saic__title strong {
    color: #8fd9ff !important;
    text-shadow:
        0 0 3px rgba(255,255,255,.72),
        0 0 10px rgba(88, 202, 255, .90),
        0 0 20px rgba(36, 191, 255, .78),
        0 0 36px rgba(36, 191, 255, .52),
        0 0 58px rgba(36, 191, 255, .26) !important;
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V14 PRINCIPLE CARDS
   Rebuilds the section under the comparison panels to match the
   supplied visual direction using the provided principle icon assets.
   ========================================================= */

.sscr__principles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2.1vw, 26px);
    margin-top: clamp(18px, 2vw, 28px);
    padding: 0;
}

.sscr__principle {
    position: relative;
    display: grid;
    grid-template-columns: clamp(128px, 18vw, 172px) minmax(0, 1fr);
    gap: clamp(18px, 2vw, 28px);
    align-items: center;
    min-height: clamp(180px, 20vw, 240px);
    padding: clamp(20px, 2.1vw, 28px);
    border-radius: 26px;
    border: 1px solid rgba(122, 177, 255, .34);
    background:
        radial-gradient(circle at 85% 15%, rgba(61, 178, 255, .16), rgba(61, 178, 255, 0) 15%),
        linear-gradient(180deg, rgba(8, 16, 31, .88), rgba(4, 10, 22, .92));
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.03),
        0 0 0 1px rgba(11, 28, 51, .35),
        0 18px 38px rgba(0, 0, 0, .22);
    overflow: hidden;
}

.sscr__principle::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 50%, rgba(35, 156, 255, .10), transparent 32%),
        linear-gradient(90deg, rgba(31, 115, 255, .08), rgba(31, 115, 255, 0) 38%);
    pointer-events: none;
}

.sscr__principle-art {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
}

.sscr__principle-art img {
    display: block;
    width: min(100%, 138px);
    height: auto;
    filter: drop-shadow(0 0 18px rgba(var(--sscr-blue-rgb), .16));
}

.sscr__principle-content {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding-right: clamp(8px, 1vw, 16px);
}

.sscr__principle-orb {
    position: absolute;
    top: 2px;
    right: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.98), rgba(73, 182, 255, .98) 45%, rgba(22, 82, 255, .96) 72%, rgba(11, 18, 32, .98) 100%);
    box-shadow: 0 0 14px rgba(var(--sscr-blue-rgb), .44);
}

.sscr__principle h4 {
    margin: 0;
    color: #f5f8ff;
    font-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.05rem);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.035em;
}

.sscr__principle-rule {
    display: block;
    width: 64px;
    height: 5px;
    margin: 16px 0 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(42, 150, 255, .96), rgba(72, 190, 255, .76));
    box-shadow: 0 0 12px rgba(var(--sscr-blue-rgb), .24);
}

.sscr__principle p {
    margin: 0;
    color: #b7c5dd;
    font-size: clamp(1rem, .92rem + .42vw, 1.18rem);
    line-height: 1.42;
    letter-spacing: -.01em;
}

.sscr__principle-mark {
    display: none !important;
}

@media (max-width: 1100px) {
    .sscr__principles {
        grid-template-columns: 1fr;
    }

    .sscr__principle {
        grid-template-columns: 132px minmax(0, 1fr);
        min-height: 0;
    }
}

@media (max-width: 760px) {
    .sscr__principle {
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 16px;
        padding: 18px;
        border-radius: 22px;
    }

    .sscr__principle-art img {
        width: min(100%, 100px);
    }

    .sscr__principle-orb {
        width: 18px;
        height: 18px;
    }

    .sscr__principle-rule {
        width: 54px;
        height: 4px;
        margin: 12px 0 14px;
    }
}

@media (max-width: 520px) {
    .sscr__principle {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 14px;
        padding: 16px;
    }

    .sscr__principle-art img {
        width: min(100%, 82px);
    }

    .sscr__principle h4 {
        font-size: clamp(1.25rem, 1rem + 1.2vw, 1.6rem);
    }

    .sscr__principle p {
        font-size: .98rem;
        line-height: 1.38;
    }
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V15 PRINCIPLE CARDS SCALE
   Reduces the lower principle-card section on all screen sizes.
   ========================================================= */

.sscr__principles {
    gap: clamp(14px, 1.6vw, 20px);
    margin-top: clamp(14px, 1.6vw, 22px);
}

.sscr__principle {
    grid-template-columns: clamp(96px, 14vw, 132px) minmax(0, 1fr);
    gap: clamp(14px, 1.5vw, 20px);
    min-height: clamp(140px, 16vw, 190px);
    padding: clamp(16px, 1.65vw, 22px);
    border-radius: 22px;
}

.sscr__principle-art img {
    width: min(100%, 112px);
}

.sscr__principle-content {
    padding-right: clamp(4px, .6vw, 10px);
}

.sscr__principle-orb {
    top: 0;
    right: 2px;
    width: 18px;
    height: 18px;
    box-shadow: 0 0 10px rgba(var(--sscr-blue-rgb), .34);
}

.sscr__principle h4 {
    font-size: clamp(1.28rem, 1rem + 1vw, 1.72rem);
    line-height: 1.04;
}

.sscr__principle-rule {
    width: 52px;
    height: 4px;
    margin: 10px 0 12px;
}

.sscr__principle p {
    font-size: clamp(.92rem, .86rem + .26vw, 1.04rem);
    line-height: 1.36;
}

@media (max-width: 1100px) {
    .sscr__principle {
        grid-template-columns: 108px minmax(0, 1fr);
        min-height: 0;
        padding: 18px;
    }

    .sscr__principle-art img {
        width: min(100%, 94px);
    }
}

@media (max-width: 760px) {
    .sscr__principle {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 12px;
        padding: 16px;
        border-radius: 20px;
    }

    .sscr__principle-art img {
        width: min(100%, 82px);
    }

    .sscr__principle-orb {
        width: 16px;
        height: 16px;
    }

    .sscr__principle h4 {
        font-size: clamp(1.18rem, 1rem + .7vw, 1.45rem);
    }

    .sscr__principle-rule {
        width: 46px;
        margin: 9px 0 11px;
    }

    .sscr__principle p {
        font-size: .92rem;
        line-height: 1.34;
    }
}

@media (max-width: 520px) {
    .sscr__principles {
        gap: 12px;
    }

    .sscr__principle {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 10px;
        padding: 14px;
    }

    .sscr__principle-art img {
        width: min(100%, 70px);
    }

    .sscr__principle h4 {
        font-size: 1.12rem;
    }

    .sscr__principle p {
        font-size: .88rem;
        line-height: 1.32;
    }
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V16 PRINCIPLE CARDS COMPACT
   Makes the lower principle cards noticeably smaller and tighter
   on all screens so they support the page instead of dominating it.
   ========================================================= */

.sscr__principles {
    gap: clamp(10px, 1.15vw, 14px) !important;
    margin-top: clamp(10px, 1.15vw, 16px) !important;
}

.sscr__principle {
    grid-template-columns: clamp(74px, 10vw, 102px) minmax(0, 1fr) !important;
    gap: clamp(10px, 1.1vw, 14px) !important;
    min-height: clamp(108px, 12vw, 142px) !important;
    padding: clamp(12px, 1.2vw, 16px) !important;
    border-radius: 18px !important;
}

.sscr__principle-art img {
    width: min(100%, 84px) !important;
}

.sscr__principle-content {
    padding-right: 4px !important;
}

.sscr__principle-orb {
    top: 0 !important;
    right: 0 !important;
    width: 14px !important;
    height: 14px !important;
    box-shadow: 0 0 8px rgba(var(--sscr-blue-rgb), .26) !important;
}

.sscr__principle h4 {
    font-size: clamp(1rem, .88rem + .65vw, 1.28rem) !important;
    line-height: 1.04 !important;
}

.sscr__principle-rule {
    width: 40px !important;
    height: 3px !important;
    margin: 8px 0 10px !important;
}

.sscr__principle p {
    font-size: clamp(.82rem, .78rem + .16vw, .92rem) !important;
    line-height: 1.28 !important;
}

@media (max-width: 1100px) {
    .sscr__principles {
        grid-template-columns: 1fr !important;
    }

    .sscr__principle {
        grid-template-columns: 82px minmax(0, 1fr) !important;
        min-height: 0 !important;
        padding: 14px !important;
    }

    .sscr__principle-art img {
        width: min(100%, 72px) !important;
    }
}

@media (max-width: 760px) {
    .sscr__principle {
        grid-template-columns: 68px minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }

    .sscr__principle-art img {
        width: min(100%, 58px) !important;
    }

    .sscr__principle-orb {
        width: 12px !important;
        height: 12px !important;
    }

    .sscr__principle h4 {
        font-size: 1rem !important;
    }

    .sscr__principle-rule {
        width: 34px !important;
        margin: 7px 0 8px !important;
    }

    .sscr__principle p {
        font-size: .82rem !important;
        line-height: 1.24 !important;
    }
}

@media (max-width: 520px) {
    .sscr__principles {
        gap: 10px !important;
    }

    .sscr__principle {
        grid-template-columns: 58px minmax(0, 1fr) !important;
        gap: 9px !important;
        padding: 11px !important;
    }

    .sscr__principle-art img {
        width: min(100%, 50px) !important;
    }

    .sscr__principle h4 {
        font-size: .95rem !important;
    }

    .sscr__principle p {
        font-size: .78rem !important;
        line-height: 1.22 !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V17 PRINCIPLE CARDS WIDTH
   Removes the top-right orb and reduces unused right-side space
   by constraining one-column principle cards on medium layouts.
   ========================================================= */

.sscr__principle-orb {
    display: none !important;
}

/* Keep the desktop 2-up layout clean, but when the cards stack
   into a single column, stop them stretching so wide. */
@media (max-width: 1100px) {
    .sscr__principles {
        justify-items: center;
    }

    .sscr__principle {
        width: min(100%, 760px) !important;
        max-width: 760px !important;
        justify-self: center;
    }
}

@media (max-width: 760px) {
    .sscr__principles {
        justify-items: stretch;
    }

    .sscr__principle {
        width: 100% !important;
        max-width: none !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — AI COMPATIBILITY RUNWAY V11
   Removes the subtitle beneath the heading for a cleaner intro.
   ========================================================= */

.saic__subtitle {
    display: none !important;
}

.saic__intro {
    margin: 0 auto clamp(10px, 1vw, 14px) !important;
}

@media (max-width: 640px) {
    .saic__intro {
        margin-bottom: 8px !important;
    }
}

@media (max-width: 480px) {
    .saic__intro {
        margin-bottom: 8px !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V18 PRINCIPLE GRID
   Keep the principle cards in a 2 x 2 grid until the screen is
   genuinely too small, then collapse to a single column.
   ========================================================= */

@media (max-width: 1100px) {
    .sscr__principles {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        justify-items: stretch !important;
        align-items: stretch !important;
    }

    .sscr__principle {
        width: 100% !important;
        max-width: none !important;
        min-height: clamp(102px, 15vw, 132px) !important;
        padding: 13px !important;
        grid-template-columns: 72px minmax(0, 1fr) !important;
        gap: 11px !important;
    }

    .sscr__principle-art img {
        width: min(100%, 62px) !important;
    }

    .sscr__principle h4 {
        font-size: clamp(.96rem, .9rem + .28vw, 1.12rem) !important;
    }

    .sscr__principle-rule {
        width: 34px !important;
        margin: 7px 0 8px !important;
    }

    .sscr__principle p {
        font-size: clamp(.76rem, .73rem + .14vw, .86rem) !important;
        line-height: 1.22 !important;
    }
}

@media (max-width: 760px) {
    .sscr__principles {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .sscr__principle {
        grid-template-columns: 60px minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 12px !important;
        min-height: 0 !important;
    }

    .sscr__principle-art img {
        width: min(100%, 52px) !important;
    }

    .sscr__principle h4 {
        font-size: .93rem !important;
    }

    .sscr__principle p {
        font-size: .76rem !important;
        line-height: 1.2 !important;
    }
}

@media (max-width: 620px) {
    .sscr__principles {
        grid-template-columns: 1fr !important;
        justify-items: stretch !important;
    }

    .sscr__principle {
        grid-template-columns: 58px minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: none !important;
    }

    .sscr__principle-art img {
        width: min(100%, 50px) !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V19 PRINCIPLES OPEN LAYOUT
   Removes the enclosing panels from the four principle items so the
   icons and text sit directly on the page in a lighter 2 x 2 layout.
   ========================================================= */

.sscr__principles {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: clamp(18px, 2.2vw, 30px) !important;
}

.sscr__principle {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    min-height: 0 !important;
    padding: clamp(8px, .8vw, 12px) !important;
}

.sscr__principle::before,
.sscr__principle::after {
    display: none !important;
    content: none !important;
}

.sscr__principle-art img {
    filter: drop-shadow(0 0 14px rgba(var(--sscr-blue-rgb), .16)) !important;
}

.sscr__principle-content {
    padding-right: 0 !important;
}

@media (max-width: 1100px) {
    .sscr__principles {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    .sscr__principle {
        width: 100% !important;
        max-width: none !important;
        padding: 8px !important;
    }
}

@media (max-width: 760px) {
    .sscr__principles {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .sscr__principle {
        padding: 6px !important;
    }
}

@media (max-width: 620px) {
    .sscr__principles {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .sscr__principle {
        padding: 4px !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — AI COMPATIBILITY RUNWAY V12
   Removes the heading area completely and tightens the runway vertically.
   ========================================================= */

.saic {
    --saic-rail-height: clamp(82px, 6.7vw, 98px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Safety only: V12 PHP no longer outputs this block. */
.saic__intro,
.saic__title,
.saic__subtitle,
.saic__brand-divider {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
}

.saic__rail {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 640px) {
    .saic {
        --saic-rail-height: 78px !important;
    }
}

@media (max-width: 480px) {
    .saic {
        --saic-rail-height: 74px !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V21 STACKING SAFETY
   Keeps the entire comparison module beneath the floating site header
   while preserving all internal card / mascot / VS overlap effects.
   ========================================================= */

.sscr {
    position: relative !important;
    z-index: 0 !important;
    isolation: isolate !important;
}

.sscr__shell,
.sscr__rail,
.sscr__stage,
.sscr__panel,
.sscr__compare {
    position: relative;
    z-index: 0 !important;
}

.sscr__card {
    position: relative !important;
    z-index: 1 !important;
}

.sscr__card-top,
.sscr__card-copy,
.sscr__points,
.sscr__badge {
    position: relative !important;
    z-index: 2 !important;
}

.sscr__vs,
.sscr__vs img {
    z-index: 3 !important;
}

/* Prevent any old high z-index values from escaping the component's
   own stacking order on desktop, tablet or mobile. */
.sscr [class^="sscr__"],
.sscr [class*=" sscr__"] {
    --sscr-local-stack: 1;
}


/* ========================================================================
   SIMME — SYMSOUL NODE ATLAS V3
   Scope: [symsoul_node_atlas]
   WordPress / Themify Ultra safe
   ======================================================================== */

.simme-na {
    --sna-bg: #f4f6fc;
    --sna-bg-deep: #eef1f9;
    --sna-surface: #ffffff;
    --sna-surface-soft: #f8f9fd;
    --sna-surface-strong: #edf0f8;
    --sna-text: #151b2a;
    --sna-text-soft: #5b6680;
    --sna-muted: #8490aa;
    --sna-border: rgba(57, 67, 98, .14);
    --sna-border-strong: rgba(36, 191, 255, .34);
    --sna-accent: #247cff;
    --sna-accent-2: #24bfff;
    --sna-accent-soft: rgba(36, 191, 255, .105);
    --sna-accent-softer: rgba(36, 124, 255, .055);
    --sna-icon-bg: #363a43;
    --sna-shadow: 0 24px 70px rgba(32, 39, 69, .09);
    --sna-shadow-small: 0 12px 30px rgba(32, 39, 69, .075);

    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    color: var(--sna-text);
    font-family: inherit;
    position: relative;
    isolation: isolate;
}

.simme-na[data-theme="dark"] {
    --sna-bg: #060a12;
    --sna-bg-deep: #09101b;
    --sna-surface: #0d1420;
    --sna-surface-soft: #101927;
    --sna-surface-strong: #162132;
    --sna-text: #eef3ff;
    --sna-text-soft: #b7c1d7;
    --sna-muted: #8995ae;
    --sna-border: rgba(185, 198, 227, .14);
    --sna-border-strong: rgba(88, 202, 255, .44);
    --sna-accent: #8fd9ff;
    --sna-accent-2: #24bfff;
    --sna-accent-soft: rgba(36, 191, 255, .12);
    --sna-accent-softer: rgba(88, 202, 255, .065);
    --sna-icon-bg: #333841;
    --sna-shadow: 0 24px 80px rgba(0, 0, 0, .25);
    --sna-shadow-small: 0 12px 34px rgba(0, 0, 0, .23);
}

.simme-na *,
.simme-na *::before,
.simme-na *::after {
    box-sizing: border-box;
}

.simme-na a,
.simme-na button,
.simme-na input {
    font: inherit;
}

.simme-na button,
.simme-na input {
    color: inherit;
}

.simme-na h1,
.simme-na h2,
.simme-na h3,
.simme-na p,
.simme-na dl,
.simme-na dd {
    margin-top: 0;
}

.simme-na__shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid var(--sna-border);
    border-radius: 28px;
    background:
        radial-gradient(circle at 12% 0%, var(--sna-accent-softer) 0, transparent 30%),
        radial-gradient(circle at 88% 2%, var(--sna-accent-soft) 0, transparent 26%),
        var(--sna-bg);
    box-shadow: var(--sna-shadow);
    transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}

/* ------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------ */

.simme-na__hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 270px);
    gap: clamp(26px, 4vw, 58px);
    align-items: start;
    padding: clamp(34px, 4.5vw, 64px);
    border-bottom: 1px solid var(--sna-border);
    background: linear-gradient(135deg, transparent 0 58%, var(--sna-accent-softer) 100%);
}

.simme-na__hero::before {
    content: "";
    position: absolute;
    left: clamp(34px, 4.5vw, 64px);
    right: clamp(34px, 4.5vw, 64px);
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--sna-accent), var(--sna-accent-2), transparent);
    opacity: .65;
}

.simme-na__hero-copy {
    max-width: 880px;
}

.simme-na__eyebrow {
    display: inline-block;
    color: var(--sna-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 11px;
}

.simme-na h1 {
    color: var(--sna-text);
    font-size: clamp(38px, 5.1vw, 68px);
    line-height: 1.01;
    font-weight: 500;
    letter-spacing: -.04em;
    margin-bottom: 18px;
}

.simme-na h2 {
    color: var(--sna-text);
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1.1;
    font-weight: 560;
    letter-spacing: -.03em;
}

.simme-na h3 {
    color: var(--sna-text);
    font-weight: 650;
}

.simme-na__lead {
    max-width: 820px;
    color: var(--sna-text);
    font-size: clamp(18px, 2vw, 23px);
    line-height: 1.52;
    margin-bottom: 12px;
}

.simme-na__support {
    max-width: 760px;
    color: var(--sna-text-soft);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 0;
}

.simme-na__hero-side {
    display: grid;
    gap: 12px;
    width: 100%;
}

.simme-na__count {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 23px;
    overflow: hidden;
    border: 1px solid var(--sna-border-strong);
    border-radius: 20px;
    background: color-mix(in srgb, var(--sna-surface) 94%, var(--sna-accent) 6%);
    box-shadow: var(--sna-shadow-small);
}

.simme-na__count::after {
    content: "";
    position: absolute;
    width: 92px;
    height: 92px;
    border: 1px solid var(--sna-border-strong);
    border-radius: 50%;
    right: -34px;
    top: -38px;
    opacity: .55;
}

.simme-na__count strong {
    color: var(--sna-text);
    font-size: 48px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -.04em;
}

.simme-na__count span {
    color: var(--sna-text);
    font-size: 15px;
    font-weight: 700;
}

.simme-na__count small {
    color: var(--sna-text-soft);
    font-size: 12px;
}


.simme-na__theme-toggle {
    --thumb-size: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 56px;
    padding: 4px;
    border: 1px solid var(--sna-border-strong);
    border-radius: 999px;
    background: color-mix(in srgb, var(--sna-surface) 88%, var(--sna-accent) 12%);
    color: var(--sna-text);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--sna-shadow-small);
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.simme-na__theme-toggle:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--sna-accent) 72%, white 28%);
    box-shadow: 0 16px 34px rgba(24, 31, 56, .10), inset 0 1px 0 rgba(255,255,255,.08);
}

.simme-na__theme-toggle:focus-visible {
    outline: 2px solid var(--sna-accent);
    outline-offset: 2px;
}

.simme-na__theme-track {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 100%;
    min-height: 48px;
    border-radius: 999px;
}

.simme-na__theme-option {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    color: var(--sna-text-soft);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
    transition: color .18s ease, opacity .18s ease;
}

.simme-na__theme-thumb {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(50% - 5px);
    height: calc(100% - 10px);
    border: 1px solid var(--sna-border-strong);
    border-radius: 999px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--sna-surface-soft) 76%, var(--sna-accent) 24%), color-mix(in srgb, var(--sna-surface) 80%, var(--sna-accent-2) 20%));
    box-shadow: 0 8px 22px rgba(18, 24, 46, .16);
    transition: transform .22s ease, background .22s ease, border-color .22s ease;
}

.simme-na[data-theme="light"] .simme-na__theme-thumb {
    transform: translateX(calc(100% - 0px));
}

.simme-na[data-theme="dark"] .simme-na__theme-option--dark,
.simme-na[data-theme="light"] .simme-na__theme-option--light {
    color: var(--sna-text);
}

.simme-na__theme-icon {
    position: relative;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.simme-na__theme-icon--sun::before,
.simme-na__theme-icon--moon::before,
.simme-na__theme-icon--moon::after {
    content: "";
    position: absolute;
}

.simme-na__theme-icon--sun::before {
    inset: 3px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 -7px 0 -6px currentColor, 0 7px 0 -6px currentColor, 7px 0 0 -6px currentColor, -7px 0 0 -6px currentColor, 5px 5px 0 -6px currentColor, -5px 5px 0 -6px currentColor, 5px -5px 0 -6px currentColor, -5px -5px 0 -6px currentColor;
}

.simme-na__theme-icon--moon::before {
    inset: 1px;
    border-radius: 50%;
    background: currentColor;
}

.simme-na__theme-icon--moon::after {
    top: 1px;
    right: -1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--sna-surface);
}

/* ------------------------------------------------------------------------
   SEARCH + FILTERS
   ------------------------------------------------------------------------ */

.simme-na__controls {
    padding: 24px clamp(28px, 4vw, 58px) 19px;
    border-bottom: 1px solid var(--sna-border);
    background: color-mix(in srgb, var(--sna-surface-soft) 88%, transparent);
}

.simme-na__search-label {
    display: block;
    margin-bottom: 8px;
    color: var(--sna-text);
    font-size: 13px;
    font-weight: 700;
}

.simme-na__search {
    width: 100% !important;
    min-height: 54px;
    margin: 0 !important;
    padding: 0 17px !important;
    border: 1px solid var(--sna-border-strong) !important;
    border-radius: 15px !important;
    background: var(--sna-surface) !important;
    color: var(--sna-text) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.3) inset !important;
    outline: none;
}

.simme-na__search::placeholder {
    color: var(--sna-muted);
    opacity: 1;
}

.simme-na__search:focus {
    border-color: var(--sna-accent) !important;
    box-shadow: 0 0 0 4px var(--sna-accent-soft) !important;
}

.simme-na__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.simme-na__filter {
    min-height: 38px;
    padding: 7px 13px;
    border: 1px solid var(--sna-border);
    border-radius: 999px;
    background: var(--sna-surface);
    color: var(--sna-text-soft);
    cursor: pointer;
    font-size: 12px;
    line-height: 1.2;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

.simme-na__filter:hover {
    transform: translateY(-1px);
    border-color: var(--sna-border-strong);
    color: var(--sna-text);
}

.simme-na__filter.is-active {
    border-color: var(--sna-accent);
    background: var(--sna-accent-soft);
    color: var(--sna-text);
    box-shadow: 0 0 0 1px var(--sna-accent-soft) inset;
}

.simme-na__results {
    margin-top: 11px;
    color: var(--sna-muted);
    font-size: 12px;
}

/* ------------------------------------------------------------------------
   WORKSPACE — FULL WIDTH, NO LARGE-SCREEN RIGHT DEAD SPACE
   ------------------------------------------------------------------------ */

.simme-na__workspace {
    width: 100% !important;
    max-width: none !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 31%);
    gap: clamp(18px, 2vw, 28px);
    align-items: start;
    padding: clamp(28px, 3.6vw, 54px);
}

.simme-na__directory,
.simme-na__detail {
    min-width: 0;
    width: 100%;
}

.simme-na__directory-heading {
    display: grid;
    grid-template-columns: minmax(250px, .75fr) minmax(320px, 1.25fr);
    gap: 28px;
    align-items: end;
    margin-bottom: 22px;
}

.simme-na__directory-heading h2 {
    margin-bottom: 0;
}

.simme-na__directory-heading p {
    color: var(--sna-text-soft);
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 3px;
}

/* ------------------------------------------------------------------------
   NODE GRID
   ------------------------------------------------------------------------ */

.simme-na__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

.simme-na__node {
    position: relative;
    min-width: 0;
    min-height: 235px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 15px;
    overflow: hidden;
    border: 1px solid var(--sna-border);
    border-radius: 18px;
    background: var(--sna-surface);
    color: var(--sna-text) !important;
    text-decoration: none !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.25) inset;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.simme-na__node::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--sna-accent), var(--sna-accent-2));
    opacity: 0;
    transition: opacity .2s ease;
}

.simme-na__node:hover,
.simme-na__node:focus-visible,
.simme-na__node.is-selected {
    transform: translateY(-3px);
    border-color: var(--sna-border-strong);
    background: color-mix(in srgb, var(--sna-surface) 95%, var(--sna-accent) 5%);
    box-shadow: var(--sna-shadow-small);
}

.simme-na__node:hover::before,
.simme-na__node:focus-visible::before,
.simme-na__node.is-selected::before {
    opacity: 1;
}

.simme-na__node[hidden] {
    display: none !important;
}

.simme-na__node-media {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 15px;
    background: var(--sna-icon-bg);
    margin-bottom: 14px;
}

.simme-na__node-media img,
.simme-na__detail-icon img,
.simme-na__neighbour-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.simme-na__node-media.is-missing {
    border: 1px dashed var(--sna-border-strong);
    background: transparent;
}

.simme-na__node-number-only,
.simme-na__detail-number-only {
    color: var(--sna-muted);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .08em;
}

.simme-na__node-copy {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
}

.simme-na__node-number {
    color: var(--sna-accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
    margin-bottom: 6px;
}

.simme-na__node-title {
    display: block;
    color: var(--sna-text);
    font-size: 15px;
    line-height: 1.26;
    font-weight: 730;
    margin-bottom: 8px;
    overflow-wrap: anywhere;
}

.simme-na__node-summary {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--sna-text-soft);
    font-size: 11px;
    line-height: 1.5;
    margin-bottom: 13px;
}

.simme-na__node-action {
    margin-top: auto;
    color: var(--sna-accent);
    font-size: 11px;
    font-weight: 750;
}

.simme-na__no-results {
    padding: 36px;
    border: 1px dashed var(--sna-border-strong);
    border-radius: 18px;
    background: var(--sna-surface);
    text-align: center;
}

.simme-na__no-results strong,
.simme-na__no-results span {
    display: block;
}

.simme-na__no-results span {
    margin-top: 7px;
    color: var(--sna-text-soft);
}

/* ------------------------------------------------------------------------
   DETAIL PANEL — INITIAL STATE
   ------------------------------------------------------------------------ */

.simme-na__detail {
    position: sticky;
    top: 86px;
    overflow: hidden;
    border: 1px solid var(--sna-border-strong);
    border-radius: 22px;
    background: var(--sna-surface);
    box-shadow: var(--sna-shadow-small);
}

.simme-na__detail-empty {
    position: relative;
    min-height: 320px;
    padding: 30px;
    overflow: hidden;
    background:
        linear-gradient(145deg, transparent 0 62%, var(--sna-accent-soft) 100%),
        var(--sna-surface);
}

.simme-na__detail-empty::after {
    content: "32";
    position: absolute;
    right: 12px;
    bottom: -28px;
    color: var(--sna-accent-soft);
    font-size: 150px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.08em;
    pointer-events: none;
}

.simme-na__detail-empty h2 {
    position: relative;
    z-index: 1;
    font-size: clamp(26px, 2.4vw, 34px);
    margin-bottom: 14px;
}

.simme-na__detail-empty p {
    position: relative;
    z-index: 1;
    color: var(--sna-text-soft);
    font-size: 14px;
    line-height: 1.65;
}

.simme-na__detail-empty-note {
    margin-top: 18px !important;
    padding-top: 18px;
    border-top: 1px solid var(--sna-border);
    font-size: 12px !important;
}

/* ------------------------------------------------------------------------
   DETAIL PANEL — SELECTED NODE FOCUS MODE
   ------------------------------------------------------------------------ */

.simme-na.is-detail-open .simme-na__workspace {
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
    gap: clamp(18px, 2.2vw, 32px);
}

.simme-na.is-detail-open .simme-na__directory-heading {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-bottom: 16px;
}

.simme-na.is-detail-open .simme-na__directory-heading h2 {
    font-size: 25px;
}

.simme-na.is-detail-open .simme-na__directory-heading p {
    display: none;
}

.simme-na.is-detail-open .simme-na__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.simme-na.is-detail-open .simme-na__node {
    min-height: 142px;
    padding: 10px;
}

.simme-na.is-detail-open .simme-na__node-media {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    margin-bottom: 9px;
    border-radius: 12px;
}

.simme-na.is-detail-open .simme-na__node-title {
    font-size: 11px;
    margin-bottom: 0;
}

.simme-na.is-detail-open .simme-na__node-summary,
.simme-na.is-detail-open .simme-na__node-action,
.simme-na.is-detail-open .simme-na__node-number {
    display: none;
}

.simme-na.is-detail-open .simme-na__detail {
    position: relative;
    top: auto;
    border-color: var(--sna-border-strong);
    background: var(--sna-surface);
}

.simme-na__detail-content {
    min-width: 0;
}

.simme-na__detail-hero {
    position: relative;
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    gap: 22px;
    align-items: start;
    padding: clamp(28px, 3.3vw, 46px);
    overflow: hidden;
    border-bottom: 1px solid var(--sna-border);
    background:
        radial-gradient(circle at 86% 14%, var(--sna-accent-soft) 0, transparent 28%),
        linear-gradient(145deg, var(--sna-surface) 0 70%, var(--sna-accent-softer) 100%);
}

.simme-na__detail-hero::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--sna-accent), var(--sna-accent-2), transparent 80%);
}

.simme-na__detail-icon {
    width: 110px;
    height: 110px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    background: var(--sna-icon-bg);
    box-shadow: 0 14px 30px rgba(24, 30, 54, .16);
}

.simme-na__detail-hero-copy {
    min-width: 0;
}

.simme-na__detail-number {
    display: inline-block;
    color: var(--sna-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    margin: 2px 0 7px;
}

.simme-na__detail-hero h2 {
    font-size: clamp(34px, 4.1vw, 56px);
    line-height: 1.02;
    margin-bottom: 8px;
}

.simme-na__detail-tagline {
    color: var(--sna-accent);
    font-size: clamp(16px, 1.6vw, 20px);
    line-height: 1.4;
    font-weight: 650;
    margin-bottom: 9px;
}

.simme-na__detail-summary {
    max-width: 790px;
    color: var(--sna-text-soft);
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 0;
}

.simme-na__back-to-atlas {
    min-height: 40px;
    padding: 8px 13px;
    border: 1px solid var(--sna-border);
    border-radius: 12px;
    background: var(--sna-surface-soft);
    color: var(--sna-text-soft);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.simme-na__back-to-atlas:hover {
    border-color: var(--sna-accent);
    color: var(--sna-text);
}

.simme-na__detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(235px, 270px);
    gap: clamp(24px, 3vw, 42px);
    padding: clamp(28px, 3.3vw, 46px);
    align-items: start;
}

.simme-na__reading {
    min-width: 0;
}

.simme-na__intro-block {
    position: relative;
    margin-bottom: 12px;
    padding: 24px 26px 24px 30px;
    border: 1px solid var(--sna-border);
    border-radius: 18px;
    background: var(--sna-surface-soft);
}

.simme-na__intro-block::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--sna-accent), var(--sna-accent-2));
}

.simme-na__intro-block p {
    color: var(--sna-text);
    font-size: 16px;
    line-height: 1.76;
    margin-bottom: 12px;
}

.simme-na__intro-block p:last-child {
    margin-bottom: 0;
}

.simme-na__sections {
    display: block;
}

.simme-na__reading-section {
    position: relative;
    padding: 30px 4px 31px 28px;
    border-bottom: 1px solid var(--sna-border);
    scroll-margin-top: 100px;
}

.simme-na__reading-section::before {
    content: "";
    position: absolute;
    left: 0;
    top: 37px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sna-accent);
    box-shadow: 0 0 0 6px var(--sna-accent-soft);
}

.simme-na__reading-section > h3 {
    font-size: clamp(23px, 2.2vw, 31px);
    line-height: 1.15;
    letter-spacing: -.025em;
    margin-bottom: 17px;
}

.simme-na__section-copy {
    color: var(--sna-text-soft);
    font-size: 15px;
    line-height: 1.76;
}

.simme-na__section-copy p,
.simme-na__section-copy ul,
.simme-na__section-copy ol,
.simme-na__section-copy blockquote {
    margin-top: 0;
    margin-bottom: 15px;
}

.simme-na__section-copy p:last-child,
.simme-na__section-copy ul:last-child,
.simme-na__section-copy ol:last-child,
.simme-na__section-copy blockquote:last-child {
    margin-bottom: 0;
}

.simme-na__section-copy ul,
.simme-na__section-copy ol {
    padding-left: 22px;
}

.simme-na__section-copy li {
    margin-bottom: 8px;
    padding-left: 4px;
}

.simme-na__section-copy h3 {
    margin: 24px 0 9px;
    color: var(--sna-text);
    font-size: 17px;
    line-height: 1.35;
    font-weight: 720;
}

.simme-na__section-copy blockquote {
    padding: 16px 19px;
    border-left: 3px solid var(--sna-accent);
    background: var(--sna-accent-soft);
    color: var(--sna-text);
}

.simme-na__section-copy a {
    color: var(--sna-accent) !important;
}

.simme-na__loading {
    padding: 18px;
    border: 1px dashed var(--sna-border-strong);
    border-radius: 15px;
    background: var(--sna-surface-soft);
    color: var(--sna-text-soft);
    font-size: 13px;
    line-height: 1.6;
}

/* ------------------------------------------------------------------------
   PASSPORT + TOC
   ------------------------------------------------------------------------ */

.simme-na__passport {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 12px;
}

.simme-na__passport-card,
.simme-na__toc {
    padding: 18px;
    border: 1px solid var(--sna-border);
    border-radius: 17px;
    background: var(--sna-surface-soft);
}

.simme-na__passport-card dl {
    display: grid;
    gap: 13px;
    margin-bottom: 17px;
}

.simme-na__passport-card dl > div {
    display: grid;
    gap: 4px;
}

.simme-na__passport-card dt,
.simme-na__runtime > span {
    color: var(--sna-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.simme-na__passport-card dd {
    color: var(--sna-text);
    font-size: 12px;
    line-height: 1.48;
    font-weight: 650;
    margin-bottom: 0;
}

.simme-na__runtime {
    display: grid;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--sna-border);
}

.simme-na__runtime > div {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 6px;
    align-items: baseline;
    padding: 9px 10px;
    border: 1px solid var(--sna-border);
    border-radius: 11px;
    background: var(--sna-surface);
}

.simme-na__runtime b {
    color: var(--sna-text-soft);
    font-size: 11px;
    font-weight: 650;
}

.simme-na__runtime strong {
    color: var(--sna-text);
    font-size: 14px;
}

.simme-na__runtime small {
    color: var(--sna-muted);
    font-size: 9px;
}

.simme-na__toc > div {
    display: grid;
    gap: 2px;
}

.simme-na__toc a {
    position: relative;
    display: block;
    padding: 8px 8px 8px 13px;
    border-radius: 9px;
    color: var(--sna-text-soft) !important;
    text-decoration: none !important;
    font-size: 11px;
    line-height: 1.42;
}

.simme-na__toc a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--sna-accent);
}

.simme-na__toc a:hover {
    background: var(--sna-accent-soft);
    color: var(--sna-text) !important;
}

.simme-na__canonical-link {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    border: 1px solid var(--sna-accent);
    border-radius: 13px;
    background: var(--sna-accent);
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 750;
    text-align: center;
}

.simme-na[data-theme="dark"] .simme-na__canonical-link {
    color: #080b12 !important;
}

/* ------------------------------------------------------------------------
   PREVIOUS / NEXT
   ------------------------------------------------------------------------ */

.simme-na__node-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    margin-top: 28px;
    padding-top: 24px;
}

.simme-na__neighbour {
    min-height: 66px;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 9px 11px;
    border: 1px solid var(--sna-border);
    border-radius: 14px;
    background: var(--sna-surface-soft);
    color: var(--sna-text) !important;
    text-decoration: none !important;
}

.simme-na__neighbour--next {
    justify-content: flex-end;
    text-align: right;
}

.simme-na__neighbour:hover {
    border-color: var(--sna-border-strong);
    background: var(--sna-accent-soft);
}

.simme-na__neighbour-media {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 10px;
    background: var(--sna-icon-bg);
}

.simme-na__neighbour-media .simme-na__detail-number-only {
    font-size: 11px;
}

.simme-na__neighbour-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.simme-na__neighbour-copy small {
    color: var(--sna-muted);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.simme-na__neighbour-copy b {
    color: var(--sna-text);
    font-size: 11px;
    line-height: 1.35;
}

.simme-na__atlas-button {
    min-width: 108px;
    border: 1px solid var(--sna-border-strong);
    border-radius: 13px;
    background: var(--sna-surface);
    color: var(--sna-text);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
}

.simme-na__atlas-button:hover {
    background: var(--sna-accent-soft);
}

/* ------------------------------------------------------------------------
   DISCOVERY FOOTER
   ------------------------------------------------------------------------ */

.simme-na__index-block {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.55fr);
    gap: 32px;
    padding: clamp(30px, 4vw, 54px);
    border-top: 1px solid var(--sna-border);
    background: var(--sna-surface-soft);
}

.simme-na__index-block h2 {
    font-size: clamp(24px, 2.4vw, 33px);
    margin-bottom: 11px;
}

.simme-na__index-block p {
    color: var(--sna-text-soft);
    font-size: 13px;
    line-height: 1.65;
    margin-bottom: 0;
}

.simme-na__index-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px 15px;
    align-content: start;
}

.simme-na__index-list a {
    display: flex;
    gap: 7px;
    align-items: baseline;
    min-width: 0;
    color: var(--sna-text-soft) !important;
    text-decoration: none !important;
    font-size: 11px;
    line-height: 1.45;
}

.simme-na__index-list a:hover {
    color: var(--sna-accent) !important;
}

.simme-na__index-list span {
    color: var(--sna-accent);
    font-weight: 800;
    flex: 0 0 auto;
}

.simme-na__mobile-backdrop {
    display: none;
}

html.simme-na-detail-lock,
html.simme-na-detail-lock body {
    overflow: hidden !important;
}

.simme-na a:focus-visible,
.simme-na button:focus-visible,
.simme-na input:focus-visible {
    outline: 2px solid var(--sna-accent) !important;
    outline-offset: 3px;
}

/* ------------------------------------------------------------------------
   LARGE DESKTOP
   ------------------------------------------------------------------------ */

@media (min-width: 1500px) {
    .simme-na__workspace {
        grid-template-columns: minmax(0, 1fr) minmax(410px, 30%);
    }

    .simme-na.is-detail-open .simme-na__workspace {
        grid-template-columns: 330px minmax(0, 1fr);
    }

    .simme-na__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------------------
   TABLET / SMALL DESKTOP
   ------------------------------------------------------------------------ */

@media (max-width: 1240px) {
    .simme-na__workspace {
        grid-template-columns: minmax(0, 1fr) minmax(330px, 35%);
    }

    .simme-na__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .simme-na.is-detail-open .simme-na__workspace {
        grid-template-columns: 280px minmax(0, 1fr);
    }

    .simme-na.is-detail-open .simme-na__grid {
        grid-template-columns: 1fr 1fr;
    }

    .simme-na__detail-layout {
        grid-template-columns: minmax(0, 1fr) 220px;
        gap: 24px;
    }

    .simme-na__index-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1050px) {
    .simme-na__workspace,
    .simme-na.is-detail-open .simme-na__workspace {
        grid-template-columns: 1fr;
    }

    .simme-na__detail {
        position: relative;
        top: auto;
    }

    .simme-na.is-detail-open .simme-na__directory {
        display: none;
    }

    .simme-na__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------------------
   MOBILE — SAME DESIGN INTEGRITY, DIFFERENT COMPOSITION
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
    .simme-na__shell {
        border-radius: 20px;
    }

    .simme-na__hero {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 30px 22px;
    }

    .simme-na__hero::before {
        left: 22px;
        right: 22px;
    }

    .simme-na h1 {
        font-size: clamp(36px, 11vw, 52px);
    }

    .simme-na__hero-side {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: stretch;
    }

    .simme-na__count {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "count label"
            "count small";
        align-items: center;
        column-gap: 12px;
        padding: 15px 16px;
    }

    .simme-na__count strong { grid-area: count; font-size: 38px; }
    .simme-na__count span { grid-area: label; }
    .simme-na__count small { grid-area: small; }

    .simme-na__theme-toggle {
        width: auto;
        min-width: 112px;
        padding: 0 13px;
    }

    .simme-na__controls {
        padding: 20px 18px 16px;
    }

    .simme-na__filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 5px;
        scrollbar-width: none;
    }

    .simme-na__filters::-webkit-scrollbar {
        display: none;
    }

    .simme-na__filter {
        flex: 0 0 auto;
    }

    .simme-na__workspace,
    .simme-na.is-detail-open .simme-na__workspace {
        display: block;
        padding: 22px 16px 28px;
    }

    .simme-na__directory-heading {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .simme-na__directory-heading p {
        display: block !important;
    }

    .simme-na__grid,
    .simme-na.is-detail-open .simme-na__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .simme-na__node,
    .simme-na.is-detail-open .simme-na__node {
        min-height: 188px;
        padding: 12px;
    }

    .simme-na__node-media,
    .simme-na.is-detail-open .simme-na__node-media {
        width: 62px;
        height: 62px;
        flex-basis: 62px;
        margin-bottom: 10px;
    }

    .simme-na.is-detail-open .simme-na__node-number {
        display: block;
    }

    .simme-na.is-detail-open .simme-na__node-title {
        font-size: 13px;
    }

    .simme-na.is-detail-open .simme-na__node-summary,
    .simme-na.is-detail-open .simme-na__node-action {
        display: none;
    }

    .simme-na__detail {
        position: fixed;
        z-index: 100001;
        inset: 10px;
        max-height: calc(100dvh - 20px);
        overflow-y: auto;
        border-radius: 20px;
        transform: translateY(calc(100% + 30px));
        opacity: 0;
        pointer-events: none;
        transition: transform .25s ease, opacity .25s ease;
        -webkit-overflow-scrolling: touch;
    }

    .simme-na.is-mobile-detail-open .simme-na__detail {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .simme-na__detail-empty {
        display: none;
    }

    .simme-na__detail-hero {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 14px;
        padding: 20px 18px;
    }

    .simme-na__detail-icon {
        width: 76px;
        height: 76px;
        border-radius: 16px;
    }

    .simme-na__detail-hero h2 {
        font-size: clamp(28px, 8vw, 38px);
    }

    .simme-na__detail-summary {
        font-size: 13px;
    }

    .simme-na__back-to-atlas {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 42px;
    }

    .simme-na__detail-layout {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 18px;
    }

    .simme-na__passport {
        position: static;
        grid-row: 1;
        grid-template-columns: 1fr 1fr;
    }

    .simme-na__canonical-link {
        grid-column: 1 / -1;
    }

    .simme-na__reading {
        grid-row: 2;
    }

    .simme-na__intro-block {
        padding: 20px 18px 20px 23px;
    }

    .simme-na__intro-block p,
    .simme-na__section-copy {
        font-size: 15px;
        line-height: 1.72;
    }

    .simme-na__reading-section {
        padding: 25px 0 26px 22px;
    }

    .simme-na__reading-section > h3 {
        font-size: 24px;
    }

    .simme-na__toc {
        display: none;
    }

    .simme-na__node-nav {
        grid-template-columns: 1fr 1fr;
    }

    .simme-na__atlas-button {
        grid-column: 1 / -1;
        grid-row: 1;
        min-height: 44px;
    }

    .simme-na__mobile-backdrop {
        position: fixed;
        z-index: 100000;
        inset: 0;
        background: rgba(4, 7, 14, .62);
        backdrop-filter: blur(6px);
    }

    .simme-na__mobile-backdrop:not([hidden]) {
        display: block;
    }

    .simme-na__index-block {
        grid-template-columns: 1fr;
        padding: 28px 20px;
    }

    .simme-na__index-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .simme-na__hero-side {
        grid-template-columns: 1fr;
    }

    .simme-na__theme-toggle {
        width: 100%;
    }

    .simme-na__grid,
    .simme-na.is-detail-open .simme-na__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .simme-na__node,
    .simme-na.is-detail-open .simme-na__node {
        min-height: 170px;
    }

    .simme-na__node-summary {
        -webkit-line-clamp: 3;
    }

    .simme-na__passport {
        grid-template-columns: 1fr;
    }

    .simme-na__canonical-link {
        grid-column: auto;
    }

    .simme-na__node-nav {
        grid-template-columns: 1fr;
    }

    .simme-na__atlas-button {
        grid-column: auto;
        grid-row: auto;
        min-height: 42px;
    }

    .simme-na__index-list {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .simme-na *,
    .simme-na *::before,
    .simme-na *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition-duration: .01ms !important;
    }
}


/* V2.1 theme toggle refinement */
@media (max-width: 640px) {
    .simme-na__theme-toggle { min-height: 52px; }
    .simme-na__theme-option { gap: 8px; font-size: 12px; }
    .simme-na__theme-label { display: inline-block; }
}

/* ========================================================================
   SYMSOUL NODE ATLAS V3 — REFINEMENT LAYER
   - Simme homepage neon-blue visual language
   - Themify button-colour isolation (prevents global green hover styles)
   - container-aware responsive detail layouts
   - dedicated Node URLs rendered as Atlas reading pages
   ======================================================================== */

/* Use the actual width of the Themify module, not just the browser viewport. */
.simme-na {
    container-type: inline-size;
    container-name: simme-node-atlas;
}

/* ------------------------------------------------------------------------
   SIMME NEON-BLUE PALETTE
   ------------------------------------------------------------------------ */

.simme-na[data-theme="light"] {
    --sna-bg: #f5f8fc;
    --sna-bg-deep: #edf3fa;
    --sna-surface: #ffffff;
    --sna-surface-soft: #f7faff;
    --sna-surface-strong: #eaf2fb;
    --sna-text: #121a2a;
    --sna-text-soft: #52617a;
    --sna-muted: #7d8da8;
    --sna-border: rgba(32, 70, 111, .13);
    --sna-border-strong: rgba(36, 191, 255, .34);
    --sna-accent: #247cff;
    --sna-accent-2: #24bfff;
    --sna-accent-soft: rgba(36, 191, 255, .105);
    --sna-accent-softer: rgba(36, 124, 255, .055);
    --sna-icon-bg: #343a44;
    --sna-shadow: 0 24px 70px rgba(30, 57, 91, .085);
    --sna-shadow-small: 0 12px 30px rgba(30, 57, 91, .07);
}

.simme-na[data-theme="dark"] {
    --sna-bg: #050a12;
    --sna-bg-deep: #08101c;
    --sna-surface: #0a1321;
    --sna-surface-soft: #0d1828;
    --sna-surface-strong: #12243a;
    --sna-text: #eef7ff;
    --sna-text-soft: #b5c7dc;
    --sna-muted: #829bb8;
    --sna-border: rgba(143, 217, 255, .14);
    --sna-border-strong: rgba(88, 202, 255, .44);
    --sna-accent: #8fd9ff;
    --sna-accent-2: #24bfff;
    --sna-accent-soft: rgba(36, 191, 255, .12);
    --sna-accent-softer: rgba(88, 202, 255, .065);
    --sna-icon-bg: #303842;
    --sna-shadow: 0 24px 80px rgba(0, 0, 0, .3);
    --sna-shadow-small: 0 12px 34px rgba(0, 0, 0, .25);
}

.simme-na[data-theme="dark"] .simme-na__shell {
    background:
        radial-gradient(circle at 10% -3%, rgba(36, 191, 255, .105), transparent 30%),
        radial-gradient(circle at 91% 2%, rgba(88, 202, 255, .07), transparent 25%),
        linear-gradient(180deg, #07101d 0%, var(--sna-bg) 38%, #060c15 100%) !important;
}

.simme-na__hero::before,
.simme-na__detail-hero::before {
    background: linear-gradient(90deg, transparent 0%, #8fd9ff 18%, #24bfff 55%, rgba(36,191,255,0) 100%) !important;
    box-shadow:
        0 0 3px rgba(255,255,255,.45),
        0 0 10px rgba(88,202,255,.65),
        0 0 22px rgba(36,191,255,.34);
}

.simme-na[data-theme="dark"] .simme-na__eyebrow,
.simme-na[data-theme="dark"] .simme-na__detail-number,
.simme-na[data-theme="dark"] .simme-na__detail-tagline {
    color: #8fd9ff;
    text-shadow:
        0 0 3px rgba(255,255,255,.28),
        0 0 10px rgba(88,202,255,.42),
        0 0 20px rgba(36,191,255,.22);
}

/* ------------------------------------------------------------------------
   BUTTON / LINK RESET — BLOCK THEMIFY GREEN HOVER LEAKAGE
   ------------------------------------------------------------------------ */

.simme-na button,
.simme-na button:hover,
.simme-na button:focus,
.simme-na button:active,
.simme-na button:visited,
.simme-na .simme-na__back-to-atlas,
.simme-na .simme-na__back-to-atlas:hover,
.simme-na .simme-na__atlas-button,
.simme-na .simme-na__atlas-button:hover,
.simme-na .simme-na__filter,
.simme-na .simme-na__filter:hover,
.simme-na .simme-na__theme-toggle,
.simme-na .simme-na__theme-toggle:hover {
    background-image: none !important;
    text-shadow: none !important;
}

.simme-na__filter,
.simme-na__back-to-atlas,
.simme-na__atlas-button,
.simme-na__theme-toggle {
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* ------------------------------------------------------------------------
   THEME SWITCH — COMPACT MOON / SUN CONTROL
   ------------------------------------------------------------------------ */

.simme-na .simme-na__theme-toggle,
.simme-na .simme-na__theme-toggle:hover,
.simme-na .simme-na__theme-toggle:focus,
.simme-na .simme-na__theme-toggle:active {
    width: 100%;
    min-height: 50px;
    padding: 4px !important;
    border: 1px solid var(--sna-border-strong) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--sna-surface) 92%, transparent) !important;
    color: var(--sna-text) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 8px 22px rgba(0,0,0,.10) !important;
}

.simme-na .simme-na__theme-toggle:hover {
    transform: translateY(-1px);
    border-color: var(--sna-accent-2) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 3px rgba(255,255,255,.16),
        0 0 10px rgba(88,202,255,.38),
        0 0 22px rgba(36,191,255,.18) !important;
}

.simme-na__theme-track {
    min-height: 42px;
}

.simme-na__theme-option {
    min-height: 42px;
    gap: 8px;
    font-size: 12px;
    letter-spacing: .015em;
}

.simme-na__theme-thumb {
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    border: 1px solid rgba(143,217,255,.28) !important;
    background: linear-gradient(145deg, rgba(35,61,88,.96), rgba(15,29,47,.98)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 12px rgba(36,191,255,.16) !important;
}

.simme-na[data-theme="light"] .simme-na__theme-thumb {
    background: linear-gradient(145deg, #ffffff, #eaf5ff) !important;
    border-color: rgba(36,124,255,.24) !important;
    box-shadow: 0 6px 16px rgba(43,91,145,.10) !important;
}

.simme-na[data-theme="dark"] .simme-na__theme-option--dark,
.simme-na[data-theme="light"] .simme-na__theme-option--light {
    color: var(--sna-text) !important;
}

.simme-na[data-theme="dark"] .simme-na__theme-option--dark .simme-na__theme-icon,
.simme-na[data-theme="light"] .simme-na__theme-option--light .simme-na__theme-icon {
    color: var(--sna-accent);
    filter: drop-shadow(0 0 5px rgba(88,202,255,.45));
}

/* ------------------------------------------------------------------------
   SEARCH / FILTER CONTROLS
   ------------------------------------------------------------------------ */

.simme-na__search {
    border-color: var(--sna-border) !important;
    background: color-mix(in srgb, var(--sna-surface) 96%, transparent) !important;
}

.simme-na__search:focus {
    border-color: var(--sna-accent-2) !important;
    box-shadow: 0 0 0 3px rgba(36,191,255,.10), 0 0 14px rgba(36,191,255,.12) !important;
}

.simme-na .simme-na__filter,
.simme-na .simme-na__filter:hover,
.simme-na .simme-na__filter:focus,
.simme-na .simme-na__filter:active {
    min-height: 36px;
    padding: 7px 13px !important;
    border: 1px solid var(--sna-border) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--sna-surface) 94%, transparent) !important;
    color: var(--sna-text-soft) !important;
    box-shadow: none !important;
}

.simme-na .simme-na__filter:hover {
    border-color: var(--sna-accent-2) !important;
    color: var(--sna-text) !important;
    background: var(--sna-accent-soft) !important;
}

.simme-na .simme-na__filter.is-active,
.simme-na .simme-na__filter.is-active:hover {
    border-color: rgba(88,202,255,.68) !important;
    background: rgba(36,191,255,.12) !important;
    color: var(--sna-text) !important;
    box-shadow:
        inset 0 0 0 1px rgba(143,217,255,.08),
        0 0 10px rgba(88,202,255,.22),
        0 0 20px rgba(36,191,255,.10) !important;
}

/* ------------------------------------------------------------------------
   NODE CARDS — MORE DEPTH WITHOUT TURNING THEM INTO BUTTON BRICKS
   ------------------------------------------------------------------------ */

.simme-na__node {
    border-color: var(--sna-border) !important;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--sna-surface) 98%, transparent), color-mix(in srgb, var(--sna-surface-soft) 94%, var(--sna-accent) 6%)) !important;
    box-shadow: 0 9px 24px rgba(0,0,0,.055) !important;
}

.simme-na[data-theme="dark"] .simme-na__node {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 10px 26px rgba(0,0,0,.14) !important;
}

.simme-na__node:hover,
.simme-na__node:focus-visible,
.simme-na__node.is-active {
    border-color: rgba(88,202,255,.62) !important;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--sna-surface) 93%, var(--sna-accent) 7%), color-mix(in srgb, var(--sna-surface-soft) 90%, var(--sna-accent-2) 10%)) !important;
    box-shadow:
        0 0 3px rgba(255,255,255,.14),
        0 0 10px rgba(88,202,255,.24),
        0 0 22px rgba(36,191,255,.12),
        0 12px 28px rgba(0,0,0,.10) !important;
}

.simme-na__node-action {
    color: var(--sna-accent) !important;
}

/* ------------------------------------------------------------------------
   FULL NODE DETAIL — LAYOUT & READABILITY
   ------------------------------------------------------------------------ */

.simme-na__detail,
.simme-na.is-detail-open .simme-na__detail {
    min-width: 0 !important;
}

.simme-na__detail-content,
.simme-na__detail-hero,
.simme-na__detail-hero-copy,
.simme-na__detail-layout,
.simme-na__reading,
.simme-na__passport,
.simme-na__reading-section,
.simme-na__section-copy {
    min-width: 0 !important;
}

.simme-na__detail-hero-copy h1,
.simme-na__detail-hero-copy h2,
.simme-na__detail-summary,
.simme-na__detail-tagline,
.simme-na__intro-block,
.simme-na__section-copy,
.simme-na__passport-card dd,
.simme-na__neighbour-copy b {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

.simme-na__detail-hero-copy h1,
.simme-na__detail-hero-copy h2 {
    overflow-wrap: normal;
    hyphens: manual;
}

.simme-na__detail-hero {
    grid-template-columns: 100px minmax(320px, 1fr) max-content;
    gap: clamp(18px, 2.4vw, 28px);
    align-items: start;
}

.simme-na__detail-icon {
    width: 100px;
    height: 100px;
    border-radius: 20px;
    border-color: rgba(143,217,255,.18) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 14px 30px rgba(0,0,0,.18),
        0 0 18px rgba(36,191,255,.08) !important;
}

.simme-na__detail-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.simme-na__detail-hero h1,
.simme-na__detail-hero h2 {
    color: var(--sna-text) !important;
    font-size: clamp(34px, 3.7vw, 54px);
    line-height: 1.02;
    letter-spacing: -.038em;
    margin: 0 0 9px;
    max-width: 100%;
}

.simme-na .simme-na__back-to-atlas,
.simme-na .simme-na__back-to-atlas:hover,
.simme-na .simme-na__back-to-atlas:focus,
.simme-na .simme-na__back-to-atlas:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    min-height: 38px;
    padding: 8px 12px !important;
    border: 1px solid var(--sna-border-strong) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--sna-surface-soft) 92%, transparent) !important;
    color: var(--sna-text-soft) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.2;
}

.simme-na .simme-na__back-to-atlas:hover {
    border-color: var(--sna-accent-2) !important;
    color: var(--sna-text) !important;
    background: var(--sna-accent-soft) !important;
    box-shadow: 0 0 10px rgba(88,202,255,.18) !important;
}

.simme-na__detail-layout {
    grid-template-columns: minmax(0, 1fr) minmax(225px, 260px);
    gap: clamp(24px, 3vw, 40px);
}

.simme-na__passport {
    width: 100%;
}

.simme-na__passport-card,
.simme-na__toc {
    overflow: hidden;
    border-color: var(--sna-border) !important;
    background: color-mix(in srgb, var(--sna-surface-soft) 96%, transparent) !important;
}

.simme-na__passport-card dd {
    font-size: 12px;
    line-height: 1.55;
}

.simme-na__runtime > div {
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-width: 0;
}

.simme-na__runtime b,
.simme-na__runtime strong,
.simme-na__runtime small {
    white-space: nowrap;
}

.simme-na__reading-section::before {
    background: var(--sna-accent-2) !important;
    box-shadow: 0 0 0 6px rgba(36,191,255,.09), 0 0 12px rgba(36,191,255,.22) !important;
}

.simme-na__reading-section > h2,
.simme-na__reading-section > h3 {
    color: var(--sna-text) !important;
    font-size: clamp(23px, 2.2vw, 31px);
    line-height: 1.15;
    letter-spacing: -.025em;
    margin: 0 0 17px;
}

/* ------------------------------------------------------------------------
   FULL-PAGE ACTIONS / NAVIGATION
   ------------------------------------------------------------------------ */

.simme-na__canonical-link,
.simme-na__canonical-link:hover,
.simme-na__canonical-link:focus,
.simme-na__canonical-link:active {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 13px !important;
    border: 1px solid rgba(88,202,255,.58) !important;
    border-radius: 13px !important;
    background: rgba(36,191,255,.075) !important;
    color: var(--sna-text) !important;
    box-shadow: inset 0 0 0 1px rgba(143,217,255,.035) !important;
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
}

.simme-na__canonical-link:hover {
    border-color: #8fd9ff !important;
    background: rgba(36,191,255,.13) !important;
    box-shadow:
        0 0 3px rgba(255,255,255,.12),
        0 0 10px rgba(88,202,255,.28),
        0 0 20px rgba(36,191,255,.13) !important;
}

.simme-na__node-nav {
    grid-template-columns: minmax(0, 1fr) minmax(138px, auto) minmax(0, 1fr);
    gap: 10px;
}

.simme-na__neighbour {
    min-width: 0;
    min-height: 62px;
    padding: 8px 10px;
    border-color: var(--sna-border) !important;
    background: color-mix(in srgb, var(--sna-surface-soft) 96%, transparent) !important;
}

.simme-na__neighbour:hover {
    border-color: rgba(88,202,255,.48) !important;
    background: rgba(36,191,255,.075) !important;
    box-shadow: 0 0 12px rgba(36,191,255,.09) !important;
}

.simme-na .simme-na__atlas-button,
.simme-na .simme-na__atlas-button:hover,
.simme-na .simme-na__atlas-button:focus,
.simme-na .simme-na__atlas-button:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 138px;
    min-height: 62px;
    padding: 9px 13px !important;
    border: 1px solid var(--sna-border-strong) !important;
    border-radius: 14px !important;
    background: color-mix(in srgb, var(--sna-surface) 96%, transparent) !important;
    color: var(--sna-text) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    text-align: center;
    font-size: 11px;
    line-height: 1.3;
    white-space: normal;
}

.simme-na .simme-na__atlas-button:hover {
    border-color: var(--sna-accent-2) !important;
    background: rgba(36,191,255,.085) !important;
    box-shadow: 0 0 13px rgba(36,191,255,.12) !important;
}

/* ------------------------------------------------------------------------
   VISITOR-FACING CLOSING SECTION
   ------------------------------------------------------------------------ */

.simme-na__index-block {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--sna-surface-soft) 98%, transparent), color-mix(in srgb, var(--sna-surface-soft) 92%, var(--sna-accent-2) 8%)) !important;
}

.simme-na__index-block h2 {
    max-width: 520px;
}

.simme-na__index-list a:hover {
    color: var(--sna-accent) !important;
    text-shadow: 0 0 9px rgba(88,202,255,.22);
}

/* ------------------------------------------------------------------------
   DEDICATED NODE URL — SAME ATLAS DESIGN, SERVER-RENDERED CONTENT
   ------------------------------------------------------------------------ */

body.simme-node-atlas-detail-page .page-title,
body.simme-node-atlas-detail-page .post-title,
body.simme-node-atlas-detail-page .entry-title,
body.simme-node-atlas-detail-page h1.page-title,
body.simme-node-atlas-detail-page h1.post-title,
body.simme-node-atlas-detail-page h1.entry-title {
    display: none !important;
}

.simme-na--node-page {
    width: 100% !important;
}

.simme-na--node-page .simme-na__shell {
    overflow: visible;
}

.simme-na__nodepage-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(190px, 250px);
    gap: 16px;
    align-items: center;
    padding: 14px clamp(20px, 3vw, 38px);
    border-bottom: 1px solid var(--sna-border);
    background: color-mix(in srgb, var(--sna-surface-soft) 94%, transparent);
}

.simme-na__nodepage-atlas-link {
    justify-self: start;
    color: var(--sna-text) !important;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 720;
}

.simme-na__nodepage-atlas-link:hover {
    color: var(--sna-accent) !important;
}

.simme-na__nodepage-context {
    color: var(--sna-muted);
    font-size: 11px;
    letter-spacing: .035em;
    text-align: center;
}

.simme-na--node-page .simme-na__theme-toggle {
    justify-self: end;
    width: 100%;
}

.simme-na--node-page .simme-na__detail--standalone,
.simme-na--node-page.is-detail-open .simme-na__detail--standalone {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.simme-na--node-page .simme-na__detail-layout {
    max-width: 1320px;
    margin: 0 auto;
}

.simme-na--node-page .simme-na__detail-hero {
    padding-left: clamp(28px, 4vw, 60px);
    padding-right: clamp(28px, 4vw, 60px);
}

.simme-na--node-page .simme-na__detail-hero h1 {
    font-size: clamp(38px, 4.8vw, 64px);
}

/* ------------------------------------------------------------------------
   CONTAINER-BASED RESPONSIVE SAFETY
   These respond to the Atlas/module width, fixing Themify narrow-column
   overlap even when the browser itself is still a desktop width.
   ------------------------------------------------------------------------ */

@container simme-node-atlas (max-width: 1180px) {
    .simme-na.is-detail-open:not(.simme-na--node-page) .simme-na__workspace {
        grid-template-columns: 1fr !important;
    }

    .simme-na.is-detail-open:not(.simme-na--node-page) .simme-na__directory {
        display: none !important;
    }

    .simme-na__detail-hero {
        grid-template-columns: 92px minmax(0, 1fr) !important;
        gap: 18px;
    }

    .simme-na__detail-icon {
        width: 92px;
        height: 92px;
    }

    .simme-na__back-to-atlas {
        grid-column: 2;
        justify-self: start;
        margin-top: 4px;
    }

    .simme-na__detail-layout {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 250px) !important;
    }
}

@container simme-node-atlas (max-width: 900px) {
    .simme-na__detail-hero {
        grid-template-columns: 78px minmax(0, 1fr) !important;
        padding: 24px 22px;
    }

    .simme-na__detail-icon {
        width: 78px;
        height: 78px;
        border-radius: 16px;
    }

    .simme-na__detail-hero h1,
    .simme-na__detail-hero h2 {
        font-size: clamp(30px, 7cqw, 43px) !important;
    }

    .simme-na__back-to-atlas {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .simme-na__detail-layout {
        grid-template-columns: 1fr !important;
        gap: 20px;
        padding: 22px;
    }

    .simme-na__passport {
        position: static !important;
        top: auto !important;
        grid-row: auto !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .simme-na__canonical-link {
        grid-column: 1 / -1;
    }

    .simme-na__toc {
        display: block;
    }

    .simme-na__node-nav {
        grid-template-columns: 1fr 1fr;
    }

    .simme-na__atlas-button {
        grid-column: 1 / -1;
        grid-row: 1;
        min-height: 46px !important;
    }

    .simme-na__nodepage-bar {
        grid-template-columns: minmax(0, 1fr) minmax(170px, 220px);
    }

    .simme-na__nodepage-context {
        display: none;
    }
}

@container simme-node-atlas (max-width: 620px) {
    .simme-na__detail-hero {
        grid-template-columns: 68px minmax(0, 1fr) !important;
        gap: 14px;
        padding: 20px 17px;
    }

    .simme-na__detail-icon {
        width: 68px;
        height: 68px;
        border-radius: 15px;
    }

    .simme-na__detail-hero h1,
    .simme-na__detail-hero h2 {
        font-size: clamp(28px, 9cqw, 38px) !important;
        line-height: 1.04;
    }

    .simme-na__detail-summary {
        font-size: 13px;
        line-height: 1.6;
    }

    .simme-na__detail-layout {
        padding: 17px;
    }

    .simme-na__passport {
        grid-template-columns: 1fr;
    }

    .simme-na__canonical-link {
        grid-column: auto;
    }

    .simme-na__intro-block {
        padding: 18px 16px 18px 21px;
    }

    .simme-na__reading-section {
        padding-left: 20px;
    }

    .simme-na__node-nav {
        grid-template-columns: 1fr;
    }

    .simme-na__atlas-button {
        grid-column: auto;
        grid-row: auto;
        min-height: 44px !important;
    }

    .simme-na__neighbour {
        min-height: 58px;
    }

    .simme-na__nodepage-bar {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .simme-na--node-page .simme-na__theme-toggle {
        justify-self: stretch;
        max-width: 280px;
    }
}

/* ------------------------------------------------------------------------
   VIEWPORT MOBILE SAFETY — ATLAS SHEET ONLY, NOT DEDICATED NODE URLS
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
    .simme-na:not(.simme-na--node-page) .simme-na__detail {
        width: auto !important;
    }

    .simme-na--node-page .simme-na__detail,
    .simme-na--node-page .simme-na__detail--standalone {
        position: relative !important;
        inset: auto !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    .simme-na--node-page .simme-na__passport {
        grid-row: auto !important;
    }

    .simme-na--node-page .simme-na__reading {
        grid-row: auto !important;
    }
}


/* ========================================================================
   SYMSOUL NODE ATLAS V3.1 — LAYOUT / PARSER-SAFETY VISUAL REPAIR
   Only affects .simme-na (Node Atlas).
   - removes theme/global button colour leakage
   - prevents hero/title clipping
   - forces safe one-column detail layout before sidebars can overlap
   - prevents source-page links/navigation fragments looking like article copy
   - improves medium/mobile Node Passport and navigation controls
   ======================================================================== */

/* Never allow the Atlas itself to create horizontal page overflow. */
.simme-na,
.simme-na__shell,
.simme-na__workspace,
.simme-na__detail,
.simme-na__detail-content,
.simme-na__detail-hero,
.simme-na__detail-layout,
.simme-na__reading,
.simme-na__passport {
    max-width: 100% !important;
}

.simme-na {
    overflow-x: clip;
}

@supports not (overflow: clip) {
    .simme-na { overflow-x: hidden; }
}

/* Hard isolation from Themify / site-wide button skins. */
body .simme-na .simme-na__theme-toggle,
body .simme-na .simme-na__theme-toggle:hover,
body .simme-na .simme-na__theme-toggle:focus,
body .simme-na .simme-na__theme-toggle:active {
    background-color: var(--sna-surface) !important;
    background-image: none !important;
    color: var(--sna-text) !important;
    -webkit-text-fill-color: var(--sna-text) !important;
}

body .simme-na[data-theme="dark"] .simme-na__theme-toggle,
body .simme-na[data-theme="dark"] .simme-na__theme-toggle:hover,
body .simme-na[data-theme="dark"] .simme-na__theme-toggle:focus,
body .simme-na[data-theme="dark"] .simme-na__theme-toggle:active {
    background: #091423 !important;
    background-color: #091423 !important;
}

body .simme-na[data-theme="light"] .simme-na__theme-toggle,
body .simme-na[data-theme="light"] .simme-na__theme-toggle:hover,
body .simme-na[data-theme="light"] .simme-na__theme-toggle:focus,
body .simme-na[data-theme="light"] .simme-na__theme-toggle:active {
    background: #f7fbff !important;
    background-color: #f7fbff !important;
}

body .simme-na .simme-na__theme-toggle::before,
body .simme-na .simme-na__theme-toggle::after {
    display: none !important;
    content: none !important;
}

body .simme-na .simme-na__theme-track {
    background: transparent !important;
    background-color: transparent !important;
}

body .simme-na .simme-na__theme-option {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--sna-text-soft) !important;
    -webkit-text-fill-color: currentColor !important;
}

body .simme-na[data-theme="dark"] .simme-na__theme-option--dark,
body .simme-na[data-theme="light"] .simme-na__theme-option--light {
    color: var(--sna-text) !important;
}

/* The hero always gives the title a real flexible column. The Atlas-return
   control floats independently instead of stealing the title's grid width. */
.simme-na__detail-hero {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 100px minmax(0, 1fr) !important;
    column-gap: clamp(18px, 2.4vw, 28px) !important;
    row-gap: 10px !important;
    padding-right: clamp(150px, 15vw, 180px) !important;
    overflow: hidden !important;
}

.simme-na__detail-hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.simme-na__detail-hero h1,
.simme-na__detail-hero h2 {
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    text-overflow: clip !important;
}

.simme-na__back-to-atlas {
    position: absolute !important;
    top: clamp(22px, 3vw, 34px) !important;
    right: clamp(20px, 3vw, 34px) !important;
    grid-column: auto !important;
    margin: 0 !important;
    z-index: 3;
}

/* Sidebar content must never force the reading column to collapse. */
.simme-na__detail-layout {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 290px) !important;
}

.simme-na__passport,
.simme-na__passport-card,
.simme-na__toc,
.simme-na__canonical-link {
    min-width: 0 !important;
    max-width: 100% !important;
}

.simme-na__passport-card dd,
.simme-na__toc a,
.simme-na__canonical-link {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    hyphens: none !important;
}

/* Source article links should never inherit the site's red/green link skin.
   V3.1 PHP strips source anchors; these rules also protect any cached/legacy
   fragment while caches refresh. */
.simme-na__intro-block a,
.simme-na__section-copy a,
.simme-na__intro-block a:hover,
.simme-na__section-copy a:hover {
    color: var(--sna-accent) !important;
    -webkit-text-fill-color: var(--sna-accent) !important;
    background: transparent !important;
    text-decoration-color: color-mix(in srgb, var(--sna-accent) 55%, transparent) !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

/* Action controls: explicit text/fill so no Themify black/green state leaks. */
body .simme-na .simme-na__canonical-link,
body .simme-na .simme-na__canonical-link:hover,
body .simme-na .simme-na__canonical-link:focus,
body .simme-na .simme-na__canonical-link:active,
body .simme-na .simme-na__atlas-button,
body .simme-na .simme-na__atlas-button:hover,
body .simme-na .simme-na__atlas-button:focus,
body .simme-na .simme-na__atlas-button:active,
body .simme-na .simme-na__back-to-atlas,
body .simme-na .simme-na__back-to-atlas:hover,
body .simme-na .simme-na__back-to-atlas:focus,
body .simme-na .simme-na__back-to-atlas:active {
    color: var(--sna-text) !important;
    -webkit-text-fill-color: var(--sna-text) !important;
    text-shadow: none !important;
}

body .simme-na .simme-na__canonical-link {
    background: linear-gradient(135deg, rgba(36,191,255,.10), rgba(36,124,255,.055)) !important;
    background-color: rgba(36,191,255,.08) !important;
}

body .simme-na .simme-na__canonical-link:hover,
body .simme-na .simme-na__canonical-link:focus-visible {
    background: linear-gradient(135deg, rgba(36,191,255,.18), rgba(36,124,255,.09)) !important;
    background-color: rgba(36,191,255,.14) !important;
}

/* Medium widths: abandon the sidebar before it can crush the article.
   This viewport fallback mirrors the container query for browsers/contexts
   where Themify prevents container queries from being useful. */
@media (max-width: 1180px) {
    .simme-na.is-detail-open:not(.simme-na--node-page) .simme-na__workspace {
        grid-template-columns: 1fr !important;
    }

    .simme-na.is-detail-open:not(.simme-na--node-page) .simme-na__directory {
        display: none !important;
    }

    .simme-na__detail-hero {
        grid-template-columns: 92px minmax(0, 1fr) !important;
        padding-right: 24px !important;
    }

    .simme-na__detail-icon {
        width: 92px !important;
        height: 92px !important;
    }

    .simme-na__back-to-atlas {
        position: static !important;
        grid-column: 2 !important;
        justify-self: start !important;
        width: auto !important;
        max-width: 180px !important;
    }

    .simme-na__detail-layout {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .simme-na__passport {
        position: static !important;
        top: auto !important;
        grid-row: 1 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .simme-na__reading {
        grid-row: 2 !important;
        width: 100% !important;
    }

    .simme-na__canonical-link {
        grid-column: 1 / -1 !important;
        width: auto !important;
        justify-self: stretch !important;
    }

    .simme-na--node-page .simme-na__detail-layout {
        max-width: 100% !important;
    }
}

@media (max-width: 900px) {
    .simme-na__detail-hero {
        grid-template-columns: 78px minmax(0, 1fr) !important;
        gap: 16px !important;
        padding: 24px 20px !important;
    }

    .simme-na__detail-icon {
        width: 78px !important;
        height: 78px !important;
    }

    .simme-na__detail-hero h1,
    .simme-na__detail-hero h2 {
        font-size: clamp(31px, 7.5vw, 44px) !important;
    }

    .simme-na__back-to-atlas {
        grid-column: 1 / -1 !important;
        margin-top: 2px !important;
    }

    .simme-na__detail-layout {
        padding: 22px 20px !important;
    }

    .simme-na__passport {
        grid-template-columns: 1fr 1fr !important;
    }

    .simme-na__node-nav {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .simme-na__atlas-button {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        min-height: 48px !important;
    }
}

@media (max-width: 640px) {
    .simme-na__detail-hero {
        grid-template-columns: 68px minmax(0, 1fr) !important;
        gap: 14px !important;
        padding: 20px 16px !important;
    }

    .simme-na__detail-icon {
        width: 68px !important;
        height: 68px !important;
        border-radius: 15px !important;
    }

    .simme-na__detail-hero h1,
    .simme-na__detail-hero h2 {
        font-size: clamp(28px, 9.5vw, 38px) !important;
        line-height: 1.04 !important;
    }

    .simme-na__detail-layout {
        padding: 17px 15px !important;
    }

    .simme-na__passport {
        grid-template-columns: 1fr !important;
        gap: 11px !important;
    }

    .simme-na__canonical-link {
        grid-column: auto !important;
    }

    .simme-na__node-nav {
        grid-template-columns: 1fr !important;
    }

    .simme-na__atlas-button {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}


/* ========================================================================
   SYMSOUL NODE ATLAS V3.2 — VISUAL SYSTEM / INTERACTION REFINEMENT
   Scope: .simme-na only. No non-Atlas site CSS is changed.
   ======================================================================== */

.simme-na {
    --sna-neon: #24bfff;
    --sna-neon-soft: #8fd9ff;
    --sna-neon-deep: #137fc2;
    --sna-corner-glow: rgba(36, 191, 255, .105);
    --sna-corner-glow-soft: rgba(143, 217, 255, .05);
}

.simme-na[data-theme="light"] {
    --sna-corner-glow: rgba(36, 124, 255, .08);
    --sna-corner-glow-soft: rgba(36, 191, 255, .045);
}

/* Remove the old illuminated strips along panel tops. Depth now comes from
   light contained inside each surface instead of a line sitting on its edge. */
.simme-na__hero::before,
.simme-na__detail-hero::before,
.simme-na__node::before {
    display: none !important;
    content: none !important;
}

/* Shared Simme surface language: a restrained cyan bloom starts inside the
   upper corner and decays into the panel. */
.simme-na[data-theme="dark"] .simme-na__hero,
.simme-na[data-theme="dark"] .simme-na__count,
.simme-na[data-theme="dark"] .simme-na__detail-hero,
.simme-na[data-theme="dark"] .simme-na__passport-card,
.simme-na[data-theme="dark"] .simme-na__toc,
.simme-na[data-theme="dark"] .simme-na__intro-block,
.simme-na[data-theme="dark"] .simme-na__reading-section,
.simme-na[data-theme="dark"] .simme-na__detail-empty,
.simme-na[data-theme="dark"] .simme-na__index-block,
.simme-na[data-theme="dark"] .simme-na__nodepage-bar {
    background:
        radial-gradient(ellipse at 4% 0%, rgba(36,191,255,.115) 0%, rgba(36,191,255,.045) 24%, transparent 53%),
        radial-gradient(ellipse at 98% 0%, rgba(143,217,255,.045) 0%, transparent 38%),
        linear-gradient(145deg, #0c1727 0%, #091321 52%, #07101c 100%) !important;
}

.simme-na[data-theme="light"] .simme-na__hero,
.simme-na[data-theme="light"] .simme-na__count,
.simme-na[data-theme="light"] .simme-na__detail-hero,
.simme-na[data-theme="light"] .simme-na__passport-card,
.simme-na[data-theme="light"] .simme-na__toc,
.simme-na[data-theme="light"] .simme-na__intro-block,
.simme-na[data-theme="light"] .simme-na__reading-section,
.simme-na[data-theme="light"] .simme-na__detail-empty,
.simme-na[data-theme="light"] .simme-na__index-block,
.simme-na[data-theme="light"] .simme-na__nodepage-bar {
    background:
        radial-gradient(ellipse at 4% 0%, rgba(36,124,255,.075) 0%, rgba(36,191,255,.028) 26%, transparent 54%),
        linear-gradient(145deg, #ffffff 0%, #f8fbff 60%, #f3f7fc 100%) !important;
}

.simme-na__passport-card,
.simme-na__toc,
.simme-na__intro-block,
.simme-na__reading-section,
.simme-na__detail-empty,
.simme-na__nodepage-bar {
    border-color: rgba(92, 185, 231, .22) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        inset 18px 16px 38px rgba(36,191,255,.018),
        0 12px 30px rgba(0,0,0,.08) !important;
}

/* ------------------------------------------------------------------------
   32-NODE LIVING ORBIT
   ------------------------------------------------------------------------ */

.simme-na__count {
    --sna-orbit-x: 0px;
    --sna-orbit-y: 0px;
    --sna-orbit-tilt-x: 0deg;
    --sna-orbit-tilt-y: 0deg;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 112px !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 154px;
    padding: 20px 18px 20px 22px !important;
    overflow: hidden;
    perspective: 700px;
    touch-action: pan-y;
}

.simme-na__count::after {
    display: none !important;
    content: none !important;
}

.simme-na__count-copy {
    position: relative;
    z-index: 3;
    display: grid;
    gap: 5px;
    min-width: 0;
}

.simme-na__count-copy strong,
.simme-na__count-copy span,
.simme-na__count-copy small {
    position: relative;
    z-index: 2;
}

.simme-na__orbit {
    position: relative;
    z-index: 2;
    width: 108px;
    height: 108px;
    justify-self: end;
    border-radius: 50%;
    transform:
        translate3d(var(--sna-orbit-x), var(--sna-orbit-y), 0)
        rotateX(var(--sna-orbit-tilt-x))
        rotateY(var(--sna-orbit-tilt-y));
    transform-style: preserve-3d;
    transition: transform .22s cubic-bezier(.2,.72,.2,1);
}

.simme-na__orbit::before,
.simme-na__orbit::after {
    position: absolute;
    content: "";
    border-radius: 50%;
    pointer-events: none;
}

.simme-na__orbit::before {
    inset: 25%;
    background: radial-gradient(circle, rgba(143,217,255,.26), rgba(36,191,255,.07) 48%, transparent 72%);
    box-shadow: 0 0 20px rgba(36,191,255,.19), 0 0 46px rgba(36,191,255,.08);
    animation: simme-na-orbit-core-breathe 3.8s ease-in-out infinite;
}

.simme-na__orbit::after {
    inset: 5%;
    border: 1px solid rgba(143,217,255,.08);
    box-shadow: inset 0 0 24px rgba(36,191,255,.035);
}

.simme-na__orbit-core {
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #dff6ff;
    box-shadow:
        0 0 5px rgba(255,255,255,.8),
        0 0 13px rgba(143,217,255,.9),
        0 0 28px rgba(36,191,255,.52);
    transform: translate(-50%, -50%);
}

.simme-na__orbit-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    border: 1px solid rgba(143,217,255,.24);
    border-radius: 50%;
    transform-style: preserve-3d;
}

.simme-na__orbit-ring i {
    position: absolute;
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #78d5ff;
    box-shadow: 0 0 8px rgba(143,217,255,.86), 0 0 18px rgba(36,191,255,.42);
}

.simme-na__orbit-ring i:nth-child(1) { left: -4px; top: 50%; }
.simme-na__orbit-ring i:nth-child(2) { right: -4px; top: 24%; }

.simme-na__orbit-ring--one {
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
    animation: simme-na-orbit-spin 7.2s linear infinite;
}

.simme-na__orbit-ring--two {
    width: 70px;
    height: 70px;
    margin: -35px 0 0 -35px;
    border-color: rgba(96,176,255,.20);
    transform: rotateX(64deg) rotateZ(22deg);
    animation: simme-na-orbit-spin-two 10.5s linear infinite reverse;
}

.simme-na__orbit-ring--three {
    width: 98px;
    height: 98px;
    margin: -49px 0 0 -49px;
    border-color: rgba(143,217,255,.12);
    transform: rotateY(58deg) rotateZ(-17deg);
    animation: simme-na-orbit-spin-three 14s linear infinite;
}

@keyframes simme-na-orbit-spin {
    to { transform: rotate(360deg); }
}

@keyframes simme-na-orbit-spin-two {
    from { transform: rotateX(64deg) rotateZ(22deg) rotate(0deg); }
    to { transform: rotateX(64deg) rotateZ(22deg) rotate(360deg); }
}

@keyframes simme-na-orbit-spin-three {
    from { transform: rotateY(58deg) rotateZ(-17deg) rotate(0deg); }
    to { transform: rotateY(58deg) rotateZ(-17deg) rotate(360deg); }
}

@keyframes simme-na-orbit-core-breathe {
    0%,100% { opacity: .58; transform: scale(.88); }
    50% { opacity: 1; transform: scale(1.14); }
}

/* ------------------------------------------------------------------------
   CELESTIAL LIGHT / DARK CONTROL
   ------------------------------------------------------------------------ */

body .simme-na .simme-na__theme-toggle,
body .simme-na .simme-na__theme-toggle:hover,
body .simme-na .simme-na__theme-toggle:focus,
body .simme-na .simme-na__theme-toggle:active {
    min-height: 58px !important;
    padding: 5px !important;
    overflow: hidden;
    border: 1px solid rgba(88,202,255,.32) !important;
    background:
        radial-gradient(circle at 16% 50%, rgba(36,191,255,.10), transparent 24%),
        linear-gradient(180deg, #081321, #07101b) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        inset 0 0 22px rgba(36,191,255,.025),
        0 9px 24px rgba(0,0,0,.16) !important;
}

body .simme-na[data-theme="light"] .simme-na__theme-toggle,
body .simme-na[data-theme="light"] .simme-na__theme-toggle:hover,
body .simme-na[data-theme="light"] .simme-na__theme-toggle:focus,
body .simme-na[data-theme="light"] .simme-na__theme-toggle:active {
    background:
        radial-gradient(circle at 84% 50%, rgba(36,191,255,.11), transparent 25%),
        linear-gradient(180deg, #ffffff, #eef7ff) !important;
}

.simme-na__theme-track {
    position: relative;
    min-height: 48px !important;
    isolation: isolate;
}

.simme-na__theme-track::before {
    position: absolute;
    z-index: 0;
    left: 22%;
    right: 22%;
    top: 50%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(143,217,255,.18), transparent);
    transform: translateY(-50%);
}

.simme-na__theme-track::after {
    position: absolute;
    z-index: 4;
    left: 25%;
    top: 50%;
    width: 7px;
    height: 7px;
    content: "";
    border-radius: 50%;
    background: #a7e5ff;
    box-shadow: 0 0 6px #dff6ff, 0 0 14px rgba(36,191,255,.65), 0 0 28px rgba(36,191,255,.28);
    transform: translate(-50%, -50%);
    transition: left .34s cubic-bezier(.2,.75,.2,1), box-shadow .25s ease;
    pointer-events: none;
}

.simme-na[data-theme="light"] .simme-na__theme-track::after {
    left: 75%;
}

.simme-na__theme-thumb {
    top: 2px !important;
    left: 2px !important;
    width: calc(50% - 2px) !important;
    height: calc(100% - 4px) !important;
    border: 1px solid rgba(143,217,255,.30) !important;
    background:
        radial-gradient(circle at 18% 18%, rgba(143,217,255,.17), transparent 34%),
        linear-gradient(145deg, #17283d, #0d1a2a) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 0 14px rgba(36,191,255,.16),
        0 8px 20px rgba(0,0,0,.18) !important;
}

.simme-na[data-theme="light"] .simme-na__theme-thumb {
    background:
        radial-gradient(circle at 80% 20%, rgba(36,191,255,.12), transparent 36%),
        linear-gradient(145deg, #ffffff, #e8f5ff) !important;
    box-shadow: 0 0 14px rgba(36,124,255,.10), 0 8px 18px rgba(39,78,122,.10) !important;
}

.simme-na__theme-option {
    z-index: 5 !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    letter-spacing: .025em !important;
}

.simme-na__theme-icon {
    width: 18px !important;
    height: 18px !important;
    flex-basis: 18px !important;
}

/* ------------------------------------------------------------------------
   BUTTONS / ACTIONS — CLEAR HIERARCHY, NO THEME COLOUR LEAKAGE
   ------------------------------------------------------------------------ */

body .simme-na .simme-na__canonical-link,
body .simme-na .simme-na__canonical-link:hover,
body .simme-na .simme-na__canonical-link:focus,
body .simme-na .simme-na__canonical-link:active {
    min-height: 50px !important;
    padding: 12px 18px !important;
    border: 1px solid rgba(143,217,255,.72) !important;
    border-radius: 16px !important;
    background:
        radial-gradient(circle at 15% 0%, rgba(255,255,255,.18), transparent 30%),
        linear-gradient(135deg, #168fcf 0%, #20b8f3 58%, #35c9ff 100%) !important;
    color: #04121d !important;
    -webkit-text-fill-color: #04121d !important;
    font-weight: 800 !important;
    letter-spacing: .005em;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.30),
        0 0 14px rgba(36,191,255,.18),
        0 10px 24px rgba(0,0,0,.12) !important;
}

body .simme-na .simme-na__canonical-link:hover,
body .simme-na .simme-na__canonical-link:focus-visible {
    border-color: #d9f5ff !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.28), transparent 34%),
        linear-gradient(135deg, #28a9e8 0%, #45cfff 62%, #8be2ff 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.38),
        0 0 8px rgba(143,217,255,.44),
        0 0 22px rgba(36,191,255,.26),
        0 12px 28px rgba(0,0,0,.14) !important;
    transform: translateY(-1px);
}

body .simme-na .simme-na__atlas-button,
body .simme-na .simme-na__back-to-atlas,
body .simme-na .simme-na__nodepage-atlas-link {
    border: 1px solid rgba(88,202,255,.34) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(36,191,255,.08), transparent 42%),
        rgba(9,20,35,.78) !important;
    color: #eaf7ff !important;
    -webkit-text-fill-color: #eaf7ff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

body .simme-na .simme-na__atlas-button:hover,
body .simme-na .simme-na__back-to-atlas:hover,
body .simme-na .simme-na__nodepage-atlas-link:hover {
    border-color: rgba(143,217,255,.72) !important;
    background:
        radial-gradient(circle at 16% 0%, rgba(36,191,255,.16), transparent 46%),
        rgba(10,29,48,.92) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 0 12px rgba(36,191,255,.18), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.simme-na[data-theme="light"] .simme-na__atlas-button,
.simme-na[data-theme="light"] .simme-na__back-to-atlas,
.simme-na[data-theme="light"] .simme-na__nodepage-atlas-link {
    background: linear-gradient(145deg, #ffffff, #edf7ff) !important;
    color: #18304c !important;
    -webkit-text-fill-color: #18304c !important;
}

.simme-na__nodepage-atlas-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 38px;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    white-space: nowrap;
}

/* Previous / next Nodes become deliberate journey cards rather than default links. */
.simme-na__neighbour {
    position: relative;
    overflow: hidden;
    border-radius: 16px !important;
    border-color: rgba(88,202,255,.20) !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(36,191,255,.07), transparent 44%),
        color-mix(in srgb, var(--sna-surface-soft) 96%, transparent) !important;
}

.simme-na__neighbour::after {
    position: absolute;
    inset: 0;
    content: "";
    background: radial-gradient(circle at 8% 0%, rgba(36,191,255,.13), transparent 45%);
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

.simme-na__neighbour:hover::after { opacity: 1; }
.simme-na__neighbour-copy,
.simme-na__neighbour-media { position: relative; z-index: 2; }

/* ------------------------------------------------------------------------
   ARTICLE LISTS — DESIGNED CONTENT, NOT BROWSER BULLETS
   ------------------------------------------------------------------------ */

.simme-na__intro-block ul,
.simme-na__intro-block ol,
.simme-na__section-copy ul,
.simme-na__section-copy ol {
    display: grid;
    gap: 7px;
    margin: 16px 0 20px !important;
    padding: 0 !important;
    list-style: none !important;
}

.simme-na__intro-block li,
.simme-na__section-copy li {
    position: relative;
    margin: 0 !important;
    padding: 8px 10px 8px 27px !important;
    border: 1px solid rgba(88,202,255,.10);
    border-radius: 10px;
    background: linear-gradient(100deg, rgba(36,191,255,.045), rgba(36,191,255,.01) 58%, transparent);
    color: var(--sna-text-soft);
    line-height: 1.55;
}

.simme-na__intro-block li::before,
.simme-na__section-copy li::before {
    position: absolute;
    left: 11px;
    top: 1.08em;
    width: 5px;
    height: 5px;
    content: "";
    border-radius: 50%;
    background: var(--sna-neon-soft);
    box-shadow: 0 0 8px rgba(36,191,255,.45);
}

.simme-na__intro-block ol,
.simme-na__section-copy ol {
    counter-reset: sna-list;
}

.simme-na__intro-block ol li,
.simme-na__section-copy ol li {
    counter-increment: sna-list;
    padding-left: 35px !important;
}

.simme-na__intro-block ol li::before,
.simme-na__section-copy ol li::before {
    content: counter(sna-list);
    top: 7px;
    left: 9px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    background: rgba(36,191,255,.10);
    border: 1px solid rgba(143,217,255,.30);
    color: var(--sna-neon-soft);
    font-size: 9px;
    font-weight: 800;
    box-shadow: none;
}

/* Contents links are a compact navigation component rather than a naked list. */
.simme-na__toc > div {
    display: grid !important;
    gap: 6px !important;
}

.simme-na__toc a {
    display: grid !important;
    grid-template-columns: 7px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    min-height: 38px;
    padding: 8px 9px !important;
    border: 1px solid transparent;
    border-radius: 10px;
    background: rgba(36,191,255,.025) !important;
    color: var(--sna-text-soft) !important;
    text-decoration: none !important;
}

.simme-na__toc a::before {
    position: static !important;
    display: block !important;
    width: 6px !important;
    height: 6px !important;
    margin-top: .52em;
    border-radius: 50%;
    background: var(--sna-neon-soft) !important;
    box-shadow: 0 0 7px rgba(36,191,255,.34);
    content: "" !important;
}

.simme-na__toc a:hover {
    border-color: rgba(88,202,255,.20);
    background: rgba(36,191,255,.065) !important;
    color: var(--sna-text) !important;
}

/* The 32-link closing directory remains crawlable but reads as a designed
   knowledge index rather than an unstyled bank of links. */
.simme-na__index-list {
    gap: 8px !important;
}

.simme-na__index-list a {
    min-height: 38px;
    padding: 8px 10px !important;
    border: 1px solid rgba(88,202,255,.11);
    border-radius: 10px;
    background: rgba(36,191,255,.025);
    transition: border-color .18s ease, background .18s ease, transform .18s ease, color .18s ease;
}

.simme-na__index-list a:hover {
    border-color: rgba(88,202,255,.34);
    background: rgba(36,191,255,.07);
    transform: translateY(-1px);
}

/* ------------------------------------------------------------------------
   DEDICATED NODE PAGE CONTROL DOCK
   ------------------------------------------------------------------------ */

.simme-na--node-page .simme-na__nodepage-bar {
    margin: 16px 16px 0 !important;
    padding: 9px 11px !important;
    border: 1px solid rgba(88,202,255,.18) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.08) !important;
}

.simme-na--node-page .simme-na__detail--standalone {
    margin-top: 10px;
}

/* ------------------------------------------------------------------------
   RESPONSIVE ORBIT / CONTROLS
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
    .simme-na__count {
        grid-template-columns: minmax(0, 1fr) 90px !important;
        min-height: 128px;
        padding: 15px 15px 15px 17px !important;
    }

    .simme-na__orbit {
        width: 86px;
        height: 86px;
        transform: scale(.82) translate3d(var(--sna-orbit-x), var(--sna-orbit-y), 0) rotateX(var(--sna-orbit-tilt-x)) rotateY(var(--sna-orbit-tilt-y));
        transform-origin: center;
    }

    .simme-na__nodepage-bar {
        margin: 12px 12px 0 !important;
    }
}

@media (max-width: 560px) {
    .simme-na__count {
        grid-template-columns: minmax(0, 1fr) 76px !important;
        gap: 8px !important;
        min-height: 116px;
    }

    .simme-na__count-copy strong { font-size: 38px !important; }
    .simme-na__orbit { width: 74px; height: 74px; transform: scale(.68); }

    body .simme-na .simme-na__canonical-link {
        min-height: 48px !important;
        padding: 11px 14px !important;
        font-size: 12px !important;
    }

    .simme-na__theme-option {
        font-size: 11px !important;
        gap: 6px !important;
    }

    .simme-na__nodepage-atlas-link {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .simme-na__orbit,
    .simme-na__orbit::before,
    .simme-na__orbit-ring,
    .simme-na__theme-track::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}

/* ========================================================================
   SYMSOUL NODE ATLAS V3.4 — INDIVIDUAL NODE PAGE HEADER + LAYOUT POLISH
   - Dark sticky Simme bar on every individual Node URL
   - Dynamic WordPress logo/menu
   - Safer full-detail responsive layout
   - Stable action sizing
   - Cleaner light-mode typography
   ======================================================================== */

.simme-node-topbar {
    position: sticky;
    top: 0;
    z-index: 99990;
    width: 100%;
    color: #eef8ff !important;
    background:
        radial-gradient(circle at 7% -120%, rgba(46, 194, 255, .18), transparent 42%),
        linear-gradient(180deg, rgba(4, 11, 21, .98), rgba(5, 13, 25, .96));
    border-bottom: 1px solid rgba(96, 207, 255, .20);
    box-shadow: 0 10px 32px rgba(0, 0, 0, .22), inset 0 -1px 0 rgba(255, 255, 255, .02);
    backdrop-filter: blur(18px) saturate(1.12);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

.simme-node-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1480px, 100%);
    min-height: 62px;
    margin: 0 auto;
    padding: 8px clamp(16px, 3vw, 34px);
}

.simme-node-topbar__brand,
.simme-node-topbar__brand:hover,
.simme-node-topbar__brand:focus,
.simme-node-topbar__brand:active,
.simme-node-topbar__brand:visited {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    max-width: min(170px, 48vw);
    min-height: 38px;
    margin: 0 !important;
    padding: 0 !important;
    color: #f3f8ff !important;
    -webkit-text-fill-color: #f3f8ff !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.simme-node-topbar__logo {
    display: block !important;
    width: auto !important;
    max-width: 150px !important;
    height: auto !important;
    max-height: 36px !important;
    margin: 0 !important;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 0 10px rgba(84, 201, 255, .08));
}

.simme-node-topbar__wordmark {
    font-size: 20px;
    font-weight: 720;
    letter-spacing: -.025em;
}

body .simme-na .simme-node-topbar__burger,
body .simme-na .simme-node-topbar__burger:hover,
body .simme-na .simme-node-topbar__burger:focus,
body .simme-na .simme-node-topbar__burger:active {
    position: relative;
    display: grid !important;
    place-content: center;
    gap: 5px;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(112, 211, 255, .22) !important;
    border-radius: 13px !important;
    background:
        radial-gradient(circle at 30% 0%, rgba(36, 191, 255, .10), transparent 55%),
        rgba(10, 22, 38, .84) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045) !important;
    color: #ddf5ff !important;
    cursor: pointer;
    transform: none !important;
}

.simme-node-topbar__burger span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
    transition: transform .2s ease, opacity .16s ease, width .2s ease;
}

.simme-node-topbar__burger:hover {
    border-color: rgba(143, 217, 255, .58) !important;
    box-shadow: 0 0 14px rgba(36, 191, 255, .14), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.simme-node-topbar__burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.simme-node-topbar__burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    width: 10px;
}
.simme-node-topbar__burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.simme-node-topbar__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: clamp(12px, 3vw, 34px);
    width: min(360px, calc(100vw - 24px));
    max-height: min(72vh, 620px);
    overflow: auto;
    padding: 10px;
    border: 1px solid rgba(97, 205, 255, .24);
    border-radius: 18px;
    background:
        radial-gradient(circle at 92% 0%, rgba(36, 191, 255, .12), transparent 45%),
        rgba(5, 14, 27, .985);
    box-shadow: 0 24px 60px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.simme-node-topbar__menu[hidden] {
    display: none !important;
}

.simme-node-topbar__menu-list,
.simme-node-topbar__menu-list ul {
    display: grid;
    gap: 4px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.simme-node-topbar__menu-list ul {
    margin: 4px 0 5px 12px !important;
    padding-left: 10px !important;
    border-left: 1px solid rgba(102, 205, 255, .16);
}

.simme-node-topbar__menu-list li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.simme-node-topbar__menu-list a,
.simme-node-topbar__menu-list a:hover,
.simme-node-topbar__menu-list a:focus,
.simme-node-topbar__menu-list a:active,
.simme-node-topbar__menu-list a:visited {
    display: flex !important;
    align-items: center;
    width: 100%;
    min-height: 40px;
    margin: 0 !important;
    padding: 9px 11px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #c9d9ea !important;
    -webkit-text-fill-color: #c9d9ea !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
}

.simme-node-topbar__menu-list a:hover,
.simme-node-topbar__menu-list a:focus-visible {
    border-color: rgba(99, 205, 255, .16) !important;
    background: rgba(36, 191, 255, .065) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* The Atlas control dock stays useful below the persistent site bar. */
.simme-na--node-page .simme-na__nodepage-bar {
    position: relative !important;
    top: auto !important;
    grid-template-columns: auto minmax(0, 1fr) minmax(190px, 250px) !important;
}

/* Stable action typography in every interaction state. */
body .simme-na .simme-na__canonical-link,
body .simme-na .simme-na__canonical-link:link,
body .simme-na .simme-na__canonical-link:visited,
body .simme-na .simme-na__canonical-link:hover,
body .simme-na .simme-na__canonical-link:focus,
body .simme-na .simme-na__canonical-link:active {
    width: min(100%, 440px) !important;
    min-height: 52px !important;
    margin: 14px auto 0 !important;
    padding: 12px 18px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 780 !important;
    transform: none !important;
}

body .simme-na .simme-na__atlas-button,
body .simme-na .simme-na__atlas-button:visited,
body .simme-na .simme-na__atlas-button:hover,
body .simme-na .simme-na__atlas-button:focus,
body .simme-na .simme-na__atlas-button:active,
body .simme-na .simme-na__back-to-atlas,
body .simme-na .simme-na__back-to-atlas:visited,
body .simme-na .simme-na__back-to-atlas:hover,
body .simme-na .simme-na__back-to-atlas:focus,
body .simme-na .simme-na__back-to-atlas:active {
    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 680 !important;
    transform: none !important;
}

/* Light theme: readable editorial colour rather than saturated electric blue. */
.simme-na[data-theme="light"] .simme-na__detail-tagline {
    color: #2c6b8f !important;
    -webkit-text-fill-color: #2c6b8f !important;
    text-shadow: none !important;
}

.simme-na[data-theme="light"] .simme-na__detail-number,
.simme-na[data-theme="light"] .simme-na__eyebrow {
    color: #407793 !important;
    -webkit-text-fill-color: #407793 !important;
    text-shadow: none !important;
}

/* Never allow raw Builder instructions to look like article content if an old
   cache/browser snapshot happens to contain one. */
.simme-na__section-copy > p:first-child:last-child {
    overflow-wrap: anywhere;
}

/* Earlier layout collapse: the sidebar must never squeeze the article. */
@media (max-width: 1180px) {
    .simme-na--node-page .simme-na__detail-layout {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .simme-na--node-page .simme-na__passport {
        position: static !important;
        top: auto !important;
        order: -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 18px;
        width: 100%;
    }

    .simme-na--node-page .simme-na__passport-card,
    .simme-na--node-page .simme-na__toc {
        height: 100%;
        min-width: 0;
    }

    .simme-na--node-page .simme-na__canonical-link {
        grid-column: 1 / -1;
    }
}

@media (max-width: 860px) {
    .simme-na--node-page .simme-na__detail-hero {
        grid-template-columns: 82px minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    .simme-na--node-page .simme-na__detail-icon {
        width: 82px !important;
        height: 82px !important;
    }

    .simme-na--node-page .simme-na__back-to-atlas {
        grid-column: 2;
        justify-self: start;
        margin-top: 4px;
    }

    .simme-na--node-page .simme-na__passport {
        grid-template-columns: 1fr !important;
    }

    .simme-na--node-page .simme-na__nodepage-bar {
        grid-template-columns: 1fr auto !important;
        gap: 10px !important;
    }

    .simme-na--node-page .simme-na__nodepage-context {
        display: none !important;
    }
}

@media (max-width: 640px) {
    .simme-node-topbar__inner {
        min-height: 58px;
        padding-inline: 13px;
    }

    .simme-node-topbar__logo {
        max-width: 132px !important;
        max-height: 32px !important;
    }

    .simme-na--node-page .simme-na__detail-hero {
        grid-template-columns: 66px minmax(0, 1fr) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .simme-na--node-page .simme-na__detail-icon {
        width: 66px !important;
        height: 66px !important;
        border-radius: 15px !important;
    }

    .simme-na--node-page .simme-na__detail-hero h1,
    .simme-na--node-page .simme-na__detail-hero h2 {
        font-size: clamp(32px, 10vw, 46px) !important;
    }

    .simme-na--node-page .simme-na__nodepage-bar {
        grid-template-columns: 1fr !important;
    }

    .simme-na--node-page .simme-na__theme-toggle,
    .simme-na--node-page .simme-na__nodepage-atlas-link {
        width: 100% !important;
    }

    .simme-na__runtime > div {
        display: flex !important;
        align-items: baseline !important;
        flex-wrap: wrap !important;
        gap: 4px 8px !important;
    }

    .simme-na__runtime > div b {
        flex: 1 1 100px;
    }

    .simme-na__runtime > div strong,
    .simme-na__runtime > div small {
        white-space: nowrap;
    }
}


/* ========================================================================
   SYMSOUL NODE ATLAS V3.5 — RESPONSIVE BREATHING-ROOM REPAIR
   2026-08-13
   Only affects .simme-na (Node Atlas).
   - prevents the directory introduction text from flowing beneath the
     Refined Node Detail panel at awkward intermediate widths
   - moves section markers comfortably inside the reading panel instead of
     pinning them against the outer edge
   ======================================================================== */

/* The directory introduction previously contained two minimum-width columns.
   When Themify supplied an intermediate module width, the explanatory copy
   could physically overflow its grid track and appear underneath the sticky
   detail card. A vertical editorial arrangement is more robust at every
   width and gives the opening copy more breathing room. */
.simme-na__directory-heading,
.simme-na.is-detail-open .simme-na__directory-heading {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
}

.simme-na__directory-heading > *,
.simme-na__directory-heading p {
    min-width: 0 !important;
    max-width: 100% !important;
}

.simme-na__directory-heading p {
    width: min(100%, 760px) !important;
    margin: 0 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

/* Add a little extra separation from the neighbouring detail panel so the
   two areas read as deliberate peers rather than touching columns. */
@media (min-width: 1051px) {
    .simme-na__workspace {
        column-gap: clamp(24px, 2.6vw, 38px) !important;
    }
}

/* Reading-section marker: bring the cyan node marker well inside the panel
   and increase the copy inset to match. This applies to both the Atlas detail
   view and the dedicated individual Node reading pages. */
.simme-na__reading-section {
    padding-left: 52px !important;
    padding-right: clamp(16px, 2vw, 28px) !important;
}

.simme-na__reading-section::before {
    left: 20px !important;
    top: 38px !important;
    width: 10px !important;
    height: 10px !important;
    box-shadow:
        0 0 0 7px rgba(36, 191, 255, .10),
        0 0 16px rgba(36, 191, 255, .22) !important;
}

@media (max-width: 700px) {
    .simme-na__reading-section {
        padding-left: 44px !important;
        padding-right: 14px !important;
    }

    .simme-na__reading-section::before {
        left: 16px !important;
        top: 34px !important;
        width: 9px !important;
        height: 9px !important;
    }
}

/* ========================================================================
   SYMSOUL NODE ATLAS V3.6 — CONTROL + RETURN-STATE RESPONSIVE REPAIR
   2026-08-13
   Only affects .simme-na (Node Atlas).
   - rebuilds the light/dark switch so no decorative light can cover labels
   - removes the legacy responsive grid-area collision in the 32 Node panel
   - gives selected Node titles more width before the directory/sidebar collapses
   - restores a clean Atlas state when leaving a Node detail view
   ======================================================================== */

/* ------------------------------------------------------------------------
   THEME SWITCH — COMPACT SIMME CELESTIAL CONTROL
   ------------------------------------------------------------------------ */
body .simme-na .simme-na__theme-toggle,
body .simme-na .simme-na__theme-toggle:hover,
body .simme-na .simme-na__theme-toggle:focus,
body .simme-na .simme-na__theme-toggle:active {
    display: block !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    padding: 4px !important;
    aspect-ratio: auto !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}

.simme-na__theme-track {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    isolation: isolate;
    border-radius: 14px !important;
}

/* V3.2 used a travelling luminous particle between the states. At compact
   widths that particle could sit over the label. The active capsule now
   provides the movement and illumination, so the free-floating dot is gone. */
.simme-na__theme-track::after {
    display: none !important;
    content: none !important;
}

.simme-na__theme-track::before {
    left: 50% !important;
    right: auto !important;
    top: 10px !important;
    bottom: 10px !important;
    width: 1px !important;
    height: auto !important;
    background: linear-gradient(180deg, transparent, rgba(143,217,255,.16), transparent) !important;
    transform: none !important;
    opacity: .72;
}

.simme-na__theme-thumb {
    z-index: 1 !important;
    top: 3px !important;
    left: 3px !important;
    width: calc(50% - 3px) !important;
    height: 44px !important;
    border-radius: 12px !important;
    transform: translateX(0) !important;
    transition: transform .28s cubic-bezier(.2,.76,.2,1), background .22s ease, box-shadow .22s ease !important;
}

.simme-na[data-theme="light"] .simme-na__theme-thumb {
    transform: translateX(calc(100% - 3px)) !important;
}

.simme-na__theme-option {
    z-index: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 8px !important;
    gap: 8px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

.simme-na__theme-label {
    position: relative;
    z-index: 2;
    display: inline-block !important;
    min-width: 0;
}

.simme-na__theme-icon {
    position: relative !important;
    z-index: 2;
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
}

/* A cleaner crescent. Its cut-out uses the active surface colour rather than
   a bright circular overlay, so there is no second 'light dot'. */
.simme-na__theme-icon--moon::before {
    inset: 1px !important;
    background: currentColor !important;
    box-shadow: 0 0 10px rgba(143,217,255,.24) !important;
}

.simme-na__theme-icon--moon::after {
    top: -1px !important;
    right: -2px !important;
    width: 13px !important;
    height: 13px !important;
    background: #17283d !important;
}

.simme-na[data-theme="light"] .simme-na__theme-icon--moon::after {
    background: #ffffff !important;
}

/* Make Light read as a small sun rather than a plain dot. */
.simme-na__theme-icon--sun::before {
    inset: 4px !important;
    border: 1.7px solid currentColor !important;
    background: transparent !important;
    box-shadow: none !important;
}

.simme-na__theme-icon--sun::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(currentColor,currentColor) center top / 1.5px 3px no-repeat,
        linear-gradient(currentColor,currentColor) center bottom / 1.5px 3px no-repeat,
        linear-gradient(90deg,currentColor,currentColor) left center / 3px 1.5px no-repeat,
        linear-gradient(90deg,currentColor,currentColor) right center / 3px 1.5px no-repeat;
    opacity: .9;
}

/* Keep the dedicated Node-page control compact. Global theme/button rules in
   Themify cannot turn it into the large circular control seen in V3.5. */
.simme-na--node-page .simme-na__theme-toggle {
    width: min(100%, 244px) !important;
    min-width: 210px !important;
    justify-self: end !important;
}

@media (max-width: 860px) {
    .simme-na--node-page .simme-na__theme-toggle {
        width: min(100%, 244px) !important;
        min-width: 0 !important;
        justify-self: start !important;
    }
}

@media (max-width: 640px) {
    .simme-na--node-page .simme-na__theme-toggle {
        width: 100% !important;
        max-width: none !important;
    }
}

/* ------------------------------------------------------------------------
   32 NODE PANEL — REMOVE LEGACY GRID COLLISION
   ------------------------------------------------------------------------ */
.simme-na__count-copy {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas: none !important;
    align-content: center !important;
    justify-items: start !important;
    gap: 5px !important;
}

.simme-na__count-copy strong,
.simme-na__count-copy span,
.simme-na__count-copy small {
    grid-area: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    max-width: 100% !important;
}

.simme-na__count-copy strong {
    font-size: clamp(38px, 4vw, 54px) !important;
    line-height: .95 !important;
}

.simme-na__count-copy span {
    font-size: 14px !important;
    line-height: 1.25 !important;
}

.simme-na__count-copy small {
    font-size: 11px !important;
    line-height: 1.35 !important;
}

@media (max-width: 900px) {
    .simme-na__count {
        grid-template-areas: none !important;
    }
}

@media (max-width: 560px) {
    .simme-na__count-copy strong {
        font-size: 36px !important;
    }
    .simme-na__count-copy span {
        font-size: 12px !important;
    }
    .simme-na__count-copy small {
        font-size: 10px !important;
    }
}

/* ------------------------------------------------------------------------
   SELECTED NODE — GIVE LONG TITLES ROOM BEFORE THEY CAN CLIP
   ------------------------------------------------------------------------ */
.simme-na__detail-hero-copy,
.simme-na__detail-hero-copy h1,
.simme-na__detail-hero-copy h2,
.simme-na__detail-summary,
.simme-na__detail-tagline {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* The compact directory + article split only survives where there is genuinely
   enough Atlas width. This prevents Transparency & Intervention and similar
   names being clipped at intermediate Themify widths. */
@container simme-node-atlas (max-width: 1420px) {
    .simme-na.is-detail-open:not(.simme-na--node-page) .simme-na__workspace {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .simme-na.is-detail-open:not(.simme-na--node-page) .simme-na__directory {
        display: none !important;
    }

    .simme-na.is-detail-open:not(.simme-na--node-page) .simme-na__detail-hero {
        grid-template-columns: 100px minmax(0, 1fr) !important;
    }

    .simme-na.is-detail-open:not(.simme-na--node-page) .simme-na__back-to-atlas {
        position: static !important;
        grid-column: 2 !important;
        justify-self: start !important;
    }
}

@media (max-width: 1420px) {
    .simme-na.is-detail-open:not(.simme-na--node-page) .simme-na__workspace {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .simme-na.is-detail-open:not(.simme-na--node-page) .simme-na__directory {
        display: none !important;
    }
}

@media (max-width: 760px) {
    .simme-na__detail-hero,
    .simme-na.is-detail-open:not(.simme-na--node-page) .simme-na__detail-hero {
        grid-template-columns: 74px minmax(0, 1fr) !important;
        gap: 16px !important;
    }

    .simme-na__detail-icon {
        width: 74px !important;
        height: 74px !important;
    }

    .simme-na__detail-hero h1,
    .simme-na__detail-hero h2 {
        font-size: clamp(31px, 8vw, 44px) !important;
        line-height: 1.02 !important;
    }
}

/* ------------------------------------------------------------------------
   CLEAN RETURN TO ATLAS
   ------------------------------------------------------------------------ */
/* When detail mode is not active there must be no condensed-directory state
   left behind. These are intentionally narrow resets, not a redesign of the
   normal Atlas desktop composition. */
.simme-na:not(.is-detail-open) .simme-na__directory {
    min-width: 0 !important;
    opacity: 1 !important;
    transform: none !important;
}

.simme-na:not(.is-detail-open) .simme-na__grid {
    width: 100% !important;
}

@media (max-width: 1050px) {
    .simme-na:not(.is-detail-open) .simme-na__workspace {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .simme-na:not(.is-detail-open) .simme-na__detail {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
    }
}



/* =========================================================
   SYMSOUL NODE ATLAS V3.7 — PREMIUM CATEGORY CONTROLS,
   COLOUR-CODED ORBIT SPHERES & ACTIVE NODE ICON AURA

   - Seven orbit spheres match the seven Node category colour accents.
   - Uses only colours already present elsewhere in the Simme/site CSS.
   - Category controls are flatter and more premium, with a restrained
     warm-gold halo behind the control on hover/focus/selection.
   - Selecting a Node creates a colour-coded glow behind its authorised icon.
   ========================================================= */

/* Shared semantic colour set: all colours already exist in the current Simme CSS. */
.simme-na {
    --sna-group-1: #8fd9ff;
    --sna-group-2: #24bfff;
    --sna-group-3: #37b7ff;
    --sna-group-4: #d84bff;
    --sna-group-5: #ff7bd9;
    --sna-group-6: #f5d66d;
    --sna-group-7: #e1edfa;
    --sna-warm-glow: #f5d66d;
}

/* ---------------------------------------------------------------------
   1. PREMIUM CATEGORY FILTERS — FLAT, QUIET, WARM INTERACTION AURA
   --------------------------------------------------------------------- */

.simme-na .simme-na__filters {
    gap: 10px 12px;
    align-items: center;
}

.simme-na .simme-na__filter,
.simme-na .simme-na__filter:hover,
.simme-na .simme-na__filter:focus,
.simme-na .simme-na__filter:active {
    --sna-filter-accent: var(--sna-group-1);
    position: relative;
    isolation: isolate;
    overflow: visible !important;
    min-height: 42px;
    padding: 9px 17px !important;
    border: 1px solid color-mix(in srgb, var(--sna-filter-accent) 24%, var(--sna-border) 76%) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--sna-surface) 92%, transparent) !important;
    color: var(--sna-text-soft) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.018) !important;
    font-size: 12px !important;
    font-weight: 620 !important;
    line-height: 1.15 !important;
    letter-spacing: .012em !important;
    text-shadow: none !important;
    transform: none !important;
    isolation: isolate !important;
    transition:
        border-color .22s ease,
        color .22s ease,
        background-color .22s ease,
        box-shadow .25s ease !important;
}

.simme-na .simme-na__filter::before {
    position: absolute;
    z-index: -1;
    left: 12%;
    right: 12%;
    bottom: -10px;
    height: 24px;
    content: "";
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(245,214,109,.28) 0%,
        rgba(245,214,109,.13) 38%,
        rgba(245,214,109,0) 74%
    );
    filter: blur(7px);
    opacity: 0;
    pointer-events: none;
    transform: scale(.86);
    transition: opacity .24s ease, transform .28s ease;
}

.simme-na .simme-na__filter::after {
    position: absolute;
    z-index: 0;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 1px;
    content: "";
    border-radius: 999px;
    background: color-mix(in srgb, var(--sna-filter-accent) 72%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, left .22s ease, right .22s ease;
}

.simme-na .simme-na__filter:hover,
.simme-na .simme-na__filter:focus-visible {
    border-color: color-mix(in srgb, var(--sna-filter-accent) 54%, var(--sna-border) 46%) !important;
    background: color-mix(in srgb, var(--sna-surface) 88%, var(--sna-filter-accent) 12%) !important;
    color: var(--sna-text) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025) !important;
}

.simme-na .simme-na__filter:hover::before,
.simme-na .simme-na__filter:focus-visible::before {
    opacity: .72;
    transform: scale(1);
}

.simme-na .simme-na__filter:hover::after,
.simme-na .simme-na__filter:focus-visible::after {
    left: 12px;
    right: 12px;
    opacity: .48;
}

.simme-na .simme-na__filter.is-active,
.simme-na .simme-na__filter.is-active:hover,
.simme-na .simme-na__filter.is-active:focus-visible {
    border-color: color-mix(in srgb, var(--sna-filter-accent) 72%, var(--sna-border) 28%) !important;
    background: color-mix(in srgb, var(--sna-surface) 84%, var(--sna-filter-accent) 16%) !important;
    color: var(--sna-text) !important;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--sna-filter-accent) 12%, transparent),
        0 0 0 1px color-mix(in srgb, var(--sna-filter-accent) 7%, transparent) !important;
}

.simme-na .simme-na__filter.is-active::before {
    opacity: .88;
    transform: scale(1.08);
}

.simme-na .simme-na__filter.is-active::after {
    left: 10px;
    right: 10px;
    opacity: .78;
}

.simme-na .simme-na__filter[data-simme-filter="all"]   { --sna-filter-accent: var(--sna-group-1); }
.simme-na .simme-na__filter[data-simme-filter="01-05"] { --sna-filter-accent: var(--sna-group-1); }
.simme-na .simme-na__filter[data-simme-filter="06-10"] { --sna-filter-accent: var(--sna-group-2); }
.simme-na .simme-na__filter[data-simme-filter="11-15"] { --sna-filter-accent: var(--sna-group-3); }
.simme-na .simme-na__filter[data-simme-filter="16-20"] { --sna-filter-accent: var(--sna-group-4); }
.simme-na .simme-na__filter[data-simme-filter="21-25"] { --sna-filter-accent: var(--sna-group-5); }
.simme-na .simme-na__filter[data-simme-filter="26-30"] { --sna-filter-accent: var(--sna-group-6); }
.simme-na .simme-na__filter[data-simme-filter="31-32"] { --sna-filter-accent: var(--sna-group-7); }

/* Slightly softer warm aura on the light reading theme. */
.simme-na[data-theme="light"] .simme-na__filter::before {
    opacity: 0;
    background: radial-gradient(
        ellipse at center,
        rgba(245,214,109,.20) 0%,
        rgba(245,214,109,.08) 40%,
        rgba(245,214,109,0) 74%
    );
}

.simme-na[data-theme="light"] .simme-na__filter:hover::before,
.simme-na[data-theme="light"] .simme-na__filter:focus-visible::before {
    opacity: .64;
}

.simme-na[data-theme="light"] .simme-na__filter.is-active::before {
    opacity: .76;
}

/* ---------------------------------------------------------------------
   2. SEVEN ORBIT SPHERES — ONE COLOUR FAMILY PER NODE GROUP
   --------------------------------------------------------------------- */

.simme-na__orbit-ring i {
    --sna-orb: var(--sna-group-1);
    width: 10px !important;
    height: 10px !important;
    border: 1px solid color-mix(in srgb, var(--sna-orb) 60%, white 40%) !important;
    border-radius: 50% !important;
    background:
        radial-gradient(
            circle at 29% 24%,
            rgba(255,255,255,.98) 0 10%,
            color-mix(in srgb, var(--sna-orb) 72%, white 28%) 14% 28%,
            var(--sna-orb) 48% 64%,
            color-mix(in srgb, var(--sna-orb) 55%, #00121d 45%) 100%
        ) !important;
    box-shadow:
        inset 1px 1px 2px rgba(255,255,255,.48),
        inset -2px -2px 3px rgba(0,18,29,.42),
        0 0 6px color-mix(in srgb, var(--sna-orb) 88%, transparent),
        0 0 15px color-mix(in srgb, var(--sna-orb) 48%, transparent) !important;
    transform-style: preserve-3d;
}

/* Seven group colours, all already used elsewhere in the existing site/app CSS. */
.simme-na__orbit-ring--one i:nth-child(1)  { --sna-orb: var(--sna-group-1); }
.simme-na__orbit-ring--one i:nth-child(2)  { --sna-orb: var(--sna-group-2); }
.simme-na__orbit-ring--one i:nth-child(3)  { --sna-orb: var(--sna-group-3); }
.simme-na__orbit-ring--two i:nth-child(1)  { --sna-orb: var(--sna-group-4); }
.simme-na__orbit-ring--two i:nth-child(2)  { --sna-orb: var(--sna-group-5); }
.simme-na__orbit-ring--three i:nth-child(1){ --sna-orb: var(--sna-group-6); }
.simme-na__orbit-ring--three i:nth-child(2){ --sna-orb: var(--sna-group-7); }

/* Re-space the sphere centres around each ring. */
.simme-na__orbit-ring--one i:nth-child(1) {
    left: -5px !important;
    top: calc(50% - 5px) !important;
}

.simme-na__orbit-ring--one i:nth-child(2) {
    right: -5px !important;
    top: 18% !important;
}

.simme-na__orbit-ring--one i:nth-child(3) {
    left: calc(50% - 5px) !important;
    bottom: -5px !important;
    top: auto !important;
    right: auto !important;
}

.simme-na__orbit-ring--two i:nth-child(1) {
    left: 7% !important;
    top: 7% !important;
}

.simme-na__orbit-ring--two i:nth-child(2) {
    right: 4% !important;
    bottom: 13% !important;
    top: auto !important;
}

.simme-na__orbit-ring--three i:nth-child(1) {
    left: -5px !important;
    top: 56% !important;
}

.simme-na__orbit-ring--three i:nth-child(2) {
    right: 9% !important;
    top: 12% !important;
}

/* Keep the orbital paths fine and understated so the spheres are the focus. */
.simme-na__orbit-ring {
    border-color: rgba(143,217,255,.16) !important;
    box-shadow: inset 0 0 12px rgba(36,191,255,.025);
}

.simme-na__orbit-ring--two {
    border-color: rgba(216,75,255,.13) !important;
}

.simme-na__orbit-ring--three {
    border-color: rgba(245,214,109,.11) !important;
}

/* ---------------------------------------------------------------------
   3. ACTIVE NODE ICON — GROUP-COLOURED LIGHT FROM BEHIND
   --------------------------------------------------------------------- */

.simme-na__node[data-group="01-05"] { --sna-node-aura: var(--sna-group-1); }
.simme-na__node[data-group="06-10"] { --sna-node-aura: var(--sna-group-2); }
.simme-na__node[data-group="11-15"] { --sna-node-aura: var(--sna-group-3); }
.simme-na__node[data-group="16-20"] { --sna-node-aura: var(--sna-group-4); }
.simme-na__node[data-group="21-25"] { --sna-node-aura: var(--sna-group-5); }
.simme-na__node[data-group="26-30"] { --sna-node-aura: var(--sna-group-6); }
.simme-na__node[data-group="31-32"] { --sna-node-aura: var(--sna-group-7); }

.simme-na__node-media {
    position: relative;
    isolation: isolate;
    overflow: visible !important;
}

.simme-na__node-media::before {
    position: absolute;
    z-index: -1;
    inset: -15px;
    content: "";
    border-radius: 28px;
    background: radial-gradient(
        circle at center,
        color-mix(in srgb, var(--sna-node-aura, var(--sna-group-1)) 40%, transparent) 0%,
        color-mix(in srgb, var(--sna-node-aura, var(--sna-group-1)) 20%, transparent) 38%,
        transparent 72%
    );
    filter: blur(7px);
    opacity: 0;
    pointer-events: none;
    transform: scale(.78);
    transition: opacity .28s ease, transform .32s cubic-bezier(.2,.72,.2,1), filter .28s ease;
}

.simme-na__node-media img,
.simme-na__node-media .simme-na__node-number-only {
    position: relative;
    z-index: 2;
    border-radius: inherit;
}

/* A hint on hover; a fuller aura only once the Node is actually selected. */
.simme-na__node:hover .simme-na__node-media::before,
.simme-na__node:focus-visible .simme-na__node-media::before {
    opacity: .42;
    transform: scale(.92);
}

.simme-na__node.is-selected .simme-na__node-media::before {
    opacity: .96;
    filter: blur(8px);
    transform: scale(1.08);
}

.simme-na__node.is-selected .simme-na__node-media {
    border-color: color-mix(in srgb, var(--sna-node-aura, var(--sna-group-1)) 52%, rgba(255,255,255,.07) 48%) !important;
    box-shadow:
        0 0 10px color-mix(in srgb, var(--sna-node-aura, var(--sna-group-1)) 30%, transparent),
        0 0 24px color-mix(in srgb, var(--sna-node-aura, var(--sna-group-1)) 18%, transparent) !important;
}

/* Keep the image aura tasteful in the light theme. */
.simme-na[data-theme="light"] .simme-na__node.is-selected .simme-na__node-media::before {
    opacity: .58;
}

/* ---------------------------------------------------------------------
   4. SMALL-SCREEN TUNING
   --------------------------------------------------------------------- */

@media (max-width: 720px) {
    .simme-na .simme-na__filters {
        gap: 8px;
    }

    .simme-na .simme-na__filter,
    .simme-na .simme-na__filter:hover,
    .simme-na .simme-na__filter:focus,
    .simme-na .simme-na__filter:active {
        min-height: 38px;
        padding: 8px 13px !important;
        font-size: 11px !important;
    }

    .simme-na .simme-na__filter::before {
        bottom: -8px;
        height: 20px;
        filter: blur(6px);
    }

    .simme-na__orbit-ring i {
        width: 9px !important;
        height: 9px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .simme-na .simme-na__filter::before,
    .simme-na .simme-na__filter::after,
    .simme-na__node-media::before {
        transition: none !important;
    }
}


/* =========================================================
   SYMSOUL NODE ATLAS V3.8 — ORBIT MOTION RELIABILITY

   The three orbit paths now have two motion layers:
   1. CSS animation remains as a no-JavaScript fallback.
   2. When the V3.8 JavaScript engine starts, it takes direct control of
      ring rotation so global theme rules / browser animation resets cannot
      leave the seven Node spheres frozen.
   ========================================================= */

/* Strong fallback: make sure the orbit actually runs if JS is unavailable. */
.simme-na .simme-na__orbit-ring--one {
    animation: simme-na-orbit-spin 7.2s linear infinite !important;
}

.simme-na .simme-na__orbit-ring--two {
    animation: simme-na-orbit-spin-two 10.5s linear infinite reverse !important;
}

.simme-na .simme-na__orbit-ring--three {
    animation: simme-na-orbit-spin-three 14s linear infinite !important;
}

/* Once JS is active it owns transform updates; prevent CSS animation from
   fighting those inline transforms. */
.simme-na.simme-na--orbit-js .simme-na__orbit-ring,
.simme-na.simme-na--orbit-js .simme-na__orbit-ring--one,
.simme-na.simme-na--orbit-js .simme-na__orbit-ring--two,
.simme-na.simme-na--orbit-js .simme-na__orbit-ring--three {
    animation: none !important;
    will-change: transform;
}

/* Keep the seven spheres visually spherical while their parent orbit tilts. */
.simme-na.simme-na--orbit-js .simme-na__orbit-ring i {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}

/* Reduced-motion is slowed dramatically rather than frozen completely, so
   the panel still reads as a living Node system without fast movement. */
@media (prefers-reduced-motion: reduce) {
    .simme-na:not(.simme-na--orbit-js) .simme-na__orbit-ring--one {
        animation: simme-na-orbit-spin 45s linear infinite !important;
    }

    .simme-na:not(.simme-na--orbit-js) .simme-na__orbit-ring--two {
        animation: simme-na-orbit-spin-two 58s linear infinite reverse !important;
    }

    .simme-na:not(.simme-na--orbit-js) .simme-na__orbit-ring--three {
        animation: simme-na-orbit-spin-three 72s linear infinite !important;
    }
}


/* =========================================================
   SYMSOUL NODE ATLAS V3.9 — MOBILE RESILIENCE, ROUNDED
   READING PANELS & PREMIUM PRIMARY ACTION
   2026-08-13

   - Prevents the intermittent empty mobile Atlas caused by detail-state and
     viewport-state becoming out of sync after resize/orientation/BFCache.
   - Adds a safe no-JS / class-mismatch fallback so server-rendered Node cards
     always remain available rather than leaving an empty workspace.
   - Rounds full Node reading panels to match the wider Simme design language.
   - Rebuilds the standalone/Atlas action as a restrained premium control with
     a stronger CSS-drawn open/grid symbol instead of the weak text arrow.
   ========================================================= */

/* ---------------------------------------------------------------------
   1. MOBILE / TABLET RENDERING RESILIENCE
   --------------------------------------------------------------------- */

@media (max-width: 900px) {
    /* vh fallback first for Safari/older mobile engines, dvh where supported. */
    .simme-na__detail {
        max-height: calc(100vh - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
    }

    /* Normal Atlas state must always render its server-side directory/cards. */
    .simme-na:not(.is-detail-open):not(.simme-na--node-page) .simme-na__directory {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .simme-na:not(.is-detail-open):not(.simme-na--node-page) .simme-na__grid {
        display: grid !important;
        width: 100% !important;
        min-height: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .simme-na:not(.is-detail-open):not(.simme-na--node-page) .simme-na__node:not([hidden]) {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Fail-safe state. If the browser crosses the mobile breakpoint while the
       desktop detail class is still present, show usable inline content instead
       of hiding the directory and translating the only detail panel off-screen. */
    .simme-na.is-detail-open:not(.is-mobile-detail-open):not(.simme-na--node-page) .simme-na__directory {
        display: block !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .simme-na.is-detail-open:not(.is-mobile-detail-open):not(.simme-na--node-page) .simme-na__detail {
        position: relative !important;
        z-index: 2 !important;
        inset: auto !important;
        width: 100% !important;
        max-height: none !important;
        margin-top: 20px !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    .simme-na.is-mobile-detail-open:not(.simme-na--node-page) .simme-na__directory {
        display: none !important;
    }

    .simme-na.is-mobile-detail-open:not(.simme-na--node-page) .simme-na__detail {
        position: fixed !important;
        inset: 10px !important;
        margin: 0 !important;
        max-height: calc(100vh - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        overflow-y: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }
}

/* The narrow phone grid remains two useful columns until the viewport is too
   small for readable cards, then drops cleanly to one. */
@media (max-width: 360px) {
    .simme-na__grid,
    .simme-na.is-detail-open .simme-na__grid {
        grid-template-columns: 1fr !important;
    }
}

/* ---------------------------------------------------------------------
   2. FULL NODE READING PANELS — SOFT ROUNDED CONTAINERS
   --------------------------------------------------------------------- */

.simme-na__sections {
    display: grid !important;
    gap: 14px !important;
}

.simme-na__reading-section {
    margin: 0 !important;
    padding-top: 30px !important;
    padding-bottom: 31px !important;
    border: 1px solid rgba(92,185,231,.20) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        inset 16px 15px 34px rgba(36,191,255,.015),
        0 10px 26px rgba(0,0,0,.06) !important;
}

.simme-na[data-theme="dark"] .simme-na__reading-section {
    border-color: rgba(92,185,231,.19) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        inset 18px 16px 38px rgba(36,191,255,.018),
        0 12px 28px rgba(0,0,0,.12) !important;
}

.simme-na[data-theme="light"] .simme-na__reading-section {
    border-color: rgba(67,151,205,.16) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.88),
        inset 16px 14px 34px rgba(36,124,255,.018),
        0 12px 28px rgba(46,74,112,.065) !important;
}

@media (max-width: 700px) {
    .simme-na__sections {
        gap: 11px !important;
    }

    .simme-na__reading-section {
        border-radius: 17px !important;
    }
}

/* ---------------------------------------------------------------------
   3. PRIMARY NODE ACTION — DARK GLASS + CYAN ENERGY EDGE
   --------------------------------------------------------------------- */

body .simme-na .simme-na__canonical-link,
body .simme-na .simme-na__canonical-link:link,
body .simme-na .simme-na__canonical-link:visited,
body .simme-na .simme-na__canonical-link:hover,
body .simme-na .simme-na__canonical-link:focus,
body .simme-na .simme-na__canonical-link:active {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: auto !important;
    max-width: min(100%, 470px) !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 9px 10px 9px 18px !important;
    overflow: visible !important;
    border: 1px solid rgba(88,202,255,.48) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(ellipse at 8% 0%, rgba(36,191,255,.13), transparent 48%),
        linear-gradient(135deg, #10243a 0%, #0b192b 56%, #081321 100%) !important;
    color: #e1edfa !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        inset 16px 14px 30px rgba(36,191,255,.025),
        0 10px 24px rgba(0,0,0,.16) !important;
    font-size: 13px !important;
    font-weight: 720 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    text-decoration: none !important;
    text-shadow: none !important;
    transform: none !important;
    transition:
        border-color .2s ease,
        box-shadow .24s ease,
        background .24s ease,
        color .2s ease !important;
}

body .simme-na .simme-na__canonical-link::before {
    position: absolute;
    z-index: -1;
    left: 10%;
    right: 10%;
    bottom: -13px;
    height: 25px;
    content: "";
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(245,214,109,.20), rgba(245,214,109,.07) 44%, transparent 74%);
    filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .24s ease;
    transform: scale(.84);
}

body .simme-na .simme-na__canonical-link:hover,
body .simme-na .simme-na__canonical-link:focus-visible {
    border-color: rgba(143,217,255,.78) !important;
    color: #ffffff !important;
    background:
        radial-gradient(ellipse at 8% 0%, rgba(36,191,255,.19), transparent 50%),
        linear-gradient(135deg, #132b45 0%, #0c1d31 56%, #081321 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.075),
        0 0 16px rgba(36,191,255,.14),
        0 12px 26px rgba(0,0,0,.18) !important;
}

body .simme-na .simme-na__canonical-link:hover::before,
body .simme-na .simme-na__canonical-link:focus-visible::before {
    opacity: .78;
    transform: scale(1);
}

.simme-na__canonical-label {
    min-width: 0;
    flex: 1 1 auto;
}

.simme-na__canonical-icon {
    position: relative;
    display: block;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(143,217,255,.34);
    border-radius: 13px;
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,.14), transparent 30%),
        rgba(36,191,255,.08);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 14px rgba(36,191,255,.08);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

body .simme-na .simme-na__canonical-link:hover .simme-na__canonical-icon,
body .simme-na .simme-na__canonical-link:focus-visible .simme-na__canonical-icon {
    border-color: rgba(143,217,255,.68);
    background: rgba(36,191,255,.14);
    box-shadow: 0 0 16px rgba(36,191,255,.15);
}

/* CSS-drawn 'open' symbol: a clean page corner + outward movement mark. */
.simme-na__canonical-icon--open::before,
.simme-na__canonical-icon--open::after,
.simme-na__canonical-icon--open > span::before,
.simme-na__canonical-icon--open > span::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.simme-na__canonical-icon--open::before {
    left: 10px;
    bottom: 9px;
    width: 14px;
    height: 14px;
    border: 1.7px solid #8fd9ff;
    border-top-color: transparent;
    border-right-color: transparent;
    border-radius: 3px;
}

.simme-na__canonical-icon--open::after {
    right: 9px;
    top: 9px;
    width: 13px;
    height: 13px;
    border-top: 1.8px solid #e1edfa;
    border-right: 1.8px solid #e1edfa;
}

.simme-na__canonical-icon--open > span::before {
    left: 16px;
    top: 20px;
    width: 15px;
    height: 1.8px;
    border-radius: 2px;
    background: #e1edfa;
    transform: rotate(-45deg);
    transform-origin: center;
}

.simme-na__canonical-icon--open > span::after {
    right: 8px;
    top: 8px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #24bfff;
    box-shadow: 0 0 8px rgba(36,191,255,.6);
}

/* Atlas symbol: four connected Node points rather than another arrow. */
.simme-na__canonical-icon--atlas::before {
    position: absolute;
    inset: 9px;
    content: "";
    border: 1px solid rgba(143,217,255,.48);
    border-radius: 8px;
    transform: rotate(45deg) scale(.75);
}

.simme-na__canonical-icon--atlas::after {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    content: "";
    border-radius: 50%;
    background: #e1edfa;
    box-shadow:
        -9px 0 0 #24bfff,
        9px 0 0 #8fd9ff,
        0 -9px 0 #d84bff,
        0 9px 0 #f5d66d,
        0 0 10px rgba(36,191,255,.34);
    transform: translate(-50%,-50%);
}

/* Light mode keeps the action premium instead of reverting to the previous
   bright cyan slab with black copy. */
.simme-na[data-theme="light"] .simme-na__canonical-link,
.simme-na[data-theme="light"] .simme-na__canonical-link:link,
.simme-na[data-theme="light"] .simme-na__canonical-link:visited {
    border-color: rgba(38,148,212,.38) !important;
    background:
        radial-gradient(ellipse at 7% 0%, rgba(36,191,255,.10), transparent 48%),
        linear-gradient(135deg, #ffffff 0%, #f5faff 62%, #edf6fd 100%) !important;
    color: #102033 !important;
    box-shadow:
        inset 0 1px 0 #ffffff,
        0 10px 24px rgba(31,77,112,.09) !important;
}

.simme-na[data-theme="light"] .simme-na__canonical-link:hover,
.simme-na[data-theme="light"] .simme-na__canonical-link:focus-visible {
    border-color: rgba(36,191,255,.64) !important;
    color: #0c1b2d !important;
    background:
        radial-gradient(ellipse at 7% 0%, rgba(36,191,255,.15), transparent 50%),
        linear-gradient(135deg, #ffffff 0%, #f0f8ff 58%, #e9f5fd 100%) !important;
    box-shadow:
        inset 0 1px 0 #ffffff,
        0 0 14px rgba(36,191,255,.10),
        0 12px 26px rgba(31,77,112,.10) !important;
}

.simme-na[data-theme="light"] .simme-na__canonical-icon {
    border-color: rgba(36,124,255,.24);
    background: rgba(36,191,255,.07);
}

.simme-na[data-theme="light"] .simme-na__canonical-icon--open::after {
    border-color: #1e5f91 !important;
    background: transparent !important;
}

.simme-na[data-theme="light"] .simme-na__canonical-icon--open > span::before {
    background: #1e5f91 !important;
}

@media (max-width: 700px) {
    body .simme-na .simme-na__canonical-link,
    body .simme-na .simme-na__canonical-link:link,
    body .simme-na .simme-na__canonical-link:visited,
    body .simme-na .simme-na__canonical-link:hover,
    body .simme-na .simme-na__canonical-link:focus,
    body .simme-na .simme-na__canonical-link:active {
        width: 100% !important;
        max-width: none !important;
        min-height: 56px !important;
        padding-left: 15px !important;
        font-size: 12px !important;
    }

    .simme-na__canonical-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }
}


/* =========================================================
   SYMSOUL NODE ATLAS V4.0 — LIVE SPHERE ORBIT + PURPOSEFUL
   FOCUS/ATLAS ACTIONS
   2026-08-13

   This block intentionally overrides the earlier V3.8/V3.9 orbit and
   canonical-link experiments without changing any non-Atlas styling.
   ========================================================= */

/* ---------------------------------------------------------------------
   1. LIVE ORBIT: STATIC PATHS, JAVASCRIPT-MOVED SPHERES
   --------------------------------------------------------------------- */

.simme-na.simme-na--orbit-live .simme-na__orbit {
    overflow: visible !important;
}

.simme-na.simme-na--orbit-live .simme-na__orbit-ring,
.simme-na.simme-na--orbit-live .simme-na__orbit-ring--one,
.simme-na.simme-na--orbit-live .simme-na__orbit-ring--two,
.simme-na.simme-na--orbit-live .simme-na__orbit-ring--three {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    animation: none !important;
    pointer-events: none;
}

.simme-na.simme-na--orbit-live .simme-na__orbit-ring::before {
    position: absolute;
    left: 50%;
    top: 50%;
    content: "";
    border: 1px solid rgba(143,217,255,.17);
    border-radius: 50%;
    box-shadow: inset 0 0 10px rgba(36,191,255,.018);
    transform-origin: 50% 50%;
    pointer-events: none;
}

.simme-na.simme-na--orbit-live .simme-na__orbit-ring--one::before {
    width: 68px;
    height: 36px;
    border-color: rgba(143,217,255,.20);
    transform: translate(-50%,-50%) rotate(-18deg);
}

.simme-na.simme-na--orbit-live .simme-na__orbit-ring--two::before {
    width: 90px;
    height: 54px;
    border-color: rgba(216,75,255,.16);
    transform: translate(-50%,-50%) rotate(51deg);
}

.simme-na.simme-na--orbit-live .simme-na__orbit-ring--three::before {
    width: 100px;
    height: 74px;
    border-color: rgba(245,214,109,.13);
    transform: translate(-50%,-50%) rotate(-39deg);
}

.simme-na.simme-na--orbit-live .simme-na__orbit-ring i {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    animation: none !important;
    transition: none !important;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}

/* Make the balls read as tiny illuminated Node bodies rather than flat dots. */
.simme-na.simme-na--orbit-live .simme-na__orbit-ring i::after {
    position: absolute;
    left: 22%;
    top: 16%;
    width: 27%;
    height: 27%;
    content: "";
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    filter: blur(.2px);
    opacity: .82;
    pointer-events: none;
}

/* ---------------------------------------------------------------------
   2. PURPOSEFUL ACTION CONTROL — FOCUS VIEW
   --------------------------------------------------------------------- */

body .simme-na .simme-na__canonical-link,
body .simme-na .simme-na__canonical-link:link,
body .simme-na .simme-na__canonical-link:visited,
body .simme-na .simme-na__canonical-link:hover,
body .simme-na .simme-na__canonical-link:focus,
body .simme-na .simme-na__canonical-link:active {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 13px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 66px !important;
    margin: 0 !important;
    padding: 10px 15px !important;
    overflow: visible !important;
    border: 1px solid rgba(93,196,242,.34) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(ellipse at 10% 0%, rgba(36,191,255,.10), transparent 48%),
        linear-gradient(135deg, #0c1a29 0%, #0a1522 68%, #08111c 100%) !important;
    color: #e1edfa !important;
    -webkit-text-fill-color: #e1edfa !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        inset 0 0 22px rgba(36,191,255,.025),
        0 10px 24px rgba(0,0,0,.16) !important;
    transform: none !important;
    isolation: isolate;
    transition: border-color .22s ease, background .22s ease, box-shadow .25s ease !important;
}

body .simme-na .simme-na__canonical-link::before {
    position: absolute;
    z-index: -1;
    left: 7%;
    right: 7%;
    bottom: -12px;
    height: 28px;
    content: "";
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(245,214,109,.24), rgba(245,214,109,.09) 42%, transparent 76%);
    filter: blur(8px);
    opacity: 0;
    transform: scale(.84);
    pointer-events: none;
    transition: opacity .22s ease, transform .25s ease;
}

body .simme-na .simme-na__canonical-link:hover,
body .simme-na .simme-na__canonical-link:focus-visible {
    border-color: rgba(143,217,255,.72) !important;
    background:
        radial-gradient(ellipse at 11% 0%, rgba(36,191,255,.15), transparent 50%),
        linear-gradient(135deg, #0e2032 0%, #0a1725 68%, #08131f 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.065),
        inset 0 0 24px rgba(36,191,255,.04),
        0 0 16px rgba(36,191,255,.09),
        0 12px 26px rgba(0,0,0,.2) !important;
}

body .simme-na .simme-na__canonical-link:hover::before,
body .simme-na .simme-na__canonical-link:focus-visible::before {
    opacity: .82;
    transform: scale(1);
}

body .simme-na .simme-na__canonical-copy {
    display: grid !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 3px !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

body .simme-na .simme-na__canonical-label {
    display: block !important;
    min-width: 0 !important;
    color: #e1edfa !important;
    -webkit-text-fill-color: #e1edfa !important;
    font-size: 13px !important;
    font-weight: 760 !important;
    line-height: 1.25 !important;
    letter-spacing: .005em !important;
}

body .simme-na .simme-na__canonical-copy small {
    display: block !important;
    color: #94a9c2 !important;
    -webkit-text-fill-color: #94a9c2 !important;
    font-size: 10px !important;
    font-weight: 560 !important;
    line-height: 1.25 !important;
    letter-spacing: .015em !important;
}

body .simme-na .simme-na__canonical-link:hover .simme-na__canonical-label,
body .simme-na .simme-na__canonical-link:focus-visible .simme-na__canonical-label {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Purpose icon: a Node reading page, not an external-link arrow. */
.simme-na__canonical-icon,
.simme-na__canonical-icon--read {
    position: relative !important;
    display: block !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid rgba(143,217,255,.28) !important;
    border-radius: 14px !important;
    background: rgba(36,191,255,.055) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 14px rgba(36,191,255,.055) !important;
}

.simme-na__canonical-icon--read::before {
    position: absolute;
    left: 12px;
    top: 8px;
    width: 19px;
    height: 26px;
    content: "";
    border: 1.6px solid #8fd9ff;
    border-radius: 4px;
    background: rgba(4,16,27,.48);
    box-shadow: inset 0 0 8px rgba(36,191,255,.06);
}

.simme-na__canonical-icon--read::after {
    position: absolute;
    left: 17px;
    top: 13px;
    width: 5px;
    height: 5px;
    content: "";
    border-radius: 50%;
    background: #24bfff;
    box-shadow: 0 0 7px rgba(36,191,255,.75);
}

.simme-na__canonical-icon--read > span::before,
.simme-na__canonical-icon--read > span::after {
    position: absolute;
    left: 17px;
    content: "";
    height: 1.5px;
    border-radius: 999px;
    background: #dff6ff;
    opacity: .92;
}

.simme-na__canonical-icon--read > span::before {
    top: 23px;
    width: 10px;
    box-shadow: 0 5px 0 rgba(223,246,255,.72);
}

.simme-na__canonical-icon--read > span::after {
    right: 8px;
    left: auto;
    bottom: 8px;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #f5d66d;
    border-bottom: 1.5px solid #f5d66d;
    border-radius: 0 0 3px 0;
    background: transparent;
    opacity: .76;
}

/* Atlas icon: connected Nodes/orbits, purpose-specific to returning to the Atlas. */
.simme-na__canonical-icon--atlas::before {
    position: absolute !important;
    left: 9px !important;
    top: 13px !important;
    width: 24px !important;
    height: 16px !important;
    content: "" !important;
    border: 1px solid rgba(143,217,255,.54) !important;
    border-radius: 50% !important;
    transform: rotate(-14deg) !important;
}

.simme-na__canonical-icon--atlas::after {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 5px !important;
    height: 5px !important;
    content: "" !important;
    border-radius: 50% !important;
    background: #e1edfa !important;
    box-shadow:
        -10px -5px 0 #24bfff,
        10px -4px 0 #d84bff,
        -6px 8px 0 #f5d66d,
        8px 7px 0 #ff7bd9,
        0 0 9px rgba(36,191,255,.35) !important;
    transform: translate(-50%,-50%) !important;
}

.simme-na__canonical-icon--atlas > span::before {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28px;
    height: 28px;
    content: "";
    border: 1px solid rgba(216,75,255,.18);
    border-radius: 50%;
    transform: translate(-50%,-50%) rotate(50deg) scaleY(.52);
}

/* Light theme: preserve the same hierarchy and make the copy unambiguously readable. */
.simme-na[data-theme="light"] .simme-na__canonical-link,
.simme-na[data-theme="light"] .simme-na__canonical-link:link,
.simme-na[data-theme="light"] .simme-na__canonical-link:visited {
    border-color: rgba(38,148,212,.34) !important;
    background:
        radial-gradient(ellipse at 9% 0%, rgba(36,191,255,.09), transparent 48%),
        linear-gradient(135deg, #ffffff 0%, #f6faff 72%, #eef6fc 100%) !important;
    color: #102033 !important;
    -webkit-text-fill-color: #102033 !important;
}

.simme-na[data-theme="light"] .simme-na__canonical-label {
    color: #102033 !important;
    -webkit-text-fill-color: #102033 !important;
}

.simme-na[data-theme="light"] .simme-na__canonical-copy small {
    color: #60748d !important;
    -webkit-text-fill-color: #60748d !important;
}

.simme-na[data-theme="light"] .simme-na__canonical-icon {
    border-color: rgba(38,148,212,.22) !important;
    background: rgba(36,191,255,.05) !important;
}

.simme-na[data-theme="light"] .simme-na__canonical-icon--read::before {
    background: rgba(255,255,255,.72);
    border-color: #2d8fc5;
}

@media (max-width: 700px) {
    body .simme-na .simme-na__canonical-link,
    body .simme-na .simme-na__canonical-link:link,
    body .simme-na .simme-na__canonical-link:visited,
    body .simme-na .simme-na__canonical-link:hover,
    body .simme-na .simme-na__canonical-link:focus,
    body .simme-na .simme-na__canonical-link:active {
        min-height: 62px !important;
        padding: 9px 12px !important;
        gap: 11px !important;
        border-radius: 16px !important;
    }

    .simme-na__canonical-icon,
    .simme-na__canonical-icon--read {
        flex-basis: 40px !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 13px !important;
    }

    body .simme-na .simme-na__canonical-label {
        font-size: 12px !important;
    }

    body .simme-na .simme-na__canonical-copy small {
        font-size: 9px !important;
    }
}


/* =========================================================
   SYMSOUL NODE ATLAS V4.1 — RESPONSIVE ORBIT CONTAINMENT
   2026-08-13

   Keeps every orbit path and sphere inside the 32-node panel at all
   responsive sizes. The V4.0 live animation remains; only geometry is
   normalised so compact phone/tablet orbit visuals do not use desktop
   pixel dimensions.
   ========================================================= */

/* The orbit visual owns its own contained drawing area. */
.simme-na.simme-na--orbit-live .simme-na__orbit {
    overflow: visible !important;
    contain: layout style;
}

/* Paths now scale with the rendered orbit visual rather than staying at
   desktop-only pixel dimensions. */
.simme-na.simme-na--orbit-live .simme-na__orbit-ring--one::before {
    width: 56% !important;
    height: 30% !important;
    transform: translate(-50%, -50%) rotate(-18deg) !important;
}

.simme-na.simme-na--orbit-live .simme-na__orbit-ring--two::before {
    width: 70% !important;
    height: 42% !important;
    transform: translate(-50%, -50%) rotate(51deg) !important;
}

.simme-na.simme-na--orbit-live .simme-na__orbit-ring--three::before {
    width: 80% !important;
    height: 58% !important;
    transform: translate(-50%, -50%) rotate(-39deg) !important;
}

/* Give the drawing a little safe area on compact controls. */
@media (max-width: 900px) {
    .simme-na.simme-na--orbit-live .simme-na__orbit {
        width: 82px !important;
        height: 82px !important;
        transform:
            translate3d(var(--sna-orbit-x), var(--sna-orbit-y), 0)
            rotateX(var(--sna-orbit-tilt-x))
            rotateY(var(--sna-orbit-tilt-y)) !important;
    }
}

@media (max-width: 560px) {
    .simme-na.simme-na--orbit-live .simme-na__orbit {
        width: 70px !important;
        height: 70px !important;
        transform:
            translate3d(var(--sna-orbit-x), var(--sna-orbit-y), 0)
            rotateX(var(--sna-orbit-tilt-x))
            rotateY(var(--sna-orbit-tilt-y)) !important;
    }

    .simme-na.simme-na--orbit-live .simme-na__orbit-ring i {
        width: 9px !important;
        height: 9px !important;
    }
}


/* =========================================================
   SYMSOUL NODE ATLAS V4.2 — CANVAS ORBIT RELIABILITY
   2026-08-13

   The living 32-node visual is now rendered entirely inside a responsive
   canvas. This removes cross-browser transform/overflow conflicts and hard
   clamps every orbit and sphere to the visual's own bounds.
   ========================================================= */

.simme-na .simme-na__orbit {
    position: relative !important;
    overflow: hidden !important;
    contain: layout paint style !important;
    isolation: isolate;
    border-radius: 50% !important;
    transform:
        translate3d(var(--sna-orbit-x, 0px), var(--sna-orbit-y, 0px), 0)
        rotateX(var(--sna-orbit-tilt-x, 0deg))
        rotateY(var(--sna-orbit-tilt-y, 0deg)) !important;
}

.simme-na .simme-na__orbit-canvas {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* The previous DOM-orbit elements are no longer emitted, but these guards
   prevent stale cached markup from leaking outside the panel during rollout. */
.simme-na.simme-na--orbit-canvas .simme-na__orbit-core,
.simme-na.simme-na--orbit-canvas .simme-na__orbit-ring {
    display: none !important;
}

/* Compact sizes remain explicit and bounded on small devices. */
@media (max-width: 900px) {
    .simme-na .simme-na__orbit {
        width: 82px !important;
        height: 82px !important;
        min-width: 82px !important;
        min-height: 82px !important;
    }
}

@media (max-width: 560px) {
    .simme-na .simme-na__orbit {
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;
    }
}


/* ========================================================================
   V4.6 — CLEAN STABLE ORBIT BASELINE + AMBIENT CARD LIGHT
   IMPORTANT: no .simme-na__orbit sizing, transform, canvas or JS behaviour is
   changed here. The animated light uses a separate background-only child.
   ======================================================================== */

.simme-na__count {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
}

.simme-na__count-copy,
.simme-na__orbit {
    position: relative !important;
    z-index: 3 !important;
}

.simme-na__count-ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.simme-na__count-ambient > i,
.simme-na__count-ambient > b,
.simme-na__count-ambient > em {
    position: absolute;
    display: block;
    pointer-events: none;
    font: inherit;
}

.simme-na__count-ambient > i {
    width: 80%;
    height: 150%;
    left: -30%;
    top: -28%;
    border-radius: 50%;
    background: radial-gradient(circle at 53% 48%, rgba(203,83,255,.44) 0%, rgba(128,92,255,.25) 28%, rgba(74,106,255,.09) 49%, transparent 71%);
    filter: blur(22px);
    opacity: .62;
    animation: simme-na-v46-ambient-violet 8.8s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

.simme-na__count-ambient > b {
    width: 78%;
    height: 142%;
    right: -31%;
    bottom: -25%;
    border-radius: 50%;
    background: radial-gradient(circle at 43% 50%, rgba(36,191,255,.38) 0%, rgba(72,146,255,.21) 30%, rgba(35,88,174,.07) 51%, transparent 72%);
    filter: blur(24px);
    opacity: .58;
    animation: simme-na-v46-ambient-cyan 10.8s ease-in-out infinite alternate-reverse;
    will-change: transform, opacity;
}

.simme-na__count-ambient > em {
    left: 5%;
    top: 49%;
    width: 90%;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(202,88,255,.18) 22%, rgba(222,156,255,.52) 39%, rgba(153,201,255,.58) 56%, rgba(36,191,255,.18) 76%, transparent 100%);
    filter: blur(2px);
    opacity: .38;
    animation: simme-na-v46-ambient-streak 7s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

@keyframes simme-na-v46-ambient-violet {
    0%   { transform: translate3d(-4%,-2%,0) scale(.94); opacity:.43; }
    48%  { transform: translate3d(16%,5%,0) scale(1.12); opacity:.80; }
    100% { transform: translate3d(25%,-3%,0) scale(1.02); opacity:.56; }
}

@keyframes simme-na-v46-ambient-cyan {
    0%   { transform: translate3d(6%,7%,0) scale(.95); opacity:.39; }
    52%  { transform: translate3d(-15%,-4%,0) scale(1.13); opacity:.72; }
    100% { transform: translate3d(-25%,5%,0) scale(1.03); opacity:.50; }
}

@keyframes simme-na-v46-ambient-streak {
    from { transform: translateX(-12%) scaleX(.78); opacity:.20; }
    to   { transform: translateX(13%) scaleX(1.16); opacity:.55; }
}

@media (prefers-reduced-motion: reduce) {
    .simme-na__count-ambient > i,
    .simme-na__count-ambient > b,
    .simme-na__count-ambient > em {
        animation: none !important;
    }
}

/* ========================================================================
   V4.6 — OFFICIAL INDIVIDUAL NODE SECTION ICONS
   ======================================================================== */

.simme-na__reading-section::before {
    content: none !important;
    display: none !important;
}

.simme-na__section-heading {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    min-width: 0 !important;
    margin: 0 0 18px !important;
}

.simme-na__section-heading > h2,
.simme-na__section-heading > h3 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.simme-na__section-icon-wrap {
    position: relative;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

.simme-na__section-icon-wrap::before {
    content: "";
    position: absolute;
    inset: 8px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(48,205,255,.42), rgba(48,205,255,.16) 36%, rgba(177,84,255,.08) 56%, transparent 72%);
    filter: blur(12px);
    opacity: .95;
}

.simme-na__section-icon {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: drop-shadow(0 0 13px rgba(49,194,255,.18));
}

.simme-na[data-theme="light"] .simme-na__section-icon-wrap::before {
    background: radial-gradient(circle, rgba(70,176,255,.23), rgba(70,176,255,.08) 40%, rgba(177,84,255,.05) 58%, transparent 74%);
}

@media (max-width: 700px) {
    .simme-na__section-heading { gap: 14px !important; margin-bottom: 14px !important; }
    .simme-na__section-icon-wrap,
    .simme-na__section-icon { width: 54px; height: 54px; }
    .simme-na__section-icon-wrap { flex-basis: 54px; }
}

@media (max-width: 480px) {
    .simme-na__section-heading { gap: 12px !important; }
    .simme-na__section-icon-wrap,
    .simme-na__section-icon { width: 48px; height: 48px; }
    .simme-na__section-icon-wrap { flex-basis: 48px; }
}


/* ========================================================================
   V4.7 — Animated orbit icon for the “Explore the complete Node Atlas” link
   Keeps the existing link structure, but animates the Atlas icon so the
   miniature orbit feels alive and clearly communicates the destination.
   ======================================================================== */

.simme-na__canonical-icon--atlas {
    overflow: hidden !important;
    background:
        radial-gradient(circle at 50% 48%, rgba(36,191,255,.12), rgba(36,191,255,0) 46%),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)) !important;
}

.simme-na__canonical-icon--atlas::before {
    left: 10px !important;
    top: 13px !important;
    width: 24px !important;
    height: 16px !important;
    border: 1px solid rgba(143,217,255,.5) !important;
    transform-origin: 50% 50% !important;
    animation: simmeAtlasMiniOrbitA 9.5s linear infinite;
}

.simme-na__canonical-icon--atlas::after {
    left: 50% !important;
    top: 50% !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #eaf4ff !important;
    box-shadow:
        -11px -7px 0 #24bfff,
        11px -5px 0 #d84bff,
        -8px 10px 0 #f5d66d,
        10px 9px 0 #ff7bd9,
        0 0 12px rgba(36,191,255,.35) !important;
    transform: translate(-50%,-50%) rotate(0deg) !important;
    transform-origin: 50% 50% !important;
    animation: simmeAtlasMiniOrbitNodes 6.8s linear infinite;
}

.simme-na__canonical-icon--atlas > span::before,
.simme-na__canonical-icon--atlas > span::after {
    position: absolute;
    left: 50%;
    top: 50%;
    content: "";
    border-radius: 50%;
    transform-origin: 50% 50%;
}

.simme-na__canonical-icon--atlas > span::before {
    width: 29px;
    height: 29px;
    border: 1px solid rgba(216,75,255,.2);
    transform: translate(-50%,-50%) rotate(50deg) scaleY(.54);
    animation: simmeAtlasMiniOrbitB 8.2s linear infinite reverse;
}

.simme-na__canonical-icon--atlas > span::after {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(245,214,109,.22);
    transform: translate(-50%,-50%) rotate(18deg) scaleY(.58);
    animation: simmeAtlasMiniOrbitC 5.6s linear infinite;
}

body .simme-na .simme-na__canonical-link--atlas:hover .simme-na__canonical-icon--atlas::before,
body .simme-na .simme-na__canonical-link--atlas:focus-visible .simme-na__canonical-icon--atlas::before {
    animation-duration: 7.4s;
}

body .simme-na .simme-na__canonical-link--atlas:hover .simme-na__canonical-icon--atlas::after,
body .simme-na .simme-na__canonical-link--atlas:focus-visible .simme-na__canonical-icon--atlas::after {
    animation-duration: 4.2s;
    filter: drop-shadow(0 0 9px rgba(36,191,255,.32));
}

body .simme-na .simme-na__canonical-link--atlas:hover .simme-na__canonical-icon--atlas > span::before,
body .simme-na .simme-na__canonical-link--atlas:focus-visible .simme-na__canonical-icon--atlas > span::before {
    animation-duration: 6.2s;
}

body .simme-na .simme-na__canonical-link--atlas:hover .simme-na__canonical-icon--atlas > span::after,
body .simme-na .simme-na__canonical-link--atlas:focus-visible .simme-na__canonical-icon--atlas > span::after {
    animation-duration: 4.4s;
}

.simme-na[data-theme="light"] .simme-na__canonical-icon--atlas {
    background:
        radial-gradient(circle at 50% 48%, rgba(36,191,255,.10), rgba(36,191,255,0) 44%),
        linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.2)) !important;
}

.simme-na[data-theme="light"] .simme-na__canonical-icon--atlas::before {
    border-color: rgba(73, 154, 214, .42) !important;
}

.simme-na[data-theme="light"] .simme-na__canonical-icon--atlas > span::before {
    border-color: rgba(180, 92, 232, .18) !important;
}

.simme-na[data-theme="light"] .simme-na__canonical-icon--atlas > span::after {
    border-color: rgba(226, 183, 67, .18) !important;
}

@keyframes simmeAtlasMiniOrbitA {
    from { transform: rotate(-14deg); }
    to   { transform: rotate(346deg); }
}

@keyframes simmeAtlasMiniOrbitB {
    from { transform: translate(-50%,-50%) rotate(50deg) scaleY(.54); }
    to   { transform: translate(-50%,-50%) rotate(410deg) scaleY(.54); }
}

@keyframes simmeAtlasMiniOrbitC {
    from { transform: translate(-50%,-50%) rotate(18deg) scaleY(.58); }
    to   { transform: translate(-50%,-50%) rotate(-342deg) scaleY(.58); }
}

@keyframes simmeAtlasMiniOrbitNodes {
    0%   { transform: translate(-50%,-50%) rotate(0deg) scale(1); }
    50%  { transform: translate(-50%,-50%) rotate(180deg) scale(1.03); }
    100% { transform: translate(-50%,-50%) rotate(360deg) scale(1); }
}


/* ========================================================================
   V4.8 — INDIVIDUAL NODE PAGES USE THE REAL THEMIFY/SIMME TOP BAR
   The custom Atlas top bar is retired. The actual site header is allowed to
   render unchanged, so the Node pages use the same Simme logo, menu, spacing,
   sizing and responsive behaviour as the rest of simme.co.uk.
   ======================================================================== */

/* Safety only: if a stale page cache still contains the retired custom bar,
   keep it out of view so it cannot duplicate the real site header. */
body.simme-node-atlas-detail-page .simme-node-topbar {
    display: none !important;
}

/* Do not let the Atlas theme switch alter the real site header. */
body.simme-node-atlas-detail-page #headerwrap,
body.simme-node-atlas-detail-page #header,
body.simme-node-atlas-detail-page #site-logo,
body.simme-node-atlas-detail-page .header-bar,
body.simme-node-atlas-detail-page .header-icons,
body.simme-node-atlas-detail-page .mobile-menu-module {
    color-scheme: normal;
}

/* Section anchors should clear the real sticky Simme header comfortably. */
body.simme-node-atlas-detail-page .simme-na__reading-section {
    scroll-margin-top: 120px;
}


/* ========================================================================
   V4.9 — EXACT NORMAL SIMME TOP BAR ON ALL INDIVIDUAL NODE PAGES
   Renders the same Themify Layout Part (ID 4330) used by the normal site,
   including the real Simme logo and the main-simmes-navigation burger menu.
   ======================================================================== */

body.simme-node-atlas-detail-page .simme-node-site-topbar-exact {
    position: sticky !important;
    top: 0;
    z-index: 100050 !important;
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
    padding: 0 !important;
    isolation: isolate;
    color-scheme: dark;
}

/* Keep WordPress' logged-in admin bar above the genuine site bar. */
body.admin-bar.simme-node-atlas-detail-page .simme-node-site-topbar-exact {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar.simme-node-atlas-detail-page .simme-node-site-topbar-exact {
        top: 46px !important;
    }
}

/* We deliberately use the exact Layout Part rather than the theme header on
   Node pages, because these legacy Node templates do not consistently render
   the normal header themselves. Prevent a future duplicate if the template
   setting is changed later. */
body.simme-node-atlas-detail-page #headerwrap,
body.simme-node-atlas-detail-page > #pagewrap > #headerwrap {
    display: none !important;
}

/* The V4.8 rule hid the former fallback header. It should only become visible
   inside the exact-topbar wrapper when the Themify Layout Part cannot render. */
body.simme-node-atlas-detail-page .simme-node-site-topbar-exact--fallback .simme-node-topbar {
    display: block !important;
    position: relative !important;
    top: auto !important;
}

/* The exact Layout Part should own its own dimensions/styles. Remove only
   accidental outer margins introduced by being rendered inside post content. */
body.simme-node-atlas-detail-page .simme-node-site-topbar-exact > :first-child {
    margin-top: 0 !important;
}

body.simme-node-atlas-detail-page .simme-node-site-topbar-exact > :last-child {
    margin-bottom: 0 !important;
}

/* Atlas section anchors clear the real sticky site bar plus the Node controls. */
body.simme-node-atlas-detail-page .simme-na__reading-section {
    scroll-margin-top: 170px !important;
}


/* ========================================================================
   V5.0 — STABLE LIVING ORBIT + MOVING/PULSATING CARD GLOW
   This final override deliberately does not depend on canvas or JS for the
   orbit. Three contained CSS orbit paths animate continuously in all modern
   browsers. Pointer/finger response remains a progressive enhancement.
   ======================================================================== */

/* ---------- 32-node card layout ---------- */
body .simme-na .simme-na__count {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(150px, .82fr) minmax(190px, 1.18fr) !important;
    grid-template-areas: "copy orbit" !important;
    align-items: center !important;
    gap: clamp(16px, 2.4vw, 34px) !important;
    min-height: 300px !important;
    padding: clamp(26px, 3vw, 42px) !important;
    overflow: hidden !important;
    border-radius: 34px !important;
    isolation: isolate !important;
}

body .simme-na .simme-na__count-copy {
    grid-area: copy !important;
    position: relative !important;
    z-index: 5 !important;
    align-self: center !important;
    justify-self: stretch !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: clamp(18px, 2.2vw, 28px) !important;
    border: 1px solid rgba(143,217,255,.18) !important;
    border-radius: 24px !important;
    background:
        linear-gradient(180deg, rgba(15,29,59,.56), rgba(10,21,42,.34)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 20px 48px rgba(0,0,0,.13) !important;
}

body .simme-na .simme-na__count-copy::before {
    content: "" !important;
    position: absolute !important;
    inset: -34% -26% !important;
    z-index: -1 !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(205,84,255,.50) 0%, rgba(110,111,255,.24) 34%, rgba(36,191,255,.12) 55%, transparent 73%) !important;
    filter: blur(22px) !important;
    opacity: .72 !important;
    animation: simmeV50CopyAura 6.4s ease-in-out infinite alternate !important;
    pointer-events: none !important;
}

body .simme-na .simme-na__count-copy strong {
    font-size: clamp(58px, 7vw, 88px) !important;
    line-height: .88 !important;
    letter-spacing: -.05em !important;
    color: #f1f6ff !important;
}
body .simme-na .simme-na__count-copy span {
    font-size: clamp(19px, 2vw, 27px) !important;
    line-height: 1.05 !important;
    font-weight: 760 !important;
    color: #f3f7ff !important;
}
body .simme-na .simme-na__count-copy small {
    font-size: clamp(13px, 1.3vw, 17px) !important;
    line-height: 1.38 !important;
    color: rgba(225,237,250,.83) !important;
}

/* ---------- strong moving/pulsating background light ---------- */
body .simme-na .simme-na__count-ambient {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: inherit !important;
    pointer-events: none !important;
}

body .simme-na .simme-na__count-ambient > i {
    width: 95% !important;
    height: 185% !important;
    left: -36% !important;
    top: -43% !important;
    background: radial-gradient(circle at 52% 50%, rgba(211,70,255,.68) 0%, rgba(129,84,255,.40) 28%, rgba(64,103,255,.17) 51%, transparent 73%) !important;
    filter: blur(26px) !important;
    opacity: .78 !important;
    mix-blend-mode: screen !important;
    animation: simmeV50AmbientViolet 7.6s cubic-bezier(.4,0,.2,1) infinite alternate !important;
}

body .simme-na .simme-na__count-ambient > b {
    width: 98% !important;
    height: 175% !important;
    right: -37% !important;
    bottom: -39% !important;
    background: radial-gradient(circle at 44% 50%, rgba(36,191,255,.62) 0%, rgba(50,145,255,.34) 30%, rgba(34,85,189,.14) 52%, transparent 74%) !important;
    filter: blur(28px) !important;
    opacity: .70 !important;
    mix-blend-mode: screen !important;
    animation: simmeV50AmbientCyan 9.4s cubic-bezier(.4,0,.2,1) infinite alternate-reverse !important;
}

body .simme-na .simme-na__count-ambient > em {
    left: -8% !important;
    top: 48% !important;
    width: 116% !important;
    height: 5px !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(213,71,255,.08) 12%,
        rgba(222,119,255,.48) 32%,
        rgba(187,180,255,.76) 49%,
        rgba(98,203,255,.66) 65%,
        rgba(36,191,255,.12) 86%,
        transparent 100%) !important;
    filter: blur(2.5px) !important;
    opacity: .58 !important;
    animation: simmeV50AmbientStreak 5.8s ease-in-out infinite alternate !important;
}

body .simme-na .simme-na__count::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle at 20% 44%, rgba(255,255,255,.10), transparent 23%),
        radial-gradient(circle at 76% 50%, rgba(36,191,255,.055), transparent 34%) !important;
    animation: simmeV50PanelPulse 4.8s ease-in-out infinite alternate !important;
}

/* ---------- robust CSS orbit ---------- */
body .simme-na .simme-na__orbit--css {
    --sna-css-orbit-x: 0px;
    --sna-css-orbit-y: 0px;
    --sna-css-orbit-rx: 0deg;
    --sna-css-orbit-ry: 0deg;
    grid-area: orbit !important;
    position: relative !important;
    z-index: 5 !important;
    justify-self: center !important;
    align-self: center !important;
    width: min(100%, 310px) !important;
    min-width: 190px !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    contain: paint !important;
    isolation: isolate !important;
    perspective: 800px !important;
    transform:
        translate3d(var(--sna-css-orbit-x), var(--sna-css-orbit-y), 0)
        rotateX(var(--sna-css-orbit-rx))
        rotateY(var(--sna-css-orbit-ry)) !important;
    transition: transform .22s cubic-bezier(.2,.72,.2,1) !important;
    background: radial-gradient(circle at 50% 50%, rgba(36,191,255,.10), rgba(12,36,66,.15) 34%, rgba(5,16,31,.02) 62%, transparent 72%) !important;
    box-shadow: inset 0 0 55px rgba(36,191,255,.03) !important;
}

body .simme-na .simme-na__orbit--css::before,
body .simme-na .simme-na__orbit--css::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%,-50%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}
body .simme-na .simme-na__orbit--css::before {
    width: 88% !important;
    height: 88% !important;
    border: 1px solid rgba(143,217,255,.10) !important;
}
body .simme-na .simme-na__orbit--css::after {
    width: 68% !important;
    height: 68% !important;
    background: radial-gradient(circle, rgba(36,191,255,.11), rgba(36,191,255,.025) 48%, transparent 70%) !important;
    box-shadow: 0 0 44px rgba(36,191,255,.08) !important;
}

.simme-na__orbit-halo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 46% !important;
    height: 46% !important;
    transform: translate(-50%,-50%) !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(25,103,165,.24), rgba(8,34,66,.52) 55%, rgba(3,16,32,.82) 100%) !important;
    box-shadow: 0 0 42px rgba(36,191,255,.09) !important;
    z-index: 1 !important;
}

.simme-na__orbit-ring-css {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 3 !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-radius: 50% !important;
    transform-origin: 50% 50% !important;
    will-change: transform !important;
}

.simme-na__orbit-ring-css--one {
    width: 72% !important;
    height: 39% !important;
    margin-left: -36% !important;
    margin-top: -19.5% !important;
    border-color: rgba(87,191,255,.38) !important;
    animation: simmeV50OrbitOne 7.2s linear infinite !important;
}
.simme-na__orbit-ring-css--two {
    width: 61% !important;
    height: 72% !important;
    margin-left: -30.5% !important;
    margin-top: -36% !important;
    border-color: rgba(216,75,255,.30) !important;
    animation: simmeV50OrbitTwo 9.6s linear infinite reverse !important;
}
.simme-na__orbit-ring-css--three {
    width: 79% !important;
    height: 52% !important;
    margin-left: -39.5% !important;
    margin-top: -26% !important;
    border-color: rgba(245,214,109,.24) !important;
    animation: simmeV50OrbitThree 12.4s linear infinite !important;
}

.simme-na__orbit-ball {
    position: absolute !important;
    width: clamp(10px, 4.5%, 16px) !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.78) !important;
    box-shadow: 0 0 12px currentColor, 0 0 22px color-mix(in srgb, currentColor 42%, transparent) !important;
    background:
        radial-gradient(circle at 33% 27%, rgba(255,255,255,.98) 0 12%, color-mix(in srgb, currentColor 72%, white 28%) 22%, currentColor 58%, color-mix(in srgb, currentColor 58%, black 42%) 100%) !important;
    color: #24bfff;
    transform: translate(-50%,-50%) !important;
}
.simme-na__orbit-ball--cyan { color:#24bfff !important; }
.simme-na__orbit-ball--blue { color:#37b7ff !important; }
.simme-na__orbit-ball--ice { color:#8fd9ff !important; }
.simme-na__orbit-ball--violet { color:#d84bff !important; }
.simme-na__orbit-ball--pink { color:#ff7bd9 !important; }
.simme-na__orbit-ball--gold { color:#f5d66d !important; }
.simme-na__orbit-ball--white { color:#e1edfa !important; }

/* balls positioned on their parent orbit; the ring rotation moves them */
.simme-na__orbit-ring-css--one .simme-na__orbit-ball:nth-child(1) { left: 0%; top: 50%; }
.simme-na__orbit-ring-css--one .simme-na__orbit-ball:nth-child(2) { left: 73%; top: 5%; }
.simme-na__orbit-ring-css--one .simme-na__orbit-ball:nth-child(3) { left: 100%; top: 50%; }
.simme-na__orbit-ring-css--two .simme-na__orbit-ball:nth-child(1) { left: 19%; top: 8%; }
.simme-na__orbit-ring-css--two .simme-na__orbit-ball:nth-child(2) { left: 81%; top: 92%; }
.simme-na__orbit-ring-css--three .simme-na__orbit-ball:nth-child(1) { left: 79%; top: 7%; }
.simme-na__orbit-ring-css--three .simme-na__orbit-ball:nth-child(2) { left: 21%; top: 93%; }

.simme-na__orbit-core-css {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 6 !important;
    width: clamp(12px, 7%, 22px) !important;
    aspect-ratio: 1 / 1 !important;
    transform: translate(-50%,-50%) !important;
    border-radius: 50% !important;
    background: #e1edfa !important;
    box-shadow: 0 0 14px rgba(143,217,255,.82), 0 0 32px rgba(36,191,255,.28) !important;
    animation: simmeV50CorePulse 2.8s ease-in-out infinite alternate !important;
}

@keyframes simmeV50OrbitOne {
    from { transform: rotate(-18deg); }
    to   { transform: rotate(342deg); }
}
@keyframes simmeV50OrbitTwo {
    from { transform: rotate(49deg); }
    to   { transform: rotate(409deg); }
}
@keyframes simmeV50OrbitThree {
    from { transform: rotate(-39deg); }
    to   { transform: rotate(321deg); }
}
@keyframes simmeV50CorePulse {
    from { transform: translate(-50%,-50%) scale(.92); opacity:.84; }
    to   { transform: translate(-50%,-50%) scale(1.12); opacity:1; }
}
@keyframes simmeV50CopyAura {
    from { transform: translate3d(-5%,-2%,0) scale(.92); opacity:.54; }
    to   { transform: translate3d(9%,4%,0) scale(1.10); opacity:.88; }
}
@keyframes simmeV50AmbientViolet {
    0%   { transform: translate3d(-8%,-4%,0) scale(.90); opacity:.52; }
    46%  { transform: translate3d(18%,4%,0) scale(1.16); opacity:.92; }
    100% { transform: translate3d(30%,-2%,0) scale(1.03); opacity:.65; }
}
@keyframes simmeV50AmbientCyan {
    0%   { transform: translate3d(8%,6%,0) scale(.92); opacity:.48; }
    52%  { transform: translate3d(-18%,-5%,0) scale(1.17); opacity:.84; }
    100% { transform: translate3d(-30%,5%,0) scale(1.04); opacity:.60; }
}
@keyframes simmeV50AmbientStreak {
    from { transform: translateX(-16%) scaleX(.76); opacity:.25; }
    to   { transform: translateX(16%) scaleX(1.18); opacity:.70; }
}
@keyframes simmeV50PanelPulse {
    from { opacity:.50; }
    to   { opacity:1; }
}

/* Light theme keeps the same motion, simply reduces the intensity. */
.simme-na[data-theme="light"] .simme-na__count-copy {
    background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(244,248,255,.62)) !important;
    border-color: rgba(73,156,218,.16) !important;
}
.simme-na[data-theme="light"] .simme-na__count-copy strong,
.simme-na[data-theme="light"] .simme-na__count-copy span { color:#17233a !important; }
.simme-na[data-theme="light"] .simme-na__count-copy small { color:rgba(59,77,108,.80) !important; }
.simme-na[data-theme="light"] .simme-na__count-ambient > i { opacity:.36 !important; }
.simme-na[data-theme="light"] .simme-na__count-ambient > b { opacity:.34 !important; }
.simme-na[data-theme="light"] .simme-na__count-ambient > em { opacity:.30 !important; }

/* ---------- responsive containment ---------- */
@media (max-width: 900px) {
    body .simme-na .simme-na__count {
        grid-template-columns: minmax(130px, .9fr) minmax(150px, 1.1fr) !important;
        min-height: 252px !important;
        padding: 24px !important;
        border-radius: 30px !important;
    }
    body .simme-na .simme-na__orbit--css {
        width: min(100%, 230px) !important;
        min-width: 150px !important;
        height: auto !important;
        min-height: 0 !important;
    }
}

@media (max-width: 560px) {
    body .simme-na .simme-na__count {
        grid-template-columns: 1fr !important;
        grid-template-areas: "copy" "orbit" !important;
        gap: 18px !important;
        min-height: 0 !important;
        padding: 20px !important;
        border-radius: 28px !important;
    }
    body .simme-na .simme-na__count-copy {
        width: 100% !important;
        max-width: 300px !important;
        justify-self: center !important;
        text-align: center !important;
        justify-items: center !important;
        padding: 18px !important;
        border-radius: 22px !important;
    }
    body .simme-na .simme-na__count-copy strong { font-size: 56px !important; }
    body .simme-na .simme-na__count-copy span { font-size: 19px !important; }
    body .simme-na .simme-na__count-copy small { font-size: 13px !important; }
    body .simme-na .simme-na__orbit--css {
        width: min(76vw, 240px) !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        justify-self: center !important;
    }
}

/* Reduced motion: keep the design alive, but slow it substantially rather
   than freezing it completely. */
@media (prefers-reduced-motion: reduce) {
    .simme-na__orbit-ring-css--one { animation-duration: 38s !important; }
    .simme-na__orbit-ring-css--two { animation-duration: 46s !important; }
    .simme-na__orbit-ring-css--three { animation-duration: 58s !important; }
    .simme-na__orbit-core-css { animation-duration: 8s !important; }
    body .simme-na .simme-na__count-ambient > i { animation-duration: 24s !important; }
    body .simme-na .simme-na__count-ambient > b { animation-duration: 30s !important; }
    body .simme-na .simme-na__count-ambient > em { animation-duration: 20s !important; }
}


/* ========================================================================
   V5.1 — INLINE SVG ORBIT FAILSAFE
   The V5.0 CSS orbit spheres were being suppressed on the live site by a
   theme/browser interaction. V5.1 draws the complete orbit as inline SVG.
   SVG keeps every path and sphere visible, scalable and physically contained,
   while the existing pointer/finger wrapper transform remains untouched.
   ======================================================================== */

body .simme-na .simme-na__orbit--svg {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 50% 50%, rgba(36,191,255,.11), rgba(12,36,66,.15) 36%, rgba(5,16,31,.02) 64%, transparent 73%) !important;
}

body .simme-na .simme-na__orbit--svg::before,
body .simme-na .simme-na__orbit--svg::after {
    display: none !important;
    content: none !important;
}

.simme-na__orbit-svg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    overflow: visible !important;
}

.simme-na__svg-orbit,
.simme-na__svg-orbit-core,
.simme-na__svg-orbit-core-halo {
    transform-box: view-box;
    transform-origin: 120px 120px;
}

.simme-na__svg-orbit-core-halo {
    opacity: .72;
}

/* We intentionally use SVG/SMIL for the actual orbit rotation because it is
   independent of page CSS animation resets and remains stable in current
   Safari, Chrome, Edge and Firefox. If animation is unavailable the complete
   orbit remains visible as a static fallback. */

@media (prefers-reduced-motion: reduce) {
    .simme-na__orbit-svg {
        opacity: .96;
    }
}


/* ========================================================================
   V5.2 — STABLE ORBIT + TRUE SIMME-STYLE NODE HEADER
   ======================================================================== */

/* ---------- exact Simme-style sticky header clone, using real logo/menu ---------- */
body.simme-node-atlas-detail-page .simme-node-site-topbar-exact { display:none !important; }
body.simme-node-atlas-detail-page .simme-node-normal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100060 !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 12px 12px, rgba(36,191,255,.055) 0 2px, transparent 2.5px) 0 0/24px 24px,
        linear-gradient(90deg,#00354a 0%,#003247 44%,#002d42 100%) !important;
    border: 0 !important;
    border-bottom: 4px solid #15c9ff !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.18) !important;
    isolation:isolate;
}
body.admin-bar.simme-node-atlas-detail-page .simme-node-normal-header { top:32px !important; }
@media(max-width:782px){body.admin-bar.simme-node-atlas-detail-page .simme-node-normal-header{top:46px !important;}}

.simme-node-normal-header__inner {
    width:min(1720px,100%);
    min-height:136px;
    margin:0 auto;
    padding:16px clamp(28px,5vw,76px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}
.simme-node-normal-header__brand,
.simme-node-normal-header__brand:hover,
.simme-node-normal-header__brand:focus,
.simme-node-normal-header__brand:visited {
    display:inline-flex !important;
    align-items:center !important;
    width:auto !important;
    max-width:min(260px,48vw) !important;
    margin:0 !important;
    padding:0 !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
    text-decoration:none !important;
}
.simme-node-normal-header__logo {
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:240px !important;
    max-height:96px !important;
    object-fit:contain !important;
    object-position:left center !important;
    margin:0 !important;
    filter:drop-shadow(0 0 12px rgba(36,191,255,.08));
}
.simme-node-normal-header__wordmark {color:#fff;font-size:28px;font-weight:750;line-height:.9}.simme-node-normal-header__wordmark small{display:block;font-size:11px;letter-spacing:.34em;margin-top:8px;font-weight:500}

body .simme-node-normal-header__burger,
body .simme-node-normal-header__burger:hover,
body .simme-node-normal-header__burger:focus,
body .simme-node-normal-header__burger:active {
    display:grid !important;
    place-content:center !important;
    gap:7px !important;
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    min-height:58px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#fff !important;
    cursor:pointer !important;
}
.simme-node-normal-header__burger span{display:block !important;width:34px !important;height:3px !important;border-radius:3px !important;background:#fff !important;transition:transform .2s ease,opacity .16s ease !important;transform-origin:center !important}
.simme-node-normal-header__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(10px) rotate(45deg) !important}.simme-node-normal-header__burger[aria-expanded="true"] span:nth-child(2){opacity:0 !important}.simme-node-normal-header__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-10px) rotate(-45deg) !important}

.simme-node-normal-header__menu {
    position:absolute !important;
    top:calc(100% + 1px) !important;
    right:clamp(18px,4vw,70px) !important;
    width:min(390px,calc(100vw - 36px)) !important;
    max-height:min(72vh,660px) !important;
    overflow:auto !important;
    padding:12px !important;
    border:1px solid rgba(67,205,255,.28) !important;
    border-radius:18px !important;
    background:linear-gradient(180deg,rgba(3,34,50,.99),rgba(3,20,33,.99)) !important;
    box-shadow:0 28px 68px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.04) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
}
.simme-node-normal-header__menu[hidden]{display:none !important}
.simme-node-normal-header__menu .simme-node-topbar__menu-list,.simme-node-normal-header__menu .simme-node-topbar__menu-list ul{display:grid !important;gap:5px !important;list-style:none !important;margin:0 !important;padding:0 !important}
.simme-node-normal-header__menu .simme-node-topbar__menu-list ul{margin:4px 0 4px 12px !important;padding-left:10px !important;border-left:1px solid rgba(90,208,255,.17) !important}
.simme-node-normal-header__menu .simme-node-topbar__menu-list li{list-style:none !important;margin:0 !important;padding:0 !important}
.simme-node-normal-header__menu .simme-node-topbar__menu-list a,
.simme-node-normal-header__menu .simme-node-topbar__menu-list a:visited{display:block !important;padding:11px 12px !important;border-radius:10px !important;color:#d8e8f5 !important;-webkit-text-fill-color:#d8e8f5 !important;text-decoration:none !important;background:transparent !important;font-size:14px !important;font-weight:600 !important;line-height:1.3 !important}
.simme-node-normal-header__menu .simme-node-topbar__menu-list a:hover,.simme-node-normal-header__menu .simme-node-topbar__menu-list a:focus-visible{background:rgba(36,191,255,.08) !important;color:#fff !important;-webkit-text-fill-color:#fff !important}

@media(max-width:700px){
    .simme-node-normal-header__inner{min-height:92px;padding:10px 18px}
    .simme-node-normal-header__logo{max-width:176px !important;max-height:68px !important}
    body .simme-node-normal-header__burger,body .simme-node-normal-header__burger:hover,body .simme-node-normal-header__burger:focus{width:48px !important;height:48px !important;min-width:48px !important;min-height:48px !important}
    .simme-node-normal-header__burger span{width:30px !important;height:2.5px !important}
}

/* ---------- V5.2 DOM orbit: visible without JS, dynamically moved with JS ---------- */
body .simme-na .simme-na__orbit--live52 {
    --sna-live-x:0px;--sna-live-y:0px;--sna-live-rx:0deg;--sna-live-ry:0deg;
    position:relative !important;
    z-index:6 !important;
    display:block !important;
    width:min(100%,300px) !important;
    min-width:170px !important;
    height:auto !important;
    aspect-ratio:1/1 !important;
    justify-self:center !important;
    align-self:center !important;
    overflow:hidden !important;
    border-radius:50% !important;
    isolation:isolate !important;
    background:radial-gradient(circle at 50% 50%,rgba(36,191,255,.12),rgba(7,27,50,.24) 42%,rgba(3,16,30,.04) 68%,transparent 74%) !important;
    transform:translate3d(var(--sna-live-x),var(--sna-live-y),0) rotateX(var(--sna-live-rx)) rotateY(var(--sna-live-ry)) !important;
    transition:transform .2s ease !important;
}
body .simme-na .simme-na__orbit--live52::before,body .simme-na .simme-na__orbit--live52::after{content:none !important;display:none !important}
.simme-na__orbit-halo52{position:absolute !important;left:50% !important;top:50% !important;width:50% !important;height:50% !important;transform:translate(-50%,-50%) !important;border-radius:50% !important;background:radial-gradient(circle,rgba(27,112,174,.32),rgba(7,34,66,.56) 58%,rgba(2,15,30,.9) 100%) !important;box-shadow:0 0 54px rgba(36,191,255,.11) !important;z-index:1 !important}
.simme-na__orbit-set52{position:absolute !important;inset:0 !important;display:block !important;z-index:3 !important;pointer-events:none !important;transform-origin:50% 50% !important}
.simme-na__orbit-set52::before{content:"" !important;position:absolute !important;left:50% !important;top:50% !important;border:1px solid rgba(143,217,255,.26) !important;border-radius:50% !important;transform:translate(-50%,-50%) !important;box-shadow:inset 0 0 12px rgba(36,191,255,.025) !important}
.simme-na__orbit-set52--one::before{width:64% !important;height:34% !important;transform:translate(-50%,-50%) rotate(-18deg) !important;border-color:rgba(88,202,255,.42) !important}
.simme-na__orbit-set52--two::before{width:58% !important;height:72% !important;transform:translate(-50%,-50%) rotate(51deg) !important;border-color:rgba(216,75,255,.34) !important}
.simme-na__orbit-set52--three::before{width:78% !important;height:48% !important;transform:translate(-50%,-50%) rotate(-39deg) !important;border-color:rgba(245,214,109,.28) !important}
.simme-na__orbit-ball52{position:absolute !important;display:block !important;left:50% !important;top:50% !important;width:clamp(11px,5.2%,17px) !important;height:clamp(11px,5.2%,17px) !important;border-radius:50% !important;border:1px solid rgba(255,255,255,.88) !important;box-sizing:border-box !important;opacity:1 !important;z-index:6 !important;will-change:transform,opacity !important}
.simme-na__orbit-ball52--cyan{background:radial-gradient(circle at 30% 25%,#fff 0 10%,#b8edff 20%,#24bfff 56%,#086693 100%) !important;box-shadow:0 0 13px #24bfff,0 0 24px rgba(36,191,255,.34) !important}
.simme-na__orbit-ball52--blue{background:radial-gradient(circle at 30% 25%,#fff 0 10%,#c5efff 20%,#37b7ff 56%,#145a86 100%) !important;box-shadow:0 0 13px #37b7ff,0 0 24px rgba(55,183,255,.34) !important}
.simme-na__orbit-ball52--ice{background:radial-gradient(circle at 30% 25%,#fff 0 10%,#f0fbff 20%,#8fd9ff 56%,#4c8da9 100%) !important;box-shadow:0 0 13px #8fd9ff,0 0 24px rgba(143,217,255,.34) !important}
.simme-na__orbit-ball52--violet{background:radial-gradient(circle at 30% 25%,#fff 0 10%,#f4c8ff 20%,#d84bff 56%,#70218e 100%) !important;box-shadow:0 0 13px #d84bff,0 0 24px rgba(216,75,255,.34) !important}
.simme-na__orbit-ball52--pink{background:radial-gradient(circle at 30% 25%,#fff 0 10%,#ffd5f1 20%,#ff7bd9 56%,#983d7e 100%) !important;box-shadow:0 0 13px #ff7bd9,0 0 24px rgba(255,123,217,.34) !important}
.simme-na__orbit-ball52--gold{background:radial-gradient(circle at 30% 25%,#fff 0 10%,#fff2b0 20%,#f5d66d 56%,#967424 100%) !important;box-shadow:0 0 13px #f5d66d,0 0 24px rgba(245,214,109,.34) !important}
.simme-na__orbit-ball52--white{background:radial-gradient(circle at 30% 25%,#fff 0 16%,#f7fbff 26%,#e1edfa 60%,#839ab0 100%) !important;box-shadow:0 0 13px #e1edfa,0 0 24px rgba(225,237,250,.30) !important}
.simme-na__orbit-core52{position:absolute !important;left:50% !important;top:50% !important;width:clamp(13px,7%,22px) !important;height:clamp(13px,7%,22px) !important;transform:translate(-50%,-50%) !important;border-radius:50% !important;background:#e1edfa !important;box-shadow:0 0 16px rgba(143,217,255,.88),0 0 34px rgba(36,191,255,.34) !important;z-index:8 !important;animation:simmeV52CorePulse 2.7s ease-in-out infinite alternate !important}
@keyframes simmeV52CorePulse{from{transform:translate(-50%,-50%) scale(.94);opacity:.88}to{transform:translate(-50%,-50%) scale(1.08);opacity:1}}

/* Visible CSS fallback if JS is blocked. */
.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--one{animation:simmeV52FallbackA 7.2s linear infinite !important}.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--two{animation:simmeV52FallbackB 9.6s linear infinite reverse !important}.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--three{animation:simmeV52FallbackC 12.4s linear infinite !important}
.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--one .simme-na__orbit-ball52:nth-child(1){transform:translate(-50%,-50%) translate(-31%,0)}
.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--one .simme-na__orbit-ball52:nth-child(2){transform:translate(-50%,-50%) translate(22%,-14%)}
.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--one .simme-na__orbit-ball52:nth-child(3){transform:translate(-50%,-50%) translate(31%,0)}
@keyframes simmeV52FallbackA{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes simmeV52FallbackB{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes simmeV52FallbackC{from{transform:rotate(0)}to{transform:rotate(360deg)}}

@media(max-width:700px){body .simme-na .simme-na__orbit--live52{min-width:150px !important;width:min(100%,240px) !important}}


/* V5.2 fallback sphere positions — visible even before/without JS. */
.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--one .simme-na__orbit-ball52:nth-child(1){left:18% !important;top:50% !important;transform:translate(-50%,-50%) !important}
.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--one .simme-na__orbit-ball52:nth-child(2){left:66% !important;top:32% !important;transform:translate(-50%,-50%) !important}
.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--one .simme-na__orbit-ball52:nth-child(3){left:82% !important;top:50% !important;transform:translate(-50%,-50%) !important}
.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--two .simme-na__orbit-ball52:nth-child(1){left:39% !important;top:20% !important;transform:translate(-50%,-50%) !important}
.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--two .simme-na__orbit-ball52:nth-child(2){left:64% !important;top:79% !important;transform:translate(-50%,-50%) !important}
.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--three .simme-na__orbit-ball52:nth-child(1){left:72% !important;top:31% !important;transform:translate(-50%,-50%) !important}
.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--three .simme-na__orbit-ball52:nth-child(2){left:29% !important;top:70% !important;transform:translate(-50%,-50%) !important}


/* ========================================================================
   V5.3 — RESTORE THE GOOD ORBIT VISUAL + MATCH THE HOME-PAGE STICKY BAR
   Unique class names deliberately avoid all accumulated V3/V4/V5 orbit/header
   experiments. The ambient card glow from V5.0+ remains intact.
   ======================================================================== */

/* Retire every previous custom/exact Node header implementation. */
body.simme-node-atlas-detail-page .simme-node-normal-header,
body.simme-node-atlas-detail-page .simme-node-site-topbar-exact,
body.simme-node-atlas-detail-page .simme-node-topbar {
    display: none !important;
}

/* HOME-PAGE MATCHED STICKY BAR */
body.simme-node-atlas-detail-page .simme-node-homebar53 {
    position: sticky !important;
    top: 0 !important;
    z-index: 100080 !important;
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
    color-scheme: dark !important;
    background:
        radial-gradient(circle at 18px 18px, rgba(41,192,235,.075) 0 2px, transparent 2.6px) 0 0 / 39px 39px,
        linear-gradient(90deg, #00374c 0%, #003448 48%, #002f43 100%) !important;
    border: 0 !important;
    border-bottom: 3px solid #11c8ff !important;
    box-shadow: 0 8px 26px rgba(0,0,0,.16) !important;
}
body.admin-bar.simme-node-atlas-detail-page .simme-node-homebar53 { top: 32px !important; }
@media (max-width:782px){ body.admin-bar.simme-node-atlas-detail-page .simme-node-homebar53 { top:46px !important; } }

.simme-node-homebar53__inner {
    min-height: 138px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 clamp(54px,4.7vw,98px) 0 clamp(76px,9.9vw,205px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
}
.simme-node-homebar53__brand,
.simme-node-homebar53__brand:hover,
.simme-node-homebar53__brand:focus,
.simme-node-homebar53__brand:visited {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: 300px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.simme-node-homebar53__logo {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 245px !important;
    max-height: 104px !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin: 0 !important;
}
.simme-node-homebar53__fallback {
    display:inline-flex !important;
    flex-direction:column !important;
    color:#fff !important;
    font-size:31px !important;
    font-weight:700 !important;
    line-height:.8 !important;
}
.simme-node-homebar53__fallback small { margin-top:10px; font-size:11px; letter-spacing:.32em; font-weight:500; }

body .simme-node-homebar53__burger,
body .simme-node-homebar53__burger:hover,
body .simme-node-homebar53__burger:focus,
body .simme-node-homebar53__burger:active {
    display: grid !important;
    place-content: center !important;
    gap: 7px !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    cursor: pointer !important;
}
.simme-node-homebar53__burger span {
    display:block !important;
    width:34px !important;
    height:3px !important;
    border-radius:2px !important;
    background:#fff !important;
    transition:transform .2s ease,opacity .16s ease !important;
    transform-origin:center !important;
}
.simme-node-homebar53__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(10px) rotate(45deg)!important}
.simme-node-homebar53__burger[aria-expanded="true"] span:nth-child(2){opacity:0!important}
.simme-node-homebar53__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-10px) rotate(-45deg)!important}

.simme-node-homebar53__menu {
    position: absolute !important;
    top: calc(100% + 1px) !important;
    right: clamp(24px,4.7vw,98px) !important;
    width: min(390px, calc(100vw - 36px)) !important;
    max-height: min(72vh,660px) !important;
    overflow: auto !important;
    padding: 12px !important;
    border: 1px solid rgba(82,202,245,.28) !important;
    border-radius: 17px !important;
    background: linear-gradient(180deg,rgba(3,43,59,.995),rgba(3,24,38,.995)) !important;
    box-shadow: 0 28px 68px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.04) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}
.simme-node-homebar53__menu[hidden]{display:none!important}
.simme-node-homebar53__menu .simme-node-topbar__menu-list,
.simme-node-homebar53__menu .simme-node-topbar__menu-list ul { display:grid!important; gap:5px!important; list-style:none!important; margin:0!important; padding:0!important; }
.simme-node-homebar53__menu .simme-node-topbar__menu-list ul { margin:4px 0 4px 12px!important; padding-left:10px!important; border-left:1px solid rgba(90,208,255,.17)!important; }
.simme-node-homebar53__menu .simme-node-topbar__menu-list li { list-style:none!important; margin:0!important; padding:0!important; }
.simme-node-homebar53__menu .simme-node-topbar__menu-list a,
.simme-node-homebar53__menu .simme-node-topbar__menu-list a:visited { display:block!important; padding:11px 12px!important; border-radius:10px!important; color:#d8e8f5!important; -webkit-text-fill-color:#d8e8f5!important; text-decoration:none!important; background:transparent!important; font-size:14px!important; font-weight:600!important; line-height:1.3!important; }
.simme-node-homebar53__menu .simme-node-topbar__menu-list a:hover,
.simme-node-homebar53__menu .simme-node-topbar__menu-list a:focus-visible { background:rgba(36,191,255,.08)!important; color:#fff!important; -webkit-text-fill-color:#fff!important; }

@media(max-width:700px){
    .simme-node-homebar53__inner { min-height:92px!important; padding:0 18px!important; }
    .simme-node-homebar53__logo { max-width:185px!important; max-height:72px!important; }
    body .simme-node-homebar53__burger,body .simme-node-homebar53__burger:hover,body .simme-node-homebar53__burger:focus { width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important; }
    .simme-node-homebar53__burger span { width:30px!important;height:2.5px!important; }
    .simme-node-homebar53__menu { right:18px!important; }
}

/* RESTORED V4.0-STYLE ORBIT, ISOLATED UNDER V5.3 NAMES */
.simme-na__count {
    grid-template-columns: minmax(0,1fr) minmax(180px,44%) !important;
    align-items:center !important;
    gap:clamp(16px,2.2vw,30px) !important;
    overflow:hidden !important;
}

.simme-na53-orbit {
    position:relative !important;
    z-index:8 !important;
    display:block !important;
    width:min(100%,300px) !important;
    aspect-ratio:1/1 !important;
    justify-self:center !important;
    overflow:hidden !important;
    border-radius:50% !important;
    contain:layout paint !important;
    isolation:isolate !important;
    touch-action:pan-y !important;
}
.simme-na53-orbit::before,
.simme-na53-orbit::after {
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}
.simme-na53-orbit::before {
    inset:28%;
    z-index:0;
    background:radial-gradient(circle,rgba(225,237,250,.86) 0 8%,rgba(143,217,255,.30) 18%,rgba(36,191,255,.09) 46%,transparent 73%);
    box-shadow:0 0 20px rgba(36,191,255,.20),0 0 52px rgba(36,191,255,.08);
    animation:simmeNA53CoreBreath 3.9s ease-in-out infinite;
}
.simme-na53-orbit::after {
    inset:5%;
    z-index:0;
    border:1px solid rgba(143,217,255,.10);
    box-shadow:inset 0 0 26px rgba(36,191,255,.035);
}
.simme-na53-orbit__halo {
    position:absolute;
    inset:19%;
    z-index:0;
    border-radius:50%;
    background:radial-gradient(circle at 50% 50%,rgba(36,191,255,.07),rgba(36,191,255,0) 68%);
}
.simme-na53-orbit__ring {
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    z-index:1 !important;
    display:block !important;
    border:1px solid rgba(143,217,255,.20) !important;
    border-radius:50% !important;
    box-shadow:inset 0 0 12px rgba(36,191,255,.025) !important;
    transform-origin:center !important;
    pointer-events:none !important;
}
.simme-na53-orbit__ring--one { width:68%;height:36%;transform:translate(-50%,-50%) rotate(-18deg)!important;border-color:rgba(143,217,255,.24)!important; }
.simme-na53-orbit__ring--two { width:58%;height:68%;transform:translate(-50%,-50%) rotate(51deg)!important;border-color:rgba(216,75,255,.19)!important; }
.simme-na53-orbit__ring--three{ width:78%;height:46%;transform:translate(-50%,-50%) rotate(-39deg)!important;border-color:rgba(245,214,109,.15)!important; }
.simme-na53-orbit__core {
    position:absolute;
    z-index:9;
    left:50%;top:50%;
    width:12px;height:12px;
    border-radius:50%;
    transform:translate(-50%,-50%);
    background:#e1edfa;
    box-shadow:0 0 5px rgba(255,255,255,.9),0 0 15px rgba(143,217,255,.95),0 0 34px rgba(36,191,255,.58);
}
.simme-na53-orbit__ball {
    --orb:#24bfff;--orb-glow:rgba(36,191,255,.65);
    position:absolute !important;
    left:0;top:0;
    z-index:5;
    width:14px !important;height:14px !important;
    margin:0 !important;
    border:1px solid rgba(255,255,255,.72) !important;
    border-radius:50% !important;
    background:radial-gradient(circle at 29% 24%,#fff 0 10%,rgba(255,255,255,.92) 11%,var(--orb) 35% 67%,rgba(0,18,29,.92) 100%) !important;
    box-shadow:inset 1px 1px 2px rgba(255,255,255,.48),inset -2px -2px 3px rgba(0,18,29,.40),0 0 7px var(--orb-glow),0 0 18px var(--orb-glow) !important;
    will-change:transform,opacity;
    pointer-events:none;
}
.simme-na53-orbit__ball::after {
    content:"";position:absolute;left:22%;top:15%;width:28%;height:28%;border-radius:50%;background:rgba(255,255,255,.95);opacity:.84;
}
.simme-na53-orbit__ball--cyan{--orb:#24bfff;--orb-glow:rgba(36,191,255,.66)}
.simme-na53-orbit__ball--blue{--orb:#37b7ff;--orb-glow:rgba(55,183,255,.60)}
.simme-na53-orbit__ball--ice{--orb:#8fd9ff;--orb-glow:rgba(143,217,255,.62)}
.simme-na53-orbit__ball--violet{--orb:#d84bff;--orb-glow:rgba(216,75,255,.56)}
.simme-na53-orbit__ball--pink{--orb:#ff7bd9;--orb-glow:rgba(255,123,217,.54)}
.simme-na53-orbit__ball--gold{--orb:#f5d66d;--orb-glow:rgba(245,214,109,.52)}
.simme-na53-orbit__ball--white{--orb:#e1edfa;--orb-glow:rgba(225,237,250,.56)}

@keyframes simmeNA53CoreBreath { 0%,100%{opacity:.62;transform:scale(.90)}50%{opacity:1;transform:scale(1.12)} }

@media(max-width:700px){
    .simme-na__count { grid-template-columns:1fr !important; min-height:420px !important; }
    .simme-na__count-copy { justify-self:center!important; text-align:center!important; }
    .simme-na53-orbit { width:min(78vw,225px)!important; }
}
@media(max-width:430px){
    .simme-na__count { min-height:386px!important; }
    .simme-na53-orbit { width:min(72vw,190px)!important; }
    .simme-na53-orbit__ball { width:12px!important;height:12px!important; }
}

@media(prefers-reduced-motion:reduce){
    .simme-na53-orbit::before { animation-duration:9s!important; }
}


/* ========================================================================
   V5.4 — EXACT NODE-PAGE TOP BAR + RESTORED KNOWN-GOOD ORBIT MECHANISM
   ======================================================================== */

/* ---- Individual Node page header: intentionally simple and exact. ---- */
body.simme-node-atlas-detail-page .simme-node-homebar53,
body.simme-node-atlas-detail-page .simme-node-normal-header,
body.simme-node-atlas-detail-page .simme-node-site-topbar-exact,
body.simme-node-atlas-detail-page .simme-node-topbar {
    display:none !important;
}

body.simme-node-atlas-detail-page .simme-node-topbar54 {
    position:sticky !important;
    top:0 !important;
    z-index:100100 !important;
    display:block !important;
    width:100% !important;
    min-height:68px !important;
    margin:0 !important;
    padding:0 !important;
    background:#050607 !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    color-scheme:dark !important;
}
body.admin-bar.simme-node-atlas-detail-page .simme-node-topbar54{top:32px !important}
@media(max-width:782px){body.admin-bar.simme-node-atlas-detail-page .simme-node-topbar54{top:46px !important}}

.simme-node-topbar54__inner{
    width:100% !important;
    min-height:68px !important;
    margin:0 auto !important;
    padding:0 clamp(18px,3vw,44px) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:20px !important;
}
.simme-node-topbar54__brand,
.simme-node-topbar54__brand:hover,
.simme-node-topbar54__brand:focus,
.simme-node-topbar54__brand:visited{
    display:inline-flex !important;
    align-items:center !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:none !important;
    box-shadow:none !important;
    text-decoration:none !important;
}
.simme-node-topbar54__logo{
    display:block !important;
    width:auto !important;
    height:48px !important;
    max-width:190px !important;
    object-fit:contain !important;
    object-position:left center !important;
    margin:0 !important;
}
body .simme-node-topbar54__burger,
body .simme-node-topbar54__burger:hover,
body .simme-node-topbar54__burger:focus,
body .simme-node-topbar54__burger:active{
    display:grid !important;
    place-content:center !important;
    gap:5px !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    outline:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    cursor:pointer !important;
}
.simme-node-topbar54__burger span{
    display:block !important;
    width:28px !important;
    height:2px !important;
    border-radius:999px !important;
    background:#fff !important;
    transition:transform .18s ease,opacity .15s ease !important;
}
.simme-node-topbar54__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)!important}
.simme-node-topbar54__burger[aria-expanded="true"] span:nth-child(2){opacity:0!important}
.simme-node-topbar54__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)!important}

.simme-node-topbar54__menu{
    position:absolute !important;
    top:100% !important;
    right:18px !important;
    width:min(360px,calc(100vw - 36px)) !important;
    max-height:min(72vh,650px) !important;
    overflow:auto !important;
    margin:0 !important;
    padding:10px !important;
    border:0 !important;
    border-radius:0 0 14px 14px !important;
    background:#07090c !important;
    box-shadow:0 22px 48px rgba(0,0,0,.42) !important;
}
.simme-node-topbar54__menu[hidden]{display:none!important}
.simme-node-topbar54__menu .simme-node-topbar__menu-list,
.simme-node-topbar54__menu .simme-node-topbar__menu-list ul{
    display:grid !important;gap:2px !important;list-style:none !important;margin:0 !important;padding:0 !important
}
.simme-node-topbar54__menu .simme-node-topbar__menu-list ul{margin-left:12px !important;padding-left:10px !important;border-left:1px solid rgba(255,255,255,.08) !important}
.simme-node-topbar54__menu .simme-node-topbar__menu-list li{list-style:none !important;margin:0 !important;padding:0 !important}
.simme-node-topbar54__menu .simme-node-topbar__menu-list a,
.simme-node-topbar54__menu .simme-node-topbar__menu-list a:visited{
    display:block !important;padding:10px 12px !important;border-radius:8px !important;background:transparent !important;color:#eaf1f8 !important;-webkit-text-fill-color:#eaf1f8 !important;text-decoration:none !important;font-size:14px !important;line-height:1.3 !important;font-weight:600 !important
}
.simme-node-topbar54__menu .simme-node-topbar__menu-list a:hover,
.simme-node-topbar54__menu .simme-node-topbar__menu-list a:focus-visible{background:rgba(255,255,255,.07)!important;color:#fff!important;-webkit-text-fill-color:#fff!important}

@media(max-width:600px){
    body.simme-node-atlas-detail-page .simme-node-topbar54,
    .simme-node-topbar54__inner{min-height:60px !important}
    .simme-node-topbar54__inner{padding:0 14px !important}
    .simme-node-topbar54__logo{height:42px !important;max-width:165px !important}
    body .simme-node-topbar54__burger,body .simme-node-topbar54__burger:hover,body .simme-node-topbar54__burger:focus{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important}
    .simme-node-topbar54__burger span{width:26px !important}
    .simme-node-topbar54__menu{right:10px !important;width:calc(100vw - 20px) !important}
}

/* ---- Orbit: V4.0 behaviour, isolated under V5.4 names. ---- */
.simme-na__count{
    grid-template-columns:minmax(0,1fr) minmax(170px,42%) !important;
    align-items:center !important;
    gap:clamp(14px,2vw,28px) !important;
    overflow:hidden !important;
}
.simme-na54-orbit{
    position:relative !important;
    z-index:8 !important;
    display:block !important;
    width:min(100%,240px) !important;
    aspect-ratio:1 / 1 !important;
    justify-self:center !important;
    overflow:hidden !important;
    border-radius:50% !important;
    isolation:isolate !important;
    touch-action:pan-y !important;
}
.simme-na54-orbit::before,.simme-na54-orbit::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.simme-na54-orbit::before{
    inset:27%;z-index:0;
    background:radial-gradient(circle,rgba(225,237,250,.88) 0 7%,rgba(143,217,255,.34) 18%,rgba(36,191,255,.09) 46%,transparent 72%);
    box-shadow:0 0 18px rgba(36,191,255,.20),0 0 44px rgba(36,191,255,.08);
    animation:simmeNA54CoreBreath 3.8s ease-in-out infinite
}
.simme-na54-orbit::after{inset:5%;z-index:0;border:1px solid rgba(143,217,255,.10);box-shadow:inset 0 0 24px rgba(36,191,255,.03)}
.simme-na54-orbit__halo{position:absolute;inset:17%;z-index:0;border-radius:50%;background:radial-gradient(circle,rgba(36,191,255,.07),transparent 68%)}
.simme-na54-orbit__ring{position:absolute !important;left:50% !important;top:50% !important;z-index:1 !important;display:block !important;border:1px solid rgba(143,217,255,.20) !important;border-radius:50% !important;box-shadow:inset 0 0 10px rgba(36,191,255,.02) !important;transform-origin:center !important;pointer-events:none !important}
.simme-na54-orbit__ring--one{width:62%;height:32%;transform:translate(-50%,-50%) rotate(-18deg)!important;border-color:rgba(143,217,255,.24)!important}
.simme-na54-orbit__ring--two{width:80%;height:48%;transform:translate(-50%,-50%) rotate(51deg)!important;border-color:rgba(216,75,255,.18)!important}
.simme-na54-orbit__ring--three{width:86%;height:62%;transform:translate(-50%,-50%) rotate(-39deg)!important;border-color:rgba(245,214,109,.14)!important}
.simme-na54-orbit__core{position:absolute;left:50%;top:50%;z-index:10;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);background:#e1edfa;box-shadow:0 0 5px rgba(255,255,255,.95),0 0 15px rgba(143,217,255,.95),0 0 30px rgba(36,191,255,.55)}
.simme-na54-orbit__ball{
    --orb:#24bfff;--orb-glow:rgba(36,191,255,.64);
    position:absolute !important;left:50% !important;top:50% !important;right:auto !important;bottom:auto !important;z-index:5;
    width:14px !important;height:14px !important;margin:0 !important;border:1px solid rgba(255,255,255,.72) !important;border-radius:50% !important;
    background:radial-gradient(circle at 29% 24%,#fff 0 10%,rgba(255,255,255,.92) 11%,var(--orb) 35% 67%,rgba(0,18,29,.92) 100%) !important;
    box-shadow:inset 1px 1px 2px rgba(255,255,255,.48),inset -2px -2px 3px rgba(0,18,29,.40),0 0 7px var(--orb-glow),0 0 17px var(--orb-glow) !important;
    will-change:transform,opacity !important;pointer-events:none !important;transform:translate(-50%,-50%) !important
}
.simme-na54-orbit__ball::after{content:"";position:absolute;left:22%;top:15%;width:28%;height:28%;border-radius:50%;background:rgba(255,255,255,.95);opacity:.84}
.simme-na54-orbit__ball--cyan{--orb:#24bfff;--orb-glow:rgba(36,191,255,.66)}
.simme-na54-orbit__ball--blue{--orb:#37b7ff;--orb-glow:rgba(55,183,255,.60)}
.simme-na54-orbit__ball--ice{--orb:#8fd9ff;--orb-glow:rgba(143,217,255,.62)}
.simme-na54-orbit__ball--violet{--orb:#d84bff;--orb-glow:rgba(216,75,255,.56)}
.simme-na54-orbit__ball--pink{--orb:#ff7bd9;--orb-glow:rgba(255,123,217,.54)}
.simme-na54-orbit__ball--gold{--orb:#f5d66d;--orb-glow:rgba(245,214,109,.52)}
.simme-na54-orbit__ball--white{--orb:#e1edfa;--orb-glow:rgba(225,237,250,.56)}
@keyframes simmeNA54CoreBreath{0%,100%{opacity:.62;transform:scale(.90)}50%{opacity:1;transform:scale(1.12)}}

@media(max-width:700px){
    .simme-na__count{grid-template-columns:1fr !important;min-height:390px !important}
    .simme-na54-orbit{width:min(64vw,210px) !important;margin-top:4px !important}
}
@media(max-width:430px){
    .simme-na__count{min-height:350px !important}
    .simme-na54-orbit{width:min(58vw,180px) !important}
    .simme-na54-orbit__ball{width:12px !important;height:12px !important}
}


/* ========================================================================
   V5.5 — NODE PAGE TOP BAR VISIBILITY + PERMANENT OUTER BREATHING SPACE
   Targeted repair only: the orbit and Node content are intentionally untouched.
   ======================================================================== */

/* Keep the page background visible around the Node reader. */
body.simme-node-atlas-detail-page {
    background: #05090f !important;
}

/* The Node reader must never butt against the viewport or the sticky bar. */
body.simme-node-atlas-detail-page .simme-na--node-page {
    box-sizing: border-box !important;
    width: calc(100% - 40px) !important;
    max-width: none !important;
    margin: 18px auto 30px !important;
    padding: 0 !important;
}

body.simme-node-atlas-detail-page .simme-na--node-page > .simme-na__shell {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 28px !important;
}

/* The sticky header stays full-width; only the Node reader gets the outer gap. */
body.simme-node-atlas-detail-page .simme-node-topbar54 {
    box-sizing: border-box !important;
    overflow: visible !important;
}

.simme-node-topbar54__inner {
    position: relative !important;
    box-sizing: border-box !important;
    padding-right: clamp(76px, 6vw, 98px) !important;
}

/* Guarantee that the burger occupies the far-right position regardless of
   Themify/global button/grid rules. */
body.simme-node-atlas-detail-page .simme-node-topbar54__burger,
body.simme-node-atlas-detail-page .simme-node-topbar54__burger:hover,
body.simme-node-atlas-detail-page .simme-node-topbar54__burger:focus,
body.simme-node-atlas-detail-page .simme-node-topbar54__burger:active {
    position: absolute !important;
    top: 50% !important;
    right: clamp(18px, 3vw, 44px) !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 20 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    overflow: visible !important;
}

body.simme-node-atlas-detail-page .simme-node-topbar54__burger span {
    position: absolute !important;
    left: 8px !important;
    right: auto !important;
    display: block !important;
    width: 28px !important;
    height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform-origin: 50% 50% !important;
}

body.simme-node-atlas-detail-page .simme-node-topbar54__burger span:nth-child(1) {
    top: 12px !important;
}
body.simme-node-atlas-detail-page .simme-node-topbar54__burger span:nth-child(2) {
    top: 21px !important;
}
body.simme-node-atlas-detail-page .simme-node-topbar54__burger span:nth-child(3) {
    top: 30px !important;
}

body.simme-node-atlas-detail-page .simme-node-topbar54__burger[aria-expanded="true"] span:nth-child(1) {
    top: 21px !important;
    transform: rotate(45deg) !important;
}
body.simme-node-atlas-detail-page .simme-node-topbar54__burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0 !important;
}
body.simme-node-atlas-detail-page .simme-node-topbar54__burger[aria-expanded="true"] span:nth-child(3) {
    top: 21px !important;
    transform: rotate(-45deg) !important;
}

/* Keep the drop-down visually attached to the right-hand burger. */
body.simme-node-atlas-detail-page .simme-node-topbar54__menu {
    right: clamp(12px, 2.5vw, 36px) !important;
    z-index: 100120 !important;
}

@media (max-width: 782px) {
    body.simme-node-atlas-detail-page .simme-na--node-page {
        width: calc(100% - 24px) !important;
        margin: 12px auto 22px !important;
    }

    body.simme-node-atlas-detail-page .simme-na--node-page > .simme-na__shell {
        border-radius: 22px !important;
    }

    .simme-node-topbar54__inner {
        padding-right: 66px !important;
    }

    body.simme-node-atlas-detail-page .simme-node-topbar54__burger,
    body.simme-node-atlas-detail-page .simme-node-topbar54__burger:hover,
    body.simme-node-atlas-detail-page .simme-node-topbar54__burger:focus,
    body.simme-node-atlas-detail-page .simme-node-topbar54__burger:active {
        right: 12px !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    body.simme-node-atlas-detail-page .simme-node-topbar54__burger span {
        left: 7px !important;
        width: 26px !important;
    }
}

@media (max-width: 480px) {
    body.simme-node-atlas-detail-page .simme-na--node-page {
        width: calc(100% - 16px) !important;
        margin: 8px auto 18px !important;
    }

    body.simme-node-atlas-detail-page .simme-na--node-page > .simme-na__shell {
        border-radius: 18px !important;
    }
}


/* ========================================================================
   V5.6 — CSS-FIRST ORBIT: NO SCRIPT DEPENDENCY
   The seven Node spheres now travel with three independently rotating
   elliptical rings. Animation is pure CSS, so a JavaScript failure elsewhere
   on the page cannot freeze or hide the orbit. JavaScript only adds optional
   pointer/finger drift to the completed component.
   ======================================================================== */

/* Retire every older orbit implementation in the live 32-node panel. */
.simme-na__count > .simme-na54-orbit,
.simme-na__count > .simme-na53-orbit,
.simme-na__count > .simme-na__orbit,
.simme-na__count > .simme-na__orbit--css,
.simme-na__count > .simme-na__orbit--svg,
.simme-na__count > .simme-na__orbit--live52 {
    display: none !important;
}

.simme-na56-orbit {
    --sna56-x: 0px;
    --sna56-y: 0px;
    position: relative !important;
    z-index: 8 !important;
    display: block !important;
    width: min(100%, 246px) !important;
    aspect-ratio: 1 / 1 !important;
    justify-self: center !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    isolation: isolate !important;
    touch-action: pan-y !important;
    transform: translate3d(var(--sna56-x), var(--sna56-y), 0) !important;
    transition: transform .22s cubic-bezier(.2,.72,.2,1) !important;
}

.simme-na56-orbit::before,
.simme-na56-orbit::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.simme-na56-orbit::before {
    inset: 28%;
    z-index: 1;
    background: radial-gradient(circle,
        rgba(255,255,255,.96) 0 7%,
        rgba(225,237,250,.92) 8% 14%,
        rgba(143,217,255,.38) 20%,
        rgba(36,191,255,.10) 43%,
        transparent 72%);
    box-shadow: 0 0 16px rgba(143,217,255,.28), 0 0 42px rgba(36,191,255,.10);
    animation: simmeNA56CoreField 3.6s ease-in-out infinite !important;
}

.simme-na56-orbit::after {
    inset: 5%;
    z-index: 0;
    border: 1px solid rgba(143,217,255,.10);
    box-shadow: inset 0 0 26px rgba(36,191,255,.035);
}

.simme-na56-orbit__halo {
    position: absolute !important;
    inset: 16% !important;
    z-index: 0 !important;
    display: block !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(36,191,255,.075), rgba(12,49,79,.035) 52%, transparent 72%) !important;
}

.simme-na56-orbit__ring {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(143,217,255,.30) !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: inset 0 0 12px rgba(36,191,255,.025) !important;
    transform-origin: 50% 50% !important;
    pointer-events: none !important;
    will-change: transform !important;
}

.simme-na56-orbit__ring--one {
    width: 68% !important;
    height: 34% !important;
    margin-left: -34% !important;
    margin-top: -17% !important;
    border-color: rgba(88,202,255,.44) !important;
    animation: simmeNA56OrbitOne 7.6s linear infinite !important;
}

.simme-na56-orbit__ring--two {
    width: 58% !important;
    height: 76% !important;
    margin-left: -29% !important;
    margin-top: -38% !important;
    border-color: rgba(216,75,255,.34) !important;
    animation: simmeNA56OrbitTwo 10.4s linear infinite reverse !important;
}

.simme-na56-orbit__ring--three {
    width: 84% !important;
    height: 50% !important;
    margin-left: -42% !important;
    margin-top: -25% !important;
    border-color: rgba(245,214,109,.26) !important;
    animation: simmeNA56OrbitThree 13.8s linear infinite !important;
}

.simme-na56-orbit__ball {
    --orb: #24bfff;
    --orb-glow: rgba(36,191,255,.62);
    position: absolute !important;
    z-index: 6 !important;
    display: block !important;
    width: clamp(12px, 7%, 17px) !important;
    height: clamp(12px, 7%, 17px) !important;
    min-width: 12px !important;
    min-height: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.82) !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: radial-gradient(circle at 30% 24%,
        #ffffff 0 10%,
        rgba(255,255,255,.96) 11%,
        var(--orb) 38% 67%,
        rgba(4,22,34,.96) 100%) !important;
    box-shadow:
        inset 1px 1px 2px rgba(255,255,255,.46),
        inset -2px -2px 3px rgba(0,18,29,.38),
        0 0 8px var(--orb-glow),
        0 0 18px var(--orb-glow) !important;
    pointer-events: none !important;
}

.simme-na56-orbit__ball::after {
    content: "";
    position: absolute;
    left: 21%;
    top: 15%;
    width: 29%;
    height: 29%;
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    opacity: .88;
}

.simme-na56-orbit__ball--cyan   { --orb:#24bfff; --orb-glow:rgba(36,191,255,.66); }
.simme-na56-orbit__ball--blue   { --orb:#37b7ff; --orb-glow:rgba(55,183,255,.61); }
.simme-na56-orbit__ball--ice    { --orb:#8fd9ff; --orb-glow:rgba(143,217,255,.62); }
.simme-na56-orbit__ball--violet { --orb:#d84bff; --orb-glow:rgba(216,75,255,.58); }
.simme-na56-orbit__ball--pink   { --orb:#ff7bd9; --orb-glow:rgba(255,123,217,.56); }
.simme-na56-orbit__ball--gold   { --orb:#f5d66d; --orb-glow:rgba(245,214,109,.56); }
.simme-na56-orbit__ball--white  { --orb:#e1edfa; --orb-glow:rgba(225,237,250,.58); }

/* Fixed attachment points on the rotating ellipses. Because the entire ring
   rotates, every sphere continuously travels around the shared centre without
   relying on JavaScript-calculated coordinates. */
.simme-na56-orbit__ball--one-a   { left: -7px !important; top: calc(50% - 7px) !important; }
.simme-na56-orbit__ball--one-b   { right: 15% !important; top: -7px !important; }
.simme-na56-orbit__ball--one-c   { right: -7px !important; top: calc(50% - 7px) !important; }
.simme-na56-orbit__ball--two-a   { left: 8% !important; top: 12% !important; }
.simme-na56-orbit__ball--two-b   { right: 8% !important; bottom: 10% !important; }
.simme-na56-orbit__ball--three-a { right: 9% !important; top: 3% !important; }
.simme-na56-orbit__ball--three-b { left: 11% !important; bottom: 2% !important; }

.simme-na56-orbit__core {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 12 !important;
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    margin: -7px 0 0 -7px !important;
    border: 1px solid rgba(255,255,255,.9) !important;
    border-radius: 50% !important;
    background: #e1edfa !important;
    box-shadow: 0 0 6px rgba(255,255,255,.94), 0 0 17px rgba(143,217,255,.92), 0 0 34px rgba(36,191,255,.44) !important;
    animation: simmeNA56CorePulse 2.7s ease-in-out infinite !important;
}

@keyframes simmeNA56OrbitOne {
    from { transform: rotate(-18deg); }
    to   { transform: rotate(342deg); }
}
@keyframes simmeNA56OrbitTwo {
    from { transform: rotate(51deg); }
    to   { transform: rotate(411deg); }
}
@keyframes simmeNA56OrbitThree {
    from { transform: rotate(-39deg); }
    to   { transform: rotate(321deg); }
}
@keyframes simmeNA56CoreField {
    0%,100% { opacity:.62; transform:scale(.92); }
    50%     { opacity:1; transform:scale(1.10); }
}
@keyframes simmeNA56CorePulse {
    0%,100% { opacity:.80; transform:scale(.94); }
    50%     { opacity:1; transform:scale(1.10); }
}

/* Responsive layout: keep the orbit entirely visible rather than allowing it
   to run off the right-hand edge at intermediate widths. */
@media (min-width: 701px) {
    .simme-na__count {
        grid-template-columns: minmax(0, 1fr) minmax(176px, 42%) !important;
        align-items: center !important;
        gap: clamp(14px, 2vw, 28px) !important;
        overflow: hidden !important;
    }
}

@media (max-width: 700px) {
    .simme-na__count {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        min-height: 0 !important;
        padding-bottom: 22px !important;
        overflow: hidden !important;
    }
    .simme-na56-orbit {
        width: min(62vw, 210px) !important;
        min-width: 156px !important;
        margin: 6px auto 0 !important;
    }
}

@media (max-width: 430px) {
    .simme-na56-orbit {
        width: min(58vw, 182px) !important;
        min-width: 146px !important;
    }
    .simme-na56-orbit__ball {
        width: 12px !important;
        height: 12px !important;
        min-width: 12px !important;
        min-height: 12px !important;
    }
}

/* The Atlas should continue to feel alive if the operating system requests
   reduced motion, but at a deliberately much slower pace. These rules are
   later and more specific than the older global animation reset. */
@media (prefers-reduced-motion: reduce) {
    .simme-na .simme-na56-orbit__ring--one {
        animation: simmeNA56OrbitOne 38s linear infinite !important;
    }
    .simme-na .simme-na56-orbit__ring--two {
        animation: simmeNA56OrbitTwo 52s linear infinite reverse !important;
    }
    .simme-na .simme-na56-orbit__ring--three {
        animation: simmeNA56OrbitThree 66s linear infinite !important;
    }
    .simme-na .simme-na56-orbit::before {
        animation: simmeNA56CoreField 10s ease-in-out infinite !important;
    }
    .simme-na .simme-na56-orbit__core {
        animation: simmeNA56CorePulse 9s ease-in-out infinite !important;
    }
}


/* ========================================================================
   V5.7 — VERIFIED ATLAS INTERACTION + ORBIT + NODE-PAGE FRAME
   ======================================================================== */

/* --- 1. Restore the proven live-sphere orbit model with direct children. --- */
.simme-na__count > .simme-na56-orbit,
.simme-na__count > .simme-na54-orbit,
.simme-na__count > .simme-na53-orbit,
.simme-na__count > .simme-na__orbit,
.simme-na__count > .simme-na__orbit--css,
.simme-na__count > .simme-na__orbit--svg,
.simme-na__count > .simme-na__orbit--live52 { display:none !important; }

.simme-na57-orbit {
    --sna57-x:0px;
    --sna57-y:0px;
    --sna57-tilt-x:0deg;
    --sna57-tilt-y:0deg;
    position:relative !important;
    z-index:9 !important;
    display:block !important;
    width:min(100%,246px) !important;
    aspect-ratio:1/1 !important;
    justify-self:center !important;
    margin:0 auto !important;
    overflow:hidden !important;
    border-radius:50% !important;
    isolation:isolate !important;
    transform:translate3d(var(--sna57-x),var(--sna57-y),0) rotateX(var(--sna57-tilt-x)) rotateY(var(--sna57-tilt-y)) !important;
    transform-style:preserve-3d !important;
    transition:transform .20s cubic-bezier(.2,.72,.2,1) !important;
}
.simme-na57-orbit__field,
.simme-na57-orbit__path,
.simme-na57-orbit__ball,
.simme-na57-orbit__core { position:absolute !important; display:block !important; pointer-events:none !important; box-sizing:border-box !important; }
.simme-na57-orbit__field {
    inset:3% !important;
    border-radius:50% !important;
    z-index:0 !important;
    background:radial-gradient(circle at 50% 50%,rgba(36,191,255,.12),rgba(14,55,83,.035) 48%,transparent 70%) !important;
    border:1px solid rgba(143,217,255,.08) !important;
}
.simme-na57-orbit__path {
    left:50% !important; top:50% !important; z-index:1 !important;
    border:1px solid rgba(143,217,255,.19) !important;
    border-radius:50% !important;
    background:transparent !important;
    transform-origin:50% 50% !important;
}
.simme-na57-orbit__path--one { width:62% !important;height:31% !important;transform:translate(-50%,-50%) rotate(-18deg) !important;border-color:rgba(88,202,255,.30) !important; }
.simme-na57-orbit__path--two { width:53% !important;height:71% !important;transform:translate(-50%,-50%) rotate(51deg) !important;border-color:rgba(216,75,255,.20) !important; }
.simme-na57-orbit__path--three { width:77% !important;height:45% !important;transform:translate(-50%,-50%) rotate(-39deg) !important;border-color:rgba(245,214,109,.17) !important; }
.simme-na57-orbit__ball {
    --orb:#24bfff; --orb-glow:rgba(36,191,255,.65);
    left:50%; top:50%; z-index:7;
    width:clamp(12px,6.8%,17px) !important;height:clamp(12px,6.8%,17px) !important;
    margin:0 !important;padding:0 !important;
    border:1px solid rgba(255,255,255,.84) !important;border-radius:50% !important;
    background:radial-gradient(circle at 29% 23%,#fff 0 9%,rgba(255,255,255,.96) 10%,var(--orb) 36% 68%,rgba(4,22,34,.96) 100%) !important;
    box-shadow:inset 1px 1px 2px rgba(255,255,255,.42),inset -2px -2px 3px rgba(0,18,29,.34),0 0 8px var(--orb-glow),0 0 18px var(--orb-glow) !important;
    opacity:1;visibility:visible !important;will-change:transform,opacity !important;
}
.simme-na57-orbit__ball::after { content:"";position:absolute;left:20%;top:14%;width:29%;height:29%;border-radius:50%;background:rgba(255,255,255,.95);opacity:.88; }
.simme-na57-orbit__ball--cyan{--orb:#24bfff;--orb-glow:rgba(36,191,255,.67)}
.simme-na57-orbit__ball--blue{--orb:#37b7ff;--orb-glow:rgba(55,183,255,.62)}
.simme-na57-orbit__ball--ice{--orb:#8fd9ff;--orb-glow:rgba(143,217,255,.64)}
.simme-na57-orbit__ball--violet{--orb:#d84bff;--orb-glow:rgba(216,75,255,.60)}
.simme-na57-orbit__ball--pink{--orb:#ff7bd9;--orb-glow:rgba(255,123,217,.58)}
.simme-na57-orbit__ball--gold{--orb:#f5d66d;--orb-glow:rgba(245,214,109,.60)}
.simme-na57-orbit__ball--white{--orb:#e1edfa;--orb-glow:rgba(225,237,250,.62)}
/* static fallback positions before JS begins */
.simme-na57-orbit__ball:nth-of-type(5){left:22%;top:50%}.simme-na57-orbit__ball:nth-of-type(6){left:66%;top:37%}.simme-na57-orbit__ball:nth-of-type(7){left:78%;top:53%}
.simme-na57-orbit__ball:nth-of-type(8){left:37%;top:22%}.simme-na57-orbit__ball:nth-of-type(9){left:65%;top:76%}.simme-na57-orbit__ball:nth-of-type(10){left:76%;top:27%}.simme-na57-orbit__ball:nth-of-type(11){left:28%;top:72%}
.simme-na57-orbit__core { left:50% !important;top:50% !important;z-index:14 !important;width:15px !important;height:15px !important;transform:translate(-50%,-50%) !important;border:1px solid rgba(255,255,255,.92) !important;border-radius:50% !important;background:#e1edfa !important;box-shadow:0 0 7px rgba(255,255,255,.95),0 0 18px rgba(143,217,255,.95),0 0 36px rgba(36,191,255,.42) !important; }

@media(min-width:701px){.simme-na__count{grid-template-columns:minmax(0,1fr) minmax(176px,42%) !important;align-items:center !important;gap:clamp(14px,2vw,28px) !important;overflow:hidden !important}}
@media(max-width:700px){.simme-na__count{grid-template-columns:1fr !important;grid-template-rows:auto auto !important;min-height:0 !important;padding-bottom:22px !important;overflow:hidden !important}.simme-na57-orbit{width:min(62vw,210px) !important;min-width:150px !important;margin:8px auto 0 !important}}
@media(max-width:430px){.simme-na57-orbit{width:min(58vw,184px) !important;min-width:144px !important}.simme-na57-orbit__ball{width:12px !important;height:12px !important}}

/* --- 2. Search/filter controls: calmer, smaller and easier to understand. --- */
.simme-na__controls { padding:clamp(18px,2.3vw,28px) !important; }
.simme-na__search-label { display:block !important;margin:0 0 10px !important;font-size:13px !important;font-weight:720 !important;letter-spacing:.015em !important;color:var(--sna-text) !important; }
body .simme-na .simme-na__search {
    width:100% !important;height:54px !important;min-height:54px !important;
    padding:0 18px !important;border:1px solid rgba(84,193,255,.42) !important;border-radius:17px !important;
    outline:0 !important;background:linear-gradient(180deg,rgba(8,22,38,.96),rgba(5,15,27,.98)) !important;
    color:#e1edfa !important;-webkit-text-fill-color:#e1edfa !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 24px rgba(36,191,255,.025),0 8px 26px rgba(0,0,0,.08) !important;
    font-size:15px !important;line-height:1 !important;transition:border-color .2s ease,box-shadow .2s ease !important;
}
body .simme-na .simme-na__search::placeholder{color:#839bb9 !important;-webkit-text-fill-color:#839bb9 !important;opacity:1 !important}
body .simme-na .simme-na__search:focus{border-color:#8fd9ff !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 3px rgba(36,191,255,.08),0 0 24px rgba(36,191,255,.11) !important}
.simme-na__filters{display:flex !important;flex-wrap:wrap !important;gap:9px !important;margin-top:14px !important;overflow:visible !important}
body .simme-na .simme-na__filter{min-height:39px !important;padding:8px 14px !important;border-radius:14px !important;font-size:11.5px !important;font-weight:670 !important;background:rgba(7,18,31,.72) !important;border:1px solid color-mix(in srgb,var(--sna-filter-accent) 24%,rgba(112,150,181,.38) 76%) !important;color:#afc0d7 !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.02) !important}
body .simme-na .simme-na__filter::after{display:none !important}
body .simme-na .simme-na__filter::before{left:12% !important;right:12% !important;bottom:-8px !important;height:18px !important;background:radial-gradient(ellipse,rgba(245,196,112,.24),rgba(245,196,112,0) 72%) !important;filter:blur(7px) !important}
body .simme-na .simme-na__filter:hover,body .simme-na .simme-na__filter:focus-visible{color:#e1edfa !important;border-color:color-mix(in srgb,var(--sna-filter-accent) 55%,rgba(112,150,181,.4) 45%) !important;background:color-mix(in srgb,#081726 92%,var(--sna-filter-accent) 8%) !important}
body .simme-na .simme-na__filter.is-active{color:#f3f8ff !important;border-color:color-mix(in srgb,var(--sna-filter-accent) 72%,white 28%) !important;background:linear-gradient(180deg,color-mix(in srgb,#0c2237 87%,var(--sna-filter-accent) 13%),#081624) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 0 18px color-mix(in srgb,var(--sna-filter-accent) 12%,transparent) !important}
.simme-na__results{margin-top:14px !important;font-size:12.5px !important;color:#8097b2 !important}

/* --- 3. Theme control: compact celestial switch, no oversized outline. --- */
body .simme-na .simme-na__theme-toggle{width:260px !important;min-height:50px !important;padding:3px !important;border:1px solid rgba(84,193,255,.34) !important;border-radius:16px !important;background:#061421 !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 24px rgba(0,0,0,.10) !important;overflow:visible !important}
.simme-na__theme-track{min-height:44px !important;border-radius:13px !important}
.simme-na__theme-thumb{top:2px !important;left:2px !important;width:calc(50% - 2px) !important;height:40px !important;border:1px solid rgba(143,217,255,.34) !important;border-radius:12px !important;background:linear-gradient(145deg,#17314c,#0e2237) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 16px rgba(36,191,255,.08),0 9px 20px rgba(0,0,0,.18) !important}
.simme-na[data-theme="light"] .simme-na__theme-thumb{background:linear-gradient(145deg,#f9fcff,#eaf3fb) !important;border-color:rgba(72,157,215,.30) !important;box-shadow:0 0 18px rgba(245,198,105,.10),0 8px 18px rgba(69,96,124,.12) !important}
.simme-na__theme-option{min-height:40px !important;font-size:12px !important;font-weight:720 !important;color:#94abc4 !important}
.simme-na[data-theme="dark"] .simme-na__theme-option--dark,.simme-na[data-theme="light"] .simme-na__theme-option--light{color:var(--sna-text) !important}
@media(max-width:700px){body .simme-na .simme-na__theme-toggle{width:100% !important;max-width:280px !important}.simme-na__filters{flex-wrap:nowrap !important;overflow-x:auto !important;overflow-y:visible !important;padding:2px 2px 10px !important;scroll-snap-type:x proximity !important;scrollbar-width:none}.simme-na__filters::-webkit-scrollbar{display:none}.simme-na__filter{flex:0 0 auto !important;scroll-snap-align:start}}

/* light-mode forms */
.simme-na[data-theme="light"] .simme-na__search{background:#fff !important;color:#142137 !important;-webkit-text-fill-color:#142137 !important;border-color:rgba(62,157,214,.26) !important;box-shadow:inset 0 1px 0 #fff,0 8px 22px rgba(68,95,123,.08) !important}
.simme-na[data-theme="light"] .simme-na__search::placeholder{color:#7d8ca4 !important;-webkit-text-fill-color:#7d8ca4 !important}
.simme-na[data-theme="light"] .simme-na__filter{background:rgba(255,255,255,.76) !important;color:#52637b !important}

/* --- 4. Individual Node pages: same luminous cyan edge as the wider Simme site. --- */
body.simme-node-atlas-detail-page{background:#050a11 !important}
body.simme-node-atlas-detail-page .simme-na--node-page{width:calc(100% - 48px) !important;margin:20px auto 32px !important;background:transparent !important}
body.simme-node-atlas-detail-page .simme-na--node-page > .simme-na__shell{
    border:1px solid rgba(55,186,239,.54) !important;
    border-radius:28px !important;
    background:radial-gradient(circle at 7% 0%,rgba(36,191,255,.055),transparent 28%),linear-gradient(180deg,#081523,#06111d) !important;
    box-shadow:inset 0 1px 0 rgba(143,217,255,.08),inset 0 0 34px rgba(36,191,255,.022),0 0 24px rgba(36,191,255,.035) !important;
    overflow:hidden !important;
}
@media(max-width:782px){body.simme-node-atlas-detail-page .simme-na--node-page{width:calc(100% - 28px) !important;margin:14px auto 24px !important}body.simme-node-atlas-detail-page .simme-na--node-page > .simme-na__shell{border-radius:23px !important}}
@media(max-width:480px){body.simme-node-atlas-detail-page .simme-na--node-page{width:calc(100% - 18px) !important;margin:10px auto 20px !important}body.simme-node-atlas-detail-page .simme-na--node-page > .simme-na__shell{border-radius:19px !important}}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V22 FRAMELESS WRAPPERS
   Removes the two large enclosing container panels so the topic
   controls and With/Without comparison cards sit directly on the
   page's black background. Individual topic buttons, colour-coded
   comparison cards, glows, VS overlap and responsive behaviour remain.
   ========================================================= */

/* The shell is structural only — never draw a visible container around it. */
.sscr__shell {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Remove the large panel surrounding the four comparison-topic buttons. */
.sscr__rail {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0 12px !important;
    margin-bottom: 4px !important;
    overflow: visible !important;
}

/* Remove the large panel surrounding the With / Without cards. */
.sscr__stage {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* Guard against an old theme/CSS layer recreating the wrappers with pseudo-elements. */
.sscr__rail::before,
.sscr__rail::after,
.sscr__stage::before,
.sscr__stage::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Keep the small label naturally aligned with the frameless controls. */
.sscr__rail-label {
    padding-inline: 2px !important;
}

/* The active-topic arrow hangs below the button, so retain a little breathing room
   without bringing back a visible enclosing rail panel. */
.sscr__rail-list {
    overflow: visible !important;
}

/* Reassert frameless spacing after all older responsive rail/stage rules. */
@media (max-width: 860px) {
    .sscr__rail {
        padding: 0 0 11px !important;
        margin-bottom: 4px !important;
    }

    .sscr__stage {
        padding: 0 !important;
    }
}

@media (max-width: 640px) {
    .sscr__rail {
        padding: 0 0 10px !important;
    }

    .sscr__stage {
        padding: 0 !important;
    }
}

@media (max-width: 420px) {
    .sscr__rail {
        padding: 0 0 9px !important;
    }

    .sscr__stage {
        padding: 0 !important;
    }
}

/* =========================================================
   SIMME — AI COMPATIBILITY RUNWAY
   Remove separator dots between logo panels
   ========================================================= */
.saic__item::after {
    display: none !important;
    content: none !important;
    background: none !important;
    box-shadow: none !important;
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON INTRO CLEANUP
   Removes the descriptive sentence beneath the comparison heading
   and closes the vertical space it occupied.
   ========================================================= */

.sscr__summary {
    display: none !important;
}

.sscr__intro {
    margin-bottom: clamp(6px, .6vw, 10px) !important;
}


/* ========================================================================
   SYMSOUL NODE ATLAS V6.0 — REFERENCE-LED HERO REDESIGN
   2026-08-13

   Scope: ONLY the top Node Atlas hero introduced by the V6.0 PHP markup.
   The existing Node directory, full-detail reader, dedicated Node pages,
   authorised Node icons, SEO/indexing and all unrelated site CSS remain intact.

   Reliability decision:
   - Orbiting spheres use native inline SVG animateMotion.
   - The animation therefore does not rely on legacy .simme-na orbit classes,
     CSS transform resets, requestAnimationFrame or interval timers.
   - Pointer/finger parallax is optional enhancement only.
   ======================================================================== */

body .simme-na .simme-na6-hero,
body .simme-na .simme-na6-hero *,
body .simme-na .simme-na6-hero *::before,
body .simme-na .simme-na6-hero *::after {
    box-sizing: border-box;
}

body .simme-na .simme-na6-hero {
    --sna6-cyan: #39c8ff;
    --sna6-blue: #2b8cff;
    --sna6-violet: #9a54ff;
    --sna6-pink: #df4fd3;
    --sna6-gold: #e8ad48;
    --sna6-ice: #dfeaff;
    --sna6-text: #f3f6ff;
    --sna6-soft: #aebbd0;
    --sna6-panel: rgba(7, 18, 34, .74);
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(300px, .82fr) minmax(540px, 1.42fr) !important;
    align-items: center !important;
    gap: clamp(40px, 5vw, 86px) !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: clamp(82px, 7vw, 104px) clamp(34px, 5vw, 78px) clamp(36px, 4.6vw, 70px) !important;
    overflow: hidden !important;
    isolation: isolate;
    color: var(--sna6-text) !important;
    background:
        radial-gradient(circle at 60% 48%, rgba(119, 64, 255, .13), transparent 31%),
        radial-gradient(circle at 90% 30%, rgba(26, 151, 255, .08), transparent 34%),
        linear-gradient(135deg, #07101f 0%, #06101d 54%, #071525 100%) !important;
    border: 1px solid rgba(94, 167, 226, .38) !important;
    border-radius: clamp(26px, 2.4vw, 38px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 26px 70px rgba(0, 0, 0, .24) !important;
}

body .simme-na .simme-na6-hero::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    pointer-events: none;
    opacity: .42;
    background-image:
        radial-gradient(circle at 18% 28%, rgba(81, 157, 255, .10) 0 1px, transparent 1.2px);
    background-size: 17px 17px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.72), transparent 42%);
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.72), transparent 42%);
}

/* V6.29 — compact back-home control anchored at the very top of the hero. */
body .simme-na .simme-na6-home-link,
body .simme-na .simme-na6-home-link:link,
body .simme-na .simme-na6-home-link:visited {
    position: absolute !important;
    z-index: 8 !important;
    top: clamp(15px, 1.5vw, 22px) !important;
    left: clamp(17px, 2vw, 28px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 5px 14px 5px 7px !important;
    border: 1px solid rgba(102, 184, 242, .34) !important;
    border-radius: 999px !important;
    color: #dcecff !important;
    -webkit-text-fill-color: #dcecff !important;
    text-decoration: none !important;
    background:
        linear-gradient(180deg, rgba(15, 35, 61, .88), rgba(7, 19, 38, .82)) padding-box,
        linear-gradient(100deg, rgba(180, 81, 255, .24), rgba(57, 205, 255, .30)) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 8px 24px rgba(0,0,0,.20),
        0 0 18px rgba(47, 172, 255, .07) !important;
    -webkit-backdrop-filter: blur(11px) saturate(1.1);
    backdrop-filter: blur(11px) saturate(1.1);
    font-size: clamp(11px, .78vw, 13px) !important;
    font-weight: 720 !important;
    line-height: 1 !important;
    letter-spacing: .055em !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transform: translateZ(0) !important;
    transition:
        transform .32s cubic-bezier(.2,.72,.2,1),
        border-color .32s ease,
        background .32s ease,
        box-shadow .32s ease,
        color .32s ease !important;
    -webkit-tap-highlight-color: transparent;
}

body .simme-na .simme-na6-home-link__icon {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
    border: 1px solid rgba(121, 204, 255, .34) !important;
    border-radius: 50% !important;
    color: #70d8ff !important;
    background: linear-gradient(135deg, rgba(160,72,255,.16), rgba(37,179,255,.14)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 12px rgba(58,194,255,.08) !important;
}

body .simme-na .simme-na6-home-link__icon svg {
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    overflow: visible !important;
    transition: transform .32s cubic-bezier(.2,.72,.2,1) !important;
}

body .simme-na .simme-na6-home-link:hover,
body .simme-na .simme-na6-home-link:focus-visible {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(116, 218, 255, .62) !important;
    background:
        linear-gradient(180deg, rgba(20, 43, 72, .94), rgba(9, 24, 47, .90)) padding-box,
        linear-gradient(100deg, rgba(196, 86, 255, .52), rgba(61, 213, 255, .62)) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 10px 28px rgba(0,0,0,.23),
        0 0 22px rgba(54, 196, 255, .14),
        0 0 20px rgba(181, 75, 255, .08) !important;
    transform: translateY(-1px) !important;
}

body .simme-na .simme-na6-home-link:hover .simme-na6-home-link__icon svg,
body .simme-na .simme-na6-home-link:focus-visible .simme-na6-home-link__icon svg {
    transform: translateX(-2px) !important;
}

body .simme-na .simme-na6-home-link:focus-visible {
    outline: 2px solid rgba(90, 214, 255, .88) !important;
    outline-offset: 3px !important;
}

body .simme-na .simme-na6-home-link:active {
    transform: translateY(0) scale(.985) !important;
}

body .simme-na[data-theme="light"] .simme-na6-home-link,
body .simme-na[data-theme="light"] .simme-na6-home-link:link,
body .simme-na[data-theme="light"] .simme-na6-home-link:visited {
    color: #31435f !important;
    -webkit-text-fill-color: #31435f !important;
    background: rgba(245, 249, 255, .82) !important;
    border-color: rgba(82, 128, 181, .24) !important;
    box-shadow: 0 8px 22px rgba(70, 91, 129, .10), inset 0 1px 0 rgba(255,255,255,.80) !important;
}

body .simme-na[data-theme="light"] .simme-na6-home-link__icon {
    color: #327bb4 !important;
    background: rgba(226, 239, 253, .86) !important;
    border-color: rgba(73, 145, 197, .26) !important;
}

body .simme-na .simme-na6-hero__copy,
body .simme-na .simme-na6-hero__visual {
    position: relative !important;
    min-width: 0 !important;
    z-index: 1;
}

body .simme-na .simme-na6-hero__copy {
    max-width: 560px !important;
}

body .simme-na .simme-na6-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 0 20px !important;
    color: #42d9ff !important;
    font-size: clamp(10px, .8vw, 13px) !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    letter-spacing: .19em !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 18px rgba(57,200,255,.18) !important;
}

body .simme-na .simme-na6-eyebrow__mark {
    position: relative !important;
    display: block !important;
    width: 11px !important;
    height: 11px !important;
    transform: rotate(45deg) !important;
    border: 1px solid rgba(57,200,255,.86) !important;
    box-shadow: 0 0 10px rgba(57,200,255,.24) !important;
}

body .simme-na .simme-na6-eyebrow__mark::before,
body .simme-na .simme-na6-eyebrow__mark::after {
    position: absolute;
    inset: 2px;
    content: "";
    border: 1px solid rgba(57,200,255,.56);
}
body .simme-na .simme-na6-eyebrow__mark::after { inset: 4px; background:#39c8ff; border:0; }

body .simme-na .simme-na6-hero h1 {
    width: min(100%, 600px) !important;
    margin: 0 !important;
    color: #f3f6ff !important;
    font-size: clamp(42px, 4.35vw, 74px) !important;
    font-weight: 520 !important;
    line-height: 1.03 !important;
    letter-spacing: -.045em !important;
    text-wrap: balance;
    background: linear-gradient(96deg, #f4f8ff 0%, #f4f8ff 36%, #eab8ff 69%, #b597ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body .simme-na .simme-na6-title-rule {
    display: block !important;
    width: 92px !important;
    height: 3px !important;
    margin: 24px 0 30px !important;
    border-radius: 99px !important;
    background: linear-gradient(90deg, #3ed7ff 0%, #3ed7ff 54%, #ba59ff 100%) !important;
    box-shadow: 0 0 15px rgba(57,200,255,.22), 0 0 18px rgba(178,73,255,.14) !important;
}

body .simme-na .simme-na6-lead {
    margin: 0 0 28px !important;
    max-width: 530px !important;
    color: #aebbd0 !important;
    font-size: clamp(14px, 1.12vw, 18px) !important;
    font-weight: 430 !important;
    line-height: 1.58 !important;
    letter-spacing: 0 !important;
}

body .simme-na .simme-na6-mobile-lead,
body .simme-na .simme-na6-mobile-brand {
    display: none !important;
}

body .simme-na .simme-na6-facts {
    display: grid !important;
    gap: 15px !important;
    margin: 0 !important;
}

/* Duplicate facts set used only when the hero stacks at tablet widths. */
body .simme-na .simme-na6-facts--stacked {
    display: none !important;
}

body .simme-na .simme-na6-fact {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    min-width: 0 !important;
    color: #c5cee0 !important;
    font-size: clamp(13px, .95vw, 16px) !important;
    font-weight: 470 !important;
    line-height: 1.3 !important;
}

body .simme-na .simme-na6-fact__icon {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 33px !important;
    width: 33px !important;
    height: 33px !important;
    color: #42ceff !important;
    filter: drop-shadow(0 0 7px rgba(57,200,255,.42));
}
body .simme-na .simme-na6-fact__icon--groups { color:#a462ff !important; filter:drop-shadow(0 0 7px rgba(164,98,255,.42)); }
body .simme-na .simme-na6-fact__icon--unified { color:#965cff !important; filter:drop-shadow(0 0 9px rgba(150,92,255,.50)); }
body .simme-na .simme-na6-fact__icon svg { display:block !important; width:100% !important; height:100% !important; }

body .simme-na .simme-na6-hero__visual {
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 18px !important;
    width: 100% !important;
}

body .simme-na .simme-na6-network-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(180px, 30%) minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: 1.92 / 1 !important;
    min-height: 330px !important;
    max-height: 470px !important;
    padding: clamp(26px, 2.8vw, 42px) !important;
    overflow: hidden !important;
    isolation: isolate;
    border: 1px solid transparent !important;
    border-radius: clamp(24px, 2.2vw, 36px) !important;
    background:
        linear-gradient(135deg, rgba(9,20,43,.93), rgba(5,22,40,.92)) padding-box,
        linear-gradient(110deg, rgba(196,82,255,.9), rgba(126,91,255,.76) 35%, rgba(61,213,255,.95) 100%) border-box !important;
    box-shadow:
        0 0 0 1px rgba(124, 145, 255, .08),
        0 0 28px rgba(122, 61, 255, .15),
        0 0 38px rgba(42, 190, 255, .11),
        inset 0 1px 0 rgba(255,255,255,.04) !important;
}

body .simme-na .simme-na6-network-card::before {
    position:absolute;
    inset:0;
    z-index:-2;
    content:"";
    pointer-events:none;
    background:
        linear-gradient(115deg, rgba(9,18,45,.78) 0%, rgba(8,17,42,.68) 24%, rgba(4,16,35,.38) 56%, rgba(4,15,32,.54) 100%),
        radial-gradient(circle at 17% 35%, rgba(146,69,255,.18), transparent 34%),
        radial-gradient(circle at 77% 55%, rgba(31,155,255,.14), transparent 34%),
        linear-gradient(100deg, transparent 24%, rgba(139,75,255,.06) 49%, rgba(50,188,255,.06) 72%, transparent 92%),
        url("https://www.simme.co.uk/wp-content/uploads/2026/08/Atlas-Background-2.jpg");
    background-repeat:no-repeat;
    background-size:cover, auto, auto, auto, cover;
    background-position:50% 50%, 17% 35%, 77% 55%, 50% 50%, 68% 50%;
    background-blend-mode:normal, screen, screen, normal, normal;
    opacity:.76;
    filter:saturate(.90) brightness(.88);
}

body .simme-na .simme-na6-network-card__bloom {
    position:absolute !important;
    z-index:-1 !important;
    left:8% !important;
    top:8% !important;
    width:48% !important;
    height:82% !important;
    border-radius:50% !important;
    background:rgba(132,68,255,.18) !important;
    filter:blur(58px) !important;
    opacity:.82 !important;
    animation:simme-na6-bloom 8.5s ease-in-out infinite alternate !important;
}

body .simme-na .simme-na6-network-card__beam {
    position:absolute !important;
    z-index:0 !important;
    left:-7% !important;
    right:-7% !important;
    top:50% !important;
    height:2px !important;
    pointer-events:none !important;
    background:linear-gradient(90deg, transparent 0%, rgba(183,75,255,.42) 20%, rgba(182,92,255,.56) 39%, rgba(73,205,255,.62) 68%, transparent 100%) !important;
    box-shadow:0 0 16px rgba(95,94,255,.25),0 0 26px rgba(57,200,255,.16) !important;
    opacity:.66 !important;
}

body .simme-na .simme-na6-metric {
    position:relative !important;
    z-index:2 !important;
    display:grid !important;
    align-content:center !important;
    justify-items:start !important;
    align-self:stretch !important;
    min-width:0 !important;
    padding:clamp(20px,2.1vw,34px) !important;
    overflow:hidden !important;
    border:1px solid rgba(137,147,255,.55) !important;
    border-radius:clamp(20px,1.9vw,30px) !important;
    background:linear-gradient(160deg,rgba(38,42,104,.36),rgba(7,18,45,.28)) !important;
    box-shadow:inset 0 0 30px rgba(103,75,255,.07),0 0 18px rgba(105,69,255,.08) !important;
}

body .simme-na .simme-na6-metric strong {
    display:block !important;
    margin:0 !important;
    color:#f3f5ff !important;
    font-size:clamp(66px,6.8vw,112px) !important;
    font-weight:420 !important;
    line-height:.82 !important;
    letter-spacing:-.06em !important;
    text-shadow:0 0 20px rgba(255,255,255,.08) !important;
}

body .simme-na .simme-na6-metric span {
    display:block !important;
    margin:clamp(18px,1.5vw,24px) 0 0 !important;
    color:#f4f6ff !important;
    font-size:clamp(20px,1.75vw,31px) !important;
    font-weight:720 !important;
    line-height:1.05 !important;
    letter-spacing:-.015em !important;
}
body .simme-na .simme-na6-metric i {
    display:block !important;
    width:100% !important;
    height:1px !important;
    margin:clamp(16px,1.4vw,22px) 0 !important;
    background:linear-gradient(90deg,rgba(122,137,255,.28),rgba(110,151,232,.17)) !important;
}
body .simme-na .simme-na6-metric small {
    color:#aeb6d1 !important;
    font-size:clamp(14px,1.05vw,18px) !important;
    font-weight:430 !important;
    line-height:1.35 !important;
}

body .simme-na .simme-na6-orbit {
    --sna6-orbit-x:0px;
    --sna6-orbit-y:0px;
    position:relative !important;
    z-index:2 !important;
    align-self:stretch !important;
    min-width:0 !important;
    width:100% !important;
    min-height:260px !important;
    overflow:visible !important;
    transform:translate3d(var(--sna6-orbit-x),var(--sna6-orbit-y),0) !important;
    transition:transform .35s cubic-bezier(.2,.7,.2,1) !important;
}

body .simme-na .simme-na6-orbit::before {
    position:absolute;
    left:50%;
    top:50%;
    width:min(72%,360px);
    aspect-ratio:1;
    content:"";
    border-radius:50%;
    background:radial-gradient(circle,rgba(31,137,255,.16),rgba(31,137,255,.06) 34%,transparent 68%);
    filter:blur(18px);
    transform:translate(-50%,-50%);
    animation:simme-na6-core-breathe 4.2s ease-in-out infinite;
}

body .simme-na .simme-na6-orbit__svg {
    position:absolute !important;
    inset:50% auto auto 50% !important;
    display:block !important;
    width:min(100%,560px) !important;
    height:auto !important;
    max-height:100% !important;
    overflow:visible !important;
    transform:translate(-50%,-50%) !important;
    transform-origin:center !important;
}

body .simme-na .simme-na6-theme,
body .simme-na .simme-na6-theme:hover,
body .simme-na .simme-na6-theme:focus,
body .simme-na .simme-na6-theme:active {
    position:relative !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    align-items:center !important;
    width:min(260px,100%) !important;
    min-height:48px !important;
    margin:0 !important;
    padding:4px !important;
    overflow:hidden !important;
    color:#aebbd0 !important;
    background:rgba(4,12,25,.70) !important;
    border:1px solid rgba(86,134,198,.28) !important;
    border-radius:999px !important;
    box-shadow:inset 0 0 18px rgba(26,117,255,.05) !important;
    -webkit-appearance:none !important;
    appearance:none !important;
    cursor:pointer !important;
}
body .simme-na .simme-na6-theme__option {
    position:relative !important;
    z-index:2 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
    min-height:38px !important;
    color:#8ea2be !important;
    font-size:13px !important;
    font-weight:650 !important;
    transition:color .2s ease !important;
}
body .simme-na[data-theme="dark"] .simme-na6-theme__option--dark,
body .simme-na[data-theme="light"] .simme-na6-theme__option--light { color:#cfeeff !important; }
body .simme-na .simme-na6-theme__thumb {
    position:absolute !important;
    z-index:1 !important;
    left:4px !important;
    top:4px !important;
    width:calc(50% - 4px) !important;
    height:calc(100% - 8px) !important;
    border-radius:999px !important;
    background:linear-gradient(135deg,rgba(10,46,79,.72),rgba(10,31,59,.82)) !important;
    border:1px solid rgba(57,200,255,.22) !important;
    box-shadow:0 0 18px rgba(57,200,255,.07),inset 0 1px 0 rgba(255,255,255,.04) !important;
    transform:translateX(0) !important;
    transition:transform .26s cubic-bezier(.2,.75,.2,1) !important;
}
body .simme-na[data-theme="light"] .simme-na6-theme__thumb { transform:translateX(100%) !important; }
body .simme-na .simme-na6-theme__moon { position:relative !important; width:14px !important; height:14px !important; border-radius:50% !important; background:#50cbff !important; box-shadow:0 0 9px rgba(80,203,255,.38) !important; }
body .simme-na .simme-na6-theme__moon::after { position:absolute; content:""; width:13px; height:13px; top:-2px; left:5px; border-radius:50%; background:#09192d; }
body .simme-na .simme-na6-theme__sun { position:relative !important; width:13px !important; height:13px !important; border:2px solid #7285a0 !important; border-radius:50% !important; }
body .simme-na .simme-na6-theme__sun::before { position:absolute; inset:-6px; content:""; background:repeating-conic-gradient(from 0deg,#7285a0 0 3deg,transparent 3deg 45deg); mask:radial-gradient(circle,transparent 0 6px,#000 6px 8px,transparent 8px); -webkit-mask:radial-gradient(circle,transparent 0 6px,#000 6px 8px,transparent 8px); }

/* Light mode keeps the exact composition while reducing bloom and restoring
   comfortable dark-on-light reading around the network visual. */
body .simme-na[data-theme="light"] .simme-na6-hero {
    --sna6-text:#121a2b;
    --sna6-soft:#5f6d87;
    background:
        radial-gradient(circle at 60% 48%,rgba(136,92,255,.08),transparent 31%),
        radial-gradient(circle at 90% 30%,rgba(42,177,255,.08),transparent 34%),
        linear-gradient(135deg,#f8faff,#f2f6fd 55%,#f7fbff 100%) !important;
    border-color:rgba(103,142,194,.28) !important;
    box-shadow:0 18px 48px rgba(52,73,105,.10) !important;
}
body .simme-na[data-theme="light"] .simme-na6-hero h1 { background:linear-gradient(96deg,#151c2b 0%,#202b42 44%,#7e54bf 78%,#4075ba 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
body .simme-na[data-theme="light"] .simme-na6-lead,
body .simme-na[data-theme="light"] .simme-na6-fact { color:#586782 !important; }
body .simme-na[data-theme="light"] .simme-na6-network-card { background:linear-gradient(135deg,rgba(243,247,255,.96),rgba(235,244,253,.95)) padding-box,linear-gradient(110deg,rgba(169,94,244,.70),rgba(116,111,238,.54) 35%,rgba(56,188,235,.78) 100%) border-box !important; box-shadow:0 16px 44px rgba(64,78,118,.13),0 0 28px rgba(127,85,232,.08) !important; }
body .simme-na[data-theme="light"] .simme-na6-metric { background:linear-gradient(160deg,rgba(255,255,255,.58),rgba(225,235,252,.34)) !important; border-color:rgba(114,117,204,.28) !important; }
body .simme-na[data-theme="light"] .simme-na6-metric strong,
body .simme-na[data-theme="light"] .simme-na6-metric span { color:#1b2337 !important; text-shadow:none !important; }
body .simme-na[data-theme="light"] .simme-na6-metric small { color:#65718c !important; }
body .simme-na[data-theme="light"] .simme-na6-theme,
body .simme-na[data-theme="light"] .simme-na6-theme:hover { background:rgba(239,245,253,.90) !important; border-color:rgba(92,121,166,.24) !important; }
body .simme-na[data-theme="light"] .simme-na6-theme__option { color:#65738d !important; }
body .simme-na[data-theme="light"] .simme-na6-theme__option--light { color:#1f2b41 !important; }

@keyframes simme-na6-bloom {
    0% { transform:translate3d(-4%,2%,0) scale(.94); opacity:.62; }
    50% { transform:translate3d(10%,-4%,0) scale(1.12); opacity:.92; }
    100% { transform:translate3d(2%,6%,0) scale(1.02); opacity:.72; }
}
@keyframes simme-na6-core-breathe {
    0%,100% { transform:translate(-50%,-50%) scale(.92); opacity:.58; }
    50% { transform:translate(-50%,-50%) scale(1.08); opacity:.92; }
}

/* Tablet: preserve the two-column editorial reference until the layout would
   become crowded, then stack copy above the network card. */
@media (max-width: 1180px) {
    body .simme-na .simme-na6-hero { grid-template-columns:minmax(260px,.75fr) minmax(470px,1.25fr) !important; gap:34px !important; padding:82px 34px 44px !important; }
    body .simme-na .simme-na6-network-card { min-height:300px !important; }
    body .simme-na .simme-na6-metric strong { font-size:clamp(60px,7vw,86px) !important; }
}

@media (max-width: 940px) {
    body .simme-na .simme-na6-hero {
        grid-template-columns:1fr !important;
        gap:32px !important;
        padding:80px 28px 34px !important;
    }
    body .simme-na .simme-na6-hero__copy { max-width:760px !important; }
    body .simme-na .simme-na6-network-card { width:min(100%,760px) !important; margin-inline:auto !important; }
}

/*
 * When the hero becomes a single-column tablet layout, keep the large 32-node
 * visual immediately after the intro copy and move the three supporting facts
 * underneath it. This preserves the intended visual hierarchy instead of
 * leaving the facts above the 32-node panel.
 */
@media (min-width: 681px) and (max-width: 940px) {
    body .simme-na .simme-na6-hero__copy > .simme-na6-facts {
        display: none !important;
    }

    body .simme-na .simme-na6-hero__visual .simme-na6-facts--stacked {
        display: grid !important;
        width: min(100%, 760px) !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: clamp(14px, 2.1vw, 24px) !important;
        margin: 2px auto 0 !important;
        padding: 0 clamp(4px, .7vw, 10px) !important;
    }

    body .simme-na .simme-na6-hero__visual .simme-na6-facts--stacked .simme-na6-fact {
        justify-content: center !important;
        text-align: left !important;
    }

    body .simme-na .simme-na6-theme {
        margin-top: 4px !important;
    }
}

/* Phone composition mirrors the supplied portrait reference: SymSoul mark,
   Node Atlas title, compact supporting line, network card, then toggle. */
@media (max-width: 680px) {
    body .simme-na .simme-na6-hero {
        display:block !important;
        padding:74px 16px 28px !important;
        border-radius:24px !important;
        text-align:center !important;
    }
    body .simme-na .simme-na6-home-link,
    body .simme-na .simme-na6-home-link:link,
    body .simme-na .simme-na6-home-link:visited {
        top:14px !important;
        left:14px !important;
        min-height:36px !important;
        padding:4px 12px 4px 6px !important;
        gap:8px !important;
        font-size:11px !important;
    }

    body .simme-na .simme-na6-home-link__icon {
        width:25px !important;
        height:25px !important;
        flex-basis:25px !important;
    }
    body .simme-na .simme-na6-mobile-brand {
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        gap:4px !important;
        margin:0 0 14px !important;
    }
    body .simme-na .simme-na6-brand-mark { display:block !important; width:48px !important; height:48px !important; filter:drop-shadow(0 0 12px rgba(139,86,255,.28)); }
    body .simme-na .simme-na6-brand-mark svg { display:block !important; width:100% !important; height:100% !important; }
    body .simme-na .simme-na6-mobile-brand__word { display:block !important; background:linear-gradient(90deg,#bc5aff,#43bbff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-size:22px !important; font-weight:600 !important; line-height:1 !important; letter-spacing:-.03em !important; }
    body .simme-na .simme-na6-eyebrow,
    body .simme-na .simme-na6-title-rule,
    body .simme-na .simme-na6-lead,
    body .simme-na .simme-na6-facts { display:none !important; }
    body .simme-na .simme-na6-hero h1 { width:100% !important; font-size:clamp(46px,14vw,64px) !important; line-height:.98 !important; }
    body .simme-na .simme-na6-title-prefix { display:none !important; }
    body .simme-na .simme-na6-mobile-lead { display:block !important; margin:16px auto 28px !important; color:#aeb8cd !important; font-size:clamp(16px,4.7vw,20px) !important; line-height:1.42 !important; }
    body .simme-na[data-theme="light"] .simme-na6-mobile-lead { color:#63718b !important; }
    body .simme-na .simme-na6-network-card {
        grid-template-columns:minmax(112px,39%) minmax(0,1fr) !important;
        width:100% !important;
        min-height:0 !important;
        max-height:none !important;
        aspect-ratio:1.52 / 1 !important;
        padding:14px !important;
        border-radius:22px !important;
    }
    body .simme-na .simme-na6-metric { padding:16px 14px !important; border-radius:18px !important; }
    body .simme-na .simme-na6-metric strong { font-size:clamp(54px,18vw,78px) !important; }
    body .simme-na .simme-na6-metric span { margin-top:12px !important; font-size:clamp(17px,5.2vw,23px) !important; }
    body .simme-na .simme-na6-metric i { margin:12px 0 !important; }
    body .simme-na .simme-na6-metric small { font-size:clamp(11px,3.4vw,14px) !important; }
    body .simme-na .simme-na6-orbit { min-height:0 !important; height:100% !important; }
    body .simme-na .simme-na6-orbit__svg { width:112% !important; max-width:none !important; left:50% !important; }
    body .simme-na .simme-na6-theme { width:min(270px,82%) !important; margin:28px auto 0 !important; }
}

@media (max-width: 420px) {
    body .simme-na .simme-na6-hero { padding-left:12px !important; padding-right:12px !important; }
    body .simme-na .simme-na6-network-card { grid-template-columns:minmax(104px,42%) minmax(0,1fr) !important; aspect-ratio:1.38 / 1 !important; padding:11px !important; }
    body .simme-na .simme-na6-metric { padding:14px 12px !important; }
    body .simme-na .simme-na6-metric strong { font-size:clamp(50px,19vw,70px) !important; }
    body .simme-na .simme-na6-orbit__svg { width:116% !important; left:50% !important; }
}

@media (prefers-reduced-motion: reduce) {
    body .simme-na .simme-na6-network-card__bloom,
    body .simme-na .simme-na6-orbit::before { animation-duration:18s !important; }
}


/* ========================================================================
   V6.1 — OFFICIAL SYMSOUL HERO ICONS
   Asset-only refinement. The V6.0 hero structure, spacing, network card,
   animated orbit, theme control and responsive layout are intentionally
   unchanged. These rules only let the supplied official WEBP artwork replace
   the temporary inline SVG drawings.
   ======================================================================== */

/* Official feature artwork: use its own baked-in colour and glow exactly. */
body .simme-na .simme-na6-fact__icon,
body .simme-na .simme-na6-fact__icon--groups,
body .simme-na .simme-na6-fact__icon--unified {
    filter: none !important;
}
body .simme-na .simme-na6-fact__icon img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: none !important;
}

/* Legacy image-brand support from V6.1. The final hero-brand sizing and
   alignment are superseded by the V6.12 combined Euclid1 + SymSoul rules
   below; these base image rules remain harmless and reusable. */
body .simme-na .simme-na6-brand-mark img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: none !important;
}

@media (max-width: 680px) {
    body .simme-na .simme-na6-brand-mark {
        width: 82px !important;
        height: 72px !important;
        filter: none !important;
    }
    body .simme-na .simme-na6-mobile-brand__word {
        display: none !important;
    }
}

/* ========================================================================
   V6.24 — EUCLID1 HERO LOGO SCALE REFINEMENT
   2026-08-16

   Scope: Node Atlas hero branding only.
   - Scales the approved Euclid1 hero logo down so it feels less dominant
     inside the hero panel.
   - Reduces the desktop and mobile logo widths while preserving the same
     image source and flexible aspect-ratio behaviour.
   - Slightly tightens the space below the logo so the whole hero feels more
     balanced.
   ======================================================================== */

body .simme-na .simme-na6-mobile-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
}

body .simme-na .simme-na6-brand-mark {
    display: block !important;
    flex: 0 0 auto !important;
    width: clamp(112px, 9.4vw, 142px) !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    filter: none !important;
}

body .simme-na .simme-na6-brand-mark img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: left center !important;
    filter: none !important;
}

/* The hero artwork already carries the intended wordmark treatment. */
body .simme-na .simme-na6-mobile-brand__word {
    display: none !important;
}

body .simme-na .simme-na6-eyebrow {
    display: none !important;
}

@media (max-width: 680px) {
    body .simme-na .simme-na6-mobile-brand {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 0 10px !important;
    }

    body .simme-na .simme-na6-brand-mark {
        width: clamp(104px, 30vw, 126px) !important;
        height: auto !important;
        margin-inline: auto !important;
    }

    body .simme-na .simme-na6-brand-mark img {
        width: 100% !important;
        height: auto !important;
        object-position: center !important;
    }
}


/* ========================================================================
   V6.3 — INDIVIDUAL NODE PAGE FRAME + CORRECT SITE HEADER LOGO
   2026-08-14

   Scope is intentionally narrow:
   - Individual Node pages now sit on the same vivid blue patterned Simme
     surround used around the main Node Atlas composition.
   - A black outer presentation frame and blue edge recreate the Atlas page's
     layered framing while leaving the existing Node reader structure intact.
   - The sticky Node header uses the corrected official SymSoul site logo and
     matches the visual scale of the normal site header.
   - Node content, reader structure, section icons, theme control and Atlas
     hero/orbit are untouched.
   ======================================================================== */

/* --- 1. Bring the Simme blue surround onto every dedicated Node page. --- */
body.simme-node-atlas-detail-page {
    --simme-node-surround-blue: #02b8f0;
    --simme-node-surround-ink: #0059c7;
    min-height: 100vh !important;
    background-color: var(--simme-node-surround-blue) !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='86' viewBox='0 0 150 86'%3E%3Cg fill='%230059c7' fill-opacity='.24'%3E%3Ccircle cx='16' cy='16' r='4'/%3E%3Ccircle cx='56' cy='16' r='4'/%3E%3Ccircle cx='96' cy='16' r='4'/%3E%3Ccircle cx='136' cy='16' r='4'/%3E%3Crect x='22' y='4' width='5' height='18' rx='2.5'/%3E%3Crect x='38' y='4' width='5' height='18' rx='2.5'/%3E%3Crect x='72' y='4' width='5' height='18' rx='2.5'/%3E%3Crect x='78' y='4' width='5' height='18' rx='2.5'/%3E%3Crect x='112' y='4' width='5' height='18' rx='2.5'/%3E%3Crect x='128' y='4' width='5' height='18' rx='2.5'/%3E%3Ccircle cx='9' cy='50' r='4'/%3E%3Ccircle cx='30' cy='50' r='4'/%3E%3Ccircle cx='51' cy='50' r='4'/%3E%3Ccircle cx='72' cy='50' r='4'/%3E%3Ccircle cx='93' cy='50' r='4'/%3E%3Ccircle cx='114' cy='50' r='4'/%3E%3Ccircle cx='135' cy='50' r='4'/%3E%3Crect x='15' y='64' width='5' height='14' rx='2.5'/%3E%3Crect x='35' y='64' width='5' height='14' rx='2.5'/%3E%3Crect x='75' y='64' width='5' height='14' rx='2.5'/%3E%3Crect x='95' y='64' width='5' height='14' rx='2.5'/%3E%3Crect x='135' y='64' width='5' height='14' rx='2.5'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(180deg, #06b7ef 0%, #02b8f0 58%, #00b4ee 100%) !important;
    background-repeat: repeat, no-repeat !important;
    background-size: 150px 86px, 100% 100% !important;
    background-attachment: fixed, fixed !important;
}

/* Themify's legacy Node templates can paint their own black page canvas.
   Let the new Simme surround remain visible outside the Node presentation. */
body.simme-node-atlas-detail-page #pagewrap,
body.simme-node-atlas-detail-page #body,
body.simme-node-atlas-detail-page #layout,
body.simme-node-atlas-detail-page #content,
body.simme-node-atlas-detail-page .pagewidth,
body.simme-node-atlas-detail-page .post,
body.simme-node-atlas-detail-page .post-content,
body.simme-node-atlas-detail-page .entry-content {
    background-color: transparent !important;
    background-image: none !important;
}

/* The shortcode itself becomes the same black presentation island seen on
   the Atlas page, with the blue surround always visible beyond its edge. */
body.simme-node-atlas-detail-page .simme-na--node-page {
    box-sizing: border-box !important;
    width: calc(100% - 72px) !important;
    max-width: 1960px !important;
    margin: clamp(32px, 3vw, 58px) auto clamp(34px, 4vw, 72px) !important;
    padding: clamp(28px, 4vw, 72px) !important;
    overflow: visible !important;
    background: #000000 !important;
    border: 7px solid var(--simme-node-surround-ink) !important;
    border-radius: clamp(32px, 3vw, 48px) !important;
    box-shadow:
        0 18px 54px rgba(0, 33, 73, .22),
        0 0 0 1px rgba(0, 106, 210, .34) !important;
}

/* Preserve the current Node reader; only strengthen the same fine cyan edge
   used throughout the Atlas rather than changing its internal structure. */
body.simme-node-atlas-detail-page .simme-na--node-page > .simme-na__shell {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(72, 199, 249, .62) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 6% 0%, rgba(36, 191, 255, .075), transparent 28%),
        linear-gradient(180deg, #081523 0%, #06111d 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(143, 217, 255, .09),
        inset 0 0 36px rgba(36, 191, 255, .024),
        0 0 30px rgba(36, 191, 255, .045) !important;
}

/* Keep light mode confined to the reader; the recognisable Simme blue outer
   surround remains constant so moving between Atlas and Node pages feels like
   one site rather than two different templates. */
body.simme-node-atlas-detail-page .simme-na--node-page[data-theme="light"] > .simme-na__shell {
    background: var(--sna-bg) !important;
}

/* --- 2. Sticky site bar: corrected official logo and normal site scale. --- */
body.simme-node-atlas-detail-page .simme-node-topbar54 {
    width: 100vw !important;
    min-height: 150px !important;
    margin-left: calc(50% - 50vw) !important;
    background: #020405 !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.simme-node-atlas-detail-page .simme-node-topbar54__inner {
    box-sizing: border-box !important;
    width: min(100%, 1770px) !important;
    min-height: 150px !important;
    margin: 0 auto !important;
    padding: 10px clamp(30px, 7.8vw, 174px) !important;
    display: flex !important;
    align-items: center !important;
}

body.simme-node-atlas-detail-page .simme-node-topbar54__brand {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
}

body.simme-node-atlas-detail-page .simme-node-topbar54__logo {
    display: block !important;
    width: 300px !important;
    height: 130px !important;
    max-width: 300px !important;
    max-height: 130px !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin: 0 !important;
    filter: none !important;
}

/* Position the burger against the same inner page line as the normal header. */
body.simme-node-atlas-detail-page .simme-node-topbar54__burger,
body.simme-node-atlas-detail-page .simme-node-topbar54__burger:hover,
body.simme-node-atlas-detail-page .simme-node-topbar54__burger:focus,
body.simme-node-atlas-detail-page .simme-node-topbar54__burger:active {
    right: clamp(30px, 7.8vw, 174px) !important;
}

/* Keep the menu visually attached to the same right-hand header line. */
body.simme-node-atlas-detail-page .simme-node-topbar54__menu {
    right: clamp(20px, 7.8vw, 174px) !important;
}

/* Responsive framing keeps a clear ribbon of the blue Simme surround visible
   on every screen size without squeezing the Node reader. */
@media (max-width: 1100px) {
    body.simme-node-atlas-detail-page .simme-na--node-page {
        width: calc(100% - 44px) !important;
        padding: clamp(22px, 3vw, 42px) !important;
        border-width: 6px !important;
        border-radius: 38px !important;
    }
    body.simme-node-atlas-detail-page .simme-node-topbar54,
    body.simme-node-atlas-detail-page .simme-node-topbar54__inner {
        min-height: 118px !important;
    }
    body.simme-node-atlas-detail-page .simme-node-topbar54__inner {
        padding-inline: clamp(24px, 5vw, 72px) !important;
    }
    body.simme-node-atlas-detail-page .simme-node-topbar54__logo {
        width: 240px !important;
        height: 104px !important;
        max-width: 240px !important;
        max-height: 104px !important;
    }
    body.simme-node-atlas-detail-page .simme-node-topbar54__burger,
    body.simme-node-atlas-detail-page .simme-node-topbar54__burger:hover,
    body.simme-node-atlas-detail-page .simme-node-topbar54__burger:focus,
    body.simme-node-atlas-detail-page .simme-node-topbar54__burger:active,
    body.simme-node-atlas-detail-page .simme-node-topbar54__menu {
        right: clamp(22px, 5vw, 72px) !important;
    }
}

@media (max-width: 700px) {
    body.simme-node-atlas-detail-page {
        background-attachment: scroll, scroll !important;
        background-size: 120px 69px, 100% 100% !important;
    }
    body.simme-node-atlas-detail-page .simme-na--node-page {
        width: calc(100% - 20px) !important;
        margin: 18px auto 28px !important;
        padding: 14px !important;
        border-width: 4px !important;
        border-radius: 27px !important;
    }
    body.simme-node-atlas-detail-page .simme-na--node-page > .simme-na__shell {
        border-radius: 20px !important;
    }
    body.simme-node-atlas-detail-page .simme-node-topbar54,
    body.simme-node-atlas-detail-page .simme-node-topbar54__inner {
        min-height: 86px !important;
    }
    body.simme-node-atlas-detail-page .simme-node-topbar54__inner {
        width: 100% !important;
        padding: 5px 18px !important;
        padding-right: 70px !important;
    }
    body.simme-node-atlas-detail-page .simme-node-topbar54__logo {
        width: 176px !important;
        height: auto !important;
        max-width: 176px !important;
        max-height: 76px !important;
    }
    body.simme-node-atlas-detail-page .simme-node-topbar54__burger,
    body.simme-node-atlas-detail-page .simme-node-topbar54__burger:hover,
    body.simme-node-atlas-detail-page .simme-node-topbar54__burger:focus,
    body.simme-node-atlas-detail-page .simme-node-topbar54__burger:active {
        right: 16px !important;
    }
    body.simme-node-atlas-detail-page .simme-node-topbar54__menu {
        right: 10px !important;
        width: calc(100vw - 20px) !important;
    }
}

@media (max-width: 420px) {
    body.simme-node-atlas-detail-page .simme-na--node-page {
        width: calc(100% - 14px) !important;
        margin-top: 12px !important;
        padding: 10px !important;
        border-width: 3px !important;
        border-radius: 22px !important;
    }
    body.simme-node-atlas-detail-page .simme-na--node-page > .simme-na__shell {
        border-radius: 17px !important;
    }
    body.simme-node-atlas-detail-page .simme-node-topbar54__logo {
        width: 158px !important;
        max-width: 158px !important;
    }
}


/* ========================================================================
   V6.4 — SCALABLE NODE ATLAS RETURN ORBIT
   One real SVG component replaces the old CSS pseudo-element miniature.
   - proportional at every size
   - motion lives inside the SVG (SMIL), not in page CSS or JS
   - identical component can be reused in any return-to-Atlas control
   ======================================================================== */

/* Retire every historic pseudo-element drawing from V4.7 and earlier. */
body .simme-na .simme-na__canonical-icon--atlas::before,
body .simme-na .simme-na__canonical-icon--atlas::after,
body .simme-na .simme-na__canonical-icon--atlas > span::before,
body .simme-na .simme-na__canonical-icon--atlas > span::after {
    content: none !important;
    display: none !important;
    animation: none !important;
    box-shadow: none !important;
}

/* Generic scalable icon shell. Change --sna-atlas-orbit-size anywhere. */
.simme-atlas-return-icon {
    --sna-atlas-orbit-size: 40px;
    position: relative;
    display: inline-grid !important;
    place-items: center;
    flex: 0 0 var(--sna-atlas-orbit-size);
    width: var(--sna-atlas-orbit-size) !important;
    height: var(--sna-atlas-orbit-size) !important;
    min-width: var(--sna-atlas-orbit-size) !important;
    min-height: var(--sna-atlas-orbit-size) !important;
    overflow: visible !important;
    line-height: 0 !important;
    isolation: isolate;
}

.simme-atlas-return-icon--compact {
    --sna-atlas-orbit-size: 28px;
}

.simme-atlas-return-orbit-svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    pointer-events: none !important;
    transform: translateZ(0);
    transform-origin: 50% 50%;
    filter: drop-shadow(0 0 5px rgba(36,191,255,.16));
    transition: filter .2s ease, transform .2s ease;
}

/* Existing square canonical icon remains the premium frame; the SVG now owns
   all of the network geometry inside it. */
body .simme-na .simme-na__canonical-icon--atlas {
    --sna-atlas-orbit-size: 40px;
    padding: 3px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 50% 48%, rgba(36,191,255,.12), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)) !important;
}

/* Text-return controls use the exact same SVG at a smaller scale. */
body .simme-na .simme-atlas-return-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

body .simme-na .simme-atlas-return-action > span:last-child {
    min-width: 0;
}

body .simme-na .simme-atlas-return-action:hover .simme-atlas-return-orbit-svg,
body .simme-na .simme-atlas-return-action:focus-visible .simme-atlas-return-orbit-svg,
body .simme-na .simme-na__canonical-link--atlas:hover .simme-atlas-return-orbit-svg,
body .simme-na .simme-na__canonical-link--atlas:focus-visible .simme-atlas-return-orbit-svg {
    filter:
        drop-shadow(0 0 5px rgba(36,191,255,.34))
        drop-shadow(0 0 8px rgba(180,81,255,.18));
    transform: scale(1.045);
}

/* Light mode changes only the frame; the official Node colours remain intact. */
.simme-na[data-theme="light"] .simme-na__canonical-icon--atlas {
    background:
        radial-gradient(circle at 50% 48%, rgba(36,191,255,.10), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(237,247,255,.60)) !important;
}

@media (max-width: 700px) {
    .simme-atlas-return-icon--compact {
        --sna-atlas-orbit-size: 25px;
    }
    body .simme-na .simme-na__canonical-icon--atlas {
        --sna-atlas-orbit-size: 40px;
    }
}

@media (max-width: 420px) {
    .simme-atlas-return-icon--compact {
        --sna-atlas-orbit-size: 23px;
    }
}

/* ========================================================================
   V6.5 — INDIVIDUAL NODE PAGE HEADER LOGO SIZE
   Exact requested width: 150px at every viewport size.
   No other Node Atlas structure or styling is changed.
   ======================================================================== */
body.simme-node-atlas-detail-page .simme-node-topbar54__logo {
    width: 150px !important;
    height: auto !important;
    max-width: 150px !important;
    max-height: none !important;
}

@media (max-width: 1100px) {
    body.simme-node-atlas-detail-page .simme-node-topbar54__logo {
        width: 150px !important;
        height: auto !important;
        max-width: 150px !important;
        max-height: none !important;
    }
}

@media (max-width: 700px) {
    body.simme-node-atlas-detail-page .simme-node-topbar54__logo {
        width: 150px !important;
        height: auto !important;
        max-width: 150px !important;
        max-height: none !important;
    }
}

@media (max-width: 420px) {
    body.simme-node-atlas-detail-page .simme-node-topbar54__logo {
        width: 150px !important;
        height: auto !important;
        max-width: 150px !important;
        max-height: none !important;
    }
}

/* ========================================================================
   V6.6 — SMALL-SCREEN CONTROL + RUNTIME + MINI-ORBIT POLISH
   2026-08-14
   Scope is deliberately narrow:
   - centre the Node-page Dark/Light switch at compact widths
   - restyle Standard/Lite runtime footprint rows in the cleaner app style
   - enlarge the reusable miniature Atlas orbit
   - remove only the inner icon frame from the large “Explore the complete
     Node Atlas” action; the action itself keeps its existing outer border
   ======================================================================== */

/* 1. Compact Node-page theme switch — centred, never pinned left/right. */
@media (max-width: 860px) {
    body .simme-na--node-page .simme-na__theme-toggle {
        width: min(100%, 280px) !important;
        max-width: 280px !important;
        min-width: 0 !important;
        margin-inline: auto !important;
        justify-self: center !important;
        align-self: center !important;
    }
}

@media (max-width: 640px) {
    body .simme-na--node-page .simme-na__nodepage-bar {
        justify-items: center !important;
    }

    body .simme-na--node-page .simme-na__theme-toggle {
        width: min(100%, 280px) !important;
        max-width: 280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-self: center !important;
    }
}

/* 2. Runtime footprint — compact app-style token chips. */
body .simme-na .simme-na__runtime {
    gap: 10px !important;
}

body .simme-na .simme-na__runtime > span {
    margin-bottom: 2px !important;
}

body .simme-na .simme-na__runtime > div {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 48px !important;
    padding: 10px 13px !important;
    overflow: hidden !important;
    border: 1px dashed rgba(225, 240, 255, .62) !important;
    border-radius: 14px !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(48, 177, 255, .075), transparent 42%),
        linear-gradient(180deg, rgba(8, 20, 38, .96), rgba(5, 14, 28, .96)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 6px 16px rgba(0,0,0,.10) !important;
}

body .simme-na .simme-na__runtime > div::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(105deg, transparent 0 62%, rgba(91, 202, 255, .035) 76%, transparent 92%);
}

body .simme-na .simme-na__runtime b {
    position: relative !important;
    z-index: 1 !important;
    color: #c5d3e8 !important;
    font-size: 11px !important;
    font-weight: 760 !important;
    letter-spacing: .005em !important;
}

body .simme-na .simme-na__runtime strong {
    position: relative !important;
    z-index: 1 !important;
    color: #f1f7ff !important;
    font-size: 17px !important;
    font-weight: 820 !important;
    line-height: 1 !important;
    letter-spacing: -.025em !important;
}

body .simme-na .simme-na__runtime small {
    position: relative !important;
    z-index: 1 !important;
    color: #859bb9 !important;
    font-size: 9px !important;
    font-weight: 560 !important;
}

body .simme-na[data-theme="light"] .simme-na__runtime > div {
    border-color: rgba(78, 108, 151, .42) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(69, 169, 226, .055), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,249,254,.96)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 7px 18px rgba(57, 79, 112, .065) !important;
}

body .simme-na[data-theme="light"] .simme-na__runtime b { color: #43536c !important; }
body .simme-na[data-theme="light"] .simme-na__runtime strong { color: #17243a !important; }
body .simme-na[data-theme="light"] .simme-na__runtime small { color: #71819b !important; }

@media (max-width: 640px) {
    body .simme-na .simme-na__runtime > div {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        min-height: 46px !important;
        padding: 9px 12px !important;
    }

    body .simme-na .simme-na__runtime > div b {
        flex: none !important;
    }
}

/* 3. Reusable mini Atlas orbit — larger without changing SVG geometry. */
.simme-atlas-return-icon--compact {
    --sna-atlas-orbit-size: 36px !important;
}

body .simme-na .simme-na__canonical-icon--atlas {
    --sna-atlas-orbit-size: 54px !important;
    width: var(--sna-atlas-orbit-size) !important;
    height: var(--sna-atlas-orbit-size) !important;
    min-width: var(--sna-atlas-orbit-size) !important;
    min-height: var(--sna-atlas-orbit-size) !important;
}

/* The large Explore-the-complete-Atlas CTA already has its own outer button
   frame, so the miniature orbit floats cleanly without a second square frame. */
body .simme-na .simme-na__canonical-link--atlas .simme-na__canonical-icon--atlas,
body .simme-na[data-theme="light"] .simme-na__canonical-link--atlas .simme-na__canonical-icon--atlas {
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body .simme-na .simme-na__canonical-link--atlas .simme-atlas-return-orbit-svg {
    filter:
        drop-shadow(0 0 5px rgba(36,191,255,.25))
        drop-shadow(0 0 7px rgba(180,81,255,.11));
}

@media (max-width: 700px) {
    .simme-atlas-return-icon--compact {
        --sna-atlas-orbit-size: 34px !important;
    }

    body .simme-na .simme-na__canonical-icon--atlas {
        --sna-atlas-orbit-size: 50px !important;
    }
}

@media (max-width: 420px) {
    .simme-atlas-return-icon--compact {
        --sna-atlas-orbit-size: 32px !important;
    }

    body .simme-na .simme-na__canonical-icon--atlas {
        --sna-atlas-orbit-size: 48px !important;
    }
}

/* ========================================================================
   V6.7 — INDIVIDUAL NODE PAGE OUTER FRAME + DESKTOP HEADER HEIGHT
   2026-08-14
   Scope is deliberately narrow:
   - keep the blue outer presentation border at exactly 5px on every viewport
   - cap the sticky site header at 100px on larger/tablet screens
   - preserve the existing compact-phone header sizing unchanged
   ======================================================================== */

/* 1. One consistent 5px blue presentation border on every device. */
body.simme-node-atlas-detail-page .simme-na--node-page {
    border-width: 5px !important;
}

@media (max-width: 1100px) {
    body.simme-node-atlas-detail-page .simme-na--node-page {
        border-width: 5px !important;
    }
}

@media (max-width: 700px) {
    body.simme-node-atlas-detail-page .simme-na--node-page {
        border-width: 5px !important;
    }
}

@media (max-width: 420px) {
    body.simme-node-atlas-detail-page .simme-na--node-page {
        border-width: 5px !important;
    }
}

/* 2. Large/tablet sticky header: maximum visual height 100px.
   The <=700px phone layout remains exactly as V6.6 (86px). */
@media (min-width: 701px) {
    body.simme-node-atlas-detail-page .simme-node-topbar54,
    body.simme-node-atlas-detail-page .simme-node-topbar54__inner {
        height: 100px !important;
        min-height: 100px !important;
        max-height: 100px !important;
    }

    body.simme-node-atlas-detail-page .simme-node-topbar54__inner {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    body.simme-node-atlas-detail-page .simme-node-topbar54__logo {
        width: 150px !important;
        height: auto !important;
        max-width: 150px !important;
        max-height: 82px !important;
    }
}



/* ========================================================================
   SYMSOUL NODE ATLAS V6.8 — MOBILE PREVIOUS / ATLAS / NEXT NAVIGATION DOCK
   Scope: mobile bottom navigation only. Desktop/tablet structure untouched.
   ======================================================================== */

@media (max-width: 640px) {
    /* One compact navigation dock replaces the three vertically stacked cards. */
    .simme-na .simme-na__node-nav {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 24px 0 0 !important;
        padding: 7px !important;
        border: 1px solid rgba(72, 196, 244, .38) !important;
        border-radius: 22px !important;
        background:
            radial-gradient(circle at 50% 0%, rgba(81, 188, 255, .08), transparent 54%),
            linear-gradient(180deg, rgba(15, 35, 54, .78), rgba(6, 18, 33, .92)) !important;
        box-shadow:
            inset 0 1px 0 rgba(190, 235, 255, .06),
            0 14px 34px rgba(0, 0, 0, .16) !important;
        overflow: hidden !important;
    }

    /* AJAX Atlas uses wrappers for the previous/next slots. */
    .simme-na .simme-na__node-nav > [data-simme-prev],
    .simme-na .simme-na__node-nav > [data-simme-next] {
        display: block !important;
        min-width: 0 !important;
        height: 100% !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour {
        display: grid !important;
        align-items: center !important;
        min-width: 0 !important;
        min-height: 66px !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 6px 8px !important;
        gap: 7px !important;
        border: 0 !important;
        border-radius: 15px !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: hidden !important;
        transition: background .2s ease, box-shadow .2s ease, transform .2s ease !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour--prev {
        grid-template-columns: 40px minmax(0, 1fr) !important;
        text-align: left !important;
        justify-content: stretch !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour--next {
        grid-template-columns: minmax(0, 1fr) 40px !important;
        text-align: right !important;
        justify-content: stretch !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour:hover,
    .simme-na .simme-na__node-nav .simme-na__neighbour:focus-visible {
        background: rgba(34, 160, 224, .08) !important;
        box-shadow: inset 0 0 22px rgba(56, 191, 255, .06) !important;
        transform: translateY(-1px) !important;
        outline: 0 !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour-media {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
        border-radius: 10px !important;
        box-shadow: 0 0 14px rgba(58, 193, 255, .06) !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour-copy {
        min-width: 0 !important;
        display: grid !important;
        align-content: center !important;
        gap: 2px !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour-copy small {
        color: #86a5c2 !important;
        font-size: 8px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        letter-spacing: .09em !important;
        white-space: nowrap !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour-copy b {
        display: -webkit-box !important;
        min-width: 0 !important;
        overflow: hidden !important;
        color: #eef7ff !important;
        font-size: 9.5px !important;
        line-height: 1.28 !important;
        font-weight: 720 !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    /* Centre Atlas action becomes the visual hub of the dock. The SVG itself
       has no surrounding icon box; only the dock supplies structure. */
    body .simme-na .simme-na__node-nav .simme-na__atlas-button,
    body .simme-na .simme-na__node-nav .simme-na__atlas-button:hover,
    body .simme-na .simme-na__node-nav .simme-na__atlas-button:focus,
    body .simme-na .simme-na__node-nav .simme-na__atlas-button:active {
        position: relative !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: grid !important;
        place-items: center !important;
        align-self: stretch !important;
        justify-self: stretch !important;
        width: 68px !important;
        min-width: 68px !important;
        min-height: 66px !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 15px !important;
        color: #eaf7ff !important;
        background: transparent !important;
        box-shadow:
            inset 1px 0 0 rgba(111, 184, 224, .14),
            inset -1px 0 0 rgba(111, 184, 224, .14) !important;
        overflow: visible !important;
    }

    body .simme-na .simme-na__node-nav .simme-na__atlas-button:hover,
    body .simme-na .simme-na__node-nav .simme-na__atlas-button:focus-visible {
        background: radial-gradient(circle, rgba(76, 190, 255, .12), transparent 66%) !important;
        box-shadow:
            inset 1px 0 0 rgba(111, 184, 224, .18),
            inset -1px 0 0 rgba(111, 184, 224, .18),
            0 0 24px rgba(72, 180, 255, .08) !important;
        outline: 0 !important;
    }

    .simme-na .simme-na__node-nav .simme-na__atlas-button > span:last-child {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .simme-na .simme-na__node-nav .simme-atlas-return-icon,
    .simme-na .simme-na__node-nav .simme-atlas-return-icon--compact {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        flex: 0 0 48px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .simme-na .simme-na__node-nav .simme-atlas-return-icon svg {
        width: 100% !important;
        height: 100% !important;
        overflow: visible !important;
        filter: drop-shadow(0 0 7px rgba(78, 197, 255, .18)) !important;
    }

    /* Keep the three controls on a single row in both the server-rendered
       individual Node page and the AJAX detail view. */
    .simme-na .simme-na__node-nav > :first-child {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
    }

    .simme-na .simme-na__node-nav > :last-child {
        grid-column: 3 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
    }
}

@media (max-width: 390px) {
    .simme-na .simme-na__node-nav {
        grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr) !important;
        padding: 6px !important;
        border-radius: 20px !important;
    }

    body .simme-na .simme-na__node-nav .simme-na__atlas-button,
    body .simme-na .simme-na__node-nav .simme-na__atlas-button:hover,
    body .simme-na .simme-na__node-nav .simme-na__atlas-button:focus,
    body .simme-na .simme-na__node-nav .simme-na__atlas-button:active {
        width: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
    }

    .simme-na .simme-na__node-nav .simme-atlas-return-icon,
    .simme-na .simme-na__node-nav .simme-atlas-return-icon--compact {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        flex-basis: 44px !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour {
        min-height: 60px !important;
        padding: 5px 6px !important;
        gap: 5px !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour--prev {
        grid-template-columns: 34px minmax(0, 1fr) !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour--next {
        grid-template-columns: minmax(0, 1fr) 34px !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour-media {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
        border-radius: 9px !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour-copy small {
        font-size: 7.5px !important;
        letter-spacing: .06em !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour-copy b {
        font-size: 8.5px !important;
        -webkit-line-clamp: 2 !important;
    }
}

@media (max-width: 340px) {
    .simme-na .simme-na__node-nav .simme-na__neighbour-copy b {
        display: none !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour-copy small {
        white-space: normal !important;
        line-height: 1.15 !important;
    }
}

/* V6.8 light-theme equivalent for the compact mobile navigation dock. */
@media (max-width: 640px) {
    .simme-na[data-theme="light"] .simme-na__node-nav {
        border-color: rgba(72, 158, 210, .30) !important;
        background:
            radial-gradient(circle at 50% 0%, rgba(69, 170, 226, .08), transparent 54%),
            linear-gradient(180deg, rgba(248, 252, 255, .96), rgba(236, 245, 252, .98)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .78),
            0 12px 30px rgba(41, 88, 122, .08) !important;
    }

    .simme-na[data-theme="light"] .simme-na__node-nav .simme-na__neighbour-copy small {
        color: #68839b !important;
    }

    .simme-na[data-theme="light"] .simme-na__node-nav .simme-na__neighbour-copy b {
        color: #15263a !important;
    }

    .simme-na[data-theme="light"] .simme-na__node-nav .simme-na__neighbour:hover,
    .simme-na[data-theme="light"] .simme-na__node-nav .simme-na__neighbour:focus-visible {
        background: rgba(46, 152, 213, .08) !important;
        box-shadow: inset 0 0 20px rgba(54, 166, 226, .05) !important;
    }

    body .simme-na[data-theme="light"] .simme-na__node-nav .simme-na__atlas-button,
    body .simme-na[data-theme="light"] .simme-na__node-nav .simme-na__atlas-button:hover,
    body .simme-na[data-theme="light"] .simme-na__node-nav .simme-na__atlas-button:focus,
    body .simme-na[data-theme="light"] .simme-na__node-nav .simme-na__atlas-button:active {
        box-shadow:
            inset 1px 0 0 rgba(64, 133, 177, .14),
            inset -1px 0 0 rgba(64, 133, 177, .14) !important;
    }
}

/* ========================================================================
   V6.9 — PREMIUM INDIVIDUAL-NODE DROP-DOWN NAVIGATION
   Reference-led redesign: dark floating panel, Simme mascot at top-left,
   separate Navigation / Integrations cards, restrained cyan edge-lighting.
   Existing WordPress main-simmes-navigation items remain the source of truth.
   ======================================================================== */

body.simme-node-atlas-detail-page .simme-node-topbar54__menu.simme-node-menu69 {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: clamp(14px, 3vw, 42px) !important;
    width: min(430px, calc(100vw - 28px)) !important;
    max-height: calc(100dvh - 126px) !important;
    margin: 0 !important;
    padding: 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border: 1px solid rgba(155, 177, 198, .34) !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 15% 0%, rgba(44, 174, 236, .10), transparent 31%),
        radial-gradient(circle at 92% 82%, rgba(25, 128, 211, .07), transparent 40%),
        linear-gradient(180deg, rgba(5, 15, 27, .985), rgba(4, 12, 23, .992)) !important;
    box-shadow:
        inset 0 1px 0 rgba(221, 244, 255, .055),
        inset 0 0 34px rgba(32, 163, 229, .025),
        0 20px 58px rgba(0, 0, 0, .48),
        0 0 0 1px rgba(0, 0, 0, .28) !important;
    isolation: isolate !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(72, 184, 240, .28) transparent !important;
}

body.simme-node-atlas-detail-page .simme-node-topbar54__menu.simme-node-menu69::-webkit-scrollbar {
    width: 6px !important;
}
body.simme-node-atlas-detail-page .simme-node-topbar54__menu.simme-node-menu69::-webkit-scrollbar-track {
    background: transparent !important;
}
body.simme-node-atlas-detail-page .simme-node-topbar54__menu.simme-node-menu69::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(80, 190, 243, .24) !important;
}

.simme-node-menu69[hidden] {
    display: none !important;
}

/* Star field + very quiet flowing contour light. */
.simme-node-menu69__chrome,
.simme-node-menu69__chrome::before,
.simme-node-menu69__chrome::after {
    position: absolute !important;
    content: "" !important;
    pointer-events: none !important;
}

.simme-node-menu69__chrome {
    z-index: -2 !important;
    inset: 0 !important;
    border-radius: inherit !important;
    opacity: .62 !important;
    background-image:
        radial-gradient(circle, rgba(91, 190, 239, .30) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(174, 217, 244, .16) 0 .8px, transparent 1.4px) !important;
    background-position: 0 0, 13px 15px !important;
    background-size: 30px 30px, 44px 44px !important;
    mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.25) 100%) !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.25) 100%) !important;
}

.simme-node-menu69__chrome::before {
    z-index: -1 !important;
    right: -105px !important;
    bottom: -126px !important;
    width: 330px !important;
    height: 420px !important;
    opacity: .34 !important;
    border-radius: 50% !important;
    background:
        repeating-radial-gradient(
            ellipse at 65% 78%,
            transparent 0 18px,
            rgba(51, 166, 228, .22) 19px 20px,
            transparent 21px 31px
        ) !important;
    transform: rotate(-24deg) !important;
    filter: drop-shadow(0 0 9px rgba(38, 153, 215, .08)) !important;
}

.simme-node-menu69__chrome::after {
    z-index: -1 !important;
    left: 20px !important;
    top: 78px !important;
    width: 180px !important;
    height: 120px !important;
    border-radius: 50% !important;
    opacity: .18 !important;
    background: radial-gradient(ellipse, rgba(53, 195, 255, .14), transparent 66%) !important;
    filter: blur(18px) !important;
}

.simme-node-menu69__header {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 64px !important;
    padding: 2px 4px 10px !important;
}

/* Reuse the official full header logo but crop the image to its mascot only. */
.simme-node-menu69__mascot {
    position: relative !important;
    display: block !important;
    width: 62px !important;
    height: 64px !important;
    flex: 0 0 62px !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    filter: drop-shadow(0 0 11px rgba(35, 190, 255, .12)) !important;
}

.simme-node-menu69__mascot img {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    display: block !important;
    width: auto !important;
    height: 64px !important;
    max-width: none !important;
    max-height: 64px !important;
    margin: 0 !important;
    object-fit: contain !important;
    transform: translateY(-50%) !important;
    filter: none !important;
}

body .simme-node-menu69__close,
body .simme-node-menu69__close:hover,
body .simme-node-menu69__close:focus,
body .simme-node-menu69__close:active {
    position: relative !important;
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    cursor: pointer !important;
}

.simme-node-menu69__close span {
    position: absolute !important;
    left: 9px !important;
    top: 20px !important;
    display: block !important;
    width: 25px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #eaf6ff !important;
    box-shadow: 0 0 8px rgba(123, 214, 255, .10) !important;
}
.simme-node-menu69__close span:first-child { transform: rotate(45deg) !important; }
.simme-node-menu69__close span:last-child { transform: rotate(-45deg) !important; }
body .simme-node-menu69__close:hover,
body .simme-node-menu69__close:focus-visible {
    background: rgba(74, 183, 238, .08) !important;
    box-shadow: inset 0 0 0 1px rgba(91, 195, 246, .15) !important;
}

.simme-node-menu69__body {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    gap: 16px !important;
}

.simme-node-menu69__group {
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    padding: 17px 16px 16px !important;
    overflow: hidden !important;
    border: 1px solid rgba(75, 181, 235, .45) !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 96% 0%, rgba(46, 184, 247, .085), transparent 32%),
        linear-gradient(180deg, rgba(14, 40, 61, .62), rgba(7, 27, 44, .74)) !important;
    box-shadow:
        inset 0 1px 0 rgba(214, 241, 255, .045),
        inset 0 0 24px rgba(39, 177, 241, .025),
        0 0 17px rgba(35, 168, 233, .055) !important;
}

.simme-node-menu69__group::after {
    position: absolute !important;
    right: -22px !important;
    bottom: -25px !important;
    width: 130px !important;
    height: 130px !important;
    content: "" !important;
    pointer-events: none !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(39, 173, 236, .08), transparent 68%) !important;
}

.simme-node-menu69__group-title {
    position: relative !important;
    z-index: 2 !important;
    margin: 0 0 10px !important;
    padding: 0 2px !important;
    color: #55c9ff !important;
    -webkit-text-fill-color: #55c9ff !important;
    font: 760 11px/1.2 Arial, Helvetica, sans-serif !important;
    letter-spacing: .19em !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 12px rgba(74, 195, 255, .18) !important;
}

.simme-node-menu69__links {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    gap: 2px !important;
}

.simme-node-topbar54__menu.simme-node-menu69 .simme-node-menu69__link,
.simme-node-topbar54__menu.simme-node-menu69 .simme-node-menu69__link:hover,
.simme-node-topbar54__menu.simme-node-menu69 .simme-node-menu69__link:focus,
.simme-node-topbar54__menu.simme-node-menu69 .simme-node-menu69__link:active,
.simme-node-topbar54__menu.simme-node-menu69 .simme-node-menu69__link:visited {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) 18px !important;
    align-items: center !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 7px 5px 7px 3px !important;
    gap: 10px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #e2edf6 !important;
    -webkit-text-fill-color: #e2edf6 !important;
    text-decoration: none !important;
    font: 600 15px/1.28 Arial, Helvetica, sans-serif !important;
    letter-spacing: -.01em !important;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.simme-node-topbar54__menu.simme-node-menu69 .simme-node-menu69__link:hover,
.simme-node-topbar54__menu.simme-node-menu69 .simme-node-menu69__link:focus-visible {
    background: rgba(48, 166, 224, .075) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(72, 191, 246, .07), 0 0 18px rgba(47, 181, 241, .035) !important;
    transform: translateX(2px) !important;
    outline: 0 !important;
}

.simme-node-menu69__link--child {
    padding-left: 14px !important;
}

.simme-node-menu69__link-icon {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    color: #36bfff !important;
    -webkit-text-fill-color: currentColor !important;
    filter: drop-shadow(0 0 7px rgba(55, 190, 255, .18)) !important;
}

.simme-node-menu69__link-icon > svg:not(.simme-atlas-orbit-svg) {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    overflow: visible !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* The Atlas item gets the real reusable animated miniature. */
.simme-node-menu69__link--atlas .simme-node-menu69__link-icon {
    width: 30px !important;
    height: 30px !important;
}
.simme-node-menu69__link--atlas .simme-node-menu69__link-icon .simme-atlas-orbit-svg,
.simme-node-menu69__link--atlas .simme-node-menu69__link-icon svg {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    max-width: none !important;
    overflow: visible !important;
}

.simme-node-menu69__link-label {
    display: block !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

.simme-node-menu69__chevron {
    display: grid !important;
    place-items: center !important;
    width: 18px !important;
    height: 24px !important;
    color: rgba(220, 236, 246, .78) !important;
}
.simme-node-menu69__chevron svg {
    display: block !important;
    width: 9px !important;
    height: 15px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* The close button inside the new panel owns the X while open. */
body.simme-node-atlas-detail-page .simme-node-topbar54.is-node-menu-open .simme-node-topbar54__burger {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 700px) {
    body.simme-node-atlas-detail-page .simme-node-topbar54__menu.simme-node-menu69 {
        top: calc(100% + 8px) !important;
        right: 8px !important;
        width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 104px) !important;
        padding: 13px !important;
        border-radius: 21px !important;
    }

    .simme-node-menu69__header {
        min-height: 56px !important;
        padding-bottom: 8px !important;
    }

    .simme-node-menu69__mascot {
        width: 56px !important;
        height: 56px !important;
        flex-basis: 56px !important;
    }
    .simme-node-menu69__mascot img {
        height: 56px !important;
        max-height: 56px !important;
    }

    .simme-node-menu69__body {
        gap: 13px !important;
    }

    .simme-node-menu69__group {
        padding: 14px 13px 13px !important;
        border-radius: 18px !important;
    }

    .simme-node-topbar54__menu.simme-node-menu69 .simme-node-menu69__link {
        min-height: 42px !important;
        grid-template-columns: 28px minmax(0, 1fr) 16px !important;
        gap: 9px !important;
        padding-block: 6px !important;
        font-size: 14px !important;
    }

    .simme-node-menu69__link-icon {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
    }
}

@media (max-width: 390px) {
    body.simme-node-atlas-detail-page .simme-node-topbar54__menu.simme-node-menu69 {
        padding: 11px !important;
        border-radius: 19px !important;
    }
    .simme-node-menu69__group {
        padding: 13px 11px 12px !important;
    }
    .simme-node-menu69__group-title {
        font-size: 10px !important;
    }
    .simme-node-topbar54__menu.simme-node-menu69 .simme-node-menu69__link {
        font-size: 13px !important;
    }
}

/* V6.9 QA correction: include padding/border inside the declared panel width
   and crop the official full wordmark tightly enough to show mascot only. */
body.simme-node-atlas-detail-page .simme-node-topbar54__menu.simme-node-menu69 {
    box-sizing: border-box !important;
}
.simme-node-menu69__mascot {
    width: 50px !important;
    flex-basis: 50px !important;
}
@media (max-width: 700px) {
    .simme-node-menu69__mascot {
        width: 46px !important;
        flex-basis: 46px !important;
    }
}

/* ========================================================================
   V6.11 — TINY SIMME PEEK MASCOT ON NODE-PAGE MENU
   Uses the supplied Tiny-Paste-Pallet.svg as a true transparent peeking
   character centred over the top Navigation card. V6.11 raises only the character itself so its hands sit just over the Navigation panel line without moving that panel. The V6.9 menu structure,
   groups, links, icons, star field and interactions remain unchanged.
   ======================================================================== */

/* The close control keeps the top-right header area; the character is taken
   out of normal flow and overlaps the centre of the first menu card. */
body.simme-node-atlas-detail-page .simme-node-menu69__header {
    justify-content: flex-end !important;
    min-height: 64px !important;
    padding: 2px 4px 12px !important;
    overflow: visible !important;
}

body.simme-node-atlas-detail-page .simme-node-menu69__mascot {
    position: absolute !important;
    z-index: 8 !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: -7px !important;
    display: block !important;
    width: 112px !important;
    height: auto !important;
    max-width: none !important;
    flex: none !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter:
        drop-shadow(0 6px 8px rgba(0,0,0,.34))
        drop-shadow(0 0 11px rgba(22,180,255,.12)) !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
}

body.simme-node-atlas-detail-page .simme-node-menu69__mascot img {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: none !important;
    filter: none !important;
}

/* Give the character's hands/head room without moving the card itself. */
body.simme-node-atlas-detail-page .simme-node-menu69__group--navigation {
    overflow: visible !important;
    padding-top: 34px !important;
}

/* Keep the heading comfortably below the character while preserving the
   original V6.9 typography and alignment. */
body.simme-node-atlas-detail-page .simme-node-menu69__group--navigation .simme-node-menu69__group-title {
    margin-top: 2px !important;
}

@media (max-width: 700px) {
    body.simme-node-atlas-detail-page .simme-node-menu69__header {
        min-height: 58px !important;
        padding-bottom: 10px !important;
    }

    body.simme-node-atlas-detail-page .simme-node-menu69__mascot {
        bottom: -4px !important;
        width: 98px !important;
    }

    body.simme-node-atlas-detail-page .simme-node-menu69__group--navigation {
        padding-top: 31px !important;
    }
}

@media (max-width: 390px) {
    body.simme-node-atlas-detail-page .simme-node-menu69__mascot {
        bottom: -2px !important;
        width: 90px !important;
    }

    body.simme-node-atlas-detail-page .simme-node-menu69__group--navigation {
        padding-top: 29px !important;
    }
}


/* ========================================================================
   SIMME — GLOBAL STICKY HEADER + PREMIUM MENU
   Standalone reusable component
   Shortcode: [simme_sticky_header]
   Added to complete site stylesheet on 2026-08-14
   ======================================================================== */

/* ========================================================================
   SIMME — GLOBAL STICKY HEADER + PREMIUM MENU V1.0
   Shortcode: [simme_sticky_header]
   WordPress / Themify Ultra

   This is the COMPLETE stylesheet for the standalone reusable header.
   It does not depend on the SymSoul Node Atlas stylesheet.
   ======================================================================== */

.simme-global-header,
.simme-global-header *,
.simme-global-header *::before,
.simme-global-header *::after {
    box-sizing: border-box !important;
}

.simme-global-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100100 !important;
    display: block !important;
    width: 100vw !important;
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
    padding: 0 !important;
    overflow: visible !important;
    color: #eaf4fb !important;
    background: rgba(2, 4, 5, .76) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.08) !important;
    backdrop-filter: blur(8px) saturate(1.08) !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    isolation: isolate !important;
    color-scheme: dark !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

body.admin-bar .simme-global-header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar .simme-global-header {
        top: 46px !important;
    }
}

.simme-global-header__inner {
    position: relative !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: min(100%, 1770px) !important;
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    margin: 0 auto !important;
    padding: 6px clamp(30px, 7.8vw, 174px) !important;
    gap: 20px !important;
}

.simme-global-header__brand,
.simme-global-header__brand:hover,
.simme-global-header__brand:focus,
.simme-global-header__brand:active,
.simme-global-header__brand:visited {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
    outline: 0 !important;
}

.simme-global-header__logo {
    display: block !important;
    width: 150px !important;
    height: auto !important;
    max-width: 150px !important;
    max-height: 82px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: left center !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}

body .simme-global-header__burger,
body .simme-global-header__burger:hover,
body .simme-global-header__burger:focus,
body .simme-global-header__burger:active {
    position: relative !important;
    z-index: 7 !important;
    display: grid !important;
    place-content: center !important;
    gap: 5px !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
}

.simme-global-header__burger span {
    display: block !important;
    width: 28px !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 0 8px rgba(255,255,255,.05) !important;
    transform-origin: center !important;
    transition: transform .18s ease, opacity .15s ease !important;
}

.simme-global-header__burger:focus-visible {
    outline: 2px solid rgba(85, 201, 255, .92) !important;
    outline-offset: 5px !important;
    border-radius: 8px !important;
}

.simme-global-header__menu {
    position: absolute !important;
    z-index: 8 !important;
    top: calc(100% + 12px) !important;
    right: clamp(14px, 7.8vw, 174px) !important;
    display: block !important;
    width: min(430px, calc(100vw - 28px)) !important;
    max-height: calc(100dvh - 126px) !important;
    margin: 0 !important;
    padding: 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border: 1px solid rgba(155, 177, 198, .34) !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 15% 0%, rgba(44, 174, 236, .10), transparent 31%),
        radial-gradient(circle at 92% 82%, rgba(25, 128, 211, .07), transparent 40%),
        linear-gradient(180deg, rgba(5, 15, 27, .985), rgba(4, 12, 23, .992)) !important;
    box-shadow:
        inset 0 1px 0 rgba(221, 244, 255, .055),
        inset 0 0 34px rgba(32, 163, 229, .025),
        0 20px 58px rgba(0, 0, 0, .48),
        0 0 0 1px rgba(0, 0, 0, .28) !important;
    isolation: isolate !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(72, 184, 240, .28) transparent !important;
}

.simme-global-header__menu[hidden] {
    display: none !important;
}

.simme-global-header__menu::-webkit-scrollbar {
    width: 6px !important;
}

.simme-global-header__menu::-webkit-scrollbar-track {
    background: transparent !important;
}

.simme-global-header__menu::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(80, 190, 243, .24) !important;
}

.simme-global-header__menu-chrome,
.simme-global-header__menu-chrome::before,
.simme-global-header__menu-chrome::after {
    position: absolute !important;
    content: "" !important;
    pointer-events: none !important;
}

.simme-global-header__menu-chrome {
    z-index: -2 !important;
    inset: 0 !important;
    border-radius: inherit !important;
    opacity: .62 !important;
    background-image:
        radial-gradient(circle, rgba(91, 190, 239, .30) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(174, 217, 244, .16) 0 .8px, transparent 1.4px) !important;
    background-position: 0 0, 13px 15px !important;
    background-size: 30px 30px, 44px 44px !important;
    mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.25) 100%) !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.25) 100%) !important;
}

.simme-global-header__menu-chrome::before {
    z-index: -1 !important;
    right: -105px !important;
    bottom: -126px !important;
    width: 330px !important;
    height: 420px !important;
    opacity: .34 !important;
    border-radius: 50% !important;
    background:
        repeating-radial-gradient(
            ellipse at 65% 78%,
            transparent 0 18px,
            rgba(51, 166, 228, .22) 19px 20px,
            transparent 21px 31px
        ) !important;
    transform: rotate(-24deg) !important;
    filter: drop-shadow(0 0 9px rgba(38, 153, 215, .08)) !important;
}

.simme-global-header__menu-chrome::after {
    z-index: -1 !important;
    left: 20px !important;
    top: 78px !important;
    width: 180px !important;
    height: 120px !important;
    border-radius: 50% !important;
    opacity: .18 !important;
    background: radial-gradient(ellipse, rgba(53, 195, 255, .14), transparent 66%) !important;
    filter: blur(18px) !important;
}

.simme-global-header__menu-head {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 2px 4px 12px !important;
    overflow: visible !important;
}

.simme-global-header__peek {
    position: absolute !important;
    z-index: 8 !important;
    left: 50% !important;
    bottom: -7px !important;
    display: block !important;
    width: 112px !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter:
        drop-shadow(0 6px 8px rgba(0,0,0,.34))
        drop-shadow(0 0 11px rgba(22,180,255,.12)) !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
}

.simme-global-header__peek img {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    border: 0 !important;
    transform: none !important;
    filter: none !important;
}

body .simme-global-header__close,
body .simme-global-header__close:hover,
body .simme-global-header__close:focus,
body .simme-global-header__close:active {
    position: relative !important;
    display: block !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #e8f4fb !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    outline: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
}

.simme-global-header__close span {
    position: absolute !important;
    left: 9px !important;
    top: 20px !important;
    display: block !important;
    width: 25px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    transform-origin: center !important;
}

.simme-global-header__close span:first-child {
    transform: rotate(45deg) !important;
}

.simme-global-header__close span:last-child {
    transform: rotate(-45deg) !important;
}

body .simme-global-header__close:hover,
body .simme-global-header__close:focus-visible {
    background: rgba(74, 183, 238, .08) !important;
    box-shadow: inset 0 0 0 1px rgba(91, 195, 246, .15) !important;
    outline: 0 !important;
}

.simme-global-header__menu-body {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    gap: 16px !important;
}

.simme-global-header__group {
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    padding: 17px 16px 16px !important;
    overflow: hidden !important;
    border: 1px solid rgba(75, 181, 235, .45) !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 96% 0%, rgba(46, 184, 247, .085), transparent 32%),
        linear-gradient(180deg, rgba(14, 40, 61, .62), rgba(7, 27, 44, .74)) !important;
    box-shadow:
        inset 0 1px 0 rgba(214, 241, 255, .045),
        inset 0 0 24px rgba(39, 177, 241, .025),
        0 0 17px rgba(35, 168, 233, .055) !important;
}

.simme-global-header__group--navigation {
    overflow: visible !important;
    padding-top: 34px !important;
}

.simme-global-header__group::after {
    position: absolute !important;
    right: -22px !important;
    bottom: -25px !important;
    width: 130px !important;
    height: 130px !important;
    content: "" !important;
    pointer-events: none !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(39, 173, 236, .08), transparent 68%) !important;
}

.simme-global-header__group-title {
    position: relative !important;
    z-index: 2 !important;
    margin: 2px 0 10px !important;
    padding: 0 2px !important;
    color: #55c9ff !important;
    -webkit-text-fill-color: #55c9ff !important;
    font: 760 11px/1.2 Arial, Helvetica, sans-serif !important;
    letter-spacing: .19em !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 12px rgba(74, 195, 255, .18) !important;
}

.simme-global-header__links {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    gap: 2px !important;
}

.simme-global-header__link,
.simme-global-header__link:hover,
.simme-global-header__link:focus,
.simme-global-header__link:active,
.simme-global-header__link:visited {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) 18px !important;
    align-items: center !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 7px 5px 7px 3px !important;
    gap: 10px !important;
    color: #e2edf6 !important;
    -webkit-text-fill-color: #e2edf6 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font: 600 15px/1.28 Arial, Helvetica, sans-serif !important;
    letter-spacing: -.01em !important;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.simme-global-header__link:hover,
.simme-global-header__link:focus-visible,
.simme-global-header__link[aria-current="page"] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: rgba(48, 166, 224, .075) !important;
    box-shadow:
        inset 0 0 0 1px rgba(72, 191, 246, .07),
        0 0 18px rgba(47, 181, 241, .035) !important;
    transform: translateX(2px) !important;
    outline: 0 !important;
}

.simme-global-header__link--child {
    padding-left: 14px !important;
}

.simme-global-header__link-icon {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    color: #36bfff !important;
    -webkit-text-fill-color: currentColor !important;
    filter: drop-shadow(0 0 7px rgba(55, 190, 255, .18)) !important;
}

.simme-global-header__link-icon > svg:not(.simme-global-header__orbit-svg) {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    overflow: visible !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.simme-global-header__link--atlas .simme-global-header__link-icon {
    width: 30px !important;
    height: 30px !important;
}

.simme-global-header__orbit-svg {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    max-width: none !important;
    overflow: visible !important;
}

.simme-global-header__link-label {
    display: block !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

.simme-global-header__chevron {
    display: grid !important;
    place-items: center !important;
    width: 18px !important;
    height: 24px !important;
    color: rgba(220, 236, 246, .78) !important;
}

.simme-global-header__chevron svg {
    display: block !important;
    width: 9px !important;
    height: 15px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.simme-global-header.is-menu-open .simme-global-header__burger {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 700px) {
    .simme-global-header {
        height: 86px !important;
        min-height: 86px !important;
        max-height: 86px !important;
    }

    .simme-global-header__inner {
        width: 100% !important;
        height: 86px !important;
        min-height: 86px !important;
        max-height: 86px !important;
        padding: 5px 16px !important;
        gap: 14px !important;
    }

    .simme-global-header__logo {
        width: 150px !important;
        height: auto !important;
        max-width: 150px !important;
        max-height: 76px !important;
    }

    body .simme-global-header__burger,
    body .simme-global-header__burger:hover,
    body .simme-global-header__burger:focus,
    body .simme-global-header__burger:active {
        flex-basis: 38px !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    .simme-global-header__burger span {
        width: 26px !important;
    }

    .simme-global-header__menu {
        top: calc(100% + 8px) !important;
        right: 8px !important;
        width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 104px) !important;
        padding: 13px !important;
        border-radius: 21px !important;
    }

    .simme-global-header__menu-head {
        min-height: 58px !important;
        padding-bottom: 10px !important;
    }

    .simme-global-header__peek {
        bottom: -4px !important;
        width: 98px !important;
    }

    .simme-global-header__menu-body {
        gap: 13px !important;
    }

    .simme-global-header__group {
        padding: 14px 13px 13px !important;
        border-radius: 18px !important;
    }

    .simme-global-header__group--navigation {
        padding-top: 31px !important;
    }

    .simme-global-header__link,
    .simme-global-header__link:hover,
    .simme-global-header__link:focus,
    .simme-global-header__link:active,
    .simme-global-header__link:visited {
        grid-template-columns: 28px minmax(0, 1fr) 16px !important;
        min-height: 42px !important;
        padding-block: 6px !important;
        gap: 9px !important;
        font-size: 14px !important;
    }

    .simme-global-header__link-icon {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
    }
}

@media (max-width: 390px) {
    .simme-global-header__menu {
        padding: 11px !important;
        border-radius: 19px !important;
    }

    .simme-global-header__peek {
        bottom: -2px !important;
        width: 90px !important;
    }

    .simme-global-header__group {
        padding: 13px 11px 12px !important;
    }

    .simme-global-header__group--navigation {
        padding-top: 29px !important;
    }

    .simme-global-header__group-title {
        font-size: 10px !important;
    }

    .simme-global-header__link,
    .simme-global-header__link:hover,
    .simme-global-header__link:focus,
    .simme-global-header__link:active,
    .simme-global-header__link:visited {
        font-size: 13px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .simme-global-header__burger span,
    .simme-global-header__link {
        transition-duration: .01ms !important;
    }
}
/* ========================================================================
   SIMME GLOBAL STICKY HEADER — SINGLE-SOURCE LEGACY BRIDGE V1.1
   2026-08-14

   The individual SymSoul Node pages previously generated their own copied
   header/menu markup from the Node Atlas PHP. The Global Sticky Header
   snippet now auto-renders the canonical .simme-global-header on those pages.

   Retire only the old Node-specific header copies. The Node reader, Atlas
   controls, theme switch, animated Atlas return icon and page framing remain
   completely untouched.

   This final override is deliberately placed at the END of the full CSS so
   historic Node-header rules cannot bring a legacy copy back into view.
   ======================================================================== */

body.simme-node-atlas-detail-page .simme-node-topbar,
body.simme-node-atlas-detail-page .simme-node-site-topbar-exact,
body.simme-node-atlas-detail-page .simme-node-normal-header,
body.simme-node-atlas-detail-page .simme-node-topbar54 {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* The shared component is the only site header allowed on generated Node pages. */
body.simme-node-atlas-detail-page .simme-global-header {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
/* ========================================================================
   SIMME GLOBAL STICKY HEADER V1.3 — TRUE TRANSPARENCY THROUGH THEMIFY ROW
   2026-08-14

   V1.2 made the header surface translucent, but a solid Themify row/module
   behind it could still make the result LOOK completely opaque. The shared
   header JavaScript now marks only the Themify containers that actually host
   this component. These rules clear those host surfaces so the page itself is
   what shows through the glass bar while scrolling.
   ======================================================================== */

.simme-global-header-host {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    overflow: visible !important;
}

.simme-global-header-host::before,
.simme-global-header-host::after {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Themify can place a separate cover/frame layer inside a row. Neutralise it
   only when JavaScript has identified that row as the sticky-header host. */
.module_row.simme-global-header-host > .builder_row_cover,
.module_row.simme-global-header-host > .tb_row_frame,
.module_row.simme-global-header-host > .row-slider,
.module_row.simme-global-header-host > .row-slider-slides,
.module_row.simme-global-header-host > .video-wrap,
.module_row.simme-global-header-host > .tb_video_background {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Keep the canonical shared bar visibly glassy over the real page. */
.simme-global-header {
    background: rgba(2, 4, 5, .76) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.08) !important;
    backdrop-filter: blur(8px) saturate(1.08) !important;
}

/* Safari/WebKit needs the layer to remain composited for backdrop-filter to
   sample the page behind it consistently while scrolling. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .simme-global-header {
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
    }
}

/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V23 BREATHING ROOM
   14 AUGUST 2026

   Purpose
   - Keeps the approved comparison design intact.
   - Restores a calmer vertical rhythm between heading, topic controls
     and the With / Without cards.
   - Gives the topic controls a little more height and presence.
   - Opens the desktop VS channel slightly without changing its artwork.
   - Adds modest internal card breathing room while preserving the
     existing colour, typography, assets, interaction and mobile VS logic.
   ========================================================= */

/* Give the whole comparison module a little more air without making it
   feel detached from the surrounding homepage sections. */
.sscr {
    padding-top: clamp(24px, 2.8vw, 38px) !important;
    padding-bottom: clamp(28px, 3vw, 42px) !important;
}

/* The heading was previously pulled very close to the controls. */
.sscr__intro {
    margin-bottom: clamp(20px, 1.7vw, 28px) !important;
}

/* Preserve the frameless topic area but create a deliberate pause before
   the comparison cards. */
.sscr__rail {
    padding: 0 0 clamp(20px, 1.7vw, 26px) !important;
    margin-bottom: clamp(8px, .8vw, 12px) !important;
}

.sscr__rail-label {
    margin-bottom: 11px !important;
    padding-inline: 2px !important;
}

.sscr__rail-list {
    gap: clamp(9px, .9vw, 14px) !important;
}

/* Re-open the topic buttons just enough for the icon and label to sit with
   more confidence. No change to their approved visual language. */
.sscr__topic,
.sscr__topic:hover,
.sscr__topic:focus,
.sscr__topic:focus-visible,
.sscr__topic:active {
    min-height: 76px !important;
    gap: 7px !important;
    padding: 9px 8px 11px !important;
    border-radius: 16px !important;
}

.sscr__topic-visual {
    width: clamp(28px, 2.55vw, 38px) !important;
    height: clamp(28px, 2.55vw, 38px) !important;
}

.sscr__topic-text {
    font-size: clamp(.86rem, 1.03vw, 1rem) !important;
    line-height: 1.1 !important;
}

/* Frameless stage remains visually invisible; spacing comes from the
   surrounding rhythm rather than a new container. */
.sscr__stage {
    padding: 0 !important;
}

/* Slightly more generous card rhythm. */
.sscr__card {
    padding-top: clamp(26px, 2.35vw, 34px) !important;
    padding-bottom: clamp(28px, 2.5vw, 36px) !important;
}

.sscr__card-top {
    gap: clamp(17px, 1.5vw, 22px) !important;
    margin-bottom: clamp(22px, 1.8vw, 28px) !important;
}

.sscr__points {
    gap: clamp(16px, 1.35vw, 22px) !important;
}

.sscr__points li {
    line-height: 1.5 !important;
}

/* Desktop: enlarge the central breathing channel slightly. The supplied
   VS image remains centred in its own track and still visually bridges the
   two comparison cards without crowding either side. */
@media (min-width: 861px) {
    .sscr__compare {
        grid-template-columns:
            minmax(0, 1fr)
            clamp(68px, 5.2vw, 84px)
            minmax(0, 1fr) !important;
    }

    .sscr__vs img {
        width: clamp(78px, 6vw, 94px) !important;
    }
}

/* Tablet: retain all four topic controls and the proven stacked-card VS
   behaviour, while avoiding the desktop section's former compressed feel. */
@media (max-width: 860px) {
    .sscr {
        padding-top: 22px !important;
        padding-bottom: 30px !important;
    }

    .sscr__intro {
        margin-bottom: 18px !important;
    }

    .sscr__rail {
        padding: 0 0 18px !important;
        margin-bottom: 7px !important;
    }

    .sscr__rail-list {
        gap: 8px !important;
    }

    .sscr__topic,
    .sscr__topic:hover,
    .sscr__topic:focus,
    .sscr__topic:focus-visible,
    .sscr__topic:active {
        min-height: 64px !important;
        gap: 5px !important;
        padding: 7px 5px 8px !important;
        border-radius: 14px !important;
    }

    .sscr__topic-visual {
        width: 27px !important;
        height: 27px !important;
    }

    .sscr__topic-text {
        font-size: .82rem !important;
    }

    .sscr__card {
        padding-top: 22px !important;
        padding-bottom: 24px !important;
    }

    .sscr__card-top {
        gap: 16px !important;
        margin-bottom: 20px !important;
    }

    .sscr__points {
        gap: 16px !important;
    }
}

@media (max-width: 640px) {
    .sscr {
        padding-top: 20px !important;
        padding-bottom: 26px !important;
    }

    .sscr__intro {
        margin-bottom: 16px !important;
    }

    .sscr__rail {
        padding: 0 0 16px !important;
        margin-bottom: 6px !important;
    }

    .sscr__rail-label {
        margin-bottom: 8px !important;
    }

    .sscr__topic,
    .sscr__topic:hover,
    .sscr__topic:focus,
    .sscr__topic:focus-visible,
    .sscr__topic:active {
        min-height: 60px !important;
        gap: 4px !important;
        padding: 6px 4px 8px !important;
        border-radius: 13px !important;
    }

    .sscr__topic-visual {
        width: 24px !important;
        height: 24px !important;
    }

    .sscr__topic-text {
        font-size: .76rem !important;
    }

    .sscr__card {
        padding-top: 20px !important;
        padding-bottom: 22px !important;
    }

    .sscr__card-top {
        margin-bottom: 18px !important;
    }

    .sscr__points {
        gap: 14px !important;
    }
}

@media (max-width: 420px) {
    .sscr {
        padding-top: 18px !important;
        padding-bottom: 24px !important;
    }

    .sscr__intro {
        margin-bottom: 14px !important;
    }

    .sscr__rail {
        padding: 0 0 14px !important;
        margin-bottom: 5px !important;
    }

    .sscr__rail-list {
        gap: 5px !important;
    }

    .sscr__topic,
    .sscr__topic:hover,
    .sscr__topic:focus,
    .sscr__topic:focus-visible,
    .sscr__topic:active {
        min-height: 56px !important;
        padding: 5px 2px 7px !important;
        border-radius: 12px !important;
    }

    .sscr__topic-visual {
        width: 22px !important;
        height: 22px !important;
    }

    .sscr__topic-text {
        font-size: .70rem !important;
    }

    .sscr__card-top {
        margin-bottom: 16px !important;
    }

    .sscr__points {
        gap: 13px !important;
    }
}

/* ========================================================================
   SIMME HOMEPAGE — SYMSOUL COVERFLOW V12 RESPONSIVE CONTAINMENT
   14 AUGUST 2026

   Purpose:
   - protects the rounded top of the cards from the coverflow clipping edge;
   - adds a proper 3D headroom allowance for the active card and its glow;
   - reins in outer-card spread at the intermediate breakpoints where cards
     could reach the page/frame edge;
   - preserves the existing six-card design, reflections, controls, links,
     drag/swipe, wheel and keyboard behaviour;
   - scoped exclusively to .sscf.
   ======================================================================== */

/* The active card is translated towards the viewer and therefore projects
   slightly larger than its raw CSS width/height. Give that projected shape a
   reliable top safety zone instead of allowing .sscf__surface to shave the
   rounded corners at particular viewport widths. */
.sscf__surface {
    padding-top: 42px;
}

.sscf__stage {
    height: clamp(530px, 42vw, 600px);
}

.sscf__card,
.sscf__card:hover,
.sscf__card:focus,
.sscf__card:active,
.sscf__card:visited {
    top: 44.5% !important;
}

/* Mid-size desktop / landscape tablet.
   Slightly reduce the outer-card travel so the furthest panels remain within
   the usable page frame instead of meeting the clipping edge. */
@media (max-width: 1180px) {
    .sscf {
        --sscf-step: clamp(116px, 14vw, 166px);
    }

    .sscf__surface {
        padding-top: 38px;
    }

    .sscf__stage {
        height: 530px;
    }

    .sscf__card,
    .sscf__card:hover,
    .sscf__card:focus,
    .sscf__card:active,
    .sscf__card:visited {
        top: 44.5% !important;
    }
}

/* Tablet / small laptop is the most sensitive range because the cards are
   still multi-panel while the original stage had already become shallower. */
@media (max-width: 860px) {
    .sscf {
        --sscf-step: clamp(112px, 18vw, 150px);
    }

    .sscf__surface {
        padding-top: 38px;
    }

    .sscf__stage {
        height: 535px;
    }
}

/* Phone / portrait tablet.
   Retain the deliberate adjacent-card peek, but draw it slightly further
   inside the composition and increase vertical headroom so neither the active
   rounded corner nor its glow is cut off. */
@media (max-width: 640px) {
    .sscf {
        --sscf-step: min(64vw, 246px);
    }

    .sscf__surface {
        padding-top: 34px;
    }

    .sscf__stage {
        height: clamp(590px, 140vw, 620px);
    }

    .sscf__card,
    .sscf__card:hover,
    .sscf__card:focus,
    .sscf__card:active,
    .sscf__card:visited {
        top: 43% !important;
    }
}

/* Very narrow phones need their own balance because the title/media stack
   becomes relatively tall compared with the stage. */
@media (max-width: 380px) {
    .sscf {
        --sscf-step: min(64vw, 236px);
    }

    .sscf__surface {
        padding-top: 32px;
    }

    .sscf__stage {
        height: 570px;
    }

    .sscf__card,
    .sscf__card:hover,
    .sscf__card:focus,
    .sscf__card:active,
    .sscf__card:visited {
        top: 42.5% !important;
    }
}



/* ========================================================================
   SIMME GLOBAL STICKY HEADER V1.4 — BRANDED INTEGRATION ICONS
   14 AUGUST 2026

   Uses the six supplied high-resolution transparent WebP assets for the
   ChatGPT, Claude, Copilot, Gemini, Perplexity and Grok menu rows.

   The Navigation group retains its existing bespoke cyan SVG icon language.
   Only .simme-global-header__link--integration is affected here.
   ======================================================================== */

/* The WebP artwork already contains its own finished neon treatment, so do
   not pass it through the generic cyan SVG colour/filter pipeline. */
.simme-global-header__link--integration .simme-global-header__link-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    color: inherit !important;
    -webkit-text-fill-color: initial !important;
    filter: none !important;
}

.simme-global-header__integration-icon {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    image-rendering: auto !important;
    opacity: 1 !important;
    transform: translateZ(0) !important;
    filter:
        drop-shadow(0 0 3px rgba(56, 194, 255, .28))
        drop-shadow(0 0 7px rgba(40, 172, 255, .12)) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}

/* A tiny optical lift on row hover keeps the new artwork feeling native to
   the existing premium menu without changing the image itself. */
.simme-global-header__link--integration:hover .simme-global-header__integration-icon,
.simme-global-header__link--integration:focus-visible .simme-global-header__integration-icon,
.simme-global-header__link--integration[aria-current="page"] .simme-global-header__integration-icon {
    filter:
        drop-shadow(0 0 4px rgba(89, 211, 255, .42))
        drop-shadow(0 0 10px rgba(48, 180, 255, .20)) !important;
}

/* Preserve the compact menu geometry on phones while still rendering from
   the full 200px-class source assets for very crisp high-DPI output. */
@media (max-width: 700px) {
    .simme-global-header__link--integration .simme-global-header__link-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
    }

    .simme-global-header__integration-icon {
        width: 26px !important;
        height: 26px !important;
    }
}

@media (max-width: 390px) {
    .simme-global-header__integration-icon {
        width: 25px !important;
        height: 25px !important;
    }
}


/* ========================================================================
/* ========================================================================
/* ========================================================================
/* ========================================================================
/* ========================================================================
/* ========================================================================
   SIMME EUCLID1 NODE ATLAS PORTAL V1.9 — AURORA GLASS HERO
   16 AUGUST 2026

   Shortcode: [simme_node_atlas_portal]
   Destination: /simmes-nodes-atlas/

   V1.9 content-driven mid-width height repair
   - Keeps only the Euclid1 brand lockup.
   - Removes the fragile fixed 2:1 height at 1220px and below.
   - Lets the card grow naturally from its actual content between tablet and narrow desktop widths.
   - Prevents the Euclid1 footer row from crossing the panel edge without creating a large empty lower area.
   - Preserves the longer CTA-triggered zoom focused on the Euclid1 glyph.
   ======================================================================== */

.simme-atlas-portal,
.simme-atlas-portal *,
.simme-atlas-portal *::before,
.simme-atlas-portal *::after {
    box-sizing: border-box;
}

.simme-atlas-portal {
    --sap-cyan: #22d3ff;
    --sap-blue: #168cff;
    --sap-violet: #7459ff;
    --sap-magenta: #d32fe8;
    --sap-text: #f5f8ff;
    --sap-muted: rgba(231, 239, 255, .76);
    --sap-edge: rgba(176, 210, 255, .50);
    --sap-bg: #020816;

    position: relative;
    width: min(1400px, 100%);
    margin: 0 auto;
    padding: clamp(12px, 1.35vw, 22px);
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    isolation: isolate;
}

.simme-atlas-portal__card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    color: var(--sap-text);
    background: var(--sap-bg);
    border: 1px solid var(--sap-edge);
    border-radius: clamp(24px, 2.7vw, 40px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        inset 0 -1px 0 rgba(35, 111, 201, .12),
        0 18px 52px rgba(0, 0, 0, .34),
        0 0 0 1px rgba(52, 119, 202, .10),
        0 0 42px rgba(33, 125, 255, .07);
    transform: translateZ(0);
}

.simme-atlas-portal__card::before,
.simme-atlas-portal__card::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.simme-atlas-portal__card::before {
    z-index: 7;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow:
        inset 0 0 34px rgba(26, 137, 255, .055),
        inset 0 0 70px rgba(100, 59, 255, .04);
}

.simme-atlas-portal__card::after {
    z-index: 1;
    left: 8%;
    right: 8%;
    bottom: -12%;
    height: 30%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(37, 183, 255, .19) 0%,
        rgba(86, 90, 255, .11) 35%,
        rgba(191, 54, 255, .07) 55%,
        transparent 74%
    );
    filter: blur(25px);
    opacity: .72;
}

/* ------------------------------------------------------------------------
   BACKGROUND ART + MAGICAL NODE LIGHTS
   ------------------------------------------------------------------------ */

.simme-atlas-portal__scene {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    overflow: hidden;
    background-color: #031027;
    background-image: url("https://www.simme.co.uk/wp-content/uploads/2026/08/Atlas-Background-2.jpg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    transform: translateZ(0) scale(1.003);
    transform-origin: 76.8% 46.8%;
    transition:
        transform 2.1s cubic-bezier(.18, .72, .2, 1),
        filter 1.75s ease;
    will-change: transform, filter;
}

.simme-atlas-portal__scene::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
    background:
        linear-gradient(
            90deg,
            rgba(2, 8, 24, .90) 0%,
            rgba(3, 16, 42, .70) 24%,
            rgba(3, 20, 52, .36) 42%,
            rgba(2, 11, 31, .10) 60%,
            rgba(1, 6, 18, .02) 76%
        ),
        linear-gradient(
            180deg,
            rgba(56, 135, 224, .03) 0%,
            transparent 55%,
            rgba(0, 4, 16, .18) 100%
        );
    pointer-events: none;
}

.simme-atlas-portal__scene::after {
    position: absolute;
    z-index: 2;
    inset: -10%;
    content: "";
    background:
        radial-gradient(ellipse at 33% 45%, rgba(23, 220, 255, .23) 0%, rgba(18, 164, 255, .10) 24%, transparent 57%),
        radial-gradient(ellipse at 82% 46%, rgba(220, 61, 255, .12) 0%, rgba(95, 63, 255, .06) 27%, transparent 56%);
    mix-blend-mode: screen;
    opacity: .56;
    filter: blur(10px) saturate(1.05);
    transform: translate3d(-1.2%, .2%, 0) scale(1.005);
    animation: simme-atlas-portal-aurora 10.5s ease-in-out infinite;
    pointer-events: none;
}

.simme-atlas-portal__magic {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: block;
    pointer-events: none;
}

.simme-atlas-portal__pulse {
    --sap-pulse: rgba(38, 212, 255, .97);
    --sap-pulse-soft: rgba(38, 212, 255, .20);
    --sap-pulse-size: clamp(4px, .40vw, 7px);
    --sap-pulse-duration: 10.5s;
    --sap-pulse-delay: 0s;

    position: absolute;
    width: var(--sap-pulse-size);
    height: var(--sap-pulse-size);
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 2px .5px #fff,
        0 0 6px 1.5px var(--sap-pulse),
        0 0 16px 4px var(--sap-pulse-soft);
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(.66);
    animation: simme-atlas-portal-node-pulse var(--sap-pulse-duration) ease-in-out var(--sap-pulse-delay) infinite;
    pointer-events: none;
}

.simme-atlas-portal__pulse::after {
    position: absolute;
    inset: -145%;
    content: "";
    border-radius: 50%;
    background: radial-gradient(circle, var(--sap-pulse-soft), transparent 70%);
    opacity: 0;
    transform: scale(.44);
    animation: simme-atlas-portal-node-halo var(--sap-pulse-duration) ease-in-out var(--sap-pulse-delay) infinite;
}

/* Star-origin coordinates aligned to Atlas-Background-2.jpg */
.simme-atlas-portal__pulse--01 { left: 59.8%; top: 29.9%; --sap-pulse: rgba(69, 225, 255, .97); --sap-pulse-soft: rgba(69, 225, 255, .21); --sap-pulse-duration: 10.0s; --sap-pulse-delay: -.8s; }
.simme-atlas-portal__pulse--02 { left: 66.0%; top: 12.2%; --sap-pulse: rgba(255, 255, 255, .97); --sap-pulse-soft: rgba(141, 223, 255, .26); --sap-pulse-size: clamp(5px, .46vw, 8px); --sap-pulse-duration: 11.6s; --sap-pulse-delay: -3.3s; }
.simme-atlas-portal__pulse--03 { left: 70.8%; top: 16.8%; --sap-pulse: rgba(90, 199, 255, .96); --sap-pulse-soft: rgba(90, 199, 255, .21); --sap-pulse-duration: 10.9s; --sap-pulse-delay: -1.7s; }
.simme-atlas-portal__pulse--04 { left: 78.9%; top: 16.0%; --sap-pulse: rgba(219, 105, 255, .98); --sap-pulse-soft: rgba(219, 105, 255, .22); --sap-pulse-duration: 10.8s; --sap-pulse-delay: -4.1s; }
.simme-atlas-portal__pulse--05 { left: 85.5%; top: 25.7%; --sap-pulse: rgba(244, 77, 255, .98); --sap-pulse-soft: rgba(244, 77, 255, .23); --sap-pulse-size: clamp(5px, .46vw, 8px); --sap-pulse-duration: 10.2s; --sap-pulse-delay: -5.1s; }
.simme-atlas-portal__pulse--06 { left: 85.1%; top: 39.8%; --sap-pulse: rgba(208, 72, 255, .97); --sap-pulse-soft: rgba(208, 72, 255, .21); --sap-pulse-duration: 11.9s; --sap-pulse-delay: -2.0s; }
.simme-atlas-portal__pulse--07 { left: 78.2%; top: 45.6%; --sap-pulse: rgba(244, 83, 255, .98); --sap-pulse-soft: rgba(244, 83, 255, .23); --sap-pulse-size: clamp(5px, .46vw, 8px); --sap-pulse-duration: 10.1s; --sap-pulse-delay: -2.8s; }
.simme-atlas-portal__pulse--08 { left: 80.4%; top: 63.4%; --sap-pulse: rgba(255, 234, 255, .96); --sap-pulse-soft: rgba(211, 69, 255, .23); --sap-pulse-size: clamp(5px, .46vw, 8px); --sap-pulse-duration: 12.2s; --sap-pulse-delay: -6.0s; }
.simme-atlas-portal__pulse--09 { left: 70.2%; top: 70.0%; --sap-pulse: rgba(186, 176, 255, .95); --sap-pulse-soft: rgba(133, 119, 255, .20); --sap-pulse-duration: 11.1s; --sap-pulse-delay: -4.2s; }
.simme-atlas-portal__pulse--10 { left: 59.4%; top: 64.8%; --sap-pulse: rgba(255, 255, 255, .97); --sap-pulse-soft: rgba(45, 177, 255, .23); --sap-pulse-size: clamp(5px, .46vw, 8px); --sap-pulse-duration: 10.4s; --sap-pulse-delay: -5.0s; }
.simme-atlas-portal__pulse--11 { left: 52.8%; top: 47.0%; --sap-pulse: rgba(55, 222, 255, .98); --sap-pulse-soft: rgba(55, 222, 255, .22); --sap-pulse-duration: 9.8s; --sap-pulse-delay: -2.3s; }
.simme-atlas-portal__pulse--12 { left: 64.6%; top: 33.7%; --sap-pulse: rgba(35, 206, 255, .97); --sap-pulse-soft: rgba(35, 206, 255, .20); --sap-pulse-duration: 11.2s; --sap-pulse-delay: -1.2s; }
.simme-atlas-portal__pulse--13 { left: 67.2%; top: 58.8%; --sap-pulse: rgba(47, 224, 255, .98); --sap-pulse-soft: rgba(47, 224, 255, .21); --sap-pulse-duration: 10.7s; --sap-pulse-delay: -4.6s; }
.simme-atlas-portal__pulse--14 { left: 63.3%; top: 79.7%; --sap-pulse: rgba(81, 199, 255, .96); --sap-pulse-soft: rgba(81, 199, 255, .19); --sap-pulse-duration: 12.0s; --sap-pulse-delay: -6.6s; }

/* ------------------------------------------------------------------------
   COPY
   ------------------------------------------------------------------------ */

.simme-atlas-portal__copy {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 52%;
    height: 100%;
    padding: clamp(46px, 5.5vw, 82px) clamp(42px, 5vw, 84px) clamp(28px, 3.1vw, 40px);
    pointer-events: none;
}

.simme-atlas-portal__title {
    display: block;
    max-width: 8.75em;
    color: #f8fbff;
    font-size: clamp(36px, 4.55vw, 66px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -.043em;
    text-shadow: 0 2px 12px rgba(1, 8, 24, .38);
}

.simme-atlas-portal__title-line {
    display: block;
}

.simme-atlas-portal__title-line + .simme-atlas-portal__title-line {
    margin-top: clamp(8px, .9vw, 13px);
}

.simme-atlas-portal__facts {
    display: block;
    margin-top: clamp(22px, 2.5vw, 34px);
    color: rgba(246, 249, 255, .91);
    font-size: clamp(13px, 1.32vw, 18px);
    font-weight: 650;
    line-height: 1.42;
}

.simme-atlas-portal__description {
    display: block;
    margin-top: clamp(8px, .9vw, 13px);
    color: var(--sap-muted);
    font-size: clamp(12px, 1.18vw, 17px);
    font-weight: 450;
    line-height: 1.56;
    max-width: min(100%, 40ch);
}

/* Only this control is interactive. */
.simme-atlas-portal__cta,
.simme-atlas-portal__cta:link,
.simme-atlas-portal__cta:visited {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: min(100%, clamp(250px, 21vw, 340px));
    min-height: clamp(52px, 4.6vw, 66px);
    margin-top: clamp(18px, 2.1vw, 28px) !important;
    padding: 0 clamp(18px, 2.05vw, 28px) !important;
    overflow: hidden;
    gap: clamp(10px, 1.4vw, 18px);
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-decoration: none !important;
    background: linear-gradient(100deg, #158eff 0%, #4e69ff 49%, #cf2fe4 100%) !important;
    border: 1px solid rgba(209, 232, 255, .62) !important;
    border-radius: 999px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .24),
        0 8px 22px rgba(15, 88, 255, .18),
        0 0 22px rgba(174, 49, 255, .12) !important;
    cursor: pointer;
    pointer-events: auto;
    font-size: clamp(11px, .94vw, 14px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .055em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateZ(0);
    transition:
        transform .55s cubic-bezier(.2,.72,.2,1),
        box-shadow .65s ease,
        border-color .55s ease,
        filter .55s ease;
    -webkit-tap-highlight-color: transparent;
}

.simme-atlas-portal__cta::before {
    position: absolute;
    top: -35%;
    bottom: -35%;
    left: -36%;
    width: 26%;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .46), transparent);
    transform: skewX(-18deg);
    opacity: .72;
    animation: simme-atlas-portal-button-sheen 7s ease-in-out infinite;
    pointer-events: none;
}

.simme-atlas-portal__cta-arrow {
    display: inline-block;
    flex: 0 0 auto;
    font-size: 1.28em;
    font-weight: 400;
    line-height: 1;
    transition: transform .68s cubic-bezier(.2,.72,.2,1);
}

.simme-atlas-portal__cta:hover,
.simme-atlas-portal__cta:focus-visible {
    color: #fff !important;
    border-color: rgba(232, 244, 255, .88) !important;
    filter: brightness(1.055) saturate(1.06);
    transform: translateY(-2px) scale(1.012);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .34),
        0 12px 34px rgba(13, 87, 255, .28),
        0 0 34px rgba(190, 56, 255, .24) !important;
}

.simme-atlas-portal__cta:focus-visible {
    outline: 3px solid rgba(120, 220, 255, .88);
    outline-offset: 4px;
}

.simme-atlas-portal__cta:hover .simme-atlas-portal__cta-arrow,
.simme-atlas-portal__cta:focus-visible .simme-atlas-portal__cta-arrow,
.simme-atlas-portal__card.is-cta-activating .simme-atlas-portal__cta-arrow {
    transform: translateX(6px);
}

/* Button hover/focus zooms only the artwork; nothing happens when hovering
   over the rest of the panel. */
.simme-atlas-portal__card.is-cta-hover .simme-atlas-portal__scene,
.simme-atlas-portal__card:has(.simme-atlas-portal__cta:hover) .simme-atlas-portal__scene,
.simme-atlas-portal__card:has(.simme-atlas-portal__cta:focus-visible) .simme-atlas-portal__scene {
    transform: translate3d(-1.4%, -.2%, 0) scale(1.14);
    filter: saturate(1.08) brightness(1.04);
}

.simme-atlas-portal__card.is-cta-activating .simme-atlas-portal__scene {
    transform: translate3d(-2.0%, -.4%, 0) scale(1.19);
    filter: saturate(1.14) brightness(1.07);
    transition-duration: 1.12s;
}

.simme-atlas-portal__card.is-cta-activating .simme-atlas-portal__cta {
    transform: translateY(-1px) scale(.992);
    filter: brightness(1.09) saturate(1.08);
}

/* ------------------------------------------------------------------------
   BRAND HIERARCHY — EUCLID1 LEADS
   ------------------------------------------------------------------------ */

.simme-atlas-portal__brand {
    display: flex;
    align-items: center;
    margin-top: auto;
    padding-top: clamp(14px, 1.7vw, 22px);
    gap: 0;
    color: rgba(247, 250, 255, .90);
}

.simme-atlas-portal__brand-unit {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: clamp(8px, .85vw, 12px);
}

.simme-atlas-portal__brand-icon {
    display: block !important;
    width: clamp(27px, 2.45vw, 38px) !important;
    height: clamp(27px, 2.45vw, 38px) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    opacity: .92;
    filter:
        drop-shadow(0 0 6px rgba(56, 184, 255, .20))
        drop-shadow(0 0 10px rgba(182, 64, 255, .12));
}

.simme-atlas-portal__brand-name {
    display: block;
    color: rgba(246, 249, 255, .78);
    font-size: clamp(10px, 1.02vw, 14px);
    font-weight: 650;
    line-height: 1;
    letter-spacing: .20em;
    text-transform: uppercase;
    white-space: nowrap;
}

.simme-atlas-portal__brand-unit--euclid .simme-atlas-portal__brand-icon {
    width: clamp(34px, 2.9vw, 46px) !important;
    height: clamp(34px, 2.9vw, 46px) !important;
    opacity: 1;
    filter:
        drop-shadow(0 0 7px rgba(56, 184, 255, .30))
        drop-shadow(0 0 15px rgba(182, 64, 255, .21));
}

.simme-atlas-portal__brand-unit--euclid .simme-atlas-portal__brand-name {
    color: rgba(255, 255, 255, .96);
    font-size: clamp(12px, 1.18vw, 16px);
    font-weight: 800;
    letter-spacing: .23em;
}

.simme-atlas-portal__brand-unit--symsoul {
    opacity: .72;
    transform: none;
    transform-origin: left center;
}

.simme-atlas-portal__brand-join {
    color: rgba(213, 225, 245, .46);
    font-size: clamp(14px, 1.4vw, 20px);
    font-weight: 400;
    line-height: 1;
}

/* ------------------------------------------------------------------------
   WIDE TABLET / NARROW DESKTOP
   ------------------------------------------------------------------------ */

@media (max-width: 1220px) and (min-width: 761px) {
    /*
     * Content-driven height repair.
     * At these widths the portal can live inside a narrower Themify column than
     * the browser viewport, so a fixed 2:1 aspect ratio can become too shallow
     * even though the media query still sees a 1220px-wide screen. Let the
     * content define the height instead. This keeps the Euclid1 footer safely
     * inside the rounded panel without manufacturing a large empty lower area.
     */
    .simme-atlas-portal__card {
        aspect-ratio: auto;
        min-height: 0;
    }

    .simme-atlas-portal__copy {
        width: 55%;
        height: auto;
        min-height: 0;
        padding: clamp(36px, 4.2vw, 54px) clamp(32px, 4.4vw, 56px) clamp(24px, 2.6vw, 32px);
    }

    .simme-atlas-portal__title {
        max-width: 9.2em;
        font-size: clamp(33px, 4.2vw, 54px);
    }

    .simme-atlas-portal__facts {
        margin-top: clamp(16px, 1.8vw, 24px);
    }

    .simme-atlas-portal__cta,
    .simme-atlas-portal__cta:link,
    .simme-atlas-portal__cta:visited {
        width: min(100%, 320px);
        min-height: 56px;
        margin-top: clamp(14px, 1.7vw, 22px) !important;
    }

    .simme-atlas-portal__brand {
        margin-top: clamp(12px, 1.5vw, 18px);
        padding-top: 0;
    }
}

/* ------------------------------------------------------------------------
   TABLET
   ------------------------------------------------------------------------ */

@media (max-width: 1050px) and (min-width: 761px) {
    .simme-atlas-portal__card {
        aspect-ratio: auto;
        min-height: 0;
    }

    .simme-atlas-portal__copy {
        width: 57%;
        height: auto;
        min-height: 0;
        padding: clamp(28px, 3.5vw, 38px) clamp(24px, 3.6vw, 34px) clamp(20px, 2.4vw, 26px);
    }

    .simme-atlas-portal__title {
        max-width: 9.6em;
        font-size: clamp(29px, 3.95vw, 44px);
        line-height: 1.06;
    }

    .simme-atlas-portal__facts {
        font-size: clamp(13px, 1.55vw, 16px);
        margin-top: 14px;
    }

    .simme-atlas-portal__description {
        font-size: clamp(12px, 1.45vw, 15px);
    }

    .simme-atlas-portal__cta,
    .simme-atlas-portal__cta:link,
    .simme-atlas-portal__cta:visited {
        width: min(100%, 305px);
        min-height: 52px;
        margin-top: 14px !important;
        font-size: 12px;
    }

    .simme-atlas-portal__brand {
        margin-top: 12px;
        padding-top: 0;
        gap: 0;
    }
}

/* ------------------------------------------------------------------------
   MOBILE / NARROW
   ------------------------------------------------------------------------ */

@media (max-width: 760px) {
    .simme-atlas-portal {
        width: min(100%, 540px);
        padding: 12px;
    }

    .simme-atlas-portal__card {
        display: grid;
        grid-template-rows: clamp(210px, 57vw, 305px) auto;
        aspect-ratio: auto;
        min-height: 0;
        border-radius: 28px;
        background: linear-gradient(180deg, #07152f 0%, #030a1c 54%, #020715 100%);
    }

    .simme-atlas-portal__scene {
        position: relative;
        inset: auto;
        grid-row: 1;
        width: 100%;
        height: 100%;
        background-position: 70% 44%;
        background-size: cover;
        border-bottom: 1px solid rgba(118, 171, 255, .18);
        transform-origin: 76% 41.5%;
        transition-duration: 1.85s;
    }

    .simme-atlas-portal__card.is-cta-hover .simme-atlas-portal__scene,
    .simme-atlas-portal__card:has(.simme-atlas-portal__cta:hover) .simme-atlas-portal__scene,
    .simme-atlas-portal__card:has(.simme-atlas-portal__cta:focus-visible) .simme-atlas-portal__scene {
        transform: scale(1.09);
        filter: saturate(1.08) brightness(1.04);
    }

    .simme-atlas-portal__card.is-cta-activating .simme-atlas-portal__scene {
        transform: scale(1.125);
        filter: saturate(1.13) brightness(1.06);
    }

    .simme-atlas-portal__scene::before {
        background:
            linear-gradient(180deg, rgba(0, 5, 19, .03), rgba(0, 6, 22, .08) 62%, rgba(2, 8, 24, .72) 100%),
            radial-gradient(ellipse at 50% 50%, transparent 48%, rgba(0, 5, 18, .18) 100%);
    }

    .simme-atlas-portal__scene::after {
        inset: -16%;
        background:
            radial-gradient(ellipse at 42% 55%, rgba(24, 213, 255, .20), transparent 45%),
            radial-gradient(ellipse at 79% 48%, rgba(205, 61, 255, .12), transparent 40%);
    }

    .simme-atlas-portal__copy {
        grid-row: 2;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 28px 28px 28px;
        background:
            radial-gradient(circle at 16% 0%, rgba(31, 137, 255, .10), transparent 34%),
            linear-gradient(180deg, rgba(5, 15, 38, .97), rgba(2, 8, 22, .995));
    }

    .simme-atlas-portal__title {
        max-width: 11.4em;
        font-size: clamp(26px, 7.6vw, 38px);
        line-height: 1.08;
    }

    .simme-atlas-portal__facts {
        margin-top: 20px;
        font-size: clamp(13px, 3.8vw, 16px);
    }

    .simme-atlas-portal__description {
        margin-top: 8px;
        font-size: clamp(12px, 3.45vw, 14px);
        line-height: 1.52;
    }

    .simme-atlas-portal__cta,
    .simme-atlas-portal__cta:link,
    .simme-atlas-portal__cta:visited {
        width: 100%;
        min-height: 56px;
        margin-top: 18px !important;
        padding: 0 18px !important;
        font-size: clamp(10px, 3.02vw, 12px);
        letter-spacing: .055em;
    }

    .simme-atlas-portal__brand {
        width: 100%;
        margin-top: auto;
        padding-top: 14px;
        gap: 0;
        justify-content: flex-start;
    }

    .simme-atlas-portal__brand-unit {
        gap: 7px;
    }

    .simme-atlas-portal__brand-icon {
        width: 25px !important;
        height: 25px !important;
    }

    .simme-atlas-portal__brand-unit--euclid .simme-atlas-portal__brand-icon {
        width: 31px !important;
        height: 31px !important;
    }

    .simme-atlas-portal__brand-name {
        font-size: 9px;
        letter-spacing: .14em;
    }

    .simme-atlas-portal__brand-unit--euclid .simme-atlas-portal__brand-name {
        font-size: 11px;
        letter-spacing: .17em;
    }

    .simme-atlas-portal__brand-join {
        font-size: 14px;
    }

    .simme-atlas-portal__pulse {
        --sap-pulse-size: 4px;
    }

    /* Mobile crop remap for Atlas-Background-2.jpg */
    .simme-atlas-portal__pulse--01 { left: 57.2%; top: 31.8%; display: block; }
    .simme-atlas-portal__pulse--02 { left: 63.6%; top: 12.8%; display: block; }
    .simme-atlas-portal__pulse--03 { left: 68.2%; top: 17.4%; display: block; }
    .simme-atlas-portal__pulse--04 { left: 77.8%; top: 16.3%; display: block; }
    .simme-atlas-portal__pulse--05 { left: 83.2%; top: 26.9%; display: none; }
    .simme-atlas-portal__pulse--06 { left: 82.8%; top: 40.6%; display: none; }
    .simme-atlas-portal__pulse--07 { left: 76.1%; top: 45.8%; display: block; }
    .simme-atlas-portal__pulse--08 { left: 78.0%; top: 61.9%; display: none; }
    .simme-atlas-portal__pulse--09 { left: 68.9%; top: 68.1%; display: block; }
    .simme-atlas-portal__pulse--10 { left: 57.0%; top: 63.6%; display: block; }
    .simme-atlas-portal__pulse--11 { left: 50.9%; top: 47.1%; display: block; }
    .simme-atlas-portal__pulse--12 { left: 62.5%; top: 34.5%; display: block; }
    .simme-atlas-portal__pulse--13 { left: 65.2%; top: 58.1%; display: block; }
    .simme-atlas-portal__pulse--14 { left: 61.4%; top: 77.4%; display: none; }
}

@media (max-width: 420px) {
    .simme-atlas-portal__card {
        grid-template-rows: 198px auto;
        border-radius: 24px;
    }

    .simme-atlas-portal__copy {
        padding: 24px 22px 24px;
    }

    .simme-atlas-portal__title {
        font-size: clamp(25px, 9vw, 34px);
    }

    .simme-atlas-portal__brand {
        flex-wrap: wrap;
        row-gap: 9px;
    }
}

/* ------------------------------------------------------------------------
   MOTION
   ------------------------------------------------------------------------ */

@keyframes simme-atlas-portal-node-pulse {
    0%, 20%, 100% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) scale(.66);
        filter: brightness(.96);
    }
    26% {
        opacity: .16;
        transform: translate3d(-50%, -50%, 0) scale(.82);
        filter: brightness(1.02);
    }
    31% {
        opacity: .94;
        transform: translate3d(-50%, -50%, 0) scale(1.12);
        filter: brightness(1.28);
    }
    36% {
        opacity: .24;
        transform: translate3d(-50%, -50%, 0) scale(.90);
        filter: brightness(1.05);
    }
    44%, 100% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) scale(.68);
        filter: brightness(.96);
    }
}

@keyframes simme-atlas-portal-node-halo {
    0%, 22%, 100% {
        opacity: 0;
        transform: scale(.44);
    }
    31% {
        opacity: .42;
        transform: scale(1.18);
    }
    37% {
        opacity: 0;
        transform: scale(.60);
    }
}

@keyframes simme-atlas-portal-aurora {
    0%, 100% {
        opacity: .50;
        transform: translate3d(-1.2%, .2%, 0) scale(1.005);
        filter: blur(10px) saturate(1.02);
    }
    50% {
        opacity: .70;
        transform: translate3d(.8%, -.8%, 0) scale(1.028);
        filter: blur(12px) saturate(1.12);
    }
}

@keyframes simme-atlas-portal-button-sheen {
    0%, 60% { left: -36%; opacity: 0; }
    68% { opacity: .66; }
    84% { left: 112%; opacity: .38; }
    100% { left: 112%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .simme-atlas-portal__scene,
    .simme-atlas-portal__scene::after,
    .simme-atlas-portal__pulse,
    .simme-atlas-portal__pulse::after,
    .simme-atlas-portal__cta,
    .simme-atlas-portal__cta::before,
    .simme-atlas-portal__cta-arrow {
        animation: none !important;
        transition: none !important;
    }

    .simme-atlas-portal__pulse {
        opacity: .48;
        transform: translate3d(-50%, -50%, 0) scale(.86);
    }

    .simme-atlas-portal__scene::after {
        opacity: .60;
        transform: none;
    }

    .simme-atlas-portal__card.is-cta-hover .simme-atlas-portal__scene,
    .simme-atlas-portal__card.is-cta-activating .simme-atlas-portal__scene,
    .simme-atlas-portal__card:has(.simme-atlas-portal__cta:hover) .simme-atlas-portal__scene,
    .simme-atlas-portal__card:has(.simme-atlas-portal__cta:focus-visible) .simme-atlas-portal__scene {
        transform: none !important;
        filter: none !important;
    }
}



/* ========================================================================
   EUCLID1 NODE ATLAS V6.29 — HERO BACK HOME CONTROL
   2026-08-16
   - Adds a compact glass Back Home pill at the very top-left of the Atlas hero.
   - Includes hover, keyboard-focus and light-theme states.
   - Hero top padding is increased at each responsive breakpoint so the new
     control never collides with the Euclid1 logo or title content.
   ======================================================================== */


/* ========================================================================
   SIMME HOMEPAGE — COMPARISON RAIL V24 HEADING REMOVAL / GAP CLOSE
   17 AUGUST 2026
   ======================================================================== */

.sscr {
    padding-top: 0 !important;
}

.sscr__shell {
    margin-top: 0 !important;
}

/* V9 PHP no longer outputs this element. This defensive reset also prevents
   an old cached copy preserving the previous heading gap during deployment. */
.sscr__intro {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}



/* ========================================================================
   SIMME HOMEPAGE — COMPARISON RAIL V28 ATLAS-SYNCHRONISED GEOMETRY
   17 AUGUST 2026

   VIDEO-DIAGNOSED REPAIR
   ----------------------
   The comparison section now follows the exact outer-width system used by
   .simme-atlas-portal instead of using independent comparison breakpoints.

   Atlas contract copied deliberately:
   - desktop/wide: width min(1400px, 100%) + responsive 12–22px outer padding;
   - <=760px: width min(100%, 540px) + 12px outer padding;
   - <=760px also becomes the comparison's stacked breakpoint.

   This keeps the OUTSIDE EDGES of the green/red comparison area on the same
   page axis as the Atlas card below it at every responsive state.
   ======================================================================== */

/* ------------------------------------------------------------------------
   1. EXACT ATLAS OUTER-WIDTH CONTRACT
   ------------------------------------------------------------------------ */

.sscr {
    position: relative !important;
    box-sizing: border-box !important;
    width: min(1400px, 100%) !important;
    max-width: 1400px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;

    /* Match .simme-atlas-portal exactly on the horizontal axis. */
    padding-left: clamp(12px, 1.35vw, 22px) !important;
    padding-right: clamp(12px, 1.35vw, 22px) !important;

    /* V24 removed the heading; keep the top closed. */
    padding-top: 0 !important;
}

/* Every comparison wrapper inherits one consistent inner edge. */
.sscr__shell,
.sscr__rail,
.sscr__stage,
.sscr__panel,
.sscr__compare {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* The cards must begin on the same inner edge as the Atlas card. */
.sscr__stage {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.sscr__card {
    min-width: 0 !important;
    max-width: none !important;
}

/* ------------------------------------------------------------------------
   2. WIDE / TABLET: TWO BALANCED PANELS
   Atlas remains in its wide/tablet geometry above 760px, so comparison does
   the same. This overrides the legacy <=860px stacked rules.
   ------------------------------------------------------------------------ */

@media (min-width: 761px) {
    .sscr__compare {
        position: relative !important;
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr)
            clamp(58px, 6.2vw, 88px)
            minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        align-items: stretch !important;
    }

    .sscr__card--with,
    .sscr__card--without {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        align-self: stretch !important;
    }

    .sscr__card--with {
        order: 1 !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .sscr__vs {
        order: 2 !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        position: relative !important;
        z-index: 8 !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        pointer-events: none !important;
    }

    .sscr__vs img {
        position: relative !important;
        z-index: 9 !important;
        left: auto !important;
        top: auto !important;
        width: clamp(76px, 6.6vw, 94px) !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        transform: none !important;
        display: block !important;
    }

    .sscr__card--without {
        order: 3 !important;
        grid-column: 3 !important;
        grid-row: 1 !important;
    }
}

/* Narrow desktop / tablet: preserve two columns, but compact the card header
   rather than allowing the text to become crowded. */
@media (min-width: 761px) and (max-width: 980px) {
    .sscr__card--with,
    .sscr__card--without {
        padding: clamp(19px, 2.4vw, 25px) !important;
    }

    .sscr__card-top {
        grid-template-columns:
            clamp(70px, 8.4vw, 84px)
            minmax(0, 1fr) !important;
        align-items: start !important;
        gap: clamp(12px, 1.7vw, 16px) !important;
        margin-bottom: clamp(16px, 2vw, 21px) !important;
    }

    .sscr__badge {
        width: clamp(70px, 8.4vw, 84px) !important;
        height: clamp(70px, 8.4vw, 84px) !important;
        flex-basis: clamp(70px, 8.4vw, 84px) !important;
    }

    .sscr__label {
        margin-bottom: 8px !important;
        padding: 7px 11px !important;
        font-size: clamp(.68rem, 1.28vw, .77rem) !important;
    }

    .sscr__card-title {
        font-size: clamp(1rem, 2vw, 1.28rem) !important;
        line-height: 1.13 !important;
    }

    .sscr__points {
        gap: clamp(13px, 1.7vw, 17px) !important;
    }

    .sscr__points li {
        padding-left: 26px !important;
        font-size: clamp(.88rem, 1.55vw, 1rem) !important;
        line-height: 1.43 !important;
    }
}

/* ------------------------------------------------------------------------
   3. <=760px: MATCH THE ATLAS MOBILE ENVELOPE EXACTLY
   .simme-atlas-portal uses width:min(100%,540px) and padding:12px here.
   The comparison now uses the same geometry and intentionally stacks.
   ------------------------------------------------------------------------ */

@media (max-width: 760px) {
    .sscr {
        width: min(100%, 540px) !important;
        max-width: 540px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .sscr__shell,
    .sscr__rail,
    .sscr__stage,
    .sscr__panel,
    .sscr__compare {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .sscr__stage {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .sscr__compare {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto 0 auto !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        align-items: stretch !important;
    }

    .sscr__card--with,
    .sscr__card--without {
        width: 100% !important;
        min-width: 0 !important;
        padding: clamp(20px, 4.5vw, 26px) !important;
    }

    .sscr__card--with {
        order: 1 !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin: 0 0 8px !important;
    }

    .sscr__vs {
        order: 2 !important;
        grid-column: 1 !important;
        grid-row: 2 !important;
        position: relative !important;
        z-index: 10 !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        overflow: visible !important;
        transform: none !important;
        pointer-events: none !important;
    }

    .sscr__vs img {
        position: absolute !important;
        z-index: 11 !important;
        left: 50% !important;
        top: 50% !important;
        width: clamp(70px, 14vw, 82px) !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
        display: block !important;
    }

    .sscr__card--without {
        order: 3 !important;
        grid-column: 1 !important;
        grid-row: 3 !important;
        margin: 8px 0 0 !important;
    }

    /* Keep the mobile cards compact. The old <=640px rule stacked the
       mascot above the text and made each panel unnecessarily tall. */
    .sscr__card-top {
        grid-template-columns:
            clamp(76px, 16vw, 92px)
            minmax(0, 1fr) !important;
        align-items: center !important;
        gap: clamp(14px, 3vw, 19px) !important;
        margin-bottom: clamp(17px, 3.5vw, 22px) !important;
    }

    .sscr__badge {
        width: clamp(76px, 16vw, 92px) !important;
        height: clamp(76px, 16vw, 92px) !important;
        flex-basis: clamp(76px, 16vw, 92px) !important;
    }

    .sscr__label {
        margin-bottom: 8px !important;
        padding: 8px 12px !important;
        font-size: clamp(.72rem, 2.45vw, .82rem) !important;
    }

    .sscr__card-title {
        font-size: clamp(1.08rem, 4.05vw, 1.34rem) !important;
        line-height: 1.14 !important;
    }

    .sscr__points {
        gap: clamp(14px, 3.1vw, 18px) !important;
    }

    .sscr__points li {
        padding-left: 27px !important;
        font-size: clamp(.92rem, 3.15vw, 1.03rem) !important;
        line-height: 1.44 !important;
    }
}

/* True narrow handset fallback only. */
@media (max-width: 380px) {
    .sscr__card-top {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        align-items: start !important;
    }

    .sscr__badge {
        width: 68px !important;
        height: 68px !important;
        flex-basis: 68px !important;
    }

    .sscr__card-title {
        font-size: 1.04rem !important;
    }

    .sscr__points li {
        font-size: .9rem !important;
    }
}

/* =========================================================
   SIMME / SYMSOUL HOMEPAGE — JOURNEY EXPLORER V2.6
   Shortcode: [symsoul_journey_explorer]

   FINAL-DIRECTION DESIGN SYSTEM
   - dark-first Simme surface
   - bright fine-line icon language, not 3D artwork
   - two real homepage category families
   - quick preview drawer -> focused detail canvas
   - persistent routed guide-wire from selected tile to preview
   - smooth mobile bottom-sheet entrance
   - optional LIGHT READING SURFACE only; no separate light design
   - favourites / My SymSoul Journey
   - optional user-entered time + value estimator
   - PDF download + sharing controls supplied by PHP snippet

   ISOLATION:
   All component rules are scoped to .ssjx except the temporary body
   scroll lock used while a detail/journey modal is open.
   ========================================================= */

.ssjx,
.ssjx *,
.ssjx *::before,
.ssjx *::after {
    box-sizing: border-box;
}

.ssjx {
    --ssjx-bg: #03040a;
    --ssjx-bg-2: #070a14;
    --ssjx-panel: rgba(9, 12, 25, .88);
    --ssjx-panel-strong: #0a0d18;
    --ssjx-panel-soft: rgba(17, 21, 39, .76);
    --ssjx-line: rgba(163, 177, 222, .18);
    --ssjx-line-strong: rgba(197, 205, 235, .30);
    --ssjx-text: #f4f5fb;
    --ssjx-text-soft: #bbc1d4;
    --ssjx-muted: #7f879f;
    --ssjx-violet: #a978ff;
    --ssjx-violet-rgb: 169, 120, 255;
    --ssjx-pink: #ed76d5;
    --ssjx-pink-rgb: 237, 118, 213;
    --ssjx-blue: #83b2ff;
    --ssjx-blue-rgb: 131, 178, 255;
    --ssjx-green: #6bfa43;
    --ssjx-green-rgb: 107, 250, 67;
    --ssjx-green-soft: #c9ffb8;
    --ssjx-green-deep: #0a3512;
    --ssjx-radius: 24px;
    --ssjx-card-radius: 17px;
    --ssjx-ease: cubic-bezier(.16, .78, .20, 1);

    position: relative;
    isolation: isolate;
    width: min(1540px, 100%);
    margin: 0 auto;
    padding: clamp(18px, 2.5vw, 38px) clamp(12px, 2vw, 30px) clamp(38px, 4vw, 62px);
    overflow: hidden;
    color: var(--ssjx-text);
    background:
        radial-gradient(circle at 9% 0%, rgba(var(--ssjx-violet-rgb), .075), transparent 24%),
        radial-gradient(circle at 92% 8%, rgba(var(--ssjx-blue-rgb), .06), transparent 22%),
        linear-gradient(180deg, rgba(7, 9, 18, .78), rgba(2, 3, 8, .94));
    border: 1px solid rgba(167, 179, 221, .12);
    border-radius: clamp(24px, 2.3vw, 34px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        0 24px 70px rgba(0, 0, 0, .25);
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.ssjx__ambient {
    position: absolute;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.ssjx__ambient::before,
.ssjx__ambient::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.ssjx__ambient::before {
    top: -52px;
    right: clamp(22px, 6vw, 110px);
    width: clamp(210px, 28vw, 440px);
    height: 170px;
    opacity: .52;
    background:
        linear-gradient(116deg, transparent 0 41%, rgba(var(--ssjx-blue-rgb), .55) 41.4% 41.7%, transparent 42.1%),
        linear-gradient(132deg, transparent 0 49%, rgba(var(--ssjx-violet-rgb), .68) 49.4% 49.7%, transparent 50.1%),
        linear-gradient(151deg, transparent 0 57%, rgba(var(--ssjx-pink-rgb), .46) 57.4% 57.7%, transparent 58.1%);
    filter: drop-shadow(0 0 8px rgba(var(--ssjx-violet-rgb), .36));
    transform: rotate(-4deg);
}

.ssjx__ambient::after {
    left: 50%;
    bottom: -160px;
    width: 740px;
    height: 310px;
    border: 1px solid rgba(var(--ssjx-violet-rgb), .12);
    border-radius: 50%;
    box-shadow:
        0 0 80px rgba(var(--ssjx-violet-rgb), .05),
        inset 0 0 60px rgba(var(--ssjx-blue-rgb), .035);
    transform: translateX(-50%) rotate(-5deg);
}

.ssjx button,
.ssjx input {
    font: inherit;
}

.ssjx button {
    -webkit-tap-highlight-color: transparent;
}

.ssjx button:focus-visible,
.ssjx input:focus-visible {
    outline: 2px solid rgba(205, 177, 255, .94);
    outline-offset: 3px;
}

body.ssjx-has-modal {
    overflow: hidden !important;
}

/* =========================================================
   INTRO + JOURNEY LAUNCHER
   ========================================================= */

.ssjx__intro {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: clamp(18px, 3vw, 40px);
    margin: 0 0 clamp(18px, 2vw, 30px);
    padding: clamp(4px, .6vw, 10px) clamp(2px, .4vw, 8px) 0;
}

.ssjx__intro-copy {
    max-width: 850px;
}

.ssjx__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #d8bcff;
    font-size: clamp(10px, .78vw, 12px);
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.ssjx__eyebrow::before {
    width: 24px;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, var(--ssjx-pink), var(--ssjx-violet));
    box-shadow: 0 0 8px rgba(var(--ssjx-violet-rgb), .55);
}

.ssjx__title {
    max-width: 820px;
    margin: 0 !important;
    color: var(--ssjx-text) !important;
    font-size: clamp(31px, 3.6vw, 57px) !important;
    font-weight: 550 !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
    text-wrap: balance;
}

.ssjx__title em {
    color: #cf9aff;
    font-style: normal;
    font-weight: 650;
    text-shadow: 0 0 24px rgba(var(--ssjx-violet-rgb), .22);
}

.ssjx__lede {
    max-width: 800px;
    margin: 16px 0 0 !important;
    color: var(--ssjx-text-soft) !important;
    font-size: clamp(14px, 1.05vw, 17px) !important;
    line-height: 1.58 !important;
}

.ssjx__journey-launch,
.ssjx__journey-launch:hover,
.ssjx__journey-launch:focus,
.ssjx__journey-launch:active {
    position: relative;
    display: grid;
    grid-template-columns: 42px auto 34px;
    align-items: center;
    min-width: 224px;
    margin: 0;
    padding: 11px 12px;
    gap: 10px;
    color: #f6f2ff !important;
    background:
        linear-gradient(145deg, rgba(19, 21, 40, .92), rgba(7, 9, 18, .96)) !important;
    border: 1px solid rgba(var(--ssjx-violet-rgb), .40) !important;
    border-radius: 16px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 10px 24px rgba(0, 0, 0, .24),
        0 0 22px rgba(var(--ssjx-violet-rgb), .08) !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.ssjx__journey-launch:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--ssjx-pink-rgb), .72) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 12px 30px rgba(0, 0, 0, .28),
        0 0 28px rgba(var(--ssjx-violet-rgb), .17) !important;
}

.ssjx__journey-launch-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #d992ff;
    border: 1px solid rgba(var(--ssjx-violet-rgb), .42);
    border-radius: 12px;
    box-shadow: inset 0 0 14px rgba(var(--ssjx-violet-rgb), .06);
}

.ssjx__journey-launch-icon svg {
    width: 23px;
    height: 23px;
    filter: drop-shadow(0 0 6px rgba(var(--ssjx-violet-rgb), .45));
}

.ssjx__journey-launch-copy {
    display: grid;
    min-width: 0;
    text-align: left;
}

.ssjx__journey-launch-copy small {
    color: var(--ssjx-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ssjx__journey-launch-copy strong {
    margin-top: 2px;
    color: #f7f4ff;
    font-size: 15px;
    line-height: 1;
}

.ssjx__journey-count {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: #0a0710;
    background: linear-gradient(145deg, #f398de, #a977ff);
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(var(--ssjx-pink-rgb), .3);
    font-size: 12px;
    font-weight: 900;
}

/* =========================================================
   JOURNEY PROGRESS LINE — GREEN-LED / FULL-SYSTEM ACCENT
   Green is the Journey identity. Blue + violet flashes represent
   the two SymSoul content families travelling through the same path.
   ========================================================= */

.ssjx__progress-line {
    --ssjx-step-node: 36px;
    --ssjx-step-gap: 12px;
    --ssjx-step-line: linear-gradient(
        90deg,
        rgba(var(--ssjx-green-rgb), .30) 0%,
        #58dd36 10%,
        #6bfa43 42%,
        #7dff57 68%,
        #6bfa43 88%,
        rgba(var(--ssjx-green-rgb), .50) 100%
    );

    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    width: min(1040px, 100%);
    margin: 2px auto clamp(24px, 2.3vw, 34px);
    color: #aeb6ca;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.ssjx__progress-line span {
    --ssjx-step-label-width: 8ch;

    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    gap: var(--ssjx-step-gap);
    color: #a8b0c5;
    white-space: nowrap;
    text-shadow: 0 0 12px rgba(0, 0, 0, .92);
}

.ssjx__progress-line span:nth-child(2) {
    --ssjx-step-label-width: 7ch;
}

.ssjx__progress-line span:nth-child(3) {
    --ssjx-step-label-width: 4ch;
}

.ssjx__progress-line span:not(:last-child)::after {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: calc(var(--ssjx-step-node) + var(--ssjx-step-gap) + var(--ssjx-step-label-width) + 13px);
    right: 12px;
    height: 2px;
    content: "";
    background: var(--ssjx-step-line);
    border-radius: 999px;
    box-shadow:
        0 0 6px rgba(var(--ssjx-green-rgb), .44),
        0 0 12px rgba(var(--ssjx-green-rgb), .24),
        0 0 18px rgba(var(--ssjx-green-rgb), .10);
    opacity: .74;
    transform: translateY(-50%);
    pointer-events: none;
}

.ssjx__progress-line i {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    flex: 0 0 var(--ssjx-step-node);
    width: var(--ssjx-step-node);
    height: var(--ssjx-step-node);
    min-width: var(--ssjx-step-node);
    min-height: var(--ssjx-step-node);
    margin: 0;
    padding: 0;
    color: #d8e2d5;
    background:
        radial-gradient(circle at 50% 45%, rgba(var(--ssjx-green-rgb), .10), transparent 58%),
        #090d13;
    border: 2px solid rgba(var(--ssjx-green-rgb), .62);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .035),
        0 0 10px rgba(var(--ssjx-green-rgb), .20),
        0 0 18px rgba(var(--ssjx-green-rgb), .08);
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    text-indent: 0;
}

.ssjx__progress-line .is-active {
    color: #f3fff0;
    text-shadow:
        0 0 9px rgba(var(--ssjx-green-rgb), .22),
        0 0 14px rgba(0, 0, 0, .92);
}

.ssjx__progress-line .is-active i {
    color: #fff;
    background:
        radial-gradient(circle at 50% 42%, rgba(var(--ssjx-green-rgb), .20), transparent 58%),
        #09110d;
    border-color: #6bfa43;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .055),
        0 0 7px rgba(var(--ssjx-green-rgb), .62),
        0 0 18px rgba(var(--ssjx-green-rgb), .30),
        -4px 4px 11px rgba(var(--ssjx-violet-rgb), .14),
        4px -3px 11px rgba(var(--ssjx-blue-rgb), .14);
}

/* =========================================================
   CATEGORY GROUPS + GRID
   ========================================================= */

.ssjx__groups {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(22px, 2.15vw, 34px);
}

.ssjx__group {
    --ssjx-group-rgb: var(--ssjx-violet-rgb);
    --ssjx-group-accent: var(--ssjx-violet);
    position: relative;
    overflow: hidden;
    padding: clamp(14px, 1.5vw, 22px);
    background:
        linear-gradient(180deg, rgba(14, 17, 32, .88), rgba(5, 7, 15, .94));
    border: 1px solid rgba(var(--ssjx-group-rgb), .20);
    border-radius: var(--ssjx-radius);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .03),
        0 14px 32px rgba(0, 0, 0, .16);
}

.ssjx__group::before {
    position: absolute;
    top: -1px;
    left: 8%;
    width: 36%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(var(--ssjx-group-rgb), .78), transparent);
    box-shadow: 0 0 10px rgba(var(--ssjx-group-rgb), .42);
}

.ssjx__group--blue {
    --ssjx-group-rgb: var(--ssjx-blue-rgb);
    --ssjx-group-accent: var(--ssjx-blue);
}

.ssjx__group-head {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
}

.ssjx__group-symbol {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--ssjx-group-accent);
    background: rgba(var(--ssjx-group-rgb), .045);
    border: 1px solid rgba(var(--ssjx-group-rgb), .32);
    border-radius: 13px;
    box-shadow: inset 0 0 16px rgba(var(--ssjx-group-rgb), .04);
}

.ssjx__group-symbol svg {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 6px rgba(var(--ssjx-group-rgb), .42));
}

.ssjx__group-head h3 {
    margin: 0 !important;
    color: #f4f5fb !important;
    font-size: clamp(17px, 1.28vw, 21px) !important;
    font-weight: 650 !important;
    line-height: 1.08 !important;
    letter-spacing: -.02em !important;
}

.ssjx__group-head p {
    margin: 4px 0 0 !important;
    color: var(--ssjx-muted) !important;
    font-size: clamp(10px, .72vw, 12px) !important;
    line-height: 1.35 !important;
}

.ssjx__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(11px, .9vw, 14px);
}

.ssjx__card {
    position: relative;
    min-width: 0;
    min-height: clamp(112px, 9.8vw, 148px);
    overflow: hidden;
    background:
        linear-gradient(155deg, rgba(16, 19, 34, .91), rgba(7, 9, 17, .98));
    border: 1px solid rgba(159, 169, 205, .16);
    border-radius: var(--ssjx-card-radius);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 260ms ease,
        background 260ms ease;
}

.ssjx__card--last {
    grid-column: 1 / -1;
    min-height: 84px;
}

.ssjx__card::before {
    position: absolute;
    inset: -1px;
    content: "";
    border-radius: inherit;
    background:
        linear-gradient(135deg, rgba(var(--ssjx-group-rgb), .08), transparent 38% 70%, rgba(var(--ssjx-group-rgb), .035));
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.ssjx__card:hover,
.ssjx__card.is-active,
.ssjx__card.is-saved {
    transform: translateY(-2px);
    border-color: rgba(var(--ssjx-group-rgb), .52);
    box-shadow:
        0 0 0 1px rgba(var(--ssjx-group-rgb), .08),
        0 8px 22px rgba(0, 0, 0, .22),
        0 0 20px rgba(var(--ssjx-group-rgb), .10);
}

.ssjx__card.is-active {
    border-color: rgba(var(--ssjx-group-rgb), .86);
    box-shadow:
        0 0 0 1px rgba(var(--ssjx-group-rgb), .18),
        0 0 22px rgba(var(--ssjx-group-rgb), .20),
        inset 0 0 22px rgba(var(--ssjx-group-rgb), .045);
}

.ssjx__card:hover::before,
.ssjx__card.is-active::before,
.ssjx__card.is-saved::before {
    opacity: 1;
}

.ssjx__card-main,
.ssjx__card-main:hover,
.ssjx__card-main:focus,
.ssjx__card-main:active {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: 42px minmax(0, 1fr) 28px;
    justify-items: center;
    align-content: center;
    width: 100%;
    min-height: inherit;
    margin: 0;
    padding: 15px 10px 11px;
    gap: 8px;
    color: #e7e9f3 !important;
    text-align: center;
    background: transparent !important;
    border: 0 !important;
    border-radius: inherit !important;
    box-shadow: none !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ssjx__card--last .ssjx__card-main {
    grid-template-columns: 56px minmax(0, 1fr) 36px;
    grid-template-rows: 1fr;
    justify-items: start;
    align-items: center;
    min-height: 84px;
    padding: 10px 50px 10px 12px;
    text-align: left;
}

.ssjx__card-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--ssjx-group-accent);
    border: 1px solid rgba(var(--ssjx-group-rgb), .20);
    border-radius: 12px;
    transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.ssjx__card-icon svg {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 5px rgba(var(--ssjx-group-rgb), .36));
}

.ssjx__card:hover .ssjx__card-icon,
.ssjx__card.is-active .ssjx__card-icon {
    border-color: rgba(var(--ssjx-group-rgb), .65);
    box-shadow:
        inset 0 0 12px rgba(var(--ssjx-group-rgb), .07),
        0 0 15px rgba(var(--ssjx-group-rgb), .17);
    transform: translateY(-1px);
}

.ssjx__card-title {
    align-self: start;
    max-width: 130px;
    color: #e9ebf4;
    font-size: clamp(10px, .74vw, 12px);
    font-weight: 650;
    line-height: 1.24;
    text-wrap: balance;
}

.ssjx__card--last .ssjx__card-title {
    align-self: center;
    max-width: none;
    font-size: clamp(12px, .92vw, 14px);
}

.ssjx__card-arrow {
    position: relative;
    align-self: end;
    display: grid;
    place-items: center;
    width: 34px;
    height: 24px;
    margin-bottom: 1px;
    color: rgba(var(--ssjx-group-rgb), .96);
    background:
        linear-gradient(135deg, rgba(var(--ssjx-group-rgb), .14), rgba(var(--ssjx-group-rgb), .055));
    border: 1px solid rgba(var(--ssjx-group-rgb), .42);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 0 0 rgba(var(--ssjx-group-rgb), 0);
    opacity: .18;
    transform: translateX(-7px) scale(.92);
    transition:
        opacity 180ms ease,
        transform 220ms cubic-bezier(.16, .78, .22, 1),
        color 180ms ease,
        background 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.ssjx__card-arrow::before {
    position: absolute;
    left: -9px;
    top: 50%;
    width: 10px;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(var(--ssjx-group-rgb), .8));
    box-shadow: 0 0 6px rgba(var(--ssjx-group-rgb), .28);
    opacity: 0;
    transform: translateY(-50%) scaleX(.45);
    transform-origin: 100% 50%;
    transition: opacity 180ms ease, transform 220ms ease;
    pointer-events: none;
}

.ssjx__card-arrow svg {
    width: 19px;
    height: 19px;
    stroke-width: 2.15;
    filter: drop-shadow(0 0 5px rgba(var(--ssjx-group-rgb), .30));
    transition: transform 220ms cubic-bezier(.16, .78, .22, 1), filter 220ms ease;
}

.ssjx__card--last .ssjx__card-arrow {
    align-self: center;
    justify-self: end;
    opacity: .52;
    transform: none;
}

.ssjx__card:hover .ssjx__card-arrow,
.ssjx__card:focus-within .ssjx__card-arrow,
.ssjx__card.is-active .ssjx__card-arrow {
    color: #f8f5ff;
    background:
        linear-gradient(135deg, rgba(var(--ssjx-group-rgb), .30), rgba(var(--ssjx-group-rgb), .12));
    border-color: rgba(var(--ssjx-group-rgb), .90);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .12),
        0 0 0 1px rgba(var(--ssjx-group-rgb), .10),
        0 0 14px rgba(var(--ssjx-group-rgb), .28);
    opacity: 1;
    transform: translateX(0) scale(1);
}

.ssjx__card:hover .ssjx__card-arrow::before,
.ssjx__card:focus-within .ssjx__card-arrow::before,
.ssjx__card.is-active .ssjx__card-arrow::before {
    opacity: .9;
    transform: translateY(-50%) scaleX(1);
}

.ssjx__card:hover .ssjx__card-arrow svg,
.ssjx__card:focus-within .ssjx__card-arrow svg {
    transform: translateX(1.5px);
    filter: drop-shadow(0 0 7px rgba(var(--ssjx-group-rgb), .46));
}

.ssjx__card.is-active .ssjx__card-arrow svg {
    animation: ssjx-card-arrow-arrive 420ms cubic-bezier(.16, .78, .22, 1) both;
    filter: drop-shadow(0 0 8px rgba(var(--ssjx-group-rgb), .52));
}

.ssjx__card-main:active .ssjx__card-arrow {
    background:
        linear-gradient(135deg, rgba(var(--ssjx-group-rgb), .38), rgba(var(--ssjx-group-rgb), .16));
    box-shadow:
        inset 0 2px 7px rgba(0, 0, 0, .20),
        0 0 0 1px rgba(var(--ssjx-group-rgb), .14),
        0 0 16px rgba(var(--ssjx-group-rgb), .31);
}

@keyframes ssjx-card-arrow-arrive {
    0% { transform: translateX(-2px); opacity: .72; }
    58% { transform: translateX(3px); opacity: 1; }
    100% { transform: translateX(1.5px); opacity: 1; }
}

.ssjx__card-save,
.ssjx__card-save:hover,
.ssjx__card-save:focus,
.ssjx__card-save:active {
    position: absolute;
    z-index: 5;
    top: 7px;
    right: 7px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    color: rgba(209, 214, 235, .56) !important;
    background: rgba(4, 6, 13, .72) !important;
    border: 1px solid rgba(170, 181, 217, .15) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    cursor: pointer;
    opacity: .68;
    -webkit-appearance: none;
    appearance: none;
    transition: color 180ms ease, opacity 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.ssjx__card-save svg {
    width: 14px;
    height: 14px;
}

.ssjx__card:hover .ssjx__card-save,
.ssjx__card-save:focus-visible,
.ssjx__card-save.is-saved {
    opacity: 1;
}

.ssjx__card-save.is-saved {
    color: #f08cdd !important;
    border-color: rgba(var(--ssjx-pink-rgb), .52) !important;
    box-shadow: 0 0 12px rgba(var(--ssjx-pink-rgb), .14) !important;
}

.ssjx__card-save.is-saved svg {
    fill: currentColor;
}


/* =========================================================
   SELECTED-CATEGORY GUIDE WIRE — V1.5 ROUTED / PERSISTENT
   ---------------------------------------------------------
   The selected tile grows a bright, rounded guide line towards
   the preview. On wide screens the line travels through the
   clear gutters between category tiles and then uses the central
   corridor between the two large category panels. On stacked
   tablet layouts it stays in the nearest safe internal gutter.

   V1.5 deliberately keeps the completed bright line visible.
   It no longer relies on a dash state that can leave only the
   dim ghost path visible after scrolling or re-layout.
   ========================================================= */

.ssjx__guide-wire {
    --ssjx-guide-rgb: var(--ssjx-violet-rgb);

    position: absolute;
    z-index: 12;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
}

.ssjx__guide-wire.is-visible {
    opacity: 1;
}

.ssjx__guide-wire-ghost,
.ssjx__guide-wire-path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.ssjx__guide-wire-ghost {
    stroke: rgba(var(--ssjx-guide-rgb), .20);
    stroke-width: 7;
    filter: drop-shadow(0 0 8px rgba(var(--ssjx-guide-rgb), .12));
}

.ssjx__guide-wire-path {
    stroke: rgb(var(--ssjx-guide-rgb));
    stroke-width: 3;
    opacity: 1;
    filter:
        drop-shadow(0 0 3px rgba(var(--ssjx-guide-rgb), .98))
        drop-shadow(0 0 11px rgba(var(--ssjx-guide-rgb), .76))
        drop-shadow(0 0 24px rgba(var(--ssjx-guide-rgb), .28));
}

.ssjx__guide-wire.is-drawing .ssjx__guide-wire-path {
    filter:
        drop-shadow(0 0 4px rgba(var(--ssjx-guide-rgb), 1))
        drop-shadow(0 0 13px rgba(var(--ssjx-guide-rgb), .82))
        drop-shadow(0 0 26px rgba(var(--ssjx-guide-rgb), .30));
}

.ssjx__guide-wire-start,
.ssjx__guide-wire-end,
.ssjx__guide-wire-halo {
    fill: rgb(var(--ssjx-guide-rgb));
    vector-effect: non-scaling-stroke;
    transform-box: fill-box;
    transform-origin: center;
}

.ssjx__guide-wire-start {
    opacity: .95;
    filter: drop-shadow(0 0 8px rgba(var(--ssjx-guide-rgb), .74));
}

.ssjx__guide-wire-halo {
    opacity: 0;
    filter: blur(.25px) drop-shadow(0 0 12px rgba(var(--ssjx-guide-rgb), .70));
}

.ssjx__guide-wire-end {
    opacity: 0;
    filter:
        drop-shadow(0 0 5px rgba(var(--ssjx-guide-rgb), 1))
        drop-shadow(0 0 15px rgba(var(--ssjx-guide-rgb), .85))
        drop-shadow(0 0 28px rgba(var(--ssjx-guide-rgb), .40));
}

.ssjx__guide-wire.is-arrived .ssjx__guide-wire-end {
    opacity: 1;
    animation: ssjx-guide-end-pulse 2.35s ease-in-out infinite;
}

.ssjx__guide-wire.is-arrived .ssjx__guide-wire-halo {
    opacity: .18;
    animation: ssjx-guide-halo-pulse 2.35s ease-in-out infinite;
}

@keyframes ssjx-guide-end-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: .90;
    }

    50% {
        transform: scale(1.22);
        opacity: 1;
    }
}

@keyframes ssjx-guide-halo-pulse {
    0%,
    100% {
        transform: scale(.76);
        opacity: .10;
    }

    50% {
        transform: scale(1.20);
        opacity: .27;
    }
}

@media (max-width: 720px) {
    .ssjx__guide-wire {
        display: none !important;
    }
}


/* V1.5: give the guide wire a real visual corridor between the category
 * panels and the preview instead of forcing it to sit on a panel edge. */
@media (min-width: 721px) {
    .ssjx__groups {
        margin-bottom: 2px;
    }

    .ssjx__group {
        overflow: visible;
    }
}

/* =========================================================
   PREVIEW DRAWER
   ========================================================= */

.ssjx__preview[hidden] {
    display: none !important;
}

.ssjx__preview {
    /*
     * V1.3: the preview inherits the colour family of the category that
     * opened it. Creative / Personal stays violet-pink; Where SymSoul Helps
     * switches to the same clean blue used by its category icons.
     */
    --ssjx-preview-rgb: var(--ssjx-violet-rgb);
    --ssjx-preview-accent: var(--ssjx-violet);
    --ssjx-preview-secondary-rgb: var(--ssjx-pink-rgb);
    --ssjx-preview-secondary: var(--ssjx-pink);
    --ssjx-preview-button-a: #7446d8;
    --ssjx-preview-button-b: #ad55df;
    --ssjx-preview-button-c: #e059c7;
    position: relative;
    z-index: 8;
    display: grid;
    grid-template-columns: clamp(110px, 12vw, 170px) minmax(0, 1fr);
    align-items: stretch;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 42%, rgba(var(--ssjx-preview-rgb), .13), transparent 20%),
        linear-gradient(135deg, rgba(15, 18, 34, .98), rgba(5, 7, 15, .99));
    border: 1px solid rgba(var(--ssjx-preview-rgb), .42);
    border-radius: 22px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        0 18px 45px rgba(0, 0, 0, .28),
        0 0 28px rgba(var(--ssjx-preview-rgb), .10);
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height 400ms var(--ssjx-ease), margin-top 300ms ease, opacity 260ms ease, transform 360ms var(--ssjx-ease);
}

.ssjx__preview[data-ssjx-theme="blue"] {
    --ssjx-preview-rgb: var(--ssjx-blue-rgb);
    --ssjx-preview-accent: var(--ssjx-blue);
    --ssjx-preview-secondary-rgb: 103, 216, 255;
    --ssjx-preview-secondary: #67d8ff;
    --ssjx-preview-button-a: #315fc9;
    --ssjx-preview-button-b: #4d86ee;
    --ssjx-preview-button-c: #74b9ff;
}

.ssjx__preview.is-open {
    max-height: 620px;
    margin-top: 28px;
    opacity: 1;
    transform: translateY(0);
}

.ssjx__preview-icon {
    display: grid;
    place-items: center;
    min-height: 230px;
    color: var(--ssjx-preview-accent);
    border-right: 1px solid rgba(var(--ssjx-preview-rgb), .30);
    background:
        radial-gradient(circle at center, rgba(var(--ssjx-preview-rgb), .16), transparent 48%);
}

.ssjx__preview-icon svg {
    width: clamp(62px, 6vw, 88px);
    height: clamp(62px, 6vw, 88px);
    stroke-width: 1.25;
    filter:
        drop-shadow(0 0 8px rgba(var(--ssjx-preview-rgb), .62))
        drop-shadow(0 0 22px rgba(var(--ssjx-preview-secondary-rgb), .22));
}

.ssjx__preview-copy {
    position: relative;
    padding: clamp(18px, 2vw, 28px);
}

.ssjx__preview-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.ssjx__preview-meta > span {
    color: var(--ssjx-preview-accent);
    opacity: .82;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ssjx__preview-close,
.ssjx__preview-close:hover,
.ssjx__preview-close:focus,
.ssjx__preview-close:active {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    color: #9ca3b8 !important;
    background: rgba(255, 255, 255, .025) !important;
    border: 1px solid rgba(178, 188, 219, .13) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    cursor: pointer;
}

.ssjx__preview-close svg {
    width: 15px;
    height: 15px;
}

.ssjx__preview h3 {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(22px, 2.1vw, 34px) !important;
    font-weight: 630 !important;
    line-height: 1.03 !important;
    letter-spacing: -.035em !important;
}

.ssjx__preview-summary {
    max-width: 780px;
    margin: 9px 0 14px !important;
    color: #d9dce7 !important;
    font-size: clamp(14px, 1.02vw, 17px) !important;
    line-height: 1.45 !important;
}

.ssjx__preview-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 18px !important;
    padding: 0 !important;
    gap: 8px;
    list-style: none !important;
}

.ssjx__preview-points li {
    position: relative;
    min-height: 72px;
    margin: 0 !important;
    padding: 13px 13px 13px 30px;
    color: #abb2c6;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(174, 185, 217, .10);
    border-radius: 13px;
    font-size: clamp(11px, .76vw, 13px);
    line-height: 1.42;
}

.ssjx__preview-points li::before {
    position: absolute;
    top: 17px;
    left: 12px;
    width: 7px;
    height: 7px;
    content: "";
    border: 1px solid var(--ssjx-preview-accent);
    border-radius: 50%;
    box-shadow: 0 0 7px rgba(var(--ssjx-preview-rgb), .58);
}

.ssjx__preview-actions,
.ssjx__journey-export-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

@media (min-width: 721px) {
    .ssjx__preview-actions .ssjx__button--primary {
        min-width: 168px;
    }

    .ssjx__preview-actions .ssjx__button--ghost {
        min-width: 186px;
    }
}

.ssjx__button,
.ssjx__button:hover,
.ssjx__button:focus,
.ssjx__button:focus-visible,
.ssjx__button:active {
    /*
     * BUTTON GEOMETRY LOCK
     * Keep the exact same dimensions and typography in every interaction state.
     * This prevents theme/browser :active rules from shrinking the control or
     * changing the text metrics while it is being clicked.
     */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 12px 19px !important;
    gap: 9px;
    overflow: hidden;
    color: #e9eaf3 !important;
    background: rgba(13, 16, 29, .90) !important;
    border: 1px solid rgba(171, 183, 217, .27) !important;
    border-radius: 13px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .045),
        0 7px 18px rgba(0, 0, 0, .12) !important;
    font-family: inherit !important;
    font-size: clamp(13px, .88vw, 15px) !important;
    font-style: normal !important;
    font-weight: 720 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-text-size-adjust: 100%;
    transform: translate3d(0, 0, 0) !important;
    scale: 1 !important;
    transition:
        color 180ms ease,
        border-color 190ms ease,
        box-shadow 220ms ease,
        background 220ms ease,
        filter 180ms ease !important;
}

/* A restrained travelling highlight gives rollover feedback without moving the button. */
.ssjx__button::before {
    position: absolute;
    z-index: 0;
    top: -35%;
    bottom: -35%;
    left: -42%;
    width: 30%;
    content: "";
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .17), transparent);
    opacity: 0;
    transform: skewX(-18deg) translateX(0);
    transition: transform 520ms var(--ssjx-ease), opacity 180ms ease;
    pointer-events: none;
}

.ssjx__button > * {
    position: relative;
    z-index: 1;
}

.ssjx__button svg {
    flex: 0 0 auto;
    width: 17px !important;
    height: 17px !important;
    transform: none !important;
    transition: color 180ms ease, filter 180ms ease, opacity 180ms ease !important;
}

.ssjx__button:hover {
    filter: brightness(1.06);
}

.ssjx__button:hover::before {
    opacity: .86;
    transform: skewX(-18deg) translateX(510%);
}

/* Press feedback is produced inside the surface, never by shrinking the control. */
.ssjx__button:active {
    transform: translate3d(0, 0, 0) !important;
    scale: 1 !important;
    filter: brightness(.98) saturate(1.04);
    box-shadow:
        inset 0 2px 7px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 4px 12px rgba(0, 0, 0, .12) !important;
}

.ssjx__button--primary,
.ssjx__button--primary:hover,
.ssjx__button--primary:focus,
.ssjx__button--primary:focus-visible,
.ssjx__button--primary:active {
    color: #fff !important;
    background:
        linear-gradient(115deg, rgba(112, 67, 214, .99), rgba(175, 85, 223, .98) 56%, rgba(224, 89, 199, .96)) !important;
    border-color: rgba(220, 164, 255, .78) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .20),
        inset 0 -1px 0 rgba(60, 24, 105, .20),
        0 7px 18px rgba(0, 0, 0, .14),
        0 0 19px rgba(var(--ssjx-violet-rgb), .21) !important;
}

.ssjx__button--primary:hover {
    border-color: rgba(239, 196, 255, .94) !important;
    background:
        linear-gradient(115deg, rgba(123, 73, 230, 1), rgba(191, 91, 232, 1) 55%, rgba(237, 101, 209, .99)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .26),
        inset 0 -1px 0 rgba(60, 24, 105, .16),
        0 8px 20px rgba(0, 0, 0, .16),
        0 0 28px rgba(var(--ssjx-pink-rgb), .31) !important;
}

.ssjx__button--primary:active {
    background:
        linear-gradient(115deg, rgba(99, 57, 197, .99), rgba(158, 72, 207, .99) 55%, rgba(205, 74, 179, .98)) !important;
    border-color: rgba(229, 181, 255, .86) !important;
    box-shadow:
        inset 0 3px 8px rgba(39, 13, 75, .34),
        inset 0 1px 0 rgba(255, 255, 255, .13),
        0 4px 13px rgba(0, 0, 0, .16),
        0 0 20px rgba(var(--ssjx-violet-rgb), .22) !important;
}

/*
 * PREVIEW ACTION THEME
 * The preview actions now use the same colour family as the category grid.
 * This keeps a blue business selection blue all the way through the preview,
 * while Creative / Personal retains the violet-pink SymSoul treatment.
 */
.ssjx__preview .ssjx__button--primary,
.ssjx__preview .ssjx__button--primary:hover,
.ssjx__preview .ssjx__button--primary:focus,
.ssjx__preview .ssjx__button--primary:active {
    background:
        linear-gradient(
            115deg,
            var(--ssjx-preview-button-a),
            var(--ssjx-preview-button-b) 56%,
            var(--ssjx-preview-button-c)
        ) !important;
    border-color: rgba(var(--ssjx-preview-rgb), .88) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 0 20px rgba(var(--ssjx-preview-rgb), .28) !important;
}

.ssjx__preview .ssjx__button--primary:hover,
.ssjx__preview .ssjx__button--primary:focus-visible {
    border-color: rgba(var(--ssjx-preview-secondary-rgb), .98) !important;
    background:
        linear-gradient(
            115deg,
            color-mix(in srgb, var(--ssjx-preview-button-a) 90%, white 10%),
            color-mix(in srgb, var(--ssjx-preview-button-b) 90%, white 10%) 56%,
            color-mix(in srgb, var(--ssjx-preview-button-c) 90%, white 10%)
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .25),
        0 8px 20px rgba(0, 0, 0, .14),
        0 0 29px rgba(var(--ssjx-preview-rgb), .40),
        0 0 17px rgba(var(--ssjx-preview-secondary-rgb), .22) !important;
}

.ssjx__preview .ssjx__button--primary:active {
    background:
        linear-gradient(
            115deg,
            color-mix(in srgb, var(--ssjx-preview-button-a) 84%, black 16%),
            color-mix(in srgb, var(--ssjx-preview-button-b) 84%, black 16%) 56%,
            color-mix(in srgb, var(--ssjx-preview-button-c) 84%, black 16%)
        ) !important;
    border-color: rgba(var(--ssjx-preview-rgb), .92) !important;
    box-shadow:
        inset 0 3px 9px rgba(1, 4, 12, .28),
        inset 0 1px 0 rgba(255, 255, 255, .13),
        0 4px 12px rgba(0, 0, 0, .16),
        0 0 21px rgba(var(--ssjx-preview-rgb), .28) !important;
}

.ssjx__preview .ssjx__button--ghost,
.ssjx__preview .ssjx__button--ghost:hover,
.ssjx__preview .ssjx__button--ghost:focus,
.ssjx__preview .ssjx__button--ghost:active {
    border-color: rgba(var(--ssjx-preview-rgb), .48) !important;
    background:
        linear-gradient(135deg, rgba(var(--ssjx-preview-rgb), .075), rgba(10, 13, 25, .92)) !important;
}

.ssjx__preview .ssjx__button--ghost svg {
    color: var(--ssjx-preview-accent);
    filter: drop-shadow(0 0 6px rgba(var(--ssjx-preview-rgb), .34));
}

.ssjx__preview .ssjx__button--ghost:hover,
.ssjx__preview .ssjx__button--ghost:focus-visible {
    color: #fff !important;
    border-color: rgba(var(--ssjx-preview-rgb), .88) !important;
    background:
        linear-gradient(135deg, rgba(var(--ssjx-preview-rgb), .19), rgba(15, 19, 35, .98)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 7px 18px rgba(0, 0, 0, .12),
        0 0 21px rgba(var(--ssjx-preview-rgb), .18) !important;
}

.ssjx__preview .ssjx__button--ghost:active {
    color: #f5f7ff !important;
    border-color: rgba(var(--ssjx-preview-rgb), .80) !important;
    background:
        linear-gradient(135deg, rgba(var(--ssjx-preview-rgb), .13), rgba(8, 11, 23, .98)) !important;
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, .30),
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 4px 12px rgba(0, 0, 0, .12),
        0 0 16px rgba(var(--ssjx-preview-rgb), .13) !important;
}

.ssjx__preview .ssjx__button--ghost.is-saved,
.ssjx__preview .ssjx__button--primary.is-saved {
    border-color: rgba(var(--ssjx-preview-rgb), .88) !important;
    box-shadow:
        inset 0 0 13px rgba(var(--ssjx-preview-rgb), .08),
        0 0 20px rgba(var(--ssjx-preview-rgb), .20) !important;
}

.ssjx__preview .ssjx__button--ghost.is-saved svg,
.ssjx__preview .ssjx__button--primary.is-saved svg {
    color: var(--ssjx-preview-accent);
    fill: currentColor;
}

.ssjx__button--ghost.is-saved,
.ssjx__button--primary.is-saved {
    border-color: rgba(var(--ssjx-pink-rgb), .60) !important;
    box-shadow: 0 0 18px rgba(var(--ssjx-pink-rgb), .12) !important;
}

.ssjx__button--ghost.is-saved svg,
.ssjx__button--primary.is-saved svg {
    fill: currentColor;
}

.ssjx__button--wide {
    width: 100%;
}

.ssjx__button:disabled,
.ssjx__socials button:disabled {
    opacity: .34 !important;
    cursor: default !important;
    filter: grayscale(.2);
    transform: none !important;
}

/* =========================================================
   VALUE STRIP
   ========================================================= */

.ssjx__value-strip {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(190px, 1.25fr) repeat(4, minmax(0, 1fr));
    align-items: stretch;
    margin-top: clamp(18px, 2vw, 28px);
    overflow: hidden;
    background: rgba(7, 9, 17, .73);
    border: 1px solid rgba(164, 174, 207, .14);
    border-radius: 17px;
}

.ssjx__value-intro,
.ssjx__value-chip {
    min-width: 0;
    padding: 14px 16px;
}

.ssjx__value-intro {
    display: grid;
    align-content: center;
    border-right: 1px solid rgba(164, 174, 207, .12);
}

.ssjx__value-intro strong,
.ssjx__value-chip strong {
    color: #e8eaf3;
    font-size: 12px;
}

.ssjx__value-intro span,
.ssjx__value-chip small {
    margin-top: 4px;
    color: #7f879c;
    font-size: 9px;
    line-height: 1.35;
}

.ssjx__value-chip {
    position: relative;
    display: grid;
    align-content: center;
    padding-left: 44px;
    border-right: 1px solid rgba(164, 174, 207, .08);
}

.ssjx__value-chip:last-child {
    border-right: 0;
}

.ssjx__value-chip > span {
    position: absolute;
    top: 50%;
    left: 14px;
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    color: #b98bff;
    border: 1px solid rgba(var(--ssjx-violet-rgb), .33);
    border-radius: 7px;
    font-size: 8px;
    font-weight: 900;
    transform: translateY(-50%);
}

/* =========================================================
   MODALS — COMMON
   ========================================================= */

.ssjx__modal[hidden] {
    display: none !important;
}

.ssjx__modal {
    position: fixed;
    z-index: 1000010;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(12px, 2vw, 26px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 0s linear 240ms;
}

.ssjx__modal.is-open {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.ssjx__modal-backdrop,
.ssjx__modal-backdrop:hover,
.ssjx__modal-backdrop:focus,
.ssjx__modal-backdrop:active {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: rgba(0, 2, 8, .80) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: default;
}

.ssjx__icon-button,
.ssjx__icon-button:hover,
.ssjx__icon-button:focus,
.ssjx__icon-button:active {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    color: inherit !important;
    background: transparent !important;
    border: 1px solid currentColor !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    opacity: .72;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ssjx__icon-button:hover {
    opacity: 1;
}

.ssjx__icon-button svg {
    width: 18px;
    height: 18px;
}

/* =========================================================
   DETAIL CANVAS — DARK FIRST / LIGHT READING ONLY
   ========================================================= */

.ssjx__detail-canvas {
    --detail-bg: #0b0e18;
    --detail-panel: #101522;
    --detail-panel-soft: #0e121e;
    --detail-text: #f5f6fb;
    --detail-soft: #b7bdce;
    --detail-muted: #7e879e;
    --detail-line: rgba(182, 192, 220, .15);
    --detail-chip: rgba(169, 120, 255, .08);
    --detail-shadow: rgba(0, 0, 0, .48);

    position: relative;
    z-index: 2;
    width: min(1080px, 100%);
    max-height: min(92vh, 900px);
    max-height: min(92dvh, 900px);
    overflow: auto;
    color: var(--detail-text);
    background:
        radial-gradient(circle at 0 0, rgba(var(--ssjx-violet-rgb), .075), transparent 26%),
        var(--detail-bg);
    border: 1px solid rgba(var(--ssjx-violet-rgb), .24);
    border-radius: 25px;
    box-shadow:
        0 28px 90px var(--detail-shadow),
        0 0 0 1px rgba(255, 255, 255, .02),
        0 0 42px rgba(var(--ssjx-violet-rgb), .07);
    opacity: 0;
    transform: translateY(20px) scale(.975);
    transition: opacity 280ms ease, transform 360ms var(--ssjx-ease), background 250ms ease, color 250ms ease;
}

.ssjx__modal.is-open .ssjx__detail-canvas {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ssjx__detail-canvas[data-ssjx-reading="light"] {
    --detail-bg: #f8f8fc;
    --detail-panel: #ffffff;
    --detail-panel-soft: #f1f1f8;
    --detail-text: #171824;
    --detail-soft: #494d5f;
    --detail-muted: #737789;
    --detail-line: rgba(60, 66, 91, .13);
    --detail-chip: rgba(127, 74, 220, .07);
    --detail-shadow: rgba(0, 0, 0, .30);
    background:
        radial-gradient(circle at 0 0, rgba(var(--ssjx-violet-rgb), .075), transparent 28%),
        var(--detail-bg);
    border-color: rgba(169, 120, 255, .28);
}

.ssjx__detail-toolbar {
    position: sticky;
    z-index: 10;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px clamp(14px, 2vw, 24px);
    background: color-mix(in srgb, var(--detail-bg) 90%, transparent);
    border-bottom: 1px solid var(--detail-line);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

@supports not (background: color-mix(in srgb, #000 50%, #fff)) {
    .ssjx__detail-toolbar {
        background: var(--detail-bg);
    }
}

.ssjx__detail-back,
.ssjx__detail-back:hover,
.ssjx__detail-back:focus,
.ssjx__detail-back:active,
.ssjx__reading-toggle,
.ssjx__reading-toggle:hover,
.ssjx__reading-toggle:focus,
.ssjx__reading-toggle:active {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    margin: 0;
    padding: 8px 11px;
    gap: 7px;
    color: var(--detail-soft) !important;
    background: transparent !important;
    border: 1px solid var(--detail-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ssjx__detail-back svg {
    width: 16px;
    height: 16px;
    transform: rotate(180deg);
}

.ssjx__reading-toggle svg {
    width: 16px;
    height: 16px;
    color: #c888ff;
}

.ssjx__detail-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--detail-muted);
}

.ssjx__detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 310px);
    gap: clamp(24px, 3vw, 42px);
    padding: clamp(24px, 3vw, 42px);
}

.ssjx__detail-heading {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
}

.ssjx__detail-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    color: #b276ff;
    background: var(--detail-chip);
    border: 1px solid rgba(var(--ssjx-violet-rgb), .28);
    border-radius: 18px;
    box-shadow:
        inset 0 0 18px rgba(var(--ssjx-violet-rgb), .05),
        0 0 16px rgba(var(--ssjx-violet-rgb), .08);
}

.ssjx__detail-icon svg {
    width: 34px;
    height: 34px;
    filter: drop-shadow(0 0 7px rgba(var(--ssjx-violet-rgb), .28));
}

.ssjx__detail-section,
.ssjx__detail-kicker,
.ssjx__detail-side-label {
    color: #9b6fe8;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ssjx__detail-heading h3 {
    margin: 5px 0 0 !important;
    color: var(--detail-text) !important;
    font-size: clamp(27px, 3vw, 42px) !important;
    font-weight: 650 !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
    text-wrap: balance;
}

.ssjx__detail-summary {
    max-width: 690px;
    margin: 21px 0 13px !important;
    color: var(--detail-soft) !important;
    font-size: clamp(16px, 1.35vw, 20px) !important;
    line-height: 1.45 !important;
}

.ssjx__detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.ssjx__detail-tags span {
    padding: 7px 10px;
    color: #a87ce9;
    background: var(--detail-chip);
    border: 1px solid rgba(var(--ssjx-violet-rgb), .17);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
}

.ssjx__detail-block {
    margin-top: clamp(26px, 3vw, 38px);
    padding-top: 22px;
    border-top: 1px solid var(--detail-line);
}

.ssjx__detail-body {
    display: grid;
    gap: 13px;
    margin-top: 13px;
}

.ssjx__detail-body p {
    margin: 0 !important;
    color: var(--detail-soft) !important;
    font-size: clamp(14px, 1.03vw, 16px) !important;
    line-height: 1.63 !important;
}

.ssjx__detail-body p:first-child {
    color: var(--detail-text) !important;
    font-weight: 600;
}

.ssjx__detail-value-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 13px;
}

.ssjx__detail-value-grid div {
    min-height: 96px;
    padding: 14px;
    background: var(--detail-panel-soft);
    border: 1px solid var(--detail-line);
    border-radius: 14px;
}

.ssjx__detail-value-grid strong {
    display: block;
    color: var(--detail-text);
    font-size: 12px;
}

.ssjx__detail-value-grid span {
    display: block;
    margin-top: 6px;
    color: var(--detail-muted);
    font-size: 10px;
    line-height: 1.45;
}

.ssjx__detail-side {
    display: grid;
    align-content: start;
    gap: 11px;
}

.ssjx__detail-side-card {
    padding: 18px;
    color: var(--detail-text);
    background: var(--detail-panel);
    border: 1px solid var(--detail-line);
    border-radius: 17px;
}

.ssjx__detail-side-card h4 {
    margin: 8px 0 8px !important;
    color: var(--detail-text) !important;
    font-size: 17px !important;
    font-weight: 650 !important;
    line-height: 1.18 !important;
}

.ssjx__detail-side-card p {
    margin: 0 0 15px !important;
    color: var(--detail-muted) !important;
    font-size: 11px !important;
    line-height: 1.52 !important;
}

.ssjx__detail-canvas[data-ssjx-reading="light"] .ssjx__button--ghost {
    color: #363746 !important;
    background: #fff !important;
    border-color: rgba(63, 66, 91, .16) !important;
}

/* =========================================================
   JOURNEY PANEL
   ========================================================= */

.ssjx__journey-panel {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
    max-height: min(93vh, 930px);
    max-height: min(93dvh, 930px);
    overflow: auto;
    color: #f4f5fb;
    background:
        radial-gradient(circle at 8% 4%, rgba(var(--ssjx-violet-rgb), .10), transparent 25%),
        radial-gradient(circle at 93% 0%, rgba(var(--ssjx-blue-rgb), .07), transparent 21%),
        #080b14;
    border: 1px solid rgba(var(--ssjx-violet-rgb), .24);
    border-radius: 25px;
    box-shadow:
        0 30px 100px rgba(0, 0, 0, .54),
        0 0 40px rgba(var(--ssjx-violet-rgb), .06);
    opacity: 0;
    transform: translateY(22px) scale(.975);
    transition: opacity 280ms ease, transform 360ms var(--ssjx-ease);
}

.ssjx__modal.is-open .ssjx__journey-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ssjx__journey-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    padding: clamp(22px, 3vw, 38px) clamp(22px, 3vw, 40px) 20px;
    border-bottom: 1px solid rgba(178, 188, 219, .11);
}

.ssjx__journey-head h3 {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(28px, 3vw, 43px) !important;
    font-weight: 620 !important;
    line-height: 1 !important;
    letter-spacing: -.04em !important;
}

.ssjx__journey-head p {
    max-width: 700px;
    margin: 9px 0 0 !important;
    color: #8f96aa !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

.ssjx__journey-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 720px;
    margin: 18px auto 0;
    padding: 0 28px;
    color: #727a90;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ssjx__journey-progress span {
    position: relative;
    display: grid;
    grid-template-columns: 15px 1fr;
    align-items: center;
    gap: 7px;
}

.ssjx__journey-progress span:not(:last-child)::after {
    position: absolute;
    left: 13px;
    right: 9px;
    top: 6px;
    height: 1px;
    content: "";
    background: rgba(150, 161, 195, .17);
}

.ssjx__journey-progress i {
    position: relative;
    z-index: 2;
    width: 12px;
    height: 12px;
    background: #0a0d16;
    border: 1px solid rgba(143, 153, 187, .35);
    border-radius: 50%;
}

.ssjx__journey-progress .is-done,
.ssjx__journey-progress .is-active {
    color: #cbb5ee;
}

.ssjx__journey-progress .is-done i,
.ssjx__journey-progress .is-active i {
    border-color: rgba(var(--ssjx-violet-rgb), .75);
    box-shadow: 0 0 8px rgba(var(--ssjx-violet-rgb), .25);
}

.ssjx__journey-progress .is-done i {
    background: var(--ssjx-violet);
}

.ssjx__journey-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
    gap: clamp(14px, 2vw, 22px);
    padding: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 40px);
}

.ssjx__journey-saved,
.ssjx__journey-value {
    min-width: 0;
    padding: clamp(16px, 2vw, 22px);
    background: rgba(13, 16, 29, .72);
    border: 1px solid rgba(171, 182, 215, .12);
    border-radius: 18px;
}

.ssjx__journey-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.ssjx__journey-section-head > div {
    display: grid;
}

.ssjx__journey-section-head span,
.ssjx__journey-value-head span,
.ssjx__journey-export-label {
    color: #8c76aa;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.ssjx__journey-section-head strong,
.ssjx__journey-value-head strong {
    margin-top: 4px;
    color: #eef0f7;
    font-size: 14px;
}

.ssjx__journey-section-head button,
.ssjx__journey-section-head button:hover,
.ssjx__journey-section-head button:focus,
.ssjx__journey-section-head button:active {
    margin: 0;
    padding: 7px 9px;
    color: #777f94 !important;
    background: transparent !important;
    border: 1px solid rgba(151, 161, 194, .14) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 9px;
    cursor: pointer;
}

.ssjx__journey-empty {
    display: grid;
    place-items: center;
    min-height: 270px;
    padding: 24px;
    text-align: center;
    border: 1px dashed rgba(var(--ssjx-violet-rgb), .20);
    border-radius: 15px;
}

.ssjx__journey-empty[hidden] {
    display: none !important;
}

.ssjx__journey-empty > span {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
    color: #bd82ff;
    border: 1px solid rgba(var(--ssjx-violet-rgb), .30);
    border-radius: 18px;
    box-shadow: 0 0 20px rgba(var(--ssjx-violet-rgb), .08);
}

.ssjx__journey-empty > span svg {
    width: 31px;
    height: 31px;
}

.ssjx__journey-empty h4 {
    margin: 0 !important;
    color: #f1f2f8 !important;
    font-size: 17px !important;
}

.ssjx__journey-empty p {
    max-width: 390px;
    margin: 8px 0 16px !important;
    color: #7e879b !important;
    font-size: 11px !important;
    line-height: 1.52 !important;
}

.ssjx__journey-list {
    display: grid;
    gap: 8px;
    max-height: 390px;
    overflow: auto;
    padding-right: 3px;
}

.ssjx__journey-list[hidden] {
    display: none !important;
}

.ssjx__journey-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 11px;
    padding: 10px;
    background: rgba(7, 9, 17, .80);
    border: 1px solid rgba(157, 169, 205, .12);
    border-radius: 13px;
}

.ssjx__journey-item-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #be83ff;
    border: 1px solid rgba(var(--ssjx-violet-rgb), .24);
    border-radius: 11px;
}

.ssjx__journey-item-icon svg {
    width: 23px;
    height: 23px;
}

.ssjx__journey-item-copy {
    display: grid;
    min-width: 0;
}

.ssjx__journey-item-copy small {
    color: #746a86;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ssjx__journey-item-copy strong {
    margin-top: 2px;
    color: #e6e8f1;
    font-size: 11px;
    line-height: 1.2;
}

.ssjx__journey-item-copy > span {
    margin-top: 3px;
    color: #747d92;
    font-size: 9px;
    line-height: 1.32;
}

.ssjx__journey-item > button,
.ssjx__journey-item > button:hover,
.ssjx__journey-item > button:focus,
.ssjx__journey-item > button:active {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    color: #817e8d !important;
    background: transparent !important;
    border: 1px solid rgba(159, 169, 199, .14) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    cursor: pointer;
}

.ssjx__journey-item > button svg {
    width: 14px;
    height: 14px;
}

.ssjx__journey-value-head {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
}

.ssjx__journey-value-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    color: #c084ff;
    border: 1px solid rgba(var(--ssjx-violet-rgb), .27);
    border-radius: 13px;
}

.ssjx__journey-value-icon svg {
    width: 24px;
    height: 24px;
}

.ssjx__journey-value-copy {
    margin: 13px 0 15px !important;
    color: #80899d !important;
    font-size: 10px !important;
    line-height: 1.52 !important;
}

.ssjx__estimate-inputs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.ssjx__estimate-inputs label {
    display: grid;
    align-content: start;
    gap: 7px;
    padding: 11px;
    background: rgba(5, 7, 14, .70);
    border: 1px solid rgba(160, 171, 204, .11);
    border-radius: 12px;
}

.ssjx__estimate-inputs label > span {
    min-height: 28px;
    color: #838b9e;
    font-size: 9px;
    line-height: 1.35;
}

.ssjx__estimate-inputs label > div {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 0 10px;
    gap: 6px;
    background: #090c15;
    border: 1px solid rgba(var(--ssjx-violet-rgb), .20);
    border-radius: 9px;
}

.ssjx__estimate-inputs input,
.ssjx__estimate-inputs input:hover,
.ssjx__estimate-inputs input:focus {
    min-width: 0;
    width: 100%;
    height: 34px;
    margin: 0;
    padding: 0;
    color: #f4f5fb;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0;
    font-size: 17px;
    font-weight: 750;
    -moz-appearance: textfield;
}

.ssjx__estimate-inputs input::-webkit-outer-spin-button,
.ssjx__estimate-inputs input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.ssjx__estimate-inputs label > div small {
    color: #777f93;
    font-size: 9px;
}

.ssjx__estimate-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 9px;
}

.ssjx__estimate-results > div {
    min-height: 86px;
    padding: 11px;
    background:
        linear-gradient(145deg, rgba(var(--ssjx-violet-rgb), .055), rgba(6, 8, 15, .74));
    border: 1px solid rgba(var(--ssjx-violet-rgb), .16);
    border-radius: 12px;
}

.ssjx__estimate-results span,
.ssjx__estimate-results small {
    display: block;
    color: #787f92;
    font-size: 8px;
}

.ssjx__estimate-results strong {
    display: block;
    margin: 6px 0 3px;
    color: #deb2ff;
    font-size: clamp(19px, 2vw, 26px);
    line-height: 1;
}

.ssjx__estimate-note {
    margin-top: 9px;
    padding: 10px 11px;
    color: #6f778a;
    background: rgba(255, 255, 255, .018);
    border-left: 2px solid rgba(var(--ssjx-violet-rgb), .36);
    font-size: 8px;
    line-height: 1.45;
}

/* =========================================================
   PDF PREVIEW + SHARING
   ========================================================= */

.ssjx__journey-footer {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(310px, .72fr);
    align-items: center;
    gap: clamp(20px, 3vw, 42px);
    padding: 0 clamp(22px, 3vw, 40px) clamp(28px, 3vw, 40px);
}

.ssjx__journey-pdf-preview {
    display: flex;
    align-items: flex-end;
    min-height: 200px;
    padding: 18px;
    gap: 15px;
    overflow: hidden;
    background: rgba(9, 12, 22, .64);
    border: 1px solid rgba(158, 170, 207, .11);
    border-radius: 18px;
}

.ssjx__journey-pdf-cover,
.ssjx__journey-pdf-page {
    position: relative;
    flex: 0 0 auto;
    width: 120px;
    aspect-ratio: .707;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .32);
}

.ssjx__journey-pdf-cover {
    padding: 13px 12px;
    color: #fff;
    background:
        radial-gradient(circle at 80% 18%, rgba(var(--ssjx-blue-rgb), .16), transparent 25%),
        #050817;
    border: 1px solid rgba(var(--ssjx-violet-rgb), .28);
}

.ssjx__journey-pdf-cover::before,
.ssjx__journey-pdf-cover::after {
    position: absolute;
    width: 170px;
    height: 75px;
    content: "";
    border: 1px solid rgba(var(--ssjx-violet-rgb), .70);
    border-radius: 50%;
    filter: drop-shadow(0 0 7px rgba(var(--ssjx-violet-rgb), .35));
    transform: rotate(-23deg);
}

.ssjx__journey-pdf-cover::before {
    right: -58px;
    bottom: 35px;
}

.ssjx__journey-pdf-cover::after {
    right: -46px;
    bottom: 55px;
    border-color: rgba(var(--ssjx-pink-rgb), .48);
    transform: rotate(27deg);
}

.ssjx__journey-pdf-cover > span {
    color: #bea4e8;
    font-size: 7px;
    font-weight: 800;
}

.ssjx__journey-pdf-cover strong {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 22px;
    font-size: 18px;
    font-weight: 500;
    line-height: .95;
    letter-spacing: -.04em;
}

.ssjx__journey-pdf-cover small {
    position: absolute;
    z-index: 2;
    left: 12px;
    bottom: 12px;
    max-width: 78px;
    color: #868ca2;
    font-size: 5px;
    line-height: 1.35;
}

.ssjx__journey-pdf-page {
    width: 132px;
    padding: 14px 12px;
    color: #1c2030;
    background: #f8f8fc;
    border: 1px solid rgba(255, 255, 255, .8);
}

.ssjx__journey-pdf-page span,
.ssjx__journey-pdf-page strong {
    display: block;
    font-size: 7px;
}

.ssjx__journey-pdf-page i,
.ssjx__journey-pdf-page b {
    display: block;
    height: 5px;
    margin-top: 8px;
    background: #e7e4f2;
    border-radius: 2px;
}

.ssjx__journey-pdf-page i:nth-of-type(2) { width: 82%; }
.ssjx__journey-pdf-page i:nth-of-type(3) { width: 66%; }
.ssjx__journey-pdf-page i:nth-of-type(4) { width: 88%; }
.ssjx__journey-pdf-page strong { margin-top: 18px; color: #7b54c5; }
.ssjx__journey-pdf-page b { height: 18px; background: #f0ebfa; }

.ssjx__journey-export {
    display: grid;
    align-content: center;
    gap: 11px;
}

.ssjx__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.ssjx__socials button,
.ssjx__socials button:hover,
.ssjx__socials button:focus,
.ssjx__socials button:active {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    margin: 0;
    padding: 0;
    color: #cda4ff !important;
    background: #0b0e19 !important;
    border: 1px solid rgba(var(--ssjx-violet-rgb), .28) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 10px rgba(var(--ssjx-violet-rgb), .06) !important;
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ssjx__socials button svg {
    width: 14px;
    height: 14px;
}

.ssjx__socials button:hover {
    border-color: rgba(var(--ssjx-pink-rgb), .60) !important;
    box-shadow: 0 0 16px rgba(var(--ssjx-pink-rgb), .13) !important;
}

.ssjx__share-status {
    min-height: 16px;
    color: #a88bcf;
    font-size: 9px;
}

/* =========================================================
   MOBILE BAR
   ========================================================= */

.ssjx__mobile-bar {
    display: none;
}

/* =========================================================
   V1.1 VISIBILITY + INTERACTION PASS
   Stronger structural borders for low-brightness displays and
   clearer hover / selected surfaces without turning the UI neon.
   ========================================================= */

/* Main module edge: visible even when the screen is dimmed. */
.ssjx {
    border-color: rgba(187, 199, 238, .30);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        inset 0 0 0 1px rgba(111, 128, 178, .035),
        0 0 0 1px rgba(var(--ssjx-violet-rgb), .035),
        0 24px 70px rgba(0, 0, 0, .30);
}

/* Major dark panels use a two-stage edge: a readable keyline plus a soft inner highlight. */
.ssjx__group,
.ssjx__value-strip,
.ssjx__preview,
.ssjx__detail-canvas,
.ssjx__journey-panel,
.ssjx__journey-saved,
.ssjx__journey-value,
.ssjx__journey-pdf-preview {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .055),
        inset 0 0 0 1px rgba(198, 208, 238, .028),
        0 14px 34px rgba(0, 0, 0, .20);
}

.ssjx__group {
    border-color: rgba(var(--ssjx-group-rgb), .42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .065),
        inset 0 0 0 1px rgba(var(--ssjx-group-rgb), .055),
        0 14px 34px rgba(0, 0, 0, .20),
        0 0 24px rgba(var(--ssjx-group-rgb), .035);
}

.ssjx__group::before {
    height: 2px;
    opacity: .92;
    box-shadow: 0 0 13px rgba(var(--ssjx-group-rgb), .50);
}

.ssjx__group-symbol {
    background: rgba(var(--ssjx-group-rgb), .075);
    border-color: rgba(var(--ssjx-group-rgb), .56);
    box-shadow:
        inset 0 0 16px rgba(var(--ssjx-group-rgb), .075),
        0 0 12px rgba(var(--ssjx-group-rgb), .055);
}

/* Category tiles: stronger default separation. */
.ssjx__card {
    background:
        linear-gradient(155deg, rgba(18, 22, 39, .97), rgba(7, 9, 18, .995));
    border-color: rgba(176, 188, 224, .34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        inset 0 0 0 1px rgba(109, 124, 168, .035),
        0 5px 14px rgba(0, 0, 0, .14);
}

.ssjx__card::before {
    background:
        radial-gradient(circle at 50% -8%, rgba(var(--ssjx-group-rgb), .22), transparent 58%),
        linear-gradient(135deg, rgba(var(--ssjx-group-rgb), .11), transparent 42% 68%, rgba(var(--ssjx-group-rgb), .055));
}

/* Hover is a true interior surface change, not only an outline. */
.ssjx__card:hover {
    background:
        radial-gradient(circle at 50% -10%, rgba(var(--ssjx-group-rgb), .19), transparent 61%),
        linear-gradient(155deg, rgba(27, 31, 51, .98), rgba(9, 12, 23, .995));
    border-color: rgba(var(--ssjx-group-rgb), .72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .10),
        inset 0 0 24px rgba(var(--ssjx-group-rgb), .045),
        0 0 0 1px rgba(var(--ssjx-group-rgb), .09),
        0 9px 24px rgba(0, 0, 0, .25),
        0 0 23px rgba(var(--ssjx-group-rgb), .14);
}

/* Selected / previewed card: unmistakable filled state. */
.ssjx__card.is-active {
    background:
        radial-gradient(circle at 50% -12%, rgba(var(--ssjx-group-rgb), .30), transparent 60%),
        linear-gradient(145deg, rgba(var(--ssjx-group-rgb), .14), rgba(18, 18, 37, .985) 45%, rgba(8, 10, 20, .995));
    border-color: rgba(var(--ssjx-group-rgb), .96);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .13),
        inset 0 0 30px rgba(var(--ssjx-group-rgb), .095),
        0 0 0 1px rgba(var(--ssjx-group-rgb), .22),
        0 0 26px rgba(var(--ssjx-group-rgb), .24),
        0 10px 26px rgba(0, 0, 0, .26);
}

/* Saved-but-not-current cards get a restrained pink tint so saved != selected. */
.ssjx__card.is-saved:not(.is-active) {
    background:
        radial-gradient(circle at 86% 8%, rgba(var(--ssjx-pink-rgb), .105), transparent 32%),
        linear-gradient(155deg, rgba(21, 22, 40, .97), rgba(7, 9, 18, .995));
    border-color: rgba(var(--ssjx-pink-rgb), .48);
}

.ssjx__card-icon {
    background: rgba(var(--ssjx-group-rgb), .045);
    border-color: rgba(var(--ssjx-group-rgb), .40);
    box-shadow: inset 0 0 12px rgba(var(--ssjx-group-rgb), .04);
}

.ssjx__card:hover .ssjx__card-icon {
    background: rgba(var(--ssjx-group-rgb), .10);
    border-color: rgba(var(--ssjx-group-rgb), .78);
    box-shadow:
        inset 0 0 15px rgba(var(--ssjx-group-rgb), .10),
        0 0 17px rgba(var(--ssjx-group-rgb), .18);
}

.ssjx__card.is-active .ssjx__card-icon {
    background: rgba(var(--ssjx-group-rgb), .16);
    border-color: rgba(var(--ssjx-group-rgb), .96);
    box-shadow:
        inset 0 0 18px rgba(var(--ssjx-group-rgb), .15),
        0 0 19px rgba(var(--ssjx-group-rgb), .24);
}

.ssjx__card-save,
.ssjx__card-save:hover,
.ssjx__card-save:focus,
.ssjx__card-save:active {
    background: rgba(5, 7, 15, .90) !important;
    border-color: rgba(183, 195, 229, .34) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
    opacity: .84;
}

.ssjx__card-save:hover,
.ssjx__card-save:focus-visible {
    color: #f0a0e1 !important;
    background: rgba(var(--ssjx-pink-rgb), .09) !important;
    border-color: rgba(var(--ssjx-pink-rgb), .70) !important;
    box-shadow: 0 0 14px rgba(var(--ssjx-pink-rgb), .16) !important;
}

.ssjx__card-save.is-saved {
    background: rgba(var(--ssjx-pink-rgb), .13) !important;
    border-color: rgba(var(--ssjx-pink-rgb), .82) !important;
    box-shadow:
        inset 0 0 11px rgba(var(--ssjx-pink-rgb), .08),
        0 0 15px rgba(var(--ssjx-pink-rgb), .19) !important;
}

/* Supporting controls and panels retain the same visual hierarchy. */
.ssjx__journey-launch,
.ssjx__journey-launch:hover,
.ssjx__journey-launch:focus,
.ssjx__journey-launch:active {
    border-color: rgba(var(--ssjx-violet-rgb), .58) !important;
}

.ssjx__journey-launch-icon,
.ssjx__value-chip > span,
.ssjx__detail-icon,
.ssjx__journey-empty > span,
.ssjx__journey-item-icon,
.ssjx__journey-value-icon {
    border-color: rgba(var(--ssjx-violet-rgb), .52);
}

.ssjx__preview {
    border-color: rgba(var(--ssjx-preview-rgb), .56);
}

.ssjx__preview-close,
.ssjx__preview-close:hover,
.ssjx__preview-close:focus,
.ssjx__preview-close:active,
.ssjx__journey-section-head button,
.ssjx__journey-section-head button:hover,
.ssjx__journey-section-head button:focus,
.ssjx__journey-section-head button:active,
.ssjx__journey-item > button,
.ssjx__journey-item > button:hover,
.ssjx__journey-item > button:focus,
.ssjx__journey-item > button:active {
    border-color: rgba(184, 195, 228, .32) !important;
}

.ssjx__preview-points li,
.ssjx__value-strip,
.ssjx__journey-saved,
.ssjx__journey-value,
.ssjx__journey-item,
.ssjx__estimate-inputs label,
.ssjx__journey-pdf-preview {
    border-color: rgba(177, 189, 224, .28);
}

/*
 * V1.6 BUTTON STATE SAFETY
 * Do not flatten primary/preview-specific shadows here. Only provide the
 * stronger default border to generic buttons; themed preview actions keep
 * their own colour-aware interaction states above.
 */
.ssjx__button:not(.ssjx__button--primary):not(.ssjx__button--ghost),
.ssjx__button:not(.ssjx__button--primary):not(.ssjx__button--ghost):focus,
.ssjx__button:not(.ssjx__button--primary):not(.ssjx__button--ghost):active {
    border-color: rgba(185, 197, 231, .36) !important;
}

.ssjx__button:not(.ssjx__button--primary):not(.ssjx__button--ghost):hover {
    background: rgba(25, 29, 48, .96) !important;
    border-color: rgba(var(--ssjx-violet-rgb), .66) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 0 16px rgba(var(--ssjx-violet-rgb), .10) !important;
}

.ssjx__detail-canvas {
    --detail-line: rgba(190, 201, 231, .28);
    border-color: rgba(var(--ssjx-violet-rgb), .46);
    box-shadow:
        0 28px 90px var(--detail-shadow),
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 0 0 1px rgba(198, 208, 238, .035),
        0 0 42px rgba(var(--ssjx-violet-rgb), .10);
}

.ssjx__detail-canvas[data-ssjx-reading="light"] {
    --detail-line: rgba(60, 66, 91, .18);
    border-color: rgba(139, 91, 224, .40);
}

.ssjx__detail-tags span {
    border-color: rgba(var(--ssjx-violet-rgb), .38);
}

.ssjx__detail-value-grid div,
.ssjx__detail-side-card {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.ssjx__journey-panel {
    border-color: rgba(var(--ssjx-violet-rgb), .46);
    box-shadow:
        0 30px 100px rgba(0, 0, 0, .56),
        inset 0 1px 0 rgba(255, 255, 255, .055),
        0 0 0 1px rgba(192, 202, 235, .028),
        0 0 42px rgba(var(--ssjx-violet-rgb), .09);
}

.ssjx__journey-head {
    border-bottom-color: rgba(183, 194, 226, .24);
}

.ssjx__journey-empty {
    border-color: rgba(var(--ssjx-violet-rgb), .38);
}

.ssjx__estimate-inputs label > div {
    border-color: rgba(var(--ssjx-violet-rgb), .40);
}

.ssjx__estimate-results > div {
    border-color: rgba(var(--ssjx-violet-rgb), .34);
}

.ssjx__journey-pdf-cover,
.ssjx__socials button,
.ssjx__socials button:hover,
.ssjx__socials button:focus,
.ssjx__socials button:active {
    border-color: rgba(var(--ssjx-violet-rgb), .46) !important;
}

/* Keyboard selection gets the same filled feedback as pointer interaction. */
.ssjx__card:focus-within {
    border-color: rgba(var(--ssjx-group-rgb), .84);
}

@media (hover: none), (pointer: coarse) {
    /* Touch screens still show the persistent selected state, without relying on hover. */
    .ssjx__card.is-active {
        background:
            radial-gradient(circle at 50% -12%, rgba(var(--ssjx-group-rgb), .30), transparent 60%),
            linear-gradient(145deg, rgba(var(--ssjx-group-rgb), .14), rgba(18, 18, 37, .985) 45%, rgba(8, 10, 20, .995));
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1180px) {
    .ssjx__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ssjx__card--last {
        grid-column: 1 / -1;
    }

    .ssjx__card-title {
        font-size: 11px;
    }

    .ssjx__value-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ssjx__value-intro {
        grid-column: 1 / -1;
        border-right: 0;
        border-bottom: 1px solid rgba(164, 174, 207, .12);
    }

    .ssjx__journey-layout {
        grid-template-columns: 1fr;
    }

    .ssjx__journey-list {
        max-height: 300px;
    }
}

@media (max-width: 920px) {
    .ssjx__groups {
        grid-template-columns: 1fr;
    }

    .ssjx__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ssjx__detail-layout {
        grid-template-columns: 1fr;
    }

    .ssjx__detail-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ssjx__journey-footer {
        grid-template-columns: 1fr;
    }

    .ssjx__journey-pdf-preview {
        min-height: 185px;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {
    .ssjx {
        margin: 0 auto;
        padding: 20px 11px 88px;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .ssjx__intro {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 14px;
    }

    .ssjx__intro-actions {
        display: none;
    }

    .ssjx__title {
        font-size: clamp(31px, 9.6vw, 43px) !important;
    }

    .ssjx__lede {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .ssjx__progress-line {
        --ssjx-step-node: 25px;
        --ssjx-step-gap: 6px;
        width: 100%;
        margin-bottom: 19px;
        font-size: 8px;
        letter-spacing: .055em;
    }

    .ssjx__progress-line span {
        gap: var(--ssjx-step-gap);
    }

    .ssjx__progress-line span:not(:last-child)::after {
        left: calc(var(--ssjx-step-node) + var(--ssjx-step-gap) + var(--ssjx-step-label-width) + 7px);
        right: 6px;
        height: 1.5px;
    }

    .ssjx__progress-line i {
        width: var(--ssjx-step-node);
        height: var(--ssjx-step-node);
        min-width: var(--ssjx-step-node);
        min-height: var(--ssjx-step-node);
        font-size: 9px;
    }

    .ssjx__group {
        padding: 12px;
        border-radius: 20px;
    }

    .ssjx__group-head {
        grid-template-columns: 40px minmax(0, 1fr);
        margin-bottom: 11px;
    }

    .ssjx__group-symbol {
        width: 40px;
        height: 40px;
    }

    .ssjx__group-head h3 {
        font-size: 17px !important;
    }

    .ssjx__group-head p {
        font-size: 9px !important;
    }

    .ssjx__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .ssjx__card {
        min-height: 116px;
        border-radius: 15px;
    }

    .ssjx__card--last {
        min-height: 76px;
    }

    .ssjx__card-main {
        grid-template-rows: 40px minmax(0, 1fr);
        gap: 7px;
        padding: 13px 8px 10px;
    }

    .ssjx__card-main .ssjx__card-arrow {
        display: none;
    }

    .ssjx__card--last .ssjx__card-main {
        grid-template-columns: 48px minmax(0, 1fr) 24px;
        grid-template-rows: 1fr;
        min-height: 76px;
        padding: 9px 44px 9px 10px;
    }

    .ssjx__card-icon {
        width: 40px;
        height: 40px;
    }

    .ssjx__card-title {
        max-width: 150px;
        font-size: 10.5px;
        line-height: 1.22;
    }

    .ssjx__card-save {
        top: 6px;
        right: 6px;
    }

    /* Mobile preview becomes a deliberate bottom sheet. */
    .ssjx__preview {
        position: fixed;
        z-index: 1000008;
        left: 7px;
        right: 7px;
        bottom: max(7px, env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        max-height: min(74vh, 620px) !important;
        margin: 0 !important;
        overflow: auto;
        border-radius: 20px;
        opacity: 0;
        transform: translate3d(0, calc(100% + 24px), 0) scale(.985);
        transform-origin: 50% 100%;
        transition:
            opacity 300ms ease,
            transform 520ms cubic-bezier(.16, .78, .20, 1),
            box-shadow 420ms ease;
        will-change: transform, opacity;
    }

    .ssjx__preview.is-open {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .055),
            0 -8px 38px rgba(0, 0, 0, .38),
            0 0 34px rgba(var(--ssjx-preview-rgb), .14);
    }

    .ssjx__preview-icon {
        min-height: 100%;
    }

    .ssjx__preview-icon svg {
        width: 44px;
        height: 44px;
    }

    .ssjx__preview-copy {
        padding: 16px 13px 16px;
    }

    .ssjx__preview h3 {
        font-size: 22px !important;
    }

    .ssjx__preview-summary {
        font-size: 12.5px !important;
    }

    .ssjx__preview-points {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .ssjx__preview-points li {
        min-height: 0;
        font-size: 10px;
    }

    .ssjx__preview-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .ssjx__value-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 0;
    }

    .ssjx__value-chip {
        min-height: 78px;
        border-bottom: 1px solid rgba(164, 174, 207, .08);
    }

    .ssjx__modal {
        align-items: end;
        padding: 0;
    }

    .ssjx__modal-backdrop {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .ssjx__detail-canvas,
    .ssjx__journey-panel {
        width: 100%;
        max-height: 96vh;
        max-height: 96dvh;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 22px 22px 0 0;
        transform: translateY(100%);
    }

    .ssjx__modal.is-open .ssjx__detail-canvas,
    .ssjx__modal.is-open .ssjx__journey-panel {
        transform: translateY(0);
    }

    .ssjx__detail-toolbar {
        padding: 10px 11px;
    }

    .ssjx__detail-back span,
    .ssjx__reading-toggle span {
        display: none;
    }

    .ssjx__detail-back,
    .ssjx__reading-toggle {
        width: 38px;
        padding: 0;
        justify-content: center;
    }

    .ssjx__detail-layout {
        padding: 20px 15px 28px;
        gap: 20px;
    }

    .ssjx__detail-heading {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 12px;
    }

    .ssjx__detail-icon {
        width: 54px;
        height: 54px;
        border-radius: 15px;
    }

    .ssjx__detail-icon svg {
        width: 28px;
        height: 28px;
    }

    .ssjx__detail-heading h3 {
        font-size: clamp(26px, 8vw, 35px) !important;
    }

    .ssjx__detail-summary {
        margin-top: 17px !important;
        font-size: 15px !important;
    }

    .ssjx__detail-side {
        grid-template-columns: 1fr;
    }

    .ssjx__detail-value-grid {
        grid-template-columns: 1fr;
    }

    .ssjx__journey-head {
        padding: 20px 15px 16px;
    }

    .ssjx__journey-head h3 {
        font-size: 30px !important;
    }

    .ssjx__journey-progress {
        padding: 0 15px;
        font-size: 7px;
    }

    .ssjx__journey-layout {
        padding: 18px 12px;
    }

    .ssjx__estimate-inputs,
    .ssjx__estimate-results {
        grid-template-columns: 1fr 1fr;
    }

    .ssjx__journey-footer {
        padding: 0 12px 24px;
    }

    .ssjx__journey-pdf-preview {
        min-height: 175px;
        justify-content: center;
    }

    .ssjx__journey-export-buttons {
        display: grid;
        grid-template-columns: 1fr;
    }

    .ssjx__mobile-bar {
        position: fixed;
        z-index: 1000005;
        left: 50%;
        bottom: max(8px, env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: repeat(2, 92px);
        width: auto;
        padding: 5px;
        gap: 4px;
        background: rgba(7, 9, 17, .92);
        border: 1px solid rgba(167, 178, 213, .18);
        border-radius: 17px;
        box-shadow: 0 10px 35px rgba(0, 0, 0, .48), 0 0 18px rgba(var(--ssjx-violet-rgb), .07);
        backdrop-filter: blur(13px);
        -webkit-backdrop-filter: blur(13px);
        transform: translateX(-50%);
    }

    .ssjx__mobile-bar button,
    .ssjx__mobile-bar button:hover,
    .ssjx__mobile-bar button:focus,
    .ssjx__mobile-bar button:active {
        position: relative;
        display: grid;
        grid-template-columns: 22px auto;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        margin: 0;
        padding: 6px 8px;
        gap: 5px;
        color: #8c94a8 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 12px !important;
        box-shadow: none !important;
        cursor: pointer;
    }

    .ssjx__mobile-bar button.is-active,
    .ssjx__mobile-bar button:last-child {
        color: #cba1ff !important;
        background: rgba(var(--ssjx-violet-rgb), .07) !important;
    }

    .ssjx__mobile-bar span,
    .ssjx__mobile-bar span svg {
        width: 19px;
        height: 19px;
    }

    .ssjx__mobile-bar small {
        font-size: 9px;
        font-weight: 800;
    }

    .ssjx__mobile-bar b {
        position: absolute;
        top: 3px;
        right: 5px;
        display: grid;
        place-items: center;
        min-width: 16px;
        height: 16px;
        padding: 0 3px;
        color: #09060d;
        background: #dc8fff;
        border-radius: 999px;
        font-size: 8px;
    }
}

@media (max-width: 430px) {
    .ssjx__title {
        font-size: clamp(29px, 10.4vw, 38px) !important;
    }

    .ssjx__progress-line span {
        font-size: 7px;
        letter-spacing: .04em;
    }

    .ssjx__card {
        min-height: 109px;
    }

    .ssjx__card-title {
        font-size: 9.7px;
    }

    .ssjx__value-strip {
        grid-template-columns: 1fr;
    }

    .ssjx__value-chip {
        border-right: 0;
    }

    .ssjx__estimate-inputs,
    .ssjx__estimate-results {
        grid-template-columns: 1fr;
    }

    .ssjx__journey-item {
        grid-template-columns: 38px minmax(0, 1fr) 28px;
    }

    .ssjx__journey-item-icon {
        width: 38px;
        height: 38px;
    }

    .ssjx__journey-pdf-cover {
        width: 108px;
    }

    .ssjx__journey-pdf-page {
        width: 118px;
    }
}


/* =========================================================
   V1.8 — GREEN JOURNEY IDENTITY + CONTEXTUAL FLOATING DOCK

   - My Journey now has its own green identity (#6BFA43).
   - supplied Simme WebP artwork replaces the generic group / dock glyphs.
   - the Explore / Journey dock is available on every viewport size but
     appears only while the Journey Explorer section is actually in view.
   ========================================================= */

/* ---------- Supplied category-family artwork ---------- */
.ssjx__group-head {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 13px;
}

.ssjx__group-symbol.ssjx__group-symbol--asset {
    width: 60px;
    height: 60px;
    overflow: visible;
    background:
        radial-gradient(circle at 50% 48%, rgba(var(--ssjx-group-rgb), .13), transparent 68%),
        rgba(7, 10, 20, .58);
    border-color: rgba(var(--ssjx-group-rgb), .58);
    border-radius: 17px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        inset 0 0 18px rgba(var(--ssjx-group-rgb), .065),
        0 0 18px rgba(var(--ssjx-group-rgb), .085);
}

.ssjx__group-symbol.ssjx__group-symbol--asset img {
    display: block;
    width: 56px;
    height: 56px;
    max-width: none;
    object-fit: contain;
    filter:
        drop-shadow(0 0 5px rgba(var(--ssjx-group-rgb), .34))
        drop-shadow(0 0 13px rgba(var(--ssjx-group-rgb), .14));
    transform: translateZ(0);
}

/* ---------- My Journey launch card: green profile ---------- */
.ssjx__journey-launch,
.ssjx__journey-launch:hover,
.ssjx__journey-launch:focus,
.ssjx__journey-launch:active {
    grid-template-columns: 52px auto 38px;
    min-width: 244px;
    padding: 10px 12px 10px 10px;
    gap: 11px;
    background:
        radial-gradient(circle at 10% 50%, rgba(var(--ssjx-green-rgb), .10), transparent 34%),
        linear-gradient(145deg, rgba(14, 26, 22, .96), rgba(5, 10, 12, .98)) !important;
    border-color: rgba(var(--ssjx-green-rgb), .48) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        inset 0 0 0 1px rgba(var(--ssjx-green-rgb), .045),
        0 10px 26px rgba(0, 0, 0, .28),
        0 0 24px rgba(var(--ssjx-green-rgb), .075) !important;
}

.ssjx__journey-launch:hover,
.ssjx__journey-launch:focus-visible {
    border-color: rgba(var(--ssjx-green-rgb), .88) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .09),
        inset 0 0 20px rgba(var(--ssjx-green-rgb), .045),
        0 12px 30px rgba(0, 0, 0, .30),
        0 0 30px rgba(var(--ssjx-green-rgb), .16) !important;
}

.ssjx__journey-launch-icon.ssjx__journey-launch-icon--asset {
    width: 52px;
    height: 52px;
    overflow: visible;
    color: var(--ssjx-green);
    background: rgba(var(--ssjx-green-rgb), .055);
    border-color: rgba(var(--ssjx-green-rgb), .52);
    border-radius: 14px;
    box-shadow:
        inset 0 0 15px rgba(var(--ssjx-green-rgb), .055),
        0 0 14px rgba(var(--ssjx-green-rgb), .06);
}

.ssjx__journey-launch-icon.ssjx__journey-launch-icon--asset img {
    display: block;
    width: 46px;
    height: 46px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(var(--ssjx-green-rgb), .28));
}

.ssjx__journey-launch-copy small {
    color: #8baa88;
}

.ssjx__journey-launch-copy strong {
    color: #f4fff0;
}

.ssjx__journey-count {
    width: 36px;
    height: 36px;
    color: #041006;
    background: linear-gradient(145deg, #d7ffc7 0%, var(--ssjx-green) 72%, #54d833 100%);
    border: 1px solid rgba(222, 255, 209, .74);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .52),
        0 0 18px rgba(var(--ssjx-green-rgb), .30);
}

/* ---------- Journey modal: one coherent green visual family ---------- */
.ssjx__journey-panel {
    background:
        radial-gradient(circle at 8% 4%, rgba(var(--ssjx-green-rgb), .105), transparent 25%),
        radial-gradient(circle at 92% 2%, rgba(99, 214, 255, .055), transparent 22%),
        #080c12;
    border-color: rgba(var(--ssjx-green-rgb), .46);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 30px 100px rgba(0, 0, 0, .56),
        0 0 42px rgba(var(--ssjx-green-rgb), .075);
}

.ssjx__journey-head {
    border-bottom-color: rgba(var(--ssjx-green-rgb), .16);
}

.ssjx__journey-head .ssjx__eyebrow,
.ssjx__journey-section-head span,
.ssjx__journey-value-head span,
.ssjx__journey-export-label {
    color: #a8df99;
}

.ssjx__journey-head .ssjx__eyebrow::before {
    background: linear-gradient(90deg, #4bd52c, var(--ssjx-green), #c9ffb8);
    box-shadow: 0 0 9px rgba(var(--ssjx-green-rgb), .52);
}

.ssjx__journey-head .ssjx__icon-button,
.ssjx__journey-head .ssjx__icon-button:hover,
.ssjx__journey-head .ssjx__icon-button:focus,
.ssjx__journey-head .ssjx__icon-button:active {
    color: #bfffb0 !important;
    border-color: rgba(var(--ssjx-green-rgb), .34) !important;
}

.ssjx__journey-progress .is-done,
.ssjx__journey-progress .is-active {
    color: #b8e9aa;
}

.ssjx__journey-progress .is-done i,
.ssjx__journey-progress .is-active i {
    border-color: rgba(var(--ssjx-green-rgb), .82);
    box-shadow: 0 0 9px rgba(var(--ssjx-green-rgb), .26);
}

.ssjx__journey-progress .is-done i {
    background: var(--ssjx-green);
}

/* Carry the same whole-system Journey language into the saved Journey modal. */
.ssjx__journey-progress span:not(:last-child)::after {
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(var(--ssjx-green-rgb), .28) 0%,
        #59de38 16%,
        #6bfa43 50%,
        #80ff60 82%,
        rgba(var(--ssjx-green-rgb), .56) 100%
    );
    border-radius: 999px;
    box-shadow:
        0 0 7px rgba(var(--ssjx-green-rgb), .22),
        0 0 12px rgba(var(--ssjx-green-rgb), .08);
}

.ssjx__journey-progress i {
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    box-shadow:
        0 0 5px rgba(var(--ssjx-green-rgb), .12),
        0 0 10px rgba(var(--ssjx-green-rgb), .06);
}

.ssjx__journey-saved,
.ssjx__journey-value,
.ssjx__journey-pdf-preview {
    border-color: rgba(var(--ssjx-green-rgb), .22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .055),
        inset 0 0 0 1px rgba(var(--ssjx-green-rgb), .026),
        0 14px 34px rgba(0, 0, 0, .22);
}

.ssjx__journey-empty {
    border-color: rgba(var(--ssjx-green-rgb), .34);
}

.ssjx__journey-empty > span.ssjx__journey-empty-art {
    width: 76px;
    height: 76px;
    overflow: visible;
    color: var(--ssjx-green);
    background: rgba(var(--ssjx-green-rgb), .045);
    border-color: rgba(var(--ssjx-green-rgb), .42);
    border-radius: 20px;
    box-shadow: 0 0 24px rgba(var(--ssjx-green-rgb), .09);
}

.ssjx__journey-empty > span.ssjx__journey-empty-art img {
    display: block;
    width: 70px;
    height: 70px;
    object-fit: contain;
    filter: drop-shadow(0 0 7px rgba(var(--ssjx-green-rgb), .28));
}

.ssjx__journey-item {
    border-color: rgba(var(--ssjx-green-rgb), .16);
}

.ssjx__journey-item-icon,
.ssjx__journey-value-icon {
    color: #93ff74;
    background: rgba(var(--ssjx-green-rgb), .035);
    border-color: rgba(var(--ssjx-green-rgb), .34);
    box-shadow: inset 0 0 13px rgba(var(--ssjx-green-rgb), .035);
}

.ssjx__journey-item-copy small {
    color: #789373;
}

.ssjx__estimate-inputs label > div {
    border-color: rgba(var(--ssjx-green-rgb), .28);
}

.ssjx__estimate-inputs label:focus-within > div {
    border-color: rgba(var(--ssjx-green-rgb), .72);
    box-shadow: 0 0 0 2px rgba(var(--ssjx-green-rgb), .055), 0 0 16px rgba(var(--ssjx-green-rgb), .08);
}

.ssjx__estimate-results > div {
    background:
        linear-gradient(145deg, rgba(var(--ssjx-green-rgb), .070), rgba(6, 11, 12, .78));
    border-color: rgba(var(--ssjx-green-rgb), .24);
}

.ssjx__estimate-results strong {
    color: #a7ff8d;
}

.ssjx__estimate-note {
    border-left-color: rgba(var(--ssjx-green-rgb), .62);
}

.ssjx__journey-panel .ssjx__button--primary,
.ssjx__journey-panel .ssjx__button--primary:hover,
.ssjx__journey-panel .ssjx__button--primary:focus,
.ssjx__journey-panel .ssjx__button--primary:active {
    color: #061008 !important;
    background:
        linear-gradient(110deg, #d6ffc7 0%, #8dff6d 35%, var(--ssjx-green) 68%, #4fd832 100%) !important;
    border-color: rgba(222, 255, 210, .86) !important;
    text-shadow: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .50),
        0 0 0 1px rgba(31, 105, 18, .38),
        0 7px 20px rgba(0, 0, 0, .23),
        0 0 20px rgba(var(--ssjx-green-rgb), .18) !important;
}

.ssjx__journey-panel .ssjx__button--primary:hover,
.ssjx__journey-panel .ssjx__button--primary:focus-visible {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .58),
        inset 0 0 18px rgba(255, 255, 255, .10),
        0 0 0 1px rgba(99, 232, 66, .50),
        0 8px 22px rgba(0, 0, 0, .24),
        0 0 28px rgba(var(--ssjx-green-rgb), .28) !important;
}

.ssjx__journey-panel .ssjx__button--ghost,
.ssjx__journey-panel .ssjx__button--ghost:hover,
.ssjx__journey-panel .ssjx__button--ghost:focus,
.ssjx__journey-panel .ssjx__button--ghost:active {
    color: #d4ffca !important;
    border-color: rgba(var(--ssjx-green-rgb), .46) !important;
    background: rgba(var(--ssjx-green-rgb), .035) !important;
}

.ssjx__journey-panel .ssjx__button--ghost:hover,
.ssjx__journey-panel .ssjx__button--ghost:focus-visible {
    border-color: rgba(var(--ssjx-green-rgb), .82) !important;
    background: rgba(var(--ssjx-green-rgb), .075) !important;
    box-shadow: 0 0 18px rgba(var(--ssjx-green-rgb), .10) !important;
}

.ssjx__journey-pdf-cover {
    background:
        radial-gradient(circle at 80% 18%, rgba(83, 228, 55, .14), transparent 26%),
        radial-gradient(circle at 12% 82%, rgba(70, 205, 255, .065), transparent 24%),
        #050b0a;
    border-color: rgba(var(--ssjx-green-rgb), .42);
}

.ssjx__journey-pdf-cover::before {
    border-color: rgba(var(--ssjx-green-rgb), .82);
    filter: drop-shadow(0 0 7px rgba(var(--ssjx-green-rgb), .34));
}

.ssjx__journey-pdf-cover::after {
    border-color: rgba(112, 229, 80, .42);
    filter: drop-shadow(0 0 6px rgba(var(--ssjx-green-rgb), .18));
}

.ssjx__journey-pdf-cover > span {
    color: #a7e998;
}

.ssjx__journey-pdf-page strong {
    color: #4a9d35;
}

.ssjx__journey-pdf-page b {
    background: #e8f6e4;
}

.ssjx__socials button,
.ssjx__socials button:hover,
.ssjx__socials button:focus,
.ssjx__socials button:active {
    color: #bdfcaf !important;
    border-color: rgba(var(--ssjx-green-rgb), .32) !important;
    box-shadow: 0 0 10px rgba(var(--ssjx-green-rgb), .045) !important;
}

.ssjx__socials button:hover,
.ssjx__socials button:focus-visible {
    border-color: rgba(var(--ssjx-green-rgb), .74) !important;
    box-shadow: 0 0 17px rgba(var(--ssjx-green-rgb), .12) !important;
}

.ssjx__share-status {
    color: #92c887;
}

/* ---------- Contextual Explore / Journey floating dock ---------- */
.ssjx__mobile-bar {
    position: fixed;
    z-index: 1000005;
    left: 50%;
    bottom: max(12px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(2, minmax(132px, auto));
    width: auto;
    max-width: calc(100vw - 22px);
    padding: 6px;
    gap: 5px;
    color: #d8ffd0;
    background:
        radial-gradient(circle at 50% 120%, rgba(var(--ssjx-green-rgb), .11), transparent 56%),
        rgba(5, 11, 13, .93);
    border: 1px solid rgba(var(--ssjx-green-rgb), .40);
    border-radius: 20px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .075),
        inset 0 0 0 1px rgba(var(--ssjx-green-rgb), .035),
        0 14px 42px rgba(0, 0, 0, .52),
        0 0 26px rgba(var(--ssjx-green-rgb), .105);
    backdrop-filter: blur(15px) saturate(1.1);
    -webkit-backdrop-filter: blur(15px) saturate(1.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(-50%, 20px, 0) scale(.96);
    transform-origin: 50% 100%;
    transition:
        opacity 260ms ease,
        visibility 0s linear 300ms,
        transform 360ms var(--ssjx-ease),
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.ssjx__mobile-bar.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(-50%, 0, 0) scale(1);
    transition-delay: 0s;
}

body.ssjx-has-modal .ssjx__mobile-bar {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(-50%, 16px, 0) scale(.97) !important;
}

.ssjx__mobile-bar button,
.ssjx__mobile-bar button:hover,
.ssjx__mobile-bar button:focus,
.ssjx__mobile-bar button:active {
    position: relative;
    display: grid;
    grid-template-columns: 38px auto;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    min-height: 52px;
    margin: 0;
    padding: 6px 14px 6px 10px;
    gap: 7px;
    color: #b7f6a8 !important;
    background: rgba(var(--ssjx-green-rgb), .026) !important;
    border: 1px solid transparent !important;
    border-radius: 15px !important;
    box-shadow: none !important;
    cursor: pointer;
    transform: none !important;
    -webkit-appearance: none;
    appearance: none;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.ssjx__mobile-bar button.is-active,
.ssjx__mobile-bar button:hover,
.ssjx__mobile-bar button:focus-visible {
    color: #e0ffd8 !important;
    background:
        linear-gradient(145deg, rgba(var(--ssjx-green-rgb), .115), rgba(var(--ssjx-green-rgb), .045)) !important;
    border-color: rgba(var(--ssjx-green-rgb), .26) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 0 16px rgba(var(--ssjx-green-rgb), .07) !important;
}

.ssjx__mobile-bar-art {
    display: grid !important;
    place-items: center;
    width: 38px !important;
    height: 38px !important;
}

.ssjx__mobile-bar-art img {
    display: block;
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(var(--ssjx-green-rgb), .26));
}

.ssjx__mobile-bar small {
    color: currentColor;
    font-size: 11px;
    font-weight: 820;
    letter-spacing: .01em;
}

.ssjx__mobile-bar b {
    position: absolute;
    top: 4px;
    right: 5px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    color: #041006;
    background: linear-gradient(145deg, #d8ffc9, var(--ssjx-green));
    border: 1px solid rgba(232, 255, 224, .76);
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(var(--ssjx-green-rgb), .22);
    font-size: 8px;
    font-weight: 900;
}

@media (max-width: 720px) {
    .ssjx__group-head {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 11px;
    }

    .ssjx__group-symbol.ssjx__group-symbol--asset {
        width: 52px;
        height: 52px;
        border-radius: 15px;
    }

    .ssjx__group-symbol.ssjx__group-symbol--asset img {
        width: 49px;
        height: 49px;
    }

    .ssjx__mobile-bar {
        bottom: max(8px, env(safe-area-inset-bottom));
        grid-template-columns: repeat(2, minmax(104px, auto));
        max-width: calc(100vw - 14px);
        padding: 5px;
        border-radius: 18px;
    }

    .ssjx__mobile-bar button,
    .ssjx__mobile-bar button:hover,
    .ssjx__mobile-bar button:focus,
    .ssjx__mobile-bar button:active {
        grid-template-columns: 30px auto;
        min-width: 104px;
        min-height: 46px;
        padding: 5px 10px 5px 7px;
        gap: 5px;
        border-radius: 13px !important;
    }

    .ssjx__mobile-bar-art {
        width: 30px !important;
        height: 30px !important;
    }

    .ssjx__mobile-bar-art img {
        width: 29px;
        height: 29px;
    }

    .ssjx__mobile-bar small {
        font-size: 9.5px;
    }

    .ssjx__mobile-bar b {
        top: 3px;
        right: 4px;
        min-width: 16px;
        height: 16px;
        font-size: 7.5px;
    }
}

@media (max-width: 380px) {
    .ssjx__mobile-bar {
        grid-template-columns: repeat(2, minmax(94px, auto));
    }

    .ssjx__mobile-bar button,
    .ssjx__mobile-bar button:hover,
    .ssjx__mobile-bar button:focus,
    .ssjx__mobile-bar button:active {
        min-width: 94px;
        padding-right: 7px;
    }
}



/* =========================================================
   V1.9 — TOP-LAYER FLOATING DOCK + SPACING / COUNT ALIGNMENT

   The contextual Explore / Journey dock is portalled to <body> by the
   shortcode JavaScript while it is active. This lets it escape the
   Journey Explorer's isolated stacking context and overflow clipping, so
   later homepage sections cannot paint over it during scroll.
   ========================================================= */

.ssjx__mobile-bar {
    /* Re-declare component tokens because V1.9 moves this element to body. */
    --ssjx-green: #6bfa43;
    --ssjx-green-rgb: 107, 250, 67;
    --ssjx-ease: cubic-bezier(.16, .78, .20, 1);

    z-index: 2147483000 !important;
    grid-template-columns: repeat(2, minmax(150px, auto));
    max-width: calc(100vw - 28px);
    padding: 9px;
    gap: 8px;
    border-width: 1px;
    border-radius: 24px;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    isolation: isolate;
}

.ssjx__mobile-bar,
.ssjx__mobile-bar *,
.ssjx__mobile-bar *::before,
.ssjx__mobile-bar *::after {
    box-sizing: border-box;
}

.ssjx__mobile-bar button,
.ssjx__mobile-bar button:hover,
.ssjx__mobile-bar button:focus,
.ssjx__mobile-bar button:active {
    grid-template-columns: 42px auto;
    min-width: 150px;
    min-height: 62px;
    padding: 9px 19px 9px 12px;
    gap: 10px;
    border-radius: 18px !important;
    line-height: 1;
}

.ssjx__mobile-bar-art {
    width: 42px !important;
    height: 42px !important;
}

.ssjx__mobile-bar-art img {
    width: 40px;
    height: 40px;
}

.ssjx__mobile-bar small {
    font-size: 11.5px;
    line-height: 1.1;
}

/* Fixed-size badge: the numeral is geometrically centred in the circle. */
.ssjx__mobile-bar b,
.ssjx__mobile-bar button b {
    top: 7px;
    right: 7px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-indent: 0 !important;
    transform: none !important;
}

@media (max-width: 720px) {
    .ssjx__mobile-bar {
        bottom: max(9px, env(safe-area-inset-bottom));
        grid-template-columns: repeat(2, minmax(112px, auto));
        max-width: calc(100vw - 16px);
        padding: 7px;
        gap: 7px;
        border-radius: 21px;
    }

    .ssjx__mobile-bar button,
    .ssjx__mobile-bar button:hover,
    .ssjx__mobile-bar button:focus,
    .ssjx__mobile-bar button:active {
        grid-template-columns: 34px auto;
        min-width: 112px;
        min-height: 52px;
        padding: 7px 13px 7px 9px;
        gap: 7px;
        border-radius: 15px !important;
    }

    .ssjx__mobile-bar-art {
        width: 34px !important;
        height: 34px !important;
    }

    .ssjx__mobile-bar-art img {
        width: 33px;
        height: 33px;
    }

    .ssjx__mobile-bar small {
        font-size: 10px;
    }

    .ssjx__mobile-bar b,
    .ssjx__mobile-bar button b {
        top: 5px;
        right: 5px;
        width: 21px !important;
        min-width: 21px !important;
        max-width: 21px !important;
        height: 21px !important;
        min-height: 21px !important;
        font-size: 9px !important;
    }
}

@media (max-width: 380px) {
    .ssjx__mobile-bar {
        grid-template-columns: repeat(2, minmax(102px, auto));
        padding: 6px;
        gap: 6px;
    }

    .ssjx__mobile-bar button,
    .ssjx__mobile-bar button:hover,
    .ssjx__mobile-bar button:focus,
    .ssjx__mobile-bar button:active {
        min-width: 102px;
        padding-right: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ssjx__mobile-bar,
    .ssjx__mobile-bar * {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (hover: none), (pointer: coarse) {
    .ssjx__card:hover,
    .ssjx__button:hover,
    .ssjx__journey-launch:hover {
        transform: none;
    }

    .ssjx__card-arrow {
        opacity: .42;
        transform: none;
    }

    .ssjx__card.is-active .ssjx__card-arrow,
    .ssjx__card:focus-within .ssjx__card-arrow {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ssjx *,
    .ssjx *::before,
    .ssjx *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================
   V2.0 — UNFRAMED HERO ASSETS / STRONGER VISUAL EMPHASIS

   The supplied SymSoul artwork is intentionally allowed to breathe.
   Decorative icon wells are removed from the large family markers and
   My Journey artwork so the illustrations sit directly in their parent
   surfaces. The artwork is also enlarged and given a restrained ambient
   glow so these markers read as important anchors, not small UI glyphs.
   ========================================================= */

/* ---------- Creative / Where SymSoul Helps family artwork ---------- */
.ssjx__group-head {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 17px;
    margin-bottom: 16px;
}

.ssjx__group-symbol.ssjx__group-symbol--asset {
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    margin: -5px 0 -5px -3px;
    padding: 0;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.ssjx__group-symbol.ssjx__group-symbol--asset img {
    display: block;
    width: 82px;
    height: 82px;
    max-width: none;
    object-fit: contain;
    filter:
        drop-shadow(0 0 7px rgba(var(--ssjx-group-rgb), .44))
        drop-shadow(0 0 19px rgba(var(--ssjx-group-rgb), .18));
    transform: translateZ(0) scale(1.025);
    transform-origin: 50% 50%;
}

/* ---------- My Journey launcher artwork ---------- */
.ssjx__journey-launch,
.ssjx__journey-launch:hover,
.ssjx__journey-launch:focus,
.ssjx__journey-launch:active {
    grid-template-columns: 74px auto 38px;
    min-width: 270px;
    min-height: 92px;
    padding: 10px 14px 10px 12px;
    gap: 13px;
}

.ssjx__journey-launch-icon.ssjx__journey-launch-icon--asset {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    margin: -2px 0 -2px -2px;
    padding: 0;
    overflow: visible;
    color: var(--ssjx-green);
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.ssjx__journey-launch-icon.ssjx__journey-launch-icon--asset img {
    display: block;
    width: 70px;
    height: 70px;
    max-width: none;
    object-fit: contain;
    filter:
        drop-shadow(0 0 8px rgba(var(--ssjx-green-rgb), .42))
        drop-shadow(0 0 20px rgba(var(--ssjx-green-rgb), .17));
    transform: translateZ(0) scale(1.025);
}

/* ---------- Floating Explore / Journey dock artwork ---------- */
.ssjx__mobile-bar button,
.ssjx__mobile-bar button:hover,
.ssjx__mobile-bar button:focus,
.ssjx__mobile-bar button:active {
    grid-template-columns: 56px auto;
    min-width: 166px;
    min-height: 72px;
    padding: 8px 20px 8px 11px;
    gap: 11px;
}

.ssjx__mobile-bar-art,
.ssjx__mobile-bar button .ssjx__mobile-bar-art {
    display: grid !important;
    place-items: center !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.ssjx__mobile-bar-art img,
.ssjx__mobile-bar button .ssjx__mobile-bar-art img {
    display: block;
    width: 54px !important;
    height: 54px !important;
    max-width: none !important;
    object-fit: contain;
    filter:
        drop-shadow(0 0 7px rgba(var(--ssjx-green-rgb), .40))
        drop-shadow(0 0 17px rgba(var(--ssjx-green-rgb), .14));
    transform: translateZ(0) scale(1.02);
}

.ssjx__mobile-bar small {
    font-size: 12px;
    font-weight: 850;
}

/* ---------- Tablet / phone scaling: still prominent, never cramped ---------- */
@media (max-width: 720px) {
    .ssjx__group-head {
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 13px;
    }

    .ssjx__group-symbol.ssjx__group-symbol--asset {
        width: 68px;
        height: 68px;
        margin: -3px 0 -3px -2px;
    }

    .ssjx__group-symbol.ssjx__group-symbol--asset img {
        width: 66px;
        height: 66px;
    }

    .ssjx__journey-launch,
    .ssjx__journey-launch:hover,
    .ssjx__journey-launch:focus,
    .ssjx__journey-launch:active {
        grid-template-columns: 62px auto 34px;
        min-width: 0;
        min-height: 80px;
        padding: 9px 11px 9px 9px;
        gap: 10px;
    }

    .ssjx__journey-launch-icon.ssjx__journey-launch-icon--asset {
        width: 62px;
        height: 62px;
        margin-left: -1px;
    }

    .ssjx__journey-launch-icon.ssjx__journey-launch-icon--asset img {
        width: 59px;
        height: 59px;
    }

    .ssjx__mobile-bar button,
    .ssjx__mobile-bar button:hover,
    .ssjx__mobile-bar button:focus,
    .ssjx__mobile-bar button:active {
        grid-template-columns: 42px auto;
        min-width: 122px;
        min-height: 58px;
        padding: 6px 13px 6px 8px;
        gap: 7px;
    }

    .ssjx__mobile-bar-art,
    .ssjx__mobile-bar button .ssjx__mobile-bar-art {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }

    .ssjx__mobile-bar-art img,
    .ssjx__mobile-bar button .ssjx__mobile-bar-art img {
        width: 41px !important;
        height: 41px !important;
    }

    .ssjx__mobile-bar small {
        font-size: 10.5px;
    }
}

@media (max-width: 380px) {
    .ssjx__group-head {
        grid-template-columns: 62px minmax(0, 1fr);
        gap: 11px;
    }

    .ssjx__group-symbol.ssjx__group-symbol--asset,
    .ssjx__group-symbol.ssjx__group-symbol--asset img {
        width: 60px;
        height: 60px;
    }

    .ssjx__mobile-bar button,
    .ssjx__mobile-bar button:hover,
    .ssjx__mobile-bar button:focus,
    .ssjx__mobile-bar button:active {
        min-width: 108px;
        grid-template-columns: 38px auto;
        padding-right: 9px;
    }

    .ssjx__mobile-bar-art,
    .ssjx__mobile-bar button .ssjx__mobile-bar-art {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    .ssjx__mobile-bar-art img,
    .ssjx__mobile-bar button .ssjx__mobile-bar-art img {
        width: 37px !important;
        height: 37px !important;
    }
}


/* =========================================================
   V2.2 — WHERE SYMSOUL HELPS: SUPPLIED CATEGORY ARTWORK

   The 13 business/professional categories now use the supplied
   WebP assets instead of the previous generic line SVGs. The
   artwork is deliberately allowed to breathe: no extra icon-well
   border, larger visual footprint, and the same asset follows the
   category into Preview, Detail and My Journey.
   ========================================================= */

.ssjx__group--blue .ssjx__card-icon--asset,
.ssjx__group--blue .ssjx__card:hover .ssjx__card-icon--asset,
.ssjx__group--blue .ssjx__card.is-active .ssjx__card-icon--asset {
    width: 48px;
    height: 48px;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.ssjx__group--blue .ssjx__card-icon--asset img {
    display: block;
    width: 48px;
    height: 48px;
    max-width: none;
    object-fit: contain;
    object-position: center;
    filter:
        drop-shadow(0 0 5px rgba(90, 177, 255, .36))
        drop-shadow(0 0 12px rgba(68, 137, 255, .14));
    transform: translateZ(0) scale(1);
    transform-origin: 50% 50%;
    transition:
        transform 220ms cubic-bezier(.16, .78, .22, 1),
        filter 220ms ease;
}

.ssjx__group--blue .ssjx__card:hover .ssjx__card-icon--asset img,
.ssjx__group--blue .ssjx__card:focus-within .ssjx__card-icon--asset img {
    filter:
        drop-shadow(0 0 7px rgba(110, 194, 255, .62))
        drop-shadow(0 0 18px rgba(69, 143, 255, .24));
    transform: translateZ(0) scale(1.085);
}

.ssjx__group--blue .ssjx__card.is-active .ssjx__card-icon--asset img {
    filter:
        drop-shadow(0 0 8px rgba(130, 208, 255, .78))
        drop-shadow(0 0 22px rgba(65, 139, 255, .34));
    transform: translateZ(0) scale(1.11);
}

/* Large preview destination: use the supplied artwork as the hero mark. */
.ssjx__preview-icon.is-asset-icon {
    overflow: visible;
    background:
        radial-gradient(circle at center, rgba(72, 164, 255, .18), transparent 48%);
}

.ssjx__preview-icon.is-asset-icon img {
    display: block;
    width: clamp(92px, 8vw, 124px);
    height: clamp(92px, 8vw, 124px);
    max-width: 78%;
    object-fit: contain;
    filter:
        drop-shadow(0 0 9px rgba(105, 192, 255, .54))
        drop-shadow(0 0 28px rgba(62, 137, 255, .22));
}

/* Focused detail canvas: unframed asset, larger than the old SVG glyph. */
.ssjx__detail-icon.is-asset-icon {
    width: 74px;
    height: 74px;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.ssjx__detail-icon.is-asset-icon img {
    display: block;
    width: 72px;
    height: 72px;
    max-width: none;
    object-fit: contain;
    filter:
        drop-shadow(0 0 7px rgba(104, 190, 255, .44))
        drop-shadow(0 0 18px rgba(56, 129, 255, .18));
}

/* Saved Journey rows keep the real category artwork recognisable. */
.ssjx__journey-item-icon.is-asset-icon {
    width: 46px;
    height: 46px;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.ssjx__journey-item-icon.is-asset-icon img {
    display: block;
    width: 44px;
    height: 44px;
    max-width: none;
    object-fit: contain;
    filter: drop-shadow(0 0 7px rgba(95, 183, 255, .34));
}

@media (max-width: 720px) {
    .ssjx__group--blue .ssjx__card-icon--asset,
    .ssjx__group--blue .ssjx__card:hover .ssjx__card-icon--asset,
    .ssjx__group--blue .ssjx__card.is-active .ssjx__card-icon--asset {
        width: 45px;
        height: 45px;
    }

    .ssjx__group--blue .ssjx__card-icon--asset img {
        width: 45px;
        height: 45px;
    }

    .ssjx__preview-icon.is-asset-icon img {
        width: 94px;
        height: 94px;
        max-width: none;
    }

    .ssjx__detail-icon.is-asset-icon,
    .ssjx__detail-icon.is-asset-icon img {
        width: 62px;
        height: 62px;
    }

    .ssjx__journey-item-icon.is-asset-icon,
    .ssjx__journey-item-icon.is-asset-icon img {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 380px) {
    .ssjx__group--blue .ssjx__card-icon--asset,
    .ssjx__group--blue .ssjx__card-icon--asset img {
        width: 42px;
        height: 42px;
    }
}




/* =========================================================
   V2.5 — INTERACTION STABILITY / DYNAMIC ASSET / MODAL LAYER FIX

   1. Buttons keep exactly the same geometry in every state. Pressing moves
      the complete control down 2px instead of shrinking it.
   2. Dynamic business artwork is given explicit image geometry in Preview,
      Detail and Journey surfaces.
   3. Detail / Journey overlays are lifted above the site's fixed header.
   ========================================================= */

/* ---------- Buttons: no size or typography changes between states ---------- */
.ssjx__button,
.ssjx__button:hover,
.ssjx__button:focus,
.ssjx__button:focus-visible,
.ssjx__button:active {
    box-sizing: border-box !important;
    min-height: 56px !important;
    max-height: 56px !important;
    height: 56px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 1px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    scale: 1 !important;
    transform-origin: 50% 50% !important;
}

/* Hover only changes illumination; it never changes the footprint. */
.ssjx__button:hover,
.ssjx__button:focus-visible {
    transform: translate3d(0, 0, 0) !important;
    scale: 1 !important;
}

/* Press feedback is movement, not scaling. */
.ssjx__button:active {
    transform: translate3d(0, 2px, 0) !important;
    scale: 1 !important;
}

/* Keep the two Preview controls dimensionally fixed on inline/desktop views. */
@media (min-width: 721px) {
    .ssjx__preview-actions .ssjx__button--primary,
    .ssjx__preview-actions .ssjx__button--primary:hover,
    .ssjx__preview-actions .ssjx__button--primary:focus,
    .ssjx__preview-actions .ssjx__button--primary:active {
        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;
    }

    .ssjx__preview-actions .ssjx__button--ghost,
    .ssjx__preview-actions .ssjx__button--ghost:hover,
    .ssjx__preview-actions .ssjx__button--ghost:focus,
    .ssjx__preview-actions .ssjx__button--ghost:active {
        width: 212px !important;
        min-width: 212px !important;
        max-width: 212px !important;
    }
}

/* Saved / pressed states keep the same outer glow so they do not appear to shrink. */
.ssjx__preview .ssjx__button--primary:active {
    box-shadow:
        inset 0 3px 9px rgba(1, 4, 12, .28),
        inset 0 1px 0 rgba(255, 255, 255, .13),
        0 7px 18px rgba(0, 0, 0, .14),
        0 0 20px rgba(var(--ssjx-preview-rgb), .28) !important;
}

.ssjx__preview .ssjx__button--ghost:active {
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, .30),
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 7px 18px rgba(0, 0, 0, .12),
        0 0 18px rgba(var(--ssjx-preview-rgb), .16) !important;
}

.ssjx__detail-side .ssjx__button--wide,
.ssjx__detail-side .ssjx__button--wide:hover,
.ssjx__detail-side .ssjx__button--wide:focus,
.ssjx__detail-side .ssjx__button--wide:active {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 720px) {
    .ssjx__button,
    .ssjx__button:hover,
    .ssjx__button:focus,
    .ssjx__button:active {
        min-height: 52px !important;
        max-height: 52px !important;
        height: 52px !important;
        font-size: 14px !important;
    }

    .ssjx__preview-actions .ssjx__button {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
}

/* ---------- Dynamic supplied artwork: always visible outside the grid ---------- */
.ssjx__preview-icon.is-asset-icon,
.ssjx__detail-icon.is-asset-icon,
.ssjx__journey-item-icon.is-asset-icon {
    contain: none !important;
}

.ssjx__preview-icon.is-asset-icon img,
.ssjx__detail-icon.is-asset-icon img,
.ssjx__journey-item-icon.is-asset-icon img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: none !important;
    max-height: none !important;
}

.ssjx__preview-icon.is-asset-icon img {
    width: clamp(96px, 8vw, 128px) !important;
    height: clamp(96px, 8vw, 128px) !important;
}

.ssjx__detail-icon.is-asset-icon,
.ssjx__detail-icon.is-asset-icon img {
    width: 76px !important;
    height: 76px !important;
}

.ssjx__journey-item-icon.is-asset-icon,
.ssjx__journey-item-icon.is-asset-icon img {
    width: 46px !important;
    height: 46px !important;
}

/* ---------- Full detail / Journey must sit above the fixed Simme header ---------- */
body.ssjx-has-modal .ssjx {
    isolation: auto !important;
    overflow: visible !important;
    z-index: 2147482900 !important;
}

body.ssjx-has-modal .ssjx__modal {
    z-index: 2147483000 !important;
}

body.ssjx-has-modal .ssjx__detail-canvas,
body.ssjx-has-modal .ssjx__journey-panel {
    position: relative;
    z-index: 2;
}

/* Keep the toolbar visible at the very top of the focused surface. */
.ssjx__detail-toolbar {
    top: 0 !important;
    z-index: 50 !important;
}

@media (max-width: 720px) {
    .ssjx__detail-icon.is-asset-icon,
    .ssjx__detail-icon.is-asset-icon img {
        width: 64px !important;
        height: 64px !important;
    }

    .ssjx__journey-item-icon.is-asset-icon,
    .ssjx__journey-item-icon.is-asset-icon img {
        width: 42px !important;
        height: 42px !important;
    }
}



/* =========================================================
   V2.6 — CLEAN CATEGORY ASSETS / THEMED DETAIL SURFACE / MOBILE FIT

   - Removes the redundant top My Journey launcher (markup removed in PHP).
   - Removes decorative wells from ALL supplied category artwork, including Creative.
   - Carries violet vs blue category identity into the full Detail canvas.
   - Keeps the mobile Preview artwork inside its own column and above the sticky dock.
   - Restores a continuous visible border around mobile Preview / Detail surfaces.
   ========================================================= */

/* ---------- Intro now has no secondary Journey launcher ---------- */
.ssjx__intro {
    grid-template-columns: minmax(0, 1fr) !important;
}

.ssjx__intro-copy {
    max-width: 930px;
}

/* ---------- ALL supplied category artwork is unframed ---------- */
.ssjx__card-icon--asset,
.ssjx__card:hover .ssjx__card-icon--asset,
.ssjx__card:focus-within .ssjx__card-icon--asset,
.ssjx__card.is-active .ssjx__card-icon--asset {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    transform: none !important;
}

.ssjx__card-icon--asset img {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center !important;
    filter:
        drop-shadow(0 0 5px rgba(var(--ssjx-group-rgb), .38))
        drop-shadow(0 0 13px rgba(var(--ssjx-group-rgb), .15)) !important;
    transform: translateZ(0) scale(1) !important;
    transform-origin: 50% 50% !important;
    transition: transform 220ms var(--ssjx-ease), filter 220ms ease !important;
}

.ssjx__card:hover .ssjx__card-icon--asset img,
.ssjx__card:focus-within .ssjx__card-icon--asset img {
    filter:
        drop-shadow(0 0 7px rgba(var(--ssjx-group-rgb), .66))
        drop-shadow(0 0 19px rgba(var(--ssjx-group-rgb), .25)) !important;
    transform: translateZ(0) scale(1.075) !important;
}

.ssjx__card.is-active .ssjx__card-icon--asset img {
    filter:
        drop-shadow(0 0 9px rgba(var(--ssjx-group-rgb), .82))
        drop-shadow(0 0 24px rgba(var(--ssjx-group-rgb), .34)) !important;
    transform: translateZ(0) scale(1.10) !important;
}

/* ---------- Full Detail inherits the selected category family ---------- */
.ssjx__detail-canvas {
    --ssjx-detail-rgb: var(--ssjx-violet-rgb);
    --ssjx-detail-accent: var(--ssjx-violet);
    --ssjx-detail-accent-soft: #d7baff;
    --ssjx-detail-button-a: #7446d8;
    --ssjx-detail-button-b: #ad55df;
    --ssjx-detail-button-c: #e059c7;
    --detail-chip: rgba(var(--ssjx-detail-rgb), .085);

    background:
        radial-gradient(circle at 0 0, rgba(var(--ssjx-detail-rgb), .105), transparent 27%),
        var(--detail-bg) !important;
    border-color: rgba(var(--ssjx-detail-rgb), .58) !important;
    outline: 1px solid rgba(var(--ssjx-detail-rgb), .26);
    outline-offset: -1px;
    box-shadow:
        inset 0 0 0 1px rgba(var(--ssjx-detail-rgb), .08),
        0 28px 90px var(--detail-shadow),
        0 0 42px rgba(var(--ssjx-detail-rgb), .12) !important;
}

.ssjx__detail-canvas[data-ssjx-theme="blue"] {
    --ssjx-detail-rgb: var(--ssjx-blue-rgb);
    --ssjx-detail-accent: var(--ssjx-blue);
    --ssjx-detail-accent-soft: #c9e3ff;
    --ssjx-detail-button-a: #315fc9;
    --ssjx-detail-button-b: #4d86ee;
    --ssjx-detail-button-c: #74b9ff;
}

.ssjx__detail-canvas[data-ssjx-reading="light"] {
    background:
        radial-gradient(circle at 0 0, rgba(var(--ssjx-detail-rgb), .085), transparent 29%),
        var(--detail-bg) !important;
    border-color: rgba(var(--ssjx-detail-rgb), .48) !important;
}

.ssjx__detail-section,
.ssjx__detail-kicker,
.ssjx__detail-side-label,
.ssjx__detail-tags span {
    color: var(--ssjx-detail-accent) !important;
}

.ssjx__detail-tags span {
    background: rgba(var(--ssjx-detail-rgb), .075) !important;
    border-color: rgba(var(--ssjx-detail-rgb), .25) !important;
}

.ssjx__reading-toggle svg,
.ssjx__detail-icon {
    color: var(--ssjx-detail-accent) !important;
}

.ssjx__detail-icon:not(.is-asset-icon) {
    background: rgba(var(--ssjx-detail-rgb), .075) !important;
    border-color: rgba(var(--ssjx-detail-rgb), .34) !important;
    box-shadow:
        inset 0 0 18px rgba(var(--ssjx-detail-rgb), .055),
        0 0 18px rgba(var(--ssjx-detail-rgb), .11) !important;
}

.ssjx__detail-icon svg {
    filter: drop-shadow(0 0 7px rgba(var(--ssjx-detail-rgb), .36)) !important;
}

.ssjx__detail-icon.is-asset-icon img {
    filter:
        drop-shadow(0 0 8px rgba(var(--ssjx-detail-rgb), .52))
        drop-shadow(0 0 22px rgba(var(--ssjx-detail-rgb), .20)) !important;
}

.ssjx__detail-value-grid div,
.ssjx__detail-side-card {
    border-color: rgba(var(--ssjx-detail-rgb), .22) !important;
}

.ssjx__detail-back,
.ssjx__reading-toggle,
.ssjx__detail-toolbar .ssjx__icon-button {
    border-color: rgba(var(--ssjx-detail-rgb), .28) !important;
}

.ssjx__detail-canvas .ssjx__button--primary,
.ssjx__detail-canvas .ssjx__button--primary:hover,
.ssjx__detail-canvas .ssjx__button--primary:focus,
.ssjx__detail-canvas .ssjx__button--primary:focus-visible,
.ssjx__detail-canvas .ssjx__button--primary:active {
    background:
        linear-gradient(
            115deg,
            var(--ssjx-detail-button-a),
            var(--ssjx-detail-button-b) 56%,
            var(--ssjx-detail-button-c)
        ) !important;
    border-color: rgba(var(--ssjx-detail-rgb), .88) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 0 22px rgba(var(--ssjx-detail-rgb), .29) !important;
}

.ssjx__detail-canvas .ssjx__button--primary:hover,
.ssjx__detail-canvas .ssjx__button--primary:focus-visible {
    filter: brightness(1.08) saturate(1.06);
    border-color: rgba(var(--ssjx-detail-rgb), 1) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .24),
        0 0 30px rgba(var(--ssjx-detail-rgb), .39) !important;
}

.ssjx__detail-canvas .ssjx__button--primary:active {
    filter: brightness(.96) saturate(1.03);
    box-shadow:
        inset 0 3px 9px rgba(0, 0, 0, .27),
        inset 0 1px 0 rgba(255, 255, 255, .12),
        0 0 20px rgba(var(--ssjx-detail-rgb), .25) !important;
}

/* ---------- Mobile Preview: artwork stays in its lane, dock stays clear ---------- */
@media (max-width: 720px) {
    .ssjx.is-preview-open {
        isolation: auto !important;
        overflow: visible !important;
        z-index: 2147482800 !important;
    }

    .ssjx__preview {
        left: 12px !important;
        right: 12px !important;
        bottom: max(92px, calc(env(safe-area-inset-bottom) + 82px)) !important;
        grid-template-columns: 82px minmax(0, 1fr) !important;
        max-height: min(calc(100dvh - 112px), 610px) !important;
        border: 1px solid rgba(var(--ssjx-preview-rgb), .72) !important;
        border-radius: 21px !important;
        outline: 1px solid rgba(var(--ssjx-preview-rgb), .16);
        outline-offset: -1px;
        box-shadow:
            inset 0 0 0 1px rgba(var(--ssjx-preview-rgb), .06),
            0 -8px 38px rgba(0, 0, 0, .38),
            0 0 34px rgba(var(--ssjx-preview-rgb), .16) !important;
    }

    .ssjx__preview-icon,
    .ssjx__preview-icon.is-asset-icon {
        min-width: 82px !important;
        width: 82px !important;
        min-height: 100% !important;
        overflow: hidden !important;
        border-right: 1px solid rgba(var(--ssjx-preview-rgb), .30) !important;
    }

    .ssjx__preview-icon.is-asset-icon img {
        width: 64px !important;
        height: 64px !important;
        max-width: 64px !important;
        max-height: 64px !important;
        object-fit: contain !important;
    }

    .ssjx__preview-copy {
        min-width: 0;
        padding: 16px 13px 17px !important;
    }

    /* Mobile Detail / Journey surfaces retain a complete visible frame. */
    .ssjx__modal {
        padding:
            max(7px, env(safe-area-inset-top))
            7px
            max(7px, env(safe-area-inset-bottom)) !important;
    }

    .ssjx__detail-canvas,
    .ssjx__journey-panel {
        width: 100% !important;
        max-height: calc(100dvh - max(14px, env(safe-area-inset-top)) - max(14px, env(safe-area-inset-bottom))) !important;
        border: 1px solid rgba(var(--ssjx-detail-rgb, var(--ssjx-violet-rgb)), .62) !important;
        border-radius: 22px !important;
        outline-offset: -1px;
    }

    .ssjx__journey-panel {
        border-color: rgba(var(--ssjx-green-rgb), .62) !important;
    }

    .ssjx__card-icon--asset,
    .ssjx__card:hover .ssjx__card-icon--asset,
    .ssjx__card:focus-within .ssjx__card-icon--asset,
    .ssjx__card.is-active .ssjx__card-icon--asset,
    .ssjx__card-icon--asset img {
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        min-height: 45px !important;
    }
}

@media (max-width: 380px) {
    .ssjx__preview {
        left: 8px !important;
        right: 8px !important;
        grid-template-columns: 74px minmax(0, 1fr) !important;
    }

    .ssjx__preview-icon,
    .ssjx__preview-icon.is-asset-icon {
        width: 74px !important;
        min-width: 74px !important;
    }

    .ssjx__preview-icon.is-asset-icon img {
        width: 58px !important;
        height: 58px !important;
        max-width: 58px !important;
        max-height: 58px !important;
    }

    .ssjx__card-icon--asset,
    .ssjx__card-icon--asset img {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }
}


/* === SIMME CSS MANAGER :: END :: SIMME_SITE === */


/* =========================================================
   V2.11 — PREVIEW-INTEGRATED JOURNEY DOCK

   The contextual green Explore / Journey dock becomes a true footer of the
   brief information panel while that panel is open. On close it is returned
   to <body> and slides back into its floating position. The same behaviour is
   used across desktop, tablet and mobile.
   ========================================================= */

.ssjx__preview-dock-slot {
    position: relative;
    z-index: 6;
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    width: 100%;
    max-height: 0;
    margin: 0;
    padding: 0 clamp(14px, 2vw, 24px);
    overflow: hidden;
    opacity: 0;
    border-top: 1px solid transparent;
    background:
        linear-gradient(180deg, rgba(4, 8, 13, 0), rgba(5, 12, 12, .82));
    transition:
        max-height 390ms var(--ssjx-ease),
        padding 390ms var(--ssjx-ease),
        opacity 240ms ease,
        border-color 280ms ease;
}

.ssjx__preview-dock-slot.is-active {
    max-height: 128px;
    padding-top: 12px;
    padding-bottom: 14px;
    opacity: 1;
    border-top-color: rgba(var(--ssjx-green-rgb), .18);
}

/* Allow the desktop preview to grow naturally when the integrated footer is
 * added; the previous 620px ceiling could otherwise clip the final edge. */
.ssjx__preview.is-open {
    max-height: 760px;
}

/* Floating phase: retreat gently before the DOM handoff. */
body > .ssjx__mobile-bar.is-docking {
    opacity: 0 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transform: translate3d(-50%, 18px, 0) scale(.955) !important;
    transition:
        opacity 145ms ease,
        transform 175ms cubic-bezier(.4, 0, .6, 1) !important;
}

/* Integrated phase: the same control now belongs to the preview footer. */
.ssjx__preview .ssjx__mobile-bar.is-integrated {
    --ssjx-green: #6bfa43;
    --ssjx-green-rgb: 107, 250, 67;

    position: relative !important;
    z-index: 7 !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(138px, 1fr)) !important;
    width: min(560px, 100%) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 7px !important;
    gap: 7px !important;
    opacity: 0 !important;
    visibility: visible !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle at 50% 125%, rgba(var(--ssjx-green-rgb), .14), transparent 58%),
        linear-gradient(145deg, rgba(9, 25, 15, .96), rgba(4, 10, 12, .985)) !important;
    border: 1px solid rgba(var(--ssjx-green-rgb), .42) !important;
    border-radius: 19px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .075),
        inset 0 0 0 1px rgba(var(--ssjx-green-rgb), .035),
        0 9px 23px rgba(0, 0, 0, .24),
        0 0 22px rgba(var(--ssjx-green-rgb), .09) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translate3d(0, 13px, 0) scale(.975) !important;
    transform-origin: 50% 100% !important;
    transition:
        opacity 270ms ease,
        transform 390ms cubic-bezier(.16, .78, .20, 1),
        border-color 220ms ease,
        box-shadow 220ms ease !important;
}

.ssjx__preview .ssjx__mobile-bar.is-integrated.is-integrated-ready {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
}

.ssjx__preview .ssjx__mobile-bar.is-integrated.is-undocking {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate3d(0, 14px, 0) scale(.97) !important;
    transition:
        opacity 150ms ease,
        transform 185ms cubic-bezier(.4, 0, .6, 1) !important;
}

/* In-panel controls retain the established green identity but are slightly
 * calmer than the free-floating dock, helping the footer feel built-in. */
.ssjx__preview .ssjx__mobile-bar.is-integrated button,
.ssjx__preview .ssjx__mobile-bar.is-integrated button:hover,
.ssjx__preview .ssjx__mobile-bar.is-integrated button:focus,
.ssjx__preview .ssjx__mobile-bar.is-integrated button:active {
    min-width: 0 !important;
    min-height: 60px !important;
    padding: 6px 16px 6px 9px !important;
    grid-template-columns: 46px auto !important;
    gap: 8px !important;
    border-radius: 14px !important;
}

.ssjx__preview .ssjx__mobile-bar.is-integrated .ssjx__mobile-bar-art,
.ssjx__preview .ssjx__mobile-bar.is-integrated button .ssjx__mobile-bar-art {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
}

.ssjx__preview .ssjx__mobile-bar.is-integrated .ssjx__mobile-bar-art img,
.ssjx__preview .ssjx__mobile-bar.is-integrated button .ssjx__mobile-bar-art img {
    width: 45px !important;
    height: 45px !important;
}

.ssjx__preview .ssjx__mobile-bar.is-integrated small {
    font-size: 11px !important;
}

/* Return phase after the preview closes. This deliberately rises from below
 * rather than merely reappearing, so the user can follow the same control
 * leaving the information panel and becoming floating navigation again. */
body > .ssjx__mobile-bar.is-visible.is-returning {
    animation: ssjx-dock-return-to-float 455ms cubic-bezier(.16, .78, .20, 1) both;
}

@keyframes ssjx-dock-return-to-float {
    0% {
        opacity: 0;
        transform: translate3d(-50%, 24px, 0) scale(.95);
    }
    68% {
        opacity: 1;
        transform: translate3d(-50%, -2px, 0) scale(1.008);
    }
    100% {
        opacity: 1;
        transform: translate3d(-50%, 0, 0) scale(1);
    }
}

@media (max-width: 720px) {
    .ssjx__preview-dock-slot {
        position: sticky;
        bottom: 0;
        z-index: 10;
        margin-top: 0;
        padding-right: 9px;
        padding-left: 9px;
        background:
            linear-gradient(180deg, rgba(5, 7, 15, .10), rgba(4, 11, 12, .99) 30%);
    }

    .ssjx__preview-dock-slot.is-active {
        max-height: 112px;
        padding-top: 9px;
        padding-bottom: max(9px, env(safe-area-inset-bottom));
    }

    /* The dock is now inside the sheet, so the sheet may safely occupy more
     * of the viewport without the old floating control covering its actions. */
    .ssjx__preview {
        max-height: min(82vh, 690px) !important;
    }

    .ssjx__preview .ssjx__mobile-bar.is-integrated {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        padding: 6px !important;
        gap: 6px !important;
        border-radius: 17px !important;
    }

    .ssjx__preview .ssjx__mobile-bar.is-integrated button,
    .ssjx__preview .ssjx__mobile-bar.is-integrated button:hover,
    .ssjx__preview .ssjx__mobile-bar.is-integrated button:focus,
    .ssjx__preview .ssjx__mobile-bar.is-integrated button:active {
        min-height: 52px !important;
        padding: 5px 10px 5px 7px !important;
        grid-template-columns: 38px auto !important;
        gap: 6px !important;
    }

    .ssjx__preview .ssjx__mobile-bar.is-integrated .ssjx__mobile-bar-art,
    .ssjx__preview .ssjx__mobile-bar.is-integrated button .ssjx__mobile-bar-art {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    .ssjx__preview .ssjx__mobile-bar.is-integrated .ssjx__mobile-bar-art img,
    .ssjx__preview .ssjx__mobile-bar.is-integrated button .ssjx__mobile-bar-art img {
        width: 37px !important;
        height: 37px !important;
    }

    .ssjx__preview .ssjx__mobile-bar.is-integrated small {
        font-size: 10px !important;
    }
}

@media (max-width: 380px) {
    .ssjx__preview .ssjx__mobile-bar.is-integrated button,
    .ssjx__preview .ssjx__mobile-bar.is-integrated button:hover,
    .ssjx__preview .ssjx__mobile-bar.is-integrated button:focus,
    .ssjx__preview .ssjx__mobile-bar.is-integrated button:active {
        grid-template-columns: 34px auto !important;
        padding-right: 7px !important;
        gap: 4px !important;
    }

    .ssjx__preview .ssjx__mobile-bar.is-integrated .ssjx__mobile-bar-art,
    .ssjx__preview .ssjx__mobile-bar.is-integrated button .ssjx__mobile-bar-art,
    .ssjx__preview .ssjx__mobile-bar.is-integrated .ssjx__mobile-bar-art img,
    .ssjx__preview .ssjx__mobile-bar.is-integrated button .ssjx__mobile-bar-art img {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body > .ssjx__mobile-bar.is-visible.is-returning {
        animation: none !important;
    }
}


/* =========================================================
   V2.11 — TRUE PREVIEW FOOTER + REAL SITE HEADER ABOVE DETAILS

   The Explore / Journey dock is no longer a floating capsule placed on top
   of the brief preview. When integrated, it becomes a normal-flow footer
   band within the information panel. A FLIP transform in JavaScript makes
   the same control travel smoothly between its floating and integrated
   positions. Full Detail / Journey overlays now clear and sit beneath the
   genuine Simme sticky header instead of covering it.
   ========================================================= */

/* ---------- Preview footer owns the green Journey treatment ---------- */
.ssjx__preview-dock-slot,
.ssjx__preview-dock-slot.is-active {
    position: relative !important;
    z-index: 6 !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    background:
        linear-gradient(90deg, rgba(var(--ssjx-green-rgb), .055), rgba(var(--ssjx-green-rgb), .12) 48%, rgba(var(--ssjx-green-rgb), .055)) !important;
    border-top: 1px solid rgba(var(--ssjx-green-rgb), .20) !important;
    border-radius: 0 0 20px 20px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.ssjx__preview-dock-slot {
    max-height: 0 !important;
    padding: 0 clamp(16px, 2vw, 26px) !important;
    opacity: 0 !important;
    transition:
        max-height 440ms var(--ssjx-ease),
        padding 440ms var(--ssjx-ease),
        opacity 240ms ease !important;
}

.ssjx__preview-dock-slot.is-active {
    max-height: 96px !important;
    padding: 10px clamp(16px, 2vw, 26px) 12px !important;
    opacity: 1 !important;
}

/* The same dock becomes an unboxed two-part footer control. */
.ssjx__preview .ssjx__mobile-bar.is-integrated,
.ssjx__preview .ssjx__mobile-bar.is-integrated.is-integrated-ready {
    position: relative !important;
    z-index: 7 !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(620px, 100%) !important;
    max-width: 100% !important;
    min-height: 62px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 8px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    transform-origin: 50% 50% !important;
    transition:
        transform 500ms cubic-bezier(.16,.78,.20,1),
        opacity 300ms ease !important;
}

/* FLIP first frame: preserve the old screen position immediately after
 * re-parenting. Removing this class animates into the footer's true location. */
.ssjx__preview .ssjx__mobile-bar.is-integrated.is-flip-enter {
    transition: none !important;
    transform:
        translate3d(var(--ssjx-dock-flip-x, 0px), var(--ssjx-dock-flip-y, 0px), 0)
        scale(var(--ssjx-dock-flip-sx, 1), var(--ssjx-dock-flip-sy, 1)) !important;
}

.ssjx__preview .ssjx__mobile-bar.is-integrated button,
.ssjx__preview .ssjx__mobile-bar.is-integrated button:hover,
.ssjx__preview .ssjx__mobile-bar.is-integrated button:focus,
.ssjx__preview .ssjx__mobile-bar.is-integrated button:active {
    display: grid !important;
    grid-template-columns: 44px auto !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 58px !important;
    height: 58px !important;
    margin: 0 !important;
    padding: 5px 16px 5px 11px !important;
    gap: 9px !important;
    background: rgba(var(--ssjx-green-rgb), .035) !important;
    border: 1px solid rgba(var(--ssjx-green-rgb), .18) !important;
    border-radius: 13px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
    transform: none !important;
}

.ssjx__preview .ssjx__mobile-bar.is-integrated button:first-child {
    background:
        linear-gradient(135deg, rgba(var(--ssjx-green-rgb), .12), rgba(var(--ssjx-green-rgb), .045)) !important;
    border-color: rgba(var(--ssjx-green-rgb), .30) !important;
}

.ssjx__preview .ssjx__mobile-bar.is-integrated button:hover,
.ssjx__preview .ssjx__mobile-bar.is-integrated button:focus-visible {
    background: rgba(var(--ssjx-green-rgb), .10) !important;
    border-color: rgba(var(--ssjx-green-rgb), .48) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 16px rgba(var(--ssjx-green-rgb), .08) !important;
}

.ssjx__preview .ssjx__mobile-bar.is-integrated button:active {
    transform: translate3d(0, 2px, 0) !important;
}

.ssjx__preview .ssjx__mobile-bar.is-integrated .ssjx__mobile-bar-art,
.ssjx__preview .ssjx__mobile-bar.is-integrated button .ssjx__mobile-bar-art,
.ssjx__preview .ssjx__mobile-bar.is-integrated .ssjx__mobile-bar-art img,
.ssjx__preview .ssjx__mobile-bar.is-integrated button .ssjx__mobile-bar-art img {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
}

.ssjx__preview .ssjx__mobile-bar.is-integrated small {
    font-size: 11px !important;
    line-height: 1 !important;
}

/* No sticky/overlay behaviour inside the mobile bottom sheet. The footer is
 * deliberately part of normal panel flow so it never covers actions/copy. */
@media (max-width: 720px) {
    .ssjx__preview-dock-slot,
    .ssjx__preview-dock-slot.is-active {
        position: relative !important;
        bottom: auto !important;
        z-index: 6 !important;
        margin-top: 0 !important;
        background:
            linear-gradient(180deg, rgba(var(--ssjx-green-rgb), .035), rgba(var(--ssjx-green-rgb), .11)) !important;
    }

    .ssjx__preview-dock-slot.is-active {
        max-height: 88px !important;
        padding: 8px 9px max(10px, env(safe-area-inset-bottom)) !important;
    }

    .ssjx__preview .ssjx__mobile-bar.is-integrated,
    .ssjx__preview .ssjx__mobile-bar.is-integrated.is-integrated-ready {
        width: 100% !important;
        min-height: 54px !important;
        gap: 6px !important;
    }

    .ssjx__preview .ssjx__mobile-bar.is-integrated button,
    .ssjx__preview .ssjx__mobile-bar.is-integrated button:hover,
    .ssjx__preview .ssjx__mobile-bar.is-integrated button:focus,
    .ssjx__preview .ssjx__mobile-bar.is-integrated button:active {
        grid-template-columns: 36px auto !important;
        min-height: 50px !important;
        height: 50px !important;
        padding: 4px 8px 4px 6px !important;
        gap: 5px !important;
        border-radius: 11px !important;
    }

    .ssjx__preview .ssjx__mobile-bar.is-integrated .ssjx__mobile-bar-art,
    .ssjx__preview .ssjx__mobile-bar.is-integrated button .ssjx__mobile-bar-art,
    .ssjx__preview .ssjx__mobile-bar.is-integrated .ssjx__mobile-bar-art img,
    .ssjx__preview .ssjx__mobile-bar.is-integrated button .ssjx__mobile-bar-art img {
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
        min-height: 35px !important;
    }

    .ssjx__preview .ssjx__mobile-bar.is-integrated small {
        font-size: 10px !important;
    }
}

/* Reverse FLIP: first floating frame is held where the footer was; the normal
 * transition then slides the control smoothly back to its fixed position. */
body > .ssjx__mobile-bar.is-flip-return {
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
    transform:
        translate3d(
            calc(-50% + var(--ssjx-dock-flip-x, 0px)),
            var(--ssjx-dock-flip-y, 0px),
            0
        )
        scale(var(--ssjx-dock-flip-sx, 1), var(--ssjx-dock-flip-sy, 1)) !important;
}

body > .ssjx__mobile-bar.is-visible.is-returning {
    animation: none !important;
    opacity: 1 !important;
    transform: translate3d(-50%, 0, 0) scale(1) !important;
    transition:
        transform 500ms cubic-bezier(.16,.78,.20,1),
        opacity 300ms ease !important;
}

/* ---------- Keep the genuine Simme sticky header visible ---------- */
body.ssjx-has-modal .ssjx {
    isolation: auto !important;
    overflow: visible !important;
    z-index: 1000000 !important;
}

body.ssjx-has-modal .ssjx__modal {
    z-index: 1000010 !important;
    top: var(--ssjx-site-header-offset, 0px) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

/* The real site chrome must stay above the focused SymSoul surface. */
body.ssjx-has-modal #headerwrap,
body.ssjx-has-modal .simme-node-site-topbar-exact {
    z-index: 1000100 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* The modal toolbar is sticky inside the canvas, immediately below the site
 * header because the whole modal has already been offset by its live height. */
body.ssjx-has-modal .ssjx__detail-toolbar {
    top: 0 !important;
    z-index: 60 !important;
}

@media (max-width: 720px) {
    body.ssjx-has-modal .ssjx__modal {
        padding:
            max(7px, env(safe-area-inset-top))
            7px
            max(7px, env(safe-area-inset-bottom)) !important;
    }

    body.ssjx-has-modal .ssjx__detail-canvas,
    body.ssjx-has-modal .ssjx__journey-panel {
        max-height: calc(100dvh - var(--ssjx-site-header-offset, 0px) - max(14px, env(safe-area-inset-top)) - max(14px, env(safe-area-inset-bottom))) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ssjx__preview .ssjx__mobile-bar.is-integrated,
    body > .ssjx__mobile-bar.is-visible.is-returning {
        transition-duration: .01ms !important;
    }
}


/* =========================================================
   V2.11 — TRUE IN-PANEL JOURNEY FOOTER

   The floating Explore / Journey dock no longer gets physically inserted
   into the brief information panel. The panel now owns its own Journey footer
   as part of normal layout. A short-lived visual clone morphs between the
   floating dock and this footer, preserving the smooth handoff without ever
   covering Explore details, Add to Journey or the panel border.
   ========================================================= */

.ssjx__preview-journey-footer {
    --ssjx-green: #6bfa43;
    --ssjx-green-rgb: 107, 250, 67;

    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(320px, 1.28fr);
    align-items: center;
    width: 100%;
    max-height: 0;
    margin: 0;
    padding: 0;
    gap: 14px;
    overflow: hidden;
    opacity: 0;
    border-top: 1px solid rgba(var(--ssjx-green-rgb), 0);
    background:
        linear-gradient(90deg, rgba(var(--ssjx-green-rgb), .00), rgba(var(--ssjx-green-rgb), .00));
    transform: translate3d(0, 12px, 0);
    transition:
        max-height 440ms var(--ssjx-ease),
        margin-top 440ms var(--ssjx-ease),
        padding 440ms var(--ssjx-ease),
        opacity 280ms ease,
        transform 440ms cubic-bezier(.16,.78,.20,1),
        border-color 320ms ease,
        background 320ms ease;
}

.ssjx__preview-journey-footer.is-preparing,
.ssjx__preview-journey-footer.is-visible,
.ssjx__preview-journey-footer.is-leaving {
    max-height: 118px;
    margin-top: 15px;
    padding: 13px 0 2px;
    border-top-color: rgba(var(--ssjx-green-rgb), .24);
    background:
        linear-gradient(90deg,
            rgba(var(--ssjx-green-rgb), .00) 0%,
            rgba(var(--ssjx-green-rgb), .035) 22%,
            rgba(var(--ssjx-green-rgb), .060) 50%,
            rgba(var(--ssjx-green-rgb), .035) 78%,
            rgba(var(--ssjx-green-rgb), .00) 100%);
}

.ssjx__preview-journey-footer.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.ssjx__preview-journey-footer.is-preparing,
.ssjx__preview-journey-footer.is-leaving {
    opacity: 0;
}

.ssjx__preview-journey-footer::before {
    position: absolute;
    top: -1px;
    left: 0;
    width: 36%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, var(--ssjx-green), rgba(var(--ssjx-green-rgb), 0));
    box-shadow: 0 0 10px rgba(var(--ssjx-green-rgb), .34);
    pointer-events: none;
}

.ssjx__preview-journey-heading {
    min-width: 0;
    padding-left: 2px;
}

.ssjx__preview-journey-heading span {
    display: block;
    color: #bfffb0;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.ssjx__preview-journey-heading small {
    display: block;
    max-width: 260px;
    margin-top: 5px;
    color: #8d9c91;
    font-size: 10px;
    line-height: 1.4;
}

.ssjx__preview-journey-actions {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

.ssjx__preview-journey-actions button,
.ssjx__preview-journey-actions button:hover,
.ssjx__preview-journey-actions button:focus,
.ssjx__preview-journey-actions button:active {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    min-height: 62px;
    height: 62px;
    margin: 0;
    padding: 6px 12px 6px 8px;
    gap: 9px;
    color: #e9ffe3;
    background:
        linear-gradient(135deg, rgba(var(--ssjx-green-rgb), .085), rgba(var(--ssjx-green-rgb), .022)) !important;
    border: 1px solid rgba(var(--ssjx-green-rgb), .20) !important;
    border-radius: 14px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        inset 0 0 0 1px rgba(var(--ssjx-green-rgb), .018) !important;
    outline: 0;
    transform: translate3d(0, 0, 0) !important;
    transition:
        background 210ms ease,
        border-color 210ms ease,
        box-shadow 210ms ease,
        transform 120ms ease !important;
}

.ssjx__preview-journey-actions button:first-child {
    background:
        linear-gradient(135deg, rgba(var(--ssjx-green-rgb), .145), rgba(var(--ssjx-green-rgb), .040)) !important;
    border-color: rgba(var(--ssjx-green-rgb), .34) !important;
}

.ssjx__preview-journey-actions button:hover,
.ssjx__preview-journey-actions button:focus-visible {
    background:
        linear-gradient(135deg, rgba(var(--ssjx-green-rgb), .18), rgba(var(--ssjx-green-rgb), .055)) !important;
    border-color: rgba(var(--ssjx-green-rgb), .56) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 0 16px rgba(var(--ssjx-green-rgb), .09) !important;
}

.ssjx__preview-journey-actions button:active {
    transform: translate3d(0, 2px, 0) !important;
}

.ssjx__preview-journey-art,
.ssjx__preview-journey-art img {
    display: block;
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
}

.ssjx__preview-journey-art img {
    object-fit: contain;
    filter: drop-shadow(0 0 7px rgba(var(--ssjx-green-rgb), .25));
}

.ssjx__preview-journey-label {
    min-width: 0;
    text-align: left;
}

.ssjx__preview-journey-label strong,
.ssjx__preview-journey-label small {
    display: block;
}

.ssjx__preview-journey-label strong {
    color: #dfffd6;
    font-size: 12px;
    font-weight: 820;
    line-height: 1.05;
}

.ssjx__preview-journey-label small {
    margin-top: 4px;
    color: #819488;
    font-size: 9px;
    line-height: 1.15;
}

.ssjx__preview-journey-actions b,
.ssjx__preview-journey-actions button b {
    position: absolute;
    top: 7px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    min-width: 25px;
    min-height: 25px;
    margin: 0;
    padding: 0;
    color: #061207;
    background: linear-gradient(145deg, #d9ffcf, var(--ssjx-green));
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(var(--ssjx-green-rgb), .32);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
}

/* While the brief panel owns its Journey footer, the floating dock is hidden
 * rather than physically moved into the panel. */
body > .ssjx__mobile-bar.is-morphing,
body > .ssjx__mobile-bar.is-morph-target {
    opacity: 0 !important;
    pointer-events: none !important;
}

.ssjx__dock-morph-ghost,
body > .ssjx__dock-morph-ghost {
    position: fixed !important;
    z-index: 1000008 !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: left, top, width, height, opacity, border-radius, filter;
}

.ssjx__dock-morph-ghost * {
    pointer-events: none !important;
}

/* The old V2.7/V2.8 re-parenting slot is intentionally neutralised if a
 * cached fragment briefly leaves one in the DOM. */
.ssjx__preview-dock-slot {
    display: none !important;
}

/* Give the preview enough real layout height for actions + integrated footer. */
.ssjx__preview.is-open {
    max-height: 820px !important;
}

@media (max-width: 900px) {
    .ssjx__preview-journey-footer {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .ssjx__preview-journey-footer.is-preparing,
    .ssjx__preview-journey-footer.is-visible,
    .ssjx__preview-journey-footer.is-leaving {
        max-height: 162px;
    }

    .ssjx__preview-journey-heading {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
    }

    .ssjx__preview-journey-heading small {
        margin-top: 0;
        text-align: right;
    }
}

@media (max-width: 720px) {
    .ssjx__preview {
        max-height: min(90dvh, 760px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    .ssjx__preview-journey-footer.is-preparing,
    .ssjx__preview-journey-footer.is-visible,
    .ssjx__preview-journey-footer.is-leaving {
        max-height: 148px;
        margin-top: 12px;
        padding-top: 10px;
        padding-bottom: max(2px, env(safe-area-inset-bottom));
    }

    .ssjx__preview-journey-heading {
        display: none;
    }

    .ssjx__preview-journey-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .ssjx__preview-journey-actions button,
    .ssjx__preview-journey-actions button:hover,
    .ssjx__preview-journey-actions button:focus,
    .ssjx__preview-journey-actions button:active {
        grid-template-columns: 38px minmax(0, 1fr);
        min-height: 54px;
        height: 54px;
        padding: 5px 8px 5px 6px;
        gap: 6px;
        border-radius: 12px !important;
    }

    .ssjx__preview-journey-art,
    .ssjx__preview-journey-art img {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
    }

    .ssjx__preview-journey-label strong {
        font-size: 10.5px;
    }

    .ssjx__preview-journey-label small {
        display: none;
    }

    .ssjx__preview-journey-actions b,
    .ssjx__preview-journey-actions button b {
        top: 5px;
        right: 5px;
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
        font-size: 9px;
    }
}

@media (max-width: 380px) {
    .ssjx__preview-journey-actions button,
    .ssjx__preview-journey-actions button:hover,
    .ssjx__preview-journey-actions button:focus,
    .ssjx__preview-journey-actions button:active {
        grid-template-columns: 33px minmax(0, 1fr);
        height: 50px;
        min-height: 50px;
        padding-right: 5px;
        gap: 4px;
    }

    .ssjx__preview-journey-art,
    .ssjx__preview-journey-art img {
        width: 33px;
        height: 33px;
        min-width: 33px;
        min-height: 33px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ssjx__preview-journey-footer,
    .ssjx__preview-journey-actions button,
    .ssjx__dock-morph-ghost {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}


/* =========================================================
   V2.11 — STICKY SITE CHROME + VALUE CLARITY + SAVED HEART
   ========================================================= */

/* The focused SymSoul surfaces deliberately sit above ordinary page content,
 * but below the genuine Simme sticky navigation identified by JavaScript. */
body.ssjx-has-modal .ssjx {
    z-index: 2147482000 !important;
}

body.ssjx-has-modal .ssjx__modal {
    z-index: 2147482500 !important;
}

/* JavaScript adds these classes to the actual visible top chrome before the
 * modal opens. This avoids relying on one historic Themify/header selector. */
body.ssjx-has-modal .ssjx-site-chrome-ancestor {
    z-index: 2147483400 !important;
}

body.ssjx-has-modal .ssjx-site-chrome-elevated {
    z-index: 2147483600 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Known Simme / Themify header forms receive the same safety net. */
body.ssjx-has-modal #headerwrap,
body.ssjx-has-modal #header,
body.ssjx-has-modal header#header,
body.ssjx-has-modal .simme-node-homebar53,
body.ssjx-has-modal .simme-node-normal-header,
body.ssjx-has-modal .simme-node-topbar54,
body.ssjx-has-modal .simme-node-site-topbar-exact,
body.ssjx-has-modal .simme-node-topbar {
    z-index: 2147483600 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Stronger value-entry controls. At reduced display brightness the two input
 * wells and the four calculated-result cards must still read as controls. */
.ssjx__estimate-inputs {
    gap: 12px !important;
}

.ssjx__estimate-inputs label {
    padding: 14px !important;
    background:
        linear-gradient(145deg, rgba(var(--ssjx-green-rgb), .032), rgba(5, 8, 15, .92)) !important;
    border: 1px solid rgba(177, 190, 218, .28) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 0 0 1px rgba(0,0,0,.18) !important;
}

.ssjx__estimate-inputs label > span {
    color: #aab4c8 !important;
    font-size: 10px !important;
    font-weight: 650 !important;
}

.ssjx__estimate-inputs label > div {
    min-height: 48px !important;
    padding: 0 14px !important;
    background:
        linear-gradient(180deg, rgba(var(--ssjx-green-rgb), .045), rgba(7, 11, 19, .98)) !important;
    border: 1.5px solid rgba(var(--ssjx-green-rgb), .48) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 0 12px rgba(var(--ssjx-green-rgb), .035) !important;
}

.ssjx__estimate-inputs label:hover > div {
    border-color: rgba(var(--ssjx-green-rgb), .68) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 0 16px rgba(var(--ssjx-green-rgb), .08) !important;
}

.ssjx__estimate-inputs label:focus-within > div {
    border-color: #7cff59 !important;
    box-shadow:
        0 0 0 2px rgba(var(--ssjx-green-rgb), .09),
        0 0 20px rgba(var(--ssjx-green-rgb), .14) !important;
}

.ssjx__estimate-inputs input,
.ssjx__estimate-inputs input:hover,
.ssjx__estimate-inputs input:focus {
    color: #f7fff4 !important;
    -webkit-text-fill-color: #f7fff4 !important;
    caret-color: #7cff59 !important;
    opacity: 1 !important;
    font-size: 19px !important;
    font-weight: 820 !important;
}

.ssjx__estimate-inputs label > div small {
    color: #a0aabd !important;
    font-size: 10px !important;
    font-weight: 650 !important;
}

.ssjx__estimate-results {
    gap: 12px !important;
    margin-top: 12px !important;
}

.ssjx__estimate-results > div {
    min-height: 104px !important;
    padding: 14px !important;
    background:
        linear-gradient(145deg, rgba(var(--ssjx-green-rgb), .095), rgba(6, 12, 14, .90)) !important;
    border: 1px solid rgba(var(--ssjx-green-rgb), .40) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 0 18px rgba(var(--ssjx-green-rgb), .035) !important;
}

.ssjx__estimate-results span,
.ssjx__estimate-results small {
    color: #9da8bb !important;
    font-size: 9px !important;
}

.ssjx__estimate-results strong {
    color: #aaff91 !important;
    text-shadow: 0 0 10px rgba(var(--ssjx-green-rgb), .13) !important;
}

/* Saved-state hearts are intentionally red. The category colour still owns
 * the button/background, while the red heart communicates the saved action. */
.ssjx__detail-canvas [data-ssjx-action="detail-save"].is-saved svg,
.ssjx__preview [data-ssjx-action="preview-save"].is-saved svg {
    color: #ff4f68 !important;
    stroke: #ff4f68 !important;
    fill: #ff4f68 !important;
    filter: drop-shadow(0 0 5px rgba(255,79,104,.34)) !important;
}

.ssjx__detail-toolbar [data-ssjx-action="detail-save"].is-saved {
    color: #ff4f68 !important;
    border-color: rgba(255,79,104,.58) !important;
    background: rgba(255,79,104,.055) !important;
    box-shadow: 0 0 15px rgba(255,79,104,.10) !important;
    opacity: 1 !important;
}

.ssjx__detail-main [data-ssjx-action="detail-save"].is-saved,
.ssjx__detail-side [data-ssjx-action="detail-save"].is-saved {
    border-color: rgba(255,79,104,.52) !important;
}

@media (max-width: 720px) {
    .ssjx__estimate-inputs,
    .ssjx__estimate-results {
        gap: 10px !important;
    }

    .ssjx__estimate-inputs label,
    .ssjx__estimate-results > div {
        padding: 12px !important;
    }
}



/* =========================================================
   V2.11 — STABILITY RECOVERY
   Compact true in-panel Journey footer, guaranteed global header layering,
   restored Journey toolbar and unambiguous red saved hearts.
   ========================================================= */

/* ---- Canonical Simme sticky header above both focused surfaces ---- */
body.ssjx-has-modal .simme-global-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2147483646 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
body.admin-bar.ssjx-has-modal .simme-global-header { top: 32px !important; }
@media (max-width: 782px) {
    body.admin-bar.ssjx-has-modal .simme-global-header { top: 46px !important; }
}
body.ssjx-has-modal .simme-global-header-host,
body.ssjx-has-modal .ssjx-site-chrome-ancestor,
body.ssjx-has-modal .ssjx-site-chrome-elevated {
    z-index: 2147483645 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ---- Detail toolbar remains visible directly beneath the real site bar ---- */
body.ssjx-has-modal .ssjx__detail-toolbar,
body.ssjx-has-modal .ssjx__journey-toolbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
}

/* ---- Journey gets the same dependable top control treatment ---- */
.ssjx__journey-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
    padding: 10px clamp(14px, 2.2vw, 28px);
    color: #dce7dd;
    background: rgba(7, 12, 16, .965);
    border-bottom: 1px solid rgba(var(--ssjx-green-rgb), .20);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
}
.ssjx__journey-back,
.ssjx__journey-toolbar-pdf {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    color: #dce7dd !important;
    background: rgba(9, 15, 20, .88) !important;
    border: 1px solid rgba(var(--ssjx-green-rgb), .34) !important;
    border-radius: 11px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
    font-size: 12px !important;
    font-weight: 720 !important;
    line-height: 1 !important;
    transform: none !important;
}
.ssjx__journey-back svg,
.ssjx__journey-toolbar-pdf svg { width: 17px !important; height: 17px !important; }
.ssjx__journey-back svg { transform: rotate(180deg); }
.ssjx__journey-back:hover,
.ssjx__journey-toolbar-pdf:hover,
.ssjx__journey-back:focus-visible,
.ssjx__journey-toolbar-pdf:focus-visible {
    color: #fff !important;
    border-color: rgba(var(--ssjx-green-rgb), .72) !important;
    background: rgba(var(--ssjx-green-rgb), .075) !important;
    box-shadow: 0 0 16px rgba(var(--ssjx-green-rgb), .08) !important;
}
.ssjx__journey-back:active,
.ssjx__journey-toolbar-pdf:active { transform: translateY(2px) !important; }
.ssjx__journey-toolbar-actions { display:flex; align-items:center; gap:8px; }
.ssjx__journey-toolbar .ssjx__icon-button {
    color:#bfffb0 !important;
    border-color:rgba(var(--ssjx-green-rgb),.34) !important;
    opacity:1 !important;
}
.ssjx__journey-head { grid-template-columns: minmax(0,1fr) !important; }

/* ---- True compact footer: normal flow, never an overlay ---- */
.ssjx__preview-journey-footer {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(180px,.55fr) minmax(340px,1fr) !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 12px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transform: translateY(10px) !important;
    border: 0 !important;
    border-top: 1px solid rgba(var(--ssjx-green-rgb), 0) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: max-height 320ms cubic-bezier(.16,.78,.20,1), margin 320ms cubic-bezier(.16,.78,.20,1), padding 320ms cubic-bezier(.16,.78,.20,1), opacity 220ms ease, transform 320ms cubic-bezier(.16,.78,.20,1), border-color 240ms ease !important;
}
.ssjx__preview-journey-footer.is-preparing,
.ssjx__preview-journey-footer.is-visible,
.ssjx__preview-journey-footer.is-leaving {
    max-height: 92px !important;
    margin-top: 14px !important;
    padding: 12px 0 2px !important;
    border-top-color: rgba(var(--ssjx-green-rgb), .28) !important;
}
.ssjx__preview-journey-footer.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
.ssjx__preview-journey-footer.is-preparing,
.ssjx__preview-journey-footer.is-leaving {
    opacity: 0 !important;
    transform: translateY(8px) !important;
}
.ssjx__preview-journey-heading { min-width:0 !important; padding:0 2px !important; }
.ssjx__preview-journey-heading span {
    color:#bfffb0 !important;
    font-size:9px !important;
    font-weight:900 !important;
    letter-spacing:.14em !important;
    text-transform:uppercase !important;
}
.ssjx__preview-journey-heading small {
    display:block !important;
    margin-top:4px !important;
    color:#8d9b91 !important;
    font-size:9.5px !important;
    line-height:1.3 !important;
}
.ssjx__preview-journey-actions {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    align-items:stretch !important;
    gap:8px !important;
    min-width:0 !important;
}
.ssjx__preview-journey-actions button,
.ssjx__preview-journey-actions button:hover,
.ssjx__preview-journey-actions button:focus,
.ssjx__preview-journey-actions button:active {
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) !important;
    align-items:center !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:56px !important;
    min-height:56px !important;
    max-height:56px !important;
    margin:0 !important;
    padding:6px 11px 6px 8px !important;
    gap:8px !important;
    color:#eaffea !important;
    background:linear-gradient(135deg,rgba(var(--ssjx-green-rgb),.085),rgba(6,15,10,.84)) !important;
    border:1px solid rgba(var(--ssjx-green-rgb),.28) !important;
    border-radius:13px !important;
    overflow:hidden !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03) !important;
    transform:none !important;
}
.ssjx__preview-journey-actions button:first-child {
    background:linear-gradient(135deg,rgba(var(--ssjx-green-rgb),.14),rgba(7,20,11,.88)) !important;
    border-color:rgba(var(--ssjx-green-rgb),.42) !important;
}
.ssjx__preview-journey-actions button:hover,
.ssjx__preview-journey-actions button:focus-visible {
    border-color:rgba(var(--ssjx-green-rgb),.70) !important;
    background:linear-gradient(135deg,rgba(var(--ssjx-green-rgb),.19),rgba(8,22,12,.94)) !important;
}
.ssjx__preview-journey-actions button:active { transform:translateY(2px) !important; }
.ssjx__preview-journey-art {
    display:block !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    max-width:42px !important;
    max-height:42px !important;
    margin:0 !important;
    padding:0 !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:contain !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    filter:drop-shadow(0 0 7px rgba(var(--ssjx-green-rgb),.24)) !important;
}
.ssjx__preview-journey-art img { display:none !important; width:0 !important; height:0 !important; }
.ssjx__preview-journey-label { min-width:0 !important; text-align:left !important; }
.ssjx__preview-journey-label strong { color:#e8ffe1 !important; font-size:11px !important; line-height:1.05 !important; }
.ssjx__preview-journey-label small { color:#829188 !important; font-size:8.5px !important; line-height:1.15 !important; margin-top:3px !important; }
.ssjx__preview-journey-actions b,
.ssjx__preview-journey-actions button b {
    top:5px !important; right:6px !important;
    width:23px !important; height:23px !important;
    min-width:23px !important; min-height:23px !important;
    max-width:23px !important; max-height:23px !important;
    font-size:9px !important; line-height:1 !important;
}

/* Floating dock exits and returns without cloning or overlapping the panel. */
body > .ssjx__mobile-bar.is-handoff-out {
    opacity:0 !important;
    transform:translate3d(0,18px,0) scale(.985) !important;
    pointer-events:none !important;
    transition:opacity 180ms ease,transform 260ms cubic-bezier(.16,.78,.20,1) !important;
}
body > .ssjx__mobile-bar.is-returning {
    animation:ssjxDockReturnV211 420ms cubic-bezier(.16,.78,.20,1) both !important;
}
@keyframes ssjxDockReturnV211 {
    0% { opacity:0; transform:translate3d(0,18px,0) scale(.985); }
    72% { opacity:1; transform:translate3d(0,-2px,0) scale(1); }
    100% { opacity:1; transform:translate3d(0,0,0) scale(1); }
}
.ssjx__dock-morph-ghost { display:none !important; }

/* ---- Saved hearts: path-level override defeats inherited SVG presentation ---- */
.ssjx__detail-canvas [data-ssjx-action="detail-save"].is-saved,
.ssjx__detail-canvas [data-ssjx-action="detail-save"][data-saved="true"] {
    color:#ff405c !important;
}
.ssjx__detail-canvas [data-ssjx-action="detail-save"].is-saved svg,
.ssjx__detail-canvas [data-ssjx-action="detail-save"][data-saved="true"] svg,
.ssjx__preview [data-ssjx-action="preview-save"].is-saved svg,
.ssjx__preview [data-ssjx-action="preview-save"][data-saved="true"] svg {
    color:#ff405c !important;
    fill:#ff405c !important;
    stroke:#ff405c !important;
    filter:drop-shadow(0 0 6px rgba(255,64,92,.40)) !important;
}
.ssjx__detail-canvas [data-ssjx-action="detail-save"].is-saved svg path,
.ssjx__detail-canvas [data-ssjx-action="detail-save"][data-saved="true"] svg path,
.ssjx__preview [data-ssjx-action="preview-save"].is-saved svg path,
.ssjx__preview [data-ssjx-action="preview-save"][data-saved="true"] svg path {
    fill:#ff405c !important;
    stroke:#ff405c !important;
}
.ssjx__detail-toolbar [data-ssjx-action="detail-save"].is-saved,
.ssjx__detail-toolbar [data-ssjx-action="detail-save"][data-saved="true"] {
    color:#ff405c !important;
    border-color:rgba(255,64,92,.70) !important;
    background:rgba(255,64,92,.07) !important;
    opacity:1 !important;
}

@media (max-width:900px) {
    .ssjx__preview-journey-footer { grid-template-columns:1fr !important; }
    .ssjx__preview-journey-footer.is-preparing,
    .ssjx__preview-journey-footer.is-visible,
    .ssjx__preview-journey-footer.is-leaving { max-height:136px !important; }
    .ssjx__preview-journey-heading { display:none !important; }
}
@media (max-width:720px) {
    .ssjx__preview-journey-footer.is-preparing,
    .ssjx__preview-journey-footer.is-visible,
    .ssjx__preview-journey-footer.is-leaving {
        max-height:86px !important;
        margin-top:10px !important;
        padding-top:9px !important;
        padding-bottom:max(2px,env(safe-area-inset-bottom)) !important;
    }
    .ssjx__preview-journey-actions { gap:6px !important; }
    .ssjx__preview-journey-actions button,
    .ssjx__preview-journey-actions button:hover,
    .ssjx__preview-journey-actions button:focus,
    .ssjx__preview-journey-actions button:active {
        grid-template-columns:36px minmax(0,1fr) !important;
        height:50px !important; min-height:50px !important; max-height:50px !important;
        padding:5px 7px 5px 6px !important;
        gap:5px !important;
    }
    .ssjx__preview-journey-art {
        width:36px !important; height:36px !important;
        min-width:36px !important; min-height:36px !important;
        max-width:36px !important; max-height:36px !important;
    }
    .ssjx__preview-journey-label strong { font-size:10px !important; }
    .ssjx__preview-journey-label small { display:none !important; }
    .ssjx__journey-toolbar { min-height:56px; padding:7px 10px; }
    .ssjx__journey-toolbar-pdf span { display:none; }
    .ssjx__journey-back { padding:0 11px !important; }
}

@media (prefers-reduced-motion:reduce) {
    body > .ssjx__mobile-bar.is-returning { animation:none !important; }
}
.ssjx__preview-journey-footer.is-leaving {
    max-height: 164px !important;
    margin-top: 14px !important;
    padding: 12px 0 0 !important;
    border-top-color: rgba(var(--ssjx-green-rgb), .22) !important;
    background: linear-gradient(90deg,
        rgba(var(--ssjx-green-rgb), .00) 0%,
        rgba(var(--ssjx-green-rgb), .028) 18%,
        rgba(var(--ssjx-green-rgb), .05) 50%,
        rgba(var(--ssjx-green-rgb), .028) 82%,
        rgba(var(--ssjx-green-rgb), .00) 100%) !important;
}

.ssjx__preview-journey-heading {
    display: block !important;
    min-width: 0 !important;
    padding: 0 2px !important;
}

.ssjx__preview-journey-heading span {
    display: block !important;
    color: #bfffb0 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}

.ssjx__preview-journey-heading small {
    display: block !important;
    margin-top: 4px !important;
    color: #d6e2d8 !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    max-width: none !important;
}

.ssjx__preview-journey-actions {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    min-width: 0 !important;
    padding: 6px !important;
    border: 1px solid rgba(var(--ssjx-green-rgb), .40) !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 50% 120%, rgba(var(--ssjx-green-rgb), .11), transparent 56%),
        rgba(5, 11, 13, .93) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .075),
        inset 0 0 0 1px rgba(var(--ssjx-green-rgb), .035),
        0 0 26px rgba(var(--ssjx-green-rgb), .105) !important;
    backdrop-filter: blur(15px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(15px) saturate(1.1) !important;
    overflow: hidden !important;
}

.ssjx__preview-journey-actions button,
.ssjx__preview-journey-actions button:hover,
.ssjx__preview-journey-actions button:focus,
.ssjx__preview-journey-actions button:active {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 56px minmax(0,1fr) !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    margin: 0 !important;
    padding: 8px 18px 8px 11px !important;
    gap: 11px !important;
    color: #b7f6a8 !important;
    background: rgba(var(--ssjx-green-rgb), .026) !important;
    border: 1px solid transparent !important;
    border-radius: 15px !important;
    box-shadow: none !important;
    transform: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 140ms ease !important;
    overflow: hidden !important;
}

.ssjx__preview-journey-actions button.is-active,
.ssjx__preview-journey-actions button:first-child,
.ssjx__preview-journey-actions button:hover,
.ssjx__preview-journey-actions button:focus-visible {
    color: #e0ffd8 !important;
    background: linear-gradient(145deg, rgba(var(--ssjx-green-rgb), .115), rgba(var(--ssjx-green-rgb), .045)) !important;
    border-color: rgba(var(--ssjx-green-rgb), .26) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 16px rgba(var(--ssjx-green-rgb), .07) !important;
}

.ssjx__preview-journey-actions button:active {
    transform: translateY(2px) !important;
}

.ssjx__preview-journey-art {
    display: grid !important;
    place-items: center !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 7px rgba(var(--ssjx-green-rgb), .40)) drop-shadow(0 0 17px rgba(var(--ssjx-green-rgb), .14)) !important;
}

.ssjx__preview-journey-art img { display:none !important; width:0 !important; height:0 !important; }

.ssjx__preview-journey-label {
    min-width: 0 !important;
    text-align: left !important;
}

.ssjx__preview-journey-label strong {
    display: block !important;
    color: currentColor !important;
    font-size: 12px !important;
    line-height: 1.05 !important;
    font-weight: 850 !important;
    letter-spacing: .01em !important;
}

.ssjx__preview-journey-label small {
    display: block !important;
    margin-top: 4px !important;
    color: currentColor !important;
    opacity: .86 !important;
    font-size: 10px !important;
    line-height: 1.18 !important;
    font-weight: 720 !important;
}

.ssjx__preview-journey-actions b,
.ssjx__preview-journey-actions button b {
    position: absolute !important;
    top: 4px !important;
    right: 5px !important;
    display: grid !important;
    place-items: center !important;
    min-width: 18px !important;
    width: auto !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 4px !important;
    color: #041006 !important;
    background: linear-gradient(145deg, #d8ffc9, var(--ssjx-green)) !important;
    border: 1px solid rgba(232,255,224,.76) !important;
    border-radius: 999px !important;
    box-shadow: 0 0 12px rgba(var(--ssjx-green-rgb), .22) !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}

@media (max-width: 900px) {
    .ssjx__preview-journey-footer.is-preparing,
    .ssjx__preview-journey-footer.is-visible,
    .ssjx__preview-journey-footer.is-leaving {
        max-height: 156px !important;
    }
    .ssjx__preview-journey-heading { display: block !important; }
}

@media (max-width: 720px) {
    .ssjx__preview-journey-footer.is-preparing,
    .ssjx__preview-journey-footer.is-visible,
    .ssjx__preview-journey-footer.is-leaving {
        max-height: 142px !important;
        margin-top: 10px !important;
        padding-top: 10px !important;
    }
    .ssjx__preview-journey-heading small {
        font-size: 10px !important;
    }
    .ssjx__preview-journey-actions {
        gap: 4px !important;
        padding: 5px !important;
        border-radius: 18px !important;
    }
    .ssjx__preview-journey-actions button,
    .ssjx__preview-journey-actions button:hover,
    .ssjx__preview-journey-actions button:focus,
    .ssjx__preview-journey-actions button:active {
        grid-template-columns: 42px minmax(0,1fr) !important;
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        padding: 6px 10px 6px 8px !important;
        gap: 8px !important;
    }
    .ssjx__preview-journey-art {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
    }
    .ssjx__preview-journey-label strong {
        font-size: 11px !important;
    }
    .ssjx__preview-journey-label small {
        font-size: 9px !important;
    }
    .ssjx__preview-journey-actions b,
    .ssjx__preview-journey-actions button b {
        top: 4px !important;
        right: 4px !important;
        min-width: 17px !important;
        height: 17px !important;
        min-height: 17px !important;
        font-size: 8px !important;
    }
}

/* ========================================================================== 
   V2.13 – Reading mode toggle redesign
   Node-style dark/light segmented control integrated into Explore SymSoul.
   ========================================================================== */

.ssjx__reading-mode {
    --ssjx-reading-shell-bg: linear-gradient(180deg, rgba(7, 18, 39, .96), rgba(2, 10, 26, .98));
    --ssjx-reading-shell-border: rgba(120, 174, 255, .26);
    --ssjx-reading-shell-glow: rgba(86, 176, 255, .16);
    --ssjx-reading-dotline: rgba(142, 200, 255, .28);
    --ssjx-reading-text: #d9e7fb;
    --ssjx-reading-muted: #bfd0eb;
    --ssjx-reading-active-a: rgba(39, 116, 204, .92);
    --ssjx-reading-active-b: rgba(84, 168, 236, .92);
    --ssjx-reading-active-c: rgba(133, 214, 255, .88);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-radius: 999px;
    background: var(--ssjx-reading-shell-bg);
    border: 1px solid var(--ssjx-reading-shell-border);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 0 0 1px rgba(255, 255, 255, .02),
        0 10px 28px rgba(0, 0, 0, .26),
        0 0 28px var(--ssjx-reading-shell-glow);
}

.ssjx__reading-mode::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: inherit;
    border: 1px dotted var(--ssjx-reading-dotline);
    opacity: .7;
    pointer-events: none;
}

.ssjx__reading-segment,
.ssjx__reading-segment:hover,
.ssjx__reading-segment:focus,
.ssjx__reading-segment:active {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 24px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent !important;
    color: var(--ssjx-reading-muted) !important;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.01em;
    box-shadow: none !important;
    transition:
        color .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        transform .18s ease;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ssjx__reading-segment svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: currentColor;
}

.ssjx__reading-segment.is-active,
.ssjx__reading-segment[aria-pressed="true"] {
    background:
        radial-gradient(circle at 18% 26%, rgba(161, 229, 255, .26), transparent 32%),
        linear-gradient(135deg, var(--ssjx-reading-active-a), var(--ssjx-reading-active-b) 55%, var(--ssjx-reading-active-c)) !important;
    color: #f7fbff !important;
    border-color: rgba(159, 223, 255, .72) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .2),
        0 0 0 1px rgba(150, 222, 255, .10),
        0 0 24px rgba(90, 186, 255, .32),
        0 14px 30px rgba(46, 102, 188, .28) !important;
}

.ssjx__reading-segment:not(.is-active):hover,
.ssjx__reading-segment:not(.is-active):focus-visible {
    color: #eff7ff !important;
    background: rgba(84, 144, 219, .10) !important;
    border-color: rgba(126, 186, 255, .22) !important;
}

.ssjx__reading-segment:active {
    transform: translateY(1px);
}

.ssjx__reading-mode--toolbar {
    flex-shrink: 0;
}

.ssjx__reading-mode--toolbar .ssjx__reading-segment {
    min-width: 118px;
    min-height: 46px;
    padding: 10px 18px;
    font-size: 14px;
}

.ssjx__reading-mode--toolbar .ssjx__reading-segment svg {
    width: 18px;
    height: 18px;
}

.ssjx__reading-mode--panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
    padding: 8px;
}

.ssjx__reading-mode--panel .ssjx__reading-segment {
    width: 100%;
    min-height: 60px;
    font-size: 18px;
    padding: 14px 22px;
}

.ssjx__detail-side-card--reading .ssjx__reading-mode {
    margin-top: 6px;
}

.ssjx__detail-canvas[data-ssjx-reading="light"] .ssjx__reading-mode {
    --ssjx-reading-shell-bg: linear-gradient(180deg, rgba(235, 243, 255, .98), rgba(224, 235, 251, .98));
    --ssjx-reading-shell-border: rgba(92, 136, 214, .30);
    --ssjx-reading-shell-glow: rgba(73, 140, 214, .10);
    --ssjx-reading-dotline: rgba(92, 136, 214, .22);
    --ssjx-reading-text: #18345e;
    --ssjx-reading-muted: #345376;
}

.ssjx__detail-canvas[data-ssjx-reading="light"] .ssjx__reading-segment,
.ssjx__detail-canvas[data-ssjx-reading="light"] .ssjx__reading-segment:hover,
.ssjx__detail-canvas[data-ssjx-reading="light"] .ssjx__reading-segment:focus,
.ssjx__detail-canvas[data-ssjx-reading="light"] .ssjx__reading-segment:active {
    color: var(--ssjx-reading-muted) !important;
}

.ssjx__detail-canvas[data-ssjx-reading="light"] .ssjx__reading-segment.is-active,
.ssjx__detail-canvas[data-ssjx-reading="light"] .ssjx__reading-segment[aria-pressed="true"] {
    color: #ffffff !important;
}

@media (max-width: 980px) {
    .ssjx__detail-toolbar-actions {
        gap: 10px;
    }

    .ssjx__reading-mode--toolbar .ssjx__reading-segment {
        min-width: 0;
        padding: 10px 14px;
        font-size: 13px;
    }
}

@media (max-width: 780px) {
    .ssjx__reading-mode--toolbar {
        padding: 5px;
        gap: 4px;
    }

    .ssjx__reading-mode--toolbar::before {
        inset: 4px;
    }

    .ssjx__reading-mode--toolbar .ssjx__reading-segment {
        min-height: 40px;
        min-width: 0;
        padding: 8px 10px;
        gap: 7px;
    }

    .ssjx__reading-mode--toolbar .ssjx__reading-segment span {
        display: none;
    }

    .ssjx__reading-mode--toolbar .ssjx__reading-segment svg {
        width: 17px;
        height: 17px;
    }
}

@media (max-width: 560px) {
    .ssjx__reading-mode--panel {
        gap: 6px;
        padding: 6px;
    }

    .ssjx__reading-mode--panel .ssjx__reading-segment {
        min-height: 52px;
        padding: 12px 14px;
        font-size: 16px;
        gap: 8px;
    }

    .ssjx__reading-mode--panel .ssjx__reading-segment svg {
        width: 18px;
        height: 18px;
    }
}

/* ========================================================================== 
   V2.14 – Stable hover geometry
   Hover/focus/selected states change colour, glow and surface only.
   No card, icon, arrow or toolbar control changes size or position on hover.
   ========================================================================== */

/* Category cards never lift, scale or resize on hover/focus/selection. */
.ssjx__card,
.ssjx__card:hover,
.ssjx__card:focus-within,
.ssjx__card.is-active,
.ssjx__card.is-saved,
.ssjx__card.is-saved:not(.is-active) {
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    box-sizing: border-box !important;
}

/* Keep the inner click surface physically fixed too. */
.ssjx__card-main,
.ssjx__card-main:hover,
.ssjx__card-main:focus,
.ssjx__card-main:focus-visible,
.ssjx__card-main:active {
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
}

/* Icons may brighten/glow, but must not grow or move. */
.ssjx__card-icon,
.ssjx__card:hover .ssjx__card-icon,
.ssjx__card:focus-within .ssjx__card-icon,
.ssjx__card.is-active .ssjx__card-icon,
.ssjx__card.is-saved .ssjx__card-icon,
.ssjx__card-icon--asset,
.ssjx__card:hover .ssjx__card-icon--asset,
.ssjx__card:focus-within .ssjx__card-icon--asset,
.ssjx__card.is-active .ssjx__card-icon--asset {
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
}

.ssjx__card-icon--asset img,
.ssjx__card:hover .ssjx__card-icon--asset img,
.ssjx__card:focus-within .ssjx__card-icon--asset img,
.ssjx__card.is-active .ssjx__card-icon--asset img,
.ssjx__group--blue .ssjx__card-icon--asset img,
.ssjx__group--blue .ssjx__card:hover .ssjx__card-icon--asset img,
.ssjx__group--blue .ssjx__card.is-active .ssjx__card-icon--asset img {
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
}

/* Arrow stays the same size/location. Hover communicates via colour/glow only. */
.ssjx__card-arrow,
.ssjx__card:hover .ssjx__card-arrow,
.ssjx__card:focus-within .ssjx__card-arrow,
.ssjx__card.is-active .ssjx__card-arrow,
.ssjx__card--last .ssjx__card-arrow {
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
}

.ssjx__card-arrow::before,
.ssjx__card:hover .ssjx__card-arrow::before,
.ssjx__card:focus-within .ssjx__card-arrow::before,
.ssjx__card.is-active .ssjx__card-arrow::before {
    transform: translateY(-50%) scaleX(1) !important;
}

.ssjx__card-arrow svg,
.ssjx__card:hover .ssjx__card-arrow svg,
.ssjx__card:focus-within .ssjx__card-arrow svg,
.ssjx__card.is-active .ssjx__card-arrow svg {
    transform: none !important;
    animation: none !important;
}

/* Favourite button remains fixed in its corner. */
.ssjx__card-save,
.ssjx__card-save:hover,
.ssjx__card-save:focus,
.ssjx__card-save:focus-visible,
.ssjx__card-save:active,
.ssjx__card-save.is-saved {
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
}

/* Journey toolbar controls: lock geometry in every pointer state so the site
   theme cannot inflate them on hover/focus. Only colours and glow change. */
.ssjx__journey-back,
.ssjx__journey-back:hover,
.ssjx__journey-back:focus,
.ssjx__journey-back:focus-visible,
.ssjx__journey-back:active,
.ssjx__journey-toolbar-pdf,
.ssjx__journey-toolbar-pdf:hover,
.ssjx__journey-toolbar-pdf:focus,
.ssjx__journey-toolbar-pdf:focus-visible,
.ssjx__journey-toolbar-pdf:active {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    gap: 8px !important;
    border-width: 1px !important;
    border-radius: 11px !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
    font-weight: 720 !important;
    line-height: 1 !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
}

/* Detail toolbar controls are also geometry-stable. */
.ssjx__detail-back,
.ssjx__detail-back:hover,
.ssjx__detail-back:focus,
.ssjx__detail-back:focus-visible,
.ssjx__detail-back:active,
.ssjx__reading-mode--toolbar,
.ssjx__reading-mode--toolbar:hover,
.ssjx__reading-mode--toolbar:focus-within {
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
}

.ssjx__detail-toolbar .ssjx__icon-button,
.ssjx__detail-toolbar .ssjx__icon-button:hover,
.ssjx__detail-toolbar .ssjx__icon-button:focus,
.ssjx__detail-toolbar .ssjx__icon-button:focus-visible,
.ssjx__detail-toolbar .ssjx__icon-button:active {
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
}

/* Reading-mode segments: same dimensions for idle/hover/active. */
.ssjx__reading-segment,
.ssjx__reading-segment:hover,
.ssjx__reading-segment:focus,
.ssjx__reading-segment:focus-visible,
.ssjx__reading-segment:active,
.ssjx__reading-segment.is-active,
.ssjx__reading-segment[aria-pressed="true"] {
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    box-sizing: border-box !important;
}


/* ======================================================================
   V2.15 — Preview Journey action buttons matched to the floating dock
   The integrated Explore / Journey controls now use the same visual system
   as the floating dock: dark surface, green profile, stacked labels, fixed
   geometry, and a centred count badge.
   ====================================================================== */
.ssjx__preview-journey-footer {
    background:
        linear-gradient(135deg, rgba(4, 16, 14, .96), rgba(5, 11, 23, .98)) !important;
    border: 1px solid rgba(var(--ssjx-green-rgb), .18) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 14px 28px rgba(0,0,0,.24) !important;
}

.ssjx__preview-journey-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
}

.ssjx__preview-journey-actions button,
.ssjx__preview-journey-actions button:hover,
.ssjx__preview-journey-actions button:focus,
.ssjx__preview-journey-actions button:active {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: center !important;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 74px !important;
    height: 74px !important;
    padding: 9px 18px 9px 12px !important;
    gap: 12px !important;
    border-radius: 22px !important;
    background:
        linear-gradient(135deg, rgba(5, 17, 15, .96), rgba(4, 10, 20, .98)) !important;
    border: 1px solid rgba(var(--ssjx-green-rgb), .24) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 0 0 1px rgba(var(--ssjx-green-rgb), .06),
        0 10px 24px rgba(0,0,0,.20) !important;
    transform: none !important;
    overflow: hidden !important;
}

.ssjx__preview-journey-actions button:first-child,
.ssjx__preview-journey-actions button.is-active {
    background:
        radial-gradient(circle at 20% 50%, rgba(var(--ssjx-green-rgb), .18), transparent 46%),
        linear-gradient(135deg, rgba(var(--ssjx-green-rgb), .16), rgba(5, 18, 14, .94) 46%, rgba(4, 10, 18, .98)) !important;
    border-color: rgba(var(--ssjx-green-rgb), .36) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 0 0 1px rgba(var(--ssjx-green-rgb), .08),
        0 0 24px rgba(var(--ssjx-green-rgb), .10) !important;
}

.ssjx__preview-journey-actions button:hover,
.ssjx__preview-journey-actions button:focus-visible {
    background:
        linear-gradient(135deg, rgba(var(--ssjx-green-rgb), .10), rgba(5, 16, 14, .95), rgba(4, 10, 19, .98)) !important;
    border-color: rgba(var(--ssjx-green-rgb), .44) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 0 1px rgba(var(--ssjx-green-rgb), .12),
        0 0 22px rgba(var(--ssjx-green-rgb), .12) !important;
}

.ssjx__preview-journey-actions button:active {
    transform: translateY(1px) !important;
}

.ssjx__preview-journey-art {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 35% 35%, rgba(var(--ssjx-green-rgb), .14), rgba(8, 14, 26, .72) 70%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 0 1px rgba(var(--ssjx-green-rgb), .18) !important;
}

.ssjx__preview-journey-label {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-width: 0 !important;
    text-align: left !important;
}

.ssjx__preview-journey-label strong {
    display: block !important;
    color: #e7ffe1 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -.01em !important;
}

.ssjx__preview-journey-label small {
    display: block !important;
    margin-top: 4px !important;
    color: #9ab39f !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
}

.ssjx__preview-journey-actions b,
.ssjx__preview-journey-actions button b {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: #b8ff8b !important;
    color: #081107 !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: 0 0 18px rgba(var(--ssjx-green-rgb), .24) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
}

@media (max-width: 900px) {
    .ssjx__preview-journey-actions {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 720px) {
    .ssjx__preview-journey-footer {
        padding: 14px !important;
        border-radius: 20px !important;
    }

    .ssjx__preview-journey-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .ssjx__preview-journey-actions button,
    .ssjx__preview-journey-actions button:hover,
    .ssjx__preview-journey-actions button:focus,
    .ssjx__preview-journey-actions button:active {
        grid-template-columns: 40px minmax(0, 1fr) !important;
        min-height: 58px !important;
        height: 58px !important;
        padding: 7px 12px 7px 9px !important;
        gap: 8px !important;
        border-radius: 18px !important;
    }

    .ssjx__preview-journey-art {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 14px !important;
    }

    .ssjx__preview-journey-label strong {
        font-size: 12px !important;
    }

    .ssjx__preview-journey-label small {
        display: block !important;
        margin-top: 2px !important;
        font-size: 9.5px !important;
        line-height: 1.1 !important;
    }

    .ssjx__preview-journey-actions b,
    .ssjx__preview-journey-actions button b {
        top: 7px !important;
        right: 7px !important;
        width: 21px !important;
        min-width: 21px !important;
        max-width: 21px !important;
        height: 21px !important;
        min-height: 21px !important;
        font-size: 9px !important;
    }
}

@media (max-width: 420px) {
    .ssjx__preview-journey-actions button,
    .ssjx__preview-journey-actions button:hover,
    .ssjx__preview-journey-actions button:focus,
    .ssjx__preview-journey-actions button:active {
        grid-template-columns: 36px minmax(0, 1fr) !important;
        min-height: 54px !important;
        height: 54px !important;
        padding: 7px 10px 7px 8px !important;
        gap: 6px !important;
    }

    .ssjx__preview-journey-art {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    .ssjx__preview-journey-label strong {
        font-size: 11px !important;
    }

    .ssjx__preview-journey-label small {
        display: none !important;
    }
}


/* ==========================================================================
   V2.16 — FINAL READING MODE CONTROL CORRECTION
   Replaces the bright cyan block buttons with the approved Node-style
   Dark / Light segmented control on BOTH the toolbar and reading card.
   ========================================================================== */

.ssjx__reading-mode,
.ssjx__reading-mode:hover,
.ssjx__reading-mode:focus-within {
    --ssjx-reading-blue-rgb: 70, 178, 255;
    --ssjx-reading-shell: rgba(5, 13, 29, .97);
    --ssjx-reading-shell-2: rgba(8, 20, 39, .96);
    --ssjx-reading-line: rgba(136, 181, 228, .28);
    --ssjx-reading-dot: rgba(117, 167, 219, .34);
    --ssjx-reading-active-bg: rgba(14, 46, 78, .94);
    --ssjx-reading-active-bg-2: rgba(10, 31, 57, .98);
    --ssjx-reading-active-edge: rgba(76, 185, 255, .92);
    --ssjx-reading-active-glow: rgba(57, 168, 255, .20);
    --ssjx-reading-text: #eef6ff;
    --ssjx-reading-muted: #b7c4d7;

    position: relative !important;
    display: inline-grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 8px !important;

    background:
        linear-gradient(180deg, var(--ssjx-reading-shell-2), var(--ssjx-reading-shell)) !important;
    border: 1px solid var(--ssjx-reading-line) !important;
    border-radius: 24px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        0 0 0 1px rgba(255, 255, 255, .015),
        0 12px 26px rgba(0, 0, 0, .24) !important;

    overflow: hidden !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
}

.ssjx__reading-mode::before {
    content: "" !important;
    position: absolute !important;
    inset: 7px !important;
    z-index: 0 !important;
    border: 1px dotted var(--ssjx-reading-dot) !important;
    border-radius: 18px !important;
    opacity: .85 !important;
    pointer-events: none !important;
}

/* Kill any theme / browser / earlier component button skin. */
.ssjx__reading-mode > .ssjx__reading-segment,
.ssjx__reading-mode > .ssjx__reading-segment:hover,
.ssjx__reading-mode > .ssjx__reading-segment:focus,
.ssjx__reading-mode > .ssjx__reading-segment:focus-visible,
.ssjx__reading-mode > .ssjx__reading-segment:active,
.ssjx__reading-mode > .ssjx__reading-segment.is-active,
.ssjx__reading-mode > .ssjx__reading-segment[aria-pressed="true"] {
    position: relative !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;

    margin: 0 !important;
    padding: 0 22px !important;

    color: var(--ssjx-reading-muted) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 17px !important;
    box-shadow: none !important;
    outline: 0 !important;

    font-family: inherit !important;
    font-size: 17px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-shadow: none !important;

    appearance: none !important;
    -webkit-appearance: none !important;
    overflow: hidden !important;
    cursor: pointer !important;

    transform: none !important;
    translate: none !important;
    scale: 1 !important;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease !important;
}

/* Inactive: dark, restrained, no cyan fill. */
.ssjx__reading-mode > .ssjx__reading-segment:not(.is-active):not([aria-pressed="true"]) {
    color: var(--ssjx-reading-muted) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.ssjx__reading-mode > .ssjx__reading-segment:not(.is-active):not([aria-pressed="true"]):hover,
.ssjx__reading-mode > .ssjx__reading-segment:not(.is-active):not([aria-pressed="true"]):focus-visible {
    color: #e6f1ff !important;
    background: rgba(var(--ssjx-reading-blue-rgb), .055) !important;
    border-color: rgba(var(--ssjx-reading-blue-rgb), .16) !important;
    box-shadow: none !important;
}

/* Active: dark navy surface with cyan edge/glow — NOT a bright cyan button. */
.ssjx__reading-mode > .ssjx__reading-segment.is-active,
.ssjx__reading-mode > .ssjx__reading-segment[aria-pressed="true"],
.ssjx__reading-mode > .ssjx__reading-segment.is-active:hover,
.ssjx__reading-mode > .ssjx__reading-segment[aria-pressed="true"]:hover,
.ssjx__reading-mode > .ssjx__reading-segment.is-active:focus-visible,
.ssjx__reading-mode > .ssjx__reading-segment[aria-pressed="true"]:focus-visible {
    color: var(--ssjx-reading-text) !important;
    background:
        radial-gradient(circle at 22% 24%, rgba(var(--ssjx-reading-blue-rgb), .18), transparent 42%),
        linear-gradient(145deg, var(--ssjx-reading-active-bg), var(--ssjx-reading-active-bg-2)) !important;
    border-color: var(--ssjx-reading-active-edge) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        inset 0 0 18px rgba(var(--ssjx-reading-blue-rgb), .045),
        0 0 0 1px rgba(var(--ssjx-reading-blue-rgb), .07),
        0 0 18px var(--ssjx-reading-active-glow) !important;
}

.ssjx__reading-mode > .ssjx__reading-segment:active {
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
}

/* Icons match the approved control: cyan only on the active side. */
.ssjx__reading-mode > .ssjx__reading-segment svg {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    min-height: 21px !important;
    color: currentColor !important;
    fill: none !important;
    stroke: currentColor !important;
    filter: none !important;
}

.ssjx__reading-mode > .ssjx__reading-segment.is-active svg,
.ssjx__reading-mode > .ssjx__reading-segment[aria-pressed="true"] svg {
    color: #9eefff !important;
    stroke: currentColor !important;
    filter: drop-shadow(0 0 6px rgba(117, 225, 255, .32)) !important;
}

.ssjx__reading-mode > .ssjx__reading-segment span {
    display: inline-block !important;
    color: inherit !important;
    font: inherit !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Top toolbar version: same design, just slightly more compact. */
.ssjx__reading-mode--toolbar {
    width: auto !important;
    min-width: 286px !important;
    max-width: 330px !important;
    flex: 0 0 auto !important;
}

.ssjx__reading-mode--toolbar > .ssjx__reading-segment,
.ssjx__reading-mode--toolbar > .ssjx__reading-segment:hover,
.ssjx__reading-mode--toolbar > .ssjx__reading-segment:focus,
.ssjx__reading-mode--toolbar > .ssjx__reading-segment:active {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 18px !important;
    font-size: 15px !important;
    border-radius: 15px !important;
}

/* Reading card version: same node-style control, wider for easy use. */
.ssjx__reading-mode--panel {
    width: 100% !important;
    max-width: 100% !important;
}

.ssjx__detail-side-card--reading .ssjx__reading-mode--panel {
    margin-top: 12px !important;
}

/* Keep the control visually dark even when the reading SURFACE is light.
   Only the content surface changes; the control keeps its approved identity. */
.ssjx__detail-canvas[data-ssjx-reading="light"] .ssjx__reading-mode {
    --ssjx-reading-shell: rgba(5, 13, 29, .97) !important;
    --ssjx-reading-shell-2: rgba(8, 20, 39, .96) !important;
    --ssjx-reading-line: rgba(136, 181, 228, .28) !important;
    --ssjx-reading-dot: rgba(117, 167, 219, .34) !important;
    --ssjx-reading-text: #eef6ff !important;
    --ssjx-reading-muted: #b7c4d7 !important;

    background:
        linear-gradient(180deg, var(--ssjx-reading-shell-2), var(--ssjx-reading-shell)) !important;
    border-color: var(--ssjx-reading-line) !important;
}

.ssjx__detail-canvas[data-ssjx-reading="light"]
.ssjx__reading-mode > .ssjx__reading-segment {
    color: var(--ssjx-reading-muted) !important;
}

.ssjx__detail-canvas[data-ssjx-reading="light"]
.ssjx__reading-mode > .ssjx__reading-segment.is-active,
.ssjx__detail-canvas[data-ssjx-reading="light"]
.ssjx__reading-mode > .ssjx__reading-segment[aria-pressed="true"] {
    color: var(--ssjx-reading-text) !important;
}

/* Tablet: retain text and the same design language. */
@media (max-width: 980px) {
    .ssjx__reading-mode--toolbar {
        min-width: 250px !important;
        max-width: 286px !important;
        padding: 6px !important;
        border-radius: 20px !important;
    }

    .ssjx__reading-mode--toolbar::before {
        inset: 5px !important;
        border-radius: 15px !important;
    }

    .ssjx__reading-mode--toolbar > .ssjx__reading-segment,
    .ssjx__reading-mode--toolbar > .ssjx__reading-segment:hover,
    .ssjx__reading-mode--toolbar > .ssjx__reading-segment:focus,
    .ssjx__reading-mode--toolbar > .ssjx__reading-segment:active {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding: 0 13px !important;
        gap: 8px !important;
        font-size: 14px !important;
        border-radius: 14px !important;
    }
}

/* Mobile: still ONE horizontal segmented control.
   Never fall back to two large blue tiles. */
@media (max-width: 780px) {
    .ssjx__reading-mode--toolbar,
    .ssjx__reading-mode--panel {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 4px !important;
        padding: 6px !important;
        border-radius: 19px !important;
    }

    .ssjx__reading-mode--toolbar::before,
    .ssjx__reading-mode--panel::before {
        inset: 5px !important;
        border-radius: 14px !important;
    }

    .ssjx__reading-mode--toolbar > .ssjx__reading-segment,
    .ssjx__reading-mode--panel > .ssjx__reading-segment,
    .ssjx__reading-mode--toolbar > .ssjx__reading-segment:hover,
    .ssjx__reading-mode--panel > .ssjx__reading-segment:hover,
    .ssjx__reading-mode--toolbar > .ssjx__reading-segment:focus,
    .ssjx__reading-mode--panel > .ssjx__reading-segment:focus,
    .ssjx__reading-mode--toolbar > .ssjx__reading-segment:active,
    .ssjx__reading-mode--panel > .ssjx__reading-segment:active {
        width: 100% !important;
        min-width: 0 !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        padding: 0 11px !important;
        gap: 7px !important;
        font-size: 14px !important;
        border-radius: 14px !important;
    }

    .ssjx__reading-mode--toolbar > .ssjx__reading-segment span,
    .ssjx__reading-mode--panel > .ssjx__reading-segment span {
        display: inline-block !important;
    }

    .ssjx__reading-mode > .ssjx__reading-segment svg {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
    }
}

@media (max-width: 420px) {
    .ssjx__reading-mode--toolbar > .ssjx__reading-segment,
    .ssjx__reading-mode--panel > .ssjx__reading-segment {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding: 0 9px !important;
        gap: 6px !important;
        font-size: 13px !important;
    }
}


/* ==========================================================================
   V2.17 — READING TOGGLE THEME-ISOLATION FIX
   The Dark / Light segments are no longer native <button> elements.
   This prevents Themify / global WordPress button rules from turning them
   into large cyan tiles. These selectors define the complete final surface.
   ========================================================================== */

.ssjx__reading-mode > span.ssjx__reading-segment,
.ssjx__reading-mode > span.ssjx__reading-segment:hover,
.ssjx__reading-mode > span.ssjx__reading-segment:focus,
.ssjx__reading-mode > span.ssjx__reading-segment:focus-visible,
.ssjx__reading-mode > span.ssjx__reading-segment:active {
    position: relative !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;

    margin: 0 !important;
    padding: 0 22px !important;
    box-sizing: border-box !important;

    color: #b7c4d7 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 17px !important;
    box-shadow: none !important;
    outline: none !important;

    font-family: inherit !important;
    font-size: 17px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    text-transform: none !important;
    text-shadow: none !important;

    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;

    transform: none !important;
    translate: none !important;
    scale: 1 !important;

    transition:
        color 180ms ease,
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease !important;
}

.ssjx__reading-mode > span.ssjx__reading-segment::before,
.ssjx__reading-mode > span.ssjx__reading-segment::after {
    content: none !important;
    display: none !important;
}

.ssjx__reading-mode > span.ssjx__reading-segment.is-active,
.ssjx__reading-mode > span.ssjx__reading-segment[aria-pressed="true"],
.ssjx__reading-mode > span.ssjx__reading-segment.is-active:hover,
.ssjx__reading-mode > span.ssjx__reading-segment[aria-pressed="true"]:hover,
.ssjx__reading-mode > span.ssjx__reading-segment.is-active:focus-visible,
.ssjx__reading-mode > span.ssjx__reading-segment[aria-pressed="true"]:focus-visible {
    color: #eef6ff !important;
    background:
        radial-gradient(circle at 22% 24%, rgba(70, 178, 255, .18), transparent 42%),
        linear-gradient(145deg, rgba(14, 46, 78, .94), rgba(10, 31, 57, .98)) !important;
    border-color: rgba(76, 185, 255, .92) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 0 18px rgba(70,178,255,.045),
        0 0 0 1px rgba(70,178,255,.07),
        0 0 18px rgba(57,168,255,.20) !important;
}

.ssjx__reading-mode > span.ssjx__reading-segment:not(.is-active):not([aria-pressed="true"]):hover,
.ssjx__reading-mode > span.ssjx__reading-segment:not(.is-active):not([aria-pressed="true"]):focus-visible {
    color: #e6f1ff !important;
    background: rgba(70, 178, 255, .055) !important;
    border-color: rgba(70, 178, 255, .16) !important;
    box-shadow: none !important;
}

.ssjx__reading-mode > span.ssjx__reading-segment svg {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    min-height: 21px !important;
    color: currentColor !important;
    stroke: currentColor !important;
    fill: none !important;
    filter: none !important;
}

.ssjx__reading-mode > span.ssjx__reading-segment.is-active svg,
.ssjx__reading-mode > span.ssjx__reading-segment[aria-pressed="true"] svg {
    color: #9eefff !important;
    filter: drop-shadow(0 0 6px rgba(117,225,255,.32)) !important;
}

.ssjx__reading-mode > span.ssjx__reading-segment > span {
    display: inline-block !important;
    color: inherit !important;
    font: inherit !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Toolbar sizing */
.ssjx__reading-mode--toolbar > span.ssjx__reading-segment {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 18px !important;
    font-size: 15px !important;
    border-radius: 15px !important;
}

/* Reading card sizing */
.ssjx__reading-mode--panel > span.ssjx__reading-segment {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
}

/* Mobile stays as ONE horizontal segmented selector */
@media (max-width: 780px) {
    .ssjx__reading-mode--toolbar > span.ssjx__reading-segment,
    .ssjx__reading-mode--panel > span.ssjx__reading-segment {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        padding: 0 11px !important;
        gap: 7px !important;
        font-size: 14px !important;
        border-radius: 14px !important;
    }

    .ssjx__reading-mode--toolbar > span.ssjx__reading-segment > span,
    .ssjx__reading-mode--panel > span.ssjx__reading-segment > span {
        display: inline-block !important;
    }
}

@media (max-width: 420px) {
    .ssjx__reading-mode--toolbar > span.ssjx__reading-segment,
    .ssjx__reading-mode--panel > span.ssjx__reading-segment {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding: 0 9px !important;
        gap: 6px !important;
        font-size: 13px !important;
    }
}


/* ==========================================================================
   V2.18 — FINAL ISOLATED NODE-STYLE DARK / LIGHT CONTROL
   Completely new namespace: .ssjx-rmode2
   No native <button> elements.
   No SVG icons.
   This prevents both global button CSS and global SVG CSS from distorting it.
   ========================================================================== */

.ssjx-rmode2,
.ssjx-rmode2 *,
.ssjx-rmode2 *::before,
.ssjx-rmode2 *::after {
    box-sizing: border-box !important;
}

.ssjx-rmode2 {
    --rm-blue: 79, 187, 255;
    --rm-blue-soft: 157, 229, 255;
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow: hidden !important;

    background:
        radial-gradient(circle at 50% 115%, rgba(var(--rm-blue), .055), transparent 52%),
        linear-gradient(180deg, rgba(7, 17, 34, .98), rgba(3, 10, 23, .99)) !important;
    border: 1px solid rgba(128, 165, 209, .28) !important;
    border-radius: 25px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 10px 28px rgba(0,0,0,.26) !important;

    transform: none !important;
    translate: none !important;
    scale: 1 !important;
}

.ssjx-rmode2::before {
    content: "" !important;
    position: absolute !important;
    inset: 7px !important;
    z-index: 0 !important;
    display: block !important;
    pointer-events: none !important;
    border: 1px dotted rgba(127, 172, 220, .34) !important;
    border-radius: 18px !important;
}

/* Each side is a segment of the ONE control, never a standalone tile. */
.ssjx-rmode2__segment,
.ssjx-rmode2__segment:hover,
.ssjx-rmode2__segment:focus,
.ssjx-rmode2__segment:focus-visible,
.ssjx-rmode2__segment:active {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;

    margin: 0 !important;
    padding: 0 22px !important;
    overflow: hidden !important;

    color: #b9c5d8 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 17px !important;
    outline: 0 !important;
    box-shadow: none !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-shadow: none !important;

    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;

    transform: none !important;
    translate: none !important;
    scale: 1 !important;

    transition:
        color 180ms ease,
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease !important;
}

.ssjx-rmode2__segment::before,
.ssjx-rmode2__segment::after {
    content: none !important;
    display: none !important;
}

/* Approved active state: DARK navy, cyan keyline, soft glow. */
.ssjx-rmode2__segment.is-active,
.ssjx-rmode2__segment[aria-pressed="true"],
.ssjx-rmode2__segment.is-active:hover,
.ssjx-rmode2__segment[aria-pressed="true"]:hover,
.ssjx-rmode2__segment.is-active:focus-visible,
.ssjx-rmode2__segment[aria-pressed="true"]:focus-visible {
    color: #f4f8ff !important;
    background:
        radial-gradient(circle at 24% 28%, rgba(var(--rm-blue-soft), .16), transparent 40%),
        linear-gradient(145deg, rgba(13, 49, 83, .96), rgba(8, 29, 55, .99)) !important;
    border-color: rgba(var(--rm-blue), .92) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        inset 0 0 18px rgba(var(--rm-blue), .045),
        0 0 0 1px rgba(var(--rm-blue), .065),
        0 0 18px rgba(var(--rm-blue), .18) !important;
}

.ssjx-rmode2__segment:not(.is-active):not([aria-pressed="true"]):hover,
.ssjx-rmode2__segment:not(.is-active):not([aria-pressed="true"]):focus-visible {
    color: #e4eefc !important;
    background: rgba(var(--rm-blue), .045) !important;
    border-color: rgba(var(--rm-blue), .13) !important;
}

/* Text-drawn glyphs avoid every global SVG sizing rule. */
.ssjx-rmode2__glyph,
.ssjx-rmode2__glyph:hover,
.ssjx-rmode2__glyph:focus {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 25px !important;
    width: 25px !important;
    min-width: 25px !important;
    max-width: 25px !important;
    height: 25px !important;
    min-height: 25px !important;
    max-height: 25px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: currentColor !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 27px !important;
    font-weight: 400 !important;
    line-height: 25px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow: none !important;
    transform: none !important;
}

.ssjx-rmode2__glyph--sun {
    font-size: 25px !important;
}

.ssjx-rmode2__segment.is-active .ssjx-rmode2__glyph,
.ssjx-rmode2__segment[aria-pressed="true"] .ssjx-rmode2__glyph {
    color: #a9f0ff !important;
    text-shadow: 0 0 9px rgba(113, 223, 255, .34) !important;
}

.ssjx-rmode2__label {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font: inherit !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Toolbar version */
.ssjx-rmode2--toolbar {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    flex: 0 0 300px !important;
}

.ssjx-rmode2--toolbar .ssjx-rmode2__segment {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 17px !important;
    font-size: 15px !important;
    border-radius: 15px !important;
}

.ssjx-rmode2--toolbar .ssjx-rmode2__glyph {
    flex-basis: 21px !important;
    width: 21px !important;
    min-width: 21px !important;
    max-width: 21px !important;
    height: 21px !important;
    min-height: 21px !important;
    max-height: 21px !important;
    font-size: 23px !important;
    line-height: 21px !important;
}

/* Reading-surface card version */
.ssjx-rmode2--panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 12px !important;
}

/* Keep selector visually dark even when the reading CANVAS becomes light. */
.ssjx__detail-canvas[data-ssjx-reading="light"] .ssjx-rmode2 {
    background:
        radial-gradient(circle at 50% 115%, rgba(var(--rm-blue), .055), transparent 52%),
        linear-gradient(180deg, rgba(7, 17, 34, .98), rgba(3, 10, 23, .99)) !important;
    border-color: rgba(128, 165, 209, .28) !important;
}

/* Tablet */
@media (max-width: 980px) {
    .ssjx-rmode2--toolbar {
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
        flex-basis: 250px !important;
        padding: 6px !important;
        border-radius: 21px !important;
    }

    .ssjx-rmode2--toolbar::before {
        inset: 5px !important;
        border-radius: 15px !important;
    }

    .ssjx-rmode2--toolbar .ssjx-rmode2__segment {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding: 0 12px !important;
        gap: 7px !important;
        font-size: 14px !important;
        border-radius: 14px !important;
    }
}

/* Mobile — still ONE compact horizontal Node-style control. */
@media (max-width: 780px) {
    .ssjx-rmode2--toolbar,
    .ssjx-rmode2--panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex-basis: auto !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 6px !important;
        border-radius: 19px !important;
    }

    .ssjx-rmode2--toolbar::before,
    .ssjx-rmode2--panel::before {
        inset: 5px !important;
        border-radius: 14px !important;
    }

    .ssjx-rmode2__segment,
    .ssjx-rmode2--toolbar .ssjx-rmode2__segment,
    .ssjx-rmode2--panel .ssjx-rmode2__segment {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        padding: 0 10px !important;
        gap: 7px !important;
        font-size: 14px !important;
        border-radius: 14px !important;
    }

    .ssjx-rmode2__glyph,
    .ssjx-rmode2--toolbar .ssjx-rmode2__glyph {
        flex-basis: 19px !important;
        width: 19px !important;
        min-width: 19px !important;
        max-width: 19px !important;
        height: 19px !important;
        min-height: 19px !important;
        max-height: 19px !important;
        font-size: 21px !important;
        line-height: 19px !important;
    }
}

@media (max-width: 420px) {
    .ssjx-rmode2__segment,
    .ssjx-rmode2--toolbar .ssjx-rmode2__segment,
    .ssjx-rmode2--panel .ssjx-rmode2__segment {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding: 0 8px !important;
        gap: 6px !important;
        font-size: 13px !important;
    }
}


/* =========================================================
   SIMME EXPLORE SYMSOUL V2.21 — GLOBAL HEADER CLEARANCE FIX
   18 AUGUST 2026

   Keeps the genuine shared Simme header completely separate from Detail and
   Journey. The focused surface begins below the measured header with a clear
   visual gap, and its own toolbar remains the first visible row.
   ========================================================= */

html body.ssjx-has-modal .ssjx {
    --ssjx-modal-header-gap: clamp(18px, 1.25vw, 24px);
    --ssjx-modal-edge: clamp(12px, 2vw, 26px);
}

html body.ssjx-has-modal .ssjx .ssjx__modal {
    top: var(--ssjx-site-header-offset, 0px) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: var(--ssjx-modal-header-gap) var(--ssjx-modal-edge) var(--ssjx-modal-edge) !important;
    place-items: start center !important;
}

html body.ssjx-has-modal .ssjx .ssjx__detail-canvas,
html body.ssjx-has-modal .ssjx .ssjx__journey-panel {
    max-height: calc(100dvh - var(--ssjx-site-header-offset, 0px) - var(--ssjx-modal-header-gap) - var(--ssjx-modal-edge)) !important;
}

html body.ssjx-has-modal .ssjx .ssjx__detail-toolbar,
html body.ssjx-has-modal .ssjx .ssjx__journey-toolbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
}

@media (max-width: 720px) {
    html body.ssjx-has-modal .ssjx {
        --ssjx-modal-header-gap: 12px;
        --ssjx-modal-edge: 7px;
    }
}



/* =========================================================
   SIMME EXPLORE SYMSOUL V2.22 — MOUNTED HEADER TOP-GAP FIX
   18 AUGUST 2026

   Do not trust body.admin-bar when the Explorer temporarily mounts the shared
   header directly under <body>. WordPress/the front-end can retain that class
   while #wpadminbar itself is hidden. JavaScript writes the measured visible
   admin-toolbar bottom edge to --ssjx-mounted-header-top; otherwise this is 0.
   This prevents the underlying homepage from appearing above the Simme header.
   ========================================================= */

html body > .simme-global-header.ssjx-modal-header-mounted,
html body > .simme-global-header.ssjx-modal-header-mounted:hover,
html body.admin-bar > .simme-global-header.ssjx-modal-header-mounted,
html body.admin-bar > .simme-global-header.ssjx-modal-header-mounted:hover {
    top: var(--ssjx-mounted-header-top, 0px) !important;
}

/* =========================================================
   LORD DANCER EP V17 — PLAYER RANGE + ACTIVE CARD EQ RESTORE
   19 AUGUST 2026

   Purpose:
   - Restore the approved neon pink/blue scrub/progress control.
   - Restore the approved neon pink/blue volume control.
   - Protect both range controls from later theme/browser input styling.
   - Restore the animated mini equaliser on the currently playing track card.
   - No layout, player behaviour, ticket geometry, artwork or access changes.
   ========================================================= */

/* ---------- Range-control hard reset: EP only ---------- */
html.ld-ep-page-active .ldep-app .ldep-timeline input[data-ldep-progress],
html.ld-ep-page-active .ldep-app .ldep-volume-panel input[data-ldep-volume],
body.ld-ep-page-active .ldep-app .ldep-timeline input[data-ldep-progress],
body.ld-ep-page-active .ldep-app .ldep-volume-panel input[data-ldep-volume] {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    accent-color: #ff42c6 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* WebKit / Blink: Chrome, Edge, Safari, iOS Safari. */
html.ld-ep-page-active .ldep-app input[data-ldep-progress]::-webkit-slider-runnable-track,
html.ld-ep-page-active .ldep-app input[data-ldep-volume]::-webkit-slider-runnable-track,
body.ld-ep-page-active .ldep-app input[data-ldep-progress]::-webkit-slider-runnable-track,
body.ld-ep-page-active .ldep-app input[data-ldep-volume]::-webkit-slider-runnable-track {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #ff42c6 0%, #d54dff 56%, #35c8ff 100%) !important;
    box-shadow:
        0 0 8px rgba(255,66,198,.34),
        0 0 6px rgba(53,200,255,.14) !important;
}

html.ld-ep-page-active .ldep-app input[data-ldep-progress]::-webkit-slider-thumb,
html.ld-ep-page-active .ldep-app input[data-ldep-volume]::-webkit-slider-thumb,
body.ld-ep-page-active .ldep-app input[data-ldep-progress]::-webkit-slider-thumb,
body.ld-ep-page-active .ldep-app input[data-ldep-volume]::-webkit-slider-thumb {
    box-sizing: border-box !important;
    width: 14px !important;
    min-width: 14px !important;
    height: 14px !important;
    min-height: 14px !important;
    margin: -5px 0 0 !important;
    padding: 0 !important;
    border: 2px solid rgba(255,255,255,.82) !important;
    border-radius: 50% !important;
    outline: 0 !important;
    background: #ff7bd9 !important;
    background-color: #ff7bd9 !important;
    background-image: none !important;
    box-shadow:
        0 0 0 1px rgba(255,66,198,.22),
        0 0 12px rgba(255,66,198,.9),
        0 0 18px rgba(53,200,255,.16) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Firefox. */
html.ld-ep-page-active .ldep-app input[data-ldep-progress]::-moz-range-track,
html.ld-ep-page-active .ldep-app input[data-ldep-volume]::-moz-range-track,
body.ld-ep-page-active .ldep-app input[data-ldep-progress]::-moz-range-track,
body.ld-ep-page-active .ldep-app input[data-ldep-volume]::-moz-range-track {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 4px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #ff42c6 0%, #d54dff 56%, #35c8ff 100%) !important;
    box-shadow:
        0 0 8px rgba(255,66,198,.34),
        0 0 6px rgba(53,200,255,.14) !important;
}

html.ld-ep-page-active .ldep-app input[data-ldep-progress]::-moz-range-progress,
html.ld-ep-page-active .ldep-app input[data-ldep-volume]::-moz-range-progress,
body.ld-ep-page-active .ldep-app input[data-ldep-progress]::-moz-range-progress,
body.ld-ep-page-active .ldep-app input[data-ldep-volume]::-moz-range-progress {
    height: 4px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #ff42c6 0%, #d54dff 62%, #35c8ff 100%) !important;
    box-shadow: 0 0 8px rgba(255,66,198,.28) !important;
}

html.ld-ep-page-active .ldep-app input[data-ldep-progress]::-moz-range-thumb,
html.ld-ep-page-active .ldep-app input[data-ldep-volume]::-moz-range-thumb,
body.ld-ep-page-active .ldep-app input[data-ldep-progress]::-moz-range-thumb,
body.ld-ep-page-active .ldep-app input[data-ldep-volume]::-moz-range-thumb {
    box-sizing: border-box !important;
    width: 14px !important;
    height: 14px !important;
    padding: 0 !important;
    border: 2px solid rgba(255,255,255,.82) !important;
    border-radius: 50% !important;
    background: #ff7bd9 !important;
    box-shadow:
        0 0 0 1px rgba(255,66,198,.22),
        0 0 12px rgba(255,66,198,.9),
        0 0 18px rgba(53,200,255,.16) !important;
}

/* Keyboard focus remains in-theme without introducing a white input well. */
html.ld-ep-page-active .ldep-app input[data-ldep-progress]:focus-visible,
html.ld-ep-page-active .ldep-app input[data-ldep-volume]:focus-visible,
body.ld-ep-page-active .ldep-app input[data-ldep-progress]:focus-visible,
body.ld-ep-page-active .ldep-app input[data-ldep-volume]:focus-visible {
    outline: 0 !important;
    filter:
        drop-shadow(0 0 5px rgba(255,66,198,.34))
        drop-shadow(0 0 5px rgba(53,200,255,.20)) !important;
}

/* Preserve the approved iPhone/iPad behaviour: hardware controls media volume. */
html.ld-ep-page-active .ldep-app.is-ios .ldep-volume-panel input[data-ldep-volume],
body.ld-ep-page-active .ldep-app.is-ios .ldep-volume-panel input[data-ldep-volume] {
    display: none !important;
}

/* ---------- Active track-card mini equaliser ---------- */
html.ld-ep-page-active .ldep-app .ldep-card-playing,
body.ld-ep-page-active .ldep-app .ldep-card-playing {
    position: absolute !important;
    z-index: 8 !important;
    right: 8px !important;
    bottom: 7px !important;
    display: none !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    gap: 2px !important;
    width: auto !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

html.ld-ep-page-active .ldep-app.is-playing .ldep-track-card.is-selected .ldep-card-playing,
body.ld-ep-page-active .ldep-app.is-playing .ldep-track-card.is-selected .ldep-card-playing {
    display: flex !important;
}

html.ld-ep-page-active .ldep-app .ldep-card-playing > i,
body.ld-ep-page-active .ldep-app .ldep-card-playing > i {
    box-sizing: border-box !important;
    position: relative !important;
    display: block !important;
    flex: 0 0 3px !important;
    width: 3px !important;
    min-width: 3px !important;
    max-width: 3px !important;
    height: 7px !important;
    min-height: 2px !important;
    max-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: linear-gradient(to top, #ff42c6 0%, #d54dff 54%, #35c8ff 100%) !important;
    box-shadow: 0 0 4px rgba(255,66,198,.38) !important;
    opacity: 1 !important;
    transform: none !important;
    animation: ldep-v17-mini-bars .7s ease-in-out infinite alternate !important;
}

html.ld-ep-page-active .ldep-app .ldep-card-playing > i:nth-child(2),
body.ld-ep-page-active .ldep-app .ldep-card-playing > i:nth-child(2) {
    animation-delay: -.42s !important;
}

html.ld-ep-page-active .ldep-app .ldep-card-playing > i:nth-child(3),
body.ld-ep-page-active .ldep-app .ldep-card-playing > i:nth-child(3) {
    animation-delay: -.18s !important;
}

html.ld-ep-page-active .ldep-app .ldep-card-playing > i:nth-child(4),
body.ld-ep-page-active .ldep-app .ldep-card-playing > i:nth-child(4) {
    animation-delay: -.56s !important;
}

@keyframes ldep-v17-mini-bars {
    0%   { height: 5px; }
    45%  { height: 12px; }
    100% { height: 18px; }
}

/* Stop the decorative card EQ when playback is paused/hidden. */
html.ld-ep-page-active .ldep-app:not(.is-playing) .ldep-card-playing,
body.ld-ep-page-active .ldep-app:not(.is-playing) .ldep-card-playing {
    display: none !important;
}

html.ld-ep-page-active .ldep-app.is-page-hidden .ldep-card-playing > i,
body.ld-ep-page-active .ldep-app.is-page-hidden .ldep-card-playing > i {
    animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
    html.ld-ep-page-active .ldep-app.is-playing .ldep-track-card.is-selected .ldep-card-playing > i,
    body.ld-ep-page-active .ldep-app.is-playing .ldep-track-card.is-selected .ldep-card-playing > i {
        animation: none !important;
        height: 11px !important;
    }
}


/* === LORD DANCER EP ACCESS MANAGER V5 — GOLDEN TICKET BUTTON SIZE / TRANSPARENCY FIX === */
/* 19 AUGUST 2026
   Scope: /lord_dancer_ep_access_manager/ only.
   Purpose:
   - keep One-Time-Code.webp at its intended ~original CTA size
   - preserve the WebP's transparent background
   - prevent WordPress/theme button fills, pseudo-elements or sizing rules
     from turning the ticket into a full-width coloured panel
   - no other Lord Dancer, Gallery, EP player or Simme styling is changed
*/
html body .ldm-app .ldm-form__submit-row {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

html body .ldm-app .ldm-primary,
html body .ldm-app .ldm-primary:hover,
html body .ldm-app .ldm-primary:focus,
html body .ldm-app .ldm-primary:focus-visible,
html body .ldm-app .ldm-primary:active {
    all: unset !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: inline-block !important;
    flex: 0 1 340px !important;
    width: min(340px, 100%) !important;
    max-width: 340px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: inherit !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
    transform: none !important;
}

html body .ldm-app .ldm-primary::before,
html body .ldm-app .ldm-primary::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
}

html body .ldm-app .ldm-primary img {
    display: block !important;
    width: 100% !important;
    max-width: 340px !important;
    height: auto !important;
    aspect-ratio: 500 / 128 !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter:
        drop-shadow(0 8px 18px rgba(0,0,0,.30))
        drop-shadow(0 0 11px rgba(233,189,82,.14)) !important;
    transform: none !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    transition: filter 200ms ease, transform 200ms ease !important;
}

html body .ldm-app .ldm-primary:hover img,
html body .ldm-app .ldm-primary:focus-visible img {
    filter:
        brightness(1.045)
        drop-shadow(0 9px 20px rgba(0,0,0,.32))
        drop-shadow(0 0 16px rgba(233,189,82,.24)) !important;
    transform: translateY(-1px) !important;
}

html body .ldm-app .ldm-primary:active img {
    filter:
        brightness(.99)
        drop-shadow(0 6px 14px rgba(0,0,0,.28))
        drop-shadow(0 0 10px rgba(233,189,82,.16)) !important;
    transform: translateY(1px) !important;
}

html body .ldm-app .ldm-primary:disabled {
    cursor: wait !important;
    opacity: .64 !important;
}

html body .ldm-app .ldm-primary:disabled img {
    transform: none !important;
    filter:
        grayscale(.06)
        brightness(.90)
        drop-shadow(0 6px 14px rgba(0,0,0,.26)) !important;
}

@media (max-width: 620px) {
    html body .ldm-app .ldm-primary,
    html body .ldm-app .ldm-primary:hover,
    html body .ldm-app .ldm-primary:focus,
    html body .ldm-app .ldm-primary:focus-visible,
    html body .ldm-app .ldm-primary:active {
        flex-basis: auto !important;
        width: min(340px, 92vw) !important;
        max-width: 340px !important;
    }

    html body .ldm-app .ldm-primary img {
        max-width: 100% !important;
    }
}

/* === LORD DANCER EP ACCESS MANAGER V6 — CACHE-PROOF GOLDEN TICKET ===
   19 AUGUST 2026
   The golden ticket image is now embedded directly in the Access Manager
   snippet as the exact transparent WebP asset. This prevents an older cached
   version of One-Time-Code.webp from being displayed by a browser/CDN.
   No additional visual CSS rules are required here; the V21 scoped sizing
   and transparency rules immediately above remain the active rules.
*/


/* === LORD DANCER EP ACCESS MANAGER — GOLDEN TICKET FINAL FIX ===
   The visible generate control is now the transparent ticket image itself.
   No visible <button> exists behind the ticket, so global/theme button colours
   cannot show through the WebP's transparent areas.
*/
html body .ldm-app .ldm-form__submit-row {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

html body .ldm-app .ldm-ticket-action,
html body .ldm-app .ldm-ticket-action:hover,
html body .ldm-app .ldm-ticket-action:focus,
html body .ldm-app .ldm-ticket-action:focus-visible,
html body .ldm-app .ldm-ticket-action:active {
    display: block !important;
    flex: 0 1 340px !important;
    width: min(340px, 100%) !important;
    max-width: 340px !important;
    height: auto !important;
    aspect-ratio: 500 / 128 !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

html body .ldm-app .ldm-ticket-action:hover,
html body .ldm-app .ldm-ticket-action:focus-visible {
    filter:
        brightness(1.045)
        drop-shadow(0 9px 20px rgba(0,0,0,.32))
        drop-shadow(0 0 16px rgba(233,189,82,.24)) !important;
    transform: translateY(-1px) !important;
}

html body .ldm-app .ldm-ticket-action:focus-visible {
    outline: 1px solid rgba(255,217,120,.72) !important;
    outline-offset: 5px !important;
}

html body .ldm-app .ldm-ticket-action:active {
    transform: translateY(1px) !important;
}

html body .ldm-app .ldm-ticket-action.is-busy {
    opacity: .64 !important;
    cursor: wait !important;
    transform: none !important;
}

html body .ldm-app .ldm-hidden-submit {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 620px) {
    html body .ldm-app .ldm-ticket-action {
        flex-basis: auto !important;
        width: min(340px, 92vw) !important;
        max-width: 340px !important;
    }
}


/* === LORD DANCER EP ACCESS MANAGER — SMALLER GOLDEN TICKET CTA ===
   Ticket reduced to a smaller CTA size by request.
*/


/* === LORD DANCER EP ACCESS MANAGER — THEMED CONFIRMATION MODAL ===
   Replaces browser-native confirm() boxes for Isolation, Restore and Revoke.
   Scope: .ldm-confirm only. No Gallery, EP player or other Simme styling changed.
*/
.ldm-confirm{
    position:fixed;
    z-index:1000004;
    inset:0;
    display:grid;
    place-items:center;
    padding:20px;
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
}
.ldm-confirm.is-open{opacity:1;pointer-events:auto}
.ldm-confirm__backdrop{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 18% 18%,rgba(255,66,198,.12),transparent 34%),
        radial-gradient(circle at 84% 78%,rgba(53,200,255,.10),transparent 34%),
        rgba(0,2,7,.78);
    -webkit-backdrop-filter:blur(9px) saturate(112%);
    backdrop-filter:blur(9px) saturate(112%);
}
.ldm-confirm__panel{
    --ldm-confirm-accent:#e9bd52;
    --ldm-confirm-accent-rgb:233,189,82;
    position:relative;
    width:min(560px,calc(100vw - 32px));
    overflow:hidden;
    color:#f7f4f8;
    background:
        linear-gradient(135deg,rgba(255,255,255,.025),transparent 30%),
        radial-gradient(circle at 0 0,rgba(var(--ldm-confirm-accent-rgb),.10),transparent 38%),
        radial-gradient(circle at 100% 100%,rgba(53,200,255,.065),transparent 34%),
        #050810;
    border:1px solid rgba(var(--ldm-confirm-accent-rgb),.52);
    border-radius:24px;
    box-shadow:0 30px 90px rgba(0,0,0,.68),0 0 34px rgba(var(--ldm-confirm-accent-rgb),.12),inset 0 1px 0 rgba(255,255,255,.055);
    transform:translateY(14px) scale(.975);
    transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
.ldm-confirm.is-open .ldm-confirm__panel{transform:none}
.ldm-confirm__panel:before{
    content:"";
    position:absolute;
    z-index:0;
    top:0;
    left:8%;
    right:8%;
    height:1px;
    background:linear-gradient(90deg,transparent,#ff42c6 22%,#e9bd52 50%,#35c8ff 78%,transparent);
    box-shadow:0 0 13px rgba(var(--ldm-confirm-accent-rgb),.5);
}
.ldm-confirm__panel--restore{--ldm-confirm-accent:#6bddff;--ldm-confirm-accent-rgb:107,221,255}
.ldm-confirm__panel--revoke{--ldm-confirm-accent:#ff71cf;--ldm-confirm-accent-rgb:255,113,207}
.ldm-confirm__top{position:relative;z-index:1;display:flex;align-items:center;gap:14px;padding:22px 24px 12px}
.ldm-confirm__crest{
    position:relative;
    flex:0 0 50px;
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    color:#120d02;
    background:linear-gradient(145deg,#fff0a8 0%,#e9bd52 44%,#a76a17 100%);
    border:1px solid rgba(255,240,168,.9);
    clip-path:polygon(50% 0,92% 23%,92% 77%,50% 100%,8% 77%,8% 23%);
    filter:drop-shadow(0 0 10px rgba(var(--ldm-confirm-accent-rgb),.24));
    font:950 13px/1 Arial,sans-serif;
    letter-spacing:.06em;
}
.ldm-confirm__crest:before{content:"";position:absolute;inset:5px;clip-path:inherit;border:1px solid rgba(22,14,1,.34)}
.ldm-confirm__heading{min-width:0}
.ldm-confirm__eyebrow{display:block;margin-bottom:5px;color:var(--ldm-confirm-accent);font-size:9px;font-weight:950;letter-spacing:.18em;text-transform:uppercase}
.ldm-confirm__title{margin:0;color:#fff;font-size:clamp(21px,3vw,29px);line-height:1.08;letter-spacing:-.025em}
.ldm-confirm__body{position:relative;z-index:1;padding:5px 24px 22px}
.ldm-confirm__message{margin:0;color:#b7b5be;font-size:13px;line-height:1.58}
.ldm-confirm__note{display:flex;align-items:flex-start;gap:9px;margin-top:16px;padding:11px 12px;color:#969aa5;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.075);border-radius:13px;font-size:10px;line-height:1.45}
.ldm-confirm__note:before{content:"";flex:0 0 7px;width:7px;height:7px;margin-top:4px;border-radius:50%;background:var(--ldm-confirm-accent);box-shadow:0 0 10px var(--ldm-confirm-accent)}
.ldm-confirm__actions{position:relative;z-index:1;display:flex;justify-content:flex-end;gap:9px;padding:17px 24px 22px;border-top:1px solid rgba(255,255,255,.075);background:rgba(0,0,0,.14)}
.ldm-confirm__button{min-height:43px;padding:0 16px;border-radius:12px;font-size:9px;font-weight:950;letter-spacing:.09em;cursor:pointer;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease,border-color .16s ease;-webkit-tap-highlight-color:transparent}
.ldm-confirm__button--cancel{color:#c9cbd2;background:#080b12;border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.ldm-confirm__button--confirm{color:#130e02;background:linear-gradient(145deg,#fff0ad,#e9bd52 52%,#b9791e);border:1px solid rgba(255,239,168,.82);box-shadow:0 0 20px rgba(var(--ldm-confirm-accent-rgb),.14),inset 0 1px 0 rgba(255,255,255,.45)}
.ldm-confirm__panel--restore .ldm-confirm__button--confirm{color:#031016;background:linear-gradient(145deg,#d9f7ff,#6bddff 52%,#2b93c7);border-color:rgba(205,246,255,.86)}
.ldm-confirm__panel--revoke .ldm-confirm__button--confirm{color:#18040f;background:linear-gradient(145deg,#ffd1ed,#ff71cf 52%,#b12b85);border-color:rgba(255,211,237,.82)}
.ldm-confirm__button:hover,.ldm-confirm__button:focus-visible{filter:brightness(1.09);transform:translateY(-1px)}
.ldm-confirm__button:focus-visible{outline:2px solid #35c8ff;outline-offset:2px}
.ldm-confirm__button:active{transform:translateY(1px)}
body.ldm-confirm-open{overflow:hidden!important}
@media(max-width:560px){
    .ldm-confirm{padding:12px}
    .ldm-confirm__panel{border-radius:20px}
    .ldm-confirm__top{padding:19px 18px 10px}
    .ldm-confirm__body{padding:5px 18px 18px}
    .ldm-confirm__actions{padding:14px 18px 18px;flex-direction:column-reverse}
    .ldm-confirm__button{width:100%}
    .ldm-confirm__crest{flex-basis:44px;width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
    .ldm-confirm,.ldm-confirm__panel,.ldm-confirm__button{transition:none!important}
}



/* === SIMME EXPLORE SYMSOUL V2.42 CRITICAL ADDITIONS — NEW JOURNEY PDF PREVIEW === */
/* =========================================================
   SIMME EXPLORE SYMSOUL V2.42
   20 AUGUST 2026

   Mirrors the new downloadable Journey PDF:
   - Journey-Cover-2.webp remains the clean background artwork
   - Simme character and white SymSoul brand are overlaid separately
   - My / SymSoul / Journey wording follows the approved cover hierarchy
   - interior preview becomes dark/cosmic rather than a generic white sheet
   ========================================================= */

html body .ssjx .ssjx__journey-pdf-cover {
    position: relative !important;
    width: 120px !important;
    aspect-ratio: 1200 / 1754 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #fff !important;
    background-color: #020817 !important;
    background-image: url("https://www.simme.co.uk/wp-content/uploads/2026/08/Journey-Cover-2.webp") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    border: 1px solid rgba(89,150,255,.28) !important;
    border-radius: 6px !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.38), 0 0 18px rgba(50,139,255,.08) !important;
}

html body .ssjx .ssjx__journey-pdf-cover::before,
html body .ssjx .ssjx__journey-pdf-cover::after {
    display: none !important;
    content: none !important;
}

html body .ssjx .ssjx__journey-pdf-brand {
    position: absolute !important;
    z-index: 4 !important;
    top: 11px !important;
    left: 13px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body .ssjx .ssjx__journey-pdf-brand > img {
    display: block !important;
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0 5px rgba(33,193,255,.18)) !important;
}

html body .ssjx .ssjx__journey-pdf-brand > span {
    display: block !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 7.15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -.01em !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.62) !important;
}

html body .ssjx .ssjx__journey-pdf-title {
    position: absolute !important;
    z-index: 4 !important;
    top: 67px !important;
    left: 14px !important;
    display: block !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: .94 !important;
    letter-spacing: -.045em !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.72) !important;
}

html body .ssjx .ssjx__journey-pdf-title > span,
html body .ssjx .ssjx__journey-pdf-title > em {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-style: normal !important;
    color: inherit !important;
}

html body .ssjx .ssjx__journey-pdf-title > em {
    color: #67ff39 !important;
}

html body .ssjx .ssjx__journey-pdf-cover > small {
    position: absolute !important;
    z-index: 4 !important;
    top: 119px !important;
    left: 14px !important;
    bottom: auto !important;
    display: block !important;
    max-width: 70px !important;
    margin: 0 !important;
    color: #e3e8f2 !important;
    font-size: 5px !important;
    line-height: 1.3 !important;
    text-shadow: 0 1px 5px rgba(0,0,0,.76) !important;
}

html body .ssjx .ssjx__journey-pdf-page {
    width: 132px !important;
    aspect-ratio: .707 !important;
    padding: 14px 12px !important;
    color: #eef5ff !important;
    background:
        radial-gradient(circle at 82% 12%, rgba(93,230,67,.10), transparent 26%),
        radial-gradient(circle at 18% 88%, rgba(68,144,255,.08), transparent 30%),
        #050b19 !important;
    border: 1px solid rgba(87,151,255,.24) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.32) !important;
}

html body .ssjx .ssjx__journey-pdf-page > span {
    color: #fff !important;
    font-size: 7px !important;
    font-weight: 800 !important;
}

html body .ssjx .ssjx__journey-pdf-page > i {
    height: 4px !important;
    margin-top: 8px !important;
    background: rgba(111,154,211,.20) !important;
}

html body .ssjx .ssjx__journey-pdf-page > i:nth-of-type(1) { background: rgba(103,255,57,.42) !important; }
html body .ssjx .ssjx__journey-pdf-page > i:nth-of-type(2) { background: rgba(68,174,255,.35) !important; }
html body .ssjx .ssjx__journey-pdf-page > i:nth-of-type(3) { background: rgba(255,89,205,.30) !important; }
html body .ssjx .ssjx__journey-pdf-page > i:nth-of-type(4) { background: rgba(111,154,211,.18) !important; }

html body .ssjx .ssjx__journey-pdf-page > strong {
    display: block !important;
    margin-top: 18px !important;
    color: #f1ca63 !important;
    font-size: 7px !important;
    font-weight: 800 !important;
}

html body .ssjx .ssjx__journey-pdf-page > b {
    height: 18px !important;
    margin-top: 8px !important;
    background: linear-gradient(135deg, rgba(241,202,99,.12), rgba(22,40,70,.72)) !important;
    border: 1px solid rgba(241,202,99,.22) !important;
}


/* === SIMME EXPLORE SYMSOUL V2.46 CRITICAL ADDITIONS — TIMED DESTRUCTIVE GATE === */
/* =========================================================
   SIMME EXPLORE SYMSOUL V2.46
   20 AUGUST 2026

   Restores the protected Clear Journey interaction:
   - clearly visible caution styling in its normal state
   - first click arms a five-second "Are you sure?" gate
   - second click inside that window performs the destructive action
   - the gate automatically cancels when the timer expires or focus moves away
   ========================================================= */

html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"],
html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"]:hover,
html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"]:focus,
html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"]:focus-visible,
html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"]:active {
    position: relative !important;
    isolation: isolate !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 122px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    overflow: hidden !important;
    color: #ffc4d7 !important;
    background: linear-gradient(180deg, rgba(77,24,47,.54), rgba(35,15,29,.76)) !important;
    border: 1px solid rgba(255,104,157,.60) !important;
    border-radius: 12px !important;
    outline: 0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 0 15px rgba(255,83,145,.08) !important;
    font-size: 11px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    transition:
        color 160ms ease,
        background 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease !important;
}

html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"]:hover,
html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"]:focus-visible {
    color: #ffe6ef !important;
    background: linear-gradient(180deg, rgba(98,28,58,.66), rgba(45,17,36,.86)) !important;
    border-color: rgba(255,126,171,.88) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 0 18px rgba(255,83,145,.15) !important;
}

html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"].is-confirming,
html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"][data-ssjx-confirming="true"] {
    color: #fff5f8 !important;
    background: linear-gradient(180deg, rgba(198,43,93,.94), rgba(127,24,65,.96)) !important;
    border-color: rgba(255,154,187,.98) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 0 0 2px rgba(255,85,143,.08),
        0 0 22px rgba(255,62,127,.24) !important;
}

html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"].is-confirming::after,
html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"][data-ssjx-confirming="true"]::after {
    position: absolute !important;
    z-index: 2 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 3px !important;
    content: "" !important;
    background: linear-gradient(90deg, #ffd5e4, #ff83b0, #ff4f8d) !important;
    transform-origin: left center !important;
    animation: ssjx-clear-gate-v246 5s linear forwards !important;
    pointer-events: none !important;
}

html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"]:disabled {
    color: #6f7586 !important;
    background: rgba(24,27,38,.52) !important;
    border-color: rgba(151,161,194,.18) !important;
    box-shadow: none !important;
    cursor: default !important;
    opacity: .62 !important;
}

@keyframes ssjx-clear-gate-v246 {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

@media (max-width: 520px) {
    html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"],
    html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"]:hover,
    html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"]:focus,
    html body .ssjx .ssjx__journey-section-head > button[data-ssjx-action="clear-journey"]:active {
        min-width: 112px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 0 12px !important;
        font-size: 10.5px !important;
    }
}

/* === SIMME EXPLORE SYMSOUL V2.52 FINAL CASCADE LOCK — SAVED HEARTS === */
/*
   This block intentionally sits at the END of the master stylesheet.
   V2.51 placed the restored-heart rules at the start of the file, where
   later legacy rules could still win. V2.52 makes pink the final canonical
   saved-state language and mirrors the same lock inside the Code Snippet's
   later-rendered inline stylesheet.
*/
html body .ssjx {
    --ssjx-saved-heart-pink: #ed76d5;
    --ssjx-saved-heart-pink-rgb: 237, 118, 213;
}

/* Saved category-card heart: pink button treatment + solid pink heart. */
html body .ssjx .ssjx__card-save.is-saved,
html body .ssjx .ssjx__card-save[aria-pressed="true"] {
    color: #ed76d5 !important;
    background: rgba(237, 118, 213, .14) !important;
    border-color: rgba(237, 118, 213, .84) !important;
    box-shadow: inset 0 0 11px rgba(237, 118, 213, .09), 0 0 15px rgba(237, 118, 213, .20) !important;
    opacity: 1 !important;
}
html body .ssjx .ssjx__card-save.is-saved svg,
html body .ssjx .ssjx__card-save[aria-pressed="true"] svg,
html body .ssjx .ssjx__card-save.is-saved svg path,
html body .ssjx .ssjx__card-save[aria-pressed="true"] svg path {
    color: #ed76d5 !important;
    fill: #ed76d5 !important;
    stroke: #ed76d5 !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 5px rgba(237, 118, 213, .36)) !important;
}

/* Preview/detail save controls: the control keeps its category styling,
   but an ACTIVE/SAVED heart is always solid pink. */
html body .ssjx [data-ssjx-action="preview-save"].is-saved svg,
html body .ssjx [data-ssjx-action="preview-save"][data-saved="true"] svg,
html body .ssjx [data-ssjx-action="preview-save"][aria-pressed="true"] svg,
html body .ssjx [data-ssjx-action="detail-save"].is-saved svg,
html body .ssjx [data-ssjx-action="detail-save"][data-saved="true"] svg,
html body .ssjx [data-ssjx-action="detail-save"][aria-pressed="true"] svg,
html body .ssjx [data-ssjx-action="preview-save"].is-saved svg path,
html body .ssjx [data-ssjx-action="preview-save"][data-saved="true"] svg path,
html body .ssjx [data-ssjx-action="preview-save"][aria-pressed="true"] svg path,
html body .ssjx [data-ssjx-action="detail-save"].is-saved svg path,
html body .ssjx [data-ssjx-action="detail-save"][data-saved="true"] svg path,
html body .ssjx [data-ssjx-action="detail-save"][aria-pressed="true"] svg path {
    color: #ed76d5 !important;
    fill: #ed76d5 !important;
    stroke: #ed76d5 !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 6px rgba(237, 118, 213, .42)) !important;
}

/* Compact detail-toolbar save button: saved state gets the pink border/glow. */
html body .ssjx .ssjx__detail-toolbar [data-ssjx-action="detail-save"].is-saved,
html body .ssjx .ssjx__detail-toolbar [data-ssjx-action="detail-save"][data-saved="true"],
html body .ssjx .ssjx__detail-toolbar [data-ssjx-action="detail-save"][aria-pressed="true"] {
    color: #ed76d5 !important;
    border-color: rgba(237, 118, 213, .76) !important;
    background: rgba(237, 118, 213, .08) !important;
    box-shadow: 0 0 15px rgba(237, 118, 213, .15) !important;
    opacity: 1 !important;
}

/* Journey count hearts. The mobile/floating bar is INSIDE .ssjx in the
   current markup, so target that real DOM relationship rather than the old
   body > .ssjx__mobile-bar selector. */
html body .ssjx .ssjx__mobile-bar[data-ssjx-sticky-nav] > button > b[data-ssjx-mobile-count],
html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] > button > b[data-ssjx-mobile-count] {
    color: #25061d !important;
}
html body .ssjx .ssjx__mobile-bar[data-ssjx-sticky-nav] > button > b[data-ssjx-mobile-count]::before,
html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] > button > b[data-ssjx-mobile-count]::before {
    background: linear-gradient(145deg, #ffd8f3 0%, #f493df 38%, #ed76d5 100%) !important;
    filter: drop-shadow(0 0 1px rgba(255, 235, 249, .94)) drop-shadow(0 0 9px rgba(237, 118, 213, .45)) !important;
}

/* Defensive legacy class, if an older Journey launch instance is still in DOM. */
html body .ssjx .ssjx__journey-count {
    color: #25061d !important;
    background: linear-gradient(145deg, #ffd8f3 0%, #f493df 38%, #ed76d5 100%) !important;
    border-color: rgba(255, 216, 243, .76) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .50), 0 0 18px rgba(237, 118, 213, .32) !important;
}
/* === END V2.52 FINAL CASCADE LOCK === */

/* === SIMME EXPLORE SYMSOUL V2.56 FINAL LOCK — YOUR JOURNEY COUNT HEART IS PINK === */
/*
   21 AUGUST 2026

   The floating Your Journey dock is portalled from inside .ssjx to be a
   direct child of <body> after initial render. Older V2.27 green count-heart
   rules correctly target that portalled body-level element, while the V2.52
   final pink lock accidentally targeted only the pre-portal .ssjx descendant.

   This final selector deliberately covers BOTH DOM states and sits after every
   legacy Journey-count rule. Pink remains the single saved/favourite language.
*/
html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] > button > b[data-ssjx-mobile-count],
html body > .ssjx__mobile-bar[data-ssjx-sticky-nav][data-ssjx-portalled="true"] > button > b[data-ssjx-mobile-count],
html body .ssjx .ssjx__mobile-bar[data-ssjx-sticky-nav] > button > b[data-ssjx-mobile-count],
html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] > button > b[data-ssjx-mobile-count] {
    color: #25061d !important;
}

html body > .ssjx__mobile-bar[data-ssjx-sticky-nav] > button > b[data-ssjx-mobile-count]::before,
html body > .ssjx__mobile-bar[data-ssjx-sticky-nav][data-ssjx-portalled="true"] > button > b[data-ssjx-mobile-count]::before,
html body .ssjx .ssjx__mobile-bar[data-ssjx-sticky-nav] > button > b[data-ssjx-mobile-count]::before,
html body .ssjx .ssjx__preview-journey-actions[data-ssjx-preview-journey-actions] > button > b[data-ssjx-mobile-count]::before {
    background: #ed76d5 !important;
    background-color: #ed76d5 !important;
    background-image: none !important;
    filter:
        drop-shadow(0 0 1px rgba(255, 235, 249, .96))
        drop-shadow(0 0 9px rgba(237, 118, 213, .48)) !important;
}
/* === END V2.56 FINAL YOUR JOURNEY PINK HEART LOCK === */



/* === SIMME EXPLORE SYMSOUL V2.57 FINAL LOCK — SEE YOUR JOURNEY EVERYWHERE IN EXPLORE === */
/*
   The same body-level Journey dock follows the user through the Explore
   overview and focused Detail surface. It is hidden only while Preview uses
   its integrated Journey control, or while My SymSoul Journey itself is open.
*/
html body.ssjx-has-detail:not(.ssjx-has-journey) > .ssjx__mobile-bar[data-ssjx-sticky-nav].is-visible,
html body.ssjx-has-detail:not(.ssjx-has-journey) > .ssjx__mobile-bar[data-ssjx-sticky-nav][data-ssjx-portalled="true"].is-visible {
    z-index: 2147483200 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(-50%, 0, 0) scale(1) !important;
    transition-delay: 0s !important;
}

html body.ssjx-has-journey > .ssjx__mobile-bar[data-ssjx-sticky-nav],
html body.ssjx-has-journey > .ssjx__mobile-bar[data-ssjx-sticky-nav][data-ssjx-portalled="true"] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(-50%, 16px, 0) scale(.97) !important;
}
/* === END V2.57 SEE YOUR JOURNEY ACCESS LOCK === */