@nulib/clover 0.0.0-stage → 4.0.0-beta.1

package/dist/react/hooks.mjs

@@ -0,0 +1,69 @@
+"use client";
+import { useMemo } from "react";
+import { selectAnnotationSets } from "../core/annotation-sets.mjs";
+import { navigationOf } from "../core/clover.mjs";
+import { selectPosition, selectSequence, selectVisibleCanvases, selectCanvas } from "../core/selectors.mjs";
+import { localize } from "../core/value.mjs";
+import { useCloverTranslation } from "../i18n/useCloverTranslation.mjs";
+import { useCloverSelector, useClover } from "./context.mjs";
+function useStatus() {
+  const status = useCloverSelector((state) => state.status);
+  const error = useCloverSelector((state) => state.error);
+  return useMemo(() => ({ status, error }), [status, error]);
+}
+function useManifest() {
+  return useCloverSelector((state) => state.manifest);
+}
+function useSequence() {
+  return useCloverSelector((state) => selectSequence(state.manifest));
+}
+function useVisibleCanvases() {
+  return useCloverSelector(
+    (state) => selectVisibleCanvases(state.manifest, state.canvasId)
+  );
+}
+function useActiveCanvas() {
+  return useCloverSelector(
+    (state) => selectCanvas(state.manifest, state.canvasId)
+  );
+}
+function useNavigation() {
+  const { clover } = useClover("useNavigation");
+  const position = useCloverSelector(
+    (state) => selectPosition(state.manifest, state.canvasId)
+  );
+  const total = useCloverSelector(
+    (state) => selectSequence(state.manifest).views.length
+  );
+  return useMemo(
+    () => navigationOf(clover, position, total),
+    [clover, position, total]
+  );
+}
+function useAnnotationSets() {
+  return useCloverSelector(
+    (state) => selectAnnotationSets(state.manifest, state.addedSets)
+  );
+}
+function useLocalized(value) {
+  const { language } = useClover("useLocalized");
+  return useMemo(() => localize(value, language), [value, language]);
+}
+function useT() {
+  return useCloverTranslation().t;
+}
+function useLangOf() {
+  return useCloverTranslation().langOf;
+}
+export {
+  useActiveCanvas,
+  useAnnotationSets,
+  useLangOf,
+  useLocalized,
+  useManifest,
+  useNavigation,
+  useSequence,
+  useStatus,
+  useT,
+  useVisibleCanvases
+};

package/dist/react/language.mjs

@@ -0,0 +1,30 @@
+"use client";
+import { useContext, useRef, useState, useCallback, useEffect } from "react";
+import { HostLanguageContext } from "../i18n/hostLanguage.mjs";
+import { useCloverTranslation } from "../i18n/useCloverTranslation.mjs";
+function useRootLanguage(forwardedRef, own) {
+  const outer = useContext(HostLanguageContext);
+  const element = useRef(null);
+  const [measured, setMeasured] = useState("");
+  const ref = useCallback(
+    (node) => {
+      element.current = node;
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    },
+    [forwardedRef]
+  );
+  const measure = () => {
+    var _a, _b;
+    const parent = (_a = element.current) == null ? void 0 : _a.parentElement;
+    if (own !== void 0 || outer !== void 0 || !parent) return;
+    setMeasured(((_b = parent.closest("[lang]")) == null ? void 0 : _b.getAttribute("lang")) ?? "");
+  };
+  useEffect(measure);
+  const hostLanguage = own ?? outer ?? measured;
+  const { langOf } = useCloverTranslation(void 0, hostLanguage);
+  return { ref, hostLanguage, langOf };
+}
+export {
+  useRootLanguage
+};

package/dist/styles.css

