@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--ink:#17343a;--muted:#6a7b7e;--paper:#f8faf8;--line:#dce4df;--accent:#bd753a;--green:#25695e}*{box-sizing:border-box}body{margin:0;overflow:hidden;color:var(--ink);font-family:'DM Sans',sans-serif;background:#dbe3df}button,select{font:inherit;color:inherit;cursor:pointer}button{border:0;background:none}button:hover{background:#e7eee9}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #d59045;outline-offset:3px}#viewport{position:fixed;inset:0}#viewport canvas{display:block;width:100%;height:100%}header{height:78px;background:#fbfcf8f5;border-bottom:1px solid var(--line);position:fixed;top:0;left:0;right:0;display:flex;align-items:center;padding:0 26px;gap:20px;z-index:5}.brand{display:flex;align-items:center;gap:12px}.brandmark{border:1.5px solid #b87942;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font:600 24px 'Space Grotesk';position:relative;color:#a9612b;background:#fffaf1}.brandmark span{position:absolute;top:2px;right:3px;font:8px 'DM Sans'}.brand strong{font:700 20px 'Space Grotesk';letter-spacing:4px}.brand small{display:block;font-size:8px;letter-spacing:1.7px;margin-top:3px}.status{margin-left:auto;display:flex;gap:10px;align-items:center;font-size:10px;letter-spacing:1.4px;color:#658079}.status i{height:6px;width:6px;border-radius:50%;background:#3d8f70}.ghost{padding:12px 16px;border-left:1px solid var(--line);font-size:12px}.square{font-size:24px;width:35px;height:35px}#nav{position:fixed;top:98px;left:20px;width:225px;background:#fbfcf8f3;border:1px solid #fff9;border-radius:9px;padding:20px 12px 14px;box-shadow:0 8px 32px #193c3610;z-index:4}.eyebrow{font-size:9px;letter-spacing:1.8px;font-weight:700;color:#7c8a82}#nav>.eyebrow{margin:0 10px 15px;display:block}.zone{display:flex;width:100%;align-items:center;gap:12px;text-align:left;border-radius:5px;padding:10px 12px;margin-bottom:3px}.zone b{font:500 12px 'Space Grotesk';color:#84918a;width:22px}.zone span{font-size:12px;font-weight:600}.zone small{display:block;font-size:10px;font-weight:400;color:#7b8a82;margin-top:4px}.zone.active{background:#e6eee7;color:#1d614d}.zone.active b{color:#af713a}.navline{height:1px;background:var(--line);margin:12px 8px}.navfoot{border-top:1px solid var(--line);margin:14px 8px 0;padding-top:16px}.tiny{font-size:8px;letter-spacing:1.8px;color:#8b938b}.navfoot p{font-size:12px;line-height:1.6;margin:7px 0 14px}.primary{background:#183d39;color:white;width:100%;padding:12px;border-radius:4px;font-size:12px}.primary:hover{background:#2e5b51}#intro{position:fixed;left:278px;top:117px;pointer-events:none}h1{font:500 34px/1.13 'Space Grotesk';letter-spacing:-1.5px;margin:12px 0}#intro p{font-size:12px;line-height:1.7;color:#627873}#detail{position:fixed;right:20px;top:98px;width:300px;max-height:calc(100dvh - 205px);overflow:auto;background:#fbfcf8f5;border:1px solid white;border-radius:8px;padding:24px;box-shadow:0 12px 35px #173b3314;z-index:4}.hidden{display:none!important}.close{position:absolute;right:12px;top:12px;font-size:23px;border-radius:3px}h2{font:500 24px/1.15 'Space Grotesk';letter-spacing:-.6px;margin:14px 0}#detail p{font-size:12px;line-height:1.65;color:#627873}.fact{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:9px 0;gap:10px;font-size:11px}.fact b{font-weight:600;text-align:right}.sectionlabel{font-size:9px;letter-spacing:1.1px;color:#839286;margin-top:21px;margin-bottom:10px}#detailConnections{font-size:11px;line-height:1.8}#detailSources{font-size:11px;line-height:1.7;color:#467769}.note{background:#f1eee2;padding:10px;border-left:2px solid #b98042}#tools{position:fixed;right:20px;bottom:130px;display:flex;gap:5px;z-index:4;background:#fbfcf8ed;border-radius:7px;padding:5px;border:1px solid white}#tools button{width:52px;height:49px;font-size:21px;border-radius:4px}#tools button span{font-size:8px;display:block;margin-top:2px}#tools .selected{color:#a96a34;background:#f1eadc}#legend{position:fixed;bottom:86px;left:275px;display:flex;gap:18px;padding:11px 16px;border-radius:5px;background:#fbfcf8df;font-size:10px;color:#547168}#legend i{display:inline-block;width:16px;height:3px;margin-right:6px;vertical-align:middle}footer{position:fixed;bottom:0;left:0;right:0;height:66px;background:#fbfcf8f5;border-top:1px solid var(--line);display:flex;align-items:center;padding:0 22px;gap:25px;z-index:5}.playback{display:flex;align-items:center;gap:13px;min-width:280px}.playback button{font-size:18px;border:1px solid var(--line);width:34px;height:34px;border-radius:5px}.playback strong{font-size:11px;font-weight:600}.playback small{font-size:9px;display:block;color:#7e9086;margin-top:4px}.playback select{margin-left:10px;border:1px solid var(--line);background:transparent;border-radius:4px;padding:5px;font-size:10px}.footercenter{margin:auto;display:flex;gap:25px;font-size:10px;letter-spacing:1px}.footercenter #clock{font-family:monospace;color:#6e867a}.help{font-size:10px;color:#778b7f}#fps{margin-left:14px;font-size:9px}#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}.label{position:absolute;transform:translate(-50%,-100%);font-size:9px;font-weight:600;background:#f8faf5e8;padding:6px 9px;border-radius:3px;border-left:2px solid #b6783e;white-space:nowrap;box-shadow:0 2px 6px #254c3420;pointer-events:auto;cursor:pointer}.label:after{content:'';position:absolute;left:50%;top:100%;height:14px;border-left:1px solid #8e9e8c}#loading{position:fixed;inset:0;background:#edf1e9;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20}#loading p{font-size:13px;color:#6b8072}dialog{width:min(900px,92vw);max-height:85dvh;overflow:auto;padding:30px;border:1px solid white;border-radius:12px;color:var(--ink);background:#fbfcf8}dialog::backdrop{background:#142b35a8;backdrop-filter:blur(5px)}dialog p{font-size:12px;line-height:1.8;color:#64766d}.dialoghead{position:relative}.sourcegrid{display:grid;grid-template-columns:1fr 1fr;gap:35px}dialog h3{font:500 16px 'Space Grotesk';margin:22px 0 8px}.sourceitem{padding:10px 0;border-bottom:1px solid var(--line);font-size:11px;line-height:1.5}.sourceitem small{display:block;color:#849286}.download{display:inline-block;color:#296954;font-size:12px;text-decoration:none;padding:14px 18px;background:#e9eee3;border-radius:4px;margin:20px 10px 0 0}#toast{position:fixed;left:50%;bottom:155px;transform:translateX(-50%);background:#183c36;color:white;padding:10px 18px;border-radius:5px;z-index:10;font-size:12px;opacity:0;transition:opacity .2s;pointer-events:none}.touractive{background:#aa6b32!important}
@media(max-width:1000px){#nav{width:190px}#intro{left:235px}h1{font-size:28px}.status{display:none}header .ghost{margin-left:auto}#detail{width:270px}#legend{left:230px;gap:10px}.help{display:none}}@media(max-width:700px){header{height:62px;padding:0 12px;gap:6px}.brandmark{width:34px;height:34px;font-size:20px}.brand strong{font-size:16px}.brand small{font-size:7px}.ghost{font-size:10px;padding:8px}#nav{top:72px;left:8px;width:152px;padding:12px 6px}#nav>.eyebrow{font-size:7px;margin:0 6px 8px}.zone{padding:8px 6px;gap:5px}.zone b{width:18px;font-size:10px}.zone span{font-size:10px}.zone small{font-size:8px}.navfoot{margin-top:8px;padding-top:10px}.navfoot p,.tiny{display:none}.primary{font-size:10px;padding:10px 4px}#intro{left:178px;top:87px}#intro h1{font-size:22px}#intro p{display:none}#intro .eyebrow{font-size:7px}#tools{right:8px;bottom:106px;gap:0}#tools button{width:43px;height:42px;font-size:18px}#detail{right:8px;top:72px;width:min(260px,calc(100vw - 177px));padding:18px 12px;max-height:calc(100dvh - 190px)}#detail h2{font-size:19px}#detail p{font-size:10px}.fact{font-size:9px}#detailSources,#detailConnections{font-size:10px}#legend{left:8px;bottom:68px;font-size:8px;gap:8px;padding:9px}footer{height:58px;padding:0 10px;gap:4px}.playback{min-width:0;gap:8px}.playback strong{font-size:10px}.playback small{font-size:8px}.footercenter{margin-left:auto;font-size:8px;gap:8px}#viewName{display:none}.sourcegrid{grid-template-columns:1fr}dialog{padding:22px}#toast{max-width:90vw;width:max-content;text-align:center}}@media(max-height:650px){#nav{top:85px}.zone{padding-top:6px;padding-bottom:6px}.zone small{display:none}.navfoot p{display:none}#intro{top:100px}#detail{top:85px}.navfoot{margin-top:8px;padding-top:10px}}

/* Unobstructed mobile viewing; the corner control always remains reachable. */
#viewport canvas{touch-action:none}
#uiToggle{position:fixed;right:max(8px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));z-index:12;width:44px;height:44px;border-radius:50%;background:#f8faf8e8;border:1px solid #b8c8bd;box-shadow:0 2px 8px #17343a18;font-size:23px}
header{padding-right:68px}
#closeNav{position:absolute;right:5px;top:5px;width:32px;height:32px;font-size:24px;line-height:1;border-radius:50%}
#nav{max-height:calc(100dvh - 180px);overflow-y:auto;overscroll-behavior:contain}
#nav>.eyebrow{padding-right:18px}
body.clean-view header,body.clean-view #nav,body.clean-view #intro,body.clean-view #detail,body.clean-view #tools,body.clean-view #legend,body.clean-view footer,body.clean-view #labels,body.clean-view #toast{display:none!important}
body.clean-view #uiToggle{opacity:.65;background:#f8faf8b8}
body.clean-view #uiToggle:hover,body.clean-view #uiToggle:focus-visible{opacity:1}
@media(max-width:700px){#intro{display:none}#nav{max-height:calc(100dvh - 145px)}header{padding-right:58px}.brand small{letter-spacing:.7px}.brand strong{letter-spacing:2px}#detail{width:min(300px,calc(100vw - 24px));z-index:6;max-height:calc(100dvh - 150px)}#legend{max-width:calc(100vw - 16px);flex-wrap:wrap}#tools{bottom:104px}.footercenter{display:none}}
@media(orientation:landscape) and (max-height:650px){header{height:52px}#nav{top:60px;max-height:calc(100dvh - 122px);width:190px}#detail{top:60px;max-height:calc(100dvh - 122px)}#intro{display:none}#tools{bottom:68px}#legend{display:none}footer{height:52px}}

#equipmentButtons{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0}#equipmentButtons button{font-size:10px;background:#e4ece5;border:1px solid #b8cbbd;border-radius:4px;padding:8px;text-align:left}#equipmentButtons button:hover{background:#d2e0d4}

#processHud{position:fixed;bottom:76px;left:50%;transform:translateX(-50%);width:min(560px,90vw);z-index:8;padding:14px 18px;background:#f8faf8ee;border:1px solid #c7d4cb;border-radius:8px}#processHud strong{font-size:14px}#processHud p{font-size:12px;line-height:1.45;margin:8px 0}#processHud small{font-size:9px;color:#64766d}#processHud button{padding:7px 12px;background:#e1eae2;margin:5px 4px 0 0;border-radius:4px}#processHud progress{width:75px;height:6px}body.clean-view #processHud{display:none}@media(max-width:700px){#processHud{bottom:65px;padding:10px}#processHud p{font-size:11px}}

body.tour-view #nav,body.tour-view #detail,body.tour-view #intro,body.tour-view header,body.tour-view footer,body.tour-view #labels,body.tour-view #tools,body.tour-view #legend{display:none!important}body.tour-view #processHud{bottom:max(12px,env(safe-area-inset-bottom))}

/* Always-reachable playback, including phone landscape and completed tours. */
#miniControls{position:fixed;z-index:14;right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));max-width:calc(100vw - 20px);padding:7px 9px;background:#f7faf7bf;backdrop-filter:blur(5px);border:1px solid #b4c9c16b;border-radius:8px;color:#193f3c;box-shadow:0 2px 8px #193f3c10}#miniStage{font-size:10px;font-weight:600;max-width:420px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#streamName{font-size:10px;border-left:3px solid #3AA7E0;padding-left:6px;margin:4px 0;max-width:440px}.miniActions{display:flex;align-items:center;gap:3px;flex-wrap:wrap}.miniActions button{font-size:11px;min-height:34px;padding:4px 8px;border-radius:4px;background:#f9fcf94a}.miniActions button:disabled{opacity:.35;cursor:default}.miniActions button:hover{background:#fff}body:not(.tour-view) #miniControls{bottom:76px}body.tour-view #processHud{bottom:112px;display:none}body.tour-view.show-tour-info #processHud{display:block}body.clean-view #miniControls{display:block!important}body.landscape-view header,body.landscape-view #nav,body.landscape-view #intro,body.landscape-view #detail,body.landscape-view #tools,body.landscape-view #legend,body.landscape-view footer,body.landscape-view #labels,body.landscape-view #toast{display:none!important}body.landscape-view #miniControls{bottom:max(6px,env(safe-area-inset-bottom))}body.landscape-view #uiToggle{display:none}body.landscape-view #processHud{display:none!important}body.landscape-view.show-tour-info #processHud{display:block!important;left:10px;transform:none;width:300px;bottom:10px;max-height:65dvh;overflow:auto}body.clean-view.show-tour-info #processHud{display:block}body.clean-view #miniControls{bottom:10px}#stepNext:disabled,#stepPrev:disabled{opacity:.4}@media(max-width:700px){#miniControls{right:6px;max-width:calc(100vw - 12px);padding:6px}.miniActions button{font-size:10px;padding:4px 6px}#miniStage,#streamName{font-size:9px}}@media(orientation:landscape) and (max-height:700px){#miniControls{opacity:.87}.miniActions button{min-height:30px}#miniStage{max-width:420px}#streamName{margin:2px 0}}

@media(orientation:landscape) and (max-height:700px){#miniControls{padding:4px 6px;background:#f7faf7a8;opacity:1}.miniActions button{font-size:10px;min-height:28px;padding:3px 6px}#miniStage,#streamName{font-size:9px;line-height:12px}#streamName{margin:1px 0}}
#liveChemCaption{display:none;position:fixed;left:16px;top:18px;z-index:14;max-width:min(380px,calc(100vw - 90px));padding:10px 14px;background:#f7faf0dc;backdrop-filter:blur(4px);border-left:3px solid #b48856;border-radius:7px;color:#193f3c;pointer-events:none}body.chemical-live #liveChemCaption{display:block}#liveChemCaption strong{font-size:12px}#liveChemCaption p{font-size:12px;line-height:1.45;margin:5px 0}#liveChemCaption small{font-size:9px;color:#64766d}#liveChemCaption progress{display:block;width:100%;height:4px;accent-color:#357a6e;margin:7px 0}#liveChemLabels{position:fixed;inset:0;pointer-events:none;z-index:10}.chemAnchor{position:absolute;max-width:205px;background:#f8fbf4e8;color:#183f3b;padding:5px 8px;border-left:3px solid #b48856;border-radius:4px;font-size:11px;box-shadow:0 2px 8px #17382d12}#miniChemistry{border:1px solid #9aaf9c}body.chemical-live #miniChemistry{background:#e1ead5}#miniChemExit{background:#193f3c;color:white}@media(orientation:landscape) and (max-height:700px){#liveChemCaption{top:8px;left:8px;max-width:280px;padding:7px 10px}#liveChemCaption p{font-size:10px}.chemAnchor{font-size:10px}}@media(max-width:600px){#liveChemCaption{top:10px;left:8px}.chemAnchor{font-size:10px;max-width:175px}}

/* Persistent playback controls in portrait, landscape and desktop. */
#miniControls{max-width:min(720px,calc(100vw - 16px))}.miniSelect{display:flex;align-items:center;gap:5px;font-size:11px;padding:0 5px}.miniSelect select{min-height:40px;border:1px solid #b4c9c1;border-radius:5px;background:#f7faf7;color:#193f3c;font:inherit;padding:5px}.miniActions button{min-height:40px}#viewport canvas{touch-action:none}
@media(max-width:700px){.miniSelect{font-size:11px}.miniSelect select{font-size:12px}.miniActions{gap:4px}#miniControls{left:8px;right:8px;width:auto}.miniActions button{min-height:38px}}

/* Large corner controls, independent of camera and process playback. */
#uiToggle{display:none!important}
#viewportFull,#playbackOpen{position:fixed;z-index:30;background:#f7faf7ee;color:#193f3c;border:1px solid #b4c9c1;border-radius:10px;box-shadow:0 3px 12px #193f3c20}
#viewportFull{right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));width:58px;height:58px;font-size:34px;line-height:1}
#playbackOpen{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));min-height:52px;padding:10px 18px;font-size:16px}
body #miniControls{left:auto;right:max(12px,env(safe-area-inset-right));top:max(82px,calc(env(safe-area-inset-top) + 78px));bottom:auto!important;width:310px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 100px);overflow:auto;padding:12px;background:#f7faf7e8;opacity:1;box-sizing:border-box}
body.playback-collapsed #miniControls{display:none!important}
.playbackHeading{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;margin-bottom:8px}.playbackHeading button{width:44px;height:44px;font-size:28px;background:#e6eee8;border-radius:6px;color:#193f3c}
#miniStage{font-size:14px;white-space:normal;line-height:1.35}#streamName{font-size:12px;line-height:1.35;margin:8px 0}
.miniActions{gap:7px}.miniActions button{font-size:14px;min-height:44px;padding:8px 10px;background:#fff9}.miniSelect{font-size:13px;flex-wrap:wrap;padding:0;gap:6px}.miniSelect select{min-height:44px;font-size:14px}.miniSelect:has(#miniCamera){width:100%}
@media(orientation:landscape) and (max-height:700px){body #miniControls{top:76px;width:340px;max-height:calc(100dvh - 88px)}#miniStage{font-size:13px}#streamName{font-size:12px}.miniActions button{min-height:44px;font-size:13px}}

body.stage-names #labels{display:block!important;z-index:12}body.stage-names .label{font-size:12px;pointer-events:none;background:#f8faf5f2}body:not(.stage-names) #labels{display:none!important}

/* Compact plant-first interface, in every orientation. */
body header,body footer,body #intro,body #tools,body #legend,body #detail{display:none!important}
body #nav,body.clean-view #nav,body.tour-view #nav,body.landscape-view #nav{display:block!important;position:fixed;top:max(8px,env(safe-area-inset-top));left:max(4px,env(safe-area-inset-left));right:auto;bottom:auto;width:122px;max-height:45dvh;overflow:auto;padding:6px 4px;border-radius:6px;background:#f7faf7df;box-shadow:none}
#nav .navfoot,#nav .navline,#nav #closeNav,#nav .zone small{display:none!important}
#nav>.eyebrow{font-size:8px;letter-spacing:.5px;margin:3px 5px 5px}
#nav .zone{padding:6px 4px;gap:4px;margin:0;min-height:32px}
#nav .zone b{font-size:9px;width:16px;flex-shrink:0}
#nav .zone span{font-size:10px;line-height:1.25}
body #miniControls{top:auto!important;bottom:max(8px,env(safe-area-inset-bottom))!important;left:auto;right:max(8px,env(safe-area-inset-right));width:186px;max-width:calc(100vw - 16px);max-height:65dvh;padding:7px;border-radius:7px;background:#f7faf7e8;box-shadow:0 2px 8px #193f3c10}
body #miniControls .playbackHeading{font-size:10px;gap:4px;margin:0 0 4px}
body #miniControls .playbackHeading button{width:30px;height:28px;min-height:28px;font-size:20px;padding:0}
body #miniStage{font-size:11px;line-height:1.25}
body #streamName{font-size:10px;line-height:1.25;margin:4px 0 6px}
body .miniActions{display:grid;grid-template-columns:1fr 1fr;gap:4px;align-items:stretch}
body .miniActions button{font-size:10px;line-height:1.2;min-height:32px;padding:4px;border-radius:4px}
body .miniSelect{font-size:10px;gap:3px;display:flex;flex-direction:column;align-items:stretch;width:auto}
body .miniSelect select{font-size:11px;min-height:30px;padding:3px;width:100%;min-width:0}
body .miniSelect:has(#miniCamera){width:auto;grid-column:1/-1;flex-direction:row;align-items:center}
body .miniSelect:has(#miniCamera) select{flex:1;width:0}
#miniStart{grid-column:1/-1}
body #playbackOpen{min-height:36px;font-size:12px;padding:6px 10px;right:8px;bottom:8px}
body #viewportFull{width:48px;height:48px;font-size:29px;right:8px;top:8px}
@media(orientation:landscape) and (max-height:600px){body #miniControls{max-height:calc(100dvh - 66px);width:186px}body #nav,body.clean-view #nav,body.tour-view #nav,body.landscape-view #nav{max-height:calc(100dvh - 16px)}}

/* Direct entry: no stage navigation panel. */
body #tour.launchProcess{display:block;position:fixed;z-index:25;top:max(14px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));min-width:150px;min-height:56px;padding:14px 24px;border-radius:12px;background:#173f39;color:#fff;border:1px solid #f5faf5;box-shadow:0 4px 18px #173f3933;font-size:20px;font-weight:700}
body #tour.launchProcess:hover{background:#256359}
body.tour-view #tour.launchProcess{display:none}

/* Bottom playback strip: fixed height, horizontal scrolling on narrow screens. */
body #miniControls{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));width:auto;max-width:none;max-height:none;overflow:hidden;padding:6px 8px;display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:2px 6px}
body.clean-view #miniControls{display:grid!important}
body.playback-collapsed #miniControls{display:none!important}
body #miniControls .playbackHeading{grid-column:2;grid-row:1/3;margin:0;align-self:center}
body #miniControls .playbackHeading strong{display:none}
body #miniControls .playbackHeading button{width:36px;height:40px}
body #miniStage{grid-column:1;grid-row:1;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;line-height:16px}
body #streamName{grid-column:1;grid-row:2;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;font-size:10px;line-height:14px}
body .miniActions{grid-column:1/-1;display:flex;flex-wrap:nowrap;gap:5px;align-items:center;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;touch-action:pan-x}
body .miniActions button{flex:0 0 auto;min-height:40px;padding:5px 9px;font-size:12px;white-space:nowrap}
body .miniSelect,body .miniSelect:has(#miniCamera){flex:0 0 auto;width:auto;flex-direction:row;align-items:center;white-space:nowrap;font-size:11px}
body .miniSelect select,body .miniSelect:has(#miniCamera) select{flex:none;width:auto;min-height:40px;font-size:12px;padding:4px}
#cornerPause{display:none;position:fixed;z-index:30;left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));min-height:48px;padding:10px 15px;border:1px solid #b4c9c1;border-radius:10px;background:#f7faf7ee;color:#193f3c;font-size:16px;box-shadow:0 3px 12px #193f3c20}
body.tour-view #cornerPause:not([hidden]){display:block}
body.show-tour-info #processHud{bottom:110px}

/* Shared compact navigation, with comfortable touch targets. */
#cornerOptions{--control-background:#f7faf7ed;position:fixed;z-index:29;top:80px;left:max(12px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:5px}
#cornerOptions button{min-height:40px;padding:8px 12px;border:1px solid #b4c9c1;border-radius:9px;background:var(--control-background);color:#193f3c;font-size:12px;text-align:left;box-shadow:0 2px 9px #193f3c12}

body.tour-view #cornerOptions{top:66px}
#navigationTools{position:fixed;z-index:29;top:66px;right:max(8px,env(safe-area-inset-right));display:flex;flex-direction:column;gap:4px;padding:4px;border:1px solid #baccc5;border-radius:12px;background:#f7faf7ed}
#navigationTools>button,#navigationHelp>summary{display:flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;padding:5px;border:0;border-radius:7px;background:transparent;color:#193f3c;font-size:20px;cursor:pointer;touch-action:manipulation}
#navigationTools button span{font-size:11px;margin-left:5px}
#navigationTools button[aria-pressed=true]{background:#dcebe4;color:#103f33}
#navigationHelp summary{list-style:none;font-size:16px}
#navigationHelp>div{position:absolute;right:52px;top:0;width:min(260px,calc(100vw - 90px));padding:14px;background:#f7faf7;border:1px solid #baccc5;border-radius:10px;font-size:12px;line-height:1.5;box-shadow:0 5px 24px #193f3c20}
#navigationHelp p{margin:8px 0}
#navigationTools button:focus-visible,#cornerOptions button:focus-visible{outline:2px solid #397d70;outline-offset:2px}
#viewport canvas{touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
@media(pointer:coarse){#navigationTools button span{display:none}#navigationTools>button,#navigationHelp>summary{min-width:42px;min-height:42px}}
@media(orientation:landscape) and (max-height:600px){#navigationTools{flex-direction:row;top:66px}#navigationHelp>div{top:52px;right:0}#cornerOptions{top:76px}body.tour-view #cornerOptions{top:66px}}

#legend{max-width:calc(100vw - 24px);flex-wrap:wrap}

#cornerStages{display:grid;grid-template-columns:repeat(2,minmax(40px,1fr));gap:3px 5px}
#cornerStages button{text-align:center;font-size:18px;padding:4px}
#cornerStages button:disabled{opacity:.48}
#cornerStages span{grid-column:1/-1;justify-self:center;padding:2px 6px;background:var(--control-background);border-radius:5px;font-size:12px;line-height:1.2;color:#193f3c}
body :is(#cornerOptions button,#cornerStages span,#cornerPause,#tour.launchProcess,#viewportFull,#playbackOpen,#miniControls,#miniControls button,#miniControls select,#intro,#detail,#tools,#legend,#sources,#processHud,#liveChemCaption,#navigationTools,#navigationHelp>div,#toast){border-left:3px solid #367b6d}