:root {
    --sf-dive-bg: var(--sf-bg, #07090d);
    --sf-dive-panel: var(--sf-panel, #10141b);
    --sf-dive-panel-deep: var(--sf-panel-deep, #090c11);
    --sf-dive-text: var(--sf-text, #f5f7fb);
    --sf-dive-muted: var(--sf-muted, #9299a8);
    --sf-dive-line: var(
        --sf-line,
        rgba(255, 255, 255, 0.13)
    );
    --sf-dive-line-strong: var(
        --sf-line-strong,
        rgba(255, 255, 255, 0.25)
    );
    --sf-dive-red: var(--sf-sizzle, #e43b32);
    --sf-dive-blue: var(--sf-fizzle, #2788d8);
    --sf-dive-cyan: #00e5ff;
    --sf-dive-gold: #d8b85e;
}

* {
    box-sizing: border-box;
}

body.sf-deep-dive-page {
    margin: 0;
    min-height: 100vh;
    color: var(--sf-dive-text);
    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(228, 59, 50, 0.11),
            transparent 31rem
        ),
        radial-gradient(
            circle at 90% 4%,
            rgba(0, 229, 255, 0.09),
            transparent 34rem
        ),
        linear-gradient(
            180deg,
            #11151d 0,
            var(--sf-dive-bg) 48rem
        );
    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

.sf-deep-dive-shell {
    width:
        min(
            1180px,
            calc(100% - 32px)
        );
    margin: 0 auto;
    padding-bottom: 52px;
}

.sf-deep-dive-topbar {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    min-height: 132px;
    border-bottom:
        1px solid
        var(--sf-dive-line);
}

.sf-deep-dive-brand-lockup {
    text-align: center;
}

.sf-deep-dive-brand {
    display: inline-flex;
    width: 178px;
    margin: 0 auto;
    text-decoration: none;
}

.sf-deep-dive-brand img {
    display: block;
    width: 100%;
    height: auto;
}

.sf-deep-dive-brand-lockup p {
    margin: 7px 0 0;
    color: var(--sf-dive-text);
    font-size:
        clamp(
            17px,
            1.6vw,
            22px
        );
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.025em;
}

.sf-deep-dive-topbar nav {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 16px;
    justify-content: flex-end;
    align-items: center;
}

.sf-deep-dive-topbar nav a {
    color: #c5cbd4;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.sf-deep-dive-topbar nav a:hover,
.sf-deep-dive-topbar nav a:focus-visible {
    color: var(--sf-dive-text);
}

.sf-deep-dive-hero {
    position: relative;
    overflow: hidden;
    max-width: none;
    margin: 22px 0 12px;
    padding: 28px 32px 30px;
    border:
        1px solid
        var(--sf-dive-line);
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 7% 0%,
            rgba(228, 59, 50, 0.18),
            transparent 28rem
        ),
        radial-gradient(
            circle at 94% 100%,
            rgba(0, 229, 255, 0.14),
            transparent 31rem
        ),
        linear-gradient(
            145deg,
            #121824,
            #090c12
        );
    box-shadow:
        0 24px 60px
        rgba(0, 0, 0, 0.28);
    text-align: left;
}

.sf-deep-dive-hero::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background:
        linear-gradient(
            90deg,
            var(--sf-dive-red) 0%,
            var(--sf-dive-red) 48%,
            var(--sf-dive-cyan) 52%,
            var(--sf-dive-cyan) 100%
        );
    content: "";
}

.sf-deep-dive-kicker {
    margin: 0 0 8px;
    color: #c9ced7;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.sf-deep-dive-hero h1 {
    margin: 0;
    color: var(--sf-dive-text);
    font-size:
        clamp(
            38px,
            5vw,
            64px
        );
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.sf-deep-dive-hero > p:last-child {
    max-width: 760px;
    margin: 14px 0 0;
    color: #b7bec9;
    font-size:
        clamp(
            14px,
            1.5vw,
            17px
        );
    line-height: 1.48;
}

.sf-deep-dive-controls {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 14px 16px;
    border:
        1px solid
        var(--sf-dive-line);
    border-radius: 17px;
    background:
        rgba(16, 20, 27, 0.92);
    box-shadow:
        0 15px 38px
        rgba(0, 0, 0, 0.18);
}

.sf-deep-dive-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 4px;
    border:
        1px solid
        var(--sf-dive-line);
    border-radius: 999px;
    background:
        rgba(0, 0, 0, 0.28);
}

.sf-deep-dive-tabs a {
    min-width: 108px;
    padding: 9px 16px;
    border-radius: 999px;
    color: var(--sf-dive-muted);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
}

.sf-deep-dive-tabs a.is-active {
    color: #ffffff;
    background:
        linear-gradient(
            180deg,
            #313844,
            #1d232c
        );
    box-shadow:
        inset 0 0 0 1px
        var(--sf-dive-line-strong);
}

.sf-deep-dive-controls form {
    display: grid;
    grid-template-columns:
        auto
        minmax(180px, 280px)
        auto;
    gap: 9px;
    align-items: center;
    justify-content: end;
}

.sf-deep-dive-controls label {
    color: var(--sf-dive-muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sf-deep-dive-controls select,
.sf-deep-dive-controls button {
    min-height: 38px;
    border-radius: 9px;
    font: inherit;
}

.sf-deep-dive-controls select {
    width: 100%;
    padding: 0 34px 0 11px;
    border:
        1px solid
        var(--sf-dive-line);
    color: var(--sf-dive-text);
    background: #090c11;
    font-size: 12px;
    font-weight: 700;
}

.sf-deep-dive-controls button {
    padding: 0 17px;
    border: 0;
    color: #ffffff;
    background:
        linear-gradient(
            180deg,
            #3299e8,
            #1767aa
        );
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.sf-deep-dive-controls button:hover,
.sf-deep-dive-controls button:focus-visible {
    filter: brightness(1.08);
}

.sf-deep-dive-scope {
    display: flex;
    gap: 9px;
    align-items: center;
    margin: 12px 4px 0;
    color: var(--sf-dive-muted);
    font-size: 12px;
}

.sf-deep-dive-scope strong {
    color: var(--sf-dive-text);
}

.sf-deep-dive-scope span::before {
    margin-right: 9px;
    color: var(--sf-dive-gold);
    content: "·";
}

.sf-deep-dive-section {
    margin-top: 36px;
}

.sf-deep-dive-section-heading {
    display: flex;
    gap: 20px;
    align-items: end;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom:
        1px solid
        var(--sf-dive-line);
}

.sf-deep-dive-section-heading p {
    margin: 0 0 3px;
    color: #aab1bc;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.sf-deep-dive-section-heading h2 {
    margin: 0;
    color: var(--sf-dive-text);
    font-size:
        clamp(
            26px,
            3vw,
            38px
        );
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.035em;
}

.sf-deep-dive-section-heading > span {
    color: var(--sf-dive-muted);
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

.sf-deep-dive-section-copy {
    max-width: 760px;
    margin: 9px 0 13px;
    color: var(--sf-dive-muted);
    font-size: 12px;
    line-height: 1.45;
}

.sf-deep-dive-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 12px;
}

.sf-deep-dive-panel {
    position: relative;
    overflow: hidden;
    border:
        1px solid
        var(--sf-dive-line);
    border-radius: 17px;
    background:
        linear-gradient(
            150deg,
            rgba(255, 255, 255, 0.024),
            transparent 45%
        ),
        rgba(16, 20, 27, 0.94);
    box-shadow:
        0 18px 44px
        rgba(0, 0, 0, 0.19);
}

.sf-deep-dive-panel::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    content: "";
}

.sf-deep-dive-sizz::before {
    background:
        linear-gradient(
            180deg,
            var(--sf-dive-red),
            rgba(228, 59, 50, 0.15)
        );
}

.sf-deep-dive-fizz::before {
    background:
        linear-gradient(
            180deg,
            var(--sf-dive-cyan),
            rgba(0, 229, 255, 0.12)
        );
}

.sf-deep-dive-panel h3 {
    margin: 0;
    padding: 12px 15px 11px 18px;
    border-bottom:
        1px solid
        var(--sf-dive-line);
    color: var(--sf-dive-text);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.sf-deep-dive-sizz h3 {
    color: #ff625b;
}

.sf-deep-dive-fizz h3 {
    color: #45ecff;
}

.sf-deep-dive-list {
    max-height: 455px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color:
        rgba(255, 255, 255, 0.32)
        rgba(255, 255, 255, 0.05);
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    list-style: none;
}

.sf-deep-dive-list li {
    display: grid;
    grid-template-columns:
        28px
        minmax(0, 1fr)
        auto;
    gap: 10px;
    align-items: center;
    min-height: 54px;
    padding: 8px 14px 8px 16px;
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.075);
}

.sf-deep-dive-list li:last-child {
    border-bottom: 0;
}

.sf-deep-dive-rank {
    color: #707987;
    font-size: 10px;
    font-weight: 900;
    text-align: center;
}

.sf-deep-dive-identity {
    min-width: 0;
    color: var(--sf-dive-text);
    text-decoration: none;
}

.sf-deep-dive-identity strong,
.sf-deep-dive-identity small {
    display: block;
}

.sf-deep-dive-identity strong {
    overflow: hidden;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sf-deep-dive-identity small {
    margin-top: 2px;
    color: var(--sf-dive-muted);
    font-size: 10px;
    font-weight: 700;
}

.sf-deep-dive-identity:hover strong,
.sf-deep-dive-identity:focus-visible strong {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sf-deep-dive-metric {
    min-width: 72px;
    text-align: right;
}

.sf-deep-dive-metric strong,
.sf-deep-dive-metric span {
    display: block;
}

.sf-deep-dive-metric strong {
    color: var(--sf-dive-text);
    font-size: 14px;
    font-weight: 900;
}

.sf-deep-dive-sizz
.sf-deep-dive-metric strong {
    color: #ff625b;
}

.sf-deep-dive-fizz
.sf-deep-dive-metric strong {
    color: #45ecff;
}

.sf-deep-dive-metric span {
    margin-top: 2px;
    color: var(--sf-dive-muted);
    font-size: 9px;
    font-weight: 700;
}

.sf-deep-dive-empty {
    margin: 0;
    padding: 25px 18px;
    color: var(--sf-dive-muted);
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}

.sf-deep-dive-footnote {
    max-width: 760px;
    margin: 34px auto 0;
    padding-top: 14px;
    border-top:
        1px solid
        var(--sf-dive-line);
    color: var(--sf-dive-muted);
    font-size: 10px;
    line-height: 1.5;
    text-align: center;
}

.sf-deep-dive-list::-webkit-scrollbar {
    width: 7px;
}

.sf-deep-dive-list::-webkit-scrollbar-track {
    background:
        rgba(255, 255, 255, 0.05);
}

.sf-deep-dive-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background:
        rgba(255, 255, 255, 0.28);
}

.sf-deep-dive-list::-webkit-scrollbar-thumb:hover {
    background:
        rgba(255, 255, 255, 0.42);
}

@media (max-width: 760px) {
    .sf-deep-dive-shell {
        width:
            min(
                100% - 20px,
                1180px
            );
        padding-bottom: 36px;
    }

    .sf-deep-dive-topbar {
        display: flex;
        min-height: 0;
        padding: 14px 0 12px;
        flex-direction: column;
        gap: 11px;
    }

    .sf-deep-dive-header-balance {
        display: none;
    }

    .sf-deep-dive-brand-lockup {
        text-align: center;
    }

    .sf-deep-dive-brand {
        width: 148px;
    }

    .sf-deep-dive-brand-lockup p {
        display: block;
        margin-top: 4px;
        font-size: 17px;
    }

    .sf-deep-dive-topbar nav {
        width: 100%;
        gap: 7px 13px;
        justify-content: center;
    }

    .sf-deep-dive-topbar nav a {
        font-size: 10px;
    }

    .sf-deep-dive-hero {
        margin-top: 12px;
        padding: 22px 19px 23px;
        border-radius: 18px;
    }

    .sf-deep-dive-hero h1 {
        font-size:
            clamp(
                38px,
                13vw,
                54px
            );
    }

    .sf-deep-dive-hero > p:last-child {
        margin-top: 11px;
        font-size: 13px;
    }

    .sf-deep-dive-controls {
        grid-template-columns: 1fr;
        gap: 11px;
        padding: 12px;
    }

    .sf-deep-dive-tabs {
        width: 100%;
    }

    .sf-deep-dive-tabs a {
        min-width: 0;
    }

    .sf-deep-dive-controls form {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
        justify-content: stretch;
    }

    .sf-deep-dive-controls label {
        grid-column: 1 / -1;
    }

    .sf-deep-dive-scope {
        margin-top: 10px;
    }

    .sf-deep-dive-section {
        margin-top: 28px;
    }

    .sf-deep-dive-section-heading {
        gap: 6px;
        align-items: start;
        flex-direction: column;
    }

    .sf-deep-dive-section-heading > span {
        text-align: left;
    }

    .sf-deep-dive-section-copy {
        margin-bottom: 11px;
    }

    .sf-deep-dive-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .sf-deep-dive-list {
        max-height: 350px;
    }
}

@media (max-width: 430px) {
    .sf-deep-dive-topbar nav {
        gap: 6px 10px;
    }

    .sf-deep-dive-list li {
        grid-template-columns:
            24px
            minmax(0, 1fr)
            auto;
        gap: 7px;
        padding-inline: 10px;
    }

    .sf-deep-dive-metric {
        min-width: 66px;
    }
}