priors

Runs/html · chain · relay/033

html · chain · relay · step 033 of 64

Render of html · chain · relay, step 033

offline render, Chrome 154, light scheme, 2 s of virtual time

runs in a sandboxed frame with no origin; live pages may fetch CDN fonts the offline render did not
modelFable 5.1 claude-fable-5-1
effortlow
profileroom
cli version2.1.283
started2026-09-28 01:08:58 UTC
wall1m 46s
cost$0.87
turns19
output tokens10,009
thinking blocks3
tool / bash / edit calls18 / 3 / 14
denials1
file0.html
lines546
bytes14,931
what changed
  • added color
  • shadow or glow
  • script
features
  • shadow or glow
  • script
hex colors
  • #ffffff
  • #121212
  • #1a1a1a
  • #555555
  • #0052a3
  • #e0e0e0
  • #767676
  • #c62828
  • #a0a0a0
  • #1e1e1e
  • #5fa3ff
  • #333333
  • #8c8c8c
  • #ff8a80
  • #000000
  • #999999
unchangedno
from seedno
session45e51e77-b28d-4730-ad6c-17b411d8fefc
0.html 546 lines · 14,931 bytes
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta http-equiv="content-security-policy" content="default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data:; base-uri 'none'; form-action 'none'">
	<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
	<meta name="description" content="A well-structured, accessible HTML5 document demonstrating modern best practices for semantic markup and inclusive design.">
	<meta name="author" content="ksmith@centricle.com">
	<meta name="color-scheme" content="light dark">
	<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
	<meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">
	<meta property="og:title" content="Welcome - Accessible HTML5 Guide">
	<meta property="og:description" content="Modern HTML5 demonstrating accessibility, semantic markup, and responsive design.">
	<meta property="og:type" content="website">
	<meta name="twitter:card" content="summary">
	<title>Welcome - Accessible HTML5 Guide</title>
	<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E👋%3C/text%3E%3C/svg%3E">
	<style>
		:root {
			color-scheme: light dark;
			--text: #1a1a1a;
			--text-secondary: #555;
			--background: #fff;
			--surface: #fff;
			--accent: #0052a3;
			--border: #e0e0e0;
			--border-control: #767676;
			--error: #c62828;
		}
		@media (prefers-color-scheme: dark) {
			:root {
				--text: #e0e0e0;
				--text-secondary: #a0a0a0;
				--background: #121212;
				--surface: #1e1e1e;
				--accent: #5fa3ff;
				--border: #333;
				--border-control: #8c8c8c;
				--error: #ff8a80;
			}
		}
		*,
		*::before,
		*::after {
			box-sizing: border-box;
		}
		html {
			-webkit-text-size-adjust: 100%;
			text-size-adjust: 100%;
		}
		@media (prefers-reduced-motion: no-preference) {
			html {
				scroll-behavior: smooth;
			}
			a {
				transition: text-decoration-thickness 0.15s ease;
			}
			.skip-link {
				transition: transform 0.15s ease;
			}
			button,
			.button {
				transition: filter 0.15s ease, transform 0.15s ease;
			}
		}
		body {
			display: grid;
			grid-template-columns: minmax(0, 1fr);
			grid-template-rows: auto 1fr auto;
			min-height: 100vh;
			min-height: 100dvh;
			font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
			font-size: 1rem;
			line-height: 1.6;
			overflow-wrap: break-word;
			max-width: 70ch;
			margin: 0 auto;
			padding-top: max(clamp(1rem, 5vw, 1.5rem), env(safe-area-inset-top));
			padding-right: max(clamp(1rem, 5vw, 1.5rem), env(safe-area-inset-right));
			padding-bottom: max(clamp(1rem, 5vw, 1.5rem), env(safe-area-inset-bottom));
			padding-left: max(clamp(1rem, 5vw, 1.5rem), env(safe-area-inset-left));
			color: var(--text);
			background: var(--background);
		}
		h1 {
			color: var(--accent);
			font-size: clamp(1.75rem, 1.25rem + 3vw, 2.5rem);
			font-weight: 700;
			line-height: 1.1;
			text-wrap: balance;
			margin: 0 0 1.5rem 0;
			letter-spacing: -0.02em;
		}
		h2 {
			color: var(--accent);
			font-size: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
			font-weight: 600;
			line-height: 1.2;
			text-wrap: balance;
			margin: 2rem 0 1rem 0;
			letter-spacing: -0.01em;
		}
		h2:first-child {
			margin-top: 0;
		}
		p {
			text-wrap: pretty;
			margin: 1rem 0;
			line-height: 1.65;
		}
		a {
			color: var(--accent);
			text-underline-offset: 0.2em;
			text-decoration-thickness: 2px;
			text-decoration-skip-ink: auto;
			font-weight: 500;
		}
		a:hover, a:active {
			text-decoration-thickness: 3px;
		}
		button,
		.button {
			display: inline-block;
			text-decoration: none;
			padding: 0.75rem 1.5rem;
			font-size: 1rem;
			font-weight: 500;
			font-family: inherit;
			color: var(--background);
			background: var(--accent);
			border: 2px solid var(--accent);
			border-radius: 0.25rem;
			cursor: pointer;
			white-space: nowrap;
		}
		button:hover,
		.button:hover {
			filter: brightness(1.15);
			text-decoration: none;
		}
		button:active,
		.button:active {
			transform: scale(0.97);
		}
		ul, ol {
			margin: 1rem 0;
			padding-left: 2rem;
		}
		li {
			margin: 0.5rem 0;
		}
		:focus-visible {
			outline: 2px solid var(--accent);
			outline-offset: 2px;
		}
		a:not(.button):focus-visible {
			border-radius: 2px;
		}
		.skip-link {
			position: absolute;
			left: 0;
			top: 0;
			transform: translateY(-100%);
			background: var(--accent);
			color: var(--background);
			padding: 0.75rem 1.5rem;
			z-index: 1000;
			border-radius: 0 0 0.25rem 0;
			font-weight: 600;
			text-decoration: none;
			display: inline-block;
		}
		.skip-link:focus {
			transform: translateY(0);
			outline: 3px solid var(--text);
			outline-offset: -3px;
		}
		header {
			padding-block: 1.5rem 0;
		}
		nav ul {
			display: flex;
			flex-wrap: wrap;
			gap: 0.5rem 1.5rem;
			margin: 1rem 0 0 0;
			padding: 0;
			list-style: none;
		}
		nav li {
			margin: 0;
		}
		footer nav ul {
			justify-content: center;
			margin: 0 0 1rem 0;
		}
		main {
			padding: 1rem 0;
		}
		main:focus {
			outline: none;
		}
		section {
			margin: 2rem 0;
		}
		[id] {
			scroll-margin-top: 1.5rem;
		}
		@media (forced-colors: active) {
			.skip-link,
			button,
			.button {
				border: 2px solid ButtonText;
			}
		}
		.card {
			border: 1px solid var(--border);
			border-radius: 0.5rem;
			padding: 1.5rem;
			background: var(--surface);
			margin: 1.5rem 0;
		}
		.card h3 {
			font-size: 1.25rem;
			line-height: 1.3;
			text-wrap: balance;
			margin-top: 0;
			margin-bottom: 0.5rem;
			color: var(--accent);
		}
		.visually-hidden {
			position: absolute;
			width: 1px;
			height: 1px;
			margin: -1px;
			padding: 0;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border: 0;
		}
		@media (prefers-contrast: more) {
			:root {
				--border: currentColor;
				--border-control: currentColor;
			}
			button,
			.button {
				border-width: 3px;
			}
			.card {
				border-width: 2px;
			}
		}
		footer {
			padding-block: 1.5rem;
			border-top: 1px solid var(--border);
			font-size: 0.875rem;
			color: var(--text-secondary);
			text-align: center;
		}
		footer p {
			margin: 0.5rem 0;
		}
		small {
			display: block;
		}
		kbd {
			background: var(--surface);
			border: 1px solid var(--border);
			border-radius: 0.25rem;
			padding: 0.125rem 0.375rem;
			font-family: monospace;
			font-size: 0.875em;
		}
		.field {
			margin-bottom: 1rem;
		}
		label {
			display: block;
			margin-bottom: 0.5rem;
			font-weight: 500;
		}
		input,
		textarea {
			width: 100%;
			padding: 0.5rem;
			font: inherit;
			color: var(--text);
			background: var(--surface);
			border: 1px solid var(--border-control);
			border-radius: 0.25rem;
		}
		textarea {
			resize: vertical;
		}
		#form-status:empty {
			margin: 0;
		}
		.form-hint {
			margin: 0 0 1rem 0;
			font-size: 0.875rem;
			color: var(--text-secondary);
		}
		.field .form-hint {
			margin: 0.25rem 0 0 0;
		}
		input:user-invalid,
		textarea:user-invalid,
		[aria-invalid="true"] {
			border-color: var(--error);
			box-shadow: inset 0 0 0 1px var(--error);
		}
		.error-message {
			display: block;
			color: var(--error);
			font-size: 0.875rem;
			font-weight: 500;
			margin-top: 0.25rem;
		}
		.error-message:empty {
			display: none;
		}
		.live-region {
			display: flex;
			align-items: center;
			min-height: 3.5rem;
			margin-top: 1rem;
			padding: 1rem;
			border: 1px dashed var(--border);
			border-radius: 0.25rem;
		}
		input:focus,
		textarea:focus {
			outline: 2px solid var(--accent);
			outline-offset: 2px;
			border-color: var(--accent);
		}
		@media print {
			:root {
				color-scheme: light;
				--text: #000;
				--text-secondary: #333;
				--background: #fff;
				--surface: #fff;
				--accent: #000;
				--border: #999;
				--border-control: #000;
				--error: #000;
			}
			.skip-link,
			nav,
			button,
			.button,
			.live-region {
				display: none;
			}
			body {
				display: block;
				min-height: 0;
				max-width: none;
				padding: 0;
			}
			a {
				color: inherit;
				text-decoration: underline;
			}
			a[href^="http"]::after {
				content: " (" attr(href) ")";
				font-size: 0.85em;
				font-weight: normal;
			}
			.card {
				border: none;
				break-inside: avoid;
			}
		}
	</style>
