:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #000; color: #ecf2f5; }
* { box-sizing: border-box; } body { margin: 0; background: #000; } .shell { position: relative; isolation: isolate; max-width: 1180px; margin: auto; padding: 48px 28px 64px; } .shell > :not(.background-accent) { position: relative; z-index: 1; } .background-accent { position: fixed; z-index: 0; top: 0; right: 0; width: min(46vw, 680px); height: 100vh; object-fit: contain; object-position: right center; opacity: .3; pointer-events: none; } header { display: flex; justify-content: space-between; gap: 24px; align-items: center; } .brand-logo { display: block; width: min(480px, 68vw); height: auto; } 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; } footer { margin-top: 48px; text-align: center; } .tag-logo { display: inline-block; width: min(640px, 100%); height: auto; } @media (max-width: 700px) { .shell { padding: 28px 16px; } .background-accent { width: 75vw; opacity: .6; } header, .intro { align-items: flex-start; flex-direction: column; } .stats, .charts { grid-template-columns: 1fr; } .activity { grid-template-columns: 1fr; gap: 5px; } }