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

.control-scene {
    --control-dimmed: rgb(var(--rgb-market-long) / .24)
}

.control-field {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(22rem, 110vw, 30rem);
    overflow: visible;
    --control-point-opacity: 1;
    --control-point-scale: 1
}

.control-field__board {
    --control-row-gap: clamp(.5rem, 1vw, .6875rem);
    display: grid;
    grid-template-columns: clamp(3.625rem, 6vw, 5rem) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(1rem, 2.2vw, 1.6875rem);
    width: min(100%, clamp(28rem, 62vw, 58rem));
    padding: clamp(.75rem, 1.5vw, .9375rem)
}

.control-field__strategy-rail {
    display: grid;
    grid-template-rows: repeat(5, minmax(0, 1fr));
    align-content: stretch;
    align-items: center;
    gap: var(--control-row-gap);
    justify-items: center;
    min-height: clamp(16rem, 28vw, 23rem);
    padding-block: 0
}

.control-field__strategy {
    --control-point-color: var(--color-market-long);
    --control-pulse-border: rgb(var(--rgb-market-long) / .48);
    --control-pulse-fill: rgb(var(--rgb-market-long) / .075);
    position: relative;
    width: clamp(.5625rem, .72vw, .75rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--control-point-color);
    opacity: var(--control-point-opacity);
    transform: scale(var(--control-point-scale));
    transition: opacity .24s ease, background-color .24s ease, transform .24s ease;
    pointer-events: none
}

.control-field__strategy:after {
    position: absolute;
    content: "";
    inset: -.4375rem;
    border: 1px solid var(--control-pulse-border);
    border-radius: inherit;
    background: var(--control-pulse-fill);
    opacity: 0;
    transform: scale(.75);
    animation-delay: var(--control-pulse-delay, 0s)
}

.control-field[data-control-state=active] .control-field__strategy:after,
.control-field[data-control-state=resumed] .control-field__strategy:after {
    animation: control-point-pulse 1.65s ease-in-out infinite
}

.control-field__strategy[data-side=short] {
    --control-point-color: var(--color-market-short);
    --control-pulse-border: rgb(var(--rgb-market-short) / .5);
    --control-pulse-fill: rgb(var(--rgb-market-short) / .095)
}

.control-field[data-control-bridge-state=pending] .control-field__strategy {
    --control-point-opacity: 0;
    --control-point-scale: .75;
    transition: none
}

.control-field[data-control-bridge-state=pending] .control-field__strategy:after {
    animation: none;
    opacity: 0
}

.control-scene[data-control-bridge-state=pending] .control-scene__intro>* {
    opacity: 0;
    transform: translateY(18px)
}

.control-scene[data-control-bridge-state=pending] .control-field__board {
    opacity: 0;
    transform: translateY(16px) scale(.985);
    transform-origin: 50% 50%
}

.control-scene[data-control-bridge-state=pending] .control-field__state {
    --control-state-entrance-x: 18px;
    --control-state-entrance-y: 10px
}

.control-field__strategy--one {
    --control-pulse-delay: 0s
}

.control-field__strategy--two {
    --control-pulse-delay: .12s
}

.control-field__strategy--three {
    --control-pulse-delay: .24s
}

.control-field__strategy--four {
    --control-pulse-delay: .36s
}

.control-field__strategy--five {
    --control-pulse-delay: .48s
}

.control-field__states {
    display: grid;
    grid-template-rows: repeat(5, minmax(0, 1fr));
    align-content: stretch;
    align-items: center;
    gap: var(--control-row-gap)
}

.control-field__state {
    --control-state-entrance-x: 0px;
    --control-state-entrance-y: 0px;
    --control-state-x: -.25rem;
    appearance: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(2.8rem, 3.5rem);
    align-items: center;
    gap: .25rem;
    min-height: clamp(3.25rem, 5.2vw, 4rem);
    padding: clamp(.75rem, 1.24vw, .9375rem) clamp(.875rem, 1.55vw, 1.125rem);
    opacity: .38;
    transform: translate(calc(var(--control-state-x) + var(--control-state-entrance-x))) translateY(var(--control-state-entrance-y));
    color: inherit;
    text-align: start;
    cursor: pointer;
    transition: opacity .24s ease, border-color .24s ease, background-color .24s ease, transform .24s ease
}

.control-field__state:focus-visible {
    outline: 1px solid var(--color-focus-ring);
    outline-offset: .1875rem
}

