Act as a senior product designer and engineer. Design and build the sign-in and sign-up screens for {{business_name}} in my {{tech_stack}} project, styled in {{visual_style}}. Methods: {{integrations}}. Keep the existing auth provider and routes; this is the screens, not the backend. Layout: 1280: a single column of max 400px, centered, on the background token, with the logo above; an optional side panel holds one real product image or quote, never an abstract gradient. 768: the same column without the side panel. 360: full width, no card, 16px gutters, inputs 48px tall at 16px text. Fields: - email: type email, autocomplete="username" on sign-in and "email" on sign-up - password: autocomplete current-password or new-password; a show or hide button with aria-pressed; paste always allowed - no confirm-password field; show the rules up front and tick them as they're met - sign-up asks only what's needed now Methods: passkeys or magic link first if offered, then provider buttons using each provider's approved branding, all the same width. Errors: - wrong details: "Email or password is incorrect", never revealing which, so accounts can't be enumerated - inline field errors linked with aria-describedby, plus a summary that takes focus on submit - locked or rate limited: say when to try again States: submitting (button disabled, spinner, label kept); check-your-email screen with a resend button that counts down 30s; expired link; provider error with a way back. Forgot password and terms links sit near the fields. Accessibility: WCAG 2.2 accessible authentication, so no puzzles or memory tests; Cloudflare Turnstile in invisible mode if bots are a problem. Motion: none beyond 150ms state changes; nothing under prefers-reduced-motion. Avoid: disabling paste, splitting email and password across two screens without reason, placeholder-only labels.