/* ============================================================
   Review player (js/review/*) — Frame.io-style video viewer on share links.
   Always dark whatever the site theme: colour judgement needs a neutral
   surround, which is why every review tool looks like this.
   ============================================================ */
.rv, .rvp, .pv {
  --rv-bg: #0b0c0f;
  --rv-bar: #141519;
  --rv-pop: #1c1d22;
  --rv-line: rgba(255,255,255,.075);
  --rv-line-hi: rgba(255,255,255,.14);
  --rv-text: #eceef2;
  --rv-dim: #a6abb5;
  --rv-faint: #6f7480;
  --rv-acc: var(--accent, #0a84ff);
  --rv-acc-rgb: var(--accent-rgb, 10,132,255);
  --rv-ease: cubic-bezier(.16,1,.3,1);
}

/* ---------- player shell ---------- */
.rv { position:relative; display:flex; flex-direction:column; width:100%; height:100%; min-height:0;
  background:var(--rv-bg); color:var(--rv-text); overflow:hidden; font-family:var(--body);
  -webkit-user-select:none; user-select:none; }
/* The video is pinned to the view box rather than laid out in it: as a grid/flow
   child its intrinsic 16:9 height won the row and the picture overflowed (cropped). */
.rv-view { position:relative; flex:1 1 auto; min-height:0; background:#000; }
.rv-video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; background:#000; outline:none; }
.rv.playing .rv-video { cursor:pointer; }

/* ---------- centre overlays ---------- */
.rv-big { position:absolute; left:50%; top:50%; width:74px; height:74px; margin:-37px 0 0 -37px;
  display:grid; place-items:center; border-radius:50%; color:#fff; padding:0 0 0 4px;
  background:rgba(12,13,16,.52); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.6); transition:transform .25s var(--rv-ease), background .2s; }
.rv-big .rv-i { width:30px; height:30px; }
.rv-big:hover { background:rgba(var(--rv-acc-rgb),.9); transform:scale(1.06); }
.rv-big:active { transform:scale(.97); }
.rv-big[hidden] { display:none; }

.rv-osd { position:absolute; top:18px; left:50%; transform:translateX(-50%); pointer-events:none;
  padding:.5rem .9rem; border-radius:10px; background:rgba(0,0,0,.68); color:#fff; white-space:nowrap;
  font:500 .9rem/1.2 var(--mono); letter-spacing:.02em; font-variant-numeric:tabular-nums;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.rv-osd.show { animation:rv-osd .75s var(--rv-ease) both; }
@keyframes rv-osd { 0% { opacity:0; transform:translate(-50%,-4px); } 14% { opacity:1; transform:translate(-50%,0); } 78% { opacity:1; } 100% { opacity:0; } }

.rv-spin { position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px; pointer-events:none; }
.rv-spin i { display:block; width:100%; height:100%; border-radius:50%;
  border:3px solid rgba(255,255,255,.16); border-top-color:#fff; animation:rv-rot .8s linear infinite; }
@keyframes rv-rot { to { transform:rotate(360deg); } }
.rv-err { position:absolute; inset:auto 1rem; top:50%; transform:translateY(-50%); text-align:center; color:var(--rv-dim); font-size:.95rem; }

/* ---------- guides ---------- */
.rv-guides { position:absolute; display:grid; place-items:center; overflow:hidden; pointer-events:none; }
.rv-guides[hidden] { display:none; }
.rv-g-frame { position:relative; }
.rv-g-frame.lines { outline:1px solid rgba(255,255,255,.78); }
.rv-g-frame.mask { box-shadow:0 0 0 100vmax rgba(0,0,0,.94); }
.rv-g-safe { position:absolute; display:none; border:1px dashed rgba(255,255,255,.5); }
.rv-g-safe.a { inset:5%; }   /* action safe 90% */
.rv-g-safe.t { inset:10%; }  /* title safe 80% */
.rv-g-frame.safe .rv-g-safe { display:block; }

/* ---------- control bar ---------- */
.rv-bar { position:relative; flex:none; background:var(--rv-bar); border-top:1px solid var(--rv-line);
  padding:2px 10px 6px; transition:opacity .3s var(--rv-ease); }
.rv-ctrls { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.5rem; min-height:44px; }
.rv-l, .rv-r { display:flex; align-items:center; gap:2px; min-width:0; }
.rv-r { justify-content:flex-end; }
.rv-m { display:flex; align-items:baseline; gap:.2rem; font-family:var(--mono); font-variant-numeric:tabular-nums; }

.rv-b { flex:none; width:36px; height:36px; display:grid; place-items:center; padding:0;
  background:none; border:none; border-radius:9px; color:var(--rv-dim); cursor:pointer;
  transition:background .15s, color .15s, transform .12s; }
.rv-b:hover { background:rgba(255,255,255,.08); color:#fff; }
.rv-b:active { transform:scale(.92); }
.rv-b:focus-visible, .rv-tc:focus-visible, .rv-opt:focus-visible, .rv-sw:focus-visible { outline:2px solid var(--rv-acc); outline-offset:1px; }
.rv-b[aria-pressed="true"], .rv-b.active { color:var(--rv-acc); background:rgba(var(--rv-acc-rgb),.14); }
.rv-b[data-a="play"] { color:#fff; }
.rv-txt { width:auto; min-width:40px; padding:0 .55rem; font:600 .78rem/1 var(--mono); letter-spacing:.02em; }
.rv-i { display:block; }

.rv-tc { background:none; border:1px solid transparent; border-radius:8px; padding:.3rem .55rem; cursor:pointer;
  color:#fff; font:500 1rem/1 var(--mono); font-variant-numeric:tabular-nums; letter-spacing:.02em;
  transition:border-color .15s, background .15s; }
.rv-tc:hover { border-color:var(--rv-line-hi); background:rgba(255,255,255,.04); }
.rv-dur { color:var(--rv-faint); font-size:.8rem; }
.rv-dur:not(:empty)::before { content:"/ "; }

/* volume */
.rv-vol { display:flex; align-items:center; }
/* `.rv input.` outranks the site-wide input / input[type=range] rules (form-field padding, border, width:100%) */
.rv input.rv-volr { -webkit-appearance:none; appearance:none; width:74px; height:4px; margin:0 .4rem 0 .1rem; padding:0;
  border:none; border-radius:2px; box-shadow:none; cursor:pointer; transition:none;
  background:linear-gradient(to right, #fff var(--p,100%), rgba(255,255,255,.2) var(--p,100%)); }
.rv input.rv-volr:focus { box-shadow:none; outline:none; }
.rv input.rv-volr:focus-visible { outline:2px solid var(--rv-acc); outline-offset:4px; }
.rv-volr::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:#fff; border:none; box-shadow:0 1px 4px rgba(0,0,0,.5); }
.rv-volr::-moz-range-thumb { width:12px; height:12px; border-radius:50%; background:#fff; border:none; }

/* in/out chip */
.rv-io { display:inline-flex; align-items:center; gap:.15rem; margin-right:.35rem; padding:.18rem .18rem .18rem .55rem;
  border-radius:7px; background:rgba(var(--rv-acc-rgb),.14); color:#d7e8ff;
  font:500 .74rem/1 var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.rv-io[hidden] { display:none; }
.rv-io-x { width:20px; height:20px; display:grid; place-items:center; padding:0; border:none; border-radius:5px; background:none; color:inherit; cursor:pointer; opacity:.7; }
.rv-io-x:hover { opacity:1; background:rgba(255,255,255,.1); }
.rv-io-x .rv-i { width:13px; height:13px; }

/* ---------- timeline ---------- */
.rv-scrub { position:relative; height:22px; cursor:pointer; touch-action:none; }
.rv-track { position:absolute; left:0; right:0; top:50%; height:4px; margin-top:-2px; border-radius:2px;
  background:rgba(255,255,255,.13); transition:transform .15s var(--rv-ease); }
.rv-scrub:hover .rv-track, .rv-scrub.drag .rv-track { transform:scaleY(1.6); }
.rv-buf { position:absolute; top:0; bottom:0; left:0; width:0; border-radius:2px; background:rgba(255,255,255,.2); }
.rv-played { position:absolute; inset:0; border-radius:2px; background:var(--rv-acc); transform-origin:left center; transform:scaleX(0); }
.rv-range { position:absolute; top:-3px; bottom:-3px; background:rgba(var(--rv-acc-rgb),.3);
  border-left:2px solid #fff; border-right:2px solid #fff; border-radius:2px; }
.rv-range[hidden] { display:none; }
.rv-hover { position:absolute; left:0; top:-3px; bottom:-3px; width:1px; margin-left:-.5px; background:rgba(255,255,255,.75); pointer-events:none; }
.rv-hover[hidden] { display:none; }
.rv-head { position:absolute; left:-1.5px; top:3px; width:3px; height:16px; border-radius:2px; background:#fff; pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.5); }

.rv-peek { position:absolute; left:0; bottom:calc(100% + 10px); z-index:4; pointer-events:none;
  border-radius:8px; overflow:hidden; background:#000; border:1px solid var(--rv-line-hi);
  box-shadow:0 20px 44px -14px rgba(0,0,0,.8); }
.rv-peek[hidden] { display:none; }
.rv-peek-img { display:block; width:192px; height:108px; }
.rv-peek-tc { position:absolute; left:0; right:0; bottom:0; padding:.22rem .4rem; text-align:center;
  background:linear-gradient(transparent, rgba(0,0,0,.82)); color:#fff;
  font:500 .72rem/1.2 var(--mono); font-variant-numeric:tabular-nums; }

/* ---------- menus ---------- */
.rv-popwrap { position:relative; }
.rv-popwrap.open > .rv-popbtn { color:#fff; background:rgba(255,255,255,.1); }
.rv-pop { position:absolute; right:0; bottom:calc(100% + 10px); z-index:6; min-width:196px; max-height:min(70vh, 460px); overflow-y:auto;
  padding:.35rem; border-radius:12px; background:var(--rv-pop); border:1px solid var(--rv-line-hi);
  box-shadow:0 24px 56px -18px rgba(0,0,0,.85); animation:rv-pop .16s var(--rv-ease); }
.rv-pop[hidden] { display:none; }
@keyframes rv-pop { from { opacity:0; transform:translateY(6px) scale(.98); } }
.rv-pop-h { padding:.45rem .6rem .35rem; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--rv-faint); }
.rv-pop-sep { height:1px; margin:.35rem .3rem; background:var(--rv-line); }
.rv-opt { display:flex; align-items:center; gap:.45rem; width:100%; padding:.46rem .6rem; border:none; border-radius:8px;
  background:none; color:var(--rv-dim); text-align:left; font:500 .86rem/1.2 var(--body); cursor:pointer; white-space:nowrap; }
.rv-opt:hover { background:rgba(255,255,255,.07); color:#fff; }
.rv-opt.on { color:#fff; }
.rv-opt small { margin-left:auto; padding-left:.8rem; color:var(--rv-faint); font-size:.72rem; }
.rv-tick { width:16px; flex:none; display:grid; place-items:center; color:var(--rv-acc); }
.rv-tick .rv-i { width:15px; height:15px; }
.rv-sw { display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; padding:.46rem .6rem;
  border:none; border-radius:8px; background:none; color:var(--rv-dim); font:500 .84rem/1.2 var(--body); cursor:pointer; text-align:left; }
.rv-sw:hover { background:rgba(255,255,255,.07); color:#fff; }
.rv-sw span { white-space:nowrap; }
.rv-sw i { position:relative; flex:none; width:30px; height:18px; border-radius:9px; background:rgba(255,255,255,.18); transition:background .18s; }
.rv-sw i::after { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .2s var(--rv-ease); }
.rv-sw.on { color:#fff; }
.rv-sw.on i { background:var(--rv-acc); }
.rv-sw.on i::after { transform:translateX(12px); }

/* resolution picker (quality.js) restyled to sit in this bar */
.rv .qctl { margin:0 2px; }
.rv .qbtn.plyr__control { height:28px; padding:0 .45rem 0 .6rem; border-radius:7px; background:rgba(255,255,255,.06);
  border:1px solid var(--rv-line-hi); color:var(--rv-text); backdrop-filter:none; -webkit-backdrop-filter:none; font-size:.72rem; cursor:pointer; }
.rv .qbtn.plyr__control:hover, .rv .qbtn.plyr__control[aria-expanded="true"] { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.26); }

/* ---------- fullscreen: bar floats over the picture and fades when idle ---------- */
.rv.fs { background:#000; border:none !important; border-radius:0 !important; }
.rv.fs .rv-bar { position:absolute; left:0; right:0; bottom:0; border-top:none; padding:24px 18px 10px;
  background:linear-gradient(to bottom, transparent, rgba(0,0,0,.55) 40%, rgba(0,0,0,.82)); }
.rv.fs.idle .rv-bar { opacity:0; }
.rv.fs.idle, .rv.fs.idle .rv-video { cursor:none; }
.rv.qopen .rv-bar { opacity:1 !important; }

/* ============================================================
   Single-file share page for a video (share.js renderReviewPage)
   ============================================================ */
/* Fixed to the viewport: the site frames every page with body padding and a
   wallpaper, which a review screen must not have. */
.rvp { position:fixed; inset:0; z-index:5; display:flex; flex-direction:column; background:var(--rv-bg); color:var(--rv-text); }
body.rvp-open { overflow:hidden; } /* the framed page underneath would otherwise still scroll */
.rvp-top { flex:none; display:flex; align-items:center; gap:.9rem; min-width:0; padding:.7rem 1.1rem; border-bottom:1px solid var(--rv-line); background:#101115; }
.rvp-top .homelink { flex:none; display:flex; align-items:center; }
.rvp-top .homelink img { height:26px; }
.rvp-div { flex:none; width:1px; height:26px; background:var(--rv-line-hi); }
.rvp-id { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.12rem; }
.rvp-name { margin:0; font:600 .98rem/1.25 var(--display); color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rvp-meta { display:flex; flex-wrap:wrap; gap:.15rem .55rem; font:.72rem/1.3 var(--mono); color:var(--rv-faint); font-variant-numeric:tabular-nums; }
.rvp-meta span + span::before { content:"·"; margin-right:.55rem; color:#454952; }
.rvp-dl { flex:none; display:inline-flex; align-items:center; gap:.45rem; height:36px; padding:0 .95rem; border-radius:9px;
  background:var(--rv-acc); color:#fff; text-decoration:none; font:600 .85rem/1 var(--body);
  box-shadow:0 8px 20px -10px rgba(var(--rv-acc-rgb),.9); transition:filter .15s, transform .12s; }
.rvp-dl:hover { filter:brightness(1.1); }
.rvp-dl:active { transform:scale(.97); }
.rvp-dl .sz { font:500 .72rem/1 var(--mono); opacity:.8; }
.rvp-main { flex:1 1 auto; min-height:0; padding:14px 18px 18px; }
.rvp-stage { height:100%; border-radius:12px; overflow:hidden; border:1px solid var(--rv-line); background:#000;
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9); display:grid; place-items:center; }
.rvp-stage { position:relative; }
.rvp-stage > .rv { border-radius:inherit; }
/* pinned like the video: as grid children their intrinsic size would win the row */
.rvp-stage > img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.rvp-stage > .pv { position:absolute; inset:0; }
.rvp-stage .prep, .rvp-stage .noprev { color:var(--rv-dim); }
.rvp-keys { flex:none; padding:0 18px 12px; margin-top:-6px; font:.7rem/1.5 var(--mono); color:var(--rv-faint); text-align:center; }
.rvp-keys kbd { font:inherit; color:var(--rv-dim); padding:.05rem .32rem; border-radius:4px; border:1px solid var(--rv-line-hi); background:rgba(255,255,255,.03); }

/* inside a folder share's lightbox */
.lb-stage.has-rv { padding:0 3.6rem 1.1rem; place-items:stretch; }
.lb-stage.has-rv > .rv { border-radius:12px; border:1px solid var(--rv-line); }

/* ============================================================
   PDF reader (js/pdfview.js) — same dark surround as the player; white
   pages float on it and one glass pill carries page + zoom.
   ============================================================ */
.pv { position:relative; width:100%; height:100%; min-height:0; overflow:hidden; background:var(--rv-bg); color:var(--rv-text); font-family:var(--body); }
.pv-scroll { position:absolute; inset:0; overflow:auto; outline:none; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent; }
.pv-scroll::-webkit-scrollbar { width:10px; height:10px; }
.pv-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,.16); border-radius:10px; border:3px solid transparent; background-clip:padding-box; }
.pv-scroll::-webkit-scrollbar-thumb:hover { background-color:rgba(255,255,255,.28); }
.pv-scroll::-webkit-scrollbar-corner { background:transparent; }
/* max-content + min-width:100% = centred while it fits, scrolls sideways once zoomed past it */
.pv-pages { position:relative; display:flex; flex-direction:column; align-items:center; gap:14px;
  width:max-content; min-width:100%; padding:18px 18px 84px; box-sizing:border-box;
  --scale-round-x:1px; --scale-round-y:1px; }
.pv-page { position:relative; flex:none; background:#fff; border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 18px 50px -18px rgba(0,0,0,.95); }
.pv-page:not(.ready) { background:#1a1b20; box-shadow:0 0 0 1px var(--rv-line); }
.pv-page:not(.ready)::after { content:attr(data-n); position:absolute; inset:0; display:grid; place-items:center; font:500 .8rem/1 var(--mono); color:var(--rv-faint); }
.pv-page.broken { background:#1a1b20; }
.pv-page > canvas { position:absolute; inset:0; width:100%; height:100%; display:block; border-radius:inherit; }

.pv-load { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:1rem; color:var(--rv-dim); text-align:center; }
.pv-load .note { font-size:.85rem; }
.pv-load .spinner { border-color:rgba(255,255,255,.08); border-top-color:var(--rv-acc); }

.pv-bar { position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:2; display:flex; align-items:center; gap:2px;
  padding:4px; border-radius:13px; background:rgba(20,21,25,.78); border:1px solid var(--rv-line-hi);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 14px 40px -12px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-user-select:none; user-select:none; }
.pv-bar[hidden] { display:none; }
.pv-b { flex:none; height:34px; min-width:34px; display:grid; place-items:center; padding:0; background:none; border:none;
  border-radius:9px; color:var(--rv-dim); cursor:pointer; transition:background .15s, color .15s, transform .12s; }
.pv-b:hover:not(:disabled) { background:rgba(255,255,255,.08); color:#fff; }
.pv-b:active:not(:disabled) { transform:scale(.92); }
.pv-b:disabled { opacity:.35; cursor:default; }
.pv-b:focus-visible, .pv-in:focus-visible { outline:2px solid var(--rv-acc); outline-offset:1px; }
.pv-zoom { min-width:58px; padding:0 .45rem; font:600 .76rem/1 var(--mono); font-variant-numeric:tabular-nums; color:var(--rv-text); }
.pv-zoom.active { color:var(--rv-acc); }
.pv-pg { display:flex; align-items:center; gap:.35rem; padding:0 .3rem; white-space:nowrap; font:500 .8rem/1 var(--mono); color:var(--rv-faint); font-variant-numeric:tabular-nums; cursor:text; }
.pv .pv-in { width:3ch; min-width:3ch; height:26px; padding:0 .3rem; margin:0; box-sizing:content-box; text-align:center;
  font:600 .8rem/1 var(--mono); color:#fff; background:rgba(255,255,255,.06); border:1px solid var(--rv-line-hi); border-radius:7px; box-shadow:none; }
.pv .pv-in:focus { border-color:var(--rv-acc); background:rgba(var(--rv-acc-rgb),.12); outline:none; }
.pv-sep { flex:none; width:1px; height:20px; margin:0 4px; background:var(--rv-line-hi); }
.pv .noprev { color:var(--rv-dim); }

/* pdf.js text layer (subset of web/pdf_viewer.css): invisible glyphs over the
   canvas so text selects and Ctrl+F finds it */
.pv .textLayer { position:absolute; inset:0; overflow:clip; opacity:1; line-height:1; text-align:initial;
  -webkit-text-size-adjust:none; text-size-adjust:none; forced-color-adjust:none; transform-origin:0 0; z-index:0; caret-color:CanvasText;
  --min-font-size:1; --text-scale-factor:calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv:calc(1 / var(--min-font-size)); }
.pv .textLayer span, .pv .textLayer br { color:transparent; position:absolute; white-space:pre; cursor:text; transform-origin:0% 0%; }
.pv .textLayer > :not(.markedContent), .pv .textLayer .markedContent span:not(.markedContent) { z-index:1;
  --font-height:0; font-size:calc(var(--text-scale-factor) * var(--font-height));
  --scale-x:1; --rotate:0deg; transform:rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.pv .textLayer .markedContent { display:contents; }
.pv .textLayer span[role="img"] { -webkit-user-select:none; user-select:none; cursor:default; }
.pv .textLayer ::selection { background:rgba(var(--rv-acc-rgb),.32); color:transparent; }
.pv .textLayer br::selection { background:transparent; }
.pv .textLayer span.pv-hit { position:static; background:rgba(255,196,0,.45); border-radius:2px; box-shadow:0 0 0 2px rgba(255,196,0,.45); }
.pv .textLayer .endOfContent { display:block; position:absolute; inset:100% 0 0; z-index:0; cursor:default; -webkit-user-select:none; user-select:none; }
.pv .textLayer.selecting .endOfContent { top:0; }

.lb-stage.has-pv { padding:0 3.6rem 1.1rem; place-items:stretch; grid-template-rows:minmax(0,1fr); }
.lb-stage.has-pv > .pv { border-radius:12px; border:1px solid var(--rv-line); }

/* ---------- small screens ---------- */
/* No keyboard, or no room: the shortcut strip goes and the picture gets the space. */
@media (hover:none), (max-height:560px) {
  .rvp-keys { display:none; }
}
@media (max-height:560px) {
  .rvp-top { padding-top:.4rem; padding-bottom:.4rem; }
  .rvp-main { padding:8px 12px 10px; }
}
@media (hover:none) {
  .rv input.rv-volr { display:none; }
}
@media (max-width:640px) {
  .rv-ctrls { grid-template-columns:auto 1fr; grid-template-areas:"m m" "l r"; row-gap:0; }
  .rv-m { grid-area:m; justify-self:center; padding-top:2px; }
  .rv-l { grid-area:l; }
  .rv-r { grid-area:r; }
  .rv-b { width:34px; height:34px; }
  .rv-tc { font-size:.95rem; }
  .rv input.rv-volr { display:none; }
  .rv-io { display:none; }
  .rvp-top { padding:.55rem .75rem; gap:.6rem; }
  .rvp-div, .rvp-meta span.opt { display:none; }
  .rvp-dl { padding:0 .7rem; }
  .rvp-dl .lbl, .rvp-dl .sz { display:none; }
  .rvp-main { padding:0; }
  .rvp-stage { border-radius:0; border:none; }
  .rvp-keys { display:none; }
  .lb-stage.has-rv { padding:0; }
  .lb-stage.has-rv > .rv { border-radius:0; border:none; }
  .lb-stage.has-pv { padding:0; }
  .lb-stage.has-pv > .pv { border-radius:0; border:none; }
  .pv-pages { padding:10px 10px 76px; gap:10px; }
  .pv-bar { bottom:12px; }
  .pv-b { height:32px; min-width:32px; }
  .pv-zoom { min-width:50px; }
}
@media (max-width:400px) {
  .pv-bar [data-a="mode"], .pv-bar .pv-sep:last-of-type { display:none; }
}
@media (max-width:400px) {
  .rv-b[data-a="still"], .rv-b[data-step] { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .rv *, .rv *::before, .rv *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}