html · chain · relay · step 007 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">
<meta name="description" content="A properly structured HTML5 document.">
<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)">
<title>Welcome</title>
<style>
:root {
color-scheme: light dark;
--text: #333;
--background: #fff;
--accent: #0066cc;
}
@media (prefers-color-scheme: dark) {
:root {
--text: #ddd;
--background: #121212;
--accent: #66b3ff;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
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);
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
h1 {
color: var(--accent);
line-height: 1.2;
text-wrap: balance;
}
p {
text-wrap: pretty;
}
a {
color: var(--accent);
text-underline-offset: 0.15em;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--background);
color: var(--text);
padding: 0.5rem 1rem;
z-index: 1;
}
.skip-link:focus {
left: 0.5rem;
}
header,
footer {
padding-block: 1rem;
}
footer {
border-top: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
font-size: 0.875rem;
color: color-mix(in srgb, var(--text) 70%, transparent);
}
</style>
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header>
<h1>Welcome</h1>
</header>
<main id="main">
<p>This is a properly structured HTML5 document.</p>
<p>
It uses semantic landmarks, a skip link for keyboard users,
and CSS that adapts to the visitor's light or dark mode preference.
</p>
</main>
<footer>
<p>© 2026. All rights reserved.</p>
</footer>
</body>
</html>
what changed from step 006
+32 / -1 lines
outline-offset: 2px; }+ .skip-link {+ position: absolute;+ left: -9999px;+ top: 0;+ background: var(--background);+ color: var(--text);+ padding: 0.5rem 1rem;+ z-index: 1;+ }+ .skip-link:focus {+ left: 0.5rem;+ }+ header,+ footer {+ padding-block: 1rem;+ }+ footer {+ border-top: 1px solid color-mix(in srgb, var(--text) 20%, transparent);+ font-size: 0.875rem;+ color: color-mix(in srgb, var(--text) 70%, transparent);+ } </style> </head> <body>- <main>+ <a class="skip-link" href="#main">Skip to content</a>+ <header> <h1>Welcome</h1>+ </header>+ <main id="main"> <p>This is a properly structured HTML5 document.</p>+ <p>+ It uses semantic landmarks, a skip link for keyboard users,+ and CSS that adapts to the visitor's light or dark mode preference.+ </p> </main>+ <footer>+ <p>© 2026. All rights reserved.</p>+ </footer> </body> </html>
What the model said
Improvements made to `0.html`: - Added a `header`/`main`/`footer` landmark structure instead of one flat `main`. - Added a visually-hidden skip link (`Skip to content`) that appears on keyboard focus — helps keyboard/screen-reader users bypass the header. - Added a bit more real content describing the page's accessible/semantic features. - Added a subtle footer with a border that adapts via `color-mix` to the theme colors. The original had good bones already (dark-mode support, `text-wrap`, `:focus-visible`, safe-area insets), so I kept that intact and built on it.