*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--sfsp-page-bg,#020617)}
body{
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--sfsp-page-text,#e8fbff);
    background:
        radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--sfsp-page-gradient-top,#075985) 34%,transparent),transparent 26rem),
        radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--sfsp-page-gradient-mid,#082f49) 38%,transparent),transparent 35rem),
        linear-gradient(135deg,var(--sfsp-page-bg,#020617) 0%,var(--sfsp-page-gradient-mid,#031426) 45%,var(--sfsp-page-gradient-end,#01030b) 100%);
}

.sfsp-page{
    min-height:100dvh;
    padding:38px 16px 52px;
    display:flex;
    justify-content:center;
}

.sfsp-shell{
    width:min(100%,563px);
    margin:0 auto;
}

.sfsp-logo{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 auto 30px;
    text-align:center;
}

.sfsp-logo-frame{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    margin:0 auto;
    text-align:center;
}

.sfsp-logo-frame img{
    --sf-logo-optical-x:0px;
    display:block;
    width:184px;
    max-width:56vw;
    height:auto;
    margin:0 auto;
    transform:translateX(var(--sf-logo-optical-x));
    filter:drop-shadow(0 12px 28px color-mix(in srgb,var(--sfsp-logo-shadow,#0ea5e9) 28%,transparent));
}

.sfsp-categories{
    display:grid;
    gap:11px;
}

.sfsp-category,
.sfsp-ad{
    display:block;
    overflow:hidden;
    border-radius:12px;
    text-decoration:none;
    background:transparent;
    border:1px solid color-mix(in srgb,var(--sfsp-category-border,#0ea5e9) 42%,transparent);
    box-shadow:
        0 14px 32px color-mix(in srgb,var(--sfsp-category-shadow,#000000) 30%,transparent),
        0 0 24px color-mix(in srgb,var(--sfsp-category-glow,#0ea5e9) 10%,transparent);
}

.sfsp-category img,
.sfsp-ad img{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
}

.sfsp-category:focus-visible,
.sfsp-ad:focus-visible{
    outline:2px solid var(--sfsp-focus-ring,#38bdf8);
    outline-offset:4px;
}

.sfsp-category:active,
.sfsp-ad:active{
    transform:scale(.993);
}

.sfsp-category-empty{
    min-height:118px;
    background:
        linear-gradient(90deg,var(--sfsp-category-fallback-bg-start,#020617),var(--sfsp-category-fallback-bg-end,#082f49)),
        repeating-linear-gradient(135deg,color-mix(in srgb,var(--sfsp-category-fallback-pattern,#0ea5e9) 10%,transparent) 0 1px,transparent 1px 14px);
}

.sfsp-banners{
    display:grid;
    gap:9px;
    margin-top:30px;
}

.sfsp-banners .sfsp-ad{
    border-color:color-mix(in srgb,var(--sfsp-ad-border,#0ea5e9) 46%,transparent);
    box-shadow:
        0 14px 32px color-mix(in srgb,var(--sfsp-ad-shadow,#000000) 28%,transparent),
        0 0 24px color-mix(in srgb,var(--sfsp-ad-glow,#0ea5e9) 10%,transparent);
}

.sfsp-ad-empty{
    min-height:92px;
    background:
        linear-gradient(90deg,var(--sfsp-ad-fallback-bg-start,#020617),var(--sfsp-ad-fallback-bg-end,#07142b));
}

@media(max-width:640px){
    .sfsp-page{padding:20px 12px 34px}
    .sfsp-logo{margin-bottom:22px}
    .sfsp-logo-frame img{width:154px;max-width:52vw}
    .sfsp-categories{gap:9px}
    .sfsp-banners{gap:8px;margin-top:24px}
}