html · chain · relay · step 010 of 64
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="description" content="A well-structured, accessible HTML5 document with modern best practices.">
<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 name="author" content="ksmith@centricle.com">
<title>Welcome</title>
<style>
:root {
color-scheme: light dark;
--text: #1a1a1a;
--text-secondary: #555;
--background: #fff;
--accent: #0052a3;
--border: #e0e0e0;
}
@media (prefers-color-scheme: dark) {
:root {
--text: #e0e0e0;
--text-secondary: #a0a0a0;
--background: #121212;
--accent: #5fa3ff;
--border: #333;
}
}
*,
*::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;
}
}
body {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
min-height: 100dvh;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
max-width: 70ch;
margin: 0 auto;
padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
color: var(--text);
background: var(--background);
}
h1 {
color: var(--accent);
font-size: 2rem;
line-height: 1.2;
text-wrap: balance;
margin: 0;
}
p {
text-wrap: pretty;
margin: 1rem 0;
}
a {
color: var(--accent);
text-underline-offset: 0.15em;
text-decoration-thickness: 1.5px;
}
a:hover {
text-decoration-thickness: 3px;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 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: 1;
border-radius: 0 0 0.25rem 0;
}
.skip-link:focus {
transform: none;
outline-color: var(--text);
}
header {
padding-block: 1.5rem;
margin-bottom: 1.5rem;
}
main:focus {
outline: none;
}
footer {
padding-block: 1.5rem;
margin-top: 3rem;
border-top: 1px solid var(--border);
font-size: 0.875rem;
color: var(--text-secondary);
}
footer p {
margin: 0.5rem 0;
}
@media print {
.skip-link {
display: none;
}
body {
display: block;
min-height: 0;
max-width: none;
}
}
</style>
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header>
<h1>Welcome</h1>
</header>
<main id="main" tabindex="-1">
<p>This is a well-structured, accessible HTML5 document.</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>
Features include improved color contrast for accessibility (WCAG AA compliant),
better typography with consistent sizing, and smooth interactions.
</p>
</main>
<footer>
<p>© 2026. All rights reserved.</p>
</footer>
</body>
</html>
what changed from step 009
+20 / -5 lines
:root { color-scheme: light dark;- --text: light-dark(#1a1a1a, #e0e0e0);- --text-secondary: light-dark(#555, #a0a0a0);- --background: light-dark(#fff, #121212);- --accent: light-dark(#0052a3, #5fa3ff);- --border: light-dark(#e0e0e0, #333);+ --text: #1a1a1a;+ --text-secondary: #555;+ --background: #fff;+ --accent: #0052a3;+ --border: #e0e0e0; }+ @media (prefers-color-scheme: dark) {+ :root {+ --text: #e0e0e0;+ --text-secondary: #a0a0a0;+ --background: #121212;+ --accent: #5fa3ff;+ --border: #333;+ }+ } *, *::before,⋯ line 40 html { scroll-behavior: smooth;+ }+ a {+ transition: text-decoration-thickness 0.15s ease;+ }+ .skip-link {+ transition: transform 0.15s ease; } }
What the model said
The page was already well built, so I made two small changes to `0.html` instead of rewriting it. I haven't opened it in a browser to check. 1. **Colours now work in older browsers.** The colours used `light-dark()`, which Safari only supports from 17.5 and Chrome from 123. In older versions every colour variable was invalid, so the page lost its text, background, accent and border colours. I switched to plain colour values with a dark-mode override, which works everywhere and looks the same in current browsers. 2. **Added the "smooth interactions" the page mentions.** Link underlines and the skip link now animate briefly on hover and focus. The animation is turned off for people who have "reduce motion" enabled. One thing for you to decide: line 10 puts your email address (`ksmith@centricle.com`) in the `author` meta tag. That makes it public and easy for spam bots to scrape. You may want to use a name there instead.