@media(hover:hover)and (pointer:fine) {
    .control-field__state:hover {
        --control-state-x: -.125rem;
        opacity: .74;
        border-color: var(--color-contrast-5);
        background: var(--color-surface-glass)
    }
    .control-field__state:hover .control-field__state-title {
        color: var(--color-contrast)
    }
    .control-field__state:hover .control-field__state-copy,
    .control-field__state:hover .control-field__state-visual {
        opacity: .78
    }
    .control-field__state[aria-pressed=true]:hover {
        --control-state-x: 0rem;
        opacity: 1;
        border-color: var(--color-contrast-5);
        background: var(--color-surface-glass-active)
    }
}

.control-field__state-text {
    display: grid;
    gap: .25rem;
    min-width: 0
}

.control-field__state-title {
    color: var(--color-contrast-2);
    font-family: var(--font-body);
    font-size: clamp(.875rem, .8125rem + .18vw, 1rem);
    line-height: 1.15
}

.control-field__state-copy {
    color: var(--color-contrast-4);
    font-family: var(--font-body);
    font-size: clamp(.75rem, .6875rem + .14vw, .8125rem);
    line-height: 1.25
}

.control-field__state-visual {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(.3125rem, .8vw, .5625rem);
    width: min(100%, 3.5rem);
    height: 2rem;
    justify-self: end;
    opacity: .58;
    transition: opacity .24s ease
}

.control-field__state-visual span {
    display: block;
    flex: 0 0 auto
}

.control-field__state-visual--live span,
.control-field__state-visual--resume span {
    width: .3125rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgb(var(--rgb-market-long) / .82)
}

.control-field__state-visual--live span:nth-child(2),
.control-field__state-visual--live span:nth-child(4) {
    background: rgb(var(--rgb-market-short) / .82)
}

.control-field__state-visual--drop,
.control-field__state-visual--rally {
    align-items: stretch;
    gap: clamp(.1875rem, .44vw, .3125rem);
    height: 2.5625rem
}

.control-field__state-visual--drop span,
.control-field__state-visual--rally span {
    --control-candle-color: rgb(var(--rgb-market-long) / .86);
    --control-candle-wick: rgb(var(--rgb-market-long) / .54);
    --control-candle-body-top: 40%;
    --control-candle-body-height: 14%;
    --control-candle-wick-top: 28%;
    --control-candle-wick-height: 36%;
    position: relative;
    width: clamp(.25rem, .5vw, .375rem);
    height: 100%;
    background: transparent
}

.control-field__state-visual--drop span:before,
.control-field__state-visual--rally span:before {
    position: absolute;
    content: "";
    top: var(--control-candle-wick-top);
    left: 50%;
    width: 1px;
    height: var(--control-candle-wick-height);
    transform: translate(-50%);
    background: var(--control-candle-wick)
}

.control-field__state-visual--drop span:after,
.control-field__state-visual--rally span:after {
    position: absolute;
    content: "";
    top: var(--control-candle-body-top);
    left: 50%;
    width: .25rem;
    height: max(2px, var(--control-candle-body-height));
    border-radius: var(--radius-pill);
    transform: translate(-50%);
    background: var(--control-candle-color)
}

.control-field__state-visual--drop span {
    --control-candle-color: rgb(var(--rgb-market-short) / .82);
    --control-candle-wick: rgb(var(--rgb-market-short) / .52)
}

.control-field__state-visual--drop span:nth-child(1) {
    --control-candle-color: rgb(var(--rgb-market-long) / .82);
    --control-candle-wick: rgb(var(--rgb-market-long) / .48);
    --control-candle-body-top: 49%;
    --control-candle-body-height: 7%;
    --control-candle-wick-top: 45%;
    --control-candle-wick-height: 16%
}

.control-field__state-visual--drop span:nth-child(2) {
    --control-candle-body-top: 49%;
    --control-candle-body-height: 4%;
    --control-candle-wick-top: 46%;
    --control-candle-wick-height: 12%
}

.control-field__state-visual--drop span:nth-child(3) {
    --control-candle-color: rgb(var(--rgb-market-long) / .82);
    --control-candle-wick: rgb(var(--rgb-market-long) / .48);
    --control-candle-body-top: 47%;
    --control-candle-body-height: 6%;
    --control-candle-wick-top: 43%;
    --control-candle-wick-height: 13%
}

.control-field__state-visual--drop span:nth-child(4) {
    --control-candle-body-top: 47%;
    --control-candle-body-height: 6%;
    --control-candle-wick-top: 44%;
    --control-candle-wick-height: 11%
}

.control-field__state-visual--drop span:nth-child(5) {
    --control-candle-body-top: 53%;
    --control-candle-body-height: 44%;
    --control-candle-wick-top: 49%;
    --control-candle-wick-height: 50%
}

