{ "id": "v1-wk-4723", "long_id": "v1.wiki-2000s.docs.s04.p07.t02.u03", "name": "Wiki dictionary, masthead look-up and letter strip, 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": "docs", "mode": "mix", "viewport": { "width": 1024, "fluid": true }, "summary": "This is the dictionary or phrasebook wiki of the middle 2000s in a \"paper\" skin: one framed page with a masthead that holds the name and a look-up box, a dark bar of sections, a strip of letters from A to Z and, under them, the sheet. An entry is a headword on a double rule, tabs for its faces, numbered senses with quotations, and translation boxes that fold; the front page shows a word of the day on a calendar leaf. Everything is set in Georgia on cream with brown rules and underlined ink-blue links, square and still, with only a one-pixel hard shadow under boxes.", "url": "https://chrono.skin/s/v1-wk-4723", "preview_url": "https://chrono.skin/s/v1-wk-4723/specimen.html", "files": { "STYLE.md": "# Wiki dictionary, masthead look-up and letter strip, 2003 to 2010\n\n## Summary\n\nThis is the dictionary or phrasebook wiki of the middle 2000s in a \"paper\" skin: one framed page with a masthead that holds the name and a look-up box, a dark bar of sections, a strip of letters from A to Z and, under them, the sheet. An entry is a headword on a double rule, tabs for its faces, numbered senses with quotations, and translation boxes that fold; the front page shows a word of the day on a calendar leaf. Everything is set in Georgia on cream with brown rules and underlined ink-blue links, square and still, with only a one-pixel hard shadow under boxes.\n\n## Layout\n\n- The page is fluid. `--size-page` is `100%`; `.ds-page__frame` has `--space-5` (14px) above and `--space-6` (20px) at the sides. Designed at 1024px; it does not reflow for phones.\n- Everything sits in one bordered box, `.ds-page__book`: the header `.ds-nav` (masthead `.ds-nav__mast` in the secondary bar fill, section bar `.ds-nav__menu` in the bar fill, letter strip `.ds-index` on `--color-surface-alt`), then the sheet `.ds-page__sheet` on the canvas, then the footer band in the inverse fill. No text sits on the page colour. There is no side column of site links: navigation is the bar and the letters.\n- Views. The specimen is a four-screen example dictionary; the bar has one item per view and the current one takes the accent fill. `home` is the main page: the word of the day, the figures line, then a wide column (welcome box, newest entries) beside a `--size-side` (232px) margin column of link boxes, and the shelves grid. `entry` is one entry: trail, headword, tabs, the senses and translations beside a margin column with a small facts table and a notice. `index` is the index for one letter: second-letter strip, the table of headwords, paging and an empty section. `request` is the request form with its two notices, a tips box and the withdraw confirmation.\n- Inner pages (every view but `home`) start with `.ds-breadcrumb`, then `.ds-page-header` in place of the word of the day (title and one muted line at the left, the action at the right, on a double rule), then `.ds-tabs` when the page has several faces, then the working blocks. Blocks in a view are in `.ds-view__body`, `--space-5` apart. Two-column areas use `.ds-layout`: a fluid column and the `--size-side` margin column at the right, `--space-6` apart.\n- Form rows are a `--size-label` (160px) label and the field; inputs are `--size-field` (300px), the look-up field `--size-search` (240px), a text area `--size-editor` (96px) tall. The calendar leaf is `--size-leaf` (84px) wide. A dialog is `--size-dialog` (440px) wide.\n- Spacing scale: `--space-1` 2px, `--space-2` 4px, `--space-3` 6px, `--space-4` 10px, `--space-5` 14px, `--space-6` 20px, `--space-7` 28px.\n - `--space-1`: vertical padding of buttons, tabs, strips; gap between letters.\n - `--space-2`: vertical padding of table cells, list rows and bar items.\n - `--space-3`: gap between buttons, padding of notices and panel bodies.\n - `--space-4`: horizontal padding of cells, strips and boxes; gap between grid cells.\n - `--space-5`: gap between blocks; horizontal padding of bar items and tabs.\n - `--space-6`: padding of the sheet and masthead, gap between the columns, margin above a language heading.\n - `--space-7`: list indent.\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__frame` is the padded page, `.ds-page__book` the framed box, `.ds-page__sheet` the sheet. Views are `.ds-view` with a `.ds-view__body` column; `.ds-layout` with `.ds-layout__main` and `.ds-layout__side` makes the two columns.\n- `.ds-nav`: the header. `.ds-nav__mast` holds the brand, the look-up form `.ds-nav__search` (`.ds-nav__label`, `.ds-nav__field`) and the `.ds-nav__personal` list of `.ds-nav__personal-link` items. `.ds-nav__menu` is the bar of `.ds-nav__link` items (`is-current` in the accent fill); `.ds-nav__aux` items at the right, after `.ds-nav__rest`, are never current.\n- `.ds-brand`: mark and name at the left of the masthead. `.ds-brand__mark` is a square tile 1.5 times `--text-display`, dressed like the primary button; `.ds-brand__text` stacks `.ds-brand__name` and the italic `.ds-brand__tag`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo: replace both, keep the tile.\n- `.ds-index`: the letter strip: `.ds-index__label`, `.ds-index__letter` (`is-current`, `is-empty`), `.ds-index__rest` for links at the right. `.ds-index--boxed` is the same strip as a box inside a view.\n- `.ds-breadcrumb`: a small italic trail with `.ds-breadcrumb__link` and `.ds-breadcrumb__current`.\n- `.ds-hero`: the word of the day between double rules: the calendar leaf `.ds-hero__leaf` (`.ds-hero__month`, `.ds-hero__day`), `.ds-hero__text` with `.ds-hero__kicker`, `.ds-hero__title`, `.ds-hero__pron` and `.ds-hero__lead`, and a stack of buttons `.ds-hero__action`.\n- `.ds-page-header`: the head of an inner page: `.ds-page-header__title`, `.ds-page-header__desc`, `.ds-page-header__action`.\n- `.ds-tabs`: the faces of an entry on a strong rule under the header; `.ds-tabs__tab` with `is-current` (canvas, open at the bottom) and `is-missing`.\n- `.ds-stat`: the row; a ledger line of `.ds-stat__item` figures, each a `.ds-stat__value` beside an italic `.ds-stat__label`.\n- `.ds-section`: a heading on a hairline between blocks.\n- `.ds-panel`: a titled box: italic `.ds-panel__title` strip, `.ds-panel__body` with `.ds-panel__line` paragraphs and a right-aligned `.ds-panel__more`.\n- `.ds-list`: dictionary lines with a hanging indent: `.ds-list__item` with a bold `.ds-list__term`, an italic `.ds-list__pos`, the gloss and a `.ds-list__meta` line.\n- `.ds-sidebar`: the margin column of link boxes: `.ds-sidebar__block`, `.ds-sidebar__title`, `.ds-sidebar__list`, `.ds-sidebar__item`.\n- `.ds-grid`: four shelf cells in a row: `.ds-grid__cell` (`--2`, `--3`, `--4`) with a drop capital `.ds-grid__icon`, a `.ds-grid__name` link and `.ds-grid__meta`.\n- `.ds-prose`: the entry text: h1, h2 (a language, in a tinted strip with a strong left edge), h3 (a part of speech, on a faint rule), p, ul, ol, strong, code. `.ds-edit` is the bracketed edit link in a heading. `.ds-headline` with `.ds-headline__word` is the headword line; `.ds-senses` the numbered senses (`.ds-senses__item`, `.ds-senses__label`, `.ds-senses__quote`).\n- `.ds-trans`: a translation box: `.ds-trans__bar` with a bold `.ds-trans__gloss` and a bracketed show or hide link; an unfolded box also has the two-column `.ds-trans__body`.\n- `.ds-table`: a ledger table: bar-fill head, dotted row rules; `.ds-table__num` right-aligns numbers, `.ds-table__row--alt` tints a row, `.ds-table__term` is a bold headword cell, `.ds-table__pos` an italic one, `.ds-table__nowrap` keeps a cell on one line.\n- `.ds-notice`: a slip with a thick top rule in `--color-accent-alt`; `.ds-notice--error` has it 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-form`: rows `.ds-form__row` of a `.ds-form__label` and a `.ds-form__field` holding a `.ds-form__input` (`--wide`, `--auto`, `--text`; `is-invalid`, `is-disabled`) with `.ds-form__hint` or `.ds-form__error`; `.ds-form__check` and `.ds-form__checkbox`; `.ds-form__actions` with `.ds-form__spacer` pushing the destructive button to the right.\n- `.ds-link`: every link in text. States `is-visited`, `is-hover`, `is-active`, `is-focus`; `.ds-link--new` (in `--color-danger`) for a page nobody has written, `.ds-link--quiet` for tool and outside links, `.ds-link--strong` for bold.\n- `.ds-button`: primary action. `.ds-button--secondary` is the plain button, `.ds-button--danger` the destructive one (error text on the error surface), `.ds-button--small` a smaller one. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`.\n- `.ds-badge`: a small label in the accent fill for counts and \"new\". `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger` are status labels: a 14 to 22% tint of the status colour over `--color-surface`, body text and a 1px outline in the status colour.\n- `.ds-pagination`: a line of small bordered `.ds-pagination__link` steps (`is-current` in the accent fill, `is-disabled` plain) with a muted `.ds-pagination__label`.\n- `.ds-dialog`: a box in the page flow, centred in the `.ds-dialog__backdrop` band (`--color-overlay`, no text on it): `.ds-dialog__title` in the bar fill, `.ds-dialog__body`, `.ds-dialog__text`, `.ds-dialog__actions`. It never floats over the page.\n- `.ds-empty`: a dashed box on `--color-surface` with `.ds-empty__title`, `.ds-empty__text` and one secondary button.\n- `.ds-footer`: the colophon band: `.ds-footer__text` and a `.ds-footer__row` of `.ds-footer__link` items.\n- `.ds-clear` ends floats; `.ds-icon` sizes an inline icon and `.ds-sprite` hides a symbol sheet, for projects that add icons.\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 >= 75%`: the page stretches with 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 <= 8px`: corners are softly rounded, 4 to 8px; only pills and round numbers go further.\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 or 2px; only the left bar of a notice is 6px.\n- `gradient-fills <= 10%`: only buttons carry a faint gradient.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a box in the margin from `.ds-sidebar__block`, a folded section from `.ds-trans`, a titled box from `.ds-panel`, a message from `.ds-notice`. Build it as a 1px `--color-border` outline on `--color-surface`, keep text on fills as the conventions above say, and use tokens only: no raw colours or lengths, no gradient or transition of its own, no font size outside the type tokens, and `--space-5` as the gap to the next block.\n", "components.css": "/* Layout tokens (structure part). A framed page of masthead, section bar,\n letter strip and sheet; widths and gaps measured on dictionary and\n reference wikis captured 2005 to 2008. */\n:root {\n --size-page: 100%;\n --size-side: 232px;\n --size-search: 240px;\n --size-label: 160px;\n --size-field: 300px;\n --size-editor: 96px;\n --size-dialog: 440px;\n --size-icon: 14px;\n --size-leaf: 84px;\n --space-1: 2px;\n --space-2: 4px;\n --space-3: 6px;\n --space-4: 10px;\n --space-5: 14px;\n --space-6: 20px;\n --space-7: 28px;\n}\n/* ---------- shell ---------- */\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-sprite {\n position: absolute;\n}\n.ds-icon {\n flex: none;\n width: var(--size-icon);\n height: var(--size-icon);\n vertical-align: middle;\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.ds-view__body {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n.ds-clear {\n clear: both;\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\n/* Tool, meta and outside links. */\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\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/* ---------- buttons ---------- */\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) 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-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n white-space: nowrap;\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--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-input-border);\n font-weight: var(--weight-ui);\n text-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n border-color: var(--color-border-strong);\n}\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 font-size: var(--text-small);\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/* ---------- form ---------- */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n margin: 0;\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0,1fr);\n gap: var(--space-1) var(--space-5);\n align-items: baseline;\n}\n.ds-form__label {\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-1);\n min-width: 0;\n}\n.ds-form__input {\n box-sizing: border-box;\n width: var(--size-field);\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 box-shadow: var(--shadow-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--auto {\n width: auto;\n}\n.ds-form__input--text {\n display: block;\n width: 100%;\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__hint {\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-form__check {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n font-size: var(--text-ui);\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}\n.ds-form__spacer {\n flex: 1 1 0;\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\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-style: normal;\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n white-space: nowrap;\n}\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) solid var(--color-success);\n}\n.ds-badge--success {\n background: color-mix(in srgb,var(--color-success) 16%,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) 14%,var(--color-surface));\n border-color: var(--color-danger);\n}\n\n/* ---------- notice ---------- */\n.ds-notice {\n display: flow-root;\n margin: 0;\n padding: var(--space-3) var(--space-5);\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-size: var(--text-ui);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-text);\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 ---------- */\n.ds-pagination {\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-family: var(--font-ui);\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 padding: 0 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-control);\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 text-decoration: var(--link-decoration-hover);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-border-strong);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n.ds-pagination__link.is-disabled {\n background: transparent;\n color: var(--color-text-muted);\n text-decoration: none;\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-4);\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n margin: var(--space-6) 0 var(--space-3);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin: var(--space-5) 0 var(--space-2);\n font-size: var(--text-h3);\n}\n.ds-prose > :first-child {\n margin-top: 0;\n}\n.ds-prose p {\n margin: var(--space-3) 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: var(--space-2) 0 var(--space-4);\n padding: 0 0 0 var(--space-7);\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: var(--border-width) solid var(--color-border-muted);\n border-radius: var(--radius-control);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-edit {\n float: right;\n margin: 0 0 0 var(--space-5);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n letter-spacing: 0;\n text-transform: none;\n}\n\n/* ---------- table ---------- */\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-muted);\n text-align: left;\n vertical-align: top;\n}\n.ds-table th {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom-color: var(--color-border);\n font-family: var(--font-ui);\n font-weight: var(--weight-bold);\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n}\n.ds-table .ds-table__num {\n text-align: right;\n white-space: nowrap;\n}\n.ds-table .ds-table__nowrap {\n white-space: nowrap;\n}\n.ds-table__row--alt td {\n background: var(--color-surface-alt);\n}\n\n/* ---------- dialog: a 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-muted);\n border-radius: var(--radius-panel);\n}\n.ds-dialog {\n width: var(--size-dialog);\n max-width: 100%;\n box-sizing: border-box;\n margin: 0 auto;\n overflow: hidden;\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);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\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-6) var(--space-5);\n background: var(--color-surface);\n border: var(--border-width) dashed var(--color-border);\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-large);\n font-weight: var(--weight-bold);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n color: var(--color-text-muted);\n}\n/* ---------- page frame: masthead, bar, letters, sheet and foot in one border ---------- */\n.ds-page__frame {\n width: var(--size-page);\n box-sizing: border-box;\n padding: var(--space-5) var(--space-6) var(--space-6);\n}\n.ds-page__book {\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-panel);\n overflow: hidden;\n}\n.ds-page__sheet {\n padding: var(--space-5) var(--space-6) var(--space-6);\n background: var(--color-canvas);\n}\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__main {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-layout__side {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n\n/* ---------- nav: masthead with the look-up box, then the section bar ---------- */\n.ds-nav {\n display: block;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-nav__mast {\n display: flex;\n align-items: center;\n gap: 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}\n.ds-brand {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n color: var(--color-bar-alt-text);\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.5);\n height: calc(var(--text-display) * 1.5);\n box-sizing: border-box;\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__text {\n display: flex;\n flex-direction: column;\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-brand__tag {\n font-size: var(--text-small);\n font-style: italic;\n line-height: var(--line-heading);\n}\n.ds-nav__search {\n display: flex;\n flex: 1 1 0;\n justify-content: center;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n.ds-nav__label {\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-style: italic;\n}\n.ds-nav__field {\n width: var(--size-search);\n}\n.ds-nav__personal {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 0;\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-transform: var(--ui-transform);\n}\n.ds-nav__personal-link {\n color: var(--color-bar-alt-text);\n text-decoration: underline;\n}\n.ds-nav__menu {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0 var(--space-5);\n list-style: none;\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__link,\n.ds-nav__aux {\n display: block;\n padding: var(--space-2) var(--space-5);\n color: var(--color-bar-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover,\n.ds-nav__aux:hover,\n.ds-nav__aux.is-hover {\n text-decoration: underline;\n}\n.ds-nav__link.is-current {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-shadow: none;\n}\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 text-shadow: none;\n}\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-shadow: none;\n}\n.ds-page:has(#entry:target) .ds-nav__link[href=\"#entry\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-shadow: none;\n}\n.ds-page:has(#index:target) .ds-nav__link[href=\"#index\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-shadow: none;\n}\n.ds-page:has(#request:target) .ds-nav__link[href=\"#request\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-shadow: none;\n}\n.ds-nav__rest {\n margin: 0 0 0 auto;\n}\n\n/* ---------- letter strip: the index by first letter ---------- */\n.ds-index {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0 var(--space-1);\n margin: 0;\n padding: var(--space-1) var(--space-6);\n list-style: none;\n background: var(--color-surface-alt);\n font-size: var(--text-ui);\n}\n.ds-index--boxed {\n padding: var(--space-2) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-index__rest {\n margin: 0 0 0 auto;\n font-style: italic;\n}\n.ds-index__label {\n padding: 0 var(--space-4) 0 0;\n color: var(--color-text-muted);\n font-style: italic;\n}\n.ds-index__letter {\n display: block;\n min-width: calc(var(--text-ui) * 1.2);\n padding: 0 var(--space-1);\n color: var(--color-link);\n text-align: center;\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-index__letter:hover,\n.ds-index__letter.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-index__letter.is-current {\n background: var(--color-surface-strong);\n color: var(--color-text);\n font-weight: var(--weight-bold);\n}\n.ds-index__letter.is-empty {\n color: var(--color-text-muted);\n}\n\n/* ---------- breadcrumb: a small italic trail ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0 0 var(--space-3);\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n font-style: italic;\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n text-decoration: underline;\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n color: var(--color-link-hover);\n}\n.ds-breadcrumb__current {\n color: var(--color-text);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- hero: the word of the day ---------- */\n.ds-hero {\n display: grid;\n grid-template-columns: var(--size-leaf) minmax(0,1fr) auto;\n gap: var(--space-6);\n align-items: center;\n padding: var(--space-5) var(--space-6);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: var(--border-width-strong) double var(--color-border-strong);\n border-bottom: var(--border-width-strong) double var(--color-border-strong);\n border-radius: var(--radius-page);\n}\n\n/* A calendar leaf: the month on the accent fill, the day below it. */\n.ds-hero__leaf {\n align-self: start;\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n overflow: hidden;\n text-align: center;\n}\n.ds-hero__month {\n display: block;\n padding: var(--space-1) 0;\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-hero__day {\n display: block;\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: 1.4;\n}\n.ds-hero__text {\n min-width: 0;\n}\n.ds-hero__kicker {\n margin: 0;\n color: var(--color-heading-alt);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\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}\n.ds-hero__pron {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-hero__lead {\n margin: var(--space-3) 0 0;\n font-size: var(--text-large);\n}\n.ds-hero__action {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: var(--space-3);\n margin: 0;\n text-align: center;\n}\n\n/* ---------- page header: headword on a double rule ---------- */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-6);\n margin: 0 0 var(--space-5);\n padding: 0 0 var(--space-2);\n border-bottom: var(--border-width-strong) double var(--color-border-strong);\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 font-size: var(--text-ui);\n}\n.ds-page-header__action {\n display: flex;\n flex: none;\n gap: var(--space-3);\n margin: 0;\n padding: 0 0 var(--space-1);\n}\n\n/* ---------- tabs: the faces of an entry, under the header ---------- */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n gap: var(--space-1);\n margin: 0 0 var(--space-5);\n padding: 0 var(--space-4);\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab {\n display: block;\n margin: 0 0 calc(var(--border-width) * -1);\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-color: var(--color-border-strong);\n border-radius: var(--radius-control) var(--radius-control) 0 0;\n text-decoration: none;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-tabs__tab.is-current {\n padding: var(--space-2) var(--space-5);\n background: var(--color-canvas);\n color: var(--color-text);\n border-color: var(--color-border-strong);\n border-bottom-color: var(--color-canvas);\n font-weight: var(--weight-bold);\n}\n.ds-tabs__tab.is-missing {\n color: var(--color-danger);\n}\n\n/* ---------- stats: a ledger line between double rules ---------- */\n.ds-stat {\n display: flex;\n margin: 0;\n padding: var(--space-3) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item {\n display: flex;\n flex: 1 1 0;\n align-items: baseline;\n justify-content: center;\n gap: var(--space-3);\n padding: 0 var(--space-4);\n border-left: var(--border-width) var(--border-style) var(--color-border-muted);\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-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-stat__label {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-style: italic;\n text-transform: var(--ui-transform);\n}\n\n/* ---------- section heading between blocks ---------- */\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\n/* ---------- panel: a titled box ---------- */\n.ds-panel {\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 overflow: hidden;\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) 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-large);\n font-style: italic;\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-panel__body {\n padding: var(--space-3) var(--space-4) var(--space-4);\n}\n.ds-panel__line {\n margin: 0 0 var(--space-3);\n}\n.ds-panel__more {\n margin: var(--space-3) 0 0;\n font-size: var(--text-ui);\n font-style: italic;\n text-align: right;\n}\n\n/* ---------- list: dictionary lines, headword first ---------- */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n padding: var(--space-2) 0 var(--space-2) var(--space-6);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n text-indent: calc(var(--space-6) * -1);\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n}\n.ds-list__term {\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration);\n}\n.ds-list__term:hover,\n.ds-list__term.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-list__pos {\n color: var(--color-text-muted);\n font-style: italic;\n}\n.ds-list__meta {\n display: block;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- sidebar: boxes of links in the margin column ---------- */\n.ds-sidebar {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\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 overflow: hidden;\n}\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-1) 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-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-2) var(--space-4) var(--space-3) var(--space-7);\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-sidebar__item {\n padding: var(--space-1) 0 0;\n}\n\n/* ---------- grid: shelves of the dictionary, each with a drop capital ---------- */\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 display: grid;\n grid-template-columns: auto minmax(0,1fr);\n column-gap: var(--space-4);\n align-items: start;\n padding: var(--space-3) var(--space-4) var(--space-4);\n background: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-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 color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: 1;\n}\n.ds-grid__name {\n display: block;\n color: var(--color-link);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration);\n}\n.ds-grid__name:hover,\n.ds-grid__name.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-grid__meta {\n display: block;\n margin: var(--space-1) 0 0;\n font-size: var(--text-small);\n line-height: var(--line-heading);\n color: var(--color-text-muted);\n}\n\n/* ---------- entry: headword line, numbered senses, quotations ---------- */\n.ds-prose h2 {\n padding: var(--space-1) var(--space-4);\n background: var(--color-surface-alt);\n border-left: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-prose h3 {\n padding: 0 0 var(--space-1);\n color: var(--color-heading-alt);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n font-weight: var(--weight-bold);\n}\n.ds-prose .ds-headline {\n margin: var(--space-3) 0 var(--space-2);\n}\n.ds-headline__word {\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n}\n.ds-prose .ds-senses {\n margin: var(--space-2) 0 var(--space-4);\n padding: 0 0 0 var(--space-7);\n}\n.ds-senses__item {\n padding: 0 0 var(--space-2);\n}\n.ds-senses__label {\n color: var(--color-text-muted);\n font-style: italic;\n}\n.ds-senses__quote {\n display: block;\n margin: var(--space-1) 0 0;\n padding: 0 0 0 var(--space-4);\n color: var(--color-text-muted);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-ui);\n font-style: italic;\n}\n\n/* ---------- translations: a bar that looks folded, and one unfolded ---------- */\n.ds-trans {\n margin: 0 0 var(--space-3);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n font-size: var(--text-ui);\n}\n.ds-trans .ds-trans__bar {\n display: flex;\n justify-content: space-between;\n gap: var(--space-5);\n margin: 0;\n padding: var(--space-1) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-trans__gloss {\n font-weight: var(--weight-bold);\n}\n.ds-trans .ds-trans__body {\n display: grid;\n grid-template-columns: repeat(2,minmax(0,1fr));\n gap: 0 var(--space-6);\n margin: 0;\n padding: var(--space-3) var(--space-4) var(--space-3) var(--space-7);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* ---------- notice: a slip with a thick top rule ---------- */\n.ds-notice {\n border-top: var(--border-width-strong) var(--border-style) var(--color-accent-alt);\n}\n.ds-notice--error {\n border-top-color: var(--color-danger);\n}\n\n/* ---------- table: ruled like a ledger ---------- */\n.ds-table td {\n border-bottom-style: dotted;\n border-bottom-color: var(--color-border);\n}\n.ds-table__term {\n font-weight: var(--weight-bold);\n}\n.ds-table__pos {\n color: var(--color-text-muted);\n font-style: italic;\n}\n\n/* ---------- footer: the colophon ---------- */\n.ds-footer {\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 background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-top: var(--border-width-strong) double var(--color-border-strong);\n font-size: var(--text-small);\n}\n.ds-footer__text {\n margin: 0;\n font-style: italic;\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-inverse-text);\n text-decoration: underline;\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 dictionary specimen\n\n\n\n\n\n
\n
\n\n
\n
\n \n \n \n chronoskin\n the dictionary its readers write\n \n \n
\n \n \n \n Search\n
\n \n
\n \n \n
\n\n
\n\n \n
\n
\n
\n
March 200714
\n
\n

Word of the day

\n

gloaming

\n

noun · GLOH-ming · two syllables, stress on the first

\n

The half-light after sunset and before full dark; twilight, dusk.

\n
\n

\n Read the full entry\n Suggest tomorrow's word\n

\n
\n\n
\n
48,210
entries
\n
112
languages
\n
96,530
translations
\n
1,274
open requests
\n
\n\n
\n
\n
Said GLOH-mingStress on the first syllable, like the word glow plus ming.
\n
\n

Welcome, reader and writer

\n
\n

chronoskin is a dictionary that anyone may correct and extend. Every entry gives the meanings of a word as numbered senses, with its pronunciation, its history, quotations that show it in use and its translations.

\n

Look a word up in the box above, walk the index by letter, or, if the word you want is not here yet, ask for it. A link in red leads to an entry nobody has written.

\n

How an entry is laid out · House style

\n
\n
\n

Newest entries

\n
    \n
  • gloaming noun the half-light after sunset. 3 senses · 14 translations · added by Marit Oster, 14 March
    • \n
  • petrichor noun the smell of rain on dry ground. 1 sense · 6 translations · added by Deniz, 13 March
    • \n
  • widdershins adverb against the course of the sun; anticlockwise. 2 senses · 9 translations · added by Hollis B, 13 March
    • \n
  • to dither verb to waver between choices; to delay by hesitating. 3 senses · 11 translations · added by Anselm, 12 March
    • \n
  • threshold noun the sill of a doorway; a point of beginning. 4 senses · 31 translations · added by Deniz, 11 March
    • \n
\n
\n \n
\n\n

Shelves of the dictionary

\n
    \n
  • EEnglish entries31,870 headwords with senses and quotations
    • \n
  • TTranslationsTables in 112 languages, filled in sense by sense
    • \n
  • PPhrasebooksGreetings, numbers and directions for travellers
    • \n
  • RRhymesWords grouped by their final sounds
    • \n
\n
\n
\n\n \n
\n
    \n
  1. Main page
    2. \n
  2. /
    3. \n
  3. Index: G
    4. \n
  4. /
    5. \n
  5. gloaming
    6. \n
\n
\n
\n

gloaming

\n

English noun · 3 senses · first recorded before 1100

\n
Languages
How to read this entry [show]

Senses are numbered. Labels in brackets give the register. A red link is a word nobody has written yet.

\n
\n

Edit this entry

\n
\n \n
\n
\n

[edit]English

\n

Etymology

\n

From an old word for twilight, built on the same root as glow. It dropped out of general use and came back through northern poetry in the 1700s.

\n

Pronunciation

\n \n

Noun

\n

gloaming (plural gloamings)

\n
    \n
  1. The half-light after sunset and before full dark; twilight. They walked home in the gloaming, the lamps not yet lit.
    2. \n
  2. (figurative) The closing part of a period; a time of fading. In the gloaming of the old firm, few clerks remained.
    3. \n
  3. (rare, regional) The dim light before sunrise. needs a quotation
    4. \n
\n

Translations

\n
\n

the half-light after sunset[hide]

\n \n
\n
\n

the closing part of a period[show]

\n
\n
\n

translations to be checked[show]

\n
\n

See also

\n \n
\n
\n
\n

At a glance

\n
\n \n \n \n \n \n \n \n
singulargloaming
pluralgloamings
syllablesgloam·ing
registerliterary
\n

All nouns in -ing

\n
\n
\n

Sense 3 is under review. It rests on a single source. Add a quotation if you know one.

\n
\n

Related words

\n \n
\n
\n
\n
\n\n \n
\n
    \n
  1. Main page
    2. \n
  2. /
    3. \n
  3. Index of entries
    4. \n
  4. /
    5. \n
  5. G
    6. \n
\n
\n
\n

Index of entries: G

\n

1,948 English headwords begin with G. Entries 201 to 208 are shown.

\n
\n
\n

Request an entry

\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
HeadwordPart of speechFirst senseSensesTranslationsState
glimmernoun, verba faint, unsteady light427verified
glintnoun, verba quick flash of reflected light319verified
gloamverbto grow dark at evening12needs quotation
gloamingnounthe half-light after sunset314sense 3 in review
gloamyadjectiverequested, not yet written00missing
gloatverbto dwell on one's luck with open pleasure222verified
globenouna ball; a round model of the earth548verified
gloomnoun, verbpartial darkness; low spirits435verified
\n \n

Entries beginning with Gz

\n
\n

No entries under Gz yet

\n

Nobody has written an entry that begins with these letters. If you know such a word, ask for it or write it.

\n Request an entry\n
\n
\n
\n\n \n
\n
    \n
  1. Main page
    2. \n
  2. /
    3. \n
  3. Requested entries
    4. \n
  4. /
    5. \n
  5. New request
    6. \n
\n
\n
\n

Request an entry

\n

Ask for a word that is missing. A request stays on the list until somebody writes the entry.

\n
\n

All requests

\n
\n
\n
\n

Check the index first. One request in five is for a word that already has an entry under another spelling. Search the index.

\n

Your request was not saved. Tell us where you met the word, so that a writer can find a quotation.

\n
\n
\n
\n
\n \n As you would look it up: singular, lower case.\n
\n
\n \n \n
\n
\n \n Please name a book, a place or a speaker.\n
\n
\n \n \n
\n
\n Follow up\n \n
\n
\n \n Cancel\n \n \n Withdraw request\n
\n
\n
\n

A good request

\n
\n

Names one word, in one language.

\n

Says where the word was read or heard.

\n

Does not ask for names of people, firms or products.

\n

Criteria for inclusion

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

Withdraw the request for \"owl-light\"?

\n
\n

The word leaves the list of requested entries. Two other readers have asked for it and will be told.

\n
\n Keep the request\n Withdraw it\n
\n
\n
\n
\n
\n
\n\n
\n\n \n\n
\n
\n\n\n\n", "style.json": "{\n \"id\": \"v1.wiki-2000s.docs.s04.p07.t02.u03\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"wiki-2000s\",\n \"years\": [\n 2003,\n 2010\n ]\n },\n \"archetype\": \"docs\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": true\n },\n \"source\": \"https://chrono.skin/s/v1-wk-4723\",\n \"short\": \"v1-wk-4723\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #d9d2e4;\n --color-canvas: #ffffff;\n --color-surface: #f7f5fa;\n --color-surface-alt: #eeeaf4;\n --color-surface-strong: #dcd3ea;\n --color-bar: #4b2e6e;\n --color-bar-text: #ffffff;\n --color-bar-alt: #ece6f5;\n --color-bar-alt-text: #3a2358;\n --color-inverse: #2d1b45;\n --color-inverse-text: #efe6fb;\n --color-text: #1c1a21;\n --color-text-muted: #686274;\n --color-heading: #3a2358;\n --color-heading-alt: #7a3fa0;\n --color-link: #1f45a8;\n --color-link-quiet: #6a5a8c;\n --color-link-visited: #7b2d8e;\n --color-link-hover: #c45a00;\n --color-link-active: #a01060;\n --color-border: #c4bbd2;\n --color-border-strong: #8d7fa6;\n --color-border-muted: #e3ddec;\n --color-accent: #f2a93b;\n --color-accent-text: #2d1b00;\n --color-accent-alt: #a01060;\n --color-fill-1: #f1ecf9;\n --color-fill-2: #e9eefb;\n --color-fill-3: #fdf2dc;\n --color-fill-4: #f9e8f1;\n --color-button: #5d3a8a;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffe2a8;\n --color-button-secondary: #e6dff0;\n --color-button-secondary-text: #3a2358;\n --color-input: #ffffff;\n --color-input-text: #1c1a21;\n --color-input-border: #8d7fa6;\n --color-disabled: #e5e2ea;\n --color-disabled-text: #948ea0;\n --color-danger: #b0201e;\n --color-danger-surface: #fbe7e4;\n --color-success: #2e7d32;\n --color-warning: #c77d00;\n --color-notice: #fdf2dc;\n --color-notice-text: #3d2c00;\n --color-focus: #c45a00;\n --color-shadow: #2d1b45;\n --color-overlay: #cfc7dc;\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: 2px;\n --border-style: solid;\n --radius-control: 4px;\n --radius-panel: 6px;\n --radius-pill: 999px;\n --radius-page: 8px;\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: linear-gradient(to bottom, color-mix(in srgb, var(--color-page), black 7%), var(--color-page) 140px);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-canvas);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 18%), var(--color-button));\n --fill-button-hover: color-mix(in srgb, var(--color-button), black 12%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 60%), var(--color-button-secondary));\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }