.journey-playback{position:fixed;bottom:30px;left:4.3vw;z-index:6;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 15px;border:1px solid color-mix(in srgb,var(--chrome) 38%,transparent);border-radius:24px;background:color-mix(in srgb,var(--paper) 78%,transparent);color:#2d4050;backdrop-filter:blur(9px);font:500 11px/1.4 var(--sans);letter-spacing:.3px;transition:background .3s,color .6s,border-color .6s,opacity .3s;box-shadow:0 3px 20px #10263b0d}
.journey-dark .journey-playback{background:#10273bb3;color:#f8efdd}
.journey-playback:hover{background:#f6f0e3ed}
.journey-dark .journey-playback:hover{background:#10273bea}
.playback-play{display:none}
.journey-playback.is-paused .playback-play{display:block}
.journey-playback.is-paused .playback-pause{display:none}
body.dialog-open .journey-playback{visibility:hidden}
@media(max-width:700px){.journey-playback{left:auto;right:16px;bottom:15px;min-height:40px;width:40px;padding:10px;justify-content:center}.journey-playback svg{width:17px;height:17px}.playback-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.journey-route{gap:6px}.journey-route a{width:29px;height:32px}}
@media(max-width:380px){.journey-playback{right:12px;width:38px;min-height:38px;bottom:15px}.journey-route{gap:5px}.journey-route a{width:28px}}

/* The same countdown follows the pill on desktop and the circle on a phone. */
.journey-playback .playback-countdown{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none}
.playback-countdown rect{x:2px;y:2px;width:calc(100% - 4px);height:calc(100% - 4px);rx:26px;ry:26px;fill:none;stroke:currentColor;stroke-width:1.8;vector-effect:non-scaling-stroke}
.playback-countdown-track{opacity:.18}
.playback-countdown-progress{opacity:.9;stroke-dasharray:100;stroke-dashoffset:0;stroke-linecap:round}