/* Figma NStT7aVqui7xiNlztEynKk / 17909:14323. Scoped to IPv4 range pages. */
.ipv4-range-page { background: #fafaf8; }
.ipv4-range { --range-ink: #141415; --range-line: #e4e5e1; --range-muted: #757575; --range-brand: #6c63ff; color: var(--range-ink); font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; padding-bottom: 30px; }
.ipv4-range *, .ipv4-range *::before, .ipv4-range *::after { box-sizing: border-box; }
.ipv4-range h2, .ipv4-range h3, .ipv4-range p, .ipv4-range dl, .ipv4-range ul, .ipv4-range ol { margin: 0; }
.ipv4-range h2 { color: #000; font-size: 16.12px; font-weight: 500; line-height: 18.807px; }
.ipv4-range a:focus-visible, .ipv4-range button:focus-visible, .ipv4-range select:focus-visible { outline: 2px solid #8a7eff; outline-offset: 3px; }
.ipv4-range [hidden] { display: none !important; }
.range-container { width: calc(100% - 48px); max-width: 1176px; margin-left: auto; margin-right: auto; }
.range-hero { position: relative; height: 485px; overflow: hidden; border-radius: 0 0 60px 60px; background: #020103; color: #fff; container-type: inline-size; }
.range-hero-art { position: absolute; inset: 0; pointer-events: none; }
/* The world map (1677x722, opaque between rows 105 and 663). It is never narrower than its native width
   (narrow screens crop its sides) and otherwise spans the full hero, so wide screens scale it up instead
   of exposing its edges. Vertically its South America dot (row 499) sits at --hero-anchor, just above the
   overview card, which keeps the opaque band reaching the hero's bottom edge. */
.range-hero-map { --map-w: max(100cqw, 1677px); position: absolute; left: 50%; top: calc(var(--hero-anchor, 321px) - var(--map-w) * 499 / 1677); width: var(--map-w); aspect-ratio: 1677 / 722; transform: translateX(-50%); }
.range-hero-map > img { display: block; width: 100%; height: 100%; max-width: none; }
.range-hero-chips { position: absolute; inset: 0; }
.range-hero-chip { position: absolute; display: flex; align-items: center; gap: 8.348px; padding: 8px 16px; border-radius: 10px; background: #fff; color: #1d1d1d; font-size: 14px; font-weight: 400; line-height: 11.827px; white-space: nowrap; }
.range-hero-chip--ca, .range-hero-chip--us { background: linear-gradient(rgba(29,29,29,.2), rgba(29,29,29,.2)), #fff; }
.range-hero-chip--ca { left: calc(50% - 674.5px); top: 113px; width: 117.36837px; }
.range-hero-chip--us { left: calc(50% - 651.5px); top: 245px; width: 157.36838px; }
.range-hero-chip--cn { left: calc(50% + 529.5px); top: 103px; width: 104.36837px; }
.range-hero-chip--au { left: calc(50% + 465.5px); top: 195px; width: 124.36837px; }
.range-hero-flag { position: relative; display: block; flex: none; width: 26.02px; height: 19.515px; overflow: hidden; }
.range-hero-flag > img { position: absolute; display: block; max-width: none; }
.range-hero-chip--ca img { left: -.6443px; top: -.4832px; }
.range-hero-chip--us img { left: -1.2312px; top: -.9234px; }
.range-hero-chip--cn img { left: -.27225px; top: -.20415px; }
.range-hero-chip--au img { left: -.27025px; top: -.2027px; }
/* Keep SVG root dimensions; the original includes 150px of blur around its design frame. */
.range-hero-vignette { position: absolute; left: calc(50% - 403.07421875px); top: 12.450439453125px; width: 803.7900390625px; height: 421.759765625px; }
.range-hero-vignette > img { position: absolute; left: -150px; top: -150px; display: block; max-width: none; }
.range-hero-glow { position: absolute; left: calc(50% + 677px); top: -75px; width: 896px; height: 401px; background: #6c63ff; filter: blur(300px); }
.range-hero-copy { position: relative; z-index: 1; width: calc(100% - 40px); max-width: 738px; margin: 0 auto; padding-top: 153.7036px; text-align: center; }
.range-hero h1 { font-size: 34px; font-weight: 500; line-height: 1.2; margin: 0 0 22px; letter-spacing: normal; }
.range-hero-copy p { font-size: 14px; line-height: 1.4; }
.range-overview { position: relative; margin-top: -158.2px; }
.range-intelligence { overflow: hidden; border-radius: 30px 30px 10px 10px; outline: .75px solid var(--range-line); outline-offset: -.75px; background: #fff; }
.range-overview-top { display: grid; grid-template-columns: 1fr 2fr 1fr; min-height: 356.9px; }
.range-identity { padding: 25px 30px; border-right: .75px solid var(--range-line); }
.range-cidr { color: #4f46e5; font-size: 27.514px; line-height: 32.1px; font-weight: 500; letter-spacing: -1.72px; margin-top: 10px !important; overflow-wrap: anywhere; }
.range-badges { display: grid; gap: 10px; margin-top: 19px !important; }
.range-badge { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 48.6px; border-radius: 10px; padding: 12.3px 14.7px; }
.range-badge dt { display: flex; gap: 8px; align-items: center; color: #484946; font-size: 10.615px; font-weight: 500; line-height: 16.984px; white-space: nowrap; }
.range-badge img { flex: 0 0 24px; width: 24px; height: 24px; }
.range-badge dd { margin: 0; font-size: 14px; font-weight: 500; line-height: 20.758px; text-align: right; white-space: nowrap; }
.range-badge small { font-size: 10px; }
.range-badge--anycast { background: #ebeefe; }.range-badge--anycast small { color: #4f46e5; }
.range-badge--responding { background: #e7f7f4; }.range-badge--responding small { color: #0b8549; }
.range-badge--cdn { background: #ebf9fe; }.range-badge--cdn small { color: #4279fa; }
.range-badge--rpki { background: #f6eeff; }
.range-summary { display: flex; flex-direction: column; min-width: 0; padding: 25px 30.157px 20px; border-right: .75px solid var(--range-line); }
.range-summary > p { margin-top: 8px; font-size: 14px; line-height: 23.39px; color: #141415; }
.range-narrative-stat { font-weight: 600; color: #0b0b0c; }
.range-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 17px; row-gap: 21px; margin-top: auto !important; padding-top: 25px; padding-bottom: 36px; }
.range-stat { display: flex; gap: 9.29px; align-items: center; min-width: 0; }
.range-stat img { flex: 0 0 32.4px; width: 32.4px; height: 32.4px; }
.range-stat dt { color: #484946; font-size: 11px; font-weight: 500; line-height: 16.728px; letter-spacing: .836px; text-transform: uppercase; white-space: nowrap; }
.range-stat dd { margin: 0; font-size: 12.779px; line-height: 20.446px; font-weight: 500; }
.range-coverage { display: flex; align-items: center; flex-direction: column; padding: 25px 9px; }
.range-coverage h2 { font-size: 16.12px; }
.range-coverage-donut { position: relative; width: 164.720703125px; height: 164.720703125px; margin-top: 24.5px; margin-bottom: 29px; }
.range-coverage-ring { position: absolute; }
.range-coverage-ring--outer { left: 0; top: 0; width: 164.720703125px; height: 164.720703125px; }
.range-coverage-ring--inner { left: 22.00444984436035px; top: 22.002731323242188px; width: 120.71490478515625px; height: 120.71490478515625px; }
.range-coverage-ring > img, .range-coverage-ring > svg { position: absolute; left: 0; top: 0; max-width: none; }
.range-coverage-donut > span { position: absolute; inset: 0; display: grid; place-items: center; color: #515151; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 27.061px; font-weight: 500; letter-spacing: -.8118px; }
.range-coverage-legend { display: grid; gap: 5px; width: 100%; }
.range-coverage-legend > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 21px; }
.range-coverage-legend dt { display: flex; align-items: center; gap: 8px; color: #484946; text-transform: uppercase; letter-spacing: .849px; font-size: 10.615px; line-height: 16.984px; font-weight: 500; }
.range-coverage-legend dd { margin: 0; font-size: 12.974px; font-weight: 500; white-space: nowrap; }
.ipv4-range i { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; }
.range-overview-bottom { display: grid; grid-template-columns: 655fr 519.5fr; min-height: 372.38px; border-top: .75px solid var(--range-line); }
.range-security { min-width: 0; border-right: .75px solid var(--range-line); }
.range-security > header, .range-distribution > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 75px; padding: 13.8px 16.5px; border-bottom: .75px solid var(--range-line); background: #fafaf8; }
.range-security-note { display: flex; align-items: center; flex-wrap: wrap; gap: 0 .25em; min-height: 59px; padding: 13.8px 16.5px; line-height: 23.39px; border-bottom: .75px solid var(--range-line); }
.range-security-grid { display: grid; grid-template-columns: 1fr 1fr .85fr; gap: 10px 24px; padding: 25px 14px; }
.range-security-grid > div { display: flex; align-items: center; gap: 11px; min-width: 0; min-height: 55.3px; }
.range-security-grid img { flex: 0 0 29.338px; width: 29.338px; height: 29.338px; }
.range-security-grid dt { color: #8e8e8e; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; line-height: 1.3; text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.range-security-grid > div > div { min-width: 0; }
.range-security-grid dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; margin: 4px 0 0; font-size: 14.053px; font-weight: 500; line-height: 22.484px; }
.range-security-pct { color: #959796; font-size: 10px; font-weight: 400; line-height: 16px; white-space: nowrap; }
.range-distribution { min-width: 0; }
.range-coverage-picker { position: relative; flex: none; }
.range-distribution select { appearance: none; field-sizing: content; min-width: 154px; max-width: 205px; height: 40px; font-family: Inter, sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; color: #454545; background-color: #fff; background-image: none; border: 1px solid #e4e5e1; border-radius: 12px; padding: 0 38px 0 12px; cursor: pointer; }
.range-coverage-chevron { position: absolute; right: 12px; top: 50%; width: 14px; height: 14px; display: grid; place-items: center; transform: translateY(-50%); pointer-events: none; }
.range-coverage-chevron img { max-width: none; transform: rotate(90deg); }
.range-coverage-picker [hidden] { display: none; }
.range-coverage-trigger { position: relative; display: flex; align-items: center; min-width: 154px; height: 40px; padding: 0 38px 0 12px; background: #fff; border: 1px solid #e4e5e1; border-radius: 12px; box-shadow: 0 1px 2px #20202005; font-family: Inter, sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; color: #454545; cursor: pointer; white-space: nowrap; }
.range-coverage-trigger:hover { box-shadow: 0 2px 5px #20202009; }
.range-coverage-trigger:focus-visible { outline: 2px solid #6c63ff; outline-offset: 2px; }
.range-coverage-trigger .range-coverage-chevron img { transition: transform 180ms cubic-bezier(.22, 1, .36, 1); }
.range-coverage-trigger[aria-expanded="true"] .range-coverage-chevron img { transform: rotate(270deg); }
/* The popup is portalled to body so overview overflow cannot clip it. */
.range-coverage-menu { position: fixed; z-index: 1000; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; box-sizing: border-box; padding: 6px; background: #fff; border: 1px solid #e4e5e1; border-radius: 16px; box-shadow: 0 8px 24px #20202012, 0 2px 6px #20202008; color: #454545; font-family: Inter, sans-serif; font-size: 14px; line-height: 20px; scrollbar-width: thin; scrollbar-color: #d1d2ce transparent; opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: center top; transition: opacity 180ms cubic-bezier(.22, 1, .36, 1), transform 180ms cubic-bezier(.22, 1, .36, 1); }
.range-coverage-menu[data-side="top"] { transform: translateY(4px) scale(.98); transform-origin: center bottom; }
.range-coverage-menu[data-state="open"] { opacity: 1; transform: translateY(0) scale(1); }
.range-coverage-menu[aria-hidden="true"] { pointer-events: none; }
.range-coverage-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; min-height: 40px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.range-coverage-option[data-active="true"] { background: #f7f7f5; }
.range-coverage-option[aria-selected="true"] { background: #f1eeff; color: #4f46e5; }
.range-coverage-option[aria-selected="true"] svg { color: #6c63ff; flex: none; }
/* Coordinates are a percentage-weighted treemap, not fixed grid tracks. */
.range-treemap { --tile-gap: 6.155715px; --tile-min-width: 48px; --tile-min-height: 56px; --country-column-gap: var(--tile-gap); --country-row-gap: var(--tile-gap); --country-pair-gap: var(--tile-gap); position: relative; height: 270.028px; margin: 13.3px 9px; }
.range-treemap[data-country-count="3"], .range-treemap[data-country-count="4"] { --country-column-gap: 7px; --country-row-gap: 4px; --country-pair-gap: 6px; }
.range-treemap-tile { --tile-gap-x: min(var(--tile-gap), calc(var(--tile-width) * .15)); --tile-gap-y: min(var(--tile-gap), calc(var(--tile-height) * .15)); --tile-inset-left: var(--tile-gap-left, calc(var(--tile-gap-x) / 2)); --tile-inset-right: var(--tile-gap-right, calc(var(--tile-gap-x) / 2)); --tile-inset-top: var(--tile-gap-top, calc(var(--tile-gap-y) / 2)); --tile-inset-bottom: var(--tile-gap-bottom, calc(var(--tile-gap-y) / 2)); position: absolute; left: calc(var(--tile-x) + var(--tile-inset-left)); top: calc(var(--tile-y) + var(--tile-inset-top)); width: calc(var(--tile-width) - var(--tile-inset-left) - var(--tile-inset-right)); height: calc(var(--tile-height) - var(--tile-inset-top) - var(--tile-inset-bottom)); min-width: 0; overflow: hidden; border-radius: 6.156px; color: #262626; container: coverage-tile / size; }
.range-treemap-tile--0 { background: #3472ec; color: #fff; }
.range-treemap-tile--1 { background: #67d8be; }
.range-treemap-tile--2 { background: #8269f5; color: #fff; }
.range-treemap-tile--3 { background: #f5a1a2; }
.range-treemap-tile--other { background: #cad5e4; }
.range-treemap-tile--grey { background: #cad5e4; color: #262626; }
.range-treemap[data-country-count] .range-treemap-tile { --tile-gap-x: min(var(--country-column-gap), calc(var(--tile-width) * .15)); --tile-gap-y: min(var(--country-row-gap), calc(var(--tile-height) * .15)); }
.range-treemap[data-country-count="4"] .range-treemap-tile:nth-child(3), .range-treemap[data-country-count="5"] .range-treemap-tile:nth-child(3) { --tile-gap-right: min(calc(var(--country-pair-gap) / 2), calc(var(--tile-width) * .075)); }
.range-treemap[data-country-count="4"] .range-treemap-tile:nth-child(4), .range-treemap[data-country-count="5"] .range-treemap-tile:nth-child(4) { --tile-gap-left: min(calc(var(--country-pair-gap) / 2), calc(var(--tile-width) * .075)); }
.range-treemap:is([data-country-count="4"], [data-country-count="5"]) .range-treemap-tile:is(:nth-child(3), :nth-child(4)), .range-treemap[data-country-count="5"] .range-treemap-tile:nth-child(5) { --country-label-size: 14.526px; --country-label-line: 12.272px; --country-flag-height: 19.32px; --country-flag-width: 26.955px; --country-label-gap: 8.662px; --country-percent-size: 19.149px; --country-percent-line: 16.177px; --country-percent-gap: 8.747px; --country-copy-top: 22.68px; }
.range-treemap:is([data-country-count="4"], [data-country-count="5"]) .range-treemap-tile:nth-child(3) { --country-copy-left: 15.48px; }
.range-treemap:is([data-country-count="4"], [data-country-count="5"]) .range-treemap-tile:nth-child(4) { --country-copy-left: 15.66px; }
.range-treemap[data-country-count="5"] .range-treemap-tile:nth-child(5) { --country-copy-left: 18.55px; --country-copy-top: 24.96px; }
.range-treemap-tile:focus-visible { outline: 2px solid #4f46e5; outline-offset: 1px; }
.range-tile-copy { position: relative; padding: 16.71px; }
.range-treemap-tile--0 .range-tile-copy { padding-top: 19.79px; }
.range-tile-label { position: relative; display: flex; align-items: center; gap: var(--country-label-gap, 10.363px); font-size: var(--country-label-size, 17.379px); font-weight: 400; line-height: var(--country-label-line, 14.681px); }
.range-tile-label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-block: 3px; margin-block: -3px; }
.range-tile-label img { width: var(--country-flag-width, 32.305px); height: var(--country-flag-height, 23.075px); flex: none; object-fit: cover; border-radius: 3px; }
.range-treemap-tile strong { position: relative; display: block; font-size: var(--country-percent-size, 22.91px); font-weight: 500; line-height: var(--country-percent-line, 19.354px); margin-top: var(--country-percent-gap, 10.465px); }
.range-tile-art { position: absolute; right: 0; bottom: 0; width: var(--country-art-width, 100%); height: var(--country-art-height, 100%); pointer-events: none; transform: scale(var(--country-art-scale, 1)); transform-origin: bottom right; }
.range-tile-art img { position: absolute; max-width: none; }
.range-tile-art--blue img { left: -58.13px; top: 47.79px; }
.range-tile-art--blue img + img { left: -84.24px; top: 151.45px; }
.range-tile-art--supplemental { filter: brightness(0) invert(1); opacity: .22; }
.range-tile-art--supplemental img:first-child { opacity: .5; }
.range-treemap-tile--2 .range-tile-art--supplemental { filter: brightness(0); }
.range-tile-art--single img { left: -101.476px; top: -25.318px; }
.range-tile-art--single img + img { left: -49.445px; top: 70.122px; }
.range-tile-art-vector { position: absolute; display: block; width: 273.243px; height: 197.605px; left: -.1545px; top: 12.662px; transform: rotate(-1.09deg); }
.range-tile-art-vector img { left: -31.643px; top: -27.25px; }
.range-tile-art--green-2 .range-tile-art-vector { width: 324.778px; height: 234.875px; left: 14.682px; top: 89.718px; transform: rotate(-34.22deg); }
.range-tile-art--green-2 .range-tile-art-vector img { left: -37.6115px; top: -32.39px; }
.range-tile-art--green-4 .range-tile-art-vector { top: 42.762px; }
.range-distribution-detail { padding: 17px 26px 16.3px; min-height: 297px; }
.range-distribution-scale { display: flex; justify-content: space-between; font-size: 14px; line-height: 18px; color: #757575; }
.range-distribution-bar { display: flex; gap: 4.6px; height: 11.988px; margin-top: 5.7px; }
.range-distribution-bar > span { flex-shrink: 1; min-width: 0; height: 100%; border-radius: 4.174px; }
.range-distribution-list { display: flex; flex-direction: column; padding: 0; list-style: none; margin-top: 20px !important; gap: 0; }
.range-distribution-list li { display: flex; align-items: center; gap: 14px; min-height: 36.83px; color: #1d1d1d; font-size: 14px; line-height: 18px; }
.range-distribution-list .range-distribution-dot { flex: none; max-width: none; }
.range-distribution-name { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; padding-left: 16px; }
.range-distribution-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.range-distribution-name > img { width: 24px; height: 17px; object-fit: cover; border-radius: 1px; flex: none; }
.range-distribution-pct { flex: none; padding-right: 16px; }
.range-distribution-empty { min-height: 297px; display: grid; place-items: center; }
.range-distribution-empty img { width: 233.345px; height: 228.769px; object-fit: contain; }
@container coverage-tile (max-width: 150px) { .range-tile-copy { padding: 12px; } .range-tile-label { gap: var(--country-label-gap, 7px); font-size: 14.526px; line-height: 12.272px; } .range-tile-label img { width: 26.955px; height: 19.32px; } .range-treemap-tile strong { font-size: 19.149px; line-height: 16.177px; margin-top: 8.747px; } }
@container coverage-tile (max-height: 80px) { .range-tile-copy, .range-treemap-tile--0 .range-tile-copy { padding: 8px; } .range-tile-label { font-size: 12px; line-height: 16px; } .range-tile-label img { width: 22px; height: 16px; } .range-treemap-tile strong { font-size: 17px; line-height: 20.4px; margin-top: 4px; } }
/* Restore source compact copy when its measured stack fits the physical card. */
@container coverage-tile (min-width: 90.01px) and (min-height: 67px) {
  .range-treemap:is([data-country-count="4"], [data-country-count="5"]) .range-treemap-tile:is(:nth-child(3), :nth-child(4)) .range-tile-copy { padding-left: var(--country-copy-left); padding-top: var(--country-copy-top); }
  .range-treemap:is([data-country-count="4"], [data-country-count="5"]) .range-treemap-tile:is(:nth-child(3), :nth-child(4)) .range-tile-label { font-size: var(--country-label-size); line-height: var(--country-label-line); }
  .range-treemap:is([data-country-count="4"], [data-country-count="5"]) .range-treemap-tile:is(:nth-child(3), :nth-child(4)) .range-tile-label img { width: var(--country-flag-width); height: var(--country-flag-height); }
  .range-treemap:is([data-country-count="4"], [data-country-count="5"]) .range-treemap-tile:is(:nth-child(3), :nth-child(4)) strong { font-size: var(--country-percent-size); line-height: var(--country-percent-line); margin-top: var(--country-percent-gap); }
}
@container coverage-tile (min-width: 90.01px) and (min-height: 63px) {
  .range-treemap[data-country-count="5"] .range-treemap-tile:nth-child(5) .range-tile-copy { padding-left: var(--country-copy-left); padding-top: var(--country-copy-top); }
  .range-treemap[data-country-count="5"] .range-treemap-tile:nth-child(5) .range-tile-label { font-size: var(--country-label-size); line-height: var(--country-label-line); }
  .range-treemap[data-country-count="5"] .range-treemap-tile:nth-child(5) strong { font-size: var(--country-percent-size); line-height: var(--country-percent-line); margin-top: var(--country-percent-gap); }
}
@container coverage-tile (max-width: 90px) { .range-treemap-tile .range-tile-copy { height: 100%; padding: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .range-treemap-tile .range-tile-label { justify-content: center; gap: 0; font-size: 11px; line-height: 14px; } .range-tile-label img { width: 24px; height: 17px; } .range-tile-label img + span { display: none; } .range-treemap-tile .range-tile-copy strong { font-size: 11px; line-height: 13.2px; margin: 0; writing-mode: horizontal-tb; } }
.range-posture { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 22px; }
.range-posture-card { min-width: 0; min-height: 365.73px; border: .8px solid var(--range-line); border-radius: 20px; background: #fff; overflow: hidden; }
.range-posture-card > header { display: flex; align-items: center; gap: 8px; min-height: 59px; padding: 15.1px 14px; border-bottom: .8px solid var(--range-line); }
.range-posture-card > header img { flex: 0 0 29px; width: 29px; height: 29px; }
.range-posture-body { padding: 22px 19.9px 16px; }
.range-posture-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.range-posture-head > strong { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 27.061px; font-weight: 500; line-height: 1; letter-spacing: -.812px; color: #515151; }
.range-posture-head > p { font-size: 14px; line-height: 16px; color: var(--range-muted); text-align: right; }
.range-space-bar { display: flex; gap: 4.6px; height: 12px; margin-top: 15.5px; }
.range-space-bar > span { min-width: 4px; border-radius: 4.174px; }
.range-space-legend { display: grid; gap: 4px; margin-top: 16px !important; }
.range-space-legend > div { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 30.59px; }
.range-space-legend dt { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.range-space-legend dt > img { flex: none; }
.range-space-legend dd { margin: 0; white-space: nowrap; font-size: 14px; }
.range-space-legend small, .range-rpki-legend small { color: #959796; font-size: 10px; }
.range-registry-list { display: grid; gap: 18px; list-style: none; padding: 0; }
.range-registry-list li > div:first-child { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; line-height: 16px; margin-bottom: 5px; }
.range-blue-track { height: 6.777px; border-radius: 4.174px; overflow: hidden; background: #e9f4ff; }
.range-blue-track span { display: block; height: 100%; border-radius: inherit; background: #3ba4ff; }
.range-rpki-chart { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 34px; }
.range-rpki-donut { position: relative; width: 155px; height: 155px; flex: none; }
.range-rpki-donut > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 16.65px; }
.range-rpki-donut strong { font-size: 18.557px; font-weight: 500; color: #1d1d1d; }
.range-rpki-legend { display: grid; gap: 15px; text-align: right; }
.range-rpki-legend dt { display: flex; justify-content: flex-end; align-items: center; gap: 8px; font-size: 10.615px; text-transform: uppercase; letter-spacing: .85px; color: #484946; }
.range-rpki-legend dd { margin: 2px 0 0; font-size: 12.974px; white-space: nowrap; }
.range-no-data { color: #757575; padding: 25px 20px; line-height: 1.6; }
.range-map { background: #111; color: #fff; margin-top: 40px; overflow: hidden; }
.range-map-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.07fr); gap: 40px; width: calc(100% - 48px); max-width: 1176px; margin: 0 auto; padding: 41.9px 20px; }
.range-map-sidebar { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.range-map-intro h2 { display: flex; align-items: center; gap: 10.33px; color: #fff; font-size: 20.817px; line-height: 24.287px; }
.range-map-intro h2 img { flex: none; width: 37.45px; height: 37.45px; }
.range-map-intro p { max-width: 409px; margin-top: 5px; line-height: 17px; }
.range-map-filters { display: flex; gap: 8.5px; padding: 6px 6.4px; border: .973px solid #212121; border-radius: 12.165px; width: max-content; max-width: 100%; }
.range-map-filters button { display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 9.73px; min-height: 38.93px; padding: 8px 9px; font-size: 12px; line-height: 21.9px; white-space: nowrap; transition: background .2s; }
.range-map-filters button:first-child { padding-left: 20px; padding-right: 20px; font-family: Geist, Inter, sans-serif; font-size: 15.814px; }
.range-map-filters button[aria-pressed=true], .range-map-filters button:hover { background: #242424; }
.range-map-filters img { width: 12px; height: 12px; flex: none; }
.range-map-ranking { border: .8px solid #363636; border-radius: 10px; background: #171717; padding: 16.3px 19.9px; flex: 1; min-height: 299.6px; }
.range-map-ranking h3 { display: flex; align-items: center; gap: 8px; font-size: 16.12px; font-weight: 500; line-height: 18.8px; }
.range-map-ranking ol { display: flex; flex-direction: column; gap: 19px; list-style: none; padding: 0; margin-top: 27.8px; }
.range-map-ranking li > div:first-child { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8.4px; font-size: 14px; line-height: 14px; }
.range-map-ranking a:hover { text-decoration: underline; }
.range-map-track { height: 6.777px; max-width: 334px; overflow: hidden; border-radius: 4.174px; background: #d3e8fe; }
.range-map-track > span { display: block; height: 100%; background: #3ba4ff; border-radius: inherit; }
.range-map-ranking[aria-label="Most reachable"] .range-map-track { background: #332f4b; }
.range-map-ranking[aria-label="Most reachable"] .range-map-track > span { background: #9a8ee8; }
.range-map-empty { margin-top: 30px !important; color: #bdbdbd; line-height: 1.7; }
.range-map-selection { position: absolute; right: 20px; bottom: 15px; text-align: right; font-size: 12px; color: #9ecbff; }
.range-ring { padding: 18px !important; border-radius: 9.525px !important; background: #171717 !important; border-color: #1d1d1d !important; color: #fff !important; box-shadow: none !important; min-width: 0; align-self: start; }
.range-ring .cr-header { position: absolute; z-index: 1; top: 18px; left: 18px; right: 18px; margin-bottom: 0; }
.range-ring .cr-header h3 { font-size: 14px; line-height: 22px; }
.range-ring-caption, .range-ring-total { display: block; }
.range-ring-total { font-size: 16px; }
.range-ring .cr-stage-wrap { background: none; border: 0; }
.range-ring .cr-footer { flex-direction: column; align-items: flex-start; padding: 10px 0 0; font-size: 12px; line-height: 17px; gap: 10px; color: #8e8e8e; }
.range-ring-guide { font-size: 11px; color: #aaa; }
.range-ring .cr-tip { max-width: 280px; }
.range-map-fallback { padding-top: 40px; padding-bottom: 40px; }
.range-map-fallback p { margin-top: 12px; }
.range-map-fallback ul { padding-left: 20px; line-height: 2; }
.range-table-card { border: .954px solid #eceef3; border-radius: 11.452px; background: #fff; box-shadow: 0 .954px 1.909px rgba(16,24,40,.04); overflow: hidden; margin-top: 56px; }
.range-table-card > header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 19px 22.9px 15.3px; border-bottom: .763px solid #eceef3; }
.range-table-card > header p { font-size: 14px; color: var(--range-muted); }
.range-table-scroll { overflow-x: auto; padding: 0 13px; }
.range-table-card table { width: 100%; border-collapse: collapse; font-size: 14px; font-weight: 400; text-align: left; }
.range-asn-table { min-width: 780px; table-layout: fixed; }
.range-asn-table th:nth-child(1) { width: 10%; }.range-asn-table th:nth-child(2) { width: 31%; }.range-asn-table th:nth-child(3), .range-asn-table th:nth-child(4) { width: 11%; }.range-asn-table th:nth-child(5) { width: 16%; }.range-asn-table th:nth-child(6) { width: 21%; }
.range-table-card thead { background: #f8fafc; color: #1d1d1d; }
.range-table-card th { height: 46.5px; padding: 14px 15.3px; font-weight: 400; white-space: nowrap; }
.range-table-card td { height: 47.5px; padding: 13.4px 15.3px; color: #4f5a66; font-size: 13.36px; line-height: 20px; border-bottom: .763px solid #eceef3; }
.range-table-card tbody tr:last-child td { border-bottom: 0; }
.range-table-card tbody tr:hover { background: #f8fafc; }
.range-table-card a { color: #4f46e5; font-weight: 600; }
.range-table-card a:hover { text-decoration: underline; }
.range-asn-table td:nth-child(n+3), .range-asn-table th:nth-child(n+3) { text-align: right; }
.range-operator { display: flex; align-items: center; gap: 9.5px; min-width: 0; }
.range-operator img { width: 19px; height: 14px; flex: none; border-radius: 1px; }
.range-operator span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.range-share { display: flex; align-items: center; justify-content: flex-end; gap: 19px; }
.range-share > div { width: 76px; height: 5.73px; background: #eceef3; border-radius: 99px; overflow: hidden; }
.range-share > div span { display: block; height: 100%; background: #4f46e5; }
.range-share > span { width: 54px; }
.range-table-card > footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 19.8px; }
.range-table-card > footer p { color: #9ca3af; font-size: 14px; }
.range-table-card > footer [data-show-more] { flex: none; margin-left: auto; }
.range-table-card.range-all-table { max-width: 1168.08251953125px; padding-top: 3.436px; }
.range-table-card.range-all-table > header { padding: 15.269px 22.904px; }
.range-table-card.range-all-table > header h2 { font-size: 16.12px; line-height: 18.807px; }
.range-table-card.range-all-table > header p { font-size: 14px; line-height: normal; color: #757575; }
.range-table-card.range-all-table .range-table-scroll { padding: 0 0 .76345px; }
.range-table-card.range-all-table table { min-width: 671.8383178710938px; max-width: 1152.8134765625px; table-layout: fixed; text-align: center; }
.range-table-card.range-all-table th { width: 25%; height: 46.503578px; padding: 11.452px 22.904px; font-size: 14px; line-height: 11.827px; }
/* Compensate Figma's .76345px row overlap in native table spacing. */
.range-table-card.range-all-table td { height: 55.75739px; padding: 12.978695px 22.904px; font-size: 16px; line-height: 24px; color: #424242; border-bottom: 0; vertical-align: middle; white-space: nowrap; }
.range-table-card.range-all-table td:nth-child(2) { padding-left: 15.269px; padding-right: 15.269px; }
.range-table-card.range-all-table a { font-weight: 400; text-decoration: underline; text-decoration-thickness: 1px; text-underline-position: from-font; text-underline-offset: auto; }
/* The fixed outer box keeps the source border inset without inflating row pitch. */
.range-ip-count { display: inline-flex; align-items: center; justify-content: center; height: 29.8px; padding: 2.9px 14px; border: 1px solid #C1C9D2; border-radius: 10px; color: #56616D; background: #F0F2F5; font-size: 16px; font-weight: 400; line-height: 24px; vertical-align: middle; }
.range-all-table .range-ip-count[data-category="pingable"] { color: #493682; background: rgba(154, 142, 232, .1); border-color: currentColor; }
.range-all-table .range-ip-count[data-category="anycast"] { color: #345A1D; background: rgba(131, 204, 76, .1); border-color: currentColor; }
.range-all-table .range-ip-count[data-category="bogon"] { color: #743015; background: rgba(226, 109, 56, .1); border-color: currentColor; }
.range-table-card.range-all-table > footer { width: 100%; max-width: 1152.8134765625px; min-height: 0; padding: 14.1px 19.8px; }
.range-table-card.range-all-table > footer p { font-size: 14px; color: #9ca3af; }
/* Measured table: the badge popup's counts as columns, never wider than its card (no sideways scroll).
   Eight equal columns on desktop; First/Last IP dropped below 1200px (the prefix already implies them);
   Category dropped at 900px and below (the count badge already carries its colour), with each share
   moving under its count; and a labelled card per row on phones. */
.range-all-table table.range-all-measured { max-width: none; min-width: 0; }
/* The plain table (no child measurements, e.g. a /24's single addresses) never scrolls either:
   below 700px it keeps just the address and its count. */
.range-all-table table:not(.range-all-measured) { min-width: 0; }
@media (max-width: 700px) {
  .range-all-table table:not(.range-all-measured) :is(th, td):is(:nth-child(2), :nth-child(3)) { display: none; }
}
.range-all-table table.range-all-measured th { width: auto; padding: 11.452px 10px; line-height: 16px; white-space: normal; }
.range-all-table table.range-all-measured td { padding-left: 10px; padding-right: 10px; }
.range-all-table table.range-all-measured td.range-measure small { margin-left: 6px; color: #757575; font-size: 13px; }
.range-all-table table.range-all-measured .range-measure-na { color: #9ca3af; font-size: 14px; }
.range-category { display: inline-block; padding: 2px 10px; border: 1px solid #C1C9D2; border-radius: 10px; color: #56616D; background: #F0F2F5; font-size: 13px; line-height: 20px; white-space: nowrap; }
.range-category[data-category="pingable"] { color: #493682; background: rgba(154, 142, 232, .1); border-color: currentColor; }
.range-category[data-category="anycast"] { color: #345A1D; background: rgba(131, 204, 76, .1); border-color: currentColor; }
.range-category[data-category="bogon"] { color: #743015; background: rgba(226, 109, 56, .1); border-color: currentColor; }
@media (max-width: 1199px) {
  .range-all-table table.range-all-measured :is(th, td):is(:nth-child(2), :nth-child(3)) { display: none; }
}
@media (max-width: 900px) {
  .range-all-table table.range-all-measured :is(th, td):nth-child(8) { display: none; }
  .range-all-table table.range-all-measured td.range-measure small { display: block; margin-left: 0; line-height: 18px; }
}
@media (max-width: 600px) {
  .range-all-table table.range-all-measured { min-width: 0; table-layout: auto; text-align: left; }
  .range-all-table table.range-all-measured thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .range-all-table table.range-all-measured tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 14px 16px; border-bottom: .763px solid #eceef3; }
  .range-all-table table.range-all-measured tbody tr[hidden] { display: none; }
  .range-all-table table.range-all-measured td { display: block; height: auto; padding: 0; font-size: 14px; line-height: 20px; white-space: normal; }
  .range-all-table table.range-all-measured td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: #757575; font-size: 11px; line-height: 14px; }
  .range-all-table table.range-all-measured td:first-child { grid-column: 1 / -1; font-size: 16px; }
  .range-all-table table.range-all-measured td:first-child::before { content: none; }
  .range-all-table table.range-all-measured .range-ip-count { height: 26px; padding: 1px 10px; font-size: 14px; }
  .range-all-table table.range-all-measured td.range-measure small { display: inline; margin-left: 6px; }
}
.range-unavailable { position: relative; margin-top: -158px; padding: 30px; border: 1px solid #e4e5e1; border-radius: 20px; background: #fff; }
.range-unavailable p { margin-top: 14px; line-height: 1.6; color: #757575; }
@media (min-width: 1400px) { .range-map-inner { grid-template-columns: 569.278px 608.652px; } .range-map-filters button { font-size: 14.039px; padding-left: 10px; padding-right: 14px; } }
@media (max-width: 1349px) {
  .range-hero { --hero-anchor: 356px; height: auto; min-height: 520px; padding-bottom: 220px; }
  .range-hero-chips { z-index: 1; }
  .range-hero-chip--ca { left: 24px; top: 110px; }.range-hero-chip--cn { left: auto; right: 24px; top: 110px; }
  .range-hero-chip--us { left: 24px; top: auto; bottom: 170px; }.range-hero-chip--au { left: auto; right: 24px; top: auto; bottom: 170px; }
}
@media (max-width: 1199px) {
  .range-overview-top { grid-template-columns: 1fr 1.7fr; }
  .range-coverage { grid-column: 1 / 3; display: grid; grid-template-columns: 1fr 180px 1.2fr; gap: 25px; padding: 20px 30px; border-top: 1px solid var(--range-line); }
  .range-coverage-donut { margin: 0; }.range-coverage-legend { max-width: 300px; }
  .range-summary { border-right: 0; }.range-stats { padding-bottom: 15px; }
  .range-security-grid { gap: 10px; }.range-security-grid dt { font-size: 11px; }.range-overview-bottom { grid-template-columns: 1.2fr 1fr; }
  .range-posture-head > strong { font-size: 23px; }.range-posture-head > p { font-size: 12px; }
  .range-rpki-chart { gap: 4px; }.range-rpki-donut { width: 130px; height: 130px; }.range-rpki-donut svg { width: 130px; height: 130px; }.range-rpki-legend dd { white-space: normal; }
  .range-space-legend > div { flex-wrap: wrap; }.range-space-legend dd { margin-left: 20px; }
  .range-map-inner { gap: 24px; padding-left: 0; padding-right: 0; }.range-map-filters { flex-wrap: wrap; width: 100%; }.range-map-filters button { font-size: 12px; }
}
@media (max-width: 900px) {
  .range-overview-top { grid-template-columns: 1fr 1.6fr; }.range-identity { padding-left: 20px; padding-right: 20px; }.range-summary { padding-left: 20px; padding-right: 20px; }.range-stats { grid-template-columns: 1fr 1fr; }
  .range-overview-bottom { grid-template-columns: 1fr; }.range-security { border-right: 0; }.range-security-grid { gap: 10px 24px; }.range-security-grid dt { font-size: 12px; }.range-distribution { border-top: 1px solid var(--range-line); }
  .range-treemap { margin: 14px; height: 300px; }
  .range-posture { gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }.range-posture-card:last-child { grid-column: 1 / 3; min-height: 280px; }.range-rpki-chart { justify-content: space-around; margin-top: 24px; }.range-rpki-donut { width: 155px; height: 155px; }.range-rpki-donut svg { width: 155px; height: 155px; }
  .range-map-inner { grid-template-columns: 1fr; max-width: 650px; }.range-map-intro p { max-width: 100%; }.range-map-filters { width: max-content; }.range-map-filters button { font-size: 13px; }.range-map-ranking { min-height: 300px; }.range-map-track { max-width: none; }.range-map-selection { bottom: 14px; }
  .range-table-card > header p { font-size: 12px; }
}
@media (max-width: 600px) {
  .range-coverage-trigger, .range-coverage-menu { font-size: 14px; }
  .range-treemap { --tile-min-height: 48px; }
  .range-container, .range-map-inner { width: calc(100% - 28px); }
  .range-hero { --hero-anchor: 394px; height: auto; min-height: 520px; padding-bottom: 165px; border-radius: 0 0 30px 30px; }.range-hero-copy { padding-top: 143px; }.range-hero h1 { font-size: 27px; }.range-hero h1 > span { display: block; }.range-hero h1 > span + span { margin-top: 4px; }.range-hero-copy p { font-size: 12px; line-height: 1.6; }
  .range-hero-chip--ca { left: 12px; top: 100px; }.range-hero-chip--cn { left: auto; right: 12px; top: 100px; }.range-hero-chip--us { left: 12px; top: auto; bottom: 115px; }.range-hero-chip--au { left: auto; right: 12px; top: auto; bottom: 115px; }
  .range-overview { margin-top: -105px; }.range-overview-top { grid-template-columns: 1fr; }.range-intelligence { border-radius: 20px 20px 10px 10px; }
  .range-identity { border-right: 0; padding: 24px 20px; }.range-badges { grid-template-columns: 1fr 1fr; }.range-badge { padding: 10px; flex-wrap: wrap; gap: 5px; }.range-badge dd { margin-left: 32px; }.range-badge dt { font-size: 10px; }
  .range-summary { padding: 24px 20px; border-top: 1px solid var(--range-line); }.range-summary > p { font-size: 13px; line-height: 22px; }.range-stats { margin-top: 12px !important; padding-bottom: 0; }.range-stat dt { font-size: 10px; }
  .range-coverage { grid-column: auto; display: flex; gap: 0; padding: 24px 20px; }.range-coverage-donut { margin: 24.5px auto 29px; }.range-coverage-legend { max-width: none; }
  .range-security > header, .range-distribution > header { height: 62px; }.range-security-grid { grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px 14px; }.range-security-grid dt { font-size: 10px; }.range-security-grid img { width: 25px; height: 25px; flex-basis: 25px; }.range-security-grid > div { gap: 8px; }.range-security-note { font-size: 12px; line-height: 20px; }
  .range-treemap { margin: 10px; height: 250px; }
  .range-distribution-detail { padding-left: 16px; padding-right: 16px; }.range-distribution-name { padding-left: 0; }.range-distribution-pct { padding-right: 0; }.range-distribution-list li { gap: 10px; font-size: 12px; }.range-distribution select { max-width: 190px; font-size: 14px; }
  .range-posture { grid-template-columns: 1fr; }.range-posture-card, .range-posture-card:last-child { grid-column: auto; min-height: 295px; }.range-posture-card:nth-child(2) { min-height: 230px; }.range-space-legend > div { flex-wrap: nowrap; }.range-space-legend dd { margin-left: 0; }.range-space-legend { gap: 8px; }.range-space-legend dt { font-size: 13px; }
  .range-map { margin-top: 28px; }.range-map-inner { padding-top: 30px; padding-bottom: 42px; gap: 24px; }.range-map-intro h2 { font-size: 20px; }.range-map-intro p { font-size: 13px; line-height: 20px; }.range-map-filters { width: 100%; gap: 4px; }.range-map-filters button { padding: 6px 8px; font-size: 11px; }.range-map-filters button:first-child { padding: 6px 15px; font-size: 13px; }.range-map-ranking { padding: 18px; }.range-map-ranking li > div:first-child { font-size: 12px; }.range-map-selection { left: 14px; right: 14px; bottom: 15px; }
  .range-ring { padding: 14px !important; }.range-ring .cr-header { top: 14px; left: 14px; right: 14px; }.range-ring .cr-footer { font-size: 11px; }.range-ring .cr-header h3 { font-size: 12px; }.range-ring-total { font-size: 15px; }
  .range-table-card { margin-top: 30px; }.range-table-card > header { align-items: flex-start; padding: 17px 14px; }.range-table-card h2 { font-size: 14px; }.range-table-card > header p { font-size: 10px; }.range-table-scroll { padding: 0; }.range-table-card > footer { padding: 14px; }.range-table-card > footer p { font-size: 11px; }.range-all-table td { font-size: 13px; }
  .range-unavailable { margin-top: -105px; padding: 24px; }
}
@media (prefers-reduced-motion: reduce) { .ipv4-range *, .ipv4-range *::before, .ipv4-range *::after, .range-coverage-menu, .range-coverage-menu * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* The IPv4 page owns this body portal; original chart/table colors stay above. */
.range-hover-popup { position: fixed; z-index: 10000; box-sizing: border-box; width: max-content; max-width: min(260px, calc(100vw - 24px)); max-height: calc(100vh - 24px); margin: 0; padding: 12px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; border: 1px solid #e0e4eb; border-radius: 12px; background: #fff; color: #253041; box-shadow: 0 8px 24px rgba(24, 34, 54, .14), 0 2px 5px rgba(24, 34, 54, .05); font-family: inherit; font-size: 12px; line-height: 1.45; text-align: left; white-space: normal; overflow-wrap: anywhere; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px); transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms; --range-popup-accent: #8893a2; }
.range-hover-popup[data-state="open"] { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
.range-hover-popup[data-theme="dark"] { color: #edf1f7; background: #171b25; border-color: #3a4353; box-shadow: 0 8px 28px rgba(0, 0, 0, .3), 0 2px 5px rgba(0, 0, 0, .2); }
.range-hover-popup[data-category="pingable"] { --range-popup-accent: #9a8ee8; }
.range-hover-popup[data-category="anycast"] { --range-popup-accent: #83cc4c; }
.range-hover-popup[data-category="bogon"] { --range-popup-accent: #e26d38; }
.range-hover-popup-heading { min-width: 0; font-size: 13px; line-height: 1.4; font-weight: 600; }
.range-hover-popup:not([data-category="neutral"]) .range-hover-popup-heading::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--range-popup-accent); vertical-align: 1px; }
.range-hover-popup-body:empty { display: none; }
.range-hover-popup-body dl { display: grid; gap: 6px; margin: 8px 0 0; }
.range-hover-popup-body dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.range-hover-popup-body dt { margin: 0; color: #606d7f; font-weight: 400; }
.range-hover-popup-body dd { min-width: 0; margin: 0; text-align: right; font-weight: 500; }
.range-hover-popup-body p { margin: 8px 0 0; color: #606d7f; }
.range-hover-popup[data-theme="dark"] .range-hover-popup-body dt, .range-hover-popup[data-theme="dark"] .range-hover-popup-body p { color: #b9c3d2; }
[data-range-page][data-range-hover-ready] .range-ring .cr-tip { visibility: hidden !important; }
[data-range-page] [data-range-hover-source][tabindex="0"]:focus-visible { outline: 2px solid #8277d9; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .range-hover-popup { transition: none; transform: none; } }

/* ---- Chart motion (range-chart-motion.ts) ----------------------------------------------------------
   Arcs draw from a zero-length dash to their own server-rendered length (a from-only keyframe needs no
   per-arc values), staggered like FinBoard's doughnut. The head script's `range-motion` holds them paused,
   and their centre values hidden, until the chart scrolls into view (`is-drawn`); `range-motion-fallback`
   releases everything if the page script never arrives. Reduced motion never gets `range-motion`. */
@keyframes range-arc-draw { from { stroke-dasharray: 0 100; opacity: 0; } }
@keyframes range-tile-in { from { opacity: 0; transform: scale(.94); } }
.range-motion .range-coverage-ring circle, .range-motion .range-rpki-donut circle { animation: range-arc-draw 1.05s cubic-bezier(.22, 1, .36, 1) .1s both; }
.range-motion .range-coverage-ring--inner circle { animation-delay: .22s; }
.range-motion .range-rpki-donut circle:nth-of-type(2) { animation-delay: .22s; }
.range-motion .range-rpki-donut circle:nth-of-type(3) { animation-delay: .34s; }
.range-motion .range-rpki-donut circle:nth-of-type(n+4) { animation-delay: .46s; }
.range-motion:not(.range-motion-fallback) :is(.range-coverage-donut, .range-rpki-donut):not(.is-drawn) circle { animation-play-state: paused; }
.range-motion:not(.range-motion-fallback) .range-coverage-donut:not(.is-drawn) > span,
.range-motion:not(.range-motion-fallback) .range-rpki-donut:not(.is-drawn) strong { opacity: 0; }
.range-coverage-donut > span, .range-rpki-donut strong { transition: opacity .3s ease; font-variant-numeric: tabular-nums; }
/* Country tiles: hidden until both laid out on the client and in view, then they scale in one after another. */
.range-motion:not(.range-motion-fallback) .range-treemap:not(.is-laid-out.is-in-view) .range-treemap-tile { opacity: 0; }
.range-motion .range-treemap.is-laid-out.is-in-view .range-treemap-tile { animation: range-tile-in .6s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.range-treemap.is-laid-out .range-treemap-tile { transition: left .45s cubic-bezier(.22, 1, .36, 1), top .45s cubic-bezier(.22, 1, .36, 1), width .45s cubic-bezier(.22, 1, .36, 1), height .45s cubic-bezier(.22, 1, .36, 1); }
/* Hover focus: the hovered series comes forward, the others dim (FinBoard's legend behaviour). */
.range-coverage-ring, .range-rpki-donut circle, .range-coverage-legend > div, .range-rpki-legend > div { transition: opacity .2s ease, stroke-width .2s ease; }
.range-coverage-ring.is-dimmed, .range-rpki-donut circle.is-dimmed, .range-coverage-legend > div.is-dimmed, .range-rpki-legend > div.is-dimmed { opacity: .42; }
.range-rpki-donut circle.is-focused { stroke-width: 19; }
.range-coverage-ring circle, .range-rpki-donut circle { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .range-treemap .range-treemap-tile, .range-coverage-ring circle, .range-rpki-donut circle { animation: none !important; transition: none !important; } }