:root{font-family:ui-rounded,'Avenir Next',system-ui,sans-serif;color:#384c4c;color-scheme:light;background:#c8bcca;font-size:16px}*{box-sizing:border-box}body{margin:0;background:linear-gradient(#aaa9cd 0%,#e5c3bc 42%,#f2d4b9 67%,#a6c2bb 100%);height:100dvh;overflow:hidden}body[data-dusk=true]{background:linear-gradient(#707f9e,#b799b3 50%,#e0b6a7)}body[data-underwater=true]{background:linear-gradient(#759da7,#548087)}#world{display:block;width:100%;height:100%;outline:none;touch-action:none;transition:opacity .25s}.fade #world{opacity:0}.topbar{position:absolute;inset:22px 25px auto;display:flex;justify-content:space-between;gap:12px;pointer-events:none}.topbar>*{pointer-events:auto}.topbar div{display:flex;gap:8px}button,a{font:inherit}button{cursor:pointer;border:1px solid #9baca366;background:#f6eedbee;color:#3d5653;border-radius:12px;padding:11px 16px;min-height:44px}button:hover{background:#fff6e2}button:focus-visible,a:focus-visible{outline:3px solid #425f66;outline-offset:4px}a{color:#3e6668}#skip{background:#f6eedbdc;border-radius:12px;text-decoration:none;padding:12px 16px;font-size:14px}.map{position:absolute;right:25px;bottom:76px;width:128px;display:grid;justify-items:center;background:#f6edddcc;padding:10px 4px;border-radius:70px 70px 15px 15px;box-shadow:0 3px 12px #566d6210}.map span{font-size:12px;letter-spacing:3px}.map button{font-size:12px;padding:6px 10px;min-height:35px;background:transparent;border:0}.map canvas{width:100px;height:150px}.prompt{position:absolute;bottom:88px;left:50%;transform:translateX(-50%);display:flex;gap:16px;align-items:center;padding:14px 21px;box-shadow:0 4px 0 #536e6033;font-size:16px;white-space:nowrap}kbd{font:inherit;background:#e6dfc8;border:1px solid #b0b39d;border-radius:5px;padding:5px 10px}.tap-label{font-size:13px;color:#687969}footer{position:absolute;bottom:22px;left:25px;right:25px;display:flex;justify-content:space-between;font-size:13px;pointer-events:none;color:#354f50}#loading{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);background:#f7eddc;padding:18px;border-radius:12px;max-width:90vw}dialog{border:1px solid #bec3af;background:#faf2df;color:#3d514c;padding:35px 30px;border-radius:22px;box-shadow:0 18px 80px #28484438;max-height:calc(100dvh - 50px);overflow-y:auto}dialog::backdrop{background:#31595520;backdrop-filter:blur(2px)}#project{width:430px;margin:25px 25px 25px auto;animation:slide .2s ease-out}#project-list{width:620px}h1{font-family:Georgia,serif;font-size:35px;font-weight:normal;margin:8px 0 24px;line-height:1.12}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:1.6px;margin:5px 30px 8px 0;color:#657769}ul{padding-left:20px;margin:0 0 24px}li{line-height:1.65;margin:0 0 13px;font-size:16px}.close{position:absolute;right:12px;top:12px;min-width:44px;font-size:24px;padding:3px;border:0;background:#e9e3ce;z-index:3}.primary{background:#d4e0bd;width:100%;margin:0 0 16px}.source-link{display:block;margin:16px 0;text-underline-offset:4px}figure{margin:25px 0 0}figure img,video{width:100%;border-radius:9px;display:block}figcaption,.note{font-size:12px;line-height:1.6;color:#64766d;margin-top:8px}.project-row{display:block;width:100%;text-align:left;padding:15px 3px;background:none;border:0;border-bottom:1px solid #c5c9b9;border-radius:0}.project-row span{display:block;font-size:18px}.project-row small{display:block;font-size:13px;color:#6c7d70;margin-top:4px}#demonstration{position:fixed;inset:10px;max-width:none;width:calc(100vw - 20px);height:calc(100dvh - 20px);max-height:none;margin:0;padding:0;background:#acc4bf;overflow:hidden}#demonstration .close{background:#fff3d9}#demo-frame,#demo-frame iframe{width:100%;height:100%;border:0}#joystick{display:none;position:absolute;bottom:82px;left:24px;width:100px;height:100px;border:2px solid #f0e8ceaa;background:#ede5cb44;border-radius:50%;touch-action:none}#joystick div{position:absolute;width:40px;height:40px;left:28px;top:28px;background:#f4ebd6bb;border-radius:50%;transform:translate(var(--jx,0px),var(--jy,0px))}.model-flow{display:grid;gap:9px;border-left:2px solid #b4c4a5;padding-left:14px;margin:20px 0}.model-flow span{font-size:14px;animation:signal 3s infinite}.model-flow span:nth-child(2){animation-delay:1s}.model-flow span:nth-child(3){animation-delay:2s}.model-flow small{font-size:12px;color:#6f7b70}.noscript{position:absolute;inset:15%;background:#faf2df;padding:30px;border-radius:20px}[hidden]{display:none!important}@keyframes slide{from{transform:translateX(30px);opacity:0}}@keyframes signal{0%,65%,100%{opacity:.5}30%{opacity:1}}@media(pointer:coarse){#joystick{display:block}.prompt kbd{display:none}}@media(max-width:700px){.topbar{inset:12px 12px auto;gap:8px}.topbar div{gap:5px}.topbar button,#skip{font-size:12px;padding:9px}#motion{max-width:100px}.map{right:12px;bottom:72px;width:75px;padding:8px 0}.map canvas{width:60px;height:90px}.map button{font-size:11px;padding:4px}.prompt{bottom:32px;max-width:90vw;padding:12px;gap:12px}footer{bottom:8px;left:14px;right:14px;font-size:10px}footer #status{max-width:75%}#project{margin:auto auto 12px;width:calc(100% - 24px);max-height:75dvh;padding:28px 23px}#project-list{width:calc(100% - 24px);padding:28px 23px}h1{font-size:30px}.map span{font-size:10px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

#world{image-rendering:pixelated;image-rendering:crisp-edges}

.voyage-button{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);z-index:8;padding:16px 22px;background:#fff0c7;border:1px solid #be9e73;border-radius:18px;color:#3f6264;box-shadow:0 5px 20px #344c4820;max-width:90vw;font-size:16px}.voyage-button[hidden]{display:none}

#project{width:min(720px,calc(100vw - 36px));padding:40px;max-height:calc(100dvh - 36px);margin:18px 18px 18px auto}#project li{font-size:18px}#project .note,#project figcaption{font-size:15px}#demonstration{inset:0;width:100vw;height:100dvh;border:0;border-radius:0}#demo-close{right:12px;top:8px} @media(max-width:700px){#project{padding:30px 24px;margin:auto;width:calc(100vw - 20px)}#project li{font-size:17px}}
.sub-hud{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);padding:16px 22px;border:1px solid #90c8b6;background:#163b46dd;color:#d5f0d5;border-radius:14px;font-size:16px;max-width:90vw;text-align:center;pointer-events:none}body[data-underwater=true] .map{display:none}

body[data-indoors=true] .map{display:none}#surface{position:fixed;top:80px;left:24px;bottom:auto;transform:none;z-index:8}

/* Keep the explorer and physical station visible during direct interaction. */
body[data-inspect=true] #demonstration{inset:76px 14px 18px auto;width:56vw;height:calc(100dvh - 94px);border:3px solid #789087;border-radius:16px;background:#edf0db;box-shadow:0 8px 30px #294e4733}
body[data-inspect=true] .map,body[data-inspect=true] #surface,body[data-inspect=true] #joystick,body[data-inspect=true] footer{display:none}
body[data-inspect=true] #demo-close{right:8px;top:8px}
@media(max-width:700px){body[data-inspect=true] #demonstration{inset:auto 8px 8px;width:calc(100vw - 16px);height:58dvh}body[data-inspect=true] .topbar{inset:8px}}
#station-exit{position:fixed;top:82px;left:20px;z-index:15;font:16px monospace;border-radius:3px}body[data-station=true] .map,body[data-station=true] #surface,body[data-station=true] #joystick,body[data-station=true] footer,body[data-chat=true] .map,body[data-chat=true] #surface,body[data-chat=true] #joystick{display:none}
#screen-keyboard{position:fixed;left:12px;bottom:12px;max-width:calc(100vw - 24px);max-height:40vh;overflow:auto;display:flex;flex-wrap:wrap;gap:5px;clip-path:inset(100%);pointer-events:none}#screen-keyboard:focus-within{clip-path:none;pointer-events:auto;background:#e5e7d7;padding:8px}#screen-keyboard button{font-size:14px}
#clinbot-conversation{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);width:min(920px,calc(100vw - 28px));max-height:46dvh;overflow:auto;background:#f4edce;border:4px solid #496663;box-shadow:0 0 0 4px #c4d1b4;padding:18px 22px;color:#304e50;font:17px/1.5 monospace;z-index:12}#clinbot-conversation header{display:flex;align-items:center;justify-content:space-between;gap:12px}#clinbot-conversation button{font:inherit;border-radius:0;border:2px solid #70877a;padding:8px 12px;background:#dde3bd}#clinbot-conversation .bot-line{white-space:pre-line;min-height:3em}#clinbot-conversation .visitor{font-size:14px;color:#62745d;margin-bottom:4px}#clinbot-conversation .chat-options{display:flex;flex-wrap:wrap;gap:8px}#clinbot-conversation small{display:block;font-size:12px;margin-top:12px}@media(max-width:700px){#station-exit{top:64px;left:12px;padding:8px;font-size:14px}#clinbot-conversation{font-size:15px;max-height:48dvh;padding:12px}#clinbot-conversation header{font-size:14px}#chat-exit{font-size:12px!important}}
body[data-station=true] #world{image-rendering:auto}
#alexa-story{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);width:min(900px,calc(100vw - 28px));max-height:42dvh;overflow:auto;background:#eff0d9;border:3px solid #678985;padding:18px 24px;z-index:15}#alexa-story header{display:flex;justify-content:space-between;align-items:center;gap:12px}#alexa-story nav{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}#alexa-story nav button{font-size:14px;padding:8px}#alexa-story [aria-pressed=true]{background:#597e79;color:#fff0ce}#alexa-story h2{font:25px Georgia;margin:10px 0}#alexa-story p{font-size:16px;line-height:1.5}#alexa-story .note{font-size:13px}body[data-alexa=true] .map,body[data-alexa=true] #joystick{display:none}
/* Compact machine controls leave the center of the workshop in view. */
#machine-controls{position:fixed;z-index:30;left:50%;bottom:58px;transform:translateX(-50%);width:min(620px,calc(100% - 32px));box-sizing:border-box;padding:14px 18px;background:#f4ead5f5;border:1px solid #798d79;border-radius:12px;color:#344e4c;box-shadow:0 8px 28px #344e4c25}
#machine-controls[hidden],#machine-shortcuts[hidden]{display:none}
#machine-controls h2{font-size:20px;margin:0 0 6px}#machine-controls p{font-size:14px;margin:5px 0}#machine-controls .eyebrow{font-size:12px}#machine-controls>div{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}#machine-controls button{font-size:14px;min-height:40px}
#machine-shortcuts{position:fixed;bottom:58px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:10}#machine-shortcuts button{font-size:14px;white-space:nowrap;background:#f4ead5ed}
@media(max-width:700px){#machine-controls{bottom:48px;padding:10px 12px}#machine-controls .machine-description{display:none}#machine-shortcuts{bottom:auto;top:65px;max-width:calc(100% - 18px);flex-wrap:wrap;justify-content:center}#machine-shortcuts button{font-size:12px;padding:8px}}
/* Studies occupy the entire browser viewport, including bridge and pond microscopy. */
body[data-inspect=true] #demonstration{inset:0;width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0;margin:0}
body[data-inspect=true] .topbar{display:none}
body[data-inspect=true] #demo-close{position:fixed;top:8px;right:8px;background:#f8edcf;z-index:100}
#lab-shortcuts{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:12}#lab-shortcuts button{font-size:14px;white-space:nowrap}
#microscope-controls{position:fixed;bottom:35px;left:50%;transform:translateX(-50%);width:min(690px,calc(100vw - 24px));padding:15px 20px;background:#eef0d9f5;border:1px solid #789d91;border-radius:12px;z-index:20}#microscope-controls h2{margin:0;font-size:22px}#microscope-controls p{font-size:14px}#microscope-controls>div{display:flex;flex-wrap:wrap;gap:6px}#microscope-controls button,#microscope-controls label{font-size:14px}#microscope-controls label{display:flex;gap:14px;align-items:center;margin-top:12px}#microscope-controls input{flex:1}
@media(max-width:700px){#lab-shortcuts{bottom:auto;top:66px;max-width:calc(100vw - 20px);flex-wrap:wrap;justify-content:center}#lab-shortcuts button{font-size:12px;padding:8px}#microscope-controls p{display:none}#microscope-controls{bottom:18px;padding:12px}#microscope-controls button{font-size:12px;padding:8px}}
#lab-shortcuts[hidden],#microscope-controls[hidden]{display:none!important}
@media(max-width:700px){#lab-shortcuts{top:auto!important;bottom:125px!important;width:calc(100vw - 24px);max-width:none}#lab-shortcuts button{padding:8px!important}}