:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #10151b; color: #ecf2f5; }
* { box-sizing: border-box; } body { margin: 0; } .shell { max-width: 1180px; margin: auto; padding: 48px 28px 64px; } header { display: flex; justify-content: space-between; gap: 24px; align-items: center; } h1 { font-size: clamp(2.5rem, 7vw, 5rem); line-height: .9; margin: 0; letter-spacing: -.08em; } h2 { margin: 0 0 18px; } .eyebrow { color: #fc4c02; font-weight: 800; letter-spacing: .12em; font-size: .75rem; margin: 0 0 12px; } .intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 56px 0 28px; } .lede { max-width: 620px; font-size: 1.25rem; line-height: 1.5; color: #b9c4ca; margin: 0; } .range { width: 180px; color: #172026; } .connect { display: inline-block; padding: 12px 18px; border-radius: 999px; background: #fc4c02; color: white; font-weight: 800; text-decoration: none; } .credentials { color: #b9c4ca; font-size: .9rem; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .stat, .activities { background: #182129; border: 1px solid #293740; border-radius: 16px; } .stat { padding: 20px; display: grid; gap: 10px; } .stat span { color: #a7b5bc; font-size: .85rem; } .stat strong { font-size: 1.7rem; } .charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; } .activities { padding: 22px; } .activity { display: grid; grid-template-columns: 120px 1fr auto; gap: 16px; padding: 14px 0; border-top: 1px solid #293740; } .activity span:last-child { color: #a7b5bc; } .note { color: #7f9099; font-size: .85rem; margin-top: 30px; } @media (max-width: 700px) { .shell { padding: 28px 16px; } header, .intro { align-items: flex-start; flex-direction: column; } .stats, .charts { grid-template-columns: 1fr; } .activity { grid-template-columns: 1fr; gap: 5px; } }