</head>
<body>
	<a class="skip-link" href="#main">Skip to content</a>
	<header id="top">
		<h1>Welcome</h1>
		<nav aria-label="Page sections">
			<ul>
				<li><a href="#features">Features</a></li>
				<li><a href="#examples">Examples</a></li>
				<li><a href="#resources">Resources</a></li>
			</ul>
		</nav>
	</header>
	<main id="main" tabindex="-1">
		<section aria-label="Introduction">
			<p>This is a well-structured, accessible HTML5 document demonstrating modern best practices for semantic markup and inclusive design.</p>
			<p>
				It uses semantic landmarks, a skip link for keyboard navigation,
				and CSS that adapts to your light or dark mode preference.
			</p>
			<p>
				Text and link colors meet WCAG AA contrast in both themes, type scales
				with your browser's font size, and motion respects your system settings.
			</p>
		</section>

		<section aria-labelledby="features">
			<h2 id="features">Features</h2>
			<ul>
				<li>Semantic HTML structure with proper landmarks</li>
				<li>Keyboard accessible navigation and focus management</li>
				<li>Dark mode support with custom color schemes</li>
				<li>Responsive typography using modern CSS</li>
				<li>Print-friendly styles for better readability</li>
				<li>WCAG AA contrast compliance in all color modes</li>
			</ul>
		</section>

		<section aria-labelledby="examples">
			<h2 id="examples">Examples</h2>
			<article class="card">
				<h3>Component Cards</h3>
				<p>Card components are useful for organizing related content. They include a subtle border and padding for visual separation.</p>
				<a class="button" href="#resources">Learn more<span class="visually-hidden"> about accessibility resources</span></a>
			</article>

			<article class="card">
				<h3>Interactive Elements</h3>
				<p>Buttons and links are fully accessible with clear focus states. All interactive elements include visible focus indicators and proper ARIA labels.</p>
				<p><strong>Keyboard navigation:</strong> Use <kbd>Tab</kbd> to move forward, <kbd>Shift+Tab</kbd> to move backward, and <kbd>Enter</kbd> to activate.</p>
			</article>

			<article class="card">
				<h3>Accessible Form</h3>
				<form id="contact-form" novalidate>
					<p class="form-hint">Fields marked * are required.</p>
					<div class="field">
						<label for="email">Email <span aria-hidden="true">*</span></label>
						<input type="email" id="email" name="email" autocomplete="email" spellcheck="false" autocapitalize="none" required aria-describedby="email-help">
						<span id="email-error" class="error-message"></span>
						<small id="email-help" class="form-hint">For example, name@example.com</small>
					</div>
					<div class="field">
						<label for="message">Message</label>
						<textarea id="message" name="message" rows="4"></textarea>
					</div>
					<button type="submit">Send message</button>
					<p id="form-status" role="status"></p>
				</form>
			</article>

			<article class="card">
				<h3>Live Region Example</h3>
				<p>Click the button to announce a message using a live region. This demonstrates how screen readers are notified of dynamic updates.</p>
				<button id="announce" type="button">Announce message</button>
				<div class="live-region" aria-live="polite" aria-atomic="true">
					<span id="live-message"></span>
				</div>
			</article>
		</section>

		<section aria-labelledby="resources">
			<h2 id="resources">Resources</h2>
			<p>Want to learn more about web accessibility and semantic HTML? Check out these resources:</p>
			<ul>
				<li><a href="https://www.w3.org/WAI/WCAG22/quickref/" target="_blank" rel="noopener noreferrer">WCAG 2.2 Quick Reference<span class="visually-hidden"> (opens in new tab)</span></a></li>
				<li><a href="https://html.spec.whatwg.org/" target="_blank" rel="noopener noreferrer">HTML Living Standard<span class="visually-hidden"> (opens in new tab)</span></a></li>
				<li><a href="https://www.a11y-101.com/" target="_blank" rel="noopener noreferrer">A11y 101<span class="visually-hidden"> (opens in new tab)</span></a></li>
			</ul>
		</section>
	</main>
	<footer>
		<nav aria-label="Footer links">
			<ul>
				<li><a href="#top">Back to top</a></li>
				<li><a href="https://github.com" target="_blank" rel="noopener noreferrer">GitHub<span class="visually-hidden"> (opens in new tab)</span></a></li>
			</ul>
		</nav>
		<p><small>&copy; <time datetime="2026">2026</time>. All rights reserved.</small></p>
	</footer>
	<script>
		const messages = [
			"This update was announced to screen readers!",
			"Dynamic content updates work with aria-live regions.",
			"Live regions are essential for accessible web apps.",
			"Try this with a screen reader like NVDA or JAWS!"
		];
		let nextMessage = 0;
		const announceBtn = document.getElementById('announce');
		const contactForm = document.getElementById('contact-form');
		const emailInput = document.getElementById('email');
		const formStatus = document.getElementById('form-status');

		if (announceBtn) {
			announceBtn.addEventListener('click', () => {
				document.getElementById('live-message').textContent = messages[nextMessage];
				nextMessage = (nextMessage + 1) % messages.length;
			});
		}

		if (contactForm) {
			const emailError = document.getElementById('email-error');

			const validateEmail = () => {
				let message = '';
				if (emailInput.validity.valueMissing) {
					message = 'Enter your email address.';
				} else if (!emailInput.validity.valid) {
					message = 'Enter an email address in the format name@example.com.';
				}
				emailError.textContent = message;
				if (message) {
					emailInput.setAttribute('aria-invalid', 'true');
					emailInput.setAttribute('aria-describedby', 'email-error email-help');
				} else {
					emailInput.removeAttribute('aria-invalid');
					emailInput.setAttribute('aria-describedby', 'email-help');
				}
				return !message;
			};

			emailInput.addEventListener('blur', () => {
				if (emailInput.value || emailInput.hasAttribute('aria-invalid')) {
					validateEmail();
				}
			});

			emailInput.addEventListener('input', () => {
				if (emailInput.hasAttribute('aria-invalid')) {
					validateEmail();
				}
			});

			contactForm.addEventListener('submit', (event) => {
				event.preventDefault();
				formStatus.textContent = '';
				if (!validateEmail()) {
					emailInput.focus();
					return;
				}
				contactForm.reset();
				setTimeout(() => {
					formStatus.textContent = "Thanks! This is a demo, so nothing was sent.";
				}, 100);
			});
		}
	</script>
