.login{width:100%;padding:var(--space-6) var(--page-pad-x);flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.login__card{gap:var(--space-5);width:100%;max-width:26rem;padding:var(--space-6);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-xl);background:var(--color-surface-card);box-shadow:var(--shadow-md);flex-direction:column;display:flex}.login__head{gap:var(--space-2);flex-direction:column;display:flex}.login__brand{margin:0;margin-block-end:var(--space-2);display:flex}.login .login__logo{--brand-mark-size:1.75rem;margin-inline:0}.login__title{font-family:var(--font-family-display);font-size:var(--font-size-4xl);font-weight:var(--font-weight-semibold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--color-fg);margin:0}.login__lede{font-size:var(--font-size-sm);line-height:var(--leading-relaxed);color:var(--color-fg-muted);overflow-wrap:anywhere;margin:0}.login__email{color:var(--color-fg);font-weight:var(--font-weight-medium)}.login__form{gap:var(--space-4);flex-direction:column;display:flex}.login__field{gap:var(--space-2);flex-direction:column;display:flex}.login__label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-fg)}.login__submit{width:100%}.login__actions{justify-content:space-between;align-items:center;gap:var(--space-2);margin-inline:calc(var(--space-3) * -1);flex-wrap:wrap;display:flex}.login__hint{font-size:var(--font-size-xs);line-height:var(--leading-relaxed);color:var(--color-fg-subtle);margin:0}.login__dev{font-size:var(--font-size-xs);line-height:var(--leading-relaxed);color:var(--color-fg-muted);margin:0}.login__dev code{font-family:var(--font-family-mono);font-size:inherit}.otp{width:100%;position:relative}.otp__input{z-index:1;color:#0000;caret-color:#0000;width:100%;height:100%;font-size:max(1rem, var(--font-size-base));letter-spacing:1em;text-indent:.5em;appearance:none;background:0 0;border:0;outline:none;padding:0;position:absolute;inset:0}.otp__input::selection{background:0 0}.otp__input:disabled{cursor:not-allowed}.otp__boxes{gap:var(--space-2);grid-template-columns:repeat(6,minmax(0,1fr));display:grid}.otp__box{aspect-ratio:3/4;border:var(--border-width) solid var(--input-border);border-radius:var(--input-radius);background:var(--input-bg);min-width:0;color:var(--input-fg);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums;line-height:var(--leading-none);transition:border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);justify-content:center;align-items:center;display:flex}.otp__box--filled{border-color:var(--color-border-strong)}.otp__box--active{border-color:var(--input-focus-border);box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.otp__box--active:not(.otp__box--filled):after{content:"";border-radius:var(--radius-full);background:var(--color-accent);width:2px;height:1.1em;animation:otp-caret var(--duration-pulse) steps(1, end) infinite}.otp--invalid .otp__box{border-color:color-mix(in oklab, var(--color-danger) 55%, var(--input-border))}.otp--invalid .otp__box--active{box-shadow:0 0 0 var(--focus-ring-width) color-mix(in oklab, var(--color-danger) 28%, transparent)}.otp--disabled .otp__box{opacity:.55}@keyframes otp-caret{0%,49%{opacity:1}50%,to{opacity:0}}@media (prefers-reduced-motion:reduce){.otp__box--active:not(.otp__box--filled):after{animation:none}}@media (width<=24rem){.login__card{padding:var(--space-5) var(--space-4)}.otp__boxes{gap:var(--space-1-5)}}
