{ "id": "v1-wk-8122", "long_id": "v1.wiki-2000s.landing.s08.p01.t02.u02", "name": "Wiki hosting front page, centred sheet and create box, 2003 to 2010", "era": { "slug": "wiki-2000s", "code": "wk", "name": "Wiki", "years": [ 2003, 2010 ], "description": "Collaborative reference sites of 2003 to 2010: a narrow column of links at the left, tabs above a white article sheet, blue and red links, grey bordered boxes for contents and facts, small sans text and tables of plain data." }, "archetype": "landing", "mode": "mix", "viewport": { "width": 1024, "fluid": true }, "summary": "This is the front door of a wiki hosting service of the later 2000s, the kind that promised a class, a club or a team its own wiki in a minute: one rounded white sheet centred on a strongly coloured page, with a dark strip, the name and a short menu of rounded items at the top. The front page is a pitch, not a wiki page: an inverted band with a headline, three ticked promises and a small \"create your wiki\" form, then three large figures, four tinted reason cards and a list of busy wikis beside what people say; the inner pages are a tour, a table of plans, a directory with topics at the left and the sign-up form. Text is 13px Arial with bold geometric sans headings and underlined blue links, bars and buttons are glossy two-step gradients, corners are 5 to 10px and boxes cast a short soft shadow, with no motion.", "url": "https://chrono.skin/s/v1-wk-8122", "preview_url": "https://chrono.skin/s/v1-wk-8122/specimen.html", "files": { "STYLE.md": "# Wiki hosting front page, centred sheet and create box, 2003 to 2010\n\n## Summary\n\nThis is the front door of a wiki hosting service of the later 2000s, the kind that promised a class, a club or a team its own wiki in a minute: one rounded white sheet centred on a strongly coloured page, with a dark strip, the name and a short menu of rounded items at the top. The front page is a pitch, not a wiki page: an inverted band with a headline, three ticked promises and a small \"create your wiki\" form, then three large figures, four tinted reason cards and a list of busy wikis beside what people say; the inner pages are a tour, a table of plans, a directory with topics at the left and the sign-up form. Text is 13px Arial with bold geometric sans headings and underlined blue links, bars and buttons are glossy two-step gradients, corners are 5 to 10px and boxes cast a short soft shadow, with no motion.\n\n## Layout\n\n- The page is fluid. `--size-page` is `86%`: the sheet `.ds-page__sheet` is centred and the page colour shows at both sides, `--space-5` (16px) above and `--space-7` (36px) below. Designed at 1024px; it does not reflow for phones.\n- Everything is inside the sheet, which clips to `--radius-page`. From the top: the header `.ds-nav` (the strip `.ds-nav__strip` in the bar fill with a tagline and the sign-in links; then `.ds-nav__top`, on the sheet, with the brand at the left and the menu `.ds-nav__menu` at the right over a hairline); the current view; the footer band in the secondary bar fill. No text sits on the page colour. There is no side column of site links and no tab row above the sheet.\n- Views. The specimen is a five-screen example hosting service; the menu has one item per view and the current one is a pill in the accent fill. `home` is the pitch: the band `.ds-hero` (a fluid column and the `--size-create`, 318px, create box) from edge to edge of the sheet, then three figures, four reason cards and a 3 to 2 pair of the busy list and a quotes panel. `tour` explains a wiki in three numbered steps beside a `--size-side` (214px) column of panels. `plans` is a notice and the table of plans. `wikis` is the directory: topic boxes at the left, then tabs, the list, paging and an empty \"your wikis\" section. `create` is the sign-up form with two notices and the start-over confirmation, beside a column of panels.\n- Inner pages (every view but `home`) start with `.ds-breadcrumb`, then `.ds-page-header` in place of the band (title and one muted line at the left, the action at the right, no rule), then `.ds-tabs` when the page has several faces, then the working blocks. A view's blocks are in `.ds-view__body`, `--space-5` apart with `--space-6` (24px) at the sides. `.ds-layout` puts a narrow column at the right, `.ds-layout--side` at the left; `.ds-stack` is a column of blocks `--space-4` apart.\n- Form labels sit above their fields and `.ds-form__pair` puts two rows side by side; a lone input may take `--size-field` (300px); a text area is `--size-editor` (84px) tall. A dialog is `--size-dialog` (430px) wide, centred in a band in the flow.\n- Spacing scale: `--space-1` 3px, `--space-2` 5px, `--space-3` 8px, `--space-4` 12px, `--space-5` 16px, `--space-6` 24px, `--space-7` 36px.\n - `--space-1`: vertical padding of buttons, menu items, tabs and inputs; gap under a label.\n - `--space-2`: vertical padding of table cells, list rows and the strip.\n - `--space-3`: gap between buttons, between an icon and its text, padding of notices.\n - `--space-4`: padding of cards and panels, gap between cards and between stacked blocks.\n - `--space-5`: gap between the blocks of a view, padding of the form and the create box.\n - `--space-6`: side padding of the sheet's regions, gap between columns.\n - `--space-7`: gap inside the band, left padding of the band, space under the sheet.\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\n- Text on fills follows the era's conventions (see the first layout of this era): no text on `--color-page`; body, heading and link colours on the canvas, the three surfaces, `--fill-panel` and the four fills; only `--color-bar-text` on `--fill-bar`, `--color-bar-alt-text` on `--fill-bar-alt`, `--color-inverse-text` on `--fill-inverse`, `--color-accent-text` on `--fill-accent`, `--color-notice-text` on `--color-notice`, and `--color-text` on `--color-danger-surface`.\n- `--color-page` is charcoal with fine scan lines from `--fill-page`; the sheet `--color-canvas` is white. `--color-surface` fills the navigation boxes, the profile box and alternate news rows; `--color-surface-alt` (lavender) the breadcrumb, label cells, idle tabs, counters and alternate table rows; `--color-surface-strong` (pale blue) letter heads and plain panel titles.\n- `--fill-bar` (near black, shaded) with amber `--color-bar-text` is the section bar, table heads, the profile title, the current tab, the dialog title, tile icons and the footer. `--fill-bar-alt` (deep blue) with white `--color-bar-alt-text` titles every navigation box, panel and form and the group strips of the profile box. `--fill-inverse` (dark maroon) with `--color-inverse-text` is the banner.\n- `--color-heading` (maroon) is for page and section titles and figures, `--color-heading-alt` (blue) for third-level headings and news dates. Links are `--color-link` (blue), tool links `--color-link-quiet` (olive), hover `--color-link-hover` (burnt orange); a missing page is `.ds-link--new` in `--color-danger`.\n- `--color-border-strong` (tan) frames the sheet, the header, the boxes and the buttons and rules the headings; `--color-border` (grey) is for ordinary box outlines and dotted row rules; `--color-border-muted` for panel feet.\n- `--color-accent` (amber) with dark `--color-accent-text` marks the current bar item, the current page number and badges; `--color-accent-alt` is the left bar of an information notice.\n- `--color-fill-1` to `--color-fill-4` are the lavender, cream, sage and sand of the browse tiles; the welcome box is `--color-fill-1`.\n- Body and controls are `--font-body` / `--font-ui` (Verdana); headings, box titles, the wordmark and tile names are `--font-heading` (Trebuchet MS), bold. `--font-mono` is for code.\n- Sizes: `--text-base` 11px; `--text-small` and `--text-ui` 10px for meta, bar items, tabs, buttons and badges; `--text-large` 13px for the lead, panel titles and tile names; `--text-h3` 12px, `--text-h2` 15px, `--text-h1` 20px, `--text-display` 22px for the wordmark and the welcome title. `--weight-ui` is 700.\n- Bars, buttons and the accent are short vertical gradients from the surface set; panels, boxes and the sheet are flat. Row rules inside boxes are `dotted`.\n- One-off choices outside the token set: the dividers between bar items are `--color-bar-text` at 25%; the notice's left bar is `calc(var(--border-width-strong) * 2)`; status badges are an 18 to 26% `color-mix()` of the status colour over `--color-surface`; `dotted` is used for row rules and the empty state instead of `--border-style`.\n\n## Components\n\n- `.ds-page`: on ``. `.ds-page__sheet` is the centred sheet. `.ds-view` sections hold a `.ds-view__body`; `.ds-stack` is a column of blocks.\n- `.ds-nav`: the header. `.ds-nav__strip` is the dark strip with `.ds-nav__account` and its underlined `.ds-nav__aux` links; `.ds-nav__top` holds the brand and `.ds-nav__menu`, whose `.ds-nav__link` items lead to views and take `is-current`.\n- `.ds-brand`: the mark and name in a row. `.ds-brand__mark` is a tile 1.35 times `--text-display`, dressed like the primary button (`--fill-button`, `--color-button-text`, a `--color-border-strong` outline, `--radius-control`, `--shadow-control`); `.ds-brand__name` is in the heading colour. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo: replace both, keep the tile.\n- `.ds-hero`: the band of the front page: `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__points` of `.ds-hero__point` lines with a `.ds-hero__tick`, the `.ds-hero__more` line with `.ds-hero__link`, and the create box `.ds-hero__box` (a sheet-coloured form with `.ds-hero__boxtitle`, the `.ds-hero__address` field and `.ds-hero__suffix`, the main button and `.ds-hero__note`). Only the front page has it.\n- `.ds-page-header`: the head of an inner page: `.ds-page-header__title` and `.ds-page-header__desc` at the left, `.ds-page-header__action` at the right.\n- `.ds-breadcrumb`: the small trail above the title, with `.ds-breadcrumb__link`, `.ds-breadcrumb__sep` and `.ds-breadcrumb__current`.\n- `.ds-tabs`: rounded tabs on a thick bar-coloured rule. `.ds-tabs__tab` with `is-current` (bar fill, bar text).\n- `.ds-prose`: explanatory text: h1, h2 (may start with a round `.ds-step` number), h3, p, ul, ol, strong, code. `.ds-sample` shows markup and its result in two `.ds-sample__side` halves (`--typed` for the markup), each with a `.ds-sample__label`.\n- `.ds-link`: every link in text. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--new` for a missing page, `.ds-link--quiet` for outside links, `.ds-link--strong` for bold.\n- `.ds-stat`: the row; three `.ds-stat__item` figures between two faint rules, each a large `.ds-stat__value` and a `.ds-stat__label` on one line.\n- `.ds-grid`: four reason cards in a row, each `.ds-grid__cell` (`--2`, `--3`, `--4` for the other fills) with a round `.ds-grid__icon`, a `.ds-grid__name` and `.ds-grid__text`.\n- `.ds-columns`: a 3 to 2 pair of columns. `.ds-layout` and `.ds-layout--side`: a working column and a narrow one. `.ds-section` is a heading on a hairline; `.ds-legend` a small muted line.\n- `.ds-list`: wikis: `.ds-list__item` with a square `.ds-list__initial`, a bold `.ds-list__title` link over a `.ds-list__meta` line, and a `.ds-list__count` at the right.\n- `.ds-panel`: a rounded card with a `.ds-panel__title` and a `.ds-panel__body`; `.ds-panel__line` is a paragraph, `.ds-panel__quote` and `.ds-panel__by` a quotation and its author, `.ds-panel__items` a list.\n- `.ds-sidebar`: the column of topic boxes: `.ds-sidebar__block`, `.ds-sidebar__title`, `.ds-sidebar__list`, and `.ds-sidebar__item` rows with a `.ds-sidebar__count`.\n- `.ds-table`: plans side by side: a bar-coloured head, row headings in bold, `.ds-table__num` for figures, `.ds-table__row--alt` for alternate rows and `.ds-table__row--foot` for the row of buttons.\n- `.ds-badge`: a small accent label. `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger` are tinted status labels with a 1px outline in the status colour.\n- `.ds-notice`: a rounded message outlined in `--color-warning` with a round `.ds-notice__mark`; `.ds-notice--error` is outlined in `--color-danger` on `--color-danger-surface`. `.ds-notice__title` is the bold first phrase, `.ds-notice__link` an underlined link in the text colour.\n- `.ds-pagination`: centred rounded steps: `.ds-pagination__label`, `.ds-pagination__link` with `is-current` and `is-disabled`.\n- `.ds-button`: primary action. `.ds-button--secondary` is the pale button, `.ds-button--danger` the destructive one (error text on the error surface), `.ds-button--large` the create button, `.ds-button--small` for a box. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`.\n- `.ds-form`: a boxed form. `.ds-form__pair` holds two `.ds-form__row` columns; a row is a `.ds-form__label`, a `.ds-form__input` (`--large`, `--field`, `--text` for the text area; `is-invalid`, `is-disabled`) and a `.ds-form__hint` or `.ds-form__error`. `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions` is the button row, with `.ds-form__spacer` pushing the destructive button to the right.\n- `.ds-dialog`: a confirmation box in the page flow inside `.ds-dialog__backdrop`: `.ds-dialog__title`, `.ds-dialog__body`, `.ds-dialog__text`, `.ds-dialog__actions`. It never floats over the page.\n- `.ds-empty`: a dashed box with `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-footer`: the pale band that closes the sheet: `.ds-footer__text` and a `.ds-footer__row` of underlined `.ds-footer__link` items.\n- `ds-accordion` (with `__summary`, `__body`): a collapsible box, a `
` section for contents, tips or rules.\n- `ds-menu` (with `__summary`, `__list`, `__item`): a page-actions or language drop-down, a `
` opened by click.\n- `ds-tooltip` (with `__tip`): a small hint box on a link, shown on hover or focus.\n- `ds-progress` (inside `ds-meter`): a native progress bar for completeness or a drive.\n\n## Never\n\n- `content-width >= 60%`: the sheet takes most of the window.\n- `font-size <= 22px`: the wordmark and the welcome title, 22px, are the largest text.\n- `font-size >= 10px`: meta text and controls are 10px; nothing is smaller.\n- `font-families <= 3`: Verdana, Trebuchet MS for headings, monospace for code.\n- `letter-spacing <= 1px`: only the wordmark is tracked, by 1px.\n- `uppercase-text <= 0%`: no text is transformed to uppercase.\n- `border-radius <= 0px`: no reference has a rounded corner in CSS; every box is square.\n- `box-shadow = none`: no box shadow was measured in any reference.\n- `text-shadow = none`: no text shadow was measured in any reference.\n- `transition = none`: hover states switch at once.\n- `animation = none`: nothing moves.\n- `border-width <= 6px`: borders are 1px, edges 3px, and only the top of the sheet and the left bar of a notice reach 6px.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a card from `.ds-grid__cell` or `.ds-panel`, a box of links from `.ds-sidebar__block`, a message from `.ds-notice`, a row of things from `.ds-list__item`. Build it as a 1px `--color-border` outline on `--color-surface` or one of the four fills with `--radius-panel` and `--shadow-panel`, keep text on fills as the conventions above say, and use tokens only: no raw colours or lengths, no transition, no font size outside the type tokens, and `--space-5` as the gap to the next block.\n", "components.css": "/* Layout tokens (structure part). Widths, gaps and paddings measured on the\n front pages of wiki hosting services captured 2006 to 2009. */\n:root {\n --size-page: 86%;\n --size-create: 318px;\n --size-side: 214px;\n --size-label: 150px;\n --size-field: 300px;\n --size-editor: 84px;\n --size-dialog: 430px;\n --space-1: 3px;\n --space-2: 5px;\n --space-3: 8px;\n --space-4: 12px;\n --space-5: 16px;\n --space-6: 24px;\n --space-7: 36px;\n}\n\n/* ---------- shell: one centred sheet with the page colour at both sides ---------- */\n.ds-page {\n margin: 0;\n padding: var(--space-5) 0 var(--space-7);\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__sheet {\n width: var(--size-page);\n box-sizing: border-box;\n margin: 0 auto;\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n overflow: hidden;\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.ds-view__body {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n padding: var(--space-5) var(--space-6) var(--space-6);\n}\n.ds-stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n min-width: 0;\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 text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n/* A link to a page that does not exist yet. */\n.ds-link--new,\n.ds-link--new:visited,\n.ds-link--new.is-visited {\n color: var(--color-danger);\n}\n.ds-link--strong {\n font-weight: var(--weight-bold);\n}\n\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-breadcrumb__sep {\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__current {\n color: var(--color-text);\n font-weight: var(--weight-bold);\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-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n}\n/* Status labels: a tint of the status colour over the surface, body text,\n and the status colour as the outline. */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n color: var(--color-text);\n font-weight: var(--weight-body);\n border: var(--border-width) var(--border-style) var(--color-success);\n}\n.ds-badge--success {\n background: color-mix(in srgb, var(--color-success) 18%, var(--color-surface));\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 22%, var(--color-surface));\n border-color: var(--color-warning);\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface));\n border-color: var(--color-danger);\n}\n\n/* ---------- buttons ---------- */\n.ds-button {\n display: inline-block;\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-1) var(--space-5);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\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-bold);\n line-height: var(--line-body);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n transition: var(--transition);\n cursor: pointer;\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-active {\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--large {\n padding: var(--space-2) var(--space-6);\n font-size: var(--text-large);\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 text-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n border-color: var(--color-accent);\n}\n/* Destructive action: the error pair. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: var(--color-danger);\n text-shadow: none;\n}\n.ds-button--small {\n padding: 0 var(--space-3);\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-text);\n box-shadow: none;\n text-shadow: none;\n cursor: default;\n}\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* ---------- dialog: a confirmation box in the page flow ---------- */\n.ds-dialog__backdrop {\n padding: var(--space-6);\n background: var(--color-overlay);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-dialog {\n width: var(--size-dialog);\n max-width: 100%;\n box-sizing: border-box;\n margin: 0 auto;\n background: var(--color-canvas);\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}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-2) var(--space-5) var(--space-3);\n background: var(--fill-bar);\n color: var(--color-bar-text);\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 text-shadow: var(--shadow-text);\n}\n.ds-dialog__body {\n padding: var(--space-5);\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-5);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-3);\n}\n\n/* ---------- empty state ---------- */\n.ds-empty {\n padding: var(--space-5) var(--space-6);\n background: var(--color-surface);\n border: var(--border-width) dashed var(--color-border-strong);\n border-radius: var(--radius-panel);\n text-align: center;\n}\n.ds-empty__title {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n color: var(--color-text-muted);\n}\n\n/* ---------- nav: a dark strip, then the name and the menu on the sheet ---------- */\n.ds-nav {\n display: block;\n}\n.ds-nav__strip {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-1) var(--space-5);\n margin: 0;\n padding: var(--space-2) var(--space-6);\n list-style: none;\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-size: var(--text-small);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__account {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__aux {\n color: var(--color-bar-text);\n text-decoration: underline;\n}\n.ds-nav__top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-4) var(--space-6);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n/* The mark is a tile dressed like the primary button; the name sits beside it\n on the sheet. */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-heading);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: calc(var(--text-display) * 1.35);\n height: calc(var(--text-display) * 1.35);\n box-sizing: border-box;\n background: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 70%;\n height: 70%;\n}\n.ds-brand__name {\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}\n.ds-nav__menu {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n align-items: center;\n gap: var(--space-1) var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-1) var(--space-4);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n color: var(--color-link-hover);\n border-color: var(--color-border);\n}\n.ds-nav__link.is-current {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-border-strong);\n}\n/* The current view's item, and the home item when no view is named. */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-border-strong);\n}\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-border-strong);\n}\n.ds-page:has(#tour:target) .ds-nav__link[href=\"#tour\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-border-strong);\n}\n.ds-page:has(#plans:target) .ds-nav__link[href=\"#plans\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-border-strong);\n}\n.ds-page:has(#wikis:target) .ds-nav__link[href=\"#wikis\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-border-strong);\n}\n.ds-page:has(#create:target) .ds-nav__link[href=\"#create\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-border-strong);\n}\n\n/* ---------- hero: an inverted band with the pitch and the create box ---------- */\n.ds-hero {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-create);\n gap: var(--space-7);\n align-items: center;\n padding: var(--space-6) var(--space-6) var(--space-6) var(--space-7);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-accent);\n}\n.ds-hero__title {\n margin: 0;\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}\n.ds-hero__lead {\n margin: var(--space-3) 0 0;\n font-size: var(--text-large);\n}\n.ds-hero__points {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n margin: var(--space-4) 0 0;\n padding: 0;\n list-style: none;\n}\n.ds-hero__point {\n display: flex;\n align-items: baseline;\n gap: var(--space-3);\n}\n.ds-hero__tick {\n flex: none;\n width: var(--text-base);\n height: var(--text-base);\n align-self: center;\n}\n.ds-hero__more {\n margin: var(--space-4) 0 0;\n}\n.ds-hero__link {\n color: var(--color-inverse-text);\n font-weight: var(--weight-bold);\n text-decoration: underline;\n}\n/* The create box: a small form on the sheet colour inside the band. */\n.ds-hero__box {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-4) var(--space-5) var(--space-5);\n background: var(--color-canvas);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n}\n.ds-hero__boxtitle {\n margin: 0;\n color: var(--color-heading);\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.ds-hero__address {\n display: flex;\n align-items: baseline;\n gap: var(--space-2);\n}\n.ds-hero__suffix {\n flex: none;\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n}\n.ds-hero__note {\n margin: 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- stats: three large figures divided by rules ---------- */\n.ds-stat {\n display: flex;\n margin: 0;\n padding: var(--space-2) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-stat__item {\n display: flex;\n flex: 1 1 0;\n justify-content: center;\n align-items: baseline;\n gap: var(--space-3);\n padding: 0 var(--space-4);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item:first-child {\n border-left: 0;\n}\n.ds-stat__value {\n margin: 0;\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-heading);\n letter-spacing: var(--display-tracking);\n}\n.ds-stat__label {\n color: var(--color-text-muted);\n text-transform: var(--ui-transform);\n}\n\n/* ---------- grid: four reasons, one tinted card each ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-grid__cell {\n padding: var(--space-4) var(--space-4) var(--space-5);\n background: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n.ds-grid__cell--2 {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 {\n background: var(--color-fill-4);\n}\n.ds-grid__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--text-h1) * 1.6);\n height: calc(var(--text-h1) * 1.6);\n margin: 0 0 var(--space-3);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n}\n.ds-grid__icon svg {\n display: block;\n width: 56%;\n height: 56%;\n}\n.ds-grid__name {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\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}\n.ds-grid__text {\n margin: 0;\n}\n\n/* ---------- columns ---------- */\n.ds-columns {\n display: grid;\n grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);\n gap: var(--space-6);\n align-items: start;\n}\n/* A working column beside a narrow one: the narrow one at the right, or with\n the modifier at the left. */\n.ds-layout {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-side);\n gap: var(--space-6);\n align-items: start;\n}\n.ds-layout--side {\n grid-template-columns: var(--size-side) minmax(0, 1fr);\n}\n\n/* ---------- section heading ---------- */\n.ds-section {\n margin: 0;\n padding: 0 0 var(--space-1);\n color: var(--color-heading);\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.ds-legend {\n margin: 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- list: wikis, each with an initial, a line of text and a count ---------- */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr) auto;\n column-gap: var(--space-4);\n align-items: center;\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n}\n.ds-list__initial {\n display: flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--text-base) * 2.4);\n height: calc(var(--text-base) * 2.4);\n background: var(--color-surface-alt);\n color: var(--color-heading-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n line-height: 1;\n}\n.ds-list__title {\n font-weight: var(--weight-bold);\n}\n.ds-list__meta {\n display: block;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-list__count {\n font-size: var(--text-small);\n color: var(--color-text-muted);\n text-align: right;\n white-space: nowrap;\n}\n\n/* ---------- sidebar: boxes of topics ---------- */\n.ds-sidebar {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n.ds-sidebar__block {\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n overflow: hidden;\n}\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-1) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\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-body);\n text-transform: var(--heading-transform);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-1) var(--space-4) var(--space-2);\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-sidebar__item:first-child {\n border-top: 0;\n}\n.ds-sidebar__count {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- panel: a rounded card with a title ---------- */\n.ds-panel {\n padding: var(--space-4) var(--space-5);\n background: var(--fill-panel);\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 0 var(--space-2);\n color: var(--color-heading-alt);\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}\n.ds-panel__body {\n display: block;\n}\n.ds-panel__line {\n margin: 0 0 var(--space-2);\n}\n.ds-panel__quote {\n margin: 0 0 var(--space-1);\n padding: 0 0 0 var(--space-4);\n border-left: var(--border-width-strong) var(--border-style) var(--color-accent);\n font-style: italic;\n}\n.ds-panel__by {\n margin: 0 0 var(--space-4);\n padding: 0 0 0 var(--space-4);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-panel__items {\n margin: 0;\n padding: 0 0 0 var(--space-5);\n}\n\n/* ---------- page header ---------- */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-6);\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}\n.ds-page-header__desc {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__action {\n display: flex;\n flex: none;\n gap: var(--space-3);\n margin: 0;\n}\n\n/* ---------- tabs: rounded tabs standing on a thick rule ---------- */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n gap: var(--space-1);\n margin: 0;\n padding: 0 var(--space-3);\n list-style: none;\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-bar);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-1) var(--space-5);\n background: var(--color-surface-alt);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: 0;\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n font-weight: var(--weight-ui);\n text-decoration: none;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n background: var(--color-surface);\n color: var(--color-link-hover);\n}\n.ds-tabs__tab.is-current {\n padding: var(--space-2) var(--space-5) var(--space-1);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-color: var(--color-bar);\n text-shadow: var(--shadow-text);\n}\n\n/* ---------- typography ---------- */\n.ds-prose {\n line-height: var(--line-body);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\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: 0 0 var(--space-3);\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: var(--space-5) 0 var(--space-2);\n font-size: var(--text-h2);\n}\n.ds-prose h2:first-child {\n margin-top: 0;\n}\n.ds-prose h3 {\n margin: var(--space-4) 0 var(--space-1);\n color: var(--color-heading-alt);\n font-size: var(--text-h3);\n}\n.ds-prose p {\n margin: var(--space-2) 0 var(--space-3);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: var(--space-2) 0 var(--space-3);\n padding: 0 0 0 var(--space-6);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-alt);\n border-radius: var(--radius-control);\n font-family: var(--font-mono);\n font-size: var(--text-base);\n}\n/* The round number in front of a step heading. */\n.ds-step {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: calc(var(--text-h2) * 1.5);\n height: calc(var(--text-h2) * 1.5);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n font-size: var(--text-h3);\n line-height: 1;\n padding-bottom: calc(var(--figure-shift) * 2);\n}\n/* A sample of what you type and what you get. */\n.ds-sample {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n margin: var(--space-3) 0;\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n overflow: hidden;\n}\n.ds-sample__side {\n padding: var(--space-3) var(--space-4);\n}\n.ds-sample__side--typed {\n background: var(--color-surface-alt);\n border-right: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-mono);\n white-space: pre-wrap;\n}\n.ds-sample__label {\n display: block;\n margin: 0 0 var(--space-1);\n color: var(--color-text-muted);\n font-family: var(--font-body);\n font-size: var(--text-small);\n}\n\n/* ---------- table: plans side by side ---------- */\n.ds-table {\n width: 100%;\n box-sizing: border-box;\n border-collapse: collapse;\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-ui);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-2) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n border-left: var(--border-width) var(--border-style) var(--color-border-muted);\n text-align: left;\n vertical-align: middle;\n}\n.ds-table thead th {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-color: var(--color-bar);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n}\n.ds-table tbody th {\n font-weight: var(--weight-bold);\n}\n.ds-table .ds-table__num {\n text-align: right;\n white-space: nowrap;\n}\n.ds-table__row--alt th,\n.ds-table__row--alt td {\n background: var(--color-surface-alt);\n}\n.ds-table__row--foot th,\n.ds-table__row--foot td {\n background: var(--color-canvas);\n border-bottom: 0;\n}\n\n/* ---------- notice: a rounded message with a mark at the left ---------- */\n.ds-notice {\n display: flex;\n align-items: baseline;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) var(--color-warning);\n border-radius: var(--radius-panel);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-text);\n border-color: var(--color-danger);\n}\n.ds-notice__mark {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: calc(var(--text-base) * 1.4);\n height: calc(var(--text-base) * 1.4);\n background: var(--color-canvas);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-warning);\n border-radius: 50%;\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n}\n.ds-notice--error .ds-notice__mark {\n color: var(--color-danger);\n border-color: var(--color-danger);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice--error .ds-notice__title {\n color: var(--color-danger);\n}\n.ds-notice__link {\n color: inherit;\n text-decoration: underline;\n}\n\n/* ---------- pagination: round page numbers ---------- */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-ui);\n}\n.ds-pagination__label {\n padding: 0 var(--space-3);\n color: var(--color-text-muted);\n}\n.ds-pagination__link {\n display: block;\n min-width: calc(var(--text-ui) * var(--line-body));\n padding: var(--space-1) var(--space-3);\n background: var(--color-surface);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n text-align: center;\n text-decoration: none;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-link-hover);\n border-color: var(--color-border-strong);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-color: var(--color-bar);\n font-weight: var(--weight-bold);\n}\n.ds-pagination__link.is-disabled {\n background: transparent;\n color: var(--color-text-muted);\n border-color: var(--color-border-muted);\n}\n\n/* ---------- form: labels above the fields, two rows side by side ---------- */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n margin: 0;\n padding: var(--space-5);\n background: var(--color-surface);\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-form__pair {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--space-5);\n align-items: start;\n}\n.ds-form__row {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n min-width: 0;\n}\n.ds-form__label {\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-form__input {\n box-sizing: border-box;\n width: 100%;\n max-width: 100%;\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) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-form__input--large {\n padding: var(--space-2) var(--space-3);\n font-size: var(--text-large);\n}\n.ds-form__input--text {\n display: block;\n height: var(--size-editor);\n resize: vertical;\n}\n.ds-form__input:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\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__input.is-invalid {\n border-color: var(--color-danger);\n}\n.ds-form__error {\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-4) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-form__spacer {\n flex: 1 1 0;\n}\n\n/* ---------- footer: a pale band closing the sheet ---------- */\n.ds-footer {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-2) var(--space-6);\n padding: var(--space-4) var(--space-6);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n}\n.ds-footer__text {\n margin: 0;\n}\n.ds-footer__row {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n text-decoration: underline;\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n/* Components of the period: collapsible boxes, page-action menu, hint box, meter. */\n.ds-extras {\n grid-column: 1 / -1;\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n gap: var(--space-4) var(--space-5);\n margin: var(--space-4) 0;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text);\n}\n.ds-extras > .ds-accordion { flex: 1 1 var(--size-fold); }\n.ds-accordion {\n box-sizing: border-box;\n background: var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-accordion__summary {\n cursor: pointer;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-alt);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-accordion[open] > .ds-accordion__summary {\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__body { padding: var(--space-3) var(--space-4); }\n.ds-accordion__body p { margin: 0; }\n.ds-menu { position: relative; display: inline-block; }\n.ds-menu__summary {\n cursor: pointer;\n list-style: none;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-weight: var(--weight-ui);\n}\n.ds-menu__summary::-webkit-details-marker { display: none; }\n.ds-menu__summary::after { content: \"\"; display: inline-block; width: 0; height: 0; border: calc(var(--text-base) * 0.3) solid transparent; border-top: calc(var(--text-base) * 0.36) solid currentColor; border-bottom-width: 0; margin-left: calc(var(--text-base) * 0.45); vertical-align: calc(var(--text-base) * 0.12); }\n.ds-menu__list {\n position: absolute;\n z-index: 5;\n top: 100%;\n left: 0;\n min-width: var(--size-menu);\n margin: var(--space-1) 0 0;\n padding: var(--space-2) 0;\n list-style: none;\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n box-shadow: var(--shadow-panel);\n}\n.ds-menu__item {\n display: block;\n padding: var(--space-2) var(--space-4);\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n white-space: nowrap;\n}\n.ds-menu__item:hover, .ds-menu__item:focus {\n background: var(--color-surface-alt);\n color: var(--color-link-hover);\n}\n.ds-tooltip { position: relative; display: inline-block; }\n.ds-tooltip__tip {\n position: absolute;\n z-index: 5;\n bottom: 100%;\n left: 0;\n width: var(--size-tip);\n padding: var(--space-3) 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-strong);\n box-shadow: var(--shadow-panel);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n text-align: left;\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n}\n.ds-tooltip:hover > .ds-tooltip__tip, .ds-tooltip:focus-within > .ds-tooltip__tip {\n visibility: visible;\n opacity: 1;\n}\n.ds-meter { display: inline-flex; align-items: center; gap: var(--space-3); }\n.ds-progress {\n -webkit-appearance: none;\n appearance: none;\n width: var(--size-meter);\n height: var(--size-meter-h);\n box-sizing: border-box;\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n overflow: hidden;\n vertical-align: middle;\n}\n.ds-progress::-webkit-progress-bar { background: var(--color-surface-strong); }\n.ds-progress::-webkit-progress-value { background: var(--color-accent); }\n.ds-progress::-moz-progress-bar { background: var(--color-accent); }\n\n:root {\n --size-fold: 18em;\n --size-menu: 12em;\n --size-tip: 15em;\n --size-meter: 14em;\n --size-meter-h: 1em;\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: wiki hosting landing specimen\n\n\n\n\n\n
\n\n
\n
\n Free wikis for classes, clubs and teams since 2005\n \n
\n
\n \n \n chronoskin\n \n \n
\n
\n\n \n
\n
\n
\n

A wiki for your group, ready in a minute

\n

chronoskin gives your group one place to write things down together. Pick a name, invite people, start typing.

\n
    \n
  • Ready in under a minute, nothing to install
    • \n
  • Every change is kept, so nothing can be lost
    • \n
  • Open to the world, or only to the people you choose
    • \n
\n

See how it works or look at wikis others have made

\n
\n
\n

Create your wiki

\n
\n \n .chronoskin\n
\n \n \n

free for up to 30 members. No card needed. Compare plans

\n
\n
\n\n
\n
\n
48,210
wikis
\n
1.3 million
pages
\n
312
made today
\n
\n\n
    \n
  • \n \n

    Edit like a letter

    \n

    Click \"edit\", type, save. Bold and lists have buttons; you never need to see a tag.

    \n
    • \n
  • \n \n

    Invite everyone

    \n

    Send one link. Members write, guests read, and you decide who is which.

    \n
    • \n
  • \n \n

    Undo anything

    \n

    Each page remembers all its versions. Compare two and bring back the better one.

    \n
    • \n
  • \n \n

    Hear about changes

    \n

    Watch a page and a short message tells you when somebody has changed it.

    \n
    • \n
\n\n
\n
\n

Busy wikis this week

\n \n

Browse all 48,210 wikis

\n
\n
\n
\n

What people say

\n
\n

We stopped mailing the rota round. Whoever swaps a shift changes the page, and that is that.

\n

Imre, volunteer fire brigade

\n

My pupils corrected each other's spelling without being asked. I had not planned for that.

\n

Dorothea, class teacher

\n

Take the tour

\n
\n
\n
\n
\n
\n\n \n
\n
\n
    \n
  1. Home
    2. \n
  2. ›
    3. \n
  3. Help
    4. \n
  4. ›
    5. \n
  5. Tour
    6. \n
\n
\n
\n

A wiki in three steps

\n

Five minutes of reading; then you know everything that matters.

\n
Questions people ask [show]

Can I change the address? Yes, once. Can others edit? Only members you invite.

\n
\n

Create a wiki

\n
\n \n
\n
\n

1Name it

\n

Choose a short name. It becomes the address of your wiki, so riverside-choir is found at riverside-choir.chronoskin. You can change the title later; the address stays.

\n

2Write the first page

\n

Every wiki starts with one page called Home. Press \"edit\" and write what the wiki is for. To start another page, put its name in double square brackets and save:

\n
\n
You typeSee the [[Rehearsal dates]]\nand the [[Song list]].
\n
You getSee the Rehearsal dates and the Song list.
\n
\n

A red link is a page that does not exist yet. Click it and you are writing it.

\n

Formatting you will use

\n
    \n
  • the B and I buttons for bold and italic;
    • \n
  • a line that starts with * for a list;
    • \n
  • a line that starts with ! for a heading.
    • \n
\n

3Invite the others

\n

Send people the address. Whoever has a member account can change pages; everybody else can read them, unless you close the wiki.

\n

How links look

\n \n
\n
\n
\n

Good first pages

\n
\n
    \n
  1. Who we are
    2. \n
  2. Dates
    3. \n
  3. Who does what
    4. \n
  4. Things we decided
    5. \n
  5. Useful addresses
    6. \n
\n
\n
\n
\n

Stuck?

\n
\n

The help wiki answers most questions, and it is a wiki, so you can improve it.

\n

Open the help wiki

\n
\n
\n
\n
\n
\n
\n\n \n
\n
\n
    \n
  1. Home
    2. \n
  2. ›
    3. \n
  3. Plans
    4. \n
\n
\n
\n

Plans and prices

\n

Start free and stay free as long as you like. Larger groups pay by the month.

\n
Prices per wikiOne wiki is one address with its own pages, members and history.
\n
\n

Start with the free plan

\n
\n

iSchools pay nothing. A wiki used for teaching gets the Group plan free. Tick \"for a class\" when you create it.

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
What you getFreeGroup most chosenOrganisation
Price per month0.004.9519.95
Members who can write302502,000
Space for files (MB)105005,000
Versions kept per page50allall
Closed to non-membersnoyesyes
Your own colours and marknocolours onlyyes
Small text advertsshownnonenone
Choose FreeChoose GroupChoose Organisation
\n

Prices are per wiki. You can move up or down a plan at any time; nothing on the wiki is removed when you move down, but writing stops until it fits.

\n
\n
\n\n \n
\n
\n
    \n
  1. Home
    2. \n
  2. ›
    3. \n
  3. Browse wikis
    4. \n
  4. ›
    5. \n
  5. Clubs
    6. \n
\n
\n
\n

Wikis about clubs

\n

6,402 open wikis in this topic. Closed wikis are not listed.

\n
Sort by
\n
\n

Add yours

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

Wikis you belong to

\n
\n

You have not joined a wiki yet

\n

Wikis you make or are invited to will be listed here, with what changed since your last visit.

\n Create a wiki\n
\n
\n
\n
\n
\n\n \n
\n
\n
    \n
  1. Home
    2. \n
  2. ›
    3. \n
  3. Create a wiki
    4. \n
\n
\n
\n

Create a wiki

\n

One short form. You can change everything but the address afterwards.

\n
Address rules [show]

Lowercase letters, digits and hyphens only. You cannot change it after the first week.

\n
\n

Compare plans

\n
\n
\n
\n
\n

iAlmost there. We sent a message to the address you gave. The wiki opens as soon as you follow the link in it.

\n

!That address is taken. Somebody already has \"riverside-choir\". Try adding your town or the year.

\n
\n
\n
\n
\n \n \n
\n
\n \n \n This address is already in use.\n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n Shown in the list of wikis. One or two sentences.\n
\n \n \n
\n \n Check the address\n \n \n Start over\n
\n
\n
\n
\n
\n

What happens next

\n
\n
    \n
  1. We send you a link.
    2. \n
  2. You follow it and choose a password.
    3. \n
  3. Your wiki opens on its Home page, ready to edit.
    4. \n
\n
\n
\n
\n

A good address

\n
\n

Short, lowercase, words joined by a hyphen. It cannot be changed, so leave out the year unless it matters.

\n
\n
\n
\n

The free plan

\n
\n
    \n
  • 30 members who can write
    • \n
  • 10 MB for pictures and files
    • \n
  • 50 versions kept per page
    • \n
\n

See the other plans

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

Start over?

\n
\n

The form will be emptied and the address you were trying is released for others to take.

\n
\n Keep my answers\n Empty the form\n
\n
\n
\n
\n \n
\n
\n\n \n\n
\n\n\n\n", "style.json": "{\n \"id\": \"v1.wiki-2000s.landing.s08.p01.t02.u02\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"wiki-2000s\",\n \"years\": [\n 2003,\n 2010\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": true\n },\n \"source\": \"https://chrono.skin/s/v1-wk-8122\",\n \"short\": \"v1-wk-8122\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #f0f0f0;\n --color-canvas: #ffffff;\n --color-surface: #f9f9f9;\n --color-surface-alt: #efefef;\n --color-surface-strong: #e0e0e0;\n --color-bar: #e8e8e8;\n --color-bar-text: #000000;\n --color-bar-alt: #f0f0f0;\n --color-bar-alt-text: #002bb8;\n --color-inverse: #006699;\n --color-inverse-text: #ffffff;\n --color-text: #000000;\n --color-text-muted: #606060;\n --color-heading: #000000;\n --color-heading-alt: #303030;\n --color-link: #002bb8;\n --color-link-quiet: #3366bb;\n --color-link-visited: #5a3696;\n --color-link-hover: #0e44d6;\n --color-link-active: #faa700;\n --color-border: #aaaaaa;\n --color-border-strong: #808080;\n --color-border-muted: #cccccc;\n --color-accent: #fabd23;\n --color-accent-text: #000000;\n --color-accent-alt: #006400;\n --color-fill-1: #f5fffa;\n --color-fill-2: #f5faff;\n --color-fill-3: #faf5ff;\n --color-fill-4: #ffffe0;\n --color-button: #006699;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffe0;\n --color-button-secondary: #efefef;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #767676;\n --color-disabled: #e8e8e8;\n --color-disabled-text: #909090;\n --color-danger: #cc2200;\n --color-danger-surface: #fff0ec;\n --color-success: #006400;\n --color-warning: #e08a00;\n --color-notice: #fbfbfb;\n --color-notice-text: #000000;\n --color-focus: #faa700;\n --color-shadow: #000000;\n --color-overlay: #f0f0f0;\n}\n\n/* @part type */\n:root {\n --font-body: Verdana, Geneva, \"DejaVu Sans\", sans-serif;\n --font-heading: \"Trebuchet MS\", Verdana, Geneva, sans-serif;\n --font-ui: Verdana, Geneva, \"DejaVu Sans\", sans-serif;\n --font-mono: \"Lucida Console\", Monaco, monospace;\n --text-base: 11px;\n --text-small: 10px;\n --text-ui: 10px;\n --text-large: 13px;\n --text-display: 22px;\n --text-h1: 20px;\n --text-h2: 15px;\n --text-h3: 12px;\n --line-body: 1.45;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 1px;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 3px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: none;\n --shadow-dialog: none;\n --shadow-text: none;\n --fill-page: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--color-page), black 14%) 0, color-mix(in srgb, var(--color-page), black 14%) 1px, var(--color-page) 1px, var(--color-page) 3px);\n --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 22%), var(--color-bar) 50%, color-mix(in srgb, var(--color-bar), black 25%));\n --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 16%), var(--color-bar-alt) 60%);\n --fill-inverse: linear-gradient(to right, var(--color-inverse), color-mix(in srgb, var(--color-inverse), black 45%));\n --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 40%), var(--color-accent));\n --fill-panel: var(--color-canvas);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 28%), var(--color-button) 55%);\n --fill-button-hover: linear-gradient(to bottom, var(--color-button), color-mix(in srgb, var(--color-button), black 25%));\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 45%), var(--color-button-secondary));\n --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 6%), var(--color-input) 30%);\n --focus-ring: 1px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }