.vbotp{--otp-accent: rgb(var(--p-600, 79 70 229));--otp-line: #d4d4d8;--otp-surface: #ffffff;--otp-ink: #18181b;--otp-muted: #71717a;--otp-good: #059669;--otp-bad: #dc2626;--otp-w: 46px;--otp-h: 56px;--otp-fs: 24px;--otp-gap: 8px;--otp-r: 10px;display:inline-flex;flex-direction:column;gap:10px;max-width:100%}.vbotp[data-size=sm]{--otp-w: 38px;--otp-h: 46px;--otp-fs: 19px;--otp-gap: 6px;--otp-r: 9px}.dark .vbotp[data-tone=auto]{--otp-accent: rgb(var(--p-500, 99 102 241));--otp-line: #3f3f46;--otp-surface: #18181b;--otp-ink: #f4f4f5;--otp-muted: #a1a1aa;--otp-good: #34d399;--otp-bad: #f87171}.vbotp[data-tone=dark]{--otp-accent: hsl(var(--mkt-primary, 22 80% 54%));--otp-line: rgba(255, 255, 255, .16);--otp-surface: rgba(255, 255, 255, .04);--otp-ink: #fafafa;--otp-muted: rgba(255, 255, 255, .6);--otp-good: #34d399;--otp-bad: #f87171}.vbotp-row{position:relative;display:flex;align-items:center;gap:var(--otp-gap);width:-moz-max-content;width:max-content;max-width:100%;cursor:text}.vbotp-native{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;font-size:16px;color:transparent;background:transparent;caret-color:transparent}.vbotp-native:disabled{cursor:default}.vbotp-tile{position:relative;flex:0 1 var(--otp-w);width:var(--otp-w);min-width:28px;height:var(--otp-h);display:grid;place-items:center;border:1px solid var(--otp-line);border-radius:var(--otp-r);background:var(--otp-surface);color:var(--otp-ink);font:500 var(--otp-fs)/1 "JetBrains Mono","Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;transition:border-color .15s ease-out,box-shadow .15s ease-out,background-color .2s ease-out,color .2s ease-out}.vbotp-sep{flex:none;width:10px;height:2px;border-radius:2px;background:var(--otp-line);margin:0 2px}.vbotp[data-size=sm] .vbotp-sep{width:6px;margin:0}.vbotp-row:focus-within .vbotp-tile[data-active]{border-color:var(--otp-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--otp-accent) 18%,transparent)}.vbotp-row:focus-within .vbotp-tile[data-active]:after{content:"";width:2px;height:44%;border-radius:2px;background:var(--otp-accent);animation:vbotp-blink 1.05s steps(1) infinite}.vbotp-digit{animation:vbotp-rise .18s ease-out both}.vbotp-bar{position:relative;height:2px;border-radius:2px;background:var(--otp-line);overflow:hidden}.vbotp-bar>span{position:absolute;top:0;bottom:0;left:0;background:var(--otp-accent);transition:width .2s ease-out}.vbotp-status{display:flex;align-items:center;gap:7px;margin:0;min-height:18px;font-size:13px;line-height:1.35;color:var(--otp-muted)}.vbotp-status svg{width:15px;height:15px;flex:none}.vbotp[data-status=loading] .vbotp-tile{opacity:.55}.vbotp[data-status=loading] .vbotp-bar>span{width:35%!important;animation:vbotp-sweep 1s ease-in-out infinite}.vbotp[data-status=loading] .vbotp-status svg{animation:vbotp-spin .8s linear infinite}.vbotp[data-status=error] .vbotp-row{animation:vbotp-shake .38s cubic-bezier(.36,.07,.19,.97)}.vbotp[data-status=error] .vbotp-tile[data-filled]{border-color:var(--otp-bad);color:var(--otp-bad)}.vbotp[data-status=error] .vbotp-bar>span{background:var(--otp-bad)}.vbotp[data-status=error] .vbotp-status{color:var(--otp-bad)}.vbotp[data-status=success] .vbotp-tile{border-color:color-mix(in srgb,var(--otp-good) 55%,var(--otp-line));background:color-mix(in srgb,var(--otp-good) 8%,var(--otp-surface));color:var(--otp-good)}.vbotp[data-status=success] .vbotp-bar>span{background:var(--otp-good)}.vbotp[data-status=success] .vbotp-status{color:var(--otp-good)}@keyframes vbotp-blink{50%{opacity:0}}@keyframes vbotp-rise{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes vbotp-sweep{0%{transform:translate(-100%)}to{transform:translate(300%)}}@keyframes vbotp-spin{to{transform:rotate(360deg)}}@keyframes vbotp-shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(3px)}30%,50%,70%{transform:translate(-5px)}40%,60%{transform:translate(5px)}}@media (prefers-reduced-motion: reduce){.vbotp *,.vbotp-row{animation:none!important;transition:none!important}}
