:root {
    color-scheme: dark;
    --lab-bg: #06101c;
    --lab-panel: #0b1929;
    --lab-panel-2: #0e2235;
    --lab-line: #1b425c;
    --lab-cyan: #48e8e0;
    --lab-blue: #4b8cff;
    --lab-red: #ff5f72;
    --lab-gold: #ffc857;
    --lab-text: #e9f7ff;
    --lab-muted: #86a5b8;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
    background: var(--lab-bg);
    color: var(--lab-text);
    font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
    line-height: 1.55;
}

button { font: inherit; }

.lab-shell {
    width: min(1120px, calc(100% - 24px));
    margin: 0 auto;
    padding: 20px 0 42px;
}

.lab-topbar {
    display: flex;
    justify-content: flex-end;
    gap: 18px;
    align-items: center;
    padding: 8px 0 18px;
    border-bottom: 1px solid var(--lab-line);
}

.lab-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--lab-muted);
    font-size: 12px;
    letter-spacing: .08em;
}

.lab-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lab-cyan);
    box-shadow: 0 0 14px rgba(72, 232, 224, .9);
    animation: livePulse 1.8s ease-in-out infinite;
}

.lab-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: end;
    padding: 14px 0 24px;
}

.lab-kicker {
    margin: 0 0 6px;
    color: var(--lab-cyan);
    font: 600 12px/1.3 ui-monospace, Consolas, monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.lab-hero h1 {
    margin: 0;
    max-width: 760px;
    font-size: clamp(1.15rem, 4.2vw, 1.5rem);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .08em;
}

.lab-hero h1 span { color: var(--lab-cyan); }

.lab-intro {
    max-width: 720px;
    margin: 14px 0 0;
    color: var(--lab-muted);
    font-size: 15px;
}

.lab-period {
    min-width: 176px;
    padding-left: 20px;
    border-left: 1px solid var(--lab-line);
}

.lab-period span { display: block; color: var(--lab-muted); font-size: 12px; }
.lab-period strong { display: block; margin-top: 4px; color: var(--lab-gold); font-size: 26px; }

.lab-notice {
    margin: 0 0 22px;
    padding: 12px 14px;
    border: 1px solid #28465a;
    background: #0a1724;
    color: #a9c1cf;
    font-size: 12px;
}

.track-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.track-tab {
    min-height: 78px;
    padding: 13px 16px;
    border: 1px solid var(--lab-line);
    border-radius: 8px;
    background: #091725;
    color: var(--lab-text);
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}

.track-tab:hover { transform: translateY(-2px); border-color: #337294; }
.track-tab[aria-selected="true"] { background: #0c2434; border-color: var(--lab-cyan); }
.track-tab strong { display: block; font-size: 16px; }
.track-tab span { display: block; margin-top: 3px; color: var(--lab-muted); font-size: 12px; }

.lab-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.lab-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--lab-line);
    border-radius: 12px;
    background: var(--lab-panel);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .24);
}

.lab-panel::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 72px;
    height: 1px;
    background: var(--lab-cyan);
    box-shadow: 0 0 18px rgba(72, 232, 224, .7);
}

.panel-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
    padding: 18px 20px 0;
}

.panel-head h2, .panel-head h3 { margin: 0; font-size: 17px; }
.panel-head p { margin: 4px 0 0; color: var(--lab-muted); font-size: 12px; }

.panel-rate {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px 8px;
}

