/* /Components/Layout/Footer.razor.rz.scp.css */
/* No custom CSS — footer uses MudBlazor components exclusively */
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Blazor error UI — displayed when an unhandled exception occurs */
#blazor-error-ui[b-nyvw5ab3il] {
    background: var(--brand-warning, lightyellow);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-nyvw5ab3il] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* NavMenu scoped styles — MudBlazor handles drawer navigation styling */
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-85hfo8qvdn],
.components-reconnect-repeated-attempt-visible[b-85hfo8qvdn],
.components-reconnect-failed-visible[b-85hfo8qvdn],
.components-pause-visible[b-85hfo8qvdn],
.components-resume-failed-visible[b-85hfo8qvdn],
.components-reloading-visible[b-85hfo8qvdn],
.components-rejoining-animation[b-85hfo8qvdn] {
    display: none;
}

/* Kiosk /health-gated reload state (set by ReconnectModal.razor.js while it polls the server before
   reloading). Show a plain "Reconnecting..." + the spinner, and hide the stale reconnect messages so the
   countdown doesn't sit frozen at 0 during the poll. */
#components-reconnect-modal.components-reloading .components-reloading-visible[b-85hfo8qvdn],
#components-reconnect-modal.components-reloading .components-rejoining-animation[b-85hfo8qvdn] {
    display: block;
}
#components-reconnect-modal.components-reloading .components-reconnect-first-attempt-visible[b-85hfo8qvdn],
#components-reconnect-modal.components-reloading .components-reconnect-repeated-attempt-visible[b-85hfo8qvdn],
#components-reconnect-modal.components-reloading .components-reconnect-failed-visible[b-85hfo8qvdn],
#components-reconnect-modal.components-reloading #components-reconnect-button[b-85hfo8qvdn] {
    display: none !important;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-85hfo8qvdn],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-85hfo8qvdn],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-85hfo8qvdn],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-85hfo8qvdn],
#components-reconnect-modal.components-reconnect-retrying[b-85hfo8qvdn],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-85hfo8qvdn],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-85hfo8qvdn],
#components-reconnect-modal.components-reconnect-failed[b-85hfo8qvdn],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-85hfo8qvdn] {
    display: block;
}


#components-reconnect-modal[b-85hfo8qvdn] {
    background-color: var(--brand-midnight-violet);
    color: var(--brand-almost-white);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-85hfo8qvdn 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-85hfo8qvdn 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-85hfo8qvdn 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-85hfo8qvdn]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-85hfo8qvdn 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-85hfo8qvdn {
    0% {
        transform: translateY(30px) scale(0.95);
    }

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

@keyframes components-reconnect-modal-fadeInOpacity-b-85hfo8qvdn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-85hfo8qvdn {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-85hfo8qvdn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-85hfo8qvdn] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-85hfo8qvdn] {
    border: 0;
    background-color: var(--brand-nebula-violet);
    color: var(--brand-almost-white);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-85hfo8qvdn] {
        background-color: var(--brand-galaxy-purple);
    }

    #components-reconnect-modal button:active[b-85hfo8qvdn] {
        background-color: var(--brand-nebula-violet);
    }

