@a2f0/skyline 0.1.6 → 0.2.1

package/site/study-viewer.js

@@ -1,21 +1,52 @@
 import * as THREE from "./vendor/three-r186.js";
+// The box a pointer-placed overlay is positioned in: where it is on screen, its size in CSS
+// pixels, and how much a host's transform scales it, so a pointer's client coordinates
+// become a place inside it: (x - left) / scaleX.
+export function frameBox(frame) {
+    if (!frame)
+        return { left: 0, top: 0, width: innerWidth, height: innerHeight, scaleX: 1, scaleY: 1 };
+    const box = frame.getBoundingClientRect();
+    return {
+        left: box.left, top: box.top, width: frame.clientWidth, height: frame.clientHeight,
+        scaleX: frame.offsetWidth ? box.width / frame.offsetWidth : 1, scaleY: frame.offsetHeight ? box.height / frame.offsetHeight : 1,
+    };
+}
+// Releases the GPU resources an object tree holds: geometries, materials and their textures.
+export function disposeObject(object) {
+    object.traverse((child) => {
+        // A light's shadow map is a render target of its own.
+        if (child.isDirectionalLight)
+            child.dispose();
+        const mesh = child;
+        mesh.geometry?.dispose();
+        const materials = mesh.material ? [mesh.material].flat() : [];
+        for (const material of materials) {
+            for (const value of Object.values(material))
+                if (value?.isTexture)
+                    value.dispose();
+            material.dispose();
+        }
+    });
+}
 export function createBuildingStudy({ models, defaultView = "quarter", views = {
     front: { azimuth: Math.PI / 4, polar: Math.PI / 2 - 0.035, label: "front view" },
     quarter: { azimuth: Math.PI / 4 + 0.22, polar: Math.PI / 2 - 0.15, label: "three-quarter view" },
     side: { azimuth: Math.PI * 0.75, polar: Math.PI / 2 - 0.12, label: "side view" },
-}, fov = 32, near = 1, far = 2000, clippingMargin = null, minimumDistanceRatio = 0.48, maximumDistanceRatio = 2, minimumZoom = 0.5, maximumZoom = 4, enablePan = false, target = [0, 85, 0], minimumCameraHeight = null, fit = { height: 230, width: 98 }, platform = { width: 76, depth: 76 }, lightPosition = [-110, 240, 170], shadowCamera = { left: -140, right: 140, top: 160, bottom: -160, near: 1, far: 600 }, extras = [], layouts = null, initialLayout = "original", onLayoutChange = () => { }, labels = [], turntable = false, }) {
+}, fov = 32, near = 1, far = 2000, clippingMargin = null, minimumDistanceRatio = 0.48, maximumDistanceRatio = 2, minimumZoom = 0.5, maximumZoom = 4, enablePan = false, target = [0, 85, 0], minimumCameraHeight = null, fit = { height: 230, width: 98 }, platform = { width: 76, depth: 76 }, lightPosition = [-110, 240, 170], shadowCamera = { left: -140, right: 140, top: 160, bottom: -160, near: 1, far: 600 }, extras = [], layouts = null, initialLayout = "original", onLayoutChange = () => { }, labels = [], turntable = false, root = document, frame = null, signal = new AbortController().signal, onReady = () => { }, onUnavailable = () => { }, }) {
     const original = { models, extras, fit, target, platform, lightPosition, shadowCamera, clippingMargin };
     let layout = "original";
-    const viewport = document.querySelector("#viewport");
-    const canvas = document.querySelector("#building");
-    const tooltip = document.querySelector("#tooltip");
+    const document = root instanceof Document ? root : root.ownerDocument;
+    const viewport = root.querySelector("#viewport");
+    const canvas = root.querySelector("#building");
+    const tooltip = root.querySelector("#tooltip");
     // The studies name the active view in the viewport; the full-screen skyline leaves it to
     // the pressed button.
-    const viewLabel = document.querySelector("#view-label");
-    const wireframeButton = document.querySelector("#wireframe");
-    const turntableButton = document.querySelector("#turntable");
-    const motionStatus = document.querySelector("#motion-status");
+    const viewLabel = root.querySelector("#view-label");
+    const wireframeButton = root.querySelector("#wireframe");
+    const turntableButton = root.querySelector("#turntable");
+    const motionStatus = root.querySelector("#motion-status");
     const reducedMotion = matchMedia("(prefers-reduced-motion: reduce)");
+    const listening = { signal };
     const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
     renderer.setPixelRatio(Math.min(devicePixelRatio || 1, 2));
     renderer.shadowMap.enabled = true;
@@ -108,8 +139,30 @@ export function createBuildingStudy({ models, defaultView = "quarter", views = {
     let frameDistance = null;
     let frameOffset = [0, 0];
     let frameAlign = "center";
+    const resizing = new ResizeObserver(() => resize());
+    let api;
+    // Leaving releases what a closed page or a removed frame used to: the next frame, the
+    // observer, the orbit controls' listeners, and the renderer with its WebGL context, its
+    // GPU geometry, materials and textures. Listeners go with the signal. It is set up before
+    // anything else, so a study that fails to start part way is released too.
+    signal.addEventListener("abort", () => {
+        cancelAnimationFrame(frameId);
+        frameId = 0;
+        turning = false;
+        resizing.disconnect();
+        controls.dispose();
+        for (const object of new Set([scene, ...original.models.map((model) => model.building), ...original.extras,
+            ...Object.values(layouts ?? {}).flatMap((entry) => [...entry.models?.map((model) => model.building) ?? [], ...entry.extras ?? []])]))
+            disposeObject(object);
+        renderer.dispose();
+        renderer.forceContextLoss();
+        labelLayer.remove();
+        if (api && root === document && window.__buildingStudy === api)
+            delete window.__buildingStudy;
+        delete canvas.__buildingStudy;
+    }, { once: true });
     function requestRender() {
-        if (!frameId && !document.hidden)
+        if (!frameId && !document.hidden && !signal.aborted)
             frameId = requestAnimationFrame(render);
     }
     function render(time) {
@@ -153,7 +206,7 @@ export function createBuildingStudy({ models, defaultView = "quarter", views = {
         activeView = name;
         if (viewLabel)
             viewLabel.textContent = views[name]?.label || "orbit view";
-        document.querySelectorAll("[data-view]").forEach((button) => {
+        root.querySelectorAll("[data-view]").forEach((button) => {
             button.setAttribute("aria-pressed", String(button.dataset["view"] === name));
         });
     }
@@ -358,16 +411,19 @@ export function createBuildingStudy({ models, defaultView = "quarter", views = {
         if (selectedModel) {
             const data = selectedModel.building.userData["geography"];
             tooltip.textContent = data ? `${data.name} · ${data.height} m${data.tipHeight !== data.height ? ` / tip ${data.tipHeight} m` : ""}` : selectedModel.building.name;
-            const tooltipBounds = tooltip.getBoundingClientRect();
-            const x = event.clientX + 18 + tooltipBounds.width > innerWidth - 6 ? event.clientX - tooltipBounds.width - 18 : event.clientX + 18;
-            const y = event.clientY + 18 + tooltipBounds.height > innerHeight - 6 ? event.clientY - tooltipBounds.height - 18 : event.clientY + 18;
+            // Beside the pointer, turned back from the frame's right and bottom edges, in the
+            // frame's own CSS pixels.
+            const width = tooltip.offsetWidth, height = tooltip.offsetHeight, box = frameBox(frame);
+            const pointerX = (event.clientX - box.left) / box.scaleX, pointerY = (event.clientY - box.top) / box.scaleY;
+            const x = pointerX + 18 + width > box.width - 6 ? pointerX - width - 18 : pointerX + 18;
+            const y = pointerY + 18 + height > box.height - 6 ? pointerY - height - 18 : pointerY + 18;
             tooltip.style.left = `${Math.max(6, x)}px`;
             tooltip.style.top = `${Math.max(6, y)}px`;
         }
-    }, { passive: true });
-    canvas.addEventListener("pointerleave", clearHighlight);
-    canvas.addEventListener("blur", clearHighlight);
-    window.addEventListener("scroll", clearHighlight, { passive: true });
+    }, { passive: true, signal });
+    canvas.addEventListener("pointerleave", clearHighlight, listening);
+    canvas.addEventListener("blur", clearHighlight, listening);
+    window.addEventListener("scroll", clearHighlight, { passive: true, signal });
     canvas.addEventListener("keydown", (event) => {
         if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "+", "=", "-", "Home"].includes(event.key))
             return;
@@ -404,16 +460,16 @@ export function createBuildingStudy({ models, defaultView = "quarter", views = {
         controls.update();
         markView(null);
         clearHighlight();
-    });
-    document.querySelectorAll("[data-view]").forEach((button) => button.addEventListener("click", () => setView(button.dataset["view"])));
-    document.querySelector("#reset").addEventListener("click", () => setView(layouts?.[layout]?.defaultView || defaultView));
+    }, listening);
+    root.querySelectorAll("[data-view]").forEach((button) => button.addEventListener("click", () => setView(button.dataset["view"]), listening));
+    root.querySelector("#reset").addEventListener("click", () => setView(layouts?.[layout]?.defaultView || defaultView), listening);
     wireframeButton.addEventListener("click", () => {
         wireframe = !wireframe;
         models.forEach((model) => model.setWireframe(wireframe));
         wireframeButton.setAttribute("aria-pressed", String(wireframe));
         requestRender();
-    });
-    turntableButton.addEventListener("click", () => setTurning(!turning));
+    }, listening);
+    turntableButton.addEventListener("click", () => setTurning(!turning), listening);
     function setLayout(name) {
         if (name === layout || (name !== "original" && !layouts?.[name]))
             return;
@@ -458,11 +514,11 @@ export function createBuildingStudy({ models, defaultView = "quarter", views = {
         requestRender();
     }
     function markLayout(name) {
-        document.querySelectorAll("[data-layout]").forEach((button) => button.setAttribute("aria-pressed", String(button.dataset["layout"] === name)));
+        root.querySelectorAll("[data-layout]").forEach((button) => button.setAttribute("aria-pressed", String(button.dataset["layout"] === name)));
     }
-    document.querySelectorAll("[data-layout]").forEach((button) => button.addEventListener("click", () => setLayout(button.dataset["layout"])));
+    root.querySelectorAll("[data-layout]").forEach((button) => button.addEventListener("click", () => setLayout(button.dataset["layout"]), listening));
     function updateCameraHint() {
-        document.querySelector("#camera-hint").innerHTML = reducedMotion.matches
+        root.querySelector("#camera-hint").innerHTML = reducedMotion.matches
             ? '<span class="wide-hint">Use the view buttons or arrow keys to inspect<br />+ / − zoom · Home resets</span><span class="narrow-hint">Use the view buttons to inspect</span>'
             : controls.enablePan
                 ? '<span class="wide-hint">Drag to orbit · shift-drag to pan · scroll to zoom<br />Arrow keys rotate · + / − zoom · Home resets</span><span class="narrow-hint">Drag to orbit · two fingers pan / zoom</span>'
@@ -478,7 +534,7 @@ export function createBuildingStudy({ models, defaultView = "quarter", views = {
         updateCameraHint();
         clearHighlight();
     }
-    reducedMotion.addEventListener("change", updateMotionPreference);
+    reducedMotion.addEventListener("change", updateMotionPreference, listening);
     document.addEventListener("visibilitychange", () => {
         lastTime = 0;
         if (document.hidden) {
@@ -487,17 +543,16 @@ export function createBuildingStudy({ models, defaultView = "quarter", views = {
         }
         else
             requestRender();
-    });
+    }, listening);
     canvas.addEventListener("webglcontextlost", (event) => {
         event.preventDefault();
         setTurning(false);
-        const loading = document.querySelector("#loading");
+        const loading = root.querySelector("#loading");
         loading.textContent = "The graphics context was interrupted. Reload to restore the 3D preview.";
         loading.hidden = false;
-        if (window.parent !== window)
-            window.parent.postMessage({ type: "skyline:unavailable" }, location.origin);
-    });
-    new ResizeObserver(resize).observe(viewport);
+        onUnavailable();
+    }, listening);
+    resizing.observe(viewport);
     updateMotionPreference();
     // Open on the default view with its own frame, target, and eye distance, if it sets any.
     setView(defaultView);
@@ -512,8 +567,8 @@ export function createBuildingStudy({ models, defaultView = "quarter", views = {
     if (turntable)
         setTurning(true);
     renderer.render(scene, camera);
-    document.querySelector("#loading").hidden = true;
-    window.__buildingStudy = {
+    root.querySelector("#loading").hidden = true;
+    api = {
         ready: true,
         get modelName() { return models[0].building.name; },
         get modelNames() { return models.map((model) => model.building.name); },
@@ -600,7 +655,10 @@ export function createBuildingStudy({ models, defaultView = "quarter", views = {
             return { min: min.clone().add(base.position).toArray(), max: max.clone().add(base.position).toArray() };
         },
     };
-    if (window.parent !== window)
-        window.parent.postMessage({ type: "skyline:ready" }, location.origin);
+    // A study's own page publishes it on its window; wherever it renders, its canvas holds it.
+    if (root === document)
+        window.__buildingStudy = api;
+    Object.defineProperty(canvas, "__buildingStudy", { value: api, configurable: true });
+    onReady();
     return { setLayout, setView, requestRender, buildingAt };
 }

package/site/study.css

@@ -56,28 +56,44 @@ button:disabled { cursor: default; opacity: 0.35; }
 .study-annotations [data-placement="below"] { transform: translate(-50%, 0); margin-top: 12px; }
 .study-annotations [data-placement="right"] { transform: translate(0, -50%); margin-top: 0; margin-left: 14px; }
 .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
-/* A building's detail fills its window: the model takes the height the header and toolbar
-   leave it, beside its notes, or above them in a narrow or short window, where the page
-   scrolls to them. Every height is set by the window, never by the canvas it holds.
-   Floated over the skyline viewer, the viewer's panel closes it, so the header leaves the
-   panel's close button its corner and drops the page's own links. */
-.building-detail { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
-.building-detail header { padding: 22px 5vw 16px; }
-.building-detail h1 { font-size: clamp(24px, 3vw, 38px); }
-.building-detail main { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 270px); grid-template-rows: minmax(0, 1fr); gap: 0 28px; width: 100%; margin: 0 auto; }
+/* A building's detail fills its box, the page or the skyline's panel: the model takes the
+   height the header and toolbar leave it, beside its notes, or above them in a narrow or
+   short box, which scrolls to them. Every height is set by the box, never by the canvas it
+   holds. The box (.detail-root) is a container, so the detail lays itself out by its own
+   size wherever it renders, and contains its layout, so its fixed tooltip is placed in it. Floated over the 3D skyline, the panel
+   closes it, so the header leaves the panel's close button its corner and drops the page's
+   own links. */
+body:has(> .detail-root) { height: 100vh; height: 100dvh; }
+.detail-root { position: relative; height: 100%; container: detail / size; contain: layout; color-scheme: dark; background: #080808; color: #ddd; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+/* Its scrolling stays in the detail, rather than carrying on into a host page beneath. */
+.detail-frame { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
+.building-detail { display: flex; flex-direction: column; height: 100%; }
+.building-detail header { padding: 22px 5cqw 16px; }
+.building-detail h1 { font-size: clamp(24px, 3cqw, 38px); }
+.building-detail main { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 270px); grid-template-rows: minmax(0, 1fr); gap: 0 28px; width: 100%; margin: 0 auto; padding: 0 5cqw 24px; }
 .detail-model { display: flex; flex-direction: column; min-height: 0; }
 .building-detail .viewport { flex: 1 1 0; height: auto; min-height: 280px; border-top: 1px solid #292929; border-bottom: 1px solid #292929; }
 .building-detail .notes { display: block; min-height: 0; overflow-y: auto; border-top: 1px solid #292929; padding-top: 4px; }
 .framed .building-detail header { padding-right: 60px; }
 .framed .building-detail .study-links { display: none; }
-@media (max-width: 799px), (max-height: 499px) {
-  .building-detail { height: auto; min-height: 100vh; min-height: 100dvh; }
+@container detail (max-width: 799px) or (max-height: 499px) {
+  .building-detail { height: auto; min-height: 100%; }
   .building-detail main, .detail-model { display: block; }
-  .building-detail .viewport { height: clamp(300px, 62vh, 560px); }
+  .building-detail .viewport { height: clamp(300px, 62cqh, 560px); }
   .building-detail .notes { overflow: visible; border-top: 0; padding-top: 0; }
 }
+@container detail (max-width: 600px) {
+  .building-detail header { flex-wrap: wrap; gap: 18px; }
+  .building-detail h1 { max-width: 300px; }
+  .building-detail .view-label { top: 34px; left: 10px; right: auto; font-size: 9px; }
+  .building-detail .hint { font-size: 9px; }
+  .building-detail .wide-hint { display: none; }
+  .building-detail .narrow-hint { display: inline; }
+  .building-detail button { padding: 12px 11px; }
+  .building-detail .study-links { align-items: start; flex-direction: row; flex-wrap: wrap; gap: 18px; }
+}
 /* A building's context menu: detail and any lighting choices, scrollable on short screens. */
-.context-menu { position: fixed; z-index: 4; box-sizing: border-box; min-width: 160px; max-width: min(280px, calc(100vw - 8px)); max-height: calc(100dvh - 8px); overflow-y: auto; padding: 4px; border: 1px solid #393939; border-radius: 3px; background: #080808f2; box-shadow: 0 10px 30px #000000cc; font-size: 11px; }
+.context-menu { position: fixed; z-index: 4; box-sizing: border-box; min-width: 160px; max-width: min(280px, calc(100cqw - 8px)); max-height: calc(100cqh - 8px); overflow-y: auto; overscroll-behavior: contain; padding: 4px; border: 1px solid #393939; border-radius: 3px; background: #080808f2; box-shadow: 0 10px 30px #000000cc; font-size: 11px; }
 .context-menu-title { margin: 0; padding: 5px 8px 6px; color: #858585; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
 .context-menu :is([role="menuitem"], [role="menuitemradio"]) { display: block; box-sizing: border-box; width: 100%; min-height: 32px; margin: 0; padding: 7px 8px; border: 0; border-radius: 2px; background: none; color: #ddd; font: inherit; text-align: left; text-decoration: none; white-space: normal; }
 .context-menu :is([role="menuitem"], [role="menuitemradio"]):is(:hover, :focus) { background: #202020; color: #fff; }
@@ -86,19 +102,24 @@ button:disabled { cursor: default; opacity: 0.35; }
 .context-menu [role="menuitemradio"][aria-checked="true"]::before { content: "●"; }
 .context-menu :focus-visible { outline-offset: -1px; }
 /* The detail its item floats over the skyline: centred in the scene above the control bar,
-   below anything that lies over the frame's top, as the skyline viewer's controls do, which
-   set --viewer-controls. The menu stays above it, so every building's menu can replace it. */
+   below anything that lies over the scene's top, as the site's toolbar does, which sets
+   --viewer-controls. The menu stays above it, so every building's menu can replace it. The
+   detail renders in a shadow root of its own, inside .detail-host. */
 .detail-panel { position: absolute; z-index: 3; inset: calc(var(--viewer-controls, 0px) + 12px) 12px 12px; width: min(1040px, calc(100% - 24px)); height: min(760px, calc(100% - var(--viewer-controls, 0px) - 24px)); max-width: none; max-height: none; margin: auto; padding: 0; overflow: hidden; border: 1px solid #393939; border-radius: 3px; background: #080808; color: #ddd; box-shadow: 0 24px 80px #000000e6; }
-.detail-panel[open] { animation: detail-in 0.18s cubic-bezier(0.2, 0.7, 0.2, 1); }
+.detail-panel:not([hidden]) { animation: detail-in 0.18s cubic-bezier(0.2, 0.7, 0.2, 1); }
 @keyframes detail-in { from { opacity: 0; scale: 0.98; } }
-.detail-panel iframe { display: block; width: 100%; height: 100%; border: 0; }
-.detail-panel .detail-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; font-size: 18px; line-height: 1; }
+.detail-panel .detail-host { display: block; width: 100%; height: 100%; }
+.detail-panel .detail-close { position: absolute; z-index: 1; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; font-size: 18px; line-height: 1; }
 .detail-panel .detail-close:focus-visible { outline-offset: 2px; }
-/* The skyline viewer's full-screen 3D mode fills its frame above a control bar docked to
-   the bottom, and stays transparent, so the viewer's stars show above the towers. The
-   skyline stands on the bar, as the drawing stands on the viewer's bottom edge. */
-:root:has(.skyline-3d) { background: transparent; }
-.skyline-3d { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
+/* The skyline viewer's full-screen 3D mode fills its box, its own page or the viewer's
+   shadow root, above a control bar docked to the bottom, and stays transparent, so the
+   viewer's stars show above the towers. The skyline stands on the bar, as the drawing stands
+   on the viewer's bottom edge. The box is a container, so the scene lays itself out by its
+   own size wherever it renders, and its layout containment makes it the box its fixed menus
+   and tooltip are placed in, wherever the host puts the viewer. */
+:root:has(body.skyline-3d) { background: transparent; }
+.skyline-3d { display: flex; flex-direction: column; height: 100%; overflow: hidden; container: skyline / size; contain: layout; --viewer-controls: 0px; color-scheme: dark; color: #ddd; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+body.skyline-3d { height: 100vh; height: 100dvh; }
 .skyline-3d main.viewport { flex: 1 1 auto; min-height: 0; height: auto; max-width: none; margin: 0; padding: 0; background: none; }
 .skyline-3d canvas { height: 100%; }
 .skyline-3d .study-annotations { inset: 0; }
@@ -106,7 +127,7 @@ button:disabled { cursor: default; opacity: 0.35; }
    appears before the model graph loads; errors replace it with the normal loading text.
    Its baseline stands on the toolbar. Scaled strokes and glow keep the outline legible. */
 .skyline-3d .loading:has(.skyline-trace) { inset: 0; margin: 0; display: grid; place-items: end center; padding: 32px 24px 0; pointer-events: none; }
-.skyline-trace { display: block; width: min(240px, calc(100% / 3)); max-height: 14vh; overflow: visible; fill: none; stroke: #ddd; stroke-width: 4.2; stroke-linejoin: round; stroke-linecap: round; }
+.skyline-trace { display: block; width: min(240px, calc(100% / 3)); max-height: 14cqh; overflow: visible; fill: none; stroke: #ddd; stroke-width: 4.2; stroke-linejoin: round; stroke-linecap: round; }
 .skyline-trace-rail { opacity: 0.08; }
 .skyline-trace-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: skyline-trace 4s linear infinite; }
 .skyline-trace-tip { stroke: #fff; stroke-width: 6.6; stroke-dasharray: 0.008 0.992; stroke-dashoffset: 0.008; filter: drop-shadow(0 0 9px #ffffff99); animation: skyline-trace-tip 4s linear infinite; }
@@ -160,30 +181,37 @@ button:disabled { cursor: default; opacity: 0.35; }
 .menu-toggle[aria-expanded="true"] svg { rotate: 30deg; }
 /* At desktop widths the badges share the display row, so opening the controls
    keeps the canvas height unchanged. Smaller screens retain 36px touch targets. */
-@media (min-width: 1440px) {
+@container skyline (min-width: 1440px) {
   .celebration-controls { flex-basis: auto; flex-wrap: nowrap; }
   .celebration-caption { display: none; }
   .control-bar .celebration-controls button { width: 28px; height: 28px; padding: 2px; }
   .celebration-controls svg { width: 20px; height: 20px; }
 }
-@media (max-width: 1439px) {
+@container skyline (max-width: 1439px) {
   .control-bar { grid-template-columns: auto auto; grid-template-areas: "menu menu" "views display"; justify-content: space-between; }
   .control-bar .menu-toggle { justify-self: center; }
 }
-@media (max-width: 1023px) {
+@container skyline (max-width: 1023px) {
   .control-bar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "menu" "views" "display"; }
   .control-bar .button-group { justify-self: center; justify-content: center; --fold: inset(0 50%); }
   .celebration-controls { justify-content: center; }
 }
 @media (prefers-reduced-motion: reduce) {
   .menu-toggle svg { transition: none; }
-  .detail-panel[open] { animation: none; }
+  .detail-panel:not([hidden]) { animation: none; }
   .skyline-trace-line { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0.65; }
   .skyline-trace-tip { display: none; animation: none; }
 }
-@media (max-width: 600px) {
+@container skyline (max-width: 600px) {
   .skyline-trace { stroke-width: 8.4; }
   .skyline-trace-tip { stroke-width: 12; }
+  .skyline-3d .hint { font-size: 9px; }
+  .skyline-3d .wide-hint { display: none; }
+  .skyline-3d .narrow-hint { display: inline; }
+  .control-bar button { font-size: 10px; }
+}
+/* The studies' pages lay themselves out by the window. */
+@media (max-width: 600px) {
   .layout-controls { align-items: start; flex-direction: column; gap: 12px; }
   header { padding: 24px 5vw; flex-wrap: wrap; gap: 18px; }
   h1 { max-width: 300px; }
@@ -200,5 +228,4 @@ button:disabled { cursor: default; opacity: 0.35; }
   .study-links { align-items: start; flex-direction: row; flex-wrap: wrap; gap: 18px; }
   .skyline-study .reference { height: 360px; }
   .skyline-study .viewport { height: 480px; }
-  .control-bar button { font-size: 10px; }
 }

package/site/three-engine.js

@@ -0,0 +1,12 @@
+let provided;
+/**
+ * Offers a host's engine to the scene. The page's first scene takes the engine once, when its
+ * code first loads: an engine offered later, or by a second instance, is not used.
+ */
+export function provideThree(three) {
+    provided ??= Promise.resolve(three);
+}
+/** The host's engine, if one was offered. */
+export function providedThree() {
+    return provided;
+}