.code-boxes{position:relative;width:100%;max-width:372px;margin:8px 0 16px}
.code-boxes-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;transition:opacity .25s ease,transform .25s ease}
.code-box{display:flex;align-items:center;justify-content:center;aspect-ratio:5/6;min-width:0;width:100%;border:2px solid #e1e8da;border-radius:16px;background:#fff;color:#263126;font:800 26px/1 Nunito,Arial,sans-serif;box-shadow:0 2px 0 rgba(36,48,30,.04);transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease}
.code-box.filled{border-color:#f3b72f;background:#fffaf0}
.code-box.active{border-color:#5e952c;box-shadow:0 0 0 4px rgba(148,206,94,.28)}
.code-box.active:empty::after{content:'';width:2px;height:26px;border-radius:2px;background:#5e952c;animation:code-caret 1s steps(1) infinite}
.code-boxes-input{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;opacity:0;font-size:16px;color:transparent;background:transparent;caret-color:transparent;cursor:text}
.code-boxes-done{position:absolute;left:50%;top:50%;display:flex;align-items:center;justify-content:center;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:linear-gradient(65deg,#5e952c,#94ce5e);color:#fff;font:900 30px/1 Nunito,Arial,sans-serif;box-shadow:0 10px 26px rgba(94,149,44,.35);opacity:0;transform:scale(.4);pointer-events:none;transition:opacity .3s ease .12s,transform .45s cubic-bezier(.2,1.6,.4,1) .12s}
.code-boxes.is-success .code-boxes-row{opacity:0;transform:scale(.9)}
.code-boxes.is-success .code-boxes-done{opacity:1;transform:scale(1)}
.code-boxes.is-error .code-box{border-color:#d9534f;background:#fff5f4}
.code-boxes.is-error .code-boxes-row{animation:code-shake .4s ease}
@keyframes code-caret{50%{opacity:0}}
@keyframes code-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@media(max-width:400px){.code-boxes-row{gap:6px}.code-box{border-radius:13px;font-size:22px}}
@media(prefers-reduced-motion:reduce){.code-boxes-row,.code-box,.code-boxes-done{transition:none;animation:none!important}}