*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#ecf4ef;color:#263c37;font-family:Arial,'PingFang SC','Microsoft YaHei',sans-serif}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible{outline:3px solid #e79756;outline-offset:4px}[hidden]{display:none!important}.scene{position:absolute;inset:74px 0 0;overflow:hidden}.scene>img{width:100%;height:100%;object-fit:cover;transform-origin:51% 42%;transition:transform 2.2s cubic-bezier(.2,.6,.3,1)}.shade{position:absolute;inset:0;background:linear-gradient(90deg,#15262044,transparent 58%),linear-gradient(0deg,#17291b66,transparent 45%)}header{height:74px;position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:0 30px;background:#fffef9}.brand{display:flex;align-items:center;gap:12px}.brand b{font-size:19px;letter-spacing:-.6px}.logo{background:#ddf28a;color:#2a493e;border-radius:12px;font-size:28px;width:38px;height:38px;display:grid;place-items:center}.subject{font-size:11px;color:#7d8f85;margin-left:18px}header>div:last-child{display:flex;gap:18px;font-size:11px;color:#5b7064}.heading{position:absolute;top:115px;left:42px;color:white;text-shadow:0 2px 12px #24412360;max-width:540px}.heading>span{font-size:10px;letter-spacing:2px;background:#ffffffd9;color:#426653;padding:7px 12px;border-radius:20px;text-shadow:none}.heading h1{font-size:47px;letter-spacing:-2px;margin:22px 0 12px;font-weight:650}.heading p{font-size:13px;line-height:1.8;margin:0;max-width:465px}.place{position:absolute;background:#fff8e6df;border:1px solid white;padding:5px 9px;border-radius:5px;font-size:10px;letter-spacing:1px;color:#526647;box-shadow:0 2px 10px #263f3525;pointer-events:none}.museum{top:24%;left:50%;transform:translateX(-50%)}.bookshop{top:53%;left:17%}.library{top:44%;left:77%}.map-card{position:absolute;right:30px;top:103px;width:336px;padding:18px 17px 12px;background:#fffef8f5;border-radius:20px;box-shadow:0 12px 45px #203c3825;border:1px solid #fff;backdrop-filter:blur(12px)}.map-heading{display:flex;justify-content:space-between;align-items:center;font-size:13px}.map-heading span{font-size:10px;color:#7a8c7d}.map-card svg{display:block;width:100%;height:318px;margin:12px 0 0}.map-tip{font-size:10px;color:#708775;line-height:1.7;text-align:center;border-top:1px solid #e1e8da;padding-top:9px}.conversation{position:absolute;left:42px;bottom:188px;width:500px;padding:23px 25px 20px;background:#fffcf4f5;border:1px solid #fff;border-radius:20px;box-shadow:0 10px 50px #17392b20;backdrop-filter:blur(16px)}.speaker{display:flex;align-items:center;gap:12px}.avatar{width:39px;height:39px;display:grid;place-items:center;border-radius:50%;background:#f4d3b5;color:#795539;font-size:17px}.speaker b{font-size:13px;display:block}.speaker small{font-size:10px;color:#859184;display:block;margin-top:4px}.speaker button{margin-left:auto;font-size:11px;background:#e6eedf;padding:9px 15px;border-radius:18px;color:#426650}.utterance{font-size:24px;line-height:1.5;letter-spacing:-.4px;color:#2b493d;margin:18px 0 10px}.translation{font-size:12px;color:#7d8b79;margin:0 0 10px;line-height:1.7}.response{display:flex;flex-direction:column;gap:8px}.response button{padding:13px 14px;border:1px solid #cedcc5;background:#f2f7e9;border-radius:10px;text-align:left;font-size:14px;line-height:1.5}.response button:hover{background:#e5efcf}.feedback{font-size:11px;color:#677c5e;line-height:1.7;margin-top:12px;min-height:18px}.route-actions{position:absolute;left:42px;bottom:42px;background:#ffffffed;border:1px solid #fff;border-radius:17px;padding:16px 20px;box-shadow:0 5px 30px #233f2822}.route-actions p{font-size:11px;color:#72836c;margin:0 0 12px}.route-actions>div{display:flex;gap:9px;align-items:center}.route-actions button{padding:11px 14px;border:1px solid #d6e1c6;background:#f3f8e9;border-radius:9px;font-size:12px}.route-actions button:hover{background:#e4efcc}.route-actions button span{font-size:19px;display:block;margin-bottom:4px}.route-actions #undo{font-size:10px;background:transparent;border:0}.next-wrap{position:absolute;bottom:52px;right:32px}#next{padding:15px 23px;background:#e2f597;color:#35502f;border-radius:26px;font-size:13px;box-shadow:0 4px 20px #3049223b}.note{position:absolute;right:32px;bottom:17px;font-size:10px;color:#fff9e9}.map-person{transition:transform .65s ease-in-out}.map-arrow{transition:transform .5s ease-in-out}.trail{stroke-dasharray:6 5}dialog{max-width:555px;padding:28px;border-radius:16px;border:1px solid #d6dfcd;background:#fffdf5;color:#4f654f}dialog::backdrop{background:#12382b70;backdrop-filter:blur(4px)}dialog h2{font-size:20px;line-height:1.6}dialog p{font-size:13px;line-height:1.9}#close{float:right}@media(max-height:820px){.heading{top:106px}.heading h1{font-size:39px;margin:18px 0 9px}.conversation{bottom:165px;padding:18px 22px;width:470px}.utterance{font-size:21px;margin:13px 0 9px}.map-card{top:100px;width:310px;padding:15px}.map-card svg{height:275px}.route-actions{bottom:36px;padding:13px 17px}.route-actions button{padding:8px 12px}.route-actions p{margin-bottom:8px}.next-wrap{bottom:47px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
#listeningPrompt{font-size:19px;color:#47654c;margin:24px 0 17px;line-height:1.6}#transcript{font-size:11px;color:#6d8260;text-decoration:underline;text-underline-offset:4px;padding:0}
.scene.reverse .library{left:17%;top:43%}.scene.reverse .bookshop{left:77%;top:50%}.scene.reverse .museum{top:34%}

