/* One persistent illustration; only its environment, camera and capture state change. */
.mobile-section .mobile-demonstration{margin-top:64px}
.mobile-distance-stage{position:relative;width:100%;height:clamp(420px,43vw,650px);overflow:hidden;isolation:isolate}
.mobile-distance-art{display:block;width:100%;height:100%;overflow:hidden;font-family:inherit}
.mobile-distance-art [data-md-environment],.mobile-distance-art [data-md-people],.mobile-distance-art [data-md-earth]{will-change:transform,opacity}
.md-mobile-room{display:none}
.mobile-distance-pause{position:absolute;right:20px;bottom:18px;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid #b5c7d9;border-radius:50%;background:#fff;color:#31516e;cursor:pointer;transition:background .2s,color .2s}
.mobile-distance-pause:hover{background:#edf5fd;color:#006bdc}
.mobile-distance-pause svg{width:14px;height:14px;fill:currentColor}
.mobile-distance-pause:focus-visible{outline:2px solid #006bdc;outline-offset:4px}
.mobile-distance-pause[data-paused="true"] .md-pause-icon,.mobile-distance-pause:not([data-paused="true"]) .md-play-icon{display:none}
.mobile-distance-pause[hidden]{display:none}
.mobile-distance-controls{text-align:center;margin:30px auto 0;max-width:980px}
.mobile-distance-value{position:relative;display:grid;align-items:center;min-height:1.3em;margin:0;color:#006bdc;font-size:clamp(2.1rem,5.4vw,5rem);font-weight:600;line-height:1.2;letter-spacing:-.055em}
.mobile-distance-value span{grid-area:1/1;display:block;will-change:transform,opacity}
.mobile-distance-value [data-md-previous-label]{pointer-events:none}
.mobile-distance-caption{margin:14px 0 0;font-size:clamp(1rem,1.7vw,1.35rem);line-height:1.5;color:#747980}
.mobile-distance-selector{margin:32px auto 0;max-width:920px;--md-stop:0}
.mobile-distance-rail{height:36px;position:relative;margin-inline:10%}
.mobile-distance-track{position:absolute;height:2px;left:0;right:0;top:17px;background:#dae4ee}
.mobile-distance-tick{position:absolute;left:calc(var(--tick) * 25%);top:13px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#dae4ee;border:2px solid #fff;box-sizing:border-box}
.mobile-distance-thumb{position:absolute;left:calc(var(--md-stop) * 25%);top:9px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:#006bdc;box-shadow:0 0 0 5px #e6f1fc;transition:left .4s cubic-bezier(.22,1,.36,1)}
.mobile-distance-range{position:absolute;inset:0;width:100%;height:36px;margin:0;background:transparent;appearance:none;-webkit-appearance:none;cursor:pointer;z-index:2;opacity:1}
.mobile-distance-range::-webkit-slider-runnable-track{height:2px;background:transparent}
.mobile-distance-range::-moz-range-track{height:2px;background:transparent}
.mobile-distance-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:30px;height:30px;background:transparent;border:0;margin-top:-14px}
.mobile-distance-range::-moz-range-thumb{width:30px;height:30px;background:transparent;border:0}
.mobile-distance-range:focus{outline:none}
.mobile-distance-range:focus-visible{outline:2px solid #006bdc;outline-offset:8px;border-radius:8px}
.mobile-distance-stops{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;gap:0}
.mobile-distance-stops button{position:relative;min-height:48px;padding:13px 4px 8px;border:0;background:none;color:#747980;font-family:inherit;font-size:clamp(.75rem,1.4vw,1rem);font-weight:500;line-height:1.35;cursor:pointer;transition:color .2s}
.mobile-distance-stops button[aria-pressed="true"]{color:#006bdc;font-weight:600}
.mobile-distance-stops button:hover{color:#006bdc}
.mobile-distance-stops button:focus-visible{outline:2px solid #006bdc;outline-offset:2px;border-radius:4px}
.mobile-distance-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:800px){
 .md-mobile-room{display:block}
 [data-md-camera="room"]{display:none}
 .mobile-section .mobile-demonstration{margin-top:42px}
 .mobile-distance-stage{height:clamp(465px,114vw,680px)}
 .mobile-distance-controls{margin-top:16px}
 .mobile-distance-caption{max-width:330px;margin-inline:auto;padding-inline:8px}
 .mobile-distance-selector{margin-top:22px}
 .mobile-distance-pause{right:10px;bottom:10px;width:34px;height:34px}
 .mobile-distance-stops button{font-size:clamp(.72rem,2.3vw,.9rem);padding-inline:1px}
}
@media(prefers-reduced-motion:reduce){
 .mobile-distance-art [data-md-environment],.mobile-distance-art [data-md-people],.mobile-distance-art [data-md-earth],.mobile-distance-value span{will-change:auto}
 .mobile-distance-thumb,.mobile-distance-stops button{transition:none}
}
