@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Roboto:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{--cyan:#73dcff;--gold:#e9bf6d;--text:#eff8fb;--muted:#b8cbd2;--panel:rgba(4,12,19,.91);--line:rgba(121,218,246,.28);--accent:#73dcff}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#020711;color:var(--text);font-family:'Montserrat','Roboto',sans-serif}button{font:inherit}body{touch-action:none}
.lab-bg,.screen-grain{position:fixed;inset:0;pointer-events:none}.lab-bg{z-index:0;background:#020711 url('./assets/lab-background.png') center/cover no-repeat}.lab-bg:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,7,13,.46),rgba(1,7,13,.04) 50%,rgba(1,7,13,.22)),linear-gradient(0deg,rgba(1,7,13,.24),transparent 45%,rgba(1,7,13,.10))}.screen-grain{z-index:95;opacity:.075;background-image:radial-gradient(rgba(255,255,255,.13) .55px,transparent .55px);background-size:4px 4px;mix-blend-mode:soft-light}
.topbar{position:fixed;z-index:100;left:0;right:0;top:0;height:86px;padding:17px 38px;border-bottom:1px solid rgba(133,213,244,.16);background:linear-gradient(180deg,rgba(1,7,14,.84),rgba(1,7,14,.18));backdrop-filter:blur(10px)}.brand-lockup{display:flex;align-items:center;gap:14px}.brand-box{width:52px;height:52px;border:1px solid rgba(111,215,248,.68);border-radius:13px;overflow:hidden;box-shadow:0 0 22px rgba(74,196,240,.10)}.brand-box img{width:100%;height:100%;object-fit:cover}.brand-title{font:600 16px/1.1 'Montserrat';letter-spacing:.13em}.brand-title i{font-style:normal;color:var(--cyan);padding:0 .45em}.brand-sub{margin-top:5px;font:500 8px/1 'IBM Plex Mono';letter-spacing:.20em;color:#9ab4bf}
.experience,.viewer{position:fixed;inset:0;z-index:5}.viewer{overflow:hidden}
.stage-hud{position:absolute;z-index:78;top:118px;color:#e2f3f7;letter-spacing:.18em;font:500 11px 'IBM Plex Mono';text-shadow:0 2px 10px #020711}.stage-hud small{font-size:8px;color:#9eb8c0}.stage-hud.top-left{left:38px}
.research-toggle{position:absolute;z-index:92;top:116px;right:38px;border:1px solid rgba(120,219,246,.28);border-radius:14px;background:rgba(2,10,17,.76);color:#d9eef2;padding:9px 13px 8px;cursor:pointer;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center;text-align:left;min-width:170px;backdrop-filter:blur(9px);box-shadow:0 9px 22px rgba(0,0,0,.18);transition:.2s ease}.research-toggle:hover{border-color:rgba(120,219,246,.58);transform:translateY(-1px)}.research-toggle small{grid-row:1/3;font:600 9px 'IBM Plex Mono';color:var(--cyan);letter-spacing:.12em}.research-toggle span{font:500 9px 'Montserrat';letter-spacing:.11em}.research-toggle em{font:500 7px 'IBM Plex Mono';font-style:normal;color:#809ca7;letter-spacing:.10em;margin-top:2px}
.stage-title-block{position:absolute;z-index:66;top:15.2%;left:50%;transform:translateX(-50%);width:min(1050px,76vw);text-align:center;pointer-events:none;transition:transform .45s ease,opacity .45s ease}.kicker{font:500 10px 'IBM Plex Mono';letter-spacing:.22em;color:#b4d5dc;text-shadow:0 2px 12px #020711}.stage-title-block h1{margin:7px 0 0;font:600 clamp(68px,7.2vw,116px)/.92 'Montserrat';letter-spacing:-.055em;text-shadow:0 12px 42px rgba(0,0,0,.82)}.stage-title-block p{margin:8px 0 0;font:500 clamp(17px,1.35vw,21px)/1.2 'Roboto';font-style:italic;color:#d7e7eb;text-shadow:0 3px 12px #020711}.viewer.view-macro .stage-title-block{transform:translateX(-50%) translateY(-14px) scale(.78);opacity:.32}
.arrow{position:absolute;z-index:96;top:48%;transform:translateY(-50%);width:58px;height:78px;border:1px solid rgba(120,219,246,.48);border-radius:17px;background:rgba(2,11,18,.84);color:#cceef6;font-size:31px;cursor:pointer;backdrop-filter:blur(10px);box-shadow:0 14px 38px rgba(0,0,0,.42);transition:transform .2s,border-color .2s,background .2s}.arrow:hover{transform:translateY(-50%) scale(1.05);border-color:rgba(120,219,246,.78);background:rgba(7,24,34,.95)}.prev-arrow{left:24px}.next-arrow{right:24px}
#mainCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:30;display:block;touch-action:none}
.profile{position:absolute;z-index:76;left:30px;bottom:25.5%;width:min(320px,24vw);padding:15px 17px;border:1px solid var(--line);border-radius:17px;background:var(--panel);backdrop-filter:blur(14px);box-shadow:0 17px 48px rgba(0,0,0,.40)}.profile-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.profile-head span{font:500 8px 'IBM Plex Mono';letter-spacing:.18em;color:#a2bbc4}.profile-head button{border:0;background:none;color:var(--cyan);font:600 8px 'IBM Plex Mono';letter-spacing:.13em;cursor:pointer}.profile-main{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}.profile-main small{display:block;font:500 7px 'IBM Plex Mono';letter-spacing:.14em;color:#89a5af;margin-bottom:4px}.profile-main strong{font:600 12px 'Montserrat';color:#e6f3f6}
.info-panel{position:absolute;z-index:110;left:50%;bottom:25.5%;width:min(430px,calc(100vw - 140px));padding:16px 18px;border:1px solid rgba(133,221,242,.28);border-radius:17px;background:linear-gradient(145deg,rgba(10,30,42,.84),rgba(3,12,20,.94));backdrop-filter:blur(16px) saturate(118%);box-shadow:0 16px 36px rgba(0,0,0,.34);opacity:0;transform:translate(-50%,12px);pointer-events:none;transition:opacity .24s ease,transform .24s ease}.info-panel[data-open="1"]{opacity:1;transform:translate(-50%,0);pointer-events:auto}.info-head{display:flex;align-items:center;justify-content:space-between}.info-head span{font:500 8px 'IBM Plex Mono';letter-spacing:.19em;color:#a4c0c8}.info-head button{border:0;background:none;color:#b5cbd2;font-size:20px;cursor:pointer}.info-panel h2{margin:12px 0 7px;font:600 20px 'Montserrat';color:#f0f8fb}.info-panel p{margin:0;font:400 12px/1.58 'Roboto';color:#cfdee2}.info-note{margin-top:9px!important;color:#a8c0c8!important}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;padding-top:13px;border-top:1px solid rgba(117,211,244,.17)}.info-grid span{display:block;font:500 6px 'IBM Plex Mono';letter-spacing:.13em;color:#8ba7b1;margin-bottom:4px}.info-grid b{font:600 10px 'Montserrat';color:#e1eef2}
.detail-hud{position:absolute;z-index:89;right:30px;top:38%;width:min(360px,26vw);padding:16px 18px;border:1px solid rgba(231,189,108,.40);border-radius:16px;background:rgba(7,12,17,.94);backdrop-filter:blur(16px);box-shadow:0 17px 50px rgba(0,0,0,.46);opacity:0;transform:translateY(10px);pointer-events:none;transition:.28s}.detail-hud[data-open="1"]{opacity:1;transform:none;pointer-events:auto}.detail-head{display:flex;justify-content:space-between;align-items:center}.detail-head span{font:500 7px 'IBM Plex Mono';letter-spacing:.18em;color:var(--gold)}.detail-head button{border:0;background:none;color:#a8c0c9;font-size:18px;cursor:pointer}.detail-hud h2{margin:9px 0 6px;font:600 18px 'Montserrat';color:#edf7fb}.detail-hud p{margin:0;font:400 12px/1.58 'Roboto';color:#c9d9de}.detail-meta{display:flex;justify-content:space-between;margin-top:11px;font:500 6px 'IBM Plex Mono';letter-spacing:.16em;color:#a0b7c0}
.research-strip{position:absolute;z-index:82;left:50%;top:24%;transform:translateX(-50%) translateY(-6px);opacity:0;display:flex;align-items:center;gap:11px;padding:7px 11px;border:1px solid rgba(111,212,244,.22);border-radius:999px;background:rgba(2,10,16,.72);backdrop-filter:blur(8px);transition:.26s;white-space:nowrap}.research-strip.show{opacity:1;transform:translateX(-50%)}.research-strip strong{font:600 8px 'Montserrat';letter-spacing:.08em}.research-strip>span{font:400 8px 'Roboto';color:#a7bdc5}
.card-carousel{position:absolute;z-index:72;left:50%;bottom:-1px;transform:translateX(-50%);width:min(960px,78vw);height:148px;perspective:1400px;pointer-events:auto}.cards{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:auto}.specimen-card{position:absolute;left:50%;bottom:12px;width:64px;height:78px;padding:0;border:1px solid rgba(145,218,241,.28);border-radius:12px;overflow:hidden;background:linear-gradient(145deg,rgba(10,30,42,.78),rgba(3,12,20,.88));backdrop-filter:blur(10px) saturate(112%);box-shadow:0 10px 22px rgba(0,0,0,.28);cursor:pointer;pointer-events:auto;transform:translate3d(calc(-50% + var(--x)),var(--y),0) rotateY(var(--ry)) rotateZ(var(--rot)) scale(var(--scale));transform-origin:50% 100%;opacity:var(--op);z-index:var(--z);transition:transform .38s cubic-bezier(.22,.86,.22,1),opacity .24s ease,filter .28s ease,border-color .25s ease;filter:brightness(.60) saturate(.72)}.specimen-card:hover{filter:brightness(.86) saturate(.92);transform:translate3d(calc(-50% + var(--x)),calc(var(--y) - 6px),0) rotateY(var(--ry)) rotateZ(var(--rot)) scale(var(--scale))}.specimen-card.is-active{border-color:rgba(107,220,255,.86);filter:brightness(1) saturate(1.08);box-shadow:0 18px 40px rgba(0,0,0,.34)}.specimen-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.card-gloss{position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.15),transparent 28%,transparent 68%,rgba(70,215,255,.08));mix-blend-mode:screen}.card-number{position:absolute;top:6px;left:7px;font:500 6px 'IBM Plex Mono';letter-spacing:.12em;color:#a8c6ce}.card-name{position:absolute;left:7px;bottom:19px;right:6px;font:600 7px 'Montserrat';text-align:left;color:#eef8fb;text-shadow:0 2px 8px #020711}.card-latin{position:absolute;left:7px;right:6px;bottom:7px;font:500 4.4px 'IBM Plex Mono';color:#a7bcc3;text-align:left}.card-active{position:absolute;top:5px;right:5px;padding:2px 3px;border:1px solid rgba(107,220,255,.48);border-radius:999px;font:500 5px 'IBM Plex Mono';color:#a8e9f8}
.bottom-controls{position:absolute;z-index:92;right:24px;bottom:24.5%;display:flex;flex-direction:column;gap:7px}.bottom-controls button{min-width:118px;border:1px solid rgba(117,211,244,.30);border-radius:11px;padding:9px 11px;background:rgba(2,11,18,.86);color:#c9dce2;font:500 7px 'IBM Plex Mono';letter-spacing:.12em;cursor:pointer;backdrop-filter:blur(9px);text-align:left;transition:.2s}.bottom-controls button:hover{border-color:rgba(117,211,244,.68);color:#effaff;transform:translateX(-2px)}.bottom-controls .on{color:var(--cyan)}
.preloader{position:fixed;inset:0;z-index:200;background:#020711;display:grid;place-items:center;transition:opacity .65s ease,visibility .65s ease}.preloader.hidden{opacity:0;visibility:hidden;pointer-events:none}.loader-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,9,15,.78),rgba(2,9,15,.26)),url('./assets/lab-background.png') center/cover}.loader-vignette{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 15%,rgba(0,0,0,.42) 75%,rgba(0,0,0,.72))}.loader-ui{position:relative;width:min(720px,86vw)}.loader-brand{display:flex;align-items:center;gap:12px}.loader-brand img{width:42px;height:42px;border-radius:12px;object-fit:cover;border:1px solid rgba(104,216,247,.55)}.loader-brand strong,.loader-brand span{display:block}.loader-brand strong{font:600 13px 'Montserrat';letter-spacing:.15em}.loader-brand span{margin-top:2px;font:500 10px 'IBM Plex Mono';color:var(--cyan);letter-spacing:.12em}.loader-kicker{margin-top:26px;font:500 7px 'IBM Plex Mono';letter-spacing:.2em;color:#93aeb7}.loader-ui h1{margin:11px 0 34px;font:600 clamp(40px,7vw,78px)/.94 'Montserrat';letter-spacing:-.05em}.loader-ui h1 em{font-style:normal;color:#68d9ff}.loader-copy{display:flex;justify-content:space-between;color:#b0c7ce;font:500 7px 'IBM Plex Mono';letter-spacing:.13em}.loader-track{margin-top:8px;height:2px;background:rgba(103,200,233,.16)}.loader-track span{display:block;width:0;height:100%;background:linear-gradient(90deg,#6ddfff,#e6bd6d);box-shadow:0 0 12px rgba(103,217,255,.36);transition:width .25s}.loader-foot{display:flex;gap:16px;margin-top:13px;font:500 6px 'IBM Plex Mono';letter-spacing:.14em;color:#6a8893}.loader-foot span:first-child{color:#85a4ae}
@media(max-width:1100px){.topbar{padding-inline:24px}.stage-title-block{top:16.5%;width:82vw}.stage-title-block h1{font-size:clamp(60px,9vw,96px)}.profile{left:20px;width:300px}.info-panel{left:20px;width:320px}.detail-hud{right:20px;width:300px}.card-carousel{width:90vw}.arrow{width:52px;height:70px}.prev-arrow{left:16px}.next-arrow{right:16px}.bottom-controls{right:18px}}
@media(max-width:820px){.topbar{height:72px;padding:12px 14px}.brand-box{width:42px;height:42px}.brand-title{font-size:12px}.brand-sub{font-size:6px}.stage-hud{top:90px}.stage-hud.top-left{left:14px}.research-toggle{top:86px;right:12px;min-width:145px;padding:8px 9px}.research-toggle span{font-size:8px}.research-toggle em{font-size:6px}.stage-title-block{top:16%;width:94vw}.stage-title-block h1{font-size:clamp(46px,12.6vw,70px)}.stage-title-block p{font-size:13px}.arrow{top:46%;width:44px;height:60px;font-size:25px}.prev-arrow{left:8px}.next-arrow{right:8px}.profile{left:12px;bottom:25%;width:235px;padding:13px}.info-panel{left:12px;bottom:24%;width:calc(100vw - 24px)}.detail-hud{right:12px;top:auto;bottom:37%;width:calc(100vw - 24px)}.research-strip{top:27%}.card-carousel{width:100vw;height:164px;bottom:0}.specimen-card{width:86px;height:114px;bottom:12px}.bottom-controls{right:10px;bottom:25%}.bottom-controls button{min-width:92px;padding:8px 9px;font-size:6px}.loader-ui{width:calc(100% - 28px)}.loader-ui h1{font-size:clamp(34px,11vw,54px);margin-bottom:28px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* v15.2 final responsive/mobile polish */
:root{--bg-zoom:1}
.lab-bg{background-position:center center;background-size:cover;transform:scale(var(--bg-zoom));transform-origin:center center;transition:none}
/* Premium glass: readable, bluish, no luminous/glow card treatment. */
.research-toggle,.profile,.info-panel,.detail-hud,.bottom-controls button{
  background:linear-gradient(135deg,rgba(9,27,39,.80),rgba(4,14,23,.90));
  border-color:rgba(151,219,239,.26);
  box-shadow:0 10px 24px rgba(0,0,0,.30);
  backdrop-filter:blur(14px) saturate(115%);
}
.research-toggle{min-width:150px;padding:8px 11px}
.info-panel{width:min(300px,24vw);padding:13px 15px;border-radius:15px}
.detail-hud{width:min(300px,23vw);padding:13px 15px;border-radius:14px}
.research-toggle:hover,.bottom-controls button:hover{box-shadow:0 10px 24px rgba(0,0,0,.30)}
.profile,.info-panel,.detail-hud{box-shadow:0 14px 30px rgba(0,0,0,.30)}
.arrow{display:grid;place-items:center;background:rgba(4,15,24,.68);box-shadow:0 10px 24px rgba(0,0,0,.28)}
.arrow img{width:24px;height:24px;display:block;filter:brightness(1.05)}
.arrow:hover{box-shadow:0 10px 24px rgba(0,0,0,.28)}
/* desktop environment orbit: the scene may subtly pan with manual horizontal drag */
@media(min-width:821px){
  .lab-bg{--bg-zoom:1.035}
}
@media(max-width:820px){
  :root{--bg-zoom:1.055}
  html,body{width:100%;height:100%;min-height:100%;overflow:hidden}
  body{overscroll-behavior:none}
  .experience,.viewer{inset:0;min-height:100svh;height:100svh}
  .topbar{height:72px;padding:11px 14px}
  .brand-box{width:42px;height:42px;border-radius:11px}
  .brand-title{font-size:11px;letter-spacing:.11em}
  .brand-sub{font-size:5.8px;letter-spacing:.17em;margin-top:4px}
  .stage-hud{top:88px;left:14px!important;font-size:10px}
  .research-toggle{
    top:82px;right:12px;min-width:0;width:126px;height:44px;padding:6px 8px;
    border-radius:13px;column-gap:7px;
  }
  .research-toggle small{font-size:8px}
  .research-toggle span{font-size:7px;line-height:1.05}
  .research-toggle em{font-size:5.2px;letter-spacing:.08em;margin-top:1px}
  .stage-title-block{top:18.5%;width:92vw}
  .stage-title-block .kicker{font-size:8px;letter-spacing:.19em}
  .stage-title-block h1{font-size:clamp(46px,12.2vw,70px);margin-top:6px;line-height:.93}
  .stage-title-block p{font-size:13px;margin-top:7px}
  .arrow{top:46.5%;width:42px;height:58px;border-radius:16px}
  .arrow img{width:22px;height:22px}
  .prev-arrow{left:8px}.next-arrow{right:8px}

  /* Compact mobile field-data trigger; the full card opens only when requested. */
  .mobile-info-trigger{display:flex;align-items:center;justify-content:space-between;position:absolute;z-index:93;left:12px;bottom:calc(25% - 2px);width:116px;height:32px;padding:0 10px;border:1px solid rgba(123,209,234,.32);border-radius:10px;background:linear-gradient(135deg,rgba(8,25,36,.84),rgba(3,13,21,.92));color:#cde6ec;font:500 6px 'IBM Plex Mono';letter-spacing:.12em;cursor:pointer;backdrop-filter:blur(10px);box-shadow:0 10px 22px rgba(0,0,0,.26)}
  .mobile-info-trigger span{color:var(--cyan);font-size:11px;line-height:1}
  .profile{
    left:12px;bottom:calc(25% + 40px);width:min(248px,calc(100vw - 118px));max-width:248px;
    padding:10px 12px;border-radius:15px;opacity:0;transform:translateY(8px);pointer-events:none;transition:.22s ease;
  }
  .profile[data-mobile-open="1"]{opacity:1;transform:none;pointer-events:auto}
  .profile-head{margin-bottom:9px}
  .profile-head span{font-size:7px;letter-spacing:.15em}
  .profile-head button{font-size:6.5px;letter-spacing:.10em}
  .profile-main{gap:8px 12px}
  .profile-main small{font-size:6px;margin-bottom:3px}
  .profile-main strong{font-size:10px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .info-panel{
    left:50%;right:auto;bottom:calc(25% + 8px);width:min(290px,calc(100vw - 24px));max-height:42svh;overflow:auto;
    padding:13px 14px;border-radius:15px;transform:translate(-50%,10px);
  }
  .info-panel[data-open="1"]{transform:translate(-50%,0)}
  .info-panel h2{font-size:16px;margin:9px 0 6px}
  .info-panel p{font-size:11px;line-height:1.45}
  .info-note{margin-top:7px!important}
  .info-grid{gap:8px;margin-top:10px;padding-top:10px}
  .info-grid span{font-size:5.5px}.info-grid b{font-size:9px}

  .detail-hud{
    right:12px;left:auto;top:auto;bottom:37%;width:min(180px,43vw);
    padding:10px 11px;border-radius:13px;
  }
  .detail-head span{font-size:6px}
  .detail-hud h2{font-size:13px;margin:7px 0 5px}
  .detail-hud p{font-size:9.5px;line-height:1.35}
  .detail-meta{margin-top:8px;font-size:5px}

  .research-strip{top:26%;max-width:84vw;padding:6px 9px;gap:8px}
  .research-strip strong,.research-strip>span{font-size:6.5px}

  .bottom-controls{right:9px;bottom:25%;gap:5px}
  .bottom-controls button{
    min-width:82px;width:82px;height:30px;padding:6px 7px;
    border-radius:10px;font-size:5.5px;letter-spacing:.10em;text-align:center;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  /* Do not resize the existing specimen roster on phones. */
  .card-carousel{width:100vw;height:164px;bottom:0}
  .specimen-card{width:86px;height:114px;bottom:12px}

  /* Background orbit: hand-drag the environment left/right without moving the specimen. */
  .lab-bg{background-position:center center;background-size:cover;background-repeat:no-repeat;transform:scale(1);}
}
@media(max-width:430px){
  .mobile-info-trigger{left:9px;width:108px;height:30px;padding-inline:9px;font-size:5.5px}
  .research-toggle{width:118px}
  .stage-hud{font-size:9px}
  .profile{width:calc(100vw - 126px);padding:9px 10px}
  .profile-main strong{font-size:9px}
  .bottom-controls{right:7px}.bottom-controls button{min-width:78px;width:78px;height:28px;padding-inline:5px;font-size:5.2px}
  .detail-hud{width:calc(44vw);right:9px}
}
@media(max-width:360px){
  .mobile-info-trigger{left:8px;width:102px;height:29px;font-size:5.2px}
  .research-toggle{right:8px;width:108px}
  .research-toggle span{font-size:6.5px}
  .stage-title-block{top:19.5%}
  .profile{left:9px;width:calc(100vw - 120px);bottom:25.5%}
  .bottom-controls{right:6px;bottom:25.5%}
  .bottom-controls button{width:72px;min-width:72px;font-size:4.8px}
  .arrow{width:38px;height:54px}
  .arrow img{width:20px;height:20px}
}

.mobile-info-trigger{display:none}
@media(max-width:820px){.mobile-info-trigger{display:flex}}

/* v15.3 performance + transition stability */
#mainCanvas{will-change:transform}
.card-carousel{will-change:transform}
.research-toggle,.profile,.info-panel,.detail-hud,.bottom-controls button{will-change:transform,opacity}
@media(max-width:820px){
  .info-panel{width:min(270px,calc(100vw - 28px));padding:11px 12px}
  .info-panel h2{font-size:14px;margin:8px 0 5px}
  .info-panel p{font-size:10px;line-height:1.4}
  .research-toggle{width:112px;height:40px;min-width:0;padding:5px 7px;border-radius:12px}
  .bottom-controls{right:8px;bottom:25%;gap:4px}
  .bottom-controls button{min-width:74px;width:74px;height:27px;padding:5px 6px;font-size:5.1px;border-radius:9px}
  .detail-hud{width:min(170px,42vw);padding:9px 10px}
}
@media(max-width:430px){
  .research-toggle{width:104px;height:38px;right:8px}
  .bottom-controls button{width:70px;min-width:70px;height:26px;font-size:4.8px}
}
@media(max-width:360px){
  .research-toggle{width:98px;height:36px}
  .bottom-controls{right:5px}
  .bottom-controls button{width:66px;min-width:66px;height:25px;font-size:4.5px}
}

/* v15.3.1: compact glass roster + collision-proof details */
.research-toggle,.profile,.info-panel,.detail-hud,.bottom-controls button{background:linear-gradient(145deg,rgba(10,29,41,.78),rgba(3,12,20,.90));border-color:rgba(145,219,238,.27);box-shadow:0 10px 24px rgba(0,0,0,.28);backdrop-filter:blur(14px) saturate(115%);}
.research-toggle{min-width:132px;padding:7px 9px;}
.bottom-controls{gap:6px;}
.bottom-controls button{min-width:104px;padding:7px 9px;}
.info-panel{left:50%;width:min(430px,calc(100vw - 140px));}
@media(max-width:820px){.card-carousel{width:100vw;height:128px;bottom:0}.specimen-card{width:60px;height:76px;bottom:8px}.research-toggle{top:84px;right:9px;min-width:122px;padding:6px 8px;border-radius:11px}.research-toggle small{font-size:8px}.research-toggle span{font-size:7px}.research-toggle em{font-size:5.5px}.bottom-controls{right:8px;bottom:24%;gap:5px}.bottom-controls button{min-width:84px;padding:6px 8px;font-size:5.5px;border-radius:9px}.info-panel{left:50%;bottom:28%;width:calc(100vw - 104px);padding:12px 13px;border-radius:14px}.info-panel h2{font-size:16px}.info-panel p{font-size:10px;line-height:1.45}.info-grid{gap:8px;margin-top:10px;padding-top:10px}.info-grid b{font-size:8px}.info-grid span{font-size:5px}.arrow{z-index:120;} }

/* v15.4 performance pass: keep the first paint light and the 3D stage responsive. */
#mainCanvas{contain:layout paint}
@media(max-width:820px){
  #mainCanvas{image-rendering:auto}
  .lab-bg{will-change:auto}
  .card-carousel{contain:layout paint}
}