*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#FAFBFC;font-family:'IBM Plex Sans',sans-serif;font-weight:400;font-size:15px;line-height:1.75;color:#3A4050;overflow-x:hidden}
.status-bar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:12px;padding:10px 24px;background:#FAFBFC;border-bottom:1px solid #D0D4DA;font-family:'IBM Plex Mono',monospace;font-size:12px;color:#8890A0;opacity:0;transition:opacity 0.4s ease}
.status-bar.visible{opacity:1}
.status-dot{width:8px;height:8px;border-radius:50%;background:#34B06E;display:inline-block;animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:0.4}}
.status-text{color:#3A4050;font-weight:600;letter-spacing:0.04em;text-transform:uppercase}
.status-ping{margin-left:auto;color:#8890A0}
.container{max-width:880px;margin:0 auto;padding:80px 120px 120px 120px;position:relative}
.hero{padding:60px 0 40px;opacity:0;transform:translateY(16px);transition:all 0.5s ease}
.hero.visible{opacity:1;transform:translateY(0)}
.network-diagram{margin-bottom:32px}
.network-diagram svg{width:100%;max-width:400px;height:280px}
.network-diagram circle{fill:none;stroke:#4A90D9;stroke-width:1.5;opacity:0}
.network-diagram circle.visible{opacity:1;transition:opacity 0.3s ease}
.network-diagram circle.center-node{stroke-width:2}
.network-diagram line.node-connection{stroke:#D0D4DA;stroke-width:1;opacity:0}
.network-diagram line.node-connection.visible{opacity:1;transition:opacity 0.4s ease}
.network-diagram line.node-connection.flash{stroke:#4A90D9;stroke-width:1.5;transition:stroke 0.2s ease}
.network-diagram .data-dot{fill:#34B06E;r:3;opacity:0}
h1{font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:36px;color:#1A2030;letter-spacing:0;margin-bottom:12px}
.hero-desc{max-width:560px;color:#3A4050;margin-bottom:16px}
.mono-label{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:#E8A830;display:block;margin-bottom:12px}
.section-connector{height:80px;display:flex;justify-content:flex-start;padding-left:0}
.section-connector svg{width:2px;height:80px}
.connector-line{stroke:#D0D4DA;stroke-width:1;stroke-dasharray:4 4}
.content-block{padding:40px 0;opacity:0;transform:translateY(16px);transition:all 0.4s ease}
.content-block.visible{opacity:1;transform:translateY(0)}
h2{font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:22px;color:#1A2030;letter-spacing:0;margin-bottom:12px}
.metric-row{display:flex;gap:32px;margin-top:24px;padding:20px 0;border-top:1px solid #D0D4DA}
.metric{display:flex;flex-direction:column;gap:4px}
.metric-value{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:28px;color:#4A90D9}
.metric-label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:#8890A0}
.code-block{margin-top:24px;padding:20px;background:#0E1420;border-radius:2px;font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1.8;display:flex;flex-direction:column;gap:2px}
.code-comment{color:#8890A0}
.code-line{color:#D0D4DA}
.right-indicators{position:fixed;right:24px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;opacity:0;transition:opacity 0.6s ease 0.8s}
.right-indicators.visible{opacity:1}
.indicator{display:flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8890A0;letter-spacing:0.04em}
.indicator-icon{width:6px;height:6px;border-radius:50%;background:#34B06E}
.indicator-icon.warn{background:#E8A830}
@media(max-width:768px){.container{padding:60px 24px 80px 24px;max-width:100%}.right-indicators{display:none}.metric-row{flex-direction:column;gap:16px}h1{font-size:28px}.network-diagram svg{max-width:300px;height:200px}.code-block{font-size:11px;padding:16px}}