</body>
</html>
what changed from step 032

+68 / -32 lines

  			--accent: #0052a3;  			--border: #e0e0e0;+ 			--border-control: #767676;+ 			--error: #c62828;  		}  		@media (prefers-color-scheme: dark) {⋯ line 36  				--accent: #5fa3ff;  				--border: #333;+ 				--border-control: #8c8c8c;+ 				--error: #ff8a80;  			}  		}⋯ line 61  			button,  			.button {- 				transition: opacity 0.15s ease, transform 0.15s ease;+ 				transition: filter 0.15s ease, transform 0.15s ease;  			}  		}⋯ line 136  		button:hover,  		.button:hover {- 			opacity: 0.85;+ 			filter: brightness(1.15);  			text-decoration: none;  		}⋯ line 179  			padding-block: 1.5rem 0;  		}- 		header nav ul {+ 		nav ul {  			display: flex;  			flex-wrap: wrap;⋯ line 187  			list-style: none;  		}- 		header nav li {+ 		nav li {  			margin: 0;  		}+ 		footer nav ul {+ 			justify-content: center;+ 			margin: 0 0 1rem 0;+ 		}  		main {  			padding: 1rem 0;⋯ line 242  			:root {  				--border: currentColor;+ 				--border-control: currentColor;  			}  			button,⋯ line 288  			color: var(--text);  			background: var(--surface);- 			border: 1px solid var(--border);+ 			border: 1px solid var(--border-control);  			border-radius: 0.25rem;  		}⋯ line 302  			color: var(--text-secondary);  		}- 		input:user-invalid,- 		textarea:user-invalid {- 			border-color: #c62828;- 			border-width: 2px;+ 		.field .form-hint {+ 			margin: 0.25rem 0 0 0;  		}+ 		input:user-invalid,+ 		textarea:user-invalid,  		[aria-invalid="true"] {- 			border-color: #c62828;- 			border-width: 2px;+ 			border-color: var(--error);+ 			box-shadow: inset 0 0 0 1px var(--error);  		}  		.error-message {  			display: block;- 			color: #c62828;+ 			color: var(--error);  			font-size: 0.875rem;+ 			font-weight: 500;  			margin-top: 0.25rem;  		}+ 		.error-message:empty {+ 			display: none;+ 		}  		.live-region {  			display: flex;⋯ line 345  				--accent: #000;  				--border: #999;+ 				--border-control: #000;+ 				--error: #000;  			}  			.skip-link,+ 			nav,  			button,- 			.button {+ 			.button,+ 			.live-region {  				display: none;  			}⋯ line 430  			<article class="card">  				<h3>Accessible Form</h3>- 				<form id="contact-form">- 					<p class="form-hint">Fields marked <span aria-hidden="true">*</span> are required.</p>+ 				<form id="contact-form" novalidate>+ 					<p class="form-hint">Fields marked * are required.</p>  					<div class="field">- 						<label for="email">Email <span aria-hidden="true">*</span><span class="visually-hidden"> (required)</span></label>- 						<input type="email" id="email" name="email" autocomplete="email" required aria-describedby="email-help">- 						<small id="email-help" class="form-hint">Please enter a valid email address</small>+ 						<label for="email">Email <span aria-hidden="true">*</span></label>+ 						<input type="email" id="email" name="email" autocomplete="email" spellcheck="false" autocapitalize="none" required aria-describedby="email-help">+ 						<span id="email-error" class="error-message"></span>+ 						<small id="email-help" class="form-hint">For example, name@example.com</small>  					</div>  					<div class="field">⋯ line 469  	<footer>  		<nav aria-label="Footer links">- 			<ul style="list-style: none; padding: 0; display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;">+ 			<ul>  				<li><a href="#top">Back to top</a></li>  				<li><a href="https://github.com" target="_blank" rel="noopener noreferrer">GitHub<span class="visually-hidden"> (opens in new tab)</span></a></li>⋯ line 476  		<p><small>&copy; <time datetime="2026">2026</time>. All rights reserved.</small></p>  	</footer>- 	<script defer>+ 	<script>  		const messages = [  			"This update was announced to screen readers!",⋯ line 497    		if (contactForm) {- 			emailInput.addEventListener('blur', () => {- 				if (emailInput.value && !emailInput.checkValidity()) {+ 			const emailError = document.getElementById('email-error');+ + 			const validateEmail = () => {+ 				let message = '';+ 				if (emailInput.validity.valueMissing) {+ 					message = 'Enter your email address.';+ 				} else if (!emailInput.validity.valid) {+ 					message = 'Enter an email address in the format name@example.com.';+ 				}+ 				emailError.textContent = message;+ 				if (message) {  					emailInput.setAttribute('aria-invalid', 'true');- 					emailInput.setAttribute('aria-describedby', 'email-error');+ 					emailInput.setAttribute('aria-describedby', 'email-error email-help');  				} else {  					emailInput.removeAttribute('aria-invalid');- 					emailInput.removeAttribute('aria-describedby');+ 					emailInput.setAttribute('aria-describedby', 'email-help');  				}+ 				return !message;+ 			};+ + 			emailInput.addEventListener('blur', () => {+ 				if (emailInput.value || emailInput.hasAttribute('aria-invalid')) {+ 					validateEmail();+ 				}  			});  + 			emailInput.addEventListener('input', () => {+ 				if (emailInput.hasAttribute('aria-invalid')) {+ 					validateEmail();+ 				}+ 			});+   			contactForm.addEventListener('submit', (event) => {  				event.preventDefault();- 				if (!contactForm.checkValidity()) {- 					formStatus.textContent = '';- 					formStatus.setAttribute('role', 'alert');- 					setTimeout(() => {- 						formStatus.textContent = 'Please fill in all required fields correctly.';- 					}, 100);+ 				formStatus.textContent = '';+ 				if (!validateEmail()) {+ 					emailInput.focus();  					return;  				}- 				formStatus.textContent = '';- 				formStatus.setAttribute('role', 'status');+ 				contactForm.reset();  				setTimeout(() => {  					formStatus.textContent = "Thanks! This is a demo, so nothing was sent.";

What the model said

I improved `0.html`, mostly by fixing the contact form's validation, which was broken in several ways. Nothing was tested in a browser or with a screen reader, and the script was not syntax-checked, because the one shell command that would have done it was blocked.

## Bugs fixed

- **Missing error element:** on an invalid email, the script pointed `aria-describedby` at `email-error`, which didn't exist, and on a valid one it removed the help text association entirely. There is now a real error element, and the help text stays associated.
- **Unreachable error handling:** without `novalidate`, the browser blocked submission before the script's invalid branch could run. The form now has `novalidate`, shows a specific inline message, and moves focus to the email field on a failed submit.
- **Error clearing:** the error now clears as the user corrects the field.
- **Live region role swapping:** the script switched `#form-status` between `status` and `alert`, which screen readers handle unreliably. It is now a stable `status` region used only for the success message.
- **`<script defer>`:** `defer` does nothing on inline scripts, so I removed it.

## Accessibility

- **Input borders:** they were `#e0e0e0` on white, about 1.3:1, which fails the 3:1 minimum for control boundaries. They now use a new `--border-control` colour (`#767676` light, `#8c8c8c` dark).
- **Error colour:** the hard-coded `#c62828` was low contrast in dark mode. It is now an `--error` variable with a dark-mode value of `#ff8a80`.
- **Duplicate "required":** the label had hidden "(required)" text on top of the `required` attribute, so it was announced twice. I removed the hidden text.
- **Required-fields hint:** the asterisk was hidden from screen readers, so the hint read "Fields marked are required". It is now exposed.
- **Help text:** "Please enter a valid email address" read like an error, so it now says "For example, name@example.com".

## Polish

- **Invalid state:** it uses an inset `box-shadow` instead of changing the border width, so the field no longer shifts when it turns invalid.
- **Button hover:** it uses `filter: brightness()` instead of `opacity`, so the label doesn't fade with the background.
- **Footer nav:** the inline `style` attribute is gone, replaced by a shared `nav ul` rule.
- **Print:** navigation and the empty live-region box are now hidden.
- **Email input:** I added `spellcheck="false"` and `autocapitalize="none"`.

## Behaviour change to note

A successful submit now resets the form, which it didn't before.