/* Scrollable light/dark comparison preview, shared by the theme pages.
   Each page skins it through the --pv-* custom properties on .pv or an ancestor. */
.pv-pair{display:grid;grid-template-columns:minmax(0,1fr) var(--pv-phone-w,300px);gap:var(--pv-gap,28px);align-items:start}
.pv-col{min-width:0}
.pv-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
.pv{--s:.5;--sb:0px;margin:0}
.pv__frame{position:relative;overflow:hidden;border-radius:var(--pv-radius,14px);background:var(--pv-frame,#1d1f27);border:1px solid var(--pv-frame-line,rgba(255,255,255,.12));box-shadow:var(--pv-shadow,0 30px 60px -28px rgba(10,20,40,.45))}
.pv__bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;background:var(--pv-frame,#1d1f27);border-bottom:1px solid var(--pv-frame-line,rgba(255,255,255,.12))}
.pv__bar i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--pv-dot,#3b3e49)}
.pv__bar span{flex:0 1 260px;margin-inline:auto;height:20px;border-radius:6px;background:var(--pv-url-bg,#121319);color:var(--pv-url-fg,#8c8983);font:600 11.5px/20px system-ui,-apple-system,"Segoe UI",sans-serif;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv__bar::after{content:"";flex:none;width:44px}
.pv__screen{position:relative;height:var(--pv-h,594px);overflow:hidden;background:var(--pv-screen-bg,#e9eef5)}
.pv__scroll{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
/* Designed rail: rounded thumb on a soft track, no arrow buttons. Chromium ignores these once scrollbar-color is set,
   so the standard properties are only used where ::-webkit-scrollbar is unsupported (Firefox). */
.pv__scroll::-webkit-scrollbar{width:14px}
.pv__scroll::-webkit-scrollbar-button{display:none;width:0;height:0}
.pv__scroll::-webkit-scrollbar-track{margin:6px 0;border:4px solid transparent;border-radius:14px;background:var(--pv-track,rgba(110,120,140,.14));background-clip:padding-box}
.pv__scroll::-webkit-scrollbar-thumb{min-height:56px;border:4px solid transparent;border-radius:14px;background:var(--pv-thumb,rgba(110,120,140,.6));background-clip:padding-box}
.pv__scroll::-webkit-scrollbar-thumb:hover,.pv__scroll::-webkit-scrollbar-thumb:active{background-color:var(--pv-thumb-hover,rgba(90,100,120,.85))}
.pv__scroll::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){.pv__scroll{scrollbar-width:thin;scrollbar-color:var(--pv-thumb,rgba(110,120,140,.6)) var(--pv-track,transparent)}}
.pv__scroll:focus-visible{outline:2px solid var(--pv-focus,#397eb9);outline-offset:-2px}
.pv__stack{position:relative}
.pv__stack img{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
.pv__dark{position:absolute;top:0;left:0;clip-path:inset(0 0 0 calc(var(--s) * 100%))}
.pv__handle{position:absolute;top:0;bottom:0;left:calc((100% - var(--sb)) * var(--s));z-index:2;width:34px;margin-left:-17px;cursor:ew-resize;touch-action:none;outline:none;-webkit-tap-highlight-color:transparent}
.pv__handle::before{content:"";position:absolute;top:0;bottom:0;left:16px;width:2px;background:var(--pv-line,#fff);box-shadow:0 0 0 1px rgba(0,0,0,.16)}
.pv__knob{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:var(--pv-knob-bg,#fff);color:var(--pv-knob-fg,#1c2230);box-shadow:0 8px 20px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.08);transition:transform .15s}
.pv__knob svg{width:22px;height:22px}
.pv__handle:hover .pv__knob,.pv__handle.is-drag .pv__knob{transform:scale(1.08)}
.pv__handle:focus-visible .pv__knob{outline:2px solid var(--pv-focus,#397eb9);outline-offset:3px}
.pv__tag{position:absolute;bottom:12px;z-index:1;padding:6px 11px;border-radius:999px;background:var(--pv-tag-bg,rgba(12,14,20,.74));color:var(--pv-tag-fg,#fff);font:700 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif;pointer-events:none;transition:opacity .2s}
.pv__tag--light{left:12px}
.pv__tag--dark{right:calc(12px + var(--sb))}
.pv--phone .pv__frame{padding:9px;border-radius:36px;background:var(--pv-phone,#0d0f14);border-color:var(--pv-phone-line,rgba(255,255,255,.14))}
.pv--phone .pv__screen{height:auto;aspect-ratio:390/844;border-radius:27px}
.pv--phone .pv__scroll::-webkit-scrollbar{width:10px}
.pv--phone .pv__scroll::-webkit-scrollbar-track{margin:18px 0;border-width:3px}
.pv--phone .pv__scroll::-webkit-scrollbar-thumb{min-height:44px;border-width:3px}
.pv--phone .pv__knob{width:36px;height:36px;margin:-18px 0 0 -18px}
.pv--phone .pv__knob svg{width:19px;height:19px}
.pv--phone .pv__tag{bottom:10px;padding:5px 9px;font-size:11px}
.pv--phone .pv__tag--light{left:10px}
.pv--phone .pv__tag--dark{right:calc(10px + var(--sb))}
@media (max-width:900px){
  .pv-pair{grid-template-columns:minmax(0,1fr)}
  .pv{--pv-h:440px}
  .pv-col--phone{width:min(280px,100%);margin-inline:auto}
}