.sv { --sv-ui: #14191a; --sv-raise: #1d2425; --sv-ink: #eef2f0; --sv-muted: #9aa6a2; --sv-mint: #5cd2bd;
  margin: 0; padding: clamp(8px, 1.4vw, 18px); border-radius: clamp(14px, 1.8vw, 24px); background: var(--sv-ui);
  aspect-ratio: 4 / 3; box-sizing: border-box; display: grid; }   /* the whole card is 4:3, matching the visual beside it */
.sv *, .sv *::before, .sv *::after { box-sizing: border-box; }
.sv-stage { position: relative; min-height: 0; border-radius: clamp(8px, 1.1vw, 14px); overflow: hidden; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; background: #0d1112; }
.sv-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.sv-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.sv-after .sv-img { opacity: 0; transition: opacity .45s ease; }
.sv-after .sv-img.is-on { opacity: 1; }
.sv-tag { position: absolute; top: clamp(8px, 1.2vw, 14px); padding: 6px 11px; border-radius: 999px; background: rgba(13, 17, 18, .72); color: var(--sv-ink);
  font: 600 clamp(11px, 1vw, 13px)/1 system-ui, -apple-system, "Helvetica Neue", sans-serif; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; }
.sv-tag--left { left: clamp(8px, 1.2vw, 14px); }
.sv-tag--right { right: clamp(8px, 1.2vw, 14px); color: var(--sv-mint); }
.sv-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); pointer-events: none; }
.sv-knob { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: #14191a; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.sv-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.sv-stage:has(.sv-range:focus-visible) .sv-knob { outline: 3px solid var(--sv-mint); outline-offset: 3px; }
.sv-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(28px, 4vw, 48px) clamp(8px, 1.2vw, 14px) clamp(8px, 1.2vw, 14px);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: default;
  background: linear-gradient(transparent, rgba(8, 11, 12, .72)); }
.sv-looks { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(20, 25, 26, .82); border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sv-looks button { border: 0; background: transparent; color: var(--sv-muted); font: 600 clamp(12px, 1.05vw, 14px)/1 system-ui, -apple-system, "Helvetica Neue", sans-serif;
  padding: 9px 14px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.sv-looks button[aria-pressed="true"] { background: var(--sv-mint); color: #0c1a16; }
.sv-looks button:focus-visible { outline: 2px solid var(--sv-mint); outline-offset: 2px; }
.sv-hint { color: rgba(238, 242, 240, .8); font: 500 13px/1 system-ui, -apple-system, "Helvetica Neue", sans-serif; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
@media (max-width: 520px) { .sv-hint { display: none; } .sv-looks button { padding: 7px 9px; } }
@media (prefers-reduced-motion: reduce) { .sv-after .sv-img, .sv-looks button { transition: none; } }