.biogen-route-map {
  --brm-red: #ed493f;
  --brm-ink: #263e3d;
  --brm-paper: #f8f8f0;
  --brm-gold: #ffcf55;
  --brm-height: min(78vh, 760px);
  --brm-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 4px 12px rgba(29,52,41,.10);
  position: relative;
  width: 100%;
  min-width: 0;
  color: var(--brm-ink);
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  container-type: inline-size;
  container-name: biogen;
}
.biogen-route-map *, .biogen-route-map *::before, .biogen-route-map *::after { box-sizing: border-box; }
.biogen-route-map [hidden] { display: none !important; }
.biogen-route-map button, .biogen-route-map input { font: inherit; }
.biogen-route-map button { cursor: pointer; text-transform: none; letter-spacing: normal; }
.biogen-route-map button:disabled { opacity: .4; cursor: default; }
.biogen-route-map button:focus-visible, .biogen-route-map a:focus-visible { outline: 3px solid #ad641e; outline-offset: 3px; }
.biogen-route-map button:active:not(:disabled) { scale: .96; }
.biogen-route-map p { text-wrap: pretty; }
.brm-stage {
  position: relative;
  height: var(--brm-height);
  min-height: 570px;
  max-height: 960px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 14px;
  background: linear-gradient(#eaf1f3 0%, #f4ecdd 55%, #f6ddc4 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 14px 40px -24px rgba(20,48,37,.45);
}
.brm-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.brm-stage__shade { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(0deg,rgba(182,196,184,.3),transparent 24%); }
.brm-header { position: absolute; z-index: 4; top: 18px; left: 18px; display: flex; align-items: center; gap: 12px; }
.brm-brand { display: flex; align-items: center; gap: 11px; min-height: 55px; padding: 8px 14px 8px 8px; border-radius: 8px; background: var(--brm-paper); box-shadow: var(--brm-shadow); }
.brm-brand__flag { display: grid; place-items: center; width: 38px; height: 38px; font: italic 900 28px/1 Arial,sans-serif; color: white; background: var(--brm-red); border-radius: 3px; }
.brm-brand__copy { display: grid; gap: 4px; }
.brm-brand__copy strong { font-family: "Arial Narrow", "Avenir Next Condensed",sans-serif; font-size: 18px; font-weight: 900; line-height: 1; letter-spacing: -.025em; text-transform: uppercase; }
.brm-brand__copy small { font-size: 9px; font-weight: 700; letter-spacing: .045em; }
.brm-terrain-key { display: flex; align-items: center; gap: 7px; font: 11px ui-monospace,monospace; }
.brm-terrain-key span { display: block; width: 19px; height: 11px; background: #8da468; border-radius: 9px 7px 4px 3px / 11px 9px 5px 4px; }
.brm-terrain-key small { font-size: 10px; }
.brm-stats { position: absolute; z-index: 4; top: 18px; right: 76px; display: flex; background: var(--brm-paper); border-radius: 8px; box-shadow: var(--brm-shadow); }
.brm-stats > div { min-width: 90px; padding: 12px 15px 10px; }
.brm-stats > div + div { border-left: 1px solid rgba(38,62,61,.1); }
.brm-stats span { font-family: "Arial Narrow", "Avenir Next Condensed",sans-serif; font-size: 20px; font-weight: 800; line-height: 1; }
.brm-stats small { font-size: 10px; color: #687b72; }
.brm-stats label { display: block; margin-top: 5px; font-size: 8px; font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: .075em; }
.brm-fullscreen, .brm-map-tools button {
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
  color: var(--brm-ink); background: var(--brm-paper); border: 0; border-radius: 7px;
  box-shadow: var(--brm-shadow); transition: background-color 150ms, scale 150ms;
}
.brm-fullscreen { position: absolute; top: 18px; right: 18px; z-index: 4; }
.brm-fullscreen svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.brm-view-controls { position: absolute; z-index: 4; left: 18px; top: 87px; display: flex; gap: 4px; padding: 4px; border-radius: 7px; background: rgba(248,248,240,.94); box-shadow: var(--brm-shadow); }
.brm-view-controls button { min-height: 34px; padding: 0 12px; font-size: 11px; font-weight: 750; background: transparent; border: 0; border-radius: 4px; color: var(--brm-ink); transition: background-color 150ms, scale 150ms; }
.brm-view-controls button[aria-pressed="true"] { color: #fffaf0; background: var(--brm-ink); }
.brm-view-controls button:hover { background: #d8e1d4; }
.brm-view-controls button[aria-pressed="true"]:hover { background: #355651; }
.brm-map-tools { position: absolute; top: 92px; right: 18px; z-index: 4; display: grid; gap: 6px; }
.brm-map-tools button { font-size: 25px; font-weight: 500; }
.brm-map-tools button:first-child { height: 52px; gap: 0; padding: 4px 0; margin-bottom: 7px; }
.brm-map-tools button span { font: 24px/1 sans-serif; }
.brm-map-tools button small { font: 800 9px/1 ui-monospace,monospace; }
.brm-map-tools button:hover, .brm-fullscreen:hover { background: #fffefa; }
.brm-map-labels { position: absolute; z-index: 2; inset: 0; pointer-events: none; overflow: hidden; }
.brm-map-label { position: absolute; top: 0; left: 0; white-space: nowrap; line-height: 1; font-size: 15px; font-weight: 700; color: var(--brm-ink); }
.brm-map-label--road { padding: 7.5px 10.5px; border-radius: 4.5px; background: rgba(248,248,240,.9); box-shadow: 0 1.5px 4.5px rgba(0,0,0,.1); }
.brm-map-label--active { color: #942e29; background: #fff3e4; box-shadow: 0 0 0 1.5px #dc8d77; }
.brm-map-label--park { color: #355b3e; text-shadow: 1.5px 1.5px 0 #e2eed9,-1.5px -1.5px 0 #e2eed9; font-size: 15px; }
.brm-map-label--place { color: #4a4030; text-shadow: 1.5px 1.5px 0 #f6f0e1, -1.5px -1.5px 0 #f6f0e1, 1.5px -1.5px 0 #f6f0e1, -1.5px 1.5px 0 #f6f0e1; letter-spacing: .01em; }
.brm-map-label--district { color: #6b6350; font-size: 19.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .72; text-shadow: 1.5px 1.5px 0 #f6f0e1, -1.5px -1.5px 0 #f6f0e1, 1.5px -1.5px 0 #f6f0e1, -1.5px 1.5px 0 #f6f0e1; }
.brm-map-label--km { width: 39px; height: 39px; padding: 0; border: 3px solid #f9f7e9; border-radius: 6px; background: var(--brm-red); color: white; font: 800 16.5px/1 ui-monospace,monospace !important; box-shadow: 0 3px 4.5px rgba(51,53,28,.22); pointer-events: auto; }
.brm-map-label--km::after { content: ""; position: absolute; inset: -4px; }
.brm-map-label--start::after, .brm-map-label--finish::after { content: ""; position: absolute; inset: -12px 0; }
.brm-map-label--start, .brm-map-label--finish { min-height: 37.5px; padding: 9px 12px; border: 3px solid #fff7da; border-radius: 4.5px; background: #274541; color: #fff7da; font: 800 13.5px/1 ui-monospace,monospace !important; letter-spacing: .05em; pointer-events: auto; }
.brm-map-label--finish { background: #c34b3e; }
.brm-runner-pin { position: absolute; top: 0; left: 0; padding: 7.5px 10.5px; color: #473a1e; background: var(--brm-gold); border: 3px solid #fff7d5; border-radius: 4.5px; box-shadow: 0 3px 4.5px rgba(0,0,0,.15); font: 800 13.5px/1 ui-monospace,monospace; }
.brm-runner-pin::after { content: ""; position: absolute; width: 7.5px; height: 7.5px; bottom: -7.5px; left: calc(50% - 3.75px); background: #fff7d5; }
.brm-map-legend { position: absolute; z-index: 3; left: 22px; bottom: 176px; display: flex; align-items: center; gap: 16px; font-size: 9px; font-weight: 700; color: #365149; pointer-events: none; }
.brm-map-legend > span { display: flex; gap: 5px; align-items: center; }
.brm-map-legend i { width: 12px; height: 4px; display: inline-block; background: var(--brm-red); }
.brm-map-legend > span:nth-child(2) i { background: var(--brm-gold); }
.brm-map-legend > span:last-child { padding-left: 16px; border-left: 1px solid #afc0b2; opacity: .8; }
.brm-console { position: absolute; z-index: 4; left: 18px; right: 18px; bottom: 18px; padding: 13px 18px 12px; border-radius: 9px; background: rgba(248,248,240,.98); box-shadow: var(--brm-shadow); }
.brm-console__meta { display: grid; grid-template-columns: 82px 1fr 48px; align-items: center; gap: 12px; min-height: 27px; }
.brm-console__meta > span { color: #b7463b; font: 800 11px/1 ui-monospace,monospace; letter-spacing: .025em; }
.brm-console__meta > span:last-child { text-align: right; color: #6a7c73; }
.brm-console__meta p { margin: 0; font-size: 14px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brm-transport { display: grid; grid-template-columns: 46px 1fr; gap: 17px; align-items: end; }
.brm-play { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 10px; padding: 0; border: 0; border-radius: 5px; background: var(--brm-red); color: white; box-shadow: inset 0 -3px rgba(143,41,27,.16); transition: scale 150ms, background-color 150ms; }
.brm-play:hover { background: #d93e34; }
.brm-play__icons { display: grid; width: 24px; height: 24px; }
.brm-play svg { grid-area: 1/1; width: 24px; height: 24px; fill: currentColor; transition: opacity 200ms, scale 200ms, filter 200ms; }
.brm-play__play { margin-left: 1px; opacity: 1; scale: 1; filter: blur(0); }
.brm-play__pause { opacity: 0; scale: .25; filter: blur(4px); }
.brm-is-playing .brm-play__play { opacity: 0; scale: .25; filter: blur(4px); }
.brm-is-playing .brm-play__pause { opacity: 1; scale: 1; filter: blur(0); }
.brm-scrubber { position: relative; height: 78px; }
.brm-profile { position: absolute; top: 0; left: 0; width: 100%; height: 60px; overflow: visible; }
.brm-profile__area { fill: #d5decb; }
.brm-profile__line { fill: none; stroke: #799369; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.brm-profile-heights { position: absolute; top: 2px; left: 0; right: 0; display: flex; justify-content: space-between; z-index: 1; color: #72826b; font: 8px ui-monospace,monospace; }
.brm-track { position: absolute; bottom: 22px; left: 0; right: 0; height: 4px; border-radius: 1px; overflow: hidden; background: #b8c9ac; }
.brm-track > span { display: block; height: 100%; width: 0; background: #e55542; }
.brm-scrubber input[type="range"] { position: absolute; z-index: 2; left: -10px; bottom: 3px; width: calc(100% + 20px); height: 44px; margin: 0; opacity: 0; cursor: ew-resize; }
.brm-scrubber::after { content: ""; position: absolute; bottom: 15px; left: calc(var(--brm-progress,0)*1%); width: 18px; height: 18px; border-radius: 3px; border: 4px solid #fff9e7; background: var(--brm-red); box-shadow: 0 0 0 1px #ba9f78,0 2px 3px rgba(0,0,0,.12); transform: translateX(-50%); pointer-events: none; }
.brm-scrubber:has(input:focus-visible)::after { outline: 3px solid #ad641e; outline-offset: 3px; }
.brm-km-ticks { position: absolute; bottom: 3px; left: 0; right: 0; font: 8px ui-monospace,monospace; color: #677a69; }
.brm-km-ticks span { position: absolute; bottom: 0; transform: translateX(-50%); white-space: nowrap; }
.brm-km-ticks span:first-child { transform: none; }.brm-km-ticks .brm-tick-end { transform: translateX(-100%); }
.brm-console-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; color: #6c7d71; font-size: 9px; line-height: 1; }
.brm-hint { margin: 0; font-size: 9px; }.brm-console-footer > span { font: 9px ui-monospace,monospace; white-space: nowrap; }
.brm-attribution { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 35px; padding: 5px 2px; color: #66766d; font-size: 9px; }
.brm-attribution a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.brm-attribution button { flex: 0 0 auto; min-height: 40px; padding: 0 8px; border: 0; background: transparent; color: #3b534b; font-size: 10px; font-weight: 700; }
.brm-data-notes { position: absolute; z-index: 6; right: 18px; bottom: 183px; width: min(390px,calc(100% - 36px)); max-height: calc(100% - 200px); overflow: auto; padding: 20px; border-radius: 9px; background: #fffdf2; box-shadow: var(--brm-shadow),0 14px 35px rgba(0,0,0,.12); }
.brm-data-notes strong { font-size: 16px; }.brm-data-notes p { font-size: 12px; line-height: 1.6; margin: 11px 0; }
.brm-data-notes small { display: block; font-size: 10px; line-height: 1.6; }.brm-data-notes a { display: inline-block; color: #426444; margin-top: 12px; font-size: 11px; }
.brm-loading { position: absolute; z-index: 9; inset: 0; display: grid; align-content: center; justify-items: center; gap: 18px; background: #e5ebdf; color: var(--brm-ink); text-align: center; padding: 30px; font-size: 13px; font-weight: 700; transition: opacity 250ms,visibility 250ms; }
.brm-loading__mark { width: 33px; height: 33px; background: var(--brm-red); box-shadow: 12px -12px 0 #8b9e68,-12px 12px 0 #c4bc91; animation: brm-build 1.3s ease-in-out infinite; }
.brm-loading a { color: #446640; font-size: 12px; }.brm-is-ready .brm-loading { visibility: hidden; opacity: 0; }
.brm-has-error .brm-loading__mark { animation: none; background: #826b56; }
.brm-error { position: absolute; inset: 0; z-index: 10; display: grid; place-content: center; background: #e5ebdf; }
.brm-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.biogen-route-map:fullscreen { height: 100vh; background: #dbe5df; }.biogen-route-map:fullscreen .brm-stage { height: calc(100vh - 35px); max-height: none; border-radius: 0; }
@keyframes brm-build { 50% { transform: translateY(-6px); } }
@container biogen (max-width: 870px) {
  .brm-terrain-key { display: none; }.brm-stats > div { padding-inline: 11px; min-width: 80px; }.brm-brand__copy small { font-size: 8px; }
}
@container biogen (max-width: 720px) {
  .brm-stage { min-height: 610px; }.brm-header { top: 12px; left: 12px; }.brm-brand { min-height: 44px; padding: 6px 10px 6px 6px; }
  .brm-brand__flag { width: 30px; height: 30px; font-size: 22px; }.brm-brand__copy strong { font-size: 16px; }.brm-brand__copy small { display: none; }
  .brm-fullscreen { top: 12px; right: 12px; width: 40px; height: 40px; }.brm-stats { top: 67px; left: 12px; right: 12px; }.brm-stats > div { flex: 1; padding: 9px 10px; min-width: 0; }.brm-stats span { font-size: 19px; }
  .brm-view-controls { top: 126px; left: 12px; }.brm-view-controls button { min-height: 32px; font-size: 10px; padding: 0 10px; }.brm-map-tools { top: 132px; right: 12px; }.brm-map-tools button { width: 40px; height: 40px; }
  .brm-console { left: 12px; right: 12px; bottom: 12px; padding: 9px 12px 11px; }.brm-console__meta { grid-template-columns: 60px 1fr 33px; gap: 8px; }.brm-console__meta p { font-size: 12px; }.brm-console__meta > span { font-size: 9px; }
  .brm-transport { grid-template-columns: 42px 1fr; gap: 12px; }.brm-play { width: 42px; height: 44px; }.brm-console-footer { justify-content: flex-end; margin-top: 5px; }.brm-hint { display: none; }
  .brm-map-legend { left: 16px; bottom: 159px; font-size: 8px; gap: 10px; }.brm-map-legend > span:last-child { display: none; }.brm-data-notes { bottom: 160px; }
  .brm-km-ticks { font-size: 7px; }.brm-km-ticks > span:nth-last-child(2) { display: none; }.brm-attribution { font-size: 8px; padding-inline: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .biogen-route-map *, .biogen-route-map *::before, .biogen-route-map *::after { animation: none !important; transition-duration: .01ms !important; }
}