/* 由 reference/split-css.py 从原站编译 CSS 整理生成，按场景拆分；改动请直接编辑本文件。 */

.analytics-scene {
    --analytics-visual-width: 76rem;
    --analytics-user-ring-width: 1.5px;
    position: relative;
    display: grid;
    min-height: auto;
    overflow: clip;
    isolation: isolate;
    background: transparent
}

.analytics-scene__inner {
    display: grid;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    margin-block: auto
}

.analytics-scene__intro {
    justify-items: center;
    max-width: min(100%, 52rem);
    margin-inline: auto;
    text-align: center
}

.analytics-flow {
    display: grid;
    min-width: 0;
    width: min(100%, var(--analytics-visual-width));
    max-width: min(100%, var(--analytics-visual-width));
    justify-self: center;
    color: var(--color-contrast)
}

.analytics-flow__canvas {
    position: relative;
    display: grid;
    contain: layout paint;
    gap: clamp(1rem, 3vw, 1.5rem);
    width: 100%;
    min-width: 0;
    padding-block: clamp(1.25rem, 4vw, 2rem);
    padding-inline: clamp(.75rem, 3vw, 1.25rem);
    overflow: clip
}

.analytics-flow__main {
    display: grid;
    grid-template-columns: clamp(4rem, 17vw, 5.5rem) minmax(0, 1fr);
    gap: clamp(.5rem, 2.8vw, 1rem);
    min-width: 0;
    min-height: 38rem
}

.analytics-flow__levels,
.analytics-flow__diagram {
    position: relative;
    min-width: 0
}

.analytics-flow__diagram {
    min-height: inherit
}

.analytics-zone-label {
    position: absolute;
    z-index: 4;
    left: 0;
    display: grid;
    gap: .1875rem;
    transform: translateY(-50%);
    pointer-events: none
}

.analytics-zone-label--strategies {
    top: 3%
}

.analytics-zone-label--campaigns {
    top: 44.65%
}

.analytics-zone-label--user {
    top: 89.68%
}

.analytics-zone-label span {
    color: var(--color-contrast-2);
    font-size: clamp(.75rem, .6875rem + .2vw, .875rem);
    line-height: 1.1
}

.analytics-zone-label small {
    display: none;
    color: var(--color-contrast-4);
    font-size: clamp(.625rem, .5625rem + .12vw, .6875rem);
    line-height: 1.1
}

.analytics-flow__svg {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible
}

.analytics-link {
    fill: none;
    opacity: 1;
    vector-effect: non-scaling-stroke
}

.analytics-link {
    stroke: rgb(var(--rgb-market-long) / .42);
    stroke-linecap: butt;
    stroke-width: 1.5
}

.analytics-link--short {
    stroke: rgb(var(--rgb-market-short) / .44)
}

.analytics-link--campaign {
    stroke: rgb(var(--rgb-accent-muted) / .48);
    stroke-width: 1.75
}

.analytics-svg-node,
.analytics-svg-node__ring,
.analytics-svg-node__plate,
.analytics-svg-node__core {
    vector-effect: non-scaling-stroke
}

.analytics-svg-node {
    pointer-events: none
}

.analytics-svg-node__plate {
    display: none;
    fill: none;
    opacity: 0
}

.analytics-svg-node__ring {
    fill: none;
    stroke: rgb(var(--rgb-accent-soft) / .28);
    stroke-linecap: round;
    stroke-width: 1px;
    opacity: 0
}

.analytics-svg-node--campaign .analytics-svg-node__ring {
    stroke: rgb(var(--rgb-accent-muted) / .44)
}

.analytics-svg-node--user .analytics-svg-node__ring {
    stroke: rgb(var(--rgb-accent-muted) / .5);
    stroke-width: var(--analytics-user-ring-width)
}

.analytics-svg-node__core {
    fill: var(--color-contrast);
    fill-opacity: .88;
    opacity: 0
}

.analytics-svg-node--campaign .analytics-svg-node__core {
    fill-opacity: .84
}

.analytics-node-layer {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none
}

.analytics-node {
    position: absolute;
    top: var(--analytics-node-y);
    left: var(--analytics-node-x);
    display: grid;
    width: var(--analytics-node-size, clamp(.625rem, 1.25vw, .75rem));
    aspect-ratio: 1;
    place-items: center;
    border-radius: var(--radius-pill);
    transform: translate(-50%, -50%)
}

.analytics-node--strategy {
    --analytics-node-color: var(--color-market-long);
    --analytics-node-ring: rgb(var(--rgb-market-long) / .22)
}

.analytics-node--strategy[data-side=short] {
    --analytics-node-color: var(--color-market-short);
    --analytics-node-ring: rgb(var(--rgb-market-short) / .22)
}

.analytics-node--campaign,
.analytics-node--user {
    --analytics-node-color: var(--color-contrast);
    --analytics-node-ring: rgb(var(--rgb-accent-muted) / .46);
    --analytics-node-size: clamp(2rem, 4.1vw, 3rem);
    border: 1px solid var(--analytics-node-ring);
    background: rgb(var(--rgb-base) / .94)
}

.analytics-node--user {
    --analytics-node-ring: rgb(var(--rgb-accent-muted) / .52);
    --analytics-node-size: clamp(4rem, 8.2vw, 5.6rem)
}

.analytics-scene[data-analytics-rollup-motion=ready] .analytics-node--campaign,
.analytics-scene[data-analytics-rollup-motion=ready] .analytics-node--user {
    opacity: 0
}

.analytics-node__dot {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: inherit;
    background: var(--analytics-node-color)
}

.analytics-node__dot:before {
    position: absolute;
    inset: -.4375rem;
    border: 1px solid var(--analytics-node-ring);
    border-radius: inherit;
    content: ""
}

.analytics-node--campaign .analytics-node__dot,
.analytics-node--user .analytics-node__dot {
    width: 36%;
    background: var(--analytics-node-color);
    opacity: .84
}

.analytics-node--user .analytics-node__dot {
    width: 34%;
    opacity: .88
}

.analytics-node--campaign .analytics-node__dot:before,
.analytics-node--user .analytics-node__dot:before {
    content: none
}

.analytics-metrics {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(.9375rem, 4vw, 1.3125rem) clamp(.625rem, 3vw, 1.25rem);
    justify-self: center;
    justify-content: center;
    justify-items: center;
    width: min(100%, 34rem);
    margin: 0;
    overflow: visible;
    text-align: center
}

.analytics-metric {
    display: grid;
    gap: .25rem;
    min-width: 0;
    min-height: 0;
    align-content: center;
    justify-items: center;
    padding: 0;
    text-align: center
}

.analytics-metric dt,
.analytics-metric dd {
    margin: 0
}

.analytics-metric dt {
    color: var(--color-contrast-3);
    font-size: .625rem;
    line-height: 1.1
}

.analytics-metric dd {
    color: var(--color-contrast);
    font-size: .875rem;
    line-height: 1
}

.analytics-metric--positive dd {
    color: var(--color-status-positive)
}

.analytics-scene[data-analytics-bridge-state=pending] .analytics-node--strategy {
    opacity: 0
}

html[data-motion=comfort] .analytics-flow__canvas,
html[data-motion=comfort] .analytics-node {
    opacity: 1;
    visibility: visible
}

html[data-motion=comfort] .analytics-flow__canvas,
html[data-motion=comfort] .analytics-scene :where(*, *:before, *:after) {
    animation: none;
    transition: none
}

html[data-motion=comfort] .analytics-scene[data-analytics-bridge-state=pending] .analytics-node--strategy,
html[data-motion=comfort] .analytics-scene[data-analytics-rollup-motion=ready] .analytics-node--campaign,
html[data-motion=comfort] .analytics-scene[data-analytics-rollup-motion=ready] .analytics-node--user {
    opacity: 1
}

@media(width>=23rem) {
    .analytics-flow__main {
        min-height: clamp(28rem, 130vw, 34rem)
    }
}

@media(width>=34rem) {
    .analytics-zone-label small {
        display: block
    }
    .analytics-metrics {
        width: min(100%, 40rem)
    }
    .analytics-metric {
        min-height: 0
    }
    .analytics-metric dt {
        font-size: .625rem
    }
    .analytics-metric dd {
        font-size: 1rem
    }
}

@media(width>=42rem) {
    .analytics-flow__main {
        min-height: clamp(30rem, 58vw, 38rem)
    }
}

@media(width>=48rem) {
    .analytics-metrics {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: clamp(.75rem, 1.5vw, 1.125rem);
        width: min(100%, 60rem)
    }
    .analytics-metric dt {
        font-size: .625rem
    }
    .analytics-metric dd {
        font-size: clamp(.875rem, 1.5vw, 1rem)
    }
}