.panel-rate strong {
    font: 800 16px/1.2 ui-monospace, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.panel-rate.blue-rate strong { color: var(--lab-cyan); }
.panel-rate.red-rate strong { color: var(--lab-red); }

.method-code {
    color: var(--lab-cyan);
    font: 11px/1.3 ui-monospace, Consolas, monospace;
    letter-spacing: .08em;
}

.blue-scene { min-height: 430px; }

.bubble-stage {
    position: relative;
    height: 310px;
    margin: 4px 16px 0;
    overflow: hidden;
    display: grid;
    place-items: center;
}

.bubble-cluster {
    position: relative;
    width: min(280px, 96%);
    aspect-ratio: 1;
    isolation: isolate;
}

.bubble-cluster::before {
    content: "";
    position: absolute;
    inset: 12%;
    z-index: 0;
    border: 1px solid rgba(72, 232, 224, .08);
    border-radius: 50%;
    box-shadow:
        0 0 0 30px rgba(75, 140, 255, .018),
        inset 0 0 28px rgba(72, 232, 224, .035);
    pointer-events: none;
    animation: blueFieldPulse 7.5s ease-in-out infinite;
}

.blue-bubble {
    --bubble-size: 40px;
    --bubble-color: #153c62;
    --bubble-delay: 0ms;
    --bubble-left: 50%;
    --bubble-top: 50%;
    --bubble-opacity: .6;
    --bubble-depth: 1;
    --bubble-font: 11px;
    --motion-x: 2px;
    --motion-x-neg: -2px;
    --motion-y: 2px;
    --motion-y-neg: -2px;
    --motion-scale: 1.06;
    --motion-opacity-low: .24;
    --motion-opacity-mid: .38;
    --motion-duration: 10s;
    --motion-delay: 0s;
    position: absolute;
    left: var(--bubble-left);
    top: var(--bubble-top);
    width: var(--bubble-size);
    height: var(--bubble-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(126, 194, 255, .42);
    background: var(--bubble-color);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    color: #fff;
    opacity: var(--bubble-opacity);
    z-index: var(--bubble-depth);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2), 0 9px 18px rgba(0, 0, 0, .4);
    transform: translate(-50%, -50%);
    animation: bubbleIn .42s cubic-bezier(.2, .8, .2, 1) var(--bubble-delay) both;
    will-change: translate, scale, opacity, filter;
}

.blue-bubble.is-pick {
    border-color: rgba(151, 244, 255, .9);
    box-shadow:
        inset 0 2px 2px rgba(255, 255, 255, .25),
        0 0 25px rgba(72, 232, 224, .23),
        0 14px 22px rgba(0, 0, 0, .48);
}

.blue-bubble.is-center {
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, .3),
        0 0 30px rgba(72, 232, 224, .3),
        0 17px 26px rgba(0, 0, 0, .55);
    animation:
        bubbleIn .42s cubic-bezier(.2, .8, .2, 1) var(--bubble-delay) both,
        blueCenterFloat var(--motion-duration) ease-in-out var(--motion-delay) infinite;
}

.blue-bubble.is-pick:not(.is-center) {
    animation:
        bubbleIn .42s cubic-bezier(.2, .8, .2, 1) var(--bubble-delay) both,
        blueOrbitFloat var(--motion-duration) ease-in-out var(--motion-delay) infinite;
}

.bubble-number {
    font: 800 var(--bubble-font)/1 ui-monospace, Consolas, monospace;
    letter-spacing: -.04em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .38);
}

.blue-bubble.is-other {
    color: rgba(220, 238, 250, .72);
    border-color: rgba(75, 140, 255, .18);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .08), 0 6px 12px rgba(0, 0, 0, .3);
    animation:
        bubbleIn .42s cubic-bezier(.2, .8, .2, 1) var(--bubble-delay) both,
        blueBackgroundPulse var(--motion-duration) ease-in-out var(--motion-delay) infinite;
}

.blue-bubble:hover { border-color: var(--lab-cyan); opacity: 1; z-index: 240; animation-play-state: paused; }

.pick-readout {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 58px;
    padding: 8px 20px 18px;
    border-top: 1px solid rgba(27, 66, 92, .72);
}

.pick-readout > span:first-child { margin-right: auto; color: var(--lab-muted); font-size: 12px; }

.number-ball {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    font-weight: 800;
}

.number-ball.blue { background: #266bce; box-shadow: 0 0 17px rgba(75, 140, 255, .45); }
.number-ball.red { background: #bd354a; box-shadow: 0 0 17px rgba(255, 95, 114, .34); }

.red-field { min-height: 430px; }

.red-matrix-wrap {
    min-height: 310px;
    padding: 8px 20px 10px;
    display: grid;
    place-items: center;
}

.red-matrix {
    position: relative;
    width: min(240px, 96%);
    aspect-ratio: 1;
    isolation: isolate;
    border: 1px solid rgba(255, 95, 114, .18);
    background:
        radial-gradient(circle at 20% 28%, rgba(174, 48, 68, .11), transparent 35%),
        radial-gradient(circle at 78% 72%, rgba(126, 39, 58, .09), transparent 34%),
        #0a1724;
    box-shadow: 0 18px 25px rgba(0, 0, 0, .24);
    overflow: hidden;
}

.red-matrix::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 95, 114, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 95, 114, .025) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    animation: redFieldPulse 8s ease-in-out infinite;
}

