:root{color:#0f2238;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--ink:#08192d;--muted:#2b4258;--muted-strong:#1b3146;--panel:linear-gradient(180deg, #fffffffc, #f9f5effa);--panel-strong:#ffffffe6;--border:#1c314c33;--border-soft:#1c314c24;--shadow-soft:0 24px 45px #030c1c1f, 0 6px 18px #030c1c14;background:radial-gradient(circle at top,#ffad602e,#0000 20%),linear-gradient(#08101f 0%,#102447 34%,#d9e5f2 34%,#f7f2ea 100%);font-family:Bahnschrift,Segoe UI Variable Text,Trebuchet MS,Malgun Gothic,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-width:320px;min-height:100vh;color:var(--ink);margin:0}body:before{content:"";pointer-events:none;background:radial-gradient(circle at 10% 15%,#ffffff24,#0000 16%),radial-gradient(circle at 75% 12%,#ffffff14,#0000 14%),radial-gradient(circle at 80% 25%,#ffffff0f,#0000 10%);position:fixed;inset:0}a{color:inherit}button,input,textarea,select{font:inherit}h1,h2,h3,p{margin:0}#root{min-height:100vh}.app-shell{width:min(1180px,100% - 32px);margin:0 auto;padding:32px 0 72px}.hero-panel{grid-template-columns:1.2fr .8fr;align-items:stretch;gap:24px;margin-bottom:28px;display:grid}.hero-copy,.hero-surface,.metric-card,.snapshot-panel,.chart-card,.timeline-panel,.message-panel{border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow-soft);border-radius:28px}.hero-copy{padding:34px}.hero-copy h1{max-width:11ch;margin:18px 0}.hero-copy p{max-width:60ch;color:var(--muted-strong)}.upload-panel{background:var(--panel-strong);color:var(--ink);cursor:pointer;border:1px dashed #1c314c6b;border-radius:20px;gap:8px;margin-top:24px;padding:18px 20px;transition:transform .2s,border-color .2s,box-shadow .2s;display:grid}.upload-panel:hover{border-color:#1c314cb8;transform:translateY(-1px);box-shadow:0 10px 26px #030c1c1f}.upload-kicker{letter-spacing:.16em;text-transform:uppercase;color:var(--muted-strong);font-size:.72rem}.upload-panel strong{font-size:1.05rem}.upload-panel span:last-child{color:var(--muted-strong)}.upload-input{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.hero-surface{background:radial-gradient(circle at 30% 30%,#ffa34f47,#0000 32%),radial-gradient(circle at 70% 30%,#88cbff47,#0000 26%),linear-gradient(#08132ff2,#0c1d41e0);min-height:320px;position:relative;overflow:hidden}.hero-grid,.hero-orbit{position:absolute;inset:0}.hero-grid{background-image:linear-gradient(#ffffff0f 1px,#0000 1px),linear-gradient(90deg,#ffffff0f 1px,#0000 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(#000000e6,#0000);mask-image:linear-gradient(#000000e6,#0000)}.hero-orbit{border:1px solid #c1dcff2e;border-radius:999px}.hero-orbit--one{inset:38px;transform:rotate(-12deg)}.hero-orbit--two{inset:82px 28px;transform:rotate(16deg)}.hero-core{text-align:center;color:#eff6ff;place-items:center;display:grid;position:absolute;inset:0}.hero-core span,.eyebrow,.metric-card p,.chart-card p,.snapshot-panel dt,.timeline-entry span,.chart-chip{letter-spacing:.18em;text-transform:uppercase;color:var(--muted-strong);font-size:.72rem}.hero-core strong{font-size:clamp(3rem,7vw,4.8rem);line-height:.95}.hero-core small{color:#ffffffeb}.status-pill{letter-spacing:.12em;text-transform:uppercase;border:1px solid #0000;border-radius:999px;align-items:center;padding:8px 14px;font-size:.78rem;font-weight:700;display:inline-flex}.status-pill--stable,.metric-card--stable{color:#134b31;background:linear-gradient(#fffffffa,#f2fbf6fa);border-color:#3da56f38}.status-pill--warning,.metric-card--warning{color:#6d3900;background:linear-gradient(#fffffffa,#fff9f0fa);border-color:#eca42f3d}.status-pill--critical,.metric-card--critical{color:#7b1717;background:linear-gradient(#fffffffa,#fff3f3fa);border-color:#d63a3a3d}.status-pill--offline,.metric-card--offline{color:#1f3652;background:linear-gradient(#fffffffa,#f4f7fbfa);border-color:#364e6e33}.metrics-grid,.snapshot-grid,.charts-grid{gap:18px;display:grid}.metrics-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:28px}.metric-card{padding:22px}.metric-card strong{color:var(--ink);margin:10px 0 12px;font-size:2rem;font-weight:800;display:block}.metric-card span{color:var(--muted-strong);font-weight:600}.section-head{justify-content:space-between;align-items:end;gap:24px;margin:18px 0 14px;display:flex}.section-head h2{margin:6px 0 0}.section-head>p{max-width:52ch;color:var(--muted-strong)}.snapshot-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:28px}.snapshot-panel{padding:24px}.snapshot-panel h3,.timeline-entry h3{color:var(--ink);margin:0 0 16px}.snapshot-panel h3,.section-head h2,.message-panel h2{font-weight:800}.snapshot-panel dl{gap:14px;margin:0;display:grid}.snapshot-panel dl div,.timeline-entry{justify-content:space-between;gap:16px;display:flex}.snapshot-panel dd,.snapshot-panel dt{margin:0}.snapshot-panel dd,.list-key,.timeline-entry p{color:var(--muted-strong)}.snapshot-panel dd,.signal-list strong,.timeline-entry p,.message-panel p{font-weight:600}.signal-list{gap:16px;margin:0;padding:0;list-style:none;display:grid}.signal-list li{justify-content:space-between;align-items:center;gap:18px;display:flex}.signal-list strong{color:var(--ink);text-align:right}.charts-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:28px}.chart-card{padding:20px}.chart-card header,.chart-card footer{justify-content:space-between;align-items:baseline;gap:16px;display:flex}.chart-card strong{color:var(--ink);font-size:1.5rem;font-weight:800;display:block}.chart-chip{color:var(--chip-color)}.chart-card svg{width:100%;height:160px;margin:18px 0 10px}.chart-card footer{color:var(--muted-strong);font-size:.88rem;font-weight:600}.timeline-panel{padding:10px 18px}.timeline-entry{border-bottom:1px solid var(--border-soft);padding:16px 0}.timeline-entry:last-child{border-bottom:0}.message-panel{margin-bottom:28px;padding:28px}.message-panel--error{background:#dd4c4c1f}.message-panel p{color:var(--muted-strong)}@media (width<=980px){.hero-panel,.metrics-grid,.snapshot-grid,.charts-grid,.section-head{grid-template-columns:1fr;display:grid}.section-head{align-items:start}}@media (width<=720px){.app-shell{width:min(100% - 20px,1180px);padding-top:20px}.hero-copy,.hero-surface,.metric-card,.snapshot-panel,.chart-card,.message-panel{border-radius:22px}.hero-copy,.message-panel{padding:24px}.metric-card strong{font-size:1.7rem}.snapshot-panel dl div,.signal-list li,.timeline-entry{flex-direction:column}.signal-list strong{text-align:left}}