@import '_content/AuralizeBlazor/AuralizeBlazor.tf5u2o3oxg.bundle.scp.css';
@import '_content/Nextended.Blazor/Nextended.Blazor.tkxqvq0zjw.bundle.scp.css';

/* /Components/AdvancedCaptcha.razor.rz.scp.css */
.captcha[b-1m0qp4k0s9] {
    --_c: var(--nx-accent);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--_c) 35%, var(--nx-border));
    border-left: 3px solid var(--_c);
    border-radius: var(--nx-radius-sm);
    background: color-mix(in srgb, var(--_c) 6%, transparent);
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}

.captcha--ok[b-1m0qp4k0s9] {
    --_c: var(--nx-lime);
    box-shadow: 0 0 28px color-mix(in srgb, var(--nx-lime) 14%, transparent);
}

.captcha--error[b-1m0qp4k0s9] {
    --_c: var(--nx-red);
}

.captcha-head[b-1m0qp4k0s9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.captcha-kicker[b-1m0qp4k0s9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--_c);
}

.captcha-kicker .bi[b-1m0qp4k0s9] {
    text-shadow: 0 0 10px var(--_c);
}

.captcha-question[b-1m0qp4k0s9] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.45;
    color: var(--nx-text);
}

.captcha-question .bi[b-1m0qp4k0s9] {
    flex: none;
    margin-top: 2px;
    color: var(--_c);
}

.captcha-hint[b-1m0qp4k0s9] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .captcha--error[b-1m0qp4k0s9] {
        animation: captcha-shake-b-1m0qp4k0s9 0.35s ease;
    }

    .captcha--ok .captcha-kicker .bi[b-1m0qp4k0s9] {
        animation: captcha-pop-b-1m0qp4k0s9 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .captcha[b-1m0qp4k0s9] { transition: none; }
}

@keyframes captcha-shake-b-1m0qp4k0s9 {
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

@keyframes captcha-pop-b-1m0qp4k0s9 {
    from { transform: scale(0.4); }
    to { transform: none; }
}
/* /Components/AiSummarizer.razor.rz.scp.css */
/* ---------- Trigger button ---------- */

.ai-summary[b-7j8qe9dyv1] {
    display: contents;
}

.ai-summary[b-7j8qe9dyv1]  .ai-summary-button {
    font-weight: 600;
    box-shadow: 0 0 14px color-mix(in srgb, var(--nx-accent) 35%, transparent),
        0 0 28px color-mix(in srgb, var(--nx-accent-2) 18%, transparent);
}

.ai-summary[b-7j8qe9dyv1]  .ai-summary-button .bi {
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--nx-on-accent) 40%, transparent));
}

@media (prefers-reduced-motion: no-preference) {
    .ai-summary[b-7j8qe9dyv1]  .ai-summary-button {
        animation: ais-pulse-b-7j8qe9dyv1 2.6s ease-in-out infinite;
    }

    .ai-summary[b-7j8qe9dyv1]  .ai-summary-button:hover {
        animation-play-state: paused;
    }
}

@keyframes ais-pulse-b-7j8qe9dyv1 {
    0%, 100% {
        box-shadow: 0 0 12px color-mix(in srgb, var(--nx-accent) 30%, transparent),
            0 0 24px color-mix(in srgb, var(--nx-accent-2) 14%, transparent);
    }
    50% {
        box-shadow: 0 0 20px color-mix(in srgb, var(--nx-accent) 55%, transparent),
            0 0 40px color-mix(in srgb, var(--nx-accent-2) 28%, transparent);
    }
}

/* ---------- Panel ---------- */

.ais-panel[b-7j8qe9dyv1] {
    height: min(600px, calc(100vh - 220px));
    min-height: 320px;
    display: flex;
    flex-direction: column;
}

.ais-center[b-7j8qe9dyv1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
}

.ais-orb[b-7j8qe9dyv1] {
    position: relative;
    display: grid;
    place-items: center;
}

.ais-orb .nx-spinner[b-7j8qe9dyv1] {
    width: 64px;
    height: 64px;
}

.ais-orb .bi[b-7j8qe9dyv1] {
    position: absolute;
    font-size: 1.4rem;
    color: var(--nx-accent);
    text-shadow: 0 0 14px var(--nx-accent);
}

@media (prefers-reduced-motion: no-preference) {
    .ais-orb .bi[b-7j8qe9dyv1] { animation: ais-twinkle-b-7j8qe9dyv1 1.6s ease-in-out infinite; }
}

@keyframes ais-twinkle-b-7j8qe9dyv1 {
    0%, 100% { opacity: 0.6; scale: 0.9; }
    50% { opacity: 1; scale: 1.1; }
}

.ais-scan-label[b-7j8qe9dyv1] {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: var(--nx-text-dim);
}

.ais-center[b-7j8qe9dyv1]  .ais-error {
    max-width: 520px;
    text-align: left;
}

/* ---------- Chat ---------- */

.ais-chat[b-7j8qe9dyv1] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ais-article[b-7j8qe9dyv1] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--nx-border);
    border-left: 3px solid var(--nx-accent);
    border-radius: var(--nx-radius-sm);
    background: color-mix(in srgb, var(--nx-accent) 6%, transparent);
}

.ais-article > .bi[b-7j8qe9dyv1] {
    font-size: 1.2rem;
    color: var(--nx-accent);
    margin-top: 1px;
}

.ais-article-text[b-7j8qe9dyv1] {
    min-width: 0;
}

.ais-article-title[b-7j8qe9dyv1] {
    font-weight: 600;
    line-height: 1.35;
    color: var(--nx-text);
}

.ais-transcript[b-7j8qe9dyv1] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 4px 4px 0;
    scrollbar-width: thin;
}

.ais-row[b-7j8qe9dyv1] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.ais-row--user[b-7j8qe9dyv1] {
    justify-content: flex-end;
}

.ais-bot[b-7j8qe9dyv1] {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--nx-cyan), var(--nx-green));
    color: var(--nx-on-accent);
    font-size: 0.8rem;
    box-shadow: 0 0 12px color-mix(in srgb, var(--nx-accent) 40%, transparent);
}

.ais-bubble[b-7j8qe9dyv1] {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 16px 16px 16px 4px;
    border: 1px solid var(--nx-border);
    background: var(--nx-surface-hover);
    color: var(--nx-text);
    font-size: 0.92rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ais-bubble--user[b-7j8qe9dyv1] {
    border-radius: 16px 16px 4px 16px;
    border-color: transparent;
    background: linear-gradient(135deg, var(--nx-cyan), var(--nx-green));
    color: var(--nx-on-accent);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--nx-accent) 22%, transparent);
}

.ais-bubble--streaming[b-7j8qe9dyv1] {
    border-color: color-mix(in srgb, var(--nx-accent) 45%, transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--nx-accent) 14%, transparent);
}

.ais-bubble--thinking[b-7j8qe9dyv1] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--nx-text-dim);
    font-size: 0.8rem;
}

.ais-caret[b-7j8qe9dyv1] {
    display: inline-block;
    width: 8px;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--nx-accent);
    box-shadow: 0 0 8px var(--nx-accent);
}

.ais-dots[b-7j8qe9dyv1] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
}

.ais-dots span[b-7j8qe9dyv1] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--nx-accent);
}

@media (prefers-reduced-motion: no-preference) {
    /* Only rows that appear fresh: the streamed reply swaps into a permanent row when it
       finishes, and fading that one in again would flicker. */
    .ais-row--user[b-7j8qe9dyv1],
    .ais-row--pending[b-7j8qe9dyv1] {
        animation: ais-in-b-7j8qe9dyv1 0.3s var(--nx-ease) both;
    }

    .ais-caret[b-7j8qe9dyv1] {
        animation: ais-blink-b-7j8qe9dyv1 1s step-end infinite;
    }

    .ais-dots span[b-7j8qe9dyv1] {
        animation: ais-bounce-b-7j8qe9dyv1 1.2s ease-in-out infinite;
    }

    .ais-dots span:nth-child(2)[b-7j8qe9dyv1] { animation-delay: 0.15s; }
    .ais-dots span:nth-child(3)[b-7j8qe9dyv1] { animation-delay: 0.3s; }
}

@keyframes ais-in-b-7j8qe9dyv1 {
    from { opacity: 0; translate: 0 8px; }
    to { opacity: 1; translate: none; }
}

@keyframes ais-blink-b-7j8qe9dyv1 {
    50% { opacity: 0; }
}

@keyframes ais-bounce-b-7j8qe9dyv1 {
    0%, 60%, 100% { translate: 0 0; opacity: 0.4; }
    30% { translate: 0 -4px; opacity: 1; }
}

/* ---------- Composer ---------- */

.ais-composer[b-7j8qe9dyv1] {
    padding-top: 12px;
    border-top: 1px solid var(--nx-border);
}

.ais-composer-row[b-7j8qe9dyv1] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.ais-input[b-7j8qe9dyv1] {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.ais-input textarea[b-7j8qe9dyv1] {
    max-height: 9.5em;
}

.ais-composer-row[b-7j8qe9dyv1]  .ais-send {
    min-width: 48px;
    height: 48px;
    padding: 0 14px;
}

.ais-hint[b-7j8qe9dyv1] {
    display: block;
    margin-top: 6px;
    font-size: 0.7rem;
}

.ais-hint kbd[b-7j8qe9dyv1] {
    padding: 1px 5px;
    border: 1px solid var(--nx-border-strong);
    border-radius: 4px;
    background: transparent;
    color: var(--nx-text-dim);
    font-family: inherit;
    font-size: inherit;
}

@media (max-width: 600px) {
    .ais-bubble[b-7j8qe9dyv1] { max-width: 88%; }
    .ais-bot[b-7j8qe9dyv1] { display: none; }
}
/* /Components/Blog/AffiliateDisclosureNotice.razor.rz.scp.css */
.affiliate-notice[b-w0y391075p] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 32px;
    padding: 18px;
    border: 1px dashed var(--nx-border-strong);
    border-radius: var(--nx-radius-sm);
    background: color-mix(in srgb, var(--nx-amber) 5%, transparent);
}

.affiliate-text[b-w0y391075p] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--nx-text-dim);
}

.affiliate-text > .bi[b-w0y391075p] {
    color: var(--nx-amber);
    font-size: 1rem;
    line-height: 1.3;
}

.affiliate-label[b-w0y391075p] {
    margin-right: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nx-amber);
}

/* Long product names shouldn't push the button wider than the post column. */
.affiliate-notice[b-w0y391075p]  .nx-btn {
    white-space: normal;
    text-align: center;
    padding-top: 8px;
    padding-bottom: 8px;
}
/* /Components/Blog/BlogComments.razor.rz.scp.css */
/* ---------- Compose ---------- */

.comment-compose > summary .bi[b-89ks7637hw] {
    color: var(--nx-accent);
}

.comment-compose[open][b-89ks7637hw] {
    border-color: color-mix(in srgb, var(--nx-accent) 35%, var(--nx-border));
    box-shadow: var(--nx-glow-soft);
}

.comment-form[b-89ks7637hw] {
    padding-top: 4px;
}

.comment-form-foot[b-89ks7637hw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.comment-form-foot .bi[b-89ks7637hw] {
    color: var(--nx-lime);
}

/* ---------- Thread ---------- */

.comment-thread[b-89ks7637hw] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

/* The glowing rail that strings the avatars together. */
.comment-thread[b-89ks7637hw]::before {
    content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 19px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--nx-cyan), var(--nx-green), transparent);
    opacity: 0.35;
}

.comment-item[b-89ks7637hw] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.comment-avatar[b-89ks7637hw] {
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, hsl(var(--h, 190) 85% 58%), hsl(calc(var(--h, 190) + 40) 75% 52%));
    box-shadow: 0 0 0 3px var(--nx-surface-solid), 0 0 16px hsl(var(--h, 190) 85% 58% / 0.45);
    font-family: var(--nx-font-mono);
}

.comment-bubble[b-89ks7637hw] {
    flex: 1;
    min-width: 0;
    padding: 12px 16px 14px;
    border: 1px solid var(--nx-border);
    border-radius: 4px var(--nx-radius) var(--nx-radius) var(--nx-radius);
    background: color-mix(in srgb, var(--nx-bg) 40%, transparent);
    transition: border-color 0.2s, box-shadow 0.25s;
}

.comment-item:hover .comment-bubble[b-89ks7637hw] {
    border-color: color-mix(in srgb, hsl(var(--h, 190) 85% 58%) 45%, transparent);
    box-shadow: 0 0 22px color-mix(in srgb, var(--nx-accent) 10%, transparent);
}

.comment-head[b-89ks7637hw] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin-bottom: 6px;
}

.comment-author[b-89ks7637hw] {
    font-weight: 700;
    color: var(--nx-text);
}

.comment-time[b-89ks7637hw] {
    font-size: 0.72rem;
    color: var(--nx-text-faint);
}

.comment-content[b-89ks7637hw] {
    margin: 0;
    white-space: pre-wrap;
    line-height: 1.55;
    color: var(--nx-text-dim);
    overflow-wrap: anywhere;
}

.comment-empty[b-89ks7637hw] {
    margin: 20px 0 0;
}

.comment-empty .bi[b-89ks7637hw] {
    color: var(--nx-accent);
    margin-right: 4px;
}

@media (prefers-reduced-motion: no-preference) {
    .comment-item[b-89ks7637hw] {
        animation: comment-in-b-89ks7637hw 0.4s var(--nx-ease) both;
    }
}

@keyframes comment-in-b-89ks7637hw {
    from { opacity: 0; translate: 0 10px; }
    to { opacity: 1; translate: none; }
}

@media (max-width: 600px) {
    .comment-thread[b-89ks7637hw]::before { left: 15px; }
    .comment-avatar[b-89ks7637hw] { width: 32px; height: 32px; font-size: 0.85rem; }
    .comment-item[b-89ks7637hw] { gap: 10px; }
}
/* /Components/Blog/BlogPostCard.razor.rz.scp.css */
.post-card[b-i5b89glvah] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
}

.post-card-media[b-i5b89glvah] {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--nx-bg-elevated);
}

.post-card-media img[b-i5b89glvah] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s var(--nx-ease), filter 0.5s;
    filter: saturate(0.9);
}

.post-card:hover .post-card-media img[b-i5b89glvah] {
    transform: scale(1.06);
    filter: saturate(1.15);
}

/* Category-colored scanline along the bottom edge of the image. */
.post-card-media[b-i5b89glvah]::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cat), transparent);
    box-shadow: 0 0 12px var(--cat);
    opacity: 0.8;
}

.post-card-body[b-i5b89glvah] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
    padding: 18px 20px 20px;
}

.post-card-top[b-i5b89glvah] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.post-card-chip[b-i5b89glvah] {
    position: relative;
    z-index: 2;
}

.post-card-date[b-i5b89glvah] {
    font-size: 0.72rem;
    color: var(--nx-text-faint);
}

.post-card-title[b-i5b89glvah] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.post-card-link[b-i5b89glvah] {
    color: var(--nx-text);
    text-decoration: none;
}

/* Stretched link: the whole card is clickable while the category chip stays its own link. */
.post-card-link[b-i5b89glvah]::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.post-card-link:focus-visible[b-i5b89glvah] {
    outline: none;
}

.post-card:has(.post-card-link:focus-visible)[b-i5b89glvah] {
    outline: 2px solid var(--nx-accent);
    outline-offset: 3px;
}

.post-card:hover .post-card-link[b-i5b89glvah] {
    color: var(--nx-accent);
}

.post-card-excerpt[b-i5b89glvah] {
    margin: 0;
    color: var(--nx-text-dim);
    font-size: 0.93rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card-meta[b-i5b89glvah] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 6px;
    font-size: 0.75rem;
    color: var(--nx-text-faint);
}

.post-card-meta span[b-i5b89glvah] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.post-card-read[b-i5b89glvah] {
    margin-left: auto;
    color: var(--nx-accent);
    font-weight: 600;
}

.post-card-read .bi[b-i5b89glvah] {
    transition: transform 0.25s var(--nx-ease);
}

.post-card:hover .post-card-read .bi[b-i5b89glvah] {
    transform: translateX(4px);
}

.post-card-tags[b-i5b89glvah] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}

/* ---------- Featured lead story ---------- */

.post-card--featured[b-i5b89glvah] {
    grid-column: 1 / -1;
    min-height: 420px;
    justify-content: flex-end;
}

.post-card--featured .post-card-media[b-i5b89glvah] {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    z-index: -1;
}

.post-card--featured .post-card-media[b-i5b89glvah]::after {
    top: 0;
    height: auto;
    background:
        linear-gradient(180deg, transparent 20%, rgba(3, 5, 12, 0.55) 55%, rgba(3, 5, 12, 0.95) 100%),
        linear-gradient(90deg, rgba(3, 5, 12, 0.6), transparent 70%);
    box-shadow: none;
    opacity: 1;
}

.post-card--featured .post-card-body[b-i5b89glvah] {
    flex: 0 0 auto;
    max-width: 720px;
    padding: 28px 32px 30px;
}

/* The image overlay is dark in both themes, so featured text stays light. */
.post-card--featured .post-card-link[b-i5b89glvah],
.post-card--featured .post-card-excerpt[b-i5b89glvah],
.post-card--featured .post-card-meta[b-i5b89glvah],
.post-card--featured .post-card-date[b-i5b89glvah],
.post-card--featured .nx-tag[b-i5b89glvah] {
    color: #e6edf7;
}

.post-card--featured .post-card-excerpt[b-i5b89glvah],
.post-card--featured .post-card-meta[b-i5b89glvah],
.post-card--featured .post-card-date[b-i5b89glvah],
.post-card--featured .nx-tag[b-i5b89glvah] {
    opacity: 0.82;
}

.post-card--featured .post-card-title[b-i5b89glvah] {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.post-card--featured:hover .post-card-link[b-i5b89glvah] {
    color: #fff;
    text-shadow: 0 0 24px var(--cat), 0 2px 20px rgba(0, 0, 0, 0.5);
}

.post-card--featured:not(.post-card--no-image) .post-card-chip[b-i5b89glvah] {
    color: #e6edf7;
}

.post-card--featured .post-card-read[b-i5b89glvah] {
    color: #67e8f9;
}

.post-card--featured.post-card--no-image[b-i5b89glvah] {
    min-height: 0;
    background:
        radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--cat) 30%, transparent), transparent 55%),
        var(--nx-surface);
}

.post-card--featured.post-card--no-image .post-card-link[b-i5b89glvah],
.post-card--featured.post-card--no-image .post-card-excerpt[b-i5b89glvah],
.post-card--featured.post-card--no-image .post-card-meta[b-i5b89glvah],
.post-card--featured.post-card--no-image .post-card-date[b-i5b89glvah],
.post-card--featured.post-card--no-image .nx-tag[b-i5b89glvah] {
    color: var(--nx-text);
}

@media (max-width: 640px) {
    .post-card--featured[b-i5b89glvah] { min-height: 360px; }
    .post-card--featured .post-card-body[b-i5b89glvah] { padding: 20px; }
}
/* /Components/Blog/BlogSidebar.razor.rz.scp.css */
.blog-sidebar[b-7s6oswyglv] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-search-go[b-7s6oswyglv] {
    width: 32px;
    height: 32px;
    font-size: 0.95rem;
}

.sidebar-ai[b-7s6oswyglv] {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

.sidebar-cats[b-7s6oswyglv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-cat[b-7s6oswyglv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--nx-radius-sm);
    color: var(--nx-text-dim);
    text-decoration: none;
    font-size: 0.92rem;
    transition: background 0.15s, color 0.15s;
}

.sidebar-cat:hover[b-7s6oswyglv] {
    color: var(--nx-text);
    background: color-mix(in srgb, var(--cat) 10%, transparent);
}

.sidebar-cat.active[b-7s6oswyglv] {
    color: var(--nx-text);
    background: color-mix(in srgb, var(--cat) 14%, transparent);
}

.sidebar-cat-dot[b-7s6oswyglv] {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--cat);
    box-shadow: 0 0 8px var(--cat);
}

.sidebar-cat-name[b-7s6oswyglv] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-loading[b-7s6oswyglv] {
    display: grid;
    place-items: center;
    padding: 12px;
}

.sidebar-recent[b-7s6oswyglv] {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: recent;
}

.sidebar-recent li[b-7s6oswyglv] {
    counter-increment: recent;
    border-top: 1px solid var(--nx-border);
}

.sidebar-recent li:first-child[b-7s6oswyglv] {
    border-top: 0;
}

.sidebar-recent a[b-7s6oswyglv] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 12px;
    padding: 10px 0;
    text-decoration: none;
}

.sidebar-recent a[b-7s6oswyglv]::before {
    content: counter(recent, decimal-leading-zero);
    grid-row: span 2;
    font-family: var(--nx-font-mono);
    font-size: 0.8rem;
    color: var(--nx-accent);
    padding-top: 2px;
}

.sidebar-recent-title[b-7s6oswyglv] {
    color: var(--nx-text);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s;
}

.sidebar-recent a:hover .sidebar-recent-title[b-7s6oswyglv] {
    color: var(--nx-accent);
}

.sidebar-recent-date[b-7s6oswyglv] {
    font-size: 0.72rem;
    color: var(--nx-text-faint);
}

.sidebar-empty[b-7s6oswyglv] {
    color: var(--nx-text-dim);
}
/* /Components/Fortune/FortuneCard.razor.rz.scp.css */
.fortune-card[b-q9bbdblmb5] {
    --rc: var(--nx-border);
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 .55rem;
    padding: .65rem .85rem .65rem 1rem;
    border: 1px solid var(--nx-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--nx-bg) 45%, transparent);
    color: var(--nx-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s var(--nx-ease), border-color .2s ease;
}

/* Rarity stripe down the left edge. */
.fortune-card[b-q9bbdblmb5]::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--rc);
    box-shadow: 0 0 10px var(--rc);
    opacity: .8;
}

.fortune-card:hover[b-q9bbdblmb5],
.fortune-card:focus-visible[b-q9bbdblmb5] {
    border-color: var(--nx-accent);
    box-shadow: var(--nx-glow-soft);
    transform: translateY(-1px);
}

.fortune-card:focus-visible[b-q9bbdblmb5] {
    outline: 2px solid var(--nx-accent);
    outline-offset: 2px;
}

.fortune-card-text[b-q9bbdblmb5] {
    font-size: .85rem;
    font-style: italic;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.fortune-card-meta[b-q9bbdblmb5] {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .4rem;
    font-size: .68rem;
    font-family: var(--nx-font-mono);
    color: var(--nx-text-faint);
    white-space: nowrap;
    overflow: hidden;
}

.fortune-card-meta span:first-child[b-q9bbdblmb5] {
    text-overflow: ellipsis;
    overflow: hidden;
}

.fortune-card.rarity-common[b-q9bbdblmb5] {
    --rc: color-mix(in srgb, var(--nx-accent) 45%, transparent);
}

.fortune-card.rarity-rare[b-q9bbdblmb5] {
    --rc: #60a5fa;
    border-color: color-mix(in srgb, #60a5fa 55%, transparent);
}

.fortune-card.rarity-legendary[b-q9bbdblmb5] {
    --rc: #f5b942;
    border-color: color-mix(in srgb, #f5b942 60%, transparent);
}

.fortune-card.rarity-mythic[b-q9bbdblmb5] {
    --rc: #fb7185;
    border-color: color-mix(in srgb, #fb7185 60%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .fortune-card[b-q9bbdblmb5] { transition: none; }
    .fortune-card:hover[b-q9bbdblmb5],
    .fortune-card:focus-visible[b-q9bbdblmb5] { transform: none; }
}
/* /Components/Fortune/FortuneDetails.razor.rz.scp.css */
.fortune-details[b-jvspgk5ybe] {
    --rc: var(--nx-accent);
    position: relative;
    padding: 22px 22px 18px;
    border-radius: var(--nx-radius);
    border: 1px solid color-mix(in srgb, var(--rc) 40%, var(--nx-border));
    background:
        radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--rc) 14%, transparent), transparent 60%),
        color-mix(in srgb, var(--nx-bg) 45%, transparent);
    box-shadow: 0 0 30px color-mix(in srgb, var(--rc) 14%, transparent);
    overflow: hidden;
    text-align: center;
}

.fortune-details.rarity-rare[b-jvspgk5ybe] { --rc: #60a5fa; }
.fortune-details.rarity-legendary[b-jvspgk5ybe] { --rc: #f5b942; }
.fortune-details.rarity-mythic[b-jvspgk5ybe] { --rc: #fb7185; }

.fd-rarity[b-jvspgk5ybe] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--rc);
    text-shadow: 0 0 12px color-mix(in srgb, var(--rc) 50%, transparent);
    margin-bottom: 12px;
}

.fd-text[b-jvspgk5ybe] {
    margin: 0;
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.55;
    color: var(--nx-text);
}

.fd-mood[b-jvspgk5ybe] {
    margin-top: 12px;
    --_c: var(--rc);
}

.fd-numbers[b-jvspgk5ybe] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.fd-ball[b-jvspgk5ybe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-family: var(--nx-font-mono);
    font-size: 0.82rem;
    font-weight: 700;
    background: var(--nx-surface-solid);
    border: 1px solid var(--nx-border-strong);
    color: var(--nx-text);
}

.fd-ball.star[b-jvspgk5ybe] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #3b2405;
    border-color: transparent;
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.5);
}

.fd-time[b-jvspgk5ybe] {
    margin-top: 18px;
    font-size: 0.72rem;
    color: var(--nx-text-faint);
}

.fd-actions[b-jvspgk5ybe] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

/* Little twinkles in the corners; brighter for the rarer fortunes. */
.fd-sparkle[b-jvspgk5ybe] {
    position: absolute;
    color: var(--rc);
    opacity: 0.55;
    pointer-events: none;
    text-shadow: 0 0 10px var(--rc);
}

.fd-sparkle.s1[b-jvspgk5ybe] { top: 10px; left: 14px; font-size: 0.9rem; }
.fd-sparkle.s2[b-jvspgk5ybe] { top: 16px; right: 18px; font-size: 1.2rem; }
.fd-sparkle.s3[b-jvspgk5ybe] { bottom: 12px; right: 40px; font-size: 0.7rem; }

.rarity-common .fd-sparkle.s3[b-jvspgk5ybe] { display: none; }

@media (prefers-reduced-motion: no-preference) {
    .fd-ball[b-jvspgk5ybe] {
        animation: fd-pop-b-jvspgk5ybe 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    .fd-ball:nth-child(1)[b-jvspgk5ybe] { animation-delay: 0.05s; }
    .fd-ball:nth-child(2)[b-jvspgk5ybe] { animation-delay: 0.1s; }
    .fd-ball:nth-child(3)[b-jvspgk5ybe] { animation-delay: 0.15s; }
    .fd-ball:nth-child(4)[b-jvspgk5ybe] { animation-delay: 0.2s; }
    .fd-ball:nth-child(5)[b-jvspgk5ybe] { animation-delay: 0.25s; }
    .fd-ball:nth-child(6)[b-jvspgk5ybe] { animation-delay: 0.3s; }
    .fd-ball:nth-child(7)[b-jvspgk5ybe] { animation-delay: 0.35s; }

    .fd-sparkle[b-jvspgk5ybe] {
        animation: fd-twinkle-b-jvspgk5ybe 2.4s ease-in-out infinite;
    }

    .fd-sparkle.s2[b-jvspgk5ybe] { animation-delay: 0.8s; }
    .fd-sparkle.s3[b-jvspgk5ybe] { animation-delay: 1.5s; }
}

@keyframes fd-pop-b-jvspgk5ybe {
    from { opacity: 0; scale: 0.4; }
    to { opacity: 1; scale: 1; }
}

@keyframes fd-twinkle-b-jvspgk5ybe {
    0%, 100% { opacity: 0.2; scale: 0.8; rotate: 0deg; }
    50% { opacity: 0.9; scale: 1.15; rotate: 20deg; }
}
/* /Components/Fortune/RecentFortunesWidget.razor.rz.scp.css */
.fortune-widget-emoji[b-35dijk6qyv] {
    font-size: 1.1rem;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.5));
}

.fortune-widget-loading[b-35dijk6qyv] {
    display: grid;
    place-items: center;
    padding: 16px;
}

.fortune-widget-empty[b-35dijk6qyv] {
    color: var(--nx-text-dim);
}

.fortune-widget-actions[b-35dijk6qyv] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
/* /Components/Jokes/JokeOfTheDayWidget.razor.rz.scp.css */
.joke-widget[b-zu9xror5bj] {
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--nx-amber) 16%, transparent), transparent 55%),
        var(--nx-surface);
}

.joke-widget .bi-emoji-laughing[b-zu9xror5bj] {
    color: var(--nx-amber);
}

.joke-loading[b-zu9xror5bj] {
    display: grid;
    place-items: center;
    padding: 16px;
}

.joke-empty[b-zu9xror5bj] {
    color: var(--nx-text-dim);
}

.joke-setup[b-zu9xror5bj] {
    margin: 0 0 12px;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--nx-text);
}

.joke-reveal > summary[b-zu9xror5bj] {
    list-style: none;
    display: inline-block;
    cursor: pointer;
    user-select: none;
    font-size: 0.8rem;
    color: var(--nx-amber);
    transition: text-shadow 0.2s;
}

.joke-reveal > summary[b-zu9xror5bj]::-webkit-details-marker {
    display: none;
}

.joke-reveal > summary:hover[b-zu9xror5bj] {
    text-shadow: 0 0 10px var(--nx-amber);
}

.joke-reveal[open] > summary[b-zu9xror5bj] {
    opacity: 0.55;
}

.joke-punchline[b-zu9xror5bj] {
    margin: 10px 0 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--nx-amber);
    animation: joke-pop-b-zu9xror5bj 0.45s var(--nx-ease);
}

@keyframes joke-pop-b-zu9xror5bj {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.joke-actions[b-zu9xror5bj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.site-logo[b-aaxpe4575r] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    line-height: 1;
    padding: 4px 0;
    transition: filter 0.2s ease, transform 0.15s ease;
}

.site-logo:hover[b-aaxpe4575r] {
    filter: drop-shadow(0 0 8px var(--nx-accent));
}

.site-logo:active[b-aaxpe4575r] {
    transform: scale(0.97);
}

.site-logo-prompt[b-aaxpe4575r] {
    font-family: var(--nx-font-mono);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--nx-accent);
    text-shadow: 0 0 12px color-mix(in srgb, var(--nx-accent) 60%, transparent);
}

