.environment-study { padding-top: 0; padding-bottom: var(--report-space); }
.environment-study-heading { display: grid; grid-template-columns: .68fr 1fr; gap: var(--report-gap); align-items: end; margin-bottom: 44px; }
.environment-study-heading h2 { margin: 0; }
.environment-study-heading>p { max-width: 56ch; font-size: var(--step-body); line-height: 1.5; margin: 0; }
.environment-figure { margin: 0; }
.environment-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 20px; background: var(--surface); }
.environment-study .environment-toolbar>p { font-size: var(--step-small); }
.view-tabs { display: flex; gap: 6px; }
.view-tabs button { border: 0; background: transparent; color: var(--ink); font-size: var(--step-small); padding: 9px 14px; transition: transform .2s var(--ease), background .2s, color .2s; }
.view-tabs button[aria-selected=true] { background: var(--ink); color: var(--bg); }
.view-tabs button:hover { background: var(--bg); color: var(--ink); }
.view-tabs button:active { transform: translateY(2px); }
.environment-stage { height: clamp(390px, 36vw, 600px); background: var(--surface); position: relative; overflow: hidden; }
.environment-view { position: absolute; inset: 0; }
.environment-view[hidden] { display: none; }
#environment-viewport { position: absolute; inset: 0; }
#environment-viewport canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.environment-fallback { width: 100%; height: 100%; object-fit: contain; }
.environment-study .environment-loading { position: absolute; top: 24px; left: 24px; font-size: var(--step-small); }
.capture-inset { position: absolute; left: 24px; bottom: 24px; width: clamp(160px, 19vw, 290px); background: var(--bg); }
.capture-inset img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.capture-inset figcaption { padding: 9px 12px; font-size: var(--step-small); }
.environment-study .orbit-hint { position: absolute; top: 24px; right: 24px; font-size: var(--step-small); color: var(--ink); background: var(--bg); padding: 8px 12px; }
.reset-view { position: absolute; right: 24px; bottom: 24px; background: var(--bg); border: 0; font-size: var(--step-small); padding: 10px 16px; color: var(--ink); }
.stage-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 53%; }
.environment-study .stage-photo-caption { position: absolute; bottom: 24px; left: 24px; padding: 9px 13px; background: var(--bg); font-size: var(--step-small); }
.environment-caption { display: flex; justify-content: space-between; gap: 24px; font-size: var(--step-small); padding-top: 14px; color: var(--muted); }
@media(max-width: 1050px) {
  .environment-toolbar { flex-wrap: wrap; }
}
@media(max-width: 760px) {
  .environment-study-heading { grid-template-columns: 1fr; gap: 26px; margin-bottom: 32px; }
  .environment-stage { height: 410px; }
  .environment-caption>span:nth-child(2) { display: none; }
}
@media(max-width: 600px) {
  .environment-toolbar { padding: 14px 12px; gap: 12px; }
  .view-tabs { gap: 0; width: 100%; }
  .view-tabs button { padding: 9px 11px; flex: 1; }
  .environment-stage { height: 330px; }
  .capture-inset { width: 140px; left: 12px; bottom: 12px; }
  .capture-inset figcaption { line-height: 1.3; padding: 7px 8px; }
  .environment-study .orbit-hint { top: 12px; right: 12px; padding: 6px 8px; }
  .reset-view { right: 12px; bottom: 12px; }
  .environment-caption { line-height: 1.45; }
  .environment-study .stage-photo-caption { bottom: 12px; left: 12px; right: 12px; }
}
@media(prefers-reduced-motion: reduce) {
  .view-tabs button { transition: none; }
  .view-tabs button:active { transform: none; }
}