/* One stable frame: the artwork changes, while the reading and control lanes stay put. */
.runtime-section{padding:0 var(--edge);scroll-margin-top:0}
.runtime-window{position:relative;isolation:isolate;container-type:size;overflow:clip;border-radius:var(--radius);height:calc(100svh - 110px - var(--edge));min-height:620px;background:#94b0cc;color:#fff;--overview-height:min(100cqh,110cqw);--overview-top:calc((100cqh - var(--overview-height)) / 2)}
.runtime-window{overflow-anchor:none}
.runtime-stage{position:absolute;inset:0;overflow:hidden;pointer-events:none}
/* Reuse the empty sky at the left of the original painting. It stays in place
   under every view, with no sampled color gradient or regenerated background. */
.runtime-sky{position:absolute;inset:0;overflow:hidden}
.runtime-sky img{position:absolute;width:175.4386%;height:104.712%;max-width:none;left:-3.5088%;top:-1.5707%}
.runtime-overview{position:absolute;right:0;top:var(--overview-top);height:var(--overview-height);width:auto;max-width:none;opacity:1;transform:scale(1);transform-origin:82% var(--runtime-origin,25%);transition:opacity .65s ease,transform 1s cubic-bezier(.2,.75,.25,1);mask-image:linear-gradient(90deg,transparent,#000 20%)}
.runtime-mobile-stack{display:none}
.runtime-detail{position:absolute;inset:0;opacity:0;transform:scale(.94);transform-origin:70% 50%;transition:opacity .7s ease,transform 1.15s cubic-bezier(.2,.75,.25,1)}
.runtime-detail canvas,.runtime-detail>img{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.runtime-detail>img{object-fit:fill;inset:auto;mask-mode:luminance;mask-size:100% 100%;mask-repeat:no-repeat}
.runtime-detail.has-webgl>img{visibility:hidden}
.runtime-window.is-exploring .runtime-detail{opacity:1;transform:scale(1)}
.runtime-window.is-exploring .runtime-overview{opacity:0;transform:scale(1.12)}
.runtime-caption{position:relative;z-index:3;margin-left:5.2%;padding-top:clamp(40px,7svh,76px);width:26%;max-width:350px;pointer-events:none}
.runtime-caption h2{font-family:var(--serif);font-size:clamp(26px,2.3vw,34px);font-weight:400;line-height:1.2;letter-spacing:-.018em;text-wrap:balance;text-shadow:0 1px 20px #354a6140;margin:0}
/* Compact glass cards keep their size and alignment as they lift on hover. */
.runtime-labels{position:relative;z-index:4;margin:clamp(24px,3.5svh,36px) 0 0 5.2%;width:min(220px,26%);display:grid;gap:10px}
.runtime-labels button{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;font-family:var(--sans);color:inherit;background:rgba(40,60,64,.25);border:0;border-radius:12px;padding:11px 14px;cursor:pointer;min-height:48px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);text-shadow:0 1px 5px #223d4938;opacity:1;translate:0 0;box-shadow:0 0 0 #16314800;transition:translate .42s cubic-bezier(.2,.75,.25,1),box-shadow .42s ease,background-color .3s ease,opacity .35s ease}
.runtime-labels button[aria-pressed="true"]{background:rgba(40,60,64,.35);box-shadow:inset 0 0 0 1px #ffffff26}
.runtime-window.is-exploring .runtime-labels button[aria-pressed="false"]{opacity:.72}
.runtime-window.is-exploring .runtime-labels button:focus-visible{opacity:1}
/* Individual translate preserves the overview's vertical centering transform.
   The extra hit area prevents flicker along the lower edge as the card rises. */
@media(hover:hover) and (pointer:fine){
 .runtime-window.is-exploring .runtime-labels button:is(:hover,.is-previewed){opacity:1}
 .runtime-labels button::after{content:"";position:absolute;inset:0 0 -6px}
 .runtime-labels button:is(:hover,:focus-visible,.is-previewed){translate:0 -6px;box-shadow:0 12px 24px #16314826,0 3px 6px #1631480d}
 .runtime-labels button[aria-pressed="true"]:is(:hover,:focus-visible,.is-previewed){box-shadow:inset 0 0 0 1px #ffffff26,0 12px 24px #16314826,0 3px 6px #1631480d}
 .runtime-labels button:active{translate:0 -2px;transition-duration:.12s}
}
.runtime-layer-name{font-weight:600;font-size:13px;line-height:1.4;display:block}
.runtime-layer-description{display:block;font-size:11px;font-weight:400;line-height:1.45;margin-top:4px}
.runtime-window:not(.is-exploring) .runtime-layer-description{display:none}
/* One aligned column beside the painting, with each label at its island's height.
   The image and labels share the same height, so resizing cannot separate them. */
.runtime-labels [data-runtime-layer="0"]{--layer-y:24%}
.runtime-labels [data-runtime-layer="1"]{--layer-y:46%}
.runtime-labels [data-runtime-layer="2"]{--layer-y:68%}
.runtime-labels [data-runtime-layer="3"]{--layer-y:90%}
.runtime-window:not(.is-exploring) .runtime-labels{position:absolute;inset:var(--overview-top) 0 auto;margin:0;width:auto;max-width:none;height:var(--overview-height);display:block;transform:none;pointer-events:none}
.runtime-window:not(.is-exploring) .runtime-labels button{position:absolute;top:var(--layer-y);right:calc(var(--overview-height) * .615 + 18px);width:clamp(165px,16cqw,220px);transform:translateY(-50%);pointer-events:auto}
.runtime-hotspots{position:absolute;top:calc(var(--overview-top) + var(--overview-height) * .06);height:calc(var(--overview-height) * .91);left:calc(100% - var(--overview-height) * .61);right:2%;z-index:2;display:grid;grid-template-rows:repeat(4,1fr)}
.runtime-hotspots>div{border:0;background:none;border-radius:50%;cursor:zoom-in}
.runtime-window.is-exploring .runtime-hotspots{visibility:hidden;pointer-events:none}
.runtime-view-controls{position:absolute;z-index:5;left:5.2%;right:5.2%;bottom:30px;min-height:44px;display:flex;align-items:center;gap:24px}
.runtime-view-controls button{border:0;background:none;color:inherit;padding:10px 0;min-height:44px;font-family:var(--sans);font-size:11px;cursor:pointer;white-space:nowrap}
.runtime-back{display:flex;align-items:center;gap:10px}
.runtime-back span{display:inline-block;transition:transform .25s}.runtime-back:hover span{transform:translateX(-4px)}
.runtime-hint{font-size:11px;font-family:var(--sans);line-height:1.5;margin:0;opacity:.75;letter-spacing:.01em}
.runtime-hint:empty{display:none}
.runtime-window button:focus-visible,.runtime-drag:focus-visible{outline:1px solid #fff;outline-offset:6px;border-radius:3px}
.runtime-window .runtime-labels button:focus-visible{outline:1px solid #fff;outline-offset:3px;border-radius:12px}
.runtime-drag{position:absolute;z-index:2;inset:11% 3% 14% 32%;border-radius:32%;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.runtime-drag.is-dragging{cursor:grabbing}
@media(max-width:1000px) and (min-width:761px){
 .runtime-caption{width:29%}.runtime-caption h2{font-size:27px}
 .runtime-labels{width:min(220px,29%)}
}
@media(max-width:1100px) and (min-width:761px){
 .runtime-window:not(.is-exploring) .runtime-caption{width:65%;max-width:480px;padding-top:32px}
 .runtime-window:not(.is-exploring) .runtime-caption h2{font-size:26px}
}
@media(max-width:760px){
 .runtime-window{min-height:780px;--overview-height:min(160cqw,calc(100cqh - 165px));--overview-top:150px;--stack-width:calc(var(--overview-height) * .508475)}
 .runtime-caption{position:absolute;margin:0;padding-top:0;left:7%;top:36px;width:80%;max-width:340px}
 .runtime-caption h2{font-size:clamp(24px,5.7vw,31px);text-wrap:pretty;max-width:330px}
 .runtime-stage{inset:0}
 /* Complete islands with real PNG alpha avoid Safari's composite-mask seam. */
 .runtime-overview{display:none}
 .runtime-mobile-stack{display:block;position:absolute;top:var(--overview-top);right:1%;width:var(--stack-width);height:var(--overview-height);opacity:1;transform:scale(1);transform-origin:60% 50%;transition:opacity .5s ease,transform .8s cubic-bezier(.2,.75,.25,1)}
 .runtime-mobile-stack img{position:absolute;left:0;width:100%;height:auto;max-width:none}
 /* The gallery has more transparent padding; match its visible island width. */
 .runtime-mobile-stack img:nth-child(1){top:0;z-index:4;transform:scale(1.26);transform-origin:50% 50%}
 .runtime-mobile-stack img:nth-child(2){top:22.034%;z-index:3}
 .runtime-mobile-stack img:nth-child(3){top:44.068%;z-index:2}
 .runtime-mobile-stack img:nth-child(4){top:66.102%;z-index:1}
 .runtime-window.is-exploring .runtime-mobile-stack{opacity:0;transform:scale(1.08)}
 .runtime-detail{transform-origin:50% 50%}
 .runtime-labels{position:absolute;margin:0;left:50%;bottom:82px;transform:translateX(-50%);width:84%;max-width:450px;grid-template-columns:1fr 1fr;gap:10px}
 .runtime-labels button{padding:10px 12px;justify-content:flex-start}
 .runtime-labels [data-runtime-layer="0"]{--layer-y:18%}
 .runtime-labels [data-runtime-layer="1"]{--layer-y:40%}
 .runtime-labels [data-runtime-layer="2"]{--layer-y:62%}
 .runtime-labels [data-runtime-layer="3"]{--layer-y:84%}
 .runtime-window:not(.is-exploring) .runtime-labels button{left:5%;right:auto;width:36%;min-height:44px;padding:9px 11px;justify-content:center}
 .runtime-hotspots{left:calc(100% - var(--stack-width));top:calc(var(--overview-top) + var(--overview-height) * .04);height:calc(var(--overview-height) * .88)}
 .runtime-window:not(.is-exploring) .runtime-layer-name{line-height:1.25}
 .runtime-window:not(.is-exploring) .runtime-layer-description{font-size:clamp(9px,2.7cqw,10px);line-height:1.2;margin-top:3px}
 .runtime-layer-name{font-size:12px}.runtime-layer-description{font-size:10px}
 .runtime-view-controls{left:7%;right:7%;bottom:20px;gap:15px}
 .runtime-view-controls button,.runtime-hint{font-size:10px}
 .runtime-back{gap:6px}
 .runtime-drag{inset:158px 4% 265px;touch-action:none;border-radius:30%}
 .runtime-window.is-exploring .runtime-hint{max-width:90px}
}
@media(max-width:359px){.runtime-caption{top:32px}.runtime-caption h2{font-size:24px}.runtime-layer-name{font-size:11px}.runtime-layer-description{font-size:9px}.runtime-labels button{padding:9px 10px}.runtime-view-controls{gap:10px}.runtime-window:not(.is-exploring) .runtime-layer-description{position:absolute;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}}
@media(max-height:650px) and (min-width:761px){
 .runtime-caption{padding-top:38px}.runtime-caption h2{font-size:26px}.runtime-view-controls{bottom:17px}
}
@media(prefers-reduced-motion:reduce){
 .runtime-overview,.runtime-mobile-stack,.runtime-detail,.runtime-labels button,.runtime-back span{transition:none!important}
 .runtime-overview,.runtime-mobile-stack,.runtime-detail,.runtime-back span{transform:none!important}
 .runtime-labels button{translate:none!important}
}
.runtime-window.is-switching .runtime-detail{opacity:0;transition-duration:180ms;transform:scale(.985)}