:root{color-scheme:dark;--bg:#080e11;--panel:#10191c;--line:#ffffff14;--muted:#8b9b9f;--text:#e9eeeb;--accent:#d4e8a0;font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:13px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);overflow:hidden}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button{color:inherit}#app,#viewport{position:fixed;inset:0}#viewport{right:322px;background:radial-gradient(ellipse at 50% 45%,#142129,#060b0e 75%)}canvas{display:block;width:100%;height:100%;touch-action:none}.topbar{position:absolute;top:0;left:0;right:0;height:80px;display:flex;align-items:center;gap:45px;padding:0 32px;z-index:5;border-bottom:1px solid var(--line);background:linear-gradient(#080e11e6,#080e1177)}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:var(--text);font-size:30px;font-weight:650;letter-spacing:-1.8px}.brand-mark{display:grid;place-items:center;width:32px;height:32px;border:1px solid #c7e19a66;border-radius:50%;font:29px Georgia,serif;color:var(--accent);padding-bottom:6px}.brand-dot{color:var(--accent)}.top-title{display:flex;gap:22px;align-items:center}.eyebrow{font-size:9px;font-weight:650;letter-spacing:2px;color:var(--muted)}.top-divider{height:17px;width:1px;background:var(--line)}.top-sub{font-size:11px;color:var(--muted)}.icon-button{margin-left:auto;border:1px solid var(--line);background:#182125;border-radius:7px;width:32px;height:32px;font-size:20px}.scene-heading{position:absolute;top:112px;left:34px;pointer-events:none;z-index:2}.scene-heading .eyebrow{display:flex;align-items:center;gap:8px;color:var(--accent)}.live-dot{display:inline-block;flex-shrink:0;width:5px;height:5px;background:var(--accent);border-radius:50%;box-shadow:0 0 8px #d4e8a044}.scene-number{margin-left:12px;color:#6c7e80}h1{font:400 clamp(25px,2.65vw,41px)/1.14 Georgia,"Times New Roman",serif;letter-spacing:-1px;margin:15px 0 12px;text-shadow:0 2px 16px #080e11}h1+p{color:#a3b2b3;font-size:11px;margin:0}#panel{position:absolute;right:0;top:80px;bottom:43px;width:322px;background:#10181bf5;border-left:1px solid var(--line);padding:26px 25px 18px;overflow:auto;scrollbar-width:thin;scrollbar-color:#43514b transparent;z-index:4}.panel-top{display:flex;align-items:center;justify-content:space-between}.panel-top .eyebrow{font-size:8px;letter-spacing:1.6px}.tag{font-size:7px;letter-spacing:1px;border:1px solid #d4e8a038;color:var(--accent);padding:4px 6px;border-radius:3px}h2{font:400 27px Georgia,serif;letter-spacing:-.6px;margin:17px 0 9px}.panel-intro{color:var(--muted);font-size:11px;line-height:1.65;margin:0 0 20px;max-width:240px}.view-tabs{display:flex;background:#080e1180;border:1px solid var(--line);padding:3px;border-radius:7px;gap:3px}.view-tabs button{flex:1;background:none;border:0;padding:8px 2px;color:var(--muted);font-size:10px;border-radius:4px}.view-tabs button.active{background:#d4e8a0;color:#182019;font-weight:650}.control-section{border-bottom:1px solid var(--line);padding:22px 0 18px}.section-title{font-size:8px;letter-spacing:1.6px;font-weight:650;color:#b3c0bf;margin-bottom:17px}.section-title>span{color:#6f8077;margin-right:10px;font:10px Consolas,monospace}.play-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}#play{border:0;background:transparent;display:flex;align-items:center;gap:10px;padding:0;font-size:11px}#play-symbol{width:27px;height:27px;border-radius:50%;background:#d4e8a01c;border:1px solid #d4e8a03b;color:var(--accent);display:grid;place-items:center;font-size:13px}#clock{font:11px Consolas,monospace;color:var(--muted)}.slider-label{display:flex;justify-content:space-between;align-items:center;font-size:11px}output{color:var(--accent);font:11px Consolas,monospace}input[type=range]{width:100%;height:3px;appearance:none;background:linear-gradient(to right,var(--accent) 32%,#35413e 32%);border-radius:2px;margin:17px 0 12px;cursor:pointer;display:block}input[type=range]::-webkit-slider-thumb{appearance:none;width:10px;height:10px;border:2px solid var(--accent);border-radius:50%;background:#18211a;box-shadow:0 0 0 3px #d4e8a010}input[type=range]::-moz-range-thumb{width:8px;height:8px;border:2px solid var(--accent);border-radius:50%;background:#18211a}.range-endpoints{display:flex;justify-content:space-between;font-size:6px;letter-spacing:1.2px;color:#71817e;margin-bottom:15px}.text-button{width:100%;background:none;border:0;display:flex;align-items:center;gap:8px;font-size:10px;padding:5px 0;color:#a7b5b2}.text-button>span:first-child{font-size:16px;color:var(--accent)}#direction{margin-left:auto;font:9px Consolas,monospace;border:1px solid var(--line);padding:3px 5px;border-radius:3px}.check-row{display:flex;align-items:center;justify-content:space-between;font-size:10px;margin:13px 0 0;cursor:pointer}.check-row>span{display:flex;align-items:center;gap:9px}.swatch{width:6px;height:6px;border-radius:50%;display:inline-block}.gold{background:#eac854}.lime{background:#b5d369}.cyan{background:#74c7cb}.orange{background:#e89149}input[type=checkbox]{appearance:none;width:23px;height:13px;border-radius:10px;background:#34413e;position:relative;margin:0;cursor:pointer;flex-shrink:0;transition:.2s}input[type=checkbox]:after{content:"";position:absolute;top:3px;left:3px;width:7px;height:7px;background:#82928c;border-radius:50%;transition:.2s}input[type=checkbox]:checked{background:#d4e8a044}input[type=checkbox]:checked:after{left:13px;background:var(--accent)}.select-row{display:flex;justify-content:space-between;align-items:center;font-size:10px}select{font-size:9px;padding:6px 7px;background:#192423;color:#bcc9bf;border:1px solid var(--line);border-radius:4px}.compact{padding:20px 0}#info-card{background:#d4e8a008;border:1px solid #d4e8a016;border-radius:7px;margin-top:20px;padding:13px}.info-heading{display:flex;align-items:center;gap:8px}.info-dot{width:5px;height:5px;border:1px solid var(--accent);border-radius:50%}.info-heading strong{font-size:10px;font-weight:500;color:#d2dfbd}#info-text{color:#8e9f99;font-size:10px;line-height:1.7;margin:9px 0 12px}.info-note{font-size:6px;letter-spacing:1px;color:#7d8d78}.reset-button{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;color:#8f9e98;font-size:15px;padding:18px 0 0}.reset-button span{font-size:10px}kbd{margin-left:auto;border:1px solid var(--line);border-radius:3px;font:8px Consolas,monospace;padding:3px 5px}.bottom-bar{position:absolute;bottom:0;left:0;right:0;height:43px;border-top:1px solid var(--line);background:#0b1316ec;display:flex;justify-content:space-between;align-items:center;padding:0 25px;z-index:5}.interaction-hint{color:#83938f;font-size:9px}.interaction-hint>span{color:#bfceb5;margin-right:9px;font-size:16px}.interaction-hint i{font-style:normal;color:#45574f;margin:0 9px}.render-status{display:flex;align-items:center;gap:8px;font-size:7px;letter-spacing:1px;color:#9aac9c}#fps{font:9px Consolas,monospace;color:#697e70;padding-left:9px}#labels{position:absolute;inset:0 322px 0 0;pointer-events:none;overflow:hidden}.annotation{position:absolute;left:0;top:0;display:flex;align-items:center;white-space:nowrap;transition:opacity .2s}.annotation:before{content:"";width:4px;height:4px;border:1px solid #c9d9b4;border-radius:50%}.annotation:after{content:"";position:absolute;left:6px;width:25px;height:1px;background:#d1e3b655}.annotation span{margin-left:26px;font-size:9px;color:#d8e1d0;background:#0c1619a8;backdrop-filter:blur(6px);border:1px solid #d4e8a01c;border-radius:3px;padding:6px 9px}#loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#080e11;z-index:10;transition:opacity .7s}.loading-mark{font:80px Georgia,serif;color:var(--accent)}#loading p{color:#8d9e92;font-size:12px;letter-spacing:1px}#loading.hidden{opacity:0;pointer-events:none}#error{position:absolute;inset:0;background:#080e11ed;z-index:12;text-align:center;padding:25vh 20px}#error button{background:var(--accent);border:0;color:#142016;border-radius:5px;padding:10px 20px}#error p{color:var(--muted)}body.panel-hidden #panel{display:none}body.panel-hidden #viewport{right:0}body.panel-hidden #labels{right:0}@media(max-height:850px) and (min-width:761px){#panel{padding-top:20px}.panel-intro{margin-bottom:14px}.control-section{padding:16px 0 13px}.section-title{margin-bottom:12px}.play-row{margin-bottom:14px}#info-card{margin-top:14px}.panel-top+h2{margin-top:13px}}@media(max-width:760px){#viewport{right:0;bottom:0}.topbar{height:62px;padding:0 18px;gap:20px}.brand{font-size:26px}.brand-mark{width:28px;height:28px;font-size:25px}.top-title .top-sub,.top-divider{display:none}.top-title .eyebrow{font-size:7px;letter-spacing:1.4px}.scene-heading{top:88px;left:21px}h1{font-size:29px}.scene-heading p{font-size:10px}#panel{top:62px;bottom:43px;width:295px;padding:23px;box-shadow:-20px 0 80px #0009}#labels{right:0}.bottom-bar{height:43px;padding:0 15px}.interaction-hint{font-size:8px}.interaction-hint i{margin:0 5px}.render-status{font-size:6px}#fps{display:none}body:not(.panel-hidden) .scene-heading{opacity:.15}.annotation span{font-size:8px}#render-status{max-width:72px;white-space:nowrap;overflow:hidden}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Immersive viewer: controls float over the image instead of reserving a column. */
#viewport,#labels{right:0}.topbar{height:68px;border:0;background:linear-gradient(#030708bd,transparent);padding:0 26px}.brand{font-size:27px}.brand-mark{width:28px;height:28px;font-size:25px}.top-title .eyebrow{color:#b7c4bc;font-size:8px}.top-sub{font-size:10px}.icon-button{display:flex;align-items:center;justify-content:center;gap:8px;width:auto;padding:0 12px;height:33px;font-size:18px;background:#0b1518b3;backdrop-filter:blur(12px)}.icon-button span{font-size:10px}.scene-heading{top:auto;bottom:90px;left:29px}.scene-heading .eyebrow{font-size:7px;letter-spacing:2px}h1{font-size:25px;letter-spacing:-.5px;margin:11px 0 7px}h1+p{font-size:10px;color:#9eb2ae}.scene-dock{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:3px;padding:6px;border:1px solid #c4dbc12b;background:#0a1517cf;backdrop-filter:blur(16px);border-radius:9px;box-shadow:0 8px 30px #0005}.scene-dock button{padding:10px 17px;background:transparent;border:0;border-radius:5px;color:#98ada5;font-size:11px;white-space:nowrap}.scene-dock button.active{color:#e2ebcf;background:#d4e8a018}.scene-dock button:hover{background:#d4e8a022;color:#e2ebcf}.scene-dock #dock-play{font-size:15px;padding:7px 13px;color:#dae7bb}.dock-divider{height:17px;width:1px;background:#b5d49a26;margin:0 4px}.tour-dot{display:inline-block;width:4px;height:4px;border:1px solid #b1c995;border-radius:50%;margin:0 6px 1px 0}#tour[aria-pressed=true]{color:#d4e8a0;background:#d4e8a018}#tour[aria-pressed=true] .tour-dot{background:#d4e8a0}#panel{top:70px;bottom:92px;right:20px;width:300px;border:1px solid #b4cebd22;border-radius:10px;background:#0b1519ee;backdrop-filter:blur(20px);box-shadow:0 15px 60px #0007;padding:22px}.panel-top+h2{font-size:25px}.bottom-bar{height:26px;background:transparent;border:0;pointer-events:none;padding:0 29px}.interaction-hint{font-size:8px;color:#859c92}.interaction-hint>span{font-size:12px}.render-status{font-size:6px;color:#91a48f}#labels{display:none}.annotation span{background:#071115a8}.scene-heading{text-shadow:0 2px 12px #000;pointer-events:none}.scene-heading:before{content:'';position:absolute;inset:-20px -45px -25px -29px;background:radial-gradient(ellipse at bottom left,#030708a8,transparent 75%);z-index:-1}body:not(.panel-hidden) .scene-heading{opacity:1}body:not(.panel-hidden) .scene-dock{left:calc(50% - 110px)}
@media(max-width:760px){.topbar{height:60px;padding:0 17px;gap:16px}.brand{font-size:25px}.brand-mark{width:26px;height:26px}.top-title .eyebrow{font-size:7px;letter-spacing:1.7px}.top-sub{display:none}.icon-button{height:31px;padding:0 9px}.icon-button span{display:none}.scene-heading{top:auto;bottom:101px;left:20px}h1{font-size:23px;max-width:260px}.scene-heading .eyebrow{font-size:6px}.scene-dock{bottom:33px;width:calc(100% - 28px);justify-content:center;gap:0;padding:5px}.scene-dock button{font-size:10px;padding:10px 13px}.scene-dock #dock-play{padding:7px 12px}.dock-divider{margin:0 2px}.scene-dock #tour{padding:10px 11px}.bottom-bar{padding:0 19px;height:24px}.interaction-hint{font-size:7px}.interaction-hint i{margin:0 4px}.render-status{display:none}#panel{top:65px;right:10px;bottom:95px;width:min(300px,calc(100% - 20px))}body:not(.panel-hidden) .scene-dock{left:50%}body:not(.panel-hidden) .scene-heading{opacity:0}.top-title .eyebrow{color:#a9beb1}}
.model-notes{margin-top:20px;border-top:1px solid #d4e8a016;padding-top:14px;font-size:10px;color:#8b9f96}.model-notes summary{cursor:pointer}.model-notes p{font-size:9px;line-height:1.7}.model-notes a{color:#c0d69d;text-underline-offset:2px}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:8px}.header-actions #toggle-panel{margin-left:0}.sound-button{display:flex;align-items:center;gap:8px;height:33px;padding:0 12px;border:1px solid #ffffff14;border-radius:7px;background:#0b1518b3;backdrop-filter:blur(12px);font-size:10px;color:#a6b8ae}.sound-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.sound-button .sound-waves{display:none}.sound-button[aria-pressed=true]{color:#d4e8a0;border-color:#d4e8a033}.sound-button[aria-pressed=true] .sound-slash{display:none}.sound-button[aria-pressed=true] .sound-waves{display:block}.sound-button:disabled{opacity:.5;cursor:wait}.sound-volume-label{margin-top:19px}.sound-note{font-size:9px;color:#91a59a;line-height:1.65;margin:12px 0 8px}#sound-status{font-size:8px;color:#b7c6a5}@media(max-width:760px){.sound-button{height:31px;padding:0 9px}.sound-button>span{display:none}.header-actions{gap:6px}.topbar{gap:12px}.top-title .eyebrow{font-size:6px;letter-spacing:1.2px}}
/* Annotations: a pin per structure, a docked detail card with sources, and a field guide in the panel. */
#labels{display:block;position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.pin{position:absolute;left:0;top:0;display:flex;align-items:center;gap:7px;padding:3px 8px 3px 3px;border:1px solid #d4e8a024;border-radius:999px;background:#071115b8;backdrop-filter:blur(8px);color:#dbe5d4;font-size:9.5px;line-height:1;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:auto;transition:opacity .25s,visibility .25s,border-color .2s,background .2s}
.pin.on{opacity:1;visibility:visible}
.pin i{width:12px;height:12px;border-radius:50%;border:1px solid #d4e8a0aa;background:radial-gradient(circle,#d4e8a0 0 2px,transparent 2.5px);flex-shrink:0}
.pin:hover,.pin:focus-visible{border-color:#d4e8a066;background:#0d1d20e6;color:#fff}
.pin.selected{border-color:#d4e8a0;background:#1b2a1ef0;color:#f0f7e2}
.pin.selected i{background:radial-gradient(circle,#d4e8a0 0 3px,transparent 3.5px);box-shadow:0 0 0 4px #d4e8a026;animation:pin-pulse 1.8s ease-in-out infinite}
@keyframes pin-pulse{50%{box-shadow:0 0 0 7px #d4e8a010}}
#annot-card{position:absolute;left:24px;top:78px;z-index:7;width:min(350px,calc(100% - 48px));max-height:calc(100% - 270px);overflow:auto;scrollbar-width:thin;padding:18px 20px 16px;border:1px solid #b4cebd2a;border-radius:10px;background:#0a1518f0;backdrop-filter:blur(18px);box-shadow:0 15px 50px #0008}
#annot-card[hidden]{display:none}
#annot-close{position:absolute;top:8px;right:9px;width:28px;height:28px;border:0;border-radius:6px;background:transparent;color:#9fb1a8;font-size:18px}
#annot-close:hover{background:#ffffff10;color:#fff}
.annot-kicker{display:block;font-size:9px;letter-spacing:.6px;color:var(--accent);padding-right:26px;line-height:1.6}
#annot-card h3{font:400 22px/1.2 Georgia,serif;letter-spacing:-.4px;margin:8px 0 10px}
#annot-what{font-size:11.5px;line-height:1.65;color:#d1dbd3;margin:0 0 10px}
.annot-model{font-size:10px;line-height:1.6;color:#94a79d;margin:0 0 12px;padding-left:10px;border-left:2px solid #d4e8a033}
.annot-sources{font-size:7.5px;letter-spacing:1.4px;text-transform:uppercase;color:#7f948a;margin-top:4px}
#annot-cites{margin:7px 0 0;padding-left:16px;font-size:9.5px;line-height:1.5;color:#7f948a}
#annot-cites li{margin-bottom:6px}
#annot-cites a{color:#bcd497;text-decoration:none;border-bottom:1px solid #bcd49733}
#annot-cites a:hover{border-bottom-color:#bcd497}
#annot-cites .no-cite{list-style:none;margin-left:-16px;font-style:italic}
.guide-note{font-size:9.5px;line-height:1.6;color:#8b9f96;margin:-6px 0 10px}
.guide-group{font-size:7.5px;letter-spacing:1.4px;text-transform:uppercase;color:#6f8077;margin:14px 0 4px}
#guide-list button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:5px;padding:6px 8px;margin:0 -8px;width:calc(100% + 16px)}
#guide-list button:hover,#guide-list button[aria-current=true]{background:#d4e8a012}
#guide-list strong{display:block;font-size:10.5px;font-weight:500;color:#dbe5d4}
#guide-list span{display:block;font-size:8.5px;color:#82958c;margin-top:2px}
@media(max-width:760px){#annot-card{left:10px;right:10px;top:auto;bottom:140px;width:auto;max-height:46vh}.pin{font-size:8.5px}.pin span{max-width:120px;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:760px){body.annot-open .scene-heading{opacity:0}}
/* Motor state pill: reports chemotaxis runs and tumbles. */
.motor-state{position:absolute;top:74px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid #d4e8a024;border-radius:999px;background:#071115b8;backdrop-filter:blur(8px);color:#cfdcc8;font-size:9.5px;white-space:nowrap;transition:border-color .3s,color .3s,background .3s}
.motor-state i{width:6px;height:6px;border-radius:50%;background:#d4e8a0;box-shadow:0 0 8px #d4e8a088}
.motor-state.tumble{border-color:#93f03a88;color:#e6ffd0;background:#14260fd0}
.motor-state.tumble i{background:#b8ff4a;animation:pin-pulse .6s ease-in-out infinite}
@media(max-width:760px){.motor-state{top:66px;font-size:8.5px;max-width:calc(100% - 28px);overflow:hidden;text-overflow:ellipsis}}
/* Scale bar and facts. */
.scale-bar{position:absolute;right:28px;bottom:34px;z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:5px;pointer-events:none;color:#cfdcc8;font:9px Consolas,monospace;text-shadow:0 1px 6px #000}
.scale-bar i{display:block;height:6px;border:1px solid #d4e8a0cc;border-top:0;transition:width .3s}
.facts{list-style:none;margin:0;padding:0}
.facts li{display:grid;grid-template-columns:78px 1fr;gap:10px;padding:7px 0;border-top:1px solid #ffffff0d;font-size:9.5px;line-height:1.5;color:#9fb1a8}
.facts li:first-child{border-top:0}
.facts strong{font:500 11px/1.35 Georgia,serif;color:#e2ebcf}
.facts a{color:#bcd497;text-decoration:none;border-bottom:1px solid #bcd49744;font-size:8.5px}
.pin{transition:opacity .35s,visibility .35s,border-color .2s,background .2s,transform .12s linear}
@media(max-width:760px){.scale-bar{bottom:118px;right:16px}}