.control-field__state-visual--rally span {
    --control-candle-color: rgb(var(--rgb-market-long) / .86);
    --control-candle-wick: rgb(var(--rgb-market-long) / .52)
}

.control-field__state-visual--rally span:nth-child(1) {
    --control-candle-color: rgb(var(--rgb-market-short) / .8);
    --control-candle-wick: rgb(var(--rgb-market-short) / .5);
    --control-candle-body-top: 48%;
    --control-candle-body-height: 7%;
    --control-candle-wick-top: 43%;
    --control-candle-wick-height: 16%
}

.control-field__state-visual--rally span:nth-child(2) {
    --control-candle-body-top: 50%;
    --control-candle-body-height: 5%;
    --control-candle-wick-top: 47%;
    --control-candle-wick-height: 12%
}

.control-field__state-visual--rally span:nth-child(3) {
    --control-candle-color: rgb(var(--rgb-market-short) / .8);
    --control-candle-wick: rgb(var(--rgb-market-short) / .5);
    --control-candle-body-top: 50%;
    --control-candle-body-height: 8%;
    --control-candle-wick-top: 46%;
    --control-candle-wick-height: 15%
}

.control-field__state-visual--rally span:nth-child(4) {
    --control-candle-body-top: 52%;
    --control-candle-body-height: 6%;
    --control-candle-wick-top: 49%;
    --control-candle-wick-height: 13%
}

.control-field__state-visual--rally span:nth-child(5) {
    --control-candle-body-top: 6%;
    --control-candle-body-height: 46%;
    --control-candle-wick-top: 2%;
    --control-candle-wick-height: 54%
}

.control-field__state-visual--pause span {
    width: .1875rem;
    height: 1.3125rem;
    border-radius: var(--radius-pill);
    background: var(--color-contrast-4)
}

.control-field__state-visual--resume span:nth-child(1) {
    opacity: .36
}

.control-field__state-visual--resume span:nth-child(2) {
    opacity: .62
}

.control-field__state-visual--resume span:nth-child(3) {
    opacity: 1
}

.control-field[data-control-state=active] [data-control-status=active],
.control-field[data-control-state=down-protect] [data-control-status=down-protect],
.control-field[data-control-state=up-protect] [data-control-status=up-protect],
.control-field[data-control-state=paused] [data-control-status=paused],
.control-field[data-control-state=resumed] [data-control-status=resumed] {
    --control-state-x: 0rem;
    opacity: 1;
    border-color: var(--color-contrast-5);
    background: var(--color-surface-glass-active)
}

.control-field[data-control-state=active] [data-control-status=active] .control-field__state-visual,
.control-field[data-control-state=down-protect] [data-control-status=down-protect] .control-field__state-visual,
.control-field[data-control-state=up-protect] [data-control-status=up-protect] .control-field__state-visual,
.control-field[data-control-state=paused] [data-control-status=paused] .control-field__state-visual,
.control-field[data-control-state=resumed] [data-control-status=resumed] .control-field__state-visual {
    opacity: 1
}

.control-field[data-control-state=down-protect] [data-control-status=down-protect] .control-field__state-title,
.control-field[data-control-state=up-protect] [data-control-status=up-protect] .control-field__state-title {
    color: var(--color-contrast)
}

.control-field[data-control-state=down-protect] .control-field__strategy[data-side=long] {
    --control-point-opacity: .28;
    --control-point-scale: .86;
    background: var(--control-dimmed)
}

.control-field[data-control-state=up-protect] .control-field__strategy[data-side=short] {
    --control-point-opacity: .28;
    --control-point-scale: .86;
    background: rgb(var(--rgb-market-short) / .22)
}

.control-field[data-control-state=down-protect] .control-field__strategy[data-side=long]:after,
.control-field[data-control-state=up-protect] .control-field__strategy[data-side=short]:after {
    animation: none;
    opacity: 0
}

.control-field[data-control-state=down-protect] .control-field__strategy[data-side=short]:after,
.control-field[data-control-state=up-protect] .control-field__strategy[data-side=long]:after {
    animation: control-point-pulse 1.65s ease-in-out infinite
}

.control-field[data-control-state=paused] .control-field__strategy {
    --control-point-opacity: .26;
    --control-point-scale: .86;
    background: var(--control-dimmed)
}

.control-field[data-control-state=paused] .control-field__strategy:after {
    animation: none;
    opacity: 0
}

.control-field[data-control-state=resumed] .control-field__strategy {
    --control-point-opacity: 1
}

.control-field[data-control-state=resumed] .control-field__strategy--one {
    transition-delay: 0s
}

.control-field[data-control-state=resumed] .control-field__strategy--two {
    transition-delay: .04s
}