#routeReview{position:absolute;right:30px;top:510px;width:336px;padding:18px;background:#fffef8f5;border:1px solid white;border-radius:17px;box-shadow:0 6px 30px #203c3820}.review-title{display:flex;align-items:center;justify-content:space-between}.review-title>span{font-size:10px;letter-spacing:1.5px;color:#6f8468}.review-title button{font-size:11px;color:#526c39;text-decoration:underline;text-underline-offset:3px}#routePrompt{font-size:12px;line-height:1.8;color:#687a61;margin-bottom:0}#routeEnglish{max-height:125px;overflow:auto;margin-top:12px}#routeEnglish p{font-size:13px;line-height:1.6;margin:5px 0;padding:3px 5px;border-radius:5px;transition:background .2s}#routeEnglish p>span{display:inline-block;width:21px;color:#8a977e;font-size:10px}#routeEnglish .reading{background:#e1edb5;color:#2a4b34}#routeEnglish .route-end{color:#6e8561;font-size:11px}#replayRoute{font-size:11px;margin-top:9px;padding:7px 10px;background:#e8eedc;border-radius:7px;color:#486a40}@media(max-height:820px){#routeReview{top:476px;width:310px;padding:14px}#routeEnglish{max-height:99px;margin-top:7px}}

#routeBack{font-size:10px;color:#7d8e76;padding:7px 0;margin-left:10px}

