:root { color-scheme: dark; }
body { margin: 0; background: #0b0b0b; color: #d8d8d8; font: 15px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.page { max-width: 1120px; margin: 0 auto; padding: 24px 16px 40px; }
.header h1 { font-size: 22px; margin: 0 0 6px; color: #f0f0f0; }
.header p { margin: 0 0 18px; color: #9a9a9a; max-width: 80ch; }
.stage { position: relative; background: #000; border: 1px solid #222; aspect-ratio: 16 / 10; overflow: hidden; }
.stage .view-3d { position: absolute; inset: 0; }
.stage .view-3d, .stage .view-classic { display: flex; flex-direction: column; }
.stage .dash-graph { flex: 1; min-height: 0; width: 100%; }
.stage .js-plotly-plot, .stage .plot-container { width: 100%; height: 100%; }
.view-label { flex: none; padding: 8px 12px; background: #141414; border-bottom: 1px solid #262626; color: #bdbdbd; font-size: 13px; line-height: 1.35; }
.view-label .view-title { color: #f0f0f0; font-weight: 600; margin-right: 10px; }
.view-label .view-title::before { content: "rendered by "; color: #8a8a8a; font-weight: 400; }
/* the inset shows only the title; the detail text appears on the main view */
.stage .view-classic .view-label, .stage.swapped .view-3d .view-label { padding: 4px 8px; font-size: 11px; }
.stage .view-classic .view-detail, .stage.swapped .view-3d .view-detail { display: none; }
.stage.swapped .view-classic .view-label { padding: 8px 12px; font-size: 13px; }
.stage.swapped .view-classic .view-detail { display: inline; }
.stage .view-classic { position: absolute; right: 12px; bottom: 12px; width: 32%;
  border: 1px solid #333; background: #000; box-shadow: 0 4px 24px rgba(0,0,0,.6); }
.stage.swapped .view-3d { inset: auto 12px 12px auto; width: 32%; border: 1px solid #333; z-index: 1; }
/* the inset's graph keeps the 16:10 shape under its caption */
.stage .view-classic .dash-graph, .stage.swapped .view-3d .dash-graph { flex: none; aspect-ratio: 16 / 10; }
.stage.swapped .view-classic .dash-graph { flex: 1; aspect-ratio: auto; }
.stage.swapped .view-classic { inset: 0; width: auto; border: 0; box-shadow: none; }
/* hide with visibility, not display: the graph keeps its size, so showing it
   again needs no plotly resize (which drew one frame at the wrong size) */
.stage.inset-hidden:not(.swapped) .view-classic, .stage.inset-hidden.swapped .view-3d { visibility: hidden; pointer-events: none; }
.buttons { display: flex; gap: 8px; }
#doom-mouse { color: #8a8a8a; }
.stage.mouse-on { cursor: none; outline: 1px solid #4a7; }
.swap { background: #1c1c1c; color: #ddd; border: 1px solid #444; padding: 3px 10px; font: inherit; cursor: pointer; border-radius: 3px; }
.swap:hover { background: #2a2a2a; }
.stage .overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.75); color: #ccc; font-size: 18px; pointer-events: none; z-index: 2; }
.stage .overlay.hidden { display: none; }
.heatmaplayer image { image-rendering: pixelated; }
.footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; color: #8a8a8a; font-size: 13px; flex-wrap: wrap; }