.site-logo-typed[b-aaxpe4575r] {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    vertical-align: bottom;
    font-family: var(--nx-font-mono);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 1.5px;
    color: var(--nx-text);
    text-transform: uppercase;
}

.site-logo-accent[b-aaxpe4575r] {
    font-weight: 400;
    letter-spacing: 0.5px;
    color: var(--nx-accent-2);
}

/* Reveal is driven by clip-path percentages, resolved against the element's own
   laid-out width - unlike a ch-based width guess, this can't clip the last
   character on fonts/devices that render wider or narrower than expected. */
@media (prefers-reduced-motion: no-preference) {
    .site-logo--intro .site-logo-typed[b-aaxpe4575r] {
        clip-path: inset(0 100% 0 0);
        animation: site-logo-reveal-b-aaxpe4575r 1.4s steps(11, end) 0.6s 1 both;
    }

    .site-logo--intro .site-logo-typed[b-aaxpe4575r]::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 3px;
        background: var(--nx-accent);
        box-shadow: 0 0 8px var(--nx-accent);
        animation:
            site-logo-cursor-move-b-aaxpe4575r 1.4s steps(11, end) 0.6s 1 both,
            site-logo-blink-b-aaxpe4575r 0.8s step-end infinite;
    }
}

/* After the circuit attaches the intro class is gone; keep the resting blinking cursor. */
@media (prefers-reduced-motion: no-preference) {
    .site-logo:not(.site-logo--intro) .site-logo-typed[b-aaxpe4575r]::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(100% - 3px);
        width: 3px;
        background: var(--nx-accent);
        box-shadow: 0 0 8px var(--nx-accent);
        animation: site-logo-blink-b-aaxpe4575r 0.8s step-end infinite;
    }
}

@keyframes site-logo-reveal-b-aaxpe4575r {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes site-logo-cursor-move-b-aaxpe4575r {
    from {
        left: 0;
    }
    to {
        /* Stay fully inside the parent's own box - the parent's clip-path clips
           exactly at its edge, so a cursor sitting at left:100% (or beyond) gets
           clipped off entirely once typing finishes instead of staying visible. */
        left: calc(100% - 3px);
    }
}

@keyframes site-logo-blink-b-aaxpe4575r {
    from, to {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

@media (max-width: 400px) {
    .site-logo-typed[b-aaxpe4575r] { font-size: 1rem; letter-spacing: 1px; }
}

/* ---------- "hire me" button ---------- */

.nx-hire[b-aaxpe4575r] {
    position: relative;
}

/* A soft halo that breathes, so the button reads as the site's main call to action. */
@media (prefers-reduced-motion: no-preference) {
    .nx-hire[b-aaxpe4575r]::after {
        content: '';
        position: absolute;
        inset: -3px;
        z-index: -1;
        border-radius: inherit;
        background: linear-gradient(92deg, var(--nx-cyan), var(--nx-lime));
        filter: blur(10px);
        opacity: 0.35;
        animation: hire-breathe-b-aaxpe4575r 3.2s ease-in-out infinite;
    }
}

@keyframes hire-breathe-b-aaxpe4575r {
    50% { opacity: 0.75; }
}

.nx-hire.active[b-aaxpe4575r] {
    box-shadow: var(--nx-glow);
}

@media (max-width: 380px) {
    .nx-hire span[b-aaxpe4575r] { display: none; }
}

/* ---------- Footer ---------- */

.nx-footer[b-aaxpe4575r] {
    position: relative;
    margin-top: 48px;
    border-top: 1px solid var(--nx-border);
    background: color-mix(in srgb, var(--nx-bg) 70%, transparent);
    backdrop-filter: blur(10px);
}

.nx-footer[b-aaxpe4575r]::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--nx-cyan), var(--nx-green), transparent);
    opacity: 0.6;
}

.nx-footer-inner[b-aaxpe4575r] {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
    gap: 24px 40px;
    align-items: start;
    max-width: 1320px;
    margin: 0 auto;
    padding: 32px 24px 36px;
}

.nx-footer-brand[b-aaxpe4575r] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nx-footer-name[b-aaxpe4575r] {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--nx-text);
    text-decoration: none;
}

.nx-footer-tag[b-aaxpe4575r] {
    color: var(--nx-text-dim);
    font-size: 0.9rem;
}

.nx-footer-available[b-aaxpe4575r] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    color: var(--nx-lime);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
}

.nx-footer-linkedin[b-aaxpe4575r] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--nx-text-dim);
    font-size: 0.78rem;
    text-decoration: none;
    transition: color 0.15s;
}

.nx-footer-linkedin .bi[b-aaxpe4575r] { color: #0a66c2; font-size: 1rem; }
.nx-footer-linkedin:hover[b-aaxpe4575r] { color: var(--nx-text); }

[data-theme="dark"] .nx-footer-linkedin .bi[b-aaxpe4575r],
:root:not([data-theme]) .nx-footer-linkedin .bi[b-aaxpe4575r] { color: #4c9fe8; }

.nx-footer-dot[b-aaxpe4575r] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--nx-lime);
    box-shadow: 0 0 8px var(--nx-lime);
}

.nx-footer-links[b-aaxpe4575r] {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    gap: 6px 28px;
    font-size: 0.82rem;
}

.nx-footer-links a[b-aaxpe4575r] {
    color: var(--nx-text-dim);
    text-decoration: none;
    transition: color 0.15s;
}

.nx-footer-links a:hover[b-aaxpe4575r] {
    color: var(--nx-accent);
}

.nx-footer-meta[b-aaxpe4575r] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--nx-text-faint);
}

.nx-footer-ver[b-aaxpe4575r] {
    color: var(--nx-accent);
}

@media (max-width: 800px) {
    .nx-footer-inner[b-aaxpe4575r] { grid-template-columns: minmax(0, 1fr); }
    .nx-footer-meta[b-aaxpe4575r] { align-items: flex-start; }
}

#blazor-error-ui[b-aaxpe4575r] {
    background: var(--nx-surface-solid);
    color: var(--nx-text);
    border-top: 1px solid var(--nx-red);
    bottom: 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

#blazor-error-ui .dismiss[b-aaxpe4575r] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    font-size: 1.2rem;
}
/* /Components/Maps/AttractionEditor.razor.rz.scp.css */
.attraction-form[b-iwmw5l67g2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 10px;
    border: 1px dashed color-mix(in srgb, var(--nx-accent) 40%, transparent);
    background: color-mix(in srgb, var(--nx-accent) 4%, transparent);
}

.attraction-form-actions[b-iwmw5l67g2] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.attraction-empty[b-iwmw5l67g2] {
    margin: 0;
}

.attraction-list[b-iwmw5l67g2] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.attraction-list li[b-iwmw5l67g2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--nx-border);
}

.attraction-list li:first-child[b-iwmw5l67g2] {
    border-top: 0;
}

.attraction-list li > .bi[b-iwmw5l67g2] {
    color: var(--nx-accent);
    font-size: 1.1rem;
}

.attraction-list-text[b-iwmw5l67g2] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.attraction-list-text strong[b-iwmw5l67g2] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attraction-suggestions[b-iwmw5l67g2] {
    margin-bottom: 16px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--nx-accent-2) 35%, transparent);
    background: color-mix(in srgb, var(--nx-accent-2) 5%, transparent);
}

.attraction-suggestions-head[b-iwmw5l67g2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.attraction-suggestions-head .nx-caption[b-iwmw5l67g2] {
    flex: 1;
}

.attraction-suggestion-link[b-iwmw5l67g2] {
    color: var(--nx-text-dim);
    padding: 4px;
}

.attraction-suggestion-link:hover[b-iwmw5l67g2] {
    color: var(--nx-accent);
}
/* /Components/Maps/BlogMapEmbed.razor.rz.scp.css */
.map-embed[b-cy7nbrb8vj] {
    margin-left: 0;
    margin-right: 0;
    padding: 6px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    background: var(--nx-surface);
    box-shadow: 0 0 40px color-mix(in srgb, var(--nx-accent) 10%, transparent);
}

.map-embed[b-cy7nbrb8vj]  .shark-map {
    border-radius: calc(var(--nx-radius) - 6px);
}

/* The embed sits inside the article body, whose typography styles every <img> with a margin, border
   and rounded corners. Leaflet's tiles are <img>s too, and those rules split the map into a grid of
   framed squares - undo them for everything Leaflet draws. */
.map-embed[b-cy7nbrb8vj]  .leaflet-container img {
    margin: 0;
    border: 0;
    border-radius: 0;
}

/* ...then put back the popup thumbnail's own look from shark-map.css. */
.map-embed[b-cy7nbrb8vj]  .leaflet-container img.shark-map-popup-thumb {
    margin-bottom: 6px;
    border-radius: 4px;
}

.map-embed-caption[b-cy7nbrb8vj] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 6px 2px;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--nx-text-faint);
}

.map-embed-caption .bi[b-cy7nbrb8vj] {
    color: var(--nx-accent);
}

.map-embed-loading[b-cy7nbrb8vj] {
    display: grid;
    place-items: center;
    min-height: 120px;
}
/* /Components/Maps/WeatherWidget.razor.rz.scp.css */
.weather[b-5jdrvttxqh] {
    padding: 20px;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--nx-cyan) 14%, transparent), transparent 55%),
        var(--nx-surface);
}

.weather-head[b-5jdrvttxqh] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.weather-head .nx-card-title[b-5jdrvttxqh] { margin: 0; }

.weather-updated[b-5jdrvttxqh] {
    font-size: 0.7rem;
    color: var(--nx-text-faint);
}

/* Each kind of weather gets its own glow color via --wx. */
.weather--sun[b-5jdrvttxqh] { --wx: var(--nx-amber); }
.weather--cloud[b-5jdrvttxqh] { --wx: var(--nx-text-dim); }
.weather--rain[b-5jdrvttxqh] { --wx: var(--nx-cyan); }
.weather--snow[b-5jdrvttxqh] { --wx: #e6edf7; }
.weather--storm[b-5jdrvttxqh] { --wx: var(--nx-lime); }
[data-theme="light"] .weather--snow[b-5jdrvttxqh] { --wx: var(--nx-cyan); }

.weather-now[b-5jdrvttxqh] {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 6px 0 16px;
}

.weather-icon[b-5jdrvttxqh] {
    font-size: 3.4rem;
    line-height: 1;
    color: var(--wx);
    text-shadow: 0 0 24px color-mix(in srgb, var(--wx) 60%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
    .weather-icon[b-5jdrvttxqh] { animation: weather-float-b-5jdrvttxqh 5s ease-in-out infinite; }
}

@keyframes weather-float-b-5jdrvttxqh {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -6px; }
}

.weather-temp[b-5jdrvttxqh] {
    display: flex;
    flex-direction: column;
}

.weather-degrees[b-5jdrvttxqh] {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--nx-text);
}

.weather-label[b-5jdrvttxqh] {
    margin-top: 4px;
    color: var(--nx-text-dim);
}

.weather-stats[b-5jdrvttxqh] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 16px;
    padding: 12px 0;
    border-top: 1px dashed var(--nx-border);
    border-bottom: 1px dashed var(--nx-border);
}

.weather-stats div[b-5jdrvttxqh] {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
}

.weather-stats dt[b-5jdrvttxqh] {
    font-size: 0.66rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nx-text-faint);
}

.weather-stats dd[b-5jdrvttxqh] {
    margin: 0;
    font-size: 1rem;
    color: var(--nx-text);
}

.weather-days[b-5jdrvttxqh] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.weather-days li[b-5jdrvttxqh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: 10px;
    border: 1px solid var(--nx-border);
    background: color-mix(in srgb, var(--nx-bg) 40%, transparent);
    text-align: center;
}

.weather-day-name[b-5jdrvttxqh] {
    font-size: 0.7rem;
    color: var(--nx-text-faint);
}

.weather-days .bi:not(.bi-droplet-fill)[b-5jdrvttxqh] {
    font-size: 1.5rem;
    color: var(--wx);
    text-shadow: 0 0 12px color-mix(in srgb, var(--wx) 45%, transparent);
}

.weather-day-temps[b-5jdrvttxqh] {
    font-size: 0.85rem;
    color: var(--nx-text-faint);
}

.weather-day-temps strong[b-5jdrvttxqh] { color: var(--nx-text); }

.weather-day-rain[b-5jdrvttxqh] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    color: var(--nx-cyan);
}

.weather-credit[b-5jdrvttxqh] {
    margin: 14px 0 0;
    text-align: right;
}

.weather-credit a[b-5jdrvttxqh] { color: var(--nx-text-dim); }

.weather-unavailable[b-5jdrvttxqh] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
}
/* /Components/Pages/Admin/CampgroundEditor.razor.rz.scp.css */
.cover-editor[b-luwg2xe3i0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cover-preview[b-luwg2xe3i0] {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--nx-border-strong);
    background: color-mix(in srgb, var(--nx-bg) 55%, transparent);
}

.cover-preview img[b-luwg2xe3i0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cover-source[b-luwg2xe3i0] {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(3, 5, 12, 0.75);
    color: #e6edf7;
    font-size: 0.7rem;
}

.cover-empty[b-luwg2xe3i0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    padding: 16px;
    text-align: center;
    color: var(--nx-text-faint);
    font-size: 0.85rem;
}

.cover-empty .bi[b-luwg2xe3i0] {
    font-size: 1.8rem;
    color: var(--nx-accent);
}

.cover-actions[b-luwg2xe3i0] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cover-busy[b-luwg2xe3i0] {
    pointer-events: none;
    opacity: 0.6;
}
/* /Components/Pages/Blog/BlogIndex.razor.rz.scp.css */
/* ---------- Hero ---------- */

.hero[b-9qhk9s2q3z] {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    padding: 56px 0 72px;
}

/* Particle field drawn by js/neonFx.js; bleeds a little past the hero and fades at the edges. */
.hero-canvas[b-9qhk9s2q3z] {
    position: absolute;
    inset: -24px -24px 0;
    width: calc(100% + 48px);
    height: calc(100% + 24px);
    z-index: -1;
    mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 40%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
    .hero-canvas[b-9qhk9s2q3z] { display: none; }
}

.hero-kicker[b-9qhk9s2q3z] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border: 1px solid var(--nx-border-strong);
    border-radius: 999px;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nx-text-dim);
    background: var(--nx-surface);
}

.hero-kickers[b-9qhk9s2q3z] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* "What's new" pill: the latest thing worth a click, in its own colors. */
.hero-new[b-9qhk9s2q3z] {
    --new: #ff3d8b;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px 5px 5px;
    border: 1px solid color-mix(in srgb, var(--new) 45%, transparent);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--nx-text-dim);
    background: color-mix(in srgb, var(--new) 8%, var(--nx-surface));
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

[data-theme="light"] .hero-new[b-9qhk9s2q3z] { --new: #d81b67; }

.hero-new-tag[b-9qhk9s2q3z] {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--new);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-new .bi[b-9qhk9s2q3z] { transition: transform 0.2s var(--nx-ease); }

.hero-new:hover[b-9qhk9s2q3z] {
    color: var(--nx-text);
    border-color: var(--new);
    box-shadow: 0 0 18px color-mix(in srgb, var(--new) 35%, transparent);
}

.hero-new:hover .bi[b-9qhk9s2q3z] { transform: translateX(4px); }

.hero-dot[b-9qhk9s2q3z] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nx-lime);
    box-shadow: 0 0 10px var(--nx-lime);
}

.hero-title[b-9qhk9s2q3z] {
    margin: 24px 0 18px;
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: var(--nx-text);
}

.hero-rotator-line[b-9qhk9s2q3z] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 10px;
    margin: 0 0 18px;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    color: var(--nx-text-dim);
}

.hero-prompt[b-9qhk9s2q3z] {
    color: var(--nx-accent);
    text-shadow: 0 0 10px var(--nx-accent);
}

.hero-rotator[b-9qhk9s2q3z] {
    display: inline-block;
    height: 1.5em;
    line-height: 1.5em;
    overflow: hidden;
    vertical-align: bottom;
    color: var(--nx-accent-2);
    font-weight: 600;
}

.hero-rotator-track[b-9qhk9s2q3z] {
    display: flex;
    flex-direction: column;
}

/* Four phrases plus a copy of the first, so the jump from the last frame back to 0 is seamless. */
@media (prefers-reduced-motion: no-preference) {
    .hero-rotator-track[b-9qhk9s2q3z] {
        animation: hero-rotate-b-9qhk9s2q3z 12s cubic-bezier(0.7, 0, 0.3, 1) infinite;
    }
}

@keyframes hero-rotate-b-9qhk9s2q3z {
    0%, 20% { transform: translateY(0); }
    25%, 45% { transform: translateY(-1.5em); }
    50%, 70% { transform: translateY(-3em); }
    75%, 95% { transform: translateY(-4.5em); }
    100% { transform: translateY(-6em); }
}

.hero-sub[b-9qhk9s2q3z] {
    max-width: 520px;
    margin: 0 0 28px;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--nx-text-dim);
}

.hero-actions[b-9qhk9s2q3z] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-stats[b-9qhk9s2q3z] {
    display: flex;
    gap: 36px;
    margin: 36px 0 0;
}

.hero-stats div[b-9qhk9s2q3z] {
    display: flex;
    flex-direction: column-reverse;
}

.hero-stats dt[b-9qhk9s2q3z] {
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nx-text-faint);
}

.hero-stats dd[b-9qhk9s2q3z] {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--nx-text);
}

/* ---------- Terminal card ---------- */

.hero-terminal[b-9qhk9s2q3z] {
    overflow: hidden;
    transform: perspective(1200px) rotateY(-8deg) rotateX(3deg);
    box-shadow: var(--nx-shadow), 0 0 80px color-mix(in srgb, var(--nx-accent) 16%, transparent);
    transition: transform 0.3s var(--nx-ease), box-shadow 0.4s;
}

/* Tilts toward the cursor while hovered (--rx/--ry from js/neonFx.js). */
.hero-terminal:hover[b-9qhk9s2q3z] {
    transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    box-shadow: var(--nx-shadow), 0 0 110px color-mix(in srgb, var(--nx-accent) 26%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
    .hero-terminal[b-9qhk9s2q3z] { animation: term-float-b-9qhk9s2q3z 7s ease-in-out infinite; }
    .hero-terminal:hover[b-9qhk9s2q3z] { animation-play-state: paused; }
}

/* Floats on the `translate` property so it composes with the tilt on `transform`. */
@keyframes term-float-b-9qhk9s2q3z {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}

/* Windows Terminal chrome: a tab strip with the window buttons on the right. */
.term-bar[b-9qhk9s2q3z] {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 40px;
    padding: 0 0 0 10px;
    border-bottom: 1px solid var(--nx-border);
    background: color-mix(in srgb, var(--nx-bg) 55%, transparent);
}

.term-tab[b-9qhk9s2q3z] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 10px 0 12px;
    border-radius: 8px 8px 0 0;
    background: var(--nx-surface-solid);
    border: 1px solid var(--nx-border);
    border-bottom: 0;
    font-size: 0.75rem;
    color: var(--nx-text);
}

.term-tab .bi-terminal-fill[b-9qhk9s2q3z] {
    color: #4cc2ff;
}

.term-tab .bi-x[b-9qhk9s2q3z] {
    margin-left: 14px;
    color: var(--nx-text-faint);
}

.term-newtab[b-9qhk9s2q3z] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 32px;
    padding: 0 8px;
    font-size: 0.8rem;
    color: var(--nx-text-faint);
}

.term-controls[b-9qhk9s2q3z] {
    display: flex;
    align-self: stretch;
    margin-left: auto;
}

.term-controls .bi[b-9qhk9s2q3z] {
    display: grid;
    place-items: center;
    width: 44px;
    font-size: 0.75rem;
    color: var(--nx-text-dim);
}

.term-controls .bi-square[b-9qhk9s2q3z] { font-size: 0.65rem; }

.hero-terminal:hover .term-controls .bi-x-lg[b-9qhk9s2q3z] {
    background: #c42b1c;
    color: #fff;
}

.term-body[b-9qhk9s2q3z] {
    padding: 18px 22px 22px;
    font-size: 0.85rem;
    line-height: 1.9;
    background: color-mix(in srgb, #0c0c0c 35%, transparent);
}

.term-ps[b-9qhk9s2q3z] { color: var(--nx-text); }
.term-cmd[b-9qhk9s2q3z] { color: #f9f1a5; }
.term-arg[b-9qhk9s2q3z] { color: var(--nx-text-dim); }
.term-out[b-9qhk9s2q3z] { color: var(--nx-accent); }

[data-theme="light"] .term-cmd[b-9qhk9s2q3z] { color: #9a6700; }

.term-grid[b-9qhk9s2q3z] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 16px;
    margin: 6px 0 8px;
}

.term-grid a[b-9qhk9s2q3z] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--nx-accent);
    text-decoration: none;
    border-radius: 6px;
    padding: 0 6px;
    margin-left: -6px;
    transition: background 0.15s, color 0.15s, text-shadow 0.15s;
}

.term-grid a:hover[b-9qhk9s2q3z] {
    color: var(--nx-text);
    background: color-mix(in srgb, var(--nx-accent) 14%, transparent);
    text-shadow: 0 0 10px var(--nx-accent);
}

.term-cursor[b-9qhk9s2q3z] {
    display: inline-block;
    width: 9px;
    height: 1.1em;
    vertical-align: text-bottom;
    background: var(--nx-accent);
    box-shadow: 0 0 8px var(--nx-accent);
    animation: term-blink-b-9qhk9s2q3z 1s step-end infinite;
}

@keyframes term-blink-b-9qhk9s2q3z {
    50% { opacity: 0; }
}

/* ---------- "Open for new projects" banner ---------- */

@property --hire-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.hire-banner[b-9qhk9s2q3z] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "status status"
        "text actions"
        "services actions";
    gap: 12px 32px;
    align-items: center;
    margin: 0 0 56px;
    padding: clamp(22px, 3.5vw, 34px);
    border-color: transparent;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--nx-lime) 12%, transparent), transparent 45%),
        radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--nx-cyan) 14%, transparent), transparent 50%),
        var(--nx-surface);
}

/* A light that travels around the border. */
.hire-banner[b-9qhk9s2q3z]::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--hire-angle), transparent 0deg, var(--nx-cyan) 60deg, var(--nx-lime) 110deg, transparent 170deg, transparent 360deg),
        var(--nx-border-strong);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .hire-banner[b-9qhk9s2q3z]::before { animation: hire-orbit-b-9qhk9s2q3z 6s linear infinite; }
}

@keyframes hire-orbit-b-9qhk9s2q3z {
    to { --hire-angle: 360deg; }
}

.hire-banner-status[b-9qhk9s2q3z] {
    grid-area: status;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--nx-lime);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hire-banner-dot[b-9qhk9s2q3z] {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nx-lime);
    box-shadow: 0 0 10px var(--nx-lime);
}

@media (prefers-reduced-motion: no-preference) {
    .hire-banner-dot[b-9qhk9s2q3z]::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 2px solid var(--nx-lime);
        animation: hire-ping-b-9qhk9s2q3z 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    }
}

@keyframes hire-ping-b-9qhk9s2q3z {
    from { opacity: 0.8; transform: scale(0.6); }
    to { opacity: 0; transform: scale(2.2); }
}

.hire-banner-text[b-9qhk9s2q3z] { grid-area: text; }

.hire-banner-text h2[b-9qhk9s2q3z] {
    margin: 0 0 6px;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.hire-banner-text p[b-9qhk9s2q3z] {
    max-width: 620px;
    margin: 0;
    color: var(--nx-text-dim);
    line-height: 1.6;
}

.hire-banner-services[b-9qhk9s2q3z] {
    grid-area: services;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hire-banner-services span[b-9qhk9s2q3z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--nx-border-strong);
    color: var(--nx-text-dim);
    font-size: 0.75rem;
}

.hire-banner-services .bi[b-9qhk9s2q3z] { color: var(--nx-accent); }

.hire-banner-actions[b-9qhk9s2q3z] {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (max-width: 800px) {
    .hire-banner[b-9qhk9s2q3z] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "status" "text" "services" "actions";
    }

    .hire-banner-actions[b-9qhk9s2q3z] { flex-direction: row; flex-wrap: wrap; }
}

/* ---------- Category header ---------- */

.category-header[b-9qhk9s2q3z] {
    padding: 32px 0 36px;
}

.category-back[b-9qhk9s2q3z] {
    display: inline-flex;
    gap: 6px;
    color: var(--nx-text-faint);
    font-size: 0.8rem;
    text-decoration: none;
}

.category-back:hover[b-9qhk9s2q3z] { color: var(--nx-accent); }

.category-title[b-9qhk9s2q3z] {
    margin: 14px 0 8px;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.category-hash[b-9qhk9s2q3z] {
    color: var(--cat);
    text-shadow: 0 0 18px var(--cat);
    margin-right: 6px;
}

.category-desc[b-9qhk9s2q3z] {
    max-width: 640px;
    color: var(--nx-text-dim);
    font-size: 1.05rem;
}

/* ---------- Layout ---------- */

.home-layout[b-9qhk9s2q3z] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    align-items: start;
    scroll-margin-top: calc(var(--nx-header-h) + 16px);
}

.section-title[b-9qhk9s2q3z] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nx-text-dim);
}

.section-title span[b-9qhk9s2q3z] { color: var(--nx-accent); }

.section-title[b-9qhk9s2q3z]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--nx-border-strong), transparent);
}

.post-grid[b-9qhk9s2q3z] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.home-rail[b-9qhk9s2q3z] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Sidebar cards rise in as they're scrolled to - same effect as .nx-scroll-reveal in neon.css,
   applied here because the cards belong to child components. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .home-rail[b-9qhk9s2q3z]  .nx-card {
            animation: nx-scroll-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 70%;
        }
    }
}

.home-loading[b-9qhk9s2q3z] {
    display: grid;
    place-items: center;
    padding: 80px 0;
}

.home-empty[b-9qhk9s2q3z] {
    text-align: center;
    color: var(--nx-text-dim);
}

.home-empty .bi[b-9qhk9s2q3z] {
    font-size: 2.4rem;
    color: var(--nx-accent);
}

.home-empty h3[b-9qhk9s2q3z] {
    margin: 10px 0 4px;
    color: var(--nx-text);
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
    .home-layout[b-9qhk9s2q3z] { grid-template-columns: minmax(0, 1fr); }
    .home-rail[b-9qhk9s2q3z] {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        align-items: start;
    }
}

@media (max-width: 900px) {
    .hero[b-9qhk9s2q3z] { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 32px 0 48px; }
    .hero-terminal[b-9qhk9s2q3z] { transform: none; }
}

@media (max-width: 640px) {
    .post-grid[b-9qhk9s2q3z] { grid-template-columns: minmax(0, 1fr); }
    .hero-stats[b-9qhk9s2q3z] { gap: 24px; }
    .hero-actions .nx-btn[b-9qhk9s2q3z] { flex: 1 1 auto; }
}
/* /Components/Pages/Blog/BlogPost.razor.rz.scp.css */
/* ---------- Hero ---------- */

.post-hero[b-b6b5e62sk0] {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    margin: 8px 0 28px;
    padding: 32px 0 8px;
}

.post-hero--image[b-b6b5e62sk0] {
    min-height: 440px;
    padding: 40px;
    border-radius: var(--nx-radius);
    overflow: hidden;
    border: 1px solid var(--nx-border);
    box-shadow: var(--nx-shadow), 0 0 80px color-mix(in srgb, var(--cat) 14%, transparent);
}

.post-hero-img[b-b6b5e62sk0] {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
    .post-hero-img[b-b6b5e62sk0] { animation: post-zoom-b-b6b5e62sk0 18s ease-out both; }
}

/* Slow Ken Burns push-in on the header image. */
@keyframes post-zoom-b-b6b5e62sk0 {
    from { transform: scale(1.12); }
    to { transform: scale(1); }
}

.post-hero--image[b-b6b5e62sk0]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(3, 5, 12, 0.1) 0%, rgba(3, 5, 12, 0.55) 50%, rgba(3, 5, 12, 0.95) 100%),
        linear-gradient(90deg, rgba(3, 5, 12, 0.55), transparent 75%);
}

.post-hero--image[b-b6b5e62sk0]::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cat), transparent);
    box-shadow: 0 0 16px var(--cat);
}

.post-hero-content[b-b6b5e62sk0] {
    max-width: 860px;
}

/* Over the image the overlay is dark in both themes, so keep text light there. */
.post-hero--image .post-hero-content[b-b6b5e62sk0] {
    --nx-text: #e6edf7;
    --nx-text-dim: #b8c4d6;
    --nx-text-faint: #8d9ab0;
}

.post-crumbs[b-b6b5e62sk0] {
    margin-bottom: 18px;
}

.post-hero-content[b-b6b5e62sk0]  .post-cat {
    margin-bottom: 14px;
}

.post-title[b-b6b5e62sk0] {
    margin: 0 0 18px;
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: var(--nx-text);
}

.post-hero--image .post-title[b-b6b5e62sk0] {
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

.post-meta[b-b6b5e62sk0] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 0.8rem;
    color: var(--nx-text-dim);
}

.post-meta span[b-b6b5e62sk0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.post-meta .bi[b-b6b5e62sk0] { color: var(--cat); }

.post-tags[b-b6b5e62sk0] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 14px;
}

/* ---------- Layout ---------- */

.post-layout[b-b6b5e62sk0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    align-items: start;
}

.post-main[b-b6b5e62sk0] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.post-main[b-b6b5e62sk0]  .post-body {
    padding: clamp(20px, 4vw, 44px);
}

