.ec{--ec-box-h:56px;--ec-box-r:12px;--ec-digit:26px;--ec-ink:var(--ink);--ec-mute:var(--ink-mute);--ec-line:var(--border-strong);--ec-surface:var(--bg-raised);--ec-focus:var(--accent);flex-direction:column;display:flex}.ec-sheet{--ec-box-h:60px;--ec-box-r:16px;--ec-digit:28px;--ec-ink:var(--fn-ink,var(--ink));--ec-mute:var(--fn-ink-3,var(--ink-mute));--ec-line:var(--fn-line,var(--border-strong));--ec-surface:var(--fn-surface,var(--bg-raised))}.ec-head{text-align:center;flex-direction:column;align-items:center;display:flex}.ec-badge{background:var(--accent-soft);width:56px;height:56px;color:var(--accent-text);border-radius:18px;place-items:center;margin-bottom:16px;display:grid}.ec-sheet .ec-badge{background:var(--fn-t-lilac,var(--accent-soft));color:var(--fn-ink,var(--accent-text))}.ec-title{color:var(--ec-ink);text-wrap:balance;margin:0 0 8px}.ec-card .ec-title{font:400 30px/1.1 var(--font-serif);letter-spacing:-.02em}.ec-sheet .ec-title{font:650 24px/1.22 var(--fn-font,var(--font-sans));letter-spacing:-.015em}.ec-sub{color:var(--ec-mute);text-wrap:pretty;margin:0;font-size:14px;line-height:1.5}.ec-email-row{flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 8px;margin-top:2px;font-size:14px;line-height:1.5;display:inline-flex}.ec-email{color:var(--ec-ink);overflow-wrap:anywhere;font-weight:600}.ec-note{background:var(--bg-inset);color:var(--ink-soft);text-align:left;border-radius:12px;margin:14px 0 0;padding:10px 12px;font-size:13px;line-height:1.45}.ec-code{width:100%;max-width:372px;margin:24px auto 0;position:relative}.ec-boxes{grid-template-columns:repeat(3,minmax(0,1fr)) 14px repeat(3,minmax(0,1fr));align-items:center;gap:8px;display:grid}.ec-sep{background:var(--ec-line);border-radius:2px;justify-self:center;width:8px;height:2px}.ec-box{height:var(--ec-box-h);border-radius:var(--ec-box-r);border:1.5px solid var(--ec-line);background:var(--ec-surface);font:600 var(--ec-digit)/1 var(--font-sans);color:var(--ec-ink);place-items:center;transition:border-color .16s,box-shadow .16s,background-color .2s,transform .16s;display:grid;position:relative}.ec-box[data-active=true]{border-color:var(--ec-focus);box-shadow:0 0 0 4px color-mix(in oklch, var(--ec-focus) 18%, transparent)}.ec-box[data-filled=true]{border-color:color-mix(in oklch, var(--ec-ink) 38%, var(--ec-line))}.ec-digit{animation:.16s cubic-bezier(.22,1,.36,1) ec-pop;display:inline-block}.ec-caret{background:var(--ec-focus);border-radius:1px;width:2px;height:45%;animation:1.05s step-end infinite ec-blink}.ec-code[data-state=invalid] .ec-box{border-color:var(--bad);background:color-mix(in oklch, var(--bad) 6%, var(--ec-surface));box-shadow:none}.ec-code[data-state=invalid] .ec-boxes{animation:.38s cubic-bezier(.36,.07,.19,.97) ec-shake}.ec-code[data-state=success] .ec-box{border-color:var(--good);background:color-mix(in oklch, var(--good) 10%, var(--ec-surface));box-shadow:none}.ec-code[data-state=success] .ec-box:nth-child(n){transition-delay:calc(var(--i,0) * 30ms)}.ec-code[data-state=busy] .ec-box{opacity:.6}.ec-input{color:#0000;-webkit-text-fill-color:transparent;caret-color:#0000;letter-spacing:0;cursor:text;z-index:1;background:0 0;border:0;outline:none;width:100%;height:100%;margin:0;padding:0;font-size:16px;position:absolute;inset:0}.ec-input::selection{background:0 0}.ec .ec-input:focus-visible{outline:none}.ec-input:-webkit-autofill{transition:background-color 9999s;-webkit-box-shadow:inset 0 0 0 1000px #0000}.ec-input:-webkit-autofill:focus{transition:background-color 9999s;-webkit-box-shadow:inset 0 0 0 1000px #0000}.ec-input:disabled{cursor:default}.ec-status{text-align:center;min-height:20px;color:var(--ec-mute);margin:10px 0 0;font-size:13px;line-height:1.45}.ec-status[data-tone=bad]{color:var(--bad)}.ec-status[data-tone=good]{color:var(--good)}.ec-actions{flex-direction:column;gap:10px;margin-top:14px;display:flex}.ec-open{border:1px solid var(--ec-line);background:var(--ec-surface);height:44px;color:var(--ec-ink);font:600 14px var(--font-sans);border-radius:999px;justify-content:center;align-items:center;gap:8px;text-decoration:none;transition:background-color .15s,transform .12s;display:inline-flex}.ec-open:hover{background:var(--bg-inset)}.ec-open:active{transform:scale(.985)}.ec-card .ec-open{border-radius:var(--pop-r-10,10px);height:42px}.ec-foot{text-align:center;color:var(--ec-mute);margin:16px 0 0;font-size:13px;line-height:1.5}.ec-link{font:inherit;color:var(--accent-text);cursor:pointer;background:0 0;border:none;padding:0;font-weight:600;text-decoration:none}.ec-sheet .ec-link{color:var(--fn-ink,var(--accent-text));text-underline-offset:3px;text-decoration:underline}.ec-link:hover:not(:disabled){text-underline-offset:3px;text-decoration:underline}.ec-link:disabled{color:var(--ec-mute);cursor:default}.ec-wait{font-variant-numeric:tabular-nums}.ec-hint{color:var(--ec-mute);margin:0;padding-left:4px;font-size:12.5px;line-height:1.4}.ec-suggest{font:500 13px/1.4 var(--font-sans);color:var(--ec-mute);cursor:pointer;text-align:left;background:0 0;border:none;align-self:flex-start;padding:0 0 0 4px}.ec-suggest b{color:var(--accent-text);font-weight:600}.ec-sheet .ec-suggest b{color:var(--fn-ink,var(--accent-text));text-underline-offset:3px;text-decoration:underline}.ec-switch{font:600 13px var(--font-sans);color:var(--ec-mute);cursor:pointer;background:0 0;border:none;border-radius:8px;align-self:center;padding:6px 8px}.ec-switch:hover:not(:disabled){color:var(--ec-ink)}.ec-switch:disabled{opacity:.5;cursor:not-allowed}.ec-pw-row{justify-content:flex-end;display:flex}.ec-forgot{font:500 12.5px var(--font-sans);color:var(--ec-mute);cursor:pointer;background:0 0;border:none;padding:2px 4px}.ec-forgot:hover:not(:disabled){color:var(--ec-ink);text-underline-offset:3px;text-decoration:underline}.ec-eye{color:var(--ink-meta);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.ec-sheet .ec-pw{position:relative}.ec-sheet .ec-pw .fn-input{padding-right:48px}.ec-sheet .ec-pw .ec-eye{width:40px;height:40px;position:absolute;top:50%;right:6px;transform:translateY(-50%)}@keyframes ec-pop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes ec-blink{0%,to{opacity:1}50%{opacity:0}}@keyframes ec-shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(3px)}30%,50%,70%{transform:translate(-6px)}40%,60%{transform:translate(6px)}}@media (max-width:380px){.ec{--ec-box-h:50px;--ec-digit:23px}.ec-boxes{grid-template-columns:repeat(3,minmax(0,1fr)) 10px repeat(3,minmax(0,1fr));gap:6px}}@media (prefers-reduced-motion:reduce){.ec-digit,.ec-code[data-state=invalid] .ec-boxes,.ec-caret{animation:none}.ec-box{transition:none}}