.red-cell {
    --red-size: 34px;
    --red-font: 11px;
    --red-opacity: .6;
    --red-depth: 1;
    --red-left: 50%;
    --red-top: 50%;
    --red-tilt: 0deg;
    --red-delay: 0ms;
    --motion-x: 2px;
    --motion-x-neg: -2px;
    --motion-y: 2px;
    --motion-y-neg: -2px;
    --motion-scale: 1.06;
    --motion-opacity-low: .24;
    --motion-opacity-mid: .38;
    --motion-duration: 10s;
    --motion-delay: 0s;
    position: absolute;
    left: var(--red-left);
    top: var(--red-top);
    width: var(--red-size);
    height: var(--red-size);
    display: grid;
    place-items: center;
    z-index: var(--red-depth);
    opacity: var(--red-opacity);
    border: 1px solid #3b3342;
    background: #151c29;
    color: #9db0bc;
    border-radius: 6px;
    font: 800 var(--red-font)/1 ui-monospace, Consolas, monospace;
    letter-spacing: -.04em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    box-shadow: 0 5px 12px rgba(0, 0, 0, .2);
    transform: translate(-50%, -50%) rotate(var(--red-tilt));
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease, opacity .2s ease;
    animation: redIn .35s cubic-bezier(.2, .8, .2, 1) var(--red-delay) both;
    will-change: translate, scale, opacity, filter;
}

.red-cell:hover { transform: translate(-50%, -50%) rotate(0) scale(1.08); border-color: #9e5260; opacity: 1; z-index: 240; animation-play-state: paused; }
.red-cell.level-2 { background: #2b1f2c; color: #d9b2b8; }
.red-cell.level-3 { background: #542939; color: #ffe1e5; }
.red-cell.is-pick {
    background: rgba(159, 48, 67, .86);
    border-color: var(--lab-red);
    color: white;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.18), 0 0 18px rgba(255, 95, 114, .38), 0 10px 17px rgba(0, 0, 0, .44);
    animation:
        redIn .35s cubic-bezier(.2, .8, .2, 1) var(--red-delay) both,
        redPickDrift var(--motion-duration) ease-in-out var(--motion-delay) infinite;
}

.red-cell.is-center {
    box-shadow: inset 0 2px 2px rgba(255,255,255,.22), 0 0 24px rgba(255, 95, 114, .48), 0 14px 22px rgba(0, 0, 0, .52);
    animation:
        redIn .35s cubic-bezier(.2, .8, .2, 1) var(--red-delay) both,
        redCenterFloat var(--motion-duration) ease-in-out var(--motion-delay) infinite;
}

.red-cell:not(.is-pick) {
    animation:
        redIn .35s cubic-bezier(.2, .8, .2, 1) var(--red-delay) both,
        redBackgroundPulse var(--motion-duration) ease-in-out var(--motion-delay) infinite;
}

.wide-panel { grid-column: 1 / -1; }

.chart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(260px, .75fr);
    gap: 18px;
    padding: 16px 20px 20px;
}

.chart-box { position: relative; min-height: 240px; }
#stabilityCanvas { width: 100%; height: 240px; display: block; }

.weights-box {
    padding-left: 18px;
    border-left: 1px solid var(--lab-line);
}

.weights-box h4 { margin: 0 0 12px; font-size: 13px; }
.weight-row { display: grid; grid-template-columns: 92px 1fr 44px; gap: 8px; align-items: center; margin: 10px 0; }
.weight-row span { color: var(--lab-muted); font-size: 11px; }
.weight-track { height: 5px; background: #17283a; overflow: hidden; }
.weight-track i { display: block; height: 100%; background: var(--lab-cyan); box-shadow: 0 0 10px rgba(72, 232, 224, .5); }
.weight-row b { text-align: right; color: #cce6ef; font: 11px/1 ui-monospace, Consolas, monospace; }

.comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 0;
}

.comparison-section { grid-column: 1 / -1; }
.comparison-head { padding: 2px 0 10px; }
.comparison-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 16px 20px;
    border: 1px solid var(--lab-line);
    border-radius: 12px;
    background: var(--lab-panel);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .24);
}
.comparison-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 72px;
    height: 1px;
    background: var(--lab-cyan);
    box-shadow: 0 0 18px rgba(72, 232, 224, .7);
}
.comparison-card h4 { margin: 0 0 9px; font-size: 13px; }
.comparison-line { display: flex; justify-content: space-between; gap: 12px; margin: 7px 0; color: var(--lab-muted); font-size: 12px; }
.comparison-line strong { color: var(--lab-text); }

.method-note { padding: 0 20px 20px; color: var(--lab-muted); font-size: 12px; }
.method-note strong { color: var(--lab-cyan); }