.post-nav[b-b6b5e62sk0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.post-share[b-b6b5e62sk0] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.post-share .nx-overline[b-b6b5e62sk0] { margin-right: 6px; }

@media (max-width: 1100px) {
    .post-layout[b-b6b5e62sk0] { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .post-hero--image[b-b6b5e62sk0] { min-height: 340px; padding: 22px; }
}

/* ---------- Article typography (content is raw HTML from the editor) ---------- */

.blog-content[b-b6b5e62sk0] {
    font-size: 1.06rem;
    line-height: 1.8;
    color: var(--nx-text);
}

.blog-content[b-b6b5e62sk0]  h1,
.blog-content[b-b6b5e62sk0]  h2,
.blog-content[b-b6b5e62sk0]  h3,
.blog-content[b-b6b5e62sk0]  h4,
.blog-content[b-b6b5e62sk0]  h5,
.blog-content[b-b6b5e62sk0]  h6 {
    margin: 2.2rem 0 1rem;
    line-height: 1.25;
}

.blog-content[b-b6b5e62sk0]  h2 {
    font-size: 1.7rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--nx-border);
}

.blog-content[b-b6b5e62sk0]  h2::before {
    content: '## ';
    font-family: var(--nx-font-mono);
    font-size: 0.75em;
    color: var(--nx-accent);
}

.blog-content[b-b6b5e62sk0]  h3 { font-size: 1.35rem; }

.blog-content[b-b6b5e62sk0]  > :first-child { margin-top: 0; }

.blog-content[b-b6b5e62sk0]  p { margin-bottom: 1.1rem; }

.blog-content[b-b6b5e62sk0]  a {
    color: var(--nx-accent);
    text-underline-offset: 3px;
}

/* Leaflet tiles inside embedded maps are <img>s too; leave them alone. */
.blog-content[b-b6b5e62sk0]  img:not(.leaflet-container img) {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 1.2rem 0;
    border: 1px solid var(--nx-border);
}

.blog-content[b-b6b5e62sk0]  ul,
.blog-content[b-b6b5e62sk0]  ol {
    padding-left: 1.4rem;
    margin-bottom: 1.1rem;
}

.blog-content[b-b6b5e62sk0]  li { margin-bottom: 0.35rem; }
.blog-content[b-b6b5e62sk0]  li::marker { color: var(--nx-accent); }

.blog-content[b-b6b5e62sk0]  blockquote {
    margin: 1.4rem 0;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--nx-accent);
    border-radius: 0 10px 10px 0;
    background: color-mix(in srgb, var(--nx-accent) 7%, transparent);
    color: var(--nx-text-dim);
    font-style: italic;
}

.blog-content[b-b6b5e62sk0]  pre {
    position: relative;
    margin: 1.4rem 0;
    padding: 1.1rem 1.2rem;
    border-radius: 10px;
    border: 1px solid var(--nx-border-strong);
    background: color-mix(in srgb, #02040a 75%, transparent);
    overflow-x: auto;
    font-size: 0.88rem;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.3);
}

.blog-content[b-b6b5e62sk0]  code {
    font-family: var(--nx-font-mono);
    font-size: 0.9em;
}

.blog-content[b-b6b5e62sk0]  :not(pre) > code {
    padding: 0.15rem 0.4rem;
    border-radius: 5px;
    background: color-mix(in srgb, var(--nx-accent) 10%, transparent);
    color: var(--nx-accent);
}

.blog-content[b-b6b5e62sk0]  table {
    width: 100%;
    margin: 1.4rem 0;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.blog-content[b-b6b5e62sk0]  th,
.blog-content[b-b6b5e62sk0]  td {
    padding: 8px 12px;
    border: 1px solid var(--nx-border);
}

.blog-content[b-b6b5e62sk0]  th {
    background: color-mix(in srgb, var(--nx-accent) 8%, transparent);
    text-align: left;
}

.blog-content[b-b6b5e62sk0]  hr {
    margin: 2rem 0;
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--nx-border-strong), transparent);
    opacity: 1;
}
/* /Components/Pages/Blog/BlogSearch.razor.rz.scp.css */
.search-layout[b-q93yqfxs7w] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    align-items: start;
}

.search-main[b-q93yqfxs7w] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.search-row[b-q93yqfxs7w] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-row[b-q93yqfxs7w]  .search-field {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.search-count[b-q93yqfxs7w] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--nx-text-dim);
}

.search-count strong[b-q93yqfxs7w] {
    color: var(--nx-accent);
    text-shadow: 0 0 10px color-mix(in srgb, var(--nx-accent) 45%, transparent);
}

.search-prompt[b-q93yqfxs7w] {
    color: var(--nx-accent);
    margin-right: 4px;
}

.search-grid[b-q93yqfxs7w] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.search-main[b-q93yqfxs7w]  .search-pager {
    margin-top: 4px;
}

.search-rail[b-q93yqfxs7w] {
    min-width: 0;
}

@media (max-width: 1100px) {
    .search-layout[b-q93yqfxs7w] { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .search-grid[b-q93yqfxs7w] { grid-template-columns: minmax(0, 1fr); }
    .search-row[b-q93yqfxs7w] { flex-wrap: wrap; }
    .search-row[b-q93yqfxs7w]  .search-field { flex-basis: 100%; }
}
/* /Components/Pages/ColoringBook/ColoringBookStudio.razor.rz.scp.css */
/* ---------- Intro ---------- */

.cb-perks[b-a25v5jk6q1] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -8px 0 28px;
}

/* ---------- Generator ---------- */

.cb-page[b-a25v5jk6q1]  .cb-generate {
    margin-bottom: 28px;
    border-color: var(--nx-border-strong);
    box-shadow: var(--nx-shadow), 0 0 60px color-mix(in srgb, var(--nx-accent) 10%, transparent);
}

.cb-page[b-a25v5jk6q1]  .cb-generate::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 24px;
    right: 24px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--nx-cyan), var(--nx-green), transparent);
    box-shadow: 0 0 12px var(--nx-accent);
    opacity: 0.8;
}

@media (prefers-reduced-motion: no-preference) {
    .cb-page[b-a25v5jk6q1]  .cb-generate::before {
        background-size: 200% 100%;
        animation: cb-sweep-b-a25v5jk6q1 6s linear infinite;
    }
}

@keyframes cb-sweep-b-a25v5jk6q1 {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

.cb-generate-row[b-a25v5jk6q1] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
}

.cb-generate-input[b-a25v5jk6q1] {
    flex: 1 1 320px;
    min-width: 0;
}

/* ---------- Paper: line art always sits on white, whatever the theme ---------- */

.cb-paper[b-a25v5jk6q1] {
    position: relative;
    display: block;
    overflow: hidden;
    background: #fff;
}

.cb-paper img[b-a25v5jk6q1] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---------- Your new page / page of the day ---------- */

.cb-page[b-a25v5jk6q1]  .cb-spotlight {
    margin-bottom: 28px;
}

.cb-page[b-a25v5jk6q1]  .cb-result-card {
    border-color: color-mix(in srgb, var(--nx-green) 50%, transparent);
    box-shadow: var(--nx-shadow), 0 0 70px color-mix(in srgb, var(--nx-green) 16%, transparent);
    scroll-margin-top: calc(var(--nx-header-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
    .cb-page[b-a25v5jk6q1]  .cb-result-card { animation: cb-pop-b-a25v5jk6q1 0.6s var(--nx-ease) both; }
}

@keyframes cb-pop-b-a25v5jk6q1 {
    from { opacity: 0; scale: 0.97; translate: 0 12px; }
    to { opacity: 1; scale: none; translate: none; }
}

.cb-page[b-a25v5jk6q1]  .cb-featured-card {
    border-color: color-mix(in srgb, var(--nx-amber) 45%, transparent);
    box-shadow: var(--nx-shadow), 0 0 70px color-mix(in srgb, var(--nx-amber) 12%, transparent);
}

.cb-featured-main[b-a25v5jk6q1] {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.cb-featured-preview[b-a25v5jk6q1],
.cb-result-preview[b-a25v5jk6q1] {
    flex-shrink: 0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    /* Tiny rotation, like a sheet of paper dropped on the desk. */
    rotate: -1.5deg;
    transition: rotate 0.4s var(--nx-ease), scale 0.4s var(--nx-ease);
}

.cb-featured-main:hover .cb-featured-preview[b-a25v5jk6q1],
.cb-featured-main:hover .cb-result-preview[b-a25v5jk6q1] {
    rotate: 0deg;
    scale: 1.02;
}

.cb-featured-preview[b-a25v5jk6q1] { width: 260px; height: 260px; }
.cb-result-preview[b-a25v5jk6q1] { width: 220px; height: 220px; }

.cb-featured-body[b-a25v5jk6q1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.cb-featured-body[b-a25v5jk6q1]  .cb-featured-chip {
    align-self: flex-start;
}

.cb-page .cb-featured-title[b-a25v5jk6q1] {
    margin: 4px 0 0;
    font-size: clamp(1.2rem, 2.4vw, 1.7rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.cb-featured-desc[b-a25v5jk6q1] {
    margin: 0;
}

.cb-featured-actions[b-a25v5jk6q1] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

/* ---------- Gallery header + filters ---------- */

.cb-section-row[b-a25v5jk6q1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 40px 0 16px;
}

.cb-section-title[b-a25v5jk6q1] {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nx-text-dim);
}

.cb-section-title span[b-a25v5jk6q1] {
    color: var(--nx-accent);
    text-shadow: 0 0 10px var(--nx-accent);
}

.cb-section-title[b-a25v5jk6q1]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--nx-border-strong), transparent);
}

.cb-page[b-a25v5jk6q1]  .cb-filters {
    margin-bottom: 20px;
}

.cb-filter-row[b-a25v5jk6q1] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
}

.cb-search-input[b-a25v5jk6q1] {
    flex: 1 1 320px;
    min-width: 0;
}

.cb-sort-input[b-a25v5jk6q1] {
    flex: 0 0 220px;
}

/* ---------- Gallery tiles ---------- */

/* Uniform card heights so the grid doesn't ladder when prompts wrap to different line counts. */
.cb-page[b-a25v5jk6q1]  .cb-gallery-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cb-preview[b-a25v5jk6q1] {
    height: 220px;
    padding: 10px;
    border-radius: calc(var(--nx-radius) - 1px) calc(var(--nx-radius) - 1px) 0 0;
    text-decoration: none;
}

.cb-preview img[b-a25v5jk6q1] {
    transition: scale 0.5s var(--nx-ease);
}

.cb-preview[b-a25v5jk6q1]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(3, 5, 12, 0.7));
    opacity: 0;
    transition: opacity 0.35s;
}

.cb-preview-cta[b-a25v5jk6q1] {
    position: absolute;
    left: 14px;
    bottom: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e6edf7;
    opacity: 0;
    translate: 0 6px;
    transition: opacity 0.3s, translate 0.3s var(--nx-ease);
}

.cb-preview-cta .bi[b-a25v5jk6q1] { color: var(--nx-cyan); }

.cb-page[b-a25v5jk6q1]  .cb-gallery-card:hover .cb-preview img,
.cb-preview:focus-visible img[b-a25v5jk6q1] {
    scale: 1.05;
}

.cb-page[b-a25v5jk6q1]  .cb-gallery-card:hover .cb-preview::after,
.cb-preview:focus-visible[b-a25v5jk6q1]::after,
.cb-page[b-a25v5jk6q1]  .cb-gallery-card:hover .cb-preview-cta,
.cb-preview:focus-visible .cb-preview-cta[b-a25v5jk6q1] {
    opacity: 1;
    translate: none;
}

@media (prefers-reduced-motion: reduce) {
    .cb-preview img[b-a25v5jk6q1],
    .cb-preview-cta[b-a25v5jk6q1],
    .cb-featured-preview[b-a25v5jk6q1],
    .cb-result-preview[b-a25v5jk6q1] { transition: none; }
}

.cb-gallery-content[b-a25v5jk6q1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
    padding: 14px 16px 6px;
}

.cb-gallery-prompt[b-a25v5jk6q1] {
    display: -webkit-box;
    margin: 0;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
    line-height: 1.35;
    color: var(--nx-text);
}

.cb-gallery-meta[b-a25v5jk6q1] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cb-featured-star[b-a25v5jk6q1] {
    color: var(--nx-amber);
    text-shadow: 0 0 8px var(--nx-amber);
}

.cb-gallery-stats[b-a25v5jk6q1] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.cb-stat[b-a25v5jk6q1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--nx-text-dim);
    white-space: nowrap;
}

.cb-stat-heart[b-a25v5jk6q1] { color: var(--nx-red); }

.cb-card-actions[b-a25v5jk6q1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px 10px 12px;
    border-top: 1px solid var(--nx-border);
}

@media (prefers-reduced-motion: no-preference) {
    .cb-card-actions[b-a25v5jk6q1]  .cb-like--on .bi { animation: cb-heart-b-a25v5jk6q1 0.45s var(--nx-ease); }
}

@keyframes cb-heart-b-a25v5jk6q1 {
    0% { scale: 1; }
    40% { scale: 1.35; }
    100% { scale: 1; }
}

/* ---------- My pages ---------- */

.cb-own[b-a25v5jk6q1] {
    margin: 12px 0 32px;
}

.cb-own > summary .bi[b-a25v5jk6q1] {
    margin-right: 6px;
    color: var(--nx-accent);
}

/* ---------- Phones ---------- */

@media (max-width: 600px) {
    .cb-generate-row[b-a25v5jk6q1] { flex-direction: column; align-items: stretch; }
    .cb-generate-row[b-a25v5jk6q1]  .cb-generate-button { width: 100%; }
    .cb-generate-input[b-a25v5jk6q1] { flex-basis: auto; }
    .cb-sort-input[b-a25v5jk6q1], .cb-search-input[b-a25v5jk6q1] { flex: 1 1 100%; }

    /* Shrink the page-of-the-day card to a thumbnail strip: on a phone its full-size version pushed
       everything below it - including a page the visitor had just generated - off the screen. */
    .cb-featured-main[b-a25v5jk6q1] { gap: 12px; }
    .cb-featured-preview[b-a25v5jk6q1] { width: 110px; height: 110px; }
    .cb-featured-desc[b-a25v5jk6q1] { display: none; }
    /* Kept larger than the page-of-the-day thumbnail - this is the page the visitor just asked for, so
       it should be big enough to actually look at without opening it. */
    .cb-result-preview[b-a25v5jk6q1] { width: 150px; height: 150px; }
    .cb-featured-actions .cb-btn-label[b-a25v5jk6q1] { display: none; }
    .cb-featured-actions[b-a25v5jk6q1]  .nx-btn { padding: 0 14px; }
}
/* /Components/Pages/ColoringBook/ColoringCanvas.razor.rz.scp.css */
.cb-page[b-5gsoionz8h] {
    max-width: 960px;
    margin: 0 auto;
}

.cb-page[b-5gsoionz8h]  .cb-header {
    padding-bottom: 20px;
}

/* ---------- Canvas ---------- */

/* The frame is decoration only - the drawing surface inside it stays plain white. */
.cb-canvas-frame[b-5gsoionz8h] {
    position: relative;
    padding-bottom: 8px;
}

/* The host sizes itself to fit the viewport (aspect ratio set from JS once the page loads), so the
   whole picture is visible without page-scrolling over the canvas - which is what caused accidental
   strokes. Fine detail is reached by zooming (buttons, wheel, or pinch) instead. */
.cb-canvas-host[b-5gsoionz8h] {
    position: relative;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--nx-border-strong);
    border-radius: 10px;
    touch-action: none;
    overflow: hidden;
    cursor: crosshair;
    aspect-ratio: var(--cb-ar, 0.78);
    width: min(100%, calc(72vh * var(--cb-ar, 0.78)));
    width: min(100%, calc(72dvh * var(--cb-ar, 0.78)));
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.4),
        0 0 0 4px color-mix(in srgb, var(--nx-accent) 10%, transparent),
        0 0 60px color-mix(in srgb, var(--nx-accent) 16%, transparent);
    transition: box-shadow 0.4s;
}

[data-theme="light"] .cb-canvas-host[b-5gsoionz8h] {
    box-shadow:
        0 18px 44px rgba(20, 30, 60, 0.16),
        0 0 0 4px color-mix(in srgb, var(--nx-accent) 10%, transparent);
}

/* While the AI paints, the sheet's edge pulses with the site's gradient glow. */
@media (prefers-reduced-motion: no-preference) {
    .cb-canvas-frame--ai .cb-canvas-host[b-5gsoionz8h] { animation: cb-ai-glow-b-5gsoionz8h 1.6s ease-in-out infinite; }
}

.cb-canvas-frame--ai .cb-canvas-host[b-5gsoionz8h] {
    border-color: var(--nx-accent);
}

@keyframes cb-ai-glow-b-5gsoionz8h {
    0%, 100% {
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 0 0 4px color-mix(in srgb, var(--nx-cyan) 25%, transparent), 0 0 40px color-mix(in srgb, var(--nx-cyan) 25%, transparent);
    }
    50% {
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 0 0 6px color-mix(in srgb, var(--nx-green) 30%, transparent), 0 0 90px color-mix(in srgb, var(--nx-green) 35%, transparent);
    }
}

.cb-zoom-layer[b-5gsoionz8h] { display: grid; transform-origin: 0 0; }
.cb-zoom-layer canvas[b-5gsoionz8h] { grid-area: 1 / 1; width: 100%; height: auto; display: block; }
.cb-layer-color[b-5gsoionz8h] { z-index: 1; }
.cb-layer-lines[b-5gsoionz8h] { z-index: 2; pointer-events: none; }

.cb-zoom-controls[b-5gsoionz8h] { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }

/* Sits on the white sheet in both themes, so it keeps a light chip look with a neon hover. */
.cb-zoom-controls[b-5gsoionz8h]  .cb-zoom-btn {
    color: #1b2333;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(30, 50, 90, 0.18);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.cb-zoom-controls[b-5gsoionz8h]  .cb-zoom-btn:hover {
    color: #0891b2;
    border-color: #22d3ee;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.25), 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ---------- Toolbar panel ---------- */

.cb-page[b-5gsoionz8h]  .cb-panel {
    margin-bottom: 20px;
}

.cb-toolbar[b-5gsoionz8h] { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.cb-group[b-5gsoionz8h] { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cb-group-grow[b-5gsoionz8h] { flex: 1 1 220px; }

.cb-group-label[b-5gsoionz8h] {
    font-family: var(--nx-font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nx-text-faint);
}

.cb-tool-row[b-5gsoionz8h] { display: flex; flex-wrap: wrap; gap: 6px; }

.cb-tool[b-5gsoionz8h] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 12px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid var(--nx-border-strong);
    background: var(--nx-surface);
    color: var(--nx-text-dim);
    font: inherit;
    font-size: 0.82rem;
    line-height: 1;
    transition: background .15s, border-color .15s, color .15s, box-shadow .2s, transform .15s;
}

.cb-tool .bi[b-5gsoionz8h] { font-size: 1.05rem; }

.cb-tool:hover[b-5gsoionz8h] {
    border-color: var(--nx-accent);
    color: var(--nx-text);
    box-shadow: var(--nx-glow-soft);
}

.cb-tool:active[b-5gsoionz8h] { transform: scale(0.96); }
.cb-tool:focus-visible[b-5gsoionz8h] { outline: 2px solid var(--nx-accent); outline-offset: 2px; }

.cb-tool-active[b-5gsoionz8h],
.cb-tool-active:hover[b-5gsoionz8h] {
    border-color: transparent;
    color: var(--nx-on-accent);
    background: linear-gradient(135deg, var(--nx-cyan), var(--nx-green));
    box-shadow: 0 0 18px color-mix(in srgb, var(--nx-accent) 40%, transparent);
}

.cb-tool-icon[b-5gsoionz8h] { padding: 7px 10px; }

.cb-color-row[b-5gsoionz8h] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.cb-current[b-5gsoionz8h] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex: none;
    border: 2px solid var(--nx-border-strong);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 0 16px color-mix(in srgb, var(--cb-current, transparent) 55%, transparent);
    transition: box-shadow 0.3s;
}

.cb-swatches[b-5gsoionz8h] { display: grid; grid-template-columns: repeat(5, 22px); gap: 6px; flex: none; }

.cb-swatch[b-5gsoionz8h] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    border: 2px solid transparent;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
    transition: transform .12s, box-shadow .2s;
}

.cb-swatch:hover[b-5gsoionz8h] { transform: scale(1.15); }
.cb-swatch:focus-visible[b-5gsoionz8h] { outline: 2px solid var(--nx-accent); outline-offset: 2px; }

.cb-swatch-on[b-5gsoionz8h] {
    border-color: var(--nx-bg);
    transform: scale(1.15);
    box-shadow: 0 0 0 2px var(--nx-accent), 0 0 12px var(--nx-accent);
}

.cb-custom[b-5gsoionz8h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    border: 1px dashed var(--nx-border-strong);
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    color: var(--nx-text-dim);
    transition: border-color .15s, color .15s;
}

.cb-custom:hover[b-5gsoionz8h],
.cb-custom:focus-within[b-5gsoionz8h] { border-color: var(--nx-accent); color: var(--nx-accent); }
.cb-custom input[b-5gsoionz8h] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.cb-size-row[b-5gsoionz8h] { display: flex; align-items: center; gap: 12px; }

/* Fixed box for the preview dot so dragging the slider doesn't shove it sideways. */
.cb-size-preview[b-5gsoionz8h] {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex: none;
}

.cb-size-dot[b-5gsoionz8h] { border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }

.cb-size-slider[b-5gsoionz8h] { width: 140px; }

.cb-stencil-group[b-5gsoionz8h] { margin-top: 14px; }

.cb-divider[b-5gsoionz8h] { margin: 16px 0; }

.cb-actions[b-5gsoionz8h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* ---------- Touch layout ---------- */

@media (max-width: 900px), (pointer: coarse) {
    /* Touch layout (phones, and tablets like the Fire): the toolbar becomes a floating card pinned to
       the bottom of the screen - always within thumb reach, never pushing the picture down - and the
       canvas takes all the room between the header and the toolbar. Fingers get a big target and
       nothing needs scrolling, which is what used to paint stray lines. */
    .cb-page[b-5gsoionz8h]  .cb-panel {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: 8px;
        margin: 0 auto;
        max-width: 720px;
        z-index: 1250;
        border-radius: 16px;
        padding: 10px;
        background: color-mix(in srgb, var(--nx-surface-solid) 92%, transparent);
        border-color: var(--nx-border-strong);
        box-shadow: 0 -2px 24px rgba(0, 0, 0, .35), 0 0 30px color-mix(in srgb, var(--nx-accent) 12%, transparent);
        max-height: 45vh;
        max-height: 45dvh;
        overflow-y: auto;
    }

    .cb-toolbar[b-5gsoionz8h] { gap: 8px; }
    .cb-group[b-5gsoionz8h], .cb-group-grow[b-5gsoionz8h] { flex: 1 1 100%; }
    .cb-group-label[b-5gsoionz8h] { display: none; }
    .cb-tool-text[b-5gsoionz8h] { display: none; }
    .cb-tool[b-5gsoionz8h] { padding: 8px 12px; }
    .cb-color-row[b-5gsoionz8h] { gap: 6px; flex-wrap: nowrap; }
    .cb-current[b-5gsoionz8h] { width: 30px; height: 30px; }
    .cb-custom[b-5gsoionz8h] { width: 30px; height: 30px; }
    .cb-swatches[b-5gsoionz8h] { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 2px; }
    .cb-swatch[b-5gsoionz8h] { width: 26px; height: 26px; flex: none; }
    .cb-size-preview[b-5gsoionz8h] { width: 36px; height: 36px; }
    .cb-size-dot[b-5gsoionz8h] { max-width: 36px; max-height: 36px; }
    .cb-size-slider[b-5gsoionz8h] { flex: 1 1 auto; width: auto; }
    .cb-stencil-group[b-5gsoionz8h] { margin-top: 8px; }
    .cb-divider[b-5gsoionz8h] { margin: 8px 0; }
    .cb-btn-text[b-5gsoionz8h] { display: none; }

    .cb-page[b-5gsoionz8h]  .cb-header {
        flex-wrap: nowrap;
        align-items: center;
        padding: 0 0 8px;
        gap: 8px;
    }
    .cb-page[b-5gsoionz8h]  .cb-header .nx-page-kicker,
    .cb-page[b-5gsoionz8h]  .cb-header .nx-page-subtitle { display: none; }
    .cb-page[b-5gsoionz8h]  .cb-header .nx-page-title { font-size: 1.25rem; }

    /* Fill the space between header (~110px with the app bar) and the floating toolbar (~190px). */
    .cb-canvas-host[b-5gsoionz8h] {
        width: min(100%, calc((100vh - 300px) * var(--cb-ar, 0.78)));
        width: min(100%, calc((100dvh - 300px) * var(--cb-ar, 0.78)));
    }
}

@media (max-width: 600px) {
    /* On phones the toolbar's rows wrap and the card runs taller - budget more room so the canvas
       bottom never hides behind it. */
    .cb-canvas-host[b-5gsoionz8h] {
        width: min(100%, calc((100vh - 400px) * var(--cb-ar, 0.78)));
        width: min(100%, calc((100dvh - 400px) * var(--cb-ar, 0.78)));
    }
}
/* /Components/Pages/Contact.razor.rz.scp.css */
.contact-page[b-b9hu3tqpnd] {
    padding-bottom: 48px;
}

.contact-page[b-b9hu3tqpnd]  .contact-card {
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--nx-accent) 12%, transparent), transparent 50%),
        var(--nx-surface);
}

/* ---------- Echo terminal ---------- */

.contact-term[b-b9hu3tqpnd] {
    overflow: hidden;
    box-shadow: var(--nx-shadow), 0 0 60px color-mix(in srgb, var(--nx-accent) 14%, transparent);
}

.contact-term[b-b9hu3tqpnd]::after { display: none; }

@media (min-width: 992px) {
    .contact-term[b-b9hu3tqpnd] {
        position: sticky;
        top: calc(var(--nx-header-h, 64px) + 24px);
    }
}

.contact-term-bar[b-b9hu3tqpnd] {
    display: flex;
    align-items: flex-end;
    height: 38px;
    padding: 0 0 0 10px;
    border-bottom: 1px solid var(--nx-border);
    background: color-mix(in srgb, var(--nx-bg) 55%, transparent);
}

.contact-term-tab[b-b9hu3tqpnd] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 14px 0 12px;
    border: 1px solid var(--nx-border);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: var(--nx-surface-solid);
    font-size: 0.75rem;
    color: var(--nx-text);
}

.contact-term-tab .bi[b-b9hu3tqpnd] { color: #4cc2ff; }

.contact-term-body[b-b9hu3tqpnd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 18px 20px;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--nx-text-dim);
    overflow-wrap: anywhere;
}

.ct-ps[b-b9hu3tqpnd] { color: var(--nx-green); }
.ct-cmd[b-b9hu3tqpnd] { color: var(--nx-amber); }
.ct-tick[b-b9hu3tqpnd] { color: var(--nx-text-faint); }

.ct-arg[b-b9hu3tqpnd] {
    display: grid;
    grid-template-columns: 9ch minmax(0, 1fr);
    gap: 8px;
    padding-left: 2ch;
}

.ct-flag[b-b9hu3tqpnd] { color: var(--nx-text-faint); }
.ct-str[b-b9hu3tqpnd] { color: var(--nx-cyan); }
.ct-placeholder[b-b9hu3tqpnd] { color: var(--nx-text-faint); font-style: italic; opacity: 0.7; }

.ct-status[b-b9hu3tqpnd] {
    margin-top: 10px;
}

.ct-ok[b-b9hu3tqpnd] { color: var(--nx-lime); }
.ct-warn[b-b9hu3tqpnd] { color: var(--nx-amber); }
.ct-faint[b-b9hu3tqpnd] { color: var(--nx-text-faint); }

.ct-cursor[b-b9hu3tqpnd] {
    display: inline-block;
    width: 8px;
    height: 1.1em;
    margin-left: 6px;
    vertical-align: text-bottom;
    background: var(--nx-accent);
    box-shadow: 0 0 8px var(--nx-accent);
}

@media (prefers-reduced-motion: no-preference) {
    .ct-cursor[b-b9hu3tqpnd] { animation: ct-blink-b-b9hu3tqpnd 1s step-end infinite; }
    .ct-str[b-b9hu3tqpnd] { animation: ct-type-b-b9hu3tqpnd 0.3s ease both; }
}

@keyframes ct-blink-b-b9hu3tqpnd {
    50% { opacity: 0; }
}

@keyframes ct-type-b-b9hu3tqpnd {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---------- Notes under the terminal ---------- */

/* Honeypot field: kept in the DOM for bots, moved out of sight for people. */
.contact-hp[b-b9hu3tqpnd] {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- General / project mode toggle and project picks ---------- */

.contact-mode[b-b9hu3tqpnd] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.contact-picks[b-b9hu3tqpnd] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 18px;
    padding: 16px;
    border-radius: 12px;
    border: 1px dashed color-mix(in srgb, var(--nx-lime) 40%, transparent);
    background: color-mix(in srgb, var(--nx-lime) 5%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
    .contact-picks[b-b9hu3tqpnd] { animation: contact-picks-in-b-b9hu3tqpnd 0.35s var(--nx-ease); }
}

@keyframes contact-picks-in-b-b9hu3tqpnd {
    from { opacity: 0; translate: 0 -6px; }
}

.contact-pick[b-b9hu3tqpnd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-pick-chips[b-b9hu3tqpnd] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.contact-notes a[b-b9hu3tqpnd] {
    color: var(--nx-accent);
}

.contact-notes[b-b9hu3tqpnd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0 0;
    padding: 0 4px;
    list-style: none;
    font-size: 0.9rem;
    color: var(--nx-text-dim);
}

.contact-notes li[b-b9hu3tqpnd] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.contact-notes .bi[b-b9hu3tqpnd] {
    flex: none;
    margin-top: 2px;
    color: var(--nx-accent);
}
/* /Components/Pages/Examples/AIFortuneCookieExample.razor.rz.scp.css */
/* AI Fortune Cookie — scoped styles */

.fortune-shell[b-c3jwf0qxqx] {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: var(--nx-radius);
    border: 1px solid var(--nx-border);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow);
}

/* ---------- Header ---------- */

.fortune-header[b-c3jwf0qxqx] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--nx-radius) var(--nx-radius) 0 0;
    border-bottom: 1px solid var(--nx-border);
    background:
        radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--nx-amber) 16%, transparent), transparent 60%),
        linear-gradient(135deg, color-mix(in srgb, var(--nx-cyan) 12%, transparent), color-mix(in srgb, var(--nx-green) 8%, transparent));
}

/* Neon underline sweeping across the header. */
.fortune-header[b-c3jwf0qxqx]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--nx-amber), var(--nx-accent), transparent);
    opacity: .8;
}

.fortune-header-left[b-c3jwf0qxqx] {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.fortune-avatar[b-c3jwf0qxqx] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: color-mix(in srgb, var(--nx-amber) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--nx-amber) 45%, transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--nx-amber) 35%, transparent);
}

