*{box-sizing:border-box;margin:0;padding:0}body,body[data-variant="vault"]{--page-bg:#0a0b0e;--page-fg:#fff;--font-ui:'Space Grotesk',system-ui,sans-serif;--font-num:ui-monospace,'JetBrains Mono',Menlo,monospace;--muted:#8d95ab;--card-bg:#14161f;--card-border:1px solid #262b3d;--card-radius:20px;--card-shadow:none;--card-backdrop:none;--box-bg:#1d2130;--box-fg:#ffffff;--box-border:#313a52;--box-radius:12px;--box-w:54px;--box-h:66px;--box-gap:10px;--ring:#c8ff00;--ok:#c8ff00;--ok-fg:#0a0b0e;--bad:#ff4d6d;--focus:#c8ff00;--toolbar-border:#262b3d;--toolbar-active:#1d2130}body[data-variant="glass"]{--page-bg:radial-gradient(120% 120% at 12% 8%,#6d28d9 0%,#2563eb 42%,#0f172a 100%);--page-fg:#f8fafc;--font-ui:'Space Grotesk',system-ui,sans-serif;--font-num:'Space Grotesk',system-ui,sans-serif;--muted:rgba(248,250,252,0.7);--card-bg:rgba(255,255,255,0.1);--card-border:1px solid rgba(255,255,255,0.28);--card-radius:24px;--card-shadow:0 24px 60px rgba(2,6,23,0.45);--card-backdrop:blur(18px) saturate(140%);--box-bg:rgba(255,255,255,0.14);--box-fg:#ffffff;--box-border:rgba(255,255,255,0.34);--box-radius:16px;--box-w:54px;--box-h:66px;--box-gap:12px;--ring:#ffffff;--ok:#34d399;--ok-fg:#052e21;--bad:#fb7185;--focus:#ffffff;--toolbar-border:rgba(255,255,255,0.4);--toolbar-active:rgba(255,255,255,0.22)}body[data-variant="paper"]{--page-bg:#f4efe4;--page-fg:#26221b;--font-ui:Georgia,'Iowan Old Style','Times New Roman',serif;--font-num:Georgia,'Iowan Old Style','Times New Roman',serif;--muted:#7a7264;--card-bg:#fbf8f1;--card-border:1px solid #ddd3c0;--card-radius:4px;--card-shadow:none;--card-backdrop:none;--box-bg:#f4efe4;--box-fg:#26221b;--box-border:#cbbfa8;--box-radius:2px;--box-w:50px;--box-h:64px;--box-gap:8px;--ring:#b4531b;--ok:#3f6f4a;--ok-fg:#fbf8f1;--bad:#a32c1f;--focus:#b4531b;--toolbar-border:#ddd3c0;--toolbar-active:#ece3d2}body{background:var(--page-bg);color:var(--page-fg);font-family:var(--font-ui);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem}.otp-card{background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow);-webkit-backdrop-filter:var(--card-backdrop);backdrop-filter:var(--card-backdrop);padding:1.8rem 1.7rem 1.5rem;text-align:center}.otp-legend{display:block;font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem}.otp-boxes{position:relative;display:flex;gap:var(--box-gap);justify-content:center}.otp-box{position:relative;width:var(--box-w);height:var(--box-h);display:flex;align-items:center;justify-content:center;background:var(--box-bg);border:1px solid var(--box-border);border-radius:var(--box-radius);font-family:var(--font-num);font-size:1.6rem;font-weight:600;color:var(--box-fg);overflow:hidden}.otp-char{display:block;line-height:1}.otp-ring{position:absolute;top:0;left:0;width:var(--box-w);height:var(--box-h);border:2px solid var(--ring);border-radius:var(--box-radius);pointer-events:none;opacity:0}.otp-field{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;background:transparent;font:inherit;cursor:text;z-index:2}.otp-status{margin-top:1.15rem;font-size:0.82rem;color:var(--muted);min-height:1.3em}.otp-status.is-ok{color:var(--ok)}.otp-status.is-bad{color:var(--bad)}html:not(.has-js) .otp-box,html:not(.has-js) .otp-ring{display:none}html:not(.has-js) .otp-field{position:static;opacity:1;width:100%;height:auto;padding:0.8rem 1rem;background:var(--box-bg);border:1px solid var(--box-border);border-radius:var(--box-radius);color:var(--box-fg);font-family:var(--font-num);font-size:1.3rem;letter-spacing:0.4em;text-align:center}html:not(.has-js) .otp-field:focus-visible{outline:2px solid var(--focus);outline-offset:2px}@media (prefers-reduced-motion:reduce){*{animation-duration:0.001s !important;transition-duration:0.001s !important}}@media (max-width:420px){body[data-variant][data-variant]{--box-w:44px;--box-h:56px;--box-gap:6px}.otp-box{font-size:1.3rem}}