.lab-error {
    display: none;
    padding: 22px;
    border: 1px solid #783849;
    background: #25131b;
    color: #ffd6dc;
}

.lab-footer { padding: 24px 0 0; color: #607f92; font-size: 11px; text-align: center; }

@keyframes livePulse {
    0%, 100% { opacity: .45; transform: scale(.82); }
    50% { opacity: 1; transform: scale(1.1); }
}

@keyframes bubbleIn {
    from { opacity: 0; }
    to { opacity: var(--bubble-opacity); }
}

@keyframes redIn {
    from { opacity: 0; }
    to { opacity: var(--red-opacity); }
}

@keyframes blueFieldPulse {
    0%, 100% { opacity: .42; scale: .98; }
    50% { opacity: .82; scale: 1.02; }
}

@keyframes blueCenterFloat {
    0%, 100% { translate: var(--motion-x-neg) 0; }
    33% { translate: 0 var(--motion-y-neg); }
    66% { translate: var(--motion-x) var(--motion-y); }
}

@keyframes blueOrbitFloat {
    0%, 100% { translate: var(--motion-x-neg) 0; }
    25% { translate: 0 var(--motion-y-neg); }
    50% { translate: var(--motion-x) 0; }
    75% { translate: 0 var(--motion-y); }
}

@keyframes blueBackgroundPulse {
    0%, 100% {
        translate: var(--motion-x-neg) var(--motion-y);
        scale: .92;
        opacity: var(--motion-opacity-low);
        filter: brightness(.82) saturate(.86);
    }
    45% {
        translate: var(--motion-x) var(--motion-y-neg);
        scale: var(--motion-scale);
        opacity: var(--bubble-opacity);
        filter: brightness(1.15) saturate(1.08);
    }
    72% {
        translate: 0 var(--motion-y);
        scale: .98;
        opacity: var(--motion-opacity-mid);
        filter: brightness(.94);
    }
}

@keyframes redFieldPulse {
    0%, 100% { opacity: .38; background-position: 0 0, 0 0; }
    50% { opacity: .82; background-position: 0 8px, 8px 0; }
}

@keyframes redCenterFloat {
    0%, 100% { translate: var(--motion-x-neg) var(--motion-y-neg); }
    38% { translate: var(--motion-x) 0; }
    72% { translate: 0 var(--motion-y); }
}

@keyframes redPickDrift {
    0%, 100% { translate: var(--motion-x-neg) 0; }
    32% { translate: var(--motion-x) var(--motion-y-neg); }
    68% { translate: 0 var(--motion-y); }
}

@keyframes redBackgroundPulse {
    0%, 100% {
        translate: var(--motion-x-neg) var(--motion-y-neg);
        scale: .94;
        opacity: var(--motion-opacity-low);
        filter: brightness(.82);
    }
    46% {
        translate: var(--motion-x) var(--motion-y);
        scale: var(--motion-scale);
        opacity: var(--red-opacity);
        filter: brightness(1.16) saturate(1.08);
    }
    74% {
        translate: var(--motion-x-neg) 0;
        scale: .99;
        opacity: var(--motion-opacity-mid);
        filter: brightness(.95);
    }
}

@media (max-width: 820px) {
    .lab-hero { grid-template-columns: 1fr; }
    .lab-period { padding: 0; border: 0; }
    .lab-grid { grid-template-columns: 1fr; }
    .chart-layout { grid-template-columns: 1fr; }
    .weights-box { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--lab-line); }
}

@media (max-width: 560px) {
    .lab-shell { width: min(100% - 16px, 1120px); padding-top: 8px; }
    .lab-topbar { align-items: flex-start; }
    .lab-hero { padding-top: 14px; }
    .track-tabs { grid-template-columns: 1fr; }
    .panel-head { padding-inline: 14px; }
    .bubble-stage { height: 300px; margin-inline: 0; }
    .bubble-cluster { width: min(280px, 100%); }
    .red-matrix-wrap { padding-inline: 9px; }
    .red-matrix { width: min(240px, 100%); }
    .red-cell { width: min(var(--red-size), 64px); height: min(var(--red-size), 64px); font-size: min(var(--red-font), 18px); }
    .pick-readout { padding-inline: 14px; }
    .number-ball { width: 36px; height: 36px; }
    .comparison { grid-template-columns: 1fr; padding-inline: 14px; }
    .comparison-head { padding-inline: 14px; }
    .chart-layout { padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}