/* Page-specific bridge from the five research illustrations to the shared stage. */
html[data-interaction-type="model"] body { overflow-x: hidden; overflow-y: auto; }
html[data-interaction-type="model"] .module.model-stage {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  padding: 0;
  overflow: visible;
}
html[data-interaction-type="model"] .model-stage__core {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
}
html[data-interaction-type="model"] .model-stage__core > .model,
html[data-interaction-type="model"] .model-stage__core > .model[data-model],
html[data-interaction-type="model"] .model-stage__core > .model[data-model="drone"]:not(.has-system),
html[data-interaction-type="model"] .model-stage__core > .model[data-model="drone"].has-system {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
}
html[data-interaction-type="model"] .model-stage__core > .model > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
html[data-interaction-type="model"] .model-stage__core > .model-viewport {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: visible;
}
html[data-interaction-type="model"] .model-stage__core .model-viewport > .model[data-model="transformer"] {
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
}
html[data-interaction-type="model"] .model-stage__core .model-viewport > .model > svg {
  display: block;
  width: 100%;
  height: 100%;
}
html[data-interaction-type="model"] .model-stage__title {
  color: var(--ink);
  pointer-events: none;
}
html[data-interaction-type="model"] .model-stage__caption {
  bottom: -30px;
  min-height: 22px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
html[data-interaction-type="model"] .model-stage__caption .model-reference {
  position: static;
  width: auto;
  margin: 0;
  padding: 0;
}
/* Reference credits belong to the overview, not a component or system view. */
html[data-interaction-type="model"] .model-stage:has(.focus-report:not([hidden]), .model.has-system) .model-reference {
  display: none;
}
html[data-interaction-type="model"] .model-stage__panel {
  z-index: 4;
}
html[data-interaction-type="model"] .model-stage .focus-report,
html[data-interaction-type="model"] .model-stage .focus-report.is-expanded {
  position: absolute;
  top: var(--report-y, 16px);
  right: auto;
  bottom: auto;
  left: var(--report-x, 24px);
  z-index: 8;
  display: flex;
  align-items: stretch;
  width: var(--report-width, 272px);
  height: var(--report-height, 320px);
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  scrollbar-gutter: auto;
  animation: none;
  transition: none;
}
html[data-interaction-type="model"] .model-stage .focus-report.is-expanded {
  --reading-column: 800px;
  --reading-gutter: clamp(18px, 2.2vw, 32px);
  --reading-inset: max(var(--reading-gutter), calc((var(--report-width) - var(--reading-column)) / 2));
  --reading-font-size: clamp(15px, 1.2vw, 16px);
  transition: top 280ms ease, left 280ms ease, width 280ms ease, height 280ms ease;
}
html[data-interaction-type="model"] .model-stage .focus-window,
html[data-interaction-type="model"] .model-stage .focus-report.is-expanded .focus-window {
  width: 100%;
  max-width: none;
  height: 100%;
  border-radius: var(--radius-panel);
}
html[data-interaction-type="model"] .model-stage .focus-content {
  overscroll-behavior: contain;
}
/* Reading occupies the center while the component camera keeps its state. */
html[data-interaction-type="model"] .model-page-content.is-reading { overflow: hidden; }
html[data-interaction-type="model"] .module.model-stage.is-reading { padding: 0; }
html[data-interaction-type="model"] .model-stage.is-reading > .model-stage__core { visibility: hidden; }
/* One shared inset aligns the fixed heading and the scrolling reading column. */
html[data-interaction-type="model"] .model-stage .focus-report.is-expanded .focus-toolbar {
  gap: 4px;
  padding: 18px var(--reading-inset) 8px;
  transition: none;
}
html[data-interaction-type="model"] .model-stage .focus-report.is-expanded .focus-toolbar h2 {
  margin: 0;
  font-size: clamp(22px, 1.8vw, 26px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.015em;
}
html[data-interaction-type="model"] .model-stage .focus-report.is-expanded .focus-content {
  min-height: 0;
  padding: 10px var(--reading-inset) 28px;
  font-size: var(--reading-font-size);
  line-height: 1.75;
  overflow: auto;
  transition: none;
}
html[data-interaction-type="model"] .model-stage .focus-report.is-expanded .focus-brief,
html[data-interaction-type="model"] .model-stage .focus-report.is-expanded .focus-details {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
html[data-interaction-type="model"] .model-stage .focus-report.is-expanded .summary {
  margin: 0;
  font-size: var(--reading-font-size);
  line-height: 1.75;
}
html[data-interaction-type="model"] .model-stage .focus-report.is-expanded .focus-tags { margin-top: 14px; gap: 6px; }
html[data-interaction-type="model"] .model-stage .focus-report.is-expanded .focus-tags li { padding: 4px 8px; }
html[data-interaction-type="model"] .model-stage .focus-report.is-expanded section { margin-top: 24px; padding-top: 20px; }
html[data-interaction-type="model"] .model-stage .focus-report.is-expanded h3 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
html[data-interaction-type="model"] .model-stage .focus-report.is-expanded .technical-lesson {
  font-size: var(--reading-font-size);
  line-height: 1.75;
}
html[data-interaction-type="model"] .model-stage .focus-report.is-expanded .lesson-steps { margin-top: 10px; padding-inline-start: 1.4em; }
html[data-interaction-type="model"] .model-stage .focus-report.is-expanded .lesson-steps li { padding-left: .25em; }
html[data-interaction-type="model"] .model-stage .focus-report.is-expanded :is(.lesson-steps, .technical-points) li + li { margin-top: 18px; }
html[data-interaction-type="model"] .model-stage .focus-report.is-expanded :is(.lesson-steps, .technical-points) strong {
  font-size: var(--reading-font-size);
  font-weight: 600;
}
html[data-interaction-type="model"] .model-stage .focus-report.is-expanded :is(.lesson-steps, .technical-points) p {
  margin: 6px 0 0;
  font-size: var(--reading-font-size);
  line-height: 1.75;
}
html[data-interaction-type="model"] .paper-heading,
html[data-interaction-type="model"] .model-scroll-hint { display: none; }
html[data-interaction-type="model"] .paper-tools,
html[data-interaction-type="model"] .paper-footer {
  position: static;
  inset: auto;
  z-index: auto;
  width: auto;
  margin: 0;
  padding: 0;
}
html[data-interaction-type="model"] .paper-tools { display: flex; }
html[data-interaction-type="model"] .paper-footer {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}
html[data-interaction-type="model"] .paper-footer .paper-guide { display: none; }
html[data-interaction-type="model"] .base-config { width: 100%; }
html[data-interaction-type="model"] .config-popover {
  position: static;
  width: 100%;
  max-height: none;
  margin-top: 8px;
  transform: none;
  box-shadow: none;
}
@media (max-width: 1100px) {
  html[data-interaction-type="model"] .module.model-stage:has([data-stage-panel]:not([hidden])) {
    padding-top: calc(var(--stage-height) - var(--stage-top-space) + 48px);
    padding-bottom: 24px;
  }
  html[data-interaction-type="model"] .model-stage .focus-report.is-expanded {
    transition: none;
  }
  html[data-interaction-type="model"] .model-page:has(.model-stage.is-reading) .model-part-nav,
  html[data-interaction-type="model"] .model-stage.is-reading > .model-stage__nav {
    visibility: hidden;
  }
}

@media (max-width: 720px) {
  html[data-interaction-type="model"] .model-stage__caption { bottom: -26px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-interaction-type="model"] .model-stage .focus-report.is-expanded,
  html[data-interaction-type="model"] .model-stage .focus-window,
  html[data-interaction-type="model"] .model-stage .focus-details { transition: none; }
}