:root{color-scheme:dark;--ink:#eef2f8;--muted:#93a0b6;--green:#3ddc97;--line:rgba(255,255,255,.18);--serif:'Instrument Serif',Georgia,serif;--sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:radial-gradient(ellipse at 50% 35%,#1a2336 0%,#0e131c 55%,#080b11 100%);color:var(--ink);font:400 15px/1.5 var(--sans);display:grid;place-items:center;padding:24px;-webkit-font-smoothing:antialiased}
.pin{width:min(420px,100%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.pin__eyebrow{margin:0;font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.pin__name{margin:10px 0 0;font:400 clamp(54px,12vw,84px)/1 var(--serif);letter-spacing:-.02em}
.pin__name em{color:var(--green)}
.pin__sub{margin:0;color:var(--muted);font-size:15px}
.pin__form{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.pin__label{margin:0;color:var(--muted);font-size:13.5px;letter-spacing:.02em}
.pin__row{display:flex;gap:12px}
.pin__d{width:58px;height:68px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink);text-align:center;font:600 28px var(--sans);outline:0;transition:border-color .15s,box-shadow .15s,background .15s;-webkit-text-security:disc}
.pin__d:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(61,220,151,.16);background:rgba(255,255,255,.08)}
.pin__err{min-height:1.4em;margin:0;color:#ff8f85;font-size:13.5px}
.pin__row.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@media (prefers-reduced-motion:reduce){.pin__row.shake{animation:none}}
@media (max-width:380px){.pin__d{width:50px;height:60px}.pin__row{gap:9px}}