/* The desk belongs to the camera composition, not to a cropped wallpaper. */
.brand-mark{padding:0;border:0;box-shadow:none;overflow:hidden;border-radius:11px;background:#050505;flex-shrink:0}
.brand-mark img{display:block;width:100%;height:100%;object-fit:cover}
.room{background-image:url('/assets/office-desk-wide.png');background-position:center bottom;animation:none}
.room-shade{background:linear-gradient(180deg,#03091270 0%,#03091210 25%,transparent 65%)}
.system-group{background:linear-gradient(130deg,color-mix(in srgb,var(--accent) 8%,#111b2238),#0b17202b 70%);backdrop-filter:blur(3px);border-color:color-mix(in srgb,var(--accent) 65%,transparent);box-shadow:inset 0 1px 18px color-mix(in srgb,var(--accent) 8%,transparent),0 0 16px color-mix(in srgb,var(--accent) 14%,transparent),0 15px 32px #0002}
.person-card{background:#14222c6b}.person-name{text-shadow:0 1px 5px #000c;background:#10202d60}
@media(min-width:901px){
 .topbar{height:70px;padding:14px 3.4vw}.dashboard{inset:0;perspective:2000px;pointer-events:none}.dashboard>*{pointer-events:auto}
 .scene-title{top:8dvh;left:11%;right:11%;min-height:48px;justify-content:center;text-align:center}
 .scene-title .eyebrow{font-size:9px;letter-spacing:.25em}.scene-title h1{font-size:clamp(25px,2.3vw,36px)}
 .scene-meta{position:absolute;right:0;bottom:8px;padding:0;font-size:11px}.scene-meta .demo-pill{font-size:9px}
 .spatial-stage{top:max(150px,16dvh);left:10%;right:10%;height:min(49dvh,39vw);bottom:auto;gap:22px 23px;perspective:1800px;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));isolation:isolate}
 .spatial-stage::before,.spatial-stage::after{content:'';position:absolute;z-index:-1;left:-2.5%;width:105%;height:70px;pointer-events:none;border:1px solid #9ac9e647;border-radius:50%;box-shadow:0 0 14px #acd8f314;opacity:.7}
 .spatial-stage::before{top:-28px;border-bottom:0;clip-path:inset(0 0 50% 0)}.spatial-stage::after{bottom:-27px;border-top:0;clip-path:inset(50% 0 0 0)}
 .system-group{--curve:0deg;--depth:0px;--lift:0px;transform:translateY(var(--lift)) translateZ(var(--depth)) rotateY(var(--curve));animation:spatial-enter .85s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--order)*80ms);border-radius:26px;padding:12px 13px 10px}
 .group-sound,.group-analytical{--curve:7deg;--depth:16px;--lift:3px;transform-origin:right center}
 .group-smell,.group-oral{--curve:-7deg;--depth:16px;--lift:3px;transform-origin:left center}
 .group-skin,.group-visual{--depth:-8px;--lift:9px}.group-analytical{margin-left:12%}
 .group-heading h2{font-size:14px}.group-heading{padding-bottom:9px}.person-name{font-size:14px;min-height:34px}
 .person-card,.group-visual .person-card,.group-oral .person-card{flex:0 1 auto;width:auto;height:100%;aspect-ratio:.82;max-width:190px}
 .scene-footer{top:auto;bottom:3.8dvh;left:24%;right:24%;justify-content:center;flex-direction:column;gap:4px;text-align:center;background:#101a2166;border-color:#d4e5ed22;backdrop-filter:blur(6px);font-size:11px;padding:8px 12px}
 .scene-footer span:last-child{font-size:10px;opacity:.75}
 .filtered .system-group{--curve:0deg;--depth:0px;--lift:0px;transform:none;margin:0;height:100%;max-height:300px}
 .filtered::before,.filtered::after{display:none}
 dialog{inset:12dvh 0 auto;margin:0 auto;height:min(59dvh,610px);width:min(1120px,84vw);max-height:72dvh}
 .modal-open .spatial-stage{filter:blur(2px);opacity:.2}
}
@media(min-width:901px) and (max-aspect-ratio:27/20){
 .room{background-image:url('/assets/office-desk-tall.png');background-size:cover;background-position:center bottom}
 .scene-title{top:10.8dvh}.spatial-stage{top:19dvh;height:min(44dvh,39vw);left:8%;right:8%}
 .scene-title{left:9%;right:9%}.scene-title h1{font-size:29px}.scene-meta{position:static;margin-left:25px;align-self:flex-end;padding-bottom:5px}
 .scene-footer{bottom:4.5dvh}.system-group{border-radius:23px}
}

@media(min-width:901px) and (max-height:760px){
 .topbar{height:56px;padding-top:8px;padding-bottom:8px}.brand-mark{height:36px;width:36px}.scene-title{top:8.5dvh;min-height:40px}.scene-title h1{font-size:25px}.scene-title .eyebrow{display:none}.spatial-stage{top:18dvh;height:49dvh;gap:14px 20px}.system-group{padding:8px 9px 6px}.group-heading{padding-bottom:6px}.group-heading h2{font-size:13px}.group-heading svg{width:18px;height:18px}.person-name{font-size:13px;min-height:29px}.scene-footer{bottom:3dvh;padding:6px 10px}
 dialog{inset:10dvh 0 auto;height:69dvh;padding:22px}
}
@media(max-width:900px){
 .room{background-image:url('/assets/office-desk-tall.png');background-size:cover;background-position:center bottom}
 .room-shade{background:linear-gradient(#07101b88,#07101b20 70%,transparent)}
 .dashboard{padding-bottom:38dvh}.system-group{background:linear-gradient(130deg,color-mix(in srgb,var(--accent) 8%,#111b2255),#0b172044)}
 .scene-footer{background:#0b17207a}.spatial-stage::before,.spatial-stage::after{display:none}
}
@keyframes spatial-enter{from{opacity:0;transform:translateY(calc(var(--lift) + 18px)) translateZ(calc(var(--depth) - 40px)) rotateY(var(--curve));filter:blur(4px)}to{opacity:1;transform:translateY(var(--lift)) translateZ(var(--depth)) rotateY(var(--curve));filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.system-group{animation:none!important}.spatial-stage{transform:none!important}}