/* design-editor: styles only it uses, split out of site.css by scripts/split-css.mjs. */
.share-loading { padding: 80px 0; text-align: center; color: var(--slate); }
.share-missing { max-width: 560px; margin: 40px auto; text-align: center; }
.share-meta { margin: 0; color: var(--slate); }
.share-status:empty { display: none; }
.share-status { color: var(--slate); }
.share-pages { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 28px 16px; border-radius: var(--r-panel); background: #ECEFF4; }
.share-pages img { display: block; max-width: min(100%, 900px); max-height: 82vh; width: auto; height: auto; background: #fff; box-shadow: 0 1px 3px rgb(15 29 58 / 0.12), 0 12px 32px -12px rgb(15 29 58 / 0.25); }
.share-pages img.is-clear { background: repeating-conic-gradient(#E3E7EE 0 25%, #fff 0 50%) 0 0 / 20px 20px; }
html.dv-open { overflow: hidden; }
.dv { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: #000; color: #fff; outline: none; }
.dv:not(.is-present) { background: #1A2233; }
.dv-stage { position: relative; flex: 1; display: grid; place-items: center; min-height: 0; padding: 24px; cursor: pointer; }
.dv.is-present .dv-stage { padding: 0; }
.dv-img { position: absolute; inset: 24px; margin: auto; max-width: calc(100% - 48px); max-height: calc(100% - 48px); user-select: none; -webkit-user-drag: none; }
.dv.is-present .dv-img { inset: 0; max-width: 100%; max-height: 100%; }
.dv:not(.is-present) .dv-img { box-shadow: 0 20px 60px -20px rgb(0 0 0 / 0.6); }
.dv-img:not([src]) { display: none; }
.dv-wait { position: absolute; margin: 0; color: rgb(255 255 255 / 0.7); }
.dv-bar { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); transition: opacity 0.3s; }
.dv.is-present .dv-bar { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 6px 8px; border-radius: 14px; background: rgb(20 24 33 / 0.85); }
.dv.is-idle { cursor: none; }
.dv.is-idle .dv-bar { opacity: 0; pointer-events: none; }
.dv-gap { width: 12px; }
.dv-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: rgb(255 255 255 / 0.1); color: #fff; cursor: pointer; }
.dv-btn:hover:not(:disabled) { background: rgb(255 255 255 / 0.22); }
.dv-btn:disabled { opacity: 0.3; cursor: default; }
.dv-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dv-btn .icon { width: 20px; height: 20px; }
.dv-count { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .dv-bar { transition: none; } }
.dv-img.dv-in-fade { animation: dv-fade 0.5s ease-out; }
.dv-img.dv-in-slide { animation: dv-slide 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.dv-img.dv-in-slide.dv-in-back { animation-name: dv-slide-back; }
.dv-img.dv-in-zoom { animation: dv-zoom 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { .dv-img[class*="dv-in-"] { animation: none; } }
.dv-btn-text { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 0 14px; font: 600 0.9rem var(--text); }