.fortune-header-title[b-c3jwf0qxqx] {
    font-family: var(--nx-font-mono);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .04em;
    line-height: 1.2;
    color: var(--nx-text);
}

.fortune-header-status[b-c3jwf0qxqx] {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    color: var(--nx-text-dim);
}

.fortune-status-dot[b-c3jwf0qxqx] {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--nx-lime);
    box-shadow: 0 0 8px var(--nx-lime);
}

.fortune-stats-badges[b-c3jwf0qxqx] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.fortune-stat-chip[b-c3jwf0qxqx] {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--nx-font-mono);
    font-size: .78rem;
    font-weight: 600;
    color: var(--nx-accent);
    background: color-mix(in srgb, var(--nx-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--nx-accent) 35%, transparent);
    border-radius: 999px;
    padding: .3rem .75rem;
    white-space: nowrap;
}

.fortune-stat-chip.streak[b-c3jwf0qxqx] {
    color: var(--nx-amber);
    background: color-mix(in srgb, var(--nx-amber) 12%, transparent);
    border-color: color-mix(in srgb, var(--nx-amber) 40%, transparent);
}

/* ---------- Body ---------- */

.fortune-body[b-c3jwf0qxqx] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem 1.25rem 1.75rem;
}

.fortune-stage[b-c3jwf0qxqx] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 280px;
    justify-content: center;
    padding: 1rem 0 1.5rem;
    border-bottom: 1px solid var(--nx-border);
}

.fortune-idle-caption[b-c3jwf0qxqx] {
    margin: 1rem 0 0;
    max-width: 360px;
    font-size: .9rem;
}

.fortune-stage[b-c3jwf0qxqx]  .fortune-error {
    max-width: 420px;
    width: 100%;
    text-align: left;
}

/* ---------- Cookie ---------- */

.cookie-scene[b-c3jwf0qxqx] {
    position: relative;
    width: 190px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    border-radius: 24px;
    transition: opacity .3s ease, transform .35s ease, height .35s ease, margin .35s ease, gap .35s ease;
}

.cookie-scene:focus-visible[b-c3jwf0qxqx] {
    outline: 2px solid var(--nx-accent);
    outline-offset: 8px;
}

.cookie-scene.is-busy[b-c3jwf0qxqx] {
    cursor: default;
}

.cookie-scene.is-revealed[b-c3jwf0qxqx] {
    height: 0;
    gap: 0;
    margin: 0;
    opacity: 0;
    transform: scale(.4);
    overflow: hidden;
    pointer-events: none;
}

/* Warm glow pooled behind the cookie. */
.cookie-aura[b-c3jwf0qxqx] {
    position: absolute;
    top: 70px;
    left: 50%;
    width: 220px;
    height: 220px;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--nx-amber) 34%, transparent) 0%, color-mix(in srgb, var(--nx-accent) 12%, transparent) 45%, transparent 70%);
    filter: blur(6px);
    pointer-events: none;
    z-index: 0;
}

.cookie-scene:not(.is-busy):hover .cookie-aura[b-c3jwf0qxqx] {
    background: radial-gradient(circle, color-mix(in srgb, var(--nx-amber) 46%, transparent) 0%, color-mix(in srgb, var(--nx-accent) 18%, transparent) 45%, transparent 70%);
}

.cookie-twinkle[b-c3jwf0qxqx] {
    position: absolute;
    z-index: 2;
    color: var(--nx-amber);
    text-shadow: 0 0 10px var(--nx-amber);
    pointer-events: none;
    opacity: .7;
}

.cookie-twinkle.t1[b-c3jwf0qxqx] { top: 6px; left: 6px; font-size: .9rem; }
.cookie-twinkle.t2[b-c3jwf0qxqx] { top: 22px; right: 0; font-size: 1.15rem; color: var(--nx-accent); text-shadow: 0 0 10px var(--nx-accent); }
.cookie-twinkle.t3[b-c3jwf0qxqx] { top: 112px; left: 14px; font-size: .7rem; }

.cookie-shape[b-c3jwf0qxqx] {
    position: relative;
    z-index: 1;
    width: 190px;
    height: 140px;
    flex: 0 0 auto;
    transition: transform .15s ease;
}

.cookie-scene:not(.is-busy):hover .cookie-shape[b-c3jwf0qxqx] {
    transform: scale(1.04);
}

@keyframes cookie-idle-b-c3jwf0qxqx {
    0%, 100% { rotate: 0deg; }
    50% { rotate: -3deg; }
}

.cookie-half[b-c3jwf0qxqx] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 128px;
    height: 128px;
    background: radial-gradient(circle at 30% 28%, #f3d19c 0%, #dba85c 55%, #b8813d 100%);
    border-radius: 48% 52% 46% 54% / 60% 58% 42% 40%;
    box-shadow: inset -8px -8px 16px rgba(0, 0, 0, 0.18), inset 4px 4px 10px rgba(255, 255, 255, 0.25), 0 10px 22px rgba(0, 0, 0, 0.3), 0 0 28px rgba(251, 191, 36, 0.25);
    transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .45s ease .05s;
}

.cookie-half.left[b-c3jwf0qxqx] {
    transform: translate(-50%, -50%) rotate(-16deg);
    clip-path: polygon(0 0, 52% 0, 52% 100%, 0 100%);
}

.cookie-half.right[b-c3jwf0qxqx] {
    transform: translate(-50%, -50%) rotate(16deg);
    clip-path: polygon(48% 0, 100% 0, 100% 100%, 48% 100%);
}

.cookie-shape.is-cracking .cookie-half.left[b-c3jwf0qxqx] {
    transform: translate(-50%, -50%) translate(-64px, -18px) rotate(-75deg);
    opacity: 0;
}

.cookie-shape.is-cracking .cookie-half.right[b-c3jwf0qxqx] {
    transform: translate(-50%, -50%) translate(64px, -18px) rotate(75deg);
    opacity: 0;
}

/* A flash of light where the shell splits. */
.cookie-shape[b-c3jwf0qxqx]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, color-mix(in srgb, var(--nx-amber) 70%, transparent) 40%, transparent 70%);
    opacity: 0;
    pointer-events: none;
}

.cookie-hint[b-c3jwf0qxqx] {
    position: relative;
    z-index: 1;
    font-family: var(--nx-font-mono);
    font-size: .78rem;
    font-weight: 600;
    color: var(--nx-text-dim);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
}

/* ---------- Spark burst ---------- */

.fortune-burst[b-c3jwf0qxqx] {
    --spark: var(--nx-amber);
    position: absolute;
    top: 2.25rem;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 2;
}

.fortune-burst.rarity-rare[b-c3jwf0qxqx] { --spark: #60a5fa; }
.fortune-burst.rarity-legendary[b-c3jwf0qxqx] { --spark: #f5b942; }
.fortune-burst.rarity-mythic[b-c3jwf0qxqx] { --spark: #fb7185; }

.fortune-burst span[b-c3jwf0qxqx] {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--spark);
    box-shadow: 0 0 10px var(--spark), 0 0 18px var(--spark);
    opacity: 0;
}

.fortune-burst span:nth-child(3n)[b-c3jwf0qxqx] {
    background: var(--nx-accent);
    box-shadow: 0 0 10px var(--nx-accent);
}

@keyframes spark-fly-b-c3jwf0qxqx {
    0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(1); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(.3); }
}

/* ---------- Fortune slip ---------- */

.fortune-slip[b-c3jwf0qxqx] {
    --rc: var(--nx-accent);
    position: relative;
    z-index: 1;
    margin-top: 1rem;
    max-width: 440px;
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--rc) 40%, var(--nx-border));
    border-radius: var(--nx-radius);
    background:
        radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--rc) 12%, transparent), transparent 65%),
        var(--nx-surface-solid);
    padding: 1.4rem 1.5rem;
    box-shadow: var(--nx-shadow), 0 0 30px color-mix(in srgb, var(--rc) 14%, transparent);
}

.fortune-slip-rarity[b-c3jwf0qxqx] {
    font-family: var(--nx-font-mono);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--rc);
    text-shadow: 0 0 12px color-mix(in srgb, var(--rc) 50%, transparent);
    margin-bottom: .6rem;
}

.fortune-slip-text[b-c3jwf0qxqx] {
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.55;
    color: var(--nx-text);
}

.fortune-slip-mood[b-c3jwf0qxqx] {
    display: inline-block;
    margin-top: .7rem;
    font-family: var(--nx-font-mono);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--rc);
    background: color-mix(in srgb, var(--rc) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--rc) 40%, transparent);
    border-radius: 999px;
    padding: .2rem .7rem;
}

.fortune-numbers[b-c3jwf0qxqx] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.1rem;
}

.fortune-ball[b-c3jwf0qxqx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-family: var(--nx-font-mono);
    font-size: .82rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--nx-bg) 50%, transparent);
    border: 1px solid var(--nx-border-strong);
    color: var(--nx-text);
}

.fortune-ball.star[b-c3jwf0qxqx] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #3b2405;
    border-color: transparent;
    box-shadow: 0 0 16px rgba(251, 191, 36, .55);
}

.fortune-slip-actions[b-c3jwf0qxqx] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.3rem;
}

/* Rarity accents */
.fortune-slip.rarity-rare[b-c3jwf0qxqx] { --rc: #60a5fa; }
.fortune-slip.rarity-legendary[b-c3jwf0qxqx] { --rc: #f5b942; }
.fortune-slip.rarity-mythic[b-c3jwf0qxqx] { --rc: #fb7185; }

@keyframes legendary-glow-b-c3jwf0qxqx {
    0%, 100% { box-shadow: var(--nx-shadow), 0 0 0 1px rgba(245, 185, 66, .4), 0 0 18px rgba(245, 185, 66, .28); }
    50% { box-shadow: var(--nx-shadow), 0 0 0 1px rgba(245, 185, 66, .65), 0 0 34px rgba(245, 185, 66, .5); }
}

@keyframes mythic-glow-b-c3jwf0qxqx {
    0%, 100% { box-shadow: var(--nx-shadow), 0 0 0 1px rgba(192, 132, 252, .4), 0 0 20px rgba(192, 132, 252, .3); }
    50% { box-shadow: var(--nx-shadow), 0 0 0 1px rgba(192, 132, 252, .7), 0 0 38px rgba(192, 132, 252, .55); }
}

/* ---------- Loading shimmer ---------- */

.fortune-loading-label[b-c3jwf0qxqx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    font-family: var(--nx-font-mono);
    font-size: .78rem;
    font-weight: 600;
    color: var(--nx-text-dim);
    margin-bottom: .85rem;
}

.fortune-typing-dots[b-c3jwf0qxqx] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.fortune-typing-dots span[b-c3jwf0qxqx] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--nx-accent);
}

@keyframes fortune-typing-bounce-b-c3jwf0qxqx {
    0%, 60%, 100% { translate: 0 0; opacity: .4; }
    30% { translate: 0 -4px; opacity: 1; }
}

.shimmer-line[b-c3jwf0qxqx],
.shimmer-ball[b-c3jwf0qxqx] {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--nx-text) 6%, transparent) 25%,
        color-mix(in srgb, var(--nx-accent) 22%, transparent) 50%,
        color-mix(in srgb, var(--nx-text) 6%, transparent) 75%);
    background-size: 200% 100%;
}

.shimmer-line[b-c3jwf0qxqx] {
    height: 12px;
    border-radius: 6px;
    margin: .5rem 0;
}

.shimmer-line.w-40[b-c3jwf0qxqx] { width: 40%; margin-left: auto; margin-right: auto; }
.shimmer-line.w-60[b-c3jwf0qxqx] { width: 60%; margin-left: auto; margin-right: auto; }
.shimmer-line.w-90[b-c3jwf0qxqx] { width: 90%; margin-left: auto; margin-right: auto; }

.shimmer-ball[b-c3jwf0qxqx] {
    border: none;
}

@keyframes shimmer-b-c3jwf0qxqx {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- Recent + community columns ---------- */

.fortune-columns[b-c3jwf0qxqx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.fortune-columns[b-c3jwf0qxqx]  .fortune-column {
    min-width: 0;
}

.fortune-empty[b-c3jwf0qxqx] {
    margin: 0;
    font-size: .9rem;
}

/* ---------- History ---------- */

.fortune-history[b-c3jwf0qxqx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fortune-history summary .bi[b-c3jwf0qxqx] {
    color: var(--nx-accent);
}

.fortune-history summary .nx-count[b-c3jwf0qxqx] {
    margin-left: 4px;
}

.fortune-history-nested[b-c3jwf0qxqx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.history-month[b-c3jwf0qxqx],
.history-day[b-c3jwf0qxqx] {
    background: color-mix(in srgb, var(--nx-bg) 35%, transparent);
}

.history-month > summary[b-c3jwf0qxqx],
.history-day > summary[b-c3jwf0qxqx] {
    padding: 9px 14px;
    font-size: .88rem;
}

.history-day > summary[b-c3jwf0qxqx] {
    font-family: var(--nx-font-mono);
    font-size: .78rem;
    font-weight: 500;
    color: var(--nx-text-dim);
}

.history-rows[b-c3jwf0qxqx] {
    display: flex;
    flex-direction: column;
}

.history-row[b-c3jwf0qxqx] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    width: 100%;
    padding: .55rem .5rem;
    border: 0;
    border-bottom: 1px dashed var(--nx-border);
    border-radius: 6px;
    background: none;
    color: var(--nx-text);
    font: inherit;
    font-size: .84rem;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.history-row:hover[b-c3jwf0qxqx],
.history-row:focus-visible[b-c3jwf0qxqx] {
    background: color-mix(in srgb, var(--nx-accent) 8%, transparent);
}

.history-row:focus-visible[b-c3jwf0qxqx] {
    outline: 2px solid var(--nx-accent);
    outline-offset: -2px;
}

.history-row:last-child[b-c3jwf0qxqx] {
    border-bottom: none;
}

.history-row-text[b-c3jwf0qxqx] {
    flex: 1 1 220px;
    font-style: italic;
}

.history-row-numbers[b-c3jwf0qxqx] {
    color: var(--nx-accent);
    font-family: var(--nx-font-mono);
    font-size: .74rem;
}

.history-row-time[b-c3jwf0qxqx] {
    color: var(--nx-text-faint);
    font-family: var(--nx-font-mono);
    font-size: .72rem;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .fortune-columns[b-c3jwf0qxqx] {
        grid-template-columns: minmax(0, 1fr);
    }

    .fortune-body[b-c3jwf0qxqx] {
        padding: 1.25rem 1rem 1.5rem;
    }
}

/* ---------- Motion (all opt-in) ---------- */

@media (prefers-reduced-motion: no-preference) {
    .cookie-shape[b-c3jwf0qxqx] {
        animation: cookie-idle-b-c3jwf0qxqx 3.4s ease-in-out infinite;
    }

    .cookie-scene.is-busy .cookie-shape[b-c3jwf0qxqx] {
        animation-play-state: paused;
    }

    .cookie-aura[b-c3jwf0qxqx] {
        animation: aura-breathe-b-c3jwf0qxqx 3.4s ease-in-out infinite;
    }

    .cookie-twinkle[b-c3jwf0qxqx] {
        animation: twinkle-b-c3jwf0qxqx 2.6s ease-in-out infinite;
    }

    .cookie-twinkle.t2[b-c3jwf0qxqx] { animation-delay: .9s; }
    .cookie-twinkle.t3[b-c3jwf0qxqx] { animation-delay: 1.7s; }

    .cookie-shape.is-cracking[b-c3jwf0qxqx]::after {
        animation: crack-flash-b-c3jwf0qxqx .6s ease-out both;
    }

    .fortune-burst span[b-c3jwf0qxqx] {
        animation: spark-fly-b-c3jwf0qxqx .9s cubic-bezier(.15, .7, .3, 1) both;
        animation-delay: calc(var(--t) * 35ms);
    }

    .fortune-slip[b-c3jwf0qxqx] {
        animation: slip-in-b-c3jwf0qxqx .5s cubic-bezier(.34, 1.56, .64, 1) both;
    }

    .fortune-slip.rarity-legendary[b-c3jwf0qxqx] {
        animation: slip-in-b-c3jwf0qxqx .5s cubic-bezier(.34, 1.56, .64, 1) both, legendary-glow-b-c3jwf0qxqx 2.4s ease-in-out .5s infinite;
    }

    .fortune-slip.rarity-mythic[b-c3jwf0qxqx] {
        animation: slip-in-b-c3jwf0qxqx .5s cubic-bezier(.34, 1.56, .64, 1) both, mythic-glow-b-c3jwf0qxqx 3s ease-in-out .5s infinite;
    }

    .fortune-slip.is-loading[b-c3jwf0qxqx] {
        animation: none;
    }

    .fortune-ball[b-c3jwf0qxqx] {
        animation: ball-pop-b-c3jwf0qxqx .4s cubic-bezier(.34, 1.56, .64, 1) both;
    }

    .fortune-ball:nth-child(1)[b-c3jwf0qxqx] { animation-delay: .05s; }
    .fortune-ball:nth-child(2)[b-c3jwf0qxqx] { animation-delay: .12s; }
    .fortune-ball:nth-child(3)[b-c3jwf0qxqx] { animation-delay: .19s; }
    .fortune-ball:nth-child(4)[b-c3jwf0qxqx] { animation-delay: .26s; }
    .fortune-ball:nth-child(5)[b-c3jwf0qxqx] { animation-delay: .33s; }
    .fortune-ball:nth-child(6)[b-c3jwf0qxqx] { animation-delay: .40s; }

    .shimmer-line[b-c3jwf0qxqx],
    .shimmer-ball[b-c3jwf0qxqx] {
        animation: shimmer-b-c3jwf0qxqx 1.4s ease-in-out infinite;
    }

    .fortune-typing-dots span[b-c3jwf0qxqx] {
        animation: fortune-typing-bounce-b-c3jwf0qxqx 1.2s infinite ease-in-out;
    }

    .fortune-typing-dots span:nth-child(2)[b-c3jwf0qxqx] { animation-delay: .15s; }
    .fortune-typing-dots span:nth-child(3)[b-c3jwf0qxqx] { animation-delay: .3s; }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-scene[b-c3jwf0qxqx],
    .cookie-half[b-c3jwf0qxqx],
    .cookie-shape[b-c3jwf0qxqx] {
        transition: none;
    }

    .fortune-burst[b-c3jwf0qxqx] {
        display: none;
    }
}

@keyframes aura-breathe-b-c3jwf0qxqx {
    0%, 100% { opacity: .75; scale: .95; }
    50% { opacity: 1; scale: 1.06; }
}

@keyframes twinkle-b-c3jwf0qxqx {
    0%, 100% { opacity: .15; scale: .7; rotate: 0deg; }
    50% { opacity: 1; scale: 1.15; rotate: 25deg; }
}

@keyframes crack-flash-b-c3jwf0qxqx {
    0% { opacity: 0; scale: .4; }
    25% { opacity: 1; scale: 3; }
    100% { opacity: 0; scale: 6; }
}

@keyframes slip-in-b-c3jwf0qxqx {
    from { opacity: 0; transform: translateY(-18px) scale(.92); }
    to { opacity: 1; transform: none; }
}

@keyframes ball-pop-b-c3jwf0qxqx {
    from { opacity: 0; transform: scale(.4); }
    to { opacity: 1; transform: scale(1); }
}
/* /Components/Pages/Examples/AzureOpenAIChatBotExample.razor.rz.scp.css */
/* Azure AI Chat Bot — scoped styles */

.chat-shell[b-r1vijux6rr] {
    display: flex;
    flex-direction: column;
    height: 72vh;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Header */
.chat-header[b-r1vijux6rr] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1.1rem;
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%);
    color: var(--mud-palette-primary-text);
}

.chat-header-left[b-r1vijux6rr] {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.chat-avatar-bot[b-r1vijux6rr] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

.chat-header-title[b-r1vijux6rr] {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-header-status[b-r1vijux6rr] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    opacity: .9;
}

.chat-status-dot[b-r1vijux6rr] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    animation: chat-pulse-dot-b-r1vijux6rr 2s infinite;
}

.chat-status-dot.thinking[b-r1vijux6rr] {
    background: #fbbf24;
    animation: chat-pulse-dot-b-r1vijux6rr 1s infinite;
}

@keyframes chat-pulse-dot-b-r1vijux6rr {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); }
    70% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Settings row: model + reasoning effort pickers, session token badge */
.chat-settings-row[b-r1vijux6rr] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .85rem;
    padding: .5rem 1rem;
    background: var(--mud-palette-background-grey);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.chat-setting[b-r1vijux6rr] {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.chat-setting label[b-r1vijux6rr] {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    cursor: default;
}

[b-r1vijux6rr] .chat-setting .mud-select {
    min-width: 150px;
}

.chat-token-badge[b-r1vijux6rr] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 999px;
    padding: .25rem .75rem .25rem .55rem;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .chat-token-badge[b-r1vijux6rr] {
        margin-left: 0;
    }
}

/* Body */
.chat-body[b-r1vijux6rr] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Empty state */
.chat-empty-state[b-r1vijux6rr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem;
}

.chat-empty-avatar[b-r1vijux6rr] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-secondary));
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    animation: chat-float-b-r1vijux6rr 3s ease-in-out infinite;
}

@keyframes chat-float-b-r1vijux6rr {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.chat-suggestions[b-r1vijux6rr] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-top: 1.25rem;
    max-width: 560px;
}

.chat-suggestion-chip[b-r1vijux6rr] {
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-radius: 999px;
    padding: .5rem 1rem;
    font-size: .82rem;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}

.chat-suggestion-chip:hover:not(:disabled)[b-r1vijux6rr] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.chat-suggestion-chip:disabled[b-r1vijux6rr] {
    opacity: .5;
    cursor: default;
}

/* Transcript */
.chat-messages[b-r1vijux6rr] {
    flex: 1;
    overflow-y: auto;
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.chat-message-row[b-r1vijux6rr] {
    display: flex;
    align-items: flex-end;
    gap: .55rem;
    animation: chat-msg-in-b-r1vijux6rr .25s ease-out;
}

.chat-message-row.from-user[b-r1vijux6rr] {
    flex-direction: row-reverse;
}

@keyframes chat-msg-in-b-r1vijux6rr {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.chat-avatar-sm[b-r1vijux6rr] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-avatar-sm.bot[b-r1vijux6rr] {
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-secondary));
    color: #fff;
}

.chat-avatar-sm.user[b-r1vijux6rr] {
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-divider);
}

.chat-message-col[b-r1vijux6rr] {
    display: flex;
    flex-direction: column;
    max-width: 72%;
    min-width: 0;
}

.chat-message-row.from-user .chat-message-col[b-r1vijux6rr] {
    align-items: flex-end;
}

.chat-msg-tokens[b-r1vijux6rr] {
    font-size: .68rem;
    color: var(--mud-palette-text-secondary);
    margin-top: .25rem;
    padding: 0 .3rem;
}

.chat-bubble[b-r1vijux6rr] {
    padding: .6rem .9rem;
    border-radius: 16px;
    max-width: 100%;
    font-size: .9rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.chat-bubble.user[b-r1vijux6rr] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-bottom-right-radius: 4px;
}

.chat-bubble.assistant[b-r1vijux6rr] {
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-divider);
    border-bottom-left-radius: 4px;
}

.chat-cursor[b-r1vijux6rr] {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    background: currentColor;
    vertical-align: text-bottom;
    animation: chat-cursor-blink-b-r1vijux6rr 1s step-start infinite;
}

@keyframes chat-cursor-blink-b-r1vijux6rr {
    50% { opacity: 0; }
}

.chat-typing-dots[b-r1vijux6rr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: .25rem .1rem;
}

.chat-typing-dots span[b-r1vijux6rr] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mud-palette-text-secondary);
    animation: chat-typing-bounce-b-r1vijux6rr 1.2s infinite ease-in-out;
}

.chat-typing-dots span:nth-child(2)[b-r1vijux6rr] { animation-delay: .15s; }
.chat-typing-dots span:nth-child(3)[b-r1vijux6rr] { animation-delay: .3s; }

@keyframes chat-typing-bounce-b-r1vijux6rr {
    0%, 60%, 100% { transform: translateY(0); opacity: .4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* Composer */
.chat-composer[b-r1vijux6rr] {
    flex: 0 0 auto;
    padding: .8rem 1rem;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-divider);
}

.chat-composer-hint[b-r1vijux6rr] {
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 .4rem .3rem;
}

.chat-composer-row[b-r1vijux6rr] {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
}

.chat-send-btn[b-r1vijux6rr], .chat-stop-btn[b-r1vijux6rr] {
    flex: 0 0 auto;
    border-radius: 50% !important;
    min-width: 44px !important;
    width: 44px;
    height: 44px;
}

[b-r1vijux6rr] .chat-input .mud-input-outlined-border {
    border-radius: 22px !important;
}

[b-r1vijux6rr] .chat-input .mud-input-slot {
    padding-top: 10px;
    padding-bottom: 10px;
}

@media (max-width: 600px) {
    .chat-shell[b-r1vijux6rr] {
        height: 78vh;
        border-radius: 10px;
    }

    .chat-bubble[b-r1vijux6rr] {
        max-width: 84%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-status-dot[b-r1vijux6rr],
    .chat-empty-avatar[b-r1vijux6rr],
    .chat-message-row[b-r1vijux6rr],
    .chat-cursor[b-r1vijux6rr],
    .chat-typing-dots span[b-r1vijux6rr],
    .chat-suggestion-chip[b-r1vijux6rr] {
        animation: none !important;
        transition: none !important;
    }
}
/* /Components/Pages/Examples/FortuneHistoryPage.razor.rz.scp.css */
.history-page[b-s6pkr01z5y] {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.history-emoji[b-s6pkr01z5y] {
    display: inline-block;
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.55));
}

@media (prefers-reduced-motion: no-preference) {
    .history-emoji[b-s6pkr01z5y] {
        animation: history-wobble-b-s6pkr01z5y 3.4s ease-in-out infinite;
    }
}

@keyframes history-wobble-b-s6pkr01z5y {
    0%, 100% { rotate: 0deg; }
    50% { rotate: -8deg; }
}

.history-list[b-s6pkr01z5y] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.history-list[b-s6pkr01z5y]  .fortune-card {
    margin: 0;
    height: 100%;
}

@media (max-width: 700px) {
    .history-list[b-s6pkr01z5y] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/Games/GamesIndex.razor.rz.scp.css */
/* ---------- Grid of game cards ---------- */

.arcade-grid[b-rbf6z1oj66] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.arcade-card[b-rbf6z1oj66] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
}

.arcade-preview[b-rbf6z1oj66] {
    position: relative;
    display: grid;
    place-items: center;
    height: 220px;
    border-bottom: 1px solid var(--nx-border);
    background:
        radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--game) 18%, transparent), transparent 65%),
        linear-gradient(color-mix(in srgb, var(--game) 7%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(90deg, color-mix(in srgb, var(--game) 7%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
        color-mix(in srgb, var(--nx-bg) 50%, transparent);
    overflow: hidden;
}

.arcade-body[b-rbf6z1oj66] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    padding: 20px 22px 22px;
}

.arcade-tags[b-rbf6z1oj66] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.arcade-tags span[b-rbf6z1oj66] {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--game) 40%, transparent);
    color: var(--game);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

[data-theme="light"] .arcade-tags span[b-rbf6z1oj66] { color: color-mix(in srgb, var(--game) 75%, #000); }

.arcade-title[b-rbf6z1oj66] {
    margin: 4px 0 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.arcade-link[b-rbf6z1oj66] {
    color: var(--nx-text);
    text-decoration: none;
}

/* Stretched link: the whole card opens the game. */
.arcade-link[b-rbf6z1oj66]::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.arcade-card:has(.arcade-link:focus-visible)[b-rbf6z1oj66] {
    outline: 2px solid var(--game);
    outline-offset: 3px;
}

.arcade-link:focus-visible[b-rbf6z1oj66] { outline: none; }

.arcade-card:hover .arcade-link[b-rbf6z1oj66] {
    color: var(--game);
    text-shadow: 0 0 18px color-mix(in srgb, var(--game) 50%, transparent);
}

.arcade-desc[b-rbf6z1oj66] {
    margin: 0;
    color: var(--nx-text-dim);
    line-height: 1.6;
}

.arcade-cta[b-rbf6z1oj66] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--game);
}

.arcade-cta .bi[b-rbf6z1oj66] { transition: transform 0.25s var(--nx-ease); }
.arcade-card:hover .arcade-cta .bi[b-rbf6z1oj66] { transform: translateX(5px); }

/* ---------- Tic-tac-toe preview ---------- */

.ttt-mini[b-rbf6z1oj66] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 48px);
    grid-template-rows: repeat(3, 48px);
    gap: 6px;
}

.ttt-mini .m[b-rbf6z1oj66] {
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--nx-bg) 60%, transparent);
    border: 1px solid var(--nx-border);
    font-family: var(--nx-font-mono);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
}

.ttt-mini .x[b-rbf6z1oj66] { color: var(--nx-cyan); text-shadow: 0 0 12px var(--nx-cyan); }
.ttt-mini .o[b-rbf6z1oj66] { color: var(--nx-amber); text-shadow: 0 0 12px var(--nx-amber); }

/* Diagonal through the X's at cells 0, 4, 8. */
.ttt-strike[b-rbf6z1oj66] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 172px; /* corner-cell center to corner-cell center, plus a little overhang */
    height: 4px;
    border-radius: 4px;
    background: var(--nx-lime);
    box-shadow: 0 0 14px var(--nx-lime);
    transform: translate(-50%, -50%) rotate(45deg);
    transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
    /* Each mark lands 0.6s after the last; the board clears and replays every 8s. */
    .ttt-mini .x[b-rbf6z1oj66],
    .ttt-mini .o[b-rbf6z1oj66] {
        opacity: 0;
        animation: ttt-mark-b-rbf6z1oj66 8s ease-out infinite;
        animation-delay: calc(var(--n) * 0.6s);
    }

    .ttt-strike[b-rbf6z1oj66] {
        animation: ttt-strike-b-rbf6z1oj66 8s ease-out infinite;
        animation-delay: 3s;
        scale: 0 1;
    }
}

@keyframes ttt-mark-b-rbf6z1oj66 {
    0% { opacity: 0; scale: 0.4; }
    5% { opacity: 1; scale: 1.15; }
    8%, 74% { opacity: 1; scale: 1; }
    80%, 100% { opacity: 0; scale: 1; }
}

