/* Map placement matches the 1080 x 2400 record screenshot: y=333..1188. */
.record-screen{display:block;position:relative;container-type:inline-size}
.record-route{display:block;position:absolute;inset:13.875% 0 auto;height:35.625%;overflow:hidden;background:#d4d5d4;pointer-events:none;line-height:1.2;letter-spacing:-.025em;color:#252525}
.phone .record-route>img{width:100%;height:100%;object-fit:cover;object-position:center 52%;border-radius:0}
.route-controls{position:absolute;top:5.6%;left:5%;right:3%;display:flex;align-items:center;justify-content:space-between;font-size:3.7cqw;font-weight:600}
.route-play{padding:1.5cqw 2.7cqw;border-radius:2cqw;background:#ffffffdc}
.route-fullscreen{padding:2cqw 3cqw;border-radius:3.5cqw;background:#fff;color:#1769ff;box-shadow:0 .5cqw 1.5cqw #0002}
.route-legend{position:absolute;bottom:3%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:2.3cqw;white-space:nowrap;background:#202124e8;border-radius:2.3cqw;padding:1.8cqw 2.2cqw;color:#eee;font-size:2.7cqw;box-shadow:0 .5cqw 1.5cqw #0003}
.route-legend>span{display:flex;align-items:center;gap:1cqw}
.route-legend i{display:block;width:4.3cqw;height:1.1cqw;border-radius:1cqw;background:#1c66e8}
.route-legend>span:nth-child(2) i{background:#269f88}
.route-legend>span:nth-child(3) i{background:#f4ae12}
.route-legend>span:nth-child(4) i{background:#ea4855}
.route-attribution{position:absolute;bottom:2%;right:2%;font-size:2.8cqw;font-style:italic;color:#111;text-shadow:0 0 3px #fff}
.gallery-dialog .record-route{display:none}
.gallery-dialog:has(#tab-record[aria-selected="true"]) .record-route{display:block}