.control-field[data-control-state=resumed] .control-field__strategy--three {
    transition-delay: .08s
}

.control-field[data-control-state=resumed] .control-field__strategy--four {
    transition-delay: .12s
}

.control-field[data-control-state=resumed] .control-field__strategy--five {
    transition-delay: .16s
}

.control-field[data-control-state][data-control-analytics-bridge-state=moving] .control-field__strategy {
    --control-point-opacity: 0;
    --control-point-scale: .75;
    transition: none
}

.control-field[data-control-state][data-control-analytics-bridge-state=moving] .control-field__strategy:after {
    animation: none;
    opacity: 0
}

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

html[data-motion=comfort] .control-field[data-control-bridge-state=pending] .control-field__strategy,
html[data-motion=comfort] .control-field[data-control-state][data-control-analytics-bridge-state=moving] .control-field__strategy {
    --control-point-opacity: 1;
    --control-point-scale: 1
}

html[data-motion=comfort] .control-field__strategy:after,
html[data-motion=comfort] .control-field[data-control-state][data-control-analytics-bridge-state=moving] .control-field__strategy:after {
    opacity: 0
}

html[data-motion=comfort] .control-scene[data-control-bridge-state=pending] .control-scene__intro>*,
html[data-motion=comfort] .control-scene[data-control-bridge-state=pending] .control-field__board {
    opacity: 1;
    transform: none
}

@keyframes control-point-pulse {

    0%,
    to {
        opacity: 0;
        transform: scale(.75)
    }

    35% {
        opacity: .74;
        transform: scale(1.02)
    }

    78% {
        opacity: 0;
        transform: scale(1.42)
    }
}

@media(min-width:48rem) {
    .control-field {
        min-height: clamp(20rem, 42vw, 32rem)
    }
    .control-field__strategy-rail {
        padding-block: 0
    }
}

@media(min-width:120rem) {
    .control-field {
        min-height: clamp(36rem, 27vw, 44rem)
    }
    .control-field__board {
        --control-row-gap: clamp(.6875rem, .58vw, .875rem);
        grid-template-columns: clamp(5rem, 3.7vw, 6.375rem) minmax(0, 1fr);
        gap: clamp(1.375rem, 1.4vw, 2.125rem);
        width: min(100%, 82rem);
        padding: clamp(1rem, .82vw, 1.25rem)
    }
    .control-field__strategy-rail {
        min-height: clamp(28rem, 21vw, 35rem);
        padding-block: 0
    }
    .control-field__state {
        grid-template-columns: minmax(0, 1fr) minmax(3.625rem, 4.75rem);
        min-height: clamp(4.75rem, 3.1vw, 5.625rem);
        padding: clamp(.875rem, .72vw, 1.0625rem) clamp(1rem, .82vw, 1.25rem)
    }
    .control-field__state-title {
        font-size: 1.1875rem
    }
    .control-field__state-copy {
        font-size: .9375rem
    }
    .control-field__state-visual {
        width: min(100%, 4.625rem);
        height: 2.5rem
    }
}

@media(min-width:160rem) {
    .control-field {
        min-height: clamp(43rem, 22vw, 52rem)
    }
    .control-field__board {
        --control-row-gap: clamp(.8125rem, .42vw, 1rem);
        grid-template-columns: clamp(5.75rem, 2.5vw, 7rem) minmax(0, 1fr);
        gap: clamp(1.5625rem, 1vw, 2.25rem);
        width: min(100%, 92rem);
        padding: clamp(1.1875rem, .625vw, 1.5rem)
    }
    .control-field__strategy-rail {
        min-height: clamp(34rem, 17vw, 41rem);
        padding-block: 0
    }
    .control-field__strategy {
        width: clamp(.8125rem, .38vw, 1rem)
    }
    .control-field__state {
        grid-template-columns: minmax(0, 1fr) minmax(4.25rem, 5.375rem);
        min-height: clamp(5.5rem, 2.45vw, 6.5rem);
        padding: clamp(1.0625rem, .5625vw, 1.3125rem) clamp(1.1875rem, .625vw, 1.5rem)
    }
    .control-field__state-title {
        font-size: 1.3125rem
    }
    .control-field__state-copy {
        font-size: 1rem
    }
    .control-field__state-visual {
        width: min(100%, 5.25rem);
        height: 3rem
    }
}

@media(height<=38.75rem)and (width>=75rem) {
    .control-field {
        min-height: 25rem
    }
}

[data-control-analytics-bridge] .control-analytics-bridge__dot {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: var(--radius-pill);
    background: var(--color-market-long)
}

[data-control-analytics-bridge] .control-analytics-bridge__dot[data-side=short] {
    background: var(--color-market-short)
}