Base64-Encoder/Decoder

You are an experienced full-stack web developer. Build a web tool called "Base64-Encoder/Decoder" that meets the requirements below.

## Goal

Build a two-way converter that encodes text to Base64 and decodes Base64 back to text.

## Core features

- Switch between encode and decode
- UTF-8 handling so non-English text and emoji work
- Choose standard Base64 or Base64URL (-, _)
- Option to keep or omit padding (=)
- Copy-to-clipboard button for the result

## Inputs

- Text or a Base64 string
- Mode (encode/decode), variant (standard/URL), padding on/off

## Outputs

- Converted string
- Byte length of input and output

## Edge cases and handling rules

- Strip spaces and line breaks before decoding
- Restore missing padding so the length is a multiple of 4
- Show an error with the position of any non-Base64 character
- Warn when decoded bytes are not valid UTF-8

## Implementation requirements

- Build it as a single page (HTML, CSS, JavaScript) that runs entirely in the browser, and never send the user's input to a server.
- Make the UI responsive and easy to use on mobile; label every input and keep everything keyboard accessible.
- Add a Copy button for results and show clear, friendly error messages for invalid input.
- Keep the core logic in functions separate from the UI so it can be unit-tested.

## Definition of done (test cases)

- 'Man' → 'TWFu' and 'Hi' → 'SGk='
- '한' → '7ZWc' and decodes back to '한'
- Bytes FB FF give '+/8=' in standard and '-_8=' in URL variant

First outline your implementation plan in at most five lines, then write the complete code, and finally explain how to check the test cases above.

---
name: build-base64-tool
description: Use when building or changing a Base64-Encoder/Decoder tool. Build a two-way converter that encodes text to Base64 and decodes Base64 back to text.
---

# Build: Base64-Encoder/Decoder

## Goal

Build a two-way converter that encodes text to Base64 and decodes Base64 back to text.

## Workflow

1. Review the required features, inputs and outputs below and ask about anything missing first.
2. Implement the core logic as pure functions separate from the UI.
3. Check the logic against the test cases in the verification list.
4. Build a responsive UI with an input form, a result area and a Copy button.
5. Reproduce each edge case listed under Rules and refine the error messages.

## Core features

- Switch between encode and decode
- UTF-8 handling so non-English text and emoji work
- Choose standard Base64 or Base64URL (-, _)
- Option to keep or omit padding (=)
- Copy-to-clipboard button for the result

## Inputs

- Text or a Base64 string
- Mode (encode/decode), variant (standard/URL), padding on/off

## Outputs

- Converted string
- Byte length of input and output

## Rules

- Strip spaces and line breaks before decoding
- Restore missing padding so the length is a multiple of 4
- Show an error with the position of any non-Base64 character
- Warn when decoded bytes are not valid UTF-8
- Build it as a single page (HTML, CSS, JavaScript) that runs entirely in the browser, and never send the user's input to a server.

## Verification

- [ ] 'Man' → 'TWFu' and 'Hi' → 'SGk='
- [ ] '한' → '7ZWc' and decodes back to '한'
- [ ] Bytes FB FF give '+/8=' in standard and '-_8=' in URL variant