.components-rejoining-animation[b-85hfo8qvdn] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-85hfo8qvdn] {
        position: absolute;
        border: 3px solid var(--brand-aqua-pulse);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-85hfo8qvdn 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-85hfo8qvdn] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-85hfo8qvdn {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SectionContainer.razor.rz.scp.css */
.section-container[b-afu74b8jvx] {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (max-width: 599px) {
    .section-container[b-afu74b8jvx] {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}
/* /Components/Pages/Signage.razor.rz.scp.css */
.signage[b-xv9e3x4l9o] {
    position: relative;
    /* The wall is a kiosk: no pointer should ever be visible (the Pi's Chromium shows a mouse
       cursor by default — the Tizen browser never did). Covers the full kiosk screen since the
       page is all there is. */
    cursor: none;
    width: 540px;
    height: 1920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: var(--gradient-cosmic-cosmos);
    color: var(--brand-almost-white);
    font-family: var(--brand-font);
    overflow: hidden;
}

/* Dim overlay for the overnight window. */
.signage--dim[b-xv9e3x4l9o]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    opacity: calc((100 - var(--dim-percent)) / 100);
    pointer-events: none;
    z-index: 50;
}

/* Banner */
.signage__banner[b-xv9e3x4l9o] {
    border-bottom: 2px solid color-mix(in srgb, var(--brand-nebula-violet) 35%, transparent);
    padding: 14px 28px 12px;
}
.signage__brandrow[b-xv9e3x4l9o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.signage__wordmark[b-xv9e3x4l9o] { font-size: 44px; font-weight: 700; letter-spacing: 0.5px; }
.signage__avail[b-xv9e3x4l9o] { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.signage__tagline[b-xv9e3x4l9o] {
    margin-top: 6px;
    text-align: center;
    font-size: 18px;
    letter-spacing: 1px;
    color: var(--brand-light-alloy);
}
.signage__aware[b-xv9e3x4l9o] {
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    --orb-size: 96px;
}
.signage__quip[b-xv9e3x4l9o] { display: flex; flex-direction: column; }
.signage__quip-who[b-xv9e3x4l9o] {
    font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--brand-aqua-pulse);
}
.signage__quip-line[b-xv9e3x4l9o] { font-size: 16px; font-weight: 600; }

/* Content tier */
.signage__content[b-xv9e3x4l9o] {
    flex: 1;
    position: relative;   /* containing block for the game takeover, so it fills only this tier (not the banner) */
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 28px;
    padding: 40px 36px;
}
.signage__chip[b-xv9e3x4l9o] {
    font-size: 18px; letter-spacing: 3px; font-weight: 700;
    color: var(--brand-almost-white);
    background: var(--brand-nebula-violet);
    border-radius: 24px; padding: 8px 22px;
}
.signage__hook[b-xv9e3x4l9o] { font-size: 64px; font-weight: 700; line-height: 1.05; }
.signage__ctx[b-xv9e3x4l9o] { font-size: 24px; color: var(--brand-light-alloy); line-height: 1.4; max-width: 420px; }
.signage__action[b-xv9e3x4l9o] { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.signage__cta[b-xv9e3x4l9o] {
    font-size: 22px; letter-spacing: 4px; font-weight: 700;
    color: var(--brand-aqua-pulse); font-family: ui-monospace, monospace;
}
.signage__action[b-xv9e3x4l9o]  .signage-qr {
    box-sizing: border-box;
    width: 140px; height: 140px;
    padding: 8px;
    background: #fff;
    border-radius: 18px;
    filter: drop-shadow(0 0 22px rgba(34, 211, 238, 0.4));
}
.signage__action[b-xv9e3x4l9o]  .signage-qr svg { width: 100%; height: 100%; display: block; }

/* Active mode: emphasise the hook + a "noticed you" cue. */
.signage__hook--active[b-xv9e3x4l9o] {
    transform: scale(1.03);
    transition: transform 300ms ease;
    text-shadow: 0 0 24px color-mix(in srgb, var(--brand-aqua-pulse) 60%, transparent);
}
.signage--active .signage__action[b-xv9e3x4l9o]  .signage-qr {
    filter: drop-shadow(0 0 34px rgba(34, 211, 238, 0.7));
    transition: filter 300ms ease;
}
.signage__cue[b-xv9e3x4l9o] {
    align-self: center;
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--brand-aqua-pulse);
    animation: signage-cue-pulse-b-xv9e3x4l9o 1.2s ease-out;
}
@keyframes signage-cue-pulse-b-xv9e3x4l9o {
    0% { opacity: 0; transform: translateY(6px); }
    30% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
    .signage__hook--active[b-xv9e3x4l9o] { transition: none; transform: none; }
    .signage__cue[b-xv9e3x4l9o] { animation: none; }
    .signage--active .signage__action[b-xv9e3x4l9o]  .signage-qr { transition: none; }
}

/* Game takeover panel — a dark backdrop over the rotation tier. The plasma-pink frame lives on the
   actual game board (.m3 / .tetris__well) so it hugs the playfield, not this whole tall panel. */
.signage__game[b-xv9e3x4l9o] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    z-index: 51;
    background: #0B0018;
    overflow: hidden;
}

/* Get-ready countdown overlay: shared by Tetris/Match3/Chess (the Climber engine renders its own,
   .climber__count, off its own countdown phase). Mirrors that look — a radial-dimmed veil over the
   game content with a huge glowing digit and a pink "Get ready" caption. */
.signage__countdown[b-xv9e3x4l9o] {
    position: absolute;
    inset: 0;
    z-index: 52;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: radial-gradient(120% 80% at 50% 40%, rgba(5, 0, 10, .72), rgba(5, 0, 10, .9));
}
.signage__countdown-num[b-xv9e3x4l9o] {
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
    font-family: ui-monospace, "Cascadia Code", monospace;
    color: var(--brand-neo-turquoise, #14F1D9);
    text-shadow: 0 0 34px rgba(20, 241, 217, .6);
    animation: signageCountdownPop-b-xv9e3x4l9o .9s ease-out;
}
@keyframes signageCountdownPop-b-xv9e3x4l9o {
    0% { transform: scale(1.7); opacity: 0; }
    25% { transform: scale(1); opacity: 1; }
    100% { transform: scale(.92); opacity: .9; }
}
.signage__countdown-sub[b-xv9e3x4l9o] {
    font-size: 0.85rem;
    color: var(--brand-plasma-pink, #D942DB);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-family: ui-monospace, monospace;
}

/* Companion QR — in the awareness row (where ASK ME used to sit), pushed to the right */
.signage__companioncta[b-xv9e3x4l9o] {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.signage__companioncta[b-xv9e3x4l9o]  .signage-qr {
    box-sizing: border-box;
    width: 100px; height: 100px;
    padding: 6px;
    background: #fff;
    border-radius: 12px;
    filter: drop-shadow(0 0 8px rgba(60, 230, 220, 0.35));
}
.signage__companioncta[b-xv9e3x4l9o]  .signage-qr svg { width: 100%; height: 100%; display: block; }
.signage__companioncta-label[b-xv9e3x4l9o] {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #3ce6dc;
}
.signage__companioncta-busy[b-xv9e3x4l9o] {
    box-sizing: border-box;
    width: 100px;
    padding: 10px 6px;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #3ce6dc;
    border: 1px solid rgba(60, 230, 220, 0.35);
    border-radius: 12px;
    background: rgba(60, 230, 220, 0.08);
}

/* TAI chat takeover tile */
.signage__chat[b-xv9e3x4l9o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    height: 100%;                 /* fill the content tier so the log can flex + clip cleanly */
    justify-content: flex-start;
    padding: 0 8px;
    box-sizing: border-box;
}
.signage__chat-head[b-xv9e3x4l9o] {
    display: flex;
    align-items: center;
    gap: 18px;
    --orb-size: 72px;
}
.signage__chat-status[b-xv9e3x4l9o] {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand-aqua-pulse);
}
.signage__chat-log[b-xv9e3x4l9o] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 460px;
    flex: 1 1 auto;               /* take the leftover height */
    min-height: 0;
    overflow: hidden;            /* older messages scroll off the top */
    justify-content: flex-end;   /* newest message anchored at the bottom, always visible */
}
.signage__chat-bubble[b-xv9e3x4l9o] {
    padding: 12px 18px;
    border-radius: 18px;
    font-size: 19px;
    line-height: 1.35;
    max-width: 92%;
    word-break: break-word;
}
.signage__chat-bubble--visitor[b-xv9e3x4l9o] {
    align-self: flex-end;
    background: color-mix(in srgb, var(--brand-nebula-violet) 60%, transparent);
    border-bottom-right-radius: 6px;
    color: var(--brand-almost-white);
}
.signage__chat-bubble--tai[b-xv9e3x4l9o] {
    align-self: flex-start;
    background: color-mix(in srgb, var(--brand-aqua-pulse) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-aqua-pulse) 40%, transparent);
    border-bottom-left-radius: 6px;
    color: var(--brand-almost-white);
}

/* ?debug=perf diagnostics overlay (#311) — big enough to read off the wall, above everything. */
.signage__perf[b-xv9e3x4l9o] {
    position: absolute; top: 8px; left: 8px; z-index: 99;
    display: flex; flex-direction: column; gap: .2rem;
    padding: .5rem .7rem; border-radius: .4rem;
    background: rgba(5, 0, 10, .82); border: 1px solid rgba(20, 241, 217, .5);
    font-family: ui-monospace, monospace; pointer-events: none;
}
.signage__perf-fps[b-xv9e3x4l9o] { font-size: 1.6rem; font-weight: 700; color: #14F1D9; }
.signage__perf-info[b-xv9e3x4l9o] { font-size: .8rem; color: #cfe9ff; white-space: pre-wrap; word-break: break-all; max-width: 46rem; }
/* /Components/Pages/SignageCompanion.razor.rz.scp.css */
.hub[b-zyarprdyhj] { height: 100dvh; overflow: hidden; background: #0B0018; color: #cfe9ff; font-family: 'Space Grotesk', system-ui, sans-serif; display: flex; flex-direction: column; }
.hub__brand[b-zyarprdyhj] { display: flex; align-items: center; gap: .4rem; padding: .7rem .9rem .4rem; }
/* Live connection pip — driven by ReconnectModal.razor.js via the Blazor circuit state. Colours match the
   display's #signage-conn-dot exactly for coherence: calm green connected, amber reconnecting, red dropped.
   Literal colours so it renders even if theme variables fail to load in the disconnected state. */
.hub__orb[b-zyarprdyhj] { width: 11px; height: 11px; border-radius: 50%; background: #34D399; box-shadow: 0 0 6px rgba(52,211,153,.55); transition: background 200ms ease, box-shadow 200ms ease; }
.hub__orb[data-state="reconnecting"][b-zyarprdyhj] { background: #FBBF24; box-shadow: 0 0 8px rgba(251,191,36,.7); animation: signage-conn-pulse 1s ease-in-out infinite; }
.hub__orb[data-state="disconnected"][b-zyarprdyhj] { background: #EF4444; box-shadow: 0 0 9px rgba(239,68,68,.8); animation: signage-conn-pulse .8s ease-in-out infinite; }
.hub__wm[b-zyarprdyhj] { font-weight: 700; font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .hub__orb[b-zyarprdyhj] { animation: none !important; } }
.hub__pills[b-zyarprdyhj] { display: flex; gap: .4rem; padding: 0 .8rem .6rem; }
.hub__pill[b-zyarprdyhj] { flex: 1; padding: .55rem 0; border-radius: 999px; background: #150c33; border: 1px solid #241c4d; color: #9fb6d8; font-size: .85rem; }
.hub__pill.on[b-zyarprdyhj] { background: linear-gradient(160deg,#5ffbef,#1aa6a0); color: #04121a; font-weight: 700; border-color: transparent; }
.hub__body[b-zyarprdyhj] { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

/* Busy (409) / expired (410, missing nonce) claim outcomes — replaces the pills + tab body entirely,
   so there's nothing to interact with until the visitor rescans a live QR. */
.hub__msg[b-zyarprdyhj] { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
            padding: 0 1.4rem; font-size: 1.1rem; color: #9fb6d8; }

/* The tab components (chat / control / game controllers) hardcode height:100dvh so they fill the screen
   on their standalone /signage/* pages. Nested in the hub they sit BELOW the brand + pills, so 100dvh
   overflows the viewport and the page scrolls. Scope an override to the hub so each fills the body
   instead; the standalone pages keep their 100dvh. */
.hub__body[b-zyarprdyhj]  .ask,
.hub__body[b-zyarprdyhj]  .ctrl,
.hub__body[b-zyarprdyhj]  .cpv,
.hub__body[b-zyarprdyhj]  .cc,
.hub__body[b-zyarprdyhj]  .m3c,
.hub__body[b-zyarprdyhj]  .gt,
.hub__body[b-zyarprdyhj]  .play { flex: 1 1 0; min-height: 0; height: auto; }
.hub__body[b-zyarprdyhj]  .ctrl { display: flex; flex-direction: column; }   /* so .cpv can fill it */
/* The game chooser's fold-out cards can exceed the viewport — the chooser column itself scrolls. */
.hub__body[b-zyarprdyhj]  .chooser { flex: 1 1 0; min-height: 0; overflow-y: auto; }
/* /Components/Pages/SignageVote.razor.rz.scp.css */
.vote[b-o6a1xnub99] { min-height: 100vh; display:flex; flex-direction:column; justify-content:center; gap:20px; padding:28px; background: var(--gradient-cosmic-cosmos); color: var(--brand-almost-white); font-family: var(--brand-font); }
.vote__q[b-o6a1xnub99] { font-size: 26px; font-weight: 700; line-height: 1.15; }
.vote__opts[b-o6a1xnub99] { display:flex; flex-direction:column; gap:12px; }
.vote__opt[b-o6a1xnub99] { padding:16px; border-radius:12px; border:1px solid color-mix(in srgb, var(--brand-nebula-violet) 50%, transparent); background: color-mix(in srgb, var(--brand-night-violet) 60%, transparent); color: var(--brand-almost-white); font-size:18px; font-family: var(--brand-font); }
.vote__thanks[b-o6a1xnub99] { color: var(--brand-neo-turquoise); font-weight:600; }
.vote__bars[b-o6a1xnub99] { display:flex; flex-direction:column; gap:10px; }
.vote__bar[b-o6a1xnub99] { display:grid; grid-template-columns: 1fr 2fr auto; gap:10px; align-items:center; font-size:14px; }
.vote__track[b-o6a1xnub99] { background: rgba(255,255,255,.08); border-radius:6px; overflow:hidden; height:12px; }
.vote__fill[b-o6a1xnub99] { height:100%; background: linear-gradient(90deg, var(--brand-nebula-violet), var(--brand-aqua-pulse)); }
/* /Components/Shared/ServiceCard.razor.rz.scp.css */
/* Scoped styles handled by global .hover-lift class */
/* /Components/Showcases/SignageDisplayShowcase.razor.rz.scp.css */
/* Full-height card deck in normal document flow (the page itself scrolls, no nested scroller). Cards
   subtract the fixed MudAppBar height (64px) so the first card fits the viewport under the bar. */
.sds[b-mczs2xlwpo] { background: #070011; color: #e8f0ff; font-family: 'Space Grotesk', system-ui, sans-serif; }
.sds-card[b-mczs2xlwpo] { min-height: calc(100dvh - 64px); display: grid; grid-template-columns: 1fr 1fr;
    gap: 3rem; align-items: center; max-width: 1100px; margin: 0 auto; padding: 1.75rem 2rem; }
/* Alternating section bg like the home page's .section-alt: every other card gets a lifted surface
   (hero card 1 stays on the base #070011). Full-bleed via the viewport-wide box-shadow trick so the
   tint spans the whole row, not just the max-width:1100px content column. */
.sds-card:nth-child(even)[b-mczs2xlwpo] { background-color: #0f0626;
    box-shadow: 0 0 0 100vmax #0f0626; clip-path: inset(0 -100vmax); }
.sds-eyebrow[b-mczs2xlwpo] { text-transform: uppercase; letter-spacing: .18em; font-size: .75rem; color: #3ce6dc; margin: 0 0 .6rem; }
.sds-h[b-mczs2xlwpo] { font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.1; margin: 0 0 1rem; }
.sds-body[b-mczs2xlwpo] { font-size: 1.05rem; line-height: 1.6; color: #b9c7e6; max-width: 46ch; }
.sds-cta[b-mczs2xlwpo] { display: inline-block; margin-top: 1.5rem; padding: .7rem 1.4rem; border-radius: 999px;
    background: linear-gradient(160deg,#5ffbef,#1aa6a0); color: #04121a; font-weight: 700; text-decoration: none; }
.sds-art[b-mczs2xlwpo] { display: flex; align-items: center; justify-content: center; gap: 1.4rem; }
.sds-art--pair[b-mczs2xlwpo] { flex-wrap: wrap; }
.sds-wake[b-mczs2xlwpo] { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }   /* sensor stacked above the display, matching the Ambient card */
.sds-art--annotated[b-mczs2xlwpo] { padding-right: 8rem; }   /* room for the right-side annotation labels */
.sds-print[b-mczs2xlwpo] { position: fixed; top: 14px; right: 14px; z-index: 20; padding: .5rem 1rem; border-radius: 999px;
    border: 1px solid #3ce6dc; background: rgba(10,3,32,.8); color: #3ce6dc; cursor: pointer; }

/* ---- reveal-on-scroll (JS adds .sds-anim to the deck + .in-view per card; no JS = final state) ---- */
.sds-anim .sds-copy > *[b-mczs2xlwpo],
.sds-anim .sds-art[b-mczs2xlwpo] { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.sds-anim .sds-copy > *:nth-child(2)[b-mczs2xlwpo] { transition-delay: .07s; }
.sds-anim .sds-copy > *:nth-child(3)[b-mczs2xlwpo] { transition-delay: .14s; }
.sds-anim .sds-copy > *:nth-child(4)[b-mczs2xlwpo] { transition-delay: .21s; }
.sds-anim .sds-card.in-view .sds-copy > *[b-mczs2xlwpo],
.sds-anim .sds-card.in-view .sds-art[b-mczs2xlwpo] { opacity: 1; transform: none; }
.sds-anim .reveal[b-mczs2xlwpo] { opacity: 0; transform: translateY(12px);
    transition: opacity .5s ease var(--d, 0s), transform .5s ease var(--d, 0s); }
.sds-anim .sds-card.in-view .reveal[b-mczs2xlwpo] { opacity: 1; transform: none; }

/* ---- a mock rotating-content tile shown on the display (cards 1 & 2). cqw = scales with the screen ---- */
.sds-tile[b-mczs2xlwpo] { display: flex; flex-direction: column; align-items: center; gap: 2.5cqw; text-align: center; padding: 2cqw; width: 100%; }
.sds-tile__kind[b-mczs2xlwpo] { font-size: 3cqw; letter-spacing: .6cqw; text-transform: uppercase; color: #3ce6dc; }
.sds-tile__title[b-mczs2xlwpo] { font-size: 5.4cqw; font-weight: 700; line-height: 1.12; color: #eafeff; }
.sds-tile__qr[b-mczs2xlwpo] { width: 24cqw; height: 24cqw; border-radius: 2cqw; margin-top: 1cqw; box-sizing: border-box; border: 1.4cqw solid #fff;
    background: repeating-conic-gradient(#0a0320 0 25%, #fff 0 50%) 50% / 5cqw 5cqw, #fff; box-shadow: 0 0 3cqw rgba(60,230,220,.35); }
.sds-tile__cta[b-mczs2xlwpo] { font-size: 2.8cqw; letter-spacing: .3cqw; text-transform: uppercase; color: #3ce6dc; }

/* ---- a mock "control" view in the phone body (card 1) ---- */
.sds-ctrl[b-mczs2xlwpo] { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.sds-ctrl__btn[b-mczs2xlwpo] { text-align: center; padding: 6px; border-radius: 8px; font-size: .55rem; background: #150c33; border: 1px solid #241c4d; color: #cfe9ff; }
.sds-ctrl__btn.on[b-mczs2xlwpo] { background: linear-gradient(160deg,#5ffbef,#1aa6a0); color: #04121a; font-weight: 700; border-color: transparent; }

/* ---- card 3: phone scans the code, an arrow carries it to the wall, the game appears ---- */
.sds-scan[b-mczs2xlwpo] { align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.sds-reveal-board[b-mczs2xlwpo] { width: 100%; display: flex; justify-content: center; }   /* let the board fill the display */
.sds-scan__phone[b-mczs2xlwpo], .sds-scan__display[b-mczs2xlwpo] { flex: 0 0 auto; }
.sds-scanui[b-mczs2xlwpo] { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.sds-scanui__view[b-mczs2xlwpo] { position: relative; padding: 7px; border: 2px solid #3ce6dc; border-radius: 10px;
    box-shadow: 0 0 10px rgba(60,230,220,.5); overflow: hidden; }
.sds-anim .sds-card--scan.in-view .sds-scanui__view[b-mczs2xlwpo] { animation: sds-scanframe-b-mczs2xlwpo 1.6s ease-in-out infinite; }
@keyframes sds-scanframe-b-mczs2xlwpo { 0%,100% { box-shadow: 0 0 6px rgba(60,230,220,.4); } 50% { box-shadow: 0 0 16px rgba(60,230,220,.95); } }
.sds-scanui__code[b-mczs2xlwpo] { display: block; width: 52px; height: 52px; border-radius: 5px; background:
    repeating-conic-gradient(#0a0320 0 25%, #cfe9ff 0 50%) 50% / 13px 13px; border: 1px solid #cfe9ff; }
.sds-scanui__line[b-mczs2xlwpo] { position: absolute; left: 7px; right: 7px; top: 8px; height: 2px; background: #eafeff; box-shadow: 0 0 8px 2px #3ce6dc; }
.sds-anim .sds-card--scan.in-view .sds-scanui__line[b-mczs2xlwpo] { animation: sds-scanline-b-mczs2xlwpo 1.8s ease-in-out infinite; }
@keyframes sds-scanline-b-mczs2xlwpo { 0%,100% { top: 8px; } 50% { top: calc(100% - 10px); } }
.sds-scanui__hint[b-mczs2xlwpo] { font-size: .5rem; letter-spacing: .3px; color: #9fb6d8; text-align: center; }
/* connector: a labelled arrow from phone to display */
.sds-scan__link[b-mczs2xlwpo] { display: flex; flex-direction: column; align-items: center; gap: 5px; align-self: center; flex: 0 0 clamp(56px, 9vw, 100px); }
.sds-scan__linklabel[b-mczs2xlwpo] { font-size: .55rem; letter-spacing: .3px; color: #3ce6dc; white-space: nowrap; }
.sds-scan__beam[b-mczs2xlwpo] { position: relative; width: 100%; height: 2px;
    background: linear-gradient(90deg, color-mix(in srgb, #3ce6dc 50%, transparent), color-mix(in srgb, #3ce6dc 50%, transparent)); opacity: .45; }
.sds-scan__beam[b-mczs2xlwpo]::after { content: "\25B6"; position: absolute; top: 50%; right: -3px; transform: translateY(-50%); color: #3ce6dc; font-size: .55rem; }
.sds-scan__beam[b-mczs2xlwpo]::before { content: ""; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%;
    background: #eafeff; box-shadow: 0 0 10px 3px #3ce6dc; opacity: 0; }
.sds-anim .sds-card--scan.in-view .sds-scan__beam[b-mczs2xlwpo]::before { animation: sds-beam-b-mczs2xlwpo 1.2s ease-in-out .3s infinite; }
@keyframes sds-beam-b-mczs2xlwpo { 0% { left: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
/* the game revealing on the display after the beam lands */
.sds-anim .sds-card--scan .sds-reveal-board[b-mczs2xlwpo] { opacity: 0; transform: scale(.9); transition: opacity .6s ease 1.1s, transform .6s ease 1.1s; }
.sds-anim .sds-card--scan.in-view .sds-reveal-board[b-mczs2xlwpo] { opacity: 1; transform: none; }

/* ---- card 3b: scan to read — the scanned insight opens as an article page on the phone ---- */
.sds-read[b-mczs2xlwpo] { display: flex; flex-direction: column; gap: 5px; padding: 2px 2px 4px; }
.sds-read__kind[b-mczs2xlwpo] { font-size: .5rem; letter-spacing: .5px; text-transform: uppercase; color: #3ce6dc; }
.sds-read__title[b-mczs2xlwpo] { font-size: .72rem; font-weight: 700; line-height: 1.15; color: #eafeff; }
.sds-read__meta[b-mczs2xlwpo] { font-size: .45rem; color: #8fa3c8; margin-bottom: 2px; }
.sds-read__line[b-mczs2xlwpo] { height: 3px; border-radius: 2px; background: #241c4d; }
.sds-read__line--short[b-mczs2xlwpo] { width: 62%; }

/* ---- card 4: availability, statuses reveal in sequence, pointer at the badge ---- */
.sds-avail[b-mczs2xlwpo] { align-items: center; gap: 1.8rem; }
.sds-avail__hero[b-mczs2xlwpo] { position: relative; }
.sds-avail__ptr[b-mczs2xlwpo] { position: absolute; top: 5%; left: calc(100% + 8px); display: flex; align-items: center;
    white-space: nowrap; font-size: .6rem; color: #3ce6dc; }
.sds-avail__ptrline[b-mczs2xlwpo] { display: inline-block; width: 18px; height: 1px; background: #3ce6dc; margin-right: 5px; }
.sds-status[b-mczs2xlwpo] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.sds-status__row[b-mczs2xlwpo] { display: flex; align-items: center; gap: .6rem; font-size: 1rem; }
.sds-status__row b[b-mczs2xlwpo] { color: #eafeff; } .sds-status__row span[b-mczs2xlwpo] { color: #8fa3c8; font-size: .85rem; }
.sds-loc[b-mczs2xlwpo] { color: #3ce6dc; }   /* work-location modifier on the status rows (Away has none) */
.sds-dot[b-mczs2xlwpo] { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.sds-dot--available[b-mczs2xlwpo] { background: #6BB700; box-shadow: 0 0 7px rgba(107,183,0,.8); }
.sds-dot--busy[b-mczs2xlwpo] { background: #C4314B; box-shadow: 0 0 7px rgba(196,49,75,.8); }
.sds-dot--away[b-mczs2xlwpo] { background: #FFAA44; box-shadow: 0 0 7px rgba(255,170,68,.75); }

/* ---- card 5: TAI chat ---- */
.sds-tai[b-mczs2xlwpo] { align-items: center; gap: 1.6rem; }
.sds-chatui[b-mczs2xlwpo] { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sds-chatui__log[b-mczs2xlwpo] { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.sds-msg[b-mczs2xlwpo] { font-size: .52rem; padding: 4px 8px; border-radius: 10px; max-width: 90%; }
.sds-msg--me[b-mczs2xlwpo] { align-self: flex-end; background: color-mix(in srgb, #6f29c9 60%, transparent); color: #fff; border-bottom-right-radius: 3px; }
.sds-chatui__field[b-mczs2xlwpo] { margin-top: 6px; font-size: .5rem; color: #8fa3c8; background: #150c33; border: 1px solid #241c4d;
    border-radius: 999px; padding: 5px 10px; }
.sds-wall[b-mczs2xlwpo] { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sds-wall__head[b-mczs2xlwpo] { font-size: .5rem; font-weight: 700; letter-spacing: 2px; color: #3ce6dc; }
.sds-wall__log[b-mczs2xlwpo] { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.sds-wb[b-mczs2xlwpo] { font-size: .5rem; line-height: 1.3; padding: 5px 8px; border-radius: 10px; max-width: 92%; }
.sds-wb--visitor[b-mczs2xlwpo] { align-self: flex-end; background: color-mix(in srgb, #6f29c9 60%, transparent); color: #fff; border-bottom-right-radius: 3px; }
.sds-wb--tai[b-mczs2xlwpo] { align-self: flex-start; background: color-mix(in srgb, #3ce6dc 18%, transparent);
    border: 1px solid color-mix(in srgb, #3ce6dc 40%, transparent); color: #eafeff; border-bottom-left-radius: 3px; }

/* ---- card 6: games. Drop the board/content framing so the boards fill more of each display ---- */
.sds-games[b-mczs2xlwpo] { gap: 1rem; flex-wrap: wrap; }
.sds-games__one[b-mczs2xlwpo] { display: flex; }
.sds-games[b-mczs2xlwpo]  .md__content { border: none; padding: 0; margin-top: 0; }
.sds-games[b-mczs2xlwpo]  .cb, .sds-games[b-mczs2xlwpo]  .m3, .sds-games[b-mczs2xlwpo]  .mb__well { border: none; box-shadow: none; }

/* ---- card 7: ambient, sensor + breathing wake + rotating greeting ---- */
.sds-ambient[b-mczs2xlwpo] { flex-direction: column; gap: 1.2rem; }
.sds-sensor[b-mczs2xlwpo] { position: relative; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; }
.sds-sensor__icon[b-mczs2xlwpo] { width: 12px; height: 12px; border-radius: 50%; background: #3ce6dc; box-shadow: 0 0 10px 2px #3ce6dc; }
.sds-sensor__wave[b-mczs2xlwpo] { position: absolute; inset: 0; border: 2px solid #3ce6dc; border-radius: 50%; opacity: 0; animation: sds-sonar-b-mczs2xlwpo 2.4s ease-out infinite; }
.sds-sensor__wave:nth-child(2)[b-mczs2xlwpo] { animation-delay: 1.2s; }
@keyframes sds-sonar-b-mczs2xlwpo { 0% { transform: scale(.25); opacity: .8; } 100% { transform: scale(1); opacity: 0; } }
.sds-ambient__screen[b-mczs2xlwpo] { position: relative; }
/* the display breathes (dims up and down) while the card is in view; static-dim otherwise; bright with no JS */
.sds-anim .sds-card--ambient[b-mczs2xlwpo]  .md__screen,
.sds-anim .sds-wake[b-mczs2xlwpo]  .md__screen { filter: brightness(.34) saturate(.75); transition: filter .8s ease; }
.sds-anim .sds-card--ambient.in-view[b-mczs2xlwpo]  .md__screen,
.sds-anim .sds-card.in-view .sds-wake[b-mczs2xlwpo]  .md__screen { animation: sds-breathe-b-mczs2xlwpo 4.5s ease-in-out infinite; }
@keyframes sds-breathe-b-mczs2xlwpo { 0%,100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(.3) saturate(.7); } }
/* rotating greeting overlay (card-owned, cross-fades three messages) */
.sds-greet[b-mczs2xlwpo] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
    background: radial-gradient(60% 32% at 50% 42%, rgba(60,230,220,.16), transparent 70%); }
.sds-greet span[b-mczs2xlwpo] { position: absolute; font-size: 1rem; font-weight: 700; color: #eafeff; letter-spacing: .5px;
    text-shadow: 0 0 10px rgba(60,230,220,.8); opacity: 0; }
.sds-greet span:first-child[b-mczs2xlwpo] { opacity: 1; }              /* no-JS fallback: show one greeting (no overlap) */
.sds-anim .sds-greet span[b-mczs2xlwpo] { opacity: 0; }                /* JS gates; the animation reveals them in turn */
.sds-anim .sds-card.in-view .sds-greet span[b-mczs2xlwpo] { animation: sds-greet-b-mczs2xlwpo 9s ease-in-out infinite; }
.sds-anim .sds-card.in-view .sds-greet span:nth-child(2)[b-mczs2xlwpo] { animation-delay: 3s; }
.sds-anim .sds-card.in-view .sds-greet span:nth-child(3)[b-mczs2xlwpo] { animation-delay: 6s; }
@keyframes sds-greet-b-mczs2xlwpo { 0% { opacity: 0; } 6% { opacity: 1; } 28% { opacity: 1; } 34% { opacity: 0; } 100% { opacity: 0; } }

/* ---- per-card mini sizing (::deep crosses into the child components) ---- */
.sds-scan[b-mczs2xlwpo]  .md__screen, .sds-tai[b-mczs2xlwpo]  .md__screen { height: min(46vh, 360px); }
.sds-avail__hero[b-mczs2xlwpo]  .md__screen { height: min(44vh, 340px); }
.sds-games[b-mczs2xlwpo]  .md__screen { height: min(52vh, 400px); }
.sds-scan[b-mczs2xlwpo]  .mp, .sds-tai[b-mczs2xlwpo]  .mp { max-width: 148px; }

@media (max-width: 820px) {
    .sds-card[b-mczs2xlwpo] { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem; text-align: center; }
    .sds-body[b-mczs2xlwpo] { margin: 0 auto; }
    .sds-status[b-mczs2xlwpo] { align-items: center; }
    .sds-avail__ptr[b-mczs2xlwpo] { display: none; }   /* no room to project on a narrow single column */
    .sds-art--annotated[b-mczs2xlwpo] { padding-right: 0; justify-content: flex-start; }
    .sds-art--annotated[b-mczs2xlwpo]  .md { max-width: 150px; margin: 0; }   /* ::deep to cross into MiniDisplay */
    .sds-games[b-mczs2xlwpo] { gap: .6rem; }
    .sds-games[b-mczs2xlwpo]  .md__screen { height: min(34vh, 260px); }
}

/* Print-to-PDF: one card per page, drop scroll behaviour, keep the dark theme colours. */
@media print {
    .sds-print[b-mczs2xlwpo] { display: none; }
    .sds-anim .sds-copy > *[b-mczs2xlwpo], .sds-anim .sds-art[b-mczs2xlwpo], .sds-anim .reveal[b-mczs2xlwpo] { opacity: 1; transform: none; }   /* show everything */
    .sds-anim .sds-card--scan .sds-reveal-board[b-mczs2xlwpo] { opacity: 1; transform: none; }
    .sds-anim .sds-card--ambient[b-mczs2xlwpo]  .md__screen,
    .sds-anim .sds-wake[b-mczs2xlwpo]  .md__screen { filter: none; animation: none; }
    .sds-anim .sds-greet span[b-mczs2xlwpo] { opacity: 0; animation: none; }
    .sds-anim .sds-greet span:first-child[b-mczs2xlwpo] { opacity: 1; }
    .sds-card[b-mczs2xlwpo] { min-height: auto; break-inside: avoid; break-after: page; page-break-after: always; }
    .sds-card:last-child[b-mczs2xlwpo] { break-after: auto; page-break-after: auto; }
    html[b-mczs2xlwpo], body[b-mczs2xlwpo] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (prefers-reduced-motion: reduce) {
    .sds-anim .sds-copy > *[b-mczs2xlwpo], .sds-anim .sds-art[b-mczs2xlwpo], .sds-anim .reveal[b-mczs2xlwpo] { opacity: 1; transform: none; transition: none; }
    .sds-anim .sds-card--scan .sds-reveal-board[b-mczs2xlwpo] { opacity: 1; transform: none; transition: none; }
    .sds-anim .sds-card--ambient[b-mczs2xlwpo]  .md__screen,
    .sds-anim .sds-wake[b-mczs2xlwpo]  .md__screen { filter: none; transition: none; animation: none; }
    .sds-anim .sds-greet span[b-mczs2xlwpo] { opacity: 0; animation: none; }
    .sds-anim .sds-greet span:first-child[b-mczs2xlwpo] { opacity: 1; }
    .sds-scan__beam[b-mczs2xlwpo]::before, .sds-sensor__wave[b-mczs2xlwpo], .sds-scanui__view[b-mczs2xlwpo], .sds-scanui__line[b-mczs2xlwpo] { animation: none; }
}
/* /Components/Showcases/Signage/MiniBoard.razor.rz.scp.css */
/* Chess and Match-3 render the real board components (their own scoped CSS sizes them to the container).
   Tetris uses a compact well mirroring the real renderer's cell colours. */
.mb[b-16uj8l80xx] { width: 100%; display: flex; justify-content: center; }
.mb--chess[b-16uj8l80xx], .mb--match3[b-16uj8l80xx] { width: 100%; }
/* The real board components size to their container; give them the full width (::deep crosses in). */
.mb--chess[b-16uj8l80xx]  .cb, .mb--match3[b-16uj8l80xx]  .m3 { width: 100%; height: auto; }

.mb__well[b-16uj8l80xx] { display: grid; grid-auto-rows: 1fr; gap: 2px; background: #070011; padding: 5px; border-radius: .5rem;
    border: 2px solid var(--brand-plasma-pink, #D942DB);
    box-shadow: 0 0 14px color-mix(in srgb, var(--brand-plasma-pink, #D942DB) 40%, transparent);
    aspect-ratio: 10 / 20; width: 100%; }
.mb__cell.empty[b-16uj8l80xx] { background: #0a0320; border: 1px solid #160c34; }
.mb__cell.I[b-16uj8l80xx] { background: radial-gradient(125% 125% at 30% 22%, #8ffff2, #149990 72%); }
.mb__cell.O[b-16uj8l80xx] { background: radial-gradient(125% 125% at 30% 22%, #ffeaa0, #d9971a 72%); }
.mb__cell.T[b-16uj8l80xx] { background: radial-gradient(125% 125% at 30% 22%, #ddb6ff, #6f29c9 72%); }
.mb__cell.S[b-16uj8l80xx] { background: radial-gradient(125% 125% at 30% 22%, #a4ffce, #149955 72%); }
.mb__cell.Z[b-16uj8l80xx] { background: radial-gradient(125% 125% at 30% 22%, #ffaec5, #c92f57 72%); }
.mb__cell.J[b-16uj8l80xx] { background: radial-gradient(125% 125% at 30% 22%, #b0c6ff, #2f52c9 72%); }
.mb__cell.L[b-16uj8l80xx] { background: radial-gradient(125% 125% at 30% 22%, #ffc79a, #d9701a 72%); }
/* /Components/Showcases/Signage/MiniDisplay.razor.rz.scp.css */
/* Faithful tall kiosk proportions (540:1920), sized by height so it fits a card. The screen is a
   container: everything inside is sized in cqw/cqh (relative to the screen), so the tall narrow layout
   scales proportionally and never crushes, whatever height the card gives it. */
.md[b-db1n7vke69] { display: flex; justify-content: center; }
/* container-type makes the screen the query container for its DESCENDANTS' cqw units. The screen's OWN box
   properties must stay in px (an element is not its own container, so cqw here would resolve against the
   viewport). */
.md__screen[b-db1n7vke69] { container-type: inline-size; aspect-ratio: 540 / 1920; height: min(56vh, 440px); position: relative;
    border-radius: 10px; overflow: hidden; border: 2px solid #D942DB;
    background: radial-gradient(135% 130% at 50% 0%, #160a32 0%, #070011 72%);
    box-shadow: inset 0 0 14px rgba(0,0,0,.55), 0 0 12px rgba(217,66,219,.35);
    display: flex; flex-direction: column; gap: 4px; padding: 5px; transition: filter .6s ease; }
.md--annotated .md__screen[b-db1n7vke69] { overflow: visible; }

/* Banner: wordmark left, availability + status text right (mirrors .signage__brandrow). */
.md__banner[b-db1n7vke69] { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; position: relative;
    padding-bottom: 2.5cqw; border-bottom: .8cqw solid color-mix(in srgb, #6f29c9 40%, transparent); }
.md__wm[b-db1n7vke69] { font-weight: 700; font-size: 7cqw; color: #cfe9ff; letter-spacing: .2cqw; } .md__ai[b-db1n7vke69] { color: #22D3EE; }
.md__avail[b-db1n7vke69] { display: flex; align-items: center; gap: 2cqw; }
.md__badge[b-db1n7vke69] { width: 5cqw; height: 5cqw; border-radius: 50%; flex-shrink: 0; }
.md__availtext[b-db1n7vke69] { font-size: 4cqw; color: #cfe9ff; white-space: nowrap; }
.md__loc[b-db1n7vke69] { color: #3ce6dc; }   /* work-location suffix, e.g. " · Remote" */
.md__badge--available[b-db1n7vke69] { background: #6BB700; box-shadow: 0 0 3cqw rgba(107,183,0,.8); }
.md__badge--busy[b-db1n7vke69] { background: #C4314B; box-shadow: 0 0 3cqw rgba(196,49,75,.8); }
.md__badge--away[b-db1n7vke69] { background: #FFAA44; box-shadow: 0 0 3cqw rgba(255,170,68,.75); }

.md__tagline[b-db1n7vke69] { text-align: center; font-size: 4cqw; letter-spacing: .3cqw; color: #9fb6d8; position: relative; }
.md__accent[b-db1n7vke69] { color: #D942DB; }

/* Aware row: orb + TAI quip on the left, the scan-QR pushed to the right (mirrors .signage__aware). */
.md__aware[b-db1n7vke69] { display: flex; align-items: center; gap: 3cqw; position: relative; margin-top: 1cqw; }
.md__orb[b-db1n7vke69] { width: 12cqw; height: 12cqw; border-radius: 50%; border: 1.4cqw solid #22D3EE; box-shadow: 0 0 4cqw #22D3EE; flex-shrink: 0; }
.md__quip[b-db1n7vke69] { display: flex; flex-direction: column; min-width: 0; }
.md__quip-who[b-db1n7vke69] { font-size: 3cqw; letter-spacing: .6cqw; text-transform: uppercase; color: #22D3EE; }
.md__quip-line[b-db1n7vke69] { font-size: 4cqw; font-weight: 600; color: #cfe9ff; white-space: nowrap; }
.md__cta[b-db1n7vke69] { margin-left: auto; display: flex; flex-direction: column; align-items: center; gap: 1cqw; flex-shrink: 0; }
.md__qrglyph[b-db1n7vke69] { width: 17cqw; height: 17cqw; border-radius: 2.5cqw; padding: 1.5cqw; background:
    repeating-conic-gradient(#0a0320 0 25%, #fff 0 50%) 50% / 5cqw 5cqw, #fff; border: 1.2cqw solid #fff;
    box-shadow: 0 0 3cqw rgba(60,230,220,.35); box-sizing: border-box; }
.md__qrlabel[b-db1n7vke69] { font-size: 2.6cqw; letter-spacing: .2cqw; text-transform: uppercase; color: #3ce6dc; }

/* Content tier: the star of a portrait display. Fills the remaining height. */
.md__content[b-db1n7vke69] { flex: 1; min-height: 0; border-radius: 3cqw; border: .8cqw dashed #2a1e52; margin-top: 1cqw;
    display: flex; align-items: center; justify-content: center; position: relative; padding: 2cqw; overflow: hidden; }
/* In the anatomy view, make the content region's extent obvious: brighter outline + faint tint. */
.md--annotated .md__content[b-db1n7vke69] { border: 2px dashed #3ce6dc; box-shadow: inset 0 0 12px rgba(60,230,220,.2); background: rgba(60,230,220,.06);
    overflow: visible; }   /* let the "Rotating content" callout escape to the right instead of being clipped */
.md__content > *[b-db1n7vke69] { max-width: 100%; }
.md__chip[b-db1n7vke69] { font-size: 4cqw; letter-spacing: .4cqw; color: #04121a; background: #3ce6dc; padding: 1.5cqw 4cqw; border-radius: 3cqw; }

/* Dim (asleep) state. */
.md--dim .md__screen[b-db1n7vke69] { filter: brightness(.32) saturate(.7); }

/* Annotation callouts: pointer labels to the right of each zone. Fixed size for legibility (they sit
   outside the tiny screen), shown only in md--annotated. */
.md__note[b-db1n7vke69] { position: absolute; right: -32px; top: 50%; transform: translateX(100%) translateY(-50%); white-space: nowrap;
    font-size: .62rem; color: #3ce6dc; background: #0a0320; border: 1px solid #2a1e52; border-radius: 4px; padding: 2px 6px; }
.md__note[b-db1n7vke69]::before { content: ""; position: absolute; left: -11px; top: 50%; width: 11px; height: 1px; background: #3ce6dc; }

@media (prefers-reduced-motion: reduce) { .md__screen[b-db1n7vke69] { transition: none; } }
/* /Components/Showcases/Signage/MiniPhone.razor.rz.scp.css */
/* Phone device frame: thick bezel, notch, home indicator. The companion hub lives on the screen. */
.mp[b-pk552birn4] { position: relative; width: 100%; max-width: 180px; margin: 0 auto; aspect-ratio: 9 / 19;
    border-radius: 26px; background: #05000d; border: 3px solid #2b2350;
    box-shadow: 0 10px 28px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
    padding: 10px 7px; display: flex; flex-direction: column; }
.mp__notch[b-pk552birn4] { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 34%; height: 9px;
    background: #05000d; border-radius: 0 0 9px 9px; z-index: 2; }
.mp__notch[b-pk552birn4]::after { content: ""; position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
    width: 22px; height: 3px; border-radius: 2px; background: #241c4d; }
.mp__home[b-pk552birn4] { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 34%; height: 3px;
    border-radius: 2px; background: #3a3170; }
.mp__screen[b-pk552birn4] { flex: 1; min-height: 0; border-radius: 18px; overflow: hidden; background: #0B0018;
    display: flex; flex-direction: column; padding: 12px 8px 8px; }
.mp__brand[b-pk552birn4] { display: flex; align-items: center; gap: 5px; padding: 2px 2px 6px; }
.mp__dot[b-pk552birn4] { width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 5px #34D399; flex-shrink: 0; }
.mp__wm[b-pk552birn4] { font-weight: 700; font-size: .78rem; color: #cfe9ff; } .mp__ai[b-pk552birn4] { color: #22D3EE; }
.mp__pills[b-pk552birn4] { display: flex; gap: 4px; padding-bottom: 6px; }
.mp__pill[b-pk552birn4] { flex: 1; text-align: center; padding: 4px 0; border-radius: 999px; font-size: .55rem; background: #150c33; color: #9fb6d8; border: 1px solid #241c4d; }
.mp__pill.on[b-pk552birn4] { background: linear-gradient(160deg,#5ffbef,#1aa6a0); color: #04121a; font-weight: 700; border-color: transparent; }
.mp__body[b-pk552birn4] { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 4px 2px; }
/* /Components/Signage/AskController.razor.rz.scp.css */
.ask[b-0ufp1gff56] { height: 100dvh; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; padding: 24px 20px; background: var(--gradient-cosmic-cosmos); color: var(--brand-almost-white); font-family: var(--brand-font); }

.ask__head[b-0ufp1gff56] { display: flex; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--brand-neo-turquoise) 30%, transparent); }

.ask__who[b-0ufp1gff56] { font-size: 22px; font-weight: 700; letter-spacing: .05em; color: var(--brand-neo-turquoise); }

.ask__live[b-0ufp1gff56] { font-size: 13px; color: var(--brand-neo-turquoise); opacity: .85; }

.ask__busy[b-0ufp1gff56] { font-size: 13px; color: var(--brand-light-alloy, #b0bec5); opacity: .8; }

.ask__log[b-0ufp1gff56] { flex: 1; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding-bottom: 8px; }

.ask__msg[b-0ufp1gff56] { max-width: 82%; padding: 12px 16px; border-radius: 14px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }

.ask__msg--visitor[b-0ufp1gff56] { align-self: flex-end; background: var(--brand-nebula-violet); color: var(--brand-almost-white); border-bottom-right-radius: 4px; }

.ask__msg--tai[b-0ufp1gff56] { align-self: flex-start; background: color-mix(in srgb, var(--brand-deep-cosmos) 80%, transparent); border: 1px solid color-mix(in srgb, var(--brand-plasma-pink) 60%, transparent); border-bottom-left-radius: 4px; }

.ask__cursor[b-0ufp1gff56] { display: inline-block; width: 2px; height: 1em; background: var(--brand-plasma-pink); margin-left: 2px; vertical-align: text-bottom; animation: ask-blink-b-0ufp1gff56 1s step-end infinite; }

@keyframes ask-blink-b-0ufp1gff56 { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.ask__input[b-0ufp1gff56] { display: flex; gap: 8px; }

.ask__input input[b-0ufp1gff56] { flex: 1; padding: 12px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--brand-nebula-violet) 60%, transparent); background: color-mix(in srgb, var(--brand-night-violet) 70%, transparent); color: var(--brand-almost-white); font-size: 15px; font-family: var(--brand-font); outline: none; }

.ask__input input:focus[b-0ufp1gff56] { border-color: var(--brand-neo-turquoise); }

.ask__input input:disabled[b-0ufp1gff56] { opacity: .5; }

.ask__input button[b-0ufp1gff56] { padding: 12px 20px; border-radius: 10px; border: none; background: var(--brand-neo-turquoise); color: var(--brand-deep-cosmos); font-weight: 700; font-family: var(--brand-font); font-size: 15px; cursor: pointer; }

.ask__input button:disabled[b-0ufp1gff56] { opacity: .4; cursor: not-allowed; }

.ask__close[b-0ufp1gff56] { align-self: center; padding: 8px 20px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--brand-light-alloy, #b0bec5) 40%, transparent); background: transparent; color: var(--brand-light-alloy, #b0bec5); font-size: 13px; font-family: var(--brand-font); cursor: pointer; }

.ask__close:hover[b-0ufp1gff56] { border-color: var(--brand-plasma-pink); color: var(--brand-plasma-pink); }
/* /Components/Signage/ChessBoard.razor.rz.scp.css */
/* Positioning surface only — outer width is owned by each consumer (phone / display) via ::deep.
   Pieces are sculpted standout tokens (no disc): a large silhouette that lifts off the board. */
.cb[b-l7gmsnilwb] {
    position: relative;
    aspect-ratio: 1;
    padding: 6px;
    box-sizing: border-box;
    border-radius: 16px;
    border: 3px solid var(--brand-plasma-pink, #D942DB);
    background: radial-gradient(135% 130% at 50% 0%, #160a32 0%, #070011 72%);
    box-shadow: inset 0 0 26px rgba(0, 0, 0, .55), 0 0 24px color-mix(in srgb, var(--brand-plasma-pink, #D942DB) 45%, transparent);
    overflow: hidden;
}

.cb__pc[b-l7gmsnilwb], .cb__pop[b-l7gmsnilwb], .cb__hole[b-l7gmsnilwb] {
    position: absolute;
    top: 6px; left: 6px;
    width: calc((100% - 12px) / var(--n));
    height: calc((100% - 12px) / var(--n));
    box-sizing: border-box;
    transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%));
}

/* Removed tile — a recessed cut-out so the board reads as having a hole there. */
.cb__hole[b-l7gmsnilwb] {
    border-radius: 18%;
    background: #05000d;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, .8), inset 0 -1px 1px rgba(255, 255, 255, .04);
    z-index: 0;
}

.cb__pc[b-l7gmsnilwb] {
    --s: 1;
    transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%)) scale(var(--s));
    transition: transform .24s ease-in;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 2;
}

/* The token IS the piece: a crisp SVG silhouette filling the cell. Army colour comes from the SVG fill;
   the drop-shadow lifts it off the board. No disc behind it. */
.cb__gl[b-l7gmsnilwb] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}
.cb__gl svg[b-l7gmsnilwb] {
    width: 86%;
    height: 86%;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}

/* selected: bump + glow. reachable target: plasma ring on the cell. */
.cb__pc--sel[b-l7gmsnilwb] { --s: 1.12; z-index: 3; }
.cb__pc--sel .cb__gl[b-l7gmsnilwb] { filter: drop-shadow(0 0 10px #fff) drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.cb__pc--tgt[b-l7gmsnilwb] { box-shadow: inset 0 0 0 3px var(--brand-plasma-pink, #D942DB), inset 0 0 14px 2px color-mix(in srgb, var(--brand-plasma-pink, #D942DB) 55%, transparent); border-radius: 18%; }

/* charged (a match-4+ power piece): a pulsing energy aura in the army colour, so it reads as "loaded". */
.cb__pc--charged[b-l7gmsnilwb] { z-index: 4; }
.cb__pc--charged .cb__gl svg[b-l7gmsnilwb] { filter: drop-shadow(0 0 2px #fff); }
.cb__pc--charged[b-l7gmsnilwb]::after {
    content: ""; position: absolute; inset: 8%; border-radius: 30%; pointer-events: none;
    box-shadow: 0 0 10px 2px var(--charge, var(--brand-plasma-pink, #D942DB)), inset 0 0 8px 1px var(--charge, var(--brand-plasma-pink, #D942DB));
    animation: cb-charge-b-l7gmsnilwb 1.1s ease-in-out infinite;
}
.cb__pc--charged.cb--white[b-l7gmsnilwb] { --charge: var(--brand-aqua-pulse, #3ce6dc); }
.cb__pc--charged.cb--black[b-l7gmsnilwb] { --charge: var(--brand-plasma-pink, #D942DB); }
@keyframes cb-charge-b-l7gmsnilwb {
    0%, 100% { opacity: .55; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .cb__pc--charged[b-l7gmsnilwb]::after { animation: none; opacity: .8; } }

/* Attack explosion — when a piece is cleared, at its last cell. Three layers: the piece flashes + swells
   (core), a shockwave ring expands, and brand-tinted shards fly outward. The box stays put (base translate);
   only the inner layers animate. */
.cb__pop[b-l7gmsnilwb] {
    pointer-events: none; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    /* set per-cell by the renderer (ms): distance-from-blast-origin, so the explosion ripples outward. */
    --pop-delay: 0;
}
/* All three layers share the ripple delay; `both` fill holds frame-0 (piece resting, bright) during the
   wait so a cell sits loaded until the shockwave reaches it, then pops. */
.cb__pop .cb__gl[b-l7gmsnilwb],
.cb__pop[b-l7gmsnilwb]::before,
.cb__pop[b-l7gmsnilwb]::after { animation-delay: calc(var(--pop-delay, 0) * 1ms); }
.cb__pop .cb__gl[b-l7gmsnilwb] { animation: cb-core-b-l7gmsnilwb .36s ease-out both; }
.cb__pop .cb__gl svg[b-l7gmsnilwb] { filter: none; }   /* drop the resting drop-shadow during the flash */
@keyframes cb-core-b-l7gmsnilwb {
    0%   { transform: scale(1);    filter: brightness(1.6) drop-shadow(0 0 6px #fff); }
    28%  { transform: scale(1.55); filter: brightness(calc(4.2 + var(--combo,0) * 0.4)) drop-shadow(0 0 calc(20px + var(--combo,0)*6px) #fff); }
    100% { transform: scale(0);    opacity: 0; filter: brightness(6); }
}
/* shockwave ring */
.cb__pop[b-l7gmsnilwb]::before {
    content: ""; position: absolute; inset: 10%; border-radius: 50%; pointer-events: none;
    border: 3px solid #ffffff;
    box-shadow: 0 0 16px 2px var(--brand-plasma-pink, #D942DB), inset 0 0 12px var(--brand-aqua-pulse, #3ce6dc);
    animation: cb-wave-b-l7gmsnilwb .42s ease-out both;
}
@keyframes cb-wave-b-l7gmsnilwb {
    0%   { transform: scale(.25); opacity: 1; }
    70%  { opacity: .8; }
    100% { transform: scale(calc(2.3 + var(--combo, 0) * 0.3)); opacity: 0; }
}
/* radiating shards — 8 sparks flung outward, brand-tinted (aqua + plasma-pink + white core) */
.cb__pop[b-l7gmsnilwb]::after {
    content: ""; position: absolute; inset: -12%; border-radius: 50%; pointer-events: none;
    background:
        radial-gradient(circle, #fff 0, transparent 42%) 50% 0 / 24% 24% no-repeat,
        radial-gradient(circle, #fff 0, transparent 42%) 50% 100% / 24% 24% no-repeat,
        radial-gradient(circle, var(--brand-aqua-pulse, #3ce6dc) 0, transparent 44%) 0 50% / 24% 24% no-repeat,
        radial-gradient(circle, var(--brand-aqua-pulse, #3ce6dc) 0, transparent 44%) 100% 50% / 24% 24% no-repeat,
        radial-gradient(circle, var(--brand-plasma-pink, #D942DB) 0, transparent 44%) 14% 14% / 22% 22% no-repeat,
        radial-gradient(circle, var(--brand-plasma-pink, #D942DB) 0, transparent 44%) 86% 14% / 22% 22% no-repeat,
        radial-gradient(circle, var(--brand-plasma-pink, #D942DB) 0, transparent 44%) 14% 86% / 22% 22% no-repeat,
        radial-gradient(circle, var(--brand-plasma-pink, #D942DB) 0, transparent 44%) 86% 86% / 22% 22% no-repeat;
    animation: cb-shards-b-l7gmsnilwb .46s ease-out both;
}
@keyframes cb-shards-b-l7gmsnilwb {
    0%   { transform: scale(.2) rotate(0deg); opacity: 1; }
    100% { transform: scale(calc(2.7 + var(--combo, 0) * 0.4)) rotate(35deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cb__pc[b-l7gmsnilwb] { transition: none; }
    .cb__pop .cb__gl[b-l7gmsnilwb] { animation: cb-core-fade-b-l7gmsnilwb .2s ease-out forwards; animation-delay: 0s; }
    .cb__pop[b-l7gmsnilwb]::before, .cb__pop[b-l7gmsnilwb]::after { display: none; }
    @keyframes cb-core-fade-b-l7gmsnilwb { to { opacity: 0; } }
}
/* /Components/Signage/ChessController.razor.rz.scp.css */
.cc[b-zz808nzrgl] { height: 100dvh; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: #0B0018; color: #cfe9ff; font-family: 'Space Grotesk', system-ui, sans-serif; padding: 1rem; }
.cc__msg[b-zz808nzrgl] { color: #9fb6d8; text-align: center; }
.cc__h[b-zz808nzrgl] { color: #cfe9ff; margin: 0 0 .4rem; font-weight: 700; }
.cc__pick[b-zz808nzrgl] { display: flex; flex-direction: column; gap: .8rem; width: 100%; max-width: 360px; }
.cc__lvl[b-zz808nzrgl] { display: flex; flex-direction: column; align-items: flex-start; padding: .9rem 1.2rem; border: none; border-radius: .8rem; font-size: 1.3rem; font-weight: 700; color: #0B0018; cursor: pointer; }
.cc__lvl span[b-zz808nzrgl] { font-size: .75rem; font-weight: 500; opacity: .8; }
.cc__lvl--easy[b-zz808nzrgl] { background: #4be3a0; }
.cc__lvl--med[b-zz808nzrgl] { background: #3ce6dc; }
.cc__lvl--hard[b-zz808nzrgl] { background: #ff7da8; }
.cc__hud[b-zz808nzrgl] { width: 100%; max-width: 460px; display: flex; justify-content: space-between; font-weight: 700; }
/* ::deep so the rule reaches the .cb board inside the child ChessBoard component (scoped CSS doesn't
   cross component boundaries). A definite width lets aspect-ratio:1 give the board a real height. */
.cc[b-zz808nzrgl]  .cb { width: min(100%, 60dvh, 460px); margin: 0 auto; }
.cc__hint[b-zz808nzrgl] { font-size: .8rem; color: #8a86b8; text-align: center; }
.cc__over[b-zz808nzrgl] { text-align: center; display: flex; flex-direction: column; gap: .6rem; align-items: center; }
.cc__score[b-zz808nzrgl] { font-size: 3rem; color: #3ce6dc; margin: 0; } .cc__sub[b-zz808nzrgl] { color: #9fb6d8; margin: 0; }
.cc__handle[b-zz808nzrgl] { font-size: 1.6rem; text-align: center; text-transform: uppercase; width: 7rem; padding: .4rem; background: #11082e; border: 1px solid #241c4d; border-radius: .5rem; color: #cfe9ff; }
.cc__submit[b-zz808nzrgl], .cc__retry[b-zz808nzrgl] { padding: .8rem 1.6rem; border: none; border-radius: .6rem; background: #3ce6dc; color: #0B0018; font-weight: 700; } .cc__submit[disabled][b-zz808nzrgl] { opacity: .5; }
/* /Components/Signage/ClimberController.razor.rz.scp.css */
.climb[b-x3tsgx7nbj] { height: 100dvh; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center;
         gap: 1.5rem; background: #0B0018; color: #cfe9ff; font-family: 'Space Grotesk', system-ui, sans-serif; padding: 1.5rem; }
.climb__msg[b-x3tsgx7nbj] { font-size: 1.1rem; text-align: center; color: #9fb6d8; }

/* Button pad (#303): direction cross with JUMP in the centre. touch-action:none on every button
   (it doesn't inherit) so a press never turns into a scroll/zoom gesture mid-hold. */
.climbpad[b-x3tsgx7nbj] {
    display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
    gap: .7rem; width: min(78vw, 340px); aspect-ratio: 1;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.climbpad__b[b-x3tsgx7nbj] {
    padding: 0; display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(60, 230, 220, .33); border-radius: 1rem;
    background: #150d38; color: #5ffbef; font-size: 1.7rem;
    touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.climbpad__b:active[b-x3tsgx7nbj] { background: #241a55; box-shadow: inset 0 0 12px rgba(60, 230, 220, .2); }
.climbpad__b--up[b-x3tsgx7nbj] { grid-area: 1 / 2; }
.climbpad__b--left[b-x3tsgx7nbj] { grid-area: 2 / 1; }
.climbpad__b--right[b-x3tsgx7nbj] { grid-area: 2 / 3; }
.climbpad__b--down[b-x3tsgx7nbj] { grid-area: 3 / 2; }
.climbpad__jump[b-x3tsgx7nbj] {
    grid-area: 2 / 2; border: none; border-radius: 50%;
    font-size: .95rem; font-weight: 700; letter-spacing: 1px;
    color: #0B0018; background: linear-gradient(160deg, #5ffbef, #1aa6a0);
    box-shadow: 0 0 14px rgba(60, 230, 220, .27);
    touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.climbpad__jump:active[b-x3tsgx7nbj] { filter: brightness(.88); }

.climb__over[b-x3tsgx7nbj] { text-align: center; display: flex; flex-direction: column; gap: 0.6rem; align-items: center; }
.climb__height[b-x3tsgx7nbj] { font-size: 3rem; color: #3ce6dc; margin: 0; }
.climb__sub[b-x3tsgx7nbj] { color: #9fb6d8; margin: 0; }
.climb__retry[b-x3tsgx7nbj] { padding: .8rem 1.6rem; font-size: 1rem; border-radius: .6rem; border: none;
                background: #3ce6dc; color: #0B0018; font-weight: 700; }
.climb__label[b-x3tsgx7nbj] { font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; color: #8a86b8; margin-top: .5rem; }
.climb__handle[b-x3tsgx7nbj] { font-size: 1.6rem; text-align: center; text-transform: uppercase; width: 7rem; padding: .4rem;
                 background: #11082e; border: 1px solid #241c4d; border-radius: .5rem; color: #cfe9ff; }
.climb__submit[b-x3tsgx7nbj] { padding: .8rem 1.6rem; font-size: 1rem; border-radius: .6rem; border: none;
                 background: #3ce6dc; color: #0B0018; font-weight: 700; }
.climb__submit[disabled][b-x3tsgx7nbj] { opacity: .5; }
/* /Components/Signage/ContactPanel.razor.rz.scp.css */
/* "Get in touch" tab: centred intro + teal CTA, on the companion's dark hub theme. */
.gt[b-5ilvzgnesg] { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1.5rem; text-align: center; padding: 1.5rem 1.6rem; }
.gt__lead[b-5ilvzgnesg] { font-size: 1.35rem; font-weight: 700; color: #eafeff; margin: 0 0 .5rem; }
.gt__sub[b-5ilvzgnesg] { font-size: .95rem; line-height: 1.55; color: #9fb6d8; margin: 0 auto; max-width: 30ch; }
.gt__cta[b-5ilvzgnesg] { display: inline-block; padding: .8rem 1.9rem; border-radius: 999px; text-decoration: none; font-weight: 700;
    color: #04121a; background: linear-gradient(160deg,#5ffbef,#1aa6a0); box-shadow: 0 0 18px rgba(60,230,220,.35); }
/* /Components/Signage/ControlPanel.razor.rz.scp.css */
/* Wrapper only — the control UI (and its styling) lives in ControlPanelView.
   Scoped rules here can't reach ControlPanelView's elements without ::deep, so its
   own scoped stylesheet (ControlPanelView.razor.css) owns the look. */
.ctrl[b-l98lt27slt] { color: #cfe9ff; background: #0B0018; min-height: 100dvh; }
/* /Components/Signage/ControlPanelView.razor.rz.scp.css */
.cpv[b-xmxlsihqtd] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem;
    color: #cfe9ff;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    height: 100dvh;            /* fill the screen exactly — no page scroll */
    box-sizing: border-box;
    overflow: hidden;
}

.cpv__msg[b-xmxlsihqtd] { color: #9fb6d8; text-align: center; padding: 2rem 1rem; }

.cpv__label[b-xmxlsihqtd] {
    font-size: .62rem;
    color: #8a86b8;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.cpv__title[b-xmxlsihqtd] {
    font-size: 1.6rem;
    color: #3ce6dc;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: .2rem;
}

/* The swipe surface — the primary control. Swipe left/right to advance/rewind the display. */
.cpv__surface[b-xmxlsihqtd] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;           /* take the leftover height so the whole view fits without scrolling */
    min-height: 0;
    border-radius: 1.3rem;
    padding: 1rem;
    background: radial-gradient(130% 90% at 50% 0%, #1a1140 0%, #0c0420 72%);
    border: 1px solid #3ce6dc33;
    box-shadow: inset 0 0 50px #3ce6dc14, 0 8px 30px #00000055;
    touch-action: pan-y;           /* let the page scroll vertically; we own horizontal swipes */
    user-select: none;
    -webkit-user-select: none;
    transition: border-color .2s ease, background .2s ease;
}
.cpv__surface.is-held[b-xmxlsihqtd] {
    border-color: #ffd16655;
    background: radial-gradient(130% 90% at 50% 0%, #2a1f12 0%, #0c0420 72%);
}

.cpv__hint[b-xmxlsihqtd] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    color: #b6b2dd;
    font-size: 1.05rem;
    letter-spacing: .5px;
    pointer-events: none;          /* taps fall through to the surface/edge buttons */
}
.cpv__sub[b-xmxlsihqtd] { font-size: .72rem; color: #6f6b97; letter-spacing: 1px; text-transform: uppercase; }
.cpv__held[b-xmxlsihqtd] { color: #ffd166; font-weight: 700; font-size: 1.2rem; }

.cpv__edge[b-xmxlsihqtd] {
    background: none;
    border: none;
    color: #3ce6dc;
    font-size: 3rem;
    line-height: 1;
    padding: .6rem 1.1rem;
    opacity: .55;
    cursor: pointer;
    transition: opacity .12s ease, transform .12s ease;
}
.cpv__edge:active[b-xmxlsihqtd] { opacity: 1; transform: scale(.86); }

.cpv__pause[b-xmxlsihqtd] {
    padding: 1.15rem;
    border-radius: 1rem;
    border: 1px solid #3ce6dc55;
    background: #11082e;
    color: #cfe9ff;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cpv__pause.is-held[b-xmxlsihqtd] {
    background: #3ce6dc;
    color: #0B0018;
    border-color: #3ce6dc;
}
/* /Components/Signage/ExperienceChooser.razor.rz.scp.css */
.chooser[b-2ldv5nrnn5] { display: flex; flex-direction: column; gap: .7rem; padding: .8rem; }
.chooser__hd[b-2ldv5nrnn5] { font-size: .7rem; color: #8a86b8; text-transform: uppercase; letter-spacing: 1px; }

/* Card: the header row toggles the fold-out; the explicit Play button starts the game.
   flex:none is load-bearing (#301): in the hub the chooser is a height-bounded scroll container,
   and shrinkable cards would collapse (the foldin's overflow:hidden zeroes their minimum size)
   to fit instead of overflowing — clipping the fold-out and leaving nothing to scroll. */
.chooser__card[b-2ldv5nrnn5] { flex: none; background: #11082e; border: 1px solid #241c4d; border-radius: .8rem; overflow: hidden; }
.chooser__card--open[b-2ldv5nrnn5] { background: #170b3c; border-color: rgba(60, 230, 220, .35); }
.chooser__head[b-2ldv5nrnn5] { display: flex; align-items: center; gap: .7rem; padding: .9rem; width: 100%;
                 background: none; border: none; color: #cfe9ff; font: inherit; cursor: pointer;
                 -webkit-user-select: none; user-select: none; }
.chooser__ico[b-2ldv5nrnn5] { font-size: 1.8rem; }
.chooser__t[b-2ldv5nrnn5] { font-size: 1rem; font-weight: 700; flex: 1; text-align: left; }
.chooser__chev[b-2ldv5nrnn5] { color: #8a86b8; font-size: .9rem; transition: rotate .25s ease; }
.chooser__card--open .chooser__chev[b-2ldv5nrnn5] { rotate: 180deg; }

/* Fold-out: the grid-rows trick animates height without any JS measuring. */
.chooser__fold[b-2ldv5nrnn5] { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.chooser__card--open .chooser__fold[b-2ldv5nrnn5] { grid-template-rows: 1fr; }
.chooser__foldin[b-2ldv5nrnn5] { overflow: hidden; }
.chooser__body[b-2ldv5nrnn5] { padding: 0 .9rem .95rem; display: flex; flex-direction: column; gap: .65rem; }
.chooser__desc[b-2ldv5nrnn5] { font-size: .85rem; color: #9fb6d8; line-height: 1.45; margin: 0; }
.chooser__how[b-2ldv5nrnn5] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .3rem; }
.chooser__how li[b-2ldv5nrnn5] { font-size: .8rem; color: #cfe9ff; display: flex; gap: .5rem; align-items: baseline; }
.chooser__how li[b-2ldv5nrnn5]::before { content: "▸"; color: #3ce6dc; flex: none; }
.chooser__how li[b-2ldv5nrnn5]  b { color: #3ce6dc; font-weight: 600; }
.chooser__play[b-2ldv5nrnn5] { margin-top: .2rem; padding: .8rem; border: none; border-radius: .7rem; cursor: pointer;
                 font-size: 1rem; font-weight: 700; letter-spacing: 1px;
                 color: #0B0018; background: linear-gradient(160deg, #5ffbef, #1aa6a0);
                 box-shadow: 0 0 14px rgba(60, 230, 220, .25); }
.chooser__play:active[b-2ldv5nrnn5] { filter: brightness(.88); }

.chooser__back[b-2ldv5nrnn5] { padding: .4rem .6rem; }
.chooser__back button[b-2ldv5nrnn5] { background: none; border: none; color: #3ce6dc; font-size: .9rem; }
/* /Components/Signage/GameChooser.razor.rz.scp.css */
.chooser[b-r2vpn0mjl8] { display: flex; flex-direction: column; gap: .7rem; padding: .8rem; }
.chooser__hd[b-r2vpn0mjl8] { font-size: .7rem; color: #8a86b8; text-transform: uppercase; letter-spacing: 1px; }

/* Card: the header row toggles the fold-out; the explicit Play button starts the game.
   flex:none is load-bearing (#301): in the hub the chooser is a height-bounded scroll container,
   and shrinkable cards would collapse (the foldin's overflow:hidden zeroes their minimum size)
   to fit instead of overflowing — clipping the fold-out and leaving nothing to scroll. */
.chooser__card[b-r2vpn0mjl8] { flex: none; background: #11082e; border: 1px solid #241c4d; border-radius: .8rem; overflow: hidden; }
.chooser__card--open[b-r2vpn0mjl8] { background: #170b3c; border-color: rgba(60, 230, 220, .35); }
.chooser__head[b-r2vpn0mjl8] { display: flex; align-items: center; gap: .7rem; padding: .9rem; width: 100%;
                 background: none; border: none; color: #cfe9ff; font: inherit; cursor: pointer;
                 -webkit-user-select: none; user-select: none; }
.chooser__ico[b-r2vpn0mjl8] { font-size: 1.8rem; }
.chooser__t[b-r2vpn0mjl8] { font-size: 1rem; font-weight: 700; flex: 1; text-align: left; }
.chooser__chev[b-r2vpn0mjl8] { color: #8a86b8; font-size: .9rem; transition: rotate .25s ease; }
.chooser__card--open .chooser__chev[b-r2vpn0mjl8] { rotate: 180deg; }

/* Fold-out: the grid-rows trick animates height without any JS measuring. */
.chooser__fold[b-r2vpn0mjl8] { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.chooser__card--open .chooser__fold[b-r2vpn0mjl8] { grid-template-rows: 1fr; }
.chooser__foldin[b-r2vpn0mjl8] { overflow: hidden; }
.chooser__body[b-r2vpn0mjl8] { padding: 0 .9rem .95rem; display: flex; flex-direction: column; gap: .65rem; }
.chooser__desc[b-r2vpn0mjl8] { font-size: .85rem; color: #9fb6d8; line-height: 1.45; margin: 0; }
.chooser__how[b-r2vpn0mjl8] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .3rem; }
.chooser__how li[b-r2vpn0mjl8] { font-size: .8rem; color: #cfe9ff; display: flex; gap: .5rem; align-items: baseline; }
.chooser__how li[b-r2vpn0mjl8]::before { content: "▸"; color: #3ce6dc; flex: none; }
.chooser__how li[b-r2vpn0mjl8]  b { color: #3ce6dc; font-weight: 600; }
.chooser__play[b-r2vpn0mjl8] { margin-top: .2rem; padding: .8rem; border: none; border-radius: .7rem; cursor: pointer;
                 font-size: 1rem; font-weight: 700; letter-spacing: 1px;
                 color: #0B0018; background: linear-gradient(160deg, #5ffbef, #1aa6a0);
                 box-shadow: 0 0 14px rgba(60, 230, 220, .25); }
.chooser__play:active[b-r2vpn0mjl8] { filter: brightness(.88); }

.chooser__back[b-r2vpn0mjl8] { padding: .4rem .6rem; }
.chooser__back button[b-r2vpn0mjl8] { background: none; border: none; color: #3ce6dc; font-size: .9rem; }
/* /Components/Signage/Match3Board.razor.rz.scp.css */
/* The board is a positioning surface: gems are absolutely placed by --r/--c and glide via a transform
   transition when they move (fall/swap). Outer width is owned by each consumer (phone / display) via
   ::deep. Plasma frame lives here so it hugs the actual board. */
.m3[b-ohehli34vz] {
    position: relative;
    aspect-ratio: 1;
    padding: 6px;
    box-sizing: border-box;
    border-radius: 16px;
    border: 3px solid var(--brand-plasma-pink, #D942DB);
    background: radial-gradient(135% 130% at 50% 0%, #160a32 0%, #070011 72%);
    box-shadow: inset 0 0 26px rgba(0, 0, 0, .55), 0 0 24px color-mix(in srgb, var(--brand-plasma-pink, #D942DB) 45%, transparent);
    overflow: hidden;
}

/* The playfield (inside the padding) is the positioning context for gems. */
.m3__gem[b-ohehli34vz], .m3__pop[b-ohehli34vz] {
    position: absolute;
    top: 6px; left: 6px;
    width: calc((100% - 12px) / var(--n));
    height: calc((100% - 12px) / var(--n));
    box-sizing: border-box;
}

.m3__gem[b-ohehli34vz] {
    --s: .9;                                 /* shrink-to-cell gap; bumped on select */
    transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%)) scale(var(--s));
    transition: transform .24s ease-in;       /* the glide — gravity-like accelerate */
    border-radius: 24%;
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, .5),
        inset 0 -5px 7px rgba(0, 0, 0, .42),
        0 2px 4px rgba(0, 0, 0, .4);
    cursor: pointer;
}
.m3__gem[b-ohehli34vz]::before {                            /* glossy top-left shine */
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(56% 42% at 32% 24%, rgba(255, 255, 255, .72), rgba(255, 255, 255, 0) 62%);
}
.m3__gem--sel[b-ohehli34vz] {
    --s: 1.0;
    z-index: 3;
    box-shadow: 0 0 0 3px #fff, 0 0 16px 3px rgba(255, 255, 255, .85), inset 0 2px 3px rgba(255, 255, 255, .5);
}

/* glossy candy gems — light from the top-left */
.c1[b-ohehli34vz] { background: radial-gradient(125% 125% at 30% 24%, #9ffff5, #149990 72%); }
.c2[b-ohehli34vz] { background: radial-gradient(125% 125% at 30% 24%, #ffaec5, #c92f57 72%); }
.c3[b-ohehli34vz] { background: radial-gradient(125% 125% at 30% 24%, #ddb6ff, #6f29c9 72%); }
.c4[b-ohehli34vz] { background: radial-gradient(125% 125% at 30% 24%, #b0c6ff, #2f52c9 72%); }
.c5[b-ohehli34vz] { background: radial-gradient(125% 125% at 30% 24%, #ffeaa0, #d9971a 72%); }
.c6[b-ohehli34vz] { background: radial-gradient(125% 125% at 30% 24%, #a4ffce, #149955 72%); }

/* explosion tint per gem colour — read by the pop layers (ring + shards) below */
.c1[b-ohehli34vz] { --pop: #3ff5e6; } .c2[b-ohehli34vz] { --pop: #ff5c8a; } .c3[b-ohehli34vz] { --pop: #b26bff; }
.c4[b-ohehli34vz] { --pop: #5c86ff; } .c5[b-ohehli34vz] { --pop: #ffcf5c; } .c6[b-ohehli34vz] { --pop: #3fe88a; }

/* striped power-up — a shimmer travelling along the stripe direction */
.sp-h[b-ohehli34vz]::after, .sp-v[b-ohehli34vz]::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    mix-blend-mode: soft-light;
}
.sp-h[b-ohehli34vz]::after { background: repeating-linear-gradient(90deg, #fff 0 3px, transparent 3px 9px); animation: m3-stripe-x-b-ohehli34vz 1.1s linear infinite; }
.sp-v[b-ohehli34vz]::after { background: repeating-linear-gradient(0deg, #fff 0 3px, transparent 3px 9px); animation: m3-stripe-y-b-ohehli34vz 1.1s linear infinite; }
@keyframes m3-stripe-x-b-ohehli34vz { to { background-position-x: 12px; } }
@keyframes m3-stripe-y-b-ohehli34vz { to { background-position-y: 12px; } }

/* wrapped — a pulsing energy ring */
.sp-w[b-ohehli34vz] { animation: m3-wrap-b-ohehli34vz 1.2s ease-in-out infinite; }
@keyframes m3-wrap-b-ohehli34vz {
    0%, 100% { box-shadow: inset 0 0 0 3px rgba(255,255,255,.5), 0 0 9px #ff5c8a, inset 0 2px 3px rgba(255,255,255,.5); }
    50%      { box-shadow: inset 0 0 0 3px rgba(255,255,255,.9), 0 0 18px #ff5c8a, inset 0 2px 3px rgba(255,255,255,.5); }
}

/* colour bomb — a glossy prism orb */
.sp-b[b-ohehli34vz] { background: radial-gradient(circle at 50% 38%, #fff 0%, #ffd166 16%, #5ffbef 38%, #8c42db 68%, #1a0633 92%); }

/* Attack explosion — at the cleared gem's last cell, colorised by the matched gem (--pop): a bright core
   flash, an expanding shockwave ring, and shards radiating out. The box stays put (no scale) so the ring +
   shards fly out independently rather than collapsing with the core. */
.m3__pop[b-ohehli34vz] {
    transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%));
    border-radius: 24%;
    pointer-events: none;
    z-index: 5;
    animation: m3-core-b-ohehli34vz .32s ease-out forwards;
}
@keyframes m3-core-b-ohehli34vz {
    0%   { filter: brightness(1.5) saturate(1.6); box-shadow: 0 0 6px 1px var(--pop, #fff); opacity: 1; }
    30%  { filter: brightness(calc(3.4 + var(--combo,0) * 0.35)) saturate(2);   box-shadow: 0 0 calc(24px + var(--combo,0)*7px) calc(7px + var(--combo,0)*2px) var(--pop, #fff); }
    100% { filter: brightness(4);                 box-shadow: 0 0 34px 12px transparent; opacity: 0; }
}
/* shockwave ring — tinted by the gem colour */
.m3__pop[b-ohehli34vz]::before {
    content: ""; position: absolute; inset: 4%; border-radius: 50%; pointer-events: none;
    border: 3px solid #fff;
    box-shadow: 0 0 16px 2px var(--pop, #fff), inset 0 0 10px var(--pop, #fff);
    animation: m3-wave-b-ohehli34vz .44s ease-out forwards;
}
@keyframes m3-wave-b-ohehli34vz {
    0%   { transform: scale(.3); opacity: 1; }
    70%  { opacity: .75; }
    100% { transform: scale(calc(2.3 + var(--combo, 0) * 0.3)); opacity: 0; }
}
/* radiating shards — white core sparks + gem-coloured ones */
.m3__pop[b-ohehli34vz]::after {
    content: ""; position: absolute; inset: -14%; border-radius: 50%; pointer-events: none;
    background:
        radial-gradient(circle, #fff 0, transparent 42%) 50% 0 / 26% 26% no-repeat,
        radial-gradient(circle, #fff 0, transparent 42%) 50% 100% / 26% 26% no-repeat,
        radial-gradient(circle, var(--pop, #fff) 0, transparent 44%) 0 50% / 26% 26% no-repeat,
        radial-gradient(circle, var(--pop, #fff) 0, transparent 44%) 100% 50% / 26% 26% no-repeat,
        radial-gradient(circle, var(--pop, #fff) 0, transparent 44%) 14% 14% / 24% 24% no-repeat,
        radial-gradient(circle, var(--pop, #fff) 0, transparent 44%) 86% 14% / 24% 24% no-repeat,
        radial-gradient(circle, var(--pop, #fff) 0, transparent 44%) 14% 86% / 24% 24% no-repeat,
        radial-gradient(circle, var(--pop, #fff) 0, transparent 44%) 86% 86% / 24% 24% no-repeat;
    animation: m3-shards-b-ohehli34vz .48s ease-out forwards;
}
@keyframes m3-shards-b-ohehli34vz {
    0%   { transform: scale(.2) rotate(0deg); opacity: 1; }
    100% { transform: scale(calc(2.7 + var(--combo, 0) * 0.4)) rotate(30deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .m3__gem[b-ohehli34vz] { transition: none; }
    .sp-h[b-ohehli34vz]::after, .sp-v[b-ohehli34vz]::after, .sp-w[b-ohehli34vz], .sp-b[b-ohehli34vz] { animation: none; }
    .m3__pop[b-ohehli34vz] { animation: m3-pop-fade-b-ohehli34vz .2s ease-out forwards; }
    .m3__pop[b-ohehli34vz]::before, .m3__pop[b-ohehli34vz]::after { display: none; }
    @keyframes m3-pop-fade-b-ohehli34vz { to { opacity: 0; } }
}
/* /Components/Signage/Match3Controller.razor.rz.scp.css */
.m3c[b-r6ldxfa5wr] { height: 100dvh; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: #0B0018; color: #cfe9ff; font-family: 'Space Grotesk', system-ui, sans-serif; padding: 1rem; }
.m3c__msg[b-r6ldxfa5wr] { color: #9fb6d8; text-align: center; }
.m3c__hud[b-r6ldxfa5wr] { width: 100%; max-width: 460px; display: flex; justify-content: space-between; font-weight: 700; }
/* ::deep so the rule reaches the .m3 board inside the child Match3Board component (scoped CSS
   doesn't cross component boundaries otherwise). A definite width is what lets aspect-ratio:1
   give the board a real height for grid-auto-rows to fill. */
.m3c[b-r6ldxfa5wr]  .m3 { width: min(100%, 60dvh, 460px); margin: 0 auto; }
.m3c__hint[b-r6ldxfa5wr] { font-size: .8rem; color: #8a86b8; }
.m3c__over[b-r6ldxfa5wr] { text-align: center; display: flex; flex-direction: column; gap: .6rem; align-items: center; }
.m3c__score[b-r6ldxfa5wr] { font-size: 3rem; color: #3ce6dc; margin: 0; } .m3c__sub[b-r6ldxfa5wr] { color: #9fb6d8; margin: 0; }
.m3c__handle[b-r6ldxfa5wr] { font-size: 1.6rem; text-align: center; text-transform: uppercase; width: 7rem; padding: .4rem; background: #11082e; border: 1px solid #241c4d; border-radius: .5rem; color: #cfe9ff; }
.m3c__submit[b-r6ldxfa5wr], .m3c__retry[b-r6ldxfa5wr] { padding: .8rem 1.6rem; border: none; border-radius: .6rem; background: #3ce6dc; color: #0B0018; font-weight: 700; } .m3c__submit[disabled][b-r6ldxfa5wr] { opacity: .5; }
/* /Components/Signage/PresenceBadge.razor.rz.scp.css */
.presence-badge[b-7l71knbx6t] { width: 16px; height: 16px; display: block; flex-shrink: 0; }

/* Subtle status-coloured glow around the dot (matches each status' fill). */
.presence-badge--available[b-7l71knbx6t] { filter: drop-shadow(0 0 4px rgba(107, 183, 0, .8)); }
.presence-badge--busy[b-7l71knbx6t],
.presence-badge--inmeeting[b-7l71knbx6t],
.presence-badge--donotdisturb[b-7l71knbx6t] { filter: drop-shadow(0 0 4px rgba(196, 49, 75, .8)); }
.presence-badge--away[b-7l71knbx6t] { filter: drop-shadow(0 0 4px rgba(255, 170, 68, .75)); }
.presence-badge--outofoffice[b-7l71knbx6t] { filter: drop-shadow(0 0 4px rgba(180, 0, 158, .75)); }
.presence-badge--offline[b-7l71knbx6t] { filter: drop-shadow(0 0 3px rgba(138, 136, 134, .5)); }
/* /Components/Signage/SignageChess.razor.rz.scp.css */
.sch[b-38qft2euah] { display: flex; flex-direction: column; gap: .6rem; height: 100%; padding: .5rem; }

/* HUD + board are a single centred group, so the score/time sit directly above the board rather than
   pinned to the top of the content tier. The leaderboard stays at the bottom. */
.sch__stage[b-38qft2euah] { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; }

/* The board is sized by container WIDTH (inline-size), so its height is deterministic and the wrap hugs
   it with no vertical slack — that's what lets the HUD sit right above the board. cqw is zoom-stable on
   the fixed-width signage strip. ::deep reaches the board inside the ChessBoard component. */
.sch__boardwrap[b-38qft2euah] { width: 100%; container-type: inline-size; display: flex; justify-content: center; }
.sch__boardwrap[b-38qft2euah]  .cb { width: min(100cqw, 100%); }

/* Score / time: larger, full board width, directly above the board. */
.sch__hud[b-38qft2euah] { display: flex; gap: .6rem; width: 100%; }
.sch__stat[b-38qft2euah], .sch__time[b-38qft2euah] { flex: 1; background: #11082e; border: 1px solid #241c4d; border-radius: .7rem; padding: .5rem .8rem; text-align: center; }
.sch__stat .k[b-38qft2euah], .sch__time .k[b-38qft2euah] { display: block; font-size: .72rem; color: #8a86b8; text-transform: uppercase; letter-spacing: 1px; }
.sch__stat .v[b-38qft2euah], .sch__time .v[b-38qft2euah] { font-size: 1.9rem; font-weight: 700; color: #cfe9ff; line-height: 1.1; }

.sch__over[b-38qft2euah] { text-align: center; color: #3ce6dc; padding: .3rem; }
.sch__over .s[b-38qft2euah] { display: block; font-size: 2rem; font-weight: 700; }
.sch__over .t[b-38qft2euah] { font-size: .8rem; color: #9fb6d8; }
/* /Components/Signage/SignageClimber.razor.rz.scp.css */
.climber[b-qg01608tit] { display: flex; flex-direction: column; gap: .6rem; height: 100%; padding: .5rem; }

/* HUD: height readout + a connection pip (turquoise while a snapshot is live, dim while none has arrived). */
.climber__hud[b-qg01608tit] { display: flex; align-items: center; gap: .6rem; width: 100%; }
.climber__stat[b-qg01608tit] { flex: 1; min-width: 0; background: rgba(5, 0, 10, .5); border: 1px solid rgba(140, 66, 219, .3); border-radius: .7rem; padding: .35rem .5rem; text-align: center; }
.climber__stat .k[b-qg01608tit] { display: block; font-size: .58rem; color: var(--brand-light-alloy, #8a86b8); text-transform: uppercase; letter-spacing: 1px; font-family: ui-monospace, "Cascadia Code", monospace; }
.climber__stat .v[b-qg01608tit] { font-size: 1.35rem; font-weight: 700; color: var(--brand-aqua-pulse, #22D3EE); line-height: 1.1; font-family: ui-monospace, "Cascadia Code", monospace; text-shadow: 0 0 14px color-mix(in srgb, var(--brand-aqua-pulse, #22D3EE) 45%, transparent); }
/* Lives: mini mascot-head pips (aqua rounded head + dark visor), dim purple once spent. */
.climber__lives[b-qg01608tit] { display: flex; align-items: center; gap: .35rem; }
.climber__life[b-qg01608tit] {
    width: 1rem; height: 1.05rem; border-radius: 30% 30% 24% 24%;
    background: linear-gradient(180deg, #3fe3f2 0%, #16a2c0 100%);
    box-shadow: 0 0 8px rgba(34, 211, 238, .55);
    position: relative;
}
.climber__life[b-qg01608tit]::before {
    content: ""; position: absolute; left: 16%; right: 16%; top: 32%; height: 30%;
    border-radius: 24%; background: #05000A;
}
.climber__life--spent[b-qg01608tit] { background: linear-gradient(180deg, #55408a 0%, #3a2c63 100%); box-shadow: none; opacity: .45; }

.climber__pip[b-qg01608tit] { width: .8rem; height: .8rem; border-radius: 50%; background: #3a3160; box-shadow: inset 0 0 0 1px #241c4d; flex: none; }
.climber__pip--live[b-qg01608tit] { background: var(--brand-neo-turquoise, #14F1D9); box-shadow: 0 0 10px var(--brand-neo-turquoise, #14F1D9); }
.climber__pip--idle[b-qg01608tit] { background: var(--brand-plasma-pink, #D942DB); }

/* The stage is the size container: it takes the leftover column space (below the HUD) and locks the
   tower to the engine's world aspect ratio (540 x 1600), sized in container-query units so it fits the
   fixed signage strip and doesn't rescale with browser zoom (matches the Tetris/Chess well pattern). */
.climber__stagewrap[b-qg01608tit] { flex: 1 1 0; min-height: 0; min-width: 0; container-type: size; display: flex; align-items: center; justify-content: center; }
.climber__stage[b-qg01608tit] {
    position: relative;
    width: min(100cqw, 33.75cqh);
    aspect-ratio: 540 / 1600;
    height: auto;
    min-height: 0;
    overflow: hidden;
    border-radius: .7rem;
    /* Rack interior (#337): the canvas server-unit backdrop (#335) carries the scene now — the
       cosmic starfield + glass-tint layers retired with it. Flat dark cabinet ground only. */
    background: #170529;
    border: 1px solid rgba(140, 66, 219, .5);
    box-shadow: 0 0 22px rgba(140, 66, 219, .3), inset 0 0 40px rgba(5, 0, 10, .5);
    /* Own container context for descendants below, so left/top/width percentages (and the JS-driven
       cqw/cqh transforms) are always relative to THIS box, not the outer stagewrap. */
    container-type: size;
}

/* Server-rack uprights: extruded metal profiles with the rack's signature detail — a centred strip
   of punched square mounting holes at rack-unit rhythm. Edge highlight + shade sell the extrusion.
   Ambient (fixed to the stage, behind the world). */
.climber__rail[b-qg01608tit] {
    position: absolute; top: 0; bottom: 0; width: 3.6cqw; z-index: 0;
    background:
        /* punched mounting holes: one dark square per rack unit, centred in the profile */
        repeating-linear-gradient(180deg,
            transparent 0 .7cqh,
            rgba(5, 0, 10, .92) .7cqh 1.5cqh,
            transparent 1.5cqh 2.6cqh) 50% 0 / 34% 100% no-repeat,
        /* extruded two-tone metal profile */
        linear-gradient(90deg, #6b2fae 0%, #46197c 42%, #2c1054 100%);
    box-shadow:
        inset 1px 0 0 rgba(190, 140, 255, .4),   /* lit edge */
        inset -1px 0 0 rgba(5, 0, 10, .7),        /* shaded edge */
        0 0 14px rgba(140, 66, 219, .35);
}
.climber__rail--l[b-qg01608tit] { left: .4cqw; }
.climber__rail--r[b-qg01608tit] { right: .4cqw; transform: scaleX(-1); }

/* The world is a CANVAS since #317 (the #315 probe verdict: rotation × per-frame DOM raster).
   Everything inside it — girders, ladders, hatches, bugs, brains, pops, the mascot — is drawn by
   SignageClimber.razor.js; their old DOM styles were removed in #327 once the canvas renderer
   was proven on the panel. Only the stage, rails, HUD, and phase overlays remain CSS. */
/* A canvas is a REPLACED element: inset alone leaves its intrinsic 300x150 box (Codex, PR #318) —
   width/height must be explicit for it to fill the stage. */
.climber__world[b-qg01608tit] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; }


/* Get-ready countdown: proper modal dim (matches the game-over veil) so the digit carries. */
.climber__count[b-qg01608tit] {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
    background: radial-gradient(120% 80% at 50% 40%, rgba(5, 0, 10, .72), rgba(5, 0, 10, .9));
}

/* Anti-camping warning: LIGHT veil (the player must still see the game to resume) + urgent digit. */
.climber__camp[b-qg01608tit] {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    background: rgba(5, 0, 10, .45);
    animation: climberCampPulse-b-qg01608tit .9s ease-in-out infinite;
}
@keyframes climberCampPulse-b-qg01608tit { 0%, 100% { background: rgba(5, 0, 10, .45); } 50% { background: rgba(5, 0, 10, .55); } }
.climber__campmain[b-qg01608tit] {
    font-size: 1rem; color: var(--brand-plasma-pink, #D942DB);
    font-family: ui-monospace, monospace; letter-spacing: 3px; text-transform: uppercase;
}
.climber__campnum[b-qg01608tit] {
    font-size: 3.4rem; font-weight: 700; line-height: 1;
    font-family: ui-monospace, "Cascadia Code", monospace;
    color: var(--brand-plasma-pink, #D942DB);
    text-shadow: 0 0 28px rgba(217, 66, 219, .7);
    animation: climberCountPop-b-qg01608tit .9s ease-out;
}

/* GAME OVER banner: the beat between the final splat and the score view. */
.climber__gameover[b-qg01608tit] {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(120% 80% at 50% 40%, rgba(5, 0, 10, .78), rgba(5, 0, 10, .92));
}
.climber__gameover span[b-qg01608tit] {
    font-size: 2.4rem; font-weight: 700; line-height: 1;
    font-family: ui-monospace, "Cascadia Code", monospace;
    color: var(--brand-plasma-pink, #D942DB);
    text-shadow: 0 0 34px rgba(217, 66, 219, .7);
    text-transform: uppercase; letter-spacing: 5px;
    animation: climberGameOverIn-b-qg01608tit .35s cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes climberGameOverIn-b-qg01608tit { from { transform: scale(1.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Life lost: brief card over a strong dim during the splat freeze, so the beat reads clearly. */
.climber__lifelost[b-qg01608tit] {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    background: radial-gradient(120% 80% at 50% 40%, rgba(5, 0, 10, .7), rgba(5, 0, 10, .88));
    animation: climberLifeLostIn-b-qg01608tit .18s ease-out;
}
@keyframes climberLifeLostIn-b-qg01608tit { from { opacity: 0; } to { opacity: 1; } }
.climber__lifelostmain[b-qg01608tit] {
    font-size: 1.8rem; font-weight: 700; line-height: 1;
    font-family: ui-monospace, "Cascadia Code", monospace;
    color: var(--brand-plasma-pink, #D942DB);
    text-shadow: 0 0 26px rgba(217, 66, 219, .6);
    text-transform: uppercase; letter-spacing: 3px;
}
.climber__lifelostsub[b-qg01608tit] {
    font-size: .85rem; color: var(--brand-neo-turquoise, #14F1D9);
    font-family: ui-monospace, monospace; letter-spacing: 2px; text-transform: uppercase;
}
.climber__countnum[b-qg01608tit] {
    font-size: 5rem; font-weight: 700; line-height: 1;
    font-family: ui-monospace, "Cascadia Code", monospace;
    color: var(--brand-neo-turquoise, #14F1D9);
    text-shadow: 0 0 34px rgba(20, 241, 217, .6);
    animation: climberCountPop-b-qg01608tit .9s ease-out;
}
@keyframes climberCountPop-b-qg01608tit {
    0% { transform: scale(1.7); opacity: 0; }
    25% { transform: scale(1); opacity: 1; }
    100% { transform: scale(.92); opacity: .9; }
}
.climber__countsub[b-qg01608tit] {
    font-size: .85rem; color: var(--brand-plasma-pink, #D942DB);
    text-transform: uppercase; letter-spacing: 3px;
    font-family: ui-monospace, monospace;
}

.climber__over[b-qg01608tit] {
    position: absolute; inset: 0;
    /* Modal over the whole stage: must stack above .climber__world (z-index: 1) — positioned siblings
       order by z-index before DOM order, so without this the girders paint over the game-over text. */
    z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
    background: radial-gradient(120% 80% at 50% 35%, rgba(5, 0, 10, .72), rgba(5, 0, 10, .92));
    color: var(--brand-neo-turquoise, #14F1D9);
    /* .climber__stage already clips (overflow:hidden), but that would silently crop the leaderboard
       mid-row on a short stage. Guard explicitly here too, and cap+scroll the leaderboard itself
       (below) so every row stays reachable instead of vanishing past the stage edge. */
    overflow: hidden;
}
/* Bumped for wall readability (#343). */
.climber__overheight[b-qg01608tit] { font-size: 3rem; font-weight: 700; font-family: ui-monospace, monospace; text-shadow: 0 0 22px rgba(20, 241, 217, .5); }
.climber__oversub[b-qg01608tit] { font-size: 1rem; color: var(--brand-plasma-pink, #D942DB); text-transform: uppercase; letter-spacing: 2px; font-family: ui-monospace, monospace; }
/* Leaderboard sits under the score breakdown inside the game-over overlay — give it breathing room
   and keep its wrapped rows centred + width-capped so it doesn't run edge-to-edge on the narrow
   portrait stage (mirrors SignageTetris, which instead lets it sit full-width outside the overlay).
   max-height + overflow-y is the fit guard: on a short stage the score/breakdown text above it can
   already eat most of the overlay's height, so the (up to 5-row) leaderboard scrolls internally
   rather than pushing itself past .climber__over's own overflow:hidden bound. */
.climber__over[b-qg01608tit]  .lb { margin-top: .6rem; max-width: 90%; max-height: 28%; overflow-y: auto; justify-content: center; }


/* Game-over breakdown lines under the score. */
.climber__overbreak[b-qg01608tit] { display: flex; flex-direction: column; gap: .15rem; align-items: center; margin-top: .5rem; }
.climber__overbreak span[b-qg01608tit] { font-size: .9rem; color: var(--brand-light-alloy, #8a86b8); font-family: ui-monospace, monospace; }
/* /Components/Signage/SignageFeatureTile.razor.rz.scp.css */
/* Poll tile */
.ft-poll__q[b-lpyhbw8r1o] {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    max-width: 460px;
}
.ft-poll__bars[b-lpyhbw8r1o] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 460px;
}
.ft-poll__row[b-lpyhbw8r1o] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 12px;
    align-items: center;
    font-size: 22px;
}
.ft-poll__track[b-lpyhbw8r1o] {
    background: rgba(255,255,255,.1);
    border-radius: 8px;
    overflow: hidden;
    height: 18px;
}
.ft-poll__fill[b-lpyhbw8r1o] {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-nebula-violet), var(--brand-aqua-pulse));
    border-radius: 8px;
    transition: width 600ms ease;
}

/* Quiz histogram tile */
.ft-quiz[b-lpyhbw8r1o] {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 16px;
    height: 90px;
    padding: 0 8px;
}
.ft-quiz__bar[b-lpyhbw8r1o] {
    flex: 1;
    background: linear-gradient(180deg, var(--brand-aqua-pulse), var(--brand-nebula-violet));
    border-radius: 6px 6px 0 0;
    min-height: 4px;
    transition: height 600ms ease;
}

/* Shipping ticker tile */
.ft-ship[b-lpyhbw8r1o] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
    width: 100%;
    max-width: 460px;
}
.ft-ship li[b-lpyhbw8r1o] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--brand-nebula-violet) 30%, transparent);
    padding-bottom: 10px;
}
.ft-ship li em[b-lpyhbw8r1o] {
    font-style: normal;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ft-ship li small[b-lpyhbw8r1o] {
    font-size: 15px;
    color: var(--brand-light-alloy);
    white-space: nowrap;
    flex-shrink: 0;
}
/* /Components/Signage/SignageLeaderboard.razor.rz.scp.css */
.lb[b-c0hdyt0ssf] { display: flex; flex-wrap: wrap; gap: .6rem; border-top: 1px solid #241c4d; padding-top: .4rem; align-items: baseline; }
.lb__t[b-c0hdyt0ssf] { font-size: .6rem; color: #8a86b8; letter-spacing: 1px; text-transform: uppercase; }
.lb__e[b-c0hdyt0ssf] { font-size: .8rem; color: #b9c7e6; white-space: nowrap; }
.lb__e b[b-c0hdyt0ssf] { color: #3ce6dc; }
.lb__d[b-c0hdyt0ssf] { font-size: .62rem; color: #6f6b96; margin-left: .15rem; }
/* /Components/Signage/SignageMatch3.razor.rz.scp.css */
.sm3[b-kes9cnw3ty] { display: flex; flex-direction: column; gap: .6rem; height: 100%; padding: .5rem; }

/* HUD + board are a single centred group, so the score/time sit directly above the board rather than
   pinned to the top of the content tier. The leaderboard stays at the bottom. */
.sm3__stage[b-kes9cnw3ty] { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; }

/* The board is sized by container WIDTH (inline-size), so its height is deterministic and the wrap hugs
   it with no vertical slack — that's what lets the HUD sit right above the board. cqw is zoom-stable on
   the fixed-width signage strip. ::deep reaches the board inside the Match3Board component. */
.sm3__boardwrap[b-kes9cnw3ty] { width: 100%; container-type: inline-size; display: flex; justify-content: center; }
.sm3__boardwrap[b-kes9cnw3ty]  .m3 { width: min(100cqw, 100%); }

/* Score / time: larger, full board width, directly above the board. */
.sm3__hud[b-kes9cnw3ty] { display: flex; gap: .6rem; width: 100%; }
.sm3__stat[b-kes9cnw3ty], .sm3__time[b-kes9cnw3ty] { flex: 1; background: #11082e; border: 1px solid #241c4d; border-radius: .7rem; padding: .5rem .8rem; text-align: center; }
.sm3__stat .k[b-kes9cnw3ty], .sm3__time .k[b-kes9cnw3ty] { display: block; font-size: .72rem; color: #8a86b8; text-transform: uppercase; letter-spacing: 1px; }
.sm3__stat .v[b-kes9cnw3ty], .sm3__time .v[b-kes9cnw3ty] { font-size: 1.9rem; font-weight: 700; color: #cfe9ff; line-height: 1.1; }

.sm3__over[b-kes9cnw3ty] { text-align: center; color: #3ce6dc; padding: .3rem; }
.sm3__over .s[b-kes9cnw3ty] { display: block; font-size: 2rem; font-weight: 700; }
.sm3__over .t[b-kes9cnw3ty] { font-size: .8rem; color: #9fb6d8; }
/* /Components/Signage/SignageOrb.razor.rz.scp.css */
.signage-orb[b-95t8hx1tiw] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--orb-size, 50px);
    height: var(--orb-size, 50px);
    flex: 0 0 auto;
}

.signage-orb__blob[b-95t8hx1tiw] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 5px rgba(34, 211, 238, 0.55));
}

/* Brain mark in its native brand colours inside the ring. */
.signage-orb__brain[b-95t8hx1tiw] {
    position: relative;
    z-index: 2;
    width: 42%;
    height: auto;
}

@media (prefers-reduced-motion: reduce) {
    .signage-orb__blob animate[b-95t8hx1tiw] { display: none; }
}
/* /Components/Signage/SignageTetris.razor.rz.scp.css */
.tetris[b-u2bdeip444] { display: flex; flex-direction: column; gap: .6rem; height: 100%; padding: .5rem; }
/* Larger score/level/lines, full board width, directly above the well (the HUD now lives inside the
   centred well-wrap rather than pinned to the top of the content tier). */
.tetris__hud[b-u2bdeip444] { display: flex; gap: .6rem; align-items: stretch; width: 100%; }
.tetris__stat[b-u2bdeip444] { flex: 1; background: #11082e; border: 1px solid #241c4d; border-radius: .7rem; padding: .5rem .6rem; text-align: center; }
.tetris__stat .k[b-u2bdeip444], .tetris__next .k[b-u2bdeip444] { display: block; font-size: .68rem; color: #8a86b8; letter-spacing: 1px; text-transform: uppercase; }
.tetris__stat .v[b-u2bdeip444] { font-size: 1.6rem; font-weight: 700; color: #cfe9ff; line-height: 1.1; }
.tetris__next[b-u2bdeip444] { background: #11082e; border: 1px solid #241c4d; border-radius: .5rem; padding: .3rem; display: flex; flex-direction: column; align-items: center; }
.tetris__nextgrid[b-u2bdeip444] { display: grid; grid-template-columns: repeat(4, .7rem); grid-auto-rows: .7rem; gap: 1px; margin-top: 2px; }
/* The wrap is the size container: it takes the leftover column space (below the HUD, above the
   leaderboard) and the well is sized in container-query units, so it fits the fixed signage content
   tier and DOESN'T rescale with browser zoom (vh would). */
.tetris__wellwrap[b-u2bdeip444] { flex: 1 1 0; min-height: 0; min-width: 0; container-type: size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; }

/* A true 10:20 box with square cells, sized to the container:
   - width: min(100cqw, 44cqh) -> the largest 1:2 box that fits beneath the HUD (the well now shares the
     wrap with the HUD above it; the 44cqh height cap leaves headroom so the two never overflow);
   - height:auto + aspect-ratio:10/20 -> height follows the width;
   - grid-auto-rows:1fr -> the 20 rows divide the height evenly, so each cell is width/10 == height/20 == square. */
.tetris__well[b-u2bdeip444] { display: grid; grid-auto-rows: 1fr; gap: 2px; background: #070011; padding: 5px; border-radius: .7rem; border: 3px solid var(--brand-plasma-pink, #D942DB); box-shadow: 0 0 22px color-mix(in srgb, var(--brand-plasma-pink, #D942DB) 45%, transparent); aspect-ratio: 10 / 20; width: min(100cqw, 44cqh); height: auto; min-height: 0; position: relative; }
/* line-clear flash — the renderer adds --flash the frame the line count goes up. */
.tetris__well--flash[b-u2bdeip444]::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: rgba(120, 255, 240, .8);
    mix-blend-mode: screen;
    animation: tetris-flash-b-u2bdeip444 .35s ease-out forwards;
}
@keyframes tetris-flash-b-u2bdeip444 { from { opacity: .8; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tetris__well--flash[b-u2bdeip444]::after { animation-duration: .15s; } }
/* Glossy beveled blocks: a top-left highlight (::before) + bright inner-top / dark inner-bottom for
   depth. Static (no per-frame animation) so the gravity loop stays cheap to paint on the display. */
.cell[b-u2bdeip444] { border-radius: 4px; position: relative; }
.cell.empty[b-u2bdeip444] { background: #0a0320; border: 1px solid #160c34; }
.cell:not(.empty)[b-u2bdeip444] {
    border: none;
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, .45), inset 0 -4px 5px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .4);
}
.cell:not(.empty)[b-u2bdeip444]::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(72% 52% at 32% 22%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%);
}
.cell.I[b-u2bdeip444] { background: radial-gradient(125% 125% at 30% 22%, #8ffff2, #149990 72%); }
.cell.O[b-u2bdeip444] { background: radial-gradient(125% 125% at 30% 22%, #ffeaa0, #d9971a 72%); }
.cell.T[b-u2bdeip444] { background: radial-gradient(125% 125% at 30% 22%, #ddb6ff, #6f29c9 72%); }
.cell.S[b-u2bdeip444] { background: radial-gradient(125% 125% at 30% 22%, #a4ffce, #149955 72%); }
.cell.Z[b-u2bdeip444] { background: radial-gradient(125% 125% at 30% 22%, #ffaec5, #c92f57 72%); }
.cell.J[b-u2bdeip444] { background: radial-gradient(125% 125% at 30% 22%, #b0c6ff, #2f52c9 72%); }
.cell.L[b-u2bdeip444] { background: radial-gradient(125% 125% at 30% 22%, #ffc79a, #d9701a 72%); }
.tetris__over[b-u2bdeip444] { text-align: center; color: #3ce6dc; padding: .4rem; }
.tetris__overscore[b-u2bdeip444] { display: block; font-size: 2rem; font-weight: 700; }
.tetris__oversub[b-u2bdeip444] { font-size: .8rem; color: #9fb6d8; }
/* /Components/Signage/SignageWallTour.razor.rz.scp.css */
/* SignageWallTour — full-screen translation of docs/mockups/2026-08-16-wall-tour-mock.html.
   The mock frame is 256x910 (50% scale); every px value below is doubled from the mock. */

.tour[b-cu5x7mo1cz] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: #F7F7F7;
    background: linear-gradient(180deg, #0B0018 0%, #1C0733 100%);
    display: flex;
    flex-direction: column;
    padding: 48px 36px 0;
    font-family: "Segoe UI", system-ui, sans-serif;
}

.tour__stars[b-cu5x7mo1cz] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(247,247,247,.8), transparent 60%),
        radial-gradient(2px 2px at 70% 70%, rgba(34,211,238,.7), transparent 60%),
        radial-gradient(2px 2px at 45% 15%, rgba(247,247,247,.6), transparent 60%),
        radial-gradient(2px 2px at 85% 45%, rgba(217,66,219,.6), transparent 60%),
        radial-gradient(2px 2px at 10% 80%, rgba(20,241,217,.6), transparent 60%);
    background-size: 200px 250px, 250px 316px, 164px 192px, 316px 374px, 230px 272px;
    animation: twinkle-b-cu5x7mo1cz 5.5s ease-in-out infinite;
}

@keyframes twinkle-b-cu5x7mo1cz {
    0%, 100% { opacity: .5; }
    50% { opacity: 1; }
}

.tour__eyebrow[b-cu5x7mo1cz] {
    position: relative;
    font-size: 18px;
    letter-spacing: .26em;
    color: #14F1D9;
    text-transform: uppercase;
    font-weight: 600;
}

.tour__act[b-cu5x7mo1cz] {
    position: relative;
    font-size: 18px;
    color: #D942DB;
    margin-top: 6px;
    letter-spacing: .2em;
    font-weight: 700;
}

.tour__headline[b-cu5x7mo1cz] {
    position: relative;
    font-size: 48px;
    line-height: 1.14;
    font-weight: 800;
    margin-top: 24px;
    letter-spacing: -0.01em;
}

.tour__art[b-cu5x7mo1cz] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: partin-b-cu5x7mo1cz .8s ease 3.3s forwards;   /* headline types ~1.7s, settles 1.5s, then art */
}

.tour__copy[b-cu5x7mo1cz] {
    position: relative;
    font-size: 24px;
    line-height: 1.55;
    color: #22D3EE;
    margin-bottom: 200px;
}

.tour__copy b[b-cu5x7mo1cz] {
    color: #D942DB;
}

.tour__dots[b-cu5x7mo1cz] {
    position: relative;
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 26px;
}

.tour__dot[b-cu5x7mo1cz] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3a2a5c;
}

.tour__dot--on[b-cu5x7mo1cz] {
    background: #14F1D9;
    box-shadow: 0 0 10px rgba(20,241,217,.8);
}

@keyframes dotpulse-b-cu5x7mo1cz {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.5); }
}

.tour__hint[b-cu5x7mo1cz] {
    position: relative;
    text-align: center;
    font-size: 17px;
    margin-top: 16px;
    margin-bottom: 28px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #22D3EE;
}

@keyframes floaty-b-cu5x7mo1cz {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
}

@keyframes glowpulse-b-cu5x7mo1cz {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

@keyframes ripple-b-cu5x7mo1cz {
    0% { transform: scale(.4); opacity: 1; }
    100% { transform: scale(1.25); opacity: 0; }
}

/* 1+2: cycling display scenes */

.tour__cycle[b-cu5x7mo1cz] {
    position: relative;
    width: 460px;
    height: 420px;
}

.tour__scene[b-cu5x7mo1cz] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    opacity: 0;
}

/* Video-style sequence: scene 1 and 2 each play once for 3s and fade away; scene 3 fades in
   and HOLDS for the rest of the page (the copy then typewrites beneath it). */
.tour__scene:nth-child(1)[b-cu5x7mo1cz] { animation: sceneio-b-cu5x7mo1cz 5.4s ease 3.3s both; }
.tour__scene:nth-child(2)[b-cu5x7mo1cz] { animation: sceneio-b-cu5x7mo1cz 5.4s ease 8s both; }
.tour__scene:nth-child(3)[b-cu5x7mo1cz] { animation: partin-b-cu5x7mo1cz 1s ease 12.7s both; }

/* 0.7s in, a full 4s readable hold, 0.7s out. */
@keyframes sceneio-b-cu5x7mo1cz {
    0% { opacity: 0; }
    13% { opacity: 1; }
    87% { opacity: 1; }
    100% { opacity: 0; }
}

/* Page content fades in on every page change (the wrapper is @key'd by Page). */
.tour__pagewrap[b-cu5x7mo1cz] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    animation: tourfade-b-cu5x7mo1cz .7s ease both;
}

@keyframes tourfade-b-cu5x7mo1cz {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

.tour__cap[b-cu5x7mo1cz] {
    font-size: 27px;
    font-weight: 600;
    color: #22D3EE;
    letter-spacing: .04em;
    text-align: center;
}

.tour__tv[b-cu5x7mo1cz] {
    width: 440px;
    height: 268px;
    border: 4px solid #6a628c;
    border-radius: 10px;
    background: #17141f;
    position: relative;
}

.tour__tv .tour__inner[b-cu5x7mo1cz] {
    position: absolute;
    inset: 18px;
    border-radius: 6px;
    overflow: hidden;
}

/* stale variants */
.tour__tv--report .tour__inner[b-cu5x7mo1cz] {
    background: #2c2848;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}
.tour__tv--report .tour__inner i[b-cu5x7mo1cz] { display: block; height: 10px; border-radius: 4px; background: #5e578a; }
.tour__tv--report .tour__inner i:nth-child(1)[b-cu5x7mo1cz] { width: 60%; }
.tour__tv--report .tour__inner i:nth-child(2)[b-cu5x7mo1cz] { width: 85%; }
.tour__tv--report .tour__inner i:nth-child(3)[b-cu5x7mo1cz] { width: 70%; }

.tour__tv--shop .tour__inner[b-cu5x7mo1cz] { background: #362e1c; display: grid; place-items: center; }
.tour__sale[b-cu5x7mo1cz] {
    color: #c4a75f;
    font-weight: 800;
    font-size: 34px;
    letter-spacing: .06em;
    transform: rotate(-6deg);
    border: 4px dashed #93814f;
    padding: 8px 20px;
    display: block;
}

.tour__tv--info .tour__inner[b-cu5x7mo1cz] { background: #232c40; display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.tour__tv--info .tour__inner b[b-cu5x7mo1cz] { font-size: 17px; color: #97abd0; letter-spacing: .1em; }
.tour__tv--info .tour__inner i[b-cu5x7mo1cz] { display: block; height: 8px; border-radius: 4px; background: #4c5f88; }
.tour__tv--info .tour__inner i:nth-child(3)[b-cu5x7mo1cz] { width: 70%; }

.tour__zzz[b-cu5x7mo1cz] {
    position: absolute;
    left: 50%;
    top: -56px;
    transform: translateX(-50%);
}
.tour__zzz i[b-cu5x7mo1cz] {
    display: block;
    position: absolute;
    color: #14F1D9;
    font-style: normal;
    font-size: 52px;
    font-weight: 700;
    animation: drift-b-cu5x7mo1cz 3s ease-out infinite;
}
.tour__zzz i:nth-child(2)[b-cu5x7mo1cz] { left: 34px; top: 20px; font-size: 40px; color: #D942DB; animation-delay: 1s; }
.tour__zzz i:nth-child(3)[b-cu5x7mo1cz] { left: -30px; top: 34px; font-size: 32px; color: #ff9df1; animation-delay: 2s; }

@keyframes drift-b-cu5x7mo1cz {
    0% { transform: translateY(0); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(-48px); opacity: 0; }
}

/* alive variants (page 2) */
.tour__tv--alive[b-cu5x7mo1cz] { border-color: #14F1D9; box-shadow: 0 0 32px rgba(20,241,217,.35); }
/* Ask-the-report: a dim chart as context, the AI conversation is the star. */
.tour__tv--ask .tour__inner[b-cu5x7mo1cz] { background: #101728; display: flex; align-items: flex-end; gap: 10px; padding: 18px; }
.tour__tv--ask .tour__inner i[b-cu5x7mo1cz] {
    display: block;
    width: 24px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #3a5a7a, #22354a);
}
.tour__tv--ask .tour__inner i:nth-child(1)[b-cu5x7mo1cz] { height: 45%; }
.tour__tv--ask .tour__inner i:nth-child(2)[b-cu5x7mo1cz] { height: 70%; }
.tour__tv--ask .tour__inner i:nth-child(3)[b-cu5x7mo1cz] { height: 34%; }
.tour__tv--ask .tour__inner i:nth-child(4)[b-cu5x7mo1cz] { height: 58%; }

.tour__askq[b-cu5x7mo1cz], .tour__aska[b-cu5x7mo1cz] {
    position: absolute;
    font-size: 16px;
    line-height: 1.3;
    padding: 9px 14px;
    border-radius: 14px;
    max-width: 72%;
    opacity: 0;
    text-align: left;
}
.tour__askq[b-cu5x7mo1cz] {
    right: 12px;
    top: 12px;
    background: rgba(217, 66, 219, .18);
    border: 2px solid #D942DB;
    color: #ffd9fb;
    border-bottom-right-radius: 4px;
    animation: askq-b-cu5x7mo1cz 7s ease-in-out infinite;
}
.tour__aska[b-cu5x7mo1cz] {
    left: 12px;
    top: 66px;
    background: rgba(20, 241, 217, .14);
    border: 2px solid #14F1D9;
    color: #c8fff8;
    border-bottom-left-radius: 4px;
    animation: aska-b-cu5x7mo1cz 7s ease-in-out infinite;
}
@keyframes askq-b-cu5x7mo1cz {
    0% { opacity: 0; transform: translateY(8px); }
    8% { opacity: 1; transform: none; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes aska-b-cu5x7mo1cz {
    0%, 20% { opacity: 0; transform: translateY(8px); }
    32% { opacity: 1; transform: none; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes barup-b-cu5x7mo1cz {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.25); }
}

.tour__tv--play .tour__inner[b-cu5x7mo1cz] { background: #200a2e; }
.tour__score[b-cu5x7mo1cz] {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 14px;
    letter-spacing: .14em;
    color: #22D3EE;
}
.tour__pball[b-cu5x7mo1cz] {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #14F1D9;
    box-shadow: 0 0 14px rgba(20, 241, 217, .9);
    animation: ballx-b-cu5x7mo1cz 2.3s linear infinite alternate, bally-b-cu5x7mo1cz 1.5s ease-in-out infinite alternate;
}
.tour__paddle[b-cu5x7mo1cz] {
    position: absolute;
    bottom: 12px;
    width: 70px;
    height: 11px;
    border-radius: 6px;
    background: #D942DB;
    box-shadow: 0 0 12px rgba(217, 66, 219, .8);
    animation: paddlex-b-cu5x7mo1cz 2.3s linear infinite alternate;
}

@keyframes ballx-b-cu5x7mo1cz { from { left: 6%; } to { left: 88%; } }
@keyframes bally-b-cu5x7mo1cz { from { top: 12%; } to { top: 72%; } }
@keyframes paddlex-b-cu5x7mo1cz { from { left: 2%; } to { left: 76%; } }

.tour__tv--greet .tour__inner[b-cu5x7mo1cz] { background: #0e2430; }
.tour__gchat[b-cu5x7mo1cz] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    animation: chatrise-b-cu5x7mo1cz 12s linear 14s forwards;
}
.tour__gchat span[b-cu5x7mo1cz] { opacity: 0; animation: partin-b-cu5x7mo1cz .7s ease forwards; }
.tour__gchat span:nth-child(1)[b-cu5x7mo1cz] { animation-delay: 13.6s; }
.tour__gchat span:nth-child(2)[b-cu5x7mo1cz] { animation-delay: 15s; }
.tour__gchat span:nth-child(3)[b-cu5x7mo1cz] { animation-delay: 16.4s; }
.tour__gchat span:nth-child(4)[b-cu5x7mo1cz] { animation-delay: 17.8s; }
.tour__gchat span:nth-child(5)[b-cu5x7mo1cz] { animation-delay: 19.2s; }
.tour__gchat span:nth-child(6)[b-cu5x7mo1cz] { animation-delay: 20.6s; }
.tour__gchat span:nth-child(7)[b-cu5x7mo1cz] { animation-delay: 22s; }
.tour__gchat span:nth-child(8)[b-cu5x7mo1cz] { animation-delay: 23.4s; }

@keyframes chatrise-b-cu5x7mo1cz {
    from { transform: translateY(0); }
    to { transform: translateY(-140px); }
}

.tour__gq[b-cu5x7mo1cz] {
    align-self: flex-end;
    font-size: 13px;
    line-height: 1.3;
    padding: 8px 12px;
    border-radius: 14px 14px 4px 14px;
    background: rgba(217, 66, 219, .18);
    border: 2px solid #D942DB;
    color: #ffd9fb;
}
.tour__ga[b-cu5x7mo1cz] {
    align-self: flex-start;
    font-size: 13px;
    line-height: 1.3;
    padding: 8px 12px;
    border-radius: 14px 14px 14px 4px;
    background: rgba(20, 241, 217, .14);
    border: 2px solid #14F1D9;
    color: #c8fff8;
    text-align: left;
}
.tour__cap--alive[b-cu5x7mo1cz] { color: #14F1D9; }

/* 3 why: possibility orbit */

.tour__why[b-cu5x7mo1cz] { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.tour__orbitfield[b-cu5x7mo1cz] { position: relative; width: 400px; height: 400px; display: grid; place-items: center; }
.tour__core[b-cu5x7mo1cz] {
    font-size: 80px;
    position: relative;
    z-index: 3;
    animation: floaty-b-cu5x7mo1cz 4s ease-in-out infinite;
    filter: drop-shadow(0 0 24px rgba(255,220,90,.8));
}
.tour__ring[b-cu5x7mo1cz] {
    position: absolute;
    inset: 36px;
    border: 3px solid rgba(20,241,217,.5);
    border-radius: 50%;
    animation: ripple-b-cu5x7mo1cz 3s ease-out infinite;
}
.tour__ring:nth-child(3)[b-cu5x7mo1cz] { animation-delay: 1.5s; }

.tour__orbit[b-cu5x7mo1cz] { position: absolute; inset: 0; animation: spin-b-cu5x7mo1cz 14s linear infinite; }

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

.tour__sat[b-cu5x7mo1cz] {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(11,0,24,.85);
    border: 3px solid #D942DB;
    display: grid;
    place-items: center;
    font-size: 34px;
    box-shadow: 0 0 24px rgba(217,66,219,.5);
    animation: unspin-b-cu5x7mo1cz 14s linear infinite;
}

@keyframes unspin-b-cu5x7mo1cz { to { transform: rotate(-360deg); } }

.tour__orbit .tour__sat:nth-child(1)[b-cu5x7mo1cz] { top: -12px; left: 160px; border-color: #14F1D9; box-shadow: 0 0 24px rgba(20,241,217,.5); }
.tour__orbit .tour__sat:nth-child(2)[b-cu5x7mo1cz] { top: 160px; right: -12px; }
.tour__orbit .tour__sat:nth-child(3)[b-cu5x7mo1cz] { bottom: -12px; left: 160px; border-color: #14F1D9; box-shadow: 0 0 24px rgba(20,241,217,.5); }
.tour__orbit .tour__sat:nth-child(4)[b-cu5x7mo1cz] { top: 160px; left: -12px; }

.tour__whywords[b-cu5x7mo1cz] { display: flex; flex-direction: column; gap: 14px; }
.tour__whywords span[b-cu5x7mo1cz] {
    font-size: 22px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
}
.tour__whywords .tour__part:nth-child(1) span[b-cu5x7mo1cz] { color: #14F1D9; }
.tour__whywords .tour__part:nth-child(2) span[b-cu5x7mo1cz] { color: #ff9df1; }
.tour__whywords .tour__part:nth-child(3) span[b-cu5x7mo1cz] { color: #cbb1f5; }

/* 4 tiers */

.tour__tierart[b-cu5x7mo1cz] { display: flex; align-items: center; }
.tour__tiers[b-cu5x7mo1cz] {
    width: 216px;
    height: 660px;
    border: 4px solid #5b4680;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.tour__t[b-cu5x7mo1cz] {
    position: relative;
    display: grid;
    place-items: center;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .05em;
    text-align: center;
    line-height: 1.3;
}
.tour__t1[b-cu5x7mo1cz] { flex: 0 0 24%; background: rgba(20,241,217,.12); color: #14F1D9; border-bottom: 2px solid #3a2a5c; }
.tour__t2[b-cu5x7mo1cz] { flex: 0 0 18%; background: rgba(217,66,219,.12); color: #ff9df1; border-bottom: 2px solid #3a2a5c; }
.tour__t3[b-cu5x7mo1cz] { flex: 1; background: rgba(140,66,219,.14); color: #cbb1f5; }

@keyframes tglow-b-cu5x7mo1cz {
    0%, 100% { filter: brightness(1); }
    12% { filter: brightness(1.9); }
    24% { filter: brightness(1); }
}

.tour__tiers-legend[b-cu5x7mo1cz] { font-size: 19px; text-align: left; margin-left: 28px; line-height: 2.1; color: #22D3EE; }
.tour__tiers-legend b[b-cu5x7mo1cz] { display: block; }
.tour__a[b-cu5x7mo1cz] { color: #14F1D9; }
.tour__b[b-cu5x7mo1cz] { color: #ff9df1; }
.tour__c[b-cu5x7mo1cz] { color: #cbb1f5; }

/* 5 live chips + games + TAI */

.tour__livecol[b-cu5x7mo1cz] { display: flex; flex-direction: column; gap: 20px; width: 360px; }
.tour__livechip[b-cu5x7mo1cz] {
    border: 3px solid #3a2a5c;
    border-radius: 16px;
    padding: 16px 22px;
    text-align: left;
    background: rgba(11,0,24,.55);
    position: relative;
    animation: floaty-b-cu5x7mo1cz 5s ease-in-out infinite;
}
.tour__livechip:nth-child(2)[b-cu5x7mo1cz] { animation-delay: .8s; }
.tour__livechip:nth-child(3)[b-cu5x7mo1cz] { animation-delay: 1.6s; }
.tour__k[b-cu5x7mo1cz] { font-size: 17px; letter-spacing: .16em; text-transform: uppercase; color: #22D3EE; animation: glowpulse-b-cu5x7mo1cz 2.6s ease-in-out infinite; }
.tour__v[b-cu5x7mo1cz] { font-size: 22px; color: #F7F7F7; margin-top: 4px; font-weight: 600; }
.tour__pulse[b-cu5x7mo1cz] {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #2fe86e;
    box-shadow: 0 0 14px rgba(47,232,110,.9);
    animation: glowpulse-b-cu5x7mo1cz 1.6s ease-in-out infinite;
}
.tour__livechip--lede[b-cu5x7mo1cz] { border-color: #14F1D9; box-shadow: 0 0 24px rgba(20,241,217,.25); }
.tour__livechip--lede .tour__k[b-cu5x7mo1cz] { color: #14F1D9; }

.tour__games[b-cu5x7mo1cz] {
    display: grid;
    grid-template-columns: repeat(2, 164px);
    gap: 16px;
    margin-top: 6px;
    justify-content: center;
}
.tour__gt[b-cu5x7mo1cz] {
    height: 104px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 38px;
    border: 3px solid #3a2a5c;
    background: rgba(11,0,24,.5);
    position: relative;
    animation: bob-b-cu5x7mo1cz 3.6s ease-in-out infinite;
}
.tour__gt:nth-child(2)[b-cu5x7mo1cz] { animation-delay: .9s; }
.tour__gt:nth-child(3)[b-cu5x7mo1cz] { animation-delay: 1.8s; }
.tour__gt:nth-child(4)[b-cu5x7mo1cz] { animation-delay: 2.7s; }

@keyframes bob-b-cu5x7mo1cz {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-10px) rotate(-2deg); }
    75% { transform: translateY(4px) rotate(2deg); }
}

.tour__gt span[b-cu5x7mo1cz] {
    position: absolute;
    bottom: 6px;
    font-size: 14px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #22D3EE; animation: glowpulse-b-cu5x7mo1cz 2.6s ease-in-out infinite;
}

.tour__taibubble[b-cu5x7mo1cz] {
    position: relative;
    margin-top: 24px;
    border: 3px solid #D942DB;
    border-radius: 20px;
    padding: 16px 22px;
    font-size: 20px;
    line-height: 1.45;
    color: #ffd9fb;
    background: rgba(217,66,219,.1);
    text-align: left;
    animation: glowborder-b-cu5x7mo1cz 4s ease-in-out infinite;
}
.tour__taibubble[b-cu5x7mo1cz]::before {
    content: "TAI · LIVE";
    position: absolute;
    top: -16px;
    left: 20px;
    font-size: 15px;
    letter-spacing: .18em;
    color: #D942DB;
    background: #14062a;
    padding: 2px 12px;
    border-radius: 12px;
    border: 2px solid #D942DB;
}

/* 6 depth levels */

.tour__depth[b-cu5x7mo1cz] { display: flex; flex-direction: column; gap: 20px; width: 384px; }
.tour__dlevel[b-cu5x7mo1cz] {
    border-radius: 18px;
    padding: 20px 24px;
    text-align: left;
    border: 3px solid #3a2a5c;
    background: rgba(11,0,24,.55);
    position: relative;
    overflow: hidden;
    animation: levelpulse-b-cu5x7mo1cz 12s ease-in-out infinite;
}
.tour__dlevel:nth-child(2)[b-cu5x7mo1cz] { animation-delay: 3s; }
.tour__dlevel:nth-child(3)[b-cu5x7mo1cz] { animation-delay: 6s; }
.tour__dlevel:nth-child(4)[b-cu5x7mo1cz] { animation-delay: 9s; }

@keyframes levelpulse-b-cu5x7mo1cz {
    0%, 100% { border-color: #3a2a5c; }
    5% { border-color: #14F1D9; box-shadow: 0 0 24px rgba(20,241,217,.4); }
    14% { border-color: #3a2a5c; box-shadow: none; }
}

.tour__dk[b-cu5x7mo1cz] { font-size: 22px; font-weight: 700; color: #F7F7F7; }
.tour__dv[b-cu5x7mo1cz] { font-size: 19px; margin-top: 4px; color: #22D3EE; animation: glowpulse-b-cu5x7mo1cz 2.6s ease-in-out infinite; }
.tour__dice[b-cu5x7mo1cz] { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 34px; }

/* 7 ecosystem */

.tour__eco[b-cu5x7mo1cz] { position: relative; width: 432px; height: 760px; }
.tour__lbl[b-cu5x7mo1cz] { position: absolute; font-size: 16px; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; color: #22D3EE; }
.tour__ecolinks[b-cu5x7mo1cz] { position: absolute; inset: 0; overflow: visible; width: 100%; height: 100%; }
.tour__ecolinks path[b-cu5x7mo1cz] { fill: none; stroke: #3a2a5c; stroke-width: 2; }
.tour__ecolinks path.tour__live[b-cu5x7mo1cz] {
    stroke: #14F1D9;
    stroke-width: 2;
    stroke-dasharray: 5 9;
    opacity: .85;
    filter: drop-shadow(0 0 3px rgba(20,241,217,.8));
    animation: dashflow-b-cu5x7mo1cz 1.6s linear infinite;
}

@keyframes dashflow-b-cu5x7mo1cz { to { stroke-dashoffset: -14; } }

.tour__cloudweb[b-cu5x7mo1cz] {
    position: absolute;
    top: 0;
    right: 12px;
    width: 156px;
    height: 88px;
    border: 4px solid #D942DB;
    border-radius: 14px;
    background: #17141f;
    animation: glowborder-b-cu5x7mo1cz 4s ease-in-out infinite;
}
.tour__cloudweb[b-cu5x7mo1cz]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 14px;
    background: rgba(217,66,219,.35);
    border-radius: 8px 8px 0 0;
}
.tour__cloudweb[b-cu5x7mo1cz]::after {
    content: "taight.net";
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 17px;
    color: #ff9df1;
    font-weight: 700;
}

@keyframes glowborder-b-cu5x7mo1cz {
    0%, 100% { box-shadow: 0 0 16px rgba(217,66,219,.25); }
    50% { box-shadow: 0 0 36px rgba(217,66,219,.6); }
}

.tour__pi2[b-cu5x7mo1cz] {
    position: absolute;
    top: 236px;
    right: 36px;
    width: 152px;
    height: 96px;
    background: #143d23;
    border: 4px solid #2e7d4a;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0,0,0,.5);
}
.tour__gpio[b-cu5x7mo1cz] {
    position: absolute;
    top: 8px; left: 12px; right: 12px;
    height: 12px;
    background: repeating-linear-gradient(90deg, #111 0 6px, #333 6px 10px);
    border-radius: 4px;
}
.tour__chip[b-cu5x7mo1cz] {
    position: absolute;
    top: 34px; left: 52px;
    width: 40px; height: 40px;
    background: #0e0e12;
    border-radius: 6px;
    border: 2px solid #444;
}
.tour__chip[b-cu5x7mo1cz]::after {
    content: "Pi5";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #9be8b7;
    font-size: 14px;
    font-weight: 700;
}
.tour__glass2[b-cu5x7mo1cz] {
    position: absolute;
    left: 16px;
    top: 132px;
    width: 148px;
    height: 528px;
    border: 6px solid #14F1D9;
    border-radius: 12px;
    background: linear-gradient(180deg, #0B0018, #1C0733);
    animation: glowborder2-b-cu5x7mo1cz 4s ease-in-out 1s infinite;
}
.tour__glass2[b-cu5x7mo1cz]::after {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(20,241,217,.28), rgba(217,66,219,.22));
    animation: glowpulse-b-cu5x7mo1cz 3s ease-in-out infinite;
}

@keyframes glowborder2-b-cu5x7mo1cz {
    0%, 100% { box-shadow: 0 0 20px rgba(20,241,217,.3); }
    50% { box-shadow: 0 0 48px rgba(20,241,217,.65); }
}

.tour__radar2[b-cu5x7mo1cz] {
    position: absolute;
    right: 68px;
    bottom: 56px;
    width: 80px;
    height: 52px;
    border: 4px solid #5b4680;
    border-radius: 10px;
    background: #17141f;
    display: grid;
    place-items: center;
}
.tour__radar2 i[b-cu5x7mo1cz] {
    width: 26px;
    height: 16px;
    border: 3px solid #14F1D9;
    border-radius: 4px;
    display: block;
}
.tour__radararcs[b-cu5x7mo1cz] {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 96px;
    height: 52px;
    transform: translateX(-50%);
    overflow: hidden;
}
.tour__radararcs i[b-cu5x7mo1cz] {
    position: absolute;
    left: 50%;
    bottom: -44px;
    transform: translateX(-50%);
    border: 2.4px solid rgba(20,241,217,.7);
    border-radius: 50%;
    display: block;
    animation: ripple-b-cu5x7mo1cz 2.4s ease-out infinite;
}
.tour__radararcs i:nth-child(1)[b-cu5x7mo1cz] { width: 48px; height: 48px; }
.tour__radararcs i:nth-child(2)[b-cu5x7mo1cz] { width: 84px; height: 84px; animation-delay: 1.2s; }

/* 8 close */

.tour__same[b-cu5x7mo1cz] { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.tour__dream[b-cu5x7mo1cz] {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 392px;
    border: 3px solid #3a2a5c;
    border-radius: 18px;
    padding: 18px 24px;
    font-size: 21px;
    color: #cfc8de;
    text-align: left;
    background: rgba(11,0,24,.55);
    animation: floaty-b-cu5x7mo1cz 5s ease-in-out infinite;
}
.tour__dream:nth-child(2)[b-cu5x7mo1cz] { animation-delay: 1s; }
.tour__dream:nth-child(3)[b-cu5x7mo1cz] { animation-delay: 2s; }
.tour__dice2[b-cu5x7mo1cz] { font-size: 36px; }

.tour__helloduo[b-cu5x7mo1cz] { display: flex; align-items: center; gap: 22px; margin-top: 28px; }
.tour__hphone[b-cu5x7mo1cz] {
    width: 122px;
    height: 248px;
    border: 5px solid #D942DB;
    border-radius: 26px;
    position: relative;
    background: rgba(217,66,219,.07);
    box-shadow: 0 0 32px rgba(217,66,219,.35);
    animation: floaty-b-cu5x7mo1cz 4s ease-in-out infinite;
}
.tour__hphone[b-cu5x7mo1cz]::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 6px;
    border-radius: 4px;
    background: #D942DB;
    opacity: .6;
}
.tour__hbtn[b-cu5x7mo1cz] {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -24px;
    transform: translateX(-50%);
    padding: 0 14px;
    height: 48px;
    border-radius: 24px;
    background: #14F1D9;
    color: #06222b;
    font-size: 13px;
    font-weight: 800;
    display: grid;
    place-items: center;
    letter-spacing: .04em;
    animation: helloglow-b-cu5x7mo1cz 2s ease-in-out infinite;
    white-space: nowrap;
}

@keyframes helloglow-b-cu5x7mo1cz {
    0%, 100% { box-shadow: 0 0 16px rgba(20,241,217,.5); transform: translateX(-50%) scale(1); }
    50% { box-shadow: 0 0 36px rgba(20,241,217,.95); transform: translateX(-50%) scale(1.07); }
}

/* The signal between phone and wall: three aqua dots lighting up in sequence. */
.tour__hlink[b-cu5x7mo1cz] { display: flex; gap: 12px; }
.tour__hlink i[b-cu5x7mo1cz] {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #22D3EE;
    box-shadow: 0 0 10px rgba(34,211,238,.8);
    animation: linkflow-b-cu5x7mo1cz 1.4s ease-in-out infinite;
}
.tour__hlink i:nth-child(2)[b-cu5x7mo1cz] { animation-delay: .22s; }
.tour__hlink i:nth-child(3)[b-cu5x7mo1cz] { animation-delay: .44s; }

@keyframes linkflow-b-cu5x7mo1cz {
    0%, 100% { opacity: .15; transform: scale(.8); }
    35% { opacity: 1; transform: scale(1.15); }
}

@keyframes wavey-b-cu5x7mo1cz {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(18deg); }
    50% { transform: rotate(-8deg); }
    75% { transform: rotate(12deg); }
}

.tour__hwall[b-cu5x7mo1cz] {
    width: 96px;
    height: 248px;
    border: 5px solid #14F1D9;
    border-radius: 12px;
    background: linear-gradient(180deg, #0B0018, #1C0733);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 0 28px rgba(20,241,217,.3);
    animation: floaty-b-cu5x7mo1cz 4s ease-in-out .6s infinite;
}
.tour__m[b-cu5x7mo1cz] {
    font-size: 46px;
    animation: wavey-b-cu5x7mo1cz 2s ease-in-out infinite;
    transform-origin: 70% 70%;
}
.tour__hcap[b-cu5x7mo1cz] {
    font-size: 13px;
    letter-spacing: .18em;
    color: #22D3EE;
}

/* The SAY HELLO moment: the wall's wave grows and the panel flares. */
.tour--hello .tour__m[b-cu5x7mo1cz] { font-size: 66px; }
.tour--hello .tour__hwall[b-cu5x7mo1cz] { box-shadow: 0 0 52px rgba(20,241,217,.75); }


/* ---- Choreography (#369 video-feel pass): parts fade in staggered per page, the last state
   holds, and ~2s later the copy typewrites in (SignageWallTour.razor.js). ---- */

.tour__part[b-cu5x7mo1cz] {
    opacity: 0;
    animation: partin-b-cu5x7mo1cz .9s ease var(--d, 0s) forwards;
}

@keyframes partin-b-cu5x7mo1cz {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* Copy: hidden until typed. --copyfb (inline, per page) is the no-JS fallback reveal. */
.tour__copy[b-cu5x7mo1cz] { opacity: 0; animation: partin-b-cu5x7mo1cz .9s ease var(--copyfb, 9s) forwards; }
.tour__copy--on[b-cu5x7mo1cz] { opacity: 1; animation: none; }


.tour__caret[b-cu5x7mo1cz] {
    display: inline-block;
    width: 4px;
    height: 1em;
    margin-left: 3px;
    vertical-align: -2px;
    background: #22D3EE;
    box-shadow: 0 0 8px rgba(34, 211, 238, .8);
    animation: caretblink-b-cu5x7mo1cz 1s steps(2, end) infinite;
}

@keyframes caretblink-b-cu5x7mo1cz { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Page 4 (three living parts): tiers light one by one, then the whole diagram pops to full
   colour, then the legend lands. */
.tour__tiers .tour__t1[b-cu5x7mo1cz] { opacity: 0; animation: partin-b-cu5x7mo1cz .9s ease 3.9s forwards; }
.tour__tiers .tour__t2[b-cu5x7mo1cz] { opacity: 0; animation: partin-b-cu5x7mo1cz .9s ease 7.9s forwards; }
.tour__tiers .tour__t3[b-cu5x7mo1cz] { opacity: 0; animation: partin-b-cu5x7mo1cz .9s ease 11.9s forwards; }
.tour__tiers[b-cu5x7mo1cz] { animation: tierpop-b-cu5x7mo1cz 1.2s ease 13.1s; }

@keyframes tierpop-b-cu5x7mo1cz {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.6); }
    100% { filter: brightness(1); }
}

/* Page 7 (ecosystem): website -> Pi -> glass -> radar -> the living links, then the labels. */
.tour__eco .tour__cloudweb[b-cu5x7mo1cz] { opacity: 0; animation: partin-b-cu5x7mo1cz .9s ease 3.7s forwards, glowborder-b-cu5x7mo1cz 4s ease-in-out 4.6s infinite; }
.tour__eco .tour__pi2[b-cu5x7mo1cz] { opacity: 0; animation: partin-b-cu5x7mo1cz .9s ease 4.9s forwards; }
.tour__eco .tour__glass2[b-cu5x7mo1cz] { opacity: 0; animation: partin-b-cu5x7mo1cz .9s ease 6.1s forwards, glowborder2-b-cu5x7mo1cz 4s ease-in-out 7s infinite; }
.tour__eco .tour__radar2[b-cu5x7mo1cz] { opacity: 0; animation: partin-b-cu5x7mo1cz .9s ease 7.3s forwards; }
.tour__eco .tour__ecolinks[b-cu5x7mo1cz] { opacity: 0; animation: partin-b-cu5x7mo1cz .9s ease 8.1s forwards; }
.tour__eco .tour__lbl[b-cu5x7mo1cz] { opacity: 0; animation: partin-b-cu5x7mo1cz .9s ease 8.5s forwards, glowpulse-b-cu5x7mo1cz 2.6s ease-in-out 9.5s infinite; }

/* Page 9 finale: two giant rows, centre stage. */
.tour__gofinal[b-cu5x7mo1cz] { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.tour__gofinal span[b-cu5x7mo1cz] { font-size: 118px; font-weight: 800; line-height: 1.05; letter-spacing: -.01em; color: #F7F7F7; opacity: 0; }
.tour__gofinal span:nth-child(1)[b-cu5x7mo1cz] { animation: partin-b-cu5x7mo1cz 1s ease 1.6s forwards; }
.tour__gofinal span:nth-child(2)[b-cu5x7mo1cz] { animation: partin-b-cu5x7mo1cz 1s ease 2.4s forwards; }
.tour__gofinal span:nth-child(3)[b-cu5x7mo1cz] {
    color: #22D3EE;
    animation: partin-b-cu5x7mo1cz 1s ease 3.2s forwards, glowpulse-b-cu5x7mo1cz 2.4s ease-in-out 4.4s infinite;
}

/* Once the copy starts typing (tour--settled, set from JS), the art freezes in place: entrance
   fills hold their final frame and ambient loops stop competing with the text for attention. */
.tour--settled .tour__art[b-cu5x7mo1cz],
.tour--settled .tour__art *[b-cu5x7mo1cz] { animation-play-state: paused !important; }
.tour--settled .tour__art .tour__gchat[b-cu5x7mo1cz],
.tour--settled .tour__art .tour__gchat span[b-cu5x7mo1cz] { animation-play-state: running !important; }

/* Page 1 countdown: 3-2-1 so eyes can move from the phone to the wall. */
.tour__art--now[b-cu5x7mo1cz] { animation-delay: .1s; }
.tour__count[b-cu5x7mo1cz] { position: relative; width: 280px; height: 280px; display: grid; place-items: center; }
.tour__count span[b-cu5x7mo1cz] {
    position: absolute;
    font-size: 200px;
    font-weight: 800;
    color: #D942DB;
    opacity: 0;
    animation: countpop-b-cu5x7mo1cz 1.3s ease both;
}
.tour__count span:nth-child(1)[b-cu5x7mo1cz] { animation-delay: .5s; }
.tour__count span:nth-child(2)[b-cu5x7mo1cz] { animation-delay: 1.8s; }
.tour__count span:nth-child(3)[b-cu5x7mo1cz] { animation-delay: 3.1s; }

@keyframes countpop-b-cu5x7mo1cz {
    0% { opacity: 0; transform: scale(1.7); }
    18% { opacity: 1; transform: scale(1); }
    78% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(.85); }
}
/* /Components/Signage/TetrisController.razor.rz.scp.css */
.play[b-4l4tdm8o95] { height: 100dvh; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 1.5rem; background: #0B0018; color: #cfe9ff; font-family: 'Space Grotesk', system-ui, sans-serif; padding: 1.5rem; }
.play__msg[b-4l4tdm8o95] { font-size: 1.1rem; text-align: center; color: #9fb6d8; }
.pad[b-4l4tdm8o95] { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 0.9rem; }
.pad__row[b-4l4tdm8o95] { display: flex; gap: 0.9rem; }
.pad__btn[b-4l4tdm8o95] { flex: 1; height: 5rem; font-size: 2rem; color: #cfe9ff; background: #1a1140;
            border: 1px solid rgba(60,230,220,.33); border-radius: 1rem; }
.pad__btn:active[b-4l4tdm8o95] { background: #241a55; }
.pad__btn--act[b-4l4tdm8o95] { color: #3ce6dc; box-shadow: 0 0 14px rgba(60,230,220,.27); }
.pad__drop[b-4l4tdm8o95] { height: 4.5rem; font-size: 1.3rem; letter-spacing: 2px; color: #0B0018; font-weight: 700;
             background: linear-gradient(160deg,#5ffbef,#1aa6a0); border: none; border-radius: 1rem; }
.play__over[b-4l4tdm8o95] { text-align: center; display: flex; flex-direction: column; gap: 0.6rem; align-items: center; }
.play__score[b-4l4tdm8o95] { font-size: 3rem; color: #3ce6dc; margin: 0; }
.play__sub[b-4l4tdm8o95] { color: #9fb6d8; margin: 0; }
.play__label[b-4l4tdm8o95] { font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; color: #8a86b8; margin-top: .5rem; }
.play__handle[b-4l4tdm8o95] { font-size: 1.6rem; text-align: center; text-transform: uppercase; width: 7rem; padding: .4rem;
                background: #11082e; border: 1px solid #241c4d; border-radius: .5rem; color: #cfe9ff; }
.play__submit[b-4l4tdm8o95], .play__retry[b-4l4tdm8o95] { padding: .8rem 1.6rem; font-size: 1rem; border-radius: .6rem; border: none;
                background: #3ce6dc; color: #0B0018; font-weight: 700; }
.play__submit[disabled][b-4l4tdm8o95] { opacity: .5; }
/* /Components/Signage/WallTourController.razor.rz.scp.css */
.tourctl[b-xdrsux8si2] { display: flex; flex-direction: column; gap: .75rem; padding: .9rem; }

.tourctl__now[b-xdrsux8si2] { display: flex; align-items: baseline; justify-content: space-between; }
.tourctl__eyebrow[b-xdrsux8si2] { font-size: .68rem; color: #8a86b8; text-transform: uppercase; letter-spacing: 1px; }
.tourctl__page[b-xdrsux8si2] { font-size: .85rem; color: #3ce6dc; font-weight: 700; font-variant-numeric: tabular-nums; }

.tourctl__title[b-xdrsux8si2] { font-size: 1.15rem; font-weight: 700; color: #cfe9ff; line-height: 1.25; min-height: 2.9rem; }

.tourctl__progress[b-xdrsux8si2] { display: flex; gap: .35rem; }
.tourctl__dot[b-xdrsux8si2] { flex: 1; height: 4px; border-radius: 2px; background: #241c4d; transition: background .3s ease; }
.tourctl__dot--done[b-xdrsux8si2] { background: #1aa6a0; }
.tourctl__dot--on[b-xdrsux8si2] { background: #3ce6dc; box-shadow: 0 0 8px rgba(60, 230, 220, .6); }

.tourctl__row[b-xdrsux8si2] { display: grid; grid-template-columns: 1fr 1.6fr; gap: .6rem; }
.tourctl__prev[b-xdrsux8si2], .tourctl__next[b-xdrsux8si2] {
    padding: .95rem .5rem; border: none; border-radius: .7rem; cursor: pointer;
    font-size: 1rem; font-weight: 700; letter-spacing: .5px;
}
.tourctl__prev[b-xdrsux8si2] { color: #cfe9ff; background: #1b1140; border: 1px solid #241c4d; }
.tourctl__prev:disabled[b-xdrsux8si2] { opacity: .35; cursor: default; }
.tourctl__next[b-xdrsux8si2] { color: #0B0018; background: linear-gradient(160deg, #5ffbef, #1aa6a0);
                 box-shadow: 0 0 14px rgba(60, 230, 220, .25); }
.tourctl__next:active[b-xdrsux8si2], .tourctl__hello:active[b-xdrsux8si2] { filter: brightness(.88); }

.tourctl__hello[b-xdrsux8si2] {
    padding: .95rem .5rem; border: none; border-radius: .7rem; cursor: pointer;
    font-size: 1rem; font-weight: 700; letter-spacing: .5px;
    color: #fff; background: linear-gradient(160deg, #ff7ae8, #b0289b);
    box-shadow: 0 0 14px rgba(217, 66, 219, .3);
}

.tourctl__hint[b-xdrsux8si2] { font-size: .75rem; color: #8a86b8; line-height: 1.4; text-align: center; }

.tourctl__exit[b-xdrsux8si2] { background: none; border: none; color: #3ce6dc; font-size: .9rem; cursor: pointer;
                 padding: .4rem; align-self: center; }

.tourctl__busy[b-xdrsux8si2] { font-size: .95rem; color: #9fb6d8; text-align: center; padding: 1rem 0; }