/* Keep spoken instructions and map labels legible on a classroom display. */
.map-heading b{font-size:15px}.map-heading span{font-size:11px}.map-tip{font-size:12px;color:#556f51}.heading p{font-size:15px;line-height:1.65}.feedback{font-size:14px;line-height:1.65;color:#506b46}.translation{font-size:14px;color:#657654}.route-actions p{font-size:13px;color:#526c49}.route-actions button{font-size:15px}.route-actions #undo{font-size:12px}.speaker b{font-size:15px}.speaker small{font-size:11px}.speaker button{font-size:13px}#transcript{font-size:13px}#routePrompt{font-size:14px}#routeEnglish p{font-size:15px}.review-title button{font-size:12px}#replayRoute{font-size:12px}#routeBack{font-size:11px;margin-left:6px}#routeEnglish .route-end{font-size:12px}.conversation{width:515px}.utterance{font-size:25px}.response button{font-size:16px}#routeReview{top:515px}@media(max-height:820px){.conversation{width:485px;bottom:175px;padding:17px 21px}.utterance{font-size:23px;line-height:1.45}.feedback{font-size:13px}.route-actions{bottom:32px}.route-actions button{padding:8px 13px}.route-actions p{font-size:12px}#routeReview{top:481px}#routeEnglish{max-height:94px}#routeEnglish p{font-size:14px}#routeBack{display:inline;padding-left:0}}
.next-wrap{left:42px;right:auto;bottom:52px}
@media(max-height:820px){.next-wrap{bottom:42px}}

#walkingScene{position:absolute;inset:0}#walkingScene canvas{display:block;width:100%;height:100%}.walking .scene>img,.walking .scene>.place{display:none}.walking .shade{background:linear-gradient(90deg,#244a414d,transparent 55%),linear-gradient(0deg,#25473722,transparent 35%);pointer-events:none}.walking .heading{max-width:475px}.walking .heading h1,.walking .heading p{text-shadow:0 2px 8px #153e3570}

#placeHint{position:absolute;left:calc(50% + 40px);top:49%;transform:translate(-50%,-50%);padding:10px 17px;border:1px solid #ffffffe6;border-radius:25px;background:#fffdf1eb;box-shadow:0 4px 16px #193f2b24;font-size:15px;color:#355f47;pointer-events:none;white-space:nowrap}

.exercise-picker{display:flex;align-items:center;gap:7px;font-size:12px;color:#526c49}.exercise-picker select{font:inherit;color:#355b42;background:#edf4df;border:1px solid #d5e2c7;border-radius:8px;padding:8px 22px 8px 10px;cursor:pointer}.exercise-picker select:focus-visible{outline:3px solid #e79756;outline-offset:3px}

#walkingScene canvas{cursor:grab}#walkingScene canvas.looking{cursor:grabbing}#walkingScene canvas:focus-visible{outline:3px solid #ddedb6;outline-offset:-5px}#lookHint{position:absolute;left:55%;bottom:52px;transform:translateX(-50%);padding:9px 14px;border-radius:18px;background:#fffef5e3;color:#4d6755;font-size:13px;white-space:nowrap;pointer-events:none;border:1px solid #fff8}

#lookHint{display:none}.walking #lookHint{display:block}

.avatar{width:54px;height:54px;flex-shrink:0;border:2px solid #fffaf0}.portraits-ready .avatar{font-size:0;background-image:url(assets/characters.webp);background-size:200% 100%;background-position:left center}.portraits-ready .avatar[data-person="visitor"]{background-position:right center}.conversation.speaking .avatar{box-shadow:0 0 0 4px #9dc18f85}

/* The map can recede while destination and orientation remain available. */
.map-heading{gap:8px;flex-wrap:wrap}.map-heading #destination{margin-left:auto}
#mapToggle{font-size:12px;line-height:1.4;padding:5px 8px;border:1px solid #d6e1c6;border-radius:7px;color:#43633d;background:#f0f5e7;white-space:nowrap}
#mapToggle:hover{background:#e2edce}
.map-folded .map-card{padding-bottom:12px}.map-folded .map-tip{margin-top:12px}
.map-folded #routeReview{top:220px}
/* Reserve the map header's button height before the route recap. */
#routeReview{top:540px}
@media(max-height:820px){#routeReview{top:494px}}
.map-folded #routeReview{top:220px}

/* Give the route and its spoken instruction the scene during replay. */
.route-replaying .conversation,.route-replaying .next-wrap{visibility:hidden}

#transcript{margin-top:6px}

/* One listening preference applies to dialogue and route replay. */
#voiceRate{white-space:nowrap}#voiceRate[aria-pressed="true"]{color:#375529;background:#e8efcf;border-radius:6px;box-shadow:0 0 0 5px #e8efcf}