html, body { width: 100%; height: 100%; overflow: clip; background: #e9edf1; }
.route-demo { --panel-scale: .88; position: relative; width: 100%; height: 100%; overflow: clip; }
.route-map-surface { position: absolute; left: 0; top: var(--map-top, 0px); width: var(--map-width); height: var(--map-height, 100%); background: #9b7aa6; overflow: hidden; }
#route-map { display: block; width: 100%; height: 100%; }
.route-demo .poi-panel { position: absolute; top: var(--panel-top, 37.5%); right: auto; bottom: auto; left: var(--panel-left); width: var(--panel-width, 285px); height: 540px; transform: scale(var(--panel-scale)); transform-origin: top left; border: 0; --poi-accent: #9b7aa6; }
.route-demo .poi-panel-head { padding-top: 14px; }
.route-demo .route-view { min-height: 0; max-height: var(--route-scroll-height); }
.route-demo .poi-mode-text:disabled, .route-demo .poi-mode-text:disabled:hover { opacity: .22; cursor: default; }
.route-demo [hidden] { display: none; }
.route-demo .route-day-label { width: 100%; display: flex; align-items: center; justify-content: space-between; background: none; border: 0; padding: 0; color: var(--ink); text-align: left; cursor: pointer; }
.route-demo .route-day-meta { color: #9b7aa6; }
.route-demo .route-day-meta > span:first-child { display: inline-flex; align-items: center; gap: 3px; }
.route-demo .route-place-item { width: 100%; background: none; border-width: 0 0 .5px; text-align: left; }
.route-demo .route-place-item:hover { letter-spacing: normal; opacity: 1; }
.route-demo .route-place-item:hover, .route-demo .route-place-item:focus-visible, .route-demo .route-place-item--active { color: #9b7aa6; }
.route-demo .poi-item { cursor: default; }
.route-pin { opacity: 1; transition: opacity 180ms ease; }
.route-pin .pin-inner { transform-origin: 0 0; transition: transform 180ms ease; }
.route-pin.is-dim { opacity: .22; }
.route-pin.is-highlighted .pin-inner { transform: scale(1.5); }
@media (prefers-reduced-motion: reduce) { .route-pin, .route-pin .pin-inner { transition: none; } }

@media (max-width: 620px) {
  .route-demo .poi-mode-text, .route-demo .route-day-label { font-size: 14px; }
  .route-demo .route-day-note, .route-demo .route-place-item { font-size: 13px; }
  .route-demo .route-day-meta { font-size: 11px; }
  .route-demo .route-place-item { min-height: 40px; }
}