.vd-demo{--cl-ink: #0B2545;--cl-ink-2: #1a3560;--cl-muted: #667892;--cl-hair: #e6eaf0;--cl-hair-2: #eef1f5;--cl-accent: #0E9F8E;--cl-accent-ink: #065a51;--cl-accent-wash:#e7f6f3;--cl-primary: #2d6cdf;--cl-primary-2: #1c53bd;--cl-ok: #0f9d58;--cl-ok-wash: #e8f5ee;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;border-radius:14px;border:1px solid #d1d5db;box-shadow:0 4px 24px -8px #0000001f,0 1px 4px #0000000f;overflow:hidden;background:#fff}.vd-demo *{box-sizing:border-box}.vd-chrome{position:relative;display:flex;align-items:center;gap:8px;padding:0 14px;height:38px;border-bottom:1px solid var(--cl-hair);background:#fffffff2}.vd-dots{display:flex;gap:6px}.vd-dots i{width:10px;height:10px;border-radius:50%;display:block}.vd-dots i:nth-child(1){background:#ff6259}.vd-dots i:nth-child(2){background:#ffbc2e}.vd-dots i:nth-child(3){background:#27c840}.vd-url{margin-left:10px;flex:1;font-family:JetBrains Mono,monospace;font-size:11.5px;color:var(--cl-muted);display:flex;align-items:center;gap:6px;background:#f2f4f8;border:1px solid var(--cl-hair);padding:4px 10px;border-radius:6px;max-width:240px}.vd-lock{width:9px;height:9px}.vd-pause-btn{margin-left:auto;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--cl-hair);border-radius:6px;background:transparent;color:var(--cl-muted);cursor:pointer;flex-shrink:0;transition:background .15s ease,color .15s ease}.vd-pause-btn:hover{background:#f2f4f8;color:var(--cl-ink)}.vd-pause-btn:focus-visible{outline:2px solid var(--cl-primary);outline-offset:2px}.vd-stage-wrap{overflow:hidden}.vd-stage{position:relative;aspect-ratio:4 / 3;width:100%;background:linear-gradient(180deg,#fff,#fbfcfe);overflow:hidden}.vd-stage:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,#dde3ec 1px,transparent 1.4px);background-size:22px 22px;mask-image:radial-gradient(ellipse at 50% 40%,#000 40%,transparent 80%);opacity:.55;pointer-events:none}.vd-form{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;padding:24px 28px;transition:opacity .35s ease,transform .35s ease}.vd-field{position:relative;background:#fff;border:1px solid var(--cl-hair);border-radius:10px;padding:10px 14px 8px;min-height:52px;transition:border-color .2s ease,box-shadow .2s ease}.vd-field.vd-focused{border-color:var(--cl-primary);box-shadow:0 0 0 3px #2d6cdf1f}.vd-field-label{display:block;font-size:10.5px;color:var(--cl-muted);margin-bottom:3px;font-weight:500}.vd-field-value{font-size:13.5px;font-weight:600;color:var(--cl-ink);display:inline}.vd-monospace{font-family:JetBrains Mono,monospace}.vd-cursor{display:inline-block;width:1.5px;height:14px;background:var(--cl-primary);margin-left:1px;vertical-align:text-bottom;opacity:0}.vd-field.vd-focused .vd-cursor{opacity:1}@keyframes vd-blink{50%{opacity:0}}.vd-divider{display:flex;align-items:center;gap:8px}.vd-divider-line{flex:1;border-top:1px dashed var(--cl-hair)}.vd-divider-or{font-size:11px;color:var(--cl-muted);font-weight:500}.vd-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px;border-radius:10px;border:1.5px solid var(--cl-primary);background:#fff;color:var(--cl-primary);font-weight:600;font-size:13px;font-family:inherit;cursor:default;transition:transform .15s ease,box-shadow .15s ease}@keyframes vd-btn-pulse{0%{transform:scale(1);box-shadow:0 0 #2d6cdf66}50%{transform:scale(.98);box-shadow:0 0 0 6px #2d6cdf00}to{transform:scale(1);box-shadow:none}}@keyframes vd-spin{to{transform:rotate(360deg)}}.vd-spinner{animation:vd-spin .8s linear infinite}.vd-results-pill{position:absolute;top:52%;left:50%;transform:translate(-50%,-50%);background:#f0f7ff;border:1px solid #bfdbfe;border-radius:999px;padding:4px 14px;font-size:12px;font-weight:600;color:var(--cl-primary-2);white-space:nowrap;opacity:0;transition:opacity .3s ease;z-index:5}.vd-results-pill.vd-visible{opacity:1}.vd-result{position:absolute;left:24px;right:24px;bottom:20px;background:#fff;border:1px solid var(--cl-hair);border-radius:12px;overflow:hidden;box-shadow:0 8px 32px -12px #0b254538;opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s cubic-bezier(.22,.61,.36,1);z-index:10}.vd-result.vd-visible{opacity:1;transform:translateY(0)}@media(prefers-reduced-motion:no-preference){.vd-cursor{animation:vd-blink 1s steps(2,end) infinite}.vd-btn.vd-pulse{animation:vd-btn-pulse .5s ease}}@media(max-width:480px){.vd-form{padding:16px 18px;gap:8px}.vd-result{left:14px;right:14px;bottom:12px}.vd-url{display:none}}
