:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #18324a; background: #eef4f8; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
main { max-width: 1200px; margin: auto; padding: 42px 24px 26px; }
header { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 28px; }
h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.06; margin: 6px 0 10px; letter-spacing: -0.04em; }
h2 { margin: 3px 0 0; font-size: 22px; }
.eyebrow { color: #54708a; font-weight: 800; font-size: 11px; letter-spacing: .12em; margin: 0; }
.subtitle { margin: 0; max-width: 620px; line-height: 1.55; color: #5f7283; }
.connection, .pill { border-radius: 999px; font-weight: 750; white-space: nowrap; padding: 10px 14px; font-size: 13px; }
.online { color: #087443; background: #dff7ea; }.offline { color: #9b4b00; background: #fff1d8; }
.setup-card { border: 1px solid #dce6ee; border-radius: 18px; background: #fff; padding: 16px; display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin-bottom: 22px; box-shadow: 0 8px 22px #1a527b0d; }
.setup-card label { display: grid; gap: 6px; font-size: 12px; color: #5c7184; font-weight: 700; }.setup-card input { min-width: 210px; padding: 10px; border: 1px solid #c8d7e3; border-radius: 9px; font: inherit; color: #18324a; }.setup-card button { background: #1769e0; color: #fff; padding: 11px 15px; border: 0; border-radius: 9px; font-weight: 800; cursor: pointer; }.setup-card p { color: #668093; font-size: 12px; margin: 0; flex: 1 1 250px; line-height: 1.4; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }.panel { min-height: 430px; border-radius: 22px; padding: 23px; background: #fff; box-shadow: 0 12px 28px #1a527b12; border: 1px solid #dce6ee; }.raw { border-top: 6px solid #ed6a5e; }.clean { border-top: 6px solid #1769e0; }.panel-heading { display: flex; justify-content: space-between; gap: 14px; }.pill.private { background: #fff0ef; color: #b7493f; }.pill.secure { background: #e5f0ff; color: #1769e0; }.metric { margin: 28px 0 10px; display: flex; align-items: baseline; gap: 7px; }.metric span { color: #6c8192; font-size: 14px; }.metric strong { font-size: 51px; letter-spacing: -0.06em; margin-left: auto; }.metric small { color: #6c8192; font-weight: 700; } canvas { width: 100%; height: 210px; display: block; border-radius: 12px; background: #f8fbfd; } dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 19px 0 0; } dl div { min-width: 0; } dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #7890a3; } dd { margin: 5px 0 0; font-size: 14px; font-weight: 800; overflow-wrap: anywhere; } footer { color: #668093; text-align: center; font-size: 13px; margin-top: 25px; }
@media (max-width: 760px) { main { padding: 26px 14px; } header { display: block; }.connection { margin-top: 18px; display: inline-block; }.grid { grid-template-columns: 1fr; }.panel { min-height: 390px; }.metric strong { font-size: 43px; }.setup-card input { min-width: min(100%, 290px); } }