/*
 * The full-screen Viewer (F06, viewer.js): one post at a time on a dark screening surface, whatever
 * the page's theme. The work is the brightest thing on screen; the words sit on a quiet scrim at the
 * foot. Posts snap vertically, a post's items snap sideways, a text post is a full-screen text card.
 * Motion is transform and opacity only, and reduced motion or Save-Data get the still version.
 * A swipe down from the top closes it. Also here: the feed clip's muted preview (phase 2) and the search
 * result picture.
 */

html.pk-viewer-open, html.pk-viewer-open body { overflow: hidden; overscroll-behavior: none; }
/* A notice from another script (Block's Undo) shows above the Viewer, not behind it. */
html.pk-viewer-open .fs-toast { z-index: 1400; }

.pk-viewer {
  --pk-viewer-bg: #050506;
  --pk-viewer-card: #111112;
  --pk-viewer-ink: #f5f2f1;
  --pk-viewer-muted: #c9c5c7;
  --pk-viewer-faint: rgba(245, 242, 241, .14);
  --pk-viewer-line: rgba(245, 242, 241, .22);
  --pk-viewer-scrim: rgba(5, 5, 6, .82);
  --pk-viewer-glass: rgba(5, 5, 6, .55);
  position: fixed; inset: 0; z-index: 1300; display: block; overflow: hidden;
  background: var(--pk-viewer-bg); color: var(--pk-viewer-ink); color-scheme: dark;
  font-size: var(--pk-type-body); line-height: 1.45;
}
.pk-viewer[hidden] { display: none; }
.pk-viewer:focus { outline: none; }
.pk-viewer :focus-visible { outline: var(--pk-focus-width) solid var(--pk-focus); outline-offset: 2px; }
.pk-viewer a { color: inherit; }

/* The bar: close, the list's name, sound. */
.pk-viewer-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); pointer-events: none; }
.pk-viewer-bar > * { pointer-events: auto; }
.pk-viewer-label { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: var(--pk-type-ui); font-weight: 600; color: var(--pk-viewer-muted); pointer-events: none; }
.pk-viewer-close, .pk-viewer-sound, .pk-viewer-step { display: inline-grid; place-items: center; width: var(--pk-hit); height: var(--pk-hit); padding: 0; border: 1px solid var(--pk-viewer-line); border-radius: 50%; background: var(--pk-viewer-glass); color: var(--pk-viewer-ink); cursor: pointer; }
.pk-viewer-sound[hidden] { display: none; }
.pk-viewer-sound[aria-pressed="true"] { border-color: var(--pk-accent-ink); color: var(--pk-accent-ink); }
.pk-viewer-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pk-viewer-icon--play { fill: currentColor; stroke: none; }
.pk-viewer-close:active, .pk-viewer-sound:active, .pk-viewer-step:active, .pk-viewer-action:active { scale: var(--pk-press-scale); filter: var(--pk-press-filter); }

/* Previous and next on a desktop; on a phone the swipe is the way. */
.pk-viewer-steps { position: absolute; right: max(16px, env(safe-area-inset-right)); top: 50%; z-index: 3; display: grid; gap: 10px; transform: translateY(-50%); }
@media (hover: none), (pointer: coarse) { .pk-viewer-steps { display: none; } }

/* A swipe down from the top closes: the posts follow the finger (viewer.js sets --pk-viewer-pull). */
.pk-viewer.is-pulling .pk-viewer-track { transform: translateY(var(--pk-viewer-pull, 0px)); opacity: .82; }

