/* Desktop landscape presentation. Review controls stay outside the public interface. */
html,body{height:100%;overflow:hidden;background:#FAF8EF;color:#3C2C15}
body main,body[data-courtyard="true"] main{display:block;height:100dvh;width:100%}
body .viewport{height:100%;width:100%;min-height:0}
body aside{display:none!important}
body>header{position:absolute;inset:0 0 auto;z-index:12;height:88px;padding:24px 30px;display:flex;align-items:center;gap:24px;pointer-events:none;border:0;background:linear-gradient(#FAF8EFed,#FAF8EF00)}
body>header .brand{display:flex;align-items:center;flex:0 0 auto;width:clamp(128px,12vw,164px);line-height:1}
body>header .brand img{display:block;width:100%;height:auto}
#map-location{margin:0;padding-left:24px;border-left:1px solid #777E4244;color:#3C2C15;font:14px/1.3 system-ui,sans-serif;font-weight:500}
/* The top right row: Skip (while a chapter plays), Map, sound. One row, one look (May 2026-10-02: Skip under Map covered the cards,
   and the bare arrow on Map looked unfinished). scene-skip.js puts each chapter's Skip at the front of .top-actions. */
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px;pointer-events:none}
#map-return,.pitch-scene-skip.pill,#start-over,#hear-may{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 15px;border-radius:22px;background:rgba(250,248,239,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(119,126,66,.28);color:#3f4720;font:500 13px/1 'Jost',system-ui,sans-serif;letter-spacing:.02em;box-shadow:0 4px 18px rgba(60,44,21,.07);cursor:pointer}
.pitch-scene-skip.pill{padding:0 13px 0 18px;gap:6px}
.pitch-scene-skip.pill.floating{position:fixed;top:22px;right:28px;z-index:100}   /* the voice rehearsal's Skip, over the cinematic opening too (scene-skip.js) */
#map-return[hidden],.pitch-scene-skip.pill[hidden],.pitch-scene-skip.pill.away,#start-over[hidden],#hear-may[hidden]{display:none}
#map-return svg,.pitch-scene-skip.pill svg,#start-over svg{flex:none;display:block}
#map-return:hover,.pitch-scene-skip.pill:hover,#start-over:hover,#hear-may:hover{background:#F3F4BB}
#hear-may{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);z-index:30}   /* the welcome, only when the browser held May's voice back (May 2026-10-03: no panel) */
#hear-may span{color:#777E42}
#start-over{position:absolute;left:236px;bottom:20px;z-index:9}   /* on the map only, beside "Choose a chapter to begin." (May 2026-10-03: back to the very start, the film) */
.pitch-scene-skip.pill:disabled{opacity:.6;cursor:default}
.pitch-scene-skip.pill:focus-visible{outline:2px solid #777E42;outline-offset:4px}
/* sound on or off for the whole garden (2026-09-27), a round button beside Map */
#sound-toggle{pointer-events:auto;width:44px;height:44px;padding:0;display:grid;place-items:center;border-radius:50%;background:rgba(250,248,239,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(119,126,66,.28);color:#3f4720;box-shadow:0 4px 18px rgba(60,44,21,.07);cursor:pointer}
#sound-toggle:hover{background:#F3F4BB}
#sound-toggle:focus-visible{outline:2px solid #777E42;outline-offset:4px}
#sound-toggle .off,#sound-toggle[aria-pressed="true"] .on{display:none}
#sound-toggle[aria-pressed="true"] .off{display:inline}
#map-return:focus-visible,.presentation-point:focus-visible,#welcome-products:focus-visible{outline:2px solid #777E42;outline-offset:4px}
#map-intro{position:absolute;left:32px;bottom:23px;margin:0;padding:9px 14px;border-radius:20px;background:#FAF8EFdf;color:#3C2C15;font:13px/1.5 system-ui,sans-serif;pointer-events:none}
#labels .presentation-point{min-height:40px;padding:5px 13px 5px 5px;display:flex;align-items:center;gap:8px;white-space:nowrap;border:1px solid #777E4255;border-radius:24px;background:#FAF8EFf5;color:#3C2C15;font:500 12px/1.2 system-ui,sans-serif;box-shadow:0 4px 18px #3C2C151b;backdrop-filter:blur(8px)}
.presentation-point i{display:block;width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:radial-gradient(circle at 30% 22%,#f3f8d9 0%,#cbdcaa 26%,#8aa77b 70%,#627953 100%);border:1px solid #f4f7e3;box-shadow:inset -2px -3px 5px #44664540,inset 1px 1px 3px #fff9}
#labels .presentation-point:hover{background:#F3F4BB;box-shadow:0 5px 22px #3C2C1528}
#labels .presentation-point::after{content:'';position:absolute;left:50%;top:100%;height:11px;width:1px;background:#777E42b3}
body .map-foot,body .view-tools,body .courtyard-caption,body #courtyard-continue{display:none!important}
#courtyard-camera-tools{position:absolute!important;top:auto!important;bottom:24px!important;right:28px!important;left:auto!important;z-index:10}
#courtyard-camera-tools span{padding:8px 12px;border-radius:20px;background:#FAF8EFdc;color:#3C2C15;font-size:11px}
#courtyard-camera-tools button{background:#FAF8EFee;color:#777E42;border:1px solid #777E4244}
#courtyard-ui .courtyard-bottom{bottom:24px}
#loading{top:92px;left:30px}
/* Welcome's Continue, the cards' Continue a size up (product-story.css), at the foot of the frame in the middle, below May. Tried and
   dropped on 2026-10-02: the bottom right corner (太靠右下了，很不显眼), the right at eye height (on the bamboo), the white gate pier (太丑了) */
#welcome-products{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:9;min-height:54px;padding:0 9px 0 30px;gap:14px;border-radius:30px;font-size:15px}
#welcome-products i{width:36px;height:36px}
#welcome-products[hidden]{display:none}
/* A closed card leaves this pill where the card was; it brings the card back (May 2026-10-02: every card closes, any time) */
body[data-card-closed="true"] .stop-summary{display:none!important}
#card-reopen{position:absolute;right:44px;top:98px;z-index:9;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px 0 15px;border-radius:22px;background:rgba(250,248,239,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(119,126,66,.28);color:#3f4720;font:500 13px/1 'Jost',system-ui,sans-serif;letter-spacing:.02em;box-shadow:0 8px 24px rgba(60,44,21,.12);cursor:pointer;pointer-events:auto}
#card-reopen[hidden]{display:none}
#card-reopen:hover{background:#F3F4BB}
#card-reopen:focus-visible{outline:2px solid #777E42;outline-offset:4px}
#card-reopen svg{flex:none;display:block}
.story-top{top:94px;left:28px}
body:has(#product-story-panel:not([hidden])) #courtyard-camera-tools{bottom:84px!important}
body[data-voice-trial="true"] #welcome-products{display:none}

body>header{justify-content:flex-start}
#map-leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#map-leaders line{stroke:#777E428c;stroke-width:1}
#labels .presentation-point::after{display:none}

#labels .presentation-point.future-stop{opacity:.42;filter:grayscale(1);cursor:default;box-shadow:none}
/* the chapter to watch next while going in order (2026-10-04): filled in the brand olive, breathing out a soft ring */
#labels .presentation-point.next-stop{background:#777E42;border-color:#777E42;color:#FAF8EF;animation:next-stop-breathe 2.4s ease-out infinite}
#labels .presentation-point.next-stop:hover{background:#676f37}
@keyframes next-stop-breathe{0%{box-shadow:0 4px 18px #3C2C151b,0 0 0 0 #777E4270}70%,100%{box-shadow:0 4px 18px #3C2C151b,0 0 0 11px #777E4200}}
@media (prefers-reduced-motion:reduce){#labels .presentation-point.next-stop{animation:none}}
#presentation-next{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:9;min-height:44px;padding:0 24px;border:1px solid #777E4244;border-radius:26px;background:#FAF8EFee;color:#3C2C15;font:13px system-ui,sans-serif}
#presentation-next[hidden]{display:none}
#vision-watch{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);z-index:10;min-height:50px;padding:0 26px;display:flex;align-items:center;gap:22px;border:1px solid #777E4266;border-radius:28px;background:#777E42;color:#FAF8EF;font:500 17px/1.3 Jost,sans-serif;box-shadow:0 6px 24px #3C2C151b;cursor:pointer}
#vision-watch[hidden],#vision-replay-status[hidden]{display:none}
#vision-watch:hover{background:#676f37}
#vision-watch:focus-visible{outline:2px solid #777E42;outline-offset:4px}
#vision-watch:disabled{cursor:wait}
#vision-watch span{font-size:23px}
#vision-replay-status{position:absolute;left:50%;bottom:98px;transform:translateX(-50%);z-index:10;margin:0;padding:8px 14px;border-radius:18px;background:#FAF8EFee;color:#3C2C15;font:400 15px/1.4 Jost,sans-serif}
body[data-vision-replay="true"] #presentation-next{display:none}

/* Region destinations stay available inside every scene. Accessories are a local detail. */
#labels{z-index:8}
#labels .map-label[hidden]{display:none!important}
#labels .region-detail{min-height:36px;font-size:11px;background:#FAF8EFdf}
#labels .region-detail i{width:18px;height:18px;flex-basis:18px}
#labels .accessory-dot{width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border:0;background:transparent;box-shadow:none;backdrop-filter:none}
#labels .accessory-dot i{width:16px;height:16px;flex:0 0 16px;box-shadow:0 0 0 4px #FAF8EF80,0 2px 8px #3C2C1520}
#labels .accessory-dot i::after{width:5px;height:3px;top:2px;left:3px}
#labels .accessory-dot span{position:absolute;bottom:43px;left:50%;transform:translateX(-50%);padding:7px 11px;border-radius:16px;background:#FAF8EFf0;color:#3C2C15;font-size:11px;opacity:0;pointer-events:none}
#labels .accessory-dot:hover,#labels .accessory-dot:focus-visible,#labels .accessory-dot.active{background:transparent;box-shadow:none}
#labels .accessory-dot:hover span,#labels .accessory-dot:focus-visible span{opacity:1}

/* The source diagram opens at reading size while preserving the garden view. */
.office-system-dialog{box-sizing:border-box;width:min(1180px,94vw);max-height:94dvh;padding:0;border:1px solid #777E4233;border-radius:18px;background:#FAF8EF;color:#3C2C15;box-shadow:0 24px 80px #3C2C1530;overflow:auto}
.office-system-dialog::backdrop{background:#24302666;backdrop-filter:blur(5px)}
.office-system-content{padding:22px 26px 14px}
.office-system-heading{display:flex;align-items:center;gap:20px;margin-bottom:8px}
.office-system-heading h2{font:400 clamp(18px,2vw,27px) Georgia,serif;margin:0;flex:1}
.office-system-heading button{width:44px;height:44px;padding:0;border:1px solid #777E4244;border-radius:50%;background:transparent;color:#3C2C15;font:27px system-ui;cursor:pointer;flex:none}
.office-system-dialog img{display:block;width:100%;height:auto;max-height:calc(94dvh - 128px);object-fit:contain}
.office-system-dialog p{margin:12px 0 0;color:#777E42;font:11px system-ui;text-align:right}
.office-system-dialog button:focus-visible{outline:2px solid #777E42;outline-offset:3px}
@media(max-width:600px){.office-system-content{padding:14px}.office-system-dialog{width:96vw}.office-system-dialog img{min-width:760px;max-height:none}}

/* A direct Vision link reveals its final composition once it is ready. */
html[data-vision-arrival="true"] #scene-fade{display:block!important;opacity:1}
html[data-vision-arrival="true"] #loading{display:none!important}