@keyframes ttt-strike-b-rbf6z1oj66 {
    0% { scale: 0 1; }
    6%, 38% { scale: 1 1; opacity: 1; }
    44%, 100% { scale: 1 1; opacity: 0; }
}

/* ---------- Memory match preview ---------- */

.mm-mini[b-rbf6z1oj66] {
    display: grid;
    grid-template-columns: repeat(4, 46px);
    gap: 8px;
    perspective: 600px;
}

.mm-mini .card[b-rbf6z1oj66] {
    position: relative;
    height: 58px;
    transform-style: preserve-3d;
    transform: rotateY(180deg);
}

.mm-mini .face[b-rbf6z1oj66] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
    backface-visibility: hidden;
}

.mm-mini .back[b-rbf6z1oj66] {
    border: 1px solid var(--nx-border-strong);
    background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--nx-green) 10%, transparent) 0 6px, transparent 6px 12px),
        color-mix(in srgb, var(--nx-bg) 70%, transparent);
    color: var(--nx-green);
    font-family: var(--nx-font-mono);
    font-weight: 700;
    text-shadow: 0 0 10px var(--nx-green);
}

.mm-mini .front[b-rbf6z1oj66] {
    transform: rotateY(180deg);
    border: 1px solid var(--nx-green);
    background: color-mix(in srgb, var(--nx-green) 14%, var(--nx-surface-solid));
    color: var(--nx-green);
    font-size: 1.3rem;
    box-shadow: 0 0 16px color-mix(in srgb, var(--nx-green) 40%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
    /* A pair turns face-up every 0.8s, they all hold, then flip back together and repeat. */
    .mm-mini .card[b-rbf6z1oj66] {
        transform: none;
        animation: mm-flip-b-rbf6z1oj66 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        animation-delay: calc(var(--n) * 0.8s);
    }
}

@keyframes mm-flip-b-rbf6z1oj66 {
    0%, 4% { transform: rotateY(0); }
    10%, 66% { transform: rotateY(180deg); }
    74%, 100% { transform: rotateY(0); }
}

/* ---------- Icon studio preview ---------- */

.studio-preview[b-rbf6z1oj66] {
    align-content: center;
    gap: 22px;
}

.studio-prompt[b-rbf6z1oj66] {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--nx-border-strong);
    background: color-mix(in srgb, var(--nx-bg) 70%, transparent);
    font-size: 0.8rem;
    color: var(--nx-text-dim);
}

.studio-caret[b-rbf6z1oj66] {
    display: inline-block;
    width: 7px;
    height: 1em;
    margin-left: 3px;
    vertical-align: text-bottom;
    background: var(--nx-amber);
    box-shadow: 0 0 8px var(--nx-amber);
}

.studio-icons[b-rbf6z1oj66] {
    display: flex;
    gap: 14px;
}

.studio-icons .bi[b-rbf6z1oj66] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--nx-amber) 50%, transparent);
    background: color-mix(in srgb, var(--nx-amber) 12%, var(--nx-surface-solid));
    color: var(--nx-amber);
    font-size: 1.5rem;
    box-shadow: 0 0 18px color-mix(in srgb, var(--nx-amber) 30%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
    .studio-caret[b-rbf6z1oj66] { animation: studio-blink-b-rbf6z1oj66 1s step-end infinite; }

    .studio-icons .bi[b-rbf6z1oj66] {
        opacity: 0;
        animation: studio-pop-b-rbf6z1oj66 6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
        animation-delay: calc(0.8s + var(--n) * 0.35s);
    }
}

@keyframes studio-blink-b-rbf6z1oj66 { 50% { opacity: 0; } }

@keyframes studio-pop-b-rbf6z1oj66 {
    0% { opacity: 0; scale: 0.3; translate: 0 14px; }
    8%, 70% { opacity: 1; scale: 1; translate: none; }
    78%, 100% { opacity: 0; scale: 0.9; translate: none; }
}

/* ---------- Cosmic Salvo preview (in the game's own colors) ---------- */

.arcade[b-rbf6z1oj66] {
    --salvo-cyan: #4dd9ff;
    --salvo-pink: #ff3d8b;
}

[data-theme="light"] .arcade[b-rbf6z1oj66] { --salvo-pink: #d81b67; }

/* Deep space in both themes - it's a space game. */
.salvo-preview[b-rbf6z1oj66] {
    background:
        radial-gradient(ellipse at 20% 28%, color-mix(in srgb, #ff3d8b 22%, transparent), transparent 55%),
        radial-gradient(ellipse at 82% 76%, color-mix(in srgb, var(--salvo-cyan) 18%, transparent), transparent 55%),
        #05070f;
}

.salvo-stars[b-rbf6z1oj66] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1px 1px at 12% 18%, #fff, transparent),
        radial-gradient(1px 1px at 34% 72%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 58% 12%, #fff, transparent),
        radial-gradient(1px 1px at 78% 40%, #fff, transparent),
        radial-gradient(1px 1px at 88% 84%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 22% 88%, var(--salvo-cyan), transparent),
        radial-gradient(1px 1px at 93% 10%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 6% 56%, #ff3d8b, transparent),
        radial-gradient(1px 1px at 44% 36%, #fff, transparent),
        radial-gradient(1px 1px at 66% 94%, #fff, transparent),
        radial-gradient(1px 1px at 4% 8%, #fff, transparent),
        radial-gradient(1px 1px at 97% 58%, #fff, transparent);
    opacity: 0.85;
}

.salvo-ring[b-rbf6z1oj66] {
    position: absolute;
    left: 50%;
    top: 50%;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--salvo-cyan) 70%, transparent));
}

/* Rocks spaced evenly around a circle, each a lumpy polygon turned a different way. */
.salvo-ring .rock[b-rbf6z1oj66] {
    position: absolute;
    width: var(--s);
    height: var(--s);
    margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
    transform: rotate(calc(var(--n) * 51.4deg)) translateY(-80px) rotate(calc(var(--n) * 37deg));
    clip-path: polygon(30% 0, 72% 8%, 100% 40%, 88% 82%, 52% 100%, 14% 86%, 0 48%, 10% 14%);
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--salvo-cyan) 55%, #1b2233), #141b2b 75%);
}

.salvo-ship[b-rbf6z1oj66] {
    position: relative;
    width: 26px;
    height: 30px;
}

/* An upward arrowhead, notched at the back. */
.salvo-ship .hull[b-rbf6z1oj66] {
    position: absolute;
    inset: 0;
    background: linear-gradient(#e8fbff, var(--salvo-cyan) 60%);
    clip-path: polygon(50% 0, 100% 100%, 50% 76%, 0 100%);
    filter: drop-shadow(0 0 8px var(--salvo-cyan));
}

.salvo-ship .shot[b-rbf6z1oj66] {
    position: absolute;
    left: 50%;
    top: -8px;
    width: 4px;
    height: 10px;
    margin-left: -2px;
    border-radius: 4px;
    background: #ff3d8b;
    box-shadow: 0 0 8px #ff3d8b, 0 0 14px #ff3d8b;
    opacity: 0;
}

.salvo-ship .flame[b-rbf6z1oj66] {
    position: absolute;
    left: 50%;
    top: 78%;
    width: 8px;
    height: 14px;
    margin-left: -4px;
    border-radius: 0 0 50% 50%;
    background: linear-gradient(#ff3d8b, transparent);
    filter: blur(1px);
    transform-origin: top;
}

@media (prefers-reduced-motion: no-preference) {
    .salvo-ring[b-rbf6z1oj66] { animation: salvo-spin-b-rbf6z1oj66 36s linear infinite; }
    .salvo-stars[b-rbf6z1oj66] { animation: salvo-twinkle-b-rbf6z1oj66 3s ease-in-out infinite alternate; }
    .salvo-ship[b-rbf6z1oj66] { animation: salvo-bob-b-rbf6z1oj66 4s ease-in-out infinite; }
    .salvo-ship .flame[b-rbf6z1oj66] { animation: salvo-flicker-b-rbf6z1oj66 0.18s steps(2) infinite alternate; }

    /* Three shots in flight at a time, each fading as it leaves the ring. */
    .salvo-ship .shot[b-rbf6z1oj66] {
        animation: salvo-shot-b-rbf6z1oj66 1.2s linear infinite;
        animation-delay: calc(var(--n) * 0.4s);
    }
}

/* Without motion, freeze one shot partway out so the card still reads as a shooter. */
@media (prefers-reduced-motion: reduce) {
    .salvo-ship .shot:nth-child(2)[b-rbf6z1oj66] { opacity: 1; translate: 0 -34px; }
}

@keyframes salvo-spin-b-rbf6z1oj66 { to { rotate: 360deg; } }
@keyframes salvo-twinkle-b-rbf6z1oj66 { to { opacity: 0.45; } }
@keyframes salvo-bob-b-rbf6z1oj66 { 50% { translate: 0 -4px; } }
@keyframes salvo-flicker-b-rbf6z1oj66 { to { scale: 1 0.6; opacity: 0.7; } }

@keyframes salvo-shot-b-rbf6z1oj66 {
    0% { opacity: 0; translate: 0 0; }
    10% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; translate: 0 -96px; }
}

/* ---------- More things to play with ---------- */

.arcade-section[b-rbf6z1oj66] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 48px 0 18px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nx-text-dim);
}

.arcade-section span[b-rbf6z1oj66] { color: var(--nx-accent); }

.arcade-section[b-rbf6z1oj66]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--nx-border-strong), transparent);
}

.arcade-extras[b-rbf6z1oj66] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

.arcade-extra[b-rbf6z1oj66] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    color: var(--nx-text);
    text-decoration: none;
}

.arcade-extra > .bi[b-rbf6z1oj66] {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--nx-accent) 12%, transparent);
    color: var(--nx-accent);
    font-size: 1.2rem;
}

.arcade-extra span[b-rbf6z1oj66] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.arcade-extra small[b-rbf6z1oj66] {
    color: var(--nx-text-faint);
    font-size: 0.8rem;
}

.arcade-extra:hover[b-rbf6z1oj66] { color: var(--nx-text); }
/* /Components/Pages/Games/MemoryMatch/CreateMemoryMatchSessionForm.razor.rz.scp.css */
.mm-form[b-dg77osbfn7] {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.mm-form-icon[b-dg77osbfn7] {
    margin-right: 8px;
    color: var(--nx-accent);
}

/* Settings that only apply to the choice above them hang off a glowing rail. */
.mm-form-sub[b-dg77osbfn7] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: -8px;
    padding-left: 16px;
    border-left: 2px solid color-mix(in srgb, var(--nx-accent) 45%, transparent);
    box-shadow: -6px 0 14px -10px var(--nx-accent);
}

@media (prefers-reduced-motion: no-preference) {
    .mm-form-sub[b-dg77osbfn7] {
        animation: mm-form-in-b-dg77osbfn7 0.3s var(--nx-ease) both;
    }
}

@keyframes mm-form-in-b-dg77osbfn7 {
    from { opacity: 0; translate: 0 -6px; }
}

.mm-form-dims[b-dg77osbfn7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 10px;
}

.mm-form-times[b-dg77osbfn7] {
    padding-bottom: 10px;
    font-family: var(--nx-font-mono);
    font-size: 1.2rem;
    color: var(--nx-accent);
    text-shadow: 0 0 10px var(--nx-accent);
}

.mm-form-ok[b-dg77osbfn7] {
    color: var(--nx-lime);
}

.mm-form-warn[b-dg77osbfn7] {
    color: var(--nx-amber);
}

.mm-form-actions[b-dg77osbfn7] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}
/* /Components/Pages/Games/MemoryMatch/IconGalleryPicker.razor.rz.scp.css */
.mm-picker[b-70e1bnk0j3] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mm-gallery-grid[b-70e1bnk0j3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 10px;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    background: color-mix(in srgb, var(--nx-surface-solid) 55%, transparent);
    scrollbar-width: thin;
    scrollbar-color: var(--nx-border-strong) transparent;
}

.mm-gallery-item[b-70e1bnk0j3] {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--nx-border-strong);
    border-radius: 10px;
    background: var(--nx-surface-solid);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s var(--nx-ease);
}

.mm-gallery-item:hover[b-70e1bnk0j3] {
    border-color: var(--nx-accent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--nx-accent) 35%, transparent);
    transform: translateY(-2px);
}

.mm-gallery-item:focus-visible[b-70e1bnk0j3] {
    outline: 2px solid var(--nx-accent);
    outline-offset: 2px;
}

.mm-gallery-item-selected[b-70e1bnk0j3] {
    border-color: var(--nx-accent);
    box-shadow:
        0 0 0 2px var(--nx-accent),
        0 0 18px color-mix(in srgb, var(--nx-accent) 45%, transparent);
}

.mm-gallery-check[b-70e1bnk0j3] {
    position: absolute;
    top: 3px;
    right: 3px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.75rem;
    color: var(--nx-on-accent);
    background: var(--nx-accent);
    box-shadow: 0 0 8px var(--nx-accent);
}

.mm-gallery-item-static[b-70e1bnk0j3] {
    cursor: default;
}

.mm-gallery-item-static:hover[b-70e1bnk0j3] {
    transform: none;
}

/* Generated icons sit on a white background (see GameIconService's prompt); a small white tile keeps
   them looking deliberate on the dark card. */
.mm-gallery-item img[b-70e1bnk0j3] {
    width: 80%;
    height: 80%;
    object-fit: contain;
    border-radius: 6px;
    background: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    .mm-gallery-item[b-70e1bnk0j3],
    .mm-gallery-item:hover[b-70e1bnk0j3] {
        transition: none;
        transform: none;
    }
}

/* ---------- Generate ---------- */

.mm-picker-divider[b-70e1bnk0j3] {
    margin: 6px 0 0;
}

.mm-picker .mm-gen-title[b-70e1bnk0j3] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--nx-font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nx-text-dim);
}

.mm-gen-title .bi[b-70e1bnk0j3] {
    color: var(--nx-accent);
    text-shadow: 0 0 10px var(--nx-accent);
}

.mm-gen-row[b-70e1bnk0j3] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.mm-picker[b-70e1bnk0j3]  .nx-field {
    min-width: 0;
}
/* /Components/Pages/Games/MemoryMatch/MemoryMatchBoard.razor.rz.scp.css */
/* Neon memory board: glowing card backs on a glass panel. Who found each pair stays color-coded
   (player 1 green, player 2 amber - matching the dots on the play page's scoreboard). */

.mm-board-wrap[b-ucimrgbx12] {
    --mm-p1: var(--nx-green);
    --mm-p2: #fbbf24;
    --mm-solo: var(--nx-accent);
    --mm-celebrate: var(--nx-amber);

    position: relative;
}

[data-theme="light"] .mm-board-wrap[b-ucimrgbx12] {
    --mm-p2: #b45309;
}

.mm-board[b-ucimrgbx12] {
    display: grid;
    grid-template-columns: repeat(var(--mm-cols), 1fr);
    gap: 8px;
    width: 100%;
    max-width: min(580px, 92vw);
    margin: 0 auto;
    padding: 10px;
    border: 1px solid var(--nx-border-strong);
    border-radius: calc(var(--nx-radius) + 4px);
    background:
        radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--nx-accent) 10%, transparent), transparent 70%),
        var(--nx-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--nx-shadow), 0 0 70px color-mix(in srgb, var(--nx-accent) 10%, transparent);
}

.mm-cell[b-ucimrgbx12] {
    aspect-ratio: 1 / 1;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    perspective: 600px;
}

.mm-cell:disabled[b-ucimrgbx12] {
    cursor: default;
}

.mm-cell:focus-visible[b-ucimrgbx12] {
    outline: 2px solid var(--nx-accent);
    outline-offset: 2px;
}

.mm-cell-inner[b-ucimrgbx12] {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s var(--nx-ease);
    transform-style: preserve-3d;
    border-radius: 10px;
}

.mm-cell-inner.mm-flipped[b-ucimrgbx12] {
    transform: rotateY(180deg);
}

.mm-cell:not(:disabled):hover .mm-cell-inner:not(.mm-flipped)[b-ucimrgbx12] {
    transform: scale(1.05);
}

.mm-cell-back[b-ucimrgbx12],
.mm-cell-front[b-ucimrgbx12] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 10px;
    transition: border-color 0.25s, box-shadow 0.25s;
}

/* Card back: a hatched neon tile with a glowing mono "?". */
.mm-cell-back[b-ucimrgbx12] {
    border: 1px solid color-mix(in srgb, var(--nx-accent) 40%, transparent);
    background:
        repeating-linear-gradient(45deg, color-mix(in srgb, var(--nx-accent) 7%, transparent) 0 5px, transparent 5px 11px),
        linear-gradient(150deg,
            color-mix(in srgb, var(--nx-accent) 22%, var(--nx-surface-solid)),
            color-mix(in srgb, var(--nx-accent-2) 12%, var(--nx-surface-solid)));
    box-shadow: inset 0 0 16px color-mix(in srgb, var(--nx-accent) 14%, transparent);
    color: var(--nx-accent);
    font-family: var(--nx-font-mono);
    font-size: clamp(1rem, 4vw, 1.8rem);
    font-weight: 800;
    text-shadow: 0 0 10px var(--nx-accent), 0 0 22px color-mix(in srgb, var(--nx-accent) 60%, transparent);
}

.mm-cell:not(:disabled):hover .mm-cell-back[b-ucimrgbx12] {
    border-color: var(--nx-accent);
    box-shadow:
        inset 0 0 20px color-mix(in srgb, var(--nx-accent) 22%, transparent),
        0 0 18px color-mix(in srgb, var(--nx-accent) 40%, transparent);
}

.mm-cell-front[b-ucimrgbx12] {
    border: 1px solid var(--nx-border-strong);
    background: var(--nx-surface-solid);
    transform: rotateY(180deg);
}

/* Matched pairs light up in the finder's color. */
.mm-cell-matched[b-ucimrgbx12],
.mm-cell-matched-p1[b-ucimrgbx12],
.mm-cell-matched-p2[b-ucimrgbx12] {
    --mm-match: var(--mm-solo);
}

.mm-cell-matched-p1[b-ucimrgbx12] { --mm-match: var(--mm-p1); }
.mm-cell-matched-p2[b-ucimrgbx12] { --mm-match: var(--mm-p2); }

.mm-cell-matched .mm-cell-front[b-ucimrgbx12],
.mm-cell-matched-p1 .mm-cell-front[b-ucimrgbx12],
.mm-cell-matched-p2 .mm-cell-front[b-ucimrgbx12] {
    border-color: var(--mm-match);
    background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--mm-match) 30%, transparent), transparent 80%),
        color-mix(in srgb, var(--mm-match) 18%, var(--nx-surface-solid));
    box-shadow:
        inset 0 0 18px color-mix(in srgb, var(--mm-match) 30%, transparent),
        0 0 16px color-mix(in srgb, var(--mm-match) 32%, transparent);
}

.mm-icon-emoji[b-ucimrgbx12] {
    font-size: clamp(1rem, 4vw, 2.2rem);
    line-height: 1;
}

/* Generated icons are standardized on a plain white background (see GameIconService's prompt) - this
   wrapper keeps them looking intentional against the card front rather than clashing in dark mode. */
.mm-icon-img-wrap[b-ucimrgbx12] {
    width: 74%;
    height: 74%;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 4%;
}

.mm-icon-img[b-ucimrgbx12] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Icon variants
   -------------
   A board with more pairs than distinct icons re-uses glyphs (see MemoryMatchIconSets.ResolveSlot). Each
   re-use gets a different recoloring plus a differently shaped corner pip, so two cards showing the "same"
   icon are still unmistakably different cards - including for players who can't rely on color alone. */
.mm-variant-0[b-ucimrgbx12] {
    filter: none;
}

.mm-variant-1[b-ucimrgbx12] {
    filter: hue-rotate(135deg) saturate(1.5);
}

.mm-variant-2[b-ucimrgbx12] {
    filter: hue-rotate(240deg) saturate(1.4);
}

.mm-variant-3[b-ucimrgbx12] {
    filter: grayscale(0.9) contrast(1.25);
}

.mm-variant-pip[b-ucimrgbx12] {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 9px;
    height: 9px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-sizing: border-box;
}

.mm-variant-pip-1[b-ucimrgbx12] {
    background: #00897b;
    border-radius: 50%;
}

.mm-variant-pip-2[b-ucimrgbx12] {
    background: #7b1fa2;
    transform: rotate(45deg);
}

.mm-variant-pip-3[b-ucimrgbx12] {
    background: #546e7a;
    border: none;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

/* Match celebration
   -----------------
   The card itself pops and glows, and a ring expands out of it. Everything animates properties the flip
   doesn't touch (or on the button, which carries no transform of its own), so the 3D flip stays intact. */
.mm-cell-celebrate[b-ucimrgbx12] {
    position: relative;
    z-index: 2;
    animation: mm-match-pop-b-ucimrgbx12 0.6s ease;
}

.mm-cell-celebrate .mm-cell-front[b-ucimrgbx12] {
    animation: mm-match-glow-b-ucimrgbx12 1.4s ease-out;
}

.mm-cell-celebrate .mm-cell-front[b-ucimrgbx12]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    border: 3px solid var(--mm-celebrate);
    box-shadow: 0 0 14px var(--mm-celebrate);
    animation: mm-match-ring-b-ucimrgbx12 0.9s ease-out forwards;
    pointer-events: none;
}

@keyframes mm-match-pop-b-ucimrgbx12 {
    0% { transform: scale(1); }
    35% { transform: scale(1.18) rotate(-3deg); }
    60% { transform: scale(0.96) rotate(2deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes mm-match-glow-b-ucimrgbx12 {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mm-celebrate) 90%, transparent); }
    40% { box-shadow: 0 0 26px 7px color-mix(in srgb, var(--mm-celebrate) 80%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes mm-match-ring-b-ucimrgbx12 {
    0% { transform: scale(1); opacity: 0.95; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Praise banner
   ------------- */
.mm-praise-slot[b-ucimrgbx12] {
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.mm-praise[b-ucimrgbx12] {
    display: inline-block;
    padding: 5px 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--nx-cyan), var(--nx-green), var(--nx-lime));
    color: var(--nx-on-accent);
    font-family: var(--nx-font-mono);
    font-weight: 700;
    font-size: clamp(0.85rem, 3vw, 1.05rem);
    white-space: nowrap;
    box-shadow: var(--nx-glow);
    animation: mm-praise-in-b-ucimrgbx12 1.5s ease-out forwards;
}

@keyframes mm-praise-in-b-ucimrgbx12 {
    0% { transform: translateY(10px) scale(0.7); opacity: 0; }
    18% { transform: translateY(0) scale(1.12); opacity: 1; }
    30% { transform: translateY(0) scale(1); opacity: 1; }
    75% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-8px) scale(0.95); opacity: 0; }
}

/* Respect a player's reduced-motion preference - the color/pip cues still carry all the information. */
@media (prefers-reduced-motion: reduce) {
    .mm-cell-inner[b-ucimrgbx12] {
        transition-duration: 0.01ms;
    }

    .mm-cell-celebrate[b-ucimrgbx12],
    .mm-cell-celebrate .mm-cell-front[b-ucimrgbx12],
    .mm-cell-celebrate .mm-cell-front[b-ucimrgbx12]::after,
    .mm-praise[b-ucimrgbx12] {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }

    .mm-praise[b-ucimrgbx12] {
        opacity: 1;
        animation: none;
    }
}

@media (max-width: 480px) {
    .mm-board[b-ucimrgbx12] {
        gap: 6px;
        padding: 7px;
    }
}
/* /Components/Pages/Games/MemoryMatch/MemoryMatchIconStudio.razor.rz.scp.css */
.mm-studio[b-xzqshj99wm] {
    max-width: 960px;
    margin: 0 auto;
}

/* The studio is the gallery's home, so give it room to breathe and a soft glow. */
.mm-studio[b-xzqshj99wm]  .mm-studio-card {
    padding: 24px;
    box-shadow: var(--nx-shadow), 0 0 60px color-mix(in srgb, var(--nx-accent) 8%, transparent);
}
/* /Components/Pages/Games/MemoryMatch/MemoryMatchLobby.razor.rz.scp.css */
.mm-lobby[b-o27ex3gfo4] {
    max-width: 960px;
    margin: 0 auto;
}

/* ---------- Who you're playing as ---------- */

.mm-lobby[b-o27ex3gfo4]  .mm-identity {
    margin-bottom: 32px;
}

.mm-identity-row[b-o27ex3gfo4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

.mm-avatar[b-o27ex3gfo4] {
    width: 36px;
    height: 36px;
    box-shadow: 0 0 16px color-mix(in srgb, var(--nx-accent) 40%, transparent);
}

.mm-you[b-o27ex3gfo4] {
    color: var(--nx-text);
}

.mm-lobby[b-o27ex3gfo4]  .mm-name-field {
    flex: 1 1 220px;
    max-width: 320px;
}

/* ---------- Open games ---------- */

.mm-section-head[b-o27ex3gfo4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.mm-section-title[b-o27ex3gfo4] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--nx-font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nx-text-dim);
}

/* The list is pushed live over SignalR, so it gets an on-air light. */
.mm-live-dot[b-o27ex3gfo4] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nx-lime);
    box-shadow: 0 0 10px var(--nx-lime);
}

@media (prefers-reduced-motion: no-preference) {
    .mm-live-dot[b-o27ex3gfo4] {
        animation: mm-live-b-o27ex3gfo4 2s ease-in-out infinite;
    }
}

@keyframes mm-live-b-o27ex3gfo4 {
    0%, 100% { opacity: 1; box-shadow: 0 0 10px var(--nx-lime); }
    50% { opacity: 0.45; box-shadow: 0 0 3px var(--nx-lime); }
}

.mm-lobby[b-o27ex3gfo4]  .mm-tile {
    height: 100%;
}

.mm-tile-body[b-o27ex3gfo4] {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* A little stack of two face-down cards that fans out when you hover the tile. */
.mm-tile-cards[b-o27ex3gfo4] {
    position: relative;
    flex: none;
    width: 46px;
    height: 50px;
}

.mm-tile-card[b-o27ex3gfo4] {
    position: absolute;
    top: 4px;
    left: 8px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 40px;
    border: 1px solid color-mix(in srgb, var(--nx-accent) 50%, transparent);
    border-radius: 6px;
    font-family: var(--nx-font-mono);
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--nx-accent);
    text-shadow: 0 0 8px var(--nx-accent);
    background:
        repeating-linear-gradient(45deg, color-mix(in srgb, var(--nx-accent) 8%, transparent) 0 3px, transparent 3px 7px),
        linear-gradient(150deg,
            color-mix(in srgb, var(--nx-accent) 24%, var(--nx-surface-solid)),
            color-mix(in srgb, var(--nx-accent-2) 14%, var(--nx-surface-solid)));
    box-shadow: 0 0 12px color-mix(in srgb, var(--nx-accent) 25%, transparent);
    transition: rotate 0.35s var(--nx-ease), translate 0.35s var(--nx-ease);
}

.mm-tile-card-back[b-o27ex3gfo4] {
    rotate: -10deg;
    translate: -5px 0;
    opacity: 0.75;
}

.mm-tile-card-front[b-o27ex3gfo4] {
    rotate: 8deg;
    translate: 5px 0;
}

.mm-tile-body:hover .mm-tile-card-back[b-o27ex3gfo4] {
    rotate: -18deg;
    translate: -9px -2px;
}

.mm-tile-body:hover .mm-tile-card-front[b-o27ex3gfo4] {
    rotate: 16deg;
    translate: 9px -2px;
}

@media (prefers-reduced-motion: reduce) {
    .mm-tile-card[b-o27ex3gfo4] {
        transition: none;
    }
}

.mm-tile-text[b-o27ex3gfo4] {
    flex: 1;
    min-width: 0;
}

.mm-lobby .mm-tile-title[b-o27ex3gfo4] {
    margin: 0 0 2px;
    overflow: hidden;
    font-size: 1.05rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mm-tile-meta[b-o27ex3gfo4] {
    margin: 0;
    font-size: 0.88rem;
    color: var(--nx-text-dim);
}

@media (max-width: 420px) {
    .mm-tile-cards[b-o27ex3gfo4] {
        display: none;
    }
}
/* /Components/Pages/Games/MemoryMatch/MemoryMatchPlay.razor.rz.scp.css */
/* Player colors match the matched-card colors in MemoryMatchBoard.razor.css, so players can tell at a
   glance which color on the board belongs to which name here. */
.mm-play[b-fm5h3zbfdh] {
    --mm-p1: var(--nx-green);
    --mm-p2: #fbbf24;

    max-width: 640px;
    margin: 0 auto;
}

[data-theme="light"] .mm-play[b-fm5h3zbfdh] {
    --mm-p2: #b45309;
}

/* ---------- Scoreboard ---------- */

.mm-play[b-fm5h3zbfdh]  .mm-scoreboard {
    margin-bottom: 14px;
}

.mm-score-grid[b-fm5h3zbfdh] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.mm-player[b-fm5h3zbfdh] {
    --_c: var(--mm-p1);

    min-width: 0;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--nx-radius-sm);
    transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
}

.mm-player-p2[b-fm5h3zbfdh] {
    --_c: var(--mm-p2);
}

/* Whoever's flipping gets a seat lit up in their own color. */
.mm-player.is-turn[b-fm5h3zbfdh] {
    border-color: color-mix(in srgb, var(--_c) 55%, transparent);
    background: color-mix(in srgb, var(--_c) 8%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--_c) 20%, transparent);
}

.mm-player-right[b-fm5h3zbfdh] {
    text-align: right;
}

.mm-player-id[b-fm5h3zbfdh] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.mm-player-right .mm-player-id[b-fm5h3zbfdh] {
    justify-content: flex-end;
}

.mm-player-name[b-fm5h3zbfdh] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--nx-text);
}

.mm-player-dot[b-fm5h3zbfdh] {
    display: inline-block;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.mm-player-dot-p1[b-fm5h3zbfdh] {
    background: var(--mm-p1);
    box-shadow: 0 0 10px var(--mm-p1);
}

.mm-player-dot-p2[b-fm5h3zbfdh] {
    background: var(--mm-p2);
    box-shadow: 0 0 10px var(--mm-p2);
}

.mm-score[b-fm5h3zbfdh] {
    margin-top: 4px;
    font-family: var(--nx-font-mono);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--nx-text);
}

