{ "id": "v1-hp-6567", "long_id": "v1.home-pages-90s.docs.s06.p05.t06.u07", "name": "Personal home page: the game shrine, 2000", "era": { "slug": "home-pages-90s", "code": "hp", "name": "Personal home pages", "years": [ 1996, 2001 ], "description": "The amateur web of 1996 to 2001: tiled patterned backgrounds, bright text on black or deep colours, centred everything, big coloured headings, ruled dividers, link lists, visitor counters, guestbooks and web rings, all in the browser default fonts." }, "archetype": "docs", "mode": "mix", "viewport": { "width": 800, "fluid": false }, "summary": "A shrine to one game, as fans kept them between 1996 and 2001: a narrow top frame across the whole window with the name and the links, and under it a dark page of two unequal columns, an \"altar\" with a framed picture and fact boxes at the left and the title, the updates and the newest screenshots at the right. Text is small pale Trebuchet on black-red with gold and rose lowercase headings in a condensed poster face, red underlined links, thin 1px boxes with a second line drawn round them and bars that darken toward the foot. A walkthrough in chapters, an item table, a gallery, a web ring and a guestbook are its content; the kind faded when wikis and video took over after 2001.", "url": "https://chrono.skin/s/v1-hp-6567", "preview_url": "https://chrono.skin/s/v1-hp-6567/specimen.html", "files": { "STYLE.md": "# Personal home page: the game shrine, 2000\n\n## Summary\n\nA shrine to one game, as fans kept them between 1996 and 2001: a narrow top frame across the whole window with the name and the links, and under it a dark page of two unequal columns, an \"altar\" with a framed picture and fact boxes at the left and the title, the updates and the newest screenshots at the right. Text is small pale Trebuchet on black-red with gold and rose lowercase headings in a condensed poster face, red underlined links, thin 1px boxes with a second line drawn round them and bars that darken toward the foot. A walkthrough in chapters, an item table, a gallery, a web ring and a guestbook are its content; the kind faded when wikis and video took over after 2001.\n\n## Layout\n\n- Fixed, not fluid: `--size-page` is 740px, centred in an 800px window. `.ds-page__frame` has no fill and no border: everything below the top frame stands on `--fill-page`, the tile.\n- `.ds-nav` is written once, outside the frame: a strip on `--fill-bar` as wide as the window, closed by a `--border-width-strong` line in `--color-border-strong`, that stays at the top of the window as a frame did. `.ds-nav__frame` inside it is 740px: the `.ds-brand` at `--text-h1` at the left, `.ds-nav__links` at the right.\n- The specimen is one example site, a shrine to a made-up role-playing game, of five views.\n- Home view, `.ds-page__main`, is two columns `--space-5` apart. Left, `.ds-altar` (`--size-altar` 236px): the `.ds-altar__frame` with its square picture and caption, then three `.ds-panel` boxes (the fact file, the web ring, a short list). Right, `.ds-page__column`: the `.ds-hero` with no box (the title at `--text-display`, centred on the tile), the `.ds-stat` line of three plaques, a `.ds-heading` over the `.ds-list` of dated updates, a heading over the `.ds-grid` of four framed thumbnails, and the `.ds-construction` strip. The two columns end near each other.\n- Inner pages keep the top frame and the footer and drop the altar and the hero. `.ds-page__inner` is one column 740px wide and opens with `.ds-page__head`: the `.ds-breadcrumb`, the `.ds-page-header` (title and one italic line at the left, a button at the right, a bar under that fades out to the right) and, in the gallery, the centred `.ds-tabs`. Below it: `.ds-page__columns`, a `--size-side` (180px) `.ds-sidebar` of chapters at the left and `.ds-prose` at the right, then a fading rule and chapter numbers; or the grid of eight thumbnails, page numbers and the empty state; or the table; or entries, notices, form and message box.\n- Views: `home`; `walkthrough` (one chapter: the sidebar of chapters, running text, link states, chapter numbers); `gallery` (tabs, eight thumbnails, page numbers, the empty state of a part with no pictures); `items` (the table of weapons with its badge key); `guestbook` (entries, notices, the form to sign, the delete message box).\n- Spacing is tight: `--space-1` 2px strip padding and the height of a fading bar; `--space-2` 4px caption and title-strip padding; `--space-3` 6px cell padding, between a title and its block, between tabs and form rows; `--space-4` 10px box padding, paragraph spacing, between buttons; `--space-5` 14px between blocks, columns and thumbnails; `--space-6` 24px list indent and the space above the footer.\n- Fixed sizes: `--size-label` 150px form labels, `--size-field` 240px inputs, `--size-area` 340px textarea, `--size-check` 14px, `--size-dialog` 360px, `--size-icon` 36px, `--size-thumb` 76px height of a thumbnail, `--size-date` 78px date column of the updates.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\nThe conventions for which text sits on which fill are those of the era's first layout: text, heading, link and status colours are legible on page, canvas, surfaces and the four fills; bars, the inverse, the accent and notices bring their own text colour; status colours as fills are lettered in `--color-canvas`. This layout adds one: the name and the links stand on `--fill-bar`, so the brand and the top-frame links use `--color-bar-text`.\n\n- `--font-body` and `--font-ui` are Trebuchet MS: body 12px at line height 1.45, small print 10px, controls 11px bold. `--font-heading` is Impact (then Haettenschweiler) at weight 400 with 1px tracking, set lowercase by `--heading-transform`: 15, 22 and 34px, the front-page title 52px with 3px tracking. Buttons, links of the top frame, table heads, tabs and badges are lowercase too (`--ui-transform`). `--font-mono` (Fixedsys, Lucida Console) sets plaques, dates and numeric cells. Links in text are underlined and gain an overline under the pointer; quiet links have no line.\n- `--color-page` `#140006` under a diamond lattice, `--color-canvas` `#260010`, `--color-surface` `#33000f` (boxes, rows), `--color-surface-alt` `#4d0a1c` (alternate rows, code, the empty state), `--color-surface-strong` `#661428` (the plaque line, the closing row of a table).\n- `--color-text` pale `#f0e0d0`; `--color-heading` gold `#ffd24d` (titles, the picture, names in the guestbook, numeric cells, h1 and h3); `--color-heading-alt` rose `#ff6680` (section titles, lead lines, dates, fact names, form labels). Links red `#ff4d4d`, visited copper, hover white. `--color-accent-alt` pale steel is the \"Updated!\" word and list marks.\n- `--fill-bar` crimson with white text is the top frame, table heads and the dialog title. `--fill-bar-alt` black with gold text is every title strip. `--fill-inverse` silver with dark text is the plaques and the current tab. `--fill-accent` gold with dark text is the current link of the top frame, the \"NEW!\" badge and the current page number. `--color-fill-1` to `-4` (wine, umber, violet, midnight) are the grounds of the pictures and carry gold drawings.\n- Buttons are wine `--color-button` with white text; the secondary is charcoal with silver text. Form fields are black with pale text.\n- `--color-success`, `--color-warning` and `--color-danger` double as fills: a status badge and the destructive button are filled with one of them and lettered in `--color-canvas`. `--color-notice` with `--color-notice-text` is notices and the two stripes of the construction strip; `--color-danger-surface` with `--color-danger` is the error notice.\n- Written literally in `components.css`: `outset` and `inset` bevels on buttons, the brand tile and form controls (drawn in the control's own colour), `dotted` rules inside lists and boxes, italic for taglines and lead lines, and the slow two-step `.ds-blink`, which only runs inside `prefers-reduced-motion: no-preference`.\n- Surface: `--border-style` `solid`, 1px for boxes and 3px for the frame line, the picture frame, heading marks and the dialog. `--shadow-panel` is not a shadow but a second frame: a 2px ring of `--color-canvas` and a 1px line of `--color-border` round every box; `--shadow-dialog` is the same in `--color-border-strong` round the picture and the dialog; a hovered button gains a 1px ring. Nothing is blurred. `--fill-bar` darkens from top to foot, `--fill-bar-alt` lightens, buttons have a 1px light line at the top. `--fill-page` is a 14px diamond lattice of `--color-border-muted` over `--color-page`. Radius 0, no text shadow, no transitions.\n- Also written literally: the `solid` left mark of a heading, and the `linear-gradient` of the fading bars, which runs from `--color-border-strong` to `transparent`.\n\n## Components\n\n- `.ds-page`: on ``; the tiled page and body type. `.ds-page__frame` the centred 740px column; `.ds-page__main` the two columns of the front page and `.ds-page__column` the right one; `.ds-page__inner` the single column of an inner page; `.ds-page__head` stacks path, page header and tabs; `.ds-page__columns` chapter list plus text; `.ds-section` a heading with its block.\n- `.ds-nav`: the top frame. `.ds-nav__frame` centres its content; `.ds-nav__links` is the line of `.ds-nav__item` / `.ds-nav__link` links with a slash between; the link of the view that shows takes `--fill-accent` (one selector per view, or `is-current`).\n- `.ds-brand`: mark and name at the left of the top frame. `.ds-brand__mark` is a tile dressed like the button (`--fill-button`, `--color-button-text`, outset bevel, `--radius-control`, `--shadow-control`) holding the mark as inline SVG with square caps; `.ds-brand__name` is the name at `--text-h1` in `--color-bar-text`. Name and mark are placeholders for the installing project's own.\n- `.ds-altar`: the left column of the front page. `.ds-altar__frame` is the framed picture: `.ds-altar__pic` (a square on `--color-fill-1` with a line drawing) over `.ds-altar__caption`. `.ds-facts` with `.ds-facts__item` and `.ds-facts__name` is a fact file inside a panel.\n- `.ds-hero`: the introduction, with no box: `.ds-hero__title` at `--text-display`, `.ds-hero__lead`, `.ds-hero__action` (a `.ds-button--large` and a secondary button), `.ds-hero__hint`.\n- `.ds-page-header`: `.ds-page-header__text` with `.ds-page-header__title` and the italic `.ds-page-header__lead`, `.ds-page-header__action` at the right, and a fading bar under.\n- `.ds-heading`: a section title in `--color-heading-alt` with a thick mark at the left and a thin line under.\n- `.ds-rule`: a plain rule; `.ds-rule--fade` is a bar that fades out at both ends, the usual divider.\n- `.ds-table`: striped rows with a line under each: `.ds-table__head` (`--num`), `.ds-table__cell` (`--num` in the monospace and `--color-heading`, `--group` a closing row on `--color-surface-strong`), `.ds-table__row--alt`, `.ds-table__desc`, `.ds-table__caption`.\n- `.ds-stat`: one line of plaques on `--color-surface-strong`; each `.ds-stat__item` is a `.ds-stat__value` on `--fill-inverse` beside a `.ds-stat__label`.\n- `.ds-list`: dated updates in a box: `.ds-list__item` with a `.ds-list__meta` date and a `.ds-list__body`; `.ds-list__more` under it. `.ds-list--entries` is the guestbook: `.ds-list__title`, meta, `.ds-list__text`.\n- `.ds-panel`: a box with a `.ds-panel__title` strip on `--fill-bar-alt`, `.ds-panel__body` and `.ds-panel__text`. `.ds-ring` is the previous, random, next line of a web ring.\n- `.ds-grid`: four framed thumbnails to a row: `.ds-grid__cell` (`--2`, `--3`, `--4` pick the fill) holds a `.ds-grid__pic` block with a line drawing over a `.ds-grid__title` link and a `.ds-grid__text` file size.\n- `.ds-tabs`: a centred row of boxes, `.ds-tabs__item` / `.ds-tabs__tab`, the current one (`is-current`) on `--fill-inverse`.\n- `.ds-sidebar`: a column of `.ds-sidebar__block` boxes, each a `.ds-sidebar__title` strip over a `.ds-sidebar__list` of `.ds-sidebar__item` lines, the chapter that shows `is-current`.\n- `.ds-footer`: a fading rule, `.ds-footer__links` with `.ds-footer__item`, the italic `.ds-footer__note` and `.ds-footer__legal`, centred on the tile.\n- `.ds-prose`: running text; styles `h1`, `h2`, `h3`, `p`, `ul`, `ol`, `strong`, `code`; `.ds-prose__lead` the italic opening line, `.ds-prose__code` a block to copy.\n- `.ds-link`: every link; states `is-visited`, `is-hover`, `is-active`, `is-focus`; `.ds-link--quiet` small, `.ds-link--strong` bold, `.ds-link--plain` on a coloured fill. `.ds-links` wraps a line of them. `.ds-icon` holds a small drawing before a link.\n- `.ds-bullets`: a link list with small square marks, `.ds-bullets__item` holding a `.ds-bullets__text`.\n- `.ds-button`: a bevelled key; `.ds-button--secondary`, `.ds-button--danger`, `.ds-button--large`; states `is-hover`, `is-pressed`, `is-focus`, `is-disabled`. `.ds-buttons` lays out a row.\n- `.ds-form`: two columns, right-aligned `.ds-form__label` and `.ds-form__field`; `.ds-form__input` (`--short`, `is-error`), `.ds-form__select`, `.ds-form__textarea`, `.ds-form__check`, `.ds-form__hint`, `.ds-form__error`, `.ds-form__actions`.\n- `.ds-badge`: a solid \"NEW!\" label on `--fill-accent`; `.ds-badge--text` an italic coloured word, `.ds-badge--count` a muted count, `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger` status labels; `.ds-badges` the key line under a table.\n- `.ds-notice`: a line on `--color-notice`; `.ds-notice__label`; `.ds-notice--error`. `.ds-notices` stacks them.\n- `.ds-pagination`: a centred line: `.ds-pagination__label`, `.ds-pagination__link` with `is-current` (on `--fill-accent`) and `is-disabled`.\n- `.ds-breadcrumb`: a small path, `.ds-breadcrumb__item` separated by a coloured mark, the last `is-current`.\n- `.ds-dialog`: a message box in the page flow: `.ds-dialog__title` bar on `--fill-bar`, `.ds-dialog__body`, `.ds-dialog__actions`. No backdrop.\n- `.ds-empty`: `.ds-empty__title`, `.ds-empty__text` and a button on `--color-surface-alt`.\n- `.ds-construction`: the diagonal-striped strip with `.ds-construction__text` on it. `.ds-blink`: add to one small mark for the slow blink.\n- `.ds-view`: one screen of the example site; `.ds-view--home` shows when the address names none.\n\n## Never\n\n- `content-width <= 740px`: both columns fit an 800px window.\n- `font-size <= 52px`: the front-page title is the largest text.\n- `font-size >= 10px`: small print is 10px.\n- `font-weight >= 400`: regular and bold only.\n- `font-families <= 3`: Trebuchet, the poster face of the headings and one monospace.\n- `uppercase-text <= 0%`: nothing is set in capitals.\n- `border-radius <= 0px`: every box, key and field is square.\n- `box-shadow-blur <= 0px`: the lines inside frames are hard, never soft.\n- `border-width <= 4px`: the thick frame is 4px.\n- `transition = none`: nothing eases on hover.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new page gets a link in the top frame; a new box of facts is a `.ds-panel` in the altar; a new block at the right is a `.ds-heading` over a thin-framed box; a new picture is a `.ds-grid__cell`; a new figure joins `.ds-stat`. Keep the top frame, keep the picture at the left of the front page, keep text small and pale on the dark tile and links red and underlined, and never add radius, blur, transitions, a sheet behind the columns or a menu down the side.\n", "components.css": "/* Layout tokens (structure part). A shrine to a game, 2000: a narrow top\n frame across the whole window with the name and the links, and under it a\n 740px page of two unequal columns, a 236px \"altar\" with the framed picture\n and its boxes at the left and the words at the right. */\n:root {\n --size-page: 740px;\n --size-altar: 236px;\n --size-side: 180px;\n --size-label: 150px;\n --size-field: 240px;\n --size-area: 340px;\n --size-check: 14px;\n --size-dialog: 360px;\n --size-icon: 36px;\n --size-thumb: 76px;\n --size-date: 78px;\n --space-1: 2px;\n --space-2: 4px;\n --space-3: 6px;\n --space-4: 10px;\n --space-5: 14px;\n --space-6: 24px;\n}\n\n/* ---------- shell: a top frame, then the page on the tile ---------- */\n.ds-page {\n margin: 0;\n padding: 0;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page__frame {\n box-sizing: border-box;\n width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-5) 0 var(--space-6);\n border-radius: var(--radius-page);\n text-align: left;\n}\n/* The front page: the altar and the words. */\n.ds-page__main {\n display: grid;\n grid-template-columns: var(--size-altar) minmax(0, 1fr);\n column-gap: var(--space-5);\n align-items: start;\n}\n.ds-page__column,\n.ds-page__inner {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-page__head {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n/* A chapter: the list of chapters at the left, the text at the right. */\n.ds-page__columns {\n display: grid;\n grid-template-columns: var(--size-side) minmax(0, 1fr);\n column-gap: var(--space-5);\n align-items: start;\n}\n.ds-section {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n min-width: 0;\n}\n\n/* Section title: a thick mark at the left, a thin line under. */\n.ds-heading {\n margin: 0;\n padding: 0 0 var(--space-1) var(--space-3);\n color: var(--color-heading-alt);\n border-left: var(--border-width-strong) solid var(--color-border-strong);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n\n/* ---------- nav: the top frame, as wide as the window ---------- */\n.ds-nav {\n position: sticky;\n top: 0;\n z-index: 1;\n min-width: var(--size-page);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-nav__frame {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5);\n box-sizing: border-box;\n width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-3) 0;\n}\n.ds-brand {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-3);\n color: inherit;\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--text-h1);\n height: var(--text-h1);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) outset var(--color-button);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-display);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__links {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n}\n.ds-nav__item + .ds-nav__item::before {\n content: \"/\";\n padding: 0 var(--space-2);\n opacity: 0.6;\n}\n.ds-nav__link {\n padding: var(--space-1) var(--space-3);\n color: inherit;\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n text-decoration: underline;\n}\n/* The page that is showing: the accent fill. One selector for each view, and\n the home link when the address names no view. */\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#walkthrough:target) .ds-nav__link[href=\"#walkthrough\"],\n.ds-page:has(#gallery:target) .ds-nav__link[href=\"#gallery\"],\n.ds-page:has(#items:target) .ds-nav__link[href=\"#items\"],\n.ds-page:has(#guestbook:target) .ds-nav__link[href=\"#guestbook\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-decoration: none;\n text-shadow: none;\n}\n\n/* ---------- altar: the framed picture and its boxes ---------- */\n.ds-altar {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-altar__frame {\n margin: 0;\n background: var(--fill-panel);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n text-align: center;\n}\n.ds-altar__pic {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--size-altar);\n background: var(--color-fill-1);\n color: var(--color-heading);\n}\n.ds-altar__pic svg {\n display: block;\n width: 60%;\n height: 60%;\n}\n.ds-altar__caption {\n display: block;\n padding: var(--space-2) var(--space-3);\n color: var(--color-text-muted);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n font-style: italic;\n}\n/* A fact file: a name at the left, its value at the right. */\n.ds-facts {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-facts__item {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n border-bottom: var(--border-width) dotted var(--color-border-muted);\n}\n.ds-facts__item:last-child {\n border-bottom: 0;\n}\n.ds-facts__name {\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- hero: the title straight on the tile, no box ---------- */\n.ds-hero {\n padding: var(--space-3) 0 0;\n color: var(--color-text);\n text-align: center;\n}\n.ds-hero__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n margin: var(--space-4) 0;\n font-size: var(--text-large);\n}\n.ds-hero__action {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: var(--space-4);\n}\n.ds-hero__hint {\n margin: var(--space-4) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- page header: title and one line, a button at the right, a fading bar under ---------- */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-3) var(--space-4);\n}\n.ds-page-header::after {\n content: \"\";\n flex: none;\n width: 100%;\n height: var(--space-1);\n background: linear-gradient(90deg, var(--color-border-strong), transparent);\n}\n.ds-page-header__text {\n flex: 1;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-page-header__lead {\n margin: var(--space-1) 0 0;\n color: var(--color-heading-alt);\n font-style: italic;\n}\n.ds-page-header__action {\n flex: none;\n}\n\n/* ---------- table: striped rows with a line under each ---------- */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n background: var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n box-shadow: var(--shadow-panel);\n font-size: var(--text-base);\n}\n.ds-table__head {\n padding: var(--space-3) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-align: left;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n}\n.ds-table__cell {\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n text-align: left;\n vertical-align: top;\n}\n.ds-table__cell--num,\n.ds-table__head--num {\n text-align: right;\n}\n.ds-table__cell--num {\n color: var(--color-heading);\n font-family: var(--font-mono);\n}\n.ds-table__row--alt .ds-table__cell {\n background: var(--color-surface-alt);\n}\n.ds-table__cell--group {\n background: var(--color-surface-strong);\n border-bottom: 0;\n text-align: center;\n}\n.ds-table__desc {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-table__caption {\n caption-side: bottom;\n padding: var(--space-4) 0 0;\n color: var(--color-text);\n font-size: var(--text-small);\n text-align: center;\n}\n\n/* ---------- stats: one line of plaques, each a figure and its name ---------- */\n.ds-stat {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-3) var(--space-4);\n list-style: none;\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border);\n box-shadow: var(--shadow-panel);\n}\n.ds-stat__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-width: 0;\n}\n.ds-stat__value {\n padding: var(--space-1) var(--space-3);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-family: var(--font-mono);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-stat__label {\n font-size: var(--text-small);\n}\n\n/* ---------- list: dated updates, or signed entries ---------- */\n.ds-list {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n list-style: none;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n box-shadow: var(--shadow-panel);\n font-size: var(--text-base);\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: var(--size-date) minmax(0, 1fr);\n column-gap: var(--space-3);\n align-items: baseline;\n padding: var(--space-3) 0;\n border-bottom: var(--border-width) dotted var(--color-border-muted);\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n}\n.ds-list__meta {\n color: var(--color-heading-alt);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-list__body {\n min-width: 0;\n}\n.ds-list__more {\n margin: 0;\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n/* Guestbook entries: the name and where from, then the message. */\n.ds-list--entries .ds-list__item {\n display: block;\n}\n.ds-list__title {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-list__text {\n margin: var(--space-1) 0 0;\n}\n\n/* ---------- panel: a box of the altar, with a dark title strip ---------- */\n.ds-panel {\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-panel__body {\n padding: var(--space-3) var(--space-4);\n}\n.ds-panel__text {\n margin: 0 0 var(--space-3);\n}\n.ds-panel__text:last-child {\n margin: 0;\n}\n/* The web ring line: previous, random, next. */\n.ds-ring {\n display: flex;\n justify-content: space-between;\n margin: 0;\n padding: 0;\n list-style: none;\n font-weight: var(--weight-bold);\n}\n\n/* ---------- grid: framed thumbnails, a caption strip under each ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-5);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n min-width: 0;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n text-align: center;\n}\n.ds-grid__pic {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--size-thumb);\n background: var(--color-fill-1);\n color: var(--color-heading);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-grid__cell--2 .ds-grid__pic {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 .ds-grid__pic {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 .ds-grid__pic {\n background: var(--color-fill-4);\n}\n.ds-grid__pic svg {\n display: block;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-grid__title {\n margin: 0;\n padding: var(--space-2) var(--space-2) 0;\n font-weight: var(--weight-bold);\n}\n.ds-grid__text {\n margin: 0;\n padding: 0 var(--space-2) var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- tabs: a centred row of boxes, the current one inverted ---------- */\n.ds-tabs {\n display: flex;\n justify-content: center;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__item {\n display: flex;\n}\n.ds-tabs__tab {\n padding: var(--space-2) var(--space-5);\n background: var(--color-surface);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) var(--color-border);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-link-hover);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-color: var(--color-border-strong);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n\n/* ---------- sidebar: the list of chapters, in boxes ---------- */\n.ds-sidebar {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-sidebar__block {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n list-style: none;\n}\n.ds-sidebar__item {\n padding: var(--space-2) 0;\n}\n.ds-sidebar__item + .ds-sidebar__item {\n border-top: var(--border-width) dotted var(--color-border-muted);\n}\n.ds-sidebar__item.is-current {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* A bar that fades out at both ends, the usual divider. */\n.ds-rule.ds-rule--fade {\n height: var(--space-1);\n border: 0;\n background: linear-gradient(90deg, transparent, var(--color-border-strong), transparent);\n}\n\n/* ---------- footer ---------- */\n.ds-footer {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-6) 0 0;\n text-align: center;\n}\n.ds-footer .ds-rule {\n align-self: stretch;\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__item + .ds-footer__item::before {\n content: \"\\00b7\";\n padding: 0 var(--space-3);\n color: var(--color-text-muted);\n}\n.ds-footer__note {\n margin: 0;\n color: var(--color-heading-alt);\n font-style: italic;\n}\n.ds-footer__legal {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- views: one screen of the example site shows at a time ---------- */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* ---------- rule: the plain carved line ---------- */\n.ds-rule {\n box-sizing: border-box;\n width: 100%;\n height: 0;\n margin: 0 auto;\n border: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* ---------- under construction: a strip of diagonal stripes ---------- */\n.ds-construction {\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2);\n background: repeating-linear-gradient(-45deg, var(--color-notice) 0 var(--space-4), var(--color-notice-text) var(--space-4) calc(var(--space-4) * 2));\n border: var(--border-width) var(--border-style) var(--color-border);\n text-align: center;\n}\n.ds-construction__text {\n display: inline-block;\n padding: var(--space-1) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n}\n\n/* ---------- blink: a slow two-step dim, only when motion is welcome ---------- */\n@media (prefers-reduced-motion: no-preference) {\n .ds-blink {\n animation: ds-blink 1.6s steps(2, jump-none) infinite;\n }\n}\n@keyframes ds-blink {\n from { opacity: 1; }\n to { opacity: 0.6; }\n}\n\n/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited,\n.ds-link--quiet.is-visited {\n color: var(--color-link-quiet);\n font-size: var(--text-small);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--strong {\n font-weight: var(--weight-bold);\n}\n/* A link on a bar, a notice or another coloured fill takes that fill's text colour. */\n.ds-link--plain,\n.ds-link--plain:visited,\n.ds-link--plain:hover,\n.ds-link--plain.is-hover {\n color: inherit;\n text-decoration: underline;\n}\n.ds-links {\n margin: 0 0 var(--space-4);\n}\n/* The little drawing before an e-mail link or a download. */\n.ds-icon {\n display: inline-block;\n width: var(--text-large);\n height: var(--text-large);\n vertical-align: middle;\n color: var(--color-accent-alt);\n}\n.ds-icon svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n/* ---------- bullets: a link list with small square marks ---------- */\n.ds-bullets {\n margin: 0;\n padding: 0;\n list-style: none;\n text-align: left;\n}\n.ds-bullets__item {\n display: flex;\n align-items: baseline;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n}\n.ds-bullets__item::before {\n content: \"\";\n flex: none;\n width: var(--space-3);\n height: var(--space-3);\n background: var(--color-accent-alt);\n}\n.ds-bullets__item:nth-child(even)::before {\n background: var(--color-heading-alt);\n}\n.ds-bullets__text {\n min-width: 0;\n}\n\n/* ---------- prose ---------- */\n.ds-prose {\n min-width: 0;\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n line-height: var(--line-body);\n text-align: left;\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-5) 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n margin-top: 0;\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n color: var(--color-heading-alt);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n font-size: var(--text-h3);\n}\n.ds-prose p {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n padding: 0 0 0 var(--space-6);\n}\n.ds-prose li::marker {\n color: var(--color-accent-alt);\n}\n.ds-prose strong {\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-alt);\n font-family: var(--font-mono);\n font-size: var(--text-base);\n}\n.ds-prose__lead {\n color: var(--color-heading-alt);\n font-size: var(--text-large);\n font-style: italic;\n}\n/* A block of text to copy: a command line, a code, a key. */\n.ds-prose__code {\n margin: 0 0 var(--space-4);\n padding: var(--space-3);\n overflow: hidden;\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n white-space: pre-wrap;\n}\n\n/* ---------- buttons ---------- */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-button {\n display: inline-block;\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-1) var(--space-4);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) outset var(--color-button);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-transform: var(--ui-transform);\n text-decoration: none;\n transition: var(--transition);\n cursor: default;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-pressed {\n border-style: inset;\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-button-secondary);\n}\n.ds-button--large {\n padding: var(--space-2) var(--space-5);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n}\n/* Destructive action: the danger colour as the fill, the sheet colour as the label. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger);\n color: var(--color-canvas);\n border-color: var(--color-danger);\n font-weight: var(--weight-bold);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: var(--color-disabled);\n box-shadow: none;\n}\n\n/* ---------- form: labels at the left, fields at the right ---------- */\n.ds-form {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n column-gap: var(--space-3);\n row-gap: var(--space-3);\n align-items: baseline;\n margin: 0;\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n text-align: left;\n}\n.ds-form__label {\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n.ds-form__field {\n min-width: 0;\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-1) var(--space-2);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) inset var(--color-input-border);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n transition: var(--transition);\n}\n.ds-form__input {\n width: var(--size-field);\n max-width: 100%;\n}\n.ds-form__select {\n max-width: 100%;\n}\n.ds-form__textarea {\n display: block;\n width: var(--size-area);\n max-width: 100%;\n font-family: var(--font-mono);\n}\n.ds-form__input:focus-visible,\n.ds-form__select:focus-visible,\n.ds-form__textarea:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__check {\n appearance: none;\n box-sizing: border-box;\n width: var(--size-check);\n height: var(--size-check);\n margin: 0 var(--space-2) 0 0;\n padding: var(--space-1);\n vertical-align: middle;\n background-color: var(--color-input);\n border: var(--border-width) inset var(--color-input-border);\n border-radius: var(--radius-control);\n}\n/* The tick is a block of the field's text colour inside the field's own fill. */\n.ds-form__check:checked::before,\n.ds-form__check.is-checked::before {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n background-color: var(--color-input-text);\n}\n.ds-form__hint {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__error {\n display: block;\n color: var(--color-danger);\n font-weight: var(--weight-bold);\n}\n.ds-form__actions {\n grid-column: 2;\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n padding: var(--space-2) 0 0;\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n vertical-align: baseline;\n}\n/* A loud italic word with no box. */\n.ds-badge--text {\n padding: 0;\n background: transparent;\n color: var(--color-accent-alt);\n font-style: italic;\n}\n.ds-badge--count {\n padding: 0;\n background: transparent;\n color: var(--color-text-muted);\n font-weight: var(--weight-body);\n}\n/* Status labels: the status colour as the fill, the sheet colour as the word. */\n.ds-badge--success {\n background: var(--color-success);\n color: var(--color-canvas);\n}\n.ds-badge--warning {\n background: var(--color-warning);\n color: var(--color-canvas);\n}\n.ds-badge--danger {\n background: var(--color-danger);\n color: var(--color-canvas);\n}\n.ds-badges {\n display: block;\n padding: 0 0 var(--space-2);\n}\n\n/* ---------- notice ---------- */\n.ds-notices {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n.ds-notice {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n font-family: var(--font-body);\n font-size: var(--text-base);\n text-align: left;\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: var(--color-danger);\n}\n.ds-notice__label {\n font-weight: var(--weight-bold);\n}\n\n/* ---------- dialog: a message box in the page flow ---------- */\n.ds-dialog {\n position: static;\n box-sizing: border-box;\n width: var(--size-dialog);\n max-width: 100%;\n margin: 0 auto;\n padding: 0;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n font-family: var(--font-body);\n font-size: var(--text-base);\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-1) var(--space-3);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-align: left;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n}\n.ds-dialog__body {\n margin: 0;\n padding: var(--space-4) var(--space-4) var(--space-3);\n text-align: center;\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: center;\n gap: var(--space-3);\n padding: 0 var(--space-3) var(--space-4);\n}\n\n/* ---------- empty state ---------- */\n.ds-empty {\n padding: var(--space-4);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-base);\n text-align: center;\n}\n.ds-empty__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-3);\n}\n\n/* ---------- pagination ---------- */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: baseline;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n}\n.ds-pagination__label {\n color: var(--color-heading-alt);\n font-style: italic;\n font-weight: var(--weight-body);\n}\n.ds-pagination__link {\n color: var(--color-link);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-link-hover);\n}\n.ds-pagination__link.is-current {\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-decoration: none;\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n text-decoration: none;\n}\n\n/* ---------- breadcrumb: \"you are here\", small ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"\\00bb\";\n padding: 0 var(--space-3);\n color: var(--color-accent-alt);\n font-weight: var(--weight-bold);\n}\n.ds-breadcrumb__item.is-current {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: a shrine to a game, 1996 to 2001: specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n
\n\n
\n\n
\n
\n\n \n\n
\n
\n

The Emberfall Shrine

\n

A walkthrough of all three discs, every item and where it hides, and more screenshots than my free web space really allows.

\n
\n Enter the Walkthrough\n Sign the Guestbook\n
\n

Last updated 6 August 2000. Beware: spoilers from disc 2 onward!

\n
\n\n
    \n
  • 041277 pilgrims
    • \n
  • 118 screenshots
    • \n
  • 264 guestbook entries
    • \n
\n\n
\n

Updates

\n \n
\n\n
\n

Newest Screenshots

\n
\n
\n \n

Ash Coast

\n

coast1.jpg, 28 K

\n
\n
\n \n

Cinder Keep

\n

keep.jpg, 34 K

\n
\n
\n \n

Ysolde

\n

ysolde.gif, 19 K

\n
\n
\n \n

World Map

\n

map.gif, 46 K

\n
\n
\n
\n\n

Under construction: the walkthrough for disc 3

\n
\n\n
\n
\n\n
\n
\n\n
\n \n
\n
\n

Chapter 4: Cinder Keep

\n

From the drawbridge to the top of the tower, with every chest.

\n
\n
\n See the Item List\n
\n
\n
\n\n
\n \n\n
\n

Getting in

\n

Save at the well before you cross the bridge!

\n

The drawbridge is up and nobody will lower it for you. Walk round to the east wall, where the ivy is thick, and climb. You will need the Iron Hook from chapter 2; if you sold it, the pedlar on the Salt Road sells it back at three times the price.

\n

The courtyard

\n
    \n
  • the chest by the stable holds 300 coins;
    • \n
  • the chest behind the forge is a trap, leave it;
    • \n
  • talk to the cook twice for the Cellar Key.
    • \n
\n

The door with four lamps

\n

Light the lamps in the order of the banners in the hall: red, white, white, gold. If you get it wrong the room fills with guards. In the first version of the game the code UP UP L1 R1 at the door skips the puzzle.

\n

How the links look

\n

\n A link you have not followed,\n one you have visited,\n one under the pointer,\n one as you click it,\n a bold link and\n a small link.\n

\n

The tower

\n

Four floors and one save point, on the third. The Warden waits at the top; his chapter is the next page.

\n
\n
\n\n
\n\n
    \n
  1. Disc 2, chapter:
    2. \n
  2. << Back
    3. \n
  3. 1
    4. \n
  4. 2
    5. \n
  5. 3
    6. \n
  6. 4
    7. \n
  7. 5
    8. \n
  8. 6
    9. \n
  9. Next >>
    10. \n
\n\n
\n
\n\n
\n
\n\n
\n \n
\n
\n

Gallery

\n

Click a picture to see it full size. They are small files, be patient.

\n
\n
\n Send Me Your Fan Art\n
\n
\n \n
\n\n
\n
\n \n

Ash Coast

\n

coast1.jpg, 28 K

\n
\n
\n \n

Cinder Keep

\n

keep.jpg, 34 K

\n
\n
\n \n

The Four Lamps

\n

lamps.jpg, 22 K

\n
\n
\n \n

The Night Sky

\n

sky.jpg, 31 K

\n
\n
\n \n

The Salt Road

\n

road.jpg, 26 K

\n
\n
\n \n

Lanternfall

\n

lantern.jpg, 37 K

\n
\n
\n \n

The Warden

\n

warden.jpg, 40 K

\n
\n
\n \n

The Menu

\n

menu.gif, 12 K

\n
\n
\n\n
    \n
  1. 118 screenshots, page:
    2. \n
  2. << Back
    3. \n
  3. 1
    4. \n
  4. 2
    5. \n
  5. 3
    6. \n
  6. Next >>
    7. \n
\n\n
\n

Fan Art

\n
\n

Nothing here yet!

\n

Nobody has sent a drawing so far. If you have one, I will put it here with your name under it.

\n Send Me Your Fan Art\n
\n
\n\n
\n
\n\n
\n
\n\n
\n \n
\n
\n

Item List: Weapons

\n

Where each one is found, what it costs and how hard it hits.

\n
\n
\n Back to the Walkthrough\n
\n
\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n Key: SHOP you can buy it CHEST found once only MISSABLE gone if you leave the chapter NEW! added this month\n Prices are from the shop in Lanternfall. Tell me if one is wrong\n
WeaponFoundHowAttackPrice
Iron Hook Also climbs ivy. Do not sell it!Disc 1, chapter 2CHEST12150
Lamplighter's Pole Reaches two squares.LanternfallSHOP18420
Cinder Blade NEW! Burns what it cuts.Cinder Keep, towerMISSABLE310
Salt Bow Strong against anything with wings.The Salt RoadSHOP24900
Warden's Maul Slow, and worth the wait.After the WardenCHEST470
Disc 3 weapons are not listed yet. Send me what you have found!
\n\n
\n
\n\n
\n
\n\n
\n \n
\n
\n

Guestbook

\n

264 pilgrims have signed. Leave your mark!

\n
\n
\n Back to the Shrine\n
\n
\n
\n\n
    \n
  • Ysolde4ever found you through the ring, 04 Aug 00\n

    The four lamps had me stuck for a week. Thank you thank you thank you.

    • \n
  • R. Abara just surfed in, 22 Jul 00\n

    Best Emberfall page on the web. The Cinder Blade is on floor 3, not floor 2. Fixed, thanks!

    • \n
\n\n
\n

Please note: no tags in your message, and mark your spoilers for disc 3.

\n

Oops! Your entry was not added. Please type a name and try again.

\n
\n\n
\n \n
\n \n A name is needed, even a made-up one.\n
\n \n
\n \n (not shown on the page)\n
\n \n
\n \n
\n Also:\n
\n \n
\n \n
\n \n
\n
\n \n \n \n \n
\n
\n\n
\n

Delete your entry?

\n

Your entry of 4 August will be taken out of the guestbook. This cannot be undone!

\n
\n \n \n
\n
\n\n
\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.home-pages-90s.docs.s06.p05.t06.u07\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"home-pages-90s\",\n \"years\": [\n 1996,\n 2001\n ]\n },\n \"archetype\": \"docs\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 800,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-hp-6567\",\n \"short\": \"v1-hp-6567\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #e8d8b0;\n --color-canvas: #f8f0dc;\n --color-surface: #fffaeb;\n --color-surface-alt: #f0e4c4;\n --color-surface-strong: #dcc898;\n --color-bar: #006633;\n --color-bar-text: #ffffcc;\n --color-bar-alt: #7a1f1f;\n --color-bar-alt-text: #ffe9b0;\n --color-inverse: #3b2a14;\n --color-inverse-text: #ffd766;\n --color-text: #33200c;\n --color-text-muted: #6b5a3c;\n --color-heading: #7a1f1f;\n --color-heading-alt: #006633;\n --color-link: #0000cc;\n --color-link-quiet: #7a4a00;\n --color-link-visited: #663399;\n --color-link-hover: #cc3300;\n --color-link-active: #ff0000;\n --color-border: #a08850;\n --color-border-strong: #5c4420;\n --color-border-muted: #d8c8a0;\n --color-accent: #cc3300;\n --color-accent-text: #ffffff;\n --color-accent-alt: #9a6b00;\n --color-fill-1: #e4ecc8;\n --color-fill-2: #f4d8b8;\n --color-fill-3: #d8e4e4;\n --color-fill-4: #f0e0a0;\n --color-button: #d8c090;\n --color-button-text: #33200c;\n --color-button-hover-text: #7a1f1f;\n --color-button-secondary: #5c7a3c;\n --color-button-secondary-text: #ffffff;\n --color-input: #ffffff;\n --color-input-text: #33200c;\n --color-input-border: #8a7448;\n --color-disabled: #e0d8c4;\n --color-disabled-text: #9a9078;\n --color-danger: #b00000;\n --color-danger-surface: #fbe4dc;\n --color-success: #2e6b00;\n --color-warning: #b35900;\n --color-notice: #fff6b8;\n --color-notice-text: #33200c;\n --color-focus: #cc3300;\n --color-shadow: #b8a070;\n --color-overlay: rgba(59, 42, 20, 0.6);\n}\n\n/* @part type */\n:root {\n --font-body: \"Trebuchet MS\", \"Lucida Grande\", Arial, sans-serif;\n --font-heading: Impact, Haettenschweiler, \"Arial Narrow Bold\", sans-serif;\n --font-ui: \"Trebuchet MS\", \"Lucida Grande\", Arial, sans-serif;\n --font-mono: Fixedsys, \"Lucida Console\", \"Courier New\", monospace;\n --text-base: 12px;\n --text-small: 10px;\n --text-ui: 11px;\n --text-large: 14px;\n --text-display: 52px;\n --text-h1: 34px;\n --text-h2: 22px;\n --text-h3: 15px;\n --line-body: 1.45;\n --line-heading: 1.1;\n --line-display: 1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 400;\n --weight-display: 400;\n --weight-ui: 700;\n --heading-transform: lowercase;\n --heading-tracking: 1px;\n --display-tracking: 3px;\n --figure-shift: -0.08em;\n --ui-transform: lowercase;\n --link-decoration: underline;\n --link-decoration-hover: underline overline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 2px;\n --border-width-strong: 4px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: inset 0 0 0 2px var(--color-shadow);\n --shadow-control: inset 0 0 0 1px var(--color-shadow);\n --shadow-control-hover: inset 0 0 0 1px var(--color-focus);\n --shadow-control-pressed: inset 2px 2px 0 var(--color-shadow);\n --shadow-dialog: inset 0 0 0 2px var(--color-shadow), 0 0 0 2px var(--color-shadow);\n --shadow-text: 2px 2px 0 var(--color-shadow);\n --fill-page: repeating-conic-gradient(from 45deg, color-mix(in srgb, var(--color-surface-alt) 45%, transparent) 0 25%, transparent 0 50%) 0 0 / 44px 44px, var(--color-page);\n --fill-bar: linear-gradient(90deg, color-mix(in srgb, var(--color-bar) 70%, black), var(--color-bar) 50%, color-mix(in srgb, var(--color-bar) 70%, black));\n --fill-bar-alt: linear-gradient(90deg, color-mix(in srgb, var(--color-bar-alt) 70%, black), var(--color-bar-alt) 50%, color-mix(in srgb, var(--color-bar-alt) 70%, black));\n --fill-inverse: linear-gradient(135deg, var(--color-inverse) 0 50%, color-mix(in srgb, var(--color-inverse) 86%, black) 50%);\n --fill-accent: linear-gradient(90deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 72%, black));\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(90deg, var(--color-button), color-mix(in srgb, var(--color-button) 60%, white) 50%, var(--color-button));\n --fill-button-hover: linear-gradient(90deg, color-mix(in srgb, var(--color-button) 60%, white), var(--color-button) 50%, color-mix(in srgb, var(--color-button) 60%, white));\n --fill-button-secondary: linear-gradient(90deg, var(--color-button-secondary), color-mix(in srgb, var(--color-button-secondary) 70%, white) 50%, var(--color-button-secondary));\n --fill-input: var(--color-input);\n --focus-ring: 2px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }