.pvs{--stage-bg:#f4f4ef;--stage-ink:#14161c;--stage-card:#ffffff;--stage-card-ink:#14161c;--stage-line:rgba(20,22,28,0.14);--stage-muted:rgba(20,22,28,0.55);display:flex;flex-direction:column;gap:10px;min-width:0}.pvs[data-bg=dark]{--stage-bg:#0b0d12;--stage-ink:#f1f2f5;--stage-card:#1d212b;--stage-card-ink:#f1f2f5;--stage-line:rgba(255,255,255,0.16);--stage-muted:rgba(255,255,255,0.55)}.pvs[data-bg=checker]{--stage-bg:#ffffff;--stage-ink:#14161c;--stage-card:#ffffff;--stage-card-ink:#14161c;--stage-line:rgba(20,22,28,0.2);--stage-muted:rgba(20,22,28,0.55)}.pvs__bar{justify-content:space-between;gap:10px}.pvs__bar,.pvs__tools{display:flex;flex-wrap:wrap;align-items:center}.pvs__tools{gap:8px;min-width:0}.pvs__canvas{position:relative;z-index:1;display:grid;place-items:center;min-height:min(var(--pvs-h,300px),232px);padding:20px;border-radius:var(--radius);border:1px solid var(--line-strong);background-color:var(--stage-bg);color:var(--stage-ink);touch-action:pan-y;transition:background-color var(--dur-3) var(--ease-out),color var(--dur-3)}.pvs[data-bg=checker] .pvs__canvas{background-image:conic-gradient(#d6d8dd 25%,#ffffff 0 50%,#d6d8dd 0 75%,#ffffff 0);background-size:20px 20px}.pvs__card{display:grid;place-items:center;background:var(--stage-card);color:var(--stage-card-ink);border-radius:16px;font-size:var(--text-sm);font-weight:600;text-align:center}.pvs-ca{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 14px;align-items:end}@media (max-width:520px){.pvs-ca{grid-template-columns:minmax(0,1fr)}}.pvs-handle{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.45);cursor:grab;touch-action:none;outline:none;z-index:3;transition:transform var(--dur-1) var(--ease-out)}.pvs-handle:after{content:"";position:absolute;inset:-12px;border-radius:50%}.pvs-handle:hover{transform:scale(1.15)}.pvs-handle:active{cursor:grabbing;transform:scale(1.25)}.pvs-handle:focus-visible{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent-fg)}@media (pointer:coarse){.pvs-handle{width:26px;height:26px;margin:-13px 0 0 -13px}.pvs-handle:after{inset:-24px}}