.login-shell{max-width:480px}.login-form-col,.login-shell{display:flex;flex-direction:column;align-items:center;width:100%}.login-form-col{padding:1rem 0}.login-form-col,.login-form-col h1,.login-form-col p{text-align:center}.login-form-col>.w-full{max-width:400px}.login-visual-col{display:flex;align-items:center;justify-content:flex-start;padding:1rem 0;margin-left:-1rem}.dog-stage,.login-visual-col{position:relative;overflow:visible}.dog-stage{width:100%;height:100%;min-height:340px;border-radius:20px}.login-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;opacity:0;transform:translateX(40%);transition:opacity .4s ease-out,-webkit-mask-image .6s ease-out,mask-image .6s ease-out}.login-video.is-playing{opacity:1;animation:login-video-slide-in 2.2s cubic-bezier(.22,.61,.36,1) forwards}@keyframes login-video-slide-in{0%{transform:translateX(40%)}to{transform:translateX(0)}}.login-video.is-ended{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000);mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000)}.oauth-button-wrapper{position:relative;width:100%}.oauth-button--soon.is-soon{opacity:.45;cursor:default;filter:grayscale(.4);justify-content:flex-start;padding-right:130px}@media (max-width:768px){.oauth-button--soon.is-soon{padding-right:96px}}.oauth-soon-badge{position:absolute;top:50%;right:12px;transform:translateY(-50%);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:999px;background:color-mix(in srgb,var(--site-accent-soft) 55%,transparent);color:color-mix(in srgb,var(--site-accent) 65%,transparent);pointer-events:none;border:1px solid color-mix(in srgb,var(--site-accent) 15%,transparent)}@media (max-width:768px){.login-shell{grid-template-columns:1fr}.login-visual-col{display:none}.login-form-col{padding:2rem 1.5rem}.oauth-soon-badge{font-size:.6rem;letter-spacing:.06em;padding:2px 8px;right:8px}}.otp-block{width:100%}.otp-divider{display:flex;align-items:center;gap:.75rem;margin:1.25rem 0;color:var(--site-fg);opacity:.55;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}.otp-divider:after,.otp-divider:before{content:"";flex:1;height:1px;background:var(--site-border-strong)}.otp-title{font-size:.9rem;font-weight:600;color:var(--site-fg);margin-bottom:.75rem}.otp-form{display:flex;flex-direction:column;gap:.75rem}.otp-input{width:100%;height:48px;padding:0 1rem;border:1px solid var(--site-border-strong);border-radius:12px;background:var(--site-bg-strong);color:var(--site-fg);font-size:1rem;transition:border-color .18s ease}.otp-input:focus{outline:none;border-color:var(--site-accent)}.otp-code-input{letter-spacing:.4em;text-align:center;font-variant-numeric:tabular-nums;font-weight:600}.otp-button{width:100%;height:48px;border:1px solid var(--site-fg);border-radius:12px;background:var(--site-fg);color:var(--site-bg-strong);font-size:.9rem;font-weight:600;cursor:pointer;transition:transform .18s ease,opacity .18s ease}.otp-button:hover:not(:disabled){transform:translateY(-1px)}.otp-button:active:not(:disabled){transform:translateY(0)}.otp-button:disabled{opacity:.4;cursor:not-allowed}.otp-resend{min-height:44px;padding:0 .5rem;background:none;border:none;color:var(--site-fg);font-size:.8rem;text-decoration:underline;cursor:pointer}.otp-resend:disabled{opacity:.45;cursor:default;text-decoration:none}.otp-sent-to{font-size:.8rem;color:var(--site-fg);opacity:.7}.otp-error{font-size:.85rem;color:#dc2626}html[data-mode=dark] .otp-error{color:#f87171}