/* SynX docs-template chrome. Generated 2026-09-15 from the four inline <style> blocks the
   template used to inline on every page (i18n switcher, sidebar, interlinks, conversion).
   Cached once instead of shipped ~17 KB per page view. Source of truth stays in the
   PHP includes; they skip inline emission when SYNX_EXTERNAL_CHROME is defined. */
.synx-langsel{position:relative;z-index:9000;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.synx-langsel--top-left{position:fixed;top:12px;left:12px}
/* Brand band. --top-left is FIXED at 12/12, which on a page whose header opens
   with a 102x68 logo lands the pill squarely on top of the artwork. This variant
   is a real flex child of .header instead, dropped to the bottom of the flex
   line so it rides the empty band beside the tagline - open space on every
   width - and pushed clear of the wordmark by the left margin.
   The header does NOT grow: the flex line is sized by the 68px logo and this
   pill is ~28px, so it fits inside the height the header already had.
   margin-right:auto absorbs the free space that justify-content:space-between
   would otherwise put in front of it, so it packs toward the brand while the
   user-panel stays pinned to the right edge. */
.synx-langsel--brand{position:relative;display:inline-flex;align-items:center;flex:0 0 auto;align-self:flex-end;margin:0 auto 3px 150px}
.synx-langsel--brand .synx-langsel__btn{padding:.3rem .62rem;font-size:.78rem;border-radius:8px}
.synx-langsel--brand .synx-langsel__menu{left:0;right:auto}
/* At 768px .header gains flex-wrap and .tagline becomes a full-width order:3
   row, so the band disappears: fall back to an inline flag beside the account
   control, which is what --panel does at the same size. */
@media (max-width:768px){.synx-langsel--brand{align-self:center;margin:0}.synx-langsel--brand .synx-langsel__cur{display:none}}
/* Forum user-panel: sits to the LEFT of Acceso/Registro. Dimensions are
   taken from .btn-login in css/shadowboard.css (8px vertical, .9em) so the
   three controls share one baseline and one height - the switcher reads as
   part of the set instead of floating above it. Muted until hover so it
   does not compete with the two red calls to action. */
.synx-langsel--panel{position:relative;display:inline-flex;align-items:stretch;align-self:stretch;flex:0 0 auto;order:-1}
.synx-langsel--panel .synx-langsel__btn{display:inline-flex;align-items:center;gap:8px;height:100%;box-sizing:border-box;background:transparent;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.6);padding:0 16px;font-size:.9em;letter-spacing:.3px;cursor:pointer;white-space:nowrap;transition:border-color .3s ease,color .3s ease,background .3s ease}
.synx-langsel--panel .synx-langsel__btn:hover,
.synx-langsel--panel .synx-langsel__btn[aria-expanded="true"]{border-color:var(--accent-primary,#ff0033);color:var(--accent-primary,#ff0033);background:rgba(255,0,51,.06)}
.synx-langsel--panel .synx-langsel__flag{font-size:1.05em;line-height:1}
.synx-langsel--panel .synx-langsel__caret{opacity:.55;font-size:.8em}
.synx-langsel--panel .synx-langsel__menu{right:0;left:auto;top:calc(100% + 8px);max-height:70vh}
@media (max-width:640px){.synx-langsel--panel .synx-langsel__cur{display:none}.synx-langsel--panel .synx-langsel__btn{padding:8px 10px}}
/* Timeline command bar. Sits inside .header-actions with the bell, mail and
   theme controls, so it scrolls with the header instead of floating over the
   page - a fixed overlay competed with the centred header and the cross
   behind it. Flag only; the header row is tight. */
.synx-langsel--header{position:relative;display:inline-flex;align-items:center;flex:0 0 auto}
.synx-langsel--header .synx-langsel__btn{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:10px;font-size:.78rem;line-height:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);color:rgba(232,232,242,.72);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.synx-langsel--header .synx-langsel__btn:hover,
.synx-langsel--header .synx-langsel__btn[aria-expanded="true"]{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.20);color:#fff}
.synx-langsel--header .synx-langsel__cur{display:none}
.synx-langsel--header .synx-langsel__caret{opacity:.5;font-size:.7em}
.synx-langsel--header .synx-langsel__menu{right:0;left:auto;top:calc(100% + 8px);max-height:70vh}
/* Feed column, directly above the Create Post composer. Kept OUT of
   .quantum-header: that header is a grid sized to its contents, so adding
   a control to it cramped the search box and wrapped the filter tabs onto
   a second line. Here it aligns to the composer's right edge and scrolls
   with the feed, touching neither the header nor the cross behind it. */
.feed-lang-bar{display:flex;justify-content:flex-end;margin:0 0 8px}
.synx-langsel--feed{position:relative;display:inline-flex;align-items:center;flex:0 0 auto}
.synx-langsel--feed .synx-langsel__btn{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:.75rem;line-height:1;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);color:rgba(232,232,242,.6);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.synx-langsel--feed .synx-langsel__btn:hover,
.synx-langsel--feed .synx-langsel__btn[aria-expanded="true"]{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#fff}
.synx-langsel--feed .synx-langsel__caret{opacity:.5;font-size:.7em}
.synx-langsel--feed .synx-langsel__menu{right:0;left:auto;top:calc(100% + 8px);max-height:70vh}
/* Pinned to the header avatar's top-right corner.
   position:absolute so it is OUT OF FLOW - the header is a content-sized
   grid, and any in-flow control there squeezes the search box and wraps
   the filter tabs. This way the header keeps its exact geometry and stays
   centred under the cross, and nothing sits above Create Post. */
.header-avatar-wrap{position:relative;display:inline-flex;align-items:center}
.synx-langsel--avatar{position:absolute;top:-9px;right:-6px;z-index:60}
.synx-langsel--avatar .synx-langsel__btn{display:inline-flex;align-items:center;gap:0;padding:2px 4px;border-radius:7px;line-height:1;background:rgba(8,16,20,.92);border:1px solid rgba(255,255,255,.16);color:rgba(232,232,242,.75);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.45);transition:border-color .2s,background .2s}
.synx-langsel--avatar .synx-langsel__btn:hover,
.synx-langsel--avatar .synx-langsel__btn[aria-expanded="true"]{background:rgba(12,24,30,.98);border-color:rgba(255,255,255,.34)}
.synx-langsel--avatar .synx-langsel__flag{font-size:.72rem;line-height:1}
.synx-langsel--avatar .synx-langsel__cur,
.synx-langsel--avatar .synx-langsel__caret{display:none}
.synx-langsel--avatar .synx-langsel__menu{right:0;left:auto;top:calc(100% + 8px);max-height:70vh}
.synx-langsel--nav{position:relative;display:inline-flex;align-items:center;margin-right:6px;flex:0 0 auto}
.synx-langsel--nav .synx-langsel__btn{padding:.3rem .5rem;font-size:.72em;letter-spacing:1.2px;text-transform:uppercase;font-family:var(--font-mono,monospace);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.synx-langsel--nav .synx-langsel__cur{display:none}
.synx-langsel--nav .synx-langsel__menu{right:0;left:auto;max-height:70vh}
.synx-langsel--footer{position:relative;display:inline-flex;align-items:center}
.synx-langsel--footer .synx-langsel__btn{padding:.32rem .6rem;font-size:.8rem;background:rgba(255,255,255,.05)}
.synx-langsel--footer .synx-langsel__menu{bottom:100%;top:auto;margin-bottom:6px;left:50%;right:auto;transform:translateX(-50%);max-height:60vh}
.synx-langsel--top-right{position:fixed;top:14px;right:16px;z-index:9999}
.synx-langsel--top-right .synx-langsel__menu{right:0;left:auto}
.synx-langsel--inline{position:relative;display:inline-flex;align-items:center;margin-right:.6rem;flex:0 0 auto}
.synx-langsel--inline .synx-langsel__btn{padding:.34rem .6rem;font-size:.8rem;background:rgba(255,255,255,.05)}
.synx-langsel--inline .synx-langsel__menu{left:0;right:auto;max-height:70vh}
.synx-langsel__btn{display:flex;align-items:center;gap:.45rem;padding:.4rem .7rem;border-radius:8px;cursor:pointer;
  background:rgba(10,10,15,.88);border:1px solid rgba(255,68,102,.28);color:#e8e8f2;font-size:.85rem;
  backdrop-filter:blur(6px);transition:border-color .18s,background .18s}
.synx-langsel__btn:hover{border-color:#ff4466;background:rgba(255,68,102,.14)}
.synx-langsel__caret{font-size:.7rem;opacity:.7}
.synx-langsel__flag{font-size:1.05em;line-height:1;margin-right:.15rem;font-family:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji","Twemoji Mozilla","EmojiOne Color","Android Emoji",sans-serif;font-variant-emoji:emoji}
.synx-langsel__menu{position:absolute;top:calc(100% + 6px);left:0;margin:0;padding:.3rem;list-style:none;
  max-height:60vh;overflow-y:auto;min-width:210px;border-radius:10px;
  background:rgba(8,8,12,.98);border:1px solid rgba(255,68,102,.25);box-shadow:0 18px 50px -18px rgba(0,0,0,.9)}
.synx-langsel__menu[hidden]{display:none}
.synx-langsel__menu a{display:block;padding:.42rem .7rem;border-radius:6px;color:#c9c9d6;text-decoration:none;font-size:.86rem}
.synx-langsel__menu a:hover{background:rgba(255,68,102,.16);color:#fff}
.synx-langsel__menu a.is-current{background:rgba(255,68,102,.24);color:#fff;font-weight:600}
@media (max-width:640px){.synx-langsel--top-left{top:8px;left:8px}.synx-langsel__cur{display:none}}

/* One entry that catches the light: gold and silver leaf with a ray
   travelling across the letterforms. Text-only, so it never repaints
   the sidebar around it. */
.synx-lightray{ position:relative; }
.synx-lightray .synx-lightray__t{
  background-image:linear-gradient(100deg,
    #b98b2e 0%, #f6dd8f 14%, #fffaf0 24%,
    #cfd6de 34%, #ffffff 44%, #e9c46a 56%,
    #f7e7b6 66%, #c0c8d2 78%, #f6dd8f 90%, #b98b2e 100%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:synx-ray 5.5s linear infinite;
  filter:drop-shadow(0 0 6px rgba(246,221,143,.45));
  font-weight:700; letter-spacing:.2px;
}
.synx-lightray .icon{
  filter:drop-shadow(0 0 6px rgba(246,221,143,.6));
  animation:synx-ray-glow 5.5s ease-in-out infinite;
}
@keyframes synx-ray{ 0%{background-position:180% 0} 100%{background-position:-80% 0} }
@keyframes synx-ray-glow{ 0%,100%{opacity:.75} 50%{opacity:1} }
.synx-lightray:hover .synx-lightray__t{ animation-duration:1.6s; }
@media (prefers-reduced-motion:reduce){
  .synx-lightray .synx-lightray__t,.synx-lightray .icon{ animation:none; }
  .synx-lightray .synx-lightray__t{ background-position:50% 0; }
}

.related-content.spiderweb-links {
        border-top: 1px solid rgba(255,0,51,0.15);
        padding: 2rem 0 1rem;
        margin: 3rem 0 1.5rem;
    }
    .related-content.spiderweb-links h3 {
        color: #707088;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 500;
        margin: 0 0 1rem;
    }
    .related-content.spiderweb-links .link-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .related-content.spiderweb-links .link-list li a {
        color: #ff4466;
        text-decoration: none;
        font-size: 0.88rem;
        font-weight: 500;
        padding: 5px 12px;
        border-radius: 6px;
        background: rgba(255,0,51,0.06);
        border: 1px solid transparent;
        transition: all 0.25s ease;
        display: inline-block;
    }
    .related-content.spiderweb-links .link-list li a:hover {
        background: rgba(255,0,51,0.12);
        border-color: rgba(255,0,51,0.25);
        color: #ff6680;
    }

/* Sticky CTA Bar */
.synx-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #0f0f0f 0%, #1a0a0a 100%);
    border-top: 1px solid rgba(220, 38, 38, 0.3);
    padding: 12px 20px;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

.synx-sticky-cta.visible {
    transform: translateY(0);
}

.sticky-cta-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.sticky-cta-text {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sticky-cta-icon {
    font-size: 1.5rem;
}

.sticky-cta-headline {
    font-weight: 600;
    color: #fff;
    font-size: 1rem;
}

.sticky-cta-subtext {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

.sticky-cta-button {
    flex-shrink: 0;
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    color: white;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.4);
    transition: all 0.2s ease;
}

.sticky-cta-button:hover {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(220, 38, 38, 0.6);
}

.sticky-cta-close {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px;
    line-height: 1;
}

.sticky-cta-close:hover {
    color: white;
}

/* Exit-Intent Popup */
.synx-exit-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
}

.synx-exit-popup.visible {
    display: flex;
    align-items: center;
    justify-content: center;
}

.exit-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
}

.exit-popup-modal {
    position: relative;
    background: linear-gradient(135deg, #0f0f0f 0%, #1a0505 100%);
    border: 1px solid rgba(220, 38, 38, 0.4);
    border-radius: 16px;
    max-width: 520px;
    width: 90%;
    padding: 32px;
    box-shadow: 0 0 60px rgba(220, 38, 38, 0.3);
    animation: popupSlide 0.3s ease;
}

@keyframes popupSlide {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.exit-popup-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.exit-popup-close:hover {
    background: rgba(220, 38, 38, 0.3);
    color: white;
}

.exit-popup-header {
    text-align: center;
    margin-bottom: 24px;
}

.exit-popup-warning {
    font-size: 3rem;
    display: block;
    margin-bottom: 12px;
}

.exit-popup-header h2 {
    font-size: 1.5rem;
    color: white;
    margin: 0;
    font-weight: 700;
}

.exit-popup-body {
    text-align: center;
}

.exit-popup-headline {
    font-size: 1.125rem;
    color: #dc2626;
    margin: 0 0 12px 0;
}

.exit-popup-text {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin: 0 0 24px 0;
}

.exit-popup-stats {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
    padding: 16px;
    background: rgba(220, 38, 38, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(220, 38, 38, 0.2);
}

.exit-popup-stats .stat {
    text-align: center;
}

.exit-popup-stats .stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #dc2626;
}

.exit-popup-stats .stat-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.exit-popup-cta {
    display: inline-block;
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    color: white;
    padding: 14px 36px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.125rem;
    text-decoration: none;
    box-shadow: 0 0 30px rgba(220, 38, 38, 0.5);
    transition: all 0.2s ease;
    margin-bottom: 16px;
}

.exit-popup-cta:hover {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    transform: translateY(-2px);
    box-shadow: 0 0 40px rgba(220, 38, 38, 0.7);
}

.exit-popup-micro {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.exit-popup-footer {
    margin-top: 20px;
    text-align: center;
}

.exit-popup-dismiss {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.875rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 8px;
}

.exit-popup-dismiss:hover {
    color: rgba(255, 255, 255, 0.6);
}

/* Mobile responsiveness */
@media (max-width: 640px) {
    .sticky-cta-content {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    
    .sticky-cta-text {
        justify-content: center;
    }
    
    .exit-popup-modal {
        padding: 24px;
        margin: 16px;
    }
    
    .exit-popup-stats {
        flex-direction: column;
        gap: 12px;
    }
    
    .exit-popup-header h2 {
        font-size: 1.25rem;
    }
}

/* Visible FAQ rendered by article-template-end.php for pages that declare one. */
.article-faq{margin:2.5rem 0 1.5rem;padding-top:1.5rem;border-top:1px solid rgba(0,212,255,.15)}
.article-faq h2{margin:0 0 1rem}
.article-faq dl{margin:0}
.article-faq dt{font-weight:600;margin:1.1rem 0 .35rem}
.article-faq dd{margin:0 0 .5rem;opacity:.92;line-height:1.6}