@nulib/clover 4.6.0 → 4.7.0

package/README.md

@@ -101,6 +101,8 @@ If you serve Clover's files yourself, copy the whole `dist/web-components` folde
 | `@nulib/clover/web-components/three`  | three.js for the elements' Scene, bundled.                                            |
 | `@nulib/clover/styles.css`            | Every part's styles, and the `Default` template's.                                    |
 | `@nulib/clover/templates.css`         | The other templates' styles.                                                          |
+| `@nulib/clover/base.css`              | For a look of your own, in place of both: the structure of every part and template.   |
+| `@nulib/clover/spacing.css`           | Clover's margins, paddings and gaps, after `base.css`.                                |
 
 ## Learn more
 

package/dist/base.css

@@ -0,0 +1 @@
+@layer clover{:root{--clover-stylesheet:base}:root{--clover-space-3xs: .146rem;--clover-space-2xs: .236rem;--clover-space-xs: .382rem;--clover-space-s: .618rem;--clover-space-m: 1rem;--clover-space-l: 1.618rem;--clover-space-xl: 2.618rem;--clover-space-2xl: 4.236rem;--clover-text-xs: .764rem;--clover-text-s: .854rem;--clover-text-m: 1.146rem;--clover-text-l: 1.236rem;--clover-control: calc(1rem + 2 * var(--clover-space-s));--clover-inset: var(--clover-space-l);--clover-picture: calc(4 * var(--clover-space-xl))}:where(.clover-title){overflow-wrap:anywhere}:where(.clover-field-pill-query,.clover-collection-select-control){box-sizing:border-box}:where(.clover-field-pill-query)::placeholder{opacity:1}.clover-canvas-error{display:flex;flex-direction:column;align-items:center}button.clover-canvas-exit-full-screen{display:none;position:absolute;top:var(--clover-canvas-controls-inset);left:var(--clover-canvas-controls-inset);z-index:3;align-items:center;height:var(--clover-control);white-space:nowrap;cursor:pointer}.clover-canvas-exit-full-screen svg{height:1rem;width:1rem;flex-shrink:0}.clover-root:fullscreen{overflow:auto}.clover-loading{position:relative;display:block;width:100%;height:3px;overflow:hidden;opacity:0}.clover-loading>span{position:absolute;inset:0;transform:scaleX(0);transform-origin:left center}.clover-loading:dir(rtl)>span{transform-origin:right center}.clover-loading[data-overlay]{position:absolute;top:0;left:0;z-index:3;pointer-events:none}.clover-body:has(>.clover-loading) .clover-canvas .clover-loading{display:none}.clover-loading[data-done]{opacity:1}.clover-body-unloadable,.clover-body-note{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}.clover-body-unloadable[data-room]{inset-block-end:var(--clover-transport-room, 0)}.clover-body-unloadable:empty{display:none}.clover-body-unloadable>p,.clover-body-note>p{text-align:center}.clover-sections{--clover-chevron: 12px}.clover-chevron{flex-shrink:0}.clover-chevron[data-open]{transform:rotate(180deg)}.clover-canvas-overlays{overflow:hidden;isolation:isolate;container-type:size;scroll-padding-block:var(--clover-canvas-clear-top, 0) var(--clover-canvas-clear-bottom, 0)}.clover-canvas-overlay{transform-origin:center}.clover-canvas-annotation{box-sizing:border-box;cursor:zoom-in;background-color:transparent;z-index:var(--clover-annotation-depth, 0)}.clover-canvas-annotation:is([data-link],[data-track]){cursor:pointer}.clover-canvas-annotation[hidden]{display:none}.clover-canvas-annotation:is([data-shape=point],[data-shape=svg]){pointer-events:none}.clover-canvas-annotation:is([data-shape=point],[data-shape=svg]),.clover-canvas-annotation:is([data-shape=point],[data-shape=svg]):is([data-active=true],:focus-visible){background-color:transparent}.clover-canvas-annotation-point{position:absolute;top:50%;left:50%;width:var(--clover-space-m);height:var(--clover-space-m);transform:translate(-50%,-50%);pointer-events:auto}.clover-canvas-annotation-point:before{position:absolute;top:50%;left:50%;width:var(--clover-space-l);height:var(--clover-space-l);transform:translate(-50%,-50%);content:""}.clover-canvas-annotation-shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.clover-canvas-annotation-shape>g>*{fill:none;stroke:none;pointer-events:none}.clover-canvas-annotation-shape>g:nth-child(1)>*{fill:transparent;pointer-events:visiblePainted;cursor:zoom-in}.clover-canvas{--clover-canvas-inset: 0px;--clover-canvas-controls-inset: var(--clover-inset);--clover-controls-tuck: var(--clover-space-s);--clover-controls-shown: 0;--clover-controls-events: none;position:relative;width:100%;height:100%;min-height:inherit;overflow:hidden;isolation:isolate}@media (width < 31rem){.clover-canvas{--clover-canvas-controls-inset: var(--clover-space-m)}}.clover-canvas[data-exit]>.clover-canvas-exit-full-screen{display:flex}.clover-canvas[data-exit]>.clover-canvas-navigator{top:calc(var(--clover-canvas-controls-inset) + var(--clover-control) + var(--clover-space-s))}.clover-canvas{--clover-canvas-clear-top: var(--clover-space-xs);--clover-canvas-clear-bottom: var(--clover-space-xs)}.clover-canvas:has(>.clover-canvas-controls){--clover-canvas-clear-top: calc( var(--clover-canvas-controls-inset) + var(--clover-canvas-controls-height, var(--clover-control)) + var(--clover-space-s) )}.clover-canvas[data-has-navigator=true]{--clover-canvas-clear-top: calc( var(--clover-canvas-controls-inset) + var(--clover-space-2xl) + var(--clover-space-s) )}.clover-canvas[data-exit][data-has-navigator=true]{--clover-canvas-clear-top: calc( var(--clover-canvas-controls-inset) + var(--clover-control) + var(--clover-space-2xl) + 2 * var(--clover-space-s) )}.clover-canvas{--clover-transport-room: calc( var(--clover-transport-bar-height, var(--clover-control)) + var(--clover-space-l) + var(--clover-space-xs) + var(--clover-canvas-controls-inset) + var(--clover-space-m) + var(--clover-transport-marks-room, 0px) )}.clover-canvas[data-recording]{--clover-canvas-clear-bottom: var(--clover-transport-room)}.clover-canvas[data-player]{--clover-player-art-least: calc(12rem / 1.618);min-height:calc(2 * var(--clover-canvas-controls-inset) + max(var(--clover-player-art-least),2.7 * var(--clover-text-m) + 3 * var(--clover-space-2xs) + var(--clover-space-xs) + var(--clover-transport-marks-room, 0px) + var(--clover-space-l) + var(--clover-transport-bar-height, var(--clover-control))))}.clover-canvas-viewport{isolation:isolate;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}.clover-canvas-viewport:active{cursor:grabbing}.clover-canvas[data-navigable=false]>.clover-canvas-viewport{cursor:default;touch-action:manipulation}.clover-canvas-sound-label{position:absolute;inset:0 0 var(--clover-transport-room, 0) 0;z-index:-1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;overflow:hidden;text-align:center;overflow-wrap:anywhere;pointer-events:none}.clover-canvas-dom-media{display:block;-webkit-user-drag:none}.clover-canvas-dom-media.clover-canvas-painted-text{display:flex;align-items:center;overflow:hidden}.clover-canvas-scrim{position:absolute;inset:0 0 auto;z-index:0;height:calc(var(--clover-control) + 2 * var(--clover-space-l));pointer-events:none;opacity:var(--clover-controls-shown)}.clover-canvas[data-media=video]>.clover-canvas-scrim{display:none}.clover-canvas:not([data-controls]){--clover-controls-shown: 1;--clover-controls-events: auto}.clover-canvas>.clover-canvas-controls{z-index:3;pointer-events:none}.clover-canvas>.clover-canvas-controls[data-fit]{left:var(--clover-canvas-controls-inset);flex-wrap:nowrap}.clover-canvas>.clover-canvas-controls[data-fit]:has(>[data-button=panel]){padding-right:calc(var(--clover-control) + var(--clover-space-xs))}.clover-canvas>.clover-canvas-controls[data-fit]:dir(rtl){justify-content:flex-start}.clover-canvas[data-exit]>.clover-canvas-controls[data-fit]{left:calc(var(--clover-canvas-controls-inset) + var(--clover-control) + var(--clover-space-s))}.clover-canvas[data-has-navigator=true]>.clover-canvas-controls[data-fit]{left:calc(var(--clover-canvas-controls-inset) + var(--clover-space-2xl) + var(--clover-space-xl) + var(--clover-space-s))}.clover-canvas>.clover-canvas-controls>.clover-canvas-more{--tray: var(--clover-space-3xs);display:flex;flex:0 1 auto;min-width:0;pointer-events:none}.clover-canvas>.clover-canvas-controls>.clover-canvas-more[data-open]{position:relative}.clover-canvas-more>button,.clover-canvas-more-list>*{pointer-events:var(--clover-controls-events)}.clover-canvas-more-list:not([hidden]){--fade: calc(var(--clover-space-l) + var(--clover-space-s));display:flex;min-width:0;scrollbar-width:none}.clover-canvas-more-list[data-past]{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-padding-inline:var(--fade)}.clover-canvas-more-list::-webkit-scrollbar{display:none}.clover-canvas-more-list>[data-partial]:not(:focus-visible){opacity:.25;pointer-events:none}.clover-canvas-more>.clover-canvas-more-step{position:absolute;top:50%;z-index:1;display:none;translate:0 -50%}.clover-canvas-more>[data-step=prev]{inset-inline-start:var(--tray)}.clover-canvas-more>[data-step=next]{inset-inline-end:calc(var(--tray) + var(--clover-control) + var(--clover-space-xs))}.clover-canvas-more:dir(ltr)>.clover-canvas-more-list[data-past~=left]~[data-step=prev],.clover-canvas-more:dir(ltr)>.clover-canvas-more-list[data-past~=right]~[data-step=next],.clover-canvas-more:dir(rtl)>.clover-canvas-more-list[data-past~=right]~[data-step=prev],.clover-canvas-more:dir(rtl)>.clover-canvas-more-list[data-past~=left]~[data-step=next]{display:flex}.clover-canvas-more-step:dir(rtl) svg{scale:-1 1}@media (hover: none){.clover-canvas-more-list[data-past]{pointer-events:var(--clover-controls-events)}:is(.clover-canvas-more-list[data-past],.clover-canvas-more-step) .clover-tip{display:none}}.clover-canvas>.clover-canvas-controls:has(>[data-button=panel]){padding-right:calc(var(--clover-control) + var(--clover-space-s))}.clover-canvas>.clover-canvas-controls>[data-button=panel]{position:absolute;top:0;right:0;--clover-controls-shown: 1;--clover-controls-events: auto}.clover-canvas>.clover-canvas-controls:has(>[data-button=panel][data-side=start]),.clover-canvas>.clover-canvas-controls[data-fit]:has(>[data-button=panel][data-side=start]){padding-inline-start:calc(var(--clover-control) + var(--clover-space-xs))}.clover-canvas>.clover-canvas-controls>[data-button=panel][data-side=start]{right:auto;inset-inline-start:0}.clover-canvas>.clover-canvas-controls>:is([data-button=information],[data-button=annotations],[data-button=chapters],[data-button=placeholder]){--clover-controls-shown: 1;--clover-controls-events: auto}.clover-canvas:is([data-controls=visible],:has(:focus-visible,[aria-expanded=true]:not([data-button=panel])),:has(>.clover-canvas-media>.clover-canvas-transport>.clover-canvas-transport-bar>[data-button=play])){--clover-controls-shown: 1;--clover-controls-events: auto}@media (hover: hover){.clover-canvas:has(>.clover-canvas-controls>:not([data-button=panel],[data-button=information],[data-button=annotations],[data-button=placeholder]):hover,>.clover-canvas-navigator:hover,.clover-canvas-transport-seek-area:hover,.clover-canvas-transport-bar>:hover){--clover-controls-shown: 1;--clover-controls-events: auto}}.clover-canvas>.clover-canvas-controls>*,.clover-canvas>.clover-canvas-navigator,.clover-canvas>.clover-canvas-media>.clover-canvas-transport:before,.clover-canvas>.clover-canvas-media>.clover-canvas-transport>.clover-canvas-transport-seek-area,.clover-canvas>.clover-canvas-media>.clover-canvas-transport>.clover-canvas-transport-bar>*{opacity:var(--clover-controls-shown);translate:0 calc((1 - var(--clover-controls-shown)) * var(--clover-controls-edge, -1) * var(--clover-controls-tuck))}.clover-canvas>.clover-canvas-controls>*,.clover-canvas>.clover-canvas-navigator,.clover-canvas-transport>.clover-canvas-transport-seek-area,.clover-canvas-transport-bar>*{pointer-events:var(--clover-controls-events)}@media (prefers-reduced-motion: reduce){.clover-canvas{--clover-controls-tuck: 0px}}.clover-canvas-navigator{position:absolute;z-index:2;top:var(--clover-canvas-controls-inset);left:var(--clover-canvas-controls-inset);width:calc(var(--clover-space-2xl) + var(--clover-space-xl));height:var(--clover-space-2xl);overflow:hidden;cursor:pointer;touch-action:none}.clover-canvas-navigator-image{position:absolute;inset:0;width:100%;height:100%}.clover-canvas-navigator-region{position:absolute;top:0;left:0;box-sizing:border-box;pointer-events:none}.clover-canvas-viewport:focus-visible:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}.clover-canvas-caption{transform:translateY(calc(-1 * var(--clover-space-m)));opacity:0;visibility:hidden}.clover-canvas-caption[data-open=true]{transform:none;opacity:1;visibility:visible}@media (prefers-reduced-motion: reduce){.clover-canvas-caption,.clover-canvas-caption[data-open=true]{transform:none}}.clover-canvas-caption>button.clover-canvas-caption-close{float:right}.clover-canvas-caption-annotations>ul{display:flex;flex-direction:column;list-style:none}.clover-canvas-place{width:min(22rem,100%)}.clover-canvas-place .clover-geomap{--clover-map-controls-top: calc( var(--clover-control) + var(--clover-space-s) )}.clover-canvas-place>button.clover-canvas-caption-close{position:absolute;z-index:3;top:calc(var(--clover-space-m) + var(--clover-inset));right:calc(var(--clover-space-m) + var(--clover-inset));float:none}.clover-canvas-placeholder{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;container-type:size;cursor:zoom-in}.clover-canvas-placeholder[data-lingering=true]{pointer-events:none}.clover-canvas-placeholder[data-hidden=true]{visibility:hidden;pointer-events:none}.clover-canvas-placeholder-frame{display:flex;width:min(100cqw,100cqh * var(--ratio));aspect-ratio:var(--ratio)}.clover-canvas-placeholder[data-vertical=true]>.clover-canvas-placeholder-frame{flex-direction:column}.clover-canvas-placeholder-frame>img{display:block;min-width:0;min-height:0;object-fit:contain}.clover-canvas-placeholder:not([data-vertical=true])>.clover-canvas-placeholder-frame>img{height:100%}.clover-canvas-placeholder[data-vertical=true]>.clover-canvas-placeholder-frame>img{width:100%}.clover-canvas[data-placeholder=true]>.clover-canvas-viewport{visibility:hidden}.clover-canvas>button.clover-canvas-placeholder-toggle{position:absolute;z-index:1;top:50%;right:50%;width:var(--clover-space-2xl);height:var(--clover-space-2xl);transform:translate(50%,-50%)}.clover-canvas>button.clover-canvas-placeholder-toggle svg{width:calc(var(--clover-space-2xl) / (1 + 2 * .618));height:calc(var(--clover-space-2xl) / (1 + 2 * .618))}.clover-canvas-placeholder[data-media=true]{cursor:pointer}.clover-canvas[data-placeholder=true]>.clover-canvas-controls>*{--clover-controls-shown: 1;--clover-controls-events: auto}:is(.clover-canvas-caption,.clover-canvas-menu){position:absolute;z-index:2;box-sizing:border-box;min-width:12rem;overflow-y:auto;overscroll-behavior:contain}.clover-canvas>:is(.clover-canvas-caption,.clover-canvas-menu){--top: calc( var(--clover-canvas-controls-inset) + var(--clover-canvas-controls-height, var(--clover-control)) + var(--clover-space-s) );top:var(--top);right:var(--clover-canvas-controls-inset);max-width:min(22rem,calc(100% - 2 * var(--clover-canvas-controls-inset)));max-height:calc(100% - var(--top) - var(--clover-canvas-controls-inset))}.clover-canvas[data-recording]>:is(.clover-canvas-caption,.clover-canvas-menu){max-height:max(calc(100% - var(--top) - var(--clover-transport-room)),min(2 * var(--clover-space-2xl),calc(100% - var(--top) - var(--clover-canvas-controls-inset))))}.clover-canvas[data-popups=beside]>:is(.clover-canvas-caption,.clover-canvas-menu){--top: var(--clover-canvas-controls-inset);right:calc(var(--clover-canvas-controls-inset) + var(--clover-canvas-controls-width, var(--clover-control)) + var(--clover-space-s));left:var(--clover-canvas-controls-inset);min-width:0;max-width:none}.clover-canvas[data-popups=beside][data-exit]>:is(.clover-canvas-caption,.clover-canvas-menu){--top: calc( var(--clover-canvas-controls-inset) + var(--clover-control) + var(--clover-space-s) )}.clover-canvas:has(>:is(.clover-canvas-caption[data-open=true],.clover-canvas-menu))>.clover-canvas-navigator{opacity:0;visibility:hidden}.clover-canvas-menu label{display:flex;align-items:center;cursor:pointer}.clover-canvas-menu label[data-disabled]{cursor:default;opacity:.38;pointer-events:none}.clover-canvas-menu .clover-canvas-chapters-item{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:baseline}.clover-canvas-menu-image{flex:none;width:auto;height:var(--clover-space-xl)}.clover-canvas-media{position:absolute;inset:0;z-index:1;pointer-events:none;container-type:size}.clover-canvas-media:has([aria-expanded=true],.clover-canvas-transport-mark-group:is(:hover,:focus-within)){z-index:4}.clover-canvas-captions{position:absolute;inset:0 0 max(var(--clover-canvas-controls-inset) + var(--clover-controls-shown) * (var(--clover-transport-room) - var(--clover-canvas-controls-inset)),var(--clover-transport-preview-top, 0px) + var(--clover-space-2xs));z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;justify-content:safe flex-end;pointer-events:none}.clover-canvas:has(.clover-canvas-transport-seek-area[data-tip-hidden]) .clover-canvas-captions{--clover-transport-preview-top: 0px}.clover-canvas-captions-cue{max-width:90%;text-align:center;text-wrap:balance;white-space:pre-line}.clover-canvas-captions-cue-label{display:block}.clover-canvas-media>*{--clover-cue-size: var(--clover-text-s)}@container (min-width: 38.5rem){.clover-canvas-media>*{--clover-cue-size: 1rem}}@container (min-width: 44rem){.clover-canvas-media>*{--clover-cue-size: var(--clover-text-m)}}@container (min-width: 47.5rem){.clover-canvas-media>*{--clover-cue-size: var(--clover-text-l)}}.clover-canvas-transport{position:absolute;inset:auto 0 0;z-index:2;display:flex;flex-direction:column;--clover-controls-edge: 1;--clover-transport-thumb: 12px;--clover-transport-track: var(--clover-space-xs);-webkit-user-select:none;user-select:none;--clover-transport-menu-room: calc( 100cqb - var(--clover-canvas-controls-inset) - var(--clover-control) - var(--clover-space-s) - var(--clover-space-xs) )}.clover-canvas-transport:before{position:absolute;inset:0;z-index:-1;pointer-events:none;content:""}.clover-canvas-transport:has([aria-expanded=true],:focus-visible,>.clover-canvas-transport-seek-area:hover){z-index:4}.clover-canvas-transport-bar{display:flex;flex-wrap:wrap;align-items:center;min-width:0}.clover-canvas-transport-bar>*{flex-shrink:0}.clover-canvas-transport-bar>:is(:hover,:active,:focus-within){z-index:1}.clover-canvas-transport-bar>.clover-canvas-transport-status{display:flex;flex:1 1 0;align-items:center;min-width:min-content}.clover-canvas-transport-end{display:flex;margin-inline-start:auto}@container (max-width: 37.5rem){.clover-canvas-transport-bar:has([data-button=chapters])>.clover-canvas-transport-status{order:-1;flex-basis:100%}}@container (max-width: 28rem){.clover-canvas-transport-bar>.clover-canvas-transport-status{order:-1;flex-basis:100%}}.clover-canvas-transport-button svg{fill:currentColor;stroke:none}.clover-canvas-transport-button svg [stroke]{fill:none}button.clover-canvas-transport-button[aria-pressed=true]:after{content:"";position:absolute;inset-inline:var(--clover-space-s);bottom:var(--clover-space-2xs)}.clover-canvas-transport-seek-area{position:relative;display:flex;--clover-transport-gap: var(--clover-space-2xs)}.clover-canvas-transport-points,.clover-canvas-transport-marks{--clover-transport-mark: var(--clover-space-s);position:absolute;inset:0;pointer-events:none}.clover-canvas-transport-points{z-index:0}.clover-canvas-transport-seek{position:relative;z-index:1}.clover-canvas-transport-marks{z-index:2}.clover-canvas-transport-mark-point{position:absolute;top:calc(50% - var(--clover-transport-track) / 2 - var(--clover-space-s) - (var(--clover-transport-mark) + 2 * 3px) / 2);box-sizing:content-box;width:var(--clover-transport-mark);height:var(--clover-transport-mark);translate:-50% -50%}.clover-canvas-transport-mark-point:after{position:absolute;top:calc(100% + 3px);left:50%;width:3px;height:calc(var(--clover-space-s) + var(--clover-transport-track));translate:-50% 0;content:""}.clover-canvas-transport-mark-group{position:absolute;top:calc(50% - var(--clover-transport-track) / 2 - var(--clover-space-l));width:max(24px,var(--clover-space-l));height:max(24px,var(--clover-space-l));translate:-50% 0;pointer-events:var(--clover-controls-events, auto)}.clover-canvas-transport-mark{display:block;width:100%;height:100%;cursor:pointer}.clover-canvas-transport-mark-group:is(:hover,:focus-within){z-index:1}.clover-canvas-transport-mark-group>.clover-tip.clover-canvas-transport-mark-tip{text-align:start;--clover-tip-x: clamp( var(--clover-space-xs) - var(--clover-mark-x, 50cqw), -50%, 100cqw - var(--clover-space-xs) - var(--clover-mark-x, 50cqw) - 100% );display:flex;flex-direction:column;max-width:min(18rem,100cqw - 2 * var(--clover-space-xs));max-height:calc(100cqh - var(--clover-canvas-controls-inset) - var(--clover-transport-bar-height, var(--clover-control)) - var(--clover-space-xs) - var(--clover-space-l) / 2 - var(--clover-transport-track) / 2 - var(--clover-space-l) - 3 * var(--clover-space-xs));transform:translate(calc(var(--clover-tip-x) + 50%))}.clover-canvas-transport-mark-group:focus-within:not([data-tip-hidden])>.clover-tip.clover-canvas-transport-mark-tip{opacity:1;visibility:visible;pointer-events:auto}.clover-canvas:has(.clover-canvas-transport-marks){--clover-transport-marks-room: calc( 2 * var(--clover-space-s) + 2 * 3px - (var(--clover-space-l) - var(--clover-space-xs)) / 2 )}.clover-canvas-transport-mark-words{min-height:0;overflow-y:auto}.clover-canvas-transport-mark-group .clover-canvas-transport-mark-tip>.clover-steps{flex:none}.clover-canvas-transport input[type=range]{width:100%;height:max(24px,var(--clover-space-l));cursor:pointer;touch-action:none}.clover-canvas-transport input.clover-canvas-transport-volume{width:var(--clover-space-2xl)}@container (max-width: 28rem){.clover-canvas-transport input.clover-canvas-transport-volume{width:var(--clover-space-xl)}}.clover-canvas-transport input[type=range]::-webkit-slider-runnable-track{height:var(--clover-transport-track)}.clover-canvas-transport input[type=range]::-moz-range-track{height:var(--clover-transport-track)}.clover-canvas-transport input[type=range]::-webkit-slider-thumb{width:var(--clover-transport-thumb);height:var(--clover-transport-thumb)}.clover-canvas-transport input[type=range]::-moz-range-thumb{width:var(--clover-transport-thumb);height:var(--clover-transport-thumb)}.clover-canvas-transport-time{display:flex;align-items:center;white-space:nowrap}.clover-canvas-transport-frames{position:relative;display:flex}button.clover-canvas-transport-time{cursor:pointer}.clover-canvas-transport-place{display:inline-grid;justify-items:end}.clover-canvas-transport-place>*{grid-area:1 / 1}.clover-canvas-transport-place>.clover-canvas-transport-place-room[hidden]{display:block;visibility:hidden}.clover-canvas-transport-frames>.clover-canvas-menu{right:0;bottom:calc(100% + var(--clover-space-s));left:auto;max-width:min(20rem,100cqi - 2 * var(--clover-canvas-controls-inset));max-height:min(24rem,var(--clover-transport-menu-room),var(--clover-transport-menu-above, 100cqb) - var(--clover-space-s) - var(--clover-space-xs));translate:var(--clover-transport-menu-shift, 0px) 0}.clover-canvas-transport-menu{position:relative;display:flex}.clover-canvas-transport-options{position:absolute;right:0;bottom:calc(100% + var(--clover-space-s));display:flex;flex-direction:column;box-sizing:border-box;min-width:min(11rem,100cqi - 2 * var(--clover-canvas-controls-inset));max-width:calc(100cqi - 2 * var(--clover-canvas-controls-inset));max-height:min(16rem,var(--clover-transport-menu-room),var(--clover-transport-menu-above, 100cqb) - var(--clover-space-s) - var(--clover-space-xs));translate:var(--clover-transport-menu-shift, 0px) 0;overflow-y:auto}.clover-canvas-transport-option{display:flex;flex:none;align-items:center;min-height:max(24px,var(--clover-space-l));cursor:pointer}.clover-canvas-transport-code{flex:none;min-width:var(--clover-space-l)}.clover-canvas-transport-options:has(.clover-canvas-transport-code),.clover-canvas-transport-menu:has([data-button=chapters]) .clover-canvas-transport-options{min-width:min(16rem,100cqi - 2 * var(--clover-canvas-controls-inset))}.clover-canvas-transport-option:has(>.clover-entry-thumbnail){display:grid;grid-template-columns:auto minmax(0,1fr);justify-items:start}.clover-canvas-menu>.clover-canvas-transport-option{align-items:baseline}.clover-canvas-transport-chapter-span{position:absolute;z-index:1;top:50%;box-sizing:border-box;height:var(--clover-space-s);translate:0 -50%;opacity:.5;pointer-events:none}.clover-canvas-transport-seek-area>.clover-tip{left:var(--clover-transport-preview, 50%)}.clover-canvas-transport-seek-area>.clover-tip .clover-tip-image{width:var(--clover-picture);max-height:none}.clover-canvas-transport-seek-area:is(:hover,:has(>input:focus-visible)):not([data-tip-hidden])>.clover-tip{opacity:1;visibility:visible;pointer-events:auto}@media (forced-colors: active){.clover-canvas-transport-mark-point:after{position:absolute;top:calc(100% + 3px);left:50%;width:3px;height:calc(var(--clover-space-s) + var(--clover-transport-track));translate:-50% 0;content:""}.clover-canvas-transport-chapter-span{opacity:1}}.clover-canvas-transport-status>.clover-canvas-transport-chapter{flex:1 1 auto;overflow:hidden;width:0;min-width:0;text-overflow:ellipsis;white-space:nowrap}.clover-canvas[data-player]{--clover-controls-shown: 1;--clover-controls-events: auto}.clover-canvas[data-player]>.clover-canvas-scrim{display:none}.clover-canvas[data-player]>.clover-canvas-controls>*{opacity:1;translate:none}.clover-canvas[data-player]:has(>.clover-canvas-viewport:focus-visible)>.clover-canvas-media:after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none}.clover-canvas-player{--clover-player-pad: var(--clover-space-l);--clover-player-top: calc( var(--clover-canvas-controls-inset, var(--clover-space-l)) + var(--clover-control) + var(--clover-space-s) );--clover-player-bottom: calc( var(--clover-transport-room, 0px) + 2.7 * var(--clover-cue-size, var(--clover-text-s)) + 2 * var(--clover-space-2xs) + var(--clover-space-s) );--clover-player-art-height: max( 0px, calc(100cqb - var(--clover-player-top) - var(--clover-player-bottom)) );position:absolute;inset:0;isolation:isolate;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:var(--clover-player-top) var(--clover-player-pad) var(--clover-player-bottom)}.clover-canvas-player-ground{position:absolute;inset:0;z-index:-1;overflow:hidden;isolation:isolate}.clover-canvas-player-ground>img{position:absolute;inset:-24%;z-index:0;width:148%;height:148%;object-fit:cover}.clover-canvas-player-ground[data-art]:before{content:"";position:absolute;inset:0;z-index:1}.clover-canvas-player-ground[data-art]:after{content:"";position:absolute;inset:0;z-index:2}.clover-canvas-player-art{flex:none;display:grid;place-items:center;overflow:hidden;width:min(calc(var(--clover-player-art-height) * var(--clover-player-art-ratio, 1)),40cqi,12rem);aspect-ratio:var(--clover-player-art-ratio, 1)}.clover-canvas-player-art>img{display:block;width:100%;height:100%;object-fit:cover;opacity:0}.clover-canvas-player-art[data-loaded]>img{opacity:1}.clover-canvas-player-note{width:38.2%;height:38.2%;fill:currentColor;opacity:.85}.clover-canvas-player-head{flex:0 1 auto;max-width:38rem;min-width:0}.clover-canvas-player-title,.clover-canvas-player-part-of{overflow-wrap:break-word}.clover-canvas-player-title{text-wrap:balance}.clover-canvas-player-cues{display:contents}@container (max-width: 30rem){.clover-canvas-player{--clover-player-pad: var(--clover-space-m)}}@container (max-height: 24rem){.clover-canvas-player{--clover-player-room: calc( 100cqb - 2 * var(--clover-canvas-controls-inset) );--clover-player-art-height: clamp( var(--clover-player-art-least, 7.416rem), var(--clover-player-room), 12rem );--clover-player-centering: max( 0px, (var(--clover-player-room) - var(--clover-player-art-height)) / 2 );display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr auto auto;align-content:end;padding:calc(var(--clover-canvas-controls-inset) + var(--clover-player-centering)) var(--clover-canvas-controls-inset)}.clover-canvas-player-art{grid-row:1 / -1;align-self:end;width:min(calc(var(--clover-player-art-height) * var(--clover-player-art-ratio, 1)),38.2cqi,12rem)}.clover-canvas-player-head,.clover-canvas-player-cues,.clover-canvas-player .clover-canvas-transport-seek-area,.clover-canvas-player .clover-canvas-transport-bar{grid-column:2}.clover-canvas-player-head{grid-row:1;max-width:none;margin-inline-end:calc(var(--clover-canvas-controls-width, var(--clover-control)) + var(--clover-space-s))}.clover-canvas-player-cues{grid-row:2;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none}.clover-canvas-player-cues>.clover-canvas-captions{position:static;align-items:flex-start}.clover-canvas-player-cues .clover-canvas-captions-cue{max-width:100%;text-align:start}.clover-canvas-player>.clover-canvas-transport{display:contents}.clover-canvas-player>.clover-canvas-transport:before{display:none}.clover-canvas-player .clover-canvas-transport-seek-area{grid-row:3;z-index:2}.clover-canvas-player .clover-canvas-transport-bar{grid-row:4;z-index:2}.clover-canvas-player :is(.clover-canvas-transport-seek-area:is(:hover,:focus-within),.clover-canvas-transport-bar:has([aria-expanded=true],:focus-visible)){z-index:4}.clover-canvas-player-title,.clover-canvas-player-part-of{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.clover-canvas-player-part-of{-webkit-line-clamp:1}}@container (max-height: 24rem) and (max-width: 37.5rem){.clover-canvas-player{--clover-player-art-height: var(--clover-space-2xl);--clover-player-centering: 0px}.clover-canvas-player-art{grid-row:1;align-self:center}.clover-canvas-player-head{align-self:center}.clover-canvas-player-cues,.clover-canvas-player .clover-canvas-transport-seek-area,.clover-canvas-player .clover-canvas-transport-bar{grid-column:1 / -1}}@container (max-height: 15.236rem){.clover-canvas-player:has(>.clover-canvas-player-cues>.clover-canvas-captions)>.clover-canvas-player-head{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}@container (max-height: 15.236rem) and (max-width: 37.5rem){.clover-canvas-player:has(>.clover-canvas-player-cues>.clover-canvas-captions)>.clover-canvas-player-art{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}@media (forced-colors: active){.clover-canvas-player-ground{display:none}}.clover-scene>.clover-scene-navigation{position:absolute;right:var(--clover-canvas-controls-inset);bottom:var(--clover-canvas-controls-inset);z-index:3;display:flex;align-items:flex-end;pointer-events:none;touch-action:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;opacity:var(--clover-controls-shown);translate:0 calc((1 - var(--clover-controls-shown)) * var(--clover-controls-tuck))}.clover-scene-navigation :is(button,.clover-scene-rotate-disc){pointer-events:var(--clover-controls-events)}@media (hover: hover){.clover-scene:has(>.clover-scene-navigation :is(button,.clover-scene-rotate-disc):hover){--clover-controls-shown: 1;--clover-controls-events: auto}}.clover-scene:has(>.clover-scene-navigation)>.clover-canvas-viewport:before{position:absolute;inset:auto 0 0;height:calc(3 * var(--clover-control) + 2 * var(--clover-space-s) + 2 * var(--clover-canvas-controls-inset));opacity:var(--clover-controls-shown);pointer-events:none;content:""}.clover-scene>.clover-scene-navigation[data-compact]{--clover-control: max(1.5rem, 24px)}.clover-scene-tools{display:flex;margin-inline-end:calc(-1 * var(--clover-control))}.clover-scene-rotate{position:relative;display:grid;grid-template-columns:repeat(3,var(--clover-control));grid-template-rows:repeat(3,var(--clover-control));--clover-scene-rotate-rim: calc( .756 * var(--clover-control) + .874 * var(--clover-space-s) )}.clover-scene-rotate-disc{position:absolute;top:50%;left:50%;width:calc(2 * var(--clover-scene-rotate-rim));height:calc(2 * var(--clover-scene-rotate-rim));translate:-50% -50%;display:flex;align-items:center;justify-content:center;cursor:grab;isolation:isolate}.clover-scene-rotate-disc:active{cursor:grabbing}.clover-scene-rotate-disc:before{position:absolute;inset:0;z-index:-1;opacity:0;content:""}.clover-scene-rotate-disc:is(:hover,:active):before,.clover-scene-rotate:has(:focus-visible) .clover-scene-rotate-disc:before,.clover-scene-navigation[data-turning] .clover-scene-rotate-disc:before{opacity:1}.clover-scene-rotate-disc:is(:hover,:active),.clover-scene-rotate:has(:focus-visible) .clover-scene-rotate-disc,.clover-scene-navigation[data-turning] .clover-scene-rotate-disc{scale:1.06}.clover-scene-rotate-disc svg{width:100%;height:100%;fill:currentColor;stroke:currentColor}.clover-scene-rotate-cell{position:relative;z-index:1;display:flex}.clover-scene-rotate-cell[data-place=up]{grid-area:1 / 2}.clover-scene-rotate-cell[data-place=left]{grid-area:2 / 1}.clover-scene-rotate-cell[data-place=corner]{grid-area:3 / 3}.clover-scene-rotate-cell[data-place=right]{grid-area:2 / 3}.clover-scene-rotate-cell[data-place=down]{grid-area:3 / 2}.clover-scene .clover-scene-navigation .clover-scene-rotate-cell:not([data-place=corner]) button.clover-canvas-button svg{scale:none;rotate:none}.clover-scene>.clover-scene-error{position:absolute;inset:auto var(--clover-canvas-controls-inset) var(--clover-canvas-controls-inset);z-index:2}.clover-canvas-controls{--top: var(--clover-canvas-controls-inset);position:absolute;z-index:1;top:var(--top);right:var(--clover-canvas-controls-inset);display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:flex-end;max-height:calc(100% - var(--top) - var(--clover-canvas-controls-inset))}:is(button.clover-canvas-button,button.clover-canvas-transport-button,button.clover-items-scroll-prev,button.clover-items-scroll-next,button.clover-pager-previous,button.clover-pager-next,button.clover-panel-close){display:flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;width:var(--clover-control);height:var(--clover-control);cursor:pointer}:is(button.clover-canvas-button,button.clover-canvas-transport-button,button.clover-items-scroll-prev,button.clover-items-scroll-next,button.clover-pager-previous,button.clover-pager-next,button.clover-panel-close) svg{flex-shrink:0;width:1rem;height:1rem}button.clover-canvas-button svg{fill:currentColor;stroke:currentColor}:is(button.clover-pager-previous,button.clover-pager-next,button.clover-items-scroll-prev,button.clover-items-scroll-next,button.clover-canvas-transport-button)[aria-disabled=true]{cursor:default}:is(button.clover-pager-previous,button.clover-pager-next,button.clover-items-scroll-prev,button.clover-items-scroll-next,button.clover-canvas-transport-button)[aria-disabled=true] svg{opacity:.5}:is(button.clover-pager-previous,button.clover-pager-next,button.clover-items-scroll-prev,button.clover-items-scroll-next,button.clover-canvas-transport-button)[aria-disabled=true]:not(:focus-visible),:is(button.clover-pager-previous,button.clover-pager-next,button.clover-items-scroll-prev,button.clover-items-scroll-next):disabled{opacity:.38;pointer-events:none}button.clover-canvas-button[aria-disabled=true]{cursor:default}button.clover-canvas-button[aria-disabled=true] svg{opacity:.5}button.clover-canvas-button:is([data-button=rotate-right],[data-button=rotate-left]):is(:hover,:focus-visible) svg{rotate:45deg}button.clover-canvas-button[data-button=rotate-left] svg{scale:-1 1}button.clover-canvas-button[data-button=panel][data-side=start]:dir(ltr) svg{scale:-1 1}button.clover-canvas-button[data-button=rotate-left]:is(:hover,:focus-visible) svg{rotate:-45deg}button.clover-canvas-button[data-button=reset]:is(:hover,:focus-visible) svg{rotate:-15deg}button.clover-canvas-button[aria-disabled=true][data-button]:is(:hover,:focus-visible) svg{rotate:none}:where(:has(>.clover-tip)){position:relative}.clover-tip{position:absolute;z-index:4;bottom:calc(100% + var(--clover-space-xs));left:50%;translate:-50% 0;display:block;box-sizing:border-box;width:max-content;max-width:var(--clover-tip-room, none);white-space:normal;overflow-wrap:anywhere;transform:translate(var(--clover-tip-shift, 0px));pointer-events:none;opacity:0;visibility:hidden}:is(.clover-tip-image,.clover-annotations-image){display:block;width:auto;max-width:100%;height:auto;max-height:var(--clover-items-height, 8rem)}.clover-tip-lead{display:block}.clover-tip:before{position:absolute;inset-inline:0;top:100%;height:var(--clover-space-xs);content:""}:hover>.clover-tip{opacity:1;visibility:visible;pointer-events:auto}:focus-visible>.clover-tip,label:has(>input:focus-visible):not([data-tip-hidden])>.clover-tip{opacity:1;visibility:visible;pointer-events:auto}[data-tip-hidden]>.clover-tip{opacity:0;pointer-events:none}:is(.clover-canvas-controls,.clover-panel,.clover-template-document-toolbar,.clover-template-lightbox-header) .clover-tip,button.clover-canvas-placeholder-toggle>.clover-tip,button.clover-canvas-caption-close>.clover-tip,button.clover-template-document-sidebar-toggle>.clover-tip,:is(.clover-template-spine,.clover-template-document-spine) .clover-tip{top:calc(100% + var(--clover-space-xs));bottom:auto}:is(.clover-canvas-controls,.clover-panel,.clover-template-document-toolbar,.clover-template-lightbox-header) .clover-tip:before,button.clover-canvas-placeholder-toggle>.clover-tip:before,button.clover-canvas-caption-close>.clover-tip:before,button.clover-template-document-sidebar-toggle>.clover-tip:before,:is(.clover-template-spine,.clover-template-document-spine) .clover-tip:before{top:auto;bottom:100%}:is(.clover-canvas-transport-bar,.clover-template-document-toolbar)>:first-child .clover-tip,button.clover-items-scroll-prev>.clover-tip,button.clover-sections-scroll-prev>.clover-tip,button.clover-canvas-more-step[data-step=prev]>.clover-tip,.clover-transcript-languages>.clover-transcript-language>.clover-tip,.clover-template-document-sidebar-closed>button.clover-template-document-sidebar-toggle>.clover-tip,.clover-panel[data-floating]>button.clover-panel-close>.clover-tip{inset-inline:0 auto;translate:none}:is(.clover-canvas-transport-end,.clover-template-lightbox-header)>:last-child .clover-tip,.clover-canvas-controls>button:last-of-type>.clover-tip,button.clover-canvas-caption-close>.clover-tip,button.clover-items-scroll-next>.clover-tip,button.clover-sections-scroll-next>.clover-tip,button.clover-canvas-more-step[data-step=next]>.clover-tip,button.clover-canvas-placeholder-toggle>.clover-tip,.clover-panel:not([data-floating])>button.clover-panel-close>.clover-tip,.clover-sections-actions .clover-transcript-languages>.clover-transcript-language>.clover-tip{inset-inline:auto 0;translate:none}:is(button,a).clover-canvas-annotation>.clover-tip{text-align:start;--clover-tip-top: var(--clover-canvas-clear-top, var(--clover-space-xs));--clover-tip-bottom: var( --clover-canvas-clear-bottom, var(--clover-space-xs) );--clover-tip-x: clamp( var(--clover-space-xs) - var(--clover-overlay-x, 50cqw), -50%, 100cqw - var(--clover-space-xs) - var(--clover-overlay-x, 50cqw) - 100% );top:100%;bottom:auto;max-width:min(18rem,100cqw - 2 * var(--clover-space-xs));max-height:max(100cqh - var(--clover-tip-top) - var(--clover-tip-bottom),min(2 * var(--clover-space-2xl),100cqh - 2 * var(--clover-space-xs)));overflow-y:auto;translate:var(--clover-tip-x) 0;transform:none}:is(button,a).clover-canvas-annotation>.clover-tip:before{content:none}:is(button,a).clover-canvas-annotation[data-active=true][aria-current=true]:not([data-tip-hidden])>.clover-tip{opacity:1;visibility:visible;pointer-events:auto}:is(button,a).clover-canvas-annotation[data-overlay-room=below]>.clover-tip{top:100%;translate:var(--clover-tip-x) min(clamp(var(--clover-tip-top) - var(--clover-space-xs) - var(--clover-overlay-bottom),0px,100cqh - var(--clover-overlay-bottom) - var(--clover-tip-bottom) - 100%),100cqh - var(--clover-space-xs) - var(--clover-overlay-bottom) - 100%)}:is(button,a).clover-canvas-annotation[data-overlay-room=above]>.clover-tip{top:auto;bottom:100%;translate:var(--clover-tip-x) min(clamp(100% + var(--clover-tip-top) - var(--clover-overlay-top),0px,100cqh + var(--clover-space-xs) - var(--clover-tip-bottom) - var(--clover-overlay-top)),100cqh - var(--clover-overlay-top))}.clover-split-handle>.clover-tip{top:50%;bottom:auto;inset-inline:calc(100% + var(--clover-space-xs)) auto;translate:0 -50%;cursor:default}.clover-split-handle>.clover-tip:before{inset-block:0;inset-inline:auto 100%;width:var(--clover-space-xs);height:auto}.clover-tip-after{white-space:nowrap}label.clover-hide{position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:max(24px,var(--clover-space-l));height:max(24px,var(--clover-space-l));cursor:pointer}label.clover-hide svg{width:var(--clover-text-s);height:var(--clover-text-s)}button.clover-sections-button{display:flex;align-items:center;text-align:start;cursor:pointer}.clover-sections[data-layout=tabs] .clover-sections-tabs{--clover-sections-fade: calc(var(--clover-space-l) + var(--clover-space-s))}.clover-sections[data-layout=tabs] .clover-sections-row{position:relative}.clover-sections[data-layout=tabs] .clover-sections-list{display:flex;flex-wrap:nowrap;scroll-padding-inline:var(--clover-sections-fade);scrollbar-width:none}.clover-sections[data-layout=tabs] .clover-sections-list::-webkit-scrollbar{display:none}.clover-sections[data-layout=tabs] button.clover-sections-button{flex:none;white-space:nowrap}.clover-sections-tabs :is(button.clover-sections-scroll-prev,button.clover-sections-scroll-next){position:absolute;top:50%;z-index:1;translate:0 -50%}:is(button.clover-sections-scroll-prev,button.clover-sections-scroll-next)[hidden]{display:none}button.clover-sections-scroll-prev{inset-inline-start:0}button.clover-sections-scroll-next{inset-inline-end:0}:is(button.clover-sections-scroll-prev,button.clover-sections-scroll-next):dir(rtl) svg{scale:-1 1}.clover-sections[data-layout=accordion]{--clover-sections-step: calc( 1lh + var(--clover-space-s) + 2 * var(--clover-space-2xs) + 3px );--clover-sections-total: calc( var(--clover-sections-count) * var(--clover-sections-step) );display:flex;flex-direction:column}.clover-sections[data-layout=accordion] .clover-sections-item{display:contents;--clover-sections-before: calc( var(--clover-sections-index) * var(--clover-sections-step) );--clover-sections-after: calc( var(--clover-sections-total) - var(--clover-sections-before) - var(--clover-sections-step) )}.clover-sections[data-layout=accordion] .clover-sections-heading{position:sticky;z-index:1;top:calc(var(--clover-sections-inset-start, 0px) + var(--clover-sections-before));bottom:calc(var(--clover-sections-inset-end, 0px) + var(--clover-sections-after))}.clover-sections[data-layout=accordion] .clover-sections-panel *{scroll-margin-block:calc(var(--clover-sections-inset-start, 0px) + var(--clover-sections-total) - var(--clover-sections-after)) calc(var(--clover-sections-inset-end, 0px) + var(--clover-sections-after))}.clover-sections[data-layout=accordion][data-stacks=off] .clover-sections-heading{position:relative;inset-block:auto}.clover-sections[data-layout=accordion][data-stacks=off] .clover-sections-panel *{scroll-margin-block:0}@media (max-height: 32rem){.clover-sections[data-layout=accordion] .clover-sections-heading{position:relative;inset-block:auto}.clover-sections[data-layout=accordion] .clover-sections-panel *{scroll-margin-block:0}}.clover-sections-reach{position:absolute;inset-block:0;inset-inline:calc(-1 * var(--clover-sections-gutter, 0px));z-index:-1}.clover-sections[data-layout=accordion]>:first-child>.clover-sections-heading:before,.clover-sections[data-layout=accordion]>:last-child:not([data-open=true])>.clover-sections-heading:after{content:"";position:absolute;inset-inline:0}.clover-sections[data-layout=accordion]>:first-child>.clover-sections-heading:before{bottom:100%;height:var(--clover-sections-inset-start, 0px)}.clover-sections[data-layout=accordion]>:last-child:not([data-open=true])>.clover-sections-heading:after{top:100%;height:var(--clover-sections-inset-end, 0px)}@supports (animation-timeline: scroll()){.clover-sections[data-layout=accordion]>[data-open=true]>.clover-sections-heading>button:after,.clover-sections[data-layout=accordion]>[data-open=true]+*>.clover-sections-heading>button:before{content:"";position:absolute;inset-inline:0;height:var(--clover-space-xs);opacity:0;pointer-events:none}.clover-sections[data-layout=accordion]>[data-open=true]>.clover-sections-heading>button:after{top:calc(100% + 3px)}.clover-sections[data-layout=accordion]>[data-open=true]+*>.clover-sections-heading>button:before{bottom:calc(100% + var(--clover-space-s))}}.clover-sections[data-layout=accordion] button.clover-sections-button{position:relative;justify-content:space-between;width:100%}.clover-sections[data-layout=accordion] .clover-sections-actions{--clover-sections-own: calc( var(--clover-sections-total) - var(--clover-sections-before) - var(--clover-sections-after) );position:sticky;z-index:2;top:calc(var(--clover-sections-inset-start, 0px) + var(--clover-sections-before));bottom:calc(var(--clover-sections-inset-end, 0px) + var(--clover-sections-after));display:flex;align-items:center;align-self:flex-end;box-sizing:border-box;height:var(--clover-sections-own);pointer-events:none}.clover-sections-actions>*{pointer-events:auto}.clover-sections[data-layout=accordion] .clover-sections-actions:is(:empty,[hidden]){display:none}.clover-sections[data-layout=accordion][data-stacks=off] .clover-sections-actions{position:relative;inset-block:auto}@media (max-height: 32rem){.clover-sections[data-layout=accordion] .clover-sections-actions{position:relative;inset-block:auto}}.clover-sections[data-layout=accordion] .clover-sections-label{overflow-wrap:anywhere}.clover-sections[data-layout=accordion] .clover-sections-label:after{content:"";position:absolute;inset-inline:var(--clover-space-s);bottom:-3px;height:3px}.clover-sections[data-layout=accordion] button.clover-sections-button[aria-disabled]{cursor:default}.clover-sections[data-layout=accordion] .clover-sections-item[data-actions] .clover-sections-chevron{position:absolute;inset-inline-end:var(--clover-space-s)}.clover-sections[data-layout=accordion] .clover-sections-panel{isolation:isolate}.clover-read-more{display:flex;flex-direction:column;align-items:flex-start;min-width:0}button.clover-read-more-button{cursor:pointer}.clover-field-pill{display:flex;align-items:center;box-sizing:border-box}.clover-field-pill .clover-field-pill-query{flex:1 1 auto;min-width:0}.clover-field-pill-query::-webkit-search-cancel-button{display:none}button.clover-field-pill-clear{position:relative;display:flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:max(24px,var(--clover-space-l));height:max(24px,var(--clover-space-l));cursor:pointer}button.clover-field-pill-submit{position:relative;display:flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:var(--clover-control);height:var(--clover-control);cursor:pointer}button.clover-field-pill-submit svg{width:1rem;height:1rem}.clover-field-pill[data-size=small] button.clover-field-pill-submit{width:max(24px,var(--clover-space-l));height:max(24px,var(--clover-space-l))}.clover-field-pill[data-size=small] button.clover-field-pill-submit svg{width:.875rem;height:.875rem}button.clover-field-pill-submit:is(:hover,:focus-visible) svg{scale:1.1}.clover-field-pill>.clover-steps,.clover-field-pill-note{flex:none}.clover-field-pill-note{white-space:nowrap}.clover-steps{display:flex;flex:none;align-items:center}.clover-steps-position{display:inline-grid;justify-items:end}.clover-steps-position>[aria-hidden]{grid-area:1 / 1}.clover-steps-position>.clover-steps-room[hidden]{display:block;visibility:hidden}button.clover-steps-step{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:max(24px,var(--clover-space-l));height:max(24px,var(--clover-space-l));cursor:pointer}button.clover-steps-step[aria-disabled=true]{cursor:default}button.clover-steps-step[aria-disabled=true] svg{opacity:.5}button.clover-steps-step[aria-disabled=true]:not(:focus-visible){opacity:.38;pointer-events:none}.clover-entry-thumbnail{flex:none;width:var(--clover-space-l);height:var(--clover-space-l);object-fit:cover}.clover-entry-thumbnail[data-large]{grid-column:1 / -1;width:var(--clover-picture);max-width:100%;height:auto}.clover-cue-time{flex:none;min-width:var(--clover-space-l);align-self:baseline}.clover-cue-text{align-self:baseline;min-width:0}:is(.clover-transcript-languages,.clover-annotations-languages,.clover-about-languages){display:flex;flex-wrap:wrap}.clover-transcript-languages>.clover-transcript-language,.clover-annotations-languages>.clover-annotations-language,.clover-about-languages>.clover-about-language{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:max(24px,var(--clover-space-l));min-height:max(24px,var(--clover-space-l));cursor:pointer}.clover-languages-folded{position:relative;display:inline-flex;align-items:center}.clover-languages-glyph{display:flex;align-items:center}.clover-languages-glyph>svg{width:var(--clover-text-s);height:var(--clover-text-s)}button.clover-languages-button{position:relative;display:inline-flex;flex:none;align-items:center;box-sizing:border-box;min-width:max(24px,var(--clover-space-l));height:max(24px,var(--clover-space-l));cursor:pointer}button.clover-languages-button>svg:first-child{width:var(--clover-text-s);height:var(--clover-text-s)}button.clover-languages-button>.clover-languages-caret{width:.875em;height:.875em}.clover-languages-menu fieldset{display:flex;flex-direction:column}.clover-languages-menu .clover-languages-option{position:relative}button.clover-languages-button[aria-expanded=true]>.clover-tip{visibility:hidden}.clover-languages-menu{top:calc(100% + var(--clover-space-xs));inset-inline-end:0;max-width:min(20rem,80vw);text-align:start}.clover-summary:not([data-read-more=open]){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--clover-summary-lines, 5);overflow:hidden}:is(.clover-metadata,.clover-required-statement){display:flex;flex-direction:column}.clover-summary,:is(.clover-metadata,.clover-required-statement) :is(dt,dd){overflow-wrap:anywhere}:is(.clover-homepage,.clover-rendering,.clover-see-also,.clover-part-of)>li{min-block-size:24px}:is(.clover-homepage,.clover-rendering,.clover-see-also,.clover-part-of) a,a:is(.clover-id,.clover-rights){overflow-wrap:anywhere}.clover-provider{display:flex;flex-wrap:wrap;list-style:none}.clover-provider:empty{display:none}.clover-provider-agent{display:flex;align-items:center;min-block-size:24px}.clover-provider-link,.clover-provider-content{display:inline-flex;flex-wrap:wrap;align-items:center}.clover-provider-link{overflow-wrap:anywhere}.clover-logo{display:block;width:auto;max-width:100%;height:var(--clover-logo-height, 1.618rem);object-fit:contain}.clover-label{text-wrap:balance}.clover-status[data-status=loading]{display:flex}.clover-items{--clover-items-ring-room: 4px;--clover-items-picture-height: var(--clover-items-height, 8rem)}.clover-items-header{display:flex;flex-wrap:wrap;align-items:baseline}.clover-items-description{flex:1 0 100%;order:3;margin:0}.clover-items-homepage{margin-inline-start:auto}.clover-items-track{margin:0;padding:0;list-style:none}.clover-items-viewport{scroll-padding-inline:var(--clover-items-ring-room);scrollbar-width:none}.clover-items[data-layout=slider] .clover-items-viewport{scroll-padding-inline:calc(var(--clover-items-ring-room) + var(--clover-items-inset, 0px))}.clover-items-viewport::-webkit-scrollbar{display:none}.clover-items-viewport[data-dragging]{cursor:grabbing;-webkit-user-select:none;user-select:none}@supports (timeline-scope: --clover-items-track){.clover-items[data-layout=slider] .clover-items-frame:before,.clover-items[data-layout=slider] .clover-items-frame:after{content:"";position:absolute;top:var(--clover-items-ring-room);z-index:1;width:var(--clover-space-s);height:var(--clover-items-picture-height);opacity:0;pointer-events:none}.clover-items[data-layout=slider] .clover-items-frame:before{left:calc(-1 * var(--clover-items-ring-room))}.clover-items[data-layout=slider] .clover-items-frame:after{right:calc(-1 * var(--clover-items-ring-room))}.clover-items[data-layout=slider] .clover-items-frame[dir=rtl]:before{right:calc(-1 * var(--clover-items-ring-room));left:auto}.clover-items[data-layout=slider] .clover-items-frame[dir=rtl]:after{left:calc(-1 * var(--clover-items-ring-room));right:auto}}.clover-items[data-layout=list] .clover-items-track{display:flex;flex-direction:column}.clover-items:is([data-layout=grid],[data-layout=masonry]) .clover-items-track{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--clover-items-size, 10rem)),1fr))}.clover-items-item{position:relative;cursor:pointer}.clover-items-link{display:block}.clover-items-figure{display:grid;grid-template-columns:repeat(var(--parts, 1),auto);justify-content:start;margin:0}.clover-items-pictures{position:relative;display:grid;grid-column:1 / -1;grid-template-columns:subgrid}.clover-items-picture{position:relative;display:block;overflow:hidden}.clover-items-picture img{display:block;opacity:0}.clover-items-picture[data-loaded=true] img{opacity:1}.clover-items-picture[data-empty]{display:grid;place-items:center;aspect-ratio:var(--clover-items-ratio, 1)}.clover-items-picture[data-empty]>svg{width:33%;max-width:var(--clover-space-xl);height:auto;fill:currentColor}.clover-items-duration{position:absolute;inset-inline-end:var(--clover-space-xs);bottom:var(--clover-space-xs)}.clover-items-caption{display:grid;grid-column:1 / -1;grid-template-columns:subgrid}.clover-items-label{position:relative;contain:inline-size}.clover-items:is([data-layout=slider],[data-layout=grid],[data-layout=masonry]) .clover-items-label-text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--clover-items-lines, 3);line-clamp:var(--clover-items-lines, 3)}.clover-items-label-full{position:absolute;inset-inline:0;bottom:0;z-index:1;pointer-events:none}:is(.clover-items-item[role=option],.clover-items-link):is(:hover,:focus-visible):not([data-full-hidden]) .clover-items-label[data-clamped]>.clover-items-label-full{display:block}.clover-items-date{grid-column:1 / -1}.clover-items-summary{grid-column:1 / -1}.clover-items[data-layout=slider] .clover-items-picture[data-empty],.clover-items[data-layout=slider] .clover-items-picture img{width:auto;height:var(--clover-items-picture-height)}.clover-items:is([data-layout=grid],[data-layout=masonry]) .clover-items-figure{grid-template-columns:repeat(var(--parts, 1),1fr)}.clover-items:is([data-layout=grid],[data-layout=masonry]) .clover-items-pictures{aspect-ratio:1;overflow:hidden}.clover-items:is([data-layout=grid],[data-layout=masonry]) .clover-items-picture{min-width:0}.clover-items:is([data-layout=grid],[data-layout=masonry]) .clover-items-picture img{width:100%;height:100%;object-fit:contain}.clover-items[data-layout=masonry] .clover-items-viewport[data-masonry] .clover-items-track{grid-auto-rows:4px;align-items:start}.clover-items[data-layout=masonry] .clover-items-pictures{aspect-ratio:auto}.clover-items[data-layout=masonry] .clover-items-picture img{height:auto}.clover-items[data-layout=list] .clover-items-figure{grid-template-columns:auto 1fr;align-items:start}.clover-items[data-layout=list] .clover-items-pictures{grid-column:1;grid-template-columns:repeat(var(--parts, 1),auto)}.clover-items[data-layout=list] .clover-items-caption{grid-column:2;grid-template-columns:none}.clover-items[data-layout=list] .clover-items-label{contain:none}.clover-items[data-layout=list] .clover-items-picture img{width:auto;height:var(--clover-space-xl)}.clover-items[data-layout=list] .clover-items-picture[data-empty]{height:var(--clover-space-xl)}:is(.clover-items-item[role=option],.clover-items-link):focus-visible .clover-items-pictures:after{position:absolute;inset:0;content:"";pointer-events:none}:is(button.clover-items-scroll-prev,button.clover-items-scroll-next){position:absolute;top:calc(var(--clover-items-picture-height) / 2);z-index:2;translate:0 -50%}.clover-items-scroll-prev{inset-inline-start:var(--clover-space-2xs)}.clover-items-scroll-next{inset-inline-end:var(--clover-space-2xs)}.clover-items[data-layout=slider][data-orientation=vertical]{display:flex;flex-direction:column;height:100%}.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-frame{--clover-items-ends: calc(var(--clover-control) + var(--clover-space-m));flex:1;min-height:0;padding-block:var(--clover-items-ends)}.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-viewport{box-sizing:border-box;height:calc(100% + 2 * var(--clover-items-ring-room));scroll-padding:calc(var(--clover-items-ring-room) + var(--clover-items-inset, 0px)) 0}.clover-items[data-orientation=vertical] .clover-items-figure{grid-template-columns:repeat(var(--parts, 1),1fr)}.clover-items[data-orientation=vertical] .clover-items-picture img,.clover-items[data-orientation=vertical] .clover-items-picture[data-empty]{width:100%;height:auto}.clover-items[data-orientation=vertical] .clover-items-picture[data-empty]{aspect-ratio:4 / 3}@supports (timeline-scope: --clover-items-track){.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-frame:before,.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-frame:after{left:0;right:0;width:auto;height:var(--clover-space-s)}.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-frame:before{top:calc(var(--clover-items-ends) - var(--clover-items-ring-room))}.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-frame:after{top:auto;bottom:calc(var(--clover-items-ends) - var(--clover-items-ring-room))}}.clover-items[data-orientation=vertical] :is(button.clover-items-scroll-prev,button.clover-items-scroll-next){inset-inline:auto;left:50%;translate:-50% 0}.clover-items[data-orientation=vertical] button.clover-items-scroll-prev,.clover-items[data-orientation=vertical][data-upward] button.clover-items-scroll-next{top:0;bottom:auto}.clover-items[data-orientation=vertical] button.clover-items-scroll-next,.clover-items[data-orientation=vertical][data-upward] button.clover-items-scroll-prev{top:auto;bottom:0}.clover-pager{display:flex;align-items:center;justify-content:center}.clover-pager-position{display:inline-grid;justify-items:end}.clover-pager[data-direction=right-to-left] .clover-pager-position{justify-items:start}.clover-pager-position>[aria-hidden]{grid-area:1 / 1}.clover-pager-position>.clover-pager-room[hidden]{display:block;visibility:hidden}.clover-pager:has(>.clover-pager-count){position:relative;z-index:5}.clover-pager-count{position:relative}.clover-pager:has(>.clover-pager-count)>button,.clover-pager-count>.clover-pager-count-button{position:relative;z-index:1}.clover-pager-count-button{display:inline-flex;align-items:center;min-height:var(--clover-space-l);cursor:pointer}.clover-pager-count-button .clover-pager-position>span{grid-area:1 / 1}.clover-pager-count>.clover-pager-menu{z-index:0;top:calc(-1 * var(--clover-space-m));inset-inline-start:calc(-1 * var(--clover-space-m));width:min(20rem,calc(100vw - 2 * var(--clover-space-m)));max-height:min(24rem,60vh);max-height:min(24rem,60dvh);--clover-pager-menu-head: calc( var(--clover-space-m) + var(--clover-space-l) + var(--clover-space-m) )}.clover-pager-count>.clover-pager-menu{display:flex;flex-direction:column;overflow:hidden}.clover-pager-count>.clover-pager-menu>.clover-pager-list{min-height:0;overflow-y:auto;overscroll-behavior:contain}@supports (timeline-scope: --clover-pager-list){.clover-pager-count>.clover-pager-menu:before{content:"";position:absolute;z-index:1;top:calc(var(--clover-pager-menu-head) - var(--clover-items-ring-room, 4px));inset-inline:calc(var(--clover-space-m) - var(--clover-items-ring-room, 4px));height:var(--clover-space-s);opacity:0;pointer-events:none}}.clover-pager[data-direction=right-to-left] .clover-pager-count>.clover-pager-menu{inset-inline:auto calc(-1 * var(--clover-space-m))}.clover-pager-count-button[aria-expanded=true] svg{rotate:180deg}.clover-pager-list.clover-collection>.clover-items{margin:0}.clover-panel{display:flex;flex-direction:column;min-width:0;--clover-sections-inset-start: calc( var(--clover-inset) - var(--clover-space-s) );--clover-sections-inset-end: var(--clover-sections-inset-start);--clover-sections-gutter: calc( var(--clover-inset) - var(--clover-space-s) - .5px )}@media (width < 31rem){.clover-panel{--clover-inset: var(--clover-space-m)}}.clover-panel[data-closable]{--clover-panel-clear: calc( var(--clover-space-xs) + var(--clover-control) - var(--clover-inset) );--clover-sections-inset-start: calc( var(--clover-inset) + var(--clover-panel-clear) );position:relative}.clover-panel[data-closable] .clover-sections-tabs{padding-inline-end:var(--clover-panel-clear)}.clover-panel[data-closable][data-floating] .clover-sections-tabs{padding-inline:var(--clover-panel-clear) 0}.clover-panel[data-closable]>.clover-sections[data-layout=accordion]{padding-block-start:calc(var(--clover-panel-clear) + var(--clover-space-s))}.clover-panel>button.clover-panel-close{position:absolute;inset-block-start:var(--clover-space-xs);inset-inline-end:var(--clover-space-xs);z-index:2}.clover-panel[data-floating]>button.clover-panel-close{inset-inline:var(--clover-space-xs) auto}.clover-split-pane[data-spine]{overflow:visible}[data-spine]>.clover-panel{--clover-panel-clear: calc(-1 * var(--clover-space-s));position:static;box-sizing:border-box;height:100%;overflow-y:auto;touch-action:pan-y}[data-spine]>.clover-panel>button.clover-panel-close{inset-block-start:calc(var(--clover-inset) - var(--clover-space-s) + (1lh + 2 * var(--clover-space-s) - var(--clover-control)) / 2);inset-inline:calc(-.618 * var(--clover-control)) auto}:is(.clover-annotations-entry,button.clover-contents-button,.clover-transcript-cue>button,button.clover-content-search-hit,.clover-geomap-places button){box-sizing:border-box;width:100%;text-align:start;cursor:pointer}:is(.clover-annotations-list,.clover-contents-list,.clover-transcript-cues,.clover-content-search-hits,.clover-geomap-places){display:flex;flex-direction:column;list-style:none}.clover-about{display:flex;flex-direction:column}.clover-about-languages{justify-content:flex-end}.clover-about-actions{display:flex;align-items:center;justify-content:flex-end}.clover-about-download{position:relative;display:inline-flex}button.clover-about-download-button{position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:max(24px,var(--clover-space-l));height:max(24px,var(--clover-space-l));cursor:pointer}button.clover-about-download-button svg{width:var(--clover-text-s);height:var(--clover-text-s)}.clover-about-download-menu{top:calc(100% + var(--clover-space-xs));inset-inline-end:0;max-width:min(20rem,80vw);text-align:start}.clover-about{--clover-about-thumbnail-height: calc( var(--clover-items-height, 8rem) * .618 )}.clover-about-head{display:flow-root}.clover-about-thumbnail{float:right;display:block;width:auto;height:var(--clover-about-thumbnail-height);max-width:min(50%,calc(2 * var(--clover-about-thumbnail-height)));object-fit:cover}:dir(rtl) .clover-about-thumbnail{float:left}.clover-about-head:has(.clover-about-thumbnail)+*>:first-child:before{content:"";float:right;width:calc(var(--clover-about-thumbnail-width, 0px) + var(--clover-space-m));height:max(0px,calc(var(--clover-about-thumbnail-height) - var(--clover-about-label-height, 0px) + var(--clover-space-3xs)))}:dir(rtl) .clover-about-head:has(.clover-about-thumbnail)+*>:first-child:before{float:left}.clover-about ul{list-style:none}.clover-about a{overflow-wrap:anywhere}.clover-about-part-of>li{display:flex;flex-direction:column;align-items:flex-start}button.clover-about-open{min-height:max(24px,var(--clover-space-l));cursor:pointer}.clover-collection-title{text-wrap:balance}.clover-collection .clover-items[data-layout=list] .clover-items-picture img{width:var(--clover-space-xl);height:var(--clover-space-xl);object-fit:cover}.clover-collection .clover-items-caption{min-width:0}.clover-collection :is(.clover-items-label,.clover-items-summary){min-width:0;overflow-wrap:anywhere}.clover-targets-head{display:flex;flex-wrap:wrap;align-items:center}.clover-targets-head>.clover-targets-steps{margin-inline-start:auto}.clover-split{align-items:stretch;min-width:0}.clover-split-pane{box-sizing:border-box;flex:1 1 0}.clover-split-pane[data-sized]{flex:0 1 var(--clover-split-size, auto);max-width:var(--clover-split-max, none)}.clover-split-handle{position:relative;z-index:1;flex:0 0 3px;align-self:stretch;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.clover-split-handle:before{content:"";position:absolute;inset-block:0;inset-inline:calc((3px - var(--clover-space-l)) / 2)}.clover-split-handle:after{content:"";position:absolute;inset-inline:-1.5px;top:50%;height:var(--clover-space-xl);translate:0 -50%}:is(.clover-annotations,.clover-canvas-annotation-menu){display:flex;flex-direction:column}:is(div,legend).clover-annotations-set-header{display:flex;align-items:center}.clover-annotations-set-header>.clover-hide{margin-inline-start:auto}.clover-annotations-languages{margin-inline-start:auto}:is(li,label).clover-annotations-entry{display:flex;align-items:flex-start}:is(li,label).clover-annotations-entry{content-visibility:auto;contain-intrinsic-size:auto 2.618rem}.clover-annotations-body{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.clover-annotations-body>.clover-annotations-image+.clover-annotations-text{display:block}.clover-annotations-body ul{list-style-type:disc}.clover-annotations-body :is(ul,ol) ul{list-style-type:circle}.clover-annotations-body ol{list-style-type:decimal}:is(a,button).clover-annotations-link{display:inline-block;min-height:max(24px,var(--clover-space-l));cursor:pointer}a.clover-annotations-link{display:inline-flex;align-items:center}a.clover-annotations-link svg{flex:none;width:.875em;height:.875em}.clover-annotations-canvas{display:flex;flex-direction:column}.clover-download-groups{display:flex;flex-direction:column}.clover-download-title{display:block}.clover-download-list{list-style:none}.clover-download-link{display:block;overflow-wrap:anywhere}.clover-transcript{display:flex;flex-direction:column}.clover-transcript-cues{display:grid;grid-template-columns:auto minmax(0,1fr)}.clover-transcript-cue,.clover-transcript-cue>button{display:grid;grid-column:1 / -1;grid-template-columns:subgrid}.clover-transcript-body{display:flex;flex-direction:column}.clover-transcript-body>p{white-space:pre-line;overflow-wrap:anywhere}.clover-transcript-languages{justify-content:flex-end}.clover-transcript-find-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.clover-transcript-more{height:1px}.clover-transcript{--clover-transcript-at: var(--clover-transcript-top, 0px)}.clover-sections[data-layout=accordion] .clover-transcript{--clover-transcript-at: calc( var(--clover-sections-inset-start, 0px) + var(--clover-sections-total) - var(--clover-sections-after) )}.clover-transcript[data-sticky]>.clover-transcript-find{position:sticky;z-index:1;top:var(--clover-transcript-at)}.clover-transcript[data-sticky] .clover-transcript-cue>button{scroll-margin-top:calc(var(--clover-transcript-at) + var(--clover-transcript-find, 0px) + var(--clover-space-l))}@supports (animation-timeline: scroll()){.clover-transcript[data-sticky]>.clover-transcript-find:after{content:"";position:absolute;top:100%;inset-inline:0;height:var(--clover-space-l);opacity:0;pointer-events:none}.clover-sections[data-layout=accordion]>[data-open=true]:has(.clover-transcript[data-sticky] .clover-transcript-find)>.clover-sections-heading>button:after{content:none}}.clover-sections[data-layout=accordion][data-stacks=off] .clover-transcript[data-sticky]>.clover-transcript-find{position:relative;top:auto}@media (max-height: 32rem){.clover-sections[data-layout=accordion] .clover-transcript[data-sticky]>.clover-transcript-find{position:relative;top:auto}}button.clover-contents-button{display:block}.clover-contents-item{display:flex;flex-direction:column}.clover-contents-row{display:flex;align-items:center}.clover-contents-row>button.clover-contents-button{flex:1;min-width:0}button.clover-contents-toggle{display:flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;width:max(24px,var(--clover-space-l));height:max(24px,var(--clover-space-l));cursor:pointer}button.clover-contents-button:is([data-timed=true],[data-pictured=true]){display:grid;justify-items:start}button.clover-contents-button[data-timed=true]{grid-template-columns:auto minmax(0,1fr)}button.clover-contents-button:disabled{cursor:default}.clover-contents-steps{flex-shrink:0}.clover-contents-row:has(>.clover-contents-steps){flex-wrap:wrap}.clover-contents-row:has(>.clover-contents-steps)>button.clover-contents-button{flex:1 1 auto;width:auto}.clover-content-search{display:flex;flex-direction:column}.clover-content-search{--clover-content-search-at: var(--clover-content-search-top, 0px)}.clover-sections[data-layout=accordion] .clover-content-search{--clover-content-search-at: calc( var(--clover-sections-inset-start, 0px) + var(--clover-sections-total) - var(--clover-sections-after) )}.clover-content-search[data-sticky]>.clover-content-search-field{position:sticky;z-index:1;top:var(--clover-content-search-at)}.clover-content-search[data-sticky] button.clover-content-search-hit{scroll-margin-top:calc(var(--clover-content-search-at) + var(--clover-content-search-field, 0px) + var(--clover-space-l))}@supports (animation-timeline: scroll()){.clover-content-search[data-sticky]>.clover-content-search-field:after{content:"";position:absolute;top:100%;inset-inline:0;height:var(--clover-space-l);opacity:0;pointer-events:none}.clover-sections[data-layout=accordion]>[data-open=true]:has(.clover-content-search[data-sticky])>.clover-sections-heading>button:after{content:none}}.clover-sections[data-layout=accordion][data-stacks=off] .clover-content-search[data-sticky]>.clover-content-search-field{position:relative;top:auto}@media (max-height: 32rem){.clover-sections[data-layout=accordion] .clover-content-search[data-sticky]>.clover-content-search-field{position:relative;top:auto}}.clover-content-search-status:not([data-status=loading],[data-status=error]),.clover-content-search-status:empty{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.clover-content-search-hits>li{content-visibility:auto;contain-intrinsic-size:auto 3.236rem}.clover-content-search-more{height:1px}button.clover-content-search-hit{display:block;overflow-wrap:anywhere}.clover-geomap{display:grid}.clover-geomap>div:first-child{overflow:hidden}.clover-geomap-error{position:absolute;inset:0;display:grid;place-items:center;text-align:center}.clover-geomap>div:has(.maplibregl-canvas:focus-visible):after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}.clover-geomap{--clover-map-controls-inset: var(--clover-inset);--clover-map-controls-top: 0px;--clover-map-controls-start: calc( 2 * var(--clover-control) + 2 * var(--clover-space-s) )}.clover-geomap :is(.maplibregl-ctrl-top-right,.maplibregl-ctrl-bottom-right){right:var(--clover-map-controls-inset)!important}.clover-geomap .maplibregl-ctrl-top-right{top:var(--clover-map-controls-inset)!important}.clover-geomap :is(.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right){bottom:var(--clover-map-controls-inset)!important}.clover-geomap .maplibregl-ctrl-bottom-left{left:var(--clover-map-controls-inset)!important}.clover-geomap :is(.maplibregl-ctrl-top-right,.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right)>.maplibregl-ctrl{float:none!important}.clover-geomap .maplibregl-ctrl-group{display:flex}.clover-geomap .maplibregl-ctrl-group button{position:relative!important;display:flex!important;align-items:center;justify-content:center;box-sizing:border-box;width:var(--clover-control)!important;height:var(--clover-control)!important;cursor:pointer}.clover-geomap .maplibregl-ctrl-group button .maplibregl-ctrl-icon{display:none!important}.clover-geomap .clover-geomap-glyph{flex:none;width:1rem;height:1rem}.clover-geomap>div:first-child{container-type:size}.clover-geomap .maplibregl-ctrl-attrib.maplibregl-compact{display:flex;flex-direction:row-reverse;align-items:flex-end;box-sizing:border-box!important;min-height:0!important;max-width:calc(100cqi - 2 * var(--clover-map-controls-inset) - var(--clover-map-controls-start))}.clover-geomap .maplibregl-ctrl-attrib-button{position:relative!important;inset:auto!important;display:inline-flex!important;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:var(--clover-space-l)!important;height:var(--clover-space-l)!important;cursor:pointer;list-style:none}.clover-geomap .maplibregl-ctrl-attrib-button::-webkit-details-marker{display:none}.clover-geomap .maplibregl-ctrl-attrib-button:before{content:none!important}.clover-geomap .maplibregl-ctrl-attrib-button .clover-geomap-glyph{width:var(--clover-text-s);height:var(--clover-text-s)}.clover-geomap .maplibregl-compact-show>.maplibregl-ctrl-attrib-button>.clover-tip{opacity:0;visibility:hidden}.clover-geomap .maplibregl-compact-show .maplibregl-ctrl-attrib-inner{box-sizing:border-box;min-width:0;max-height:max(calc(100cqb - 2 * var(--clover-map-controls-inset) - var(--clover-map-controls-top)),calc(2lh + 2 * var(--clover-space-2xs)));overflow-y:auto;text-align:end;overflow-wrap:anywhere}.clover-geomap .maplibregl-ctrl-top-right .clover-tip{top:calc(100% + var(--clover-space-xs));bottom:auto}.clover-geomap .maplibregl-ctrl-top-right .clover-tip:before{top:auto;bottom:100%}.clover-geomap-popup{pointer-events:none}.clover-geomap-popup .maplibregl-popup-tip{display:none!important}.clover-geomap-popup .maplibregl-popup-content{max-width:min(18rem,100cqi - 2 * var(--clover-space-xs))}.clover-geomap-popup-date{display:block}.clover-geomap-places :is(span+span,.clover-geomap-place-date){display:block}.clover-collection-select{display:flex;flex-wrap:wrap;align-items:center}.clover-collection-select-control{min-width:0;max-width:100%}.clover-template-default{--clover-body-height: min(65vh, 40rem);display:flex;flex-direction:column}@supports (height: 1svh){.clover-template-default{--clover-body-height: min(65svh, 40rem)}}.clover-template-default:is([data-fill],:fullscreen){--clover-body-height: auto;height:100%;min-height:min-content}.clover-template-default:is([data-fill],:fullscreen)>.clover-template-default-panes{flex:1 1 auto}.clover-template-default:is([data-fill],:fullscreen) .clover-template-default-body{flex:1 1 0;min-height:16rem}.clover-template-default-header{display:flex;align-items:center}.clover-template-default-header:empty{display:none}@media (width < 31rem){.clover-template-default-header,.clover-template-default-rail{--clover-inset: var(--clover-space-m)}}.clover-template-default-pager{flex:none}.clover-template-default-header:has(>.clover-template-default-pager){flex-wrap:wrap}.clover-template-default-header:has(>.clover-template-default-pager)>:is(.clover-template-default-title,.clover-template-default-pager){align-self:last baseline}.clover-template-default-header:has(>.clover-template-default-collection-row){display:grid;grid-template-columns:minmax(0,1fr) fit-content(38.2%)}.clover-template-default-header>:is(.clover-template-default-title,.clover-template-default-collection-row){grid-column:1}.clover-template-default-header:has(>.clover-template-default-collection-row)>.clover-template-default-provider{grid-column:2;grid-row:1 / span 2;align-self:end;max-width:none}.clover-template-default-collection-row{display:flex;flex-wrap:wrap;align-items:center;min-width:0}.clover-template-default-collection{min-width:0;overflow-wrap:anywhere}.clover-template-default-provider{flex:0 1 auto;max-width:38.2%;margin-inline-start:auto}@container clover-template-default-main (width < 36rem){.clover-template-default-header:has(>.clover-template-default-collection-row)>.clover-template-default-provider{grid-row:1;align-self:start}.clover-template-default-header>.clover-template-default-collection-row{grid-column:1 / -1}}@container clover-template-default-main (width < 26rem){.clover-template-default:has(.clover-template-default-panel[data-about]) .clover-template-default-provider{display:none}}.clover-template-default-panes{position:relative}.clover-template-default-main{display:flex;flex-direction:column;container:clover-template-default-main / inline-size}.clover-template-panes[data-panel=over]>.clover-template-default-main{isolation:isolate}.clover-template-panes{position:relative}.clover-template-panel{contain:size;overflow-y:auto}.clover-template-panel[hidden]{display:none}.clover-template-panes>.clover-template-panel-handle{translate:-1.5px 0}.clover-template-panes:dir(rtl)>.clover-template-panel-handle{translate:1.5px 0}.clover-template-default-panes:dir(ltr) .clover-items:not([data-orientation=vertical]) .clover-items-viewport{margin-right:0}.clover-template-default-panes:dir(rtl) .clover-items:not([data-orientation=vertical]) .clover-items-viewport{margin-left:0}.clover-template-default-panes:dir(ltr) .clover-items .clover-items-frame:not([dir=rtl]):after,.clover-template-default-panes:dir(ltr) .clover-items .clover-items-frame[dir=rtl]:before{right:0}.clover-template-default-panes:dir(rtl) .clover-items .clover-items-frame:not([dir=rtl]):before,.clover-template-default-panes:dir(rtl) .clover-items .clover-items-frame[dir=rtl]:after{left:0}.clover-template-panes[data-panel=over]{overflow:clip}.clover-template-panes[data-panel=over]>.clover-template-drawer{position:absolute;inset-block:0;inset-inline-end:0;z-index:4;width:min(24rem,calc(100% - var(--clover-space-2xl)));max-width:none;max-height:none;--clover-template-out: translateX(calc(100% + var(--clover-space-xl)));transform:var(--clover-template-out)}.clover-template-panes[data-panel=over]>.clover-template-drawer:dir(rtl){--clover-template-out: translateX(calc(-100% - var(--clover-space-xl)))}.clover-template-panes[data-panel=over]>.clover-template-drawer[data-side=start]{inset-inline:0 auto;--clover-template-out: translateX(calc(-100% - var(--clover-space-xl)))}.clover-template-panes[data-panel=over]>.clover-template-drawer[data-side=start]:dir(rtl){--clover-template-out: translateX(calc(100% + var(--clover-space-xl)))}.clover-template-panes[data-panel=over]>.clover-template-drawer,.clover-template-float{touch-action:pan-y}.clover-template-panes[data-panel=over]>.clover-template-drawer[data-open=true]{transform:none}.clover-template-scrim{position:absolute;inset:0;z-index:3;opacity:0;cursor:pointer}.clover-template-scrim[data-open=true]{opacity:1}.clover-template-default-rail{display:flex;flex-direction:column}.clover-template-default-rail:not([data-orientation=vertical]) .clover-items-viewport{margin-inline-end:0}.clover-template-default-rail:not([data-orientation=vertical]) .clover-items-frame:not([dir=rtl])>button.clover-items-scroll-prev,.clover-template-default-rail:not([data-orientation=vertical]) .clover-items-frame[dir=rtl]>button.clover-items-scroll-next{left:calc(-1 * var(--clover-space-s))}.clover-template-default-rail:not([data-orientation=vertical]) .clover-items-frame:not([dir=rtl])>button.clover-items-scroll-next,.clover-template-default-rail:not([data-orientation=vertical]) .clover-items-frame[dir=rtl]>button.clover-items-scroll-prev{right:var(--clover-inset)}.clover-template-default-rail:not(:has(.clover-items,.clover-pager-position)){display:none}.clover-template-default-views{display:contents}.clover-template-default-views[data-orientation=vertical]{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;flex:1 1 auto}.clover-template-default:is([data-fill],:fullscreen) .clover-template-default-views[data-orientation=vertical]{flex:1 1 0;min-height:16rem}.clover-template-default-views[data-orientation=vertical]>.clover-template-default-body{grid-area:1 / 2}.clover-template-default-views>.clover-template-default-rail[data-orientation=vertical]{grid-area:1 / 1;width:var(--clover-template-default-rail-width, 9rem);contain:size}.clover-template-default-views[data-orientation=vertical]>.clover-template-default-rail-header{grid-area:2 / 2}.clover-template-default-views[data-orientation=vertical]>.clover-template-default-rail-header:not(:has(.clover-pager-position)){display:none}@container clover-template-default-main (width < 36rem){.clover-template-default-rail[data-orientation=vertical]{--clover-template-default-rail-width: 6rem}}.clover-template-default-rail[data-orientation=vertical]>.clover-items{flex:1 1 0;min-height:0}.clover-template-default-rail-header{display:flex;align-items:baseline;justify-content:space-between}.clover-template-default-titles{min-width:0;overflow-wrap:anywhere}.clover-template-default-rail-header .clover-pager-position{flex-shrink:0;margin-inline-start:auto}.clover-template-spine{position:relative;z-index:4;flex:none;width:0}.clover-template-spine>*{position:absolute;top:calc(var(--clover-template-spine-top, 0px) + var(--clover-inset));inset-inline-start:-1.5px;translate:-50%}.clover-template-panes:has(>.clover-template-spine)>:first-child .clover-canvas>.clover-canvas-controls[data-fit]{inset-inline-end:calc(var(--clover-control) / 2 - 1.5px + var(--clover-space-xs))}.clover-root[data-status=idle] .clover-template-spine{visibility:hidden}.clover-template-spine:dir(rtl)>*{translate:50%}.clover-template-lightbox{position:absolute;inset:0;z-index:10}.clover-template-lightbox[hidden]{display:none}.clover-template-lightbox-content{position:sticky;overflow-y:auto;top:calc(var(--clover-template-lightbox-top, 0px) + var(--clover-template-lightbox-inset, 0px));box-sizing:border-box;display:flex;flex-direction:column;height:min(100%,calc(100vh - var(--clover-template-lightbox-top, 0px) - 2 * var(--clover-template-lightbox-inset, 0px)));--clover-body-height: min(70vh, 48rem)}@supports (height: 1svh){.clover-template-lightbox-content{height:min(100%,calc(100svh - var(--clover-template-lightbox-top, 0px) - 2 * var(--clover-template-lightbox-inset, 0px)));--clover-body-height: min(70svh, 48rem)}}.clover-template-lightbox-content>.clover-template-lightbox-panes{flex:1 1 auto;min-height:16rem}.clover-template-lightbox-main{display:flex;flex-direction:column;min-height:0}.clover-template-lightbox-main>.clover-template-lightbox-body{flex:1 1 auto;min-height:0}.clover-template-lightbox-main>.clover-items[data-layout=slider]{flex:none;--clover-items-height: 4rem;--clover-items-lines: 1}.clover-template-lightbox-pending{height:var(--clover-body-height, 60vh)}.clover-template-lightbox-header{display:flex;align-items:center}.clover-template-lightbox-title{flex:1 1 auto;min-width:0}.clover-template-lightbox-caption{flex:none;overflow-wrap:anywhere}.clover-template-lightbox-back:dir(rtl) svg{transform:scaleX(-1)}button:is(.clover-template-lightbox-back,.clover-template-lightbox-close){flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--clover-control);height:var(--clover-control);cursor:pointer}.clover-template-document{--clover-template-document-height: min(85vh, 56rem);display:flex;flex-direction:column;height:var(--clover-template-document-height);min-height:min-content;overflow:hidden}@supports (height: 1svh){.clover-template-document{--clover-template-document-height: min(85svh, 56rem)}}.clover-template-document-toolbar{display:flex;flex-wrap:wrap;align-items:center}.clover-template-document-provider{max-width:100%;margin-inline-start:auto}.clover-template-document-toolbar .clover-download-groups{flex-direction:row;flex-wrap:wrap}.clover-template-document-toolbar .clover-download-group{display:flex;flex-wrap:wrap;align-items:baseline}.clover-template-document-toolbar .clover-download-list{display:flex;flex-wrap:wrap}.clover-template-document-title{flex:1 1 6rem;min-width:0}button.clover-template-document-sidebar-toggle{display:inline-flex;flex:none;align-items:center;min-height:var(--clover-control);cursor:pointer}.clover-template-document-sidebar-toggle .clover-template-document-position{white-space:nowrap}.clover-template-document-sidebar-toggle .clover-template-document-position>.clover-pager-room[hidden]{display:none}.clover-template-document-panes{position:relative;flex:1 1 auto;min-height:16rem}.clover-template-document-panes:is([data-panel=over],[data-narrow])>.clover-template-document-main{isolation:isolate}.clover-template-document-sidebar{contain:size;overflow-y:auto;scroll-padding-top:calc(2 * var(--clover-inset) + var(--clover-control))}.clover-template-document-sidebar-closed{position:absolute;top:var(--clover-inset);inset-inline-start:var(--clover-inset);z-index:3}@media (width < 31rem){.clover-template-document-toolbar,.clover-template-document-sidebar-closed,.clover-template-document-spine{--clover-inset: var(--clover-space-m)}}.clover-template-document-sidebar[hidden]{display:none}.clover-template-document-sidebar+.clover-split-handle:before{inset-inline-start:0;inset-inline-end:calc(3px - var(--clover-space-l))}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-figure{grid-template-columns:repeat(var(--parts, 1),minmax(0,1fr))}.clover-template-document-sidebar .clover-items[data-layout] :is(.clover-items-pictures,.clover-items-caption){grid-column:1 / -1;grid-template-columns:subgrid}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-label{contain:inline-size}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-picture[data-empty],.clover-template-document-sidebar .clover-items[data-layout] .clover-items-picture img{width:100%;height:auto;max-height:20rem;aspect-ratio:var(--clover-items-ratio, auto);object-fit:contain}.clover-template-document-main{position:relative;overflow:hidden}.clover-template-document-column{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;container-type:size}.clover-template-document-sheets{position:relative}.clover-template-document-sheet{--clover-template-document-tease: calc(2 * var(--clover-inset));display:flex;justify-content:center;box-sizing:border-box;height:min(100cqh - var(--clover-template-document-tease),(100cqw - 2 * var(--clover-inset)) / var(--ratio) + 2 * var(--clover-inset))}.clover-template-document-sheet[data-fill]{height:calc(100cqh - var(--clover-template-document-tease))}.clover-template-document-column[data-zoomed] .clover-template-document-sheet[data-active]{height:100cqh}.clover-template-document-column[data-zoomed] .clover-template-document-sheet[data-active]>*,.clover-template-document-column[data-covered] .clover-template-document-sheet[data-active]>*{visibility:hidden}.clover-template-document-column[data-zoomed] .clover-template-document-sheet:not([data-active]){--clover-template-document-muted: 0;pointer-events:none}.clover-template-document-sheet:not([data-active]){--clover-template-document-muted: .618;cursor:pointer;opacity:var(--clover-template-document-muted)}.clover-template-document-sheet:not([data-active]):hover{--clover-template-document-muted: .809}.clover-template-document-sheets[data-single]>.clover-template-document-sheet{--clover-template-document-tease: 0px}.clover-template-document-sheet>*{display:block;height:100%;min-width:0}.clover-template-document-sheet[data-fill]>*{object-fit:contain}.clover-template-document-live{--clover-body-height: 100%;position:absolute;inset-inline:0;top:0;height:100%}.clover-template-document-body .clover-canvas{--clover-canvas-inset: var(--clover-inset)}.clover-template-document-live[data-moved]:not(:focus-within){opacity:0;pointer-events:none}.clover-template-document-column[data-scrolling] .clover-template-document-live:not(:focus-within) .clover-canvas-controls>*{--clover-controls-shown: 0;--clover-controls-events: none}.clover-template-document-column:not([data-zoomed]) :not(.clover-scene)>.clover-canvas-viewport{touch-action:pan-y}.clover-template-document-scrim[data-for=sidebar]{z-index:2}.clover-template-document-panes[data-narrow]{--clover-template-sidebar-width: min(14rem, 80%)}.clover-template-document-panes[data-narrow]>.clover-template-document-sidebar{position:absolute;inset-block:0;inset-inline-start:0;z-index:3;width:var(--clover-template-sidebar-width)}.clover-template-document-spine{position:relative;z-index:4;flex:none;width:0}.clover-template-document-spine>*{position:absolute;top:var(--clover-inset);inset-inline-start:-1.5px;translate:-50%}.clover-template-document-spine:dir(rtl)>*{translate:50%}.clover-template-document-spine[data-for=sidebar]>*{inset-inline:auto calc(1.5px - var(--clover-control) / 2);translate:none}.clover-template-document-panes[data-narrow]>.clover-template-document-spine[data-for=sidebar]{inset-inline-start:var(--clover-template-sidebar-width)}.clover-template-document-panes[data-narrow]>.clover-template-document-spine[data-for=sidebar]>*{inset-inline-end:calc(var(--clover-control) / -2)}.clover-template-gallery{position:relative;isolation:isolate;display:flex;flex-direction:column}.clover-template-gallery[data-height=fixed]{box-sizing:border-box;height:var(--clover-template-gallery-height)}.clover-template-gallery[data-height=fixed]>.clover-items{flex:1 1 auto;min-height:0;overflow:auto}.clover-template-gallery-header{flex:none;display:flex;flex-direction:column}.clover-template-gallery-summary{--clover-summary-lines: 2}.clover-template-gallery .clover-items{--clover-items-lines: none}:where(.clover-tip,.clover-canvas-caption,.clover-canvas-menu,.clover-canvas-transport,.clover-canvas-transport-options,.clover-canvas-captions-cue,.clover-sections-heading,.clover-content-search-field,.clover-transcript-find,.clover-items-label-full,.clover-items-duration,.clover-scene-error,.clover-template-panel,.clover-template-document-sidebar,.clover-template-lightbox-content){background-color:Canvas;color:CanvasText}:where(.clover-split-handle){background-color:currentColor}}

