body.homepage-demo-4 {
  --demo4-page-margin: var(--ks-home-shell-margin-mobile);
  --demo4-shell-max: var(--ks-home-shell-max);
  --demo4-shell-inline-size: min(calc(100vw - (var(--demo4-page-margin) * 2)), var(--demo4-shell-max));
  --ks-home-shell-fluid: var(--demo4-shell-inline-size);
  --demo4-rail-width-tablet: var(--ks-home-rail-width-tablet-side);
  --demo4-rail-width-desktop: var(--ks-home-rail-width-desktop);
  --demo4-gutter-tablet: var(--ks-home-rail-gap-tablet);
  --demo4-gutter-desktop: var(--ks-home-rail-gap-desktop);
  --demo4-center-lane-inline-size: 100%;
  --demo4-nav-actions-gap: var(--ks-space-16);
  --demo4-nav-inline-links-gap: var(--ks-space-32);
  --demo4-search-stack-gap: var(--ks-space-section-label-bottom);
  --demo4-search-example-row-gap-y: var(--ks-space-8);
  --demo4-search-example-row-gap-x: var(--ks-space-10);
  --demo4-search-example-item-gap: var(--ks-space-4);
  --demo4-chart-guide-line-color: var(--ks-chart-guide-line-color);
  --demo4-chart-guide-line-width: var(--ks-chart-guide-line-width);
  --demo4-metrics-value-color-dark: var(--ks-color-accent-green);
  --demo4-pointer-surface: var(--ks-theme-pointer-surface);
  --demo4-pointer-surface-search: var(--ks-theme-pointer-surface-search);
  --demo4-rail-chart-summary-inline-size: var(--ks-home-chart-summary-inline-size-rail);
  --demo4-rail-chart-summary-gap: var(--ks-home-chart-summary-gap-rail);
  --demo4-content-heading-size: var(--ks-type-content-heading-size);
  --demo4-content-heading-line-height: var(--ks-type-content-heading-line-height);
  --demo4-content-heading-weight: var(--ks-type-content-heading-weight);
  --demo4-content-body-size: var(--ks-type-content-body-size);
  --demo4-content-body-line-height: var(--ks-type-content-body-line-height);
  --demo4-content-body-weight: var(--ks-type-content-body-weight);
  --demo4-content-meta-size: var(--ks-type-content-meta-size);
  --demo4-content-meta-line-height: var(--ks-type-content-meta-line-height);
  --demo4-content-meta-weight: var(--ks-type-content-meta-weight);
  --demo4-rail-pill-track-surface-light: color-mix(in srgb, var(--ks-color-mouseover-gray) 72%, #d6e0eb 28%);
  --demo4-read-pill-color: var(--ks-color-primary-500);
  --demo4-read-pill-color-dark: color-mix(in srgb, var(--ks-color-primary-500) 84%, white 16%);
  --demo4-live-feed-read-inline-size: var(--demo4-map-popup-read-inline-size);
  --demo4-live-feed-read-block-size: var(--demo4-map-popup-read-block-size);
  --demo4-live-feed-read-rail-width: 38px;
  --demo4-live-feed-read-gap: 12px;
  --demo4-live-feed-read-font-size: 11px;
  --demo4-live-feed-read-font-weight: 500;
  --demo4-map-popup-read-inline-size: auto;
  --demo4-map-popup-read-block-size: 20px;
  --demo4-map-popup-read-gap: 12px;
  --demo4-map-popup-read-font-size: 11px;
  --demo4-map-popup-read-font-weight: 500;
  --demo4-read-pill-border-width: 1px;
  --demo4-read-pill-font-weight-hover: 700;
  --demo4-read-pill-padding-inline: 6px;
}

body.homepage-demo-4 .follow-kindness {
  padding-inline: 0;
}

body.homepage-demo-4 .top-nav,
body.homepage-demo-4 .track-kindness-page,
body.homepage-demo-4 .bottom-nav {
  padding-inline: 0;
  box-sizing: border-box;
}

body.homepage-demo-4 .top-nav-inner,
body.homepage-demo-4 .mobile-page-copyright,
body.homepage-demo-4 .global-search-results__shell {
  width: var(--demo4-shell-inline-size);
  max-width: var(--demo4-shell-max);
  margin-inline: auto;
  min-width: 0;
  box-sizing: border-box;
}

body.homepage-demo-4 .bottom-nav-inner,
body.homepage-demo-4 .mobile-page-copyright {
  padding-inline: 0;
}

body.homepage-demo-4 .top-nav-actions {
  gap: var(--demo4-nav-actions-gap);
  padding-right: 0;
  justify-content: flex-end;
}

body.homepage-demo-4 .top-menu-btn {
  position: static;
  right: auto;
  top: auto;
  transform: none;
  margin-left: 0;
}

body.homepage-demo-4 .top-inline-links {
  display: none;
}

body.homepage-demo-4 .homepage-layout--home {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
  row-gap: 0;
  align-items: start;
}

body.homepage-demo-4 .homepage-layout__search-row,
body.homepage-demo-4 .homepage-layout__feed-header-row,
body.homepage-demo-4 .homepage-layout__column--center {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body.homepage-demo-4 .homepage-layout__search-row {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  justify-items: center;
  align-content: start;
  row-gap: var(--demo4-search-stack-gap);
  justify-self: stretch;
  overflow: visible;
}

body.homepage-demo-4 .homepage-layout__feed-header-row {
  grid-column: 1;
  grid-row: 2;
  justify-self: stretch;
  display: flex;
  justify-content: center;
}

body.homepage-demo-4 .homepage-layout__column--center {
  grid-column: 1;
  grid-row: 3;
  justify-self: stretch;
  overflow: visible;
}

body.homepage-demo-4 .homepage-layout__column--left,
body.homepage-demo-4 .homepage-layout__column--right {
  display: none;
}

body.homepage-demo-4 .homepage-layout__search-row > .follow-search-shell--home,
body.homepage-demo-4 .homepage-layout__search-row > .follow-search-example-row,
body.homepage-demo-4 .homepage-layout__feed-header-row > .realtime-hit-feed__header,
body.homepage-demo-4 .homepage-layout__column--center > .realtime-hit-feed,
body.homepage-demo-4 .homepage-tracking-results-host,
body.homepage-demo-4 .homepage-tracking-results-host > .page-shell {
  width: var(--demo4-center-lane-inline-size);
  max-width: var(--demo4-center-lane-inline-size);
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
}

body.homepage-demo-4 .homepage-tracking-results-host > .follow-search-tracking,
body.homepage-demo-4 .homepage-tracking-results-host > .page-shell > .bill-summary-grid,
body.homepage-demo-4 .homepage-tracking-results-host > .page-shell > .bill-journey-lane,
body.homepage-demo-4 .homepage-tracking-results-host > .page-shell > .bill-journey-lane > .kind-steps-map-count,
body.homepage-demo-4 .homepage-tracking-results-host > .page-shell > .bill-journey-lane > .kind-steps-stories,
body.homepage-demo-4 .homepage-tracking-results-host > .page-shell > .bill-journey-lane > .bill-journey-map-host,
body.homepage-demo-4 .homepage-tracking-results-host > .page-shell > .bill-journey-lane > .stories-grid,
body.homepage-demo-4 .homepage-tracking-results-host > .page-shell > .bill-journey-lane > .stories-grid > .stories-timeline,
body.homepage-demo-4 .homepage-tracking-results-host > .page-shell > .bill-journey-lane > .story-pagination-wrap,
body.homepage-demo-4 .homepage-tracking-results-host > .page-shell > .bill-journey-lane > .bill-journey-map-host > .story-map-card,
body.homepage-demo-4 .homepage-tracking-results-host > .page-shell > .bill-journey-lane > .bill-journey-map-host > .story-map-card.story-map-open,
body.homepage-demo-4 .homepage-tracking-results-host > .page-shell > .bill-journey-lane > .bill-journey-map-host > .story-map-card .story-profile-map-wrap,
body.homepage-demo-4 .homepage-tracking-results-host > .page-shell > .bill-journey-lane > .bill-journey-map-host > .story-map-card.story-map-open .story-profile-map-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
}

body.homepage-demo-4 .homepage-layout__search-row > .follow-search-shell--home {
  margin-bottom: 0;
}

body.homepage-demo-4 .homepage-layout__search-row > .follow-search-example-row {
  margin-top: 0;
  box-sizing: border-box;
  overflow: visible;
}

body.homepage-demo-4 .homepage-layout__column--center > .realtime-hit-feed,
body.homepage-demo-4 .homepage-layout__column--center > .realtime-hit-feed .realtime-hit-feed__carousel,
body.homepage-demo-4 .homepage-layout__column--center > .realtime-hit-feed .realtime-hit-feed__viewport,
body.homepage-demo-4 .homepage-layout__column--center > .realtime-hit-feed .realtime-hit-feed__dots-wrap {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.homepage-demo-4 .follow-search-example-row {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: var(--demo4-search-example-row-gap-y);
  column-gap: var(--demo4-search-example-row-gap-x);
}

body.homepage-demo-4 .follow-search-example {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--demo4-search-example-item-gap);
  max-width: 100%;
  min-width: 0;
  text-align: center;
  white-space: normal;
}

body.homepage-demo-4 .follow-search-example-serial {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.homepage-demo-4 .follow-search-shell--home {
  --demo4-search-shell-fill-current: var(--ks-theme-search-shell-fill);
  --ks-follow-search-shell-fill: var(--demo4-search-shell-fill-current);
  --ks-follow-search-shell-fill-open: var(--demo4-search-shell-fill-current);
}

body.homepage-demo-4 .top-nav-inner,
body.homepage-demo-4 .bill-summary-card {
  --demo4-card-surface-current: var(--ks-theme-surface-raised);
  background-color: var(--demo4-card-surface-current);
}

body.homepage-demo-4 .realtime-hit-feed__viewport {
  --demo4-feed-shell-surface-current: var(--ks-theme-surface-raised);
  --ks-home-feed-surface: var(--demo4-feed-shell-surface-current);
}

body.homepage-demo-4 .realtime-hit-feed__cards,
body.homepage-demo-4 .realtime-hit-feed__stream {
  --demo4-feed-card-shell-surface-current: var(--ks-theme-surface-raised);
  --ks-home-card-surface: var(--demo4-feed-card-shell-surface-current);
}

body.homepage-demo-4 .homepage-rail-card,
body.homepage-demo-4 .realtime-hit-feed__card--metrics,
body.homepage-demo-4 .realtime-hit-feed__card--chart,
body.homepage-demo-4 .global-search-result-card,
body.homepage-demo-4 .story-item,
body.homepage-demo-4 .story-profile-map-wrap {
  --demo4-card-surface-current: var(--ks-theme-surface-raised);
  --ks-home-rail-card-surface: var(--demo4-card-surface-current);
  --ks-home-rail-card-surface-hover: var(--demo4-pointer-surface);
  --ks-home-metrics-card-surface: var(--demo4-card-surface-current);
  --ks-home-metrics-card-surface-hover: var(--demo4-pointer-surface);
  --ks-home-chart-card-surface: var(--demo4-card-surface-current);
  --ks-home-chart-card-surface-hover: var(--demo4-pointer-surface);
  --ks-home-metric-surface: var(--demo4-card-surface-current);
  --ks-home-metric-surface-hover: var(--demo4-pointer-surface);
  --ks-home-metric-border: 1px solid var(--ks-card-material-border);
  --ks-home-chart-range-surface: color-mix(in srgb, var(--demo4-card-surface-current) 88%, #ffffff 12%);
  --ks-global-search-card-surface: var(--demo4-card-surface-current);
  --ks-global-search-card-surface-hover: var(--demo4-pointer-surface);
  --ks-global-search-card-border: var(--ks-card-material-border);
  --ks-global-search-card-border-hover: var(--ks-card-material-border);
  --ks-global-search-card-shadow-hover: none;
  --ks-story-card-surface: var(--demo4-card-surface-current);
  --ks-story-map-surface: var(--demo4-card-surface-current);
}

body.homepage-demo-4 .homepage-rail-card,
body.homepage-demo-4 .realtime-hit-feed__card--metrics,
body.homepage-demo-4 .realtime-hit-feed__card--chart {
  background-color: var(--demo4-card-surface-current);
  background-image: none;
}

html:not(.theme-dark) body.homepage-demo-4 .homepage-rail-card--chart,
html:not(.theme-dark) body.homepage-demo-4 .homepage-rail-card--metrics {
  --ks-home-chart-range-surface: var(--demo4-rail-pill-track-surface-light);
}

html:not(.theme-dark) body.homepage-demo-4 .realtime-hit-feed__card--metrics,
html:not(.theme-dark) body.homepage-demo-4 .realtime-hit-feed__card--chart {
  background: var(--demo4-card-surface-current);
}

html:not(.theme-dark) body.homepage-demo-4 .realtime-hit-feed__card--metrics:hover,
html:not(.theme-dark) body.homepage-demo-4 .realtime-hit-feed__card--metrics:focus-within,
html:not(.theme-dark) body.homepage-demo-4 .realtime-hit-feed__card--chart:hover,
html:not(.theme-dark) body.homepage-demo-4 .realtime-hit-feed__card--chart:focus-within {
  background: var(--demo4-pointer-surface);
}

html:not(.theme-dark) body.homepage-demo-4 .realtime-hit-feed__card--metrics-carousel,
html:not(.theme-dark) body.homepage-demo-4 .realtime-hit-feed__card--chart-stack {
  --ks-home-chart-range-surface: var(--demo4-rail-pill-track-surface-light);
}

html:not(.theme-dark) body.homepage-demo-4 .realtime-hit-feed__card--metrics .realtime-hit-feed__metric {
  background: var(--demo4-card-surface-current);
}

html:not(.theme-dark) body.homepage-demo-4 .realtime-hit-feed__card--metrics:hover .realtime-hit-feed__metric,
html:not(.theme-dark) body.homepage-demo-4 .realtime-hit-feed__card--metrics:focus-within .realtime-hit-feed__metric {
  background: var(--demo4-pointer-surface);
}

body.homepage-demo-4 .global-search-result-card--storyfull.story-item {
  --story-card-surface: var(--demo4-card-surface-current);
  border-radius: var(--ks-shell-radius-card-sm);
}

body.homepage-demo-4 .story-item {
  --story-card-surface: var(--demo4-card-surface-current);
}

body.homepage-demo-4 .story-profile,
body.homepage-demo-4 .story-copy,
body.homepage-demo-4 .story-meta-line,
body.homepage-demo-4 .story-date,
body.homepage-demo-4 .story-profile-bottom,
body.homepage-demo-4 .story-profile-main,
body.homepage-demo-4 .story-profile-line1,
body.homepage-demo-4 .story-engagement,
body.homepage-demo-4 .story-engagement-left,
body.homepage-demo-4 .story-engagement-right,
body.homepage-demo-4 .story-actions {
  background-color: transparent;
}

body.homepage-demo-4 .realtime-hit-feed__name,
body.homepage-demo-4 .realtime-hit-feed__location,
body.homepage-demo-4 .realtime-hit-feed__billline,
body.homepage-demo-4 .story-profile-name,
body.homepage-demo-4 .story-city {
  font-size: var(--demo4-content-heading-size);
  line-height: var(--demo4-content-heading-line-height);
  font-weight: var(--demo4-content-heading-weight);
}

body.homepage-demo-4 .realtime-hit-feed__excerpt,
body.homepage-demo-4 .story-copy {
  font-size: var(--demo4-content-body-size);
  line-height: var(--demo4-content-body-line-height);
  font-weight: var(--demo4-content-body-weight);
}

html:not(.theme-dark) body.homepage-demo-4 .realtime-hit-feed__serial,
html:not(.theme-dark) body.homepage-demo-4 .realtime-hit-feed__excerpt {
  color: var(--ks-color-neutral-text-primary);
  font-weight: 400;
}

body.homepage-demo-4 .story-profile-time,
body.homepage-demo-4 .story-profile-follow,
body.homepage-demo-4 .story-profile-verify,
body.homepage-demo-4 .story-profile-degree {
  font-size: var(--demo4-content-meta-size);
  line-height: var(--demo4-content-meta-line-height);
}

body.homepage-demo-4 .story-profile-time {
  font-weight: 600;
}

body.homepage-demo-4 .story-profile-follow,
body.homepage-demo-4 .story-profile-verify,
body.homepage-demo-4 .story-profile-degree {
  font-weight: var(--demo4-content-meta-weight);
}

body.homepage-demo-4 .follow-search-shell__shape-fill,
body.homepage-demo-4 .top-nav-inner,
body.homepage-demo-4 .homepage-rail-card,
body.homepage-demo-4 .realtime-hit-feed__card--metrics,
body.homepage-demo-4 .realtime-hit-feed__card--chart,
body.homepage-demo-4 .global-search-result-card,
body.homepage-demo-4 .realtime-hit-feed__metric,
body.homepage-demo-4 .bill-summary-card,
body.homepage-demo-4 .story-item,
body.homepage-demo-4 .story-profile,
body.homepage-demo-4 .story-copy,
body.homepage-demo-4 .story-meta-line,
body.homepage-demo-4 .story-date,
body.homepage-demo-4 .story-profile-bottom,
body.homepage-demo-4 .story-profile-main,
body.homepage-demo-4 .story-profile-line1,
body.homepage-demo-4 .story-engagement,
body.homepage-demo-4 .story-engagement-left,
body.homepage-demo-4 .story-engagement-right,
body.homepage-demo-4 .story-actions,
body.homepage-demo-4 .story-profile-map-wrap {
  transition:
    background-color var(--ks-duration-fast) var(--ks-ease-standard),
    box-shadow var(--ks-duration-fast) var(--ks-ease-standard),
    fill var(--ks-duration-fast) var(--ks-ease-standard),
    border-color var(--ks-duration-fast) var(--ks-ease-standard);
}

body.homepage-demo-4 .follow-search-shell--home:hover,
body.homepage-demo-4 .follow-search-shell--home:has(.follow-search--home:hover),
body.homepage-demo-4 .follow-search-shell--home:has(.follow-search-field:hover),
body.homepage-demo-4 .follow-search-shell--home:has(.follow-search-input:hover),
body.homepage-demo-4 .follow-search-shell--home:has(.follow-search-leading:hover),
body.homepage-demo-4 .follow-search-shell--home:has(.follow-search-clear:hover),
body.homepage-demo-4 .follow-search-shell--home:has(.follow-search-btn:hover),
body.homepage-demo-4 .follow-search-shell--home:focus-within,
body.homepage-demo-4 .follow-search-shell--home.is-dropdown-open,
body.homepage-demo-4 .follow-search-shell--home.is-dropdown-closing {
  --demo4-search-shell-fill-current: var(--demo4-pointer-surface-search);
}

body.homepage-demo-4 .top-nav:hover .top-nav-inner,
body.homepage-demo-4 .top-nav:focus-within .top-nav-inner,
body.homepage-demo-4 .homepage-rail-card:hover,
body.homepage-demo-4 .homepage-rail-card:focus-within,
body.homepage-demo-4 .realtime-hit-feed__card--metrics:hover,
body.homepage-demo-4 .realtime-hit-feed__card--metrics:focus-within,
body.homepage-demo-4 .realtime-hit-feed__card--chart:hover,
body.homepage-demo-4 .realtime-hit-feed__card--chart:focus-within,
body.homepage-demo-4 .global-search-result-card:hover,
body.homepage-demo-4 .global-search-result-card:focus-within,
body.homepage-demo-4 .bill-summary-card:hover,
body.homepage-demo-4 .bill-summary-card:focus-within,
body.homepage-demo-4 .story-item:hover,
body.homepage-demo-4 .story-item:focus-within,
body.homepage-demo-4 .story-map-card:hover .story-profile-map-wrap,
body.homepage-demo-4 .story-map-card:focus-within .story-profile-map-wrap {
  --demo4-card-surface-current: var(--demo4-pointer-surface);
}

body.homepage-demo-4 .realtime-hit-feed__viewport:hover,
body.homepage-demo-4 .realtime-hit-feed__viewport:focus-within {
  --demo4-feed-shell-surface-current: var(--ks-theme-surface-raised);
}

body.homepage-demo-4 .realtime-hit-feed__cards:focus-within,
body.homepage-demo-4 .realtime-hit-feed__cards:has(.realtime-hit-feed__card:hover),
body.homepage-demo-4 .realtime-hit-feed__cards:has(.realtime-hit-feed__card:focus-within),
body.homepage-demo-4 .realtime-hit-feed__stream:focus-within {
  --demo4-feed-card-shell-surface-current: var(--demo4-pointer-surface);
}

body.homepage-demo-4 .realtime-hit-feed__item:not(.is-armed):hover::after,
body.homepage-demo-4 .realtime-hit-feed__item:not(.is-armed):focus-within::after {
  background-color: var(--demo4-pointer-surface);
}

body.homepage-demo-4 .realtime-hit-feed__item::before {
  left: 0;
  right: 0;
}

body.homepage-demo-4 .realtime-hit-feed__action-rail,
body.homepage-demo-4 .realtime-hit-feed__jump-target--path,
body.homepage-demo-4 .realtime-hit-feed__click-badge {
  position: relative;
}

body.homepage-demo-4 .realtime-hit-feed__action-rail {
  width: var(--demo4-live-feed-read-rail-width);
  min-width: var(--demo4-live-feed-read-rail-width);
  gap: var(--demo4-live-feed-read-gap);
}

body.homepage-demo-4 .realtime-hit-feed__jump-target--path,
body.homepage-demo-4 .realtime-hit-feed__click-badge {
  height: var(--demo4-live-feed-read-block-size);
}

body.homepage-demo-4 .realtime-hit-feed__jump-target--path {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--demo4-read-pill-border-width) solid var(--demo4-read-pill-color);
  border-radius: 999px;
  background: transparent;
  color: var(--demo4-read-pill-color);
  filter: none;
  line-height: 1;
  width: auto;
  min-width: 0;
  padding-inline: var(--demo4-read-pill-padding-inline);
}

body.homepage-demo-4 .realtime-hit-feed__click-badge {
  position: static;
  inset: auto;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  border-radius: inherit;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: inherit;
  font-size: var(--demo4-live-feed-read-font-size);
  font-weight: var(--demo4-live-feed-read-font-weight);
  line-height: 1;
  letter-spacing: 0.01em;
  opacity: 1;
  box-shadow: none;
  -webkit-mask: none;
  mask: none;
  text-transform: none;
}

body.homepage-demo-4 .realtime-hit-feed__jump-target--path:hover,
body.homepage-demo-4 .realtime-hit-feed__jump-target--path:focus-visible,
body.homepage-demo-4 .realtime-hit-feed__jump-target--path:active {
  background: var(--demo4-read-pill-color);
  border-color: var(--demo4-read-pill-color);
  color: #ffffff;
  filter: none;
}

body.homepage-demo-4 .realtime-hit-feed__jump-target--path:hover .realtime-hit-feed__click-badge,
body.homepage-demo-4 .realtime-hit-feed__jump-target--path:focus-visible .realtime-hit-feed__click-badge,
body.homepage-demo-4 .realtime-hit-feed__jump-target--path:active .realtime-hit-feed__click-badge {
  font-weight: var(--demo4-read-pill-font-weight-hover);
}

html.theme-dark body.homepage-demo-4 .realtime-hit-feed__jump-target--path {
  border-color: var(--demo4-read-pill-color-dark);
  color: var(--demo4-read-pill-color-dark);
}

html.theme-dark body.homepage-demo-4 .realtime-hit-feed__jump-target--path:hover,
html.theme-dark body.homepage-demo-4 .realtime-hit-feed__jump-target--path:focus-visible,
html.theme-dark body.homepage-demo-4 .realtime-hit-feed__jump-target--path:active {
  background: var(--demo4-read-pill-color-dark);
  border-color: var(--demo4-read-pill-color-dark);
  color: #ffffff;
}

body.homepage-demo-4 .story-profile-map .story-map-popup__action-rail {
  gap: var(--demo4-map-popup-read-gap);
  flex: 0 0 auto;
}

body.homepage-demo-4 .story-map-popup__person-photo-button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  line-height: 0;
  box-shadow: none;
}

body.homepage-demo-4 .story-map-popup__person-photo {
  box-sizing: border-box;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  border: 1px solid transparent;
}

body.homepage-demo-4 .story-map-popup__person-photo-button:hover .story-map-popup__person-photo,
body.homepage-demo-4 .story-map-popup__person-photo-button:focus-visible .story-map-popup__person-photo,
body.homepage-demo-4 .story-map-popup__person-photo-button:active .story-map-popup__person-photo {
  border-color: var(--demo4-read-pill-color);
  box-shadow: 0 0 0 1px var(--demo4-read-pill-color);
}

html.theme-dark body.homepage-demo-4 .story-map-popup__person-photo-button:hover .story-map-popup__person-photo,
html.theme-dark body.homepage-demo-4 .story-map-popup__person-photo-button:focus-visible .story-map-popup__person-photo,
html.theme-dark body.homepage-demo-4 .story-map-popup__person-photo-button:active .story-map-popup__person-photo {
  border-color: var(--demo4-read-pill-color-dark);
  box-shadow: 0 0 0 1px var(--demo4-read-pill-color-dark);
}

body.homepage-demo-4 .story-map-popup__click-pill {
  display: none;
}

body.homepage-demo-4 .story-map-popup__click-label {
  display: none;
}

body.homepage-demo-4 .story-map-popup__click-icon {
  display: none;
}

body.homepage-demo-4 .realtime-hit-feed__action-rail,
body.homepage-demo-4 .realtime-hit-feed__jump-target--path {
  z-index: 1;
}

body.homepage-demo-4 .realtime-hit-feed__click-badge {
  z-index: 2;
}

body.homepage-demo-4 .homepage-layout__feed-header-row > .realtime-hit-feed__header,
body.homepage-demo-4 .homepage-layout__search-row > .follow-search-example-row {
  justify-content: center;
  text-align: center;
}

body.homepage-demo-4 .homepage-layout__column--left,
body.homepage-demo-4 .homepage-layout__column--left > .homepage-rail,
body.homepage-demo-4 .homepage-layout__column--left > .homepage-rail > .homepage-rail__stack,
body.homepage-demo-4 .homepage-layout__column--left .homepage-rail-card,
body.homepage-demo-4 .homepage-layout__column--left .homepage-rail-card--chart,
body.homepage-demo-4 .homepage-layout__column--left .realtime-hit-feed__flat-chart,
body.homepage-demo-4 .homepage-layout__column--left .realtime-hit-feed__chart-header,
body.homepage-demo-4 .homepage-layout__column--left .realtime-hit-feed__chart-summary,
body.homepage-demo-4 .homepage-layout__column--left .realtime-hit-feed__flat-chart-head,
body.homepage-demo-4 .homepage-layout__column--left .realtime-hit-feed__flat-chart-foot,
body.homepage-demo-4 .homepage-layout__column--left .realtime-hit-feed__flat-chart-average,
body.homepage-demo-4 .homepage-layout__column--left .realtime-hit-feed__flat-chart-note {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

body.homepage-demo-4 .homepage-layout__column--left > .homepage-rail,
body.homepage-demo-4 .homepage-layout__column--left > .homepage-rail > .homepage-rail__stack,
body.homepage-demo-4 .homepage-layout__column--left .homepage-rail-card,
body.homepage-demo-4 .homepage-layout__column--left .homepage-rail-card--chart {
  overflow-x: clip;
}

body.homepage-demo-4 .homepage-layout__column--left .realtime-hit-feed__chart-summary,
body.homepage-demo-4 .homepage-layout__column--left .realtime-hit-feed__flat-chart-head,
body.homepage-demo-4 .homepage-layout__column--left .realtime-hit-feed__flat-chart-foot {
  flex-wrap: wrap;
}

body.homepage-demo-4 .homepage-layout__column--left .realtime-hit-feed__chart-summary-item,
body.homepage-demo-4 .homepage-layout__column--left .realtime-hit-feed__flat-chart-average,
body.homepage-demo-4 .homepage-layout__column--left .realtime-hit-feed__flat-chart-note {
  min-width: 0;
  max-width: 100%;
}

body.homepage-demo-4 .homepage-layout__column--left .homepage-rail-card--chart .realtime-hit-feed__flat-chart-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(var(--demo4-rail-chart-summary-inline-size), var(--demo4-rail-chart-summary-inline-size));
  align-items: start;
  column-gap: var(--demo4-rail-chart-summary-gap);
  row-gap: 0;
}

body.homepage-demo-4 .homepage-layout__column--left .homepage-rail-card--chart .realtime-hit-feed__card-title--chart {
  min-width: 0;
}

body.homepage-demo-4 .homepage-layout__column--left .homepage-rail-card--chart .realtime-hit-feed__flat-chart-average {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto;
  justify-items: end;
  align-content: start;
  text-align: right;
}

body.homepage-demo-4 .homepage-layout__column--left .homepage-rail-card--chart .realtime-hit-feed__flat-chart-average-value,
body.homepage-demo-4 .homepage-layout__column--left .homepage-rail-card--chart .realtime-hit-feed__flat-chart-average-label {
  width: 100%;
}

body.homepage-demo-4 .homepage-layout__column--left .homepage-rail-card--chart .realtime-hit-feed__flat-chart-average-value {
  font-variant-numeric: tabular-nums;
}

body.homepage-demo-4 .homepage-layout__column--left .homepage-rail-card--chart .realtime-hit-feed__flat-chart-average-label {
  white-space: normal;
  text-wrap: balance;
}

body.homepage-demo-4 .homepage-layout__column--left .realtime-hit-feed__flat-chart-note {
  white-space: normal;
  text-align: right;
}

body.homepage-demo-4 .realtime-hit-feed__flat-chart-area {
  isolation: isolate;
}

body.homepage-demo-4 .realtime-hit-feed__flat-chart-bars {
  z-index: 1;
}

body.homepage-demo-4 .realtime-hit-feed__flat-chart-line {
  border-top-color: var(--demo4-chart-guide-line-color);
  border-top-width: var(--demo4-chart-guide-line-width);
  z-index: 2;
}

body.homepage-demo-4 .realtime-hit-feed__flat-chart-average-badge,
body.homepage-demo-4 .realtime-hit-feed__flat-chart-axis {
  z-index: 3;
}

body.homepage-demo-4 .realtime-hit-feed__card--metrics-carousel .realtime-hit-feed__flat-chart-range-button,
body.homepage-demo-4 .realtime-hit-feed__card--chart-stack .realtime-hit-feed__flat-chart-range-button {
  white-space: normal;
  line-height: 1.1;
  font-size: var(--ks-home-carousel-range-button-font-size-compact);
  padding-block: var(--ks-home-carousel-range-button-padding-block-compact);
  padding-inline: var(--ks-home-carousel-range-button-padding-inline-compact);
  min-height: var(--ks-home-carousel-range-button-min-height-compact);
}

body.homepage-demo-4 .realtime-hit-feed__card--metrics-carousel .realtime-hit-feed__flat-chart-range,
body.homepage-demo-4 .realtime-hit-feed__card--chart-stack .realtime-hit-feed__flat-chart-range {
  padding: 2px;
  gap: 2px;
}

body.homepage-demo-4 .realtime-hit-feed__card--chart-stack .realtime-hit-feed__flat-chart {
  --chart-label-gap: 12px;
  --chart-to-today-gap: 10px;
  gap: 10px;
}

body.homepage-demo-4 .realtime-hit-feed__card--chart-stack .realtime-hit-feed__flat-chart-today-value {
  margin-top: 4px;
}

html.theme-dark body.homepage-demo-4 {
  --demo4-chart-guide-line-color: var(--ks-color-link-on-dark);
}

html.theme-dark body.homepage-demo-4 .realtime-hit-feed__click-badge {
  background: transparent;
  opacity: 1;
}

html.theme-dark body.homepage-demo-4 .homepage-rail-card--metrics .realtime-hit-feed__metric-value {
  color: var(--demo4-metrics-value-color-dark);
}

html.theme-dark body.homepage-demo-4 .realtime-hit-feed__card--metrics-carousel .realtime-hit-feed__metric-value {
  color: var(--demo4-metrics-value-color-dark);
}

body.homepage-demo-4.homepage-layout-mode--deck .homepage-layout--home,
body.homepage-demo-4.homepage-layout-mode--tablet-side .homepage-layout--home {
  grid-template-columns:
    minmax(var(--demo4-rail-width-tablet), var(--demo4-rail-width-tablet))
    minmax(0, 1fr);
  column-gap: var(--demo4-gutter-tablet);
}

body.homepage-demo-4.homepage-layout-mode--deck .homepage-layout__search-row,
body.homepage-demo-4.homepage-layout-mode--deck .homepage-layout__feed-header-row,
body.homepage-demo-4.homepage-layout-mode--tablet-side .homepage-layout__search-row,
body.homepage-demo-4.homepage-layout-mode--tablet-side .homepage-layout__feed-header-row {
  grid-column: 1 / -1;
}

body.homepage-demo-4.homepage-layout-mode--deck .homepage-layout__column--left,
body.homepage-demo-4.homepage-layout-mode--tablet-side .homepage-layout__column--left {
  display: block;
  grid-column: 1;
  grid-row: 3;
  width: 100%;
  min-width: var(--demo4-rail-width-tablet);
  max-width: var(--demo4-rail-width-tablet);
  justify-self: start;
}

body.homepage-demo-4.homepage-layout-mode--deck .homepage-layout__column--center,
body.homepage-demo-4.homepage-layout-mode--tablet-side .homepage-layout__column--center {
  grid-column: 2;
  grid-row: 3;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  justify-self: stretch;
  padding-left: 0;
  box-sizing: border-box;
}

body.homepage-demo-4.homepage-layout-mode--deck .homepage-layout__column--right,
body.homepage-demo-4.homepage-layout-mode--tablet-side .homepage-layout__column--right {
  display: none;
}

body.homepage-demo-4.homepage-layout-mode--desktop-full .homepage-layout--home {
  grid-template-columns:
    minmax(var(--demo4-rail-width-desktop), var(--demo4-rail-width-desktop))
    minmax(0, 1fr)
    minmax(var(--demo4-rail-width-desktop), var(--demo4-rail-width-desktop));
  column-gap: var(--demo4-gutter-desktop);
}

body.homepage-demo-4.homepage-layout-mode--desktop-full .homepage-layout__search-row,
body.homepage-demo-4.homepage-layout-mode--desktop-full .homepage-layout__feed-header-row {
  grid-column: 2;
}

body.homepage-demo-4.homepage-layout-mode--desktop-full .homepage-layout__column--left,
body.homepage-demo-4.homepage-layout-mode--desktop-full .homepage-layout__column--right {
  display: block;
  width: 100%;
  align-self: start;
}

body.homepage-demo-4.homepage-layout-mode--desktop-full .homepage-layout__column--left {
  grid-column: 1;
  grid-row: 3;
  min-width: var(--demo4-rail-width-desktop);
  max-width: var(--demo4-rail-width-desktop);
  justify-self: start;
}

body.homepage-demo-4.homepage-layout-mode--desktop-full .homepage-layout__column--center {
  grid-column: 2;
  grid-row: 3;
  justify-self: stretch;
}

body.homepage-demo-4.homepage-layout-mode--desktop-full .homepage-layout__column--right {
  grid-column: 3;
  grid-row: 3;
  min-width: var(--demo4-rail-width-desktop);
  max-width: var(--demo4-rail-width-desktop);
  justify-self: start;
}

body.homepage-demo-4.homepage-layout-mode--desktop-full .homepage-layout__column--right > .homepage-rail,
body.homepage-demo-4.homepage-layout-mode--desktop-full .homepage-layout__column--right > .homepage-rail > .homepage-rail__stack {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body.homepage-demo-4.homepage-layout-mode--desktop-full .top-inline-links {
  display: inline-flex;
  align-items: center;
  gap: var(--demo4-nav-inline-links-gap);
}

body.homepage-demo-4.homepage-layout-mode--desktop-full .top-menu-btn {
  display: none;
}

@media (min-width: 600px) {
  body.homepage-demo-4 {
    --demo4-page-margin: var(--ks-home-shell-margin-tablet-compact);
  }
}

@media (min-width: 840px) {
  body.homepage-demo-4 {
    --demo4-page-margin: var(--ks-home-shell-margin-tablet);
  }
}

@media (min-width: 1200px) {
  body.homepage-demo-4 {
    --demo4-page-margin: var(--ks-home-shell-margin-desktop);
  }
}

@media (min-width: 1440px) {
  body.homepage-demo-4 {
    --demo4-page-margin: var(--ks-home-shell-margin-desktop-xl);
  }
}