.mm-score-center[b-fm5h3zbfdh] {
    text-align: center;
}

/* ---------- Status line ---------- */

.mm-status[b-fm5h3zbfdh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 2.25rem;
    font-size: 1rem;
    text-align: center;
    color: var(--nx-text);
}

.mm-prompt[b-fm5h3zbfdh] {
    color: var(--nx-accent);
    text-shadow: 0 0 10px var(--nx-accent);
}

.mm-caret[b-fm5h3zbfdh] {
    display: inline-block;
    width: 0.55em;
    height: 1.1em;
    background: var(--nx-accent);
    box-shadow: 0 0 8px var(--nx-accent);
}

@media (prefers-reduced-motion: no-preference) {
    .mm-caret[b-fm5h3zbfdh] {
        animation: mm-blink-b-fm5h3zbfdh 1.1s steps(1, end) infinite;
    }
}

@keyframes mm-blink-b-fm5h3zbfdh {
    50% { opacity: 0; }
}

/* ---------- Actions ---------- */

.mm-actions[b-fm5h3zbfdh] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

@media (max-width: 480px) {
    .mm-player[b-fm5h3zbfdh] {
        padding: 8px;
    }

    .mm-score[b-fm5h3zbfdh] {
        font-size: 1.6rem;
    }
}
/* /Components/Pages/Games/MemoryMatch/MemoryMatchSolo.razor.rz.scp.css */
.mm-solo[b-d3bp8u19qy] {
    max-width: 640px;
    margin: 0 auto;
}

/* ---------- Stats strip ---------- */

.mm-solo[b-d3bp8u19qy]  .mm-stats {
    margin-bottom: 14px;
}

.mm-stat-grid[b-d3bp8u19qy] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 12px;
}

.mm-stat[b-d3bp8u19qy] {
    min-width: 0;
}

.mm-stat-center[b-d3bp8u19qy] {
    text-align: center;
}

.mm-stat-right[b-d3bp8u19qy] {
    text-align: right;
}

.mm-stat-value[b-d3bp8u19qy] {
    margin-top: 4px;
    font-family: var(--nx-font-mono);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--nx-text);
    font-variant-numeric: tabular-nums;
}

.mm-stat-of[b-d3bp8u19qy] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--nx-text-faint);
}

.mm-progress[b-d3bp8u19qy] {
    height: 4px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--nx-accent) 12%, transparent);
}

.mm-progress > span[b-d3bp8u19qy] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--nx-cyan), var(--nx-green));
    box-shadow: 0 0 10px var(--nx-accent);
    transition: width 0.5s var(--nx-ease);
}

@media (prefers-reduced-motion: reduce) {
    .mm-progress > span[b-d3bp8u19qy] {
        transition: none;
    }
}

/* ---------- Actions ---------- */

.mm-actions[b-d3bp8u19qy] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

@media (max-width: 480px) {
    .mm-stat-value[b-d3bp8u19qy] {
        font-size: 1.4rem;
    }
}
/* /Components/Pages/Games/TicTacToe/CreateSessionForm.razor.rz.scp.css */
.ttt-form[b-au9why3lvw] {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.ttt-form-icon[b-au9why3lvw] {
    margin-right: 8px;
    color: var(--nx-accent);
}

/* AI-only settings hang off a glowing rail so it's clear they belong to the "Play against AI" choice. */
.ttt-form-sub[b-au9why3lvw] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 16px;
    border-left: 2px solid color-mix(in srgb, var(--nx-accent) 45%, transparent);
    box-shadow: -6px 0 14px -10px var(--nx-accent);
}

@media (prefers-reduced-motion: no-preference) {
    .ttt-form-sub[b-au9why3lvw] {
        animation: ttt-form-in-b-au9why3lvw 0.3s var(--nx-ease) both;
    }
}

@keyframes ttt-form-in-b-au9why3lvw {
    from { opacity: 0; translate: 0 -6px; }
}

.ttt-form-actions[b-au9why3lvw] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}
/* /Components/Pages/Games/TicTacToe/TicTacToeBoard.razor.rz.scp.css */
/* Neon tic-tac-toe board: a glass panel of glowing tiles, X drawn in cyan and O in amber. The two
   accents sit on opposite sides of the color wheel, and X/O differ in shape too, so the marks stay
   easy to tell apart in either theme and without relying on color alone. */

.ttt-board[b-vvoua3wfo8] {
    --ttt-x: var(--nx-cyan);
    --ttt-o: var(--nx-amber);
    --ttt-win: var(--nx-lime);
    --ttt-pad: 12px;

    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    padding: var(--ttt-pad);
    border: 1px solid var(--nx-border-strong);
    border-radius: calc(var(--nx-radius) + 6px);
    background:
        radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--nx-accent) 12%, transparent), transparent 70%),
        var(--nx-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--nx-shadow), 0 0 70px color-mix(in srgb, var(--nx-accent) 12%, transparent);
}

.ttt-cell[b-vvoua3wfo8] {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--nx-text);
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--nx-accent) 6%, transparent), transparent 60%),
        color-mix(in srgb, var(--nx-surface-solid) 80%, transparent);
    border: 1px solid var(--nx-border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.25s, background-color 0.2s, transform 0.15s var(--nx-ease);
}

.ttt-cell:not(:disabled):hover[b-vvoua3wfo8] {
    border-color: var(--nx-accent);
    box-shadow:
        inset 0 0 22px color-mix(in srgb, var(--nx-accent) 18%, transparent),
        0 0 18px color-mix(in srgb, var(--nx-accent) 28%, transparent);
    transform: translateY(-2px);
}

.ttt-cell:not(:disabled):active[b-vvoua3wfo8] {
    transform: scale(0.97);
}

.ttt-cell:focus-visible[b-vvoua3wfo8] {
    outline: 2px solid var(--nx-accent);
    outline-offset: 2px;
}

.ttt-cell:disabled[b-vvoua3wfo8] {
    cursor: default;
}

/* ---------- Marks ---------- */

.ttt-mark[b-vvoua3wfo8] {
    width: 72%;
    height: 72%;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 11;
    stroke-linecap: round;
    transition: opacity 0.3s;
}

.ttt-mark-x[b-vvoua3wfo8] {
    color: var(--ttt-x);
    filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 14px color-mix(in srgb, var(--ttt-x) 60%, transparent));
}

.ttt-mark-o[b-vvoua3wfo8] {
    color: var(--ttt-o);
    filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 14px color-mix(in srgb, var(--ttt-o) 60%, transparent));
}

/* Each stroke draws itself in when the mark lands (pathLength="1" normalizes the dash math). */
.ttt-stroke[b-vvoua3wfo8] {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .ttt-stroke[b-vvoua3wfo8] {
        animation: ttt-draw-b-vvoua3wfo8 0.32s var(--nx-ease) both;
    }

    .ttt-stroke-2[b-vvoua3wfo8] {
        animation-delay: 0.14s;
    }

    .ttt-mark-o .ttt-stroke[b-vvoua3wfo8] {
        animation-duration: 0.45s;
    }
}

@keyframes ttt-draw-b-vvoua3wfo8 {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

/* ---------- Winning line ---------- */

.ttt-cell-winning[b-vvoua3wfo8] {
    border-color: var(--ttt-win);
    background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ttt-win) 22%, transparent), transparent 75%),
        color-mix(in srgb, var(--nx-surface-solid) 80%, transparent);
    box-shadow:
        inset 0 0 24px color-mix(in srgb, var(--ttt-win) 22%, transparent),
        0 0 26px color-mix(in srgb, var(--ttt-win) 35%, transparent);
}

/* Once a round is won, the losing marks step back so the winning three pop. */
.ttt-board-won .ttt-cell:not(.ttt-cell-winning) .ttt-mark[b-vvoua3wfo8] {
    opacity: 0.28;
}

.ttt-winline[b-vvoua3wfo8] {
    position: absolute;
    inset: var(--ttt-pad);
    width: calc(100% - 2 * var(--ttt-pad));
    height: calc(100% - 2 * var(--ttt-pad));
    overflow: visible;
    pointer-events: none;
}

.ttt-winline line[b-vvoua3wfo8] {
    stroke: var(--ttt-win);
    stroke-width: 7;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 6px var(--ttt-win)) drop-shadow(0 0 18px color-mix(in srgb, var(--ttt-win) 60%, transparent));
}

@media (prefers-reduced-motion: no-preference) {
    .ttt-cell-winning[b-vvoua3wfo8] {
        animation: ttt-win-pulse-b-vvoua3wfo8 1.6s ease-in-out 0.4s infinite;
    }

    .ttt-winline line[b-vvoua3wfo8] {
        animation: ttt-draw-b-vvoua3wfo8 0.5s var(--nx-ease) 0.15s both;
    }
}

@keyframes ttt-win-pulse-b-vvoua3wfo8 {
    0%, 100% { box-shadow: inset 0 0 24px color-mix(in srgb, var(--ttt-win) 22%, transparent), 0 0 20px color-mix(in srgb, var(--ttt-win) 28%, transparent); }
    50% { box-shadow: inset 0 0 30px color-mix(in srgb, var(--ttt-win) 32%, transparent), 0 0 38px color-mix(in srgb, var(--ttt-win) 50%, transparent); }
}

@media (max-width: 420px) {
    .ttt-board[b-vvoua3wfo8] {
        --ttt-pad: 8px;
        gap: 7px;
    }

    .ttt-mark[b-vvoua3wfo8] {
        stroke-width: 12;
    }
}
/* /Components/Pages/Games/TicTacToe/TicTacToeLobby.razor.rz.scp.css */
.ttt-lobby[b-91tg8f8qr9] {
    max-width: 960px;
    margin: 0 auto;
}

/* ---------- Who you're playing as ---------- */

.ttt-lobby[b-91tg8f8qr9]  .ttt-identity {
    margin-bottom: 32px;
}

.ttt-identity-row[b-91tg8f8qr9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

.ttt-avatar[b-91tg8f8qr9] {
    width: 36px;
    height: 36px;
    box-shadow: 0 0 16px color-mix(in srgb, var(--nx-accent) 40%, transparent);
}

.ttt-you[b-91tg8f8qr9] {
    color: var(--nx-text);
}

.ttt-lobby[b-91tg8f8qr9]  .ttt-name-field {
    flex: 1 1 220px;
    max-width: 320px;
}

/* ---------- Open games ---------- */

.ttt-section-head[b-91tg8f8qr9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.ttt-section-title[b-91tg8f8qr9] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--nx-font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nx-text-dim);
}

/* The list is pushed live over SignalR, so it gets an on-air light. */
.ttt-live-dot[b-91tg8f8qr9] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nx-lime);
    box-shadow: 0 0 10px var(--nx-lime);
}

@media (prefers-reduced-motion: no-preference) {
    .ttt-live-dot[b-91tg8f8qr9] {
        animation: ttt-live-b-91tg8f8qr9 2s ease-in-out infinite;
    }
}

@keyframes ttt-live-b-91tg8f8qr9 {
    0%, 100% { opacity: 1; box-shadow: 0 0 10px var(--nx-lime); }
    50% { opacity: 0.45; box-shadow: 0 0 3px var(--nx-lime); }
}

.ttt-lobby[b-91tg8f8qr9]  .ttt-tile {
    height: 100%;
}

.ttt-tile-body[b-91tg8f8qr9] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ttt-tile-icon[b-91tg8f8qr9] {
    display: grid;
    flex: none;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid color-mix(in srgb, var(--nx-accent) 40%, transparent);
    border-radius: 12px;
    font-size: 1.3rem;
    color: var(--nx-accent);
    background: color-mix(in srgb, var(--nx-accent) 10%, transparent);
    text-shadow: 0 0 12px var(--nx-accent);
    box-shadow: inset 0 0 14px color-mix(in srgb, var(--nx-accent) 16%, transparent);
}

.ttt-tile-text[b-91tg8f8qr9] {
    flex: 1;
    min-width: 0;
}

.ttt-lobby .ttt-tile-title[b-91tg8f8qr9] {
    margin: 0 0 2px;
    overflow: hidden;
    font-size: 1.05rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ttt-tile-meta[b-91tg8f8qr9] {
    margin: 0;
    font-size: 0.88rem;
    color: var(--nx-text-dim);
}

@media (max-width: 420px) {
    .ttt-tile-icon[b-91tg8f8qr9] {
        display: none;
    }
}
/* /Components/Pages/Games/TicTacToe/TicTacToePlay.razor.rz.scp.css */
.ttt-play[b-ooo368m5i8] {
    max-width: 640px;
    margin: 0 auto;
}

/* ---------- Scoreboard ---------- */

.ttt-play[b-ooo368m5i8]  .ttt-scoreboard {
    margin-bottom: 18px;
}

.ttt-score-grid[b-ooo368m5i8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.ttt-player[b-ooo368m5i8] {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--nx-radius-sm);
    transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
}

/* Whoever's move it is gets a lit-up seat. */
.ttt-player.is-turn[b-ooo368m5i8] {
    border-color: color-mix(in srgb, var(--nx-accent) 50%, transparent);
    background: color-mix(in srgb, var(--nx-accent) 7%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--nx-accent) 18%, transparent);
}

.ttt-player-right[b-ooo368m5i8] {
    text-align: right;
}

.ttt-player-id[b-ooo368m5i8] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ttt-player-right .ttt-player-id[b-ooo368m5i8] {
    justify-content: flex-end;
}

.ttt-player-name[b-ooo368m5i8] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--nx-text);
}

.ttt-score[b-ooo368m5i8] {
    margin-top: 4px;
    font-family: var(--nx-font-mono);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--nx-text);
}

.ttt-draws[b-ooo368m5i8] {
    text-align: center;
}

.ttt-score-dim[b-ooo368m5i8] {
    color: var(--nx-text-dim);
}

/* Mark badges next to each name - same cyan X / amber O as the board, so a player's symbol is
   obvious at a glance. */
.ttt-mark-badge[b-ooo368m5i8] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-family: var(--nx-font-mono);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--nx-text-faint);
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.ttt-mark-badge.ttt-mark-x[b-ooo368m5i8],
.ttt-mark-badge.ttt-mark-o[b-ooo368m5i8] {
    text-shadow: 0 0 8px currentColor;
    box-shadow: 0 0 12px color-mix(in srgb, currentColor 40%, transparent);
}

.ttt-mark-badge.ttt-mark-x[b-ooo368m5i8] {
    color: var(--nx-cyan);
}

.ttt-mark-badge.ttt-mark-o[b-ooo368m5i8] {
    color: var(--nx-amber);
}

/* ---------- Status line ---------- */

.ttt-status[b-ooo368m5i8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 2.5rem;
    margin: 4px 0 16px;
    font-size: 1rem;
    text-align: center;
    color: var(--nx-text);
}

.ttt-prompt[b-ooo368m5i8] {
    color: var(--nx-accent);
    text-shadow: 0 0 10px var(--nx-accent);
}

.ttt-caret[b-ooo368m5i8] {
    display: inline-block;
    width: 0.55em;
    height: 1.1em;
    background: var(--nx-accent);
    box-shadow: 0 0 8px var(--nx-accent);
}

@media (prefers-reduced-motion: no-preference) {
    .ttt-caret[b-ooo368m5i8] {
        animation: ttt-blink-b-ooo368m5i8 1.1s steps(1, end) infinite;
    }
}

@keyframes ttt-blink-b-ooo368m5i8 {
    50% { opacity: 0; }
}

/* ---------- Actions ---------- */

.ttt-actions[b-ooo368m5i8] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

@media (max-width: 480px) {
    .ttt-player[b-ooo368m5i8] {
        padding: 8px;
    }

    .ttt-score[b-ooo368m5i8] {
        font-size: 1.6rem;
    }
}
/* /Components/Pages/Jokes/JokeHistory.razor.rz.scp.css */
.archive-page[b-ctppy4wi2s] {
    max-width: 820px;
    margin: 0 auto;
    padding-bottom: 48px;
}

/* ---------- Timeline ---------- */

.archive-timeline[b-ctppy4wi2s] {
    position: relative;
    margin: 0;
    padding: 0 0 0 32px;
    list-style: none;
}

/* The rail: fades in at the top and out at the bottom. */
.archive-timeline[b-ctppy4wi2s]::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 9px;
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--nx-accent) 6%, var(--nx-accent-2) 70%, transparent);
    opacity: 0.55;
}

.archive-entry[b-ctppy4wi2s] {
    position: relative;
}

.archive-entry + .archive-entry[b-ctppy4wi2s] {
    margin-top: 16px;
}

.archive-node[b-ctppy4wi2s] {
    position: absolute;
    top: 24px;
    left: -29px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--nx-accent);
    background: var(--nx-bg);
    box-shadow: 0 0 12px color-mix(in srgb, var(--nx-accent) 60%, transparent);
}

.archive-entry:first-child .archive-node[b-ctppy4wi2s] {
    background: var(--nx-amber);
    border-color: var(--nx-amber);
    box-shadow: 0 0 14px var(--nx-amber);
}

.archive-card[b-ctppy4wi2s] {
    transition: border-color 0.25s, box-shadow 0.25s;
}

.archive-card:hover[b-ctppy4wi2s] {
    border-color: var(--nx-border-strong);
}

.archive-date[b-ctppy4wi2s] {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nx-accent);
}

.archive-setup[b-ctppy4wi2s] {
    margin: 8px 0 12px;
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--nx-text);
}

/* ---------- Reveal ---------- */

.archive-reveal > summary[b-ctppy4wi2s] {
    list-style: none;
    display: inline-flex;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    font-size: 0.8rem;
    color: var(--nx-amber);
    transition: text-shadow 0.2s;
}

.archive-reveal > summary[b-ctppy4wi2s]::-webkit-details-marker { display: none; }

.archive-reveal > summary:hover[b-ctppy4wi2s] { text-shadow: 0 0 10px var(--nx-amber); }

.archive-reveal[open] > summary[b-ctppy4wi2s] { opacity: 0.55; }

.archive-prompt[b-ctppy4wi2s] {
    display: inline-block;
    transition: transform 0.2s var(--nx-ease);
}

.archive-reveal[open] .archive-prompt[b-ctppy4wi2s] { transform: rotate(90deg); }

.archive-punchline[b-ctppy4wi2s] {
    margin: 10px 0 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--nx-amber);
}

@media (prefers-reduced-motion: no-preference) {
    .archive-reveal[open] .archive-punchline[b-ctppy4wi2s] {
        animation: archive-pop-b-ctppy4wi2s 0.45s var(--nx-ease);
    }
}

@media (prefers-reduced-motion: reduce) {
    .archive-prompt[b-ctppy4wi2s] { transition: none; }
}

@keyframes archive-pop-b-ctppy4wi2s {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

/* ---------- Pager ---------- */

.archive-pager[b-ctppy4wi2s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 28px;
}

.archive-page-count[b-ctppy4wi2s] {
    font-size: 0.8rem;
    color: var(--nx-text-faint);
}
/* /Components/Pages/Jokes/JokeMaker.razor.rz.scp.css */
.maker-page[b-9s0s8lljvd] {
    padding-bottom: 48px;
}

.maker-card[b-9s0s8lljvd] {
    height: 100%;
    overflow: hidden;
}

.maker-card--ai[b-9s0s8lljvd] {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--nx-accent-2) 16%, transparent), transparent 55%),
        var(--nx-surface);
}

.maker-card--dad[b-9s0s8lljvd] {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--nx-amber) 16%, transparent), transparent 55%),
        var(--nx-surface);
}

.maker-card--ai .nx-card-title .bi[b-9s0s8lljvd] { color: var(--nx-accent-2); }
.maker-card--dad .nx-card-title .bi[b-9s0s8lljvd] { color: var(--nx-amber); }

.maker-badge[b-9s0s8lljvd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    padding: 3px 10px;
    border: 1px solid var(--nx-border-strong);
    border-radius: 999px;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nx-text-faint);
}

.maker-copy[b-9s0s8lljvd] {
    margin: 10px 0 18px;
    line-height: 1.6;
    color: var(--nx-text-dim);
}

.maker-row[b-9s0s8lljvd] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.maker-row[b-9s0s8lljvd]  .nx-field {
    min-width: 200px;
}

/* ---------- "Thinking" line while the agent runs ---------- */

.maker-thinking[b-9s0s8lljvd] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    font-size: 0.8rem;
    color: var(--nx-text-faint);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.maker-thinking-dot[b-9s0s8lljvd] {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nx-accent-2);
    box-shadow: 0 0 10px var(--nx-accent-2);
}

/* ---------- AI result ---------- */

.maker-result[b-9s0s8lljvd] {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--nx-accent-2) 40%, transparent);
    border-left: 3px solid var(--nx-accent-2);
    border-radius: var(--nx-radius-sm);
    background: color-mix(in srgb, var(--nx-accent-2) 6%, transparent);
}

.maker-setup[b-9s0s8lljvd] {
    margin: 12px 0 10px;
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--nx-text);
}

.maker-reveal > summary[b-9s0s8lljvd] {
    list-style: none;
    display: inline-flex;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    font-size: 0.8rem;
    color: var(--nx-amber);
    transition: text-shadow 0.2s;
}

.maker-reveal > summary[b-9s0s8lljvd]::-webkit-details-marker { display: none; }
.maker-reveal > summary:hover[b-9s0s8lljvd] { text-shadow: 0 0 10px var(--nx-amber); }
.maker-reveal[open] > summary[b-9s0s8lljvd] { opacity: 0.55; }

.maker-prompt[b-9s0s8lljvd] { display: inline-block; }
.maker-reveal[open] .maker-prompt[b-9s0s8lljvd] { transform: rotate(90deg); }

.maker-punchline[b-9s0s8lljvd] {
    margin: 10px 0 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--nx-amber);
}

/* ---------- Dad joke terminal ---------- */

.maker-terminal[b-9s0s8lljvd] {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    background: color-mix(in srgb, var(--nx-bg) 70%, transparent);
    font-size: 0.85rem;
}

.maker-terminal-cmd[b-9s0s8lljvd] {
    color: var(--nx-text-faint);
    overflow-wrap: anywhere;
}

.maker-ps[b-9s0s8lljvd] { color: var(--nx-accent); }

.maker-terminal-out[b-9s0s8lljvd] {
    margin: 10px 0 0;
    font-family: var(--nx-font-sans);
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--nx-text);
}

/* ---------- Motion (opt-in) ---------- */

@media (prefers-reduced-motion: no-preference) {
    .maker-thinking-dot[b-9s0s8lljvd] { animation: maker-pulse-b-9s0s8lljvd 1s ease-in-out infinite; }
    .maker-result[b-9s0s8lljvd],
    .maker-terminal[b-9s0s8lljvd] { animation: maker-rise-b-9s0s8lljvd 0.45s var(--nx-ease) both; }
    .maker-reveal[open] .maker-punchline[b-9s0s8lljvd] { animation: maker-rise-b-9s0s8lljvd 0.45s var(--nx-ease) both; }
    .maker-prompt[b-9s0s8lljvd] { transition: transform 0.2s var(--nx-ease); }
}

@keyframes maker-pulse-b-9s0s8lljvd {
    0%, 100% { opacity: 0.35; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.15); }
}

@keyframes maker-rise-b-9s0s8lljvd {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
/* /Components/Pages/Jokes/JokeOfTheDayPage.razor.rz.scp.css */
.joke-page[b-bpbzg5mia1] {
    max-width: 860px;
    margin: 0 auto;
    padding-bottom: 48px;
}

/* ---------- The stage: an editor window with the joke inside ---------- */

.joke-stage[b-bpbzg5mia1] {
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--nx-amber) 18%, transparent), transparent 55%),
        radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--nx-accent) 12%, transparent), transparent 50%),
        var(--nx-surface);
    box-shadow: var(--nx-shadow), 0 0 80px color-mix(in srgb, var(--nx-amber) 10%, transparent);
}

/* Visual Studio-style title strip: a file tab on the left, Windows window buttons on the right. */
.joke-stage-bar[b-bpbzg5mia1] {
    display: flex;
    align-items: stretch;
    gap: 14px;
    height: 38px;
    padding: 0 0 0 10px;
    border-bottom: 1px solid var(--nx-border);
    background: color-mix(in srgb, var(--nx-bg) 55%, transparent);
    font-size: 0.75rem;
    color: var(--nx-text-faint);
}

.joke-stage-file[b-bpbzg5mia1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-end;
    height: 30px;
    padding: 0 8px 0 12px;
    border: 1px solid var(--nx-border);
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    background: var(--nx-surface-solid);
    box-shadow: inset 0 2px 0 var(--nx-amber);
    color: var(--nx-text);
}

.joke-stage-file .bi-filetype-cs[b-bpbzg5mia1] { color: var(--nx-accent-2); }

.joke-stage-close[b-bpbzg5mia1] {
    margin-left: 10px;
    color: var(--nx-text-faint);
}

.joke-stage-date[b-bpbzg5mia1] {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}

.joke-stage-controls[b-bpbzg5mia1] {
    display: flex;
}

.joke-stage-controls .bi[b-bpbzg5mia1] {
    display: grid;
    place-items: center;
    width: 42px;
    color: var(--nx-text-dim);
}

.joke-stage-controls .bi-square[b-bpbzg5mia1] { font-size: 0.65rem; }

.joke-stage:hover .joke-stage-controls .bi-x-lg[b-bpbzg5mia1] {
    background: #c42b1c;
    color: #fff;
}

@media (max-width: 480px) {
    .joke-stage-controls .bi[b-bpbzg5mia1] { width: 32px; }
}

.joke-stage-body[b-bpbzg5mia1] {
    position: relative;
    padding: clamp(28px, 6vw, 56px) clamp(20px, 6vw, 56px) clamp(28px, 5vw, 44px);
}

.joke-quote[b-bpbzg5mia1] {
    position: absolute;
    top: clamp(4px, 2vw, 16px);
    right: clamp(12px, 4vw, 36px);
    font-size: clamp(5rem, 14vw, 9rem);
    line-height: 1;
    color: var(--nx-amber);
    opacity: 0.14;
    pointer-events: none;
}

.joke-setup[b-bpbzg5mia1] {
    position: relative;
    margin: 0 0 32px;
    max-width: 30ch;
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--nx-text);
}

/* ---------- The reveal ---------- */

.joke-reveal > summary[b-bpbzg5mia1] {
    list-style: none;
    display: inline-flex;
    cursor: pointer;
    user-select: none;
    border-radius: 999px;
}

.joke-reveal > summary[b-bpbzg5mia1]::-webkit-details-marker { display: none; }

.joke-reveal-closed[b-bpbzg5mia1] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border: 1px solid color-mix(in srgb, var(--nx-amber) 55%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--nx-amber) 10%, transparent);
    font-size: 0.95rem;
    color: var(--nx-text);
    transition: box-shadow 0.25s, background 0.25s, transform 0.25s var(--nx-ease);
}

.joke-reveal > summary:hover .joke-reveal-closed[b-bpbzg5mia1],
.joke-reveal > summary:focus-visible .joke-reveal-closed[b-bpbzg5mia1] {
    background: color-mix(in srgb, var(--nx-amber) 18%, transparent);
    box-shadow: 0 0 28px color-mix(in srgb, var(--nx-amber) 35%, transparent);
    transform: translateY(-2px);
}

.joke-reveal > summary:focus-visible[b-bpbzg5mia1] {
    outline: 2px solid var(--nx-amber);
    outline-offset: 4px;
}

.joke-prompt[b-bpbzg5mia1] {
    color: var(--nx-amber);
    text-shadow: 0 0 10px var(--nx-amber);
}

.joke-cursor[b-bpbzg5mia1] {
    display: inline-block;
    width: 8px;
    height: 1.1em;
    background: var(--nx-amber);
    box-shadow: 0 0 8px var(--nx-amber);
}

.joke-hint[b-bpbzg5mia1] {
    margin-left: 6px;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nx-text-faint);
}

.joke-reveal-open[b-bpbzg5mia1] {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--nx-text-faint);
}

.joke-reveal-open .bi[b-bpbzg5mia1] { color: var(--nx-lime); }

.joke-reveal[open] .joke-reveal-closed[b-bpbzg5mia1] { display: none; }
.joke-reveal[open] .joke-reveal-open[b-bpbzg5mia1] { display: inline-flex; }

.joke-punch[b-bpbzg5mia1] {
    position: relative;
    margin-top: 18px;
}

.joke-punchline[b-bpbzg5mia1] {
    position: relative;
    margin: 0;
    max-width: 32ch;
    font-size: clamp(1.5rem, 3.6vw, 2.3rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    background: linear-gradient(92deg, var(--nx-amber), var(--nx-lime));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.joke-rimshot[b-bpbzg5mia1] {
    display: inline-block;
    margin-top: 12px;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--nx-text-faint);
}

.joke-burst[b-bpbzg5mia1] {
    position: absolute;
    left: -40px;
    top: -60px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--nx-amber) 40%, transparent), transparent 65%);
    opacity: 0;
    pointer-events: none;
}

.joke-meta[b-bpbzg5mia1] {
    margin-top: 32px;
}

.joke-footnote[b-bpbzg5mia1] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 4px 0;
}

/* ---------- Motion (opt-in) ---------- */

@media (prefers-reduced-motion: no-preference) {
    .joke-cursor[b-bpbzg5mia1] { animation: joke-blink-b-bpbzg5mia1 1s step-end infinite; }

    .joke-reveal[open] .joke-punchline[b-bpbzg5mia1] {
        animation: joke-slam-b-bpbzg5mia1 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both;
    }

    .joke-reveal[open] .joke-burst[b-bpbzg5mia1] {
        animation: joke-burst-b-bpbzg5mia1 0.9s ease-out both;
    }

    .joke-reveal[open] .joke-rimshot[b-bpbzg5mia1] {
        animation: joke-rimshot-b-bpbzg5mia1 0.5s 0.55s var(--nx-ease) both;
    }

    .joke-reveal[open] .joke-reveal-open[b-bpbzg5mia1] {
        animation: joke-fade-b-bpbzg5mia1 0.4s ease both;
    }
}

@keyframes joke-blink-b-bpbzg5mia1 {
    50% { opacity: 0; }
}

@keyframes joke-slam-b-bpbzg5mia1 {
    from { opacity: 0; transform: translateY(14px) scale(0.9); filter: blur(6px); }
    to { opacity: 1; transform: none; filter: none; }
}

@keyframes joke-burst-b-bpbzg5mia1 {
    0% { opacity: 0; transform: scale(0.3); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.4); }
}