package/dist/components/Canvas/CanvasView.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useRef, useState, useMemo, useEffect, useCallback, useLayoutEffect, Suspense, lazy } from "react";
+import React, { useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect, Suspense, lazy } from "react";
 import Caption, { hasInformation, captionLabelId } from "../Body/Caption.mjs";
 import Controls, { NO_LIMITS } from "./Controls.mjs";
 import { findChoices, startingChoices, animationFrames, canvasScene, paintedType, placeholderStill, frameKey, canvasSize, canvasRectToWorld } from "./layout.mjs";
@@ -100,7 +100,10 @@ const ANNOTATION_KEYS = {
 const CanvasView = (props) => {
   var _a;
   const hasSource = Boolean((_a = props.canvases) == null ? void 0 : _a.length) || toSceneImages(props.body, props.src).length > 0;
-  if (!hasSource) return null;
+  const [kept, setKept] = useState(false);
+  const keep = hasSource || kept && props.manifestId === "loading";
+  if (keep !== kept) setKept(keep);
+  if (!keep) return null;
   return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CanvasBody, { ...props }) });
 };
 const CanvasBody = (props) => {
@@ -559,15 +562,26 @@ ${canvases.map((canvas) => canvas.id).join("|")}` : null;
     if (exitFocused.current && lost) (_a2 = hostRef.current) == null ? void 0 : _a2.focus();
     exitFocused.current = false;
   }, [fullscreenExit]);
+  const flushed = useRef(false);
+  useLayoutEffect(() => {
+    var _a2;
+    if (shownCanvases.current === null || shownCanvases.current === canvasKey)
+      return;
+    (_a2 = surfaceRef.current) == null ? void 0 : _a2.clear();
+    drawnScene.current = null;
+    flushed.current = true;
+    setStatus("loading");
+  }, [canvasKey]);
   useEffect(() => {
     const surface2 = surfaceRef.current;
     if (showPlaceholder) placeholderShown.current = true;
     if (!surface2 || !nearViewport || showPlaceholder) return;
-    const moved = shownCanvases.current !== null && shownCanvases.current !== canvasKey;
+    const moved = flushed.current || shownCanvases.current !== null && shownCanvases.current !== canvasKey;
     if (!surface2.isOpen || moved) setStatus("loading");
     const fit = mediaOnly || placeholderShown.current && surface2.isOpen || moved;
     shownCanvases.current = canvasKey;
     placeholderShown.current = false;
+    flushed.current = false;
     surface2.setImages(images, { world: world ?? void 0, fit });
   }, [imagesKey, instanceId, mediaElement, nearViewport, showPlaceholder]);
   const shownManifest = useRef(manifestId);
@@ -580,7 +594,7 @@ ${canvases.map((canvas) => canvas.id).join("|")}` : null;
     setCleared(true);
     setStatus("loading");
   }, [manifestId]);
