Runs/html · chain · Fable 5.1/003
html · chain · Fable 5.1 · step 003 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">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<title>0</title>
<style>
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem;
font: 100%/1.5 system-ui, sans-serif;
}
h1 {
margin-block: 0 1rem;
line-height: 1.2;
text-wrap: balance;
}
</style>
<main>
<h1>0</h1>
</main>
what changed from step 002
+9 / -0 lines
<title>0</title> <style>+ html {+ -webkit-text-size-adjust: 100%;+ text-size-adjust: 100%;+ } body { max-width: 40rem;⋯ line 15 padding: 1.5rem; font: 100%/1.5 system-ui, sans-serif;+ }+ h1 {+ margin-block: 0 1rem;+ line-height: 1.2;+ text-wrap: balance; } </style>
What the model said
I made a few small styling improvements to `0.html`, but there wasn't much to fix: the file was already valid, responsive and light/dark aware. I haven't opened it in a browser. ## What changed - **Text size on iOS:** added `text-size-adjust: 100%` so Safari doesn't inflate the text when the phone is rotated to landscape. - **Heading line height:** the `h1` was inheriting the body's 1.5, which is loose for large text and shows once a heading wraps; it's now 1.2. - **Heading wrapping:** `text-wrap: balance` evens out the lines of a multi-line heading. - **Heading margin:** removed the top margin so the heading doesn't stack on the body padding, and set the bottom margin to `1rem`. ## What I left alone - **Structure:** the omitted `<head>` and `<body>` tags are valid HTML and look deliberate, so I kept that style. - **Content:** the title and heading are both still "0". I didn't invent a real title or a `<meta name="description">`; those are the most useful next additions once you know what the page is for.