@@ -0,0 +1 @@
+@layer clover{: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)}:where(.clover-root,.clover-canvas,.clover-items,.clover-geomap) :where(button,input,select,textarea){font:inherit}:where(.clover-field-pill-query,.clover-collection-select-control){box-sizing:border-box;padding:var(--clover-space-xs) var(--clover-space-s);border:1px solid var( --clover-field-edge, color-mix( in srgb, var(--clover-color-primary-muted, #26292b) 80%, var(--clover-color-secondary, #fff) ) );border-radius:var(--clover-radius, 3px);background-color:var(--clover-color-secondary, #fff);color:var(--clover-color-primary, #1a1d1e)}:where(.clover-field-pill-query,.clover-collection-select-control):focus-visible{outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:1px}:where(.clover-field-pill-query)::placeholder{color:color-mix(in srgb,var(--clover-color-primary, #1a1d1e) 65%,var(--clover-color-secondary, #fff));opacity:1}.clover-canvas-error{display:flex;flex-direction:column;align-items:center;gap:var(--clover-space-s)}.clover-canvas-error-headline{font-weight:700;font-size:var(--clover-text-l)}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;gap:var(--clover-space-xs);height:var(--clover-control);padding:0 var(--clover-space-m) 0 var(--clover-space-s);border:none;border-radius:var(--clover-radius-pill, 2rem);background-color:var(--clover-color-control, #1a1d1e);color:var(--clover-color-control-glyph, #fff);font-size:var(--clover-text-s);font-weight:700;line-height:1;white-space:nowrap;cursor:pointer;transition:var(--clover-transition, all .2s cubic-bezier(.16, 1, .3, 1))}.clover-canvas-exit-full-screen svg{height:1rem;width:1rem;flex-shrink:0}.clover-canvas-exit-full-screen:hover,.clover-canvas-exit-full-screen:focus-visible{background-color:var(--clover-color-accent, #0065c3)}.clover-loading{position:relative;display:block;width:100%;height:3px;overflow:hidden;opacity:0;animation:clover-loading-show 1ms .25s forwards}.clover-loading>span{position:absolute;inset:0;background-color:var(--clover-color-accent, #0065c3);transform-origin:left center;animation:clover-loading-draw 1.4s cubic-bezier(.4,0,.2,1) infinite}.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}@keyframes clover-loading-show{to{opacity:1}}@keyframes clover-loading-draw{0%{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}@media (prefers-reduced-motion: reduce){.clover-loading>span{animation-duration:2.8s}}.clover-canvas-overlays{overflow:hidden;isolation:isolate;container-type:size}.clover-canvas-overlay{transform-origin:center}.clover-canvas-annotation{box-sizing:border-box;margin:0;padding:0;cursor:zoom-in;background-color:transparent;border:1px solid var(--clover-color-primary, #1a1d1e);border-radius:var(--clover-radius, 3px);box-shadow:inset 0 0 0 1px var(--clover-color-secondary, #fff),0 0 38vw 38vw transparent;z-index:var(--clover-annotation-depth, 0);-webkit-mask-image:var(--clover-annotation-mask, none);mask-image:var(--clover-annotation-mask, none);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:120% 120%;mask-size:120% 120%;mask-clip:no-clip}.clover-canvas-annotation:is([data-link],[data-track]){cursor:pointer}.clover-canvas-annotation[hidden]{display:none}.clover-canvas-annotation:is([data-active=true],:focus-visible){border-color:var(--clover-color-secondary, #fff);outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:0;box-shadow:0 0 0 3px var(--clover-color-primary, #1a1d1e),0 0 38vw 38vw #0002}.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){border-color:transparent;outline:none;background-color:transparent;box-shadow:none}.clover-canvas-annotation-point{position:absolute;top:50%;left:50%;width:var(--clover-space-m);height:var(--clover-space-m);border:2px solid var(--clover-color-secondary, #fff);border-radius:50%;background-color:var(--clover-color-accent, #0065c3);box-shadow:0 0 0 1px var(--clover-color-primary, #1a1d1e);transform:translate(-50%,-50%);pointer-events:auto}.clover-canvas-annotation[data-shape=point]:is([data-active=true],:focus-visible) .clover-canvas-annotation-point{box-shadow:0 0 0 2px var(--clover-color-accent, #0065c3),0 0 0 3px var(--clover-color-primary, #1a1d1e)}.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;stroke:var(--clover-color-primary, #1a1d1e);stroke-width:3;pointer-events:visiblePainted;cursor:zoom-in}.clover-canvas-annotation-shape>g:nth-child(2)>*{stroke:var(--clover-color-secondary, #fff);stroke-width:1}.clover-canvas-annotation[data-shape=svg]:is([data-active=true],:focus-visible) .clover-canvas-annotation-shape>g:nth-child(1)>*{stroke-width:6}.clover-canvas-annotation[data-shape=svg]:is([data-active=true],:focus-visible) .clover-canvas-annotation-shape>g:nth-child(2)>*{stroke-width:4}.clover-canvas-annotation[data-shape=svg]:is([data-active=true],:focus-visible) .clover-canvas-annotation-shape>g:nth-child(3)>*{stroke:var(--clover-color-accent, #0065c3);stroke-width:2}@media (forced-colors: active){.clover-canvas-annotation{border-color:CanvasText}.clover-canvas-annotation[data-shape=rect]{outline:1px solid Canvas;outline-offset:-2px}.clover-canvas-annotation:is([data-active=true],:focus-visible){outline:2px solid Highlight;outline-offset:0}.clover-canvas-annotation-shape>g:nth-child(1)>*{stroke:CanvasText}.clover-canvas-annotation-shape>g:nth-child(2)>*{stroke:Canvas}.clover-canvas-annotation[data-shape=svg]:is([data-active=true],:focus-visible) .clover-canvas-annotation-shape>g:nth-child(3)>*{stroke:Highlight}.clover-canvas-annotation[data-shape=point]:is([data-active=true],:focus-visible) .clover-canvas-annotation-point{outline:2px solid Highlight;outline-offset:1px}}.clover-canvas{--clover-canvas-inset: 0px;--clover-canvas-controls-inset: var(--clover-inset);--clover-controls-leave: .18s cubic-bezier(.4, 0, 1, 1);--clover-controls-enter: .34s cubic-bezier(.34, 1.56, .64, 1);--clover-controls-tuck: var(--clover-space-s);--clover-controls-shown: 0;--clover-controls-events: none;--clover-controls-timing: var(--clover-controls-leave);position:relative;margin:0;background-color:#0001;width:100%;height:100%;min-height:inherit;overflow:hidden;isolation:isolate}.clover-canvas[data-fullscreen=true]{background-color:var(--clover-color-secondary, #fff);color:var(--clover-color-primary, #1a1d1e)}.clover-canvas[data-fullscreen=true]>.clover-canvas-exit-full-screen{display:flex}.clover-canvas[data-fullscreen=true]>.clover-canvas-navigator{top:calc(var(--clover-canvas-controls-inset) + var(--clover-control) + var(--clover-space-s))}.clover-canvas-viewport{padding:var(--clover-canvas-inset);isolation:isolate;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:grab;outline:none}.clover-canvas-viewport:active{cursor:grabbing}.clover-canvas[data-navigable=false]>.clover-canvas-viewport{cursor:default}.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;margin:0;padding:var(--clover-inset);overflow:hidden;color:var(--clover-color-primary, #1a1d1e);font-size:var(--clover-text-l);line-height:1.3;text-align:center;overflow-wrap:anywhere;pointer-events:none}.clover-canvas-dom-media{display:block;-webkit-user-drag:none}.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;background:linear-gradient(to bottom,#00000073,#0003 45%,#0000);opacity:var(--clover-controls-shown);transition:opacity var(--clover-controls-timing)}.clover-canvas>.clover-canvas-controls{z-index:3;pointer-events: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>:is([data-button=information],[data-button=annotations]),.clover-canvas-transport-bar>[data-button=play]{--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-controls>:not([data-button=panel],[data-button=information],[data-button=annotations]):hover,>.clover-canvas-navigator:hover,.clover-canvas-transport-seek-area:hover,.clover-canvas-transport-bar>:not([data-button=play]):hover)){--clover-controls-shown: 1;--clover-controls-events: auto;--clover-controls-timing: var(--clover-controls-enter)}.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));transition:all var(--clover-controls-timing),z-index 0s}.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-leave: 0s;--clover-controls-enter: 0s;--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;background-color:#000d;border-radius:var(--clover-radius, 3px);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;border:2px solid var(--clover-color-accent, #0065c3);pointer-events:none}.clover-canvas-viewport:focus-visible:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 0 2px var(--clover-color-primary, #1a1d1e),inset 0 0 0 5px var(--clover-color-accent, #0065c3),inset 0 0 0 7px var(--clover-color-secondary, #fff)}@media (forced-colors: active){.clover-canvas-viewport:focus-visible{outline:3px solid CanvasText;outline-offset:-3px}}.clover-canvas-caption{padding:var(--clover-space-m);outline:none;transform:translateY(calc(-1 * var(--clover-space-m)));opacity:0;visibility:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s ease,visibility 0s linear .3s}.clover-canvas-caption[data-open=true]{transform:none;opacity:1;visibility:visible;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s ease,visibility 0s}.clover-canvas-caption:focus-visible{outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:2px}@media (prefers-reduced-motion: reduce){.clover-canvas-caption,.clover-canvas-caption[data-open=true]{transform:none;transition:none}}.clover-canvas-caption>button.clover-canvas-caption-close{float:right;margin:calc(-1 * var(--clover-space-2xs)) calc(-1 * var(--clover-space-2xs)) var(--clover-space-s) var(--clover-space-s)}.clover-canvas-caption-canvas+.clover-canvas-caption-canvas{margin-top:var(--clover-space-m);padding-top:var(--clover-space-m);border-top:1px solid var(--clover-color-secondary-muted, #e6e8eb)}.clover-canvas-caption .clover-canvas-caption-label{margin:0 0 var(--clover-space-s);font-size:inherit;font-weight:600}.clover-canvas-caption p{margin:0}.clover-canvas-caption .clover-read-more{margin-bottom:var(--clover-space-s)}.clover-canvas-caption a{color:var(--clover-color-accent-text, var(--clover-color-accent, #0065c3))}.clover-canvas-caption-annotations{margin-top:var(--clover-space-s)}.clover-canvas-caption .clover-canvas-caption-annotations-label{margin-bottom:var(--clover-space-xs);font-weight:500}.clover-canvas-caption-annotations>ul{display:flex;flex-direction:column;gap:var(--clover-space-s);margin:0;padding:0;list-style:none}.clover-canvas-placeholder{position:absolute;inset:0;padding:var(--clover-canvas-inset);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-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;color:transparent}.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}button.clover-canvas-placeholder-toggle{position:absolute;top:var(--clover-canvas-controls-inset);right:var(--clover-canvas-controls-inset);z-index:3;margin:0;transition:var(--clover-transition, all .2s cubic-bezier(.16, 1, .3, 1))}.clover-canvas[data-placeholder=true][data-media]>button.clover-canvas-placeholder-toggle{z-index:1;top:50%;right:50%;width:var(--clover-space-2xl);height:var(--clover-space-2xl);transform:translate(50%,-50%);box-shadow:0 4px 16px #0003}.clover-canvas[data-placeholder=true][data-media]>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][data-media]>.clover-canvas-controls[data-has-placeholder=true]{right:var(--clover-canvas-controls-inset)}.clover-canvas[data-placeholder=true][data-media]:has(>.clover-canvas-placeholder[data-media=true]:hover)>button.clover-canvas-placeholder-toggle{background-color:var(--clover-color-accent, #0065c3)}.clover-canvas[data-placeholder=true]>.clover-canvas-controls>*{--clover-controls-shown: 1;--clover-controls-events: auto}@media (prefers-reduced-motion: reduce){button.clover-canvas-placeholder-toggle{transition:none}}.clover-canvas:has(>.clover-canvas-controls>[data-button=panel])>.clover-canvas-controls[data-has-placeholder=true]{--top: var(--clover-canvas-controls-inset);right:var(--clover-canvas-controls-inset)}.clover-canvas[data-placeholder]:not([data-placeholder=true][data-media]):has(>.clover-canvas-controls>[data-button=panel])>.clover-canvas-controls{padding-right:calc(2 * (var(--clover-control) + var(--clover-space-s)))}.clover-canvas[data-placeholder]:not([data-placeholder=true][data-media]):has(>.clover-canvas-controls>[data-button=panel])>button.clover-canvas-placeholder-toggle{right:calc(var(--clover-canvas-controls-inset) + var(--clover-control) + var(--clover-space-s))}: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;border-radius:var(--clover-radius, 6px);background:var(--clover-color-secondary, #fff);color:var(--clover-color-primary, #1a1d1e);box-shadow:0 4px 16px #0001}.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-media]>: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-fullscreen=true]>: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{padding:var(--clover-space-xs)}.clover-canvas-menu fieldset{margin:0;padding:0;border:0}.clover-canvas-menu fieldset+fieldset{margin-top:var(--clover-space-s)}.clover-canvas-menu legend{padding:var(--clover-space-2xs) var(--clover-space-s);color:var(--clover-color-primary-muted, #26292b);font-size:var(--clover-text-s)}.clover-canvas-menu label{display:flex;align-items:center;gap:var(--clover-space-xs);padding:var(--clover-space-xs) var(--clover-space-s);border-radius:var(--clover-radius, 6px);cursor:pointer}.clover-canvas-menu label:hover,.clover-canvas-menu label[data-active=true]{background:var(--clover-color-secondary-muted, #e6e8eb)}.clover-canvas-menu input{margin:0;accent-color:var(--clover-color-accent, #0065c3)}.clover-canvas-menu-image{flex:none;width:auto;height:var(--clover-space-xl);border-radius:var(--clover-radius, 3px)}.clover-canvas-media{position:absolute;inset:0;z-index:1;pointer-events:none;container-type:size}.clover-canvas-media:has([aria-expanded=true]){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;gap:var(--clover-space-2xs);padding:0 var(--clover-canvas-controls-inset);pointer-events:none;transition:bottom var(--clover-controls-timing)}.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%;padding:var(--clover-space-2xs) var(--clover-space-xs);border-radius:var(--clover-radius, 3px);background-color:var(--clover-player-caption-surface, rgb(0 0 0 / 85%));color:var(--clover-player-caption-text, #fff);text-shadow:var(--clover-player-caption-edge, none);font-size:var(--clover-text-s);line-height:1.35;text-align:center;text-wrap:balance;white-space:pre-line}.clover-canvas-captions-cue-label{display:block;font-size:var(--clover-text-s);font-weight:500}@container (min-width: 38.5rem){.clover-canvas-captions-cue{font-size:inherit}}@container (min-width: 44rem){.clover-canvas-captions-cue{font-size:var(--clover-text-m)}}@container (min-width: 47.5rem){.clover-canvas-captions-cue{font-size:var(--clover-text-l)}}.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) )}.clover-canvas-transport{position:absolute;inset:auto 0 0;z-index:2;display:flex;flex-direction:column;padding:var(--clover-space-xl) var(--clover-canvas-controls-inset) var(--clover-canvas-controls-inset);--clover-controls-edge: 1;-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;background:linear-gradient(to top,#000000c7,#0009 calc(100% - var(--clover-space-xl)),#0000);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;gap:var(--clover-space-xs) var(--clover-space-s);min-width:0}.clover-canvas-transport-bar>*{flex-shrink:0}.clover-canvas-transport-bar>.clover-canvas-transport-status{display:flex;flex:1 1 0;align-items:center;gap:var(--clover-space-s);min-width:min-content}.clover-canvas-transport-end{display:flex;gap:var(--clover-space-s);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%}.clover-canvas-transport-status>.clover-canvas-transport-chapter{max-width:none}}@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}.clover-canvas-transport-button:hover,.clover-canvas-transport-button:focus-visible{background-color:var(--clover-color-accent, #0065c3)}button.clover-canvas-transport-button[aria-pressed=true]:after{content:"";position:absolute;inset-inline:var(--clover-space-s);bottom:var(--clover-space-2xs);border-bottom:2px solid;border-radius:1px}.clover-canvas-transport-button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--clover-color-secondary, #fff),0 0 0 4px var(--clover-color-accent, #0065c3)}.clover-canvas-transport-seek-area{position:relative;display:flex;margin-bottom:var(--clover-space-xs)}.clover-canvas-transport input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:var(--clover-space-l);margin:0;background:transparent;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-bar,.clover-canvas-transport-end{column-gap:var(--clover-space-xs)}}.clover-canvas-transport input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:var(--clover-radius, 3px);background:linear-gradient(to right,var(--clover-color-accent, #0065c3) var(--clover-transport-progress, 0%),rgb(255 255 255 / 90%) var(--clover-transport-progress, 0%),rgb(255 255 255 / 90%) var(--clover-transport-loaded, 0%),var(--clover-player-track, rgb(255 255 255 / 65%)) var(--clover-transport-loaded, 0%));box-shadow:var(--clover-player-track-shadow, none)}.clover-canvas-transport input[type=range]::-moz-range-track{height:4px;border-radius:var(--clover-radius, 3px);background:linear-gradient(to right,var(--clover-color-accent, #0065c3) var(--clover-transport-progress, 0%),rgb(255 255 255 / 90%) var(--clover-transport-progress, 0%),rgb(255 255 255 / 90%) var(--clover-transport-loaded, 0%),var(--clover-player-track, rgb(255 255 255 / 65%)) var(--clover-transport-loaded, 0%));box-shadow:var(--clover-player-track-shadow, none)}.clover-canvas-transport input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border:none;border-radius:var(--clover-radius-pill, 2rem);background-color:var(--clover-player-text, #fff)}.clover-canvas-transport input[type=range]::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:var(--clover-radius-pill, 2rem);background-color:var(--clover-player-text, #fff)}.clover-canvas-transport input[type=range]:focus-visible{outline:none}.clover-canvas-transport input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--clover-color-accent, #0065c3),0 0 0 4px var(--clover-player-text, #fff),0 0 0 6px #0009}.clover-canvas-transport input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px var(--clover-color-accent, #0065c3),0 0 0 4px var(--clover-player-text, #fff),0 0 0 6px #0009}.clover-canvas-transport-time{display:flex;align-items:center;gap:var(--clover-space-xs);color:var(--clover-player-text, #fff);font-size:var(--clover-text-s);font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 1px 2px rgb(0 0 0 / 90%)}.clover-canvas-transport-frames{position:relative;display:flex}button.clover-canvas-transport-time{margin:0;padding:var(--clover-space-2xs) var(--clover-space-xs);border:0;border-radius:var(--clover-radius, 3px);background:none;font:inherit;font-size:var(--clover-text-s);cursor:pointer}button.clover-canvas-transport-time:is(:hover,[aria-expanded=true]){background-color:#0006}button.clover-canvas-transport-time:focus-visible{outline:2px solid var(--clover-player-text, #fff)}.clover-canvas-transport-frames>.clover-canvas-menu{bottom:calc(100% + var(--clover-space-s));left:0;max-width:min(20rem,80vw);max-height:min(24rem,70vh,var(--clover-transport-menu-room))}.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;margin:0;padding:var(--clover-space-xs);border:none;border-radius:var(--clover-radius, 3px);background-color:var(--clover-player-menu-surface, #151718);color:var(--clover-player-text, #fff);overflow-y:auto}.clover-canvas-transport-option{display:flex;flex:none;align-items:center;gap:var(--clover-space-xs);min-height:var(--clover-space-l);padding:var(--clover-space-xs) var(--clover-space-s);border-radius:var(--clover-radius, 3px);font-size:var(--clover-text-s);cursor:pointer}.clover-canvas-transport-option:hover{background-color:var(--clover-player-menu-hover, #26292b)}.clover-canvas-transport-option:has(input:checked){background-color:var(--clover-color-accent, #0065c3)}.clover-canvas-transport-option:has(input:focus-visible){box-shadow:inset 0 0 0 2px var(--clover-player-text, #fff)}.clover-canvas-transport-code{flex:none;min-width:var(--clover-space-l);color:color-mix(in srgb,currentColor 72%,transparent);font-size:var(--clover-text-xs);font-weight:600;line-height:1}.clover-canvas-transport-option:has(input:checked) .clover-canvas-transport-code{color:inherit}.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 input{position:absolute;opacity:0;pointer-events:none}@media (forced-colors: active){.clover-canvas-transport button.clover-canvas-transport-button{border:1px solid ButtonText}.clover-canvas-transport input[type=range]{forced-color-adjust:none}.clover-canvas-transport input[type=range]::-webkit-slider-runnable-track{border:1px solid CanvasText;background:linear-gradient(to right,Highlight var(--clover-transport-progress, 0%),Canvas var(--clover-transport-progress, 0%));box-shadow:none}.clover-canvas-transport input[type=range]::-moz-range-track{border:1px solid CanvasText;background:linear-gradient(to right,Highlight var(--clover-transport-progress, 0%),Canvas var(--clover-transport-progress, 0%));box-shadow:none}.clover-canvas-transport input[type=range]::-webkit-slider-thumb,.clover-canvas-transport input[type=range]:focus-visible::-webkit-slider-thumb{background-color:CanvasText;box-shadow:0 0 0 2px Canvas}.clover-canvas-transport input[type=range]::-moz-range-thumb,.clover-canvas-transport input[type=range]:focus-visible::-moz-range-thumb{background-color:CanvasText;box-shadow:0 0 0 2px Canvas}.clover-canvas-transport input[type=range]:focus-visible{outline:2px solid CanvasText;outline-offset:2px}.clover-canvas-transport-button:focus-visible{outline:3px solid CanvasText;outline-offset:2px;box-shadow:none}.clover-canvas-transport-button:is([data-active],[aria-pressed=true]),.clover-canvas-transport-option:has(input:checked){background-color:Highlight;color:HighlightText}.clover-captions-icon[data-on] .clover-captions-icon-letters{stroke:ButtonFace}.clover-canvas-transport-button[data-active] .clover-captions-icon[data-on] .clover-captions-icon-letters{stroke:Highlight}}@media (prefers-reduced-motion: reduce){.clover-canvas-transport,.clover-canvas-transport-button,.clover-canvas-transport-button svg{transition:none}}.clover-canvas-transport-chapter-marker{position:absolute;top:50%;width:2px;height:var(--clover-space-s);translate:-1px -50%;border-radius:1px;background-color:var(--clover-player-text, #fff);opacity:.7;pointer-events:none}.clover-canvas-transport-chapter-span{position:absolute;top:50%;height:var(--clover-space-xs);translate:0 -50%;border-radius:var(--clover-radius, 3px);background-color:var(--clover-player-text, #fff);opacity:.5;pointer-events:none}.clover-canvas-transport-seek-area>.clover-tip{left:var(--clover-transport-preview, 50%)}.clover-canvas-transport-seek-area:is(:hover,:has(>input:focus-visible)):not([data-tip-hidden])>.clover-tip{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}@media (forced-colors: active){.clover-canvas-transport-chapter-span{background-color:Highlight;opacity:1}}.clover-canvas-transport-status>.clover-canvas-transport-chapter{flex:1 1 auto;overflow:hidden;width:0;min-width:0;max-width:16rem;color:var(--clover-player-text, #fff);font-size:var(--clover-text-s);text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 2px rgb(0 0 0 / 90%)}.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;box-shadow:inset 0 0 0 2px var(--clover-color-primary, #1a1d1e),inset 0 0 0 5px var(--clover-color-accent, #0065c3),inset 0 0 0 7px var(--clover-color-secondary, #fff)}.clover-canvas-player{--clover-player-pad: var(--clover-space-l);--clover-player-text: var(--clover-color-control-glyph, #fff);--clover-player-muted: color-mix( in srgb, var(--clover-player-text) 80%, transparent );--clover-player-dark: var(--clover-color-control, #1a1d1e);--clover-player-art-height: min( calc(100cqb - 2 * var(--clover-player-pad)), 26rem );position:absolute;inset:0;isolation:isolate;box-sizing:border-box;display:grid;grid-template:"art head" auto "art cues" minmax(0,1fr) "art transport" auto / auto minmax(0,1fr);align-content:center;gap:var(--clover-space-s) var(--clover-space-l);padding:var(--clover-player-pad);color:var(--clover-player-text)}.clover-canvas-player-ground{position:absolute;inset:0;z-index:-1;overflow:hidden;background-color:color-mix(in srgb,var(--clover-color-accent, #0065c3) 22%,var(--clover-player-dark))}.clover-canvas-player-ground>img{position:absolute;inset:-12%;width:124%;height:124%;object-fit:cover;filter:blur(2.618rem) saturate(1.382)}.clover-canvas-player-ground[data-art]:after{content:"";position:absolute;inset:0;background-color:color-mix(in srgb,var(--clover-player-dark) 72%,#0000)}.clover-canvas-player-art{grid-area:art;align-self:center;display:grid;place-items:center;overflow:hidden;width:min(calc(var(--clover-player-art-height) * var(--clover-player-art-ratio, 1)),40cqi);aspect-ratio:var(--clover-player-art-ratio, 1);border-radius:calc(2 * var(--clover-radius, 3px));background-color:color-mix(in srgb,var(--clover-color-accent, #0065c3) 40%,var(--clover-player-dark));box-shadow:0 .618rem 1.618rem color-mix(in srgb,var(--clover-player-dark) 45%,#0000)}.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{grid-area:head;align-self:end;min-width:0;padding-inline-end:var(--clover-player-clear, 0px)}.clover-canvas[data-player]:has(>.clover-canvas-controls) .clover-canvas-player{--clover-player-clear: calc(var(--clover-control) + var(--clover-space-s))}.clover-canvas-player-title,.clover-canvas-player-part-of{margin:0;overflow-wrap:break-word}.clover-canvas-player-title{font-size:var(--clover-text-l);font-weight:700;line-height:1.25;text-wrap:balance}.clover-canvas-player-part-of{margin-top:var(--clover-space-3xs);color:var(--clover-player-muted);font-size:var(--clover-text-s);line-height:1.35}.clover-canvas-player>.clover-canvas-captions{grid-area:cues;position:static;z-index:auto;align-items:flex-start;justify-content:center;min-height:0;padding:0;overflow:hidden;transition:none}.clover-canvas-player .clover-canvas-captions-cue{max-width:none;padding:0;background-color:var(--clover-player-caption-surface, #0000);color:var(--clover-player-caption-text, inherit);font-size:var(--clover-text-m);font-weight:700;line-height:1.3;text-align:start;text-wrap:pretty}.clover-canvas-player>.clover-canvas-transport{grid-area:transport;position:relative;inset:auto;z-index:auto;display:grid;grid-template:"play seek seek seek mute volume end" "play now chapter total . . ." / auto auto minmax(0,1fr) auto auto auto auto;align-items:center;gap:var(--clover-space-3xs) var(--clover-space-s);padding:0}.clover-canvas-player>.clover-canvas-transport:before{content:none}.clover-canvas-player :is(.clover-canvas-transport-bar,.clover-canvas-transport-status,.clover-canvas-transport-time){display:contents}.clover-canvas-player .clover-canvas-transport-seek-area{grid-area:seek}.clover-canvas-player [data-button=play]{grid-area:play}.clover-canvas-player [data-button=mute]{grid-area:mute}.clover-canvas-player .clover-canvas-transport-volume{grid-area:volume}.clover-canvas-player .clover-canvas-transport-end{grid-area:end;margin:0}.clover-canvas-player .clover-canvas-transport-time>*,.clover-canvas-player .clover-canvas-transport-chapter{color:var(--clover-player-muted);font-size:var(--clover-text-xs);font-variant-numeric:tabular-nums}.clover-canvas-player .clover-canvas-transport-time>:first-child{grid-area:now}.clover-canvas-player .clover-canvas-transport-time>:last-child{grid-area:total;justify-self:end}.clover-canvas-player .clover-canvas-transport-time>[aria-hidden]{display:none}.clover-canvas-player .clover-canvas-transport-chapter{grid-area:chapter;justify-self:center;max-width:100%}.clover-canvas-player .clover-canvas-transport-button:not([data-button=play],:hover,:focus-visible){background-color:#0000}.clover-canvas-player [data-button=play].clover-canvas-transport-button{width:calc(1.382 * var(--clover-control));height:calc(1.382 * var(--clover-control));background-color:var(--clover-player-text);color:var(--clover-player-dark)}.clover-canvas-player [data-button=play].clover-canvas-transport-button:is(:hover,:focus-visible){background-color:var(--clover-color-accent, #0065c3);color:var(--clover-player-text)}.clover-canvas-player-chapters{display:none;grid-area:chapters;min-height:0;margin:var(--clover-space-xs) 0 0;padding:var(--clover-space-xs) 0 0;overflow-y:auto;border-top:1px solid color-mix(in srgb,var(--clover-player-text) 25%,#0000);list-style:none;pointer-events:auto}.clover-canvas-player-chapter{display:grid;grid-template-columns:2.5ch minmax(0,1fr) auto;align-items:baseline;gap:var(--clover-space-s);box-sizing:border-box;width:100%;min-height:24px;margin:0;padding:var(--clover-space-xs) var(--clover-space-s);border:0;border-radius:var(--clover-radius, 3px);background:none;color:inherit;font:inherit;font-size:var(--clover-text-s);line-height:1.35;text-align:start;cursor:pointer}.clover-canvas-player-chapter:hover{background-color:color-mix(in srgb,var(--clover-player-text) 12%,#0000)}.clover-canvas-player-chapter:focus-visible{outline:2px solid var(--clover-player-text);outline-offset:-2px}.clover-canvas-player-chapter[aria-current=true]{box-shadow:inset 3px 0 0 var(--clover-player-text);font-weight:700}.clover-canvas-player-chapter-number,.clover-canvas-player-chapter>.clover-canvas-player-chapter-time{color:var(--clover-player-muted);font-variant-numeric:tabular-nums}@container (min-height: 18rem){.clover-canvas-player{--clover-player-art-height: min( calc( 100cqb - 2 * var(--clover-player-pad) - 1.382 * var(--clover-control) - var(--clover-space-l) ), 22rem );grid-template-areas:"art head" "art cues" "transport transport"}.clover-canvas-player>.clover-canvas-transport{margin-top:calc(var(--clover-space-l) - var(--clover-space-s))}}@container (min-height: 24rem){.clover-canvas-player:has(>.clover-canvas-player-chapters){--clover-player-art-height: min(36cqb, 16rem);grid-template:"art head" auto "art cues" minmax(0,auto) "transport transport" auto "chapters chapters" minmax(0,1fr) / auto minmax(0,1fr);align-content:stretch}.clover-canvas-player-chapters{display:block}}@container (min-height: 28rem) and (min-width: 40rem){.clover-canvas-player:not(:has(>.clover-canvas-player-chapters)){--clover-player-art-height: min( calc(100cqb - 2 * var(--clover-player-pad)), 28rem );grid-template:"art head" minmax(0,1fr) "art cues" auto "art transport" minmax(0,1fr) / auto minmax(0,1fr);column-gap:var(--clover-space-xl)}.clover-canvas-player:not(:has(>.clover-canvas-player-chapters))>.clover-canvas-transport{align-self:start;margin-top:var(--clover-space-s)}}@container (max-width: 30rem){.clover-canvas-player{--clover-player-pad: var(--clover-space-m);--clover-player-art-height: min( calc( 100cqb - 2 * var(--clover-player-pad) - 2.382 * var(--clover-control) - 2 * var(--clover-space-s) ), 22rem );grid-template-areas:"art head" "art cues" "transport transport";column-gap:var(--clover-space-m)}.clover-canvas-player>.clover-canvas-transport{grid-template:"play seek seek" "play now total" "mute chapter end" / auto minmax(0,1fr) auto;row-gap:var(--clover-space-2xs)}.clover-canvas-player .clover-canvas-transport-chapter{justify-self:start}.clover-canvas-player-title{font-size:var(--clover-text-m)}.clover-canvas-player .clover-canvas-transport-volume{display:none}}@container (max-width: 30rem) and (min-height: 26rem){.clover-canvas-player,.clover-canvas-player:has(>.clover-canvas-player-chapters){--clover-player-art-height: min(38cqb, 70cqi);grid-template:"art" auto "head" auto "cues" minmax(0,auto) "transport" auto "chapters" minmax(0,1fr) / minmax(0,1fr);align-content:start}.clover-canvas-player-art{justify-self:center;width:min(calc(var(--clover-player-art-height) * var(--clover-player-art-ratio, 1)),100%)}}@container (max-width: 30rem) and (max-height: 16rem){.clover-canvas-player{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "cues" "transport"}.clover-canvas-player-art{display:none}.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}}@media (prefers-reduced-motion: no-preference){.clover-canvas-player-art>img{transition:opacity 382ms ease}}@media (forced-colors: active){.clover-canvas-player-ground{display:none}.clover-canvas-player{color:CanvasText}.clover-canvas-player-chapter[aria-current=true]{outline:2px solid Highlight;outline-offset:-2px}}.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));transition:all var(--clover-controls-timing)}.clover-scene-navigation :is(button,.clover-scene-rotate-disc){pointer-events:var(--clover-controls-events)}.clover-scene:has(>.clover-scene-navigation :is(button,.clover-scene-rotate-disc):hover){--clover-controls-shown: 1;--clover-controls-events: auto;--clover-controls-timing: var(--clover-controls-enter)}.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));background:linear-gradient(to top,#00000073,#0003 45%,#0000);opacity:var(--clover-controls-shown);transition:opacity var(--clover-controls-timing);pointer-events:none;content:""}.clover-scene>.clover-scene-navigation[data-compact]{--clover-control: max(1.5rem, 24px)}.clover-scene-tools{display:flex;gap:var(--clover-space-s);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));gap:var(--clover-space-s);--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;border-radius:50%;background-color:var(--clover-color-accent, #0065c3);background-image:radial-gradient(circle at 34% 30%,#ffffff24 0,#fff0 24%),radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--clover-color-accent, #0065c3) 84%,#fff) 0,var(--clover-color-accent, #0065c3) 48%,color-mix(in srgb,var(--clover-color-accent, #0065c3) 62%,#000) 100%);box-shadow:0 .236rem .618rem #00000038;color:var(--clover-color-control-glyph, #fff);cursor:grab;isolation:isolate;transition:scale .2s ease}.clover-scene-rotate-disc:active{cursor:grabbing}.clover-scene-rotate-disc:before{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:color-mix(in srgb,#fff 16%,transparent);opacity:0;transition:opacity .2s ease;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}@media (prefers-reduced-motion: reduce){.clover-scene-rotate-disc{transition:none}}@media (forced-colors: active){.clover-scene-rotate-disc{border:1px solid CanvasText}}.clover-scene-rotate-disc svg{width:100%;height:100%;fill:currentColor;stroke:currentColor;-webkit-mask-image:radial-gradient(circle closest-side,#000 45%,transparent 90%);mask-image:radial-gradient(circle closest-side,#000 45%,transparent 90%)}.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;background-color:var(--clover-color-secondary, #fff);border-radius:var(--clover-radius, 3px)}.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;gap:var(--clover-space-s);max-height:calc(100% - var(--top) - var(--clover-canvas-controls-inset))}.clover-canvas-controls[data-has-placeholder=true]{right:calc(var(--clover-canvas-controls-inset) + var(--clover-control) + var(--clover-space-s))}: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,button.clover-sections-scroll-prev,button.clover-sections-scroll-next){display:flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;width:var(--clover-control);height:var(--clover-control);margin:0;padding:0;border:0;border-radius:var(--clover-radius-pill, 2rem);background-color:var(--clover-color-control, #1a1d1e);color:var(--clover-color-control-glyph, #fff);cursor:pointer;transition:var(--clover-transition, all .2s cubic-bezier(.16, 1, .3, 1))}: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,button.clover-sections-scroll-prev,button.clover-sections-scroll-next) svg{flex-shrink:0;width:1rem;height:1rem;transition:var(--clover-transition, all .2s cubic-bezier(.16, 1, .3, 1))}button.clover-canvas-button svg{fill:currentColor;stroke:currentColor}:is(button.clover-canvas-button,button.clover-items-scroll-prev,button.clover-items-scroll-next,button.clover-pager-previous,button.clover-pager-next,button.clover-panel-close,button.clover-sections-scroll-prev,button.clover-sections-scroll-next):is(:hover,:focus-visible){background-color:var(--clover-color-accent, #0065c3)}: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: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=rotate-left]:is(:hover,:focus-visible) svg{rotate:-45deg}button.clover-canvas-button[data-button=reset]:is(:hover,:focus-visible) svg{rotate:-15deg}@media (prefers-reduced-motion: reduce){:is(button.clover-canvas-button,button.clover-canvas-transport-button) svg{transition: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;padding:var(--clover-space-2xs) var(--clover-space-xs);border-radius:var(--clover-radius, 3px);background-color:var(--clover-color-primary, #1a1d1e);color:var(--clover-color-secondary, #fff);font-size:var(--clover-text-s);font-weight:400;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;transition:opacity .12s ease,visibility 0s linear .12s}.clover-tip-image{display:block;max-width:100%;height:auto;margin-block-end:var(--clover-space-2xs);border-radius:calc(var(--clover-radius, 3px) / 2)}.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;transition-delay:.4s}:focus-visible>.clover-tip,label:has(>input:focus-visible):not([data-tip-hidden])>.clover-tip{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}[data-tip-hidden]>.clover-tip{opacity:0;transition:none;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-default-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-default-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,.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-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{--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:calc(100cqh - 2 * var(--clover-space-xs));overflow-y:auto;border:solid transparent;border-width:var(--clover-space-xs) 0 0;background-clip:padding-box;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;transition-delay:0s}:is(button,a).clover-canvas-annotation[data-overlay-room=below]>.clover-tip{top:100%;translate:var(--clover-tip-x) clamp(0px - var(--clover-overlay-bottom),0px,100cqh - var(--clover-overlay-bottom) - var(--clover-space-xs) - 100%)}:is(button,a).clover-canvas-annotation[data-overlay-room=above]>.clover-tip{top:auto;bottom:100%;border-width:0 0 var(--clover-space-xs);translate:var(--clover-tip-x) clamp(100% + var(--clover-space-xs) - var(--clover-overlay-top),0px,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}@media (prefers-reduced-motion: reduce){.clover-tip{transition:none}}@media (forced-colors: active){.clover-tip{outline:1px solid CanvasText}}label.clover-hide{position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:var(--clover-space-l);height:var(--clover-space-l);gap:0;padding:0;border-radius:50%;color:var(--clover-color-primary-muted, #26292b);cursor:pointer}label.clover-hide svg{width:var(--clover-text-s);height:var(--clover-text-s)}label.clover-hide:is(:hover,:has(input:focus-visible)){background-color:var(--clover-color-accent, #0065c3);color:var(--clover-color-control-glyph, #fff)}label.clover-hide:has(input:focus-visible){outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:2px}label.clover-hide input{position:absolute;margin:0;opacity:0;pointer-events:none}@media (forced-colors: active){label.clover-hide:is(:hover,:has(input:focus-visible)){background-color:Highlight;color:HighlightText}}button.clover-sections-button{display:flex;align-items:center;gap:var(--clover-space-xs);margin:0;padding:var(--clover-space-xs) var(--clover-space-s);border:0;background:none;color:var(--clover-color-primary-muted, #26292b);font-weight:600;text-align:start;cursor:pointer}button.clover-sections-button:focus-visible{outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:-2px}.clover-sections-panel{outline:none}.clover-sections-panel:focus-visible{outline:2px solid var(--clover-color-accent, #0065c3)}.clover-sections[data-layout=tabs] .clover-sections-tabs{--clover-sections-fade: calc(var(--clover-control) + var(--clover-space-s));border-bottom:1px solid var(--clover-color-secondary-muted, #e6e8eb)}.clover-sections[data-layout=tabs] .clover-sections-row{position:relative}.clover-sections[data-layout=tabs] .clover-sections-list{display:flex;flex-wrap:nowrap;gap:var(--clover-space-2xs);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;border-bottom:2px solid transparent;white-space:nowrap}.clover-sections-tabs[data-more=end] .clover-sections-list{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--clover-sections-fade)),transparent);mask-image:linear-gradient(to right,#000 calc(100% - var(--clover-sections-fade)),transparent)}.clover-sections-tabs[data-more=start] .clover-sections-list{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--clover-sections-fade)),transparent);mask-image:linear-gradient(to left,#000 calc(100% - var(--clover-sections-fade)),transparent)}.clover-sections-tabs[data-more="start end"] .clover-sections-list{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--clover-sections-fade),#000 calc(100% - var(--clover-sections-fade)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--clover-sections-fade),#000 calc(100% - var(--clover-sections-fade)),transparent)}.clover-sections-tabs[data-more=end]:dir(rtl) .clover-sections-list{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--clover-sections-fade)),transparent);mask-image:linear-gradient(to left,#000 calc(100% - var(--clover-sections-fade)),transparent)}.clover-sections-tabs[data-more=start]:dir(rtl) .clover-sections-list{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--clover-sections-fade)),transparent);mask-image:linear-gradient(to right,#000 calc(100% - var(--clover-sections-fade)),transparent)}: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=tabs] button.clover-sections-button[aria-selected=true]{border-bottom-color:var(--clover-color-accent, #0065c3);color:var(--clover-color-primary, #1a1d1e)}.clover-sections[data-layout=tabs] .clover-sections-panel{padding-top:var(--clover-space-m)}.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-heading{margin:0;font-size:inherit}.clover-sections[data-layout=accordion] .clover-sections-heading{position:sticky;font-size:var(--clover-text-m);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));padding-bottom:3px;background-color:var(--clover-color-secondary, #fff)}.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[data-layout=accordion]>*+*>.clover-sections-heading{padding-top:var(--clover-space-2xs)}.clover-sections[data-layout=accordion]>[data-open=true]+*>.clover-sections-heading{padding-top:var(--clover-space-s)}.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;background-color:inherit}.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);background:linear-gradient(var(--clover-sections-shade),rgb(0 0 0 / .05),transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--clover-space-m),#000 calc(100% - var(--clover-space-m)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--clover-space-m),#000 calc(100% - var(--clover-space-m)),transparent);opacity:0;pointer-events:none;animation:clover-shade linear both;animation-timeline:scroll()}.clover-sections[data-layout=accordion]>[data-open=true]>.clover-sections-heading>button:after{--clover-sections-shade: to bottom;top:calc(100% + 3px);animation-range:0 var(--clover-space-m)}.clover-sections[data-layout=accordion]>[data-open=true]+*>.clover-sections-heading>button:before{--clover-sections-shade: to top;bottom:calc(100% + var(--clover-space-s));animation-direction:reverse;animation-range:calc(100% - var(--clover-space-m)) 100%}}@keyframes clover-shade{0%{opacity:0}to{opacity:1}}.clover-sections[data-layout=accordion] button.clover-sections-button{position:relative;justify-content:space-between;width:100%;padding:var(--clover-space-s) var(--clover-space-s) var(--clover-space-2xs);padding-inline-end:calc(var(--clover-space-s) + var(--clover-sections-actions, 0px));border-radius:inherit;color:var(--clover-color-primary, #1a1d1e)}.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);margin-top:calc(-1 * var(--clover-sections-own));padding:var(--clover-space-s) var(--clover-space-s) calc(var(--clover-space-2xs) + 3px);font-size:var(--clover-text-m);pointer-events:none}.clover-sections[data-layout=accordion]>*+*>.clover-sections-actions{padding-top:calc(var(--clover-space-2xs) + var(--clover-space-s))}.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;background-color:color-mix(in srgb,var(--clover-color-secondary-alt, #c1c8cd) 50%,transparent)}.clover-sections[data-layout=accordion] [aria-expanded=false]:hover>.clover-sections-label:after{background-color:color-mix(in srgb,var(--clover-color-accent, #0065c3) 50%,transparent)}.clover-sections[data-layout=accordion] [aria-expanded=true]>.clover-sections-label:after{background-color:var(--clover-color-accent, #0065c3)}@media (forced-colors: active){.clover-sections[data-layout=accordion] .clover-sections-label:after{background-color:CanvasText}.clover-sections[data-layout=accordion] [aria-expanded=true]>.clover-sections-label:after{background-color:Highlight}}.clover-sections[data-layout=accordion] button.clover-sections-button[aria-disabled]{background:none;cursor:default}.clover-sections-chevron{flex-shrink:0}.clover-sections[data-layout=accordion] .clover-sections-panel{isolation:isolate;margin-bottom:var(--clover-space-2xs);padding:var(--clover-space-m) var(--clover-space-s)}.clover-read-more{display:flex;flex-direction:column;align-items:flex-start;gap:var(--clover-space-xs);min-width:0}button.clover-read-more-button{margin:0;padding:0;border:0;background:none;color:var(--clover-color-accent-text, var(--clover-color-accent, #0065c3));font-size:var(--clover-text-s);text-decoration:underline 1px;text-decoration-color:color-mix(in srgb,currentColor 20%,transparent);text-underline-offset:var(--clover-space-3xs);cursor:pointer}button.clover-read-more-button:hover{text-decoration-color:currentColor}button.clover-read-more-button:focus-visible{outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:2px;border-radius:var(--clover-radius, 3px)}.clover-field-pill{display:flex;align-items:center;gap:var(--clover-space-2xs);box-sizing:border-box;padding:var(--clover-space-3xs);padding-inline-start:var(--clover-space-s);border:1px solid var( --clover-field-edge, color-mix( in srgb, var(--clover-color-primary-muted, #26292b) 80%, var(--clover-color-secondary, #fff) ) );border-radius:calc(var(--clover-radius-pill, 2rem) + var(--clover-space-3xs) + 1px);background-color:var(--clover-color-secondary, #fff);box-shadow:0 1px 2px #0000000a,0 2px 8px #0000000f;transition:box-shadow .16s}.clover-field-pill:hover{box-shadow:0 1px 2px #0000000f,0 4px 14px #00000014}.clover-field-pill:has(.clover-field-pill-query:focus-visible){outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:1px}.clover-field-pill .clover-field-pill-query{flex:1 1 auto;min-width:0;padding:var(--clover-space-2xs) 0;border:0;border-radius:0;background:transparent;outline:none}.clover-field-pill-query::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}button.clover-field-pill-clear{position:relative;display:flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:var(--clover-space-l);height:var(--clover-space-l);margin:0;padding:0;border:0;border-radius:var(--clover-radius-pill, 2rem);background-color:transparent;color:var(--clover-color-primary-muted, #26292b);cursor:pointer;transition:background-color .12s,color .12s}button.clover-field-pill-clear:is(:hover,:focus-visible){background-color:color-mix(in srgb,var(--clover-color-accent, #0065c3) 12%,transparent);color:var(--clover-color-primary, #1a1d1e)}button.clover-field-pill-clear:active{background-color:color-mix(in srgb,var(--clover-color-accent, #0065c3) 22%,transparent)}button.clover-field-pill-clear:focus-visible{outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:1px}@media (forced-colors: active){button.clover-field-pill-clear:is(:hover,:focus-visible){background-color:Highlight;color:HighlightText}}@supports not selector(:has(*)){.clover-field-pill .clover-field-pill-query:focus-visible{outline:2px solid var(--clover-color-accent, #0065c3)}}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);margin:0;padding:0;border:0;border-radius:var(--clover-radius-pill, 2rem);background-color:var(--clover-color-accent, #0065c3);color:var(--clover-color-control-glyph, #fff);cursor:pointer;transition:background-color .12s}button.clover-field-pill-submit svg{width:1rem;height:1rem;transition:scale .12s}.clover-field-pill[data-size=small] button.clover-field-pill-submit{width:var(--clover-space-l);height:var(--clover-space-l)}.clover-field-pill[data-size=small] button.clover-field-pill-submit svg{width:.875rem;height:.875rem}.clover-field-pill[data-size=small] .clover-field-pill-query{padding-block:0}button.clover-field-pill-submit:is(:hover,:focus-visible){background-color:color-mix(in srgb,var(--clover-color-accent, #0065c3) 85%,var(--clover-color-primary, #1a1d1e))}button.clover-field-pill-submit:is(:hover,:focus-visible) svg{scale:1.1}button.clover-field-pill-submit:focus-visible{outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:2px}@media (forced-colors: active){button.clover-field-pill-submit{border:1px solid ButtonText}}@media (prefers-reduced-motion: reduce){.clover-field-pill,button.clover-field-pill-clear,button.clover-field-pill-submit,button.clover-field-pill-submit svg{transition:none}}.clover-field-pill>.clover-steps,.clover-field-pill-note{flex:none;margin-inline-end:var(--clover-space-2xs)}.clover-field-pill-note{color:var(--clover-color-primary-muted, #26292b);font-size:var(--clover-text-xs);font-weight:600;white-space:nowrap}.clover-steps{display:flex;flex:none;align-items:center;gap:var(--clover-space-2xs);font-size:var(--clover-text-xs);line-height:1}.clover-steps-position{display:inline-grid;justify-items:end;margin-inline-end:var(--clover-space-2xs);color:var(--clover-color-primary-muted, #26292b);font-variant-numeric:tabular-nums;font-weight:600}.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:var(--clover-space-l);height:var(--clover-space-l);margin:0;padding:0;border:0;border-radius:var(--clover-radius-pill, 2rem);background:none;color:var(--clover-color-primary-muted, #26292b);cursor:pointer}button.clover-steps-step:is(:hover,:focus-visible):not([aria-disabled=true]){background-color:var(--clover-color-accent, #0065c3);color:var(--clover-color-control-glyph, #fff)}button.clover-steps-step:focus-visible{outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:2px}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}@media (forced-colors: active){button.clover-steps-step[aria-disabled=true]{color:GrayText}}.clover-cue-time{flex:none;min-width:var(--clover-space-l);align-self:baseline;color:var(--clover-color-primary-muted, #26292b);font-size:var(--clover-text-s);font-variant-numeric:tabular-nums}.clover-cue-text{align-self:baseline;min-width:0}:is(.clover-transcript-languages,.clover-annotations-languages){display:flex;flex-wrap:wrap;gap:var(--clover-space-2xs);margin:0;padding:0;border:0;font-size:var(--clover-text-xs);line-height:1}.clover-transcript-languages>.clover-transcript-language,.clover-annotations-languages>.clover-annotations-language{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:var(--clover-space-l);min-height:var(--clover-space-l);padding:0 var(--clover-space-xs);border-radius:var(--clover-radius-pill, 2rem);color:var(--clover-color-primary-muted, #26292b);font-weight:600;cursor:pointer}:is(.clover-transcript-language,.clover-annotations-language):is(:has(input:checked),:hover,:has(input:focus-visible)){background-color:var(--clover-color-accent, #0065c3);color:var(--clover-color-control-glyph, #fff)}:is(.clover-transcript-language,.clover-annotations-language):has(input:focus-visible){outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:2px}:is(.clover-transcript-language,.clover-annotations-language) input{position:absolute;opacity:0;pointer-events:none}@media (forced-colors: active){:is(.clover-transcript-language,.clover-annotations-language):has(input:checked){background-color:Highlight;color:HighlightText}}.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;gap:var(--clover-space-s);margin:0}:is(.clover-metadata,.clover-required-statement) dt{margin:0;font-weight:500}:is(.clover-metadata,.clover-required-statement) dd{margin:0}.clover-summary,:is(.clover-metadata,.clover-required-statement) :is(dt,dd){overflow-wrap:anywhere}:is(.clover-about,.clover-canvas-caption,.clover-annotations-body,.clover-metadata,.clover-required-statement,.clover-summary) a:not([class]){text-decoration-line:underline;text-underline-offset:var(--clover-space-3xs)}: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){color:var(--clover-color-accent-text, var(--clover-color-accent, #0065c3));overflow-wrap:anywhere;text-decoration-line:underline;text-underline-offset:var(--clover-space-3xs)}.clover-link-format{color:var(--clover-color-primary-muted, #26292b);font-size:var(--clover-text-s)}.clover-provider{display:flex;flex-wrap:wrap;gap:var(--clover-space-s) var(--clover-space-m);margin:0;padding:0;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;gap:var(--clover-space-s)}.clover-provider-link{color:var(--clover-color-accent-text, var(--clover-color-accent, #0065c3));overflow-wrap:anywhere;text-decoration-line:underline;text-underline-offset:var(--clover-space-3xs)}.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{margin:0;padding:var(--clover-space-m);color:var(--clover-color-primary-muted, #26292b)}.clover-status[data-status=loading]{display:flex}.clover-status[data-status=error] p{margin:0}.clover-status-detail{font-size:var(--clover-text-s)}.clover-items{--clover-items-height: 8rem;--clover-items-size: 10rem;--clover-items-gap: var(--clover-space-m);--clover-items-ring-room: 4px;--clover-items-lines: 3;color:var(--clover-color-primary, #1a1d1e)}.clover-items-header{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--clover-space-xs) var(--clover-space-m);margin-bottom:var(--clover-space-s)}.clover-items-title{margin:0;font-size:var(--clover-text-l);font-weight:600}.clover-items-description{flex:1 0 100%;order:3;margin:0;color:var(--clover-color-primary-muted, #26292b)}.clover-items-homepage{margin-inline-start:auto;color:var(--clover-color-accent-text, var(--clover-color-accent, #0065c3))}.clover-items-track{margin:0;padding:0;list-style:none;gap:var(--clover-items-gap)}.clover-items-viewport{margin:calc(-1 * var(--clover-items-ring-room));padding:var(--clover-items-ring-room);scroll-padding-inline:var(--clover-items-ring-room);scrollbar-width:none}.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{timeline-scope:--clover-items-track}.clover-items[data-layout=slider] .clover-items-viewport{scroll-timeline:--clover-items-track inline}.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-height);background:linear-gradient(var(--clover-items-shade),rgb(0 0 0 / .16),transparent);-webkit-mask-image:linear-gradient(transparent,#000 var(--clover-space-s),#000 calc(100% - var(--clover-space-s)),transparent);mask-image:linear-gradient(transparent,#000 var(--clover-space-s),#000 calc(100% - var(--clover-space-s)),transparent);opacity:0;pointer-events:none;animation:clover-shade linear both;animation-timeline:--clover-items-track}.clover-items[data-layout=slider] .clover-items-frame:before{--clover-items-shade: to right;left:calc(-1 * var(--clover-items-ring-room));animation-range:0 var(--clover-space-m)}.clover-items[data-layout=slider] .clover-items-frame:after{--clover-items-shade: to left;right:calc(-1 * var(--clover-items-ring-room));animation-direction:reverse;animation-range:calc(100% - var(--clover-space-m)) 100%}.clover-items[data-layout=slider] .clover-items-frame[dir=rtl]:before{--clover-items-shade: to left;right:calc(-1 * var(--clover-items-ring-room));left:auto}.clover-items[data-layout=slider] .clover-items-frame[dir=rtl]:after{--clover-items-shade: to right;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[data-layout=grid] .clover-items-track{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--clover-items-size)),1fr))}.clover-items-item{position:relative;cursor:pointer}.clover-items-link{display:block;color:inherit;text-decoration:none}:is(.clover-items-item[role=option],.clover-items-link){margin:calc(-1 * var(--clover-items-ring-room));padding:var(--clover-items-ring-room);outline:none}.clover-items:not([data-layout=slider]) :is(.clover-items-viewport,.clover-items-item[role=option],.clover-items-link){margin-inline:0;padding-inline:0}.clover-items-figure{display:grid;grid-template-columns:repeat(var(--parts, 1),auto);justify-content:start;gap:var(--clover-space-xs) 0;margin:0}.clover-items-pictures{position:relative;display:grid;grid-column:1 / -1;grid-template-columns:subgrid;border-radius:var(--clover-radius, 3px);outline:3px solid var(--ring-color, transparent);outline-offset:1px;transition:outline-color .2s cubic-bezier(.16,1,.3,1)}.clover-items-picture{position:relative;display:block;overflow:hidden;background-color:var(--clover-color-secondary-muted, #f1f1f1)}.clover-items-picture img{display:block;opacity:0;transition:opacity .3s ease}.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);color:var(--clover-color-primary-muted, #26292b)}.clover-items-picture[data-empty]>svg{width:33%;max-width:var(--clover-space-xl);height:auto;fill:currentColor}.clover-items-pictures>.clover-items-picture:first-child{border-start-start-radius:inherit;border-end-start-radius:inherit}.clover-items-pictures>.clover-items-picture:last-child{border-start-end-radius:inherit;border-end-end-radius:inherit}.clover-items-duration{position:absolute;inset-inline-end:var(--clover-space-xs);bottom:var(--clover-space-xs);padding:var(--clover-space-3xs) var(--clover-space-xs);border-radius:var(--clover-radius, 3px);background-color:#000000b8;color:#fff;font-size:var(--clover-text-xs);font-variant-numeric:tabular-nums}.clover-items-caption{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;gap:var(--clover-space-3xs) 0;font-size:var(--clover-text-s)}.clover-items-label{position:relative;contain:inline-size}.clover-items:is([data-layout=slider],[data-layout=grid]) .clover-items-label-text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--clover-items-lines);line-clamp:var(--clover-items-lines)}.clover-items-label-full{position:absolute;inset-inline:0;bottom:0;z-index:1;padding-block-start:var(--clover-space-2xs);background-color:var(--clover-color-secondary, #fff);box-shadow:0 calc(-1 * var(--clover-space-2xs)) var(--clover-space-s) #00000029;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}@media (forced-colors: active){.clover-items-label-full{border:1px solid CanvasText}}.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-height)}.clover-items[data-layout=grid] .clover-items-figure{grid-template-columns:repeat(var(--parts, 1),1fr)}.clover-items[data-layout=grid] .clover-items-pictures{aspect-ratio:1;overflow:hidden}.clover-items[data-layout=grid] .clover-items-picture{min-width:0}.clover-items[data-layout=grid] .clover-items-picture img{width:100%;height:100%;object-fit:contain}.clover-items[data-layout=list] .clover-items-figure{grid-template-columns:auto 1fr;align-items:center;gap:0 var(--clover-space-s)}.clover-items[data-layout=list] .clover-items-pictures{grid-column:1;grid-template-columns:repeat(var(--parts, 1),auto);gap:0}.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):hover{--ring-color: color-mix( in srgb, var(--clover-color-accent, #0065c3) 50%, transparent )}.clover-items-item[aria-selected=true]{--ring-color: var(--clover-color-accent, #0065c3)}:is(.clover-items-item[role=option],.clover-items-link):focus-visible{--ring-color: var(--clover-color-primary, #1a1d1e)}:is(.clover-items-item[role=option],.clover-items-link):focus-visible .clover-items-pictures:after{position:absolute;inset:0;border-radius:inherit;outline:2px solid var(--clover-color-secondary, #fff);outline-offset:-2px;box-shadow:inset 0 0 0 4px var(--clover-color-primary, #1a1d1e);content:"";pointer-events:none}:is(.clover-items-item[role=option],.clover-items-link):not(:has(.clover-items-pictures)):focus-visible{border-radius:var(--clover-radius, 3px);outline:3px solid var(--clover-color-primary, #1a1d1e);outline-offset:calc(1px - var(--clover-items-ring-room))}@media (forced-colors: active){.clover-items-pictures{outline-color:var(--ring-color, Canvas)}.clover-items-item[aria-selected=true]{--ring-color: Highlight}:is(.clover-items-item[role=option],.clover-items-link):focus-visible{--ring-color: CanvasText}:is(.clover-items-item[role=option],.clover-items-link):focus-visible .clover-items-pictures:after{outline-color:CanvasText}:is(.clover-items-item[role=option],.clover-items-link):not(:has(.clover-items-pictures)):focus-visible{outline-color:CanvasText}}.clover-items-item[aria-selected=true] .clover-items-label{color:var(--clover-color-accent-text, var(--clover-color-accent, #0065c3));font-weight:600}:is(button.clover-items-scroll-prev,button.clover-items-scroll-next){position:absolute;top:calc(var(--clover-items-height) / 2);z-index:2;translate:0 -50%;box-shadow:0 1px 4px #00000040}.clover-items-scroll-prev{inset-inline-start:var(--clover-space-2xs)}.clover-items-scroll-next{inset-inline-end:var(--clover-space-2xs)}.clover-pager{display:flex;align-items:center;justify-content:center;gap:var(--clover-space-s);padding-block:var(--clover-space-s)}.clover-pager-position{display:inline-grid;justify-items:end;font-variant-numeric:tabular-nums;color:var(--clover-color-primary-muted, #26292b)}.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-panel{display:flex;flex-direction:column;min-width:0;padding:var(--clover-inset);--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 );color:var(--clover-color-primary, #1a1d1e)}.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>.clover-sections[data-layout=accordion]{margin:calc(-1 * var(--clover-space-s))}.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;overscroll-behavior:contain;touch-action:pan-y;padding-block:0}[data-spine]>.clover-panel>.clover-sections{margin-block:var(--clover-inset)}[data-spine]>.clover-panel>.clover-sections[data-layout=accordion]{margin-block:calc(var(--clover-inset) - var(--clover-space-s))}[data-spine]>.clover-panel>button.clover-panel-close{font-size:var(--clover-text-m);inset-block-start:calc(var(--clover-inset) - var(--clover-space-s) + (1lh + 2 * var(--clover-space-s) - var(--clover-control)) / 2);inset-inline:calc(-.5 * 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%;margin:0;padding:var(--clover-space-xs) var(--clover-space-s);border:0;border-inline-start:3px solid transparent;border-radius:var(--clover-radius, 3px);background:none;color:inherit;text-align:start;cursor:pointer;transition:var(--clover-transition, all .2s cubic-bezier(.16, 1, .3, 1))}:is(.clover-annotations-entry,button.clover-contents-button,.clover-transcript-cue>button,button.clover-content-search-hit,.clover-geomap-places button):is(:hover,[data-highlighted=true]):not(:disabled){background-color:var(--clover-color-secondary-muted, #f1f1f1)}:is(.clover-annotations-entry[data-selected=true],button.clover-contents-button[aria-current=true],.clover-transcript-cue[aria-current=true]>button,button.clover-content-search-hit[aria-current=true],.clover-geomap-places button[aria-current=true]){border-inline-start-color:var(--clover-color-accent, #0065c3);background-color:color-mix(in srgb,var(--clover-color-accent, #0065c3) 8%,transparent)}@media (forced-colors: active){:is(.clover-annotations-entry,button.clover-contents-button,.clover-transcript-cue>button,button.clover-content-search-hit,.clover-geomap-places button){border-inline-start-color:Canvas}:is(.clover-annotations-entry[data-selected=true],button.clover-contents-button[aria-current=true],.clover-transcript-cue[aria-current=true]>button,button.clover-content-search-hit[aria-current=true],.clover-geomap-places button[aria-current=true]){border-inline-start-color:Highlight}}:is(.clover-annotations-list,.clover-contents-list,.clover-transcript-cues,.clover-content-search-hits,.clover-geomap-places){display:flex;flex-direction:column;gap:var(--clover-space-2xs);margin:0;padding:0;list-style:none}.clover-about{display:flex;flex-direction:column;gap:var(--clover-space-m)}.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)));margin-inline-start:var(--clover-space-m);margin-bottom:min(0px,calc(var(--clover-about-label-height, var(--clover-about-thumbnail-height)) - var(--clover-about-thumbnail-height)));object-fit:cover;border-radius:var(--clover-radius, 3px);background-color:var(--clover-color-secondary-muted, #e6e8eb)}: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-label{margin:0;font-size:var(--clover-text-m);font-weight:600;line-height:1.25}.clover-about :is(p,ul){margin:0}.clover-about ul{padding:0;list-style:none}.clover-about a{color:var(--clover-color-accent-text, var(--clover-color-accent, #0065c3));overflow-wrap:anywhere}.clover-about-part-of>li{display:flex;flex-direction:column;align-items:flex-start}button.clover-about-open{min-height:var(--clover-space-l);margin:0;padding:0;border:0;background:none;color:var(--clover-color-accent-text, var(--clover-color-accent, #0065c3));font-size:var(--clover-text-s);text-decoration:underline 1px;text-decoration-color:color-mix(in srgb,currentColor 20%,transparent);text-underline-offset:var(--clover-space-3xs);cursor:pointer}button.clover-about-open:hover{text-decoration-color:currentColor}button.clover-about-open:focus-visible{outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:2px;border-radius:var(--clover-radius, 3px)}.clover-about .clover-about-heading{margin:0;font-size:inherit;font-weight:500}.clover-collection-title{margin:0;font-size:var(--clover-text-m);font-weight:500;text-wrap:balance}.clover-collection>.clover-items{margin-block:calc(var(--clover-space-l) - var(--clover-space-m))}.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;font-size:inherit}.clover-collection .clover-items-summary{font-size:var(--clover-text-s)}.clover-collection :is(.clover-items-label,.clover-items-summary){min-width:0;overflow-wrap:anywhere}.clover-split{align-items:stretch;gap:0;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;background-color:color-mix(in srgb,var(--clover-color-secondary-alt, #c1c8cd) 50%,transparent);cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none;outline:none;transition:background-color .15s}.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%;border-radius:var(--clover-radius, 3px);background-color:var(--clover-color-primary-muted, #26292b);transition:background-color .15s}.clover-split-handle:is(:hover,:focus-visible,[data-dragging]){background-color:color-mix(in srgb,var(--clover-color-accent, #0065c3) 80%,transparent)}.clover-split-handle:is(:hover,:focus-visible,[data-dragging]):after{background-color:var(--clover-color-accent, #0065c3)}@media (forced-colors: none){.clover-split-handle:not(:hover,:focus-visible,[data-dragging]){background-color:transparent}}.clover-split-handle:focus-visible{background-color:var(--clover-color-accent, #0065c3);box-shadow:0 0 0 2px var(--clover-color-secondary, #fff)}@media (forced-colors: active){.clover-split-handle,.clover-split-handle:after{background-color:CanvasText;transition:none}.clover-split-handle:is(:hover,:focus-visible,[data-dragging]),.clover-split-handle:is(:hover,:focus-visible,[data-dragging]):after{background-color:Highlight}.clover-split-handle:focus-visible{outline:2px solid CanvasText;outline-offset:2px}}@media (prefers-reduced-motion: reduce){.clover-split-handle,.clover-split-handle:after{transition:none}}:is(.clover-annotations,.clover-canvas-annotation-menu){display:flex;flex-direction:column;gap:var(--clover-space-l)}:is(div,legend).clover-annotations-set-header{display:flex;align-items:center;gap:var(--clover-space-2xs);margin:0 0 var(--clover-space-s);padding:0;color:inherit;font-size:inherit}.clover-canvas-annotation-menu>fieldset+fieldset{margin-top:0}.clover-annotations-set-header>.clover-hide{margin-inline-start:auto;margin-inline-end:calc(-1 * var(--clover-space-xs))}.clover-annotations-languages+.clover-hide{margin-inline-start:0}.clover-annotations-set:has(>.clover-annotations-set-header>.clover-hide:hover) .clover-annotations-entry,.clover-annotations-set:has(>.clover-annotations-set-header>.clover-hide input:focus-visible) .clover-annotations-entry{background-color:var(--clover-color-secondary-muted, #f1f1f1)}.clover-annotations-title{margin:0;font-size:inherit;font-weight:700}.clover-annotations-languages{margin-inline-start:auto}:is(li,label).clover-annotations-entry{display:flex;align-items:flex-start;gap:var(--clover-space-s)}:is(li,label).clover-annotations-entry{content-visibility:auto;contain-intrinsic-size:auto 2.618rem}label.clover-annotations-entry>input{position:absolute;margin:0;opacity:0;pointer-events:none}.clover-annotations-thumbnail{flex:none;width:var(--clover-space-l);height:var(--clover-space-l);object-fit:cover;border-radius:var(--clover-radius, 3px);background-color:var(--clover-color-secondary-muted, #e6e8eb)}.clover-annotations-body{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.clover-annotations-body p{margin:0}.clover-annotations-body :is(ul,ol){margin:0;padding-inline-start:var(--clover-space-l)}.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}.clover-annotations-body a{color:var(--clover-color-accent-text, var(--clover-color-accent, #0065c3))}:is(a,button).clover-annotations-link{display:inline-block;min-height:var(--clover-space-l);margin:var(--clover-space-2xs) 0 0;padding:0;border:0;background:none;color:var(--clover-color-accent-text, var(--clover-color-accent, #0065c3));font:inherit;font-size:var(--clover-text-s);text-decoration:underline 1px;text-decoration-color:color-mix(in srgb,currentColor 20%,transparent);text-underline-offset:var(--clover-space-3xs);cursor:pointer}:is(a,button).clover-annotations-link:hover{text-decoration-color:currentColor}:is(a,button).clover-annotations-link:focus-visible{outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:2px;border-radius:var(--clover-radius, 3px)}.clover-annotations-image{display:block;max-width:100%;height:auto;border-radius:var(--clover-radius, 3px)}.clover-annotations-entry:has(>:is(button.clover-annotations-show,input):focus-visible){outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:1px}.clover-annotations-canvas{display:flex;flex-direction:column;gap:var(--clover-space-xs)}.clover-annotations-canvas+.clover-annotations-canvas{margin-top:var(--clover-space-m)}.clover-annotations-canvas-label{margin:0;padding-inline-start:calc(var(--clover-space-s) + 3px);color:var(--clover-color-primary-muted, #26292b);font-size:var(--clover-text-s);font-weight:600}.clover-annotations-canvas[aria-current=true]>.clover-annotations-canvas-label{padding-inline-start:var(--clover-space-s);border-inline-start:3px solid var(--clover-color-accent, #0065c3);color:var(--clover-color-primary, #1a1d1e)}@media (forced-colors: active){.clover-annotations-canvas[aria-current=true]>.clover-annotations-canvas-label{border-inline-start-color:Highlight}}.clover-download-groups{display:flex;flex-direction:column;gap:var(--clover-space-s)}.clover-download-title{margin:0 0 var(--clover-space-2xs);color:var(--clover-color-primary-muted, #26292b);font-size:var(--clover-text-s);font-weight:700}.clover-download-list{margin:0;padding:0;list-style:none}.clover-download-link{display:block;padding:var(--clover-space-2xs) 0;color:var(--clover-color-accent-text, var(--clover-color-accent, #0065c3));overflow-wrap:anywhere}.clover-download-format{color:var(--clover-color-primary-muted, #26292b);font-size:var(--clover-text-s)}.clover-transcript{display:flex;flex-direction:column;gap:var(--clover-space-s)}.clover-transcript-cues{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--clover-space-s)}.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;gap:var(--clover-space-s)}.clover-transcript-body>p{margin:0;white-space:pre-line;overflow-wrap:anywhere}.clover-transcript-voice{font-weight:600}.clover-transcript-languages{justify-content:flex-end}.clover-transcript-find-status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.clover-transcript-cue mark{padding:0 var(--clover-space-3xs);border-radius:2px;background-color:color-mix(in srgb,var(--clover-color-accent, #0065c3) 20%,transparent);color:inherit;font-weight:700}.clover-transcript-cue[data-match=current] mark{background-color:color-mix(in srgb,var(--clover-color-accent, #0065c3) 36%,transparent);box-shadow:0 0 0 1px var(--clover-color-accent, #0065c3)}@media (forced-colors: active){.clover-transcript-cue mark{background-color:Mark;color:MarkText}.clover-transcript-cue[data-match=current] mark{outline:2px solid Highlight}}.clover-transcript-more{height:1px;margin-top:-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);margin-block:calc(-1 * var(--clover-space-xs));padding-block:var(--clover-space-xs);background-color:var(--clover-color-secondary, #fff)}.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);background:linear-gradient(to bottom,var(--clover-color-secondary, #fff),transparent);opacity:0;pointer-events:none;animation:clover-shade linear both;animation-timeline:scroll();animation-range:0 var(--clover-space-m)}.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}}.clover-contents-list .clover-contents-list{margin-inline-start:var(--clover-space-s);padding-inline-start:var(--clover-space-m);border-inline-start:1px solid var(--clover-color-secondary-muted, #e6e8eb)}button.clover-contents-button{display:block}button.clover-contents-button[data-timed=true]{display:flex;gap:var(--clover-space-s)}button.clover-contents-button:disabled{color:var(--clover-color-primary-muted, #26292b);cursor:default}button.clover-contents-button[aria-current=true]{font-weight:600}.clover-content-search{display:flex;flex-direction:column;gap:var(--clover-space-s)}.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);margin-block:calc(-1 * var(--clover-space-xs));padding-block:var(--clover-space-xs);background-color:var(--clover-color-secondary, #fff)}.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);background:linear-gradient(to bottom,var(--clover-color-secondary, #fff),transparent);opacity:0;pointer-events:none;animation:clover-shade linear both;animation-timeline:scroll();animation-range:0 var(--clover-space-m)}.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{margin:0;color:var(--clover-color-primary-muted, #26292b);font-size:var(--clover-text-s)}.clover-content-search-status:not([data-status=loading],[data-status=error]),.clover-content-search-status:empty{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.clover-content-search-canvas{margin:0 0 var(--clover-space-xs);font-size:inherit;font-weight:700}.clover-content-search-hits>li{content-visibility:auto;contain-intrinsic-size:auto 3.236rem}.clover-content-search-more{height:1px;margin-top:-1px}button.clover-content-search-hit{display:block;overflow-wrap:anywhere}button.clover-content-search-hit:focus-visible{outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:-2px}.clover-content-search-hit mark{padding:0 var(--clover-space-3xs);border-radius:2px;background-color:color-mix(in srgb,var(--clover-color-accent, #0065c3) 20%,transparent);color:inherit;font-weight:700}@media (forced-colors: active){.clover-content-search-hit mark{background-color:Mark;color:MarkText}}.clover-geomap{display:grid;gap:var(--clover-space-s)}.clover-geomap>div{overflow:hidden;border-radius:var(--clover-radius, 3px);background-color:var(--clover-color-secondary-muted, #e6e8eb)}.clover-geomap-error{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:var(--clover-space-m);color:var(--clover-color-primary-muted, #26292b);text-align:center}.clover-geomap>div:has(.maplibregl-canvas:focus-visible):after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--clover-color-primary, #1a1d1e),inset 0 0 0 5px var(--clover-color-accent, #0065c3),inset 0 0 0 7px var(--clover-color-secondary, #fff);pointer-events:none}.clover-geomap .maplibregl-ctrl-group button:focus-visible>.maplibregl-ctrl-icon,.clover-geomap .maplibregl-ctrl-attrib:has(>.maplibregl-ctrl-attrib-button:focus-visible){outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:-2px}@media (forced-colors: active){.clover-geomap>div:has(.maplibregl-canvas:focus-visible):after{box-shadow:none;outline:3px solid CanvasText;outline-offset:-3px}}.clover-geomap-popup .maplibregl-popup-content{padding:var(--clover-space-xs) var(--clover-space-s);border-radius:var(--clover-radius, 3px);background-color:var(--clover-color-secondary, #fff)!important;color:var(--clover-color-primary, #1a1d1e);font:inherit;font-size:var(--clover-text-s)}.clover-geomap-popup[class*=maplibregl-popup-anchor-top] .maplibregl-popup-tip{border-bottom-color:var(--clover-color-secondary, #fff)!important}.clover-geomap-popup[class*=maplibregl-popup-anchor-bottom] .maplibregl-popup-tip{border-top-color:var(--clover-color-secondary, #fff)!important}.clover-geomap-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:var(--clover-color-secondary, #fff)!important}.clover-geomap-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:var(--clover-color-secondary, #fff)!important}.clover-geomap-places span+span{display:block;margin-block-start:var(--clover-space-3xs);color:var(--clover-color-primary-muted, #26292b);font-size:var(--clover-text-s)}.clover-collection-select{display:flex;flex-wrap:wrap;align-items:center;gap:var(--clover-space-xs)}.clover-collection-select-label{color:var(--clover-color-primary-muted, #26292b);font-size:var(--clover-text-s);font-weight:600}.clover-collection-select-control{min-width:0;max-width:100%;padding-inline-end:var(--clover-space-xl)}.clover-template-default{--clover-body-height: min(65vh, 40rem);display:flex;flex-direction:column;color:var(--clover-color-primary, #1a1d1e)}.clover-template-default[data-fill]{--clover-body-height: auto;height:100%;min-height:min-content}.clover-template-default[data-fill]>.clover-template-default-panes{flex:1 1 auto}.clover-template-default[data-fill] .clover-template-default-body{flex:1 1 0;min-height:16rem}.clover-template-default-header{display:flex;align-items:center;gap:var(--clover-space-s);padding:var(--clover-inset)}.clover-template-default-title{margin:0;font-size:var(--clover-text-l);line-height:1.25;font-weight:400}.clover-template-default-provider{flex:0 1 auto;max-width:38.2%;margin-inline-start:auto}.clover-template-default-panes{position:relative}.clover-template-default-main{display:flex;flex-direction:column}.clover-template-default-panel{contain:size;overflow-y:auto}.clover-template-default-panel[hidden]{display:none}.clover-template-default-panes>.clover-split-handle{translate:-1.5px 0}.clover-template-default-panes:dir(rtl)>.clover-split-handle{translate:1.5px 0}.clover-template-default-panes:dir(ltr) .clover-items-viewport{margin-right:0}.clover-template-default-panes:dir(rtl) .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;border-inline-start:1px solid var(--clover-color-secondary-muted, #e6e8eb);background:linear-gradient(var(--clover-grip),var(--clover-grip)) no-repeat left var(--clover-space-2xs) center / 4px var(--clover-space-xl),var(--clover-color-secondary, #fff);--clover-grip: color-mix( in srgb, var(--clover-color-primary-muted, #26292b) 30%, transparent );touch-action:pan-y;box-shadow:calc(-1 * var(--clover-space-s)) 0 var(--clover-space-l) #0000001f;transform:translate(100%);transition:transform .24s cubic-bezier(.16,1,.3,1)}.clover-template-panes[data-panel=over]>.clover-template-drawer:dir(rtl){transform:translate(-100%);background-position:right var(--clover-space-2xs) center,0 0}.clover-template-panes[data-panel=over]>.clover-template-drawer[data-open=true]{transform:none}.clover-template-scrim{position:absolute;inset:0;z-index:3;background-color:#0003;opacity:0;cursor:pointer;transition:opacity .24s ease}.clover-template-scrim[data-open=true]{opacity:1}@media (prefers-reduced-motion: reduce){.clover-template-panes[data-panel=over]>.clover-template-drawer,.clover-template-scrim{transition:none}}.clover-template-default-rail{display:flex;flex-direction:column;gap:var(--clover-space-m);padding:var(--clover-inset)}.clover-template-default-rail>.clover-items{margin-inline-end:calc(-1 * var(--clover-inset))}.clover-template-default-rail .clover-items-viewport{margin-inline-end:0}.clover-template-default-rail .clover-items-frame:not([dir=rtl])>button.clover-items-scroll-prev,.clover-template-default-rail .clover-items-frame[dir=rtl]>button.clover-items-scroll-next{left:calc(-1 * var(--clover-space-s))}.clover-template-default-rail .clover-items-frame:not([dir=rtl])>button.clover-items-scroll-next,.clover-template-default-rail .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-rail-header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--clover-space-s)}.clover-template-default-titles{min-width:0;margin:0;overflow-wrap:anywhere}.clover-template-default-titles>.clover-template-default-titles-dot{margin-inline:var(--clover-space-xs);color:var(--clover-color-primary-muted, #26292b)}.clover-template-default-rail-header .clover-pager-position{flex-shrink:0;margin-inline-start:auto;font-size:var(--clover-text-s)}.clover-template-default-spine{position:relative;z-index:3;flex:none;width:0}.clover-template-default-spine>*{position:absolute;top:calc(var(--clover-template-spine-top, 0px) + var(--clover-inset));inset-inline-start:-1.5px;translate:-50%}.clover-template-default-spine:dir(rtl)>*{translate:50%}}

package/dist/templates/default/Default.mjs

@@ -0,0 +1,229 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
+import { useDragToClose } from "../shared/useDragToClose.mjs";
+import { useWideEnough, panelFocus, useSlide } from "../shared/useSlide.mjs";
+import { useFollowFocus } from "../shared/useFollowFocus.mjs";
+import { useSpineTop } from "../shared/useSpine.mjs";
+import { useUniqueId } from "../../ui/useUniqueId.mjs";
+import { Root } from "../../components/Root/Root.mjs";
+import { titled } from "../../ui/heading.mjs";
+import { Split, SplitPane, SplitHandle } from "../../components/Split/Split.mjs";
+import { Label } from "../../components/Label/Label.mjs";
+import { Provider, Logo } from "../../components/Provider/Provider.mjs";
+import { Status } from "../../components/Status/Status.mjs";
+import { Body } from "../../components/Body/Body.mjs";
+import { Position } from "../../components/Items/Pager.mjs";
+import { Items } from "../../components/Items/Items.mjs";
+import { Panel } from "../../components/Panel/Panel.mjs";
+import { PanelToggle } from "../../components/Panel/PanelToggle.mjs";
+import { useVisibleCanvases } from "../../react/hooks.mjs";
+const BODY_MIN = "16rem";
+const PANEL_MIN = "14rem";
+const BESIDE_REM = 16 + 14 + 1;
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function Default({
+  className,
+  header = true,
+  headingLevel = 2,
+  panel = true,
+  defaultPanelOpen,
+  panelLayout = "accordion",
+  download = true,
+  items = "slider",
+  storageKey = "clover-template-default",
+  fill = false,
+  ...root
+}) {
+  const panes = useRef(null);
+  const measured = useWideEnough(panes, BESIDE_REM);
+  const beside = measured ?? true;
+  const [choice, setChoice] = useState(defaultPanelOpen ?? true);
+  const [floating, setFloating] = useState(false);
+  const open = beside ? choice : floating;
+  const pane = useRef(null);
+  const tries = useRef(0);
+  useEffect(() => {
+    if (!tries.current || !pane.current) return;
+    tries.current -= 1;
+    const target = panelFocus(pane.current);
+    target == null ? void 0 : target.focus({ preventScroll: true });
+    if (target && document.activeElement === target) tries.current = 0;
+  });
+  const setOpen = (value) => {
+    tries.current = !beside && value ? 3 : 0;
+    if (!beside) setFloating(value);
+    setChoice(value);
+  };
+  const baseId = useUniqueId().replace(/:/g, "");
+  const panelId = `${baseId}-panel`;
+  const title = titled(headingLevel, `${baseId}-title`);
+  const followFocus = useFollowFocus();
+  const follow = () => followFocus(
+    () => document.querySelector(
+      `[data-button="panel"][aria-controls~="${panelId}"]`
+    )
+  );
+  const handBack = () => {
+    var _a;
+    if ((_a = pane.current) == null ? void 0 : _a.contains(document.activeElement)) follow();
+  };
+  const wasBeside = useRef(measured);
+  useIsomorphicLayoutEffect(() => {
+    if (wasBeside.current === true && measured === false) follow();
+    if (measured === true) setFloating(false);
+    wasBeside.current = measured;
+  }, [measured]);
+  const over = !beside;
+  const docked = panel && !over && open;
+  const spine = useRef(null);
+  useSpineTop(
+    spine,
+    () => {
+      var _a, _b;
+      return (_b = (_a = spine.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.querySelector(
+        ".clover-template-default-body"
+      );
+    },
+    docked
+  );
+  const toggle = /* @__PURE__ */ jsx(
+    PanelToggle,
+    {
+      open,
+      onOpenChange: (next) => {
+        if (!over) follow();
+        setOpen(next);
+      },
+      controls: panelId
+    }
+  );
+  const slide = useSlide(over && open);
+  const scrim = useRef(null);
+  useDragToClose(pane, {
+    enabled: over && slide.open,
+    side: "end",
+    onClose: () => {
+      handBack();
+      setOpen(false);
+    },
+    scrim
+  });
+  const shown = over ? slide.mounted : open;
+  return /* @__PURE__ */ jsx(
+    Root,
+    {
+      className: ["clover-template-default", className].filter(Boolean).join(" "),
+      "data-fill": fill || void 0,
+      ...header ? title.group : null,
+      ...root,
+      children: /* @__PURE__ */ jsxs(
+        Split,
+        {
+          ref: panes,
+          className: "clover-template-default-panes clover-template-panes",
+          "data-panel": over ? "over" : "beside",
+          storageKey: storageKey || void 0,
+          onKeyDown: (event) => {
+            if (over && open && event.key === "Escape" && !event.defaultPrevented) {
+              event.preventDefault();
+              setOpen(false);
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              SplitPane,
+              {
+                className: "clover-template-default-main",
+                min: over ? void 0 : BODY_MIN,
+                children: [
+                  header && /* @__PURE__ */ jsxs("header", { className: "clover-template-default-header", children: [
+                    /* @__PURE__ */ jsx(
+                      Label,
+                      {
+                        as: title.as,
+                        className: "clover-template-default-title",
+                        ...title.title
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Provider, { className: "clover-template-default-provider", children: /* @__PURE__ */ jsx(Logo, {}) })
+                  ] }),
+                  /* @__PURE__ */ jsx(Status, { loading: false }),
+                  /* @__PURE__ */ jsx(Body, { className: "clover-template-default-body", children: panel && !docked && toggle }),
+                  /* @__PURE__ */ jsxs("div", { className: "clover-template-default-rail", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "clover-template-default-rail-header", children: [
+                      /* @__PURE__ */ jsx(ViewTitles, {}),
+                      /* @__PURE__ */ jsx(Position, {})
+                    ] }),
+                    items && /* @__PURE__ */ jsx(Items, { layout: items })
+                  ] })
+                ]
+              }
+            ),
+            docked && /* @__PURE__ */ jsx(SplitHandle, { "aria-controls": panelId }),
+            docked && /* @__PURE__ */ jsx("div", { ref: spine, className: "clover-template-default-spine", children: toggle }),
+            panel && /* @__PURE__ */ jsx(
+              SplitPane,
+              {
+                ref: pane,
+                id: panelId,
+                "data-spine": over || void 0,
+                name: "panel",
+                className: "clover-template-default-panel clover-template-drawer",
+                size: "24rem",
+                min: over ? void 0 : PANEL_MIN,
+                "data-open": over ? slide.open : open,
+                hidden: !shown,
+                children: /* @__PURE__ */ jsx(
+                  Panel,
+                  {
+                    layout: panelLayout,
+                    download,
+                    headingLevel: header ? below(headingLevel) : headingLevel,
+                    onClose: over ? () => setOpen(false) : void 0,
+                    closeOnEscape: over
+                  }
+                )
+              }
+            ),
+            panel && over && slide.mounted && // The uncovered strip, and the Body under the panel: a click puts it away.
+            // A press on it takes no focus, so focus in the panel is still there to hand
+            // back to the toggle, never left to fall to the page (WCAG 2.4.3).
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: scrim,
+                className: "clover-template-default-scrim clover-template-scrim",
+                "data-open": slide.open,
+                "aria-hidden": "true",
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: () => {
+                  handBack();
+                  setOpen(false);
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+const below = (level) => level + 1;
+function ViewTitles() {
+  const canvases = useVisibleCanvases();
+  return /* @__PURE__ */ jsx("p", { className: "clover-template-default-titles", children: canvases.map((canvas, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    index > 0 && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "clover-template-default-titles-dot",
+        "aria-hidden": "true",
+        children: "·"
+      }
+    ),
+    /* @__PURE__ */ jsx(Label, { label: canvas.label })
+  ] }, canvas.id)) });
+}
+export {
+  Default
+};