.vd-toggle-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--demo-stroke);border-radius:10px;background:#fff;margin-bottom:14px}.vd-toggle-icon{width:18px;height:22px;border-radius:2px;background:var(--demo-surface-3);flex-shrink:0;position:relative}.vd-toggle-icon::after{content:"";position:absolute;top:0;right:0;width:6px;height:6px;background:linear-gradient(135deg,#fff 50%,var(--demo-stroke) 50%)}.vd-toggle-skel{height:10px;border-radius:999px;background:var(--demo-surface-2);flex:1}.vd-toggle-track{width:44px;height:26px;border-radius:13px;background:#c4c4c4;position:relative;flex-shrink:0;overflow:hidden}.vd-toggle-thumb{width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);position:absolute;top:2px;left:2px}.demo-select{position:relative;border:1px solid var(--demo-stroke);border-radius:8px;background:#fff;min-height:38px;display:flex;align-items:center;padding:0 10px;overflow:visible;transform:translateZ(0)}.demo-select-arrow{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--demo-muted);margin-left:auto;flex-shrink:0}.demo-select-options{position:absolute;top:100%;left:0;right:0;margin-top:4px;border:1px solid var(--demo-stroke);border-radius:8px;background:#fff;box-shadow:var(--demo-shadow);z-index:10;overflow:hidden;opacity:0;transform:translateY(-4px);pointer-events:none}.demo-select-option{padding:8px 10px;border-bottom:1px solid var(--demo-stroke)}.demo-select-option:last-child{border-bottom:0}.demo-select-option--active{background:rgba(0,102,204,.08)}.demo-compare-btn{position:relative;border:1px solid var(--demo-stroke);border-radius:8px;background:var(--demo-surface-2);min-height:38px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;overflow:hidden;transform:translateZ(0);font-size:12px;font-weight:600;color:var(--demo-ink);letter-spacing:.2px}.demo-compare-btn::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,0);pointer-events:none}.demo-version-controls{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:stretch;position:relative;z-index:2}.vdiff-demo .demo-stage{display:flex;flex-direction:column}.demo-doc-wrapper{margin-top:14px;position:relative;z-index:1;flex:1}.demo-doc-body{border:1px solid var(--demo-stroke);border-radius:var(--demo-radius);background:#fff;padding:16px;overflow:hidden}.demo-doc-wrapper .demo-doc-body{position:absolute;inset:0}.demo-doc-line{display:flex;align-items:center;gap:6px;margin-bottom:10px}.demo-doc-line:last-child{margin-bottom:0}.demo-diff-ins{height:10px;border-radius:4px;background:#d1f0d1;border:1px solid #b0ddb0}.demo-diff-del{height:10px;border-radius:4px;background:#f0d1d1;border:1px solid #ddb0b0}.demo-diff-unchanged{height:10px;border-radius:999px;background:var(--demo-surface-2)}.vd-select-1::after,.vd-select-2::after{content:"";position:absolute;inset:0;border-radius:8px;box-shadow:0 0 0 2px rgba(0,102,204,.35);opacity:0;pointer-events:none}.vd-controls{opacity:0;transform:translateY(8px);transition:none}.vd-doc-wrapper{opacity:0;transform:translateY(8px);transition:none}.vd-doc-original{opacity:1}.vd-doc-diff{opacity:0;transform:translateY(8px)}.vdiff-demo.step-1 .vd-toggle-thumb{animation:vd-toggle-slide .4s ease-in-out forwards}@keyframes vd-toggle-slide{0%{transform:translateX(0)}100%{transform:translateX(18px)}}.vdiff-demo.step-1 .vd-toggle-track{animation:vd-toggle-on .3s ease-out .15s forwards}@keyframes vd-toggle-on{0%{background:#c4c4c4}100%{background:#1a5276}}.vdiff-demo.step-1 .vd-controls{animation:vd-content-in .5s ease-out .4s forwards}.vdiff-demo.step-1 .vd-doc-wrapper{animation:vd-content-in .5s ease-out .6s forwards}@keyframes vd-content-in{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}.vdiff-demo.step-2 .vd-toggle-thumb,.vdiff-demo.step-3 .vd-toggle-thumb,.vdiff-demo.step-4 .vd-toggle-thumb,.vdiff-demo.step-5 .vd-toggle-thumb{transform:translateX(18px)}.vdiff-demo.step-2 .vd-toggle-track,.vdiff-demo.step-3 .vd-toggle-track,.vdiff-demo.step-4 .vd-toggle-track,.vdiff-demo.step-5 .vd-toggle-track{background:#1a5276}.vdiff-demo.step-2 .vd-controls,.vdiff-demo.step-2 .vd-doc-wrapper,.vdiff-demo.step-3 .vd-controls,.vdiff-demo.step-3 .vd-doc-wrapper,.vdiff-demo.step-4 .vd-controls,.vdiff-demo.step-4 .vd-doc-wrapper,.vdiff-demo.step-5 .vd-controls,.vdiff-demo.step-5 .vd-doc-wrapper{opacity:1;transform:none}.vdiff-demo.step-2 .vd-select-1{animation:vd-select-press .4s ease-in-out forwards}.vdiff-demo.step-2 .vd-options-1{animation:vd-opts-open-close 2.2s ease-in-out forwards}@keyframes vd-opts-open-close{0%{opacity:0;transform:translateY(-4px)}14%{opacity:1;transform:none}75%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}.vdiff-demo.step-2 .vd-option-hl-1{animation:vd-option-highlight .7s ease-in-out .8s forwards}@keyframes vd-option-highlight{0%{background:0 0}30%{background:rgba(0,102,204,.08)}100%{background:rgba(0,102,204,.08)}}.vdiff-demo.step-2 .vd-select-1::after{animation:vd-ring-appear .4s ease-out 2.1s forwards}.vdiff-demo.step-3 .vd-select-1::after,.vdiff-demo.step-4 .vd-select-1::after,.vdiff-demo.step-5 .vd-select-1::after{opacity:1}.vdiff-demo.step-3 .vd-select-2{animation:vd-select-press .4s ease-in-out forwards}@keyframes vd-select-press{0%{transform:none}40%{transform:scale(.97)}70%{transform:scale(1.01)}100%{transform:none}}.vdiff-demo.step-3 .vd-options-2{animation:vd-opts-open-close 2.2s ease-in-out forwards}.vdiff-demo.step-3 .vd-option-hl-2{animation:vd-option-highlight .7s ease-in-out .8s forwards}.vdiff-demo.step-3 .vd-select-2::after{animation:vd-ring-appear .4s ease-out 2.1s forwards}.vdiff-demo.step-4 .vd-select-2::after,.vdiff-demo.step-5 .vd-select-2::after{opacity:1}@keyframes vd-ring-appear{0%{opacity:0}100%{opacity:1}}.vdiff-demo.step-4 .vd-compare-btn{animation:vd-compare-press .6s ease-in-out forwards}@keyframes vd-compare-press{0%{transform:none}35%{transform:scale(.94)}60%{transform:scale(1.02)}100%{transform:none}}.vdiff-demo.step-4 .vd-compare-btn::before{animation:vd-compare-flash .7s ease-in-out forwards}@keyframes vd-compare-flash{0%{opacity:0;background:rgba(255,255,255,.55)}35%{opacity:.55}65%{opacity:.32}100%{opacity:0}}.vdiff-demo.step-4 .vd-compare-ripple::after{animation:vd-compare-ripple .8s ease-out forwards}@keyframes vd-compare-ripple{0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}30%{opacity:1;transform:translate(-50%,-50%) scale(.75)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.85)}}.vdiff-demo.step-4 .vd-doc-original{animation:vd-doc-fade-out .5s ease-in-out .2s forwards}@keyframes vd-doc-fade-out{0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}.vdiff-demo.step-5 .vd-doc-original{opacity:0;transform:translateY(-4px)}.vdiff-demo.step-5 .vd-doc-diff{animation:vd-doc-diff-in .6s ease-out forwards}@keyframes vd-doc-diff-in{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.vd-compare-btn,.vd-compare-btn::before,.vd-compare-ripple::after,.vd-controls,.vd-doc-diff,.vd-doc-original,.vd-doc-wrapper,.vd-options-1,.vd-options-2,.vd-select-1,.vd-select-1::after,.vd-select-2,.vd-select-2::after,.vd-toggle-thumb,.vd-toggle-track{animation:none!important;transition:none!important}.vd-toggle-thumb{transform:translateX(18px)}.vd-toggle-track{background:#1a5276}.vd-controls,.vd-doc-wrapper{opacity:1;transform:none}.vd-doc-original{opacity:0}.vd-doc-diff{opacity:1;transform:none}.vd-select-1::after,.vd-select-2::after{opacity:1}.vd-options-1,.vd-options-2{opacity:0}}.vdiff-demo .vd-compare-btn,.vdiff-demo .vd-controls,.vdiff-demo .vd-doc-diff,.vdiff-demo .vd-doc-original,.vdiff-demo .vd-doc-wrapper,.vdiff-demo .vd-select-1,.vdiff-demo .vd-select-2,.vdiff-demo .vd-toggle-thumb{will-change:transform,opacity}