-  const loading = status === "loading" && images.length > 0 && nearViewport && !showPlaceholder;
+  const loading = status === "loading" && (images.length > 0 || manifestId === "loading") && nearViewport && !showPlaceholder;
   return /* @__PURE__ */ jsx(HostLanguageContext.Provider, { value: root.hostLanguage, children: /* @__PURE__ */ jsxs(
     "figure",
     {

package/dist/components/Canvas/Connected.mjs

@@ -219,7 +219,7 @@ const ConnectedCanvas = ({
     }),
     [options, request, autoplay, loop]
   );
-  if (!canvases.length) return null;
+  if (!canvases.length && manifestId !== "loading") return null;
   return /* @__PURE__ */ jsx(
     CanvasView,
     {

package/dist/components/Canvas/ControlMenu.mjs

@@ -43,7 +43,7 @@ const ControlMenu = ({
     };
     const onKeyDown = (event) => {
       var _a, _b;
-      if (event.key !== "Escape") return;
+      if (event.key !== "Escape" || event.defaultPrevented) return;
       const active = document.activeElement;
       const inside2 = Boolean(
         ((_a = ref.current) == null ? void 0 : _a.contains(active)) || ((_b = document.getElementById(triggerId)) == null ? void 0 : _b.contains(active))

package/dist/components/Canvas/LoadedCanvas.mjs

@@ -11,6 +11,7 @@ import { readPage, pageLabel } from "../../core/annotation-sets.mjs";
 import { loadContent } from "../../core/load.mjs";
 import { useLoaded } from "../../hooks/useLoaded.mjs";
 const loadRanges = () => import("../../core/ranges.mjs");
+const NONE = [];
 function LoadedCanvas({
   iiifContent,
   onAnnotationLink,
@@ -26,11 +27,18 @@ function LoadedCanvas({
   const key = typeof iiifContent === "string" ? iiifContent : String((iiifContent == null ? void 0 : iiifContent.id) ?? "");
   const [followed, setFollowed] = useState(null);
   const link = (followed == null ? void 0 : followed.key) === key ? followed : null;
-  useEffect(() => {
-    let live = true;
+  const wanted = `${key}
+${(link == null ? void 0 : link.manifestId) ?? ""}
+${(link == null ? void 0 : link.canvasId) ?? ""}`;
+  const [loadingFor, setLoadingFor] = useState(wanted);
+  if (loadingFor !== wanted) {
+    setLoadingFor(wanted);
     setView(
       (current) => current.state === "ready" ? { ...current, next: true } : { state: "loading" }
     );
+  }
+  useEffect(() => {
+    let live = true;
     (async () => {
       var _a2;
       const content = await loadContent((link == null ? void 0 : link.manifestId) ?? iiifContent, {
@@ -39,8 +47,8 @@ function LoadedCanvas({
       const canvases = (content.manifest.items ?? []).filter(
         (each) => of ? each.type === of : each.type !== "Scene"
       );
-      const wanted = (link == null ? void 0 : link.canvasId) ?? ((_a2 = content.target) == null ? void 0 : _a2.canvasId);
-      const canvas = canvases.find((each) => each.id === wanted) ?? canvases[0];
+      const wanted2 = (link == null ? void 0 : link.canvasId) ?? ((_a2 = content.target) == null ? void 0 : _a2.canvasId);
+      const canvas = canvases.find((each) => each.id === wanted2) ?? canvases[0];
       if (!canvas) throw new Error(`It has no ${of ?? "Canvas"} to show.`);
       if (live) setView({ state: "ready", content, canvas });
     })().catch((error) => {
@@ -54,7 +62,7 @@ function LoadedCanvas({
       live = false;
     };
   }, [key, link == null ? void 0 : link.manifestId, link == null ? void 0 : link.canvasId, request, of]);
-  const ready = view.state === "ready" ? view : null;
+  const ready = view.state === "ready" && !view.next ? view : null;
   const [annotations, setAnnotations] = useState([]);
   const given = Boolean(props.annotations);
   useEffect(() => {
@@ -123,12 +131,24 @@ function LoadedCanvas({
     props.language,
     (ranges == null ? void 0 : ranges.chaptersOf) ?? null
   );
+  if (view.state === "ready" && view.next)
+    return /* @__PURE__ */ jsx(
+      CanvasView,
+      {
+        ...props,
+        manifestId: "loading",
+        canvases: NONE,
+        placeholder,
+        onReady: handleReady,
+        onMediaElement: handleMediaElement
+      }
+    );
   if (view.state === "ready")
     return /* @__PURE__ */ jsx(
       CanvasView,
       {
         ...props,
-        manifestId: view.next ? "loading" : view.content.manifest.id,
+        manifestId: view.content.manifest.id,
         canvases: [view.canvas],
         label: props.label ?? view.canvas.label ?? view.content.manifest.label,
         partOf: props.partOf ?? view.content.manifest.label,

package/dist/components/Canvas/PlaceBox.mjs

@@ -36,7 +36,7 @@ function PlaceBox({
       "aria-labelledby": heading.text ? `${id}-name` : void 0,
       ...fallback.props,
       onKeyDown: (event) => {
-        if (event.key !== "Escape") return;
+        if (event.key !== "Escape" || event.defaultPrevented) return;
         event.preventDefault();
         event.stopPropagation();
         onClose(true);

package/dist/components/Canvas/Placeholder.mjs

@@ -127,7 +127,7 @@ const Placeholder = ({
                   [vertical ? "height" : "width"]: `${shares[index] / total * 100}%`
                 }
               },
-              index
+              `${index} ${JSON.stringify(still.source)}`
             ))
           }
         )

package/dist/components/Canvas/media/Player.mjs

@@ -62,8 +62,8 @@ function PlayerFace({
     const source = thumbnailSource({ thumbnail });
     return source ? { source } : null;
   }, [shown, canvas, language]);
-  const src = useThumbnail(art == null ? void 0 : art.source, ART_SIZE, request, true);
-  const ground = useThumbnail(art == null ? void 0 : art.source, GROUND_SIZE, request, true);
+  const src = useThumbnail(art == null ? void 0 : art.source, ART_SIZE, request, canvas.id);
+  const ground = useThumbnail(art == null ? void 0 : art.source, GROUND_SIZE, request, canvas.id);
   const [loaded, setLoaded] = useState();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(

package/dist/components/Canvas/media/Transport.mjs

@@ -77,7 +77,7 @@ function TransportMenu({
     const close = (event) => {
       var _a, _b, _c;
       if (event instanceof KeyboardEvent) {
-        if (event.key !== "Escape") return;
+        if (event.key !== "Escape" || event.defaultPrevented) return;
         if ((_a = menu.current) == null ? void 0 : _a.contains(document.activeElement)) {
           event.preventDefault();
           (_b = trigger.current) == null ? void 0 : _b.focus();

package/dist/components/CollectionSelect/CollectionSelect.mjs

@@ -3,6 +3,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useEffect, useRef } from "react";
 import { useUniqueId } from "../../ui/useUniqueId.mjs";
 import { itemsOfCollection } from "../../core/items.mjs";
+import { selectShownId } from "../../core/selectors.mjs";
 import { localize } from "../../core/value.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { join } from "../../lib/classnames.mjs";
@@ -24,7 +25,8 @@ const CollectionSelect = forwardRef(
     const { t, langOf } = useCloverTranslation();
     const { clover, language } = useClover("CollectionSelect");
     const collection = useCloverSelector((state) => state.collection);
-    const shown = useCloverSelector((state) => {
+    const shown = useCloverSelector((state) => selectShownId(state) ?? "");
+    const loaded = useCloverSelector((state) => {
       var _a;
       return ((_a = state.manifest) == null ? void 0 : _a.id) ?? "";
     });
@@ -35,9 +37,9 @@ const CollectionSelect = forwardRef(
     const asked = useRef(null);
     useEffect(() => {
       asked.current = null;
-    }, [shown, collection]);
+    }, [loaded, collection]);
     const choose = (next) => {
-      if (!next || next === shown || next === asked.current) return;
+      if (!next || next === loaded || next === asked.current) return;
       asked.current = next;
       onChange == null ? void 0 : onChange(next);
       void clover.goToManifest(next).finally(() => {
@@ -80,8 +82,8 @@ const CollectionSelect = forwardRef(
               value: pending ?? shown,
               onKeyDown: (event) => {
                 const { key } = event;
-                if (key === "Enter") choose(pending);
-                else if (key === "Escape") {
+                if (key === "Enter") choose(pending ?? shown);
+                else if (key === "Escape" && !event.defaultPrevented) {
                   if (stepBack()) event.preventDefault();
                 } else if (STEPS.has(key) || key.length === 1 && !event.ctrlKey && !event.metaKey) {
                   steppedAt.current = performance.now();

package/dist/components/Contents/Contents.mjs

@@ -11,6 +11,7 @@ import { playFrom } from "../../lib/time.mjs";
 import { Chevron } from "../../ui/Chevron.mjs";
 import { EntryThumbnail } from "../../ui/EntryThumbnail.mjs";
 import { Steps } from "../../ui/Steps.mjs";
+import { Tip } from "../../ui/Tip.mjs";
 import { CueTime } from "../../ui/Cue.mjs";
 import { useClover, useCloverSelector } from "../../react/context.mjs";
 import { useContainerName } from "../../i18n/useContainerName.mjs";
@@ -191,7 +192,14 @@ const Contents = forwardRef(
                         children: t("contentsSectionsIn")
                       }
                     ),
-                    /* @__PURE__ */ jsx(Chevron, { open, className: "clover-contents-chevron" })
+                    /* @__PURE__ */ jsx(Chevron, { open, className: "clover-contents-chevron" }),
+                    /* @__PURE__ */ jsx(
+                      Tip,
+                      {
+                        label: t("contentsSectionsTip"),
+                        lang: langOf("contentsSectionsTip")
+                      }
+                    )
                   ]
                 }
               )

package/dist/components/Items/Items.mjs

@@ -6,7 +6,7 @@ import { ItemFigure } from "./Item.mjs";
 import { Tip } from "../../ui/Tip.mjs";
 import { itemsOfCollection, itemsOfManifest } from "../../core/items.mjs";
 import { selectAnnotationCollection } from "../../core/annotation-sets.mjs";
-import { selectPosition, selectSequence } from "../../core/selectors.mjs";
+import { selectShownId, selectPosition, selectSequence } from "../../core/selectors.mjs";
 import { resolveDirection } from "../../core/sequence.mjs";
 import { localize } from "../../core/value.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
@@ -56,10 +56,7 @@ function MemberItems({
 }) {
   const { clover, language } = useOptionalClover();
   const collection = useCloverSelector((state) => state.collection);
-  const manifestId = useCloverSelector((state) => {
-    var _a;
-    return ((_a = state.manifest) == null ? void 0 : _a.id) ?? null;
-  });
+  const manifestId = useCloverSelector(selectShownId);
   const items = itemsOfCollection(collection);
   const direction = resolveDirection(
     collection == null ? void 0 : collection.viewingDirection

package/dist/components/Items/Position.mjs

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { itemsOfCollection } from "../../core/items.mjs";
-import { selectTargetIndex } from "../../core/selectors.mjs";
+import { selectShownId, selectTargetIndex } from "../../core/selectors.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { join } from "../../lib/classnames.mjs";
 import { useClover, useCloverSelector } from "../../react/context.mjs";
@@ -14,10 +14,7 @@ function useRootSteps(of, part) {
   const navigation = useNavigation();
   const { direction } = useSequence();
   const collection = useCloverSelector((state) => state.collection);
-  const shown = useCloverSelector((state) => {
-    var _a;
-    return ((_a = state.manifest) == null ? void 0 : _a.id) ?? null;
-  });
+  const shown = useCloverSelector(selectShownId);
   const targets = useCloverSelector(
     (state) => {
       var _a;

package/dist/components/Items/StandaloneItems.mjs

@@ -22,6 +22,12 @@ function StandaloneItems({
   const key = typeof iiifContent === "string" ? iiifContent : iiifContent == null ? void 0 : iiifContent.id;
   const latest = useRef({ iiifContent, request });
   latest.current = { iiifContent, request };
+  const [loadingFor, setLoadingFor] = useState(key);
+  if (loadingFor !== key) {
+    setLoadingFor(key);
+    setResource(null);
+    setSelected(0);
+  }
   useEffect(() => {
     if (provided || latest.current.iiifContent === void 0) return;
     const controller = new AbortController();

package/dist/components/Items/clamped.mjs

@@ -21,7 +21,7 @@ function measureAll() {
 }
 function hideFull(event) {
   var _a, _b;
-  if (event.key !== "Escape") return;
+  if (event.key !== "Escape" || event.defaultPrevented) return;
   const items = /* @__PURE__ */ new Set();
   const focused = (_b = (_a = document.activeElement) == null ? void 0 : _a.closest) == null ? void 0 : _b.call(
     _a,

package/dist/components/Map/MapView.mjs

@@ -7,7 +7,7 @@ import { useHighContrast, highContrastProps } from "../../hooks/useHighContrast.
 import { DEFAULT_STYLE_URL, applyDefaultBasemap } from "./basemap.mjs";
 import { navPlaceOf, georeferencesOf, cornersOf, boundsOf, readGeoreference } from "../../core/geo.mjs";
 import { sendsCredentials } from "../../core/request.mjs";
-import { selectVisibleCanvases } from "../../core/selectors.mjs";
+import { selectVisibleCanvases, selectShownId } from "../../core/selectors.mjs";
 import { localize } from "../../core/value.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { join } from "../../lib/classnames.mjs";
@@ -65,13 +65,7 @@ function ConnectedMap({
     ),
     [picked, highlighted]
   );
-  const manifestId = useOptionalCloverSelector(
-    (state) => {
-      var _a;
-      return ((_a = state.manifest) == null ? void 0 : _a.id) ?? null;
-    },
-    null
-  );
+  const manifestId = useOptionalCloverSelector(selectShownId, null);
   const current = useMemo(
     () => scope === "view" ? [
       ...shown.map((canvas) => canvas.id),