/* Gallery composition and HUD: shared edges, independent of simulation time. */
.stage{position:relative;display:grid;grid-template-rows:minmax(0,1fr);height:calc(100svh - var(--header-height) - var(--collection-height));min-height:0;overflow:hidden;isolation:isolate;background:var(--bg)}
.art-viewport{position:relative;min-width:0;min-height:0;overflow:hidden}
.stage-controls,.hud-slot{display:contents}
.stage:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.art-viewport>canvas{display:block;width:100%;height:100%;touch-action:pan-y}
#transition-frame{position:absolute;inset:0;z-index:1;pointer-events:none}
.art-intro,.stage-caption,.stage-top-right{z-index:2}
.art-intro{position:absolute;top:36px;left:max(var(--page-gutter),env(safe-area-inset-left));max-width:300px;pointer-events:none;text-shadow:0 1px 6px #0009}
.study-index{font:11px/1.5 var(--sans);color:var(--muted);margin:0 0 16px;letter-spacing:.04em}
.art-intro h1{font:400 clamp(48px,4.6vw,76px)/1 var(--serif);letter-spacing:.14em;margin:0 0 12px;text-transform:uppercase}
.art-subtitle{font:400 19px/1.4 var(--serif);letter-spacing:.045em;margin:0 0 20px}
.art-description{font:400 17px/1.5 var(--serif);max-width:270px;color:#c5cbc9;margin:0;white-space:pre-line}
.intro-rule{display:block;width:32px;height:1px;background:#c7a77c70;margin-top:24px}
body[data-study=palinsesto] .art-intro h1{font-size:clamp(34px,3.15vw,52px);letter-spacing:.055em}
.stage-top-right{position:absolute;right:max(var(--page-gutter),env(safe-area-inset-right));top:28px;color:#adb6b3;font:10px/1.5 var(--mono);display:flex;align-items:center;gap:16px}
.source-readout{position:absolute;right:max(var(--page-gutter),env(safe-area-inset-right));top:68px;width:clamp(192px,14.8vw,216px);padding:0;background:#050b10c4;border:1px solid #c4cfca2e;border-radius:0;overflow:visible;z-index:2}
.source-readout:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(#dce1d570,#dce1d570) left top / 12px 1px no-repeat,
    linear-gradient(#dce1d570,#dce1d570) left top / 1px 12px no-repeat,
    linear-gradient(#dce1d570,#dce1d570) right top / 12px 1px no-repeat,
    linear-gradient(#dce1d570,#dce1d570) right top / 1px 12px no-repeat,
    linear-gradient(#dce1d54d,#dce1d54d) left bottom / 12px 1px no-repeat,
    linear-gradient(#dce1d54d,#dce1d54d) left bottom / 1px 12px no-repeat,
    linear-gradient(#dce1d54d,#dce1d54d) right bottom / 12px 1px no-repeat,
    linear-gradient(#dce1d54d,#dce1d54d) right bottom / 1px 12px no-repeat;
}
.hud-summary{display:none}
.hud-content{padding:18px 16px 6px}
.source-heading{display:flex;justify-content:space-between;font:400 16px/1.4 var(--serif);letter-spacing:.12em;text-transform:uppercase;padding-bottom:12px;border-bottom:1px solid #c4cfca25;gap:10px;align-items:baseline}
.source-heading>span:first-child{min-width:0;overflow-wrap:anywhere}
.data-kind{font:400 10px/1.5 var(--sans);letter-spacing:0;text-transform:none;color:#b5afa0;flex-shrink:0}
.source-readout dl{display:grid;grid-template-columns:minmax(0,1fr) auto;margin:14px 0;column-gap:10px;row-gap:5px;font:12px/1.45 var(--sans)}
.source-readout dt{color:#aeb6b4}
.source-readout dd{margin:0;color:#d0d4ce;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.hud-diagram{border-top:1px solid #c4cfca25;padding-top:13px;margin-top:14px}
.hud-diagram p{font:400 10px/1.5 var(--serif);letter-spacing:.13em;text-transform:uppercase;color:#bec4bc;margin:0 0 8px}
.hud-diagram canvas{display:block;width:100%;max-width:192px;height:auto;aspect-ratio:192 / 164;margin:0 auto 8px}
.hud-trace{margin-top:8px}.hud-trace canvas{aspect-ratio:192 / 60;margin-bottom:6px}
.source-detail{font:11px/1.4 var(--sans);color:var(--muted);padding:10px 0;display:flex;justify-content:space-between;gap:12px;align-items:center;width:100%;min-height:44px;text-align:left;border-top:1px solid #c4cfca25}
.source-detail>span:first-child{min-width:0;overflow-wrap:anywhere}.source-detail>svg{width:18px;height:18px;color:#bac3b9}
.source-detail:hover{color:var(--ink)}
.source-attribution{display:flex;align-items:baseline;gap:6px;font:11px/1.5 var(--sans);color:var(--muted);padding:8px 0 10px;min-height:36px}
.source-attribution>svg{width:12px;height:12px}
.stage-caption{position:absolute;bottom:30px;left:var(--page-gutter);right:380px;display:flex;font:16px/1.4 var(--serif);color:#c5cbc9;text-shadow:0 1px 5px #000;margin:0}
.interaction-hint{display:none}
.art-toolbar{position:absolute;right:max(var(--page-gutter),env(safe-area-inset-right));bottom:16px;display:flex;align-items:center;gap:4px;background:#080d10ed;border:1px solid #a9b5b53d;padding:3px 5px;border-radius:3px;white-space:nowrap;z-index:2;opacity:1;transition:opacity 180ms ease}
.controls-reveal{position:absolute;right:var(--edge-right);bottom:20px;display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;background:#080d10d9;border:1px solid #a9b5b52b;border-radius:3px;color:var(--muted);font:13px var(--sans);z-index:3;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 180ms ease}
.controls-reveal svg{width:16px;height:16px}
.stage-caption{transition:opacity 180ms ease}
.stage[data-controls-idle] .art-toolbar,.stage[data-controls-idle] .stage-caption{opacity:0;pointer-events:none}
.stage[data-controls-idle] .controls-reveal{opacity:1;visibility:visible;pointer-events:auto}
.stage .art-toolbar:has(:focus-visible){opacity:1;pointer-events:auto}
.source-detail[data-error]{color:#d8b998}
.toolbar-label{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:14px;color:#d3d8d3;min-height:44px;border-radius:2px}
.toolbar-label svg{width:18px}
.toolbar-divider{height:20px;width:1px;background:var(--line);margin:0 4px}
.scene-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:calc(100% - 48px);width:max-content;padding:12px 16px;background:#080d10e8;border:0;text-align:center;z-index:4}
.scene-status{font:14px/1.5 var(--sans);color:var(--muted);margin:0;max-width:340px}
.scene-loading .button{margin-top:12px}
body[data-loading=initial] .art-viewport>canvas{opacity:0}
body:not([data-interface-ready]) :is(.art-intro,.source-readout,.stage-caption,.stage-top-right,.art-toolbar){visibility:hidden}
body[data-loading=initial] .hud-content,body[data-loading=initial] .hud-summary{visibility:hidden}
body[data-loading=initial] .source-readout{visibility:hidden}
body[data-loading=initial] .scene-loading{min-width:220px}
body[data-loading=scene] .scene-loading{top:auto;bottom:22px;transform:translateX(-50%);padding:8px 12px}
body[data-loading=initial] .scene-loading:before,body[data-loading=scene] .scene-loading:before{content:"";display:block;width:32px;height:1px;margin:0 auto 16px;background:var(--accent);animation:loading-breath 1.4s ease-in-out infinite alternate}
body[data-loading=scene] .scene-loading:before{margin-bottom:8px}
@keyframes loading-breath{from{opacity:.3}to{opacity:1}}
/* Desktop composition: the original side notes and measured HUD remain overlays. */
body.immersive .site-header,body.immersive .collection,body.immersive .art-intro,body.immersive .stage-caption{display:none}
body.immersive .stage{height:100dvh;min-height:0}
body.immersive .stage-top-right{top:max(16px,env(safe-area-inset-top));z-index:3}
body.immersive .source-readout{top:80px}
@media(min-width:1700px){.art-intro{top:48px}.art-description{font-size:19px}.art-subtitle{font-size:22px}.source-readout{width:224px;top:80px}.source-readout dl{font-size:13px}.source-heading{font-size:17px}}
@media(min-width:1101px) and (max-width:1279px){.art-intro{max-width:238px}.art-description{font-size:16px;max-width:235px}.art-subtitle{font-size:18px}.source-readout{width:192px}.hud-content{padding:16px 14px 6px}}
@media(min-width:1101px) and (min-height:701px) and (max-height:800px){
  .hud-content{padding:16px 15px 4px}
  .source-readout dl{margin:12px 0;row-gap:5px}
  .hud-diagram{margin-top:12px;padding-top:12px}
  .hud-diagram p{margin-bottom:4px}.hud-diagram canvas{width:144px;margin-bottom:4px}
}
/* A shared overlay for phones, tablets and short windows; fading never resizes it. */
@media(max-width:1100px),(max-height:700px){
  .stage{grid-template-rows:minmax(0,1fr);min-height:0}
  .art-intro{top:20px;right:max(var(--page-gutter),env(safe-area-inset-right));max-width:none;display:flex;align-items:baseline;gap:6px 16px;flex-wrap:wrap}
  .study-index,.art-description,.intro-rule,.stage-caption,#edition{display:none}
  .art-intro h1{font-size:clamp(32px,4vw,42px);line-height:1.2;margin:0;letter-spacing:.07em}
  .art-subtitle{font-size:18px;line-height:1.4;margin:0;letter-spacing:0}
  body[data-study=palinsesto] .art-intro h1{font-size:clamp(28px,3.5vw,36px);letter-spacing:.025em}
  .stage-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding:8px var(--edge-right) max(12px,env(safe-area-inset-bottom)) var(--edge-left);background:none;border:0;position:absolute;inset:auto 0 0;z-index:3;isolation:isolate}
  .stage-controls:before{content:"";position:absolute;inset:-20px 0 0;background:linear-gradient(transparent,#080d1070 40%,#080d10bd);z-index:-1;pointer-events:none;transition:opacity 180ms ease}
  .stage[data-controls-idle] .stage-controls:before{opacity:.55}
  .controls-reveal{right:var(--edge-right);bottom:max(16px,env(safe-area-inset-bottom))}
  .hud-slot{display:block;position:relative;min-width:0;width:100%;max-width:336px;height:var(--hud-summary-height,44px)}
  .source-readout,body.immersive .source-readout{position:static;inset:auto;width:100%;max-width:none;border:0;background:none}
  .source-readout:not([open]):before{display:none}
  .hud-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0;list-style:none;cursor:pointer;font:13px/1.45 var(--sans);color:var(--ink);text-shadow:0 1px 4px #000}
  .hud-summary::-webkit-details-marker{display:none}
  #hud-summary-metrics{display:block;min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
  #hud-summary-location{display:none;min-width:0;overflow-wrap:anywhere;font:400 17px/1.4 var(--serif);letter-spacing:.06em;text-transform:uppercase}
  .hud-summary-status{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 10px;font-size:11px;color:var(--muted);flex-shrink:0}
  #hud-summary-kind{color:var(--accent);grid-column:1}
  #hud-summary-action{grid-column:1}
  .hud-summary-sign{grid-column:2;grid-row:1 / 3;width:18px;height:18px;color:var(--accent)}
  .source-readout[open],body.immersive .source-readout[open]{position:absolute;inset:auto auto 0 0;width:100%;background:#050b10eb;border:1px solid #c4cfca2e}
  .source-readout[open] #hud-summary-metrics,.source-readout .source-heading{display:none}
  .source-readout[open] #hud-summary-location{display:block}
  .source-readout[open] .hud-summary{padding:12px 16px;min-height:58px;background:#0a1115;border-bottom:1px solid var(--line)}
  .source-readout[open] .hud-summary-sign{transform:rotate(45deg)}
  .hud-content{padding:12px 16px 6px}
  .source-readout dl{font-size:13px;row-gap:7px;margin:8px 0 14px}
  .hud-diagram{margin-top:14px}.hud-diagram canvas{width:160px}
  .hud-trace canvas{width:192px}
  .source-attribution{font-size:12px;min-height:44px}
  .art-toolbar{position:static;inset:auto;transform:none;width:max-content;max-width:none;justify-self:end;padding:3px 5px;gap:2px}
  .toolbar-label{padding:10px;gap:6px}
  .scene-loading{max-width:calc(100% - 2 * var(--page-gutter))}
  body[data-loading=scene] .scene-loading{top:82px;bottom:auto}
  body.immersive .stage{grid-template-rows:minmax(0,1fr)}
}
@media(max-width:640px) and (orientation:portrait){
  .stage-controls{grid-template-columns:minmax(0,1fr);gap:8px}
  .hud-slot{max-width:none}
  .art-toolbar{width:100%;justify-self:stretch;justify-content:space-between}
  .art-intro h1{font-size:32px}.art-subtitle{font-size:16px}
  body[data-study=palinsesto] .art-intro h1{font-size:28px}
}
@media(max-width:640px) and (orientation:landscape){
  .stage-controls{gap:16px}
  .toolbar-label{min-width:44px;justify-content:center}
  .toolbar-label>span{display:none}
}
@media(max-height:500px) and (orientation:landscape){
  .art-intro{top:14px}.art-intro h1{font-size:30px}.art-subtitle{font-size:16px}
  body[data-study=palinsesto] .art-intro h1{font-size:27px}
}
@media(max-width:359px){.art-intro h1{font-size:29px}body[data-study=palinsesto] .art-intro h1{font-size:26px}.art-subtitle{font-size:15px}.hud-summary{font-size:12px}.toolbar-label{min-width:44px;padding:10px;justify-content:center}.toolbar-label>span{display:none}.toolbar-divider{margin:0 2px}}
/* Complete sections leave when the available room is smaller. */
.source-readout[data-fit=no-trace] .hud-trace,
.source-readout[data-fit=metrics] .hud-diagram,
.source-readout[data-fit=compact] .hud-diagram{display:none}
.source-readout[data-fit=compact] .hud-content{padding:10px 14px 4px}
.source-readout[data-fit=compact] dl{margin:8px 0;row-gap:4px;font-size:12px}
.source-readout[data-fit=compact] .source-heading{padding-bottom:8px}
.source-readout[data-fit=compact] .source-attribution{min-height:32px;padding:4px 0;font-size:11px}
.source-readout:is([data-fit=minimal],[data-fit=essential]) .hud-diagram{display:none}
.source-readout:is([data-fit=minimal],[data-fit=essential])[open] .hud-summary{padding:8px 14px;min-height:44px}
.source-readout:is([data-fit=minimal],[data-fit=essential]) #hud-summary-location{font-size:15px;line-height:1.3}
.source-readout:is([data-fit=minimal],[data-fit=essential]) .hud-content{padding:0 14px 4px}
.source-readout:is([data-fit=minimal],[data-fit=essential]) dl{margin:8px 0;row-gap:4px;font-size:12px}
.source-readout[data-fit=minimal] dl>:nth-child(n+7){display:none}
.source-readout[data-fit=essential] dl>:nth-child(n+5){display:none}
.source-readout[data-fit=essential] dl{margin:4px 0}
.source-readout[data-fit=essential] .hud-content{padding-bottom:0}
.source-readout:is([data-fit=minimal],[data-fit=essential]) .source-attribution{min-height:28px;padding:4px 0;font-size:11px}

@media(prefers-reduced-motion:reduce){.art-toolbar,.controls-reveal,.stage-caption,.stage-controls:before{transition:none}}