/* ============================================================================ utomata.net Header, sidebar, content, footer. Flat surfaces, hairlines, no shadows, no gradients, no motion beyond a colour change. Red is the only accent. Sections 6–9 are carried from the pre-revision stylesheet and are formatted densely on purpose. The code + syn-* theme in particular is a clone of utomata-desktop's editor theme "one": those class names are emitted server-side by lib/uto/highlight.js, so renaming one breaks highlighting silently. Change colours there only by re-cloning the editor theme. Two layout modes, set by data-layout on : "docs" sidebar pages — flush left, whitespace kept clear on the right so the viewport panel has somewhere to live "page" everything else — one centred column ========================================================================= */ /* ── 1. reset + tokens ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } * { font-variant-ligatures: none; } /* A class that sets `display` outranks the UA sheet's `[hidden] { display:none }` — same specificity, author origin wins — so anything given a display here would go on rendering with the attribute set. That is exactly how the viewport's placeholder stayed on top of its iframe and swallowed every click. One rule closes it for good. */ [hidden] { display: none !important; } :root { /* surfaces — CRT off-white, not paper */ --surface: #f0f0ee; --surface-2: #e3e3e0; --line: #d3d3cf; --ink: #161616; --ink-mid: #4c4c4c; --ink-dim: #8b8b89; --red: #c4453c; /* Chrome that hosts a running sketch stays dark in both themes — the viewport and the hero are windows onto the app, not part of the page. */ --chrome: #0d0d0d; --chrome-2: #1f1f1f; --chrome-line: #323232; --chrome-ink: #bcb9b9; --chrome-ink-bright: #f1f1f1; --chrome-ink-dim: #6c6c6c; --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace; --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --font-brand: "Space Grotesk", var(--font-sans); --header-h: 56px; --sidebar-w: 260px; /* --page-w is the CONTENT width of a centred page, and --page-max is the box that holds it. Everything centred on this site — the header's inner row, every section of a page-layout document, the footer — uses --page-max with --page-pad, so all of them end up with a content box exactly --page-w wide and their left and right edges land on the same two lines. That is the whole alignment story; see the layout policy in section 5. 1008 is chosen, not inherited: a two-column homepage row at 1fr/2fr with a --gap-6 gutter puts the right-hand column on 640px, which is the source width of the loops that go in it. Change this and that column follows. */ --page-w: 1008px; --page-pad: 32px; --page-max: calc(var(--page-w) + var(--page-pad) * 2); /* Sized for the sans body: `ch` is narrower in a proportional face than it was in the old monospace one, so this is not the old 78ch minus eight. */ --measure: 70ch; /* The two SIDEBAR layouts, which are not centred and do not use --page-w. On a docs page the content column is flush left and the viewport panel is pinned right, so the panel clears the text only while sidebar + gap + pad + content-max + viewport-w + gap <= window which at these values comes out at 1436px — a standard laptop. Narrower than that and the panel overlays the tail of the line, the way any floating tool does. Widen the content by shrinking the panel, or the reverse; they are the only two numbers involved. --example-max is the same layout with more room, because an example page carries a sketch and has no corner panel to leave space for. */ --content-max: 42rem; --example-max: 58rem; --viewport-w: 480px; --gap-1: 4px; --gap-2: 8px; --gap-3: 16px; --gap-4: 24px; --gap-5: 32px; --gap-6: 48px; --codeFront: var(--red); --codeBack: var(--surface-2); --uc-red1: #c4453c; --uc-green1: #45903b; --uc-blue1: #2f7ea3; color-scheme: light; } /* Dark. Three states: no attribute follows the system, and an explicit data-theme on overrides it in either direction. Only the tokens are redefined — no rule below this point knows which theme it is in. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface: #131313; --surface-2: #1c1c1c; --line: #2f2f2d; --ink: #ececea; --ink-mid: #adadaa; --ink-dim: #787875; --red: #c4453c; color-scheme: dark; } } :root[data-theme="dark"] { --surface: #131313; --surface-2: #1c1c1c; --line: #2f2f2d; --ink: #ececea; --ink-mid: #adadaa; --ink-dim: #787875; --red: #c4453c; color-scheme: dark; } /* ── 2. faces ────────────────────────────────────────────────────────────── */ @font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/JetBrainsMono-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/JetBrainsMono-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/SpaceGrotesk-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/SpaceGrotesk-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/SpaceGrotesk-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ── 3. base ─────────────────────────────────────────────────────────────── */ html { font-size: 16px; } /* A column the height of the window at minimum, so a short page still puts the footer on the bottom edge instead of leaving a band of background under it. dvh keeps that honest on mobile, where vh counts browser chrome that is not actually there. */ body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--surface); color: var(--ink); font-family: var(--font-sans); line-height: 1.6; -webkit-text-size-adjust: 100%; } body > .layout { flex: 1 0 auto; } /* 500, named explicitly. 700 read too heavy. Note this is the only place the weight is set globally — .prose h2/h3 carry their own 700 in the prose block below, so body headings are unaffected by this line. Regular (400) is loaded and unused; it is there to be reached for. */ h1, h2, h3 { font-family: var(--font-brand); font-weight: 500; } a { color: inherit; } img, svg { max-width: 100%; } :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } /* ── 4. header ───────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: var(--surface); border-bottom: 1px solid var(--line); } .site-header--static { position: static; } .site-header__inner { height: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad); display: flex; align-items: center; justify-content: space-between; gap: var(--gap-4); } /* Any page with a sidebar is flush left, so the mark is too — it lines up with the sidebar rather than floating in from a centred column. */ [data-layout="docs"] .site-header__inner { max-width: none; margin: 0; } .brand { display: inline-flex; align-items: center; gap: var(--gap-2); text-decoration: none; } .brand__mark { display: block; flex: none; } .brand__word { font-family: var(--font-brand); font-weight: 500; font-size: 1.125rem; letter-spacing: 0.01em; } .site-nav { display: flex; align-items: center; gap: var(--gap-4); min-width: 0; } .site-nav__link { font-family: var(--font-brand); font-weight: 500; font-size: 0.9375rem; color: var(--ink-mid); text-decoration: none; white-space: nowrap; padding: var(--gap-1) 0; border-bottom: 2px solid transparent; } .site-nav__link:hover { color: var(--ink); } .site-nav__link.is-current { color: var(--ink); border-bottom-color: var(--red); } .site-nav__link--pending { color: var(--ink-dim); cursor: default; } /* ── 5. layout + sidebar ─────────────────────────────────────────────────── */ /* LAYOUT POLICY — three kinds of page, and no fourth without a reason. * * 1 CENTRED data-layout="page" * home, blog, CMS pages, errors. One column, --page-w wide, centred in the * window. The header's inner row and the footer use the same box, so the * wordmark sits on the column's left edge and the last nav link on its * right edge. Nothing inside carries its own max-width: the column IS the * limit, and a block that re-states it is a second number to keep in step. * * 2 DOCS data-layout="docs" * Flush LEFT — sidebar plus a --content-max column — with the right of the * window deliberately unfilled, because that is where the viewport panel * opens. The header goes full width to match. Not centred, on purpose. * * 3 EXAMPLE data-kind="example" * Docs, with --example-max instead: the sketch wants the room and there is * no corner panel to leave space for. * * The exceptions are the full-bleed ones, and they are enumerated in section 11 * rather than assumed: the hero fills the window, and everything else in a * page-layout column is named in that list to get the column. */ .layout { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad); } .layout--with-sidebar { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); gap: var(--gap-5); align-items: start; } /* Sidebar mode: flush left, and the content column stops at a readable width so the right of the window stays clear. That whitespace is where the viewport panel opens, which is why it is deliberately not filled. Example pages are the same layout with a wider cap — the sketch needs the room, and they have no corner panel to leave space for. */ [data-layout="docs"] .layout { max-width: none; margin: 0; grid-template-columns: var(--sidebar-w) minmax(0, var(--content-max)); justify-content: start; } /* Only the page that carries a stage needs the extra room. The index is prose, so it keeps the same column every other prose page has. */ [data-kind="example"] .layout { grid-template-columns: var(--sidebar-w) minmax(0, var(--example-max)); } .content { min-width: 0; padding: var(--gap-6) 0; } /* Scrolls itself against a sticky top — no glide, no second document scroller. The scrollbar is hidden but the column still scrolls. */ .sidebar { position: sticky; top: var(--header-h); max-height: calc(100vh - var(--header-h)); overflow-y: auto; padding: var(--gap-6) 0; scrollbar-width: none; border-right: 0.5px solid var(--chrome-line); } .sidebar::-webkit-scrollbar { display: none; } .sidebar__toggle { display: none; } .book + .book { margin-top: var(--gap-4); } .book__heading { padding: var(--gap-1) 0; font-family: var(--font-brand); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); } .book__pages { list-style: none; margin-top: var(--gap-1); } .book__link { display: block; padding: var(--gap-1) 0 var(--gap-1) var(--gap-3); border-left: 2px solid var(--line); color: var(--ink-mid); text-decoration: none; font-size: 0.9375rem; } .book__link:hover { color: var(--ink); border-left-color: var(--ink-dim); } .book__page.is-current > .book__link { color: var(--ink); font-weight: 700; border-left-color: var(--red); } /* The current page's h2s, always expanded. h3s are not listed. */ .toc { list-style: none; margin: var(--gap-1) 0 var(--gap-2); } .toc__link { display: block; padding: 2px 0 2px var(--gap-4); border-left: 2px solid var(--line); color: var(--ink-dim); text-decoration: none; font-size: 0.875rem; line-height: 1.45; } .toc__link:hover { color: var(--ink-mid); } .toc__link.is-active { color: var(--ink); border-left-color: var(--red); } /* ── page head ───────────────────────────────────────────────────────────── */ .page-head { margin-bottom: var(--gap-6); } .page-head h1 { font-size: 2.125rem; line-height: 1.15; letter-spacing: -0.01em; } .lede { margin-top: var(--gap-3); color: var(--ink-mid); max-width: 60ch; } /* ── 6. prose — carried from the previous stylesheet ─────────────────────── */ /* ── prose ─────────────────────────────────────────────────────────────── */ .prose>*+* { margin-top: var(--gap-3); } .prose h2, .prose h3, .prose h4 { line-height: 1.5; font-weight: 700; scroll-margin-top: var(--gap-4); } .prose h2 { margin-top: var(--gap-6); padding-top: var(--gap-3); font-size: 1.286rem; /* 18px */ } .prose h3 { margin-top: var(--gap-5); font-size: 1.071rem; /* line-height: 1.5; */ } /* 15px */ .prose h4 { margin-top: var(--gap-4); font-size: 1rem; color: var(--ink-mid); } .prose>h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; } /* the red rule is the one piece of decoration: it marks a chapter start */ .prose h2::before { content: ""; display: block; width: 24px; height: 2px; background: var(--red); margin-bottom: var(--gap-3); } .prose p { max-width: var(--measure); } .prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; } .prose a:hover { color: var(--red); } .code-example { position: relative; } /* Only as much room as the button, not a word's worth. */ .code-example>.code { padding-right: 3rem; } .prose .code-example__action { position: absolute; top: 2px; right: 2px; z-index: 1; margin: 0; max-width: none; line-height: 0; } /* A quiet square in the block's corner: an icon, no label, no border until it is pointed at. It sits over code, so it stays dim and gains contrast on hover rather than announcing itself over the thing it belongs to. */ .prose .code-example .play { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 4px; color: var(--codeInk, var(--ink-dim)); background: none; text-decoration: none; opacity: 0.55; transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .prose .code-example .play:hover, .prose .code-example .play:focus-visible { opacity: 1; color: var(--red); border-color: var(--line); } .play__icon { display: block; } .prose strong { font-weight: 700; } .prose em { font-style: italic; color: var(--ink-mid); } .prose ul, .prose ol { padding-left: 2.5ch; } .prose li+li { margin-top: var(--gap-1); } .prose li::marker { color: var(--ink-dim); } .prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--gap-5) 0; } .prose img { display: block; max-width: 100%; height: auto; } /* inline code — tinted, not boxed */ /* CHANGED from `font-family: inherit`: that inherited the body face, which was monospace before this revision and is now sans. Pinned to the mono stack so inline code still reads as code. */ .prose :not(pre)>code { font-family: var(--font-mono); font-size: 0.95em; font-weight: 100 !important; padding: 1px 4px; background: var(--codeBack); color: var(--codeFront); border-radius: 2px; /* border: 1px solid var(--line-soft); */ } /* ── 7. tables — carried ─────────────────────────────────────────────────── */ /* ── tables ────────────────────────────────────────────────────────────── */ /* Ruled both ways: hairlines between cells, a heavier line around the table and under the header. */ .prose table { width: 100%; border-collapse: collapse; font-size: 0.929rem; /* display: block; */ /* overflow-x: auto; */ border: 1px solid var(--chrome-ink-dim); } .prose th, .prose td { text-align: left; vertical-align: top; padding: var(--gap-2) var(--gap-3); border-right: 1px solid var(--chrome-ink-dim); border-bottom: 1px solid var(--chrome-ink-dim); } .prose th:last-child, .prose td:last-child { border-right: 0; } .prose tbody tr:last-child td { border-bottom: 0; } .prose th { font-weight: 700; border-bottom: 2px solid var(--chrome-ink-dim); white-space: nowrap; } /* Column alignment, which markdown-it wants to write as an inline style and lib/markdown.js rewrites into these three classes — see the note there. */ .prose th.align-left, .prose td.align-left { text-align: left; } .prose th.align-center, .prose td.align-center { text-align: center; } .prose th.align-right, .prose td.align-right { text-align: right; } /* ── 8. callouts — carried ───────────────────────────────────────────────── */ /* ── callouts — > NOTE: / > WARNING: / > STATUS: … ─────────────────────── */ .prose blockquote { padding: var(--gap-3); background: var(--surface-2); border-left: 2px solid var(--red); color: var(--ink-mid); } .prose blockquote h3 { margin-top: var(--gap-2); } .prose blockquote p+p { margin-top: var(--gap-2); } .callout__tag { font-size: 0.786rem; letter-spacing: 0.1em; font-weight: 700; color: var(--ink); margin-right: var(--gap-2); } .prose blockquote .callout__tag--heading { display: block; margin: 0 0 var(--gap-2); padding: 0; /* font-size: 0.786rem; */ line-height: 1.2; } /* These override .prose blockquote, so they are qualified to match it. */ .prose blockquote.callout--warning { padding: var(--gap-4); border: 1px solid var(--ink); border-left: 4px solid var(--red); background: var(--surface-2); color: var(--ink); } .prose .callout--warning .callout__tag { color: var(--red); } /* A reusable RGB signal. Warning tags receive this class from the Markdown renderer; site-owned HTML can opt in with class="rgb-loop" as well. */ .rgb-loop { animation: rgb-loop 2.4s linear infinite; } @keyframes rgb-loop { 0%, 100% { color: #d65d5b; } 33.333% { color: #3b914f; } 66.666% { color: #3978b8; } } /* One place for every motion opt-out, so "what moves on this site" is a single list. The hero's typer is not here because it is skipped in site.js — there is no CSS animation to switch off, the text simply arrives whole. */ @media (prefers-reduced-motion: reduce) { .rgb-loop { animation: none; color: var(--red); } .hero__lines p:last-child::after { animation: none; } .hero__scroll { animation: none; } .prose .code-example .play { transition: none; } /* The zoom itself stays — it is how you read the image, not decoration. What goes is the glide into it. */ .frame__img { transition: none; } } .prose blockquote.callout--note { border-left-color: var(--ink); } /* STATUS marks an unfinished section. There are dozens of them in the Field Guide, so it stays a quiet one-line note rather than a block. */ .prose blockquote.callout--status { padding: 0 0 0 var(--gap-2); background: none; border-left-color: var(--line); font-size: 0.929rem; color: var(--ink-dim); } .prose .callout--status .callout__tag { color: var(--ink-dim); font-weight: 400; } /* ── 9. code blocks ──────────────────────────────────────────────────────── */ /* Lives in its own file: public/css/code-theme.css. Everything that colours .uto is there — both palettes, the block, and every .syn-* rule. */ /* ── 10. anchors ─────────────────────────────────────────────────────────── */ /* Native anchor scrolling, cleared of the sticky header. This replaces the whole manual scroll-to-hash system the old site.js carried. Declared after the prose block so it wins over the scroll-margin carried in there. */ .prose h2, .prose h3, .prose h4, [id] { scroll-margin-top: calc(var(--header-h) + 1rem); } /* ── 11. site pages ──────────────────────────────────────────────────────── */ /* A site page is a stack of full-bleed sections; each one decides its own width. That is what lets the hero fill the window while the prose under it stays a readable column at exactly the width it has on every other page. */ [data-layout="page"] .layout { max-width: none; margin: 0; padding: 0; } [data-layout="page"] .content { padding: 0; } /* The enumeration is the contract: a direct child of a page-layout content column is full-bleed unless it is named here. That is what lets the hero fill the window while everything else stays a column. Adding a section type means adding it to this list. */ [data-layout="page"] .content > .page-head, [data-layout="page"] .content > .claims, [data-layout="page"] .content > .closing, [data-layout="page"] .content > .stream, [data-layout="page"] .content > .prose { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-pad); } [data-layout="page"] .content > .page-head { padding-top: var(--gap-6); } [data-layout="page"] .hero + .claims { padding-top: var(--gap-6); } [data-layout="page"] .content > :last-child { padding-bottom: var(--gap-6); } /* ── 12. hero ────────────────────────────────────────────────────────── */ /* The homepage opens on a running sketch filling the window under the header, with the wordmark on a plate over it in the bottom-left corner. The plate is opaque and takes --surface, the page's own background, so it reads as a piece of the site resting on the sketch. That is what makes it legible over a sketch whose colours nobody controls — the alternative, type set directly on the frame, is only readable while the sketch stays dark, and is a bet that comes due the day someone changes the hero. site.js loads the frame when it scrolls into view and blanks it when it leaves, so it is not holding the GPU behind the rest of the page. */ .hero { position: relative; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); min-height: 420px; overflow: hidden; background: var(--chrome); } /* A static header does not eat any height, so the hero gets the whole window. */ .site-header--static + .layout .hero { height: 100vh; height: 100dvh; } /* Ambient, not interactive. Without this the iframe takes the wheel and the drag, and the homepage will not scroll while the cursor is over it. */ .hero__stage { position: absolute; inset: 0; pointer-events: none; } .hero__frame { display: block; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 0.5s ease; } .hero__frame.is-ready { opacity: 1; } /* A still, for a browser with no WebGPU. Both live in the stage; the class on decides which one is in the layout, so there is never a moment where both or neither is showing. `cover` because the still's ratio is fixed and the stage's is the window's. */ .hero__fallback { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ── no WebGPU ─────────────────────────────────────────────────────────────── Every sketch on this site is an iframe onto uto.run, and uto.run needs WebGPU. A browser without it gets NOTHING that would sit there as a black rectangle waiting for a thing that is never going to start. `no-webgpu` is set on twice over: synchronously by the bootstrap in partials/head.ejs when `navigator.gpu` is missing, which is before first paint and covers the whole class of browsers that cannot run a sketch at all; and again from site.js when `requestAdapter()` yields nothing, which is async and catches a browser that has the API without a usable GPU behind it. The second one can only land after paint, so these rules have to be able to take a sketch away as well as never show one — which is why each of them is a swap between two things already in the markup, not a choice made once. site.js blanks the frames themselves; this only decides what is in the layout. Both are needed: CSS alone would hide an iframe that still loaded 780KB of engine to run nothing. */ .no-webgpu .hero__fallback { display: block; } .no-webgpu .hero__frame { display: none; } /* The example page keeps its program and loses its stage. The message is in the markup on every page and hidden by default, so there is no request and no template branch — the class decides which of the two is showing. */ .no-webgpu .stage__frame { display: none; } .no-webgpu .stage__unsupported { display: grid; } /* The homepage's closing widget goes entirely, note and all. It is one box whose whole argument is "here is the program, here it is running", and the note under it does the narrating — half of that, with a narrator still describing the missing half, is worse than neither. */ .no-webgpu .closing { display: none; } /* No play control in a code block, so the viewport is never opened. site.js also refuses to open it, because this class can arrive after a reader has already got their pointer moving. A plain uto.run link in the PROSE is left alone and navigates normally: it is a sentence, removing it would leave a hole in the text, and uto.run says the same thing about the browser far better than a hidden link could. */ .no-webgpu .play { display: none; } /* The plate is a column of the page, not a corner ornament: the type inside it lines up with the claims' type below, and it narrows with them as the window does. Three derived numbers do that, all resolved against the hero's own width so none of them counts a scrollbar the way 100vw would: --col-left where the centred page column starts. `max()` gives the centred edge on a wide window, and the plain gutter once the window is narrower than the column. --col-w that column's width. --text-w a claim's text column — 1fr of a 1fr/2fr row, so a third of the column minus its share of the gutter. 320px at full width. The box is then pulled LEFT by its own padding, which is the whole point: the plate has to start before its text for the text to land on the same line as the headings underneath. */ .hero__plate { --col-left: max(var(--page-pad), calc((100% - var(--page-max)) / 2 + var(--page-pad))); --col-w: min(var(--page-w), calc(100% - var(--page-pad) * 2)); --text-w: calc((var(--col-w) - var(--gap-6)) / 3); position: absolute; left: calc(var(--col-left) - var(--gap-5)); bottom: var(--hero-inset, 32px); width: calc(var(--text-w) + var(--gap-5) * 2); padding: var(--gap-5); background: var(--surface); color: var(--ink); border-radius: 4px; } .hero__title { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.05; letter-spacing: -0.02em; } /* The plate grows UP. `bottom` is the anchored edge and there is no `top`, so every line the typer adds pushes the plate's top edge further up the sketch while its corner stays put. The width is fixed rather than fitted, because a plate sized to its content would step wider on almost every word typed into it. `34ch` is about eight words of this face — the measure the longest line already had. */ .hero__lines { margin-top: var(--gap-2); color: var(--ink-mid); } .hero__lines p + p { margin-top: var(--gap-2); } /* The caret is on the last line only, so it reads as one cursor moving down the plate rather than one per line. It stays after the typer finishes: this is a prompt, and a prompt without a cursor looks switched off. */ .hero__lines p:last-child::after { content: ""; display: inline-block; width: 0.5em; height: 1em; margin-left: 2px; background: var(--red); vertical-align: -0.15em; animation: hero-caret 1.1s steps(1) infinite; } @keyframes hero-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } /* Centred on the window, not on the plate, and low enough to read as an edge cue rather than as part of the wordmark. Red because it is the site's only accent and this is the only thing on the first screen asking to be used. */ .hero__scroll { position: absolute; left: 50%; bottom: var(--hero-inset, 16px); z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-left: -22px; color: var(--red); opacity: 0.75; transition: opacity 0.2s ease, transform 0.2s ease; animation: hero-nudge 2.4s ease-in-out infinite; } .hero__scroll:hover, .hero__scroll:focus-visible { opacity: 1; } @keyframes hero-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* ── 12a. homepage claims ────────────────────────────────────────────── */ /* One claim per row: the words on the left, a loop of the thing on the right. The text column is the smaller of the two on purpose — these are one-line claims, and giving them half the width would set four words across a measure built for paragraphs. `minmax` puts a floor under it so it never collapses to a word per line while the media keeps growing. The media slot is sized entirely by this rule, so the placeholder div can be swapped for a