@keyframes joke-rimshot-b-bpbzg5mia1 {
    from { opacity: 0; letter-spacing: 0.6em; }
    to { opacity: 1; letter-spacing: 0.2em; }
}

@keyframes joke-fade-b-bpbzg5mia1 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 600px) {
    .joke-stage-date[b-bpbzg5mia1] { visibility: hidden; }
    .joke-hint[b-bpbzg5mia1] { display: none; }
}
/* /Components/Pages/Maps/CampgroundDetail.razor.rz.scp.css */
.camp-detail[b-6di2md0507] {
    padding-bottom: 48px;
}

.camp-crumbs[b-6di2md0507] {
    padding-top: 16px;
}

.camp-detail[b-6di2md0507]  .camp-header {
    padding-top: 12px;
    padding-bottom: 14px;
}

/* ---------- Fact strip under the title ---------- */

.camp-facts[b-6di2md0507] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}

.camp-fact[b-6di2md0507] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--nx-border);
    border-radius: 999px;
    background: var(--nx-surface);
    font-size: 0.88rem;
    color: var(--nx-text-dim);
}

.camp-fact .bi[b-6di2md0507] { color: var(--nx-accent); }

a.camp-fact[b-6di2md0507] { text-decoration: none; transition: border-color 0.2s, color 0.2s; }
a.camp-fact:hover[b-6di2md0507] { color: var(--nx-text); border-color: var(--nx-accent); }

/* ---------- Things to do nearby ---------- */

.camp-todo[b-6di2md0507] {
    margin-top: 40px;
}

.camp-todo-title[b-6di2md0507] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nx-text-dim);
}

.camp-todo-title span[b-6di2md0507] { color: var(--nx-accent); }

.camp-todo-title[b-6di2md0507]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--nx-border-strong), transparent);
}

.camp-todo-grid[b-6di2md0507] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

/* Each category gets its own accent via --cat. */
.camp-todo-card[b-6di2md0507] { --cat: var(--nx-accent); display: flex; flex-direction: column; gap: 8px; padding: 18px; }
.camp-todo--beach[b-6di2md0507] { --cat: var(--nx-cyan); }
.camp-todo--outdoors[b-6di2md0507] { --cat: var(--nx-green); }
.camp-todo--food[b-6di2md0507] { --cat: var(--nx-amber); }
.camp-todo--family[b-6di2md0507] { --cat: #fb7185; }
.camp-todo--sights[b-6di2md0507] { --cat: var(--nx-lime); }
.camp-todo--shopping[b-6di2md0507] { --cat: #38bdf8; }
.camp-todo--other[b-6di2md0507] { --cat: var(--nx-text-dim); }

.camp-todo-top[b-6di2md0507] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.camp-todo-cat[b-6di2md0507] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cat);
}

.camp-todo-cat .bi[b-6di2md0507] { font-size: 0.95rem; text-shadow: 0 0 10px color-mix(in srgb, var(--cat) 50%, transparent); }

.camp-todo-dist[b-6di2md0507] {
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--nx-border-strong);
    font-size: 0.68rem;
    color: var(--nx-text-faint);
}

.camp-todo-name[b-6di2md0507] {
    margin: 2px 0 0;
    font-size: 1.1rem;
    line-height: 1.3;
}

.camp-todo-desc[b-6di2md0507] {
    margin: 0;
    color: var(--nx-text-dim);
    font-size: 0.9rem;
    line-height: 1.55;
}

.camp-todo-links[b-6di2md0507] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: auto;
    padding-top: 6px;
    font-size: 0.75rem;
}

.camp-todo-links a[b-6di2md0507] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    position: relative;
    z-index: 1;
    color: var(--nx-text-dim);
    text-decoration: none;
}

.camp-todo-links a:hover[b-6di2md0507] { color: var(--cat); }

/* ---------- Cover picture ---------- */

.camp-cover[b-6di2md0507] {
    position: relative;
    margin: 0 0 20px;
    border-radius: var(--nx-radius);
    overflow: hidden;
    border: 1px solid var(--nx-border);
    box-shadow: var(--nx-shadow);
    aspect-ratio: 21 / 8;
}

.camp-cover img[b-6di2md0507] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (prefers-reduced-motion: no-preference) {
    .camp-cover img[b-6di2md0507] { animation: camp-cover-zoom-b-6di2md0507 16s ease-out both; }
}

@keyframes camp-cover-zoom-b-6di2md0507 {
    from { transform: scale(1.1); }
    to { transform: scale(1); }
}

.camp-cover figcaption[b-6di2md0507] {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(3, 5, 12, 0.7);
    color: #c8d3e3;
    font-size: 0.7rem;
}

@media (max-width: 640px) {
    .camp-cover[b-6di2md0507] { aspect-ratio: 16 / 9; }
}

.camp-fact--rating[b-6di2md0507] {
    padding-top: 3px;
    padding-bottom: 3px;
    border-color: color-mix(in srgb, var(--nx-amber) 45%, transparent);
    background: color-mix(in srgb, var(--nx-amber) 8%, transparent);
}

/* ---------- Map ---------- */

.camp-map-frame[b-6di2md0507] {
    padding: 6px;
    overflow: hidden;
    box-shadow: var(--nx-shadow), 0 0 60px color-mix(in srgb, var(--nx-accent) 12%, transparent);
}

.camp-map-frame[b-6di2md0507]::after { display: none; }

.camp-map-frame[b-6di2md0507]  .shark-map {
    border-radius: calc(var(--nx-radius) - 6px);
}

/* ---------- Cards ---------- */

.camp-notes[b-6di2md0507] {
    margin: 0;
    white-space: pre-line;
    line-height: 1.7;
    color: var(--nx-text);
}

.camp-detail[b-6di2md0507]  .camp-review {
    border-color: color-mix(in srgb, var(--nx-accent) 40%, transparent);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--nx-accent) 14%, transparent), transparent 60%),
        var(--nx-surface);
}

.camp-review-excerpt[b-6di2md0507] {
    margin: 0 0 16px;
    line-height: 1.6;
    color: var(--nx-text-dim);
}

.camp-address[b-6di2md0507] {
    margin: 0 0 8px;
    font-style: normal;
    white-space: pre-line;
    line-height: 1.6;
    color: var(--nx-text);
}

.camp-coords[b-6di2md0507] {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--nx-accent);
}

.camp-chips[b-6di2md0507] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ---------- Sites table ---------- */

.camp-site--stayed td[b-6di2md0507] {
    background: color-mix(in srgb, var(--nx-amber) 7%, transparent);
}

.camp-stayed-star[b-6di2md0507] {
    display: inline-block;
    margin-left: 6px;
    color: var(--nx-amber);
    text-shadow: 0 0 10px color-mix(in srgb, var(--nx-amber) 60%, transparent);
    cursor: help;
}
/* /Components/Pages/Maps/CampgroundIndex.razor.rz.scp.css */
.camp-page[b-wzlrpff1fm] {
    padding-bottom: 48px;
}

.camp-stat[b-wzlrpff1fm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--nx-border-strong);
    border-radius: 999px;
    background: var(--nx-surface);
    font-size: 0.78rem;
    color: var(--nx-text-dim);
}

.camp-stat .bi[b-wzlrpff1fm] { color: var(--nx-lime); text-shadow: 0 0 10px var(--nx-lime); }
.camp-stat strong[b-wzlrpff1fm] { color: var(--nx-text); }

/* ---------- Map ---------- */

.camp-map-frame[b-wzlrpff1fm] {
    padding: 6px;
    overflow: hidden;
    box-shadow: var(--nx-shadow), 0 0 60px color-mix(in srgb, var(--nx-accent) 12%, transparent);
}

/* The card's cursor spotlight would sit on top of the tiles; the map is busy enough already. */
.camp-map-frame[b-wzlrpff1fm]::after { display: none; }

.camp-map-frame[b-wzlrpff1fm]  .shark-map {
    border-radius: calc(var(--nx-radius) - 6px);
}

/* ---------- Filter ---------- */

.camp-toolbar[b-wzlrpff1fm] {
    margin: 24px 0;
}

.camp-toolbar[b-wzlrpff1fm]  .camp-filter {
    max-width: 520px;
}

.camp-filter-count[b-wzlrpff1fm] {
    flex: none;
    padding: 0 12px;
    font-size: 0.75rem;
    color: var(--nx-text-faint);
    white-space: nowrap;
}

/* ---------- Tiles ---------- */

/* ---------- Featured campground cards ---------- */

.camp-list[b-wzlrpff1fm] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.camp-card[b-wzlrpff1fm] {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.camp-card:hover[b-wzlrpff1fm] {
    border-color: color-mix(in srgb, var(--nx-accent) 45%, transparent);
    box-shadow: var(--nx-shadow), 0 0 40px color-mix(in srgb, var(--nx-accent) 14%, transparent);
}

/* Alternate the picture side down the list so it reads like a magazine spread. */
.camp-list > .camp-card:nth-child(even) .camp-card-media[b-wzlrpff1fm] { order: 2; }

.camp-card-media[b-wzlrpff1fm] {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--nx-green) 18%, transparent), transparent 60%),
        linear-gradient(color-mix(in srgb, var(--nx-green) 7%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(90deg, color-mix(in srgb, var(--nx-green) 7%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
        color-mix(in srgb, var(--nx-bg) 60%, transparent);
}

.camp-card-media img[b-wzlrpff1fm] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--nx-ease);
}

.camp-card:hover .camp-card-media img[b-wzlrpff1fm] { transform: scale(1.05); }

/* Placeholder sits underneath and shows when there's no picture (or it failed to load). */
.camp-card-placeholder[b-wzlrpff1fm] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--nx-text-faint);
    font-size: 0.75rem;
}

.camp-card-placeholder .bi[b-wzlrpff1fm] {
    font-size: 3rem;
    color: var(--nx-green);
    text-shadow: 0 0 24px color-mix(in srgb, var(--nx-green) 60%, transparent);
}

.camp-card-media:not(.is-empty) .camp-card-placeholder[b-wzlrpff1fm] { visibility: hidden; }

.camp-card-credit[b-wzlrpff1fm] {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(3, 5, 12, 0.7);
    color: #c8d3e3;
    font-size: 0.66rem;
}

.camp-card-body[b-wzlrpff1fm] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 26px;
    min-width: 0;
}

.camp-card-top[b-wzlrpff1fm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.camp-coords[b-wzlrpff1fm] {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--nx-accent);
}

.camp-card-weather[b-wzlrpff1fm] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--nx-amber) 40%, transparent);
    color: var(--nx-amber);
    letter-spacing: 0.02em;
    animation: camp-weather-in-b-wzlrpff1fm 0.4s var(--nx-ease);
}

@keyframes camp-weather-in-b-wzlrpff1fm {
    from { opacity: 0; translate: 0 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .camp-card-weather[b-wzlrpff1fm] { animation: none; }
}

.camp-card-title[b-wzlrpff1fm] {
    margin: 0;
    font-size: 1.55rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.camp-card-title a[b-wzlrpff1fm] {
    color: var(--nx-text);
    text-decoration: none;
    transition: color 0.2s, text-shadow 0.2s;
}

.camp-card-title a:hover[b-wzlrpff1fm] {
    color: var(--nx-accent);
    text-shadow: 0 0 18px color-mix(in srgb, var(--nx-accent) 45%, transparent);
}

.camp-card-stayed[b-wzlrpff1fm] { display: inline-flex; gap: 6px; }

.camp-card-blurb[b-wzlrpff1fm] {
    margin: 0;
    color: var(--nx-text-dim);
    line-height: 1.65;
}

.camp-card-info[b-wzlrpff1fm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px 0 0;
    padding: 12px 0 0;
    border-top: 1px dashed var(--nx-border);
    list-style: none;
    font-size: 0.9rem;
}

.camp-card-info li[b-wzlrpff1fm] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.camp-card-info .bi[b-wzlrpff1fm] {
    flex: none;
    color: var(--nx-accent);
}

.camp-card-info a[b-wzlrpff1fm] {
    color: var(--nx-text);
    text-decoration-color: color-mix(in srgb, var(--nx-accent) 40%, transparent);
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.camp-card-info a:hover[b-wzlrpff1fm] { color: var(--nx-accent); }

.camp-card-directions[b-wzlrpff1fm] {
    margin-left: 6px;
    font-family: var(--nx-font-mono);
    font-size: 0.72rem;
    white-space: nowrap;
}

.camp-card-chips[b-wzlrpff1fm] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.camp-card-actions[b-wzlrpff1fm] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
}

@media (max-width: 760px) {
    .camp-card[b-wzlrpff1fm] { grid-template-columns: minmax(0, 1fr); }
    .camp-list > .camp-card:nth-child(even) .camp-card-media[b-wzlrpff1fm] { order: 0; }
    .camp-card-media[b-wzlrpff1fm] { min-height: 0; aspect-ratio: 16 / 9; }
    .camp-card-body[b-wzlrpff1fm] { padding: 18px 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .camp-card-media img[b-wzlrpff1fm] { transition: none; }
    .camp-card:hover .camp-card-media img[b-wzlrpff1fm] { transform: none; }
}
/* /Components/Pages/Maps/PhotoMap.razor.rz.scp.css */
.photo-page[b-q975tlgvx5] {
    padding-bottom: 48px;
}

.photo-stat[b-q975tlgvx5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--nx-border-strong);
    border-radius: 999px;
    background: var(--nx-surface);
    font-size: 0.78rem;
    color: var(--nx-text-dim);
}

.photo-stat .bi[b-q975tlgvx5] { color: var(--nx-cyan); text-shadow: 0 0 10px var(--nx-cyan); }
.photo-stat strong[b-q975tlgvx5] { color: var(--nx-text); }

/* ---------- Map ---------- */

.photo-map-frame[b-q975tlgvx5] {
    padding: 6px;
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: var(--nx-shadow), 0 0 60px color-mix(in srgb, var(--nx-cyan) 12%, transparent);
}

.photo-map-frame[b-q975tlgvx5]::after { display: none; }

.photo-map-frame[b-q975tlgvx5]  .shark-map {
    border-radius: calc(var(--nx-radius) - 6px);
}

/* ---------- Selected photo ---------- */

.photo-selected[b-q975tlgvx5] {
    margin-bottom: 28px;
}

.photo-selected-img[b-q975tlgvx5] {
    display: block;
    width: 100%;
    max-height: 600px;
    object-fit: contain;
    border-radius: var(--nx-radius-sm);
    background: color-mix(in srgb, var(--nx-bg) 70%, transparent);
}

.photo-selected-date[b-q975tlgvx5] {
    display: inline-flex;
    gap: 6px;
    margin-top: 10px;
}

@media (prefers-reduced-motion: no-preference) {
    .photo-selected[b-q975tlgvx5] { animation: photo-in-b-q975tlgvx5 0.4s var(--nx-ease) both; }
}

@keyframes photo-in-b-q975tlgvx5 {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* ---------- Contact sheet ---------- */

.photo-section-title[b-q975tlgvx5] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 18px;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nx-text-dim);
}

.photo-section-title span[b-q975tlgvx5] { color: var(--nx-accent); }

.photo-section-title[b-q975tlgvx5]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--nx-border-strong), transparent);
}

.photo-tile[b-q975tlgvx5] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.photo-tile:focus-visible[b-q975tlgvx5] {
    outline: 2px solid var(--nx-accent);
    outline-offset: 3px;
}

.photo-tile--active[b-q975tlgvx5] {
    border-color: var(--nx-accent);
    box-shadow: var(--nx-shadow), 0 0 30px color-mix(in srgb, var(--nx-accent) 30%, transparent);
}

.photo-tile-media[b-q975tlgvx5] {
    display: block;
    height: 160px;
    overflow: hidden;
}

.photo-tile-media img[b-q975tlgvx5] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--nx-ease);
}

.photo-tile:hover .photo-tile-media img[b-q975tlgvx5] {
    transform: scale(1.07);
}

.photo-tile-caption[b-q975tlgvx5] {
    display: block;
    padding: 8px 10px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--nx-text-dim);
}

@media (prefers-reduced-motion: reduce) {
    .photo-tile-media img[b-q975tlgvx5] { transition: none; }
    .photo-tile:hover .photo-tile-media img[b-q975tlgvx5] { transform: none; }
}
/* /Components/Pages/Profile.razor.rz.scp.css */
.profile-grid[b-biow3cr1p6] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.profile-side[b-biow3cr1p6] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ---------- Identity card ---------- */

.profile-grid[b-biow3cr1p6]  .profile-id {
    padding: 28px;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--nx-cyan) 14%, transparent), transparent 55%),
        var(--nx-surface);
}

.profile-id-top[b-biow3cr1p6] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-avatar[b-biow3cr1p6] {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, var(--nx-cyan), var(--nx-green), var(--nx-lime));
    box-shadow: 0 0 30px color-mix(in srgb, var(--nx-accent) 35%, transparent);
}

.profile-avatar img[b-biow3cr1p6],
.profile-avatar span[b-biow3cr1p6] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--nx-surface-solid);
}

.profile-avatar span[b-biow3cr1p6] {
    display: grid;
    place-items: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--nx-accent);
}

@media (prefers-reduced-motion: no-preference) {
    .profile-avatar[b-biow3cr1p6]::after {
        content: '';
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        border: 1px solid color-mix(in srgb, var(--nx-accent) 50%, transparent);
        animation: profile-ring-b-biow3cr1p6 3s ease-in-out infinite;
    }
}

@keyframes profile-ring-b-biow3cr1p6 {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.06); opacity: 0.2; }
}

.profile-id-name[b-biow3cr1p6] {
    min-width: 0;
}

.profile-id-name h2[b-biow3cr1p6] {
    margin: 0 0 4px;
    font-size: 1.6rem;
    overflow-wrap: anywhere;
}

.profile-id-name span[b-biow3cr1p6] {
    overflow-wrap: anywhere;
}

.profile-verified[b-biow3cr1p6] {
    margin-left: 4px;
    color: var(--nx-lime);
}

.profile-facts[b-biow3cr1p6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 26px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--nx-border);
}

.profile-facts dt[b-biow3cr1p6] {
    margin-bottom: 6px;
}

.profile-facts dd[b-biow3cr1p6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.profile-facts dd > .bi[b-biow3cr1p6] {
    color: var(--nx-accent);
}

.profile-managed[b-biow3cr1p6] {
    display: flex;
    gap: 8px;
    margin: 22px 0 0;
}

/* ---------- Terminal ---------- */

.profile-term[b-biow3cr1p6] {
    overflow: hidden;
}

.profile-term-bar[b-biow3cr1p6] {
    display: flex;
    align-items: flex-end;
    height: 36px;
    padding-left: 10px;
    border-bottom: 1px solid var(--nx-border);
    background: color-mix(in srgb, var(--nx-bg) 55%, transparent);
    font-size: 0.72rem;
}

.profile-term-tab[b-biow3cr1p6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--nx-border);
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    background: var(--nx-surface-solid);
    color: var(--nx-text);
}

.profile-term-tab .bi[b-biow3cr1p6] { color: #4cc2ff; }

.profile-term-body[b-biow3cr1p6] {
    padding: 14px 18px 16px;
    font-size: 0.85rem;
    line-height: 1.8;
    background: color-mix(in srgb, #0c0c0c 35%, transparent);
}

[data-theme="light"] .profile-term-body[b-biow3cr1p6] { background: #ffffff; }

.pt-ps[b-biow3cr1p6] { color: var(--nx-text); }
.pt-cmd[b-biow3cr1p6] { color: #f9f1a5; }
[data-theme="light"] .pt-cmd[b-biow3cr1p6] { color: #9a6700; }
.pt-out[b-biow3cr1p6] { color: var(--nx-accent); }

.pt-cursor[b-biow3cr1p6] {
    display: inline-block;
    width: 8px;
    height: 1em;
    vertical-align: text-bottom;
    background: var(--nx-accent);
    box-shadow: 0 0 8px var(--nx-accent);
}

@media (prefers-reduced-motion: no-preference) {
    .pt-cursor[b-biow3cr1p6] { animation: pt-blink-b-biow3cr1p6 1s step-end infinite; }
}

@keyframes pt-blink-b-biow3cr1p6 { 50% { opacity: 0; } }

/* ---------- Side cards ---------- */

.profile-row[b-biow3cr1p6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.profile-session[b-biow3cr1p6] {
    margin: 0 0 14px;
}

/* ---------- Links ---------- */

.profile-section[b-biow3cr1p6] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 44px 0 18px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nx-text-dim);
}

.profile-section span[b-biow3cr1p6] { color: var(--nx-accent); }

.profile-section[b-biow3cr1p6]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--nx-border-strong), transparent);
}

.profile-links[b-biow3cr1p6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

.profile-link[b-biow3cr1p6] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    color: var(--nx-text);
    text-decoration: none;
}

.profile-link:hover[b-biow3cr1p6] { color: var(--nx-text); }

.profile-link > .bi[b-biow3cr1p6] {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--nx-accent) 12%, transparent);
    color: var(--nx-accent);
    font-size: 1.2rem;
}

.profile-link span[b-biow3cr1p6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.profile-link small[b-biow3cr1p6] {
    color: var(--nx-text-faint);
    font-size: 0.8rem;
}

@media (max-width: 860px) {
    .profile-grid[b-biow3cr1p6] { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
    .profile-id-top[b-biow3cr1p6] { flex-direction: column; align-items: flex-start; }
    .profile-facts[b-biow3cr1p6] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/ServicesPage.razor.rz.scp.css */
/* ---------- Hero ---------- */

.svc-hero[b-gftbvbqof1] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    padding: 48px 0 64px;
}

.svc-available[b-gftbvbqof1] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border: 1px solid color-mix(in srgb, var(--nx-lime) 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--nx-lime) 8%, transparent);
    color: var(--nx-lime);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.svc-dot[b-gftbvbqof1] {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nx-lime);
    box-shadow: 0 0 10px var(--nx-lime);
}

@media (prefers-reduced-motion: no-preference) {
    .svc-dot[b-gftbvbqof1]::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 2px solid var(--nx-lime);
        animation: svc-ping-b-gftbvbqof1 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    }
}

@keyframes svc-ping-b-gftbvbqof1 {
    from { opacity: 0.8; transform: scale(0.6); }
    to { opacity: 0; transform: scale(2.2); }
}

.svc-title[b-gftbvbqof1] {
    margin: 22px 0 18px;
    font-size: clamp(2.4rem, 5.4vw, 4.2rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.svc-lead[b-gftbvbqof1] {
    max-width: 560px;
    margin: 0 0 28px;
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--nx-text-dim);
}

/* Experience callout between the lead and the buttons. */
.svc-cred[b-gftbvbqof1] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 560px;
    margin: -12px 0 28px;
    padding: 12px 16px;
    border-left: 3px solid var(--nx-lime);
    border-radius: 0 var(--nx-radius-sm) var(--nx-radius-sm) 0;
    background: color-mix(in srgb, var(--nx-lime) 8%, transparent);
    color: var(--nx-text-dim);
    font-size: 0.93rem;
    line-height: 1.6;
}

.svc-cred .bi[b-gftbvbqof1] {
    flex: none;
    margin-top: 1px;
    font-size: 1.2rem;
    color: var(--nx-lime);
}

.svc-cred strong[b-gftbvbqof1] { color: var(--nx-text); }

[data-theme="light"] .svc-cred .bi[b-gftbvbqof1] { color: color-mix(in srgb, var(--nx-lime) 70%, #000); }

.svc-actions[b-gftbvbqof1] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---------- Code window ---------- */

.svc-code[b-gftbvbqof1] {
    overflow: hidden;
    transform: perspective(1200px) rotateY(-7deg) rotateX(3deg);
    box-shadow: var(--nx-shadow), 0 0 90px color-mix(in srgb, var(--nx-accent) 16%, transparent);
    transition: transform 0.3s var(--nx-ease);
}

.svc-code:hover[b-gftbvbqof1] {
    transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

.svc-code-bar[b-gftbvbqof1] {
    display: flex;
    align-items: flex-end;
    height: 40px;
    padding-left: 10px;
    border-bottom: 1px solid var(--nx-border);
    background: color-mix(in srgb, var(--nx-bg) 55%, transparent);
    font-size: 0.75rem;
}

.svc-code-tab[b-gftbvbqof1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 10px 0 12px;
    border: 1px solid var(--nx-border);
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    background: var(--nx-surface-solid);
    box-shadow: inset 0 2px 0 var(--nx-accent);
    color: var(--nx-text);
}

.svc-code-tab .bi-filetype-cs[b-gftbvbqof1] { color: var(--nx-green); }
.svc-code-tab .bi-x[b-gftbvbqof1] { margin-left: 12px; color: var(--nx-text-faint); }

.svc-code-controls[b-gftbvbqof1] {
    display: flex;
    align-self: stretch;
    margin-left: auto;
}

.svc-code-controls .bi[b-gftbvbqof1] {
    display: grid;
    place-items: center;
    width: 44px;
    color: var(--nx-text-dim);
}

.svc-code-controls .bi-square[b-gftbvbqof1] { font-size: 0.65rem; }

.svc-code:hover .svc-code-controls .bi-x-lg[b-gftbvbqof1] {
    background: #c42b1c;
    color: #fff;
}

.svc-code-body[b-gftbvbqof1] {
    margin: 0;
    padding: 22px 24px 26px;
    overflow-x: auto;
    font-size: 0.88rem;
    line-height: 1.75;
    color: var(--nx-text);
    background: color-mix(in srgb, #0c0c0c 35%, transparent);
}

/* Visual Studio dark-theme-ish colors. */
.svc-code-body .k[b-gftbvbqof1] { color: #569cd6; }
.svc-code-body .t[b-gftbvbqof1] { color: #4ec9b0; }
.svc-code-body .s[b-gftbvbqof1] { color: #ce9178; }
.svc-code-body .m[b-gftbvbqof1] { color: #dcdcaa; }
.svc-code-body .n[b-gftbvbqof1] { color: #b5cea8; }
.svc-code-body .c[b-gftbvbqof1] { color: #6a9955; }

[data-theme="light"] .svc-code-body[b-gftbvbqof1] { background: #ffffff; }
[data-theme="light"] .svc-code-body .k[b-gftbvbqof1] { color: #0000ff; }
[data-theme="light"] .svc-code-body .t[b-gftbvbqof1] { color: #267f99; }
[data-theme="light"] .svc-code-body .s[b-gftbvbqof1] { color: #a31515; }
[data-theme="light"] .svc-code-body .m[b-gftbvbqof1] { color: #795e26; }
[data-theme="light"] .svc-code-body .c[b-gftbvbqof1] { color: #008000; }

/* ---------- Section headings ---------- */

.svc-section[b-gftbvbqof1] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 56px 0 22px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nx-text-dim);
    scroll-margin-top: calc(var(--nx-header-h) + 20px);
}

.svc-section span[b-gftbvbqof1] { color: var(--nx-accent); }

.svc-section[b-gftbvbqof1]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--nx-border-strong), transparent);
}

.svc-section-lead[b-gftbvbqof1] {
    max-width: 640px;
    margin: -8px 0 22px;
    color: var(--nx-text-dim);
}

/* ---------- Service cards ---------- */

.svc-grid[b-gftbvbqof1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.svc-card[b-gftbvbqof1] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    overflow: hidden;
}

.svc-card[b-gftbvbqof1]::before {
    background: linear-gradient(135deg, var(--svc), transparent 60%, var(--svc));
}

.svc-card-icon[b-gftbvbqof1] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--svc) 45%, transparent);
    background: color-mix(in srgb, var(--svc) 12%, transparent);
    color: var(--svc);
    font-size: 1.5rem;
    box-shadow: 0 0 24px color-mix(in srgb, var(--svc) 25%, transparent);
    transition: transform 0.35s var(--nx-ease);
}

.svc-card:hover .svc-card-icon[b-gftbvbqof1] { transform: rotate(-6deg) scale(1.08); }

.svc-card-title[b-gftbvbqof1] {
    margin: 8px 0 0;
    font-size: 1.3rem;
}

.svc-card-pitch[b-gftbvbqof1] {
    margin: 0;
    color: var(--nx-text-dim);
    line-height: 1.6;
}

.svc-card-list[b-gftbvbqof1] {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
}

.svc-card-list li[b-gftbvbqof1] {
    position: relative;
    padding: 5px 0 5px 22px;
    border-top: 1px dashed var(--nx-border);
}

.svc-card-list li[b-gftbvbqof1]::before {
    content: '\F633'; /* bootstrap-icons check-lg */
    position: absolute;
    left: 0;
    top: 6px;
    font-family: 'bootstrap-icons';
    font-size: 0.8rem;
    color: var(--svc);
}

.svc-card-link[b-gftbvbqof1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    color: var(--svc);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}

.svc-card-link .bi[b-gftbvbqof1] { transition: transform 0.25s var(--nx-ease); }
.svc-card-link:hover .bi[b-gftbvbqof1] { transform: translateX(5px); }

[data-theme="light"] .svc-card-link[b-gftbvbqof1],
[data-theme="light"] .svc-card-icon[b-gftbvbqof1],
[data-theme="light"] .svc-card-list li[b-gftbvbqof1]::before { color: color-mix(in srgb, var(--svc) 80%, #000); }

/* ---------- Hosting ---------- */

.svc-host-grid[b-gftbvbqof1] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.svc-host[b-gftbvbqof1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
}

.svc-host-head[b-gftbvbqof1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.svc-host-head .bi[b-gftbvbqof1] {
    font-size: 1.35rem;
    color: var(--nx-accent);
    text-shadow: 0 0 14px color-mix(in srgb, var(--nx-accent) 45%, transparent);
}

.svc-host-kind[b-gftbvbqof1] {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--nx-border-strong);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nx-text-faint);
}

.svc-host h3[b-gftbvbqof1] {
    margin: 6px 0 0;
    font-size: 1.05rem;
}

.svc-host p[b-gftbvbqof1] {
    margin: 0;
    color: var(--nx-text-dim);
    font-size: 0.88rem;
    line-height: 1.55;
}

.svc-host-promises[b-gftbvbqof1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.svc-host-promise[b-gftbvbqof1] {
    padding: 22px 24px;
}

.svc-host-promise h3[b-gftbvbqof1] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 1.15rem;
}

.svc-host-promise h3 .bi[b-gftbvbqof1] {
    color: var(--svc);
    text-shadow: 0 0 14px color-mix(in srgb, var(--svc) 50%, transparent);
}

[data-theme="light"] .svc-host-promise h3 .bi[b-gftbvbqof1] { color: color-mix(in srgb, var(--svc) 80%, #000); }

/* Personal support: a featured card under the hosting lists. */
.svc-support[b-gftbvbqof1] {
    --svc: var(--nx-lime);
    margin-top: 20px;
    padding: clamp(20px, 3vw, 28px);
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--svc) 14%, transparent), transparent 55%),
        var(--nx-surface);
    border-color: color-mix(in srgb, var(--svc) 35%, transparent);
}

.svc-support-head[b-gftbvbqof1] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.svc-support-head > .bi[b-gftbvbqof1] {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--svc) 45%, transparent);
    background: color-mix(in srgb, var(--svc) 12%, transparent);
    color: var(--svc);
    font-size: 1.4rem;
}

.svc-support-head h3[b-gftbvbqof1] {
    margin: 2px 0 6px;
    font-size: 1.3rem;
}

.svc-support-head p[b-gftbvbqof1] {
    max-width: 680px;
    margin: 0;
    color: var(--nx-text-dim);
    line-height: 1.6;
}

.svc-support-list[b-gftbvbqof1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 28px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.svc-support-list li[b-gftbvbqof1] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--nx-text-dim);
    font-size: 0.93rem;
    line-height: 1.55;
}

.svc-support-list .bi[b-gftbvbqof1] {
    flex: none;
    margin-top: 2px;
    color: var(--svc);
}

.svc-support-list strong[b-gftbvbqof1] { color: var(--nx-text); }

[data-theme="light"] .svc-support-head > .bi[b-gftbvbqof1],
[data-theme="light"] .svc-support-list .bi[b-gftbvbqof1] { color: color-mix(in srgb, var(--svc) 70%, #000); }

.svc-host-scale[b-gftbvbqof1] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 20px;
    padding: 16px 20px;
    border: 1px dashed color-mix(in srgb, var(--nx-accent) 45%, transparent);
    border-radius: var(--nx-radius-sm);
    background: color-mix(in srgb, var(--nx-accent) 6%, transparent);
}

.svc-host-scale .bi[b-gftbvbqof1] {
    flex: none;
    margin-top: 2px;
    font-size: 1.3rem;
    color: var(--nx-accent);
}

.svc-host-scale p[b-gftbvbqof1] {
    margin: 0;
    color: var(--nx-text-dim);
    line-height: 1.6;
}

.svc-host-scale strong[b-gftbvbqof1] { color: var(--nx-text); }

.svc-host-link[b-gftbvbqof1] {
    --svc: var(--nx-accent);
    margin-top: 18px;
}

/* ---------- Process steps ---------- */

.svc-steps[b-gftbvbqof1] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The connecting line behind the step numbers. */
.svc-steps[b-gftbvbqof1]::before {
    content: '';
    position: absolute;
    top: 21px;
    left: 24px;
    right: 24px;
    height: 2px;
    background: linear-gradient(90deg, var(--nx-cyan), var(--nx-green), var(--nx-lime));
    opacity: 0.5;
}

.svc-step[b-gftbvbqof1] {
    position: relative;
}

.svc-step-num[b-gftbvbqof1] {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    border-radius: 50%;
    border: 2px solid var(--nx-accent);
    background: var(--nx-bg);
    color: var(--nx-accent);
    font-weight: 700;
    box-shadow: 0 0 18px color-mix(in srgb, var(--nx-accent) 40%, transparent);
}

.svc-step-icon[b-gftbvbqof1] {
    margin-left: 10px;
    color: var(--nx-text-faint);
    font-size: 1.1rem;
}

.svc-step h3[b-gftbvbqof1] {
    margin: 0 0 6px;
    font-size: 1.1rem;
}

.svc-step p[b-gftbvbqof1] {
    margin: 0;
    color: var(--nx-text-dim);
    font-size: 0.93rem;
    line-height: 1.6;
}

/* ---------- Proof ---------- */

.svc-proof[b-gftbvbqof1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.svc-proof-card[b-gftbvbqof1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    color: var(--nx-text);
    text-decoration: none;
}

.svc-proof-card:hover[b-gftbvbqof1] { color: var(--nx-text); }

.svc-proof-icon[b-gftbvbqof1] {
    font-size: 1.6rem;
    color: var(--nx-accent);
    text-shadow: 0 0 14px color-mix(in srgb, var(--nx-accent) 50%, transparent);
}

.svc-proof-card h3[b-gftbvbqof1] {
    margin: 4px 0 0;
    font-size: 1.1rem;
}

.svc-proof-card p[b-gftbvbqof1] {
    margin: 0;
    color: var(--nx-text-dim);
    font-size: 0.9rem;
    line-height: 1.55;
}

.svc-proof-tags[b-gftbvbqof1] {
    margin-top: auto;
    padding-top: 6px;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--nx-text-faint);
}

/* ---------- Stack marquee ---------- */

.svc-stack[b-gftbvbqof1] {
    margin-top: 32px;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.svc-stack-track[b-gftbvbqof1] {
    display: flex;
    width: max-content;
}

.svc-stack-set[b-gftbvbqof1] {
    display: flex;
    gap: 12px;
    padding-right: 12px;
}

.svc-stack-chip[b-gftbvbqof1] {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--nx-border-strong);
    background: var(--nx-surface);
    color: var(--nx-text-dim);
    font-size: 0.8rem;
    white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
    .svc-stack-track[b-gftbvbqof1] { animation: svc-marquee-b-gftbvbqof1 36s linear infinite; }
    .svc-stack:hover .svc-stack-track[b-gftbvbqof1] { animation-play-state: paused; }
}

/* Two identical sets side by side; sliding by one set's width loops seamlessly. */
@keyframes svc-marquee-b-gftbvbqof1 {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .svc-stack[b-gftbvbqof1] { mask-image: none; -webkit-mask-image: none; }
    .svc-stack-track[b-gftbvbqof1] { width: auto; }
    .svc-stack-set[b-gftbvbqof1] { flex-wrap: wrap; }
    .svc-stack-set[aria-hidden][b-gftbvbqof1] { display: none; }
}

/* ---------- FAQ ---------- */

.svc-faq[b-gftbvbqof1] {
    max-width: 820px;
}

.svc-faq p[b-gftbvbqof1] {
    margin: 0;
    color: var(--nx-text-dim);
    line-height: 1.65;
}

/* ---------- Final call to action ---------- */

.svc-cta[b-gftbvbqof1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    margin-top: 64px;
    padding: clamp(24px, 4vw, 40px);
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--nx-cyan) 18%, transparent), transparent 50%),
        radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--nx-green) 16%, transparent), transparent 50%),
        var(--nx-surface);
    border-color: color-mix(in srgb, var(--nx-accent) 35%, transparent);
}

