:root{font-family:Arial,Helvetica,sans-serif;color:#202124;background:#f4f6f8;font-synthesis:none;--blue:#125dce;--line:#d4dae2}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation;color:inherit}button:focus-visible,a:focus-visible{outline:4px solid #8a4b00;outline-offset:5px}button:disabled{cursor:wait}h1,h2,p{margin:0}h1{font-size:clamp(30px,4.2vw,49px);line-height:1.13;letter-spacing:-.035em;font-weight:700}h1:focus{outline:none}
#app{max-width:1180px;margin:0 auto;min-height:calc(100svh - 42px);padding:clamp(16px,3vw,34px);background:white;display:flex;flex-direction:column;gap:24px}.header{display:flex;align-items:center;justify-content:space-between;gap:20px}.eyebrow{font-size:20px;font-weight:600;color:#5c636c;margin-bottom:10px}.listen{flex:0 0 auto;width:100px;min-height:96px;border:2px solid var(--blue);border-radius:16px;background:#fff;color:var(--blue);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:20px;font-weight:600}.listen svg{width:43px;height:43px}.listen.playing{background:#edf4ff}.listen.playing:after{content:'Playing';font-size:13px}.listen svg,.action svg{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;flex:1;min-height:0}.destination{background:#fff;padding:0;border:2px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;min-height:0;text-align:center}.destination:hover{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}.destination:active{background:#eef4ff}.photo{background-image:url('assets/places.png');background-size:300% 200%;background-repeat:no-repeat;display:block;aspect-ratio:1;min-height:0;width:100%}.destination .photo{height:clamp(155px,26svh,260px);aspect-ratio:auto;flex:1}.p-painting1{background-position:0 0}.p-painting2{background-position:50% 0}.p-entrance{background-position:100% 0}.p-toilets{background-position:0 100%}.p-fountain{background-position:50% 100%}.p-vending{background-position:100% 100%}.name{display:block;padding:14px 12px;font-size:clamp(22px,2.7vw,32px);font-weight:700;line-height:1.15}
.confirm-photo{align-self:center;width:min(100%,560px);height:clamp(210px,46svh,470px);border-radius:16px;aspect-ratio:auto}.actions{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:auto}.action{min-height:100px;border-radius:16px;border:2px solid var(--blue);background:#fff;color:var(--blue);display:flex;align-items:center;justify-content:center;gap:18px;padding:15px 20px;font-size:clamp(23px,3vw,34px);font-weight:700}.action.primary{color:white;background:var(--blue)}.action svg{width:55px;height:55px;flex:0 0 auto}.action:hover{filter:brightness(.95)}
.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:auto 0}.home-card{display:flex;flex-direction:column;text-align:center;text-decoration:none;color:inherit;border:2px solid var(--line);border-radius:20px;overflow:hidden;background:#fff}.home-card:hover{border-color:var(--blue)}.home-card .photo{height:280px;aspect-ratio:auto}.home-note{font-size:18px;color:#626973}.done-title{display:flex;align-items:center;gap:14px}.done-mark{font-size:42px;color:#237943}.done-note{text-align:center;color:#505863;font-size:20px}.done-name{text-align:center;font-size:clamp(28px,4vw,40px)}footer{min-height:42px;max-width:1180px;margin:auto;padding:12px 24px;display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#66707c}footer a{color:#4a5b74;text-underline-offset:3px}#audio-status:not(:empty){max-width:1132px;margin:0 auto;padding:10px 20px;background:#fff5db;color:#5e4200;font-size:18px}
@media(min-width:760px) and (min-height:650px){#app{height:calc(100svh - 42px);min-height:670px;max-height:1000px}.grid{grid-template-rows:1fr 1fr}.destination .photo{height:0;min-height:130px}.confirm-photo{flex:1;max-height:470px}.home-grid{flex:1;align-items:center}}
@media(max-width:600px){#app{gap:20px;padding:18px}h1{font-size:30px}.eyebrow{font-size:17px}.listen{width:76px;min-height:80px;font-size:16px}.listen svg{width:34px;height:34px}.grid{gap:12px}.name{font-size:21px;padding:12px 6px}.destination{border-radius:12px}.destination .photo{height:180px}.actions{gap:10px}.action{font-size:21px;gap:8px;padding:12px 8px;min-height:90px}.action svg{width:34px;height:34px}.confirm-photo{height:340px}.home-grid{gap:12px}.home-card .photo{height:220px}.home-note{font-size:16px}footer{font-size:11px;padding:10px 18px}}
/* Display square sprite cells at their natural proportions; crop, never stretch. */
.photo{background-image:none;position:relative;overflow:hidden;background-color:#eeefed}
.photo::before{content:'';position:absolute;left:0;top:50%;width:100%;aspect-ratio:1;transform:translateY(-50%);background-image:url('assets/places.png');background-size:300% 200%;background-repeat:no-repeat;background-position:inherit}
.p-toilets::before{top:65%}
.p-painting1::before,.p-painting2::before{width:auto;height:100%;left:50%;top:0;transform:translateX(-50%)}
@media(prefers-reduced-motion:no-preference){button{transition:background-color .12s,border-color .12s}}
.handoff #app{background:#edf1f4;justify-content:center}
.handoff-view{height:100%;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:18px;text-align:center}
.handoff-destination{font-size:20px;color:#596574}
.look-heading{display:flex;align-items:center;justify-content:center;gap:16px}
.look-icon{width:58px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.8}
.robot-cue{display:block;object-fit:contain;max-width:100%;width:340px;height:clamp(220px,47svh,440px);mix-blend-mode:multiply;border-radius:20px}
.handoff-message{font-size:24px;font-weight:500}
.handoff-listen{min-height:48px;width:auto;flex-direction:row;font-size:16px;gap:8px;padding:8px 16px;border:0;background:transparent;color:#4c5a69}
.handoff-listen svg{width:24px;height:24px}.handoff-listen.playing{background:transparent}.handoff-listen.playing:after{display:none}
.handoff-rest,.handoff-rest #app,.handoff-rest footer{background:#17212b;color:#dce2e8}
.handoff-rest .handoff-destination,.handoff-rest .handoff-message,.handoff-rest .handoff-listen,.handoff-rest footer,.handoff-rest footer a{color:#b6c2ce}
.handoff-rest .robot-cue{opacity:.32;mix-blend-mode:normal}
@media(prefers-reduced-motion:no-preference){.handoff #app,.handoff footer,.handoff .robot-cue,.handoff{transition:background-color 1.2s,color 1.2s,opacity 1.2s}}
@media(max-width:600px){.look-heading{gap:10px}.look-icon{width:38px}.handoff-message{font-size:21px}.handoff-view{gap:20px}}

/* Preserve the official G1 image; crop only its empty side margins in layout. */
.robot-cue { width: clamp(180px, 28svh, 260px); object-fit: cover; }

.link-symbol { font-size: 90px; line-height:1.1; color:#305eb4; }
.link-result { text-align:center; }
.link-result p { max-width:36rem; font-size:22px; }