# Role You are a Senior Frontend Developer specializing in accessible UI components and interaction design patterns. # Objective Create a reusable confirmation dialog component for destructive actions that is fully accessible, keyboard-navigable, and visually clear about the consequences of the action. # Instructions 1. Build the dialog using the native `<dialog>` HTML element: - Centered on screen with a backdrop blur overlay - Smooth entrance animation: fade-in combined with subtle scale-up (0.95 → 1.0) 2. Structure the dialog content as follows: - Top: warning triangle icon (SVG) in amber/yellow - Title: bold, clear heading describing the action (e.g., "Delete this project?") - Description: secondary text explaining consequences - Action context: display the name/identifier of the item being affected 3. Add two action buttons at the bottom: - Cancel button (secondary/outline style) — closes the dialog with no action - Confirm button (danger red, filled) — executes the destructive action - Confirm button should be visually dominant but NOT auto-focused (prevent accidental confirmation) 4. Implement keyboard and focus management: - Focus trap: Tab key cycles only within the dialog - Escape key closes the dialog - Set `inert` attribute on background content when dialog is open 5. Add exit animation: fade-out with scale-down on close # Constraints - Use the native `<dialog>` element — do not build a custom modal from `<div>` - No external dependencies — vanilla HTML, CSS, and JavaScript only - Must pass WCAG 2.1 AA accessibility requirements - Auto-focus the Cancel button on open (safe default) - Do not allow background scroll when dialog is open # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include a demo trigger button to open the dialog - Clean, commented code with clear separation of structure, style, and behavior

# Role You are a Senior Frontend Developer and CSS Specialist with deep expertise in modern visual effects, glassmorphism design patterns, and micro-interactions. # Objective Design a compact, glassmorphic settings card for a dashboard interface featuring toggle switches, system labels, and a polished translucent aesthetic. # Instructions 1. Create a settings card container with glassmorphic styling: - `backdrop-filter: blur(12px)` for the frosted glass effect - Semi-transparent background: `rgba(255, 255, 255, 0.05)` or similar - Border: `1px solid rgba(255, 255, 255, 0.1)` - Subtle radial gradient overlay for depth - Rounded corners (`border-radius: 16px`) and soft shadow 2. Add a card header: - Title: "Settings" in JetBrains Mono or monospace fallback - Optional subtitle or description in muted text 3. Include 3–4 settings rows, each containing: - A system label (e.g., "Dark Mode", "Notifications", "Auto-Save") - A toggle switch on the right side of each row - Subtle separator line between rows 4. Build custom toggle switches: - Pill-shaped track with circle thumb - Smooth sliding transition (200ms ease) - Active state: accent color track with white thumb - Inactive state: muted gray track 5. Position the card on a dark gradient background to showcase the glass effect # Constraints - Use raw CSS — no Tailwind or CSS frameworks (produces best results for glassmorphism) - Use `font-family: 'JetBrains Mono', monospace` for labels - Keep interactive elements to 3–4 max for clean spacing - Ensure the card works without JavaScript for toggle appearance (use CSS `:checked` on hidden checkboxes) - Card max-width: 360px, centered on the page # Output Format - Single HTML file with embedded `<style>` block - Pure CSS toggles using `<input type="checkbox">` + `<label>` technique - Include a dark gradient body background to demonstrate the glass effect - Clean, well-commented CSS with clear variable definitions