.vd-compare { touch-action: pan-y; background: #0c1427; }
#render .vd-compare .compare-labels { pointer-events: none; }
#render .vd-compare .compare-label { font-size: 11px; padding: 6px 10px; }
#render .vd-compare[data-mode="side"] .compare-image { width: 50%; background-size: contain; background-repeat: no-repeat; clip-path: none !important; }
#render .vd-compare[data-mode="side"] .compare-image.after { left: 50%; border-left: 1px solid #a999ff; }
#render .vd-compare[data-mode="side"] .compare-slider { display: none; }
.vd-compare-controls { padding: 14px 0; color: #b8c8e4; font-size: 12px; }
.vd-compare-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vd-compare-heading [data-scene] { color: #eeeaff; font-size: 14px; font-weight: 600; }
.vd-compare-controls button, #animation .vd-demo button { background: #202b49; border: 1px solid #53638a; color: #eeedff; border-radius: 9px; padding: 9px 12px; cursor: pointer; font: inherit; font-size: 12px; min-height: 40px; }
.vd-compare-controls button + button { margin-left: 6px; }
.vd-compare-controls button[aria-pressed="true"], #animation .vd-demo [data-play] { background: #514098; border-color: #ab9cf0; }
.vd-range-label { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.vd-range-label input { flex: 1; min-width: 60px; }
.vd-compare-controls input, #animation .vd-demo input { accent-color: #ad9aff; min-height: 32px; cursor: pointer; }
.vd-compare-controls input:disabled { opacity: .35; cursor: default; }
.vd-compare-controls :focus-visible, #animation .vd-demo :focus-visible, #animation .card[role="button"]:focus-visible, #render .gallery-item:focus-visible { outline: 3px solid #b9e8ff; outline-offset: 4px; }
#animation .vd-demo { background: linear-gradient(135deg,#101c33,#211a3e) !important; border: 1px solid #65588b !important; padding: clamp(14px,3vw,28px) !important; color: #c1cbe2; font-size: 12px; }
#animation .vd-demo header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#animation .vd-demo h4 { font-size: 18px; color: #f0edff; margin: 5px 0 12px; }
.vd-eyebrow { color: #ac9cec; letter-spacing: .13em; font-size: 10px; }
.vd-demo p { line-height: 1.7; margin: 10px 0; }
.vd-stage { margin: 16px 0; border: 1px solid #3e4569; border-radius: 16px; overflow: hidden; background: radial-gradient(ellipse at top,#273350,#10182b 75%); }
.vd-stage svg { display: block; width: 100%; max-height: 430px; }
.vd-stage text { fill: #bbcce3; font: 12px system-ui,sans-serif; }
.vd-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vd-controls label { flex: 1 1 160px; display: flex; align-items: center; gap: 8px; }
.vd-controls input { width: 100%; min-width: 70px; }
.vd-controls output { min-width: 85px; color: #c9b8ff; font-variant-numeric: tabular-nums; }
.vd-note { color: #91a1bd; font-size: 11px; }
@media (max-width: 600px) {
  #render .vd-compare { height: 250px; }
  #render .vd-compare .compare-labels { left: 8px; right: 8px; bottom: 10px; }
  #animation .vd-demo h4 { font-size: 15px; }
  .vd-controls label { flex-basis: 100%; order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .vd-demo *, .vd-compare *, .vd-compare-controls * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}