:root {
  color-scheme: dark;
  --blue: #3daeff;
  --blue-deep: #1688ee;
  --blue-bright: #9bdeff;
  --green: #50e39a;
  --white: #f6fbff;
  --ice: #dcebf4;
  --muted: #879dad;
  --red: #ed747c;
  --panel: rgba(12, 29, 41, .58);
  --line: rgba(186, 224, 246, .16);
}

* { box-sizing: border-box; }
html, body { width: 710px; height: 280px; margin: 0; overflow: hidden; background: transparent; }
body { color: var(--white); font-family: Arial, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
h1, h2, p { margin: 0; }

.overlay {
  position: relative;
  width: 710px;
  height: 280px;
  display: grid;
  grid-template-columns: 475px 215px;
  grid-template-rows: 280px;
  grid-template-areas: "carousel map";
  gap: 20px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.overlay::before {
  content: none;
}

.frame-corner { display: none; }
.frame-corner--tl { top: 4px; left: 4px; border-top: 1px solid rgba(165,218,249,.45); border-left: 1px solid rgba(165,218,249,.45); }
.frame-corner--tr { top: 4px; right: 4px; border-top: 1px solid rgba(165,218,249,.45); border-right: 1px solid rgba(165,218,249,.45); }
.frame-corner--bl { bottom: 4px; left: 4px; border-bottom: 1px solid rgba(165,218,249,.35); border-left: 1px solid rgba(165,218,249,.35); }
.frame-corner--br { right: 4px; bottom: 4px; border-right: 1px solid rgba(165,218,249,.35); border-bottom: 1px solid rgba(165,218,249,.35); }

.persistent {
  position: relative;
  z-index: 2;
  height: 198px;
  grid-area: persistent;
  padding: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: radial-gradient(circle at 20% 0, rgba(129,216,255,.12), transparent 44%), linear-gradient(145deg, rgba(20,48,66,.78), rgba(7,20,29,.72));
  backdrop-filter: blur(5px) saturate(112%);
  -webkit-backdrop-filter: blur(5px) saturate(112%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 0 0 .5px rgba(255,255,255,.025),
    inset 0 -18px 32px rgba(0,6,11,.22),
    0 12px 32px rgba(0,0,0,.34),
    0 0 22px rgba(42,146,220,.045);
}

.persistent::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(112deg, rgba(255,255,255,.065), transparent 17%, transparent 72%, rgba(94,189,244,.025)),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(103,192,239,.025) 18px 19px);
  mask-image: linear-gradient(#000, transparent 72%);
}

.brand { height: 82px; position: relative; }
.brand-icon { position: absolute; right: -1px; top: -1px; width: 34px; height: 34px; border: 1px solid rgba(112,199,249,.3); border-radius: 50%; background: rgba(29,108,158,.14); }
.brand-icon svg { width: 100%; height: 100%; fill: none; stroke: var(--blue-bright); stroke-width: 1.6; filter: drop-shadow(0 0 4px rgba(87,181,234,.4)); }
.eyebrow { color: var(--blue-bright); font-size: 6.5px; line-height: 9px; letter-spacing: .65px; font-weight: 700; white-space: nowrap; }
.brand h1 { margin-top: 6px; font-size: 20px; line-height: 18px; letter-spacing: -.6px; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 0 12px rgba(121,207,250,.08); }
.brand h1 span { color: var(--blue-bright); font-size: 18px; background: linear-gradient(180deg, #f2fbff 0%, #9bdeff 54%, #54b9ee 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.route-name { margin-top: 7px; font-size: 7px; letter-spacing: .42px; color: var(--muted); white-space: nowrap; }
.route-name b { color: var(--blue); }

.always-metrics { display: grid; grid-template-columns: 50px 1fr; gap: 6px; height: 66px; }
.day-card, .speed-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(92,190,246,.26); border-radius: 6px; background: radial-gradient(circle at 22% 0, rgba(129,216,255,.10), transparent 48%), linear-gradient(150deg, rgba(14,42,59,.78), rgba(6,20,30,.68)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.26), 0 5px 15px rgba(0,0,0,.16), 0 0 12px rgba(42,146,220,.04); }
.day-card::after, .speed-card::after { content: ""; position: absolute; top: 0; left: 9px; right: 9px; height: 1px; background: linear-gradient(90deg, transparent, rgba(155,222,255,.45), transparent); }
.day-card { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.day-card span, .live-label { color: var(--muted); font-size: 6px; line-height: 8px; letter-spacing: .5px; font-weight: 700; }
.day-card strong { margin-top: 2px; color: var(--blue-bright); font-size: 27px; line-height: 28px; text-shadow: 0 0 9px rgba(61,174,255,.20), 0 1px 2px rgba(0,0,0,.55); }
.speed-card { padding: 7px; }
.live-label { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.live-label i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 5px rgba(113,135,150,.35); }
.speed-card > div:last-child { display: flex; align-items: baseline; gap: 4px; margin-top: 2px; }
.speed-card strong { color: var(--blue-bright); font-size: 29px; line-height: 31px; letter-spacing: -1px; text-shadow: 0 0 9px rgba(61,174,255,.30), 0 1px 2px rgba(0,0,0,.55); }
.speed-card strong.small-value { font-size: 25px; }
.speed-card span { color: var(--muted); font-size: 7px; }
.overlay:not(.is-connected) .speed-card strong { color: var(--muted); text-shadow: none; }
.overlay.is-connected .live-label i { background: var(--green); box-shadow: 0 0 7px rgba(80,227,154,.55); }

.connection { position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; align-items: center; gap: 4px; font-size: 6px; letter-spacing: .45px; color: var(--muted); }
.connection i { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }
.connection b { margin-left: auto; font-size: 6px; font-weight: 400; color: #78909f; }
.overlay.is-connected .connection i { background: var(--green); box-shadow: 0 0 6px rgba(80,227,154,.55); }

.carousel { position: relative; z-index: 2; grid-area: carousel; width: 475px; min-width: 0; height: 280px; overflow: hidden; opacity: var(--left-widget-opacity, 1); border: 1px solid rgba(205,231,246,.175); border-radius: 18px; background: radial-gradient(ellipse 88% 115% at 12% -32%, rgba(101,198,244,.09), transparent 58%), linear-gradient(118deg, rgba(255,255,255,.065), rgba(255,255,255,.018) 48%, rgba(116,197,239,.035)), #081925; backdrop-filter: blur(5px) saturate(112%); -webkit-backdrop-filter: blur(5px) saturate(112%); box-shadow: inset 0 1px 0 rgba(255,255,255,.11), inset 0 0 0 .5px rgba(255,255,255,.025), inset 0 -22px 42px rgba(0,6,11,.17), 0 12px 32px rgba(0,0,0,.34), 0 0 24px rgba(42,146,220,.045); transition: opacity .45s ease; }
.carousel-scale { position: relative; width: 475px; height: 186px; }
.carousel::before { content: ""; position: absolute; z-index: 5; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(112deg, rgba(255,255,255,.045), transparent 14%, transparent 73%, rgba(94,189,244,.025)); }
.carousel::after { content: none; }
.carousel-header { position: relative; height: 36px; padding: 4px 16px 3px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(105,190,235,.16); background: linear-gradient(90deg, rgba(37,131,192,.065), transparent 72%); box-shadow: 0 1px 0 rgba(0,4,8,.28); }
.carousel-header::after { content: ""; position: absolute; left: 18px; bottom: -1px; width: 92px; height: 1px; background: linear-gradient(90deg, var(--blue), transparent); box-shadow: 0 0 5px rgba(61,174,255,.4); }
.carousel-heading { display: flex; align-items: center; min-width: 0; }
.tour-summary { display: flex; align-items: center; gap: 9px; height: 27px; white-space: nowrap; }
.tour-name { position: relative; color: var(--white); font-size: 18px; line-height: 21px; letter-spacing: -.6px; background: linear-gradient(90deg, #ffffff 0%, #9ee3ff 48%, #56bfff 76%, #d8ff67 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 5px rgba(61,174,255,.38)) drop-shadow(0 1px 1px rgba(0,0,0,.7)); }
.tour-day-label { display: flex; align-items: center; gap: 3px; color: #d8e7ef; font-size: 16px; line-height: 20px; letter-spacing: -.3px; }
.tour-day-label b { color: var(--blue-bright); font-size: 16px; line-height: 20px; text-shadow: 0 0 7px rgba(61,174,255,.4); }
.header-weather { display: flex; align-items: center; gap: 4px; min-width: 57px; justify-content: flex-end; color: var(--blue-bright); }
.weather-icon { width: 22px; height: 21px; display: grid; place-items: center; }
.weather-icon svg { width: 22px; height: 20px; overflow: visible; fill: none; stroke: #b8e3f9; stroke-width: 1.25; filter: drop-shadow(0 0 4px rgba(87,181,234,.24)); animation: weather-drift 5s ease-in-out infinite; }
.weather-sun { fill: rgba(255,190,75,.14); stroke: #ffc866; }
.weather-cloud { fill: rgba(126,184,216,.13); }
.weather-rain, .weather-snow { opacity: 0; stroke: #7ed7ff; stroke-width: 1.5; }
.header-weather[data-weather="rain"] .weather-rain, .header-weather[data-weather="snow"] .weather-snow { opacity: 1; }
.header-weather[data-weather="rain"] .weather-sun, .header-weather[data-weather="snow"] .weather-sun, .header-weather[data-weather="cloudy"] .weather-sun { opacity: .3; }
.header-weather[data-weather="clear"] .weather-cloud { opacity: .28; }
.weather-values { display: flex; align-items: center; justify-content: flex-end; min-width: 31px; }
.weather-values strong { color: var(--white); font-size: 17px; line-height: 20px; text-shadow: 0 1px 2px rgba(0,0,0,.72), 0 0 7px rgba(61,174,255,.22); }
@keyframes weather-drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }

.slides { position: relative; height: 150px; overflow: hidden; }
.slide { position: absolute; inset: 0; padding: 11px 18px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s ease, visibility 0s linear .5s; }
.slide::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(105,190,235,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(105,190,235,.018) 1px, transparent 1px); background-size: 18px 18px; mask-image: linear-gradient(100deg, transparent, #000 82%); }
.slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.slide.is-leaving { opacity: 0; visibility: visible; }
.pagination { position: absolute; z-index: 10; right: 18px; bottom: 7px; display: flex; gap: 5px; }
.pagination button { width: 12px; height: 2px; padding: 0; border: 0; border-radius: 2px; background: rgba(139,190,218,.24); cursor: pointer; }
.pagination button.is-active { width: 22px; background: linear-gradient(90deg, var(--blue-deep), var(--blue-bright)); box-shadow: 0 0 6px rgba(61,174,255,.35); }

.current-charity { padding: 20px 20px 12px; background: radial-gradient(circle at 82% 43%, rgba(237,116,124,.065), transparent 28%), radial-gradient(ellipse 70% 100% at 0 100%, rgba(34,143,207,.07), transparent 70%); }
.stream-copy { position: relative; z-index: 2; width: 262px; }
.stream-heading p { color: #d6e7ef; font-size: 15px; line-height: 18px; font-weight: 700; letter-spacing: 1.05px; text-shadow: 0 1px 3px rgba(0,0,0,.78), 0 0 7px rgba(92,190,239,.16); }
.stream-sum { display: flex; align-items: baseline; gap: 9px; height: 78px; margin-top: 2px; }
.stream-sum strong { color: var(--white); font-size: 58px; line-height: 78px; font-weight: 800; letter-spacing: -2.8px; text-shadow: 0 2px 4px rgba(0,0,0,.58), 0 0 14px rgba(237,116,124,.1); }
.stream-sum span { color: #ed747c; font-size: 34px; line-height: 40px; font-weight: 700; text-shadow: 0 0 8px rgba(237,116,124,.12); }
.stream-sum.amount--six-digits { gap: 6px; }
.stream-sum.amount--six-digits strong { font-size: 49px; letter-spacing: -2.5px; }
.stream-sum.amount--six-digits span { font-size: 29px; }
.stream-sum.amount--seven-plus-digits { gap: 5px; }
.stream-sum.amount--seven-plus-digits strong { font-size: 41px; letter-spacing: -2.1px; }
.stream-sum.amount--seven-plus-digits span { font-size: 25px; }
.stream-hero-heart { position: absolute; z-index: 1; left: 169px; top: 38px; width: 92px; height: 92px; fill: rgba(171,57,69,.015); stroke: rgba(218,87,99,.085); stroke-width: .85; filter: drop-shadow(0 0 9px rgba(218,87,99,.1)); transform: rotate(-7deg); pointer-events: none; animation: charity-heart-breathe 4s ease-in-out infinite; }
.donor-leaders { position: absolute; z-index: 2; right: 18px; top: 8px; width: 184px; height: 128px; padding: 8px 10px; overflow: hidden; border: 1px solid rgba(138,205,239,.14); border-radius: 10px; background: linear-gradient(145deg, rgba(14,42,58,.58), rgba(7,24,35,.34)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 7px 16px rgba(0,0,0,.14); }
.donor-leader { position: relative; z-index: 2; height: 54px; min-width: 0; }
.donor-leader + .donor-leader { padding-top: 6px; border-top: 1px solid rgba(135,197,228,.075); }
.donor-leader p { display: flex; align-items: center; gap: 6px; color: #d5e5ec; font-size: 13px; line-height: 15px; font-weight: 700; letter-spacing: .65px; text-shadow: 0 1px 3px rgba(0,0,0,.82), 0 0 5px rgba(95,190,237,.14); }
.donor-leader p span { color: #ff8c96; font-size: 15px; text-shadow: 0 0 7px rgba(237,116,124,.5); }
.donor-leader--tour p span { color: #8ed6f7; }
.donor-leader div { min-width: 0; display: flex; align-items: baseline; justify-content: flex-start; gap: 7px; margin-top: 4px; }
.donor-leader strong { min-width: 0; max-width: 92px; overflow: hidden; flex: 0 1 auto; color: #eaf5fa; font-size: 12px; line-height: 16px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 0 5px rgba(97,196,245,.12); }
.donor-leader b { flex: 0 0 auto; color: #f18a92; font-size: 12px; line-height: 16px; white-space: nowrap; text-shadow: 0 0 6px rgba(237,116,124,.22); }
.donor-leader--tour b { color: #9bdeff; text-shadow: 0 0 6px rgba(61,174,255,.25); }
.leader-heart-watermark { position: absolute; z-index: 1; right: -10px; bottom: -18px; width: 64px; height: 64px; fill: rgba(237,116,124,.008); stroke: rgba(245,132,141,.035); stroke-width: .8; transform: rotate(-9deg); }

.bar { height: 5px; overflow: hidden; position: relative; border: 1px solid rgba(128,191,224,.055); border-radius: 7px; background: linear-gradient(180deg, rgba(2,10,16,.66), rgba(77,131,159,.15)); box-shadow: inset 0 1px 2px rgba(0,4,8,.72), 0 0 0 1px rgba(139,207,244,.018); }
.bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.13), transparent 48%); pointer-events: none; }
.bar i { display: block; height: 100%; width: 0; position: relative; border-radius: inherit; background: linear-gradient(90deg, #238fe6, #5bc4fa 72%, #a4e5ff); box-shadow: 0 0 4px rgba(61,174,255,.62), 0 0 9px rgba(61,174,255,.25); transition: width .7s ease; }
.bar i::after { content: ""; position: absolute; top: 0; right: 0; width: 2px; height: 100%; background: #e8f9ff; box-shadow: 0 0 5px rgba(155,222,255,.8); }

.permanent-map { position: relative; z-index: 2; grid-area: map; align-self: end; width: 215px; height: 240px; display: grid; grid-template-rows: 34px minmax(0, 1fr); gap: 5px; opacity: 0; visibility: hidden; transform: translateX(8px) scale(.985); transform-origin: right bottom; transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.22,.61,.36,1), visibility 0s linear 1.1s; }
.permanent-map.is-visible { opacity: var(--right-widget-opacity, 1); visibility: visible; transform: none; transition-delay: 0s; }
.map-viewport { position: relative; min-height: 0; overflow: hidden; border: 1px solid rgba(97,194,246,.38); border-radius: 11px; background: #0b1b27; backdrop-filter: blur(7px) saturate(112%); -webkit-backdrop-filter: blur(7px) saturate(112%); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.26), 0 5px 16px rgba(0,0,0,.3), 0 0 16px rgba(61,174,255,.1); }
.map-viewport::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: rgba(2,14,23,.28); }
.map-viewport::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 14px 20px rgba(4,15,23,.24), inset 0 -12px 18px rgba(4,15,23,.22); }
.map-fallback { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(40,109,146,.18), transparent 55%), #0b1b27; }
.map-viewport iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; transform: scale(1.34); transform-origin: center; }
.map-reticle { position: absolute; z-index: 3; left: 50%; top: 50%; width: 28px; height: 28px; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); }
.map-reticle::before, .map-reticle::after { content: ""; position: absolute; border-radius: 50%; }
.map-reticle::before { inset: 2px; border: 1px solid rgba(83,197,255,.62); box-shadow: 0 0 8px rgba(61,174,255,.28); animation: map-reticle-pulse 2.4s ease-out infinite; }
.map-reticle::after { inset: 7px; border: 1px solid rgba(195,237,255,.34); box-shadow: inset 0 0 5px rgba(61,174,255,.22), 0 0 6px rgba(61,174,255,.2); }
@keyframes map-reticle-pulse { 0% { opacity: .72; transform: scale(.68); } 72%, 100% { opacity: 0; transform: scale(1.08); } }
.map-hud { display: flex; align-items: stretch; justify-content: space-between; min-width: 0; }
.map-metric { position: relative; width: 88px; display: flex; align-items: center; min-width: 0; overflow: hidden; padding: 0 8px; border: 1px solid rgba(97,194,246,.38); border-radius: 10px; background: radial-gradient(circle at 18% 0, rgba(89,190,247,.13), transparent 52%), linear-gradient(145deg, rgba(10,34,49,.94), rgba(4,17,26,.9)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.26), 0 4px 13px rgba(0,0,0,.28), 0 0 13px rgba(61,174,255,.09); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.map-metric::after { content: ""; position: absolute; top: 0; left: 9px; right: 9px; height: 1px; background: linear-gradient(90deg, transparent, rgba(155,222,255,.68), transparent); }
.map-metric--distance { justify-content: center; }
.map-metric--speed { justify-content: flex-end; }
.map-metric-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(3px); transition: opacity .65s ease, transform .65s ease; }
.map-metric-slide.is-active { opacity: 1; transform: none; }
.map-metric-slide--caption { color: #e7f8ff; font-size: 12px; line-height: 14px; font-weight: 800; letter-spacing: .55px; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,.76), 0 0 8px rgba(61,174,255,.36); }
.map-metric-value { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.map-metric-value strong { color: var(--blue-bright); font-size: 20px; line-height: 23px; letter-spacing: -.65px; text-shadow: 0 0 8px rgba(61,174,255,.32), 0 2px 3px rgba(0,0,0,.65); }
.map-metric-value span { color: #f2fbff; font-size: 11px; line-height: 13px; font-weight: 800; letter-spacing: -.15px; text-transform: lowercase; text-shadow: 0 1px 2px rgba(0,0,0,.76), 0 0 5px rgba(92,202,255,.2); }
.overlay:not(.is-connected) .map-metric-value strong { color: var(--muted); text-shadow: none; }
@media (prefers-reduced-motion: reduce) { .permanent-map { transition-duration: .01ms; transition-delay: 0s; } }
.flying-hippo { display: none; position: absolute; z-index: 4; left: 50%; top: 50%; width: 94px; height: 68px; pointer-events: none; transform: translate(-50%, -50%); animation: hippo-bob 1.15s ease-in-out infinite; filter: drop-shadow(0 1px 1px rgba(1,10,18,.95)) drop-shadow(0 0 3px rgba(93,206,255,.88)) drop-shadow(0 0 7px rgba(68,155,255,.48)); }
.flying-hippo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hippo-aura { fill: rgba(33,156,235,.12); filter: url(#hippo-glow); animation: hippo-pulse 1.5s ease-in-out infinite; }
.hippo-bike { stroke: #178de7; stroke-width: 3.2; filter: drop-shadow(0 0 1px #effbff) drop-shadow(0 0 3px rgba(29,154,235,.9)); }
.hippo-wheel { transform-box: fill-box; transform-origin: center; animation: hippo-wheel-spin .72s linear infinite; }
.hippo-wheel path { stroke: #b8e9ff; stroke-width: 1.1; opacity: .88; }
.hippo-frame { stroke: #4dc0ff; stroke-width: 3.4; }
.hippo-wing { fill: url(#hippo-wing); stroke: #367fb9; stroke-width: 1.5; transform-box: fill-box; filter: drop-shadow(0 0 3px rgba(111,216,255,.72)); }
.hippo-wing path + path { fill: none; stroke: rgba(64,157,215,.65); stroke-width: 1; }
.hippo-wing--left { transform-origin: right center; animation: hippo-wing-left .46s ease-in-out infinite alternate; }
.hippo-wing--right { transform-origin: left center; animation: hippo-wing-right .46s ease-in-out infinite alternate; }
.hippo-body, .hippo-head { fill: url(#hippo-body); stroke: #f4ecff; stroke-width: 1.3; }
.hippo-ear { fill: #aa95e0; stroke: #f4ecff; stroke-width: 1.2; }
.hippo-snout { fill: #c8b4ee; stroke: #f4ecff; stroke-width: 1; }
.hippo-eye, .hippo-nostril { fill: #182238; }
.hippo-smile { fill: none; stroke: #5b477c; stroke-width: 1.3; stroke-linecap: round; }
.hippo-heart { fill: #f45f72; stroke: #fff0f2; stroke-width: .8; filter: drop-shadow(0 0 3px rgba(244,95,114,.9)); }
.hippo-arm, .hippo-leg { fill: none; stroke: #bba8e9; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.hippo-scarf { fill: none; stroke: #ed747c; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(237,116,124,.7)); animation: hippo-scarf-wave .65s ease-in-out infinite alternate; transform-origin: right center; }
@keyframes hippo-bob { 0%, 100% { transform: translate(-50%, -50%) rotate(-1deg); } 50% { transform: translate(-50%, calc(-50% - 4px)) rotate(1.5deg); } }
@keyframes hippo-pulse { 0%, 100% { opacity: .48; transform: scale(.92); transform-origin: center; } 50% { opacity: .9; transform: scale(1.08); transform-origin: center; } }
@keyframes hippo-wheel-spin { to { transform: rotate(360deg); } }
@keyframes hippo-wing-left { from { transform: rotate(8deg) scaleY(.82); } to { transform: rotate(-16deg) scaleY(1.08); } }
@keyframes hippo-wing-right { from { transform: rotate(-8deg) scaleY(.82); } to { transform: rotate(16deg) scaleY(1.08); } }
@keyframes hippo-scarf-wave { from { transform: rotate(4deg); } to { transform: rotate(-8deg); } }

.total-charity { padding: 17px 24px 12px; background: radial-gradient(circle at 84% 49%, rgba(237,116,124,.07), transparent 31%), radial-gradient(ellipse 74% 105% at 0 100%, rgba(34,143,207,.08), transparent 68%); }
.total-copy { position: relative; z-index: 2; width: 382px; }
.total-heading { color: #d5e7ef; font-size: 14px; line-height: 17px; font-weight: 800; letter-spacing: 1.15px; text-shadow: 0 1px 3px rgba(0,0,0,.78), 0 0 7px rgba(89,191,241,.18); -webkit-text-stroke: .2px rgba(230,247,255,.28); }
.charity-sum { display: flex; align-items: baseline; gap: 10px; height: 82px; margin-top: -1px; }
.charity-sum strong { color: #fff; font-size: 72px; line-height: 84px; font-weight: 800; letter-spacing: -3.2px; -webkit-text-stroke: .65px rgba(231,247,255,.72); text-shadow: 0 3px 4px rgba(0,0,0,.78), 0 0 2px #fff, 0 0 18px rgba(237,116,124,.16); }
.charity-sum span { color: #f17881; font-size: 39px; line-height: 45px; font-weight: 700; text-shadow: 0 0 10px rgba(237,116,124,.18); }
.charity-sum.large strong { font-size: 59px; }
.charity-caption { color: #eef7fb; font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .2px; text-shadow: 0 1px 3px rgba(0,0,0,.78), 0 0 4px rgba(214,241,255,.08); }
.charity-caption span { color: inherit; -webkit-text-stroke: 0; text-shadow: inherit; }
.stream-sum strong, .charity-sum strong { position: relative; display: inline-block; transform-style: preserve-3d; backface-visibility: hidden; }
.stream-sum.is-amount-updated strong, .charity-sum.is-amount-updated strong { animation: amount-new-page-pulse 1.42s cubic-bezier(.2,.72,.22,1) both; }
.stream-sum.is-amount-updated strong::before, .charity-sum.is-amount-updated strong::before { content: attr(data-previous-value); position: absolute; left: 0; top: 0; color: #fff; white-space: nowrap; pointer-events: none; transform-origin: center 58%; animation: amount-old-page .42s cubic-bezier(.55,.06,.68,.19) both; }
.stream-sum.is-amount-updated > span, .charity-sum.is-amount-updated > span { animation: amount-ruble-pulse 1.42s ease-out both; }
.charity-caption.is-amount-updated { transform-origin: left center; animation: charity-caption-update 1.12s .82s ease-out both; }
@keyframes amount-old-page {
  0% { opacity: 1; transform: perspective(420px) rotateX(0) translateY(0); filter: blur(0); }
  100% { opacity: 0; transform: perspective(420px) rotateX(-82deg) translateY(-7px); filter: blur(1px); }
}
@keyframes amount-new-page-pulse {
  0%, 27% { opacity: 0; color: #fff; transform: perspective(420px) rotateX(78deg) translateY(7px) scale(.97); text-shadow: 0 2px 4px rgba(0,0,0,.72); }
  47% { opacity: 1; color: #ff6675; transform: perspective(420px) rotateX(0) translateY(0) scale(1); text-shadow: 0 2px 4px rgba(0,0,0,.7), 0 0 10px rgba(255,72,91,.82), 0 0 22px rgba(237,82,97,.5); }
  65% { color: #ff6675; transform: perspective(420px) rotateX(0) scale(1.045); text-shadow: 0 2px 4px rgba(0,0,0,.7), 0 0 15px rgba(255,72,91,.9), 0 0 28px rgba(237,82,97,.56); }
  100% { opacity: 1; color: #fff; transform: perspective(420px) rotateX(0) scale(1); }
}
@keyframes amount-ruble-pulse {
  0%, 28% { opacity: .45; transform: translateY(2px) scale(.92); }
  52%, 68% { opacity: 1; color: #ff5365; transform: translateY(0) scale(1.12); text-shadow: 0 0 13px rgba(255,72,91,.8); }
  100% { opacity: 1; color: #ed747c; transform: none; }
}
@keyframes charity-caption-update {
  0% { color: #eef7fb; transform: scale(1); text-shadow: 0 1px 3px rgba(0,0,0,.78); }
  36%, 62% { color: #ff6574; transform: scale(1.045); text-shadow: 0 0 8px rgba(255,72,91,.76), 0 0 17px rgba(237,82,97,.42), 0 1px 3px rgba(0,0,0,.82); }
  100% { color: #eef7fb; transform: scale(1); text-shadow: 0 1px 3px rgba(0,0,0,.78), 0 0 4px rgba(214,241,255,.08); }
}
.total-heart-field { position: absolute; z-index: 1; right: 22px; top: 12px; width: 126px; height: 126px; display: grid; place-items: center; }
.total-heart-field .heart--watermark { width: 110px; height: 110px; fill: rgba(171,57,69,.015); stroke: rgba(230,99,111,.095); stroke-width: .8; filter: drop-shadow(0 0 11px rgba(218,87,99,.12)); transform: rotate(-7deg); animation: charity-heart-breathe 4.5s ease-in-out infinite; }
@keyframes charity-heart-breathe { 0%,100% { transform: scale(.96); opacity: .72; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes donor-heart-pulse { 0%,100% { transform: scale(.92); opacity: .78; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes charity-heart-beat { 0%,100% { transform: scale(.96); } 12% { transform: scale(1.04); } 24% { transform: scale(.98); } 38% { transform: scale(1.03); } 55% { transform: scale(.96); } }
@keyframes charity-glow { 0%,100% { opacity: .62; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes charity-float { 0%,100% { transform: translateY(0); opacity: .3; } 50% { transform: translateY(-4px); opacity: .58; } }

.stage-slide { padding: 0; overflow: hidden; isolation: isolate; background: #071620; }
.stage-photo-field { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 330px; overflow: hidden; background: #0a202e; }
.stage-photo-layer { position: absolute; inset: 0; overflow: hidden; opacity: 0; background-image: var(--stage-photo); background-position: center; background-size: cover; transition: opacity 1.25s ease; }
.stage-photo-layer::before { content: ""; position: absolute; inset: -10px; background-image: var(--stage-photo); background-position: center; background-size: cover; filter: blur(8px) brightness(.68) saturate(.9); transform: scale(1.09); }
.stage-photo-layer img { position: absolute; inset: 0; width: 100%; height: 100%; filter: saturate(.9) contrast(1.03) brightness(.82); transform: scale(1.015); transition: transform 6s ease-out; }
.stage-photo-layer.is-active { opacity: 1; }
.stage-photo-layer.is-active img { transform: scale(1.045); }
.stage-photo-shade { position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(4,16,25,.99) 0%, rgba(5,19,29,.97) 29%, rgba(5,18,28,.84) 45%, rgba(4,15,23,.38) 70%, rgba(2,10,16,.12) 100%), linear-gradient(180deg, rgba(2,11,18,.22), transparent 45%, rgba(2,11,18,.48)); box-shadow: inset 0 1px 0 rgba(167,222,250,.08), inset 0 -1px 0 rgba(0,0,0,.45); }
.stage-postcard-copy { position: relative; z-index: 3; width: 305px; height: 150px; padding: 14px 0 10px 20px; text-shadow: 0 2px 4px rgba(0,0,0,.82); }
.stage-goal-label { color: #c7dce6; font-size: 15px; line-height: 18px; font-weight: 800; letter-spacing: .45px; text-shadow: 0 1px 3px rgba(0,0,0,.84), 0 0 7px rgba(79,183,234,.2); }
#stage-destination { max-width: 285px; margin-top: 2px; overflow: hidden; color: #f7fcff; font-size: 31px; line-height: 34px; font-weight: 800; letter-spacing: -.85px; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 2px 4px rgba(0,0,0,.88), 0 0 14px rgba(84,190,244,.18); }
#stage-destination.is-long { display: -webkit-box; max-width: 275px; max-height: 50px; font-size: 22px; line-height: 25px; letter-spacing: -.5px; white-space: normal; text-overflow: clip; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
#stage-destination.is-very-long { max-width: 272px; font-size: 18.5px; line-height: 23px; letter-spacing: -.35px; }
.stage-country-line { display: flex; align-items: center; gap: 7px; margin-top: 3px; color: #cfe6f1; font-size: 10px; line-height: 14px; font-weight: 800; letter-spacing: 1.05px; }
.stage-country-line svg { width: 18px; height: 12px; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(228,246,255,.48); border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.58), 0 0 7px rgba(109,199,244,.12); }
.stage-remaining-line { position: absolute; left: 20px; bottom: 9px; color: #a9bec9; font-size: 11px; line-height: 29px; font-weight: 800; letter-spacing: .7px; }
.stage-remaining-line strong { margin-left: 7px; color: #a8e6ff; font-size: 26px; line-height: 29px; letter-spacing: -.3px; text-shadow: 0 0 11px rgba(61,174,255,.42), 0 2px 3px rgba(0,0,0,.86); }
.city-reached { position: absolute; z-index: 9; inset: 13px 18px; display: grid; place-items: center; border: 1px solid rgba(80,227,154,.78); border-radius: 10px; background: rgba(7,35,27,.88); backdrop-filter: blur(5px); color: #89ffc2; font-size: 18px; font-weight: 800; letter-spacing: 1.5px; box-shadow: 0 0 18px rgba(80,227,154,.16), inset 0 1px 0 rgba(255,255,255,.08); }
.city-reached[hidden] { display: none; }

@keyframes statusBreath {
  0%, 100% { filter: brightness(.94); }
  50% { filter: brightness(1.08); }
}
.brand-icon { animation: statusBreath 5s ease-in-out infinite; }

.distance-slide { padding: 9px 18px 6px; overflow: visible; background: radial-gradient(ellipse 70% 105% at 50% 48%, rgba(32,145,210,.09), transparent 67%); }
.distance-hero-label { color: #b8ceda; font-size: 9px; line-height: 11px; font-weight: 700; letter-spacing: 1.8px; text-align: center; text-shadow: 0 0 8px rgba(84,190,244,.15); }
.distance-hero-value { height: 58px; display: flex; align-items: baseline; justify-content: center; gap: 7px; white-space: nowrap; }
.distance-hero-value strong { font-size: 52px; line-height: 56px; font-weight: 800; letter-spacing: -2.4px; color: #76d8ff; background: linear-gradient(180deg, #d5f7ff 0%, #78ddff 54%, #3daeff 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 8px rgba(61,174,255,.34)); }
.distance-hero-value > span { color: #8fccea; font-size: 27px; line-height: 38px; font-weight: 300; transform: skewX(-8deg); text-shadow: 0 0 8px rgba(61,174,255,.2); }
.distance-hero-value b { color: #f6fbff; font-size: 40px; line-height: 48px; font-weight: 800; letter-spacing: -1.8px; text-shadow: 0 2px 4px rgba(0,0,0,.7), 0 0 10px rgba(216,244,255,.18); }
.distance-hero-value small { color: #eaf8ff; font-size: 16px; line-height: 20px; font-weight: 800; letter-spacing: .3px; text-shadow: 0 0 7px rgba(61,174,255,.28); }
.route-progress-hero { margin-top: 8px; }
.route-progress-track { position: relative; height: 16px; overflow: visible; border: 1px solid rgba(116,211,255,.74); border-radius: 12px; background: linear-gradient(180deg, rgba(2,12,20,.92), rgba(19,55,75,.55)); box-shadow: inset 0 1px 3px rgba(0,0,0,.8), inset 0 0 0 1px rgba(176,227,251,.04), 0 0 8px rgba(61,174,255,.24); }
.route-progress-track::before { content: ""; position: absolute; z-index: 2; inset: 3px 7px; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(172,220,243,.24) calc(10% - 1px) 10%); }
.route-progress-track::after { content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 42%); }
.route-progress-track > i { position: absolute; z-index: 1; left: 2px; top: 2px; bottom: 2px; width: 0; max-width: calc(100% - 4px); border-radius: 9px; background: linear-gradient(90deg, #36b9ff, #73ddff 72%, #c9f4ff); box-shadow: 0 0 5px rgba(61,174,255,.88), 0 0 12px rgba(61,174,255,.52); transition: width .7s ease; }
.route-progress-cities { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 5px; color: #d0e3ec; font-size: 10px; line-height: 13px; font-weight: 800; letter-spacing: .65px; text-shadow: 0 1px 2px rgba(0,0,0,.68), 0 0 5px rgba(70,177,231,.12); }
.route-progress-cities strong { color: #9fe7ff; font-size: 24px; line-height: 24px; text-shadow: 0 0 10px rgba(61,174,255,.48), 0 1px 2px rgba(0,0,0,.72); }
.route-progress-cities span:last-child { text-align: right; }

.route-strip { position: absolute; z-index: 7; left: 0; right: 0; bottom: 0; height: 72px; overflow: hidden; border-top: 1px solid rgba(111,203,250,.22); background: radial-gradient(ellipse 90% 110% at 50% 110%, rgba(36,142,203,.14), transparent 64%), linear-gradient(180deg, rgba(6,20,30,.78), rgba(3,13,21,.94)); box-shadow: 0 -8px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04); }
.route-strip::before { content: ""; position: absolute; inset: 0; opacity: .16; background: linear-gradient(135deg, transparent 0 18%, rgba(122,195,231,.2) 18.2% 18.5%, transparent 18.7% 43%, rgba(122,195,231,.18) 43.2% 43.5%, transparent 43.7% 68%, rgba(122,195,231,.16) 68.2% 68.5%, transparent 68.7%); }
.route-stops { position: absolute; left: 18px; right: 18px; top: 8px; height: 22px; }
.route-stop { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; color: #a7b9c5; font-size: 7px; line-height: 8px; white-space: nowrap; }
.route-stop--start { left: 0; transform: none; align-items: flex-start; color: var(--white); font-size: 8px; font-weight: 700; }
.route-stop--finish { right: 0; transform: none; align-items: flex-end; color: var(--white); font-size: 8px; font-weight: 700; }
.flag { display: block; width: 11px; height: 6px; border-radius: 1px; box-shadow: 0 0 4px rgba(255,255,255,.16); }
.flag--it { background: linear-gradient(90deg, #1b9a58 0 33%, #f5f5ef 33% 66%, #df4d52 66%); }
.flag--ch { background: linear-gradient(#e43d43,#e43d43); position: relative; }
.flag--ch::before, .flag--ch::after { content: ""; position: absolute; background: #fff; }
.flag--ch::before { width: 6px; height: 2px; left: 2.5px; top: 2px; }
.flag--ch::after { width: 2px; height: 5px; left: 4.5px; top: .5px; }
.flag--de { background: linear-gradient(#181818 0 33%, #d94747 33% 66%, #e9c64b 66%); }
.flag--nl { background: linear-gradient(#d54a50 0 33%, #f5f5ef 33% 66%, #3d65a4 66%); }
.route-track { position: absolute; left: 18px; right: 18px; top: 39px; height: 2px; border-radius: 2px; background: rgba(191,218,232,.28); box-shadow: 0 0 8px rgba(0,0,0,.45); }
.route-track > i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1688ee, #4fc5ff 68%, #b4edff); box-shadow: 0 0 7px rgba(61,174,255,.72); transition: width .7s ease; }
.route-node { position: absolute; top: 50%; width: 6px; height: 6px; transform: translate(-50%,-50%); border: 1px solid rgba(220,239,248,.72); border-radius: 50%; background: #0b2231; }
.route-track > b { position: absolute; top: 50%; left: 0; width: 21px; height: 21px; display: grid; place-items: center; transform: translate(-50%,-50%); border: 1px solid rgba(155,222,255,.6); border-radius: 50%; background: #f7fbff; color: #198ee8; box-shadow: 0 0 9px rgba(61,174,255,.65), 0 2px 5px rgba(0,0,0,.45); transition: left .7s ease; }
.route-track > b svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.route-strip-caption { position: absolute; left: 18px; right: 18px; bottom: 5px; display: flex; justify-content: space-between; color: var(--muted); font-size: 7px; line-height: 10px; letter-spacing: .75px; }
.route-strip-distance { color: var(--blue-bright); font-size: 8px; white-space: nowrap; }

.route-panorama { position: absolute; z-index: 7; left: 0; right: 0; bottom: 0; height: 94px; overflow: hidden; border-top: 1px solid rgba(124,205,246,.16); background: linear-gradient(180deg, rgba(5,19,29,.58), rgba(2,11,17,.98)); box-shadow: 0 -7px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035); }
.route-panorama::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(66,164,215,.06), transparent 18% 82%, rgba(66,164,215,.06)); }
.route-art { position: absolute; inset: 0; width: 475px; height: 94px; }
.route-mountains { fill: rgba(77,111,130,.13); }
.route-mountains--back { fill: rgba(104,137,154,.08); }
.route-cityscape { fill: rgba(118,157,178,.24); stroke: rgba(157,193,211,.26); stroke-width: .7; vector-effect: non-scaling-stroke; }
.route-venice { fill: rgba(116,159,181,.29); }
.route-amsterdam { fill: rgba(132,171,191,.31); }
.route-bridge, .route-windmill path { fill: none; stroke: rgba(154,194,214,.34); stroke-width: 1; }
.route-road { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route-road--future { stroke: url(#route-road-dim); stroke-width: 2.15; opacity: .68; }
.route-road--complete { stroke: url(#route-road-live); stroke-width: 4; filter: url(#route-blue-glow); transition: stroke-dasharray .7s ease; }
.route-city-node { fill: #102531; stroke: rgba(227,242,249,.85); stroke-width: 1.15; transition: fill .35s ease, stroke .35s ease, filter .35s ease; }
.route-city-node.is-passed { fill: #55caff; stroke: #e3f9ff; filter: url(#route-blue-glow); }
.route-city-node--major { stroke-width: 1.5; }
.route-city-node--finish { fill: #102531; stroke: #d6f4ff; stroke-width: 1.4; filter: url(#route-soft-glow); }
.route-city-node--finish.is-passed { fill: #f4fbff; stroke: #69d4ff; filter: url(#route-blue-glow); }
.route-labels { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.route-label { position: absolute; top: 17px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; color: #e1eef4; font-size: 13px; line-height: 15px; font-weight: 700; letter-spacing: -.22px; text-shadow: 0 1px 2px #02090e, 0 2px 5px #02090e, 0 0 5px rgba(96,190,237,.2); -webkit-text-stroke: .15px rgba(235,248,255,.28); white-space: nowrap; }
.route-label--major { top: 33px; color: #f5fbfe; font-size: 14px; line-height: 16px; font-weight: 700; }
.route-label--start { transform: none; align-items: flex-start; }
.route-label--finish { transform: translateX(-100%); align-items: flex-end; }
.route-label .flag { width: 15px; height: 9px; }
.route-cyclist { position: absolute; z-index: 5; left: 43px; top: 59px; width: 82px; height: 62px; display: grid; place-items: center; transform: translate(-50%,-61.5%); transition: left .7s ease, top .7s ease; animation: route-real-rider-bob 1.35s ease-in-out infinite alternate; }
.route-cyclist img { position: relative; z-index: 2; display: block; width: 82px; height: 62px; object-fit: contain; filter: drop-shadow(0 0 2px rgba(111,211,255,.75)) drop-shadow(0 4px 3px rgba(0,0,0,.88)); animation: route-real-rider-drive 1.1s ease-in-out infinite alternate; }
.route-speed-streak { position: absolute; z-index: 1; left: -16px; width: 34px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(118,218,255,.78)); filter: drop-shadow(0 0 3px rgba(61,174,255,.72)); animation: route-real-speed 1.8s linear infinite; }
.route-speed-streak--one { top: 32px; }
.route-speed-streak--two { top: 42px; width: 25px; animation-delay: -.3s; }
@keyframes route-real-rider-bob { from { transform: translate(-50%,-59%) rotate(-1deg); } to { transform: translate(-50%,-64%) rotate(.8deg); } }
@keyframes route-real-rider-drive { from { transform: translateY(0) scaleX(.995); } to { transform: translateY(-1px) scaleX(1.005); } }
@keyframes route-real-speed { 0% { opacity: 0; transform: translateX(12px) scaleX(.55); } 45% { opacity: .9; } 100% { opacity: 0; transform: translateX(-10px) scaleX(1.15); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .route-cyclist { animation: route-real-rider-bob 1.35s ease-in-out infinite alternate !important; transition: left .7s ease, top .7s ease !important; }
  .route-cyclist img { animation: route-real-rider-drive 1.1s ease-in-out infinite alternate !important; }
  .route-speed-streak { animation: route-real-speed 1.8s linear infinite !important; }
}