/* The track: one post per screen, snapping. */
.pk-viewer-track { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.pk-viewer-track::-webkit-scrollbar { display: none; }
.pk-viewer-slide { position: relative; box-sizing: border-box; height: 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }

/* A post with media: the work fills the screen, letterboxed, never cropped. */
.pk-viewer-stage { position: absolute; inset: 0; }
.pk-viewer-strip { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.pk-viewer-strip::-webkit-scrollbar { display: none; }
.pk-viewer-item { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; flex: 0 0 100%; width: 100%; height: 100%; min-width: 0; overflow: hidden; scroll-snap-align: center; }
.pk-viewer-picture { display: contents; }
.pk-viewer-picture > source { display: none; }
.pk-viewer-item > *, .pk-viewer-picture > img { grid-area: 1 / 1; }
.pk-viewer-image, .pk-viewer-poster, .pk-viewer-video, .pk-viewer-frame { display: block; width: 100%; height: 100%; object-fit: contain; }
.pk-viewer-image[hidden], .pk-viewer-poster[hidden] { display: none; }
.pk-viewer-dots { position: absolute; top: calc(max(8px, env(safe-area-inset-top)) + 54px); left: 50%; z-index: 2; display: flex; gap: 2px; transform: translateX(-50%); }
.pk-viewer-dot { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.pk-viewer-dot::after { content: ""; position: absolute; left: 9px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--pk-viewer-line); }
.pk-viewer-dot[aria-current="true"]::after { background: var(--pk-viewer-ink); }
.pk-viewer-count { position: absolute; top: calc(max(8px, env(safe-area-inset-top)) + 54px); right: 14px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: var(--pk-viewer-glass); font-size: var(--pk-type-meta); font-weight: 600; text-decoration: none; }

/* A clip: the poster until it plays; sound off until a tap. */
.pk-viewer-clip { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; width: 100%; height: 100%; min-width: 0; overflow: hidden; }
.pk-viewer-clip > :is(.pk-viewer-poster, .pk-viewer-video, .pk-viewer-frame) { grid-area: 1 / 1; }
.pk-viewer-video { opacity: 0; transition: opacity var(--pk-dur-base) var(--pk-ease-quick); }
.pk-viewer-clip.is-playing .pk-viewer-video { opacity: 1; }
.pk-viewer-frame { border: 0; }
.pk-viewer-play { grid-area: 1 / 1; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 1px solid var(--pk-viewer-line); border-radius: 50%; background: var(--pk-viewer-glass); color: var(--pk-viewer-ink); cursor: pointer; }
.pk-viewer-play[hidden] { display: none; }
.pk-viewer-play .pk-viewer-icon { width: 28px; height: 28px; margin-left: 3px; }
.pk-viewer-clip.is-loading .pk-viewer-play { opacity: .6; }
.pk-viewer-duration { position: absolute; top: calc(max(8px, env(safe-area-inset-top)) + 58px); left: 14px; z-index: 1; padding: 3px 8px; border-radius: 6px; background: var(--pk-viewer-glass); font-size: var(--pk-type-caption); font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none; }
.pk-viewer-clip-status { position: absolute; left: 16px; right: 16px; top: 50%; z-index: 1; margin: 48px 0 0; text-align: center; font-size: var(--pk-type-ui); color: var(--pk-viewer-ink); }
.pk-viewer-clip-status:empty { display: none; }
.pk-viewer-clip-note { grid-area: 1 / 1; z-index: 1; padding: 10px 16px; border-radius: 999px; background: var(--pk-viewer-glass); font-size: var(--pk-type-ui); font-weight: 600; }

/* Before / After: the after frame is wiped in by the range (viewer.js sets --pk-split). */
.pk-viewer-item--pair { container-type: size; }
.pk-viewer-pair { position: relative; display: grid; width: 100%; height: 100%; }
/* Tight to the picture, so the divider and the labels sit on it and not on the black around it. */
@supports (width: 1cqw) {
  .pk-viewer-pair { width: min(100cqw, calc(100cqh * var(--pk-ratio, 1.7778))); height: auto; aspect-ratio: var(--pk-ratio, 1.7778); }
}
.pk-viewer-pair > .pk-viewer-picture > img, .pk-viewer-pair > img { grid-area: 1 / 1; }
.pk-viewer-pair-after { clip-path: inset(0 0 0 var(--pk-split, 50%)); }
.pk-viewer-pair::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pk-split, 50%); width: 2px; margin-left: -1px; background: var(--pk-viewer-ink); pointer-events: none; }
.pk-viewer-pair-mark { position: absolute; top: 10px; padding: 3px 8px; border-radius: 6px; background: var(--pk-viewer-glass); font-size: var(--pk-type-caption); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.pk-viewer-pair-mark--before { left: 10px; }
.pk-viewer-pair-mark--after { right: 10px; }
.pk-viewer-wipe { position: absolute; left: 0; right: 0; top: 50%; z-index: 1; width: 100%; height: var(--pk-hit); margin: -22px 0 0; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: ew-resize; touch-action: pan-y; }
.pk-viewer-wipe::-webkit-slider-runnable-track { height: var(--pk-hit); background: transparent; }
.pk-viewer-wipe::-moz-range-track { height: var(--pk-hit); background: transparent; }
.pk-viewer-wipe::-webkit-slider-thumb { -webkit-appearance: none; width: 38px; height: 38px; margin-top: 3px; border: 2px solid var(--pk-viewer-ink); border-radius: 50%; background: var(--pk-viewer-glass); }
.pk-viewer-wipe::-moz-range-thumb { width: 38px; height: 38px; border: 2px solid var(--pk-viewer-ink); border-radius: 50%; background: var(--pk-viewer-glass); }

/* The words at the foot: author, Club, craft, caption, credits, actions. */
.pk-viewer-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 8px; max-height: 58%; overflow: hidden; padding: 56px max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: linear-gradient(to top, var(--pk-viewer-scrim) 55%, transparent); pointer-events: none; }
.pk-viewer-info > * { pointer-events: auto; }
.pk-viewer-slide.is-reading .pk-viewer-info { max-height: 86%; overflow-y: auto; overscroll-behavior: contain; background: var(--pk-viewer-scrim); }
@media (min-width: 760px) { .pk-viewer-info { padding-right: 96px; } .pk-viewer-info > * { max-width: 640px; } }
.pk-viewer-reason { margin: 0; font-size: var(--pk-type-meta); font-weight: 600; color: var(--pk-viewer-muted); }
.pk-viewer-author { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pk-viewer-author-face { flex: none; }
.pk-viewer-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--pk-viewer-faint); font-size: var(--pk-type-ui); font-weight: 700; }
.pk-viewer-author-text { min-width: 0; }
.pk-viewer-author-name { display: block; overflow: hidden; font-weight: 700; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.pk-viewer-author-meta { margin: 0; overflow: hidden; font-size: var(--pk-type-meta); color: var(--pk-viewer-muted); text-overflow: ellipsis; white-space: nowrap; }
.pk-viewer-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pk-viewer-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 2px 10px; border: 1px solid var(--pk-viewer-line); border-radius: 999px; background: var(--pk-viewer-glass); font-size: var(--pk-type-meta); font-weight: 600; text-decoration: none; }
.pk-viewer-chip .pk-viewer-icon { width: 14px; height: 14px; }
.pk-viewer-answered { border-color: var(--pk-good-line); color: var(--pk-good); }
.pk-viewer-answered[hidden] { display: none; }
.pk-viewer-caption, .pk-viewer-words { display: grid; gap: 4px; }
.pk-viewer-title { margin: 0; font-size: var(--pk-type-lead); font-weight: 700; line-height: 1.3; }
.pk-viewer-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.pk-viewer-caption .pk-viewer-text { white-space: normal; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pk-viewer-caption.is-open .pk-viewer-text { display: block; white-space: pre-line; }
.pk-viewer-more { justify-self: start; min-height: 32px; padding: 0; border: 0; background: none; color: var(--pk-accent-ink); font: inherit; font-size: var(--pk-type-ui); font-weight: 600; cursor: pointer; }
.pk-viewer-read-all { display: inline-flex; align-items: center; min-height: var(--pk-hit); text-decoration: none; }
.pk-viewer-credits { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: var(--pk-type-meta); }
.pk-viewer-credit { display: inline-flex; gap: 6px; align-items: baseline; }
.pk-viewer-credit-role { color: var(--pk-viewer-muted); }
.pk-viewer-credit-name { font-weight: 600; }
.pk-viewer-actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.pk-viewer-info .pk-viewer-actions { margin-inline: -10px; }
.pk-viewer-icon--more { stroke-width: 3; }

/* The "⋯": Report, Mute and Block on every post. */
.pk-viewer-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 3; display: grid; min-width: 220px; padding: 6px; border: 1px solid var(--pk-viewer-line); border-radius: 14px; background: var(--pk-viewer-card); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
.pk-viewer-menu-item { min-height: var(--pk-hit); padding: 0 14px; border: 0; border-radius: 10px; background: none; color: var(--pk-viewer-ink); font: inherit; font-size: var(--pk-type-ui); font-weight: 600; text-align: left; cursor: pointer; }
.pk-viewer-menu-item--danger { color: var(--pk-error); }
.pk-viewer-toast { position: absolute; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 5; width: min(480px, calc(100% - 32px)); margin: 0; padding: 12px 16px; box-sizing: border-box; border: 1px solid var(--pk-viewer-line); border-radius: 14px; background: var(--pk-viewer-card); font-size: var(--pk-type-ui); transform: translateX(-50%); }
.pk-viewer-toast[hidden] { display: none; }
.pk-viewer-action { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: var(--pk-hit); min-height: var(--pk-hit); padding: 0 8px; border: 0; border-radius: 12px; background: none; color: var(--pk-viewer-ink); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; } /* F23b: a bare icon in a 44px target, no fill, no border */
.pk-viewer-action .pk-viewer-icon { width: 24px; height: 24px; }
.pk-viewer-action .pk-viewer-open-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the link keeps its name for a screen reader */
.pk-viewer-action .pk-engage-count:empty { display: none; }
.pk-viewer-action.pk-engage-heart[aria-pressed="true"] { color: var(--pk-heart); }
.pk-viewer-action.pk-engage-heart[aria-pressed="true"] .pk-viewer-icon { fill: currentColor; }
.pk-viewer-open { margin-left: auto; }
.pk-viewer-actions .pk-engage-status { flex-basis: 100%; margin: 0; font-size: var(--pk-type-meta); color: var(--pk-viewer-muted); }
.pk-viewer-actions .pk-engage-status:empty { display: none; }

/* A text post: a full-screen text card in the sequence, on the same neutral near-black as every other pane (no colour behind words or work).
   The words are centred and large at a comfortable line length; who wrote it and when is a quiet footer row under them. */
.pk-viewer-slide--text { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; justify-items: center; gap: 12px; padding: calc(max(8px, env(safe-area-inset-top)) + 64px) max(24px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); background: var(--pk-viewer-bg); }
.pk-viewer-textcard { display: grid; align-content: center; justify-items: center; gap: 16px; width: min(560px, calc(100% - 88px)); min-height: 0; overflow: hidden; text-align: center; }
.pk-viewer-words { display: grid; justify-items: center; gap: 12px; }
.pk-viewer-words .pk-viewer-title { margin: 0; font-size: var(--pk-type-title); }
.pk-viewer-words .pk-viewer-text { display: -webkit-box; max-width: 32ch; margin-inline: auto; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 10; font-family: inherit; font-size: clamp(22px, 1.6vw + 17px, 30px); font-weight: 500; line-height: 1.4; text-align: center; }
.pk-viewer-textcard .pk-viewer-chips { justify-content: center; }
.pk-viewer-textcard .pk-viewer-credits { justify-content: center; }
.pk-viewer-textfoot { display: grid; justify-items: center; gap: 4px; width: min(560px, 100%); text-align: center; font-size: var(--pk-type-meta); color: var(--pk-viewer-muted); }
.pk-viewer-textfoot p { margin: 0; }
.pk-viewer-textfoot .pk-viewer-author-name { display: inline; font-weight: 600; color: var(--pk-viewer-ink); }
.pk-viewer-slide--text .pk-viewer-actions { width: min(560px, 100%); }

/* The end of a list, or a page loading. */
.pk-viewer-end, .pk-viewer-loading { display: grid; place-items: center; padding: 24px; }
.pk-viewer-endcard { display: grid; justify-items: center; gap: 12px; width: min(420px, 100%); text-align: center; }
.pk-viewer-endcard > .pk-viewer-icon { width: 34px; height: 34px; color: var(--pk-accent-ink); }
.pk-viewer-end-title { margin: 0; font-size: var(--pk-type-title); font-weight: 700; line-height: 1.25; }
.pk-viewer-end-text { margin: 0; color: var(--pk-viewer-muted); }
.pk-viewer-signin { font-size: var(--pk-type-ui); font-weight: 600; }
.pk-viewer-loading .pk-skeleton { width: min(320px, 70%); min-height: 48vh; border-radius: var(--pk-radius-overlay); }

/* Phase 4: the reply sheet, with comments, Helpful and the answered state. */
.pk-viewer-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; width: min(560px, 100%); max-height: 78%; margin: 0 auto; box-sizing: border-box; padding: 6px 16px max(14px, env(safe-area-inset-bottom)); border: 1px solid var(--pk-viewer-line); border-bottom: 0; border-radius: var(--pk-radius-overlay) var(--pk-radius-overlay) 0 0; background: var(--pk-viewer-card); box-shadow: 0 -18px 60px rgba(0, 0, 0, .55); animation: pk-viewer-sheet-in var(--pk-dur-base) var(--pk-ease-move); }
.pk-viewer-sheet[hidden] { display: none; }
@keyframes pk-viewer-sheet-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
.pk-viewer-sheet-head { display: flex; align-items: center; gap: 10px; min-height: 52px; }
.pk-viewer-sheet-title { flex: 1; margin: 0; font-size: var(--pk-type-lead); font-weight: 700; }
.pk-viewer-sheet-close { display: inline-grid; place-items: center; width: var(--pk-hit); height: var(--pk-hit); padding: 0; border: 0; border-radius: 50%; background: none; color: var(--pk-viewer-ink); cursor: pointer; }
.pk-viewer-sheet-status, .pk-viewer-sheet-empty, .pk-viewer-sheet-prompt { margin: 0 0 8px; font-size: var(--pk-type-ui); color: var(--pk-viewer-muted); }
.pk-viewer-sheet-status:empty, .pk-viewer-sheet-empty[hidden], .pk-viewer-sheet-prompt[hidden] { display: none; }
.pk-viewer-replies { display: grid; align-content: start; gap: 14px; min-height: 0; margin: 0; padding: 0 0 12px; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.pk-viewer-reply-item { display: grid; gap: 6px; }
.pk-viewer-reply-item.is-accepted { padding: 8px 10px; border: 1px solid var(--pk-good-line); border-radius: 12px; }
.pk-viewer-reply-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--pk-type-ui); }
.pk-viewer-reply-who .pk-viewer-avatar { width: 28px; height: 28px; font-size: var(--pk-type-caption); }
.pk-viewer-reply-name { font-weight: 700; text-decoration: none; }
.pk-viewer-reply-craft, .pk-viewer-reply-time { font-size: var(--pk-type-meta); color: var(--pk-viewer-muted); }
.pk-viewer-reply-body > :first-child { margin-top: 0; }
.pk-viewer-reply-body > :last-child { margin-bottom: 0; }
.pk-viewer-reply-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pk-viewer-helpful { min-height: var(--pk-hit); padding: 0 14px; border: 1px solid var(--pk-viewer-line); border-radius: 999px; background: none; color: var(--pk-viewer-ink); font: inherit; font-size: var(--pk-type-meta); font-weight: 600; cursor: pointer; }
.pk-viewer-helpful[aria-pressed="true"] { border-color: var(--pk-good-line); background: var(--pk-good-tint); color: var(--pk-good); }
.pk-viewer-helpful-count, .pk-viewer-reply-status { margin: 0; font-size: var(--pk-type-meta); color: var(--pk-viewer-muted); }
.pk-viewer-reply-status:empty { display: none; }
.pk-viewer-reply { display: flex; align-items: flex-end; gap: 8px; padding-top: 10px; border-top: 1px solid var(--pk-viewer-faint); }
.pk-viewer-reply[hidden] { display: none; }
.pk-viewer-reply-field { flex: 1; min-height: var(--pk-hit); max-height: 140px; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--pk-viewer-line); border-radius: 12px; background: var(--pk-viewer-bg); color: var(--pk-viewer-ink); font: inherit; font-size: 16px; resize: none; }
.pk-viewer-reply-send { min-height: var(--pk-hit); }

/* Phase 2: a feed clip's muted preview, laid over its poster while it plays. */
[data-clip-start] .pk-viewer-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--pk-dur-base) var(--pk-ease-quick); pointer-events: none; }
[data-clip-start].is-playing .pk-viewer-preview { opacity: 1; }
[data-clip-start].is-playing .pk-media-play { opacity: 0; transition: opacity var(--pk-dur-fast) var(--pk-ease-quick); }

/* Search: a post result with media shows its picture, which opens the Viewer. */
.pk-viewer-search-row { display: flex; align-items: center; gap: 12px; }
.pk-viewer-thumb { flex: none; display: block; width: 56px; height: 56px; overflow: hidden; border-radius: 10px; background: var(--pk-surface-raised); }
.pk-viewer-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .pk-viewer *, [data-clip-start] .pk-viewer-preview, [data-clip-start] .pk-media-play { transition: none !important; animation: none !important; }
  .pk-viewer-track, .pk-viewer-strip { scroll-behavior: auto; }
}
html.pk-save-data .pk-viewer * { transition: none !important; animation: none !important; }