/* ============================================================
   RANKRIX: SITE LOADER, the original "rkxl" loader (2.6.0)
   Markup: inc/loader.php. Script: assets/rkx-loader-classic.js.
   The owner's original intro, restored from the June 2026 build
   ("Rankrix Loader.html") as it ran on the site: the
   "Establishing Connection" eyebrow, the RANKRIX wordmark drawn
   in outline letter by letter and then filled, the LOADING bar
   and percentage, the typed status log, "Hold to Enter" with its
   hold fill, the hint, the corner brackets and the copyright over
   the blurred galactic background.
     1  the June CSS, verbatim (only the background image is the
        theme's own: Settings, Background)
     2  the v1.5.1 tweaks, as on the site: the 4px bar, a larger
        LOADING and percentage, the row as wide as the wordmark,
        the brighter copyright
     3  the large-screen ladder (sizes only)
     4  what the theme adds: the Shaders cursor trail, the music
        player's corner and the page lock
   ============================================================ */

/* ---------- 1. the June loader, verbatim ---------- */
.rkxl {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #15161A;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: rgba(243, 239, 230, 0.86);
    will-change: opacity, transform;
}
body.rkxl-locked { overflow: hidden; }

.rkxl::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--rkx-bg-image, url("assets/galactic.jpg"));
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #15161A;
    z-index: 0;
    animation: rkxl-bg-in 1600ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes rkxl-bg-in {
    from { opacity: 0; transform: scale(1.08); }
    to   { opacity: 1; transform: scale(1); }
}

.rkxl__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(21, 22, 26, 0.42);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    pointer-events: none;
    animation: rkxl-veil-in 1200ms cubic-bezier(0.22, 1, 0.36, 1) 200ms backwards;
}
@keyframes rkxl-veil-in { from { opacity: 0; } to { opacity: 1; } }

.rkxl__stars {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image:
        radial-gradient(1.2px 1.2px at 18% 22%, rgba(243, 239, 230,0.78), transparent),
        radial-gradient(1px 1px at 76% 14%, rgba(243, 239, 230,0.6), transparent),
        radial-gradient(1.4px 1.4px at 42% 58%, rgba(243, 239, 230,0.85), transparent),
        radial-gradient(1px 1px at 88% 72%, rgba(243, 239, 230,0.5), transparent),
        radial-gradient(1.2px 1.2px at 8% 78%, rgba(243, 239, 230,0.65), transparent);
    opacity: 0.38;
    pointer-events: none;
    animation: rkxl-twinkle 4.5s ease-in-out infinite alternate;
}
@keyframes rkxl-twinkle { from { opacity: 0.28; } to { opacity: 0.5; } }

.rkxl__grain {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    pointer-events: none;
}

.rkxl__hud {
    position: absolute;
    inset: clamp(12px, 2.4vw, 28px);
    z-index: 4;
    pointer-events: none;
}
.rkxl__corner {
    position: absolute;
    width: clamp(18px, 2vw, 32px);
    height: clamp(18px, 2vw, 32px);
    border: 1px solid rgba(243, 239, 230, 0.22);
    transition: border-color 600ms ease;
}
.rkxl__corner--tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.rkxl__corner--tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.rkxl__corner--bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.rkxl__corner--br { bottom: 0; right: 0; border-left: none; border-top: none; }

.rkxl__hud-bot {
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translateX(-50%);
    font-family: 'Poppins', 'Inter', -apple-system, sans-serif;
    font-size: clamp(9px, 0.8vw, 11px);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(243, 239, 230, 0.42);
    white-space: nowrap;
    animation: rkxl-hud-in 900ms cubic-bezier(0.22, 1, 0.36, 1) 400ms backwards;
}
@keyframes rkxl-hud-in {
    from { opacity: 0; transform: translate(-50%, 6px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.rkxl__stack {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(18px, 2.4vw, 32px);
    padding: clamp(16px, 4vw, 32px);
    max-width: 92vw;
    width: 100%;
}

.rkxl__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Poppins', 'Inter', -apple-system, sans-serif;
    font-size: clamp(10px, 0.95vw, 12px);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #F3EFE6;
    opacity: 0;
    animation: rkxl-fade-up 760ms cubic-bezier(0.22, 1, 0.36, 1) 600ms forwards;
}
@keyframes rkxl-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rkxl__eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 10px #4ade80, 0 0 4px rgba(74, 222, 128, 0.7);
    animation: rkxl-eyebrow-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    flex-shrink: 0;
}
@keyframes rkxl-eyebrow-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.75); }
}

