:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #0b1f3a; background: #fff; }
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; }
a { color: #1f6bff; text-underline-offset: 4px; overflow-wrap: anywhere; }
a:focus-visible { outline: 3px solid #1f6bff; outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-thickness: 2px; } .cta:hover { background: #1555d1; } .directory li:hover { background: #f7f9fc; } }
.cta:active { background: #1249b5; }
header, footer { max-width: 1192px; margin: auto; padding: 24px 36px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
header { border-bottom: 1px solid #e5eaf0; }
header nav { display: flex; gap: 24px; }
.brand { display: flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 700; text-decoration: none; color: #0b1f3a; }
.brand span { color: #1f6bff; }
.brand img { object-fit: contain; margin-right: 6px; }
main { max-width: 860px; padding: 56px 36px 72px; margin: auto; }
h1 { font-size: 42px; line-height: 1.15; margin: 18px 0 24px; overflow-wrap: anywhere; }
h2 { font-size: 25px; line-height: 1.3; margin-top: 0; }
h3 { font-size: 18px; margin-top: 30px; }
p, li { font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; }
.intro { font-size: 19px; color: #66758a; }
.eyebrow { color: #1f6bff; font-size: 13px; font-weight: 650; }
.muted, .breadcrumbs, footer { color: #66758a; font-size: 14px; }
section { border-top: 1px solid #e5eaf0; padding-top: 30px; margin-top: 40px; }
.metric { font-size: 36px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 16px 0; }
.cta { display: inline-block; margin-top: 14px; border-radius: 6px; padding: 12px 20px; background: #1f6bff; color: white; text-decoration: none; }
.notice { padding: 16px; border-left: 3px solid #aa6500; background: #f7f9fc; }
.directory { list-style: none; padding: 0; }
.directory li { border-bottom: 1px solid #e5eaf0; padding: 18px 0; }
.directory a { display: flex; justify-content: space-between; gap: 16px; }
.directory p { color: #66758a; margin-bottom: 0; }
footer { border-top: 1px solid #e5eaf0; }
.public-traffic { margin-top: 24px; }
.traffic-total { font-size: 44px; font-weight: 700; line-height: 1.2; margin: 12px 0; font-variant-numeric: tabular-nums; }
.traffic-change { font-weight: 650; }
.traffic-change span { font-weight: 400; color: #66758a; }
.traffic-trust { margin: 18px 0; padding: 16px; display: grid; gap: 6px; border: 1px solid #d6e2f6; border-radius: 10px; background: #f3f7ff; color: #66758a; font-size: 13px; line-height: 1.55; }
.traffic-trust strong { color: #0b1f3a; font-size: 14px; }
.positive { color: #087d54; }
.negative { color: #c73540; }
.traffic-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 22px 0; border-block: 1px solid #e5eaf0; }
.traffic-kpis dt { font-size: 13px; color: #66758a; }
.traffic-kpis dd { font-size: 21px; margin: 8px 0 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.traffic-chart { height: 195px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.traffic-chart div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.traffic-chart i { display: block; width: 70%; background: #1f6bff; border-radius: 4px 4px 0 0; }
.traffic-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-variant-numeric: tabular-nums; }
.traffic-table caption { text-align: left; color: #66758a; font-size: 13px; padding-bottom: 12px; }
.traffic-table td, .traffic-table th { padding: 12px 0; text-align: right; border-bottom: 1px solid #e5eaf0; }
.traffic-table th:first-child { text-align: left; }
.traffic-splits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.traffic-row { display: grid; grid-template-columns: minmax(65px, 1fr) minmax(35px, 1fr) 65px; align-items: center; gap: 10px; margin: 18px 0; font-size: 14px; }
.traffic-row meter { width: 100%; height: 12px; accent-color: #1f6bff; }
.traffic-row strong { text-align: right; font-variant-numeric: tabular-nums; }
.directory .directory-metric { color: #0b1f3a; font-weight: 650; }
.directory-metric small { color: #66758a; font-weight: 400; }
@media (max-width: 600px) { .traffic-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .traffic-splits { grid-template-columns: 1fr; gap: 0; } .traffic-total { font-size: 34px; } .traffic-chart { gap: 8px; } .traffic-chart div { font-size: 11px; } }
@media (max-width: 600px) { header, footer { padding: 20px 22px; flex-wrap: wrap; } main { padding: 40px 22px; } h1 { font-size: 32px; } header nav { gap: 16px; font-size: 14px; } .directory a { flex-wrap: wrap; } }