*{box-sizing:border-box}body{margin:0;background:#f5f4ef;color:#253a36;font:15px 'Segoe UI',sans-serif}header{height:70px;display:flex;align-items:center;gap:50px;padding:0 30px;border-bottom:1px solid #d6ddd7;background:#fff}header strong{font-size:25px;letter-spacing:-1px}header small{margin-left:auto;letter-spacing:2px;font-size:10px;color:#6e7d77}main{display:grid;grid-template-columns:330px 1fr;height:calc(100dvh - 70px)}aside{padding:30px 26px;overflow:auto;background:#fff;border-right:1px solid #d6ddd7}.eyebrow{font-size:10px;letter-spacing:2px;color:#6d7c76}h1{font-size:31px;line-height:1.13;letter-spacing:-1px;font-weight:500;margin:18px 0}.intro{color:#6d7c76;line-height:1.6;font-size:13px;margin-bottom:28px}label{font-size:12px}select,button{font:inherit;border:1px solid #cbd5ce;border-radius:5px;background:#fff;color:#253a36;padding:12px;cursor:pointer}select{display:block;width:100%;margin-top:9px}.journey{padding:20px 0;display:grid;gap:5px}.journey small,.instruction small{font-size:9px;letter-spacing:1.6px;color:#73817a}.journey span{color:#8a9890;margin:3px 0}aside button{width:100%;margin-bottom:8px}.primary{background:#187761;color:#fff;border-color:#187761}button:hover{filter:brightness(.96)}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #c69837;outline-offset:3px}.instruction{border-top:1px solid #e0e5df;margin-top:20px;padding-top:20px;min-height:105px}.instruction p{font-size:14px;line-height:1.5}progress{width:100%;height:5px;accent-color:#187761}.check{display:flex;align-items:center;gap:6px;margin-top:12px}footer{margin-top:30px;font-size:11px;color:#78857e;line-height:1.6}footer b{color:#43574e}footer a{display:block;color:#187761;margin-top:7px}#viewport{position:relative;overflow:hidden;min-height:480px}canvas{display:block;width:100%;height:100%}.tools{position:absolute;right:24px;top:24px;z-index:3;display:flex;gap:6px;align-items:center}.tools button{padding:9px 13px;font-size:12px}.tools button[aria-pressed=true]{background:#263e34;color:white}.tools label{background:#fff;padding:9px;border-radius:4px}.maptitle{position:absolute;left:28px;top:26px;display:flex;gap:12px;align-items:center;pointer-events:none}.maptitle b{font-size:36px;font-weight:400}.maptitle span{font-size:13px}.maptitle small{display:block;font-size:10px;color:#7b867c;margin-top:4px}.legend{position:absolute;bottom:55px;left:28px;display:flex;gap:9px;align-items:center;font-size:11px}.dot{background:#eab74b;border:2px solid white;outline:1px solid #ae852d;width:12px;height:12px;border-radius:50%}.line{width:24px;height:3px;background:#187761;margin-left:14px}.hint{position:absolute;bottom:25px;left:28px;font-size:11px;color:#78857e}#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.label{position:absolute;background:#fffef9e8;border:1px solid #d4ddd5;padding:4px 7px;white-space:nowrap;font-size:10px;border-radius:3px;transform:translate(-50%,-100%)}#error{position:absolute;top:100px;left:25px;color:#ac3333}@media(max-width:850px){main{grid-template-columns:250px 1fr}aside{padding:22px 18px}.tools{top:85px;left:18px;right:auto}.maptitle{left:18px}h1{font-size:26px}}@media(max-width:600px){header{gap:18px;padding:0 16px}header span{font-size:11px}header small{display:none}main{display:flex;flex-direction:column-reverse;height:auto}#viewport{height:58dvh;min-height:400px}aside{overflow:visible}.journey{display:none}aside h1 br{display:none}h1{font-size:25px}.intro{margin-bottom:15px}footer{margin-top:18px}}

/* Labels are prioritized and collision-culled in screen space. */
.film-controls{margin-top:14px;font-size:12px}.film-controls p{line-height:1.5;color:#536b70}.film-controls b{display:flex;justify-content:space-between;color:#174e60}.film-controls select{font-size:13px;padding:10px}.simulation-badge{position:absolute;left:20px;bottom:20px;z-index:2;background:#fff;padding:9px 12px;border-radius:4px;font-size:12px;color:#174e60}.first-person .maptitle,.first-person .legend{display:none}.first-person .hint{bottom:62px;background:#fff;padding:8px;width:fit-content;color:#174e60}.tools{flex-wrap:wrap}.simulation-badge{bottom:102px}.first-person .simulation-badge{bottom:20px}
@media(max-width:600px){.film-controls{order:5;margin-top:14px}.tools{left:12px;right:12px;top:12px}.tools button{padding:9px 10px}.first-person .hint{bottom:58px}.simulation-badge{font-size:10px;left:12px}.film-controls select{min-height:44px}.maptitle{display:none}}
.label{font-size:11px;line-height:15px;height:23px;padding:3px 8px;background:#fffef8f0;text-align:center;box-sizing:border-box;border-color:#becdc1;color:#324c3e}
.label[hidden]{display:none}
.hint{right:20px;line-height:1.5;max-width:calc(100% - 48px)}
.beam{width:22px;height:12px;margin-left:14px;background:#f59e1499;clip-path:polygon(0 50%,100% 0,100% 100%)}
.marker{width:10px;height:10px;margin-left:14px;background:#2b5fb8;border-radius:50%}

/* Keep the map key readable on the phone-sized preview. */
.legend>span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}.legend i{display:inline-block;flex-shrink:0;margin-left:0}.legend{gap:18px}
@media(max-width:600px){.legend{right:18px;left:18px;bottom:66px;flex-wrap:wrap;gap:7px;font-size:11px}.hint{bottom:18px;left:18px}.tools button{min-height:44px}.intro{font-size:14px}h1{font-size:26px}}
/* Venue navigation and a map-first phone workflow. */
header{gap:24px}.map-tabs{margin-left:auto;display:flex;gap:8px}.map-tabs a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border-radius:5px;color:#253a36;text-decoration:none;font-size:14px;background:#edf1ec}.map-tabs a[aria-current=page]{background:#263e34;color:white}.map-tabs a:focus-visible{outline:3px solid #c69837;outline-offset:3px}
@media(max-width:1000px){header #venue{display:none}.legend{right:18px;flex-wrap:wrap;bottom:64px}}
@media(max-width:600px){
 header{height:auto;min-height:112px;flex-wrap:wrap;padding:12px 16px;gap:10px}header strong{font-size:23px}.map-tabs{width:100%;margin:0;gap:8px}.map-tabs a{font-size:14px;padding:10px 12px;flex:1}.map-tabs a:last-child{flex:2}
 main{display:flex;flex-direction:column;height:auto}aside{display:contents}aside>*{margin-left:18px;margin-right:18px}aside h1{order:0;margin-top:22px;margin-bottom:8px;font-size:25px}aside .intro{order:1;margin-top:0;margin-bottom:16px;font-size:14px;line-height:1.5}aside>label[for=destination]{order:2;font-size:14px}#destination{order:3;width:calc(100% - 36px);font-size:16px;min-height:48px;margin-bottom:12px}.walk-controls{order:4;display:flex;gap:8px}.walk-controls button{width:auto;flex:1;min-height:48px;font-size:14px;margin:0}#viewport{order:5;height:52svh;min-height:380px;max-height:540px;margin-top:18px}.check{order:7;font-size:14px;min-height:44px;margin-top:0}footer{order:8;margin-top:16px;margin-bottom:24px;font-size:12px}.journey{display:none}.tools{top:60px}.maptitle{top:15px}.maptitle small{font-size:11px}.legend{bottom:48px}.hint{font-size:11px;bottom:12px}input[type=checkbox]{width:20px;height:20px}
}
/* Guidance reads on the map, just above its bottom edge. */
.instruction{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:4;width:min(640px,calc(100% - 32px));min-height:0;margin:0;padding:12px 16px;border:1px solid #d6ddd7;border-radius:6px;background:#fffffff5}.instruction p{margin:4px 0 8px;font-size:17px;line-height:1.4;color:#174e60}.instruction progress{display:block}
.hint{bottom:116px}.legend{bottom:146px}.simulation-badge{bottom:186px}.first-person .hint{bottom:164px}.first-person .simulation-badge{bottom:116px}
@media(max-width:600px){.hint{display:none}.instruction{bottom:10px;padding:10px 12px}.instruction p{font-size:15px;min-height:42px}.legend{bottom:124px}.simulation-badge{display:none}.first-person .simulation-badge{display:block;bottom:124px}}