.svc-cta h2[b-gftbvbqof1] {
    margin: 0 0 8px;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.svc-cta-actions[b-gftbvbqof1] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.svc-cta p[b-gftbvbqof1] {
    max-width: 560px;
    margin: 0;
    color: var(--nx-text-dim);
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
    .svc-hero[b-gftbvbqof1] { grid-template-columns: minmax(0, 1fr); padding-top: 24px; }
    .svc-code[b-gftbvbqof1] { transform: none; }
    .svc-steps[b-gftbvbqof1] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-steps[b-gftbvbqof1]::before { display: none; }
    .svc-host-grid[b-gftbvbqof1] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-host-promises[b-gftbvbqof1] { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .svc-steps[b-gftbvbqof1] { grid-template-columns: minmax(0, 1fr); }
    .svc-host-grid[b-gftbvbqof1] { grid-template-columns: minmax(0, 1fr); }
    .svc-support-list[b-gftbvbqof1] { grid-template-columns: minmax(0, 1fr); }    .svc-actions[b-gftbvbqof1]  .nx-btn { flex: 1 1 auto; }
}
/* /Components/Pages/Storybook/StorybookGallery.razor.rz.scp.css */
/* ---------- Filters ---------- */

.sg-page[b-5ksrs0l257]  .sg-filters {
    margin-bottom: 18px;
}

.sg-filter-row[b-5ksrs0l257] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
}

.sg-search-input[b-5ksrs0l257] {
    flex: 1 1 320px;
    min-width: 0;
}

.sg-sort-input[b-5ksrs0l257] {
    flex: 0 0 200px;
}

.sg-count[b-5ksrs0l257] {
    margin: 0 0 18px;
    font-size: 0.8rem;
    color: var(--nx-text-faint);
}

.sg-count strong[b-5ksrs0l257] {
    color: var(--nx-text);
    font-weight: 600;
}

.sg-count-prompt[b-5ksrs0l257] {
    color: var(--nx-accent);
    text-shadow: 0 0 10px var(--nx-accent);
}

/* ---------- Tiles ---------- */

.sg-page[b-5ksrs0l257]  .sg-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sg-cover[b-5ksrs0l257] {
    position: relative;
    display: grid;
    place-items: center;
    height: 210px;
    overflow: hidden;
    border-radius: calc(var(--nx-radius) - 1px) calc(var(--nx-radius) - 1px) 0 0;
    background: color-mix(in srgb, var(--nx-accent) 6%, var(--nx-surface-solid));
    color: var(--nx-text-faint);
    font-size: 2.6rem;
    text-decoration: none;
}

.sg-cover img[b-5ksrs0l257] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 0.6s var(--nx-ease), filter 0.4s;
}

/* Darkens the bottom of the cover so the "open book" prompt reads over any illustration. */
.sg-cover[b-5ksrs0l257]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(3, 5, 12, 0.75));
    opacity: 0;
    transition: opacity 0.35s;
}

.sg-cover-cta[b-5ksrs0l257] {
    position: absolute;
    left: 14px;
    bottom: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e6edf7;
    opacity: 0;
    translate: 0 6px;
    transition: opacity 0.3s, translate 0.3s var(--nx-ease);
}

.sg-cover-cta .bi[b-5ksrs0l257] {
    color: var(--nx-cyan);
    font-size: 0.9rem;
}

.sg-page[b-5ksrs0l257]  .sg-card:hover .sg-cover img,
.sg-cover:focus-visible img[b-5ksrs0l257] {
    scale: 1.07;
}

.sg-page[b-5ksrs0l257]  .sg-card:hover .sg-cover::after,
.sg-cover:focus-visible[b-5ksrs0l257]::after,
.sg-page[b-5ksrs0l257]  .sg-card:hover .sg-cover-cta,
.sg-cover:focus-visible .sg-cover-cta[b-5ksrs0l257] {
    opacity: 1;
    translate: none;
}

@media (prefers-reduced-motion: reduce) {
    .sg-cover img[b-5ksrs0l257],
    .sg-cover-cta[b-5ksrs0l257] { transition: none; }
}

.sg-card-content[b-5ksrs0l257] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
    padding: 14px 16px 8px;
}

.sg-card-title[b-5ksrs0l257] {
    display: -webkit-box;
    margin: 0;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
    line-height: 1.35;
    color: var(--nx-text);
}

.sg-card-actions[b-5ksrs0l257] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 14px;
}

@media (max-width: 600px) {
    .sg-sort-input[b-5ksrs0l257] { flex: 1 1 100%; }
    .sg-search-input[b-5ksrs0l257] { flex-basis: 100%; }
}
/* /Components/Pages/Storybook/StorybookReader.razor.rz.scp.css */
.sr-page[b-lqun2bd3o2] {
    max-width: 920px;
    margin: 0 auto;
}

/* ---------- Header extras ---------- */

.sr-pageno[b-lqun2bd3o2] {
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: var(--nx-accent);
}

.sr-pageno-of[b-lqun2bd3o2] {
    color: var(--nx-text-faint);
}

.sr-reading-badge[b-lqun2bd3o2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 14px;
    padding: 2px 10px;
    border: 1px solid color-mix(in srgb, var(--nx-green) 40%, transparent);
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nx-green);
    background: color-mix(in srgb, var(--nx-green) 8%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--nx-green) 22%, transparent);
}

.sr-eq[b-lqun2bd3o2] { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sr-eq i[b-lqun2bd3o2] { width: 3px; background: currentColor; border-radius: 2px; animation: srEq-b-lqun2bd3o2 .9s ease-in-out infinite; }
.sr-eq i:nth-child(1)[b-lqun2bd3o2] { height: 6px; animation-delay: 0s; }
.sr-eq i:nth-child(2)[b-lqun2bd3o2] { height: 12px; animation-delay: .15s; }
.sr-eq i:nth-child(3)[b-lqun2bd3o2] { height: 8px; animation-delay: .3s; }

@keyframes srEq-b-lqun2bd3o2 { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }

/* ---------- Theater ---------- */

.sr-theater[b-lqun2bd3o2] {
    position: relative;
    isolation: isolate;
    padding: 8px 0 0;
}

/* The page's own illustration, huge and blurred, glowing out from behind the book. */
.sr-ambient[b-lqun2bd3o2] {
    position: absolute;
    inset: 0 -6% 18%;
    z-index: -1;
    background-size: cover;
    background-position: center;
    filter: blur(70px) saturate(1.5);
    opacity: 0.45;
    border-radius: 50%;
    pointer-events: none;
}

[data-theme="light"] .sr-ambient[b-lqun2bd3o2] {
    opacity: 0.3;
}

@media (prefers-reduced-motion: no-preference) {
    .sr-ambient[b-lqun2bd3o2] { animation: srAmbientIn-b-lqun2bd3o2 1.2s ease both; }
}

@keyframes srAmbientIn-b-lqun2bd3o2 {
    from { opacity: 0; }
}

.sr-stage[b-lqun2bd3o2] { perspective: 1800px; touch-action: pan-y; }

.sr-page-paper[b-lqun2bd3o2] {
    overflow: hidden;
    padding: 22px;
    border-radius: 22px;
    /* perspective only reaches direct children, so the flipping page needs it here as well as on the stage. */
    perspective: 1800px;
    border-color: var(--nx-border-strong);
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--nx-accent) 6%, transparent), transparent 140px);
    box-shadow: var(--nx-shadow), 0 30px 80px rgba(0, 0, 0, 0.35), 0 0 60px color-mix(in srgb, var(--nx-accent) 10%, transparent);
    transition: box-shadow 0.6s, border-color 0.6s;
}

/* Read-aloud mode: the book breathes a soft green glow while the voice is going. */
.sr-theater--reading .sr-page-paper[b-lqun2bd3o2] {
    border-color: color-mix(in srgb, var(--nx-green) 45%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
    .sr-theater--reading .sr-page-paper[b-lqun2bd3o2] { animation: srBreathe-b-lqun2bd3o2 3.2s ease-in-out infinite; }
}

@keyframes srBreathe-b-lqun2bd3o2 {
    0%, 100% { box-shadow: var(--nx-shadow), 0 30px 80px rgba(0, 0, 0, 0.35), 0 0 40px color-mix(in srgb, var(--nx-green) 12%, transparent); }
    50% { box-shadow: var(--nx-shadow), 0 30px 80px rgba(0, 0, 0, 0.35), 0 0 90px color-mix(in srgb, var(--nx-green) 30%, transparent); }
}

.sr-progress[b-lqun2bd3o2] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: var(--sr-progress, 0%);
    height: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, var(--nx-cyan), var(--nx-green), var(--nx-lime));
    box-shadow: 0 0 12px var(--nx-accent);
    transition: width 0.6s var(--nx-ease);
}

.sr-page-inner[b-lqun2bd3o2] { display: flex; flex-direction: column; gap: 18px; backface-visibility: hidden; }

/* Fixed box, not max-height: a portrait and a square illustration would otherwise render at different
   heights and shift everything underneath them. */
.sr-image-box[b-lqun2bd3o2] {
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 14px;
}

.sr-page-image[b-lqun2bd3o2] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

/* Room for the longest couple of lines a page is allowed, so short pages don't collapse the card. */
.sr-text-box[b-lqun2bd3o2] { min-height: 80px; display: flex; align-items: center; justify-content: center; padding: 0 12px; }

.sr-page-text[b-lqun2bd3o2] {
    margin: 0;
    max-width: 680px;
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
    text-wrap: pretty;
    color: var(--nx-text);
}

@media (prefers-reduced-motion: no-preference) {
    /* A slow push-in on each illustration, and the words fade up just after the page lands. */
    .sr-page-image[b-lqun2bd3o2] { animation: srDrift-b-lqun2bd3o2 16s ease-out both; }
    .sr-page-text[b-lqun2bd3o2] { animation: srTextIn-b-lqun2bd3o2 .7s var(--nx-ease) .35s both; }
}

@keyframes srDrift-b-lqun2bd3o2 {
    from { scale: 1.08; }
    to { scale: 1; }
}

@keyframes srTextIn-b-lqun2bd3o2 {
    from { opacity: 0; translate: 0 10px; filter: blur(4px); }
    to { opacity: 1; translate: none; filter: none; }
}

/* A real page turn: the incoming page swings in on the spine it is hinged to - the left edge going
   forward, the right edge going back - rather than sliding across. */
@keyframes srFlipNext-b-lqun2bd3o2 {
    0%   { transform: rotateY(-88deg); opacity: .15; box-shadow: -24px 0 34px rgba(0,0,0,.35); }
    70%  { opacity: 1; }
    100% { transform: rotateY(0deg); opacity: 1; box-shadow: none; }
}

@keyframes srFlipPrev-b-lqun2bd3o2 {
    0%   { transform: rotateY(88deg); opacity: .15; box-shadow: 24px 0 34px rgba(0,0,0,.35); }
    70%  { opacity: 1; }
    100% { transform: rotateY(0deg); opacity: 1; box-shadow: none; }
}

.sr-flip-next[b-lqun2bd3o2] { transform-origin: left center; animation: srFlipNext-b-lqun2bd3o2 .5s cubic-bezier(.25,.7,.35,1); }
.sr-flip-prev[b-lqun2bd3o2] { transform-origin: right center; animation: srFlipPrev-b-lqun2bd3o2 .5s cubic-bezier(.25,.7,.35,1); }

/* ---------- Page controls ---------- */

.sr-nav[b-lqun2bd3o2] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 22px 0 8px; }

.sr-arrow[b-lqun2bd3o2] {
    width: 56px; height: 56px; flex: 0 0 auto;
    border-radius: 50%; border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    color: var(--nx-on-accent);
    background: linear-gradient(135deg, var(--nx-cyan), var(--nx-green));
    box-shadow: 0 6px 18px rgba(0,0,0,.3), 0 0 22px color-mix(in srgb, var(--nx-accent) 35%, transparent);
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.sr-arrow:hover:not(:disabled)[b-lqun2bd3o2] { transform: translateY(-2px) scale(1.06); box-shadow: 0 10px 24px rgba(0,0,0,.34), var(--nx-glow); }
.sr-arrow:active:not(:disabled)[b-lqun2bd3o2] { transform: scale(.96); }
.sr-arrow:focus-visible[b-lqun2bd3o2] { outline: 2px solid var(--nx-accent); outline-offset: 3px; }
.sr-arrow:disabled[b-lqun2bd3o2] { opacity: .25; cursor: default; box-shadow: none; filter: grayscale(.6); }

.sr-dots[b-lqun2bd3o2] { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

.sr-dot[b-lqun2bd3o2] {
    width: 10px; height: 10px; padding: 0; border-radius: 999px; cursor: pointer;
    background: var(--nx-border-strong); border: none;
    transition: width .25s var(--nx-ease), background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.sr-dot:hover[b-lqun2bd3o2] { transform: scale(1.3); background: var(--nx-text-faint); }
.sr-dot:focus-visible[b-lqun2bd3o2] { outline: 2px solid var(--nx-accent); outline-offset: 2px; }

.sr-dot-active[b-lqun2bd3o2] {
    width: 28px;
    background: linear-gradient(90deg, var(--nx-cyan), var(--nx-green));
    box-shadow: 0 0 12px color-mix(in srgb, var(--nx-accent) 55%, transparent);
}

.sr-dot-active:hover[b-lqun2bd3o2] { transform: none; background: linear-gradient(90deg, var(--nx-cyan), var(--nx-green)); }

.sr-hint[b-lqun2bd3o2] {
    display: block;
    margin: 0 0 22px;
}

.sr-hint kbd[b-lqun2bd3o2] {
    padding: 1px 6px;
    border: 1px solid var(--nx-border-strong);
    border-radius: 5px;
    background: var(--nx-surface);
    color: var(--nx-text-dim);
    font-family: var(--nx-font-mono);
    font-size: 0.75rem;
}

.sr-actions[b-lqun2bd3o2] { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; }

.sr-actions[b-lqun2bd3o2]  .sr-stop-btn {
    border-color: var(--nx-red);
    color: var(--nx-red);
}

@media (prefers-reduced-motion: reduce) {
    .sr-flip-next[b-lqun2bd3o2], .sr-flip-prev[b-lqun2bd3o2], .sr-eq i[b-lqun2bd3o2] { animation: none; }
    .sr-progress[b-lqun2bd3o2] { transition: none; }
}

@media (max-width: 600px) {
    .sr-page-paper[b-lqun2bd3o2] { padding: 12px; border-radius: 16px; }
    .sr-image-box[b-lqun2bd3o2] { height: 260px; }
    .sr-arrow[b-lqun2bd3o2] { width: 48px; height: 48px; font-size: 1.2rem; }
    .sr-nav[b-lqun2bd3o2] { gap: 8px; }
    .sr-reading-badge[b-lqun2bd3o2] { margin: 8px 0 0; }
}
/* /Components/Pages/Storybook/StorybookStudio.razor.rz.scp.css */
/* ---------- Intro ---------- */

.sb-perks[b-nhv3902q7g] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -8px 0 28px;
}

/* ::deep so it also reaches the NxAlert/NxCard roots that carry it via Class. */
.sb-page[b-nhv3902q7g]  .sb-block {
    margin-bottom: 36px;
}

/* ---------- Create card ---------- */

.sb-page[b-nhv3902q7g]  .sb-create {
    margin-bottom: 44px;
    border-color: var(--nx-border-strong);
    box-shadow: var(--nx-shadow), 0 0 60px color-mix(in srgb, var(--nx-accent) 10%, transparent);
}

/* A slow neon line drawn across the top of the card, like a progress bar that never quite finishes. */
.sb-page[b-nhv3902q7g]  .sb-create::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 24px;
    right: 24px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--nx-cyan), var(--nx-green), transparent);
    box-shadow: 0 0 12px var(--nx-accent);
    opacity: 0.8;
}

@media (prefers-reduced-motion: no-preference) {
    .sb-page[b-nhv3902q7g]  .sb-create::before {
        background-size: 200% 100%;
        animation: sb-sweep-b-nhv3902q7g 6s linear infinite;
    }
}

@keyframes sb-sweep-b-nhv3902q7g {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

.sb-create-row[b-nhv3902q7g] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 24px;
    margin-top: 16px;
}

.sb-level-input[b-nhv3902q7g] {
    width: 220px;
    max-width: 100%;
}

.sb-create-row[b-nhv3902q7g]  .sb-rhyme {
    min-height: 42px;
}

.sb-create-row[b-nhv3902q7g]  .sb-create-btn {
    margin-left: auto;
}

/* ---------- Section titles (same treatment as the home page's) ---------- */

.sb-section-title[b-nhv3902q7g] {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nx-text-dim);
}

.sb-section-title span[b-nhv3902q7g] {
    color: var(--nx-accent);
    text-shadow: 0 0 10px var(--nx-accent);
}

.sb-section-title[b-nhv3902q7g]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--nx-border-strong), transparent);
}

.sb-section-row[b-nhv3902q7g] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.sb-section-row .sb-section-title[b-nhv3902q7g] {
    margin: 0;
}

/* ---------- Storybook of the day ---------- */

.sb-page[b-nhv3902q7g]  .sb-featured {
    overflow: hidden;
    border-color: color-mix(in srgb, var(--nx-amber) 45%, transparent);
    box-shadow: var(--nx-shadow), 0 0 70px color-mix(in srgb, var(--nx-amber) 14%, transparent);
}

.sb-featured-main[b-nhv3902q7g] {
    display: flex;
    align-items: stretch;
}

.sb-featured-cover[b-nhv3902q7g] {
    position: relative;
    flex: 0 0 280px;
    min-height: 260px;
    overflow: hidden;
}

.sb-featured-cover[b-nhv3902q7g]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 55%, var(--nx-surface-solid));
    opacity: 0.6;
    pointer-events: none;
}

.sb-featured-preview[b-nhv3902q7g] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
    .sb-featured-preview[b-nhv3902q7g] { animation: sb-kenburns-b-nhv3902q7g 20s ease-in-out infinite alternate; }
}

@keyframes sb-kenburns-b-nhv3902q7g {
    from { scale: 1; }
    to { scale: 1.1; }
}

.sb-featured-body[b-nhv3902q7g] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    padding: 28px 32px;
}

.sb-page .sb-featured-title[b-nhv3902q7g] {
    margin: 4px 0 0;
    font-size: clamp(1.3rem, 2.6vw, 1.9rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.sb-featured-desc[b-nhv3902q7g] {
    margin: 0;
}

/* ---------- Story tiles ---------- */

.sb-page[b-nhv3902q7g]  .sb-story-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sb-preview[b-nhv3902q7g] {
    position: relative;
    height: 200px;
    overflow: hidden;
    border-radius: calc(var(--nx-radius) - 1px) calc(var(--nx-radius) - 1px) 0 0;
    background: color-mix(in srgb, var(--nx-accent) 6%, var(--nx-surface-solid));
}

.sb-preview img[b-nhv3902q7g] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 0.6s var(--nx-ease);
}

.sb-page[b-nhv3902q7g]  .sb-story-card:hover .sb-preview img {
    scale: 1.06;
}

.sb-preview-placeholder[b-nhv3902q7g] {
    display: grid;
    place-items: center;
    color: var(--nx-text-faint);
    font-size: 2.6rem;
}

/* Scanline shimmer while the AI is still writing/drawing. */
.sb-preview--busy[b-nhv3902q7g]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--nx-accent) 18%, transparent), transparent);
    background-size: 100% 60%;
    background-repeat: no-repeat;
    opacity: 0.8;
}

@media (prefers-reduced-motion: no-preference) {
    .sb-preview--busy[b-nhv3902q7g]::after { animation: sb-scan-b-nhv3902q7g 2.4s ease-in-out infinite; }
}

@keyframes sb-scan-b-nhv3902q7g {
    from { background-position: 0 -120%; }
    to { background-position: 0 220%; }
}

.sb-story-content[b-nhv3902q7g] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex-grow: 1;
    padding: 14px 16px 10px;
}

.sb-story-title[b-nhv3902q7g] {
    display: -webkit-box;
    margin: 0;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
    line-height: 1.35;
    color: var(--nx-text);
}

.sb-story-meta[b-nhv3902q7g] {
    display: block;
}

.sb-card-actions[b-nhv3902q7g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px 10px 12px;
    border-top: 1px solid var(--nx-border);
}

.sb-story-error[b-nhv3902q7g] {
    padding: 6px;
    color: var(--nx-red);
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
    .sb-featured-cover[b-nhv3902q7g] { flex-basis: 120px; min-height: 140px; }
    .sb-featured-body[b-nhv3902q7g] { padding: 16px; }
    .sb-featured-desc[b-nhv3902q7g] { display: none; }
    .sb-create-row[b-nhv3902q7g]  .sb-create-btn { width: 100%; margin-left: 0; }
    .sb-level-input[b-nhv3902q7g] { width: 100%; }
}
/* /Components/SharkCodeEditor.razor.rz.scp.css */
.page-container[b-spfriau0oa] {
    height: 100%;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.editor-wrapper[b-spfriau0oa] {       
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: inherit;
    position: relative;
}

.editor-container[b-spfriau0oa] {
    flex: 1;
    width: 100%;
    height: 100%;
    border: 2px solid #ccc;
    border-radius: 4px;
    min-height: inherit;
    position: relative;
    overflow: hidden;
}

/* Auto-height specific styles */
.auto-height-editor[b-spfriau0oa] {
    overflow: visible !important;
    height: auto !important;
    min-height: 100px !important;
}

.auto-height-editor :global(.monaco-editor)[b-spfriau0oa] {
    height: auto !important;
    min-height: 100px !important;
    overflow: visible !important;
}

.auto-height-editor :global(.monaco-editor .monaco-editor-background)[b-spfriau0oa] {
    height: auto !important;
}

.auto-height-editor :global(.monaco-editor .overflow-guard)[b-spfriau0oa] {
    height: auto !important;
    overflow: visible !important;
}

.auto-height-editor :global(.monaco-scrollable-element)[b-spfriau0oa] {
    height: auto !important;
    overflow: visible !important;
}

.auto-height-editor :global(.monaco-editor .monaco-scrollable-element > .scrollbar)[b-spfriau0oa] {
    display: none !important;
}

/* More specific and defensive Monaco editor styles */
.editor-container :global(.monaco-editor)[b-spfriau0oa] {
    width: 100% !important;
    height: 100% !important;
    min-height: inherit !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

.editor-container :global(.monaco-editor .monaco-editor-background)[b-spfriau0oa] {
    height: 100% !important;
    width: 100% !important;
}

.editor-container :global(.monaco-editor .editor-container)[b-spfriau0oa] {
    height: 100% !important;
    width: 100% !important;
}

.editor-container :global(.monaco-editor .overflow-guard)[b-spfriau0oa] {
    height: 100% !important;
    width: 100% !important;
}

.editor-container :global(.monaco-editor .monaco-scrollable-element)[b-spfriau0oa] {
    height: 100% !important;
    width: 100% !important;
}

/* Target the immediate child div more specifically */
.editor-container > :global(div)[b-spfriau0oa] {
    width: 100% !important;
    height: 100% !important;
    min-height: inherit !important;
    position: relative !important;
}

/* Ensure proper sizing for different height values */
.editor-container :global(.monaco-editor)[b-spfriau0oa],
.editor-container :global(.monaco-editor *)[b-spfriau0oa] {
    box-sizing: border-box !important;
}

/* Loading state styling */
.editor-container .mud-progress-circular[b-spfriau0oa] {
    color: var(--mud-palette-text-secondary) !important;
}

/* Add delay for Monaco-specific styles */
.editor-container :global(.monaco-editor-loaded)[b-spfriau0oa] {
    animation: monacoFadeIn-b-spfriau0oa 0.1s ease-in;
}

@keyframes monacoFadeIn-b-spfriau0oa {
    from { opacity: 0; }
    to { opacity: 1; }
}