.rkxl__logo-wrap {
    position: relative;
    display: inline-block;
    width: clamp(180px, 38vw, 520px);
    aspect-ratio: 332.57 / 55.11;   /* the lockup's own proportions (2.7.0 logo kit) */
}
.rkxl__logo {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}
.rkxl__logo path {
    fill: transparent;
    stroke: #F3EFE6;
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: rkxl-draw 900ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
    filter: drop-shadow(0 0 14px rgba(243, 239, 230, 0.18));
    transition: fill 360ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes rkxl-draw {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 0; }
}
.rkxl__logo .rkxl__blade { stroke: #1F39C2; filter: drop-shadow(0 0 14px rgba(31, 57, 194, 0.35)); }
.rkxl__logo g[data-i="0"] path { animation-delay:  850ms; transition-delay:   0ms; }
.rkxl__logo g[data-i="1"] path { animation-delay: 1010ms; transition-delay: 120ms; }
.rkxl__logo.is-filled .rkxl__blade   { fill: #1F39C2; }
.rkxl__logo.is-filled .rkxl__chevron { fill: #F3EFE6; }
/* RANKRIX, revealed left to right while the symbol draws, letter by letter in feel */
.rkxl__word {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    animation: rkxl-word 1100ms cubic-bezier(0.4, 0, 0.2, 1) 1150ms forwards;
}
@keyframes rkxl-word {
    from { opacity: 1; clip-path: inset(0 100% 0 0); }
    to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

.rkxl__status {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.5vw, 16px);
    width: 100%;
    max-width: clamp(260px, 36vw, 420px);
    opacity: 0;
    animation: rkxl-fade-up 760ms cubic-bezier(0.22, 1, 0.36, 1) 650ms forwards;
}
.rkxl__status-label {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: clamp(9px, 0.85vw, 11px);
    font-weight: 600;
    letter-spacing: 0.18em;
    color: rgba(243, 239, 230, 0.48);
    text-transform: uppercase;
    white-space: nowrap;
}
.rkxl__bar {
    flex: 1;
    height: 1px;
    background: rgba(243, 239, 230, 0.12);
    overflow: hidden;
    position: relative;
    border-radius: 1px;
}
.rkxl__bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0057ff 0%, #4dabff 100%);
    box-shadow: 0 0 10px rgba(0, 87, 255, 0.55);
    will-change: width;
}
.rkxl__pct {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: clamp(10px, 0.9vw, 12px);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(243, 239, 230, 0.82);
    font-variant-numeric: tabular-nums;
    min-width: 3.5ch;
    text-align: right;
}

.rkxl__log {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: clamp(10px, 0.9vw, 12px);
    letter-spacing: 0.06em;
    color: rgba(243, 239, 230, 0.45);
    opacity: 0;
    animation: rkxl-fade-up 760ms cubic-bezier(0.22, 1, 0.36, 1) 780ms forwards;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 1.2em;
}
.rkxl__log::before { content: '› '; color: #4dabff; margin-right: 2px; }
.rkxl__log .rkxl__caret {
    display: inline-block;
    width: 6px;
    height: 1em;
    background: rgba(0, 87, 255, 0.85);
    margin-left: 1px;
    animation: rkxl-blink 1s steps(2) infinite;
}
@keyframes rkxl-blink { 50% { opacity: 0; } }

.rkxl__enter {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: rgba(0, 87, 255, 0.10);
    border: 1px solid rgba(0, 87, 255, 0.45);
    color: #F3EFE6;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: clamp(11px, 0.9vw, 12px);
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    overflow: hidden;
    border-radius: 1px;
    transition:
        background 280ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 280ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.rkxl__enter.is-ready {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    animation:
        rkxl-enter-in 620ms cubic-bezier(0.34, 1.56, 0.64, 1),
        rkxl-enter-pulse 2000ms ease-in-out 720ms infinite;
}
@keyframes rkxl-enter-in {
    0%   { opacity: 0; transform: translateY(12px) scale(0.92); }
    60%  { transform: translateY(-2px) scale(1.04); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rkxl-enter-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 87, 255, 0.5), 0 0 16px rgba(0, 87, 255, 0.22);
        border-color: rgba(0, 87, 255, 0.5);
        background: rgba(0, 87, 255, 0.10);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(0, 87, 255, 0), 0 0 34px rgba(0, 87, 255, 0.6);
        border-color: rgba(77, 171, 255, 0.95);
        background: rgba(0, 87, 255, 0.22);
    }
}
.rkxl__enter.is-holding { animation: none; }
.rkxl__enter:hover {
    background: rgba(0, 87, 255, 0.20);
    border-color: rgba(0, 87, 255, 0.7);
    box-shadow: 0 0 24px rgba(0, 87, 255, 0.35);
}
.rkxl__enter:active { transform: scale(0.97); }
.rkxl__enter:focus-visible {
    outline: 2px solid rgba(0, 87, 255, 0.8);
    outline-offset: 3px;
}
.rkxl__enter-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 0%;
    background: linear-gradient(90deg, rgba(0, 87, 255, 0.4) 0%, rgba(0, 87, 255, 0.6) 100%);
    pointer-events: none;
    z-index: 0;
    transition: width 100ms linear;
}
.rkxl__enter-fill::after {
    content: '';
    position: absolute;
    top: 0; right: -2px;
    width: 2px; height: 100%;
    background: #4dabff;
    box-shadow: 0 0 10px #4dabff;
    opacity: 0;
    transition: opacity 80ms;
}
.rkxl__enter.is-holding .rkxl__enter-fill::after { opacity: 1; }
.rkxl__enter > * { position: relative; z-index: 1; }
.rkxl__enter-label { white-space: nowrap; }
.rkxl__enter-icon {
    width: 11px;
    height: 11px;
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}
.rkxl__enter:hover .rkxl__enter-icon { transform: translateX(3px); }

.rkxl__hint {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: clamp(9px, 0.78vw, 11px);
    letter-spacing: 0.08em;
    color: rgba(243, 239, 230, 0.38);
    opacity: 0;
    transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
    text-align: center;
}
.rkxl__hint.is-ready { opacity: 1; }
.rkxl__hint kbd {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.92em;
    color: rgba(243, 239, 230, 0.65);
    background: rgba(243, 239, 230, 0.05);
    border: 1px solid rgba(243, 239, 230, 0.15);
    padding: 1px 5px;
    border-radius: 2px;
    margin: 0 2px;
}

.rkxl.is-exiting {
    pointer-events: none;
    animation: rkxl-exit-out 1000ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes rkxl-exit-out {
    0%   { opacity: 1; }
    60%  { opacity: 0.6; }
    100% { opacity: 0; transform: scale(1.03); }
}
.rkxl.is-exiting .rkxl__stack {
    animation: rkxl-stack-out 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes rkxl-stack-out {
    0%   { opacity: 1; transform: translateY(0); filter: blur(0); }
    100% { opacity: 0; transform: translateY(-18px); filter: blur(6px); }
}

@media (prefers-reduced-motion: reduce) {
    .rkxl, .rkxl *, .rkxl *::before, .rkxl *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .rkxl__logo path { stroke-dashoffset: 0 !important; }
    .rkxl__logo .rkxl__blade { fill: #1F39C2 !important; }
    .rkxl__logo .rkxl__chevron { fill: #F3EFE6 !important; }
    .rkxl__word { opacity: 1 !important; clip-path: none !important; animation: none !important; }
    .rkxl__eyebrow-dot { animation: none !important; }
}

@media (max-width: 359px) {
    .rkxl__stack { gap: 14px; padding: 14px; }
    .rkxl__logo-wrap { width: 82vw; }
    .rkxl__status { max-width: 80vw; }
    .rkxl__corner { width: 14px; height: 14px; }
    .rkxl__hud-bot { font-size: 9px; letter-spacing: 0.14em; }
}
@media (min-width: 360px) and (max-width: 639px) {
    .rkxl__stack { gap: 18px; }
    .rkxl__logo-wrap { width: 72vw; }
    .rkxl__status { max-width: 78vw; }
}
@media (min-width: 640px) and (max-width: 1023px) {
    .rkxl__logo-wrap { width: 52vw; max-width: 480px; }
    .rkxl__status { max-width: 56vw; }
}
@media (min-width: 1024px) and (max-width: 1535px) {
    .rkxl__logo-wrap { width: 38vw; max-width: 520px; }
}
@media (min-width: 1536px) and (max-width: 1919px) {
    .rkxl__logo-wrap { width: 36vw; max-width: 560px; }
}
@media (min-width: 1920px) and (max-width: 2559px) {
    .rkxl__logo-wrap { width: 32vw; max-width: 620px; }
    .rkxl__eyebrow { font-size: 13px; }
    .rkxl__pct, .rkxl__log, .rkxl__status-label { font-size: 13px; }
    .rkxl__enter { padding: 8px 16px; font-size: 13px; }
    .rkxl__hud-bot { font-size: 11px; }
}
@media (min-width: 2560px) and (max-width: 3839px) {
    .rkxl__logo-wrap { width: 30vw; max-width: 720px; }
    .rkxl__status { max-width: 480px; }
    .rkxl__eyebrow { font-size: 14px; letter-spacing: 0.2em; }
    .rkxl__pct, .rkxl__log, .rkxl__status-label { font-size: 14px; }
    .rkxl__enter { padding: 10px 20px; font-size: 14px; gap: 10px; }
    .rkxl__enter-icon { width: 13px; height: 13px; }
    .rkxl__hud-bot { font-size: 13px; }
    .rkxl__corner { width: 32px; height: 32px; }
}
@media (min-width: 3840px) {
    .rkxl__logo-wrap { width: 24vw; max-width: 900px; }
    .rkxl__status { max-width: 600px; }
    .rkxl__eyebrow { font-size: 16px; letter-spacing: 0.22em; }
    .rkxl__pct, .rkxl__log, .rkxl__status-label { font-size: 16px; }
    .rkxl__enter { padding: 12px 24px; font-size: 16px; gap: 12px; }
    .rkxl__enter-icon { width: 14px; height: 14px; }
    .rkxl__hud-bot { font-size: 15px; }
    .rkxl__corner { width: 42px; height: 42px; }
}
@media (max-height: 600px) {
    .rkxl__stack { gap: 12px; padding: 8px; }
    .rkxl__logo-wrap { width: clamp(140px, 24vw, 320px); }
}
@media (max-height: 420px) {
    .rkxl__stack { gap: 10px; }
    .rkxl__logo-wrap { width: clamp(120px, 20vw, 260px); }
    .rkxl__hint { display: none; }
}

/* ---------- 2. v1.5.1 tweaks, as on the site ---------- */
.rkxl__stack { --rkxl-logo-w: clamp(180px, 38vw, 520px); }
.rkxl__logo-wrap { width: var(--rkxl-logo-w); }
.rkxl__status {
    width: var(--rkxl-logo-w);
    max-width: var(--rkxl-logo-w);
}
.rkxl__status-label { font-size: clamp(11px, 1.05vw, 13px); }
.rkxl__pct          { font-size: clamp(12px, 1.1vw, 15px); }
.rkxl__bar {
    height: 4px;
    border-radius: 3px;
    background: rgba(243, 239, 230, 0.16);
}
.rkxl__bar-fill {
    border-radius: 3px;
    box-shadow: 0 0 14px rgba(0, 87, 255, 0.75);
}
.rkxl__hud-bot {
    font-size: clamp(11px, 1vw, 14px);
    font-weight: 600;
    letter-spacing: 0.2em;
    color: rgba(243, 239, 230, 0.74);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
@media (max-width: 359px)                          { .rkxl__stack { --rkxl-logo-w: 82vw; } }
@media (min-width: 360px) and (max-width: 639px)   { .rkxl__stack { --rkxl-logo-w: 72vw; } }
@media (min-width: 640px) and (max-width: 1023px)  { .rkxl__stack { --rkxl-logo-w: min(52vw, 480px); } }
@media (min-width: 1024px) and (max-width: 1535px) { .rkxl__stack { --rkxl-logo-w: min(38vw, 520px); } }
@media (min-width: 1536px) and (max-width: 1919px) { .rkxl__stack { --rkxl-logo-w: min(36vw, 560px); } }
@media (min-width: 1920px) and (max-width: 2559px) { .rkxl__stack { --rkxl-logo-w: min(32vw, 620px); } }
@media (min-width: 2560px) and (max-width: 3839px) { .rkxl__stack { --rkxl-logo-w: min(30vw, 720px); } }
@media (min-width: 3840px)                         { .rkxl__stack { --rkxl-logo-w: min(24vw, 900px); } }
@media (max-height: 600px)                         { .rkxl__stack { --rkxl-logo-w: clamp(140px, 24vw, 320px); } }
@media (max-height: 420px)                         { .rkxl__stack { --rkxl-logo-w: clamp(120px, 20vw, 260px); } }

/* as recorded on the site (the owner's screen recording, 1364 x 598): the small lines run
   untracked at 13px, the size the wordmark and the bar were drawn against */
.rkxl__eyebrow, .rkxl__status-label, .rkxl__pct, .rkxl__log, .rkxl__hint, .rkxl__hud-bot { letter-spacing: 0; }
.rkxl__eyebrow, .rkxl__status-label, .rkxl__pct, .rkxl__log, .rkxl__hint, .rkxl__hud-bot { font-size: clamp(11px, 0.96vw, 13px); }

/* ---------- 3. large screens (sizes only) ----------
   small phones stay compact; from full HD up every part steps up so
   it reads at 2K, 4K, 5K and 8K instead of shrinking into the screen */
@media (max-width: 639px) {
    .rkxl__bar { height: 3px; }
}
@media (min-width: 1920px) and (max-width: 2559px) {
    .rkxl__eyebrow, .rkxl__status-label, .rkxl__pct, .rkxl__log, .rkxl__hint, .rkxl__hud-bot { font-size: 14px; }
    .rkxl__stack { gap: 18px; }
    .rkxl__bar { height: 5px; }
    .rkxl__status { gap: 16px; }
    .rkxl__enter { padding: 9px 18px; font-size: 14px; gap: 9px; }
    .rkxl__enter-icon { width: 12px; height: 12px; }
    .rkxl__corner { width: 26px; height: 26px; }
}
@media (min-width: 2560px) and (max-width: 3839px) {
    .rkxl__eyebrow, .rkxl__status-label, .rkxl__pct, .rkxl__log, .rkxl__hint, .rkxl__hud-bot { font-size: 16px; }
    .rkxl__stack { gap: 22px; }
    .rkxl__bar { height: 6px; }
    .rkxl__status { gap: 20px; }
    .rkxl__hint kbd { padding: 2px 7px; }
    .rkxl__enter { padding: 12px 24px; font-size: 16px; gap: 11px; }
    .rkxl__enter-icon { width: 14px; height: 14px; }
    .rkxl__corner { width: 34px; height: 34px; }
}
@media (min-width: 3840px) and (max-width: 5119px) {
    .rkxl__eyebrow, .rkxl__status-label, .rkxl__pct, .rkxl__log, .rkxl__hint, .rkxl__hud-bot { font-size: 20px; }
    .rkxl__stack { gap: 28px; --rkxl-logo-w: min(24vw, 1000px); }
    .rkxl__bar { height: 8px; }
    .rkxl__bar-fill { box-shadow: 0 0 12px rgba(0, 87, 255, 0.9), 0 0 34px rgba(0, 87, 255, 0.5); }
    .rkxl__status { gap: 26px; }
    .rkxl__log .rkxl__caret { width: 9px; }
    .rkxl__hint kbd { padding: 3px 9px; }
    .rkxl__enter { padding: 15px 30px; font-size: 20px; gap: 14px; border-width: 2px; }
    .rkxl__enter-icon { width: 18px; height: 18px; }
    .rkxl__enter-fill::after { width: 3px; right: -3px; }
    .rkxl__corner { width: 44px; height: 44px; border-width: 2px; }
}
@media (min-width: 5120px) and (max-width: 7679px) {
    .rkxl__eyebrow, .rkxl__status-label, .rkxl__pct, .rkxl__log, .rkxl__hint, .rkxl__hud-bot { font-size: 26px; }
    .rkxl__stack { gap: 34px; --rkxl-logo-w: min(23vw, 1280px); }
    .rkxl__bar { height: 10px; }
    .rkxl__bar-fill { box-shadow: 0 0 16px rgba(0, 87, 255, 0.9), 0 0 44px rgba(0, 87, 255, 0.5); }
    .rkxl__status { gap: 32px; }
    .rkxl__log .rkxl__caret { width: 11px; }
    .rkxl__hint kbd { padding: 4px 12px; }
    .rkxl__enter { padding: 19px 38px; font-size: 25px; gap: 17px; border-width: 2px; }
    .rkxl__enter-icon { width: 22px; height: 22px; }
    .rkxl__enter-fill::after { width: 4px; right: -4px; }
    .rkxl__corner { width: 56px; height: 56px; border-width: 2px; }
}
@media (min-width: 7680px) {
    .rkxl__eyebrow, .rkxl__status-label, .rkxl__pct, .rkxl__log, .rkxl__hint, .rkxl__hud-bot { font-size: 36px; }
    .rkxl__stack { gap: 48px; --rkxl-logo-w: min(22vw, 1900px); }
    .rkxl__bar { height: 14px; }
    .rkxl__bar-fill { box-shadow: 0 0 22px rgba(0, 87, 255, 0.9), 0 0 62px rgba(0, 87, 255, 0.5); }
    .rkxl__status { gap: 44px; }
    .rkxl__log .rkxl__caret { width: 15px; }
    .rkxl__hint kbd { padding: 5px 16px; }
    .rkxl__enter { padding: 26px 52px; font-size: 36px; gap: 24px; border-width: 3px; }
    .rkxl__enter-icon { width: 32px; height: 32px; }
    .rkxl__enter-fill::after { width: 6px; right: -6px; }
    .rkxl__corner { width: 80px; height: 80px; border-width: 3px; }
}
/* a short window keeps the compact wordmark at any width */
@media (min-width: 3840px) and (max-height: 600px) { .rkxl__stack { --rkxl-logo-w: clamp(140px, 24vw, 320px); } }

/* ---------- 4. in the theme ---------- */
/* the page under it stays put while it is up; a returning visitor never sees it (the inline check in inc/loader.php) */
html.rkx-loading { overflow: hidden !important; }
html.rkx-loading .rkx-vbar { opacity: 0 !important; }
html.rkx-loader-skip #rkxLoader { display: none !important; }
:where(.rkxl) *, :where(.rkxl) *::before, :where(.rkxl) *::after { box-sizing: border-box; }
:where(.rkxl) button { margin: 0; -webkit-appearance: none; appearance: none; }
.rkxl {
    line-height: normal;                           /* as on the June page, whatever the theme sets on body */
    overflow: clip;                                /* never a scroll container: focus cannot shift it */
    touch-action: none;                            /* a finger drag feeds the trail instead of panning */
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
}
/* phones get the bundled 720px background (when the default image is in use) */
@media (max-width: 768px) {
    .rkxl--galactic::before { background-image: url("assets/galactic-m.jpg"); }
}
/* the hold: no long-press menu, and no scroll can take the press away */
.rkxl__enter { touch-action: none; -webkit-touch-callout: none; }
/* a finger's target: on touch screens the button is at least 44px tall (the label stays centred, the look
   is the same); with a mouse it keeps the original 31px */
@media (pointer: coarse) { .rkxl__enter { min-height: 44px; } }
.rkxl__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* short screens (a landscape phone, a squat window) shrink the wordmark hard; the LOADING row keeps
   at least 260px so its bar stays a bar. Anywhere the wordmark is wider, nothing changes. */
.rkxl__status {
    width: max(var(--rkxl-logo-w), min(260px, 86vw));
    max-width: 92vw;
}

/* the cursor trail, over the blurred veil and under the stars: two canvases, the Canvas 2D
   trail from the first moment and the Shaders (shaders.com) WebGPU tree, which crossfades in
   once its library has loaded (each fades on its own .is-on).
   The tree paints its dots over a near-black gradient (#1e1e1f to #070708); screened
   over this darker loader that base would lift the corners to grey, so a little
   contrast takes it back to black and the scene stays as dark as the original, with
   only the dots added. */
.rkxl__fx {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    filter: contrast(1.3);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 600ms ease;
    pointer-events: none;
}
.rkxl__fx.is-on { opacity: 1; }

/* the music player's corner (inc/music.php; assets/rkx-music.css, .on-loader): just inside the
   bottom-left bracket. On phones it sits above the copyright line, where its panel has room. */
.rkxl__slot {
    position: absolute;
    left: clamp(8px, 0.9vw, 14px);
    bottom: clamp(8px, 0.9vw, 14px);
    width: 46px;
    height: 46px;
    pointer-events: none;
}
@media (max-width: 639px) { .rkxl__slot { left: 6px; bottom: 34px; } }
@media (max-width: 639px) and (max-height: 420px) { .rkxl__slot { bottom: 6px; } }
@media (min-width: 1920px) and (max-width: 2559px) { .rkxl__slot { left: 16px; bottom: 16px; } }
@media (min-width: 2560px) { .rkxl__slot { left: 22px; bottom: 22px; } }