.lab-tools{position:fixed;z-index:30;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 16px;padding:8px 18px;background:#100d17;border-top:1px solid #51405f;font-size:12px;min-height:60px}
.lab-tools button,.lab-tools summary{min-height:44px;padding:10px 12px;cursor:pointer}
.mode-choice{display:flex;gap:2px;background:#21162e;border-radius:8px;padding:2px}
.mode-choice button{border-radius:6px;color:#cdbedb}
.mode-choice button[aria-pressed=true]{background:#7036b5;color:#fff}
#lab-status{color:#d3c4e1;max-width:330px;font-size:12px;font-variant-numeric:tabular-nums}
.lab-tools details p{position:absolute;bottom:70px;right:18px;max-width:min(430px,calc(100vw - 36px));padding:22px;background:#21162e;color:#f8f5ff;border-radius:12px;line-height:1.8;box-shadow:0 12px 36px #0009}
#three-fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9}
.three-active .hairclip-icon{opacity:0}
.character video[hidden]{display:none!important}
.character{transition:transform .5s ease-out;overflow:hidden}
/* Keep the ledge horizontal; pointer parallax must not tilt or lift the table. */
.hybrid .character{transform:translateX(calc(-50% + var(--lab-x,0px)))}
.slogan span:only-child{color:var(--ink);text-wrap:balance}
.bottom{justify-content:center}
.bottom .copyright{display:block;font-size:11px;line-height:1.5;color:var(--muted)}
.world{min-height:700px;touch-action:manipulation}
#world[tabindex="-1"]:focus{outline:none}
.constellation{bottom:105px}.character{bottom:205px}.character-caption{bottom:232px}.bottom{bottom:76px}
#curtain{position:fixed;z-index:25;inset:0;background:#13081f;opacity:0;pointer-events:none;transform:translateY(100%)}
.leaving .portal{opacity:.5;cursor:default}
.leaving .portal.is-selected{opacity:1;color:#e0c9ff}
.leaving #caption{visibility:hidden}
.constellation .portal{transition:opacity .18s ease-out,color .18s ease-out}
.constellation .portal.is-selected::after{background:#d7b2ff;width:100%}
.leaving .portal:hover,.leaving .portal:focus-visible{transform:none}
.journey-feedback{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:0 16px;width:min(620px,88%);color:#e0c9ff;line-height:1.6;pointer-events:auto}
#journey-message{max-width:100%;overflow-wrap:anywhere}
#journey-skip{flex-shrink:0;min-height:44px;padding:8px 6px;color:#f6f0ff;text-decoration:underline;text-underline-offset:5px;font-size:12px;cursor:pointer}
#journey-skip:hover{color:#d7b2ff}
#journey-skip:focus-visible{outline:2px solid #d7b2ff;outline-offset:3px;border-radius:3px}
.panel{padding-bottom:150px}
/* Swap scenes under the opaque curtain: never retain the departing character. */
.panel-open .world{visibility:hidden;opacity:0;filter:none;transition:none}
.panel{background:#100d17;animation:none}
.vision-statement{max-width:700px;margin:56px 0 32px;font-size:clamp(25px,4vw,44px);font-weight:450;line-height:1.4;text-wrap:balance;color:#e0c9ff}
.vision-directions{list-style:none;margin:0;padding:0;max-width:650px}
.vision-directions li{padding:18px 0;border-bottom:1px solid var(--line);font-size:18px}
.character-about{border-top:1px solid var(--line);margin-top:48px;padding-top:28px}
.character-about h3{font-weight:500;font-size:22px;margin:0 0 16px}
.panel .viewer-notice{font-size:12px;line-height:1.6}
.experience-link{min-height:44px;display:inline-flex;align-items:center;color:#e0c9ff;text-underline-offset:4px}
#experience-intro{position:fixed;inset:0;z-index:50;background:#09090e;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.experience-requested #experience-intro[hidden]{display:flex!important}
.experience-requested .topbar,.experience-requested .world{visibility:hidden}
.intro-logo{width:min(66vw,480px);aspect-ratio:1000 / 620}
.intro-logo img,.intro-logo svg{display:block;width:100%;height:100%;object-fit:contain}
.intro-logo g{transition:opacity .38s ease-out;opacity:1}.intro-logo g.gone{opacity:0}
#experience-intro p{font-size:12px;color:#d1bddf;margin:0;text-align:center;padding:0 20px}
#experience-intro button{min-height:44px;padding:10px 18px;font-size:12px;color:#e0c9ff;text-decoration:underline;text-underline-offset:5px}
.experience-mode .lab-tools{display:none}
.experience-mode .constellation{bottom:64px}
.experience-mode .character{bottom:162px}
.experience-mode .character-caption{bottom:190px}
.experience-mode .bottom{bottom:10px}
.experience-mode .world{min-height:636px}
.experience-mode .panel{padding-bottom:100px}
.experience-boot .world,.experience-boot .topbar{visibility:hidden}
.experience-enter .world{animation:experience-arrive .75s cubic-bezier(.16,1,.3,1) both}
@keyframes experience-arrive{from{filter:blur(12px);opacity:.25}to{filter:none;opacity:1}}
@media(max-width:600px){.lab-tools{justify-content:flex-start;gap:0 8px;padding:6px 10px;min-height:112px}.lab-tools button,.lab-tools summary{padding:8px;font-size:11px}#lab-status{max-width:none;flex:1;min-width:180px}.lab-tools details p{bottom:110px}.world{min-height:640px}.character{bottom:230px}.character-caption{bottom:252px}.constellation{bottom:140px}.bottom{bottom:112px}.panel{padding-bottom:200px}}
@media(prefers-reduced-motion:reduce){.hybrid .character{transform:translateX(-50%)}#curtain{display:none}.lab-tools *{scroll-behavior:auto}.constellation .portal{transition:none}}
@media(max-width:600px){.experience-mode .constellation{bottom:76px}.experience-mode .character{bottom:184px}.experience-mode .character-caption{bottom:206px}.experience-mode .world{min-height:600px}.experience-mode .panel{padding-bottom:100px}}
@media(prefers-reduced-motion:reduce){.intro-logo g{transition:none}.experience-enter .world{animation:none}}