@media(width>=64rem) {
    .analytics-flow__canvas {
        grid-template-columns: minmax(0, 1fr) clamp(6.5rem, 8vw, 7.75rem);
        align-items: stretch;
        gap: clamp(.75rem, 1.35vw, 1.125rem);
        padding-block: clamp(1.875rem, 3vw, 2.5rem);
        padding-inline: clamp(1.125rem, 2.2vw, 1.625rem)
    }
    .analytics-flow__main {
        grid-template-columns: clamp(5.75rem, 7.75vw, 7.5rem) minmax(0, 1fr);
        gap: clamp(1rem, 1.8vw, 1.5rem);
        min-height: clamp(25rem, 33vw, 31rem)
    }
    .analytics-metrics {
        align-self: stretch;
        align-content: space-between;
        justify-content: end;
        justify-self: end;
        justify-items: end;
        grid-template-columns: 1fr;
        gap: clamp(.5625rem, .9vw, .875rem);
        width: 100%;
        border: 0;
        border-radius: 0;
        background: transparent;
        overflow: visible;
        text-align: right
    }
    .analytics-metric {
        min-height: 0;
        justify-items: end;
        padding: 0;
        background: transparent;
        text-align: right
    }
    .analytics-metric dt {
        font-size: .625rem
    }
    .analytics-metric dd {
        font-size: 1rem
    }
}

@media(width>=75rem) {
    .analytics-flow__main {
        min-height: clamp(27rem, 33vw, 33rem)
    }
}

@media(width>=120rem) {
    .analytics-scene {
        --analytics-visual-width: 96rem;
        --analytics-user-ring-width: 2px
    }
    .analytics-scene__intro {
        max-width: min(100%, 72rem)
    }
    .analytics-flow__canvas {
        grid-template-columns: minmax(0, 1fr) clamp(8.5rem, 5.5vw, 10rem);
        gap: clamp(1.5rem, 1.4vw, 2.125rem);
        padding-block: clamp(2.375rem, 2.3vw, 3.25rem);
        padding-inline: clamp(1.875rem, 2vw, 2.75rem)
    }
    .analytics-flow__main {
        grid-template-columns: clamp(7.5rem, 5.5vw, 9.25rem) minmax(0, 1fr);
        gap: clamp(1.5rem, 1.3vw, 2rem);
        min-height: clamp(37rem, 29vw, 44rem)
    }
    .analytics-zone-label span {
        font-size: clamp(.875rem, .5vw, 1rem)
    }
    .analytics-zone-label small {
        font-size: clamp(.6875rem, .36vw, .75rem)
    }
    .analytics-link {
        stroke-width: 1.75
    }
    .analytics-link--campaign {
        stroke-width: 2
    }
    .analytics-node {
        --analytics-node-size: clamp(.6875rem, .5vw, .875rem)
    }
    .analytics-node--campaign {
        --analytics-node-size: clamp(2.45rem, 1.8vw, 3.45rem)
    }
    .analytics-node--user {
        --analytics-node-size: clamp(5rem, 3.45vw, 6.85rem)
    }
    .analytics-metric dt {
        font-size: .6875rem
    }
    .analytics-metric dd {
        font-size: 1.125rem
    }
}

@media(width>=160rem) {
    .analytics-scene {
        --analytics-visual-width: 118rem;
        --analytics-user-ring-width: 2.25px
    }
    .analytics-scene__intro {
        max-width: min(100%, 80rem)
    }
    .analytics-flow__canvas {
        grid-template-columns: minmax(0, 1fr) clamp(10.5rem, 4.5vw, 12.5rem);
        gap: clamp(2.5rem, 1.25vw, 3.25rem);
        padding-block: clamp(3.125rem, 1.8vw, 4.25rem);
        padding-inline: clamp(2.5rem, 1.6vw, 3.625rem)
    }
    .analytics-flow__main {
        grid-template-columns: clamp(8.5rem, 4vw, 10.5rem) minmax(0, 1fr);
        gap: clamp(1.875rem, 1vw, 2.5rem);
        min-height: clamp(46rem, 25vw, 56rem)
    }
    .analytics-zone-label span {
        font-size: clamp(1rem, .36vw, 1.125rem)
    }
    .analytics-zone-label small {
        font-size: clamp(.75rem, .26vw, .875rem)
    }
    .analytics-link {
        stroke-width: 2
    }
    .analytics-link--campaign {
        stroke-width: 2.25
    }
    .analytics-metric dt {
        font-size: .76rem
    }
    .analytics-metric dd {
        font-size: 1.375rem
    }
}

@media(height<=47.5rem)and (width>=75rem) {
    .analytics-scene__inner {
        gap: 1.5rem
    }
    .analytics-flow__main {
        min-height: 30rem
    }
}